
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Omnipresence</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/lucide"></script>
    <script src="https://unpkg.com/globe.gl"></script>
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Space+Grotesk:wght@300;400;500&display=swap" rel="stylesheet">
    <style>
        .pixel-font {
            font-family: 'Press Start 2P', cursive;
        }
        .space-font {
            font-family: 'Space Grotesk', sans-serif;
        }
        .glow {
            text-shadow: 0 0 10px rgba(156, 163, 175, 0.4);
        }
        @keyframes pulse {
            0% { opacity: 0.4; }
            50% { opacity: 1; }
            100% { opacity: 0.4; }
        }
        .status {
            animation: pulse 2s infinite;
        }
    </style>
</head>
<body class="bg-black text-white min-h-screen overflow-hidden">
    <div id="globeContainer" class="fixed inset-0 z-0"></div>
    
    <div class="relative z-10 flex flex-col h-screen">
        <div class="flex-grow flex items-center justify-center">
            <div class="text-center space-y-8 p-8">
                <div class="space-y-3">
                    <h1 class="text-6xl space-font font-light text-gray-300 tracking-[.25em] leading-relaxed">
                        Omnipresence
                    </h1>
                    <div class="text-base space-font font-light text-gray-500 tracking-[.5em] uppercase">
                        POI Real-time Locating System
                    </div>
                </div>
                
                <!-- Error message -->
                <div class="inline-flex items-center gap-3 px-6 py-4 bg-gray-900/50 backdrop-blur rounded-lg">
                    <i data-lucide="alert-circle" class="w-5 h-5 text-red-500"></i>
                    <span class="pixel-font text-xs text-red-400">Unauthorized IP Address</span>
                </div>

                <!-- Powered by text -->
                <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2">
                    <div class="space-font text-xs text-gray-600 tracking-widest uppercase">
                        Powered by Palantir Apollo
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        const locations = [
            { name: 'Bangkok', lat: 13.7563, lng: 100.5018 },
            { name: 'Chiang Mai', lat: 18.7883, lng: 98.9853 },
            { name: 'Phuket', lat: 7.8804, lng: 98.3923 },
            { name: 'Pattaya', lat: 12.9236, lng: 100.8824 },
            { name: 'Hat Yai', lat: 7.0086, lng: 100.4747 },
            { name: 'Korat', lat: 14.9799, lng: 102.0978 },
            { name: 'Udon Thani', lat: 17.4649, lng: 102.8360 }
        ];

        const globe = Globe()
            .globeImageUrl('https://unpkg.com/three-globe/example/img/earth-night.jpg')
            .bumpImageUrl('https://unpkg.com/three-globe/example/img/earth-topology.png')
            .backgroundImageUrl(null)
            .showAtmosphere(true)
            .atmosphereColor('#374151')
            .atmosphereAltitude(0.25)
            .pointsData(locations)
            .pointColor(() => '#ef4444')
            .pointAltitude(0.1)
            .pointRadius(0.5)
            .pointsMerge(true)
            .ringsData(locations)
            .ringColor(() => 'rgba(239, 68, 68, 0.3)')
            .ringMaxRadius(2)
            .ringPropagationSpeed(0.5)
            .ringRepeatPeriod(1000)
            (document.getElementById('globeContainer'));

        globe.pointOfView({
            lat: 13.7563,
            lng: 100.5018,
            altitude: 1.8
        });

        globe.controls().autoRotate = true;
        globe.controls().autoRotateSpeed = 0.1;
        
        const handleResize = () => {
            globe
                .width(window.innerWidth)
                .height(window.innerHeight);
        };
        
        window.addEventListener('resize', handleResize);
        handleResize();

        const arcsData = locations.map((startCity, idx) => {
            const endCity = locations[(idx + 1) % locations.length];
            return {
                startLat: startCity.lat,
                startLng: startCity.lng,
                endLat: endCity.lat,
                endLng: endCity.lng,
                color: [0.94, 0.27, 0.27]
            };
        });

        globe
            .arcsData(arcsData)
            .arcColor('color')
            .arcDashLength(0.6)
            .arcDashGap(0.3)
            .arcDashAnimateTime(1000)
            .arcStroke(0.3);

        lucide.createIcons();
    </script>
</body>
</html>