Zakaria
a46764fb1b
ci / Validate workspace (push) Has been cancelled
landing-page-ci / Validate landing page (push) Has been cancelled
landing-page-deploy / Deploy landing page (push) Has been cancelled
github-metrics / Generate repository metrics SVG (push) Has been cancelled
refresh-contributors-wall / Refresh contributors wall cache bust (push) Waiting to run
266 lines
12 KiB
HTML
266 lines
12 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>mutuals · your dating life, measured by the company you keep</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=DM+Serif+Display:ital@0;1&family=DM+Serif+Text:ital@0;1&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet" />
|
||
<style>
|
||
:root {
|
||
--paper: #f4ede0;
|
||
--panel: #f9f3e7;
|
||
--ink: #1f1c14;
|
||
--muted: #7a7264;
|
||
--rule: #d6cdb6;
|
||
--accent: #c14a2b;
|
||
--good: #406b3a;
|
||
--bad: #b6422f;
|
||
--serif-display: 'DM Serif Display', 'Iowan Old Style', Georgia, serif;
|
||
--serif-body: 'DM Serif Text', 'Iowan Old Style', Georgia, serif;
|
||
--mono: 'IBM Plex Mono', ui-monospace, monospace;
|
||
}
|
||
* { box-sizing: border-box; }
|
||
body { margin: 0; background: var(--paper); color: var(--ink); font: 14px/1.55 var(--serif-body); }
|
||
|
||
.ticker {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 14px 28px;
|
||
border-bottom: 1px solid var(--ink);
|
||
font: 11px/1 var(--mono);
|
||
color: var(--muted);
|
||
letter-spacing: 0.18em;
|
||
text-transform: uppercase;
|
||
}
|
||
.ticker .left { display: flex; align-items: center; gap: 18px; }
|
||
.ticker b { color: var(--ink); font-weight: 500; }
|
||
|
||
.layout { display: grid; grid-template-columns: 232px 1fr; min-height: calc(100vh - 44px); }
|
||
aside.rail {
|
||
border-right: 1px solid var(--ink);
|
||
padding: 22px 22px 22px 28px;
|
||
display: flex; flex-direction: column; gap: 22px;
|
||
}
|
||
aside .brand { font: italic 800 30px/1 var(--serif-display); letter-spacing: -0.005em; }
|
||
aside .brand .dot { color: var(--accent); }
|
||
aside .user { display: flex; align-items: center; gap: 10px; }
|
||
aside .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; font: 700 12px/1 var(--mono); letter-spacing: 0.06em; }
|
||
aside .user .meta { font: 13px/1.2 var(--mono); }
|
||
aside .user .meta b { display: block; color: var(--ink); font-weight: 500; }
|
||
aside .user .meta span { color: var(--muted); font-size: 11px; letter-spacing: 0.06em; }
|
||
|
||
aside h4 { font: 11px/1 var(--mono); color: var(--muted); letter-spacing: 0.18em; text-transform: uppercase; margin: 0 0 10px; }
|
||
aside ul { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 4px; }
|
||
aside li { display: flex; justify-content: space-between; align-items: center; padding: 5px 8px; border-radius: 4px; font: 15.5px/1.2 var(--serif-body); color: var(--ink); cursor: default; }
|
||
aside li.active { background: rgba(193,74,43,0.10); color: var(--accent); font-weight: 600; }
|
||
aside li.active::before { content: '●'; color: var(--accent); margin-right: 6px; font-size: 9px; }
|
||
aside li .badge { background: var(--accent); color: var(--paper); font: 10px/1 var(--mono); padding: 3px 6px; border-radius: 999px; letter-spacing: 0.06em; }
|
||
aside li .badge.gray { background: var(--ink); }
|
||
|
||
aside .status {
|
||
margin-top: auto;
|
||
padding-top: 18px;
|
||
border-top: 1px solid var(--rule);
|
||
font: 11px/1.4 var(--mono);
|
||
color: var(--muted);
|
||
letter-spacing: 0.06em;
|
||
}
|
||
aside .status .live::before { content: '●'; color: #2f7d4a; margin-right: 6px; }
|
||
|
||
main { padding: 30px 36px 44px; }
|
||
.grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
grid-auto-rows: minmax(120px, auto);
|
||
gap: 22px 36px;
|
||
margin-bottom: 36px;
|
||
}
|
||
.stat { padding: 4px 0 14px; border-bottom: 1px solid var(--rule); }
|
||
.stat .label { font: 11px/1.4 var(--mono); color: var(--muted); letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 6px; }
|
||
.stat .value {
|
||
font: 800 56px/1.05 var(--serif-display);
|
||
letter-spacing: -0.01em;
|
||
font-feature-settings: 'tnum';
|
||
margin-bottom: 6px;
|
||
}
|
||
.stat .value.good { color: var(--good); }
|
||
.stat .value.bad { color: var(--bad); }
|
||
.stat .value em { font-style: italic; font-weight: 400; }
|
||
.stat .note { font: italic 13.5px/1.4 var(--serif-body); color: var(--muted); max-width: 32ch; }
|
||
.stat .arrow { font-style: normal; color: var(--good); font-size: 14px; }
|
||
|
||
.panel { padding: 18px 0 24px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); margin-bottom: 18px; }
|
||
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 14px; }
|
||
.panel-head h3 { margin: 0; font: italic 24px/1 var(--serif-display); letter-spacing: -0.005em; }
|
||
.panel-head .meta { font: 11px/1.4 var(--mono); color: var(--muted); letter-spacing: 0.16em; text-transform: uppercase; max-width: 56ch; text-align: right; }
|
||
.panel svg { width: 100%; height: 220px; display: block; }
|
||
.panel .axis { display: flex; justify-content: space-between; font: 10px/1 var(--mono); color: var(--muted); letter-spacing: 0.1em; padding: 8px 4px 0; text-transform: uppercase; }
|
||
|
||
.lower-panel .lede { font: italic 15px/1.55 var(--serif-body); color: var(--muted); margin: 0; max-width: 70ch; }
|
||
.lower-panel .lede b { color: var(--ink); font-style: normal; font-weight: 600; }
|
||
|
||
@media (max-width: 1100px) {
|
||
.layout { grid-template-columns: 1fr; }
|
||
aside.rail { border-right: none; border-bottom: 1px solid var(--ink); }
|
||
.grid { grid-template-columns: repeat(2, 1fr); gap: 18px 28px; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="ticker" data-od-id="ticker">
|
||
<div class="left">
|
||
<span>YOUR DATING LIFE, MEASURED BY THE COMPANY YOU KEEP</span>
|
||
<span style="opacity:0.6;">·</span>
|
||
<span>REVIEWED WEEKLY</span>
|
||
</div>
|
||
<div>NEXT TIER AT <b>2,080 MUTUALS</b></div>
|
||
</div>
|
||
|
||
<div class="layout">
|
||
<aside class="rail" data-od-id="rail">
|
||
<div class="brand">mutuals<span class="dot">.</span></div>
|
||
<div class="user">
|
||
<div class="avatar">si</div>
|
||
<div class="meta"><b>@signals</b><span>RATIO 22.9 · TIER III</span></div>
|
||
</div>
|
||
|
||
<div>
|
||
<h4>Today</h4>
|
||
<ul>
|
||
<li>specimen <span class="badge">3</span></li>
|
||
<li>inbox <span class="badge">3</span></li>
|
||
<li>queue <span style="font:11px/1 var(--mono);color:var(--muted);">6</span></li>
|
||
<li>notifications <span class="badge gray">12</span></li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4>You</h4>
|
||
<ul>
|
||
<li class="active">your stats</li>
|
||
<li>mutuals & communities</li>
|
||
<li>blocked <span style="font:11px/1 var(--mono);color:var(--muted);">14</span></li>
|
||
<li>settings</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4>Archive</h4>
|
||
<ul>
|
||
<li>past issues</li>
|
||
<li>expired matches <span style="font:11px/1 var(--mono);color:var(--muted);">7</span></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="status">
|
||
<div class="live">online · last match 11m ago</div>
|
||
<div style="opacity:0.7;margin-top:2px;">mutuals.v0.6.1</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<main data-od-id="main">
|
||
<section class="grid" data-od-id="kpis">
|
||
<div class="stat">
|
||
<div class="label">Mutuals on file</div>
|
||
<div class="value"><em>1,842</em></div>
|
||
<p class="note"><span class="arrow">↑</span> 41 this wk · healthy growth.</p>
|
||
</div>
|
||
<div class="stat">
|
||
<div class="label">Replies in 24h</div>
|
||
<div class="value good">47</div>
|
||
<p class="note">the people who'd text back within a day.</p>
|
||
</div>
|
||
<div class="stat">
|
||
<div class="label">Communities</div>
|
||
<div class="value"><em>14</em></div>
|
||
<p class="note">4 active · 7 lurking · 3 inferred.</p>
|
||
</div>
|
||
|
||
<div class="stat">
|
||
<div class="label">Match rate</div>
|
||
<div class="value good">14%</div>
|
||
<p class="note">above median for your cohort.</p>
|
||
</div>
|
||
<div class="stat">
|
||
<div class="label">2nd dates</div>
|
||
<div class="value"><em>3</em></div>
|
||
<p class="note">of 7 first dates this year. you commit.</p>
|
||
</div>
|
||
<div class="stat">
|
||
<div class="label">Exes in your circle</div>
|
||
<div class="value bad">4</div>
|
||
<p class="note">manageable. two are now friends.</p>
|
||
</div>
|
||
|
||
<div class="stat">
|
||
<div class="label">Shared blocks</div>
|
||
<div class="value"><em>214</em></div>
|
||
<p class="note">your single greatest compatibility asset.</p>
|
||
</div>
|
||
<div class="stat">
|
||
<div class="label">Avg response</div>
|
||
<div class="value"><em>2.1<span style="font-size:32px;">h</span></em></div>
|
||
<p class="note">too fast. wait 4–6h. they notice.</p>
|
||
</div>
|
||
<div class="stat">
|
||
<div class="label">Logged-off hrs</div>
|
||
<div class="value bad">4</div>
|
||
<p class="note">/ 168 this wk. we beg.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="panel" data-od-id="bars">
|
||
<div class="panel-head">
|
||
<h3>mutuals — <em>last 30 days</em></h3>
|
||
<div class="meta">↑ TRENDING UP · +3 CLOSE MUTUALS THIS MONTH · TWO VIA THE SAME OFFSITE</div>
|
||
</div>
|
||
<svg viewBox="0 0 720 220" preserveAspectRatio="none" aria-hidden="true">
|
||
<g fill="#1f1c14">
|
||
<rect x="6" y="170" width="14" height="50"></rect>
|
||
<rect x="30" y="158" width="14" height="62"></rect>
|
||
<rect x="54" y="146" width="14" height="74"></rect>
|
||
<rect x="78" y="172" width="14" height="48"></rect>
|
||
<rect x="102" y="162" width="14" height="58"></rect>
|
||
<rect x="126" y="138" width="14" height="82"></rect>
|
||
<rect x="150" y="120" width="14" height="100"></rect>
|
||
<rect x="174" y="148" width="14" height="72"></rect>
|
||
<rect x="198" y="132" width="14" height="88"></rect>
|
||
<rect x="222" y="108" width="14" height="112"></rect>
|
||
<rect x="246" y="118" width="14" height="102"></rect>
|
||
<rect x="270" y="154" width="14" height="66"></rect>
|
||
<rect x="294" y="130" width="14" height="90"></rect>
|
||
<rect x="318" y="100" width="14" height="120"></rect>
|
||
<rect x="342" y="86" width="14" height="134"></rect>
|
||
<rect x="366" y="116" width="14" height="104"></rect>
|
||
<rect x="390" y="138" width="14" height="82"></rect>
|
||
<rect x="414" y="92" width="14" height="128"></rect>
|
||
<rect x="438" y="74" width="14" height="146"></rect>
|
||
<rect x="462" y="106" width="14" height="114"></rect>
|
||
<rect x="486" y="84" width="14" height="136"></rect>
|
||
<rect x="510" y="124" width="14" height="96"></rect>
|
||
<rect x="534" y="98" width="14" height="122"></rect>
|
||
<rect x="558" y="68" width="14" height="152"></rect>
|
||
<rect x="582" y="80" width="14" height="140"></rect>
|
||
<rect x="606" y="46" width="14" height="174" fill="#c14a2b"></rect>
|
||
<rect x="630" y="60" width="14" height="160" fill="#c14a2b"></rect>
|
||
<rect x="654" y="92" width="14" height="128"></rect>
|
||
<rect x="678" y="76" width="14" height="144"></rect>
|
||
<rect x="702" y="90" width="14" height="130"></rect>
|
||
</g>
|
||
</svg>
|
||
<div class="axis"><span>MAR 18</span><span>MAR 25</span><span>APR 1</span><span>APR 8</span><span>APR 15</span><span>TODAY</span></div>
|
||
</section>
|
||
|
||
<section class="panel lower-panel" data-od-id="trend">
|
||
<div class="panel-head">
|
||
<h3>match rate — <em>last 12 weeks</em></h3>
|
||
<div class="meta">STEADY CLIMB FROM 8% → 14%. ATTRIBUTABLE TO ONE COMMUNITY JOIN (FOUNDERS WHO POST, WK 4).</div>
|
||
</div>
|
||
<p class="lede">A real climb, not a vibe. <b>One community join</b> moved your match rate more than four months of profile edits — keep posting from that circle, ship more, tweet less.</p>
|
||
</section>
|
||
</main>
|
||
</div>
|
||
</body>
|
||
</html>
|