Spaces:

vs4vijay
/

skywatch

Running

App Files Files Community

vs4vijay commited on 20 days ago

Commit

7eec6c7

verified ·

1 Parent(s): ac3040a

Add 2 files

Browse files

Files changed (2) hide show

README.md +6 -4
index.html +751 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Skywatch
-emoji: 📚
 colorFrom: red
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: skywatch
+emoji: 🐳
 colorFrom: red
+colorTo: red
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,751 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SkyWatch - Plane Tracker</title>
+    <meta name="description" content="Track planes flying above your location in real-time">
+    <meta name="theme-color" content="#1e40af">
+    <link rel="manifest" href="/manifest.json">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+        }
+        .animate-pulse {
+            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+        }
+        .notification-badge {
+            position: absolute;
+            top: -5px;
+            right: -5px;
+            background-color: #ef4444;
+            color: white;
+            border-radius: 9999px;
+            width: 20px;
+            height: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 12px;
+            font-weight: bold;
+        }
+        .plane-icon {
+            transform: rotate(var(--rotation));
+        }
+        .map-container {
+            height: 300px;
+            background-color: #e5e7eb;
+            position: relative;
+            overflow: hidden;
+        }
+        .map-plane {
+            position: absolute;
+            transition: all 1s ease-out;
+        }
+        .radar-sweep {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+            transform: translate(-50%, -50%);
+            background: conic-gradient(from 0deg, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0.3) 50%, transparent 50%);
+            animation: radar-rotate 4s linear infinite;
+            pointer-events: none;
+        }
+        @keyframes radar-rotate {
+            from { transform: translate(-50%, -50%) rotate(0deg); }
+            to { transform: translate(-50%, -50%) rotate(360deg); }
+        }
+    </style>
+</head>
+<body class="bg-gray-100 min-h-screen">
+    <div class="max-w-md mx-auto bg-white shadow-lg rounded-b-xl overflow-hidden">
+        <!-- Header -->
+        <header class="bg-blue-800 text-white p-4 relative">
+            <div class="flex justify-between items-center">
+                <div>
+                    <h1 class="text-xl font-bold">SkyWatch</h1>
+                    <p class="text-sm opacity-80" id="location-status">Detecting your location...</p>
+                </div>
+                <div class="flex space-x-3">
+                    <button id="notification-btn" class="relative p-2 rounded-full hover:bg-blue-700 transition">
+                        <i class="fas fa-bell"></i>
+                        <span id="notification-count" class="notification-badge hidden">0</span>
+                    </button>
+                    <button id="refresh-btn" class="p-2 rounded-full hover:bg-blue-700 transition">
+                        <i class="fas fa-sync-alt"></i>
+                    </button>
+                </div>
+            </div>
+        </header>
+        <!-- Main Content -->
+        <main class="p-4">
+            <!-- Radar Map -->
+            <div class="map-container rounded-lg mb-4 relative">
+                <div id="radar-center" class="absolute top-1/2 left-1/2 w-3 h-3 bg-blue-600 rounded-full transform -translate-x-1/2 -translate-y-1/2 z-10"></div>
+                <div id="map-planes" class="relative z-0"></div>
+                <div class="radar-sweep"></div>
+            </div>
+            <!-- Current Plane Info -->
+            <div id="current-plane" class="bg-blue-50 rounded-lg p-3 mb-4 hidden">
+                <div class="flex justify-between items-center mb-2">
+                    <h3 class="font-bold text-blue-800">Plane Above You Now</h3>
+                    <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">LIVE</span>
+                </div>
+                <div class="flex items-center space-x-3">
+                    <div class="bg-blue-100 p-2 rounded-full">
+                        <i class="fas fa-plane text-blue-600"></i>
+                    </div>
+                    <div class="flex-1">
+                        <div class="flex justify-between">
+                            <span class="font-medium" id="current-callsign">--</span>
+                            <span class="text-sm" id="current-altitude">-- ft</span>
+                        </div>
+                        <div class="text-sm text-gray-600" id="current-airline">--</div>
+                    </div>
+                </div>
+            </div>
+            <!-- Upcoming Planes -->
+            <div class="mb-2 flex justify-between items-center">
+                <h2 class="font-bold text-gray-800">Upcoming Planes</h2>
+                <span class="text-xs bg-gray-200 text-gray-800 px-2 py-1 rounded-full" id="planes-count">0 planes</span>
+            </div>
+            <div id="upcoming-planes" class="space-y-3">
+                <div class="text-center py-8 text-gray-500" id="loading-planes">
+                    <i class="fas fa-plane animate-pulse text-2xl mb-2"></i>
+                    <p>Scanning for planes...</p>
+                </div>
+            </div>
+        </main>
+        <!-- Footer -->
+        <footer class="bg-gray-50 p-3 border-t flex justify-between text-xs text-gray-500">
+            <div>
+                <span id="last-updated">Last updated: --</span>
+            </div>
+            <div>
+                <span id="api-status">API: Offline</span>
+            </div>
+        </footer>
+    </div>
+    <!-- Notification Modal -->
+    <div id="notification-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
+        <div class="bg-white rounded-lg w-full max-w-sm mx-4 max-h-[80vh] overflow-y-auto">
+            <div class="p-4 border-b flex justify-between items-center">
+                <h3 class="font-bold">Plane Alerts</h3>
+                <button id="close-notifications" class="text-gray-500 hover:text-gray-700">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div id="notification-list" class="divide-y">
+                <div class="p-4 text-center text-gray-500">
+                    No alerts yet
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Install Prompt -->
+    <div id="install-prompt" class="fixed bottom-4 left-0 right-0 flex justify-center hidden">
+        <div class="bg-blue-600 text-white rounded-lg shadow-lg p-4 mx-4 max-w-md flex items-center justify-between">
+            <div class="flex items-center">
+                <i class="fas fa-plane-departure text-xl mr-3"></i>
+                <div>
+                    <p class="font-medium">Install SkyWatch</p>
+                    <p class="text-sm opacity-90">Get real-time plane alerts</p>
+                </div>
+            </div>
+            <button id="install-btn" class="bg-white text-blue-600 px-3 py-1 rounded-full text-sm font-medium">Install</button>
+        </div>
+    </div>
+    <script>
+        // Service Worker Registration
+        if ('serviceWorker' in navigator) {
+            window.addEventListener('load', () => {
+                navigator.serviceWorker.register('/sw.js').then(registration => {
+                    console.log('ServiceWorker registration successful');
+                }).catch(err => {
+                    console.log('ServiceWorker registration failed: ', err);
+                });
+            });
+        }
+        // App state
+        const state = {
+            location: null,
+            planes: [],
+            notifications: [],
+            lastUpdated: null,
+            currentPlane: null,
+            deferredPrompt: null
+        };
+        // DOM Elements
+        const elements = {
+            locationStatus: document.getElementById('location-status'),
+            currentPlaneCard: document.getElementById('current-plane'),
+            currentCallsign: document.getElementById('current-callsign'),
+            currentAltitude: document.getElementById('current-altitude'),
+            currentAirline: document.getElementById('current-airline'),
+            upcomingPlanes: document.getElementById('upcoming-planes'),
+            loadingPlanes: document.getElementById('loading-planes'),
+            planesCount: document.getElementById('planes-count'),
+            lastUpdated: document.getElementById('last-updated'),
+            apiStatus: document.getElementById('api-status'),
+            notificationBtn: document.getElementById('notification-btn'),
+            notificationCount: document.getElementById('notification-count'),
+            notificationModal: document.getElementById('notification-modal'),
+            notificationList: document.getElementById('notification-list'),
+            closeNotifications: document.getElementById('close-notifications'),
+            refreshBtn: document.getElementById('refresh-btn'),
+            installPrompt: document.getElementById('install-prompt'),
+            installBtn: document.getElementById('install-btn'),
+            mapPlanes: document.getElementById('map-planes'),
+            radarCenter: document.getElementById('radar-center')
+        };
+        // Event Listeners
+        elements.notificationBtn.addEventListener('click', showNotifications);
+        elements.closeNotifications.addEventListener('click', hideNotifications);
+        elements.refreshBtn.addEventListener('click', refreshData);
+        elements.installBtn.addEventListener('click', installApp);
+        // Install PWA prompt
+        window.addEventListener('beforeinstallprompt', (e) => {
+            e.preventDefault();
+            state.deferredPrompt = e;
+            elements.installPrompt.classList.remove('hidden');
+        });
+        function installApp() {
+            if (state.deferredPrompt) {
+                state.deferredPrompt.prompt();
+                state.deferredPrompt.userChoice.then((choiceResult) => {
+                    if (choiceResult.outcome === 'accepted') {
+                        elements.installPrompt.classList.add('hidden');
+                    }
+                    state.deferredPrompt = null;
+                });
+            }
+        }
+        // Get user location
+        function getLocation() {
+            elements.locationStatus.textContent = 'Detecting your location...';
+            if (navigator.geolocation) {
+                navigator.geolocation.getCurrentPosition(
+                    position => {
+                        state.location = {
+                            lat: position.coords.latitude,
+                            lon: position.coords.longitude,
+                            accuracy: position.coords.accuracy
+                        };
+                        elements.locationStatus.textContent = `📍 ${state.location.lat.toFixed(4)}, ${state.location.lon.toFixed(4)}`;
+                        getPlaneData();
+                    },
+                    error => {
+                        console.error('Geolocation error:', error);
+                        elements.locationStatus.textContent = 'Location access denied. Using default location.';
+                        // Default to New York if location access is denied
+                        state.location = { lat: 40.7128, lon: -74.0060 };
+                        getPlaneData();
+                    },
+                    { enableHighAccuracy: true, timeout: 10000, maximumAge: 0 }
+                );
+            } else {
+                elements.locationStatus.textContent = 'Geolocation not supported. Using default location.';
+                state.location = { lat: 40.7128, lon: -74.0060 };
+                getPlaneData();
+            }
+        }
+        // Fetch plane data from OpenSky Network API
+        async function getPlaneData() {
+            elements.loadingPlanes.classList.remove('hidden');
+            elements.upcomingPlanes.innerHTML = '';
+            elements.upcomingPlanes.appendChild(elements.loadingPlanes);
+            elements.apiStatus.textContent = 'API: Loading...';
+            try {
+                // In a real app, you would use the actual OpenSky Network API
+                // For this demo, we'll use mock data
+                // const response = await fetch(`https://opensky-network.org/api/states/all?lamin=${state.location.lat - 1}&lomin=${state.location.lon - 1}&lamax=${state.location.lat + 1}&lomax=${state.location.lon + 1}`);
+                // const data = await response.json();
+                // Mock data for demonstration
+                const mockPlanes = generateMockPlanes(state.location.lat, state.location.lon);
+                state.planes = mockPlanes.states;
+                processPlaneData();
+                elements.apiStatus.textContent = 'API: Online';
+                elements.apiStatus.className = elements.apiStatus.className.replace('text-red-500', 'text-green-500');
+            } catch (error) {
+                console.error('Error fetching plane data:', error);
+                elements.apiStatus.textContent = 'API: Offline';
+                elements.apiStatus.className += ' text-red-500';
+                elements.loadingPlanes.innerHTML = `
+                    <div class="text-center py-8 text-red-500">
+                        <i class="fas fa-exclamation-triangle text-2xl mb-2"></i>
+                        <p>Failed to load plane data</p>
+                        <button class="mt-2 text-blue-600 text-sm font-medium">Retry</button>
+                    </div>
+                `;
+                elements.loadingPlanes.querySelector('button').addEventListener('click', getPlaneData);
+            }
+        }
+        // Process plane data and update UI
+        function processPlaneData() {
+            const now = new Date();
+            state.lastUpdated = now;
+            elements.lastUpdated.textContent = `Last updated: ${now.toLocaleTimeString()}`;
+            // Filter and sort planes by distance and time
+            const nearbyPlanes = state.planes
+                .filter(plane => plane[5] && plane[6]) // has position
+                .map(plane => ({
+                    icao24: plane[0],
+                    callsign: plane[1]?.trim() || 'N/A',
+                    origin: plane[2] || 'N/A',
+                    time: plane[3] || Date.now() / 1000,
+                    lastContact: plane[4] || Date.now() / 1000,
+                    longitude: plane[5],
+                    latitude: plane[6],
+                    altitude: plane[7] || 0,
+                    onGround: plane[8],
+                    velocity: plane[9] || 0,
+                    heading: plane[10] || 0,
+                    verticalRate: plane[11] || 0,
+                    airline: getAirlineFromCallsign(plane[1]?.trim())
+                }))
+                .filter(plane => !plane.onGround && plane.altitude > 1000) // only airborne planes
+                .sort((a, b) => {
+                    // Sort by distance to user
+                    const distA = getDistance(state.location.lat, state.location.lon, a.latitude, a.longitude);
+                    const distB = getDistance(state.location.lat, state.location.lon, b.latitude, b.longitude);
+                    return distA - distB;
+                });
+            // Check for planes directly overhead
+            const overheadPlane = nearbyPlanes.find(plane => {
+                const distance = getDistance(state.location.lat, state.location.lon, plane.latitude, plane.longitude);
+                return distance < 0.5; // within 0.5 km
+            });
+            if (overheadPlane) {
+                showCurrentPlane(overheadPlane);
+                // Check if we've already notified about this plane
+                if (!state.notifications.some(n => n.icao24 === overheadPlane.icao24)) {
+                    addNotification(overheadPlane);
+                    showAlert(overheadPlane);
+                }
+            } else {
+                hideCurrentPlane();
+            }
+            // Display upcoming planes (next 5 closest)
+            const upcomingPlanes = nearbyPlanes.slice(0, 5);
+            displayUpcomingPlanes(upcomingPlanes);
+            // Update radar map
+            updateRadarMap(nearbyPlanes.slice(0, 10));
+        }
+        // Display current plane above user
+        function showCurrentPlane(plane) {
+            state.currentPlane = plane;
+            elements.currentPlaneCard.classList.remove('hidden');
+            elements.currentCallsign.textContent = plane.callsign;
+            elements.currentAltitude.textContent = `${Math.round(plane.altitude * 0.3048)} m (${Math.round(plane.altitude)} ft)`;
+            elements.currentAirline.textContent = plane.airline || 'Unknown airline';
+        }
+        function hideCurrentPlane() {
+            state.currentPlane = null;
+            elements.currentPlaneCard.classList.add('hidden');
+        }
+        // Display upcoming planes list
+        function displayUpcomingPlanes(planes) {
+            elements.loadingPlanes.classList.add('hidden');
+            elements.planesCount.textContent = `${planes.length} ${planes.length === 1 ? 'plane' : 'planes'}`;
+            if (planes.length === 0) {
+                elements.upcomingPlanes.innerHTML = `
+                    <div class="text-center py-8 text-gray-500">
+                        <i class="fas fa-plane-slash text-2xl mb-2"></i>
+                        <p>No planes detected nearby</p>
+                    </div>
+                `;
+                return;
+            }
+            elements.upcomingPlanes.innerHTML = '';
+            planes.forEach(plane => {
+                const distance = getDistance(state.location.lat, state.location.lon, plane.latitude, plane.longitude);
+                const timeToOverhead = distance / (plane.velocity * 0.514444); // knots to m/s
+                const planeEl = document.createElement('div');
+                planeEl.className = 'bg-white rounded-lg p-3 shadow-sm border';
+                planeEl.innerHTML = `
+                    <div class="flex items-center space-x-3">
+                        <div class="bg-blue-100 p-2 rounded-full">
+                            <i class="fas fa-plane text-blue-600 plane-icon" style="--rotation: ${plane.heading}deg"></i>
+                        </div>
+                        <div class="flex-1">
+                            <div class="flex justify-between">
+                                <span class="font-medium">${plane.callsign}</span>
+                                <span class="text-sm">${Math.round(plane.altitude * 0.3048)} m</span>
+                            </div>
+                            <div class="text-sm text-gray-600">${plane.airline || 'Unknown airline'}</div>
+                            <div class="flex justify-between mt-1 text-xs">
+                                <span>${distance < 1 ? `${Math.round(distance * 1000)} m away` : `${distance.toFixed(1)} km away`}</span>
+                                <span>ETA: ${timeToOverhead > 0 ? `${Math.round(timeToOverhead / 60)} min` : 'now'}</span>
+                            </div>
+                        </div>
+                    </div>
+                `;
+                elements.upcomingPlanes.appendChild(planeEl);
+            });
+        }
+        // Update radar map with plane positions
+        function updateRadarMap(planes) {
+            elements.mapPlanes.innerHTML = '';
+            // Radar range in km
+            const radarRange = 10;
+            planes.forEach(plane => {
+                const distance = getDistance(state.location.lat, state.location.lon, plane.latitude, plane.longitude);
+                if (distance > radarRange) return;
+                // Calculate position on radar (relative to center)
+                const bearing = getBearing(state.location.lat, state.location.lon, plane.latitude, plane.longitude);
+                const scale = distance / radarRange;
+                // Position plane on radar (max 150px from center)
+                const x = Math.cos(bearing * Math.PI / 180) * scale * 150;
+                const y = Math.sin(bearing * Math.PI / 180) * scale * 150;
+                const planeEl = document.createElement('div');
+                planeEl.className = 'map-plane';
+                planeEl.style.left = `calc(50% + ${x}px)`;
+                planeEl.style.top = `calc(50% + ${y}px)`;
+                planeEl.innerHTML = `
+                    <div class="w-6 h-6 flex items-center justify-center">
+                        <i class="fas fa-plane text-blue-600 text-xs plane-icon" style="--rotation: ${plane.heading}deg"></i>
+                    </div>
+                `;
+                elements.mapPlanes.appendChild(planeEl);
+            });
+        }
+        // Add notification for a plane
+        function addNotification(plane) {
+            const notification = {
+                id: Date.now(),
+                icao24: plane.icao24,
+                callsign: plane.callsign,
+                altitude: plane.altitude,
+                time: new Date(),
+                read: false
+            };
+            state.notifications.unshift(notification);
+            updateNotificationBadge();
+            // Store notifications in localStorage
+            localStorage.setItem('skywatch-notifications', JSON.stringify(state.notifications));
+        }
+        // Show alert for a plane
+        function showAlert(plane) {
+            if (Notification.permission === 'granted') {
+                new Notification(`✈️ Plane overhead: ${plane.callsign}`, {
+                    body: `Altitude: ${Math.round(plane.altitude)} ft\nAirline: ${plane.airline || 'Unknown'}`,
+                    icon: '/icon-192x192.png'
+                });
+            } else if (Notification.permission !== 'denied') {
+                Notification.requestPermission().then(permission => {
+                    if (permission === 'granted') {
+                        showAlert(plane);
+                    }
+                });
+            }
+        }
+        // Update notification badge
+        function updateNotificationBadge() {
+            const unreadCount = state.notifications.filter(n => !n.read).length;
+            if (unreadCount > 0) {
+                elements.notificationCount.textContent = unreadCount;
+                elements.notificationCount.classList.remove('hidden');
+            } else {
+                elements.notificationCount.classList.add('hidden');
+            }
+        }
+        // Show notifications modal
+        function showNotifications() {
+            // Mark all notifications as read
+            state.notifications.forEach(n => n.read = true);
+            updateNotificationBadge();
+            // Update notification list
+            elements.notificationList.innerHTML = '';
+            if (state.notifications.length === 0) {
+                elements.notificationList.innerHTML = '<div class="p-4 text-center text-gray-500">No alerts yet</div>';
+            } else {
+                state.notifications.forEach(notification => {
+                    const notificationEl = document.createElement('div');
+                    notificationEl.className = 'p-4';
+                    notificationEl.innerHTML = `
+                        <div class="flex items-start space-x-3">
+                            <div class="bg-blue-100 p-2 rounded-full mt-1">
+                                <i class="fas fa-plane text-blue-600"></i>
+                            </div>
+                            <div class="flex-1">
+                                <div class="font-medium">${notification.callsign}</div>
+                                <div class="text-sm text-gray-600">Altitude: ${Math.round(notification.altitude)} ft</div>
+                                <div class="text-xs text-gray-500 mt-1">${new Date(notification.time).toLocaleString()}</div>
+                            </div>
+                        </div>
+                    `;
+                    elements.notificationList.appendChild(notificationEl);
+                });
+            }
+            elements.notificationModal.classList.remove('hidden');
+        }
+        function hideNotifications() {
+            elements.notificationModal.classList.add('hidden');
+        }
+        // Refresh data
+        function refreshData() {
+            elements.refreshBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
+            getPlaneData();
+            setTimeout(() => {
+                elements.refreshBtn.innerHTML = '<i class="fas fa-sync-alt"></i>';
+            }, 1000);
+        }
+        // Helper functions
+        function getDistance(lat1, lon1, lat2, lon2) {
+            // Haversine formula to calculate distance in km
+            const R = 6371; // Earth radius in km
+            const dLat = (lat2 - lat1) * Math.PI / 180;
+            const dLon = (lon2 - lon1) * Math.PI / 180;
+            const a =
+                Math.sin(dLat/2) * Math.sin(dLat/2) +
+                Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
+                Math.sin(dLon/2) * Math.sin(dLon/2);
+            const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
+            return R * c;
+        }
+        function getBearing(lat1, lon1, lat2, lon2) {
+            // Calculate bearing (direction) between two points
+            const y = Math.sin(lon2 - lon1) * Math.cos(lat2);
+            const x = Math.cos(lat1) * Math.sin(lat2) -
+                      Math.sin(lat1) * Math.cos(lat2) * Math.cos(lon2 - lon1);
+            return (Math.atan2(y, x) * 180 / Math.PI + 360) % 360;
+        }
+        function getAirlineFromCallsign(callsign) {
+            if (!callsign) return null;
+            // Extract airline code from callsign (first 3 letters usually)
+            const airlineCode = callsign.substring(0, 3).toUpperCase();
+            // Mock airline database
+            const airlines = {
+                'UAL': 'United Airlines',
+                'AAL': 'American Airlines',
+                'DAL': 'Delta Air Lines',
+                'SWA': 'Southwest Airlines',
+                'JBU': 'JetBlue',
+                'FDX': 'FedEx',
+                'UPS': 'UPS Airlines',
+                'AFR': 'Air France',
+                'BAW': 'British Airways',
+                'DLH': 'Lufthansa',
+                'KLM': 'KLM Royal Dutch Airlines',
+                'QFA': 'Qantas',
+                'SIA': 'Singapore Airlines',
+                'THY': 'Turkish Airlines',
+                'UAE': 'Emirates',
+                'VIR': 'Virgin Atlantic'
+            };
+            return airlines[airlineCode] || null;
+        }
+        // Generate mock plane data for demonstration
+        function generateMockPlanes(userLat, userLon) {
+            const now = Date.now() / 1000;
+            const mockPlanes = [];
+            // Generate 8-15 mock planes
+            const planeCount = 8 + Math.floor(Math.random() * 7);
+            for (let i = 0; i < planeCount; i++) {
+                // Generate random position within 50km radius
+                const distance = 0.5 + Math.random() * 50; // 0.5-50 km
+                const bearing = Math.random() * 360;
+                // Calculate position
+                const R = 6371; // Earth radius in km
+                const lat1 = userLat * Math.PI / 180;
+                const lon1 = userLon * Math.PI / 180;
+                const d = distance / R;
+                const lat2 = Math.asin(Math.sin(lat1) * Math.cos(d) +
+                                      Math.cos(lat1) * Math.sin(d) * Math.cos(bearing));
+                const lon2 = lon1 + Math.atan2(Math.sin(bearing) * Math.sin(d) * Math.cos(lat1),
+                                              Math.cos(d) - Math.sin(lat1) * Math.sin(lat2));
+                const planeLat = lat2 * 180 / Math.PI;
+                const planeLon = lon2 * 180 / Math.PI;
+                // Generate plane data
+                const callsigns = ['UAL123', 'AAL456', 'DAL789', 'SWA101', 'JBU202', 'FDX303', 'UPS404', 'AFR505', 'BAW606', 'DLH707'];
+                const callsign = callsigns[Math.floor(Math.random() * callsigns.length)];
+                mockPlanes.push([
+                    Math.random().toString(36).substring(2, 10).toUpperCase(), // icao24
+                    callsign, // callsign
+                    null, // origin country
+                    now - Math.random() * 3600, // time position
+                    now - Math.random() * 60, // last contact
+                    planeLon, // longitude
+                    planeLat, // latitude
+                    1000 + Math.random() * 35000, // altitude (ft)
+                    false, // on ground
+                    200 + Math.random() * 500, // velocity (knots)
+                    Math.random() * 360, // heading
+                    -20 + Math.random() * 40, // vertical rate
+                    null, null, null, null, null, null
+                ]);
+            }
+            return { states: mockPlanes };
+        }
+        // Load notifications from localStorage
+        function loadNotifications() {
+            const savedNotifications = localStorage.getItem('skywatch-notifications');
+            if (savedNotifications) {
+                state.notifications = JSON.parse(savedNotifications);
+                updateNotificationBadge();
+            }
+        }
+        // Initialize app
+        function init() {
+            loadNotifications();
+            getLocation();
+            // Check for PWA installation
+            if (window.matchMedia('(display-mode: standalone)').matches) {
+                elements.installPrompt.classList.add('hidden');
+            }
+            // Auto-refresh every 30 seconds
+            setInterval(refreshData, 30000);
+        }
+        // Start the app
+        init();
+    </script>
+    <!-- Service Worker (would be in a separate file in production) -->
+    <script>
+        // This would normally be in a separate sw.js file
+        const CACHE_NAME = 'skywatch-v1';
+        const ASSETS = [
+            '/',
+            '/index.html',
+            '/icon-192x192.png',
+            '/icon-512x512.png',
+            '/manifest.json'
+        ];
+        self.addEventListener('install', event => {
+            event.waitUntil(
+                caches.open(CACHE_NAME)
+                    .then(cache => cache.addAll(ASSETS))
+                    .then(() => self.skipWaiting())
+            );
+        });
+        self.addEventListener('activate', event => {
+            event.waitUntil(
+                caches.keys().then(keys =>
+                    Promise.all(
+                        keys.filter(key => key !== CACHE_NAME)
+                            .map(key => caches.delete(key))
+                    )
+                ).then(() => self.clients.claim())
+            );
+        });
+        self.addEventListener('fetch', event => {
+            event.respondWith(
+                caches.match(event.request)
+                    .then(response => response || fetch(event.request))
+            );
+        });
+    </script>
+    <!-- Manifest (would be in a separate file in production) -->
+    <script>
+        // This would normally be in a separate manifest.json file
+        const manifest = {
+            "name": "SkyWatch",
+            "short_name": "SkyWatch",
+            "description": "Track planes flying above your location in real-time",
+            "start_url": "/",
+            "display": "standalone",
+            "background_color": "#1e40af",
+            "theme_color": "#1e40af",
+            "icons": [
+                {
+                    "src": "/icon-192x192.png",
+                    "sizes": "192x192",
+                    "type": "image/png"
+                },
+                {
+                    "src": "/icon-512x512.png",
+                    "sizes": "512x512",
+                    "type": "image/png"
+                }
+            ]
+        };
+        const blob = new Blob([JSON.stringify(manifest)], { type: 'application/json' });
+        const manifestUrl = URL.createObjectURL(blob);
+        const link = document.createElement('link');
+        link.rel = 'manifest';
+        link.href = manifestUrl;
+        document.head.appendChild(link);
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=vs4vijay/skywatch" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
+</html>