1269 lines
34 KiB
HTML
1269 lines
34 KiB
HTML
<!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>
|