👌 ajout de la fonctionnalité de création d'évènement

Co-authored-by: Charpentier Juliette <juliette.charpentier1@etu.u-pec.fr>

styles/header.css

@@ -184,4 +184,56 @@ body {
   .menu li {
     padding: 0 20px;
   }
+
+  /* Style pour le menu principal */
+  .menu-container ul {
+    list-style-type: none;
+    padding: 0;
+  }
+
+  .menu-container li {
+    display: inline-block;
+    position: relative;
+    padding: 10px 15px;
+  }
+
+  .menu-container a {
+    text-decoration: none;
+    color: white; /* Assurez-vous que la couleur des liens est blanche */
+    display: block;
+  }
+
+  /* Styles pour le menu déroulant */
+  .dropdown-content {
+    display: none; /* Masque par défaut le contenu déroulant */
+    position: absolute;
+    background-color: #26272b; /* Même couleur que le container */
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Ombre pour le menu déroulant */
+    z-index: 100;
+    width: 200px; /* ou la largeur qui correspond le mieux à votre design */
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .dropdown-content a {
+    color: white;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+    white-space: nowrap; /* Garde les éléments de menu sur une seule ligne */
+  }
+
+  .dropdown:hover .dropdown-content {
+    display: block; /* Affiche le sous-menu au survol */
+    opacity: 1;
+    transition: opacity 0.5s ease; /* Transition douce pour l'opacité */
+  }
+  .dropdown-content {
+    opacity: 0; /* Initialement transparent */
+    transition: opacity 0.5s ease; /* Transition pour une apparition douce */
+  }
+
+  .dropdown:hover .dropdown-content {
+    opacity: 1; /* Pleine visibilité au survol */
+  }
 }

styles/main.css

@@ -96,34 +96,11 @@ p.login-subtitle {
   border-color: #007bff;
 }
 
-.remember-me {
-  display: flex;
-  align-items: center;
-}
-
-.remember-me input {
-  margin-right: 0.5rem;
-}
-
 .no-account {
   font-size: 0.8rem;
   margin-top: 0.25rem;
 }
 
-.forgot-password {
-  text-align: right;
-  font-size: 0.8rem;
-}
-
-.forgot-password a {
-  color: #007bff;
-  text-decoration: none;
-}
-
-.forgot-password a:hover {
-  text-decoration: underline;
-}
-
 .submit-button {
   width: 100%;
   padding: 0.75rem;
@@ -171,6 +148,15 @@ p.text {
   color: white;
   font-size: 1rem;
   padding-left: 2rem;
+  padding-right: 2rem;
+  font-family: "RobotoFlex";
+}
+
+a.text {
+  color: white;
+  font-size: 1rem;
+  padding-left: 2rem;
+  padding-right: 2rem;
   font-family: "RobotoFlex";
 }
 
@@ -250,3 +236,118 @@ td {
   margin-inline: auto;
   margin-block: 5em;
 }
+
+.event-create-container {
+  background: #26272b;
+  align-items: center;
+  opacity: 1;
+  padding: 3rem;
+  border-radius: 10px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
+  width: 100%;
+  text-align: center;
+  max-width: fit-content;
+  margin-inline: auto;
+  margin-block: 5em;
+}
+
+.checkbox-container {
+  display: flex;
+  justify-content: flex-start;
+  margin-top: 1rem;
+}
+
+/* Masquer les cases à cocher d'origine */
+input[type="checkbox"] {
+  opacity: 0;
+  position: absolute;
+}
+
+/* Styliser les labels */
+input[type="checkbox"] + label {
+  position: relative;
+  padding-left: 25px;
+  cursor: pointer;
+}
+
+/* Ajouter un élément personnalisé avant le label */
+input[type="checkbox"] + label::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 20px;
+  height: 20px;
+  border: 2px solid #555;
+  border-radius: 4px;
+}
+
+/* Changer l'apparence lorsque la case est cochée */
+input[type="checkbox"]:checked + label::before {
+  background-color: #007bff;
+  border-color: #007bff;
+}
+
+/* Optionnel : Ajouter un indicateur visuel pour la case cochée */
+input[type="checkbox"]:checked + label::after {
+  content: "✓";
+  position: absolute;
+  left: 3px;
+  top: -3px;
+  font-size: 17px;
+  color: white;
+}
+
+.form-group select {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid #121216;
+  border-radius: 5px;
+  background-color: #34353a;
+  color: #fffe;
+  transition: all 0.3s ease;
+  appearance: none; /* Pour supprimer le style par défaut */
+  -webkit-appearance: none; /* Pour Safari */
+  -moz-appearance: none; /* Pour Firefox */
+  background-image: url("https://cdn-icons-png.flaticon.com/16/8442/8442683.png"); /* Ajoutez votre icône personnalisée */
+  background-repeat: no-repeat;
+  background-position: right 0.5rem center; /* Ajustez selon la taille de votre padding */
+  background-size: 1.5rem; /* Ajustez selon la taille souhaitée pour l'icône */
+}
+
+/* Optionnel : Style pour les options */
+.form-group select option {
+  background-color: #34353a; /* Pour que le fond des options corresponde au select */
+  color: #fffe; /* Couleur du texte des options */
+}
+
+.event-create-container img {
+  width: 146px;
+  margin-bottom: 1rem;
+}
+
+.event-create-container h2 {
+  font-weight: 700;
+  color: white;
+}
+
+.event-create-container p {
+  margin-bottom: 1.5rem;
+  color: #8e8c8c;
+  size: 10px;
+}
+
+h2.event-create-title {
+  font-family: "RobotoFlex";
+}
+
+p.event-create-subtitle {
+  font-family: "RobotoFlex";
+  padding-left: 0;
+}
+
+button.new-event {
+  width: 25%;
+  margin: auto;
+}
+/* Styles pour le calendrier*/