643 lines
18 KiB
HTML
643 lines
18 KiB
HTML
<!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>
|