پیشنمایش زنده
کد HTML
<div class="container">
<input type="radio" name="face" id="f1" checked="" />
<input type="radio" name="face" id="f2" />
<input type="radio" name="face" id="f3" />
<input type="radio" name="face" id="f4" />
<input type="radio" name="face" id="f5" />
<div class="watch-container">
<div class="strap top"></div>
<div class="strap bottom"></div>
<div class="watch-case">
<div class="crown-well"></div>
<div class="crown"></div>
<div class="side-btn-well"></div>
<div class="side-btn"></div>
<div class="action-btn-well"></div>
<div class="action-btn"></div>
<div class="display-unit">
<div class="status-bar">
<span>9:41</span>
<span style="color:var(--ring-green)">100% ⚡</span>
</div>
<div class="view-wrapper">
<div class="view face-ultra">
<div class="comp comp-top-left">
<svg
style="width:18px; height:18px; color:var(--banana);"
viewBox="0 0 24 24"
>
<path
d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1z"
></path>
</svg>
<span style="font-size:9px; opacity:0.6; margin-top:2px;"
>22°</span
>
</div>
<div class="comp comp-top-right">
<svg
style="width:18px; height:18px; color:var(--banana);"
viewBox="0 0 24 24"
>
<path d="M12 2L4.5 20.29l.71.71L12 18l6.79 3 .71-.71z"></path>
</svg>
<span style="font-size:9px; color:var(--banana); margin-top:2px;"
>NW</span
>
</div>
<div class="main-time">
<div class="h2">09:41</div>
<span>35</span>
</div>
<div class="comp comp-bottom">
<div
style="display:flex; flex-direction:column; justify-content:center;"
>
<span style="font-size:10px; opacity:0.6; font-weight:800;"
>TRAINING</span
>
<span style="font-size:12px; font-weight:800;">12.4 KM</span>
</div>
<div style="width:80px; display:flex; align-items:center;">
<div class="progress"><div class="bar"></div></div>
</div>
</div>
</div>
<div class="view activity-view">
<div class="act-row">
<div class="act-circle" style="background:var(--ring-red)">
<svg
style="width:18px; height:18px; color:white;"
viewBox="0 0 24 24"
>
<path
d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67z"
></path>
</svg>
</div>
<div>
<span style="font-size:11px; opacity:0.6; font-weight:800;"
>MOVE</span
>
<div style="font-weight:800; font-size:15px;">450/600 CAL</div>
</div>
</div>
<div class="act-row">
<div class="act-circle" style="background:var(--ring-green)">
<svg
style="width:18px; height:18px; color:white;"
viewBox="0 0 24 24"
>
<path
d="M13.49 5.48c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-3.6 13.9l1-4.4 2.1 2v6h2v-7.5l-2.1-2 .6-3c1.3 1.5 3.3 2.5 5.5 2.5v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1l-5.2 2.2v4.7h2v-3.4l1.8-.7-1.6 8.1-4.9-1-.4 2 7.2 1.4z"
></path>
</svg>
</div>
<div>
<span style="font-size:11px; opacity:0.6; font-weight:800;"
>EXERCISE</span
>
<div style="font-weight:800; font-size:15px;">32/30 MIN</div>
</div>
</div>
<div class="act-row">
<div class="act-circle" style="background:var(--ring-blue)">
<svg
style="width:18px; height:18px; color:white;"
viewBox="0 0 24 24"
>
<path
d="M5 9l1.41 1.41L11 5.83V22h2V5.83l4.59 4.59L19 9l-7-7-7 7z"
></path>
</svg>
</div>
<div>
<span style="font-size:11px; opacity:0.6; font-weight:800;"
>STAND</span
>
<div style="font-weight:800; font-size:15px;">10/12 HRS</div>
</div>
</div>
</div>
<div class="view hr-view">
<svg class="heart-svg" viewBox="0 0 24 24">
<path
d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
></path>
</svg>
<p
style="font-size:60px; margin:10px 0 0; font-family:'JetBrains Mono'; font-weight:800;"
>
72
</p>
<span
style="color:var(--text-dim); font-size:13px; font-weight:800; letter-spacing:2px;"
>BPM</span
>
</div>
<div class="view player-view">
<div class="cover">
<svg
style="width:55px; height:55px; color:var(--banana);"
viewBox="0 0 24 24"
>
<path
d="M12 3v9.28c-.47-.17-.97-.28-1.5-.28-2.48 0-4.5 2.02-4.5 4.5s2.02 4.5 4.5 4.5 4.5-2.02 4.5-4.5V7h4V3h-7z"
></path>
</svg>
</div>
<div style="font-weight:800; font-size:18px;">BANANA BEATS</div>
<div
style="font-size:13px; opacity:0.6; font-weight:600; margin-top:4px;"
>
FRUIT SQUAD
</div>
<div
style="display:flex; gap:30px; margin-top:30px; align-items:center;"
>
<svg style="width:28px; height:28px;" viewBox="0 0 24 24">
<path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"></path>
</svg>
<svg
style="width:38px; height:38px; color:var(--banana);"
viewBox="0 0 24 24"
>
<path d="M8 5v14l11-7z"></path>
</svg>
<svg style="width:28px; height:28px;" viewBox="0 0 24 24">
<path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"></path>
</svg>
</div>
</div>
<div class="view">
<div class="grid-view">
<div class="app">
<div class="icon-box">
<svg viewBox="0 0 24 24">
<path
d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1H7c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"
></path>
</svg>
</div>
</div>
<div class="app">
<div
class="icon-box"
style="background:var(--ring-green); color:white; border:none;"
>
<svg viewBox="0 0 24 24">
<path
d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"
></path>
</svg>
</div>
</div>
<div class="app">
<div
class="icon-box"
style="background:var(--ring-blue); color:white; border:none;"
>
<svg viewBox="0 0 24 24">
<path
d="M12 3v9.28c-.47-.17-.97-.28-1.5-.28-2.48 0-4.5 2.02-4.5 4.5s2.02 4.5 4.5 4.5 4.5-2.02 4.5-4.5V7h4V3h-7z"
></path>
</svg>
</div>
</div>
<div class="app">
<div
class="icon-box"
style="background:var(--banana); color:white; border:none;"
>
<svg viewBox="0 0 24 24">
<path
d="M12 2L4.5 20.29l.71.71L12 18l6.79 3 .71-.71z"
></path>
</svg>
</div>
</div>
<div class="app">
<div
class="icon-box"
style="background:#6366f1; color:white; border:none;"
>
<svg viewBox="0 0 24 24">
<path
d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58z"
></path>
</svg>
</div>
</div>
<div class="app">
<div
class="icon-box"
style="background:var(--ring-red); color:white; border:none;"
>
<svg viewBox="0 0 24 24">
<path
d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
></path>
</svg>
</div>
</div>
<div class="app">
<div
class="icon-box"
style="background:var(--ring-blue); color:white; border:none;"
>
<svg viewBox="0 0 24 24">
<path
d="M13.49 5.48c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-3.6 13.9l1-4.4 2.1 2v6h2v-7.5l-2.1-2 .6-3c1.3 1.5 3.3 2.5 5.5 2.5v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1l-5.2 2.2v4.7h2v-3.4l1.8-.7-1.6 8.1-4.9-1-.4 2 7.2 1.4z"
></path>
</svg>
</div>
</div>
<div class="app">
<div
class="icon-box"
style="background:#22c55e; color:white; border:none;"
>
<svg viewBox="0 0 24 24">
<path
d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
></path>
</svg>
</div>
</div>
<div class="app">
<div
class="icon-box"
style="background:#fbbf24; color:white; border:none;"
>
<svg viewBox="0 0 24 24">
<path
d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
></path>
</svg>
</div>
</div>
</div>
</div>
</div>
<div class="nav">
<label for="f1" class="dot d1"></label>
<label for="f2" class="dot d2"></label>
<label for="f3" class="dot d3"></label>
<label for="f4" class="dot d4"></label>
<label for="f5" class="dot d5"></label>
</div>
</div>
</div>
</div>
</div>
کد CSS
.container {
--bg: #fdfcf0;
--titanium: #d1d5db;
--titanium-light: #f9fafb;
--titanium-dark: #9ca3af;
--screen-bg: #fffef2;
--ring-red: #ff3b30;
--ring-green: #34c759;
--ring-blue: #007aff;
--banana: #eab308;
--banana-light: #fef9c3;
--text-main: #1c1c1e;
--text-dim: #8e8e93;
--case-shadow: rgba(0, 0, 0, 0.15);
--watch-w: 310px;
--watch-h: 375px;
--ease: cubic-bezier(0.2, 1, 0.2, 1);
margin: 0;
min-height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg);
background-image: radial-gradient(
circle at 10% 10%,
#fef9c3 0%,
transparent 40%
),
radial-gradient(circle at 90% 90%, #fef08a 0%, transparent 40%);
font-family:
"Inter",
-apple-system,
sans-serif;
overflow: hidden;
user-select: none;
}
.container input[type="radio"] {
display: none;
}
.watch-container {
position: relative;
width: var(--watch-w);
height: var(--watch-h);
perspective: 2000px;
}
.strap {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 148px;
height: 180px;
background: #e2e4e9;
border-radius: 18px;
z-index: 1;
box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.08);
}
.strap.top {
top: -150px;
background: linear-gradient(to top, #e2e4e9, #f3f4f6);
}
.strap.bottom {
bottom: -150px;
background: linear-gradient(to bottom, #e2e4e9, #f3f4f6);
}
.watch-case {
position: relative;
width: 100%;
height: 100%;
background: linear-gradient(
145deg,
var(--titanium-light),
var(--titanium),
var(--titanium-dark)
);
border-radius: 68px;
z-index: 10;
box-shadow:
0 60px 100px var(--case-shadow),
inset 0 1px 1px rgba(255, 255, 255, 0.9),
inset 0 -3px 10px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
box-sizing: border-box;
border: 1px solid #c2c6cc;
}
.crown-well {
position: absolute;
right: -2px;
top: 55px;
width: 12px;
height: 90px;
background: rgba(0, 0, 0, 0.15);
border-radius: 10px;
z-index: 8;
box-shadow: inset 2px 0 5px rgba(0, 0, 0, 0.2);
}
.crown {
position: absolute;
right: -12px;
top: 75px;
width: 20px;
height: 50px;
background: linear-gradient(to right, #d1d5db, #f3f4f6, #9ca3af);
border-radius: 6px;
z-index: 20;
box-shadow: 4px 2px 10px rgba(0, 0, 0, 0.15);
}
.crown::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 12px;
height: 12px;
background: radial-gradient(circle, #f3f4f6 30%, #9ca3af 100%);
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, 0.1);
z-index: 21;
}
.crown::after {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(
0deg,
rgba(0, 0, 0, 0.08) 0,
rgba(0, 0, 0, 0.08) 1px,
transparent 1px,
transparent 3px
);
border-radius: 6px;
}
.side-btn-well {
position: absolute;
right: -2px;
top: 155px;
width: 8px;
height: 65px;
background: rgba(0, 0, 0, 0.15);
border-radius: 10px;
z-index: 8;
box-shadow: inset 2px 0 5px rgba(0, 0, 0, 0.1);
}
.side-btn {
position: absolute;
right: -6px;
top: 162px;
width: 9px;
height: 50px;
background: linear-gradient(to right, #9ca3af, #d1d5db);
border-radius: 4px;
z-index: 15;
border: 1px solid #8e939c;
box-shadow:
inset 0 1px 1px rgba(255, 255, 255, 0.6),
1px 1px 3px rgba(0, 0, 0, 0.1);
}
.action-btn-well {
position: absolute;
left: -2px;
top: 125px;
width: 8px;
height: 90px;
background: rgba(0, 0, 0, 0.15);
border-radius: 10px;
z-index: 8;
box-shadow: inset -2px 0 5px rgba(0, 0, 0, 0.1);
}
.action-btn {
position: absolute;
left: -6px;
top: 135px;
width: 9px;
height: 70px;
background: linear-gradient(to left, var(--banana), #facc15);
border-radius: 4px;
z-index: 15;
border: 1px solid #ca8a04;
box-shadow:
inset 0 1px 2px rgba(255, 255, 255, 0.6),
-1px 1px 3px rgba(0, 0, 0, 0.1);
}
.display-unit {
width: 100%;
height: 100%;
background: var(--screen-bg);
border-radius: 58px;
overflow: hidden;
position: relative;
box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.02);
border: 5px solid #000;
}
.display-unit::after {
content: "";
position: absolute;
top: -40%;
left: -40%;
width: 150%;
height: 150%;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.4) 0%,
transparent 35%,
transparent 65%,
rgba(255, 255, 255, 0.1) 100%
);
z-index: 100;
pointer-events: none;
transition: 0.8s var(--ease);
}
.watch-case:hover .display-unit::after {
transform: translate(20px, 20px);
}
.status-bar {
position: absolute;
top: 24px;
left: 0;
right: 0;
padding: 0 48px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 11px;
font-weight: 800;
color: var(--text-main);
z-index: 80;
}
.view-wrapper {
width: 500%;
height: 100%;
display: flex;
transition: transform 0.8s var(--ease);
}
.view {
width: 20%;
height: 100%;
padding: 55px 35px 25px;
box-sizing: border-box;
display: flex;
flex-direction: column;
position: relative;
color: var(--text-main);
}
.face-ultra {
align-items: center;
justify-content: center;
}
.main-time {
text-align: center;
margin-top: 10px;
}
.main-time .h2 {
font-family: "JetBrains Mono", monospace;
font-size: 74px;
margin: 0;
font-weight: 800;
letter-spacing: -5px;
color: var(--text-main);
line-height: 0.85;
}
.main-time span {
color: var(--banana);
font-size: 22px;
font-weight: 800;
letter-spacing: 2px;
}
.comp {
position: absolute;
background: rgba(0, 0, 0, 0.04);
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 16px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
}
.comp-top-left {
top: 72px;
left: 45px;
width: 52px;
height: 52px;
}
.comp-top-right {
top: 72px;
right: 45px;
width: 52px;
height: 52px;
}
.comp-bottom {
bottom: 65px;
left: 45px;
right: 45px;
height: 48px;
flex-direction: row;
justify-content: space-between;
padding: 0 15px;
}
.progress {
width: 100%;
height: 6px;
background: rgba(0, 0, 0, 0.06);
border-radius: 10px;
margin-top: 6px;
overflow: hidden;
}
.bar {
height: 100%;
background: var(--banana);
width: 75%;
}
.activity-view {
justify-content: center;
gap: 24px;
}
.act-row {
display: flex;
align-items: center;
gap: 18px;
}
.act-circle {
width: 38px;
height: 38px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.hr-view {
align-items: center;
justify-content: center;
}
.heart-svg {
width: 50px;
height: 50px;
fill: var(--ring-red);
animation: beat 0.8s infinite;
}
@keyframes beat {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.3));
}
}
.player-view {
align-items: center;
justify-content: center;
text-align: center;
}
.cover {
width: 120px;
height: 120px;
background: var(--banana-light);
border-radius: 22px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 25px;
border: 1px solid rgba(0, 0, 0, 0.05);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}
.grid-view {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 15px;
padding-top: 40px;
width: 100%;
max-width: 210px;
margin: 0 auto;
}
.app {
display: flex;
align-items: center;
justify-content: center;
}
.icon-box {
width: 52px;
height: 52px;
border-radius: 16px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
border: 1px solid #f1f5f9;
}
.icon-box svg {
width: 28px;
height: 28px;
}
.nav {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 150;
}
.dot {
width: 7px;
height: 7px;
background: rgba(0, 0, 0, 0.1);
border-radius: 50%;
cursor: pointer;
transition: 0.4s var(--ease);
}
#f1:checked ~ .watch-container .view-wrapper {
transform: translateX(0);
}
#f2:checked ~ .watch-container .view-wrapper {
transform: translateX(-20%);
}
#f3:checked ~ .watch-container .view-wrapper {
transform: translateX(-40%);
}
#f4:checked ~ .watch-container .view-wrapper {
transform: translateX(-60%);
}
#f5:checked ~ .watch-container .view-wrapper {
transform: translateX(-80%);
}
#f1:checked ~ .watch-container .d1 {
background: var(--text-main);
width: 18px;
border-radius: 4px;
}
#f2:checked ~ .watch-container .d2 {
background: var(--text-main);
width: 18px;
border-radius: 4px;
}
#f3:checked ~ .watch-container .d3 {
background: var(--text-main);
width: 18px;
border-radius: 4px;
}
#f4:checked ~ .watch-container .d4 {
background: var(--text-main);
width: 18px;
border-radius: 4px;
}
#f5:checked ~ .watch-container .d5 {
background: var(--text-main);
width: 18px;
border-radius: 4px;
}
.container svg {
fill: currentColor;
}