├── .vscode
    └── settings.json
├── assets
    ├── 1.webp
    ├── 2.webp
    ├── 3.webp
    ├── 4.webp
    ├── 5.webp
    ├── g5.gif
    ├── mmm.gif
    ├── pusn.gif
    ├── weee.gif
    ├── wp.jpg
    ├── bunga.gif
    ├── ciumin.gif
    ├── emawh.gif
    ├── kadoin.png
    ├── mikir.gif
    ├── wortel.gif
    ├── cilukba.gif
    ├── envelope.png
    ├── gigitin.gif
    ├── tarikin.gif
    ├── hearthappy.gif
    ├── pandacoklat.gif
    ├── pandakuning.gif
    ├── pandapanah.gif
    └── 0906-peacegoma.gif
└── index.html


/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |     "liveServer.settings.port": 5504
3 | }


--------------------------------------------------------------------------------
/assets/1.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aoudumber-Bade/Happy-Birthday-v8/HEAD/assets/1.webp


--------------------------------------------------------------------------------
/assets/2.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aoudumber-Bade/Happy-Birthday-v8/HEAD/assets/2.webp


--------------------------------------------------------------------------------
/assets/3.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aoudumber-Bade/Happy-Birthday-v8/HEAD/assets/3.webp


--------------------------------------------------------------------------------
/assets/4.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aoudumber-Bade/Happy-Birthday-v8/HEAD/assets/4.webp


--------------------------------------------------------------------------------
/assets/5.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aoudumber-Bade/Happy-Birthday-v8/HEAD/assets/5.webp


--------------------------------------------------------------------------------
/assets/g5.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aoudumber-Bade/Happy-Birthday-v8/HEAD/assets/g5.gif


--------------------------------------------------------------------------------
/assets/mmm.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aoudumber-Bade/Happy-Birthday-v8/HEAD/assets/mmm.gif


--------------------------------------------------------------------------------
/assets/pusn.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aoudumber-Bade/Happy-Birthday-v8/HEAD/assets/pusn.gif


--------------------------------------------------------------------------------
/assets/weee.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aoudumber-Bade/Happy-Birthday-v8/HEAD/assets/weee.gif


--------------------------------------------------------------------------------
/assets/wp.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aoudumber-Bade/Happy-Birthday-v8/HEAD/assets/wp.jpg


--------------------------------------------------------------------------------
/assets/bunga.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aoudumber-Bade/Happy-Birthday-v8/HEAD/assets/bunga.gif


--------------------------------------------------------------------------------
/assets/ciumin.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aoudumber-Bade/Happy-Birthday-v8/HEAD/assets/ciumin.gif


--------------------------------------------------------------------------------
/assets/emawh.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aoudumber-Bade/Happy-Birthday-v8/HEAD/assets/emawh.gif


--------------------------------------------------------------------------------
/assets/kadoin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aoudumber-Bade/Happy-Birthday-v8/HEAD/assets/kadoin.png


--------------------------------------------------------------------------------
/assets/mikir.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aoudumber-Bade/Happy-Birthday-v8/HEAD/assets/mikir.gif


--------------------------------------------------------------------------------
/assets/wortel.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aoudumber-Bade/Happy-Birthday-v8/HEAD/assets/wortel.gif


--------------------------------------------------------------------------------
/assets/cilukba.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aoudumber-Bade/Happy-Birthday-v8/HEAD/assets/cilukba.gif


--------------------------------------------------------------------------------
/assets/envelope.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aoudumber-Bade/Happy-Birthday-v8/HEAD/assets/envelope.png


--------------------------------------------------------------------------------
/assets/gigitin.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aoudumber-Bade/Happy-Birthday-v8/HEAD/assets/gigitin.gif


--------------------------------------------------------------------------------
/assets/tarikin.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aoudumber-Bade/Happy-Birthday-v8/HEAD/assets/tarikin.gif


--------------------------------------------------------------------------------
/assets/hearthappy.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aoudumber-Bade/Happy-Birthday-v8/HEAD/assets/hearthappy.gif


--------------------------------------------------------------------------------
/assets/pandacoklat.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aoudumber-Bade/Happy-Birthday-v8/HEAD/assets/pandacoklat.gif


--------------------------------------------------------------------------------
/assets/pandakuning.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aoudumber-Bade/Happy-Birthday-v8/HEAD/assets/pandakuning.gif


--------------------------------------------------------------------------------
/assets/pandapanah.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aoudumber-Bade/Happy-Birthday-v8/HEAD/assets/pandapanah.gif


