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>