.

VaKeR CYBER ARMY
Server : Apache/2.4.41 (Ubuntu)
System : Linux absol.cf 5.4.0-198-generic #218-Ubuntu SMP Fri Sep 27 20:18:53 UTC 2024 x86_64
User : www-data ( 33)
PHP Version : 7.4.33
Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_get_handler,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority,pcntl_async_signals,pcntl_unshare,
Directory : /var/www/html/sketch/snvv_huyen/
Upload File :
Current File : /var/www/html/sketch/snvv_huyen/index.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">
    <title>❤️🎂❤️</title>

</head>

<body>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/mojs/0.288.1/mo.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/mojs-player/0.43.15/mojs-player.min.js"></script>
    <script type="text/javascript" src="https://unpkg.com/splitting/dist/splitting.min.js"></script>
    <style type="text/css">
        body {
            background: #fadde1;
            font-family: 'Dancing Script', cursive;
            overflow-x: hidden;
        }

        .container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .text {
            min-width: 100%;
            text-align: center;
            color: #ff87ab;
            text-shadow: 1.5px 1.5px #2c3a49;
            font-size: 3em;
        }

        .text .char {
            animation: slide-in 1s cubic-bezier(0.5, 0, 0.5, 1) both;
            animation-delay: calc(60ms * var(--char-index));
        }

        @keyframes slide-in {
            from {
                transform: translateY(-1em) rotate(-0.5turn) scale(0.5);
                opacity: 0;
            }
        }

        .presents {
            display: flex;
            justify-content: center;
            align-items: flex-end;
            height: 300px;
        }

        .purple {
            position: relative;
            left: -20px;
            width: 100px;
            height: 100px;
            z-index: 1;
        }

        .purple:hover {
            animation: 0.5s purple;
        }

        .purple .lid {
            background: #ffa6c1;
        }

        .purple .box {
            background-image: radial-gradient(#ffc4d6 20%, transparent 20%), radial-gradient(#ffc4d6 20%, transparent 20%);
            background-color: #ffa6c1;
        }

        .purple .ribbon {
            background: #ffc4d6;
        }

        .purple .ribbon::before {
            top: 21%;
        }

        .purple .bow {
            background: #ffc4d6;
        }

        .purple .bow::before,
        .purple .bow::after {
            background: #ffc4d6;
        }

        @keyframes purple {
            0% {
                width: 100px;
                height: 100px;
            }
            30% {
                width: calc(100px + 10px);
                height: calc(100px - 10px);
            }
            60% {
                width: calc(100px - 10px);
                height: calc(100px + 10px);
            }
            100% {
                width: 100px;
                height: 100px;
            }
        }

        .pink {
            position: relative;
            left: 20px;
            width: 130px;
            height: 120px;
            z-index: 10;
        }

        .pink:hover {
            animation: 0.5s pink;
        }

        .pink .lid {
            background: #ffa6c1;
        }

        .pink .box {
            background-image: radial-gradient(#ffc4d6 20%, transparent 20%), radial-gradient(#ffc4d6 20%, transparent 20%);
            background-color: #ffa6c1;
        }

        .pink .ribbon {
            background: #ffc4d6;
        }

        .pink .ribbon::before {
            top: 21%;
        }

        .pink .bow {
            background: #ffc4d6;
        }

        .pink .bow::before,
        .pink .bow::after {
            background: #ffc4d6;
        }

        @keyframes pink {
            0% {
                width: 130px;
                height: 120px;
            }
            30% {
                width: calc(130px + 10px);
                height: calc(120px - 10px);
            }
            60% {
                width: calc(130px - 10px);
                height: calc(120px + 10px);
            }
            100% {
                width: 130px;
                height: 120px;
            }
        }

        .yellow {
            position: relative;
            left: 0;
            width: 120px;
            height: 160px;
            z-index: 0;
        }

        .yellow:hover {
            animation: 0.5s yellow;
        }

        .yellow .lid {
            background: #ffa6c1;
        }

        .yellow .box {
            background-image: radial-gradient(transparent 20%, transparent 20%), radial-gradient(transparent 20%, transparent 20%);
            background-color: #ffa6c1;
        }

        .yellow .ribbon {
            background: #f4acb7;
        }

        .yellow .ribbon::before {
            top: 21%;
        }

        .yellow .bow {
            background: #f4acb7;
        }

        .yellow .bow::before,
        .yellow .bow::after {
            background: #f4acb7;
        }

        @keyframes yellow {
            0% {
                width: 120px;
                height: 160px;
            }
            30% {
                width: calc(120px + 10px);
                height: calc(160px - 10px);
            }
            60% {
                width: calc(120px - 10px);
                height: calc(160px + 10px);
            }
            100% {
                width: 120px;
                height: 160px;
            }
        }

        .present {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
        }

        .present .lid {
            height: 20%;
            width: calc(100% + 10px);
            border: 4px solid #2c3a49;
            border-radius: 5px;
            box-shadow: inset 2px 2px rgba(255, 255, 255, .5), 5px 0 rgba(0, 0, 0, .15);
        }

        .present .box {
            width: 100%;
            height: 100%;
            background-position: 0 0, 20px 20px;
            background-size: 40px 40px;
            border: 4px solid #2c3a49;
            border-top: 0;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
            box-shadow: inset -10px 5px rgba(0, 0, 0, .3), 5px 0 rgba(0, 0, 0, .15);
        }

        .present .ribbon {
            position: absolute;
            top: -3px;
            width: 30px;
            height: calc(100% - 5px);
            border: 4px solid #2c3a49;
            border-radius: 5px;
            box-shadow: inset 2px 2px rgba(255, 255, 255, .5);
        }

        .present .ribbon::before {
            display: block;
            content: '';
            position: absolute;
            width: 100%;
            height: 5px;
            background: rgba(0, 0, 0, .3);
        }

        .present .bow {
            position: absolute;
            top: -20px;
            width: 20px;
            height: 20px;
            border: 4px solid #2c3a49;
            border-radius: 50%;
            box-shadow: inset 2px 2px rgba(255, 255, 255, .5), inset -2px -5px rgba(0, 0, 0, .3);
        }

        .present .bow::before,
        .present .bow::after {
            display: block;
            content: '';
            position: absolute;
            top: -10px;
            width: 30px;
            height: 30px;
            border: 4px solid #2c3a49;
            border-radius: 50%;
            box-shadow: inset 2px 2px rgba(255, 255, 255, .5), inset -2px -5px rgba(0, 0, 0, .3);
            z-index: -1;
        }

        .present .bow::before {
            left: 15px;
        }

        .present .bow::after {
            right: 15px;
        }
    </style>

    <div class="container">
        <div class="text" data-splitting="">You're (22), Happy Birthday, Thu Huyền!</div>
        <div class="presents">
            <div class="present pink">
                <div class="lid"></div>
                <div class="box"></div>
                <div class="bow"></div>
                <div class="ribbon"></div>
            </div>
            <div class="present yellow">
                <div class="lid"></div>
                <div class="box"></div>
                <div class="bow"></div>
                <div class="ribbon"></div>
            </div>
            <div class="present purple">
                <div class="lid"></div>
                <div class="box"></div>
                <div class="bow"></div>
                <div class="ribbon"></div>
            </div>
        </div>
    </div>
    <audio src="54968.mp3" id="music" style="display:none"></audio>
    <script type="text/javascript">
        "use strict";
        var music = document.getElementById("music");
        var played = false;
        document.addEventListener("click", event => {
            if (!played) {
                played = true;
                music.play();
            }
            bursty(event.pageX, event.pageY);
        });
        setInterval(() => randomizedConfetti(), 500);

        function bursty(x, y) {
            const burst = new mojs.Burst({
                left: 0,
                top: 0,
                radius: {
                    0: 200
                },
                count: 20,
                degree: 360,
                children: {
                    fill: {
                        white: "#34E1FF"
                    },
                    duration: 2000
                }
            }).tune({
                x: x,
                y: y
            });
            burst.replay();
        }

        function randomizedConfetti() {
            let randomX = Math.floor(Math.random() * (document.body.clientWidth - 100) + 0);
            let randomY = Math.floor(Math.random() * (window.innerHeight - 200) + 0);
            const burst = new mojs.Burst({
                left: 0,
                top: 0,
                radius: {
                    0: 200
                },
                count: 20,
                degree: 360,
                children: {
                    fill: {
                        white: "#34E1FF"
                    },
                    duration: 2000
                }
            }).tune({
                x: randomX,
                y: randomY
            });
            burst.replay();
        }

        Splitting();
    </script>
</body>

</html>
VaKeR 2022