|
|
|
|
@ -2,12 +2,60 @@
|
|
|
|
|
{% load static %}
|
|
|
|
|
|
|
|
|
|
{% block content %}
|
|
|
|
|
<div class="text-center">
|
|
|
|
|
<img src="{% static 'app/images/watch_transparent.png' %}" alt="Bildbeschreibung" class="img-fluid w-50">
|
|
|
|
|
<div class="text-center" id="content">
|
|
|
|
|
<img src="{% static 'app/images/watch_transparent.png' %}" alt="Bildbeschreibung" class="img-fluid w-50" id="image">
|
|
|
|
|
<br>
|
|
|
|
|
<h1><b>PIOMINT</b></h1>
|
|
|
|
|
<h1><b>PIO</b><b style="color: rgb(120,170,86);">MINT</b></h1>
|
|
|
|
|
<br>
|
|
|
|
|
<br>
|
|
|
|
|
<button type="button" class="btn btn-primary mt-5" style="border-radius: 2rem; font-size: 2.5rem; padding: 0rem 0.75rem;">→</button>
|
|
|
|
|
<button type="button" class="btn btn-primary mt-5" style="border-radius: 2rem; font-size: 2.5rem; padding: 0rem 0.75rem;" id="button">→</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="new-content" style="display: none;" class="mb-3">
|
|
|
|
|
<h2>Login</h2>
|
|
|
|
|
<form>
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<label for="exampleInputEmail1">Benutzername</label>
|
|
|
|
|
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
|
|
|
|
|
<!-- <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> -->
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<label for="exampleInputPassword1">Passwort</label>
|
|
|
|
|
<input type="password" class="form-control" id="exampleInputPassword1">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-group form-check">
|
|
|
|
|
<input type="checkbox" class="form-check-input" id="exampleCheck1">
|
|
|
|
|
<label class="form-check-label" for="exampleCheck1">Eingeloggt bleiben</label>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <button type="submit" class="btn btn-primary">Login</button> -->
|
|
|
|
|
<a href="/app/home" class="btn btn-primary">Login (Überbrücken)</a>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
document.getElementById('button').addEventListener('click', function() {
|
|
|
|
|
// Elemente nach links aus dem Bildschirm bewegen
|
|
|
|
|
document.getElementById('content').classList.add('slide-out');
|
|
|
|
|
|
|
|
|
|
setTimeout(function() {
|
|
|
|
|
// Size Up the Header Block
|
|
|
|
|
document.getElementById('header-color-block').classList.replace('bg-white-color', 'bg-blue-color')
|
|
|
|
|
document.getElementById('HeaderText').style.display = 'block';
|
|
|
|
|
document.getElementById('HeaderText').classList.add('fade-in');
|
|
|
|
|
document.getElementById('body').classList.replace('bg-white-color', 'bg-blue-color');
|
|
|
|
|
}, 200);
|
|
|
|
|
|
|
|
|
|
setTimeout(function(){
|
|
|
|
|
document.getElementById('maincontainer').classList.replace('align-items-center', 'pt-5')
|
|
|
|
|
}, 400);
|
|
|
|
|
|
|
|
|
|
// Nach einer Sekunde (Animationsdauer) den neuen Bereich anzeigen
|
|
|
|
|
setTimeout(function() {
|
|
|
|
|
document.getElementById('content').style.display = 'none';
|
|
|
|
|
var newContent = document.getElementById('new-content');
|
|
|
|
|
newContent.style.display = 'block';
|
|
|
|
|
newContent.classList.add('fade-in');
|
|
|
|
|
}, 800); // Dauer der slide-out-Animation (1 Sekunde)
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
{% endblock %}
|
|
|
|
|
|
