Initial react migration

6 files changed, 1428 insertions, 28 deletions

diff --git a/morsehero/src/App.tsx b/morsehero/src/App.tsx
index 3d7ded3..1512713 100644
--- a/morsehero/src/App.tsx
+++ b/morsehero/src/App.tsx
@@ -1,34 +1,17 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
+import { BrowserRouter as Router, Routes, Route } from 'react-router'
+import HomePage from './pages/HomePage'
+import ChartPage from './pages/chart/ChartPage'
+import './base.css'
+import './styles.css'
 
 function App() {
-  const [count, setCount] = useState(0)
-
   return (
-    <>
-      <div>
-        <a href="https://vite.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
+    <Router>
+      <Routes>
+        <Route path="/" element={<HomePage />} />
+        <Route path="/chart" element={<ChartPage />} />
+      </Routes>
+    </Router>
   )
 }
 
diff --git a/morsehero/src/base.css b/morsehero/src/base.css
new file mode 100644
index 0000000..d5afb78
--- /dev/null
+++ b/morsehero/src/base.css
@@ -0,0 +1,183 @@
+/* Morse Hero Base Styles */
+:root {
+    --primary-color: #3498db;
+    --primary-dark: #2980b9;
+    --secondary-color: #f39c12;
+    --secondary-dark: #e67e22;
+    --accent-color: #e74c3c;
+    --accent-dark: #c0392b;
+    --success-color: #2ecc71;
+    --success-dark: #27ae60;
+    --bg-dark: #2c3e50;
+    --bg-darker: #1a2530;
+    --bg-light: #34495e;
+    --text-light: #ecf0f1;
+    --text-dim: rgba(255, 255, 255, 0.7);
+    --border-radius-sm: 12px;
+    --border-radius-md: 20px;
+    --border-radius-lg: 30px;
+    --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.1);
+    --shadow-md: 0 10px 20px rgba(0, 0, 0, 0.15);
+    --shadow-lg: 0 15px 30px rgba(0, 0, 0, 0.2);
+    --transition-fast: 0.2s ease;
+    --transition-normal: 0.3s ease;
+}
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: 'Poppins', 'Fredoka', sans-serif;
+    margin: 0;
+    padding: 0;
+    background: radial-gradient(ellipse at top, var(--bg-dark) 0%, var(--bg-darker) 100%);
+    color: var(--text-light);
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    line-height: 1.6;
+}
+
+.container {
+    max-width: 900px;
+    margin: 0 auto;
+    padding: 30px 20px;
+    text-align: center;
+    width: 100%;
+}
+
+h1 {
+    color: var(--secondary-color);
+    text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.3),
+        0 0 15px rgba(243, 156, 18, 0.5);
+    margin-bottom: 20px;
+    font-family: 'Fredoka', sans-serif;
+    font-weight: 600;
+    position: relative;
+    display: inline-block;
+}
+
+h1::after {
+    content: "";
+    position: absolute;
+    bottom: -10px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 60px;
+    height: 4px;
+    background: linear-gradient(90deg, var(--accent-color), var(--secondary-color));
+    border-radius: 2px;
+}
+
+button {
+    cursor: pointer;
+    font-family: 'Poppins', 'Fredoka', sans-serif;
+    transition: all var(--transition-normal);
+    font-weight: 600;
+    letter-spacing: 1px;
+    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);
+    border: none;
+    outline: none;
+    position: relative;
+    overflow: hidden;
+}
+
+button::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
+    opacity: 0;
+    transition: opacity var(--transition-fast);
+}
+
+button:hover::after {
+    opacity: 1;
+}
+
+.title-link {
+    color: inherit;
+    text-decoration: none;
+    transition: all var(--transition-normal);
+    position: relative;
+    display: inline-block;
+}
+
+.title-link:hover {
+    color: var(--secondary-color);
+    text-shadow: 0 0 15px rgba(243, 156, 18, 0.6);
+}
+
+.footer {
+    margin-top: 40px;
+    padding: 20px;
+    text-align: center;
+    font-size: 16px;
+    color: var(--text-dim);
+    width: 100%;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.footer a {
+    color: var(--primary-color);
+    text-decoration: none;
+    font-weight: bold;
+    transition: color var(--transition-normal);
+    position: relative;
+}
+
+.footer a::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    transform: scaleX(0);
+    height: 2px;
+    bottom: -2px;
+    left: 0;
+    background-color: var(--primary-color);
+    transform-origin: bottom right;
+    transition: transform 0.3s ease-out;
+}
+
+.footer a:hover {
+    color: var(--secondary-color);
+}
+
+.footer a:hover::after {
+    transform: scaleX(1);
+    transform-origin: bottom left;
+}
+
+/* Common Media Queries */
+@media (max-width: 768px) {
+    .container {
+        padding: 20px 15px;
+    }
+
+    h1 {
+        font-size: 36px;
+    }
+
+    button {
+        font-size: 16px;
+    }
+}
+
+@media (max-width: 480px) {
+    h1 {
+        font-size: 28px;
+    }
+
+    .container {
+        padding: 15px 10px;
+    }
+}
diff --git a/morsehero/src/pages/HomePage.tsx b/morsehero/src/pages/HomePage.tsx
new file mode 100644
index 0000000..e67a9a8
--- /dev/null
+++ b/morsehero/src/pages/HomePage.tsx
@@ -0,0 +1,302 @@
+import { useState, useEffect, useRef } from 'react';
+import { Link } from 'react-router';
+import '../base.css';
+import '../styles.css';
+
+declare global {
+  interface Window {
+    cw: any;
+  }
+}
+
+const HomePage = () => {
+  // Game variables
+  const [gameStarted, setGameStarted] = useState(false);
+  const [score, setScore] = useState(0);
+  const [totalPlayed, setTotalPlayed] = useState(0);
+  const [currentChar, setCurrentChar] = useState('');
+  const [feedback, setFeedback] = useState('');
+  const [options, setOptions] = useState<string[]>([]);
+  const [wpm, setWpm] = useState(20);
+  const [showHints, setShowHints] = useState(false);
+  
+  const actxRef = useRef<any>(null);
+  const optionButtonsRef = useRef<Array<HTMLButtonElement | null>>([null, null, null, null]);
+
+  // Define available characters
+  const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+  const numbers = '0123456789';
+  const specialChars = '.,?/=';
+  const allChars = letters + numbers + specialChars;
+
+  // Initialize the game when started
+  const startGame = () => {
+    try {
+      if (window.cw) {
+        actxRef.current = window.cw.initAudioContext({ tone: 600 });
+        setGameStarted(true);
+        newRound();
+      } else {
+        console.error('CW.js not loaded');
+        alert('Failed to initialize audio. Please try again.');
+      }
+    } catch (error) {
+      console.error('Failed to initialize audio context:', error);
+      alert('Failed to initialize audio. Please try again.');
+    }
+  };
+
+  // Generate a new round
+  const newRound = () => {
+    // Clear feedback
+    setFeedback('');
+
+    // Generate a random character
+    const randomIndex = Math.floor(Math.random() * allChars.length);
+    const newChar = allChars[randomIndex];
+    setCurrentChar(newChar);
+
+    // Generate options (one correct, three random)
+    let newOptions = [newChar];
+    
+    // Add three random unique characters
+    while (newOptions.length < 4) {
+      const randomChar = allChars[Math.floor(Math.random() * allChars.length)];
+      if (!newOptions.includes(randomChar)) {
+        newOptions.push(randomChar);
+      }
+    }
+    
+    // Shuffle options
+    newOptions = shuffleArray(newOptions);
+    setOptions(newOptions);
+
+    // Play the Morse code for the character
+    playMorseCode(newChar);
+  };
+
+  // Play Morse code for a character
+  const playMorseCode = (char: string) => {
+    if (actxRef.current) {
+      window.cw.playText({
+        text: char,
+        wpm: wpm,
+        audioContext: actxRef.current
+      });
+    }
+  };
+
+  // Check if the answer is correct
+  const checkAnswer = (selectedChar: string) => {
+    if (selectedChar === currentChar) {
+      // Correct answer
+      setFeedback('Correct!');
+      setScore(prevScore => prevScore + 1);
+      
+      // Add to score tracker
+      const scoreTracker = document.getElementById('scoreTracker');
+      if (scoreTracker) {
+        const marker = document.createElement('div');
+        marker.className = 'score-marker correct';
+        scoreTracker.appendChild(marker);
+      }
+      
+      // Disable all buttons
+      optionButtonsRef.current.forEach(button => {
+        if (button) button.disabled = true;
+      });
+      
+      // Highlight the correct button
+      const correctButtonIndex = options.indexOf(currentChar);
+      if (correctButtonIndex !== -1 && optionButtonsRef.current[correctButtonIndex]) {
+        const button = optionButtonsRef.current[correctButtonIndex];
+        if (button) button.classList.add('correct');
+      }
+      
+      // Move to next round after delay
+      setTimeout(newRound, 1500);
+    } else {
+      // Incorrect answer
+      setFeedback('Incorrect! The correct answer was ' + currentChar);
+      
+      // Add to score tracker
+      const scoreTracker = document.getElementById('scoreTracker');
+      if (scoreTracker) {
+        const marker = document.createElement('div');
+        marker.className = 'score-marker incorrect';
+        scoreTracker.appendChild(marker);
+      }
+      
+      // Disable all buttons
+      optionButtonsRef.current.forEach(button => {
+        if (button) button.disabled = true;
+      });
+      
+      // Highlight the incorrect button and show the correct one
+      const selectedButtonIndex = options.indexOf(selectedChar);
+      if (selectedButtonIndex !== -1 && optionButtonsRef.current[selectedButtonIndex]) {
+        const button = optionButtonsRef.current[selectedButtonIndex];
+        if (button) button.classList.add('incorrect');
+      }
+      
+      const correctButtonIndex = options.indexOf(currentChar);
+      if (correctButtonIndex !== -1 && optionButtonsRef.current[correctButtonIndex]) {
+        const button = optionButtonsRef.current[correctButtonIndex];
+        if (button) button.classList.add('correct');
+      }
+      
+      // Move to next round after delay
+      setTimeout(newRound, 2000);
+    }
+    
+    setTotalPlayed(prevTotal => prevTotal + 1);
+  };
+
+  // Handle keyboard input
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (!gameStarted) return;
+      
+      const key = event.key.toUpperCase();
+      
+      // Find if any button has this character
+      const index = options.findIndex(option => option === key);
+      if (index !== -1) {
+        const button = optionButtonsRef.current[index];
+        if (button && !button.disabled) {
+          button.classList.add('key-pressed');
+          setTimeout(() => {
+            button.classList.remove('key-pressed');
+            checkAnswer(key);
+          }, 100);
+        }
+      }
+    };
+    
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [gameStarted, options]);
+
+  // Load CW.js script
+  useEffect(() => {
+    const script = document.createElement('script');
+    script.src = 'https://cdn.jsdelivr.net/npm/cw@latest/dist/cw.min.js';
+    script.async = true;
+    document.body.appendChild(script);
+    
+    return () => {
+      document.body.removeChild(script);
+    };
+  }, []);
+
+  // Utility function to shuffle an array
+  const shuffleArray = (array: string[]) => {
+    const newArray = [...array];
+    for (let i = newArray.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      [newArray[i], newArray[j]] = [newArray[j], newArray[i]];
+    }
+    return newArray;
+  };
+
+  // Get Morse code representation for a character
+  const getMorseCode = (char: string) => {
+    const morseMap: {[key: string]: string} = {
+      'A': '·−', 'B': '−···', 'C': '−·−·', 'D': '−··', 'E': '·',
+      'F': '··−·', 'G': '−−·', 'H': '····', 'I': '··', 'J': '·−−−',
+      'K': '−·−', 'L': '·−··', 'M': '−−', 'N': '−·', 'O': '−−−',
+      'P': '·−−·', 'Q': '−−·−', 'R': '·−·', 'S': '···', 'T': '−',
+      'U': '··−', 'V': '···−', 'W': '·−−', 'X': '−··−', 'Y': '−·−−',
+      'Z': '−−··', '0': '−−−−−', '1': '·−−−−', '2': '··−−−', '3': '···−−',
+      '4': '····−', '5': '·····', '6': '−····', '7': '−−···', '8': '−−−··',
+      '9': '−−−−·', '.': '·−·−·−', ',': '−−··−−', '?': '··−−··', '/': '−··−·', '=': '−···−'
+    };
+    
+    return morseMap[char] || '';
+  };
+
+  return (
+    <div className="container">
+      <h1><Link to="/" className="title-link">Morse Hero</Link></h1>
+
+      {!gameStarted ? (
+        <div id="startScreen">
+          <p>Learn Morse code the fun way!</p>
+          <button id="startButton" className="start-button" onClick={startGame}>Start</button>
+          <div className="chart-link">
+            <Link to="/chart">View Morse Code Chart</Link>
+          </div>
+        </div>
+      ) : (
+        <div id="gameArea" style={{ display: 'block' }}>
+          <div className="score-container">
+            <div className="score-widget">
+              <div className="score-info">
+                <div className="score-label">Score:</div>
+                <div className="score-value">
+                  <span id="score">{score}</span> / <span id="total">{totalPlayed}</span>
+                </div>
+              </div>
+              <div className="score-tracker" id="scoreTracker"></div>
+            </div>
+          </div>
+
+          <div className="game-container">
+            <div className="options">
+              {options.map((option, index) => (
+                <button 
+                  key={index}
+                  className="option-button" 
+                  ref={el => {
+                    optionButtonsRef.current[index] = el;
+                  }}
+                  onClick={() => checkAnswer(option)}
+                >
+                  <span className="char-display">{option}</span>
+                  {showHints && <span className="morse-hint">{getMorseCode(option)}</span>}
+                </button>
+              ))}
+            </div>
+
+            <div className="feedback" id="feedback">{feedback}</div>
+          </div>
+
+          <div className="settings">
+            <label htmlFor="wpmSelect">Speed:</label>
+            <select 
+              id="wpmSelect"
+              value={wpm}
+              onChange={(e) => setWpm(parseInt(e.target.value))}
+            >
+              <option value="10">10 WPM</option>
+              <option value="15">15 WPM</option>
+              <option value="20">20 WPM</option>
+              <option value="25">25 WPM</option>
+              <option value="30">30 WPM</option>
+            </select>
+            <div className="hint-setting">
+              <input 
+                type="checkbox" 
+                id="hintMode" 
+                name="hintMode"
+                checked={showHints}
+                onChange={(e) => setShowHints(e.target.checked)}
+              />
+              <label htmlFor="hintMode">Show Hints</label>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <footer className="footer">
+        <p>Need help? View the <Link to="/chart">Morse Code Chart</Link>. </p>
+        <p>Created with <a href="https://www.mastercw.com/cw.js/">CW.js</a>. For a complete and professional
+          Morse Code training solution visit <a href="https://www.mastercw.com">Master CW</a>.</p>
+      </footer>
+    </div>
+  );
+};
+
+export default HomePage;
diff --git a/morsehero/src/pages/chart/ChartPage.tsx b/morsehero/src/pages/chart/ChartPage.tsx
new file mode 100644
index 0000000..9f2b56d
--- /dev/null
+++ b/morsehero/src/pages/chart/ChartPage.tsx
@@ -0,0 +1,195 @@
+import { useEffect, useRef } from 'react';
+import { Link } from 'react-router';
+import '../../base.css';
+import './styles.css';
+
+declare global {
+  interface Window {
+    cw: any;
+  }
+}
+
+const ChartPage = () => {
+  const actxRef = useRef<any>(null);
+
+  // Initialize audio context
+  const initAudio = () => {
+    try {
+      if (window.cw) {
+        actxRef.current = window.cw.initAudioContext({ tone: 600 });
+      } else {
+        console.error('CW.js not loaded');
+      }
+    } catch (error) {
+      console.error('Failed to initialize audio context:', error);
+    }
+  };
+
+  // Play Morse code for a character
+  const playCharacter = (character: string) => {
+    if (!actxRef.current) {
+      initAudio();
+    }
+    
+    if (actxRef.current) {
+      // Remove 'playing' class from all items
+      document.querySelectorAll('.morse-item').forEach(item => {
+        item.classList.remove('playing');
+      });
+      
+      // Add 'playing' class to the clicked item
+      const clickedItem = document.querySelector(`.morse-item[data-char="${character}"]`);
+      if (clickedItem) {
+        clickedItem.classList.add('playing');
+      }
+      
+      window.cw.playText({
+        text: character,
+        wpm: 20,
+        audioContext: actxRef.current
+      });
+      
+      // Remove the 'playing' class after the audio finishes
+      setTimeout(() => {
+        if (clickedItem) {
+          clickedItem.classList.remove('playing');
+        }
+      }, 2000);
+    }
+  };
+
+  // Load CW.js script
+  useEffect(() => {
+    const script = document.createElement('script');
+    script.src = 'https://cwjs.mastercw.com/cw.min.js';
+    script.async = true;
+    document.body.appendChild(script);
+    
+    script.onload = () => {
+      initAudio();
+    };
+    
+    return () => {
+      document.body.removeChild(script);
+    };
+  }, []);
+
+  // Add click event listeners to all morse items
+  useEffect(() => {
+    const handleMorseItemClick = (e: Event) => {
+      const target = e.currentTarget as HTMLElement;
+      const character = target.getAttribute('data-char');
+      if (character) {
+        playCharacter(character);
+      }
+    };
+
+    const morseItems = document.querySelectorAll('.morse-item');
+    morseItems.forEach(item => {
+      item.addEventListener('click', handleMorseItemClick);
+    });
+
+    return () => {
+      morseItems.forEach(item => {
+        item.removeEventListener('click', handleMorseItemClick);
+      });
+    };
+  }, []);
+
+  return (
+    <div className="container">
+      <h1><Link to="/" className="title-link">Morse Hero</Link></h1>
+      <h2>Morse Code Chart</h2>
+
+      <div className="chart-section">
+        <h2>Letters</h2>
+        <div className="morse-grid">
+          {[...'ABCDEFGHIJKLMNOPQRSTUVWXYZ'].map(char => (
+            <div key={char} className="morse-item" data-char={char}>
+              <div className="character">{char}</div>
+              <div className="morse">{getMorseCode(char)}</div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="chart-section">
+        <h2>Numbers</h2>
+        <div className="morse-grid">
+          {[...'0123456789'].map(char => (
+            <div key={char} className="morse-item" data-char={char}>
+              <div className="character">{char}</div>
+              <div className="morse">{getMorseCode(char)}</div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="chart-section">
+        <h2>Special Characters</h2>
+        <div className="morse-grid">
+          {[...'.=,?/'].map(char => (
+            <div key={char} className="morse-item" data-char={char}>
+              <div className="character">{char}</div>
+              <div className="morse">{getMorseCode(char)}</div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="chart-section">
+        <h2>Prosigns</h2>
+        <div className="morse-grid">
+          <div className="morse-item">
+            <div className="character">AR</div>
+            <div className="morse">·−·−·</div>
+            <div className="description">End of message</div>
+          </div>
+          <div className="morse-item">
+            <div className="character">SK</div>
+            <div className="morse">···−·−</div>
+            <div className="description">End of contact</div>
+          </div>
+          <div className="morse-item">
+            <div className="character">BT</div>
+            <div className="morse">−···−</div>
+            <div className="description">Break</div>
+          </div>
+          <div className="morse-item">
+            <div className="character">KN</div>
+            <div className="morse">−·−−·</div>
+            <div className="description">Go only</div>
+          </div>
+        </div>
+      </div>
+
+      <div className="back-link">
+        <Link to="/">Back to Morse Hero</Link>
+      </div>
+
+      <footer className="footer">
+        <p>Click on any character to hear its Morse code sound.</p>
+        <p>Created with <a href="https://www.mastercw.com/cw.js/">CW.js</a>. For a complete and professional
+          Morse Code training solution visit <a href="https://www.mastercw.com">Master CW</a>.</p>
+      </footer>
+    </div>
+  );
+};
+
+// Helper function to get morse code representation
+const getMorseCode = (char: string) => {
+  const morseMap: {[key: string]: string} = {
+    'A': '·−', 'B': '−···', 'C': '−·−·', 'D': '−··', 'E': '·',
+    'F': '··−·', 'G': '−−·', 'H': '····', 'I': '··', 'J': '·−−−',
+    'K': '−·−', 'L': '·−··', 'M': '−−', 'N': '−·', 'O': '−−−',
+    'P': '·−−·', 'Q': '−−·−', 'R': '·−·', 'S': '···', 'T': '−',
+    'U': '··−', 'V': '···−', 'W': '·−−', 'X': '−··−', 'Y': '−·−−',
+    'Z': '−−··', '0': '−−−−−', '1': '·−−−−', '2': '··−−−', '3': '···−−',
+    '4': '····−', '5': '·····', '6': '−····', '7': '−−···', '8': '−−−··',
+    '9': '−−−−·', '.': '·−·−·−', ',': '−−··−−', '?': '··−−··', '/': '−··−·', '=': '−···−'
+  };
+  
+  return morseMap[char] || '';
+};
+
+export default ChartPage;
diff --git a/morsehero/src/pages/chart/styles.css b/morsehero/src/pages/chart/styles.css
new file mode 100644
index 0000000..279d421
--- /dev/null
+++ b/morsehero/src/pages/chart/styles.css
@@ -0,0 +1,132 @@
+/* Morse Hero Chart Styles */
+
+h1 {
+    font-size: 48px;
+}
+
+h2 {
+    font-size: 32px;
+    margin: 30px 0 15px;
+    color: var(--primary-color);
+    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2),
+        0 0 10px rgba(52, 152, 219, 0.4);
+    font-family: 'Fredoka', sans-serif;
+    font-weight: 600;
+}
+
+.chart-section {
+    background: linear-gradient(145deg, var(--bg-light) 0%, #2d3e50 100%);
+    border-radius: var(--border-radius-md);
+    padding: 30px 25px;
+    margin-bottom: 40px;
+    box-shadow: var(--shadow-lg);
+    position: relative;
+    overflow: hidden;
+}
+
+.chart-section::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 5px;
+    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
+    z-index: 1;
+}
+
+.morse-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
+    gap: 20px;
+    margin: 0 auto;
+}
+
+.morse-item {
+    background: linear-gradient(145deg, rgba(52, 152, 219, 0.1) 0%, rgba(52, 152, 219, 0.2) 100%);
+    border-radius: var(--border-radius-sm);
+    padding: 20px 15px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    box-shadow: var(--shadow-sm);
+    transition: all var(--transition-normal);
+    cursor: pointer;
+    border: 1px solid rgba(52, 152, 219, 0.2);
+}
+
+.morse-item:hover {
+    transform: translateY(-5px);
+    box-shadow: var(--shadow-md);
+    background: linear-gradient(145deg, rgba(52, 152, 219, 0.2) 0%, rgba(52, 152, 219, 0.3) 100%);
+    border-color: rgba(52, 152, 219, 0.3);
+}
+
+.morse-item.playing {
+    background: linear-gradient(145deg, rgba(243, 156, 18, 0.2) 0%, rgba(243, 156, 18, 0.3) 100%);
+    box-shadow: 0 0 20px rgba(243, 156, 18, 0.4);
+    border-color: rgba(243, 156, 18, 0.4);
+}
+
+.character {
+    font-size: 32px;
+    font-weight: bold;
+    margin-bottom: 10px;
+    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+.morse {
+    font-family: monospace;
+    font-size: 18px;
+    letter-spacing: 2px;
+    color: var(--text-dim);
+}
+
+.back-link {
+    margin-top: 40px;
+    font-size: 18px;
+}
+
+.back-link a {
+    color: var(--primary-color);
+    text-decoration: none;
+    transition: all var(--transition-normal);
+    padding: 10px 20px;
+    background-color: rgba(255, 255, 255, 0.05);
+    border-radius: var(--border-radius-sm);
+    display: inline-block;
+}
+
+.back-link a:hover {
+    color: var(--secondary-color);
+    background-color: rgba(255, 255, 255, 0.1);
+    transform: translateY(-3px);
+    box-shadow: var(--shadow-sm);
+}
+
+@media (max-width: 768px) {
+    .morse-grid {
+        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+        gap: 15px;
+    }
+    
+    .morse-item {
+        padding: 15px 10px;
+    }
+    
+    .character {
+        font-size: 28px;
+    }
+    
+    .morse {
+        font-size: 16px;
+    }
+    
+    h1 {
+        font-size: 36px;
+    }
+    
+    h2 {
+        font-size: 24px;
+    }
+}
diff --git a/morsehero/src/styles.css b/morsehero/src/styles.css
new file mode 100644
index 0000000..264b6f7
--- /dev/null
+++ b/morsehero/src/styles.css
@@ -0,0 +1,605 @@
+/* Morse Hero Main Styles */
+
+h1 {
+    font-size: 4.5em;
+    margin-top: 0.5rem;
+    letter-spacing: 2px;
+    font-weight: 700;
+    text-shadow:
+        0 0 15px rgba(243, 156, 18, 0.4),
+        3px 3px 0px rgba(231, 76, 60, 0.6);
+}
+
+h1::after {
+    width: 80px;
+}
+
+.game-container {
+    background: linear-gradient(145deg, var(--bg-dark) 0%, var(--bg-darker) 100%);
+    border-radius: var(--border-radius-lg);
+    padding: 40px;
+    box-shadow: var(--shadow-lg);
+    border: none;
+    position: relative;
+    overflow: hidden;
+}
+
+.game-container::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 5px;
+    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
+    z-index: 1;
+}
+
+.options {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 30px;
+    margin-top: 40px;
+}
+
+.start-button {
+    background: linear-gradient(145deg, var(--accent-color) 0%, #c0392b 100%);
+    color: white;
+    border: none;
+    padding: 20px 50px;
+    font-size: 32px;
+    font-weight: 700;
+    border-radius: var(--border-radius-lg);
+    cursor: pointer;
+    transition: all var(--transition-normal);
+    box-shadow: var(--shadow-md);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    margin-bottom: 30px;
+    width: 100%;
+    max-width: 300px;
+    position: relative;
+    z-index: 1;
+}
+
+.start-button:hover {
+    transform: translateY(-5px);
+    box-shadow: var(--shadow-lg);
+    background: linear-gradient(145deg, #e74c3c 0%, var(--accent-color) 100%);
+}
+
+.start-button:active {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-sm);
+}
+
+.option-button {
+    background: linear-gradient(145deg, var(--primary-color), var(--primary-dark));
+    color: white;
+    border-radius: var(--border-radius-md);
+    font-size: 36px;
+    padding: 25px 15px;
+    box-shadow: 0 8px 0 var(--primary-dark),
+        var(--shadow-md);
+    min-height: 130px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    z-index: 1;
+}
+
+.option-button:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 13px 0 var(--primary-dark),
+        var(--shadow-lg);
+}
+
+.option-button:active {
+    transform: translateY(3px);
+    box-shadow: 0 5px 0 var(--primary-dark),
+        var(--shadow-sm);
+}
+
+.option-button.correct {
+    background: linear-gradient(145deg, var(--success-color), var(--success-dark));
+    box-shadow: 0 8px 0 var(--success-dark),
+        0 0 30px rgba(46, 204, 113, 0.5);
+    animation: pulse 0.5s;
+}
+
+.option-button.incorrect {
+    background: linear-gradient(145deg, var(--accent-color), var(--accent-dark));
+    box-shadow: 0 8px 0 var(--accent-dark),
+        0 0 30px rgba(231, 76, 60, 0.5);
+    animation: shake 0.5s;
+}
+
+.char-display {
+    font-size: 38px;
+    font-weight: bold;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.morse-hint {
+    display: block;
+    font-size: 18px;
+    margin-top: 10px;
+    color: var(--text-dim);
+    font-family: monospace;
+    letter-spacing: 2px;
+}
+
+.key-label {
+    position: absolute;
+    top: 8px;
+    right: 12px;
+    font-size: 14px;
+    color: var(--text-dim);
+    font-family: monospace;
+    background-color: rgba(0, 0, 0, 0.2);
+    padding: 2px 8px;
+    border-radius: 10px;
+}
+
+.key-pressed {
+    transform: translateY(3px) !important;
+    box-shadow: 0 5px 0 var(--primary-dark) !important;
+    transition: transform 0.05s, box-shadow 0.05s;
+}
+
+.chart-link {
+    margin-top: 20px;
+    font-size: 18px;
+}
+
+.chart-link a {
+    color: var(--primary-color);
+    text-decoration: none;
+    transition: all var(--transition-normal);
+    position: relative;
+}
+
+.chart-link a:hover {
+    color: var(--secondary-color);
+    text-decoration: underline;
+}
+
+.chart-link a::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    transform: scaleX(0);
+    height: 2px;
+    bottom: -2px;
+    left: 0;
+    background-color: var(--primary-color);
+    transform-origin: bottom right;
+    transition: transform 0.3s ease-out;
+}
+
+.chart-link a:hover::after {
+    transform: scaleX(1);
+    transform-origin: bottom left;
+    background-color: var(--secondary-color);
+}
+
+#startScreen {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    background: linear-gradient(145deg, var(--bg-dark) 0%, var(--bg-darker) 100%);
+    border-radius: var(--border-radius-lg);
+    padding: 40px 30px;
+    margin: 40px 0;
+    position: relative;
+    border: 2px dashed rgba(52, 152, 219, 0.3);
+    box-shadow: var(--shadow-md);
+}
+
+#startScreen::before {
+    content: '';
+    position: absolute;
+    left: 50%;
+    top: -2px;
+    transform: translateX(-50%);
+    width: 80%;
+    height: 4px;
+    background: linear-gradient(90deg, rgba(52, 152, 219, 0) 0%, rgba(52, 152, 219, 0.8) 50%, rgba(52, 152, 219, 0) 100%);
+    border-radius: 2px;
+}
+
+#startScreen p {
+    font-size: 28px;
+    font-weight: 600;
+    color: var(--text-light);
+    margin-bottom: 40px;
+    text-shadow: var(--text-shadow);
+}
+
+#startScreen .chart-link {
+    margin-top: 0;
+    width: 100%;
+    max-width: 300px;
+}
+
+#startScreen .chart-link a {
+    display: block;
+    width: 100%;
+    padding: 12px 25px;
+    background: linear-gradient(145deg, rgba(52, 152, 219, 0.2) 0%, rgba(52, 152, 219, 0.3) 100%);
+    border-radius: var(--border-radius-md);
+    color: var(--text-light);
+    font-size: 18px;
+    font-weight: 600;
+    text-decoration: none;
+    transition: all var(--transition-normal);
+    border: 1px solid rgba(52, 152, 219, 0.3);
+    box-shadow: var(--shadow-sm);
+    box-sizing: border-box;
+}
+
+#startScreen .chart-link a:hover {
+    background: linear-gradient(145deg, rgba(52, 152, 219, 0.3) 0%, rgba(52, 152, 219, 0.4) 100%);
+    transform: translateY(-3px);
+    box-shadow: var(--shadow-md);
+    color: var(--primary-color);
+    border-color: rgba(52, 152, 219, 0.5);
+}
+
+.score-container {
+    margin-bottom: 20px;
+    width: 100%;
+}
+
+.score-widget {
+    background-color: rgba(255, 255, 255, 0.1);
+    border-radius: var(--border-radius-md);
+    padding: 15px;
+    box-shadow: var(--shadow-sm);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.score-info {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    margin-right: 15px;
+    min-width: 100px;
+}
+
+.score-label {
+    font-size: 18px;
+    margin-bottom: 5px;
+    color: var(--text-dim);
+}
+
+.score-value {
+    font-size: 24px;
+    font-weight: bold;
+    color: var(--secondary-color);
+}
+
+.score-tracker {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 5px;
+    max-width: 100%;
+    margin-top: 5px;
+}
+
+.score-dot {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    margin: 2px;
+    transition: all 0.3s ease;
+}
+
+.score-dot.correct {
+    background-color: var(--success-color);
+    box-shadow: 0 0 5px rgba(46, 204, 113, 0.7);
+}
+
+.score-dot.incorrect {
+    background-color: var(--accent-color);
+    box-shadow: 0 0 5px rgba(231, 76, 60, 0.7);
+}
+
+.feedback {
+    height: 40px;
+    margin-top: 30px;
+    font-weight: bold;
+    font-size: 28px;
+    color: var(--secondary-color);
+    text-shadow: 0 0 10px rgba(243, 156, 18, 0.5);
+}
+
+.score {
+    font-size: 32px;
+    font-weight: bold;
+    color: var(--secondary-color);
+    margin-bottom: 30px;
+    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.3),
+        0 0 10px rgba(243, 156, 18, 0.3);
+}
+
+.score-display {
+    font-size: 24px;
+    font-weight: bold;
+    margin: 15px 0;
+    color: var(--secondary-color);
+}
+
+.settings {
+    background: linear-gradient(145deg, rgba(52, 73, 94, 0.7) 0%, rgba(44, 62, 80, 0.7) 100%);
+    padding: 25px;
+    border-radius: var(--border-radius-md);
+    margin-top: 30px;
+    font-size: 20px;
+    border: none;
+    box-shadow: var(--shadow-md);
+}
+
+.settings label {
+    font-size: 20px;
+    margin-right: 15px;
+    color: var(--primary-color);
+    font-weight: 600;
+}
+
+.settings select {
+    padding: 12px 20px;
+    font-size: 18px;
+    border-radius: var(--border-radius-sm);
+    border: 2px solid var(--primary-dark);
+    background-color: rgba(44, 62, 80, 0.7);
+    color: var(--text-light);
+    font-family: 'Poppins', sans-serif;
+    cursor: pointer;
+    box-shadow: var(--shadow-sm);
+    transition: all var(--transition-normal);
+}
+
+.settings select:hover {
+    border-color: var(--primary-color);
+    box-shadow: 0 0 10px rgba(52, 152, 219, 0.3);
+}
+
+.settings select:focus {
+    outline: none;
+    border-color: var(--secondary-color);
+    box-shadow: 0 0 15px rgba(243, 156, 18, 0.3);
+}
+
+.hint-setting {
+    display: inline-block;
+    margin-left: 30px;
+}
+
+.hint-icon {
+    display: inline-block;
+    margin-right: 8px;
+}
+
+.hint-setting input[type="checkbox"] {
+    width: 20px;
+    height: 20px;
+    vertical-align: middle;
+    cursor: pointer;
+    margin-right: 8px;
+}
+
+.controls {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    margin-top: 30px;
+}
+
+.control-button {
+    background: linear-gradient(145deg, var(--bg-light), #2d3e50);
+    color: var(--text-light);
+    border-radius: var(--border-radius-sm);
+    padding: 12px 25px;
+    font-size: 16px;
+    box-shadow: var(--shadow-sm);
+    transition: all var(--transition-normal);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+}
+
+.control-button:hover {
+    transform: translateY(-3px);
+    box-shadow: var(--shadow-md);
+    background: linear-gradient(145deg, #3a5269, var(--bg-light));
+}
+
+.control-button:active {
+    transform: translateY(1px);
+    box-shadow: var(--shadow-sm);
+}
+
+.play-again-button {
+    background: linear-gradient(145deg, var(--secondary-color), var(--secondary-dark));
+    color: white;
+    border-radius: var(--border-radius-md);
+    padding: 15px 30px;
+    font-size: 20px;
+    margin-top: 20px;
+    box-shadow: 0 6px 0 var(--secondary-dark),
+        var(--shadow-md);
+}
+
+.play-again-button:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 11px 0 var(--secondary-dark),
+        var(--shadow-lg);
+}
+
+.play-again-button:active {
+    transform: translateY(3px);
+    box-shadow: 0 3px 0 var(--secondary-dark),
+        var(--shadow-sm);
+}
+
+.progress-container {
+    background-color: rgba(255, 255, 255, 0.1);
+    border-radius: 20px;
+    height: 10px;
+    width: 100%;
+    margin: 20px 0;
+    overflow: hidden;
+    position: relative;
+}
+
+.progress-bar {
+    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
+    height: 100%;
+    border-radius: 20px;
+    transition: width 0.5s ease;
+}
+
+.instructions {
+    background-color: rgba(255, 255, 255, 0.05);
+    border-radius: var(--border-radius-md);
+    padding: 25px;
+    margin-bottom: 30px;
+    text-align: left;
+    box-shadow: var(--shadow-sm);
+    border-left: 4px solid var(--primary-color);
+}
+
+.instructions h2 {
+    color: var(--secondary-color);
+    margin-bottom: 15px;
+    font-size: 24px;
+}
+
+.instructions p {
+    margin-bottom: 10px;
+    font-size: 16px;
+    line-height: 1.6;
+}
+
+.instructions ul {
+    margin-left: 20px;
+    margin-bottom: 10px;
+}
+
+.instructions li {
+    margin-bottom: 5px;
+}
+
+@keyframes pulse {
+    0% {
+        box-shadow: 0 8px 0 var(--success-dark), 0 0 20px rgba(46, 204, 113, 0.5);
+    }
+    50% {
+        box-shadow: 0 8px 0 var(--success-dark), 0 0 40px rgba(46, 204, 113, 0.8);
+    }
+    100% {
+        box-shadow: 0 8px 0 var(--success-dark), 0 0 20px rgba(46, 204, 113, 0.5);
+    }
+}
+
+@keyframes shake {
+    0%, 100% {
+        transform: translateX(0);
+    }
+    20%, 60% {
+        transform: translateX(-10px);
+    }
+    40%, 80% {
+        transform: translateX(10px);
+    }
+}
+
+/* Game Area */
+#gameArea {
+    display: none;
+}
+
+/* When game is active, JavaScript will override this */
+body.game-active #gameArea {
+    display: block;
+}
+
+body.game-active #startScreen {
+    display: none;
+}
+
+@media (max-width: 768px) {
+    .game-container {
+        padding: 30px 20px;
+    }
+    
+    .options {
+        grid-template-columns: 1fr;
+        gap: 20px;
+    }
+    
+    .option-button {
+        font-size: 30px;
+        padding: 20px 15px;
+        min-height: 110px;
+    }
+    
+    h1 {
+        font-size: 3.5em;
+    }
+    
+    .start-button {
+        font-size: 28px;
+        padding: 15px 40px;
+    }
+    
+    .score-container {
+        flex-direction: column;
+        align-items: center;
+    }
+    
+    .score-widget {
+        margin-bottom: 15px;
+    }
+    
+    .settings-toggle {
+        margin-left: 0;
+        margin-top: 10px;
+    }
+}
+
+@media (max-width: 480px) {
+    .game-container {
+        padding: 25px 15px;
+    }
+    
+    .option-button {
+        font-size: 24px;
+        padding: 15px 10px;
+        min-height: 90px;
+    }
+    
+    h1 {
+        font-size: 2.8em;
+    }
+    
+    .start-button {
+        font-size: 24px;
+        padding: 12px 30px;
+    }
+    
+    .hint-setting {
+        margin-left: 0;
+        margin-top: 10px;
+    }
+}
\ No newline at end of file