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

Reviewed-on: #18
2025-06-03 12:30:07 +00:00 · 2025-06-03 12:30:07 +00:00 · e94e98753a
commit e94e98753a
parent 74daf728dd cd86540ca0
3 changed files with 737 additions and 531 deletions
--- a/FencerJudgeFront/src/app/components/home/home.component.css
+++ b/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(
-    135deg,
+    background: linear-gradient(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(
-    135deg,
+    background: linear-gradient(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(
-    from 0deg at 50% 50%,
+    background: repeating-conic-gradient(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(
-    90deg,
+    background: linear-gradient(90deg,
            rgba(0, 0, 0, 0.8) 0%,
            rgba(26, 26, 46, 0.9) 50%,
-    rgba(0, 0, 0, 0.8) 100%
-  );
-  border: 1px solid rgba(255, 215, 0, 0.3);
+            rgba(0, 0, 0, 0.8) 100%);
+    border: 1px solid var(--primary-color);
    border-radius: 8px;
    position: relative;
    transition: all 0.3s ease;
@ -399,8 +401,8 @@

 .combat-stat:hover {
    transform: translateX(8px);
-  border-color: #ffd700;
-  box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3),
+    border-color: var(--primary-color);
+    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);
-  clip-path: polygon(
-    50% 0%,
+    background: linear-gradient(45deg, var(--primary-color), #ffed4a);
+    clip-path: polygon(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;
-  height: 400px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    width: 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); 
-  opacity: 0.7;
+    filter: blur(10px) brightness(1.1) contrast(1.1);
+    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);
+}
--- a/FencerJudgeFront/src/app/components/home/home.component.html
+++ b/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
-      class="match-status"
-      [ngClass]="'status-' + getMatchStateColor(latestMatch.state)"
-    >
+        <div 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"
-            >{{ referee?.name }} {{ referee?.firstName }}</span
-          >
+                    <span class="stat-value">{{ referee?.name }} {{ referee?.firstName }}</span>
                    <span class="stat-sub">OFFICIAL REFEREE</span>
                </div>
                <div class="stat-glow referee-glow"></div>
            </div>

-      <div
-        class="combat-stat timing"
-        *ngIf="latestMatch?.state === MatchState.NOT_STARTED"
-      >
+            <div 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
-        class="combat-stat funfact"
-        *ngIf="latestMatch?.state !== MatchState.NOT_STARTED"
-      >
+            <div class="combat-stat funfact" *ngIf="latestMatch?.state !== MatchState.NOT_STARTED">
                <div class="stat-icon">
                    <span>🎯</span>
                </div>
@ -110,7 +99,13 @@
        </div>
    </div>
 </div>
-<div class="weapons-container">
+
+<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>
            <p>Tout le corps est cible valable. Pas de priorité.</p>
@ -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>
-</div>
+            <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>
+    </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>
--- a/FencerJudgeFront/src/styles.css
+++ b/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%);
+}