Ajout du lien d'affichage de l'interface de connection + design du formulaire+filtre +js qui affiche/cache

This commit is contained in:
xdrm-brackets 2015-10-22 00:13:58 +02:00
parent 7a8131cfba
commit 4298b7fb77
8 changed files with 264 additions and 66 deletions

View File

@ -77,7 +77,7 @@
display: block; display: block;
width: 5em; /* pour faire un carré */ width: 5em; /* pour faire un carré */
background: transparent url(../src/menu/menu_icon/home@hover.svg) center center no-repeat; background: transparent url(../src/header/icon.svg) center center no-repeat;
background-size: 40%; background-size: 40%;
} }

View File

@ -41,7 +41,6 @@ body{
/* background */ /* background */
background: #ecf0f1; background: #ecf0f1;
background: url(../src/wallpaper.jpg) top left no-repeat; background: url(../src/wallpaper.jpg) top left no-repeat;
background: url(http://7-themes.com/data_images/out/4/6780645-colorful-blur-wallpaper.jpg) top left no-repeat;
background-size: cover; background-size: cover;
background-attachment: fixed; background-attachment: fixed;
@ -161,3 +160,128 @@ body{
/* Z */ /* Z */
z-index: 7; z-index: 7;
} }
#AUTH_FILTER{
/* position */
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* background */
background-color: rgba(0, 0, 0,.5);
/* Z */
z-index: 100;
}
/* affichage du filtre si actif */
#AUTH_FILTER.active{ display: block; }
/* le formulaire */
#AUTH{
/* position */
display: block;
position: fixed;
/*top: 10em;*/ top: -150%;
left: calc( 50% - 25em/2 - 2em );
width: 25em;
padding: 2em;
/* border */
border-radius: 5px;
box-shadow: 0 0 .5em #333;
/* background */
background-color: #fff;
/* Z */
z-index: 101;
transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
}
/* affichage du formulaire si filtre actif */
#AUTH_FILTER.active + #AUTH{ top: 10em; }
/* le titre */
#AUTH label{
display: block;
margin-bottom: 1em;
margin-left: 1em;
font-size: 2em;
}
/* tout les champs du formulaire */
#AUTH input{
/* position */
display: block;
position: relative;
margin-top: 1em;
margin-left: 1em;
width: calc( 100% - 2*2em );
padding: 1em;
/* border */
border-radius: 5px;
border: 1px solid #b3b3b3;
/* foreground */
color: #777;
}
/* le bouton */
#AUTH input[type=button]{
/* position */
width: calc( 100% - 2em );
/* border */
border-color: #3dcc70;
/* foreground */
color: #3dcc70;
font-weight: bold;
text-transform: uppercase;
/* extra */
cursor: pointer;
/* animation */
transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
}
/* quand on selectionne le texte */
#AUTH input[type=text]:focus,
#AUTH input[type=password]:focus{
border-color: #3dcc70;
color: #000;
}
/* quand on a la souris sur le bouton */
#AUTH input[type=button]:hover{
background-color: #3dcc70;
color: #fff;
}

View File

@ -44,7 +44,7 @@
position: relative; position: relative;
height: 4em; height: 4em;
padding-left: 5em; padding-left: 5em;
margin-bottom: 1em ; margin-top: 1em ;
/* border */ /* border */
border-bottom: 3px solid transparent; border-bottom: 3px solid transparent;

View File

