cjw/Oxicloud
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity
Files
81a93a489b92f76b5efabcc3cf3884d91a94f4e7
Oxicloud/static/index.html
T
DioCrafts 81a93a489b feat: photo/video capture-date pipeline + premium UI/UX overhaul 
Backend — Photos timeline now groups by real capture date instead of upload time. New MediaMetadataService (FileLifecycleHook) extracts EXIF DateTimeOriginal from images and container creation_time from videos (mov/mp4/mkv) via nom-exif, timezone-correct (OffsetTimeOriginal), persisting captured_at so the existing media_sort_date trigger takes over. Adds POST /admin/photos/metadata/reextract to backfill existing media. Falls back to upload date when no embedded date exists.

Frontend — premium grid cards: combined metadata line (relative date · size, owner avatar when shared), custom selection checkbox with a clear checked state, uniform full-width 4:3 thumbnail tiles independent of filename length, centered file-type icons, and a hit-test fix so checkbox/star/kebab clicks reach the controls (the decorative thumbnail no longer captures pointer events). Notification messages internationalised across all 16 locales. Broader polish: design tokens, a11y/focus-visible states, brand + PWA assets.

Chore — bump semver-compatible dependencies (cargo upgrade); add nom-exif 3.6.1.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-15 00:24:27 +02:00

