English Version, UI improve

Minemetero · Jun 4, 2024 · 900fb75 · 900fb75
1 parent 99c77a4
commit 900fb75
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 18 deletions.
diff --git a/index.html b/index.html
@@ -1,33 +1,33 @@
 <!DOCTYPE html>
-<html lang="zh-CN">
+<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>桌球计分系统</title>
+    <title>Pool Score Tracker</title>
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
     <div class="container">
-        <h1>桌球计分系统</h1>
+        <h1>Pool Score Tracker</h1>
         <div class="input-group">
-            <label for="winBalls">设定胜利球数: </label>
+            <label for="winBalls">Set Winning Balls: </label>
             <input type="number" id="winBalls" value="8" min="1">
         </div>
         <div class="player-group">
             <div class="player">
                 <label>Player 1: <span id="score1">0</span></label>
-                <button onclick="incrementScore(1)">得分</button>
+                <button class="score-button" onclick="incrementScore(1)">Score</button>
             </div>
             <div class="player">
                 <label>Player 2: <span id="score2">0</span></label>
-                <button onclick="incrementScore(2)">得分</button>
+                <button class="score-button" onclick="incrementScore(2)">Score</button>
             </div>
         </div>
         <div class="result-group">
             <p id="result"></p>
         </div>
         <div class="buttons">
-            <button onclick="resetScores()">重置</button>
+            <button class="reset-button" onclick="resetScores()">Reset</button>
         </div>
     </div>
     <script src="script.js"></script>

diff --git a/script.js b/script.js
@@ -4,7 +4,7 @@ let score2 = 0;
 function incrementScore(player) {
     const winBalls = parseInt(document.getElementById('winBalls').value);
     if (isNaN(winBalls) || winBalls <= 0) {
-        alert('请输入有效的胜利球数');
+        alert('Please enter a valid number of winning balls');
         return;
     }
     if (player === 1) {
@@ -25,7 +25,7 @@ function incrementScore(player) {
 }
 
 function disableButtons() {
-    document.querySelectorAll('.player button').forEach(button => {
+    document.querySelectorAll('.score-button').forEach(button => {
         button.disabled = true;
     });
 }
@@ -36,7 +36,7 @@ function resetScores() {
     document.getElementById('score1').innerText = score1;
     document.getElementById('score2').innerText = score2;
     document.getElementById('result').innerText = '';
-    document.querySelectorAll('.player button').forEach(button => {
+    document.querySelectorAll('.score-button').forEach(button => {
         button.disabled = false;
     });
 }
diff --git a/styles.css b/styles.css
@@ -1,29 +1,38 @@
 body {
     font-family: Arial, sans-serif;
-    background-color: #f0f0f0;
+    background-color: #2c3e50;
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;
     margin: 0;
+    color: #ecf0f1;
 }
 
 .container {
-    background-color: white;
+    background-color: #34495e;
     padding: 20px;
     border-radius: 8px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
     width: 300px;
     text-align: center;
 }
 
+h1 {
+    margin-bottom: 20px;
+}
+
 .input-group, .player-group, .result-group, .buttons {
     margin-bottom: 20px;
 }
 
 .input-group input {
     width: 50px;
     text-align: center;
+    padding: 5px;
+    border-radius: 5px;
+    border: none;
+    margin-left: 10px;
 }
 
 .player-group {
@@ -37,14 +46,32 @@ body {
     align-items: center;
 }
 
-.buttons button {
-    padding: 10px 20px;
-    font-size: 16px;
+.score-button, .reset-button {
+    padding: 15px 25px;
+    font-size: 18px;
     border: none;
     border-radius: 5px;
     cursor: pointer;
+    margin-top: 10px;
+    color: #2c3e50;
+    background-color: #ecf0f1;
+    transition: background-color 0.3s;
+}
+
+.score-button:hover, .reset-button:hover {
+    background-color: #bdc3c7;
+}
+
+.reset-button {
+    width: 100%;
+    background-color: #e74c3c;
+    color: #ecf0f1;
+}
+
+.reset-button:hover {
+    background-color: #c0392b;
 }
 
-.buttons button:hover {
-    background-color: #ddd;
+label {
+    font-size: 18px;
 }