545 lines
15 KiB
HTML
545 lines
15 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 — 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>
|