samuelzielke
/
piomint
1
0
Fork 0
Code Issues 11 Pull Requests 1 Packages Projects Releases Wiki Activity

Create Welcome and Login Page with Animation

Browse Source
sortierung
Samuel Zielke 1 year ago
parent 9609ebcb51
commit 00969016b0
7 changed files with 85 additions and 10 deletions
Show Stats Download Patch File Download Diff File

BIN
app/static/app/.DS_Store vendored
View File

Binary file not shown.

25
app/static/app/css/custom.css
Unescape View File

@ -26,3 +26,28 @@
.fade-in { .fade-in {
animation: fade-in 1s forwards; animation: fade-in 1s forwards;
} }
#header-bg-block {
height: 8vh;
padding: 0;
}
#header-color-block {
border-bottom-left-radius: 2rem;
border-bottom-right-radius: 2rem;
height: 7vh;
}
.maincontainer {
height: 92vh;
transition: height 1s ease, transform 1s ease;
}
.bg-white-color {
background-color: white;
}
.bg-blue-color {
background-color: #026670;
transition: background-color 1s ease, transform 1s ease;
}

BIN
app/static/app/images/appleicon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 45 KiB

After

Width:  |  Height:  |  Size: 40 KiB

BIN
app/static/app/images/appleicon_whitebg.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

10
app/templates/app/base.html
Unescape View File

@ -13,14 +13,16 @@
<title>PioMint</title> <title>PioMint</title>
</head> </head>
<body style="overflow: hidden; background-color: #026670;"> <body id="body" style="overflow: hidden;" class="bg-white-color">
<!-- HEADER --> <!-- HEADER -->
<div class="container-fluid" style="background-color: white; height: 6vh; padding: 0;"> <div class="container-fluid header-bg-block bg-white-color" id="header-bg-block">
<div class="container-fluid" style="background-color: #026670; border-bottom-left-radius: 2rem; border-bottom-right-radius: 2rem; height: 5vh;"></div> <div class="container-fluid header-color-block text-center bg-white-color" id="header-color-block" style="color: white;">
<h2 id="HeaderText" class="pt-2" style="display: none;"><b>PIO</b><b style="color: rgb(120,170,86);;">MINT</b></h2>
</div>
</div> </div>
<!-- CONTENT AREA --> <!-- CONTENT AREA -->
<div class="container-fluid d-flex justify-content-center align-items-center" style="height: 94vh; background-color: white;"> <div id="maincontainer" class="maincontainer container-fluid d-flex justify-content-center align-items-center" style="background-color: white;">
{% block content %} {% block content %}
{% endblock %} {% endblock %}
</div> </div>

56
app/templates/app/login.html
Unescape View File

@ -2,12 +2,60 @@
{% load static %} {% load static %}
{% block content %} {% block content %}
<div class="text-center"> <div class="text-center" id="content">
<img src="{% static 'app/images/watch_transparent.png' %}" alt="Bildbeschreibung" class="img-fluid w-50"> <img src="{% static 'app/images/watch_transparent.png' %}" alt="Bildbeschreibung" class="img-fluid w-50" id="image">
<br> <br>
<h1><b>PIOMINT</b></h1> <h1><b>PIO</b><b style="color: rgb(120,170,86);">MINT</b></h1>
<br> <br>
<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>
<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 %} {% endblock %}

4
piomint/pwa_settings.py
Unescape View File

@ -14,13 +14,13 @@ PWA_APP_STATUS_BAR_COLOR = 'black-translucent'
PWA_SERVICE_WORKER_PATH = os.path.join(BASE_DIR, 'app/static/app/js', 'serviceworker.js') PWA_SERVICE_WORKER_PATH = os.path.join(BASE_DIR, 'app/static/app/js', 'serviceworker.js')
PWA_APP_ICONS = [ PWA_APP_ICONS = [
{ {
'src': '/static/app/images/appleicon.png', 'src': '/static/app/images/appleicon_whitebg.png',
'sizes': '160x160' 'sizes': '160x160'
} }
] ]
PWA_APP_ICONS_APPLE = [ PWA_APP_ICONS_APPLE = [
{ {
'src': '/static/app/images/appleicon.png', 'src': '/static/app/images/appleicon_whitebg.png',
'sizes': '160x160' 'sizes': '160x160'
} }
] ]

Write Preview
Loading…
Cancel
Save

Powered by TurnKey Linux.