653 lines
19 KiB
HTML
653 lines
19 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 02 — Athlete Lab</title>
|
|
<style>
|
|
:root {
|
|
--bg: #f4f8f4;
|
|
--paper: #fcfffc;
|
|
--ink: #102019;
|
|
--muted: #607168;
|
|
--line: #d7e4dc;
|
|
--green: #12a36b;
|
|
--lime: #c6ee3f;
|
|
--blue: #1769ff;
|
|
--warn: #ef8b18;
|
|
--r-sm: 10px;
|
|
--r-md: 16px;
|
|
--r-lg: 24px;
|
|
--r-xl: 34px;
|
|
--shadow: 0 24px 80px rgba(16, 32, 25, 0.1);
|
|
}
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
background: var(--bg);
|
|
color: var(--ink);
|
|
font-family: "Aptos", ui-sans-serif, system-ui, sans-serif;
|
|
}
|
|
body:before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
background:
|
|
linear-gradient(rgba(16, 32, 25, 0.045) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(16, 32, 25, 0.045) 1px, transparent 1px),
|
|
radial-gradient(
|
|
circle at 85% 4%,
|
|
rgba(198, 238, 63, 0.28),
|
|
transparent 30%
|
|
);
|
|
background-size:
|
|
28px 28px,
|
|
28px 28px,
|
|
auto;
|
|
}
|
|
.wrap {
|
|
width: min(1220px, calc(100% - 28px));
|
|
margin: auto;
|
|
padding: 34px 0 80px;
|
|
position: relative;
|
|
}
|
|
.nav {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background: rgba(252, 255, 252, 0.82);
|
|
border: 1px solid var(--line);
|
|
border-radius: 22px;
|
|
padding: 12px 16px;
|
|
position: sticky;
|
|
top: 14px;
|
|
z-index: 3;
|
|
backdrop-filter: blur(16px);
|
|
}
|
|
.nav a {
|
|
color: var(--muted);
|
|
text-decoration: none;
|
|
font-size: 12px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.14em;
|
|
margin-left: 16px;
|
|
}
|
|
.brand {
|
|
font-weight: 900;
|
|
letter-spacing: -0.04em;
|
|
}
|
|
.hero {
|
|
display: grid;
|
|
grid-template-columns: 0.9fr 1.1fr;
|
|
gap: 18px;
|
|
margin-top: 24px;
|
|
}
|
|
.hero-card {
|
|
background: var(--paper);
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--r-xl);
|
|
padding: 32px;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.eyebrow {
|
|
font-size: 11px;
|
|
letter-spacing: 0.22em;
|
|
text-transform: uppercase;
|
|
font-weight: 900;
|
|
color: var(--green);
|
|
}
|
|
h1 {
|
|
font-size: clamp(50px, 8vw, 104px);
|
|
line-height: 0.84;
|
|
letter-spacing: -0.08em;
|
|
margin: 16px 0;
|
|
}
|
|
h2 {
|
|
font-size: 42px;
|
|
letter-spacing: -0.06em;
|
|
margin: 0 0 10px;
|
|
}
|
|
.lead {
|
|
font-size: 18px;
|
|
color: var(--muted);
|
|
line-height: 1.45;
|
|
}
|
|
.token-row {
|
|
display: grid;
|
|
grid-template-columns: 6fr 3fr 1fr;
|
|
gap: 8px;
|
|
margin-top: 20px;
|
|
}
|
|
.token {
|
|
border-radius: 18px;
|
|
padding: 16px;
|
|
min-height: 98px;
|
|
font-weight: 900;
|
|
}
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
border: 0;
|
|
border-radius: 16px;
|
|
background: var(--green);
|
|
color: white;
|
|
padding: 14px 18px;
|
|
font-weight: 900;
|
|
box-shadow: 0 16px 36px rgba(18, 163, 107, 0.22);
|
|
}
|
|
.btn.secondary {
|
|
background: #edf6f0;
|
|
color: var(--ink);
|
|
border: 1px solid var(--line);
|
|
box-shadow: none;
|
|
}
|
|
.btn.ghost {
|
|
background: transparent;
|
|
color: var(--green);
|
|
border: 1px solid var(--green);
|
|
box-shadow: none;
|
|
}
|
|
.section {
|
|
margin-top: 30px;
|
|
}
|
|
.lab-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 18px;
|
|
}
|
|
.phone {
|
|
height: 590px;
|
|
background: #111;
|
|
border-radius: 42px;
|
|
padding: 10px;
|
|
box-shadow: 0 30px 80px rgba(16, 32, 25, 0.18);
|
|
}
|
|
.screen {
|
|
height: 100%;
|
|
background: var(--paper);
|
|
border-radius: 34px;
|
|
padding: 18px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
overflow: hidden;
|
|
}
|
|
.top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.14em;
|
|
color: var(--muted);
|
|
font-weight: 900;
|
|
}
|
|
.number {
|
|
font-size: 76px;
|
|
letter-spacing: -0.09em;
|
|
line-height: 0.86;
|
|
font-weight: 950;
|
|
}
|
|
.unit {
|
|
font-size: 18px;
|
|
color: var(--muted);
|
|
}
|
|
.strip {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 8px;
|
|
}
|
|
.tile {
|
|
border: 1px solid var(--line);
|
|
border-radius: 18px;
|
|
background: #f7fbf8;
|
|
padding: 12px;
|
|
}
|
|
.tile b {
|
|
font-size: 24px;
|
|
}
|
|
.tile span {
|
|
display: block;
|
|
font-size: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.12em;
|
|
color: var(--muted);
|
|
font-weight: 900;
|
|
}
|
|
.chart {
|
|
height: 130px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 22px;
|
|
background: linear-gradient(180deg, #fafffa, #edf7f0);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.chart svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.chart path {
|
|
fill: none;
|
|
stroke: var(--green);
|
|
stroke-width: 4;
|
|
stroke-linecap: round;
|
|
}
|
|
.zones {
|
|
display: flex;
|
|
height: 14px;
|
|
border-radius: 999px;
|
|
overflow: hidden;
|
|
}
|
|
.zones i:nth-child(1) {
|
|
background: #9bd8ff;
|
|
flex: 1;
|
|
}
|
|
.zones i:nth-child(2) {
|
|
background: #b7ecb4;
|
|
flex: 1.4;
|
|
}
|
|
.zones i:nth-child(3) {
|
|
background: #c6ee3f;
|
|
flex: 1.8;
|
|
}
|
|
.zones i:nth-child(4) {
|
|
background: #efb84d;
|
|
flex: 1.2;
|
|
}
|
|
.zones i:nth-child(5) {
|
|
background: #e75b4a;
|
|
flex: 0.7;
|
|
}
|
|
.dock {
|
|
margin-top: auto;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 10px;
|
|
}
|
|
.dock .btn {
|
|
padding: 14px 8px;
|
|
}
|
|
.spec-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 14px;
|
|
}
|
|
.spec {
|
|
background: var(--paper);
|
|
border: 1px solid var(--line);
|
|
border-radius: 24px;
|
|
padding: 18px;
|
|
}
|
|
.spec h3 {
|
|
margin: 6px 0;
|
|
font-size: 22px;
|
|
letter-spacing: -0.04em;
|
|
}
|
|
.type .big {
|
|
font-size: 62px;
|
|
letter-spacing: -0.08em;
|
|
line-height: 0.86;
|
|
}
|
|
.radii {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: end;
|
|
}
|
|
.radii div {
|
|
background: #eaf3ed;
|
|
border: 1px solid var(--line);
|
|
}
|
|
.r1 {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 10px;
|
|
}
|
|
.r2 {
|
|
width: 68px;
|
|
height: 68px;
|
|
border-radius: 16px;
|
|
}
|
|
.r3 {
|
|
width: 92px;
|
|
height: 92px;
|
|
border-radius: 28px;
|
|
}
|
|
.component-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
gap: 12px;
|
|
}
|
|
.component {
|
|
background: var(--paper);
|
|
border: 1px solid var(--line);
|
|
border-radius: 22px;
|
|
padding: 14px;
|
|
min-height: 154px;
|
|
}
|
|
.field {
|
|
border: 1px solid var(--line);
|
|
border-radius: 14px;
|
|
padding: 12px;
|
|
background: #f7fbf8;
|
|
color: var(--muted);
|
|
margin-top: 10px;
|
|
}
|
|
.table {
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
.row {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
gap: 12px;
|
|
border-bottom: 1px solid var(--line);
|
|
padding: 8px 0;
|
|
}
|
|
.badge {
|
|
display: inline-flex;
|
|
border-radius: 999px;
|
|
padding: 6px 9px;
|
|
background: #e7f6ee;
|
|
color: #08734c;
|
|
font-size: 11px;
|
|
font-weight: 900;
|
|
text-transform: uppercase;
|
|
}
|
|
.principles {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 14px;
|
|
}
|
|
.principle {
|
|
border-left: 5px solid var(--green);
|
|
background: var(--paper);
|
|
border-radius: 0 22px 22px 0;
|
|
padding: 18px;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
@media (max-width: 1000px) {
|
|
.hero,
|
|
.lab-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.spec-grid {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
.component-grid {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
.principles {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
@media (max-width: 620px) {
|
|
.hero-card {
|
|
padding: 22px;
|
|
}
|
|
.spec-grid,
|
|
.component-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.phone {
|
|
height: 650px;
|
|
}
|
|
.nav {
|
|
position: relative;
|
|
top: 0;
|
|
}
|
|
.nav div:last-child {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main class="wrap">
|
|
<nav class="nav">
|
|
<div class="brand">FightRate / Athlete Lab</div>
|
|
<div>
|
|
<a href="00-index.html">Índice</a><a href="#screens">Telas</a
|
|
><a href="#system">Sistema</a>
|
|
</div>
|
|
</nav>
|
|
<section class="hero">
|
|
<div class="hero-card">
|
|
<div class="eyebrow">Direção 02 / ciência esportiva</div>
|
|
<h1>laboratório limpo para performance real.</h1>
|
|
<p class="lead">
|
|
A direção mais confiável para relatórios, histórico, sensores e
|
|
decisões pós-treino. Visual claro, médico-esportivo sem parecer
|
|
hospital.
|
|
</p>
|
|
<button class="btn">Capturar treino</button>
|
|
<button class="btn secondary">Ver relatório</button>
|
|
</div>
|
|
<div class="hero-card">
|
|
<div class="eyebrow">Regra 60 / 30 / 10</div>
|
|
<div class="token-row">
|
|
<div class="token" style="background: #fcfffc">60% paper</div>
|
|
<div class="token" style="background: #eaf3ed">30% lab surface</div>
|
|
<div class="token" style="background: #12a36b; color: white">
|
|
10% green
|
|
</div>
|
|
</div>
|
|
<p class="lead">
|
|
Azul só para informação técnica; amarelo para alerta leve; vermelho
|
|
apenas para risco/limite.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
<section id="screens" class="section">
|
|
<h2>Telas mobile</h2>
|
|
<div class="lab-grid">
|
|
<div class="phone">
|
|
<div class="screen">
|
|
<div class="top">
|
|
<span>pronto para captura</span><span>h003</span>
|
|
</div>
|
|
<div class="number">--<span class="unit">bpm</span></div>
|
|
<p class="lead">
|
|
Comece antes do treino. O relatório será construído pela janela
|
|
inteira.
|
|
</p>
|
|
<div class="strip">
|
|
<div class="tile"><b>84%</b><span>bateria</span></div>
|
|
<div class="tile"><b>-58</b><span>rssi</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="phone">
|
|
<div class="screen">
|
|
<div class="top">
|
|
<span>captura ativa</span><span>42:18</span>
|
|
</div>
|
|
<div class="number">154<span class="unit">bpm</span></div>
|
|
<div class="chart">
|
|
<svg viewBox="0 0 280 130">
|
|
<path
|
|
d="M8 92 C44 88,54 58,78 64 S118 96,146 76 S196 32,226 48 S250 84,272 58"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class="zones"><i></i><i></i><i></i><i></i><i></i></div>
|
|
<div class="strip">
|
|
<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" style="background: #e75b4a">Parar</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="phone">
|
|
<div class="screen">
|
|
<div class="top"><span>relatório</span><span>salvo</span></div>
|
|
<div class="number">96<span class="unit">trimp</span></div>
|
|
<div class="table">
|
|
<div class="row"><span>Tempo em carga</span><b>28m</b></div>
|
|
<div class="row"><span>Pico sustentado</span><b>181</b></div>
|
|
<div class="row"><span>Recuperação</span><b>18h</b></div>
|
|
<div class="row"><span>Consistência</span><b>Boa</b></div>
|
|
</div>
|
|
<span class="badge">carga alta controlada</span>
|
|
<div class="dock">
|
|
<button class="btn">Detalhar</button
|
|
><button class="btn secondary">Exportar</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="phone">
|
|
<div class="screen">
|
|
<div class="top">
|
|
<span>histórico</span><span>4 semanas</span>
|
|
</div>
|
|
<div class="strip">
|
|
<div class="tile"><b>11</b><span>treinos</span></div>
|
|
<div class="tile"><b>7h</b><span>total</span></div>
|
|
<div class="tile"><b>+8%</b><span>carga</span></div>
|
|
</div>
|
|
<div class="table">
|
|
<div class="row"><span>Sparring — hoje</span><b>96</b></div>
|
|
<div class="row"><span>Drills — ontem</span><b>54</b></div>
|
|
<div class="row"><span>Muay Thai — seg</span><b>110</b></div>
|
|
<div class="row"><span>Boxe — sex</span><b>77</b></div>
|
|
</div>
|
|
<button class="btn secondary">Comparar semanas</button>
|
|
</div>
|
|
</div>
|
|
<div class="phone">
|
|
<div class="screen">
|
|
<div class="top"><span>sensor lab</span><span>ble</span></div>
|
|
<div class="number">2A37</div>
|
|
<div class="table">
|
|
<div class="row"><span>Heart Rate</span><b>notify</b></div>
|
|
<div class="row"><span>Battery</span><b>read</b></div>
|
|
<div class="row"><span>Body Sensor</span><b>read</b></div>
|
|
<div class="row"><span>RSSI</span><b>-61</b></div>
|
|
</div>
|
|
<span class="badge">perfil estável</span>
|
|
</div>
|
|
</div>
|
|
<div class="phone">
|
|
<div class="screen">
|
|
<div class="top">
|
|
<span>insights</span><span>explicável</span>
|
|
</div>
|
|
<div class="number">18h<span class="unit">rec</span></div>
|
|
<p class="lead">
|
|
Carga cardiovascular alta. Priorize sono e treino técnico leve
|
|
na próxima sessão.
|
|
</p>
|
|
<div class="tile">
|
|
<b>Por que importa?</b
|
|
><span>Evita acumular fadiga sem perder evolução.</span>
|
|
</div>
|
|
<div class="tile">
|
|
<b>Confiança</b><span>Baseada em 2.844 amostras.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section id="system" class="section">
|
|
<h2>Design system</h2>
|
|
<div class="spec-grid">
|
|
<div class="spec">
|
|
<div class="eyebrow">Cores</div>
|
|
<h3>Verde = performance</h3>
|
|
<p class="lead">
|
|
Nunca usar verde em tudo. Ele guia progresso, estabilidade e ação
|
|
primária.
|
|
</p>
|
|
</div>
|
|
<div class="spec type">
|
|
<div class="eyebrow">Tipo</div>
|
|
<div class="big">72%</div>
|
|
<p class="lead">
|
|
Números gigantes, labels técnicos pequenos, corpo legível.
|
|
</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">Raios médios. Menos agressivo que Corner.</p>
|
|
</div>
|
|
<div class="spec">
|
|
<div class="eyebrow">Bordas</div>
|
|
<p class="lead">
|
|
Borda suave verde/cinza; elevação quase invisível. Parece
|
|
instrumento científico, não card de rede social.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="section">
|
|
<h2>Componentes</h2>
|
|
<div class="component-grid">
|
|
<div class="component">
|
|
<div class="eyebrow">Primary CTA</div>
|
|
<button class="btn">Iniciar captura</button
|
|
><button class="btn secondary" style="margin-top: 8px">
|
|
Secundário
|
|
</button>
|
|
</div>
|
|
<div class="component">
|
|
<div class="eyebrow">Form</div>
|
|
<div class="field">Tipo de treino</div>
|
|
<div class="field">RPE pós-treino</div>
|
|
</div>
|
|
<div class="component">
|
|
<div class="eyebrow">Metric</div>
|
|
<div class="number" style="font-size: 54px">146</div>
|
|
<span class="badge">bpm médio</span>
|
|
</div>
|
|
<div class="component">
|
|
<div class="eyebrow">Insight</div>
|
|
<b>Carga subiu 8%</b>
|
|
<p class="lead">Comparado à semana anterior.</p>
|
|
</div>
|
|
<div class="component">
|
|
<div class="eyebrow">Sensor row</div>
|
|
<div class="row"><span>2A37</span><b>notify</b></div>
|
|
<div class="row"><span>2A19</span><b>read</b></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="section">
|
|
<h2>Princípios</h2>
|
|
<div class="principles">
|
|
<div class="principle">
|
|
<b>Clareza antes de estilo</b>
|
|
<p class="lead">Durante treino, o atleta entende em 1 segundo.</p>
|
|
</div>
|
|
<div class="principle">
|
|
<b>Densidade no histórico</b>
|
|
<p class="lead">
|
|
Depois do treino, a tela pode ser mais informativa.
|
|
</p>
|
|
</div>
|
|
<div class="principle">
|
|
<b>Explicável sempre</b>
|
|
<p class="lead">Toda métrica importante diz por que importa.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</body>
|
|
</html>
|