3D Apple Vision Pro Spatial Glass OS Interface

<!DOCTYPE html>
<html lang="en" class="h-full dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Apple Vision Pro Spatial Glass OS Interface</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@600;700;800&display=swap" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        body {
            margin: 0;
            height: 100vh;
            overflow: hidden;
            font-family: 'Inter', sans-serif;
            perspective: 1200px;
            background: radial-gradient(circle at 20% 20%, #1e1b4b 0%, #090d16 55%, #020617 100%);
        }
        .spatial-stage {
            transform-style: preserve-3d;
            transition: transform 0.15s ease-out;
        }
        .vision-glass {
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(28px) saturate(180%);
            -webkit-backdrop-filter: blur(28px) saturate(180%);
            border: 1px solid rgba(255, 255, 255, 0.22);
            box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.3);
        }
    </style>
</head>
<body class="text-white flex items-center justify-center select-none p-4">

    <!-- Dynamic Ambient Nebulas -->
    <div id="bgGlow1" class="fixed top-10 left-1/4 w-96 h-96 rounded-full bg-cyan-500/25 blur-3xl pointer-events-none transition-all duration-700"></div>
    <div id="bgGlow2" class="fixed bottom-10 right-1/4 w-96 h-96 rounded-full bg-purple-600/25 blur-3xl pointer-events-none transition-all duration-700"></div>

    <!-- 3D Spatial Stage -->
    <div id="spatialStage" class="spatial-stage w-full max-w-5xl flex flex-col items-center gap-6">

        <!-- Top Spatial Eye-Tracking Status Pill -->
        <div class="vision-glass px-5 py-2 rounded-full flex items-center gap-4 text-xs font-medium" style="transform: translateZ(45px);">
            <span class="flex items-center gap-1.5 text-emerald-300 font-bold">
                <span class="w-2 h-2 rounded-full bg-emerald-400 animate-ping"></span>
                visionOS Spatial Workspace
            </span>
            <span class="text-white/40">|</span>
            <button onclick="switchEnvironment('aurora')" class="hover:text-cyan-300 transition">🌌 Aurora Sky</button>
            <button onclick="switchEnvironment('sunset')" class="hover:text-amber-300 transition">🌅 Desert Dusk</button>
            <button onclick="switchEnvironment('cyber')" class="hover:text-purple-300 transition">🔮 Cyber Matrix</button>
        </div>

        <!-- Main 3D Floating Spatial Windows Grid -->
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-6 w-full items-stretch">

            <!-- Left Spatial Audio & Media Card -->
            <div class="lg:col-span-4 vision-glass rounded-[32px] p-6 flex flex-col justify-between space-y-5" style="transform: translateZ(35px) rotateY(6deg);">
                <div class="flex items-center justify-between">
                    <span class="text-xs font-bold uppercase tracking-wider text-cyan-300">Spatial Audio Studio</span>
                    <span class="px-2.5 py-0.5 rounded-full text-[10px] bg-white/10">Dolby Atmos 3D</span>
                </div>

                <div class="p-4 rounded-2xl bg-black/25 border border-white/10 flex items-center gap-4">
                    <div class="w-14 h-14 rounded-2xl bg-gradient-to-tr from-cyan-500 via-blue-500 to-purple-600 flex items-center justify-center text-2xl shadow-lg">
                        🎧
                    </div>
                    <div>
                        <h3 id="trackTitle" class="font-bold text-sm text-white">Interstellar Synthwave</h3>
                        <p class="text-xs text-white/60">Spatial Lossless • 48kHz</p>
                    </div>
                </div>

                <!-- Animated Equalizer Bars -->
                <div class="flex items-end justify-between gap-1.5 h-12 px-2">
                    <div class="eq-bar w-full bg-cyan-400/80 rounded-full h-6 transition-all duration-150"></div>
                    <div class="eq-bar w-full bg-cyan-400/80 rounded-full h-10 transition-all duration-150"></div>
                    <div class="eq-bar w-full bg-blue-400/80 rounded-full h-4 transition-all duration-150"></div>
                    <div class="eq-bar w-full bg-indigo-400/80 rounded-full h-12 transition-all duration-150"></div>
                    <div class="eq-bar w-full bg-purple-400/80 rounded-full h-8 transition-all duration-150"></div>
                    <div class="eq-bar w-full bg-cyan-400/80 rounded-full h-5 transition-all duration-150"></div>
                    <div class="eq-bar w-full bg-emerald-400/80 rounded-full h-9 transition-all duration-150"></div>
                </div>

                <div class="flex items-center justify-around pt-2">
                    <button onclick="nextTrack('Midnight Horizon')" class="p-2.5 rounded-full bg-white/10 hover:bg-white/20 transition">⏮</button>
                    <button id="playBtn" onclick="togglePlay()" class="w-12 h-12 rounded-full bg-white text-slate-950 font-bold text-lg shadow-xl hover:scale-105 transition">⏸</button>
                    <button onclick="nextTrack('Cyberpunk Odyssey')" class="p-2.5 rounded-full bg-white/10 hover:bg-white/20 transition">⏭</button>
                </div>
            </div>

            <!-- Center Main 3D Spatial Hub Window -->
            <div class="lg:col-span-5 vision-glass rounded-[32px] p-6 sm:p-7 flex flex-col justify-between space-y-6" style="transform: translateZ(65px);">
                <div class="flex items-center justify-between">
                    <div>
                        <span class="text-[11px] text-cyan-300 font-semibold uppercase tracking-wider">3D Depth Layer</span>
                        <h2 class="text-xl sm:text-2xl font-extrabold text-white mt-0.5">Spatial Glass Computing</h2>
                    </div>
                    <span class="w-10 h-10 rounded-2xl bg-white/15 flex items-center justify-center text-lg">🥽</span>
                </div>

                <p class="text-xs sm:text-sm text-white/75 leading-relaxed">
                    Move your cursor or touch across the screen to experience real-time 3D perspective depth, specular glass highlights, and multi-layered Z-axis parallax.
                </p>

                <div class="grid grid-cols-3 gap-3 text-center">
                    <div class="p-3 rounded-2xl bg-white/10 border border-white/15 hover:bg-white/20 transition cursor-pointer">
                        <div class="text-xl mb-1">🪐</div>
                        <div class="text-[11px] font-bold">3D Orbit</div>
                    </div>
                    <div class="p-3 rounded-2xl bg-white/10 border border-white/15 hover:bg-white/20 transition cursor-pointer">
                        <div class="text-xl mb-1">🎨</div>
                        <div class="text-[11px] font-bold">Shaders</div>
                    </div>
                    <div class="p-3 rounded-2xl bg-white/10 border border-white/15 hover:bg-white/20 transition cursor-pointer">
                        <div class="text-xl mb-1">⚡</div>
                        <div class="text-[11px] font-bold">120 Hz</div>
                    </div>
                </div>

                <div class="space-y-2">
                    <div class="flex justify-between text-xs">
                        <span class="text-white/70">Immersion Depth Level</span>
                        <span id="depthValue" class="font-mono text-cyan-300 font-bold">85%</span>
                    </div>
                    <input type="range" min="10" max="100" value="85" oninput="document.getElementById('depthValue').innerText = this.value + '%'" class="w-full accent-cyan-400">
                </div>
            </div>

            <!-- Right Spatial Weather & Environment Widget -->
            <div class="lg:col-span-3 vision-glass rounded-[32px] p-6 flex flex-col justify-between space-y-4" style="transform: translateZ(35px) rotateY(-6deg);">
                <div class="flex items-center justify-between">
                    <span class="text-xs font-bold text-white/80">Tokyo Sky</span>
                    <span class="text-2xl">🌩️</span>
                </div>
                <div>
                    <div class="text-4xl font-extrabold tracking-tight">22°C</div>
                    <div class="text-xs text-cyan-300 mt-1">Neon Rain • AQI 18</div>
                </div>
                <div class="space-y-2 pt-2 border-t border-white/15 text-xs">
                    <div class="flex justify-between"><span>Humidity</span><span class="font-mono">68%</span></div>
                    <div class="flex justify-between"><span>Wind Vector</span><span class="font-mono">14 km/h</span></div>
                    <div class="flex justify-between"><span>UV Index</span><span class="font-mono text-emerald-300">Low</span></div>
                </div>
            </div>

        </div>

        <!-- Bottom Floating Spatial App Dock -->
        <div class="vision-glass px-6 py-3 rounded-full flex items-center gap-5" style="transform: translateZ(55px);">
            <button class="w-11 h-11 rounded-2xl bg-gradient-to-tr from-cyan-500 to-blue-600 flex items-center justify-center text-xl hover:scale-125 transition">🌐</button>
            <button class="w-11 h-11 rounded-2xl bg-gradient-to-tr from-purple-500 to-pink-600 flex items-center justify-center text-xl hover:scale-125 transition">🎵</button>
            <button class="w-11 h-11 rounded-2xl bg-gradient-to-tr from-emerald-500 to-teal-600 flex items-center justify-center text-xl hover:scale-125 transition">🧊</button>
            <button class="w-11 h-11 rounded-2xl bg-gradient-to-tr from-amber-500 to-orange-600 flex items-center justify-center text-xl hover:scale-125 transition">📸</button>
        </div>

    </div>

    <script>
        const stage = document.getElementById('spatialStage');
        let playing = true;

        window.addEventListener('pointermove', (e) => {
            const x = (e.clientX / window.innerWidth - 0.5) * 18;
            const y = (e.clientY / window.innerHeight - 0.5) * -18;
            stage.style.transform = `rotateY(${x}deg) rotateX(${y}deg)`;
        });

        setInterval(() => {
            if (!playing) return;
            document.querySelectorAll('.eq-bar').forEach(bar => {
                bar.style.height = (Math.floor(Math.random() * 38) + 8) + 'px';
            });
        }, 180);

        function togglePlay() {
            playing = !playing;
            document.getElementById('playBtn').innerText = playing ? '⏸' : '▶';
        }

        function nextTrack(name) {
            document.getElementById('trackTitle').innerText = name;
        }

        function switchEnvironment(theme) {
            const g1 = document.getElementById('bgGlow1');
            const g2 = document.getElementById('bgGlow2');
            if (theme === 'aurora') {
                g1.className = 'fixed top-10 left-1/4 w-96 h-96 rounded-full bg-cyan-500/30 blur-3xl pointer-events-none transition-all duration-700';
                g2.className = 'fixed bottom-10 right-1/4 w-96 h-96 rounded-full bg-emerald-500/25 blur-3xl pointer-events-none transition-all duration-700';
            } else if (theme === 'sunset') {
                g1.className = 'fixed top-10 left-1/4 w-96 h-96 rounded-full bg-amber-500/30 blur-3xl pointer-events-none transition-all duration-700';
                g2.className = 'fixed bottom-10 right-1/4 w-96 h-96 rounded-full bg-rose-600/30 blur-3xl pointer-events-none transition-all duration-700';
            } else {
                g1.className = 'fixed top-10 left-1/4 w-96 h-96 rounded-full bg-purple-600/35 blur-3xl pointer-events-none transition-all duration-700';
                g2.className = 'fixed bottom-10 right-1/4 w-96 h-96 rounded-full bg-blue-600/30 blur-3xl pointer-events-none transition-all duration-700';
            }
        }
    </script>
</body>
</html>

/* Built-in 3D WebGL & Glassmorphic Shaders included in index.html */

// Complete Three.js 3D scene, camera, lighting, and pointer controls included