Files
sftp-browser/web/index.html
2025-06-24 00:04:58 -04:00

144 lines
8.6 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">
<title>SFTP Browser</title>
<meta name="description" content="Connect to and manage files on your SFTP server with ease!">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#1f2733">
<meta http-equiv="Permissions-Policy" content="clipboard-write=(self 'https://sftp.my-mc.link')">
<link rel="manifest" href="/manifest.json" />
<link rel="icon" href="/icon.png">
<link rel="stylesheet" href="https://src.simplecyber.org/v2/themes.css">
<link rel="stylesheet" href="https://src.simplecyber.org/v2/base.css">
<link rel="stylesheet" href="/assets/main.css">
<script defer src="https://src.simplecyber.org/lib/axios.min.js"></script>
<script defer src="https://src.simplecyber.org/lib/tabbable.min.js"></script>
<script defer src="https://src.simplecyber.org/lib/focus-trap.min.js"></script>
<script defer src="https://src.simplecyber.org/lib/dayjs.min.js"></script>
<script defer src="https://src.simplecyber.org/v2/base.js"></script>
<script defer src="https://src.simplecyber.org/utils.js"></script>
<script defer src="/assets/main.js"></script>
<script defer src="/assets/index.js"></script>
</head>
<body class="darkmuted">
<div id="main" class="col">
<div id="navbar" class="row gap-20 align-center flex-no-shrink">
<button id="connections" class="btn" title="Connections...<br><small>Ctrl + Shift + Space</small>">
<div class="icon">public</div>
<div class="icon" style="margin-top: 1px">expand_more</div>
</button>
<div id="inputPathCont" class="atLeast640px row gap-10 flex-grow">
<button id="navBack" class="btn iconOnly tertiary" title="Back<br><small>Alt + ArrowLeft</small>" disabled>
<div class="icon">arrow_back</div>
</button>
<button id="navForward" class="btn iconOnly tertiary" title="Forward<br><small>Alt + ArrowRight</small>" disabled>
<div class="icon">arrow_forward</div>
</button>
<input type="text" id="inputNavPath" class="textbox" placeholder="Enter a path...">
<button id="pathGo" class="btn iconOnly secondary" title="Go/Reload<br><small>Ctrl + R</small>">
<div class="icon">refresh</div>
</button>
</div>
<div id="inputSearchCont" class="atLeast1000px row gap-10" style="width: 320px">
<div class="row align-center flex-grow">
<input type="text" id="inputNavSearch" class="textbox" placeholder="Search within folder..." style="padding-right: calc(3px + 34px + 3px)">
<button id="navSearchCancel" class="btn small tertiary iconOnly" style="margin-left: calc(-34px - 3px)">
<div class="icon">close</div>
</button>
</div>
<button id="navSearchGo" class="btn iconOnly" title="Search">
<div class="icon">search</div>
</button>
</div>
<button id="pathPopup" class="btn secondary atMost640px" title="Go to folder...">
<div class="icon">folder_open</div>
<div class="icon" style="margin-top: 0px">expand_more</div>
</button>
</div>
<div class="col flex-grow">
<div id="controls" class="row gap-10 align-center flex-no-shrink">
<div class="row gap-10 align-center flex-no-shrink atLeast800px">
<button id="upload" class="btn small iconOnly secondary" title="Upload files...<br><small>Shift + U</small>" disabled>
<div class="icon">upload</div>
</button>
<button id="dirCreate" class="btn small iconOnly secondary" title="New folder...<br><small>Shift + N</small>" disabled>
<div class="icon">create_new_folder</div>
</button>
<button id="fileCreate" class="btn small iconOnly secondary" title="New file..." disabled>
<div class="icon">post_add</div>
</button>
<div class="sep"></div>
<button id="fileCut" class="btn small iconOnly secondary" title="Cut<br><small>Ctrl + X</small>" disabled>
<div class="icon">cut</div>
</button>
<button id="fileCopy" class="btn small iconOnly secondary" title="Copy<br><small>Ctrl + C</small>" disabled>
<div class="icon">file_copy</div>
</button>
<button id="filePaste" class="btn small iconOnly secondary" title="Paste<br><small>Ctrl + V</small>" disabled>
<div class="icon">content_paste</div>
</button>
<div class="sep"></div>
<button id="fileRename" class="btn small iconOnly secondary" title="Rename...<br><small>F2</small>" disabled>
<div class="icon">edit_note</div>
</button>
<button id="fileMoveTo" class="btn small iconOnly secondary" title="Move to...<br><small>Shift + M</small>" disabled>
<div class="icon">drive_file_move</div>
</button>
<button id="fileCopyTo" class="btn small iconOnly secondary" title="Copy to...<br><small>Shift + C</small>" disabled>
<div class="icon">move_group</div>
</button>
<button id="fileDelete" class="btn small iconOnly secondary" title="Delete...<br><small>Del</small>" disabled>
<div class="icon" style="color: var(--red2)">delete</div>
</button>
<button id="filePerms" class="btn small iconOnly secondary" title="Edit permissions..." disabled>
<div class="icon">admin_panel_settings</div>
</button>
<div class="sep"></div>
<button id="fileDownload" class="btn small iconOnly secondary" title="Download<br><small>Shift + D</small>" disabled>
<div class="icon">download</div>
</button>
<button id="fileShare" class="btn small iconOnly secondary" title="Copy download link..." disabled>
<div class="icon">share</div>
</button>
</div>
<button id="dirMenu" class="btn small secondary atMost800px" title="File...">
File
<div class="icon" style="margin-top: 1px">expand_more</div>
</button>
<button id="deselectAll" class="btn small iconOnly secondary atMost800px" title="Deselect all" style="display: none">
<div class="icon">close</div>
</button>
<div class="sep"></div>
<button id="dirView" class="btn small secondary" title="View...">
<div class="icon">visibility</div>
<div class="icon" style="margin-top: 1px">expand_more</div>
</button>
<button id="dirSort" class="btn small secondary" title="Sort..." disabled>
<div class="icon">sort</div>
<div class="icon" style="margin-top: 1px">expand_more</div>
</button>
<div class="row gap-10 align-center flex-no-shrink atLeast800px">
<button id="dirSelection" class="btn small secondary" title="Selection...">
<div class="icon" style="margin-top: 0px">select</div>
<div class="icon" style="margin-top: 1px">expand_more</div>
</button>
</div>
</div>
<div id="fileColHeadings" class="row gap-10">
<div class="name flex-grow">Name</div>
<div class="date">Modified</div>
<div class="size">Size</div>
<div class="perms">Permissions</div>
</div>
<div id="files" class="col flex-grow gap-2"></div>
<progress id="progressBar" min="0" max="100" value="0"></progress>
<div id="statusBar" class="row align-center flex-no-shrink">
Waiting for connection...
</div>
</div>
</div>
</body>
</html>