2025-03-17 21:28:08 +01:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
2025-03-19 23:28:29 +01:00
|
|
|
<title data-i18n="app.title">OxiCloud</title>
|
|
|
|
|
|
|
|
|
|
<!-- Styles -->
|
|
|
|
|
<link rel="stylesheet" href="/css/style.css">
|
2025-04-02 01:22:05 +02:00
|
|
|
<link rel="stylesheet" href="/css/inlineViewer.css">
|
2025-04-02 05:08:30 +02:00
|
|
|
<link rel="stylesheet" href="/css/fileViewer.css">
|
2025-04-02 03:43:44 +02:00
|
|
|
<link rel="stylesheet" href="/css/favorites.css">
|
2025-04-02 05:08:30 +02:00
|
|
|
<link rel="stylesheet" href="/css/recent.css">
|
2025-03-17 21:28:08 +01:00
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
|
|
|
|
<link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
|
2025-03-19 23:28:29 +01:00
|
|
|
|
|
|
|
|
<!-- Scripts -->
|
2025-03-17 21:28:08 +01:00
|
|
|
<script src="/js/i18n.js"></script>
|
|
|
|
|
<script src="/js/languageSelector.js"></script>
|
2026-02-03 17:59:04 +01:00
|
|
|
<script src="/js/modal.js"></script>
|
2025-04-12 12:21:57 +02:00
|
|
|
<script src="/js/ui.js"></script>
|
2025-03-19 23:28:29 +01:00
|
|
|
<script src="/js/contextMenus.js"></script>
|
|
|
|
|
<script src="/js/fileOperations.js"></script>
|
2025-03-27 01:13:34 +01:00
|
|
|
<script src="/js/search.js"></script>
|
2025-04-02 03:43:44 +02:00
|
|
|
<script src="/js/favorites.js"></script>
|
2025-04-02 05:08:30 +02:00
|
|
|
<script src="/js/recent.js"></script>
|
2025-04-12 12:21:57 +02:00
|
|
|
<script src="/js/fileRenderer.js"></script>
|
|
|
|
|
<script src="/js/fileSharing.js"></script>
|
2025-04-01 21:14:09 +02:00
|
|
|
<script src="/js/components/sharedView.js"></script>
|
2025-04-12 12:21:57 +02:00
|
|
|
<!-- Los viewers se cargan al final para asegurar que document.body esté disponible -->
|
|
|
|
|
<script defer src="/js/fileViewer.js"></script>
|
|
|
|
|
<script defer src="/js/inlineViewer.js"></script>
|
2025-03-19 23:28:29 +01:00
|
|
|
<script src="/js/app.js"></script>
|
2025-03-17 21:28:08 +01:00
|
|
|
|
|
|
|
|
<!-- Service Worker Registration -->
|
|
|
|
|
<script>
|
|
|
|
|
if ('serviceWorker' in navigator) {
|
|
|
|
|
window.addEventListener('load', () => {
|
|
|
|
|
navigator.serviceWorker.register('/sw.js')
|
|
|
|
|
.then(reg => console.log('Service Worker registered successfully'))
|
|
|
|
|
.catch(err => console.log('Service Worker registration failed:', err));
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2025-03-19 23:28:29 +01:00
|
|
|
<!-- Sidebar -->
|
2025-03-17 21:28:08 +01:00
|
|
|
<div class="sidebar">
|
|
|
|
|
<div class="logo-container">
|
2025-03-19 23:28:29 +01:00
|
|
|
|
2025-03-17 21:28:08 +01:00
|
|
|
<div class="logo">
|
2025-03-19 23:28:29 +01:00
|
|
|
<svg viewBox="0 0 500 500">
|
|
|
|
|
<path d="M345 310c32 0 58-26 58-58s-26-58-58-58c-6.2 0-12 0.9-17.5 2.7C318 166 289 143 255 143c-34.3 0-63.1 22.6-73 53.7C176.9 195.7 171 195 165 195c-32 0-58 26-58 58s26 58 58 58h180z" fill="#fff"/>
|
2025-03-17 21:28:08 +01:00
|
|
|
</svg>
|
|
|
|
|
</div>
|
2025-03-19 23:28:29 +01:00
|
|
|
<div class="app-name">OxiCloud</div>
|
2025-03-17 21:28:08 +01:00
|
|
|
</div>
|
2025-03-19 23:28:29 +01:00
|
|
|
|
2025-03-17 21:28:08 +01:00
|
|
|
<div class="nav-menu">
|
|
|
|
|
<div class="nav-item active">
|
|
|
|
|
<i class="fas fa-folder"></i>
|
|
|
|
|
<span data-i18n="nav.files">Files</span>
|
|
|
|
|
</div>
|
2025-03-28 08:09:18 +01:00
|
|
|
<div class="nav-item" id="nav-shared">
|
2025-03-17 21:28:08 +01:00
|
|
|
<i class="fas fa-share-alt"></i>
|
|
|
|
|
<span data-i18n="nav.shared">Shared</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="nav-item">
|
|
|
|
|
<i class="fas fa-clock"></i>
|
|
|
|
|
<span data-i18n="nav.recent">Recent</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="nav-item">
|
|
|
|
|
<i class="fas fa-star"></i>
|
|
|
|
|
<span data-i18n="nav.favorites">Favorites</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="nav-item">
|
|
|
|
|
<i class="fas fa-trash"></i>
|
|
|
|
|
<span data-i18n="nav.trash">Trash</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-03-19 23:28:29 +01:00
|
|
|
|
2025-03-17 21:28:08 +01:00
|
|
|
<div class="storage-container">
|
2026-02-08 22:44:42 +01:00
|
|
|
<div class="storage-title"><i class="fas fa-database"></i> <span data-i18n="storage.title">Storage</span></div>
|
2025-03-17 21:28:08 +01:00
|
|
|
<div class="storage-bar">
|
|
|
|
|
<div class="storage-fill"></div>
|
|
|
|
|
</div>
|
2026-02-03 17:59:04 +01:00
|
|
|
<div class="storage-info" data-i18n="storage.calculating">Calculating...</div>
|
2025-03-17 21:28:08 +01:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-03-19 23:28:29 +01:00
|
|
|
|
|
|
|
|
<!-- Main Content -->
|
2025-03-17 21:28:08 +01:00
|
|
|
<div class="main-content">
|
2025-03-19 23:28:29 +01:00
|
|
|
<!-- Top Bar -->
|
2025-03-17 21:28:08 +01:00
|
|
|
<div class="top-bar">
|
|
|
|
|
<div class="search-container">
|
|
|
|
|
<i class="fas fa-search search-icon"></i>
|
2026-02-03 17:59:04 +01:00
|
|
|
<input type="text" id="search-input" data-i18n-placeholder="actions.search" placeholder="Buscar archivos, carpetas...">
|
|
|
|
|
<button id="search-button" class="search-button" data-i18n-title="actions.search_btn" title="Search">
|
|
|
|
|
<i class="fas fa-search"></i>
|
|
|
|
|
</button>
|
2025-03-17 21:28:08 +01:00
|
|
|
</div>
|
2025-03-19 23:28:29 +01:00
|
|
|
|
2025-03-17 21:28:08 +01:00
|
|
|
<div class="user-controls">
|
2026-02-03 17:59:04 +01:00
|
|
|
<div id="language-selector"></div>
|
2026-02-08 22:44:42 +01:00
|
|
|
<div class="user-menu-wrapper" id="user-menu-wrapper">
|
|
|
|
|
<button class="user-avatar-btn" id="user-avatar-btn">
|
|
|
|
|
<div class="user-avatar" id="user-avatar">AD</div>
|
|
|
|
|
</button>
|
|
|
|
|
<div class="user-menu" id="user-menu">
|
|
|
|
|
<div class="user-menu-header">
|
|
|
|
|
<div class="user-menu-avatar" id="user-menu-avatar">AD</div>
|
|
|
|
|
<div class="user-menu-info">
|
|
|
|
|
<div class="user-menu-name" id="user-menu-name">Usuario</div>
|
|
|
|
|
<div class="user-menu-email" id="user-menu-email">usuario@oxicloud.app</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="user-menu-storage">
|
|
|
|
|
<div class="user-menu-storage-label">
|
|
|
|
|
<i class="fas fa-database"></i>
|
|
|
|
|
<span data-i18n="storage.title">Almacenamiento</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="user-menu-storage-bar">
|
|
|
|
|
<div class="user-menu-storage-fill" id="user-menu-storage-fill"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="user-menu-storage-text" id="user-menu-storage-text">0% usado</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="user-menu-divider"></div>
|
|
|
|
|
<button class="user-menu-item" id="user-menu-theme">
|
|
|
|
|
<i class="fas fa-moon"></i>
|
|
|
|
|
<span data-i18n="user_menu.appearance">Apariencia</span>
|
|
|
|
|
<div class="theme-toggle-pill" id="theme-toggle-pill">
|
|
|
|
|
<div class="theme-toggle-knob"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</button>
|
|
|
|
|
<button class="user-menu-item" id="user-menu-about">
|
|
|
|
|
<i class="fas fa-info-circle"></i>
|
|
|
|
|
<span data-i18n="user_menu.about">Acerca de OxiCloud</span>
|
|
|
|
|
</button>
|
|
|
|
|
<div class="user-menu-divider"></div>
|
|
|
|
|
<button class="user-menu-item user-menu-logout" id="user-menu-logout">
|
|
|
|
|
<i class="fas fa-sign-out-alt"></i>
|
|
|
|
|
<span data-i18n="actions.logout">Cerrar sesión</span>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
2025-03-20 09:22:31 +01:00
|
|
|
</div>
|
2025-03-17 21:28:08 +01:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="content-area">
|
|
|
|
|
<h1 class="page-title" data-i18n="nav.files">Archivos</h1>
|
2025-03-19 23:28:29 +01:00
|
|
|
|
2025-03-17 21:28:08 +01:00
|
|
|
<div class="actions-bar">
|
|
|
|
|
<div class="action-buttons">
|
2026-02-08 22:44:42 +01:00
|
|
|
<div class="upload-dropdown" id="upload-dropdown">
|
|
|
|
|
<button class="btn btn-primary" id="upload-btn">
|
|
|
|
|
<i class="fas fa-cloud-upload-alt"></i>
|
|
|
|
|
<span data-i18n="actions.upload">Subir</span>
|
|
|
|
|
<i class="fas fa-caret-down" style="margin-left: 4px; font-size: 12px;"></i>
|
|
|
|
|
</button>
|
|
|
|
|
<div class="upload-dropdown-menu" id="upload-dropdown-menu">
|
|
|
|
|
<button class="upload-dropdown-item" id="upload-files-btn">
|
|
|
|
|
<i class="fas fa-file"></i>
|
|
|
|
|
<span data-i18n="actions.upload_files">Subir archivos</span>
|
|
|
|
|
</button>
|
|
|
|
|
<button class="upload-dropdown-item" id="upload-folder-btn">
|
|
|
|
|
<i class="fas fa-folder-open"></i>
|
|
|
|
|
<span data-i18n="actions.upload_folder">Subir carpeta</span>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-03-17 21:28:08 +01:00
|
|
|
<button class="btn btn-secondary" id="new-folder-btn">
|
2026-02-03 17:59:04 +01:00
|
|
|
<i class="fas fa-folder-plus"></i>
|
|
|
|
|
<span data-i18n="actions.new_folder">Nueva carpeta</span>
|
2025-03-17 21:28:08 +01:00
|
|
|
</button>
|
|
|
|
|
</div>
|
2025-03-19 23:28:29 +01:00
|
|
|
|
2025-03-17 21:28:08 +01:00
|
|
|
<div class="view-toggle">
|
|
|
|
|
<button class="toggle-btn active" id="grid-view-btn" title="Vista de cuadrícula">
|
|
|
|
|
<i class="fas fa-th"></i>
|
|
|
|
|
</button>
|
|
|
|
|
<button class="toggle-btn" id="list-view-btn" title="Vista de lista">
|
|
|
|
|
<i class="fas fa-list"></i>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-03-19 23:28:29 +01:00
|
|
|
|
2025-03-17 21:28:08 +01:00
|
|
|
<div class="dropzone" id="dropzone">
|
|
|
|
|
<i class="fas fa-cloud-upload-alt" style="font-size: 32px; margin-bottom: 10px;"></i>
|
|
|
|
|
<p data-i18n="dropzone.drag_files">Arrastra archivos aquí o haz clic para seleccionar</p>
|
|
|
|
|
<input type="file" id="file-input" style="display: none;" multiple>
|
2026-02-08 22:44:42 +01:00
|
|
|
<input type="file" id="folder-input" style="display: none;" webkitdirectory directory multiple>
|
2025-03-17 21:28:08 +01:00
|
|
|
<div class="upload-progress">
|
|
|
|
|
<div class="progress-bar">
|
|
|
|
|
<div class="progress-fill"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-03-19 23:28:29 +01:00
|
|
|
|
2025-03-17 21:28:08 +01:00
|
|
|
<div class="breadcrumb">
|
|
|
|
|
<span class="breadcrumb-item" data-i18n="breadcrumb.home">Home</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Files Container -->
|
|
|
|
|
<div class="files-container">
|
|
|
|
|
<!-- Grid View -->
|
|
|
|
|
<div class="files-grid" id="files-grid">
|
|
|
|
|
<!-- Files will be populated here -->
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- List View (hidden by default) -->
|
|
|
|
|
<div class="files-list-view" id="files-list-view" style="display: none;">
|
|
|
|
|
<div class="list-header">
|
|
|
|
|
<div data-i18n="files.name">Nombre</div>
|
|
|
|
|
<div data-i18n="files.type">Tipo</div>
|
|
|
|
|
<div data-i18n="files.size">Tamaño</div>
|
|
|
|
|
<div data-i18n="files.modified">Modificado</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- Files will be populated here in list view -->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2026-02-03 17:59:04 +01:00
|
|
|
|
|
|
|
|
<!-- Input Modal (for New Folder, Rename, etc.) -->
|
|
|
|
|
<div id="input-modal" class="modal-overlay">
|
|
|
|
|
<div class="modal-container">
|
|
|
|
|
<div class="modal-header">
|
|
|
|
|
<div class="modal-icon">
|
|
|
|
|
<i id="modal-icon" class="fas fa-folder-plus"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<h3 id="modal-title" data-i18n="dialogs.new_folder_title">Nueva carpeta</h3>
|
|
|
|
|
<button class="modal-close-btn" id="modal-close-btn">
|
|
|
|
|
<i class="fas fa-times"></i>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="modal-body">
|
|
|
|
|
<label id="modal-label" for="modal-input" data-i18n="dialogs.folder_name">Nombre de la carpeta</label>
|
|
|
|
|
<input type="text" id="modal-input" class="modal-input" placeholder="" autocomplete="off">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="modal-footer">
|
|
|
|
|
<button class="btn btn-secondary" id="modal-cancel-btn" data-i18n="actions.cancel">Cancelar</button>
|
|
|
|
|
<button class="btn btn-primary" id="modal-confirm-btn" data-i18n="actions.confirm">Crear</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2026-02-08 22:44:42 +01:00
|
|
|
|
|
|
|
|
<!-- About Modal -->
|
|
|
|
|
<div class="about-modal-overlay" id="about-modal-overlay">
|
|
|
|
|
<div class="about-modal">
|
|
|
|
|
<div class="about-modal-logo">
|
|
|
|
|
<i class="fas fa-cloud"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<h2>OxiCloud</h2>
|
|
|
|
|
<div class="about-version" id="about-version">v...</div>
|
|
|
|
|
<div class="about-description" data-i18n="user_menu.about_description">
|
|
|
|
|
Cloud storage platform built with Rust & Clean Architecture. Fast, secure, and private.
|
|
|
|
|
</div>
|
|
|
|
|
<div class="about-tech">
|
|
|
|
|
<span class="about-tech-badge">Rust</span>
|
|
|
|
|
<span class="about-tech-badge">Axum</span>
|
|
|
|
|
<span class="about-tech-badge">PostgreSQL</span>
|
|
|
|
|
<span class="about-tech-badge">Clean Architecture</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="about-links">
|
|
|
|
|
<a href="https://github.com" class="about-link" target="_blank" rel="noopener">
|
|
|
|
|
<i class="fab fa-github"></i> GitHub
|
|
|
|
|
</a>
|
|
|
|
|
<a href="#" class="about-link" id="about-license-link">
|
|
|
|
|
<i class="fas fa-file-alt"></i> MIT License
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
<button class="about-close-btn" id="about-close-btn" data-i18n="actions.close">Cerrar</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-03-17 21:28:08 +01:00
|
|
|
</body>
|
2025-03-19 23:28:29 +01:00
|
|
|
</html>
|
