733 lines
21 KiB
HTML
733 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 Direction 01 — Corner Command</title>
|
|
<style>
|
|
:root {
|
|
--bg: #090806;
|
|
--surface: #12100c;
|
|
--surface-2: #1b1710;
|
|
--ink: #fff3dd;
|
|
--muted: #b7a98e;
|
|
--line: #3a3022;
|
|
--accent: #e23b2e;
|
|
--accent-2: #ffb02e;
|
|
--ok: #31c47a;
|
|
--blue: #48a7ff;
|
|
--r-xs: 8px;
|
|
--r-sm: 13px;
|
|
--r-md: 18px;
|
|
--r-lg: 28px;
|
|
--r-xl: 38px;
|
|
--space-1: 4px;
|
|
--space-2: 8px;
|
|
--space-3: 12px;
|
|
--space-4: 16px;
|
|
--space-6: 24px;
|
|
--space-8: 32px;
|
|
--space-12: 48px;
|
|
--fast: 180ms cubic-bezier(0.2, 0.9, 0.2, 1);
|
|
--slow: 700ms cubic-bezier(0.19, 1, 0.22, 1);
|
|
}
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
background: var(--bg);
|
|
color: var(--ink);
|
|
font-family: Bahnschrift, "Arial Narrow", system-ui, sans-serif;
|
|
line-height: 1.35;
|
|
}
|
|
body:before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
background:
|
|
radial-gradient(
|
|
circle at 20% -10%,
|
|
rgba(226, 59, 46, 0.28),
|
|
transparent 32%
|
|
),
|
|
radial-gradient(
|
|
circle at 90% 12%,
|
|
rgba(255, 176, 46, 0.13),
|
|
transparent 28%
|
|
),
|
|
linear-gradient(
|
|
120deg,
|
|
rgba(255, 255, 255, 0.055) 0 1px,
|
|
transparent 1px 18px
|
|
);
|
|
opacity: 0.9;
|
|
}
|
|
.wrap {
|
|
width: min(1240px, calc(100% - 28px));
|
|
margin: auto;
|
|
padding: 34px 0 80px;
|
|
position: relative;
|
|
}
|
|
.nav {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border: 1px solid var(--line);
|
|
border-radius: 999px;
|
|
padding: 10px 12px 10px 18px;
|
|
background: rgba(18, 16, 12, 0.84);
|
|
backdrop-filter: blur(14px);
|
|
position: sticky;
|
|
top: 16px;
|
|
z-index: 2;
|
|
}
|
|
.brand {
|
|
font-weight: 1000;
|
|
letter-spacing: -0.04em;
|
|
}
|
|
.brand span {
|
|
color: var(--accent);
|
|
}
|
|
.nav a {
|
|
color: var(--muted);
|
|
text-decoration: none;
|
|
font-size: 12px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.16em;
|
|
margin-left: 18px;
|
|
}
|
|
.hero {
|
|
display: grid;
|
|
grid-template-columns: 1.08fr 0.92fr;
|
|
gap: 24px;
|
|
margin-top: 34px;
|
|
}
|
|
.panel {
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--r-xl);
|
|
background: linear-gradient(
|
|
145deg,
|
|
rgba(27, 23, 16, 0.96),
|
|
rgba(10, 9, 7, 0.98)
|
|
);
|
|
box-shadow:
|
|
0 32px 90px rgba(0, 0, 0, 0.46),
|
|
inset 0 1px rgba(255, 255, 255, 0.06);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.panel:after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent,
|
|
rgba(255, 255, 255, 0.055),
|
|
transparent
|
|
);
|
|
transform: translateX(-100%);
|
|
animation: scan 5s infinite;
|
|
}
|
|
@keyframes scan {
|
|
60%,
|
|
100% {
|
|
transform: translateX(100%);
|
|
}
|
|
}
|
|
.pad {
|
|
padding: 30px;
|
|
}
|
|
.eyebrow {
|
|
color: var(--accent-2);
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.25em;
|
|
font-weight: 900;
|
|
}
|
|
.h1 {
|
|
font-size: clamp(54px, 9vw, 118px);
|
|
line-height: 0.78;
|
|
letter-spacing: -0.09em;
|
|
margin: 18px 0;
|
|
}
|
|
.lead {
|
|
font-size: 19px;
|
|
color: var(--muted);
|
|
max-width: 720px;
|
|
}
|
|
.cta-row {
|
|
display: flex;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
margin-top: 28px;
|
|
}
|
|
.btn {
|
|
border: 0;
|
|
border-radius: 999px;
|
|
padding: 14px 18px;
|
|
font-weight: 1000;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
background: var(--accent);
|
|
color: white;
|
|
box-shadow: 0 14px 34px rgba(226, 59, 46, 0.28);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
.btn.secondary {
|
|
background: transparent;
|
|
color: var(--ink);
|
|
border: 1px solid var(--line);
|
|
}
|
|
.btn i {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.16);
|
|
font-style: normal;
|
|
}
|
|
.phone-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 18px;
|
|
margin-top: 26px;
|
|
}
|
|
.phone {
|
|
height: 560px;
|
|
border-radius: 42px;
|
|
background: #050403;
|
|
padding: 10px;
|
|
border: 1px solid #33291c;
|
|
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
|
|
}
|
|
.screen {
|
|
height: 100%;
|
|
border-radius: 34px;
|
|
background: var(--surface);
|
|
padding: 18px;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
}
|
|
.topline {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
color: var(--muted);
|
|
font-size: 10px;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
}
|
|
.mega {
|
|
font-size: 82px;
|
|
line-height: 0.85;
|
|
font-weight: 1000;
|
|
letter-spacing: -0.1em;
|
|
}
|
|
.unit {
|
|
font-size: 18px;
|
|
color: var(--muted);
|
|
letter-spacing: 0;
|
|
}
|
|
.status {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.chip {
|
|
padding: 8px 10px;
|
|
border-radius: 999px;
|
|
background: #231d14;
|
|
color: var(--accent-2);
|
|
font-size: 11px;
|
|
font-weight: 1000;
|
|
text-transform: uppercase;
|
|
}
|
|
.chart {
|
|
height: 118px;
|
|
border-radius: 22px;
|
|
background: linear-gradient(180deg, #211911, #100d09);
|
|
border: 1px solid var(--line);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.chart svg {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.chart path {
|
|
fill: none;
|
|
stroke: var(--accent);
|
|
stroke-width: 4;
|
|
stroke-linecap: round;
|
|
}
|
|
.metric-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 8px;
|
|
}
|
|
.metric {
|
|
border: 1px solid var(--line);
|
|
border-radius: 18px;
|
|
padding: 12px;
|
|
background: #16120d;
|
|
}
|
|
.metric b {
|
|
font-size: 22px;
|
|
}
|
|
.metric span {
|
|
display: block;
|
|
color: var(--muted);
|
|
font-size: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.13em;
|
|
}
|
|
.dock {
|
|
margin-top: auto;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 10px;
|
|
}
|
|
.dock .btn {
|
|
justify-content: center;
|
|
padding: 14px 10px;
|
|
font-size: 11px;
|
|
}
|
|
.stop {
|
|
background: #fff0e4;
|
|
color: #100b08;
|
|
}
|
|
.section {
|
|
margin-top: 28px;
|
|
}
|
|
.section h2 {
|
|
font-size: 42px;
|
|
letter-spacing: -0.06em;
|
|
margin: 0 0 10px;
|
|
}
|
|
.book {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 16px;
|
|
}
|
|
.spec {
|
|
border: 1px solid var(--line);
|
|
border-radius: 28px;
|
|
padding: 20px;
|
|
background: rgba(18, 16, 12, 0.78);
|
|
}
|
|
.swatches {
|
|
display: grid;
|
|
grid-template-columns: 6fr 3fr 1fr;
|
|
gap: 8px;
|
|
height: 96px;
|
|
}
|
|
.swatches div {
|
|
border-radius: 18px;
|
|
padding: 12px;
|
|
font-weight: 1000;
|
|
}
|
|
.type-sample .a {
|
|
font-size: 52px;
|
|
letter-spacing: -0.09em;
|
|
line-height: 0.84;
|
|
}
|
|
.type-sample .b {
|
|
font-size: 18px;
|
|
color: var(--muted);
|
|
}
|
|
.radii {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: end;
|
|
}
|
|
.radii div {
|
|
border: 1px solid var(--line);
|
|
background: #211a12;
|
|
}
|
|
.r1 {
|
|
width: 54px;
|
|
height: 54px;
|
|
border-radius: 8px;
|
|
}
|
|
.r2 {
|
|
width: 70px;
|
|
height: 70px;
|
|
border-radius: 18px;
|
|
}
|
|
.r3 {
|
|
width: 92px;
|
|
height: 92px;
|
|
border-radius: 32px;
|
|
}
|
|
.component-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 14px;
|
|
}
|
|
.component {
|
|
border: 1px solid var(--line);
|
|
border-radius: 24px;
|
|
background: #120f0b;
|
|
padding: 16px;
|
|
min-height: 150px;
|
|
}
|
|
.field {
|
|
border: 1px solid var(--line);
|
|
border-radius: 16px;
|
|
padding: 12px;
|
|
background: #0b0907;
|
|
color: var(--muted);
|
|
margin-top: 12px;
|
|
}
|
|
.timeline {
|
|
display: grid;
|
|
gap: 10px;
|
|
}
|
|
.event {
|
|
display: grid;
|
|
grid-template-columns: 54px 1fr;
|
|
gap: 10px;
|
|
align-items: center;
|
|
}
|
|
.time {
|
|
color: var(--accent-2);
|
|
font-weight: 1000;
|
|
}
|
|
.bar {
|
|
height: 12px;
|
|
border-radius: 999px;
|
|
background: #2b2115;
|
|
overflow: hidden;
|
|
}
|
|
.bar i {
|
|
display: block;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, var(--accent-2), var(--accent));
|
|
border-radius: 999px;
|
|
}
|
|
.rule {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 12px;
|
|
}
|
|
.rule div {
|
|
border-radius: 22px;
|
|
padding: 16px;
|
|
border: 1px solid var(--line);
|
|
}
|
|
@media (max-width: 1050px) {
|
|
.hero,
|
|
.book {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.phone-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.component-grid {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
}
|
|
@media (max-width: 620px) {
|
|
.nav {
|
|
position: relative;
|
|
top: 0;
|
|
}
|
|
.hero {
|
|
margin-top: 18px;
|
|
}
|
|
.pad {
|
|
padding: 22px;
|
|
}
|
|
.phone {
|
|
height: 640px;
|
|
}
|
|
.component-grid,
|
|
.rule {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.h1 {
|
|
font-size: 64px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main class="wrap">
|
|
<nav class="nav">
|
|
<div class="brand">Fight<span>Rate</span> / Corner Command</div>
|
|
<div>
|
|
<a href="00-index.html">Índice</a><a href="#book">Design book</a
|
|
><a href="#screens">Telas</a>
|
|
</div>
|
|
</nav>
|
|
<section class="hero">
|
|
<div class="panel pad">
|
|
<div class="eyebrow">Direção 01 / tático premium</div>
|
|
<div class="h1">mesa de córner para treino real.</div>
|
|
<p class="lead">
|
|
Visual de equipamento sério: preto fosco, couro queimado, vermelho
|
|
de corte e âmbar de sinal. O app parece uma ferramenta que fica no
|
|
canto do tatame/ringue, não uma dashboard genérica.
|
|
</p>
|
|
<div class="cta-row">
|
|
<button class="btn">Iniciar treino <i>↗</i></button
|
|
><button class="btn secondary">Ver histórico</button>
|
|
</div>
|
|
</div>
|
|
<div class="panel pad">
|
|
<div class="eyebrow">Regra 60 / 30 / 10</div>
|
|
<div class="swatches">
|
|
<div style="background: #090806; color: #fff3dd">
|
|
60% base preta
|
|
</div>
|
|
<div style="background: #1b1710; color: #fff3dd">
|
|
30% superfície couro
|
|
</div>
|
|
<div style="background: #e23b2e; color: white">10% impacto</div>
|
|
</div>
|
|
<p class="lead">
|
|
O âmbar aparece só como estado e leitura auxiliar. O vermelho é ação
|
|
crítica e intensidade.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="screens" class="section">
|
|
<h2>Exemplos de telas mobile</h2>
|
|
<p class="lead">
|
|
Seis telas para validar o padrão: início, captura ativa, fim de
|
|
treino, histórico, sensor e insight.
|
|
</p>
|
|
<div class="phone-grid">
|
|
<div class="phone">
|
|
<div class="screen">
|
|
<div class="topline">
|
|
<span>pré-treino</span><span>sensor ok</span>
|
|
</div>
|
|
<div class="mega">00<span class="unit">bpm</span></div>
|
|
<p class="lead">
|
|
Coloque a cinta, inicie a captura e deixe o celular parado.
|
|
</p>
|
|
<div class="status">
|
|
<span class="chip">H003 pronto</span
|
|
><span class="chip">bateria 84%</span>
|
|
</div>
|
|
<div class="dock">
|
|
<button class="btn">Iniciar</button
|
|
><button class="btn secondary">check-in</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="phone">
|
|
<div class="screen">
|
|
<div class="topline">
|
|
<span>captura ativa</span><span>38:12</span>
|
|
</div>
|
|
<div class="mega">148<span class="unit">bpm</span></div>
|
|
<div class="chart">
|
|
<svg viewBox="0 0 260 120">
|
|
<path
|
|
d="M8 90 C38 80,40 48,70 54 S112 95,140 66 S180 28,204 44 S232 76,252 42"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class="metric-row">
|
|
<div class="metric"><b>181</b><span>pico</span></div>
|
|
<div class="metric"><b>142</b><span>média</span></div>
|
|
<div class="metric"><b>Z4</b><span>zona</span></div>
|
|
</div>
|
|
<div class="dock">
|
|
<button class="btn stop">Parar treino</button
|
|
><button class="btn secondary">marcar evento</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="phone">
|
|
<div class="screen">
|
|
<div class="topline"><span>resumo</span><span>salvo</span></div>
|
|
<div class="mega">47<span class="unit">min</span></div>
|
|
<div class="status">
|
|
<span class="chip">carga alta</span
|
|
><span class="chip">recuperar 18h</span>
|
|
</div>
|
|
<div class="timeline">
|
|
<div class="event">
|
|
<span class="time">0-10</span>
|
|
<div class="bar"><i style="width: 42%"></i></div>
|
|
</div>
|
|
<div class="event">
|
|
<span class="time">10-30</span>
|
|
<div class="bar"><i style="width: 86%"></i></div>
|
|
</div>
|
|
<div class="event">
|
|
<span class="time">30-47</span>
|
|
<div class="bar"><i style="width: 64%"></i></div>
|
|
</div>
|
|
</div>
|
|
<div class="dock">
|
|
<button class="btn">Relatório</button
|
|
><button class="btn secondary">exportar</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="phone">
|
|
<div class="screen">
|
|
<div class="topline">
|
|
<span>histórico</span><span>junho</span>
|
|
</div>
|
|
<div class="metric-row">
|
|
<div class="metric"><b>8</b><span>treinos</span></div>
|
|
<div class="metric"><b>5h</b><span>tempo</span></div>
|
|
<div class="metric"><b>72%</b><span>carga</span></div>
|
|
</div>
|
|
<div class="timeline">
|
|
<div class="event">
|
|
<span class="time">Hoje</span>
|
|
<div>
|
|
<b>Sparring</b><br /><span style="color: var(--muted)"
|
|
>47 min · pico 181</span
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="event">
|
|
<span class="time">Ontem</span>
|
|
<div>
|
|
<b>Drill</b><br /><span style="color: var(--muted)"
|
|
>32 min · base técnica</span
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="event">
|
|
<span class="time">Seg</span>
|
|
<div>
|
|
<b>Muay Thai</b><br /><span style="color: var(--muted)"
|
|
>61 min · alta carga</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="phone">
|
|
<div class="screen">
|
|
<div class="topline"><span>sensor</span><span>ble</span></div>
|
|
<div class="mega">-61<span class="unit">rssi</span></div>
|
|
<div class="component">
|
|
<b>Heart Rate Service</b>
|
|
<div class="field">180D / 2A37 / notify</div>
|
|
<div class="field">Battery 180F / read</div>
|
|
<div class="field">Body Location 2A38</div>
|
|
</div>
|
|
<div class="dock">
|
|
<button class="btn secondary">diagnóstico</button
|
|
><button class="btn secondary">reconectar</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="phone">
|
|
<div class="screen">
|
|
<div class="topline"><span>insight</span><span>útil</span></div>
|
|
<div class="mega">Z4<span class="unit">38%</span></div>
|
|
<p class="lead">
|
|
Você sustentou intensidade de luta por tempo relevante. Bom
|
|
sinal para condicionamento específico.
|
|
</p>
|
|
<div class="component">
|
|
<b>Por que importa?</b>
|
|
<p style="color: var(--muted); margin-bottom: 0">
|
|
Ajuda a medir capacidade de manter pressão sem depender de
|
|
sensação subjetiva.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="book" class="section">
|
|
<h2>Design book</h2>
|
|
<div class="book">
|
|
<div class="spec">
|
|
<div class="eyebrow">Cores</div>
|
|
<div class="rule">
|
|
<div style="background: #090806">Base #090806<br />60%</div>
|
|
<div style="background: #1b1710">Surface #1B1710<br />30%</div>
|
|
<div style="background: #e23b2e">Accent #E23B2E<br />10%</div>
|
|
</div>
|
|
</div>
|
|
<div class="spec type-sample">
|
|
<div class="eyebrow">Tipografia</div>
|
|
<div class="a">148 BPM</div>
|
|
<div class="b">
|
|
Condensed grotesk para números. Corpo com espaçamento curto, tom
|
|
técnico e direto.
|
|
</div>
|
|
</div>
|
|
<div class="spec">
|
|
<div class="eyebrow">Raio e borda</div>
|
|
<div class="radii">
|
|
<div class="r1"></div>
|
|
<div class="r2"></div>
|
|
<div class="r3"></div>
|
|
</div>
|
|
<p>
|
|
Raio grande nas telas e painéis; raio menor só em campos técnicos.
|
|
Bordas cor de metal queimado, nunca cinza genérico.
|
|
</p>
|
|
</div>
|
|
<div class="spec">
|
|
<div class="eyebrow">Botões</div>
|
|
<button class="btn">Primário <i>↗</i></button
|
|
><button class="btn secondary" style="margin-left: 8px">
|
|
Secundário
|
|
</button>
|
|
<p>
|
|
Primário só para ação decisiva. Parar treino usa fundo claro para
|
|
contraste emergencial.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<h2>Componentes-base</h2>
|
|
<div class="component-grid">
|
|
<div class="component">
|
|
<div class="eyebrow">Status band</div>
|
|
<span class="chip">captura ativa</span
|
|
><span class="chip">sensor ok</span>
|
|
<div class="field">Usado no topo da captura.</div>
|
|
</div>
|
|
<div class="component">
|
|
<div class="eyebrow">Metric block</div>
|
|
<div class="mega" style="font-size: 54px">181</div>
|
|
<span class="chip">pico</span>
|
|
</div>
|
|
<div class="component">
|
|
<div class="eyebrow">Input</div>
|
|
<div class="field">Nome do treino</div>
|
|
<div class="field">RPE 0-10</div>
|
|
</div>
|
|
<div class="component">
|
|
<div class="eyebrow">Alert</div>
|
|
<b style="color: var(--accent-2)">Zona alta sustentada</b>
|
|
<p style="color: var(--muted)">
|
|
Use vibração curta, sem interromper o treino.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</body>
|
|
</html>
|