diff options
| author | Yuval Adam <_@yuv.al> | 2025-03-03 13:12:12 +0100 |
|---|---|---|
| committer | Yuval Adam <_@yuv.al> | 2025-03-03 13:12:12 +0100 |
| commit | 7e1ab2906af3ce8b5e0f1fccc1402a4723588b10 (patch) | |
| tree | 94ee62ee65d403f63844ca7a14db609ba5a15439 | |
| parent | 5710c6e4664e7047b8f70ed9a82e977428006f95 (diff) | |
Add gradient and cleanup structure
| -rw-r--r-- | index.html | 87 |
1 files changed, 49 insertions, 38 deletions
@@ -15,14 +15,23 @@ <style> body { font-family: 'Fredoka One', 'Baloo', 'Arial Rounded MT Bold', sans-serif; + margin: 0; + padding: 0; + background: linear-gradient(135deg, #2c3e50 0%, #1a2530 100%); + color: white; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: 20px; + } + + .container { 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 { @@ -305,48 +314,50 @@ </head> <body> - <h1><a href="/" class="title-link">Morse Hero</a></h1> + <div class="container"> + <h1><a href="/" class="title-link">Morse Hero</a></h1> - <div id="startScreen"> - <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="startScreen"> + <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 class="score">Score: <span id="score">0</span> / <span id="total">0</span></div> + <div id="gameArea"> + <div class="game-container"> + <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> - <button class="option-button" id="option2"></button> - <button class="option-button" id="option3"></button> - <button class="option-button" id="option4"></button> - </div> + <div class="options"> + <button class="option-button" id="option1"></button> + <button class="option-button" id="option2"></button> + <button class="option-button" id="option3"></button> + <button class="option-button" id="option4"></button> + </div> - <div class="feedback" id="feedback"></div> - </div> + <div class="feedback" id="feedback"></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 class="hint-setting"> - <input type="checkbox" id="hintMode" name="hintMode"> - <label for="hintMode">Show Hints</label> + <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 class="hint-setting"> + <input type="checkbox" id="hintMode" name="hintMode"> + <label for="hintMode">Show Hints</label> + </div> </div> </div> - </div> - <footer class="footer"> - <p>Created with <a href="https://www.mastercw.com/cw.js/">CW.js</a>.</p> - <p>For a more complete and professional Morse Code training solution visit <a - href="https://www.mastercw.com">Master CW</a>.</p> - </footer> + <footer class="footer"> + <p>Created with <a href="https://www.mastercw.com/cw.js/">CW.js</a>.</p> + <p>For a more complete and professional Morse Code training solution visit <a + href="https://www.mastercw.com">Master CW</a>.</p> + </footer> + </div> <script> // Game variables |