You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
108 lines
5.3 KiB
108 lines
5.3 KiB
{% extends 'app/base.html' %}
|
|
{% load static %}
|
|
|
|
{% block content %}
|
|
<script>
|
|
document.getElementById('body').classList.replace('bg-white-color','bg-blue-color');
|
|
document.getElementById('header-color-block').classList.replace('bg-white-color','bg-blue-color');
|
|
document.getElementById('HeaderText').style.display = 'block';
|
|
document.getElementById('maincontainer').classList.replace('align-items-center', 'align-items-top')
|
|
</script>
|
|
|
|
<div class="container" id="welcome_content"> <!-- d-none muss entfernt werden für richtige Funktion -->
|
|
<h1>Wilkommen!</h1>
|
|
<p>Schön das du hier bist!
|
|
<br>Ich wünsche dir viel Freude mit der App.
|
|
<br>Sollten Fragen oder Probleme auftauchen, fühl dich frei in der Community <a href="http://piomint.de/feedback"><u>piomint.de/feedback</u></a> einen Eintrag da zu lassen.
|
|
<br>
|
|
<br><b>Hinweis:</b>
|
|
<br>Diese App ist für Pioniere optimiert und deshalb für den normalen Dienst oder Hilfspionierdienst nicht so gut geeignet.
|
|
<br>Eine Ausnahme ist der "Dauer-Hippi" - Dieser ist in den Einstellung auswählbar.
|
|
</p>
|
|
<br>
|
|
<button class="btn btn-primary" id="allOk">Alles klar</button>
|
|
</div>
|
|
|
|
<div class="d-none" id="dashboard">
|
|
<div class="row justify-content-around mt-3" style="width: 95vw; color: black;">
|
|
<div class="col-5" style="height: 15vh; padding: 1rem; border-radius:1rem; box-shadow: 0 0 0.5rem gray">
|
|
<p style="font-size: 1.2rem;"><b>Monat</b></p>
|
|
<div class="progress" style="height: 12px; width: 90%; border-radius: 2rem; background-color: lightgray;">
|
|
<div class="progress-bar" role="progressbar" style="background-color:rgb(120,170,86); width: 20%; height: 12px;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
<p style="font-size: 2rem;">12h</p>
|
|
</div>
|
|
<div class="col-5" style="height: 15vh; padding: 1rem; border-radius:1rem; box-shadow: 0 0 0.5rem gray">
|
|
<p style="font-size: 1.2rem;"><b>Jahr</b></p>
|
|
<div class="progress" style="height: 12px; width: 90%; border-radius: 2rem; background-color: lightgray;">
|
|
<div class="progress-bar" role="progressbar" style="background-color:rgb(120,170,86); width: 51%; height: 12px;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
<p style="font-size: 2rem;">310h</p>
|
|
</div>
|
|
</div>
|
|
<div class="row justify-content-around" style="width: 95vw; color: black; padding-top: 2rem;">
|
|
<div class="col-11" style="height: 15vh; padding: 1rem; border-radius:1rem; box-shadow: 0 0 0.5rem gray">
|
|
<p style="font-size: 1.2rem;"><b>Timer</b></p>
|
|
<div class="row justify-content-between" style="margin-top: -1rem;">
|
|
<p class="col-5"><b id="timerDisplay" style="font-size: 2.5rem;">00:00</b><i id="secondsDisplay" style="font-size: 1rem;"></i></p>
|
|
<div class="col-7 row justify-content-center">
|
|
<img id="startTimer" src="{% static 'app/images/play.png' %}" alt="play" class="img-fluid col-6" style="height: 55px;">
|
|
<img id="pauseTimer" src="{% static 'app/images/pause.png' %}" alt="play" class="img-fluid col-6 d-none" style="height: 55px;">
|
|
<img id="resetTimer" src="{% static 'app/images/stop.png' %}" alt="play" class="img-fluid col-6 d-none" style="height: 55px">
|
|
</div>
|
|
<script src="{% static 'app/js/timer.js' %}"></script>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row justify-content-around" style="width: 95vw; color: black; padding-top: 2rem;"></div>
|
|
<div class="col-12" style="height: 45vh; padding: 1rem; border-radius:1rem; box-shadow: 0 0 0.5rem gray">
|
|
<p style="font-size: 1.2rem;" ><b>Aktivitäten</b></p>
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">Dauer</th>
|
|
<th scope="col">Datum</th>
|
|
<th scope="col">Typ</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>01:30</td>
|
|
<td>12.09.24</td>
|
|
<td>Dienst</td>
|
|
</tr>
|
|
<tr>
|
|
<td>03:30</td>
|
|
<td>13.09.24</td>
|
|
<td>LDC</td>
|
|
</tr>
|
|
<tr>
|
|
<td>03:00</td>
|
|
<td>08.09.24</td>
|
|
<td>Dienst</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function setAllOk() {
|
|
document.getElementById('welcome_content').style.display = 'none';
|
|
document.getElementById('dashboard').classList.remove('d-none');
|
|
document.getElementById('refresh_icon').classList.remove('d-none')
|
|
document.getElementById('settings_icon').classList.remove('d-none')
|
|
}
|
|
|
|
document.getElementById("allOk").addEventListener('click', function(){
|
|
setAllOk();
|
|
localStorage.setItem('infoReadAllRead', "true");
|
|
})
|
|
|
|
const ReadingState = localStorage.getItem('infoReadAllRead');
|
|
if (ReadingState === "true") {setAllOk();}
|
|
</script>
|
|
|
|
{% endblock %}
|