<html><head><base href="https://raw.githubusercontent.com/pinrguygithub/test/main/">
<style>
@font-face {
    font-family: 'SpongeBoy';
    src: url('Spongeboy Me Bob.ttf') format('truetype');
}

body {
    margin: 0;
    padding: 0;
    font-family: 'SpongeBoy', sans-serif;
    background: black;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
}

#startScreen {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('spongebob-aesthetic-desktop-660cfrc9uothqqq4.jpg');
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 3;
}

#startText {
    font-size: 48px;
    color: white;
    text-shadow: 2px 2px 4px #000;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

#mainMenu {
    display: none;
    position: relative;
    width: 100%;
    height: 100%;
    background: url('spongebob-aesthetic-desktop-660cfrc9uothqqq4.jpg');
    background-size: cover;
    text-align: center;
}

.menu-button {
    font-family: 'SpongeBoy', sans-serif;
    font-size: 32px;
    margin: 20px;
    padding: 15px 30px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.2s;
}

.menu-button:hover {
    transform: scale(1.1);
}

#loadingScreen {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 2;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.loading-bar {
    width: 300px;
    height: 30px;
    border: 3px solid white;
    border-radius: 15px;
    overflow: hidden;
}

.loading-progress {
    width: 0%;
    height: 100%;
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
    transition: width 13s linear;
}

#loadingText {
    color: white;
    margin-top: 10px;
    font-size: 24px;
}

#watermark {
    position: fixed;
    bottom: 10px;
    right: 10px;
    font-size: 16px;
    background: linear-gradient(45deg, #4CAF50, #FF9800);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    z-index: 4;
    transition: all 0.5s ease;
}

.menu-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#logo {
    width: auto;
    height: 200px;
    margin-bottom: 30px;
    object-fit: contain;
}

#gameLoadedScreen {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background: #0092c5;
    z-index: 4;
    justify-content: center;
    align-items: center;
}

#gameLoadedText {
    font-size: 48px;
    color: white;
    text-shadow: 2px 2px 4px #000;
    opacity: 1;
    transition: opacity 0.5s;
}

#weezerImage {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: auto;
    opacity: 0;
    transition: opacity 1s;
    z-index: 5;
}
</style>
</head>
<body>
    <div id="startScreen">
        <div id="startText">CLICK TO START</div>
    </div>

    <div id="mainMenu">
        <div class="menu-container">
            <img src="sketch-1733166842954.png" id="logo">
            <div>
                <button class="menu-button" onclick="startGame()">PLAY</button>
            </div>
            <div>
                <button class="menu-button">OPTIONS</button>
            </div>
            <div>
                <button class="menu-button">CREDITS</button>
            </div>
        </div>
    </div>

    <div id="loadingScreen">
        <div class="loading-bar">
            <div class="loading-progress"></div>
        </div>
        <div id="loadingText">Loading...</div>
    </div>

    <div id="gameLoadedScreen">
        <div id="gameLoadedText">GAME LOADED!</div>
        <img src="Weezer_-_Blue_Album.png" id="weezerImage">
    </div>

    <div id="watermark">Made by thepinrguy 🎮</div>

    <audio id="hulaMusic" loop>
        <source src="SponegBob Production Music Dancing the Hula.mp3" type="audio/mp3">
    </audio>
    <audio id="weezerMusic">
        <source src="Weezer - Buddy Holly (mp3cut.net).mp3" type="audio/mp3">
    </audio>

<script>
const loadingTexts = [
    "Loading SpongeBob... (1/10)",
    "Loading Bikini Bottom... (2/10)",
    "Loading The Krusty Krab... (3/10)",
    "Loading Squidward's House... (4/10)",
    "Loading Patrick's Rock... (5/10)",
    "Loading Sandy's Treedome... (6/10)",
    "Loading Jellyfish Fields... (7/10)",
    "Loading The Chum Bucket... (8/10)",
    "Loading Gary... (9/10)",
    "Loading Game Assets... (10/10)"
];

document.getElementById('startScreen').addEventListener('click', function() {
    this.style.display = 'none';
    document.getElementById('mainMenu').style.display = 'block';
    document.getElementById('hulaMusic').play();
});

function startGame() {
    const hulaMusic = document.getElementById('hulaMusic');
    const weezerMusic = document.getElementById('weezerMusic');
    hulaMusic.pause();
    hulaMusic.currentTime = 0;
    weezerMusic.currentTime = 74;
    document.getElementById('loadingScreen').style.display = 'flex';
    
    let currentTextIndex = 0;
    const loadingTextElement = document.getElementById('loadingText');
    
    const textInterval = setInterval(() => {
        loadingTextElement.textContent = loadingTexts[currentTextIndex];
        currentTextIndex = (currentTextIndex + 1) % loadingTexts.length;
    }, 1300);

    setTimeout(() => {
        weezerMusic.play();
        document.querySelector('.loading-progress').style.width = '100%';
    }, 2000);

    setTimeout(() => {
        clearInterval(textInterval);
        document.getElementById('loadingScreen').style.display = 'none';
        const gameLoadedScreen = document.getElementById('gameLoadedScreen');
        const gameLoadedText = document.getElementById('gameLoadedText');
        gameLoadedScreen.style.display = 'flex';
        
        setTimeout(() => {
            gameLoadedText.style.opacity = '0';
            setTimeout(() => {
                document.getElementById('weezerImage').style.opacity = '1';
                setTimeout(() => {
                    const watermark = document.getElementById('watermark');
                    watermark.style.background = '#0092c5';
                    watermark.style.webkitBackgroundClip = 'initial';
                    watermark.style.backgroundClip = 'initial';
                    watermark.style.color = 'white';
                    watermark.textContent = 'Get Weezered 🎸';
                }, 1000);
            }, 3000);
        }, 1000);
    }, 15000);
}

const buttons = document.querySelectorAll('.menu-button');
buttons.forEach(button => {
    button.addEventListener('mouseover', () => {
        button.style.transform = 'scale(1.1)';
    });
    button.addEventListener('mouseout', () => {
        button.style.transform = 'scale(1)';
    });
});
</script>

</body></html>