summaryrefslogtreecommitdiff
path: root/chart
diff options
context:
space:
mode:
authorYuval Adam <_@yuv.al>2025-03-05 12:21:25 +0100
committerYuval Adam <_@yuv.al>2025-03-05 12:21:25 +0100
commit5bf781f3ac381744fbec035f938d69a201f75fa4 (patch)
tree2ec82a90ce2cd1c279d77bdd6ca83b256ac4856a /chart
parentc6612a8b6dde5a5a9776d424ed33f5ca685699c6 (diff)
Replace all impl with vite
Diffstat (limited to 'chart')
-rw-r--r--chart/index.html282
-rw-r--r--chart/styles.css132
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;
- }
-}
generated by cgit v1.3.1 (git 2.54.0) at 2026-08-15 19:45:24 +0000