old html homepage

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Coobertory - Home</title>
    <link rel="icon" href="images/coobert.ico" type="image/x-icon">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            font-family: roboto;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            min-height: 100vh;
            display: flex;
            align-items: center;
            background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
            background-size: 400% 400%;
            animation: gradient 15s ease infinite;
        }

        @keyframes gradient {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            text-align: center;
        }

        h1 {
            font-size: 3.5em;
            color: #f7f7f7;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
        }

        p {
            font-size: 1em;
            color: #f7f7f7;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
        }

        .subtitle {
            font-size: 1.5em;
            color: #f7f7f7;
            margin-bottom: 40px;
        }

        .main-buttons {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin-top: 50px;
        }

        .button {
            background: #3f403f;
            color: white;
            padding: 20px 40px;
            border-radius: 8px;
            text-decoration: none;
            font-size: 1.2em;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        .discord {
            background: #7289DA;
            color: white;
            padding: 20px 40px;
            border-radius: 8px;
            text-decoration: none;
            font-size: 1.2em;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        .button:hover {
            transform: translateY(-5px);
            background: #2c2d2c;
            box-shadow: 0 6px 12px rgba(0,0,0,0.2);
        }

        .feature-section {
            margin-top: 60px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            color: #f7f7f7;
            max-width: 100%;
            padding: 0 20px;
        }

        @media (max-width: 768px) {
            .feature-section {
                grid-template-columns: 1fr;
            }
        }

        .feature-box {
            background: rgba(63, 64, 63, 0.8);
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        .feature-box h3 {
            margin-top: 0;
        }

        .feature-box a {
            color: #f7f7f7;
        }

        .settings-icon {
            position: fixed;
            top: 20px;
            right: 20px;
            color: white;
            font-size: 24px;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .settings-icon:hover {
            transform: rotate(90deg);
        }


        .settings-modal {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(63, 64, 63, 0.95);
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            z-index: 1001;
            color: white;
            min-width: 300px;
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .close-btn {
            cursor: pointer;
            font-size: 20px;
        }

        .setting-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 10px 0;
        }

        .switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 34px;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }

        input:checked + .slider {
            background-color: #2196F3;
        }

        input:checked + .slider:before {
            transform: translateX(26px);
        }

        .theme-dropdown {
            padding: 8px;
            border-radius: 4px;
            background: #2196F3;
            color: white;
            border: none;
            cursor: pointer;
        }

        .theme-dropdown option {
            background: #3f403f;
            color: white;
        }

        .theme-dark {
            background: #1a1a1a !important;
            background-image: none !important;
        }

        .theme-light {
            background: #f0f0f0 !important;
            background-image: none !important;
        }

        .theme-sunset {
            background: linear-gradient(-45deg, #ff8c42, #ff3c6f, #6d72c3, #5941a9) !important;
            background-size: 400% 400% !important;
            animation: gradient 15s ease infinite !important;
        }

        .theme-ocean {
            background: linear-gradient(-45deg, #00b4d8, #0077b6, #023e8a, #03045e) !important;
            background-size: 400% 400% !important;
            animation: gradient 15s ease infinite !important;
        }

    </style>
</head>
<body>
    <div class="settings-icon">
        <i class="fas fa-cog"></i>
    </div>

    <div class="settings-modal">
        <div class="modal-header">
            <h3>Settings</h3>
            <span class="close-btn">&times;</span>
        </div>
        <div class="setting-item">
            <div>
                <div>Incognito Mode</div>
                <small>Disclose your tab to say Google</small>
            </div>
            <label class="switch">
                <input type="checkbox" id="incognito-toggle">
                <span class="slider"></span>
            </label>
        </div>
        <div class="setting-item">
            <div>
                <div>Quick Exit</div>
                <small>Current key: <span id="current-key">Not Set</span></small>
            </div>
            <div style="display: flex; gap: 10px; align-items: center;">
                <label class="switch">
                    <input type="checkbox" id="quick-exit-toggle">
                    <span class="slider"></span>
                </label>
                <button id="change-key-btn" style="padding: 5px 10px; border-radius: 4px; background: #2196F3; border: none; color: white; cursor: pointer;">Change Key</button>
            </div>
        </div>
        <div class="setting-item">
            <div>
                <div>Theme</div>
                <small>Choose your preferred color scheme</small>
            </div>
            <select id="theme-selector" class="theme-dropdown">
                <option value="default">Default Gradient</option>
                <option value="dark">Dark Mode</option>
                <option value="light">Light Mode</option>
                <option value="sunset">Sunset</option>
                <option value="ocean">Ocean</option>
            </select>
        </div>
    </div>

    <div class="container">
        <h1>Coobertory</h1>
        <div class="subtitle">Your Ultimate Gaming Collection Hub</div>

        <div class="main-buttons">
            <a href="pages/games.html" class="button">Browse Games</a>
            <a href="pages/other.html" class="button">Other</a>
            <a href="pages/links.html" class="button">Links</a>
            <a href="https://github.com/EliteCronax/Coobertory" class="button">GitHub</a>
            <a href="https://discord.gg/ayx9jUzpaF" class="discord">Discord</a>
        </div>

        <div class="settings-icon" onclick="settingsModal.style.display='block'">
            <i class="fas fa-cog"></i>
        </div>

        <div class="feature-section">
            <div class="feature-box">
                <h3>Free Games</h3>
                <p>Access a wide variety of games without any cost</p>
            </div>
            <div class="feature-box">
                <h3>No Downloads</h3>
                <p>Play instantly in your browser. All the games are collected from Github and may be taken down</p>
            </div>
            <div class="feature-box">
                <h3>Regular Updates</h3>
                <p>New games added frequently. Almost daily. Visit my <a href="https://github.com/EliteCronax/Coobertory">Github</a> and make a pull request for more games</p>
            </div>
        </div>
    </div>

    <script>
        const settingsIcon = document.querySelector('.settings-icon');
        const settingsModal = document.querySelector('.settings-modal');
        const closeBtn = document.querySelector('.close-btn');
        const incognitoToggle = document.getElementById('incognito-toggle');

        document.addEventListener('DOMContentLoaded', () => {
            const savedIncognito = localStorage.getItem('incognitoMode');
            if (savedIncognito === 'true') {
                incognitoToggle.checked = true;
                updatePageAppearance(true);
            }
        });

        settingsIcon.addEventListener('click', () => {
            settingsModal.style.display = 'block';
        });

        closeBtn.addEventListener('click', () => {
            settingsModal.style.display = 'none';
        });

        window.addEventListener('click', (e) => {
            if (e.target === settingsModal) {
                settingsModal.style.display = 'none';
            }
        });

        function updatePageAppearance(isIncognito) {
            if (isIncognito) {
                document.title = 'Google';
                const favicon = document.querySelector("link[rel='icon']");
                favicon.href = 'images/google.png';
            } else {
                document.title = 'Coobertory - Home';
                const favicon = document.querySelector("link[rel='icon']");
                favicon.href = 'images/coobert.ico';
            }
        }

        incognitoToggle.addEventListener('change', () => {
            localStorage.setItem('incognitoMode', incognitoToggle.checked);
            updatePageAppearance(incognitoToggle.checked);
        });

        const changeKeyBtn = document.getElementById('change-key-btn');
        const currentKeySpan = document.getElementById('current-key');
        let isListeningForKey = false;
        let quickExitKey = localStorage.getItem('quickExitKey') || 'Escape';

        currentKeySpan.textContent = quickExitKey;

        changeKeyBtn.addEventListener('click', () => {
            if (!isListeningForKey) {
                isListeningForKey = true;
                changeKeyBtn.textContent = 'Press any key...';
                changeKeyBtn.style.background = '#ff4444';
            }
        });

        document.addEventListener('keydown', (e) => {
            if (isListeningForKey) {
                e.preventDefault();
                quickExitKey = e.key;
                localStorage.setItem('quickExitKey', quickExitKey);
                currentKeySpan.textContent = quickExitKey;
                changeKeyBtn.textContent = 'Change Key';
                changeKeyBtn.style.background = '#2196F3';
                isListeningForKey = false;
            } else if (e.key === quickExitKey && quickExitToggle.checked) {
                window.location.href = 'https://www.google.com';
            }
        });

        document.addEventListener('DOMContentLoaded', () => {
            const savedIncognito = localStorage.getItem('incognitoMode');
            const savedQuickExit = localStorage.getItem('quickExit');
            quickExitKey = localStorage.getItem('quickExitKey') || 'Escape';
            currentKeySpan.textContent = quickExitKey;

            if (savedIncognito === 'true') {
                incognitoToggle.checked = true;
                updatePageAppearance(true);
            }

            if (savedQuickExit === 'true') {
                quickExitToggle.checked = true;
            }
        });

        const themeSelector = document.getElementById('theme-selector');

        document.addEventListener('DOMContentLoaded', () => {
            const savedTheme = localStorage.getItem('selectedTheme');
            if (savedTheme) {
                themeSelector.value = savedTheme;
                applyTheme(savedTheme);
            }
        });

        themeSelector.addEventListener('change', (e) => {
            const selectedTheme = e.target.value;
            localStorage.setItem('selectedTheme', selectedTheme);
            applyTheme(selectedTheme);
        });

        function applyTheme(theme) {
            document.body.classList.remove('theme-dark', 'theme-light', 'theme-sunset', 'theme-ocean');

            if (theme !== 'default') {
                document.body.classList.add(`theme-${theme}`);
            }
        }
    </script>
</body>
</html>