Sprint 1 Day 1: Individual Quad Controls + Hero Section Redesign
Multi-Screen Individual Controls: - Individual volume sliders with percentage display - Independent play/pause buttons for each quadrant - Progress bars with click-to-seek functionality - Mute toggle buttons with visual feedback - Individual shuffle/change video buttons - Hover-to-show controls with smooth animations - Mobile-responsive design Hero Section Overhaul: - Professional typography with enhanced title/tagline - Feature highlights showcasing key capabilities - Modern status panel with XP, timer, and quick stats - Gradient backgrounds with subtle animations - Glassmorphism effects with backdrop blur - Responsive grid layout for all screen sizes - Visual hierarchy improvements Responsive Design: - Mobile-optimized layouts for both features - Proper scaling and touch-friendly controls - Adaptive grid systems for different screen sizes
This commit is contained in:
dilgenfritz
parent
689574953a
commit
fdc8de2c99
27
README.md
27
README.md
|
|
@ -16,6 +16,13 @@ An adult edging challenge game with multiple specialized modes, progressive trai
|
|||
|
||||
## <20> Core Features
|
||||
|
||||
### 🎬 Professional Media Player System
|
||||
- **Porn Cinema**: Full-featured video player with playlists, seeking, and theater mode
|
||||
- **Multi-Screen Quad Player**: 4-video grid layout for intensive training sessions
|
||||
- **Video Library Management**: Unified access to linked video directories
|
||||
- **Focus Interruptions**: Video overlays during training scenarios
|
||||
- **Player Statistics**: Watch time tracking, completion rates, and viewing analytics
|
||||
|
||||
### Progressive Endurance Training
|
||||
- **Experience Levels**: Beginner → Intermediate → Advanced → Expert
|
||||
- **Adaptive Timers**: 30 seconds to 10 minutes based on skill level
|
||||
|
|
@ -36,6 +43,7 @@ An adult edging challenge game with multiple specialized modes, progressive trai
|
|||
|
||||
### Content Management
|
||||
- **Custom Images**: Upload and categorize adult content (tasks vs consequences)
|
||||
- **Video Integration**: Link external video directories for seamless playback
|
||||
- **High-Quality Processing**: 1600x1200 resolution with smart compression
|
||||
- **Storage Management**: 50 image limit with usage monitoring
|
||||
- **Bulk Operations**: Select, enable/disable, and delete multiple images
|
||||
|
|
@ -74,13 +82,21 @@ npm start
|
|||
```
|
||||
webGame/
|
||||
├── index.html # Main interface
|
||||
├── porn-cinema.html # Professional video player
|
||||
├── player-stats.html # Statistics dashboard
|
||||
├── user-profile.html # User profile and achievements
|
||||
├── src/
|
||||
│ ├── core/ # Game engine and mode management
|
||||
│ ├── data/modes/ # Game mode data files
|
||||
│ ├── features/ # Task system, webcam, audio
|
||||
│ ├── features/
|
||||
│ │ ├── media/ # Video players and cinema system
|
||||
│ │ ├── stats/ # Player statistics tracking
|
||||
│ │ ├── tasks/ # Interactive task management
|
||||
│ │ └── ... # Audio, webcam, UI features
|
||||
│ └── styles/ # CSS and themes
|
||||
├── images/ # Image storage
|
||||
├── audio/ # Background music
|
||||
├── videos/ # Video file organization
|
||||
└── package.json # Electron app config
|
||||
```
|
||||
|
||||
|
|
@ -92,6 +108,15 @@ webGame/
|
|||
|
||||
## 📋 Recent Updates
|
||||
|
||||
### v3.0 - Professional Media System (October 31, 2025)
|
||||
- ✅ **Complete Porn Cinema**: Professional video player with playlists, progress bars, and theater mode
|
||||
- ✅ **Multi-Screen Quad Player**: 4-video grid layout for intensive training with minimize/restore functionality
|
||||
- ✅ **BaseVideoPlayer Architecture**: Reusable video components across all game modes
|
||||
- ✅ **Video Library Integration**: Seamless access to external video directories
|
||||
- ✅ **Player Statistics & Profiles**: Watch time tracking, achievements, and user progression
|
||||
- ✅ **Focus Video Interruptions**: Video overlays during training scenarios
|
||||
- ✅ **Enhanced Training Integration**: Multi-screen mode button in interactive tasks
|
||||
|
||||
### v2.0 - Major Content Update
|
||||
- ✅ Added 7 specialized game modes with rich content
|
||||
- ✅ Implemented progressive endurance training system
|
||||
|
|
|
|||
90
index.html
90
index.html
|
|
@ -39,24 +39,82 @@
|
|||
|
||||
<div class="game-container">
|
||||
<!-- Game Header -->
|
||||
<header class="game-header">
|
||||
<h1>Gooner Training Academy</h1>
|
||||
<p class="tagline">Master Your Dedication</p>
|
||||
|
||||
<!-- Overall XP Display (top-right corner) -->
|
||||
<div class="overall-xp-display">
|
||||
<span class="overall-xp-label">Total XP:</span>
|
||||
<span id="overall-xp-header" class="overall-xp-value">0</span>
|
||||
<header class="game-header hero-header">
|
||||
<div class="hero-background"></div>
|
||||
<div class="hero-content">
|
||||
<div class="hero-title-section">
|
||||
<h1 class="hero-title">
|
||||
<span class="hero-title-main">Gooner Training Academy</span>
|
||||
<span class="hero-title-accent">Professional Development</span>
|
||||
</h1>
|
||||
<p class="hero-tagline">
|
||||
<span class="tagline-emphasis">Master Your Dedication</span>
|
||||
<span class="tagline-subtitle">• Advanced Training System • v3.0</span>
|
||||
</p>
|
||||
|
||||
<!-- Feature Highlights -->
|
||||
<div class="hero-features">
|
||||
<div class="hero-feature">
|
||||
<span class="feature-icon">🎬</span>
|
||||
<span class="feature-text">Multi-Screen Training</span>
|
||||
</div>
|
||||
<div class="hero-feature">
|
||||
<span class="feature-icon">📊</span>
|
||||
<span class="feature-text">Progress Analytics</span>
|
||||
</div>
|
||||
<div class="hero-feature">
|
||||
<span class="feature-icon">🏆</span>
|
||||
<span class="feature-text">Achievement System</span>
|
||||
</div>
|
||||
<div class="hero-feature">
|
||||
<span class="feature-icon">🎵</span>
|
||||
<span class="feature-text">Immersive Audio</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Status Panel -->
|
||||
<div class="hero-status-panel">
|
||||
<!-- Overall XP Display -->
|
||||
<div class="status-card overall-xp-display">
|
||||
<div class="status-label">Total XP</div>
|
||||
<div class="status-value">
|
||||
<span id="overall-xp-header" class="xp-number">0</span>
|
||||
<span class="xp-suffix">XP</span>
|
||||
</div>
|
||||
<div class="status-bar">
|
||||
<div class="status-progress" id="overall-xp-progress" style="width: 0%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Session Timer -->
|
||||
<div class="status-card timer-compact">
|
||||
<div class="status-label">Session Time</div>
|
||||
<div class="status-value">
|
||||
<span id="timer" class="timer-display">00:00</span>
|
||||
</div>
|
||||
<div class="timer-status-text" id="timer-status"></div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Stats -->
|
||||
<div class="status-card quick-stats">
|
||||
<div class="status-label">Quick Stats</div>
|
||||
<div class="stats-grid">
|
||||
<div class="stat-item">
|
||||
<span class="stat-number" id="header-sessions">0</span>
|
||||
<span class="stat-label">Sessions</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-number" id="header-streak">0</span>
|
||||
<span class="stat-label">Streak</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Compact Timer (top-right corner) -->
|
||||
<div class="timer-compact">
|
||||
<span id="timer" class="timer">00:00</span>
|
||||
<span id="timer-status" class="timer-status"></span>
|
||||
</div>
|
||||
|
||||
<!-- Compact Music Controls (expandable) -->
|
||||
<div class="music-controls-compact">
|
||||
<!-- Compact Music Controls (repositioned) -->
|
||||
<div class="music-controls-compact hero-music-controls">
|
||||
<button id="music-toggle-compact" class="music-icon-btn" title="Music Controls">🎵</button>
|
||||
<div class="music-panel-expanded">
|
||||
<div class="music-row">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,295 @@
|
|||
# Sprint 1 - Polish & Performance Focus
|
||||
**Duration**: 2 weeks (November 3-17, 2025)
|
||||
**Goals**: Complete signature features, enhance UX, optimize performance
|
||||
|
||||
## 🎯 Sprint Objectives
|
||||
|
||||
### **Primary Goals**
|
||||
1. **🎬 Complete Multi-Screen Quad Player** - Finish your signature feature
|
||||
2. **🎨 Enhanced User Experience & Polish** - Professional feel and feedback
|
||||
3. **📊 Statistics & Progress System Enhancement** - Better gamification
|
||||
4. **🏠 Home Page Visual Overhaul** - Modern, attractive landing experience
|
||||
5. **🎨 UI Graphics Integration** - Icons, illustrations, and visual design system
|
||||
6. **🔧 Performance & Stability** - Optimize for large media libraries
|
||||
|
||||
### **Success Metrics**
|
||||
- Multi-Screen Quad Player 100% feature complete
|
||||
- Home page has modern, professional visual design
|
||||
- UI graphics system implemented with consistent iconography
|
||||
- Zero critical UX issues reported
|
||||
- Statistics dashboard fully functional
|
||||
- Video loading performance improved by 50%
|
||||
|
||||
---
|
||||
|
||||
## 🎬 **PRIORITY 1: Complete Multi-Screen Quad Player**
|
||||
*Status: 80% complete → Target: 100% complete*
|
||||
|
||||
### **Week 1 Tasks**
|
||||
|
||||
#### **Individual Video Controls**
|
||||
- [ ] **Volume Controls**: Add individual volume sliders for each quadrant
|
||||
- [ ] **Play/Pause Per Video**: Individual control without affecting others
|
||||
- [ ] **Seek Controls**: Mini progress bars or click-to-seek on each video
|
||||
- [ ] **Mute Toggle**: Quick mute button for each quadrant
|
||||
|
||||
#### **Focus Mode Enhancement**
|
||||
- [ ] **Click to Focus**: Click any quadrant to temporarily enlarge it (75% screen)
|
||||
- [ ] **Focus Overlay**: Dim other videos when one is focused
|
||||
- [ ] **Exit Focus**: Click background or ESC to return to quad view
|
||||
- [ ] **Focus Indicator**: Visual border/highlight on focused video
|
||||
|
||||
### **Week 2 Tasks**
|
||||
|
||||
#### **Sync Options**
|
||||
- [ ] **Master Play/Pause**: Button to pause/play all videos simultaneously
|
||||
- [ ] **Master Volume**: Global volume slider affecting all videos
|
||||
- [ ] **Sync Seek**: Option to seek all videos to same timestamp
|
||||
- [ ] **Master Mute**: Mute/unmute all videos at once
|
||||
|
||||
#### **Custom Layouts**
|
||||
- [ ] **Layout Selector**: 2x2, 1+3, 3x1, fullscreen single options
|
||||
- [ ] **Drag & Drop**: Rearrange video positions within grid
|
||||
- [ ] **Layout Memory**: Remember user's preferred layout
|
||||
- [ ] **Mobile Layouts**: Responsive stacking for smaller screens
|
||||
|
||||
#### **Quality of Life**
|
||||
- [ ] **Video Info**: Show filename/duration on hover
|
||||
- [ ] **Quick Actions**: Right-click context menu per video
|
||||
- [ ] **Keyboard Shortcuts**: Space for play/pause, number keys for focus
|
||||
- [ ] **Auto-shuffle Timer**: Optional automatic video refresh every X minutes
|
||||
|
||||
---
|
||||
|
||||
## 🎨 **PRIORITY 2: Enhanced User Experience & Polish**
|
||||
*Current: Basic functionality → Target: Professional polish*
|
||||
|
||||
### **Week 1 Tasks**
|
||||
|
||||
#### **Loading & Feedback Systems**
|
||||
- [ ] **Loading States**: Spinners for video loading, image processing, game initialization
|
||||
- [ ] **Progress Indicators**: Show completion percentage for long operations
|
||||
- [ ] **Error Handling**: User-friendly error messages with retry options
|
||||
- [ ] **Success Feedback**: Satisfying completion animations and sounds
|
||||
|
||||
#### **Notification System Enhancement**
|
||||
- [ ] **Notification Types**: Success, warning, error, info with distinct styling
|
||||
- [ ] **Auto-dismiss**: Smart timing based on message importance
|
||||
- [ ] **Notification Queue**: Handle multiple notifications gracefully
|
||||
- [ ] **Action Buttons**: "Retry", "Settings", "Dismiss" options in notifications
|
||||
|
||||
### **Week 2 Tasks**
|
||||
|
||||
#### **Visual Polish**
|
||||
- [ ] **Smooth Transitions**: Fade/slide animations between screens
|
||||
- [ ] **Hover Effects**: Consistent button and element interactions
|
||||
- [ ] **Focus Indicators**: Clear visual feedback for keyboard navigation
|
||||
- [ ] **Loading Skeletons**: Placeholder content while loading
|
||||
|
||||
#### **Interaction Improvements**
|
||||
- [ ] **Confirmation Dialogs**: "Are you sure?" for destructive actions
|
||||
- [ ] **Undo Actions**: Ability to undo recent changes (delete images, etc.)
|
||||
- [ ] **Keyboard Navigation**: Tab through all interactive elements
|
||||
- [ ] **Touch Gestures**: Swipe/pinch support for mobile users
|
||||
|
||||
#### **Error Prevention**
|
||||
- [ ] **Input Validation**: Real-time feedback on form inputs
|
||||
- [ ] **File Type Checking**: Clear warnings for unsupported files
|
||||
- [ ] **Storage Warnings**: Alert when approaching storage limits
|
||||
- [ ] **Browser Compatibility**: Graceful degradation for older browsers
|
||||
|
||||
---
|
||||
|
||||
## 📊 **PRIORITY 3: Statistics & Progress System Enhancement**
|
||||
*Current: Basic tracking → Target: Comprehensive analytics*
|
||||
|
||||
### **Week 1 Tasks**
|
||||
|
||||
#### **Enhanced Statistics Dashboard**
|
||||
- [ ] **Session Analytics**: Detailed breakdown of current session
|
||||
- [ ] **Historical Trends**: Charts showing progress over time
|
||||
- [ ] **Category Breakdown**: Stats per game mode, task type, etc.
|
||||
- [ ] **Streak Tracking**: Consecutive days played, longest sessions
|
||||
|
||||
#### **Achievement System Expansion**
|
||||
- [ ] **New Achievements**: 20+ achievements covering all game aspects
|
||||
- [ ] **Achievement Notifications**: Celebratory popups when earned
|
||||
- [ ] **Progress Tracking**: Show progress toward locked achievements
|
||||
- [ ] **Achievement Gallery**: Display earned achievements with dates
|
||||
|
||||
### **Week 2 Tasks**
|
||||
|
||||
#### **Advanced Analytics**
|
||||
- [ ] **Heatmaps**: Show activity patterns by time/day
|
||||
- [ ] **Performance Metrics**: Task completion rates, improvement trends
|
||||
- [ ] **Content Usage**: Most used images/videos/scenarios
|
||||
- [ ] **Export Data**: Download statistics as CSV/JSON
|
||||
|
||||
#### **Gamification Enhancements**
|
||||
- [ ] **XP Multipliers**: Bonus XP for streaks, achievements, perfect sessions
|
||||
- [ ] **Leaderboards**: Personal best records and milestones
|
||||
- [ ] **Challenges**: Daily/weekly challenges with XP rewards
|
||||
- [ ] **Progress Badges**: Visual indicators of user level and status
|
||||
|
||||
---
|
||||
|
||||
## 🏠 **PRIORITY 4: Home Page Visual Overhaul**
|
||||
*Current: Functional but basic → Target: Modern, engaging landing experience*
|
||||
|
||||
### **Week 1 Tasks**
|
||||
|
||||
#### **Hero Section Redesign**
|
||||
- [ ] **Hero Header**: Large title with professional typography and gradient/shadow effects
|
||||
- [ ] **Tagline Enhancement**: Make "Master Your Dedication" more prominent with styled text
|
||||
- [ ] **Visual Hierarchy**: Clear sections with proper spacing and visual flow
|
||||
- [ ] **Feature Highlights**: Quick overview of key features (Quad Player, Statistics, etc.)
|
||||
|
||||
#### **Navigation & Layout Improvements**
|
||||
- [ ] **Button Grouping**: Reorganize main action buttons into logical categories
|
||||
- [ ] **Primary/Secondary Actions**: Clear visual distinction between important vs. utility buttons
|
||||
- [ ] **Quick Start Flow**: Streamlined path for new users vs. returning users
|
||||
- [ ] **Visual Icons**: Add meaningful icons to all main action buttons
|
||||
|
||||
### **Week 2 Tasks**
|
||||
|
||||
#### **Game Mode Selection Enhancement**
|
||||
- [ ] **Visual Cards**: Transform radio buttons into attractive game mode cards
|
||||
- [ ] **Mode Previews**: Small illustrations or icons for each game mode
|
||||
- [ ] **Progress Indicators**: Show completion stats for each mode
|
||||
- [ ] **Recommended Mode**: Highlight suggested mode based on user history
|
||||
|
||||
#### **Statistics Dashboard Integration**
|
||||
- [ ] **Quick Stats Widget**: Mini dashboard on home page showing key metrics
|
||||
- [ ] **Progress Rings**: Circular progress indicators for XP, streaks, completion rates
|
||||
- [ ] **Achievement Badges**: Display recent achievements prominently
|
||||
- [ ] **Motivational Elements**: Dynamic messages based on current progress
|
||||
|
||||
#### **Options Panel Redesign**
|
||||
- [ ] **Tabbed Interface**: Organize options into clear categories with tabs
|
||||
- [ ] **Visual Settings Preview**: Live preview of theme changes and audio settings
|
||||
- [ ] **Advanced Settings**: Collapsible sections for power users
|
||||
- [ ] **Help Integration**: Quick tips and tooltips throughout
|
||||
|
||||
---
|
||||
|
||||
## 🎨 **PRIORITY 5: UI Graphics Integration**
|
||||
*Current: Text-based interface → Target: Rich visual design with graphics*
|
||||
|
||||
### **Week 1 Tasks**
|
||||
|
||||
#### **Icon System Implementation**
|
||||
- [ ] **Icon Library**: Choose/create consistent icon set (Material Design, Feather, or custom)
|
||||
- [ ] **Button Icons**: Add meaningful icons to all major buttons and actions
|
||||
- [ ] **Navigation Icons**: Visual indicators for different screens and modes
|
||||
- [ ] **Status Icons**: Game state, loading, success/error indicators
|
||||
|
||||
#### **Visual Design System**
|
||||
- [ ] **Color Palette**: Expand beyond current themes with semantic colors (success, warning, info)
|
||||
- [ ] **Typography Scale**: Implement consistent font sizes and weights hierarchy
|
||||
- [ ] **Spacing System**: Standardized padding/margin system (8px grid recommended)
|
||||
- [ ] **Border Radius**: Consistent corner radius for modern card-based design
|
||||
|
||||
### **Week 2 Tasks**
|
||||
|
||||
#### **Illustrations & Graphics**
|
||||
- [ ] **Game Mode Illustrations**: Custom graphics or icons for each game mode
|
||||
- [ ] **Empty State Graphics**: Attractive placeholders when no content is available
|
||||
- [ ] **Loading Animations**: Smooth, engaging loading states beyond simple spinners
|
||||
- [ ] **Achievement Graphics**: Visual badges and celebration graphics
|
||||
|
||||
#### **Interactive Visual Elements**
|
||||
- [ ] **Hover Effects**: Subtle animations and feedback on interactive elements
|
||||
- [ ] **Progress Visualizations**: Animated progress bars, XP gains, streak counters
|
||||
- [ ] **State Transitions**: Smooth animations between different app states
|
||||
- [ ] **Micro-interactions**: Small delightful interactions (button presses, etc.)
|
||||
|
||||
#### **Graphics Assets Creation**
|
||||
- [ ] **Logo Design**: Professional logo for "Gooner Training Academy"
|
||||
- [ ] **Background Patterns**: Subtle background textures or patterns for visual interest
|
||||
- [ ] **Card Graphics**: Background patterns or graphics for different card types
|
||||
- [ ] **Game State Graphics**: Visual indicators for paused, playing, completed states
|
||||
|
||||
---
|
||||
|
||||
## 🔧 **PRIORITY 6: Performance & Stability**
|
||||
*Current: Works with small libraries → Target: Handles large collections smoothly*
|
||||
|
||||
### **Week 1 Tasks**
|
||||
|
||||
#### **Video Performance Optimization**
|
||||
- [ ] **Lazy Loading**: Only load videos when needed
|
||||
- [ ] **Memory Management**: Properly dispose of video elements when done
|
||||
- [ ] **Preloading Strategy**: Smart preloading of next videos in queue
|
||||
- [ ] **Quality Adaptation**: Auto-reduce quality for multiple simultaneous videos
|
||||
|
||||
#### **File Handling Improvements**
|
||||
- [ ] **Large File Support**: Handle 4K+ videos without browser crashes
|
||||
- [ ] **Background Processing**: Process large files without blocking UI
|
||||
- [ ] **Chunked Loading**: Stream large files in chunks
|
||||
- [ ] **Cache Management**: Intelligent caching with size limits
|
||||
|
||||
### **Week 2 Tasks**
|
||||
|
||||
#### **UI Performance**
|
||||
- [ ] **Virtual Scrolling**: Handle large image/video galleries efficiently
|
||||
- [ ] **Debounced Operations**: Prevent excessive API calls during user input
|
||||
- [ ] **Bundle Optimization**: Reduce initial JavaScript load size
|
||||
- [ ] **CSS Optimization**: Remove unused styles, optimize animations
|
||||
|
||||
#### **Stability Enhancements**
|
||||
- [ ] **Error Boundaries**: Graceful handling of component crashes
|
||||
- [ ] **Memory Leak Prevention**: Regular cleanup of event listeners and timers
|
||||
- [ ] **State Recovery**: Automatically recover from corrupted states
|
||||
- [ ] **Performance Monitoring**: Built-in FPS and memory usage tracking
|
||||
|
||||
---
|
||||
|
||||
## 📅 **Sprint Timeline**
|
||||
|
||||
### **Week 1 (Nov 3-10)**
|
||||
- **Mon-Tue**: Multi-Screen individual controls + Hero section redesign
|
||||
- **Wed-Thu**: Loading states and error handling + Navigation improvements
|
||||
- **Fri**: Statistics dashboard enhancements + Icon system implementation
|
||||
- **Weekend**: Video performance optimization + Visual design system
|
||||
|
||||
### **Week 2 (Nov 10-17)**
|
||||
- **Mon-Tue**: Multi-Screen sync options + Game mode cards and home page polish
|
||||
- **Wed-Thu**: Visual polish and interactions + Illustrations and graphics integration
|
||||
- **Fri**: Final performance optimizations and graphics polish
|
||||
- **Weekend**: Sprint review and comprehensive testing
|
||||
|
||||
---
|
||||
|
||||
## 🧪 **Testing & Quality Assurance**
|
||||
|
||||
### **Daily Testing**
|
||||
- [ ] Test all new features on desktop and mobile
|
||||
- [ ] Verify performance with large media libraries (100+ videos)
|
||||
- [ ] Check memory usage and cleanup
|
||||
- [ ] Validate error handling scenarios
|
||||
|
||||
### **Sprint Review Criteria**
|
||||
- [ ] All features work reliably with 200+ video library
|
||||
- [ ] No memory leaks during extended sessions
|
||||
- [ ] User feedback is immediate and helpful
|
||||
- [ ] Statistics accurately track all user actions
|
||||
- [ ] Mobile experience is smooth and responsive
|
||||
|
||||
---
|
||||
|
||||
## 🎉 **Sprint Success Definition**
|
||||
|
||||
**Sprint 1 will be considered successful when:**
|
||||
1. ✅ Multi-Screen Quad Player has individual controls, focus mode, and sync options
|
||||
2. ✅ Home page feels modern and professionally designed with clear visual hierarchy
|
||||
3. ✅ UI has consistent graphics, icons, and visual design throughout
|
||||
4. ✅ User experience feels polished with proper feedback and error handling
|
||||
5. ✅ Statistics system provides comprehensive analytics and achievements
|
||||
6. ✅ Performance is smooth with large media libraries (200+ videos)
|
||||
7. ✅ Zero critical bugs or user experience issues
|
||||
|
||||
**Post-Sprint**: Ready for user testing and potential monetization planning!
|
||||
|
||||
---
|
||||
|
||||
*Sprint tracking: Update this document daily with completed tasks ✅*
|
||||
|
|
@ -169,7 +169,7 @@ class QuadVideoPlayer {
|
|||
video.style.backgroundColor = '#000'; // Add black background for letterboxing
|
||||
}
|
||||
|
||||
// Hide the header to save space
|
||||
// Hide the original header to save space
|
||||
const header = player.overlayElement.querySelector('.overlay-header');
|
||||
if (header) {
|
||||
header.style.display = 'none';
|
||||
|
|
@ -181,6 +181,9 @@ class QuadVideoPlayer {
|
|||
closeBtn.style.display = 'none';
|
||||
}
|
||||
|
||||
// Create individual controls for this quadrant
|
||||
this.createIndividualControls(player, index);
|
||||
|
||||
// Remove from body and add to quad slot
|
||||
document.body.removeChild(player.overlayElement);
|
||||
slot.appendChild(player.overlayElement);
|
||||
|
|
@ -189,6 +192,178 @@ class QuadVideoPlayer {
|
|||
player.playRandomVideo();
|
||||
}
|
||||
|
||||
/**
|
||||
* Create individual controls for each quadrant
|
||||
*/
|
||||
createIndividualControls(player, index) {
|
||||
// Create controls container
|
||||
const controlsContainer = document.createElement('div');
|
||||
controlsContainer.className = 'quad-individual-controls';
|
||||
controlsContainer.dataset.quadIndex = index;
|
||||
|
||||
controlsContainer.innerHTML = `
|
||||
<div class="quad-control-row">
|
||||
<button class="quad-control-btn play-pause-btn" title="Play/Pause">
|
||||
<span class="play-icon">▶️</span>
|
||||
<span class="pause-icon" style="display: none;">⏸️</span>
|
||||
</button>
|
||||
<button class="quad-control-btn mute-btn" title="Mute/Unmute">
|
||||
<span class="unmuted-icon">🔊</span>
|
||||
<span class="muted-icon" style="display: none;">🔇</span>
|
||||
</button>
|
||||
<div class="quad-volume-control">
|
||||
<input type="range" class="quad-volume-slider" min="0" max="100" value="70" title="Volume">
|
||||
<span class="quad-volume-display">70%</span>
|
||||
</div>
|
||||
<button class="quad-control-btn shuffle-btn" title="Change Video">🔄</button>
|
||||
</div>
|
||||
<div class="quad-progress-row">
|
||||
<div class="quad-progress-container">
|
||||
<div class="quad-progress-bar">
|
||||
<div class="quad-progress-filled"></div>
|
||||
<div class="quad-progress-thumb"></div>
|
||||
</div>
|
||||
<div class="quad-time-display">
|
||||
<span class="quad-current-time">0:00</span> / <span class="quad-total-time">0:00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Insert controls into the overlay window
|
||||
const overlayWindow = player.overlayElement.querySelector('.overlay-window');
|
||||
if (overlayWindow) {
|
||||
overlayWindow.appendChild(controlsContainer);
|
||||
}
|
||||
|
||||
// Setup event listeners for individual controls
|
||||
this.setupIndividualControlListeners(player, index, controlsContainer);
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup event listeners for individual quadrant controls
|
||||
*/
|
||||
setupIndividualControlListeners(player, index, controlsContainer) {
|
||||
const video = player.overlayElement.querySelector('video');
|
||||
if (!video) return;
|
||||
|
||||
// Play/Pause button
|
||||
const playPauseBtn = controlsContainer.querySelector('.play-pause-btn');
|
||||
const playIcon = playPauseBtn.querySelector('.play-icon');
|
||||
const pauseIcon = playPauseBtn.querySelector('.pause-icon');
|
||||
|
||||
playPauseBtn.addEventListener('click', () => {
|
||||
if (video.paused) {
|
||||
video.play();
|
||||
playIcon.style.display = 'none';
|
||||
pauseIcon.style.display = 'inline';
|
||||
} else {
|
||||
video.pause();
|
||||
playIcon.style.display = 'inline';
|
||||
pauseIcon.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
// Update play/pause button based on video state
|
||||
video.addEventListener('play', () => {
|
||||
playIcon.style.display = 'none';
|
||||
pauseIcon.style.display = 'inline';
|
||||
});
|
||||
|
||||
video.addEventListener('pause', () => {
|
||||
playIcon.style.display = 'inline';
|
||||
pauseIcon.style.display = 'none';
|
||||
});
|
||||
|
||||
// Volume control
|
||||
const volumeSlider = controlsContainer.querySelector('.quad-volume-slider');
|
||||
const volumeDisplay = controlsContainer.querySelector('.quad-volume-display');
|
||||
|
||||
volumeSlider.addEventListener('input', () => {
|
||||
const volume = volumeSlider.value / 100;
|
||||
video.volume = volume;
|
||||
volumeDisplay.textContent = `${volumeSlider.value}%`;
|
||||
|
||||
// Update mute button state
|
||||
const muteBtn = controlsContainer.querySelector('.mute-btn');
|
||||
const unmutedIcon = muteBtn.querySelector('.unmuted-icon');
|
||||
const mutedIcon = muteBtn.querySelector('.muted-icon');
|
||||
|
||||
if (volume === 0) {
|
||||
unmutedIcon.style.display = 'none';
|
||||
mutedIcon.style.display = 'inline';
|
||||
} else {
|
||||
unmutedIcon.style.display = 'inline';
|
||||
mutedIcon.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
// Mute button
|
||||
const muteBtn = controlsContainer.querySelector('.mute-btn');
|
||||
const unmutedIcon = muteBtn.querySelector('.unmuted-icon');
|
||||
const mutedIcon = muteBtn.querySelector('.muted-icon');
|
||||
let previousVolume = 0.7;
|
||||
|
||||
muteBtn.addEventListener('click', () => {
|
||||
if (video.volume > 0) {
|
||||
previousVolume = video.volume;
|
||||
video.volume = 0;
|
||||
volumeSlider.value = 0;
|
||||
volumeDisplay.textContent = '0%';
|
||||
unmutedIcon.style.display = 'none';
|
||||
mutedIcon.style.display = 'inline';
|
||||
} else {
|
||||
video.volume = previousVolume;
|
||||
volumeSlider.value = previousVolume * 100;
|
||||
volumeDisplay.textContent = `${Math.round(previousVolume * 100)}%`;
|
||||
unmutedIcon.style.display = 'inline';
|
||||
mutedIcon.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
// Shuffle/Change video button
|
||||
const shuffleBtn = controlsContainer.querySelector('.shuffle-btn');
|
||||
shuffleBtn.addEventListener('click', () => {
|
||||
player.playRandomVideo();
|
||||
});
|
||||
|
||||
// Progress bar functionality
|
||||
const progressContainer = controlsContainer.querySelector('.quad-progress-container');
|
||||
const progressBar = controlsContainer.querySelector('.quad-progress-bar');
|
||||
const progressFilled = controlsContainer.querySelector('.quad-progress-filled');
|
||||
const progressThumb = controlsContainer.querySelector('.quad-progress-thumb');
|
||||
const currentTimeDisplay = controlsContainer.querySelector('.quad-current-time');
|
||||
const totalTimeDisplay = controlsContainer.querySelector('.quad-total-time');
|
||||
|
||||
// Update progress bar
|
||||
video.addEventListener('timeupdate', () => {
|
||||
if (video.duration && video.duration > 0) {
|
||||
const percentage = (video.currentTime / video.duration) * 100;
|
||||
progressFilled.style.width = `${percentage}%`;
|
||||
progressThumb.style.left = `${percentage}%`;
|
||||
|
||||
currentTimeDisplay.textContent = this.formatTime(video.currentTime);
|
||||
totalTimeDisplay.textContent = this.formatTime(video.duration);
|
||||
}
|
||||
});
|
||||
|
||||
// Progress bar seeking
|
||||
progressBar.addEventListener('click', (e) => {
|
||||
if (video.duration) {
|
||||
const rect = progressBar.getBoundingClientRect();
|
||||
const clickX = e.clientX - rect.left;
|
||||
const percentage = clickX / rect.width;
|
||||
video.currentTime = percentage * video.duration;
|
||||
}
|
||||
});
|
||||
|
||||
// Initialize time displays
|
||||
video.addEventListener('loadedmetadata', () => {
|
||||
totalTimeDisplay.textContent = this.formatTime(video.duration);
|
||||
currentTimeDisplay.textContent = this.formatTime(0);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup event listeners for quad controls
|
||||
*/
|
||||
|
|
@ -487,11 +662,186 @@ class QuadVideoPlayer {
|
|||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Individual Controls Styling */
|
||||
.quad-individual-controls {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.7) 50%, transparent 100%);
|
||||
padding: 8px 12px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.quad-slot:hover .quad-individual-controls {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.quad-control-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.quad-progress-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.quad-control-btn {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: none;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
min-width: 28px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.quad-control-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.quad-volume-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.quad-volume-slider {
|
||||
flex: 1;
|
||||
height: 4px;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 2px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.quad-volume-slider::-webkit-slider-thumb {
|
||||
appearance: none;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: #ff6b9d;
|
||||
cursor: pointer;
|
||||
border: 2px solid white;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.quad-volume-slider::-moz-range-thumb {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: #ff6b9d;
|
||||
cursor: pointer;
|
||||
border: 2px solid white;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.quad-volume-display {
|
||||
font-size: 10px;
|
||||
color: white;
|
||||
min-width: 30px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.quad-progress-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.quad-progress-bar {
|
||||
position: relative;
|
||||
height: 4px;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.quad-progress-filled {
|
||||
height: 100%;
|
||||
background: #ff6b9d;
|
||||
border-radius: 2px;
|
||||
width: 0%;
|
||||
transition: width 0.1s ease;
|
||||
}
|
||||
|
||||
.quad-progress-thumb {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
|
||||
left: 0%;
|
||||
transition: left 0.1s ease;
|
||||
}
|
||||
|
||||
.quad-time-display {
|
||||
font-size: 9px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Hide controls on mobile to save space */
|
||||
@media (max-width: 768px) {
|
||||
.quad-individual-controls {
|
||||
padding: 4px 6px;
|
||||
}
|
||||
|
||||
.quad-control-btn {
|
||||
padding: 2px 4px;
|
||||
font-size: 10px;
|
||||
min-width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.quad-volume-display {
|
||||
font-size: 8px;
|
||||
min-width: 25px;
|
||||
}
|
||||
|
||||
.quad-time-display {
|
||||
font-size: 8px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
document.head.appendChild(styles);
|
||||
}
|
||||
|
||||
/**
|
||||
* Format time in MM:SS format
|
||||
*/
|
||||
formatTime(seconds) {
|
||||
if (!seconds || isNaN(seconds)) return '0:00';
|
||||
|
||||
const minutes = Math.floor(seconds / 60);
|
||||
const remainingSeconds = Math.floor(seconds % 60);
|
||||
return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Cleanup resources
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -134,6 +134,311 @@ body {
|
|||
to { filter: drop-shadow(0 0 15px rgba(138, 43, 226, 0.9)); }
|
||||
}
|
||||
|
||||
/* Enhanced Hero Section */
|
||||
.hero-header {
|
||||
background: linear-gradient(135deg,
|
||||
var(--bg-primary) 0%,
|
||||
var(--bg-secondary) 30%,
|
||||
rgba(138, 43, 226, 0.1) 70%,
|
||||
var(--bg-secondary) 100%);
|
||||
padding: var(--space-xxl) var(--space-xl);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.hero-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background:
|
||||
radial-gradient(circle at 20% 30%, rgba(138, 43, 226, 0.15) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 70%, rgba(218, 112, 214, 0.1) 0%, transparent 50%),
|
||||
linear-gradient(45deg, transparent 30%, rgba(138, 43, 226, 0.05) 50%, transparent 70%);
|
||||
animation: heroBackgroundShift 10s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes heroBackgroundShift {
|
||||
from { opacity: 0.7; transform: translateX(-2%); }
|
||||
to { opacity: 1; transform: translateX(2%); }
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
gap: var(--space-xxl);
|
||||
align-items: start;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.hero-title-section {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-family: 'Audiowide', cursive;
|
||||
margin: 0 0 var(--space-lg) 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.hero-title-main {
|
||||
font-size: clamp(3rem, 8vw, 6rem);
|
||||
color: var(--color-primary);
|
||||
text-shadow:
|
||||
0 0 30px rgba(138, 43, 226, 0.8),
|
||||
0 4px 8px rgba(0, 0, 0, 0.5);
|
||||
-webkit-text-stroke: 0.5px rgba(255, 255, 255, 0.3);
|
||||
animation: titleGlow 3s ease-in-out infinite alternate;
|
||||
line-height: 0.9;
|
||||
}
|
||||
|
||||
.hero-title-accent {
|
||||
font-size: clamp(1.2rem, 3vw, 2rem);
|
||||
color: var(--color-secondary);
|
||||
font-weight: 300;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
|
||||
margin-left: var(--space-sm);
|
||||
}
|
||||
|
||||
.hero-tagline {
|
||||
margin: 0 0 var(--space-xl) 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
.tagline-emphasis {
|
||||
font-size: clamp(1.5rem, 4vw, 2.5rem);
|
||||
color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.tagline-subtitle {
|
||||
font-size: var(--font-lg);
|
||||
color: var(--text-secondary);
|
||||
font-weight: 300;
|
||||
opacity: 0.9;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hero-features {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
gap: var(--space-lg);
|
||||
margin: var(--space-xl) 0;
|
||||
}
|
||||
|
||||
.hero-feature {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
padding: var(--space-base);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: var(--border-radius);
|
||||
border: 1px solid var(--border-color);
|
||||
transition: all 0.3s ease;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.hero-feature:hover {
|
||||
background: rgba(138, 43, 226, 0.1);
|
||||
border-color: var(--color-primary);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--glow-primary);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
font-size: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 32px;
|
||||
}
|
||||
|
||||
.feature-text {
|
||||
font-size: var(--font-base);
|
||||
color: var(--text-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.hero-status-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-lg);
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.status-card {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--border-radius-lg);
|
||||
padding: var(--space-lg);
|
||||
text-align: center;
|
||||
backdrop-filter: blur(15px);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.status-card:hover {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 4px 20px rgba(138, 43, 226, 0.3);
|
||||
}
|
||||
|
||||
.status-label {
|
||||
font-size: var(--font-sm);
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: var(--space-sm);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.status-value {
|
||||
font-size: var(--font-xxl);
|
||||
color: var(--text-primary);
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: center;
|
||||
gap: var(--space-xs);
|
||||
margin-bottom: var(--space-sm);
|
||||
}
|
||||
|
||||
.xp-number {
|
||||
color: var(--color-primary);
|
||||
text-shadow: 0 0 10px rgba(138, 43, 226, 0.5);
|
||||
}
|
||||
|
||||
.xp-suffix {
|
||||
font-size: var(--font-base);
|
||||
color: var(--text-secondary);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.timer-display {
|
||||
font-family: 'Courier New', monospace;
|
||||
color: var(--color-secondary);
|
||||
text-shadow: 0 0 10px rgba(218, 112, 214, 0.5);
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
height: 4px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
margin-top: var(--space-sm);
|
||||
}
|
||||
|
||||
.status-progress {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
|
||||
border-radius: 2px;
|
||||
transition: width 0.5s ease;
|
||||
box-shadow: 0 0 10px rgba(138, 43, 226, 0.5);
|
||||
}
|
||||
|
||||
.timer-status-text {
|
||||
font-size: var(--font-xs);
|
||||
color: var(--text-tertiary);
|
||||
margin-top: var(--space-sm);
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--space-base);
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: var(--font-xl);
|
||||
color: var(--color-primary);
|
||||
font-weight: 700;
|
||||
text-shadow: 0 0 8px rgba(138, 43, 226, 0.4);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: var(--font-xs);
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.hero-music-controls {
|
||||
position: absolute;
|
||||
top: var(--space-lg);
|
||||
right: var(--space-lg);
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
/* Responsive Hero Design */
|
||||
@media (max-width: 1024px) {
|
||||
.hero-content {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-xl);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-title-section {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-features {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.hero-status-panel {
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.status-card {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero-header {
|
||||
padding: var(--space-xl) var(--space-lg);
|
||||
min-height: 350px;
|
||||
}
|
||||
|
||||
.hero-features {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-base);
|
||||
}
|
||||
|
||||
.hero-status-panel {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.hero-music-controls {
|
||||
position: relative;
|
||||
top: auto;
|
||||
right: auto;
|
||||
margin-top: var(--space-lg);
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* Main content area */
|
||||
.game-content {
|
||||
background: var(--bg-primary);
|
||||
|
|
|
|||
Loading…
Reference in New Issue