Benjamin Sigonneau
9815a6d4be
In particular, specify viewport to fix display on mobile. See https://blog.jim-nielsen.com/2025/dont-forget-these-html-tags/
44 lines
1.6 KiB
Smarty
44 lines
1.6 KiB
Smarty
<!doctype html>
|
|
<html lang="fr">
|
|
<head>
|
|
<title>Radio Balises</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
|
|
<link rel="stylesheet" href="static/balises.css">
|
|
<link rel="icon" type="image/png" href="static/favicon.png">
|
|
</head>
|
|
<body>
|
|
<form action="/" method="post" id="datetime_form">
|
|
<label for="date">Date:</label>
|
|
<input name="date" type="date" value="{{date}}" />
|
|
<label for="time">Heure:</label>
|
|
<input name="time" type="time" value="{{time}}" />
|
|
<input name="timedelta" id="timedelta" type="hidden" value="0" />
|
|
<input value="Chercher" type="submit" />
|
|
</form>
|
|
<h1>Chansons du {{date.strftime('%A %d %B %Y')}} entre {{start_time}} et {{end_time}}</h1>
|
|
<a href="#" id="go_sooner">[<i class="fas fa-angle-left"></i> Plus tôt]</a>
|
|
<a href="#" id="go_later">[Plus tard <i class="fas fa-angle-right"></i>]</a>
|
|
<table id="results">
|
|
% for x in results:
|
|
<tr>
|
|
<th>{{str(x['date'].time())}}</th>
|
|
<td>{{x['song'].artist}}</td>
|
|
<td>{{x['song'].title}}</td>
|
|
<td><a href="{{x['youtube_url']}}" title="Rechercher sur Youtube"><i class="fab fa-lg fa-youtube"></i></a></td>
|
|
</tr>
|
|
% end
|
|
</table>
|
|
|
|
<script>
|
|
move_in_time = (delta) => () => {
|
|
document.getElementById('timedelta').value = delta;
|
|
document.getElementById('datetime_form').submit();
|
|
}
|
|
document.getElementById('go_sooner').onclick = move_in_time(-1);
|
|
document.getElementById('go_later').onclick = move_in_time(1);
|
|
</script>
|
|
</body>
|
|
</html>
|