You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
153 lines
6.3 KiB
HTML
153 lines
6.3 KiB
HTML
<!doctype html>
|
|
<html lang='en'>
|
|
<head>
|
|
<meta charset='UTF-8'>
|
|
<meta name='viewport'
|
|
content='width=device-width, initial-scale=1.0'>
|
|
<title>Document</title>
|
|
<script defer
|
|
src='main.js'></script>
|
|
<script defer
|
|
src='alpine.persist@3.x.x.min.js'></script>
|
|
<script defer
|
|
src='alpine@3.11.1.min.js'></script>
|
|
<link rel='preconnect'
|
|
href='https://fonts.googleapis.com'>
|
|
<link rel='preconnect'
|
|
href='https://fonts.gstatic.com'
|
|
crossorigin>
|
|
<link href='https://fonts.googleapis.com/css2?family=Inter:wght@400..900&family=Noto+Sans+Arabic:wght@400..700&display=swap'
|
|
rel='stylesheet'>
|
|
<link rel='stylesheet'
|
|
href='style.css'>
|
|
</head>
|
|
<body>
|
|
|
|
<div x-data='app()'
|
|
@hashchange.window='onHash'>
|
|
<template x-if='debug'>
|
|
<div>
|
|
<label>clock: <input type='range'
|
|
step='1'
|
|
min='0'
|
|
max='1439'
|
|
x-model='userMinutes'> <span x-text='userTime'></span></label>
|
|
</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='searchOpen'>
|
|
<div class='location-search__dropdown'>
|
|
<template x-if='searchLoading'>
|
|
<div class='location-search__state'>Searching...</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'>
|
|
<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>
|
|
|
|
<template x-if='todayTimes'>
|
|
<div class='current-salath text--center'>
|
|
<p>
|
|
<time :datetime='userNow'
|
|
x-text='formatDate(userNow)'></time>
|
|
</p>
|
|
<p>
|
|
<div class='salath-name-group salath-name-group--center'>
|
|
<span class='salath-name salath-name--primary'
|
|
:class="{'text--arabic': salathNameDisplay(todayTimes.currentSalath.salath).primary.lang === 'ar'}"
|
|
:lang='salathNameDisplay(todayTimes.currentSalath.salath).primary.lang'
|
|
x-text='salathNameDisplay(todayTimes.currentSalath.salath).primary.text'></span>
|
|
<div class="salath-name-alternatives">
|
|
<template x-for='item in salathNameDisplay(todayTimes.currentSalath.salath).secondary'
|
|
:key='item.lang'>
|
|
<span class='salath-name salath-name--secondary'
|
|
:class="{'text--arabic': item.lang === 'ar'}"
|
|
:lang='item.lang'
|
|
x-text='item.text'></span>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<p>
|
|
<time :datetime='todayTimes.nextSalath.startsAt'
|
|
class='text--numeric text--time'
|
|
x-text='todayTimes.nextSalath.untilHuman'></time>
|
|
</p>
|
|
</div>
|
|
</template>
|
|
|
|
<template x-if='todayTimes'>
|
|
<div class='table-wrapper'>
|
|
<table class='salath-table'>
|
|
<tbody>
|
|
<template x-for='it in todayTimes.times'>
|
|
<tr class='salath'
|
|
:class='{current: it.salath === todayTimes.currentSalath.salath}'>
|
|
<td class='cell-names'>
|
|
<div class='salath-name-group'>
|
|
<span class='salath-name salath-name--primary'
|
|
:class="{'text--arabic': salathNameDisplay(it.salath).primary.lang === 'ar'}"
|
|
:lang='salathNameDisplay(it.salath).primary.lang'
|
|
x-text='salathNameDisplay(it.salath).primary.text'></span>
|
|
<div class="salath-name-alternatives">
|
|
|
|
<template x-for='item in salathNameDisplay(it.salath).secondary'
|
|
:key='item.lang'>
|
|
<span class='salath-name salath-name--secondary'
|
|
:class="{'text--arabic': item.lang === 'ar'}"
|
|
:lang='item.lang'
|
|
x-text='item.text'></span>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class='cell-times'>
|
|
<span class='salath-time text--time text--numeric'
|
|
x-text='it.timeLocal'></span>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</template>
|
|
|
|
<div class='text--center text--numeric'>
|
|
<p><span class='clock'
|
|
x-text='formatTime(now)'></span></p>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|