.

J'ai mis en commentaire le <link> pour charger la police "New Super Mario Font U" depuis une source exterieure, car elle n'est plus utilisée.

.gitignore

@@ -0,0 +1,7 @@
+**/*.htaccess
+
+**/*.htpasswd
+
+**/script/
+
+**/matomo/

README.md

@@ -1,24 +1,380 @@
-# Site de la semaine d'accueil
 
-Ce site, dont le but est d'accompagner les PPA, a été créé en 2017.
+# Objectif du site et notes générales
 
-Version actuellement en ligne : **2021**.
+Ce site web est fait pour les PPAs qui arrivent à l’INSA et en particulier pour la semaine
+d’accueil. Il a été fondé par Arnaud Vergnet. Sur le site, on doit retrouver toutes les informations
+nécessaires liées à la semaine d’accueil.
+Le site est fait à une fin humoristique. Il sert à guider les PPAs mais également à les
+amuser avant leur rentrée.
 
-**Si vous êtes intéressés par le projet, merci de [lire le wiki.](https://git.etud.insa-toulouse.fr/vergnet/site-accueil-insa/wiki/Accueil)**
+Des connaissances en HTML et CSS sont requises mais peuvent être plus ou moin apprises sur le tas, la page de la com_ville en revanche demande des connaissances en php(voir avec Baptiste Rébillard pour le fonctionnemet ou dans la section "pages" qui arrivera plus tard dans ce readme).
 
-## Contribuer
+Le site est originelement celui de Arnaud Vergnet, mais en 2022 Baptiste Rébillard et Guillaume Joffre ont entrepris de le modifier de fond en comble (Baptiste le back et Guillaume le front).
+Donc si vous avez des questions le site on le connait par coeur !
 
-L'objectif est que ce site soit maintenu par les GDA, pour leurs futurs PPA.
+Ce readme est également rédigé par Baptiste Rébillard il faudra donc le mettre à jour mais s'il n'est pas assez compréhensible il ne faut pas hésiter à me poser des questions.
-Les fonctionnalités de base sont déjà écrites, le minimum est ainsi de modifier le theme du site pour qu'il soit en accord avec celui de la semaine.
 
-Si vous voulez apporter des modifications ou devenir mainteneur, merci de contacter Arnaud par mail: vergnet@etud.insa-toulouse.fr.
+PS : je suis éclaté en orthographe donc je m'excuse... Donc ce document va sûrement vous arracher les yeux mais il a le mérite d'exister !
+# Structure
 
-## Auteur
+Les vues et script (pages vues par l'utilisateur) sont dans le main folder (./). 
 
-Arnaud Vergnet (vergnet@etud.insa-toulouse.fr)
+les vues et script d'administrations sont dans le dossier admin (/admin).
 
-## Développeurs Actifs
+le dossier phpCAS-1.3.6 sert à stocker les script qui permettent le bon fonctionnement des script de connexion géré par le CSN de l'insa.
 
-- Arthur BOIVERT (boivert@etud.insa-toulouse.fr)
+le dossier structure contient la structure générale des pages (template, menu et footer)
-- Cyprien HEUSSE (heusse@etud.insa-toulouse.fr)
+
-- Ronan BONNET (rbonnet@etud.insa-toulouse.fr)
+le dossier assets contient plusieurs dossiers :
+- css : contient les fichiers css de TOUT le site sauf des pages d'administrations, dans le sous dossier page chaque feuille de style est importé dans la vue correspondate (ex: la page index.php appelle assets/page/index.css voir le fichier structure/template.php pour plus de détails)
+- fonts : contient la police mario que nous avons fait mais tu peux être modifié selon le theme de la semaine d'accueil, contient le script color.php qui permet de générer des textes avec des couleurs aléatoire avec la fonciton colored_text si on importe dans la vue ce script (peut également être supprimé selon le theme de la semaine), cursor.php sert à faire suivre une image selon la souris (ici juste pour troller sur la page index donc peut être supprimé).
+- img : contient toutes les images du sites.
+- pdf : contient les pdf que les PPAs peuvent télécharger => à mettre à jour !
+
+un dossier inexistant dans le repo (gitetud) est nécessaire au fonctionnement, mais n'est pas indiqué pour des raisons de sécurité : un dossier script (/script) contenant le script de connexion à la base de données, voir avec le précédent développeur !
+
+#### Pour ce qui est de la structure générale,
+Il est important de comprendre que les principales modifications sont à faire sur les vues, les fichier css dans assets/css/page correspondant, le menu via le fichier /structure/menu.php avec son fichier css correspondant : assets/css/menus.css, le template via le fichier structure/templace.php et son fichier correspondant assets/css/templace.css.
+
+Pour approfondir il faut mettre à jour les scripts de fonctionnement de la com_ville et bien les tester ! (si tu ne t'en sent pas capable surtout délégue ce travail à la com ville qui reviendra alors au bon vieu papier/stylo).
+# Structure - base de données
+
+Pour commencer, il est peut être utilile de mentionner le fait que toutes les tables commenceant par "matomo_" servent à matomo et ne doivent pas être modifié.
+
+### admin
+
+| Nom         | Type         | AUTO_INCREMENT  | NULL  |
+| :---------- |:------------:|:---------------:|:-----:|
+| id          | int(11)      |      X          |       |
+| pseudo      | varchar(50)  |                 |       |
+| perm        | int(11)      |                 |       |
+
+le pseudo est l'identifiant INSA, les perms sont entre 0 et 3 :
+- 0 pour GDA
+- 1 pour Ville
+- 2 pour Bureau
+- 3 pour Admin
+(voir plus loin dans la section admin pour le détail).
+
+### enigma
+
+| Nom         | Type         | AUTO_INCREMENT  | NULL  |
+| :---------- |:------------:|:---------------:|:-----:|
+| id          | int(11)      |      X          |       |
+| answer      | varchar(50)  |                 |       |
+| point       | int(11)      |                 |       |
+| team        | tinyint(1)   |                 |   X   |
+
+En principe il n'y a qu'une seule ligne dans cette table :
+id = 1; answer = réponse de l'énigme de la plaquette; point = nombre de points à attribuer à l'équipe gagnante; team = NULL (par défaut mais va changer automatiquement quand une équipe aura gagné)
+
+### mots_croise
+
+| Nom         | Type         | AUTO_INCREMENT  | NULL  |
+| :---------- |:------------:|:---------------:|:-----:|
+| id          | int(11)      |                 |       |
+| name        | varchar(30)  |                 |       |
+| team        | tinyint(11)  |                 |   X   |
+
+on doit tout entrer manuellement dans la base de données en revanche le formulaire du mot croisé va se construire automatiquement sans rien faire au fur et a mesure qu'on y ajotue des nom à deviner.
+
+id correspont donc au numéro du mot à trouver, name au mot à trouver, et team reste à NULL tout le temps et ne servirait que si on modifiai le php pour ajouter des points de manière différente.
+
+### planning_insa
+
+| Nom          | Type         | AUTO_INCREMENT  | NULL  |
+| :----------- |:------------:|:---------------:|:-----:|
+| id           | int(20)      |       X         |       |
+| day          | int(11)      |                 |       |
+| title        | varchar(60)  |                 |       |
+| description  | text         |                 |       |
+| color        | varchar(30)  |                 |       |
+| order_start  | int(11)      |                 |       |
+| length       | float        |                 |       |
+| num_planning | int(11)      |                 |       |
+
+il n'y a globalement pas grand chose à comprendre à part qu'ici la taille (length) est en vh et non en heure.
+Tout est modifiable via le panel admin (voir la section "admin" plus bas dans ce readme).
+
+
+### planning_tmp_dl
+
+| Nom          | Type         | AUTO_INCREMENT  | NULL  |
+| :----------- |:------------:|:---------------:|:-----:|
+| planning     | text         |                 |       |
+
+permet d'enregistrer l'ics pour le téléchargement voir la section "planning" à propos du script php2ics.
+
+Par défaut il faut avoir une seule ligne vide, le script se chargera de la modifier à chaque fois.
+
+### scores
+
+| Nom          | Type         | AUTO_INCREMENT  | NULL  |
+| :----------- |:------------:|:---------------:|:-----:|
+| id           | bigint(20)   |        X        |       |
+| texte        | text         |                 |       |
+| points       | int(11)      |                 |       |
+| team         | tinyint(1)   |                 |       |
+| id_staff     | text         |                 |       |
+
+### ville
+
+| Nom          | Type         | AUTO_INCREMENT  | NULL  |
+| :----------- |:------------:|:---------------:|:-----:|
+| session      | int(11)      |        X        |       |
+| state        | int(11)      |                 |       |
+| time_begin   | int(11)      |                 |       |
+
+ici il y a les session car il y a la session du matin et la session de l'après midi, cette table permet de savoir quelle session à été lancé, et le temps(unix) à laquelle la session à été lancé si elle l'a été.
+
+### ville_epreuve
+
+| Nom          | Type         | AUTO_INCREMENT  | NULL  |
+| :----------- |:------------:|:---------------:|:-----:|
+| id           | int(11)      |        X        |       |
+| indice       | text         |                 |       |
+| reponse      | varchar(50)  |                 |       |
+| photo        | varchar(20)  |                 |   X   |
+
+ici il va falloir mettre chaque épreuve à la main, indice correspond à ce qui va etre affiché aux PPA à chaque étape, la réponse à ce que doivent deviner les PPA, et éventuellement une photos pour les aider qui se trouve dans "assets/img/ville/"
+
+### ville_equipe
+
+| Nom          | Type         | AUTO_INCREMENT  | NULL  |
+| :----------- |:------------:|:---------------:|:-----:|
+| id           | int(11)      |        X        |       |
+| nom          | varchar(50)  |                 |       |
+| begin        | int(11)      |                 |       |
+| temps        | text         |                 |   X   |
+
+les identifiants des équipes ne doivent pas bouger, les noms c'est juste pour l'affichage utilisateur et le "begin" est l'étape à laquelle démarre l'équipe, car ils ne démarrent pas tous à la même épreuve !
+la colonne temps permet d'enregistrer les temps à chaque étape (en temps unix évidemment).
+
+
+# Pages
+
+### anim.php
+Page sans complexité, juste du contenu, demander le contenu auprès de la com'anim.
+### blouse.php
+Page sans complexité, juste du contenu, copier le contenu de la plaquette.
+### chansons.php
+Quasi aucune modif, pour ajouter des musiques en revanche :
+```php
+music("nom de la musique", "lien de l'embed");
+```
+les lien embed ressemblent à ça : https://www.youtube.com/embed/_YXjuDdcH3g
+
+### clubs.php
+Page sans complexité, quasi aucune modification car on pompe la page de l'amicale pour les clubs. Si c'est pas à jour, pas de ma faute (en vrai au moment ou j'écris ça je suis aussi resp du site de l'amicale donc c'est plus compéltement vrai).
+
+### com_page.php
+Page permettant d'éviter d'avoir les pages parrainage, anim et com_ville dans le menu afin d'éviter de surcharger le menu => à retirer selon la lisibilité du menu.
+### com_ville.php
+Ici c'est assez compliqué à expliquer et il va falloir des notions en php. Il faut analyser le code php et la structure de la base de données un peu plus haut dans le readme !
+Sinon il faut demander au concepteur et dev du programme : Baptiste Rébillard.
+
+### coms.php
+Permet de réferencer tout les contact, pour éviter de copier coller la structure des box, j'ai automatisé avec un petit peu de php :
+- Pour ce qui est du bureau, :
+```php
+$fonction = ["Président", "Vice présidente", "Trésorier", "Secrétaire"]; //contient la liste des fonctions dans l'ordre
+$prenom = ["Maxence", "Sarah", "Paul", "Ilona"]; //contient la liste des prénom liés aux fonctions dans le même ordre
+$nom = ["Papion", "Martin", "Alnet", "Gerard"]; // contient la liste des nom liés aux fonctions dans le même ordre
+$mail = ["maxence@mail.com", "sarah@mail.com", "paul@mail.com", "ilona@mail.com"]; //contient la liste des mails de contact liés aux fonctions dans le même ordre
+```
+
+
+- Pour ce qui est des coms, pour chaque com il faudra copier-coller cette ligne :
+```php
+respo(
+    "nom de la com",
+    ["prenom"],
+    ["nom"],
+    ["mail"]); 
+```
+s'ils y a plusieurs personnes dans la com :
+```php
+respo(
+    "nom de la com",
+    ["prenom1", "prenom2", "prenom3"],
+    ["nom1", "nom2", "nom3"],
+    ["mail1", "mail2", "mail3"]); 
+```
+
+### construction.php
+Page à utiliser si jamais tu n'a pas finit le site mais tu veux mettre une première version en ligne, alors dans chaque page pas finit tu ajoutera la ligne suivante :
+```php
+header('Location: construction.php);
+```
+cette ligne va en gros rediriger l'utilisateur sur la page construction.
+Il faut évidemment modifier le contenu de cette page selon le message que tu veux transmettre, exemple :
+"Page en construction, revenez plus tard"
+
+### downloads.php
+Page sans complexité, juste du contenu, Il faut mettre les fichier à télécharger dans le dossier "assets/pdf" et ensuite mettre en forme la page avec les petit lien de téléchargement tout mignon.
+
+### enigma.php
+Page qui permet de rentrer la réponse à l'énigme de la com plaquette mouhahaha !
+Actuellement pour accèder à cette page j'ai caché un lien sur la page d'index, il faudrait le cacher ailleur dans l'idée car les PPA doivent le trouver !
+
+Au niveau des modifications, tu peux changer le nom des équipes dans le script php à la ligne 17 et 19 et à la ligne 66 et 67 dans le formulaire html ainsi qu'a la ligne 74 et 76 au niveau des messages.
+
+### error.php
+Page sans complexité, une erreur 404 plus ou moin donc mettre une image drôle ou un ptit message rigolo.
+
+### game.php
+Jeu rajouté tardivement développé par le club info, spécifique à la semaine d'accueil 2022 => tu peux la retirer et essaye de voir avec le club info pour éventuellement les chauffer à en faire un nouveau sur le nouveau thème !
+
+### index.php
+Page d'accueil, sans complexité, juste du contenu et des liens, actuellement le lien vers la page enigma y est caché en cliquant sur INSA BROS => à changer pour pas que ce soit prévisible.
+
+### info.php
+- Contact :
+Lien vers les groupes facebook à update, lien vers l'instagram à update, contact du prez, vice prez et également des développeurs du site.
+
+- Crédit : 
+N'oublie pas de mentionner tout les anciens dev, c'est un peu la salle des trophées !
+
+- Vie privée :
+Petit rappel pour les soucieux de la vie privée par rapport à Matomo (on en reparle dans la section "admin")
+
+### lydia.php
+Page sans complexité, juste du contenu, modifier un peu chaque année.
+
+### map.php
+Alors ici je vais pas dire que c'est simple.
+tout les fichiers relative à la map 3D et 2D sont dans assets/map,
+pour modifier la map3D il faut décompiler le fichier map3D.glb,
+pour modifier la map2D il faut simplement l'ouvrir avec un logiciel de modification de SVG ou ton éditeur de texte mais good luck !
+pour modifier les nom des bâtiments et leurs description : il faut aller dans le fichier ajax.php.
+
+En dehors de ce sombre dossier, c'est à dire à proprement parlé dans le fichier map.php, 
+on gère simplement le changement le basculement entre la map2D et la map3D.
+
+### parrainage.php
+Page sans complexité, juste du contenu, demander le contenu auprès de la com'parrainage.
+
+### photos.php
+J'ai pas fait ce script donc contente toi de modifier le design, sinon y'a un moment on appelle le script de connexion du CAS donc tu peux commenter ces lignes le temps de coder car ça marchera pas en local sur ton pc.
+Toutes les images sont dans le dossier photos_folders/photos, pense donc à demander au précédent développeur les code du serveur si tu veux comprendre.
+Ce sera également à toi de rajouter les photos de la semaine d'accueil après la rentrée dans le dossier photos_folder/photos et les thumbs (qui sont les même photos mais moin lourde, en gros un aperçu pour afficher la galerie sans faire crash le serveur ^^).
+### planning.php
+Alors ici on va bien rigoler. Par quoi commencer ?
+Pour ce qui est des modifs :
+
+les noms des équipes ou planning un peu partout car il peut y avoir plusieurs plannings mais on y reviendra sur la section "admin / planning"
+
+Il y a deux affichages et je te conseille de rien changer sur cette page si tu n'est pas trés à l'aise.
+En gros tu as l'affichage téléphone et l'affichage PC, tout deux mène à un planning conçu par Baptiste Rébillard et au niveau du design mis en forma par Guillaume Joffre.
+
+Cette page peux gérer une infinité de planning via un argument GET en php : 
+le lien "planning.php?planning=2" correspond au 2ème planning par exemple => voir plus tard dans la section "admin / planning"
+
+On peux également télécharger les plannings grace au script php2ics codé par Baptiste Rébillard et qui se situe dans assets/script/php2ics.php, le script dans le même dossier nommé planning_tmp.php est lui aussi indispensable pour le téléchargement des plannings !
+Si tu a une quelconque question contacte moi sur github : https://github.com/baptistereb !
+Sinon tu peux lire la doc du repo github : https://github.com/baptistereb/php2ics !
+
+Attention !!!! IL FAUT ABSOLUMENT MODIFIER LE FICHIER PHP2ICS.PHP !!!! A la ligne 105 il faut mettre la date du premier jour de la semaine d'accueil car c'est là dessus qu'on calibre le téléchargement des plannings ! (si ça work pas on connait la chansons => demander à Baptiste Rébillard).
+### prevs.php
+Page sans compléxité, tu peux ajouter d'autres vidéos youtube ou en retirer, modifier le texte en accord avec la com'prev !
+
+### stats.php
+Page qui permet de voir le nombre de points de chaque équipe,
+Il faut juste modifier les noms des équipes car tout va être gérer via l'espace admin ensuite, on verra donc plus tard dans la section "admin / stats".
+
+### team.php
+Il y a deux sections via 2 liens :
+team.php?id=pkpeach et team.php?id=pkpeach il faut donc modifier les lien avec le nom des équipes (ligne 16 et 42),
+sinon il va falloir harceler le prez et vice prez pour avoir les petits messages encourageant pour les équipes, si ça prend un peu de temps n'oublie pas que tu peux utiliser la page "construction.php" expliqué un peu plus haut dans ce readme.
+
+### vacances.php
+Bon alors là il va falloir fabriquer de toute pièce un mot croisé ou quelque chose dans le genre, sachant que le systeme de réponse devra être modifié via la base de données (voir la structure de la base de données donc).
+Pense aussi à modifier les noms des équipes.
+Il faut également penser à choisir le bon nombre de points à octroyer à l'équipe gagnante car tout est automatique !
+
+### BONUS : robots.txt
+Permet de faire correctement fonctionner les robots des moteurs de recherches : https://developers.google.com/search/docs/advanced/robots/intro?hl=fr
+# admin
+
+### Un peu de sécurité !
+Pour commencer entrons dans le sujet,
+interdiction de créer son propre systeme de connexion à l'espace admin d'après les régles sur serveur pour des raisons de sécurités !
+On utilise donc le systeme de connexion de l'INSA : le CAS !
+Il faut donc le dossier phpCAS-1.3.6 dans la racine du site(ne rien modifier dedans).
+Pour travailler en local on peut essayer de court-circuiter ce systeme (par exemple pour travailler en local car le CAS ne fonctionnera pas quand tu code sur ton piti pc ^^).
+Pour ce faire, on rajoute au début de admin/index.php (et on n'oubliera pas de retirer pour la mise en prod évidemment...) cette petite ligne (on fera attention de le mettre après la ligne 'include "script.php";') :
+```php
+$_SESSION['id'] = 1;
+```
+
+### Niveau structure
+Alors ici on a tout mis en bordel mais on essaie de tout séparer du reste du site ! Tout est dans le dossier admin/
+le fichier admin.css gére le design de toute les page, de toute façon on va pas se casser la tête sur le font c'est que pour quelques personnes !
+le fichier com_ville.css gére le design de la section com_ville car y'a des petites spécificités qu'on verra plus tard.
+
+le fichier deco.php permet la deconnexion, le fichier script gére l'accès à la base de données et le menu de l'espace admin...
+
+les couleurs au niveau du menu permettent de comprendre le niveau d'accès requis :
+en vert les pages accessibles aux "GDA",
+en bleu les pages accessibles aux "Ville",
+en jaune les pages accessibles aux "Bureau",
+en rouge les pages accessibles aux "Admin".
+Evidemment les admins on acces à tout, le bureau à leur pages + ville + GDA, ... (logique d'inclusion les math 0 tmtc).
+
+### index.php
+Permet la connexion et affiche l'identifiant sous lequel on est connecté avec l'accès !
+
+### stats.php
+Permet d'ajouter des points aux équipes,
+Pour ajouter rien de plus simple, on met le texte qui correspond à la justification des points, le nombre de points et l'équipe puis on clique sur "ajouter".
+
+Au niveau des droits, tout les grades ont accès à cette pages, en revanche seul le grade admin peut tout supprimer au niveau de la colonne "action". Les GDA et autres ne peuvent supprimer que les points que eux ont enregistré, ça permet d'éviter les prblèmes si quelqu'un pête un plomb.
+
+Dans le tableau on peut voir la colone "STAFF" qui correspond à l'identifiant insa du staff qui a ajouté les points. Pour ce qui est de l'enigme et des mots croisées, s'ils ajoutent des points (et c'est automatique), alors le staff est indiqué comme "UNDEFINED" en rouge, ne pas paniquer c'est juste pour dire que c'est le systeme et non un humain qui a enregistrer les points.
+
+### planning.php
+Au niveau du planning,
+C'est assez compliqué à expliquer.
+
+on ajoute chaque créaneaux horaire de la façon qui suit :
+- jour de la semaine (logique jusque là)
+- titre : texte affiché sur le planning
+- description : texte qui s'affiche quand on clique sur l'évenement sur la planning
+- couleur : champs non obligatoire(voir juste en dessous) qui vous permet de choisir la couleur.
+- couleur hexa : si ce champs est rempli, alors le champs couleur est ignoré, ça vous permet de copier coller les couleurs du tableau en dessous.
+- opacité : eh oui car les couleurs peuvent être plus ou moin opaque (on s'est cassé la tête), de base à 100%, si à 0 alors transparent.
+Petit point à ce niveau là il faut donc comprendre que le planning est construit grâce à l'odre d'apparition et la taille en heure d'un évenement et non avec une heure de début et de fin.
+- ordre d'apparition : le premier creaneau à 1 puis 2 ... En gros c'est l'odre d'apparition.
+- Taille (en heure) : 1h30 équivaut donc à 1.5h attention
+- Numéro du planning : comme expliqué dans la section planning.php plus haut, on peut avoir une infinité de planning avec ce systeme, si vous n'avez qu'un planning on met donc que planning 1 par exemple.
+- On clique enfin sur ajouter
+
+Subtilité :
+- id si edit : si on met un identifiant, alors les informations du formulaire servent à mettre à jour l'évenement donc l'identifiant y est indiqué (les identifiants sont dans le tableau en dessous à la colonne "ID (db)").
+
+
+Pour plus de visibilité on peut séléctionner le planning affiché .
+
+### gestion_des_acces.php
+Pour ajouter des perm à quelqu'un on y indique son identifiant INSA, on lui met les perm puis on clique sur "Creer l'acces", dès lors le compte est opérationnel et il peut se logger avec ses identifiant insa en se rendant sur https://etud.insa-toulouse.fr/~accueil_insa/admin/ 
+
+Le compte dont l'identifiant est 1 n'est pas modifiable pour des raisons de sécurité. On peut en revanche supprimer tout les autres accès si on est admin (car cette page n'est accessible que par les admins).
+
+en cliquant dans la colonne perm on peut modifier les perms suivant cette logique :
+GDA > Ville > Bureau > Admin     > GDA ...
+
+### enigme.php
+Ici on peut mettre à jour la réponse à l'énigme de la plaquette, ainsi que son nombre de points et le gagnants s'il y a une erreur ! A noter qu'un seul champs est requis il faut ensuite cliquer sur "Mettre à jour"
+
+### matomo
+Demander les mots de passes auprès du précédent développeur, permet de superviser les statistiques du site et d'analyser le comportement des utilisateurs !
+# configurations
+
+Dans le serveur il y a deux dossiers en plus :
+- photos_folder/ : contient les photos et thumbs pour les téléchargements sur la page photos.php (voir plus haute dans le readme).
+- script/ : contient un fichier de connexion à la base de données ainsi que le mot de passe de la base de données.
+
+Ces fichiers sont à récupérer auprès du précédent développeur qui vous donneras également les accès à la machines ainsi qu'au repo.
+
+
+Have Fun !!

admin/.htaccess

@@ -1,5 +0,0 @@
-AuthName "MDP ?"
-AuthType Basic
-AuthUserFile /home_clubs/accueil_insa/public_html/includes/pass/.htpass_gda
-require valid-user
-

admin/admin.css

@@ -0,0 +1,171 @@
+* {
+	margin: 0;
+	padding: 0;
+	--color1 : rgb(30, 30, 30);
+	--color2 : rgb(46,46,46);
+}
+
+a {
+	text-decoration: none;
+}
+
+body {
+	background-color: var(--color1);
+	color: white;
+}
+
+main {
+	margin: 50px;
+}
+
+nav {
+	display: block;
+	width: 100vw;
+}
+
+nav ul li {
+	list-style: none;
+	display: inline-block;
+	padding: 15px;
+	background-color: var(--color2);
+	border: 2px solid var(--color1);
+}
+
+nav ul a {
+	text-decoration: none;
+	color: white;
+	font-weight: bold;
+}
+
+nav ul li:hover {
+	transform: scale(1.05);
+	transition: 0.2s ease;
+}
+
+
+nav ul li.green {
+	border-bottom: 1px solid green;
+}
+nav ul li.yellow {
+	border-bottom: 1px solid #3498DB;
+}
+nav ul li.orange {
+	border-bottom: 1px solid orange;
+}
+nav ul li.red {
+	border-bottom: 1px solid red;
+}
+nav ul li.white {
+	border-bottom: 1px solid white;
+}
+
+table.acces {
+	width: 100%;
+	border: 0;
+	border-collapse: collapse;
+}
+
+table.acces th {
+	background-color: var(--color2);
+	padding: 20px;
+	border: 3px solid var(--color2);
+	text-align: center;
+	color: white;
+}
+
+table.acces td {
+	border: 3px solid var(--color2);
+	padding: 20px;
+	text-align: center;
+}
+
+.input {
+	display: block;
+	margin: 30px;
+	padding: 10px;
+	background-color: var(--color1);
+	color: white;
+	border: 3px solid white;
+}
+
+.submit {
+	display: block;
+	padding: 10px;
+	margin: 30px;
+	background-color: var(--color1);
+	color: white;
+	border: 3px solid white;
+}
+
+.submit:hover {
+	transition: 0.2s ease;
+	transform: scale(1.05);
+}
+
+.input_inline {
+	display: inline-block;
+	margin: 10px;
+	padding: 10px;
+	background-color: var(--color1);
+	color: white;
+	border: 3px solid white;
+}
+
+.submit_inline  {
+	display: inline-block;
+	padding: 10px;
+	margin: 10px;
+	background-color: var(--color1);
+	color: white;
+	border: 3px solid white;
+}
+
+.submit_inline:hover {
+	display: inline-block;
+	transition: 0.2s ease;
+	transform: scale(1.05);
+}
+
+.cross {
+	text-decoration: none;
+	color: red;
+	font-weight: bold;
+}
+
+.href_session {
+	text-decoration: none;
+	width: 20vw;
+	display: inline-block;
+	margin: 1vw;
+	padding: 10px;
+	background-color: white;
+	text-align: center;
+	color: blue;
+	font-size: 1.5em;
+}
+
+.href_session:hover {
+	transition: 0.3s ease;
+	transform: scale(1.05);
+}
+
+.href_session_selected {
+	text-decoration: none;
+	width: 20vw;
+	display: inline-block;
+	margin: 1vw;
+	padding: 10px;
+	background-color: blue;
+	text-align: center;
+	color: white;
+	font-size: 1.5em;
+	transform: scale(1.1);
+}
+
+.submit_ville {
+
+}
+
+.input_ville {
+	
+}

admin/admin/.htaccess

@@ -1,5 +0,0 @@
-AuthName "MDP ?"
-AuthType Basic
-AuthUserFile /home_clubs/accueil_insa/public_html/includes/pass/.htpass_admin
-require valid-user
-

admin/admin/ajax.php

@@ -1,24 +0,0 @@
-<?php
-require_once '../../classes/dao.php';
-
-
-if (isset($_GET['function'])) {
-    if ($_GET['function'] == "save_day_activities")
-        save_day_activities();
-} else
-    show_error();
-
-function save_day_activities() {
-    if (isset($_GET['day']) && isset($_GET['entries'])) {
-        $dao = new Dao();
-        $dao->save_day_activities($_GET['day'], $_GET['entries']);
-        echo "Réussite";
-    } else {
-        show_error();
-    }
-}
-
-function show_error() {
-    echo "Échec : ";
-    var_dump($_GET);
-}

admin/admin/planning.php

@@ -1,59 +0,0 @@
-<?php
-ob_start(); // Start reading html
-$relativePath = "../../";
-?>
-    <div class="inner">
-        <h1>ADMIN</h1>
-        <h2>Edition du planning</h2>
-
-
-        <select id="daySelect">
-            <option value="1">Lundi</option>
-            <option value="2">Mardi</option>
-            <option value="3">Mercredi</option>
-            <option value="4">Jeudi</option>
-            <option value="5">Vendredi</option>
-            <option value="6">Samedi</option>
-            <option value="7">Dimanche</option>
-        </select>
-
-        <br>
-        <div class="add-line">
-            <i class="fas fa-plus"></i>
-        </div>
-        <div class="edit-header">
-            <div class="planning-start">Début</div>
-            <div class="planning-length">Durée</div>
-            <div class="planning-name">Nom</div>
-            <div class="planning-trash"><i class='fas fa-trash'></i></div>
-        </div>
-        <table id="activityTable">
-        </table>
-
-        <div class="save">
-            <i class="fas fa-save"></i> Enregistrer
-        </div>
-        <br>
-        <div class="buttons-container">
-            <a href="../index.php" class="admin-back-button">
-                <i class="fas fa-chevron-left"></i>
-                Retour sur la page admin
-            </a>
-            <a href="<?= $relativePath ?>planning.php" class="website-back-button">
-                Voir sur le site
-            </a>
-        </div>
-    </div>
-
-
-    <link rel="stylesheet" type="text/css" media="screen" href="<?= $relativePath ?>assets/css/adminEdit.css"/>
-
-<?php
-$pageContent = ob_get_clean(); // Store html content in variable
-$pageTitle = "Édition planning";
-
-$pageScripts = "<script type=\"text/javascript\" src=\"".$relativePath."assets/js/admin/planningManager.js\"></script>";
-
-include($relativePath . "includes/template.php"); // Display template with variable content
-
-?>

admin/com_ville.css

@@ -0,0 +1,88 @@
+.cmv-progress {
+    color: white;
+    background-color: #333;
+    border-bottom: 2px solid #ccc;
+}
+
+h5.cmv-title {
+    font-size: 1.1em;
+    padding: 1em 1em 5px;
+}
+
+.cmv-container {
+    display:flex;
+    position:relative;
+    width:90%;
+    margin:auto;
+    height:100px;
+}
+
+.cmv-step {
+    position: relative;
+    width: 36px;
+    height: 36px;
+    background-color: #ccc;
+    color: black;
+    z-index: 5;
+    border-radius: 50%;
+    line-height: 36px;
+    text-align: center;
+}
+
+.cmv-step.fait, .cmv-step.active {
+    background-color: #06a6b7;
+}
+
+.cmv-step.active:before {
+    content: "";
+    position: absolute;
+    display: block;
+    background-color: white;
+    margin: 15%;
+    width: 70%;
+    height: 70%;
+    border-radius: 50%;
+    z-index: -15;
+}
+
+.cmv-way {
+    position: relative;
+    flex: 1;
+}
+
+.cmv-way.fait:before {
+    background-color: #06a6b7;
+}
+
+.cmv-way:before {
+    content: "";
+    display: block;
+    width: 120%; height: 1px;
+    margin-left: -10%;
+    margin-top: 17px;
+    background-color: #eee;
+}
+
+.cmv-fixed:before {
+    content: "";
+    width:1px; height: 7px;
+    background-color: white;
+    position: absolute;
+    top:42px;
+    left: 18px;
+}
+
+.cmv-fixed {
+    color: white;
+    width: 100%;
+    margin-top: 2px;
+}
+
+.cmv-relative {
+    content: "52m";
+    position: absolute;
+    color: white;
+    text-align: center;
+    width: 100%;
+    top: -10px;
+}

admin/deco.php

@@ -0,0 +1,9 @@
+<?php
+session_start();
+$_SESSION = array();
+session_destroy();
+require_once("../phpCAS-1.3.6/CAS.php");
+phpCAS::client(CAS_VERSION_2_0, "cas.insa-toulouse.fr", 443, 'cas', true);
+phpCAS::setNoCasServerValidation();
+phpCAS::logout();
+?>

admin/enigma.php

@@ -0,0 +1,86 @@
+<?php
+include "script.php";
+
+if($user['perm'] < 3) {
+	header('Location: deco.php');
+}
+
+$req = $db->query("SELECT * FROM enigma WHERE id = 1");
+$r = $req -> fetchAll(PDO::FETCH_ASSOC);
+
+if(isset($_POST['send'])) {
+	if($user['perm'] >= 3) {
+		if(isset($_POST['answer']) AND !empty($_POST['answer'])) {
+			$ans = htmlspecialchars($_POST['answer']);
+			$req = $db->prepare("UPDATE enigma SET answer = ? WHERE id = 1");
+			$req->execute(array($ans));
+		}
+		if(isset($_POST['points']) AND !empty($_POST['points'])) {
+			$point = (int) htmlspecialchars($_POST['points']);
+			$req = $db->prepare("UPDATE enigma SET point = ? WHERE id = 1");
+			$req->execute(array($point));
+		}
+		if(isset($_POST['team']) AND !empty($_POST['team'])) {
+			switch (htmlspecialchars($_POST['team'])) {
+			case "t":
+				$t_int = NULL;
+				break;
+			case "t0":
+				$t_int = 0;
+				break;
+		    case "t1":
+		    	$t_int = 1;
+		        break;
+			}
+			$req = $db->prepare("UPDATE enigma SET team = ? WHERE id = 1");
+			$req->execute(array($t_int));
+		}
+		header('Refresh:0');
+	}
+}
+?>
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>Admin / Enigma</title>
+</head>
+<body>
+    <main>
+    	<form method="POST">
+			<input type="texte" name="answer" placeholder="answer" class="input_inline">
+			<input type="number" name ="points" placeholder="points" class="input_inline">
+			<select name="team" class="input_inline">
+				<option value="t">NULL</option>
+				<option value="t0">Pkpeach</option>
+				<option value="t1">Boomario</option>
+			</select>
+			<input type="submit" name="send" value="Mettre à jour" class="submit_inline">
+		</form>
+    	<table class="acces">
+			<tr>
+				<th width="10%">ID (db)</td>
+				<th width="40%">Answer</td>
+				<th width="20%">Points</td>
+				<th width="10%">Team</td>
+			</tr>
+				<tr>
+					<td><?= $r[0]['id'] ?></td>
+					<td><?= $r[0]['answer'] ?></td>
+					<td><?= $r[0]['point'] ?></td>
+					<td><?php
+					switch ($r[0]['team']) {
+					case "0":
+						echo "Pkpeach";
+						break;
+				    case "1":
+				    	echo "Boomario";
+				        break;
+					}
+					?></td>
+				</tr>
+		</table>
+    </main>
+</body>
+</html>

admin/gda/ajax.php

@@ -1,24 +0,0 @@
-<?php
-require_once '../../classes/dao.php';
-
-
-if (isset($_GET['function'])) {
-    if ($_GET['function'] == "save_scores")
-        save_scores();
-} else
-    show_error();
-
-function save_scores()
-{
-    if (isset($_GET['lines']) && isset($_GET['team'])) {
-        $dao = new Dao();
-        $dao->save_scores($_GET['lines'], $_GET['team']);
-        echo "Réussite";
-    } else
-        show_error();
-}
-
-function show_error() {
-    echo "Échec : ";
-    var_dump($_GET);
-}

admin/gda/scores.php

@@ -1,61 +0,0 @@
-<?php
-ob_start(); // Start reading html
-$relativePath = "../../";
-?>
-    <div class="inner">
-        <h1>ADMIN</h1>
-        <h2>Edition des scores</h2>
-        <ul>
-            <strong style="color: #ee293d">Quelques règles pour les scores</strong>
-            <li>Pas de score total négatif pour une équipe</li>
-            <li>A priori les scores supérieurs à 1000 marchent, mais au cas où restez à
-                moins de 1000 (comme l'année dernière quoi)</li>
-        </ul>
-        Si jamais y'a un quelconque problème, envoyez-moi un message.
-		<br>
-        <br>
-
-
-        <select id="teamSelect">
-            <option value="boo">Boomiflore</option>
-            <option value="pek">Peksureau</option>
-        </select>
-
-        <div class="add-line">
-            <i class="fas fa-plus"></i>
-        </div>
-        <div class="edit-header">
-            <div class="stat-log">Log</div>
-            <div class="stat-points">Points</div>
-            <div class="stat-trash"><i class='fas fa-trash'></i></div>
-        </div>
-        <table class="stats-table edit-stats">
-        </table>
-
-        <div class="save">
-            <i class="fas fa-save"></i> Enregistrer
-        </div>
-        <br>
-        <div class="buttons-container">
-            <a href="../index.php" class="admin-back-button">
-                <i class="fas fa-chevron-left"></i>
-                Retour sur la page admin
-            </a>
-            <a href="<?= $relativePath ?>stats.php" class="website-back-button">
-                Voir sur le site
-            </a>
-        </div>
-    </div>
-
-
-    <link rel="stylesheet" type="text/css" media="screen" href="<?= $relativePath ?>assets/css/adminEdit.css"/>
-
-<?php
-$pageContent = ob_get_clean(); // Store html content in variable
-$pageTitle = "Édition scores";
-
-$pageScripts = "<script type=\"text/javascript\" src=\"".$relativePath."assets/js/admin/statsManager.js\"></script>";
-
-include($relativePath . "includes/template.php"); // Display template with variable content
-
-?>

admin/gestion_des_acces.php

@@ -0,0 +1,197 @@
+<?php
+include "script.php";
+
+if($user['perm'] < 3) {
+	header('Location: deco.php');
+}
+
+if(isset($_GET['del']) AND !empty($_GET['del']))
+{
+	if($user['perm'] >= 3) {
+		$del = (int) htmlspecialchars($_GET['del']);
+
+		if($del != 1) {
+			$req = $db->prepare('DELETE FROM admin WHERE id =?');
+			$req->execute(array($del));
+			header('Location: gestion_des_acces.php');
+		} else {
+			$error = "On ne peut pas suprimer le superutilisateur sauf manuellement dans la base de données !";
+		}
+	}
+}
+
+if(isset($_GET['gda']) AND !empty($_GET['gda']))
+{
+	if($user['perm'] >= 3) {
+
+		$gda = (int) htmlspecialchars($_GET['gda']);
+
+		if($gda != 1) {
+			$req = $db->prepare('UPDATE admin SET perm = ? WHERE id =?');
+			$req->execute(array(0,$gda));
+			header('Location: gestion_des_acces.php');
+		} else {
+			$error = "On ne peut pas modifier le grade du superutilisateur sauf manuellement dans la base de données !";
+		}
+	}
+}
+
+if(isset($_GET['ville']) AND !empty($_GET['ville']))
+{
+	if($user['perm'] >= 3) {
+
+		$ville = (int) htmlspecialchars($_GET['ville']);
+
+		if($ville != 1) {
+			$req = $db->prepare('UPDATE admin SET perm = ? WHERE id =?');
+			$req->execute(array(1,$ville));
+			header('Location: gestion_des_acces.php');
+		} else {
+			$error = "On ne peut pas modifier le grade du superutilisateur sauf manuellement dans la base de données !";
+		}
+	}
+}
+
+if(isset($_GET['bur']) AND !empty($_GET['bur']))
+{
+	if($user['perm'] >= 3) {
+
+		$bur = (int) htmlspecialchars($_GET['bur']);
+
+		if($bur != 1) {
+			$req = $db->prepare('UPDATE admin SET perm = ? WHERE id =?');
+			$req->execute(array(2,$bur));
+			header('Location: gestion_des_acces.php');
+		} else {
+			$error = "On ne peut pas modifier le grade du superutilisateur sauf manuellement dans la base de données !";
+		}
+	}
+}
+
+if(isset($_GET['adm']) AND !empty($_GET['adm']))
+{
+	if($user['perm'] >= 3) {
+
+		$adm = (int) htmlspecialchars($_GET['adm']);
+		
+		if($adm != 1) {
+			$req = $db->prepare('UPDATE admin SET perm = ? WHERE id =?');
+			$req->execute(array(3,$adm));
+			header('Location: gestion_des_acces.php');
+		} else {
+			$error = "On ne peut pas modifier le grade du superutilisateur sauf manuellement dans la base de données !";
+		}
+	}
+}
+
+
+if(isset($_POST['send'])) {
+	if(isset($_POST['pseudo']) AND !empty($_POST['pseudo']) AND isset($_POST['perm']) AND !empty($_POST['perm'])) {
+
+		if($user['perm'] >= 3) {
+			$pseudo = htmlspecialchars($_POST['pseudo']);
+			$perm = htmlspecialchars($_POST['perm']);
+
+			switch ($perm) {
+			case "v0":
+				$perm_int = 0;
+				break;
+		    case "v1":
+		    	$perm_int = 1;
+		        break;
+		    case "v2":
+		    	$perm_int = 2;
+		        break;
+		    case "v3":
+		    	$perm_int = 3;
+		        break;
+			}
+
+			if(strlen($pseudo) <= 50) {
+				$req = $db->prepare("SELECT id FROM admin WHERE pseudo = ?");
+	            $req->execute(array($pseudo));
+	            $pseudo_exist = $req->rowCount();
+	            if ($pseudo_exist == 0) {
+					$req = $db->prepare("INSERT INTO admin(pseudo, perm) VALUES(?, ?)");
+					$req->execute(array($pseudo, $perm_int));
+					header('refresh:0');
+				} else {
+					$error = "pseudo déja utilisé";
+				}
+			} else {
+				$error = "le pseudo ne doit pas dépasser 50 char";
+			}
+		}
+	} else {
+		$error = "Tout les champs doivent être complétés";
+	}
+}
+?>
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>Admin / Accès</title>
+</head>
+<body>
+	<main>
+		<form method="POST">
+			<input type="text" placeholder="identifiant INSA" name="pseudo" class="input_inline">
+			<select name="perm" class="input_inline">
+				<option value="v0">GDA - Perm 0</option>
+				<option value="v1">Ville - Perm 1</option>
+				<option value="v2">Bureau - Perm 2</option>
+				<option value="v3">Admin - Perm 3</option>
+			</select>
+			<input type="submit" name="send" value="Creer l'acces" class="submit_inline">
+		</form>
+		<?php
+		if(isset($error)) {
+			echo "<font color='red'>".$error."</font>";
+		}
+		?>
+		<br><br>
+		<table class="acces">
+			<tr>
+				<th width="10%">ID (db)</td>
+				<th width="40%">Identifiant INSA</td>
+				<th width="40%">Perm</td>
+				<th width="10%">Actions</td>
+			</tr>
+			<?php
+			$req = $db->query('SELECT id, pseudo, perm FROM admin');
+			while($admin = $req->fetch()) {
+			?>
+				<tr>
+					<td><?= $admin['id'] ?></td>
+					<td><?= $admin['pseudo'] ?></td>
+					<td><?php
+						switch ($admin['perm']) {
+						case 0:
+							echo "<a href='?ville=".$admin['id']."'><font color='green'>GDA</font></a>";
+							break;
+					    case 1:
+							echo "<a href='?bur=".$admin['id']."'><font color='#3498DB'>Ville</font></a>";
+							break;
+					    case 2:
+							echo "<a href='?adm=".$admin['id']."'><font color='orange'>Bureau</font></a>";
+					        break;
+					    case 3:
+					        echo "<a href='?gda=".$admin['id']."'><font color='red'>Admin</font></a>";
+					        break;
+						}
+					?></td>
+					<td><?php
+					if($admin['id'] == 1) {
+						echo "<font color='red'>none</font>";
+					} else {
+						echo '<a href="?del='.$admin["id"].'" class="cross">X</a>';
+					}
+					?></td>
+				</tr>
+			<?php } ?>
+		</table>
+	</main>
+</body>
+</html>

admin/index.php

@@ -1,62 +1,83 @@
 <?php
-ob_start(); // Start reading html
+$page = "index";
-$relativePath = "../";
+include "script.php";
-?>
+//CAS
-<div class="inner">
+require_once("../phpCAS-1.3.6/CAS.php");
-    <h1>ADMIN</h1>
+
-    <h2>Bienvenue sur la page d'administration</h2>
+// Initialize phpCAS
-    
+phpCAS::client(CAS_VERSION_2_0, "cas.insa-toulouse.fr", 443, 'cas', true);
-    <p>
+
-        Sur cette page, tu vas pouvoir animer le site en changeant les scores, le planning ou les informations de la
+// For production use set the CA certificate that is the issuer of the cert
-        carte.
+// on the CAS server and uncomment the line below
-        <br/>
+//phpCAS::setCasServerCACert($cas_server_ca_cert_path);
-        Attention, tu dois avoir le compte approprié pour pouvoir modifier ces informations.
+phpCAS::setNoCasServerValidation();
-        <br/>
+
-        Les comptes sont les suivants (le numéro indique le niveau de privilèges) :
+// force CAS authentication
-    </p>
+phpCAS::forceAuthentication();
-    <ol>
+
-        <li>
+// at this step, the user has been authenticated by the CAS server
-            GDA
+// and the user's login name can be read with phpCAS::getUser().
-        </li>
+$pseudo = phpCAS::getUser();
-        <li>
+
-            Admin
+if(!isset($_SESSION['id'])) {
-        </li>
+    $req = $db->prepare("SELECT id FROM admin WHERE pseudo = ?");
-        <li>
+    $req->execute(array($pseudo));
-            Webmaster
+    $user_exist = $req->rowcount();
-        </li>
+    if ($user_exist == 1) {
-    </ol>
+            while ($user_login = $req->fetch()) {
-    <p>
+        	$_SESSION['id'] = $user_login['id'];
-        Un compte hérite des privilèges de tous ceux ayant un niveau inférieur.
+        	header('Refresh:0');
-        <br/>
+        }
-        Donc ici, Webmaster les possède tous.
+    } else {
-    </p>
+        $error = "Identifiant invalide !";
-    <div class="admin-container">
+    }
-        <h4>
+}
-            Action des GDA
+
-        </h4>
+if(isset($_POST['login'])) {
-        <a href="gda/scores.php">Editer les scores</a>
+    session_start();
-    </div>
+    $_SESSION = array();
-    <div class="admin-container">
+    session_destroy();
-        <h4>
+    header('Refresh:0');
-            Action des admins
+}
-        </h4>
-        <a href="admin/planning.php">Editer le planning</a>
-    </div>
-    <div class="admin-container">
-        <h4>
-            Action des webmasters
-        </h4>
-        <a href="webmaster/map.php">Editer le texte de la carte</a>
-        <br/>
-        <a href="webmaster/update.php">Mises à jour</a>
-    </div>
-</div>
-
-<link rel="stylesheet" type="text/css" media="screen" href="<?= $relativePath ?>assets/css/adminEdit.css"/>
-
-<?php
-$pageContent = ob_get_clean(); // Store html content in variable
-$pageTitle = "ADMIN";
-
-include($relativePath . "includes/template.php"); // Display template with variable content
 ?>
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>Admin / index</title>
+</head>
+<body>
+    <main>
+    <?php
+    if(isset($_SESSION['id'])) {
+        echo "Connecté sous l'identifiant : ".$user['pseudo'];
+        echo "<br><br>Accès : ";
+        switch ($user['perm']) {
+        case 0:
+            echo "<font color='green'>GDA</font>";
+            break;
+        case 1:
+            echo "<font color='#3498DB'>ville</font>";
+            break;
+        case 2:
+            echo "<font color='orange'>bureau</font>";
+            break;
+        case 3:
+            echo "<font color='red'>Admin</font>";
+            break;
+        }
+    } else {
+    ?>
+	<form method="POST">
+		<input type="submit" name="login" value="Se connecter" class="submit">
+	</form>
+	<?php
+    }
+	if(isset($error)) {
+		echo "<font color='red'>".$error."</font>";
+	}
+	?>
+    </main>
+</body>
+</html>

admin/planning.php

@@ -0,0 +1,225 @@
+<?php
+include "script.php";
+
+if($user['perm'] < 2) {
+	header('Location: deco.php');
+}
+
+$req = $db->query('SELECT * FROM planning_insa');
+
+if(isset($_GET['del']) AND !empty($_GET['del']))
+{
+	if($user['perm'] >= 2) {
+		$del = (int) htmlspecialchars($_GET['del']);
+
+		$req = $db->prepare('DELETE FROM planning_insa WHERE id =?');
+		$req->execute(array($del));
+		header('Location: planning.php');
+	}
+}
+
+if(isset($_GET['select']) AND !empty($_GET['select']))
+{
+	$select = (int) htmlspecialchars($_GET['select']);
+	$req = $db->prepare('SELECT * FROM planning_insa WHERE num_planning = ?');
+	$req->execute(array($select));
+}
+
+$req2 = $db->query('SELECT num_planning FROM planning_insa');
+$tab = [];
+$length = 0;
+while($h = $req2->fetch()) {
+	array_push($tab, $h['num_planning']);
+	$length++;
+}
+$tab = array_unique($tab); //supprimer les doublons
+
+if(isset($_POST['send'])) {
+	if($user['perm'] >= 2) {
+
+		if(isset($_POST['id_base']) AND !empty($_POST['id_base'])) {
+			$id_base = (int) htmlspecialchars($_POST['id_base']);
+
+			if(isset($_POST['day']) AND !empty($_POST['day'])) {
+				$day = (int) htmlspecialchars($_POST['day']);
+				$req = $db->prepare("UPDATE planning_insa SET day = ? WHERE id = ?");
+				$req->execute(array($day, $id_base));
+			}
+			if(isset($_POST['title']) AND !empty($_POST['title'])) {
+				$title = htmlspecialchars($_POST['title']);
+				$req = $db->prepare("UPDATE planning_insa SET title = ? WHERE id = ?");
+				$req->execute(array($title, $id_base));
+			}
+			if(isset($_POST['description']) AND !empty($_POST['description'])) {
+				$description = htmlspecialchars($_POST['description']);
+				$req = $db->prepare("UPDATE planning_insa SET description = ? WHERE id = ?");
+				$req->execute(array($description, $id_base));
+			}
+			if (isset($_POST['colorhex']) AND !empty($_POST['colorhex'])) {
+				$color = htmlspecialchars($_POST['colorhex']);
+				$req = $db->prepare("UPDATE planning_insa SET color = ? WHERE id = ?");
+				$req->execute(array($color, $id_base));
+			}
+			if(isset($_POST['order_start']) AND !empty($_POST['order_start'])) {
+				$order_start = (int) htmlspecialchars($_POST['order_start']);
+				$req = $db->prepare("UPDATE planning_insa SET order_start = ? WHERE id = ?");
+				$req->execute(array($order_start, $id_base));
+			}
+			if(isset($_POST['length']) AND !empty($_POST['length'])) {
+				$length = (float) (4.1)*htmlspecialchars($_POST['length']);
+				$req = $db->prepare("UPDATE planning_insa SET length = ? WHERE id = ?");
+				$req->execute(array($length, $id_base));
+			}
+			if(isset($_POST['num_planning']) AND !empty($_POST['num_planning'])) {
+				$num_planning = (int) htmlspecialchars($_POST['num_planning']);
+				$req = $db->prepare("UPDATE planning_insa SET num_planning = ? WHERE id = ?");
+				$req->execute(array($num_planning, $id_base));
+			}
+
+			header('Refresh: 0');
+		} else {
+			if(isset($_POST['day']) AND !empty($_POST['day']) AND isset($_POST['title']) AND !empty($_POST['title']) AND isset($_POST['description']) AND !empty($_POST['description']) AND isset($_POST['color']) AND !empty($_POST['color']) AND isset($_POST['order_start']) AND !empty($_POST['order_start']) AND isset($_POST['length']) AND !empty($_POST['length']) AND isset($_POST['num_planning']) AND !empty($_POST['num_planning']) AND isset($_POST['opacity'])) {
+
+				$day = (int) htmlspecialchars($_POST['day']);
+				$title = htmlspecialchars($_POST['title']);
+				$desc = htmlspecialchars($_POST['description']);
+				$color = htmlspecialchars($_POST['color']);
+				$opacity = (float) htmlspecialchars($_POST['opacity']);
+				$order_start = (int) htmlspecialchars($_POST['order_start']);
+				$len = (float) (4.1)*htmlspecialchars($_POST['length']);
+				$num_planning = (int) htmlspecialchars($_POST['num_planning']);
+
+
+				if (isset($_POST['colorhex']) AND !empty($_POST['colorhex'])) {
+					$color = htmlspecialchars($_POST['colorhex']);
+				} else {
+
+					if($opacity <= 100 AND $opacity >= 0) {
+						if($opacity == 0) {
+							$color = "transparent";
+						} else {
+							$color = $color.dechex($opacity*2.55);
+						}
+					} else {
+						$error = "l'opacité doit être en %";
+					}
+				}
+
+				$req = $db->prepare("INSERT INTO planning_insa(day, title, description, color, order_start, length, num_planning) VALUES(?, ?, ?, ?, ?, ?, ?)");
+				$req->execute(array($day, $title, $desc, $color, $order_start, $len, $num_planning));
+				header('refresh:0');
+			} else {
+				$error = "Tout les champs doivent être complétés";
+			}
+		}
+	}
+}
+?>
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>Admin / Planning</title>
+</head>
+<body>
+    <main>
+    	<form method="POST">
+    		<select name="day" class="input_inline">
+    			<option value="">-----</option>
+    			<option value="1">Lundi</option>
+    			<option value="2">Mardi</option>
+    			<option value="3">Mercredi</option>
+    			<option value="4">Jeudi</option>
+    			<option value="5">Vendredi</option>
+    			<option value="6">Samedi</option>
+    			<option value="7">Dimanche</option>
+    		</select>
+    		<input type="text" class="input_inline" name="title" placeholder="titre">
+    		<input type="text" class="input_inline" name="description" placeholder="description">
+    		<input type="color" name="color">
+    		<input type="text" name="colorhex" placeholder="couleur hexa (pas obligatoire)" class="input_inline">
+    		<input type="float" class="input_inline" name="opacity" placeholder="Opacité (%)" value="100">
+    		<input type="number" class="input_inline" name="order_start" placeholder="Ordre d'apparition">
+    		<input type="number" step="0.01" class="input_inline" name="length" placeholder="Taille (en heure)">
+    		<select name="num_planning" class="input_inline">
+    			<option value="">-----</option>
+    			<option value="1">Planning 1</option>
+    			<option value="2">Planning 2</option>
+    			<option value="3">Planning 3</option>
+    			<option value="4">Planning 4</option>
+    			<option value="5">Planning 5</option>
+    		</select>
+    		<input type="submit" value="Ajouter" name="send" class="submit_inline">
+    		<input type="number" class="input_inline" name="id_base" placeholder="id si edit">
+    	</form><br><br>
+    	
+		<?php
+		if(isset($error)) {
+			echo "<font color='red'>".$error."</font>";
+		}
+		?>
+		<a href="planning.php"><input type="submit" value="All" class="submit_inline"></a>
+		<?php
+		for($i=0; $i<$length; $i++) {
+			if(isset($tab[$i])) {
+				echo '<a href="?select='.$tab[$i].'"><input type="submit" value="Planning '.$tab[$i].'" class="submit_inline"></a>';
+			}
+		}
+		?>
+    	<br><br>
+    	<table class="acces">
+			<tr>
+				<th width="5%">ID (db)</th>
+				<th width="10%">Jour</th>
+				<th width="20%">Titre</th>
+				<th width="30%">Description</th>
+				<th width="5%">Couleur</th>
+				<th width="5%">Ordre d'apparition</th>
+				<th width="5%">taille</th>
+				<th width="10%">Planning n°</th>
+				<th width="10%">Action</th>
+			</tr>
+			<?php
+			while($r = $req->fetch()) {
+			?>
+				<tr>
+					<td><?= $r['id'] ?></td>
+					<td><?php
+						switch ($r['day']) {
+						case 1:
+							echo "Lundi";
+							break;
+						case 2:
+							echo "Mardi";
+							break;
+						case 3:
+							echo "Mercredi";
+							break;
+						case 4:
+							echo "Jeudi";
+							break;
+						case 5:
+							echo "Vendredi";
+							break;
+						case 6:
+							echo "Samedi";
+							break;
+						case 7:
+							echo "Dimanche";
+							break;
+						}
+					?></td>
+					<td><?= $r['title'] ?></td>
+					<td><?= $r['description'] ?></td>
+					<td style="background-color: <?= $r['color'] ?>;"><?= $r['color'] ?></td>
+					<td><?= $r['order_start'] ?></td>
+					<td><?php echo ($r['length']/4.1) ?>h</td>
+					<td><?= $r['num_planning'] ?></td>
+					<td><a href="?del=<?= $r['id'] ?>" class="cross">X</a></td>
+				</tr>
+			<?php } ?>
+		</table>
+    </main>
+</body>
+</html>

admin/prototype_com_ville.php

@@ -0,0 +1,175 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+
+    <style>
+        .cmv-progress {
+            color: white;
+            min-height: 200px;
+            background-color: #333;
+        }
+
+        h5.cmv-title {
+            font-size: 1.1em;
+            padding: 1em 1em 0;
+        }
+
+        .cmv-container {
+            display:flex;
+            position:relative;
+            width:90%;
+            margin:auto;
+            height:100px;
+        }
+
+        .cmv-step {
+            position: relative;
+            width: 36px;
+            height: 36px;
+            background-color: #ccc;
+            color: black;
+            z-index: 5;
+            border-radius: 50%;
+            line-height: 36px;
+            text-align: center;
+        }
+
+        .cmv-step.fait, .cmv-step.active {
+            background-color: #06a6b7;
+        }
+
+        .cmv-step.active:before {
+            content: "";
+            position: absolute;
+            display: block;
+            background-color: white;
+            margin: 15%;
+            width: 70%;
+            height: 70%;
+            border-radius: 50%;
+            z-index: -15;
+        }
+
+        .cmv-way {
+            position: relative;
+            flex: 1;
+        }
+
+        .cmv-way.fait:before {
+            background-color: #06a6b7;
+        }
+
+        .cmv-way:before {
+            content: "";
+            display: block;
+            width: 120%; height: 1px;
+            margin-left: -10%;
+            margin-top: 17px;
+            background-color: #eee;
+        }
+
+        .cmv-fixed:before {
+            content: "";
+            width:1px; height: 7px;
+            background-color: white;
+            position: absolute;
+            top:42px;
+            left: 18px;
+        }
+
+        .cmv-fixed {
+            color: white;
+            width: 100%;
+            margin-top: 2px;
+        }
+
+        .cmv-relative {
+            content: "52m";
+            position: absolute;
+            color: white;
+            text-align: center;
+            width: 100%;
+            top: -10px;
+        }
+
+
+    </style>
+
+</head>
+<body>
+
+<div class="cmv-progress">
+
+    <h5 id="cmv-title" class="cmv-title">Equipe 1-1</h5>
+
+    <div class="cmv-container">
+
+        <?php
+
+        /** Pour une équipe donnée */
+
+        /** $depart : Le point de départ de cette équipe */
+        $depart = 4;
+
+        /** $etape : À quelle étape en est cette équipe */
+        $etape = 5;
+
+
+
+
+
+        /** $i va de 1 à 17 (inclus), 17 étant le nombre d'étapes */
+        for ($i = 1; $i <= 17; $i++) {
+
+            /** $node : Le numéro dans la node à l'emplacement $i
+             * exemple : si une équipe commence au point 7 alors la première node ($i = 1)
+             * va contenir $node = 7 À UTILISER POUR LES TEMPS ! */
+            $node = ($i + $depart - 2) % 17 + 1;
+
+            /** $current : À quel index est placé la node correspondante à l'$etape
+             * exemple : une équipe qui commence au point 17 en est au point 3,
+             * elle est donc affichée comme étant au niveau de la node d'index 4 ($i = 4)
+             * puisque de gauche à droite les premières nodes sont 17 - 1 - 2 - 3 */
+            $current = $etape - $depart + 1;
+            if ($current < 0) {
+                $current = $current + 17;
+            }
+
+            /** Si le point $i a été fait (fait), est en train d'être fait (actuel), ou n'a pas encore été atteint */
+            $state = '';
+            if ($i < $current) {
+                $state = ' fait';
+            } elseif ($i === $current) {
+                $state = ' active';
+            }
+
+
+            echo '<div class="cmv-step'.$state.'">';
+            echo $node;
+
+            if ($i <= $current) {
+                // --:-- doit être remplacé par l'heure à laquelle le point $node a été atteint
+                echo '<div class="cmv-fixed">--:--</div>';
+            }
+            echo '</div>';
+
+            if ($i < 17) {
+                echo '<div class="cmv-way'.$state.'">';
+                if ($i < $current) {
+                    echo '<div class="cmv-relative">--m</div>'; // --mn doit être remplacé par le deltaT entre les points $node et $node+1
+                }
+                echo '</div>';
+            }
+        }
+
+        ?>
+
+    </div>
+
+</div>
+
+
+</body>
+</html>

admin/script.php

@@ -0,0 +1,72 @@
+<?php
+include "../script/db.php";
+
+session_start();
+
+if(isset($_SESSION['id'])) {
+	$req_user = $db->prepare("SELECT pseudo, perm FROM admin WHERE id = ?");
+	$req_user->execute(array($_SESSION['id']));
+	$user_exist = $req_user->rowcount();
+	$user = $req_user->fetch();
+} else {
+	$user_exist = 0;
+}
+
+echo '<link rel="stylesheet" type="text/css" href="admin.css" />';
+
+if($user_exist != 1) {
+	if($page != "index") {
+		header('Location: index.php');
+	}
+} else {
+	$content = 
+	 '<a href="index.php"><li class="green">Index</li></a>'
+	.'<a href="stats.php"><li class="green">Stats</li></a>';
+
+	switch ($user['perm']) {
+    case 1:
+		$content = $content."<a href='ville.php'><li class='yellow'>Com'ville</li></a>";
+        break;
+    case 2:
+        $content = $content
+        ."<a href='ville.php'><li class='yellow'>Com'ville</li></a>"
+        .'<a href="planning.php"><li class="orange">Planning</li></a>';
+        break;
+    case 3:
+        $content = $content
+        ."<a href='ville.php'><li class='yellow'>Com'ville</li></a>"
+        .'<a href="planning.php"><li class="orange">Planning</li></a>'
+        .'<a href="gestion_des_acces.php"><li class="red">Gestion des accès</li></a>'
+        .'<a href="enigma.php"><li class="red">Enigma</li></a>'
+        .'<a href="../matomo" target="_matomo"><li class="red">Matomo</li></a>';
+        break;
+	}
+
+	$content = $content.'<a href="deco.php"><li class="white">Se déconnecter</li></a>';
+}
+?>
+
+<!-- Matomo -->
+<script>
+  var _paq = window._paq = window._paq || [];
+  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+  _paq.push(['trackPageView']);
+  _paq.push(['enableLinkTracking']);
+  (function() {
+    var u="//etud.insa-toulouse.fr/~accueil_insa/matomo/";
+    _paq.push(['setTrackerUrl', u+'matomo.php']);
+    _paq.push(['setSiteId', '1']);
+    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+    g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
+  })();
+</script>
+<!-- End Matomo Code -->
+
+<nav>
+	<ul>
+		<?php
+		if(isset($content)) {
+			echo $content;
+		} ?>
+	</ul>
+</nav>

admin/stats.php

@@ -0,0 +1,148 @@
+<?php
+include "script.php";
+
+$req = $db->query('SELECT id, texte, points, team, id_staff FROM scores');
+
+
+if(isset($_GET['del']) AND !empty($_GET['del']))
+{
+
+	$del = (int) htmlspecialchars($_GET['del']);
+
+	$req_del = $db->prepare("SELECT id_staff FROM scores WHERE id = ?");
+	$req_del->execute(array($del));
+
+	$staff = $req_del -> fetchAll(PDO::FETCH_ASSOC);
+
+	if($user['perm'] >= 3 OR $staff[0]['id_staff'] == $_SESSION['id']) {
+		$req_del = $db->prepare('DELETE FROM scores WHERE id =?');
+		$req_del->execute(array($del));
+		header('Location: stats.php');
+	}
+}
+
+if(isset($_POST['teamall'])) {
+	$req = $db->query('SELECT id, texte, points, team, id_staff FROM scores');
+}
+
+if(isset($_POST['team0'])) {
+	$req = $db->query('SELECT id, texte, points, team, id_staff FROM scores WHERE team = 0');
+}
+
+if(isset($_POST['team1'])) {
+	$req = $db->query('SELECT id, texte, points, team, id_staff FROM scores WHERE team = 1');
+}
+
+if(isset($_POST['send'])) {
+	if(isset($_POST['texte']) AND !empty($_POST['texte']) AND isset($_POST['point']) AND !empty($_POST['point']) AND isset($_POST['team']) AND !empty($_POST['team'])) {
+		$texte = htmlspecialchars($_POST['texte']);
+		$point = (int) htmlspecialchars($_POST['point']);
+		$team = htmlspecialchars($_POST['team']);
+
+		switch ($team) {
+		case "t0":
+			$team_int = 0;
+			break;
+	    case "t1":
+	    	$team_int = 1;
+	        break;
+		}
+
+		if(strlen($pseudo) <= 50) {
+			$req_ins = $db->prepare("INSERT INTO scores(texte, points, team, id_staff) VALUES(?, ?, ?, ?)");
+			$req_ins->execute(array($texte, $point, $team_int, $_SESSION['id']));
+			header('refresh:0');
+		} else {
+			$error = "le texte de doit pas dépasser 50 char";
+		}
+	} else {
+		$error = "Tout les champs doivent être complétés";
+	}
+}
+?>
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>Admin / Stats</title>
+</head>
+<body>
+    <main>
+    	<form method="POST">
+			<input type="text" placeholder="Texte" name="texte" class="input_inline">
+			<input type="number" placeholder="point" name="point" class="input_inline">
+			<select name="team" class="input_inline">
+				<option value="t0">Pkpeach</option>
+				<option value="t1">Boomario</option>
+			</select>
+			<input type="submit" name="send" value="Ajouter" class="submit_inline">
+		</form>
+		<?php
+		if(isset($error)) {
+			echo "<font color='red'>".$error."</font>";
+		}
+		?>
+		<br><br>
+		<form method="POST">
+			<input type="submit" name="teamall" value="All" class="submit_inline">
+			<input type="submit" name="team0" value="Pkpeach" class="submit_inline">
+			<input type="submit" name="team1" value="Boomario" class="submit_inline">
+		</form>
+		<br><br>
+		<table class="acces">
+			<tr>
+				<th width="10%">ID (db)</td>
+				<th width="40%">Texte</td>
+				<th width="20%">Points</td>
+				<th width="10%">Team</td>
+				<th width="10%">Staff</td>
+				<th width="10%">Action</td>
+			</tr>
+			<?php
+			while($stat = $req->fetch()) {
+			?>
+				<tr>
+					<td><?= $stat['id'] ?></td>
+					<td><?= $stat['texte'] ?></td>
+					<td><?= $stat['points'] ?></td>
+					<td><?php
+					switch ($stat['team']) {
+					case "0":
+						echo "Pkpeach";
+						break;
+				    case "1":
+				    	echo "Boomario";
+				        break;
+					}
+					?></td>
+					<td><?php
+					$req_adm = $db->prepare("SELECT pseudo FROM admin WHERE id = ?");
+					$req_adm->execute(array($stat['id_staff']));
+
+					$staff = $req_adm -> fetchAll(PDO::FETCH_ASSOC);
+
+					if(isset($staff[0]['pseudo'])) {
+						echo $staff[0]['pseudo']." (".$stat['id_staff'].")";
+					} else {
+						echo "<font color='red'>UNDEFINED</font> "."(".$stat['id_staff'].")";
+					}
+					
+					?></td>
+					<td><?php
+
+						$req_int = $db->prepare("SELECT id_staff FROM scores WHERE id = ?");
+						$req_int->execute(array($stat['id']));
+
+						$staff = $req_int -> fetchAll(PDO::FETCH_ASSOC);
+						
+						if($user['perm'] >= 3 OR $staff[0]['id_staff'] == $_SESSION['id']) {
+							?><a href="?del=<?= $stat['id'] ?>" class="cross">X</a></td><?php
+						}
+					?></td>
+				</tr>
+			<?php } ?>
+		</table>
+    </main>
+</body>
+</html>

admin/ville.php

@@ -0,0 +1,412 @@
+<?php
+include "script.php";
+
+$refresh_rate = 15; //refresh rate en seconde (en gros on refresh la page toute les 15sec)
+
+if($user['perm'] < 1) {
+    header('Location: deco.php');
+}
+
+if(isset($_POST['start1'])) {
+    $req = $db->prepare("UPDATE ville SET state = ?, time_begin = ? WHERE session = 1");
+    $req->execute(array(1, time()));
+    header('Refresh: 0');
+}
+if(isset($_POST['start2'])) {
+    $req = $db->prepare("UPDATE ville SET state = ?, time_begin = ? WHERE session = 2");
+    $req->execute(array(1, time()));
+    header('Refresh: 0');
+}
+
+if(isset($_POST['stop1'])) {
+    $req = $db->query("UPDATE ville SET state = 2 WHERE session = 1");
+    header('Refresh: 0');
+}
+if(isset($_POST['stop2'])) {
+    $req = $db->query("UPDATE ville SET state = 2 WHERE session = 2");
+    header('Refresh: 0');
+}
+
+if(isset($_POST['reset1'])) {
+    if(htmlspecialchars($_POST['code']) == "anti-missclick") {
+        $req = $db->query("UPDATE ville SET state = 0, time_begin = 0 WHERE session = 1");
+        $req = $db->query("UPDATE ville_equipe SET temps = NULL WHERE id < 17");
+        header('Refresh: 0');
+    }
+}
+if(isset($_POST['reset2'])) {
+    if(htmlspecialchars($_POST['code']) == "anti-missclick") {
+        $req = $db->query("UPDATE ville SET state = 0, time_begin = 0 WHERE session = 2");
+        $req = $db->query("UPDATE ville_equipe SET temps = NULL WHERE id > 16");
+        header('Refresh: 0');
+    }
+}
+
+?>
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Admin / Com'ville</title>
+    <link rel="stylesheet" type="text/css" href="com_ville.css" />
+</head>
+<body>
+    <main>
+        <?php
+        if(isset($_GET['session']) AND !empty($_GET['session']))
+        {
+            $session = (int) htmlspecialchars($_GET['session']);
+            if($session == 1) {
+                ?>
+                    <a href="ville.php?session=1" class="href_session_selected">Session matin</a>
+                    <a href="ville.php?session=2" class="href_session">Session aprem</a>
+                    <br>
+                    <?php
+                    $req = $db->query("SELECT state FROM ville WHERE session = 1");
+                    $r = $req -> fetchAll(PDO::FETCH_ASSOC);
+
+                    if($r[0]['state'] == 0) {
+                        ?>
+                        <font color="green">Session non demarré, </font>
+                        <form method="POST">
+                            <input type="submit" name="start1" value="Démarrer la session" class="submit_inline"></form>
+                        </form>
+                        <?php
+                    } elseif($r[0]['state'] >= 1) {
+                        if($r[0]['state'] == 1) {
+                            ?>
+                            <font color="orange">Session en cours, </font>
+                            <form method="POST">
+                                <input type="submit" name="stop1" value="Stopper la session" class="submit_inline"></form>
+                            </form>
+
+                            <META HTTP-EQUIV="Refresh" CONTENT="<?= $refresh_rate ?>"> 
+
+                            <?php
+                        } elseif($r[0]['state'] == 2) {
+                           ?>
+                            <font color="red">Session terminé, </font>
+                            <form method="POST">
+                                <input type="text" name="code" placeholder="anti-missclick" class="input_inline">
+                                <input type="submit" name="reset1" value="Reset la session" class="submit_inline"></form>
+                            </form>
+                            <?php
+                        }
+                        echo "<br><br><br>";
+
+                        $reqsession = $db->query("SELECT state, time_begin FROM ville WHERE session = 1");
+                        $rs = $reqsession -> fetchAll(PDO::FETCH_ASSOC);
+
+                        $reqe = $db->query('SELECT * FROM ville_equipe WHERE id < 17');
+                        while($e = $reqe->fetch()) {
+                            $temps_init = $e["temps"];
+                            $tab_time = NULL;
+                            $tab_time = explode(";", $temps_init);
+                            $temps_begin = date("H:i:s",$rs[0]['time_begin']);
+
+                            if($temps_init == NULL) {
+                                $avancement = (int) 0;
+                                $delta_time_0 = gmdate("H:i:s",time()-$rs[0]['time_begin']);
+                            } else {
+                                $avancement = count($tab_time);
+                                $def_time = $tab_time[$avancement-1] - $rs[0]['time_begin'];
+                                $delta_time_0 = gmdate("H:i:s",$tab_time['0']-$rs[0]['time_begin']);              
+                            }
+
+                            //node 0
+                        ?>
+                        <div class="cmv-progress">
+                            <h5 id="cmv-title" class="cmv-title">Equipe <?= $e['nom'] ?></h5>
+                            <div class="cmv-container">
+                                <div class="cmv-step fait">0
+                                    <div class="cmv-fixed"><?= $temps_begin ?></div> <!-- avec "--:--" = heure de départ -->
+                                </div>
+
+                                <div class="cmv-way fait">
+                                    <div class="cmv-relative"><?= $delta_time_0 ?></div>
+                                </div>
+
+                                <?php
+
+                                /** Pour une équipe donnée */
+
+                                /** $depart : Le point de départ de cette équipe */
+                                $depart = $e['begin'];
+
+                                /** $etape : À quelle étape en est cette équipe, si on l'utilise il faut décommenter quelques ligne plus bas : "$current = $etape - $depart + 1;" et commenter "$current = $avancement+1;" */
+                                //$etape = 1;
+
+                                /** $i va de 1 à 17 (inclus), 17 étant le nombre d'étapes */
+                                for ($i = 1; $i <= 17; $i++) {
+
+                                    /** $node : Le numéro dans la node à l'emplacement $i
+                                     * exemple : si une équipe commence au point 7 alors la première node ($i = 1)
+                                     * va contenir $node = 7 À UTILISER POUR LES TEMPS ! */
+                                    $node = ($i + $depart - 2) % 17 + 1;
+
+                                    /** $current : À quel index est placé la node correspondante à l'$etape
+                                     * exemple : une équipe qui commence au point 17 en est au point 3,
+                                     * elle est donc affichée comme étant au niveau de la node d'index 4 ($i = 4)
+                                     * puisque de gauche à droite les premières nodes sont 17 - 1 - 2 - 3 */
+
+                                    //$current = $etape - $depart + 1;
+
+                                    $current = $avancement+1;
+
+                                    if ($current < 0) {
+                                        $current = $current + 17;
+                                    }
+
+                                    /** Si le point $i a été fait (fait), est en train d'être fait (actuel), ou n'a pas encore été atteint */
+                                    $state = '';
+                                    if ($i < $current) {
+                                        $state = ' fait';
+                                    } elseif ($i === $current) {
+                                        $state = ' active';
+                                    }
+
+
+                                    echo '<div class="cmv-step'.$state.'">';
+                                    echo $node;
+
+                                    if ($i <= $current) {
+                                        // --:-- doit être remplacé par l'heure à laquelle le point $node a été atteint
+                                        if($i == $current) {
+                                            echo '<div class="cmv-fixed">'.date("H:i:s",time()).'</div>';
+                                        } else {
+                                            echo '<div class="cmv-fixed">'.date("H:i:s",$tab_time[$i-1]).'</div>';
+                                        }
+                                    }
+                                    echo '</div>';
+
+                                    if ($i < 17) {
+                                        echo '<div class="cmv-way'.$state.'">';
+                                        if ($i < $current) {
+                                            if($i < $current-1) {
+                                                echo '<div class="cmv-relative">'.gmdate("H:i:s",$tab_time[$i]-$tab_time[$i-1]).'</div>'; // --mn doit être remplacé par le deltaT entre les points $node et $node+1
+                                            } else {
+                                                echo '<div class="cmv-relative">'.gmdate("H:i:s",time()-$tab_time[$i-1]).'</div>';
+                                            }
+                                            
+                                        }
+                                        echo '</div>';
+                                    }
+                                }
+
+                                ?>
+
+                            </div>
+
+                        </div>
+                        <?php
+                        } //fin du while e
+                    }
+
+
+
+
+
+
+
+            } elseif($session == 2) {
+
+
+
+
+                ?>
+                    <a href="ville.php?session=1" class="href_session">Session matin</a>
+                    <a href="ville.php?session=2" class="href_session_selected">Session aprem</a>
+                    <br>
+                    <?php
+                    $req = $db->query("SELECT state FROM ville WHERE session = 2");
+                    $r = $req -> fetchAll(PDO::FETCH_ASSOC);
+
+                    if($r[0]['state'] == 0) {
+                        ?>
+                        <font color="green">Session non demarré, </font>
+                        <form method="POST">
+                            <input type="submit" name="start2" value="Démarrer la session" class="submit_inline"></form>
+                        </form>
+                        <?php
+                    } elseif($r[0]['state'] >= 1) {
+                        if($r[0]['state'] == 1) {
+                            ?>
+                            <font color="orange">Session en cours, </font>
+                            <form method="POST">
+                                <input type="submit" name="stop2" value="Stopper la session" class="submit_inline"></form>
+                            </form>
+
+                            <META HTTP-EQUIV="Refresh" CONTENT="<?= $refresh_rate ?>"> 
+
+                            <?php
+                        } elseif($r[0]['state'] == 2) {
+                           ?>
+                            <font color="red">Session terminé, </font>
+                            <form method="POST">
+                                <input type="text" name="code" placeholder="anti-missclick" class="input_inline">
+                                <input type="submit" name="reset2" value="Reset la session" class="submit_inline"></form>
+                            </form>
+                            <?php
+                        }
+                        echo "<br><br><br>";
+
+                        $reqsession = $db->query("SELECT state, time_begin FROM ville WHERE session = 2");
+                        $rs = $reqsession -> fetchAll(PDO::FETCH_ASSOC);
+
+                        $reqe = $db->query('SELECT * FROM ville_equipe WHERE id > 16');
+                        while($e = $reqe->fetch()) {
+                            $temps_init = $e["temps"];
+                            $tab_time = NULL;
+                            $tab_time = explode(";", $temps_init);
+                            $temps_begin = date("H:i:s",$rs[0]['time_begin']);
+
+                            if($temps_init == NULL) {
+                                $avancement = (int) 0;
+                                $delta_time_0 = gmdate("H:i:s",time()-$rs[0]['time_begin']);
+                            } else {
+                                $avancement = count($tab_time);
+                                $def_time = $tab_time[$avancement-1] - $rs[0]['time_begin'];
+                                $delta_time_0 = gmdate("H:i:s",$tab_time['0']-$rs[0]['time_begin']);              
+                            }
+
+                            //node 0
+                        ?>
+                        <div class="cmv-progress">
+                            <h5 id="cmv-title" class="cmv-title">Equipe <?= $e['nom'] ?></h5>
+                            <div class="cmv-container">
+                                <div class="cmv-step fait">0
+                                    <div class="cmv-fixed"><?= $temps_begin ?></div> <!-- avec "--:--" = heure de départ -->
+                                </div>
+
+                                <div class="cmv-way fait">
+                                    <div class="cmv-relative"><?= $delta_time_0 ?></div>
+                                </div>
+
+                                <?php
+
+                                /** Pour une équipe donnée */
+
+                                /** $depart : Le point de départ de cette équipe */
+                                $depart = $e['begin'];
+
+                                /** $etape : À quelle étape en est cette équipe, si on l'utilise il faut décommenter quelques ligne plus bas : "$current = $etape - $depart + 1;" et commenter "$current = $avancement+1;" */
+                                //$etape = 1;
+
+                                /** $i va de 1 à 17 (inclus), 17 étant le nombre d'étapes */
+                                for ($i = 1; $i <= 17; $i++) {
+
+                                    /** $node : Le numéro dans la node à l'emplacement $i
+                                     * exemple : si une équipe commence au point 7 alors la première node ($i = 1)
+                                     * va contenir $node = 7 À UTILISER POUR LES TEMPS ! */
+                                    $node = ($i + $depart - 2) % 17 + 1;
+
+                                    /** $current : À quel index est placé la node correspondante à l'$etape
+                                     * exemple : une équipe qui commence au point 17 en est au point 3,
+                                     * elle est donc affichée comme étant au niveau de la node d'index 4 ($i = 4)
+                                     * puisque de gauche à droite les premières nodes sont 17 - 1 - 2 - 3 */
+
+                                    //$current = $etape - $depart + 1;
+
+                                    $current = $avancement+1;
+
+                                    if ($current < 0) {
+                                        $current = $current + 17;
+                                    }
+
+                                    /** Si le point $i a été fait (fait), est en train d'être fait (actuel), ou n'a pas encore été atteint */
+                                    $state = '';
+                                    if ($i < $current) {
+                                        $state = ' fait';
+                                    } elseif ($i === $current) {
+                                        $state = ' active';
+                                    }
+
+
+                                    echo '<div class="cmv-step'.$state.'">';
+                                    echo $node;
+
+                                    if ($i <= $current) {
+                                        // --:-- doit être remplacé par l'heure à laquelle le point $node a été atteint
+                                        if($i == $current) {
+                                            echo '<div class="cmv-fixed">'.date("H:i:s",time()).'</div>';
+                                        } else {
+                                            echo '<div class="cmv-fixed">'.date("H:i:s",$tab_time[$i-1]).'</div>';
+                                        }
+                                    }
+                                    echo '</div>';
+
+                                    if ($i < 17) {
+                                        echo '<div class="cmv-way'.$state.'">';
+                                        if ($i < $current) {
+                                            if($i < $current-1) {
+                                                echo '<div class="cmv-relative">'.gmdate("H:i:s",$tab_time[$i]-$tab_time[$i-1]).'</div>'; // --mn doit être remplacé par le deltaT entre les points $node et $node+1
+                                            } else {
+                                                echo '<div class="cmv-relative">'.gmdate("H:i:s",time()-$tab_time[$i-1]).'</div>';
+                                            }
+                                            
+                                        }
+                                        echo '</div>';
+                                    }
+                                }
+
+                                ?>
+
+                            </div>
+
+                        </div>
+                        <?php
+                        } //fin du while e
+                    } 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+            } else {
+                header('Location: ../error.php');
+            }
+        } else {
+        ?>
+            <a href="ville.php?session=1" class="href_session">Session matin</a>
+
+            <a href="ville.php?session=2" class="href_session">Session aprem</a>
+
+            <table class="acces">
+                <tr>
+                    <th width="10%">ID (db)</td>
+                    <th width="70%">Indice</td>
+                    <th width="10%">reponse</td>
+                    <th width="10%">photos</td>
+                </tr>
+                <?php
+                $req = $db->query('SELECT id, indice, reponse, photo FROM ville_epreuve');
+                while($epreuve = $req->fetch()) {
+                ?>
+                    <tr>
+                        <td><?= $epreuve['id'] ?></td>
+                        <td><?= $epreuve['indice'] ?></td>
+                        <td><?= $epreuve['reponse'] ?></td>
+                        <td><?php if(isset($epreuve['photo'])) { ?><img src="../assets/img/com_ville/<?= $epreuve['photo'] ?>" style="height: 100px;"><?php } else { echo "<font color='red'>no photos</font>"; }?></td>
+                    </tr>
+                <?php } ?>
+            </table>
+
+        <?php } ?>
+    </main>
+</body>
+</html>

admin/webmaster/.htaccess

@@ -1,5 +0,0 @@
-AuthName "MDP ?"
-AuthType Basic
-AuthUserFile /home_clubs/accueil_insa/public_html/includes/pass/.htpass_webmaster
-require valid-user
-

admin/webmaster/ajax.php

@@ -1,125 +0,0 @@
-<?php
-error_reporting(E_ALL);
-error_reporting(E_ALL & ~E_NOTICE & ~E_STRICT & ~E_DEPRECATED & ~E_WARNING);
-ini_set('display_errors', 1);
-
-
-require_once '../../classes/dao.php';
-
-
-$rest_json = file_get_contents("php://input");
-$_POST = json_decode($rest_json, true);
-//var_dump($_POST);
-
-// if (isset($_GET['function']) || isset($_POST['function'])) {
-//     if ($_GET['function'] == "save_map_info")
-//         save_map_info();
-//     elseif ($_POST['function'] == "update_website")
-//         update_website();
-// } else
-//     show_error();
-if (isset($_REQUEST['function'])) {
-    switch($_REQUEST['function']) {
-        case 'save_map_info':
-            save_map_info();
-            break;
-        case 'create_building':
-            create_building();
-            break;
-        case 'delete_building':
-            delete_building();
-            break;
-        case 'get_map_selectors':
-            get_map_selectors();
-            break;
-        default :
-            show_error();
-            break;
-    }
-       
-
-} else {
-    show_error();
-}
-
-function save_map_info() {
-    if (isset($_GET['selector']) && isset($_GET['info'])) {
-        $dao = new Dao();
-        $dao->save_map_info($_GET['selector'], $_GET['info']);
-        echo "Réussite";
-    } else {
-        show_error();
-    }
-}
-
-function get_map_selectors() {
-    header('Content-Type: application/json');
-    $dao = new Dao();
-    echo json_encode($dao->get_map_selectors());
-}
-/*
-function is_in_map() {
-    if($_SERVER['REQUEST_METHOD'] === 'POST') {
-        show_error(); 
-        return;
-    }
-    $dao = new Dao();
-    $_REQUEST = array(
-        'selector'      => $_REQUEST['info']['selector'],
-    );
-    $dao->is_in_map($_REQUEST['selector']);
-}
-*/
-function create_building() {
-    if($_SERVER['REQUEST_METHOD'] === 'GET') {
-        show_error(); 
-        return;
-    }
-    $dao = new Dao();
-    $_REQUEST = array(
-        'title'         => $_REQUEST['info']['title'],
-        'description'   => $_REQUEST['info']['description'],
-        'selector'      => $_REQUEST['info']['selector'],
-    );
-    var_dump($_REQUEST);
-
-    $dao->create_building($_REQUEST['title'], $_REQUEST['description'], $_REQUEST['selector']);
-    echo 'Réussite';
-}
-
-function delete_building() {
-    if($_SERVER['REQUEST_METHOD'] === 'GET') {
-        show_error(); 
-        return;
-    }
-    $dao = new Dao();
-    $_REQUEST = array(
-        'selector'      => $_REQUEST['info']['selector'],
-    );
-    var_dump($_REQUEST);
-    $dao->delete_building($_REQUEST['selector']);
-    echo 'Réussite';
-}
-
-function update_website() {
-//    if (isset($_POST['login']) && isset($_POST['password'])) {
-//        $login = $_POST['login'];
-//        $password = $_POST['password'];
-//        echo $login . ":" . $password."\n";
-//        // Cannot write because php cannot write as user www-data
-//        // be sure to escape characters
-//        // Do not remove the space before the command (prevent command from being saved in history)
-////            system(" git pull https://".$login.":".$password."@git.srv-falcon.etud.insa-toulouse.fr/vergnet/site-accueil-insa.git");
-//    } else {
-//        show_error();
-//    }
-}
-
-
-function show_error() {
-    echo "Échec :\n";
-    echo "GET\n";
-    var_dump($_GET);
-    echo "POST\n";
-    var_dump($_POST);
-}

admin/webmaster/map.php

@@ -1,77 +0,0 @@
-<?php
-ob_start(); // Start reading html
-$relativePath = "../../";
-require_once $relativePath . 'classes/dao.php';
-?>
-    <div class="inner mapEdition">
-
-        <h1>ADMIN</h1>
-        <h2>Edition de la carte</h2>
-
-
-        <select id="mapSelect">
-            <?php setup_map_dropdown() ?>
-        </select>
-
-        <br>
-
-        <label for="titleInput">Titre</label>
-        <input type="text" id="titleInput">
-
-        <label for="descriptionInput">Description</label>
-        <textarea rows="15" id="descriptionInput"></textarea>
-
-        <div class="save getMapInfo">
-            <i class="fas fa-save"></i> Enregistrer
-        </div>
-        <div class="delete">
-            <i class="fas fa-trash"></i> Supprimer
-        </div>
-        <br>
-        <div class="buttons-container">
-            <a href="../index.php" class="admin-back-button">
-                <i class="fas fa-chevron-left"></i>
-                Retour sur la page admin
-            </a>
-            <a href="<?= $relativePath ?>map.php" class="website-back-button">
-                Voir sur le site
-            </a>
-        </div>
-    </div>
-
-    <div class="inner buildingManager">
-    
-        <h2>Ajout d'un batiment</h2>
-        <input type="text" id="selectorInput">
-
-        <label for="titleInput">Titre</label>
-        <input type="text" id="titleInput">
-
-        <label for="descriptionInput">Description</label>
-        <textarea rows="15" id="descriptionInput"></textarea>
-
-        <div class="save addBuilding">
-            <i class="fas fa-save"></i> Enregistrer
-        </div>
-        
-    </div>
-
-    <link rel="stylesheet" type="text/css" media="screen" href="<?= $relativePath ?>assets/css/adminEdit.css"/>
-
-<?php
-$pageContent = ob_get_clean(); // Store html content in variable
-$pageTitle = "Édition carte";
-
-$pageScripts = "<script type=\"text/javascript\" src=\"".$relativePath."assets/js/admin/mapManager.js\"></script>";
-
-include($relativePath . "includes/template.php"); // Display template with variable content
-
-function setup_map_dropdown()
-{
-    $dao = new Dao();
-    foreach ($dao->get_map_selectors() as $row) {
-        echo "<option value='" . $row['selector'] . "'>" . $row['selector'] . "</option>";
-    }
-}
-
-?>

admin/webmaster/update.php

@@ -1,57 +0,0 @@
-<?php
-ob_start(); // Start reading html
-$relativePath = "../../";
-require_once $relativePath . 'classes/dao.php';
-
-$log = shell_exec("git log | head -50"); // Show the first few commits
-
-?>
-<div class="inner">
-    <h1>ADMIN</h1>
-    <h2>Mise a jour du site</h2>
-
-<!--        <label for="usernameInput">Login</label>-->
-<!--        <input type="text" id="usernameInput">-->
-<!---->
-<!--        <label for="passwordInput">Password</label>-->
-<!--        <input type="password" id="passwordInput">-->
-<!---->
-<!--        <div class="save">-->
-<!--            <i class="fas fa-save"></i> Mettre à Jour-->
-<!--        </div>-->
-
-    <div id="gitButton">
-        <a href="https://git.srv-falcon.etud.insa-toulouse.fr/vergnet/site-accueil-insa" target="_blank">
-            Voir sur Gitea
-        </a>
-    </div>
-    <h3>Log</h3>
-    <p>
-        <?php
-        echo nl2br($log)
-        ?>
-    </p>
-
-    <div class="buttons-container">
-        <a href="../index.php" class="admin-back-button">
-            <i class="fas fa-chevron-left"></i>
-            Retour sur la page admin
-        </a>
-        <a href="<?= $relativePath ?>index.php" class="website-back-button">
-            Voir sur le site
-        </a>
-    </div>
-</div>
-
-
-<link rel="stylesheet" type="text/css" media="screen" href="<?= $relativePath ?>assets/css/adminEdit.css"/>
-
-<?php
-$pageContent = ob_get_clean(); // Store html content in variable
-$pageTitle = "Mise à jour";
-
-$pageScripts = "<script type=\"text/javascript\" src=\"".$relativePath."assets/js/admin/updateManager.js\"></script>";
-
-include($relativePath . "includes/template.php"); // Display template with variable content
-
-?>

ajax/read/index.php

@@ -1,694 +0,0 @@
-<?php
-require_once '../../classes/dao.php';
-
-
-if (isset($_GET['function'])) {
-    if ($_GET['function'] == "get_scores")
-        get_scores();
-    elseif ($_GET['function'] == "get_map_info")
-        get_map_info();
-    elseif ($_GET['function'] == "get_activities_of_day")
-        get_activities_of_day();
-    elseif ($_GET['function'] == "get_enigma_code")
-        get_enigma_code();
-    elseif ($_GET['function'] == "get_plaquette_code")
-        get_plaquette_code();
-    elseif ($_GET['function'] == "get_map_selectors")
-        get_map_selectors();
-} else
-    show_error();
-
-
-/**
- * Get the selectors of the map from the database
- * A selector is the name/identifier of a building *  
- */
-function get_map_selectors() {
-    header('Content-Type: application/json');
-    $dao = new Dao();
-    echo json_encode($dao->get_map_selectors());
-}
-
-
-function get_scores() {
-    if (isset($_GET['team'])) {
-        header('Content-Type: application/json');
-        $dao = new Dao();
-        echo json_encode($dao->get_score_team($_GET['team']));
-    } else {
-        show_error();
-    }
-}
-
-function get_map_info() {
-    if (isset($_GET['selector'])) {
-        header('Content-Type: application/json');
-        $dao = new Dao();
-        echo json_encode($dao->get_map_info($_GET['selector']));
-    } else {
-        show_error();
-    }
-}
-
-
-function get_activities_of_day() {
-    if (isset($_GET['day'])) {
-        header('Content-Type: application/json');
-        $dao = new Dao();
-        echo json_encode($dao->get_activities_of_day($_GET['day']));
-    } else {
-        show_error();
-    }
-}
-
-//
-// Section pour les énigmes
-//
-
-/**
- * Tells if the team is the first to solve the enigma
- * @param Array     $score_data     = { $team       = Name of the team who posted
- *                                      $text       = Name of the enigma
- *                                     }
- * @return Bool                     = true if this team is the first, false otherwise
- */
-function isFirstTeamToSolve($score_data) {
-    $team   =   $score_data['team'];
-    $enigme =   $score_data['text'];
-    $dao = new Dao();
-    $scorePek = $dao->get_score_team('pek');
-    $scoreBoo = $dao->get_score_team('boo');
-    $score = array_merge($scorePek, $scoreBoo);
-
-    foreach($score as $value) {
-
-        if ($value['text'] == $enigme)
-            return false;
-    }
-    return true;
-}
-
-/**
- * Tells if the team has already solved the enigma
- * @param   String      $team       = Name of the team 
- * @param   String      $enigme     = Name of the enigma
- * @return  Bool                    = true if already solved, false otherwise
- */
-function isAlreadySolved($team, $enigme) {
-
-    $dao = new Dao();
-    $score = $dao->get_score_team($team);
-
-    foreach($score as $value) {
-        if ($value['text'] == $enigme)
-            return true;
-    }
-    return false;
-}
-
-
-/**
- * Tells if an enigma is solved
- * @param   String      $enigme     = Name of the enigma
- * @return  Bool                    = true if the enigma is solved, false otherwise
- */
-function isEnigmaSolved($enigme) {
-    $dao = new Dao();
-    $scorePek = $dao->get_score_team('pek');
-    $scoreBoo = $dao->get_score_team('boo');
-    $score = array_merge($scorePek, $scoreBoo);
-
-    foreach($score as $value) {
-
-        if ($value['text'] == $enigme)
-            return true;
-    }
-    return false;
-}
-
-
-// TODO : passer ça sous DB
-/**
- * Get the enigma code posted and processes it
- * @example ../../enigma.php
- * @todo Improve it by adding an 'enigmes' table into the database
- */
-function get_enigma_code() {
-    if (isset($_GET['code'])) {
-        /**
-         * Array that contains the data to display
-         * @var Array   $data {
-         *      @var String $name   = Name of the enigma
-         *      @var String $info   = Displayed Content
-         * }
-         */
-        $data = array(
-            "name" => $_GET['code'],
-            "info" => null,
-        );
-
-        $team = $_GET['team'];
-        $time = new DateTime();
-        $date = $time->getTimestamp();
-
-        /**
-         * Array that contains the data to update the scores
-         * @var Array   $score_data {
-         *      @var String $text   = Name of the enigma
-         *      @var Int    $points = Enigma's points
-         *      @var String $team   = Team who solved
-         * }
-         */
-        $score_data = array(
-            "text" => null,
-            "points" => 0,
-            "team" => $team,
-        );
-
-
-        // One case responds to a code found
-        // Bonus : See case Jean Jaurès for explanation
-        // Malus : See case 0712        for explanation
-        switch ($_GET['code']) {
-            case '501432' :
-                $data["name"] = "enigme-1";
-                $score_data["text"] = 'Énigme 1';
-                $score_data["points"] = 200;
-
-                if($date< 1627221618 ) {
-                    $data["info"] = "<h2>Énigme 1</h2>Code trouvé, reviens demain pour avoir la suite ;)";
-                } else {
-                    $data["info"] = "<h2>Énigme 1</h2>
-                        <p>Petit Pionnier Aguerri, dans l'arène, les déplacements des combattants sont tous enregistrés, voici le déplacement d'un combattant d'un district concurrant, à toi de le retrouver ! <br>
-                        nord, nord, nord, est, sud-est, sud-ouest, ouest; <br>
-                        ouest, sud, est, ouest, sud, est; <br>
-                        ouest, sud, est, ouest, sud, est; <br>
-                        est, est, est, ouest, sud, sud, sud; <br>
-                        nord,nord,nord-est, , sud-est, sud, sud, nord, ouest; <br>
-                        </p>";
-
-                }
-                if(isFirstTeamToSolve($score_data)) {
-                    $dao = new Dao();
-                    $dao->add_score($score_data);
-                }
-                echo json_encode($data, JSON_FORCE_OBJECT);
-                break;
-                
-            case 'PEETA' :
-                $data["name"] = "enigme-2";
-                $score_data["text"] = 'Énigme 2';
-                $score_data["points"] = 200;
-
-                if($date< 1628334842 ) {
-                    $data["info"] = "<h2>Énigme 2</h2>Code trouvé, reviens à 13h14 pour la suite";
-                } else {
-                    $data["info"] = "<h2>Énigme 2</h2>Dès l'aube, un oiseau aux sifflements merveilleux fit son apparition sur l'arène de l'INSA";
-
-                }
-                if(isFirstTeamToSolve($score_data)) {
-                    $dao = new Dao();
-                    $dao->add_score($score_data);
-                }
-                echo json_encode($data, JSON_FORCE_OBJECT);
-                break;
-
-            case 'Lucy Gray Baird' :
-                $data["name"] = "enigme-3";
-                $score_data["text"] = 'Énigme 3';
-                $score_data["points"] = 250;
-
-                if($date< 1628353800 ) {
-                    $data["info"] = "<h2>Énigme 3</h2><p>Code trouvé</p>";
-                } elseif ($date< 1628400600) {
-                    $data["info"] = "<h2>Énigme 3</h2><p>Code trouvé ! Voici un petit indice pour la suite</p><img src=\"assets/enigmes/Caesar.jpg\"></img>";
-                } else {
-                    $data["info"] = "<h2>Énigme 3</h2>
-                        <p>Après l'indice, l'énoncé.</p>
-                        <!--<p>OaduaxmzgeEzai</p><p>M'hvshuh txh yrxv dlphu od fubswrjudsklh!</p>-->
-                        <img src=\"assets/enigmes/Caesar.jpg\"></img>";
-
-                }
-                if(isFirstTeamToSolve($score_data)) {
-                    $dao = new Dao();
-                    $dao->add_score($score_data);
-                }
-                echo json_encode($data, JSON_FORCE_OBJECT);
-                break;
-            case 'CoriolanusSnow' :
-                $data["name"] = "enigme-4";
-                $score_data["text"] = 'Énigme 4';
-                $score_data["points"] = 250;
-                
-                if($date< 1628460000 ) {
-                    $data["info"] = "<h2>Énigme 4</h2>
-                        Code trouvé !<!--Parcours du site en cours...--> ";
-                } else {
-                    $data["info"] = "<h2>Énigme 4</h2>
-                        Code trouvé ! Parcours du site en cours...
-                        <!--Et là... une grande allée avec plein d'énigmes, qu'on appellera la grande allée avec plein d'énigmes !-->
-                        <p>Voilà plusieurs jours que tu parcours les énigmes, augmentons un peu la difficulté...</p>";
-                    
-
-                }
-                if(isFirstTeamToSolve($score_data)) {
-                    $dao = new Dao();
-                    $dao->add_score($score_data);
-                }
-                echo json_encode($data, JSON_FORCE_OBJECT);
-                break;     
-            case 'PANEM' :
-                $data["name"] = "enigme-5";
-                $score_data["text"] = 'Énigme 5';
-                $score_data["points"] = 50;
-                
-                if($date< 1628524800 ) {
-                    $data["info"] = "<h2>Énigme 5</h2>
-                        Code trouvé !";
-                } else {
-                    $data["info"] = "<h2>Énigme 5</h2>
-                        <p>N'aurais tu pas oublié quelque chose ?</p>";
-
-                }
-                if(isFirstTeamToSolve($score_data)) {
-                    $dao = new Dao();
-                    $dao->add_score($score_data);
-                }
-                echo json_encode($data, JSON_FORCE_OBJECT);
-                break; 
-
-            case 'Théorème de Gauss' :
-                $data["name"] = "enigme-6";
-                $score_data["text"] = 'Énigme 6';
-                $score_data["points"] = 150;
-                
-                if($date< 1628535600 ) {
-                    $data["info"] = "<h2>Énigme 6</h2>
-                        Code trouvé !";
-                } else {
-                    $data["info"] = "<h2>Énigme 6</h2>
-                        <p>Quelle est la somme des lettres des solutions des deux dernières énigmes ? (ASCII)</p>
-                        ";
-
-                }
-                if(isFirstTeamToSolve($score_data)) {
-                    $dao = new Dao();
-                    $dao->add_score($score_data);
-                }
-                echo json_encode($data, JSON_FORCE_OBJECT);
-                break;  
-             
-
-            case '2237' :
-                $data["name"] = "enigme-0";
-                $score_data["text"] = 'Énigme 0';
-                $score_data["points"] = 100;
-                
-                if($date< 1628625600 ) {
-                    $data["info"] = "<h2>Énigme 0</h2>
-                        <p>Bien joué ! Attendez demain pour la suite qui a été minutieusement préparée !</p>
-                        ";
-                } else {
-                    $data["info"] = "<h2>Énigme 0</h2>
-                        <p>Je vais vous raconter trois histoires, voici les titres:</p>
-                        <p> - Deux arbres se retrouvèrent l'un avec l'autre près des sept nains.</p>
-                        <p> - Quatre petits oiseaux apprennent à s'envoler un à un.</p>
-                        <p> - L'histoire qui se lisait dans plusieurs sens.</p>";
-
-                
-
-                }
-                if(isFirstTeamToSolve($score_data)) {
-                    $dao = new Dao();
-                    $dao->add_score($score_data);
-                }
-                echo json_encode($data, JSON_FORCE_OBJECT);
-                break; 
-
-
-            case 'atr challenges' :
-                $data["name"] = "enigme-00";
-                $score_data["text"] = 'Énigme 00';
-                $score_data["points"] = 100;
-                
-                if($date < 1628625600) {
-                    $data["info"] = "<h2>Énigme 00</h2>
-                            <p>Qui sera le plus rapide à libérer Paul et Cécile...</p>";
-                } else {
-                    $data["info"] = "<h2>Énigme 00</h2>
-                            <a href=\"assets/enigmes/Livre.pdf\">Paul et Cécile ont fait tomber ce livre avant d'aller au cinéma...</a>";
-                    
-                }
-
-                if(isFirstTeamToSolve($score_data)) {
-                    $dao = new Dao();
-                    $dao->add_score($score_data);
-                }
-                echo json_encode($data, JSON_FORCE_OBJECT);
-                break; 
-
-            
-            case 'POMMADE' :
-                $data["name"] = "enigme-000";
-                $score_data["text"] = 'Énigme 00 Intermédiaire';
-                $score_data["points"] = 500;
-                
-                if($date< 1628613000 ) {
-                    $data["info"] = "<h2>Énigme 00 Intermédiaire</h2>
-                        <p>Bien joué ! Attendez demain pour la suite !</p>";
-                } else {
-                    $data["info"] = "<h2>Énigme 00 Intermédiaire</h2>
-                    <p>En résolvant cette énigme, vous avez reçu un petit parachute avec à l’intérieur cette mystérieuse <a href=\"assets/enigmes/Liberation/Carte-odRS.jpg\">carte</a>.</p>
-                    </p> Les participants sont autorisés à quitter l’arène le temps de retrouver leurs compagnons. Evidemment, ils seront accompagnés par un bataillon de pacificateurs et des caméras pour suivre chacun de leurs mouvements. Mais attention, ils ne pourront choisir qu’une seule destination, bon courage, et puisse le sort vous être favorable.
-                    </p>
-                    ";
-
-                }
-                if(isFirstTeamToSolve($score_data)) {
-                    $dao = new Dao();
-                    $dao->add_score($score_data);
-                }
-                echo json_encode($data, JSON_FORCE_OBJECT);
-
-                break;
-
-            
-            case 'Venise' :
-                $data["name"] = "enigme-liberation-1";
-                $score_data["text"] = 'Énigme Libération 1';
-                $score_data["points"] = 100;
-
-                if($date< 1628613000 ) {
-                    $data["info"] = "<h2>Énigme Libération 1</h2>
-                        <p>Bien joué ! Attendez un peu pour la suite !</p>";
-                } else {
-                    $data["info"] = "<h2>Énigme Libération 1</h2>
-                    <p>Inversez les couleurs et videz l’eau, à quoi cela vous fait penser ?</p>
-                    ";
-
-                }
-
-                if(isFirstTeamToSolve($score_data)) {
-                    $dao = new Dao();
-                    $dao->add_score($score_data);
-                }
-                echo json_encode($data, JSON_FORCE_OBJECT);
-                break; 
-            
-            case 'Jean Jaurès' :
-
-                $data["name"] = "enigme-liberation-2";       // Name of the div (must be unique)
-                $score_data["text"] = 'Énigme Libération 2'; // Name of the enigma displayed (scores and pages)
-                $score_data["points"] = 100;                 // Add this amount of points to the team who first found this code
-                
-                // This enigma must be solved if another has been solved
-                // It avoids enigmas found by accident and assure consistency in the resolution
-                if(isEnigmaSolved('Énigme Libération 1')) {  
-
-                    // Used to display what happens next at a specific time (timestamp UTC, check server time)
-                    if($date < 1628613000) {                
-                        $data["info"] = "<h2>Énigme Libération 2</h2>
-                        <p>Vous avez compris le message des informateurs, aller dans le centre de la capitale de Panem vous parait évident maintenant. </p>
-                        <p>Mais un virus tourne, il ne faudrait pas faire retentir le canon et perdre des tributs, alors ne passez pas trop de temps dans la ville !
-                        </p>";
-                    } else {
-                        $data["info"] = "<h2>Énigme Libération 2</h2>
-                        <p>Vous avez compris le message des informateurs, aller dans le centre de la capitale de Panem vous parait évident maintenant. </p>
-                        <p>Mais un virus tourne, il ne faudrait pas faire retentir le canon et perdre des tributs, alors ne passez pas trop de temps dans la ville !
-                        </p>";
-                    }
-
-                    // Give the points to the first team who solved the enigma
-                    if(isFirstTeamToSolve($score_data)) {
-                        $dao = new Dao();
-                        $dao->add_score($score_data);
-                    }
-                    echo json_encode($data, JSON_FORCE_OBJECT); // Display the new content
-                }
-                break;
-
-            case 'Café Pop' :
-                $data["name"] = "enigme-liberation-3-1";
-                $score_data["text"] = 'Énigme Libération 3-1';
-                $score_data["points"] = 50;
-                if(isEnigmaSolved('Énigme Libération 2')) {
-                    if($date < 1628613000) {
-                        $data["info"] = "<h2>Énigme Libération 3-1</h2>
-                        <p>Aucune perte du côté de votre district, tout va bien, vous avancez prudemment dans la ville…</p>
-                        <img src=\"assets/enigmes/Liberation/03-06.jpg\"></img>
-                        <img src=\"assets/enigmes/Liberation/07-12.jpg\"></img>";
-
-
-                    } else {
-                        $data["info"] = "<h2>Énigme Libération 3-1</h2>
-                        <p>Aucune perte du côté de votre district, tout va bien, vous avancez prudemment dans la ville…</p>
-                        <img src=\"assets/enigmes/Liberation/03-06.jpg\"></img>
-                        <img src=\"assets/enigmes/Liberation/07-12.jpg\"></img>";
-
-
-
-                    }
-
-                    if(isFirstTeamToSolve($score_data)) {
-                        $dao = new Dao();
-                        $dao->add_score($score_data);
-                    }
-                    echo json_encode($data, JSON_FORCE_OBJECT);
-                }
-                break;
-
-            case 'Snapper' :
-                $data["name"] = "enigme-liberation-3-2";
-                $score_data["text"] = 'Énigme Libération 3-2';
-                $score_data["points"] = 50;
-                if(isEnigmaSolved('Énigme Libération 2')) {
-                    if($date < 1628613000) {
-                        $data["info"] = "<h2>Énigme Libération 3-2</h2>
-                        <p>Aucune perte du côté de votre district, tout va bien, vous avancez prudemment dans la ville…</p>
-                        <img src=\"assets/enigmes/Liberation/11-08.jpg\"></img>
-                        <img src=\"assets/enigmes/Liberation/19-05.jpg\"></img>
-                        <img src=\"assets/enigmes/Liberation/06-03.jpg\"></img>";
-
-
-                    } else {
-                        $data["info"] = "<h2>Énigme Libération 3-2</h2>
-                        <p>Aucune perte du côté de votre district, tout va bien, vous avancez prudemment dans la ville…</p>
-                        <img src=\"assets/enigmes/Liberation/11-08.jpg\"></img>
-                        <img src=\"assets/enigmes/Liberation/19-05.jpg\"></img>
-                        <img src=\"assets/enigmes/Liberation/06-03.jpg\"></img>";
-
-
-
-                    }
-
-                    if(isFirstTeamToSolve($score_data)) {
-                        $dao = new Dao();
-                        $dao->add_score($score_data);
-                    }
-                    echo json_encode($data, JSON_FORCE_OBJECT);
-                }
-                break;
-
-            case 'needhelp' :
-                $data["name"] = "enigme-liberation-3-3";
-                $score_data["text"] = 'Énigme Libération 3-3';
-                $score_data["points"] = 0;
-                if(isEnigmaSolved('Énigme Libération 3-2') || isEnigmaSolved('Énigme Libération 3-1')) {
-                    if($date < 1628613000) {
-                        $data["info"] = "<h2>Énigme Libération 3-3</h2>
-                        <a href=\"\">Je t'embarque au poste.</a>";
-
-
-                    } else {
-                        $data["info"] = "<h2>Énigme Libération 3-3</h2>
-                        <p>Les arènes de tous les INSA Games étaient jusqu’à présent truffées de pièges mortels. Cette ville est votre nouvelle arène, et évidemment elle n’y fait pas exception.
-                         Mais cette année, les hauts juges ont créé ce <a href=\"assets/enigmes/Liberation/pieges.pdf\">document</a> afin de vous aider à les localiser.</p>
-                   ";
-
-                    }
-
-                    echo json_encode($data, JSON_FORCE_OBJECT);
-                }
-                break;
-            
-            case 'Saint des seins' :
-                $score_data["text"] = 'Malus Énigme Libération 1';
-                $score_data["points"] = -25;
-                if(!isAlreadySolved($team, $score_data["text"])) {
-                    $dao = new Dao();
-                    $dao->add_score($score_data);
-                }
-
-                break;
-
-            case 'La Couleur de la Culotte' :
-                $score_data["text"] = 'Malus Énigme Libération 2';
-                $score_data["points"] = -25;
-                if(!isAlreadySolved($team, $score_data["text"])) {
-                    $dao = new Dao();
-                    $dao->add_score($score_data);
-                }
-                break;
-
-            case '0712' :
-                $score_data["text"] = 'Malus Énigme Libération 3';
-                $score_data["points"] = -25;    // Malus points
-
-                // Give the points only if the team hasn't had the Malus yet
-                if(!isAlreadySolved($team, $score_data["text"])) {
-                    $dao = new Dao();
-                    $dao->add_score($score_data);
-                }
-
-                break;
-
-            case '1108' :
-                $score_data["text"] = 'Malus Énigme Libération 4';
-                $score_data["points"] = -25;
-                if(!isAlreadySolved($team, $score_data["text"])) {
-                    $dao = new Dao();
-                    $dao->add_score($score_data);
-                }
-                break;
-
-            case 'rose' :
-                $data["name"] = "enigme-liberation-4";
-                $score_data["text"] = 'Énigme Libération 4';
-                $score_data["points"] = 100;
-                if(isEnigmaSolved('Énigme Libération 3-1') && isEnigmaSolved('Énigme Libération 3-2')) {
-                    if($date < 1628613000) {
-                        $data["info"] = "<h2>Énigme Libération 4</h2>
-                        <p><a href=\"assets/enigmes/Liberation/FinE.png\">On vous demande un mot de passe pour rentrer</a></p>";
-                    } else {
-                        $data["info"] = "<h2>Énigme Libération 4</h2>
-                        <p><a href=\"assets/enigmes/Liberation/FinE.png\">On vous demande un mot de passe pour rentrer</a></p>";
-                    }
-
-                    if(isFirstTeamToSolve($score_data)) {
-                        $dao = new Dao();
-                        $dao->add_score($score_data);
-                    }
-                    echo json_encode($data, JSON_FORCE_OBJECT);
-                }
-                break;
-            
-            case 'PRESQUE' :
-                $data["name"] = "enigme-liberation-5";
-                $score_data["text"] = 'Énigme Libération 5';
-                $score_data["points"] = 50;
-                if(isEnigmaSolved('Énigme Libération 4')) {
-                    if($date < 1628613000) {
-                        $data["info"] = "<h2>Énigme Libération 5</h2>
-                        <p>Bien joué ! Attendez demain pour la suite !</p>";
-                    } else {
-                        $data["info"] = "<h2>Énigme Libération 5</h2>
-                        <p>Revenez aux sources..</p>";
-                    }
-
-                    if(isFirstTeamToSolve($score_data)) {
-                        $dao = new Dao();
-                        $dao->add_score($score_data);
-                    }
-                    echo json_encode($data, JSON_FORCE_OBJECT);
-                }
-                break;
-            case 'Le Trou' :
-                $data["name"] = "enigme-liberation-6";
-                $score_data["text"] = 'Énigme Libération 6';
-                $score_data["points"] = 200;
-                if(isEnigmaSolved('Énigme Libération 5')) {
-                    if($date < 1628613000) {
-                        $data["info"] = "<h2>Énigme Libération 6</h2>
-                        <p>Bien joué ! Attendez demain pour la suite !</p>";
-                    } else {
-                        $data["info"] = "<h2>Énigme Libération 6</h2>
-                        <p>Suite à la libération de Paul et Cécile vous décidez de fêter ça...
-                        </p>";
-                    }
-
-                    if(isFirstTeamToSolve($score_data)) {
-                        $dao = new Dao();
-                        $dao->add_score($score_data);
-                    }
-                    echo json_encode($data, JSON_FORCE_OBJECT);
-                }
-                break;
-        
-            case 'Allies comme Katniss et Peeta' :
-                $data["name"] = "enigme-liberation-7";
-                $score_data["text"] = 'Énigme Libération 7';
-                $score_data["points"] = 100;
-                if(isEnigmaSolved('Énigme Libération 6')) {
-                    if($date < 1628613000) {
-                        $data["info"] = "<h2>Énigme Libération 7</h2>
-                        <p>Bien joué ! Attendez demain pour la suite !</p>";
-                    } else {
-                        $data["info"] = "<h2>Énigme Libération 7</h2>
-                        <p>Les dirigeants du Capitole ont décidé d’unir les équipes, les Boomiflores et les Peksureaux !
-                            Ils préparent la prochaine énigme!
-                        </p>";
-                    }
-
-                    if(isFirstTeamToSolve($score_data)) {
-                        $dao = new Dao();
-                        $dao->add_score($score_data);
-                    }
-                    echo json_encode($data, JSON_FORCE_OBJECT);
-                }
-                break;
-            default:
-                $data["name"] = null;
-                $points_data["points"] = 0;
-
-                echo json_encode($data, JSON_FORCE_OBJECT);
-                break;
-        }
-
-    }
-}
-
-
-/**
- * Same as get_code, but for the plaquette enigma
- */
-function get_plaquette_code() {
-    if (isset($_GET['code'])) {
-        $data = array(
-            "name" => $_GET['code'],
-            "info" => null,
-        );
-        switch ($_GET['code']) {
-            case 'onlyfan_420' :
-                $data["name"] = "onlyfan";
-                $data["info"] = "Go follow sur insta <a href=\"https://www.instagram.com/onlyfan_420/\">@onlyfan_420</a>";
-                echo json_encode($data, JSON_FORCE_OBJECT);
-                break;
-
-            case 'caché par ici' :
-                $data["name"] = "plaquette1";
-                $data["info"] = "<a  href=\"assets/pdf/Enigme_plaquette_1.pdf\">Énigme plaquette</a>";
-                echo json_encode($data, JSON_FORCE_OBJECT);
-                break;
-            case 'SURVIVANT' :
-                $data["name"] = "plaquette2";
-                $data["info"] = "<iframe width=\"560\" height=\"315\" 
-                        src=\"https://www.youtube.com/embed/F3hTW9e20d8?autoplay=1\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>
-                    <p style=\"white-space:pre;\">@               <span style=\"color:#1c1c1c;\">promo59</span></p>
-                    ";
-                echo json_encode($data, JSON_FORCE_OBJECT);
-                break;
-            default:
-                $data["name"] = null;
-                echo json_encode($data, JSON_FORCE_OBJECT);
-
-                break;
-        }
-
-    }
-}
-
-
-function show_error() {
-    echo "Échec : ";
-    var_dump($_GET);
-}

ajax/write/.htaccess

@@ -1,16 +0,0 @@
-AuthName "MDP ?"
-AuthType Basic
-AuthUserFile /home_clubs/accueil_insa/public_html/includes/pass/.htpass_scores
-require valid-user
-<Files "planning.php">
-	AuthName "MDP ?"
-	AuthType Basic
-	AuthUserFile /home_clubs/accueil_insa/public_html/includes/pass/.htpass_planning
-	require valid-user
-</Files>
-<Files "master.php">
-	AuthName "MDP ?"
-	AuthType Basic
-	AuthUserFile /home_clubs/accueil_insa/public_html/includes/pass/.htpass_master
-	require valid-user
-</Files>

anim.php

@@ -0,0 +1,51 @@
+ <?php
+ob_start(); // Start reading html
+?>
+<main>
+
+    <div class="box-jaune">
+        <span class="corners corners-top"></span>
+        <span class="corners corners-bottom"></span>
+
+        <div class="title">Message de la Com'anim</div>
+
+        <span class="circles circles-top"></span>
+        <span class="circles circles-bottom"></span>
+    </div>
+
+    <section>
+        <p>Coucou Petit.e Pêche Agréable,</p>
+
+        <p>Nous c’est la Com’Anim, on est là pour t’accueillir dans la joie et la bonne humeur avec de RATvissantes activités faites mains. Voici un petit mot pour découvrir notre Com en détails :</p>
+
+        <p><font color="red">C</font>ombative peu importe le budget (très) serré.</p>
+
+        <p><font color="red">O</font>pérationnelle, le stock de peau de banane complet.</p>
+
+        <p><font color="red">M</font>eilleure Com, mais ça tu le découvriRAT par toi-même.</p>
+
+        <p><font color="red">‘</font></p>
+
+        <p><font color="red">A</font>ssurée, tout est prêt, on t’attend.</p>
+
+        <p><font color="red">N</font>aturelle et toujours humble.</p>
+
+        <p><font color="red">I</font>maginative, deux plots et un ballon nous suffise.</p>
+
+        <p><font color="red">M</font>ultitâches : soirée déguisée, concert, rencontre on est là !</p>
+
+        <p><strong style="text-decoration: underline;">Attention très important :</strong> Le mardi au soir, il y aura une soirée déguisée. Nous comptons sur toi pour RATmener ton meilleur déguisement sur le thème de ton choix. Il y aura des prix pour les plus créatifs…</p>
+
+        <p>Gros bisous,</p>
+
+        <p>On a hâte de vous <s>épuiser</s> rencontrer 😊</p>
+
+        <p>Julimace et aladin</p>
+        <br><br>
+        <p><strong><font color="red">PS :</font></strong> n'hésitez pas si vous avez des questions, on répond <strong>RAT</strong>pidement : <a href="https://www.instagram.com/julie_brgs_/" class="link">@julie_brgs_</a> & <a href="https://www.instagram.com/andrea.ldn/" class="link">@andrea.ldn</a></p>
+    </section>
+</main>
+<?php
+$infopage = ["", "Com'anim", ob_get_clean(), "", "anim"]; //relativepath, pagetitle, pagecontent, pagescript, pagename | cf structure/template.php ligne 2 à 6
+include("structure/template.php");
+?>

assets/css/adminEdit.css

@@ -1,222 +0,0 @@
-.admin-container {
-    border: 1px solid #5a5a5a;
-    margin-bottom: 20px;
-}
-
-
-.edit-header .stat-log {
-    width: 70%;
-}
-
-.stat-points {
-    width: 20%;
-}
-
-.edit-header .stat-points {
-    width: 20%;
-}
-
-.edit-button-container {
-    border: none;
-    margin: 10px;
-}
-
-.edit-header {
-    display: flex;
-    text-align: center;
-    background-color: #61605e;
-    color: #fefefe;
-    font-weight: bold;
-}
-
-.edit-header .stat-trash {
-    margin: auto;
-}
-
-.edit-text {
-    width: 70%;
-}
-
-.edit-points{
-    width: 20%;
-}
-
-
-.buttons-container {
-    display: inline-flex;
-}
-
-.admin-back-button {
-    width: auto;
-    background: #fafafa;
-    color: #000;
-    border-radius: 5px;
-    padding: 15px;
-    margin: 5px;
-    box-shadow: 0 0 5px #000000;
-}
-
-.admin-back-button:hover {
-    color: #fafafa;
-    background: #1a1a1a;
-}
-
-.website-back-button {
-    width: auto;
-    background: #fafafa;
-    color: #000;
-    border-radius: 5px;
-    padding: 15px;
-    margin: 5px;
-    box-shadow: 0 0 5px #000000;
-}
-
-.website-back-button:hover {
-    color: #fafafa;
-    background: #1a1a1a;
-}
-
-
-.edit-stats {
-    width: 100%;
-}
-
-input, textarea {
-    text-align: center;
-    background: #484848;
-    color: #fafafa;
-    width: 100%;
-    border: none;
-    font-family: inherit;
-    font-size: inherit;
-}
-
-.remove-line {
-    color: #ff1200;
-    cursor: pointer;
-    transition: 0.3s;
-}
-
-.remove-line svg {
-    pointer-events: none;
-}
-
-.remove-line:hover {
-    color: #ff5e00;
-    text-shadow: 0 0 5px #ff4000;
-}
-
-.add-line{
-    font-size: 30px;
-    background: #ab1d00;
-    color: #fafafa;
-    cursor: pointer;
-    transition: 0.3s;
-    width: 100%;
-    border-radius: 5px;
-    margin: 30px 0 20px 0;
-}
-
-#addLine_gli {
-    background: #ff5f5f;
-}
-
-#addLine_pek {
-    background: #7ffd78;
-}
-
-#addLine_boo {
-    background: #fafd78;
-}
-
-#addLine_ver {
-    background: #60bdff;
-}
-
-
-#editHeader_gli {
-    background: #9c1a00;
-}
-
-#editHeader_pek {
-    background: #138a14;
-}
-
-#editHeader_boo {
-    background: #6b5300;
-}
-
-#editHeader_ver {
-    background: #264565;
-}
-
-
-.save {
-    background: #21aa08;
-    font-size: 30px;
-    color: #fafafa;
-    cursor: pointer;
-    transition: 0.3s;
-    margin: 40px 0 0 0;
-    width: 100%;
-    border-radius: 5px;
-}
-
-.save:hover {
-    background: #2ce20b;
-    box-shadow: 0 0 5px #2ce20b;
-}
-
-#activityTable {
-    width: 100%;
-}
-
-#activityTable tr {
-    transition: 0.2s;
-}
-
-#activityTable tr:hover {
-    cursor: pointer;
-    background-color: #62010e;
-}
-
-
-.planning-start {
-    width: 10%;
-}
-.planning-length {
-    width: 10%;
-}
-.planning-name {
-    width: 70%;
-}
-.planning-trash {
-    width: 10%;
-}
-
-#noUpdateNeeded {
-    font-size: 2rem;
-    color: #2ce20b;
-}
-
-#UpdateNeeded {
-    font-size: 2rem;
-    color: #c53422;
-}
-
-#gitButton {
-    font-size: 1.5rem;
-    display: flex;
-    margin: 20px;
-}
-
-
-#gitButton a {
-    padding: 10px;
-    background-color: white;
-    color: #052700;
-    margin: auto;
-    width: 200px;
-    cursor: pointer;
-    border-radius: 0.5rem;
-}

