Style almost finished

static/css/main.css

@@ -27,7 +27,7 @@ body {
 }
 
 h1 {
-    font-size: 50px;
+    font-size: 60px;
     font-weight: 900;
     margin-top: 0px;
 }
@@ -83,6 +83,55 @@ hr::before {
     content: url('../img/divider.svg');
 }
 
+p {
+    font-size: 1.5vw;
+    font-weight: 300;
+}
+
+a {
+    text-decoration: none;
+    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;
+}
+
+.prank-button a:hover {
+    text-decoration: none;
+}
+
+.prank-button a:hover:after {
+    content: url("../img/circle-hand.png");
+    position: absolute;
+    z-index: 5;
+    top: 660px;
+    left: 410px;
+    transform: scale(0.5);
+}
+
 .banner {
     padding: 3vw;
     display: flex;
@@ -97,8 +146,8 @@ hr::before {
     align-items: left;
     padding: 20px;
     margin: 50px 0px;
-    width: 100%;
-    justify-content: center;
+    width: 50%;
+    justify-content: top;
 }
 
 .col-left {
@@ -110,6 +159,25 @@ hr::before {
     padding-left: 5vw;
 }
 
+@media screen and (max-width: 600px) {
+    .row {
+        flex-direction: column;        
+    }
+
+    .col {
+        width: 100%;
+        margin: 10px 0px;
+    }
+
+    .col-left {
+        border: none;
+    }
+
+    h1 {
+        font-size: 40px;
+    }
+}
+
 .activite-temps {
     font-size: 40px;
     color: red;

static/index.html

@@ -21,7 +21,7 @@
             <div id="typed-data">
                 <div class="row banner">
                     <h1>Prochaine activité</h1>
-                    <span class="activite-temps" id="timer">02:00:00</span>
+                    <span class="activite-temps" id="timer">00:00:10</span>
                     <p class="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>
 
@@ -29,12 +29,22 @@
 
                 <div class="row">
                     <div class="col col-left">
-                        <h2>Planning des activité</h2>
-                        <img src="img/schedule.jpg" alt="Planning des activité" srcset="">
+                        <h1>Planning des activité</h1>
+                        <img src="img/schedule.png" class="schedule" alt="Planning des activité" srcset="">
                     </div>
                     <div class="col col-right">
-                        <button class="prank-button" id="prank-button">Pranker quelqu'un !</button>
-                        <p class="prank-desc">Appuyer pour pranker quelqu'un</p>
+                        <h1>Ordre de mission</h1>
+                        <div class="prank-button">
+                            <a id="prank-button">
+                                Demander une mission !
+                                <img src="img/underline-red.png" class="underline"/>
+                            </a>
+                        </div>
+                        <p id="prank-desc">
+                            OSS 110'Metz est une organisation rempli d'espions qualifiés pour remplir presque toutes vos demandes !
+                            Cliquez sur le bouton ci-dessus puis suivez les instructions. Attention, un compte <a href="https://re2o.rezo-rm.fr/users/new_user">Rezo</a> 
+                            est nécessaire afin de garantir l'identité des demandeurs !
+                        </p>
                     </div>
                 </div>
 
@@ -49,6 +59,7 @@
         
         <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
         <script src="https://unpkg.com/typeit@8.7.0/dist/index.umd.js"></script>
+        <script src="js/main.js" defer></script>
         <script src="js/anim.js" defer></script>
     </body>
 </html>

static/js/anim.js

@@ -1,10 +1,14 @@
 $(window).on("load", function() {
 
-    let type = new TypeIt("#typed-data", {
+    /*let type = new TypeIt("#typed-data", {
         speed: 10,
         startDelay: 0,
         cursor: true
     })
     .go();
 
+    $(document).on("click", function() {
+        type.options({speed: 1});
+    });*/
+
 });

static/js/main.js

@@ -0,0 +1,23 @@
+$(window).on("load", function() {
+
+    /* load timer */
+    window.setInterval(function() {
+        var time = $("#timer").text();
+        var t = time.split(":").map(t => parseInt(t));
+        t[2] -= 1;
+        if (t[2] < 0) {
+            t[2] = 59;
+            t[1] -= 1;
+        }
+        if (t[1] < 0) {
+            t[1] = 59;
+            t[0] -= 1;
+        }
+        if (t[0] < 0) {
+            t[0] = 0;
+            t[1] = 0;
+            t[2] = 0;
+        }
+        $("#timer").text(t.join(":"));
+    }, 1000);
+});