v0.2 preview + cleanup

preview-0.1.html

@@ -1,46 +0,0 @@
-<!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>

preview-0.2.html

@@ -0,0 +1,48 @@
+<!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>