greenflame089
295 lines
12 KiB
HTML
295 lines
12 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Q-Edit v1.0.0</title>
|
||
<link rel="icon" type="image/png" href="editor-favicon.png" />
|
||
<link rel="stylesheet" href="style.css" />
|
||
</head>
|
||
|
||
<body>
|
||
<div id="loading-overlay" role="status" aria-live="polite" style="display: none">
|
||
<img src="editor-favicon.png" alt="" class="spinner-img" />
|
||
<div class="spinner-label">Loading…</div>
|
||
</div>
|
||
<header class="topbar" role="banner">
|
||
<div class="topbar-left">
|
||
<span class="app-title" id="app-title">Q-Edit v1.0.0</span>
|
||
</div>
|
||
<div class="topbar-right">
|
||
<div id="media-controls" class="media-controls" style="display: none">
|
||
<button
|
||
id="media-play-pause"
|
||
class="icon-button"
|
||
title="Play/Pause"
|
||
aria-label="Play/Pause"
|
||
>
|
||
⏯
|
||
</button>
|
||
<button id="media-stop" class="icon-button" title="Stop" aria-label="Stop">⏹</button>
|
||
<span id="media-title" class="media-title" title=""></span>
|
||
</div>
|
||
<button id="search-button" class="icon-button" title="Search" aria-label="Search">
|
||
🔍
|
||
</button>
|
||
<div id="publish-menu" class="publish-menu" style="display: none">
|
||
<button
|
||
id="publish-button"
|
||
class="icon-button"
|
||
aria-haspopup="true"
|
||
aria-expanded="false"
|
||
title="Publish"
|
||
>
|
||
⬆️ Publish
|
||
</button>
|
||
<div id="publish-dropdown" class="publish-dropdown" role="menu" aria-hidden="true">
|
||
<button type="button" class="publish-item" id="publish-add-file" role="menuitem">
|
||
Add file…
|
||
</button>
|
||
<button type="button" class="publish-item" id="publish-add-folder" role="menuitem">
|
||
Add folder…
|
||
</button>
|
||
<button type="button" class="publish-item" id="publish-new-text" role="menuitem">
|
||
New text…
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<button
|
||
id="toggle-deleted"
|
||
class="icon-button deleted-toggle"
|
||
title="Hide deleted content"
|
||
aria-label="Hide deleted content"
|
||
aria-pressed="true"
|
||
>
|
||
🗑
|
||
</button>
|
||
<button id="auth-button" class="auth-button">Authenticate</button>
|
||
<div id="name-switcher" class="name-switcher" style="display: none">
|
||
<label for="name-select" class="visually-hidden">Active name</label>
|
||
<select id="name-select" class="name-select"></select>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<main id="app-shell">
|
||
<aside id="sidebar" aria-label="Navigation">
|
||
<div id="sidebar-banner" class="sidebar-banner">
|
||
<button
|
||
id="sidebar-collapse"
|
||
type="button"
|
||
class="icon-button"
|
||
title="Hide sidebar"
|
||
aria-label="Hide sidebar"
|
||
aria-controls="sidebar"
|
||
aria-expanded="true"
|
||
aria-pressed="false"
|
||
onclick="window.QEditToggleSidebar && window.QEditToggleSidebar('toggle'); return false;"
|
||
>
|
||
❮
|
||
</button>
|
||
<button id="sidebar-context" class="sidebar-context" disabled>
|
||
My Files — <span id="sidebar-name">(not authenticated)</span>
|
||
</button>
|
||
<button id="sidebar-exit-search" class="sidebar-exit" style="display: none">
|
||
Back to My Files
|
||
</button>
|
||
</div>
|
||
<nav id="file-tree" class="file-tree" role="tree" aria-label="Files"></nav>
|
||
</aside>
|
||
<button
|
||
id="sidebar-reveal"
|
||
type="button"
|
||
class="sidebar-reveal icon-button"
|
||
title="Show sidebar"
|
||
aria-label="Show sidebar"
|
||
style="display: none"
|
||
onclick="window.QEditToggleSidebar && window.QEditToggleSidebar('show'); return false;"
|
||
>
|
||
❯
|
||
</button>
|
||
<section id="main-pane">
|
||
<section id="search-page" style="display: none">
|
||
<form id="search-form" class="search-form" autocomplete="off">
|
||
<div class="form-row">
|
||
<label for="search-query">Query</label>
|
||
<input
|
||
id="search-query"
|
||
name="query"
|
||
type="text"
|
||
placeholder="keywords (matches name or identifier)"
|
||
/>
|
||
</div>
|
||
<div class="form-row">
|
||
<label for="search-name">Name</label>
|
||
<input
|
||
id="search-name"
|
||
name="name"
|
||
type="text"
|
||
placeholder="optional: restrict to a Qortal name"
|
||
/>
|
||
</div>
|
||
<div class="form-row">
|
||
<label for="search-identifier">Identifier</label>
|
||
<input
|
||
id="search-identifier"
|
||
name="identifier"
|
||
type="text"
|
||
placeholder="optional: identifier-only match"
|
||
/>
|
||
</div>
|
||
<div class="form-row">
|
||
<label for="search-service">Service</label>
|
||
<input
|
||
id="search-service"
|
||
name="service"
|
||
type="text"
|
||
placeholder="optional: e.g. IMAGE, VIDEO, BLOG_POST"
|
||
/>
|
||
</div>
|
||
<div class="form-row small">
|
||
<label><input id="search-prefix" name="prefix" type="checkbox" /> Prefix</label>
|
||
<label
|
||
><input
|
||
id="search-include-metadata"
|
||
name="includeMetadata"
|
||
type="checkbox"
|
||
checked
|
||
/>
|
||
Include metadata</label
|
||
>
|
||
<label
|
||
><input id="search-exact-names" name="exactMatchNames" type="checkbox" /> Exact
|
||
match names</label
|
||
>
|
||
<label
|
||
><input id="search-reverse" name="reverse" type="checkbox" checked /> Newest
|
||
first</label
|
||
>
|
||
</div>
|
||
<div class="form-row">
|
||
<label for="search-limit">Limit</label>
|
||
<select id="search-limit" name="limit">
|
||
<option value="25">25</option>
|
||
<option value="50">50</option>
|
||
<option value="100" selected>100</option>
|
||
<option value="200">200</option>
|
||
</select>
|
||
<button type="submit" id="search-submit">Search</button>
|
||
<button type="button" id="search-reset">Reset</button>
|
||
</div>
|
||
</form>
|
||
<div id="search-summary" class="search-summary"></div>
|
||
<div id="search-results" class="search-results"></div>
|
||
<div id="search-more" class="search-more" style="display: none">
|
||
<button id="search-load-more" type="button">Load more</button>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="preview-page" style="display: none">
|
||
<div class="preview-header">
|
||
<button id="preview-back-btn" class="icon-button" title="Back">← Back</button>
|
||
<div class="preview-title" id="preview-title"></div>
|
||
<div id="preview-actions" class="topbar-right">
|
||
<button id="preview-edit" class="icon-button" title="Edit">✏️ Edit</button>
|
||
<button id="preview-replace" class="icon-button" title="Replace">📁 Replace</button>
|
||
<button id="preview-delete" class="icon-button" title="Delete">🗑 Delete</button>
|
||
</div>
|
||
</div>
|
||
<div id="preview-container" class="viewer-panel"></div>
|
||
</section>
|
||
|
||
<section id="compose-page" style="display: none">
|
||
<div class="preview-header">
|
||
<button id="compose-back-btn" class="icon-button" title="Back">← Back</button>
|
||
<div class="preview-title" id="compose-title">Compose New Text</div>
|
||
<div class="topbar-right">
|
||
<button id="compose-publish" class="icon-button" title="Publish">⬆️ Publish</button>
|
||
</div>
|
||
</div>
|
||
<div class="viewer-panel">
|
||
<div class="compose-form">
|
||
<div class="form-row">
|
||
<label for="compose-service">Service</label>
|
||
<input id="compose-service" type="text" placeholder="e.g. DOCUMENT, JSON" />
|
||
</div>
|
||
<div class="form-row">
|
||
<label for="compose-identifier">Identifier (optional)</label>
|
||
<input
|
||
id="compose-identifier"
|
||
type="text"
|
||
placeholder="identifier or leave blank for default"
|
||
/>
|
||
</div>
|
||
<div class="form-row">
|
||
<button id="compose-edit-metadata" type="button">Edit metadata…</button>
|
||
<span id="compose-metadata-summary" class="metadata-summary"></span>
|
||
</div>
|
||
<div class="form-row">
|
||
<label for="compose-text">Content</label>
|
||
<textarea id="compose-text" rows="16" placeholder="Type your text here…"></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="info-page">
|
||
<div id="info-details">
|
||
<p>
|
||
Welcome to Q-Edit! This app is a work in progress.<br />
|
||
Authenticate to view and edit your published QDN content.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="content-page" style="display: none">
|
||
<p id="account-details"></p>
|
||
<div id="items-per-page" style="margin: 10px 0">
|
||
Show
|
||
<select id="items-per-page-dropdown">
|
||
<option value="10">10</option>
|
||
<option value="25" selected>25</option>
|
||
<option value="100">100</option>
|
||
</select>
|
||
results per page
|
||
</div>
|
||
<div id="filter-options" style="margin: 10px 0">
|
||
Filter by service (toggle):
|
||
<div id="service-chips-container" class="chips-container"></div>
|
||
</div>
|
||
<div id="inline-viewer" class="viewer-panel" style="display: none"></div>
|
||
<div id="content-summary"></div>
|
||
<div id="pagination-top" class="pagination-controls"></div>
|
||
<div id="content-details"></div>
|
||
<div id="pagination-bottom" class="pagination-controls"></div>
|
||
</section>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- Runtime app -->
|
||
<script src="script.js"></script>
|
||
|
||
<!-- Preferences + URL hash -->
|
||
<script type="module" src="./scripts/init-prefs.mjs"></script>
|
||
<script type="module" src="./scripts/init-hash.mjs"></script>
|
||
<script type="module" src="./scripts/init-page-hash.mjs"></script>
|
||
<script type="module" src="./scripts/init-page-jump.mjs"></script>
|
||
|
||
<!-- Render helper exposure (non-invasive) -->
|
||
<script type="module">
|
||
import { html, renderInto } from "./src/ui/render.js";
|
||
// Expose for devtools and future incremental adoption
|
||
window.QEditRender = { html, renderInto };
|
||
|
||
// Non-invasive placeholder: only if summary is empty before data load.
|
||
const host = document.getElementById("content-summary");
|
||
if (host && host.children.length === 0) {
|
||
const markup = html`<div class="summary-bar"><span>Ready.</span></div>`;
|
||
renderInto(host, markup);
|
||
}
|
||
</script>
|
||
|
||
<script type="module" src="./scripts/init-pagination-ui.mjs"></script>
|
||
<script type="module" src="./scripts/init-sidebar.mjs"></script>
|
||
</body>
|
||
</html>
|