bla

...

.gitignore

@@ -1,5 +1,6 @@
 # Directories and files
 node_modules/
+static/images/
 package-lock.json
 prankdata.txt
 activitydata.txt

index.js

@@ -1,41 +1,34 @@
 const fastify = require('fastify')({ logger: true })
 const fs = require('fs');
 const path = require('path')
-var LdapAuth = require('ldapauth-fork');
+const CryptoJS = require("crypto-js");
+// var LdapAuth = require('ldapauth-fork');
 
+var usersBdd = "usersBdd.txt";
 var prankPath = "prankdata.txt";
 var activityPath = "activitydata.txt";
 var treasurePath = "treasuredata.txt";
 var goldenUsersPath = "goldenusers.txt";
+var servicePath = "servicestate.txt";
 
 initFs();
 
+let UsersBDD = JSON.parse(fs.readFileSync(usersBdd));
+
 let PrankData = JSON.parse(fs.readFileSync(prankPath));
 let ActivityData = JSON.parse(fs.readFileSync(activityPath));
 let TreasureData = JSON.parse(fs.readFileSync(treasurePath));
 let GoldenUsers = JSON.parse(fs.readFileSync(goldenUsersPath));
-let AdminUsersUid = ["asyncnomi", "johan", "enthalpine", "fas", "arina", "billy", "remi", "pierre", "matmaz", "", "", ""];
+let ServiceState = JSON.parse(fs.readFileSync(servicePath));
+let AdminUsersUid = ["asyncnomi", "johan", "enthalpine", "fleur", "arina", "billy", "remi", "pierre", "matmaz", "mariusdrgc", "agathe", "jsansa"];
 let UsersToken = {};
-let TokenDurationSecond = 3600;
+let TokenDurationSecond = 360000;
 let MaxAmountCrepe = 10;
 let Supplements = ["nature", "sucre", "nutella", "confiture"];
 
