fighting-konoha/index.html

<!doctype html>
<html lang="id">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"><meta name="theme-color" content="#101923"><script>/* Phones/tablets: mark .touch and open the landscape mobile shell (mobile.html). ?touch=1 forces it on desktop, ?touch=0 turns it off. */(()=>{const q=new URLSearchParams(location.search),f=q.get('touch'),t=f?f==='1':matchMedia('(pointer: coarse)').matches||(navigator.maxTouchPoints>0&&/Android|iPhone|iPad|iPod|Mobile/i.test(navigator.userAgent));if(!t)return;document.documentElement.classList.add('touch');if(window.top===window&&!q.has('embed'))location.replace('mobile.html'+location.search+location.hash);})();</script><title>AETHER CLASH — Mecha vs Demi-Human</title><link rel="preload" href="assets/fonts/Rajdhani-Bold.ttf" as="font" type="font/ttf" crossorigin><link rel="stylesheet" href="style.css"><link rel="stylesheet" href="menu.css"></head>
<body><div id="boot" role="status" aria-live="polite"><div class="boot-card"><strong class="boot-logo">AETHER<br><em>CLASH</em></strong><div class="boot-bar"><i></i></div><span class="boot-status">Menyiapkan…</span></div></div><script src="precache.js"></script><script src="preload.js"></script><main id="game-shell" aria-label="Aether Clash, demo game fighting Mecha dan Demi-Human">
<canvas id="arena" tabindex="0" aria-label="Arena pertarungan. WASD bergerak, Spasi menyerang, I O P untuk skill."></canvas><div class="vignette" aria-hidden="true"></div>
<header class="combat-header">
<section class="fighter fighter-one" aria-label="Status pemain">
<div class="portrait-frame"><img id="player-portrait" class="portrait-image" data-portrait-side="player" src="assets/ui/arco-avatar.webp" alt="Portrait ARCO"><b class="player-tag">P1</b></div>
<div class="fighter-fields"><div class="name-row"><h1 id="player-name">ARCO</h1><span class="class-tag" id="player-class">MECHA</span></div><div class="life-frame" aria-label="Satu bar dengan dua lapis HP, 100 HP per lapis"><div class="life-track"><div id="health-reserve" class="life-fill reserve-fill"></div><div id="health-fill" class="life-fill"></div></div></div><div class="bar-caption"><span id="player-title">AETHER ARM</span><span id="health-label">200 / 200</span></div><div class="fighter-mark"><i></i><i></i><i></i><b class="round-wins" id="round-wins-player"></b><span id="player-status">CORE ACTIVE</span></div></div></section>
<section class="match-center" aria-label="Mode latihan tanpa batas waktu"><div class="mode-kicker" id="mode-label">FREE TRAINING</div><div class="match-clock" id="match-clock">∞</div><div class="match-rule"><i></i><span id="match-score">VS</span><i></i></div></section>
<section class="fighter fighter-two" aria-label="Status lawan FENR"><div class="fighter-fields"><div class="name-row"><span class="class-tag" id="enemy-class">DEMI-HUMAN</span><h2 id="enemy-name">FENR</h2></div><div class="life-frame" aria-label="Satu bar dengan dua lapis HP, 100 HP per lapis"><div class="life-track"><div id="guard-reserve" class="life-fill reserve-fill"></div><div id="guard-fill" class="life-fill"></div></div></div><div class="bar-caption"><span id="guard-label">HP 200 / 200</span><span id="enemy-title">WOLF RANGER</span></div><div class="fighter-mark"><b class="round-wins" id="round-wins-enemy"></b><span id="dummy-state">READY</span><i></i><i></i><i></i></div></div><div class="portrait-frame"><img id="enemy-portrait" class="portrait-image" data-portrait-side="enemy" src="assets/fenr/ui/portrait-human.webp" alt="Portrait FENR"><b class="player-tag">CPU</b></div></section>
</header><div class="form-timers"><div id="player-form-timer" class="form-timer" hidden></div><div id="enemy-form-timer" class="form-timer" hidden></div></div>
<nav class="match-actions" aria-label="Menu arena"><button id="settings-btn" aria-label="Buka pengaturan" title="Pengaturan"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m9 3-1 3-3 1-2 5 2 5 3 1 1 3h6l1-3 3-1 2-5-2-5-3-1-1-3Z"/><circle cx="12" cy="12" r="3"/></svg></button><button id="pause-btn" aria-label="Jeda game" title="Jeda (Esc)">Ⅱ</button></nav>
<section id="combo" class="combo-counter" aria-live="polite"><span id="combo-count">0</span><div><strong>HITS</strong><small id="combo-damage">0 DAMAGE</small></div></section><div id="announcement" class="announcement" role="status"></div>
<section id="round-call" hidden aria-live="polite"><small id="round-call-detail">FIRST TO TWO WINS</small><strong id="round-call-title"></strong></section><aside id="ultimate-cutin" class="ultimate-cutin" aria-hidden="true" aria-label="ARCO ultimate: Helios Squadron"><div class="cutin-circuit"></div><img class="cutin-art" src="assets/ui/ultimate-cutin.webp" alt=""><div class="cutin-caption"><span class="cutin-kicker">ARCO / AETHER COMMAND</span><strong>HELIOS<br><em>SQUADRON</em></strong><div class="cutin-detail"><span class="cutin-units"><i></i><i></i><i></i><i></i></span>ORBITAL LASER STRIKE</div></div><div class="cutin-edge"></div></aside>
<footer class="bottom-hud"><section class="skill-deck" aria-label="Serangan dan skill"><div class="deck-heading"><span id="deck-character">ARCO</span><i></i><b>MOVE SET</b></div><div class="skill-bar">
<button class="skill-card basic" data-action="attack" aria-label="Basic attack, Spasi, 3 kombo"><span class="skill-art"><img src="assets/ui/attack.webp" alt=""><kbd>SPACE</kbd><span class="combo-dots"><i></i><i></i><i></i></span></span><span class="skill-name">IRON CHAIN</span></button>
<button class="skill-card " data-action="skill1" aria-label="Aether Bolt, tombol I"><span class="skill-art"><img src="assets/ui/skill1.webp" alt=""><span class="cooldown-wipe" aria-hidden="true"></span><kbd>I</kbd></span><span class="skill-name">AETHER BOLT</span></button>
<button class="skill-card " data-action="skill2" aria-label="Seismic Drive, tombol O"><span class="skill-art"><img src="assets/ui/skill2.webp" alt=""><span class="cooldown-wipe" aria-hidden="true"></span><kbd>O</kbd></span><span class="skill-name">SEISMIC DRIVE</span></button>
<button class="skill-card ultimate" data-action="ultimate" aria-label="Helios Squadron, tombol P"><span class="skill-art"><img src="assets/ui/squadron-icon.webp" alt=""><span class="cooldown-wipe" aria-hidden="true"></span><kbd>P</kbd></span><span class="skill-name">HELIOS SQUADRON</span></button>
</div></section><div class="stage-sign"><span id="stage-name">BELLORA</span><small id="stage-subtitle">COURTYARD</small><i></i></div><section class="training-data" aria-label="Hasil latihan"><div><span>TOTAL DAMAGE</span><strong id="total-damage">0 <small>DMG</small></strong></div><div><span>BEST CHAIN</span><strong id="best-combo">0 <small>HITS</small></strong></div><small class="reset-hint">R · RESET<span>ESC · PAUSE</span></small></section></footer>
<section id="touch-controls" aria-hidden="true"><div class="dpad"><button class="dbtn dbtn-up" data-key="w" tabindex="-1" aria-label="Atas / lompat"><i></i></button><button class="dbtn dbtn-left" data-key="a" tabindex="-1" aria-label="Kiri"><i></i></button><button class="dbtn dbtn-down" data-key="s" tabindex="-1" aria-label="Bawah / jongkok"><i></i></button><button class="dbtn dbtn-right" data-key="d" tabindex="-1" aria-label="Kanan"><i></i></button></div><div class="action-pad"><button class="tbtn tbtn-attack" data-key=" " data-slot="attack" tabindex="-1"><img src="assets/ui/attack.webp" alt=""></button><button class="tbtn tbtn-skill tbtn-s1" data-key="i" data-slot="skill1" tabindex="-1"><img src="assets/ui/skill1.webp" alt=""><span class="cooldown-wipe"></span><em class="cooldown-num"></em></button><button class="tbtn tbtn-skill tbtn-s2" data-key="o" data-slot="skill2" tabindex="-1"><img src="assets/ui/skill2.webp" alt=""><span class="cooldown-wipe"></span><em class="cooldown-num"></em></button><button class="tbtn tbtn-skill tbtn-ult" data-key="p" data-slot="ultimate" tabindex="-1"><img src="assets/ui/squadron-icon.webp" alt=""><span class="cooldown-wipe"></span><em class="cooldown-num"></em></button></div></section>
<div id="load-state" class="load-state"><span class="loading-glyph">✦</span><strong>AETHER CLASH</strong><span id="load-message">Menyiapkan arena…</span></div>
<dialog id="settings-panel"><div class="dialog-kicker">AETHER CLASH / SETTINGS</div><h2>Pengaturan arena</h2><p>Atur audio, tampilan, dan kontrol permainan.</p><label class="setting-row training-only"><span>Karakter pemain<small>Mengganti karakter memulai ulang latihan</small></span><select id="character-select"><option value="arco">ARCO · Mecha</option><option value="fenr">FENR · Demi-Human</option><option value="mira">MIRA · Mecha</option><option value="cora">CORA · Demi-Human</option><option value="naja">NAJA · Demi-Human</option><option value="haldor">HALDOR · Mecha</option><option value="zanni">ZANNI · Mecha</option><option value="isolde">ISOLDE · Mecha</option><option value="rhea">RHEA · Mecha</option><option value="solan">SOLAN · Demi-Human</option><option value="browo">BRO WO · Human</option><option value="ethanolman">ETHANOL MAN · Human</option><option value="sonofsolo">SON OF SOLO MAN · Human</option><option value="megachan">MEGA CHAN · Human</option><option value="nib">NIB · Demi-Human</option><option value="edda">EDDA · Demi-Human</option></select></label><label class="setting-row training-only"><span>Lawan aktif<small>Aktifkan serangan CPU saat latihan</small></span><input type="checkbox" id="ai-toggle" checked></label><label class="setting-row"><span>Visualisasi hitbox<small>Area tubuh dan jangkauan serangan</small></span><input type="checkbox" id="hitbox-toggle"></label><label class="setting-row"><span>Audio aktif<small>Suara karakter, benturan, dan skill</small></span><input type="checkbox" id="sound-toggle" checked></label><label class="setting-row"><span>Musik latar<small>Midday Showdown, diputar berulang di menu dan arena</small></span><input type="checkbox" id="music-toggle" checked></label><label class="volume-row"><span>Musik</span><input type="range" id="music-slider" min="0" max="100" value="5" aria-label="Volume musik"><output id="music-value">5%</output></label><label class="setting-row"><span>Animasi latar menu<small>Video loop pada main menu</small></span><input type="checkbox" id="menu-video-toggle" checked></label><label class="volume-row"><span>Suara</span><input type="range" id="volume-slider" min="0" max="100" value="45" aria-label="Volume audio"><output id="volume-value">45%</output></label><div class="dialog-buttons"><button id="sound-test">Tes audio</button><button id="fullscreen-btn">Layar penuh</button></div><details class="controls-help"><summary>Kontrol keyboard</summary><p>A / D · Gerak &nbsp; 2× A / D · Lari<br>W · Lompat &nbsp; S · Menunduk / turun cepat<br>2× S · Salto &nbsp; SPACE · Kombo 3 pukulan<br>I / O · Skill &nbsp; P · Ultimate</p></details><button class="primary-button" id="close-settings">Kembali ke arena <span>↗</span></button></dialog>
<dialog id="pause-panel"><div class="dialog-kicker">AETHER CLASH / PAUSE</div><h2>PAUSED</h2><p>Pertarungan dijeda. Siap melanjutkan?</p><button class="primary-button" id="resume-btn">Lanjut bertarung <span>↗</span></button><button class="text-button" id="restart-btn">Mulai ulang</button><button class="text-button" id="back-menu">Kembali ke main menu</button></dialog>
</main><section id="front-menu" aria-label="Main menu Aether Clash"></section><script src="assets/mecha/manifest.js"></script><script src="assets/stage-config.js"></script><script src="assets/ui/drone-config.js"></script><script src="assets/fenr/human/manifest.js"></script><script src="assets/fenr/wolf/manifest.js"></script><script src="fenr.js"></script><script src="assets/mira/manifest.js"></script><script src="mira.js"></script><script src="assets/cora/manifest.js"></script><script src="cora.js"></script><script src="assets/naja/manifest.js"></script><script src="naja.js"></script><script src="assets/haldor/manifest.js"></script><script src="haldor.js"></script><script src="assets/zanni/manifest.js"></script><script src="zanni.js"></script><script src="assets/isolde/manifest.js"></script><script src="isolde.js"></script><script src="assets/rhea/manifest.js"></script><script src="rhea.js"></script><script src="assets/solan/manifest.js"></script><script src="solan.js"></script><script src="assets/browo/manifest.js"></script><script src="browo.js"></script><script src="assets/nib/manifest.js"></script><script src="nib.js"></script><script src="assets/edda/manifest.js"></script><script src="edda.js"></script><script src="assets/megachan/manifest.js"></script><script src="assets/sonofsolo/manifest.js"></script><script src="assets/ethanolman/manifest.js"></script><script src="assets/audio/announcer/manifest.js"></script><script src="announcer.js"></script><script src="match.js"></script><script>window.FRONTEND_ENABLED=true;</script><script src="game.js"></script><script src="touch.js"></script><script src="assets/showcase/showcase.js"></script><script src="menu.js"></script></body></html>