diff --git a/css/layout.css b/css/layout.css
index 25724ed..38cb359 100755
--- a/css/layout.css
+++ b/css/layout.css
@@ -39,7 +39,9 @@ body{
height: 100%;
/* background */
- background: #fff;
+ background: #ecf0f1;
+ background: url(../src/wallpaper.jpg) top left no-repeat;
+ background-size: cover;
/* overflow */
overflow-x: hidden; /* empêche la barre horizontale de scroll [précaution] */
@@ -50,193 +52,91 @@ body{
-
-
-
-
-/*****************/
-/*** 2. HEADER ***/
-/*****************/
-#HEADER{
+#WRAPPER{
/* position */
- display: flex;
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 48px;
-
- /* flex (as container) */
- flex-direction: row;
- flex-wrap: nowrap;
- justify-content: space-between;
-
- /* background */
- background: #1d1d1d;
-
- /* foreground */
- font-size: 12px;
-}
-
-
-
-
-
-/***************/
-/*** 3. MENU ***/
-/***************/
-#HEADER #MENU{
- /* position */
- display: flex;
- height: 100%;
-
- /* flex (as container) */
- flex-direction: row;
- flex-wrap: nowrap;
- justify-content: space-between;
-
-}
-
-
-
-/***************/
-/*** 4. AUTH ***/
-/***************/
-#AUTH_FILTER{
- /* position */
- /*display: block;*/ display: none;
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
-
- /* background */
- background: rgba(0,0,0,.2);
-
- /* z axis */
- z-index: 100;
-}
-
-#AUTH_FILTER.active{ display: block; }
-
-#AUTH{
- /* position */
- /*display: block;*/ display: none;
- position: fixed;
- top: 30%;
- left: calc( 50% - 250px/2 );
- width: 250px;
-
- /* z axis */
- z-index: 101;
-}
-
-/* style des labels */
-#AUTH label{
- /* foreground */
- color: #fff;
- font-weight: bold;
- text-transform: uppercase;
- line-height: 3em;
- text-shadow: 1px 1px 0 #666;
-}
-
-/* bouton quitter */
-#AUTH::after{
- content: 'x';
display: block;
position: absolute;
- top: 0;
- left: calc( 100% - 25px );
- width: 25px;
- height: 25px;
+ width: calc( 100% - 2*100px );
+ min-height: calc( 100% - 2*100px );
+ margin: 100px;
- border-radius: 100% / 100%;
- border: 2px solid #aaa;
-}
-
-
-/* message qui dit que les identifiants sont incorrects */
-#AUTH .errorbox{
- display: inline-block;
- width: 100%;
- height: 2em;
-
- font-size: .8em;
- color: #d50c4d;
- line-height: 1em;
-}
-
-#AUTH_FILTER.active + #AUTH{ display: block; }
-
-/* tout les INPUT */
-#AUTH input{
- /* position */
- display: inline-block;
- position: relative;
- top: 0;
- left: 0;
- width: calc( 100% - 2*.8em );
- margin-bottom: 2em;
- padding: .8em;
-
- /* border */
- border-radius: 3px;
- border: 1px solid #A1A1A1;
-
- /* foreground */
- font-family: inherit;
-
- transition: .2s ease-in-out;
- -moz-transition: .2s ease-in-out;
- -webkit-transition: .2s ease-in-out;
- -ms-transition: .2s ease-in-out;
- -o-transition: .2s ease-in-out;
-}
-
-
-#AUTH input[type=password]{ margin-bottom: 0; }
-
-/* INPUT text/password */
-#AUTH input[type=text]:focus,
-#AUTH input[type=password]:focus{
- border-color: #21a4a8;
- box-shadow: 0 0 3px #2bccd4;
-}
-
-/* SUBMIT */
-#AUTH input[type=submit]{
- /* position */
- width: 100%;
-
- /* foreground */
- color: #fff;
- font-weight: bold;
-
- /* background */
- background-color: #279cea;
-
- /* xTra */
- cursor: pointer;
-}
-
-
-#AUTH input[type=submit]:hover{
- background-color: #2494de;
+ box-shadow: 0 0 5px #777;
}
-/********************/
-/*** 5. CONTAINER ***/
-/********************/
-#CONTAINER{
-}
+ #HEADER{
+ /* position */
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 11em;
+ width: calc( 100% - 11em );
+ height: 5em;
+
+ /* border */
+ border-bottom: 1px solid #e5e5e5;
+
+ /* background */
+ background-color: #fff;
+
+ /* Z */
+ z-index: 9;
+ }
-/*****************/
-/*** 6. MSGBOX ***/
-/*****************/
-#MSGBOX{
-}
+ #SUBHEADER{
+ /* position */
+ display: block;
+ position: absolute;
+ top: 5em;
+ left: 11em;
+ width: calc( 100% - 11em );
+ height: 10em;
+
+ /* background */
+ background-color: #fff;
+
+ /* Z */
+ z-index: 8;
+ }
+
+
+ #MENU{
+ /* position */
+ display: flex;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 11em;
+ height: 100%;
+
+ /* flex */
+ flex-direction: column;
+ flex-wrap: nowrap;
+ justify-content: flex-start;
+
+ /* background */
+ background-color: #34495e;
+
+ /* Z */
+ z-index: 10;
+
+ }
+
+
+ #CONTAINER{
+ /* position */
+ display: block;
+ position: relative;
+ margin-top: 5em;
+ margin-left: 11em;
+ width: calc( 100% - 11em );
+ min-height: calc( 100% - 5em );
+
+ /* background */
+ background-color: #ecf0f1;
+
+ /* Z */
+ z-index: 7;
+ }
\ No newline at end of file
diff --git a/css/menu.css b/css/menu.css
index d2fb944..e017c3c 100755
--- a/css/menu.css
+++ b/css/menu.css
@@ -15,38 +15,48 @@
/*******************************************/
/*** 1. Propriétés complémentaires #MENU ***/
/*******************************************/
-#HEADER #MENU a,
-#HEADER a{
+#MENU .icon{
+ /* position */
+ height: 5em;
+
+ /* background */
+ background-color: #2dcc70;
+}
+
+
+#MENU a{
/* position */
display: block;
position: relative;
- padding: 0 1em;
+ height: 4em;
+ padding-left: 4em;
+ margin-bottom: 1em ;
/* border */
border-bottom: 3px solid transparent;
/* foreground */
- color: #fff;
- line-height: 48px;
+ color: #92a6b0;
+ font-size: 12px;
+ line-height: 4em;
+ font-weight: bold;
text-transform: uppercase;
- letter-spacing: 1px;
/* xTra */
cursor: pointer;
+
+ /* animation */
+ transition: .2s ease-in-out;
+ -moz-transition: .2s ease-in-out;
+ -webkit-transition: .2s ease-in-out;
+ -ms-transition: .2s ease-in-out;
+ -o-transition: .2s ease-in-out;
}
-#HEADER a.colored{ background: #6c336d; }
-#HEADER #MENU a:nth-child(1):hover,
-#HEADER a:hover{ background-color: #6c336d; }
-#HEADER #MENU a:nth-child(2):hover{ background-color: #6eab2e; }
-#HEADER #MENU a:nth-child(3):hover{ background-color: #f98012; }
-#HEADER #MENU a:nth-child(4):hover{ background-color: #999999; }
-#HEADER #MENU a:nth-child(5):hover{ background-color: #DD9F22; }
-#HEADER #MENU a:nth-child(6):hover{ background-color: #4653b4; }
-#HEADER #MENU a:nth-child(7):hover{ background-color: #a62a3e; }
-#HEADER #MENU a:nth-child(8):hover{ background-color: #fb4b28; }
+#MENU a:hover,
+#MENU a.active{
+ background-color: #233343;
+ color: #fff;
+}
-/***********************/
-/* 2. Authentification */
-/***********************/
diff --git a/index.php b/index.php
index 0ab7986..62855c7 100755
--- a/index.php
+++ b/index.php
@@ -52,15 +52,16 @@ if( !(isset($_SESSION['username']) && is_string($_SESSION['username']) && strlen
+
+
+
-
-
+
-
";
- echo "";
+
+
";
+ echo "";
- }else{ // si chargement normal de la page
+ }else{ // si chargement normal de la page
- echo "";
- echo "";
- }
- ?>
+ echo "";
+ echo "";
+ }
+ ?>
-
-
-
-
-
- Hey! Your password is not the right one.
-
-
-
diff --git a/src/wallpaper.jpg b/src/wallpaper.jpg
new file mode 100644
index 0000000..77e5447
Binary files /dev/null and b/src/wallpaper.jpg differ
diff --git a/template_1.png b/template_1.png
new file mode 100644
index 0000000..85b9e14
Binary files /dev/null and b/template_1.png differ
diff --git a/template_2.jpg b/template_2.jpg
new file mode 100644
index 0000000..8ff6360
Binary files /dev/null and b/template_2.jpg differ