kodi
329 lines
16 KiB
HTML
329 lines
16 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>WebManager v2</title>
|
|
<link rel="stylesheet" href="/ui/base.css">
|
|
<link rel="stylesheet" href="/ui/theme-default.css">
|
|
<link rel="stylesheet" href="/ui/theme-macos-soft.css">
|
|
<link rel="stylesheet" href="/ui/theme-midnight.css">
|
|
<link rel="stylesheet" href="/ui/theme-graphite.css">
|
|
<link rel="stylesheet" href="/ui/theme-windows11.css">
|
|
<link rel="stylesheet" href="/ui/theme-commander-electric.css">
|
|
<link rel="stylesheet" href="/ui/theme-nord-arctic.css">
|
|
<link rel="stylesheet" href="/ui/theme-catppuccin-soft.css">
|
|
<link rel="stylesheet" href="/ui/theme-fluent-neon.css">
|
|
</head>
|
|
<body>
|
|
<div id="app-shell">
|
|
<header id="title-zone">
|
|
<h1>WebManager v2</h1>
|
|
<div id="title-zone-actions">
|
|
<div id="status"></div>
|
|
<button id="theme-toggle" type="button" aria-label="Toggle theme" title="Toggle theme">
|
|
<span id="theme-toggle-icon" aria-hidden="true">☾</span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main id="workspace" class="workspace">
|
|
<section class="panel pane" id="left-pane" data-pane="left">
|
|
<div class="pane-header">
|
|
<div class="toolbar compact-toolbar pane-topbar">
|
|
<label class="checkbox"><input id="left-hidden-toggle" type="checkbox">Hidden</label>
|
|
</div>
|
|
<nav id="left-breadcrumbs" class="breadcrumbs" aria-label="Left breadcrumb"></nav>
|
|
<div id="left-browse-error" class="error"></div>
|
|
</div>
|
|
|
|
<div class="pane-content">
|
|
<div class="pane-list-header">
|
|
<div class="list-grid-header">
|
|
<span class="col-name">Name</span>
|
|
<span class="col-size">Size</span>
|
|
<span class="col-modified">Modified</span>
|
|
</div>
|
|
</div>
|
|
<div class="pane-list-scroll">
|
|
<ul id="left-items" class="list"></ul>
|
|
</div>
|
|
</div>
|
|
<div id="left-focus-line" class="pane-focus-line" aria-live="polite">
|
|
<span id="left-focus-name" class="pane-focus-name">—</span>
|
|
<span id="left-focus-selected" class="pane-focus-selected hidden"></span>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel pane" id="right-pane" data-pane="right">
|
|
<div class="pane-header">
|
|
<div class="toolbar compact-toolbar pane-topbar">
|
|
<label class="checkbox"><input id="right-hidden-toggle" type="checkbox">Hidden</label>
|
|
</div>
|
|
<nav id="right-breadcrumbs" class="breadcrumbs" aria-label="Right breadcrumb"></nav>
|
|
<div id="right-browse-error" class="error"></div>
|
|
</div>
|
|
|
|
<div class="pane-content">
|
|
<div class="pane-list-header">
|
|
<div class="list-grid-header">
|
|
<span class="col-name">Name</span>
|
|
<span class="col-size">Size</span>
|
|
<span class="col-modified">Modified</span>
|
|
</div>
|
|
</div>
|
|
<div class="pane-list-scroll">
|
|
<ul id="right-items" class="list"></ul>
|
|
</div>
|
|
</div>
|
|
<div id="right-focus-line" class="pane-focus-line" aria-live="polite">
|
|
<span id="right-focus-name" class="pane-focus-name">—</span>
|
|
<span id="right-focus-selected" class="pane-focus-selected hidden"></span>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<section id="footer-bar">
|
|
<div id="function-bar" class="toolbar compact-toolbar">
|
|
<div id="upload-menu" class="split-button upload-menu">
|
|
<button id="upload-btn" type="button"><span>Upload Files</span></button>
|
|
<button id="upload-menu-toggle" type="button" aria-haspopup="menu" aria-expanded="false" aria-label="Upload options">
|
|
<span aria-hidden="true">▾</span>
|
|
</button>
|
|
<div id="upload-menu-popup" class="split-menu hidden" role="menu" aria-label="Upload options">
|
|
<button id="upload-folder-btn" type="button" role="menuitem"><span>Upload Folder</span></button>
|
|
</div>
|
|
</div>
|
|
<button id="settings-btn" type="button"><span class="shortcut-hint">F1</span><span>Settings</span></button>
|
|
<button id="rename-btn" type="button" disabled><span class="shortcut-hint">F2</span><span>Rename</span></button>
|
|
<button id="view-btn" type="button" disabled><span class="shortcut-hint">F3</span><span>View</span></button>
|
|
<button id="edit-btn" type="button" disabled><span class="shortcut-hint">F4</span><span>Edit</span></button>
|
|
<button id="copy-btn" type="button" disabled><span class="shortcut-hint">F5</span><span>Copy</span></button>
|
|
<button id="move-btn" type="button" disabled><span class="shortcut-hint">F6</span><span>Move</span></button>
|
|
<button id="mkdir-btn" type="button"><span class="shortcut-hint">F7</span><span>MKdir</span></button>
|
|
<button id="delete-btn" type="button" disabled><span class="shortcut-hint">F8</span><span>Delete</span></button>
|
|
</div>
|
|
<input id="upload-input" type="file" multiple hidden>
|
|
<div id="actions-error" class="error"></div>
|
|
</section>
|
|
</div>
|
|
|
|
<div id="settings-modal" class="popup-overlay hidden" role="dialog" aria-modal="true" aria-labelledby="settings-title">
|
|
<div class="popup-card settings-card">
|
|
<button id="settings-close-btn" class="viewer-close" type="button" aria-label="Close settings">X</button>
|
|
<h3 id="settings-title">Settings</h3>
|
|
<div class="settings-tabs" role="tablist" aria-label="Settings tabs">
|
|
<button id="settings-general-tab" class="settings-tab is-active" type="button" role="tab" aria-selected="true">General</button>
|
|
<button id="settings-interface-tab" class="settings-tab" type="button" role="tab" aria-selected="false">Interface</button>
|
|
<button id="settings-logs-tab" class="settings-tab" type="button" role="tab" aria-selected="false">Logs</button>
|
|
</div>
|
|
<section id="settings-general-panel" class="settings-panel" role="tabpanel" aria-labelledby="settings-general-tab">
|
|
<div class="settings-placeholder-title">General</div>
|
|
<label class="settings-option" for="settings-show-thumbnails">
|
|
<input id="settings-show-thumbnails" type="checkbox">
|
|
<span>Show thumbnails</span>
|
|
</label>
|
|
<div class="popup-meta">Image thumbnails are available for jpg, jpeg, png and webp files.</div>
|
|
<label class="settings-field" for="settings-startup-path-left">
|
|
<span>Preferred startup path (left)</span>
|
|
<input id="settings-startup-path-left" type="text" autocomplete="off" placeholder="/Volumes or storage1/path">
|
|
</label>
|
|
<label class="settings-field" for="settings-startup-path-right">
|
|
<span>Preferred startup path (right)</span>
|
|
<input id="settings-startup-path-right" type="text" autocomplete="off" placeholder="/Volumes or storage1/path">
|
|
</label>
|
|
<div id="settings-general-error" class="error"></div>
|
|
<div class="settings-actions">
|
|
<button id="settings-general-save-btn" type="button">Save</button>
|
|
</div>
|
|
</section>
|
|
<section id="settings-interface-panel" class="settings-panel hidden" role="tabpanel" aria-labelledby="settings-interface-tab">
|
|
<div class="settings-placeholder-title">Interface</div>
|
|
<label class="settings-field" for="settings-selected-theme">
|
|
<span>Theme</span>
|
|
<select id="settings-selected-theme">
|
|
<option value="default">Default</option>
|
|
<option value="macos-soft">macOS Soft</option>
|
|
<option value="midnight">Midnight</option>
|
|
<option value="graphite">Graphite</option>
|
|
<option value="windows11">Windows 11</option>
|
|
<option value="commander-electric">Commander Electric</option>
|
|
<option value="nord-arctic">Nord Arctic</option>
|
|
<option value="catppuccin-soft">Catppuccin Soft</option>
|
|
<option value="fluent-neon">Fluent Neon</option>
|
|
</select>
|
|
</label>
|
|
<div id="settings-interface-error" class="error"></div>
|
|
<div class="settings-actions">
|
|
<button id="settings-interface-save-btn" type="button">Save</button>
|
|
</div>
|
|
</section>
|
|
<section id="settings-logs-panel" class="settings-panel hidden" role="tabpanel" aria-labelledby="settings-logs-tab">
|
|
<div id="settings-logs-error" class="error"></div>
|
|
<div id="settings-logs-list" class="settings-log-list"></div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="upload-modal" class="popup-overlay hidden" role="dialog" aria-modal="true" aria-labelledby="upload-modal-title">
|
|
<div class="popup-card upload-modal-card">
|
|
<h3 id="upload-modal-title">Uploading</h3>
|
|
<div id="upload-modal-target" class="popup-meta"></div>
|
|
<div id="upload-modal-current-file" class="popup-meta"></div>
|
|
<div class="upload-modal-progress">
|
|
<div id="upload-modal-progress-bar" class="upload-modal-progress-bar"></div>
|
|
</div>
|
|
<div id="upload-modal-count" class="upload-modal-count"></div>
|
|
<div id="upload-modal-status" class="popup-meta"></div>
|
|
<div class="popup-actions">
|
|
<button id="upload-modal-cancel-btn" type="button">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="search-modal" class="popup-overlay hidden" role="dialog" aria-modal="true" aria-labelledby="search-title">
|
|
<div class="popup-card search-card">
|
|
<button id="search-close-btn" class="viewer-close" type="button" aria-label="Close search">X</button>
|
|
<h3 id="search-title">Search</h3>
|
|
<div id="search-context" class="popup-meta"></div>
|
|
<label for="search-input" class="popup-label">Query</label>
|
|
<input id="search-input" class="search-input" type="text" autocomplete="off" placeholder="Enter at least 3 characters">
|
|
<div id="search-error" class="error"></div>
|
|
<div id="search-results" class="search-results"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="info-modal" class="popup-overlay hidden" role="dialog" aria-modal="true" aria-labelledby="info-title">
|
|
<div class="popup-card info-card">
|
|
<button id="info-close-btn" class="viewer-close" type="button" aria-label="Close info">X</button>
|
|
<h3 id="info-title">Info</h3>
|
|
<div id="info-error" class="error"></div>
|
|
<div id="info-grid" class="info-grid"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="wildcard-popup" class="popup-overlay hidden" role="dialog" aria-modal="true" aria-labelledby="wildcard-popup-title">
|
|
<div class="popup-card">
|
|
<h3 id="wildcard-popup-title">Wildcard Select</h3>
|
|
<div id="wildcard-popup-meta" class="popup-meta"></div>
|
|
<label for="wildcard-pattern-input" class="popup-label">Pattern</label>
|
|
<input id="wildcard-pattern-input" type="text" autocomplete="off" placeholder="*.mkv">
|
|
<div id="wildcard-popup-error" class="error"></div>
|
|
<div class="popup-actions">
|
|
<button id="wildcard-apply-btn" type="button">Apply</button>
|
|
<button id="wildcard-cancel-btn" type="button">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="move-popup" class="popup-overlay hidden" role="dialog" aria-modal="true" aria-labelledby="move-title">
|
|
<div class="popup-card">
|
|
<button id="move-close-btn" class="viewer-close" type="button" aria-label="Close move">X</button>
|
|
<h3 id="move-title">Move</h3>
|
|
<div id="move-source" class="popup-meta"></div>
|
|
<label for="move-input" class="popup-label">Target path</label>
|
|
<input id="move-input" type="text" autocomplete="off">
|
|
<div id="move-error" class="error"></div>
|
|
<div class="popup-actions">
|
|
<button id="move-apply-btn" type="button">Move</button>
|
|
<button id="move-cancel-btn" type="button">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="rename-popup" class="popup-overlay hidden" role="dialog" aria-modal="true" aria-labelledby="rename-title">
|
|
<div class="popup-card">
|
|
<button id="rename-close-btn" class="viewer-close" type="button" aria-label="Close rename">X</button>
|
|
<h3 id="rename-title">Rename</h3>
|
|
<label for="rename-input" class="popup-label">Name</label>
|
|
<input id="rename-input" type="text" autocomplete="off">
|
|
<div id="rename-error" class="error"></div>
|
|
<div class="popup-actions">
|
|
<button id="rename-apply-btn" type="button">Rename</button>
|
|
<button id="rename-cancel-btn" type="button">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="batch-move-popup" class="popup-overlay hidden" role="dialog" aria-modal="true" aria-labelledby="batch-move-title">
|
|
<div class="popup-card">
|
|
<h3 id="batch-move-title">Batch Move</h3>
|
|
<div id="batch-move-count" class="popup-meta"></div>
|
|
<div id="batch-move-destination" class="popup-meta"></div>
|
|
<div id="batch-move-error" class="error"></div>
|
|
<div class="popup-actions">
|
|
<button id="batch-move-apply-btn" type="button">Move</button>
|
|
<button id="batch-move-cancel-btn" type="button">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="viewer-modal" class="popup-overlay hidden" role="dialog" aria-modal="true" aria-labelledby="viewer-title">
|
|
<div class="popup-card viewer-card">
|
|
<button id="viewer-close-btn" class="viewer-close" type="button" aria-label="Close viewer">X</button>
|
|
<h3 id="viewer-title">View</h3>
|
|
<div id="viewer-file-name" class="popup-meta"></div>
|
|
<div id="viewer-file-path" class="popup-meta"></div>
|
|
<div id="viewer-error" class="error"></div>
|
|
<pre id="viewer-content" class="viewer-content"></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="video-modal" class="popup-overlay hidden" role="dialog" aria-modal="true" aria-labelledby="video-title">
|
|
<div class="popup-card viewer-card">
|
|
<button id="video-close-btn" class="viewer-close" type="button" aria-label="Close video">X</button>
|
|
<h3 id="video-title">Video</h3>
|
|
<div id="video-file-name" class="popup-meta"></div>
|
|
<div id="video-file-path" class="popup-meta"></div>
|
|
<div id="video-error" class="error"></div>
|
|
<video id="video-player" class="video-player" controls playsinline preload="metadata"></video>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="pdf-modal" class="popup-overlay hidden" role="dialog" aria-modal="true" aria-labelledby="pdf-title">
|
|
<div class="popup-card viewer-card">
|
|
<button id="pdf-close-btn" class="viewer-close" type="button" aria-label="Close pdf">X</button>
|
|
<h3 id="pdf-title">PDF</h3>
|
|
<div id="pdf-file-name" class="popup-meta"></div>
|
|
<div id="pdf-file-path" class="popup-meta"></div>
|
|
<div id="pdf-error" class="error"></div>
|
|
<iframe id="pdf-frame" class="pdf-frame" title="PDF viewer"></iframe>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="image-modal" class="popup-overlay hidden" role="dialog" aria-modal="true" aria-labelledby="image-title">
|
|
<div class="popup-card viewer-card image-card">
|
|
<button id="image-close-btn" class="viewer-close" type="button" aria-label="Close image">X</button>
|
|
<h3 id="image-title">Image</h3>
|
|
<div id="image-file-name" class="popup-meta"></div>
|
|
<div id="image-file-path" class="popup-meta"></div>
|
|
<div class="image-toolbar">
|
|
<button id="image-zoom-out-btn" type="button">Zoom out</button>
|
|
<button id="image-reset-btn" type="button">Reset</button>
|
|
<button id="image-zoom-in-btn" type="button">Zoom in</button>
|
|
</div>
|
|
<div id="image-error" class="error"></div>
|
|
<div id="image-viewport" class="image-viewport">
|
|
<img id="image-viewer-img" class="image-viewer-img" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="editor-modal" class="popup-overlay hidden" role="dialog" aria-modal="true" aria-labelledby="editor-title">
|
|
<div class="popup-card viewer-card editor-card">
|
|
<button id="editor-close-btn" class="viewer-close" type="button" aria-label="Close editor">X</button>
|
|
<h3 id="editor-title">Edit</h3>
|
|
<div id="editor-file-name" class="popup-meta"></div>
|
|
<div id="editor-file-path" class="popup-meta"></div>
|
|
<div id="editor-error" class="error"></div>
|
|
<div id="editor-host" class="editor-host" aria-label="Code editor"></div>
|
|
<div class="popup-actions">
|
|
<button id="editor-save-btn" type="button">Save</button>
|
|
<button id="editor-cancel-btn" type="button">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/ui/app.js"></script>
|
|
</body>
|
|
</html>
|