737 lines
21 KiB
HTML
737 lines
21 KiB
HTML
<!doctype html>
|
|
<html lang="pt-BR">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>FightRate v2 — 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>
|