<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Access Page</title>
    <link id="favicon" rel="icon" href="" type="image/webp">
    <style>
        body {
            margin: 0;
            overflow: hidden;
            font-family: Arial, sans-serif;
            background-color: #121212;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        #emote-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: 1;
        }

        .emote {
            position: absolute;
            will-change: transform, top;
            filter: brightness(0.2); /* Darker emotes */
        }

        #content {
            position: absolute;
            z-index: 2;
            background: linear-gradient(145deg, rgba(20, 20, 20, 0.95), rgba(40, 40, 40, 0.95));
            padding: 40px;
            border-radius: 15px;
            text-align: center;
            width: 300px;
            max-width: 400px;
            font-size: 18px;
            color: #e0e0e0;
            box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.8);
        }

        #content input {
            width: 80%;
            padding: 10px;
            margin: 15px 0;
            font-size: 16px;
            border-radius: 5px;
            border: 1px solid #444;
            background-color: #222;
            color: #fff;
            position: relative;
        }

        #typing-emote {
            position: absolute;
            left: -83%;
            top: 50%;
            transform: translateY(-50%);
            width: 200px;
            height: 200px;
            opacity: 0;
            filter: brightness(0.8);
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        #content input:focus + #typing-emote {
            opacity: 1;
            transform: translateY(-50%) translateX(10px);
        }

        #content button {
            padding: 10px 20px;
            font-size: 16px;
            border: none;
            border-radius: 5px;
            background-color: #5cb85c  ;
            color: white;
            cursor: pointer;
            position: relative;
            overflow: visible;
        }

        #content button img {
            position: absolute;
            top: 40%;
            left: 40%;
            width: 200%;
            height: 200%;
            transform: translate(-50%, -50%);
            opacity: 0;
            transition: opacity 0.3s;
            pointer-events: none;
        }

        #content button:hover img {
            opacity: 1;
        }

        #headline {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 15px;
            color: #88cc88;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #headline img {
            margin-left: 10px;
            width: 43px;
            height: 43px;
        }

        #nickname {
          position: absolute;
          bottom: 10px; /* Отступ от нижнего края */
          right: 10px; /* Отступ от правого края */
          font-size: 14px;
          font-weight: bold;
          color: #88cc88;
          display: flex;
          align-items: center;
          justify-content: center;
      }
        #nickname img {
            width: 24px;
            height: 24px;
            margin-left: 5px;
        }
    </style>
</head>
<body>
    <div id="emote-container"></div>

    <div id="content">
        <div id="headline">Код сюда <img src="https://cdn.7tv.app/emote/01FFRN5CQG0007P57XYW0BJCMM/4x.avif" alt="emoji"></div>
        <form id="access-form">
            <div style="position: relative;">
                <input type="text" id="access-code" required>
                <img id="typing-emote" src="https://cdn.7tv.app/emote/01F6R98CR8000ATZXMPM5WJ91A/4x.avif" alt="typing emote">
            </div>
            <button type="submit">
                Тык
                <img src="https://cdn.7tv.app/emote/01FWMJG56R0003G26ZWQ26BF2A/4x.avif" alt="hover emote">
            </button>
        </form>
        <div id="nickname">robich <img id="nickname-emote" src="" alt="nickname emote"></div>
    </div>

    <script>
        const container = document.getElementById('emote-container');
        const form = document.getElementById('access-form');
        const nicknameEmote = document.getElementById('nickname-emote');
        const favicon = document.getElementById("favicon");

        async function fetchEmotes() {
            const response = await fetch('https://7tv.io/v3/users/twitch/48189727');
            const data = await response.json();

            const robichEmote = data.emote_set.emotes.find(emote => emote.name === 'robich20');
            if (robichEmote) {
                nicknameEmote.src = `https://cdn.7tv.app/emote/${robichEmote.id}/4x.avif`;
                favicon.href = `https://cdn.7tv.app/emote/${robichEmote.id}/4x.avif`;
            }

            return data.emote_set.emotes;
        }

        function createEmoteElement(emote) {
            const img = document.createElement('img');
            img.src = `https://cdn.7tv.app/emote/${emote.id}/4x.avif`;
            img.classList.add('emote');
            img.style.width = `${Math.random() * 50 + 30}px`;
            img.style.left = `${Math.random() * window.innerWidth}px`;
            img.style.top = `-${Math.random() * 100}px`;
            return img;
        }

        async function createFallingEmotes() {
            const emotesData = await fetchEmotes();
            const selectedEmotes = emotesData.sort(() => 0.5 - Math.random()).slice(0, 20);

            selectedEmotes.forEach(emote => {
                const emoteElement = createEmoteElement(emote);
                container.appendChild(emoteElement);
                animateEmote(emoteElement);
            });
        }

        function animateEmote(emoteElement) {
            let yPos = parseFloat(emoteElement.style.top);
            const speed = Math.random() * 2 + 2;
            const rotationSpeed = Math.random() * 1 - 0.5;
            let rotation = Math.random() * 360; // Random initial rotation

            function update() {
                yPos += speed;

                // Update position and reset if off-screen
                if (yPos > window.innerHeight) {
                    yPos = -Math.random() * 100;
                    emoteElement.style.left = `${Math.random() * window.innerWidth}px`;
                }

                emoteElement.style.top = `${yPos}px`;

                // Update rotation
                rotation += rotationSpeed;
                emoteElement.style.transform = `rotate(${rotation}deg)`;

                requestAnimationFrame(update);
            }

            update();
        }

        createFallingEmotes();

        form.addEventListener('submit', (event) => {
            event.preventDefault();
            const code = document.getElementById('access-code').value;
            window.location.href = `/?code=${code}`;
        });
    </script>
</body>
</html>
