⚡ 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)
This commit is contained in:
+218
@@ -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*
|
||||
Reference in New Issue
Block a user