AliceDarkest
88 lines
3.8 KiB
HTML
88 lines
3.8 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>Dev Lab Spiel – Mindflux</title>
|
||
<link rel="stylesheet" href="/css/theme.css">
|
||
<script src="/js/theme.js"></script>
|
||
<link rel="stylesheet" href="/css/devlabgame.css?v=4">
|
||
</head>
|
||
<body class="dlg-body" th:attr="data-game=${gameSlug}">
|
||
<div class="dlg-shell">
|
||
<header class="dlg-header">
|
||
<a href="/devlab" class="dlg-back">⟵ Dev Lab</a>
|
||
<div class="dlg-head-title">
|
||
<p id="dlg-language" class="mf-eyebrow">Dev Lab</p>
|
||
<h1 id="dlg-title">Spiel wird geladen…</h1>
|
||
</div>
|
||
<div class="dlg-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>
|
||
|
||
<div class="dlg-bar">
|
||
<div class="dlg-bar-group">
|
||
<span class="dlg-stat">Aufgabe <b id="dlg-task-no">– / –</b></span>
|
||
<span class="dlg-stat">Punkte <b id="dlg-score">0</b></span>
|
||
<span class="dlg-stat">Zeit <b id="dlg-time">0:00</b></span>
|
||
<span class="dlg-stat">Bestwert <b id="dlg-best">–</b></span>
|
||
</div>
|
||
<div class="dlg-bar-group">
|
||
<span id="dlg-mech" class="mf-badge">–</span>
|
||
</div>
|
||
</div>
|
||
|
||
<main class="dlg-stage">
|
||
<section class="dlg-card">
|
||
<div class="dlg-card-head">
|
||
<span id="dlg-kind" class="mf-badge">Aufgabe</span>
|
||
<span id="dlg-points" class="dlg-points">100</span>
|
||
</div>
|
||
<h2 id="dlg-prompt"></h2>
|
||
<p id="dlg-narrative" class="dlg-narrative"></p>
|
||
<p id="dlg-instruction" class="dlg-instruction"></p>
|
||
<div id="dlg-playfield" class="dlg-playfield"></div>
|
||
<p id="dlg-feedback" class="dlg-feedback" aria-live="polite"></p>
|
||
<p id="dlg-success" class="dlg-success" hidden></p>
|
||
<div class="dlg-actions">
|
||
<button id="dlg-check" class="mf-btn" type="button">Prüfen</button>
|
||
<button id="dlg-hint" class="mf-btn ghost" type="button">Hinweis</button>
|
||
<button id="dlg-reveal" class="mf-btn outline" type="button" hidden>Auflösung</button>
|
||
<button id="dlg-next" class="mf-btn" type="button" hidden>Weiter</button>
|
||
</div>
|
||
</section>
|
||
|
||
<aside class="dlg-side mf-panel accent">
|
||
<h2 id="dlg-side-title">Mission Log</h2>
|
||
<p id="dlg-description" class="dlg-description"></p>
|
||
<div class="dlg-progress">
|
||
<span>Fortschritt</span>
|
||
<div class="mf-bar"><i id="dlg-progress" style="width:0"></i></div>
|
||
</div>
|
||
<p id="dlg-best-line" class="dlg-best"></p>
|
||
</aside>
|
||
</main>
|
||
</div>
|
||
|
||
<div id="dlg-result" class="dlg-overlay" hidden>
|
||
<div class="dlg-result-card">
|
||
<h2>Disziplin abgeschlossen 🎉</h2>
|
||
<p id="dlg-result-stars" class="dlg-result-stars">★★★</p>
|
||
<p class="dlg-result-score">Score: <strong id="dlg-result-score">0</strong> / <span id="dlg-result-max">0</span></p>
|
||
<p id="dlg-result-detail" class="dlg-result-detail"></p>
|
||
<p id="dlg-result-high" class="dlg-result-high" hidden>🏆 Neuer Bestwert!</p>
|
||
<div class="dlg-result-actions">
|
||
<button id="dlg-again" class="mf-btn" type="button">Nochmal</button>
|
||
<a href="/devlab" class="mf-btn outline">Zur Spielsammlung</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="/js/devlabgame.js?v=3" defer></script>
|
||
</body>
|
||
</html>
|