front

FencerJudgeFront/src/app/components/essentials/footer/footer.component.css

@@ -0,0 +1,21 @@
+
+.footer-gris {
+  background-color: #2c2c2c; /* Gris foncé personnalisé */
+}
+
+.flag-bar {
+  height: 6px;          /* épaisseur du trait */
+  width: 100%;          /* toute la largeur */
+  background: linear-gradient(
+    to right,
+    #0055a4 0%,        /* bleu */
+    #0055a4 33.33%,    /* 1/3 */
+    #fff 33.33%,       /* blanc */
+    #fff 66.66%,       /* 2/3 */
+    #ef4135 66.66%,    /* rouge */
+    #ef4135 100%
+  );
+  margin-bottom: 8px;
+  border-radius: 3px;   /* optionnel, pour arrondir les bords */
+  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}

FencerJudgeFront/src/app/components/essentials/footer/footer.component.html

@@ -1,4 +1,4 @@
-<footer class="bg-primary text-white py-3">
+<footer class="footer-gris text-white py-3">
   <div class="container">
     <div class="row align-items-center">
       <div class="col-md-4 d-flex align-items-center text-start">
@@ -54,5 +54,6 @@
       <a routerLink="/contact" class="text-white me-3">Nous contacter</a>
       <a routerLink="/blogs" class="text-white me-3">Presse</a>
     </div>
+    <div class="flag-bar" title="France"></div>
   </div>
 </footer>

FencerJudgeFront/src/app/components/essentials/header/header.component.css

@@ -0,0 +1,25 @@
+.navbar {
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+}
+
+.navbar-brand {
+  font-weight: 700;
+  font-size: 1.4rem;
+  display: flex;
+  align-items: center;
+}
+
+.navbar-brand img {
+  height: 30px;
+  margin-right: 0.5rem;
+}
+
+.nav-link {
+  transition: color 0.3s ease;
+}
+
+.nav-link:hover,
+.active-link {
+  color: #ffcc00 !important;
+  font-weight: 600;
+}

FencerJudgeFront/src/app/components/essentials/header/header.component.html

@@ -20,7 +20,7 @@
             [routerLinkActiveOptions]="{ exact: isHomeActiveBool() }"
             [class.active-link]="isHomeActive()"
           >
-            Match
+            Matchs
           </a>
         </li>
         <li

FencerJudgeFront/src/app/components/essentials/login/login.component.css

@@ -0,0 +1,101 @@
+body {
+  margin: 0;
+  font-family: 'Segoe UI', sans-serif;
+  background: linear-gradient(to bottom, #235d4f, #63b48c);
+  color: #fff;
+}
+
+.login-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  padding: 2rem;
+}
+
+.login-card {
+  background-color: #fff;
+  border-radius: 12px;
+  overflow: hidden;
+  width: 500px;
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
+  color: #333;
+}
+
+.login-header {
+  background: url('https://www.lejdd.fr/lmnr/var/jdd/public/media/image/2022/07/19/12/escrime-comment-les-francais-apprivoisent-leurs-armes.jpg?VersionId=Mw31AogdDUwVLuCaVdxMozm9kito7TTP') no-repeat center/cover;
+  text-align: center;
+  padding: 2rem 1rem;
+  color: white;
+}
+
+.login-header h2 {
+  margin-bottom: 0.5rem;
+}
+
+.login-header p {
+  font-size: 0.85rem;
+  line-height: 1.4;
+}
+
+.login-form {
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.login-form h3 {
+  text-align: center;
+  color: #235d4f;
+  margin-bottom: 1rem;
+}
+
+.input-group {
+  display: flex;
+  align-items: center;
+  background-color: #235d4f;
+  border-radius: 30px;
+  padding: 0.5rem 1rem;
+}
+
+.input-group .icon {
+  color: white;
+  margin-right: 0.5rem;
+}
+
+.input-group input {
+  border: none;
+  background: none;
+  color: white;
+  width: 100%;
+  font-size: 1rem;
+  outline: none;
+}
+
+.options {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.85rem;
+  color: #555;
+}
+
+.options a {
+  color: #235d4f;
+  text-decoration: none;
+}
+
+.login-btn {
+  background-color: #235d4f;
+  color: white;
+  padding: 0.6rem;
+  border: none;
+  border-radius: 6px;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.login-btn:hover {
+  background-color: #1b4b3d;
+}

FencerJudgeFront/src/app/components/essentials/login/login.component.html

@@ -1,18 +1,28 @@
-<form (ngSubmit)="onSubmit()">
+<div class="login-container">
-  <input
+  <div class="login-card">
-    type="email"
+    <div class="login-header">
-    [(ngModel)]="email"
+      <h2>Bienvenue sur le site</h2>
-    name="email"
+      <p>Suivez les matchs d'escrime en direct, de n'importe où !</p>
-    placeholder="Email"
+    </div>
-    required
+    <form (ngSubmit)="onSubmit()" class="login-form">
-  />
+      <h3>Connexion au compte</h3>
-  <input
+
-    type="password"
+      <div class="input-group">
-    [(ngModel)]="password"
+        <span class="icon">👤</span>
-    name="password"
+        <input type="email" name="email" [(ngModel)]="email" placeholder="Nom utilisateur" required />
-    placeholder="Mot de passe"
+      </div>
-    required
+
-  />
+      <div class="input-group">
-  <button type="submit">Connexion</button>
+        <span class="icon">🔒</span>
-  <div *ngIf="errorMessage">{{ errorMessage }}</div>
+        <input type="password" name="password" [(ngModel)]="password" placeholder="Mot de passe" required />
+      </div>
+
+      <div class="options">
+        <label><input type="checkbox" /> Se souvenir</label>
+        <a href="#">Mot de passe oublié ?</a>
+      </div>
+
+      <button type="submit" class="login-btn">Connexion</button>
     </form>
+  </div>
+</div>

FencerJudgeFront/src/app/components/home/home.component.html

@@ -1 +1 @@
-<p>home works!</p>
+<p>HELLO !</p>