Sauvegarde initiale de l'application

static/css/supervise.css

@@ -0,0 +1,106 @@
+/* Réinitialisation de base */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html, body {
+    height: 100%;
+    width: 100%;
+    font-family: Arial, sans-serif;
+    background-color: #f4f4f4;
+}
+
+/* Conteneur principal */
+#container {
+    display: flex;
+    flex-direction: row;
+    height: 100vh; /* Vue entière */
+    gap: 10px; /* Espacement entre les sections */
+    padding: 10px;
+}
+
+/* Section principale (à gauche) */
+.large-section {
+    flex: 2; /* Prend plus d'espace */
+    background-color: #ccc;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5rem;
+    border-radius: 5px;
+}
+
+/* Conteneur pour les sections de droite */
+.section-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 10px; /* Espacement vertical */
+}
+
+/* Petites sections (à droite) */
+.small-section {
+    flex: 1;
+    background-color: #aaa;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.2rem;
+    border-radius: 5px;
+}
+
+/* Responsivité : Pour les tablettes */
+@media (max-width: 1024px) {
+    #container {
+        flex-direction: column; /* Colonne pour iPad portrait */
+    }
+    .large-section {
+        flex: 1;
+    }
+    .section-container {
+        flex: 1;
+    }
+}
+
+#section-top-right h2,
+#section-top-right p {
+    margin: 5px 0;
+    text-align: center;
+}
+
+#user-avatar {
+    display: block;
+    margin: 10px auto;
+    border: 2px solid #333;
+}
+/* Section 2 - Organisation en colonne */
+#section-top-right {
+    display: flex;           /* Active le flexbox */
+    flex-direction: column;  /* Aligne les éléments en colonne */
+    align-items: center;     /* Centre les éléments horizontalement */
+    justify-content: center; /* Centre les éléments verticalement */
+    gap: 10px;               /* Espacement entre les éléments */
+    font-size: 14px;         /* Taille identique pour tous les caractères */
+    text-align: left;        /* Alignement du texte */
+    padding: 10px;
+}
+
+#section-top-right h2,
+#section-top-right p {
+    margin: 0;               /* Enlève les marges par défaut */
+    font-size: 14px;         /* Taille identique */
+}
+
+#user-avatar {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;      /* Avatar en forme de cercle */
+    object-fit: cover;
+    border: 2px solid #333;  /* Bordure autour de l'avatar */
+}
+#map {
+    width: 100%;
+    height: 100%;
+}