832 lines
24 KiB
HTML
832 lines
24 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 v2 — Corner Instrument</title>
|
|
<style>
|
|
:root {
|
|
--bg: #070605;
|
|
--ink: #f8ead8;
|
|
--muted: #b9a98e;
|
|
--dim: #746754;
|
|
--panel: #12100c;
|
|
--panel2: #1d170f;
|
|
--line: #392d1e;
|
|
--red: #e23b2e;
|
|
--amber: #ffb43d;
|
|
--green: #34c77b;
|
|
--cream: #fff0dc;
|
|
--r1: 10px;
|
|
--r2: 16px;
|
|
--r3: 24px;
|
|
--r4: 36px;
|
|
--r5: 48px;
|
|
--shadow: 0 34px 110px rgba(0, 0, 0, 0.54);
|
|
--bezier: cubic-bezier(0.18, 0.9, 0.18, 1);
|
|
}
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
background: var(--bg);
|
|
color: var(--ink);
|
|
font-family:
|
|
ui-sans-serif,
|
|
system-ui,
|
|
-apple-system,
|
|
Segoe UI,
|
|
sans-serif;
|
|
line-height: 1.42;
|
|
}
|
|
body:before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
background:
|
|
radial-gradient(
|
|
circle at 12% -8%,
|
|
rgba(226, 59, 46, 0.36),
|
|
transparent 34%
|
|
),
|
|
radial-gradient(
|
|
circle at 86% 12%,
|
|
rgba(255, 180, 61, 0.14),
|
|
transparent 30%
|
|
),
|
|
linear-gradient(
|
|
115deg,
|
|
rgba(255, 255, 255, 0.045) 0 1px,
|
|
transparent 1px 20px
|
|
);
|
|
opacity: 0.9;
|
|
}
|
|
.wrap {
|
|
width: min(1260px, calc(100% - 28px));
|
|
margin: auto;
|
|
padding: 30px 0 90px;
|
|
position: relative;
|
|
}
|
|
.nav {
|
|
position: sticky;
|
|
top: 14px;
|
|
z-index: 5;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border: 1px solid var(--line);
|
|
border-radius: 999px;
|
|
background: rgba(18, 16, 12, 0.82);
|
|
backdrop-filter: blur(16px);
|
|
padding: 10px 12px 10px 18px;
|
|
}
|
|
.brand {
|
|
font-weight: 1000;
|
|
letter-spacing: -0.045em;
|
|
}
|
|
.brand span {
|
|
color: var(--red);
|
|
}
|
|
.nav a {
|
|
color: var(--muted);
|
|
text-decoration: none;
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.17em;
|
|
margin-left: 16px;
|
|
}
|
|
.hero {
|
|
margin-top: 28px;
|
|
display: grid;
|
|
grid-template-columns: 1.05fr 0.95fr;
|
|
gap: 18px;
|
|
}
|
|
.slab {
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--r5);
|
|
background: linear-gradient(
|
|
145deg,
|
|
rgba(29, 23, 15, 0.96),
|
|
rgba(10, 8, 6, 0.98)
|
|
);
|
|
box-shadow: var(--shadow);
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
.slab:before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 1px;
|
|
border-radius: calc(var(--r5) - 1px);
|
|
box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
|
|
pointer-events: none;
|
|
}
|
|
.pad {
|
|
padding: 34px;
|
|
}
|
|
.eyebrow {
|
|
font-size: 11px;
|
|
letter-spacing: 0.24em;
|
|
text-transform: uppercase;
|
|
color: var(--amber);
|
|
font-weight: 950;
|
|
}
|
|
.title {
|
|
font-size: clamp(58px, 10vw, 132px);
|
|
line-height: 0.76;
|
|
letter-spacing: -0.095em;
|
|
margin: 18px 0 20px;
|
|
font-weight: 1000;
|
|
}
|
|
.lead {
|
|
font-size: 18px;
|
|
color: var(--muted);
|
|
max-width: 780px;
|
|
}
|
|
.actions {
|
|
display: flex;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
margin-top: 26px;
|
|
}
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
border: 0;
|
|
border-radius: 999px;
|
|
background: var(--red);
|
|
color: white;
|
|
padding: 14px 18px;
|
|
font-weight: 1000;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
box-shadow: 0 18px 42px rgba(226, 59, 46, 0.32);
|
|
transition: transform 0.22s var(--bezier);
|
|
}
|
|
.btn:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
.btn.secondary {
|
|
background: transparent;
|
|
color: var(--ink);
|
|
border: 1px solid var(--line);
|
|
box-shadow: none;
|
|
}
|
|
.btn .dot {
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 50%;
|
|
display: grid;
|
|
place-items: center;
|
|
background: rgba(255, 255, 255, 0.15);
|
|
}
|
|
.color-strip {
|
|
display: grid;
|
|
grid-template-columns: 6fr 3fr 1fr;
|
|
gap: 8px;
|
|
margin-top: 20px;
|
|
}
|
|
.color {
|
|
min-height: 122px;
|
|
border-radius: 22px;
|
|
padding: 16px;
|
|
font-weight: 1000;
|
|
display: flex;
|
|
align-items: end;
|
|
}
|
|
.section {
|
|
margin-top: 28px;
|
|
}
|
|
.section-head {
|
|
display: flex;
|
|
align-items: end;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
margin-bottom: 14px;
|
|
}
|
|
.section h2 {
|
|
font-size: 48px;
|
|
line-height: 0.88;
|
|
letter-spacing: -0.065em;
|
|
margin: 0;
|
|
}
|
|
.section p {
|
|
color: var(--muted);
|
|
}
|
|
.phone-wall {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 18px;
|
|
}
|
|
.device {
|
|
height: 640px;
|
|
border-radius: 48px;
|
|
background: #030302;
|
|
padding: 10px;
|
|
border: 1px solid #3b2d1c;
|
|
box-shadow: 0 26px 80px rgba(0, 0, 0, 0.55);
|
|
}
|
|
.screen {
|
|
height: 100%;
|
|
border-radius: 38px;
|
|
background: linear-gradient(180deg, #19130c, #0b0805);
|
|
padding: 18px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
overflow: hidden;
|
|
}
|
|
.topline {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
color: var(--dim);
|
|
font-size: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.16em;
|
|
font-weight: 950;
|
|
}
|
|
.bpm {
|
|
font-size: 82px;
|
|
line-height: 0.82;
|
|
letter-spacing: -0.1em;
|
|
font-weight: 1000;
|
|
}
|
|
.unit {
|
|
font-size: 18px;
|
|
letter-spacing: 0;
|
|
color: var(--muted);
|
|
}
|
|
.chart {
|
|
height: 136px;
|
|
border-radius: 24px;
|
|
background: linear-gradient(180deg, #251a10, #100c08);
|
|
border: 1px solid var(--line);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.chart:before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
linear-gradient(transparent 24px, rgba(255, 255, 255, 0.045) 25px),
|
|
linear-gradient(
|
|
90deg,
|
|
transparent 24px,
|
|
rgba(255, 255, 255, 0.045) 25px
|
|
);
|
|
background-size: 25px 25px;
|
|
}
|
|
.chart svg {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.chart path {
|
|
fill: none;
|
|
stroke: var(--red);
|
|
stroke-width: 4.5;
|
|
stroke-linecap: round;
|
|
filter: drop-shadow(0 0 12px rgba(226, 59, 46, 0.55));
|
|
}
|
|
.data-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 8px;
|
|
}
|
|
.tile {
|
|
border: 1px solid var(--line);
|
|
border-radius: 18px;
|
|
background: #16110b;
|
|
padding: 12px;
|
|
}
|
|
.tile b {
|
|
display: block;
|
|
font-size: 24px;
|
|
letter-spacing: -0.05em;
|
|
}
|
|
.tile span {
|
|
font-size: 10px;
|
|
color: var(--muted);
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
font-weight: 950;
|
|
}
|
|
.dock {
|
|
margin-top: auto;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 10px;
|
|
}
|
|
.dock .btn {
|
|
justify-content: center;
|
|
padding: 14px 8px;
|
|
font-size: 11px;
|
|
}
|
|
.stop {
|
|
background: var(--cream);
|
|
color: #120b07;
|
|
box-shadow: none;
|
|
}
|
|
.tag-row {
|
|
display: flex;
|
|
gap: 7px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.tag {
|
|
border-radius: 999px;
|
|
background: #251a10;
|
|
color: var(--amber);
|
|
padding: 7px 9px;
|
|
font-size: 10px;
|
|
font-weight: 950;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
}
|
|
.list {
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
.item {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr auto;
|
|
gap: 10px;
|
|
align-items: center;
|
|
border-bottom: 1px solid var(--line);
|
|
padding: 10px 0;
|
|
}
|
|
.badge {
|
|
width: 38px;
|
|
height: 38px;
|
|
border-radius: 50%;
|
|
display: grid;
|
|
place-items: center;
|
|
background: var(--red);
|
|
font-weight: 1000;
|
|
}
|
|
.field {
|
|
border: 1px solid var(--line);
|
|
background: #0d0906;
|
|
border-radius: 16px;
|
|
padding: 12px;
|
|
color: var(--muted);
|
|
}
|
|
.system-grid {
|
|
display: grid;
|
|
grid-template-columns: 1.1fr 0.9fr 1fr;
|
|
gap: 18px;
|
|
}
|
|
.spec {
|
|
border: 1px solid var(--line);
|
|
border-radius: 30px;
|
|
background: rgba(18, 16, 12, 0.8);
|
|
padding: 22px;
|
|
}
|
|
.spec h3 {
|
|
font-size: 26px;
|
|
letter-spacing: -0.045em;
|
|
margin: 8px 0;
|
|
}
|
|
.scale {
|
|
display: grid;
|
|
gap: 10px;
|
|
}
|
|
.scale div {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid var(--line);
|
|
padding: 8px 0;
|
|
color: var(--muted);
|
|
}
|
|
.scale b {
|
|
color: var(--ink);
|
|
}
|
|
.radii {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: end;
|
|
margin-top: 16px;
|
|
}
|
|
.radii i {
|
|
display: block;
|
|
background: #24190f;
|
|
border: 1px solid var(--line);
|
|
}
|
|
.ra {
|
|
width: 54px;
|
|
height: 54px;
|
|
border-radius: 10px;
|
|
}
|
|
.rb {
|
|
width: 72px;
|
|
height: 72px;
|
|
border-radius: 24px;
|
|
}
|
|
.rc {
|
|
width: 96px;
|
|
height: 96px;
|
|
border-radius: 40px;
|
|
}
|
|
.component-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(6, 1fr);
|
|
gap: 12px;
|
|
}
|
|
.component {
|
|
min-height: 160px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 24px;
|
|
background: #120f0b;
|
|
padding: 14px;
|
|
}
|
|
.motion {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 14px;
|
|
}
|
|
.motion-card {
|
|
border: 1px solid var(--line);
|
|
border-radius: 26px;
|
|
background: #120f0b;
|
|
padding: 18px;
|
|
}
|
|
.motion-card b {
|
|
color: var(--amber);
|
|
}
|
|
@media (max-width: 1180px) {
|
|
.phone-wall {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
.component-grid {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
}
|
|
@media (max-width: 900px) {
|
|
.hero,
|
|
.system-grid,
|
|
.motion {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.section-head {
|
|
display: block;
|
|
}
|
|
.device {
|
|
height: 680px;
|
|
}
|
|
}
|
|
@media (max-width: 620px) {
|
|
.nav {
|
|
position: relative;
|
|
top: 0;
|
|
}
|
|
.nav div:last-child {
|
|
display: none;
|
|
}
|
|
.pad {
|
|
padding: 22px;
|
|
}
|
|
.title {
|
|
font-size: 64px;
|
|
}
|
|
.phone-wall,
|
|
.component-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.device {
|
|
height: 700px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main class="wrap">
|
|
<nav class="nav">
|
|
<div class="brand">Fight<span>Rate</span> / Corner Instrument</div>
|
|
<div>
|
|
<a href="00-v2-index.html">v2 index</a><a href="#screens">telas</a
|
|
><a href="#system">sistema</a><a href="#components">componentes</a>
|
|
</div>
|
|
</nav>
|
|
<section class="hero">
|
|
<div class="slab pad">
|
|
<div class="eyebrow">Direção 01 / equipamento de córner</div>
|
|
<div class="title">treino ligado. celular esquecido.</div>
|
|
<p class="lead">
|
|
O app deve parecer uma peça de equipamento no canto do tatame:
|
|
forte, confiável e legível de longe. Poucos elementos. Dados
|
|
grandes. Ação primária óbvia.
|
|
</p>
|
|
<div class="actions">
|
|
<button class="btn">
|
|
Iniciar treino <span class="dot">↗</span></button
|
|
><button class="btn secondary">Ver relatório</button>
|
|
</div>
|
|
</div>
|
|
<div class="slab pad">
|
|
<div class="eyebrow">Tokens de marca</div>
|
|
<div class="color-strip">
|
|
<div class="color" style="background: #070605">60% preto lona</div>
|
|
<div class="color" style="background: #1d170f">
|
|
30% couro queimado
|
|
</div>
|
|
<div class="color" style="background: #e23b2e">10% golpe</div>
|
|
</div>
|
|
<p class="lead">
|
|
Âmbar sinaliza leitura auxiliar; vermelho é ação, pico ou risco.
|
|
Nada de azul SaaS, nada de verde fitness genérico.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
<section id="screens" class="section">
|
|
<div class="section-head">
|
|
<div>
|
|
<h2>Telas principais</h2>
|
|
<p>O mesmo sistema aplicado a seis momentos reais do produto.</p>
|
|
</div>
|
|
</div>
|
|
<div class="phone-wall">
|
|
<div class="device">
|
|
<div class="screen">
|
|
<div class="topline">
|
|
<span>pré-treino</span><span>h003 ok</span>
|
|
</div>
|
|
<div class="bpm">--<span class="unit">bpm</span></div>
|
|
<p class="lead">
|
|
Coloque a cinta, toque uma vez e largue o celular.
|
|
</p>
|
|
<div class="tag-row">
|
|
<span class="tag">sensor pronto</span
|
|
><span class="tag">bateria 84%</span>
|
|
</div>
|
|
<div class="data-grid">
|
|
<div class="tile"><b>-58</b><span>rssi</span></div>
|
|
<div class="tile"><b>0</b><span>drops</span></div>
|
|
<div class="tile"><b>0</b><span>amostras</span></div>
|
|
</div>
|
|
<div class="dock">
|
|
<button class="btn">Iniciar</button
|
|
><button class="btn secondary">Check-in</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="device">
|
|
<div class="screen">
|
|
<div class="topline">
|
|
<span>captura ativa</span><span>42:18</span>
|
|
</div>
|
|
<div class="bpm">154<span class="unit">bpm</span></div>
|
|
<div class="chart">
|
|
<svg viewBox="0 0 280 140">
|
|
<path
|
|
d="M8 104 C36 86,44 46,78 60 S120 106,150 72 S190 28,222 54 S250 92,272 48"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class="data-grid">
|
|
<div class="tile"><b>146</b><span>média</span></div>
|
|
<div class="tile"><b>183</b><span>pico</span></div>
|
|
<div class="tile"><b>41%</b><span>Z4/Z5</span></div>
|
|
</div>
|
|
<div class="dock">
|
|
<button class="btn secondary">Evento</button
|
|
><button class="btn stop">Parar</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="device">
|
|
<div class="screen">
|
|
<div class="topline">
|
|
<span>pós-treino</span><span>salvo</span>
|
|
</div>
|
|
<div class="bpm">47<span class="unit">min</span></div>
|
|
<div class="tag-row">
|
|
<span class="tag">carga alta</span
|
|
><span class="tag">rec 18h</span>
|
|
</div>
|
|
<div class="list">
|
|
<div class="item">
|
|
<span class="badge">1</span>
|
|
<div>
|
|
Entrada em ritmo<br /><span style="color: var(--muted)"
|
|
>0-10 min</span
|
|
>
|
|
</div>
|
|
<b>138</b>
|
|
</div>
|
|
<div class="item">
|
|
<span class="badge">2</span>
|
|
<div>
|
|
Bloco mais intenso<br /><span style="color: var(--muted)"
|
|
>10-31 min</span
|
|
>
|
|
</div>
|
|
<b>181</b>
|
|
</div>
|
|
<div class="item">
|
|
<span class="badge">3</span>
|
|
<div>
|
|
Queda controlada<br /><span style="color: var(--muted)"
|
|
>31-47 min</span
|
|
>
|
|
</div>
|
|
<b>152</b>
|
|
</div>
|
|
</div>
|
|
<div class="dock">
|
|
<button class="btn">Relatório</button
|
|
><button class="btn secondary">Exportar</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="device">
|
|
<div class="screen">
|
|
<div class="topline">
|
|
<span>histórico</span><span>junho</span>
|
|
</div>
|
|
<div class="data-grid">
|
|
<div class="tile"><b>8</b><span>treinos</span></div>
|
|
<div class="tile"><b>5h</b><span>tempo</span></div>
|
|
<div class="tile"><b>+8%</b><span>carga</span></div>
|
|
</div>
|
|
<div class="list">
|
|
<div class="item">
|
|
<span class="badge">S</span>
|
|
<div>
|
|
Sparring<br /><span style="color: var(--muted)"
|
|
>Hoje · 47 min · pico 183</span
|
|
>
|
|
</div>
|
|
<b>96</b>
|
|
</div>
|
|
<div class="item">
|
|
<span class="badge">M</span>
|
|
<div>
|
|
Muay Thai<br /><span style="color: var(--muted)"
|
|
>Seg · 61 min · alta carga</span
|
|
>
|
|
</div>
|
|
<b>110</b>
|
|
</div>
|
|
<div class="item">
|
|
<span class="badge">B</span>
|
|
<div>
|
|
Boxe<br /><span style="color: var(--muted)"
|
|
>Sex · 42 min</span
|
|
>
|
|
</div>
|
|
<b>77</b>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="device">
|
|
<div class="screen">
|
|
<div class="topline">
|
|
<span>sensor</span><span>ble profile</span>
|
|
</div>
|
|
<div class="bpm">-61<span class="unit">rssi</span></div>
|
|
<div class="field">Heart Rate Service · 180D</div>
|
|
<div class="field">Measurement · 2A37 · notify</div>
|
|
<div class="field">Battery · 2A19 · read</div>
|
|
<div class="field">Body Sensor · 2A38 · read</div>
|
|
<div class="tag-row">
|
|
<span class="tag">perfil estável</span
|
|
><span class="tag">0 quedas</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="device">
|
|
<div class="screen">
|
|
<div class="topline">
|
|
<span>insight</span><span>explicável</span>
|
|
</div>
|
|
<div class="bpm">18h<span class="unit">rec</span></div>
|
|
<p class="lead">
|
|
Carga cardiovascular alta. Amanhã: técnica leve ou descanso
|
|
ativo.
|
|
</p>
|
|
<div class="tile">
|
|
<b>Por que importa?</b
|
|
><span>Você ficou acima da sua média recente em Z4/Z5.</span>
|
|
</div>
|
|
<div class="tile">
|
|
<b>Confiança</b
|
|
><span>2.844 amostras válidas. Sem quedas de sinal.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section id="system" class="section">
|
|
<h2>Design book visual</h2>
|
|
<div class="system-grid">
|
|
<div class="spec">
|
|
<div class="eyebrow">Cor</div>
|
|
<h3>Escuro com propósito</h3>
|
|
<p class="lead">
|
|
A tela ativa usa fundo escuro para reduzir distração no treino. O
|
|
vermelho não é decoração; é ação, intensidade e risco.
|
|
</p>
|
|
<div class="color-strip">
|
|
<div class="color" style="background: #070605">base</div>
|
|
<div class="color" style="background: #1d170f">surface</div>
|
|
<div class="color" style="background: #e23b2e">accent</div>
|
|
</div>
|
|
</div>
|
|
<div class="spec">
|
|
<div class="eyebrow">Tipografia</div>
|
|
<h3>Número primeiro</h3>
|
|
<div class="bpm" style="font-size: 72px">154</div>
|
|
<p class="lead">
|
|
Display condensado/forte para BPM. Labels pequenos, uppercase e
|
|
espaçados. Texto longo só no pós-treino.
|
|
</p>
|
|
</div>
|
|
<div class="spec">
|
|
<div class="eyebrow">Forma</div>
|
|
<h3>Material físico</h3>
|
|
<div class="radii">
|
|
<i class="ra"></i><i class="rb"></i><i class="rc"></i>
|
|
</div>
|
|
<p class="lead">
|
|
Painéis grandes com raio generoso; campos técnicos com raio médio;
|
|
badges redondos para estados.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section id="components" class="section">
|
|
<h2>Componentes</h2>
|
|
<div class="component-grid">
|
|
<div class="component">
|
|
<div class="eyebrow">Primary button</div>
|
|
<button class="btn">Iniciar <span class="dot">↗</span></button
|
|
><button class="btn secondary" style="margin-top: 10px">
|
|
Secundário
|
|
</button>
|
|
</div>
|
|
<div class="component">
|
|
<div class="eyebrow">Stop button</div>
|
|
<button class="btn stop">Parar treino</button>
|
|
<p class="lead" style="font-size: 13px">
|
|
Contraste claro para ação crítica.
|
|
</p>
|
|
</div>
|
|
<div class="component">
|
|
<div class="eyebrow">Metric tile</div>
|
|
<div class="tile"><b>183</b><span>pico bpm</span></div>
|
|
</div>
|
|
<div class="component">
|
|
<div class="eyebrow">Sensor row</div>
|
|
<div class="field">2A37 · notify</div>
|
|
<div class="field">2A19 · read</div>
|
|
</div>
|
|
<div class="component">
|
|
<div class="eyebrow">Insight</div>
|
|
<div class="tile">
|
|
<b>Carga alta</b><span>reduza intensidade amanhã</span>
|
|
</div>
|
|
</div>
|
|
<div class="component">
|
|
<div class="eyebrow">Tag states</div>
|
|
<div class="tag-row">
|
|
<span class="tag">ok</span><span class="tag">z4</span
|
|
><span class="tag">rec</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="section">
|
|
<h2>Motion e uso no React Native</h2>
|
|
<div class="motion">
|
|
<div class="motion-card">
|
|
<b>Captura</b>
|
|
<p class="lead">
|
|
Animação mínima: pulso discreto no status ativo e transições de
|
|
número. Nada de blur pesado.
|
|
</p>
|
|
</div>
|
|
<div class="motion-card">
|
|
<b>Histórico</b>
|
|
<p class="lead">
|
|
Entrada em lista com fade/translate curto. A densidade vem da
|
|
hierarquia, não de cards infinitos.
|
|
</p>
|
|
</div>
|
|
<div class="motion-card">
|
|
<b>Sensor</b>
|
|
<p class="lead">
|
|
Logs e características com expansão progressiva. Dados técnicos
|
|
precisam de ordem e monospace pontual.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</body>
|
|
</html>
|