← back to Site Factory
admin/public/editor.html
109 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Site Factory — Editor</title>
<link rel="stylesheet" href="/editor.css" />
</head>
<body>
<header class="topbar">
<div class="brand">SF</div>
<div class="topbar-meta">
<span id="top-domain" class="top-domain">—</span>
<span id="top-palette" class="top-palette muted">no site selected</span>
</div>
<div class="topbar-right">
<button id="findings-btn" class="badge badge-findings" type="button">
Manager findings: <span id="findings-count">0</span>
</button>
<span id="me" class="muted"></span>
</div>
</header>
<main class="layout">
<aside class="col-left">
<div class="col-header">
<span>Sites</span>
<span id="sites-count" class="muted small">0</span>
</div>
<ul id="sites-list" class="sites-list"></ul>
</aside>
<section class="col-center">
<div class="iframe-bar">
<span id="iframe-url" class="muted small mono">—</span>
<button id="iframe-reload" type="button" class="btn-ghost">Reload</button>
</div>
<div class="iframe-wrap">
<iframe id="preview" title="Site preview" referrerpolicy="no-referrer"></iframe>
<div id="iframe-empty" class="iframe-empty">
<p>Select a site from the left to preview.</p>
</div>
</div>
</section>
<aside class="col-right">
<nav class="tabs">
<button class="tab active" data-tab="theme" type="button">Theme</button>
<button class="tab" data-tab="copy" type="button">Copy</button>
<button class="tab" data-tab="skills" type="button">Skills</button>
</nav>
<section class="tab-panel" data-panel="theme">
<div class="panel-row">
<div class="muted small">Palette</div>
<div id="palette-name" class="palette-name">—</div>
</div>
<div id="palette-pickers" class="pickers">
<label class="picker"><span>Primary</span><input type="color" data-key="primary" value="#000000" /><code data-hex></code></label>
<label class="picker"><span>Secondary</span><input type="color" data-key="secondary" value="#000000" /><code data-hex></code></label>
<label class="picker"><span>Accent</span><input type="color" data-key="accent" value="#000000" /><code data-hex></code></label>
<label class="picker"><span>Surface</span><input type="color" data-key="surface" value="#000000" /><code data-hex></code></label>
<label class="picker"><span>Ink</span><input type="color" data-key="ink" value="#000000" /><code data-hex></code></label>
</div>
<div id="theme-status" class="status muted small"></div>
</section>
<section class="tab-panel hidden" data-panel="copy">
<label class="field"><span>Hero headline</span><textarea data-copy="hero_headline" rows="2"></textarea></label>
<label class="field"><span>Hero subhead</span><textarea data-copy="hero_subhead" rows="2"></textarea></label>
<label class="field"><span>Hero CTA</span><textarea data-copy="hero_cta" rows="1"></textarea></label>
<label class="field"><span>About panel</span><textarea data-copy="about" rows="4"></textarea></label>
<label class="field"><span>Contact panel</span><textarea data-copy="contact" rows="3"></textarea></label>
<div class="row">
<button id="save-copy" class="btn-primary" type="button">Save copy</button>
<span id="copy-status" class="status muted small"></span>
</div>
</section>
<section class="tab-panel hidden" data-panel="skills">
<div class="muted small">Trigger pipeline skills against this site.</div>
<div id="skills-list" class="skills-list">
<button class="skill-btn" data-skill="four-horsemen" type="button"><span class="skill-name">four-horsemen</span><span class="skill-ts muted small"></span></button>
<button class="skill-btn" data-skill="palette" type="button"><span class="skill-name">palette</span><span class="skill-ts muted small"></span></button>
<button class="skill-btn" data-skill="style-lint" type="button"><span class="skill-name">style-lint</span><span class="skill-ts muted small"></span></button>
<button class="skill-btn" data-skill="frontend-design" type="button"><span class="skill-name">frontend-design</span><span class="skill-ts muted small"></span></button>
<button class="skill-btn" data-skill="performance-audit" type="button"><span class="skill-name">performance-audit</span><span class="skill-ts muted small"></span></button>
<button class="skill-btn" data-skill="code-review" type="button"><span class="skill-name">code-review</span><span class="skill-ts muted small"></span></button>
</div>
</section>
</aside>
</main>
<div id="modal" class="modal hidden">
<div class="modal-card">
<header class="modal-head">
<h2>Manager findings</h2>
<button id="modal-close" type="button" class="btn-ghost">Close</button>
</header>
<div id="findings-body" class="findings-body"></div>
</div>
</div>
<div id="toast" class="toast hidden"></div>
<script src="/editor.js"></script>
</body>
</html>