File size: 7,419 Bytes
a9451dd | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PhoneFinder GPS</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
<style>
#vanta-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.input-phone {
letter-spacing: 1px;
}
</style>
</head>
<body class="min-h-screen bg-gray-900 text-white">
<div id="vanta-bg"></div>
<div class="container mx-auto px-4 py-16 max-w-md">
<div class="bg-gray-800 bg-opacity-80 backdrop-blur-lg rounded-xl p-8 shadow-2xl">
<div class="text-center mb-8">
<i data-feather="map-pin" class="w-12 h-12 mx-auto text-blue-400 mb-4"></i>
<h1 class="text-3xl font-bold mb-2">PhoneFinder GPS</h1>
<p class="text-gray-300">Enter a phone number to locate the device</p>
</div>
<form id="trackForm" class="space-y-6">
<div>
<label for="phone" class="block text-sm font-medium text-gray-300 mb-2">Phone Number</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<i data-feather="phone" class="text-gray-400"></i>
</div>
<input type="tel" id="phone"
class="input-phone bg-gray-700 border border-gray-600 text-white text-lg rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-4"
placeholder="+1 234 567 8900"
pattern="[+]{1}[0-9]{1,3}[ ]{1}[0-9]{3}[ ]{1}[0-9]{3}[ ]{1}[0-9]{4}"
required>
</div>
</div>
<button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-800 text-white font-medium rounded-lg text-lg px-5 py-4 transition duration-300 flex items-center justify-center">
<i data-feather="search" class="mr-2"></i>
Locate Device
</button>
</form>
<div id="result" class="hidden mt-8 p-6 bg-gray-700 rounded-lg">
<div class="flex items-center mb-4">
<i data-feather="map" class="text-blue-400 mr-2"></i>
<h3 class="text-xl font-semibold">Location Found</h3>
</div>
<div id="map" class="h-48 bg-gray-600 rounded mb-4 flex items-center justify-center">
<iframe id="mapFrame" class="w-full h-full rounded" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
<div id="locationInfo" class="text-sm">
<div class="flex items-center mb-2">
<i data-feather="navigation" class="mr-2 text-blue-400"></i>
<span id="coordinates" class="font-mono">Loading coordinates...</span>
</div>
<div class="flex items-center mb-2">
<i data-feather="map-pin" class="mr-2 text-blue-400"></i>
<span id="address">Loading address...</span>
</div>
<div class="flex items-center">
<i data-feather="clock" class="mr-2 text-blue-400"></i>
<span id="lastUpdated">Last updated: <span id="timestamp" class="font-mono">just now</span></span>
</div>
</div>
<script>
document.getElementById('trackForm').addEventListener('submit', function(e) {
e.preventDefault();
const phone = document.getElementById('phone').value;
// Show loading state
const resultDiv = document.getElementById('result');
resultDiv.classList.remove('hidden');
document.getElementById('coordinates').textContent = 'Locating...';
document.getElementById('address').textContent = 'Please wait...';
// For demo purposes - in a real app you would use a proper geolocation API
setTimeout(() => {
// Get approximate location (this is just a demo)
navigator.geolocation.getCurrentPosition(position => {
const lat = position.coords.latitude;
const lng = position.coords.longitude;
// Display coordinates
document.getElementById('coordinates').textContent = `Lat: ${lat.toFixed(6)}, Lng: ${lng.toFixed(6)}`;
// Show map
const mapFrame = document.getElementById('mapFrame');
mapFrame.src = `https://maps.google.com/maps?q=${lat},${lng}&z=15&output=embed`;
// Reverse geocode to get address (using Nominatim API)
fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lng}`)
.then(response => response.json())
.then(data => {
const address = data.display_name || 'Address not available';
document.getElementById('address').textContent = address;
const now = new Date();
document.getElementById('timestamp').textContent = now.toLocaleString();
});
}, () => {
// Fallback to random location if permission denied
const fallbackLat = 37.7749 + (Math.random() * 0.02 - 0.01);
const fallbackLng = -122.4194 + (Math.random() * 0.02 - 0.01);
document.getElementById('coordinates').textContent = `Lat: ${fallbackLat.toFixed(6)}, Lng: ${fallbackLng.toFixed(6)}`;
const mapFrame = document.getElementById('mapFrame');
mapFrame.src = `https://maps.google.com/maps?q=${fallbackLat},${fallbackLng}&z=15&output=embed`;
document.getElementById('address').textContent = 'San Francisco, CA (demo location)';
const now = new Date();
document.getElementById('timestamp').textContent = now.toLocaleString();
});
}, 1500);
});
// Initialize Vanta.js background
VANTA.GLOBE({
el: "#vanta-bg",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0x3a83f1,
backgroundColor: 0x111827
});
// Initialize Feather Icons
feather.replace();
</script>
</body>
</html> |