From cd86540ca0d4a6f19c6195f6796251acfe8cece1 Mon Sep 17 00:00:00 2001 From: kelen-dev Date: Tue, 3 Jun 2025 14:27:37 +0200 Subject: [PATCH] =?UTF-8?q?Add=20dipl=C3=B4mes=20section=20with=20detailed?= =?UTF-8?q?=20descriptions=20and=20styles=20for=20cards?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../app/components/home/home.component.css | 141 +++++++++++++----- .../app/components/home/home.component.html | 88 +++++++++++ FencerJudgeFront/src/styles.css | 11 ++ 3 files changed, 202 insertions(+), 38 deletions(-) diff --git a/FencerJudgeFront/src/app/components/home/home.component.css b/FencerJudgeFront/src/app/components/home/home.component.css index ed0ae51..87ce9fd 100644 --- a/FencerJudgeFront/src/app/components/home/home.component.css +++ b/FencerJudgeFront/src/app/components/home/home.component.css @@ -1,6 +1,6 @@ .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); @@ -21,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; } @@ -269,7 +269,7 @@ rgba(0, 0, 0, 0.8) 50%, 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; @@ -314,19 +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); } } @@ -392,7 +392,7 @@ 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); + border: 1px solid var(--primary-color); border-radius: 8px; position: relative; transition: all 0.3s ease; @@ -401,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); } @@ -431,7 +431,7 @@ position: absolute; width: 35px; height: 35px; - background: linear-gradient(45deg, #ffd700, #ffed4a); + background: linear-gradient(45deg, var(--primary-color), #ffed4a); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, @@ -523,7 +523,7 @@ } .referee .stat-value { - color: #ffd700; + color: var(--primary-color); } .timing .stat-value { @@ -600,10 +600,11 @@ transform: translateX(-50%); width: 60px; height: 2px; - background: linear-gradient(90deg, #d4af37, #ffd700); + background: var(--gradient-color); } -.weapons-container { +.weapons-container, +.diplomes-container { display: flex; flex-wrap: wrap; gap: 20px; @@ -612,25 +613,40 @@ } /* Card Weapon */ -.weapon-card { +.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; + 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; @@ -640,34 +656,83 @@ 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 */ + transition: all .6s cubic-bezier(0.4, 0, 0.2, 1); + /* Courbe plus fluide */ } -.weapon-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 */ +.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 * { +.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); } \ No newline at end of file diff --git a/FencerJudgeFront/src/app/components/home/home.component.html b/FencerJudgeFront/src/app/components/home/home.component.html index e15c8bb..e1135d0 100644 --- a/FencerJudgeFront/src/app/components/home/home.component.html +++ b/FencerJudgeFront/src/app/components/home/home.component.html @@ -130,4 +130,92 @@ +
+
+

Les diplômes d'arbitrage

+
+ +
+
+

départemental

+

Ce diplôme est décemé par la CAI ou la CRA dont + dépend l'arbitre :

+
    +
  • + Âge minimum : 14 ans. +
    • +
  • + 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). +
    • +
  • + 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. +
    • +
+
+ +
+

régional

+

Ce diplôme est décerné par la CRA dont dépend + l'arbitre :

+
    +
  • + Âge minimum : 16 ans +
    • +
  • + Il ouvre droit à arbitrer toutes les compétitions + organisées dans le cadre du Comité régional, +
    • +
  • + Les circuits nationaux, +
    • +
  • + La Fête des Jeunes, +
    • +
  • + Des dérogations ponctuelles peuvent faire l'objet d'une + circulaire. +
    • +
+
+ +
+

national

+

Ce diplôme est décerné par la CNA (Commission + Nationale Arbitrage) :

+
    +
  • • Âge minimum : 18 ans
    • +
  • Il ouvre droit à arbitrer toutes les compétitions + organisées dans le cadre du Comité régional,
    • +
  • Les circuits nationaux,
    • +
  • La Fête des Jeunes, les championnats de France M17, + M20, Séniors et Vétérans sur convocation de la CNN
    • +
  • Les circuits européens M17 et U23 organisés sur le + territoire français et à l'étranger.
    • +
+
+ +
+

international

+

Ce diplôme est décerné par la Fédération + Internationale d'Escrime (FIE).

+
    +
  • Âge minimum : 20 ans
    • +
  • 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.
    • +
+
+ +
+
+ \ No newline at end of file diff --git a/FencerJudgeFront/src/styles.css b/FencerJudgeFront/src/styles.css index c44aac6..d888619 100644 --- 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%); +} \ No newline at end of file