npm - howone - Versions diffs - 0.1.20 → 0.1.23 - Mend

howone 0.1.20 → 0.1.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (298) hide show

package/templates/vite/.howone/skills/hallmark/site/_tests/custom/02-loop/index.html ADDED Viewed

@@ -0,0 +1,110 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Loop — real-time payment-rail observability for fintechs</title>
+  <meta name="description" content="See every cross-rail payment in real time. Find the regressed leg, read why, and clear the queue before the SLA fires." />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500&family=Geist:wght@400;500;600&display=swap" />
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <main class="page">
+    <header class="masthead">
+      <span class="masthead__brand"><span class="dot"></span>loop · v0.7</span>
+      <nav class="masthead__nav">
+        <a href="#walkthrough">Walkthrough</a>
+        <a href="#">Rails</a>
+        <a href="#">Pricing</a>
+        <a href="#">Docs</a>
+      </nav>
+    </header>
+    <section class="hero">
+      <div class="hero__copy">
+        <p class="hero__eyebrow">For payment platform engineers</p>
+        <h1 class="hero__head">Real-time payment-rail observability that <em>tells you why.</em></h1>
+        <p class="hero__sub">
+          Watch every leg of a cross-rail payment in flight. Find the regressed
+          hop, read why — in plain text — without grafana, splunk, and a status-page hunt.
+          Loop is what your on-call wishes the bank's API gave them.
+        </p>
+        <div class="hero__cta">
+          <a class="btn btn--primary" href="#">Try it free <span aria-hidden="true">→</span></a>
+          <a class="btn" href="#">Talk to sales</a>
+        </div>
+      </div>
+      <aside class="hero__panel" aria-label="Sample trace preview">
+        <div class="hero__panel-head"><span>payment · 9c3a72ef</span><span>4.21 s</span></div>
+        <div class="trace">
+          <div class="span"><span class="span__label">api.transfer</span><span class="span__bar"><i style="width:100%"></i></span><span class="span__time">4.21s</span></div>
+          <div class="span"><span class="span__label">↳ kyc.verify</span><span class="span__bar"><i style="width:18%"></i></span><span class="span__time">762ms</span></div>
+          <div class="span span--err"><span class="span__label">↳ rail.swift</span><span class="span__bar"><i style="width:78%"></i></span><span class="span__time">3.28s</span></div>
+          <div class="span span--warn"><span class="span__label">&nbsp;&nbsp;↳ fx.spot</span><span class="span__bar"><i style="width:62%"></i></span><span class="span__time">2.71s</span></div>
+          <div class="span"><span class="span__label">↳ ledger.write</span><span class="span__bar"><i style="width:6%"></i></span><span class="span__time">240ms</span></div>
+        </div>
+      </aside>
+    </section>
+    <section class="workbench" id="walkthrough">
+      <div class="steps">
+        <article class="step">
+          <p class="step__num">step 01 · open</p>
+          <h2 class="step__head">Open the payment, not a dashboard.</h2>
+          <p class="step__body">
+            Drop a payment ID, an idempotency key, or a five-second time window. Loop
+            pulls the legs from your rails and renders them inline — no Grafana hop,
+            no link to Splunk, no separate logs window. The payment is the unit of work.
+          </p>
+        </article>
+        <article class="step">
+          <p class="step__num">step 02 · find</p>
+          <h2 class="step__head">Find the regressed leg.</h2>
+          <p class="step__body">
+            Loop ranks legs by <strong>p99 deviation against your rail's seven-day baseline</strong>.
+            The first one in the list is almost always the problem. The baseline is
+            precomputed every five minutes per rail; you don't set it.
+          </p>
+        </article>
+        <article class="step">
+          <p class="step__num">step 03 · read</p>
+          <h2 class="step__head">Read why, in plain text.</h2>
+          <p class="step__body">
+            Each leg carries an <strong>auto-generated explainer</strong>: which dependency
+            regressed, which version of which service, which deploy correlates, and the
+            diff between then and now. Plain text, copy-paste ready into a post-mortem.
+          </p>
+        </article>
+      </div>
+      <aside class="pinned" aria-label="Pinned trace panel">
+        <header class="pinned__head">
+          <span>payment · 9c3a72ef</span>
+          <span class="pinned__chip">REGRESSED</span>
+        </header>
+        <div class="trace">
+          <div class="span"><span class="span__label">api.transfer</span><span class="span__bar"><i style="width:100%"></i></span><span class="span__time">4.21s</span></div>
+          <div class="span"><span class="span__label">↳ kyc.verify</span><span class="span__bar"><i style="width:18%"></i></span><span class="span__time">762ms</span></div>
+          <div class="span span--err"><span class="span__label">↳ rail.swift</span><span class="span__bar"><i style="width:78%"></i></span><span class="span__time">3.28s</span></div>
+          <div class="span span--warn"><span class="span__label">&nbsp;&nbsp;↳ fx.spot</span><span class="span__bar"><i style="width:62%"></i></span><span class="span__time">2.71s</span></div>
+          <div class="span"><span class="span__label">↳ ledger.write</span><span class="span__bar"><i style="width:6%"></i></span><span class="span__time">240ms</span></div>
+        </div>
+        <p class="pinned__why">
+          <strong>WHY:</strong> rail.swift p99 doubled at 14:02 UTC. Correlates with
+          counterparty BNYM-N's queue depth crossing 12 k pending. Loop's escalation
+          fires automatically; oncall has the diff in their inbox.
+        </p>
+      </aside>
+    </section>
+    <footer class="colophon">
+      <span>Loop · v0.7 · made in Lisbon &amp; Berlin</span>
+      <span><a href="#">docs</a> · <a href="#">changelog</a> · <a href="#">status</a> · <a href="#">github</a></span>
+    </footer>
+  </main>
+</body>
+</html>