assets/css/baguette.css

@@ -1,97 +0,0 @@
-#baguette {
-    display: inline-block;
-    position: relative;
-    cursor: pointer;
-    font-size: 32px;
-    margin: 5px;
-    height: 40px;
-    width: 40px;
-    pointer-events: auto;
-}
-
-
-#shaft, #star1, #star2, #star3, #star4 {
-    position: absolute;
-    width: 100%;
-    height: 5px;
-    background-color: #fff;
-    margin: 5px 0;
-    transition: 0.3s;
-}
-
-#shaft {
-    margin: 0;
-    top: 50%;
-    transform: translateY(-50%);
-}
-
-#star1, #star2 {
-    width: 20px;
-    top: 0;
-}
-
-#star3, #star4 {
-    width: 20px;
-    bottom: 0;
-}
-
-#star1, #star3 {
-    left: 0;
-}
-
-#star2, #star4 {
-    right: 0;
-}
-
-
-/* Mouse hovers the baguette */
-
-.change-hover #shaft {
-    background-color: #e9b82f;
-    transform: translateY(1px) rotate(-45deg);
-    height:5px;
-
-}
-
-.change-hover #star1, .change-hover #star2, .change-hover #star3, .change-hover #star4 {
-    width: 5px;
-    border-radius: 100%;
-}
-
-.change-hover #star1 {
-    background-color: #ff5f5f;
-    transform: translate(19px,-2px);
-
-}
-
-.change-hover #star2 {
-    background-color: #7ffd78;
-    transform: translate(-3px, -6px);
-}
-
-.change-hover #star3 {
-    background-color: #fafd78;
-    transform: translate(36px, -10px);
-}
-
-.change-hover #star4 {
-    background-color: #60bdff;
-    transform: translate(5px, -22px);
-}
-
-/* Mouse clics the baguette */
-
-.change-clic #shaft {
-    transform: translateY(-50%) rotate(-135deg);
-    background-color: #b0120b;
-}
-
-.change-clic #star1, .change-clic #star2, .change-clic #star3, .change-clic #star4 {
-    left: 0;
-    width: 100%;
-    border-radius: 0;
-    margin: 0;
-    top: 50%;
-    transform: translateY(-50%) rotate(-45deg);
-    background-color: #b0120b;
-}

