1043 lines
60 KiB
HTML
1043 lines
60 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de" class="dark">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
||
<title>Mythic Depths — High Fantasy Mystery Dungeon</title>
|
||
|
||
<!-- Tailwind CSS -->
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
|
||
<!-- Google Fonts -->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;800;900&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||
|
||
<style>
|
||
:root {
|
||
--bg-void: #09080e;
|
||
--stone-border: #4a3f66;
|
||
}
|
||
|
||
* {
|
||
-webkit-tap-highlight-color: transparent;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
background-color: var(--bg-void);
|
||
background-image: radial-gradient(circle at 50% 15%, #1f1933 0%, #09080e 75%);
|
||
color: #f1f5f9;
|
||
user-select: none;
|
||
-webkit-user-select: none;
|
||
touch-action: manipulation;
|
||
font-family: 'Inter', sans-serif;
|
||
overflow: hidden;
|
||
height: 100dvh;
|
||
width: 100vw;
|
||
margin: 0;
|
||
}
|
||
|
||
.font-cinzel { font-family: 'Cinzel', serif; }
|
||
|
||
.fantasy-card {
|
||
background: linear-gradient(180deg, rgba(26, 21, 40, 0.97) 0%, rgba(14, 11, 22, 0.99) 100%);
|
||
border: 1px solid var(--stone-border);
|
||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
||
backdrop-filter: blur(14px);
|
||
}
|
||
|
||
.fantasy-btn {
|
||
background: linear-gradient(180deg, #372e50 0%, #201a30 100%);
|
||
border: 1px solid #574877;
|
||
color: #f8fafc;
|
||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12);
|
||
transition: all 0.1s ease;
|
||
}
|
||
.fantasy-btn:hover {
|
||
background: linear-gradient(180deg, #483c69 0%, #2a2240 100%);
|
||
border-color: #816aa8;
|
||
}
|
||
.fantasy-btn:active {
|
||
transform: scale(0.96);
|
||
}
|
||
|
||
.gold-btn {
|
||
background: linear-gradient(180deg, #f59e0b 0%, #b45309 100%);
|
||
border: 1px solid #fcd34d;
|
||
color: #1e1302;
|
||
font-weight: 700;
|
||
box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
|
||
transition: all 0.1s ease;
|
||
}
|
||
.gold-btn:active {
|
||
transform: scale(0.96);
|
||
}
|
||
|
||
.emerald-btn {
|
||
background: linear-gradient(180deg, #10b981 0%, #047857 100%);
|
||
border: 1px solid #6ee7b7;
|
||
color: #022c22;
|
||
font-weight: 700;
|
||
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
|
||
transition: all 0.1s ease;
|
||
}
|
||
.emerald-btn:active {
|
||
transform: scale(0.96);
|
||
}
|
||
|
||
/* Rarity Borders */
|
||
.rarity-common { border-color: #57534e; }
|
||
.rarity-rare { border-color: #38bdf8; box-shadow: inset 0 0 8px rgba(56, 189, 248, 0.16); }
|
||
.rarity-epic { border-color: #c084fc; box-shadow: inset 0 0 10px rgba(192, 132, 252, 0.22); }
|
||
.rarity-legendary { border-color: #fbbf24; box-shadow: inset 0 0 12px rgba(251, 191, 36, 0.28); }
|
||
|
||
.custom-scroll::-webkit-scrollbar { width: 5px; height: 4px; }
|
||
.custom-scroll::-webkit-scrollbar-track { background: rgba(15, 13, 23, 0.5); }
|
||
.custom-scroll::-webkit-scrollbar-thumb { background: #4a3f66; border-radius: 4px; }
|
||
.no-scrollbar::-webkit-scrollbar { display: none; }
|
||
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
||
|
||
#dungeon-canvas {
|
||
display: block;
|
||
touch-action: none;
|
||
}
|
||
|
||
.glass-panel {
|
||
background: rgba(16, 13, 25, 0.92);
|
||
backdrop-filter: blur(8px);
|
||
border-color: rgba(87, 72, 119, 0.45);
|
||
}
|
||
|
||
/* Mobile D-Pad touch buttons */
|
||
.dpad-btn {
|
||
background: rgba(34, 28, 52, 0.88);
|
||
border: 1.5px solid rgba(139, 116, 184, 0.65);
|
||
color: #f8fafc;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.65);
|
||
touch-action: none;
|
||
}
|
||
.dpad-btn:active {
|
||
background: rgba(245, 158, 11, 0.85);
|
||
color: #1c1302;
|
||
transform: scale(0.92);
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body class="flex flex-col h-[100dvh] overflow-hidden">
|
||
|
||
<!-- ================= TOP HEADER: TITLE, MENU BUTTONS & LIVE RESOURCE BAR ================= -->
|
||
<header class="glass-panel z-20 border-b border-stone-800 shrink-0 flex flex-col">
|
||
|
||
<!-- Row 1: Floor Info & Action Menu Buttons -->
|
||
<div class="px-2 sm:px-4 py-1 flex items-center justify-between gap-1">
|
||
<!-- Left: Title & Floor -->
|
||
<div class="flex items-center space-x-1.5 sm:space-x-2.5 min-w-0">
|
||
<span class="text-lg sm:text-xl shrink-0">🏰</span>
|
||
<div class="min-w-0">
|
||
<div class="flex items-center space-x-1.5">
|
||
<span class="font-cinzel font-bold text-xs sm:text-sm text-amber-400 tracking-wider hidden sm:inline">MYTHIC DEPTHS</span>
|
||
<span id="hud-floor-badge" class="px-1.5 py-0.5 rounded bg-amber-950 text-amber-300 font-bold border border-amber-700/60 font-mono text-[10px] sm:text-xs">Ebene 1/10</span>
|
||
<span id="hud-zone-name" class="text-stone-300 text-[11px] sm:text-xs font-medium truncate max-w-[100px] sm:max-w-none">Goblin-Minen</span>
|
||
<span id="hud-save-badge" class="text-[9px] text-emerald-400 font-mono hidden sm:inline opacity-80" title="Spielstand wird automatisch gespeichert">💾 Gespeichert</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Right: Main Menu Controls (Clean, Uncluttered & Expandable) -->
|
||
<div class="flex items-center space-x-1 sm:space-x-1.5 shrink-0">
|
||
<!-- Town / Dungeon Toggle -->
|
||
<button onclick="toggleTownOrDungeon()" id="btn-town-toggle" class="gold-btn px-2 sm:px-2.5 py-1 rounded-lg text-xs font-semibold flex items-center space-x-1" title="Zwischen Stadt Grimhold und Dungeon wechseln">
|
||
<span id="icon-town-toggle">🏘️</span>
|
||
<span id="label-town-toggle" class="hidden sm:inline">Stadt</span>
|
||
</button>
|
||
|
||
<!-- Character & Bag (with level-up / unspent points indicator ⭐) -->
|
||
<button onclick="openInventoryModal()" class="fantasy-btn px-2 sm:px-2.5 py-1 rounded-lg text-xs font-semibold flex items-center space-x-1 relative" title="Charakter & Inventar [I]">
|
||
<span>🎒</span>
|
||
<span class="hidden md:inline">Held</span>
|
||
<span id="hud-bag-count" class="text-[10px] font-mono text-amber-300">1</span>
|
||
<span id="hud-stat-points-alert" class="hidden absolute -top-1 -right-1 px-1 text-[9px] bg-amber-400 text-black font-bold rounded-full animate-pulse" title="Freie Attributspunkte verfügbar!">⭐</span>
|
||
</button>
|
||
|
||
<!-- Desktop Quick Links (Hidden on mobile to keep header clean) -->
|
||
<button onclick="openCraftingModal()" class="fantasy-btn px-2 py-1 rounded-lg text-xs hidden md:inline-flex items-center space-x-1 border-emerald-600/60" title="Handwerk & Alchemie [C]">
|
||
<span>⚒️</span>
|
||
<span class="hidden lg:inline">Handwerk</span>
|
||
</button>
|
||
|
||
<button onclick="openShortcutsModal()" class="fantasy-btn px-2 py-1 rounded-lg text-xs hidden sm:inline-flex items-center" title="Shortcuts & Tasten frei belegen">
|
||
<span>⌨️</span>
|
||
</button>
|
||
|
||
<button onclick="openChatModal()" class="fantasy-btn px-2 py-1 rounded-lg text-xs hidden sm:inline-flex items-center space-x-1 border-cyan-500/50" title="Multiplayer Live-Chat">
|
||
<span>💬</span>
|
||
<span id="online-count-badge" class="px-1 rounded-full bg-cyan-900/90 text-cyan-200 text-[9px] font-mono">1</span>
|
||
</button>
|
||
|
||
<!-- The Universal Expandable Hamburger Menu (One-click access to everything on mobile & desktop!) -->
|
||
<button onclick="openTopMenuModal()" id="btn-hamburger-menu" class="fantasy-btn px-2.5 py-1 rounded-lg text-xs font-bold border-amber-500/60 flex items-center space-x-1.5 hover:border-amber-400" title="Hauptmenü, Laufkreuz & Einstellungen">
|
||
<span class="text-sm">☰</span>
|
||
<span class="text-amber-300 font-cinzel text-xs">Menü</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Row 2: Always-Visible Live Resources & Crafting Materials Strip -->
|
||
<div class="px-2 sm:px-4 py-1 bg-stone-950/90 border-t border-stone-800/80 flex items-center space-x-1.5 sm:space-x-2.5 overflow-x-auto no-scrollbar text-[11px] font-mono">
|
||
<!-- Core Currencies -->
|
||
<div class="flex items-center space-x-1 px-1.5 py-0.5 rounded bg-stone-900 border border-stone-800 shrink-0" title="Goldmünzen">
|
||
<span>💰</span>
|
||
<span class="text-stone-400 hidden sm:inline text-[10px]">Gold:</span>
|
||
<span id="hud-gold" class="font-bold text-amber-300">0</span>
|
||
</div>
|
||
|
||
<div class="flex items-center space-x-1 px-1.5 py-0.5 rounded bg-stone-900 border border-stone-800 shrink-0" title="Pfeile & Munition für Fernkampf">
|
||
<span>🏹</span>
|
||
<span class="text-stone-400 hidden sm:inline text-[10px]">Pfeile:</span>
|
||
<span id="hud-arrows" class="font-bold text-emerald-300">0</span>
|
||
</div>
|
||
|
||
<span class="text-stone-700">|</span>
|
||
|
||
<!-- All 8 Crafting Materials Directly Visible in Header! -->
|
||
<div onclick="openCraftingModal()" class="flex items-center space-x-1 px-1.5 py-0.5 rounded bg-stone-900/80 border border-stone-800/90 shrink-0 cursor-pointer hover:border-stone-600" title="Eisenerz (Klicken für Schmiede)">
|
||
<span>🪨</span>
|
||
<span class="text-stone-400 text-[10px]">Erz:</span>
|
||
<span id="mat-iron_ore" class="font-bold text-stone-200">0</span>
|
||
</div>
|
||
|
||
<div onclick="openCraftingModal()" class="flex items-center space-x-1 px-1.5 py-0.5 rounded bg-stone-900/80 border border-stone-800/90 shrink-0 cursor-pointer hover:border-stone-600" title="Eschenholz (Klicken für Schmiede)">
|
||
<span>🪵</span>
|
||
<span class="text-stone-400 text-[10px]">Holz:</span>
|
||
<span id="mat-wood_branch" class="font-bold text-amber-200">0</span>
|
||
</div>
|
||
|
||
<div onclick="openCraftingModal()" class="flex items-center space-x-1 px-1.5 py-0.5 rounded bg-stone-900/80 border border-stone-800/90 shrink-0 cursor-pointer hover:border-stone-600" title="Blutkraut (Alchemie)">
|
||
<span>🌿</span>
|
||
<span class="text-stone-400 text-[10px]">Kraut:</span>
|
||
<span id="mat-healing_herb" class="font-bold text-emerald-300">0</span>
|
||
</div>
|
||
|
||
<div onclick="openCraftingModal()" class="flex items-center space-x-1 px-1.5 py-0.5 rounded bg-stone-900/80 border border-stone-800/90 shrink-0 cursor-pointer hover:border-stone-600" title="Mana-Splitter">
|
||
<span>💎</span>
|
||
<span class="text-stone-400 text-[10px]">Kristall:</span>
|
||
<span id="mat-mana_shard" class="font-bold text-cyan-300">0</span>
|
||
</div>
|
||
|
||
<div onclick="openCraftingModal()" class="flex items-center space-x-1 px-1.5 py-0.5 rounded bg-stone-900/80 border border-stone-800/90 shrink-0 cursor-pointer hover:border-stone-600" title="Spinnenseide">
|
||
<span>🕸️</span>
|
||
<span class="text-stone-400 text-[10px]">Seide:</span>
|
||
<span id="mat-spider_silk" class="font-bold text-purple-300">0</span>
|
||
</div>
|
||
|
||
<div onclick="openCraftingModal()" class="flex items-center space-x-1 px-1.5 py-0.5 rounded bg-stone-900/80 border border-stone-800/90 shrink-0 cursor-pointer hover:border-stone-600" title="Monsterknochen">
|
||
<span>🦴</span>
|
||
<span class="text-stone-400 text-[10px]">Knochen:</span>
|
||
<span id="mat-monster_bone" class="font-bold text-stone-300">0</span>
|
||
</div>
|
||
|
||
<div onclick="openCraftingModal()" class="flex items-center space-x-1 px-1.5 py-0.5 rounded bg-stone-900/80 border border-stone-800/90 shrink-0 cursor-pointer hover:border-stone-600" title="Feueressenz">
|
||
<span>🔥</span>
|
||
<span class="text-stone-400 text-[10px]">Essenz:</span>
|
||
<span id="mat-fire_essence" class="font-bold text-orange-400">0</span>
|
||
</div>
|
||
|
||
<div onclick="openCraftingModal()" class="flex items-center space-x-1 px-1.5 py-0.5 rounded bg-stone-900/80 border border-stone-800/90 shrink-0 cursor-pointer hover:border-stone-600" title="Mythril-Barren">
|
||
<span>🔷</span>
|
||
<span class="text-stone-400 text-[10px]">Mythril:</span>
|
||
<span id="mat-mythril_ingot" class="font-bold text-sky-400">0</span>
|
||
</div>
|
||
</div>
|
||
|
||
</header>
|
||
|
||
<!-- ================= MAIN CENTERPIECE: CANVAS VIEWPORT ================= -->
|
||
<main class="relative flex-1 min-h-0 w-full overflow-hidden flex items-center justify-center bg-black">
|
||
<!-- Game Canvas -->
|
||
<canvas id="dungeon-canvas" class="w-full h-full cursor-crosshair"></canvas>
|
||
|
||
<!-- Aiming Mode Indicator Banner -->
|
||
<div id="aim-mode-banner" class="hidden absolute top-10 left-1/2 -translate-x-1/2 z-20 bg-emerald-950/95 border border-emerald-400 px-3 py-1.5 rounded-xl text-xs font-semibold text-emerald-200 shadow-xl flex items-center space-x-2 max-w-[95%]">
|
||
<span class="text-base animate-pulse">🎯</span>
|
||
<span id="aim-mode-text" class="truncate">Ziel-Modus: Tippe auf Gegner oder Feuern!</span>
|
||
<button onclick="cycleAimTarget()" class="fantasy-btn px-2 py-0.5 rounded text-[10px] shrink-0">🔄 Ziel</button>
|
||
<button onclick="cancelAimMode()" class="px-2 py-0.5 rounded bg-rose-900 text-rose-200 text-[10px] shrink-0">✕</button>
|
||
</div>
|
||
|
||
<!-- Floor Transition Banner -->
|
||
<div id="floor-transition-banner" class="hidden absolute inset-0 z-30 bg-black/85 flex flex-col items-center justify-center pointer-events-none transition-opacity duration-300">
|
||
<div class="text-4xl sm:text-5xl mb-2 animate-bounce">🏰</div>
|
||
<h2 id="trans-floor-title" class="font-cinzel text-xl sm:text-2xl font-bold text-amber-400 mb-1">Ebene 1: Goblin-Minen</h2>
|
||
<p id="trans-floor-desc" class="text-xs sm:text-sm text-stone-300 italic px-4 text-center">Du steigst mit kaum mehr als deiner Waffe in die Dunkelheit hinab...</p>
|
||
</div>
|
||
|
||
<!-- Live Toast Combat Message Banner -->
|
||
<div id="combat-log-ticker" class="absolute top-2 left-1/2 -translate-x-1/2 z-10 glass-panel px-3 py-1 rounded-full text-[11px] sm:text-xs font-semibold text-stone-200 pointer-events-none max-w-[94%] sm:max-w-lg text-center shadow-lg transition-all opacity-0 border">
|
||
Willkommen in Mythic Depths.
|
||
</div>
|
||
|
||
<!-- Mini-Map Corner Overlay (Toggleable on mobile) -->
|
||
<div id="minimap-container" class="absolute top-2 right-2 z-10 glass-panel p-1 rounded-lg border border-stone-700/60 shadow-xl pointer-events-none opacity-85">
|
||
<canvas id="minimap-canvas" width="116" height="84" class="rounded bg-black/85 w-[88px] h-[64px] sm:w-[132px] sm:h-[94px]"></canvas>
|
||
</div>
|
||
|
||
<!-- ERGONOMIC MOBILE CONTROLS OVERLAY (Shown on touch / mobile screens, toggleable via settings) -->
|
||
<div id="mobile-controls-overlay" class="absolute bottom-2 left-2 z-20 pointer-events-none sm:hidden">
|
||
<!-- Left Thumb: Responsive 3x3 D-Pad (Toggleable in Menu / Settings) -->
|
||
<div id="mobile-dpad-container" class="grid grid-cols-3 gap-1.5 pointer-events-auto p-1.5 rounded-2xl bg-black/50 backdrop-blur-md border border-stone-700/80 shadow-2xl">
|
||
<div></div>
|
||
<button onpointerdown="handleTouchDpad(event, 0, -1)" class="dpad-btn w-12 h-12 rounded-xl flex items-center justify-center text-lg font-bold">▲</button>
|
||
<div></div>
|
||
<button onpointerdown="handleTouchDpad(event, -1, 0)" class="dpad-btn w-12 h-12 rounded-xl flex items-center justify-center text-lg font-bold">◀</button>
|
||
<button onpointerdown="handleTouchWait(event)" class="gold-btn w-12 h-12 rounded-xl flex flex-col items-center justify-center text-xs font-bold leading-none">
|
||
<span>⏳</span>
|
||
<span class="text-[8px] mt-0.5">Rast</span>
|
||
</button>
|
||
<button onpointerdown="handleTouchDpad(event, 1, 0)" class="dpad-btn w-12 h-12 rounded-xl flex items-center justify-center text-lg font-bold">▶</button>
|
||
<div></div>
|
||
<button onpointerdown="handleTouchDpad(event, 0, 1)" class="dpad-btn w-12 h-12 rounded-xl flex items-center justify-center text-lg font-bold">▼</button>
|
||
<div></div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<!-- ================= BOTTOM HUD: VITALITY & 6 EDITABLE QUICKSLOTS ================= -->
|
||
<footer class="glass-panel z-20 px-2 sm:px-4 py-1.5 border-t border-stone-800 shrink-0 flex flex-col items-center">
|
||
|
||
<!-- Health, Mana & XP Row -->
|
||
<div class="w-full max-w-4xl flex items-center justify-between gap-2 sm:gap-4 mb-1.5 text-xs">
|
||
<!-- HP -->
|
||
<div class="flex-1 flex flex-col justify-center">
|
||
<div class="flex justify-between items-center text-[10px] sm:text-xs mb-0.5">
|
||
<span class="font-cinzel font-bold text-rose-400">❤️ Leben</span>
|
||
<span class="font-mono font-bold text-stone-200" id="hud-hp-text">80 / 80</span>
|
||
</div>
|
||
<div class="w-full h-2 sm:h-2.5 bg-stone-900 rounded-full border border-stone-700 overflow-hidden">
|
||
<div id="hud-hp-bar" class="h-full bg-gradient-to-r from-red-700 via-rose-600 to-red-500 rounded-full transition-all duration-150" style="width: 100%"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Mana -->
|
||
<div class="flex-1 flex flex-col justify-center">
|
||
<div class="flex justify-between items-center text-[10px] sm:text-xs mb-0.5">
|
||
<span class="font-cinzel font-bold text-cyan-400">🔮 Mana</span>
|
||
<span class="font-mono font-bold text-stone-200" id="hud-mp-text">25 / 25</span>
|
||
</div>
|
||
<div class="w-full h-2 sm:h-2.5 bg-stone-900 rounded-full border border-stone-700 overflow-hidden">
|
||
<div id="hud-mp-bar" class="h-full bg-gradient-to-r from-blue-700 via-cyan-600 to-cyan-400 rounded-full transition-all duration-150" style="width: 100%"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- XP & Level -->
|
||
<div class="flex-1 flex flex-col justify-center">
|
||
<div class="flex justify-between items-center text-[10px] sm:text-xs mb-0.5">
|
||
<span class="font-cinzel font-bold text-amber-400 truncate">
|
||
<span id="hud-hero-icon">⚔️</span> <span id="hud-hero-class">Klingensänger</span>
|
||
</span>
|
||
<span class="font-mono text-stone-300 text-[10px]" id="hud-xp-text">St. 1</span>
|
||
</div>
|
||
<div class="w-full h-2 sm:h-2.5 bg-stone-900 rounded-full border border-stone-700 overflow-hidden">
|
||
<div id="hud-xp-bar" class="h-full bg-gradient-to-r from-amber-600 to-yellow-400 rounded-full transition-all duration-150" style="width: 0%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Action Bar: Arrow Indicator + 6 Quickslots + Desktop Action Buttons -->
|
||
<div class="w-full max-w-4xl flex items-center justify-between sm:justify-center gap-1 sm:gap-2">
|
||
<!-- Arrows Badge: Visible whether weapon is equipped or laid down! -->
|
||
<div id="hud-bar-weapon-badge" onclick="triggerRangedAttackOrAim()" class="px-2 py-1 rounded-xl bg-stone-900 border border-stone-800 flex items-center space-x-1.5 shrink-0 cursor-pointer hover:border-emerald-500/50" title="Fernkampf / Pfeile (Klicken zum Zielen)">
|
||
<span id="hud-bar-weapon-icon" class="text-sm">🏹</span>
|
||
<div class="leading-none text-left">
|
||
<div class="text-[8px] text-stone-400 font-mono uppercase">Pfeile</div>
|
||
<div id="hud-bar-arrows-val" class="text-xs font-mono font-bold text-emerald-400">0</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="quickslots-bar" class="flex-1 grid grid-cols-6 gap-1 sm:gap-1.5">
|
||
<!-- Populated by renderQuickslotsBar() -->
|
||
</div>
|
||
|
||
<button onclick="triggerRangedAttackOrAim()" class="emerald-btn py-1.5 px-2.5 rounded-xl hidden sm:flex items-center space-x-1" title="Fernkampf / Ziel-Modus">
|
||
<span class="text-sm">🎯</span>
|
||
<div class="text-left leading-tight">
|
||
<div class="text-[9px] font-mono opacity-80" id="keybind-label-ranged">[F]</div>
|
||
<div class="text-[11px] font-cinzel font-bold">Fernkampf</div>
|
||
</div>
|
||
</button>
|
||
|
||
<button onclick="playerWaitTurn()" class="gold-btn py-1.5 px-2.5 rounded-xl hidden sm:flex items-center space-x-1" title="1 Runde rasten / Treppe nutzen">
|
||
<span class="text-sm">⏳</span>
|
||
<div class="text-left leading-tight">
|
||
<div class="text-[9px] font-mono opacity-80" id="keybind-label-wait">[Space]</div>
|
||
<div class="text-[11px] font-cinzel font-bold">Rasten</div>
|
||
</div>
|
||
</button>
|
||
</div>
|
||
|
||
</footer>
|
||
|
||
<!-- ================= MODAL 1: RPG CHARACTER VIEW & INVENTORY (8 SLOTS + RUCKSACK) ================= -->
|
||
<div id="modal-inventory" class="fixed inset-0 z-50 bg-black/85 backdrop-blur-md flex items-center justify-center p-2 sm:p-4 hidden">
|
||
<div class="fantasy-card max-w-3xl w-full rounded-2xl p-3.5 sm:p-5 shadow-2xl border border-stone-700 flex flex-col max-h-[92dvh]">
|
||
|
||
<!-- Header -->
|
||
<div class="flex items-center justify-between pb-2.5 border-b border-stone-800 mb-3 shrink-0">
|
||
<div class="flex items-center space-x-2">
|
||
<span class="text-xl">🛡️</span>
|
||
<div>
|
||
<h2 class="font-cinzel text-base sm:text-lg font-bold text-amber-400 leading-tight">Held, Ausrüstung & Inventar</h2>
|
||
<p class="text-[11px] text-stone-300">Held oben, 8 Ausrüstungs-Slots und mitwachsender Beutel darunter.</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center space-x-1.5">
|
||
<button onclick="closeInventoryModal(); openCraftingModal();" class="emerald-btn px-2.5 py-1 rounded-lg text-xs">⚒️ Handwerk</button>
|
||
<button onclick="closeInventoryModal()" class="fantasy-btn px-2.5 py-1 rounded-lg text-xs font-bold">✕</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Scrollable Body (Layout on Mobile & PC: Character Top -> Stats -> Skills -> 8 Equipment Slots -> Bag) -->
|
||
<div class="overflow-y-auto custom-scroll pr-1 space-y-3 flex-1">
|
||
|
||
<!-- 1. Top Character Avatar & Level Card -->
|
||
<div id="character-avatar-card">
|
||
<!-- Populated by updateInventoryUI() -->
|
||
</div>
|
||
|
||
<!-- 2. Hero Combat Summary Strip -->
|
||
<div class="grid grid-cols-3 sm:grid-cols-6 gap-1.5 p-2 rounded-xl bg-stone-950 border border-stone-800 text-center text-[11px] font-mono">
|
||
<div class="p-1 rounded bg-stone-900/80">
|
||
<div class="text-[9px] text-stone-400">⚔️ Nahkampf</div>
|
||
<div class="font-bold text-amber-300" id="stat-melee-atk">12</div>
|
||
</div>
|
||
<div class="p-1 rounded bg-stone-900/80">
|
||
<div class="text-[9px] text-stone-400">🏹 Fernkampf</div>
|
||
<div class="font-bold text-emerald-300" id="stat-ranged-atk">—</div>
|
||
</div>
|
||
<div class="p-1 rounded bg-stone-900/80">
|
||
<div class="text-[9px] text-stone-400">🛡️ Rüstung</div>
|
||
<div class="font-bold text-sky-300" id="stat-total-def">2</div>
|
||
</div>
|
||
<div class="p-1 rounded bg-stone-900/80">
|
||
<div class="text-[9px] text-stone-400">🎯 Kritisch</div>
|
||
<div class="font-bold text-rose-300" id="stat-crit-pct">10%</div>
|
||
</div>
|
||
<div class="p-1 rounded bg-stone-900/80">
|
||
<div class="text-[9px] text-stone-400">⚡ Magie</div>
|
||
<div class="font-bold text-cyan-300" id="stat-spell-pwr">100%</div>
|
||
</div>
|
||
<div class="p-1 rounded bg-stone-900/80">
|
||
<div class="text-[9px] text-stone-400">🏹 Pfeile</div>
|
||
<div class="font-bold text-emerald-400" id="stat-arrows-count">0</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 3. Permanent Skill & Attribute Points Card (HP, Mana, Stärke) -->
|
||
<div id="stat-points-banner" class="p-3 rounded-xl bg-stone-950 border border-amber-500/40 text-xs shadow-lg">
|
||
<div class="flex items-center justify-between mb-2">
|
||
<span class="font-cinzel font-bold text-amber-300 flex items-center gap-1.5 text-xs sm:text-sm" id="stat-banner-status">
|
||
<span>⭐</span> <span>Attributs-Verteilung</span>
|
||
</span>
|
||
<span class="font-mono text-[11px] px-2 py-0.5 rounded bg-amber-950/80 text-amber-300 border border-amber-700/60" id="stat-points-count-badge">
|
||
<b id="stat-points-count">0</b> freie Punkte
|
||
</span>
|
||
</div>
|
||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-2 text-xs" id="stat-buttons-container">
|
||
<!-- Populated by updateInventoryUI() -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 4. Visual Equipment Slots (8 Slots in 2 columns: 4 left body, 4 right weapon/relics) -->
|
||
<div>
|
||
<div class="flex items-center justify-between mb-2">
|
||
<h3 class="font-cinzel font-bold text-xs text-amber-400 uppercase tracking-wider">Angelegte Ausrüstung (8 Feste Slots)</h3>
|
||
<span class="text-[10px] text-stone-400 font-mono">Tippe auf Ablegen zum Ausziehen</span>
|
||
</div>
|
||
<div id="paperdoll-slots-container">
|
||
<!-- Populated by updateInventoryUI() -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 5. Unified Inventory Grid (Rucksack) -->
|
||
<div>
|
||
<div class="flex items-center justify-between mb-2">
|
||
<div class="flex items-center gap-1.5">
|
||
<h3 class="font-cinzel font-bold text-xs text-stone-200 uppercase tracking-wider">Gegenstände im Beutel</h3>
|
||
<span class="text-[10px] text-stone-400 hidden sm:inline">(Startet mit 5, wächst um +2 Plätze pro Stufe)</span>
|
||
</div>
|
||
<span class="text-xs font-mono text-amber-400 font-bold" id="inv-capacity-text">0 / 5 Plätze</span>
|
||
</div>
|
||
|
||
<!-- Category Filter Bar for Bag Items (Waffe, Hut, Rüstung, Hose, Schuhe, etc.) -->
|
||
<div id="inv-filter-bar" class="flex items-center gap-1 overflow-x-auto no-scrollbar py-1 mb-2.5 text-[11px] shrink-0">
|
||
<!-- Populated by renderInventoryFilters() -->
|
||
</div>
|
||
|
||
<div id="backpack-list" class="space-y-2">
|
||
<!-- Populated by updateInventoryUI() as clean cards with full stats badges -->
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ================= MODAL 2: SCHMIEDE, ALCHEMIE & FÄHIGKEITEN ================= -->
|
||
<div id="modal-crafting" class="fixed inset-0 z-50 bg-black/85 backdrop-blur-md flex items-center justify-center p-2 sm:p-4 hidden">
|
||
<div class="fantasy-card max-w-2xl w-full rounded-2xl p-3.5 sm:p-5 shadow-2xl border border-stone-700 flex flex-col max-h-[92dvh]">
|
||
|
||
<div class="flex items-center justify-between pb-2.5 border-b border-stone-800 mb-3 shrink-0">
|
||
<div class="flex items-center space-x-2">
|
||
<span class="text-xl">⚒️</span>
|
||
<div>
|
||
<h2 class="font-cinzel text-base sm:text-lg font-bold text-emerald-400 leading-tight">Schmiede & Alchemie</h2>
|
||
<p class="text-[11px] text-stone-400">Fertige Ausrüstung, Pfeile und Tränke aus deinen gesammelten Rohstoffen.</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center space-x-1.5">
|
||
<button onclick="closeCraftingModal(); openInventoryModal();" class="fantasy-btn px-2.5 py-1 rounded-lg text-xs">🎒 Zum Rucksack</button>
|
||
<button onclick="closeCraftingModal()" class="fantasy-btn px-2.5 py-1 rounded-lg text-xs font-bold">✕</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Category Tabs -->
|
||
<div class="flex flex-wrap gap-1.5 mb-3 shrink-0 text-xs">
|
||
<button onclick="setCraftFilter('all')" id="craft-cat-all" class="gold-btn px-2.5 py-1 rounded-lg">Alle</button>
|
||
<button onclick="setCraftFilter('starter')" id="craft-cat-starter" class="fantasy-btn px-2.5 py-1 rounded-lg">🛡️ Grund-Ausrüstung</button>
|
||
<button onclick="setCraftFilter('ammo')" id="craft-cat-ammo" class="fantasy-btn px-2.5 py-1 rounded-lg">🏹 Pfeile & Wurfwaffen</button>
|
||
<button onclick="setCraftFilter('alchemy')" id="craft-cat-alchemy" class="fantasy-btn px-2.5 py-1 rounded-lg">🧪 Tränke & Bomben</button>
|
||
<button onclick="setCraftFilter('master')" id="craft-cat-master" class="fantasy-btn px-2.5 py-1 rounded-lg">✨ Meister-Schmiede</button>
|
||
</div>
|
||
|
||
<!-- Recipes List -->
|
||
<div id="crafting-recipes-grid" class="overflow-y-auto custom-scroll pr-1 space-y-2 flex-1">
|
||
<!-- Populated by renderCraftingUI() -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ================= MODAL 3: SHORTCUTS & QUICKSLOTS EDITOR ================= -->
|
||
<div id="modal-shortcuts" class="fixed inset-0 z-50 bg-black/85 backdrop-blur-md flex items-center justify-center p-2 sm:p-4 hidden">
|
||
<div class="fantasy-card max-w-2xl w-full rounded-2xl p-4 sm:p-5 shadow-2xl border border-stone-700 custom-scroll max-h-[92dvh] overflow-y-auto">
|
||
|
||
<div class="flex items-center justify-between pb-2.5 border-b border-stone-800 mb-3">
|
||
<div class="flex items-center space-x-2">
|
||
<span class="text-xl">⌨️</span>
|
||
<div>
|
||
<h2 class="font-cinzel text-base sm:text-lg font-bold text-amber-400">Tastaturkürzel & Quickslots anpassen</h2>
|
||
<p class="text-[11px] text-stone-400">Belege Tasten für Angriff, Rasten und deine 6 Aktions-Slots frei nach Wunsch.</p>
|
||
</div>
|
||
</div>
|
||
<button onclick="closeShortcutsModal()" class="fantasy-btn px-2.5 py-1 rounded-lg text-xs font-bold">✕</button>
|
||
</div>
|
||
|
||
<!-- Core Combat Keys: Attack & Rest (Editable!) -->
|
||
<div class="p-3 rounded-xl bg-stone-950 border border-stone-800 mb-3">
|
||
<div class="text-[11px] font-cinzel text-amber-400 uppercase font-bold mb-2">⚔️ Haupt-Aktionen</div>
|
||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2 text-xs">
|
||
<div class="p-2.5 rounded-lg bg-stone-900 border border-stone-800 flex items-center justify-between">
|
||
<div>
|
||
<div class="font-bold text-stone-200">⚔️ Angriff / Fernkampf</div>
|
||
<div class="text-[10px] text-stone-400">Feuert Fernkampf oder greift an</div>
|
||
</div>
|
||
<button onclick="startRebindingKey('attack')" id="btn-rebind-attack" class="gold-btn px-3 py-1 rounded-lg font-mono text-xs">
|
||
Taste: <span id="label-key-attack">F</span>
|
||
</button>
|
||
</div>
|
||
<div class="p-2.5 rounded-lg bg-stone-900 border border-stone-800 flex items-center justify-between">
|
||
<div>
|
||
<div class="font-bold text-stone-200">⏳ 1 Runde Rasten</div>
|
||
<div class="text-[10px] text-stone-400">Regeneriert +1 MP & überspringt Zug</div>
|
||
</div>
|
||
<button onclick="startRebindingKey('wait')" id="btn-rebind-wait" class="gold-btn px-3 py-1 rounded-lg font-mono text-xs">
|
||
Taste: <span id="label-key-wait">Space</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 6 Quickslots Selector -->
|
||
<div class="text-[11px] font-cinzel text-cyan-400 uppercase font-bold mb-1.5">⚡ Schnellzugriff-Slots (1–6)</div>
|
||
<div id="shortcut-editor-slots" class="grid grid-cols-3 sm:grid-cols-6 gap-2 mb-3"></div>
|
||
|
||
<!-- Active Slot Config -->
|
||
<div class="p-3 rounded-xl bg-stone-950 border border-stone-800 mb-3">
|
||
<div class="flex items-center justify-between pb-2 border-b border-stone-800 mb-2.5">
|
||
<span id="sc-selected-slot-title" class="font-cinzel font-bold text-amber-400 text-sm">Slot 1</span>
|
||
<button onclick="startRebindingSlotKey()" id="btn-rebind-slot-key" class="gold-btn px-3 py-1 rounded-lg text-xs font-mono">
|
||
Slot-Taste ändern
|
||
</button>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3 max-h-[38vh] overflow-y-auto custom-scroll pr-1">
|
||
<div>
|
||
<div class="text-[11px] font-cinzel text-cyan-400 uppercase mb-1.5">⚡ Fähigkeiten & Zauber</div>
|
||
<div id="sc-assign-skills-list" class="space-y-1.5"></div>
|
||
</div>
|
||
<div>
|
||
<div class="text-[11px] font-cinzel text-emerald-400 uppercase mb-1.5">🧪 Tränke & Wurfwaffen</div>
|
||
<div id="sc-assign-items-list" class="space-y-1.5"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- System Keybinds -->
|
||
<div class="p-2.5 rounded-xl bg-stone-900/70 border border-stone-800 mb-3 text-xs hidden sm:block">
|
||
<div class="font-cinzel font-bold text-stone-300 uppercase mb-1.5 text-[11px]">System-Tasten</div>
|
||
<div class="grid grid-cols-4 gap-2" id="system-keybinds-grid"></div>
|
||
</div>
|
||
|
||
<div class="flex justify-between items-center pt-2 border-t border-stone-800">
|
||
<button onclick="resetDefaultShortcuts()" class="fantasy-btn px-3 py-1.5 rounded-xl text-xs text-stone-400">↺ Standard</button>
|
||
<button onclick="closeShortcutsModal()" class="gold-btn px-5 py-1.5 rounded-xl text-xs font-cinzel font-bold">Fertig</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ================= MODAL 4: HELDENAUSWAHL (START / NEW GAME) ================= -->
|
||
<div id="modal-hero-select" class="fixed inset-0 z-50 bg-black/85 backdrop-blur-md flex items-center justify-center p-3 hidden">
|
||
<div class="fantasy-card max-w-2xl w-full rounded-2xl p-4 sm:p-6 shadow-2xl border border-stone-700 custom-scroll max-h-[92dvh] overflow-y-auto">
|
||
|
||
<div class="text-center mb-3">
|
||
<span class="text-3xl">🏰</span>
|
||
<h2 class="font-cinzel text-xl sm:text-2xl font-bold text-amber-400 tracking-wide mt-1">Mythic Depths</h2>
|
||
<p class="text-xs text-stone-400 mt-0.5">Du beginnst fast mit leeren Händen. Sammle Rohstoffe, schmiede Ausrüstung und überlebe 10 Ebenen!</p>
|
||
</div>
|
||
|
||
<!-- Resume Active Run Banner (shown if a run is already in progress) -->
|
||
<div id="resume-run-box" class="hidden mb-4 p-3 rounded-xl bg-emerald-950/70 border border-emerald-500/70 flex items-center justify-between">
|
||
<div class="text-xs">
|
||
<div class="font-bold text-emerald-300">💾 Aktiver Spielstand vorhanden!</div>
|
||
<div class="text-[11px] text-stone-300" id="resume-run-info">Ebene 1 • Stufe 1</div>
|
||
</div>
|
||
<button onclick="closeHeroSelectModal()" class="emerald-btn px-4 py-2 rounded-xl text-xs font-cinzel font-bold">
|
||
▶ Weiterspielen
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Hero Name Input -->
|
||
<div class="mb-3 flex items-center justify-center">
|
||
<div class="w-full max-w-xs">
|
||
<label class="block text-[10px] text-stone-400 uppercase font-cinzel mb-1 text-center">Name deines Helden</label>
|
||
<input id="input-player-name" type="text" maxlength="20" placeholder="Abenteurer" value="Abenteurer"
|
||
class="w-full px-3 py-1.5 rounded-xl bg-stone-950 border border-stone-700 text-amber-300 font-bold text-center text-xs focus:outline-none focus:border-amber-400">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 3 Hero Classes Cards (Zero-to-Hero Starter Loadouts) -->
|
||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-2.5 mb-4">
|
||
|
||
<!-- Knight -->
|
||
<div onclick="selectHeroClass('knight')" id="card-class-knight" class="p-3 rounded-xl border-2 border-amber-500/80 bg-stone-900/90 cursor-pointer transition flex flex-col justify-between">
|
||
<div>
|
||
<div class="text-2xl mb-1 text-center">⚔️</div>
|
||
<h3 class="font-cinzel font-bold text-sm text-amber-400 text-center">Klingensänger</h3>
|
||
<div class="text-[10px] text-stone-400 text-center mb-2">Krieger-Novize</div>
|
||
<div class="space-y-1 text-[11px] text-stone-300 font-mono bg-stone-950 p-2 rounded-lg border border-stone-800">
|
||
<div>❤️ HP: <span class="text-rose-400 font-bold">110</span> | 🔮 MP: <span class="text-cyan-400 font-bold">25</span></div>
|
||
<div>🗡️ Start: <span class="text-stone-200">Rostiges Kurzschwert</span></div>
|
||
<div>🦺 Rüstung: <span class="text-stone-500">Keine (Unbewaffnet)</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="text-[10px] text-amber-300/90 mt-2 italic text-center">Skills: Wirbelwind & Schildstoß</div>
|
||
</div>
|
||
|
||
<!-- Mage -->
|
||
<div onclick="selectHeroClass('mage')" id="card-class-mage" class="p-3 rounded-xl border border-stone-800 bg-stone-900/60 cursor-pointer transition flex flex-col justify-between">
|
||
<div>
|
||
<div class="text-2xl mb-1 text-center">🔮</div>
|
||
<h3 class="font-cinzel font-bold text-sm text-cyan-400 text-center">Arkanist</h3>
|
||
<div class="text-[10px] text-stone-400 text-center mb-2">Zauberlehrling</div>
|
||
<div class="space-y-1 text-[11px] text-stone-300 font-mono bg-stone-950 p-2 rounded-lg border border-stone-800">
|
||
<div>❤️ HP: <span class="text-rose-400 font-bold">75</span> | 🔮 MP: <span class="text-cyan-400 font-bold">70</span></div>
|
||
<div>🪄 Start: <span class="text-cyan-300">Alter Lehrstab (4F)</span></div>
|
||
<div>🦺 Rüstung: <span class="text-stone-500">Keine (Unbewaffnet)</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="text-[10px] text-cyan-300/90 mt-2 italic text-center">Skills: Arkanpfeil, Feuerball & Frost</div>
|
||
</div>
|
||
|
||
<!-- Ranger -->
|
||
<div onclick="selectHeroClass('ranger')" id="card-class-ranger" class="p-3 rounded-xl border border-stone-800 bg-stone-900/60 cursor-pointer transition flex flex-col justify-between">
|
||
<div>
|
||
<div class="text-2xl mb-1 text-center">🏹</div>
|
||
<h3 class="font-cinzel font-bold text-sm text-emerald-400 text-center">Waldläufer</h3>
|
||
<div class="text-[10px] text-stone-400 text-center mb-2">Wildnis-Späher</div>
|
||
<div class="space-y-1 text-[11px] text-stone-300 font-mono bg-stone-950 p-2 rounded-lg border border-stone-800">
|
||
<div>❤️ HP: <span class="text-rose-400 font-bold">90</span> | 🔮 MP: <span class="text-cyan-400 font-bold">35</span></div>
|
||
<div>🏹 Start: <span class="text-emerald-300">Ast-Kurzbogen + 8🏹</span></div>
|
||
<div>🦺 Rüstung: <span class="text-stone-500">Keine (Unbewaffnet)</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="text-[10px] text-emerald-300/90 mt-2 italic text-center">Skills: Meisterschuss & Dornenfalle</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<button onclick="startNewDungeonRun()" class="gold-btn w-full py-3 rounded-xl font-cinzel text-sm sm:text-base flex items-center justify-center space-x-2">
|
||
<span>⚔️</span>
|
||
<span>Neuen Durchlauf bei Null starten</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ================= MODAL 5: GAME OVER / VICTORY ================= -->
|
||
<div id="modal-gameover" class="fixed inset-0 z-50 bg-black/90 backdrop-blur-md flex items-center justify-center p-3 hidden">
|
||
<div class="fantasy-card max-w-md w-full rounded-2xl p-5 shadow-2xl border border-stone-700 text-center">
|
||
<div class="text-5xl mb-2" id="gameover-icon">💀</div>
|
||
<h2 class="font-cinzel text-2xl font-bold mb-1" id="gameover-title">Gefallen im Verlies</h2>
|
||
<p class="text-xs text-stone-400 mb-4" id="gameover-cause"></p>
|
||
|
||
<div class="p-3 rounded-xl bg-stone-950 border border-stone-800 text-xs mb-4 space-y-1.5 font-mono text-left">
|
||
<div class="flex justify-between"><span class="text-stone-400">Erreichte Ebene:</span><span class="font-bold text-amber-300" id="go-stat-floor">Ebene 1</span></div>
|
||
<div class="flex justify-between"><span class="text-stone-400">Besiegte Feinde:</span><span class="font-bold text-rose-400" id="go-stat-kills">0</span></div>
|
||
<div class="flex justify-between"><span class="text-stone-400">Gesammeltes Gold:</span><span class="font-bold text-yellow-300" id="go-stat-gold">0 💰</span></div>
|
||
<div class="flex justify-between"><span class="text-stone-400">Überlebte Züge:</span><span class="font-bold text-stone-200" id="go-stat-turns">0 ⏳</span></div>
|
||
<div class="flex justify-between pt-1.5 border-t border-stone-800 text-sm">
|
||
<span class="text-stone-200 font-cinzel font-bold">Gesamt-Score:</span>
|
||
<span class="font-bold text-amber-400 text-base" id="go-stat-score">0 Punkte</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="space-y-2">
|
||
<button onclick="openHeroSelectModal()" class="gold-btn w-full py-2.5 rounded-xl font-cinzel text-sm font-bold">⚔️ Neues Abenteuer wagen</button>
|
||
<button onclick="openHighscoresModal()" class="fantasy-btn w-full py-2 rounded-xl text-xs font-semibold">🏆 Zur Bestenliste</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ================= MODAL 6: BESTENLISTE ================= -->
|
||
<div id="modal-highscores" class="fixed inset-0 z-50 bg-black/85 backdrop-blur-md flex items-center justify-center p-3 hidden">
|
||
<div class="fantasy-card max-w-xl w-full rounded-2xl p-4 sm:p-5 shadow-2xl border border-stone-700 custom-scroll max-h-[90dvh] overflow-y-auto">
|
||
<div class="flex items-center justify-between pb-3 border-b border-stone-800 mb-3">
|
||
<div class="flex items-center space-x-2">
|
||
<span class="text-xl">🏆</span>
|
||
<h2 class="font-cinzel text-lg font-bold text-amber-400">Halle der Helden</h2>
|
||
</div>
|
||
<button onclick="closeHighscoresModal()" class="fantasy-btn px-2.5 py-1 rounded-lg text-xs font-bold">✕</button>
|
||
</div>
|
||
<div id="highscores-list" class="space-y-1.5 text-xs"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ================= MODAL 7: STADT-HANDELSKONTOR (MERCHANT BALTHASAR) ================= -->
|
||
<div id="modal-town-shop" class="fixed inset-0 z-50 bg-black/85 backdrop-blur-md flex items-center justify-center p-2 sm:p-4 hidden">
|
||
<div class="fantasy-card max-w-2xl w-full rounded-2xl p-3.5 sm:p-5 shadow-2xl border border-stone-700 flex flex-col max-h-[92dvh]">
|
||
<div class="flex items-center justify-between pb-2.5 border-b border-stone-800 mb-3 shrink-0">
|
||
<div class="flex items-center space-x-2">
|
||
<span class="text-2xl">🧔</span>
|
||
<div>
|
||
<h2 class="font-cinzel text-base sm:text-lg font-bold text-amber-400 leading-tight">Händler Balthasar — Stadtmarkt</h2>
|
||
<p class="text-[11px] text-stone-300">Kaufe Ausrüstung, Tränke & Rohstoffe oder verkaufe deine Beute mit +30% Stadt-Bonus!</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center space-x-2">
|
||
<div class="px-2.5 py-1 rounded-lg bg-stone-950 border border-amber-500/40 text-xs font-mono font-bold text-amber-300">
|
||
💰 <span id="shop-gold-display">0</span>G
|
||
</div>
|
||
<button onclick="closeTownShopModal()" class="fantasy-btn px-2.5 py-1 rounded-lg text-xs font-bold">✕</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Shop Tabs -->
|
||
<div class="flex gap-1.5 mb-2 shrink-0 text-xs">
|
||
<button onclick="setTownShopTab('buy_gear')" id="shop-tab-buy_gear" class="gold-btn px-3 py-1.5 rounded-lg">🛡️ Ausrüstung kaufen</button>
|
||
<button onclick="setTownShopTab('buy_supplies')" id="shop-tab-buy_supplies" class="fantasy-btn px-3 py-1.5 rounded-lg">🧪 Tränke & Rohstoffe</button>
|
||
<button onclick="setTownShopTab('sell')" id="shop-tab-sell" class="fantasy-btn px-3 py-1.5 rounded-lg">💰 Beute verkaufen (+30%)</button>
|
||
</div>
|
||
|
||
<!-- Shop Category Sub-Filter Bar (Waffe, Hut, Rüstung, Hose, Schuhe, etc.) -->
|
||
<div id="shop-filter-bar" class="flex items-center gap-1 overflow-x-auto no-scrollbar py-1 mb-2.5 text-[11px] shrink-0">
|
||
<!-- Rendered by renderTownShopFilters() -->
|
||
</div>
|
||
|
||
<div id="town-shop-content" class="overflow-y-auto custom-scroll pr-1 space-y-2 flex-1"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ================= MODAL: SPIELER-HAUS & UNENDLICHE TRUHE ================= -->
|
||
<div id="modal-player-house" class="fixed inset-0 z-50 bg-black/85 backdrop-blur-md flex items-center justify-center p-2 sm:p-4 hidden">
|
||
<div class="fantasy-card max-w-2xl w-full rounded-2xl p-3.5 sm:p-5 shadow-2xl border border-stone-700 flex flex-col max-h-[92dvh]">
|
||
|
||
<!-- House Modal Header -->
|
||
<div class="flex items-center justify-between pb-2.5 border-b border-stone-800 mb-3 shrink-0">
|
||
<div class="flex items-center space-x-2">
|
||
<span class="text-2xl">🏡</span>
|
||
<div>
|
||
<h2 class="font-cinzel text-base sm:text-lg font-bold text-amber-400 leading-tight">Dein Anwesen in Grimhold</h2>
|
||
<p class="text-[11px] text-stone-300">Account-gebundenes Eigenheim • Kiste mit unendlichem Platz • Bett & Schmiede</p>
|
||
</div>
|
||
</div>
|
||
<button onclick="closePlayerHouseModal()" class="fantasy-btn px-2.5 py-1 rounded-lg text-xs font-bold">✕</button>
|
||
</div>
|
||
|
||
<!-- House Content View (Populated by renderPlayerHouseUI()) -->
|
||
<div id="player-house-view" class="overflow-y-auto custom-scroll pr-1 space-y-3 flex-1">
|
||
<!-- Rendered by JavaScript -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ================= MODAL 8: WELTPORTAL — MEHRERE DUNGEONS AUSWÄHLEN ================= -->
|
||
<div id="modal-dungeons" class="fixed inset-0 z-50 bg-black/85 backdrop-blur-md flex items-center justify-center p-2 sm:p-4 hidden">
|
||
<div class="fantasy-card max-w-2xl w-full rounded-2xl p-4 sm:p-5 shadow-2xl border border-stone-700 flex flex-col max-h-[92dvh]">
|
||
<div class="flex items-center justify-between pb-2.5 border-b border-stone-800 mb-3 shrink-0">
|
||
<div class="flex items-center space-x-2">
|
||
<span class="text-2xl">🌀</span>
|
||
<div>
|
||
<h2 class="font-cinzel text-base sm:text-lg font-bold text-cyan-300 leading-tight">Weltportal von Grimhold — Dungeon-Wahl</h2>
|
||
<p class="text-[11px] text-stone-300">Jeder Dungeon umfasst 10 Ebenen und einen eigenen Endboss. Dein Charakter & Inventar reisen mit!</p>
|
||
</div>
|
||
</div>
|
||
<button onclick="closeDungeonsModal()" class="fantasy-btn px-2.5 py-1 rounded-lg text-xs font-bold">✕</button>
|
||
</div>
|
||
|
||
<div id="dungeons-list-container" class="overflow-y-auto custom-scroll pr-1 space-y-3 flex-1"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ================= MODAL 9: MULTIPLAYER LIVE-CHAT & ONLINE-HELDEN ================= -->
|
||
<div id="modal-chat" class="fixed inset-0 z-50 bg-black/80 backdrop-blur-sm flex items-center justify-center p-2 sm:p-4 hidden">
|
||
<div class="fantasy-card max-w-xl w-full rounded-2xl p-3.5 sm:p-5 shadow-2xl border border-stone-700 flex flex-col h-[82dvh] max-h-[640px]">
|
||
<div class="flex items-center justify-between pb-2.5 border-b border-stone-800 mb-2.5 shrink-0">
|
||
<div class="flex items-center space-x-2">
|
||
<span class="text-xl">💬</span>
|
||
<div>
|
||
<h2 class="font-cinzel text-base sm:text-lg font-bold text-cyan-300 leading-tight">Taverne & Globaler Helden-Chat</h2>
|
||
<p class="text-[11px] text-stone-300">Tausche dich live mit anderen Spielern in Grimhold aus.</p>
|
||
</div>
|
||
</div>
|
||
<button onclick="closeChatModal()" class="fantasy-btn px-2.5 py-1 rounded-lg text-xs font-bold">✕</button>
|
||
</div>
|
||
|
||
<!-- Active Online Players Strip -->
|
||
<div class="mb-2.5 p-2 rounded-xl bg-stone-950 border border-stone-800 shrink-0">
|
||
<div class="text-[10px] font-cinzel text-amber-400 uppercase font-bold mb-1">🟢 Aktive Helden online</div>
|
||
<div id="online-players-list" class="flex flex-wrap gap-1.5 text-[11px]"></div>
|
||
</div>
|
||
|
||
<!-- Chat Messages Feed -->
|
||
<div id="chat-messages-box" class="flex-1 overflow-y-auto custom-scroll p-2.5 rounded-xl bg-stone-950/90 border border-stone-800 space-y-2 text-xs mb-2.5"></div>
|
||
|
||
<!-- Send Input -->
|
||
<form onsubmit="submitChatMessage(event)" class="flex gap-2 shrink-0">
|
||
<input id="chat-input-field" type="text" maxlength="200" placeholder="Nachricht an alle Helden schreiben..."
|
||
class="flex-1 px-3 py-2 rounded-xl bg-stone-950 border border-stone-700 text-stone-100 text-xs focus:outline-none focus:border-cyan-400">
|
||
<button type="submit" class="emerald-btn px-4 py-2 rounded-xl text-xs font-bold shrink-0">Senden</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ================= MODAL 10: FREE2PLAY GAST & KONTO-REGISTRIERUNG / LOGIN ================= -->
|
||
<div id="modal-account" class="fixed inset-0 z-50 bg-black/85 backdrop-blur-md flex items-center justify-center p-3 hidden">
|
||
<div class="fantasy-card max-w-md w-full rounded-2xl p-4 sm:p-5 shadow-2xl border border-stone-700">
|
||
<div class="flex items-center justify-between pb-2.5 border-b border-stone-800 mb-3">
|
||
<div class="flex items-center space-x-2">
|
||
<span class="text-xl">👤</span>
|
||
<div>
|
||
<h2 class="font-cinzel text-base sm:text-lg font-bold text-amber-400">Helden-Konto & Cloud-Save</h2>
|
||
<p class="text-[11px] text-stone-300">100% Free-to-Play — Registrierung sichert deinen Spielstand auf allen Geräten!</p>
|
||
</div>
|
||
</div>
|
||
<button onclick="closeAccountModal()" class="fantasy-btn px-2.5 py-1 rounded-lg text-xs font-bold">✕</button>
|
||
</div>
|
||
|
||
<div id="account-logged-in-box" class="hidden space-y-3">
|
||
<div class="p-3 rounded-xl bg-emerald-950/60 border border-emerald-500/50 text-xs">
|
||
<div class="text-emerald-300 font-bold text-sm mb-0.5">✅ Eingeloggt als <span id="account-username-display" class="text-amber-300">Held</span></div>
|
||
<div class="text-stone-300 text-[11px]">Dein Spielstand wird automatisch in der Cloud mit deinem Konto synchronisiert (PC & Smartphone).</div>
|
||
</div>
|
||
<button onclick="logoutAccount()" class="fantasy-btn w-full py-2 rounded-xl text-xs text-rose-300 font-bold">Abmelden (Zurück zum Gast-Modus)</button>
|
||
</div>
|
||
|
||
<div id="account-auth-form-box" class="space-y-3 text-xs">
|
||
<div class="p-2.5 rounded-xl bg-stone-950 border border-stone-800 text-[11px] text-stone-300">
|
||
💡 <b>Gast-Fortschritt übernehmen:</b> Wenn du dich jetzt registrierst oder einloggst, wird dein aktueller Held & Fortschritt automatisch auf dein Konto übertragen!
|
||
</div>
|
||
|
||
<div>
|
||
<label class="block text-[10px] uppercase font-cinzel text-stone-300 mb-1">Benutzername (3–20 Zeichen)</label>
|
||
<input id="auth-username-input" type="text" maxlength="20" placeholder="Dein Heldenname"
|
||
class="w-full px-3 py-2 rounded-xl bg-stone-950 border border-stone-700 text-amber-300 font-bold focus:outline-none focus:border-amber-400">
|
||
</div>
|
||
|
||
<div>
|
||
<label class="block text-[10px] uppercase font-cinzel text-stone-300 mb-1">Passwort (mind. 4 Zeichen)</label>
|
||
<input id="auth-password-input" type="password" placeholder="••••••••"
|
||
class="w-full px-3 py-2 rounded-xl bg-stone-950 border border-stone-700 text-stone-100 focus:outline-none focus:border-amber-400">
|
||
</div>
|
||
|
||
<div id="auth-error-msg" class="hidden text-rose-400 text-[11px] font-semibold text-center"></div>
|
||
|
||
<div class="grid grid-cols-2 gap-2 pt-1">
|
||
<button onclick="submitAccountAuth('login')" class="fantasy-btn py-2.5 rounded-xl font-cinzel font-bold text-xs border-amber-500/40">🔑 Einloggen</button>
|
||
<button onclick="submitAccountAuth('register')" class="gold-btn py-2.5 rounded-xl font-cinzel font-bold text-xs">✨ Registrieren</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ================= MODAL: EXPANDABLE TOP MENU & SETTINGS (Clean Mobile & Desktop Menu) ================= -->
|
||
<div id="modal-top-menu" class="fixed inset-0 z-50 bg-black/85 backdrop-blur-md flex items-center justify-center p-3 hidden">
|
||
<div class="fantasy-card max-w-md w-full rounded-2xl p-4 sm:p-5 shadow-2xl border border-stone-700 flex flex-col max-h-[90dvh]">
|
||
<!-- Header -->
|
||
<div class="flex items-center justify-between pb-2.5 border-b border-stone-800 mb-3 shrink-0">
|
||
<div class="flex items-center space-x-2">
|
||
<span class="text-xl">☰</span>
|
||
<div>
|
||
<h2 class="font-cinzel text-base sm:text-lg font-bold text-amber-400">Hauptmenü & Einstellungen</h2>
|
||
<p class="text-[11px] text-stone-300">Steuerung, Audio, Shortcuts und Spielfunktionen</p>
|
||
</div>
|
||
</div>
|
||
<button onclick="closeTopMenuModal()" class="fantasy-btn px-2.5 py-1 rounded-lg text-xs font-bold">✕</button>
|
||
</div>
|
||
|
||
<!-- Scrollable List of Menu Options -->
|
||
<div class="overflow-y-auto custom-scroll pr-1 space-y-2 flex-1 text-xs">
|
||
|
||
<!-- Setting: Virtual D-Pad (Laufkreuz) Toggle -->
|
||
<div class="p-3 rounded-xl bg-stone-900 border border-stone-800 flex items-center justify-between gap-2">
|
||
<div>
|
||
<div class="font-bold text-stone-200 flex items-center gap-1.5">
|
||
<span>🕹️</span> <span>Virtuelles Laufkreuz (D-Pad)</span>
|
||
</div>
|
||
<div class="text-[10px] text-stone-300">Steuerkreuz ein/ausblenden (Du kannst auch direkt auf die Karte tippen)</div>
|
||
</div>
|
||
<button onclick="toggleDpad()" id="menu-toggle-dpad-btn" class="gold-btn px-3 py-1.5 rounded-xl font-mono font-bold text-xs shrink-0">
|
||
<span id="menu-toggle-dpad-val" class="text-emerald-400 font-bold">AN</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Shortcuts & Controls -->
|
||
<button onclick="closeTopMenuModal(); openShortcutsModal();" class="w-full p-3 rounded-xl bg-stone-900 border border-stone-800 hover:border-amber-500/50 flex items-center justify-between text-left transition">
|
||
<div>
|
||
<div class="font-bold text-amber-300 flex items-center gap-1.5">
|
||
<span>⌨️</span> <span>Tastaturkürzel & Shortcuts</span>
|
||
</div>
|
||
<div class="text-[10px] text-stone-300">Belege Tasten für Angriff, Rasten und deine 6 Quickslots frei</div>
|
||
</div>
|
||
<span class="text-stone-300 font-mono text-sm">➔</span>
|
||
</button>
|
||
|
||
<!-- Handwerk / Alchemie -->
|
||
<button onclick="closeTopMenuModal(); openCraftingModal();" class="w-full p-3 rounded-xl bg-stone-900 border border-emerald-600/40 hover:border-emerald-400 flex items-center justify-between text-left transition">
|
||
<div>
|
||
<div class="font-bold text-emerald-300 flex items-center gap-1.5">
|
||
<span>⚒️</span> <span>Handwerk & Alchemie</span>
|
||
</div>
|
||
<div class="text-[10px] text-stone-300">Pfeile & Tränke unterwegs brauen, Waffen/Rüstung an Schmiede</div>
|
||
</div>
|
||
<span class="text-stone-300 font-mono text-sm">➔</span>
|
||
</button>
|
||
|
||
<!-- Live Chat -->
|
||
<button onclick="closeTopMenuModal(); openChatModal();" class="w-full p-3 rounded-xl bg-stone-900 border border-cyan-500/40 hover:border-cyan-400 flex items-center justify-between text-left transition">
|
||
<div>
|
||
<div class="font-bold text-cyan-300 flex items-center gap-1.5">
|
||
<span>💬</span> <span>Multiplayer Live-Chat</span>
|
||
</div>
|
||
<div class="text-[10px] text-stone-300">Mit anderen Helden chatten & Online-Spieler sehen</div>
|
||
</div>
|
||
<span class="text-stone-300 font-mono text-sm">➔</span>
|
||
</button>
|
||
|
||
<!-- Account / Cloud Save -->
|
||
<button onclick="closeTopMenuModal(); openAccountModal();" class="w-full p-3 rounded-xl bg-stone-900 border border-stone-800 hover:border-amber-400 flex items-center justify-between text-left transition">
|
||
<div>
|
||
<div class="font-bold text-stone-200 flex items-center gap-1.5">
|
||
<span>👤</span> <span>Konto & Cloud-Save</span>
|
||
</div>
|
||
<div class="text-[10px] text-stone-300">Free2Play Gast oder kostenloses Konto für Geräte-Synchronisation</div>
|
||
</div>
|
||
<span class="text-stone-300 font-mono text-sm">➔</span>
|
||
</button>
|
||
|
||
<!-- Zoom Toggle -->
|
||
<button onclick="cycleZoom()" class="w-full p-3 rounded-xl bg-stone-900 border border-stone-800 hover:border-amber-400 flex items-center justify-between text-left transition">
|
||
<div>
|
||
<div class="font-bold text-stone-200 flex items-center gap-1.5">
|
||
<span>🔍</span> <span>Karten-Zoom ändern</span>
|
||
</div>
|
||
<div class="text-[10px] text-stone-300">Vergrößert oder verkleinert den Dungeon-Ausschnitt</div>
|
||
</div>
|
||
<span class="text-amber-400 font-bold font-mono text-xs">Umschalten</span>
|
||
</button>
|
||
|
||
<!-- Sound Toggle -->
|
||
<div class="p-3 rounded-xl bg-stone-900 border border-stone-800 flex items-center justify-between gap-2">
|
||
<div>
|
||
<div class="font-bold text-stone-200 flex items-center gap-1.5">
|
||
<span>🔊</span> <span>Sound & Effekte</span>
|
||
</div>
|
||
<div class="text-[10px] text-stone-300">Kampf-, Zauber- und Schritt-Sounds</div>
|
||
</div>
|
||
<button onclick="toggleSound(); updateTopMenuUI();" id="menu-toggle-sound-btn" class="fantasy-btn px-3 py-1.5 rounded-xl font-mono font-bold text-xs shrink-0">
|
||
<span id="menu-toggle-sound-val" class="text-emerald-400 font-bold">AN</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Highscores -->
|
||
<button onclick="closeTopMenuModal(); openHighscoresModal();" class="w-full p-3 rounded-xl bg-stone-900 border border-stone-800 hover:border-amber-400 flex items-center justify-between text-left transition">
|
||
<div>
|
||
<div class="font-bold text-amber-300 flex items-center gap-1.5">
|
||
<span>🏆</span> <span>Bestenliste & Ruhmeshalle</span>
|
||
</div>
|
||
<div class="text-[10px] text-stone-300">Top 50 Abenteurer der Ahnengruft</div>
|
||
</div>
|
||
<span class="text-stone-300 font-mono text-sm">➔</span>
|
||
</button>
|
||
|
||
<!-- Hero Selection / New Run -->
|
||
<button onclick="closeTopMenuModal(); openHeroSelectModal();" class="w-full p-3 rounded-xl bg-stone-900 border border-stone-800 hover:border-rose-400 flex items-center justify-between text-left transition">
|
||
<div>
|
||
<div class="font-bold text-stone-300 flex items-center gap-1.5">
|
||
<span>⚙️</span> <span>Helden-Auswahl / Neuer Lauf</span>
|
||
</div>
|
||
<div class="text-[10px] text-stone-300">Neues Spiel mit anderer Klasse oder neuen Namen starten</div>
|
||
</div>
|
||
<span class="text-stone-300 font-mono text-sm">➔</span>
|
||
</button>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ================= MODAL: EMPTY QUIVER (NO ARROWS) POP-UP ================= -->
|
||
<div id="modal-no-arrows" class="fixed inset-0 z-50 bg-black/80 backdrop-blur-md flex items-center justify-center p-3 hidden">
|
||
<div class="fantasy-card max-w-md w-full rounded-2xl p-4 sm:p-5 shadow-2xl border border-rose-500/60 flex flex-col text-center">
|
||
<div class="w-14 h-14 mx-auto rounded-2xl bg-rose-950/80 border border-rose-500/60 flex items-center justify-center text-3xl mb-2.5 shadow">
|
||
🏹
|
||
</div>
|
||
<h3 class="font-cinzel text-base sm:text-lg font-bold text-rose-300 mb-1">Dein Köcher ist leer!</h3>
|
||
<p class="text-xs text-stone-300 mb-3">
|
||
Du hast keine Pfeile mehr für den Fernkampf. Schnitze sofort Pfeile aus gesammeltem Holz & Erz, kämpfe mit Fäusten/Nahkampfwaffen oder reise zu Händler Balthasar in die Stadt.
|
||
</p>
|
||
|
||
<div class="p-2.5 rounded-xl bg-stone-950 border border-stone-800 text-xs font-mono text-stone-300 mb-3 flex items-center justify-around">
|
||
<span>🪵 Holz: <b id="no-arrows-wood-count" class="text-amber-300">0</b></span>
|
||
<span>🪨 Erz: <b id="no-arrows-ore-count" class="text-stone-200">0</b></span>
|
||
<span>💰 Gold: <b id="no-arrows-gold-count" class="text-amber-400">0</b></span>
|
||
</div>
|
||
|
||
<div class="space-y-2 text-xs">
|
||
<button onclick="craftArrowsQuickFromModal()" id="btn-quick-craft-arrows" class="w-full py-2.5 rounded-xl emerald-btn flex items-center justify-center space-x-2 font-bold shadow">
|
||
<span>🪵</span>
|
||
<span>Pfeile herstellen</span>
|
||
</button>
|
||
<button onclick="closeNoArrowsModal(); if (!inTown) toggleTownOrDungeon(); else openTownShopModal();" class="w-full py-2.5 rounded-xl gold-btn flex items-center justify-center space-x-2 font-bold shadow">
|
||
<span>🏘️</span>
|
||
<span>Zu Händler Balthasar in die Stadt</span>
|
||
</button>
|
||
<button onclick="closeNoArrowsModal()" class="w-full py-2 rounded-xl fantasy-btn text-stone-300 font-semibold">
|
||
Abbrechen (Nahkampf nutzen)
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Main Game Script -->
|
||
<script src="/static/app.js?v=mythic_5.2.0"></script>
|
||
</body>
|
||
</html>
|