abdus/prayertimes-go
1
0 Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(web): Give homepage a modern Islamic theme

Browse Source 
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.
This commit is contained in:
abdus committed 2026-10-08 20:48:41 +02:00
1 parent 612c6ebde5
commit b55fc2333c
2 files changed
+200 -71
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

templates/static/index.html
+53 -43
View File
@@ -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>
templates/static/style.css
+147 -28
View File
@@ -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);
}