feat(components): ActionButton stopAlert + typography type fixes
This commit is contained in:
fightrate-bot committed
1 parent
2c51fd2623
commit
bbe2919c2c
89 files changed
+75993
-9961
No files matched your search
@@ -0,0 +1,695 @@
|
||||
<!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>
|
||||
Reference in new issue
Block a user