← back to Brand Selector Viewer
horsemen.html
537 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Four Horsemen — Brand Selector</title>
<style>
:root {
--bg: #0b0b0d;
--bg-2: #131318;
--bg-3: #1a1a22;
--line: #2a2a35;
--text: #f4f4f5;
--muted: #9c9caa;
--accent: #d4af37;
--paper: #ff8a50;
--figma: #a259ff;
--magic: #4ade80;
--canva: #00c4cc;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); }
body {
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
-webkit-font-smoothing: antialiased;
min-height: 100vh;
}
header {
padding: 36px 40px 22px;
border-bottom: 1px solid var(--line);
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
}
header .title {
font-family: "Didot", "Bodoni 72", Georgia, serif;
font-weight: 400;
font-size: 34px;
letter-spacing: 0.5px;
margin: 0;
}
header .eyebrow {
color: var(--accent);
font-size: 10px;
letter-spacing: 3px;
text-transform: uppercase;
margin-bottom: 6px;
}
header .sub {
color: var(--muted);
font-size: 13px;
margin-top: 6px;
font-style: italic;
}
.legend {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.legend .chip {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 1.5px;
}
.legend .dot {
width: 8px; height: 8px; border-radius: 50%;
}
main {
padding: 28px;
display: grid;
gap: 22px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 1100px) { main { grid-template-columns: 1fr; } }
.pane {
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 16px;
overflow: hidden;
display: flex;
flex-direction: column;
min-height: 580px;
}
.pane-head {
padding: 16px 20px;
border-bottom: 1px solid var(--line);
display: flex;
align-items: center;
gap: 14px;
background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
}
.pane-head .badge {
width: 30px; height: 30px;
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
font-family: "Didot", Georgia, serif;
font-size: 16px;
color: #0b0b0d;
font-weight: 700;
}
.pane-head h2 {
margin: 0;
font-family: "Didot", Georgia, serif;
font-weight: 400;
font-size: 20px;
}
.pane-head .role {
color: var(--muted);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 2px;
}
.pane-head .status {
margin-left: auto;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1.5px;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid var(--line);
color: var(--muted);
}
.pane-head .status.live { color: var(--magic); border-color: var(--magic); }
.pane-head .status.partial { color: var(--accent); border-color: var(--accent); }
.pane-head .status.spec { color: #9bb5ff; border-color: #9bb5ff; }
.pane-head .status.brief { color: var(--canva); border-color: var(--canva); }
.pane-body {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
.preview {
background: #07070a;
border-bottom: 1px solid var(--line);
min-height: 260px;
overflow: hidden;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.preview iframe {
width: 100%;
height: 320px;
border: 0;
background: #07070a;
}
.preview .placeholder {
padding: 32px;
color: var(--muted);
text-align: center;
}
.preview img { max-width: 100%; max-height: 320px; display: block; }
.meta {
padding: 16px 20px;
display: flex;
flex-direction: column;
gap: 10px;
}
.meta .row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
font-size: 12px;
}
.meta .row .k {
color: var(--muted);
text-transform: uppercase;
letter-spacing: 1.5px;
font-size: 10px;
}
.meta .row .v {
color: var(--text);
font-family: "SF Mono", Menlo, monospace;
font-size: 11px;
text-align: right;
word-break: break-all;
}
.meta a {
color: var(--accent);
text-decoration: none;
font-family: "SF Mono", Menlo, monospace;
font-size: 11px;
word-break: break-all;
}
.meta a:hover { text-decoration: underline; }
.actions {
padding: 14px 20px;
border-top: 1px solid var(--line);
display: flex;
gap: 8px;
flex-wrap: wrap;
background: var(--bg-3);
}
.btn {
background: var(--bg-2);
border: 1px solid var(--line);
color: var(--text);
padding: 7px 12px;
border-radius: 999px;
font-size: 11px;
letter-spacing: 0.5px;
cursor: pointer;
text-decoration: none;
display: inline-block;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn.primary {
background: var(--accent); color: #111; border-color: var(--accent);
}
.code {
background: #07070a;
border-top: 1px solid var(--line);
padding: 14px 20px;
overflow: auto;
max-height: 220px;
font-family: "SF Mono", Menlo, monospace;
font-size: 11px;
line-height: 1.55;
color: #d4d4d8;
white-space: pre;
}
/* Color-coded pane accents */
.pane.paper .pane-head .badge { background: var(--paper); }
.pane.figma .pane-head .badge { background: var(--figma); color: #fff; }
.pane.magic .pane-head .badge { background: var(--magic); }
.pane.canva .pane-head .badge { background: var(--canva); }
.pane.paper { border-top: 2px solid var(--paper); }
.pane.figma { border-top: 2px solid var(--figma); }
.pane.magic { border-top: 2px solid var(--magic); }
.pane.canva { border-top: 2px solid var(--canva); }
/* Modal */
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,0.78); display:none; align-items:center; justify-content:center; z-index:200; padding:24px; }
.modal-bg.show { display: flex; }
.modal { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 22px; max-width: 980px; width: 100%; max-height: 88vh; display: flex; flex-direction: column; }
.modal h3 { margin: 0 0 12px; font-family: "Didot", Georgia, serif; font-weight: 400; font-size: 20px; }
.modal pre { background:#07070a; border:1px solid var(--line); border-radius:8px; padding:16px; overflow:auto; font-size:11.5px; line-height:1.55; color:#d4d4d8; flex:1; margin: 0; }
.modal .row { display:flex; gap:8px; justify-content:flex-end; margin-top:14px; }
/* Footer */
footer {
padding: 28px 40px 60px;
color: var(--muted);
font-size: 12px;
border-top: 1px solid var(--line);
margin-top: 32px;
}
footer .pipeline {
display: flex;
gap: 14px;
align-items: center;
flex-wrap: wrap;
margin-top: 12px;
}
footer .step {
border: 1px solid var(--line);
padding: 8px 14px;
border-radius: 999px;
font-size: 11px;
letter-spacing: 0.5px;
color: var(--text);
}
footer .arrow { color: var(--accent); }
</style>
</head>
<body>
<header>
<div>
<div class="eyebrow">Four Horsemen · Brand Selector</div>
<h1 class="title">All four UI companies, side by side</h1>
<p class="sub">Paper · Figma · 21st.dev Magic · Canva — outputs for the Brand Selector / Figma Build Source picker</p>
</div>
<div class="legend">
<div class="chip"><span class="dot" style="background:var(--paper)"></span>Paper</div>
<div class="chip"><span class="dot" style="background:var(--figma)"></span>Figma</div>
<div class="chip"><span class="dot" style="background:var(--magic)"></span>Magic</div>
<div class="chip"><span class="dot" style="background:var(--canva)"></span>Canva</div>
</div>
</header>
<main>
<!-- PAPER -->
<article class="pane paper">
<div class="pane-head">
<div class="badge">P</div>
<div>
<div class="role">Design Lab — Interactive prototype</div>
<h2>Paper.design</h2>
</div>
<div class="status live">Complete</div>
</div>
<div class="pane-body">
<div class="preview" id="paper-preview" style="padding:14px;">
<div style="width:100%; max-height:300px; overflow:hidden; border-radius:8px; border:1px solid #2a2a35; background:#0b0b0d; padding:14px 18px;">
<div style="font-size:8px;letter-spacing:2px;text-transform:uppercase;color:#d4af37;">● Figma Build Source · v1</div>
<div style="font-family:Didot,serif;font-size:24px;color:#f4f4f5;margin-top:2px;line-height:1;">Brand Selector</div>
<div style="font-style:italic;color:#9c9caa;font-size:9px;margin-top:2px;">Pick the labels that will source the next Figma build</div>
<div style="margin-top:10px;font-family:Didot,serif;font-size:11px;color:#d4af37;">I. Fashion <span style="font-size:7px;letter-spacing:1.5px;color:#9c9caa;text-transform:uppercase;font-family:Inter,sans-serif;margin-left:6px;">Top 20</span></div>
<div style="display:grid;grid-template-columns:repeat(5,1fr);gap:3px;margin-top:6px;">
<div style="background:#131318;border:1px solid #2a2a35;border-radius:3px;padding:5px;font-family:Didot,serif;font-size:8px;color:#f4f4f5;">Louis Vuitton</div>
<div style="background:linear-gradient(135deg,rgba(212,175,55,0.15),#1a1a22);border:1px solid #d4af37;border-radius:3px;padding:5px;font-family:Didot,serif;font-size:8px;color:#f4f4f5;">Chanel ✓</div>
<div style="background:#131318;border:1px solid #2a2a35;border-radius:3px;padding:5px;font-family:Didot,serif;font-size:8px;color:#f4f4f5;">Hermès</div>
<div style="background:#131318;border:1px solid #2a2a35;border-radius:3px;padding:5px;font-family:Didot,serif;font-size:8px;color:#f4f4f5;">Gucci</div>
<div style="background:#131318;border:1px solid #2a2a35;border-radius:3px;padding:5px;font-family:Didot,serif;font-size:8px;color:#f4f4f5;">Prada</div>
<div style="background:#131318;border:1px solid #2a2a35;border-radius:3px;padding:5px;font-family:Didot,serif;font-size:8px;color:#f4f4f5;">Dior</div>
<div style="background:linear-gradient(135deg,rgba(212,175,55,0.15),#1a1a22);border:1px solid #d4af37;border-radius:3px;padding:5px;font-family:Didot,serif;font-size:8px;color:#f4f4f5;">Versace ✓</div>
<div style="background:#131318;border:1px solid #2a2a35;border-radius:3px;padding:5px;font-family:Didot,serif;font-size:8px;color:#f4f4f5;">Burberry</div>
<div style="background:#131318;border:1px solid #2a2a35;border-radius:3px;padding:5px;font-family:Didot,serif;font-size:8px;color:#f4f4f5;">Saint L.</div>
<div style="background:#131318;border:1px solid #2a2a35;border-radius:3px;padding:5px;font-family:Didot,serif;font-size:8px;color:#f4f4f5;">Balenciaga</div>
</div>
<div style="margin-top:10px;font-family:Didot,serif;font-size:11px;color:#d4af37;">II. Wallcovering <span style="font-size:7px;letter-spacing:1.5px;color:#9c9caa;text-transform:uppercase;font-family:Inter,sans-serif;margin-left:6px;">Top 10</span></div>
<div style="display:grid;grid-template-columns:repeat(5,1fr);gap:3px;margin-top:6px;">
<div style="background:linear-gradient(135deg,rgba(212,175,55,0.15),#1a1a22);border:1px solid #d4af37;border-radius:3px;padding:5px;font-family:Didot,serif;font-size:8px;color:#f4f4f5;">Phillip J. ✓</div>
<div style="background:#131318;border:1px solid #2a2a35;border-radius:3px;padding:5px;font-family:Didot,serif;font-size:8px;color:#f4f4f5;">Schumacher</div>
<div style="background:#131318;border:1px solid #2a2a35;border-radius:3px;padding:5px;font-family:Didot,serif;font-size:8px;color:#f4f4f5;">Cole & Son</div>
<div style="background:#131318;border:1px solid #2a2a35;border-radius:3px;padding:5px;font-family:Didot,serif;font-size:8px;color:#f4f4f5;">Thibaut</div>
<div style="background:#131318;border:1px solid #2a2a35;border-radius:3px;padding:5px;font-family:Didot,serif;font-size:8px;color:#f4f4f5;">Zoffany</div>
</div>
<div style="display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:8px;border-top:1px solid #2a2a35;">
<div style="font-size:8px;color:#9c9caa;"><span style="color:#d4af37;font-family:Didot,serif;">3</span> selected · Chanel · Versace · Phillip Jeffries</div>
<div style="background:#d4af37;color:#111;font-size:8px;padding:3px 8px;border-radius:99px;">Send to Figma Build →</div>
</div>
</div>
</div>
<div class="meta">
<div class="row"><span class="k">File</span><span class="v">novasuede</span></div>
<div class="row"><span class="k">Artboard</span><span class="v">1-0 · 1440 × fit-content (~2200)</span></div>
<div class="row"><span class="k">Layers</span><span class="v">30 cards · 3 selected · sticky dock</span></div>
<div class="row"><span class="k">Fonts</span><span class="v">Didot · Cormorant · Inter</span></div>
<div class="row"><span class="k">URL</span><a href="https://app.paper.design/file/01KQA7KRG8FDP7RH2WXPJYDFNQ" target="_blank" rel="noopener noreferrer">app.paper.design/…01KQA7KRG8FDP7RH2WXPJYDFNQ</a></div>
</div>
<div class="actions">
<a class="btn primary" href="https://app.paper.design/file/01KQA7KRG8FDP7RH2WXPJYDFNQ" target="_blank" rel="noopener noreferrer">Open in Paper →</a>
<button class="btn" data-view="paper">View summary</button>
</div>
</div>
</article>
<!-- FIGMA -->
<article class="pane figma">
<div class="pane-head">
<div class="badge">F</div>
<div>
<div class="role">System of record — Tokens & components</div>
<h2>Figma</h2>
</div>
<div class="status live">Live design imported</div>
</div>
<div class="pane-body">
<div class="preview">
<iframe src="https://www.figma.com/embed?embed_host=brand-selector&url=https%3A%2F%2Fwww.figma.com%2Fdesign%2FDr1u75PIPSjMJTb2eidqUu%3Fnode-id%3D24-2" allowfullscreen></iframe>
</div>
<div class="meta">
<div class="row"><span class="k">File</span><span class="v">Dr1u75PIPSjMJTb2eidqUu</span></div>
<div class="row"><span class="k">Node</span><span class="v">24:2 · captured from magic-app.html</span></div>
<div class="row"><span class="k">Auth</span><span class="v">steve@designerwallcoverings.com ✓</span></div>
<div class="row"><span class="k">Tokens</span><span class="v">color · type · radius · spacing · components</span></div>
<div class="row"><span class="k">Schema</span><span class="v">figma-build/brand-selection.v1</span></div>
<div class="row"><span class="k">URL</span><a href="https://www.figma.com/design/Dr1u75PIPSjMJTb2eidqUu?node-id=24-2" target="_blank" rel="noopener noreferrer">figma.com/design/…?node-id=24-2</a></div>
</div>
<div class="actions">
<a class="btn primary" href="https://www.figma.com/design/Dr1u75PIPSjMJTb2eidqUu?node-id=24-2" target="_blank" rel="noopener noreferrer">Open in Figma →</a>
<button class="btn" data-view="figma">View token JSON</button>
<a class="btn" href="outputs/figma-tokens.json" target="_blank" rel="noopener noreferrer">Raw .json</a>
</div>
</div>
</article>
<!-- MAGIC -->
<article class="pane magic">
<div class="pane-head">
<div class="badge">M</div>
<div>
<div class="role">Production component — React/Tailwind</div>
<h2>21st.dev Magic</h2>
</div>
<div class="status live">Component ready</div>
</div>
<div class="pane-body">
<div class="preview">
<iframe src="magic-app.html"></iframe>
</div>
<div class="meta">
<div class="row"><span class="k">File</span><span class="v">outputs/magic-BrandSelector.tsx</span></div>
<div class="row"><span class="k">Stack</span><span class="v">React 18 + Tailwind, props-driven</span></div>
<div class="row"><span class="k">Export</span><span class="v">default BrandSelector</span></div>
<div class="row"><span class="k">Live demo</span><a href="magic-app.html" target="_blank" rel="noopener noreferrer">magic-app.html (live React)</a></div>
<div class="row"><span class="k">Plain HTML</span><a href="index.html" target="_blank" rel="noopener noreferrer">index.html (vanilla version)</a></div>
</div>
<div class="actions">
<a class="btn primary" href="magic-app.html" target="_blank" rel="noopener noreferrer">Open live React →</a>
<button class="btn" data-view="magic">View component code</button>
<a class="btn" href="outputs/magic-BrandSelector.tsx" target="_blank" rel="noopener noreferrer">Raw .tsx</a>
<a class="btn" href="index.html" target="_blank" rel="noopener noreferrer">Vanilla HTML</a>
</div>
</div>
</article>
<!-- CANVA -->
<article class="pane canva">
<div class="pane-head">
<div class="badge">C</div>
<div>
<div class="role">Marketing & exports — Brand templates</div>
<h2>Canva</h2>
</div>
<div class="status brief">Brief drafted</div>
</div>
<div class="pane-body">
<div class="preview">
<div class="placeholder" style="text-align:left;padding:28px;">
<div style="font-family:Didot,serif;font-size:64px;color:#f4f4f5;line-height:1;text-align:center;">Brand Selector</div>
<div style="font-style:italic;color:#9c9caa;font-size:14px;text-align:center;margin-top:8px;">Top 20 fashion · Top 10 wallcovering</div>
<div style="display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:22px;">
<!-- 18 mini name plates as a hint -->
<div style="font-family:Didot,serif;font-size:10px;text-align:center;padding:8px 4px;border:1px solid #2a2a35;border-radius:4px;color:#d4d4d8;">Louis Vuitton</div>
<div style="font-family:Didot,serif;font-size:10px;text-align:center;padding:8px 4px;border:1px solid #2a2a35;border-radius:4px;color:#d4d4d8;">Chanel</div>
<div style="font-family:Didot,serif;font-size:10px;text-align:center;padding:8px 4px;border:1px solid #2a2a35;border-radius:4px;color:#d4d4d8;">Hermès</div>
<div style="font-family:Didot,serif;font-size:10px;text-align:center;padding:8px 4px;border:1px solid #2a2a35;border-radius:4px;color:#d4d4d8;">Gucci</div>
<div style="font-family:Didot,serif;font-size:10px;text-align:center;padding:8px 4px;border:1px solid #2a2a35;border-radius:4px;color:#d4d4d8;">Prada</div>
<div style="font-family:Didot,serif;font-size:10px;text-align:center;padding:8px 4px;border:1px solid #2a2a35;border-radius:4px;color:#d4d4d8;">Dior</div>
<div style="font-family:Didot,serif;font-size:10px;text-align:center;padding:8px 4px;border:1px solid #2a2a35;border-radius:4px;color:#d4d4d8;">Versace</div>
<div style="font-family:Didot,serif;font-size:10px;text-align:center;padding:8px 4px;border:1px solid #2a2a35;border-radius:4px;color:#d4d4d8;">Burberry</div>
<div style="font-family:Didot,serif;font-size:10px;text-align:center;padding:8px 4px;border:1px solid #2a2a35;border-radius:4px;color:#d4d4d8;">Saint Laurent</div>
<div style="font-family:Didot,serif;font-size:10px;text-align:center;padding:8px 4px;border:1px solid #2a2a35;border-radius:4px;color:#d4d4d8;">Balenciaga</div>
<div style="font-family:Didot,serif;font-size:10px;text-align:center;padding:8px 4px;border:1px solid #2a2a35;border-radius:4px;color:#d4d4d8;">Bottega</div>
<div style="font-family:Didot,serif;font-size:10px;text-align:center;padding:8px 4px;border:1px solid #2a2a35;border-radius:4px;color:#d4d4d8;">Fendi</div>
<div style="font-family:Didot,serif;font-size:10px;text-align:center;padding:8px 4px;border:1px solid #2a2a35;border-radius:4px;color:#d4d4d8;">Schumacher</div>
<div style="font-family:Didot,serif;font-size:10px;text-align:center;padding:8px 4px;border:1px solid #2a2a35;border-radius:4px;color:#d4d4d8;">Cole & Son</div>
<div style="font-family:Didot,serif;font-size:10px;text-align:center;padding:8px 4px;border:1px solid #2a2a35;border-radius:4px;color:#d4d4d8;">Thibaut</div>
<div style="font-family:Didot,serif;font-size:10px;text-align:center;padding:8px 4px;border:1px solid #2a2a35;border-radius:4px;color:#d4d4d8;">Zoffany</div>
<div style="font-family:Didot,serif;font-size:10px;text-align:center;padding:8px 4px;border:1px solid #2a2a35;border-radius:4px;color:#d4d4d8;">Phillip Jeffries</div>
<div style="font-family:Didot,serif;font-size:10px;text-align:center;padding:8px 4px;border:1px solid #2a2a35;border-radius:4px;color:#d4d4d8;">de Gournay</div>
</div>
<div style="margin-top:14px;color:#5a5a6a;font-size:10px;text-align:center;">Mock of brand-template tile · 1080 × 1350</div>
</div>
</div>
<div class="meta">
<div class="row"><span class="k">Template</span><span class="v">dw-brand-selector-v1 (proposed)</span></div>
<div class="row"><span class="k">Formats</span><span class="v">IG 1080×1350 · LI 1200×628 · PDF</span></div>
<div class="row"><span class="k">Auth</span><span class="v">awaiting `canva login`</span></div>
<div class="row"><span class="k">Brief</span><a href="outputs/canva-brief.md" target="_blank" rel="noopener noreferrer">outputs/canva-brief.md</a></div>
</div>
<div class="actions">
<a class="btn primary" href="https://canva.com/" target="_blank" rel="noopener noreferrer">Open Canva →</a>
<button class="btn" data-view="canva">View brief</button>
</div>
</div>
</article>
</main>
<footer>
<div>The pipeline:</div>
<div class="pipeline">
<span class="step">Paper · prototype</span>
<span class="arrow">→</span>
<span class="step">Figma · tokens + live design</span>
<span class="arrow">→</span>
<span class="step">Magic · component</span>
<span class="arrow">→</span>
<span class="step">Canva · marketing</span>
<span class="arrow">→</span>
<span class="step" style="border-color:var(--accent);color:var(--accent);">designerwallcoverings.com / build</span>
</div>
</footer>
<div class="modal-bg" id="modal">
<div class="modal">
<h3 id="modal-title">Output</h3>
<pre id="modal-body"></pre>
<div class="row">
<button class="btn" id="copy">Copy</button>
<button class="btn primary" id="close">Close</button>
</div>
</div>
</div>
<script>
const sources = {
paper: "outputs/paper-summary.md",
figma: "outputs/figma-tokens.json",
magic: "outputs/magic-BrandSelector.tsx",
canva: "outputs/canva-brief.md",
};
const titles = {
paper: "Paper — build summary",
figma: "Figma — design tokens",
magic: "Magic — BrandSelector.tsx",
canva: "Canva — marketing brief",
};
document.body.addEventListener("click", async (e) => {
const t = e.target.closest("[data-view]");
if (!t) return;
const k = t.dataset.view;
document.getElementById("modal-title").textContent = titles[k];
document.getElementById("modal").classList.add("show");
try {
const r = await fetch(sources[k]);
if (!r.ok) throw new Error(`HTTP ${r.status}`);
document.getElementById("modal-body").textContent = await r.text();
} catch (err) {
document.getElementById("modal-body").textContent =
`Could not load ${sources[k]} — ${err.message}.\n` +
`Serve this folder over HTTP (file:// blocks fetch) and confirm the file exists.`;
}
});
document.getElementById("close").onclick = () => document.getElementById("modal").classList.remove("show");
document.getElementById("copy").onclick = async () => {
await navigator.clipboard.writeText(document.getElementById("modal-body").textContent);
document.getElementById("copy").textContent = "Copied";
setTimeout(() => document.getElementById("copy").textContent = "Copy", 1500);
};
</script>
</body>
</html>