HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
256x256
6.12 KB
Share this result

Previews are deleted daily. Get a permanent share link sent to your inbox:
Script

Open in browser
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Location Tracker</title>
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            color: #333;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .header {
            text-align: center;
            color: white;
            margin-bottom: 30px;
        }

        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .controls {
            background: white;
            padding: 20px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            margin-bottom: 20px;
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
        }

        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }

        .btn-primary {
            background: #4CAF50;
            color: white;
        }

        .btn-danger {
            background: #f44336;
            color: white;
        }

        .btn-secondary {
            background: #2196F3;
            color: white;
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0,0,0,0.2);
        }

        .status {
            padding: 12px 20px;
            border-radius: 25px;
            font-weight: 600;
            min-width: 150px;
            text-align: center;
        }

        .status-tracking {
            background: #d4edda;
            color: #155724;
            border: 2px solid #c3e6cb;
        }

        .status-stopped {
            background: #f8d7da;
            color: #721c24;
            border: 2px solid #f5c6cb;
        }

        .map-container {
            height: 500px;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 15px 35px rgba(0,0,0,0.2);
            margin-bottom: 20px;
            position: relative;
        }

        #map {
            height: 100%;
            width: 100%;
        }

        .location-info {
            background: white;
            padding: 20px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
        }

        .info-card {
            text-align: center;
            padding: 20px;
            border-radius: 10px;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        }

        .info-card h3 {
            color: #666;
            margin-bottom: 10px;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .info-card .value {
            font-size: 24px;
            font-weight: bold;
            color: #333;
        }

        .history {
            background: white;
            padding: 20px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            margin-top: 20px;
        }

        .history h3 {
            margin-bottom: 15px;
            color: #333;
        }

        .history-list {
            max-height: 200px;
            overflow-y: auto;
        }

        .history-item {
            padding: 10px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .history-item:last-child {
            border-bottom: none;
        }

        @media (max-width: 768px) {
            .controls {
                flex-direction: column;
            }
            
            .header h1 {
                font-size: 2em;
            }
            
            .map-container {
                height: 400px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>📍 Location Tracker</h1>
            <p>Real-time GPS tracking and location history</p>
        </div>

        <div class="controls">
            <button id="startBtn" class="btn btn-primary">Start Tracking</button>
            <button id="stopBtn" class="btn btn-danger" style="display: none;">Stop Tracking</button>
            <button id="clearHistoryBtn" class="btn btn-secondary">Clear History</button>
            <div id="status" class="status status-stopped">Stopped</div>
        </div>

        <div class="map-container">
            <div id="map"></div>
        </div>

        <div class="location-info">
            <div class="info-card">
                <h3>Latitude</h3>
                <div id="lat" class="value">0.0000°</div>
            </div>
            <div class="info-card">
                <h3>Longitude</h3>
                <div id="lng" class="value">0.0000°</div>
            </div>
            <div class="info-card">
                <h3>Accuracy</h3>
                <div id="accuracy" class="value">-- m</div>
            </div>
            <div class="info-card">
                <h3>Last Update</h3>
                <div id="lastUpdate" class="value">--</div>
            </div>
        </div>

        <div class="history">
            <h3>📋 Location History</h3>
            <div id="historyList" class="history-list"></div>
        </div>
    </div>

    <script>
        // Initialize map
        const map = L.map('map').setView([0, 0], 13);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© OpenStreetMap contributors'
        }).addTo(map);

        // Tracking variables
        let watchId = null;
        let currentMarker = null;
        let locationHistory = JSON.parse(localStorage.getItem('locationHistory')) || [];
        let isTracking = false;

        // DOM elements
        const startBtn = document.getElementById('startBtn');
        const stopBtn = document.getElementById('stopBtn');
        const clearHistoryBtn = document.getElementById('clearHistoryBtn');
        const status = document.getElementById('status');
        const latEl = document.getElementById('lat');
        const lngEl = document.getElementById('lng');
        const accuracyEl = document.getElementById('accuracy');
        const lastUpdateEl = document.getElementById('lastUpdate');
        const historyList = document.getElementById('historyList');

        // Initialize
        updateHistoryDisplay();
        updateMap();

        // Start tracking
        startBtn.addEventListener('click', () => {
            if (!navigator.geolocation) {
                alert('Geolocation is not supported by this browser.');
                return;
            }

            watchId = navigator.geolocation.watchPosition(
                onLocationUpdate,
                onLocationError,
                {
                    enableHighAccuracy: true,
                    timeout: 10000,
                    maximumAge: 5000
                }
            );

            isTracking = true;
            startBtn.style.display = 'none';
            stopBtn.style.display = 'inline-block';
            status.textContent = 'Tracking...';
            status.className = 'status status-tracking';
        });

        // Stop tracking
        stopBtn.addEventListener('click', () => {
            if (watchId !== null) {
                navigator.geolocation.clearWatch(watchId);
                watchId = null;
            }

            isTracking = false;
            startBtn.style.display = 'inline-block';
            stopBtn.style.display = 'none';
            status.textContent = 'Stopped';
            status.className = 'status status-stopped';
        });

        // Clear history
        clearHistoryBtn.addEventListener('click', () => {
            if (confirm('Are you sure you want to clear all location history?')) {
                locationHistory = [];
                localStorage.removeItem('locationHistory');
                updateHistoryDisplay();
            }
        });

        // Location update handler
        function onLocationUpdate(position) {
            const { latitude, longitude, accuracy } = position.coords;
            const timestamp = new Date().toLocaleString();

            // Update current location
            latEl.textContent = latitude.toFixed(4) + '°';
            lngEl.textContent = longitude.toFixed(4) + '°';
            accuracyEl.textContent = accuracy.toFixed(0) + ' m';
            lastUpdateEl.textContent = timestamp;

            // Update map
            updateMap(latitude, longitude);

            // Save to history
            const locationData = {
                id: Date.now(),
                latitude,
                longitude,
                accuracy,
                timestamp
            };

            locationHistory.unshift(locationData);
            if (locationHistory.length > 100) {
                locationHistory = locationHistory.slice(0, 100);
            }
            localStorage.setItem('locationHistory', JSON.stringify(locationHistory));
            updateHistoryDisplay();
        }

        // Location error handler
        function onLocationError(error) {
            let message = 'Location error: ';
            switch(error.code) {
                case error.PERMISSION_DENIED:
                    message += "User denied the request for Geolocation.";
                    break;
                case error.POSITION_UNAVAILABLE:
                    message += "Location information is unavailable.";
                    break;
                case error.TIMEOUT:
                    message += "The request to get user location timed out.";
                    break;
            }
            alert(message);
        }

        // Update map marker
        function updateMap(lat = 0, lng = 0) {
            if (currentMarker) {
                map.removeLayer(currentMarker);
            }

            currentMarker = L.marker([lat, lng])
                .addTo(map)
                .bindPopup(`Current Location<br>Lat: ${lat.toFixed(4)}<br>Lng: ${lng.toFixed(4)}`)
                .openPopup();

            map.setView([lat, lng], 15);
        }

        // Update history display
        function updateHistoryDisplay() {
            historyList.innerHTML = locationHistory.length 
                ? locationHistory.map(item => `
                    <div class="history-item">
                        <div>
                            <strong>${item.latitude.toFixed(4)}, ${item.longitude.toFixed(4)}</strong><br>
                            <small>${item.timestamp}</small>
                        </div>
                        <div>${item.accuracy.toFixed(0)}m</div>
                    </div>
                `).join('')
                : '<div style="text-align: center; color: #666; padding: 20px;">No location history yet. Start tracking!</div>';
        }
    </script>
</body>
</html>
Landing Page

Network Timeline

Performance Summary

Requests
Domains
67KB
Transfer Size
174KB
Content Size
423.0ms
Dom Content Loaded
612.0ms
First Paint
670.0ms
Load Time
Domain Breakdown

Transfer Size (bytes)
Content Size (bytes)
Header Size (bytes)
Requests
Timings (ms)
Total Time
Content Breakdown

Transfer Size (bytes)
Content Size (bytes)
Header Size (bytes)
Requests