feat(components): ActionButton stopAlert + typography type fixes
This commit is contained in:
1 parent
2c51fd2623
commit
bbe2919c2c
89 files changed
+75993
-9961
No files matched your search
@@ -0,0 +1,544 @@
|
||||
<!doctype html>
|
||||
<html lang="pt-BR">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>FightRate — Design Directions v2</title>
|
||||
<style>
|
||||
:root {
|
||||
--paper: #f4efe5;
|
||||
--ink: #12100c;
|
||||
--muted: #70695d;
|
||||
--line: #d7cab7;
|
||||
--red: #d33b2f;
|
||||
--green: #13855d;
|
||||
--blue: #0f6cff;
|
||||
--night: #080705;
|
||||
--r: 30px;
|
||||
--shadow: 0 32px 100px rgba(18, 16, 12, 0.12);
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--paper);
|
||||
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 10% 0%,
|
||||
rgba(211, 59, 47, 0.12),
|
||||
transparent 34%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 86% 12%,
|
||||
rgba(19, 133, 93, 0.12),
|
||||
transparent 30%
|
||||
),
|
||||
linear-gradient(rgba(18, 16, 12, 0.035) 1px, transparent 1px);
|
||||
background-size:
|
||||
auto,
|
||||
auto,
|
||||
100% 36px;
|
||||
}
|
||||
.wrap {
|
||||
width: min(1240px, calc(100% - 28px));
|
||||
margin: auto;
|
||||
padding: 44px 0 86px;
|
||||
position: relative;
|
||||
}
|
||||
.hero {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 38px;
|
||||
background: rgba(255, 250, 241, 0.7);
|
||||
padding: 34px;
|
||||
box-shadow: var(--shadow);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
.eyebrow {
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.24em;
|
||||
font-weight: 950;
|
||||
color: var(--red);
|
||||
}
|
||||
h1 {
|
||||
font-family: Georgia, serif;
|
||||
font-size: clamp(54px, 10vw, 124px);
|
||||
line-height: 0.82;
|
||||
letter-spacing: -0.085em;
|
||||
margin: 18px 0 20px;
|
||||
max-width: 1080px;
|
||||
}
|
||||
p {
|
||||
color: var(--muted);
|
||||
font-size: 18px;
|
||||
max-width: 820px;
|
||||
}
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 18px;
|
||||
margin-top: 28px;
|
||||
}
|
||||
.direction {
|
||||
position: relative;
|
||||
min-height: 620px;
|
||||
border-radius: 34px;
|
||||
border: 1px solid var(--line);
|
||||
background: #fffaf1;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 24px 70px rgba(18, 16, 12, 0.08);
|
||||
}
|
||||
.direction.dark {
|
||||
background: #080705;
|
||||
color: #f7ead8;
|
||||
border-color: #30261b;
|
||||
}
|
||||
.direction.athlete {
|
||||
background: #f7fbf6;
|
||||
}
|
||||
.direction:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(255, 255, 255, 0.08),
|
||||
transparent 40%
|
||||
);
|
||||
}
|
||||
.top {
|
||||
padding: 24px;
|
||||
}
|
||||
.num {
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
font-weight: 950;
|
||||
}
|
||||
.dark .num {
|
||||
color: #b7a68a;
|
||||
}
|
||||
.direction h2 {
|
||||
font-size: 44px;
|
||||
line-height: 0.92;
|
||||
letter-spacing: -0.06em;
|
||||
margin: 10px 0 12px;
|
||||
}
|
||||
.direction p {
|
||||
font-size: 15px;
|
||||
}
|
||||
.phone {
|
||||
width: 245px;
|
||||
height: 500px;
|
||||
margin: 12px auto 0;
|
||||
border-radius: 42px;
|
||||
background: #0c0b09;
|
||||
padding: 10px;
|
||||
box-shadow: 0 26px 70px rgba(0, 0, 0, 0.24);
|
||||
transform: rotate(-2deg);
|
||||
}
|
||||
.direction:nth-child(2) .phone {
|
||||
transform: rotate(1.5deg);
|
||||
}
|
||||
.direction:nth-child(3) .phone {
|
||||
transform: rotate(-1deg);
|
||||
}
|
||||
.screen {
|
||||
height: 100%;
|
||||
border-radius: 32px;
|
||||
padding: 18px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.dark .screen {
|
||||
background: linear-gradient(180deg, #15100b, #080705);
|
||||
color: #f8ead7;
|
||||
}
|
||||
.athlete .screen {
|
||||
background: #fcfffc;
|
||||
color: #12231b;
|
||||
}
|
||||
.editorial .screen {
|
||||
background: #fff7e8;
|
||||
color: #15120d;
|
||||
}
|
||||
.status {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.16em;
|
||||
font-weight: 900;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.bpm {
|
||||
font-size: 78px;
|
||||
line-height: 0.85;
|
||||
letter-spacing: -0.1em;
|
||||
font-weight: 1000;
|
||||
margin-top: 18px;
|
||||
}
|
||||
.unit {
|
||||
font-size: 18px;
|
||||
letter-spacing: 0;
|
||||
opacity: 0.55;
|
||||
}
|
||||
.wave {
|
||||
height: 140px;
|
||||
margin-top: 18px;
|
||||
border-radius: 22px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.dark .wave {
|
||||
background: #21170f;
|
||||
border: 1px solid #3b2b1e;
|
||||
}
|
||||
.athlete .wave {
|
||||
background: #edf7f0;
|
||||
border: 1px solid #d7e4dc;
|
||||
}
|
||||
.editorial .wave {
|
||||
background: #f2e3cb;
|
||||
border: 1px solid #decdb4;
|
||||
}
|
||||
.wave svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.wave path {
|
||||
fill: none;
|
||||
stroke: currentColor;
|
||||
stroke-width: 4;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
.chips {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 8px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
.chip {
|
||||
border-radius: 16px;
|
||||
padding: 10px 8px;
|
||||
font-size: 10px;
|
||||
font-weight: 950;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
text-align: center;
|
||||
}
|
||||
.dark .chip {
|
||||
background: #24190f;
|
||||
color: #ffbd49;
|
||||
}
|
||||
.athlete .chip {
|
||||
background: #e7f5ed;
|
||||
color: #08734c;
|
||||
}
|
||||
.editorial .chip {
|
||||
background: #eadbc2;
|
||||
color: #15120d;
|
||||
}
|
||||
.cta {
|
||||
position: absolute;
|
||||
left: 24px;
|
||||
right: 24px;
|
||||
bottom: 22px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
.cta a {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
border-radius: 999px;
|
||||
padding: 13px 12px;
|
||||
font-weight: 950;
|
||||
color: inherit;
|
||||
border: 1px solid currentColor;
|
||||
}
|
||||
.cta a.primary {
|
||||
background: var(--ink);
|
||||
color: var(--paper);
|
||||
border-color: var(--ink);
|
||||
}
|
||||
.dark .cta a.primary {
|
||||
background: #e23b2e;
|
||||
border-color: #e23b2e;
|
||||
color: white;
|
||||
}
|
||||
.athlete .cta a.primary {
|
||||
background: #13855d;
|
||||
border-color: #13855d;
|
||||
color: white;
|
||||
}
|
||||
.matrix {
|
||||
margin-top: 32px;
|
||||
display: grid;
|
||||
grid-template-columns: 1.25fr repeat(3, 1fr);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 28px;
|
||||
overflow: hidden;
|
||||
background: #fffaf1;
|
||||
}
|
||||
.matrix div {
|
||||
padding: 16px;
|
||||
border-right: 1px solid var(--line);
|
||||
border-bottom: 1px solid var(--line);
|
||||
font-size: 14px;
|
||||
}
|
||||
.matrix div:nth-child(4n) {
|
||||
border-right: 0;
|
||||
}
|
||||
.matrix .head {
|
||||
font-weight: 950;
|
||||
background: #fff;
|
||||
}
|
||||
.recommend {
|
||||
margin-top: 26px;
|
||||
display: grid;
|
||||
grid-template-columns: 1.1fr 0.9fr;
|
||||
gap: 18px;
|
||||
}
|
||||
.note {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 28px;
|
||||
background: #fffaf1;
|
||||
padding: 22px;
|
||||
box-shadow: 0 18px 50px rgba(18, 16, 12, 0.06);
|
||||
}
|
||||
.note b {
|
||||
display: block;
|
||||
font-size: 22px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.note ul {
|
||||
margin: 0;
|
||||
padding-left: 20px;
|
||||
color: var(--muted);
|
||||
}
|
||||
@media (max-width: 1040px) {
|
||||
.grid,
|
||||
.recommend {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.direction {
|
||||
min-height: 650px;
|
||||
}
|
||||
.matrix {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.matrix div {
|
||||
border-right: 0;
|
||||
}
|
||||
.phone {
|
||||
width: 270px;
|
||||
height: 540px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 620px) {
|
||||
.wrap {
|
||||
padding-top: 20px;
|
||||
}
|
||||
.hero {
|
||||
padding: 22px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 56px;
|
||||
}
|
||||
.direction h2 {
|
||||
font-size: 38px;
|
||||
}
|
||||
.phone {
|
||||
width: 250px;
|
||||
height: 520px;
|
||||
}
|
||||
.cta {
|
||||
position: static;
|
||||
margin: 20px 24px 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="wrap">
|
||||
<section class="hero">
|
||||
<div class="eyebrow">FightRate / React Native design directions v2</div>
|
||||
<h1>Três caminhos fortes. Não cinco ideias fracas.</h1>
|
||||
<p>
|
||||
Esta versão substitui os exemplos anteriores. Cada direção agora é
|
||||
pensada como base real de marca e design system para um app React
|
||||
Native: captura contínua, histórico, sensor BLE e relatório
|
||||
pós-treino.
|
||||
</p>
|
||||
</section>
|
||||
<section class="grid">
|
||||
<article class="direction dark">
|
||||
<div class="top">
|
||||
<div class="num">01 / recomendado para treino</div>
|
||||
<h2>Corner Instrument</h2>
|
||||
<p>
|
||||
Equipamento de córner: escuro, intenso, legível, com cara de
|
||||
ferramenta física. Melhor para a tela de captura ao vivo.
|
||||
</p>
|
||||
</div>
|
||||
<div class="phone">
|
||||
<div class="screen">
|
||||
<div class="status">
|
||||
<span>captura ativa</span><span>42:18</span>
|
||||
</div>
|
||||
<div class="bpm">154<span class="unit">bpm</span></div>
|
||||
<div class="wave">
|
||||
<svg viewBox="0 0 280 140">
|
||||
<path
|
||||
d="M8 98 C36 82,44 48,78 58 S120 102,150 70 S190 26,222 52 S250 88,272 48"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="chips">
|
||||
<span class="chip">Méd 146</span
|
||||
><span class="chip">Pico 183</span
|
||||
><span class="chip">Z4 41%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cta">
|
||||
<a class="primary" href="01-corner-instrument-v2.html"
|
||||
>Abrir direção</a
|
||||
>
|
||||
</div>
|
||||
</article>
|
||||
<article class="direction athlete">
|
||||
<div class="top">
|
||||
<div class="num">02 / recomendado para app base</div>
|
||||
<h2>Athlete OS</h2>
|
||||
<p>
|
||||
Sistema operacional do atleta: científico sem ser hospitalar,
|
||||
excelente para histórico, relatórios e confiança nos dados.
|
||||
</p>
|
||||
</div>
|
||||
<div class="phone">
|
||||
<div class="screen">
|
||||
<div class="status"><span>relatório</span><span>salvo</span></div>
|
||||
<div class="bpm">96<span class="unit">trimp</span></div>
|
||||
<div class="wave">
|
||||
<svg viewBox="0 0 280 140">
|
||||
<path
|
||||
d="M8 100 C52 92,62 70,92 75 S134 106,162 72 S204 42,236 56 S256 76,272 54"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="chips">
|
||||
<span class="chip">28m carga</span
|
||||
><span class="chip">18h rec</span><span class="chip">Alta</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cta">
|
||||
<a class="primary" href="02-athlete-os-v2.html">Abrir direção</a>
|
||||
</div>
|
||||
</article>
|
||||
<article class="direction editorial">
|
||||
<div class="top">
|
||||
<div class="num">03 / recomendado para marca</div>
|
||||
<h2>Combat Editorial</h2>
|
||||
<p>
|
||||
Marca premium e editorial: minimalista, madura e memorável. Melhor
|
||||
para identidade pública e experiência pós-treino.
|
||||
</p>
|
||||
</div>
|
||||
<div class="phone">
|
||||
<div class="screen">
|
||||
<div class="status">
|
||||
<span>semana</span><span>4 treinos</span>
|
||||
</div>
|
||||
<div class="bpm">+8<span class="unit">%</span></div>
|
||||
<div class="wave">
|
||||
<svg viewBox="0 0 280 140">
|
||||
<path
|
||||
d="M8 96 L42 80 L74 92 L116 58 L150 70 L190 42 L230 62 L272 50"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="chips">
|
||||
<span class="chip">Carga</span><span class="chip">Evolução</span
|
||||
><span class="chip">Risco baixo</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cta">
|
||||
<a class="primary" href="03-combat-editorial-v2.html"
|
||||
>Abrir direção</a
|
||||
>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
<section class="matrix">
|
||||
<div class="head">Critério</div>
|
||||
<div class="head">Corner Instrument</div>
|
||||
<div class="head">Athlete OS</div>
|
||||
<div class="head">Combat Editorial</div>
|
||||
<div>Melhor uso</div>
|
||||
<div>Captura ao vivo</div>
|
||||
<div>App inteiro / relatório</div>
|
||||
<div>Marca / histórico premium</div>
|
||||
<div>Energia</div>
|
||||
<div>Alta</div>
|
||||
<div>Média controlada</div>
|
||||
<div>Baixa e sofisticada</div>
|
||||
<div>Dados densos</div>
|
||||
<div>Bom</div>
|
||||
<div>Excelente</div>
|
||||
<div>Bom</div>
|
||||
<div>React Native</div>
|
||||
<div>Viável</div>
|
||||
<div>Muito viável</div>
|
||||
<div>Muito viável</div>
|
||||
<div>Risco</div>
|
||||
<div>Ficar escuro demais</div>
|
||||
<div>Ficar clínico demais</div>
|
||||
<div>Ficar frio demais</div>
|
||||
</section>
|
||||
<section class="recommend">
|
||||
<div class="note">
|
||||
<b>Minha recomendação agora</b>
|
||||
<ul>
|
||||
<li>Base do app: <b>Athlete OS</b>.</li>
|
||||
<li>Tela de captura: <b>Corner Instrument</b>.</li>
|
||||
<li>
|
||||
Identidade pública/relatórios compartilháveis: elementos de
|
||||
<b>Combat Editorial</b>.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="note">
|
||||
<b>Próxima decisão</b>
|
||||
<p>
|
||||
Escolher se o app deve parecer mais “equipamento de treino” ou
|
||||
“sistema científico do atleta”. Depois disso eu crio o DESIGN.md
|
||||
final e só então começa o Expo/React Native.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
+831
@@ -0,0 +1,831 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,726 @@
|
||||
<!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>
|
||||
+736
@@ -0,0 +1,736 @@
|
||||
<!doctype html>
|
||||
<html lang="pt-BR">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>FightRate v2 — Combat Editorial</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #efe5d5;
|
||||
--paper: #fff7e8;
|
||||
--ink: #15110c;
|
||||
--muted: #746a5d;
|
||||
--line: #d8c6aa;
|
||||
--black: #080705;
|
||||
--red: #c93a2e;
|
||||
--gold: #bd7a17;
|
||||
--olive: #66724e;
|
||||
--r1: 6px;
|
||||
--r2: 14px;
|
||||
--r3: 24px;
|
||||
--r4: 34px;
|
||||
--shadow: 0 32px 90px rgba(21, 17, 12, 0.12);
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--bg);
|
||||
color: var(--ink);
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
line-height: 1.42;
|
||||
}
|
||||
body:before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background:
|
||||
radial-gradient(
|
||||
circle at 8% 0%,
|
||||
rgba(201, 58, 46, 0.13),
|
||||
transparent 34%
|
||||
),
|
||||
linear-gradient(rgba(21, 17, 12, 0.04) 1px, transparent 1px);
|
||||
background-size:
|
||||
auto,
|
||||
100% 38px;
|
||||
}
|
||||
.wrap {
|
||||
width: min(1260px, calc(100% - 28px));
|
||||
margin: auto;
|
||||
padding: 30px 0 90px;
|
||||
position: relative;
|
||||
}
|
||||
.nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--line);
|
||||
padding: 18px 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: rgba(239, 229, 213, 0.86);
|
||||
backdrop-filter: blur(14px);
|
||||
z-index: 3;
|
||||
}
|
||||
.brand {
|
||||
font-family: ui-sans-serif, system-ui, sans-serif;
|
||||
font-weight: 950;
|
||||
letter-spacing: -0.045em;
|
||||
}
|
||||
.nav a {
|
||||
font-family: ui-sans-serif, system-ui, sans-serif;
|
||||
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: 1.1fr 0.9fr;
|
||||
gap: 18px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.editorial {
|
||||
background: rgba(255, 247, 232, 0.74);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 34px;
|
||||
padding: 34px;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
.eyebrow {
|
||||
font-family: ui-sans-serif, system-ui, sans-serif;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.24em;
|
||||
text-transform: uppercase;
|
||||
color: var(--red);
|
||||
font-weight: 950;
|
||||
}
|
||||
.title {
|
||||
font-size: clamp(58px, 10vw, 130px);
|
||||
line-height: 0.78;
|
||||
letter-spacing: -0.085em;
|
||||
margin: 18px 0 20px;
|
||||
}
|
||||
.lead {
|
||||
font-family: ui-sans-serif, system-ui, sans-serif;
|
||||
color: var(--muted);
|
||||
font-size: 18px;
|
||||
max-width: 790px;
|
||||
}
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 26px;
|
||||
}
|
||||
.btn {
|
||||
border: 1px solid var(--black);
|
||||
border-radius: 999px;
|
||||
background: var(--black);
|
||||
color: var(--paper);
|
||||
padding: 14px 18px;
|
||||
font-family: ui-sans-serif, system-ui, sans-serif;
|
||||
font-weight: 950;
|
||||
}
|
||||
.btn.secondary {
|
||||
background: transparent;
|
||||
color: var(--ink);
|
||||
}
|
||||
.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-family: ui-sans-serif, system-ui, sans-serif;
|
||||
font-weight: 950;
|
||||
}
|
||||
.section {
|
||||
margin-top: 32px;
|
||||
}
|
||||
.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: 44px;
|
||||
background: #111;
|
||||
padding: 10px;
|
||||
box-shadow: 0 30px 90px rgba(21, 17, 12, 0.22);
|
||||
}
|
||||
.screen {
|
||||
height: 100%;
|
||||
border-radius: 34px;
|
||||
background: var(--paper);
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.topline {
|
||||
font-family: ui-sans-serif, system-ui, sans-serif;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: var(--muted);
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.15em;
|
||||
font-weight: 950;
|
||||
}
|
||||
.display {
|
||||
font-family: ui-sans-serif, system-ui, sans-serif;
|
||||
font-size: 80px;
|
||||
line-height: 0.84;
|
||||
letter-spacing: -0.1em;
|
||||
font-weight: 1000;
|
||||
}
|
||||
.unit {
|
||||
font-size: 18px;
|
||||
letter-spacing: 0;
|
||||
color: var(--muted);
|
||||
}
|
||||
.rule {
|
||||
height: 1px;
|
||||
background: var(--ink);
|
||||
opacity: 0.22;
|
||||
}
|
||||
.chart {
|
||||
height: 140px;
|
||||
border-bottom: 2px solid var(--ink);
|
||||
position: relative;
|
||||
}
|
||||
.chart:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 28px;
|
||||
height: 1px;
|
||||
background: var(--line);
|
||||
box-shadow:
|
||||
0 28px 0 var(--line),
|
||||
0 56px 0 var(--line);
|
||||
}
|
||||
.chart svg {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.chart path {
|
||||
fill: none;
|
||||
stroke: var(--ink);
|
||||
stroke-width: 3.5;
|
||||
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;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
color: var(--muted);
|
||||
font-weight: 950;
|
||||
}
|
||||
.dock {
|
||||
margin-top: auto;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
.dock .btn {
|
||||
padding: 14px 8px;
|
||||
}
|
||||
.list {
|
||||
display: grid;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
.item {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: 12px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
padding: 14px 0;
|
||||
font-family: ui-sans-serif, system-ui, sans-serif;
|
||||
}
|
||||
.item small {
|
||||
display: block;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
.note {
|
||||
background: #f1e4cf;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 22px;
|
||||
padding: 14px;
|
||||
font-family: ui-sans-serif, system-ui, sans-serif;
|
||||
}
|
||||
.pill {
|
||||
display: inline-flex;
|
||||
width: max-content;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--line);
|
||||
padding: 7px 10px;
|
||||
font-family: ui-sans-serif, system-ui, sans-serif;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 950;
|
||||
}
|
||||
.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-family: ui-sans-serif, system-ui, sans-serif;
|
||||
font-size: 26px;
|
||||
letter-spacing: -0.045em;
|
||||
margin: 8px 0;
|
||||
}
|
||||
.type-demo {
|
||||
font-family: ui-sans-serif, system-ui, sans-serif;
|
||||
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: #eadcc5;
|
||||
border: 1px solid var(--line);
|
||||
}
|
||||
.ra {
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.rb {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
.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 {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 16px;
|
||||
padding: 12px;
|
||||
background: #fbf0dc;
|
||||
color: var(--muted);
|
||||
font-family: ui-sans-serif, system-ui, sans-serif;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.principles {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 14px;
|
||||
}
|
||||
.principle {
|
||||
background: var(--paper);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 28px;
|
||||
padding: 20px;
|
||||
}
|
||||
.principle b {
|
||||
font-family: ui-sans-serif, system-ui, sans-serif;
|
||||
font-size: 22px;
|
||||
}
|
||||
.share-card {
|
||||
border-radius: 28px;
|
||||
background: var(--black);
|
||||
color: var(--paper);
|
||||
padding: 18px;
|
||||
min-height: 220px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.share-card .display {
|
||||
font-size: 58px;
|
||||
}
|
||||
.share-card .lead {
|
||||
color: #bea98c;
|
||||
font-size: 14px;
|
||||
}
|
||||
@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;
|
||||
}
|
||||
.nav div:last-child {
|
||||
display: none;
|
||||
}
|
||||
.editorial {
|
||||
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 / Combat Editorial</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="editorial">
|
||||
<div class="eyebrow">Direção 03 / marca premium</div>
|
||||
<div class="title">
|
||||
relatório de treino como editorial de performance.
|
||||
</div>
|
||||
<p class="lead">
|
||||
Essa direção deixa o FightRate com cara de marca madura: menos neon,
|
||||
menos dashboard, mais publicação premium de dados pessoais. Ideal
|
||||
para histórico, relatório e compartilhamento.
|
||||
</p>
|
||||
<div class="actions">
|
||||
<button class="btn">Ver semana</button
|
||||
><button class="btn secondary">Abrir captura</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="editorial">
|
||||
<div class="eyebrow">Tokens de marca</div>
|
||||
<div class="token-strip">
|
||||
<div class="token" style="background: #fff7e8">
|
||||
60% papel quente
|
||||
</div>
|
||||
<div class="token" style="background: #e8d8bd">
|
||||
30% areia editorial
|
||||
</div>
|
||||
<div class="token" style="background: #15110c; color: #fff7e8">
|
||||
10% tinta
|
||||
</div>
|
||||
</div>
|
||||
<p class="lead">
|
||||
Vermelho é assinatura e alerta. Dourado é conquista. A interface não
|
||||
precisa gritar para parecer forte.
|
||||
</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>captura pronta</span><span>h003</span>
|
||||
</div>
|
||||
<div class="display">--<span class="unit">bpm</span></div>
|
||||
<div class="rule"></div>
|
||||
<p class="lead">
|
||||
Comece antes do treino. O app some; o dado fica.
|
||||
</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>drops</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>ao vivo</span><span>42:18</span></div>
|
||||
<div class="display">154<span class="unit">bpm</span></div>
|
||||
<div class="chart">
|
||||
<svg viewBox="0 0 280 140">
|
||||
<path
|
||||
d="M8 98 C42 88,52 62,82 68 S122 98,154 74 S204 44,232 58 S254 76,274 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="device">
|
||||
<div class="screen">
|
||||
<div class="topline">
|
||||
<span>relatório</span><span>salvo</span>
|
||||
</div>
|
||||
<div class="display">47<span class="unit">min</span></div>
|
||||
<div class="list">
|
||||
<div class="item">
|
||||
<div>Tempo em carga<small>Z4/Z5</small></div>
|
||||
<b>28m</b>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div>Pico sustentado<small>melhor bloco</small></div>
|
||||
<b>181</b>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div>Recuperação<small>estimativa</small></div>
|
||||
<b>18h</b>
|
||||
</div>
|
||||
</div>
|
||||
<div class="note">
|
||||
Carga alta, mas sinal limpo. Bom treino para avaliar pressão
|
||||
sustentada.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="device">
|
||||
<div class="screen">
|
||||
<div class="topline">
|
||||
<span>histórico</span><span>junho</span>
|
||||
</div>
|
||||
<div class="display">+8<span class="unit">%</span></div>
|
||||
<div class="metrics">
|
||||
<div class="metric"><b>11</b><span>treinos</span></div>
|
||||
<div class="metric"><b>7h</b><span>tempo</span></div>
|
||||
<div class="metric"><b>3</b><span>picos</span></div>
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="item">
|
||||
<div>Sparring<small>hoje · 47 min</small></div>
|
||||
<b>96</b>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div>Muay Thai<small>seg · 61 min</small></div>
|
||||
<b>110</b>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div>Boxe<small>sex · 42 min</small></div>
|
||||
<b>77</b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="device">
|
||||
<div class="screen">
|
||||
<div class="topline"><span>sensor</span><span>ble</span></div>
|
||||
<div class="display">-61<span class="unit">rssi</span></div>
|
||||
<div class="list">
|
||||
<div class="item">
|
||||
<div>Heart Rate<small>2A37</small></div>
|
||||
<b>notify</b>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div>Battery<small>2A19</small></div>
|
||||
<b>read</b>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div>Body Sensor<small>2A38</small></div>
|
||||
<b>read</b>
|
||||
</div>
|
||||
</div>
|
||||
<span class="pill">perfil estável</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="device">
|
||||
<div class="screen">
|
||||
<div class="topline">
|
||||
<span>share</span><span>fight report</span>
|
||||
</div>
|
||||
<div class="share-card">
|
||||
<div>
|
||||
<div class="display">181</div>
|
||||
<p class="lead">
|
||||
pico do treino · 47 min · carga alta controlada
|
||||
</p>
|
||||
</div>
|
||||
<span class="pill">FightRate Report</span>
|
||||
</div>
|
||||
<p class="lead">
|
||||
Essa direção funciona muito bem para cards compartilháveis e
|
||||
marca.
|
||||
</p>
|
||||
</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>Papel, tinta, assinatura</h3>
|
||||
<p class="lead">
|
||||
Mais editorial que aplicativo fitness. Reduz ruído e aumenta valor
|
||||
percebido.
|
||||
</p>
|
||||
<div class="token-strip">
|
||||
<div class="token" style="background: #fff7e8">paper</div>
|
||||
<div class="token" style="background: #e8d8bd">sand</div>
|
||||
<div class="token" style="background: #15110c; color: #fff7e8">
|
||||
ink
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spec">
|
||||
<div class="eyebrow">Tipo</div>
|
||||
<h3>Display contido</h3>
|
||||
<div class="type-demo">+8</div>
|
||||
<p class="lead">
|
||||
Serif para títulos da marca; sans pesada para números. Contraste
|
||||
sem carnaval.
|
||||
</p>
|
||||
</div>
|
||||
<div class="spec">
|
||||
<div class="eyebrow">Forma</div>
|
||||
<h3>Premium sem espuma</h3>
|
||||
<div class="radii">
|
||||
<i class="ra"></i><i class="rb"></i><i class="rc"></i>
|
||||
</div>
|
||||
<p class="lead">
|
||||
Raios limpos. Linhas finas. Poucas sombras. Muita intenção.
|
||||
</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="metric"><b>183</b><span>pico</span></div>
|
||||
</div>
|
||||
<div class="component">
|
||||
<div class="eyebrow">Field</div>
|
||||
<div class="field">Nome do treino</div>
|
||||
<div class="field">Observação</div>
|
||||
</div>
|
||||
<div class="component">
|
||||
<div class="eyebrow">List row</div>
|
||||
<div class="item">
|
||||
<div>Sessão<small>47 min</small></div>
|
||||
<b>96</b>
|
||||
</div>
|
||||
</div>
|
||||
<div class="component">
|
||||
<div class="eyebrow">Insight</div>
|
||||
<div class="note">Uma conclusão. Uma explicação. Uma ação.</div>
|
||||
</div>
|
||||
<div class="component">
|
||||
<div class="eyebrow">Share card</div>
|
||||
<div class="share-card" style="min-height: 130px">
|
||||
<div class="display" style="font-size: 42px">181</div>
|
||||
<span class="pill">pico</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section">
|
||||
<h2>Princípios</h2>
|
||||
<div class="principles">
|
||||
<div class="principle">
|
||||
<b>Pouco, mas pesado</b>
|
||||
<p class="lead">Cada elemento precisa merecer espaço.</p>
|
||||
</div>
|
||||
<div class="principle">
|
||||
<b>Marca antes de interface</b>
|
||||
<p class="lead">
|
||||
Ideal para transformar FightRate em produto reconhecível.
|
||||
</p>
|
||||
</div>
|
||||
<div class="principle">
|
||||
<b>Captura simples</b>
|
||||
<p class="lead">
|
||||
Pode usar Corner Instrument na captura para mais energia.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,38 @@
|
||||
# FightRate React Native Redesign — v2
|
||||
|
||||
Status: **direção escolhida**
|
||||
|
||||
A direção oficial para seguir é:
|
||||
|
||||
```text
|
||||
01 — Corner Instrument
|
||||
```
|
||||
|
||||
Arquivo visual de referência:
|
||||
|
||||
```text
|
||||
01-corner-instrument-v2.html
|
||||
```
|
||||
|
||||
Design system canônico:
|
||||
|
||||
```text
|
||||
../../../../FIGHTRATE_DESIGN_SYSTEM.md
|
||||
```
|
||||
|
||||
## Decisão
|
||||
|
||||
Vamos seguir com o FightRate como **equipamento de córner / instrumento de captura**.
|
||||
|
||||
A experiência deve ser escura, forte, legível e direta. O app não deve parecer dashboard genérico, SaaS, app fitness comum ou coleção de cards.
|
||||
|
||||
## Direções não escolhidas
|
||||
|
||||
- `02-athlete-os-v2.html` fica apenas como referência de clareza de dados.
|
||||
- `03-combat-editorial-v2.html` fica apenas como referência futura para relatórios compartilháveis.
|
||||
|
||||
Nenhuma dessas duas é base visual principal neste momento.
|
||||
|
||||
## Próxima fase
|
||||
|
||||
Antes de codar React Native, usar `FIGHTRATE_DESIGN_SYSTEM.md` como contrato visual e transformar os tokens em tema Expo/React Native.
|
||||
Reference in new issue
Block a user