API tools faq
paste
View difference between Paste ID: 3BJqVmZj and Zw7ghR6f
SHOW: | | - or go back to the newest paste.
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
        

    


            


                                


        

            



                
    

        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!