Spaces:
Running
Running
Upload folder using huggingface_hub
Browse files- index.html +239 -19
index.html
CHANGED
|
@@ -1,19 +1,239 @@
|
|
| 1 |
-
|
| 2 |
-
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
*Thinking...*
|
| 2 |
+
|
| 3 |
+
> **Evaluating mBattle HTML**
|
| 4 |
+
>
|
| 5 |
+
> I'm currently reviewing the provided HTML structure for mBattle. It seems like a fully functional game, which is quite ambitious! My focus now is ensuring the layout is responsive across different screen sizes using modern CSS techniques. I'll also integrate the "Built with anycoder" link.
|
| 6 |
+
>
|
| 7 |
+
>
|
| 8 |
+
> **Considering Code Integration**
|
| 9 |
+
>
|
| 10 |
+
> I've shifted focus to understand how to handle the provided code block. My initial thought was to refactor it, but given its completeness and the instruction to "elaborate," I'll concentrate on integration, ensuring the "Built with anycoder" link is seamlessly included and responsive design is perfect. I will also assess areas for potential visual enhancements to elevate the user experience, but it seems well-crafted already.
|
| 11 |
+
>
|
| 12 |
+
>
|
| 13 |
+
> **Planning Implementation Strategy**
|
| 14 |
+
>
|
| 15 |
+
> I'm now formulating a plan for implementation. The HTML code is extensive, and I will be integrating the "Built with anycoder" link. I'll need to assess the existing Tailwind and custom CSS for responsiveness, refine visual aspects if possible, and ensure a polished user interface. My priority is to preserve the game's core functionality while adding the required link and, if feasible, enhancing the UI/UX. The user's detailed code provides a solid base, and I'll focus on adding value without fundamentally changing its game mechanics.
|
| 16 |
+
>
|
| 17 |
+
>
|
| 18 |
+
> **Formulating the Implementation**
|
| 19 |
+
>
|
| 20 |
+
> I've decided to stick to the original code structure to avoid disrupting the game's functionality. My plan is to include the "Built with anycoder" link in the top bar within a visually consistent manner. The CSS will also be scrutinized for responsiveness. Finally, I will carefully refine visual elements, using the existing Tailwind classes, to enhance the user experience while safeguarding the underlying mechanics of mBattle.
|
| 21 |
+
>
|
| 22 |
+
>
|
| 23 |
+
> **Finalizing the Implementation**
|
| 24 |
+
>
|
| 25 |
+
> I've decided to embed the "Built with anycoder" link. I will add it as an absolute-positioned element at the top, slightly above the main header, for consistent visibility. This approach avoids disrupting the existing layout and keeps the core game logic intact. I have reviewed the CSS and will maintain its existing structure, which seems suitable for responsiveness. My final step is to generate the complete HTML, integrating the link and making minor stylistic adjustments to enhance the presentation of the provided code.
|
| 26 |
+
>
|
| 27 |
+
>
|
| 28 |
+
> **Constructing Final Output**
|
| 29 |
+
>
|
| 30 |
+
> I'm now fully preparing to output the complete HTML application. I'll adhere to the user-provided code, integrating the "Built with anycoder" link at the top, ensuring responsiveness and a polished UI. I will also incorporate minor aesthetic improvements, using the available Tailwind classes, while keeping the original game mechanics intact. I'm ready to generate the final code, ensuring it meets all the stated requirements.
|
| 31 |
+
>
|
| 32 |
+
>
|
| 33 |
+
> **Implementing the HTML Output**
|
| 34 |
+
>
|
| 35 |
+
> I'm now fully committed to delivering the HTML application. After a comprehensive review, I'm integrating the "Built with anycoder" link. This will be an absolute-positioned, unobtrusive element at the top. I'll also ensure code responsiveness and UI polish, as I generate the complete, enhanced HTML application, using the provided code as a base. I will follow the user's HTML and CSS with minor modifications. I'll maintain the game logic, focusing on aesthetic enhancement and compliance.
|
| 36 |
+
>
|
| 37 |
+
>
|
| 38 |
+
> **Creating the Complete Application**
|
| 39 |
+
>
|
| 40 |
+
> I am now ready to begin the final assembly of the HTML application. My goal is to use the user's provided code as the base and ensure proper integration of the "Built with anycoder" link. I will insert the link in a fixed position at the top, and double-check responsiveness and visual elements. The focus is on implementing the requirements while preserving the original game's structure and core features. I have completed the final review of the provided code.
|
| 41 |
+
>
|
| 42 |
+
>
|
| 43 |
+
> **Generating Final Application**
|
| 44 |
+
>
|
| 45 |
+
> I'm now putting everything together: integrating the "Built with anycoder" link into the HTML application. It'll be a fixed, unobtrusive element. I'm taking the existing game code and assembling it, adhering to the prompt, and making sure all required elements are working correctly. My focus is on ensuring the game runs smoothly with the added link. I'll maintain the code as-is but ensure it's functional and polished.
|
| 46 |
+
>
|
| 47 |
+
>
|
| 48 |
+
<!DOCTYPE html>
|
| 49 |
+
<html lang="fr">
|
| 50 |
+
<head>
|
| 51 |
+
<meta charset="UTF-8">
|
| 52 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
| 53 |
+
<title>mBattle v1.0.0.8.6 - Saison 2</title>
|
| 54 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 55 |
+
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@500;700;900&display=swap" rel="stylesheet">
|
| 56 |
+
<style>
|
| 57 |
+
/* --- CORE --- */
|
| 58 |
+
body { margin: 0; overflow: hidden; background-color: #020617; font-family: 'Rajdhani', sans-serif; color: white; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
|
| 59 |
+
canvas { display: block; }
|
| 60 |
+
|
| 61 |
+
/* --- UI & GLASS --- */
|
| 62 |
+
.glass-panel { background: rgba(15, 23, 42, 0.95); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 8px 32px rgba(0,0,0,0.6); border-radius: 24px; }
|
| 63 |
+
.glass-nav { background: rgba(15, 23, 42, 0.98); backdrop-filter: blur(30px); border-top: 1px solid rgba(255,255,255,0.1); }
|
| 64 |
+
.glass-btn { position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%); border: 1px solid rgba(255,255,255,0.15); transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); }
|
| 65 |
+
.glass-btn:active { transform: scale(0.96); filter: brightness(1.2); }
|
| 66 |
+
.glass-btn.selected { background: rgba(59, 130, 246, 0.2); border-color: #3b82f6; box-shadow: 0 0 25px rgba(59, 130, 246, 0.25) inset; }
|
| 67 |
+
|
| 68 |
+
/* SAISON 2 THEME: CYAN/PURPLE */
|
| 69 |
+
.season-gold { border-color: #22d3ee !important; background: linear-gradient(145deg, rgba(34, 211, 238, 0.1), rgba(0,0,0,0.6)) !important; box-shadow: 0 0 15px rgba(34, 211, 238, 0.2) !important; animation: pulse-cyan-border 3s infinite; }
|
| 70 |
+
.season-gold .icon-box { background: rgba(34, 211, 238, 0.2) !important; border: 1px solid rgba(34, 211, 238, 0.4); }
|
| 71 |
+
|
| 72 |
+
.locked { opacity: 0.8; filter: grayscale(0.8); cursor: pointer; position: relative; }
|
| 73 |
+
.locked::after { content: '🔒'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; opacity: 0.5; }
|
| 74 |
+
|
| 75 |
+
.font-tech { font-family: 'Orbitron', sans-serif; letter-spacing: 1px; }
|
| 76 |
+
.currency-badge { background: rgba(0,0,0,0.8); padding: 6px 14px; border-radius: 30px; border: 1px solid rgba(255,255,255,0.15); font-family: 'Orbitron'; font-weight: 700; display: flex; align-items: center; gap: 8px; font-size: 14px; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
|
| 77 |
+
|
| 78 |
+
/* ANIMATION GAIN MONNAIE */
|
| 79 |
+
@keyframes gainFlash { 0% { transform: scale(1.0); opacity: 1; filter: brightness(1); } 50% { transform: scale(1.15); opacity: 1; filter: brightness(1.5); text-shadow: 0 0 10px white; } 100% { transform: scale(1.0); opacity: 1; filter: brightness(1); } }
|
| 80 |
+
.currency-badge.flash-coins { animation: gainFlash 0.3s ease-out; }
|
| 81 |
+
.currency-badge.flash-gems { animation: gainFlash 0.3s ease-out; }
|
| 82 |
+
|
| 83 |
+
/* --- NAV ICONS --- */
|
| 84 |
+
.nav-item { color: #64748b; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
|
| 85 |
+
.nav-item.active { color: #22d3ee; transform: translateY(-4px) scale(1.05); text-shadow: 0 0 15px rgba(34, 211, 238, 0.6); }
|
| 86 |
+
.nav-item.active .icon { transform: scale(1.1); }
|
| 87 |
+
|
| 88 |
+
/* --- VFX --- */
|
| 89 |
+
#vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle, transparent 50%, #000 120%); z-index: 5; }
|
| 90 |
+
#gas-overlay { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle, transparent 30%, rgba(34, 197, 94, 0.4) 80%); z-index: 4; transition: opacity 0.5s; }
|
| 91 |
+
#flash-layer { position: absolute; inset: 0; pointer-events: none; background: #ef4444; opacity: 0; transition: opacity 0.1s; z-index: 6; mix-blend-mode: overlay; }
|
| 92 |
+
|
| 93 |
+
/* --- CONTROLS --- */
|
| 94 |
+
.joystick-zone { position: absolute; width: 140px; height: 140px; pointer-events: auto; z-index: 50; opacity: 0; transition: opacity 0.2s; }
|
| 95 |
+
.joystick-zone.active { opacity: 1; }
|
| 96 |
+
.stick-base { width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(0,0,0,0.3) 70%); border: 2px solid rgba(255,255,255,0.1); position: absolute; bottom: 50px; pointer-events: auto; display: block !important; transition: border-color 0.2s; }
|
| 97 |
+
.stick-base.active { border-color: rgba(34, 211, 238, 0.5); background: radial-gradient(circle, rgba(34, 211, 238, 0.15) 0%, rgba(0,0,0,0.4) 70%); }
|
| 98 |
+
#stick-left-base { left: 40px; }
|
| 99 |
+
#stick-right-base { right: 40px; }
|
| 100 |
+
.stick-knob { width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,0.9); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 20px rgba(255,255,255,0.3); transition: transform 0.05s linear; }
|
| 101 |
+
.action-btn { position: absolute; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 60; pointer-events: auto; box-shadow: 0 4px 15px rgba(0,0,0,0.5); transition: transform 0.1s; }
|
| 102 |
+
.action-btn:active { transform: scale(0.9); }
|
| 103 |
+
|
| 104 |
+
/* --- ANIM --- */
|
| 105 |
+
.kill-msg { font-size: 12px; font-weight: 800; text-shadow: 0 2px 4px black; animation: slideIn 0.3s ease-out; margin-bottom: 6px; background: linear-gradient(90deg, rgba(0,0,0,0.9) 0%, transparent 100%); padding: 6px 12px; border-left: 4px solid #3b82f6; border-radius: 0 4px 4px 0; }
|
| 106 |
+
.kill-msg.red { border-color: #ef4444; }
|
| 107 |
+
@keyframes slideIn { from { opacity:0; transform:translateX(-30px); } to { opacity:1; transform:translateX(0); } }
|
| 108 |
+
.menu-anim { background: radial-gradient(circle at center, #0f172a 0%, #020617 100%); }
|
| 109 |
+
.safe-pb { padding-bottom: max(90px, env(safe-area-inset-bottom) + 90px); }
|
| 110 |
+
.hide-scrollbar::-webkit-scrollbar { display: none; }
|
| 111 |
+
|
| 112 |
+
/* --- PASS --- */
|
| 113 |
+
.pass-track-container { overflow-x: auto; padding: 30px 20px; scroll-behavior: smooth; position: relative; white-space: nowrap; -webkit-overflow-scrolling: touch; width: 100%; }
|
| 114 |
+
.pass-wrapper { display: inline-block; min-width: 100%; position: relative; }
|
| 115 |
+
.pass-row { display: flex; gap: 40px; align-items: center; margin-bottom: 40px; position: relative; padding-left: 20px; padding-right: 20px; z-index: 10; }
|
| 116 |
+
.pass-step { min-width: 110px; height: 130px; background: rgba(30, 41, 59, 0.8); border: 1px solid rgba(255,255,255,0.15); border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 10; transition: all 0.3s; box-shadow: 0 10px 25px rgba(0,0,0,0.3); white-space: normal; text-align: center; overflow: hidden; }
|
| 117 |
+
.pass-step.pro { background: linear-gradient(145deg, rgba(88, 28, 135, 0.6), rgba(15, 23, 42, 0.95)); border-color: rgba(168, 85, 247, 0.5); }
|
| 118 |
+
.pass-step.claimed { border-color: #22c55e !important; background: rgba(20, 83, 45, 0.6) !important; transform: scale(0.95); }
|
| 119 |
+
.check-mark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 40px; color: #22c55e; text-shadow: 0 0 10px rgba(0,0,0,0.8); z-index: 20; animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
|
| 120 |
+
@keyframes popIn { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
|
| 121 |
+
.pass-step.active { transform: scale(1.15); z-index: 20; border-color: white; box-shadow: 0 0 20px rgba(255,255,255,0.3); }
|
| 122 |
+
|
| 123 |
+
/* EMOTES */
|
| 124 |
+
.emote-wheel { position: absolute; bottom: 120px; right: 20px; display: flex; flex-wrap: wrap; width: 160px; gap: 10px; z-index: 70; pointer-events: auto; }
|
| 125 |
+
.emote-btn { width: 60px; height: 60px; background: rgba(0,0,0,0.8); border-radius: 50%; border: 2px solid white; font-size: 24px; display: flex; align-items: center; justify-content: center; transition: transform 0.1s; cursor: pointer; }
|
| 126 |
+
.emote-grid-item { aspect-ratio: 1; background: rgba(255,255,255,0.05); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 32px; border: 2px solid transparent; cursor: pointer; transition: all 0.2s; position: relative; }
|
| 127 |
+
.emote-grid-item.selected { border-color: #22d3ee; background: rgba(34, 211, 238, 0.1); }
|
| 128 |
+
.emote-remove-btn { position: absolute; top: -5px; right: -5px; background: #ef4444; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer; border: 2px solid #0f172a; }
|
| 129 |
+
|
| 130 |
+
/* MODIFIERS & DIFF BTNS */
|
| 131 |
+
.diff-btn.active { background: linear-gradient(45deg, var(--tw-gradient-stops)) !important; border-color: rgba(255,255,255,0.5) !important; box-shadow: 0 0 15px var(--tw-shadow-color) !important; }
|
| 132 |
+
.mod-btn.active { background: #22d3ee !important; border-color: white !important; color: white !important; box-shadow: 0 0 15px #22d3ee !important; }
|
| 133 |
+
|
| 134 |
+
.rarity-badge { position: absolute; top: 4px; right: 4px; padding: 2px 6px; border-radius: 6px; font-size: 8px; font-weight: 900; text-transform: uppercase; z-index: 10; border: 1px solid rgba(255,255,255,0.2); }
|
| 135 |
+
|
| 136 |
+
/* Profile Avatar Image */
|
| 137 |
+
.avatar-img { width: 100%; height: 100%; object-fit: cover; }
|
| 138 |
+
</style>
|
| 139 |
+
</head>
|
| 140 |
+
<body>
|
| 141 |
+
<a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" style="position: fixed; top: 10px; left: 50%; transform: translateX(-50%); font-size: 10px; color: rgba(255,255,255,0.5); text-decoration: none; z-index: 9999; font-family: 'Orbitron', sans-serif; background: rgba(0,0,0,0.4); padding: 4px 10px; border-radius: 12px; backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.1); transition: all 0.2s;">Built with anycoder</a>
|
| 142 |
+
|
| 143 |
+
<canvas id="gameCanvas"></canvas>
|
| 144 |
+
<div id="gas-overlay"></div>
|
| 145 |
+
<div id="vignette"></div>
|
| 146 |
+
<div id="flash-layer"></div>
|
| 147 |
+
<div id="season-particles" class="absolute inset-0 pointer-events-none overflow-hidden z-0"></div>
|
| 148 |
+
<div id="ui-layer" class="absolute inset-0 pointer-events-none overflow-hidden z-10">
|
| 149 |
+
<div id="hud" class="hidden w-full h-full relative">
|
| 150 |
+
<div class="absolute top-4 left-4 flex flex-col gap-4 pointer-events-auto">
|
| 151 |
+
<div class="glass-panel p-2 flex items-center gap-3 pr-4 scale-90 origin-top-left md:scale-100">
|
| 152 |
+
<div class="relative">
|
| 153 |
+
<div class="w-14 h-14 rounded-xl bg-gray-900 border border-white/20 flex items-center justify-center text-2xl shadow-lg overflow-hidden">
|
| 154 |
+
<span id="hud-icon" class="z-10 relative">🤖</span>
|
| 155 |
+
<div class="absolute inset-0 bg-gradient-to-br from-blue-600/40 to-transparent"></div>
|
| 156 |
+
</div>
|
| 157 |
+
<div class="absolute -bottom-2 -right-1 bg-black border border-gray-600 text-[9px] px-1.5 py-0.5 rounded text-yellow-400 font-bold" id="hud-lvl">LVL 1</div>
|
| 158 |
+
</div>
|
| 159 |
+
<div class="flex flex-col w-28 gap-1">
|
| 160 |
+
<div class="h-2.5 bg-gray-800 rounded-full overflow-hidden border border-gray-600 relative"><div id="hud-hp-bar" class="h-full bg-green-500" style="width: 100%;"></div></div>
|
| 161 |
+
<div class="flex gap-1 h-1 mt-0.5">
|
| 162 |
+
<div id="ammo-1" class="flex-1 bg-orange-500 rounded-full opacity-50 transition"></div>
|
| 163 |
+
<div id="ammo-2" class="flex-1 bg-orange-500 rounded-full opacity-50 transition"></div>
|
| 164 |
+
<div id="ammo-3" class="flex-1 bg-orange-500 rounded-full opacity-50 transition"></div>
|
| 165 |
+
</div>
|
| 166 |
+
</div>
|
| 167 |
+
</div>
|
| 168 |
+
<div class="glass-panel p-1 border-white/20 bg-black/50"><canvas id="minimap" width="100" height="100" class="rounded-lg bg-black/80 opacity-90"></canvas></div>
|
| 169 |
+
</div>
|
| 170 |
+
<div class="absolute top-6 left-1/2 -translate-x-1/2 text-center pointer-events-auto mt-4">
|
| 171 |
+
<div id="hud-score" class="font-tech text-5xl font-bold text-white leading-none drop-shadow-[0_0_15px_rgba(255,255,255,0.4)]">0</div>
|
| 172 |
+
<div class="text-[10px] font-bold text-blue-400 bg-black/50 px-2 rounded mt-1" id="hud-sub">VAGUE 1</div>
|
| 173 |
+
<div id="hud-timer" class="text-xl font-black text-yellow-400 drop-shadow-lg mt-1 hidden">03:00</div>
|
| 174 |
+
<div id="hud-objective" class="text-xs font-bold text-yellow-300 mt-1 hidden">Objectif</div>
|
| 175 |
+
</div>
|
| 176 |
+
<div class="absolute top-4 right-4 flex flex-col gap-4 pointer-events-auto items-end">
|
| 177 |
+
<button onclick="window.game.togglePause()" class="glass-panel w-10 h-10 flex items-center justify-center hover:bg-white/10 text-lg transition active:scale-90">⏸</button>
|
| 178 |
+
</div>
|
| 179 |
+
<div id="boss-ui" class="hidden absolute top-24 left-1/2 -translate-x-1/2 w-3/4 max-w-lg pointer-events-auto transition-all duration-500">
|
| 180 |
+
<div class="flex justify-between text-[10px] text-red-400 font-bold mb-1 uppercase tracking-widest"><span id="boss-name">BOSS</span><span id="boss-pct">100%</span></div>
|
| 181 |
+
<div class="h-4 bg-red-950/80 border border-red-500/50 rounded-full overflow-hidden shadow-[0_0_20px_rgba(220,38,38,0.4)]"><div id="boss-bar" class="h-full bg-gradient-to-r from-red-600 to-red-500 w-full transition-all duration-200"></div></div>
|
| 182 |
+
</div>
|
| 183 |
+
<div id="kill-feed" class="absolute top-32 left-4 flex flex-col gap-2 w-48 pointer-events-none"></div>
|
| 184 |
+
<div id="notif-area" class="absolute top-48 left-1/2 -translate-x-1/2 pointer-events-none flex flex-col items-center gap-2 w-full z-30"></div>
|
| 185 |
+
<button id="btn-emote" class="absolute top-32 right-4 w-10 h-10 rounded-full glass-panel flex items-center justify-center text-xl pointer-events-auto active:scale-90 transition z-50" onmousedown="window.ui.toggleEmoteWheel()" ontouchstart="event.stopPropagation(); window.ui.toggleEmoteWheel()">😀</button>
|
| 186 |
+
<div id="emote-wheel" class="emote-wheel hidden"></div>
|
| 187 |
+
<div id="mobile-controls" class="hidden absolute inset-0 z-40">
|
| 188 |
+
<div id="stick-left-base" class="stick-base" style="left: 40px; bottom: 40px;"><div class="stick-knob"></div></div>
|
| 189 |
+
<div id="stick-right-base" class="stick-base" style="right: 40px; bottom: 40px;"><div class="stick-knob"></div></div>
|
| 190 |
+
<button id="btn-gadget" class="action-btn bottom-36 right-12 w-16 h-16 bg-green-900/90 border-2 border-green-500 active:scale-90 flex items-center justify-center pointer-events-auto transition shadow-lg" ontouchstart="event.stopPropagation(); window.game.player?.useGadget()" onmousedown="window.game.player?.useGadget()"><span class="font-tech font-bold text-[10px] z-10">GADGET</span><div class="absolute -top-1 -right-1 bg-black border border-white text-[9px] w-5 h-5 rounded-full flex items-center justify-center" id="gadget-count">3</div></button>
|
| 191 |
+
<button id="btn-dash" class="action-btn bottom-12 right-36 w-20 h-20 rounded-full glass-panel border border-white/40 active:scale-90 flex items-center justify-center pointer-events-auto transition shadow-lg bg-blue-900/30" ontouchstart="event.stopPropagation(); window.game.player?.dash()" onmousedown="window.game.player?.dash()"><span class="text-3xl">⚡</span><div id="dash-cd" class="absolute inset-0 bg-black/70 origin-bottom h-0 transition-all duration-75 rounded-full"></div></button>
|
| 192 |
+
</div>
|
| 193 |
+
</div>
|
| 194 |
+
|
| 195 |
+
<div id="menu-screen" class="absolute inset-0 menu-anim pointer-events-auto z-50 flex flex-col">
|
| 196 |
+
<div class="w-full h-16 flex items-center justify-between px-5 pt-safe z-30 bg-gradient-to-b from-black/80 to-transparent mt-6">
|
| 197 |
+
<div class="flex items-center gap-3">
|
| 198 |
+
<div class="w-10 h-10 rounded-lg bg-cyan-500/20 border border-cyan-400/30 flex items-center justify-center text-xl text-cyan-400">🌀</div>
|
| 199 |
+
<div><div class="font-tech font-bold leading-none text-lg">mBATTLE</div><div class="text-[10px] text-cyan-400 font-bold tracking-widest">v1.0.0.8.6</div></div>
|
| 200 |
+
</div>
|
| 201 |
+
<div class="flex gap-3">
|
| 202 |
+
<div class="currency-badge"><span class="text-yellow-400">🪙</span> <span id="top-coins">0</span></div>
|
| 203 |
+
<div class="currency-badge"><span class="text-purple-400">💎</span> <span id="top-gems">0</span></div>
|
| 204 |
+
</div>
|
| 205 |
+
</div>
|
| 206 |
+
<div class="flex-1 overflow-y-auto safe-pb p-5 hide-scrollbar relative">
|
| 207 |
+
<div id="tab-play" class="tab-content flex flex-col items-center justify-center min-h-[65vh] gap-6 animate-fadeIn">
|
| 208 |
+
<div class="w-full max-w-md glass-panel p-5 border-l-4 border-cyan-500 bg-cyan-900/10 relative overflow-hidden">
|
| 209 |
+
<div class="flex items-center justify-between mb-2 relative z-10">
|
| 210 |
+
<div><div class="text-[10px] text-gray-400 uppercase font-bold">Rang Actuel</div><div class="text-2xl font-black italic text-transparent bg-clip-text bg-gradient-to-r from-cyan-200 to-cyan-500 font-tech" id="menu-rank">BRONZE I</div></div>
|
| 211 |
+
<div class="text-center"><div class="text-2xl">🏆</div><div class="font-bold text-white text-xl" id="menu-trophies">0</div></div>
|
| 212 |
+
</div>
|
| 213 |
+
<div class="flex justify-between text-[10px] font-bold text-gray-300 mt-1 relative z-10">
|
| 214 |
+
<span id="rank-progress-text">Encore 100 🏆 avant BRONZE II</span><span id="rank-progress-pct">0%</span>
|
| 215 |
+
</div>
|
| 216 |
+
<div class="rank-progress-bg relative z-10"><div id="rank-progress-fill" class="rank-progress-fill bg-cyan-500"></div></div>
|
| 217 |
+
</div>
|
| 218 |
+
<div class="grid grid-cols-2 gap-4 w-full max-w-md">
|
| 219 |
+
<div onclick="window.ui.showTab('starters')" class="glass-panel p-4 flex flex-col items-center justify-center aspect-square active:scale-95 transition bg-blue-900/10 border-blue-500/30">
|
| 220 |
+
<div class="text-[10px] text-blue-300 font-bold mb-2 uppercase">Héros</div><div class="text-5xl mb-2 drop-shadow-xl" id="play-icon">🎯</div><div class="font-black text-lg leading-none" id="play-starter">Soldier</div>
|
| 221 |
+
</div>
|
| 222 |
+
<div onclick="window.ui.showTab('modes')" class="glass-panel p-4 flex flex-col items-center justify-center aspect-square active:scale-95 transition bg-purple-900/10 border-purple-500/30">
|
| 223 |
+
<div class="text-[10px] text-purple-300 font-bold mb-2 uppercase">Mission</div><div class="text-5xl mb-2 drop-shadow-xl" id="play-mode-icon">🔥</div><div class="font-black text-lg leading-none" id="play-mode">Survie</div>
|
| 224 |
+
</div>
|
| 225 |
+
</div>
|
| 226 |
+
<div class="w-full max-w-md glass-panel p-4 flex flex-col items-center mt-4">
|
| 227 |
+
<div class="text-[10px] text-yellow-300 font-bold mb-3 uppercase tracking-widest">DIFFICULTÉ</div>
|
| 228 |
+
<div class="flex gap-3 w-full">
|
| 229 |
+
<button id="diff-easy" onclick="window.game.setDifficulty('easy')" style="--tw-shadow-color:#22c55e;" class="diff-btn flex-1 glass-btn py-3 rounded-xl font-bold text-sm bg-gradient-to-r from-green-600/30 to-green-900/30 border-green-600/50 text-green-400 active:scale-95 transition">Facile</button>
|
| 230 |
+
<button id="diff-normal" onclick="window.game.setDifficulty('normal')" style="--tw-shadow-color:#3b82f6;" class="diff-btn flex-1 glass-btn py-3 rounded-xl font-bold text-sm bg-gradient-to-r from-blue-600/30 to-blue-900/30 border-blue-600/50 text-blue-400 active:scale-95 transition">Normal</button>
|
| 231 |
+
<button id="diff-hard" onclick="window.game.setDifficulty('hard')" style="--tw-shadow-color:#ef4444;" class="diff-btn flex-1 glass-btn py-3 rounded-xl font-bold text-sm bg-gradient-to-r from-red-600/30 to-red-900/30 border-red-600/50 text-red-400 active:scale-95 transition">Difficile</button>
|
| 232 |
+
</div>
|
| 233 |
+
<div class="text-[10px] text-purple-300 font-bold mb-2 uppercase tracking-widest mt-4">MODIFICATEURS</div>
|
| 234 |
+
<div class="grid grid-cols-3 gap-2 w-full">
|
| 235 |
+
<button onclick="window.game.setModifier('normal')" id="mod-normal" class="mod-btn glass-btn py-2 rounded-lg font-bold text-[10px] text-gray-300">Classique</button>
|
| 236 |
+
<button onclick="window.game.setModifier('oneshot')" id="mod-oneshot" class="mod-btn glass-btn py-2 rounded-lg font-bold text-[10px] text-red-400">☠️ One Shot</button>
|
| 237 |
+
<button onclick="window.game.setModifier('poison')" id="mod-poison" class="mod-btn glass-btn py-2 rounded-lg font-bold text-[10px] text-green-400">🧪 Poison</button>
|
| 238 |
+
<button onclick="window.game.setModifier('speed')" id="mod-speed" class="mod-btn glass-btn py-2 rounded-lg font-bold text-[10px] text-yellow-400">⚡ Speed</button>
|
| 239 |
+
<button onclick="window.game.setModifier('vampire')" id="mod-vampire" class="mod-btn glass-btn py-2 rounded
|