Added chess board specification (number and cahracters), aswell as a detail view for the damen

app/static/css/dashboard.css

@@ -45,13 +45,28 @@ body {
 }
 
 /* ♟️ Board */
-.board {
+.board-grid {
     display: grid;
-    grid-template-columns: repeat(8, 60px);
+    grid-template-columns: 30px repeat(8, 60px);
+    grid-template-rows: 30px repeat(8, 60px);
     margin: 20px auto;
-    width: 480px;
+    width: max-content;
+    border: 6px solid #1e293b;
+    border-radius: 10px;
+    overflow: hidden;
 }
 
+.label {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    background: #aec8eb;
+    color: #1e293b;
+}
+
+
+
 .cell {
     width: 60px;
     height: 60px;
@@ -114,3 +129,15 @@ body {
 .btn.danger:hover {
     background: #dc2626;
 }
+
+#queenList {
+    list-style: none;
+    padding: 0;
+}
+
+#queenList li {
+    padding: 5px;
+    background: #f1f5f9;
+    margin: 4px 0;
+    border-radius: 6px;
+}

app/templates/dashboard.html

@@ -90,32 +90,59 @@
 
         function drawBoard() {
             boardDiv.innerHTML = "";
-            const conflicts = getConflicts();
+            boardDiv.className = "board-grid";
 
-            for (let row = 0; row < 8; row++) {
-                for (let col = 0; col < 8; col++) {
+            const conflicts = getConflicts();
+            const letters = ["A", "B", "C", "D", "E", "F", "G", "H"];
+
+            for (let row = -1; row < 8; row++) {
+                for (let col = -1; col < 8; col++) {
 
                     const cell = document.createElement("div");
-                    cell.classList.add("cell");
 
-                    if ((row + col) % 2 === 0) {
-                        cell.classList.add("white");
-                    } else {
-                        cell.classList.add("black");
+                    // 🔹 Ecke oben links
+                    if (row === -1 && col === -1) {
+                        cell.classList.add("label");
                     }
 
-                    if (board[row] === col) {
-                        cell.textContent = "♛";
+                    // 🔹 Buchstaben (oben)
+                    else if (row === -1) {
+                        cell.textContent = letters[col];
+                        cell.classList.add("label");
+                    }
 
-                        if (conflicts.some(([r, c]) => r === row && c === col)) {
-                            cell.classList.add("invalid");
+                    // 🔹 Zahlen (links)
+                    else if (col === -1) {
+                        cell.textContent = 8 - row;
+                        cell.classList.add("label");
+                    }
+
+                    // 🔹 echtes Spielfeld
+                    else {
+                        cell.classList.add("cell");
+
+                        if ((row + col) % 2 === 0) {
+                            cell.classList.add("white");
+                        } else {
+                            cell.classList.add("black");
                         }
+
+                        if (board[row] === col) {
+                            cell.textContent = "♛";
+
+                            if (conflicts.some(([r, c]) => r === row && c === col)) {
+                                cell.classList.add("invalid");
+                            }
+                        }
+
+                        cell.onclick = () => placeQueen(row, col);
                     }
 
-                    cell.onclick = () => placeQueen(row, col);
                     boardDiv.appendChild(cell);
                 }
             }
+
+            updateQueenList();
         }
 
         function placeQueen(row, col) {
@@ -125,6 +152,7 @@
                 board[row] = col;
             }
             drawBoard();
+            updateQueenList();
         }
 
         async function solve() {
@@ -138,11 +166,43 @@
         function resetBoard() {
             board = Array(8).fill(-1);
             drawBoard();
+            updateQueenList();
         }
 
         drawBoard();
     </script>
 
+    <div class="card">
+        <h3>📋 Damen Positionen</h3>
+        <ul id="queenList"></ul>
+    </div>
+
+    <script>
+        function updateQueenList() {
+            const list = document.getElementById("queenList");
+            list.innerHTML = "";
+
+            const letters = ["A", "B", "C", "D", "E", "F", "G", "H"];
+
+            let count = 1;
+
+            for (let row = 0; row < 8; row++) {
+                if (board[row] !== -1) {
+                    let col = board[row];
+
+                    let pos = letters[col] + (8 - row);
+
+                    const li = document.createElement("li");
+                    li.textContent = `Dame ${count}: ${pos}`;
+
+                    list.appendChild(li);
+                    count++;
+                }
+            }
+        }
+
+    </script>
+
 </body>
 
 </html>