359 lines
20 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Declares the page supports both modes. Switching between them is
driven by the CSS `color-scheme` property (via the `data-color-scheme`
attribute on <html> set by theme-init.js), not by mutating this tag. -->
<meta name="color-scheme" content="light dark">
<title data-i18n="app.title">OxiCloud</title>
<link rel="icon" type="image/svg+xml" href="/logo/logo-plain.svg">
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="apple-touch-icon" href="/logo/apple-touch-icon.png">
<link rel="mask-icon" href="/logo/logo-plain.svg" color="#ff5e3a">
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#f5f7fa">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#0f172a">
<meta property="og:type" content="website">
<meta property="og:title" content="OxiCloud">
<meta property="og:description" content="Fast, private cloud storage built with Rust.">
<meta property="og:image" content="/logo/og-image.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="OxiCloud">
<meta name="twitter:description" content="Fast, private cloud storage built with Rust.">
<meta name="twitter:image" content="/logo/og-image.png">
<!-- Apply saved theme immediately to prevent flash of light mode -->
<script src="/js/core/theme-init.js"></script>
<!-- Styles -->
<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="/css/views/inlineViewer.css">
<link rel="stylesheet" href="/css/views/favorites.css">
<link rel="stylesheet" href="/css/views/recent.css">
<link rel="stylesheet" href="/css/views/sharedWithMe.css">
<link rel="stylesheet" href="/css/views/mySharesView.css">
<link rel="stylesheet" href="/css/views/trash.css">
<link rel="stylesheet" href="/css/views/photos.css">
<link rel="stylesheet" href="/css/views/photosLightbox.css">
<link rel="stylesheet" href="/css/views/music.css">
<!-- Scripts (defer: download in parallel, execute in order, after HTML parsed) -->
<script defer type="module" src="/js/core/errorBoundary.js"></script>
<script defer type="module" src="/js/core/i18n.js"></script>
<script defer type="module" src="/js/core/csrf.js"></script>
<script defer type="module" src="/js/core/languageSelector.js"></script>
<script defer type="module" src="/js/core/notifications.js"></script>
<script defer type="module" src="/js/components/modal.js"></script>
<script defer type="module" src="/js/core/formatters.js"></script>
<script defer type="module" src="/js/app/state.js"></script>
<script defer type="module" src="/js/app/uiFileTypes.js"></script>
<script defer type="module" src="/js/app/uiNotifications.js"></script>
<script defer type="module" src="/js/app/ui.js"></script>
<script defer type="module" src="/js/features/files/contextMenus.js"></script>
<script defer type="module" src="/js/features/files/fileOperations.js"></script>
<script defer type="module" src="/js/features/files/multiSelect.js"></script>
<script defer type="module" src="/js/features/files/search.js"></script>
<script defer type="module" src="/js/features/library/favorites.js"></script>
<script defer type="module" src="/js/features/library/recent.js"></script>
<script defer type="module" src="/js/features/library/photos.js"></script>
<script defer type="module" src="/js/features/library/music.js"></script>
<script defer type="module" src="/js/features/sharing/fileSharing.js"></script>
<script defer type="module" src="/js/model/recentModel.js"></script>
<script defer type="module" src="/js/views/recent/recentView.js"></script>
<script defer type="module" src="/js/features/files/inlineViewer.js"></script>
<script defer type="module" src="/js/features/files/wopiEditor.js"></script>
<script defer type="module" src="/js/core/icons.js"></script>
<script defer type="module" src="/js/app/navigation.js"></script>
<script defer type="module" src="/js/app/authSession.js"></script>
<script defer type="module" src="/js/app/userMenu.js"></script>
<script defer type="module" src="/js/app/commandPalette.js"></script>
<script defer type="module" src="/js/app/filesView.js"></script>
<script defer type="module" src="/js/views/trash/trashView.js"></script>
<script defer type="module" src="/js/app/searchView.js"></script>
<script defer type="module" src="/js/app/main.js"></script>
<script defer type="module" src="/js/app/bootstrap.js"></script>
<!-- Service Worker Registration -->
<script defer src="/js/core/sw-register.js"></script>
</head>
<body>
<a href="#main" class="skip-link" data-i18n="a11y.skip_to_content">Skip to content</a>
<!-- Mobile sidebar overlay -->
<div class="sidebar-overlay" id="sidebar-overlay"></div>
<!-- Sidebar -->
<div class="sidebar" id="sidebar">
<a href="/" class="logo-container">
<div class="logo">
<svg viewBox="120 120 280 280">
<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"/>
</svg>
</div>
<div class="app-name">OxiCloud</div>
</a>
<nav class="nav-menu" aria-label="Primary" data-i18n-aria-label="nav.primary">
<button class="nav-item" type="button">
<i class="fas fa-folder" aria-hidden="true"></i>
<span data-i18n="nav.files">Files</span>
</button>
<button class="nav-item" type="button" id="nav-shared">
<i class="fas fa-oxiexport" aria-hidden="true"></i>
<span data-i18n="nav.shared">Shared</span>
</button>
<button class="nav-item" type="button" id="nav-sharedwithme">
<i class="fas fa-oxiimport" aria-hidden="true"></i>
<span data-i18n="nav.sharedwithme">Shared with me</span>
</button>
<button class="nav-item" type="button">
<i class="fas fa-clock" aria-hidden="true"></i>
<span data-i18n="nav.recent">Recent</span>
</button>
<button class="nav-item" type="button">
<i class="fas fa-star" aria-hidden="true"></i>
<span data-i18n="nav.favorites">Favorites</span>
</button>
<button class="nav-item" type="button" id="nav-photos">
<i class="fas fa-images" aria-hidden="true"></i>
<span data-i18n="nav.photos">Photos</span>
</button>
<button class="nav-item" type="button" id="nav-music">
<i class="fas fa-music" aria-hidden="true"></i>
<span data-i18n="nav.music">Music</span>
</button>
<button class="nav-item" type="button">
<i class="fas fa-trash" aria-hidden="true"></i>
<span data-i18n="nav.trash">Trash</span>
</button>
</nav>
<div class="storage-container">
<div class="storage-title"><i class="fas fa-database"></i> <span data-i18n="storage.title">Storage</span></div>
<div class="storage-bar">
<div class="storage-fill"></div>
</div>
<div class="storage-info" data-i18n="storage.calculating">Calculating...</div>
</div>
</div>
<!-- Main Content -->
<div class="main-content">
<!-- Top Bar -->
<div class="top-bar">
<!-- Mobile menu toggle -->
<button class="sidebar-toggle" id="sidebar-toggle" aria-label="Toggle navigation menu" aria-controls="sidebar" aria-expanded="false">
<i class="fas fa-bars"></i>
</button>
<!-- Mobile search icon (replaces full bar on small screens) -->
<button class="search-toggle-btn" id="search-toggle-btn" aria-label="Search">
<i class="fas fa-search"></i>
</button>
<!-- Back button shown when mobile search is expanded -->
<button class="search-back-btn" id="search-back-btn" aria-label="Close search">
<i class="fas fa-arrow-left"></i>
</button>
<!-- Search slot — positioning context for the item tooltip, which
absolutely overlays the search bar when an item is hovered. -->
<div class="search-slot">
<div class="search-container">
<i class="fas fa-search search-icon"></i>
<input type="text" id="search-input" data-i18n-placeholder="actions.search" placeholder="Search files, folders...">
<button id="search-button" class="search-button" data-i18n-title="actions.search_btn" title="Search">
<i class="fas fa-search"></i>
</button>
</div>
<div id="path-tooltip" class="path-tooltip hidden" aria-hidden="true"></div>
</div>
<div class="user-controls">
<!-- Notification Bell -->
<div class="notif-wrapper" id="notif-wrapper">
<button class="notif-bell-btn" id="notif-bell-btn" title="Notifications" aria-label="Notifications" data-i18n-aria-label="notifications.title" aria-haspopup="true">
<i class="fas fa-bell" aria-hidden="true"></i>
<span class="notif-badge hidden" id="notif-badge">0</span>
</button>
<div class="notif-panel" id="notif-panel">
<div class="notif-panel-header">
<span class="notif-panel-title" data-i18n="notifications.title">Notifications</span>
<button class="notif-clear-btn" id="notif-clear-btn" title="Clear all" aria-label="Clear all notifications">
<i class="fas fa-trash-alt"></i>
</button>
</div>
<div class="notif-panel-body" id="notif-panel-body">
<div class="notif-empty" id="notif-empty">
<i class="fas fa-bell-slash"></i>
<span data-i18n="notifications.empty">No notifications</span>
</div>
</div>
</div>
</div>
<div class="user-menu-wrapper" id="user-menu-wrapper">
<button class="user-avatar-btn" id="user-avatar-btn" aria-label="User menu" aria-haspopup="true">
<!-- avatar-only userVignette mounted here by updateUserMenuData() -->
</button>
<div class="user-menu" id="user-menu">
<div class="user-menu-header">
<!-- userVignette (avatar + name + email) mounted here by updateUserMenuData() -->
</div>
<div class="user-menu-role-badge hidden" id="user-menu-role-badge">
<span class="role-badge role-badge-admin"><i class="fas fa-shield-alt"></i> Admin</span>
</div>
<div class="user-menu-storage">
<div class="user-menu-storage-label">
<i class="fas fa-database"></i>
<span data-i18n="storage.title">Storage</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% used</div>
</div>
<div class="user-menu-divider"></div>
<button class="user-menu-item user-menu-admin hidden" id="user-menu-admin">
<i class="fas fa-cogs"></i>
<span data-i18n="user_menu.admin_panel">Admin panel</span>
</button>
<button class="user-menu-item user-menu-groups hidden" id="user-menu-groups">
<i class="fas fa-user-group"></i>
<span data-i18n="user_menu.manage_groups">Manage groups</span>
</button>
<button class="user-menu-item" id="user-menu-profile">
<i class="fas fa-user-circle"></i>
<span data-i18n="user_menu.profile">My profile</span>
</button>
<div class="user-menu-divider hidden" id="user-menu-admin-divider"></div>
<div id="language-selector"></div>
<div class="user-menu-item user-menu-item--theme">
<i class="fas fa-adjust" aria-hidden="true"></i>
<span data-i18n="user_menu.appearance">Appearance</span>
<div class="theme-segmented" id="user-menu-theme-segmented" role="radiogroup" data-i18n-aria-label="user_menu.appearance" aria-label="Appearance">
<button type="button" class="theme-segmented__opt" data-mode="light"
role="radio" aria-checked="false"
data-i18n-title="user_menu.theme.light" title="Light"
data-i18n-aria-label="user_menu.theme.light" aria-label="Light">
<i class="fas fa-sun"></i>
</button>
<button type="button" class="theme-segmented__opt" data-mode="auto"
role="radio" aria-checked="false"
data-i18n-title="user_menu.theme.auto" title="Like OS"
data-i18n-aria-label="user_menu.theme.auto" aria-label="Like OS">
<i class="fas fa-desktop"></i>
</button>
<button type="button" class="theme-segmented__opt" data-mode="dark"
role="radio" aria-checked="false"
data-i18n-title="user_menu.theme.dark" title="Dark"
data-i18n-aria-label="user_menu.theme.dark" aria-label="Dark">
<i class="fas fa-moon"></i>
</button>
</div>
</div>
<button class="user-menu-item" id="user-menu-about">
<i class="fas fa-info-circle"></i>
<span data-i18n="user_menu.about">About 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">Log out</span>
</button>
</div>
</div>
</div>
</div>
<div class="content-area" role="main" id="main">
<h1 class="page-title" data-i18n="nav.files">Files</h1>
<div class="page-sticky-header" id="page-sticky-header">
<div class="actions-bar" id="actions-bar"><!-- content will be set up by JS --></div>
<div class="breadcrumb">
<span class="breadcrumb-item" data-i18n="breadcrumb.home">Home</span>
</div>
<div class="dropzone hidden" id="dropzone">
<i class="fas fa-cloud-upload-alt dropzone-icon"></i>
<p data-i18n="dropzone.drag_files">Drag files here or click to select</p>
<input type="file" id="file-input" class="hidden" multiple>
<input type="file" id="folder-input" class="hidden" webkitdirectory directory multiple>
<div class="upload-progress hidden">
<div class="progress-bar">
<div class="progress-fill"></div>
</div>
</div>
</div>
</div>
<!-- Files Container -->
<div class="files-container">
<!-- List View (hidden by default) -->
<div class="files-list-view" id="files-list">
<!-- Files will be populated here in list view -->
</div>
<div class="empty-state hidden" id="files-container-error"></div>
</div>
</div>
</div>
<!-- Input Modal (for New Folder, Rename, etc.) -->
<div id="input-modal" class="modal-overlay hidden">
<div class="modal-container" role="dialog" aria-modal="true" aria-labelledby="modal-title">
<div class="modal-header">
<div class="modal-icon">
<i id="modal-icon" class="fas fa-folder-plus"></i>
</div>
<h2 id="modal-title" data-i18n="dialogs.new_folder_title">New folder</h2>
<button class="modal-close-btn" id="modal-close-btn" aria-label="Close" data-i18n-aria-label="actions.close">
<i class="fas fa-times" aria-hidden="true"></i>
</button>
</div>
<div class="modal-body">
<label id="modal-label" for="modal-input" data-i18n="dialogs.folder_name">Folder name</label>
<input type="text" id="modal-input" class="modal-input" placeholder="" autocomplete="off">
<p id="modal-error" class="modal-error hidden"></p>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" id="modal-cancel-btn" data-i18n="actions.cancel">Cancel</button>
<button class="btn btn-primary" id="modal-confirm-btn" data-i18n="actions.confirm">Create</button>
</div>
</div>
</div>
<!-- About Modal -->
<div class="about-modal-overlay hidden" id="about-modal-overlay">
<div class="about-modal" role="dialog" aria-modal="true" aria-labelledby="about-modal-title">
<div class="about-modal-logo">
<svg viewBox="120 120 280 280"><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"/></svg>
</div>
<h2 id="about-modal-title">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 &amp; 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/AtalayaLabs/OxiCloud/" 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">Close</button>
</div>
</div>
<div id="debug"></div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink