HEX

File: /home/internet/public_html/advik.xyz/code.html
<!DOCTYPE html>
<html>
<head>
    <title>Advik's Star Catcher</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: linear-gradient(#87CEEB, #E0F6FF);
            font-family: 'Comic Sans MS', cursive;
        }

        #game-container {
            width: 100vw;
            height: 100vh;
            position: relative;
        }

        #score-board {
            position: absolute;
            top: 20px;
            left: 20px;
            font-size: 24px;
            color: #FFD700;
            text-shadow: 2px 2px #FF69B4;
        }

        .star {
            position: absolute;
            width: 40px;
            height: 40px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23FFD700" d="M12 0l3.09 6.26L22 7.27l-5 4.87 1.18 6.88L12 16l-6.18 3.02L7 12.14 2 7.27l6.91-1.01L12 0z"/></svg>');
            cursor: pointer;
            transition: transform 0.2s;
        }

        #character {
            position: absolute;
            bottom: 50px;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 100px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="%23FF69B4"/><circle cx="35" cy="40" r="5" fill="white"/><circle cx="65" cy="40" r="5" fill="white"/><path d="M30 65 Q50 75 70 65" stroke="white" fill="none" stroke-width="3"/></svg>');
        }

        #welcome-message {
            text-align: center;
            font-size: 2.5em;
            color: #FF69B4;
            text-shadow: 2px 2px #FFD700;
            padding: 20px;
        }
    </style>
</head>
<body>
    <h1 id="welcome-message">Welcome to Advik's Fun Zone!</h1>
    <div id="game-container">
        <div id="score-board">Stars: 0</div>
        <div id="character"></div>
    </div>

    <script>
        let score = 0;
        const scoreElement = document.getElementById('score-board');
        const gameContainer = document.getElementById('game-container');

        function createStar() {
            const star = document.createElement('div');
            star.className = 'star';
            star.style.left = Math.random() * (window.innerWidth - 40) + 'px';
            star.style.top = '-40px';
            
            star.addEventListener('click', () => {
                score++;
                scoreElement.textContent = `Stars: ${score}`;
                star.style.transform = 'scale(1.5)';
                setTimeout(() => star.remove(), 200);
            });

            gameContainer.appendChild(star);

            let position = -40;
            const fall = () => {
                position += 3;
                star.style.top = position + 'px';
                
                if (position < window.innerHeight) {
                    requestAnimationFrame(fall);
                } else {
                    star.remove();
                }
            };
            requestAnimationFrame(fall);
        }

        // Create new stars every 1-2 seconds
        setInterval(createStar, Math.random() * 1000 + 1000);

        // Make the game responsive
        window.addEventListener('resize', () => {
            const character = document.getElementById('character');
            character.style.left = '50%';
        });
    </script>
</body>
</html>