feat(components): ActionButton stopAlert + typography type fixes
This commit is contained in:
fightrate-bot committed
1 parent
2c51fd2623
commit
bbe2919c2c
89 files changed
+75993
-9961
No files matched your search
@@ -0,0 +1,642 @@
|
||||
<!doctype html>
|
||||
<html lang="pt-BR">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>FightRate Direction 04 — Sensor Instrument</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #02070a;
|
||||
--ink: #dffaff;
|
||||
--muted: #7aa6b1;
|
||||
--panel: #061118;
|
||||
--panel2: #0a1c25;
|
||||
--line: #14313c;
|
||||
--cyan: #5be6ff;
|
||||
--blue: #2d8cff;
|
||||
--green: #35ef9f;
|
||||
--red: #ff4c5d;
|
||||
--amber: #ffd166;
|
||||
--r-sm: 6px;
|
||||
--r-md: 10px;
|
||||
--r-lg: 16px;
|
||||
--r-xl: 26px;
|
||||
--mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
|
||||
--sans: ui-sans-serif, system-ui, sans-serif;
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--bg);
|
||||
color: var(--ink);
|
||||
font-family: var(--sans);
|
||||
}
|
||||
body:before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background:
|
||||
linear-gradient(rgba(91, 230, 255, 0.07) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(91, 230, 255, 0.07) 1px, transparent 1px),
|
||||
radial-gradient(
|
||||
circle at 50% 0%,
|
||||
rgba(91, 230, 255, 0.18),
|
||||
transparent 36%
|
||||
);
|
||||
background-size:
|
||||
22px 22px,
|
||||
22px 22px,
|
||||
auto;
|
||||
}
|
||||
.wrap {
|
||||
width: min(1240px, calc(100% - 28px));
|
||||
margin: auto;
|
||||
padding: 34px 0 86px;
|
||||
position: relative;
|
||||
}
|
||||
.nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: rgba(6, 17, 24, 0.82);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 14px;
|
||||
padding: 12px 14px;
|
||||
font-family: var(--mono);
|
||||
position: sticky;
|
||||
top: 14px;
|
||||
z-index: 3;
|
||||
backdrop-filter: blur(14px);
|
||||
}
|
||||
.nav a {
|
||||
color: var(--muted);
|
||||
text-decoration: none;
|
||||
font-size: 12px;
|
||||
margin-left: 14px;
|
||||
}
|
||||
.brand {
|
||||
color: var(--cyan);
|
||||
}
|
||||
.hero {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 18px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
.terminal {
|
||||
background: linear-gradient(180deg, #061118, #03090d);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--r-xl);
|
||||
padding: 26px;
|
||||
box-shadow:
|
||||
0 28px 80px rgba(0, 0, 0, 0.5),
|
||||
inset 0 1px rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
.eyebrow {
|
||||
font-family: var(--mono);
|
||||
color: var(--cyan);
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.16em;
|
||||
}
|
||||
h1 {
|
||||
font-family: var(--mono);
|
||||
font-size: clamp(38px, 7vw, 82px);
|
||||
line-height: 0.9;
|
||||
letter-spacing: -0.05em;
|
||||
margin: 16px 0;
|
||||
}
|
||||
h2 {
|
||||
font-family: var(--mono);
|
||||
font-size: 36px;
|
||||
letter-spacing: -0.04em;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
.lead {
|
||||
color: var(--muted);
|
||||
line-height: 1.5;
|
||||
font-size: 17px;
|
||||
}
|
||||
.cmd {
|
||||
font-family: var(--mono);
|
||||
background: #02070a;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
padding: 14px;
|
||||
color: var(--green);
|
||||
margin-top: 16px;
|
||||
}
|
||||
.tokens {
|
||||
display: grid;
|
||||
grid-template-columns: 6fr 3fr 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
.token {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
padding: 14px;
|
||||
min-height: 98px;
|
||||
font-family: var(--mono);
|
||||
font-weight: 800;
|
||||
}
|
||||
.section {
|
||||
margin-top: 30px;
|
||||
}
|
||||
.screen-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 18px;
|
||||
}
|
||||
.phone {
|
||||
height: 590px;
|
||||
background: #000;
|
||||
border-radius: 38px;
|
||||
padding: 9px;
|
||||
border: 1px solid #16404d;
|
||||
box-shadow: 0 28px 90px rgba(0, 0, 0, 0.58);
|
||||
}
|
||||
.screen {
|
||||
height: 100%;
|
||||
border-radius: 30px;
|
||||
background: #041017;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #092532;
|
||||
}
|
||||
.top {
|
||||
font-family: var(--mono);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: var(--muted);
|
||||
font-size: 10px;
|
||||
}
|
||||
.big {
|
||||
font-family: var(--mono);
|
||||
font-size: 64px;
|
||||
line-height: 0.9;
|
||||
letter-spacing: -0.06em;
|
||||
color: var(--cyan);
|
||||
}
|
||||
.unit {
|
||||
font-size: 16px;
|
||||
color: var(--muted);
|
||||
}
|
||||
.scope {
|
||||
height: 120px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
background: #02070a;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.scope:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
repeating-linear-gradient(
|
||||
0deg,
|
||||
transparent 0 19px,
|
||||
rgba(91, 230, 255, 0.06) 19px 20px
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
90deg,
|
||||
transparent 0 19px,
|
||||
rgba(91, 230, 255, 0.06) 19px 20px
|
||||
);
|
||||
}
|
||||
.scope svg {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.scope path {
|
||||
fill: none;
|
||||
stroke: var(--cyan);
|
||||
stroke-width: 3;
|
||||
filter: drop-shadow(0 0 8px var(--cyan));
|
||||
}
|
||||
.grid2 {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
.module {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
background: #061822;
|
||||
padding: 10px;
|
||||
font-family: var(--mono);
|
||||
}
|
||||
.module b {
|
||||
color: var(--ink);
|
||||
}
|
||||
.module span {
|
||||
display: block;
|
||||
color: var(--muted);
|
||||
font-size: 10px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: 10px;
|
||||
font-family: var(--mono);
|
||||
font-size: 12px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
padding: 8px 0;
|
||||
}
|
||||
.ok {
|
||||
color: var(--green);
|
||||
}
|
||||
.warn {
|
||||
color: var(--amber);
|
||||
}
|
||||
.bad {
|
||||
color: var(--red);
|
||||
}
|
||||
.dock {
|
||||
margin-top: auto;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
.btn {
|
||||
border: 1px solid var(--cyan);
|
||||
background: rgba(91, 230, 255, 0.08);
|
||||
color: var(--cyan);
|
||||
border-radius: 10px;
|
||||
padding: 13px 8px;
|
||||
font-family: var(--mono);
|
||||
font-weight: 900;
|
||||
}
|
||||
.btn.primary {
|
||||
background: var(--cyan);
|
||||
color: #021015;
|
||||
}
|
||||
.system {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 14px;
|
||||
}
|
||||
.spec {
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 18px;
|
||||
padding: 16px;
|
||||
}
|
||||
.type-big {
|
||||
font-family: var(--mono);
|
||||
font-size: 50px;
|
||||
color: var(--cyan);
|
||||
}
|
||||
.radii {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: end;
|
||||
}
|
||||
.radii div {
|
||||
background: #061822;
|
||||
border: 1px solid var(--line);
|
||||
}
|
||||
.r1 {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.r2 {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.r3 {
|
||||
width: 86px;
|
||||
height: 86px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
.components {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
.component {
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 16px;
|
||||
padding: 14px;
|
||||
min-height: 150px;
|
||||
}
|
||||
.log {
|
||||
font-family: var(--mono);
|
||||
background: #02070a;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
border: 1px solid var(--line);
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
margin-top: 8px;
|
||||
}
|
||||
.principles {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 14px;
|
||||
}
|
||||
.principle {
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 20px;
|
||||
padding: 18px;
|
||||
}
|
||||
.principle b {
|
||||
font-family: var(--mono);
|
||||
color: var(--cyan);
|
||||
}
|
||||
@media (max-width: 1000px) {
|
||||
.hero,
|
||||
.screen-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.system,
|
||||
.components {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.principles {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@media (max-width: 620px) {
|
||||
.nav {
|
||||
position: relative;
|
||||
top: 0;
|
||||
}
|
||||
.nav div:last-child {
|
||||
display: none;
|
||||
}
|
||||
.system,
|
||||
.components {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.phone {
|
||||
height: 650px;
|
||||
}
|
||||
.terminal {
|
||||
padding: 20px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 44px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="wrap">
|
||||
<nav class="nav">
|
||||
<div class="brand">FightRate::SensorInstrument</div>
|
||||
<div>
|
||||
<a href="00-index.html">index</a><a href="#screens">screens</a
|
||||
><a href="#system">system</a>
|
||||
</div>
|
||||
</nav>
|
||||
<section class="hero">
|
||||
<div class="terminal">
|
||||
<div class="eyebrow">Direção 04 / telemetria BLE</div>
|
||||
<h1>instrumento técnico, confiável, sem decoração inútil.</h1>
|
||||
<p class="lead">
|
||||
A melhor direção se a tela Sensor e a confiança na captura forem
|
||||
diferenciais do app. Parece equipamento de medição, não aplicativo
|
||||
de lifestyle.
|
||||
</p>
|
||||
<div class="cmd">
|
||||
$ fightrate capture --sensor Magene-H003 --mode continuous
|
||||
</div>
|
||||
</div>
|
||||
<div class="terminal">
|
||||
<div class="eyebrow">Regra 60 / 30 / 10</div>
|
||||
<div class="tokens">
|
||||
<div class="token" style="background: #02070a">
|
||||
60% console preto
|
||||
</div>
|
||||
<div class="token" style="background: #061118">
|
||||
30% módulo técnico
|
||||
</div>
|
||||
<div class="token" style="background: #5be6ff; color: #021015">
|
||||
10% sinal cyan
|
||||
</div>
|
||||
</div>
|
||||
<p class="lead">
|
||||
Verde = ok; âmbar = atenção; vermelho = falha. Azul é informação
|
||||
secundária.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<section id="screens" class="section">
|
||||
<h2>Mobile screens</h2>
|
||||
<div class="screen-grid">
|
||||
<div class="phone">
|
||||
<div class="screen">
|
||||
<div class="top">
|
||||
<span>CAPTURE/READY</span><span>BLE OK</span>
|
||||
</div>
|
||||
<div class="big">H003</div>
|
||||
<div class="grid2">
|
||||
<div class="module"><b>RSSI</b><span>-58 dBm</span></div>
|
||||
<div class="module"><b>BATT</b><span>84%</span></div>
|
||||
<div class="module">
|
||||
<b>HRM</b><span class="ok">notify</span>
|
||||
</div>
|
||||
<div class="module"><b>SAMPLES</b><span>0</span></div>
|
||||
</div>
|
||||
<div class="dock">
|
||||
<button class="btn primary">START</button
|
||||
><button class="btn">CHECK</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="phone">
|
||||
<div class="screen">
|
||||
<div class="top">
|
||||
<span>CAPTURE/RUN</span><span>00:42:18</span>
|
||||
</div>
|
||||
<div class="big">154<span class="unit">bpm</span></div>
|
||||
<div class="scope">
|
||||
<svg viewBox="0 0 280 120">
|
||||
<path
|
||||
d="M4 84 C30 82,42 46,70 58 S114 98,146 66 S188 28,220 48 S252 76,276 54"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="grid2">
|
||||
<div class="module"><b>AVG</b><span>146</span></div>
|
||||
<div class="module"><b>PEAK</b><span>183</span></div>
|
||||
<div class="module"><b>Z4/Z5</b><span>41%</span></div>
|
||||
<div class="module"><b>DROP</b><span class="ok">0</span></div>
|
||||
</div>
|
||||
<div class="dock">
|
||||
<button class="btn">MARK</button
|
||||
><button class="btn primary">STOP</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="phone">
|
||||
<div class="screen">
|
||||
<div class="top"><span>REPORT</span><span>SAVED</span></div>
|
||||
<div class="big">2844</div>
|
||||
<div class="row"><span>Samples</span><b class="ok">valid</b></div>
|
||||
<div class="row"><span>Duration</span><b>47:12</b></div>
|
||||
<div class="row"><span>Peak sustained</span><b>181</b></div>
|
||||
<div class="row">
|
||||
<span>Signal drops</span><b class="ok">0</b>
|
||||
</div>
|
||||
<div class="log">
|
||||
report.source = local.sqlite<br />confidence = high
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="phone">
|
||||
<div class="screen">
|
||||
<div class="top"><span>HISTORY</span><span>LOCAL DB</span></div>
|
||||
<div class="row"><span>2026-06-10 sparring</span><b>96</b></div>
|
||||
<div class="row"><span>2026-06-09 drill</span><b>54</b></div>
|
||||
<div class="row"><span>2026-06-07 muay thai</span><b>110</b></div>
|
||||
<div class="row"><span>2026-06-05 boxe</span><b>77</b></div>
|
||||
<div class="scope">
|
||||
<svg viewBox="0 0 280 120">
|
||||
<path
|
||||
d="M10 88 L42 78 L80 92 L116 50 L148 72 L188 38 L226 60 L268 44"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="phone">
|
||||
<div class="screen">
|
||||
<div class="top">
|
||||
<span>SENSOR PROFILE</span><span>GATT</span>
|
||||
</div>
|
||||
<div class="big">180D</div>
|
||||
<div class="row">
|
||||
<span>2A37 Measurement</span><b class="ok">notify</b>
|
||||
</div>
|
||||
<div class="row"><span>2A38 Body Location</span><b>read</b></div>
|
||||
<div class="row"><span>180F Battery</span><b>read</b></div>
|
||||
<div class="row">
|
||||
<span>Device Info</span><b class="warn">maybe</b>
|
||||
</div>
|
||||
<div class="dock">
|
||||
<button class="btn">SCAN</button
|
||||
><button class="btn primary">LOG</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="phone">
|
||||
<div class="screen">
|
||||
<div class="top">
|
||||
<span>INSIGHT ENGINE</span><span>EXPLAIN</span>
|
||||
</div>
|
||||
<div class="big">LOAD</div>
|
||||
<div class="module">
|
||||
<b>Signal confidence</b
|
||||
><span class="ok">high: 2.844 valid samples</span>
|
||||
</div>
|
||||
<div class="module">
|
||||
<b>Training note</b
|
||||
><span>high cardiac load; prioritize recovery</span>
|
||||
</div>
|
||||
<div class="module">
|
||||
<b>Why</b><span>time in Z4/Z5 above personal baseline</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="system" class="section">
|
||||
<h2>Design system</h2>
|
||||
<div class="system">
|
||||
<div class="spec">
|
||||
<div class="eyebrow">Cores</div>
|
||||
<p class="lead">
|
||||
Cyan representa sinal. Não usar para botões destrutivos. Verde,
|
||||
amarelo e vermelho são semânticos.
|
||||
</p>
|
||||
</div>
|
||||
<div class="spec">
|
||||
<div class="eyebrow">Tipo</div>
|
||||
<div class="type-big">2A37</div>
|
||||
<p class="lead">
|
||||
Monospace real para UUIDs, logs e dados técnicos.
|
||||
</p>
|
||||
</div>
|
||||
<div class="spec">
|
||||
<div class="eyebrow">Raios</div>
|
||||
<div class="radii">
|
||||
<div class="r1"></div>
|
||||
<div class="r2"></div>
|
||||
<div class="r3"></div>
|
||||
</div>
|
||||
<p class="lead">Mais angular. Parece instrumento.</p>
|
||||
</div>
|
||||
<div class="spec">
|
||||
<div class="eyebrow">Bordas</div>
|
||||
<p class="lead">
|
||||
Hairlines cyan escuras. Bordas são grade técnica, não decoração.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section">
|
||||
<h2>Componentes</h2>
|
||||
<div class="components">
|
||||
<div class="component">
|
||||
<div class="eyebrow">Command CTA</div>
|
||||
<button class="btn primary">START</button
|
||||
><button class="btn" style="margin-top: 8px">SECONDARY</button>
|
||||
</div>
|
||||
<div class="component">
|
||||
<div class="eyebrow">GATT row</div>
|
||||
<div class="row"><span>2A37</span><b class="ok">notify</b></div>
|
||||
<div class="row"><span>2A19</span><b>read</b></div>
|
||||
</div>
|
||||
<div class="component">
|
||||
<div class="eyebrow">Log</div>
|
||||
<div class="log">connected=true<br />rssi=-61<br />mtu=default</div>
|
||||
</div>
|
||||
<div class="component">
|
||||
<div class="eyebrow">Metric</div>
|
||||
<div class="big" style="font-size: 42px">-61</div>
|
||||
<span class="ok">stable</span>
|
||||
</div>
|
||||
<div class="component">
|
||||
<div class="eyebrow">Alert</div>
|
||||
<span class="bad">signal lost</span>
|
||||
<div class="log">retry in 2s</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section">
|
||||
<h2>Princípios</h2>
|
||||
<div class="principles">
|
||||
<div class="principle">
|
||||
<b>Transparência técnica</b>
|
||||
<p class="lead">
|
||||
Mostrar o que o sensor expõe e o que o app está usando.
|
||||
</p>
|
||||
</div>
|
||||
<div class="principle">
|
||||
<b>Confiança</b>
|
||||
<p class="lead">Dados têm status, origem e qualidade.</p>
|
||||
</div>
|
||||
<div class="principle">
|
||||
<b>Risco</b>
|
||||
<p class="lead">Pode parecer técnico demais para usuário casual.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user