Hugging Face's logo

Spaces:
GoGma
/
sofia-cloud-storage-mu79y
Running

App Files Community
GoGma commited on
Commit
45c8d0a
·
verified ·
1 Parent(s): 59af5a7

https://huggingface.co/spaces/GoGma/sofia-cloud

Browse files
Files changed (2) hide show
  1. README.md +9 -6
  2. index.html +415 -19
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Sofia Cloud Storage Mu79y
3
- emoji: 💻
4
- colorFrom: green
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: Sofia Cloud Storage ☁️
3
+ colorFrom: gray
4
+ colorTo: gray
 
5
  sdk: static
6
+ emoji: 🧩
7
+ tags:
8
+ - deepsite-v4
9
  ---
10
 
11
+ # Sofia Cloud Storage ☁️
12
+
13
+ This project has been created with [DeepSite](https://deepsite.hf.co) AI Vibe Coding.
index.html CHANGED
@@ -1,19 +1,415 @@
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="es">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Sofia Cloud - Tu espacio en la nube</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/lucide@latest"></script>
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10
+ <style>
11
+ * { font-family: 'Inter', sans-serif; }
12
+ .glass {
13
+ background: rgba(255, 255, 255, 0.7);
14
+ backdrop-filter: blur(10px);
15
+ border: 1px solid rgba(255, 255, 255, 0.3);
16
+ }
17
+ .glass-dark {
18
+ background: rgba(17, 24, 39, 0.8);
19
+ backdrop-filter: blur(10px);
20
+ border: 1px solid rgba(255, 255, 255, 0.1);
21
+ }
22
+ .gradient-bg {
23
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
24
+ }
25
+ .file-card:hover {
26
+ transform: translateY(-2px);
27
+ box-shadow: 0 10px 40px -10px rgba(0,0,0,0.2);
28
+ }
29
+ .storage-bar {
30
+ background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
31
+ }
32
+ @keyframes float {
33
+ 0%, 100% { transform: translateY(0px); }
34
+ 50% { transform: translateY(-10px); }
35
+ }
36
+ .floating { animation: float 3s ease-in-out infinite; }
37
+ </style>
38
+ </head>
39
+ <body class="bg-gray-50 text-gray-800">
40
+ <!-- Sidebar -->
41
+ <aside class="fixed left-0 top-0 h-full w-64 glass border-r border-gray-200 z-50 hidden md:block">
42
+ <div class="p-6 flex items-center gap-3 mb-6">
43
+ <div class="w-10 h-10 gradient-bg rounded-xl flex items-center justify-center text-white shadow-lg">
44
+ <i data-lucide="cloud" class="w-6 h-6"></i>
45
+ </div>
46
+ <div>
47
+ <h1 class="font-bold text-xl text-gray-900">Sofia Cloud</h1>
48
+ <p class="text-xs text-gray-500">Tu espacio seguro</p>
49
+ </div>
50
+ </div>
51
+
52
+ <nav class="px-4 space-y-2">
53
+ <button onclick="showSection('files')" class="nav-item w-full flex items-center gap-3 px-4 py-3 rounded-xl bg-blue-50 text-blue-600 font-medium transition-all">
54
+ <i data-lucide="folder-open" class="w-5 h-5"></i>
55
+ Mis Archivos
56
+ </button>
57
+ <button onclick="showSection('recent')" class="nav-item w-full flex items-center gap-3 px-4 py-3 rounded-xl text-gray-600 hover:bg-gray-100 transition-all">
58
+ <i data-lucide="clock" class="w-5 h-5"></i>
59
+ Recientes
60
+ </button>
61
+ <button onclick="showSection('favorites')" class="nav-item w-full flex items-center gap-3 px-4 py-3 rounded-xl text-gray-600 hover:bg-gray-100 transition-all">
62
+ <i data-lucide="star" class="w-5 h-5"></i>
63
+ Favoritos
64
+ </button>
65
+ <button onclick="showSection('trash')" class="nav-item w-full flex items-center gap-3 px-4 py-3 rounded-xl text-gray-600 hover:bg-gray-100 transition-all">
66
+ <i data-lucide="trash-2" class="w-5 h-5"></i>
67
+ Papelera
68
+ </button>
69
+ </nav>
70
+
71
+ <!-- Storage Widget -->
72
+ <div class="absolute bottom-0 left-0 right-0 p-6">
73
+ <div class="bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl p-4 text-white">
74
+ <div class="flex items-center justify-between mb-3">
75
+ <span class="text-sm font-medium">Almacenamiento</span>
76
+ <span class="text-xs bg-white/20 px-2 py-1 rounded-full">75%</span>
77
+ </div>
78
+ <div class="w-full bg-white/20 rounded-full h-2 mb-2">
79
+ <div class="storage-bar h-2 rounded-full" style="width: 75%"></div>
80
+ </div>
81
+ <p class="text-xs text-blue-100">15 GB de 20 GB usados</p>
82
+ </div>
83
+ </div>
84
+ </aside>
85
+
86
+ <!-- Main Content -->
87
+ <main class="md:ml-64 min-h-screen">
88
+ <!-- Header -->
89
+ <header class="sticky top-0 z-40 glass border-b border-gray-200 px-6 py-4">
90
+ <div class="flex items-center justify-between max-w-7xl mx-auto">
91
+ <div class="flex items-center gap-4 flex-1">
92
+ <button class="md:hidden p-2 hover:bg-gray-100 rounded-lg">
93
+ <i data-lucide="menu" class="w-6 h-6"></i>
94
+ </button>
95
+ <div class="relative flex-1 max-w-xl">
96
+ <i data-lucide="search" class="w-5 h-5 absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
97
+ <input type="text" id="searchInput" placeholder="Buscar archivos..."
98
+ class="w-full pl-10 pr-4 py-2.5 bg-gray-100 border-none rounded-xl focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all"
99
+ oninput="filterFiles()">
100
+ </div>
101
+ </div>
102
+
103
+ <div class="flex items-center gap-4 ml-4">
104
+ <button onclick="createFolder()" class="hidden sm:flex items-center gap-2 px-4 py-2.5 bg-gray-100 hover:bg-gray-200 rounded-xl font-medium transition-all">
105
+ <i data-lucide="folder-plus" class="w-4 h-4"></i>
106
+ Nueva Carpeta
107
+ </button>
108
+ <button onclick="triggerUpload()" class="flex items-center gap-2 px-4 py-2.5 gradient-bg text-white rounded-xl font-medium hover:shadow-lg transition-all">
109
+ <i data-lucide="upload-cloud" class="w-4 h-4"></i>
110
+ <span class="hidden sm:inline">Subir</span>
111
+ </button>
112
+ <input type="file" id="fileInput" class="hidden" multiple onchange="handleFiles(this.files)">
113
+
114
+ <button class="relative p-2 hover:bg-gray-100 rounded-xl">
115
+ <i data-lucide="bell" class="w-6 h-6 text-gray-600"></i>
116
+ <span class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span>
117
+ </button>
118
+
119
+ <img src="https://static.photos/people/200x200/42" alt="User" class="w-10 h-10 rounded-xl object-cover border-2 border-white shadow-md cursor-pointer">
120
+ </div>
121
+ </div>
122
+ </header>
123
+
124
+ <!-- Content Area -->
125
+ <div class="p-6 max-w-7xl mx-auto">
126
+ <!-- Stats Cards -->
127
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
128
+ <div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-100">
129
+ <div class="flex items-center justify-between mb-4">
130
+ <div class="p-3 bg-blue-50 rounded-xl">
131
+ <i data-lucide="files" class="w-6 h-6 text-blue-600"></i>
132
+ </div>
133
+ <span class="text-xs font-medium text-green-600 bg-green-50 px-2 py-1 rounded-full">+12%</span>
134
+ </div>
135
+ <h3 class="text-2xl font-bold text-gray-900">1,247</h3>
136
+ <p class="text-sm text-gray-500">Archivos totales</p>
137
+ </div>
138
+
139
+ <div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-100">
140
+ <div class="flex items-center justify-between mb-4">
141
+ <div class="p-3 bg-purple-50 rounded-xl">
142
+ <i data-lucide="hard-drive" class="w-6 h-6 text-purple-600"></i>
143
+ </div>
144
+ <span class="text-xs font-medium text-gray-600 bg-gray-100 px-2 py-1 rounded-full">75%</span>
145
+ </div>
146
+ <h3 class="text-2xl font-bold text-gray-900">15.2 GB</h3>
147
+ <p class="text-sm text-gray-500">Espacio usado</p>
148
+ </div>
149
+
150
+ <div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-100">
151
+ <div class="flex items-center justify-between mb-4">
152
+ <div class="p-3 bg-orange-50 rounded-xl">
153
+ <i data-lucide="share-2" class="w-6 h-6 text-orange-600"></i>
154
+ </div>
155
+ <span class="text-xs font-medium text-green-600 bg-green-50 px-2 py-1 rounded-full">+5%</span>
156
+ </div>
157
+ <h3 class="text-2xl font-bold text-gray-900">48</h3>
158
+ <p class="text-sm text-gray-500">Archivos compartidos</p>
159
+ </div>
160
+ </div>
161
+
162
+ <!-- Quick Access -->
163
+ <div class="mb-8">
164
+ <h2 class="text-lg font-semibold text-gray-900 mb-4">Acceso rápido</h2>
165
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4" id="quickAccess">
166
+ <!-- Generated by JS -->
167
+ </div>
168
+ </div>
169
+
170
+ <!-- File List Header -->
171
+ <div class="flex items-center justify-between mb-4">
172
+ <h2 class="text-lg font-semibold text-gray-900">Todos los archivos</h2>
173
+ <div class="flex items-center gap-2">
174
+ <button onclick="toggleView('grid')" id="gridBtn" class="p-2 rounded-lg bg-blue-50 text-blue-600">
175
+ <i data-lucide="grid-3x3" class="w-5 h-5"></i>
176
+ </button>
177
+ <button onclick="toggleView('list')" id="listBtn" class="p-2 rounded-lg text-gray-400 hover:bg-gray-100">
178
+ <i data-lucide="list" class="w-5 h-5"></i>
179
+ </button>
180
+ </div>
181
+ </div>
182
+
183
+ <!-- Files Container -->
184
+ <div id="filesContainer" class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4">
185
+ <!-- Files will be rendered here -->
186
+ </div>
187
+ </div>
188
+ </main>
189
+
190
+ <!-- Upload Progress Modal -->
191
+ <div id="uploadModal" class="fixed bottom-4 right-4 w-80 bg-white rounded-2xl shadow-2xl border border-gray-200 p-4 hidden transform transition-all">
192
+ <div class="flex items-center justify-between mb-3">
193
+ <span class="font-medium text-gray-900">Subiendo archivos...</span>
194
+ <button onclick="closeUploadModal()" class="text-gray-400 hover:text-gray-600">
195
+ <i data-lucide="x" class="w-5 h-5"></i>
196
+ </button>
197
+ </div>
198
+ <div class="space-y-3" id="uploadList">
199
+ <!-- Upload items -->
200
+ </div>
201
+ </div>
202
+
203
+ <script>
204
+ // Initialize Lucide icons
205
+ lucide.createIcons();
206
+
207
+ // Sample data
208
+ let files = [
209
+ { id: 1, name: 'Proyecto_Final.pdf', type: 'pdf', size: '2.4 MB', date: '2024-01-15', color: 'red' },
210
+ { id: 2, name: 'Fotos_Vacaciones', type: 'folder', size: '156 archivos', date: '2024-01-14', color: 'blue' },
211
+ { id: 3, name: 'Presupuesto_2024.xlsx', type: 'excel', size: '456 KB', date: '2024-01-13', color: 'green' },
212
+ { id: 4, name: 'Logo_Design.png', type: 'image', size: '3.2 MB', date: '2024-01-12', color: 'purple' },
213
+ { id: 5, name: 'Contrato_Clientes.docx', type: 'word', size: '128 KB', date: '2024-01-11', color: 'blue' },
214
+ { id: 6, name: 'Presentación_Ventas.pptx', type: 'powerpoint', size: '5.8 MB', date: '2024-01-10', color: 'orange' },
215
+ { id: 7, name: 'Backup_Sistema.zip', type: 'zip', size: '1.2 GB', date: '2024-01-09', color: 'gray' },
216
+ { id: 8, name: 'Reunión_Team.mp4', type: 'video', size: '245 MB', date: '2024-01-08', color: 'pink' },
217
+ ];
218
+
219
+ const quickAccess = [
220
+ { name: 'Documentos', icon: 'file-text', color: 'blue', count: '124' },
221
+ { name: 'Imágenes', icon: 'image', color: 'purple', count: '48' },
222
+ { name: 'Videos', icon: 'video', color: 'pink', count: '12' },
223
+ { name: 'Audio', icon: 'music', color: 'orange', count: '36' },
224
+ ];
225
+
226
+ let currentView = 'grid';
227
+
228
+ function getIcon(type) {
229
+ const icons = {
230
+ pdf: 'file-text',
231
+ folder: 'folder',
232
+ excel: 'table',
233
+ word: 'file-text',
234
+ powerpoint: 'presentation',
235
+ image: 'image',
236
+ zip: 'archive',
237
+ video: 'video',
238
+ audio: 'music'
239
+ };
240
+ return icons[type] || 'file';
241
+ }
242
+
243
+ function getColor(type) {
244
+ const colors = {
245
+ pdf: 'bg-red-100 text-red-600',
246
+ folder: 'bg-blue-100 text-blue-600',
247
+ excel: 'bg-green-100 text-green-600',
248
+ word: 'bg-blue-100 text-blue-600',
249
+ powerpoint: 'bg-orange-100 text-orange-600',
250
+ image: 'bg-purple-100 text-purple-600',
251
+ zip: 'bg-gray-100 text-gray-600',
252
+ video: 'bg-pink-100 text-pink-600'
253
+ };
254
+ return colors[type] || 'bg-gray-100 text-gray-600';
255
+ }
256
+
257
+ function renderQuickAccess() {
258
+ const container = document.getElementById('quickAccess');
259
+ container.innerHTML = quickAccess.map(item => `
260
+ <div class="bg-white p-4 rounded-2xl border border-gray-100 hover:shadow-md transition-all cursor-pointer group">
261
+ <div class="w-12 h-12 ${item.color === 'blue' ? 'bg-blue-100 text-blue-600' : item.color === 'purple' ? 'bg-purple-100 text-purple-600' : item.color === 'pink' ? 'bg-pink-100 text-pink-600' : 'bg-orange-100 text-orange-600'} rounded-xl flex items-center justify-center mb-3 group-hover:scale-110 transition-transform">
262
+ <i data-lucide="${item.icon}" class="w-6 h-6"></i>
263
+ </div>
264
+ <h3 class="font-medium text-gray-900 mb-1">${item.name}</h3>
265
+ <p class="text-xs text-gray-500">${item.count} archivos</p>
266
+ </div>
267
+ `).join('');
268
+ lucide.createIcons();
269
+ }
270
+
271
+ function renderFiles() {
272
+ const container = document.getElementById('filesContainer');
273
+ const searchTerm = document.getElementById('searchInput').value.toLowerCase();
274
+ const filtered = files.filter(f => f.name.toLowerCase().includes(searchTerm));
275
+
276
+ if (currentView === 'grid') {
277
+ container.className = 'grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4';
278
+ container.innerHTML = filtered.map(file => `
279
+ <div class="file-card bg-white rounded-2xl p-4 border border-gray-100 cursor-pointer group transition-all">
280
+ <div class="flex items-start justify-between mb-3">
281
+ <div class="w-12 h-12 ${getColor(file.type)} rounded-xl flex items-center justify-center">
282
+ <i data-lucide="${getIcon(file.type)}" class="w-6 h-6"></i>
283
+ </div>
284
+ <button onclick="event.stopPropagation(); toggleMenu(${file.id})" class="p-1 hover:bg-gray-100 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity">
285
+ <i data-lucide="more-vertical" class="w-4 h-4 text-gray-400"></i>
286
+ </button>
287
+ </div>
288
+ <h3 class="font-medium text-gray-900 truncate mb-1" title="${file.name}">${file.name}</h3>
289
+ <div class="flex items-center justify-between text-xs text-gray-500">
290
+ <span>${file.size}</span>
291
+ <span>${file.date}</span>
292
+ </div>
293
+ </div>
294
+ `).join('');
295
+ } else {
296
+ container.className = 'space-y-2';
297
+ container.innerHTML = filtered.map(file => `
298
+ <div class="file-card bg-white rounded-xl p-4 border border-gray-100 cursor-pointer flex items-center gap-4 group hover:bg-gray-50 transition-all">
299
+ <div class="w-10 h-10 ${getColor(file.type)} rounded-lg flex items-center justify-center flex-shrink-0">
300
+ <i data-lucide="${getIcon(file.type)}" class="w-5 h-5"></i>
301
+ </div>
302
+ <div class="flex-1 min-w-0">
303
+ <h3 class="font-medium text-gray-900 truncate">${file.name}</h3>
304
+ <p class="text-xs text-gray-500">${file.date}</p>
305
+ </div>
306
+ <span class="text-sm text-gray-500 hidden sm:block">${file.size}</span>
307
+ <button onclick="event.stopPropagation(); toggleMenu(${file.id})" class="p-2 hover:bg-gray-200 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity">
308
+ <i data-lucide="more-vertical" class="w-4 h-4 text-gray-400"></i>
309
+ </button>
310
+ </div>
311
+ `).join('');
312
+ }
313
+ lucide.createIcons();
314
+ }
315
+
316
+ function toggleView(view) {
317
+ currentView = view;
318
+ document.getElementById('gridBtn').className = view === 'grid' ? 'p-2 rounded-lg bg-blue-50 text-blue-600' : 'p-2 rounded-lg text-gray-400 hover:bg-gray-100';
319
+ document.getElementById('listBtn').className = view === 'list' ? 'p-2 rounded-lg bg-blue-50 text-blue-600' : 'p-2 rounded-lg text-gray-400 hover:bg-gray-100';
320
+ renderFiles();
321
+ }
322
+
323
+ function filterFiles() {
324
+ renderFiles();
325
+ }
326
+
327
+ function triggerUpload() {
328
+ document.getElementById('fileInput').click();
329
+ }
330
+
331
+ function handleFiles(selectedFiles) {
332
+ const modal = document.getElementById('uploadModal');
333
+ const list = document.getElementById('uploadList');
334
+ modal.classList.remove('hidden');
335
+
336
+ Array.from(selectedFiles).forEach(file => {
337
+ const id = Date.now() + Math.random();
338
+ const item = document.createElement('div');
339
+ item.className = 'flex items-center gap-3';
340
+ item.innerHTML = `
341
+ <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0">
342
+ <i data-lucide="file" class="w-4 h-4 text-blue-600"></i>
343
+ </div>
344
+ <div class="flex-1 min-w-0">
345
+ <p class="text-sm font-medium text-gray-900 truncate">${file.name}</p>
346
+ <div class="w-full bg-gray-200 rounded-full h-1.5 mt-1">
347
+ <div class="bg-blue-600 h-1.5 rounded-full transition-all duration-300" style="width: 0%" id="progress-${id}"></div>
348
+ </div>
349
+ </div>
350
+ <span class="text-xs text-gray-500" id="status-${id}">0%</span>
351
+ `;
352
+ list.appendChild(item);
353
+ lucide.createIcons();
354
+
355
+ // Simulate upload
356
+ let progress = 0;
357
+ const interval = setInterval(() => {
358
+ progress += Math.random() * 30;
359
+ if (progress >= 100) {
360
+ progress = 100;
361
+ clearInterval(interval);
362
+ document.getElementById(`status-${id}`).textContent = '✓';
363
+ document.getElementById(`status-${id}`).className = 'text-xs text-green-600 font-medium';
364
+ setTimeout(() => {
365
+ item.remove();
366
+ if (list.children.length === 0) closeUploadModal();
367
+ }, 1000);
368
+ }
369
+ document.getElementById(`progress-${id}`).style.width = progress + '%';
370
+ document.getElementById(`status-${id}`).textContent = Math.floor(progress) + '%';
371
+ }, 300);
372
+ });
373
+ }
374
+
375
+ function closeUploadModal() {
376
+ document.getElementById('uploadModal').classList.add('hidden');
377
+ }
378
+
379
+ function createFolder() {
380
+ const name = prompt('Nombre de la nueva carpeta:');
381
+ if (name) {
382
+ files.unshift({
383
+ id: Date.now(),
384
+ name: name,
385
+ type: 'folder',
386
+ size: '0 archivos',
387
+ date: new Date().toISOString().split('T')[0],
388
+ color: 'blue'
389
+ });
390
+ renderFiles();
391
+ }
392
+ }
393
+
394
+ function showSection(section) {
395
+ // Visual feedback only for demo
396
+ document.querySelectorAll('.nav-item').forEach(btn => {
397
+ btn.classList.remove('bg-blue-50', 'text-blue-600');
398
+ btn.classList.add('text-gray-600');
399
+ });
400
+ event.currentTarget.classList.remove('text-gray-600');
401
+ event.currentTarget.classList.add('bg-blue-50', 'text-blue-600');
402
+ }
403
+
404
+ function toggleMenu(id) {
405
+ // Context menu logic would go here
406
+ console.log('Menu for file:', id);
407
+ }
408
+
409
+ // Initialize
410
+ renderQuickAccess();
411
+ renderFiles();
412
+ </script>
413
+ <script src="https://deepsite.hf.co/deepsite-badge.js"></script>
414
+ </body>
415
+ </html>