Refactor: Extract common button styles and improve code organization
This commit is contained in:
39
index.html
39
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>
|
||||
|
||||
Reference in New Issue
Block a user