Files
HealthTracking/clinchrate-brand-board.html

1269 lines
34 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>FightRate — Brand Board</title>
<style>
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Saira+Condensed:wght@500;600;700;800&display=swap");
:root {
--canvas: #050505;
--panel: #0d0d0d;
--surface: #141414;
--raised: #1c1c1c;
--line: #2a2a2a;
--text: #f5f3ef;
--muted: #a7a29a;
--dim: #6f6a63;
--orange: #ff5a1f;
--orange-2: #ff7a35;
--red: #e5392d;
--green: #74c365;
--yellow: #f2b84b;
--purple: #8d5cff;
--blue: #4a8dff;
--ease: cubic-bezier(0.32, 0.72, 0, 1);
}
* {
box-sizing: border-box;
}
html {
background: var(--canvas);
color: var(--text);
font-family: "Plus Jakarta Sans", sans-serif;
scroll-behavior: smooth;
}
body {
margin: 0;
background:
radial-gradient(
circle at 72% 8%,
rgba(255, 90, 31, 0.16),
transparent 22rem
),
radial-gradient(
circle at 18% 42%,
rgba(141, 92, 255, 0.08),
transparent 28rem
),
linear-gradient(180deg, #000 0%, var(--canvas) 18%, #000 100%);
color: var(--text);
}
body::before {
content: "";
position: fixed;
inset: 0;
z-index: 20;
pointer-events: none;
opacity: 0.045;
background-image:
linear-gradient(rgba(255, 255, 255, 0.8) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.8) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: radial-gradient(circle at center, #000, transparent 76%);
}
body::after {
content: "";
position: fixed;
inset: 0;
z-index: 21;
pointer-events: none;
opacity: 0.12;
background-image: repeating-linear-gradient(
0deg,
rgba(255, 255, 255, 0.045) 0 1px,
transparent 1px 7px
);
mix-blend-mode: soft-light;
}
.board {
width: min(100%, 720px);
margin: 0 auto;
padding: 64px 28px 96px;
}
.section-label {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--text);
font-size: 10px;
line-height: 1;
letter-spacing: 0.06em;
margin-bottom: 38px;
}
.section-label span:first-child {
background: #171717;
border: 1px solid #262626;
border-radius: 3px;
color: var(--text);
padding: 7px 8px;
}
.hero-copy {
width: min(100%, 610px);
margin-bottom: 42px;
}
h1,
h2,
h3,
p {
margin: 0;
}
h1 {
font-family: "Saira Condensed", sans-serif;
font-size: clamp(42px, 8vw, 74px);
line-height: 0.86;
letter-spacing: -0.035em;
text-transform: uppercase;
margin-bottom: 18px;
}
.lead {
font-size: 21px;
line-height: 1.32;
max-width: 610px;
color: var(--text);
letter-spacing: -0.03em;
}
.sublead {
margin-top: 16px;
color: var(--muted);
font-size: 12px;
line-height: 1.7;
max-width: 430px;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px;
margin: 34px 0 64px;
}
.panel {
min-height: 360px;
position: relative;
overflow: hidden;
background:
radial-gradient(
circle at 78% 18%,
rgba(255, 90, 31, 0.12),
transparent 16rem
),
linear-gradient(180deg, #111, var(--panel));
border: 1px solid rgba(255, 255, 255, 0.04);
padding: 28px;
isolation: isolate;
}
.panel.tall {
min-height: 520px;
}
.panel.short {
min-height: 310px;
}
.panel.wide {
grid-column: 1 / -1;
min-height: 520px;
}
.panel-title {
position: relative;
z-index: 3;
font-size: 11px;
color: var(--text);
letter-spacing: -0.02em;
margin-bottom: 12px;
}
.panel-copy {
position: relative;
z-index: 3;
color: var(--muted);
font-size: 11px;
line-height: 1.55;
max-width: 245px;
}
.brand-card {
position: absolute;
right: 28px;
top: 92px;
width: 230px;
border-radius: 18px;
background: #f5f1e9;
color: #111;
padding: 18px;
box-shadow: 0 28px 100px rgba(0, 0, 0, 0.44);
transform: rotate(-1deg);
}
.app-icon {
width: 68px;
height: 68px;
border-radius: 17px;
background: linear-gradient(135deg, var(--orange), #ff8b45);
display: grid;
place-items: center;
color: #090909;
font-family: "Saira Condensed", sans-serif;
font-size: 48px;
font-weight: 800;
line-height: 1;
letter-spacing: -0.08em;
box-shadow:
inset 0 1px 1px rgba(255, 255, 255, 0.3),
0 18px 45px rgba(255, 90, 31, 0.28);
}
.app-icon.small {
width: 42px;
height: 42px;
border-radius: 11px;
font-size: 30px;
}
.store-row {
display: flex;
gap: 13px;
align-items: center;
}
.store-title {
font-size: 13px;
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.035em;
}
.store-sub {
margin-top: 5px;
font-size: 8px;
color: #69625a;
font-weight: 700;
}
.rating-row {
margin-top: 20px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
font-size: 8px;
color: #5d5650;
text-transform: uppercase;
}
.rating-row strong {
display: block;
color: #101010;
font-size: 15px;
margin-bottom: 2px;
}
.phone-wrap {
position: absolute;
z-index: 2;
left: 50%;
bottom: 24px;
transform: translateX(-50%);
width: 210px;
height: 426px;
border-radius: 34px;
padding: 9px;
background: linear-gradient(145deg, #3a3a3a, #0a0a0a 48%, #555);
box-shadow:
0 30px 80px rgba(0, 0, 0, 0.72),
inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.phone-wrap.small {
width: 188px;
height: 382px;
border-radius: 31px;
}
.phone-wrap.tilt-left {
left: 44%;
transform: translateX(-50%) rotate(-8deg);
bottom: -18px;
}
.phone-wrap.tilt-right {
left: 58%;
transform: translateX(-50%) rotate(5deg);
bottom: -4px;
}
.phone {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 26px;
background:
radial-gradient(
circle at 50% 8%,
rgba(255, 90, 31, 0.18),
transparent 80px
),
linear-gradient(180deg, #111 0%, #080808 100%);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.notch {
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
width: 76px;
height: 21px;
border-radius: 999px;
background: #020202;
z-index: 9;
}
.status {
position: absolute;
top: 11px;
left: 14px;
right: 14px;
display: flex;
justify-content: space-between;
font-size: 7px;
color: #f7f7f7;
z-index: 10;
}
.screen {
position: absolute;
inset: 0;
padding: 42px 14px 14px;
}
.screen-title {
font-size: 10px;
font-weight: 700;
letter-spacing: -0.02em;
display: flex;
align-items: center;
justify-content: space-between;
}
.tiny-avatar {
width: 20px;
height: 20px;
border-radius: 999px;
background: linear-gradient(135deg, #f0d7c3, #8b4a2f);
border: 1px solid rgba(255, 255, 255, 0.45);
}
.hero-metric {
margin-top: 22px;
padding: 16px 14px;
border-radius: 18px;
background: linear-gradient(180deg, #1a1a1a, #101010);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08);
}
.metric-number {
font-family: "Saira Condensed", sans-serif;
font-size: 54px;
line-height: 0.86;
letter-spacing: -0.05em;
}
.metric-label {
color: var(--dim);
font-size: 7px;
margin-top: 8px;
text-transform: uppercase;
letter-spacing: 0.14em;
}
.zone-stack {
display: grid;
grid-template-columns: 0.7fr 0.9fr 1.1fr 1.4fr 0.8fr;
gap: 3px;
height: 8px;
margin-top: 16px;
overflow: hidden;
border-radius: 999px;
background: #222;
}
.zone-stack span:nth-child(1) {
background: var(--blue);
opacity: 0.7;
}
.zone-stack span:nth-child(2) {
background: var(--green);
}
.zone-stack span:nth-child(3) {
background: var(--yellow);
}
.zone-stack span:nth-child(4) {
background: var(--orange);
}
.zone-stack span:nth-child(5) {
background: var(--red);
}
.cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 7px;
margin-top: 12px;
}
.mini-card {
border-radius: 12px;
background: #151515;
border: 1px solid rgba(255, 255, 255, 0.06);
padding: 10px;
min-height: 52px;
}
.mini-card strong {
display: block;
font-family: "Saira Condensed", sans-serif;
font-size: 23px;
line-height: 1;
}
.mini-card span {
color: var(--dim);
font-size: 6px;
text-transform: uppercase;
letter-spacing: 0.12em;
}
.bottom-nav {
position: absolute;
left: 14px;
right: 14px;
bottom: 12px;
height: 39px;
border-radius: 14px;
background: #f3eee7;
color: #111;
display: grid;
grid-template-columns: repeat(5, 1fr);
place-items: center;
font-size: 11px;
}
.bottom-nav .active {
width: 27px;
height: 27px;
border-radius: 9px;
background: #111;
color: #fff;
display: grid;
place-items: center;
}
.sensor-radar {
position: absolute;
left: 50%;
top: 50%;
width: 190px;
height: 190px;
transform: translate(-50%, -45%);
border-radius: 50%;
background:
radial-gradient(
circle,
rgba(255, 90, 31, 0.32) 0 8px,
transparent 9px
),
repeating-radial-gradient(
circle,
rgba(255, 90, 31, 0.22) 0 1px,
transparent 1px 34px
);
border: 1px solid rgba(255, 90, 31, 0.22);
box-shadow: 0 0 70px rgba(255, 90, 31, 0.1);
}
.sensor-radar::before,
.sensor-radar::after {
content: "";
position: absolute;
inset: 28px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.sensor-radar::after {
inset: 63px;
border-color: rgba(255, 90, 31, 0.38);
}
.device-list {
position: absolute;
left: 18px;
right: 18px;
bottom: 18px;
display: grid;
gap: 8px;
}
.device-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 11px;
border-radius: 13px;
background: rgba(20, 20, 20, 0.92);
border: 1px solid rgba(255, 255, 255, 0.08);
font-size: 8px;
color: var(--muted);
}
.device-row strong {
color: var(--text);
display: block;
font-size: 9px;
margin-bottom: 2px;
}
.connect-pill {
color: #111;
background: var(--orange);
border-radius: 99px;
padding: 6px 9px;
font-weight: 800;
font-size: 7px;
}
.sports-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
margin-top: 22px;
}
.sport-tile {
min-height: 68px;
border-radius: 15px;
background:
radial-gradient(
circle at 80% 12%,
rgba(255, 255, 255, 0.12),
transparent 36px
),
linear-gradient(135deg, #20130e, #161616);
border: 1px solid rgba(255, 255, 255, 0.07);
padding: 10px;
font-size: 8px;
color: var(--muted);
}
.sport-tile strong {
display: block;
color: var(--text);
font-size: 10px;
margin-top: 18px;
}
.sport-tile:nth-child(2) {
background: linear-gradient(135deg, #1d1023, #161616);
}
.sport-tile:nth-child(3) {
background: linear-gradient(135deg, #0f2117, #161616);
}
.sport-tile:nth-child(4) {
background: linear-gradient(135deg, #211d0f, #161616);
}
.cta {
position: absolute;
left: 14px;
right: 14px;
bottom: 14px;
height: 40px;
border-radius: 12px;
background: var(--orange);
color: #090909;
display: grid;
place-items: center;
font-size: 10px;
font-weight: 900;
letter-spacing: -0.02em;
}
.round-screen {
background:
radial-gradient(
circle at 50% 38%,
rgba(255, 90, 31, 0.18),
transparent 118px
),
linear-gradient(180deg, #080808, #111 68%, #080808);
}
.round-main {
margin-top: 20px;
display: grid;
place-items: center;
text-align: center;
}
.round-label {
color: var(--orange);
font-family: "Saira Condensed", sans-serif;
font-size: 18px;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.bpm-big {
font-family: "Saira Condensed", sans-serif;
font-size: 92px;
line-height: 0.78;
letter-spacing: -0.08em;
margin-top: 12px;
}
.bpm-big small {
font-size: 20px;
color: var(--muted);
letter-spacing: 0;
}
.timer-ring {
margin-top: 23px;
width: 118px;
height: 118px;
border-radius: 50%;
display: grid;
place-items: center;
background: conic-gradient(var(--orange) 0 72%, #252525 72% 100%);
box-shadow: 0 0 55px rgba(255, 90, 31, 0.12);
}
.timer-ring > div {
width: 101px;
height: 101px;
border-radius: 50%;
background: #090909;
display: grid;
place-items: center;
font-family: "Saira Condensed", sans-serif;
font-size: 30px;
}
.live-curve {
position: absolute;
left: 14px;
right: 14px;
bottom: 64px;
height: 42px;
border-radius: 13px;
background:
linear-gradient(
90deg,
transparent,
rgba(255, 90, 31, 0.08),
transparent
),
#131313;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.06);
}
.live-curve svg {
width: 100%;
height: 100%;
display: block;
}
.summary-chart {
margin-top: 18px;
height: 135px;
display: flex;
align-items: end;
gap: 7px;
padding: 14px;
border-radius: 18px;
background: #121212;
border: 1px solid rgba(255, 255, 255, 0.06);
}
.summary-chart span {
flex: 1;
border-radius: 999px 999px 0 0;
background: linear-gradient(
180deg,
var(--orange),
rgba(255, 90, 31, 0.2)
);
min-height: 18px;
}
.summary-chart span:nth-child(1) {
height: 39%;
}
.summary-chart span:nth-child(2) {
height: 68%;
}
.summary-chart span:nth-child(3) {
height: 78%;
background: linear-gradient(
180deg,
var(--red),
rgba(229, 57, 45, 0.22)
);
}
.summary-chart span:nth-child(4) {
height: 56%;
}
.summary-chart span:nth-child(5) {
height: 84%;
background: linear-gradient(
180deg,
var(--red),
rgba(229, 57, 45, 0.22)
);
}
.summary-chart span:nth-child(6) {
height: 45%;
}
.badge-burst {
position: absolute;
left: 50%;
top: 48%;
transform: translate(-50%, -50%);
width: 132px;
height: 132px;
color: #111;
filter: drop-shadow(0 22px 60px rgba(255, 90, 31, 0.23));
}
.badge-burst svg {
width: 100%;
height: 100%;
}
.history-list {
margin-top: 18px;
display: grid;
gap: 9px;
}
.history-row {
padding: 12px;
border-radius: 16px;
background: #141414;
border: 1px solid rgba(255, 255, 255, 0.06);
}
.history-row-top {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 9px;
color: var(--muted);
}
.history-row strong {
color: var(--text);
font-size: 10px;
}
.micro-bars {
margin-top: 11px;
display: grid;
grid-template-columns: 0.4fr 0.8fr 1fr 1.4fr 0.7fr;
gap: 2px;
height: 6px;
border-radius: 999px;
overflow: hidden;
}
.micro-bars i:nth-child(1) {
background: var(--blue);
}
.micro-bars i:nth-child(2) {
background: var(--green);
}
.micro-bars i:nth-child(3) {
background: var(--yellow);
}
.micro-bars i:nth-child(4) {
background: var(--orange);
}
.micro-bars i:nth-child(5) {
background: var(--red);
}
.brand-strip {
position: absolute;
left: 28px;
bottom: 28px;
right: 28px;
display: flex;
align-items: end;
justify-content: space-between;
gap: 16px;
}
.wordmark {
display: flex;
align-items: center;
gap: 12px;
}
.wordmark-text {
font-family: "Saira Condensed", sans-serif;
text-transform: uppercase;
font-size: 34px;
line-height: 0.9;
letter-spacing: -0.04em;
}
.wordmark-text span {
color: var(--orange);
}
.spec-list {
list-style: none;
padding: 0;
margin: 0;
width: 230px;
display: grid;
gap: 7px;
color: var(--muted);
font-size: 9px;
}
.spec-list li {
display: flex;
justify-content: space-between;
gap: 16px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
padding-bottom: 7px;
}
.spec-list strong {
color: var(--text);
font-weight: 700;
}
.sources-note {
color: var(--dim);
font-size: 10px;
line-height: 1.7;
max-width: 520px;
margin-top: 24px;
}
.reveal {
animation: reveal 900ms var(--ease) both;
}
.delay-1 {
animation-delay: 90ms;
}
.delay-2 {
animation-delay: 180ms;
}
.delay-3 {
animation-delay: 270ms;
}
@keyframes reveal {
from {
transform: translateY(34px);
opacity: 0;
filter: blur(8px);
}
to {
transform: translateY(0);
opacity: 1;
filter: blur(0);
}
}
@media (max-width: 680px) {
.board {
padding-inline: 16px;
}
.grid {
grid-template-columns: 1fr;
}
.panel.wide {
grid-column: auto;
}
.brand-strip {
flex-direction: column;
align-items: start;
}
.spec-list {
width: 100%;
}
}
</style>
</head>
<body>
<main class="board">
<div class="section-label reveal">
<span>01</span><span>Brand System</span>
</div>
<section class="hero-copy reveal delay-1">
<h1>FightRate</h1>
<p class="lead">
A dark, minimal fight-tracking app for reading heart-rate pressure
across every round.
</p>
<p class="sublead">
Designed from the Fitrnyse-style board language: black canvas,
disciplined panels, sparse typography, iPhone mockups, and one hot
orange signal color.
</p>
</section>
<section class="grid">
<article class="panel short reveal delay-1">
<p class="panel-title">App Store Direction</p>
<p class="panel-copy">
Heart-rate rounds for fighters. Built first for Magene H003 BLE
tracking.
</p>
<div class="brand-card">
<div class="store-row">
<div class="app-icon">fr</div>
<div>
<div class="store-title">FightRate<br />Fight HR Tracker</div>
<div class="store-sub">by HealthTracking Labs</div>
</div>
</div>
<div class="rating-row">
<div><strong>4.9</strong>RATING</div>
<div><strong>18+</strong>SPORT</div>
<div><strong>No.1</strong>ROUND HR</div>
</div>
</div>
</article>
<article class="panel short reveal delay-2">
<p class="panel-title">Name Logic</p>
<p class="panel-copy">
“Fight” names the category clearly. “Rate” means heart rate, work
rate, recovery rate.
</p>
<div class="brand-strip">
<div class="wordmark">
<div class="app-icon small">fr</div>
<div class="wordmark-text">Fight<span>Rate</span></div>
</div>
</div>
</article>
<article class="panel tall reveal delay-1">
<p class="panel-title">Sensor Scan</p>
<p class="panel-copy">
Find the strap inside the app. The H003 connects over BLE Heart Rate
Service.
</p>
<div class="phone-wrap small">
<div class="phone">
<div class="notch"></div>
<div class="status"><span>10:02</span><span>● ● ●</span></div>
<div class="screen">
<div class="screen-title">Connect Sensor <span>BLE</span></div>
<div class="sensor-radar"></div>
<div class="device-list">
<div class="device-row">
<div><strong>Magene H003</strong>Heart Rate Service</div>
<span class="connect-pill">Connect</span>
</div>
<div class="device-row">
<div><strong>Polar H10</strong>Detected nearby</div>
<span>87%</span>
</div>
</div>
</div>
</div>
</div>
</article>
<article class="panel tall reveal delay-2">
<p class="panel-title">Sport Selection</p>
<p class="panel-copy">
Start with combat disciplines. Keep the first product tight.
</p>
<div class="phone-wrap small">
<div class="phone">
<div class="notch"></div>
<div class="status"><span>10:02</span><span>● ● ●</span></div>
<div class="screen">
<div class="screen-title">
What do you train? <span>01/03</span>
</div>
<div class="sports-grid">
<div class="sport-tile">
🥊<strong>Boxing</strong>Rounds + bag work
</div>
<div class="sport-tile">
🥋<strong>Muay Thai</strong>Elbows + clinch
</div>
<div class="sport-tile">
⚔<strong>MMA</strong>Mixed rounds
</div>
<div class="sport-tile">
⟲<strong>BJJ</strong>Roll intensity
</div>
</div>
<div class="cta">Continue</div>
</div>
</div>
</div>
</article>
</section>
<div class="section-label reveal">
<span>02</span><span>Key Screens</span>
</div>
<p class="lead reveal delay-1">
The primary screen is not a generic fitness dashboard. It is a
round-control surface: BPM, zone, timer, recovery.
</p>
<section class="grid">
<article class="panel wide reveal delay-1">
<p class="panel-title">Live Round Tracking</p>
<p class="panel-copy">
Readable from arm’s length, under sweat, noise, and low light.
</p>
<div class="phone-wrap">
<div class="phone round-screen">
<div class="notch"></div>
<div class="status"><span>10:02</span><span>● ● ●</span></div>
<div class="screen">
<div class="screen-title">ROUND 03 <span>Muay Thai</span></div>
<div class="round-main">
<div class="round-label">ZONE 4 · FIGHT</div>
<div class="bpm-big">168 <small>BPM</small></div>
<div class="timer-ring"><div>02:14</div></div>
</div>
<div class="live-curve">
<svg viewBox="0 0 220 42" preserveAspectRatio="none">
<path
d="M0 28 C18 22 24 12 38 19 C58 30 64 7 81 15 C102 25 112 21 126 11 C142 0 151 26 166 19 C184 10 195 16 220 6"
fill="none"
stroke="#ff5a1f"
stroke-width="3"
stroke-linecap="round"
/>
</svg>
</div>
<div class="cta">Mark Round</div>
</div>
</div>
</div>
</article>
<article class="panel tall reveal delay-1">
<p class="panel-title">Overview</p>
<p class="panel-copy">
A structured dashboard focused on fight conditioning, not generic
steps.
</p>
<div class="phone-wrap small tilt-left">
<div class="phone">
<div class="notch"></div>
<div class="status"><span>10:02</span><span>● ● ●</span></div>
<div class="screen">
<div class="screen-title">
Today
<div class="tiny-avatar"></div>
</div>
<div class="hero-metric">
<div class="metric-number">
84<span style="font-size: 24px; color: var(--muted)"
>%</span
>
</div>
<div class="metric-label">Fight readiness</div>
<div class="zone-stack">
<span></span><span></span><span></span><span></span
><span></span>
</div>
</div>
<div class="cards">
<div class="mini-card">
<strong>42</strong><span>Rounds</span>
</div>
<div class="mini-card">
<strong>172</strong><span>Peak BPM</span>
</div>
<div class="mini-card">
<strong>18</strong><span>Recovery</span>
</div>
<div class="mini-card">
<strong>4.2</strong><span>Zone hrs</span>
</div>
</div>
<div class="bottom-nav">
<span class="active">⌂</span><span>⌁</span><span>+</span
><span>◷</span><span>☻</span>
</div>
</div>
</div>
</div>
</article>
<article class="panel tall reveal delay-2">
<p class="panel-title">Session Summary</p>
<p class="panel-copy">
Every session should teach one useful thing: pressure, recovery, or
consistency.
</p>
<div class="phone-wrap small tilt-right">
<div class="phone">
<div class="notch"></div>
<div class="status"><span>10:02</span><span>● ● ●</span></div>
<div class="screen">
<div class="screen-title">Summary <span>Save</span></div>
<div class="hero-metric">
<div class="metric-number">3.8</div>
<div class="metric-label">Fight load</div>
</div>
<div class="summary-chart">
<span></span><span></span><span></span><span></span
><span></span><span></span>
</div>
<div class="cards">
<div class="mini-card">
<strong>151</strong><span>Avg BPM</span>
</div>
<div class="mini-card">
<strong>184</strong><span>Max BPM</span>
</div>
</div>
<div class="cta">Share Recap</div>
</div>
</div>
</div>
</article>
</section>
<div class="section-label reveal">
<span>03</span><span>Progress System</span>
</div>
<section class="grid">
<article class="panel short reveal delay-1">
<p class="panel-title">Recovery Badge</p>
<p class="panel-copy">
Achievements stay useful: fewer vanity badges, more performance
moments.
</p>
<div class="badge-burst">
<svg viewBox="0 0 120 120">
<path
d="M60 4 72 30 101 20 91 49 117 61 90 73 101 102 72 92 60 118 48 92 19 102 29 73 3 61 30 49 19 20 48 30Z"
fill="#ff5a1f"
/>
<text
x="60"
y="58"
text-anchor="middle"
font-family="Saira Condensed"
font-size="25"
font-weight="800"
fill="#111"
>
+18
</text>
<text
x="60"
y="74"
text-anchor="middle"
font-family="Plus Jakarta Sans"
font-size="7"
font-weight="800"
fill="#111"
>
BPM DROP
</text>
</svg>
</div>
</article>
<article class="panel short reveal delay-2">
<p class="panel-title">History Detail</p>
<p class="panel-copy">
Browse sessions by discipline, round count, zone distribution, and
recovery delta.
</p>
<div class="history-list">
<div class="history-row">
<div class="history-row-top">
<strong>Muay Thai · Bag Work</strong><span>42m</span>
</div>
<div class="micro-bars"><i></i><i></i><i></i><i></i><i></i></div>
</div>
<div class="history-row">
<div class="history-row-top">
<strong>Boxing · Sparring</strong><span>31m</span>
</div>
<div class="micro-bars"><i></i><i></i><i></i><i></i><i></i></div>
</div>
<div class="history-row">
<div class="history-row-top">
<strong>BJJ · Rolling</strong><span>56m</span>
</div>
<div class="micro-bars"><i></i><i></i><i></i><i></i><i></i></div>
</div>
</div>
</article>
<article class="panel wide reveal delay-3">
<p class="panel-title">System Tokens</p>
<p class="panel-copy">
A restrained palette gives the app identity without turning it into
neon combat cosplay.
</p>
<div class="brand-strip">
<div class="wordmark">
<div class="app-icon small">fr</div>
<div class="wordmark-text">Fight<span>Rate</span></div>
</div>
<ul class="spec-list">
<li><span>Canvas</span><strong>#050505</strong></li>
<li><span>Panel</span><strong>#0D0D0D</strong></li>
<li><span>Fight Orange</span><strong>#FF5A1F</strong></li>
<li><span>Display</span><strong>Saira Condensed</strong></li>
<li><span>Body</span><strong>Plus Jakarta Sans</strong></li>
</ul>
</div>
</article>
</section>
<p class="sources-note">
Naming direction was informed by current fitness and combat-training
naming patterns: Strava, Fitbod, Hevy, Strong, Nike Training Club, Heavy
Bag Pro, FightCamp, Shadow Boxing App, FightSteady, Strike Force,
Sensay, FightUp, RoundOne and related apps.
</p>
</main>
</body>
</html>