49 lines
2.8 KiB
HTML
49 lines
2.8 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: 8px; width: 100%; text-align: center; color: #8f95c7; font-size: 15px; letter-spacing: 2px; }
|
|
.clock { position: absolute; top: 30px; width: 100%; text-align: center; color: #fff; font-size: 34px; }
|
|
.banner {
|
|
position: absolute; top: 76px; left: 83px; width: 300px; height: 56px; border-radius: 28px;
|
|
background: #6d4fd4; display: flex; align-items: center; justify-content: center; gap: 8px;
|
|
}
|
|
.bannerLabel { color: #d9d2ff; font-size: 20px; }
|
|
.bannerTime { color: #fff; font-size: 24px; font-weight: bold; }
|
|
.row {
|
|
position: absolute; height: 40px; border-radius: 20px;
|
|
background: #161a2e; display: flex; justify-content: space-between; align-items: center;
|
|
padding: 0 20px; box-sizing: border-box;
|
|
}
|
|
.rowName { color: #a7acce; font-size: 20px; }
|
|
.rowTime { color: #fff; font-size: 20px; }
|
|
.rowNext { background: #2b2460; border: 1px solid #6d4fd4; }
|
|
.nameNext { color: #b9a8ff; font-weight: bold; }
|
|
.rowPassed { opacity: .45; }
|
|
/* chord-tapered: centered on 233 with widths 380/412/424/406/368/304, rows start y=130 */
|
|
.caption { color: #8888aa; font-size: 14px; max-width: 230px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="watch">
|
|
<div class="city">CASABLANCA</div>
|
|
<div class="clock">17:15</div>
|
|
<div class="banner"><span class="bannerLabel">ASR in</span><span class="bannerTime">1h 55m</span></div>
|
|
<div class="row rowPassed" style="top:130px; left:43px; width:380px"><span class="rowName">FAJR</span><span class="rowTime">05:40</span></div>
|
|
<div class="row rowPassed" style="top:174px; left:27px; width:412px"><span class="rowName">SHURUK</span><span class="rowTime">07:10</span></div>
|
|
<div class="row rowPassed" style="top:218px; left:21px; width:424px"><span class="rowName">DHUHR</span><span class="rowTime">13:33</span></div>
|
|
<div class="row rowNext" style="top:262px; left:30px; width:406px"><span class="rowName nameNext">ASR</span><span class="rowTime">17:01</span></div>
|
|
<div class="row" style="top:306px; left:49px; width:368px"><span class="rowName">MAGHRIB</span><span class="rowTime">19:51</span></div>
|
|
<div class="row" style="top:350px; left:81px; width:304px"><span class="rowName">ISHA</span><span class="rowTime">21:05</span></div>
|
|
</div>
|
|
<div class="caption">SALAH 0.2 layout — every row width ≤ chord at its position (verified numerically). Next prayer highlighted; passed prayers dimmed.</div>
|
|
</body>
|
|
</html>
|