52 lines
2.0 KiB
Markdown
52 lines
2.0 KiB
Markdown
# CLAUDE.md
|
|
|
|
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
|
|
|
## Project Overview
|
|
|
|
This is a Chinese game website for "闪耀吧！噜咪" (Shine! Lumimi). It's a simple, single-page website with background video, music, and navigation elements for a mobile game.
|
|
|
|
## Architecture
|
|
|
|
- **Static Site**: Pure HTML/CSS/JavaScript with no build tools or frameworks
|
|
- **Responsive Design**: Uses viewport units (vw, vh) for scaling across devices
|
|
- **Video Background**: Full-screen background video with overlay content
|
|
- **Interactive Audio**: Background music with user-controlled sound on/off
|
|
- **Welcome Overlay**: Initial splash screen that enables audio playback on user interaction (required by browser autoplay policies)
|
|
|
|
## Key Files
|
|
|
|
- `index.html` - Main structure with navigation, logo, and download buttons
|
|
- `style.css` - Styling with absolute positioning and responsive units
|
|
- `script.js` - Audio control logic and welcome overlay management
|
|
- `background-video.mp4` - Background video element
|
|
- `background-music.mp3` - Background audio element
|
|
- `image/` - Contains all UI assets (logo, navigation icons, app store badges)
|
|
|
|
## Development Workflow
|
|
|
|
Since this is a static site, no build commands are available. Simply open `index.html` in a browser to test changes.
|
|
|
|
## Audio Implementation
|
|
|
|
The site uses a welcome overlay to handle browser autoplay restrictions:
|
|
1. Music starts muted to prevent autoplay errors
|
|
2. User clicks "Enter" button to start the experience
|
|
3. Music unmutes and plays on user interaction
|
|
4. Sound toggle buttons allow users to control audio during browsing
|
|
|
|
## Asset References
|
|
|
|
All image paths use relative paths from the root directory. The `image/` directory contains:
|
|
- Logo and branding assets
|
|
- Navigation icons for different game sections
|
|
- App store download badges
|
|
- Sound control icons
|
|
|
|
## Styling Approach
|
|
|
|
- Absolute positioning for all UI elements
|
|
- Viewport units (vw, vh) for responsive scaling
|
|
- Flexbox for icon group layouts
|
|
- Z-index layering for proper element stacking
|
|
|