<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lukes Gay Website</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }

        /* Loading Screen */
        .loading-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #111;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            color: white;
            z-index: 10;
            transition: opacity 1.5s ease-in-out, transform 1.5s ease-in-out;
            cursor: pointer;
        }

        /* Animated text */
        .loading-screen h1,
        .loading-screen p {
            opacity: 0;
            animation: fadeIn 2s ease-in-out forwards;
        }

        .loading-screen p {
            animation-delay: 1s;
            font-size: 20px;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Smooth fade-out animation */
        .fade-out {
            opacity: 0;
            transform: scale(1.1);
            pointer-events: none;
        }

        /* Website Background */
        body {
            background: #0a0a0a;
            overflow: hidden;
        }

        /* Fullscreen Canvas */
        canvas {
            display: block;
            opacity: 0;
            transition: opacity 1.5s ease-in-out;
        }

        /* Fade-in effect for particles */
        .canvas-visible {
            opacity: 1 !important;
        }

        /* Animated Cornered Rectangle */
        .animated-rectangle {
            position: absolute;
            top: 15%;
            left: 50%;
            transform: translateX(-50%);
            width: 400px;
            height: 200px;
            background-color: rgba(255, 255, 255, 0.2);
            border-radius: 20px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding: 20px;
            animation: slideIn 2s ease-in-out forwards;
            z-index: 1;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        /* Hover effect for the rectangle */
        .animated-rectangle:hover {
            transform: translateX(-50%) scale(1.05);
            box-shadow: 0px 10px 20px rgba(255, 255, 255, 0.4);
        }

        @keyframes slideIn {
            from {
                transform: translateX(-50%) scale(0.5);
                opacity: 0;
            }
            to {
                transform: translateX(-50%) scale(1);
                opacity: 1;
            }
        }

        /* Image on the left of the rectangle */
        .rectangle-image {
            width: 80px;
            height: 80px;
            background-image: url('pfp.png'); /* Placeholder Image URL */
            background-size: cover;
            background-position: center;
            border-radius: 10px;
            margin-right: 15px;
        }

        /* Text inside the rectangle */
        .rectangle-text {
            color: white;
            transition: font-size 0.5s ease-in-out; /* Animated font size transition */
        }

        .rectangle-title {
            font-size: 24px; /* Default size for Medium */
            font-weight: 600;
            margin-bottom: 10px;
        }

        .rectangle-description {
            font-size: 16px;
        }

        /* Settings Button */
        .settings-btn {
            position: fixed;
            top: 20px;
            right: 20px;
            background-color: #444;
            color: white;
            border: none;
            padding: 10px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 18px;
            animation: fadeIn 1s ease-out forwards;
            z-index: 20;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        /* Hover effect for settings button */
        .settings-btn:hover {
            transform: scale(1.1);
            box-shadow: 0px 5px 15px rgba(255, 255, 255, 0.3);
        }

        /* Font Size Selector */
        .font-size-selector {
            display: none;
            position: fixed;
            top: 60px;
            right: 20px;
            background: rgba(0, 0, 0, 0.8);
            padding: 15px;
            border-radius: 8px;
            color: white;
            z-index: 30;
            animation: fadeIn 0.5s ease-out forwards;
        }

        .font-size-selector select {
            background: #333;
            color: white;
            padding: 5px;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
        }

        /* Circle Icons under the rectangle */
        .social-icons {
            position: absolute;
            top: 75%;  /* Adjusted position to be below the rectangle */
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 20px;
            z-index: 1;
        }

        .social-icon {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-size: cover;
            background-position: center;
            cursor: pointer;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        /* Hover effect for the social icons */
        .social-icon:hover {
            transform: scale(1.1);
            box-shadow: 0px 4px 8px rgba(255, 255, 255, 0.3);
        }

        .discord { background-image: url('https://cdn-icons-png.freepik.com/256/15707/15707874.png?semt=ais_hybrid'); }
        .instagram { background-image: url('https://upload.wikimedia.org/wikipedia/commons/a/a5/Instagram_icon.png'); }
        .github { background-image: url('https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg'); }
        .tiktok { background-image: url('https://cdn.pixabay.com/photo/2021/06/15/12/28/tiktok-6338429_1280.png'); }

        /* Animation for fade-in of the settings menu */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Background Color Shift Vibrant Colors */
        .color-shift {
            animation: vibrantColorShift 10s infinite;
        }

        @keyframes vibrantColorShift {
            0% { background-color: #FF5733; } /* Vibrant Red */
            20% { background-color: #33FF57; } /* Vibrant Green */
            40% { background-color: #3357FF; } /* Vibrant Blue */
            60% { background-color: #FF33A8; } /* Vibrant Pink */
            80% { background-color: #FFFF33; } /* Vibrant Yellow */
            100% { background-color: #FF5733; } /* Vibrant Red */
        }
    </style>
</head>
<body>

    <!-- Loading Screen -->
    <div class="loading-screen" id="loadingScreen" onclick="enterWebsite()">
        <h1 id="loadingText">Loading...</h1>
        <p>Click anywhere to enter</p>
    </div>

    <!-- Canvas for Animated Rain -->
    <canvas id="rainCanvas"></canvas>

    <!-- Animated Rectangle -->
    <div class="animated-rectangle" id="animatedRectangle">
        <div class="rectangle-image"></div>
        <div class="rectangle-text">
            <div class="rectangle-title">Luke</div>
            <div class="rectangle-description">I made this website because I was bored one Day</div>
        </div>
    </div>

    <!-- Social Media Icons -->
    <div class="social-icons">
        <div class="social-icon discord" onclick="window.open('https://www.youtube.com/@Vesperrr...?sub_confirmation=1', '_blank')"></div>
        <div class="social-icon instagram" onclick="window.open('https://www.instagram.com/lukeh014', '_blank')"></div>
        <div class="social-icon github" onclick="window.open('https://github.com/Vesper014', '_blank')"></div>
        <div class="social-icon tiktok" onclick="window.open('https://www.tiktok.com/@lukeh042', '_blank')"></div>
    </div>

    <!-- Settings Button -->
    <button class="settings-btn" onclick="toggleSettings()">Settings</button>

    <!-- Font Size Selector -->
    <div class="font-size-selector" id="fontSizeSelector">
        <label for="fontSizeSelect">Font Size: </label>
        <select id="fontSizeSelect" onchange="changeFontSize(event)">
            <option value="16">Small</option>
            <option value="24" selected>Medium</option>
            <option value="32">Large</option>
        </select>
        <br><br>
        <label for="particleToggle">Enable Particles: </label>
        <input type="checkbox" id="particleToggle" checked onchange="toggleParticles(event)">
    </div>

    <script>
        let isParticlesEnabled = true;
        let animationFrameId; // Variable to store the animation frame ID for cancellation

        function enterWebsite() {
            let loadingScreen = document.getElementById("loadingScreen");
            let loadingText = document.getElementById("loadingText");
            let canvas = document.getElementById("rainCanvas");

            // Change the text to 'Loaded'
            loadingText.innerText = "Loaded";

            // Apply fade-out effect
            loadingScreen.classList.add("fade-out");

            setTimeout(() => {
                loadingScreen.style.display = "none"; // Hide loading screen
                canvas.classList.add("canvas-visible"); // Gradually fade in particles
                startRainAnimation();
            }, 1500);
        }

        const canvas = document.getElementById('rainCanvas');
        const ctx = canvas.getContext('2d');

        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        const dots = [];
        const maxDots = 70;  // Reduced number of particles for less clutter
        const mouse = { x: null, y: null };

        class Dot {
            constructor() {
                this.x = Math.random() * canvas.width;
                this.y = Math.random() * canvas.height;
                this.radius = Math.random() * 3 + 1;
                this.speedY = Math.random() * 1 + 0.2;
                this.opacity = Math.random() * 0.5 + 0.2;
            }

            update() {
                this.y += this.speedY;
                if (this.y > canvas.height) {
                    this.y = -10;
                    this.x = Math.random() * canvas.width;
                }
            }

            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
                ctx.fillStyle = `rgba(255, 255, 255, ${this.opacity})`;
                ctx.fill();
                ctx.closePath();
            }
        }

        function init() {
            for (let i = 0; i < maxDots; i++) {
                dots.push(new Dot());
            }
        }

        function drawLines() {
            for (let dot of dots) {
                const dx = mouse.x - dot.x;
                const dy = mouse.y - dot.y;
                const distance = Math.sqrt(dx * dx + dy * dy);

                if (distance < 100) {
                    ctx.beginPath();
                    ctx.moveTo(dot.x, dot.y);
                    ctx.lineTo(mouse.x, mouse.y);
                    ctx.strokeStyle = `rgba(255, 255, 255, ${1 - distance / 100})`;
                    ctx.lineWidth = 1;
                    ctx.stroke();
                    ctx.closePath();
                }
            }
        }

        function animate() {
            if (!isParticlesEnabled) return;

            ctx.clearRect(0, 0, canvas.width, canvas.height);

            for (let dot of dots) {
                dot.update();
                dot.draw();
            }

            if (mouse.x !== null && mouse.y !== null) {
                drawLines();
            }

            animationFrameId = requestAnimationFrame(animate);
        }

        function startRainAnimation() {
            if (isParticlesEnabled) {
                init();
                animate();
            }
        }

        window.addEventListener('mousemove', (event) => {
            mouse.x = event.clientX;
            mouse.y = event.clientY;
        });

        window.addEventListener('resize', () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        });

        // Settings Button Toggle
        function toggleSettings() {
            const settingsMenu = document.getElementById('fontSizeSelector');
            settingsMenu.style.display = settingsMenu.style.display === 'block' ? 'none' : 'block';
        }

        // Change Font Size
        function changeFontSize(event) {
            const newSize = event.target.value;
            document.querySelectorAll('.rectangle-title, .rectangle-description').forEach(element => {
                element.style.fontSize = newSize + 'px';
            });
        }

        // Toggle Particles
        function toggleParticles(event) {
            const canvas = document.getElementById('rainCanvas');
            const body = document.body;
            isParticlesEnabled = event.target.checked;

            if (!isParticlesEnabled) {
                cancelAnimationFrame(animationFrameId); // Stop the particle animation immediately
                dots.length = 0; // Clear all dots
                canvas.style.opacity = 0; // Fade out the particle canvas
                body.classList.add('color-shift'); // Apply the color shift effect
            } else {
                body.classList.remove('color-shift'); // Remove the color shift effect
                canvas.style.opacity = 1; // Fade in the particle canvas
                startRainAnimation(); // Restart the particle animation
            }
        }
    </script>

</body>
</html>