From 9c00c832407124554e510ab61e2b78fde8cdfd09 Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Tue, 6 Mar 2018 18:02:04 +0100 Subject: [PATCH] [webpack.login] added icon+title [TODO: animations] --- public_html/asset/svg/icon.svg | 73 +++++++++++++++++++++++++++ webpack/data/login.js | 8 ++- webpack/scss/layout.scss | 91 +++++++++++++++++++++++++++++++++- webpack/vue/login_wrapper.vue | 2 + 4 files changed, 172 insertions(+), 2 deletions(-) create mode 100644 public_html/asset/svg/icon.svg diff --git a/public_html/asset/svg/icon.svg b/public_html/asset/svg/icon.svg new file mode 100644 index 0000000..cadbdea --- /dev/null +++ b/public_html/asset/svg/icon.svg @@ -0,0 +1,73 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + diff --git a/webpack/data/login.js b/webpack/data/login.js index 98e3dbd..5752976 100644 --- a/webpack/data/login.js +++ b/webpack/data/login.js @@ -9,4 +9,10 @@ gstore.add('popup_click', function(){ }); gstore.add('login_class', 'neutral'); -gstore.add('login_error_text', ''); \ No newline at end of file +gstore.add('login_error_text', ''); + + +gstore.add('icon', { it: null, a: new Audio('https://cloud.xdrm.io/index.php/s/6oJe9GzzrwpqJgj/download') }); +gstore.get.icon.start = (function(e){ this.stop().it=setInterval((function(){ this.play(); }).bind(this.a), 100*100); }).bind(gstore.get.icon); +gstore.get.icon.stop = (function(e){ !isNaN(parseInt(gstore.get.icon.it)) && clearInterval(gstore.get.icon.it); return this; }).bind(gstore.get.icon); + diff --git a/webpack/scss/layout.scss b/webpack/scss/layout.scss index 723e64c..1f71366 100644 --- a/webpack/scss/layout.scss +++ b/webpack/scss/layout.scss @@ -54,7 +54,7 @@ body{ font-size: 1.3em; } - span{ + & > span{ display: block; text-align: center; margin: 1em; @@ -71,6 +71,95 @@ body{ opacity: 1; } } + + $easter-egg-timeout: 5; + + div.icon{ + display: block; + width: 5em; + height: 5em; + margin-bottom: 1em;; + + background: url('/asset/svg/icon.svg') center center no-repeat; + background-size: auto 100%; + + cursor: pointer; + + // disable user-select + -webkit-user-select: none; /* Chrome all / Safari all */ + -moz-user-select: none; /* Firefox all */ + -ms-user-select: none; /* IE 10+ */ + user-select: none; /* Likely future */ + + transform: rotate(0deg); + transition: transform 1s ease-in-out; + + &:hover{ + transform: rotate(90deg); + background-size: auto 50%; + + transition: transform 1s ease-in-out #{$easter-egg-timeout + 3}s, + background-size 1s ease-in-out #{$easter-egg-timeout + 5}s; + } + + } + + div.title{ + color: $primary-color; + font-size: 1.2em; + text-align: center; + margin-bottom: 1em; + + transform: scale(1) translateX(0); + + transition: transform .2s ease-in-out; + + & > i{ + display: inline-block; + font-style: normal; + color: $primary-color; + + opacity: 1; + transform: scale(1); + + transition: opacity .2s ease-in-out, + transform .2s ease-in-out; + } + + & > b{ + display: inline-block; + font-weight: normal; + + transform: scale(1); + + transition: transform .2s ease-in-out; + } + + + + } + + div.icon:hover + div.title{ + + transform: translateX(1.3em) scale(.5); + + transition: transform 1s ease-in-out #{$easter-egg-timeout + 2}s; + + & > i { + opacity: .1; + transform: scale(.9); + + transition: opacity 1s ease-in-out #{$easter-egg-timeout}s, + transform 1s ease-in-out #{.2 + $easter-egg-timeout}s; + + } + + & > b { + transform: scale(3); + + transition: transform 1s ease-in-out #{$easter-egg-timeout + 2}s; + } + } } } diff --git a/webpack/vue/login_wrapper.vue b/webpack/vue/login_wrapper.vue index fdb149b..69b625b 100644 --- a/webpack/vue/login_wrapper.vue +++ b/webpack/vue/login_wrapper.vue @@ -3,6 +3,8 @@
+
+
Plateforme Assistée de Traitement Administratif des Taches d'Enseignement
{{ gstore.login_error_text }}