--------------------------------------------------------------------------------
/assets/0906-peacegoma.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aoudumber-Bade/Happy-Birthday-v8/HEAD/assets/0906-peacegoma.gif


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 |     <meta charset='UTF-8' />
  6 |     <meta content='width=device-width, initial-scale=1, user-scalable=1, minimum-scale=1, maximum-scale=5'
  7 |         name='viewport' />
  8 |     <meta content='IE=edge' http-equiv='X-UA-Compatible' />
  9 | 
 10 |     <link rel="preconnect" href="https://fonts.googleapis.com">
 11 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 12 |     <link href="https://fonts.googleapis.com/css2?family=Shippori+Antique:wght@400;700&display=swap" rel="stylesheet">
 13 |     <link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">
 14 |     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.19/dist/sweetalert2.all.min.js"></script>
 15 |     <script src="https://unpkg.com/typeit@8.7.0/dist/index.umd.js"></script>
 16 |     <script src="https://kit.fontawesome.com/4f3ce16e3e.js" crossorigin="anonymous"></script>
 17 |     <title>Happy Birthday v8</title>
 18 |     <link rel="icon" type="image/x-icon" href="https://www.palingit.com/favicon.ico">
 19 |     <meta name="description" content="HTML Replit Coding">
 20 | </head>
 21 | <style>
 22 |     @import url('https://fonts.googleapis.com/css2?family=Caveat&display=swap');
 23 | 
 24 |     :root {
 25 |         --tombol-bg: rgba(0, 0, 0, .3);
 26 |         --tombol-teks: #fff;
 27 |         --tombol-bingkai: #fff;
 28 |         --bingkai: 8px;
 29 |         --bingkai-kiri: 1.3px solid var(--tombol-bingkai);
 30 |         --bingkai-kanan: 1.3px solid var(--tombol-bingkai);
 31 |         --gaya-font: 'Shippori Antique', sans-serif;
 32 |         --gaya-font2: 'Dancing Script', sans-serif;
 33 |         --gaya-font3: 'Caveat', cursive;
 34 |     }
 35 | 
 36 |     @keyframes fanim {
 37 |         0% {
 38 |             background-position: 0% 0%;
 39 |         }
 40 | 
 41 |         25% {
 42 |             background-position: 100% 100%;
 43 |         }
 44 | 
 45 |         50% {
 46 |             background-position: 0% 100%;
 47 |         }
 48 | 
 49 |         75% {
 50 |             background-position: 50% 50%;
 51 |         }
 52 | 
 53 |         100% {
 54 |             background-position: 0% 0%;
 55 |         }
 56 |     }
 57 | 
 58 |     body {
 59 |         background-color: #000;
 60 |         font-family: var(--gaya-font);
 61 |         padding: 20px 25px;
 62 |         -webkit-user-select: none;
 63 |         -ms-user-select: none;
 64 |         user-select: none;
 65 |     }
 66 | 
 67 |     a {
 68 |         text-decoration: none;
 69 |     }
 70 | 
 71 |     body::before {
 72 |         content: "\00A9  Instagram | @aoudumber.dev";
 73 |         color: white;
 74 |         opacity: .05;
 75 |         font-size: 10px;
 76 |         position: fixed;
 77 |         bottom: 25px;
 78 |         right: 25px;
 79 |         z-index: 2
 80 |     }
 81 | 
 82 |     #bodyblur {
 83 |         opacity: 0;
 84 |         position: fixed;
 85 |         top: 0;
 86 |         left: 0;
 87 |         right: 0;
 88 |         bottom: 0;
 89 |         background: rgba(0, 0, 0, .3);
 90 |         transition: all 1s ease;
 91 |     }
 92 | 
 93 |     #wallpaper {
 94 |         width: 100%;
 95 |         height: 100%;
 96 |         transform: scale(2);
 97 |         transition: all 1.3s ease;
 98 |     }
 99 | 
