├── _config.yml ├── .gitattributes ├── Assets ├── img1.png ├── 38030.jpg └── foto.jpeg ├── style.css ├── index.html └── script.js /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-cayman -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /Assets/img1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdamMukti/ProjekUltah/HEAD/Assets/img1.png -------------------------------------------------------------------------------- /Assets/38030.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdamMukti/ProjekUltah/HEAD/Assets/38030.jpg -------------------------------------------------------------------------------- /Assets/foto.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AdamMukti/ProjekUltah/HEAD/Assets/foto.jpeg -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | 2 | body, 3 | html { 4 | height: 100%; 5 | font-family: 'Quicksand', sans-serif; 6 | text-align: center; 7 | } 8 | 9 | .bg { 10 | /* Location of the image */ 11 | background-image: url(Assets/38030.jpg); 12 | background-position: center center; 13 | background-repeat: no-repeat; 14 | background-attachment: fixed; 15 | 16 | /* This is what makes the background image rescale based 17 | on the container's size */ 18 | background-size: cover; 19 | 20 | /* Set a background color that will be displayed 21 | while the background image is loading */ 22 | background-color: #FEC0CD; 23 | height: 100%; 24 | } 25 | 26 | 27 | .img { 28 | display: inline-block; 29 | margin-left: auto; 30 | margin-right: auto; 31 | position: relative; 32 | top: 20px; 33 | margin-bottom: 30px; 34 | width: 350px; 35 | } 36 | 37 | #tap { 38 | display: inline-block; 39 | } 40 | 41 | .foto { 42 | width: 80%; 43 | max-width: 400px; 44 | min-width: 300px; 45 | margin-top: 100px; 46 | /* margin-left: auto; 47 | margin-right: auto; 48 | margin-bottom: 20px; */ 49 | display: inline-block; 50 | /* vertical-align: middle; 51 | line-height: normal; */ 52 | } 53 | 54 | 55 | 56 | /* Paper */ 57 | @import url(https://fonts.googleapis.com/css?family=Roboto); 58 | @import url(https://fonts.googleapis.com/css?family=Handlee); 59 | 60 | 61 | .paper { 62 | font-family: 'Roboto', sans-serif; 63 | position: relative; 64 | width: 90%; 65 | max-width: 800px; 66 | min-width: 300px; 67 | height: 540px; 68 | margin: 50px auto; 69 | display: inline-block; 70 | vertical-align: middle; 71 | line-height: normal; 72 | background: #fafafa; 73 | border-radius: 10px; 74 | box-shadow: 0 2px 8px rgba(0, 0, 0, .3); 75 | overflow: hidden; 76 | } 77 | 78 | .paper:before { 79 | content: ''; 80 | position: absolute; 81 | top: 0; 82 | bottom: 0; 83 | left: 5px; 84 | width: 45px; 85 | background: radial-gradient(#616161 6px, transparent 7px) repeat-y; 86 | background-size: 30px 30px; 87 | border-right: 3px solid #D44147; 88 | box-sizing: border-box; 89 | } 90 | 91 | .paper-content { 92 | position: absolute; 93 | top: 30px; 94 | right: 0; 95 | bottom: 30px; 96 | left: 50px; 97 | background: linear-gradient(transparent, transparent 28px, #91D1D3 28px); 98 | background-size: 30px 30px; 99 | } 100 | 101 | .paper-content .teks { 102 | text-align: left; 103 | width: 100%; 104 | max-width: 100%; 105 | height: 100%; 106 | max-height: 100%; 107 | line-height: 30px; 108 | padding: 0 10px; 109 | border: 0; 110 | outline: 0; 111 | background: transparent; 112 | color: #3f3f44; 113 | font-family: 'Handlee', cursive; 114 | font-size: 18px; 115 | box-sizing: border-box; 116 | z-index: 1; 117 | } 118 | 119 | .kotak { 120 | position: relative; 121 | width: 90%; 122 | max-width: 550px; 123 | min-width: 200px; 124 | max-height: 350px; 125 | min-height: 100px; 126 | top: 300px; 127 | padding: 20px 0; 128 | display: inline-block; 129 | background: #fafafa; 130 | border-radius: 10px; 131 | box-shadow: 0 2px 8px rgba(0, 0, 0, .3); 132 | overflow: hidden; 133 | } 134 | 135 | .btn { 136 | border-radius: 40px; 137 | } 138 | 139 | #slideLima { 140 | position: relative; 141 | top: 300px; 142 | } 143 | 144 | #trims { 145 | position: relative; 146 | top: 300px; 147 | display: inline-block; 148 | } 149 | 150 | h1 { 151 | font-weight: normal; 152 | } 153 | 154 | li { 155 | display: inline-block; 156 | font-size: 16px; 157 | list-style-type: none; 158 | position: relative; 159 | left: -20px; 160 | margin-top: 10px; 161 | padding: 10px; 162 | text-transform: uppercase; 163 | } 164 | 165 | li span { 166 | display: block; 167 | font-size: 24px; 168 | } 169 | 170 | body { 171 | -webkit-box-align: center; 172 | -ms-flex-align: center; 173 | align-items: center; 174 | } 175 | 176 | .container { 177 | color: #333; 178 | position: relative; 179 | top: 250px; 180 | padding: 0; 181 | text-align: center; 182 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12 | 13 | 14 | 15 | Happy Birthday Irna 16 | 17 | 18 | 19 |
20 | 21 |
22 |
Countdown to irna's birthday :
23 | 29 |
30 | 31 |
32 | 33 |
34 | 35 |
37 |
38 |

39 |
40 |
41 | 42 |
43 |
44 |

45 |
46 |
47 | 48 |
49 |
50 |
51 |
Kamu suka nggak?
52 |
53 |
54 |
55 |
56 | 57 |
58 |
59 | 60 |
61 |
62 |
63 | 64 |
65 | 66 |
67 |

68 | 69 |
70 | 71 |
72 | 73 |

Ketuk untuk 74 | melanjutkan

75 | 76 | 86 | 87 |
88 | 89 | 90 | 91 | 92 | 95 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const content = document.getElementById('content'); 2 | const footer = document.getElementsByTagName('footer')[0]; 3 | const timer = document.getElementById('timer'); 4 | 5 | const second = 1000, 6 | minute = second * 60, 7 | hour = minute * 60, 8 | day = hour * 24; 9 | let countDown = new Date('Aug 23, 2020 00:00:00').getTime(), 10 | x = setInterval(function () { 11 | let now = new Date().getTime(), 12 | distance = countDown - now; 13 | 14 | // document.getElementById('days').innerText = Math.floor(distance / (day)), 15 | document.getElementById('hours').innerText = Math.floor(distance / (hour)), 16 | document.getElementById('minutes').innerText = Math.floor((distance % (hour)) / (minute)), 17 | document.getElementById('seconds').innerText = Math.floor((distance % (minute)) / second); 18 | 19 | if (distance < 0) { 20 | 21 | timer.classList.add('d-none'); 22 | confetti(); 23 | clearInterval(x); 24 | _slideSatu(); 25 | } 26 | 27 | }, second) 28 | 29 | const _slideSatu = function () { 30 | const tap = document.getElementById('tap'); 31 | const slideSatu = document.getElementById('slideSatu'); 32 | slideSatu.classList.remove('d-none'); 33 | setTimeout(function () { 34 | tap.classList.remove('d-none'); 35 | document.body.addEventListener('click', function () { 36 | _slideDua(); 37 | }) 38 | }, 7000); 39 | }; 40 | 41 | const _slideDua = function () { 42 | const slideSatu = document.getElementById('slideSatu'); 43 | const tap = document.getElementById('tap'); 44 | const slideDua = document.getElementById('slideDua'); 45 | 46 | setTimeout(function () { 47 | slideSatu.classList.replace('animate__slideInDown', 'animate__backOutDown'); 48 | tap.classList.add('d-none'); 49 | setTimeout(function () { 50 | slideSatu.classList.add('d-none'); 51 | }, 1000); 52 | }, 1000); 53 | 54 | slideDua.classList.remove('d-none'); 55 | setTimeout(function () { 56 | tap.classList.remove('d-none'); 57 | document.body.addEventListener('click', function () { 58 | slideDua.classList.replace('animate__zoomInDown', 'animate__fadeOutLeft'); 59 | slideDua.classList.remove('animate__delay-2s', 'animate__slow'); 60 | tap.classList.add('d-none'); 61 | setTimeout(function () { 62 | slideDua.remove(); 63 | _slideTiga(); 64 | }, 1000); 65 | }) 66 | }, 40000); 67 | }; 68 | 69 | const _slideTiga = function () { 70 | const tap = document.getElementById('tap'); 71 | const slideTiga = document.getElementById('slideTiga'); 72 | 73 | slideTiga.classList.remove('d-none'); 74 | setTimeout(function () { 75 | tap.classList.remove('d-none'); 76 | document.body.addEventListener('click', function () { 77 | slideTiga.classList.remove('animate__delay-2s', 'animate__slow'); 78 | slideTiga.classList.replace('animate__fadeInRight', 'animate__fadeOut'); 79 | tap.remove(); 80 | setTimeout(function () { 81 | slideTiga.remove(); 82 | _slideEmpat(); 83 | }, 1000); 84 | }) 85 | }, 43000); 86 | } 87 | 88 | function getRandomPosition(element) { 89 | var x = document.body.offsetHeight - element.clientHeight; 90 | var y = document.body.offsetWidth - element.clientWidth; 91 | var randomX = Math.floor(Math.random() * 500); 92 | var randomY = Math.floor(Math.random() * y); 93 | return [randomX, randomY]; 94 | }; 95 | 96 | const _slideEmpat = function () { 97 | const slideEmpat = document.getElementById('slideEmpat'); 98 | const btn = document.getElementsByTagName('button'); 99 | slideEmpat.classList.remove('d-none'); 100 | 101 | btn[0].addEventListener('click', function () { 102 | var xy = getRandomPosition(slideEmpat); 103 | slideEmpat.style.top = xy[0] + 'px'; 104 | // slideEmpat.style.left = xy[1] + 'px'; 105 | }); 106 | 107 | btn[1].addEventListener('click', function () { 108 | slideEmpat.classList.replace('animate__fadeInDown', 'animate__bounceOut'); 109 | slideEmpat.classList.remove('animate__delay-2s'); 110 | setTimeout(function () { 111 | slideEmpat.remove() 112 | setTimeout(() => { 113 | _slideLima(); 114 | }, 500); 115 | }, 1000); 116 | }) 117 | }; 118 | 119 | const _slideLima = function () { 120 | const slideLima = document.getElementById('slideLima'); 121 | slideLima.classList.remove('d-none'); 122 | const trims = document.getElementById('trims'); 123 | 124 | setTimeout(() => { 125 | trims.classList.remove('d-none'); 126 | }, 1000); 127 | 128 | slideLima.addEventListener('animationend', () => { 129 | slideLima.classList.add('animate__delay-3s') 130 | slideLima.classList.replace('animate__bounceIn', 'animate__fadeOut'); 131 | trims.classList.add('animate__animated', 'animate__fadeOut', 'animate__delay-3s'); 132 | setTimeout(() => { 133 | trims.remove(); 134 | setTimeout(() => { 135 | slideLima.remove(); 136 | _slideEnam(); 137 | }, 1000); 138 | }, 6000); 139 | }); 140 | }; 141 | 142 | const _slideEnam = function () { 143 | const slideEnam = document.getElementById('slideEnam'); 144 | slideEnam.classList.remove('d-none'); 145 | }; 146 | 147 | 148 | new TypeIt("#teks1", { 149 | strings: ["Assalamualaikum Wr. Wb", " ", "Saya Adam Mukti Wibisono pada hari ini Minggu, 23 Agustus 2020 dengan sepenuh hati mengucapkan", " ", "Selamat Ulang Tahun Yang ke - 21", " ", "Kepada Irna Imroatun, semoga kamu panjang umur, dan bahagia selalu. Aamiin. Sekian surat pernyataan dari saya", , " ", "Wassalamualakaikum Wr. Wb", " ", "- Adam Mukti, Mas ganteng :)"], 150 | startDelay: 4000, 151 | speed: 75, 152 | waitUntilVisible: true 153 | }).go(); 154 | 155 | new TypeIt("#teks2", { 156 | strings: ["Haii cabi!!", "Happy Birthday ya..", " ", "Ciie udah 21 tahun, padahal baru aja beberapa hari kemarin umur kita sama hehe, semoga di umur yang sekarang kamu bisa jadi pribadi yang lebih baik lagi, lebih rajin, lebih sholehah, dan lebih berbakti.", "Maaf ya aku gabisa kasih surprise yang romantis. Cuma ini yang bisa aku kasih ke kamu, aku harap kamu suka ya :)", "Sekali lagi, Selamat Ulang Tahun ya. Semoga semua impian, keinginan, dan harapan kamu bisa tercapai, Aamiin."], 157 | startDelay: 2000, 158 | speed: 75, 159 | waitUntilVisible: true 160 | }).go(); 161 | 162 | 163 | new TypeIt("#trims", { 164 | strings: ["Terimakasih."], 165 | startDelay: 2000, 166 | speed: 150, 167 | loop: false, 168 | waitUntilVisible: true, 169 | }).go(); 170 | 171 | 172 | 173 | 'use strict'; 174 | 175 | // If set to true, the user must press 176 | // UP UP DOWN ODWN LEFT RIGHT LEFT RIGHT A B 177 | // to trigger the confetti with a random color theme. 178 | // Otherwise the confetti constantly falls. 179 | var onlyOnKonami = false; 180 | 181 | function confetti() { 182 | // Globals 183 | var $window = $(window), 184 | random = Math.random, 185 | cos = Math.cos, 186 | sin = Math.sin, 187 | PI = Math.PI, 188 | PI2 = PI * 2, 189 | timer = undefined, 190 | frame = undefined, 191 | confetti = []; 192 | 193 | var runFor = 2000 194 | var isRunning = true 195 | 196 | setTimeout(() => { 197 | isRunning = false 198 | }, runFor); 199 | 200 | // Settings 201 | var konami = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65], 202 | pointer = 0; 203 | 204 | var particles = 150, 205 | spread = 20, 206 | sizeMin = 5, 207 | sizeMax = 12 - sizeMin, 208 | eccentricity = 10, 209 | deviation = 100, 210 | dxThetaMin = -.1, 211 | dxThetaMax = -dxThetaMin - dxThetaMin, 212 | dyMin = .13, 213 | dyMax = .18, 214 | dThetaMin = .4, 215 | dThetaMax = .7 - dThetaMin; 216 | 217 | var colorThemes = [ 218 | function () { 219 | return color(200 * random() | 0, 200 * random() | 0, 200 * random() | 0); 220 | }, 221 | function () { 222 | var black = 200 * random() | 0; 223 | return color(200, black, black); 224 | }, 225 | function () { 226 | var black = 200 * random() | 0; 227 | return color(black, 200, black); 228 | }, 229 | function () { 230 | var black = 200 * random() | 0; 231 | return color(black, black, 200); 232 | }, 233 | function () { 234 | return color(200, 100, 200 * random() | 0); 235 | }, 236 | function () { 237 | return color(200 * random() | 0, 200, 200); 238 | }, 239 | function () { 240 | var black = 256 * random() | 0; 241 | return color(black, black, black); 242 | }, 243 | function () { 244 | return colorThemes[random() < .5 ? 1 : 2](); 245 | }, 246 | function () { 247 | return colorThemes[random() < .5 ? 3 : 5](); 248 | }, 249 | function () { 250 | return colorThemes[random() < .5 ? 2 : 4](); 251 | } 252 | ]; 253 | 254 | function color(r, g, b) { 255 | return 'rgb(' + r + ',' + g + ',' + b + ')'; 256 | } 257 | 258 | // Cosine interpolation 259 | function interpolation(a, b, t) { 260 | return (1 - cos(PI * t)) / 2 * (b - a) + a; 261 | } 262 | 263 | // Create a 1D Maximal Poisson Disc over [0, 1] 264 | var radius = 1 / eccentricity, 265 | radius2 = radius + radius; 266 | 267 | function createPoisson() { 268 | // domain is the set of points which are still available to pick from 269 | // D = union{ [d_i, d_i+1] | i is even } 270 | var domain = [radius, 1 - radius], 271 | measure = 1 - radius2, 272 | spline = [0, 1]; 273 | while (measure) { 274 | var dart = measure * random(), 275 | i, l, interval, a, b, c, d; 276 | 277 | // Find where dart lies 278 | for (i = 0, l = domain.length, measure = 0; i < l; i += 2) { 279 | a = domain[i], b = domain[i + 1], interval = b - a; 280 | if (dart < measure + interval) { 281 | spline.push(dart += a - measure); 282 | break; 283 | } 284 | measure += interval; 285 | } 286 | c = dart - radius, d = dart + radius; 287 | 288 | // Update the domain 289 | for (i = domain.length - 1; i > 0; i -= 2) { 290 | l = i - 1, a = domain[l], b = domain[i]; 291 | // c---d c---d Do nothing 292 | // c-----d c-----d Move interior 293 | // c--------------d Delete interval 294 | // c--d Split interval 295 | // a------b 296 | if (a >= c && a < d) 297 | if (b > d) domain[l] = d; // Move interior (Left case) 298 | else domain.splice(l, 2); // Delete interval 299 | else if (a < c && b > c) 300 | if (b <= d) domain[i] = c; // Move interior (Right case) 301 | else domain.splice(i, 0, c, d); // Split interval 302 | } 303 | 304 | // Re-measure the domain 305 | for (i = 0, l = domain.length, measure = 0; i < l; i += 2) 306 | measure += domain[i + 1] - domain[i]; 307 | } 308 | 309 | return spline.sort(); 310 | } 311 | 312 | // Create the overarching container 313 | var container = document.createElement('div'); 314 | container.style.position = 'fixed'; 315 | container.style.top = '0'; 316 | container.style.left = '0'; 317 | container.style.width = '100%'; 318 | container.style.height = '0'; 319 | container.style.overflow = 'visible'; 320 | container.style.zIndex = '9999'; 321 | 322 | // Confetto constructor 323 | function Confetto(theme) { 324 | this.frame = 0; 325 | this.outer = document.createElement('div'); 326 | this.inner = document.createElement('div'); 327 | this.outer.appendChild(this.inner); 328 | 329 | var outerStyle = this.outer.style, 330 | innerStyle = this.inner.style; 331 | outerStyle.position = 'absolute'; 332 | outerStyle.width = (sizeMin + sizeMax * random()) + 'px'; 333 | outerStyle.height = (sizeMin + sizeMax * random()) + 'px'; 334 | innerStyle.width = '100%'; 335 | innerStyle.height = '100%'; 336 | innerStyle.backgroundColor = theme(); 337 | 338 | outerStyle.perspective = '50px'; 339 | outerStyle.transform = 'rotate(' + (360 * random()) + 'deg)'; 340 | this.axis = 'rotate3D(' + 341 | cos(360 * random()) + ',' + 342 | cos(360 * random()) + ',0,'; 343 | this.theta = 360 * random(); 344 | this.dTheta = dThetaMin + dThetaMax * random(); 345 | innerStyle.transform = this.axis + this.theta + 'deg)'; 346 | 347 | this.x = $window.width() * random(); 348 | this.y = -deviation; 349 | this.dx = sin(dxThetaMin + dxThetaMax * random()); 350 | this.dy = dyMin + dyMax * random(); 351 | outerStyle.left = this.x + 'px'; 352 | outerStyle.top = this.y + 'px'; 353 | 354 | // Create the periodic spline 355 | this.splineX = createPoisson(); 356 | this.splineY = []; 357 | for (var i = 1, l = this.splineX.length - 1; i < l; ++i) 358 | this.splineY[i] = deviation * random(); 359 | this.splineY[0] = this.splineY[l] = deviation * random(); 360 | 361 | this.update = function (height, delta) { 362 | this.frame += delta; 363 | this.x += this.dx * delta; 364 | this.y += this.dy * delta; 365 | this.theta += this.dTheta * delta; 366 | 367 | // Compute spline and convert to polar 368 | var phi = this.frame % 7777 / 7777, 369 | i = 0, 370 | j = 1; 371 | while (phi >= this.splineX[j]) i = j++; 372 | var rho = interpolation( 373 | this.splineY[i], 374 | this.splineY[j], 375 | (phi - this.splineX[i]) / (this.splineX[j] - this.splineX[i]) 376 | ); 377 | phi *= PI2; 378 | 379 | outerStyle.left = this.x + rho * cos(phi) + 'px'; 380 | outerStyle.top = this.y + rho * sin(phi) + 'px'; 381 | innerStyle.transform = this.axis + this.theta + 'deg)'; 382 | return this.y > height + deviation; 383 | }; 384 | } 385 | 386 | 387 | function poof() { 388 | if (!frame) { 389 | // Append the container 390 | document.body.appendChild(container); 391 | 392 | // Add confetti 393 | 394 | var theme = colorThemes[onlyOnKonami ? colorThemes.length * random() | 0 : 0], 395 | count = 0; 396 | 397 | (function addConfetto() { 398 | 399 | if (onlyOnKonami && ++count > particles) 400 | return timer = undefined; 401 | 402 | if (isRunning) { 403 | var confetto = new Confetto(theme); 404 | confetti.push(confetto); 405 | 406 | container.appendChild(confetto.outer); 407 | timer = setTimeout(addConfetto, spread * random()); 408 | } 409 | })(0); 410 | 411 | 412 | // Start the loop 413 | var prev = undefined; 414 | requestAnimationFrame(function loop(timestamp) { 415 | var delta = prev ? timestamp - prev : 0; 416 | prev = timestamp; 417 | var height = $window.height(); 418 | 419 | for (var i = confetti.length - 1; i >= 0; --i) { 420 | if (confetti[i].update(height, delta)) { 421 | container.removeChild(confetti[i].outer); 422 | confetti.splice(i, 1); 423 | } 424 | } 425 | 426 | if (timer || confetti.length) 427 | return frame = requestAnimationFrame(loop); 428 | 429 | // Cleanup 430 | document.body.removeChild(container); 431 | frame = undefined; 432 | }); 433 | } 434 | } 435 | 436 | $window.keydown(function (event) { 437 | pointer = konami[pointer] === event.which ? 438 | pointer + 1 : 439 | +(event.which === konami[0]); 440 | if (pointer === konami.length) { 441 | pointer = 0; 442 | poof(); 443 | } 444 | }); 445 | 446 | if (!onlyOnKonami) poof(); 447 | }; --------------------------------------------------------------------------------