Better design

author: Yuval Adam <_@yuv.al> 2025-03-03 11:56:22 +0100
committer: Yuval Adam <_@yuv.al> 2025-03-03 11:56:22 +0100
commit: e67e9f324894a79592bab6947583f97da3c8a35b (patch)
tree: 6c62b93cc1a390ce7cb0fab243cad80002b4cda3
parent: d4821fb9be6d06a3b54a5b7174f71998c473531c (diff)
1 files changed, 193 insertions, 47 deletions
diff --git a/index.html b/index.html
index 9433a8d..8d0f905 100644
--- a/index.html
+++ b/index.html
@@ -4,75 +4,167 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Morse Code Game</title>
+    <title>Morse Hero</title>
     <script src="https://cwjs.mastercw.com/cw.min.js"></script>
     <style>
         body {
-            font-family: Arial, sans-serif;
-            max-width: 600px;
+            font-family: 'Fredoka One', 'Baloo', 'Arial Rounded MT Bold', sans-serif;
+            max-width: 800px;
             margin: 0 auto;
             padding: 20px;
             text-align: center;
+            background-color: #1e2a3a;
+            color: #fff;
+            font-size: 20px;
+            background-image: linear-gradient(45deg, #1e2a3a 0%, #2c3e50 100%);
+        }
+
+        h1 {
+            color: #f39c12;
+            text-shadow:
+                0 0 10px rgba(243, 156, 18, 0.7),
+                3px 3px 0px #e74c3c;
+            font-size: 4em;
+            margin-bottom: 30px;
+            letter-spacing: 2px;
         }
 
         .game-container {
-            background-color: #f0f0f0;
-            border-radius: 10px;
-            padding: 20px;
-            margin-bottom: 20px;
+            background-color: #34495e;
+            border-radius: 25px;
+            padding: 35px;
+            margin-bottom: 30px;
+            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3),
+                0 0 20px rgba(243, 156, 18, 0.3);
+            border: 5px solid #3498db;
         }
 
         .options {
             display: grid;
             grid-template-columns: 1fr 1fr;
-            gap: 10px;
-            margin-top: 20px;
+            gap: 25px;
+            margin-top: 35px;
         }
 
         button {
-            padding: 10px;
-            font-size: 16px;
             cursor: pointer;
+            font-family: 'Fredoka One', 'Baloo', 'Arial Rounded MT Bold', sans-serif;
+            transition: all 0.3s ease;
+            font-weight: bold;
+            letter-spacing: 1px;
+            text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.3);
         }
 
-        .play-button {
-            background-color: #4CAF50;
+        .start-button {
+            background-color: #e74c3c;
             color: white;
             border: none;
-            border-radius: 5px;
-            padding: 10px 20px;
-            margin-bottom: 20px;
+            border-radius: 50px;
+            padding: 25px 50px;
+            font-size: 32px;
+            margin: 30px 0;
+            box-shadow: 0 8px 0 #c0392b,
+                0 0 20px rgba(231, 76, 60, 0.4);
+            text-transform: uppercase;
         }
 
-        .start-button {
-            background-color: #FF9800;
-            color: white;
-            border: none;
-            border-radius: 5px;
-            padding: 15px 30px;
-            font-size: 18px;
-            margin: 20px 0;
+        .start-button:hover {
+            background-color: #f45c4c;
+            transform: translateY(-5px);
+            box-shadow: 0 13px 0 #c0392b,
+                0 0 30px rgba(231, 76, 60, 0.6);
+        }
+
+        .start-button:active {
+            transform: translateY(3px);
+            box-shadow: 0 5px 0 #c0392b;
         }
 
         .option-button {
-            background-color: #2196F3;
+            background-color: #3498db;
             color: white;
             border: none;
-            border-radius: 5px;
+            border-radius: 20px;
+            font-size: 36px;
+            padding: 25px 15px;
+            box-shadow: 0 8px 0 #2980b9,
+                0 0 15px rgba(52, 152, 219, 0.5);
+            min-height: 120px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
         }
 
-        .feedback {
-            height: 20px;
-            margin-top: 20px;
-            font-weight: bold;
+        .option-button:hover {
+            background-color: #4aa3df;
+            transform: translateY(-5px);
+            box-shadow: 0 13px 0 #2980b9,
+                0 0 25px rgba(52, 152, 219, 0.7);
+        }
+
+        .option-button:active {
+            transform: translateY(3px);
+            box-shadow: 0 5px 0 #2980b9;
+        }
+
+        .option-button.correct {
+            background-color: #2ecc71;
+            box-shadow: 0 8px 0 #27ae60,
+                0 0 30px rgba(46, 204, 113, 0.8);
+            animation: pulse-green 0.5s infinite alternate;
+        }
+
+        .option-button.incorrect {
+            background-color: #e74c3c;
+            box-shadow: 0 8px 0 #c0392b,
+                0 0 30px rgba(231, 76, 60, 0.8);
+            animation: shake 0.5s;
+        }
+
+        @keyframes pulse-green {
+            from {
+                box-shadow: 0 8px 0 #27ae60, 0 0 20px rgba(46, 204, 113, 0.8);
+            }
+
+            to {
+                box-shadow: 0 8px 0 #27ae60, 0 0 40px rgba(46, 204, 113, 1);
+            }
         }
 
-        .correct {
-            color: green;
+        @keyframes shake {
+
+            0%,
+            100% {
+                transform: translateX(0);
+            }
+
+            20%,
+            60% {
+                transform: translateX(-10px);
+            }
+
+            40%,
+            80% {
+                transform: translateX(10px);
+            }
         }
 
-        .incorrect {
-            color: red;
+        .feedback {
+            height: 40px;
+            margin-top: 30px;
+            font-weight: bold;
+            font-size: 28px;
+            color: #f39c12;
+            text-shadow: 0 0 10px rgba(243, 156, 18, 0.5);
+        }
+
+        .score {
+            font-size: 32px;
+            font-weight: bold;
+            color: #f39c12;
+            margin-bottom: 30px;
+            text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.3),
+                0 0 10px rgba(243, 156, 18, 0.3);
         }
 
         #gameArea {
@@ -81,21 +173,66 @@
 
         #startScreen {
             margin: 50px 0;
+            background-color: #34495e;
+            padding: 40px;
+            border-radius: 25px;
+            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3),
+                0 0 20px rgba(231, 76, 60, 0.3);
+            border: 5px dashed #e74c3c;
+        }
+
+        #startScreen p {
+            font-size: 26px;
+            margin-bottom: 40px;
+            color: #fff;
+            line-height: 1.5;
+            text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
+        }
+
+        select {
+            padding: 15px 25px;
+            font-size: 24px;
+            border-radius: 15px;
+            border: 3px solid #3498db;
+            background-color: #2c3e50;
+            color: #fff;
+            font-family: 'Fredoka One', 'Baloo', 'Arial Rounded MT Bold', sans-serif;
+            cursor: pointer;
+            box-shadow: 0 0 15px rgba(52, 152, 219, 0.3);
+        }
+
+        .settings {
+            background-color: #34495e;
+            padding: 25px;
+            border-radius: 20px;
+            margin-top: 30px;
+            font-size: 24px;
+            border: 3px solid #3498db;
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2),
+                0 0 15px rgba(52, 152, 219, 0.3);
+        }
+
+        .settings label {
+            font-size: 24px;
+            margin-right: 15px;
+            color: #3498db;
+            font-weight: bold;
+            text-shadow: 0 0 10px rgba(52, 152, 219, 0.3);
         }
     </style>
 </head>
 
 <body>
