Add Big Picture Mode for Steam Deck and controllers

Introduces a new Big Picture Mode with a controller-friendly, console-style UI optimized for Steam Deck and handheld devices. Adds new renderer files (HTML, CSS, JS) for the mode, updates main and preload scripts to support window management and IPC for Big Picture Mode, and documents features and usage in BIG_PICTURE_MODE.md. Updates settings and navigation to allow launching and exiting Big Picture Mode.
2025-12-27 23:09:45 +13:00
parent 43ebed0ade
commit 5c837aecd8
12 changed files with 3573 additions and 0 deletions
@@ -0,0 +1,120 @@
+# Big Picture Mode - Steam Deck & Controller UI
+
+Nebula Browser includes a **Big Picture Mode** - a controller-friendly, console-style interface designed for Steam Deck, handheld devices, and living room setups.
+
+## Features
+
+### 🎮 Controller Support
+- **Full gamepad navigation** - Use D-pad or left stick to navigate
+- **Button mapping**:
+  - **A / Cross** - Select/Activate
+  - **B / Circle** - Go Back
+  - **Y / Triangle** - Quick Search
+  - **Start** - Toggle Settings
+- **Audio feedback** for navigation
+
+### 📱 Optimized for Steam Deck
+- **1280x800 native resolution** support
+- Automatic detection of Steam Deck screens
+- Large touch-friendly UI elements
+- Fullscreen immersive experience
+
+### 🎨 Modern Console-Style UI
+- Inspired by Steam OS Big Picture and Xbox Dashboard
+- Smooth animations and transitions
+- Glowing focus indicators
+- Dark theme optimized for OLED displays
+
+### ⌨️ On-Screen Keyboard
+- Built-in virtual keyboard for controller input
+- URL and search input support
+- Special keys for common domains (.com, .org, etc.)
+
+## How to Access
+
+### From Desktop Mode
+1. **Menu Button (☰)** → Click **"🎮 Big Picture Mode"**
+2. **Settings** → **General** → Click **"Launch Big Picture Mode"**
+
+### Keyboard Shortcut
+- Press `F11` while in Big Picture Mode to toggle fullscreen
+
+### Automatic Detection
+If Nebula detects a Steam Deck-sized display (1280x800), it will suggest Big Picture Mode in settings.
+
+## Navigation Sections
+
+| Section | Description |
+|---------|-------------|
+| **Home** | Quick access sites, search, and recent browsing |
+| **Bookmarks** | Your saved websites in a tile grid |
+| **History** | Recently visited sites |
+| **Downloads** | Downloaded files |
+| **NeBot AI** | Launch the AI assistant |
+| **Settings** | Theme, privacy, and display options |
+
+## Controller Button Reference
+
+| Button | Action |
+|--------|--------|
+| D-Pad / Left Stick | Navigate between elements |
+| A / Cross | Select focused element |
+| B / Circle | Go back / Close menu |
+| Y / Triangle | Open search (on-screen keyboard) |
+| Start | Open/Close settings |
+| LB/RB | Scroll horizontally |
+
+## Exiting Big Picture Mode
+
+- Press the **Exit** button in the top-right corner
+- Go to **Settings** → **Desktop Mode**
+- Press `Escape` key multiple times
+
+## Technical Details
+
+### Files
+- `renderer/bigpicture.html` - Main HTML structure
+- `renderer/bigpicture.css` - Console-optimized styles
+- `renderer/bigpicture.js` - Controller handling and navigation
+
+### Screen Detection
+Big Picture Mode is suggested for displays matching:
+- Steam Deck resolution: 1280×800
+- Screens smaller than 1366px width
+- 16:10 or 16:9 aspect ratios
+
+### API
+```javascript
+// Check if Big Picture Mode is recommended
+const suggested = await window.bigPictureAPI.isSuggested();
+
+// Get screen information
+const info = await window.bigPictureAPI.getScreenInfo();
+
+// Launch Big Picture Mode
+await window.bigPictureAPI.launch();
+
+// Exit Big Picture Mode
+await window.bigPictureAPI.exit();
+```
+
+## Customization
+
+The Big Picture Mode respects your theme settings. Colors are applied from your selected theme:
+- Background colors
+- Accent and primary colors  
+- Text colors
+
+## Known Limitations
+
+- Some complex web forms may be difficult to navigate with controller only
+- Video players use native controls
+- Right-click context menus require mouse/touch
+
+## Future Improvements
+
+- [ ] Rumble/haptic feedback for compatible controllers
+- [ ] Voice search integration with NeBot
+- [ ] Picture-in-picture mode for videos
+- [ ] Game overlay mode
+- [ ] Custom controller mappings