The official website for the Aurora Zone chat room on Dawn Pokemon Showdown. This modern, responsive website serves as the information hub for our Pokemon community.
- Responsive Design: Optimized for all devices (desktop, tablet, mobile)
- Dark/Light/Auto Theme: System-aware theme switching with user preferences
- Single Page Application: Smooth navigation without page reloads
- Accessibility First: WCAG 2.1 compliant with ARIA labels and keyboard navigation
- SEO Optimized: Meta tags, structured data, and Open Graph support
- Performance Focused: Optimized loading, caching, and minimal dependencies
- Modern UI: Clean, professional design with smooth animations
- Material Icons: Google Material Design icons throughout
- Custom Pokemon Theme: Aurora Zone branding and Pokemon-inspired colors
- Interactive Elements: Hover effects, focus states, and smooth transitions
- Card-based Layout: Organized content in visually appealing cards
- Pure HTML/CSS/JS: No frameworks, lightweight and fast
- CSS Custom Properties: Dynamic theming system
- Error Handling: Comprehensive error handling and fallbacks
- Performance Monitoring: Built-in performance tracking
- Security Headers: Security best practices implemented
- Home: Welcome message and community highlights
- Rules: Community guidelines and Dawn server policies
- Events: Tournament information and special events
- Contact: Links to join Aurora Zone and Dawn
- Credits: Contributors and acknowledgments
-
Clone the repository:
git clone https://github.com/TurboRx/Aurora-Zone-Webpage.git
-
Navigate to the directory:
cd Aurora-Zone-Webpage -
Open in browser:
# Option 1: Direct file access open index.html # Option 2: Local server (recommended) python -m http.server 8000 # Then visit: http://localhost:8000
For development, use a local HTTP server to avoid CORS issues:
# Python 3
python -m http.server 8000
# Python 2
python -M SimpleHTTPServer 8000
# Node.js (if you have http-server installed)
npx http-server -p 8000
# PHP
php -S localhost:8000| Browser | Version | Status |
|---|---|---|
| Chrome | 80+ | ✅ Full Support |
| Firefox | 75+ | ✅ Full Support |
| Safari | 13+ | ✅ Full Support |
| Edge | 80+ | ✅ Full Support |
| Opera | 67+ | ✅ Full Support |
- WCAG 2.1 AA Compliant: Meets accessibility standards
- Keyboard Navigation: Full site navigation with keyboard only
- Screen Reader Support: Proper ARIA labels and semantic HTML
- Focus Management: Clear focus indicators and logical tab order
- High Contrast Support: Adapts to user's contrast preferences
- Reduced Motion: Respects user's motion preferences
- Color Blind Friendly: Sufficient color contrast ratios
- Lighthouse Score: 95+ across all metrics
- First Contentful Paint: < 1.5s
- Largest Contentful Paint: < 2.5s
- Cumulative Layout Shift: < 0.1
- Time to Interactive: < 3s
The website supports three theme modes:
- Auto: Follows system preference
- Light: Force light theme
- Dark: Force dark theme
Customize colors by modifying CSS custom properties in styles.css:
:root {
--bg: #ffffff; /* Background color */
--text: #111111; /* Text color */
--card: #f4f6fc; /* Card background */
--accent: #2233aa; /* Accent/brand color */
--border: #e0e6ff; /* Border color */
}- Add HTML section in
index.html - Add navigation link
- Update JavaScript
showSectionfunction if needed - Style the new section in
styles.css
We welcome contributions! Here's how to get started:
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Make your changes
- Test thoroughly across browsers
- Commit with descriptive messages:
git commit -m 'Add amazing feature' - Push to your branch:
git push origin feature/amazing-feature - Open a Pull Request
- HTML: Use semantic elements, proper indentation (2 spaces)
- CSS: Use BEM methodology, logical property order
- JavaScript: ES6+ features, proper error handling, JSDoc comments
- Accessibility: Ensure all changes maintain accessibility standards
The website includes:
- Performance Monitoring: Built-in performance tracking
- Error Logging: Console error tracking
- Theme Usage: Track theme preferences (stored locally)
- Page Visibility: Optimizes performance when tab is hidden
- Content Security Policy: Prevents XSS attacks
- HTTPS Only: All external resources use HTTPS
- No Sensitive Data: No user data collection or storage
- Dependency Security: Regular security updates
- Responsible Disclosure: See SECURITY.md
- Meta Tags: Comprehensive meta description and keywords
- Open Graph: Social media sharing optimization
- Twitter Cards: Twitter sharing optimization
- Structured Data: JSON-LD for search engines
- Robots.txt: Search engine crawler guidance
- Semantic HTML: Proper heading hierarchy and landmarks
The site is automatically deployed to GitHub Pages:
- URL: https://turborx.github.io/Aurora-Zone-Webpage/
- Branch:
main(auto-deploy on push) - Custom Domain: Available if needed
- Netlify: Drag and drop folder
- Vercel: Connect GitHub repository
- Firebase Hosting:
firebase deploy - Surge.sh:
surge ./
- Live Website: turborx.github.io/Aurora-Zone-Webpage
- Aurora Zone Room: dawn.psim.us/aurorazone
- Dawn Pokemon Showdown: dawn.psim.us
- Report Issues: GitHub Issues
This project is licensed under the MIT License - see the LICENSE file for details.
TurboRx
- GitHub: @TurboRx
- Role: Lead Developer & Maintainer
- Dawn Pokemon Showdown: For providing the platform
- Aurora Zone Community: For inspiration and feedback
- Google Material Icons: For the beautiful icons
- GitHub Pages: For free hosting