Hugging Face's logo

Spaces:
mrpaswan7
/
setting-page
Running

App Files Community
mrpaswan7 commited on
Commit
43fa1aa
·
verified ·
1 Parent(s): c24ab6e

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +5 -3
  2. index.html +808 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Setting Page
3
- emoji: 🐨
4
  colorFrom: pink
5
  colorTo: yellow
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: setting-page
3
+ emoji: 🐳
4
  colorFrom: pink
5
  colorTo: yellow
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,808 @@
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>Settings Menu</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
+ .settings-transition {
11
+ transition: all 0.3s ease;
12
+ }
13
+ .toggle-checkbox:checked {
14
+ right: 0;
15
+ background-color: #4f46e5;
16
+ }
17
+ .toggle-checkbox:checked + .toggle-label {
18
+ background-color: #a5b4fc;
19
+ }
20
+ .tab-content {
21
+ display: none;
22
+ }
23
+ .tab-content.active {
24
+ display: block;
25
+ animation: fadeIn 0.3s ease;
26
+ }
27
+ @keyframes fadeIn {
28
+ from { opacity: 0; }
29
+ to { opacity: 1; }
30
+ }
31
+ .custom-scrollbar::-webkit-scrollbar {
32
+ width: 6px;
33
+ }
34
+ .custom-scrollbar::-webkit-scrollbar-track {
35
+ background: #f1f1f1;
36
+ border-radius: 10px;
37
+ }
38
+ .custom-scrollbar::-webkit-scrollbar-thumb {
39
+ background: #c7d2fe;
40
+ border-radius: 10px;
41
+ }
42
+ .custom-scrollbar::-webkit-scrollbar-thumb:hover {
43
+ background: #a5b4fc;
44
+ }
45
+ </style>
46
+ </head>
47
+ <body class="bg-gray-50 font-sans">
48
+ <div class="flex h-screen">
49
+ <!-- Sidebar -->
50
+ <div class="w-64 bg-white shadow-lg hidden md:block">
51
+ <div class="p-6">
52
+ <h1 class="text-2xl font-bold text-indigo-600 flex items-center">
53
+ <i class="fas fa-cog mr-2"></i> Settings
54
+ </h1>
55
+ <div class="mt-8">
56
+ <div class="space-y-1">
57
+ <button onclick="openTab(event, 'account')" class="tab-button w-full text-left px-4 py-3 rounded-lg flex items-center text-indigo-700 bg-indigo-50">
58
+ <i class="fas fa-user-circle mr-3"></i> Account
59
+ </button>
60
+ <button onclick="openTab(event, 'notifications')" class="tab-button w-full text-left px-4 py-3 rounded-lg flex items-center text-gray-600 hover:bg-gray-100">
61
+ <i class="fas fa-bell mr-3"></i> Notifications
62
+ </button>
63
+ <button onclick="openTab(event, 'privacy')" class="tab-button w-full text-left px-4 py-3 rounded-lg flex items-center text-gray-600 hover:bg-gray-100">
64
+ <i class="fas fa-lock mr-3"></i> Privacy
65
+ </button>
66
+ <button onclick="openTab(event, 'appearance')" class="tab-button w-full text-left px-4 py-3 rounded-lg flex items-center text-gray-600 hover:bg-gray-100">
67
+ <i class="fas fa-palette mr-3"></i> Appearance
68
+ </button>
69
+ <button onclick="openTab(event, 'language')" class="tab-button w-full text-left px-4 py-3 rounded-lg flex items-center text-gray-600 hover:bg-gray-100">
70
+ <i class="fas fa-language mr-3"></i> Language
71
+ </button>
72
+ <button onclick="openTab(event, 'help')" class="tab-button w-full text-left px-4 py-3 rounded-lg flex items-center text-gray-600 hover:bg-gray-100">
73
+ <i class="fas fa-question-circle mr-3"></i> Help
74
+ </button>
75
+ </div>
76
+ </div>
77
+ </div>
78
+ </div>
79
+
80
+ <!-- Mobile header -->
81
+ <div class="md:hidden w-full bg-white shadow-sm p-4 flex justify-between items-center">
82
+ <h1 class="text-xl font-bold text-indigo-600 flex items-center">
83
+ <i class="fas fa-cog mr-2"></i> Settings
84
+ </h1>
85
+ <button id="mobileMenuButton" class="text-gray-600">
86
+ <i class="fas fa-bars text-xl"></i>
87
+ </button>
88
+ </div>
89
+
90
+ <!-- Mobile sidebar (hidden by default) -->
91
+ <div id="mobileSidebar" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden md:hidden">
92
+ <div class="absolute left-0 top-0 h-full w-64 bg-white shadow-lg settings-transition transform -translate-x-full">
93
+ <div class="p-6">
94
+ <div class="flex justify-between items-center mb-6">
95
+ <h1 class="text-2xl font-bold text-indigo-600 flex items-center">
96
+ <i class="fas fa-cog mr-2"></i> Settings
97
+ </h1>
98
+ <button id="closeMobileMenu" class="text-gray-600">
99
+ <i class="fas fa-times text-xl"></i>
100
+ </button>
101
+ </div>
102
+ <div class="space-y-1">
103
+ <button onclick="openTab(event, 'account')" class="tab-button w-full text-left px-4 py-3 rounded-lg flex items-center text-indigo-700 bg-indigo-50">
104
+ <i class="fas fa-user-circle mr-3"></i> Account
105
+ </button>
106
+ <button onclick="openTab(event, 'notifications')" class="tab-button w-full text-left px-4 py-3 rounded-lg flex items-center text-gray-600 hover:bg-gray-100">
107
+ <i class="fas fa-bell mr-3"></i> Notifications
108
+ </button>
109
+ <button onclick="openTab(event, 'privacy')" class="tab-button w-full text-left px-4 py-3 rounded-lg flex items-center text-gray-600 hover:bg-gray-100">
110
+ <i class="fas fa-lock mr-3"></i> Privacy
111
+ </button>
112
+ <button onclick="openTab(event, 'appearance')" class="tab-button w-full text-left px-4 py-3 rounded-lg flex items-center text-gray-600 hover:bg-gray-100">
113
+ <i class="fas fa-palette mr-3"></i> Appearance
114
+ </button>
115
+ <button onclick="openTab(event, 'language')" class="tab-button w-full text-left px-4 py-3 rounded-lg flex items-center text-gray-600 hover:bg-gray-100">
116
+ <i class="fas fa-language mr-3"></i> Language
117
+ </button>
118
+ <button onclick="openTab(event, 'help')" class="tab-button w-full text-left px-4 py-3 rounded-lg flex items-center text-gray-600 hover:bg-gray-100">
119
+ <i class="fas fa-question-circle mr-3"></i> Help
120
+ </button>
121
+ </div>
122
+ </div>
123
+ </div>
124
+ </div>
125
+
126
+ <!-- Main content -->
127
+ <div class="flex-1 overflow-auto custom-scrollbar">
128
+ <div class="p-6 md:p-10">
129
+ <!-- Account Settings -->
130
+ <div id="account" class="tab-content active">
131
+ <div class="flex justify-between items-center mb-8">
132
+ <h2 class="text-2xl font-bold text-gray-800 flex items-center">
133
+ <i class="fas fa-user-circle mr-3 text-indigo-600"></i> Account Settings
134
+ </h2>
135
+ <button class="text-indigo-600 hover:text-indigo-800">
136
+ <i class="fas fa-ellipsis-v"></i>
137
+ </button>
138
+ </div>
139
+
140
+ <div class="bg-white rounded-xl shadow-sm p-6 mb-8">
141
+ <div class="flex flex-col md:flex-row items-center mb-8">
142
+ <div class="w-24 h-24 rounded-full bg-indigo-100 flex items-center justify-center mb-4 md:mb-0 md:mr-6">
143
+ <i class="fas fa-user text-4xl text-indigo-600"></i>
144
+ </div>
145
+ <div class="flex-1 text-center md:text-left">
146
+ <h3 class="text-lg font-semibold text-gray-800">John Doe</h3>
147
+ <p class="text-gray-600">[email protected]</p>
148
+ </div>
149
+ <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 mt-4 md:mt-0">
150
+ Change Photo
151
+ </button>
152
+ </div>
153
+
154
+ <div class="space-y-6">
155
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
156
+ <div>
157
+ <label class="block text-sm font-medium text-gray-700 mb-1">First Name</label>
158
+ <input type="text" value="John" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500">
159
+ </div>
160
+ <div>
161
+ <label class="block text-sm font-medium text-gray-700 mb-1">Last Name</label>
162
+ <input type="text" value="Doe" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500">
163
+ </div>
164
+ </div>
165
+
166
+ <div>
167
+ <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
168
+ <input type="email" value="[email protected]" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500">
169
+ </div>
170
+
171
+ <div>
172
+ <label class="block text-sm font-medium text-gray-700 mb-1">Bio</label>
173
+ <textarea class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500 h-24">Product designer, photographer and traveler. Currently working at Example Inc.</textarea>
174
+ </div>
175
+ </div>
176
+
177
+ <div class="flex justify-end mt-8">
178
+ <button class="px-6 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 mr-4">
179
+ Cancel
180
+ </button>
181
+ <button class="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">
182
+ Save Changes
183
+ </button>
184
+ </div>
185
+ </div>
186
+
187
+ <div class="bg-white rounded-xl shadow-sm p-6">
188
+ <h3 class="text-lg font-semibold text-gray-800 mb-6 flex items-center">
189
+ <i class="fas fa-key mr-2 text-indigo-600"></i> Change Password
190
+ </h3>
191
+
192
+ <div class="space-y-6">
193
+ <div>
194
+ <label class="block text-sm font-medium text-gray-700 mb-1">Current Password</label>
195
+ <div class="relative">
196
+ <input type="password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500 pr-10">
197
+ <button class="absolute right-3 top-2.5 text-gray-500 hover:text-gray-700">
198
+ <i class="fas fa-eye"></i>
199
+ </button>
200
+ </div>
201
+ </div>
202
+
203
+ <div>
204
+ <label class="block text-sm font-medium text-gray-700 mb-1">New Password</label>
205
+ <div class="relative">
206
+ <input type="password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500 pr-10">
207
+ <button class="absolute right-3 top-2.5 text-gray-500 hover:text-gray-700">
208
+ <i class="fas fa-eye"></i>
209
+ </button>
210
+ </div>
211
+ <p class="text-xs text-gray-500 mt-1">Must be at least 8 characters</p>
212
+ </div>
213
+
214
+ <div>
215
+ <label class="block text-sm font-medium text-gray-700 mb-1">Confirm New Password</label>
216
+ <div class="relative">
217
+ <input type="password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500 pr-10">
218
+ <button class="absolute right-3 top-2.5 text-gray-500 hover:text-gray-700">
219
+ <i class="fas fa-eye"></i>
220
+ </button>
221
+ </div>
222
+ </div>
223
+ </div>
224
+
225
+ <div class="flex justify-end mt-8">
226
+ <button class="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">
227
+ Update Password
228
+ </button>
229
+ </div>
230
+ </div>
231
+ </div>
232
+
233
+ <!-- Notifications Settings -->
234
+ <div id="notifications" class="tab-content">
235
+ <div class="flex justify-between items-center mb-8">
236
+ <h2 class="text-2xl font-bold text-gray-800 flex items-center">
237
+ <i class="fas fa-bell mr-3 text-indigo-600"></i> Notification Settings
238
+ </h2>
239
+ <button class="text-indigo-600 hover:text-indigo-800">
240
+ <i class="fas fa-ellipsis-v"></i>
241
+ </button>
242
+ </div>
243
+
244
+ <div class="bg-white rounded-xl shadow-sm p-6 mb-8">
245
+ <h3 class="text-lg font-semibold text-gray-800 mb-6 flex items-center">
246
+ <i class="fas fa-envelope mr-2 text-indigo-600"></i> Email Notifications
247
+ </h3>
248
+
249
+ <div class="space-y-6">
250
+ <div class="flex justify-between items-center">
251
+ <div>
252
+ <h4 class="font-medium text-gray-800">Product updates</h4>
253
+ <p class="text-sm text-gray-600">News about new features and improvements</p>
254
+ </div>
255
+ <label class="relative inline-flex items-center cursor-pointer">
256
+ <input type="checkbox" class="toggle-checkbox sr-only" checked>
257
+ <div class="toggle-label w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-indigo-300 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all"></div>
258
+ </label>
259
+ </div>
260
+
261
+ <div class="flex justify-between items-center">
262
+ <div>
263
+ <h4 class="font-medium text-gray-800">Security alerts</h4>
264
+ <p class="text-sm text-gray-600">Important notifications about your account security</p>
265
+ </div>
266
+ <label class="relative inline-flex items-center cursor-pointer">
267
+ <input type="checkbox" class="toggle-checkbox sr-only" checked>
268
+ <div class="toggle-label w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-indigo-300 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all"></div>
269
+ </label>
270
+ </div>
271
+
272
+ <div class="flex justify-between items-center">
273
+ <div>
274
+ <h4 class="font-medium text-gray-800">Newsletter</h4>
275
+ <p class="text-sm text-gray-600">Weekly digest with curated content</p>
276
+ </div>
277
+ <label class="relative inline-flex items-center cursor-pointer">
278
+ <input type="checkbox" class="toggle-checkbox sr-only">
279
+ <div class="toggle-label w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-indigo-300 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all"></div>
280
+ </label>
281
+ </div>
282
+ </div>
283
+ </div>
284
+
285
+ <div class="bg-white rounded-xl shadow-sm p-6">
286
+ <h3 class="text-lg font-semibold text-gray-800 mb-6 flex items-center">
287
+ <i class="fas fa-mobile-alt mr-2 text-indigo-600"></i> Push Notifications
288
+ </h3>
289
+
290
+ <div class="space-y-6">
291
+ <div class="flex justify-between items-center">
292
+ <div>
293
+ <h4 class="font-medium text-gray-800">Messages</h4>
294
+ <p class="text-sm text-gray-600">Get notified when you receive new messages</p>
295
+ </div>
296
+ <label class="relative inline-flex items-center cursor-pointer">
297
+ <input type="checkbox" class="toggle-checkbox sr-only" checked>
298
+ <div class="toggle-label w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-indigo-300 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all"></div>
299
+ </label>
300
+ </div>
301
+
302
+ <div class="flex justify-between items-center">
303
+ <div>
304
+ <h4 class="font-medium text-gray-800">Reminders</h4>
305
+ <p class="text-sm text-gray-600">Daily reminders for important tasks</p>
306
+ </div>
307
+ <label class="relative inline-flex items-center cursor-pointer">
308
+ <input type="checkbox" class="toggle-checkbox sr-only">
309
+ <div class="toggle-label w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-indigo-300 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all"></div>
310
+ </label>
311
+ </div>
312
+
313
+ <div class="flex justify-between items-center">
314
+ <div>
315
+ <h4 class="font-medium text-gray-800">Promotions</h4>
316
+ <p class="text-sm text-gray-600">Special offers and discounts</p>
317
+ </div>
318
+ <label class="relative inline-flex items-center cursor-pointer">
319
+ <input type="checkbox" class="toggle-checkbox sr-only">
320
+ <div class="toggle-label w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-indigo-300 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all"></div>
321
+ </label>
322
+ </div>
323
+ </div>
324
+
325
+ <div class="flex justify-end mt-8">
326
+ <button class="px-6 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 mr-4">
327
+ Reset
328
+ </button>
329
+ <button class="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">
330
+ Save Preferences
331
+ </button>
332
+ </div>
333
+ </div>
334
+ </div>
335
+
336
+ <!-- Privacy Settings -->
337
+ <div id="privacy" class="tab-content">
338
+ <div class="flex justify-between items-center mb-8">
339
+ <h2 class="text-2xl font-bold text-gray-800 flex items-center">
340
+ <i class="fas fa-lock mr-3 text-indigo-600"></i> Privacy Settings
341
+ </h2>
342
+ <button class="text-indigo-600 hover:text-indigo-800">
343
+ <i class="fas fa-ellipsis-v"></i>
344
+ </button>
345
+ </div>
346
+
347
+ <div class="bg-white rounded-xl shadow-sm p-6 mb-8">
348
+ <h3 class="text-lg font-semibold text-gray-800 mb-6 flex items-center">
349
+ <i class="fas fa-user-shield mr-2 text-indigo-600"></i> Account Privacy
350
+ </h3>
351
+
352
+ <div class="space-y-6">
353
+ <div class="flex justify-between items-center">
354
+ <div>
355
+ <h4 class="font-medium text-gray-800">Private Account</h4>
356
+ <p class="text-sm text-gray-600">Only approved followers can see your content</p>
357
+ </div>
358
+ <label class="relative inline-flex items-center cursor-pointer">
359
+ <input type="checkbox" class="toggle-checkbox sr-only">
360
+ <div class="toggle-label w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-indigo-300 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all"></div>
361
+ </label>
362
+ </div>
363
+
364
+ <div class="flex justify-between items-center">
365
+ <div>
366
+ <h4 class="font-medium text-gray-800">Activity Status</h4>
367
+ <p class="text-sm text-gray-600">Show when you were last active</p>
368
+ </div>
369
+ <label class="relative inline-flex items-center cursor-pointer">
370
+ <input type="checkbox" class="toggle-checkbox sr-only" checked>
371
+ <div class="toggle-label w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-indigo-300 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all"></div>
372
+ </label>
373
+ </div>
374
+ </div>
375
+ </div>
376
+
377
+ <div class="bg-white rounded-xl shadow-sm p-6 mb-8">
378
+ <h3 class="text-lg font-semibold text-gray-800 mb-6 flex items-center">
379
+ <i class="fas fa-globe-americas mr-2 text-indigo-600"></i> Data Sharing
380
+ </h3>
381
+
382
+ <div class="space-y-6">
383
+ <div class="flex justify-between items-center">
384
+ <div>
385
+ <h4 class="font-medium text-gray-800">Analytics</h4>
386
+ <p class="text-sm text-gray-600">Share usage data to help improve our services</p>
387
+ </div>
388
+ <label class="relative inline-flex items-center cursor-pointer">
389
+ <input type="checkbox" class="toggle-checkbox sr-only" checked>
390
+ <div class="toggle-label w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-indigo-300 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all"></div>
391
+ </label>
392
+ </div>
393
+
394
+ <div class="flex justify-between items-center">
395
+ <div>
396
+ <h4 class="font-medium text-gray-800">Personalized Ads</h4>
397
+ <p class="text-sm text-gray-600">See ads that are more relevant to you</p>
398
+ </div>
399
+ <label class="relative inline-flex items-center cursor-pointer">
400
+ <input type="checkbox" class="toggle-checkbox sr-only">
401
+ <div class="toggle-label w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-indigo-300 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all"></div>
402
+ </label>
403
+ </div>
404
+ </div>
405
+ </div>
406
+
407
+ <div class="bg-white rounded-xl shadow-sm p-6">
408
+ <h3 class="text-lg font-semibold text-gray-800 mb-6 flex items-center">
409
+ <i class="fas fa-database mr-2 text-indigo-600"></i> Data Management
410
+ </h3>
411
+
412
+ <div class="space-y-6">
413
+ <div>
414
+ <h4 class="font-medium text-gray-800 mb-2">Download Your Data</h4>
415
+ <p class="text-sm text-gray-600 mb-4">Request a copy of all your personal data we store</p>
416
+ <button class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50">
417
+ Request Data Download
418
+ </button>
419
+ </div>
420
+
421
+ <div>
422
+ <h4 class="font-medium text-gray-800 mb-2">Delete Account</h4>
423
+ <p class="text-sm text-gray-600 mb-4">Permanently delete your account and all associated data</p>
424
+ <button class="px-4 py-2 border border-red-300 text-red-600 rounded-lg hover:bg-red-50">
425
+ Delete Account
426
+ </button>
427
+ </div>
428
+ </div>
429
+ </div>
430
+ </div>
431
+
432
+ <!-- Appearance Settings -->
433
+ <div id="appearance" class="tab-content">
434
+ <div class="flex justify-between items-center mb-8">
435
+ <h2 class="text-2xl font-bold text-gray-800 flex items-center">
436
+ <i class="fas fa-palette mr-3 text-indigo-600"></i> Appearance Settings
437
+ </h2>
438
+ <button class="text-indigo-600 hover:text-indigo-800">
439
+ <i class="fas fa-ellipsis-v"></i>
440
+ </button>
441
+ </div>
442
+
443
+ <div class="bg-white rounded-xl shadow-sm p-6 mb-8">
444
+ <h3 class="text-lg font-semibold text-gray-800 mb-6 flex items-center">
445
+ <i class="fas fa-moon mr-2 text-indigo-600"></i> Theme
446
+ </h3>
447
+
448
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
449
+ <div class="border-2 border-indigo-500 rounded-lg p-4 cursor-pointer">
450
+ <div class="flex items-center mb-2">
451
+ <i class="fas fa-sun text-yellow-500 mr-2"></i>
452
+ <span class="font-medium">Light</span>
453
+ </div>
454
+ <div class="h-24 bg-gray-100 rounded"></div>
455
+ </div>
456
+ <div class="border-2 border-gray-200 rounded-lg p-4 cursor-pointer hover:border-gray-300">
457
+ <div class="flex items-center mb-2">
458
+ <i class="fas fa-moon text-indigo-500 mr-2"></i>
459
+ <span class="font-medium">Dark</span>
460
+ </div>
461
+ <div class="h-24 bg-gray-800 rounded"></div>
462
+ </div>
463
+ <div class="border-2 border-gray-200 rounded-lg p-4 cursor-pointer hover:border-gray-300">
464
+ <div class="flex items-center mb-2">
465
+ <i class="fas fa-adjust text-gray-600 mr-2"></i>
466
+ <span class="font-medium">System</span>
467
+ </div>
468
+ <div class="h-24 bg-gradient-to-r from-gray-100 to-gray-800 rounded"></div>
469
+ </div>
470
+ </div>
471
+ </div>
472
+
473
+ <div class="bg-white rounded-xl shadow-sm p-6 mb-8">
474
+ <h3 class="text-lg font-semibold text-gray-800 mb-6 flex items-center">
475
+ <i class="fas fa-tint mr-2 text-indigo-600"></i> Accent Color
476
+ </h3>
477
+
478
+ <div class="grid grid-cols-5 gap-4">
479
+ <div class="w-10 h-10 rounded-full bg-indigo-500 cursor-pointer border-2 border-indigo-700"></div>
480
+ <div class="w-10 h-10 rounded-full bg-blue-500 cursor-pointer hover:border-2 hover:border-blue-700"></div>
481
+ <div class="w-10 h-10 rounded-full bg-green-500 cursor-pointer hover:border-2 hover:border-green-700"></div>
482
+ <div class="w-10 h-10 rounded-full bg-red-500 cursor-pointer hover:border-2 hover:border-red-700"></div>
483
+ <div class="w-10 h-10 rounded-full bg-purple-500 cursor-pointer hover:border-2 hover:border-purple-700"></div>
484
+ <div class="w-10 h-10 rounded-full bg-pink-500 cursor-pointer hover:border-2 hover:border-pink-700"></div>
485
+ <div class="w-10 h-10 rounded-full bg-yellow-500 cursor-pointer hover:border-2 hover:border-yellow-700"></div>
486
+ <div class="w-10 h-10 rounded-full bg-orange-500 cursor-pointer hover:border-2 hover:border-orange-700"></div>
487
+ <div class="w-10 h-10 rounded-full bg-gray-500 cursor-pointer hover:border-2 hover:border-gray-700"></div>
488
+ <div class="w-10 h-10 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 cursor-pointer hover:border-2 hover:border-purple-700"></div>
489
+ </div>
490
+ </div>
491
+
492
+ <div class="bg-white rounded-xl shadow-sm p-6">
493
+ <h3 class="text-lg font-semibold text-gray-800 mb-6 flex items-center">
494
+ <i class="fas fa-text-height mr-2 text-indigo-600"></i> Font Size
495
+ </h3>
496
+
497
+ <div class="flex items-center">
498
+ <span class="text-sm mr-2">A</span>
499
+ <input type="range" min="12" max="24" value="16" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
500
+ <span class="text-xl ml-2">A</span>
501
+ </div>
502
+
503
+ <div class="flex justify-end mt-8">
504
+ <button class="px-6 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 mr-4">
505
+ Reset
506
+ </button>
507
+ <button class="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">
508
+ Apply Changes
509
+ </button>
510
+ </div>
511
+ </div>
512
+ </div>
513
+
514
+ <!-- Language Settings -->
515
+ <div id="language" class="tab-content">
516
+ <div class="flex justify-between items-center mb-8">
517
+ <h2 class="text-2xl font-bold text-gray-800 flex items-center">
518
+ <i class="fas fa-language mr-3 text-indigo-600"></i> Language Settings
519
+ </h2>
520
+ <button class="text-indigo-600 hover:text-indigo-800">
521
+ <i class="fas fa-ellipsis-v"></i>
522
+ </button>
523
+ </div>
524
+
525
+ <div class="bg-white rounded-xl shadow-sm p-6 mb-8">
526
+ <h3 class="text-lg font-semibold text-gray-800 mb-6 flex items-center">
527
+ <i class="fas fa-globe mr-2 text-indigo-600"></i> App Language
528
+ </h3>
529
+
530
+ <div class="space-y-4">
531
+ <div class="flex items-center p-3 border border-gray-200 rounded-lg hover:border-indigo-300 cursor-pointer">
532
+ <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
533
+ <span class="text-indigo-600">EN</span>
534
+ </div>
535
+ <div class="flex-1">
536
+ <h4 class="font-medium">English</h4>
537
+ </div>
538
+ <i class="fas fa-check text-indigo-600"></i>
539
+ </div>
540
+
541
+ <div class="flex items-center p-3 border border-gray-200 rounded-lg hover:border-indigo-300 cursor-pointer">
542
+ <div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center mr-3">
543
+ <span class="text-gray-600">ES</span>
544
+ </div>
545
+ <div class="flex-1">
546
+ <h4 class="font-medium">Español</h4>
547
+ </div>
548
+ </div>
549
+
550
+ <div class="flex items-center p-3 border border-gray-200 rounded-lg hover:border-indigo-300 cursor-pointer">
551
+ <div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center mr-3">
552
+ <span class="text-gray-600">FR</span>
553
+ </div>
554
+ <div class="flex-1">
555
+ <h4 class="font-medium">Français</h4>
556
+ </div>
557
+ </div>
558
+
559
+ <div class="flex items-center p-3 border border-gray-200 rounded-lg hover:border-indigo-300 cursor-pointer">
560
+ <div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center mr-3">
561
+ <span class="text-gray-600">DE</span>
562
+ </div>
563
+ <div class="flex-1">
564
+ <h4 class="font-medium">Deutsch</h4>
565
+ </div>
566
+ </div>
567
+
568
+ <div class="flex items-center p-3 border border-gray-200 rounded-lg hover:border-indigo-300 cursor-pointer">
569
+ <div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center mr-3">
570
+ <span class="text-gray-600">JA</span>
571
+ </div>
572
+ <div class="flex-1">
573
+ <h4 class="font-medium">日本語</h4>
574
+ </div>
575
+ </div>
576
+ </div>
577
+ </div>
578
+
579
+ <div class="bg-white rounded-xl shadow-sm p-6">
580
+ <h3 class="text-lg font-semibold text-gray-800 mb-6 flex items-center">
581
+ <i class="fas fa-keyboard mr-2 text-indigo-600"></i> Input Language
582
+ </h3>
583
+
584
+ <div class="space-y-4">
585
+ <div class="flex items-center p-3 border border-gray-200 rounded-lg hover:border-indigo-300 cursor-pointer">
586
+ <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
587
+ <span class="text-indigo-600">EN</span>
588
+ </div>
589
+ <div class="flex-1">
590
+ <h4 class="font-medium">English (US)</h4>
591
+ <p class="text-sm text-gray-600">QWERTY keyboard</p>
592
+ </div>
593
+ <i class="fas fa-check text-indigo-600"></i>
594
+ </div>
595
+
596
+ <div class="flex items-center p-3 border border-gray-200 rounded-lg hover:border-indigo-300 cursor-pointer">
597
+ <div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center mr-3">
598
+ <span class="text-gray-600">EN</span>
599
+ </div>
600
+ <div class="flex-1">
601
+ <h4 class="font-medium">English (UK)</h4>
602
+ <p class="text-sm text-gray-600">QWERTY keyboard</p>
603
+ </div>
604
+ </div>
605
+
606
+ <div class="flex items-center p-3 border border-gray-200 rounded-lg hover:border-indigo-300 cursor-pointer">
607
+ <div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center mr-3">
608
+ <span class="text-gray-600">FR</span>
609
+ </div>
610
+ <div class="flex-1">
611
+ <h4 class="font-medium">French</h4>
612
+ <p class="text-sm text-gray-600">AZERTY keyboard</p>
613
+ </div>
614
+ </div>
615
+ </div>
616
+
617
+ <button class="w-full mt-6 px-4 py-2 border-2 border-dashed border-gray-300 rounded-lg text-gray-600 hover:border-indigo-300 hover:text-indigo-600">
618
+ <i class="fas fa-plus mr-2"></i> Add Input Language
619
+ </button>
620
+ </div>
621
+ </div>
622
+
623
+ <!-- Help Settings -->
624
+ <div id="help" class="tab-content">
625
+ <div class="flex justify-between items-center mb-8">
626
+ <h2 class="text-2xl font-bold text-gray-800 flex items-center">
627
+ <i class="fas fa-question-circle mr-3 text-indigo-600"></i> Help & Support
628
+ </h2>
629
+ <button class="text-indigo-600 hover:text-indigo-800">
630
+ <i class="fas fa-ellipsis-v"></i>
631
+ </button>
632
+ </div>
633
+
634
+ <div class="bg-white rounded-xl shadow-sm p-6 mb-8">
635
+ <h3 class="text-lg font-semibold text-gray-800 mb-6 flex items-center">
636
+ <i class="fas fa-book mr-2 text-indigo-600"></i> Help Center
637
+ </h3>
638
+
639
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
640
+ <div class="p-4 border border-gray-200 rounded-lg hover:border-indigo-300 cursor-pointer">
641
+ <div class="flex items-center mb-3">
642
+ <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
643
+ <i class="fas fa-user text-indigo-600"></i>
644
+ </div>
645
+ <h4 class="font-medium">Account Help</h4>
646
+ </div>
647
+ <p class="text-sm text-gray-600">Learn how to manage your account settings and preferences</p>
648
+ </div>
649
+
650
+ <div class="p-4 border border-gray-200 rounded-lg hover:border-indigo-300 cursor-pointer">
651
+ <div class="flex items-center mb-3">
652
+ <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
653
+ <i class="fas fa-lock text-blue-600"></i>
654
+ </div>
655
+ <h4 class="font-medium">Privacy & Security</h4>
656
+ </div>
657
+ <p class="text-sm text-gray-600">Understand how we protect your data and privacy</p>
658
+ </div>
659
+
660
+ <div class="p-4 border border-gray-200 rounded-lg hover:border-indigo-300 cursor-pointer">
661
+ <div class="flex items-center mb-3">
662
+ <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
663
+ <i class="fas fa-bug text-green-600"></i>
664
+ </div>
665
+ <h4 class="font-medium">Troubleshooting</h4>
666
+ </div>
667
+ <p class="text-sm text-gray-600">Fix common issues and problems</p>
668
+ </div>
669
+
670
+ <div class="p-4 border border-gray-200 rounded-lg hover:border-indigo-300 cursor-pointer">
671
+ <div class="flex items-center mb-3">
672
+ <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3">
673
+ <i class="fas fa-question text-purple-600"></i>
674
+ </div>
675
+ <h4 class="font-medium">FAQs</h4>
676
+ </div>
677
+ <p class="text-sm text-gray-600">Find answers to frequently asked questions</p>
678
+ </div>
679
+ </div>
680
+ </div>
681
+
682
+ <div class="bg-white rounded-xl shadow-sm p-6 mb-8">
683
+ <h3 class="text-lg font-semibold text-gray-800 mb-6 flex items-center">
684
+ <i class="fas fa-headset mr-2 text-indigo-600"></i> Contact Support
685
+ </h3>
686
+
687
+ <div class="space-y-6">
688
+ <div>
689
+ <h4 class="font-medium text-gray-800 mb-2">Email Support</h4>
690
+ <p class="text-sm text-gray-600 mb-4">Send us an email and we'll get back to you within 24 hours</p>
691
+ <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">
692
+ <i class="fas fa-envelope mr-2"></i> Email Us
693
+ </button>
694
+ </div>
695
+
696
+ <div>
697
+ <h4 class="font-medium text-gray-800 mb-2">Live Chat</h4>
698
+ <p class="text-sm text-gray-600 mb-4">Chat with a support agent in real-time (available 9AM-5PM)</p>
699
+ <button class="px-4 py-2 border border-indigo-600 text-indigo-600 rounded-lg hover:bg-indigo-50">
700
+ <i class="fas fa-comment-dots mr-2"></i> Start Chat
701
+ </button>
702
+ </div>
703
+
704
+ <div>
705
+ <h4 class="font-medium text-gray-800 mb-2">Community Forum</h4>
706
+ <p class="text-sm text-gray-600 mb-4">Get help from other users in our community</p>
707
+ <button class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50">
708
+ <i class="fas fa-users mr-2"></i> Visit Forum
709
+ </button>
710
+ </div>
711
+ </div>
712
+ </div>
713
+
714
+ <div class="bg-white rounded-xl shadow-sm p-6">
715
+ <h3 class="text-lg font-semibold text-gray-800 mb-6 flex items-center">
716
+ <i class="fas fa-info-circle mr-2 text-indigo-600"></i> About
717
+ </h3>
718
+
719
+ <div class="space-y-4">
720
+ <div class="flex justify-between">
721
+ <span class="text-gray-600">App Version</span>
722
+ <span class="font-medium">2.4.1</span>
723
+ </div>
724
+ <div class="flex justify-between">
725
+ <span class="text-gray-600">Last Updated</span>
726
+ <span class="font-medium">June 15, 2023</span>
727
+ </div>
728
+ <div class="flex justify-between">
729
+ <span class="text-gray-600">Terms of Service</span>
730
+ <a href="#" class="text-indigo-600 hover:underline">View</a>
731
+ </div>
732
+ <div class="flex justify-between">
733
+ <span class="text-gray-600">Privacy Policy</span>
734
+ <a href="#" class="text-indigo-600 hover:underline">View</a>
735
+ </div>
736
+ <div class="flex justify-between">
737
+ <span class="text-gray-600">Open Source Licenses</span>
738
+ <a href="#" class="text-indigo-600 hover:underline">View</a>
739
+ </div>
740
+ </div>
741
+ </div>
742
+ </div>
743
+ </div>
744
+ </div>
745
+ </div>
746
+
747
+ <script>
748
+ // Tab functionality
749
+ function openTab(evt, tabName) {
750
+ // Hide all tab content
751
+ const tabContents = document.getElementsByClassName("tab-content");
752
+ for (let i = 0; i < tabContents.length; i++) {
753
+ tabContents[i].classList.remove("active");
754
+ }
755
+
756
+ // Remove active class from all tab buttons
757
+ const tabButtons = document.getElementsByClassName("tab-button");
758
+ for (let i = 0; i < tabButtons.length; i++) {
759
+ tabButtons[i].classList.remove("text-indigo-700", "bg-indigo-50");
760
+ tabButtons[i].classList.add("text-gray-600", "hover:bg-gray-100");
761
+ }
762
+
763
+ // Show the current tab and add active class to the button
764
+ document.getElementById(tabName).classList.add("active");
765
+ evt.currentTarget.classList.add("text-indigo-700", "bg-indigo-50");
766
+ evt.currentTarget.classList.remove("text-gray-600", "hover:bg-gray-100");
767
+
768
+ // Close mobile menu if open
769
+ document.getElementById('mobileSidebar').classList.add('hidden');
770
+ }
771
+
772
+ // Mobile menu toggle
773
+ document.getElementById('mobileMenuButton').addEventListener('click', function() {
774
+ document.getElementById('mobileSidebar').classList.remove('hidden');
775
+ setTimeout(() => {
776
+ document.querySelector('#mobileSidebar > div').classList.remove('-translate-x-full');
777
+ }, 10);
778
+ });
779
+
780
+ document.getElementById('closeMobileMenu').addEventListener('click', function() {
781
+ document.querySelector('#mobileSidebar > div').classList.add('-translate-x-full');
782
+ setTimeout(() => {
783
+ document.getElementById('mobileSidebar').classList.add('hidden');
784
+ }, 300);
785
+ });
786
+
787
+ // Close mobile menu when clicking outside
788
+ document.getElementById('mobileSidebar').addEventListener('click', function(e) {
789
+ if (e.target === this) {
790
+ document.querySelector('#mobileSidebar > div').classList.add('-translate-x-full');
791
+ setTimeout(() => {
792
+ document.getElementById('mobileSidebar').classList.add('hidden');
793
+ }, 300);
794
+ }
795
+ });
796
+
797
+ // Initialize first tab as active
798
+ document.addEventListener('DOMContentLoaded', function() {
799
+ // Set first tab button as active
800
+ const firstTabButton = document.querySelector('.tab-button');
801
+ if (firstTabButton) {
802
+ firstTabButton.classList.add("text-indigo-700", "bg-indigo-50");
803
+ firstTabButton.classList.remove("text-gray-600", "hover:bg-gray-100");
804
+ }
805
+ });
806
+ </script>
807
+ <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=mrpaswan7/setting-page" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
808
+ </html>