@ -81,7 +81,7 @@ $notifNotifNum = 5;
<?php <?php
/* membres */ /* membres */
if( $memberNotifNum > 0 ) echo "<div class='member' data-num='".$memberNotifNum."'></div>"; if( $memberNotifNum > 0 ) echo "<div class='member' data-num='".$memberNotifNum."'></div>";
else echo "<div class='member'></div>"; else echo "<div class='member'></div>";
/* messages */ /* messages */
if( $messageNotifNum > 0 ) echo "<div class='message' data-num='".$messageNotifNum."'></div>"; if( $messageNotifNum > 0 ) echo "<div class='message' data-num='".$messageNotifNum."'></div>";
@ -119,30 +119,16 @@ $notifNotifNum = 5;
</div> </div>
<div style='display:none;'>
<?php
if( $LOGIN_postAreSet && $_SESSION['username'] == null ){ // si on a soumis un formulaire (mais sans succès)
echo "<div id='AUTH_FILTER' class='active'></div>";
echo "<form id='AUTH' action='' method='POST'>";
echo "<label>Connection</label>";
echo "<input type='text' name='username' placeholder='Username' value='".$_POST['username']."'>";
echo "<input type='password' name='password' placeholder='Password' value='".$_POST['password']."'>";
echo "<span class='errorbox'>&nbsp Identifiants incorrects.</span>";
echo "<input type='submit' value='Connection'>";
echo "</form>";
}else{ // si chargement normal de la page <div id='AUTH_FILTER'></div>
<form id='AUTH' action='' method='POST'>
<label>Connection</label>
<input type='text' name='username' placeholder='Username'>
<input type='password' name='password' placeholder='Password'>
<span class='errorbox'>&nbsp</span>
<input type='button' value='Connection'>
</form>
echo "<div id='AUTH_FILTER'></div>";
echo "<form id='AUTH' action='' method='POST'>";
echo "<label>Connection</label>";
echo "<input type='text' name='username' placeholder='Username'>";
echo "<input type='password' name='password' placeholder='Password'>";
echo "<span class='errorbox'>&nbsp</span>";
echo "<input type='submit' value='Connection'>";
echo "</form>";
}
?></div>

View File

