Hugging Face's logo

Spaces:
Shahid72
/
my
Running

App Files Community
Shahid72 commited on
Commit
35bcc2b
·
verified ·
1 Parent(s): 8e3a9f8

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +429 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: My
3
- emoji: 🏢
4
- colorFrom: yellow
5
- colorTo: green
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: my
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,429 @@
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>My Device App</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ /* Custom scrollbar */
11
+ ::-webkit-scrollbar {
12
+ width: 6px;
13
+ }
14
+ ::-webkit-scrollbar-track {
15
+ background: #f1f1f1;
16
+ }
17
+ ::-webkit-scrollbar-thumb {
18
+ background: #888;
19
+ border-radius: 3px;
20
+ }
21
+ ::-webkit-scrollbar-thumb:hover {
22
+ background: #555;
23
+ }
24
+
25
+ /* Animation for battery */
26
+ @keyframes pulse {
27
+ 0% { opacity: 1; }
28
+ 50% { opacity: 0.5; }
29
+ 100% { opacity: 1; }
30
+ }
31
+
32
+ .charging {
33
+ animation: pulse 1.5s infinite;
34
+ }
35
+
36
+ /* Custom switch */
37
+ .switch {
38
+ position: relative;
39
+ display: inline-block;
40
+ width: 52px;
41
+ height: 26px;
42
+ }
43
+
44
+ .switch input {
45
+ opacity: 0;
46
+ width: 0;
47
+ height: 0;
48
+ }
49
+
50
+ .slider {
51
+ position: absolute;
52
+ cursor: pointer;
53
+ top: 0;
54
+ left: 0;
55
+ right: 0;
56
+ bottom: 0;
57
+ background-color: #ccc;
58
+ transition: .4s;
59
+ border-radius: 34px;
60
+ }
61
+
62
+ .slider:before {
63
+ position: absolute;
64
+ content: "";
65
+ height: 20px;
66
+ width: 20px;
67
+ left: 3px;
68
+ bottom: 3px;
69
+ background-color: white;
70
+ transition: .4s;
71
+ border-radius: 50%;
72
+ }
73
+
74
+ input:checked + .slider {
75
+ background-color: #3b82f6;
76
+ }
77
+
78
+ input:checked + .slider:before {
79
+ transform: translateX(26px);
80
+ }
81
+ </style>
82
+ </head>
83
+ <body class="bg-gray-100 font-sans">
84
+ <div class="max-w-md mx-auto bg-white min-h-screen shadow-lg overflow-hidden flex flex-col">
85
+ <!-- App Header -->
86
+ <header class="bg-blue-600 text-white p-4 shadow-md">
87
+ <div class="flex items-center justify-between">
88
+ <button id="backBtn" class="text-white opacity-0">
89
+ <i class="fas fa-arrow-left"></i>
90
+ </button>
91
+ <h1 class="text-xl font-bold">My Device</h1>
92
+ <button id="settingsBtn" class="text-white">
93
+ <i class="fas fa-cog"></i>
94
+ </button>
95
+ </div>
96
+ </header>
97
+
98
+ <!-- Main Content -->
99
+ <main class="flex-1 overflow-y-auto">
100
+ <!-- Device Overview (Default View) -->
101
+ <div id="overviewView" class="p-4">
102
+ <div class="bg-white rounded-xl shadow-md p-6 mb-4">
103
+ <div class="flex items-center justify-between mb-6">
104
+ <div>
105
+ <h2 class="text-xl font-semibold">Device Information</h2>
106
+ <p class="text-gray-500 text-sm">Your device details</p>
107
+ </div>
108
+ <div class="bg-blue-100 p-2 rounded-full">
109
+ <i class="fas fa-mobile-alt text-blue-600 text-xl"></i>
110
+ </div>
111
+ </div>
112
+
113
+ <div class="space-y-4">
114
+ <div class="flex justify-between items-center border-b pb-3">
115
+ <div class="flex items-center">
116
+ <i class="fas fa-microchip text-gray-500 mr-3"></i>
117
+ <span>Model</span>
118
+ </div>
119
+ <span id="deviceModel" class="font-medium">Loading...</span>
120
+ </div>
121
+
122
+ <div class="flex justify-between items-center border-b pb-3">
123
+ <div class="flex items-center">
124
+ <i class="fas fa-code-branch text-gray-500 mr-3"></i>
125
+ <span>OS Version</span>
126
+ </div>
127
+ <span id="osVersion" class="font-medium">Loading...</span>
128
+ </div>
129
+
130
+ <div class="flex justify-between items-center border-b pb-3">
131
+ <div class="flex items-center">
132
+ <i class="fas fa-wifi text-gray-500 mr-3"></i>
133
+ <span>Network</span>
134
+ </div>
135
+ <span id="networkType" class="font-medium">Loading...</span>
136
+ </div>
137
+
138
+ <div class="flex justify-between items-center border-b pb-3">
139
+ <div class="flex items-center">
140
+ <i class="fas fa-memory text-gray-500 mr-3"></i>
141
+ <span>Memory</span>
142
+ </div>
143
+ <span id="deviceMemory" class="font-medium">Loading...</span>
144
+ </div>
145
+
146
+ <div class="flex justify-between items-center">
147
+ <div class="flex items-center">
148
+ <i class="fas fa-battery-three-quarters text-gray-500 mr-3"></i>
149
+ <span>Battery</span>
150
+ </div>
151
+ <div class="flex items-center">
152
+ <span id="batteryLevel" class="font-medium mr-2">Loading...</span>
153
+ <div id="batteryIcon" class="relative w-6 h-4 border border-gray-400 rounded-sm">
154
+ <div id="batteryFill" class="absolute top-0 left-0 h-full bg-green-500" style="width: 50%;"></div>
155
+ <div class="absolute top-1/2 -right-1 w-1 h-2 bg-gray-400 transform -translate-y-1/2"></div>
156
+ </div>
157
+ </div>
158
+ </div>
159
+ </div>
160
+ </div>
161
+
162
+ <div class="bg-white rounded-xl shadow-md p-6 mb-4">
163
+ <h2 class="text-lg font-semibold mb-4">Quick Actions</h2>
164
+ <div class="grid grid-cols-2 gap-4">
165
+ <button class="bg-blue-100 text-blue-600 p-4 rounded-lg flex flex-col items-center">
166
+ <i class="fas fa-wifi text-xl mb-2"></i>
167
+ <span>Wi-Fi</span>
168
+ </button>
169
+ <button class="bg-purple-100 text-purple-600 p-4 rounded-lg flex flex-col items-center">
170
+ <i class="fas fa-bluetooth-b text-xl mb-2"></i>
171
+ <span>Bluetooth</span>
172
+ </button>
173
+ <button class="bg-green-100 text-green-600 p-4 rounded-lg flex flex-col items-center">
174
+ <i class="fas fa-sun text-xl mb-2"></i>
175
+ <span>Display</span>
176
+ </button>
177
+ <button class="bg-yellow-100 text-yellow-600 p-4 rounded-lg flex flex-col items-center">
178
+ <i class="fas fa-volume-up text-xl mb-2"></i>
179
+ <span>Sound</span>
180
+ </button>
181
+ </div>
182
+ </div>
183
+
184
+ <div class="bg-white rounded-xl shadow-md p-6">
185
+ <h2 class="text-lg font-semibold mb-4">Storage</h2>
186
+ <div class="w-full bg-gray-200 rounded-full h-2.5 mb-2">
187
+ <div class="bg-blue-600 h-2.5 rounded-full" style="width: 45%"></div>
188
+ </div>
189
+ <div class="flex justify-between text-sm text-gray-600">
190
+ <span>45% used</span>
191
+ <span>32 GB of 64 GB</span>
192
+ </div>
193
+ </div>
194
+ </div>
195
+
196
+ <!-- Settings View (Hidden by default) -->
197
+ <div id="settingsView" class="p-4 hidden">
198
+ <div class="bg-white rounded-xl shadow-md p-6 mb-4">
199
+ <h2 class="text-lg font-semibold mb-4">Device Settings</h2>
200
+
201
+ <div class="space-y-4">
202
+ <div class="flex justify-between items-center border-b pb-3">
203
+ <div class="flex items-center">
204
+ <i class="fas fa-moon text-gray-500 mr-3"></i>
205
+ <span>Dark Mode</span>
206
+ </div>
207
+ <label class="switch">
208
+ <input type="checkbox" id="darkModeToggle">
209
+ <span class="slider"></span>
210
+ </label>
211
+ </div>
212
+
213
+ <div class="flex justify-between items-center border-b pb-3">
214
+ <div class="flex items-center">
215
+ <i class="fas fa-bell text-gray-500 mr-3"></i>
216
+ <span>Notifications</span>
217
+ </div>
218
+ <label class="switch">
219
+ <input type="checkbox" id="notificationsToggle" checked>
220
+ <span class="slider"></span>
221
+ </label>
222
+ </div>
223
+
224
+ <div class="flex justify-between items-center border-b pb-3">
225
+ <div class="flex items-center">
226
+ <i class="fas fa-lock text-gray-500 mr-3"></i>
227
+ <span>Security</span>
228
+ </div>
229
+ <i class="fas fa-chevron-right text-gray-400"></i>
230
+ </div>
231
+
232
+ <div class="flex justify-between items-center border-b pb-3">
233
+ <div class="flex items-center">
234
+ <i class="fas fa-language text-gray-500 mr-3"></i>
235
+ <span>Language</span>
236
+ </div>
237
+ <div class="flex items-center">
238
+ <span class="mr-2">English</span>
239
+ <i class="fas fa-chevron-right text-gray-400"></i>
240
+ </div>
241
+ </div>
242
+
243
+ <div class="flex justify-between items-center">
244
+ <div class="flex items-center">
245
+ <i class="fas fa-info-circle text-gray-500 mr-3"></i>
246
+ <span>About Device</span>
247
+ </div>
248
+ <i class="fas fa-chevron-right text-gray-400"></i>
249
+ </div>
250
+ </div>
251
+ </div>
252
+
253
+ <div class="bg-white rounded-xl shadow-md p-6 mb-4">
254
+ <h2 class="text-lg font-semibold mb-4">System</h2>
255
+
256
+ <div class="space-y-4">
257
+ <div class="flex justify-between items-center border-b pb-3">
258
+ <div class="flex items-center">
259
+ <i class="fas fa-sync-alt text-gray-500 mr-3"></i>
260
+ <span>System Update</span>
261
+ </div>
262
+ <div class="flex items-center">
263
+ <span class="text-green-500 text-sm mr-2">Up to date</span>
264
+ <i class="fas fa-chevron-right text-gray-400"></i>
265
+ </div>
266
+ </div>
267
+
268
+ <div class="flex justify-between items-center border-b pb-3">
269
+ <div class="flex items-center">
270
+ <i class="fas fa-trash-alt text-gray-500 mr-3"></i>
271
+ <span>Storage Cleanup</span>
272
+ </div>
273
+ <i class="fas fa-chevron-right text-gray-400"></i>
274
+ </div>
275
+
276
+ <div class="flex justify-between items-center">
277
+ <div class="flex items-center">
278
+ <i class="fas fa-power-off text-gray-500 mr-3"></i>
279
+ <span>Restart Device</span>
280
+ </div>
281
+ <i class="fas fa-chevron-right text-gray-400"></i>
282
+ </div>
283
+ </div>
284
+ </div>
285
+
286
+ <button id="resetSettingsBtn" class="w-full bg-red-50 text-red-600 py-3 rounded-lg font-medium">
287
+ Reset All Settings
288
+ </button>
289
+ </div>
290
+ </main>
291
+
292
+ <!-- Bottom Navigation -->
293
+ <nav class="bg-white border-t flex justify-around p-2">
294
+ <button class="p-3 text-blue-600">
295
+ <i class="fas fa-home text-xl"></i>
296
+ </button>
297
+ <button class="p-3 text-gray-500">
298
+ <i class="fas fa-chart-bar text-xl"></i>
299
+ </button>
300
+ <button class="p-3 text-gray-500">
301
+ <i class="fas fa-tools text-xl"></i>
302
+ </button>
303
+ <button class="p-3 text-gray-500">
304
+ <i class="fas fa-user text-xl"></i>
305
+ </button>
306
+ </nav>
307
+ </div>
308
+
309
+ <script>
310
+ document.addEventListener('DOMContentLoaded', function() {
311
+ // Get DOM elements
312
+ const overviewView = document.getElementById('overviewView');
313
+ const settingsView = document.getElementById('settingsView');
314
+ const settingsBtn = document.getElementById('settingsBtn');
315
+ const backBtn = document.getElementById('backBtn');
316
+ const darkModeToggle = document.getElementById('darkModeToggle');
317
+ const resetSettingsBtn = document.getElementById('resetSettingsBtn');
318
+
319
+ // Device information elements
320
+ const deviceModel = document.getElementById('deviceModel');
321
+ const osVersion = document.getElementById('osVersion');
322
+ const networkType = document.getElementById('networkType');
323
+ const deviceMemory = document.getElementById('deviceMemory');
324
+ const batteryLevel = document.getElementById('batteryLevel');
325
+ const batteryFill = document.getElementById('batteryFill');
326
+ const batteryIcon = document.getElementById('batteryIcon');
327
+
328
+ // Simulate device information
329
+ function loadDeviceInfo() {
330
+ // These would normally come from device APIs
331
+ deviceModel.textContent = navigator.userAgent.match(/\((.*?)\)/)[1] || "Unknown Device";
332
+ osVersion.textContent = navigator.platform || "Unknown OS";
333
+
334
+ // Simulate network type
335
+ const networks = ["Wi-Fi", "4G LTE", "5G", "3G"];
336
+ networkType.textContent = networks[Math.floor(Math.random() * networks.length)];
337
+
338
+ // Simulate memory
339
+ deviceMemory.textContent = "4 GB RAM";
340
+
341
+ // Simulate battery
342
+ updateBattery();
343
+ }
344
+
345
+ // Simulate battery level and charging status
346
+ function updateBattery() {
347
+ const level = Math.floor(Math.random() * 100);
348
+ batteryLevel.textContent = `${level}%`;
349
+ batteryFill.style.width = `${level}%`;
350
+
351
+ // Change battery color based on level
352
+ if (level > 70) {
353
+ batteryFill.className = "absolute top-0 left-0 h-full bg-green-500";
354
+ } else if (level > 30) {
355
+ batteryFill.className = "absolute top-0 left-0 h-full bg-yellow-500";
356
+ } else {
357
+ batteryFill.className = "absolute top-0 left-0 h-full bg-red-500";
358
+ }
359
+
360
+ // Randomly show charging status
361
+ if (Math.random() > 0.7) {
362
+ batteryIcon.classList.add("charging");
363
+ batteryLevel.textContent += " (Charging)";
364
+ } else {
365
+ batteryIcon.classList.remove("charging");
366
+ }
367
+
368
+ // Update every 10 seconds
369
+ setTimeout(updateBattery, 10000);
370
+ }
371
+
372
+ // Toggle between views
373
+ settingsBtn.addEventListener('click', function() {
374
+ overviewView.classList.add('hidden');
375
+ settingsView.classList.remove('hidden');
376
+ backBtn.classList.remove('opacity-0');
377
+ document.querySelector('header h1').textContent = "Settings";
378
+ });
379
+
380
+ backBtn.addEventListener('click', function() {
381
+ settingsView.classList.add('hidden');
382
+ overviewView.classList.remove('hidden');
383
+ backBtn.classList.add('opacity-0');
384
+ document.querySelector('header h1').textContent = "My Device";
385
+ });
386
+
387
+ // Dark mode toggle
388
+ darkModeToggle.addEventListener('change', function() {
389
+ if (this.checked) {
390
+ document.documentElement.classList.add('dark');
391
+ document.body.classList.add('bg-gray-900');
392
+ document.body.classList.remove('bg-gray-100');
393
+ } else {
394
+ document.documentElement.classList.remove('dark');
395
+ document.body.classList.remove('bg-gray-900');
396
+ document.body.classList.add('bg-gray-100');
397
+ }
398
+ });
399
+
400
+ // Reset settings button
401
+ resetSettingsBtn.addEventListener('click', function() {
402
+ if (confirm("Are you sure you want to reset all settings to default?")) {
403
+ darkModeToggle.checked = false;
404
+ document.getElementById('notificationsToggle').checked = true;
405
+ alert("All settings have been reset to default values.");
406
+ }
407
+ });
408
+
409
+ // Initialize
410
+ loadDeviceInfo();
411
+
412
+ // Add click effect to all buttons
413
+ document.querySelectorAll('button').forEach(button => {
414
+ button.addEventListener('mousedown', function() {
415
+ this.classList.add('scale-95', 'opacity-80');
416
+ });
417
+
418
+ button.addEventListener('mouseup', function() {
419
+ this.classList.remove('scale-95', 'opacity-80');
420
+ });
421
+
422
+ button.addEventListener('mouseleave', function() {
423
+ this.classList.remove('scale-95', 'opacity-80');
424
+ });
425
+ });
426
+ });
427
+ </script>
428
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Shahid72/my" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
429
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Can i have this my device as a real app