3fc28af508
Rework client UI state: move and update showLogin/showApp in public/app.js to explicitly set display styles when toggling screens and ensure user info and file load on app show. Remove the theme toggle from public/index.html and simplify CSS by collapsing color variable definitions (dark-theme-focused) in public/style.css. Add a VS Code workspace file. Remove the old uploads/Think app (Dockerfile, package.json, server.js and associated lockfile).
109 lines
4.1 KiB
HTML
109 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Simple File Server</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
|
|
</head>
|
|
|
|
<body>
|
|
<!-- Login Screen -->
|
|
<div id="login-screen" class="screen">
|
|
<div class="login-card">
|
|
<h2>Login</h2>
|
|
<form id="login-form">
|
|
<div class="form-group">
|
|
<label for="username">Username</label>
|
|
<input type="text" id="username" name="username" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="password">Password</label>
|
|
<input type="password" id="password" name="password" required>
|
|
</div>
|
|
<div id="login-error" class="error-msg"></div>
|
|
<button type="submit" class="btn primary full-width">Login</button>
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main App -->
|
|
<div id="app-screen" class="screen hidden">
|
|
<div class="container">
|
|
<header>
|
|
<div class="header-left">
|
|
<h1>My File Server</h1>
|
|
<span id="current-path-display" class="path-breadcrumb">/</span>
|
|
</div>
|
|
<div class="controls">
|
|
<span id="user-display"></span>
|
|
|
|
<button id="logout-btn" class="btn secondary">Logout</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<!-- Toolbar -->
|
|
<div class="toolbar">
|
|
<div class="toolbar-left">
|
|
<button class="btn secondary" id="up-dir-btn" disabled>⬆ Up</button>
|
|
<button class="btn primary" id="new-folder-btn">New Folder</button>
|
|
<button class="btn secondary" id="refresh-btn">Refresh</button>
|
|
</div>
|
|
<div class="toolbar-right">
|
|
<button class="btn secondary" id="view-toggle-btn" title="Toggle Grid/List View">📅</button>
|
|
<button class="btn primary hidden" id="bulk-download-btn">Download Selected</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Upload Area -->
|
|
<div class="upload-area" id="drop-zone">
|
|
<p>Drag & drop to upload or move items</p>
|
|
<input type="file" id="file-input" hidden multiple>
|
|
<button class="btn secondary outline" onclick="document.getElementById('file-input').click()">Select
|
|
Files</button>
|
|
</div>
|
|
<div id="upload-status"></div>
|
|
|
|
<!-- File List -->
|
|
<section class="files-section">
|
|
<div class="file-list-header">
|
|
<span class="col-select"><input type="checkbox" id="select-all"></span>
|
|
<span class="col-icon"></span>
|
|
<span class="col-name">Name</span>
|
|
<span class="col-size">Size</span>
|
|
<span class="col-date">Date</span>
|
|
<span class="col-actions">Actions</span>
|
|
</div>
|
|
<ul id="file-list" class="file-list">
|
|
<!-- Items -->
|
|
</ul>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Media Modal -->
|
|
<div id="media-modal" class="modal hidden">
|
|
<div class="modal-content">
|
|
<span class="close-modal">×</span>
|
|
<div id="media-container"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ZIP Modal -->
|
|
<div id="zip-modal" class="modal hidden">
|
|
<div class="modal-content">
|
|
<span class="close-modal">×</span>
|
|
<h3>Archive Preview</h3>
|
|
<ul id="zip-list"></ul>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
|
|
</html> |