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
parent
7a8131cfba
commit
4298b7fb77
|
|
@ -77,7 +77,7 @@
|
|||
display: block;
|
||||
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%;
|
||||
|
||||
}
|
||||
|
|
|
|||
126
css/layout.css
126
css/layout.css
|
|
@ -41,7 +41,6 @@ body{
|
|||
/* background */
|
||||
background: #ecf0f1;
|
||||
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-attachment: fixed;
|
||||
|
||||
|
|
@ -161,3 +160,128 @@ body{
|
|||
/* Z */
|
||||
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;
|
||||
}
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
position: relative;
|
||||
height: 4em;
|
||||
padding-left: 5em;
|
||||
margin-bottom: 1em ;
|
||||
margin-top: 1em ;
|
||||
|
||||
/* border */
|
||||
border-bottom: 3px solid transparent;
|
||||
|
|
|
|||
32
index.php
32
index.php
|
|
@ -81,7 +81,7 @@ $notifNotifNum = 5;
|
|||
<?php
|
||||
/* membres */
|
||||
if( $memberNotifNum > 0 ) echo "<div class='member' data-num='".$memberNotifNum."'></div>";
|
||||
else echo "<div class='member'></div>";
|
||||
else echo "<div class='member'></div>";
|
||||
|
||||
/* messages */
|
||||
if( $messageNotifNum > 0 ) echo "<div class='message' data-num='".$messageNotifNum."'></div>";
|
||||
|
|
@ -119,30 +119,16 @@ $notifNotifNum = 5;
|
|||
</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'>  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'> </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'> </span>";
|
||||
echo "<input type='submit' value='Connection'>";
|
||||
echo "</form>";
|
||||
}
|
||||
?></div>
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,8 @@
|
|||
* [2] Gestion des liens *
|
||||
* [a] catégories *
|
||||
* [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 */
|
||||
var DOM = {
|
||||
WRAPPER : document.querySelector('#WRAPPER'),
|
||||
WRAPPER : document.querySelector('#WRAPPER'),
|
||||
MENU : document.querySelector('#MENU'),
|
||||
HEADER : document.querySelector('#HEADER'),
|
||||
SUBHEADER : document.querySelector('#SUBHEADER'),
|
||||
SUBSECTIONS : document.querySelector("#SUBHEADER > nav"),
|
||||
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
|
||||
*
|
||||
|
|
|
|||
|
|
@ -9,14 +9,18 @@
|
|||
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="189.34375"
|
||||
height="192.59375"
|
||||
id="svg9954"
|
||||
width="20.5585mm"
|
||||
height="23.953442mm"
|
||||
viewBox="0 0 72.845081 84.874394"
|
||||
id="svg4286"
|
||||
version="1.1"
|
||||
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
|
||||
id="defs9956" />
|
||||
id="defs4288" />
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
|
|
@ -24,23 +28,32 @@
|
|||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="3.959798"
|
||||
inkscape:cx="155.75561"
|
||||
inkscape:cy="82.870037"
|
||||
inkscape:zoom="5.6"
|
||||
inkscape:cx="13.541924"
|
||||
inkscape:cy="27.605616"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="layer1"
|
||||
inkscape:current-layer="g4521-8"
|
||||
showgrid="false"
|
||||
fit-margin-top="0"
|
||||
fit-margin-left="0"
|
||||
fit-margin-right="0"
|
||||
fit-margin-bottom="0"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1056"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="24"
|
||||
inkscape:window-maximized="1"
|
||||
fit-margin-top="0"
|
||||
fit-margin-left="0"
|
||||
fit-margin-right="0"
|
||||
fit-margin-bottom="0" />
|
||||
inkscape:snap-bbox="false"
|
||||
inkscape:bbox-nodes="true"
|
||||
inkscape:bbox-paths="true"
|
||||
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
|
||||
id="metadata9959">
|
||||
id="metadata4291">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
|
|
@ -52,30 +65,87 @@
|
|||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Calque 1"
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(-57.65625,-280.5)">
|
||||
transform="translate(15.022256,-191.80268)">
|
||||
<g
|
||||
id="g11104"
|
||||
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="matrix(-1,0,0,1,304.65625,0)">
|
||||
<path
|
||||
sodipodi:nodetypes="cccccccccccccccccc"
|
||||
inkscape:connector-curvature="0"
|
||||
id="path11106"
|
||||
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"
|
||||
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" />
|
||||
</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"
|
||||
id="text9962">
|
||||
<path
|
||||
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"
|
||||
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"
|
||||
id="path9967"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="cccccccccccccccccc" />
|
||||
id="g4517"
|
||||
transform="translate(-609.72838,51.305182)">
|
||||
<g
|
||||
id="g4519"
|
||||
transform="matrix(4.0416382,0,0,4.0416382,422.29019,-4060.1699)">
|
||||
<g
|
||||
id="g4191"
|
||||
inkscape:export-xdpi="73.431374"
|
||||
inkscape:export-ydpi="73.431374"
|
||||
style="fill:#ababab;fill-opacity:1" />
|
||||
<g
|
||||
inkscape:export-ydpi="73.431374"
|
||||
inkscape:export-xdpi="73.431374"
|
||||
id="g4195"
|
||||
transform="translate(0.18745231,-35.076806)">
|
||||
<circle
|
||||
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"
|
||||
id="circle4197"
|
||||
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>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 6.4 KiB |
Loading…
Reference in New Issue