assets/css/enigma.css

@@ -1,54 +0,0 @@
-
-body {
-    color: #b5b5b5;
-}
-
-.inner {
-    background-color: rgba(28, 28, 28, 0.2);
-    box-shadow: 0 0 50px #1c1c1c;
-
-}
-
-
-
-.team-button {
-    border-radius: 0.2rem;
-    font-size: 2.5rem;
-    font-family: Harry-P, fantasy;
-    cursor: pointer;
-    padding: 15px 20px;
-    margin: 10px;
-    transition: 0.2s;
-    border: none;
-}
-
-#title_boo {
-    color: #7cd43f;
-}
-
-#title_pek {
-    color: #9a89fd;
-}
-
-.team-button#buttonBoo {
-    color: #7cd43f;
-    background-color: #35621e;
-}
-
-.team-button#buttonPek {
-    color: #9a89fd;
-    background-color: #402559;
-}
-
-.team-button#buttonBoo:hover {
-    color: #35821e;
-    background-color: #7cf43f;
-    box-shadow: 0 0 10px #7c843f;
-}
-
-.team-button#buttonPek:hover {
-    color: #402559;
-    background-color: #aaa9fd;
-    box-shadow: 0 0 10px #9a89dd;
-}
-

assets/css/menu.css

@@ -0,0 +1,125 @@
+.menu {
+	position: fixed;
+	bottom: -2px;
+	left: 0;
+	width: 100%;
+	height: auto;
+	z-index: 2;
+
+	overflow: visible;
+	transition: transform 0.3s;
+}
+
+.tuyau {
+	position: fixed;
+	bottom: -2px;
+	right: 3vw;
+	width: 8%;
+	min-width: 6.3vmax;
+	height: auto;
+	z-index: 2;
+	cursor: pointer;
+
+	transition: transform 0.3s;
+	overflow: visible;
+}
+
+.menu-link use {
+	transition: transform 50ms;
+	transform-origin: center;
+}
+
+.menu-link.menu-bottom-line use {
+	transform-origin: bottom;
+}
+
+.menu-link text {
+	transition: transform 50ms;
+}
+
+.menu .menu-link:hover text {
+	fill: #FFDC00;
+	transform: translateY(-1px);
+}
+
+.menu-link:hover use {
+	transform: scaleY(1.1);
+
+}
+
+.menu svg {
+	overflow: visible;
+}
+
+
+.mobile-menu {
+	display: block;
+	position: fixed;
+	top: 0; left: 0;
+	overflow: hidden;
+	width: 100%;
+	z-index: 20;
+
+	height: 0;
+	background: rgba(15, 15, 23, 0);
+
+	transition: background-color 0.2s linear;
+}
+
+.mobile-menu .containerF3g {
+	width: 100%; height: 100%;
+	overflow: auto;
+}
+
+.mobile-grid {
+	display: flex;
+	flex-wrap: wrap;
+	padding: 2vh 60px;
+	min-height: 100vh;
+	justify-content: center;
+	align-content: center;
+}
+
+.mobile-menu-link {
+	min-width: 100px;
+	width: 50%;
+	display: block;
+	opacity: 0;
+    cursor: pointer;
+	transform: translateY(10%);
+	transition: transform 0.2s ease-out, opacity 0.2s linear 0.05s;
+}
+
+nav.mobile-menu.open .mobile-menu-link {
+	transform: translateY(0);
+	opacity: 1;
+}
+
+.menu-link:hover text {
+	fill: #FFDC00;
+}
+
+.mobile-brick {
+	display: block;
+}
+
+
+span.close-mobile-menu {
+	color: #FFF;
+	font-size: 80px;
+	display: block;
+	position: absolute;
+    -webkit-user-select: none; /* Safari */
+    -moz-user-select: none; /* Firefox */
+    -ms-user-select: none; /* IE10+/Edge */
+    user-select: none; /* Standard */
+    cursor: pointer;
+	bottom: 0;
+	right: 20px;
+    transition: color 0.5s;
+}
+
+span.close-mobile-menu:hover {
+	color: #FFDC00;
+
+}

