diff --git a/docs/docs.css b/docs/docs.css new file mode 100644 index 0000000..b05b581 --- /dev/null +++ b/docs/docs.css @@ -0,0 +1,277 @@ +/** + * Documentation Page Stylesheet + * Custom styles for the callsign.js documentation/demo page + */ + +:root { + --primary-color: #0066cc; + --secondary-color: #6c757d; + --success-color: #28a745; + --code-bg: #f5f5f5; + --border-color: #e0e0e0; + --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12); + --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); + --radius: 8px; +} + +@media (prefers-color-scheme: dark) { + :root { + --primary-color: #4d9fff; + --secondary-color: #adb5bd; + --code-bg: #2d2d2d; + --border-color: #404040; + } +} + +/* Hero Section */ +.hero { + text-align: center; + padding: 3rem 1rem; + margin-bottom: 2rem; +} + +.hero h1 { + font-size: 3rem; + margin-bottom: 0.5rem; + color: var(--primary-color); + background: linear-gradient(135deg, var(--primary-color), var(--success-color)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +/* Fallback for browsers without background-clip support or high contrast mode */ +@supports not (background-clip: text) or not (-webkit-background-clip: text) { + .hero h1 { + color: var(--primary-color); + background: none; + } +} + +.hero .subtitle { + font-size: 1.5rem; + font-weight: 600; + margin-bottom: 0.5rem; + opacity: 0.9; +} + +.hero .tagline { + font-size: 1.1rem; + opacity: 0.7; + margin-bottom: 2rem; +} + +.header-links { + display: flex; + gap: 1rem; + justify-content: center; + flex-wrap: wrap; + margin-top: 2rem; +} + +/* Buttons */ +.btn { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.75rem 1.5rem; + border-radius: var(--radius); + text-decoration: none; + font-weight: 500; + transition: all 0.2s; + border: 2px solid transparent; +} + +.btn-primary { + background-color: var(--primary-color); + color: white; +} + +.btn-primary:hover { + transform: translateY(-2px); + box-shadow: var(--shadow-md); +} + +.btn-secondary { + border: 2px solid var(--primary-color); + color: var(--primary-color); +} + +.btn-secondary:hover { + background-color: var(--primary-color); + color: white; +} + +/* Sections */ +section { + margin-bottom: 4rem; + scroll-margin-top: 2rem; +} + +section h2 { + font-size: 2rem; + margin-bottom: 1.5rem; + padding-bottom: 0.5rem; + border-bottom: 3px solid var(--primary-color); +} + +/* Demo Cards */ +.demo-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; + margin-top: 2rem; +} + +.demo-card { + background: var(--code-bg); + padding: 1.5rem; + border-radius: var(--radius); + border: 1px solid var(--border-color); +} + +.demo-card h3 { + margin-top: 0; + color: var(--primary-color); +} + +/* Feature Grid */ +.feature-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 1.5rem; + margin-top: 2rem; +} + +.feature-card { + padding: 1.5rem; + border-radius: var(--radius); + border: 1px solid var(--border-color); + transition: all 0.2s; + text-align: center; +} + +.feature-card:hover { + box-shadow: var(--shadow-md); + transform: translateY(-4px); + border-color: var(--primary-color); +} + +.feature-icon { + font-size: 3rem; + margin-bottom: 1rem; +} + +.feature-card h3 { + color: var(--primary-color); + margin-bottom: 0.5rem; +} + +.feature-card p { + margin: 0; + opacity: 0.8; + font-size: 0.95rem; +} + +/* Getting Started Steps */ +.step { + margin-bottom: 2rem; + padding: 1.5rem; + background: var(--code-bg); + border-radius: var(--radius); + border-left: 4px solid var(--primary-color); +} + +.step h3 { + margin-top: 0; + color: var(--primary-color); +} + +/* Code Blocks */ +pre { + background: var(--code-bg); + padding: 1rem; + border-radius: var(--radius); + overflow-x: auto; + border: 1px solid var(--border-color); +} + +code { + background: var(--code-bg); + padding: 0.2rem 0.4rem; + border-radius: 4px; + font-size: 0.9em; + font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'Courier New', Courier, monospace; +} + +pre code { + background: none; + padding: 0; +} + +/* Tables */ +table { + width: 100%; + border-collapse: collapse; + margin-top: 1rem; +} + +table th { + background: var(--code-bg); + padding: 0.75rem; + text-align: left; + border-bottom: 2px solid var(--border-color); +} + +table td { + padding: 0.75rem; + border-bottom: 1px solid var(--border-color); +} + +table tbody tr:hover { + background: var(--code-bg); +} + +/* Footer */ +footer { + margin-top: 4rem; + padding: 2rem 0; + border-top: 1px solid var(--border-color); + text-align: center; +} + +.footer-content p { + margin: 0.5rem 0; +} + +.footer-content a { + color: var(--primary-color); + text-decoration: none; + margin: 0 0.5rem; +} + +.footer-content a:hover { + text-decoration: underline; +} + +/* Utilities */ +.muted { + opacity: 0.7; + font-style: italic; +} + +/* Responsive */ +@media (max-width: 768px) { + .hero h1 { + font-size: 2rem; + } + + .hero .subtitle { + font-size: 1.2rem; + } + + .feature-grid, + .demo-grid { + grid-template-columns: 1fr; + } +} diff --git a/docs/index.html b/docs/index.html index 5c162d5..1c82f88 100644 --- a/docs/index.html +++ b/docs/index.html @@ -3,31 +3,178 @@ - callsign.js example page + callsign.js - ITU Radio Call Sign Library + +
-

callsign.js example page

+
+

๐Ÿ“ป callsign.js

+

Enhance ITU radio call signs on your web pages

+

Interactive call signs with country flags, phonetic information, and automatic detection

+
+ + + View on GitHub + + Get Started +
+
+
- +
+

โœจ Live Demo

+

See the library in action! Call signs below are automatically detected and enhanced with country flags and phonetic information:

+ +
+
+

Marked up call signs

+

Using the <call-sign> tag:

+
    +
  • South African: ZR9OOO
    • +
  • Norwegian: LN0ABC
    • +
  • Slovak: OM0ZAS
    • +
+
+ +
+

Auto-detected call signs

+

With data-search="true" enabled:

+
    +
  • Swedish: SA9BC recognized automatically
    • +
  • Danish: OY9ZZZ also detected
    • +
  • Invalid: YN9ZZZ not in ITU table
    • +
+
+
+
+ +
+

๐ŸŽฏ Features

+
+
+
๐Ÿšฉ
+

Country Flags

+

Automatically displays the country flag for each recognized call sign prefix

+
+
+
๐Ÿ”ค
+

Phonetic Alphabet

+

Provides NATO phonetic spelling in tooltips and for screen readers

+
+
+
๐Ÿ”
+

Auto-Detection

+

Optionally finds and highlights untagged call signs in your content

+
+
+
โ™ฟ
+

Accessible

+

Built with accessibility in mind, including proper ARIA labels

+
+
+
๐ŸŽจ
+

Customizable

+

Style call signs using CSS custom properties for theming

+
+
+
โšก
+

Lightweight

+

No dependencies, works directly in the browser

+
+
+
+ +
+

๐Ÿš€ Getting Started

+ +
+

1. Include the library

+

Add callsign.js to your HTML <head> section:

+ 
<script id="callsign-js" src="callsign.js" defer></script>
+
+ +
+

2. Tag your call signs

+

Wrap call signs with the custom <call-sign> element:

+ 
<p>I had contact with <call-sign>SM8AYA</call-sign> on shortwave.</p>
+
+ +
+

3. Configure options (optional)

+

Customize behavior with data attributes:

+ 
<script id="callsign-js" src="callsign.js" 
+  data-flag="true" 
+  data-monospace="true"
+  data-phonetic="true"
+  data-search="true"
+  defer></script>
+
+
+ +
+

โš™๏ธ Configuration Options

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OptionDefaultDescription
data-flagtrueShow country flag emoji before call signs
data-monospacetrueRender call signs with monospace font
data-phonetictrueAdd phonetic spelling for screen readers
data-searchfalseAutomatically detect and mark up untagged call signs
+
+ +
+

๐Ÿ“– About

+

This library highlights ITU radio call signs (including amateur radio) on web pages, making them more interactive and informative. The code is intentionally not minified to support the amateur radio community's learning and experimentation goals.

+

Amateur radio is about learning and experimenting. Minified files make it dramatically harder to understand the code.

+
+