snapshot.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Freakybob.site</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A place for Freakybob.">
    <meta content="Freakybob" property="og:title" />
    <meta content="A snapshot page! I don't even know what this will do lmao" property="og:description" />
    <meta content="https://freakybob.site/snapshot" property="og:url" />
    <meta content="https://media.discordapp.net/attachments/1266529763787280586/1277127467420876851/image.png?ex=66cc0924&is=66cab7a4&hm=100158aad2d0a4f770f87d464c6efa783ac173902af4df438d2cea4a9a75c2ea&=&format=webp&quality=lossless&width=1248&height=662" property="og:image" />
    <meta content="#006b79" data-react-helmet="true" name="theme-color" />
    <link rel="icon" type="image/x-icon" href="favicon (1).ico">
    <style>
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.4);
            z-index: -1;
        }

        body {
            background-image: url('images/Bikinibottom.jpg');
            background-color: aqua;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            margin: 0;
            padding: 0;
            font-family: 'Comic Sans MS', sans-serif;
            min-height: 100vh;
            min-width: 100vw;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;
            color: white;
        }

        h1 {
            text-align: center;
            color: rgb(218, 203, 3);
            font-size: 42px;
            margin-top: -130px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
        }

        h2 {
            color: yellow;
        }

        .popup {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 58, 53, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        .popup-content {
            background: rgb(168, 2, 57);
            padding: 25px;
            text-align: center;
            border-radius: 12px;
            max-width: 90%;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
            animation: fadeIn 0.9s ease;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: scale(0.95);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        button {
            margin-top: 100px;
            margin: 12px 0;
            padding: 15px 25px;
            font-size: 18px;
            cursor: pointer;
            background-color: rgb(172, 147, 5);
            color: white;
            border: none;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
            max-width: 220px;
            width: 100%;
        }

        button:hover {
            background-color: rgb(218, 203, 3);
            transform: translateY(-3px) scale(1.05);
        }
        #mute-button {
            position: fixed;
            top: 10px;
            right: 10px;
            padding: 10px 15px;
            background-color: rgb(1, 170, 128);
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            z-index: 1001;
        }

        #github-button {
            position: fixed;
            top: 10px;
            left: 10px;
            z-index: 1001;
            border: none;
            background: none;
            cursor: pointer;
        }

        #github-button img {
            width: 40px;
            height: 40px;
        }
        #discord-button {
            position: fixed;
            top: 2px;
            left: 60px;
            z-index: 1001;
            border: none;
            background: none;
            cursor: pointer;
        }
        #discord-button img {
            width: 90px;
            height: 60px;
        }
    </style>
</head>
<body>
    <h1>freakybob</h1>
    <h2>
        <marquee>Image Gallery is EXTREMLY Broken. We are trying to fix it as You read this :). The website may have slower updates due to school.</marquee>
    </h2>
    <a href="foundingpeople.html"><button>Check out the people who made this possible!</button></a>
    <a href="image-gallery.html"><button>Check out the image gallery!</button></a>
    <a href="musicgallery.html"><button>Listen to Spongebob music!</button></a>
    
    <div id="sound-popup" class="popup">
        <div class="popup-content">
            <p>Can we have permission for sound? If not, you won't hear the main screen music :( </p>
            <button id="yes-button">Yes</button>
            <button id="no-button">No</button>
        </div>
    </div>
    <a href="https://scratch.mit.edu/projects/1059751585/" id="scratch-button"><button>Freakybob clicker (Scratch)</button>
    <audio id="background-music" loop>
        <source src="audio/03 - System Music - First Time Setup (TV).mp3" type="audio/mp3">
    </audio>

    <!-- GitHub Button -->
    <a href="https://github.com/5quirre1/Freakybob.site" id="github-button">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/GitHub_Invertocat_Logo.svg/640px-GitHub_Invertocat_Logo.svg.png" alt="GitHub Logo">
    </a>
<a href="https://discord.gg/EQZ9YkVZmx" id="discord-button">
        <img src="images/pngegg.png" alt="Discord logo">
    </a>
    <!-- Mute/Unmute Button -->
    <button id="mute-button" style="display:none;">Mute Music</button>

    <script>
        const popup = document.getElementById('sound-popup');
        const yesButton = document.getElementById('yes-button');
        const noButton = document.getElementById('no-button');
        const backgroundMusic = document.getElementById('background-music');
        const muteButton = document.getElementById('mute-button');

        function playMusic() {
            backgroundMusic.play();
            muteButton.style.display = 'block';
        }

        yesButton.addEventListener('click', () => {
            playMusic();
            popup.style.display = 'none'; 
        });

        noButton.addEventListener('click', () => {
            popup.style.display = 'none'; 
        });

        muteButton.addEventListener('click', () => {
            if (backgroundMusic.muted) {
                backgroundMusic.muted = false;
                muteButton.textContent = 'Mute Music';
            } else {
                backgroundMusic.muted = true;
                muteButton.textContent = 'Unmute Music';
            }
        });

        window.onload = () => {
            popup.style.display = 'flex';
        };
    </script>

</body>
</html>