Refactor: Extract common button styles and improve code organization

This commit is contained in:
Frank Schwenk
2025-04-08 19:47:06 +02:00
parent 34849291c3
commit 24d78cdfe1

View File

@@ -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>