From 8e986c15b20cf0f101b4fee61f0c4104b13b935c Mon Sep 17 00:00:00 2001 From: Paul Date: Mon, 20 Jul 2020 21:39:31 +0200 Subject: [PATCH] pretty animations for login/register --- assets/static/css/style.css | 11 +- assets/static/js/particle.json | 108 ++++++++++++++++++++ assets/templates/layouts/auth_login.tmpl | 13 ++- assets/templates/layouts/auth_register.tmpl | 25 +++-- 4 files changed, 145 insertions(+), 12 deletions(-) create mode 100644 assets/static/js/particle.json diff --git a/assets/static/css/style.css b/assets/static/css/style.css index 51fb8b4..b3b780b 100644 --- a/assets/static/css/style.css +++ b/assets/static/css/style.css @@ -59,4 +59,13 @@ display: inline-block; padding: 20px; line-height: 1.2em; -} \ No newline at end of file +} + +#particles-js{ + position: absolute; + width: 100%; + height: 99%; + background-size: cover; + background-position: 50% 50%; + background-repeat: no-repeat; + } \ No newline at end of file diff --git a/assets/static/js/particle.json b/assets/static/js/particle.json new file mode 100644 index 0000000..fc4a4b9 --- /dev/null +++ b/assets/static/js/particle.json @@ -0,0 +1,108 @@ +{ + "particles": { + "number": { + "value": 20, + "density": { + "enable": true, + "value_area": 500 + } + }, + "color": { + "value": "#ffffff" + }, + "shape": { + "type": "circle", + "stroke": { + "width": 0, + "color": "#000000" + } + }, + "opacity": { + "value": 0.3, + "random": false, + "anim": { + "enable": false, + "speed": 1, + "opacity_min": 0.1, + "sync": false + } + }, + "size": { + "value": 0, + "random": true, + "anim": { + "enable": false, + "speed": 40, + "size_min": 0.1, + "sync": false + } + }, + "line_linked": { + "enable": true, + "distance": 250, + "color": "#ffffff", + "opacity": 0.5, + "width": 1 + }, + "move": { + "enable": true, + "speed": 0.3, + "direction": "none", + "random": false, + "straight": false, + "out_mode": "out", + "attract": { + "enable": false, + "rotateX": 600, + "rotateY": 1200 + } + } + }, + "interactivity": { + "detect_on": "window", + "events": { + "onhover": { + "enable": false, + "mode": "repulse" + }, + "onclick": { + "enable": true, + "mode": "bubble" + }, + "resize": true + }, + "modes": { + "grab": { + "distance": 800, + "line_linked": { + "opacity": 1 + } + }, + "bubble": { + "distance": 0, + "size": 40, + "duration": 2, + "opacity": 8, + "speed": 3 + }, + "repulse": { + "distance": 100 + }, + "push": { + "particles_nb": 4 + }, + "remove": { + "particles_nb": 2 + } + } + }, + "retina_detect": true, + "config_demo": { + "hide_card": false, + "background_color": "#b61924", + "background_image": "", + "background_position": "50% 50%", + "background_repeat": "no-repeat", + "background_size": "cover" + } + } \ No newline at end of file diff --git a/assets/templates/layouts/auth_login.tmpl b/assets/templates/layouts/auth_login.tmpl index c8edca8..da9d7b8 100644 --- a/assets/templates/layouts/auth_login.tmpl +++ b/assets/templates/layouts/auth_login.tmpl @@ -14,6 +14,7 @@
+
@@ -32,7 +33,7 @@
- + mail_outline @@ -45,7 +46,7 @@
- + lock_outline @@ -75,10 +76,9 @@
- +
@@ -100,8 +100,11 @@ $notification.parentNode.removeChild($notification); }); }); + + particlesJS.load('particles-js', '{{ static "js/particle.json" }}'); }); + \ No newline at end of file diff --git a/assets/templates/layouts/auth_register.tmpl b/assets/templates/layouts/auth_register.tmpl index 9f5cd5e..9a8655e 100644 --- a/assets/templates/layouts/auth_register.tmpl +++ b/assets/templates/layouts/auth_register.tmpl @@ -14,6 +14,7 @@
+
@@ -23,7 +24,7 @@
- + person_outline @@ -31,7 +32,7 @@
- + mail_outline @@ -39,7 +40,7 @@
- + lock_outline @@ -77,10 +78,9 @@
- +
@@ -93,6 +93,19 @@
+ + \ No newline at end of file