feat(web): Give homepage a modern Islamic theme

Deep teal/gold palette, crescent + title combined into a single app
bar with the location search, and a no-scroll flex layout that fits
the clock/table/search in the viewport on both desktop and mobile.

templates/static/index.html

@@ -4,7 +4,7 @@
     <meta charset='UTF-8'>
     <meta name='viewport'
           content='width=device-width, initial-scale=1.0'>
-    <title>Document</title>
+    <title>Prayer Times</title>
     <script defer
             src='main.js'></script>
     <script defer
@@ -24,7 +24,8 @@
 <body>
 
 <div x-data='app()'
-     @hashchange.window='onHash'>
+     @hashchange.window='onHash'
+     class='app'>
     <template x-if='debug'>
         <div>
             <label>clock: <input type='range'
@@ -35,6 +36,12 @@
         </div>
     </template>
 
+    <header class='app-bar'>
+        <div class='app-bar__brand'>
+            <span class='app-bar__icon' aria-hidden='true'>&#9789;</span>
+            <span class='app-bar__title'>Prayer Times</span>
+        </div>
+
         <div class='location-search'>
             <input type='search'
                    class='location-search__input'
@@ -76,7 +83,9 @@
                 </div>
             </template>
         </div>
+    </header>
 
+    <main class='app-main'>
     <template x-if='todayTimes'>
         <div class='current-salath text--center'>
             <p>
@@ -142,11 +151,12 @@
             </table>
         </div>
     </template>
+    </main>
 
-    <div class='text--center text--numeric'>
+    <footer class='app-footer text--center text--numeric'>
-        <p><span class='clock'
+        <span class='clock'
-                 x-text='formatTime(now)'></span></p>
+              x-text='formatTime(now)'></span>
-    </div>
+    </footer>
 </div>
 </body>
 </html>

templates/static/style.css

@@ -2,37 +2,108 @@
     box-sizing: border-box;
 }
 
