mindflux/src/main/resources/templates/devlab.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 - Mindflux</title>
  <link rel="stylesheet" href="/css/theme.css">
  <script src="/js/theme.js"></script>
  <link rel="stylesheet" href="/css/devlab.css?v=2">
</head>
<body class="dl-body">
  <div class="mf-shell no-right dl-shell">
    <aside class="mf-sidebar">
      <a th:href="@{/dashboard}" class="mf-logo">
        <span class="mark"></span>
        <span class="txt"><b>MINDFLUX</b><span>KNOWLEDGE. CODE. WIN.</span></span>
      </a>

      <nav class="mf-nav">
        <a th:href="@{/dashboard}">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></svg>
          Dashboard
        </a>
        <a th:href="@{/devlab}" class="active">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 2h6"/><path d="M10 2v6l-5 9a3 3 0 0 0 2.6 4.5h8.8A3 3 0 0 0 19 17l-5-9V2"/><path d="M8 15h8"/><path d="M9 18h6"/></svg>
          Dev Lab
        </a>
        <a th:href="@{/progress}">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 20V10M10 20V4M16 20v-8M22 20H2"/></svg>
          Statistiken
        </a>
      </nav>

      <div class="dl-lab-status mf-panel accent">
        <h4>Laborstatus</h4>
        <div class="mf-bar"><i style="width:42%"></i></div>
        <p>3 Trainingspfade · 12 Spiele · Konzept umgesetzt</p>
      </div>
    </aside>

    <header class="mf-topbar dl-topbar">
      <div class="mf-hello">
        <p class="mf-eyebrow">Entwicklerlabor</p>
        <h1>Dev Lab</h1>
        <p>Ein zentraler Hub für die Spiele aus Syntax, Debugging und visueller Praxis.</p>
      </div>
      <div class="mf-tools">
        <button type="button" class="mf-theme"></button>
        <a class="mf-iconbtn" href="/logout" aria-label="Logout" style="color:var(--danger)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9"/></svg></a>
      </div>
    </header>

    <main class="mf-main dl-main">
      <section class="dl-hero mf-panel accent">
        <div>
          <p class="mf-eyebrow">Dev-Lab-Ausbildungszentrum</p>
          <h2>Wähle einen Trainingspfad und starte ein Spiel.</h2>
          <p>Die Spiele sind nach Fähigkeit gruppiert: Syntax &amp; Grundlagen, Debugging &amp; Problemlösung sowie Praxis &amp; Visualisierung.</p>
        </div>
        <div class="dl-tube" aria-hidden="true">
          <svg viewBox="0 0 96 128" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
            <path d="M36 8h24"/>
            <path d="M42 8v36L19 91c-6 12 3 27 17 27h24c14 0 23-15 17-27L54 44V8"/>
            <path d="M31 87h34"/>
            <path d="M35 100h26"/>
            <path d="M34 69l-8 7 8 7"/>
            <path d="M62 69l8 7-8 7"/>
            <path d="M44 92l8-30"/>
          </svg>
          <span>{}</span><span>&lt;/&gt;</span><span>[]</span><span>0101</span>
        </div>
      </section>

      <section class="dl-workbench">
        <div class="dl-stations mf-panel">
          <div class="dl-panel-head">
            <h2>Trainingspfade</h2>
            <span class="mf-badge">3 Pfade</span>
          </div>
          <div id="dl-stations" class="dl-station-grid" aria-label="Trainingspfade"></div>
        </div>

        <aside class="dl-world mf-panel accent" aria-live="polite">
          <div class="dl-world-head">
            <span id="dl-world-icon" class="dl-world-icon">{}</span>
            <div>
              <p id="dl-world-type" class="mf-eyebrow">Grundlagenpfad</p>
              <h2 id="dl-world-title">Syntax &amp; Grundlagen</h2>
            </div>
          </div>
          <p id="dl-world-copy" class="dl-world-copy"></p>

          <div class="dl-progression">
            <div><span>Level</span><b id="dl-levels">0</b></div>
            <div><span>XP</span><b id="dl-xp">0</b></div>
            <div><span>Badge</span><b id="dl-badge">-</b></div>
          </div>

          <div class="dl-mechanics" id="dl-mechanics"></div>

          <div class="dl-panel-head dl-games-head">
            <h3>Spiele</h3>
            <span id="dl-game-count" class="mf-badge">0 Spiele</span>
          </div>
          <div id="dl-games" class="dl-game-list"></div>
        </aside>
      </section>
    </main>
  </div>

  <footer class="mf-footer">
    <a href="#">Support</a>
    <a href="#">Feedback</a>
    <a href="/nutzungsbedingungen">Nutzungsbedingungen</a>
    <a href="/richtlinien">Richtlinien</a>
    <a href="/datenschutz">Datenschutz</a>
    <a href="/impressum">Impressum</a>
  </footer>

  <script src="/js/devlab.js?v=4" defer></script>
</body>
</html>