mirror of
https://github.com/seregonwar/zftpd.git
synced 2026-10-22 03:32:24 -05:00
Replace the embedded UI with a file manager: sidebar, details table, keyboard shortcuts, uploads, copy/move and extraction. Games, System, Transfers and Settings use the same components. The previous UI is archived in web/legacy/ and left out of the embedded resources. The restyle is flat: donation banner, credits with the maintainer photo, and no gradients or card shadows. JavaScript stays ES5.
369 lines
25 KiB
HTML
369 lines
25 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="color-scheme" content="light dark">
|
|
<title>zftpd</title>
|
|
<!-- CSRF_TOKEN -->
|
|
<link rel="icon" type="image/png" href="img/zftpd-mark.png">
|
|
<link rel="stylesheet" href="css/app.css">
|
|
<script>
|
|
(function () {
|
|
try {
|
|
var s = JSON.parse(localStorage.getItem('zftpd.settings') || '{}');
|
|
var t = s.theme || 'system';
|
|
var d = document.documentElement;
|
|
if (t === 'system') {
|
|
t = (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) ? 'dark' : 'light';
|
|
}
|
|
d.setAttribute('data-theme', t);
|
|
if (s.density === 'compact') d.className += ' density-compact';
|
|
if (s.sidebarCollapsed) d.className += ' sidebar-collapsed';
|
|
} catch (e) {}
|
|
})();
|
|
</script>
|
|
</head>
|
|
<body>
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position:absolute;width:0;height:0;overflow:hidden" aria-hidden="true">
|
|
<symbol id="i-folder" viewBox="0 0 24 24"><path d="M3 7.5A2.5 2.5 0 0 1 5.5 5H9l2 2h7.5A2.5 2.5 0 0 1 21 9.5v8a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5z"/></symbol>
|
|
<symbol id="i-folder-plus" viewBox="0 0 24 24"><path d="M3 7.5A2.5 2.5 0 0 1 5.5 5H9l2 2h7.5A2.5 2.5 0 0 1 21 9.5v8a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5z"/><path d="M12 10.5v6M9 13.5h6"/></symbol>
|
|
<symbol id="i-file" viewBox="0 0 24 24"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/></symbol>
|
|
<symbol id="i-file-plus" viewBox="0 0 24 24"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5M12 11v6M9 14h6"/></symbol>
|
|
<symbol id="i-file-text" viewBox="0 0 24 24"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5M9 13h6M9 17h6"/></symbol>
|
|
<symbol id="i-image" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2"/><circle cx="8.5" cy="9.5" r="1.5"/><path d="M21 15.5l-5-5L6 20"/></symbol>
|
|
<symbol id="i-video" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M10 9.5v5l4-2.5z"/></symbol>
|
|
<symbol id="i-audio" viewBox="0 0 24 24"><path d="M9 18V6l11-2v12"/><circle cx="6.5" cy="18" r="2.5"/><circle cx="17.5" cy="16" r="2.5"/></symbol>
|
|
<symbol id="i-archive" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="5" rx="1"/><path d="M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4"/></symbol>
|
|
<symbol id="i-package" viewBox="0 0 24 24"><path d="M21 8l-9-5-9 5v8l9 5 9-5z"/><path d="M3 8l9 5 9-5M12 13v8"/></symbol>
|
|
<symbol id="i-disc" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="2.5"/></symbol>
|
|
<symbol id="i-code" viewBox="0 0 24 24"><path d="M9 8l-4 4 4 4M15 8l4 4-4 4"/></symbol>
|
|
<symbol id="i-chevron-right" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"/></symbol>
|
|
<symbol id="i-chevron-left" viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6"/></symbol>
|
|
<symbol id="i-chevron-down" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></symbol>
|
|
<symbol id="i-arrow-left" viewBox="0 0 24 24"><path d="M19 12H5M11 6l-6 6 6 6"/></symbol>
|
|
<symbol id="i-arrow-right" viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></symbol>
|
|
<symbol id="i-arrow-up" viewBox="0 0 24 24"><path d="M12 19V5M6 11l6-6 6 6"/></symbol>
|
|
<symbol id="i-refresh" viewBox="0 0 24 24"><path d="M20 12a8 8 0 1 1-2.34-5.66"/><path d="M20 4v5h-5"/></symbol>
|
|
<symbol id="i-upload" viewBox="0 0 24 24"><path d="M12 15V4M7 9l5-5 5 5"/><path d="M4 15v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3"/></symbol>
|
|
<symbol id="i-download" viewBox="0 0 24 24"><path d="M12 4v11M7 10l5 5 5-5"/><path d="M4 15v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3"/></symbol>
|
|
<symbol id="i-trash" viewBox="0 0 24 24"><path d="M4 7h16M10 11v6M14 11v6M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12M9 7V4h6v3"/></symbol>
|
|
<symbol id="i-pencil" viewBox="0 0 24 24"><path d="M4 20h4L19 9l-4-4L4 16z"/><path d="M13.5 6.5l4 4"/></symbol>
|
|
<symbol id="i-copy" viewBox="0 0 24 24"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15H4.5A1.5 1.5 0 0 1 3 13.5v-9A1.5 1.5 0 0 1 4.5 3h9A1.5 1.5 0 0 1 15 4.5V5"/></symbol>
|
|
<symbol id="i-move" viewBox="0 0 24 24"><path d="M3 7.5A2.5 2.5 0 0 1 5.5 5H9l2 2h7.5A2.5 2.5 0 0 1 21 9.5v8a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5z"/><path d="M9 13.5h6M13 11l2.5 2.5L13 16"/></symbol>
|
|
<symbol id="i-x" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></symbol>
|
|
<symbol id="i-plus" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></symbol>
|
|
<symbol id="i-check" viewBox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5"/></symbol>
|
|
<symbol id="i-search" viewBox="0 0 24 24"><circle cx="11" cy="11" r="6.5"/><path d="M20 20l-4.2-4.2"/></symbol>
|
|
<symbol id="i-more" viewBox="0 0 24 24"><circle cx="5.5" cy="12" r="1.5" fill="currentColor" stroke="none"/><circle cx="12" cy="12" r="1.5" fill="currentColor" stroke="none"/><circle cx="18.5" cy="12" r="1.5" fill="currentColor" stroke="none"/></symbol>
|
|
<symbol id="i-alert" viewBox="0 0 24 24"><path d="M10.3 4.3L2.6 18a2 2 0 0 0 1.7 3h15.4a2 2 0 0 0 1.7-3L13.7 4.3a2 2 0 0 0-3.4 0z"/><path d="M12 10v4M12 17.5v.01"/></symbol>
|
|
<symbol id="i-info" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8v.01"/></symbol>
|
|
<symbol id="i-check-circle" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M8 12.5l3 3 5-6"/></symbol>
|
|
<symbol id="i-x-circle" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M9 9l6 6M15 9l-6 6"/></symbol>
|
|
<symbol id="i-server" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="7" rx="1.5"/><rect x="3" y="13" width="18" height="7" rx="1.5"/><path d="M7 7.5h.01M7 16.5h.01"/></symbol>
|
|
<symbol id="i-drive" viewBox="0 0 24 24"><path d="M3 13l2.6-6.4A1 1 0 0 1 6.5 6h11a1 1 0 0 1 .9.6L21 13v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z"/><path d="M3 13h18M17 16h.01"/></symbol>
|
|
<symbol id="i-cpu" viewBox="0 0 24 24"><rect x="5" y="5" width="14" height="14" rx="2"/><rect x="9" y="9" width="6" height="6" rx="1"/><path d="M9 2v3M15 2v3M9 19v3M15 19v3M2 9h3M2 15h3M19 9h3M19 15h3"/></symbol>
|
|
<symbol id="i-memory" viewBox="0 0 24 24"><rect x="3" y="7" width="18" height="10" rx="1.5"/><path d="M7 11v2M11 11v2M15 11v2M6 17v3M10 17v3M14 17v3M18 17v3"/></symbol>
|
|
<symbol id="i-thermo" viewBox="0 0 24 24"><path d="M14 14.8V5a2 2 0 0 0-4 0v9.8a4 4 0 1 0 4 0z"/><path d="M12 9v7"/></symbol>
|
|
<symbol id="i-clock" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></symbol>
|
|
<symbol id="i-gamepad" viewBox="0 0 24 24"><path d="M7.5 7h9a4.5 4.5 0 0 1 4.5 4.5V14a3.5 3.5 0 0 1-6.2 2.2L14 15h-4l-.8 1.2A3.5 3.5 0 0 1 3 14v-2.5A4.5 4.5 0 0 1 7.5 7z"/><path d="M8 10v3M6.5 11.5h3M15.5 11h.01M17.5 12.5h.01"/></symbol>
|
|
<symbol id="i-sliders" viewBox="0 0 24 24"><path d="M4 6h9M17 6h3M4 12h3M11 12h9M4 18h11M19 18h1"/><circle cx="15" cy="6" r="2"/><circle cx="9" cy="12" r="2"/><circle cx="17" cy="18" r="2"/></symbol>
|
|
<symbol id="i-transfer" viewBox="0 0 24 24"><path d="M7 20V5M3 9l4-4 4 4M17 4v15M13 15l4 4 4-4"/></symbol>
|
|
<symbol id="i-link" viewBox="0 0 24 24"><path d="M10 14a4 4 0 0 0 5.66 0l3-3a4 4 0 0 0-5.66-5.66l-1.2 1.2"/><path d="M14 10a4 4 0 0 0-5.66 0l-3 3a4 4 0 0 0 5.66 5.66l1.2-1.2"/></symbol>
|
|
<symbol id="i-globe" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></symbol>
|
|
<symbol id="i-pause" viewBox="0 0 24 24"><path d="M9 6v12M15 6v12"/></symbol>
|
|
<symbol id="i-play" viewBox="0 0 24 24"><path d="M8 5.5v13l10.5-6.5z"/></symbol>
|
|
<symbol id="i-menu" viewBox="0 0 24 24"><path d="M4 7h16M4 12h16M4 17h16"/></symbol>
|
|
<symbol id="i-bookmark" viewBox="0 0 24 24"><path d="M7 4h10v16l-5-4-5 4z"/></symbol>
|
|
<symbol id="i-eye" viewBox="0 0 24 24"><path d="M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z"/><circle cx="12" cy="12" r="3"/></symbol>
|
|
<symbol id="i-external" viewBox="0 0 24 24"><path d="M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5"/></symbol>
|
|
<symbol id="i-wrench" viewBox="0 0 24 24"><path d="M14.7 6.3a4 4 0 0 0 5 5L12 19a2.12 2.12 0 0 1-3-3l7.7-7.7a4 4 0 0 1-2-2z"/><path d="M14.7 6.3L17 4l3 3-2.3 2.3"/></symbol>
|
|
<symbol id="i-power" viewBox="0 0 24 24"><path d="M12 3v8"/><path d="M6.3 6.3a8 8 0 1 0 11.4 0"/></symbol>
|
|
<symbol id="i-bell" viewBox="0 0 24 24"><path d="M6 16v-5a6 6 0 0 1 12 0v5l1.5 2h-15z"/><path d="M10 20.5a2 2 0 0 0 4 0"/></symbol>
|
|
<symbol id="i-fan" viewBox="0 0 24 24"><circle cx="12" cy="12" r="1.5"/><path d="M12 10.5C12 6 13 3 16 3s3 4-1.5 6.5M13.5 12c4.5 0 7.5 1 7.5 4s-4 3-6.5-1.5M12 13.5c0 4.5-1 7.5-4 7.5s-3-4 1.5-6.5M10.5 12C6 12 3 11 3 8s4-3 6.5 1.5"/></symbol>
|
|
<symbol id="i-shield" viewBox="0 0 24 24"><path d="M12 3l8 3v6c0 4.5-3.4 8-8 9-4.6-1-8-4.5-8-9V6z"/></symbol>
|
|
<symbol id="i-terminal" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M7 9l3 3-3 3M13 15h4"/></symbol>
|
|
<symbol id="i-heart" viewBox="0 0 24 24"><path d="M19 14c1.5-1.5 3-3.2 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.8 0-3 .5-4.5 2-1.5-1.5-2.7-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4 3 5.5l7 7z"/></symbol>
|
|
<symbol id="i-github" viewBox="0 0 24 24"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.1-1.3-.3-2.5-1-3.5.3-1.2.3-2.4 0-3.5 0 0-1 0-3 1.5-2.6-.5-5.4-.5-8 0C6 2 5 2 5 2c-.3 1.2-.3 2.4 0 3.5A5.4 5.4 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.4.5-.7 1-.9 1.7-.2.6-.2 1.2-.1 1.8v4"/><path d="M9 18c-4.5 2-5-2-7-2"/></symbol>
|
|
<symbol id="i-issue" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="1.5"/></symbol>
|
|
<symbol id="i-chevrons-left" viewBox="0 0 24 24"><path d="M11 17l-5-5 5-5M18 17l-5-5 5-5"/></symbol>
|
|
<symbol id="i-brand-x" viewBox="0 0 24 24"><path d="M4.5 4h4L19.5 20h-4z"/><path d="M19 4l-6.1 6.8M5 20l6.1-6.8"/></symbol>
|
|
</svg>
|
|
|
|
<div class="promo" id="promo" role="region" aria-label="Support zftpd">
|
|
<div class="promo-inner">
|
|
<svg class="ic promo-heart" aria-hidden="true"><use xlink:href="#i-heart"></use></svg>
|
|
<span class="promo-text"><strong>zftpd is free and open source.</strong><span class="promo-long"> If it saves you time, please consider supporting its development.</span></span>
|
|
<a class="promo-cta" href="https://www.seregonwar.com/donations" target="_blank" rel="noopener noreferrer"><span>Donate</span><svg class="ic" aria-hidden="true"><use xlink:href="#i-external"></use></svg></a>
|
|
</div>
|
|
<button class="promo-close" id="promo-close" type="button" title="Hide for this session" aria-label="Hide donation banner"><svg class="ic" aria-hidden="true"><use xlink:href="#i-x"></use></svg></button>
|
|
</div>
|
|
|
|
<div class="app" id="app">
|
|
<aside class="sidebar" id="sidebar" aria-label="Navigation">
|
|
<div class="brand">
|
|
<img class="brand-mark" src="img/zftpd-mark.png" width="44" height="44" alt="">
|
|
<div class="brand-text">
|
|
<img class="brand-word" src="img/zftpd-wordmark.png" width="78" height="24" alt="zftpd">
|
|
<span class="brand-host" id="brand-host"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<nav class="nav" id="nav">
|
|
<a class="nav-item" href="#/files" data-view="files"><svg class="ic" aria-hidden="true"><use xlink:href="#i-folder"></use></svg><span class="nav-label">Files</span></a>
|
|
<a class="nav-item" href="#/transfers" data-view="transfers"><svg class="ic" aria-hidden="true"><use xlink:href="#i-transfer"></use></svg><span class="nav-label">Transfers</span><span class="badge" id="nav-badge" hidden></span></a>
|
|
<a class="nav-item" href="#/games" data-view="games"><svg class="ic" aria-hidden="true"><use xlink:href="#i-gamepad"></use></svg><span class="nav-label">Games</span></a>
|
|
<a class="nav-item" href="#/system" data-view="system"><svg class="ic" aria-hidden="true"><use xlink:href="#i-server"></use></svg><span class="nav-label">System</span></a>
|
|
<a class="nav-item" href="#/settings" data-view="settings"><svg class="ic" aria-hidden="true"><use xlink:href="#i-sliders"></use></svg><span class="nav-label">Settings</span></a>
|
|
</nav>
|
|
|
|
<div class="side-section">
|
|
<div class="side-label">Places</div>
|
|
<div class="places" id="places"></div>
|
|
</div>
|
|
|
|
<div class="side-foot">
|
|
<a class="side-support" href="https://www.seregonwar.com/donations" target="_blank" rel="noopener noreferrer" title="Support zftpd">
|
|
<svg class="ic" aria-hidden="true"><use xlink:href="#i-heart"></use></svg><span class="side-label-text">Support zftpd</span>
|
|
</a>
|
|
<div class="side-meta">
|
|
<div class="side-status">
|
|
<div class="conn is-connecting" id="conn" role="status">
|
|
<span class="conn-dot" aria-hidden="true"></span>
|
|
<span class="conn-text" id="conn-text">Connecting</span>
|
|
</div>
|
|
<div class="side-version" id="side-version"></div>
|
|
</div>
|
|
<button class="side-collapse" id="side-collapse" type="button" title="Collapse sidebar (Ctrl+B)" aria-label="Collapse sidebar" aria-expanded="true" aria-controls="sidebar"><svg class="ic" aria-hidden="true"><use xlink:href="#i-chevrons-left"></use></svg></button>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
<div class="scrim" id="scrim"></div>
|
|
|
|
<div class="main">
|
|
<header class="mobilebar">
|
|
<button class="btn btn-ghost btn-icon" id="nav-toggle" type="button" aria-label="Open navigation"><svg class="ic" aria-hidden="true"><use xlink:href="#i-menu"></use></svg></button>
|
|
<span class="mobilebar-title" id="mobile-title">Files</span>
|
|
</header>
|
|
|
|
<div class="banner banner-warning" id="conn-banner" role="alert" hidden>
|
|
<svg class="ic" aria-hidden="true"><use xlink:href="#i-alert"></use></svg>
|
|
<span class="banner-text" id="conn-banner-text">Connection lost.</span>
|
|
<button class="btn btn-sm" id="conn-retry" type="button">Retry now</button>
|
|
</div>
|
|
|
|
<main class="views">
|
|
|
|
<!-- Files -->
|
|
<section class="view view-files" id="view-files" hidden>
|
|
<div class="toolbar">
|
|
<div class="btn-group">
|
|
<button class="btn btn-ghost btn-icon" id="f-back" type="button" title="Back" aria-label="Back"><svg class="ic" aria-hidden="true"><use xlink:href="#i-arrow-left"></use></svg></button>
|
|
<button class="btn btn-ghost btn-icon" id="f-forward" type="button" title="Forward" aria-label="Forward"><svg class="ic" aria-hidden="true"><use xlink:href="#i-arrow-right"></use></svg></button>
|
|
<button class="btn btn-ghost btn-icon" id="f-up" type="button" title="Parent folder (Backspace)" aria-label="Parent folder"><svg class="ic" aria-hidden="true"><use xlink:href="#i-arrow-up"></use></svg></button>
|
|
</div>
|
|
<div class="pathbar" id="f-pathbar" title="Click to edit path (Ctrl+L)">
|
|
<div class="crumbs" id="f-crumbs"></div>
|
|
<input class="path-input" id="f-path-input" type="text" spellcheck="false" autocomplete="off" aria-label="Path" hidden>
|
|
</div>
|
|
<div class="search">
|
|
<svg class="ic" aria-hidden="true"><use xlink:href="#i-search"></use></svg>
|
|
<input class="input" id="f-filter" type="search" placeholder="Filter" aria-label="Filter this folder" spellcheck="false" autocomplete="off">
|
|
</div>
|
|
<button class="btn btn-ghost btn-icon" id="f-more" type="button" title="More" aria-label="More options"><svg class="ic" aria-hidden="true"><use xlink:href="#i-more"></use></svg></button>
|
|
</div>
|
|
|
|
<div class="commandbar" id="f-commands"></div>
|
|
|
|
<div class="filelist" id="f-list" tabindex="0" aria-label="Folder contents">
|
|
<table class="table files-table">
|
|
<colgroup>
|
|
<col class="col-check"><col class="col-name"><col class="col-type"><col class="col-size"><col class="col-actions">
|
|
</colgroup>
|
|
<thead>
|
|
<tr>
|
|
<th class="col-check"><input type="checkbox" class="check" id="f-check-all" aria-label="Select all"></th>
|
|
<th class="col-name"><button class="th-sort" type="button" data-sort="name">Name<svg class="ic sort-ic" aria-hidden="true"><use xlink:href="#i-chevron-down"></use></svg></button></th>
|
|
<th class="col-type"><button class="th-sort" type="button" data-sort="type">Type<svg class="ic sort-ic" aria-hidden="true"><use xlink:href="#i-chevron-down"></use></svg></button></th>
|
|
<th class="col-size"><button class="th-sort" type="button" data-sort="size">Size<svg class="ic sort-ic" aria-hidden="true"><use xlink:href="#i-chevron-down"></use></svg></button></th>
|
|
<th class="col-actions"><span class="sr-only">Actions</span></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="f-rows"></tbody>
|
|
</table>
|
|
<div class="list-state" id="f-state" hidden></div>
|
|
</div>
|
|
|
|
<div class="statusbar">
|
|
<span id="f-count"></span>
|
|
<span class="statusbar-sel" id="f-selinfo"></span>
|
|
<span class="statusbar-disk" id="f-disk"></span>
|
|
</div>
|
|
|
|
<div class="dropzone" id="f-drop" hidden>
|
|
<div class="dropzone-inner">
|
|
<svg class="ic" aria-hidden="true"><use xlink:href="#i-upload"></use></svg>
|
|
<div class="dropzone-title">Drop to upload</div>
|
|
<div class="dropzone-path" id="f-drop-path"></div>
|
|
</div>
|
|
</div>
|
|
<input type="file" id="f-upload-files" multiple hidden>
|
|
<input type="file" id="f-upload-folder" multiple webkitdirectory hidden>
|
|
</section>
|
|
|
|
<!-- Transfers -->
|
|
<section class="view page" id="view-transfers" hidden>
|
|
<div class="page-head page-head-plain">
|
|
<h1 class="page-title">Transfers</h1>
|
|
</div>
|
|
<div class="page-body">
|
|
<section class="section">
|
|
<div class="section-head"><h2 class="section-title">Download from URL</h2></div>
|
|
<form class="card card-pad dl-form" id="dl-form" autocomplete="off">
|
|
<div class="field">
|
|
<label class="field-label" for="dl-url">URL</label>
|
|
<input class="input" id="dl-url" type="url" placeholder="https://example.com/file.pkg" spellcheck="false">
|
|
<div class="field-hint" id="dl-url-hint">HTTP, HTTPS, FTP and FTPS links are supported. The download runs on the server and continues if you close this page.</div>
|
|
</div>
|
|
<div class="dl-form-row">
|
|
<div class="field field-grow">
|
|
<span class="field-label">Save to</span>
|
|
<button class="btn btn-block path-btn" id="dl-dest" type="button"><svg class="ic" aria-hidden="true"><use xlink:href="#i-folder"></use></svg><span id="dl-dest-text">/</span></button>
|
|
</div>
|
|
<button class="btn btn-primary" id="dl-start" type="submit"><svg class="ic" aria-hidden="true"><use xlink:href="#i-download"></use></svg><span>Start download</span></button>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<div class="section-head">
|
|
<h2 class="section-title">Server downloads</h2>
|
|
<span class="section-meta" id="dl-count"></span>
|
|
</div>
|
|
<div class="card" id="dl-list"></div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<div class="section-head">
|
|
<h2 class="section-title">File operations</h2>
|
|
<span class="section-meta" id="jobs-count"></span>
|
|
<button class="btn btn-sm btn-ghost section-action" id="jobs-clear" type="button">Clear finished</button>
|
|
</div>
|
|
<div class="card" id="jobs-list"></div>
|
|
</section>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Games -->
|
|
<section class="view page" id="view-games" hidden>
|
|
<div class="page-head page-head-wide">
|
|
<h1 class="page-title">Games</h1>
|
|
<span class="page-meta" id="games-sub"></span>
|
|
<div class="page-actions page-actions-wide">
|
|
<div class="search search-sm">
|
|
<svg class="ic" aria-hidden="true"><use xlink:href="#i-search"></use></svg>
|
|
<input class="input" id="games-filter" type="search" placeholder="Filter titles" aria-label="Filter titles" spellcheck="false" autocomplete="off">
|
|
</div>
|
|
<button class="btn" id="games-repair-all" type="button" title="Rebuild the home screen entries for all titles"><svg class="ic" aria-hidden="true"><use xlink:href="#i-wrench"></use></svg><span>Repair all</span></button>
|
|
<button class="btn btn-icon" id="games-refresh" type="button" title="Refresh" aria-label="Refresh"><svg class="ic" aria-hidden="true"><use xlink:href="#i-refresh"></use></svg></button>
|
|
</div>
|
|
</div>
|
|
<div class="page-body">
|
|
<div class="card install-status" id="games-install" hidden></div>
|
|
<div class="card" id="games-list"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- System -->
|
|
<section class="view page" id="view-system" hidden>
|
|
<div class="page-head">
|
|
<h1 class="page-title">System</h1>
|
|
<span class="page-meta" id="sys-updated"></span>
|
|
<div class="page-actions">
|
|
<button class="btn btn-icon" id="sys-refresh" type="button" title="Refresh" aria-label="Refresh"><svg class="ic" aria-hidden="true"><use xlink:href="#i-refresh"></use></svg></button>
|
|
</div>
|
|
</div>
|
|
<div class="page-body">
|
|
<div class="card stats" id="sys-stats"></div>
|
|
|
|
<section class="section">
|
|
<div class="section-head"><h2 class="section-title">Server</h2></div>
|
|
<div class="card"><dl class="kv kv-rows" id="sys-server"></dl></div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<div class="section-head"><h2 class="section-title">Maintenance</h2></div>
|
|
<div class="card settings-card">
|
|
<div class="setting">
|
|
<div class="setting-text">
|
|
<div class="setting-title">Fan threshold</div>
|
|
<div class="setting-desc">Temperature at which the console fan speeds up. PS4 and PS5 only.</div>
|
|
</div>
|
|
<div class="setting-control fan-control">
|
|
<input type="range" id="fan-range" min="40" max="90" step="1" aria-label="Fan threshold in degrees Celsius">
|
|
<output class="fan-value" id="fan-value" for="fan-range"></output>
|
|
<button class="btn btn-sm" id="fan-apply" type="button">Apply</button>
|
|
</div>
|
|
</div>
|
|
<div class="setting">
|
|
<div class="setting-text">
|
|
<div class="setting-title">Restart network listeners</div>
|
|
<div class="setting-desc">Recreates the FTP listening sockets. Use it if FTP clients cannot connect after Rest Mode. Active FTP sessions are dropped.</div>
|
|
</div>
|
|
<div class="setting-control">
|
|
<button class="btn btn-sm" id="net-reset" type="button"><svg class="ic" aria-hidden="true"><use xlink:href="#i-power"></use></svg><span>Restart</span></button>
|
|
</div>
|
|
</div>
|
|
<div class="setting">
|
|
<div class="setting-text">
|
|
<div class="setting-title">Send notification</div>
|
|
<div class="setting-desc">Shows a message on the console screen.</div>
|
|
</div>
|
|
<form class="setting-control notify-form" id="notify-form" autocomplete="off">
|
|
<input class="input input-sm" id="notify-text" type="text" maxlength="200" placeholder="Message" aria-label="Notification message">
|
|
<button class="btn btn-sm" type="submit">Send</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section" id="sys-proc-section">
|
|
<div class="section-head">
|
|
<h2 class="section-title">Processes</h2>
|
|
<span class="section-meta" id="proc-count"></span>
|
|
<button class="btn btn-sm btn-ghost section-action" id="proc-refresh" type="button">Refresh</button>
|
|
</div>
|
|
<div class="card" id="proc-list"></div>
|
|
</section>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Settings -->
|
|
<section class="view page" id="view-settings" hidden>
|
|
<div class="page-head page-head-plain">
|
|
<h1 class="page-title">Settings</h1>
|
|
</div>
|
|
<div class="page-body page-narrow" id="settings-body"></div>
|
|
</section>
|
|
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tray" id="tray" hidden></div>
|
|
<div class="toasts" id="toasts" aria-live="polite"></div>
|
|
|
|
<script src="js/core.js"></script>
|
|
<script src="js/api.js"></script>
|
|
<script src="js/ui.js"></script>
|
|
<script src="js/jobs.js"></script>
|
|
<script src="js/files.js"></script>
|
|
<script src="js/transfers.js"></script>
|
|
<script src="js/games.js"></script>
|
|
<script src="js/system.js"></script>
|
|
<script src="js/settings.js"></script>
|
|
<script src="js/app.js"></script>
|
|
</body>
|
|
</html>
|