Hugging Face's logo

Spaces:
Domnoval
/
undefined
Running

App Files Community
Domnoval commited on
Commit
a9451dd
·
verified ·
1 Parent(s): d1db41b

Continue

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