assets/css/page/anim.css

@@ -0,0 +1,12 @@
+section {
+	display: block;
+	background-color: rgba(255,255,255,0.5);
+	width: 80%;
+	max-width: 800px;
+	margin-left: auto;
+	margin-right: auto;
+	padding: 50px;
+	font-size: 1.2rem;
+	margin-top: 40px;
+	text-align: left;
+}

assets/css/page/blouse.css

@@ -0,0 +1,39 @@
+section {
+	background-color: rgba(255,255,255,0.5);
+	max-width: 800px;
+	margin-left: auto;
+	margin-right: auto;
+	padding-bottom: 50px;
+	font-size: 1.2rem;
+	margin-top: 40px;
+	text-align: left;
+}
+
+
+#texte {
+	margin: 50px;
+}
+
+section ul li {
+	list-style: inside;
+}
+
+.ex_blouse {
+	display: block;
+	margin-right: auto;
+	margin-left: auto;
+	max-width: 60vw;
+}
+
+.img_blouse {
+	display: inline-block;
+	width: 20vw;
+	margin: 10px;
+}
+
+#photos_blouse {
+	display: block;
+	margin: 0 auto;
+	width: 100%;
+	text-align: center;
+}

assets/css/page/chansons.css

@@ -0,0 +1,41 @@
+iframe {
+	width: 50vw;
+	aspect-ratio: 560/315;
+}
+
+#music {
+	display: block;
+	width: 80vw;
+	padding: 0;
+	margin: auto;
+	margin-top: 20px;
+	align-items: center;
+	border: 5px solid white;
+	background: rgba(0,0,0,0.5);
+}
+
+#music ul {
+  list-style-type: none;
+}
+
+#music li {
+	margin-bottom: 30px;
+}
+
+#music .title_music {
+	width: 100%;
+	background-color: white;
+	color: black;
+	margin: 0px;
+	padding: 10px 0px 10px 0px;
+}
+
+#desc {
+	display: block;
+	background-color: rgba(255,255,255,0.5);
+	width: 80vw;
+	margin: auto;
+	padding: 50px;
+	font-size: 1.2rem;
+	margin-top: 40px;
+}

