ZDDC
bbb75a87af
Bring every tool's header in line with archive's pattern: [logo] [title] [version] [Add Local Directory] [⟳] ............... [◐] [?] ------------- header-left --------------- ----- header-right - Changes per tool: * browse: rename "Select Directory" → "Add Local Directory"; add the red-non-stable wrap to the build label (was missing); add a help panel + bundle shared/help.js. * classifier: rename selectDirectoryBtn → addDirectoryBtn, refreshBtn → refreshHeaderBtn for consistency. Update all JS callers and welcome-screen copy to the new label. * mdedit: same id rename. Move the previously-in-pane refresh button into the header. Stop renaming the dir button to "Directory: <name>" once a folder is loaded — instead use the shared btn--subtle variant to de-emphasize while keeping the standard label. * transmittal: convert non-standard <div class="app-header"> with spacer/icons containers to <header class="app-header"> with the canonical header-left/header-right pair. Move the publish split- button into header-left (Transmittal-specific primary action). Remove dead .app-header__spacer/__icons/header-icon-btn CSS now that nothing references those classes. * landing, form: add help-btn + help-panel + bundle shared/help.js. Each panel is tool-specific (project picker docs for landing, schema-driven form docs for form). Cross-cutting: * shared/base.css: promote .btn--subtle from browse/css/tree.css so any tool with an online mode can de-emphasize Add Local Directory consistently. Verified all 7 tools in headless Chromium: header structure correct, build label red on non-stable cuts, help panel opens + closes via button + Esc.
145 lines
6.4 KiB
HTML
145 lines
6.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>ZDDC — Projects</title>
|
|
<link rel="icon" type="image/svg+xml" href="{{FAVICON}}">
|
|
<style>
|
|
{{CSS_PLACEHOLDER}}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header class="app-header">
|
|
<div class="header-left">
|
|
<svg class="app-header__logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" aria-hidden="true">
|
|
<rect width="64" height="64" rx="12" fill="#1e3a5f"/>
|
|
<g fill="#fff">
|
|
<rect x="14" y="18" width="36" height="7"/>
|
|
<polygon points="43,25 50,25 21,43 14,43"/>
|
|
<rect x="14" y="43" width="36" height="7"/>
|
|
</g>
|
|
</svg>
|
|
<div class="header-title-group">
|
|
<span class="app-header__title">ZDDC</span>
|
|
<span class="build-timestamp">{{BUILD_LABEL}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="header-right">
|
|
<button id="theme-btn" class="btn btn-secondary" title="Theme: auto (follows OS)" aria-label="Theme: auto (follows OS)">◐</button>
|
|
<button id="help-btn" class="btn btn-secondary" title="Help" aria-label="Help">?</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="landing-main">
|
|
<!-- Welcome / hero -->
|
|
<section class="landing-hero">
|
|
<h1>Welcome to the ZDDC Archive</h1>
|
|
<p class="landing-hero-sub">
|
|
Click a group or project below to open the archive. Use
|
|
<strong>+ New group</strong> to bundle a set of projects you open together.
|
|
</p>
|
|
</section>
|
|
|
|
<!-- Access warning banner (shown when URL ?projects= contains inaccessible items) -->
|
|
<div id="accessWarningBanner" class="access-warning-banner hidden" role="alert">
|
|
<span id="accessWarningText"></span>
|
|
<button class="warning-dismiss-btn" onclick="LandingApp.dismissWarning()" aria-label="Dismiss">×</button>
|
|
</div>
|
|
|
|
<!-- Groups card -->
|
|
<div class="landing-card">
|
|
<div class="landing-card-header">
|
|
<div class="landing-card-title">
|
|
<h2>Groups</h2>
|
|
<span id="groupCount" class="landing-count"></span>
|
|
</div>
|
|
<div class="landing-header-actions">
|
|
<button id="newGroupBtn" class="btn btn-secondary btn-sm" onclick="LandingApp.startCreateGroup()">+ New group</button>
|
|
</div>
|
|
</div>
|
|
<div id="groupsContainer" class="groups-container">
|
|
<!-- Populated by JS -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Projects card -->
|
|
<div class="landing-card">
|
|
<!-- Action bar (only visible in select-mode) -->
|
|
<div id="selectActionBar" class="select-action-bar hidden">
|
|
<div class="select-action-bar__label">
|
|
<span id="selectModeTitle"></span>
|
|
<input id="groupNameInput" type="text" class="group-name-input" placeholder="Group name">
|
|
</div>
|
|
<div class="select-action-bar__buttons">
|
|
<button id="cancelSelectBtn" class="btn btn-secondary btn-sm" onclick="LandingApp.cancelSelect()">Cancel</button>
|
|
<button id="openSelectedBtn" class="btn btn-secondary btn-sm" onclick="LandingApp.openSelectedVisible()">Open selected</button>
|
|
<button id="saveGroupBtn" class="btn btn-primary btn-sm" onclick="LandingApp.saveGroup()">Save group</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="landing-card-header">
|
|
<div class="landing-card-title">
|
|
<h2>Projects</h2>
|
|
<span id="projectCount" class="landing-count"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="projectListContainer" class="project-list-container">
|
|
<!-- Populated by JS -->
|
|
<div class="project-list-loading">Loading projects…</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Help Panel -->
|
|
<aside id="help-panel" class="help-panel" hidden aria-labelledby="help-panel-title">
|
|
<div class="help-panel__header">
|
|
<h2 id="help-panel-title" class="help-panel__title">Help — ZDDC</h2>
|
|
<button type="button" class="help-panel__close" id="help-panel-close" aria-label="Close">×</button>
|
|
</div>
|
|
<div class="help-panel__body">
|
|
<h3>What is this page?</h3>
|
|
<p>This is the ZDDC archive landing page — a project picker. It lists every
|
|
project (top-level directory) you have access to on this server, plus any
|
|
<strong>groups</strong> you've defined for opening multiple projects at once.</p>
|
|
|
|
<h3>Projects</h3>
|
|
<p>Click a project to open it. The project's archive view (list of folders +
|
|
files, with all the standard ZDDC tools available inside) loads in the same
|
|
tab. Use back/forward to navigate between projects and the picker.</p>
|
|
|
|
<h3>Groups</h3>
|
|
<p>A group bundles a set of projects you commonly open together. Click
|
|
<strong>+ New group</strong>, give it a name, click projects to include
|
|
them, then save. Opening a group opens all its projects in one go.</p>
|
|
<dl>
|
|
<dt>Save group</dt>
|
|
<dd>Persist the selection as a named group on this server (visible to
|
|
other users with access to the same projects).</dd>
|
|
<dt>Open selected</dt>
|
|
<dd>Open the currently-checked projects without saving as a group.</dd>
|
|
<dt>Cancel</dt>
|
|
<dd>Exit select mode without saving.</dd>
|
|
</dl>
|
|
|
|
<h3>Access</h3>
|
|
<p>Projects and groups are filtered by your account's permissions.
|
|
If a URL references a project you don't have access to, a warning banner
|
|
appears and the inaccessible items are skipped silently.</p>
|
|
|
|
<h3>Header buttons</h3>
|
|
<dl>
|
|
<dt>◐ Theme</dt>
|
|
<dd>Cycle auto / light / dark.</dd>
|
|
<dt>? Help</dt>
|
|
<dd>This panel. Press <kbd>Esc</kbd> to close.</dd>
|
|
</dl>
|
|
</div>
|
|
</aside>
|
|
|
|
<script>
|
|
{{JS_PLACEHOLDER}}
|
|
</script>
|
|
</body>
|
|
</html>
|