<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Luminosity Launcher</title>
    <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=Tiny5&display=swap" rel="stylesheet">
    <style>
        body {
            margin: 0;
            padding: 0;
            background-image: url('https://static.vecteezy.com/system/resources/previews/048/776/890/non_2x/abstract-smooth-curved-dark-pink-background-gradient-mesh-illustration-for-digital-wallpaper-room-backdrop-advertising-display-banner-surface-landing-page-website-cover-decoration-free-vector.jpg');
            background-size: cover;
            background-position: center;
            color: #fff;
            font-family: 'Tiny5', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            position: relative;
            background-color: #1a1a1a;
            overflow: hidden;
            transition: background 0.3s ease;
        }

        .menu {
            background: rgba(38, 38, 38, 0.6);
            backdrop-filter: blur(10px);
            padding: 40px;
            border-radius: 30px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
            text-align: center;
            animation: fadeIn 1s ease-in-out;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            z-index: 2;
        }

            .menu img {
                width: 400px;
                height: auto;
                margin-bottom: 15px;
                animation: slideDown 1s ease-in-out;
            }

            .menu ul {
                list-style: none;
                padding: 0;
                margin: 0;
                display: flex;
                justify-content: center;
            }

                .menu ul li {
                    margin: 0 15px;
                    opacity: 0;
                    animation: fadeIn 1s ease-in-out forwards;
                    animation-delay: 0.3s;
                }

                    .menu ul li a {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        text-decoration: none;
                        color: #ffc3ff;
                        font-size: 22px;
                        padding: 20px 30px;
                        border-radius: 10px;
                        transition: background 0.3s, color 0.3s, transform 0.3s;
                        height: 50px;
                    }

                        .menu ul li a:hover {
                            background: #ffc3ff;
                            color: #1a1a1a;
                            transform: scale(1.1);
                        }

        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
            z-index: 3;
            backdrop-filter: blur(10px);
            animation: fadeInModal 0.5s ease-out;
        }

        .modal-content {
            background: rgba(38, 38, 38, 0.8);
            padding: 30px;
            border-radius: 20px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
            text-align: center;
            color: #fff;
            width: 70%;
            transparency: 1%;
            max-width: 600px;
            transform: translateY(-30px);
            animation: slideInModal 0.6s ease-out forwards;
        }

            .modal-content h2 {
                margin-bottom: 20px;
            }

        .close-btn {
            padding: 10px 20px;
            background-color: #ffc3ff;
            color: #1a1a1a;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

            .close-btn:hover {
                transform: scale(1.1);
            }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        @keyframes slideDown {
            from {
                transform: translateY(-20px);
                opacity: 0;
            }

            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        @keyframes fadeInModal {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        @keyframes slideInModal {
            from {
                transform: translateY(-30px);
                opacity: 0;
            }

            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        @keyframes fadeOut {
            from {
                opacity: 1;
            }

            to {
                opacity: 0;
            }
        }

        .modal.fade-out {
            animation: fadeOut 0.5s ease-out forwards;
        }
    </style>
</head>
<body>
    <nav class="menu">
        <img src="https://media.discordapp.net/attachments/1263400286152556569/1335282793013444688/IMG_6505.png?ex=679f9a82&is=679e4902&hm=d853d1b7cd9670dbe4a757e21bad947e3926a39c4fa276cefebc1cd3bfe32797&=&format=webp&quality=lossless&width=1439&height=602" alt="Logo">
        <ul>
            <li><a href="#">launch (steam)</a></li>
            <li><a href="#">launch (exe)</a></li>
            <li><a href="#" id="aboutBtn">about</a></li>
        </ul>
    </nav>

    <div class="modal" id="aboutModal">
        <div class="modal-content">
            <h2>Luminosity Launcher</h2>
            <p>Luminosity Launcher is the first ever custom Gorilla Tag launcher. The launcher is designed to hide the fact that you are modding, and to automatically have the newest update of the menu. This launcher was made completely by me (sillyocula) in html, css, javascript, and electron. Do not modify or distribute this launcher on your own, as it was made and designed for the Luminosity mod menu. If any anticheat or malware detection software flags this as malware, it is false. The reason for this is because the launcher downloads the menu, deletes the menu, and moves the menu files. Have fun modding!</p>
            <button class="close-btn" id="closeBtn">Close</button>
        </div>
    </div>

    <script>
        const aboutBtn = document.getElementById("aboutBtn");
        const aboutModal = document.getElementById("aboutModal");
        const closeBtn = document.getElementById("closeBtn");

        aboutBtn.addEventListener("click", () => {
            aboutModal.style.display = "flex";
            document.body.style.overflow = "hidden";
        });

        closeBtn.addEventListener("click", () => {
            aboutModal.classList.add("fade-out");
            setTimeout(() => {
                aboutModal.style.display = "none";
                aboutModal.classList.remove("fade-out");
                document.body.style.overflow = "auto";
            }, 500);
        });

        window.addEventListener("click", (event) => {
            if (event.target === aboutModal) {
                aboutModal.classList.add("fade-out");
                setTimeout(() => {
                    aboutModal.style.display = "none";
                    aboutModal.classList.remove("fade-out");
                    document.body.style.overflow = "auto";
                }, 500);
            }
        });
    </script>
</body>
</html>
