diff --git a/css/container.css b/css/container.css new file mode 100755 index 0000000..78b9a20 --- /dev/null +++ b/css/container.css @@ -0,0 +1,20 @@ +#CONTAINER section{ + /* position */ + display: block; + position: relative; + top: 0; + left: 0; + width: 100%; + /*min-height: calc( 100vh - 5em );*/ + padding: 2em; + + /* background */ + background-color: #ecf0f1; + + /* Z */ + z-index: 7; +} + + + +#CONTAINER section.active{ z-index: 8; } \ No newline at end of file diff --git a/css/font.css b/css/font.css new file mode 100644 index 0000000..7b8c23d --- /dev/null +++ b/css/font.css @@ -0,0 +1,19 @@ +/*@font-face{ + font-family: 'Ubuntu'; + font-weight: 300; + src: url(../font/light.ttf); +} + +@font-face{ + font-family: 'Ubuntu'; + font-weight: 400; + src: url(../font/regular.ttf); +} + +@font-face{ + font-family: 'Ubuntu'; + font-weight: 500; + src: url(../font/medium.ttf); +} + +*{ font-family: 'Ubuntu'; font-weight: 300; }*/ \ No newline at end of file diff --git a/css/header.css b/css/header.css new file mode 100755 index 0000000..4a52993 --- /dev/null +++ b/css/header.css @@ -0,0 +1,221 @@ +/* +* +* Gestion complète du HEADER +* ------------------------------------- +* 1. icon +* 2. connection/inscription +* 3. mot de passe perdu +* 4. ... +* +*/ + +/* 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: 40%; + +} + + + + +/* 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: #395873; + line-height: 2.5em; + + /* animation */ + transition: background-position 0s, all .2s ease-in-out; + -moz-transition: background-position 0s, all .2s ease-in-out; + -webkit-transition: all 0s; + -ms-transition: background-position 0s, all .2s ease-in-out; + -o-transition: background-position 0s, all .2s ease-in-out; +} + +#HEADER .searchbar:focus{ + + background-image: url(../src/header/search@hover.svg); + color: #17232f; +} + + + + + + + + +/******** SUBHEADER ********/ +#SUBHEADER nav{ + /* position */ + display: flex; + position: absolute; + top: calc( 100% - 2em ); + left: 0; + width: 100%; + height: 2em; + + /* flex */ + flex-direction: row; + flex-wrap: nowrap; + justify-content: flex-start; + + /* foreground */ + font-size: .9em; + font-weight: bold; + text-transform: uppercase; + + /* extra */ + user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + -o-user-select: none; +} + +#SUBHEADER nav > span{ + /* position */ + margin-left: 3em; + + /* border */ + border-bottom: 3px solid #fff; + + /* animation */ + transition: all .1s ease-in-out; + -moz-transition: all .1s ease-in-out; + -webkit-transition: all .1s ease-in-out; + -ms-transition: all .1s ease-in-out; + -o-transition: all .1s ease-in-out; + + /* extra */ + cursor: pointer; +} + +#SUBHEADER nav > span:hover, +#SUBHEADER nav > span.active{ + border-bottom-color: #2cab5f; +} + + + +/* BOUTON POUR LA DÉCONNECTION */ +#SUBHEADER #LOGOUT{ + /* position */ + /*display: block;*/ display: none; + position: absolute; + top: 10px; + left: calc( 100% - 2.5em - 10px ); + width: calc( 2.5em - 2*2px ); + height: calc( 2.5em - 2*2px ); + + /* border */ + border-radius: 100% / 100%; + border: 2px solid #ccc; + + /* background */ + background: transparent url(../src/header/logout.svg) center center no-repeat; + background-size: 70% auto; + + /* animation */ + transition: all .1s ease-in-out, background-size 0s; + -moz-transition: all .1s ease-in-out, background-size 0s; + -webkit-transition: all 0s; + -ms-transition: all .1s ease-in-out, background-size 0s; + -o-transition: all .1s ease-in-out, background-size 0s; + + /* extra */ + cursor: pointer; +} + +/* BOUTON ACTIVÉ */ +#SUBHEADER #LOGOUT.active{ display: block; } + +/* BOUTON SURVOL */ +#SUBHEADER #LOGOUT:hover{ + border-color: #28B965; + background-image: url(../src/header/logout@hover.svg); +} \ No newline at end of file diff --git a/css/layout.css b/css/layout.css new file mode 100755 index 0000000..5c0cac6 --- /dev/null +++ b/css/layout.css @@ -0,0 +1,291 @@ +/* +* +* Positionnement global et mise en page +* ------------------------------------- +* 1. Propriétés globales +* 2. HEADER +* 3. MENU +* 4. AUTH(entification) +* 5. CONTAINER +* 6. msgBox +* +*/ + + + + + + + + +/******************************/ +/*** 1. Propriétés globales ***/ +/******************************/ +*{ /* on supprime le margin/padding par défaut */ + margin: 0; + padding: 0; +} + +a{ text-decoration: none; color: inherit; } + +/* on initialise le body avec les valeurs par défaut [compatibilité] */ +body{ + /* position */ + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + + /* background */ + background: #ecf0f1; + background: url(../src/wallpaper.jpg) top left no-repeat; + background-size: cover; + background-attachment: fixed; + + /* overflow */ + overflow-x: hidden; /* empêche la barre horizontale de scroll [précaution] */ + + /* foreground */ + font: 16px 'Ubuntu', 'Open Sans', 'Helvetica Neue', 'Arial', 'sans-serif'; +} + + + +#WRAPPER{ + /* position */ + display: block; + position: absolute; + width: calc( 100% - 2*50px ); + min-height: calc( 100% - 2*50px ); + margin: 50px; + + /* border */ + box-shadow: 0 0 5px #777; + + /* background */ + background-color: #ecf0f1; + + /* scroll */ + overflow: hidden; +} + + #MENU{ + /* position */ + display: flex; + position: absolute; + top: 0; + left: 0; + width: 14em; + height: 100%; + + /* flex */ + flex-direction: column; + flex-wrap: nowrap; + justify-content: flex-start; + + /* background */ + background-color: #34495e; + + /* Z */ + z-index: 10; + + /* extra */ + user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + -o-user-select: none; + + } + + + #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: 14em; + width: calc( 100% - 14em ); + height: 10em; + + /* border */ + border-bottom: 1px solid #d2d3d5; + + /* 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 */ + background-color: #ecf0f1; + + /* 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; + + /* background */ + background-color: #fff; + + /* foreground */ + font: inherit; + 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; +} diff --git a/css/menu.css b/css/menu.css new file mode 100755 index 0000000..0213311 --- /dev/null +++ b/css/menu.css @@ -0,0 +1,156 @@ +/* +* +* Gestion complète du MENU +* ------------------------------------- +* 1. propriétés complémentaires #MENU +* 2. position textes +* 3. icônes +* 4. Labels +* +*/ + + + + +/*******************************************/ +/*** 1. Propriétés complémentaires #MENU ***/ +/*******************************************/ +#MENU .userdata{ + /* position */ + height: 5em; + + /* background */ + background: #28B965 url(../src/menu/userdata/visitor.svg) left 1em center no-repeat; + background-size: 3em auto; + + /* foreground */ + color: #fff; + text-indent: 5em; + font-weight: bold; + line-height: 5em; + + /* extra */ + cursor: pointer; + + /* animation */ + transition: background-color .2s ease-in-out; + -moz-transition: background-color .2s ease-in-out; + -webkit-transition: background-color .2s ease-in-out; + -ms-transition: background-color .2s ease-in-out; + -o-transition: background-color .2s ease-in-out; +} + + +#MENU .userdata:hover{ background-color: #2dcc70; } + +/* quand c'est un homme */ +#MENU .userdata.M{ background-image: url(../src/menu/userdata/male.svg); } + +/* quand c'est une femme */ +#MENU .userdata.F{ background-image: url(../src/menu/userdata/female.svg); } + + +/* quand on est connecté, afficher le bouton de déconnection */ +#MENU .userdata.M:hover, +#MENU .userdata.F:hover{ background-image: url(../src/menu/userdata/visitor.svg); } + + + + + + + + + + + + + + + + + + + + + + + + + + +#MENU span{ + /* position */ + display: block; + position: relative; + height: 4em; + padding-left: 5em; + margin-top: 1em ; + + /* border */ + border-bottom: 3px solid transparent; + + /* foreground */ + color: #92a6b0; + font-size: 14px; + line-height: 4.5em; + font-weight: bold; + text-transform: uppercase; + + /* 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; + + /* background */ + background: transparent url(../src/menu_icon/home_grayscale.svg) left 1em center no-repeat; + background-size: 1.7em; + + /* animation */ + transition: background-position 0s, all .2s ease-in-out; + -moz-transition: background-position 0s, all .2s ease-in-out; + -webkit-transition: all 0s; + -ms-transition: background-position 0s, all .2s ease-in-out; + -o-transition: background-position 0s, all .2s ease-in-out; +} + + +#MENU span:hover, +#MENU span.active{ + background: #233342 url(../src/menu_icon/home_grayscale.svg) left 1em center no-repeat; + background-size: 1.7em; + + color: #fff; +} + + +/* gestion des différentes icônes */ +#MENU span:nth-child(2){ background-image: url(../src/menu/menu_icon/home.svg); } +#MENU span:nth-child(3){ background-image: url(../src/menu/menu_icon/groups.svg); } +#MENU span:nth-child(4){ background-image: url(../src/menu/menu_icon/ue.svg); } +#MENU span:nth-child(5){ background-image: url(../src/menu/menu_icon/modules.svg); } +#MENU span:nth-child(6){ background-image: url(../src/menu/menu_icon/marks.svg); } +#MENU span:nth-child(7){ background-image: url(../src/menu/menu_icon/settings.svg); } + + +/* gestion de l'activation des différentes icônes */ +#MENU span:nth-child(2):hover, +#MENU span:nth-child(2).active{ background-image: url(../src/menu/menu_icon/home@hover.svg); } +#MENU span:nth-child(3):hover, +#MENU span:nth-child(3).active{ background-image: url(../src/menu/menu_icon/groups@hover.svg); } +#MENU span:nth-child(4):hover, +#MENU span:nth-child(4).active{ background-image: url(../src/menu/menu_icon/ue@hover.svg); } +#MENU span:nth-child(5):hover, +#MENU span:nth-child(5).active{ background-image: url(../src/menu/menu_icon/modules@hover.svg); } +#MENU span:nth-child(6):hover, +#MENU span:nth-child(6).active{ background-image: url(../src/menu/menu_icon/marks@hover.svg); } +#MENU span:nth-child(7):hover, +#MENU span:nth-child(7).active{ background-image: url(../src/menu/menu_icon/settings@hover.svg); } + + + diff --git a/groups.php b/groups.php new file mode 100755 index 0000000..a8dfc59 --- /dev/null +++ b/groups.php @@ -0,0 +1,157 @@ + 1 && strlen($_POST['password']) > 1; // d'au moins 2 caractères + +// $_SESSION['username'] = null; + +// si on a soumis le formulaire +if( $LOGIN_postNotEmpty ){ + $userlist = file_get_contents('src/userlist.json'); + $userlistObj = json_decode($userlist); + + if( $userlistObj != null ){ // si format non corrompu + + if( isset($userlistObj->{$_POST['username']}) ) // si non d'utilisateur connu + if( $userlistObj->{$_POST['username']}->password == $_POST['password'] ) // si mot de passe ok + $_SESSION['username'] = $_POST['username']; + } +} + +if( !(isset($_SESSION['username']) && is_string($_SESSION['username']) && strlen($_SESSION['username']) > 1) ) + $_SESSION['username'] = null; + + + +/* VARIABLES DES NOTIFICATIONS */ +$memberNotifNum = 10; +$messageNotifNum = 0; +$notifNotifNum = 5; + + + +?> + + + + + + Système d'Information du Département + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + +
+ + + +
+ + +
+
Contenu de la section #HOME
+
Contenu de la section #GROUPES
+ +
+ + + + +
+ + +
+
"; + echo "
"; + echo ""; + echo ""; + echo ""; + echo "  Identifiants incorrects."; + echo ""; + echo "
"; + + }else{ // si chargement normal de la page + + echo "
"; + echo "
"; + echo ""; + echo ""; + echo ""; + echo " "; + echo ""; + echo "
"; + } + ?> + + + + + + + + + + \ No newline at end of file diff --git a/index.php b/index.php new file mode 100755 index 0000000..af3b1fe --- /dev/null +++ b/index.php @@ -0,0 +1,158 @@ + 1 && strlen($_POST['password']) > 1; // d'au moins 2 caractères + +// $_SESSION['username'] = null; + +// si on a soumis le formulaire +if( $LOGIN_postNotEmpty ){ + $userlist = file_get_contents('src/userlist.json'); + $userlistObj = json_decode($userlist); + + if( $userlistObj != null ){ // si format non corrompu + + if( isset($userlistObj->{$_POST['username']}) ) // si non d'utilisateur connu + if( $userlistObj->{$_POST['username']}->password == $_POST['password'] ) // si mot de passe ok + $_SESSION['username'] = $_POST['username']; + } +} + +if( !(isset($_SESSION['username']) && is_string($_SESSION['username']) && strlen($_SESSION['username']) > 1) ) + $_SESSION['username'] = null; + + + +/* VARIABLES DES NOTIFICATIONS */ +$memberNotifNum = 10; +$messageNotifNum = 0; +$notifNotifNum = 5; + +?> + + + + + + Système d'Information du Département + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
"; + else + echo "
Connection
"; + ?> + Accueil + Groupes + Suivi + Modules + Notes + Paramètres + + + + + +
+
"; + else + echo "
"; + ?> + + + + + + +
+ + + + + + + + +
+ +
+ + + +   + +
+ +
+ + +
+ + + + + + + + + + + + + \ No newline at end of file diff --git a/js/actionScript.js b/js/actionScript.js new file mode 100755 index 0000000..673aacd --- /dev/null +++ b/js/actionScript.js @@ -0,0 +1,299 @@ + + /*********************************************************** + * * + * SCRIPT POST-HTML - SCRIPT PRINCIPAL * + * * + ************************************************************ + * * + * [0] Variables * + * [1] Gestionnaires de navigation * + * [a] pageManager.js * + * [b] API.js * + * [2] Gestion des liens * + * [a] catégories * + * [b] sous-parties * + * [3] Gestion de l'authentification * + * [4] Gestion des formulaires * + * * + * * + * * + * * + * * + * * + * * + * * + * * + ***********************************************************/ + + +/* [0] VARIABLES +==============================================================*/ +/* pageManager */ +var pageM; +/* API */ +var API; + +/* Structure de la page */ +var DOM = { + 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'), + LOGOUT : document.querySelector('#SUBHEADER #LOGOUT') + +}; + +/* VRAI = utilisateur connecté */ +var connected = !( DOM.AUTH.children[0].innerHTML == 'Connection' ); + + +/* [1] GESTIONNAIRES DE NAVIGATION +==============================================================*/ + + + /* [a] pageManager.js + ==============================================================*/ + pageM = new pageManager(); // instance principale + + /* initialisation du gestionnaire */ + pageM.setPage(null, 'page', DOM.CONTAINER, ['home', 'groups', 'ue', 'modules', 'marks', 'auth', 'settings'] ); + + + /* [b] API.js + ==============================================================*/ + API = new APIClass(); + + + + +/* [2] GESTION DES LIENS +==============================================================*/ + + + /* [a] CATÉGORIES + ==============================================================*/ + /* GESTION DES CATEGORIES (SECTIONS) + * + * @param section l'élément à activer + * + * [1] selectionne l'élément, l'affichage de la page associée est géré par pageManager.js + * [2] déselectionne l'élément précédemment selectioné + * + */ + function selectSection(section){ + + // si @subSection est un de type
  • qui a la propriété "data-link" [ET] section pas déjà active + if( section instanceof Element && section.tagName == 'SPAN' && section.dataset.hasOwnProperty('link') ){ + + // on charge la page + pageM.setPage( section.dataset.link ); + + /* on active les sous-parties */ + pageM.xhr[pageM.xhr.length-1].addEventListener('load', function(){ + + // on récupère les sections du document + var sections = document.querySelectorAll('#CONTAINER section[name]'); + if( sections != null ){ // si on en trouve + + DOM.SUBSECTIONS.innerHTML = ""; // on efface le #SUBHEADER > nav <=> les liens des sous-parties + + for( var i = 0 ; i < sections.length ; i++ ) // pour chaque section, on créé un lien correspondant + if( i == 0 ) // on active le premier + DOM.SUBSECTIONS.innerHTML += "" +sections[i].title+ ""; + else // pas les autres + DOM.SUBSECTIONS.innerHTML += "" +sections[i].title+ ""; + } + + selectSubSection( document.querySelector('#SUBHEADER > nav > span.active') ); + + }, false); + + + // on récupère la section déja selectionnée si elle existe + var last = document.querySelector('#MENU span.active'); + + if( last != null ) // si une section est déjà activée + last.className = ''; // on désactive la courante + + section.className = 'active'; // on active @section + + }else // sinon on affiche l'erreur + console.log("[selectSection_Error] - ("+section+")"); + + } + + /* activation au chargement en fonction de la page courante de pageManager.js */ + var lastSection = document.querySelector('#MENU span[data-link='+pageM.page+']'); + if( lastSection != null ) + selectSection(lastSection); // on l'active + + /* Gestion des liens du menu */ + DOM.MENU.addEventListener('click', function(e){ selectSection( e.target ); }, false); + + + + + + + /* [b] SOUS-PARTIES + ==============================================================*/ + /* GESTION DES SOUS-PARTIES (SOUS-CATÉGORIES) + * + * @param subSection l'élément à activer + * + * [1] selectionne l'élément, l'affichage de la page associée est géré en CSS3 + * [2] déselectionne l'élément précédemment selectioné + * + */ + function selectSubSection(subSection){ + + // si @subSection est un de type HGROUP [ET] + if( subSection instanceof Element && subSection.tagName == 'SPAN' && subSection.dataset.hasOwnProperty('sectname') ){ + + // on essaie de récupérer l'ancien "lien" + var lastActive = document.querySelector('#SUBHEADER > nav > span.active'); + if( lastActive != null ) // si on a trouvé qqch + lastActive.className = ''; // on le désactive + + // on essaie de récupérer l'ancienne section active + var lastSection = document.querySelector('#CONTAINER section.active'); + if( lastSection != null ) // si on a trouvé qqch + lastSection.className = ''; // on la désactive + + // on active la page associée + var target = document.querySelector('#CONTAINER section[name='+subSection.dataset.sectname+']'); + if( target != null ) + target.className = 'active'; + + subSection.className = 'active'; // on active @subSection + } + + } + + /* gestion du clic sur les sous-parties */ + DOM.SUBSECTIONS.addEventListener('click', function(e){ selectSubSection(e.target); }, false); + + + +/* [3] GESTION DE L'AUTHENTIFICATION +==============================================================*/ +// ouvre l'interface d'authentification quand click sur zone verte +DOM.MENU.children[0].addEventListener('click', function(e){ + DOM.AUTHFILTER.className = 'active'; +}, false); + + +if( connected ) // bouton spécial si connecté + DOM.LOGOUT.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 +* +* @param pForm le formulaire cible +* @param pHandler fonction exécutée lors de la soumission du formulaire +* +* [1] parcourt les élements du formulaire @pForm et active un évènement lors du "submit" +* [2] retourne l'objet à @pHandler lors du "submit" +* +* +* @example +* +*
    +* +* +* +* +* +* +*
    +* +* @explaination +* +* Lors du clic sur le bouton [VALIDER], la fonction @pHandler s'exécutera avec pour paramètre un objet +* OBJ{ id: nomFormulaire, nomDuChamp1: valeurDuChamp1, nomDuChamp2: valeurDuChamp2 } +* +*/ +function initForm(pForm, pHandler){ + + // vérification des arguments + var isForm = pForm instanceof Element && pForm.tagName == 'FORM'; + var isFunc = pHandler instanceof Function; + + // si les arguments sont corrects + if( pForm instanceof Element && pForm.tagName == 'FORM' ){ + + var submitButton = null; // contiendra le bouton d'envoi du formulaire + + for( var i = 0 ; i < pForm.children.length ; i++ ) + if( pForm.children[i].type == 'button' ){ + submitButton = pForm.children[i]; // on définit le bouton + break; // on sort du for + } + + // on définit l'évènement de validation du formulaie + function submitEvent(){ + + var obj = {} // on créé l'objet qui va être envoyé + + for( var i = 0 ; i < pForm.children.length ; i++ ) // on parcourt les enfants + if( pForm.children[i].tagName == 'INPUT' && pForm.children[i].type != 'button' ) // si c'est un champ et que c'est pas le bouton + obj[pForm.children[i].name] = pForm.children[i].value; // alors on enregistre le champ dans l'objet + + // on exécute la fonction @pHandler en lui envoyant les arguments + pHandler(obj); + + } + + // on définit l'évènement du clic sur le bouton + submitButton.addEventListener('click', function(e){ + submitEvent(e.target.parentNode); // on envoie le formulaire + }, false); + + // on définit l'évènement de l'appui sur la touche [ENTRER] + pForm.addEventListener('keydown', function(e){ + if(e.keyCode==13) submitEvent(e.target); // si c'est la bonne touche, on submit le formulaire + }, false); + + + + }else + console.log('[initForm_Error] - ('+pForm+', '+pHandler+')'); + + +} + + + + + + + +initForm( // initialisation du formulaire de connection + DOM.AUTH, // formulaire (élément DOM) + function(request){ // handler + // ajout d'informations à la requête + request.level_0 = 'user'; + request.level_1 = (connected) ? 'exit' : 'authentification'; + + API.send(request, function(response){ + if( response.request == 'success' )// si connection ok + document.location = ''; + }); + } +); diff --git a/manager/security.php b/manager/security.php new file mode 100755 index 0000000..f84a7ca --- /dev/null +++ b/manager/security.php @@ -0,0 +1,79 @@ + 0; + $permissionsDefinedProperly = isset($_SESSION['permissions']) && !empty($_SESSION['permissions']) && gettype($_SESSION['permissions']) == 'string' && strlen($_SESSION['permissions']) > 0; + + // si les variables sessions ne sont pas toutes les 2 correctes + if( !($usernameDefinedProperly && $permissionsDefinedProperly) ){ + $_SESSION['username'] = null; // on les initialise à NULL + $_SESSION['permissions'] = null; + } + } + + + + + + + +?> \ No newline at end of file diff --git a/manager/user.php b/manager/user.php new file mode 100755 index 0000000..ca9c4c0 --- /dev/null +++ b/manager/user.php @@ -0,0 +1,148 @@ +level_1 ){ + + /****************************/ + /* authentification (login) */ + /****************************/ + case 'authentification': + $areSetParam = isset($request->username) && isset($request->password); // les arguments existent + $typeOkParam = $areSetParam && is_string($request->username) && is_string($request->password); // ils sont tous 2 des string + $nEmptyParam = $typeOkParam && strlen($request->username) > 0 && strlen($request->password) > 0; // d'au moins 1 caractère + + if( $areSetParam && $typeOkParam && $nEmptyParam ) + $answer->request = user_authentification($request->username, $request->password); + else{ + if ( !$areSetParam ) $answer->request= 'missing_param'; + elseif( !$typeOkParam ) $answer->request = 'wrong_type'; + else $answer->request = 'empty_param'; + } + break; + + + /*****************/ + /* déconnection */ + /*****************/ + case 'exit': + $_SESSION['username'] = null; // on supprime l'identifiant + if( $_SESSION['username'] == null ) + $answer->request = 'success'; // succès + else + $answer->request = 'error'; + break; + + + + /***********/ + /* DEFAULT */ + /***********/ + default: + $answer->request = 'unknown_level_1'; + break; + } + + } + + + + + + + + + + + + + + + + + + + /* [2] AUTHENTIFICATION + ============================================================*/ + + /* [a] userlist */ + function user_getUserList(){ + $userlistFile = file_get_contents("src/userlist.json"); + return json_decode( $userlistFile ); + } + + + /* [b] CONNECTION + ========================================================*/ + /* GESTION DE L'AUTHENTIFICATION D'UN UTILISATEUR + * + * @param username Identifiant de l'utilisateur + * @param password Mot de passe de l'utilisateur + * + * si @username est référencé et que le mot de passe associé vaut @password + * alors @return TRUE sinon FALSE + * + mise ajout à @answer + * + * Les variables sessions suivantes sont définies : + * - $_SESSION['permissions'] + * - $_SESSION['userid'] + * - $_SESSION['username'] + * + * @return Boolean true si l'utilisateur est ok + */ + function user_authentification($username, $password){ + + // [1] On récupère la liste d'utilisateurs (/src/userlist.json) + $userList = user_getUserList(); + + // [2] On check l'existence de l'utilisateur + if( isset($userList->{$username}) ){ + + // [3] On check le mot de passe + if( $userList->{$username}->password == $password ){ + // on définit les variables session + $_SESSION['username'] = $username; + $_SESSION['permissions'] = $userList->{$username}->permissions; + return 'success'; + }else + return 'wrong_password'; + + }else + return 'unknown_user'; + } + + +?> \ No newline at end of file diff --git a/page/groups.php b/page/groups.php new file mode 100755 index 0000000..c76322a --- /dev/null +++ b/page/groups.php @@ -0,0 +1,44 @@ + + +
    + '; + } ?> +
    + +
    + Groupes +
    + +
    + Suivi +
    + +
    + Modules +
    + +
    + Notes +
    + +
    + Paramètres +
    diff --git a/page/home.php b/page/home.php new file mode 100755 index 0000000..2b05948 --- /dev/null +++ b/page/home.php @@ -0,0 +1,40 @@ + + +
    + a +
    + +
    + Groupes +
    + +
    + Suivi +
    + +
    + Modules +
    + +
    + Notes +
    + +
    + Paramètres +
    diff --git a/src/close.svg b/src/close.svg new file mode 100644 index 0000000..fe54b84 --- /dev/null +++ b/src/close.svg @@ -0,0 +1,75 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + diff --git a/src/header/icon.svg b/src/header/icon.svg new file mode 100755 index 0000000..8d579c9 --- /dev/null +++ b/src/header/icon.svg @@ -0,0 +1,151 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/header/logout.svg b/src/header/logout.svg new file mode 100644 index 0000000..ef9ac33 --- /dev/null +++ b/src/header/logout.svg @@ -0,0 +1,53 @@ + +image/svg+xml \ No newline at end of file diff --git a/src/header/logout@hover.svg b/src/header/logout@hover.svg new file mode 100644 index 0000000..2809a6a --- /dev/null +++ b/src/header/logout@hover.svg @@ -0,0 +1,53 @@ + +image/svg+xml \ No newline at end of file diff --git a/src/header/notifbar/member.svg b/src/header/notifbar/member.svg new file mode 100755 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 100755 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 100755 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 100755 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 100755 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 100755 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 100755 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 100755 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/menu_icon/auth.svg b/src/menu/menu_icon/auth.svg new file mode 100755 index 0000000..13b97bc --- /dev/null +++ b/src/menu/menu_icon/auth.svg @@ -0,0 +1,53 @@ + +image/svg+xml \ No newline at end of file diff --git a/src/menu/menu_icon/auth@hover.svg b/src/menu/menu_icon/auth@hover.svg new file mode 100755 index 0000000..bd3bf3f --- /dev/null +++ b/src/menu/menu_icon/auth@hover.svg @@ -0,0 +1,53 @@ + +image/svg+xml \ No newline at end of file diff --git a/src/menu/menu_icon/groups.svg b/src/menu/menu_icon/groups.svg new file mode 100755 index 0000000..62d56f6 --- /dev/null +++ b/src/menu/menu_icon/groups.svg @@ -0,0 +1,51 @@ + +image/svg+xml \ No newline at end of file diff --git a/src/menu/menu_icon/groups@hover.svg b/src/menu/menu_icon/groups@hover.svg new file mode 100755 index 0000000..a97e64f --- /dev/null +++ b/src/menu/menu_icon/groups@hover.svg @@ -0,0 +1,51 @@ + +image/svg+xml \ No newline at end of file diff --git a/src/menu/menu_icon/home.svg b/src/menu/menu_icon/home.svg new file mode 100755 index 0000000..ce7917b --- /dev/null +++ b/src/menu/menu_icon/home.svg @@ -0,0 +1,65 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/src/menu/menu_icon/home@hover.svg b/src/menu/menu_icon/home@hover.svg new file mode 100755 index 0000000..44640e2 --- /dev/null +++ b/src/menu/menu_icon/home@hover.svg @@ -0,0 +1,64 @@ + + + + + + + + + + image/svg+xml + + + + + + + + diff --git a/src/menu/menu_icon/marks.svg b/src/menu/menu_icon/marks.svg new file mode 100755 index 0000000..e7c8592 --- /dev/null +++ b/src/menu/menu_icon/marks.svg @@ -0,0 +1,58 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/src/menu/menu_icon/marks@hover.svg b/src/menu/menu_icon/marks@hover.svg new file mode 100755 index 0000000..9cebd4c --- /dev/null +++ b/src/menu/menu_icon/marks@hover.svg @@ -0,0 +1,58 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/src/menu/menu_icon/modules.svg b/src/menu/menu_icon/modules.svg new file mode 100755 index 0000000..b650578 --- /dev/null +++ b/src/menu/menu_icon/modules.svg @@ -0,0 +1,71 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + diff --git a/src/menu/menu_icon/modules@hover.svg b/src/menu/menu_icon/modules@hover.svg new file mode 100755 index 0000000..2fd2943 --- /dev/null +++ b/src/menu/menu_icon/modules@hover.svg @@ -0,0 +1,71 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + diff --git a/src/menu/menu_icon/settings.svg b/src/menu/menu_icon/settings.svg new file mode 100755 index 0000000..d0a93d5 --- /dev/null +++ b/src/menu/menu_icon/settings.svg @@ -0,0 +1,49 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/src/menu/menu_icon/settings@hover.svg b/src/menu/menu_icon/settings@hover.svg new file mode 100755 index 0000000..be3ec60 --- /dev/null +++ b/src/menu/menu_icon/settings@hover.svg @@ -0,0 +1,49 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/src/menu/menu_icon/ue.svg b/src/menu/menu_icon/ue.svg new file mode 100755 index 0000000..66d72eb --- /dev/null +++ b/src/menu/menu_icon/ue.svg @@ -0,0 +1,53 @@ + +image/svg+xml \ No newline at end of file diff --git a/src/menu/menu_icon/ue@hover.svg b/src/menu/menu_icon/ue@hover.svg new file mode 100755 index 0000000..2f607d5 --- /dev/null +++ b/src/menu/menu_icon/ue@hover.svg @@ -0,0 +1,53 @@ + +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 100755 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 100755 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/src/menu/userdata/visitor.svg b/src/menu/userdata/visitor.svg new file mode 100644 index 0000000..9b1e323 --- /dev/null +++ b/src/menu/userdata/visitor.svg @@ -0,0 +1,44 @@ + +image/svg+xml \ No newline at end of file diff --git a/src/wallpaper.jpg b/src/wallpaper.jpg new file mode 100755 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 100755 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 100755 index 0000000..8ff6360 Binary files /dev/null and b/template_2.jpg differ