پیشنمایش زنده
کد HTML
<div class="race-card">
<div class="track-container">
<svg
class="track-svg"
viewBox="0 0 200 120"
xmlns="http://www.w3.org/2000/svg"
>
<path
id="track-path-definition"
d="M 40 110 C 10 110, 10 70, 40 70 L 60 70 C 90 70, 90 40, 60 40 C 30 40, 30 10, 60 10 L 140 10 C 170 10, 170 40, 140 40 C 110 40, 110 70, 140 70 L 160 70 C 190 70, 190 110, 160 110 Z"
fill="none"
stroke="#ff2d6a"
stroke-width="6"
stroke-linecap="round"
stroke-linejoin="round"
filter="drop-shadow(0 0 6px #ff2d6a)"
></path>
<circle r="5" fill="#fff700">
<animateMotion dur="8s" repeatCount="indefinite">
<mpath href="#track-path-definition"></mpath>
</animateMotion>
</circle>
</svg>
<div class="sector-text">Sector 2</div>
</div>
<div class="lap-times">
<div class="current-lap">
<span>Lap 5</span>
<span></span>
</div>
<div>
<span>Lap 4</span>
<span>1:16:36</span>
</div>
<div>
<span>Lap 3</span>
<span>1:17:24</span>
</div>
<div>
<span>Lap 2</span>
<span>1:18:15</span>
</div>
</div>
</div>
کد CSS
.race-card {
display: flex;
align-items: center;
gap: 20px;
max-width: 400px;
width: 90%;
padding: 20px 30px;
border-radius: 35px;
background: rgb(0, 0, 0);
backdrop-filter: blur(8px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(119, 119, 119, 0.2);
color: #fff;
font-family: "Inter", sans-serif;
}
.track-container {
width: 55%;
text-align: center;
position: relative;
}
.track-svg {
width: 100%;
height: auto;
transform: rotate(-15deg);
}
.sector-text {
margin-top: 10px;
font-size: 14px;
color: #d3d3d3;
}
.lap-times {
width: 45%;
display: flex;
flex-direction: column;
gap: 6px;
font-size: 16px;
color: #ff8ab4;
}
.lap-times div {
display: flex;
justify-content: space-between;
}
.lap-times .current-lap {
font-weight: bold;
font-size: 18px;
color: #fff;
}
.lap-times span:first-child {
color: #a0a0a0;
}
/* Responsivní drobnosti */
@media (max-width: 480px) {
.race-card {
flex-direction: column;
width: 90%;
}
.track-container,
.lap-times {
width: 100%;
}
}