AliceDarkest
70 lines
2.9 KiB
HTML
70 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de" data-theme="dark" xmlns:th="http://www.thymeleaf.org">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>MindMatch – SysnaptiK Neural</title>
|
||
<link rel="stylesheet" href="/css/theme.css?v=3">
|
||
<script src="/js/theme.js?v=3"></script>
|
||
<link rel="stylesheet" href="/css/mindmatch.css?v=5">
|
||
</head>
|
||
<body class="mm-body">
|
||
|
||
<!-- Feste Viewport-Höhe, kein Scrollen: Kopf + Leiste oben, Brett füllt den Rest. -->
|
||
<div class="mm-shell">
|
||
|
||
<header class="mm-header">
|
||
<a href="/dashboard" class="mm-back">⟵ Dashboard</a>
|
||
<h1 class="mm-title">MindMatch</h1>
|
||
<div class="mm-header-tools">
|
||
<button type="button" class="mf-theme"></button>
|
||
<form th:action="@{/logout}" method="post" style="display:inline">
|
||
<button type="submit" class="mf-iconbtn" aria-label="Abmelden" title="Abmelden" style="color:var(--danger)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9"/></svg></button>
|
||
</form>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Kompakte Leiste: Steuerung links, Werte rechts -->
|
||
<div class="mm-bar">
|
||
<div class="mm-bar-group">
|
||
<label class="mm-field">
|
||
<span>Deck</span>
|
||
<select id="mm-deck"></select>
|
||
</label>
|
||
<button type="button" id="mm-new" class="mm-btn">Neues Spiel</button>
|
||
<button type="button" id="mm-cancel" class="mm-btn mm-btn-cancel" hidden>Spiel abbrechen</button>
|
||
</div>
|
||
|
||
<div class="mm-bar-group mm-hud" aria-live="polite">
|
||
<span class="mm-stat">Züge <b id="mm-moves">0</b></span>
|
||
<span class="mm-stat">Zeit <b id="mm-time">0:00</b></span>
|
||
<span class="mm-stat">Paare <b id="mm-pairs">0 / 0</b></span>
|
||
<span class="mm-stat">Bestwert <b id="mm-best">–</b></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Spielfeld: füllt den verbleibenden Platz, kein Scrollen -->
|
||
<main class="mm-stage">
|
||
<section id="mm-board" class="mm-board" aria-label="Spielfeld"></section>
|
||
</main>
|
||
</div>
|
||
|
||
<!-- Ergebnis-Overlay -->
|
||
<div id="mm-result" class="mm-result" hidden>
|
||
<div class="mm-result-card">
|
||
<h2 id="mm-result-title">Geschafft! 🎉</h2>
|
||
<p id="mm-result-stars" class="mm-stars"></p>
|
||
<p class="mm-result-score">Score: <strong id="mm-result-score">0</strong></p>
|
||
<p id="mm-result-detail" class="mm-result-detail"></p>
|
||
<p id="mm-result-highscore" class="mm-result-highscore" hidden>🏆 Neuer Bestwert!</p>
|
||
<div class="mm-result-actions">
|
||
<button type="button" id="mm-again" class="mm-btn">Nochmal</button>
|
||
<a href="/dashboard" class="mm-btn mm-btn-secondary">Zurück zum Dashboard</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="/js/mindmatch.js?v=3" defer></script>
|
||
</body>
|
||
</html>
|