100 |     #beneranblur {
101 |         position: fixed;
102 |         top: 0;
103 |         left: 0;
104 |         right: 0;
105 |         bottom: 0;
106 |         background: rgba(0, 0, 0, .3);
107 |         -webkit-backdrop-filter: blur(0px);
108 |         backdrop-filter: blur(0px);
109 |         transition: all 3s ease;
110 |     }
111 | 
112 |     @keyframes jj {
113 |         0% {
114 |             transform: scale(1.1);
115 |         }
116 | 
117 |         50% {
118 |             transform: scale(1.2);
119 |         }
120 | 
121 |         100% {
122 |             transform: scale(1.1);
123 |         }
124 |     }
125 | 
126 |     @keyframes rts {
127 |         from {
128 |             transform: scale(.1);
129 |         }
130 | 
131 |         to {
132 |             transform: scale(1);
133 |         }
134 |     }
135 | 
136 |     @keyframes rto {
137 |         from {
138 |             transform: scale(1);
139 |         }
140 | 
141 |         to {
142 |             transform: scale(1.1);
143 |         }
144 |     }
145 | 
146 |     @keyframes aniopa {
147 |         0% {
148 |             transform: scale(1);
149 |         }
150 | 
151 |         50% {
152 |             transform: scale(.75);
153 |         }
154 | 
155 |         100% {
156 |             transform: scale(1);
157 |         }
158 |     }
159 | 
160 |     @keyframes rtf {
161 |         from {
162 |             transform: rotate(0deg);
163 |         }
164 | 
165 |         to {
166 |             transform: rotate(360deg);
167 |         }
168 |     }
169 | 
170 |     @keyframes rt {
171 |         from {
172 |             transform: scale(.9);
173 |             /* transform: rotate(-5deg); */
174 |         }
175 | 
176 |         to {
177 |             transform: scale(1);
178 |             /* transform: rotate(5deg); */
179 |         }
180 |     }
181 | 
182 |     @keyframes kont {
183 |         0% {
184 |             left: -1px;
185 |             top: -3px;
186 |         }
187 | 
188 |         50% {
189 |             left: 1px;
190 |             top: 3px;
191 |         }
192 | 
193 |         100% {
194 |             left: -1px;
195 |             top: -3px;
196 |         }
197 |     }
198 | 
199 |     blockquote {
200 |         position: absolute;
201 |         opacity: 0;
202 |         visibility: hidden;
203 |         margin-top: 100px;
204 |         background: var(--tombol-bg);
205 |         border-radius: 18px 0 18px 0;
206 |         box-shadow: rgba(255, 255, 255, 0.3) 0px 7px 29px 0px;
207 |         transform: scale(.1);
208 |         transition: all 1s ease;
209 |         margin-top: 120px;
210 |         margin-left: 0;
211 |         margin-right: 0;
212 |         color: var(--tombol-teks);
213 |         text-shadow: 0px 2px 2px rgba(0, 0, 0, .8);
214 |     }
215 | 
216 |     blockquote {
217 |         width: 400px;
218 |         text-align: center;
219 |         line-height: 1.3em;
220 |         padding: 20px;
221 |     }
222 | 
223 |     blockquote::before {
224 |         content: attr(data-text);
225 |         opacity: .7;
226 |         font-family: sans-serif;
227 |         position: absolute;
228 |         left: 8px;
229 |         top: 8px;
230 |         min-width: 15px;
231 |         font-size: 16px;
232 |         text-align: center
233 |     }
234 | 
235 |     blockquote::after {
236 |         content: "";
237 |         position: absolute;
238 |         border: 1px solid #fff;
239 |         border-radius: 18px 0 18px 0;
240 |         top: -8px;
241 |         bottom: -8px;
242 |         left: -8px;
243 |         right: -8px;
244 |     }
245 | 
246 |     blockquote p {
247 |         font-size: 16px;
248 |         font-weight: 700;
249 |         line-height: 1.4em;
250 |         transition: all .5s ease;
251 |     }
252 | 
253 |     blockquote>.gaya2 {
254 |         font-size: 15px;
255 |         font-weight: 400
256 |     }
257 | 
258 |     blockquote>#pesan3 {
259 |         position: absolute;
260 |         opacity: 0;
261 |         transform: scale(.1);
262 |         transition: all .7s ease;
263 |     }
264 | 
265 |     blockquote>#pesan5,
266 |     blockquote>#pesan8 {
267 |         margin-top: 25px
268 |     }
269 | 
270 |     blockquote p:not(#opsL, #kalimat, #pesan3, .gaya2) {
271 |         display: none;
272 |     }
273 | 
274 |     blockquote>#opsL {
275 |         text-align: right;
276 |         font-size: 11px;
277 |         font-weight: 400;
278 |         line-height: 0;
279 |         margin-top: 24px;
280 |         color: white;
281 |         opacity: 0;
282 |         transition: all .2s ease;
283 |     }
284 | 
285 |     #Tombol {
286 |         position: relative;
287 |         opacity: 0;
288 |         margin: 0;
289 |         display: flex;
290 |         align-items: left;
291 |         list-style: none;
292 |         transform: scale(.1);
293 |         transition: all 1s ease;
294 |     }
295 | 
296 |     #Tombol a {
297 |         cursor: pointer;
298 |         display: inline-flex;
299 |         align-items: center;
300 |         margin: 0;
301 |         margin: 12px 0 12px 0;
302 |         transition: all .2s ease;
303 |         padding: 10px;
304 |         outline: 0;
305 |         border: 1px solid #fefefeba;
306 |         border-radius: 10px 0 10px 0;
307 |         line-height: 15px;
308 |         background: rgba(0, 0, 0, .5);
309 |         color: var(--tombol-teks);
310 |         font-size: 12px;
311 |         font-weight: 700;
312 |         white-space: nowrap;
313 |         overflow: hidden;
314 |         box-shadow: rgba(255, 255, 255, 0.3) 0px 7px 29px 0px;
315 |         z-index: 1
316 |     }
317 | 
318 |     #Bn {
319 |         margin: 12px 0 12px 12px !important;
320 |     }
321 | 
322 |     #Bn2 {
323 |         position: absolute;
324 |         opacity: 0;
325 |         width: 0
326 |     }
327 | 
328 |     #Content {
329 |         animation-name: none;
330 |         animation-duration: 3s;
331 |         animation-iteration-count: infinite;
332 |         position: relative;
333 |         opacity: 0;
334 |         margin-top: 50px;
335 |         width: 100%;
336 |         height: 180px;
337 |         transition: all .7s ease;
338 |     }
339 | 
340 |     #Content>* {
341 |         display: flex;
342 |         align-items: center;
343 |         text-align: center;
344 |         justify-content: center;
345 |         margin-top: 1px;
346 |     }
347 | 
348 |     .kumpulanstiker>img {
349 |         display: none;
350 |         background: rgba(255, 255, 255, 0.2);
351 |         box-shadow: 0 4px 30px rgba(255, 255, 255, 0.3);
352 |         backdrop-filter: blur(5px);
353 |         -webkit-backdrop-filter: blur(5px);
354 |         border: 1px solid rgba(255, 255, 255, 0.3);
355 |         border-radius: 50%;
356 |         padding: 10px;
357 |         width: 100px;
358 |         height: 100px;
359 |         margin: 20px 0;
360 |     }
361 | 
362 |     #fotostiker {
363 |         opacity: .1;
364 |         transition: all 1.2s ease;
365 |         transform: scale(.1);
366 |     }
367 | 
368 |     .halo {
369 |         font-size: 18px !important;
370 |         position: relative;
371 |         margin: 15px 0 20px 0
372 |     }
373 | 
374 |     .halo.gaya2 {
375 |         font-family: var(--gaya-font2);
376 |         font-size: 24px !important;
377 |         margin-top: 20px !important;
378 |     }
379 | 
380 |     .halo.sty3 {
381 |         position: absolute !important;
382 |         font-size: 14px !important;
383 |         font-weight: 400 !important;
384 |         margin: 30px 20px !important;
385 |     }
386 | 
387 |     #fotolove img {
388 |         transition: all .5s ease;
389 |         width: 75px;
390 |         height: 75px;
391 |         padding: 0;
392 |         background: none
393 |     }
394 | 
395 |     #kadoIn img {
396 |         display: inline-flex;
397 |         background: none;
398 |         width: 130px;
399 |         height: 130px;
400 |         transition: all .3s ease;
401 |     }
402 | 
403 |     #ket,
404 |     .halo {
405 |         text-shadow: 0px 2px 2px rgba(0, 0, 0, .8);
406 |         font-size: 17px;
407 |         font-weight: 700;
408 |         color: white
409 |     }
410 | 
411 |     #ket {
412 |         margin-top: 25px !important;
413 |         font-weight: 400;
414 |     }
415 | 
416 |     #kadoIn img:hover {
417 |         transform: scale(.9);
418 |     }
419 | 
420 |     #kolombaru {
421 |         position: absolute;
422 |         opacity: 0;
423 |         display: flex;
424 |         transform: scale(.1);
425 |         transition: all 1s ease;
426 |         align-items: center;
427 |         text-align: center;
428 |         justify-content: center;
429 |         z-index: 1;
430 |     }
431 | 
432 |     #kolombaru>li {
433 |         margin: 8px;
434 |         padding: 0;
435 |         list-style-type: none;
436 |     }
437 | 
438 |     #kolombaru li {
439 |         opacity: .8;
440 |         display: flex;
441 |         font-size: 30px
442 |     }
443 | 
444 |     #kolombaru li:hover {
445 |         opacity: .5;
446 |         transform: scale(1.15);
447 |         transition: all .3s ease;
448 |     }
449 | 
450 |     .kolomrange {
451 |         padding: 0;
452 |         background: none;
453 |         position: relative;
454 |         z-index: 1;
455 |         display: none;
456 |         transition: all 1s ease;
457 |         align-items: center;
458 |     }
459 | 
460 |     .kolomrange .inirange {
461 |         width: 100%;
462 |         height: 40px;
463 |         margin-right: 15px;
464 |         display: flex;
465 |         align-items: center;
466 |         text-align: center;
467 |         justify-content: center;
468 |     }
469 | 
470 |     .kolomrange .inirange input {
471 |         height: 10px;
472 |         width: 100%;
473 |         -webkit-appearance: none;
474 |         outline: none;
475 |         background: #f2f2f2;
476 |         border-radius: 25px;
477 |         box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.2);
478 |     }
479 | 
480 |     .kolomrange .inirange input::-webkit-slider-thumb {
481 |         -webkit-appearance: none;
482 |         appearance: none;
483 |         width: 20px;
484 |         height: 20px;
485 |         border-radius: 50%;
486 |         border: 3px solid #006FFF;
487 |         background: white;
488 |         transition: all .2s ease;
489 |     }
490 | 
491 |     .kolomrange .inirange input::-webkit-slider-thumb:hover {
492 |         border: 5px solid #006FFF;
493 |     }
494 | 
495 |     .kolomrange .inivalue {
496 |         color: white;
497 |         font-size: 20px
498 |     }
499 | 
500 |     .swal2-modal>* {
501 |         font-size: 16px;
502 |     }
503 | 
504 |     .swal2-title {
505 |         line-height: 1.3em;
506 |         font-size: 17px;
507 |         text-align: center;
508 |         padding: 15px 30px 0 30px;
509 |     }
510 | 
511 |     .swal2-timer-progress-bar-container>* {
512 |         opacity: .7;
513 |         background: #00B6FF;
514 |         margin: 0 2px
515 |     }
516 | 
517 |     .swal2-modal {
518 |         background: #EAEAEA;
519 |         box-shadow: 0 4px 30px rgba(255, 255, 255, 0.3);
520 |         backdrop-filter: blur(2px);
521 |         -webkit-backdrop-filter: blur(2px);
522 |         border: 1px solid rgba(255, 255, 255, 0.3);
523 |         border-radius: 8px;
524 |         max-width: 330px;
525 |         top: -60px;
526 |     }
527 | 
528 |     .swal2-styled.swal2-confirm,
529 |     .swal2-styled.swal2-cancel {
530 |         position: relative;
531 |         background-color: #4839eb;
532 |         color: #fff;
533 |         border-radius: 18px;
534 |         z-index: 1;
535 |         transition: all 0.2s;
536 |     }
537 | 
538 |     .fa-snowflake {
539 |         opacity: .3;
540 |         color: white;
541 |         font-size: 20px;
542 |         position: absolute;
543 |         animation: heartMove linear 1;
544 |         top: -10vh;
545 |         z-index: 0;
546 |     }
547 | 
548 |     @keyframes heartMove {
549 |         0% {
550 |             transform: translateY(-10vh);
551 |         }
552 | 
553 |         100% {
554 |             transform: translateY(100vh);
555 |         }
556 |     }
557 | 
558 |     .sembunyi,
559 |     #pesanditolak>*,
560 |     #kado2,
561 |     #kado3 {
562 |         display: none !important
563 |     }
564 | </style>
565 | 
566 | <body>
567 | 
568 |     <!-- Ganti Audio di sini -->
569 |     <audio src="" id="linkmp3" class="sembunyi"></audio>
570 | 
571 |     <div id="bodyblur">
572 |         <!-- Wallpaper --><img src="./assets/wp.jpg" id="wallpaper" />
573 |         <div id="beneranblur"></div>
574 |     </div>
575 | 
576 |     <div id='Content'>
577 | 
578 |         <div id="kadoIn">
579 |             <!-- Tombol Surat --><img src="./assets/kadoin.png" />
580 |         </div>
581 |         <p id="ket">Click the Gift!</p>
582 | 
583 |         <div class="kumpulanstiker">
584 |             <!-- Stiker untuk Konten -->
585 |             <img src="./assets/bunga.gif" id="fotostiker" />
586 |             <img src="./assets/pusn.gif" id="fotostiker1" />
587 |             <img src="./assets/pandacoklat.gif" id="fotostiker2" />
588 |             <img src="./assets/cilukba.gif" id="fotostiker3" />
589 |             <img src="./assets/pandakuning.gif" id="fotostiker4" />
590 |             <img src="./assets/emawh.gif" id="fotostiker5" />
591 | 
592 |             <img src="./assets/pandacoklat.gif" id="fotostiker6" />
593 |         </div>
594 | 
595 |         <p id="halo" class="halo"></p>
596 | 
597 |         <div>
598 |             <blockquote id='bq' data-text='&#10084;'>
599 |                 <p id="kalimat">I have something for you, turn up the volume, dear &#10084;</p>
600 | 
601 |                 <p id="pesan1">Tap here for your birthday surprise! 🎉&#10084;</p>
602 |                 <div id="kolombaru">
603 |                         <li id="lv1">🎂</li>
604 |                         <li id="lv2">🎁</li>
605 |                         <li id="lv3">🥳</li>
606 |                         <li id="lv4">💖</li>
607 |                 </div>
608 | 
609 |                 <p id="pesan2">Wait...</p>
610 |                 <!-- Pesan -->
611 |                 <p id="pesan3">Hey.. it's your birthday! &#10084;</p>
612 |                 <p id="pesan4">Happy Birthday My Love</p>
613 |                 <p id="pesan5" class="gaya2">Getting older, getting cuter hehe</p>
614 |                 <p id="pesan6" class="gaya2">Wishing you a long life, stay healthy dear wkwk &#10084;</p>
615 |                 <p id="pesan7" class="gaya2">Hope your fortune keeps flowing, until you don't know how to spend it!</p>
616 | 
617 |                 <p id="pesan8" class="gaya2">Souuuuuuuu.....</p>
618 |                 <p id="pesan9" class="gaya2">Hope you’re happy on your special day, you must be happy! I worked hard to
619 |                     make this, I even learned how to do it! &#10084;</p>
620 |                 <p id="pesan10" class="gaya2">Thank you for being my biggest support, caring about me, and always being
621 |                     there for me. Love you, dear. &#10084;</p>
622 | 
623 |                 <!-- Tombol Lanjut -->
624 |                 <p id="opsL">Click to Continue</p>
625 |             </blockquote>
626 |         </div>
627 | 
628 |         <!-- Tombol Kirim Pesan -->
629 |         <div id="Tombol"><a id="By">&#128140; Continue</a></div>
630 | 
631 |         <!-- Pesan Tambahan -->
632 |         <p id="katatambahan" class="sembunyi">Just Kidding Heheheh 😂</p>
633 | 
634 |         <!-- Pesan Ditolak -->
635 |         <div id="pesanditolak">
636 |             <img id="stikerditolak" src="./assets/weee.gif" />
637 |             <p id="kataditolak">Just Kidding Heheheh 😂</p>
638 |         </div>
639 | 
640 |     </div>
641 | 
642 |     <script>
643 |         const body = document.querySelector("body"); const swalst = Swal.mixin({ timer: 2300, allowOutsideClick: false, showConfirmButton: false, timerProgressBar: true, imageHeight: 90, }); audio = new Audio('' + linkmp3.src); ftganti = 0; fungsi = 0; fungsiAwal = 0; deffotostiker = fotostiker.src; function berjatuhan() { const heart = document.createElement("div"); heart.className = "fas fa-snowflake"; heart.style.left = (Math.random() * 90) + "vw"; heart.style.animationDuration = (Math.random() * 3) + 2 + "s"; body.appendChild(heart); } setInterval(function name(params) { var heartArr = document.querySelectorAll(".fa-snowflake"); if (heartArr.length > 100) { heartArr[0].remove() } }, 100); Content.style = "opacity:1;margin-top:16vh"; const swals = Swal.mixin({ allowOutsideClick: false, cancelButtonColor: '#FF0040', imageHeight: 80, });
644 | 
645 |         document.getElementById("kadoIn").onclick = function () { if (fungsiAwal == 0) { audio.play(); fungsiAwal = 1; kadoIn.style = "transition:all .30s ease;transform:scale(10);opacity:0"; wallpaper.style = "transform: scale(1.6);"; ket.style = "display:none"; setTimeout(initengahan, 500); setTimeout(inipesan, 500) } }
646 | 
647 |         async function inipesan() {
648 |             var { value: nama } = await swals.fire({
649 |                 title: 'Your name?',
650 |                 input: 'text',
651 |                 confirmButtonText: 'Continue',
652 |                 showCancelButton: false,
653 |             });
654 |             if (nama && nama.length < 11) {
655 |                 window.nama = nama;
656 |                 vketikhalo = "Hi, " + nama + " &#10084;";
657 |                 await swals.fire('Hi, ' + nama + ' ツ');
658 |                 await swals.fire('It\'s your birthday today!');
659 |                 await swals.fire('Happy birthday! 🎉');
660 |                 await swals.fire('Wishing you a long and healthy life');
661 |                 pilihwarna();
662 |             } else {
663 |                 await swals.fire('Oops!', 'Name cannot be empty or more than 10 characters!');
664 |                 inipesan();
665 |             }
666 |         }
667 | 
668 |         async function pilihwarna() {
669 |             var { isConfirmed: warna } = await swals.fire({
670 |                 title: 'Oh, ' + nama + ', which color do you want to choose?',
671 |                 text: 'Come on, don\'t hesitate :v',
672 |                 showCancelButton: true,
673 |                 confirmButtonText: 'Blue',
674 |                 cancelButtonText: 'Red',
675 |             });
676 |             if (warna) {
677 |                 await swals.fire('Yeayy!', 'If you choose <b>Blue</b>, you have to treat me! &#129315;');
678 |                 var { isConfirmed: warna2 } = await swals.fire({
679 |                     title: nama + ', are you sure you want Blue?',
680 |                     text: 'Or do you want to change the color?', showCancelButton: true,
681 |                     confirmButtonText: 'Sure',
682 |                     cancelButtonText: 'Change',
683 |                 });
684 |                 if (warna2) {
685 |                     await swals.fire('Okay!', `Now look at this &#10084;&#65039;`);
686 |                     mulainama();
687 |                 } else {
688 |                     await swals.fire('Okay, choosing Red!', 'It\'s actually the same, but if you choose Red, you have to treat me more! &#129315;');
689 |                     mulainama();
690 |                 }
691 |             } else {
692 |                 await swals.fire('Yeayy!', 'If you choose <b>Red</b>, you have to treat me! &#129315;');
693 |                 var { isConfirmed: warna2 } = await swals.fire({
694 |                     title: nama + ', are you sure you want Red?',
695 |                     text: 'Or do you want to change the color?', showCancelButton: true,
696 |                     confirmButtonText: 'Change',
697 |                     cancelButtonText: 'Sure',
698 |                 });
699 |                 if (warna2) {
700 |                     await swals.fire('Okay, choosing Blue!', 'It\'s actually the same, but if you choose Blue, you have to treat me more! &#129315;');
701 |                     mulainama();
702 |                 } else {
703 |                     await swals.fire('Okay!', `Now look at this`);
704 |                     mulainama();
705 |                 }
706 |             }
707 |         }
708 | 
709 |         //Variable Pertanyaan Akhir
710 |         var tanya = 'Do you want a gift? ';
711 |         var opstanya = 'Please answer';
712 |         var tompositif = 'Yes';
713 |         var tomnegatif = 'Yes Yes Yes &#10084;';
714 | 
715 |         async function menuju() { pesanwhatsapp = "Thank you for wishing " + nama + " a happy birthday ><"; await swals.fire('OK!', 'Please screen record this, sometimes my code has errors, I\'m still learning', 'success'); window.location = "https://api.whatsapp.com/send?phone=&text=" + pesanwhatsapp; }
716 | 
717 |         function initengahan() {
718 |             kadoIn.style = "display:none"; ket.style = "display:none";
719 |             Content.style = "opacity:1;margin-top:0";
720 |             bodyblur.style = "opacity:.7";
721 |             wallpaper.style = "transform: scale(1.5);";
722 |         }
723 | 
724 |         async function mulainama() {
725 | 
726 |             bodyblur.style = "opacity:.1";
727 |             wallpaper.style = "transform: scale(1);";
728 |             fotostiker.style = "display:inline-flex;"; setTimeout(ftmuncul, 200);
729 |             setTimeout(kethalo, 500);
730 |         }
731 | 
732 |         function ftmuncul() {
733 |             if (ftganti == 0) { fotostiker.src = deffotostiker; }
734 |             if (ftganti == 1) { fotostiker.src = fotostiker1.src; }
735 |             if (ftganti == 2) { fotostiker.src = fotostiker2.src; }
736 |             if (ftganti == 3) { fotostiker.src = fotostiker3.src; }
737 |             if (ftganti == 4) { fotostiker.src = fotostiker4.src; }
738 |             if (ftganti == 5) { fotostiker.src = fotostiker5.src; }
739 | 
740 |             fotostiker.style = "display:inline-flex;opacity:1;transform:scale(1)";
741 |         }
742 |         function fthilang() { fotostiker.style = "display:inline-flex;opacity:0;transition:all .7s ease;transform:scale(.1)"; }
743 |         function jjfoto() { fotostiker.style.animation = "rto .8s infinite alternate"; }
744 | 
745 |         function bqmuncul() { bq.style = "position:relative;opacity:1;visibility:visible;transform: scale(1);margin-top:0"; mulaiketik1(); }
746 |         function bqhilang() { wallpaper.style = "transform: scale(2);"; bodyblur.style = "opacity:.3"; bq.style = "position:relative;transition:all .7s ease;"; }
747 |         function kethalo() { new TypeIt("#halo", { strings: ["" + vketikhalo], startDelay: 50, speed: 40, waitUntilVisible: true, afterComplete: function () { halo.innerHTML = vketikhalo; setTimeout(bqmuncul, 200); }, }).go(); }
748 | 
749 |         function tombol() { wallpaper.style = "transform: scale(1);"; Tombol.style = "opacity:1;transform: scale(1);"; if (fungsi == 2) { By.innerHTML = "&#128140; Send" } }
750 |         document.getElementById("By").onclick = function () { if (fungsi == 1) { Tombol.style = ""; fthilang(); fungsi = 0; pertanyaan(); } if (fungsi == 2) { Tombol.style = ""; menuju(); } }
751 | 
752 |         const waktuSekarang = new Date().getHours(); let ucapan;
753 |         if (waktuSekarang < 10) { ucapan = "Good Morning, "; }
754 |         else if (waktuSekarang < 16) { ucapan = "Good Afternoon, "; }
755 |         else if (waktuSekarang < 19) { ucapan = "Good Evening, "; }
756 |         else { ucapan = "Good Night, "; }
757 | 
758 |         vketik1 = kalimat.innerHTML; kalimat.innerHTML = "";
759 |         function mulaiketik1() {
760 |             /*new TypeIt("#kalimat", {
761 |                 strings: ["" + vketik1], startDelay: 400, speed: 20, cursor: false, deleteSpeed: 20, breakLines: false, waitUntilVisible: true, lifelike: true,
762 |                 afterComplete: function () {
763 |                     aktiopsL();
764 |                 },
765 |             }).go();*/
766 |             setTimeout(function () { opsLcheck += 1; aktipesan1(); /*fthilang(); ftganti = 1; setTimeout(ftmuncul, 300);*/ }, 300);
767 |         }
768 | 
769 |         opsLclick = 0; opsLcheck = 0; defopsL = opsL.innerHTML;
770 |         document.getElementById("bq").onclick = function () {
771 |             if (opsLclick == 1) {
772 |                 //if (opsLcheck == 1) { setTimeout(aktipesan1, 400); fthilang(); ftganti = 1; setTimeout(ftmuncul, 300); }
773 |                 if (opsLcheck == 2) { mulaiketik3(); }
774 |                 if (opsLcheck == 3) { mulaiketik4(); }
775 |                 if (opsLcheck == 4) { mulaiketik5(); }
776 |                 if (opsLcheck == 5) { kethalo2(); }
777 |                 otomatis(); opsL.style.opacity = "0"; opsLclick = 0;
778 |             }
779 |         }
780 |         function aktiopsL() { opsL.innerHTML = defopsL; opsL.style.opacity = ".8"; opsLclick = 1; opsLcheck += 1; }
781 |         function gantiopsL() { opsL.innerHTML = "[ Klik beberapa LOVE-nya ]"; opsL.style.opacity = ".8"; }
782 |         function otomatis() { pesan3.style = "transition:none"; pesan8.style = "display:none"; kalimat.style = "opacity:0"; if (otoaktipesan == 0) { setTimeout(otolanj, 400) } }
783 |         function otolanj() { kalimat.style = "opacity:1"; }
784 | 
785 |         function aktipesan1() { kalimat.innerHTML = pesan1.innerHTML; kolombaru.style = "position:relative;opacity:1;transform:scale(1);"; }
786 |         vketik2 = pesan2.innerHTML;
787 |         function aktipesan2() {
788 |             wallpaper.style = "transform: scale(1.5);";
789 |             kolombaru.style = ""; kalimat.innerHTML = "";
790 |             new TypeIt("#kalimat", {
791 |                 strings: ["" + vketik2], startDelay: 20, speed: 40, cursor: true, deleteSpeed: 50, breakLines: false, waitUntilVisible: true, lifelike: true,
792 |                 afterComplete: function () {
793 |                     setTimeout(aktipesan3, 500);
794 |                 },
795 |             }).go();
796 |         }
797 |         vketik3 = pesan3.innerHTML; pesan3.innerHTML = "";
798 |         function aktipesan3() {
799 |             kalimat.style = "display:none";
800 |             pesan3.style = "position:relative;opacity:1;transform: scale(1)";
801 |             wallpaper.style = "transform: scale(1)";
802 |             fthilang(); ftganti = 2; setTimeout(ftmuncul, 300);
803 |             new TypeIt("#pesan3", {
804 |                 strings: ["" + vketik3], startDelay: 1, speed: 45, cursor: true, waitUntilVisible: true, lifelike: true,
805 |                 afterComplete: function () {
806 |                     pesan3.innerHTML = vketik3; setTimeout(otomatis, 600); setTimeout(aktipesan4, 1100);
807 |                 },
808 |             }).go();
809 |         }
810 |         function aktipesan4() {
811 |             wallpaper.style = "transform: scale(1.5);"; kalimat.innerHTML = pesan4.innerHTML + " 🥳"; kalimat.style = "transform:scale(1);font-size:20px;font-family:var(--gaya-font3) !important"; setTimeout(aktipesan5, 1000);
812 |         }
813 |         vketik5 = pesan5.innerHTML; pesan5.innerHTML = "";
814 |         function aktipesan5() {
815 |             fthilang(); ftganti = 3; setTimeout(ftmuncul, 300);
816 |             wallpaper.style = "transform: scale(1);";
817 |             new TypeIt("#pesan5", {
818 |                 strings: ["" + vketik5], startDelay: 1, speed: 52, cursor: true, waitUntilVisible: true, lifelike: true,
819 |                 afterComplete: function () {
820 |                     pesan5.innerHTML = vketik5 + " ><"; setTimeout(aktipesan6, 800);
821 |                 },
822 |             }).go();
823 |         }
824 |         vketik6 = pesan6.innerHTML; pesan6.innerHTML = "";
825 |         function aktipesan6() {
826 |             wallpaper.style = "transform: scale(1.5);";
827 |             new TypeIt("#pesan6", {
828 |                 strings: ["" + vketik6], startDelay: 1, speed: 52, cursor: true, waitUntilVisible: true, lifelike: true,
829 |                 afterComplete: function () {
830 |                     pesan6.innerHTML = vketik6; setTimeout(aktipesan7, 800);
831 |                 },
832 |             }).go();
833 |         }
834 |         vketik7 = pesan7.innerHTML; pesan7.innerHTML = "";
835 |         function aktipesan7() {
836 |             fthilang(); ftganti = 1; setTimeout(ftmuncul, 300);
837 |             wallpaper.style = "transform: scale(1);";
838 |             new TypeIt("#pesan7", {
839 |                 strings: ["" + vketik7], startDelay: 1, speed: 52, cursor: true, waitUntilVisible: true, lifelike: true,
840 |                 afterComplete: function () {
841 |                     pesan7.innerHTML = vketik7; fungsi = 1; setTimeout(tombol, 400);
842 |                 },
843 |             }).go();
844 |         }
845 |         //Pemisah
846 |         vketik81 = pesan8.innerHTML; pesan8.innerHTML = "";
847 |         vketik9 = pesan9.innerHTML; pesan9.innerHTML = "";
848 |         vketik10 = pesan10.innerHTML; pesan10.innerHTML = "";
849 |         function aktipesan8() {
850 |             pesan5.style = "display:none"; pesan6.style = "display:none"; pesan7.style = "display:none"; pesan8.style = "";
851 |             wallpaper.style = "transform: scale(1);";
852 |             ftganti = 4; ftmuncul();
853 |             new TypeIt("#pesan8", {
854 |                 strings: ["" + vketik8, "" + vketik9], startDelay: 20, speed: 45, cursor: true, deleteSpeed: 30, breakLines: false, waitUntilVisible: true, lifelike: true,
855 |                 afterComplete: function () {
856 |                     pesan8.innerHTML = vketik9; setTimeout(otomatis, 1300); setTimeout(aktipesan10, 1710);
857 |                 },
858 |             }).go();
859 |         }
860 |         function aktipesan10() {
861 |             wallpaper.style = "transform: scale(1.5);";
862 |             fthilang(); ftganti = 5; setTimeout(ftmuncul, 300);
863 |             otoaktipesan = 1; otomatis(); setTimeout(toaktipesan, 300);
864 |             setInterval(berjatuhan, 400);
865 |             fungsi = 2; setTimeout(tombol, 2000);
866 |         }
867 |         var otoaktipesan = 0;
868 |         function toaktipesan() { kalimat.innerHTML = vketik10; kalimat.style = "transform:scale(1);font-size:22px;font-family:var(--gaya-font3)"; }
869 | 
870 |         document.getElementById("lv1").onclick = function () { lv1.style = "opacity:0"; slov += 1; this.onclick = null; checkslov(); }
871 |         document.getElementById("lv2").onclick = function () { lv2.style = "opacity:0"; slov += 1; this.onclick = null; checkslov(); }
872 |         document.getElementById("lv3").onclick = function () { lv3.style = "opacity:0"; slov += 1; this.onclick = null; checkslov(); }
873 |         document.getElementById("lv4").onclick = function () { lv4.style = "opacity:0"; slov += 1; this.onclick = null; checkslov(); }
874 |         var slov = 0; function checkslov() { if (slov == 4) { kolombaru.style = "position:relative;transform:scale(1)"; otomatis(); setTimeout(aktipesan2, 400); } }
875 | 
876 |         async function pertanyaan() {
877 |             var { isConfirmed: prtanya } = await swals.fire({ title: nama + ' ' + tanya, text: '' + opstanya, imageUrl: '' + fotostiker6.src, showCancelButton: true, confirmButtonText: '' + tompositif, cancelButtonText: '' + tomnegatif, });
878 |             if (prtanya) {
879 |                 await swalst.fire({ title: '' + katatambahan.innerHTML, timer: 2000, imageUrl: '' + stikerditolak.src, });
880 |                 vketik8 = vketik81; aktipesan8();
881 |             } else {
882 |                 await swalst.fire({ title: '' + kataditolak.innerHTML, timer: 2000, imageUrl: '' + stikerditolak.src, });
883 |                 vketik8 = ""; aktipesan8();
884 |             }
885 |         }
886 |     </script>
887 |     <!-- Sampai Sini -->
888 | </body>
889 | 
890 | </html>


--------------------------------------------------------------------------------