From b55fc2333c24ef9d561a1c5c4926ea236b8490c4 Mon Sep 17 00:00:00 2001
From: Abdussamet Kocak <abdus@abdus.dev>
Date: Thu, 8 Oct 2026 20:48:41 +0200
Subject: [PATCH] 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 |  96 +++++++++++---------
 templates/static/style.css  | 175 ++++++++++++++++++++++++++++++------
 2 files changed, 200 insertions(+), 71 deletions(-)

diff --git a/templates/static/index.html b/templates/static/index.html
index db109fb..b4f65f6 100644
--- a/templates/static/index.html
+++ b/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,48 +36,56 @@
         </div>
     </template>
 
-    <div class='location-search'>
-        <input type='search'
-               class='location-search__input'
-               placeholder='Search location...'
-               x-model='searchQuery'
-               @input='onSearchInput'
-               @focus='searchOpen = searchResults.length > 0'
-               @click.outside='searchOpen = false'>
+    <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>
 
-        <template x-if='searchOpen'>
-            <div class='location-search__dropdown'>
-                <template x-if='searchLoading'>
-                    <div class='location-search__state'>Searching...</div>
-                </template>
+        <div class='location-search'>
+            <input type='search'
+                   class='location-search__input'
+                   placeholder='Search location...'
+                   x-model='searchQuery'
+                   @input='onSearchInput'
+                   @focus='searchOpen = searchResults.length > 0'
+                   @click.outside='searchOpen = false'>
 
-                <template x-if='!searchLoading && searchError'>
-                    <div class='location-search__state'
-                         x-text='searchError'></div>
-                </template>
+            <template x-if='searchOpen'>
+                <div class='location-search__dropdown'>
+                    <template x-if='searchLoading'>
+                        <div class='location-search__state'>Searching...</div>
+                    </template>
 
-                <template x-if='!searchLoading && !searchError && searchResults.length === 0'>
-                    <div class='location-search__state'>No results</div>
-                </template>
+                    <template x-if='!searchLoading && searchError'>
+                        <div class='location-search__state'
+                             x-text='searchError'></div>
+                    </template>
 
-                <template x-if='!searchLoading && !searchError && searchResults.length > 0'>
-                    <ul class='location-search__results'>
-                        <template x-for='location in searchResults'
-                                  :key='location.id'>
-                            <li>
-                                <button type='button'
-                                        class='location-search__item'
-                                        @click='selectLocation(location)'>
-                                    <span x-text='formatLocationLabel(location)'></span>
-                                </button>
-                            </li>
-                        </template>
-                    </ul>
-                </template>
-            </div>
-        </template>
-    </div>
+                    <template x-if='!searchLoading && !searchError && searchResults.length === 0'>
+                        <div class='location-search__state'>No results</div>
+                    </template>
 
+                    <template x-if='!searchLoading && !searchError && searchResults.length > 0'>
+                        <ul class='location-search__results'>
+                            <template x-for='location in searchResults'
+                                      :key='location.id'>
+                                <li>
+                                    <button type='button'
+                                            class='location-search__item'
+                                            @click='selectLocation(location)'>
+                                        <span x-text='formatLocationLabel(location)'></span>
+                                    </button>
+                                </li>
+                            </template>
+                        </ul>
+                    </template>
+                </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'>
-        <p><span class='clock'
-                 x-text='formatTime(now)'></span></p>
-    </div>
+    <footer class='app-footer text--center text--numeric'>
+        <span class='clock'
+              x-text='formatTime(now)'></span>
+    </footer>
 </div>
 </body>
 </html>
diff --git a/templates/static/style.css b/templates/static/style.css
index 637be5d..c02f770 100644
--- a/templates/static/style.css
+++ b/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;
-    margin: 1rem auto;
-    padding: 0 1rem;
+    width: 100%;
+    max-width: 24rem;
 }
 
 .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;
-    right: 1rem;
+    left: 0;
+    right: 0;
     top: calc(100% + 0.25rem);
-    background: #fff;
-    border: 1px solid #ddd;
+    background: var(--color-surface);
+    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;
-    max-width: 66%;
-    margin: auto;
+    flex: 0 1 auto;
+    min-height: 0;
+    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;
-}
-
-.salath-name {
+    color: var(--color-ink);
 }
 
 .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);
 }