Création de la carte timer dans le GameStatus

ui/src/components/CardTimer.vue

@@ -1,11 +1,14 @@
 <template>
     <div class="container">
-      <div class="timer">{{ formatTime }}</div>
-      <div class="buttons">
-        <button @click="startTimer" :disabled="timerActive">Start</button>
-        <button @click="pauseTimer" :disabled="!timerActive">Pause</button>
-        <button @click="resetTimer">Reset</button>
+      <div class="timer">
+        <v-label color="primary" class="labelTime-style" >{{ formatTime }}</v-label>
     </div>
+
+      <v-row no-gutters justify="space-around" >
+        <v-btn class="buttons" color="primary" icon="mdi-play" @click="startTimer"></v-btn>
+        <v-btn color="primary"  icon="mdi-pause" @click="pauseTimer"></v-btn>
+        <v-btn color="primary" icon="mdi-restart" @click="resetTimer"></v-btn>
+      </v-row>
     </div>
 </template>
   
@@ -64,24 +67,6 @@
   });
 </script>
     
-  <style>
-  .container {
-    text-align: center;
-    margin-top: 20px;
-  }
-  
-  .timer {
-    font-size: 2em;
-    margin-bottom: 20px;
-  }
-  
-  .buttons button {
-    margin: 0 10px;
-    padding: 10px 20px;
-    font-size: 1em;
-  }
-  </style>
-  
 <script>
     const startTimer = () => {
     if (!timerActive.value) {
@@ -107,3 +92,27 @@
     export { startTimer, pauseTimer, resetTimer };
 </script>
 
+<style>
+  .container {
+    text-align: center;
+    margin-top: auto; /* Place le container en bas de son parent */
+    margin-bottom: 1px; /* Marge en bas pour un espacement */
+    position: fixed; /* Le positionne de manière fixe */
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding: 20px;
+  }
+  .timer {
+    margin-bottom: 15px;
+  }
+  .labelTime-style {
+    font-size: 30px !important;
+    font-weight: 500;
+    color: #e91e1e !important;
+    opacity: 90% !important;
+  }
+  .buttons{
+    background-color: rgb(255, 255, 255);
+  }
+</style>