assets/css/page/clubs.css

@@ -0,0 +1,44 @@
+body {
+	text-align: center;
+}
+
+#alert {
+	position: absolute;
+	display: block;
+	top: 0;
+	width: 100vw;
+	height: 60px;
+	background-color: white;
+	z-index: 1;
+	padding: 15px;
+}
+
+a.link2 {
+	text-decoration: none;
+	color: #FFDC00;
+	-webkit-text-stroke: 1px black;
+}
+
+a.link2:hover {
+	color: black;
+	-webkit-text-stroke: 1px black;
+}
+
+.iframe_amicale {
+	position: absolute;
+	overflow: hidden;
+	width: 100vw;
+	height: 100%;
+	margin: 0;
+	top: 60px;
+	left: 0;
+}
+
+a.link_in_yellow_box {
+	text-decoration: none;
+	color: black;
+}
+
+a.link_in_yellow_box:hover {
+	color: white;
+}

assets/css/page/com_page.css

@@ -0,0 +1,20 @@
+a {
+    text-decoration: none;
+}
+
+a span {
+	display: block;
+    background-color: rgba(255,255,255,0.5);
+    color: black;
+    padding: 20px;
+    margin: 30px;
+    font-size: 1.5rem;
+    margin-left: auto;
+    margin-right: auto;
+    width: 50vw;
+}
+
+a span:hover {
+    transform: scale(1.1);
+    transition: 0.3s ease;
+}

