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.
98 lines
3.4 KiB
HTML
98 lines
3.4 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>
|
|
|
|
<input type='text'
|
|
x-model='locationId'>
|
|
|
|
<template x-if='todayTimes'>
|
|
<div class='current-salath text--center'>
|
|
<p>
|
|
<time :datetime='userNow'
|
|
x-text='formatDate(userNow)'></time>
|
|
</p>
|
|
<p>
|
|
<span class='salath-name'
|
|
lang='tr'
|
|
x-text='todayTimes.currentSalath.name("tr")'></span>
|
|
<span class='salath-name'
|
|
lang='de'
|
|
x-text='todayTimes.currentSalath.name("de")'></span>
|
|
<span class='salath-name text--arabic'
|
|
lang='ar'
|
|
x-text='todayTimes.currentSalath.name("ar")'></span>
|
|
</p>
|
|
<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'>
|
|
<span class='salath-name'
|
|
x-text='it.name("tr")'></span>
|
|
<span class='salath-name'
|
|
x-text='it.name("de")'></span>
|
|
<span class='salath-name text--arabic'
|
|
x-text='it.name("ar")'></span>
|
|
</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> |