v0.1
This commit is contained in:
Frog-Lover-Antony
+187
@@ -0,0 +1,187 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Content Tag</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- ==================== LOGIN VIEW ==================== -->
|
||||
<main id="view-login" data-view="login">
|
||||
<section class="login-card">
|
||||
<h1>Content Tag</h1>
|
||||
|
||||
<form id="login-form" autocomplete="off">
|
||||
<div class="form-group">
|
||||
<label for="cwd-input">Working Directory</label>
|
||||
<input type="text" id="cwd-input" placeholder="/private/user/media" autofill-off>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password-input">Password</label>
|
||||
<input type="password" id="password-input" placeholder="Copyparty password">
|
||||
</div>
|
||||
|
||||
<div class="login-actions">
|
||||
<button type="button" id="btn-check">Check</button>
|
||||
<button type="button" id="btn-enter">Enter</button>
|
||||
</div>
|
||||
|
||||
<p id="login-status" class="status-message" aria-live="polite"></p>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- ==================== APP HEADER (shared by Tagging + Gallery) ==================== -->
|
||||
<header id="app-header" style="display:none">
|
||||
<!-- CWD breadcrumb (centered) -->
|
||||
<output id="cwd-display" aria-label="Current directory"></output>
|
||||
|
||||
<!-- Change-directory button (right-aligned) -->
|
||||
<button type="button" id="btn-change-dir" class="btn-icon" title="Change working directory">⚓</button>
|
||||
</header>
|
||||
|
||||
<!-- ==================== TAGGING VIEW ==================== -->
|
||||
<main id="view-tagging" data-view="tagging" style="display:none">
|
||||
|
||||
<!-- Top bar: gallery button -->
|
||||
<nav class="tagging-bar">
|
||||
<button type="button" id="btn-open-gallery">Open Gallery</button>
|
||||
</nav>
|
||||
|
||||
<!-- Untagged image grid -->
|
||||
<section aria-label="Untagged content">
|
||||
<h2>Untagged Items</h2>
|
||||
<div id="tagging-grid" class="image-grid"></div>
|
||||
</section>
|
||||
|
||||
<!-- Image viewer + editor panel -->
|
||||
<section id="tagging-details" class="details-panel">
|
||||
|
||||
<!-- Viewer with prev/next arrows -->
|
||||
<figure class="viewer">
|
||||
<button type="button" id="btn-prev" class="viewer-arrow viewer-arrow--left" aria-label="Previous">◀</button>
|
||||
<div id="viewer-viewport" class="viewer-viewport"></div>
|
||||
<button type="button" id="btn-next" class="viewer-arrow viewer-arrow--right" aria-label="Next">▶</button>
|
||||
</figure>
|
||||
|
||||
<!-- Metadata editor -->
|
||||
<form id="tag-editor-form" class="editor-form">
|
||||
|
||||
<div class="form-group">
|
||||
<label for="album-select">Album</label>
|
||||
<input type="text" id="album-select" list="album-datalist" placeholder="Select or create album">
|
||||
<datalist id="album-datalist"></datalist>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="album-position">Position</label>
|
||||
<input type="number" id="album-position" min="0" step="1" disabled placeholder="Auto-assigned">
|
||||
</div>
|
||||
|
||||
<div class="form-group tags-wrapper">
|
||||
<label for="tag-input">Tags</label>
|
||||
<input type="text" id="tag-input" placeholder="sunset, beach, golden hour​" autocomplete="off">
|
||||
<ul id="tag-suggestions" class="suggestions-dropdown" role="listbox"></ul>
|
||||
</div>
|
||||
|
||||
<!-- Read-only metadata -->
|
||||
<aside class="file-meta">
|
||||
<div class="meta-block">
|
||||
<span class="meta-label">Similarity Hash</span>
|
||||
<output id="meta-similarity-hash" class="meta-value" aria-live="polite"></output>
|
||||
</div>
|
||||
|
||||
<div class="meta-block">
|
||||
<span class="meta-label">Base Colors</span>
|
||||
<div id="meta-base-colors" class="color-swatches" aria-label="Extracted image colors"></div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<button type="button" id="btn-delete-file" class="btn-danger" disabled>Delete File</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- ==================== GALLERY VIEW ==================== -->
|
||||
<main id="view-gallery" data-view="gallery" style="display:none">
|
||||
|
||||
<!-- Gallery top bar -->
|
||||
<nav class="gallery-bar">
|
||||
<button type="button" id="btn-back-tagging">Back to Tagging</button>
|
||||
</nav>
|
||||
|
||||
<!-- Filters and ordering -->
|
||||
<section class="gallery-controls">
|
||||
<div class="control-group">
|
||||
<label for="filter-tags">Filter by tag / album</label>
|
||||
<input type="text" id="filter-tags" placeholder="Type to filter..." autocomplete="off">
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<label for="order-by">Order by</label>
|
||||
<select id="order-by">
|
||||
<option value="created">Creation Time</option>
|
||||
<option value="modified">Modification Time</option>
|
||||
<option value="similarity">Similarity Hash</option>
|
||||
<option value="color-similarity">Color Similarity</option>
|
||||
</select>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Gallery image grid (grouped by album) + Sidebar tag editor -->
|
||||
<div class="gallery-content">
|
||||
<section aria-label="Gallery images">
|
||||
<div id="gallery-grid" class="image-grid"></div>
|
||||
</section>
|
||||
|
||||
<aside id="gallery-sidebar" class="sidebar">
|
||||
<div class="sidebar-empty">Select an image to edit tags</div>
|
||||
|
||||
<!-- Populated on image select -->
|
||||
<form id="gallery-editor-form" style="display:none">
|
||||
<figure id="sidebar-preview"></figure>
|
||||
<div class="form-group">
|
||||
<label for="sidebar-file-name">Filename</label>
|
||||
<output id="sidebar-file-name" class="meta-value"></output>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="sidebar-album-select">Album</label>
|
||||
<input type="text" id="sidebar-album-select" list="album-datalist" placeholder="Select or create album">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="sidebar-position">Position</label>
|
||||
<input type="number" id="sidebar-position" min="0" step="1">
|
||||
</div>
|
||||
<div class="form-group tags-wrapper">
|
||||
<label for="sidebar-tag-input">Tags</label>
|
||||
<input type="text" id="sidebar-tag-input" placeholder="comma-separated tags​" autocomplete="off">
|
||||
<ul id="sidebar-tag-suggestions" class="suggestions-dropdown" role="listbox"></ul>
|
||||
</div>
|
||||
</form>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- ==================== CONTEXT MENU (floating overlay) ==================== -->
|
||||
<div id="context-menu" class="context-menu" role="menu" style="display:none">
|
||||
<button type="button" id="ctx-find-similarity-hash" role="menuitem">☆ Find Similar (Hash)</button>
|
||||
<button type="button" id="ctx-find-similar-color" role="menuitem">👁 Find Similar (Color)</button>
|
||||
<button type="button" id="ctx-trash-file" role="menuitem">🗑 Trash File</button>
|
||||
</div>
|
||||
|
||||
<!-- Part modules (deferred; expose globals before app.js runs) -->
|
||||
<script defer src=".part1_config_auth.js"></script>
|
||||
<script defer src=".part2_tsv_db.js"></script>
|
||||
<script defer src=".part3_scan_import.js"></script>
|
||||
<script defer src=".part4_image_processing.js"></script>
|
||||
<script defer src=".part6_album_db.js"></script>
|
||||
|
||||
<!-- App logic (deferred so DOM is ready) -->
|
||||
<script defer src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user