<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Geolocation IP Tracker Demo - RSK World</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .main-container {
            padding: 2rem 0;
        }
        .card {
            border: none;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            backdrop-filter: blur(10px);
            background: rgba(255,255,255,0.95);
        }
        .header-section {
            text-align: center;
            margin-bottom: 3rem;
            color: white;
        }
        .header-section h1 {
            font-size: 3rem;
            font-weight: bold;
            margin-bottom: 1rem;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }
        .feature-icon {
            font-size: 3rem;
            color: #667eea;
            margin-bottom: 1rem;
        }
        .result-card {
            display: none;
            margin-top: 2rem;
        }
        .location-info {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
            border-radius: 10px;
            padding: 1.5rem;
            margin-top: 1rem;
        }
        .info-item {
            display: flex;
            justify-content: space-between;
            padding: 0.5rem 0;
            border-bottom: 1px solid rgba(255,255,255,0.2);
        }
        .info-item:last-child {
            border-bottom: none;
        }
        .loading {
            display: none;
            text-align: center;
            padding: 2rem;
        }
        .spinner-border {
            width: 3rem;
            height: 3rem;
        }
        .footer {
            text-align: center;
            color: white;
            margin-top: 3rem;
            padding: 2rem 0;
        }
        .api-endpoint {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 1rem;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
        }
        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            border-radius: 25px;
            padding: 0.75rem 2rem;
            font-weight: 600;
            transition: transform 0.2s;
        }
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        }
        .form-control {
            border-radius: 10px;
            border: 2px solid #e9ecef;
            padding: 0.75rem 1rem;
        }
        .form-control:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
        }
    </style>
