727 lines
21 KiB
HTML
727 lines
21 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 — Athlete OS</title>
|
|
<style>
|
|
:root {
|
|
--bg: #f4f7f2;
|
|
--paper: #fefffc;
|
|
--ink: #102019;
|
|
--muted: #65766d;
|
|
--line: #d6e1d9;
|
|
--surface: #eaf3ed;
|
|
--green: #12875d;
|
|
--lime: #c9ef55;
|
|
--blue: #1769ff;
|
|
--red: #d84c3e;
|
|
--amber: #d98a15;
|
|
--r1: 10px;
|
|
--r2: 16px;
|
|
--r3: 24px;
|
|
--r4: 34px;
|
|
--shadow: 0 30px 90px rgba(16, 32, 25, 0.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.45;
|
|
}
|
|
body:before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
background:
|
|
linear-gradient(rgba(16, 32, 25, 0.04) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(16, 32, 25, 0.04) 1px, transparent 1px),
|
|
radial-gradient(
|
|
circle at 82% 0%,
|
|
rgba(201, 239, 85, 0.34),
|
|
transparent 30%
|
|
);
|
|
background-size:
|
|
32px 32px,
|
|
32px 32px,
|
|
auto;
|
|
}
|
|
.wrap {
|
|
width: min(1260px, calc(100% - 28px));
|
|
margin: auto;
|
|
padding: 30px 0 90px;
|
|
position: relative;
|
|
}
|
|
.nav {
|
|
position: sticky;
|
|
top: 14px;
|
|
z-index: 4;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border: 1px solid var(--line);
|
|
border-radius: 22px;
|
|
background: rgba(254, 255, 252, 0.78);
|
|
backdrop-filter: blur(16px);
|
|
padding: 12px 16px;
|
|
}
|
|
.brand {
|
|
font-weight: 950;
|
|
letter-spacing: -0.045em;
|
|
}
|
|
.nav a {
|
|
color: var(--muted);
|
|
text-decoration: none;
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.17em;
|
|
margin-left: 16px;
|
|
}
|
|
.hero {
|
|
display: grid;
|
|
grid-template-columns: 0.9fr 1.1fr;
|
|
gap: 18px;
|
|
margin-top: 28px;
|
|
}
|
|
.panel {
|
|
border: 1px solid var(--line);
|
|
border-radius: 38px;
|
|
background: rgba(254, 255, 252, 0.86);
|
|
box-shadow: var(--shadow);
|
|
padding: 34px;
|
|
}
|
|
.eyebrow {
|
|
font-size: 11px;
|
|
letter-spacing: 0.23em;
|
|
text-transform: uppercase;
|
|
color: var(--green);
|
|
font-weight: 950;
|
|
}
|
|
.title {
|
|
font-size: clamp(56px, 9vw, 118px);
|
|
line-height: 0.8;
|
|
letter-spacing: -0.09em;
|
|
font-weight: 1000;
|
|
margin: 18px 0 20px;
|
|
}
|
|
.lead {
|
|
font-size: 18px;
|
|
color: var(--muted);
|
|
max-width: 800px;
|
|
}
|
|
.actions {
|
|
display: flex;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
margin-top: 26px;
|
|
}
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 0;
|
|
border-radius: 18px;
|
|
background: var(--green);
|
|
color: white;
|
|
padding: 14px 18px;
|
|
font-weight: 950;
|
|
box-shadow: 0 16px 38px rgba(18, 135, 93, 0.22);
|
|
}
|
|
.btn.secondary {
|
|
background: var(--surface);
|
|
color: var(--ink);
|
|
border: 1px solid var(--line);
|
|
box-shadow: none;
|
|
}
|
|
.token-strip {
|
|
display: grid;
|
|
grid-template-columns: 6fr 3fr 1fr;
|
|
gap: 8px;
|
|
margin-top: 20px;
|
|
}
|
|
.token {
|
|
min-height: 116px;
|
|
border-radius: 20px;
|
|
padding: 16px;
|
|
display: flex;
|
|
align-items: end;
|
|
font-weight: 950;
|
|
}
|
|
.section {
|
|
margin-top: 30px;
|
|
}
|
|
.section h2 {
|
|
font-size: 48px;
|
|
line-height: 0.9;
|
|
letter-spacing: -0.065em;
|
|
margin: 0 0 12px;
|
|
}
|
|
.phone-wall {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 18px;
|
|
}
|
|
.device {
|
|
height: 640px;
|
|
border-radius: 46px;
|
|
background: #111;
|
|
padding: 10px;
|
|
box-shadow: 0 24px 70px rgba(16, 32, 25, 0.18);
|
|
}
|
|
.screen {
|
|
height: 100%;
|
|
border-radius: 36px;
|
|
background: var(--paper);
|
|
padding: 18px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
overflow: hidden;
|
|
}
|
|
.topline {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
color: var(--muted);
|
|
font-size: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.15em;
|
|
font-weight: 950;
|
|
}
|
|
.metric-main {
|
|
font-size: 80px;
|
|
line-height: 0.84;
|
|
letter-spacing: -0.095em;
|
|
font-weight: 1000;
|
|
}
|
|
.unit {
|
|
font-size: 18px;
|
|
color: var(--muted);
|
|
letter-spacing: 0;
|
|
}
|
|
.chart {
|
|
height: 140px;
|
|
border-radius: 24px;
|
|
background: linear-gradient(180deg, #f8fff9, #edf7f0);
|
|
border: 1px solid var(--line);
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
.chart:before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
linear-gradient(transparent 27px, rgba(16, 32, 25, 0.045) 28px),
|
|
linear-gradient(90deg, transparent 27px, rgba(16, 32, 25, 0.045) 28px);
|
|
background-size: 28px 28px;
|
|
}
|
|
.chart svg {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.chart path {
|
|
fill: none;
|
|
stroke: var(--green);
|
|
stroke-width: 4;
|
|
stroke-linecap: round;
|
|
}
|
|
.tile-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 8px;
|
|
}
|
|
.tile {
|
|
background: #f7fbf8;
|
|
border: 1px solid var(--line);
|
|
border-radius: 18px;
|
|
padding: 12px;
|
|
}
|
|
.tile b {
|
|
display: block;
|
|
font-size: 24px;
|
|
letter-spacing: -0.045em;
|
|
}
|
|
.tile span {
|
|
font-size: 10px;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: var(--muted);
|
|
font-weight: 950;
|
|
}
|
|
.zones {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1.2fr 1.7fr 1.2fr 0.7fr;
|
|
height: 14px;
|
|
border-radius: 999px;
|
|
overflow: hidden;
|
|
}
|
|
.zones i:nth-child(1) {
|
|
background: #92d7ff;
|
|
}
|
|
.zones i:nth-child(2) {
|
|
background: #aee8c5;
|
|
}
|
|
.zones i:nth-child(3) {
|
|
background: #c9ef55;
|
|
}
|
|
.zones i:nth-child(4) {
|
|
background: #e7a83f;
|
|
}
|
|
.zones i:nth-child(5) {
|
|
background: #d84c3e;
|
|
}
|
|
.dock {
|
|
margin-top: auto;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 10px;
|
|
}
|
|
.dock .btn {
|
|
padding: 14px 8px;
|
|
}
|
|
.table {
|
|
display: grid;
|
|
gap: 0;
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
.row {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
gap: 10px;
|
|
padding: 12px 0;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
.row span {
|
|
color: var(--muted);
|
|
}
|
|
.badge {
|
|
display: inline-flex;
|
|
width: max-content;
|
|
border-radius: 999px;
|
|
background: #e6f5ec;
|
|
color: #08734c;
|
|
padding: 7px 10px;
|
|
font-size: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.12em;
|
|
font-weight: 950;
|
|
}
|
|
.sensor {
|
|
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
|
|
font-size: 13px;
|
|
}
|
|
.system-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
gap: 18px;
|
|
}
|
|
.spec {
|
|
background: var(--paper);
|
|
border: 1px solid var(--line);
|
|
border-radius: 28px;
|
|
padding: 22px;
|
|
}
|
|
.spec h3 {
|
|
font-size: 26px;
|
|
letter-spacing: -0.045em;
|
|
margin: 8px 0;
|
|
}
|
|
.type-demo {
|
|
font-size: 72px;
|
|
line-height: 0.86;
|
|
letter-spacing: -0.09em;
|
|
font-weight: 1000;
|
|
}
|
|
.radii {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: end;
|
|
}
|
|
.radii i {
|
|
display: block;
|
|
background: var(--surface);
|
|
border: 1px solid var(--line);
|
|
}
|
|
.ra {
|
|
width: 54px;
|
|
height: 54px;
|
|
border-radius: 10px;
|
|
}
|
|
.rb {
|
|
width: 72px;
|
|
height: 72px;
|
|
border-radius: 18px;
|
|
}
|
|
.rc {
|
|
width: 96px;
|
|
height: 96px;
|
|
border-radius: 30px;
|
|
}
|
|
.component-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(6, 1fr);
|
|
gap: 12px;
|
|
}
|
|
.component {
|
|
min-height: 160px;
|
|
background: var(--paper);
|
|
border: 1px solid var(--line);
|
|
border-radius: 24px;
|
|
padding: 14px;
|
|
}
|
|
.field {
|
|
background: #f7fbf8;
|
|
border: 1px solid var(--line);
|
|
border-radius: 16px;
|
|
padding: 12px;
|
|
color: var(--muted);
|
|
margin-top: 10px;
|
|
}
|
|
.principles {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 14px;
|
|
}
|
|
.principle {
|
|
background: var(--paper);
|
|
border: 1px solid var(--line);
|
|
border-left: 6px solid var(--green);
|
|
border-radius: 0 24px 24px 0;
|
|
padding: 20px;
|
|
}
|
|
.principle b {
|
|
font-size: 22px;
|
|
}
|
|
@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,
|
|
.principles {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.device {
|
|
height: 680px;
|
|
}
|
|
}
|
|
@media (max-width: 620px) {
|
|
.nav {
|
|
position: relative;
|
|
top: 0;
|
|
}
|
|
.nav div:last-child {
|
|
display: none;
|
|
}
|
|
.panel {
|
|
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">FightRate / Athlete OS</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="panel">
|
|
<div class="eyebrow">Direção 02 / sistema do atleta</div>
|
|
<div class="title">ciência de treino sem cara de hospital.</div>
|
|
<p class="lead">
|
|
A direção mais forte para o app inteiro. O atleta confia porque tudo
|
|
tem origem, contexto e explicação. É limpo, mas não vazio.
|
|
</p>
|
|
<div class="actions">
|
|
<button class="btn">Capturar treino</button
|
|
><button class="btn secondary">Abrir histórico</button>
|
|
</div>
|
|
</div>
|
|
<div class="panel">
|
|
<div class="eyebrow">Tokens de marca</div>
|
|
<div class="token-strip">
|
|
<div class="token" style="background: #fefffc">
|
|
60% paper clínico quente
|
|
</div>
|
|
<div class="token" style="background: #eaf3ed">
|
|
30% superfície lab
|
|
</div>
|
|
<div class="token" style="background: #12875d; color: white">
|
|
10% ação
|
|
</div>
|
|
</div>
|
|
<p class="lead">
|
|
Verde é estabilidade e ação primária. Azul só para técnica. Vermelho
|
|
só para alerta real.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
<section id="screens" class="section">
|
|
<h2>Telas principais</h2>
|
|
<div class="phone-wall">
|
|
<div class="device">
|
|
<div class="screen">
|
|
<div class="topline">
|
|
<span>pronto</span><span>sensor ok</span>
|
|
</div>
|
|
<div class="metric-main">--<span class="unit">bpm</span></div>
|
|
<p class="lead">
|
|
A janela inteira do treino será registrada. Uma ação, nenhum
|
|
controle durante a luta.
|
|
</p>
|
|
<div class="tile-grid">
|
|
<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="device">
|
|
<div class="screen">
|
|
<div class="topline">
|
|
<span>captura ativa</span><span>42:18</span>
|
|
</div>
|
|
<div class="metric-main">154<span class="unit">bpm</span></div>
|
|
<div class="chart">
|
|
<svg viewBox="0 0 280 140">
|
|
<path
|
|
d="M8 100 C42 94,54 62,82 66 S122 98,154 74 S204 38,232 54 S254 78,274 56"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class="zones"><i></i><i></i><i></i><i></i><i></i></div>
|
|
<div class="tile-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" style="background: var(--red)">
|
|
Parar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="device">
|
|
<div class="screen">
|
|
<div class="topline">
|
|
<span>relatório</span><span>alta confiança</span>
|
|
</div>
|
|
<div class="metric-main">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 bpm</b>
|
|
</div>
|
|
<div class="row">
|
|
<span>Recuperação sugerida</span><b>18h</b>
|
|
</div>
|
|
<div class="row"><span>Amostras válidas</span><b>2.844</b></div>
|
|
</div>
|
|
<span class="badge">carga alta controlada</span>
|
|
</div>
|
|
</div>
|
|
<div class="device">
|
|
<div class="screen">
|
|
<div class="topline">
|
|
<span>histórico</span><span>4 semanas</span>
|
|
</div>
|
|
<div class="tile-grid">
|
|
<div class="tile"><b>11</b><span>treinos</span></div>
|
|
<div class="tile"><b>7h</b><span>tempo</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>Muay Thai · seg</span><b>110</b></div>
|
|
<div class="row"><span>Boxe · sex</span><b>77</b></div>
|
|
<div class="row"><span>Drill · qua</span><b>54</b></div>
|
|
</div>
|
|
<div class="chart">
|
|
<svg viewBox="0 0 280 140">
|
|
<path
|
|
d="M12 110 L46 94 L82 104 L118 62 L154 78 L194 44 L232 60 L270 48"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="device">
|
|
<div class="screen">
|
|
<div class="topline">
|
|
<span>sensor lab</span><span>gatt</span>
|
|
</div>
|
|
<div class="metric-main sensor">2A37</div>
|
|
<div class="table sensor">
|
|
<div class="row">
|
|
<span>Heart Rate Service</span><b>180D</b>
|
|
</div>
|
|
<div class="row"><span>Measurement</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>
|
|
</div>
|
|
</div>
|
|
<div class="device">
|
|
<div class="screen">
|
|
<div class="topline">
|
|
<span>insights</span><span>explicável</span>
|
|
</div>
|
|
<div class="metric-main">18h<span class="unit">rec</span></div>
|
|
<p class="lead">
|
|
Você acumulou carga alta com sinal estável. Próximo treino:
|
|
técnica ou recuperação ativa.
|
|
</p>
|
|
<div class="tile">
|
|
<b>Por que importa?</b
|
|
><span
|
|
>Evita somar fadiga quando o corpo já respondeu com alta
|
|
intensidade.</span
|
|
>
|
|
</div>
|
|
<div class="tile">
|
|
<b>Base</b><span>Comparação com 4 semanas e 11 sessões.</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>Confiança antes de impacto</h3>
|
|
<p class="lead">
|
|
O app base é claro. A captura pode escurecer se adotarmos o
|
|
híbrido com Corner Instrument.
|
|
</p>
|
|
<div class="token-strip">
|
|
<div class="token" style="background: #fefffc">paper</div>
|
|
<div class="token" style="background: #eaf3ed">surface</div>
|
|
<div class="token" style="background: #12875d; color: white">
|
|
action
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="spec">
|
|
<div class="eyebrow">Tipo</div>
|
|
<h3>Hierarquia clínica</h3>
|
|
<div class="type-demo">96</div>
|
|
<p class="lead">
|
|
Números grandes. Labels pequenos. Texto explicativo apenas onde
|
|
ajuda decisão.
|
|
</p>
|
|
</div>
|
|
<div class="spec">
|
|
<div class="eyebrow">Forma</div>
|
|
<h3>Raios médios</h3>
|
|
<div class="radii">
|
|
<i class="ra"></i><i class="rb"></i><i class="rc"></i>
|
|
</div>
|
|
<p class="lead">
|
|
Menos agressivo; mais confiável. Bordas sempre suaves e
|
|
funcionais.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section id="components" class="section">
|
|
<h2>Componentes</h2>
|
|
<div class="component-grid">
|
|
<div class="component">
|
|
<div class="eyebrow">Button</div>
|
|
<button class="btn">Primário</button
|
|
><button class="btn secondary" style="margin-top: 10px">
|
|
Secundário
|
|
</button>
|
|
</div>
|
|
<div class="component">
|
|
<div class="eyebrow">Metric</div>
|
|
<div class="tile"><b>146</b><span>bpm médio</span></div>
|
|
</div>
|
|
<div class="component">
|
|
<div class="eyebrow">Zone bar</div>
|
|
<div class="zones" style="margin-top: 12px">
|
|
<i></i><i></i><i></i><i></i><i></i>
|
|
</div>
|
|
</div>
|
|
<div class="component">
|
|
<div class="eyebrow">Form</div>
|
|
<div class="field">Tipo de treino</div>
|
|
<div class="field">RPE 0-10</div>
|
|
</div>
|
|
<div class="component">
|
|
<div class="eyebrow">Sensor</div>
|
|
<div class="row sensor"><span>2A37</span><b>notify</b></div>
|
|
<div class="row sensor"><span>2A19</span><b>read</b></div>
|
|
</div>
|
|
<div class="component">
|
|
<div class="eyebrow">Insight</div>
|
|
<div class="tile">
|
|
<b>Carga alta</b><span>recomendação clara + base dos dados</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="section">
|
|
<h2>Princípios</h2>
|
|
<div class="principles">
|
|
<div class="principle">
|
|
<b>Todo dado tem origem</b>
|
|
<p class="lead">
|
|
Amostras, sessão, comparação e confiança aparecem quando importam.
|
|
</p>
|
|
</div>
|
|
<div class="principle">
|
|
<b>Captura sem distração</b>
|
|
<p class="lead">O usuário não opera round no meio da luta.</p>
|
|
</div>
|
|
<div class="principle">
|
|
<b>Histórico denso</b>
|
|
<p class="lead">
|
|
Pós-treino aceita mais informação, desde que organizada.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</body>
|
|
</html>
|