diff --git a/css/header.css b/css/header.css index abcdea3..696b206 100755 --- a/css/header.css +++ b/css/header.css @@ -7,4 +7,117 @@ * 3. mot de passe perdu * 4. ... * -*/ \ No newline at end of file +*/ + +/* icônes de notifications */ +#HEADER .notifbar{ + /* position */ + display: flex; + + /* flex */ + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; +} + +#HEADER .notifbar div{ + /* position */ + display: block; + width: 3em; + margin: 0 .1em; + + /* background */ + background: transparent url(../src/header/notifbar/member.svg) center center no-repeat; + background-size: 40% auto; + + cursor: default; +} + + +#HEADER .notifbar .member { background-image: url(../src/header/notifbar/member.svg); } +#HEADER .notifbar .message { background-image: url(../src/header/notifbar/message.svg); } +#HEADER .notifbar .notification{ background-image: url(../src/header/notifbar/notification.svg); } + +/* Gestion du hover sur les notifications */ +#HEADER .notifbar .member:hover { background-image: url(../src/header/notifbar/member@hover.svg); } +#HEADER .notifbar .message:hover { background-image: url(../src/header/notifbar/message@hover.svg); } +#HEADER .notifbar .notification:hover{ background-image: url(../src/header/notifbar/notification@hover.svg); } + +/* affichage du nombre de notifications */ +#HEADER .notifbar div[data-num]::after{ + content: attr(data-num); + /* position */ + display: block; + position: relative; + top: 1.6em; + left: 2.5em; + width: 1em; + height: 1em; + padding: .35em; + + /* border */ + border-radius: 100% / 100%; + + /* background */ + background-color: #da5439; + + /* foreground */ + color: #fff; + font-size: 11px; + text-align: center; + line-height: 1em; +} + +#HEADER .notifbar div[data-num='']::after{ content: '0'; } + + +/* logo AGAC */ +#HEADER .icon{ + /* position */ + display: block; + width: 5em; /* pour faire un carré */ + + background: transparent url(../src/header/icon.svg) center center no-repeat; + background-size: 80% 80%; + +} + + + + +/* barre de recherche */ +#HEADER .searchbar{ + /* position */ + display: block; + position: relative; + margin-top: 1.5em; + margin-right: 2em; + width: 20em; + height: 2.5em; + padding: .2em; + padding-right: 3em; + + /* border */ + border: 0; + + /* background */ + background: transparent url(../src/header/search.svg) right 1em center no-repeat; + background-size: 1em auto; + + /* foreground */ + color: #aaa; + line-height: 2.5em; + + /* animation */ + transition: background 0s, background-size .2s ease-in-out; + -moz-transition: background 0s, background-size .2s ease-in-out; + -webkit-transition: background 0s, background-size .2s ease-in-out; + -ms-transition: background 0s, background-size .2s ease-in-out; + -o-transition: background 0s, background-size .2s ease-in-out; +} + +#HEADER .searchbar:focus{ + + background-image: url(../src/header/search@hover.svg); + color: #223343; +} \ No newline at end of file diff --git a/css/layout.css b/css/layout.css index 38cb359..157fd42 100755 --- a/css/layout.css +++ b/css/layout.css @@ -63,52 +63,13 @@ body{ box-shadow: 0 0 5px #777; } - - - #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; - } - - - #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; + width: 14em; height: 100%; /* flex */ @@ -125,13 +86,54 @@ body{ } - #CONTAINER{ + #HEADER{ + /* position */ + display: flex; + position: absolute; + top: 0; + left: 14em; + width: calc( 100% - 14em ); + height: 5em; + + /* flex */ + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + + /* border */ + border-bottom: 1px solid #e5e5e5; + + /* background */ + background-color: #fff; + + /* Z */ + z-index: 9; + } + + + #SUBHEADER{ /* position */ display: block; position: relative; margin-top: 5em; - margin-left: 11em; - width: calc( 100% - 11em ); + margin-left: 14em; + width: calc( 100% - 14em ); + height: 10em; + + /* background */ + background-color: #fff; + + /* Z */ + z-index: 8; + } + + + #CONTAINER{ + /* position */ + display: block; + position: relative; + margin-left: 14em; + width: calc( 100% - 14em ); min-height: calc( 100% - 5em ); /* background */ diff --git a/css/menu.css b/css/menu.css index e017c3c..b43e235 100755 --- a/css/menu.css +++ b/css/menu.css @@ -15,15 +15,26 @@ /*******************************************/ /*** 1. Propriétés complémentaires #MENU ***/ /*******************************************/ -#MENU .icon{ +#MENU .userdata{ /* position */ height: 5em; /* background */ - background-color: #2dcc70; + background: #2dcc70 url(../src/menu/userdata/male.svg) left 1em center no-repeat; + background-size: 3em auto; + + /* foreground */ + color: #fff; + text-indent: 5em; + font-weight: bold; + line-height: 5em; + + } + + #MENU a{ /* position */ display: block; @@ -38,9 +49,10 @@ /* foreground */ color: #92a6b0; font-size: 12px; - line-height: 4em; + line-height: 4.5em; font-weight: bold; text-transform: uppercase; + letter-spacing: .16em; /* xTra */ cursor: pointer; diff --git a/index.php b/index.php index 62855c7..dcc0455 100755 --- a/index.php +++ b/index.php @@ -42,7 +42,7 @@ if( !(isset($_SESSION['username']) && is_string($_SESSION['username']) && strlen - + @@ -53,15 +53,10 @@ if( !(isset($_SESSION['username']) && is_string($_SESSION['username']) && strlen
- - - - -
- + - 1 ) - echo "".$_SESSION['username'].""; - else - echo "Authentification"; - ?> + + + +
@@ -112,6 +113,7 @@ if( !(isset($_SESSION['username']) && is_string($_SESSION['username']) && strlen +
diff --git a/src/header/icon.svg b/src/header/icon.svg new file mode 100644 index 0000000..2847c63 --- /dev/null +++ b/src/header/icon.svg @@ -0,0 +1,81 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + diff --git a/src/header/notifbar/member.svg b/src/header/notifbar/member.svg new file mode 100644 index 0000000..ff39dc3 --- /dev/null +++ b/src/header/notifbar/member.svg @@ -0,0 +1,53 @@ + +image/svg+xml \ No newline at end of file diff --git a/src/header/notifbar/member@hover.svg b/src/header/notifbar/member@hover.svg new file mode 100644 index 0000000..864652e --- /dev/null +++ b/src/header/notifbar/member@hover.svg @@ -0,0 +1,53 @@ + +image/svg+xml \ No newline at end of file diff --git a/src/header/notifbar/message.svg b/src/header/notifbar/message.svg new file mode 100644 index 0000000..4476e9f --- /dev/null +++ b/src/header/notifbar/message.svg @@ -0,0 +1,50 @@ + +image/svg+xml \ No newline at end of file diff --git a/src/header/notifbar/message@hover.svg b/src/header/notifbar/message@hover.svg new file mode 100644 index 0000000..4cb3914 --- /dev/null +++ b/src/header/notifbar/message@hover.svg @@ -0,0 +1,50 @@ + +image/svg+xml \ No newline at end of file diff --git a/src/header/notifbar/notification.svg b/src/header/notifbar/notification.svg new file mode 100644 index 0000000..6bd89fa --- /dev/null +++ b/src/header/notifbar/notification.svg @@ -0,0 +1,51 @@ + +image/svg+xml \ No newline at end of file diff --git a/src/header/notifbar/notification@hover.svg b/src/header/notifbar/notification@hover.svg new file mode 100644 index 0000000..6b5bfc3 --- /dev/null +++ b/src/header/notifbar/notification@hover.svg @@ -0,0 +1,51 @@ + +image/svg+xml \ No newline at end of file diff --git a/src/header/search.svg b/src/header/search.svg new file mode 100644 index 0000000..273c48e --- /dev/null +++ b/src/header/search.svg @@ -0,0 +1,52 @@ + +image/svg+xml \ No newline at end of file diff --git a/src/header/search@hover.svg b/src/header/search@hover.svg new file mode 100644 index 0000000..3387412 --- /dev/null +++ b/src/header/search@hover.svg @@ -0,0 +1,52 @@ + +image/svg+xml \ No newline at end of file diff --git a/src/menu/userdata/female.svg b/src/menu/userdata/female.svg new file mode 100644 index 0000000..c2a9099 --- /dev/null +++ b/src/menu/userdata/female.svg @@ -0,0 +1,148 @@ + +image/svg+xml \ No newline at end of file diff --git a/src/menu/userdata/male.svg b/src/menu/userdata/male.svg new file mode 100644 index 0000000..0c46c28 --- /dev/null +++ b/src/menu/userdata/male.svg @@ -0,0 +1,124 @@ + +image/svg+xml \ No newline at end of file diff --git a/test.php b/test.php new file mode 100644 index 0000000..bf84e61 --- /dev/null +++ b/test.php @@ -0,0 +1,3 @@ + \ No newline at end of file