API tools faq
paste
coding_giants

Magic 8-Ball starter

coding_giants
Nov 8th, 2023
55
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.88 KB | None | 0 0
raw download clone embed print report diff
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <!-- Add the title for the page here -->
  5.  
  6. <meta charset="utf-8" />
  7. <meta name="viewport" content="width=device-width, initial-scale=1" />
  8. <!-- Add an icon for the page here -->
  9.  
  10. <link rel="stylesheet" href="/style.css" />
  11.  
  12. <!-- *** Script responsible for predicting the future *** -->
  13. <!--<script src="/script.js" defer></script>-->
  14. </head>
  15. <body>
  16. <div class="content" role="main">
  17. <!-- Add an h1 header with the content: "In the Land of the Future" here -->
  18.  
  19. <!-- Add an h2 header with the content: "Ask the Crystal Ball <br> and Discover Your Future in 50 Years" here -->
  20. <div id="questions">
  21. <label>
  22. <input type="radio" class="option-input radio" name="questions" value="0" checked />
  23. What will be my profession?
  24. </label>
  25. <label>
  26. <input type="radio" class="option-input radio" name="questions" value="1" />
  27. What will my space home look like?
  28. </label>
  29. <label>
  30. <input type="radio" class="option-input radio" name="questions" value="2" />
  31. What will I use for accomodation?
  32. </label>
  33. </div>
  34.  
  35. <div id="crystal-container">
  36. <div id="crystal">
  37. <!-- Add an image of the crystal ball here -->
  38.  
  39. <!-- Add a button with id="button" and content: "Check" here -->
  40.  
  41. </div>
  42. <!-- Add a default image for the crystal ball screen and set id="screen"-->
  43.  
  44. </div>
  45. </div>
  46. </body>
  47. </html>
  48.  
  49. @font-face {
  50. font-family: Tektur;
  51. src: url("https://cdn.glitch.global/9c825c16-b4c3-4f2d-a2d2-51f3624f6303/Czcionka_Tektur.ttf?v=1690043449282")
  52. format("opentype");
  53. }
  54.  
  55. @font-face {
  56. font-family: Bungee;
  57. src: url("https://cdn.glitch.global/9c825c16-b4c3-4f2d-a2d2-51f3624f6303/Czcionka_BungeeHairline.ttf?v=1690044154180")
  58. format("opentype");
  59. }
  60.  
  61. body {
  62. background: #1d294e;
  63. font-family: 'Bungee', sans-serif;
  64. font-weight: bold;
  65. color: white;
  66. text-align: center;
  67. }
  68.  
  69. #crystal-container{
  70. background: #17254c no-repeat top;
  71. /* Set the background image here (background-image: url('') ) by pasting the image link */
  72.  
  73. z-index: -10;
  74. height: 650px;
  75. padding-top: 35px;
  76. border: 2px outset #1d294e;
  77. border-top: 0px;
  78. }
  79.  
  80. #questions{
  81. border: 0px outset #1d294e;
  82. /* Set the frame thickness (border-width) to 2px */
  83.  
  84. border-bottom: 0px;
  85. padding-bottom: 15px;
  86. background: #192c61;
  87. }
  88.  
  89. h1{
  90. font-family: 'Tektur', sans-serif;
  91. font-size: 40pt;
  92. background: linear-gradient(to top, #28c4f3 17%, #033bbf 59%);
  93. -webkit-background-clip: text;
  94. -webkit-text-fill-color: transparent;
  95. -webkit-text-stroke-width: 1px;
  96. -webkit-text-stroke-color: white;
  97. }
  98.  
  99. #crystal {
  100. width: 600px;
  101. margin: 0px auto;
  102. position: relative;
  103. z-index: 10;
  104. }
  105.  
  106. #screen {
  107. width: 280px;
  108. z-index: 0;
  109. position: relative;
  110. top: -560px;
  111. opacity: 0.8;
  112. border-radius: 100%;
  113. }
  114.  
  115. #button {
  116. padding: 20px;
  117. border: none;
  118. cursor: pointer;
  119. /* Set the button text color (color) to white */
  120.  
  121. background: rgb(40,196,243);
  122. background: radial-gradient(circle, rgba(40,196,243,1) 0%, rgba(3,59,191,1) 100%);
  123. border-radius: 100%;
  124. box-shadow: 0px 10px 0px 0px grey;
  125. z-index: 10;
  126. position: relative;
  127. top: -150px;
  128. font-family: 'Bungee', sans-serif;
  129. font-weight: bold;
  130. }
  131.  
  132. #crystal:hover {
  133. animation: shake 0.5s infinite;
  134. }
  135.  
  136. button:active {
  137. animation: puff 4s 1;
  138. }
  139.  
  140. @keyframes shake {
  141. 0% { transform: translate(1px, 1px) rotate(0deg); }
  142. 10% { transform: translate(-1px, -2px) rotate(-1deg); }
  143. 20% { transform: translate(-3px, 0px) rotate(1deg); }
  144. 30% { transform: translate(3px, 2px) rotate(0deg); }
  145. 40% { transform: translate(1px, -1px) rotate(1deg); }
  146. 50% { transform: translate(-1px, 2px) rotate(-1deg); }
  147. 60% { transform: translate(-3px, 1px) rotate(0deg); }
  148. 70% { transform: translate(3px, 1px) rotate(-1deg); }
  149. 80% { transform: translate(-1px, -1px) rotate(1deg); }
  150. 90% { transform: translate(1px, 2px) rotate(0deg); }
  151. 100% { transform: translate(1px, -2px) rotate(-1deg); }
  152. }
  153.  
  154. @keyframes puff {
  155. 0% { filter: brightness(0%); }
  156. 5% { filter: brightness(120%); }
  157. 100% { filter: brightness(1000%); }
  158. }
  159.  
  160. .content{
  161. width: 900px;
  162. margin: 0px auto;
  163. }
  164.  
  165. label{
  166. display: block;
  167. line-height: 40px;
  168. }
  169.  
  170. .option-input {
  171. -webkit-appearance: none;
  172. -moz-appearance: none;
  173. -ms-appearance: none;
  174. -o-appearance: none;
  175. appearance: none;
  176. position: relative;
  177. top: 13.33333px;
  178. right: 0;
  179. bottom: 0;
  180. left: 0;
  181. height: 40px;
  182. width: 40px;
  183. transition: all 0.15s ease-out 0s;
  184. background: #cbd1d8;
  185. border: none;
  186. color: #ffffff;
  187. cursor: pointer;
  188. display: inline-block;
  189. margin-right: 0.5rem;
  190. outline: none;
  191. position: relative;
  192. z-index: 1000;
  193. }
  194.  
  195. .option-input:hover {
  196. background: #9faab7;
  197. }
  198.  
  199. .option-input:checked {
  200. background: #1fa4e6;
  201. }
  202.  
  203. .option-input:checked::before {
  204. width: 40px;
  205. height: 40px;
  206. display: flex;
  207. content: '';
  208. font-size: 25px;
  209. font-weight: bold;
  210. position: absolute;
  211. align-items: center;
  212. justify-content: center;
  213. }
  214.  
  215. .option-input:checked::after {
  216. -webkit-animation: click-wave 0.65s;
  217. -moz-animation: click-wave 0.65s;
  218. animation: click-wave 0.65s;
  219. background: #1fa4e6;
  220. content: '';
  221. display: block;
  222. position: relative;
  223. z-index: 100;
  224. }
  225.  
  226. .option-input.radio {
  227. border-radius: 50%;
  228. }
  229.  
  230. .option-input.radio::after {
  231. border-radius: 50%;
  232. }
  233.  
  234. @keyframes click-wave {
  235. 0% {
  236. height: 40px;
  237. width: 40px;
  238. opacity: 0.35;
  239. position: relative;
  240. }
  241. 100% {
  242. height: 200px;
  243. width: 200px;
  244. margin-left: -80px;
  245. margin-top: -80px;
  246. opacity: 0;
  247. }
  248. }
  249.  
  250. /* You can paste links to your house images here - replacing the existing ones.
  251. Important - there must always be 5 links */
  252. const houses = [
  253. "https://cdn.glitch.global/9c825c16-b4c3-4f2d-a2d2-51f3624f6303/dom%20(1).png?v=1690059355819",
  254. "https://cdn.glitch.global/9c825c16-b4c3-4f2d-a2d2-51f3624f6303/dom%20(2).jpg?v=1690059356483",
  255. "https://cdn.glitch.global/9c825c16-b4c3-4f2d-a2d2-51f3624f6303/dom%20(3).jpg?v=1690059356948",
  256. "https://cdn.glitch.global/9c825c16-b4c3-4f2d-a2d2-51f3624f6303/dom%20(4).jpg?v=1690059357494",
  257. "https://cdn.glitch.global/9c825c16-b4c3-4f2d-a2d2-51f3624f6303/dom%20(5).jpg?v=1691263838668"
  258. ];
  259.  
  260. /* You can paste links to your profession images here - replacing the existing ones.
  261. Important - there must always be 5 links */
  262. const professions = [
  263. "https://cdn.glitch.global/de89cf25-4e3d-4dd7-a9e6-9a5a1fd2e5fb/praca%20(1).png?v=1691228542339",
  264. "https://cdn.glitch.global/9c825c16-b4c3-4f2d-a2d2-51f3624f6303/praca%20(2).png?v=1691057240824",
  265. "https://cdn.glitch.global/9c825c16-b4c3-4f2d-a2d2-51f3624f6303/praca%20(3).png?v=1691057241531",
  266. "https://cdn.glitch.global/9c825c16-b4c3-4f2d-a2d2-51f3624f6303/praca%20(4).png?v=1691057238814",
  267. "https://cdn.glitch.global/9c825c16-b4c3-4f2d-a2d2-51f3624f6303/praca%20(5).png?v=1691057239496"
  268. ];
  269.  
  270. /* You can paste links to your vehicle images here - replacing the existing ones.
  271. Important - there must always be 5 links */
  272. const vehicles = [
  273. "https://cdn.glitch.global/9c825c16-b4c3-4f2d-a2d2-51f3624f6303/pojazd%20(1).jpg?v=1690059358456",
  274. "https://cdn.glitch.global/9c825c16-b4c3-4f2d-a2d2-51f3624f6303/pojazd%20(2).png?v=1691057288446",
  275. "https://cdn.glitch.global/9c825c16-b4c3-4f2d-a2d2-51f3624f6303/pojazd%20(3).png?v=1691057297634",
  276. "https://cdn.glitch.global/9c825c16-b4c3-4f2d-a2d2-51f3624f6303/pojazd%20(4).jpg?v=1690059359924",
  277. "https://cdn.glitch.global/9c825c16-b4c3-4f2d-a2d2-51f3624f6303/pojazd%20(5).jpg?v=1690059360429"
  278. ];
  279.  
  280. const screenAnim = [
  281. { transform: "rotate(0) scale(1)", filter: "brightness(0%)"},
  282. { transform: "rotate(360deg) scale(0)" , filter: "brightness(5000%)" },
  283. ];
  284.  
  285. const screenTiming = {
  286. duration: 1000,
  287. iterations: 1,
  288. };
  289.  
  290. const image = document.querySelector("#screen");
  291.  
  292. let imageCounter = Math.floor(Math.random() * 5);
  293. let currentState = 0;
  294.  
  295. function newGame(){
  296. currentState = 0;
  297.  
  298. var selectValue = Array.from(document.getElementsByName("questions")).find(radio => radio.checked);
  299. var questionNumber = selectValue.value;
  300.  
  301. if (questionNumber == 0) image.src = professions[imageCounter];
  302. if (questionNumber == 1) image.src = houses[imageCounter];
  303. if (questionNumber == 2) image.src = vehicles[imageCounter];
  304.  
  305. document.querySelector("#button").disabled = false;
  306. }
  307.  
  308. document.querySelector("#button").addEventListener("click", function () {
  309.  
  310. /* Replace the image randomization with the following two lines */
  311. imageCounter++;
  312. if (imageCounter >= 5) imageCounter = 0;
  313.  
  314. document.querySelector("#button").disabled = true;
  315. image.animate(screenAnim, screenTiming)
  316. setTimeout(newGame, 850);
  317. });
  318.  
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!