+:root {
+    --color-bg: #f6f3ea;
+    --color-surface: #ffffff;
+    --color-ink: #16302b;
+    --color-ink-muted: #5c6f68;
+    --color-primary: #0f4c42;
+    --color-primary-dark: #0a3430;
+    --color-gold: #b8902f;
+    --color-gold-soft: #e3cd8f;
+    --color-border: #e1dcc8;
+    --color-current: #b8562f;
+}
+
+html, body {
+    height: 100%;
+}
+
 body {
-    line-height: 1.6;
+    line-height: 1.4;
     font-family: 'Inter', sans-serif;
+    color: var(--color-ink);
+    background-color: var(--color-bg);
+    background-image:
+        radial-gradient(circle at 1px 1px, rgba(15, 76, 66, 0.08) 1px, transparent 0),
+        linear-gradient(160deg, #f8f5ec 0%, #f1ecda 100%);
+    background-size: 24px 24px, 100% 100%;
+    margin: 0;
+    overflow: hidden;
+}
+
+.app {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    height: 100dvh;
+}
+
+.app-bar {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1.25rem;
+    padding: 0.875rem 1.25rem;
+}
+
+.app-bar__brand {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex: 0 0 auto;
+}
+
+.app-bar__icon {
+    font-size: 1.375rem;
+    line-height: 1;
+    color: var(--color-gold);
+}
+
+.app-bar__title {
+    font-size: 0.95rem;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--color-primary-dark);
+    white-space: nowrap;
 }
 
 .location-search {
     position: relative;
-    max-width: 38rem;
+    width: 100%;
-    margin: 1rem auto;
+    max-width: 24rem;
-    padding: 0 1rem;
 }
 
 .location-search__input {
     width: 100%;
-    border: 1px solid #ddd;
+    border: 1px solid var(--color-border);
     border-radius: 0.75rem;
-    padding: 0.75rem 0.875rem;
+    padding: 0.5rem 0.875rem;
     font: inherit;
+    background: var(--color-surface);
+    color: var(--color-ink);
+}
+
+.location-search__input:focus {
+    outline: none;
+    border-color: var(--color-primary);
+    box-shadow: 0 0 0 3px rgba(15, 76, 66, 0.15);
 }
 
 .location-search__dropdown {
     position: absolute;
-    left: 1rem;
+    left: 0;
-    right: 1rem;
+    right: 0;
     top: calc(100% + 0.25rem);
-    background: #fff;
+    background: var(--color-surface);
-    border: 1px solid #ddd;
+    border: 1px solid var(--color-border);
     border-radius: 0.75rem;
     max-height: 18rem;
     overflow: auto;
     z-index: 5;
+    box-shadow: 0 10px 30px rgba(22, 48, 43, 0.12);
 }
 
 .location-search__results {
@@ -44,21 +115,30 @@ body {
 .location-search__item {
     width: 100%;
     border: 0;
-    border-bottom: 1px solid #f0f0f0;
+    border-bottom: 1px solid var(--color-border);
     background: transparent;
     text-align: left;
     padding: 0.625rem 0.75rem;
     font: inherit;
     cursor: pointer;
+    color: var(--color-ink);
 }
 
 .location-search__item:hover {
-    background: #fafafa;
+    background: #f4f1e4;
 }
 
 .location-search__state {
     padding: 0.75rem;
-    color: #666;
+    color: var(--color-ink-muted);
+}
+
+@media (max-width: 640px) {
+    .app-bar {
+        flex-direction: column;
+        gap: 0.625rem;
+        padding: 0.75rem 1rem;
+    }
 }
 
 p {
@@ -66,7 +146,7 @@ p {
 }
 
 p + p {
-    margin-top: 1rem;
+    margin-top: 0.5rem;
 }
 
 .text--numeric {
@@ -87,49 +167,72 @@ p + p {
     font-size: 1.5em;
 }
 
+.app-main {
+    flex: 1 1 auto;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-evenly;
+    gap: clamp(0.5rem, 2vh, 1.25rem);
+    padding: 0.5rem 1rem;
+    overflow: hidden;
+}
+
 .table-wrapper {
-    padding: 0 2rem;
+    flex: 0 1 auto;
-    max-width: 66%;
+    min-height: 0;
-    margin: auto;
+    overflow: auto;
+    width: 100%;
+    max-width: 34rem;
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: 1rem;
+    box-shadow: 0 10px 30px rgba(22, 48, 43, 0.08);
 }
 
 @media (max-width: 768px) {
     .table-wrapper {
         max-width: 100%;
-        padding: 0 1rem;
     }
 
     .salath-table {
-        font-size: 1.375rem;
+        font-size: 1.25rem;
     }
 
     .clock {
-        font-size: 3rem;
+        font-size: 2.5rem;
     }
 }
 
 .salath-table {
-    font-size: 2rem;
+    font-size: clamp(1.1rem, 2.4vh, 1.625rem);
     font-weight: 600;
 
     width: 100%;
     vertical-align: middle;
+    border-collapse: collapse;
 }
 
 td {
-    padding: 0.25rem 0.5rem;
+    padding: clamp(0.4rem, 1.3vh, 0.75rem) 1.25rem;
+}
+
+tr.salath + tr.salath td {
+    border-top: 1px solid var(--color-border);
 }
 
 .cell-names {
+    padding-right: 0.5rem;
     white-space: nowrap;
+    color: var(--color-primary-dark);
 }
 
 .cell-times {
+    padding-left: 0.5rem;
     white-space: nowrap;
     text-align: right;
-}
+    color: var(--color-ink);
-
-.salath-name {
 }
 
 .salath-name-group {
@@ -162,19 +265,35 @@ td {
 }
 
 .current {
-    color: tomato;
+    color: var(--color-current);
+}
+
+tr.current td {
+    background: #faf4e3;
+}
+
+tr.current .cell-names {
+    box-shadow: inset 4px 0 0 var(--color-gold);
 }
 
 .salath-time {
     font-weight: 700;
 }
 
+.app-footer {
+    flex: 0 0 auto;
+    padding: 0.25rem 1rem 0.75rem;
+}
+
 .clock {
-    font-size: 4rem;
+    font-size: clamp(1.75rem, 5vh, 3rem);
     font-weight: bold;
+    color: var(--color-primary-dark);
 }
 
 .current-salath {
+    flex: 0 0 auto;
     font-weight: bold;
-    font-size: 1.5rem;
+    font-size: clamp(0.95rem, 2.2vh, 1.25rem);
+    color: var(--color-primary);
 }