Spaces:

stroumphs
/

paddlebound

Running

App Files Files Community

stroumphs commited on Mar 29, 2025

Commit

927b60f

verified ·

1 Parent(s): 2fb72ee

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +1525 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Paddlebound
-emoji: 📉
-colorFrom: red
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: paddlebound
+emoji: 🐳
+colorFrom: blue
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,1525 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Paddlebound: Rogue Bounce</title>
+    <style>
+        /* Google Fonts Import */
+        @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Ubuntu+Mono:wght@400;700&display=swap');
+        /* Base Styles */
+        :root {
+            --primary: #FF3E41;
+            --secondary: #39A0ED;
+            --accent: #4CC9F0;
+            --dark: #14213D;
+            --light: #F8F9FA;
+            --success: #4ADF86;
+            --warning: #F9C846;
+            --danger: #E63946;
+            --scoreboard: #333;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Ubuntu Mono', monospace;
+            background-color: var(--dark);
+            color: var(--light);
+            overflow: hidden;
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            background-image:
+                radial-gradient(circle at 25% 25%, rgba(57, 160, 237, 0.2) 0%, transparent 50%),
+                radial-gradient(circle at 75% 75%, rgba(255, 62, 65, 0.2) 0%, transparent 50%);
+            background-position: center;
+            background-size: cover;
+        }
+        /* Game Main Container */
+        .game-container {
+            position: relative;
+            width: 800px;
+            height: 500px;
+            background-color: var(--dark);
+            border: 4px solid var(--light);
+            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
+            border-radius: 8px;
+            overflow: hidden;
+        }
+        /* Game Canvas */
+        #gameCanvas {
+            width: 100%;
+            height: 100%;
+            background-color: var(--dark);
+        }
+        /* Score Boards */
+        .score-board {
+            position: absolute;
+            top: 20px;
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            padding: 0 30px;
+            z-index: 10;
+            font-family: 'Press Start 2P', cursive;
+            font-size: 20px;
+            color: var(--light);
+            text-shadow: 0 0 5px var(--primary);
+        }
+        .player-score, .opponent-score {
+            background-color: rgba(20, 33, 61, 0.8);
+            padding: 10px 20px;
+            border-radius: 5px;
+            border: 2px solid var(--light);
+        }
+        /* Power-up HUD */
+        .powerups-hud {
+            position: absolute;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            display: flex;
+            gap: 10px;
+            z-index: 10;
+        }
+        .powerup-icon {
+            width: 30px;
+            height: 30px;
+            border-radius: 50%;
+            border: 2px solid var(--light);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            background-color: rgba(76, 201, 240, 0.2);
+            opacity: 0;
+            transition: opacity 0.3s;
+        }
+        .powerup-icon.active {
+            opacity: 1;
+            animation: pulse 1s infinite;
+        }
+        @keyframes pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.1); }
+            100% { transform: scale(1); }
+        }
+        /* Game Overlay Screens */
+        .overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(20, 33, 61, 0.9);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            z-index: 20;
+            font-family: 'Press Start 2P', cursive;
+            text-align: center;
+            padding: 20px;
+        }
+        .title {
+            font-size: 3rem;
+            color: var(--primary);
+            margin-bottom: 20px;
+            text-shadow: 3px 3px 0 var(--light);
+            animation: titleGlow 2s infinite alternate;
+        }
+        @keyframes titleGlow {
+            from { text-shadow: 0 0 5px var(--light), 3px 3px 0 var(--light); }
+            to { text-shadow: 0 0 20px var(--accent), 3px 3px 0 var(--light); }
+        }
+        .subtitle {
+            font-size: 1.5rem;
+            color: var(--accent);
+            margin-bottom: 30px;
+        }
+        .btn {
+            background-color: var(--primary);
+            color: var(--light);
+            border: none;
+            padding: 15px 30px;
+            font-size: 1.2rem;
+            font-family: 'Press Start 2P', cursive;
+            cursor: pointer;
+            margin: 10px;
+            border-radius: 5px;
+            transition: all 0.3s;
+        }
+        .btn:hover {
+            background-color: var(--danger);
+            transform: translateY(-3px);
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+        }
+        .btn:active {
+            transform: translateY(0);
+        }
+        .btn-secondary {
+            background-color: var(--secondary);
+        }
+        .btn-secondary:hover {
+            background-color: var(--accent);
+        }
+        /* Game Over Screen */
+        .game-over .title {
+            color: var(--danger);
+        }
+        /* Opponent Introduction */
+        .opponent-intro {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background-color: rgba(20, 33, 61, 0.9);
+            border: 3px solid var(--light);
+            padding: 20px;
+            border-radius: 10px;
+            z-index: 20;
+            text-align: center;
+            max-width: 500px;
+        }
+        .opponent-name {
+            font-size: 1.5rem;
+            color: var(--warning);
+            margin-bottom: 10px;
+        }
+        .opponent-description {
+            font-size: 1rem;
+            margin-bottom: 20px;
+            font-family: 'Ubuntu Mono', monospace;
+        }
+        .opponent-special {
+            color: var(--accent);
+            font-weight: bold;
+        }
+        /* Stage Modifier Indicator */
+        .modifier-indicator {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background-color: rgba(20, 33, 61, 0.9);
+            border: 3px solid var(--light);
+            padding: 15px;
+            border-radius: 10px;
+            z-index: 20;
+            text-align: center;
+            max-width: 500px;
+            animation: modifierFadeIn 0.5s;
+        }
+        @keyframes modifierFadeIn {
+            from { opacity: 0; transform: translate(-50%, -40%); }
+            to { opacity: 1; transform: translate(-50%, -50%); }
+        }
+        .modifier-title {
+            font-size: 1.3rem;
+            color: var(--success);
+            margin-bottom: 10px;
+        }
+        .modifier-effect {
+            font-size: 1rem;
+            font-style: italic;
+        }
+        /* Power-up Notification */
+        .powerup-notification {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background-color: rgba(76, 201, 240, 0.2);
+            border: 2px solid var(--light);
+            padding: 10px 20px;
+            border-radius: 5px;
+            z-index: 20;
+            text-align: center;
+            opacity: 0;
+            transition: all 0.3s;
+        }
+        .powerup-notification.show {
+            opacity: 1;
+            animation: powerUpFade 2s forwards;
+        }
+        @keyframes powerUpFade {
+            0% { opacity: 1; transform: translate(-50%, -50%); }
+            80% { opacity: 1; transform: translate(-50%, -60%); }
+            100% { opacity: 0; transform: translate(-50%, -70%); }
+        }
+        /* Run Stats */
+        .run-stats {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            gap: 20px;
+            margin: 20px 0;
+        }
+        .stat-item {
+            background-color: rgba(57, 160, 237, 0.2);
+            padding: 10px 20px;
+            border-radius: 5px;
+            border: 1px solid var(--accent);
+            min-width: 150px;
+        }
+        .stat-value {
+            font-size: 1.3rem;
+            color: var(--warning);
+        }
+        .stat-label {
+            font-size: 0.8rem;
+            color: var(--accent);
+            text-transform: uppercase;
+        }
+        /* Permanent Upgrades */
+        .upgrades-container {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            gap: 15px;
+            margin-top: 20px;
+            max-width: 600px;
+        }
+        .upgrade-item {
+            background-color: rgba(20, 33, 61, 0.8);
+            border: 2px solid var(--accent);
+            border-radius: 5px;
+            padding: 15px;
+            width: 180px;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+        .upgrade-item:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 5px 15px rgba(76, 201, 240, 0.3);
+            border-color: var(--success);
+        }
+        .upgrade-item.purchased {
+            border-color: var(--success);
+            background-color: rgba(74, 223, 134, 0.1);
+        }
+        .upgrade-item.disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+        }
+        .upgrade-name {
+            color: var(--warning);
+            margin-bottom: 5px;
+            font-size: 0.9rem;
+        }
+        .upgrade-description {
+            font-size: 0.8rem;
+            margin-bottom: 10px;
+            font-family: 'Ubuntu Mono', monospace;
+        }
+        .upgrade-cost {
+            color: var(--success);
+            font-size: 0.9rem;
+        }
+        .currency-display {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            background-color: rgba(20, 33, 61, 0.8);
+            padding: 8px 15px;
+            border-radius: 5px;
+            border: 2px solid var(--warning);
+            font-family: 'Press Start 2P', cursive;
+            font-size: 0.9rem;
+            color: var(--warning);
+        }
+        /* Responsive */
+        @media (max-width: 850px) {
+            .game-container {
+                width: 95%;
+                height: 400px;
+            }
+            .title {
+                font-size: 2rem;
+            }
+            .subtitle {
+                font-size: 1.2rem;
+            }
+            .btn {
+                padding: 10px 20px;
+                font-size: 1rem;
+            }
+            .opponent-intro, .modifier-indicator {
+                width: 90%;
+            }
+            .opponent-name {
+                font-size: 1.2rem;
+            }
+        }
+        @media (max-height: 700px) {
+            .game-container {
+                height: 350px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="game-container">
+        <canvas id="gameCanvas"></canvas>
+        <!-- Score UI -->
+        <div class="score-board">
+            <div class="player-score">YOU: 0</div>
+            <div class="opponent-score">CPU: 0</div>
+        </div>
+        <!-- Power-up HUD -->
+        <div class="powerups-hud">
+            <div class="powerup-icon" id="pup1">?</div>
+            <div class="powerup-icon" id="pup2">?</div>
+            <div class="powerup-icon" id="pup3">?</div>
+        </div>
+        <!-- Main Menu Overlay -->
+        <div class="overlay" id="mainMenu">
+            <h1 class="title">Paddlebound:<br>Rogue Bounce</h1>
+            <p class="subtitle">A Roguelike Ping Pong Adventure</p>
+            <button class="btn" id="startGame">New Run</button>
+            <button class="btn btn-secondary" id="upgradesBtn">Permanent Upgrades</button>
+        </div>
+        <!-- Game Over Overlay -->
+        <div class="overlay game-over" id="gameOver" style="display: none;">
+            <h1 class="title">Game Over</h1>
+            <p class="subtitle">Run Completed</p>
+            <div class="run-stats">
+                <div class="stat-item">
+                    <div class="stat-value" id="stat-rounds">0</div>
+                    <div class="stat-label">Opponents Defeated</div>
+                </div>
+                <div class="stat-item">
+                    <div class="stat-value" id="stat-score">0</div>
+                    <div class="stat-label">Total Points</div>
+                </div>
+                <div class="stat-item">
+                    <div class="stat-value" id="stat-time">0:00</div>
+                    <div class="stat-label">Time Played</div>
+                </div>
+            </div>
+            <p>Earned <span id="earned-currency" style="color: var(--warning);">0</span> upgrade points</p>
+            <button class="btn" id="restartGame">Try Again</button>
+            <button class="btn btn-secondary" id="backToMenu">Main Menu</button>
+        </div>
+        <!-- Upgrades Screen -->
+        <div class="overlay" id="upgradesScreen" style="display: none;">
+            <h1 class="title">Permanent Upgrades</h1>
+            <div class="currency-display">
+                Points: <span id="currency-amount">0</span>
+            </div>
+            <div class="upgrades-container">
+                <!-- Upgrade items will be added here dynamically -->
+            </div>
+            <button class="btn" id="backFromUpgrades">Back</button>
+        </div>
+    </div>
+    <script>
+        // Game Constants
+        const GAME_WIDTH = 800;
+        const GAME_HEIGHT = 500;
+        const PADDLE_WIDTH = 100;
+        const PADDLE_HEIGHT = 15;
+        const PADDLE_OFFSET = 20;
+        const BALL_SIZE = 10;
+        const BALL_INITIAL_SPEED = 5;
+        const WIN_SCORE = 11;
+        const POWERUP_SIZE = 15;
+        const POWERUP_SPAWN_CHANCE = 0.02; // 2% chance per frame
+        const POWERUP_DURATION = 10000; // 10 seconds
+        // Game Variables
+        let canvas, ctx;
+        let gameRunning = false;
+        let gameOver = false;
+        let animationFrameId;
+        let runStarted = false;
+        let winScore = WIN_SCORE;
+        // Game Objects
+        let player = {
+            x: GAME_WIDTH / 2 - PADDLE_WIDTH / 2,
+            y: GAME_HEIGHT - PADDLE_HEIGHT - PADDLE_OFFSET,
+            width: PADDLE_WIDTH,
+            height: PADDLE_HEIGHT,
+            color: '#4CC9F0',
+            speed: 8
+        };
+        let opponent = {
+            x: GAME_WIDTH / 2 - PADDLE_WIDTH / 2,
+            y: PADDLE_OFFSET,
+            width: PADDLE_WIDTH,
+            height: PADDLE_HEIGHT,
+            color: '#FF3E41',
+            speed: 5,
+            reactionTime: 0.5 // 0-1, where 1 is perfect reaction
+        };
+        let ball = {
+            x: GAME_WIDTH / 2,
+            y: GAME_HEIGHT / 2,
+            size: BALL_SIZE,
+            color: '#F8F9FA',
+            speedX: 0,
+            speedY: 0,
+            speed: BALL_INITIAL_SPEED,
+            active: false,
+            trail: []
+        };
+        // Power-ups
+        let powerups = [];
+        let activePowerups = [];
+        let powerupTypes = [
+            { id: 'paddleXL', name: 'Paddle XL', color: '#4ADF86', effect: 'Increase paddle size by 50%', duration: POWERUP_DURATION, icon: 'XL' },
+            { id: 'paddleXS', name: 'Paddle XS', color: '#E63946', effect: 'Decrease paddle size by 50%', duration: POWERUP_DURATION, icon: 'XS' },
+            { id: 'speedBoost', name: 'Speed Boost', color: '#F9C846', effect: 'Increase ball speed for opponent', duration: POWERUP_DURATION, icon: '⚡' },
+            { id: 'multiBall', name: 'Multi Ball', color: '#39A0ED', effect: 'Spawn 3 extra balls', duration: POWERUP_DURATION, icon: '③' },
+            { id: 'slowMotion', name: 'Slow Mo', color: '#9B59B6', effect: 'Slow down time', duration: POWERUP_DURATION, icon: '⌛' },
+            { id: 'magnet', name: 'Ball Magnet', color: '#FF7F50', effect: 'Ball gravitates to your paddle', duration: POWERUP_DURATION, icon: '🧲' }
+        ];
+        // Opponent Types
+        let opponents = [
+            {
+                name: "The Wall",
+                description: "A defensive opponent that covers a wide area.",
+                width: 150,
+                speed: 4,
+                reactionTime: 0.7,
+                color: "#2ECC71"
+            },
+            {
+                name: "Speed Demon",
+                description: "Moves extremely fast but has a smaller paddle.",
+                width: 70,
+                speed: 9,
+                reactionTime: 0.8,
+                color: "#E74C3C"
+            },
+            {
+                name: "The Trickster",
+                description: "Adjusts reaction time unpredictably.",
+                width: 100,
+                speed: 6,
+                reactionTime: 0.5,
+                color: "#9B59B6",
+                special: "Changes reaction time randomly during the match"
+            },
+            {
+                name: "The Turtle",
+                description: "Very slow but has perfect reaction time.",
+                width: 120,
+                speed: 3,
+                reactionTime: 1.0,
+                color: "#F39C12",
+                special: "Never misses the ball if it's within reach"
+            },
+            {
+                name: "The Juggernaut",
+                description: "Massive paddle but moves slowly.",
+                width: 200,
+                speed: 2.5,
+                reactionTime: 0.6,
+                color: "#16A085"
+            }
+        ];
+        // Stage Modifiers
+        let stageModifiers = [
+            {
+                name: "Wind Gusts",
+                description: "Random wind affects ball movement.",
+                effect: function() {
+                    let windForce = (Math.random() - 0.5) * 0.5;
+                    ball.speedX += windForce;
+                    if (frameCount % 60 === 0) windForce = (Math.random() - 0.5) * 0.5;
+                },
+                color: "#A2D9CE"
+            },
+            {
+                name: "Gravity Well",
+                description: "Ball accelerates downward faster.",
+                effect: function() {
+                    if (ball.speedY > 0) ball.speedY *= 1.02;
+                    else ball.speedY /= 1.02;
+                },
+                color: "#95A5A6"
+            },
+            {
+                name: "Rebound Chaos",
+                description: "Ball speed increases unpredictably on bounces.",
+                effect: function() {
+                    ball.trail.forEach((pos, i) => {
+                        ctx.fillStyle = `rgba(76, 201, 240, ${0.2 + (i*0.1)})`;
+                        ctx.fillRect(pos.x, pos.y, ball.size, ball.size);
+                    });
+                },
+                color: "#D2B4DE"
+            },
+            {
+                name: "Multi-Ball Madness",
+                description: "Random chance for extra balls to spawn.",
+                effect: function() {
+                    if (Math.random() < 0.005) spawnPowerup('multiBall');
+                },
+                color: "#3498DB",
+                special: "Watch out for unexpected extra balls!"
+            }
+        ];
+        // Game State
+        let gameState = {
+            playerScore: 0,
+            opponentScore: 0,
+            currentOpponent: 0,
+            currentModifier: null,
+            runStartTime: 0,
+            runStats: {
+                opponentsDefeated: 0,
+                totalPoints: 0,
+                powerupsCollected: 0,
+                roundsPlayed: 0
+            },
+            powerupsActive: {},
+            frameCount: 0
+        };
+        // Player progression
+        let playerMeta = {
+            currency: 0,
+            upgrades: {
+                paddleStartSize: 0, // 0-2 (0: default, 1: +20%, 2: +40%)
+                ballStartSpeed: 0,  // 0-2 (0: default, 1: -10%, 2: -20%)
+                powerupDuration: 0, // 0-2 (0: default, 1: +25%, 2: +50%)
+                extraLife: false,   // Start with an extra life
+                powerupSlots: 1     // Up to 3
+            }
+        };
+        // Upgrade definitions
+        let upgradeDefinitions = [
+            {
+                id: 'paddleSize1',
+                name: 'Paddle +20%',
+                description: 'Start with a 20% larger paddle',
+                cost: 100,
+                maxLevel: 2,
+                apply: function() {
+                    playerMeta.upgrades.paddleStartSize = Math.min(playerMeta.upgrades.paddleStartSize + 1, this.maxLevel);
+                    resetPaddleSizes();
+                },
+                getCurrentLevel: function() {
+                    return playerMeta.upgrades.paddleStartSize;
+                }
+            },
+            {
+                id: 'ballSpeed1',
+                name: 'Slower Ball',
+                description: 'Start with 10% slower ball speed',
+                cost: 150,
+                maxLevel: 2,
+                apply: function() {
+                    playerMeta.upgrades.ballStartSpeed = Math.min(playerMeta.upgrades.ballStartSpeed + 1, this.maxLevel);
+                },
+                getCurrentLevel: function() {
+                    return playerMeta.upgrades.ballStartSpeed;
+                }
+            },
+            {
+                id: 'powerupDuration1',
+                name: 'Powerup +25%',
+                description: 'Powerups last 25% longer',
+                cost: 125,
+                maxLevel: 2,
+                apply: function() {
+                    playerMeta.upgrades.powerupDuration = Math.min(playerMeta.upgrades.powerupDuration + 1, this.maxLevel);
+                },
+                getCurrentLevel: function() {
+                    return playerMeta.upgrades.powerupDuration;
+                }
+            },
+            {
+                id: 'extraLife',
+                name: 'Extra Life',
+                description: 'Start with one additional chance per run',
+                cost: 250,
+                maxLevel: 1,
+                apply: function() {
+                    playerMeta.upgrades.extraLife = true;
+                },
+                getCurrentLevel: function() {
+                    return playerMeta.upgrades.extraLife ? 1 : 0;
+                }
+            },
+            {
+                id: 'powerupSlot2',
+                name: 'Powerup Slot #2',
+                description: 'Unlock an additional powerup slot',
+                cost: 200,
+                maxLevel: 1,
+                apply: function() {
+                    playerMeta.upgrades.powerupSlots = Math.min(playerMeta.upgrades.powerupSlots + 1, 3);
+                    updatePowerupHud();
+                },
+                getCurrentLevel: function() {
+                    return playerMeta.upgrades.powerupSlots >= 2 ? 1 : 0;
+                }
+            },
+            {
+                id: 'powerupSlot3',
+                name: 'Powerup Slot #3',
+                description: 'Unlock a third powerup slot',
+                cost: 300,
+                maxLevel: 1,
+                prereq: 'powerupSlot2',
+                apply: function() {
+                    playerMeta.upgrades.powerupSlots = Math.min(playerMeta.upgrades.powerupSlots + 1, 3);
+                    updatePowerupHud();
+                },
+                getCurrentLevel: function() {
+                    return playerMeta.upgrades.powerupSlots >= 3 ? 1 : 0;
+                }
+            }
+        ];
+        // DOM Elements
+        let mainMenu, gameOverScreen, upgradesScreen;
+        let startGameBtn, restartGameBtn, backToMenuBtn, upgradesBtn, backFromUpgradesBtn;
+        // Initialize the game
+        function init() {
+            canvas = document.getElementById('gameCanvas');
+            ctx = canvas.getContext('2d');
+            canvas.width = GAME_WIDTH;
+            canvas.height = GAME_HEIGHT;
+            // Get DOM elements
+            mainMenu = document.getElementById('mainMenu');
+            gameOverScreen = document.getElementById('gameOver');
+            upgradesScreen = document.getElementById('upgradesScreen');
+            startGameBtn = document.getElementById('startGame');
+            restartGameBtn = document.getElementById('restartGame');
+            backToMenuBtn = document.getElementById('backToMenu');
+            upgradesBtn = document.getElementById('upgradesBtn');
+            backFromUpgradesBtn = document.getElementById('backFromUpgrades');
+            // Event listeners
+            startGameBtn.addEventListener('click', startGame);
+            restartGameBtn.addEventListener('click', startGame);
+            backToMenuBtn.addEventListener('click', showMainMenu);
+            upgradesBtn.addEventListener('click', showUpgradesScreen);
+            backFromUpgradesBtn.addEventListener('click', showMainMenu);
+            // Load saved data
+            loadGame();
+            // Draw initial state
+            draw();
+            // Set up keyboard controls
+            document.addEventListener('keydown', keyDownHandler);
+            document.addEventListener('keyup', keyUpHandler);
+            // Initialize powerup HUD
+            updatePowerupHud();
+        }
+        // Load game state from localStorage
+        function loadGame() {
+            const savedGame = localStorage.getItem('paddleboundSave');
+            if (savedGame) {
+                try {
+                    const savedData = JSON.parse(savedGame);
+                    playerMeta.currency = savedData.currency || 0;
+                    playerMeta.upgrades = savedData.upgrades || {
+                        paddleStartSize: 0,
+                        ballStartSpeed: 0,
+                        powerupDuration: 0,
+                        extraLife: false,
+                        powerupSlots: 1
+                    };
+                    // Update currency display
+                    updateCurrencyDisplay();
+                } catch (e) {
+                    console.error("Failed to load save data:", e);
+                }
+            }
+        }
+        // Save game state to localStorage
+        function saveGame() {
+            const saveData = {
+                currency: playerMeta.currency,
+                upgrades: playerMeta.upgrades
+            };
+            localStorage.setItem('paddleboundSave', JSON.stringify(saveData));
+        }
+        // Reset game state for a new run
+        function resetGame() {
+            gameState = {
+                playerScore: 0,
+                opponentScore: 0,
+                currentOpponent: 0,
+                currentModifier: null,
+                runStartTime: Date.now(),
+                runStats: {
+                    opponentsDefeated: 0,
+                    totalPoints: 0,
+                    powerupsCollected: 0,
+                    roundsPlayed: 0
+                },
+                powerupsActive: {},
+                frameCount: 0
+            };
+            powerups = [];
+            activePowerups = [];
+            ball.trail = [];
+            // Reset player and opponent
+            resetPaddleSizes();
+            // Apply upgrades
+            if (playerMeta.upgrades.paddleStartSize > 0) {
+                player.width = PADDLE_WIDTH * (1 + 0.2 * playerMeta.upgrades.paddleStartSize);
+                opponent.width = PADDLE_WIDTH * (1 + 0.2 * playerMeta.upgrades.paddleStartSize);
+            }
+            // Position player and opponent
+            player.x = GAME_WIDTH / 2 - player.width / 2;
+            player.y = GAME_HEIGHT - PADDLE_HEIGHT - PADDLE_OFFSET;
+            opponent.x = GAME_WIDTH / 2 - opponent.width / 2;
+            opponent.y = PADDLE_OFFSET;
+            // Setup first opponent
+            setupOpponent(gameState.currentOpponent);
+            // Setup stage modifier
+            if (Math.random() > 0.3) { // 70% chance to have a modifier
+                gameState.currentModifier = stageModifiers[Math.floor(Math.random() * stageModifiers.length)];
+                showModifier(gameState.currentModifier);
+            }
+            // Reset ball
+            resetBall();
+            // Start with ball inactive (waits for player serve)
+            ball.active = false;
+        }
+        function resetPaddleSizes() {
+            player.width = PADDLE_WIDTH;
+            opponent.width = PADDLE_WIDTH;
+        }
+        // Set up a new opponent
+        function setupOpponent(index) {
+            const opponentType = opponents[index % opponents.length];
+            opponent = {
+                ...opponent,
+                width: opponentType.width,
+                speed: opponentType.speed,
+                reactionTime: opponentType.reactionTime,
+                color: opponentType.color,
+                name: opponentType.name,
+                description: opponentType.description,
+                special: opponentType.special
+            };
+            opponent.x = GAME_WIDTH / 2 - opponent.width / 2;
+            opponent.y = PADDLE_OFFSET;
+            // Show opponent introduction
+            showOpponentIntro(opponentType);
+        }
+        // Show opponent introduction
+        function showOpponentIntro(opponent) {
+            const introElement = document.createElement('div');
+            introElement.className = 'opponent-intro';
+            introElement.innerHTML = `
+                <div class="opponent-name">${opponent.name}</div>
+                <div class="opponent-description">${opponent.description}</div>
+                ${opponent.special ? `<div class="opponent-special">Special: ${opponent.special}</div>` : ''}
+                <button class="btn" id="startRound" style="margin-top: 15px;">Start Round</button>
+            `;
+            document.querySelector('.game-container').appendChild(introElement);
+            document.getElementById('startRound').addEventListener('click', () => {
+                introElement.remove();
+                ball.active = true;
+            });
+        }
+        // Show stage modifier
+        function showModifier(modifier) {
+            const modifierElement = document.createElement('div');
+            modifierElement.className = 'modifier-indicator';
+            modifierElement.innerHTML = `
+                <div class="modifier-title">Stage Modifier: ${modifier.name}</div>
+                <div class="modifier-effect">${modifier.description}</div>
+                ${modifier.special ? `<div class="opponent-special">Effect: ${modifier.special}</div>` : ''}
+                <button class="btn" id="continueGame" style="margin-top: 15px;">Continue</button>
+            `;
+            document.querySelector('.game-container').appendChild(modifierElement);
+            document.getElementById('continueGame').addEventListener('click', () => {
+                modifierElement.remove();
+                if (!ball.active) {
+                    // If the ball was waiting to be served
+                    ball.active = true;
+                }
+            });
+        }
+        // Start the game
+        function startGame() {
+            resetGame();
+            mainMenu.style.display = 'none';
+            gameOverScreen.style.display = 'none';
+            gameRunning = true;
+            gameOver = false;
+            // Reset scores
+            gameState.playerScore = 0;
+            gameState.opponentScore = 0;
+            gameState.currentOpponent = 0;
+            updateScores();
+            // Start game loop
+            if (animationFrameId) {
+                cancelAnimationFrame(animationFrameId);
+            }
+            gameLoop();
+        }
+        // Main game loop
+        function gameLoop() {
+            if (!gameRunning) return;
+            update();
+            draw();
+            animationFrameId = requestAnimationFrame(gameLoop);
+        }
+        // Update game state
+        function update() {
+            if (!gameRunning) return;
+            gameState.frameCount++;
+            // Apply stage modifier if active
+            if (gameState.currentModifier) {
+                gameState.currentModifier.effect();
+            }
+            // Update active power-ups and check for expiration
+            updatePowerups();
+            // Ball movement
+            if (ball.active) {
+                // Store current position for trail
+                ball.trail.push({x: ball.x, y: ball.y});
+                if (ball.trail.length > 10) {
+                    ball.trail.shift();
+                }
+                // Move ball
+                ball.x += ball.speedX;
+                ball.y += ball.speedY;
+                // Ball collisions with walls
+                if (ball.x + ball.size > GAME_WIDTH || ball.x < 0) {
+                    ball.speedX = -ball.speedX;
+                    ball.x = Math.max(0, Math.min(GAME_WIDTH - ball.size, ball.x));
+                }
+                // Ball collisions with player paddle
+                if (
+                    ball.y + ball.size > player.y &&
+                    ball.y < player.y + player.height &&
+                    ball.x + ball.size > player.x &&
+                    ball.x < player.x + player.width
+                ) {
+                    // Calculate angle based on where it hits the paddle
+                    const hitPosition = (ball.x - player.x) / player.width;
+                    const angle = hitPosition * Math.PI - Math.PI / 2; // -90 to 90 degrees
+                    ball.speedX = Math.sin(angle) * ball.speed;
+                    ball.speedY = -Math.cos(angle) * ball.speed;
+                    // Ball magnet effect
+                    if (gameState.powerupsActive.magnet) {
+                        ball.speedY *= 0.8; // Reduce vertical speed to make it easier to hit back
+                    }
+                    // Powerup spawn chance
+                    if (Math.random() < POWERUP_SPAWN_CHANCE) {
+                        spawnPowerup();
+                    }
+                }
+                // Ball collisions with opponent paddle
+                if (
+                    ball.y < opponent.y + opponent.height &&
+                    ball.y + ball.size > opponent.y &&
+                    ball.x + ball.size > opponent.x &&
+                    ball.x < opponent.x + opponent.width
+                ) {
+                    // Basic AI reaction calculation
+                    const paddleCenter = opponent.x + opponent.width / 2;
+                    const ballCenter = ball.x + ball.size / 2;
+                    const distanceFromCenter = ballCenter - paddleCenter;
+                    // Calculate angle based on where it hits the paddle (simplified for AI)
+                    const angle = (distanceFromCenter / (opponent.width / 2)) * (Math.PI / 3); // -60 to 60 degrees
+                    ball.speedX = Math.sin(angle) * ball.speed;
+                    ball.speedY = Math.cos(angle) * ball.speed;
+                }
+                // Ball out of bounds - scoring
+                if (ball.y < 0) {
+                    // Player scores
+                    gameState.playerScore++;
+                    gameState.runStats.totalPoints++;
+                    updateScores();
+                    resetBall();
+                    // Check for win
+                    if (gameState.playerScore >= winScore && gameState.playerScore - gameState.opponentScore >= 2) {
+                        roundWon();
+                    }
+                } else if (ball.y + ball.size > GAME_HEIGHT) {
+                    // Opponent scores
+                    gameState.opponentScore++;
+                    updateScores();
+                    resetBall();
+                    // Check for loss
+                    if (gameState.opponentScore >= winScore && gameState.opponentScore - gameState.playerScore >= 2) {
+                        roundLost();
+                    }
+                }
+            }
+            // Opponent AI - simple tracking of ball with some imperfection
+            if (ball.active && Math.random() > 0.3) { // 70% chance to react to allow for "human-like" imperfection
+                const paddleCenter = opponent.x + opponent.width / 2;
+                const ballFutureX = ball.x + ball.speedX * 5; // Predict future position slightly
+                const targetX = ballFutureX - opponent.width / 2;
+                // Apply reaction time
+                const reactionSpeed = opponent.reactionTime * opponent.speed;
+                if (paddleCenter < ballFutureX - 10) {
+                    opponent.x += reactionSpeed;
+                } else if (paddleCenter > ballFutureX + 10) {
+                    opponent.x -= reactionSpeed;
+                }
+                // Keep opponent within bounds
+                opponent.x = Math.max(0, Math.min(GAME_WIDTH - opponent.width, opponent.x));
+            }
+            // Move powerups
+            updatePowerupPositions();
+        }
+        // Update active powerups
+        function updatePowerups() {
+            const now = Date.now();
+            for (const powerupId in gameState.powerupsActive) {
+                if (gameState.powerupsActive[powerupId].endTime <= now) {
+                    removePowerup(powerupId);
+                }
+            }
+            // Update powerup HUD
+            updatePowerupHud();
+        }
+        // Update powerup positions and check for collection
+        function updatePowerupPositions() {
+            for (let i = powerups.length - 1; i >= 0; i--) {
+                const powerup = powerups[i];
+                // Move powerup down
+                powerup.y += 1;
+                // Check if collected by player
+                if (
+                    powerup.y + POWERUP_SIZE > player.y &&
+                    powerup.y < player.y + player.height &&
+                    powerup.x + POWERUP_SIZE > player.x &&
+                    powerup.x < player.x + player.width
+                ) {
+                    // Apply powerup effect
+                    applyPowerup(powerup.type);
+                    // Remove from array
+                    powerups.splice(i, 1);
+                    gameState.runStats.powerupsCollected++;
+                    // Show collection notification
+                    showPowerupNotification(powerupTypes.find(p => p.id === powerup.type).name);
+                }
+                // Remove if out of bounds
+                if (powerup.y > GAME_HEIGHT) {
+                    powerups.splice(i, 1);
+                }
+            }
+        }
+        // Spawn a new powerup at random position
+        function spawnPowerup(specificType = null) {
+            const type = specificType || powerupTypes[Math.floor(Math.random() * powerupTypes.length)].id;
+            powerups.push({
+                x: Math.random() * (GAME_WIDTH - POWERUP_SIZE - 20) + 10,
+                y: 10,
+                type: type,
+                size: POWERUP_SIZE
+            });
+        }
+        // Apply a powerup effect
+        function applyPowerup(powerupId) {
+            const now = Date.now();
+            let duration = POWERUP_DURATION;
+            // Apply duration upgrade
+            if (playerMeta.upgrades.powerupDuration > 0) {
+                duration *= 1 + 0.25 * playerMeta.upgrades.powerupDuration;
+            }
+            // Handle powerup effects
+            switch (powerupId) {
+                case 'paddleXL':
+                    gameState.powerupsActive.paddleXL = {
+                        originalWidth: player.width,
+                        endTime: now + duration
+                    };
+                    player.width *= 1.5;
+                    break;
+                case 'paddleXS':
+                    gameState.powerupsActive.paddleXS = {
+                        originalWidth: player.width,
+                        endTime: now + duration
+                    };
+                    player.width *= 0.5;
+                    break;
+                case 'speedBoost':
+                    gameState.powerupsActive.speedBoost = {
+                        originalSpeed: ball.speed,
+                        endTime: now + duration
+                    };
+                    ball.speed *= 1.5;
+                    break;
+                case 'multiBall':
+                    // Spawn 3 extra balls
+                    for (let i = 0; i < 3; i++) {
+                        const angle = Math.random() * Math.PI * 2;
+                        const speed = ball.speed * (0.8 + Math.random() * 0.4);
+                        powerups.push({
+                            x: ball.x,
+                            y: ball.y,
+                            type: 'extraBall',
+                            size: BALL_SIZE,
+                            speedX: Math.cos(angle) * speed,
+                            speedY: Math.sin(angle) * speed,
+                            active: true,
+                            lifetime: 300 // frames
+                        });
+                    }
+                    break;
+                case 'slowMotion':
+                    gameState.powerupsActive.slowMotion = {
+                        endTime: now + duration
+                    };
+                    // Effect handled in the update loop
+                    break;
+                case 'magnet':
+                    gameState.powerupsActive.magnet = {
+                        endTime: now + duration
+                    };
+                    break;
+            }
+        }
+        // Remove a powerup effect
+        function removePowerup(powerupId) {
+            switch (powerupId) {
+                case 'paddleXL':
+                case 'paddleXS':
+                    player.width = gameState.powerupsActive[powerupId].originalWidth;
+                    break;
+                case 'speedBoost':
+                    ball.speed = gameState.powerupsActive[powerupId].originalSpeed;
+                    break;
+            }
+            delete gameState.powerupsActive[powerupId];
+            updatePowerupHud();
+        }
+        // Show powerup notification
+        function showPowerupNotification(powerupName) {
+            const notification = document.querySelector('.powerup-notification');
+            if (!notification) {
+                const notifElement = document.createElement('div');
+                notifElement.className = 'powerup-notification';
+                notifElement.textContent = `Powerup Collected: ${powerupName}`;
+                document.querySelector('.game-container').appendChild(notifElement);
+                setTimeout(() => {
+                    notifElement.classList.add('show');
+                }, 10);
+                setTimeout(() => {
+                    notifElement.remove();
+                }, 2000);
+            } else {
+                notification.textContent = `Powerup Collected: ${powerupName}`;
+                notification.classList.remove('show');
+                setTimeout(() => {
+                    notification.classList.add('show');
+                }, 10);
+            }
+        }
+        // Reset ball to center
+        function resetBall() {
+            ball.x = GAME_WIDTH / 2 - ball.size / 2;
+            ball.y = GAME_HEIGHT / 2 - ball.size / 2;
+            // Initial direction - slightly randomized
+            const angle = Math.random() * Math.PI / 2 - Math.PI / 4; // -45 to 45 degrees
+            const speed = BALL_INITIAL_SPEED;
+            if (playerMeta.upgrades.ballStartSpeed > 0) {
+                speed *= 1 - 0.1 * playerMeta.upgrades.ballStartSpeed;
+            }
+            ball.speed = speed;
+            ball.speedX = Math.sin(angle) * ball.speed;
+            ball.speedY = Math.cos(angle) * ball.speed;
+            // Randomly choose who serves (positive or negative Y direction)
+            if (Math.random() > 0.5) {
+                ball.speedY = -ball.speedY;
+            }
+            ball.active = false; // Wait for player input (space) to serve
+            ball.trail = [];
+        }
+        // Player won the round
+        function roundWon() {
+            gameState.runStats.opponentsDefeated++;
+            gameState.runStats.roundsPlayed++;
+            // Next opponent
+            gameState.currentOpponent++;
+            // Reset scores
+            gameState.playerScore = 0;
+            gameState.opponentScore = 0;
+            // Setup next opponent
+            setupOpponent(gameState.currentOpponent);
+            // Reset ball (but don't serve yet)
+            resetBall();
+            updateScores();
+        }
+        // Player lost the round
+        function roundLost() {
+            gameState.runStats.roundsPlayed++;
+            gameOver = true;
+            gameRunning = false;
+            // Calculate earned currency (1 per point + 10 per opponent defeated)
+            const earnedCurrency = Math.floor(gameState.runStats.totalPoints + gameState.runStats.opponentsDefeated * 10);
+            playerMeta.currency += earnedCurrency;
+            saveGame();
+            // Update game over screen
+            document.getElementById('stat-rounds').textContent = gameState.runStats.opponentsDefeated;
+            document.getElementById('stat-score').textContent = gameState.runStats.totalPoints;
+            // Calculate time played
+            const timePlayed = Math.floor((Date.now() - gameState.runStartTime) / 1000);
+            const minutes = Math.floor(timePlayed / 60);
+            const seconds = timePlayed % 60;
+            document.getElementById('stat-time').textContent = `${minutes}:${seconds.toString().padStart(2, '0')}`;
+            document.getElementById('earned-currency').textContent = earnedCurrency;
+            // Show game over screen
+            gameOverScreen.style.display = 'flex';
+        }
+        // Update score display
+        function updateScores() {
+            document.querySelector('.player-score').textContent = `YOU: ${gameState.playerScore}`;
+            document.querySelector('.opponent-score').textContent = `${opponent.name.toUpperCase().substring(0, 5)}: ${gameState.opponentScore}`;
+        }
+        // Update powerup HUD display
+        function updatePowerupHud() {
+            const activePowerups = Object.keys(gameState.powerupsActive);
+            const powerupElements = document.querySelectorAll('.powerup-icon');
+            // Reset all icons
+            powerupElements.forEach(el => {
+                el.textContent = '?';
+                el.style.backgroundColor = 'rgba(76, 201, 240, 0.2)';
+                el.classList.remove('active');
+            });
+            // Update active icons
+            activePowerups.forEach((powerupId, index) => {
+                if (index < playerMeta.upgrades.powerupSlots) {
+                    const powerup = powerupTypes.find(p => p.id === powerupId);
+                    if (powerup) {
+                        powerupElements[index].textContent = powerup.icon;
+                        powerupElements[index].style.backgroundColor = powerup.color;
+                        powerupElements[index].classList.add('active');
+                        // Calculate remaining time percentage
+                        const remaining = (gameState.powerupsActive[powerupId].endTime - Date.now()) / POWERUP_DURATION;
+                        powerupElements[index].style.backgroundImage =
+                            `linear-gradient(to top, ${powerup.color} ${remaining * 100}%, rgba(76, 201, 240, 0.2) ${remaining * 100}%)`;
+                    }
+                }
+            });
+        }
+        // Draw everything
+        function draw() {
+            // Clear canvas
+            ctx.fillStyle = '#14213D';
+            ctx.fillRect(0, 0, GAME_WIDTH, GAME_HEIGHT);
+            // Draw center line
+            ctx.setLineDash([5, 10]);
+            ctx.beginPath();
+            ctx.moveTo(GAME_WIDTH / 2, 0);
+            ctx.lineTo(GAME_WIDTH / 2, GAME_HEIGHT);
+            ctx.strokeStyle = 'rgba(248, 249, 250, 0.5)';
+            ctx.lineWidth = 2;
+            ctx.stroke();
+            ctx.setLineDash([]);
+            // Draw ball trail
+            if (ball.active) {
+                ball.trail.forEach((pos, i) => {
+                    const alpha = 0.1 + (i / ball.trail.length) * 0.4;
+                    ctx.fillStyle = `rgba(248, 249, 250, ${alpha})`;
+                    ctx.fillRect(pos.x, pos.y, ball.size, ball.size);
+                });
+            }
+            // Draw powerups
+            powerups.forEach(powerup => {
+                const powerupType = powerupTypes.find(p => p.id === powerup.type);
+                if (powerupType) {
+                    ctx.fillStyle = powerupType.color;
+                    ctx.fillRect(powerup.x, powerup.y, powerup.size, powerup.size);
+                    // Draw icon/text
+                    ctx.fillStyle = '#FFFFFF';
+                    ctx.font = '10px Arial';
+                    ctx.textAlign = 'center';
+                    ctx.textBaseline = 'middle';
+                    ctx.fillText(powerupType.icon, powerup.x + powerup.size / 2, powerup.y + powerup.size / 2);
+                } else if (powerup.type === 'extraBall') {
+                    // Draw extra balls (from multi-ball)
+                    ctx.fillStyle = '#FFFFFF';
+                    ctx.fillRect(powerup.x, powerup.y, powerup.size, powerup.size);
+                }
+            });
+            // Draw ball
+            ctx.fillStyle = ball.color;
+            ctx.fillRect(ball.x, ball.y, ball.size, ball.size);
+            // Draw player paddle
+            ctx.fillStyle = player.color;
+            ctx.fillRect(player.x, player.y, player.width, player.height);
+            // Draw opponent paddle
+            ctx.fillStyle = opponent.color;
+            ctx.fillRect(opponent.x, opponent.y, opponent.width, opponent.height);
+            // Draw ball direction indicator when waiting to serve
+            if (!ball.active) {
+                ctx.setLineDash([3, 3]);
+                ctx.beginPath();
+                ctx.moveTo(ball.x + ball.size / 2, ball.y + ball.size / 2);
+                ctx.lineTo(
+                    ball.x + ball.size / 2 + ball.speedX * 30,
+                    ball.y + ball.size / 2 + ball.speedY * 30
+                );
+                ctx.strokeStyle = 'rgba(248, 249, 250, 0.7)';
+                ctx.lineWidth = 2;
+                ctx.stroke();
+                ctx.setLineDash([]);
+                // Draw serve prompt
+                ctx.fillStyle = 'rgba(248, 249, 250, 0.8)';
+                ctx.font = '16px "Press Start 2P"';
+                ctx.textAlign = 'center';
+                ctx.fillText('PRESS SPACE TO SERVE', GAME_WIDTH / 2, 50);
+            }
+            // If game is over but not showing game over screen (transition)
+            if (gameOver && gameOverScreen.style.display === 'none') {
+                ctx.fillStyle = 'rgba(230, 57, 70, 0.7)';
+                ctx.fillRect(0, 0, GAME_WIDTH, GAME_HEIGHT);
+                ctx.fillStyle = '#FFFFFF';
+                ctx.font = '30px "Press Start 2P"';
+                ctx.textAlign = 'center';
+                ctx.fillText('GAME OVER', GAME_WIDTH / 2, GAME_HEIGHT / 2);
+            }
+        }
+        // Keyboard controls
+        let rightPressed = false;
+        let leftPressed = false;
+        function keyDownHandler(e) {
+            if (e.key === 'Right' || e.key === 'ArrowRight') {
+                rightPressed = true;
+            } else if (e.key === 'Left' || e.key === 'ArrowLeft') {
+                leftPressed = true;
+            } else if (e.key === ' ' && !ball.active) {
+                // Serve ball on space
+                if (gameRunning && !gameOver) {
+                    ball.active = true;
+                }
+            } else if (e.key === 'Escape') {
+                if (gameRunning) {
+                    // Pause game
+                    gameRunning = false;
+                } else if (gameOverScreen.style.display === 'flex') {
+                    showMainMenu();
+                } else if (upgradesScreen.style.display === 'flex') {
+                    showMainMenu();
+                } else {
+                    // Resume game from pause
+                    gameRunning = true;
+                    gameLoop();
+                }
+            }
+        }
+        function keyUpHandler(e) {
+            if (e.key === 'Right' || e.key === 'ArrowRight') {
+                rightPressed = false;
+            } else if (e.key === 'Left' || e.key === 'ArrowLeft') {
+                leftPressed = false;
+            }
+        }
+        // Show main menu
+        function showMainMenu(){
+          console.log('show main menu');
+        }
+        </script>
+        <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: absolute; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">This website has been generated by <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
+</html>