Hugging Face's logo

Spaces:
Roshish121
/
undefined
Running

App Files Community
Roshish121 commited on
Commit
94a2397
·
verified ·
1 Parent(s): 0619450

Help me to build a app that shows time in real time in corner or anywhere in app like the mac timer with great bold timer with maybe a note or anything

Browse files
Files changed (2) hide show
  1. README.md +8 -4
  2. index.html +617 -19
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Undefined
3
- emoji: 📊
4
- colorFrom: purple
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,617 @@
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>PromptTime Tracker Pro ⏱️</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
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #6e8efb, #a777e3);
12
+ }
13
+ .sidebar {
14
+ transition: all 0.3s ease;
15
+ }
16
+ .code-block {
17
+ font-family: 'Courier New', monospace;
18
+ background-color: #2d3748;
19
+ color: #f7fafc;
20
+ border-radius: 0.5rem;
21
+ overflow-x: auto;
22
+ }
23
+ .prompt-card:hover {
24
+ transform: translateY(-5px);
25
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
26
+ }
27
+ .tab-active {
28
+ border-bottom: 3px solid #667eea;
29
+ color: #667eea;
30
+ font-weight: 600;
31
+ }
32
+ .animate-pulse {
33
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
34
+ }
35
+ @keyframes pulse {
36
+ 0%, 100% {
37
+ opacity: 1;
38
+ }
39
+ 50% {
40
+ opacity: 0.5;
41
+ }
42
+ }
43
+ </style>
44
+ </head>
45
+ <body class="bg-gray-100 font-sans">
46
+ <!-- Floating Time Widget -->
47
+ <div class="fixed bottom-4 right-4 z-50">
48
+ <div class="bg-black bg-opacity-80 rounded-xl shadow-xl p-4 text-white">
49
+ <div class="text-3xl font-bold tracking-tighter" id="live-clock">00:00:00</div>
50
+ <div class="text-xs opacity-70 mt-1" id="live-date">Loading...</div>
51
+ <div class="mt-2">
52
+ <input type="text" id="time-note" class="bg-gray-700 bg-opacity-50 text-white text-sm rounded px-2 py-1 w-full"
53
+ placeholder="Add note...">
54
+ </div>
55
+ </div>
56
+ </div>
57
+
58
+ <div class="flex h-screen overflow-hidden">
59
+ <!-- Sidebar -->
60
+ <div class="sidebar bg-white w-64 border-r border-gray-200 flex flex-col">
61
+ <div class="p-4 border-b border-gray-200">
62
+ <div class="flex items-center space-x-2">
63
+ <div class="gradient-bg w-10 h-10 rounded-lg flex items-center justify-center text-white">
64
+ <i class="fas fa-robot text-xl"></i>
65
+ </div>
66
+ <h1 class="text-xl font-bold text-gray-800">UPES v4.0</h1>
67
+ </div>
68
+ </div>
69
+ <div class="flex-1 overflow-y-auto">
70
+ <nav class="p-4">
71
+ <div class="mb-6">
72
+ <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Main</h3>
73
+ <ul>
74
+ <li class="mb-1">
75
+ <a href="#" class="flex items-center px-3 py-2 rounded-lg bg-blue-50 text-blue-600">
76
+ <i class="fas fa-home mr-3"></i>
77
+ Dashboard
78
+ </a>
79
+ </li>
80
+ <li class="mb-1">
81
+ <a href="#" class="flex items-center px-3 py-2 rounded-lg text-gray-700 hover:bg-gray-100">
82
+ <i class="fas fa-magic mr-3"></i>
83
+ Prompt Generator
84
+ </a>
85
+ </li>
86
+ <li class="mb-1">
87
+ <a href="#" class="flex items-center px-3 py-2 rounded-lg text-gray-700 hover:bg-gray-100">
88
+ <i class="fas fa-book mr-3"></i>
89
+ Templates
90
+ </a>
91
+ </li>
92
+ <li class="mb-1">
93
+ <a href="#" class="flex items-center px-3 py-2 rounded-lg text-gray-700 hover:bg-gray-100">
94
+ <i class="fas fa-brain mr-3"></i>
95
+ Knowledge Base
96
+ </a>
97
+ </li>
98
+ </ul>
99
+ </div>
100
+ <div class="mb-6">
101
+ <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">History</h3>
102
+ <ul>
103
+ <li class="mb-1">
104
+ <a href="#" class="flex items-center px-3 py-2 rounded-lg text-gray-700 hover:bg-gray-100">
105
+ <i class="fas fa-history mr-3"></i>
106
+ Recent Prompts
107
+ </a>
108
+ </li>
109
+ <li class="mb-1">
110
+ <a href="#" class="flex items-center px-3 py-2 rounded-lg text-gray-700 hover:bg-gray-100">
111
+ <i class="fas fa-star mr-3"></i>
112
+ Favorites
113
+ </a>
114
+ </li>
115
+ </ul>
116
+ </div>
117
+ <div>
118
+ <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">System</h3>
119
+ <ul>
120
+ <li class="mb-1">
121
+ <a href="#" class="flex items-center px-3 py-2 rounded-lg text-gray-700 hover:bg-gray-100">
122
+ <i class="fas fa-cog mr-3"></i>
123
+ Settings
124
+ </a>
125
+ </li>
126
+ <li class="mb-1">
127
+ <a href="#" class="flex items-center px-3 py-2 rounded-lg text-gray-700 hover:bg-gray-100">
128
+ <i class="fas fa-info-circle mr-3"></i>
129
+ About
130
+ </a>
131
+ </li>
132
+ </ul>
133
+ </div>
134
+ </nav>
135
+ </div>
136
+ <div class="p-4 border-t border-gray-200">
137
+ <div class="flex items-center">
138
+ <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
139
+ <i class="fas fa-user"></i>
140
+ </div>
141
+ <div class="ml-2">
142
+ <p class="text-sm font-medium">John Doe</p>
143
+ <p class="text-xs text-gray-500">Admin</p>
144
+ </div>
145
+ </div>
146
+ </div>
147
+ </div>
148
+
149
+ <!-- Main Content -->
150
+ <div class="flex-1 overflow-y-auto">
151
+ <!-- Header -->
152
+ <header class="bg-white shadow-sm">
153
+ <div class="px-6 py-4 flex items-center justify-between">
154
+ <div class="flex items-center">
155
+ <button class="md:hidden mr-4 text-gray-500">
156
+ <i class="fas fa-bars"></i>
157
+ </button>
158
+ <h2 class="text-xl font-semibold text-gray-800">Prompt Engineering Dashboard</h2>
159
+ </div>
160
+ <div class="flex items-center space-x-4">
161
+ <div class="relative">
162
+ <input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
163
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
164
+ </div>
165
+ <button class="p-2 text-gray-500 hover:text-gray-700">
166
+ <i class="fas fa-bell"></i>
167
+ </button>
168
+ </div>
169
+ </div>
170
+ </header>
171
+
172
+ <!-- Dashboard Content -->
173
+ <main class="p-6">
174
+ <!-- Stats Cards -->
175
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
176
+ <div class="bg-white rounded-xl shadow-sm p-6">
177
+ <div class="flex items-center justify-between">
178
+ <div>
179
+ <p class="text-sm font-medium text-gray-500">Total Prompts</p>
180
+ <h3 class="text-2xl font-bold mt-1">1,248</h3>
181
+ <p class="text-xs text-green-500 mt-1"><i class="fas fa-arrow-up mr-1"></i> 12% from last month</p>
182
+ </div>
183
+ <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
184
+ <i class="fas fa-file-alt text-xl"></i>
185
+ </div>
186
+ </div>
187
+ </div>
188
+ <div class="bg-white rounded-xl shadow-sm p-6">
189
+ <div class="flex items-center justify-between">
190
+ <div>
191
+ <p class="text-sm font-medium text-gray-500">Templates</p>
192
+ <h3 class="text-2xl font-bold mt-1">56</h3>
193
+ <p class="text-xs text-green-500 mt-1"><i class="fas fa-arrow-up mr-1"></i> 5 new this week</p>
194
+ </div>
195
+ <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-600">
196
+ <i class="fas fa-layer-group text-xl"></i>
197
+ </div>
198
+ </div>
199
+ </div>
200
+ <div class="bg-white rounded-xl shadow-sm p-6">
201
+ <div class="flex items-center justify-between">
202
+ <div>
203
+ <p class="text-sm font-medium text-gray-500">Domains</p>
204
+ <h3 class="text-2xl font-bold mt-1">32</h3>
205
+ <p class="text-xs text-yellow-500 mt-1"><i class="fas fa-circle mr-1"></i> 4 need updates</p>
206
+ </div>
207
+ <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-600">
208
+ <i class="fas fa-globe text-xl"></i>
209
+ </div>
210
+ </div>
211
+ </div>
212
+ <div class="bg-white rounded-xl shadow-sm p-6">
213
+ <div class="flex items-center justify-between">
214
+ <div>
215
+ <p class="text-sm font-medium text-gray-500">System Health</p>
216
+ <h3 class="text-2xl font-bold mt-1">Optimal</h3>
217
+ <p class="text-xs text-green-500 mt-1"><i class="fas fa-check-circle mr-1"></i> All systems normal</p>
218
+ </div>
219
+ <div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center text-red-600">
220
+ <i class="fas fa-heartbeat text-xl"></i>
221
+ </div>
222
+ </div>
223
+ </div>
224
+ </div>
225
+
226
+ <!-- Prompt Generator -->
227
+ <div class="bg-white rounded-xl shadow-sm overflow-hidden mb-8">
228
+ <div class="border-b border-gray-200 px-6 py-4">
229
+ <h3 class="text-lg font-semibold text-gray-800">Prompt Generator</h3>
230
+ </div>
231
+ <div class="p-6">
232
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
233
+ <div class="lg:col-span-2">
234
+ <div class="mb-6">
235
+ <label class="block text-sm font-medium text-gray-700 mb-1">Prompt Topic</label>
236
+ <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Enter your topic...">
237
+ </div>
238
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
239
+ <div>
240
+ <label class="block text-sm font-medium text-gray-700 mb-1">Domain</label>
241
+ <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
242
+ <option>General</option>
243
+ <option>Programming</option>
244
+ <option>Writing</option>
245
+ <option>Business</option>
246
+ <option>Science</option>
247
+ <option>Education</option>
248
+ </select>
249
+ </div>
250
+ <div>
251
+ <label class="block text-sm font-medium text-gray-700 mb-1">Complexity</label>
252
+ <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
253
+ <option>Basic</option>
254
+ <option>Intermediate</option>
255
+ <option>Advanced</option>
256
+ <option>Expert</option>
257
+ </select>
258
+ </div>
259
+ </div>
260
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
261
+ <div>
262
+ <label class="block text-sm font-medium text-gray-700 mb-1">Output Format</label>
263
+ <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
264
+ <option>Text</option>
265
+ <option>Markdown</option>
266
+ <option>JSON</option>
267
+ <option>Code</option>
268
+ <option>Structured</option>
269
+ </select>
270
+ </div>
271
+ <div>
272
+ <label class="block text-sm font-medium text-gray-700 mb-1">Structure Type</label>
273
+ <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
274
+ <option>Standard</option>
275
+ <option>Step-by-Step</option>
276
+ <option>Question & Answer</option>
277
+ <option>Compare & Contrast</option>
278
+ <option>Concept Explanation</option>
279
+ </select>
280
+ </div>
281
+ </div>
282
+ <div class="mb-6">
283
+ <label class="block text-sm font-medium text-gray-700 mb-1">Additional Constraints</label>
284
+ <textarea class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" rows="2" placeholder="Any specific requirements..."></textarea>
285
+ </div>
286
+ <div class="flex justify-end">
287
+ <button class="gradient-bg text-white px-6 py-2 rounded-lg hover:opacity-90 transition flex items-center">
288
+ <i class="fas fa-magic mr-2"></i> Generate Prompt
289
+ </button>
290
+ </div>
291
+ </div>
292
+ <div>
293
+ <div class="bg-gray-50 rounded-lg p-4 h-full">
294
+ <h4 class="text-sm font-medium text-gray-700 mb-2">Preview</h4>
295
+ <div class="code-block p-4 h-64 overflow-y-auto">
296
+ <p class="text-gray-300">// Your generated prompt will appear here</p>
297
+ <p class="text-gray-500 mt-2">Example:</p>
298
+ <p class="text-gray-300 mt-1">"Create an advanced technical explanation of neural networks for machine learning engineers. Format your response as markdown with code examples. Include:</p>
299
+ <p class="text-gray-300 ml-4">- Theoretical foundations</p>
300
+ <p class="text-gray-300 ml-4">- Common architectures</p>
301
+ <p class="text-gray-300 ml-4">- Implementation challenges</p>
302
+ <p class="text-gray-300 ml-4">- Practical applications"</p>
303
+ </div>
304
+ <div class="mt-4 flex justify-between">
305
+ <button class="text-gray-500 hover:text-gray-700">
306
+ <i class="fas fa-copy mr-1"></i> Copy
307
+ </button>
308
+ <button class="text-blue-500 hover:text-blue-700">
309
+ <i class="fas fa-star mr-1"></i> Save
310
+ </button>
311
+ <button class="text-green-500 hover:text-green-700">
312
+ <i class="fas fa-share mr-1"></i> Export
313
+ </button>
314
+ </div>
315
+ </div>
316
+ </div>
317
+ </div>
318
+ </div>
319
+ </div>
320
+
321
+ <!-- Recent Activity -->
322
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
323
+ <div class="lg:col-span-2">
324
+ <div class="bg-white rounded-xl shadow-sm overflow-hidden">
325
+ <div class="border-b border-gray-200 px-6 py-4 flex justify-between items-center">
326
+ <h3 class="text-lg font-semibold text-gray-800">Recent Activity</h3>
327
+ <button class="text-sm text-blue-500 hover:text-blue-700">View All</button>
328
+ </div>
329
+ <div class="divide-y divide-gray-200">
330
+ <div class="p-4 hover:bg-gray-50 transition cursor-pointer">
331
+ <div class="flex items-start">
332
+ <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 mr-3">
333
+ <i class="fas fa-magic"></i>
334
+ </div>
335
+ <div>
336
+ <p class="text-sm font-medium">Generated new prompt</p>
337
+ <p class="text-xs text-gray-500 mt-1">"Explain quantum computing to a 5-year-old"</p>
338
+ <p class="text-xs text-gray-400 mt-1">2 minutes ago</p>
339
+ </div>
340
+ </div>
341
+ </div>
342
+ <div class="p-4 hover:bg-gray-50 transition cursor-pointer">
343
+ <div class="flex items-start">
344
+ <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-3">
345
+ <i class="fas fa-save"></i>
346
+ </div>
347
+ <div>
348
+ <p class="text-sm font-medium">Saved to favorites</p>
349
+ <p class="text-xs text-gray-500 mt-1">"Python API design patterns"</p>
350
+ <p class="text-xs text-gray-400 mt-1">1 hour ago</p>
351
+ </div>
352
+ </div>
353
+ </div>
354
+ <div class="p-4 hover:bg-gray-50 transition cursor-pointer">
355
+ <div class="flex items-start">
356
+ <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-600 mr-3">
357
+ <i class="fas fa-plus"></i>
358
+ </div>
359
+ <div>
360
+ <p class="text-sm font-medium">Added new template</p>
361
+ <p class="text-xs text-gray-500 mt-1">"Multi-step technical tutorial"</p>
362
+ <p class="text-xs text-gray-400 mt-1">3 hours ago</p>
363
+ </div>
364
+ </div>
365
+ </div>
366
+ <div class="p-4 hover:bg-gray-50 transition cursor-pointer">
367
+ <div class="flex items-start">
368
+ <div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600 mr-3">
369
+ <i class="fas fa-edit"></i>
370
+ </div>
371
+ <div>
372
+ <p class="text-sm font-medium">Updated domain</p>
373
+ <p class="text-xs text-gray-500 mt-1">"Machine Learning concepts"</p>
374
+ <p class="text-xs text-gray-400 mt-1">Yesterday</p>
375
+ </div>
376
+ </div>
377
+ </div>
378
+ </div>
379
+ </div>
380
+ </div>
381
+ <div>
382
+ <div class="bg-white rounded-xl shadow-sm overflow-hidden h-full">
383
+ <div class="border-b border-gray-200 px-6 py-4">
384
+ <h3 class="text-lg font-semibold text-gray-800">System Status</h3>
385
+ </div>
386
+ <div class="p-6">
387
+ <div class="mb-6">
388
+ <div class="flex justify-between mb-2">
389
+ <span class="text-sm font-medium text-gray-700">CPU Usage</span>
390
+ <span class="text-sm font-medium text-gray-700">42%</span>
391
+ </div>
392
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
393
+ <div class="bg-blue-600 h-2.5 rounded-full" style="width: 42%"></div>
394
+ </div>
395
+ </div>
396
+ <div class="mb-6">
397
+ <div class="flex justify-between mb-2">
398
+ <span class="text-sm font-medium text-gray-700">Memory</span>
399
+ <span class="text-sm font-medium text-gray-700">65%</span>
400
+ </div>
401
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
402
+ <div class="bg-purple-600 h-2.5 rounded-full" style="width: 65%"></div>
403
+ </div>
404
+ </div>
405
+ <div class="mb-6">
406
+ <div class="flex justify-between mb-2">
407
+ <span class="text-sm font-medium text-gray-700">Storage</span>
408
+ <span class="text-sm font-medium text-gray-700">28%</span>
409
+ </div>
410
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
411
+ <div class="bg-green-600 h-2.5 rounded-full" style="width: 28%"></div>
412
+ </div>
413
+ </div>
414
+ <div class="p-4 bg-blue-50 rounded-lg">
415
+ <div class="flex items-start">
416
+ <div class="flex-shrink-0">
417
+ <i class="fas fa-info-circle text-blue-500"></i>
418
+ </div>
419
+ <div class="ml-3">
420
+ <p class="text-sm text-blue-700">
421
+ System operating normally. Last backup completed 2 hours ago.
422
+ </p>
423
+ </div>
424
+ </div>
425
+ </div>
426
+ </div>
427
+ </div>
428
+ </div>
429
+ </div>
430
+
431
+ <!-- Prompt Templates -->
432
+ <div class="mt-8">
433
+ <div class="flex justify-between items-center mb-4">
434
+ <h3 class="text-lg font-semibold text-gray-800">Prompt Templates</h3>
435
+ <div class="flex space-x-2">
436
+ <button class="px-3 py-1 text-sm border border-gray-300 rounded-lg hover:bg-gray-50">All</button>
437
+ <button class="px-3 py-1 text-sm border border-gray-300 rounded-lg hover:bg-gray-50">Standard</button>
438
+ <button class="px-3 py-1 text-sm border border-gray-300 rounded-lg hover:bg-gray-50">Step-by-Step</button>
439
+ <button class="px-3 py-1 text-sm border border-gray-300 rounded-lg bg-blue-50 text-blue-600 border-blue-200">Q&A</button>
440
+ <button class="px-3 py-1 text-sm border border-gray-300 rounded-lg hover:bg-gray-50">Compare</button>
441
+ </div>
442
+ </div>
443
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
444
+ <!-- Template Card 1 -->
445
+ <div class="prompt-card bg-white rounded-xl shadow-sm overflow-hidden transition duration-300">
446
+ <div class="p-5">
447
+ <div class="flex justify-between items-start">
448
+ <div>
449
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
450
+ Basic
451
+ </span>
452
+ <h4 class="mt-2 text-lg font-medium text-gray-900">Simple Explanation</h4>
453
+ </div>
454
+ <button class="text-gray-400 hover:text-gray-500">
455
+ <i class="fas fa-ellipsis-v"></i>
456
+ </button>
457
+ </div>
458
+ <p class="mt-2 text-sm text-gray-500">
459
+ Explain the concept of {topic} in simple terms suitable for {audience}.
460
+ </p>
461
+ <div class="mt-4 flex justify-between items-center">
462
+ <span class="text-xs text-gray-500">Last used: 2 days ago</span>
463
+ <button class="text-sm text-blue-500 hover:text-blue-700">
464
+ Use Template
465
+ </button>
466
+ </div>
467
+ </div>
468
+ </div>
469
+
470
+ <!-- Template Card 2 -->
471
+ <div class="prompt-card bg-white rounded-xl shadow-sm overflow-hidden transition duration-300">
472
+ <div class="p-5">
473
+ <div class="flex justify-between items-start">
474
+ <div>
475
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
476
+ Intermediate
477
+ </span>
478
+ <h4 class="mt-2 text-lg font-medium text-gray-900">Detailed Q&A</h4>
479
+ </div>
480
+ <button class="text-gray-400 hover:text-gray-500">
481
+ <i class="fas fa-ellipsis-v"></i>
482
+ </button>
483
+ </div>
484
+ <p class="mt-2 text-sm text-gray-500">
485
+ Provide a detailed answer to {question} about {topic}, including relevant examples.
486
+ </p>
487
+ <div class="mt-4 flex justify-between items-center">
488
+ <span class="text-xs text-gray-500">Last used: Today</span>
489
+ <button class="text-sm text-blue-500 hover:text-blue-700">
490
+ Use Template
491
+ </button>
492
+ </div>
493
+ </div>
494
+ </div>
495
+
496
+ <!-- Template Card 3 -->
497
+ <div class="prompt-card bg-white rounded-xl shadow-sm overflow-hidden transition duration-300">
498
+ <div class="p-5">
499
+ <div class="flex justify-between items-start">
500
+ <div>
501
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
502
+ Advanced
503
+ </span>
504
+ <h4 class="mt-2 text-lg font-medium text-gray-900">Expert Analysis</h4>
505
+ </div>
506
+ <button class="text-gray-400 hover:text-gray-500">
507
+ <i class="fas fa-ellipsis-v"></i>
508
+ </button>
509
+ </div>
510
+ <p class="mt-2 text-sm text-gray-500">
511
+ Analyze and answer this complex question about {topic}, considering different perspectives.
512
+ </p>
513
+ <div class="mt-4 flex justify-between items-center">
514
+ <span class="text-xs text-gray-500">Last used: 1 week ago</span>
515
+ <button class="text-sm text-blue-500 hover:text-blue-700">
516
+ Use Template
517
+ </button>
518
+ </div>
519
+ </div>
520
+ </div>
521
+ </div>
522
+ </div>
523
+ </main>
524
+ </div>
525
+ </div>
526
+ <script>
527
+ // Live Time Updater
528
+ function updateClock() {
529
+ const now = new Date();
530
+ const timeStr = now.toLocaleTimeString('en-US', {
531
+ hour12: false,
532
+ hour: '2-digit',
533
+ minute: '2-digit',
534
+ second: '2-digit'
535
+ });
536
+ const dateStr = now.toLocaleDateString('en-US', {
537
+ weekday: 'short',
538
+ month: 'short',
539
+ day: 'numeric'
540
+ });
541
+
542
+ document.getElementById('live-clock').textContent = timeStr;
543
+ document.getElementById('live-date').textContent = dateStr;
544
+ }
545
+
546
+ // Initialize clock and update every second
547
+ updateClock();
548
+ setInterval(updateClock, 1000);
549
+
550
+ // Save notes to localStorage
551
+ const noteInput = document.getElementById('time-note');
552
+ noteInput.addEventListener('change', () => {
553
+ localStorage.setItem('timeNote', noteInput.value);
554
+ });
555
+
556
+ // Load saved note
557
+ const savedNote = localStorage.getItem('timeNote');
558
+ if (savedNote) {
559
+ noteInput.value = savedNote;
560
+ }
561
+
562
+ // Mobile sidebar toggle
563
+ document.addEventListener('DOMContentLoaded', function() {
564
+ const sidebar = document.querySelector('.sidebar');
565
+ const mobileMenuButton = document.querySelector('header button');
566
+
567
+ mobileMenuButton.addEventListener('click', function() {
568
+ sidebar.classList.toggle('hidden');
569
+ sidebar.classList.toggle('block');
570
+ sidebar.classList.toggle('absolute');
571
+ sidebar.classList.toggle('z-50');
572
+ });
573
+
574
+ // Tab switching functionality
575
+ const tabs = document.querySelectorAll('.tab');
576
+ tabs.forEach(tab => {
577
+ tab.addEventListener('click', function() {
578
+ tabs.forEach(t => t.classList.remove('tab-active'));
579
+ this.classList.add('tab-active');
580
+ });
581
+ });
582
+
583
+ // Simulate loading for demo purposes
584
+ setTimeout(() => {
585
+ const preview = document.querySelector('.code-block');
586
+ preview.innerHTML = `
587
+ <p class="text-gray-300">"Create a detailed Q&A response about neural networks for computer science students. Format your answer with:</p>
588
+ <p class="text-gray-300 ml-4">- Clear definitions of key terms</p>
589
+ <p class="text-gray-300 ml-4">- Examples of common architectures</p>
590
+ <p class="text-gray-300 ml-4">- Code snippets where applicable</p>
591
+ <p class="text-gray-300 ml-4">- References to important research papers"</p>
592
+ <p class="text-gray-500 mt-4">// This prompt was generated using the "Detailed Q&A" template</p>
593
+ `;
594
+ }, 1500);
595
+ });
596
+ </script>
597
+ <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=Roshish121/phase-1-god" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p>
598
+
599
+ <style>
600
+ #live-clock {
601
+ font-family: 'Menlo', 'Monaco', monospace;
602
+ background: linear-gradient(135deg, #6e8efb, #a777e3);
603
+ -webkit-background-clip: text;
604
+ background-clip: text;
605
+ -webkit-text-fill-color: transparent;
606
+ text-shadow: 0 0 8px rgba(110, 142, 251, 0.3);
607
+ }
608
+ #time-note {
609
+ transition: all 0.2s ease;
610
+ }
611
+ #time-note:focus {
612
+ outline: none;
613
+ background-color: rgba(255, 255, 255, 0.1) !important;
614
+ }
615
+ </style>
616
+ </body>
617
+ </html>