diff options
Diffstat (limited to 'chart')
| -rw-r--r-- | chart/index.html | 282 | ||||
| -rw-r--r-- | chart/styles.css | 132 |
2 files changed, 0 insertions, 414 deletions
diff --git a/chart/index.html b/chart/index.html deleted file mode 100644 index de53cd9..0000000 --- a/chart/index.html +++ /dev/null @@ -1,282 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> - -<head> - <meta charset="UTF-8"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <title>Morse Code Chart - Morse Hero</title> - <meta name="description" - content="Complete Morse code chart with letters, numbers, and special characters. A reference guide from Morse Hero."> - <meta name="keywords" content="morse code, morse code chart, morse code reference, morse hero"> - <meta name="robots" content="index, follow"> - <meta name="canonical" href="https://morsehero.com/chart/"> - - <link rel="apple-touch-icon" sizes="180x180" href="/ico/apple-touch-icon.png"> - <link rel="icon" type="image/png" sizes="32x32" href="/ico/icon-192.png"> - <link rel="icon" type="image/png" sizes="16x16" href="/ico/icon-192.png"> - <link rel="manifest" href="/site.webmanifest"> - <meta name="theme-color" content="#2c3e50"> - <script src="https://cdn.usefathom.com/script.js" data-site="NEBPAKSA" defer></script> - <script src="https://cwjs.mastercw.com/cw.min.js"></script> - - <!-- Google Fonts --> - <link rel="preconnect" href="https://fonts.googleapis.com"> - <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - <link - href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600&family=Poppins:wght@400;600;700&display=swap" - rel="stylesheet"> - - <!-- Main Stylesheet --> - <link rel="stylesheet" href="../base.css"> - <link rel="stylesheet" href="styles.css"> -</head> - -<body> - <div class="container"> - <h1><a href="/" class="title-link">Morse Hero</a></h1> - <h2>Morse Code Chart</h2> - - <div class="chart-section"> - <h2>Letters</h2> - <div class="morse-grid"> - <div class="morse-item"> - <div class="character">A</div> - <div class="morse">·−</div> - </div> - <div class="morse-item"> - <div class="character">B</div> - <div class="morse">−···</div> - </div> - <div class="morse-item"> - <div class="character">C</div> - <div class="morse">−·−·</div> - </div> - <div class="morse-item"> - <div class="character">D</div> - <div class="morse">−··</div> - </div> - <div class="morse-item"> - <div class="character">E</div> - <div class="morse">·</div> - </div> - <div class="morse-item"> - <div class="character">F</div> - <div class="morse">··−·</div> - </div> - <div class="morse-item"> - <div class="character">G</div> - <div class="morse">−−·</div> - </div> - <div class="morse-item"> - <div class="character">H</div> - <div class="morse">····</div> - </div> - <div class="morse-item"> - <div class="character">I</div> - <div class="morse">··</div> - </div> - <div class="morse-item"> - <div class="character">J</div> - <div class="morse">·−−−</div> - </div> - <div class="morse-item"> - <div class="character">K</div> - <div class="morse">−·−</div> - </div> - <div class="morse-item"> - <div class="character">L</div> - <div class="morse">·−··</div> - </div> - <div class="morse-item"> - <div class="character">M</div> - <div class="morse">−−</div> - </div> - <div class="morse-item"> - <div class="character">N</div> - <div class="morse">−·</div> - </div> - <div class="morse-item"> - <div class="character">O</div> - <div class="morse">−−−</div> - </div> - <div class="morse-item"> - <div class="character">P</div> - <div class="morse">·−−·</div> - </div> - <div class="morse-item"> - <div class="character">Q</div> - <div class="morse">−−·−</div> - </div> - <div class="morse-item"> - <div class="character">R</div> - <div class="morse">·−·</div> - </div> - <div class="morse-item"> - <div class="character">S</div> - <div class="morse">···</div> - </div> - <div class="morse-item"> - <div class="character">T</div> - <div class="morse">−</div> - </div> - <div class="morse-item"> - <div class="character">U</div> - <div class="morse">··−</div> - </div> - <div class="morse-item"> - <div class="character">V</div> - <div class="morse">···−</div> - </div> - <div class="morse-item"> - <div class="character">W</div> - <div class="morse">·−−</div> - </div> - <div class="morse-item"> - <div class="character">X</div> - <div class="morse">−··−</div> - </div> - <div class="morse-item"> - <div class="character">Y</div> - <div class="morse">−·−−</div> - </div> - <div class="morse-item"> - <div class="character">Z</div> - <div class="morse">−−··</div> - </div> - </div> - </div> - - <div class="chart-section"> - <h2>Numbers</h2> - <div class="morse-grid"> - <div class="morse-item"> - <div class="character">1</div> - <div class="morse">·−−−−</div> - </div> - <div class="morse-item"> - <div class="character">2</div> - <div class="morse">··−−−</div> - </div> - <div class="morse-item"> - <div class="character">3</div> - <div class="morse">···−−</div> - </div> - <div class="morse-item"> - <div class="character">4</div> - <div class="morse">····−</div> - </div> - <div class="morse-item"> - <div class="character">5</div> - <div class="morse">·····</div> - </div> - <div class="morse-item"> - <div class="character">6</div> - <div class="morse">−····</div> - </div> - <div class="morse-item"> - <div class="character">7</div> - <div class="morse">−−···</div> - </div> - <div class="morse-item"> - <div class="character">8</div> - <div class="morse">−−−··</div> - </div> - <div class="morse-item"> - <div class="character">9</div> - <div class="morse">−−−−·</div> - </div> - <div class="morse-item"> - <div class="character">0</div> - <div class="morse">−−−−−</div> - </div> - </div> - </div> - - <div class="chart-section"> - <h2>Special Characters</h2> - <div class="morse-grid"> - <div class="morse-item"> - <div class="character">=</div> - <div class="morse">−···−</div> - </div> - <div class="morse-item"> - <div class="character">.</div> - <div class="morse">·−·−·−</div> - </div> - <div class="morse-item"> - <div class="character">,</div> - <div class="morse">−−··−−</div> - </div> - <div class="morse-item"> - <div class="character">/</div> - <div class="morse">−··−·</div> - </div> - <div class="morse-item"> - <div class="character">?</div> - <div class="morse">··−−··</div> - </div> - </div> - </div> - - <div class="back-link"> - <a href="/">← Back to Morse Hero Game</a> - </div> - - <footer class="footer"> - <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> - - <script> - // Initialize audio context - let actx = null; - - // Set up CW.js - function initAudio() { - if (!actx) { - actx = cw.initAudioContext({ tone: 600 }); - } - } - - // Play Morse code for a character - function playCharacter(character) { - // Initialize audio if not already done - initAudio(); - - // Get all morse items - const allItems = document.querySelectorAll('.morse-item'); - - // Remove playing class from all items - allItems.forEach(item => { - item.classList.remove('playing'); - }); - - const list = event.currentTarget.classList; - // Add playing class to clicked item - list.add('playing'); - - // Play the character - cw.play(character, { actx: actx, wpm: 15 }); - - // Remove playing class after animation completes - setTimeout(() => { - list.remove('playing'); - }, 1500); - } - - // Add click event listeners to all morse items - document.addEventListener('DOMContentLoaded', function () { - const morseItems = document.querySelectorAll('.morse-item'); - - morseItems.forEach(item => { - const character = item.querySelector('.character').textContent; - item.addEventListener('click', function (event) { - playCharacter(character); - }); - }); - }); - </script> -</body> - -</html>
\ No newline at end of file diff --git a/chart/styles.css b/chart/styles.css deleted file mode 100644 index 279d421..0000000 --- a/chart/styles.css +++ /dev/null @@ -1,132 +0,0 @@ -/* 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; - } -} |