Sauvegarde initiale de l'application
This commit is contained in:
BIN
static/css/img/fond.jpg
Normal file
BIN
static/css/img/fond.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
134
static/css/style.css
Normal file
134
static/css/style.css
Normal file
@@ -0,0 +1,134 @@
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
/* Fond d'écran */
|
||||
background: url('img/fond.jpg') no-repeat center center;
|
||||
background-size: cover; /* Adapte l'image à la taille de l'écran */
|
||||
}
|
||||
#content0 {
|
||||
position: fixed; /* Fixe le conteneur en haut de la page */
|
||||
top: 0; /* Place l'élément tout en haut */
|
||||
margin: 0; /* Supprime les marges par défaut */
|
||||
right: 0; /* Aligne à gauche */
|
||||
width: 50%; /* Prend toute la largeur */
|
||||
background: rgba(255, 255, 255, 0.8); /* Fond semi-transparent pour un effet header */
|
||||
padding: 10px 10px; /* Espacement intérieur */
|
||||
border-radius: 15px; /* Arrondit les angles */
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Ajoute une légère ombre */
|
||||
text-align: center; /* Centrage du texte */
|
||||
border-bottom: 2px solid rgba(0, 0, 0, 0.1); /* Légère bordure en bas */
|
||||
z-index: 1000; /* Assure que le header est au-dessus des autres éléments */
|
||||
|
||||
}
|
||||
|
||||
#content {
|
||||
position: relative; /* Nécessaire pour positionner des éléments enfants absolument */
|
||||
background: rgba(255, 255, 255, 0.8); /* Fond semi-transparent */
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
#position {
|
||||
font-size: 1.2em;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#distance {
|
||||
margin-top: 10px;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
/* Style des flèches */
|
||||
.arrow {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: none; /* Masqué par défaut */
|
||||
}
|
||||
|
||||
#arrow-approaching {
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
#arrow-moving-away {
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
/* Style de Avatar */
|
||||
#avatar {
|
||||
position: absolute;
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
background-color: rgba(27, 28, 29, 0.6); /* Couleur de remplissage interne */
|
||||
border-radius: 50%; /* Pour arrondir l'intérieur */
|
||||
box-shadow: 0 0 20px 10px rgba(27, 28, 29, 0.6); /* Halo par défaut */
|
||||
transition: all 0.5s ease-in-out; /* Transition douce pour les changements */
|
||||
}
|
||||
/* Conteneur de la flèche */
|
||||
#arrow-container {
|
||||
position: relative;
|
||||
width: 100px; /* Taille de la boîte de la flèche */
|
||||
height: 100px;
|
||||
margin: 20px auto; /* Centre horizontalement dans le div #content */
|
||||
}
|
||||
|
||||
/* Flèche noire */
|
||||
#arrow-black {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform-origin: center center; /* Centre de rotation */
|
||||
transform: rotate(0deg); /* Rotation initiale */
|
||||
transition: transform 0.1s linear; /* Animation fluide pour les rotations */
|
||||
}
|
||||
#user-avatar {
|
||||
position: absolute; /* Permet de positionner avec left et top */
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%; /* Cercle */
|
||||
object-fit: cover; /* Ajuste l'image */
|
||||
transition: left 0.2s ease, top 0.2s ease; /* Animation fluide */
|
||||
}
|
||||
|
||||
[data-debug="true"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#user-name {
|
||||
font-weight: bold; /* Rend le texte en gras */
|
||||
margin: 0; /* Supprime les marges par défaut */
|
||||
}
|
||||
|
||||
#challenge-number , #distance {
|
||||
margin: 0; /* Supprime les marges par défaut */
|
||||
}
|
||||
|
||||
#arrow-approaching, #arrow-moving-away {
|
||||
position: fixed; /* Fixe le conteneur en haut de la page */
|
||||
bottom: 0; /* Place l'élément tout en haut */
|
||||
margin: 0; /* Supprime les marges par défaut */
|
||||
left: 0; /* Aligne à gauche */
|
||||
width: 25%; /* Prend toute la largeur */
|
||||
background: rgba(255, 255, 255, 0.8); /* Fond semi-transparent pour un effet header */
|
||||
padding: 10px 10px; /* Espacement intérieur */
|
||||
border-radius: 15px; /* Arrondit les angles */
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Ajoute une légère ombre */
|
||||
text-align: center; /* Centrage du texte */
|
||||
border-bottom: 2px solid rgba(0, 0, 0, 0.1); /* Légère bordure en bas */
|
||||
z-index: 1000; /* Assure que le header est au-dessus des autres éléments */
|
||||
|
||||
|
||||
}
|
||||
106
static/css/supervise.css
Normal file
106
static/css/supervise.css
Normal file
@@ -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%;
|
||||
}
|
||||
Reference in New Issue
Block a user