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:

Music starts muted to prevent autoplay errors
User clicks "Enter" button to start the experience
Music unmutes and plays on user interaction
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

2.0 KiB Raw Permalink Blame History