-    <h1>Morse Code Game</h1>
+    <h1>Morse Hero</h1>
 
     <div id="startScreen">
-        <p>Click the button below to start the game and initialize audio</p>
+        <p>Learn Morse code the fun way! Listen to the sound and pick the correct character.</p>
         <button id="startButton" class="start-button">Start Game</button>
     </div>
 
     <div id="gameArea">
         <div class="game-container">
-            <div>Score: <span id="score">0</span> / <span id="total">0</span></div>
+            <div class="score">Score: <span id="score">0</span> / <span id="total">0</span></div>
 
             <div class="options">
                 <button class="option-button" id="option1"></button>
@@ -107,12 +244,14 @@
             <div class="feedback" id="feedback"></div>
         </div>
 
-        <div>
+        <div class="settings">
             <label for="wpmSelect">Speed:</label>
             <select id="wpmSelect">
                 <option value="10">10 WPM</option>
                 <option value="15">15 WPM</option>
                 <option value="20" selected>20 WPM</option>
+                <option value="25">25 WPM</option>
+                <option value="30">30 WPM</option>
             </select>
         </div>
     </div>
@@ -171,7 +310,7 @@
 
             optionButtons.forEach(button => {
                 button.addEventListener('click', function () {
-                    checkAnswer(button.textContent);
+                    checkAnswer(button);
                 });
             });
 
@@ -182,11 +321,11 @@
             function newRound() {
                 // Clear feedback
                 feedbackElement.textContent = '';
-                feedbackElement.className = 'feedback';
 
-                // Enable all option buttons
+                // Reset all buttons to default state
                 optionButtons.forEach(button => {
                     button.disabled = false;
+                    button.classList.remove('correct', 'incorrect');
                 });
 
                 // Generate a random character
@@ -227,7 +366,7 @@
             }
 
             // Check the user's answer
-            function checkAnswer(selectedChar) {
+            function checkAnswer(selectedButton) {
                 // Disable all buttons
                 optionButtons.forEach(button => {
                     button.disabled = true;
@@ -236,16 +375,23 @@
                 totalPlayed++;
                 totalElement.textContent = totalPlayed;
 
+                const selectedChar = selectedButton.textContent;
+
                 if (selectedChar === currentChar) {
                     // Correct answer
                     score++;
                     scoreElement.textContent = score;
-                    feedbackElement.textContent = 'Correct!';
-                    feedbackElement.className = 'feedback correct';
+                    selectedButton.classList.add('correct');
                 } else {
-                    // Wrong answer
-                    feedbackElement.textContent = 'Wrong! The correct answer was ' + currentChar;
-                    feedbackElement.className = 'feedback incorrect';
+                    // Wrong answer - mark selected button as incorrect
+                    selectedButton.classList.add('incorrect');
+
+                    // Find and highlight the correct button
+                    optionButtons.forEach(button => {
+                        if (button.textContent === currentChar) {
+                            button.classList.add('correct');
+                        }
+                    });
                 }
 
                 // Start a new round after a delay
author	Yuval Adam <_@yuv.al>	2025-03-03 11:56:22 +0100
committer	Yuval Adam <_@yuv.al>	2025-03-03 11:56:22 +0100
commit	e67e9f324894a79592bab6947583f97da3c8a35b (patch)
tree	6c62b93cc1a390ce7cb0fab243cad80002b4cda3
parent	d4821fb9be6d06a3b54a5b7174f71998c473531c (diff)