پیشنمایش زنده
کد HTML
<div class="container">
<input type="radio" name="view" id="v1" checked="" />
<input type="radio" name="view" id="v2" />
<input type="radio" name="view" id="v3" />
<input type="radio" name="view" id="v4" />
<input type="radio" name="view" id="v5" />
<div class="watch-container">
<div class="strap top"></div>
<div class="strap bottom"></div>
<div class="watch-case">
<div class="pusher p-top"></div>
<div class="pusher p-bottom"></div>
<div class="main-crown"></div>
<div class="display-unit">
<div class="bezel-ring"></div>
<div class="view-wrapper">
<div class="view">
<div class="complication-arc"><div class="arc-fill"></div></div>
<div class="solar-time">
<span>Wednesday</span>
<div class="h2">16:45</div>
<div
style="font-weight:700; color:var(--text-dim); font-size:12px; margin-top:5px;"
>
JAN 07
</div>
</div>
</div>
<div class="view">
<div class="health-hero">
<div class="health-ring">
<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 style="font-weight:800; font-size:24px;">12,450</div>
<div
style="font-size:11px; color:var(--text-dim); font-weight:700;"
>
DAILY STEPS
</div>
</div>
</div>
<div class="view">
<div class="grid-circle">
<div class="circular-app">
<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
class="circular-app"
style="background:var(--accent); color:#fff; 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 class="circular-app">
<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 class="circular-app">
<svg viewBox="0 0 24 24">
<path
d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 14c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"
></path>
</svg>
</div>
<div
class="circular-app"
style="background:#0ea5e9; color:#fff; 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 class="circular-app">
<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 class="view">
<div
style="width:100px; height:100px; border-radius:15px; background:var(--accent); display:flex; align-items:center; justify-content:center; margin-bottom:15px; color:#fff;"
>
<svg style="width:50px; height:50px;" viewBox="0 0 24 24">
<path
d="M6.76 4.84l-1.8-1.79-1.41 1.41 1.79 1.79 1.42-1.41zM4 10.5H1v2h3v-2zm9-9.95h-2V3.5h2V.55zm7.45 3.91l-1.41-1.41-1.79 1.79 1.41 1.41 1.79-1.79zm-3.21 13.7l1.79 1.8 1.41-1.41-1.8-1.79-1.4 1.4zM20 10.5v2h3v-2h-3zm-8-5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm-1 16.95h2V19.5h-2v2.95zm-7.45-3.91l1.41 1.41 1.79-1.8-1.41-1.41-1.79 1.8z"
></path>
</svg>
</div>
<div style="font-weight:800; font-size:20px;">SUNNY</div>
<div
style="font-size:13px; color:var(--text-dim); font-weight:700;"
>
22° CELSIUS
</div>
</div>
<div class="view">
<div
style="background:#f1f5f9; padding:20px; border-radius:25px; width:100%;"
>
<div
style="font-weight:800; font-size:12px; margin-bottom:10px; color:var(--accent);"
>
SETTINGS
</div>
<div
style="display:flex; justify-content:space-between; font-size:11px; font-weight:700; border-bottom:1px solid #e2e8f0; padding:8px 0;"
>
<span>AIRPLANE</span>
<span style="color:var(--text-dim);">OFF</span>
</div>
<div
style="display:flex; justify-content:space-between; font-size:11px; font-weight:700; border-bottom:1px solid #e2e8f0; padding:8px 0;"
>
<span>WIFI</span>
<span style="color:var(--accent);">CONNECTED</span>
</div>
<div
style="display:flex; justify-content:space-between; font-size:11px; font-weight:700; padding:8px 0;"
>
<span>BLUETOOTH</span>
<span style="color:var(--accent);">ACTIVE</span>
</div>
</div>
</div>
</div>
<div class="nav">
<label for="v1" class="dot d1"></label>
<label for="v2" class="dot d2"></label>
<label for="v3" class="dot d3"></label>
<label for="v4" class="dot d4"></label>
<label for="v5" class="dot d5"></label>
</div>
</div>
</div>
</div>
</div>
کد CSS
.container {
--bg: #f8fafc;
--metal: #cbd5e1;
--metal-light: #f1f5f9;
--metal-dark: #64748b;
--screen-bg: #ffffff;
--ring-red: #ff3b30;
--ring-green: #10b981;
--ring-blue: #0ea5e9;
--accent: #10b981;
--text-main: #0f172a;
--text-dim: #94a3b8;
--case-shadow: rgba(0, 0, 0, 0.12);
--watch-size: 340px;
--screen-size: 300px;
--ease: cubic-bezier(0.16, 1, 0.3, 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 20% 20%,
#ecfdf5 0%,
transparent 40%
),
radial-gradient(circle at 80% 80%, #f0fdf4 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-size);
height: var(--watch-size);
perspective: 2000px;
}
.strap {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 140px;
height: 200px;
background: #e2e8f0;
border-radius: 10px;
z-index: 1;
box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.05);
}
.strap.top {
top: -160px;
background: linear-gradient(to top, #e2e8f0, #f8fafc);
}
.strap.bottom {
bottom: -160px;
background: linear-gradient(to bottom, #e2e8f0, #f8fafc);
}
.watch-case {
position: relative;
width: 100%;
height: 100%;
background: radial-gradient(
circle,
var(--metal-light) 0%,
var(--metal) 70%,
var(--metal-dark) 100%
);
border-radius: 50%;
z-index: 10;
box-shadow:
0 40px 80px var(--case-shadow),
inset 0 2px 2px rgba(255, 255, 255, 0.8),
inset 0 -4px 10px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
padding: 12px;
box-sizing: border-box;
border: 2px solid #94a3b8;
}
.pusher {
position: absolute;
width: 14px;
height: 28px;
background: linear-gradient(to right, #cbd5e1, #f1f5f9);
border: 1px solid #64748b;
border-radius: 4px;
z-index: 5;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}
.p-top {
top: 20%;
right: 2%;
transform: rotate(45deg);
}
.p-bottom {
bottom: 20%;
right: 2%;
transform: rotate(-45deg);
}
.main-crown {
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
width: 22px;
height: 44px;
background: linear-gradient(to bottom, #94a3b8, #f1f5f9, #94a3b8);
border: 1.5px solid #64748b;
border-radius: 6px;
z-index: 15;
box-shadow: 3px 0 8px rgba(0, 0, 0, 0.1);
}
.main-crown::after {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(
0deg,
rgba(0, 0, 0, 0.1) 0,
rgba(0, 0, 0, 0.1) 1px,
transparent 1px,
transparent 3px
);
border-radius: 4px;
}
.display-unit {
width: var(--screen-size);
height: var(--screen-size);
background: var(--screen-bg);
border-radius: 50%;
overflow: hidden;
position: relative;
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.05);
border: 6px solid #4d608fdb;
}
.display-unit::after {
content: "";
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.6) 0%,
transparent 40%,
transparent 60%,
rgba(255, 255, 255, 0.1) 100%
);
z-index: 100;
pointer-events: none;
transition: 0.8s var(--ease);
}
.bezel-ring {
position: absolute;
inset: 0;
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 50%;
z-index: 90;
pointer-events: none;
}
.view-wrapper {
width: 500%;
height: 100%;
display: flex;
transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.view {
width: 20%;
height: 100%;
padding: 50px;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
color: var(--text-main);
text-align: center;
}
.complication-arc {
position: absolute;
width: 220px;
height: 220px;
border-radius: 50%;
border: 6px solid #f1f5f9;
}
.arc-fill {
position: absolute;
inset: -6px;
border-radius: 50%;
border: 6px solid transparent;
border-top-color: var(--accent);
transform: rotate(-45deg);
}
.solar-time .h2 {
font-family: "JetBrains Mono", monospace;
font-size: 64px;
margin: 0;
font-weight: 800;
letter-spacing: -4px;
color: var(--text-main);
}
.solar-time span {
color: var(--accent);
font-size: 14px;
font-weight: 800;
letter-spacing: 4px;
text-transform: uppercase;
}
.grid-circle {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
padding: 20px;
width: 100%;
max-width: 200px;
}
.circular-app {
width: 50px;
height: 50px;
border-radius: 50%;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
border: 1px solid #f1f5f9;
}
.circular-app svg {
width: 24px;
height: 24px;
}
.health-hero {
display: flex;
flex-direction: column;
gap: 10px;
}
.health-ring {
width: 120px;
height: 120px;
border-radius: 50%;
border: 10px solid #f1f5f9;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.health-ring svg {
width: 40px;
height: 40px;
fill: var(--ring-green);
}
.nav {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 6px;
z-index: 150;
}
.dot {
width: 6px;
height: 6px;
background: rgba(0, 0, 0, 0.1);
border-radius: 50%;
cursor: pointer;
transition: 0.4s var(--ease);
}
#v1:checked ~ .watch-container .view-wrapper {
transform: translateX(0);
}
#v2:checked ~ .watch-container .view-wrapper {
transform: translateX(-20%);
}
#v3:checked ~ .watch-container .view-wrapper {
transform: translateX(-40%);
}
#v4:checked ~ .watch-container .view-wrapper {
transform: translateX(-60%);
}
#v5:checked ~ .watch-container .view-wrapper {
transform: translateX(-80%);
}
#v1:checked ~ .watch-container .d1 {
background: var(--text-main);
width: 14px;
border-radius: 3px;
}
#v2:checked ~ .watch-container .d2 {
background: var(--text-main);
width: 14px;
border-radius: 3px;
}
#v3:checked ~ .watch-container .d3 {
background: var(--text-main);
width: 14px;
border-radius: 3px;
}
#v4:checked ~ .watch-container .d4 {
background: var(--text-main);
width: 14px;
border-radius: 3px;
}
#v5:checked ~ .watch-container .d5 {
background: var(--text-main);
width: 14px;
border-radius: 3px;
}
.container svg {
fill: currentColor;
}