froxxxy/bscscore
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor: Extract common button styles and improve code organization

Browse Source
This commit is contained in:
Frank Schwenk
2025-04-08 19:47:06 +02:00
parent 34849291c3
commit 24d78cdfe1
1 changed files with 18 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
index.html
View File

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