89 lines
1.5 KiB
HTML
89 lines
1.5 KiB
HTML
{% extends 'kfet/base.html' %}
|
|
{% load static %}
|
|
|
|
{% block extra_head %}
|
|
<script type="text/javascript">
|
|
kfet_open.add_callback(function(status) {
|
|
const div = document.getElementById("main");
|
|
switch (status) {
|
|
case "opened":
|
|
div.className = "green";
|
|
document.title = "🟢 Ouvert | K-Fêt";
|
|
break;
|
|
case "closed":
|
|
div.className = "red";
|
|
document.title = "🔴 Fermé | K-Fêt";
|
|
break;
|
|
default:
|
|
div.className = "orange";
|
|
document.title = "🟠 Indéfini | K-Fêt";
|
|
}
|
|
});
|
|
</script>
|
|
<style>
|
|
#main {
|
|
margin: 0;
|
|
padding: 0;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
font-size: min(15vw, 0.75*(100vh - 50px));
|
|
display: flex;
|
|
justify-content: center;
|
|
align-content: center;
|
|
flex-direction: column;
|
|
position: absolute;
|
|
left: 0px;
|
|
width: 100vw;
|
|
top: 50px;
|
|
bottom: 0;
|
|
}
|
|
|
|
.red {
|
|
background-color: red;
|
|
color: white;
|
|
}
|
|
|
|
.orange {
|
|
background-color: orange;
|
|
color: black;
|
|
}
|
|
|
|
|
|
.green {
|
|
background-color: green;
|
|
color: white;
|
|
}
|
|
|
|
#main > p {
|
|
overflow: hidden;
|
|
display: none;
|
|
}
|
|
|
|
.orange > #orange {
|
|
display: block;
|
|
}
|
|
|
|
.green > #green {
|
|
display: block;
|
|
}
|
|
|
|
.red > #red {
|
|
display: block;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block title %}Indicateur{% endblock %}
|
|
|
|
{% block header %}{% endblock %}
|
|
{% block help %}{% endblock %}
|
|
|
|
{% block content %}
|
|
|
|
<div id="main" class="orange">
|
|
<p id="orange">Non défini</p>
|
|
<p id="red">Fermé</p>
|
|
<p id="green">Ouvert</p>
|
|
</div>
|
|
|
|
{% endblock %}
|