138 lines
5.9 KiB
HTML
138 lines
5.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Multi File Upload Editor</title>
|
|
<link rel="icon" type="image/svg+xml" href="/assets/logo.svg">
|
|
<!-- External CSS -->
|
|
<link rel="stylesheet" href="styles.css">
|
|
<!-- Google Fonts and Material Icons -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
|
|
<!-- Bootstrap CSS -->
|
|
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<!-- Header -->
|
|
<header>
|
|
<div class="header-left">
|
|
<img src="/assets/logo.svg" alt="Filing Cabinet Logo">
|
|
</div>
|
|
<div class="header-title">
|
|
<h1>Multi File Upload Editor</h1>
|
|
</div>
|
|
<div class="header-buttons">
|
|
<button id="logoutBtn" title="Logout"><i class="material-icons">exit_to_app</i></button>
|
|
<button id="addUserBtn" title="Add User"><i class="material-icons">person_add</i></button>
|
|
<button id="removeUserBtn" title="Remove User"><i class="material-icons">person_remove</i></button>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="container">
|
|
<!-- Login Form -->
|
|
<div class="row" id="loginForm">
|
|
<div class="col-12">
|
|
<form id="authForm" method="post">
|
|
<div class="form-group">
|
|
<label for="loginUsername">User:</label>
|
|
<input type="text" class="form-control" id="loginUsername" name="username" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="loginPassword">Password:</label>
|
|
<input type="password" class="form-control" id="loginPassword" name="password" required>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary btn-block">Login</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Operations: Upload and Folder Management -->
|
|
<div id="mainOperations" style="display: none;">
|
|
<div class="row" id="uploadFolderRow">
|
|
<!-- Upload Card: 60% width -->
|
|
<div class="col-md-7 d-flex">
|
|
<div class="card flex-fill">
|
|
<div class="card-header">Upload Files</div>
|
|
<div class="card-body">
|
|
<form id="uploadFileForm" method="post" enctype="multipart/form-data">
|
|
<div class="form-group">
|
|
<div id="uploadDropArea" style="border:2px dashed #ccc; padding:20px; text-align:center; cursor:pointer;">
|
|
<span>Drop files here or click 'Choose files'</span>
|
|
<br>
|
|
<input type="file" id="file" name="file[]" class="form-control-file" multiple required style="display:none;">
|
|
</div>
|
|
</div>
|
|
<button type="submit" id="uploadBtn" class="btn btn-primary d-block mx-auto">Upload</button>
|
|
<div id="uploadProgressContainer"></div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Folder Management Card: 40% width -->
|
|
<div class="col-md-5 d-flex">
|
|
<div class="card flex-fill">
|
|
<div class="card-header">Folder Management</div>
|
|
<div class="card-body">
|
|
<div class="form-group d-flex align-items-center" style="padding-top:15px;">
|
|
<select id="folderSelect" class="form-control"></select>
|
|
<button id="renameFolderBtn" class="btn btn-secondary ml-2" title="Rename Folder">
|
|
<i class="material-icons">edit</i>
|
|
</button>
|
|
<button id="deleteFolderBtn" class="btn btn-danger ml-2" title="Delete Folder">
|
|
<i class="material-icons">delete</i>
|
|
</button>
|
|
</div>
|
|
<button id="createFolderBtn" class="btn btn-primary mt-3">Create Folder</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- File List Section -->
|
|
<div id="fileListContainer">
|
|
<h2 id="fileListTitle">Files in (Root)</h2>
|
|
<div id="fileListActions" class="file-list-actions">
|
|
<button id="deleteSelectedBtn" class="btn action-btn" style="display: none;">Delete Selected</button>
|
|
<button id="copySelectedBtn" class="btn action-btn" style="display: none;" disabled>Copy Selected</button>
|
|
<button id="moveSelectedBtn" class="btn action-btn" style="display: none;" disabled>Move Selected</button>
|
|
<select id="copyMoveFolderSelect" class="form-control folder-dropdown"></select>
|
|
</div>
|
|
<div id="fileList"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add User Modal -->
|
|
<div id="addUserModal" class="modal">
|
|
<h3>Create New User</h3>
|
|
<label for="newUsername">Username:</label>
|
|
<input type="text" id="newUsername" class="form-control">
|
|
<label for="newPassword">Password:</label>
|
|
<input type="password" id="newPassword" class="form-control">
|
|
<div id="adminCheckboxContainer">
|
|
<input type="checkbox" id="isAdmin">
|
|
<label for="isAdmin">Grant Admin Access</label>
|
|
</div>
|
|
<button id="saveUserBtn" class="btn btn-primary">Save User</button>
|
|
<button id="cancelUserBtn" class="btn btn-secondary">Cancel</button>
|
|
</div>
|
|
|
|
<!-- Remove User Modal -->
|
|
<div id="removeUserModal" class="modal">
|
|
<h3>Remove User</h3>
|
|
<label for="removeUsernameSelect">Select a user to remove:</label>
|
|
<select id="removeUsernameSelect" class="form-control"></select>
|
|
<button id="deleteUserBtn" class="btn btn-danger">Delete User</button>
|
|
<button id="cancelRemoveUserBtn" class="btn btn-secondary">Cancel</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- JavaScript Files -->
|
|
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
|
|
<script type="module" src="main.js"></script>
|
|
|
|
</body>
|
|
</html>
|