134 lines
3.9 KiB
CSS
134 lines
3.9 KiB
CSS
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 */
|
|
|
|
|
|
} |