ynerant/le-pays-est-il-apaise
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Ajout du footer et fixation de la barre de progression

Browse Source 
Signed-off-by: Emmy D'Anello <ynerant@emy.lu>
This commit is contained in:
Emmy D'Anello
2023-04-20 20:59:48 +02:00
parent 12544381fe
commit 0323fd5343
1 changed files with 15 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
templates/template.html.j2
View File

@@ -7,11 +7,12 @@
<!-- TODO Replace with local assets -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.4/font/bootstrap-icons.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</head>
<body>
<main class="container">
<main class="container-xl">
<div class="text-center">
<h1>Le pays est-il apaisé ?</h1>
{% if current_day < 100 %}
@@ -23,7 +24,10 @@
<h3 id="remaining-time">
<noscript>JavaScript n'est pas activé, le compte-à-rebours n'est pas accessible.</noscript>
</h3>
<h4>Jour <span id="current-day">{{ current_day }}</span>/100</h4>
</div>
<div class="sticky-top px-3 py-3 bg-body">
<div class="row">
<div class="col-md-1 text-center">
17/04/2023
@@ -37,8 +41,6 @@
26/07/2023
</div>
</div>
<h4>Jour {{ current_day }}/100</h4>
</div>
@@ -119,6 +121,14 @@
À venir : une carte de l'ensemble des déplacements et rassemblements.
</div>
</main>
<footer class="d-flex flex-wrap align-items-center py-3 my-4 border-top">
<ul class="nav">
<li class="ms-3"><a class="text-body-secondary" href="https://twitter.com/ynerant"><i class="bi bi-twitter"></i> @ynerant</a></li>
<li class="ms-3"><a class="text-body-secondary" href="mailto:lepaysestilapaise@luemy.eu"><i class="bi bi-lightbulb-fill"></i> Envoyez vos suggestions à lepaysestilapaise@luemy.eu</a></li>
<li class="ms-3"><a class="text-body-secondary" href="https://github.com/ynerant/le-pays-est-il-apaise"><i class="bi bi-github"></i> Contribuez sur Github</a></li>
</ul>
</footer>
</body>
<script src="theme.js"></script>
@@ -131,6 +141,7 @@
let counterText = document.getElementById("remaining-time")
let counterBar = document.getElementById("progress-bar")
let counterBarDiv = counterBar.parentNode
let currentDaySpan = document.getElementById("current-day")
function updateCounter() {
let now = new Date()
@@ -162,6 +173,7 @@
let percent = 100 * elapsedTime / totalTime
counterBar.style.width = `${percent}%`
counterBarDiv.setAttribute('aria-valuenow', `${dayNumber}`)
currentDaySpan.innerText = dayNumber
}
setInterval(updateCounter, 1000)