<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alex Tracker - 1 Year</title>
    <style>
        /* Fade-in/out transitions on the body only */
        body {
            opacity: 0;
            transition: opacity 1s ease;
            margin: 0;
            height: 100vh;
            background-color: black;
            font-family: Verdana, sans-serif;
            display: flex;
            flex-direction: row;
        }
        body.loaded {
            opacity: 1;
        }

        /* Style for the iframe on the left */
        .containerleft {
            width: 60%;
            padding: 20px;
            box-sizing: border-box;
            background-color: rgba(255, 255, 255, 0);
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Style for the container div on the right */
        .container {
            width: 40%;
            padding: 20px;
            box-sizing: border-box;
            background-color: rgba(255, 255, 255, 0.1);
            color: white;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .data { font-size: 2vw; }
        .data2 { font-size: 1.5vw; }
        .data3 { font-size: 1vw; }
        .imagedate { font-size: 0.5vw; }

        iframe {
            width: 95%;
            height: 90%;
        }

        /* Slider styling */
        .refresh-control {
            margin: 10px 0;
        }
        .refresh-control label {
            margin-right: 8px;
        }

        a { color: white; }
        a:visited { color: white; }
        span { margin-top: 20px; color: white; }
    </style>
</head>
<body>
    <div class="containerleft">
        <iframe src="https://amberfx.org/owntrack/map/custom.html?from=2024-08-10T13:18:20.000Z&to=2025-08-10T13:18:20.000Z&user=alex&device=alexphone" scrolling="no" frameborder="0" loading="lazy"></iframe>
    </div>
    <div class="container">
        <h2>Alex Tracker 3.0</h2>
	<span class="Label">Distance in 1 Year : </span><span class="data"><b>46824.66 km</b> - (29095.49 mi)<br><br></span>
	<span class="Label">Nearest Location : </span><span class="data"><b>Manchester, UK</b><br></span>
	<span class="Label">Local Weather : <b>Clouds - 22°C</b><br><br></span>
	<span class="Label">Last Activity : <b>08/10/2025 06:13:12</b> (BST)<br><br></span>

        <!-- Refresh Rate Slider -->
        <div class="refresh-control">
            <label for="refreshRate">Auto-refresh every <span id="rateDisplay"></span>s:</label>
            <input type="range" id="refreshRate" min="5" max="300">
        </div>

	<span class="PolarSteps"><a href="https://amberfx.org/alex/alex.html">24 Hour Tracker</a> - <a href="https://amberfx.org/alex/alex7d.html">7 Day Tracker</a> -- <a href="https://www.polarsteps.com/amberfx">Trip Tracker (PolarSteps)</a></span>
	<!-- <span class="image"><a href="https://photos.app.goo.gl/rY3Zz8Vmj5SgcyU9A"><img src="https://amberfx.org/metrolink/alexphoto/IMG_20250506_214346.jpg" width="100%"></img></a></span> -->
	<span class="image"><a href="https://amberfx.org/metrolink/alexphoto/IMG_20250506_214346.jpg"><img src="https://amberfx.org/metrolink/alexphoto/IMG_20250506_214346_t.jpg" width="100%"></img></a></span>
	<span class="imagedate">Photo Taken : 06/05/2025 - Location : <a href="https://www.google.com/maps/@43.08225,-89.3735805555555,19z">Paterson, Madison, WI 53703, USA</a></span>
	</div>

    <script>
        (function() {
            const slider      = document.getElementById('refreshRate');
            const display     = document.getElementById('rateDisplay');
            const body        = document.body;
            let intervalId;
            const storageKey  = 'alexRefreshRate';

            // Get saved rate or default
            const savedRate = parseInt(localStorage.getItem(storageKey), 10);
            const defaultRate = 30;
            const rate = !isNaN(savedRate) ? savedRate : defaultRate;

            // Initialize slider and display
            slider.value = rate;
            display.textContent = rate;

            // Save and reset on input
            slider.addEventListener('input', () => {
                const val = slider.value;
                display.textContent = val;
                localStorage.setItem(storageKey, val);
                resetTimer();
            });

            function smoothReload() {
                body.style.opacity = 0;
                setTimeout(() => location.reload(), 1000);
            }

            function resetTimer() {
                clearInterval(intervalId);
                intervalId = setInterval(smoothReload, slider.value * 1000);
            }

            window.addEventListener('load', () => {
                requestAnimationFrame(() => body.classList.add('loaded'));
                resetTimer();
            });
        })();
    </script>
</body>
</html>