assets/css/page/com_ville.css

@@ -0,0 +1,92 @@
+section {
+	display: block;
+	background-color: rgba(255,255,255,0.5);
+	width: 80%;
+	max-width: 800px;
+	margin-left: auto;
+	margin-right: auto;
+	padding: 50px;
+	font-size: 1.2rem;
+	margin-top: 40px;
+}
+
+a.team {
+    display: block;
+    color: black;
+    padding: 10px;
+    margin: auto;
+    margin-top: 10px;
+    background-color: white;
+    width: 50%;
+    text-decoration: none;
+    border: 2px solid white;
+}
+
+a.team:hover {
+	text-decoration: underline;
+	text-decoration-color: red;
+    transition: 0.3s ease-out;
+    border: 2px solid red;
+}
+
+.img_enigme {
+	width: 40%;
+}
+
+.input {
+	width: 50%;
+	background-color: white;
+	border: 3px solid grey;
+	border-radius: 4px;
+	text-align: center;
+	height: 50px;
+	margin: 10px;
+	font-weight: bold;
+}
+
+.submit {
+	width: 50%;
+	background-color: grey;
+	border: 3px solid grey;
+	color: white;
+	border-radius: 4px;
+	text-align: center;
+	height: 50px;
+	margin: 10px;
+	font-weight: bold;
+}
+
+.submit:hover {
+	transition: 0.3s ease;
+	transform: scale(1.05);
+}
+
+@media (max-width: 700px) {
+	.submit {
+		width: 80%;
+	}
+
+	.input {
+		width: 80%;
+	}
+}
+
+table {
+	border: 0;
+	border-collapse: collapse;
+	font-size: 0.75em;
+}
+
+td,th {
+	border: 3px solid black;
+	padding: 10px;
+}
+
+th {
+	color: white;
+	background-color: black;
+}
+
+td.title {
+	color: red;
+}

assets/css/page/coms.css

@@ -0,0 +1,64 @@
+body {
+	color: white;
+	background-color: white;
+}
+
+.box-jaune h1 {
+	margin: 0 0 0.5em;
+	padding: 0;
+}
+
+section h1 {
+	margin: 0;
+	padding: 10px;
+}
+
+section h4 {
+	margin: 0;
+	padding: 10px;
+}
+
+#main_content {
+	display: block;
+	background-color: rgba(255,255,255,0); //pour mettre un magnifique fond
+	width: 40%;
+	margin-left: auto;
+	margin-right: auto;
+	font-size: 1.2rem;
+}
+
+section {
+	display: block;
+	width: 80%;
+	padding: 0;
+	margin: 20px auto auto;
+	align-items: center;
+	border: 5px solid white;
+	background: rgba(0,0,0,0.5);
+}
+
+section ul {
+  list-style-type: none;
+}
+
+section li {
+	margin-bottom: 30px;
+}
+
+section .title_com {
+	width: 100%;
+	background-color: white;
+	color: black;
+	margin: 0px;
+	padding: 10px 0px 10px 0px;
+
+}
+
+.fonction_bureau {
+	display: inline-block;
+	background-color: white;
+	color: black;
+	padding: 10px;
+	margin-top: 0;
+	font-size: 1.5rem;
+}

assets/css/page/downloads.css

@@ -0,0 +1,11 @@
+section {
+	display: block;
+	background-color: rgba(255,255,255,0.5);
+	width: 80%;
+	max-width: 800px;
+	margin-left: auto;
+	margin-right: auto;
+	padding: 50px;
+	font-size: 1.2rem;
+	margin-top: 40px;
+}

assets/css/page/enigma.css

@@ -0,0 +1,53 @@
+* {
+	text-align: center;
+}
+
+section {
+	display: block;
+	background-color: rgba(255,255,255,0.5);
+	width: 80%;
+	max-width: 800px;
+	margin-left: auto;
+	margin-right: auto;
+	padding: 50px;
+	font-size: 1.2rem;
+	margin-top: 40px;
+}
+
+.input {
+	width: 50%;
+	background-color: white;
+	border: 3px solid grey;
+	border-radius: 4px;
+	text-align: center;
+	height: 50px;
+	margin: 10px;
+	font-weight: bold;
+}
+
+.submit {
+	width: 50%;
+	background-color: grey;
+	border: 3px solid grey;
+	color: white;
+	border-radius: 4px;
+	text-align: center;
+	height: 50px;
+	margin: 10px;
+	font-weight: bold;
+}
+
+.submit:hover {
+	transition: 0.3s ease;
+	transform: scale(1.05);
+}
+
+@media (max-width: 700px) {
+	.submit {
+		width: 80%;
+	}
+
+	.input {
+		width: 80%;
+	}
+}

assets/css/page/game.css

@@ -0,0 +1,32 @@
+body {
+	text-align: center;
+}
+
+a.link2 {
+	text-decoration: none;
+	color: #FFDC00;
+	-webkit-text-stroke: 1px black;
+}
+
+a.link2:hover {
+	color: black;
+	-webkit-text-stroke: 1px black;
+}
+
+.iframe_game {
+	display: block;
+	margin: 0 auto;
+	display: block;
+	border: 0px #000000 none;
+	position: relative;
+
+}
+
+a.link_in_yellow_box {
+	text-decoration: none;
+	color: black;
+}
+
+a.link_in_yellow_box:hover {
+	color: white;
+}

assets/css/page/index.css

@@ -0,0 +1,11 @@
+#msg_acc {
+	display: block;
+	background-color: rgba(255,255,255,0.5);
+	width: 80%;
+	max-width: 800px;
+	margin-left: auto;
+	margin-right: auto;
+	padding: 50px;
+	font-size: 1.2rem;
+	margin-top: 40px;
+}

assets/css/page/info.css

@@ -0,0 +1,42 @@
+main {
+	color: white;
+	font-size: 1.4rem;
+}
+
+section {
+	display: block;
+	width: 80%;
+	padding: 0;
+	margin: 20px auto auto;
+	align-items: center;
+	border: 5px solid white;
+	background: rgba(0,0,0,0.5);
+}
+
+section p {
+	padding: 0 12px;
+}
+
+section h1 {
+	width: 100%;
+	background-color: white;
+	color: black;
+	margin: 0;
+	padding: 10px 0 10px 0;
+
+
+}
+
+section .title_contact {
+	display: inline-block;
+	background-color: white;
+	color: black;
+	padding: 10px;
+	margin-top: 0;
+	font-size: 1.5rem;
+}
+
+.starterpack {
+	width: 100%;
+	height: 100%;
+}

assets/css/page/lydia.css

@@ -0,0 +1,40 @@
+#desc {
+	display: block;
+	background-color: rgba(255,255,255,0.5);
+	width: 80vw;
+	margin: auto;
+	padding: 50px;
+	font-size: 1.2rem;
+	margin-top: 40px;
+}
+
+iframe {
+	width: 50vw;
+	aspect-ratio: 560/315;
+}
+
+#video {
+	display: block;
+	width: 80vw;
+	padding: 0;
+	margin: auto;
+	margin-top: 20px;
+	text-align: center;
+	border: 5px solid white;
+}
+
+#video ul {
+  list-style-type: none;
+}
+
+#video li {
+	margin-bottom: 30px;
+}
+
+#video .title_video {
+	width: 100%;
+	background-color: white;
+	color: black;
+	margin: 0px;
+	padding: 10px 0px 10px 0px;
+}

assets/css/page/map.css

@@ -0,0 +1,86 @@
+* {
+    text-align: center;
+}
+
+section {
+    background-color: rgba(255,255,255,0.5);
+    max-width: 800px;
+    margin-left: auto;
+    margin-right: auto;
+    font-size: 1.2rem;
+    margin-top: 40px;
+    text-align: left;
+    display: block;
+    width: 80vw;
+    padding: 50px;
+}
+
+#maps {
+    position: relative;
+    display: block;
+    margin: 5vh auto auto;
+    width: 90vw;
+    min-height: 50vh;
+    border: none;
+}
+
+@media (max-width: 700px) {
+    #maps {
+        width: 100%;
+    }
+}
+
+/*iframe {
+    margin-top: 50px;
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+    width: 90vw;
+    aspect-ratio: 1220/710;
+    border: 0;
+}*/
+
+
+.change-map-button {
+    cursor: pointer;
+    border: solid 2px #c49621;
+    padding: 0.5em;
+}
+
+.animated {
+    background-image: linear-gradient(-225deg, #231557 0%, #44107a 29%, #ff1361 67%, #fff800 100%);
+    background-size: auto auto;
+    background-clip: border-box;
+    background-size: 200% auto;
+    color: #fff;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    animation: textclip 2s linear infinite;
+    display: inline-block;
+}
+
+@keyframes textclip {
+    to {
+        background-position: 200% center;
+    }
+}
+
+.change-map-button:after {
+    content: "2D";
+}
+
+body.flat .change-map-button:after {
+    content: "3D";
+}
+
+body.flat #map3d {
+    display: none;
+}
+
+#map2d {
+    display: none;
+}
+
+body.flat #map2d {
+    display: block;
+}

assets/css/page/parrainage.css

@@ -0,0 +1,15 @@
+section {
+	display: block;
+	background-color: rgba(255,255,255,0.5);
+	width: 80%;
+	max-width: 800px;
+	margin-left: auto;
+	margin-right: auto;
+	padding: 50px;
+	font-size: 1.2rem;
+	margin-top: 40px;
+}
+
+section ul li {
+	list-style: inside;
+}

assets/css/page/photos.css

@@ -0,0 +1,62 @@
+body {
+        text-align: center;
+}
+
+section {
+        display: block;
+        background-color: rgba(255,255,255,0.5);
+        width: 80vw;
+        margin-left: auto;
+        margin-right: auto;
+        padding: 50px;
+        font-size: 1.2rem;
+        margin-top: 40px;
+}
+
+a {
+        text-decoration: none;
+}
+
+ul {
+        margin: 0;
+        padding: 0;
+}
+
+li {
+        display: inline-block;
+}
+
+.photo {
+        display: inline-block;
+        height: 100px;
+}
+
+.directory-ul {
+        list-style: none;
+}
+
+.directory-li {
+        display: block;
+        color: black;
+        padding: 10px;
+        margin: 10px;
+        background-color: white;
+
+}
+
+.directory-li:hover {
+        transform: scale(1.05);
+        transition: 0.3s ease-out;
+}
+
+#folderTitle {
+        color: red;
+        font-weight: bold;
+}
+
+#folderPhotos {
+}
+
+#folderAlbums {
+
+}

assets/css/page/planning.css

