[webpack.login] added icon+title [TODO: animations]
This commit is contained in:
xdrm-brackets
parent
7deff7ae49
commit
9c00c83240
|
|
@ -0,0 +1,73 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
width="64"
|
||||||
|
height="64"
|
||||||
|
viewBox="0 0 16.933333 16.933334"
|
||||||
|
version="1.1"
|
||||||
|
id="svg845"
|
||||||
|
inkscape:version="0.92.2 5c3e80d, 2017-08-06"
|
||||||
|
sodipodi:docname="icon.svg">
|
||||||
|
<defs
|
||||||
|
id="defs839" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="base"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1.0"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:zoom="2.8"
|
||||||
|
inkscape:cx="38.000412"
|
||||||
|
inkscape:cy="14.377036"
|
||||||
|
inkscape:document-units="mm"
|
||||||
|
inkscape:current-layer="layer1"
|
||||||
|
showgrid="false"
|
||||||
|
units="px"
|
||||||
|
inkscape:snap-page="true"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="1015"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="29"
|
||||||
|
inkscape:window-maximized="1" />
|
||||||
|
<metadata
|
||||||
|
id="metadata842">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
<dc:title></dc:title>
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<g
|
||||||
|
inkscape:label="Layer 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1"
|
||||||
|
transform="translate(0,-280.06665)">
|
||||||
|
<g
|
||||||
|
id="g877"
|
||||||
|
transform="matrix(0.19411325,0,0,0.19411325,-3.8930111,276.16682)">
|
||||||
|
<path
|
||||||
|
id="path855"
|
||||||
|
d="m 55.300781,71.720703 c -1.125,1.025 -2.18789,2.106641 -3.15039,3.251953 -0.9625,1.145313 -1.825782,2.355469 -2.550782,3.636719 -0.725,1.28125 -1.312109,2.633594 -1.724609,4.066406 -0.4125,1.432813 -0.648828,2.944922 -0.673828,4.544922 0,1.75 0.21875,3.532032 0.640625,5.277344 0.421875,1.745312 1.046875,3.454297 1.859375,5.060547 0.8125,1.606249 1.8125,3.110546 2.984375,4.443356 1.171875,1.33282 2.515625,2.49493 4.015625,3.41993 0.925,0.575 1.8625,1.01347 2.794922,1.32421 0.932422,0.31075 1.858984,0.49297 2.763672,0.55469 0.904687,0.0617 1.787109,0.004 2.628906,-0.16797 0.841797,-0.17207 1.642969,-0.45898 2.386719,-0.84961 0.74375,-0.39062 1.430468,-0.88652 2.041015,-1.48047 0.610547,-0.59394 1.145703,-1.28437 1.587891,-2.0664 0.442187,-0.78203 0.790625,-1.65449 1.029297,-2.60938 0.238672,-0.954879 0.367187,-1.992966 0.367187,-3.105466 0.025,-1.85 -0.30664,-3.6625 -0.892578,-5.421875 -0.585937,-1.759375 -1.426172,-3.466015 -2.419922,-5.103515 -0.99375,-1.6375 -2.141406,-3.205078 -3.339843,-4.689453 C 64.45,80.322266 63.2,78.921094 62,77.621094 c -2,-2.2 -4.299219,-4.100391 -6.699219,-5.900391 z"
|
||||||
|
style="fill:#de5b0e;fill-opacity:1;stroke:none;stroke-width:13.06582642;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.83406115"
|
||||||
|
inkscape:connector-curvature="0" />
|
||||||
|
<path
|
||||||
|
id="path853"
|
||||||
|
d="m 57.630859,20.091797 c -2.096093,-0.02266 -4.229101,0.24668 -6.375,0.853515 -1.072949,0.303418 -2.149731,0.692505 -3.226562,1.169922 -1.076831,0.477417 -2.153516,1.044532 -3.228516,1.707032 -1.1125,0.7 -2.121093,1.527148 -3.021484,2.457031 -0.900391,0.929883 -1.692188,1.961328 -2.375,3.068359 -0.682813,1.107031 -1.257031,2.290039 -1.716797,3.521485 -0.459766,1.231445 -0.805859,2.511328 -1.037109,3.814453 -0.23125,1.303125 -0.346485,2.629101 -0.34375,3.951172 0.0027,1.32207 0.123047,2.641406 0.365234,3.929687 0.242187,1.288281 0.606641,2.546289 1.09375,3.748047 0.487109,1.201758 1.096484,2.345703 1.833984,3.408203 0.85,1.225 1.8375,2.344141 2.914063,3.384766 1.076562,1.040625 2.242969,2.003515 3.449219,2.916015 2.4125,1.825 4.98789,3.44961 7.33789,5.09961 2.25,1.6 4.45,3.251172 6.5625,5.013672 2.1125,1.7625 4.13711,3.6375 6.03711,5.6875 1.55,1.675 3.124609,3.48125 4.599609,5.398437 1.475,1.917188 2.85,3.94375 4,6.0625 1.15,2.11875 2.075391,4.329688 2.650391,6.609375 0.2875,1.139844 0.487109,2.296289 0.583984,3.46875 0.09687,1.172461 0.0918,2.360547 -0.0332,3.560547 1.7625,-1.8 3.349023,-3.737891 4.761719,-5.787109 1.412695,-2.049219 2.651562,-4.210157 3.714843,-6.457032 1.063282,-2.246875 1.951758,-4.579687 2.666016,-6.972656 0.714258,-2.392969 1.253516,-4.846484 1.619141,-7.333984 0.365625,-2.4875 0.556836,-5.008594 0.574218,-7.539063 0.01738,-2.530468 -0.138281,-5.069922 -0.46875,-7.591797 C 90.237891,54.718359 89.732617,52.213672 89.054688,49.751953 88.376758,47.290234 87.525,44.871484 86.5,42.521484 c -0.8375,-1.9375 -1.848242,-3.847461 -3.009766,-5.6875 -1.161523,-1.840039 -2.474218,-3.609765 -3.914062,-5.263672 -1.439844,-1.653906 -3.007227,-3.193164 -4.679688,-4.572265 -1.672461,-1.379102 -3.449218,-2.597656 -5.308593,-3.613281 -1.859375,-1.015625 -3.800196,-1.827149 -5.800782,-2.390625 -2.000586,-0.563477 -4.060156,-0.879688 -6.15625,-0.902344 z"
|
||||||
|
style="fill:#dd9d15;fill-opacity:1;stroke:none;stroke-width:13.06582642;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.83406115"
|
||||||
|
inkscape:connector-curvature="0" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 5.2 KiB |
|
|
@ -10,3 +10,9 @@ gstore.add('popup_click', function(){
|
||||||
|
|
||||||
gstore.add('login_class', 'neutral');
|
gstore.add('login_class', 'neutral');
|
||||||
gstore.add('login_error_text', '');
|
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);
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -54,7 +54,7 @@ body{
|
||||||
font-size: 1.3em;
|
font-size: 1.3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
span{
|
& > span{
|
||||||
display: block;
|
display: block;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 1em;
|
margin: 1em;
|
||||||
|
|
@ -71,6 +71,95 @@ body{
|
||||||
opacity: 1;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,8 @@
|
||||||
|
|
||||||
|
|
||||||
<div id='LOGIN_REDIRECT'>
|
<div id='LOGIN_REDIRECT'>
|
||||||
|
<div class='icon' @mouseover='gstore.icon.start' @mouseout='gstore.icon.stop'></div>
|
||||||
|
<div class='title'><b>P</b><i>lateforme</i> <b>A</b><i>ssistée de</i> <b>T</b><i>raitement</i> <b>A</b><i>dministratif des</i> <b>T</b><i>aches d'</i><b>E</b><i>nseignement</i></div>
|
||||||
<button :class='gstore.login_class' @click='gstore.popup_click'>Me connecter</button>
|
<button :class='gstore.login_class' @click='gstore.popup_click'>Me connecter</button>
|
||||||
<span :class='gstore.login_class'>{{ gstore.login_error_text }}</span>
|
<span :class='gstore.login_class'>{{ gstore.login_error_text }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue