654 lines
19 KiB
HTML
654 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 05 — Minimal Performance</title>
|
|
<style>
|
|
:root {
|
|
--bg: #f3eee3;
|
|
--paper: #fffaf0;
|
|
--ink: #16130e;
|
|
--muted: #726a5d;
|
|
--line: #d8cdb9;
|
|
--accent: #11110f;
|
|
--sand: #e9ddc7;
|
|
--red: #c83a2a;
|
|
--green: #168a5a;
|
|
--amber: #d48a12;
|
|
--r-xs: 4px;
|
|
--r-sm: 9px;
|
|
--r-md: 14px;
|
|
--r-lg: 22px;
|
|
--r-xl: 30px;
|
|
--shadow: 0 28px 80px rgba(22, 19, 14, 0.1);
|
|
}
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
background: var(--bg);
|
|
color: var(--ink);
|
|
font-family: "New York", Georgia, serif;
|
|
}
|
|
body:before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
background:
|
|
radial-gradient(
|
|
circle at 14% 2%,
|
|
rgba(200, 58, 42, 0.12),
|
|
transparent 34%
|
|
),
|
|
linear-gradient(rgba(22, 19, 14, 0.035) 1px, transparent 1px);
|
|
background-size:
|
|
auto,
|
|
100% 34px;
|
|
}
|
|
.wrap {
|
|
width: min(1180px, calc(100% - 28px));
|
|
margin: auto;
|
|
padding: 34px 0 82px;
|
|
position: relative;
|
|
}
|
|
.nav {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom: 1px solid var(--line);
|
|
padding: 16px 0;
|
|
}
|
|
.nav a {
|
|
font-family: ui-sans-serif, system-ui, sans-serif;
|
|
color: var(--muted);
|
|
text-decoration: none;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.16em;
|
|
font-size: 12px;
|
|
margin-left: 16px;
|
|
}
|
|
.brand {
|
|
font-family: ui-sans-serif, system-ui, sans-serif;
|
|
font-weight: 950;
|
|
letter-spacing: -0.04em;
|
|
}
|
|
.hero {
|
|
display: grid;
|
|
grid-template-columns: 1.05fr 0.95fr;
|
|
gap: 24px;
|
|
margin-top: 38px;
|
|
}
|
|
.hero-panel {
|
|
background: rgba(255, 250, 240, 0.72);
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--r-xl);
|
|
padding: 32px;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.eyebrow {
|
|
font-family: ui-sans-serif, system-ui, sans-serif;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.22em;
|
|
font-size: 11px;
|
|
color: var(--red);
|
|
font-weight: 900;
|
|
}
|
|
h1 {
|
|
font-size: clamp(52px, 9vw, 112px);
|
|
line-height: 0.86;
|
|
letter-spacing: -0.075em;
|
|
margin: 16px 0;
|
|
}
|
|
h2 {
|
|
font-size: 44px;
|
|
letter-spacing: -0.055em;
|
|
line-height: 0.96;
|
|
margin: 0 0 12px;
|
|
}
|
|
.lead {
|
|
font-family: ui-sans-serif, system-ui, sans-serif;
|
|
color: var(--muted);
|
|
font-size: 18px;
|
|
line-height: 1.55;
|
|
max-width: 720px;
|
|
}
|
|
.tokens {
|
|
display: grid;
|
|
grid-template-columns: 6fr 3fr 1fr;
|
|
gap: 8px;
|
|
margin-top: 24px;
|
|
}
|
|
.token {
|
|
border-radius: 18px;
|
|
padding: 16px;
|
|
min-height: 100px;
|
|
font-family: ui-sans-serif, system-ui, sans-serif;
|
|
font-weight: 900;
|
|
}
|
|
.btn {
|
|
border: 1px solid var(--ink);
|
|
background: var(--ink);
|
|
color: var(--paper);
|
|
border-radius: 999px;
|
|
padding: 14px 18px;
|
|
font-family: ui-sans-serif, system-ui, sans-serif;
|
|
font-weight: 900;
|
|
}
|
|
.btn.secondary {
|
|
background: transparent;
|
|
color: var(--ink);
|
|
}
|
|
.section {
|
|
margin-top: 34px;
|
|
}
|
|
.screen-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 18px;
|
|
}
|
|
.phone {
|
|
height: 590px;
|
|
background: #111;
|
|
border-radius: 40px;
|
|
padding: 9px;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.screen {
|
|
height: 100%;
|
|
border-radius: 32px;
|
|
background: var(--paper);
|
|
padding: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
overflow: hidden;
|
|
}
|
|
.top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-family: ui-sans-serif, system-ui, sans-serif;
|
|
font-size: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.14em;
|
|
color: var(--muted);
|
|
font-weight: 900;
|
|
}
|
|
.number {
|
|
font-family: ui-sans-serif, system-ui, sans-serif;
|
|
font-size: 82px;
|
|
line-height: 0.84;
|
|
letter-spacing: -0.09em;
|
|
font-weight: 950;
|
|
}
|
|
.unit {
|
|
font-size: 17px;
|
|
color: var(--muted);
|
|
font-weight: 600;
|
|
letter-spacing: 0;
|
|
}
|
|
.rule-line {
|
|
height: 1px;
|
|
background: var(--line);
|
|
}
|
|
.chart {
|
|
height: 136px;
|
|
border-bottom: 1px solid var(--ink);
|
|
position: relative;
|
|
}
|
|
.chart svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.chart path {
|
|
fill: none;
|
|
stroke: var(--ink);
|
|
stroke-width: 3;
|
|
stroke-linecap: round;
|
|
}
|
|
.metrics {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 8px;
|
|
}
|
|
.metric {
|
|
border-top: 1px solid var(--line);
|
|
padding-top: 10px;
|
|
font-family: ui-sans-serif, system-ui, sans-serif;
|
|
}
|
|
.metric b {
|
|
font-size: 24px;
|
|
}
|
|
.metric span {
|
|
display: block;
|
|
font-size: 10px;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: var(--muted);
|
|
font-weight: 900;
|
|
}
|
|
.dock {
|
|
margin-top: auto;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 10px;
|
|
}
|
|
.dock .btn {
|
|
padding: 14px 8px;
|
|
}
|
|
.list {
|
|
display: grid;
|
|
gap: 0;
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
.item {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
gap: 12px;
|
|
padding: 14px 0;
|
|
border-bottom: 1px solid var(--line);
|
|
font-family: ui-sans-serif, system-ui, sans-serif;
|
|
}
|
|
.item span {
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
}
|
|
.note {
|
|
background: #f3eadb;
|
|
border-radius: 18px;
|
|
padding: 14px;
|
|
font-family: ui-sans-serif, system-ui, sans-serif;
|
|
}
|
|
.system {
|
|
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 {
|
|
font-family: ui-sans-serif, system-ui, sans-serif;
|
|
font-size: 22px;
|
|
letter-spacing: -0.04em;
|
|
margin: 8px 0;
|
|
}
|
|
.typebig {
|
|
font-family: ui-sans-serif, system-ui, sans-serif;
|
|
font-size: 62px;
|
|
letter-spacing: -0.08em;
|
|
line-height: 0.86;
|
|
}
|
|
.radii {
|
|
display: flex;
|
|
gap: 9px;
|
|
align-items: end;
|
|
}
|
|
.radii div {
|
|
background: var(--sand);
|
|
border: 1px solid var(--line);
|
|
}
|
|
.r1 {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 4px;
|
|
}
|
|
.r2 {
|
|
width: 68px;
|
|
height: 68px;
|
|
border-radius: 14px;
|
|
}
|
|
.r3 {
|
|
width: 92px;
|
|
height: 92px;
|
|
border-radius: 30px;
|
|
}
|
|
.components {
|
|
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: #fbf3e5;
|
|
color: var(--muted);
|
|
font-family: ui-sans-serif, system-ui, sans-serif;
|
|
margin-top: 10px;
|
|
}
|
|
.pill {
|
|
display: inline-flex;
|
|
border-radius: 999px;
|
|
border: 1px solid var(--line);
|
|
padding: 7px 10px;
|
|
font-family: ui-sans-serif, system-ui, sans-serif;
|
|
font-size: 11px;
|
|
font-weight: 900;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.12em;
|
|
}
|
|
.principles {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 14px;
|
|
}
|
|
.principle {
|
|
background: var(--paper);
|
|
border: 1px solid var(--line);
|
|
border-radius: 24px;
|
|
padding: 20px;
|
|
}
|
|
.principle b {
|
|
font-family: ui-sans-serif, system-ui, sans-serif;
|
|
font-size: 22px;
|
|
}
|
|
@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 div:last-child {
|
|
display: none;
|
|
}
|
|
.hero-panel {
|
|
padding: 22px;
|
|
}
|
|
.system,
|
|
.components {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.phone {
|
|
height: 650px;
|
|
}
|
|
h1 {
|
|
font-size: 60px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main class="wrap">
|
|
<nav class="nav">
|
|
<div class="brand">FightRate / Minimal Performance</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-panel">
|
|
<div class="eyebrow">Direção 05 / premium minimal</div>
|
|
<h1>menos interface, mais verdade de treino.</h1>
|
|
<p class="lead">
|
|
Um app calmo e caro. Ideal se a marca quiser parecer precisa, madura
|
|
e confiável, sem parecer hospital nem dashboard corporativa.
|
|
</p>
|
|
<button class="btn">Iniciar captura</button>
|
|
<button class="btn secondary">Histórico</button>
|
|
</div>
|
|
<div class="hero-panel">
|
|
<div class="eyebrow">Regra 60 / 30 / 10</div>
|
|
<div class="tokens">
|
|
<div class="token" style="background: #fffaf0">
|
|
60% paper quente
|
|
</div>
|
|
<div class="token" style="background: #e9ddc7">30% areia</div>
|
|
<div class="token" style="background: #16130e; color: #fffaf0">
|
|
10% tinta
|
|
</div>
|
|
</div>
|
|
<p class="lead">
|
|
Vermelho e verde aparecem só como semântica, nunca como tema
|
|
inteiro.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
<section id="screens" class="section">
|
|
<h2>Telas mobile</h2>
|
|
<div class="screen-grid">
|
|
<div class="phone">
|
|
<div class="screen">
|
|
<div class="top"><span>pronto</span><span>sensor ok</span></div>
|
|
<div class="number">--<span class="unit">bpm</span></div>
|
|
<div class="rule-line"></div>
|
|
<p class="lead">
|
|
Inicie a captura antes do treino. Todo o restante pode esperar.
|
|
</p>
|
|
<div class="metrics">
|
|
<div class="metric"><b>84%</b><span>bateria</span></div>
|
|
<div class="metric"><b>-58</b><span>rssi</span></div>
|
|
<div class="metric"><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</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 96 C36 88,44 54,76 61 S116 94,145 70 S190 38,222 50 S250 78,272 54"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class="metrics">
|
|
<div class="metric"><b>146</b><span>média</span></div>
|
|
<div class="metric"><b>183</b><span>pico</span></div>
|
|
<div class="metric"><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); border-color: var(--red)"
|
|
>
|
|
Parar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="phone">
|
|
<div class="screen">
|
|
<div class="top"><span>resumo</span><span>salvo</span></div>
|
|
<div class="number">47<span class="unit">min</span></div>
|
|
<div class="list">
|
|
<div class="item">
|
|
<div>Tempo em carga<br /><span>Z4/Z5</span></div>
|
|
<b>28m</b>
|
|
</div>
|
|
<div class="item">
|
|
<div>Pico sustentado<br /><span>melhor trecho</span></div>
|
|
<b>181</b>
|
|
</div>
|
|
<div class="item">
|
|
<div>Recuperação<br /><span>estimada</span></div>
|
|
<b>18h</b>
|
|
</div>
|
|
</div>
|
|
<div class="note">
|
|
Carga alta controlada. Amanhã prefira técnica leve.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="phone">
|
|
<div class="screen">
|
|
<div class="top">
|
|
<span>histórico</span><span>4 semanas</span>
|
|
</div>
|
|
<div class="metrics">
|
|
<div class="metric"><b>11</b><span>treinos</span></div>
|
|
<div class="metric"><b>7h</b><span>total</span></div>
|
|
<div class="metric"><b>+8%</b><span>carga</span></div>
|
|
</div>
|
|
<div class="list">
|
|
<div class="item">
|
|
<div>Sparring<br /><span>Hoje · 47 min</span></div>
|
|
<b>96</b>
|
|
</div>
|
|
<div class="item">
|
|
<div>Muay Thai<br /><span>Seg · 61 min</span></div>
|
|
<b>110</b>
|
|
</div>
|
|
<div class="item">
|
|
<div>Boxe<br /><span>Sex · 42 min</span></div>
|
|
<b>77</b>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="phone">
|
|
<div class="screen">
|
|
<div class="top"><span>sensor</span><span>ble</span></div>
|
|
<div class="number">-61<span class="unit">rssi</span></div>
|
|
<div class="list">
|
|
<div class="item">
|
|
<div>Heart Rate<br /><span>2A37</span></div>
|
|
<b>notify</b>
|
|
</div>
|
|
<div class="item">
|
|
<div>Battery<br /><span>2A19</span></div>
|
|
<b>read</b>
|
|
</div>
|
|
<div class="item">
|
|
<div>Body Sensor<br /><span>2A38</span></div>
|
|
<b>read</b>
|
|
</div>
|
|
</div>
|
|
<span class="pill">perfil estável</span>
|
|
</div>
|
|
</div>
|
|
<div class="phone">
|
|
<div class="screen">
|
|
<div class="top"><span>insight</span><span>curto</span></div>
|
|
<div class="number">18h<span class="unit">rec</span></div>
|
|
<p class="lead">
|
|
Carga alta. Você passou mais tempo em intensidade de luta que na
|
|
média recente.
|
|
</p>
|
|
<div class="note">
|
|
<b>Por que importa?</b><br />Ajuda a decidir se o próximo treino
|
|
deve ser duro ou técnico.
|
|
</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>
|
|
<h3>quente, não fitness genérico</h3>
|
|
<p class="lead">
|
|
Evita verde neon, azul SaaS e gradiente artificial.
|
|
</p>
|
|
</div>
|
|
<div class="spec">
|
|
<div class="eyebrow">Tipo</div>
|
|
<div class="typebig">154</div>
|
|
<p class="lead">Números sans; títulos serifados editoriais.</p>
|
|
</div>
|
|
<div class="spec">
|
|
<div class="eyebrow">Raio</div>
|
|
<div class="radii">
|
|
<div class="r1"></div>
|
|
<div class="r2"></div>
|
|
<div class="r3"></div>
|
|
</div>
|
|
<p class="lead">Raios elegantes. Não exagerar.</p>
|
|
</div>
|
|
<div class="spec">
|
|
<div class="eyebrow">Bordas</div>
|
|
<p class="lead">
|
|
Linhas finas e quentes. Pouca sombra. Muito respiro.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="section">
|
|
<h2>Componentes</h2>
|
|
<div class="components">
|
|
<div class="component">
|
|
<div class="eyebrow">Botões</div>
|
|
<button class="btn">Primário</button
|
|
><button class="btn secondary" style="margin-top: 8px">
|
|
Secundário
|
|
</button>
|
|
</div>
|
|
<div class="component">
|
|
<div class="eyebrow">Campo</div>
|
|
<div class="field">Nome do treino</div>
|
|
<div class="field">Observação</div>
|
|
</div>
|
|
<div class="component">
|
|
<div class="eyebrow">Métrica</div>
|
|
<div class="number" style="font-size: 52px">96</div>
|
|
<span class="pill">trimp</span>
|
|
</div>
|
|
<div class="component">
|
|
<div class="eyebrow">Lista</div>
|
|
<div class="item">
|
|
<div>Sessão</div>
|
|
<b>47m</b>
|
|
</div>
|
|
<div class="item">
|
|
<div>Pico</div>
|
|
<b>181</b>
|
|
</div>
|
|
</div>
|
|
<div class="component">
|
|
<div class="eyebrow">Nota</div>
|
|
<div class="note">Texto curto. Uma conclusão por bloco.</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="section">
|
|
<h2>Princípios</h2>
|
|
<div class="principles">
|
|
<div class="principle">
|
|
<b>Silêncio visual</b>
|
|
<p class="lead">Só o dado importante grita.</p>
|
|
</div>
|
|
<div class="principle">
|
|
<b>Marca premium</b>
|
|
<p class="lead">Bom para vender seriedade e maturidade.</p>
|
|
</div>
|
|
<div class="principle">
|
|
<b>Risco</b>
|
|
<p class="lead">
|
|
Pode parecer frio demais se não houver personalidade verbal.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</body>
|
|
</html>
|