⚡ Initial commit: MorseQuest - Complete amateur radio education platform
- Complete Product Requirements Document with full technical specs - MorseQuest adventure-based branding and visual identity - All logos, icons, and brand assets ready for development - Freemium business model ($9.95/year, first year free launch strategy) - Ready for Keylink IT Forge platform deployment Phase 1 MVP ready to begin (10-12 week timeline)
@@ -0,0 +1,218 @@
|
|||||||
|
# Dependencies
|
||||||
|
node_modules/
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
package-lock.json
|
||||||
|
yarn.lock
|
||||||
|
|
||||||
|
# Runtime data
|
||||||
|
pids
|
||||||
|
*.pid
|
||||||
|
*.seed
|
||||||
|
*.pid.lock
|
||||||
|
|
||||||
|
# Coverage directory used by tools like istanbul
|
||||||
|
coverage/
|
||||||
|
*.lcov
|
||||||
|
|
||||||
|
# nyc test coverage
|
||||||
|
.nyc_output
|
||||||
|
|
||||||
|
# ESLint cache
|
||||||
|
.eslintcache
|
||||||
|
|
||||||
|
# Optional npm cache directory
|
||||||
|
.npm
|
||||||
|
|
||||||
|
# Optional eslint cache
|
||||||
|
.eslintcache
|
||||||
|
|
||||||
|
# Microbundle cache
|
||||||
|
.rpt2_cache/
|
||||||
|
.rts2_cache_cjs/
|
||||||
|
.rts2_cache_es/
|
||||||
|
.rts2_cache_umd/
|
||||||
|
|
||||||
|
# Optional REPL history
|
||||||
|
.node_repl_history
|
||||||
|
|
||||||
|
# Output of 'npm pack'
|
||||||
|
*.tgz
|
||||||
|
|
||||||
|
# Yarn Integrity file
|
||||||
|
.yarn-integrity
|
||||||
|
|
||||||
|
# dotenv environment variables file
|
||||||
|
.env
|
||||||
|
.env.test
|
||||||
|
.env.production
|
||||||
|
|
||||||
|
# parcel-bundler cache (https://parceljs.org/)
|
||||||
|
.cache
|
||||||
|
.parcel-cache
|
||||||
|
|
||||||
|
# Next.js build output
|
||||||
|
.next
|
||||||
|
|
||||||
|
# Nuxt.js build / generate output
|
||||||
|
.nuxt
|
||||||
|
dist
|
||||||
|
|
||||||
|
# Gatsby files
|
||||||
|
.cache/
|
||||||
|
public
|
||||||
|
|
||||||
|
# Storybook build outputs
|
||||||
|
.out
|
||||||
|
.storybook-out
|
||||||
|
|
||||||
|
# Temporary folders
|
||||||
|
tmp/
|
||||||
|
temp/
|
||||||
|
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
# Runtime data
|
||||||
|
pids
|
||||||
|
*.pid
|
||||||
|
*.seed
|
||||||
|
*.pid.lock
|
||||||
|
|
||||||
|
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||||
|
lib-cov
|
||||||
|
|
||||||
|
# Coverage directory used by tools like istanbul
|
||||||
|
coverage
|
||||||
|
*.lcov
|
||||||
|
|
||||||
|
# Dependency directories
|
||||||
|
node_modules/
|
||||||
|
jspm_packages/
|
||||||
|
|
||||||
|
# Snowpack dependency directory (https://snowpack.dev/)
|
||||||
|
web_modules/
|
||||||
|
|
||||||
|
# TypeScript cache
|
||||||
|
*.tsbuildinfo
|
||||||
|
|
||||||
|
# Optional npm cache directory
|
||||||
|
.npm
|
||||||
|
|
||||||
|
# Optional eslint cache
|
||||||
|
.eslintcache
|
||||||
|
|
||||||
|
# Optional stylelint cache
|
||||||
|
.stylelintcache
|
||||||
|
|
||||||
|
# Microbundle cache
|
||||||
|
.rpt2_cache/
|
||||||
|
.rts2_cache_cjs/
|
||||||
|
.rts2_cache_es/
|
||||||
|
.rts2_cache_umd/
|
||||||
|
|
||||||
|
# Optional REPL history
|
||||||
|
.node_repl_history
|
||||||
|
|
||||||
|
# Output of 'npm pack'
|
||||||
|
*.tgz
|
||||||
|
|
||||||
|
# Yarn Integrity file
|
||||||
|
.yarn-integrity
|
||||||
|
|
||||||
|
# dotenv environment variable files
|
||||||
|
.env
|
||||||
|
.env.development.local
|
||||||
|
.env.test.local
|
||||||
|
.env.production.local
|
||||||
|
.env.local
|
||||||
|
|
||||||
|
# parcel-bundler cache (https://parceljs.org/)
|
||||||
|
.cache
|
||||||
|
.parcel-cache
|
||||||
|
|
||||||
|
# Next.js build output
|
||||||
|
.next
|
||||||
|
out
|
||||||
|
|
||||||
|
# Nuxt.js build / generate output
|
||||||
|
.nuxt
|
||||||
|
dist
|
||||||
|
|
||||||
|
# Gatsby files
|
||||||
|
.cache/
|
||||||
|
# Comment in the public line in if your project uses Gatsby and not Next.js
|
||||||
|
# https://nextjs.org/blog/next-9-1#public-directory-support
|
||||||
|
# public
|
||||||
|
|
||||||
|
# Vuepress build output
|
||||||
|
.vuepress/dist
|
||||||
|
|
||||||
|
# Serverless directories
|
||||||
|
.serverless/
|
||||||
|
|
||||||
|
# FuseBox cache
|
||||||
|
.fusebox/
|
||||||
|
|
||||||
|
# DynamoDB Local files
|
||||||
|
.dynamodb/
|
||||||
|
|
||||||
|
# TernJS port file
|
||||||
|
.tern-port
|
||||||
|
|
||||||
|
# Stores VSCode versions used for testing VSCode extensions
|
||||||
|
.vscode-test
|
||||||
|
|
||||||
|
# yarn v2
|
||||||
|
.yarn/cache
|
||||||
|
.yarn/unplugged
|
||||||
|
.yarn/build-state.yml
|
||||||
|
.yarn/install-state.gz
|
||||||
|
.pnp.*
|
||||||
|
|
||||||
|
# Database files
|
||||||
|
*.db
|
||||||
|
*.sqlite
|
||||||
|
*.sqlite3
|
||||||
|
data/
|
||||||
|
|
||||||
|
# Build artifacts
|
||||||
|
build/
|
||||||
|
dist/
|
||||||
|
|
||||||
|
# Docker
|
||||||
|
.dockerignore
|
||||||
|
Dockerfile*
|
||||||
|
docker-compose*.yml
|
||||||
|
|
||||||
|
# IDE
|
||||||
|
.vscode/
|
||||||
|
.idea/
|
||||||
|
*.swp
|
||||||
|
*.swo
|
||||||
|
*~
|
||||||
|
|
||||||
|
# OS
|
||||||
|
.DS_Store
|
||||||
|
.DS_Store?
|
||||||
|
._*
|
||||||
|
.Spotlight-V100
|
||||||
|
.Trashes
|
||||||
|
ehthumbs.db
|
||||||
|
Thumbs.db
|
||||||
|
|
||||||
|
# Application specific
|
||||||
|
uploads/
|
||||||
|
storage/
|
||||||
|
public/uploads/
|
||||||
|
|
||||||
|
# Forge Platform specific
|
||||||
|
forge-config.json
|
||||||
|
.forge/
|
||||||
|
deployment-keys/
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2024 Keylink IT - Allen McGhan
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Additional Terms for Keylink IT Forge Platform
|
||||||
|
|
||||||
|
This software is developed as part of the Keylink IT Forge platform for
|
||||||
|
educational technology deployment. While the core software is MIT licensed,
|
||||||
|
the following additional terms apply:
|
||||||
|
|
||||||
|
### Educational Use
|
||||||
|
This software is specifically designed for educational purposes including:
|
||||||
|
- Scout programs and merit badge preparation
|
||||||
|
- Amateur radio license examination preparation
|
||||||
|
- STEM education curriculum enhancement
|
||||||
|
- Lifelong learning and skill development
|
||||||
|
|
||||||
|
### Brand and Trademark
|
||||||
|
"MorseQuest" name and associated branding elements (logos, color schemes,
|
||||||
|
visual identity) are proprietary to Keylink IT and are not covered under
|
||||||
|
this MIT license. Use of branding elements requires separate permission.
|
||||||
|
|
||||||
|
### Forge Platform Integration
|
||||||
|
Deployment through the Keylink IT Forge platform includes additional
|
||||||
|
commercial terms for:
|
||||||
|
- White-label customization services
|
||||||
|
- Multi-tenant deployment capabilities
|
||||||
|
- Professional support and maintenance
|
||||||
|
- Revenue sharing agreements
|
||||||
|
|
||||||
|
Contact Allen McGhan at Keylink IT for commercial licensing and Forge
|
||||||
|
platform deployment arrangements.
|
||||||
@@ -0,0 +1,210 @@
|
|||||||
|
# ⚡ MorseQuest
|
||||||
|
|
||||||
|
> *Adventure-based Morse code learning with amateur radio mastery*
|
||||||
|
|
||||||
|
[](https://opensource.org/licenses/MIT)
|
||||||
|
[](https://git.keylinkit.net/games/morsequest)
|
||||||
|
[](https://git.keylinkit.net/games/morsequest)
|
||||||
|
|
||||||
|
## 🎯 Overview
|
||||||
|
|
||||||
|
**MorseQuest** is a gamified amateur radio education platform that teaches Morse code through personalized mnemonic creation and progressive adventures. Built for Scout programs, amateur radio enthusiasts, STEM education, and lifelong learners.
|
||||||
|
|
||||||
|
### ⚡ Key Features
|
||||||
|
|
||||||
|
- **🧠 Personal Memory System**: Create your own mnemonic phrases for superior retention
|
||||||
|
- **🎮 Quest Progression**: 6 adventure levels + complete amateur radio license prep
|
||||||
|
- **🎵 Multi-Modal Learning**: Synchronized audio-visual Morse code presentation
|
||||||
|
- **🏆 Achievement System**: Points, badges, streaks, and rank advancement
|
||||||
|
- **⚔️ Adventure Theme**: Quest-based learning with gentle gaming elements
|
||||||
|
- **📱 Mobile-First**: Works perfectly on all devices
|
||||||
|
|
||||||
|
## 🚀 Quick Start
|
||||||
|
|
||||||
|
### For Developers
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Clone the repository
|
||||||
|
git clone https://git.keylinkit.net/games/morsequest.git
|
||||||
|
cd morsequest
|
||||||
|
|
||||||
|
# Install dependencies
|
||||||
|
npm install
|
||||||
|
|
||||||
|
# Start development server
|
||||||
|
npm run dev
|
||||||
|
|
||||||
|
# Open browser to http://localhost:3000
|
||||||
|
```
|
||||||
|
|
||||||
|
### For Deployment
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Build and run with Docker
|
||||||
|
docker-compose up -d
|
||||||
|
|
||||||
|
# Access at http://localhost:3000
|
||||||
|
```
|
||||||
|
|
||||||
|
## 🎮 Game Experience
|
||||||
|
|
||||||
|
### **Quest Structure**
|
||||||
|
```
|
||||||
|
Level 1 - Novice (0-1K pts): Learn basic letters through adventure stories
|
||||||
|
Level 2 - Operator (1K-5K pts): Simple words and messages
|
||||||
|
Level 3 - General (5K-15K pts): Complex telegraph scenarios
|
||||||
|
Level 4 - Extra (15K-50K pts): Multi-part adventures
|
||||||
|
Level 5 - Expert (50K-150K pts): High-speed challenges
|
||||||
|
Level 6 - Legend (150K+ pts): Master-level quests
|
||||||
|
```
|
||||||
|
|
||||||
|
### **Adventure Learning**
|
||||||
|
- **Personal Mnemonics**: "Create memory phrases where short words are dots, LONG words are dashes"
|
||||||
|
- **Story-Driven**: Each level has adventure scenarios and challenges
|
||||||
|
- **No Penalties**: Wrong answers just mean "try again, adventurer!"
|
||||||
|
- **Progressive**: Gentle difficulty curve prevents frustration
|
||||||
|
|
||||||
|
## 💰 Business Model
|
||||||
|
|
||||||
|
### **Free Adventure**
|
||||||
|
- Complete Morse code quest (6 levels)
|
||||||
|
- First 3 amateur radio modules
|
||||||
|
- Basic progress tracking and achievements
|
||||||
|
|
||||||
|
### **Premium Quest** ($9.95/year Individual, $19.95/year Family)
|
||||||
|
- Complete amateur radio license preparation (Technician, General, Extra)
|
||||||
|
- 1,400+ official exam questions with explanations
|
||||||
|
- Advanced analytics and progress tracking
|
||||||
|
- Unlimited speed challenges and practice modes
|
||||||
|
|
||||||
|
### **Launch Strategy**
|
||||||
|
- **First year completely free** for all players to build community
|
||||||
|
- **Admin controls** to activate premium when ready
|
||||||
|
- **Early adopter rewards** for loyalty and testimonials
|
||||||
|
|
||||||
|
## 🎯 Target Markets
|
||||||
|
|
||||||
|
1. **Amateur Radio Community** (800K+ licensed operators + aspiring hams)
|
||||||
|
2. **Scout Programs** (Merit badge prep, group activities, Pack 404 pilot)
|
||||||
|
3. **STEM Education** (Schools, colleges, communication curriculum)
|
||||||
|
4. **Gaming/Learning** (Adventure-based education enthusiasts)
|
||||||
|
|
||||||
|
## 🛠️ Technical Stack
|
||||||
|
|
||||||
|
- **Frontend**: React 18+, TypeScript, adventure-themed CSS
|
||||||
|
- **Backend**: Node.js, Express, SQLite/PostgreSQL
|
||||||
|
- **Payments**: Authorize.net integration with freemium model
|
||||||
|
- **Deployment**: Docker, nginx, SSL/HTTPS
|
||||||
|
- **Audio**: Web Audio API for precise Morse timing
|
||||||
|
- **Analytics**: Learning progression and quest completion tracking
|
||||||
|
|
||||||
|
## 📈 Development Roadmap
|
||||||
|
|
||||||
|
### **Phase 1: Core Quest** (10-12 weeks)
|
||||||
|
- [ ] Personal mnemonic creation system
|
||||||
|
- [ ] Complete Morse code adventure (6 levels)
|
||||||
|
- [ ] Audio-visual quest presentation
|
||||||
|
- [ ] Achievement and progression system
|
||||||
|
- [ ] Mobile-responsive adventure interface
|
||||||
|
|
||||||
|
### **Phase 2: Premium Expansion** (8-10 weeks)
|
||||||
|
- [ ] Amateur radio license quest modules
|
||||||
|
- [ ] Authorize.net premium subscription
|
||||||
|
- [ ] Admin dashboard and user management
|
||||||
|
- [ ] Advanced analytics and reporting
|
||||||
|
|
||||||
|
### **Phase 3: Community Platform** (6-8 weeks)
|
||||||
|
- [ ] Multiplayer features and leaderboards
|
||||||
|
- [ ] White-label deployment for organizations
|
||||||
|
- [ ] Advanced learning analytics
|
||||||
|
- [ ] Performance optimization and scaling
|
||||||
|
|
||||||
|
## 🎨 Brand Identity
|
||||||
|
|
||||||
|
### **Adventure Theme**
|
||||||
|
- **Colors**: Quest gold (#D4AF37), adventure blue (#4169E1), brass (#CD7F32)
|
||||||
|
- **Typography**: Adventure-ready serif headers, clean sans-serif body
|
||||||
|
- **Iconography**: Telegraph keys, quest gems, achievement badges
|
||||||
|
- **Experience**: Story-driven learning with gentle gaming elements
|
||||||
|
|
||||||
|
### **Voice & Tone**
|
||||||
|
- **Encouraging**: "Great work, adventurer!" not "Incorrect answer"
|
||||||
|
- **Adventure-focused**: Quest terminology without being overwhelming
|
||||||
|
- **Educational**: Serious learning disguised as engaging adventure
|
||||||
|
- **Inclusive**: Welcoming to all ages and skill levels
|
||||||
|
|
||||||
|
## 📊 Success Metrics
|
||||||
|
|
||||||
|
### **Quest Engagement**
|
||||||
|
- 85% complete personal mnemonic creation
|
||||||
|
- 70% return within 7 days for next quest
|
||||||
|
- 15% convert to premium adventures
|
||||||
|
- 85% player satisfaction score
|
||||||
|
|
||||||
|
### **Learning Effectiveness**
|
||||||
|
- 85% accuracy on common letters after 3 quests
|
||||||
|
- 90%+ amateur radio exam pass rate for premium players
|
||||||
|
- 70% knowledge retention after 1 week
|
||||||
|
|
||||||
|
### **Business Success**
|
||||||
|
- 5,000+ registered adventurers in Year 1
|
||||||
|
- $75K+ ARR by Year 3
|
||||||
|
- 10+ Scout council partnerships
|
||||||
|
- 5+ ham radio club endorsements
|
||||||
|
|
||||||
|
## 🤝 Contributing
|
||||||
|
|
||||||
|
Join the adventure! We welcome contributions from the amateur radio and educational gaming communities.
|
||||||
|
|
||||||
|
### **How to Contribute**
|
||||||
|
1. Fork the repository
|
||||||
|
2. Create a quest branch (`git checkout -b quest/amazing-feature`)
|
||||||
|
3. Commit your adventures (`git commit -m 'Add amazing quest feature'`)
|
||||||
|
4. Push to the branch (`git push origin quest/amazing-feature`)
|
||||||
|
5. Open a Pull Request
|
||||||
|
|
||||||
|
### **Adventure Guidelines**
|
||||||
|
- Maintain the quest/adventure theme
|
||||||
|
- Focus on educational value with gaming elements
|
||||||
|
- Ensure mobile-friendly adventures
|
||||||
|
- Add tests for new quest features
|
||||||
|
- Update adventure documentation
|
||||||
|
|
||||||
|
## 📞 Quest Masters
|
||||||
|
|
||||||
|
**Lead Developer**: Allen McGhan
|
||||||
|
**Organization**: Keylink IT
|
||||||
|
**Location**: Hendersonville, TN
|
||||||
|
**Specialties**: Amateur Radio Education, Scout Adventures, Gaming Platforms
|
||||||
|
|
||||||
|
### **Adventure Community**
|
||||||
|
- **Pilot Quest**: Pack 404 Scouts (Hendersonville, TN)
|
||||||
|
- **Amateur Radio**: General license holder, active in local clubs
|
||||||
|
- **Educational Gaming**: 160+ client MSP background
|
||||||
|
|
||||||
|
### **Business Adventures**
|
||||||
|
- White-label quest deployments
|
||||||
|
- Educational institution licensing
|
||||||
|
- Scout council adventure partnerships
|
||||||
|
- Ham radio club quest integrations
|
||||||
|
|
||||||
|
## 📝 License
|
||||||
|
|
||||||
|
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
|
||||||
|
|
||||||
|
**Copyright (c) 2024 Keylink IT - Allen McGhan**
|
||||||
|
|
||||||
|
## 🎯 Forge Platform
|
||||||
|
|
||||||
|
This adventure is built for deployment on the **Keylink IT Forge** platform, providing:
|
||||||
|
- Streamlined Docker deployment
|
||||||
|
- White-label adventure customization
|
||||||
|
- Educational institution quest management
|
||||||
|
- Revenue sharing and analytics
|
||||||
|
- Professional support and maintenance
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
*Built with ❤️ for adventurous learners and the amateur radio community*
|
||||||
|
|
||||||
|
**Ready to begin your Morse code adventure?** ⚡ **Start your quest today!** 🚀
|
||||||
@@ -0,0 +1,62 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" width="80" height="80">
|
||||||
|
<defs>
|
||||||
|
<radialGradient id="expertGradient" cx="0.5" cy="0.3">
|
||||||
|
<stop offset="0%" stop-color="#FFD700"/>
|
||||||
|
<stop offset="50%" stop-color="#FFA500"/>
|
||||||
|
<stop offset="100%" stop-color="#DAA520"/>
|
||||||
|
</radialGradient>
|
||||||
|
<radialGradient id="gemGradient" cx="0.3" cy="0.3">
|
||||||
|
<stop offset="0%" stop-color="#FFFFFF"/>
|
||||||
|
<stop offset="50%" stop-color="#87CEEB"/>
|
||||||
|
<stop offset="100%" stop-color="#4169E1"/>
|
||||||
|
</radialGradient>
|
||||||
|
<filter id="expertShadow">
|
||||||
|
<feDropShadow dx="2" dy="2" stdDeviation="3" flood-color="#000" flood-opacity="0.4"/>
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<!-- Badge star shape -->
|
||||||
|
<g transform="translate(40, 40)">
|
||||||
|
<polygon points="0,-32 8,-10 30,-10 15,2 23,24 0,12 -23,24 -15,2 -30,-10 -8,-10"
|
||||||
|
fill="url(#expertGradient)" stroke="#B8860B" stroke-width="2" filter="url(#expertShadow)"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Inner circle -->
|
||||||
|
<circle cx="40" cy="40" r="20" fill="#8B0000" stroke="#DAA520" stroke-width="2"/>
|
||||||
|
|
||||||
|
<!-- Central gem -->
|
||||||
|
<circle cx="40" cy="35" r="6" fill="url(#gemGradient)" stroke="#4169E1" stroke-width="1"/>
|
||||||
|
|
||||||
|
<!-- Telegraph key symbol -->
|
||||||
|
<g transform="translate(40, 45) scale(0.5)">
|
||||||
|
<rect x="-8" y="-2" width="16" height="3" rx="1.5" fill="#DAA520"/>
|
||||||
|
<circle cx="-8" cy="0" r="3" fill="#DAA520"/>
|
||||||
|
<circle cx="8" cy="0" r="2" fill="#DAA520"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- "E" for Expert -->
|
||||||
|
<text x="40" y="32" font-family="serif" font-size="12" font-weight="bold"
|
||||||
|
fill="#FFFFFF" text-anchor="middle">E</text>
|
||||||
|
|
||||||
|
<!-- Decorative corners -->
|
||||||
|
<g transform="translate(15, 15)">
|
||||||
|
<polygon points="0,0 3,1 1,3" fill="#DAA520"/>
|
||||||
|
</g>
|
||||||
|
<g transform="translate(65, 15)">
|
||||||
|
<polygon points="0,0 -3,1 -1,3" fill="#DAA520"/>
|
||||||
|
</g>
|
||||||
|
<g transform="translate(15, 65)">
|
||||||
|
<polygon points="0,0 3,-1 1,-3" fill="#DAA520"/>
|
||||||
|
</g>
|
||||||
|
<g transform="translate(65, 65)">
|
||||||
|
<polygon points="0,0 -3,-1 -1,-3" fill="#DAA520"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Lightning bolts for speed -->
|
||||||
|
<g transform="translate(25, 40)">
|
||||||
|
<path d="M0,-5 L3,-1 L1,0 L4,4 L-1,1 L1,0 Z" fill="#FFFF00" opacity="0.8"/>
|
||||||
|
</g>
|
||||||
|
<g transform="translate(55, 40)">
|
||||||
|
<path d="M0,-5 L3,-1 L1,0 L4,4 L-1,1 L1,0 Z" fill="#FFFF00" opacity="0.8"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.3 KiB |
@@ -0,0 +1,46 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" width="80" height="80">
|
||||||
|
<defs>
|
||||||
|
<radialGradient id="noviceGradient" cx="0.5" cy="0.3">
|
||||||
|
<stop offset="0%" stop-color="#CD7F32"/>
|
||||||
|
<stop offset="70%" stop-color="#A0522D"/>
|
||||||
|
<stop offset="100%" stop-color="#8B4513"/>
|
||||||
|
</radialGradient>
|
||||||
|
<radialGradient id="noviceGemGradient" cx="0.3" cy="0.3">
|
||||||
|
<stop offset="0%" stop-color="#87CEEB"/>
|
||||||
|
<stop offset="50%" stop-color="#4169E1"/>
|
||||||
|
<stop offset="100%" stop-color="#191970"/>
|
||||||
|
</radialGradient>
|
||||||
|
<filter id="badgeShadow">
|
||||||
|
<feDropShadow dx="2" dy="2" stdDeviation="2" flood-color="#000" flood-opacity="0.3"/>
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<!-- Badge circle -->
|
||||||
|
<circle cx="40" cy="40" r="36" fill="url(#noviceGradient)" stroke="#654321" stroke-width="2" filter="url(#badgeShadow)"/>
|
||||||
|
|
||||||
|
<!-- Inner ring -->
|
||||||
|
<circle cx="40" cy="40" r="30" fill="none" stroke="#F4A460" stroke-width="1.5"/>
|
||||||
|
|
||||||
|
<!-- Quest shield (novice crest) -->
|
||||||
|
<g transform="translate(40, 38)">
|
||||||
|
<path d="M-12,-10 L12,-10 L12,2 Q12,10 0,16 Q-12,10 -12,2 Z"
|
||||||
|
fill="#F4A460" stroke="#654321" stroke-width="1.2"/>
|
||||||
|
<!-- Quest gem on shield -->
|
||||||
|
<circle cx="0" cy="-2" r="3.5" fill="url(#noviceGemGradient)" stroke="#4169E1" stroke-width="0.6"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- "N" for Novice -->
|
||||||
|
<text x="40" y="61" font-family="serif" font-size="14" font-weight="bold"
|
||||||
|
fill="#F4A460" text-anchor="middle">NOVICE</text>
|
||||||
|
|
||||||
|
<!-- Stars around the edge -->
|
||||||
|
<g transform="translate(40, 15)">
|
||||||
|
<polygon points="0,-3 1,0 4,0 2,2 3,5 0,3 -3,5 -2,2 -4,0 -1,0" fill="#F4A460"/>
|
||||||
|
</g>
|
||||||
|
<g transform="translate(65, 40)">
|
||||||
|
<polygon points="0,-2 0.5,0 2,0 1,1 1.5,3 0,2 -1.5,3 -1,1 -2,0 -0.5,0" fill="#F4A460"/>
|
||||||
|
</g>
|
||||||
|
<g transform="translate(15, 40)">
|
||||||
|
<polygon points="0,-2 0.5,0 2,0 1,1 1.5,3 0,2 -1.5,3 -1,1 -2,0 -0.5,0" fill="#F4A460"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.8 KiB |
@@ -0,0 +1,21 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 24" width="48" height="24">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="dashGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||||
|
<stop offset="0%" stop-color="#FFD700"/>
|
||||||
|
<stop offset="50%" stop-color="#DAA520"/>
|
||||||
|
<stop offset="100%" stop-color="#B8860B"/>
|
||||||
|
</linearGradient>
|
||||||
|
<filter id="dashShadow">
|
||||||
|
<feDropShadow dx="1" dy="2" stdDeviation="1" flood-color="#8B4513" flood-opacity="0.5"/>
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<!-- Outer glow -->
|
||||||
|
<rect x="2" y="2" width="44" height="20" rx="10" fill="#D4AF37" opacity="0.2"/>
|
||||||
|
|
||||||
|
<!-- Main dash -->
|
||||||
|
<rect x="6" y="6" width="36" height="12" rx="6" fill="url(#dashGradient)" filter="url(#dashShadow)"/>
|
||||||
|
|
||||||
|
<!-- Highlight -->
|
||||||
|
<rect x="8" y="8" width="12" height="4" rx="2" fill="#FFFF88" opacity="0.6"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 825 B |
@@ -0,0 +1,21 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
|
||||||
|
<defs>
|
||||||
|
<radialGradient id="dotGradient" cx="0.3" cy="0.3">
|
||||||
|
<stop offset="0%" stop-color="#FFD700"/>
|
||||||
|
<stop offset="50%" stop-color="#DAA520"/>
|
||||||
|
<stop offset="100%" stop-color="#B8860B"/>
|
||||||
|
</radialGradient>
|
||||||
|
<filter id="dotShadow">
|
||||||
|
<feDropShadow dx="1" dy="1" stdDeviation="1" flood-color="#8B4513" flood-opacity="0.5"/>
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<!-- Outer glow -->
|
||||||
|
<circle cx="12" cy="12" r="10" fill="#D4AF37" opacity="0.2"/>
|
||||||
|
|
||||||
|
<!-- Main dot -->
|
||||||
|
<circle cx="12" cy="12" r="6" fill="url(#dotGradient)" filter="url(#dotShadow)"/>
|
||||||
|
|
||||||
|
<!-- Highlight -->
|
||||||
|
<circle cx="10" cy="10" r="2" fill="#FFFF88" opacity="0.6"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 751 B |
@@ -0,0 +1,33 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 40" width="60" height="40">
|
||||||
|
<defs>
|
||||||
|
<radialGradient id="brassGradient" cx="0.3" cy="0.3">
|
||||||
|
<stop offset="0%" stop-color="#FFD700"/>
|
||||||
|
<stop offset="40%" stop-color="#DAA520"/>
|
||||||
|
<stop offset="100%" stop-color="#B8860B"/>
|
||||||
|
</radialGradient>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<!-- Key base -->
|
||||||
|
<ellipse cx="30" cy="28" rx="20" ry="7" fill="#654321"/>
|
||||||
|
<ellipse cx="30" cy="26" rx="20" ry="7" fill="url(#brassGradient)"/>
|
||||||
|
|
||||||
|
<!-- Key lever -->
|
||||||
|
<rect x="15" y="19" width="35" height="5" rx="2.5" fill="url(#brassGradient)"/>
|
||||||
|
|
||||||
|
<!-- Key knob (left side) -->
|
||||||
|
<circle cx="15" cy="22" r="6" fill="#654321"/>
|
||||||
|
<circle cx="15" cy="21" r="6" fill="url(#brassGradient)"/>
|
||||||
|
<circle cx="15" cy="20" r="3" fill="#FFD700"/>
|
||||||
|
|
||||||
|
<!-- Connection point (right side) -->
|
||||||
|
<circle cx="50" cy="22" r="4" fill="#654321"/>
|
||||||
|
<circle cx="50" cy="21" r="4" fill="url(#brassGradient)"/>
|
||||||
|
|
||||||
|
<!-- Connection wires -->
|
||||||
|
<path d="M35,23 Q45,15 55,10" stroke="#654321" stroke-width="1.5" fill="none"/>
|
||||||
|
<path d="M35,23 Q45,30 55,35" stroke="#654321" stroke-width="1.5" fill="none"/>
|
||||||
|
|
||||||
|
<!-- Base mounting screws -->
|
||||||
|
<circle cx="20" cy="26" r="1" fill="#8B4513"/>
|
||||||
|
<circle cx="40" cy="26" r="1" fill="#8B4513"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
@@ -0,0 +1,88 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 80" width="600" height="80">
|
||||||
|
<defs>
|
||||||
|
<!-- Gradient for telegraph key -->
|
||||||
|
<radialGradient id="brassGradient" cx="0.3" cy="0.3">
|
||||||
|
<stop offset="0%" stop-color="#FFD700"/>
|
||||||
|
<stop offset="40%" stop-color="#DAA520"/>
|
||||||
|
<stop offset="100%" stop-color="#B8860B"/>
|
||||||
|
</radialGradient>
|
||||||
|
|
||||||
|
<!-- Text gradient -->
|
||||||
|
<linearGradient id="textGradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||||
|
<stop offset="0%" stop-color="#8B4513"/>
|
||||||
|
<stop offset="50%" stop-color="#D4AF37"/>
|
||||||
|
<stop offset="100%" stop-color="#CD7F32"/>
|
||||||
|
</linearGradient>
|
||||||
|
|
||||||
|
<!-- Quest gem gradient -->
|
||||||
|
<radialGradient id="gemGradient" cx="0.3" cy="0.3">
|
||||||
|
<stop offset="0%" stop-color="#87CEEB"/>
|
||||||
|
<stop offset="50%" stop-color="#4169E1"/>
|
||||||
|
<stop offset="100%" stop-color="#191970"/>
|
||||||
|
</radialGradient>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<!-- Telegraph key assembly -->
|
||||||
|
<g transform="translate(20, 20)">
|
||||||
|
<!-- Key base -->
|
||||||
|
<ellipse cx="20" cy="35" rx="15" ry="6" fill="#8B4513"/>
|
||||||
|
<ellipse cx="20" cy="33" rx="15" ry="6" fill="url(#brassGradient)"/>
|
||||||
|
|
||||||
|
<!-- Key lever -->
|
||||||
|
<rect x="12" y="28" width="30" height="4" rx="2" fill="url(#brassGradient)"/>
|
||||||
|
<circle cx="42" cy="30" r="3" fill="#8B4513"/>
|
||||||
|
<circle cx="42" cy="29" r="3" fill="url(#brassGradient)"/>
|
||||||
|
|
||||||
|
<!-- Key knob -->
|
||||||
|
<circle cx="12" cy="30" r="4" fill="#8B4513"/>
|
||||||
|
<circle cx="12" cy="29" r="4" fill="url(#brassGradient)"/>
|
||||||
|
<circle cx="12" cy="28" r="2" fill="#FFD700"/>
|
||||||
|
|
||||||
|
<!-- Quest gem on key -->
|
||||||
|
<circle cx="20" cy="25" r="2.5" fill="url(#gemGradient)" stroke="#4169E1" stroke-width="0.5"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Main title text -->
|
||||||
|
<text x="80" y="35" font-family="serif" font-size="26" font-weight="bold" fill="url(#textGradient)">
|
||||||
|
MORSEQUEST
|
||||||
|
</text>
|
||||||
|
|
||||||
|
<!-- Morse code visualization -->
|
||||||
|
<g transform="translate(80, 50)">
|
||||||
|
<!-- Dots and dashes representing "CQ" (calling anyone) -->
|
||||||
|
<circle cx="0" cy="8" r="2" fill="#D4AF37"/>
|
||||||
|
<rect x="8" y="6" width="8" height="4" rx="2" fill="#D4AF37"/>
|
||||||
|
<circle cx="22" cy="8" r="2" fill="#D4AF37"/>
|
||||||
|
<rect x="30" y="6" width="8" height="4" rx="2" fill="#D4AF37"/>
|
||||||
|
|
||||||
|
<rect x="50" y="6" width="8" height="4" rx="2" fill="#DAA520"/>
|
||||||
|
<rect x="62" y="6" width="8" height="4" rx="2" fill="#DAA520"/>
|
||||||
|
<circle cx="78" cy="8" r="2" fill="#DAA520"/>
|
||||||
|
<rect x="86" y="6" width="8" height="4" rx="2" fill="#DAA520"/>
|
||||||
|
|
||||||
|
<!-- Signal waves -->
|
||||||
|
<path d="M0,15 Q15,10 30,15 T60,15 T90,15" stroke="#DAA520" stroke-width="1.5" fill="none" opacity="0.5"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Tagline -->
|
||||||
|
<text x="450" y="25" font-family="sans-serif" font-size="9" fill="#8B4513" text-anchor="middle">
|
||||||
|
Learn Morse Code
|
||||||
|
</text>
|
||||||
|
<text x="450" y="38" font-family="sans-serif" font-size="9" fill="#8B4513" text-anchor="middle">
|
||||||
|
Master Amateur Radio
|
||||||
|
</text>
|
||||||
|
<text x="450" y="51" font-family="sans-serif" font-size="9" fill="#8B4513" text-anchor="middle">
|
||||||
|
Adventure Awaits
|
||||||
|
</text>
|
||||||
|
|
||||||
|
<!-- Quest sword accent -->
|
||||||
|
<g transform="translate(570, 18)">
|
||||||
|
<rect x="0" y="-12" width="2.5" height="24" fill="#B8860B"/>
|
||||||
|
<rect x="-4" y="-14" width="11" height="3" fill="#DAA520"/>
|
||||||
|
<circle cx="1.25" cy="-16" r="1.8" fill="#4169E1"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Decorative accent line -->
|
||||||
|
<rect x="20" y="70" width="560" height="1.5" fill="#D4AF37" opacity="0.5"/>
|
||||||
|
<rect x="20" y="74" width="560" height="1.5" fill="#4169E1" opacity="0.4"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.4 KiB |
@@ -0,0 +1,80 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
|
||||||
|
<defs>
|
||||||
|
<!-- Gradient for telegraph key -->
|
||||||
|
<radialGradient id="brassGradient" cx="0.3" cy="0.3">
|
||||||
|
<stop offset="0%" stop-color="#FFD700"/>
|
||||||
|
<stop offset="40%" stop-color="#DAA520"/>
|
||||||
|
<stop offset="100%" stop-color="#B8860B"/>
|
||||||
|
</radialGradient>
|
||||||
|
|
||||||
|
<!-- Background gradient -->
|
||||||
|
<radialGradient id="bgGradient" cx="0.5" cy="0.3">
|
||||||
|
<stop offset="0%" stop-color="#F5E6D3"/>
|
||||||
|
<stop offset="70%" stop-color="#D4AF37" stop-opacity="0.3"/>
|
||||||
|
<stop offset="100%" stop-color="#4169E1" stop-opacity="0.25"/>
|
||||||
|
</radialGradient>
|
||||||
|
|
||||||
|
<!-- Quest gem gradient -->
|
||||||
|
<radialGradient id="gemGradient" cx="0.3" cy="0.3">
|
||||||
|
<stop offset="0%" stop-color="#87CEEB"/>
|
||||||
|
<stop offset="50%" stop-color="#4169E1"/>
|
||||||
|
<stop offset="100%" stop-color="#191970"/>
|
||||||
|
</radialGradient>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<!-- Background circle with adventure theme -->
|
||||||
|
<circle cx="50" cy="50" r="48" fill="url(#bgGradient)" stroke="#8B4513" stroke-width="2"/>
|
||||||
|
<circle cx="50" cy="50" r="45" fill="none" stroke="#D4AF37" stroke-width="1" opacity="0.5"/>
|
||||||
|
|
||||||
|
<!-- Telegraph key assembly - centered and larger -->
|
||||||
|
<g transform="translate(50, 50)">
|
||||||
|
<!-- Key base -->
|
||||||
|
<ellipse cx="0" cy="15" rx="18" ry="7" fill="#654321"/>
|
||||||
|
<ellipse cx="0" cy="13" rx="18" ry="7" fill="url(#brassGradient)"/>
|
||||||
|
|
||||||
|
<!-- Key lever -->
|
||||||
|
<rect x="-15" y="6" width="35" height="6" rx="3" fill="url(#brassGradient)"/>
|
||||||
|
<circle cx="20" cy="9" r="4" fill="#654321"/>
|
||||||
|
<circle cx="20" cy="8" r="4" fill="url(#brassGradient)"/>
|
||||||
|
|
||||||
|
<!-- Key knob -->
|
||||||
|
<circle cx="-15" cy="9" r="6" fill="#654321"/>
|
||||||
|
<circle cx="-15" cy="8" r="6" fill="url(#brassGradient)"/>
|
||||||
|
<circle cx="-15" cy="7" r="3" fill="#FFD700"/>
|
||||||
|
|
||||||
|
<!-- Connection posts -->
|
||||||
|
<rect x="5" y="13" width="3" height="8" fill="#654321"/>
|
||||||
|
<rect x="-8" y="13" width="3" height="8" fill="#654321"/>
|
||||||
|
|
||||||
|
<!-- Quest gem on key -->
|
||||||
|
<circle cx="0" cy="2" r="3.5" fill="url(#gemGradient)" stroke="#4169E1" stroke-width="0.6"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Morse code dots and dashes around the key -->
|
||||||
|
<g transform="translate(50, 25)">
|
||||||
|
<circle cx="-20" cy="0" r="2.5" fill="#D4AF37"/>
|
||||||
|
<rect x="-10" y="-1.5" width="8" height="3" rx="1.5" fill="#D4AF37"/>
|
||||||
|
<circle cx="5" cy="0" r="2.5" fill="#D4AF37"/>
|
||||||
|
<rect x="15" y="-1.5" width="8" height="3" rx="1.5" fill="#D4AF37"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Signal waves emanating from key -->
|
||||||
|
<g opacity="0.4">
|
||||||
|
<circle cx="50" cy="50" r="20" fill="none" stroke="#DAA520" stroke-width="1.5"/>
|
||||||
|
<circle cx="50" cy="50" r="30" fill="none" stroke="#4169E1" stroke-width="1"/>
|
||||||
|
<circle cx="50" cy="50" r="40" fill="none" stroke="#DAA520" stroke-width="0.5"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Quest sword accent -->
|
||||||
|
<g transform="translate(25, 25)">
|
||||||
|
<rect x="-1" y="-6" width="2" height="12" fill="#B8860B"/>
|
||||||
|
<rect x="-3" y="-7.5" width="6" height="2" fill="#DAA520"/>
|
||||||
|
<circle cx="0" cy="-9" r="1.6" fill="#4169E1"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Subtle accent line at base -->
|
||||||
|
<g transform="translate(50, 85)" opacity="0.6">
|
||||||
|
<rect x="-30" y="0" width="60" height="1.5" fill="#D4AF37"/>
|
||||||
|
<rect x="-30" y="3" width="60" height="1.5" fill="#4169E1" opacity="0.7"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.2 KiB |
@@ -0,0 +1,86 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 100" width="320" height="100">
|
||||||
|
<defs>
|
||||||
|
<!-- Gradient for telegraph key -->
|
||||||
|
<radialGradient id="brassGradient" cx="0.3" cy="0.3">
|
||||||
|
<stop offset="0%" stop-color="#FFD700"/>
|
||||||
|
<stop offset="40%" stop-color="#DAA520"/>
|
||||||
|
<stop offset="100%" stop-color="#B8860B"/>
|
||||||
|
</radialGradient>
|
||||||
|
|
||||||
|
<!-- Text gradient -->
|
||||||
|
<linearGradient id="textGradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||||
|
<stop offset="0%" stop-color="#8B4513"/>
|
||||||
|
<stop offset="50%" stop-color="#D4AF37"/>
|
||||||
|
<stop offset="100%" stop-color="#CD7F32"/>
|
||||||
|
</linearGradient>
|
||||||
|
|
||||||
|
<!-- Quest gem gradient -->
|
||||||
|
<radialGradient id="gemGradient" cx="0.3" cy="0.3">
|
||||||
|
<stop offset="0%" stop-color="#87CEEB"/>
|
||||||
|
<stop offset="50%" stop-color="#4169E1"/>
|
||||||
|
<stop offset="100%" stop-color="#191970"/>
|
||||||
|
</radialGradient>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<!-- Telegraph key assembly -->
|
||||||
|
<g transform="translate(20, 25)">
|
||||||
|
<!-- Key base -->
|
||||||
|
<ellipse cx="20" cy="35" rx="15" ry="6" fill="#8B4513"/>
|
||||||
|
<ellipse cx="20" cy="33" rx="15" ry="6" fill="url(#brassGradient)"/>
|
||||||
|
|
||||||
|
<!-- Key lever -->
|
||||||
|
<rect x="12" y="28" width="30" height="4" rx="2" fill="url(#brassGradient)"/>
|
||||||
|
<circle cx="42" cy="30" r="3" fill="#8B4513"/>
|
||||||
|
<circle cx="42" cy="29" r="3" fill="url(#brassGradient)"/>
|
||||||
|
|
||||||
|
<!-- Key knob -->
|
||||||
|
<circle cx="12" cy="30" r="4" fill="#8B4513"/>
|
||||||
|
<circle cx="12" cy="29" r="4" fill="url(#brassGradient)"/>
|
||||||
|
<circle cx="12" cy="28" r="2" fill="#FFD700"/>
|
||||||
|
|
||||||
|
<!-- Quest gem on key -->
|
||||||
|
<circle cx="20" cy="25" r="3" fill="url(#gemGradient)" stroke="#4169E1" stroke-width="0.5"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- "MORSE" text -->
|
||||||
|
<text x="80" y="40" font-family="serif" font-size="32" font-weight="bold" fill="url(#textGradient)">
|
||||||
|
MORSE
|
||||||
|
</text>
|
||||||
|
|
||||||
|
<!-- "QUEST" text with adventure styling -->
|
||||||
|
<text x="80" y="75" font-family="serif" font-size="32" font-weight="bold" fill="url(#textGradient)">
|
||||||
|
QUEST
|
||||||
|
</text>
|
||||||
|
|
||||||
|
<!-- Quest sword accent -->
|
||||||
|
<g transform="translate(290, 35)">
|
||||||
|
<rect x="0" y="-15" width="3" height="30" fill="#B8860B"/>
|
||||||
|
<rect x="-5" y="-18" width="13" height="4" fill="#DAA520"/>
|
||||||
|
<circle cx="1.5" cy="-20" r="2" fill="#4169E1"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Morse code dots and dashes -->
|
||||||
|
<g transform="translate(85, 55)">
|
||||||
|
<!-- Spell out "CQ" in Morse -->
|
||||||
|
<circle cx="0" cy="8" r="2" fill="#D4AF37"/>
|
||||||
|
<rect x="8" y="6" width="8" height="4" rx="2" fill="#D4AF37"/>
|
||||||
|
<circle cx="22" cy="8" r="2" fill="#D4AF37"/>
|
||||||
|
<rect x="30" y="6" width="8" height="4" rx="2" fill="#D4AF37"/>
|
||||||
|
|
||||||
|
<rect x="50" y="6" width="8" height="4" rx="2" fill="#DAA520"/>
|
||||||
|
<rect x="62" y="6" width="8" height="4" rx="2" fill="#DAA520"/>
|
||||||
|
<circle cx="78" cy="8" r="2" fill="#DAA520"/>
|
||||||
|
<rect x="86" y="6" width="8" height="4" rx="2" fill="#DAA520"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Tagline -->
|
||||||
|
<text x="160" y="15" font-family="sans-serif" font-size="9" fill="#8B4513" text-anchor="middle">
|
||||||
|
Learn Morse Code • Master Amateur Radio • Adventure Awaits
|
||||||
|
</text>
|
||||||
|
|
||||||
|
<!-- Signal waves -->
|
||||||
|
<g opacity="0.3">
|
||||||
|
<path d="M75,80 Q85,75 95,80 T115,80 T135,80" stroke="#DAA520" stroke-width="1" fill="none"/>
|
||||||
|
<path d="M75,85 Q90,78 105,85 T125,85 T145,85" stroke="#DAA520" stroke-width="0.8" fill="none"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.2 KiB |
@@ -0,0 +1,261 @@
|
|||||||
|
# 🎨 MorseQuest Brand Guidelines
|
||||||
|
|
||||||
|
## Visual Identity Overview
|
||||||
|
|
||||||
|
**MorseQuest** uses an adventure / quest theme that balances authenticity with modern educational design principles. The brand conveys exploration, learning, and technical mastery through a quest-driven aesthetic with gentle gaming elements.
|
||||||
|
|
||||||
|
## Color Palette
|
||||||
|
|
||||||
|
### Primary Colors
|
||||||
|
- **Quest Gold**: `#D4AF37` - Primary brand color, represents brass telegraph equipment and treasure
|
||||||
|
- **Adventure Blue**: `#4169E1` - Secondary brand color, represents quest gems and the open horizon
|
||||||
|
- **Brass**: `#CD7F32` - Accent color, represents authentic equipment and forged tools
|
||||||
|
|
||||||
|
### Secondary Colors
|
||||||
|
- **Aged Parchment**: `#F5E6D3` - Background color, represents quest scrolls
|
||||||
|
- **Deep Forest**: `#3C2415` - UI elements, represents night-camp and adventurer gear
|
||||||
|
- **Signal Gold**: `#FFD700` - Highlights and active states
|
||||||
|
- **Quest Red**: `#CC0000` - Error states and urgent CTAs
|
||||||
|
|
||||||
|
### Supporting Colors
|
||||||
|
- **Brass Dust**: `#B8860B` - Muted accent
|
||||||
|
- **Telegraph Wire**: `#654321` - Border and line elements
|
||||||
|
- **Gem Sky**: `#87CEEB` - Success states and achievements
|
||||||
|
- **Midnight**: `#191970` - Adventure-blue depth and emphasis
|
||||||
|
|
||||||
|
## Typography
|
||||||
|
|
||||||
|
### Primary Font Stack
|
||||||
|
**Headers**: `"Cinzel", "MedievalSharp", serif`
|
||||||
|
- Adventure-ready serif for main headings
|
||||||
|
- Conveys quest narrative and heroic tone
|
||||||
|
- Available via Google Fonts
|
||||||
|
|
||||||
|
**Body Text**: `"Open Sans", sans-serif`
|
||||||
|
- Clean, readable sans-serif for content
|
||||||
|
- Excellent cross-platform compatibility
|
||||||
|
- Accessible at all sizes
|
||||||
|
|
||||||
|
**Code/Morse**: `"Source Code Pro", monospace`
|
||||||
|
- Technical content and Morse code display
|
||||||
|
- Clear distinction between dots and dashes
|
||||||
|
- Professional development feel
|
||||||
|
|
||||||
|
### Typography Scale
|
||||||
|
- **Hero Text**: 48px - Main landing page titles
|
||||||
|
- **Page Headers**: 32px - Section titles
|
||||||
|
- **Subheaders**: 24px - Component headers
|
||||||
|
- **Body Text**: 16px - Standard reading content
|
||||||
|
- **Caption Text**: 14px - Secondary information
|
||||||
|
- **Small Text**: 12px - Legal/disclaimer text
|
||||||
|
|
||||||
|
## Logo Usage
|
||||||
|
|
||||||
|
### Primary Logo
|
||||||
|
**File**: `primary-logo.svg`
|
||||||
|
- Full horizontal logo with telegraph key and quest gem
|
||||||
|
- Use for main branding, headers, marketing materials
|
||||||
|
- Minimum width: 300px
|
||||||
|
- Clear space: 1x logo height on all sides
|
||||||
|
|
||||||
|
### Horizontal Logo
|
||||||
|
**File**: `logo-horizontal.svg`
|
||||||
|
- Compact version for headers and wide spaces
|
||||||
|
- Use when vertical space is limited
|
||||||
|
- Minimum width: 200px
|
||||||
|
- Clear space: 0.5x logo height on all sides
|
||||||
|
|
||||||
|
### Icon Logo
|
||||||
|
**File**: `logo-icon.svg`
|
||||||
|
- Icon-only version for favicons and app icons
|
||||||
|
- Use at 32px and larger
|
||||||
|
- Square format with telegraph key focus
|
||||||
|
- Minimum size: 16px
|
||||||
|
|
||||||
|
## Iconography
|
||||||
|
|
||||||
|
### UI Icons
|
||||||
|
All icons follow the brass/telegraph theme with quest accents:
|
||||||
|
|
||||||
|
**Telegraph Key**: `telegraph-key.svg`
|
||||||
|
- Primary interaction icon
|
||||||
|
- Represents Morse code input/practice
|
||||||
|
- Use at 24px, 32px, or 48px
|
||||||
|
|
||||||
|
**Morse Dot**: `morse-dot.svg`
|
||||||
|
- Represents short Morse signals
|
||||||
|
- Consistent with audio/visual learning
|
||||||
|
- Use at 16px, 24px
|
||||||
|
|
||||||
|
**Morse Dash**: `morse-dash.svg`
|
||||||
|
- Represents long Morse signals
|
||||||
|
- 2:1 aspect ratio maintains proper Morse timing
|
||||||
|
- Use at 32x16px, 48x24px
|
||||||
|
|
||||||
|
### Achievement Badges
|
||||||
|
**Novice Badge**: `badge-novice.svg`
|
||||||
|
- Bronze-colored for beginning ranks
|
||||||
|
- Adventure crest for the first steps of the quest
|
||||||
|
- 80x80px standard size
|
||||||
|
|
||||||
|
**Expert Badge**: `badge-expert.svg`
|
||||||
|
- Gold-colored for advanced ranks
|
||||||
|
- Star shape with gems for mastery
|
||||||
|
- 80x80px standard size
|
||||||
|
|
||||||
|
## Voice & Tone
|
||||||
|
|
||||||
|
### Brand Personality
|
||||||
|
- **Educational**: Clearly instructional but never condescending
|
||||||
|
- **Adventurous**: Quest theme with gentle humor
|
||||||
|
- **Encouraging**: Positive reinforcement, no penalties for mistakes
|
||||||
|
- **Authentic**: Historically accurate telegraph references
|
||||||
|
- **Inclusive**: Accessible to all ages and skill levels
|
||||||
|
|
||||||
|
### Writing Guidelines
|
||||||
|
- Use quest terminology naturally (adventurer, quest, level, achievement)
|
||||||
|
- Include "STOP" in telegraph messages for authenticity
|
||||||
|
- Keep humor gentle and family-friendly
|
||||||
|
- Write in active voice for clarity
|
||||||
|
- Avoid technical jargon without explanation
|
||||||
|
|
||||||
|
### Example Voice
|
||||||
|
```
|
||||||
|
✓ "Great work, adventurer! You've mastered that signal."
|
||||||
|
✓ "Telegraph line connected! Ready for your next quest."
|
||||||
|
✓ "Time to upgrade your equipment, expert operator!"
|
||||||
|
|
||||||
|
✗ "Incorrect response detected."
|
||||||
|
✗ "User failed validation check."
|
||||||
|
✗ "Error in Morse code processing."
|
||||||
|
```
|
||||||
|
|
||||||
|
### Quest Messaging
|
||||||
|
- **Success**: "Adventure complete!" / "Quest cleared!"
|
||||||
|
- **Encouragement on miss**: "Try again, adventurer!"
|
||||||
|
- **Connection issue**: "Quest interrupted — reconnecting telegraph lines..."
|
||||||
|
- **Level-up**: "Continue your adventure — new quest unlocked!"
|
||||||
|
|
||||||
|
## UI Design Principles
|
||||||
|
|
||||||
|
### Layout
|
||||||
|
- **Adventure Theme**: UI should feel like an evolving quest log and telegraph station
|
||||||
|
- **Progressive Enhancement**: Equipment "upgrades" as the player advances
|
||||||
|
- **Clear Hierarchy**: Important elements use primary colors
|
||||||
|
- **Breathing Room**: Generous white space prevents clutter
|
||||||
|
|
||||||
|
### Interactive Elements
|
||||||
|
- **Brass Styling**: Buttons and controls use metallic gradients
|
||||||
|
- **Quest Accents**: Adventure-blue gems mark critical actions
|
||||||
|
- **Telegraph Animations**: Key presses and signal sending
|
||||||
|
- **Scroll Effects**: Results appear as printed quest messages
|
||||||
|
|
||||||
|
### Accessibility
|
||||||
|
- **High Contrast**: All text meets WCAG AA standards
|
||||||
|
- **Color Independence**: Never rely solely on color for meaning
|
||||||
|
- **Touch Targets**: Minimum 44px touch targets on mobile
|
||||||
|
- **Screen Readers**: Proper ARIA labels and semantic HTML
|
||||||
|
|
||||||
|
## Animation & Motion
|
||||||
|
|
||||||
|
### Micro-Interactions
|
||||||
|
- **Telegraph Key Press**: 200ms spring animation
|
||||||
|
- **Signal Flash**: Synchronized with audio timing
|
||||||
|
- **Quest Scroll**: 500ms slide-in effect for results
|
||||||
|
- **Points Animation**: Satisfying score increment with sound
|
||||||
|
|
||||||
|
### Timing Standards
|
||||||
|
- **Morse Dot**: 300ms duration (visual and audio)
|
||||||
|
- **Morse Dash**: 900ms duration (3:1 ratio to dot)
|
||||||
|
- **Element Gap**: 300ms between elements
|
||||||
|
- **Character Gap**: 900ms between characters
|
||||||
|
- **Word Gap**: 2100ms between words
|
||||||
|
|
||||||
|
## Asset Specifications
|
||||||
|
|
||||||
|
### File Formats
|
||||||
|
- **Logos**: SVG (vector), PNG fallbacks
|
||||||
|
- **Icons**: SVG preferred, 24x24px minimum
|
||||||
|
- **Badges**: SVG, 80x80px standard
|
||||||
|
- **Backgrounds**: SVG patterns, CSS gradients
|
||||||
|
|
||||||
|
### Naming Convention
|
||||||
|
```
|
||||||
|
primary-logo.svg - Main brand logo
|
||||||
|
logo-horizontal.svg - Wide format logo
|
||||||
|
logo-icon.svg - Icon/favicon version
|
||||||
|
telegraph-key.svg - UI icon for telegraph key
|
||||||
|
morse-dot.svg - Morse code dot symbol
|
||||||
|
morse-dash.svg - Morse code dash symbol
|
||||||
|
badge-{rank}.svg - Achievement badges
|
||||||
|
color-{name}.svg - Color swatches
|
||||||
|
```
|
||||||
|
|
||||||
|
### Export Settings
|
||||||
|
- **SVG**: Optimized, remove unnecessary metadata
|
||||||
|
- **PNG**: 2x and 3x retina versions for fallbacks
|
||||||
|
- **Favicon**: 16x16, 32x32, 48x48 ICO format
|
||||||
|
- **Web**: Optimized for fast loading
|
||||||
|
|
||||||
|
## Brand Applications
|
||||||
|
|
||||||
|
### Website Header
|
||||||
|
- Use horizontal logo at 300px width
|
||||||
|
- Quest gold (#D4AF37) on aged parchment background
|
||||||
|
- Include tagline: "Learn Morse Code • Master Amateur Radio • Adventure Awaits"
|
||||||
|
|
||||||
|
### Mobile App Icon
|
||||||
|
- Use icon logo version
|
||||||
|
- Ensure visibility at 16px for favicons
|
||||||
|
- Include proper iOS and Android format exports
|
||||||
|
|
||||||
|
### Educational Materials
|
||||||
|
- Primary logo for official documents
|
||||||
|
- Consistent color usage throughout
|
||||||
|
- Professional typography for credibility
|
||||||
|
|
||||||
|
### Social Media
|
||||||
|
- Square icon version for profile images
|
||||||
|
- Horizontal logo for cover images
|
||||||
|
- Consistent messaging and visual style
|
||||||
|
|
||||||
|
## Brand Don'ts
|
||||||
|
|
||||||
|
### Visual
|
||||||
|
- ❌ Don't distort logo proportions
|
||||||
|
- ❌ Don't use colors outside the defined palette
|
||||||
|
- ❌ Don't add drop shadows to logos
|
||||||
|
- ❌ Don't use the logo smaller than minimum sizes
|
||||||
|
- ❌ Don't place logos on busy backgrounds
|
||||||
|
|
||||||
|
### Voice
|
||||||
|
- ❌ Don't use overly complex fantasy slang
|
||||||
|
- ❌ Don't make jokes about failure or mistakes
|
||||||
|
- ❌ Don't use technical jargon without explanation
|
||||||
|
- ❌ Don't break the fourth wall unnecessarily
|
||||||
|
|
||||||
|
### Theme
|
||||||
|
- ❌ Don't lean into specific historical periods (no Wild West, no medieval-only)
|
||||||
|
- ❌ Don't use violent or aggressive imagery
|
||||||
|
- ❌ Don't stereotype or caricature cultures
|
||||||
|
- ❌ Don't sacrifice accessibility for aesthetic
|
||||||
|
|
||||||
|
## Implementation Checklist
|
||||||
|
|
||||||
|
### Development
|
||||||
|
- [ ] All colors defined as CSS custom properties
|
||||||
|
- [ ] Logo SVGs properly optimized and embedded
|
||||||
|
- [ ] Icon system implemented consistently
|
||||||
|
- [ ] Typography loaded with fallback fonts
|
||||||
|
- [ ] Brand voice implemented in all copy
|
||||||
|
|
||||||
|
### Quality Assurance
|
||||||
|
- [ ] Brand consistency across all pages
|
||||||
|
- [ ] Accessibility standards met (WCAG AA)
|
||||||
|
- [ ] Mobile responsiveness maintained
|
||||||
|
- [ ] Loading performance optimized
|
||||||
|
- [ ] Cross-browser compatibility verified
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**This brand system creates a cohesive, educational, and engaging experience that honors the heritage of amateur radio while making it accessible and fun for modern adventurers.**
|
||||||
@@ -0,0 +1,594 @@
|
|||||||
|
# 📋 PRODUCT REQUIREMENTS DOCUMENT
|
||||||
|
## **MorseQuest** ⚡
|
||||||
|
### *Complete Amateur Radio Education Platform*
|
||||||
|
|
||||||
|
**Version:** 1.0
|
||||||
|
**Date:** December 2024
|
||||||
|
**Prepared for:** Keylink IT Forge Development Team
|
||||||
|
**Prepared by:** Allen McGhan, Pack 404 Cubmaster & KIT Owner
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎯 **EXECUTIVE SUMMARY**
|
||||||
|
|
||||||
|
### **Product Vision**
|
||||||
|
Create an engaging, gamified platform that teaches Morse code and amateur radio concepts through personalized mnemonic creation and progressive challenges, themed around adventure and quest progression with gentle gaming elements.
|
||||||
|
|
||||||
|
### **Business Opportunity**
|
||||||
|
- **Primary Market:** 800,000+ licensed amateur radio operators plus aspiring hams
|
||||||
|
- **Secondary Markets:** Scout programs, STEM education, general learning enthusiasts
|
||||||
|
- **Revenue Potential:** $500K+ ARR within 3 years
|
||||||
|
- **Competitive Advantage:** Only adventure-themed amateur radio education platform with integrated Morse code training
|
||||||
|
|
||||||
|
### **Success Criteria**
|
||||||
|
- 5,000+ registered adventurers in Year 1
|
||||||
|
- 15% freemium conversion rate
|
||||||
|
- 85% player satisfaction score
|
||||||
|
- Integration with 10+ Scout councils and ham radio clubs
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 👥 **TARGET MARKET ANALYSIS**
|
||||||
|
|
||||||
|
### **Primary Users**
|
||||||
|
|
||||||
|
**1. Aspiring Ham Radio Operators (Ages 12-70)**
|
||||||
|
- **Pain Point:** Current exam prep is dry, boring flashcard drilling
|
||||||
|
- **Motivation:** Want to earn amateur radio license but need engaging study method
|
||||||
|
- **Success Metric:** 90%+ exam pass rate after completing our curriculum
|
||||||
|
|
||||||
|
**2. Scout Programs (Ages 8-17)**
|
||||||
|
- **Pain Point:** Traditional Morse code teaching is tedious and has high abandonment
|
||||||
|
- **Motivation:** Merit badge requirements, STEM education, group activities
|
||||||
|
- **Success Metric:** 80% completion rate vs 30% with traditional methods
|
||||||
|
|
||||||
|
**3. Licensed Hams Maintaining Skills (Ages 25-80)**
|
||||||
|
- **Pain Point:** Morse code skills atrophy without practice
|
||||||
|
- **Motivation:** Contest preparation, skill maintenance, nostalgia
|
||||||
|
- **Success Metric:** Measurable WPM improvement within 30 days
|
||||||
|
|
||||||
|
**4. STEM Educators (Ages 25-65)**
|
||||||
|
- **Pain Point:** Need engaging ways to teach communication technology concepts
|
||||||
|
- **Motivation:** Interactive curriculum that connects history with modern tech
|
||||||
|
- **Success Metric:** Classroom adoption and positive student engagement
|
||||||
|
|
||||||
|
### **Market Size**
|
||||||
|
- **Total Addressable Market:** $50M+ educational gaming market
|
||||||
|
- **Serviceable Market:** 2M+ potential amateur radio learners globally
|
||||||
|
- **Initial Target:** 10,000 adventurers in first 18 months
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎮 **CORE FEATURES & REQUIREMENTS**
|
||||||
|
|
||||||
|
### **1. Mnemonic Creation System** (CRITICAL)
|
||||||
|
|
||||||
|
**Pedagogical Foundation:**
|
||||||
|
Players must create personal memory phrases where short words represent dots (•) and long words represent dashes (−). This builds dual neural pathways for superior retention.
|
||||||
|
|
||||||
|
**Implementation Requirements:**
|
||||||
|
```
|
||||||
|
User Story: As a new adventurer, I need to create memorable phrases for each
|
||||||
|
Morse letter so I can quickly recognize patterns during my quest.
|
||||||
|
|
||||||
|
Acceptance Criteria:
|
||||||
|
✓ Guided tutorial explains dot=short word, dash=long word concept
|
||||||
|
✓ Input validation ensures phrases follow proper pattern structure
|
||||||
|
✓ 50 points awarded per mnemonic phrase created (600 total possible)
|
||||||
|
✓ Printable reference sheet generated with player's custom phrases
|
||||||
|
✓ Skip option available but caps progression at Operator level
|
||||||
|
✓ Examples provided but never forced on players
|
||||||
|
```
|
||||||
|
|
||||||
|
**Technical Specifications:**
|
||||||
|
- Real-time pattern validation as player types
|
||||||
|
- Character count analysis (1-2 syllables = dot, 3+ = dash)
|
||||||
|
- Local storage backup of player mnemonics
|
||||||
|
- Export to printable PDF format
|
||||||
|
- Import/export for device switching
|
||||||
|
|
||||||
|
### **2. Progressive Difficulty Curriculum**
|
||||||
|
|
||||||
|
**Morse Code Mastery Track (Always Free):**
|
||||||
|
```
|
||||||
|
Level 1 - Novice (0-1,000 pts): Letters A,E,T,I,N,S,H,R,D,L,U,O
|
||||||
|
Level 2 - Operator (1K-5K pts): 3-letter words (CAT, DOG, SUN, etc.)
|
||||||
|
Level 3 - General (5K-15K pts): Quest messages with STOP
|
||||||
|
Level 4 - Extra (15K-50K pts): Multi-sentence adventure scenarios
|
||||||
|
Level 5 - Expert (50K-150K pts): High-speed challenges (20+ WPM)
|
||||||
|
Level 6 - Legend (150K+ pts): Historical recreations, extreme challenges
|
||||||
|
```
|
||||||
|
|
||||||
|
**Ham Radio License Track (Freemium):**
|
||||||
|
```
|
||||||
|
FREE PREVIEW:
|
||||||
|
- Technician Module 1: Basic Electronics Foundations
|
||||||
|
- Technician Module 2: Frequency Frontier Basics
|
||||||
|
- Technician Module 3: Safety Essentials Intro
|
||||||
|
|
||||||
|
PREMIUM UNLOCK:
|
||||||
|
- Complete Technician License (10 modules, ~350 questions)
|
||||||
|
- General License Track (8 modules, ~450 questions)
|
||||||
|
- Extra License Track (6 modules, ~600 questions)
|
||||||
|
```
|
||||||
|
|
||||||
|
**Adaptive Progression Logic:**
|
||||||
|
- 10 consecutive correct answers triggers level-up offer
|
||||||
|
- Player choice to advance or continue current level
|
||||||
|
- Smart difficulty adjustment based on accuracy trends
|
||||||
|
- No penalties for wrong answers, only positive reinforcement
|
||||||
|
|
||||||
|
### **3. Unified Scoring & Gamification**
|
||||||
|
|
||||||
|
**Points System:**
|
||||||
|
```javascript
|
||||||
|
const calculatePoints = (level, streak, dailyBonus) => {
|
||||||
|
const basePoints = level * 10; // Novice=10, Legend=60
|
||||||
|
const streakMultiplier = streak >= 10 ? 2 : 1;
|
||||||
|
const dailyMultiplier = dailyBonus ? 1.25 : 1;
|
||||||
|
|
||||||
|
return Math.floor(basePoints * streakMultiplier * dailyMultiplier);
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
**Achievement System:**
|
||||||
|
- **Progress Badges:** "First 1000 Points", "Operator Rank Achieved"
|
||||||
|
- **Streak Badges:** "7 Day Practice", "Perfect Month"
|
||||||
|
- **Skill Badges:** "Speed Demon (25 WPM)", "Perfect Accuracy"
|
||||||
|
- **Social Badges:** "Helped New Adventurer", "Top 10 Leaderboard"
|
||||||
|
|
||||||
|
**Ranking Progression:**
|
||||||
|
1. **Novice** → Basic letters and numbers
|
||||||
|
2. **Operator** → Simple words and phrases
|
||||||
|
3. **General** → Complex messages and HF theory
|
||||||
|
4. **Extra** → Advanced technical concepts
|
||||||
|
5. **Expert** → High-speed operation and edge cases
|
||||||
|
6. **Legend** → Teaching and mentoring capabilities
|
||||||
|
|
||||||
|
### **4. Synchronized Audio-Visual Learning**
|
||||||
|
|
||||||
|
**Multi-Modal Signal Presentation:**
|
||||||
|
```
|
||||||
|
Default Mode: Synchronized audio + visual flash
|
||||||
|
Audio Only: For quiet environments, commuting, accessibility
|
||||||
|
Visual Only: For loud environments, hearing accessibility
|
||||||
|
Custom Speed: Adjustable from 5 WPM to 40+ WPM
|
||||||
|
```
|
||||||
|
|
||||||
|
**Technical Requirements:**
|
||||||
|
- Web Audio API implementation for precise timing
|
||||||
|
- Visual flash synchronization within 10ms of audio
|
||||||
|
- Dot: 300ms duration, Dash: 900ms duration
|
||||||
|
- Proper inter-element and inter-character spacing per ITU standards
|
||||||
|
- Volume control and accessibility features
|
||||||
|
|
||||||
|
### **5. Adventure / Quest Theme**
|
||||||
|
|
||||||
|
**Visual Design Requirements:**
|
||||||
|
- Quest environment that upgrades with rank progression
|
||||||
|
- Adventure-appropriate color palette: quest gold, adventure blue, brass
|
||||||
|
- Typography: Adventure-ready serif aesthetic
|
||||||
|
- Animations: Telegraph key operation, quest completion effects
|
||||||
|
- Equipment upgrades: Apprentice key → Brass telegraph → Legendary station
|
||||||
|
|
||||||
|
**Message Content Guidelines:**
|
||||||
|
- Adventure-themed scenarios with gentle, family-friendly humor
|
||||||
|
- Historical accuracy in telegraph format ("STOP" instead of periods)
|
||||||
|
- Progressive narrative while maintaining educational value
|
||||||
|
- Cultural sensitivity and global appeal consideration
|
||||||
|
|
||||||
|
**Humor Examples:**
|
||||||
|
```
|
||||||
|
Beginner: "CAT stuck in tree STOP Send rescue party STOP"
|
||||||
|
Intermediate: "URGENT rabbit invasion at outpost STOP Mayor negotiating with carrot demands STOP"
|
||||||
|
Advanced: "CONFIDENTIAL time traveler asking for WiFi password STOP Told him quest123 STOP He tipped in Bitcoin STOP What is Bitcoin STOP"
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 💰 **BUSINESS MODEL & MONETIZATION**
|
||||||
|
|
||||||
|
### **Freemium Structure**
|
||||||
|
|
||||||
|
**Always Free Tier:**
|
||||||
|
- Complete Morse code curriculum (6 levels)
|
||||||
|
- First 3 Technician license modules
|
||||||
|
- Basic progress tracking
|
||||||
|
- Community features and leaderboards
|
||||||
|
|
||||||
|
**Premium Unlock Trigger:**
|
||||||
|
- After completing Technician Module 3 preview
|
||||||
|
- OR after 50 total gameplay sessions
|
||||||
|
- OR after 30 days of use (whichever comes first)
|
||||||
|
|
||||||
|
**Premium Features ($9.95/year Individual, $19.95/year Family):**
|
||||||
|
- Complete amateur radio license preparation (Technician, General, Extra)
|
||||||
|
- 1,400+ official exam questions with detailed explanations
|
||||||
|
- Advanced practice tools and weak area identification
|
||||||
|
- Exam simulation with timing and scoring
|
||||||
|
- Unlimited Morse speed building beyond 20 WPM
|
||||||
|
- Progress analytics and performance tracking
|
||||||
|
- Printable certificates and reference materials
|
||||||
|
|
||||||
|
### **Launch Strategy: First Year Free**
|
||||||
|
|
||||||
|
**Early Adopter Program:**
|
||||||
|
- All players get complete platform access during launch year
|
||||||
|
- Builds user base, testimonials, and product feedback
|
||||||
|
- Admin toggle to activate billing when ready
|
||||||
|
- Grandfather early adopters with extended free access
|
||||||
|
|
||||||
|
**Revenue Projections:**
|
||||||
|
```
|
||||||
|
Year 1 (Launch): $0 revenue, 2,000+ adventurers, product refinement
|
||||||
|
Year 2: $18,000 ARR (15% conversion of 600 premium-ready players)
|
||||||
|
Year 3: $75,000 ARR (1,200 premium players from 8,000 total adventurers)
|
||||||
|
Year 4: $200,000+ ARR (market expansion and feature additions)
|
||||||
|
```
|
||||||
|
|
||||||
|
### **Payment Processing: Authorize.net Integration**
|
||||||
|
|
||||||
|
**Subscription Management Requirements:**
|
||||||
|
```javascript
|
||||||
|
// Required Authorize.net integration points
|
||||||
|
- Recurring subscription creation and management
|
||||||
|
- Secure payment tokenization
|
||||||
|
- Failed payment handling and retry logic
|
||||||
|
- Proration for plan changes
|
||||||
|
- Cancellation and refund processing
|
||||||
|
- PCI compliance and security standards
|
||||||
|
```
|
||||||
|
|
||||||
|
**Admin Controls:**
|
||||||
|
- Global billing enable/disable toggle
|
||||||
|
- Individual user subscription overrides
|
||||||
|
- Revenue reporting and analytics
|
||||||
|
- Failed payment management dashboard
|
||||||
|
- Grandfathered user tracking
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🛠️ **TECHNICAL REQUIREMENTS**
|
||||||
|
|
||||||
|
### **Platform Architecture**
|
||||||
|
|
||||||
|
**Frontend Requirements:**
|
||||||
|
- **Technology:** React 18+ with TypeScript
|
||||||
|
- **Responsive Design:** Mobile-first, works on phones through desktops
|
||||||
|
- **PWA Features:** Offline capability for practice mode
|
||||||
|
- **Performance:** <3 second load time, 60fps animations
|
||||||
|
- **Accessibility:** WCAG 2.1 AA compliance, screen reader support
|
||||||
|
|
||||||
|
**Backend Requirements:**
|
||||||
|
- **Technology:** Node.js with Express framework
|
||||||
|
- **Database:** SQLite for development, PostgreSQL for production scaling
|
||||||
|
- **Authentication:** Session-based, no account creation required initially
|
||||||
|
- **API Design:** RESTful endpoints with proper error handling
|
||||||
|
- **Security:** Helmet.js, CORS, rate limiting, input validation
|
||||||
|
|
||||||
|
**Database Schema:**
|
||||||
|
```sql
|
||||||
|
-- Core user tracking
|
||||||
|
users (session_id, username, created_at, grandfathered_status)
|
||||||
|
user_progress (session_id, level, score, streak, accuracy_stats)
|
||||||
|
user_mnemonics (session_id, letter, mnemonic_phrase)
|
||||||
|
|
||||||
|
-- Subscription management
|
||||||
|
subscriptions (user_id, authnet_subscription_id, plan_type, status, dates)
|
||||||
|
payments (subscription_id, authnet_transaction_id, amount, status)
|
||||||
|
|
||||||
|
-- Admin configuration
|
||||||
|
admin_settings (setting_key, setting_value, updated_at)
|
||||||
|
```
|
||||||
|
|
||||||
|
### **Audio System Specifications**
|
||||||
|
|
||||||
|
**Web Audio API Implementation:**
|
||||||
|
- Precise timing control (±5ms accuracy required)
|
||||||
|
- Standard amateur radio timing: 20 WPM = 60ms dot duration
|
||||||
|
- Clean sine wave tones at 800Hz ±50Hz
|
||||||
|
- Volume control and mute functionality
|
||||||
|
- Browser compatibility fallbacks
|
||||||
|
|
||||||
|
### **Data Privacy & Security**
|
||||||
|
|
||||||
|
**Privacy Requirements:**
|
||||||
|
- Minimal data collection (session ID, progress only)
|
||||||
|
- No personal information required for free tier
|
||||||
|
- GDPR compliance for EU users
|
||||||
|
- Easy data export and deletion
|
||||||
|
- Transparent privacy policy
|
||||||
|
|
||||||
|
**Security Measures:**
|
||||||
|
- HTTPS enforcement in production
|
||||||
|
- Input sanitization and validation
|
||||||
|
- Rate limiting on API endpoints
|
||||||
|
- Secure payment processing through Authorize.net
|
||||||
|
- Regular security updates and monitoring
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎨 **UI/UX REQUIREMENTS**
|
||||||
|
|
||||||
|
### **Design System**
|
||||||
|
|
||||||
|
**Color Palette:**
|
||||||
|
- Primary: Quest gold (#D4AF37), adventure blue (#4169E1)
|
||||||
|
- Secondary: Brass (#CD7F32), midnight (#191970)
|
||||||
|
- Accent: Quest red (#CC0000) for alerts and CTAs
|
||||||
|
- Backgrounds: Aged parchment (#F5E6D3), deep forest (#3C2415)
|
||||||
|
|
||||||
|
**Typography:**
|
||||||
|
- Headers: Adventure-ready serif font (Google Fonts: "Cinzel" or "MedievalSharp")
|
||||||
|
- Body: Clean, readable sans-serif (Google Fonts: "Open Sans")
|
||||||
|
- Monospace: Telegraph code display (Google Fonts: "Source Code Pro")
|
||||||
|
|
||||||
|
**Iconography:**
|
||||||
|
- Telegraph keys, quest gems, achievement badges, adventure symbols
|
||||||
|
- Consistent style across all interactive elements
|
||||||
|
- Accessibility considerations for color-blind users
|
||||||
|
|
||||||
|
### **User Interface Components**
|
||||||
|
|
||||||
|
**Game Interface:**
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────┐
|
||||||
|
│ ⚡ MorseQuest │
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ Score: 2,847 Rank: Operator ⭐ │
|
||||||
|
│ Streak: 12 🔥 Daily: +25% │
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ │
|
||||||
|
│ [Telegraph Flash Area] │
|
||||||
|
│ │
|
||||||
|
│ Pattern: • − • • │
|
||||||
|
│ Your phrase: "Go WALKING go go" │
|
||||||
|
│ │
|
||||||
|
│ [▶️ Play Signal] [🔊/💡 Toggle] │
|
||||||
|
│ │
|
||||||
|
│ Answer: [________________] [Submit] │
|
||||||
|
└─────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
**Mobile Responsiveness:**
|
||||||
|
- Touch-optimized button sizes (minimum 44px)
|
||||||
|
- Swipe gestures for navigation
|
||||||
|
- Portrait and landscape support
|
||||||
|
- Adaptive font sizing
|
||||||
|
|
||||||
|
### **Animation & Feedback**
|
||||||
|
|
||||||
|
**Micro-Interactions:**
|
||||||
|
- Telegraph key animation during signal playback
|
||||||
|
- Quest scroll effect for message display
|
||||||
|
- Satisfying "ding" and points animation for correct answers
|
||||||
|
- Gentle shake animation for incorrect attempts
|
||||||
|
- Rank-up celebration with confetti and sound effects
|
||||||
|
|
||||||
|
**Loading States:**
|
||||||
|
- "Connecting telegraph lines..." with quest-themed loading animation
|
||||||
|
- Progress indicators for long-running operations
|
||||||
|
- Skeleton screens for content loading
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📊 **SUCCESS METRICS & KPIs**
|
||||||
|
|
||||||
|
### **User Engagement Metrics**
|
||||||
|
|
||||||
|
**Acquisition:**
|
||||||
|
- **Target:** 1,000 adventurers in first 6 months
|
||||||
|
- **Source Tracking:** Organic, referral, Scout programs, ham radio forums
|
||||||
|
- **Conversion Rate:** Landing page to first session >25%
|
||||||
|
|
||||||
|
**Activation:**
|
||||||
|
- **Mnemonic Creation Rate:** >85% complete at least 8 phrases
|
||||||
|
- **First Session Completion:** >70% complete first level
|
||||||
|
- **Return Rate:** >60% return within 7 days
|
||||||
|
|
||||||
|
**Retention:**
|
||||||
|
- **Daily Active Users:** 20% of registered adventurers
|
||||||
|
- **Weekly Active Users:** 60% of registered adventurers
|
||||||
|
- **Monthly Active Users:** 80% of registered adventurers
|
||||||
|
- **Churn Rate:** <10% monthly for active players
|
||||||
|
|
||||||
|
### **Learning Effectiveness**
|
||||||
|
|
||||||
|
**Skill Development:**
|
||||||
|
- **Morse Proficiency:** 85% accuracy on common letters after 3 sessions
|
||||||
|
- **Speed Development:** Average 15 WPM at Expert level
|
||||||
|
- **Knowledge Retention:** 70% accuracy after 1 week without practice
|
||||||
|
- **License Exam Success:** 90%+ pass rate for premium players
|
||||||
|
|
||||||
|
### **Business Metrics**
|
||||||
|
|
||||||
|
**Revenue:**
|
||||||
|
- **Freemium Conversion:** 15% of eligible players convert to premium
|
||||||
|
- **Average Revenue Per User:** $12+ annually
|
||||||
|
- **Customer Lifetime Value:** $25+ (2+ year retention)
|
||||||
|
- **Churn Rate:** <20% annually for premium subscribers
|
||||||
|
|
||||||
|
**Market Penetration:**
|
||||||
|
- **Scout Program Adoption:** 10+ packs using regularly
|
||||||
|
- **Ham Radio Club Partnerships:** 5+ official endorsements
|
||||||
|
- **Educational Institution Adoption:** 3+ schools/colleges
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🗺️ **DEVELOPMENT ROADMAP**
|
||||||
|
|
||||||
|
### **Phase 1: MVP (10-12 weeks)**
|
||||||
|
|
||||||
|
**Sprint 1-2: Core Foundation**
|
||||||
|
- Basic React application structure
|
||||||
|
- SQLite database setup and user session management
|
||||||
|
- Simple quest UI with adventure theme implementation
|
||||||
|
- Basic Morse code audio/visual playback system
|
||||||
|
|
||||||
|
**Sprint 3-4: Mnemonic System**
|
||||||
|
- Mnemonic creation interface with validation
|
||||||
|
- Pattern matching logic for dot/dash word structure
|
||||||
|
- Points system and basic progression tracking
|
||||||
|
- Printable reference sheet generation
|
||||||
|
|
||||||
|
**Sprint 5-6: Game Mechanics**
|
||||||
|
- Complete Morse curriculum (6 levels)
|
||||||
|
- Scoring system with streaks and bonuses
|
||||||
|
- Achievement/badge system implementation
|
||||||
|
- Local storage and data persistence
|
||||||
|
|
||||||
|
**Sprint 7: Polish & Testing**
|
||||||
|
- Mobile responsiveness and cross-browser testing
|
||||||
|
- Performance optimization and loading improvements
|
||||||
|
- User testing and feedback integration
|
||||||
|
- Basic admin panel for monitoring
|
||||||
|
|
||||||
|
### **Phase 2: Premium Features (8-10 weeks)**
|
||||||
|
|
||||||
|
**Sprint 8-9: Ham Radio Content**
|
||||||
|
- Technician license module creation (10 modules)
|
||||||
|
- Question bank integration with explanations
|
||||||
|
- Exam simulation engine
|
||||||
|
- Progress tracking across multiple curriculum tracks
|
||||||
|
|
||||||
|
**Sprint 10-11: Payment Integration**
|
||||||
|
- Authorize.net subscription setup
|
||||||
|
- Billing flow implementation
|
||||||
|
- Admin controls for billing management
|
||||||
|
- Free trial and conversion funnel
|
||||||
|
|
||||||
|
**Sprint 12: Advanced Features**
|
||||||
|
- General and Extra license content
|
||||||
|
- Advanced analytics and reporting
|
||||||
|
- Social features (leaderboards, sharing)
|
||||||
|
- Performance optimization for scale
|
||||||
|
|
||||||
|
### **Phase 3: Platform Enhancement (6-8 weeks)**
|
||||||
|
|
||||||
|
**Sprint 13-14: Community Features**
|
||||||
|
- User profiles and achievement display
|
||||||
|
- Scout group and club integration tools
|
||||||
|
- Mentoring/teaching mode for experienced players
|
||||||
|
- User-generated content capabilities
|
||||||
|
|
||||||
|
**Sprint 15-16: Advanced Analytics**
|
||||||
|
- Detailed learning analytics dashboard
|
||||||
|
- A/B testing framework for conversion optimization
|
||||||
|
- Instructor/leader reporting tools
|
||||||
|
- Advanced admin management features
|
||||||
|
|
||||||
|
## ⚠️ **RISK ASSESSMENT & MITIGATION**
|
||||||
|
|
||||||
|
### **Technical Risks**
|
||||||
|
|
||||||
|
**Audio Timing Precision (HIGH)**
|
||||||
|
- **Risk:** Browser inconsistencies in Web Audio API timing
|
||||||
|
- **Mitigation:** Extensive cross-browser testing, visual-only fallback mode
|
||||||
|
- **Contingency:** Server-side audio generation if client-side fails
|
||||||
|
|
||||||
|
**Mobile Performance (MEDIUM)**
|
||||||
|
- **Risk:** Complex animations causing poor performance on older devices
|
||||||
|
- **Mitigation:** Progressive enhancement, simplified mobile animations
|
||||||
|
- **Contingency:** Device detection with performance-appropriate features
|
||||||
|
|
||||||
|
**Payment Processing (MEDIUM)**
|
||||||
|
- **Risk:** Authorize.net integration complexity and failure handling
|
||||||
|
- **Mitigation:** Thorough testing in sandbox, comprehensive error handling
|
||||||
|
- **Contingency:** Alternative payment processor (Stripe) integration ready
|
||||||
|
|
||||||
|
### **Market Risks**
|
||||||
|
|
||||||
|
**Educational Market Adoption (MEDIUM)**
|
||||||
|
- **Risk:** Schools/Scout programs slow to adopt new technology
|
||||||
|
- **Mitigation:** Free tier, pilot programs, educator testimonials
|
||||||
|
- **Contingency:** Focus on individual consumer market initially
|
||||||
|
|
||||||
|
**Competition Response (LOW)**
|
||||||
|
- **Risk:** Established players copying our approach
|
||||||
|
- **Mitigation:** First-mover advantage, unique theme, patent considerations
|
||||||
|
- **Contingency:** Continuous innovation and feature development
|
||||||
|
|
||||||
|
### **User Experience Risks**
|
||||||
|
|
||||||
|
**Mnemonic Creation Abandonment (HIGH)**
|
||||||
|
- **Risk:** Players quit during mnemonic creation phase
|
||||||
|
- **Mitigation:** Compelling tutorial, skip option, immediate value demonstration
|
||||||
|
- **Contingency:** A/B testing on different onboarding approaches
|
||||||
|
|
||||||
|
**Theme Appeal (LOW)**
|
||||||
|
- **Risk:** Adventure theme doesn't resonate globally
|
||||||
|
- **Mitigation:** Universal quest motifs, gentle humor, cultural sensitivity
|
||||||
|
- **Contingency:** Theme customization options in future versions
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎯 **FORGE DEPLOYMENT SPECIFICATIONS**
|
||||||
|
|
||||||
|
### **Keylink IT Forge Integration**
|
||||||
|
|
||||||
|
**Deployment Requirements:**
|
||||||
|
- **Platform:** Docker containerization for easy deployment
|
||||||
|
- **Environment:** Support for development, staging, production environments
|
||||||
|
- **Scaling:** Horizontal scaling capability for user growth
|
||||||
|
- **Monitoring:** Health checks, error reporting, performance metrics
|
||||||
|
|
||||||
|
**White-Label Capabilities:**
|
||||||
|
- **Custom Branding:** Configurable logos, colors, domain names
|
||||||
|
- **Content Customization:** Custom quest packs for specific organizations
|
||||||
|
- **Analytics:** Client-specific dashboards and reporting
|
||||||
|
- **Integration:** API endpoints for external learning management systems
|
||||||
|
|
||||||
|
**Revenue Sharing Model:**
|
||||||
|
- **Platform Fee:** 20% of subscription revenue to Forge platform
|
||||||
|
- **White-Label Fee:** $500 setup + $100/month for custom deployments
|
||||||
|
- **Support Tier:** Premium support for enterprise clients
|
||||||
|
|
||||||
|
### **Technical Deliverables**
|
||||||
|
|
||||||
|
**Code Repository:**
|
||||||
|
- **Gitea Integration:** Source code management with CI/CD pipeline
|
||||||
|
- **Documentation:** Comprehensive README, API documentation, deployment guides
|
||||||
|
- **Testing:** Unit tests, integration tests, end-to-end test suites
|
||||||
|
- **Security:** Code scanning, dependency updates, security best practices
|
||||||
|
|
||||||
|
**Production Deployment:**
|
||||||
|
- **Infrastructure:** AWS/DigitalOcean compatible Docker containers
|
||||||
|
- **Database:** PostgreSQL for production, migration scripts included
|
||||||
|
- **CDN:** Static asset optimization and global distribution
|
||||||
|
- **SSL:** HTTPS enforcement and certificate management
|
||||||
|
|
||||||
|
**Monitoring & Analytics:**
|
||||||
|
- **Application Monitoring:** Error tracking, performance monitoring
|
||||||
|
- **Business Analytics:** User behavior tracking, conversion funnel analysis
|
||||||
|
- **Revenue Reporting:** Subscription metrics, churn analysis, growth tracking
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📞 **PROJECT CONTACTS & STAKEHOLDERS**
|
||||||
|
|
||||||
|
### **Product Owner**
|
||||||
|
**Allen McGhan**
|
||||||
|
- Owner/Operator, Keylink IT
|
||||||
|
- Cubmaster, Pack 404 Scouts
|
||||||
|
- Hendersonville, TN
|
||||||
|
- Subject Matter Expert: Amateur Radio (General License), Scout Education
|
||||||
|
|
||||||
|
### **Target Stakeholders**
|
||||||
|
- **Pack 404 Scout Leadership:** Initial pilot deployment and feedback
|
||||||
|
- **Amateur Radio Community:** Beta testing and content validation
|
||||||
|
- **Educational Partners:** Scout councils, STEM educators, ham radio clubs
|
||||||
|
|
||||||
|
### **Success Criteria**
|
||||||
|
- **User Satisfaction:** >4.5/5.0 app store rating
|
||||||
|
- **Educational Effectiveness:** Measurable improvement in Morse code proficiency
|
||||||
|
- **Business Viability:** Sustainable revenue covering development and hosting costs
|
||||||
|
- **Market Impact:** Recognition as leading amateur radio education platform
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**This PRD provides complete specifications for building an engaging, educational, and commercially viable amateur radio education platform that fills a significant gap in the market while providing substantial value to learners of all ages.**
|
||||||
|
|
||||||
|
---
|
||||||
|
*Document Version: 1.0*
|
||||||
|
*Last Updated: December 2024*
|
||||||
|
*Prepared for: Keylink IT Forge Development Team*
|
||||||