diff --git a/css/header.css b/css/header.css index 4b78f81..05fbbd0 100755 --- a/css/header.css +++ b/css/header.css @@ -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%; } diff --git a/css/layout.css b/css/layout.css index 33f7734..eb49b2f 100755 --- a/css/layout.css +++ b/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; @@ -160,4 +159,129 @@ body{ /* Z */ z-index: 7; - } \ No newline at end of file + } + + +#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; +} \ No newline at end of file diff --git a/css/menu.css b/css/menu.css index 053743d..564836a 100755 --- a/css/menu.css +++ b/css/menu.css @@ -44,7 +44,7 @@ position: relative; height: 4em; padding-left: 5em; - margin-bottom: 1em ; + margin-top: 1em ; /* border */ border-bottom: 3px solid transparent; diff --git a/index.php b/index.php index 968a11a..f43df7c 100755 --- a/index.php +++ b/index.php @@ -81,7 +81,7 @@ $notifNotifNum = 5; 0 ) echo "
"; - else echo "
"; + else echo "
"; /* messages */ if( $messageNotifNum > 0 ) echo "
"; @@ -119,30 +119,16 @@ $notifNotifNum = 5; -
-
"; - echo "
"; - echo ""; - echo ""; - echo ""; - echo "  Identifiants incorrects."; - echo ""; - echo "
"; - }else{ // si chargement normal de la page - - echo "
"; - echo "
"; - echo ""; - echo ""; - echo ""; - echo " "; - echo ""; - echo "
"; - } - ?> +
+
+ + + +   + +
+ diff --git a/js/actionScript.js b/js/actionScript.js index a6b75d6..e4400e0 100755 --- a/js/actionScript.js +++ b/js/actionScript.js @@ -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 * diff --git a/js/pageManager.js b/js/pageManager.js old mode 100644 new mode 100755 diff --git a/js/shortcut.js b/js/shortcut.js old mode 100644 new mode 100755 diff --git a/src/header/icon.svg b/src/header/icon.svg index 2847c63..8d579c9 100755 --- a/src/header/icon.svg +++ b/src/header/icon.svg @@ -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"> + id="defs4288" /> + 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" /> + id="metadata4291"> @@ -52,30 +65,87 @@ + transform="translate(15.022256,-191.80268)"> - - - - + id="g4517" + transform="translate(-609.72838,51.305182)"> + + + + + + + + + + + + + + + + + + + +