Hugging Face's logo

Spaces:
infoaliahmadi
/
darktheme
Running

App Files Community
infoaliahmadi commited on
Commit
9bd9699
·
verified ·
1 Parent(s): 34cdb82

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +497 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Darktheme
3
- emoji: 📚
4
- colorFrom: gray
5
- colorTo: indigo
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: darktheme
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: gray
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,497 @@
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>Modern Cashier System Theme</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">
9
+ <style>
10
+ .font-heading {
11
+ font-family: 'Space Grotesk', sans-serif;
12
+ }
13
+ .font-body {
14
+ font-family: 'Inter', sans-serif;
15
+ }
16
+ .custom-shadow {
17
+ box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
18
+ }
19
+ .dark .custom-shadow {
20
+ box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
21
+ }
22
+ .product-card:hover {
23
+ transform: translateY(-4px);
24
+ transition: transform 0.2s ease;
25
+ }
26
+
27
+ /* Dark mode transitions */
28
+ body, .bg-white, .bg-gray-50, .border-gray-200, .border-gray-300,
29
+ .text-gray-800, .text-gray-700, .text-gray-600, .text-gray-500,
30
+ .bg-indigo-100, .bg-teal-100, .bg-amber-100 {
31
+ transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
32
+ }
33
+ </style>
34
+ </head>
35
+ <body class="font-body bg-gray-50 text-gray-800 dark:bg-gray-900 dark:text-gray-100">
36
+ <!-- Theme Toggle -->
37
+ <div class="fixed top-4 right-4 z-50">
38
+ <button id="themeToggle" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600 transition">
39
+ <svg id="sunIcon" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
40
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
41
+ </svg>
42
+ <svg id="moonIcon" class="w-5 h-5 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
43
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
44
+ </svg>
45
+ </button>
46
+ </div>
47
+
48
+ <!-- Color Palette Showcase -->
49
+ <div class="container mx-auto px-4 py-8">
50
+ <h1 class="font-heading text-3xl font-bold mb-8">Modern Cashier System Theme</h1>
51
+
52
+ <div class="mb-12">
53
+ <h2 class="font-heading text-2xl font-semibold mb-4">Color Palette</h2>
54
+ <div class="grid grid-cols-5 gap-4">
55
+ <div class="bg-indigo-600 h-24 rounded-lg flex items-center justify-center text-white font-medium">Primary<br>#4F46E5</div>
56
+ <div class="bg-teal-500 h-24 rounded-lg flex items-center justify-center text-white font-medium">Secondary<br>#14B8A6</div>
57
+ <div class="bg-amber-400 h-24 rounded-lg flex items-center justify-center text-gray-900 font-medium">Accent<br>#FBBF24</div>
58
+ <div class="bg-gray-50 dark:bg-gray-800 h-24 rounded-lg flex items-center justify-center text-gray-900 dark:text-gray-100 font-medium border border-gray-200 dark:border-gray-700">Background<br>#F9FAFB</div>
59
+ <div class="bg-gray-800 dark:bg-gray-100 h-24 rounded-lg flex items-center justify-center text-white dark:text-gray-900 font-medium">Text<br>#1F2937</div>
60
+ </div>
61
+ </div>
62
+
63
+ <!-- Typography -->
64
+ <div class="mb-12">
65
+ <h2 class="font-heading text-2xl font-semibold mb-4">Typography</h2>
66
+ <div class="space-y-4">
67
+ <h1 class="font-heading text-4xl font-bold">Heading 1 - Space Grotesk Bold</h1>
68
+ <h2 class="font-heading text-3xl font-semibold">Heading 2 - Space Grotesk Semibold</h2>
69
+ <h3 class="font-heading text-2xl font-medium">Heading 3 - Space Grotesk Medium</h3>
70
+ <p class="text-lg">Body text - Inter Regular (16px default)</p>
71
+ <p class="text-sm text-gray-600 dark:text-gray-400">Small text - Inter Regular (14px)</p>
72
+ </div>
73
+ </div>
74
+
75
+ <!-- UI Components -->
76
+ <div class="mb-12">
77
+ <h2 class="font-heading text-2xl font-semibold mb-6">UI Components</h2>
78
+
79
+ <!-- Buttons -->
80
+ <div class="mb-8">
81
+ <h3 class="font-heading text-xl font-medium mb-4">Buttons</h3>
82
+ <div class="flex flex-wrap gap-4">
83
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium transition">Primary</button>
84
+ <button class="bg-teal-500 hover:bg-teal-600 text-white px-6 py-3 rounded-lg font-medium transition">Secondary</button>
85
+ <button class="bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-800 dark:text-gray-100 px-6 py-3 rounded-lg font-medium border border-gray-300 dark:border-gray-600 transition">Outline</button>
86
+ <button class="bg-amber-400 hover:bg-amber-500 text-gray-900 px-6 py-3 rounded-lg font-medium transition">Accent</button>
87
+ </div>
88
+ </div>
89
+
90
+ <!-- Input Fields -->
91
+ <div class="mb-8">
92
+ <h3 class="font-heading text-xl font-medium mb-4">Input Fields</h3>
93
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-2xl">
94
+ <div>
95
+ <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Standard Input</label>
96
+ <input type="text" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
97
+ </div>
98
+ <div>
99
+ <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Focused Input</label>
100
+ <input type="text" class="w-full px-4 py-2 border-2 border-indigo-500 rounded-lg focus:ring-2 focus:ring-indigo-500 transition bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100" value="Sample text">
101
+ </div>
102
+ </div>
103
+ </div>
104
+
105
+ <!-- Cards -->
106
+ <div class="mb-8">
107
+ <h3 class="font-heading text-xl font-medium mb-4">Product Cards</h3>
108
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
109
+ <div class="product-card bg-white dark:bg-gray-800 rounded-xl custom-shadow overflow-hidden transition cursor-pointer">
110
+ <div class="h-40 bg-indigo-100 dark:bg-indigo-900/30 flex items-center justify-center">
111
+ <span class="text-indigo-600 dark:text-indigo-400 text-lg font-medium">Product Image</span>
112
+ </div>
113
+ <div class="p-4">
114
+ <h3 class="font-heading text-lg font-semibold mb-1 dark:text-white">Premium Coffee</h3>
115
+ <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Arabica blend, 250g</p>
116
+ <div class="flex justify-between items-center">
117
+ <span class="font-bold text-gray-900 dark:text-white">$12.99</span>
118
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1 text-sm rounded-lg transition">Add</button>
119
+ </div>
120
+ </div>
121
+ </div>
122
+ <div class="product-card bg-white dark:bg-gray-800 rounded-xl custom-shadow overflow-hidden transition cursor-pointer">
123
+ <div class="h-40 bg-teal-100 dark:bg-teal-900/30 flex items-center justify-center">
124
+ <span class="text-teal-700 dark:text-teal-400 text-lg font-medium">Product Image</span>
125
+ </div>
126
+ <div class="p-4">
127
+ <h3 class="font-heading text-lg font-semibold mb-1 dark:text-white">Organic Tea</h3>
128
+ <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Herbal infusion, 20 bags</p>
129
+ <div class="flex justify-between items-center">
130
+ <span class="font-bold text-gray-900 dark:text-white">$8.49</span>
131
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1 text-sm rounded-lg transition">Add</button>
132
+ </div>
133
+ </div>
134
+ </div>
135
+ <div class="product-card bg-white dark:bg-gray-800 rounded-xl custom-shadow overflow-hidden transition cursor-pointer">
136
+ <div class="h-40 bg-amber-100 dark:bg-amber-900/30 flex items-center justify-center">
137
+ <span class="text-amber-700 dark:text-amber-400 text-lg font-medium">Product Image</span>
138
+ </div>
139
+ <div class="p-4">
140
+ <h3 class="font-heading text-lg font-semibold mb-1 dark:text-white">Chocolate Bar</h3>
141
+ <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Dark 70%, 100g</p>
142
+ <div class="flex justify-between items-center">
143
+ <span class="font-bold text-gray-900 dark:text-white">$4.99</span>
144
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1 text-sm rounded-lg transition">Add</button>
145
+ </div>
146
+ </div>
147
+ </div>
148
+ </div>
149
+ </div>
150
+
151
+ <!-- Tables -->
152
+ <div class="mb-8">
153
+ <h3 class="font-heading text-xl font-medium mb-4">Order Tables</h3>
154
+ <div class="bg-white dark:bg-gray-800 rounded-xl custom-shadow overflow-hidden">
155
+ <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
156
+ <thead class="bg-gray-50 dark:bg-gray-700">
157
+ <tr>
158
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Product</th>
159
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Price</th>
160
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Qty</th>
161
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Total</th>
162
+ </tr>
163
+ </thead>
164
+ <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
165
+ <tr>
166
+ <td class="px-6 py-4 whitespace-nowrap">
167
+ <div class="flex items-center">
168
+ <div class="flex-shrink-0 h-10 w-10 bg-indigo-100 dark:bg-indigo-900/30 rounded-full flex items-center justify-center text-indigo-600 dark:text-indigo-400">
169
+ <span>C</span>
170
+ </div>
171
+ <div class="ml-4">
172
+ <div class="text-sm font-medium text-gray-900 dark:text-white">Coffee</div>
173
+ <div class="text-sm text-gray-500 dark:text-gray-400">Arabica blend</div>
174
+ </div>
175
+ </div>
176
+ </td>
177
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">$12.99</td>
178
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">1</td>
179
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">$12.99</td>
180
+ </tr>
181
+ <tr>
182
+ <td class="px-6 py-4 whitespace-nowrap">
183
+ <div class="flex items-center">
184
+ <div class="flex-shrink-0 h-10 w-10 bg-teal-100 dark:bg-teal-900/30 rounded-full flex items-center justify-center text-teal-600 dark:text-teal-400">
185
+ <span>T</span>
186
+ </div>
187
+ <div class="ml-4">
188
+ <div class="text-sm font-medium text-gray-900 dark:text-white">Tea</div>
189
+ <div class="text-sm text-gray-500 dark:text-gray-400">Herbal infusion</div>
190
+ </div>
191
+ </div>
192
+ </td>
193
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">$8.49</td>
194
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">2</td>
195
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">$16.98</td>
196
+ </tr>
197
+ </tbody>
198
+ <tfoot class="bg-gray-50 dark:bg-gray-700">
199
+ <tr>
200
+ <td colspan="3" class="px-6 py-3 text-right text-sm font-medium text-gray-700 dark:text-gray-300">Subtotal</td>
201
+ <td class="px-6 py-3 text-sm font-medium text-gray-900 dark:text-white">$29.97</td>
202
+ </tr>
203
+ <tr>
204
+ <td colspan="3" class="px-6 py-3 text-right text-sm font-medium text-gray-700 dark:text-gray-300">Tax (10%)</td>
205
+ <td class="px-6 py-3 text-sm font-medium text-gray-900 dark:text-white">$3.00</td>
206
+ </tr>
207
+ <tr>
208
+ <td colspan="3" class="px-6 py-3 text-right text-sm font-medium text-gray-900 dark:text-white">Total</td>
209
+ <td class="px-6 py-3 text-sm font-bold text-indigo-600 dark:text-indigo-400">$32.97</td>
210
+ </tr>
211
+ </tfoot>
212
+ </table>
213
+ </div>
214
+ </div>
215
+ </div>
216
+
217
+ <!-- Layout Examples -->
218
+ <div class="mb-12">
219
+ <h2 class="font-heading text-2xl font-semibold mb-6">Page Layout Examples</h2>
220
+
221
+ <!-- Product Grid -->
222
+ <div class="mb-8">
223
+ <h3 class="font-heading text-xl font-medium mb-4">Product Display Grid</h3>
224
+ <div class="bg-white dark:bg-gray-800 rounded-xl p-6 custom-shadow">
225
+ <div class="flex justify-between items-center mb-6">
226
+ <h2 class="font-heading text-2xl font-semibold dark:text-white">Products</h2>
227
+ <div class="relative w-64">
228
+ <input type="text" placeholder="Search products..." class="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
229
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
230
+ <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
231
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
232
+ </svg>
233
+ </div>
234
+ </div>
235
+ </div>
236
+ <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
237
+ <div class="h-32 bg-indigo-100 dark:bg-indigo-900/30 rounded-lg flex items-center justify-center text-indigo-600 dark:text-indigo-400">Product 1</div>
238
+ <div class="h-32 bg-teal-100 dark:bg-teal-900/30 rounded-lg flex items-center justify-center text-teal-600 dark:text-teal-400">Product 2</div>
239
+ <div class="h-32 bg-amber-100 dark:bg-amber-900/30 rounded-lg flex items-center justify-center text-amber-600 dark:text-amber-400">Product 3</div>
240
+ <div class="h-32 bg-indigo-100 dark:bg-indigo-900/30 rounded-lg flex items-center justify-center text-indigo-600 dark:text-indigo-400">Product 4</div>
241
+ </div>
242
+ <div class="mt-6 flex justify-center">
243
+ <nav class="flex items-center space-x-2">
244
+ <button class="px-3 py-1 rounded border border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700">Previous</button>
245
+ <button class="px-3 py-1 rounded bg-indigo-600 text-white">1</button>
246
+ <button class="px-3 py-1 rounded border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700">2</button>
247
+ <button class="px-3 py-1 rounded border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700">3</button>
248
+ <button class="px-3 py-1 rounded border border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700">Next</button>
249
+ </nav>
250
+ </div>
251
+ </div>
252
+ </div>
253
+
254
+ <!-- Shopping Cart -->
255
+ <div class="mb-8">
256
+ <h3 class="font-heading text-xl font-medium mb-4">Shopping Cart Layout</h3>
257
+ <div class="bg-white dark:bg-gray-800 rounded-xl custom-shadow overflow-hidden">
258
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-0">
259
+ <div class="lg:col-span-2 p-6">
260
+ <h2 class="font-heading text-2xl font-semibold mb-6 dark:text-white">Your Cart (2 items)</h2>
261
+ <div class="space-y-4">
262
+ <div class="flex items-center border-b border-gray-100 dark:border-gray-700 pb-4">
263
+ <div class="flex-shrink-0 h-16 w-16 bg-indigo-100 dark:bg-indigo-900/30 rounded-lg flex items-center justify-center text-indigo-600 dark:text-indigo-400">
264
+ <span class="font-medium">C</span>
265
+ </div>
266
+ <div class="ml-4 flex-grow">
267
+ <h3 class="font-medium text-gray-900 dark:text-white">Premium Coffee</h3>
268
+ <p class="text-sm text-gray-500 dark:text-gray-400">Arabica blend, 250g</p>
269
+ </div>
270
+ <div class="flex items-center">
271
+ <button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300">
272
+ <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
273
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path>
274
+ </svg>
275
+ </button>
276
+ <span class="mx-2 text-gray-900 dark:text-white">1</span>
277
+ <button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300">
278
+ <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
279
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
280
+ </svg>
281
+ </button>
282
+ </div>
283
+ <div class="ml-6 font-medium text-gray-900 dark:text-white">$12.99</div>
284
+ <button class="ml-4 text-gray-400 hover:text-red-500">
285
+ <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
286
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
287
+ </svg>
288
+ </button>
289
+ </div>
290
+ <div class="flex items-center border-b border-gray-100 dark:border-gray-700 pb-4">
291
+ <div class="flex-shrink-0 h-16 w-16 bg-teal-100 dark:bg-teal-900/30 rounded-lg flex items-center justify-center text-teal-600 dark:text-teal-400">
292
+ <span class="font-medium">T</span>
293
+ </div>
294
+ <div class="ml-4 flex-grow">
295
+ <h3 class="font-medium text-gray-900 dark:text-white">Organic Tea</h3>
296
+ <p class="text-sm text-gray-500 dark:text-gray-400">Herbal infusion, 20 bags</p>
297
+ </div>
298
+ <div class="flex items-center">
299
+ <button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300">
300
+ <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
301
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path>
302
+ </svg>
303
+ </button>
304
+ <span class="mx-2 text-gray-900 dark:text-white">2</span>
305
+ <button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300">
306
+ <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
307
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
308
+ </svg>
309
+ </button>
310
+ </div>
311
+ <div class="ml-6 font-medium text-gray-900 dark:text-white">$16.98</div>
312
+ <button class="ml-4 text-gray-400 hover:text-red-500">
313
+ <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
314
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
315
+ </svg>
316
+ </button>
317
+ </div>
318
+ </div>
319
+ </div>
320
+ <div class="bg-gray-50 dark:bg-gray-700 p-6">
321
+ <h2 class="font-heading text-xl font-semibold mb-4 dark:text-white">Order Summary</h2>
322
+ <div class="space-y-3 mb-6">
323
+ <div class="flex justify-between">
324
+ <span class="text-gray-600 dark:text-gray-300">Subtotal</span>
325
+ <span class="font-medium dark:text-white">$29.97</span>
326
+ </div>
327
+ <div class="flex justify-between">
328
+ <span class="text-gray-600 dark:text-gray-300">Tax (10%)</span>
329
+ <span class="font-medium dark:text-white">$3.00</span>
330
+ </div>
331
+ <div class="flex justify-between pt-3 border-t border-gray-200 dark:border-gray-600">
332
+ <span class="font-medium dark:text-white">Total</span>
333
+ <span class="font-heading font-bold text-indigo-600 dark:text-indigo-400">$32.97</span>
334
+ </div>
335
+ </div>
336
+ <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-3 px-4 rounded-lg font-medium transition">Checkout</button>
337
+ <p class="mt-3 text-center text-sm text-gray-500 dark:text-gray-400">or <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300">continue shopping</a></p>
338
+ </div>
339
+ </div>
340
+ </div>
341
+ </div>
342
+
343
+ <!-- Checkout Form -->
344
+ <div>
345
+ <h3 class="font-heading text-xl font-medium mb-4">Checkout Form Structure</h3>
346
+ <div class="bg-white dark:bg-gray-800 rounded-xl custom-shadow overflow-hidden">
347
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-0">
348
+ <div class="p-6">
349
+ <h2 class="font-heading text-2xl font-semibold mb-6 dark:text-white">Customer Information</h2>
350
+ <form class="space-y-4">
351
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
352
+ <div>
353
+ <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">First Name</label>
354
+ <input type="text" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
355
+ </div>
356
+ <div>
357
+ <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Last Name</label>
358
+ <input type="text" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
359
+ </div>
360
+ </div>
361
+ <div>
362
+ <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email</label>
363
+ <input type="email" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
364
+ </div>
365
+ <div>
366
+ <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Phone</label>
367
+ <input type="tel" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
368
+ </div>
369
+ <div>
370
+ <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Address</label>
371
+ <input type="text" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
372
+ </div>
373
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
374
+ <div>
375
+ <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">City</label>
376
+ <input type="text" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
377
+ </div>
378
+ <div>
379
+ <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">State</label>
380
+ <select class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
381
+ <option>Select</option>
382
+ <option>California</option>
383
+ <option>New York</option>
384
+ </select>
385
+ </div>
386
+ <div>
387
+ <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">ZIP Code</label>
388
+ <input type="text" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
389
+ </div>
390
+ </div>
391
+ </form>
392
+ </div>
393
+ <div class="bg-gray-50 dark:bg-gray-700 p-6">
394
+ <h2 class="font-heading text-xl font-semibold mb-4 dark:text-white">Payment Method</h2>
395
+ <div class="space-y-4">
396
+ <div class="flex items-center">
397
+ <input id="credit-card" name="payment-method" type="radio" checked class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 dark:border-gray-600 dark:bg-gray-800">
398
+ <label for="credit-card" class="ml-3 block text-sm font-medium text-gray-700 dark:text-gray-300">Credit Card</label>
399
+ </div>
400
+ <div class="space-y-3">
401
+ <div>
402
+ <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Card Number</label>
403
+ <input type="text" placeholder="1234 5678 9012 3456" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
404
+ </div>
405
+ <div class="grid grid-cols-2 gap-4">
406
+ <div>
407
+ <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Expiry Date</label>
408
+ <input type="text" placeholder="MM/YY" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
409
+ </div>
410
+ <div>
411
+ <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">CVV</label>
412
+ <input type="text" placeholder="123" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
413
+ </div>
414
+ </div>
415
+ </div>
416
+ <div class="flex items-center mt-2">
417
+ <input id="paypal" name="payment-method" type="radio" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 dark:border-gray-600 dark:bg-gray-800">
418
+ <label for="paypal" class="ml-3 block text-sm font-medium text-gray-700 dark:text-gray-300">PayPal</label>
419
+ </div>
420
+ </div>
421
+ <div class="mt-8 border-t border-gray-200 dark:border-gray-600 pt-6">
422
+ <h3 class="font-heading text-lg font-medium mb-4 dark:text-white">Order Summary</h3>
423
+ <div class="space-y-3 mb-6">
424
+ <div class="flex justify-between">
425
+ <span class="text-gray-600 dark:text-gray-300">Subtotal</span>
426
+ <span class="font-medium dark:text-white">$29.97</span>
427
+ </div>
428
+ <div class="flex justify-between">
429
+ <span class="text-gray-600 dark:text-gray-300">Tax (10%)</span>
430
+ <span class="font-medium dark:text-white">$3.00</span>
431
+ </div>
432
+ <div class="flex justify-between pt-3 border-t border-gray-200 dark:border-gray-600">
433
+ <span class="font-medium dark:text-white">Total</span>
434
+ <span class="font-heading font-bold text-indigo-600 dark:text-indigo-400">$32.97</span>
435
+ </div>
436
+ </div>
437
+ <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-3 px-4 rounded-lg font-medium transition">Complete Order</button>
438
+ </div>
439
+ </div>
440
+ </div>
441
+ </div>
442
+ </div>
443
+ </div>
444
+ </div>
445
+
446
+ <script>
447
+ // Theme toggle functionality
448
+ const themeToggle = document.getElementById('themeToggle');
449
+ const sunIcon = document.getElementById('sunIcon');
450
+ const moonIcon = document.getElementById('moonIcon');
451
+
452
+ // Check for saved user preference or use system preference
453
+ const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
454
+ const currentTheme = localStorage.getItem('theme');
455
+
456
+ if (currentTheme === 'dark' || (!currentTheme && prefersDarkScheme.matches)) {
457
+ document.documentElement.classList.add('dark');
458
+ sunIcon.classList.add('hidden');
459
+ moonIcon.classList.remove('hidden');
460
+ } else {
461
+ document.documentElement.classList.remove('dark');
462
+ sunIcon.classList.remove('hidden');
463
+ moonIcon.classList.add('hidden');
464
+ }
465
+
466
+ // Toggle theme on button click
467
+ themeToggle.addEventListener('click', () => {
468
+ const isDark = document.documentElement.classList.toggle('dark');
469
+ localStorage.setItem('theme', isDark ? 'dark' : 'light');
470
+
471
+ if (isDark) {
472
+ sunIcon.classList.add('hidden');
473
+ moonIcon.classList.remove('hidden');
474
+ } else {
475
+ sunIcon.classList.remove('hidden');
476
+ moonIcon.classList.add('hidden');
477
+ }
478
+ });
479
+
480
+ // Listen for system theme changes
481
+ prefersDarkScheme.addEventListener('change', (e) => {
482
+ const newScheme = e.matches ? 'dark' : 'light';
483
+ if (!localStorage.getItem('theme')) {
484
+ if (newScheme === 'dark') {
485
+ document.documentElement.classList.add('dark');
486
+ sunIcon.classList.add('hidden');
487
+ moonIcon.classList.remove('hidden');
488
+ } else {
489
+ document.documentElement.classList.remove('dark');
490
+ sunIcon.classList.remove('hidden');
491
+ moonIcon.classList.add('hidden');
492
+ }
493
+ }
494
+ });
495
+ </script>
496
+ <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=infoaliahmadi/darktheme" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
497
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ also design the dark theme of this theme