adding features

static/index.html

@@ -408,6 +408,110 @@
             border-left: 20px solid white; /* Triángulo de reproducción */
         }
 
+        /* Estilos para archivos de código */
+        .file-icon.code-icon {
+            width: 100px;
+            height: 70px;
+            background-color: #e2e8f0; /* Fondo gris claro */
+            border-radius: 4px;
+            position: relative;
+            margin-bottom: 10px;
+            border-top: 3px solid #556ee6; /* Borde superior azul */
+            overflow: hidden;
+        }
+
+        /* Líneas que simulan código */
+        .file-icon.code-icon::before,
+        .file-icon.code-icon::after {
+            content: "";
+            position: absolute;
+            left: 10px;
+            right: 10px;
+            height: 2px;
+            background-color: #556ee6; /* Color azul para el código */
+        }
+
+        .file-icon.code-icon::before {
+            top: 15px;
+            width: 80%;
+        }
+
+        .file-icon.code-icon::after {
+            top: 25px;
+            width: 60%;
+        }
+
+        /* Agregar líneas adicionales para simular código */
+        .file-icon.code-icon .code-line-1,
+        .file-icon.code-icon .code-line-2,
+        .file-icon.code-icon .code-line-3 {
+            position: absolute;
+            left: 10px;
+            height: 2px;
+            background-color: #a0aec0; /* Color gris para el código */
+        }
+
+        .file-icon.code-icon .code-line-1 {
+            top: 35px;
+            width: 70%;
+        }
+
+        .file-icon.code-icon .code-line-2 {
+            top: 45px;
+            width: 85%;
+        }
+
+        .file-icon.code-icon .code-line-3 {
+            top: 55px;
+            width: 50%;
+        }
+
+        /* Colores específicos para distintos tipos de archivo de código */
+        .file-icon.json-icon {
+            border-top-color: #ffb86c; /* Naranja para JSON */
+        }
+
+        .file-icon.json-icon::before,
+        .file-icon.json-icon::after {
+            background-color: #ffb86c;
+        }
+
+        .file-icon.js-icon {
+            border-top-color: #ffd43b; /* Amarillo para JavaScript */
+        }
+
+        .file-icon.js-icon::before,
+        .file-icon.js-icon::after {
+            background-color: #ffd43b;
+        }
+
+        .file-icon.html-icon {
+            border-top-color: #e34c26; /* Rojo para HTML */
+        }
+
+        .file-icon.html-icon::before,
+        .file-icon.html-icon::after {
+            background-color: #e34c26;
+        }
+
+        .file-icon.css-icon {
+            border-top-color: #2965f1; /* Azul para CSS */
+        }
+
+        .file-icon.css-icon::before,
+        .file-icon.css-icon::after {
+            background-color: #2965f1;
+        }
+
+        .file-icon.py-icon {
+            border-top-color: #3776ab; /* Azul oscuro para Python */
+        }
+
+        .file-icon.py-icon::before,
+        .file-icon.py-icon::after {
+            background-color: #3776ab;
+        }
+
         .file-name {
             font-size: 14px;
             font-weight: 500;
@@ -1697,6 +1801,32 @@
                         iconElement.classList.add('video-icon');
                         iconElement.innerHTML = ''; // Eliminar el icono de font-awesome
                     }
+                    // Si es un archivo de código
+                    else {
+                        const extension = fileName.split('.').pop().toLowerCase();
+                        
+                        if (['json', 'js', 'jsx', 'ts', 'tsx', 'html', 'css', 'scss', 'py', 'java', 'c', 'cpp', 'cs', 'php', 'rb', 'go', 'rs', 'swift', 'kt'].includes(extension)) {
+                            iconElement.className = 'file-icon code-icon';
+                            iconElement.innerHTML = `
+                                <div class="code-line-1"></div>
+                                <div class="code-line-2"></div>
+                                <div class="code-line-3"></div>
+                            `;
+                            
+                            // Añadir clase específica según el tipo de archivo
+                            if (extension === 'json') {
+                                iconElement.classList.add('json-icon');
+                            } else if (['js', 'jsx', 'ts', 'tsx'].includes(extension)) {
+                                iconElement.classList.add('js-icon');
+                            } else if (extension === 'html') {
+                                iconElement.classList.add('html-icon');
+                            } else if (['css', 'scss'].includes(extension)) {
+                                iconElement.classList.add('css-icon');
+                            } else if (extension === 'py') {
+                                iconElement.classList.add('py-icon');
+                            }
+                        }
+                    }
                 });
             }
 

storage/file_ids.json

@@ -1,9 +1,12 @@
 {
   "path_to_id": {
-    "folder_ids.json": "94fa2cbf-e9f3-4811-8071-008e04ef9518",
+    "NIST.SP.500-322 (3).pdf": "8c583b0b-1382-438f-b1de-2be397ad87d1",
-    "oxicloud-logo.svg": "5348bfcb-f615-4616-8a45-bbdd26430a3c",
-    "prueba3/oxicloud-logo.svg": "c59bec72-9c70-4ff2-941f-543d79714f3c",
     "file_ids.json": "b5b94ec6-84e6-4f14-b83a-54e6752f64a6",
+    "oxicloud-logo.svg": "5348bfcb-f615-4616-8a45-bbdd26430a3c",
+    "serie1 (2) (2).png": "4411b296-1ac5-4e19-9a35-5a0a8d86d638",
+    "NIST.SP.500-322.pdf": "323f9f58-cdd0-43a2-96b1-86e885edeec3",
+    "folder_ids.json": "94fa2cbf-e9f3-4811-8071-008e04ef9518",
+    "prueba3/oxicloud-logo.svg": "c59bec72-9c70-4ff2-941f-543d79714f3c",
     "Manual de urgencias_vf.pdf": "a0c96f4b-9fd3-49ee-8aa0-fa744b04d6aa"
   }
 }

storage/folder_ids.json

@@ -0,0 +1,8 @@
+{
+  "path_to_id": {
+    "prueba3": "fe5ed2c0-c8a5-4452-8a40-6f3d110a5718",
+    "prueba5": "0554e888-2c7c-4b5c-8f4d-b26f7b7e6862",
+    "prueba4": "bf7fc04b-dbd1-4cd2-8f3e-c8f401e9c24a",
+    "prueba1": "c133d0ec-9891-4359-b655-3ce94a8198dc"
+  }
+}