🐳 22/02 - 12:18 - no funciona pero primero queiro que me arregles estee space para que funcione sin errores

index.html

@@ -201,8 +201,14 @@
     </div>
 
     <script>
-        // Initialize Lucide icons
-        lucide.createIcons();
+        // Initialize Lucide icons when DOM is ready
+        document.addEventListener('DOMContentLoaded', function() {
+            if (typeof lucide !== 'undefined') {
+                lucide.createIcons();
+            }
+            renderQuickAccess();
+            renderFiles();
+        });
 
         // Sample data
         let files = [
@@ -254,23 +260,41 @@
             return colors[type] || 'bg-gray-100 text-gray-600';
         }
 
+        function getQuickAccessColor(color) {
+            const colorMap = {
+                blue: 'bg-blue-100 text-blue-600',
+                purple: 'bg-purple-100 text-purple-600',
+                pink: 'bg-pink-100 text-pink-600',
+                orange: 'bg-orange-100 text-orange-600'
+            };
+            return colorMap[color] || 'bg-gray-100 text-gray-600';
+        }
+
         function renderQuickAccess() {
             const container = document.getElementById('quickAccess');
+            if (!container) return;
+            
             container.innerHTML = quickAccess.map(item => `
                 <div class="bg-white p-4 rounded-2xl border border-gray-100 hover:shadow-md transition-all cursor-pointer group">
-                    <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">
+                    <div class="w-12 h-12 ${getQuickAccessColor(item.color)} rounded-xl flex items-center justify-center mb-3 group-hover:scale-110 transition-transform">
                         <i data-lucide="${item.icon}" class="w-6 h-6"></i>
                     </div>
                     <h3 class="font-medium text-gray-900 mb-1">${item.name}</h3>
                     <p class="text-xs text-gray-500">${item.count} archivos</p>
                 </div>
             `).join('');
-            lucide.createIcons();
+            
+            if (typeof lucide !== 'undefined') {
+                lucide.createIcons();
+            }
         }
 
         function renderFiles() {
             const container = document.getElementById('filesContainer');
-            const searchTerm = document.getElementById('searchInput').value.toLowerCase();
+            if (!container) return;
+            
+            const searchInput = document.getElementById('searchInput');
+            const searchTerm = searchInput ? searchInput.value.toLowerCase() : '';
             const filtered = files.filter(f => f.name.toLowerCase().includes(searchTerm));
             
             if (currentView === 'grid') {
@@ -310,13 +334,26 @@
                     </div>
                 `).join('');
             }
-            lucide.createIcons();
+            
+            if (typeof lucide !== 'undefined') {
+                lucide.createIcons();
+            }
         }
 
         function toggleView(view) {
             currentView = view;
-            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';
-            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';
+            const gridBtn = document.getElementById('gridBtn');
+            const listBtn = document.getElementById('listBtn');
+            
+            if (gridBtn && listBtn) {
+                if (view === 'grid') {
+                    gridBtn.className = 'p-2 rounded-lg bg-blue-50 text-blue-600';
+                    listBtn.className = 'p-2 rounded-lg text-gray-400 hover:bg-gray-100';
+                } else {
+                    gridBtn.className = 'p-2 rounded-lg text-gray-400 hover:bg-gray-100';
+                    listBtn.className = 'p-2 rounded-lg bg-blue-50 text-blue-600';
+                }
+            }
             renderFiles();
         }
 
@@ -325,18 +362,22 @@
         }
 
         function triggerUpload() {
-            document.getElementById('fileInput').click();
+            const fileInput = document.getElementById('fileInput');
+            if (fileInput) fileInput.click();
         }
 
         function handleFiles(selectedFiles) {
             const modal = document.getElementById('uploadModal');
             const list = document.getElementById('uploadList');
+            
+            if (!modal || !list) return;
+            
             modal.classList.remove('hidden');
             
             Array.from(selectedFiles).forEach(file => {
                 const id = Date.now() + Math.random();
                 const item = document.createElement('div');
-                item.className = 'flex items-center gap-3';
+                item.className = 'flex items-center gap-3 upload-item-' + id;
                 item.innerHTML = `
                     <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0">
                         <i data-lucide="file" class="w-4 h-4 text-blue-600"></i>
@@ -350,7 +391,10 @@
                     <span class="text-xs text-gray-500" id="status-${id}">0%</span>
                 `;
                 list.appendChild(item);
-                lucide.createIcons();
+                
+                if (typeof lucide !== 'undefined') {
+                    lucide.createIcons();
+                }
                 
                 // Simulate upload
                 let progress = 0;
@@ -359,29 +403,35 @@
                     if (progress >= 100) {
                         progress = 100;
                         clearInterval(interval);
-                        document.getElementById(`status-${id}`).textContent = '✓';
-                        document.getElementById(`status-${id}`).className = 'text-xs text-green-600 font-medium';
+                        const statusEl = document.getElementById(`status-${id}`);
+                        if (statusEl) {
+                            statusEl.textContent = '✓';
+                            statusEl.className = 'text-xs text-green-600 font-medium';
+                        }
                         setTimeout(() => {
                             item.remove();
                             if (list.children.length === 0) closeUploadModal();
                         }, 1000);
                     }
-                    document.getElementById(`progress-${id}`).style.width = progress + '%';
-                    document.getElementById(`status-${id}`).textContent = Math.floor(progress) + '%';
+                    const progressEl = document.getElementById(`progress-${id}`);
+                    const statusEl = document.getElementById(`status-${id}`);
+                    if (progressEl) progressEl.style.width = progress + '%';
+                    if (statusEl) statusEl.textContent = Math.floor(progress) + '%';
                 }, 300);
             });
         }
 
         function closeUploadModal() {
-            document.getElementById('uploadModal').classList.add('hidden');
+            const modal = document.getElementById('uploadModal');
+            if (modal) modal.classList.add('hidden');
         }
 
         function createFolder() {
             const name = prompt('Nombre de la nueva carpeta:');
-            if (name) {
+            if (name && name.trim()) {
                 files.unshift({
                     id: Date.now(),
-                    name: name,
+                    name: name.trim(),
                     type: 'folder',
                     size: '0 archivos',
                     date: new Date().toISOString().split('T')[0],
@@ -393,23 +443,27 @@
 
         function showSection(section) {
             // Visual feedback only for demo
-            document.querySelectorAll('.nav-item').forEach(btn => {
+            const buttons = document.querySelectorAll('.nav-item');
+            buttons.forEach(btn => {
                 btn.classList.remove('bg-blue-50', 'text-blue-600');
                 btn.classList.add('text-gray-600');
             });
-            event.currentTarget.classList.remove('text-gray-600');
-            event.currentTarget.classList.add('bg-blue-50', 'text-blue-600');
+            
+            // Get the clicked button from event
+            const clickedBtn = event ? event.currentTarget : null;
+            if (clickedBtn) {
+                clickedBtn.classList.remove('text-gray-600');
+                clickedBtn.classList.add('bg-blue-50', 'text-blue-600');
+            }
+            
+            // Here you would typically load different content based on section
+            console.log('Section:', section);
         }
 
         function toggleMenu(id) {
-            // Context menu logic would go here
+            // Context menu logic - prevent errors
             console.log('Menu for file:', id);
         }
-
-        // Initialize
-        renderQuickAccess();
-        renderFiles();
     </script>
-<script src="https://deepsite.hf.co/deepsite-badge.js"></script>
 </body>
 </html>

style.css

@@ -1,28 +1,83 @@
+/* Sofia Cloud Custom Styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+}
+
+.glass {
+    background: rgba(255, 255, 255, 0.7);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+.glass-dark {
+    background: rgba(17, 24, 39, 0.8);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.gradient-bg {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.file-card {
+    transition: all 0.3s ease;
+}
+
+.file-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 40px -10px rgba(0,0,0,0.2);
+}
+
+.storage-bar {
+    background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
+    transition: width 0.3s ease;
+}
+
+@keyframes float {
+    0%, 100% { transform: translateY(0px); }
+    50% { transform: translateY(-10px); }
+}
+
+.floating {
+    animation: float 3s ease-in-out infinite;
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 4px;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 4px;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+::-webkit-scrollbar-thumb:hover {
+    background: #a8a8a8;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* Mobile menu animation */
+@media (max-width: 768px) {
+    .mobile-menu {
+        transform: translateX(-100%);
+        transition: transform 0.3s ease-in-out;
+    }
+    
+    .mobile-menu.open {
+        transform: translateX(0);
+    }
 }