Spaces:

femydatagent
/

gps-tracker-for-salesman

Running

App Files Files Community

femydatagent commited on Jul 24, 2025

Commit

faead47

verified ·

1 Parent(s): aa4f8dd

undefined - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +582 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Gps Tracker For Salesman
-emoji: 🐠
-colorFrom: indigo
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: gps-tracker-for-salesman
+emoji: 🐳
+colorFrom: gray
+colorTo: yellow
 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,582 @@
-<!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>GPS Tracker App</title>
+    <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">
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
+    <style>
+        #map { height: 300px; }
+        .device-card.active {
+            border-color: #3b82f6;
+            background-color: #eff6ff;
+        }
+        .battery-low {
+            color: #ef4444;
+        }
+        .battery-medium {
+            color: #f59e0b;
+        }
+        .battery-high {
+            color: #10b981;
+        }
+        .connection-dot {
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            display: inline-block;
+        }
+        .connected {
+            background-color: #10b981;
+        }
+        .disconnected {
+            background-color: #ef4444;
+        }
+        .connecting {
+            background-color: #f59e0b;
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% { opacity: 1; }
+            50% { opacity: 0.5; }
+            100% { opacity: 1; }
+        }
+    </style>
+</head>
+<body class="bg-gray-100 font-sans">
+    <div class="max-w-md mx-auto bg-white min-h-screen shadow-lg overflow-hidden">
+        <!-- Header -->
+        <header class="bg-blue-600 text-white p-4 shadow-md">
+            <div class="flex justify-between items-center">
+                <h1 class="text-xl font-bold">GPS Tracker</h1>
+                <div class="flex space-x-4">
+                    <button id="refreshBtn" class="text-white">
+                        <i class="fas fa-sync-alt"></i>
+                    </button>
+                    <button id="settingsBtn" class="text-white">
+                        <i class="fas fa-cog"></i>
+                    </button>
+                </div>
+            </div>
+        </header>
+        <!-- Main Content -->
+        <main class="p-4">
+            <!-- Connection Status -->
+            <div class="bg-white rounded-lg shadow p-4 mb-4">
+                <div class="flex justify-between items-center">
+                    <h2 class="font-semibold text-lg">Connection Status</h2>
+                    <span id="connectionStatus" class="connection-dot disconnected"></span>
+                </div>
+                <div class="mt-2">
+                    <select id="connectionType" class="w-full p-2 border rounded">
+                        <option value="usb">USB Device</option>
+                        <option value="wifi">WiFi Device</option>
+                        <option value="bluetooth">Bluetooth Device</option>
+                    </select>
+                </div>
+                <button id="connectBtn" class="mt-2 w-full bg-blue-600 text-white py-2 rounded-lg">
+                    Connect Device
+                </button>
+            </div>
+            <!-- Map View -->
+            <div class="bg-white rounded-lg shadow p-4 mb-4">
+                <h2 class="font-semibold text-lg mb-2">Live Location</h2>
+                <div id="map" class="rounded-lg"></div>
+                <div class="mt-2 flex justify-between items-center">
+                    <div>
+                        <span class="text-sm text-gray-600">Last updated: <span id="lastUpdate">Never</span></span>
+                    </div>
+                    <button id="centerMapBtn" class="text-blue-600 text-sm">
+                        <i class="fas fa-crosshairs"></i> Center
+                    </button>
+                </div>
+            </div>
+            <!-- Device Info -->
+            <div id="deviceInfo" class="bg-white rounded-lg shadow p-4 mb-4 hidden">
+                <h2 class="font-semibold text-lg mb-2">Device Information</h2>
+                <div class="grid grid-cols-2 gap-4">
+                    <div>
+                        <p class="text-sm text-gray-500">Device ID</p>
+                        <p id="deviceId" class="font-medium">-</p>
+                    </div>
+                    <div>
+                        <p class="text-sm text-gray-500">Battery Level</p>
+                        <p id="batteryLevel" class="font-medium">-</p>
+                    </div>
+                    <div>
+                        <p class="text-sm text-gray-500">Signal Strength</p>
+                        <p id="signalStrength" class="font-medium">-</p>
+                    </div>
+                    <div>
+                        <p class="text-sm text-gray-500">Connection Type</p>
+                        <p id="connectionTypeDisplay" class="font-medium">-</p>
+                    </div>
+                </div>
+            </div>
+            <!-- Location History -->
+            <div class="bg-white rounded-lg shadow p-4">
+                <div class="flex justify-between items-center mb-2">
+                    <h2 class="font-semibold text-lg">Location History</h2>
+                    <button id="showHistoryBtn" class="text-blue-600 text-sm">
+                        <i class="fas fa-history"></i> View All
+                    </button>
+                </div>
+                <div id="historyList" class="space-y-2">
+                    <p class="text-gray-500 text-center py-4">No history available yet</p>
+                </div>
+            </div>
+        </main>
+        <!-- Bottom Navigation -->
+        <nav class="bg-white border-t border-gray-200 flex justify-around p-3">
+            <button class="text-blue-600 p-2">
+                <i class="fas fa-map-marker-alt text-xl"></i>
+                <span class="block text-xs">Map</span>
+            </button>
+            <button class="text-gray-500 p-2" onclick="showStationaryLocations()">
+                <i class="fas fa-clock text-xl"></i>
+                <span class="block text-xs">Stays</span>
+            </button>
+            <button class="text-gray-500 p-2">
+                <i class="fas fa-chart-line text-xl"></i>
+                <span class="block text-xs">Analytics</span>
+            </button>
+            <button class="text-gray-500 p-2">
+                <i class="fas fa-user text-xl"></i>
+                <span class="block text-xs">Account</span>
+            </button>
+        </nav>
+    </div>
+    <!-- Settings Modal -->
+    <div id="settingsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
+        <div class="bg-white rounded-lg p-6 w-full max-w-md mx-4">
+            <div class="flex justify-between items-center mb-4">
+                <h3 class="text-lg font-semibold">Settings</h3>
+                <button id="closeSettingsBtn" class="text-gray-500">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="space-y-4">
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">Update Interval</label>
+                    <select class="w-full p-2 border rounded">
+                        <option>1 second</option>
+                        <option selected>5 seconds</option>
+                        <option>10 seconds</option>
+                        <option>30 seconds</option>
+                        <option>1 minute</option>
+                    </select>
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">Map Type</label>
+                    <select class="w-full p-2 border rounded">
+                        <option>Standard</option>
+                        <option>Satellite</option>
+                        <option>Terrain</option>
+                    </select>
+                </div>
+                <div class="flex items-center">
+                    <input type="checkbox" id="notifications" class="mr-2" checked>
+                    <label for="notifications" class="text-sm font-medium text-gray-700">Enable Notifications</label>
+                </div>
+                <div class="flex items-center">
+                    <input type="checkbox" id="batteryAlerts" class="mr-2" checked>
+                    <label for="batteryAlerts" class="text-sm font-medium text-gray-700">Battery Alerts</label>
+                </div>
+            </div>
+            <div class="mt-6 pt-4 border-t">
+                <button class="w-full bg-blue-600 text-white py-2 rounded-lg">Save Settings</button>
+            </div>
+        </div>
+    </div>
+    <!-- History Modal -->
+    <div id="historyModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
+        <div class="bg-white rounded-lg p-6 w-full max-w-md mx-4 max-h-[80vh] overflow-y-auto">
+            <div class="flex justify-between items-center mb-4">
+                <h3 class="text-lg font-semibold">Location History</h3>
+                <button id="closeHistoryBtn" class="text-gray-500">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div id="fullHistoryList" class="space-y-2">
+                <!-- History items will be added here -->
+            </div>
+        </div>
+    </div>
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+    <script>
+        // Initialize map
+        let map;
+        let marker;
+        let deviceConnected = false;
+        let connectionInterval;
+        let updateInterval = 300000; // 5 minutes
+        let locationHistory = [];
+        let stationaryLocations = [];
+        let history = [];
+        // Mock device data for demonstration
+        const mockDevices = [
+            { id: 'GPS-001', battery: 85, signal: 'Strong', lastLocation: [51.505, -0.09] },
+            { id: 'GPS-002', battery: 42, signal: 'Medium', lastLocation: [51.51, -0.1] },
+            { id: 'GPS-003', battery: 12, signal: 'Weak', lastLocation: [51.515, -0.095] }
+        ];
+        document.addEventListener('DOMContentLoaded', function() {
+            initMap();
+            setupEventListeners();
+        });
+        function initMap() {
+            // Default to London coordinates
+            map = L.map('map').setView([51.505, -0.09], 13);
+            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+            }).addTo(map);
+            // Add a default marker
+            marker = L.marker([51.505, -0.09]).addTo(map)
+                .bindPopup('Device location will appear here');
+        }
+        function setupEventListeners() {
+            // Connect button
+            document.getElementById('connectBtn').addEventListener('click', toggleConnection);
+            // Center map button
+            document.getElementById('centerMapBtn').addEventListener('click', centerMap);
+            // Settings buttons
+            document.getElementById('settingsBtn').addEventListener('click', () => {
+                document.getElementById('settingsModal').classList.remove('hidden');
+            });
+            document.getElementById('closeSettingsBtn').addEventListener('click', () => {
+                document.getElementById('settingsModal').classList.add('hidden');
+            });
+            // History buttons
+            document.getElementById('showHistoryBtn').addEventListener('click', showHistoryModal);
+            document.getElementById('closeHistoryBtn').addEventListener('click', () => {
+                document.getElementById('historyModal').classList.add('hidden');
+            });
+            // Refresh button
+            document.getElementById('refreshBtn').addEventListener('click', refreshData);
+        }
+        function toggleConnection() {
+            const connectBtn = document.getElementById('connectBtn');
+            const connectionStatus = document.getElementById('connectionStatus');
+            const connectionType = document.getElementById('connectionType').value;
+            if (deviceConnected) {
+                // Disconnect
+                clearInterval(connectionInterval);
+                deviceConnected = false;
+                connectBtn.textContent = 'Connect Device';
+                connectBtn.classList.remove('bg-red-600');
+                connectBtn.classList.add('bg-blue-600');
+                connectionStatus.classList.remove('connected');
+                connectionStatus.classList.add('disconnected');
+                // Hide device info
+                document.getElementById('deviceInfo').classList.add('hidden');
+                // Show notification
+                showNotification('Device disconnected', 'info');
+            } else {
+                // Connect
+                connectBtn.textContent = 'Disconnect';
+                connectBtn.classList.remove('bg-blue-600');
+                connectBtn.classList.add('bg-red-600');
+                connectionStatus.classList.remove('disconnected');
+                connectionStatus.classList.add('connecting');
+                // Simulate connection delay
+                setTimeout(() => {
+                    deviceConnected = true;
+                    connectionStatus.classList.remove('connecting');
+                    connectionStatus.classList.add('connected');
+                    // Show device info
+                    const deviceInfo = document.getElementById('deviceInfo');
+                    deviceInfo.classList.remove('hidden');
+                    // Start updating data
+                    updateDeviceData();
+                    connectionInterval = setInterval(updateDeviceData, updateInterval);
+                    // Show notification
+                    showNotification('Device connected successfully', 'success');
+                }, 2000);
+            }
+        }
+        function updateDeviceData() {
+            if (!deviceConnected) return;
+            // For demo purposes, we'll use mock data
+            const randomDevice = mockDevices[Math.floor(Math.random() * mockDevices.length)];
+            // Check if device stayed in same location for more than 5 minutes
+            if (locationHistory.length > 0) {
+                const lastLocation = locationHistory[locationHistory.length - 1];
+                const distance = getDistanceBetweenPoints(
+                    lastLocation.coords[0], lastLocation.coords[1],
+                    randomDevice.lastLocation[0], randomDevice.lastLocation[1]
+                );
+                // If distance is less than 50 meters (consider same location)
+                if (distance < 50) {
+                    const timeDiff = (new Date() - lastLocation.timestamp) / (1000 * 60);
+                    if (timeDiff >= 5) {
+                        // Check if we already have this stationary location
+                        const existingLocation = stationaryLocations.find(loc =>
+                            getDistanceBetweenPoints(
+                                loc.coords[0], loc.coords[1],
+                                randomDevice.lastLocation[0], randomDevice.lastLocation[1]
+                            ) < 50
+                        );
+                        if (!existingLocation) {
+                            // Get address using Google Maps API
+                            getAddressFromCoords(randomDevice.lastLocation[0], randomDevice.lastLocation[1])
+                                .then(address => {
+                                    stationaryLocations.push({
+                                        coords: randomDevice.lastLocation,
+                                        address: address,
+                                        startTime: lastLocation.timestamp,
+                                        endTime: new Date(),
+                                        deviceId: randomDevice.id
+                                    });
+                                    showNotification(`Device stayed at ${address} for more than 5 minutes`, 'info');
+                                });
+                        }
+                    }
+                }
+            }
+            const now = new Date();
+            // Update device info
+            document.getElementById('deviceId').textContent = randomDevice.id;
+            document.getElementById('connectionTypeDisplay').textContent =
+                document.getElementById('connectionType').value.toUpperCase();
+            document.getElementById('signalStrength').textContent = randomDevice.signal;
+            // Update battery level with appropriate color
+            const batteryElement = document.getElementById('batteryLevel');
+            batteryElement.textContent = `${randomDevice.battery}%`;
+            batteryElement.className = 'font-medium';
+            if (randomDevice.battery < 20) {
+                batteryElement.classList.add('battery-low');
+            } else if (randomDevice.battery < 50) {
+                batteryElement.classList.add('battery-medium');
+            } else {
+                batteryElement.classList.add('battery-high');
+            }
+            // Update map with new location
+            updateMap(randomDevice.lastLocation);
+            // Update last updated time
+            document.getElementById('lastUpdate').textContent = now.toLocaleTimeString();
+            // Add to history
+            const historyItem = {
+                time: now,
+                location: randomDevice.lastLocation,
+                deviceId: randomDevice.id,
+                battery: randomDevice.battery,
+                coords: randomDevice.lastLocation,
+                timestamp: now
+            };
+            locationHistory.push(historyItem);
+            updateHistoryDisplay();
+            // Show low battery notification if needed
+            if (randomDevice.battery < 15) {
+                showNotification(`Low battery (${randomDevice.battery}%) on device ${randomDevice.id}`, 'warning');
+            }
+        }
+        function updateMap(coords) {
+            // Remove old marker if exists
+            if (marker) {
+                map.removeLayer(marker);
+            }
+            // Add new marker
+            marker = L.marker(coords).addTo(map)
+                .bindPopup(`Device location<br>${coords[0].toFixed(4)}, ${coords[1].toFixed(4)}`);
+            // Center map on new location
+            map.setView(coords, 13);
+        }
+        function centerMap() {
+            if (marker) {
+                map.setView(marker.getLatLng(), 13);
+            }
+        }
+        function updateHistoryDisplay() {
+            const historyList = document.getElementById('historyList');
+            const fullHistoryList = document.getElementById('fullHistoryList');
+            // Clear existing items
+            historyList.innerHTML = '';
+            fullHistoryList.innerHTML = '';
+            if (history.length === 0) {
+                historyList.innerHTML = '<p class="text-gray-500 text-center py-4">No history available yet</p>';
+                fullHistoryList.innerHTML = '<p class="text-gray-500 text-center py-4">No history available yet</p>';
+                return;
+            }
+            // Show only last 3 items in main view
+            const recentHistory = history.slice(0, 3);
+            recentHistory.forEach(item => {
+                const historyItem = createHistoryItemElement(item);
+                historyList.appendChild(historyItem);
+            });
+            // Show all items in modal
+            history.forEach(item => {
+                const historyItem = createHistoryItemElement(item);
+                fullHistoryList.appendChild(historyItem);
+            });
+        }
+        function createHistoryItemElement(item) {
+            const element = document.createElement('div');
+            element.className = 'bg-gray-50 p-3 rounded-lg';
+            const time = document.createElement('p');
+            time.className = 'text-sm font-medium';
+            time.textContent = item.time.toLocaleTimeString();
+            const coords = document.createElement('p');
+            coords.className = 'text-xs text-gray-500';
+            coords.textContent = `${item.location[0].toFixed(4)}, ${item.location[1].toFixed(4)}`;
+            const deviceInfo = document.createElement('p');
+            deviceInfo.className = 'text-xs mt-1';
+            deviceInfo.innerHTML = `<span class="font-medium">${item.deviceId}</span> • Battery: <span class="${getBatteryClass(item.battery)}">${item.battery}%</span>`;
+            element.appendChild(time);
+            element.appendChild(coords);
+            element.appendChild(deviceInfo);
+            return element;
+        }
+        function getBatteryClass(level) {
+            if (level < 20) return 'battery-low';
+            if (level < 50) return 'battery-medium';
+            return 'battery-high';
+        }
+        function showHistoryModal() {
+            document.getElementById('historyModal').classList.remove('hidden');
+        }
+        function refreshData() {
+            if (deviceConnected) {
+                updateDeviceData();
+                showNotification('Data refreshed', 'info');
+            } else {
+                showNotification('Connect a device first', 'warning');
+            }
+        }
+        function showNotification(message, type) {
+            // In a real app, this would show a proper notification
+            console.log(`${type.toUpperCase()}: ${message}`);
+        }
+        function getDistanceBetweenPoints(lat1, lon1, lat2, lon2) {
+            // Haversine formula to calculate distance between two points
+            const R = 6371; // Radius of the earth in km
+            const dLat = deg2rad(lat2 - lat1);
+            const dLon = deg2rad(lon2 - lon1);
+            const a =
+                Math.sin(dLat/2) * Math.sin(dLat/2) +
+                Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) *
+                Math.sin(dLon/2) * Math.sin(dLon/2);
+            const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
+            const d = R * c * 1000; // Distance in meters
+            return d;
+        }
+        function deg2rad(deg) {
+            return deg * (Math.PI/180);
+        }
+        function getAddressFromCoords(lat, lng) {
+            return new Promise((resolve) => {
+                const geocoder = new google.maps.Geocoder();
+                const latlng = { lat: lat, lng: lng };
+                geocoder.geocode({ location: latlng }, (results, status) => {
+                    if (status === 'OK' && results[0]) {
+                        resolve(results[0].formatted_address);
+                    } else {
+                        resolve(`${lat.toFixed(4)}, ${lng.toFixed(4)}`);
+                    }
+                });
+            });
+        }
+        // Add a new function to display stationary locations
+        function showStationaryLocations() {
+            const modal = document.createElement('div');
+            modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
+            modal.innerHTML = `
+                <div class="bg-white rounded-lg p-6 w-full max-w-md mx-4 max-h-[80vh] overflow-y-auto">
+                    <div class="flex justify-between items-center mb-4">
+                        <h3 class="text-lg font-semibold">Stationary Locations</h3>
+                        <button onclick="this.parentElement.parentElement.parentElement.remove()" class="text-gray-500">
+                            <i class="fas fa-times"></i>
+                        </button>
+                    </div>
+                    <div class="space-y-3">
+                        ${stationaryLocations.length > 0 ?
+                            stationaryLocations.map(loc => `
+                                <div class="bg-gray-50 p-3 rounded-lg">
+                                    <p class="font-medium">${loc.address}</p>
+                                    <p class="text-sm text-gray-500">${new Date(loc.startTime).toLocaleString()} - ${new Date(loc.endTime).toLocaleString()}</p>
+                                    <p class="text-xs mt-1">Device: ${loc.deviceId}</p>
+                                </div>
+                            `).join('') :
+                            '<p class="text-gray-500 text-center py-4">No stationary locations recorded</p>'
+                        }
+                    </div>
+                </div>
+            `;
+            document.body.appendChild(modal);
+        }
+        // For demo purposes, simulate a connection after 3 seconds
+        setTimeout(() => {
+            if (!deviceConnected) {
+                document.getElementById('connectBtn').click();
+            }
+        }, 3000);
+    </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=femydatagent/gps-tracker-for-salesman" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>