-var ldapConf = JSON.parse(fs.readFileSync("ldap-conf.json"));
-var LDAP = new LdapAuth({
-    url: 'ldap://10.5.0.44',
-    bindDN: 'cn='+ ldapConf.bindUser +',ou=service-users,dc=ldap,dc=rezo-rm,dc=fr',
-    bindCredentials: ldapConf.bindPassword,
-    searchBase: 'dc=ldap,dc=rezo-rm,dc=fr',
-    searchFilter: '(uid={{username}})',
-    reconnect: true,
-});
-LDAP.on('error', function (err) {
-  console.error('LdapAuth: ', err);
-});
-ldapConf = null;
-
 fastify.addContentTypeParser('application/json', {
-    parseAs: 'string'
+    parseAs: 'string',
+    bodyLimit: 10485760
 }, function(req, body, done) {
     try {
         var json = JSON.parse(body)
@@ -51,28 +44,39 @@ fastify.register(require('@fastify/static'), {
     decorateReply: false
 })
 
-fastify.get('/', async (request, reply) => {
-    reply.redirect('/index.html')
-})
-
 fastify.post('/login', async (request, reply) => {
     let content = request.body;
     if (content.hasOwnProperty("user")
     && content.hasOwnProperty("password")) {
-        let res = await authenticate(content.user, content.password);
-        if (res.authState) {
-            let now = new Date();
-            UsersToken[res.authUser.uid] = {
-                token: makeid(64),
-                expire: now.setSeconds(now.getSeconds() + TokenDurationSecond)
+        if (UsersBDD.hasOwnProperty(content.user)) {
+            var hash;
+            try {
+                hash = CryptoJS.SHA512(content.password).toString();
+            } catch {
+                return {
+                    success: false,
+                    why: "Wrong username or password"
+                }
             }
-            return {
-                success: true,
-                user: {
-                    uid: res.authUser.uid,
-                    givenName: res.authUser.givenName
-                },
-                token: UsersToken[res.authUser.uid].token
+            if (hash === UsersBDD[content.user].password) {
+                let now = new Date();
+                UsersToken[content.user] = {
+                    token: makeid(64),
+                    expire: now.setSeconds(now.getSeconds() + TokenDurationSecond)
+                }
+                return {
+                    success: true,
+                    user: {
+                        uid: content.user,
+                        isAdmin: AdminUsersUid.includes(content.user)
+                    },
+                    token: UsersToken[content.user].token
+                }
+            } else {
+                return {
+                    success: false,
+                    why: "Wrong username or password"
+                }
             }
         } else {
             return {
@@ -88,10 +92,88 @@ fastify.post('/login', async (request, reply) => {
     }
 })
 
+fastify.post('/register', async (request, reply) => {
+    let content = request.body;
+    if (content.hasOwnProperty("user")
+    && content.hasOwnProperty("password")) {
+        if (UsersBDD.hasOwnProperty(content.user)) {
+            return {
+                success: false,
+                why: "This user already exists"
+            }
+        } else {
+            var hash;
+            try {
+                hash = CryptoJS.SHA512(content.password).toString();
+            } catch {
+                return {
+                    success: false,
+                    why: "What are you doing bruh ??"
+                }
+            }
+            UsersBDD[content.user] = {
+                password: hash
+            }
+            saveData(usersBdd, UsersBDD);
+            let now = new Date();
+            UsersToken[content.user] = {
+                token: makeid(64),
+                expire: now.setSeconds(now.getSeconds() + TokenDurationSecond)
+            }
+            return {
+                success: true,
+                user: {
+                    uid: content.user,
+                    isAdmin: AdminUsersUid.includes(content.user)
+                },
+                token: UsersToken[content.user].token
+            }
+        }
+    } else {
+        return {
+            success: false,
+            why: "The username or password is missing"
+        }
+    }
+})
+
+fastify.post('/switchState', async (request, reply) => {
+    let content = request.body;
+    let auth = checkAuthetification(content);
+    if (auth.success) {
+        if (AdminUsersUid.includes(content.uid)) {
+            if (ServiceState.state == "closed") {
+                ServiceState.state = "open";
+            } else {
+                ServiceState.state = "closed";
+            }
+            saveData(servicePath, ServiceState);
+            return {
+                success: true,
+                state: ServiceState.state
+            }
+        } else {
+            return {
+                success: false,
+                why: "Not allowed"
+            }
+        }
+    } else {
+        return auth
+    }
+})
+
 fastify.post('/addPrank', async (request, reply) => {
     let content = request.body;
     let auth = checkAuthetification(content);
     if (auth.success) {
+        if (ServiceState.state == "closed"
+        && !AdminUsersUid.includes(content.uid)) {
+            return {
+                success: false,
+                why: "The service is for now, closed"
+            }
+        }
         if ("type" in content) {
             let prankUid = makeid(16);
             if ("prankUid" in content) {
@@ -117,10 +199,11 @@ fastify.post('/addPrank', async (request, reply) => {
                     && "supplement" in content) {
                         let amount = parseInt(content.amount)
                         if (!isNaN(amount)) {
-                            if (!Supplements.contains(content.supplement)) {
+                            if (Supplements.includes(content.supplement)) {
                                 if (amount < MaxAmountCrepe) {
                                     let prankUid = makeid(16);
                                     PrankData[prankUid] = {
+                                        date: new Date(),
                                         creator: content.uid,
                                         type: content.type,
                                         where: content.where,
@@ -132,7 +215,7 @@ fastify.post('/addPrank', async (request, reply) => {
                                     }
                                     saveData(prankPath, PrankData);
                                     return {
-                                        sucess: true,
+                                        success: true,
                                         uid: prankUid,
                                         prank: PrankData[prankUid]
                                     }
@@ -176,7 +259,7 @@ fastify.post('/addPrank', async (request, reply) => {
                         }
                         saveData(prankPath, PrankData);
                         return {
-                            sucess: true,
+                            success: true,
                             uid: prankUid,
                             prank: PrankData[prankUid]
                         }
@@ -291,7 +374,7 @@ fastify.post('/get', async (request, reply) => {
                 case "prank":
                     if (AdminUsersUid.includes(content.uid)) {
                         return {
-                            sucess: true,
+                            success: true,
                             prankData: PrankData
                         }
                     } else {
@@ -309,27 +392,37 @@ fastify.post('/get', async (request, reply) => {
                     break;
                 case "activity":
                     return {
-                        sucess: true,
+                        success: true,
                         activityData: ActivityData
                     }
                     break;
                 case "treasure":
+                    let treasureData = JSON.parse(JSON.stringify(TreasureData));
+                    for (treasure in treasureData) {
+                        treasureData[treasure].activity = ActivityData[treasureData[treasure].activityUid];
+                    }
                     if (AdminUsersUid.includes(content.uid)) {
-                        return {
-                            sucess: true,
-                            prankData: TreasureData
-                        }
-                    } else {
-                        let treasureData = {};
-                        for (treasure in TreasureData) {
-                            if (TreasureData[treasure].creator == content.uid) {
-                                treasureData[treasure] = TreasureData[treasure];
-                            }
-                        }
                         return {
                             success: true,
                             treasureData: treasureData
                         }
+                    } else {
+                        let treasureDataUser = {};
+                        for (treasure in treasureData) {
+                            if (treasureData[treasure].creator == content.uid) {
+                                treasureDataUser[treasure] = treasureData[treasure];
+                            }
+                        }
+                        return {
+                            success: true,
+                            treasureData: treasureDataUser
+                        }
+                    }
+                    break;
+                case "state":
+                    return {
+                        success: true,
+                        state: ServiceState.state
                     }
                     break;
                 default:
@@ -344,6 +437,18 @@ fastify.post('/get', async (request, reply) => {
                 why: "Missing type"
             }
         }
+    } else if ("type" in content) {
+        switch (content.type) {
+            case "activity":
+                return {
+                    success: true,
+                    activityData: ActivityData
+                }
+                break;
+            default:
+                return auth;
+                break;
+        }
     } else {
         return auth
     }
@@ -381,7 +486,7 @@ fastify.post('/addActivity', async (request, reply) => {
                             }
                             saveData(activityPath, ActivityData);
                             return {
-                                sucess: true,
+                                success: true,
                                 uid: activityUid,
                                 activity: ActivityData[activityUid]
                             }
@@ -403,7 +508,7 @@ fastify.post('/addActivity', async (request, reply) => {
                         }
                         saveData(activityPath, ActivityData);
                         return {
-                            sucess: true,
+                            success: true,
                             uid: activityUid,
                             activity: ActivityData[activityUid]
                         }
@@ -454,16 +559,16 @@ fastify.post('/sendTreasure', async (request, reply) => {
             && "activityUid" in content) {
                 let treasureUid = makeid(16);
                 if ("treasureUid" in content) {
-                    let treasureExists = check(content, "activityUid", ActivityData)
+                    let treasureExists = check(content, "treasureUid", TreasureData)
                     if (treasureExists.success) {
-                        if (treasureData[treasureUid].state != "Pending"
-                        && treasureData[treasureUid].creator == content.uid) {
+                        if (TreasureData[content.treasureUid].state != "Pending"
+                        || TreasureData[content.treasureUid].creator != content.uid) {
                             return {
                                 success: false,
                                 why: "You cannot edit already accepted or refused treasure request, or request form other people"
                             }
                         } else {
-                            treasureUid = content.prankUid;
+                            treasureUid = content.treasureUid;
                         }
                     } else {
                         return treasureExists;
@@ -473,15 +578,29 @@ fastify.post('/sendTreasure', async (request, reply) => {
                 if (activityExists.success) {
                     if (ActivityData[content.activityUid].type == "treasure") {
                         let imageUid = makeid(128);
-                        fs.writeFileSync("static/images/"+imageUid, content.image);
+                        let fileImage = `
+                            <!DOCTYPE html>
+                            <html>
+                                <body>
+                                    <img style='object-fit: contain; width:100%; height:100%;' src='${content.image}'/>
+                                </body>
+                            </html>
+                        `
+                        fs.writeFileSync("static/images/" + imageUid + ".html", fileImage);
                         TreasureData[treasureUid] = {
+                            date: new Date(),
                             creator: content.uid,
                             image: imageUid,
                             desc: content.desc,
-                            activity: content.activityUid,
+                            activityUid: content.activityUid,
                             state: "Pending"
                         }
                         saveData(treasurePath, TreasureData);
+                        return {
+                            success: true,
+                            uid: treasureUid,
+                            treasure: TreasureData[treasureUid]
+                        }
                     } else {
                         return {
                             success: false,
@@ -538,7 +657,7 @@ fastify.post('/acceptTreasure', async (request, reply) => {
     if (treasureExists.success) {
         TreasureData[content.treasureUid].state = "Accepted";
         saveData(treasurePath, TreasureData);
-        ActivityData[GoldenUsers[activityUid].activityUid].treasureState = "Accepted";
+        ActivityData[TreasureData[content.treasureUid].activityUid].treasureState = "Accepted";
         saveData(activityPath, ActivityData);
         GoldenUsers[TreasureData[content.treasureUid].activityUid] = {
             userUid: TreasureData[content.treasureUid].creator,
@@ -581,7 +700,7 @@ fastify.post('/isGolden', async (request, reply) => {
             }
         }
         return {
-            sucess: false
+            success: false
         }
     } else {
         return auth
@@ -592,24 +711,6 @@ function saveData(path, data) {
   fs.writeFileSync(path, JSON.stringify(data));
 }
 
-function authenticate(user, pwd) {
-    return new Promise((resolve, reject) => {
-        LDAP.authenticate(user, pwd, function(err, user) {
-            if (user && err == null) {
-                resolve({
-                    authState: true,
-                    authUser: user
-                });
-            } else {
-                resolve({
-                    authState: false,
-                    authUser: null
-                });
-            }
-        });
-    })
-}
-
 function checkAuthetification(content) {
     if (content.hasOwnProperty("uid")
     && content.hasOwnProperty("token")) {
@@ -684,6 +785,9 @@ function checkManage(content, input, data) {
 }
 
 function initFs() {
+    if (!fs.existsSync(usersBdd)) {
+        fs.writeFileSync(usersBdd, "{}");
+    }
     if (!fs.existsSync(prankPath)) {
         fs.writeFileSync(prankPath, "{}");
     }
@@ -696,6 +800,12 @@ function initFs() {
     if (!fs.existsSync(goldenUsersPath)) {
         fs.writeFileSync(goldenUsersPath, "{}");
     }
+    if (!fs.existsSync(servicePath)) {
+        fs.writeFileSync(servicePath, JSON.stringify({state: 'closed'}));
+    }
+    if (!fs.existsSync("static/images")){
+        fs.mkdirSync("static/images");
+    }
 }
 
 function makeid(length) {

package.json

@@ -10,6 +10,7 @@
   "license": "ISC",
   "dependencies": {
     "@fastify/static": "^6.6.0",
+    "crypto-js": "^4.1.1",
     "fastify": "^4.10.2",
     "ldapauth-fork": "^5.0.5",
     "password-prompt": "^1.1.2"

static/css/main.css

@@ -2,30 +2,13 @@
 
 * {
     box-sizing: border-box;
-    z-index: 0;
 }
 
 body {
-    display: flex;
-    flex-direction: column;
     font-family: 'MODERN TYPEWRITER', sans-serif;
     font-size: medium;
     color: black;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    overflow: visible;
-}
-
-.bg-full {
-    position: fixed;
-    background: url('../img/spy-background.png');
-    background-size: cover;
-    width: 100%;
-    height: 100%;
-    left: 0px;
-    top: 0px;
-    z-index: -99;
+    margin: 0;
 }
 
 h1 {
@@ -34,36 +17,6 @@ h1 {
     margin-top: 0px;
 }
 
-.container {
-    position: absolute;
-    z-index: 0;
-    top: 0px;
-    margin: 5vh 0vh;
-    justify-content: center;
-    width: 90vw;
-    min-height: 100%;
-    border-radius: 2px;
-    border: none;
-    padding: 5vw;
-    background: url("../img/background-letter.jpg");
-    background-size: cover;
-    background-position-x: right;
-}
-
-.logo>img {
-    height: 220px;
-    margin-left: 3vw;
-}
-
-.row {
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-    justify-content: center;
-    align-items: stretch;
-    background-position: absolute;
-}
-
 hr {
     text-align: center;
     border: none;
@@ -76,9 +29,13 @@ hr::before {
     content: url('../img/divider.svg');
 }
 
+img {
+    max-width: 100%;
+    height: auto
+}
 
 p {
-    
+
     font-weight: 300;
 }
 
@@ -87,93 +44,102 @@ a {
     color: #d75b00;
 }
 
-
 a:hover {
     text-decoration: underline;
     cursor: pointer;
 }
 
-.prank-button {
-    text-align: center;
-    font-size: 2.5vw;
-    margin-top: 30px;
-}
-
-img {
-    max-width: 100%;
-    height: auto;
-}
-
-.prank-button a .underline{
-    position: relative;
-    max-width: 100%;
-    top: -30px;
-}
-
-.prank-button a {
-    color: black;
-    position: relative;
-    padding: 20px 10px;
-    width: 100%;
-
-}
-
-.prank-button a:hover {
-    text-decoration: none;
-}
-
-.hover-circle {
+#wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
     position: absolute;
-    z-index: 10;
-    top: 2px;
-    left: 0px;
-    height: 100%;
     width: 100%;
-    display: none;
+    height: 100%;
+    background: url('../img/spy-background.png');
+    background-size: cover;
+    overflow: scroll;
 }
 
-.banner {
-    padding: 3vw;
+.container {
     display: flex;
     flex-direction: column;
-    align-items: left;
+    position: absolute;
+    top: 40px;
+    width: calc(100% - 10vw);
+    height: auto;
+    padding: 4vw;
+    border-radius: 2px;
+    background: url("../img/background-letter.jpg");
+    background-size: cover;
+    background-position: right;
+    overflow: scroll;
+    transition: 1s transform 0s ease-out;
 }
 
-
-.col {
+#logo {
     display: flex;
-    flex-direction: column;
-    align-items: left;
-    padding: 20px;
-    margin: 50px 0px;
-    width: 50%;
-    justify-content: top;
+    justify-content: center;
+    height: 220px;
+}
+#logo > img {
+    width: 220px;
 }
 
-.col-left {
-    border-right: 1px solid black;
-    padding-right: 5vw;
-}
-
-.col-right {
-    padding-left: 5vw;
-}
-
-.activite-temps {
+#timer {
     font-size: 40px;
     color: red;
     text-align: center;
 }
 
+.spacer {
+    padding: 1px;
+    margin: 30px 0 30px 0;
+    background-color: #00000054;
+}
 
-form {
-    margin-top: 25vh;
-    margin-bottom: 10vh;
+.row-section {
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: 1fr 0fr 1fr;
+}
+
+.column-section {
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 1;
+    flex-basis: fit-content;
+    padding: 2vw
+}
+
+#prank-button {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 30px 0 30px 0;
+    background: none;
+}
+#prank-button > span {
+    font-size: 25px;
+}
+#prank-button:hover{
+    text-decoration: none;
+    background: url("../img/circle-hand.png");
+    background-size: 100% 100%;
+}
+
+#underline {
+    width: 350px;
+    height: 25px;
+}
+
+#login-form {
     padding: 0px;
     width: 50vw;
-    display: flex;
-    align-items: center;
-    flex-direction: column;
+}
+
+.away {
+    transform: translate(-200vw, -100vh) rotate(-10deg);
 }
 
 .form-group {
@@ -181,7 +147,7 @@ form {
     width: 100%;
 }
 
-input {
+.form-control {
     width: 100%;
     border: none;
     border-bottom: 1px solid #d75b00;
@@ -190,7 +156,7 @@ input {
     padding: 5px;
 }
 
-input:focus {
+.form-control:focus {
     outline: none;
     border-bottom: 2px solid #923e01;
 }
@@ -214,6 +180,144 @@ button[type="submit"]:hover {
     color: #ffffff;
 }
 
+.admin-textarea, .admin-input-date, #activityType {
+    background: none;
+    border: none;
+    border-bottom: 1px solid orange;
+    margin: 5px 0px;
+    font-size: 15px;
+    height: 27px;
+    margin-left: 10px;
+}
+
+.activity, .prank, .treasure {
+    display: flex;
+    flex-direction: column;
+    margin: 30px 0;
+    border-bottom: 2px solid grey;
+    padding-bottom: 30px;
+}
+
+.activity>*, .prank>*, .treasure>* {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.activity-btn, .prank-btn, .treasure-btn {
+    display: flex;
+    flex-direction: row;
+}
+
+.activity-btn>*, .prank-btn>*, .treasure-btn>* {
+    margin-left: auto;
+    border: 1px solid orange;
+    padding: 10px;
+    border-radius: 5px;
+    background: #fa45;
+    cursor: pointer;
+}
+
+.activity-btn>*:hover, .prank-btn>*:hover, .treasure-btn>*:hover {
+    background-color: #faa5;
+}
+
+#admin-header {
+    display: flex;
+    flex-direction: row;
+}
+
+.admin-menu {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    border-right: 3px solid black;
+    height: 40px;
+    font-size: 30px;
+    cursor: pointer;
+}
+
+.admin-menu:hover {
+    background-color: #00000036;
+}
+
+.admin-menu:first-of-type {
+    border-left: 3px solid black;
+}
+
+.activity-uid, .prank-uid, .prank-date, .treasure-uid, .treasure-date, #activite-place {
+    color: #00000078;
+    margin-top: 5px;
+    font-size: 12px;
+}
+
+.prank-date, .treasure-date {
+    margin-left: 10px;
+}
+
+.treasure-image>a {
+    margin-left: 10px;
+}
+
+#error-message, #error-message-demande, #error-message-register {
+    color: red;
+}
+
+.treasure {
+    padding: 0 20px 20px 20px;
+}
+
+.treasure-submitted {
+    background-color: rgba(67, 67, 67, 0.296);
+}
+
+.treasure-accepted {
+    background-color: rgba(0, 255, 0, 0.46);
+}
+
+.treasure-refused {
+    background-color: rgba(255, 0, 0, 0.397);
+}
+
+.overlay {
+    z-index: 99;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: rgba(0, 0, 0, 0.7);
+    transition: opacity 500ms;
+    opacity: 0;
+    visibility: hidden;
+  }
+
+#treasure-popup {
+    margin: 70px auto;
+    padding: 20px;
+    background: #fff;
+    border-radius: 5px;
+    width: calc(100% - 10vw);
+    position: relative;
+    transition: all 5s ease-in-out;
+}
+
+.close {
+    position: absolute;
+    top: 20px;
+    right: 30px;
+    transition: all 200ms;
+    font-size: 30px;
+    font-weight: bold;
+    text-decoration: none;
+    color: #333;
+}
+.close:hover {
+    color: #d75b00;
+    text-decoration: none;
+}
+
 @media screen and (max-width: 800px) {
     .bg-full {
         display: none;
@@ -221,36 +325,31 @@ button[type="submit"]:hover {
     .container {
         margin: 0px;
         width: 100%;
+        height: 100%;
+        top: 0;
         border-radius: 0px;
         box-shadow: none;
+        padding: 2vw;
     }
-    body {
-        margin: 0px;
-    }
-    .logo>img {
+    #logo {
         height: 150px;
-        margin-left: calc(50% - 75px);
     }
-    .row {
+    #logo > img {
+        width: 150px;
+    }
+    .spacer {
+        display: none;
+    }
+    .row-section {
+        display: flex;
         flex-direction: column;
         width: 100%;
         align-items: center;
     }
-
-    .col {
-        width: 100%;
-        margin: 10px 0px;
-    }
-
-    .col-left {
-        border: none;
-    }
-
     h1 {
         font-size: 40px;
     }
-
-    form {
-        width: 85vw;
+    #wrapper{
+        background: none;
     }
-}
+}

static/index.html

@@ -31,65 +31,70 @@
         <meta name="theme-color" content="#ff6600">
     </head>
     <body>
-        <div class="bg-full"></div>
-        <div class="container">
-            <div id="main-page" style="display: none;">
-                <div class="logo"><img src="img/scep_gobelet.png" alt="logo du bde"></div>
-                <div class="row banner">
-                    <h1>Prochaine activité</h1>
-                    <span class="activite-temps" id="timer">00:00:10</span>
-                    <p id="activite-desc">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dicta tenetur tempora similique. A id esse expedita atque dolor eum itaque fugiat enim nisi dicta. Architecto mollitia quasi sed voluptatibus? Veniam.</p>
+        <div id="wrapper">
+            <div id="main-page" class="container">
+                <div id="logo">
+                    <img src="img/scep_gobelet.png" alt="logo du bde"/>
+                </div>
+                <div class="column-section">
+                    <h1>Prochaine activité</h1>
+                    <span id="timer">2 jours 00:00:10</span>
+                    <h2 id="activite-title"></h2>
+                    <p id="activite-desc"></p>
+                    <p id="activite-place"></p>
                 </div>
-
                 <hr/>
-
-                <div class="row">
-                    <div class="col col-left">
-                        <h1>Planning des activité</h1>
-                        <img src="img/schedule.png" class="schedule" alt="Planning des activité" srcset="">
+                <div class="row-section">
+                    <div class="column-section">
+                        <h1>Planning des activités</h1>
+                        <img src="img/schedule.png" id="schedule" alt="Planning des activité" srcset="">
                     </div>
-                    <div class="col col-right">
+                    <div class="sapcer column-section"></div>
+                    <div class="column-section">
                         <h1>Ordre de mission</h1>
-                        <div class="prank-button">
-                            <a id="prank-button">
-                                <span>Demander une mission !</span>
-                                <img src="img/circle-hand.png" class="hover-circle"/>
-                            </a>
-                            <img src="img/underline-red.png" class="underline"/>
-                        </div>
+                        <a id="prank-button">
+                            <span>Demander une mission !</span>
+                            <img src="img/underline-red.png" id="underline"/>
+                        </a>
                         <p id="prank-desc">
                             OSS 110'Metz est une organisation remplie d'espions qualifiés pour remplir presque toutes tes demandes !
-                            Cliquez sur le bouton ci-dessus puis suivez les instructions. Attention, un compte <a href="https://re2o.rezo-rm.fr/users/new_user" target="_blank">Rezo</a> 
-                            est nécessaire afin de garantir l'identité des demandeurs !
+                            Cliquez sur le bouton ci-dessus puis suivez les instructions.
                         </p>
                     </div>
                 </div>
-
                 <hr/>
-
-                <div class="row banner">
+                <div class="column-section">
                     <h1>Chasse au trésor</h1>
                     <p id="chasse-desc">
-                        Chaque jour de la semaine tes espions préférés ont préparé pour toi une <i style="font-weight: 900;">chasse au trésor</i> !
+                        Pendante toute la semaine tes espions préférés ont préparé pour toi une <i style="font-weight: 900;">chasse au trésor</i> !
                         Résous les énigmes pour tenter de gagner le fameux <u>ticket d'or</u>. Il te permettra de t'abrever gratuitement pendants les évènements festifs !
                     </p>
                 </div>
-
                 <hr/>
-
-                <div class="row banner">
+                <div class="column-section">
                     <h1>À propos de nous !</h1>
                     <img src="img/team.jpeg" alt="la liste du bde de 2025" />
                 </div>
-            </div> <!-- end main page -->
+                <footer class="column-section">
+                    Copyright © OSS 110'Metz
+                </footer>
+            </div>
 
-            <div id="admin-page" style="display: none">
-                
+            <div id="admin-page" class="container" style="display: none">
+                <div id="admin-header">
+                    <div id="admin-prank" class="admin-menu">Prank</div>
+                    <div id="admin-treasure" class="admin-menu">Trésors</div>
+                    <div id="admin-activity" class="admin-menu">Activités</div>
+                </div>
+                <div id="admin-content">
+
+                </div>
             </div> <!-- end admin page -->
 
-            <div id="login-page" style="display: block;">
-                <div class="row">
-                    <form id="login-form" method="POST">
+            <div class="container" id="login-page" style="display: none;">
+                <p>Connection</p>
+                <div class="column-section">
+                    <div id="login-form">
                         <div class="form-group">
                             <input type="text" class="form-control" placeholder="Nom d'espion" name="login" id="login"/>
                         </div>
@@ -97,27 +102,115 @@
                             <input type="password" class="form-control" placeholder="Mot de passe secret" name="password" id="password" />
                         </div>
                         <div class="form-group">
-                            <button type="submit" class="btn btn-primary">Se connecter</button>
+                            <button type="submit" class="btn btn-primary" id="login-button">Se connecter</button>
                         </div>
-                    </form>
+                        <div class="form-group">
+                            <p id="error-message"></p>
+                        </div>
+                    </div>
+                </div>
+                <p>Inscription</p>
+                <div class="column-section">
+                    <div id="register-form">
+                        <div class="form-group">
+                            <input type="text" class="form-control" placeholder="Nom d'espion" name="login" id="register-user"/>
+                        </div>
+                        <div class="form-group">
+                            <input type="password" class="form-control" placeholder="Mot de passe secret" name="password" id="register-password" />
+                        </div>
+                        <div class="form-group">
+                            <input type="password" class="form-control" placeholder="Confirmer le mot de passe secret" name="password" id="register-password-confirm" />
+                        </div>
+                        <div class="form-group">
+                            <button type="submit" class="btn btn-primary" id="register-button">S'inscrire</button>
+                        </div>
+                        <div class="form-group">
+                            <p id="error-message-register"></p>
+                        </div>
+                    </div>
                 </div>
                 <hr/>
                 <div class="row banner">
-                    <h2>Notice de l'espion</h2>
+                    <h2>Notice pour l'espion</h2>
                     <p id="notice-espion">
-                        Seul les espions reconnus par le Rézo pourrons se connecter pour jouer des tours à leurs camarrades.
-                        Si tu n'es pas encore un espion reconnu, tu peux le devenir <a href="https://re2o.rezo-rm.fr/users/new_user" target="_blank">ici</a>.
+                        Vous êtes espions et devez savoir retenir des mots de passe, car pour des raisons de sécurité celui-ci ne peut pas être changé. Alors faite attention !
                     </p>
                 </div>
             </div> <!-- end login page -->
 
-            <div id="demande-page" style="display: none">
+            <div id="demande-page" class="container" style="display: none">
+                <div class="column-section">
+                    <h1>Demandes</h1>
+                    <p>Ici vous pouvez demandez à un espion aguerri de vous livrer des crêpes. Aussi, vous pouvez tentez de valider la chasse au trésor du jour !
+                        Pour cela il suffit d'envoyer une photo du ticket avec l'endroit où vous l'avez trouvé.
+                    </p>
+                </div>
+                <hr/>
+                <div class="row-section">
+                    <div class="column-section" id="demande-form">
+                        <h2>Crêpes</h2>
+                        <div class="form-group">
+                            <input type="text" class="form-control" placeholder="Lieu de livraison" id="demande-where">
+                        </div>
+                        <div class="form-group">
+                            <input type="number" class="form-control" placeholder="Quantité" max="9" id="demande-amount">
+                        </div>
+                        <div class="form-group">
+                            <select class="form-control" id="demande-supp">
+                                <option value="nature">Nature</option>
+                                <option value="sucre">Sucre</option>
+                                <option value="nutella">Nutella</option>
+                                <option value="confiture">Confiture</option>
+                            </select>
+                        </div>
+                        <div class="form-group">
+                            <textarea class="form-control" placeholder="Notes" id="demande-notes" ></textarea>
+                        </div>
+                        <div class="form-group">
+                            <button type="submit" class="btn btn-primary" id="demande-button">Envoyer</button>
+                        </div>
+                        <div class="form-group">
+                            <p id="error-message-demande"></p>
+                        </div>
+                    </div>
+                </div>
+                <hr/>
 
+                <div class="column-section">
+                    <h2>Chasse au trésor</h2>
+                    <p>Retrouve ici toutes les énigmes. Celles en vert sont déjà resolues alors dépéchez vous de résoudre les autres !</p>
+                    <div class="column-section" id="treasure-list">
+                    
+                    </div>
+                </div>
+
+                <hr/>
+                <div class="column-section">
+                    <h1>Vos demandes en cours</h1>
+                    <div class="column-section" id="demande-list"></div>
+                </div>
             </div> <!-- end demande page -->
+        </div>
 
-            <footer class="row">
-                Copyright © OSS 110'Metz
-            </footer>
+        <div class="overlay">
+            <div id="treasure-popup">
+                <div class="column-section">
+                    <h2>Soumettre la résolution d'une énigme !</h2>
+                    <a class="close" href="#">&times;</a>
+                    <p id="treasure-popup-title"></p>
+                    <input type="hidden" id="treasure-popup-uid">
+                    <input type="hidden" id="treasure-popup-activity-uid">
+                    <div class="form-group">
+                        <input class="form-control" type="file" id="treasure-popup-image" >
+                    </div>
+                    <div class="form-group">
+                        <textarea class="form-control"  id="treasure-popup-desc" placeholder="Ajouter une description"></textarea>
+                    </div>
+                    <div class="form-group">
+                        <button type="submit" class="btn btn-primary" id="treasure-popup-button">Envoyer</button>
+                    </div>
+                </div>
+            </div>
         </div>
 
         <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>

static/js/anim.js

@@ -1,4 +1,4 @@
-var $animation_elements = $("#prank-desc, #activite-desc, #chasse-desc, #notice-espion");
+var $animation_elements = $("#prank-desc, #chasse-desc, #notice-espion");
 var $window = $(window)
 
 function check_if_in_view() {
@@ -18,12 +18,11 @@ function check_if_in_view() {
             if(!$element.hasClass('animated')) {
                 $element.addClass('animated');
                 var a = new TypeIt('#' + $element.attr('id'), {
-                    speed: 30,
+                    speed: 50,
                     lifeLike: true,
                 })
                 .go();
                 $element.click(function () {
-                    a.
                     a.options({speed: 20, lifeLike: false});
                 });
             }
@@ -31,6 +30,12 @@ function check_if_in_view() {
     });
   }
 
+
+$(window).on("scroll resize", check_if_in_view);
+$(window).trigger("scroll");
+
+$("#prank-button").hover(function () { $('.hover-circle').fadeIn(100) }, function(){ $('.hover-circle').fadeOut(100) });
+
 $(window).on("load", function() {
 
     /*let type = new TypeIt("#typed-data", {
@@ -43,8 +48,5 @@ $(window).on("load", function() {
     $(document).on("click", function() {
         type.options({speed: 1});
     });*/
-    $(window).on("scroll resize", check_if_in_view);
-    $(window).trigger("scroll");
-
-    $("#prank-button").hover(function () { $('.hover-circle').fadeIn(100) }, function(){ $('.hover-circle').fadeOut(100) });
+    
 });

static/manifest.json

@@ -35,6 +35,6 @@
     "lang": "fr-FR",
     "start_url": "/",
     "display": "standalone",
-    "background_color": "black",
-    "theme_color": "black"
+    "background_color": "white",
+    "theme_color": "white"
 }

stats.js

@@ -0,0 +1,29 @@
+const fs = require('fs');
+let PrankData = JSON.parse(fs.readFileSync("prankdata.txt"));
+
+let nbPrank = 0;
+let nbCrepe = 0;
+let meanCrepe = 0;
+let userPrank = {};
+
+for (var uid in PrankData) {
+    if (PrankData[uid].type == "crêpe") {
+        if (PrankData[uid].state == "Done") {
+            nbPrank ++;
+            nbCrepe += parseInt(PrankData[uid].amount)
+            if (!userPrank[PrankData[uid].creator]) {
+                userPrank[PrankData[uid].creator] = 0;
+            }
+            userPrank[PrankData[uid].creator] += parseInt(PrankData[uid].amount);
+        }
+    }
+}
+
+meanCrepe = nbCrepe / nbPrank;
+
+console.log("Nombre de mission mission achevé: " + nbPrank)
+console.log("Nombre de crêpe servis: " + nbCrepe)
+console.log("Nombre moyen de crêpe par demande: " + meanCrepe + "\n")
+for (var user in userPrank) {
+    console.log(user + " a commandé " + userPrank[user] + " crêpe")
+}