47 lines
2.7 KiB
HTML
47 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<style>
|
|
body { margin: 0; padding: 20px; background: #16161e; font-family: sans-serif; display: flex; gap: 30px; align-items: center; }
|
|
.watch {
|
|
width: 466px; height: 466px; border-radius: 233px;
|
|
background: #0a0d18; position: relative; overflow: hidden; flex-shrink: 0;
|
|
box-shadow: 0 0 0 8px #222, 0 10px 40px rgba(0,0,0,.6);
|
|
}
|
|
.city { position: absolute; top: 18px; width: 100%; text-align: center; color: #8f95c7; font-size: 18px; letter-spacing: 2px; }
|
|
.clock { position: absolute; top: 44px; width: 100%; text-align: center; color: #fff; font-size: 44px; }
|
|
.banner {
|
|
position: absolute; top: 116px; left: 68px; width: 330px; height: 64px; border-radius: 32px;
|
|
background: #6d4fd4; display: flex; align-items: center; justify-content: center; gap: 8px;
|
|
}
|
|
.bannerLabel { color: #d9d2ff; font-size: 22px; }
|
|
.bannerTime { color: #fff; font-size: 26px; font-weight: bold; }
|
|
.row {
|
|
position: absolute; left: 53px; width: 360px; height: 44px; border-radius: 22px;
|
|
background: #161a2e; display: flex; justify-content: space-between; align-items: center;
|
|
padding: 0 22px; box-sizing: border-box;
|
|
}
|
|
.rowName { color: #a7acce; font-size: 21px; }
|
|
.rowTime { color: #fff; font-size: 21px; }
|
|
.rowNext { background: #2b2460; border: 1px solid #6d4fd4; }
|
|
.nameNext { color: #b9a8ff; font-weight: bold; }
|
|
.caption { color: #8888aa; font-size: 14px; max-width: 220px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="watch">
|
|
<div class="city">CASABLANCA</div>
|
|
<div class="clock">17:05</div>
|
|
<div class="banner"><span class="bannerLabel">ASR in</span><span class="bannerTime">2h 5m</span></div>
|
|
<div class="row" style="top:196px"><span class="rowName">FAJR</span><span class="rowTime">05:40</span></div>
|
|
<div class="row" style="top:245px"><span class="rowName">SHURUK</span><span class="rowTime">07:10</span></div>
|
|
<div class="row" style="top:294px"><span class="rowName">DHUHR</span><span class="rowTime">13:33</span></div>
|
|
<div class="row rowNext" style="top:343px"><span class="rowName nameNext">ASR</span><span class="rowTime">17:01</span></div>
|
|
<div class="row" style="top:392px"><span class="rowName">MAGHRIB</span><span class="rowTime">19:51</span></div>
|
|
<div class="row" style="top:441px"><span class="rowName">ISHA</span><span class="rowTime">21:05</span></div>
|
|
</div>
|
|
<div class="caption">SALAH 0.1 — round-screen layout preview (466px). Rows at top 196→441px; chord width at row 441 (y 441-485, dy=208 from center) is ~2·√(233²−208²)≈209px — the 360px row exceeds it. <b>This preview intentionally shows the clipping risk at the bottom row.</b></div>
|
|
</body>
|
|
</html>
|