summaryrefslogtreecommitdiff
path: root/chart/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'chart/index.html')
-rw-r--r--chart/index.html282
1 files changed, 0 insertions, 282 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
generated by cgit v1.3.1 (git 2.54.0) at 2026-08-15 11:50:10 +0000