From 24d78cdfe1500cb0db0d30792c4bad26cfa8f20d Mon Sep 17 00:00:00 2001
From: Frank Schwenk <frank@frank-schwenk.de>
Date: Tue, 8 Apr 2025 19:47:06 +0200
Subject: [PATCH] Refactor: Extract common button styles and improve code
 organization

---
 index.html | 39 ++++++++++++++++++---------------------
 1 file changed, 18 insertions(+), 21 deletions(-)
diff --git a/index.html b/index.html
index 1e1e13e..d2dd35e 100644
--- a/index.html
+++ b/index.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
+
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <meta name="mobile-web-app-capable" content="yes">
@@ -9,7 +10,9 @@
     <meta name="apple-mobile-web-app-title" content="BSC Score">
     <meta name="description" content="BSC Score - Pool Scoring App für den Billard Sport Club">
     <meta name="theme-color" content="#000000">
+
     <title>Pool Scoring</title>
+
     <style>
         /* Base styles */
         * {
@@ -49,7 +52,6 @@
             min-height: 100vh;
             display: none;
             opacity: 0;
-            transition: opacity 0.3s ease;
             transform: translateX(100%);
             transition: transform 0.3s ease, opacity 0.3s ease;
         }
@@ -105,11 +107,10 @@
             flex-wrap: wrap;
         }
 
-        .filter-button {
+        .btn {
             flex: 1;
             min-width: 100px;
             padding: 20px;
-            background: #333;
             color: white;
             border: none;
             border-radius: 0;
@@ -118,6 +119,10 @@
             touch-action: manipulation;
         }
 
+        .filter-button {
+            background: #333;
+        }
+
         .filter-button.active {
             background: #4CAF50;
         }
@@ -139,16 +144,7 @@
         }
 
         .data-button {
-            flex: 1;
-            min-width: 100px;
-            padding: 20px;
             background: #333;
-            color: white;
-            border: none;
-            border-radius: 0;
-            font-size: 20px;
-            cursor: pointer;
-            touch-action: manipulation;
         }
 
         .data-button.export {
@@ -1039,8 +1035,8 @@
                     </div>
                 </div>
                 <div class="nav-buttons">
-                    <button class="nav-button" onclick="createNewGame()">Spiel starten</button>
-                    <button class="nav-button" onclick="showScreen('game-list-screen')">Abbrechen</button>
+                    <button class="btn nav-button" onclick="createNewGame()">Spiel starten</button>
+                    <button class="btn nav-button" onclick="showScreen('game-list-screen')">Abbrechen</button>
                 </div>
             </div>
         </div>
@@ -1051,12 +1047,12 @@
                 <h1 class="screen-title">Spiele</h1>
                 <div class="game-list">
                     <div class="nav-buttons">
-                        <button class="nav-button" onclick="showScreen('new-game-screen')">Neues Spiel</button>
+                        <button class="btn nav-button" onclick="showScreen('new-game-screen')">Neues Spiel</button>
                     </div>
                     <div class="game-filters">
-                        <button class="filter-button active" onclick="filterGames('all')">Alle</button>
-                        <button class="filter-button" onclick="filterGames('active')">Aktiv</button>
-                        <button class="filter-button" onclick="filterGames('completed')">Abgeschlossen</button>
+                        <button class="btn filter-button active" onclick="filterGames('all')">Alle</button>
+                        <button class="btn filter-button" onclick="filterGames('active')">Aktiv</button>
+                        <button class="btn filter-button" onclick="filterGames('completed')">Abgeschlossen</button>
                     </div>
                     <div id="games-container">
                         <!-- Games will be added dynamically -->
@@ -1068,9 +1064,10 @@
         <!-- Game Detail Screen -->
         <div class="screen" id="game-detail-screen">
             <div class="screen-content">
+                <div class="game-title" id="game-title">8-Ball | Race to 5</div>
                 <div class="game-header">
-                    <div class="game-title" id="game-title">8-Ball | Race to 5</div>
-                    <button class="nav-button" onclick="showScreen('game-list-screen')">Zurück zur Liste</button>
+                    
+                    <button class="btn nav-button" onclick="showScreen('game-list-screen')">Zurück zur Liste</button>
                 </div>
                 <div class="scores-container">
                     <div class="player-score">
@@ -1110,7 +1107,7 @@
             <div class="screen-content">
                 <h1 class="screen-title">Spielhistorie</h1>
                 <div class="nav-buttons">
-                    <button class="nav-button" onclick="showScreen('game-list-screen')">Zurück zur Liste</button>
+                    <button class="btn nav-button" onclick="showScreen('game-list-screen')">Zurück zur Liste</button>
                 </div>
             </div>
         </div>