</head>
<body>
    <!--
    Geolocation IP Tracker Demo
    Author: RSK World
    Founder: Molla Samser
    Designer & Tester: Rima Khatun
    Website: https://rskworld.in
    Contact: help@rskworld.in, +91 93305 39277
    Year: 2026
    -->
    
    <div class="container main-container">
        <div class="header-section">
            <i class="fas fa-map-marker-alt feature-icon"></i>
            <h1>Geolocation IP Tracker</h1>
            <p class="lead">Advanced IP geolocation tracking and detailed location information retrieval</p>
            <p class="mb-0">Developed by <strong>RSK World</strong> | © 2026</p>
        </div>

        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="card">
                    <div class="card-body p-4">
                        <h2 class="card-title text-center mb-4">
                            <i class="fas fa-search-location me-2"></i>
                            Track IP Location
                        </h2>
                        
                        <form id="geolocationForm">
                            <div class="mb-3">
                                <label for="ipInput" class="form-label">Enter IP Address (Optional)</label>
                                <input type="text" class="form-control" id="ipInput" placeholder="Leave empty to use your current IP">
                                <div class="form-text">Enter a valid IPv4 address or leave empty to detect your current IP</div>
                            </div>
                            
                            <div class="text-center">
                                <button type="submit" class="btn btn-primary btn-lg">
                                    <i class="fas fa-location-arrow me-2"></i>
                                    Get Location
                                </button>
                            </div>
                        </form>

                        <div class="loading" id="loading">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                            <p class="mt-3">Fetching location data...</p>
                        </div>

                        <div class="result-card" id="resultCard">
                            <h3 class="text-center mb-3">
                                <i class="fas fa-globe me-2"></i>
                                Location Information
                            </h3>
                            
                            <div class="location-info" id="locationInfo">
                                <!-- Results will be populated here -->
                            </div>
                        </div>

                        <div class="mt-4">
                            <h4>API Endpoints</h4>
                            <div class="api-endpoint">
                                <strong>Get IP Location:</strong><br>
                                GET <code>/index.php?ip=YOUR_IP_ADDRESS</code><br>
                                <small>Leave ip parameter empty to detect current IP</small>
                            </div>
                            <div class="api-endpoint mt-2">
                                <strong>Bulk Lookup:</strong><br>
                                POST <code>/index.php/bulk</code><br>
                                <small>Body: {"ips": ["1.1.1.1", "8.8.8.8"]}</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-4">
            <div class="col-md-4">
                <div class="card text-center h-100">
                    <div class="card-body">
                        <i class="fas fa-globe-americas feature-icon"></i>
                        <h5 class="card-title">Global Coverage</h5>
                        <p class="card-text">Track IP addresses from anywhere in the world with accurate location data.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card text-center h-100">
                    <div class="card-body">
                        <i class="fas fa-tachometer-alt feature-icon"></i>
                        <h5 class="card-title">Fast Response</h5>
                        <p class="card-text">Get instant results with optimized caching and efficient API calls.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card text-center h-100">
                    <div class="card-body">
                        <i class="fas fa-shield-alt feature-icon"></i>
                        <h5 class="card-title">Secure & Reliable</h5>
                        <p class="card-text">Built with security best practices and error handling for reliable operation.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer class="footer">
        <div class="container">
            <p class="mb-2">
                <strong>RSK World</strong> - Your Programming Resource Hub
            </p>
            <p class="mb-1">
                Founded by Molla Samser | Designed & Tested by Rima Khatun
            </p>
            <p class="mb-2">
                <i class="fas fa-envelope me-2"></i>help@rskworld.in
                <i class="fas fa-phone ms-3 me-2"></i>+91 93305 39277
            </p>
            <p class="mb-0">
                Nutanhat, Mongolkote, Purba Burdwan, West Bengal, India - 713147
            </p>
            <p class="mb-0 mt-2">
                <a href="https://rskworld.in" target="_blank" class="text-white text-decoration-none">
                    <i class="fas fa-globe me-1"></i>https://rskworld.in
                </a>
            </p>
            <hr class="my-3 bg-white">
            <p class="mb-0">© 2026 RSK World. All rights reserved. | Content for educational purposes only.</p>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.getElementById('geolocationForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const ipInput = document.getElementById('ipInput').value.trim();
            const loading = document.getElementById('loading');
            const resultCard = document.getElementById('resultCard');
            const locationInfo = document.getElementById('locationInfo');
            
            // Show loading
            loading.style.display = 'block';
            resultCard.style.display = 'none';
            
            try {
                const url = ipInput ? `index.php?ip=${encodeURIComponent(ipInput)}` : 'index.php';
                const response = await fetch(url);
                const data = await response.json();
                
                if (data.success) {
                    displayLocation(data.data);
                } else {
                    displayError(data.error);
                }
            } catch (error) {
                displayError('Failed to fetch location data. Please try again.');
            } finally {
                loading.style.display = 'none';
            }
        });
        
        function displayLocation(data) {
            const locationInfo = document.getElementById('locationInfo');
            
            locationInfo.innerHTML = `
                <div class="info-item">
                    <span><i class="fas fa-network-wired me-2"></i>IP Address:</span>
                    <span><strong>${data.query}</strong></span>
                </div>
                <div class="info-item">
                    <span><i class="fas fa-flag me-2"></i>Country:</span>
                    <span><strong>${data.country} (${data.countryCode})</strong></span>
                </div>
                <div class="info-item">
                    <span><i class="fas fa-map me-2"></i>Region:</span>
                    <span><strong>${data.regionName} (${data.region})</strong></span>
                </div>
                <div class="info-item">
                    <span><i class="fas fa-city me-2"></i>City:</span>
                    <span><strong>${data.city}</strong></span>
                </div>
                <div class="info-item">
                    <span><i class="fas fa-map-pin me-2"></i>District:</span>
                    <span><strong>${data.district || 'N/A'}</strong></span>
                </div>
                <div class="info-item">
                    <span><i class="fas fa-envelope me-2"></i>ZIP Code:</span>
                    <span><strong>${data.zip || 'N/A'}</strong></span>
                </div>
                <div class="info-item">
                    <span><i class="fas fa-globe me-2"></i>Coordinates:</span>
                    <span><strong>${data.lat}, ${data.lon}</strong></span>
                </div>
                <div class="info-item">
                    <span><i class="fas fa-clock me-2"></i>Timezone:</span>
                    <span><strong>${data.timezone} (UTC${data.offset >= 0 ? '+' : ''}${data.offset/3600})</strong></span>
                </div>
                <div class="info-item">
                    <span><i class="fas fa-wifi me-2"></i>ISP:</span>
                    <span><strong>${data.isp}</strong></span>
                </div>
                <div class="info-item">
                    <span><i class="fas fa-building me-2"></i>Organization:</span>
                    <span><strong>${data.org || 'N/A'}</strong></span>
                </div>
                <div class="info-item">
                    <span><i class="fas fa-server me-2"></i>AS:</span>
                    <span><strong>${data.as}</strong></span>
                </div>
                <div class="info-item">
                    <span><i class="fas fa-mobile-alt me-2"></i>Mobile:</span>
                    <span><strong>${data.mobile ? 'Yes' : 'No'}</strong></span>
                </div>
                <div class="info-item">
                    <span><i class="fas fa-user-secret me-2"></i>Proxy:</span>
                    <span><strong>${data.proxy ? 'Yes' : 'No'}</strong></span>
                </div>
                <div class="info-item">
                    <span><i class="fas fa-database me-2"></i>Hosting:</span>
                    <span><strong>${data.hosting ? 'Yes' : 'No'}</strong></span>
                </div>
            `;
            
            document.getElementById('resultCard').style.display = 'block';
        }
        
        function displayError(error) {
            const locationInfo = document.getElementById('locationInfo');
            
            locationInfo.innerHTML = `
                <div class="alert alert-danger" role="alert">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    <strong>Error:</strong> ${error}
                </div>
            `;
            
            document.getElementById('resultCard').style.display = 'block';
        }
    </script>
</body>
</html>