package/templates/vite/.howone/skills/hallmark/site/_tests/custom/02-loop/style.css ADDED Viewed

@@ -0,0 +1,326 @@
+/* Hallmark · macrostructure: Workbench · F2 sticky-scroll knobs: pinned=right, content=trace-panel, steps=3
+ * theme: custom · vibe: "industrial precision, cool, technical" · paper: oklch(13% 0.012 220) · accent: oklch(72% 0.16 220)
+ * display: Geist Mono 500 · body: Geist · axes: dark / mono / cool
+ * studied: no · context: explicit · v0.7.0
+ */
+:root {
+  /* Custom palette — dark cool, sea-blue anchor */
+  --color-paper: oklch(13% 0.012 220);
+  --color-paper-2: oklch(17% 0.014 220);
+  --color-paper-3: oklch(22% 0.014 220);
+  --color-rule: oklch(30% 0.012 220);
+  --color-rule-2: oklch(26% 0.012 220);
+  --color-muted: oklch(58% 0.012 220);
+  --color-neutral: oklch(50% 0.012 220);
+  --color-ink: oklch(94% 0.010 220);
+  --color-ink-2: oklch(72% 0.010 220);
+  --color-accent: oklch(72% 0.16 220);
+  --color-accent-ink: oklch(13% 0.012 220);
+  --color-focus: oklch(78% 0.20 220);
+  --color-warn: oklch(72% 0.16 70);
+  --color-error: oklch(64% 0.18 28);
+  /* Single-family pair: Geist Mono display + Geist body — same family, different widths */
+  --font-display: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
+  --font-body: "Geist", "Inter Tight", -apple-system, sans-serif;
+  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
+  --space-3xs: 0.25rem;
+  --space-2xs: 0.5rem;
+  --space-xs: 0.75rem;
+  --space-sm: 1rem;
+  --space-md: 1.5rem;
+  --space-lg: 2rem;
+  --space-xl: 3rem;
+  --space-2xl: 4.5rem;
+  --space-3xl: 6.5rem;
+  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
+  --dur-micro: 100ms;
+  --dur-short: 200ms;
+}
+* { box-sizing: border-box; }
+html, body { overflow-x: clip; }
+body {
+  margin: 0;
+  background: var(--color-paper);
+  color: var(--color-ink);
+  font-family: var(--font-body);
+  font-size: 0.9375rem;
+  line-height: 1.55;
+  -webkit-font-smoothing: antialiased;
+}
+.page { max-width: 80rem; margin: 0 auto; padding: 0 var(--space-lg); }
+.masthead {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--space-md) 0;
+  border-block-end: 1px solid var(--color-rule);
+  font-family: var(--font-display);
+  font-size: 0.8125rem;
+  letter-spacing: 0.04em;
+  color: var(--color-ink-2);
+}
+.masthead__brand { color: var(--color-ink); font-weight: 500; }
+.masthead__brand .dot {
+  display: inline-block;
+  width: 0.55ch;
+  height: 0.55ch;
+  background: var(--color-accent);
+  border-radius: 50%;
+  margin-inline-end: 0.5ch;
+  vertical-align: 0.1em;
+}
+.masthead__nav { display: flex; gap: var(--space-md); }
+.masthead__nav a {
+  color: var(--color-ink-2);
+  text-decoration: none;
+  transition: color var(--dur-micro) var(--ease-out);
+}
+.masthead__nav a:hover, .masthead__nav a:focus-visible { color: var(--color-ink); }
+.masthead__nav a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
+/* Hero */
+.hero {
+  padding: var(--space-3xl) 0 var(--space-2xl);
+  display: grid;
+  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
+  gap: var(--space-2xl);
+  align-items: end;
+  border-block-end: 1px solid var(--color-rule);
+}
+.hero__copy { max-width: 36rem; }
+.hero__eyebrow {
+  font-family: var(--font-display);
+  font-size: 0.75rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--color-accent);
+  margin: 0 0 var(--space-md);
+}
+.hero__head {
+  font-family: var(--font-display);
+  font-size: clamp(2rem, 4.5vw, 3.5rem);
+  font-weight: 500;
+  line-height: 1.05;
+  letter-spacing: -0.025em;
+  margin: 0 0 var(--space-md);
+  color: var(--color-ink);
+}
+.hero__head em { font-style: normal; color: var(--color-accent); }
+.hero__sub {
+  font-size: 1.0625rem;
+  line-height: 1.5;
+  color: var(--color-ink-2);
+  margin: 0 0 var(--space-lg);
+  max-width: 56ch;
+}
+.hero__cta { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5ch;
+  padding: var(--space-sm) var(--space-md);
+  font-family: var(--font-display);
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-decoration: none;
+  border: 1px solid var(--color-rule);
+  background: transparent;
+  color: var(--color-ink);
+  cursor: pointer;
+  line-height: 1;
+  transition: background var(--dur-micro) var(--ease-out),
+              border-color var(--dur-micro) var(--ease-out),
+              color var(--dur-micro) var(--ease-out);
+}
+.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }
+.btn--primary:hover, .btn--primary:focus-visible { background: var(--color-ink); border-color: var(--color-ink); }
+.btn:hover, .btn:focus-visible { border-color: var(--color-accent); color: var(--color-accent); }
+.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
+/* Hero panel — sample trace */
+.hero__panel {
+  background: var(--color-paper-2);
+  border: 1px solid var(--color-rule);
+  border-radius: 4px;
+  padding: var(--space-md);
+  font-family: var(--font-display);
+  font-size: 0.75rem;
+}
+.hero__panel-head {
+  display: flex; justify-content: space-between;
+  border-block-end: 1px solid var(--color-rule);
+  padding-block-end: var(--space-2xs);
+  margin-block-end: var(--space-sm);
+  color: var(--color-ink-2);
+}
+.trace { display: grid; gap: 4px; }
+.span {
+  display: grid;
+  grid-template-columns: 14ch 1fr 6ch;
+  gap: var(--space-2xs);
+  align-items: center;
+}
+.span__label { color: var(--color-ink); white-space: nowrap; }
+.span__bar {
+  position: relative;
+  height: 8px;
+  background: var(--color-paper-3);
+  border-radius: 1px;
+  overflow: hidden;
+}
+.span__bar > i {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+  background: var(--color-accent);
+  border-radius: 1px;
+}
+.span--err .span__bar > i { background: var(--color-error); }
+.span--warn .span__bar > i { background: var(--color-warn); }
+.span__time { font-variant-numeric: tabular-nums; color: var(--color-ink-2); text-align: end; }
+/* Walkthrough */
+.workbench {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
+  gap: var(--space-2xl);
+  padding: var(--space-3xl) 0;
+}
+.steps { display: grid; gap: var(--space-3xl); }
+.step {
+  border-inline-start: 2px solid var(--color-rule);
+  padding-inline-start: var(--space-lg);
+  position: relative;
+}
+.step::before {
+  content: "";
+  position: absolute;
+  inset-inline-start: -2px;
+  inset-block-start: 0;
+  width: 2px;
+  height: 0;
+  background: var(--color-accent);
+  transition: height var(--dur-short) var(--ease-out);
+}
+.step:hover::before, .step:focus-within::before { height: 100%; }
+.step__num {
+  font-family: var(--font-display);
+  font-size: 0.75rem;
+  letter-spacing: 0.12em;
+  color: var(--color-accent);
+  text-transform: uppercase;
+  margin-block-end: var(--space-sm);
+}
+.step__head {
+  font-family: var(--font-display);
+  font-size: clamp(1.5rem, 2.5vw, 2rem);
+  font-weight: 500;
+  letter-spacing: -0.015em;
+  line-height: 1.1;
+  margin: 0 0 var(--space-md);
+  color: var(--color-ink);
+}
+.step__body {
+  font-size: 1rem;
+  line-height: 1.6;
+  color: var(--color-ink-2);
+  max-width: 48ch;
+}
+.step__body strong { color: var(--color-ink); font-weight: 500; }
+.pinned {
+  position: sticky;
+  top: var(--space-xl);
+  height: fit-content;
+  background: var(--color-paper-2);
+  border: 1px solid var(--color-rule);
+  border-radius: 4px;
+  padding: var(--space-lg);
+}
+.pinned__head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-family: var(--font-display);
+  font-size: 0.75rem;
+  letter-spacing: 0.06em;
+  color: var(--color-ink-2);
+  border-block-end: 1px solid var(--color-rule);
+  padding-block-end: var(--space-sm);
+  margin-block-end: var(--space-md);
+}
+.pinned__chip {
+  font-family: var(--font-display);
+  font-size: 0.6875rem;
+  letter-spacing: 0.08em;
+  padding: 2px 6px;
+  border: 1px solid var(--color-accent);
+  color: var(--color-accent);
+  border-radius: 2px;
+}
+.pinned__why {
+  margin-block-start: var(--space-md);
+  padding-block-start: var(--space-md);
+  border-block-start: 1px solid var(--color-rule);
+  font-family: var(--font-body);
+  font-size: 0.875rem;
+  color: var(--color-ink-2);
+  line-height: 1.5;
+}
+.pinned__why strong { color: var(--color-error); font-weight: 500; }
+.colophon {
+  padding: var(--space-md) 0;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: var(--space-sm);
+  font-family: var(--font-display);
+  font-size: 0.75rem;
+  letter-spacing: 0.06em;
+  color: var(--color-ink-2);
+  border-block-start: 1px solid var(--color-rule);
+}
+.colophon a { color: var(--color-ink-2); text-decoration: none; transition: color var(--dur-micro) var(--ease-out); }
+.colophon a:hover, .colophon a:focus-visible { color: var(--color-accent); }
+.colophon a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
+@media (max-width: 56rem) {
+  .hero { grid-template-columns: 1fr; }
+  .workbench { grid-template-columns: 1fr; }
+  .pinned { position: static; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .step::before { transition: none; }
+}

package/templates/vite/.howone/skills/hallmark/site/_tests/custom/03-mossroot/index.html ADDED Viewed

@@ -0,0 +1,134 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Mossroot — small-batch herbal apothecary, Porto</title>
+  <meta name="description" content="A small herbal apothecary in Porto. Tinctures, salves, tea blends, dried herbs. Made by hand, sold by the gram." />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap" />
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <main class="page">
+    <header class="masthead">
+      <hr class="masthead__rule" />
+      <h1 class="masthead__brand">Moss<span class="em">root</span></h1>
+      <p class="masthead__sub">Herbal apothecary · Porto · est. 2024 · made by hand · sold by the gram</p>
+    </header>
+    <section class="todays">
+      <h2 class="todays__head">This week's batch</h2>
+      <p class="todays__date">made the first of May — eight things — sold from the bench until they're gone</p>
+    </section>
+    <ul class="catalogue" role="list" aria-label="This week's apothecary batch">
+      <li class="item">
+        <span class="item__shape item__shape--accent" aria-hidden="true">
+          <svg viewBox="0 0 96 96"><path d="M48 12 C 24 28, 24 60, 48 84 C 72 60, 72 28, 48 12"/><path d="M48 24 L48 80 M30 50 L48 50 L66 50"/></svg>
+        </span>
+        <div class="item__body">
+          <h3 class="item__name">Calendula <em>salve</em></h3>
+          <p class="item__desc">Cold-infused calendula in olive oil, set with beeswax. For dry hands and small cuts.</p>
+        </div>
+        <span class="item__price">€18 / 30 g</span>
+      </li>
+      <li class="item">
+        <span class="item__shape" aria-hidden="true">
+          <svg viewBox="0 0 96 96"><path d="M30 76 L30 30 Q48 18 66 30 L66 76 Z"/><path d="M30 36 L66 36 M30 50 L66 50 M30 64 L66 64"/></svg>
+        </span>
+        <div class="item__body">
+          <h3 class="item__name">Lemon balm <em>tincture</em></h3>
+          <p class="item__desc">Garden-grown <em>melissa</em>, six-week alcohol extraction. Forty drops at bedtime.</p>
+        </div>
+        <span class="item__price">€24 / 50 ml</span>
+      </li>
+      <li class="item">
+        <span class="item__shape item__shape--accent" aria-hidden="true">
+          <svg viewBox="0 0 96 96"><circle cx="48" cy="48" r="32"/><path d="M48 16 Q56 32 48 48 Q40 64 48 80"/><path d="M16 48 Q32 56 48 48 Q64 40 80 48"/></svg>
+        </span>
+        <div class="item__body">
+          <h3 class="item__name">Three-flower <em>tea blend</em></h3>
+          <p class="item__desc">Chamomile, rose, lavender. Loose-leaf, no tea-bag, no flavour.</p>
+        </div>
+        <span class="item__price">€14 / 60 g</span>
+      </li>
+      <li class="item">
+        <span class="item__shape" aria-hidden="true">
+          <svg viewBox="0 0 96 96"><path d="M16 60 Q32 36 48 60 Q64 36 80 60"/><path d="M16 60 L16 72 L80 72 L80 60"/><path d="M48 30 L48 60"/></svg>
+        </span>
+        <div class="item__body">
+          <h3 class="item__name">Mossy forest <em>balm</em></h3>
+          <p class="item__desc">Pine resin, comfrey, beeswax. For aching joints — what the dock workers buy.</p>
+        </div>
+        <span class="item__price">€26 / 60 g</span>
+      </li>
+      <li class="item">
+        <span class="item__shape item__shape--accent" aria-hidden="true">
+          <svg viewBox="0 0 96 96"><path d="M48 16 Q34 24 30 38 Q26 52 32 64 Q40 76 48 80"/><path d="M48 16 Q62 24 66 38 Q70 52 64 64 Q56 76 48 80"/></svg>
+        </span>
+        <div class="item__body">
+          <h3 class="item__name">Yarrow <em>tincture</em></h3>
+          <p class="item__desc">Wild-foraged from Gerês, six-week extraction. For colds, fevers, and blood-tonic.</p>
+        </div>
+        <span class="item__price">€22 / 50 ml</span>
+      </li>
+      <li class="item">
+        <span class="item__shape" aria-hidden="true">
+          <svg viewBox="0 0 96 96"><circle cx="48" cy="48" r="20"/><circle cx="48" cy="48" r="32"/><path d="M48 16 L48 80 M16 48 L80 48"/></svg>
+        </span>
+        <div class="item__body">
+          <h3 class="item__name">Rose-petal <em>honey</em></h3>
+          <p class="item__desc">Local honey, wild rose petals from the Douro. Friday batch only — six jars.</p>
+        </div>
+        <span class="item__price item__price--out">sold out</span>
+      </li>
+      <li class="item">
+        <span class="item__shape item__shape--accent" aria-hidden="true">
+          <svg viewBox="0 0 96 96"><path d="M48 14 Q60 28 60 48 Q60 68 48 82 Q36 68 36 48 Q36 28 48 14"/><path d="M48 14 L48 82"/></svg>
+        </span>
+        <div class="item__body">
+          <h3 class="item__name">Sage &amp; thyme <em>vinegar</em></h3>
+          <p class="item__desc">Apple cider, fresh sage, thyme, four weeks dark. For salad, for sore throats.</p>
+        </div>
+        <span class="item__price">€16 / 250 ml</span>
+      </li>
+      <li class="item">
+        <span class="item__shape" aria-hidden="true">
+          <svg viewBox="0 0 96 96"><circle cx="48" cy="48" r="6"/><circle cx="28" cy="38" r="4"/><circle cx="68" cy="38" r="4"/><circle cx="38" cy="62" r="4"/><circle cx="58" cy="62" r="4"/><circle cx="48" cy="22" r="3"/><circle cx="48" cy="74" r="3"/></svg>
+        </span>
+        <div class="item__body">
+          <h3 class="item__name">Dried <em>seven-herb</em> bunch</h3>
+          <p class="item__desc">St-John's-wort, mugwort, chamomile, rosemary, lavender, lemon balm, sage. Tied with twine.</p>
+        </div>
+        <span class="item__price">€12 / bunch</span>
+      </li>
+    </ul>
+    <section class="visit">
+      <h2 class="visit__head">Find us</h2>
+      <div class="visit__lines">
+        <span><strong>Rua de Cedofeita 308, Porto</strong></span>
+        <span><em>Tuesday – Saturday, 11 a.m. until the bench is empty (usually 6 p.m.)</em></span>
+        <span><em>No online orders. Bring a glass jar if you'd like a refill.</em></span>
+      </div>
+    </section>
+    <footer class="colophon">
+      <span>Mossroot · the year twenty twenty-six · the first of May</span>
+      &nbsp;·&nbsp;
+      <a href="mailto:hello@mossroot.pt">hello@mossroot.pt</a>
+    </footer>
+  </main>
+</body>
+</html>