Hugging Face's logo

Spaces:
dai
/
suke
Running

App Files Community
dai commited on
Commit
4891c21
·
verified ·
1 Parent(s): 3755cf1

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +932 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Dai
3
- emoji: 📊
4
- colorFrom: indigo
5
- colorTo: pink
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: dai
3
+ emoji: 🐳
4
+ colorFrom: green
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,932 @@
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>Neon Portal</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
+ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&display=swap');
11
+
12
+ :root {
13
+ --neon-blue: #05d9e8;
14
+ --neon-pink: #ff2a6d;
15
+ --neon-purple: #d300c5;
16
+ --dark-bg: #05010e;
17
+ --darker-bg: #0d0221;
18
+ --nav-dark: #12092a;
19
+ }
20
+
21
+ body {
22
+ font-family: 'Orbitron', sans-serif;
23
+ background-color: var(--dark-bg);
24
+ color: white;
25
+ min-height: 100vh;
26
+ background-image: var(--bg-image, none);
27
+ background-size: cover;
28
+ background-attachment: fixed;
29
+ background-position: center;
30
+ }
31
+
32
+ .glitch-effect {
33
+ position: relative;
34
+ color: white;
35
+ }
36
+
37
+ .glitch-effect::before, .glitch-effect::after {
38
+ content: attr(data-text);
39
+ position: absolute;
40
+ top: 0;
41
+ left: 0;
42
+ width: 100%;
43
+ height: 100%;
44
+ opacity: 0.8;
45
+ }
46
+
47
+ .glitch-effect::before {
48
+ color: var(--neon-blue);
49
+ z-index: -1;
50
+ animation: glitch-effect 3s infinite;
51
+ }
52
+
53
+ .glitch-effect::after {
54
+ color: var(--neon-pink);
55
+ z-index: -2;
56
+ animation: glitch-effect 2s infinite reverse;
57
+ }
58
+
59
+ @keyframes glitch-effect {
60
+ 0% { transform: translate(0); }
61
+ 20% { transform: translate(-3px, 3px); }
62
+ 40% { transform: translate(-3px, -3px); }
63
+ 60% { transform: translate(3px, 3px); }
64
+ 80% { transform: translate(3px, -3px); }
65
+ 100% { transform: translate(0); }
66
+ }
67
+
68
+ .neon-text-blue {
69
+ color: var(--neon-blue);
70
+ text-shadow: 0 0 5px var(--neon-blue), 0 0 10px var(--neon-blue), 0 0 20px var(--neon-blue);
71
+ }
72
+
73
+ .neon-text-pink {
74
+ color: var(--neon-pink);
75
+ text-shadow: 0 0 5px var(--neon-pink), 0 0 10px var(--neon-pink), 0 0 20px var(--neon-pink);
76
+ }
77
+
78
+ .neon-text-purple {
79
+ color: var(--neon-purple);
80
+ text-shadow: 0 0 5px var(--neon-purple), 0 0 10px var(--neon-purple), 0 0 20px var(--neon-purple);
81
+ }
82
+
83
+ .neon-border-blue {
84
+ border: 1px solid var(--neon-blue);
85
+ box-shadow: 0 0 5px var(--neon-blue), inset 0 0 5px var(--neon-blue), 0 0 20px var(--neon-blue);
86
+ }
87
+
88
+ .neon-border-pink {
89
+ border: 1px solid var(--neon-pink);
90
+ box-shadow: 0 0 5px var(--neon-pink), inset 0 0 5px var(--neon-pink), 0 0 20px var(--neon-pink);
91
+ }
92
+
93
+ .neon-hover:hover {
94
+ text-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor;
95
+ transition: text-shadow 0.3s ease;
96
+ }
97
+
98
+ .nav-item:hover {
99
+ transform: translateY(-2px);
100
+ transition: transform 0.3s ease;
101
+ }
102
+
103
+ .dropdown {
104
+ display: none;
105
+ background: var(--nav-dark);
106
+ border: 1px solid var(--neon-blue);
107
+ box-shadow: 0 0 20px var(--neon-blue);
108
+ transition: all 0.3s ease;
109
+ z-index: 100;
110
+ }
111
+
112
+ .group:hover .dropdown {
113
+ display: block;
114
+ }
115
+
116
+ .portal-card {
117
+ transition: all 0.3s ease;
118
+ backdrop-filter: blur(10px);
119
+ perspective: 1000px;
120
+ transform-style: preserve-3d;
121
+ }
122
+
123
+ .portal-card:hover {
124
+ transform: translateY(-5px) scale(1.05);
125
+ box-shadow: 0 0 20px currentColor;
126
+ }
127
+
128
+ .portal-card-inner {
129
+ transition: transform 0.6s;
130
+ transform-style: preserve-3d;
131
+ }
132
+
133
+ .portal-card:hover .portal-card-inner {
134
+ transform: rotateY(15deg) rotateX(10deg);
135
+ }
136
+
137
+ .modal-overlay {
138
+ background: rgba(5, 1, 14, 0.9);
139
+ backdrop-filter: blur(5px);
140
+ animation: fadeIn 0.3s ease;
141
+ }
142
+
143
+ .modal-content {
144
+ animation: slideIn 0.3s ease;
145
+ background: var(--darker-bg);
146
+ }
147
+
148
+ @keyframes fadeIn {
149
+ from { opacity: 0; }
150
+ to { opacity: 1; }
151
+ }
152
+
153
+ @keyframes slideIn {
154
+ from { transform: translateY(-50px); opacity: 0; }
155
+ to { transform: translateY(0); opacity: 1; }
156
+ }
157
+
158
+ .color-option {
159
+ width: 30px;
160
+ height: 30px;
161
+ border-radius: 50%;
162
+ display: inline-block;
163
+ margin: 5px;
164
+ cursor: pointer;
165
+ transition: all 0.3s ease;
166
+ position: relative;
167
+ }
168
+
169
+ .color-option:hover {
170
+ transform: scale(1.1);
171
+ }
172
+
173
+ .color-option.selected::after {
174
+ content: "✓";
175
+ position: absolute;
176
+ top: 50%;
177
+ left: 50%;
178
+ transform: translate(-50%, -50%);
179
+ color: white;
180
+ font-weight: bold;
181
+ }
182
+
183
+ .custom-color-toggle {
184
+ padding: 8px;
185
+ cursor: pointer;
186
+ border-radius: 5px;
187
+ margin-top: 10px;
188
+ text-align: center;
189
+ border: 1px dashed var(--neon-blue);
190
+ }
191
+
192
+ .custom-color-toggle:hover {
193
+ background: rgba(5, 217, 232, 0.1);
194
+ }
195
+
196
+ .custom-color-input {
197
+ width: 100%;
198
+ height: 30px;
199
+ border: none;
200
+ background: transparent;
201
+ cursor: pointer;
202
+ margin-top: 10px;
203
+ }
204
+
205
+ .bg-preview, .icon-preview {
206
+ max-width: 100%;
207
+ height: auto;
208
+ margin-top: 10px;
209
+ border-radius: 5px;
210
+ display: none;
211
+ }
212
+
213
+ .grid-lines {
214
+ position: fixed;
215
+ top: 0;
216
+ left: 0;
217
+ width: 100%;
218
+ height: 100%;
219
+ background-image: linear-gradient(to right, rgba(5, 217, 232, 0.05) 1px, transparent 1px),
220
+ linear-gradient(to bottom, rgba(5, 217, 232, 0.05) 1px, transparent 1px);
221
+ background-size: 30px 30px;
222
+ z-index: -1;
223
+ pointer-events: none;
224
+ }
225
+
226
+ .neon-underline {
227
+ position: relative;
228
+ display: inline-block;
229
+ }
230
+
231
+ .neon-underline::after {
232
+ content: '';
233
+ position: absolute;
234
+ bottom: -5px;
235
+ left: 0;
236
+ width: 100%;
237
+ height: 2px;
238
+ background: linear-gradient(to right, var(--neon-blue), var(--neon-pink));
239
+ transform: scaleX(0);
240
+ transform-origin: bottom right;
241
+ transition: transform 0.5s ease-out;
242
+ }
243
+
244
+ .neon-underline:hover::after {
245
+ transform: scaleX(1);
246
+ transform-origin: bottom left;
247
+ }
248
+
249
+ /* Holographic effect */
250
+ .holographic-effect {
251
+ position: relative;
252
+ overflow: hidden;
253
+ }
254
+
255
+ .holographic-effect::before {
256
+ content: '';
257
+ position: absolute;
258
+ top: -50%;
259
+ left: -50%;
260
+ width: 200%;
261
+ height: 200%;
262
+ background: linear-gradient(
263
+ to bottom right,
264
+ rgba(255, 255, 255, 0) 45%,
265
+ rgba(5, 217, 232, 0.2) 50%,
266
+ rgba(255, 255, 255, 0) 55%
267
+ );
268
+ transform: rotate(30deg);
269
+ animation: holographic 6s linear infinite;
270
+ }
271
+
272
+ @keyframes holographic {
273
+ 0% { transform: translateY(-100%) rotate(30deg); }
274
+ 100% { transform: translateY(100%) rotate(30deg); }
275
+ }
276
+ </style>
277
+ </head>
278
+ <body class="min-h-screen relative">
279
+ <!-- Grid lines effect -->
280
+ <div class="grid-lines"></div>
281
+
282
+ <!-- Navbar -->
283
+ <nav class="navbar fixed top-0 left-0 right-0 z-50 bg-[#05010e]/90 backdrop-blur-md border-b border-[#12092a]">
284
+ <div class="container mx-auto px-4">
285
+ <div class="flex justify-between items-center h-16">
286
+ <!-- Logo -->
287
+ <div class="flex items-center">
288
+ <div class="neon-border-pink rounded-full p-2">
289
+ <i class="fas fa-terminal text-xl neon-text-pink"></i>
290
+ </div>
291
+ <span class="ml-3 font-bold text-xl neon-text-blue">NEON PORTAL</span>
292
+ </div>
293
+
294
+ <!-- Nav Items -->
295
+ <div class="hidden md:flex items-center space-x-6">
296
+ <div class="nav-item relative group">
297
+ <button class="flex items-center space-x-1 neon-text-blue neon-underline">
298
+ <i class="fas fa-cog"></i>
299
+ <span>Settings</span>
300
+ <i class="fas fa-chevron-down text-xs"></i>
301
+ </button>
302
+ <div class="dropdown absolute right-0 mt-2 w-80 rounded-lg dropdown-content p-4">
303
+ <h3 class="text-sm neon-text-pink mb-3 uppercase tracking-wider">Portal Management</h3>
304
+ <button onclick="showAddLinkModal()"
305
+ class="w-full py-2 neon-border-blue rounded flex items-center justify-center mb-3 hover:bg-[#05d9e8] hover:text-[#0d0221] transition-all">
306
+ <i class="fas fa-plus mr-2"></i>Add New Portal
307
+ </button>
308
+
309
+ <h3 class="text-sm neon-text-blue mt-4 mb-3 uppercase tracking-wider">Customization</h3>
310
+ <div class="space-y-4">
311
+ <div>
312
+ <label for="bg-image" class="block mb-2 text-xs uppercase tracking-wider">Background Image URL</label>
313
+ <div class="flex">
314
+ <input type="url" id="bg-image" class="flex-grow p-2 rounded-l-lg bg-[#12092a]"
315
+ placeholder="https://example.com/image.jpg">
316
+ <button onclick="setBackgroundImage()"
317
+ class="px-3 py-2 bg-[#05d9e8] text-[#0d0221] rounded-r-lg hover:bg-[#00c4d2] transition-all">
318
+ <i class="fas fa-check"></i>
319
+ </button>
320
+ </div>
321
+ <div class="bg-upload-container">
322
+ <label class="block mt-2 text-xs uppercase tracking-wider">Upload Background</label>
323
+ <input type="file" id="bg-upload" class="w-full mt-1" accept="image/*">
324
+ <img id="bg-preview" class="bg-preview" src="#" alt="Background Preview">
325
+ <button onclick="applyUploadedBackground()"
326
+ class="mt-2 px-3 py-1 rounded border border-[#ff2a6d] hover:bg-[#ff2a6d]/20 transition-all text-xs">
327
+ Apply Uploaded Image
328
+ </button>
329
+ </div>
330
+ <button onclick="resetBackgroundImage()"
331
+ class="mt-2 text-xs px-3 py-1 rounded border border-[#ff2a6d] hover:bg-[#ff2a6d]/20 transition-all">
332
+ Reset Background
333
+ </button>
334
+ </div>
335
+
336
+ <div>
337
+ <label class="block mb-2 text-xs uppercase tracking-wider">Theme Color</label>
338
+ <div class="color-picker-container neon-border-blue rounded-lg p-4">
339
+ <div class="color-option selected" style="background-color: #05d9e8;"
340
+ onclick="selectThemeColor('#05d9e8', this)"></div>
341
+ <div class="color-option" style="background-color: #ff2a6d;"
342
+ onclick="selectThemeColor('#ff2a6d', this)"></div>
343
+ <div class="color-option" style="background-color: #d300c5;"
344
+ onclick="selectThemeColor('#d300c5', this)"></div>
345
+ <div class="color-option" style="background-color: #00ff9d;"
346
+ onclick="selectThemeColor('#00ff9d', this)"></div>
347
+ <div class="color-option" style="background-color: #ffcc00;"
348
+ onclick="selectThemeColor('#ffcc00', this)"></div>
349
+ <div class="color-option" style="background-color: #ff3333;"
350
+ onclick="selectThemeColor('#ff3333', this)"></div>
351
+ <div class="color-option" style="background-color: #4267B2;"
352
+ onclick="selectThemeColor('#4267B2', this)"></div>
353
+ <div class="color-option" style="background-color: #9147ff;"
354
+ onclick="selectThemeColor('#9147ff', this)"></div>
355
+ <div class="color-option" style="background-color: #25F4EE;"
356
+ onclick="selectThemeColor('#25F4EE', this)"></div>
357
+ <div class="custom-color-toggle w-full" onclick="toggleCustomColorInput()">
358
+ Custom Color
359
+ </div>
360
+ <div id="custom-color-wrapper" class="custom-color-option" style="display: none;">
361
+ <input type="color" id="custom-color" class="custom-color-input">
362
+ <button class="custom-color-confirm mt-2 px-3 py-1 rounded border border-[#05d9e8] hover:bg-[#05d9e8]/20 transition-all" onclick="confirmCustomColor()">OK</button>
363
+ </div>
364
+ </div>
365
+ </div>
366
+ </div>
367
+
368
+ <h3 class="text-sm neon-text-blue mt-4 mb-3 uppercase tracking-wider">System Info</h3>
369
+ <div class="text-xs space-y-2">
370
+ <div class="flex justify-between">
371
+ <span>Version</span>
372
+ <span class="text-[#05d9e8]">v2.3.5</span>
373
+ </div>
374
+ <div class="flex justify-between">
375
+ <span>Portals</span>
376
+ <span id="portal-count" class="text-[#ff2a6d]">0</span>
377
+ </div>
378
+ </div>
379
+ </div>
380
+ </div>
381
+
382
+ <div class="nav-item relative group">
383
+ <button class="flex items-center space-x-1 neon-text-blue neon-underline">
384
+ <i class="fas fa-address-card"></i>
385
+ <span>Contact</span>
386
+ <i class="fas fa-chevron-down text-xs"></i>
387
+ </button>
388
+ <div class="dropdown absolute right-0 mt-2 w-72 rounded-lg dropdown-content p-4">
389
+ <h3 class="text-sm neon-text-pink mb-3 uppercase tracking-wider">Connection Channels</h3>
390
+ <div class="space-y-3">
391
+ <div class="contact-card p-3 rounded border border-[#05d9e8] hover:bg-[#05d9e8]/10 transition-all">
392
+ <div class="flex items-center">
393
+ <i class="fas fa-envelope text-lg text-[#05d9e8] mr-3"></i>
394
+ <div>
395
+ <h4 class="font-bold">Encrypted Mail</h4>
396
+ <a href="mailto:contact@neonportal.dev"
397
+ class="text-sm hover:underline block">contact@neonportal.dev</a>
398
+ </div>
399
+ </div>
400
+ </div>
401
+
402
+ <div class="contact-card p-3 rounded border border-[#ff2a6d] hover:bg-[#ff2a6d]/10 transition-all">
403
+ <div class="flex items-center">
404
+ <i class="fab fa-discord text-lg text-[#5865F2] mr-3"></i>
405
+ <div>
406
+ <h4 class="font-bold">Discord</h4>
407
+ <span class="text-sm">NeonPortal#0001</span>
408
+ </div>
409
+ </div>
410
+ </div>
411
+
412
+ <div class="contact-card p-3 rounded border border-[#25F4EE] hover:bg-[#25F4EE]/10 transition-all">
413
+ <div class="flex items-center">
414
+ <i class="fab fa-twitter text-lg text-[#1DA1F2] mr-3"></i>
415
+ <div>
416
+ <h4 class="font-bold">Twitter</h4>
417
+ <a href="https://twitter.com/neonportal" target="_blank" class="text-sm hover:underline block">@neonportal</a>
418
+ </div>
419
+ </div>
420
+ </div>
421
+
422
+ <div class="contact-card p-3 rounded border border-[#9147ff] hover:bg-[#9147ff]/10 transition-all">
423
+ <div class="flex items-center">
424
+ <i class="fab fa-patreon text-lg text-[#FF424D] mr-3"></i>
425
+ <div>
426
+ <h4 class="font-bold">Support</h4>
427
+ <a href="https://patreon.com/neonportal" target="_blank" class="text-sm hover:underline block">Patreon</a>
428
+ </div>
429
+ </div>
430
+ </div>
431
+ </div>
432
+ </div>
433
+ </div>
434
+ </div>
435
+
436
+ <!-- Mobile menu button -->
437
+ <div class="md:hidden">
438
+ <button id="mobile-menu-button" class="neon-text-pink text-2xl focus:outline-none">
439
+ <i class="fas fa-bars"></i>
440
+ </button>
441
+ </div>
442
+ </div>
443
+ </div>
444
+
445
+ <!-- Mobile menu -->
446
+ <div id="mobile-menu" class="md:hidden hidden bg-[#05010e] border-t border-[#ff2a6d]">
447
+ <div class="px-2 py-3 space-y-1">
448
+ <button onclick="showAddLinkModal()" class="block px-3 py-2 rounded-md neon-text-blue w-full text-left hover:bg-[#05d9e8]/20">
449
+ <i class="fas fa-plus mr-2"></i>Add New Portal
450
+ </button>
451
+ <button class="block px-3 py-2 rounded-md neon-text-blue w-full text-left hover:bg-[#05d9e8]/20">
452
+ <i class="fas fa-cog mr-2"></i>Settings
453
+ </button>
454
+ <button class="block px-3 py-2 rounded-md neon-text-blue w-full text-left hover:bg-[#05d9e8]/20">
455
+ <i class="fas fa-address-card mr-2"></i>Contact
456
+ </button>
457
+ <div class="px-3 py-2">
458
+ <label class="block text-xs neon-text-blue mb-1">Background Image</label>
459
+ <div class="flex mb-2">
460
+ <input type="url" id="bg-image-mobile" class="flex-grow p-2 rounded-l-lg bg-[#12092a]"
461
+ placeholder="Image URL">
462
+ <button onclick="setBackgroundImage()"
463
+ class="px-3 py-2 bg-[#05d9e8] text-[#0d0221] rounded-r-lg hover:bg-[#00c4d2] transition-all">
464
+ <i class="fas fa-check"></i>
465
+ </button>
466
+ </div>
467
+ <button onclick="resetBackgroundImage()"
468
+ class="w-full px-3 py-1.5 text-xs rounded border border-[#ff2a6d] hover:bg-[#ff2a6d]/20 transition-all">
469
+ Reset Background
470
+ </button>
471
+ </div>
472
+ </div>
473
+ </div>
474
+ </nav>
475
+
476
+ <!-- Main container -->
477
+ <div class="container mx-auto px-4 py-8 relative z-10 mt-20">
478
+ <!-- Header -->
479
+ <header class="text-center mb-12">
480
+ <div class="relative inline-block">
481
+ <h1 class="glitch-effect text-5xl md:text-7xl font-bold mb-4" data-text="NEON PORTAL">NEON PORTAL</h1>
482
+ <span
483
+ class="absolute -bottom-3 left-1/2 transform -translate-x-1/2 w-48 h-1 bg-gradient-to-r from-transparent via-[#05d9e8] to-transparent"></span>
484
+ <span
485
+ class="absolute -bottom-5 left-1/2 transform -translate-x-1/2 w-32 h-1 bg-gradient-to-r from-transparent via-[#ff2a6d] to-transparent"></span>
486
+ </div>
487
+ <p class="text-xl neon-text-purple uppercase tracking-wider mt-8">Your gateway to the digital neonverse</p>
488
+ </header>
489
+
490
+ <!-- Time and date display -->
491
+ <div class="flex justify-center mb-12">
492
+ <div class="neon-border-blue rounded-lg p-4 text-center backdrop-blur-sm bg-[#0d0221]/50 holographic-effect">
493
+ <div id="time" class="text-3xl font-bold neon-text-blue">00:00:00</div>
494
+ <div id="date" class="text-lg uppercase tracking-wider mt-1">Loading...</div>
495
+ </div>
496
+ </div>
497
+
498
+ <!-- Portals grid -->
499
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6 mb-12" id="portals-grid">
500
+ <!-- Default portals will be added here by JavaScript -->
501
+ </div>
502
+ </div>
503
+
504
+ <!-- Add Portal Modal -->
505
+ <div id="add-portal-modal" class="fixed inset-0 flex items-center justify-center z-50 hidden modal-overlay">
506
+ <div class="modal-content neon-border-blue rounded-xl p-8 max-w-md w-full mx-4 relative">
507
+ <button id="close-portal-modal"
508
+ class="absolute top-4 right-4 text-xl hover:text-[#ff2a6d] transition-all">×</button>
509
+ <h2 class="text-2xl neon-text-pink mb-6 uppercase tracking-wider">Create New Portal</h2>
510
+
511
+ <form id="portal-form" class="space-y-6">
512
+ <div>
513
+ <label for="portal-name" class="block mb-2 neon-text-blue uppercase text-sm tracking-wider">Portal Name</label>
514
+ <input type="text" id="portal-name" class="w-full p-3 rounded-lg bg-[#12092a] focus:outline-none focus:border focus:border-[#05d9e8]" required>
515
+ </div>
516
+
517
+ <div>
518
+ <label for="portal-url"
519
+ class="block mb-2 neon-text-blue uppercase text-sm tracking-wider">Destination URL</label>
520
+ <input type="url" id="portal-url" class="w-full p-3 rounded-lg bg-[#12092a] focus:outline-none focus:border focus:border-[#05d9e8]" placeholder="https://"
521
+ required>
522
+ </div>
523
+
524
+ <div>
525
+ <label class="block mb-2 neon-text-blue uppercase text-sm tracking-wider">Icon</label>
526
+ <select id="portal-icon" class="w-full p-3 rounded-lg bg-[#0d0221] border border-[#05d9e8] focus:outline-none focus:border focus:border-[#ff2a6d]">
527
+ <option value="fab fa-youtube">YouTube</option>
528
+ <option value="fab fa-twitter">Twitter</option>
529
+ <option value="fab fa-github">GitHub</option>
530
+ <option value="fab fa-reddit">Reddit</option>
531
+ <option value="fab fa-discord">Discord</option>
532
+ <option value="fab fa-facebook">Facebook</option>
533
+ <option value="fab fa-google-drive">Drive</option>
534
+ <option value="fas fa-envelope">Mail</option>
535
+ <option value="fas fa-music">Music</option>
536
+ <option value="fas fa-gamepad">Games</option>
537
+ <option value="fas fa-film">Movies</option>
538
+ <option value="fas fa-newspaper">News</option>
539
+ <option value="fas fa-shopping-cart">Shop</option>
540
+ <option value="custom-icon">Custom Icon</option>
541
+ </select>
542
+
543
+ <div id="custom-icon-options" class="custom-icon-option mt-3" style="display: none;">
544
+ <div class="flex space-x-4">
545
+ <div class="flex-1">
546
+ <label class="block mb-2 text-xs uppercase tracking-wider">Upload Icon</label>
547
+ <input type="file" id="icon-upload" class="w-full" accept="image/*">
548
+ </div>
549
+ <div class="flex-1">
550
+ <label class="block mb-2 text-xs uppercase tracking-wider">Icon URL</label>
551
+ <input type="url" id="icon-url" class="w-full p-2 rounded bg-[#0d0221]"
552
+ placeholder="https://example.com/icon.png">
553
+ </div>
554
+ </div>
555
+ <img id="icon-preview" class="icon-preview" src="#" alt="Icon Preview">
556
+ </div>
557
+ </div>
558
+
559
+ <div>
560
+ <label class="block mb-2 neon-text-blue uppercase text-sm tracking-wider">Color</label>
561
+ <div class="color-picker-container neon-border-blue rounded-lg p-4">
562
+ <div class="color-option" style="background-color: #ff2a6d;"
563
+ onclick="selectPortalColor('#ff2a6d', this)"></div>
564
+ <div class="color-option selected" style="background-color: #05d9e8;"
565
+ onclick="selectPortalColor('#05d9e8', this)"></div>
566
+ <div class="color-option" style="background-color: #d300c5;"
567
+ onclick="selectPortalColor('#d300c5', this)"></div>
568
+ <div class="color-option" style="background-color: #00ff9d;"
569
+ onclick="selectPortalColor('#00ff9d', this)"></div>
570
+ <div class="color-option" style="background-color: #ffcc00;"
571
+ onclick="selectPortalColor('#ffcc00', this)"></div>
572
+ <div class="color-option" style="background-color: #ffffff;"
573
+ onclick="selectPortalColor('#ffffff', this)"></div>
574
+ <div class="color-option" style="background-color: #4267B2;"
575
+ onclick="selectPortalColor('#4267B2', this)"></div>
576
+ <div class="color-option" style="background-color: #9147ff;"
577
+ onclick="selectPortalColor('#9147ff', this)"></div>
578
+ <div class="custom-color-toggle w-full" onclick="togglePortalCustomColorInput()">
579
+ Custom Color
580
+ </div>
581
+ <input type="color" id="portal-custom-color" class="custom-color-input"
582
+ onchange="applyCustomPortalColor(this.value)">
583
+ </div>
584
+ <input type="hidden" id="portal-color" value="#05d9e8">
585
+ </div>
586
+
587
+ <div class="flex justify-end space-x-3">
588
+ <button type="button" onclick="document.getElementById('add-portal-modal').classList.add('hidden')"
589
+ class="px-4 py-2 rounded-lg border border-[#ff2a6d] hover:bg-[#ff2a6d] hover:text-white transition-all">
590
+ Cancel
591
+ </button>
592
+ <button type="submit"
593
+ class="px-6 py-2 neon-border-blue rounded-lg hover:bg-[#05d9e8] hover:text-[#0d0221] transition-all font-bold">
594
+ Create Portal
595
+ </button>
596
+ </div>
597
+ </form>
598
+ </div>
599
+ </div>
600
+
601
+ <script>
602
+ // Initialize default portals
603
+ const defaultPortals = [
604
+ { name: 'YouTube', url: 'https://youtube.com', icon: 'fab fa-youtube', color: '#ff0000' },
605
+ { name: 'Twitter', url: 'https://twitter.com', icon: 'fab fa-twitter', color: '#1DA1F2' },
606
+ { name: 'GitHub', url: 'https://github.com', icon: 'fab fa-github', color: '#ffffff' },
607
+ { name: 'Reddit', url: 'https://reddit.com', icon: 'fab fa-reddit', color: '#FF5700' },
608
+ { name: 'Discord', url: 'https://discord.com', icon: 'fab fa-discord', color: '#5865F2' },
609
+ { name: 'Google Drive', url: 'https://drive.google.com', icon: 'fab fa-google-drive', color: '#34A853' },
610
+ { name: 'Gmail', url: 'https://mail.google.com', icon: 'fas fa-envelope', color: '#EA4335' },
611
+ { name: 'Spotify', url: 'https://open.spotify.com', icon: 'fas fa-music', color: '#1DB954' }
612
+ ];
613
+
614
+ // DOM elements
615
+ const portalsGrid = document.getElementById('portals-grid');
616
+ const portalForm = document.getElementById('portal-form');
617
+ const portalCount = document.getElementById('portal-count');
618
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
619
+ const mobileMenu = document.getElementById('mobile-menu');
620
+ const timeDisplay = document.getElementById('time');
621
+ const dateDisplay = document.getElementById('date');
622
+ const portalIconSelect = document.getElementById('portal-icon');
623
+ const customIconOptions = document.getElementById('custom-icon-options');
624
+ const bgUpload = document.getElementById('bg-upload');
625
+ const bgPreview = document.getElementById('bg-preview');
626
+ const iconUpload = document.getElementById('icon-upload');
627
+ const iconPreview = document.getElementById('icon-preview');
628
+
629
+ // Current state
630
+ let portals = JSON.parse(localStorage.getItem('portals')) || defaultPortals;
631
+ let currentThemeColor = '#05d9e8'; // Default neon blue
632
+ let currentBgImage = localStorage.getItem('bgImage') || '';
633
+
634
+ // Initialize the app
635
+ document.addEventListener('DOMContentLoaded', function() {
636
+ renderPortals();
637
+ updateTime();
638
+ setInterval(updateTime, 1000);
639
+ loadBackgroundImage();
640
+
641
+ // Mobile menu toggle
642
+ mobileMenuButton.addEventListener('click', function() {
643
+ mobileMenu.classList.toggle('hidden');
644
+ });
645
+
646
+ // Event listeners for form
647
+ portalForm.addEventListener('submit', handlePortalFormSubmit);
648
+
649
+ // Show custom icon options when custom icon is selected
650
+ portalIconSelect.addEventListener('change', function() {
651
+ if (this.value === 'custom-icon') {
652
+ customIconOptions.style.display = 'block';
653
+ } else {
654
+ customIconOptions.style.display = 'none';
655
+ }
656
+ });
657
+
658
+ // Image preview for background upload
659
+ bgUpload.addEventListener('change', function(e) {
660
+ const file = e.target.files[0];
661
+ if (file) {
662
+ const reader = new FileReader();
663
+ reader.onload = function(event) {
664
+ bgPreview.src = event.target.result;
665
+ bgPreview.style.display = 'block';
666
+ };
667
+ reader.readAsDataURL(file);
668
+ }
669
+ });
670
+
671
+ // Image preview for custom icon upload
672
+ iconUpload.addEventListener('change', function(e) {
673
+ const file = e.target.files[0];
674
+ if (file) {
675
+ const reader = new FileReader();
676
+ reader.onload = function(event) {
677
+ iconPreview.src = event.target.result;
678
+ iconPreview.style.display = 'block';
679
+ };
680
+ reader.readAsDataURL(file);
681
+ }
682
+ });
683
+ });
684
+
685
+ // Render all portals
686
+ function renderPortals() {
687
+ portalsGrid.innerHTML = '';
688
+
689
+ portals.forEach((portal, index) => {
690
+ const portalElement = document.createElement('div');
691
+
692
+ // Apply the portal's color for text and border glow
693
+ const textColorStyle = `color: ${portal.color}; text-shadow: 0 0 5px ${portal.color}, 0 0 10px ${portal.color};`;
694
+ const borderStyle = `border: 1px solid ${portal.color}; box-shadow: 0 0 5px ${portal.color}, inset 0 0 5px ${portal.color}, 0 0 20px ${portal.color};`;
695
+
696
+ portalElement.innerHTML = `
697
+ <div class="portal-card h-full" style="${borderStyle}">
698
+ <a href="${portal.url}" target="_blank" class="block h-full p-6 rounded-lg text-center relative overflow-hidden backdrop-blur-sm bg-[#0d0221]/50 transition-all duration-300">
699
+ <div class="portal-card-inner">
700
+ ${portal.icon.startsWith('http') ?
701
+ `<img src="${portal.icon}" class="mx-auto h-12 w-12 mb-4" alt="${portal.name} icon">` :
702
+ `<i class="${portal.icon} text-4xl mb-4" style="${textColorStyle}"></i>`}
703
+ <h3 class="font-bold uppercase tracking-wider" style="${textColorStyle}">${portal.name}</h3>
704
+ </div>
705
+ <button onclick="deletePortal(${index}); event.preventDefault();"
706
+ class="absolute top-1 right-1 text-xs text-red-500 hover:text-red-400">
707
+ <i class="fas fa-times"></i>
708
+ </button>
709
+ </a>
710
+ </div>
711
+ `;
712
+
713
+ portalsGrid.appendChild(portalElement);
714
+ });
715
+
716
+ // Update portal count
717
+ portalCount.textContent = portals.length;
718
+ }
719
+
720
+ // Handle form submission
721
+ function handlePortalFormSubmit(e) {
722
+ e.preventDefault();
723
+
724
+ const name = document.getElementById('portal-name').value;
725
+ const url = document.getElementById('portal-url').value;
726
+ let icon = document.getElementById('portal-icon').value;
727
+ const color = document.getElementById('portal-color').value;
728
+
729
+ // Handle custom icon
730
+ if (icon === 'custom-icon') {
731
+ const iconUrl = document.getElementById('icon-url').value;
732
+ const iconFile = document.getElementById('icon-upload').files[0];
733
+
734
+ if (iconUrl) {
735
+ icon = iconUrl;
736
+ } else if (iconFile) {
737
+ const reader = new FileReader();
738
+ reader.onload = function(e) {
739
+ // Convert image to base64 to store in local storage
740
+ icon = e.target.result;
741
+ addPortalToArray(name, url, icon, color);
742
+ };
743
+ reader.readAsDataURL(iconFile);
744
+ return; // Exit early as we'll call addPortalToArray in the callback
745
+ } else {
746
+ alert('Please provide an icon URL or upload an icon');
747
+ return;
748
+ }
749
+ }
750
+
751
+ addPortalToArray(name, url, icon, color);
752
+ }
753
+
754
+ // Add a new portal to the array and update UI
755
+ function addPortalToArray(name, url, icon, color) {
756
+ const newPortal = {
757
+ name: name,
758
+ url: url,
759
+ icon: icon,
760
+ color: color
761
+ };
762
+
763
+ portals.push(newPortal);
764
+ savePortals();
765
+ renderPortals();
766
+ document.getElementById('add-portal-modal').classList.add('hidden');
767
+ resetPortalForm();
768
+ }
769
+
770
+ // Delete a portal
771
+ function deletePortal(index) {
772
+ if (confirm('Are you sure you want to delete this portal?')) {
773
+ portals.splice(index, 1);
774
+ savePortals();
775
+ renderPortals();
776
+ }
777
+ }
778
+
779
+ // Reset portal form
780
+ function resetPortalForm() {
781
+ document.getElementById('portal-form').reset();
782
+ customIconOptions.style.display = 'none';
783
+ iconPreview.style.display = 'none';
784
+ document.getElementById('portal-color').value = '#05d9e8';
785
+ }
786
+
787
+ // Save portals to localStorage
788
+ function savePortals() {
789
+ localStorage.setItem('portals', JSON.stringify(portals));
790
+ }
791
+
792
+ // Show add portal modal
793
+ function showAddLinkModal() {
794
+ document.getElementById('add-portal-modal').classList.remove('hidden');
795
+ mobileMenu.classList.add('hidden');
796
+ }
797
+
798
+ // Update time display
799
+ function updateTime() {
800
+ const now = new Date();
801
+ const timeString = now.toLocaleTimeString();
802
+ const dateString = now.toLocaleDateString(undefined, {
803
+ weekday: 'long',
804
+ year: 'numeric',
805
+ month: 'long',
806
+ day: 'numeric'
807
+ });
808
+
809
+ timeDisplay.textContent = timeString;
810
+ dateDisplay.textContent = dateString;
811
+ }
812
+
813
+ // Select portal color
814
+ function selectPortalColor(color, element) {
815
+ // Remove selected class from all options
816
+ document.querySelectorAll('.color-picker-container .color-option').forEach(el => {
817
+ el.classList.remove('selected');
818
+ });
819
+
820
+ // Add selected class to clicked option
821
+ element.classList.add('selected');
822
+
823
+ // Update hidden input value
824
+ document.getElementById('portal-color').value = color;
825
+ }
826
+
827
+ // Select theme color
828
+ function selectThemeColor(color, element) {
829
+ // Remove selected class from all options
830
+ document.querySelectorAll('.dropdown .color-option').forEach(el => {
831
+ el.classList.remove('selected');
832
+ });
833
+
834
+ // Add selected class to clicked option
835
+ element.classList.add('selected');
836
+
837
+ // Update current theme color
838
+ currentThemeColor = color;
839
+ updateThemeColor(color);
840
+ }
841
+
842
+ // Update theme color
843
+ function updateThemeColor(color) {
844
+ // Update CSS variables
845
+ document.documentElement.style.setProperty('--neon-blue', color);
846
+
847
+ // Update all elements with the neon-blue color classes
848
+ // This is a simplified version - in a real app you might need more comprehensive updates
849
+ const neonElements = document.querySelectorAll('.neon-text-blue, .neon-border-blue');
850
+ neonElements.forEach(el => {
851
+ if (el.classList.contains('neon-text-blue')) {
852
+ el.style.color = color;
853
+ el.style.textShadow = `0 0 5px ${color}, 0 0 10px ${color}, 0 0 20px ${color}`;
854
+ }
855
+ if (el.classList.contains('neon-border-blue')) {
856
+ el.style.borderColor = color;
857
+ el.style.boxShadow = `0 0 5px ${color}, inset 0 0 5px ${color}, 0 0 20px ${color}`;
858
+ }
859
+ });
860
+ }
861
+
862
+ // Toggle custom color input in settings
863
+ function toggleCustomColorInput() {
864
+ const wrapper = document.getElementById('custom-color-wrapper');
865
+ wrapper.style.display = wrapper.style.display === 'none' ? 'block' : 'none';
866
+ }
867
+
868
+ // Toggle custom color input in portal form
869
+ function togglePortalCustomColorInput() {
870
+ const input = document.getElementById('portal-custom-color');
871
+ input.style.display = input.style.display === 'none' ? 'block' : 'none';
872
+ }
873
+
874
+ // Apply custom portal color
875
+ function applyCustomPortalColor(color) {
876
+ selectPortalColor(color, document.querySelector('.portal-form .color-option.selected'));
877
+ }
878
+
879
+ // Confirm custom theme color
880
+ function confirmCustomColor() {
881
+ const customColor = document.getElementById('custom-color').value;
882
+ selectThemeColor(customColor, document.querySelector('.dropdown .color-option.selected'));
883
+ document.getElementById('custom-color-wrapper').style.display = 'none';
884
+ }
885
+
886
+ // Set background image from URL
887
+ function setBackgroundImage() {
888
+ // Check if we're on mobile or desktop
889
+ const bgUrlInput = document.getElementById('bg-image-mobile') || document.getElementById('bg-image');
890
+
891
+ if (bgUrlInput && bgUrlInput.value) {
892
+ currentBgImage = bgUrlInput.value;
893
+ localStorage.setItem('bgImage', currentBgImage);
894
+ document.body.style.backgroundImage = `url('${currentBgImage}')`;
895
+ }
896
+ }
897
+
898
+ // Apply uploaded background
899
+ function applyUploadedBackground() {
900
+ if (bgPreview.src && bgPreview.src !== '#') {
901
+ currentBgImage = bgPreview.src;
902
+ localStorage.setItem('bgImage', currentBgImage);
903
+ document.body.style.backgroundImage = `url('${currentBgImage}')`;
904
+ }
905
+ }
906
+
907
+ // Load background image from localStorage
908
+ function loadBackgroundImage() {
909
+ if (currentBgImage) {
910
+ document.body.style.backgroundImage = `url('${currentBgImage}')`;
911
+ document.body.style.backgroundSize = 'cover';
912
+ document.body.style.backgroundAttachment = 'fixed';
913
+ document.body.style.backgroundColor = 'transparent';
914
+ }
915
+ }
916
+
917
+ // Reset background image
918
+ function resetBackgroundImage() {
919
+ currentBgImage = '';
920
+ localStorage.removeItem('bgImage');
921
+ document.body.style.backgroundImage = 'none';
922
+ document.body.style.backgroundColor = '#05010e';
923
+
924
+ // Reset input fields
925
+ const bgInputs = document.querySelectorAll('[id^=bg-image]');
926
+ bgInputs.forEach(input => input.value = '');
927
+
928
+ if (bgPreview) bgPreview.style.display = 'none';
929
+ }
930
+ </script>
931
+ <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=Shiroaki085/hubv2" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p><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=dai/dai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
932
+ </html>