Merge pull request 'shelby' (#18) from shelby into feature/all

Reviewed-on: #18

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

@@ -1,14 +1,17 @@
 .match-card {
     background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
-  border: 2px solid #daa520;
+    border: 2px solid var(--primary-color);
     padding: 24px;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
         inset 0 1px 0 rgba(255, 255, 255, 0.1);
     position: relative;
     overflow: hidden;
     transition: all 0.3s ease;
-  height: 80vh;
+    height: 90vh;
     width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
 }
 
 .match-card::before {
@@ -18,7 +21,7 @@
     left: 0;
     right: 0;
     height: 2px;
-  background: linear-gradient(90deg, #daa520, #ffd700, #daa520);
+    background: linear-gradient(90deg, #daa520, var(--primary-color), #daa520);
     background-size: 200% 100%;
     animation: gradientShift 15s ease infinite;
 }
@@ -70,12 +73,10 @@
     left: 0;
     width: 100%;
     height: 100%;
-  background: linear-gradient(
+    background: linear-gradient(135deg,
-    135deg,
             rgba(26, 26, 46, 0.85) 0%,
             rgba(0, 0, 0, 0.7) 50%,
-    rgba(22, 33, 62, 0.85) 100%
+            rgba(22, 33, 62, 0.85) 100%);
-  );
 }
 
 /* Header */
@@ -140,10 +141,12 @@
 }
 
 @keyframes pulse {
+
     0%,
     100% {
         opacity: 1;
     }
+
     50% {
         opacity: 0.5;
     }
@@ -261,14 +264,12 @@
 
 .combat-arena {
     margin-top: 24px;
-  background: linear-gradient(
+    background: linear-gradient(135deg,
-    135deg,
             rgba(220, 38, 38, 0.1) 0%,
             rgba(0, 0, 0, 0.8) 50%,
-    rgba(255, 215, 0, 0.1) 100%
+            rgba(255, 215, 0, 0.1) 100%);
-  );
     border: 2px solid;
-  border-image: linear-gradient(45deg, #dc2626, #ffd700, #dc2626) 1;
+    border-image: linear-gradient(45deg, #dc2626, var(--primary-color), #dc2626) 1;
     border-radius: 12px;
     padding: 20px;
     position: relative;
@@ -282,11 +283,9 @@
     left: -50%;
     width: 200%;
     height: 200%;
-  background: repeating-conic-gradient(
+    background: repeating-conic-gradient(from 0deg at 50% 50%,
-    from 0deg at 50% 50%,
             transparent 0deg 2deg,
-    rgba(220, 38, 38, 0.05) 2deg 4deg
+            rgba(220, 38, 38, 0.05) 2deg 4deg);
-  );
     animation: rotate 20s linear infinite;
     pointer-events: none;
 }
@@ -295,6 +294,7 @@
     0% {
         transform: rotate(0deg);
     }
+
     100% {
         transform: rotate(360deg);
     }
@@ -314,18 +314,19 @@
     font-family: "Orbitron", monospace;
     font-size: 16px;
     font-weight: 900;
-  color: #ffd700;
+    color: var(--primary-color);
     letter-spacing: 3px;
-  text-shadow: 0 0 10px #ffd700, 0 0 20px #ffd700, 0 0 30px #ffd700;
+    text-shadow: 0 0 10px var(--primary-color), 0 0 20px var(--primary-color), 0 0 30px var(--primary-color);
     animation: titleGlow 2s ease-in-out infinite alternate;
 }
 
 @keyframes titleGlow {
     from {
-    text-shadow: 0 0 10px #ffd700, 0 0 20px #ffd700, 0 0 30px #ffd700;
+        text-shadow: 0 0 10px var(--primary-color), 0 0 20px var(--primary-color), 0 0 30px var(--primary-color);
     }
+
     to {
-    text-shadow: 0 0 20px #ffd700, 0 0 30px #ffd700, 0 0 40px #ffd700;
+        text-shadow: 0 0 20px var(--primary-color), 0 0 30px var(--primary-color), 0 0 40px var(--primary-color);
     }
 }
 
@@ -352,10 +353,12 @@
 }
 
 @keyframes pulse-danger {
+
     0%,
     100% {
         transform: scale(1);
     }
+
     50% {
         transform: scale(1.2);
     }
@@ -366,6 +369,7 @@
         transform: scale(0.8);
         opacity: 0.8;
     }
+
     100% {
         transform: scale(2);
         opacity: 0;
@@ -384,13 +388,11 @@
     align-items: center;
     gap: 16px;
     padding: 16px;
-  background: linear-gradient(
+    background: linear-gradient(90deg,
-    90deg,
             rgba(0, 0, 0, 0.8) 0%,
             rgba(26, 26, 46, 0.9) 50%,
-    rgba(0, 0, 0, 0.8) 100%
+            rgba(0, 0, 0, 0.8) 100%);
-  );
+    border: 1px solid var(--primary-color);
-  border: 1px solid rgba(255, 215, 0, 0.3);
     border-radius: 8px;
     position: relative;
     transition: all 0.3s ease;
@@ -399,8 +401,8 @@
 
 .combat-stat:hover {
     transform: translateX(8px);
-  border-color: #ffd700;
+    border-color: var(--primary-color);
-  box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3),
+    box-shadow: 0 4px 20px var(--primary-color),
         inset 0 1px 0 rgba(255, 215, 0, 0.1);
 }
 
@@ -429,9 +431,8 @@
     position: absolute;
     width: 35px;
     height: 35px;
-  background: linear-gradient(45deg, #ffd700, #ffed4a);
+    background: linear-gradient(45deg, var(--primary-color), #ffed4a);
-  clip-path: polygon(
+    clip-path: polygon(50% 0%,
-    50% 0%,
             61% 35%,
             98% 35%,
             68% 57%,
@@ -440,8 +441,7 @@
             21% 91%,
             32% 57%,
             2% 35%,
-    39% 35%
+            39% 35%);
-  );
     animation: badge-pulse 3s ease-in-out infinite;
 }
 
@@ -459,16 +459,19 @@
     0% {
         transform: rotate(0deg);
     }
+
     100% {
         transform: rotate(360deg);
     }
 }
 
 @keyframes badge-pulse {
+
     0%,
     100% {
         transform: scale(1) rotate(0deg);
     }
+
     50% {
         transform: scale(1.1) rotate(5deg);
     }
@@ -478,6 +481,7 @@
     0% {
         transform: rotate(0deg);
     }
+
     100% {
         transform: rotate(360deg);
     }
@@ -517,9 +521,11 @@
 .venue .stat-value {
     color: #10b981;
 }
+
 .referee .stat-value {
-  color: #ffd700;
+    color: var(--primary-color);
 }
+
 .timing .stat-value {
     color: #dc2626;
 }
@@ -543,9 +549,11 @@
 .venue-glow {
     box-shadow: inset 0 0 20px rgba(16, 185, 129, 0.2);
 }
+
 .referee-glow {
     box-shadow: inset 0 0 20px rgba(255, 215, 0, 0.2);
 }
+
 .timing-glow {
     box-shadow: inset 0 0 20px rgba(220, 38, 38, 0.2);
 }
@@ -567,7 +575,36 @@
     }
 }
 
-.weapons-container {
+/* Section Weapons */
+.section-header {
+    text-align: center;
+    margin-bottom: 3rem;
+    position: relative;
+}
+
+.section-title {
+    font-size: 2.5rem;
+    font-weight: 300;
+    letter-spacing: 2px;
+    color: #333;
+    margin: 0;
+    position: relative;
+    display: inline-block;
+}
+
+.section-title::after {
+    content: '';
+    position: absolute;
+    bottom: -10px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 60px;
+    height: 2px;
+    background: var(--gradient-color);
+}
+
+.weapons-container,
+.diplomes-container {
     display: flex;
     flex-wrap: wrap;
     gap: 20px;
@@ -575,53 +612,127 @@
     padding: 20px;
 }
 
-.weapon-card {
+/* Card Weapon */
+.weapon-card,
+.diplomes-card {
     position: relative;
     background-size: cover;
     background-position: center;
     border-radius: 12px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-  max-width: 300px;
+    width: 400px;
-  height: 400px;
+    height: 500px;
     color: white;
     text-align: center;
     overflow: hidden;
     display: flex;
     flex-direction: column;
-  justify-content: flex-end;
     padding: 20px;
-  background-color: #000;
+    aspect-ratio: 16/9;
+    transition: box-shadow 0.3s ease;
+    /* Transition douce pour l'effet de lift */
 }
-.weapon-card::before {
+
+.weapon-card:hover,
+.diplomes-card:hover {
+    background-image: none !important;
+    box-shadow:
+        0 8px 25px rgba(0, 0, 0, 0.3),
+        0 0 20px rgba(212, 175, 55, 0.3),
+        inset 0 1px 0 rgba(255, 255, 255, 0.1);
+    transform: translateY(-2px);
+    /* Léger lift au hover */
+    border: 2px solid rgba(212, 175, 55, 0.6);
+}
+
+.weapon-card:before,
+.diplomes-card:before {
     content: '';
     position: absolute;
     inset: 0;
     background-image: inherit;
     background-size: cover;
     background-position: center;
-  filter: blur(10px) brightness(1.1); 
+    filter: blur(10px) brightness(1.1) contrast(1.1);
-  opacity: 0.7;
+    opacity: .6;
     z-index: 1;
+    transition: all .6s cubic-bezier(0.4, 0, 0.2, 1);
+    /* Courbe plus fluide */
 }
-.weapon-card * {
+
+.weapon-card:hover:before,
+.diplomes-card:hover:before {
+    transform: scale(1.2);
+    /* Zoom uniquement sur l'image */
+    filter: blur(8px) brightness(1.3);
+    /* Moins de blur + plus lumineux au hover */
+    opacity: .8;
+    /* Plus visible au hover */
+    background-image: none;
+}
+
+.weapon-card:hover:before,
+.diplomes-card:hover:before {
+    background:
+        var(--card-gradient);
+    animation: metalShine 2s ease-in-out infinite alternate;
+}
+
+@keyframes metalShine {
+    0% {
+        filter: brightness(1.1) contrast(1.2);
+    }
+
+    100% {
+        filter: brightness(1.3) contrast(1.4) saturate(1.1);
+    }
+}
+
+.weapon-card *,
+.diplomes-card * {
     position: relative;
     z-index: 2;
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
 }
 
-.weapon-card img {
-  width: 100%;
-  height: auto;
-  border-radius: 10px;
-  margin-bottom: 15px;
-}
-
-.weapon-card h2 {
-  margin-bottom: 10px;
-  font-size: 1.4em;
-}
-
 .weapon-card p {
     color: #ffffff;
     font-size: 0.95em;
 }
+
+.diplomes-card h2,
+.weapon-card h2 {
+    position: absolute;
+    opacity: 1;
+    transition: opacity 0.3s ease, transform 0.3s ease;
+    bottom: 50%;
+    left: 50%;
+    transform: translate(-50%, 50%);
+    /* Centrage parfait */
+    margin: auto 0;
+    text-transform: uppercase;
+    font-size: 1.4em;
+}
+
+.diplomes-card:hover h2,
+.weapon-card:hover h2 {
+    opacity: 0;
+    transform: translate(-50%, 30%);
+    /* Glisse vers le haut en disparaissant */
+}
+
+.diplomes-card p,
+.weapon-card p,
+.diplomes-card ul li {
+    text-align: start;
+    opacity: 0;
+    transform: translateY(-100%);
+    transition: opacity transform .6s ease-in-out;
+}
+
+.diplomes-card:hover p,
+.weapon-card:hover p,
+.diplomes-card:hover ul li {
+    opacity: 1;
+    transform: translateY(0);
+}

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

@@ -9,10 +9,7 @@
             <i class="sword-icon">⚔️</i>
             <span class="weapon-type">{{ latestMatch.weapon }}</span>
         </div>
-    <div
+        <div class="match-status" [ngClass]="'status-' + getMatchStateColor(latestMatch.state)">
-      class="match-status"
-      [ngClass]="'status-' + getMatchStateColor(latestMatch.state)"
-    >
             <span class="status-dot"></span>
             {{ getMatchStateLabel(latestMatch.state) }}
         </div>
@@ -68,18 +65,13 @@
                 </div>
                 <div class="stat-content">
                     <span class="stat-label">COMBAT JUDGE</span>
-          <span class="stat-value"
+                    <span class="stat-value">{{ referee?.name }} {{ referee?.firstName }}</span>
-            >{{ referee?.name }} {{ referee?.firstName }}</span
-          >
                     <span class="stat-sub">OFFICIAL REFEREE</span>
                 </div>
                 <div class="stat-glow referee-glow"></div>
             </div>
 
-      <div
+            <div class="combat-stat timing" *ngIf="latestMatch?.state === MatchState.NOT_STARTED">
-        class="combat-stat timing"
-        *ngIf="latestMatch?.state === MatchState.NOT_STARTED"
-      >
                 <div class="stat-icon">
                     <div class="time-ring"></div>
                     <span>⚡</span>
@@ -91,10 +83,7 @@
                 </div>
                 <div class="stat-glow timing-glow"></div>
             </div>
-      <div
+            <div class="combat-stat funfact" *ngIf="latestMatch?.state !== MatchState.NOT_STARTED">
-        class="combat-stat funfact"
-        *ngIf="latestMatch?.state !== MatchState.NOT_STARTED"
-      >
                 <div class="stat-icon">
                     <span>🎯</span>
                 </div>
@@ -110,6 +99,12 @@
         </div>
     </div>
 </div>
+
+<section class="weapons-section">
+    <div class="section-header">
+        <h2 class="section-title">Les Armes</h2>
+    </div>
+
     <div class="weapons-container">
         <div class="weapon-card" style="background-image: url('./assets/epee_escrime.jpg');">
             <h2>Épée</h2>
@@ -128,10 +123,99 @@
 
         <div class="weapon-card" style="background-image: url('./assets/sabre_laser_escrime.jpg');">
             <h2>Sabre Laser</h2>
-  <p>Arme moderne d’escrime sportive, inspirée de la science-fiction. Lame lumineuse, règles proches du sabre classique. Discipline visuelle et dynamique.</p>
+            <p>Arme moderne d’escrime sportive, inspirée de la science-fiction. Lame lumineuse, règles proches du sabre
+                classique. Discipline visuelle et dynamique.</p>
         </div>
 
     </div>
+</section>
 
+<section class="diplomes-section">
+    <div class="section-header">
+        <h2 class="section-title">Les diplômes d'arbitrage</h2>
+    </div>
+
+    <div class="diplomes-container">
+        <div class="diplomes-card" style="background-image: url('./assets/epee_escrime.jpg');">
+            <h2>départemental</h2>
+            <p>Ce diplôme est décemé par la CAI ou la CRA dont
+                dépend l'arbitre :</p>
+            <ul>
+                <li>
+                    Âge minimum : 14 ans.
+                </li>
+                <li>
+                    Ouvre droit à arbitrer toutes les compétitions
+                    organisées dans le cadre du comité interdépartemental
+                    et/ou du comité régional dont dépend l'arbitre (sous
+                    réserve de l'avis de la CRA dont dépend l'arbitre).
+                </li>
+                <li>
+                    Titulaire d'un carton BLANC qui permet d'arrêter un
+                    match à n'importe quel moment pour demander une
+                    assistance du DT et/ou de l'organisateur de la
+                    compétition. Le rôle pédagogique du DT et/ou de
+                    l'organisateur est primordial dans l'accompagnement
+                    des jeunes arbitres.
+                </li>
+            </ul>
+        </div>
+
+        <div class="diplomes-card" style="background-image: url('./assets/fleuret_escrime.jpg');">
+            <h2>régional</h2>
+            <p>Ce diplôme est décerné par la CRA dont dépend
+                l'arbitre :</p>
+            <ul>
+                <li>
+                    Âge minimum : 16 ans
+                </li>
+                <li>
+                    Il ouvre droit à arbitrer toutes les compétitions
+                    organisées dans le cadre du Comité régional,
+                </li>
+                <li>
+                    Les circuits nationaux,
+                </li>
+                <li>
+                    La Fête des Jeunes,
+                </li>
+                <li>
+                    Des dérogations ponctuelles peuvent faire l'objet d'une
+                    circulaire.
+                </li>
+            </ul>
+        </div>
+
+        <div class="diplomes-card" style="background-image: url('./assets/sabre_escrime.jpg');">
+            <h2>national</h2>
+            <p>Ce diplôme est décerné par la CNA (Commission
+                Nationale Arbitrage) :</p>
+            <ul>
+                <li>• Âge minimum : 18 ans</li>
+                <li>Il ouvre droit à arbitrer toutes les compétitions
+                    organisées dans le cadre du Comité régional,</li>
+                <li>Les circuits nationaux,</li>
+                <li>La Fête des Jeunes, les championnats de France M17,
+                    M20, Séniors et Vétérans sur convocation de la CNN</li>
+                <li>Les circuits européens M17 et U23 organisés sur le
+                    territoire français et à l'étranger.</li>
+            </ul>
+        </div>
+
+        <div class="diplomes-card" style="background-image: url('./assets/sabre_laser_escrime.jpg');">
+            <h2>international</h2>
+            <p>Ce diplôme est décerné par la Fédération
+                Internationale d'Escrime (FIE).</p>
+            <ul>
+                <li>Âge minimum : 20 ans</li>
+                <li>Il ouvre droit à arbitrer toutes les compétitions. Les
+                    arbitres qui figurent sur la liste restreinte de la FIE
+                    doivent arbitrer des compétitions nationales séniors et
+                    être la référence de notre corps arbitral.</li>
+            </ul>
+        </div>
+
+    </div>
+</section>
 
 <app-sponsort></app-sponsort>

FencerJudgeFront/src/styles.css

@@ -2,3 +2,14 @@
 .bg-primary-custom {
   background-color: #414141;
 }
+
+/* Colors */
+:root {
+  --primary-color: rgba(212, 175, 55, 0.6);
+  --gradient-color: linear-gradient(90deg, #d4af37, var(--primary-color));
+  --card-gradient: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%),
+    linear-gradient(135deg,
+      rgba(64, 64, 64, 0.95) 0%,
+      rgba(32, 32, 32, 0.98) 50%,
+      rgba(16, 16, 16, 0.95) 100%);
+}