696 lines
20 KiB
HTML
696 lines
20 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 03 — Fight Night</title>
|
|
<style>
|
|
:root {
|
|
--bg: #120209;
|
|
--ink: #fff4f6;
|
|
--muted: #be9aa4;
|
|
--panel: #210712;
|
|
--panel2: #310b19;
|
|
--line: #5b1c2d;
|
|
--pink: #ff3156;
|
|
--gold: #ffc14a;
|
|
--violet: #6c4dff;
|
|
--r-sm: 6px;
|
|
--r-md: 12px;
|
|
--r-lg: 20px;
|
|
--r-xl: 32px;
|
|
--shadow: 0 34px 90px rgba(0, 0, 0, 0.48);
|
|
}
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
background: var(--bg);
|
|
color: var(--ink);
|
|
font-family: Impact, "Arial Black", system-ui, sans-serif;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
body:before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
background:
|
|
radial-gradient(
|
|
circle at 18% 10%,
|
|
rgba(255, 49, 86, 0.36),
|
|
transparent 28%
|
|
),
|
|
radial-gradient(
|
|
circle at 80% 8%,
|
|
rgba(108, 77, 255, 0.28),
|
|
transparent 30%
|
|
),
|
|
linear-gradient(
|
|
135deg,
|
|
rgba(255, 255, 255, 0.05) 0 1px,
|
|
transparent 1px 22px
|
|
);
|
|
}
|
|
.wrap {
|
|
width: min(1240px, calc(100% - 28px));
|
|
margin: auto;
|
|
padding: 34px 0 90px;
|
|
position: relative;
|
|
}
|
|
.nav {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border: 1px solid var(--line);
|
|
background: rgba(18, 2, 9, 0.72);
|
|
border-radius: 999px;
|
|
padding: 10px 16px;
|
|
backdrop-filter: blur(14px);
|
|
position: sticky;
|
|
top: 14px;
|
|
z-index: 4;
|
|
}
|
|
.nav a {
|
|
color: var(--muted);
|
|
text-decoration: none;
|
|
margin-left: 16px;
|
|
font-family: ui-sans-serif, system-ui, sans-serif;
|
|
font-size: 12px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.18em;
|
|
}
|
|
.brand {
|
|
font-size: 22px;
|
|
}
|
|
.hero {
|
|
margin-top: 26px;
|
|
display: grid;
|
|
grid-template-columns: 1.1fr 0.9fr;
|
|
gap: 18px;
|
|
}
|
|
.poster {
|
|
background: linear-gradient(145deg, #270814, #120209);
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--r-xl);
|
|
padding: 34px;
|
|
box-shadow: var(--shadow);
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
.poster:before {
|
|
content: "FIGHTRATE";
|
|
position: absolute;
|
|
font-size: 170px;
|
|
line-height: 0.7;
|
|
letter-spacing: -0.12em;
|
|
color: rgba(255, 255, 255, 0.035);
|
|
left: -18px;
|
|
top: 18px;
|
|
}
|
|
.eyebrow {
|
|
position: relative;
|
|
font-family: ui-sans-serif, system-ui, sans-serif;
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.24em;
|
|
color: var(--gold);
|
|
font-weight: 900;
|
|
}
|
|
h1 {
|
|
position: relative;
|
|
font-size: clamp(62px, 12vw, 150px);
|
|
line-height: 0.72;
|
|
letter-spacing: -0.08em;
|
|
margin: 18px 0;
|
|
text-transform: uppercase;
|
|
}
|
|
.lead {
|
|
position: relative;
|
|
font-family: ui-sans-serif, system-ui, sans-serif;
|
|
font-size: 18px;
|
|
line-height: 1.45;
|
|
color: var(--muted);
|
|
max-width: 720px;
|
|
letter-spacing: 0;
|
|
}
|
|
.btn {
|
|
border: 0;
|
|
border-radius: 10px;
|
|
background: var(--pink);
|
|
color: white;
|
|
font-weight: 1000;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
padding: 15px 18px;
|
|
box-shadow: 0 20px 46px rgba(255, 49, 86, 0.32);
|
|
}
|
|
.btn.secondary {
|
|
background: transparent;
|
|
border: 1px solid var(--line);
|
|
color: var(--ink);
|
|
box-shadow: none;
|
|
}
|
|
.tokens {
|
|
display: grid;
|
|
grid-template-columns: 6fr 3fr 1fr;
|
|
gap: 8px;
|
|
margin-top: 24px;
|
|
}
|
|
.token {
|
|
border-radius: 12px;
|
|
padding: 16px;
|
|
min-height: 112px;
|
|
font-family: ui-sans-serif, system-ui, sans-serif;
|
|
font-weight: 900;
|
|
}
|
|
.section {
|
|
margin-top: 30px;
|
|
}
|
|
h2 {
|
|
font-size: 52px;
|
|
line-height: 0.82;
|
|
letter-spacing: -0.07em;
|
|
margin: 0 0 14px;
|
|
text-transform: uppercase;
|
|
}
|
|
.screen-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 18px;
|
|
}
|
|
.phone {
|
|
height: 590px;
|
|
background: #050104;
|
|
border-radius: 40px;
|
|
padding: 10px;
|
|
border: 1px solid #681b30;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.screen {
|
|
height: 100%;
|
|
border-radius: 30px;
|
|
background: linear-gradient(180deg, #240713, #13030a);
|
|
padding: 18px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 13px;
|
|
overflow: hidden;
|
|
}
|
|
.top {
|
|
font-family: ui-sans-serif, system-ui, sans-serif;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
color: var(--muted);
|
|
font-size: 10px;
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
}
|
|
.score {
|
|
font-size: 84px;
|
|
line-height: 0.74;
|
|
letter-spacing: -0.08em;
|
|
}
|
|
.unit {
|
|
font-family: ui-sans-serif, system-ui, sans-serif;
|
|
font-size: 16px;
|
|
color: var(--muted);
|
|
letter-spacing: 0;
|
|
}
|
|
.belt {
|
|
display: flex;
|
|
gap: 6px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.belt span {
|
|
font-family: ui-sans-serif, system-ui, sans-serif;
|
|
background: #3b0d1d;
|
|
color: #ffb8c3;
|
|
border: 1px solid var(--line);
|
|
border-radius: 999px;
|
|
padding: 7px 9px;
|
|
font-size: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.12em;
|
|
font-weight: 900;
|
|
}
|
|
.chart {
|
|
height: 125px;
|
|
background: #16030b;
|
|
border: 1px solid var(--line);
|
|
border-radius: 18px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.chart:before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background: repeating-linear-gradient(
|
|
90deg,
|
|
transparent 0 18px,
|
|
rgba(255, 255, 255, 0.04) 18px 19px
|
|
);
|
|
}
|
|
.chart svg {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.chart path {
|
|
fill: none;
|
|
stroke: var(--pink);
|
|
stroke-width: 5;
|
|
stroke-linecap: round;
|
|
filter: drop-shadow(0 0 12px rgba(255, 49, 86, 0.9));
|
|
}
|
|
.stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 8px;
|
|
}
|
|
.stat {
|
|
border: 1px solid var(--line);
|
|
background: #1b0610;
|
|
border-radius: 14px;
|
|
padding: 11px;
|
|
font-family: ui-sans-serif, system-ui, sans-serif;
|
|
}
|
|
.stat b {
|
|
display: block;
|
|
font-size: 22px;
|
|
}
|
|
.stat span {
|
|
font-size: 10px;
|
|
color: var(--muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.12em;
|
|
}
|
|
.dock {
|
|
margin-top: auto;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 8px;
|
|
}
|
|
.dock .btn {
|
|
padding: 13px 6px;
|
|
font-size: 11px;
|
|
}
|
|
.system {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 14px;
|
|
}
|
|
.spec {
|
|
background: var(--panel);
|
|
border: 1px solid var(--line);
|
|
border-radius: 22px;
|
|
padding: 18px;
|
|
}
|
|
.spec h3 {
|
|
font-size: 28px;
|
|
line-height: 0.9;
|
|
margin: 8px 0;
|
|
text-transform: uppercase;
|
|
}
|
|
.type-big {
|
|
font-size: 68px;
|
|
line-height: 0.75;
|
|
}
|
|
.radii {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: end;
|
|
}
|
|
.radii div {
|
|
background: #360b1a;
|
|
border: 1px solid var(--line);
|
|
}
|
|
.r1 {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 6px;
|
|
}
|
|
.r2 {
|
|
width: 68px;
|
|
height: 68px;
|
|
border-radius: 12px;
|
|
}
|
|
.r3 {
|
|
width: 92px;
|
|
height: 92px;
|
|
border-radius: 20px;
|
|
}
|
|
.components {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
gap: 12px;
|
|
}
|
|
.component {
|
|
background: var(--panel);
|
|
border: 1px solid var(--line);
|
|
border-radius: 20px;
|
|
padding: 14px;
|
|
min-height: 156px;
|
|
}
|
|
.field {
|
|
font-family: ui-sans-serif, system-ui, sans-serif;
|
|
background: #13030a;
|
|
border: 1px solid var(--line);
|
|
border-radius: 12px;
|
|
padding: 12px;
|
|
color: var(--muted);
|
|
margin-top: 10px;
|
|
}
|
|
.fight-card {
|
|
display: grid;
|
|
grid-template-columns: 52px 1fr auto;
|
|
gap: 10px;
|
|
align-items: center;
|
|
border-bottom: 1px solid var(--line);
|
|
padding: 10px 0;
|
|
font-family: ui-sans-serif, system-ui, sans-serif;
|
|
}
|
|
.round {
|
|
width: 42px;
|
|
height: 42px;
|
|
border-radius: 50%;
|
|
display: grid;
|
|
place-items: center;
|
|
background: var(--pink);
|
|
font-weight: 1000;
|
|
}
|
|
.principles {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 14px;
|
|
}
|
|
.principle {
|
|
background: linear-gradient(145deg, #210712, #120209);
|
|
border: 1px solid var(--line);
|
|
border-radius: 24px;
|
|
padding: 22px;
|
|
}
|
|
.principle b {
|
|
font-size: 24px;
|
|
text-transform: uppercase;
|
|
}
|
|
@media (max-width: 1000px) {
|
|
.hero,
|
|
.screen-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.system {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
.components {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
.principles {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
@media (max-width: 620px) {
|
|
.nav {
|
|
position: relative;
|
|
top: 0;
|
|
}
|
|
.nav div:last-child {
|
|
display: none;
|
|
}
|
|
.poster {
|
|
padding: 22px;
|
|
}
|
|
.system,
|
|
.components {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.phone {
|
|
height: 650px;
|
|
}
|
|
h1 {
|
|
font-size: 70px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main class="wrap">
|
|
<nav class="nav">
|
|
<div class="brand">FIGHTRATE / FIGHT NIGHT</div>
|
|
<div>
|
|
<a href="00-index.html">Índice</a><a href="#screens">Telas</a
|
|
><a href="#system">Sistema</a>
|
|
</div>
|
|
</nav>
|
|
<section class="hero">
|
|
<div class="poster">
|
|
<div class="eyebrow">Direção 03 / esportivo editorial</div>
|
|
<h1>energia de evento para virar marca.</h1>
|
|
<p class="lead">
|
|
A direção mais agressiva visualmente. Boa para marketing,
|
|
comunidade, social sharing e identidade memorável. Menos clínica;
|
|
mais luta, pressão, noite, placar e pôster.
|
|
</p>
|
|
<button class="btn">Começar captura</button>
|
|
<button class="btn secondary">Ver card da noite</button>
|
|
</div>
|
|
<div class="poster">
|
|
<div class="eyebrow">Regra 60 / 30 / 10</div>
|
|
<div class="tokens">
|
|
<div class="token" style="background: #120209">
|
|
60% arena escura
|
|
</div>
|
|
<div class="token" style="background: #310b19">
|
|
30% vinho profundo
|
|
</div>
|
|
<div class="token" style="background: #ff3156">10% neon golpe</div>
|
|
</div>
|
|
<p class="lead">
|
|
Dourado é prêmio, recorde e destaque editorial. Roxo só para
|
|
profundidade.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
<section id="screens" class="section">
|
|
<h2>Telas mobile</h2>
|
|
<div class="screen-grid">
|
|
<div class="phone">
|
|
<div class="screen">
|
|
<div class="top"><span>fight night</span><span>h003</span></div>
|
|
<div class="score">READY</div>
|
|
<p class="lead">
|
|
Capture o treino como se fosse seu fight card pessoal.
|
|
</p>
|
|
<div class="belt">
|
|
<span>cinta ok</span><span>pré-treino</span
|
|
><span>sem round manual</span>
|
|
</div>
|
|
<div class="dock">
|
|
<button class="btn">Iniciar</button
|
|
><button class="btn secondary">perfil</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="phone">
|
|
<div class="screen">
|
|
<div class="top"><span>ao vivo</span><span>37:54</span></div>
|
|
<div class="score">151<span class="unit">bpm</span></div>
|
|
<div class="chart">
|
|
<svg viewBox="0 0 280 130">
|
|
<path
|
|
d="M8 98 C34 88,38 44,70 58 S110 104,140 72 S190 20,220 48 S250 92,272 48"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class="stats">
|
|
<div class="stat"><b>185</b><span>pico</span></div>
|
|
<div class="stat"><b>41%</b><span>z4/z5</span></div>
|
|
<div class="stat"><b>7</b><span>eventos</span></div>
|
|
</div>
|
|
<div class="dock">
|
|
<button class="btn secondary">Marcar</button
|
|
><button class="btn">Parar</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="phone">
|
|
<div class="screen">
|
|
<div class="top"><span>resultado</span><span>salvo</span></div>
|
|
<div class="score">W</div>
|
|
<div class="belt">
|
|
<span>carga alta</span><span>pico 185</span><span>48 min</span>
|
|
</div>
|
|
<div class="fight-card">
|
|
<span class="round">1</span>
|
|
<div>Entrou em ritmo</div>
|
|
<b>138</b>
|
|
</div>
|
|
<div class="fight-card">
|
|
<span class="round">2</span>
|
|
<div>Pico do treino</div>
|
|
<b>181</b>
|
|
</div>
|
|
<div class="fight-card">
|
|
<span class="round">3</span>
|
|
<div>Queda controlada</div>
|
|
<b>152</b>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="phone">
|
|
<div class="screen">
|
|
<div class="top"><span>histórico</span><span>cards</span></div>
|
|
<div class="fight-card">
|
|
<span class="round">S</span>
|
|
<div>
|
|
<b>Sparring</b><br /><span style="color: var(--muted)"
|
|
>Hoje · 48 min</span
|
|
>
|
|
</div>
|
|
<b>96</b>
|
|
</div>
|
|
<div class="fight-card">
|
|
<span class="round">M</span>
|
|
<div>
|
|
<b>Muay Thai</b><br /><span style="color: var(--muted)"
|
|
>Seg · 61 min</span
|
|
>
|
|
</div>
|
|
<b>110</b>
|
|
</div>
|
|
<div class="fight-card">
|
|
<span class="round">B</span>
|
|
<div>
|
|
<b>Boxe</b><br /><span style="color: var(--muted)"
|
|
>Sex · 42 min</span
|
|
>
|
|
</div>
|
|
<b>77</b>
|
|
</div>
|
|
<button class="btn secondary">Ranking pessoal</button>
|
|
</div>
|
|
</div>
|
|
<div class="phone">
|
|
<div class="screen">
|
|
<div class="top"><span>sensor</span><span>corner tech</span></div>
|
|
<div class="score">BLE</div>
|
|
<div class="belt">
|
|
<span>180D</span><span>2A37</span><span>-61 RSSI</span>
|
|
</div>
|
|
<div class="field">Heart Rate Measurement — notify</div>
|
|
<div class="field">Battery Level — read</div>
|
|
<div class="field">Body Sensor Location — read</div>
|
|
</div>
|
|
</div>
|
|
<div class="phone">
|
|
<div class="screen">
|
|
<div class="top"><span>insight</span><span>headline</span></div>
|
|
<div class="score">PRESSÃO</div>
|
|
<p class="lead">
|
|
Você sustentou alta intensidade por mais tempo que a média das
|
|
últimas sessões.
|
|
</p>
|
|
<div class="belt"><span>+12%</span><span>boa evolução</span></div>
|
|
<div class="field">
|
|
Use amanhã para treino técnico, não guerra.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section id="system" class="section">
|
|
<h2>Design book</h2>
|
|
<div class="system">
|
|
<div class="spec">
|
|
<div class="eyebrow">Cores</div>
|
|
<h3>neon controlado</h3>
|
|
<p class="lead">
|
|
Rosa só para ação, pico e vitória. Se tudo brilha, nada importa.
|
|
</p>
|
|
</div>
|
|
<div class="spec">
|
|
<div class="eyebrow">Tipo</div>
|
|
<div class="type-big">185</div>
|
|
<p class="lead">
|
|
Display condensado, letras de pôster, corpo neutro só nos textos
|
|
longos.
|
|
</p>
|
|
</div>
|
|
<div class="spec">
|
|
<div class="eyebrow">Raio</div>
|
|
<div class="radii">
|
|
<div class="r1"></div>
|
|
<div class="r2"></div>
|
|
<div class="r3"></div>
|
|
</div>
|
|
<p class="lead">
|
|
Raios menores, mais angular, sensação de esporte e placar.
|
|
</p>
|
|
</div>
|
|
<div class="spec">
|
|
<div class="eyebrow">Bordas</div>
|
|
<p class="lead">
|
|
Bordas vinho/neon, contraste alto, nada de cinza corporativo.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="section">
|
|
<h2>Componentes</h2>
|
|
<div class="components">
|
|
<div class="component">
|
|
<div class="eyebrow">CTA</div>
|
|
<button class="btn">Iniciar</button
|
|
><button class="btn secondary" style="margin-top: 8px">
|
|
Secundário
|
|
</button>
|
|
</div>
|
|
<div class="component">
|
|
<div class="eyebrow">Fight card row</div>
|
|
<div class="fight-card">
|
|
<span class="round">S</span>
|
|
<div>Sparring</div>
|
|
<b>96</b>
|
|
</div>
|
|
</div>
|
|
<div class="component">
|
|
<div class="eyebrow">Badge</div>
|
|
<div class="belt"><span>recorde</span><span>z5 08%</span></div>
|
|
</div>
|
|
<div class="component">
|
|
<div class="eyebrow">Input</div>
|
|
<div class="field">Nome do treino</div>
|
|
<div class="field">Categoria</div>
|
|
</div>
|
|
<div class="component">
|
|
<div class="eyebrow">Share</div>
|
|
<p class="lead">
|
|
Este padrão é o melhor para gerar imagem compartilhável
|
|
pós-treino.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="section">
|
|
<h2>Princípios</h2>
|
|
<div class="principles">
|
|
<div class="principle">
|
|
<b>Memorável</b>
|
|
<p class="lead">O usuário deve reconhecer FightRate de longe.</p>
|
|
</div>
|
|
<div class="principle">
|
|
<b>Editorial</b>
|
|
<p class="lead">Relatórios viram cards visuais de treino.</p>
|
|
</div>
|
|
<div class="principle">
|
|
<b>Com risco</b>
|
|
<p class="lead">Pode cansar visualmente se usado em todo app.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</body>
|
|
</html>
|