mirror of
https://github.com/nexu-io/open-design.git
synced 2026-06-01 03:14:35 +07:00
063e3b59c2
Adds a Mono Crimson Operations Brief live-artifact template under templates/live-artifacts/otd-operations-brief/. The template ships: - template.html: html_template_v1 source, fully unrolled (no data-od-repeat — daemon renderer is scalar-only) for 4 KPIs, 14 bar rows, and 8 lowest-OTD rows; - data.json: default sample with pre-computed bar fills, prior-year ticks, and CSS class names so the template binds purely as scalars; - artifact.json + provenance.json: stored-snapshot fixtures that mirror specs/2026-04-29-live-artifacts/examples/minimal-static/; - DESIGN.md: full Mono Crimson Operations Brief 9-section design spec (warm off-white canvas, charcoal bars, single-accent crimson); - index.html + preview.png: pre-rendered default display sample so reviewers can see the artifact without spinning up a daemon. Template-level only — no feature/code changes. Co-authored-by: joey <joey@joeydeMacBook-Air.local>
636 lines
22 KiB
HTML
636 lines
22 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=1240" />
|
||
<title>On-Time Delivery Dashboard</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link
|
||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap"
|
||
rel="stylesheet"
|
||
/>
|
||
<style>
|
||
/* ===========================================================
|
||
Mono Crimson Operations Brief — design tokens.
|
||
See ./DESIGN.md for the full specification. CSS custom-property
|
||
names mirror the DESIGN.md frontmatter token names so any
|
||
downstream styling can rely on the same grammar.
|
||
=========================================================== */
|
||
:root {
|
||
--color-surface: #ffffff;
|
||
--color-surface-muted: #f4f5f7;
|
||
--color-canvas: #fafafb;
|
||
--color-border: #e6e7eb;
|
||
--color-hairline: #eeeff2;
|
||
--color-text-primary: #0b1220;
|
||
--color-text-secondary: #4b5563;
|
||
--color-text-tertiary: #6b7280;
|
||
--color-text-quiet: #9ca3af;
|
||
--color-accent-crimson: #c2272d;
|
||
--color-data-ink: #0f1b2e;
|
||
--color-data-track: #e6e7eb;
|
||
--color-tier-low: #f1f2f4;
|
||
--color-tier-mid: #dddfe3;
|
||
--color-tier-high: #c9cbd0;
|
||
--color-pill-bg: #f1f2f4;
|
||
--color-pill-fg: #4b5563;
|
||
|
||
--rounded-xs: 3px;
|
||
--rounded-sm: 4px;
|
||
--rounded-md: 6px;
|
||
|
||
--shadow-card: 0 1px 0 rgba(11, 18, 32, 0.02);
|
||
|
||
--font-sans: "Inter", "IBM Plex Sans", system-ui, sans-serif;
|
||
--font-mono: "JetBrains Mono", "IBM Plex Mono", "SFMono-Regular",
|
||
monospace;
|
||
}
|
||
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
box-sizing: border-box;
|
||
}
|
||
html,
|
||
body {
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
body {
|
||
background: var(--color-canvas);
|
||
color: var(--color-text-primary);
|
||
font-family: var(--font-sans);
|
||
font-size: 13px;
|
||
line-height: 1.45;
|
||
-webkit-font-smoothing: antialiased;
|
||
font-feature-settings: "tnum", "lnum";
|
||
}
|
||
|
||
.shell {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 22px 24px 28px;
|
||
}
|
||
|
||
/* Header ---------------------------------------------------- */
|
||
.header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 16px;
|
||
padding-bottom: 12px;
|
||
}
|
||
.header__title {
|
||
margin: 0;
|
||
font-size: 17px;
|
||
font-weight: 700;
|
||
letter-spacing: -0.005em;
|
||
color: var(--color-text-primary);
|
||
}
|
||
.header__filters {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.pill {
|
||
font-family: var(--font-mono);
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
letter-spacing: 0.01em;
|
||
color: var(--color-pill-fg);
|
||
background: var(--color-pill-bg);
|
||
border: 1px solid var(--color-hairline);
|
||
border-radius: var(--rounded-sm);
|
||
padding: 3px 8px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* KPI strip ------------------------------------------------- */
|
||
.kpis {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 12px;
|
||
padding-bottom: 14px;
|
||
}
|
||
.kpi {
|
||
background: var(--color-surface);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: var(--rounded-md);
|
||
padding: 14px 16px;
|
||
box-shadow: var(--shadow-card);
|
||
min-height: 102px;
|
||
}
|
||
.kpi__label {
|
||
font-size: 10.5px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.06em;
|
||
text-transform: uppercase;
|
||
color: var(--color-text-secondary);
|
||
margin: 0 0 6px;
|
||
}
|
||
.kpi__number {
|
||
font-size: 34px;
|
||
font-weight: 700;
|
||
line-height: 1.05;
|
||
letter-spacing: -0.018em;
|
||
color: var(--color-text-primary);
|
||
font-feature-settings: "tnum", "lnum";
|
||
}
|
||
.kpi__number--negative {
|
||
color: var(--color-accent-crimson);
|
||
}
|
||
.kpi__caption {
|
||
margin-top: 6px;
|
||
font-size: 11.5px;
|
||
font-weight: 500;
|
||
line-height: 1.4;
|
||
color: var(--color-text-tertiary);
|
||
font-feature-settings: "tnum", "lnum";
|
||
}
|
||
|
||
/* Body grid ------------------------------------------------- */
|
||
.body {
|
||
display: grid;
|
||
grid-template-columns: 5fr 3fr;
|
||
gap: 12px;
|
||
}
|
||
|
||
.card {
|
||
background: var(--color-surface);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: var(--rounded-md);
|
||
padding: 16px 18px 14px;
|
||
box-shadow: var(--shadow-card);
|
||
}
|
||
.card__title {
|
||
margin: 0 0 12px;
|
||
font-size: 12.5px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.04em;
|
||
text-transform: uppercase;
|
||
color: var(--color-text-primary);
|
||
}
|
||
|
||
/* Bar chart ------------------------------------------------- */
|
||
.bars {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
padding: 4px 0 12px;
|
||
}
|
||
.bar {
|
||
display: grid;
|
||
grid-template-columns: 150px 1fr 130px;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
.bar__label {
|
||
font-size: 12.5px;
|
||
font-weight: 400;
|
||
color: var(--color-text-secondary);
|
||
text-align: right;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.bar__track {
|
||
position: relative;
|
||
height: 12px;
|
||
background: var(--color-data-track);
|
||
border-radius: var(--rounded-xs);
|
||
}
|
||
.bar__fill {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
background: var(--color-data-ink);
|
||
border-radius: var(--rounded-xs);
|
||
}
|
||
.bar__tick {
|
||
position: absolute;
|
||
top: -2px;
|
||
bottom: -2px;
|
||
width: 2px;
|
||
background: var(--color-accent-crimson);
|
||
transform: translateX(-1px);
|
||
}
|
||
.bar__value {
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
color: var(--color-text-quiet);
|
||
font-feature-settings: "tnum", "lnum";
|
||
}
|
||
|
||
/* Legend ---------------------------------------------------- */
|
||
.legend {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
padding-top: 12px;
|
||
border-top: 1px solid var(--color-hairline);
|
||
font-size: 11.5px;
|
||
color: var(--color-text-tertiary);
|
||
}
|
||
.legend__item {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
.legend__sw-bar {
|
||
width: 18px;
|
||
height: 10px;
|
||
background: var(--color-data-ink);
|
||
border-radius: var(--rounded-xs);
|
||
}
|
||
.legend__sw-tick {
|
||
width: 2px;
|
||
height: 12px;
|
||
background: var(--color-accent-crimson);
|
||
}
|
||
.legend__sw-tier {
|
||
width: 22px;
|
||
height: 10px;
|
||
border-radius: var(--rounded-xs);
|
||
}
|
||
.legend__sw-tier--low {
|
||
background: var(--color-tier-low);
|
||
}
|
||
.legend__sw-tier--mid {
|
||
background: var(--color-tier-mid);
|
||
}
|
||
.legend__sw-tier--high {
|
||
background: var(--color-tier-high);
|
||
}
|
||
|
||
/* Lowest table ---------------------------------------------- */
|
||
.table {
|
||
display: grid;
|
||
grid-template-columns: 28px 1fr 130px 60px;
|
||
column-gap: 12px;
|
||
}
|
||
.table__head > div {
|
||
font-size: 10px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.07em;
|
||
text-transform: uppercase;
|
||
color: var(--color-text-quiet);
|
||
padding: 0 0 8px;
|
||
border-bottom: 1px solid var(--color-hairline);
|
||
}
|
||
.table__head .col-otdl {
|
||
text-align: right;
|
||
}
|
||
.table__head,
|
||
.table__row {
|
||
display: contents;
|
||
}
|
||
.table__row > div {
|
||
padding: 10px 0;
|
||
border-bottom: 1px solid var(--color-hairline);
|
||
align-self: center;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.table__rank {
|
||
font-size: 12px;
|
||
color: var(--color-text-quiet);
|
||
justify-content: flex-start;
|
||
font-feature-settings: "tnum", "lnum";
|
||
}
|
||
.table__name {
|
||
font-size: 12.5px;
|
||
font-weight: 500;
|
||
color: var(--color-text-primary);
|
||
line-height: 1.25;
|
||
word-break: normal;
|
||
overflow-wrap: anywhere;
|
||
max-width: 100%;
|
||
}
|
||
.table__bar-cell {
|
||
position: relative;
|
||
}
|
||
.table__bar-track {
|
||
position: relative;
|
||
flex: 1;
|
||
height: 18px;
|
||
background: var(--color-surface-muted);
|
||
border-radius: var(--rounded-xs);
|
||
overflow: hidden;
|
||
}
|
||
.table__bar-fill {
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
background: var(--color-accent-crimson);
|
||
border-radius: var(--rounded-xs);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
padding-right: 6px;
|
||
font-size: 11.5px;
|
||
font-weight: 700;
|
||
color: #ffffff;
|
||
font-feature-settings: "tnum", "lnum";
|
||
}
|
||
.table__lines {
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
color: var(--color-text-quiet);
|
||
justify-content: flex-end;
|
||
font-feature-settings: "tnum", "lnum";
|
||
}
|
||
|
||
@media print {
|
||
body {
|
||
background: #fff;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<main class="shell">
|
||
<!-- ============================================================
|
||
NOTE on bindings.
|
||
Open Design's html_template_v1 renderer (apps/daemon/src/
|
||
live-artifacts/render.ts) does scalar-only
|
||
interpolation: bindings must start with `data`, must resolve
|
||
to a scalar, and there is no array repeat directive. The
|
||
template is therefore fully unrolled — KPI 0..3, bar 0..13,
|
||
lowest 0..7. Refresh callers should keep the same shape and
|
||
cardinality in data.json.
|
||
============================================================ -->
|
||
|
||
<header class="header">
|
||
<h1 class="header__title">On-Time Delivery Dashboard</h1>
|
||
<div class="header__filters">
|
||
<span class="pill">Date = August 2021</span>
|
||
<span class="pill">Exchange Rate[From Currency] = "EUR"</span>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- KPI strip ----------------------------------------------------- -->
|
||
<section class="kpis" aria-label="Key performance indicators">
|
||
<article class="kpi">
|
||
<p class="kpi__label">OTD % (LINES)</p>
|
||
<div class="kpi__number">70.0%</div>
|
||
<p class="kpi__caption">August 2021 · EUR</p>
|
||
</article>
|
||
<article class="kpi">
|
||
<p class="kpi__label">OTD % (LINES) PY</p>
|
||
<div class="kpi__number">73.9%</div>
|
||
<p class="kpi__caption">August 2020 · EUR</p>
|
||
</article>
|
||
<article class="kpi">
|
||
<p class="kpi__label">YOY Δ (PTS)</p>
|
||
<div class="kpi__number kpi__number--negative">-3.9 pts</div>
|
||
<p class="kpi__caption">Current – Prior year</p>
|
||
</article>
|
||
<article class="kpi">
|
||
<p class="kpi__label">OTD (LINES)</p>
|
||
<div class="kpi__number">205 698</div>
|
||
<p class="kpi__caption">+5 457 vs PY (200 241)</p>
|
||
</article>
|
||
</section>
|
||
|
||
<!-- Body --------------------------------------------------------- -->
|
||
<section class="body">
|
||
<!-- Bar-by-account card ---------------------------------- -->
|
||
<article class="card">
|
||
<h2 class="card__title">OTD % (LINES) BY KEY ACCOUNT</h2>
|
||
<div class="bars">
|
||
<div class="bar">
|
||
<div class="bar__label">Antarctic Corporation</div>
|
||
<div class="bar__track">
|
||
<div class="bar__fill" style="width: 83.9%"></div>
|
||
<div class="bar__tick" style="left: 73.9%"></div>
|
||
</div>
|
||
<div class="bar__value">83.9% (PY 73.9%)</div>
|
||
</div>
|
||
<div class="bar">
|
||
<div class="bar__label">Government Contract</div>
|
||
<div class="bar__track">
|
||
<div class="bar__fill" style="width: 70.8%"></div>
|
||
<div class="bar__tick" style="left: 75.2%"></div>
|
||
</div>
|
||
<div class="bar__value">70.8% (PY 75.2%)</div>
|
||
</div>
|
||
<div class="bar">
|
||
<div class="bar__label">Pioneering Systems</div>
|
||
<div class="bar__track">
|
||
<div class="bar__fill" style="width: 70.2%"></div>
|
||
<div class="bar__tick" style="left: 75.1%"></div>
|
||
</div>
|
||
<div class="bar__value">70.2% (PY 75.1%)</div>
|
||
</div>
|
||
<div class="bar">
|
||
<div class="bar__label">Black Flag Spaceships</div>
|
||
<div class="bar__track">
|
||
<div class="bar__fill" style="width: 69.2%"></div>
|
||
<div class="bar__tick" style="left: 75.2%"></div>
|
||
</div>
|
||
<div class="bar__value">69.2% (PY 75.2%)</div>
|
||
</div>
|
||
<div class="bar">
|
||
<div class="bar__label">Macrohard Systems</div>
|
||
<div class="bar__track">
|
||
<div class="bar__fill" style="width: 69.0%"></div>
|
||
<div class="bar__tick" style="left: 73.7%"></div>
|
||
</div>
|
||
<div class="bar__value">69.0% (PY 73.7%)</div>
|
||
</div>
|
||
<div class="bar">
|
||
<div class="bar__label">Sigil Interstellar</div>
|
||
<div class="bar__track">
|
||
<div class="bar__fill" style="width: 68.7%"></div>
|
||
<div class="bar__tick" style="left: 74.5%"></div>
|
||
</div>
|
||
<div class="bar__value">68.7% (PY 74.5%)</div>
|
||
</div>
|
||
<div class="bar">
|
||
<div class="bar__label">Private Contract</div>
|
||
<div class="bar__track">
|
||
<div class="bar__fill" style="width: 68.5%"></div>
|
||
<div class="bar__tick" style="left: 73.0%"></div>
|
||
</div>
|
||
<div class="bar__value">68.5% (PY 73.0%)</div>
|
||
</div>
|
||
<div class="bar">
|
||
<div class="bar__label">No Key Account</div>
|
||
<div class="bar__track">
|
||
<div class="bar__fill" style="width: 68.3%"></div>
|
||
<div class="bar__tick" style="left: 73.1%"></div>
|
||
</div>
|
||
<div class="bar__value">68.3% (PY 73.1%)</div>
|
||
</div>
|
||
<div class="bar">
|
||
<div class="bar__label">Aminu Kano Navy</div>
|
||
<div class="bar__track">
|
||
<div class="bar__fill" style="width: 68.2%"></div>
|
||
<div class="bar__tick" style="left: 74.1%"></div>
|
||
</div>
|
||
<div class="bar__value">68.2% (PY 74.1%)</div>
|
||
</div>
|
||
<div class="bar">
|
||
<div class="bar__label">Andromeda Shipyards</div>
|
||
<div class="bar__track">
|
||
<div class="bar__fill" style="width: 67.5%"></div>
|
||
<div class="bar__tick" style="left: 74.0%"></div>
|
||
</div>
|
||
<div class="bar__value">67.5% (PY 74.0%)</div>
|
||
</div>
|
||
<div class="bar">
|
||
<div class="bar__label">Miller Space</div>
|
||
<div class="bar__track">
|
||
<div class="bar__fill" style="width: 67.3%"></div>
|
||
<div class="bar__tick" style="left: 72.3%"></div>
|
||
</div>
|
||
<div class="bar__value">67.3% (PY 72.3%)</div>
|
||
</div>
|
||
<div class="bar">
|
||
<div class="bar__label">Wel Walla Ship Repair</div>
|
||
<div class="bar__track">
|
||
<div class="bar__fill" style="width: 67.0%"></div>
|
||
<div class="bar__tick" style="left: 72.6%"></div>
|
||
</div>
|
||
<div class="bar__value">67.0% (PY 72.6%)</div>
|
||
</div>
|
||
<div class="bar">
|
||
<div class="bar__label">Elysium Aerospace</div>
|
||
<div class="bar__track">
|
||
<div class="bar__fill" style="width: 66.8%"></div>
|
||
<div class="bar__tick" style="left: 73.0%"></div>
|
||
</div>
|
||
<div class="bar__value">66.8% (PY 73.0%)</div>
|
||
</div>
|
||
<div class="bar">
|
||
<div class="bar__label">Supernova Spaceparts</div>
|
||
<div class="bar__track">
|
||
<div class="bar__fill" style="width: 66.1%"></div>
|
||
<div class="bar__tick" style="left: 72.9%"></div>
|
||
</div>
|
||
<div class="bar__value">66.1% (PY 72.9%)</div>
|
||
</div>
|
||
</div>
|
||
<div class="legend" aria-label="Chart legend">
|
||
<span class="legend__item">
|
||
<span class="legend__sw-bar"></span>
|
||
<span>OTD % (Lines) — Aug 2021</span>
|
||
</span>
|
||
<span class="legend__item">
|
||
<span class="legend__sw-tick"></span>
|
||
<span>Prior year (Aug 2020)</span>
|
||
</span>
|
||
<span class="legend__item">
|
||
<span class="legend__sw-tier legend__sw-tier--low"></span>
|
||
<span>0-60%</span>
|
||
</span>
|
||
<span class="legend__item">
|
||
<span class="legend__sw-tier legend__sw-tier--mid"></span>
|
||
<span>60-80%</span>
|
||
</span>
|
||
<span class="legend__item">
|
||
<span class="legend__sw-tier legend__sw-tier--high"></span>
|
||
<span>80-100%</span>
|
||
</span>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- Lowest-OTD table -------------------------------------- -->
|
||
<article class="card">
|
||
<h2 class="card__title">LOWEST OTD % ACCOUNTS (≥10 LINES)</h2>
|
||
<div class="table">
|
||
<div class="table__head">
|
||
<div>#</div>
|
||
<div>ACCOUNT NAME</div>
|
||
<div>OTD %</div>
|
||
<div class="col-otdl">OTD (LINES)</div>
|
||
</div>
|
||
<div class="table__row">
|
||
<div class="table__rank">1</div>
|
||
<div class="table__name">Błażej Kamieniarz</div>
|
||
<div class="table__bar-cell">
|
||
<div class="table__bar-track">
|
||
<div class="table__bar-fill" style="width: 59.83%">35.9%</div>
|
||
</div>
|
||
</div>
|
||
<div class="table__lines">14</div>
|
||
</div>
|
||
<div class="table__row">
|
||
<div class="table__rank">2</div>
|
||
<div class="table__name">Danielle Bailly</div>
|
||
<div class="table__bar-cell">
|
||
<div class="table__bar-track">
|
||
<div class="table__bar-fill" style="width: 67.83%">40.7%</div>
|
||
</div>
|
||
</div>
|
||
<div class="table__lines">11</div>
|
||
</div>
|
||
<div class="table__row">
|
||
<div class="table__rank">3</div>
|
||
<div class="table__name">The Ruby Black Hole</div>
|
||
<div class="table__bar-cell">
|
||
<div class="table__bar-track">
|
||
<div class="table__bar-fill" style="width: 72.5%">43.5%</div>
|
||
</div>
|
||
</div>
|
||
<div class="table__lines">10</div>
|
||
</div>
|
||
<div class="table__row">
|
||
<div class="table__rank">4</div>
|
||
<div class="table__name">Hagalbar's Carriers</div>
|
||
<div class="table__bar-cell">
|
||
<div class="table__bar-track">
|
||
<div class="table__bar-fill" style="width: 74.0%">44.4%</div>
|
||
</div>
|
||
</div>
|
||
<div class="table__lines">12</div>
|
||
</div>
|
||
<div class="table__row">
|
||
<div class="table__rank">5</div>
|
||
<div class="table__name">Rosalinda's Reparations</div>
|
||
<div class="table__bar-cell">
|
||
<div class="table__bar-track">
|
||
<div class="table__bar-fill" style="width: 74.67%">44.8%</div>
|
||
</div>
|
||
</div>
|
||
<div class="table__lines">13</div>
|
||
</div>
|
||
<div class="table__row">
|
||
<div class="table__rank">6</div>
|
||
<div class="table__name">Black Exports</div>
|
||
<div class="table__bar-cell">
|
||
<div class="table__bar-track">
|
||
<div class="table__bar-fill" style="width: 75.33%">45.2%</div>
|
||
</div>
|
||
</div>
|
||
<div class="table__lines">14</div>
|
||
</div>
|
||
<div class="table__row">
|
||
<div class="table__rank">7</div>
|
||
<div class="table__name">The Emerald Prospector</div>
|
||
<div class="table__bar-cell">
|
||
<div class="table__bar-track">
|
||
<div class="table__bar-fill" style="width: 77.5%">46.5%</div>
|
||
</div>
|
||
</div>
|
||
<div class="table__lines">20</div>
|
||
</div>
|
||
<div class="table__row">
|
||
<div class="table__rank">8</div>
|
||
<div class="table__name">Kelly's Planets</div>
|
||
<div class="table__bar-cell">
|
||
<div class="table__bar-track">
|
||
<div class="table__bar-fill" style="width: 79.33%">47.6%</div>
|
||
</div>
|
||
</div>
|
||
<div class="table__lines">10</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
</main>
|
||
</body>
|
||
</html>
|