194 lines
9.0 KiB
Django/Jinja
194 lines
9.0 KiB
Django/Jinja
<!doctype html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Le pays est-il apaisé ?</title>
|
|
<meta name="description" content="Documentation de l'apaisement du pays en 100 jours comme promis par Emmanuel Macron">
|
|
|
|
<!-- 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-xl">
|
|
<div class="text-center">
|
|
<h1>Le pays est-il apaisé ?</h1>
|
|
{% if current_day < 100 %}
|
|
<h2 class="text-danger fw-bold">NON</h2>
|
|
{% else %}
|
|
<h2 class="text-warning">Normalement oui, si on pense le contraire c'est qu'on a mal observé</h2>
|
|
{% endif %}
|
|
<h2>Temps restant :</h2>
|
|
<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
|
|
</div>
|
|
<div class="col-md-10">
|
|
<div class="progress" role="progressbar" aria-label="Progression de l'apaisement" aria-valuenow="{{ current_day }}" aria-valuemin="0" aria-valuemax="100">
|
|
<div id="progress-bar" class="progress-bar progress-bar-striped progress-bar-animated {% if current_day < 50 %}bg-danger{% elif current_day < 75 %}bg-warning{% elif current_day < 100 %}bg-info{% else %}bg-success{% endif %}" style="width: {{ current_day }}%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-1 text-center">
|
|
26/07/2023
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="accordion my-5" id="accordionSteps">
|
|
{% for day in data %}
|
|
<div class="accordion-item">
|
|
<h2 class="accordion-header">
|
|
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ day.index }}" aria-expanded="false" aria-controls="collapse{{ day.index }}">
|
|
Jour {{ day.index }} : {{ day.index | to_date }} — {{ day.subtitle }}
|
|
</button>
|
|
</h2>
|
|
<div id="collapse{{ day.index }}" class="accordion-collapse collapse" data-bs-parent="#accordionSteps">
|
|
<div class="accordion-body">
|
|
<ul class="list-group list-group-flush">
|
|
{% for event in day.events %}
|
|
<li class="list-group-item">
|
|
<h5>{{ event.description }}</h5>
|
|
{% for medium in event.media %}
|
|
<div>
|
|
{% if medium.type == "link" %}
|
|
<p>
|
|
<a href="{{ medium.text }}">{{ medium.text }}</a>
|
|
</p>
|
|
{% elif medium.type == "image" %}
|
|
<div class="text-center">
|
|
<div>
|
|
<img width="560" src="{{ medium.link }}" alt="{{ medium.alt }}" title="{{ medium.alt }}">
|
|
</div>
|
|
<p>
|
|
<i>Source : <a href="{{ medium.source_url }}">{{ medium.source_text }}</a></i>
|
|
</p>
|
|
</div>
|
|
{% elif medium.type == "video" %}
|
|
<div class="text-center">
|
|
<div>
|
|
<video controls width="560" height="315">
|
|
<source src="{{ medium.link }}{% if medium.start %}#t={{ medium.start }}{% if medium.end %},{{ medium.end }}{% endif %}{% endif %}">
|
|
{% if medium.subtitles_file %}
|
|
<track label="Français" kind="subtitles" srclang="fr" src="subtitles/{{ medium.subtitles_file }}" default>
|
|
{% endif %}
|
|
</video>
|
|
</div>
|
|
<p>
|
|
<i>Source : <a href="{{ medium.source_url }}">{{ medium.source_text }}</a></i>
|
|
</p>
|
|
</div>
|
|
{% elif medium.type == "audio" %}
|
|
<div class="text-center">
|
|
<div>
|
|
<audio controls width="560">
|
|
<source src="{{ medium.link }}{% if medium.start %}#t={{ medium.start }}{% if medium.end %},{{ medium.end }}{% endif %}{% endif %}">
|
|
</audio>
|
|
</div>
|
|
<p>
|
|
<i>Source : <a href="{{ medium.source_url }}">{{ medium.source_text }}</a></i>
|
|
</p>
|
|
</div>
|
|
{% elif medium.type == "youtube" %}
|
|
<div class="text-center">
|
|
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/{{ medium.code }}?start={{ medium.start|default(0) }}" title="Allocution du président de la République du 17 avril 2023" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
|
<p>
|
|
<i>{{ medium.text }}</i>
|
|
</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<div class="text-center my-5">
|
|
{% include "France_departements.svg.j2" %}
|
|
<p>
|
|
<i>Une autre carte similaire ayant inspiré le jeu de données est disponible sur le site d'<a href="https://france.attac.org/se-mobiliser/retraites-pour-le-droit-a-une-retraite-digne-et-heureuse/article/on-ne-les-lache-pas-la-carte-des-mobilisations">ATTAC</a>.</i>
|
|
</p>
|
|
<p>
|
|
<i>Récupérez la carte au format SVG <a href="France_departements.svg">ici</a>.</i>
|
|
</p>
|
|
</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>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
// Enable popovers
|
|
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
|
|
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl, {html: true}))
|
|
|
|
let baseDate = new Date("2023-04-17 20:00:00+0200")
|
|
let baseDateDay = new Date("2023-04-17 00:00:00+0200")
|
|
let endDate = new Date("2023-07-26 20:00:00+0200")
|
|
let totalTime = 8640000 // 100 days in seconds
|
|
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()
|
|
let elapsedTime = Math.floor((now - baseDate) / 1000)
|
|
let dayNumber = Math.floor((now - baseDateDay) / 86400000)
|
|
let remainingTime = Math.floor((endDate - now) / 1000)
|
|
|
|
let days = Math.floor(remainingTime / 86400)
|
|
remainingTime %= 86400
|
|
|
|
let hours = Math.floor(remainingTime / 3600)
|
|
remainingTime %= 3600
|
|
|
|
let minutes = Math.floor(remainingTime / 60)
|
|
let seconds = remainingTime % 60
|
|
|
|
var text = ""
|
|
if (days > 0)
|
|
text += `${days} jour${days > 1 ? 's' : ''}, `
|
|
if (hours > 0)
|
|
text += `${hours} heure${hours > 1 ? 's' : ''}, `
|
|
if (minutes > 0)
|
|
text += `${minutes} minute${minutes > 1 ? 's' : ''}, `
|
|
if (seconds > 0)
|
|
text += `${seconds} seconde${seconds > 1 ? 's' : ''}, `
|
|
text = text.substr(0, text.length - 2)
|
|
counterText.innerText = text
|
|
|
|
let percent = 100 * elapsedTime / totalTime
|
|
counterBar.style.width = `${percent}%`
|
|
counterBarDiv.setAttribute('aria-valuenow', `${dayNumber}`)
|
|
currentDaySpan.innerText = dayNumber
|
|
}
|
|
|
|
setInterval(updateCounter, 1000)
|
|
updateCounter()
|
|
})
|
|
</script>
|
|
</html>
|