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>SecureStore Pro - Gestión de Archivos</title>7 <style>8 * {9 box-sizing: border-box;10 margin: 0;11 padding: 0;12 font-family: Arial, sans-serif;13 }14 15 body {16 display: flex;17 height: 100vh;18 background-color: #f4f6f8;19 }20 21 /* Sidebar */22 .sidebar {23 width: 250px;24 background-color: #2c3e50;25 color: #ecf0f1;26 padding: 20px;27 }28 29 .sidebar h2 {30 margin-bottom: 20px;31 font-size: 1.5em;32 }33 34 .sidebar ul {35 list-style: none;36 }37 38 .sidebar ul li {39 padding: 10px;40 cursor: pointer;41 border-radius: 4px;42 transition: background-color 0.3s;43 }44 45 .sidebar ul li:hover, .sidebar ul li.active {46 background-color: #34495e;47 }48 49 .sidebar .create-folder {50 margin-top: 20px;51 padding: 10px;52 background-color: #2980b9;53 border: none;54 color: #fff;55 cursor: pointer;56 border-radius: 4px;57 width: 100%;58 transition: background-color 0.3s;59 }60 61 .sidebar .create-folder:hover {62 background-color: #3498db;63 }64 65 /* Main Content */66 .main-content {67 flex: 1;68 padding: 20px;69 overflow-y: auto;70 }71 72 .main-content h2 {73 margin-bottom: 20px;74 color: #2c3e50;75 }76 77 .actions {78 margin-bottom: 20px;79 }80 81 .actions button {82 padding: 10px 15px;83 margin-right: 10px;84 background-color: #27ae60;85 border: none;86 color: #fff;87 cursor: pointer;88 border-radius: 4px;89 transition: background-color 0.3s;90 }91 92 .actions button:hover {93 background-color: #2ecc71;94 }95 96 /* Files Grid */97 .files-grid {98 display: grid;99 grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));100 gap: 20px;101 }102 103 .file-item {104 background-color: #fff;105 padding: 15px;106 border-radius: 8px;107 box-shadow: 0px 2px 4px rgba(0,0,0,0.1);108 text-align: center;109 position: relative;110 }111 112 .file-item img {113 width: 50px;114 height: 50px;115 margin-bottom: 10px;116 }117 118 .file-item .file-name {119 word-wrap: break-word;120 font-size: 1em;121 color: #34495e;122 }123 124 .file-item .actions {125 position: absolute;126 top: 10px;127 right: 10px;128 display: flex;129 gap: 5px;130 }131 132 .file-item .actions button {133 background-color: transparent;134 border: none;135 cursor: pointer;136 color: #7f8c8d;137 transition: color 0.3s;138 }139 140 .file-item .actions button:hover {141 color: #2c3e50;142 }143 144 /* Modal */145 .modal {146 display: none; 147 position: fixed; 148 z-index: 10; 149 left: 0;150 top: 0;151 width: 100%; 152 height: 100%; 153 overflow: auto; 154 background-color: rgba(0,0,0,0.4); 155 }156 157 .modal-content {158 background-color: #fefefe;159 margin: 10% auto; 160 padding: 20px;161 border: 1px solid #888;162 width: 300px; 163 border-radius: 8px;164 }165 166 .modal-content h3 {167 margin-bottom: 15px;168 color: #2c3e50;169 }170 171 .modal-content input {172 width: 100%;173 padding: 10px;174 margin-bottom: 15px;175 border: 1px solid #bdc3c7;176 border-radius: 4px;177 }178 179 .modal-content .modal-actions {180 text-align: right;181 }182 183 .modal-content .modal-actions button {184 padding: 8px 12px;185 margin-left: 10px;186 border: none;187 border-radius: 4px;188 cursor: pointer;189 }190 191 .modal-content .modal-actions .cancel-btn {192 background-color: #e74c3c;193 color: #fff;194 }195 196 .modal-content .modal-actions .create-btn {197 background-color: #27ae60;198 color: #fff;199 }200 201 /* Responsive */202 @media (max-width: 768px) {203 body {204 flex-direction: column;205 }206 207 .sidebar {208 width: 100%;209 }210 211 .main-content {212 padding: 10px;213 }214 215 .files-grid {216 grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));217 gap: 15px;218 }219 }220 </style>221 </head>222 <body>223 224 <!-- Sidebar -->225 <div class="sidebar">226 <h2>Carpetas</h2>227 <ul id="folder-list">228 <li class="active" data-folder="root">Principal</li>229 <li data-folder="documents">Documentos</li>230 <li data-folder="images">Imágenes</li>231 <li data-folder="videos">Videos</li>232 </ul>233 <button class="create-folder" id="create-folder-btn">+ Nueva Carpeta</button>234 </div>235 236 <!-- Main Content -->237 <div class="main-content">238 <h2 id="current-folder-title">Principal</h2>239 <div class="actions">240 <button id="upload-btn">Subir Archivo</button>241 <button id="download-btn">Descargar Seleccionado</button>242 <button id="delete-btn">Eliminar Seleccionado</button>243 </div>244 <div class="files-grid" id="files-grid">245 <!-- Archivos y Carpetas aparecerán aquí -->246 </div>247 </div>248 249 <!-- Create Folder Modal -->250 <div id="create-folder-modal" class="modal">251 <div class="modal-content">252 <h3>Crear Nueva Carpeta</h3>253 <input type="text" id="new-folder-name" placeholder="Nombre de la carpeta">254 <div class="modal-actions">255 <button class="cancel-btn" id="cancel-folder-btn">Cancelar</button>256 <button class="create-btn" id="confirm-create-folder-btn">Crear</button>257 </div>258 </div>259 </div>260 261 <!-- Upload File Modal -->262 <div id="upload-file-modal" class="modal">263 <div class="modal-content">264 <h3>Subir Archivo</h3>265 <input type="file" id="file-input">266 <div class="modal-actions">267 <button class="cancel-btn" id="cancel-upload-btn">Cancelar</button>268 <button class="create-btn" id="confirm-upload-btn">Subir</button>269 </div>270 </div>271 </div>272 273 <script>274 // Datos de ejemplo275 const data = {276 root: [277 { type: 'folder', name: 'Documentos' },278 { type: 'folder', name: 'Imágenes' },279 { type: 'file', name: 'reporte.pdf' },280 { type: 'file', name: 'foto.jpg' }281 ],282 documents: [283 { type: 'file', name: 'factura.docx' },284 { type: 'file', name: 'contrato.pdf' }285 ],286 images: [287 { type: 'file', name: 'logo.png' },288 { type: 'file', name: 'banner.jpg' }289 ],290 videos: [291 { type: 'file', name: 'promo.mp4' }292 ]293 };294 295 let currentFolder = 'root';296 let selectedItem = null;297 298 const folderList = document.getElementById('folder-list');299 const currentFolderTitle = document.getElementById('current-folder-title');300 const filesGrid = document.getElementById('files-grid');301 302 const createFolderBtn = document.getElementById('create-folder-btn');303 const createFolderModal = document.getElementById('create-folder-modal');304 const cancelFolderBtn = document.getElementById('cancel-folder-btn');305 const confirmCreateFolderBtn = document.getElementById('confirm-create-folder-btn');306 const newFolderNameInput = document.getElementById('new-folder-name');307 308 const uploadBtn = document.getElementById('upload-btn');309 const uploadFileModal = document.getElementById('upload-file-modal');310 const cancelUploadBtn = document.getElementById('cancel-upload-btn');311 const confirmUploadBtn = document.getElementById('confirm-upload-btn');312 const fileInput = document.getElementById('file-input');313 314 const downloadBtn = document.getElementById('download-btn');315 const deleteBtn = document.getElementById('delete-btn');316 317 // Función para renderizar archivos y carpetas318 function renderFiles() {319 filesGrid.innerHTML = '';320 data[currentFolder].forEach((item, index) => {321 const fileDiv = document.createElement('div');322 fileDiv.classList.add('file-item');323 fileDiv.dataset.index = index;324 325 // Icono326 const icon = document.createElement('img');327 icon.src = item.type === 'folder' ? 'https://img.icons8.com/fluency/48/000000/folder-invoices.png' :328 'https://img.icons8.com/fluency/48/000000/file.png';329 icon.alt = item.type === 'folder' ? 'Carpeta' : 'Archivo';330 fileDiv.appendChild(icon);331 332 // Nombre del archivo/carpeta333 const name = document.createElement('div');334 name.classList.add('file-name');335 name.textContent = item.name;336 fileDiv.appendChild(name);337 338 // Acciones339 const actionsDiv = document.createElement('div');340 actionsDiv.classList.add('actions');341 342 if (item.type === 'folder') {343 const openBtn = document.createElement('button');344 openBtn.innerHTML = '📂';345 openBtn.title = 'Abrir Carpeta';346 openBtn.onclick = () => openFolder(item.name);347 actionsDiv.appendChild(openBtn);348 } else {349 const downloadBtnIcon = document.createElement('button');350 downloadBtnIcon.innerHTML = '⬇️';351 downloadBtnIcon.title = 'Descargar Archivo';352 downloadBtnIcon.onclick = () => downloadFile(item.name);353 actionsDiv.appendChild(downloadBtnIcon);354 }355 356 const deleteBtnIcon = document.createElement('button');357 deleteBtnIcon.innerHTML = '🗑️';358 deleteBtnIcon.title = 'Eliminar';359 deleteBtnIcon.onclick = () => deleteItem(index);360 actionsDiv.appendChild(deleteBtnIcon);361 362 fileDiv.appendChild(actionsDiv);363 364 // Selección365 fileDiv.onclick = (e) => {366 if (e.target.tagName !== 'BUTTON') {367 if (selectedItem === fileDiv) {368 selectedItem.classList.remove('selected');369 selectedItem = null;370 } else {371 if (selectedItem) selectedItem.classList.remove('selected');372 fileDiv.classList.add('selected');373 selectedItem = fileDiv;374 }375 }376 };377 378 filesGrid.appendChild(fileDiv);379 });380 }381 382 // Función para cambiar de carpeta383 function openFolder(folderName) {384 currentFolder = folderName.toLowerCase();385 currentFolderTitle.textContent = folderName;386 Array.from(folderList.children).forEach(li => {387 li.classList.toggle('active', li.dataset.folder === currentFolder);388 });389 renderFiles();390 }391 392 // Función para crear una nueva carpeta393 function createFolder(name) {394 if (!data[currentFolder].some(item => item.name.toLowerCase() === name.toLowerCase())) {395 data[currentFolder].push({ type: 'folder', name });396 renderFiles();397 } else {398 alert('La carpeta ya existe.');399 }400 }401 402 // Función para subir un archivo403 function uploadFile(fileName) {404 data[currentFolder].push({ type: 'file', name: fileName });405 renderFiles();406 }407 408 // Función para descargar un archivo (simulación)409 function downloadFile(fileName) {410 alert(`Descargando archivo: ${fileName}`);411 // Aquí se podría implementar la lógica real de descarga412 }413 414 // Función para eliminar un archivo o carpeta415 function deleteItem(index) {416 const item = data[currentFolder][index];417 if (confirm(`¿Estás seguro de que deseas eliminar "${item.name}"?`)) {418 data[currentFolder].splice(index, 1);419 renderFiles();420 }421 }422 423 // Event Listeners424 folderList.addEventListener('click', (e) => {425 if (e.target.tagName === 'LI') {426 openFolder(e.target.textContent);427 }428 });429 430 createFolderBtn.addEventListener('click', () => {431 createFolderModal.style.display = 'block';432 });433 434 cancelFolderBtn.addEventListener('click', () => {435 createFolderModal.style.display = 'none';436 newFolderNameInput.value = '';437 });438 439 confirmCreateFolderBtn.addEventListener('click', () => {440 const folderName = newFolderNameInput.value.trim();441 if (folderName) {442 createFolder(folderName);443 createFolderModal.style.display = 'none';444 newFolderNameInput.value = '';445 } else {446 alert('Por favor, introduce un nombre de carpeta.');447 }448 });449 450 uploadBtn.addEventListener('click', () => {451 uploadFileModal.style.display = 'block';452 });453 454 cancelUploadBtn.addEventListener('click', () => {455 uploadFileModal.style.display = 'none';456 fileInput.value = '';457 });458 459 confirmUploadBtn.addEventListener('click', () => {460 const file = fileInput.files[0];461 if (file) {462 uploadFile(file.name);463 uploadFileModal.style.display = 'none';464 fileInput.value = '';465 } else {466 alert('Por favor, selecciona un archivo para subir.');467 }468 });469 470 downloadBtn.addEventListener('click', () => {471 if (selectedItem) {472 const fileName = selectedItem.querySelector('.file-name').textContent;473 downloadFile(fileName);474 } else {475 alert('Por favor, selecciona un archivo para descargar.');476 }477 });478 479 deleteBtn.addEventListener('click', () => {480 if (selectedItem) {481 const index = selectedItem.dataset.index;482 deleteItem(index);483 selectedItem = null;484 } else {485 alert('Por favor, selecciona un archivo o carpeta para eliminar.');486 }487 });488 489 // Cerrar modales al hacer clic fuera de ellos490 window.onclick = function(event) {491 if (event.target == createFolderModal) {492 createFolderModal.style.display = "none";493 newFolderNameInput.value = '';494 }495 if (event.target == uploadFileModal) {496 uploadFileModal.style.display = "none";497 fileInput.value = '';498 }499 }500 501 // Inicializar502 renderFiles();503 </script>504 </body>505 </html>506 Enlace
El enlace para compartir es: