index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>null</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="info">
        <span class="desktop-controls">WASD to move • Mouse to look • Click to lock cursor & start music • ESC to unlock</span>
        <span class="mobile-controls" style="display:none;">Touch to move • Drag to look around • Tap to start music</span>
    </div>
    <a id="vr-launch-btn" href="vr.html">🥽 Launch VR Mode (Google XR Blocks)</a>
    <div id="intensity-indicator">Intensity: <span id="intensity-value">0</span>%</div>
    <div id="room-indicator">Room: <span id="room-value">1</span> | Position: <span id="position-value">0, 0</span></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="main.js"></script>
</body>
</html>