ZDDC/landing/template.html
ZDDC 436e8ca066 feat(landing): standalone-tool strip on the site picker
Above the Groups / Projects cards, a horizontal strip of one link per
tool — each pointing at the latest stable single-file build on the
canonical release host (zddc.varasys.io/releases/<tool>_stable.html).
Useful for "try this tool" / offline use without first picking a
project.

Seven links (Archive, Transmittal, Classifier, Markdown, Browse, Form,
Tables). Landing itself is omitted from the strip — clicking landing
from landing is a no-op. Each card has the tool name in the display
serif and a short sans hint underneath. Wraps on narrow widths instead
of scrolling horizontally; sits inside pickerView so it auto-hides on
the per-project landing view.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-11 11:17:24 -05:00

250 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>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 id="landingMain" class="landing-main">
<!-- Picker mode (deployment root /). Project picker + groups. -->
<div id="pickerView">
<!-- Standalone-tool strip. Each link opens the latest stable
single-file build of one ZDDC tool from the canonical
release host (zddc.varasys.io/releases/). Useful for
"try this tool" / offline use without a project context. -->
<nav class="tool-strip" aria-label="ZDDC tools">
<a class="tool-strip__link" href="https://zddc.varasys.io/releases/archive_stable.html"
title="Browse a project archive — filter by party, status, revision">
<span class="tool-strip__name">Archive</span>
<span class="tool-strip__hint">Browse &amp; filter</span>
</a>
<a class="tool-strip__link" href="https://zddc.varasys.io/releases/transmittal_stable.html"
title="Compose, validate, and publish transmittals">
<span class="tool-strip__name">Transmittal</span>
<span class="tool-strip__hint">Issue &amp; receive</span>
</a>
<a class="tool-strip__link" href="https://zddc.varasys.io/releases/classifier_stable.html"
title="Rename incoming files into ZDDC tracking numbers">
<span class="tool-strip__name">Classifier</span>
<span class="tool-strip__hint">Rename incoming</span>
</a>
<a class="tool-strip__link" href="https://zddc.varasys.io/releases/mdedit_stable.html"
title="Markdown editor with multi-file FS-Access workflow">
<span class="tool-strip__name">Markdown</span>
<span class="tool-strip__hint">Edit prose</span>
</a>
<a class="tool-strip__link" href="https://zddc.varasys.io/releases/browse_stable.html"
title="Unified file tree + per-file-type preview">
<span class="tool-strip__name">Browse</span>
<span class="tool-strip__hint">Files &amp; preview</span>
</a>
<a class="tool-strip__link" href="https://zddc.varasys.io/releases/form_stable.html"
title="Schema-driven form renderer for *.form.yaml files">
<span class="tool-strip__name">Form</span>
<span class="tool-strip__hint">Structured input</span>
</a>
<a class="tool-strip__link" href="https://zddc.varasys.io/releases/tables_stable.html"
title="Aggregate a directory of YAML rows into a sortable table">
<span class="tool-strip__name">Tables</span>
<span class="tool-strip__hint">YAML rollup</span>
</a>
</nav>
<!-- 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">&times;</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>
</div><!-- /pickerView -->
<!-- Project mode (/<project>). Stage cards + MDL section. Shown
by landing.js when location.pathname is a single segment. -->
<div id="projectView" class="hidden">
<h1 id="projectTitle" class="project-title">
<span id="projectName"></span>
<span class="project-title__subtle">— project workspace</span>
</h1>
<p class="lead">Pick a lifecycle stage, or browse all files.</p>
<div class="stages">
<a class="stage-card" id="stageArchive">
<h3>Archive</h3>
<p>Permanent record of issued and received transmittals, organized by counterparty.</p>
</a>
<a class="stage-card" id="stageWorking">
<h3>Working</h3>
<p>Per-user drafting workspace. Your folder is private by default; you can grant access by editing its <code>.zddc</code> file.</p>
</a>
<a class="stage-card" id="stageStaging">
<h3>Staging</h3>
<p>Outbound transmittals being prepared for issue.</p>
</a>
<a class="stage-card" id="stageReviewing">
<h3>Reviewing</h3>
<p>Pending review responses — inbound submittals paired with their in-progress drafts.</p>
</a>
</div>
<p><a id="browseAllLink" class="browse-link">Browse all files →</a></p>
<h2>Master Deliverables List (MDL)</h2>
<p>Each counterparty in the archive has an MDL — an editable
table of expected deliverables. The default columns mirror
the ZDDC tracking-number components (<code>originator</code>,
<code>phase</code>, <code>project</code>, <code>area</code>,
<code>discipline</code>, <code>type</code>,
<code>sequence</code>, <code>suffix</code>) plus
<code>title</code>, <code>plannedRevision</code>,
<code>plannedDate</code>, <code>status</code>, and
<code>owner</code>.</p>
<p><strong>To edit the MDL for any party:</strong></p>
<ol>
<li>Open the project archive: <a id="archiveBrowseLink"></a></li>
<li>Click into a party's folder (e.g. <code>PartyA</code>)</li>
<li>Click <code>mdl</code> inside the party folder</li>
</ol>
<div id="partyListSection">
<!-- Populated by JS when archive/ enumeration succeeds.
Either a "direct links" block with <ul.party-list> or a
"no parties yet" fallback. -->
</div>
<p>To customize the columns or schema for a specific party, drop
a <code>table.yaml</code> and <code>form.yaml</code> into
<code>archive/&lt;party&gt;/mdl/</code>. Operator-supplied
files override the embedded defaults entirely.</p>
</div><!-- /projectView -->
</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">&times;</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>