Spaces:

bangis
/

myyyy

Running

App Files Files Community

bangis commited on May 21, 2025

Commit

79fd433

verified ·

1 Parent(s): 5102f8b

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +921 -19
prompts.txt +23 -0

README.md CHANGED Viewed

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

 ---
+title: myyyy
+emoji: 🐳
+colorFrom: pink
+colorTo: gray
 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,921 @@
-<!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>Battle Arena - Sign In</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @keyframes pulse {
+            0%, 100% { transform: scale(1); }
+            50% { transform: scale(1.05); }
+        }
+        @keyframes shake {
+            0%, 100% { transform: translateX(0); }
+            25% { transform: translateX(-5px); }
+            50% { transform: translateX(5px); }
+            75% { transform: translateX(-5px); }
+        }
+        @keyframes hit {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.1); }
+            100% { transform: scale(1); }
+        }
+        @keyframes divineGlow {
+            0% { box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.5); }
+            50% { box-shadow: 0 0 20px 5px rgba(255, 215, 0, 0.7); }
+            100% { box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.5); }
+        }
+        @keyframes ragePulse {
+            0%, 100% { transform: scale(1); background-color: #DC2626; }
+            50% { transform: scale(1.05); background-color: #B91C1C; }
+        }
+        @keyframes float {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-10px); }
+        }
+        @keyframes chaosGlow {
+            0% { background-color: #8B5CF6; }
+            20% { background-color: #EC4899; }
+            40% { background-color: #F59E0B; }
+            60% { background-color: #10B981; }
+            80% { background-color: #3B82F6; }
+            100% { background-color: #8B5CF6; }
+        }
+        @keyframes distort {
+            0%, 100% { transform: skew(0deg, 0deg); }
+            20% { transform: skew(5deg, 5deg); }
+            40% { transform: skew(-5deg, -5deg); }
+            60% { transform: skew(8deg, 8deg); }
+            80% { transform: skew(-8deg, -8deg); }
+        }
+        .health-bar {
+            transition: width 0.3s ease;
+        }
+        .on-cooldown {
+            opacity: 0.6;
+            cursor: not-allowed;
+        }
+        .divine-glow {
+            animation: divineGlow 2s infinite;
+        }
+        .rage-pulse {
+            animation: ragePulse 0.5s infinite;
+        }
+        .chaos-glow {
+            animation: chaosGlow 1s infinite, distort 2s infinite;
+        }
+        .coin-animation {
+            animation: bounceIn 0.5s;
+        }
+        .difficulty-card:hover {
+            transform: translateY(-5px);
+        }
+        .hero-float {
+            animation: float 3s ease-in-out infinite;
+        }
+        @keyframes bounceIn {
+            0% { transform: scale(0.5); opacity: 0; }
+            70% { transform: scale(1.1); opacity: 1; }
+            100% { transform: scale(1); }
+        }
+        .modal {
+            transition: all 0.3s ease;
+        }
+        .modal.hidden {
+            opacity: 0;
+            visibility: hidden;
+        }
+        .shop-item:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+        }
+        .screen {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            transition: opacity 0.5s ease;
+        }
+        .screen.hidden {
+            opacity: 0;
+            pointer-events: none;
+        }
+        .how-to-play::-webkit-scrollbar {
+            width: 8px;
+        }
+        .how-to-play::-webkit-scrollbar-track {
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 10px;
+        }
+        .how-to-play::-webkit-scrollbar-thumb {
+            background: rgba(255, 255, 255, 0.3);
+            border-radius: 10px;
+        }
+        .how-to-play::-webkit-scrollbar-thumb:hover {
+            background: rgba(255, 255, 255, 0.5);
+        }
+        .quick-start-container {
+            max-height: calc(100vh - 200px);
+            overflow-y: auto;
+        }
+        .character-dropdown {
+            max-height: 300px;
+            overflow-y: auto;
+        }
+        .login-form {
+            background: rgba(0, 0, 0, 0.8);
+            backdrop-filter: blur(10px);
+        }
+        .battle-arena-container {
+            position: absolute;
+            top: 20%;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 500px;
+            max-width: 90%;
+        }
+        .login-screen {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 100;
+            background-color: rgba(0, 0, 0, 0.8);
+        }
+        .password-container {
+            position: relative;
+        }
+        .toggle-password {
+            position: absolute;
+            right: 10px;
+            top: 50%;
+            transform: translateY(-50%);
+            cursor: pointer;
+            color: #9CA3AF;
+        }
+        .toggle-password:hover {
+            color: #D1D5DB;
+        }
+        .game-title {
+            position: absolute;
+            top: 10%;
+            left: 50%;
+            transform: translateX(-50%);
+            font-size: 4rem;
+            background: linear-gradient(to right, #4facfe, #00f2fe);
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+            text-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+        .difficulty-container {
+            position: absolute;
+            bottom: 10%;
+            left: 0;
+            right: 0;
+            padding: 20px;
+        }
+    </style>
+</head>
+<body class="bg-gradient-to-br from-gray-900 to-black text-white min-h-screen font-sans overflow-hidden">
+    <!-- Login Screen (Must complete before playing) -->
+    <div id="login-screen" class="login-screen">
+        <div class="bg-gray-800 rounded-lg p-8 w-full max-w-md border border-blue-500">
+            <h1 class="text-3xl font-bold text-center mb-6 text-blue-400">SIGN IN TO BATTLE</h1>
+            <div class="mb-4">
+                <label class="block text-gray-300 mb-2" for="player-name">Your Name (2-30 chars)</label>
+                <input type="text" id="player-name" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded focus:outline-none focus:border-blue-500" maxlength="30">
+            </div>
+            <div class="mb-6 password-container">
+                <label class="block text-gray-300 mb-2" for="player-password">Password</label>
+                <input type="password" id="player-password" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded focus:outline-none focus:border-blue-500 pr-10">
+                <i class="fas fa-eye toggle-password" id="toggle-password"></i>
+            </div>
+            <button id="login-submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition">
+                Enter Battle Arena
+            </button>
+        </div>
+    </div>
+    <!-- Lobby Screen -->
+    <div id="lobby-screen" class="screen hidden flex flex-col items-center p-4">
+        <!-- Character Selection Dropdown (Top Right) -->
+        <div class="absolute top-4 right-4 z-30">
+            <div class="relative inline-block text-left">
+                <div>
+                    <button type="button" id="character-menu-button" class="inline-flex justify-center w-full rounded-md border border-purple-500 shadow-sm px-4 py-2 bg-purple-900 text-sm font-medium text-white hover:bg-purple-800 focus:outline-none" aria-expanded="true" aria-haspopup="true">
+                        <i class="fas fa-user mr-2"></i> Select Character
+                    </button>
+                </div>
+                <div id="character-dropdown" class="hidden origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-gray-800 ring-1 ring-purple-500 ring-opacity-50 focus:outline-none character-dropdown">
+                    <div class="py-1" role="none">
+                        <div class="flex items-center px-4 py-2 text-sm hover:bg-purple-900 cursor-pointer border-b border-gray-700" onclick="selectCharacter('knight')">
+                            <img src="https://cdn-icons-png.flaticon.com/512/3829/3829110.png" class="w-8 h-8 mr-3" alt="Knight">
+                            <span class="flex-1">Knight</span>
+                            <i class="fas fa-check text-green-400 ml-2 hidden" id="knight-selected"></i>
+                        </div>
+                        <div class="flex items-center px-4 py-2 text-sm hover:bg-purple-900 cursor-pointer border-b border-gray-700" onclick="selectCharacter('wizard')">
+                            <img src="https://cdn-icons-png.flaticon.com/512/3829/3829149.png" class="w-8 h-8 mr-3" alt="Wizard">
+                            <span class="flex-1">Wizard</span>
+                            <i class="fas fa-check text-green-400 ml-2 hidden" id="wizard-selected"></i>
+                        </div>
+                        <div class="flex items-center px-4 py-2 text-sm hover:bg-purple-900 cursor-pointer border-b border-gray-700" onclick="selectCharacter('archer')">
+                            <img src="https://cdn-icons-png.flaticon.com/512/3829/3829166.png" class="w-8 h-8 mr-3" alt="Archer">
+                            <span class="flex-1">Archer</span>
+                            <i class="fas fa-check text-green-400 ml-2 hidden" id="archer-selected"></i>
+                        </div>
+                        <div class="flex items-center px-4 py-2 text-sm hover:bg-purple-900 cursor-pointer" onclick="selectCharacter('ninja')">
+                            <img src="https://cdn-icons-png.flaticon.com/512/3829/3829114.png" class="w-8 h-8 mr-3" alt="Ninja">
+                            <span class="flex-1">Ninja</span>
+                            <i class="fas fa-check text-green-400 ml-2 hidden" id="ninja-selected"></i>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Game Title (Middle Top) -->
+        <h1 class="game-title">
+            BATTLE ARENA
+        </h1>
+        <!-- Hero Character (Under Title) -->
+        <div class="flex justify-center mb-10 hero-float absolute top-[30%] left-1/2 transform -translate-x-1/2">
+            <img id="selected-character-img" src="https://cdn-icons-png.flaticon.com/512/3829/3829110.png" alt="Hero" class="h-40">
+        </div>
+        <!-- How to Play Panel (Top Left) -->
+        <div class="absolute top-4 left-4 w-80">
+            <div class="bg-gray-800 bg-opacity-50 rounded-lg p-4 border border-gray-700 how-to-play" style="max-height: 60vh; overflow-y: auto;">
+                <h3 class="text-lg font-semibbold mb-2 sticky top-0 bg-gray-800 py-2">HOW TO PLAY</h3>
+                <ul class="text-sm text-gray-300 text-left space-y-2 pr-2">
+                    <li class="flex items-start">
+                        <i class="fas fa-fist-raised text-blue-400 mr-2 mt-1"></i>
+                        <div>
+                            <strong class="text-blue-300">PUNCH:</strong> Basic attack (10-20 damage)
+                            <p class="text-xs text-gray-400 mt-1">Cooldown: 2 seconds</p>
+                        </div>
+                    </li>
+                    <li class="flex items-start">
+                        <i class="fas fa-shield-alt text-blue-40 mr-2 mt-1"></i>
+                        <div>
+                            <strong class="text-blue-300">BLOCK:</strong> Protect against next attack for 2 seconds
+                            <p class="text-xs text-gray-400 mt-1">Cooldown: 3 seconds</p>
+                        </div>
+                    </li>
+                    <li class="flex items-start">
+                        <i class="fas fa-bolt text-yellow-400 mr-2 mt-1"></i>
+                        <div>
+                            <strong class="text-yellow-300">SPECIAL:</strong> Powerful attack (20-40 damage)
+                            <p class="text-xs text-gray-400 mt-1">Cooldown: 5 seconds</p>
+                        </div>
+                    </li>
+                    <li class="flex items-start">
+                        <i class="fas fa-star text-purple-400 mr-2 mt-1"></i>
+                        <div>
+                            <strong class="text-purple-300">DIVINE ANGEL:</strong> Randomly appears (20% chance) when attacking, deals 40-50 damage
+                            <p class="text-xs text-gray-400 mt-1">Can only be used once per battle</p>
+                        </div>
+                    </li>
+                    <li class="flex items-start">
+                        <i class="fas fa-fire text-red-400 mr-2 mt-1"></i>
+                        <div>
+                            <strong class="text-red-300">RAGE MODE:</strong> Rarely appears (1% chance) when attacking, deals 90-100 damage
+                            <p class="text-xs text-gray-400 mt-1">Can only be used once per battle</p>
+                        </div>
+                    </li>
+                    <li class="flex items-start">
+                        <i class="fas fa-coins text-yellow-400 mr-2 mt-1"></i>
+                        <div>
+                            <strong class="text-yellow-300">COINS:</strong> Earn coins by battling opponents
+                            <p class="text-xs text-gray-400 mt-1">More for harder difficulties</p>
+                        </div>
+                    </li>
+                    <li class="flex items-start">
+                        <i class="fas fa-fire-alt text-purple-400 mr-2 mt-1"></i>
+                        <div>
+                            <strong class="text-purple-300">CHAOS MODE:</strong> Everything random - damage, abilities, cooldowns!
+                            <p class="text-xs text-gray-400 mt-1">For the truly insane</p>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+        </div>
+        <!-- Player Name Display (Top Center) -->
+        <div class="absolute top-4 left-1/2 transform -translate-x-1/2 bg-blue-900 rounded-full px-6 py-1 flex items-center border border-blue-400">
+            <i class="fas fa-user-circle mr-2"></i>
+            <span id="player-display-name" class="font-medium">Player</span>
+        </div>
+        <!-- Difficulty Selection (Now at Bottom) -->
+        <div class="difficulty-container px-4 w-full max-w-4xl">
+            <h2 class="text-2xl font-semibold mb-6 text-center">SELECT DIFFICULTY</h2>
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
+                <!-- Easy -->
+                <div class="difficulty-card bg-gradient-to-br from-green-600 to-green-800 p-6 rounded-xl cursor-pointer transition-all transform hover:scale-105 shadow-lg"
+                     onclick="startGame('easy')">
+                    <div class="flex justify-center mb-4">
+                        <i class="fas fa-feather-alt text-4xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-2">BEGINNER</h3>
+                    <p class="text-sm opacity-80 mb-3">Learn the basics</p>
+                    <div class="flex justify-center gap-1">
+                        <i class="fas fa-shield-alt text-green-300"></i>
+                        <i class="fas fa-shield-alt text-gray-500"></i>
+                        <i class="fas fa-shield-alt text-gray-500"></i>
+                    </div>
+                </div>
+                <!-- Medium -->
+                <div class="difficulty-card bg-gradient-to-br from-yellow-600 to-yellow-800 p-6 rounded-xl cursor-pointer transition-all transform hover:scale-105 shadow-lg"
+                     onclick="startGame('medium')">
+                    <div class="flex justify-center mb-4">
+                        <i class="fas fa-user-shield text-4xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-2">WARRIOR</h3>
+                    <p class="text-sm opacity-80 mb-3">Balanced challenge</p>
+                    <div class="flex justify-center gap-1">
+                        <i class="fas fa-shield-alt text-yellow-300"></i>
+                        <i class="fas fa-shield-alt text-yellow-300"></i>
+                        <i class="fas fa-shield-alt text-gray-500"></i>
+                    </div>
+                </div>
+                <!-- Hard -->
+                <div class="difficulty-card bg-gradient-to-br from-red-600 to-red-800 p-6 rounded-xl cursor-pointer transition-all transform hover:scale-105 shadow-lg"
+                     onclick="startGame('hard')">
+                    <div class="flex justify-center mb-4">
+                        <i class="fas fa-skull text-4xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-2">NIGHTMARE</h3>
+                    <p class="text-sm opacity-80 mb-3">Only for the brave</p>
+                    <div class="flex justify-center gap-1">
+                        <i class="fas fa-shield-alt text-red-300"></i>
+                        <i class="fas fa-shield-alt text-red-300"></i>
+                        <i class="fas fa-shield-alt text-red-300"></i>
+                    </div>
+                </div>
+                <!-- Chaos Mode -->
+                <div class="difficulty-card bg-gradient-to-br from-purple-600 via-pink-600 to-yellow-500 p-6 rounded-xl cursor-pointer transition-all transform hover:scale-105 shadow-lg chaos-glow"
+                     onclick="startGame('chaos')">
+                    <div class="flex justify-center mb-4">
+                        <i class="fas fa-fire-alt text-4xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-2">CHAOS MODE</h3>
+                    <p class="text-sm opacity-80 mb-3">Unpredictable madness!</p>
+                    <div class="flex justify-center gap-1">
+                        <i class="fas fa-skull-crossbones"></i>
+                        <i class="fas fa-random"></i>
+                        <i class="fas fa-bolt"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Logout Button -->
+        <button id="logout-btn" class="absolute bottom-4 right-4 bg-red-700 hover:bg-red-600 text-white px-4 py-2 rounded-lg shadow transition-all flex items-center">
+            <i class="fas fa-sign-out-alt mr-2"></i> Logout
+        </button>
+    </div>
+    <!-- Game Screen -->
+    <div id="game-screen" class="screen hidden flex items-center justify-start flex-col p-4">
+        <!-- Coin Counter Top Left -->
+        <div class="absolute top-4 left-4 flex items-center bg-gray-800 rounded-full px-4 py-2 border border-yellow-400">
+            <i class="fas fa-coins text-yellow-400 mr-2"></i>
+            <span id="coin-count" class="font-bold">0</span>
+        </div>
+        <!-- Back to Lobby Button -->
+        <button id="lobby-btn" class="absolute top-4 right-4 bg-gray-800 hover:bg-gray-700 rounded-full px-4 py-2 flex items-center border border-blue-400 transition-transform transform hover:scale-105">
+            <i class="fas fa-home text-blue-400 mr-2"></i>
+            <span>LOBBY</span>
+        </button>
+        <!-- Shop Button -->
+        <button id="shop-btn" class="absolute top-16 right-4 bg-gray-800 hover:bg-gray-700 rounded-full px-4 py-2 flex items-center border border-blue-400 transition-transform transform hover:scale-105">
+            <i class="fas fa-shopping-cart text-blue-400 mr-2"></i>
+            <span>Shop</span>
+        </button>
+        <!-- Difficulty Indicator -->
+        <div id="difficulty-indicator" class="absolute top-28 right-4 flex items-center bg-gray-800 rounded-full px-4 py-1 border border-gray-600 text-xs">
+            Difficulty: <span id="current-difficulty" class="font-bold ml-1">Medium</span>
+        </div>
+        <!-- Player Name Display -->
+        <div class="absolute top-4 left-1/2 transform -translate-x-1/2 bg-blue-900 rounded-full px-6 py-1 flex items-center border border-blue-400">
+            <i class="fas fa-user-circle mr-2"></i>
+            <span id="game-player-display-name" class="font-medium">Player</span>
+        </div>
+        <!-- Battle Arena Container (Positioned Middle Top) -->
+        <div class="battle-arena-container">
+            <!-- Player Health Bar -->
+            <div class="mb-4">
+                <div class="flex justify-between mb-1">
+                    <span class="font-medium">YOU</span>
+                    <span id="player-health-text" class="font-bold">200/200</span>
+                </div>
+                <div class="w-full bg-gray-700 rounded-full h-4">
+                    <div id="player-health" class="bg-green-500 h-4 rounded-full health-bar" style="width: 100%"></div>
+                </div>
+            </div>
+            <!-- Enemy Health Bar -->
+            <div class="mb-4">
+                <div class="flex justify-between mb-1">
+                    <span class="font-medium" id="enemy-name">ENEMY</span>
+                    <span id="enemy-health-text" class="font-bold">100/100</span>
+                </div>
+                <div class="w-full bg-gray-700 rounded-full h-4">
+                    <div id="enemy-health" class="bg-red-500 h-4 rounded-full health-bar" style="width: 100%"></div>
+                </div>
+            </div>
+            <div class="flex justify-around mb-8">
+                <div class="text-center">
+                    <img src="https://cdn-icons-png.flaticon.com/512/3829/3829110.png" alt="Hero" class="h-32 mx-auto">
+                    <span class="mt-2 block">YOU</span>
+                </div>
+                <div class="text-center">
+                    <img src="https://cdn-icons-png.flaticon.com/512/3829/3829166.png" alt="Enemy" class="h-32 mx-auto">
+                    <span class="mt-2 block">VS</span>
+                </div>
+            </div>
+            <!-- Battle Controls -->
+            <div class="grid grid-cols-1 sm:grid-cols-3 gap-3 mb-8">
+                <button id="punch-btn" class="bg-blue-600 hover:bg-blue-700 text-white py-3 px-4 rounded-lg flex flex-col items-center">
+                    <i class="fas fa-fist-raised text-xl mb-1"></i>
+                    <span>PUNCH (10-20 DMG)</span>
+                    <div class="w-full bg-blue-800 h-1 mt-1 rounded-full overflow-hidden">
+                        <div id="punch-cooldown" class="bg-blue-400 h-full" style="width: 100%"></div>
+                    </div>
+                </button>
+                <button id="block-btn" class="bg-yellow-600 hover:bg-yellow-700 text-white py-3 px-4 rounded-lg flex flex-col items-center">
+                    <i class="fas fa-shield-alt text-xl mb-1"></i>
+                    <span>BLOCK (2 SEC)</span>
+                    <div class="w-full bg-yellow-800 h-1 mt-1 rounded-full overflow-hidden">
+                        <div id="block-cooldown" class="bg-yellow-400 h-full" style="width: 100%"></div>
+                    </div>
+                </button>
+                <button id="special-btn" class="bg-purple-600 hover:bg-purple-700 text-white py-3 px-4 rounded-lg flex flex-col items-center">
+                    <i class="fas fa-bolt text-xl mb-1"></i>
+                    <span>SPECIAL (20-40 DMG)</span>
+                    <div class="w-full bg-purple-800 h-1 mt-1 rounded-full overflow-hidden">
+                        <div id="special-cooldown" class="bg-purple-400 h-full" style="width: 100%"></div>
+                    </div>
+                </button>
+            </div>
+            <!-- Divine Angel Button (Randomly Appears) -->
+            <button id="divine-btn" class="divine-glow bg-gradient-to-r from-blue-400 to-purple-500 hover:from-blue-500 hover:to-purple-600 text-white font-bold py-3 px-6 rounded-full mb-4 hidden">
+                <i class="fas fa-star mr-2"></i> DIVINE ANGEL (40-50 DMG)
+            </button>
+            <!-- Rage Mode Button (Rarely Appears) -->
+            <button id="rage-btn" class="rage-pulse bg-gradient-to-r from-red-600 to-orange-500 hover:from-red-700 hover:to-orange-600 text-white font-bold py-3 px-6 rounded-full mb-4 hidden">
+                <i class="fas fa-fire mr-2"></i> RAGE MODE (90-100 DMG)
+            </button>
+            <!-- Battle Log -->
+            <div id="battle-log" class="bg-gray-800 bg-opacity-70 rounded-lg p-3 max-h-48 overflow-y-auto text-sm">
+                <div class="text-center text-gray-400">Battle log will appear here...</div>
+            </div>
+        </div>
+    </div>
+    <!-- Shop Screen -->
+    <div id="shop-screen" class="screen hidden bg-gray-900 bg-opacity-90 flex justify-center items-start pt-12">
+        <div class="bg-gray-800 rounded-lg p-6 w-full max-w-4xl">
+            <div class="flex justify-between items-center mb-6">
+                <h2 class="text-2xl font-bold text-blue-400">ARMORY</h2>
+                <div class="flex items-center bg-gray-700 rounded-full px-4 py-2">
+                    <i class="fas fa-coins text-yellow-400 mr-2"></i>
+                    <span id="shop-coin-count" class="font-bold">0</span>
+                </div>
+            </div>
+            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-8">
+                <div class="shop-item bg-gray-700 rounded-lg p-4 cursor-pointer transition-transform border border-transparent hover:border-blue-500">
+                    <div class="flex items-start">
+                        <img src="https://cdn-icons-png.flaticon.com/512/3829/3829110.png" class="w-12 h-12 mr-4" alt="Armor">
+                        <div>
+                            <h3 class="font-bold text-lg">Steel Armor</h3>
+                            <p class="text-sm text-gray-300 mb-2">Increase health by 50 points</p>
+                            <div class="flex justify-between items-center">
+                                <span class="font-bold text-yellow-400">100 Coins</span>
+                                <button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-sm">
+                                    Buy
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="shop-item bg-gray-700 rounded-lg p-4 cursor-pointer transition-transform border border-transparent hover:border-blue-500">
+                    <div class="flex items-start">
+                        <img src="https://cdn-icons-png.flaticon.com/512/3829/3829110.png" class="w-12 h-12 mr-4" alt="Sword">
+                        <div>
+                            <h3 class="font-bold text-lg">Diamond Sword</h3>
+                            <p class="text-sm text-gray-300 mb-2">Increase base damage by 5 points</p>
+                            <div class="flex justify-between items-center">
+                                <span class="font-bold text-yellow-400">150 Coins</span>
+                                <button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-sm">
+                                    Buy
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="shop-item bg-gray-700 rounded-lg p-4 cursor-pointer transition-transform border border-transparent hover:border-blue-500">
+                    <div class="flex items-start">
+                        <img src="https://cdn-icons-png.flaticon.com/512/3829/3829110.png" class="w-12 h-12 mr-4" alt="Potion">
+                        <div>
+                            <h3 class="font-bold text-lg">Health Potion</h3>
+                            <p class="text-sm text-gray-300 mb-2">Heal 30 HP during battle</p>
+                            <div class="flex justify-between items-center">
+                                <span class="font-bold text-yellow-400">50 Coins</span>
+                                <button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-sm">
+                                    Buy
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="shop-item bg-gray-700 rounded-lg p-4 cursor-pointer transition-transform border border-transparent hover:border-blue-500">
+                    <div class="flex items-start">
+                        <img src="https://cdn-icons-png.flaticon.com/512/3829/3829110.png" class="w-12 h-12 mr-4" alt="Shield">
+                        <div>
+                            <h3 class="font-bold text-lg">Magic Shield</h3>
+                            <p class="text-sm text-gray-300 mb-2">Block lasts 1 second longer</p>
+                            <div class="flex justify-between items-center">
+                                <span class="font-bold text-yellow-400">120 Coins</span>
+                                <button class="bg-blue-600 hover:bg-blue-700 text-white px 3 py-1 rounded text-sm">
+                                    Buy
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="flex justify-between">
+                <button id="back-to-game-btn" class="bg-gray-700 hover:bg-gray-600 text-white px-6 py-2 rounded-lg flex items-center">
+                    <i class="fas fa-arrow-left mr-2"></i> Back to Battle
+                </button>
+                <button id="open-crates-btn" class="bg-gradient-to-r from-purple-600 to-pink-500 hover:from-purple-700 hover:to-pink-600 text-white px-6 py-2 rounded-lg flex items-center font-bold">
+                    <i class="fas fa-cubes mr-2"></i> Open Crates (50 Coins)
+                </button>
+            </div>
+        </div>
+    </div>
+    <!-- Game Over Modal -->
+    <div id="game-over-modal" class="modal hidden fixed inset-0 flex items-center justify-center z-50">
+        <div class="bg-gray-800 rounded-lg p-8 w-full max-w-md border-4 border-red-500 animate-pulse">
+            <h2 class="text-3xl font-bold text-center mb-2 text-red-400">GAME OVER</h2>
+            <p id="game-over-text" class="text-center mb-6"></p>
+            <div class="grid grid-cols-2 gap-4">
+                <button id="retry-btn" class="bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded-lg transition">
+                    Fight Again
+                </button>
+                <button id="lobby-btn-2" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition">
+                    Back to Lobby
+                </button>
+            </div>
+        </div>
+    </div>
+    <!-- Victory Modal -->
+    <div id="victory-modal" class="modal hidden fixed inset-0 flex items-center justify-center z-50 bg-black bg-opacity-70">
+        <div class="bg-gray-800 rounded-lg p-8 w-full max-w-md border-4 border-yellow-400 animate-pulse">
+            <h2 class="text-3xl font-bold text-center mb-2 text-yellow-300">VICTORY!</h2>
+            <div class="text-center mb-6">
+                <img src="https://cdn-icons-png.flaticon.com/512/3829/3829110.png" alt="Victory" class="h-20 mx-auto mb-4">
+                <p id="earned-coins" class="text-xl text-yellow-400 mb-1"></p>
+                <p id="victory-text" class="text-sm text-gray-300"></p>
+            </div>
+            <div class="grid grid-cols-2 gap-4">
+                <button id="next-fight-btn" class="bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded-lg transition">
+                    Next Battle
+                </button>
+                <button id="lobby-btn-3" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition">
+                    Back to Lobby
+                </button>
+            </div>
+        </div>
+    </div>
+    <!-- Crate Opening Modal -->
+    <div id="crate-modal" class="modal hidden fixed inset-0 flex items-center justify-center z-50 bg-black bg-opacity-80">
+        <div class="bg-gray-800 rounded-lg p-6 w-full max-w-sm border-2 border-yellow-400">
+            <div class="flex justify-between items-center mb-4">
+                <h3 class="text-xl font-bold text-yellow-300">CRATE REWARD</h3>
+                <button id="close-crate-btn" class="text-gray-400 hover:text-white">&times;</button>
+            </div>
+            <div class="text-center">
+                <img src="https://cdn-icons-png.flaticon.com/512/3829/3829110.png" alt="Crate" class="h-24 mx-auto mb-4 animate-bounce">
+                <p id="crate-reward-text" class="text-lg mb-4">You received: <span class="text-yellow-400 font-bold">50 Coins</span></p>
+                <button id="open-another-crate-btn" class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-2 rounded-lg font-bold">
+                    Open Another (50 Coins)
+                </button>
+            </div>
+        </div>
+    </div>
+    <script>
+        // DOM Elements
+        const loginScreen = document.getElementById('login-screen');
+        const lobbyScreen = document.getElementById('lobby-screen');
+        const gameScreen = document.getElementById('game-screen');
+        const shopScreen = document.getElementById('shop-screen');
+        const playerNameInput = document.getElementById('player-name');
+        const playerPasswordInput = document.getElementById('player-password');
+        const togglePassword = document.getElementById('toggle-password');
+        const loginSubmitBtn = document.getElementById('login-submit');
+        const playerDisplayName = document.getElementById('player-display-name');
+        const gamePlayerDisplayName = document.getElementById('game-player-display-name');
+        const characterMenuButton = document.getElementById('character-menu-button');
+        const characterDropdown = document.getElementById('character-dropdown');
+        const selectedCharacterImg = document.getElementById('selected-character-img');
+        const coinCount = document.getElementById('coin-count');
+        const shopCoinCount = document.getElementById('shop-coin-count');
+        const lobbyBtn = document.getElementById('lobby-btn');
+        const lobbyBtn2 = document.getElementById('lobby-btn-2');
+        const lobbyBtn3 = document.getElementById('lobby-btn-3');
+        const logoutBtn = document.getElementById('logout-btn');
+        const shopBtn = document.getElementById('shop-btn');
+        const backToGameBtn = document.getElementById('back-to-game-btn');
+        // Game state
+        const gameData = {
+            playerName: '',
+            character: 'knight',
+            coins: 100,
+            difficulty: 'medium',
+            playerHealth: 200,
+            enemyHealth: 100,
+            enemyName: 'Goblin',
+            enemyHealthMax: 100,
+            playerHealthMax: 200,
+            cooldowns: {
+                punch: 0,
+                block: 0,
+                special: 0
+            },
+            gameActive: false,
+            blockActive: false,
+            divineAngelAvailable: true,
+            rageModeAvailable: true
+        };
+        // Initialize game
+        function initGame() {
+            // Add event listeners
+            loginSubmitBtn.addEventListener('click', handleLogin);
+            togglePassword.addEventListener('click', togglePasswordVisibility);
+            characterMenuButton.addEventListener('click', toggleCharacterDropdown);
+            lobbyBtn.addEventListener('click', goToLobby);
+            lobbyBtn2.addEventListener('click', goToLobby);
+            lobbyBtn3.addEventListener('click', goToLobby);
+            logoutBtn.addEventListener('click', logout);
+            shopBtn.addEventListener('click', openShop);
+            backToGameBtn.addEventListener('click', closeShop);
+            document.addEventListener('click', (e) => {
+                if (!characterMenuButton.contains(e.target) && !characterDropdown.contains(e.target)) {
+                    characterDropdown.classList.add('hidden');
+                }
+            });
+            // Set initial UI states
+            updateCoinDisplay();
+        }
+        // Toggle password visibility
+        function togglePasswordVisibility() {
+            const type = playerPasswordInput.getAttribute('type') === 'password' ? 'text' : 'password';
+            playerPasswordInput.setAttribute('type', type);
+            togglePassword.classList.toggle('fa-eye-slash');
+            togglePassword.classList.toggle('fa-eye');
+        }
+        // Handle login
+        function handleLogin() {
+            const name = playerNameInput.value.trim();
+            const password = playerPasswordInput.value.trim();
+            if (!name) {
+                alert('Please enter your name');
+                return;
+            }
+            if (name.length < 2 || name.length > 30) {
+                alert('Name must be between 2 and 30 characters');
+                return;
+            }
+            if (!password) {
+                alert('Please enter a password');
+                return;
+            }
+            // Save player data
+            gameData.playerName = name;
+            playerDisplayName.textContent = name;
+            gamePlayerDisplayName.textContent = name;
+            // Switch to lobby
+            loginScreen.classList.add('hidden');
+            lobbyScreen.classList.remove('hidden');
+            // Reset character selection
+            selectCharacter('knight');
+        }
+        // Toggle character dropdown
+        function toggleCharacterDropdown() {
+            characterDropdown.classList.toggle('hidden');
+        }
+        // Select character
+        function selectCharacter(character) {
+            gameData.character = character;
+            // Update selected character image
+            let characterImg = '';
+            switch(character) {
+                case 'knight':
+                    characterImg = 'https://cdn-icons-png.flaticon.com/512/3829/3829110.png';
+                    break;
+                case 'wizard':
+                    characterImg = 'https://cdn-icons-png.flaticon.com/512/3829/3829149.png';
+                    break;
+                case 'archer':
+                    characterImg = 'https://cdn-icons-png.flaticon.com/512/3829/3829166.png';
+                    break;
+                case 'ninja':
+                    characterImg = 'https://cdn-icons-png.flaticon.com/512/3829/3829114.png';
+                    break;
+                default:
+                    characterImg = 'https://cdn-icons-png.flaticon.com/512/3829/3829110.png';
+            }
+            selectedCharacterImg.src = characterImg;
+            // Update checkmarks
+            document.getElementById('knight-selected').classList.add('hidden');
+            document.getElementById('wizard-selected').classList.add('hidden');
+            document.getElementById('archer-selected').classList.add('hidden');
+            document.getElementById('ninja-selected').classList.add('hidden');
+            document.getElementById(`${character}-selected`).classList.remove('hidden');
+            // Close dropdown
+            characterDropdown.classList.add('hidden');
+        }
+        // Start game with selected difficulty
+        function startGame(difficulty) {
+            gameData.difficulty = difficulty;
+            gameData.enemyName = getRandomEnemyName(difficulty);
+            // Set health based on difficulty
+            switch(difficulty) {
+                case 'easy':
+                    gameData.playerHealth = 200;
+                    gameData.playerHealthMax = 200;
+                    gameData.enemyHealth = 100;
+                    gameData.enemyHealthMax = 100;
+                    document.getElementById('current-difficulty').textContent = 'Beginner';
+                    break;
+                case 'medium':
+                    gameData.playerHealth = 200;
+                    gameData.playerHealthMax = 200;
+                    gameData.enemyHealth = 150;
+                    gameData.enemyHealthMax = 150;
+                    document.getElementById('current-difficulty').textContent = 'Warrior';
+                    break;
+                case 'hard':
+                    gameData.playerHealth = 200;
+                    gameData.playerHealthMax = 200;
+                    gameData.enemyHealth = 200;
+                    gameData.enemyHealthMax = 200;
+                    document.getElementById('current-difficulty').textContent = 'Nightmare';
+                    break;
+                case 'chaos':
+                    gameData.playerHealth = 200;
+                    gameData.playerHealthMax = 200;
+                    gameData.enemyHealth = 250;
+                    gameData.enemyHealthMax = 250;
+                    document.getElementById('current-difficulty').textContent = 'Chaos';
+                    break;
+            }
+            // Reset cooldowns
+            gameData.cooldowns.punch = 0;
+            gameData.cooldowns.block = 0;
+            gameData.cooldowns.special = 0;
+            gameData.gameActive = true;
+            gameData.blockActive = false;
+            gameData.divineAngelAvailable = true;
+            gameData.rageModeAvailable = true;
+            // Update UI
+            document.getElementById('enemy-name').textContent = gameData.enemyName;
+            updateHealthBars();
+            document.getElementById('battle-log').innerHTML = '<div class="text-center text-gray-400">Battle against ' + gameData.enemyName + ' begins!</div>';
+            // Hide special buttons
+            document.getElementById('divine-btn').classList.add('hidden');
+            document.getElementById('rage-btn').classList.add('hidden');
+            // Switch to game screen
+            lobbyScreen.classList.add('hidden');
+            gameScreen.classList.remove('hidden');
+        }
+        // Update coin display
+        function updateCoinDisplay() {
+            coinCount.textContent = gameData.coins;
+            shopCoinCount.textContent = gameData.coins;
+        }
+        // Go to lobby
+        function goToLobby() {
+            // Close all game screens
+            gameScreen.classList.add('hidden');
+            shopScreen.classList.add('hidden');
+            document.getElementById('game-over-modal').classList.add('hidden');
+            document.getElementById('victory-modal').classList.add('hidden');
+            // Show lobby
+            lobbyScreen.classList.remove('hidden');
+        }
+        // Open shop
+        function openShop() {
+            gameScreen.classList.add('hidden');
+            shopScreen.classList.remove('hidden');
+        }
+        // Close shop
+        function closeShop() {
+            shopScreen.classList.add('hidden');
+            gameScreen.classList.remove('hidden');
+        }
+        // Logout
+        function logout() {
+            lobbyScreen.classList.add('hidden');
+            loginScreen.classList.remove('hidden');
+        }
+        // Get random enemy name
+        function getRandomEnemyName(difficulty) {
+            const names = {
+                easy: ['Goblin', 'Slime', 'Rat', 'Bandit', 'Bat'],
+                medium: ['Orc', 'Troll', 'Bandit Leader', 'Skeleton', 'Zombie'],
+                hard: ['Dragon', 'Demon', 'Lich', 'Dark Knight', 'Warlock'],
+                chaos: ['Chaos Beast', 'Doombringer', 'Abomination', 'Obliterator', 'Annihilator']
+            };
+            const pool = names[difficulty] || names.medium;
+            return pool[Math.floor(Math.random() * pool.length)];
+        }
+        // Update health bars
+        function updateHealthBars() {
+            const playerHealthPercent = (gameData.playerHealth / gameData.playerHealthMax) * 100;
+            const enemyHealthPercent = (gameData.enemyHealth / gameData.enemyHealthMax) * 100;
+            document.getElementById('player-health').style.width = playerHealthPercent + '%';
+            document.getElementById('enemy-health').style.width = enemyHealthPercent + '%';
+            document.getElementById('player-health-text').textContent = gameData.playerHealth + '/' + gameData.playerHealthMax;
+            document.getElementById('enemy-health-text').textContent = gameData.enemyHealth + '/' + gameData.enemyHealthMax;
+        }
+        // Initialize the game
+        initGame();
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=bangis/myyyy" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1,23 @@

+make a spawn which u can pick levels every level get harder
+change the name to fight showdowns and there is no targets this game about fighting me vs bot we have 200 health but leave thr enter ur name its a great idea
+make a password too and make sign in and log in button right top
+when u enter the name other people cannot use the same name and letters cap is 2-25 letters
+why i cant get in  a fight me vs bot when i created a account
+make a shop which u can buy crystal chests for 1 win when u beat bot
+make so u cannot spam the abilytis like punch and make a 20 procent chance to get a ability called divine angen which does 40-50 dmg only 1 use and make a my rage mode which does 90-100 dmg its a 1 procent chance to get only 1 use
+do u see what u done fix it
+where is shop and make the coin left top
+where is the lobby which u can choose the level diffucilty
+make a scroll to see the full list how to play
+make a chaos mode
+make the how to play list left top and make u can click the modes and fight
+the punch ability not work plis  fix it and make a charecter selection in lobby top right and make sign in and log in button bottom right
+make when u join u have to enter your name and password than u can fight the bots and make the battle arena middle top
+call it sign in to battle and make there is a button a eye which u can see what u writed in the password
+make the punch do 10-20 damage and make the modes more bottom and make the game name middle top
+make the letter limit 2-30 letters and make the eye middle right not right top
+the eye which shows what u writed not work and i cannot enter the batlle plis fix
+hey can u lower the difficulty modes and delte the knight ,wizard archer but leave the ninja and ninja moves are speed kick doing 15-29 dmg
+ delte the knight ,wizard archer but leave the ninja and ninja moves are speed kick doing 15-29 dmg
+ delte the knight ,wizard archer but leave the ninja and ninja moves are speed kick doing 15-29 dmg
+ delte the knight ,wizard archer but leave the ninja and ninja moves are speed kick doing 15-29 dmg