@@ -0,0 +1,218 @@
+main {
+	text-align: center;
+	border: 0;
+	margin: 0;
+	width: 100%;
+}
+
+section {
+	display: block;
+	background-color: rgba(255,255,255,0.5);
+	width: 80%;
+	max-width: 800px;
+	margin-left: auto;
+	margin-right: auto;
+	padding: 50px;
+	font-size: 1.2rem;
+	margin-top: 40px;
+}
+
+.planning-container {
+	height: 82vh;
+	width: 100%;
+	background-color: rgba(255,255,255,0.5);
+	color: white;
+	margin-top: 40px;
+}
+
+.column {
+	width: 13%;
+	height: 82vh;
+	float: left;
+	background-image: linear-gradient(rgba(0,0,0,.08) 50%, transparent 50%);
+	background-size: 1px 10%;
+}
+
+.column.time {
+	width: 9%;
+}
+
+.column.days {
+	width: 16%;
+	background-color: #34495e;
+	background-image: none;
+	display: none;
+}
+
+.day_title {
+	height: 5%;
+	background-color: #34495e;
+	font-size: 0.8em;
+	font-weight: 600;
+	text-transform: uppercase;
+	text-align: center;
+	line-height: 4.1vh;
+}
+
+.hour {
+	height: 5%;
+	background-color: rgba(52, 73, 94,0.9);
+	font-size: 1em;
+	text-align: center;
+	line-height: 4.1vh;
+	border-bottom: 1px solid #ffffff11;
+}
+
+.day {
+	border-radius: 2.5vh;
+	background: #6b83db;
+	height: 5vh;
+	line-height: 5vh;
+	margin: 5px 5px 12px;
+	cursor: pointer;
+}
+
+.hour:after {
+	content: ":00";
+}
+
+.class {
+	display: flex;
+	align-content: center;
+	width: 100%;
+	height: 4.1vh;
+	background-color: transparent;
+	font-weight: 300;
+	align-items: center;
+	justify-content: center;
+}
+
+.lundi .day_title:after,
+.day0:after {
+	content: "undi";
+}
+
+.mardi .day_title:after,
+.day1:after  {
+	content: "rdi";
+}
+
+.mercredi .day_title:after,
+.day2:after  {
+	content: "rcredi";
+}
+
+.jeudi .day_title:after,
+.day3:after  {
+	content: "eudi";
+}
+
+.vendredi .day_title:after,
+.day4:after  {
+	content: "endredi";
+}
+
+.samedi .day_title:after,
+.day5:after  {
+	content: "amedi";
+}
+
+.dimanche .day_title:after,
+.day6:after  {
+	content: "imanche";
+}
+
+@media (min-width: 701px) and (max-width: 950px) {
+	.hour:after {
+		content: "h";
+	}
+
+	.column div.day_title:after {
+		content: none;
+	}
+}
+
+@media (max-width: 700px) {
+
+	.planning-container {
+		font-size: 2vh;
+	}
+	.column {
+		width: 50%;
+	}
+
+	.column.days {
+		display: block;
+		width: 30%;
+	}
+
+	.column.time {
+		width: 20%;
+	}
+
+	.lundi,
+	.mardi,
+	.mercredi,
+	.jeudi,
+	.vendredi,
+	.samedi,
+	.dimanche {
+		display: none;
+	}
+
+	.planning-container[selected$="0"] .lundi {
+		display: block;
+	}
+
+	.planning-container[selected$="1"] .mardi {
+		display: block;
+	}
+
+	.planning-container[selected$="2"] .mercredi {
+		display: block;
+	}
+
+	.planning-container[selected$="3"] .jeudi {
+		display: block;
+	}
+
+	.planning-container[selected$="4"] .vendredi {
+		display: block;
+	}
+
+	.planning-container[selected$="5"] .samedi {
+		display: block;
+	}
+
+	.planning-container[selected$="6"] .dimanche {
+		display: block;
+	}
+}
+
+@media (max-width: 350px) {
+
+	.column div.day:after {
+		content: none;
+	}
+
+	.column div.hour:after {
+		content: "h";
+	}
+}
+
+.submit {
+	width: 50%;
+	background-color: grey;
+	border: 3px solid grey;
+	color: white;
+	border-radius: 4px;
+	text-align: center;
+	height: 50px;
+	margin: 10px;
+	font-weight: bold;
+}
+
+.submit:hover {
+	transition: 0.3s ease;
+	transform: scale(1.05);
+}

assets/css/page/prevs.css

@@ -0,0 +1,45 @@
+* {
+	text-align: center;
+}
+
+iframe {
+	width: 50vw;
+	aspect-ratio: 560/315;
+}
+
+#video {
+	display: block;
+	width: 80vw;
+	padding: 0;
+	margin: auto;
+	margin-top: 20px;
+	text-align: center;
+	border: 5px solid white;
+	background: rgba(0,0,0,0.5);
+}
+
+#video ul {
+  list-style-type: none;
+}
+
+#video li {
+	margin-bottom: 30px;
+}
+
+#video .title_video {
+	width: 100%;
+	background-color: white;
+	color: black;
+	margin: 0px;
+	padding: 10px 0px 10px 0px;
+}
+
+#desc {
+	display: block;
+	background-color: rgba(255,255,255,0.5);
+	width: 80vw;
+	margin: auto;
+	padding: 50px;
+	font-size: 1.2rem;
+	margin-top: 40px;
+}

assets/css/page/stats.css

@@ -0,0 +1,64 @@
+main {
+	text-align: center;
+}
+
+section {
+	display: block;
+	background-color: rgba(255,255,255,0.5);
+	width: 80%;
+	max-width: 800px;
+	margin-left: auto;
+	margin-right: auto;
+	padding: 50px;
+	font-size: 1.2rem;
+	margin-top: 40px;
+}
+
+table.out {
+	margin-top: 50px;
+	margin-right: auto;
+	margin-left: auto;
+	width: 80%;
+	padding: 40px;
+	/*background-color: rgba(255,255,255,0.5);*/
+}
+
+span.box-point {
+	padding: 0;
+	display: block;
+	width: 80%;
+	height: 70px;
+	background-color: rgba(0,0,0,0.5);
+	border-radius: 20px;
+	color: white;
+	border: 3px solid white;
+	margin: 10px auto 0;
+}
+
+table.in {
+	width: 100%;
+	height: 100%;
+}
+
+table.in .left {
+	width: 70%;
+}
+
+table.in .right {
+	width: 30%;
+}
+
+.title_in {
+	display: inline-block;
+    background-color: white;
+    color: black;
+    padding: 20px;
+	margin: 0 3.5vw 3.5vw;
+	font-size: 1.5rem;
+}
+
+@media (max-width: 700px) {
+	table.out {
+		padding: 0;
+	}
+}

assets/css/page/team.css

@@ -0,0 +1,12 @@
+section {
+	display: block;
+	text-align: left;
+	background-color: rgba(255,255,255,0.5);
+	width: 80%;
+	max-width: 800px;
+	margin-left: auto;
+	margin-right: auto;
+	padding: 50px;
+	font-size: 1.2rem;
+	margin-top: 40px;
+}

assets/css/page/vacances.css

@@ -0,0 +1,59 @@
+main {
+	text-align: center;
+	width: 100vw;
+}
+
+section {
+	display: inline-block;
+	background-color: rgba(255,255,255,0.5);
+	aspect-ratio: 425/600;
+	width: 43vw;
+	margin: 60px auto 1vw;
+}
+
+img {
+	width: 100%;
+	background-color: transparent;
+}
+
+form {
+	margin: 20px;
+}
+
+.input {
+	display: inline-block;
+	width: 35%;
+	background-color: white;
+	border: 3px solid grey;
+	border-radius: 4px;
+	text-align: center;
+	height: 30px;
+	margin: 5px;
+}
+
+.submit {
+	width: 50%;
+	background-color: grey;
+	border: 3px solid grey;
+	color: white;
+	border-radius: 4px;
+	text-align: center;
+	height: 30px;
+	margin: 5px;
+	font-weight: bold;
+}
+
+.submit:hover {
+	transition: 0.3s ease;
+	transform: scale(1.05);
+}
+
+
+@media (max-width: 1500px) {
+	section {
+		display: flex;
+		width: 90vw;
+		aspect-ratio: auto;
+		height: auto;
+	}
+}

assets/css/photos.css

@@ -1,297 +0,0 @@
-#photoContainer {
-    margin: 0 5%;
-}
-
-.photos-folder-container {
-    width: 100%;
-    border: 1px solid #5a5a5a;
-    border-radius: 5px;
-}
-
-.photos-folder-container a:hover, .photos-path a:hover, #downloadAlbum:hover {
-    box-shadow: 0 0 10px #000;
-    background-color: #635247;
-}
-
-.photos-folder-container a {
-    text-decoration: none;
-    border-radius: 5px;
-    width: 200px;
-    height: 120px;
-    padding: 10px;
-    margin: 5px;
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    background-color: #1a1a1a;
-    box-shadow: 0 0 4px #000;
-    transition: 0.3s;
-}
-
-#folderTitle {
-    position: absolute;
-    top: 10px;
-    color: #73b795;
-    font-size: 25px;
-    text-shadow: 0 0 5px #1c1c1c;
-}
-
-#folderPhotos, #folderAlbums {
-    color: #808080;
-    font-size: 18px;
-    text-shadow: 0 0 5px #1c1c1c;
-}
-
-#folderPhotos {
-    position: absolute;
-    bottom: 30px;
-}
-
-#folderAlbums {
-    position: absolute;
-    bottom: 0;
-}
-
-.photos img {
-    display: inline-flex;
-    width: 200px;
-    opacity: 1;
-    cursor: pointer;
-    transition: 0.3s;
-    padding: 0;
-    margin: 10px 2px 0 2px;
-    border-radius: 0.5rem;
-}
-
-.photos img:hover {
-    box-shadow: 0 0 5px #000;
-    -webkit-filter: blur(1px); /* Safari 6.0 - 9.0 */
-    filter: blur(1px);
-    opacity: 0.5;
-    border-radius: 1rem;
-}
-
-.photos img:active {
-    box-shadow: 0 0 10px #000;
-}
-
-.photos-path {
-    width: 100%;
-    display: flex;
-    list-style: none;
-    padding: 0;
-    line-height: 15px;
-}
-
-.photos-path a {
-    font-size: 15px;
-    text-decoration: none;
-    border-radius: 2px;
-    padding: 5px;
-    margin: 5px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    background-color: #1a1a1a;
-    box-shadow: 0 0 4px #000;
-    text-shadow: 0 0 5px #1c1c1c;
-    transition: 0.3s;
-    color: #e0e0e0;
-}
-
-#imgBig {
-    margin: 0;
-    padding: 0;
-    position: fixed;
-    z-index: 6;
-    left: 50%;
-    top: 50%;
-    max-width: none;
-    max-height: none;
-    transform: translate(-50%, -50%);
-    box-shadow: 0 0 5px #000;
-}
-
-#photoButtonsContainer {
-    position: fixed;
-    display: block;
-    z-index: 10;
-    /* Block selection of buttons (useful for mobile devices) */
-    -webkit-user-select: none; /* Chrome all / Safari all */
-    -moz-user-select: none; /* Firefox all */
-    -ms-user-select: none; /* IE 10+ */
-}
-
-#rightButton, #leftButton {
-    transition: 0.2s;
-    position: fixed;
-    top: 0;
-    width: 10%;
-    background-color: rgba(255, 255, 255, 0.05);
-    height: 100%;
-    display: flex;
-    font-size: 5rem;
-    cursor: pointer;
-}
-
-#rightButton {
-    right: 0;
-}
-
-#leftButton {
-    left: 0;
-}
-
-#closeButton, #downloadButton {
-    transition: 0.2s;
-    position: fixed;
-    color: white;
-    display: flex;
-    font-size: 3rem;
-    top: 0;
-    width: 80px;
-    height: 80px;
-    background-color: rgba(255, 255, 255, 0.05);
-    cursor: pointer;
-}
-
-#closeButton {
-    right: 10%;
-}
-
-#downloadButton {
-    right: calc(10% + 80px);
-}
-
-#rightButton:hover, #leftButton:hover, #closeButton:hover, #downloadButton:hover {
-    background-color: rgba(255, 255, 255, 0.2);
-}
-
-#rightButton i, #leftButton i, #closeButton i, #downloadButton i {
-    margin: auto;
-}
-
-#rightButton:active, #leftButton:active, #closeButton:active, #downloadButton:active {
-    background-color: rgba(255, 255, 255, 0.4);
-}
-
-
-#loadingIconContainer {
-    color: white;
-    width: 100%;
-    height: 100%;
-    z-index: 8;
-    position: fixed;
-    display: flex;
-    font-size: 5rem;
-}
-
-#loadingIconContainer i {
-    margin: auto;
-}
-
-
-#closeBack {
-    position: fixed;
-    width: 100%;
-    height: 100%;
-    background-color: #1c1c1c;
-}
-
-#photoOverlay {
-    top: 0;
-    left: 0;
-    position: fixed;
-    width: 100%;
-    height: 100%;
-    z-index: 5;
-}
-
-#downloadAlbum {
-    height: 70px;
-    width: 200px;
-    display: inline-flex;
-    position: relative;
-    align-items: center;
-    justify-content: center;
-    background-color: #1a1a1a;
-    box-shadow: 0 0 4px #000;
-    text-shadow: 0 0 5px #1c1c1c;
-    transition: 0.3s;
-    color: #28ca2a;
-    cursor: pointer;
-    margin: 5px;
-}
-
-#downloadText {
-    margin-top: 5px;
-    position: absolute;
-    top: 0;
-}
-
-#albumPhotoCount {
-    color: #929ba8;
-    margin-bottom: 5px;
-    position: absolute;
-    bottom: 0;
-}
-
-#downloadText svg {
-    width: 24px;
-    height: 24px;
-    margin-right: 5px;
-}
-
-
-@media screen and (max-width: 768px) {
-    #rightButton, #leftButton {
-        width: 80px;
-        font-size: 3rem;
-    }
-
-    #closeButton {
-        right: 50%;
-        transform: translateX(100%);
-    }
-
-    #downloadButton {
-        right: 50%;
-    }
-
-
-}
-
-@media screen and (max-width: 576px) {
-    .photos-folder-container a {
-        min-width: 100px;
-        height: 70px;
-    }
-    #folderTitle {
-        position: absolute;
-        top: 5px;
-        color: #73b795;
-        font-size: 15px;
-        text-shadow: 0 0 5px #1c1c1c;
-    }
-
-    #folderPhotos, #folderAlbums {
-        color: #808080;
-        font-size: 10px;
-    }
-
-    #folderPhotos {
-        position: absolute;
-        bottom: 20px;
-    }
-
-    #folderAlbums {
-        position: absolute;
-        bottom: 0;
-    }
-
-    .photos img {
-        width: 140px;
-    }
-
-}

assets/css/planningEvents.css

@@ -1,66 +0,0 @@
-#tableWrapper {
-    width: 100%;
-    overflow: auto;
-    display: flex;
-}
-
-#tablePlanning {
-    margin: auto auto 20px auto;
-    display: flex;
-
-}
-
-.planning-header {
-    font-family: Harry-P, fantasy;
-    border: none;
-    border-radius: 0.2rem;
-    background: #414141;
-    font-size: 2rem;
-    padding: 5px;
-    margin: 5px 0;
-    height: 50px;
-}
-
-.horaires {
-    background: none;
-    border: none;
-    border-top: 1px solid #ccc;
-    text-align: right;
-    vertical-align: top;
-    margin-top: -1px; /* negate the border  to prevent offsest with events */
-}
-
-.event {
-    background: none;
-    border: none;
-    color: white;
-    transition: 0.3s;
-    cursor: pointer;
-    position: absolute;
-    width: 100%;
-    display: flex;
-}
-
-.event-color {
-    border-radius: 0.2rem;
-    transition: 0.2s;
-    border: none;
-    margin: 5px 0;
-    display: flex;
-    width: 100%;
-}
-
-.event-color:hover {
-    border-radius: 1rem;
-    transform: scale(1.05);
-}
-
-.event-text {
-    margin: auto;
-}
-
-.day-column {
-    position: relative;
-    min-width: 150px;
-    margin: 0 5px;
-}

assets/css/queries.css

@@ -0,0 +1,49 @@
+
+@media (max-width: 700px) {
+    html {
+        /*font-size: calc(20px + 5vw);*/
+        font-size: 3vw;
+    }
+
+    section, #msg_acc {
+        width: 95%;
+    }
+
+    #msg_acc, footer {
+        padding: 1em 2em;
+    }
+
+    .box-jaune {
+        margin: 40px auto 0 auto;
+        width: 95%;
+    }
+
+    .footer-text-area {
+        width: unset;
+    }
+
+    header .menu {
+        transform: translateY(120%);
+    }
+
+    header .tuyau {
+        right: 30px;
+        transform: translateY(40%);
+    }
+
+    header .tuyau:hover {
+        opacity: 0.8;
+        transform: translateY(35%);
+    }
+
+    #tuyau-ombre {
+        display: none;
+    }
+
+    /* --- Show the menu on tiny screens --- */
+    nav.mobile-menu.open {
+        height: 100vh;
+        background-color: rgba(15, 15, 23, 0.86);
+    }
+}
+

assets/css/score.css

@@ -1,106 +0,0 @@
-
-#mobile-score {
-    display: none;
-    height: auto;
-}
-
-#mobile-score .title-image {
-    height: 80px;
-    margin: 0 auto 0 auto;
-    display: block;
-    position: relative;
-    bottom: -100px;
-}
-
-#mobile-score .score-container {
-    margin: 0 auto 0 auto;
-    display: block;
-    bottom: -85px;
-    position: relative;
-}
-
-#top-bar-score {
-    display: inline-flex;
-    position: fixed;
-    right: 0;
-}
-
-#top-bar-score .title-image {
-    height: 40px;
-    margin: 0;
-}
-
-#main-score {
-    display: block;
-}
-
-#main-score .title-image {
-    display: none;
-}
-
-.score-container {
-    background: none;
-    border-radius: 10px;
-    display: inline-flex;
-    vertical-align: center;
-    font-family: Harry-P, sans-serif;
-    font-size: 50px;
-    margin: 0;
-}
-
-.score-container a {
-    display: inline-flex;
-    vertical-align: middle;
-    align-items: center;
-    text-shadow: -1px 1px 2px #000,
-    1px 1px 2px #000,
-    1px -1px 0 #000,
-    -1px -1px 0 #000;
-}
-
-.score-container a:hover {
-    text-shadow: 0 0 10px #bd8a39;
-}
-
-.winning {
-    font-size: 23px;
-}
-
-.score-boo {
-    color: #7cd43f;
-    background-size: auto 100%;
-    margin: 0 10px;
-}
-
-.score-pek {
-    color: #9a89fd;
-    background-size: auto 100%;
-    margin: 0 10px;
-}
-
-
-.score-separator {
-    background-color: #d9d9d9;
-    width: 5px;
-    height: 5px;
-}
-
-#main-score .score-logo {
-    height: 60px;
-    margin: 0 5px 0 5px;
-}
-
-
-@media screen and (max-width: 768px) {
-    #top-bar-score {
-        display: none;
-    }
-
-    #mobile-score {
-        display: block;
-    }
-
-    #main-score .score-container {
-        display: block;
-    }
-}

assets/css/sidenav.css

@@ -1,87 +0,0 @@
-/* The side navigation menu */
-
-.sidenav {
-    height: 100%;
-    overflow-y: hidden;
-    width: 300px;
-    transform: translateX(-270px); /* change margin with JavaScript */
-    position: fixed; /* Stay in place */
-    z-index: 1000;
-    top: 0;
-    left: 0;
-    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
-    text-align: left;
-    background: linear-gradient(to right, #1c1c1c, transparent 90%);
-}
-
-.sidenav.sidenav-open {
-    transform: translateX(0);
-    overflow-y: auto;
-}
-
-
-#sidenav-scroll {
-    position: absolute;
-    padding: 80px 0 50px 0;
-    width: 100%;
-}
-
-/* The navigation menu links */
-
-.sidenav a {
-    padding: 0;
-    margin: 0;
-    text-decoration: none;
-    font-size: 20px;
-    color: #f0f0f0;
-    display: inline-flex;
-    transition: 0.3s;
-    height: 40px;
-    width: 270px;
-}
-
-.sidenav a .sidenav-content {
-    margin: 0;
-    padding-left: 20px;
-    width: 100%;
-    height: 100%;
-    display: inline-flex;
-    transition: 0.3s;
-}
-
-.sidenav-icon, .sidenav-image {
-    left: 0;
-    margin-right: 5px;
-    -webkit-transform: translateY(5px);
-    transform: translateY(5px);
-    height: 20px;
-    width: 20px !important;
-}
-
-.sidenav-image {
-    margin: 0 5px 0 0;
-    padding: 0;
-}
-
-.sidenav a .sidenav-content:hover {
-    color: #e9b82f;
-    padding-left: 40px;
-}
-
-.sidenav .separator {
-    height: 20px;
-}
-
-/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
-
-#main {
-    transition: margin-left .5s;
-}
-
-/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
-
-@media screen and (max-height: 450px) {
-    .sidenav a {
-        font-size: 18px;
-    }
-}

assets/css/stats.css

@@ -1,67 +0,0 @@
-
-#teamButtonContainer {
-    display: block;
-    line-height: 2.2;
-}
-
-.team-button {
-    border-radius: 0.2rem;
-    font-size: 2.5rem;
-    font-family: Harry-P, fantasy;
-    cursor: pointer;
-    padding: 15px 20px;
-    margin: 10px;
-    width: 200px;
-    transition: 0.2s;
-    border: none;
-}
-
-#title_boo {
-    color: #7cd43f;
-}
-
-#title_pek {
-    color: #9a89fd;
-}
-
-.team-button#buttonBoo {
-    color: #7cd43f;
-    background-color: #35621e;
-}
-
-.team-button#buttonPek {
-    color: #9a89fd;
-    background-color: #402559;
-}
-
-.team-button#buttonBoo:hover {
-    color: #35821e;
-    background-color: #7cf43f;
-    box-shadow: 0 0 10px #7c843f;
-}
-
-.team-button#buttonPek:hover {
-    color: #402559;
-    background-color: #aaa9fd;
-    box-shadow: 0 0 10px #9a89dd;
-}
-
-.score-entry {
-    width: 100%;
-}
-
-.score-entry-text {
-    margin-right: 20px;
-}
-
-.score-entry-points {
-    margin-left: 20px;
-}
-
-.positive {
-    color: white;
-}
-
-.negative {
-    color: #bf021c;
-}

assets/css/style.css

