dallh2o-WiiRoot

A customized Wii Menu-inspired browser start page for self-hosted services and personal hub. Built on top of the original Wii.JS project with enhanced mobile DS-style interface and responsive design.

Features

• 🎮 Wii Menu Aesthetic - Familiar, nostalgic interface inspired by the Nintendo Wii dashboard
• 📱 DS-Style Mobile Interface - Dual-screen inspired carousel on mobile devices for app selection
• 🔊 Audio Feedback - Classic Wii sound effects for hover, select, and navigation
• ⚙️ Customizable Channels - Easily add or remove service tiles/channels
• 🎨 Themeable - Settings panel with theme customization and weather effects
• 🌐 Social Integration - Built-in social links hub
• 📦 Docker Ready - Includes docker-compose configuration for easy deployment

Quick Start

Local Development

1. Open index.html directly in your browser, or
2. Serve locally with your preferred HTTP server:

# Using Python
python -m http.server 8080

# Using Node.js
npx http-server -p 8080

# Using PHP
php -S localhost:8080

Then visit http://localhost:8080 in your browser.

Docker Deployment

docker-compose up -d

This will start an Nginx container on port 8080. Visit http://localhost:8080.

Project Structure

index.html                  # Main entry point
index-old.html             # Legacy entry point (reference)
docker-compose.yml         # Docker deployment configuration

assets/
  audio/                   # SFX and background music
    bgmusic.html
    button-hover.mp3
    button-select.mp3
    startup.mp3
    zip.mp3
    back.mp3
  
  css/
    universal.css          # Base styles and global reset
    menu.css               # Menu, splash, carousel, and responsive styles
    settings.css           # Settings view styles
    style.css              # Legacy stylesheet
  
  fonts/
    contb.ttf              # Wii Contoured Font
  
  images/
    channels/              # Channel preview and splash assets
    social/                # Social platform logos
    (UI sprites, backgrounds, cursor, etc.)
  
  js/
    config.js              # Configuration constants
    audio.js               # Audio controller
    splash.js              # Splash screen state and rendering
    views.js               # View transitions and loading
    main.js                # Event handling and app initialization
    imagesloaded.pkgd.min.js
    jquery.waitforimages.min.js

views/
  menu.html                # Main menu with channel carousel
  social.html              # Social links view
  settings-main.html       # Settings/customization view
  settings-credits.html    # Credits view
  licenses-temp.html       # License information

nginx/
  default.conf             # Nginx configuration for deployment

Customization

Adding Channels

Edit views/menu.html and add a channel card:

<a
  href="#"
  class="ds-channel-card viewchange js-hover-sound"
  data-view="your-view"
  data-transition="fade"
  data-preview="assets/images/channels/your-preview.png"
  data-preview-bg="#2e78b7"
  data-card-bg="#2e78b7"
>
  <span class="ds-card-kicker">Category</span>
  <div class="ds-card-preview" aria-hidden="true">
    <img src="assets/images/channels/your-preview.png" alt="" />
  </div>
  <strong>Channel Title</strong>
  <span class="ds-card-desc">Channel description</span>
</a>

Or for direct links:

<a
  href="#"
  class="ds-channel-card direct-link js-hover-sound"
  data-url="https://example.com"
  data-preview="assets/images/channels/example.png"
  data-preview-bg="#ffffff"
>
  <!-- card content -->
</a>

Adding Social Links

Edit views/social.html to add new social links and logos.

Customizing Themes

• Global Styles: Edit assets/css/universal.css
• Menu Styles: Edit assets/css/menu.css
• Settings Panel: Edit assets/css/settings.css
• JavaScript Configuration: Edit assets/js/config.js

Audio Customization

Replace audio files in assets/audio/ with your own:

• startup.mp3 - Startup sound
• bg-music.mp3 - Background music
• button-hover.mp3 - Hover sound effect
• button-select.mp3 - Selection sound effect
• zip.mp3 - Zip transition sound
• back.mp3 - Back button sound

Browser Support

• Chrome/Chromium (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Mobile optimized for touch devices with pointer coarse support.

Development Notes

Code Organization

• Avoid inline event handlers in HTML (onclick, onmouseover); use delegated events in JS
• Keep paths rooted from project root in views
• Keep shared constants in assets/js/config.js
• Use assets/css/menu.css for most visual customizations

Key Files for Editing

What to Change	Where to Edit
Channel tiles/content	views/menu.html
Social links	views/social.html
Splash behavior	assets/js/splash.js
Audio behavior	assets/js/audio.js
View transitions	assets/js/views.js
Global events	assets/js/main.js
Menu visuals	assets/css/menu.css
Settings visuals	assets/css/settings.css
Global styles	assets/css/universal.css

Credits

Original Project: Wii.JS by LucaCraft89

This project is based on the excellent Wii.JS start page framework and has been customized with:

• Enhanced mobile DS-style dual-screen carousel interface
• Additional responsive design improvements
• Custom channel configurations for dallh2o services
• Bug fixes and feature enhancements

License

See views/licenses-temp.html for license information.

Contributing

Contributions welcome! Feel free to:

• Report issues
• Suggest improvements
• Submit pull requests
• Add new features or customizations

Deployment

Docker (Recommended)

docker-compose up -d

Traditional Web Server

Copy all files to your web server's document root and ensure:

• Files are served over HTTP(S)
• MIME types are correct (especially for fonts)
• No URL rewriting interferes with asset paths

Support

For issues, questions, or suggestions, please open an issue or contact the maintainer.

---

Made with ❤️ for self-hosted enthusiasts

• Keep DOM behavior split by responsibility:
  • audio.js for sound
  • splash.js for splash state
  • views.js for navigation and transitions
  • main.js for event wiring

Notes

• Browser autoplay restrictions can block music until a user interaction happens.
• index-old.html and assets/css/style.css are intentionally preserved as legacy references.