@ -12,7 +12,8 @@
* [2] Gestion des liens * * [2] Gestion des liens *
* [a] catégories * * [a] catégories *
* [b] sous-parties * * [b] sous-parties *
* [3] Gestion des formulaires * * [3] Gestion de l'authentification *
* [4] Gestion des formulaires *
* * * *
* * * *
* * * *
@ -34,12 +35,14 @@ var API;
/* Structure de la page */ /* Structure de la page */
var DOM = { var DOM = {
WRAPPER : document.querySelector('#WRAPPER'), WRAPPER : document.querySelector('#WRAPPER'),
MENU : document.querySelector('#MENU'), MENU : document.querySelector('#MENU'),
HEADER : document.querySelector('#HEADER'), HEADER : document.querySelector('#HEADER'),
SUBHEADER : document.querySelector('#SUBHEADER'), SUBHEADER : document.querySelector('#SUBHEADER'),
SUBSECTIONS : document.querySelector("#SUBHEADER > nav"), SUBSECTIONS : document.querySelector("#SUBHEADER > nav"),
CONTAINER : document.querySelector('#CONTAINER'), CONTAINER : document.querySelector('#CONTAINER'),
AUTHFILTER : document.querySelector('#AUTH_FILTER'),
AUTH : document.querySelector('#AUTH')
}; };
@ -156,7 +159,22 @@ var DOM = {
/* [3] GESTION DES FORMULAIRES /* [3] GESTION DE L'AUTHENTIFICATION
==============================================================*/
// ouvre l'interface d'authentification quand clic sur zone verte
DOM.MENU.children[0].addEventListener('click', function(e){
DOM.AUTHFILTER.className = 'active';
}, false);
// ferme l'interface d'authentification quand clic sur filtre
DOM.AUTHFILTER.addEventListener('click', function(e){
DOM.AUTHFILTER.className = '';
}, false);
/* [4] GESTION DES FORMULAIRES
==============================================================*/ ==============================================================*/
/* INITIALISE UN FORMULAIRE POUR QU'IL INTERPRETE UN OBJET LORS DE SA SOUMISSIONS /* INITIALISE UN FORMULAIRE POUR QU'IL INTERPRETE UN OBJET LORS DE SA SOUMISSIONS
* *

0
js/pageManager.js Normal file → Executable file
View File

0
js/shortcut.js Normal file → Executable file
View File

View File

@ -9,14 +9,18 @@
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="189.34375" width="20.5585mm"
height="192.59375" height="23.953442mm"
id="svg9954" viewBox="0 0 72.845081 84.874394"
id="svg4286"
version="1.1" version="1.1"
inkscape:version="0.48.4 r9939" inkscape:version="0.48.4 r9939"
sodipodi:docname="icon.svg"> sodipodi:docname="home@hover.svg"
inkscape:export-filename="/home/xdrm/Bureau/GRAPHISM/logo/flask100.png"
inkscape:export-xdpi="123.54987"
inkscape:export-ydpi="123.54987">
<defs <defs
id="defs9956" /> id="defs4288" />
<sodipodi:namedview <sodipodi:namedview
id="base" id="base"
pagecolor="#ffffff" pagecolor="#ffffff"
@ -24,23 +28,32 @@
borderopacity="1.0" borderopacity="1.0"
inkscape:pageopacity="0.0" inkscape:pageopacity="0.0"
inkscape:pageshadow="2" inkscape:pageshadow="2"
inkscape:zoom="3.959798" inkscape:zoom="5.6"
inkscape:cx="155.75561" inkscape:cx="13.541924"
inkscape:cy="82.870037" inkscape:cy="27.605616"
inkscape:document-units="px" inkscape:document-units="px"
inkscape:current-layer="layer1" inkscape:current-layer="g4521-8"
showgrid="false" showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:window-width="1920" inkscape:window-width="1920"
inkscape:window-height="1056" inkscape:window-height="1056"
inkscape:window-x="0" inkscape:window-x="0"
inkscape:window-y="24" inkscape:window-y="24"
inkscape:window-maximized="1" inkscape:window-maximized="1"
fit-margin-top="0" inkscape:snap-bbox="false"
fit-margin-left="0" inkscape:bbox-nodes="true"
fit-margin-right="0" inkscape:bbox-paths="true"
fit-margin-bottom="0" /> inkscape:snap-bbox-edge-midpoints="false"
inkscape:object-paths="true"
inkscape:object-nodes="true"
inkscape:snap-grids="true"
inkscape:snap-page="true"
inkscape:snap-nodes="true" />
<metadata <metadata
id="metadata9959"> id="metadata4291">
<rdf:RDF> <rdf:RDF>
<cc:Work <cc:Work
rdf:about=""> rdf:about="">
@ -52,30 +65,87 @@
</rdf:RDF> </rdf:RDF>
</metadata> </metadata>
<g <g
inkscape:label="Calque 1" inkscape:label="Layer 1"
inkscape:groupmode="layer" inkscape:groupmode="layer"
id="layer1" id="layer1"
transform="translate(-57.65625,-280.5)"> transform="translate(15.022256,-191.80268)">
<g <g
id="g11104" id="g4517"
style="font-size:210.8180542px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sawasdee;-inkscape-font-specification:Sawasdee" transform="translate(-609.72838,51.305182)">
transform="matrix(-1,0,0,1,304.65625,0)"> <g
<path id="g4519"
sodipodi:nodetypes="cccccccccccccccccc" transform="matrix(4.0416382,0,0,4.0416382,422.29019,-4060.1699)">
inkscape:connector-curvature="0" <g
id="path11106" id="g4191"
d="m 113.85782,301.75341 -35.104302,80.90239 13.488475,0.004 56.793577,0 29.59631,69.18045 13.70879,0 33.56206,-80.87489 -68.7398,-0.0559 -29.59631,-69.15593 z m 6.95232,13.88016 23.45183,55.96125 -47.39326,0 z m 41.15086,66.34077 47.39326,0 -23.94143,55.98573 z" inkscape:export-xdpi="73.431374"
style="text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#2dcc70;fill-opacity:1;stroke:#419e6e;stroke-width:3.98300004;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;font-family:URW Gothic L;-inkscape-font-specification:URW Gothic L Book" /> inkscape:export-ydpi="73.431374"
</g> style="fill:#ababab;fill-opacity:1" />
<g <g
style="font-size:210.8180542px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sawasdee;-inkscape-font-specification:Sawasdee" inkscape:export-ydpi="73.431374"
id="text9962"> inkscape:export-xdpi="73.431374"
<path id="g4195"
style="text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#2dcc70;fill-opacity:1;stroke:#419e6e;stroke-width:3.983;stroke-opacity:1;font-family:URW Gothic L;-inkscape-font-specification:URW Gothic L Book;stroke-miterlimit:4;stroke-dasharray:none" transform="translate(0.18745231,-35.076806)">
d="m 113.85782,301.75341 -35.104302,80.90239 13.488475,0.004 56.793577,0 29.59631,69.18045 13.70879,0 33.56206,-80.87489 -68.7398,-0.0559 -29.59631,-69.15593 z m 6.95232,13.88016 23.45183,55.96125 -47.39326,0 z m 41.15086,66.34077 47.39326,0 -23.94143,55.98573 z" <circle
id="path9967" style="fill:#bdbdbd;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.442;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
inkscape:connector-curvature="0" id="circle4197"
sodipodi:nodetypes="cccccccccccccccccc" /> cx="12.003395"
cy="1040.9"
r="15.162507"
inkscape:export-xdpi="73.431374"
inkscape:export-ydpi="73.431374"
d="m 27.165902,1040.9 c 0,8.374 -6.788486,15.1625 -15.162507,15.1625 -8.3740213,0 -15.162507,-6.7885 -15.162507,-15.1625 0,-8.374 6.7884857,-15.1625 15.162507,-15.1625 8.374021,0 15.162507,6.7885 15.162507,15.1625 z" />
<path
style="fill:#ababab;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.442;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
d="M 66.068359,4.7871094 A 61.281367,61.281367 0 0 0 4.7871094,66.068359 61.281367,61.281367 0 0 0 66.068359,127.34961 l 0,-122.5625006 z"
transform="matrix(0.24742442,0,0,0.24742442,-4.3437287,1024.5529)"
id="path4199"
inkscape:connector-curvature="0"
inkscape:export-xdpi="73.431374"
inkscape:export-ydpi="73.431374" />
</g>
<g
id="g4517-8"
transform="matrix(0.24742442,0,0,0.24742442,-64.81656,1013.5329)">
<g
id="g4519-2"
transform="matrix(4.0416382,0,0,4.0416382,422.29019,-4060.1699)">
<g
id="g4521-8">
<path
id="path4523-1"
style="color:#000000;text-indent:0;text-transform:none;block-progression:tb;fill:#c3c7c7;fill-opacity:1"
d="m 8.9868,1030.4 0,7.8 c -1.8639,2.9 -3.8033,5.8 -5.625,8.8 -0.9343,1.5 -0.0087,3.8 1.7506,4.2 1.2656,0.3 2.5733,0.1 3.8564,0.2 3.1672,0 6.3372,0 9.5032,-0.1 2.044,-0.2 3.264,-2.8 2.077,-4.5 -1.813,-2.9 -3.721,-5.7 -5.562,-8.6 l 0,-7.8 -6.0002,0 z"
inkscape:connector-curvature="0" />
<path
id="path4525-4"
d="m 15.469805,1042.9 c 0,0.5358 -0.433988,0.9698 -0.969805,0.9698 -0.535817,0 -0.969805,-0.434 -0.969805,-0.9698 0,-0.5358 0.433988,-0.9698 0.969805,-0.9698 0.535817,0 0.969805,0.434 0.969805,0.9698 z"
inkscape:connector-curvature="0"
style="fill:#2ecc6d;fill-opacity:1" />
<path
id="path4529-2"
d="m 12.580262,1042.5105 c 0,0.8731 -0.707167,1.5803 -1.580262,1.5803 -0.873095,0 -1.5802621,-0.7072 -1.5802621,-1.5803 0,-0.8731 0.7071671,-1.5803 1.5802621,-1.5803 0.873095,0 1.580262,0.7072 1.580262,1.5803 z"
inkscape:connector-curvature="0"
style="fill:#2ecc6d;fill-opacity:1" />
<path
id="path4531-5"
d="m 7.4729,1042.4 c -1.098,1.7 -2.2018,3.4 -3.2812,5.1 -0.6853,1.2 0.3032,2.8 1.6875,2.9 l 12.313,0 c 1.396,-0.1 2.274,-1.9 1.5,-3 -1.071,-1.7 -2.149,-3.4 -3.219,-5 l -9.0001,0 z"
inkscape:connector-curvature="0"
style="fill:#2ecc6d;fill-opacity:1" />
<path
id="path4527"
style="text-indent:0;text-transform:none;block-progression:tb;color:#000000;fill:#000000;fill-opacity:0.17258881"
d="m 9,1030.4 0,7.8 c -1.8639,2.9 -3.8033,5.8 -5.625,8.8 -0.9343,1.5 -0.0092,3.8 1.75,4.2 1.2656,0.3 2.5607,0.1 3.8438,0.2 l 3.0002,0 0,-21 -2.969,0 z"
inkscape:connector-curvature="0" />
</g>
</g>
<g
id="g4537-0"
transform="translate(-60,0)" />
</g>
</g>
<g
id="g4537"
transform="translate(-60,0)" />
</g> </g>
</g> </g>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 3.7 KiB

After

Width:  |  Height:  |  Size: 6.4 KiB