@@ -1,750 +0,0 @@
-/*******************************************************************************
-MeyerWeb Reset
-*******************************************************************************/
-
-html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    font: inherit;
-    vertical-align: baseline;
-}
-
-/* HTML5 display-role reset for older browsers */
-
-article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
-    display: block;
-}
-
-ol, ul {
-    list-style: none;
-}
-
-table {
-    border-collapse: collapse;
-    border-spacing: 0;
-}
-
-/*******************************************************************************
-Theme Styles
-*******************************************************************************/
-
-@font-face {
-    font-family: Harry-P;
-    src: url('../fonts/hungergames.ttf');
-}
- @font-face {
-     font-family:manuscrit;
-     src:url('../fonts/OldeEnglish.ttf');
- }
-
-body {
-    box-sizing: border-box;
-    color: #b5b5b5;
-    font-size: 1.4rem;
-    font-family: 'Vollkorn', cursive;
-    line-height: 1.5;
-    -webkit-font-smoothing: antialiased;
-    text-align: center;
-}
-
-h1, h2, h3, h4, h5, h6 {
-    margin: 10px 0;
-    color: #e0e0e0;
-    font-family: Harry-P, fantasy;
-    font-weight: normal;
-    letter-spacing: -1px;
-    text-align: center;
-}
-
-h1 {
-    font-size: 4rem;
-}
-
-h2 {
-    font-size: 3.5rem;
-}
-
-h3 {
-    font-size: 3rem;
-}
-
-h4 {
-    font-size: 2.6rem;
-}
-
-h5 {
-    font-size: 2.2rem;
-}
-
-h6 {
-    font-size: 1.9rem;
-}
-
-p {
-    margin: 10px 0 15px 0;
-}
-
-footer p {
-    color: #f2f2f2;
-    text-shadow: 0 0 2px black;
-}
-
-a {
-    text-decoration: none;
-    color: #dc4b33;
-    text-shadow: none;
-    transition: 0.3s;
-}
-
-a:hover, a:focus {
-    text-shadow: 0 0 4px #691d05;
-}
-
-
-
-strong {
-    font-weight: bold;
-}
-
-img {
-    position: relative;
-    max-width: 739px;
-    padding: 5px;
-    margin: 10px 0 10px 0;
-}
-
-p img {
-    display: inline;
-    margin: 0;
-    padding: 0;
-    vertical-align: middle;
-    text-align: center;
-    border: none;
-}
-
-ul, ol, dl {
-    margin-bottom: 15px
-}
-
-ul {
-    list-style: disc inside;
-    padding-left: 20px;
-}
-
-ol {
-    list-style: decimal inside;
-    padding-left: 20px;
-}
-
-table {
-    border: 1px solid #d5d5d5;
-    margin-bottom: 20px;
-    text-align: center;
-}
-
-th {
-    padding: 10px;
-    background: #373737;
-    color: #fff;
-}
-
-td {
-    padding: 10px;
-    border: 1px solid #212121;
-}
-
-.copyright {
-    color: #fff;
-    font-size: 1.2rem;
-    text-shadow: #000 0 0 4px;
-}
-
-.video {
-    width: 480px;
-    height: 270px;
-}
-
-.hidden {
-    display: none;
-}
-
-/*******************************************************************************
-Full-Width Styles
-*******************************************************************************/
-
-.outer {
-    width: 100%;
-}
-
-.inner {
-    position: relative;
-    max-width: 70%;
-    padding: 20px 10px;
-    margin: 0 auto;
-}
-
-#header-wrap {
-    background-position: top;
-}
-
-#header-top {
-    display: flex;
-    color: white;
-    position: fixed;
-    width: 100%;
-    z-index: 2000;
-    height: 100px;
-    background: linear-gradient(to bottom, #1c1c1c, transparent 90%);
-    pointer-events: none;
-}
-
-#header-top a {
-    display: inline-flex;
-    pointer-events: auto;
-    vertical-align: middle;
-    height: 40px;
-    margin: 5px 0 5px 0;
-}
-
-#header-wrap .inner {
-    padding: 100px 10px 30px 10px;
-}
-
-.title-logo {
-    width: 200px;
-}
-
-#menu-title {
-    line-height: 40px;
-    margin: 0 0 0 5px;
-    height: 40px;
-}
-
-#menu-icon {
-    width: 40px;
-    height: 40px;
-    padding: 0;
-    margin: auto;
-}
-
-#title {
-    margin: 0;
-    color: #e0e0e0;
-    font-size: 5rem;
-    text-shadow: #000000 0 0 5px;
-    text-align: center;
-    font-family: Harry-P, fantasy;
-    font-weight: normal;
-    cursor: default;
-}
-
-#timer {
-    color: #d8d8d8;
-    font-size: 2.5rem;
-    background: none;
-    text-shadow: #000000 0 0 2px;
-    border-bottom: none;
-    height: 30px;
-}
-
-#home-image {
-    width: 50%;
-    margin: 0;
-    padding: 0;
-}
-
-#home-title {
-    width: 20%;
-    margin: 0;
-    padding: 0;
-}
-
-#home-content-wrap {
-    background: none;
-    height: 100%;
-}
-
-#home-content {
-    padding-top: 100px;
-}
-
-.background {
-    background: url("../images/backgrounds/bg_main.jpg") no-repeat center fixed;
-    background-size: cover;
-    position: fixed;
-    height: 100%;
-    width: 100%;
-    z-index: -10;
-}
-
-.index-background {
-    background: url("../images/backgrounds/bg_main.jpg") no-repeat center fixed;
-    background-size: cover;
-}
-
-#bg_pekhint {
-    background: url("../images/backgrounds/bg_pekhint.jpg") no-repeat center fixed;
-    background-size: cover;
-    position: fixed;
-    top: 0px;
-
-}
-
-#bg_pek {
-    background: url("../images/backgrounds/bg_peksu.jpg");
-    background-size: cover;
-}
-
-#bg_boom {
-    background: url("../images/backgrounds/bg_boomi.jpg");
-    background-size: cover;
-}
-
-#main-fading-top-edge {
-    height: 200px;
-    background: linear-gradient(to top, #1c1c1c, transparent 90%);
-}
-
-#main-fading-bottom-edge {
-    height: 200px;
-    background: linear-gradient(to bottom, #1c1c1c, transparent 90%);
-}
-
-#main-content-wrap {
-    background: #1c1c1c;
-}
-
-#main-content {
-    padding-top: 10px;
-}
-
-#footer-wrap {
-    padding: 50px 0 50px 0;
-}
-
-.com-container {
-    margin: 5% 0 50px 5%;
-    width: 90%;
-    border: 1px solid #494949;
-}
-
-
-#table-coms {
-    width: 100%;
-    table-layout: auto;
-    text-align: center;
-    border: none;
-    margin-bottom: 0;
-
-}
-
-#table-coms .spacer {
-    width: 20%;
-}
-
-#table-coms td {
-    vertical-align: middle;
-    border: none;
-    padding: 0;
-    width: 30%;
-}
-
-#table-coms img {
-    height: 100px;
-}
-
-.com-description {
-    width: 100%;
-    font-weight: bold;
-}
-
-#back-button {
-    top: 0;
-    left: 0;
-    position: fixed;
-    width: 100%;
-    height: 100%;
-    background-color: #000;
-    opacity: 0;
-    z-index: -100;
-    transition: 0.3s;
-}
-
-.active-background {
-    z-index: 100 !important;
-    opacity: 0.7 !important;
-}
-
-.main-button {
-    background-color: #1a1a1a;
-    padding: 3px 6px 3px 6px;
-    border-radius: 5px;
-    text-shadow: 0 0 5px #1c1c1c;
-    font-size: 25px;
-    color: #dc4b33;
-    box-shadow: 0 0 4px #000;
-    margin:2px;
-}
-
-/* 2020 */
-#hideenigma{
-    color: #acacac;
-
-}
-#hide {
-    color: aliceblue;
-}
-
-.main-button:hover {
-    box-shadow: 0 0 10px #000;
-    background-color: #635247;
-}
-
-#credits-list {
-    list-style: none;
-    display: inline-flex;
-}
-
-#credits-list li {
-    padding: 10px;
-    margin: auto;
-    font-size: 3rem;
-}
-
-#credits-list a:hover {
-    color: #a3a7b3;
-}
-
-#credits-liste {
-    color: #b5b5b5;
-}
-
-#main-pages {
-    width: 100%;
-    display: inline-grid;
-    padding: 0;
-    vertical-align: middle;
-}
-
-
-#homeSubtitle {
-    text-shadow: 0 0 10px #000;
-}
-
-.main-link {
-    width: 85px;
-    height: 85px;
-    margin: 2px;
-    display: inline-grid;
-    vertical-align: middle;
-    padding: 0;
-    color: #e0e0e0;
-    text-shadow: 0 0 10px #000;
-}
-
-.main-link:hover {
-    color: rgba(233, 184, 47, 0.8);
-}
-
-#homeText {
-    color: white;
-    background-color: rgba(28, 28, 28, 0.7);
-    border-radius: 2rem;
-    padding: 10px;
-    box-shadow: 0 0 10px #1c1c1c;
-}
-
-.main-logo {
-    font-size: 70px;
-    margin: auto;
-    display: inline-flex;
-    text-shadow: 0 0 10px #000;
-}
-
-.main-logo svg {
-    margin: auto;
-}
-
-.main-logo img {
-    width: 90%;
-    margin: auto;
-    padding: 0;
-}
-
-
-#list-blouse {
-    text-align: left;
-    list-style: square;
-}
-
-#map svg path {
-    transition: 0.3s;
-}
-
-#hint {
-    font-size: 12px;
-    color: #535353;
-}
-
-/* Popups */
-.jconfirm-bg {
-    background-color: rgba(26, 26, 26, 0.9) !important;
-}
-
-.jconfirm .jconfirm-box div.jconfirm-title-c .jconfirm-title {
-    font-family: Harry-P, fantasy;
-    font-size: 3rem;
-}
-
-.jconfirm .jconfirm-box.loading {
-    height: 100%;
-}
-
-.jconfirm .jconfirm-box.loading::before {
-    display: none;
-}
-
-/* Color of the spinning icon */
-.jconfirm .jconfirm-box.loading::after {
-    border-bottom-color: #ed0223;
-    opacity: 1;
-}
-
-.jconfirm .jconfirm-box div.jconfirm-content {
-    padding-bottom: 50px;
-}
-
-.jconfirm.jconfirm-supervan .jconfirm-box .jconfirm-buttons button {
-    font-family: Harry-P,fantasy;
-    font-size: 2rem;
-}
-
-.quote {
-    font-family: 'Allura', cursive;
-    font-size: 2rem;
-}
-
-#menuLink:hover {
-    text-shadow: 0 0 10px #bd8a39;
-}
-
-/* Map loading */
-#loading-screen {
-	position: absolute;
-	z-index: 2;
-	/*top: 0; */
-	left: 0;
-	width: 100%;
-	height: 50%;
-	background-color: #000000;
-	opacity: 1;
- 	transition: 1s opacity;
-}
-
-#loading-screen.fade-out {
-    opacity: 0;
-}
-
-.loader {
-    display: block;
-    position: relative;
-    left: 50%;
-    top: 50%;
-    width: 150px;
-    height: 150px;
-    margin: -75px 0 0 -75px;
-    border-radius: 50%;
-    border: 3px solid transparent;
-    border-top-color: #9370DB;
-    -webkit-animation: spin 2s linear infinite;
-    animation: spin 2s linear infinite;
-}
-.loader:before {
-    content: "";
-    position: absolute;
-    top: 5px;
-    left: 5px;
-    right: 5px;
-    bottom: 5px;
-    border-radius: 50%;
-    border: 3px solid transparent;
-    border-top-color: #BA55D3;
-    -webkit-animation: spin 3s linear infinite;
-    animation: spin 3s linear infinite;
-}
-.loader:after {
-    content: "";
-    position: absolute;
-    top: 15px;
-    left: 15px;
-    right: 15px;
-    bottom: 15px;
-    border-radius: 50%;
-    border: 3px solid transparent;
-    border-top-color: #FF00FF;
-    -webkit-animation: spin 1.5s linear infinite;
-    animation: spin 1.5s linear infinite;
-}
-@-webkit-keyframes spin {
-    0%   {
-        -webkit-transform: rotate(0deg);
-        -ms-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
-    100% {
-        -webkit-transform: rotate(360deg);
-        -ms-transform: rotate(360deg);
-        transform: rotate(360deg);
-    }
-}
-@keyframes spin {
-    0%   {
-        -webkit-transform: rotate(0deg);
-        -ms-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
-    100% {
-        -webkit-transform: rotate(360deg);
-        -ms-transform: rotate(360deg);
-        transform: rotate(360deg);
-    }
-}
-
-/*******************************************************************************
-Small Device Styles
-*******************************************************************************/
-
-@media screen and (max-width: 992px) {
-    img {
-        max-width: 100%;
-    }
-}
-
-@media screen and (max-width: 480px) {
-    body {
-        font-size: 14px;
-    }
-
-    .video {
-        width: 240px;
-        height: 135px;
-    }
-
-    .inner {
-        min-width: 320px;
-        max-width: 480px;
-    }
-
-    #title {
-        font-size: 32px;
-    }
-
-    h1 {
-        font-size: 28px;
-    }
-
-    h2 {
-        font-size: 24px;
-    }
-
-    h3 {
-        font-size: 21px;
-    }
-
-    h4 {
-        font-size: 18px;
-    }
-
-    h5 {
-        font-size: 14px;
-    }
-
-    h6 {
-        font-size: 12px;
-    }
-
-    code, pre {
-        font-size: 11px;
-    }
-
-    #table-wrapper {
-        width: 100%;
-        overflow: scroll;
-    }
-
-    #table-coms .spacer {
-        width: 0;
-    }
-
-    #table-coms td {
-        width: 50%;
-    }
-
-    .main-link {
-        width: 40px;
-        height: 40px;
-    }
-
-    .main-logo {
-        font-size: 32px;
-    }
-}
-
-@media screen and (max-width: 320px) {
-    body {
-        font-size: 14px;
-    }
-
-    .inner {
-        min-width: 240px;
-        max-width: 320px;
-    }
-
-    #title {
-        font-size: 28px;
-    }
-
-    h1 {
-        font-size: 24px;
-    }
-
-    h2 {
-        font-size: 21px;
-    }
-
-    h3 {
-        font-size: 18px;
-    }
-
-    h4 {
-        font-size: 16px;
-    }
-
-    h5 {
-        font-size: 14px;
-    }
-
-    h6 {
-        font-size: 12px;
-    }
-
-    code, pre {
-        min-width: 240px;
-        max-width: 320px;
-        font-size: 11px;
-    }
-
-    #table-wrapper {
-        width: 100%;
-        overflow: scroll;
-    }
-}
-
-/*******************************************************************************
-Timer style
-*******************************************************************************/
-
-#timer-space{
-    letter-spacing: 2px;
-}

assets/css/template.css

@@ -0,0 +1,228 @@
+/* Custom mario font definition : */
+@font-face{
+  font-family: "Mario Extended";
+  src: url("../fonts/MarioFontExtended.otf") format("opentype");
+}
+
+*, *::before, *::after {
+	box-sizing: border-box;
+}
+
+html {
+	font-size: 20px;
+}
+
+body {
+	font-family: 'Mario Extended', sans-serif;
+
+	font-size: 1rem;
+
+	padding: 0; margin: 0;
+
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	min-height: 100vh;
+
+	background-attachment: fixed;
+	background-color: #bdc7f3;
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 40' width='80' height='40'%3E%3Cpath fill='%235289ea' fill-opacity='0.2' d='M0 40a19.96 19.96 0 0 1 5.9-14.11 20.17 20.17 0 0 1 19.44-5.2A20 20 0 0 1 20.2 40H0zM65.32.75A20.02 20.02 0 0 1 40.8 25.26 20.02 20.02 0 0 1 65.32.76zM.07 0h20.1l-.08.07A20.02 20.02 0 0 1 .75 5.25 20.08 20.08 0 0 1 .07 0zm1.94 40h2.53l4.26-4.24v-9.78A17.96 17.96 0 0 0 2 40zm5.38 0h9.8a17.98 17.98 0 0 0 6.67-16.42L7.4 40zm3.43-15.42v9.17l11.62-11.59c-3.97-.5-8.08.3-11.62 2.42zm32.86-.78A18 18 0 0 0 63.85 3.63L43.68 23.8zm7.2-19.17v9.15L62.43 2.22c-3.96-.5-8.05.3-11.57 2.4zm-3.49 2.72c-4.1 4.1-5.81 9.69-5.13 15.03l6.61-6.6V6.02c-.51.41-1 .85-1.48 1.33zM17.18 0H7.42L3.64 3.78A18 18 0 0 0 17.18 0zM2.08 0c-.01.8.04 1.58.14 2.37L4.59 0H2.07z'%3E%3C/path%3E%3C/svg%3E");
+}
+
+body::before {
+	content: "";
+	position: fixed;
+	z-index: -2;
+	top: 0;
+	left: 0;
+	width: 100vw;
+	height: 100vh;
+	clip-path: polygon(0 0, 55% 0, 45% 100%, 0 100%);
+	clip-path: polygon(0 0, calc(54% + 20px) 0, calc(46% - 20px) 100%, 0 100%);
+	background-color: #f3e8c4;
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 40' width='80' height='40'%3E%3Cpath fill='%23efc725' fill-opacity='0.2' d='M0 40a19.96 19.96 0 0 1 5.9-14.11 20.17 20.17 0 0 1 19.44-5.2A20 20 0 0 1 20.2 40H0zM65.32.75A20.02 20.02 0 0 1 40.8 25.26 20.02 20.02 0 0 1 65.32.76zM.07 0h20.1l-.08.07A20.02 20.02 0 0 1 .75 5.25 20.08 20.08 0 0 1 .07 0zm1.94 40h2.53l4.26-4.24v-9.78A17.96 17.96 0 0 0 2 40zm5.38 0h9.8a17.98 17.98 0 0 0 6.67-16.42L7.4 40zm3.43-15.42v9.17l11.62-11.59c-3.97-.5-8.08.3-11.62 2.42zm32.86-.78A18 18 0 0 0 63.85 3.63L43.68 23.8zm7.2-19.17v9.15L62.43 2.22c-3.96-.5-8.05.3-11.57 2.4zm-3.49 2.72c-4.1 4.1-5.81 9.69-5.13 15.03l6.61-6.6V6.02c-.51.41-1 .85-1.48 1.33zM17.18 0H7.42L3.64 3.78A18 18 0 0 0 17.18 0zM2.08 0c-.01.8.04 1.58.14 2.37L4.59 0H2.07z'%3E%3C/path%3E%3C/svg%3E");
+}
+
+main {
+	text-align: center;
+	height: 100%;
+}
+
+a.link {
+	text-decoration: none;
+	color: #FFDC00;
+	-webkit-text-stroke: 1px black;
+}
+
+a.link:hover {
+	color: white;
+	-webkit-text-stroke: 1px white;
+}
+
+a.linkmail {
+	font-family: arial, sans-serif;
+	font-weight: bold;
+	text-decoration: none;
+	color: #FFDC00;
+}
+
+a.linkmail:hover {
+	color: white;
+	-webkit-text-stroke: 1px white;
+}
+
+/** START BOX JAUNE **/
+
+.box-jaune {
+	display: inline-block;
+	position: relative;
+	padding: 10px;
+	margin: 40px 10vw 0;
+	font-size: 2.5px;
+
+	background-color: #efd21f;
+	border-top: solid 2em #fbf322;
+	border-left: solid 2em #a29013;
+	border-right: solid 2em #f7e31c;
+	border-bottom: solid 2em #73590b;
+
+	clip-path: polygon(
+			0 2.00em,1em 1em,2.00em 0,
+			calc(100% - 2.00em) 0,calc(100% - 1em) 1em,100% 2.00em,
+			100% calc(100% - 2.00em),calc(100% - 1em) calc(100% - 1em),calc(100% - 2.00em) 100%,
+			2.00em 100%,1em calc(100% - 1em),0 calc(100% - 2.00em)
+	);
+}
+
+.corners-top::before {
+	top: -2em;
+	left: -2em;
+	background-color: #bfa018;
+}
+
+.corners-top::after {
+	top: -2em;
+	right: -2em;
+	background-color: #fbfa87;
+}
+
+.corners-bottom::before {
+	bottom: -1.9em;
+	left: -2em;
+	background-color: #44350d;
+}
+
+.corners-bottom::after {
+	bottom: -1.9em;
+	right: -2em;
+	background-color: #967912;
+}
+
+.corners::before,
+.corners:after {
+	content:"";
+	position: absolute;
+	display:block;
+	width: 2em;
+	height: 2em;
+	z-index: 2;
+}
+
+.box-jaune .title {
+	padding: 3vw 4.5vw;
+	color: black;
+	font-size: 1.5rem;
+}
+
+.circles-top {
+	top: 3em;
+}
+
+.circles-bottom {
+	bottom: 3em;
+}
+
+.circles::after,
+.circles::before {
+	content: "";
+	position: absolute;
+	display: block;
+	width: 2em;
+	height: 2em;
+	top: inherit;
+	bottom: inherit;
+	border-radius: 100%;
+	background: black;
+	opacity: .9;
+}
+
+.circles::before {
+	left: 3em;
+}
+
+.circles::after {
+	right: 3em;
+}
+
+/** END BOX JAUNE **/
+
+.menu_space_bottom {
+  position: sticky;
+	width: 100%;
+	opacity: 0;
+	left: 0;
+	bottom: 0;
+	padding: 0;
+	margin: 0;
+}
+
+.complete-wrapper {
+	flex: 1 0 auto;
+	padding-bottom: 60px;
+}
+
+footer {
+	display: block;
+	flex-shrink: 0;
+	background-color: #6cc54d;
+	background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%237ee15e' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
+	border-radius: 20px 20px 0 0;
+	-webkit-box-shadow: 0 0 8px -1px rgba(8, 10, 13, 0.34);
+	box-shadow: 0 0 8px -1px rgba(8, 10, 13, 0.34);
+	width: 100%;
+	padding: 50px;
+	font-size: 1rem;
+	color: black;
+}
+
+.footer-text-area {
+	width: 80%;
+	max-width: 800px;
+	margin-top: 2vh;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+
+
+/* general purpose css */
+ul {
+	padding: 0;
+}
+
+li {
+	list-style: none;
+}
+
+h1, h2, h3, h4, h5, h6 {
+	font-weight: unset;
+}
+
+section {
+	overflow: hidden;
+	max-width: 1000px;
+}
+
+#main_content {
+	padding-top: 20px;
+}

assets/enigmes/crypto.py

@@ -1,63 +0,0 @@
-""" Created by Ronan Bonnet
-    On 23 July 2021, 02:51
-
-    Petite énigme pour les Phutures Programmeurs Aixpérimentés
-    Tip : réécrire le code en version + joli, c'est volontairement moche ;)
-    Bonus : Difficulté augmentée car j'ai oublié de sauvegarder la première fois que je l'ai fait :(
-"""
-
-unknown = "" # Le code que tu cherches se trouvait jadis ici..
-key = "" # Je te laisse la trouver, si t'as un doute et que t'avances pas, envoie mp à @ronan.hpp sur Instagram
-
-""" Chiffre un message en utilisant un algorithme fait par mes soins (si vous trouvez le nom de celui-ci je suis preneur)
-    On se Base sur la table ASCII dans le groupe des caractères Imprimables.
-    Renvoie le message chiffré
-"""
-def encode(msg):
-    res = ""
-    odd = []
-    fan = "ventilateur" # C'est Le mot en Anglais
-    for i in range(len(msg)):
-        odd += msg[i]
-        res += chr((sum(ord(ch) - 32 for ch in odd) + ord(key[i % len(key)]) - 32) % 92  + 32 )
-    return res
-
-""" Déchiffre le message 
-    ...J'Ai déjà assez codé pour aujourd'hui, prend le relai !
-    Renvoie le message déchiffré
-"""
-def decode(msg):
-    res = ""
-    #
-    return res
-
-"""
-Immédiatement les résultats :
-
-1.
-Input   :   askip vous avez fait du Python au lycee
-Output  :   .J>u(\qjZTZ=)RuzRRs*'zedb(e&sTa998/"%fAj
-
-2.
-Input   :   Trouve la clef et le message secret
-Output  :   !<4w0Mh^:=*tOyB0r1UY_G30%X'5:{#>O>-
-
-3.
-Input   :   Je suis gentil, je vous laisse des exemples
-Output  :   s%*k#DV\>*"tS'X]9=q*#oio]4a!yPk+/,#kmT7k$nS
-
-4.
-Input   :   Bon, ok, c'est pas facile...
-Output  :   k'zt3ZdvmWdK4l5.]oGL7qaW>>0c
-
-5.
-Input   :   Mais la clef est simple!
-Output  :   v$rWr::@zm\D6_{xfx=IC*ry
-
-6.
-Input   : 
-Output  : "9>m%QbQH2+mH,:6x7RR?"6<"U+GL!%QdSJ^VAzO]j5Cp/&^I86 LZ_25cc[9%x_C{DcQ8QSH(!'qH,#IjJ"&zq@zIgT
-
-"""
-code = str('"9>m%QbQH2+mH,:6x7RR?"6<"U+GL!%QdSJ^VAzO]j5Cp/&^I86 LZ_25cc[9%x_C{DcQ8QSH(!\'qH,#IjJ"&zq@zIgT')
-print(decode(code))

assets/fonts/color.php

@@ -0,0 +1,18 @@
+<?php
+function colored_text($str) {
+	$cl = ["red", "blue", "green", "orange", "grey", "brown", "purple"];
+	$str_out = "";
+	$ant_color = "";
+
+	for($i=0; $i<=strlen($str)-1 ;$i++) {
+		$color = $cl[rand(0, 6)];
+		while($color == $ant_color) {
+			$color = $cl[rand(0, 6)];
+		}
+		$ant_color = $color;
+		$str_out = $str_out."<font color='".$color."'>".$str[$i]."</font>";
+	}
+
+	return "<strong>".$str_out."</strong>";
+}
+?>

assets/fonts/cursor.php

@@ -0,0 +1,59 @@
+<script type="text/javascript">
+
+    /** les variables x/y MousePos contiennent les coordonnés de la souris */
+    var xMousePos = 0;
+    var yMousePos = 0;
+
+    /** stockent des informations sur le dernier scroll (pour update le positionnement de la souris) */
+    var lastScrolledLeft = 0;
+    var lastScrolledTop = 0;
+
+    addEventListener("mousemove", (ev) => {
+
+        if(navigator.appName=="Microsoft Internet Explorer") {
+            xMousePos = event.x+document.body.scrollLeft;
+            yMousePos = event.y+document.body.scrollTop;
+        } else {
+            xMousePos =  ev.pageX;
+            yMousePos =  ev.pageY;
+        }
+
+        document.getElementById("image_suit_souris").style.left = (xMousePos+1/*+1-43*/)+'px';
+        document.getElementById("image_suit_souris").style.top  = (yMousePos+1/*-17*/)+'px';
+    })
+
+    addEventListener("scroll", (ev) => {
+        if(lastScrolledLeft !== document.scrollingElement.scrollLeft){
+            xMousePos -= lastScrolledLeft;
+            lastScrolledLeft = document.scrollingElement.scrollLeft;
+            xMousePos += lastScrolledLeft;
+        }
+        if(lastScrolledTop !== document.scrollingElement.scrollTop){
+            yMousePos -= lastScrolledTop;
+            lastScrolledTop = document.scrollingElement.scrollTop;
+            yMousePos += lastScrolledTop;
+        }
+
+        document.getElementById("image_suit_souris").style.left = (xMousePos+1/*+1-43*/)+'px';
+        document.getElementById("image_suit_souris").style.top  = (yMousePos+1/*-17*/)+'px';
+    })
+
+</script>
+
+<style>
+
+body {
+    overflow-x: hidden;
+}
+
+.cursor {
+    position: absolute;
+    display: block;
+    z-index: 5;
+    width: 75px;
+    transform: translateX(-22px) translateY(-106px);
+    pointer-events: none;
+}
+</style>
+
+<img src="assets/img/cursor.png" alt="Image qui suit la souris" id="image_suit_souris" class="cursor" />