118 lines
4.3 KiB
HTML
118 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Dashboard</title>
|
|
|
|
<link rel="stylesheet" href="../static/css/dashboard.css">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- 🔝 Navbar -->
|
|
<nav class="navbar">
|
|
<div class="nav-left">♛ 8-Queens App</div>
|
|
<div class="nav-right">
|
|
<a href="{{ url_for('main.dashboard') }}">Dashboard</a>
|
|
<a href="{{ url_for('login.logout') }}">Logout</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- 📦 Container -->
|
|
<div class="container">
|
|
|
|
<!-- 👤 User Card -->
|
|
<div class="card">
|
|
<h2>👋 Willkommen, {{ current_user.username }}</h2>
|
|
|
|
<div class="user-info">
|
|
<p><strong>ID:</strong> {{ current_user.id }}</p>
|
|
<p><strong>Username:</strong> {{ current_user.username }}</p>
|
|
|
|
{% if current_user.email %}
|
|
<p><strong>Email:</strong> {{ current_user.email }}</p>
|
|
{% else %}
|
|
<p><strong>Email:</strong> Not set</p>
|
|
{% endif %}
|
|
|
|
<p><strong>Erstellt:</strong> {{ current_user.created_at }}</p>
|
|
</div>
|
|
|
|
<form action="{{ url_for('login.logout') }}" method="post">
|
|
<button class="btn danger" type="submit">Logout</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="mode-switch">
|
|
<button class="btn active" onclick="setMode('queens')" id="btnQueens">♛ Damen</button>
|
|
<button class="btn secondary" onclick="setMode('rooks')" id="btnRooks">♜ Türme</button>
|
|
<button class="btn secondary" onclick="toggleSidebar()" id="btnSidebar">Board Settings</button>
|
|
</div>
|
|
|
|
|
|
<!-- ♟️ Game Card -->
|
|
<div class="card game-card">
|
|
<h2>♟️ Damen- und Tuerme-Spiel</h2>
|
|
<p class="board-size-info">Aktuelle Brettgroesse: <span id="boardSizeValue">8</span> x <span
|
|
id="boardSizeValueMirror">8</span></p>
|
|
|
|
<p id="statusMessage"></p>
|
|
<div class="board" id="board"></div>
|
|
|
|
<div class="controls">
|
|
<button class="btn" onclick="solve()">Solve</button>
|
|
<button class="btn" onclick="checkSolution()">Check</button>
|
|
<button class="btn secondary" onclick="resetBoard()">Reset</button>
|
|
|
|
<button class="btn" onclick="saveGame()">💾 Save</button>
|
|
<button class="btn" onclick="openSavePointsPanel()">📂 Load</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h3>📋 Figuren Positionen</h3>
|
|
<ul id="queenList"></ul>
|
|
</div>
|
|
</div>
|
|
|
|
<aside class="sidebar" id="settingsSidebar" aria-hidden="true">
|
|
<div class="sidebar-header">
|
|
<h3>Brettgroesse</h3>
|
|
<button class="btn secondary sidebar-close" onclick="toggleSidebar(false)" type="button">Schliessen</button>
|
|
</div>
|
|
|
|
<p>Wähle eine Grösse zwischen 4 und 13.</p>
|
|
|
|
<label class="sidebar-label" for="boardSizeInput">Groesse</label>
|
|
<input id="boardSizeInput" type="range" min="4" max="13" value="8" oninput="previewBoardSize(this.value)">
|
|
<div class="sidebar-size-row">
|
|
<strong><span id="sidebarBoardSizeValue">8</span> x <span id="sidebarBoardSizeValueMirror">8</span></strong>
|
|
</div>
|
|
|
|
<button class="btn" onclick="applyBoardSize()" type="button">Apply Size</button>
|
|
<p class="sidebar-hint">Das Brett wird beim Ändern zur Sicherheit zurückgesetzt.</p>
|
|
</aside>
|
|
|
|
<aside class="sidebar save-points-sidebar" id="savePointsSidebar" aria-hidden="true">
|
|
<div class="sidebar-header">
|
|
<h3>Save Points</h3>
|
|
<button class="btn secondary sidebar-close" onclick="toggleSavePointsPanel(false)" type="button">Schliessen</button>
|
|
</div>
|
|
|
|
<p>Waehle einen Speicherstand aus der Liste.</p>
|
|
<div class="save-points-list" id="savePointsList">
|
|
<p class="sidebar-hint">Noch keine Speicherstaende gefunden.</p>
|
|
</div>
|
|
</aside>
|
|
|
|
<div class="sidebar-backdrop" id="sidebarBackdrop" onclick="toggleSidebar(false)"></div>
|
|
<div class="sidebar-backdrop" id="savePointsBackdrop" onclick="toggleSavePointsPanel(false)"></div>
|
|
|
|
<script src="../static/js/dashboard.js"></script>
|
|
|
|
</body>
|
|
|
|
</html>
|