From 9164662336780da00085373157ddbeb132593fb7 Mon Sep 17 00:00:00 2001 From: kelen-dev Date: Tue, 3 Jun 2025 12:38:32 +0200 Subject: [PATCH 1/2] Refactor home component styles and HTML structure for improved readability and responsiveness - Updated CSS styles for match cards, backgrounds, and weapon cards to enhance visual appeal. - Refactored HTML structure for match display, including match header, versus section, and combat arena. - Improved responsiveness for combat grid and weapon sections. - Added hover effects for weapon cards to enhance user interaction. --- .../app/components/home/home.component.css | 850 +++++++++--------- .../app/components/home/home.component.html | 236 +++-- 2 files changed, 564 insertions(+), 522 deletions(-) diff --git a/FencerJudgeFront/src/app/components/home/home.component.css b/FencerJudgeFront/src/app/components/home/home.component.css index 6fc2a77..ed0ae51 100644 --- a/FencerJudgeFront/src/app/components/home/home.component.css +++ b/FencerJudgeFront/src/app/components/home/home.component.css @@ -1,627 +1,673 @@ .match-card { - background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); - border: 2px solid #daa520; - 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; - width: 100%; + background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); + border: 2px solid #daa520; + 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: 90vh; + width: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; } .match-card::before { - content: ""; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 2px; - background: linear-gradient(90deg, #daa520, #ffd700, #daa520); - background-size: 200% 100%; - animation: gradientShift 15s ease infinite; + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 2px; + background: linear-gradient(90deg, #daa520, #ffd700, #daa520); + background-size: 200% 100%; + animation: gradientShift 15s ease infinite; } @keyframes gradientShift { - 0% { - background-position: 0% 50%; - } + 0% { + background-position: 0% 50%; + } - 50% { - background-position: 100% 50%; - } + 50% { + background-position: 100% 50%; + } - 100% { - background-position: 0% 50%; - } + 100% { + background-position: 0% 50%; + } } .match-card { - transform: translateY(-4px); - box-shadow: 0 12px 48px rgba(218, 165, 32, 0.2), 0 8px 32px rgba(0, 0, 0, 0.4); + transform: translateY(-4px); + box-shadow: 0 12px 48px rgba(218, 165, 32, 0.2), 0 8px 32px rgba(0, 0, 0, 0.4); } .match-background { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: -1; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; } .background-image { - width: 100%; - height: 100%; - object-fit: cover; - filter: grayscale(30%) brightness(0.4) contrast(1.2); - transition: all 0.5s ease; + width: 100%; + height: 100%; + object-fit: cover; + filter: grayscale(30%) brightness(0.4) contrast(1.2); + transition: all 0.5s ease; } .match-card:hover .background-image { - filter: grayscale(10%) brightness(0.3) contrast(1.4); - transform: scale(1.05); + filter: grayscale(10%) brightness(0.3) contrast(1.4); + transform: scale(1.05); } .image-overlay { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - 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% - ); + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + 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%); } /* Header */ .match-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 20px; + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; } .match-weapon { - display: flex; - align-items: center; - gap: 8px; - color: #daa520; - font-weight: 600; + display: flex; + align-items: center; + gap: 8px; + color: #daa520; + font-weight: 600; } .weapon-type { - font-size: 14px; - text-transform: uppercase; - letter-spacing: 1px; + font-size: 14px; + text-transform: uppercase; + letter-spacing: 1px; } /* Status */ .match-status { - display: flex; - align-items: center; - gap: 8px; - padding: 6px 12px; - border-radius: 20px; - font-size: 12px; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; + display: flex; + align-items: center; + gap: 8px; + padding: 6px 12px; + border-radius: 20px; + font-size: 12px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.5px; } .status-warning { - background: rgba(34, 197, 94, 0.2); - color: #22c55e; - border: 1px solid #22c55e; + background: rgba(34, 197, 94, 0.2); + color: #22c55e; + border: 1px solid #22c55e; } .status-success { - background: rgba(239, 68, 68, 0.2); - color: #ef4444; - border: 1px solid #ef4444; + background: rgba(239, 68, 68, 0.2); + color: #ef4444; + border: 1px solid #ef4444; } .status-secondary { - background: rgba(59, 130, 246, 0.2); - color: #3b82f6; - border: 1px solid #3b82f6; + background: rgba(59, 130, 246, 0.2); + color: #3b82f6; + border: 1px solid #3b82f6; } .status-dot { - width: 8px; - height: 8px; - border-radius: 50%; - background: currentColor; - animation: pulse 2s infinite; + width: 8px; + height: 8px; + border-radius: 50%; + background: currentColor; + animation: pulse 2s infinite; } @keyframes pulse { - 0%, - 100% { - opacity: 1; - } - 50% { - opacity: 0.5; - } + + 0%, + 100% { + opacity: 1; + } + + 50% { + opacity: 0.5; + } } /* Versus Section */ .match-versus { - display: flex; - align-items: center; - justify-content: space-between; - margin: 24px 0; - position: relative; + display: flex; + align-items: center; + justify-content: space-between; + margin: 24px 0; + position: relative; } .fencer { - flex: 1; - text-align: center; - color: white; + flex: 1; + text-align: center; + color: white; } .fencer-name { - font-size: 18px; - font-weight: 700; - margin-bottom: 4px; - color: #daa520; + font-size: 18px; + font-weight: 700; + margin-bottom: 4px; + color: #daa520; } .fencer-club { - font-size: 12px; - color: #9ca3af; - margin-bottom: 8px; + font-size: 12px; + color: #9ca3af; + margin-bottom: 8px; } .score { - font-size: 32px; - font-weight: 900; - color: white; - text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); + font-size: 32px; + font-weight: 900; + color: white; + text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); } .vs-divider { - display: flex; - flex-direction: column; - align-items: center; - gap: 4px; - margin: 0 20px; + display: flex; + flex-direction: column; + align-items: center; + gap: 4px; + margin: 0 20px; } .vs-text { - font-size: 14px; - font-weight: 700; - color: #6b7280; - letter-spacing: 2px; + font-size: 14px; + font-weight: 700; + color: #6b7280; + letter-spacing: 2px; } .crossed-swords { - font-size: 20px; - opacity: 0.7; + font-size: 20px; + opacity: 0.7; } /* Details */ .match-details { - display: flex; - flex-direction: column; - gap: 12px; - margin-top: 20px; - padding-top: 20px; - border-top: 1px solid rgba(255, 255, 255, 0.1); + display: flex; + flex-direction: column; + gap: 12px; + margin-top: 20px; + padding-top: 20px; + border-top: 1px solid rgba(255, 255, 255, 0.1); } .detail-item { - display: flex; - align-items: center; - gap: 12px; - font-size: 14px; + display: flex; + align-items: center; + gap: 12px; + font-size: 14px; } .detail-item .icon { - font-size: 16px; - width: 20px; - text-align: center; + font-size: 16px; + width: 20px; + text-align: center; } .detail-item .label { - color: #9ca3af; - font-weight: 500; - min-width: 60px; + color: #9ca3af; + font-weight: 500; + min-width: 60px; } .detail-item .value { - color: white; - font-weight: 600; + color: white; + font-weight: 600; } /* Responsive */ @media (max-width: 768px) { - .match-card { - padding: 16px; - } + .match-card { + padding: 16px; + } - .match-versus { - flex-direction: column; - gap: 16px; - } + .match-versus { + flex-direction: column; + gap: 16px; + } - .vs-divider { - transform: rotate(90deg); - margin: 0; - } + .vs-divider { + transform: rotate(90deg); + margin: 0; + } - .fencer { - width: 100%; - } + .fencer { + width: 100%; + } } .combat-arena { - margin-top: 24px; - 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% - ); - border: 2px solid; - border-image: linear-gradient(45deg, #dc2626, #ffd700, #dc2626) 1; - border-radius: 12px; - padding: 20px; - position: relative; - overflow: hidden; + margin-top: 24px; + 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%); + border: 2px solid; + border-image: linear-gradient(45deg, #dc2626, #ffd700, #dc2626) 1; + border-radius: 12px; + padding: 20px; + position: relative; + overflow: hidden; } .combat-arena::before { - content: ""; - position: absolute; - top: -50%; - left: -50%; - width: 200%; - height: 200%; - background: repeating-conic-gradient( - from 0deg at 50% 50%, - transparent 0deg 2deg, - rgba(220, 38, 38, 0.05) 2deg 4deg - ); - animation: rotate 20s linear infinite; - pointer-events: none; + content: ""; + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: repeating-conic-gradient(from 0deg at 50% 50%, + transparent 0deg 2deg, + rgba(220, 38, 38, 0.05) 2deg 4deg); + animation: rotate 20s linear infinite; + pointer-events: none; } @keyframes rotate { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } } /* Header Arena */ .arena-header { - display: flex; - align-items: center; - justify-content: center; - gap: 12px; - margin-bottom: 20px; - position: relative; + display: flex; + align-items: center; + justify-content: center; + gap: 12px; + margin-bottom: 20px; + position: relative; } .arena-title { - font-family: "Orbitron", monospace; - font-size: 16px; - font-weight: 900; - color: #ffd700; - letter-spacing: 3px; - text-shadow: 0 0 10px #ffd700, 0 0 20px #ffd700, 0 0 30px #ffd700; - animation: titleGlow 2s ease-in-out infinite alternate; + font-family: "Orbitron", monospace; + font-size: 16px; + font-weight: 900; + color: #ffd700; + letter-spacing: 3px; + text-shadow: 0 0 10px #ffd700, 0 0 20px #ffd700, 0 0 30px #ffd700; + 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; - } - to { - text-shadow: 0 0 20px #ffd700, 0 0 30px #ffd700, 0 0 40px #ffd700; - } + from { + text-shadow: 0 0 10px #ffd700, 0 0 20px #ffd700, 0 0 30px #ffd700; + } + + to { + text-shadow: 0 0 20px #ffd700, 0 0 30px #ffd700, 0 0 40px #ffd700; + } } .arena-pulse { - width: 10px; - height: 10px; - background: #dc2626; - border-radius: 50%; - position: relative; - animation: pulse-danger 1s infinite; + width: 10px; + height: 10px; + background: #dc2626; + border-radius: 50%; + position: relative; + animation: pulse-danger 1s infinite; } .arena-pulse::before { - content: ""; - position: absolute; - top: -5px; - left: -5px; - right: -5px; - bottom: -5px; - background: #dc2626; - border-radius: 50%; - opacity: 0.3; - animation: pulse-ring 1s infinite; + content: ""; + position: absolute; + top: -5px; + left: -5px; + right: -5px; + bottom: -5px; + background: #dc2626; + border-radius: 50%; + opacity: 0.3; + animation: pulse-ring 1s infinite; } @keyframes pulse-danger { - 0%, - 100% { - transform: scale(1); - } - 50% { - transform: scale(1.2); - } + + 0%, + 100% { + transform: scale(1); + } + + 50% { + transform: scale(1.2); + } } @keyframes pulse-ring { - 0% { - transform: scale(0.8); - opacity: 0.8; - } - 100% { - transform: scale(2); - opacity: 0; - } + 0% { + transform: scale(0.8); + opacity: 0.8; + } + + 100% { + transform: scale(2); + opacity: 0; + } } /* Combat Grid */ .combat-grid { - display: grid; - grid-template-columns: 1fr; - gap: 16px; + display: grid; + grid-template-columns: 1fr; + gap: 16px; } .combat-stat { - display: flex; - align-items: center; - gap: 16px; - padding: 16px; - 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); - border-radius: 8px; - position: relative; - transition: all 0.3s ease; - cursor: pointer; + display: flex; + align-items: center; + gap: 16px; + padding: 16px; + 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); + border-radius: 8px; + position: relative; + transition: all 0.3s ease; + cursor: pointer; } .combat-stat:hover { - transform: translateX(8px); - border-color: #ffd700; - box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3), - inset 0 1px 0 rgba(255, 215, 0, 0.1); + transform: translateX(8px); + border-color: #ffd700; + box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3), + inset 0 1px 0 rgba(255, 215, 0, 0.1); } /* Icons animés */ .stat-icon { - position: relative; - display: flex; - align-items: center; - justify-content: center; - width: 48px; - height: 48px; - font-size: 24px; + position: relative; + display: flex; + align-items: center; + justify-content: center; + width: 48px; + height: 48px; + font-size: 24px; } .location-radar { - position: absolute; - width: 40px; - height: 40px; - border: 2px solid #10b981; - border-radius: 50%; - border-top-color: transparent; - animation: radar-spin 2s linear infinite; + position: absolute; + width: 40px; + height: 40px; + border: 2px solid #10b981; + border-radius: 50%; + border-top-color: transparent; + animation: radar-spin 2s linear infinite; } .referee-badge { - position: absolute; - width: 35px; - height: 35px; - background: linear-gradient(45deg, #ffd700, #ffed4a); - clip-path: polygon( - 50% 0%, - 61% 35%, - 98% 35%, - 68% 57%, - 79% 91%, - 50% 70%, - 21% 91%, - 32% 57%, - 2% 35%, - 39% 35% - ); - animation: badge-pulse 3s ease-in-out infinite; + position: absolute; + width: 35px; + height: 35px; + background: linear-gradient(45deg, #ffd700, #ffed4a); + clip-path: polygon(50% 0%, + 61% 35%, + 98% 35%, + 68% 57%, + 79% 91%, + 50% 70%, + 21% 91%, + 32% 57%, + 2% 35%, + 39% 35%); + animation: badge-pulse 3s ease-in-out infinite; } .time-ring { - position: absolute; - width: 36px; - height: 36px; - border: 3px solid #dc2626; - border-radius: 50%; - border-left-color: transparent; - animation: time-tick 1s linear infinite; + position: absolute; + width: 36px; + height: 36px; + border: 3px solid #dc2626; + border-radius: 50%; + border-left-color: transparent; + animation: time-tick 1s linear infinite; } @keyframes radar-spin { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } + 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); - } + + 0%, + 100% { + transform: scale(1) rotate(0deg); + } + + 50% { + transform: scale(1.1) rotate(5deg); + } } @keyframes time-tick { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } } /* Content */ .stat-content { - flex: 1; - display: flex; - flex-direction: column; - gap: 2px; + flex: 1; + display: flex; + flex-direction: column; + gap: 2px; } .stat-label { - font-family: "Orbitron", monospace; - font-size: 10px; - font-weight: 700; - color: #6b7280; - letter-spacing: 1px; - text-transform: uppercase; + font-family: "Orbitron", monospace; + font-size: 10px; + font-weight: 700; + color: #6b7280; + letter-spacing: 1px; + text-transform: uppercase; } .stat-value { - font-size: 16px; - font-weight: 700; - color: #ffffff; - text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); + font-size: 16px; + font-weight: 700; + color: #ffffff; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } .stat-sub { - font-size: 11px; - color: #9ca3af; - font-weight: 500; + font-size: 11px; + color: #9ca3af; + font-weight: 500; } /* Glows spécifiques */ .venue .stat-value { - color: #10b981; + color: #10b981; } + .referee .stat-value { - color: #ffd700; + color: #ffd700; } + .timing .stat-value { - color: #dc2626; + color: #dc2626; } .stat-glow { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - border-radius: 8px; - opacity: 0; - transition: opacity 0.3s ease; - pointer-events: none; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + border-radius: 8px; + opacity: 0; + transition: opacity 0.3s ease; + pointer-events: none; } .combat-stat:hover .stat-glow { - opacity: 1; + opacity: 1; } .venue-glow { - box-shadow: inset 0 0 20px rgba(16, 185, 129, 0.2); + 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); + 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); + box-shadow: inset 0 0 20px rgba(220, 38, 38, 0.2); } /* Responsive */ @media (min-width: 768px) { - .combat-grid { - grid-template-columns: repeat(3, 1fr); - } + .combat-grid { + grid-template-columns: repeat(3, 1fr); + } - .combat-stat { - flex-direction: column; + .combat-stat { + flex-direction: column; + text-align: center; + gap: 12px; + } + + .combat-stat:hover { + transform: translateY(-4px); + } +} + +/* Section Weapons */ +.section-header { text-align: center; - gap: 12px; - } + margin-bottom: 3rem; + position: relative; +} - .combat-stat:hover { - transform: translateY(-4px); - } +.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: linear-gradient(90deg, #d4af37, #ffd700); } .weapons-container { - display: flex; - flex-wrap: wrap; - gap: 20px; - justify-content: center; - padding: 20px; + display: flex; + flex-wrap: wrap; + gap: 20px; + justify-content: center; + padding: 20px; } +/* Card Weapon */ .weapon-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; - color: white; - text-align: center; - overflow: hidden; - display: flex; - flex-direction: column; - justify-content: flex-end; - padding: 20px; - background-color: #000; + 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; + color: white; + text-align: center; + overflow: hidden; + display: flex; + flex-direction: column; + justify-content: flex-end; + padding: 20px; + background-color: #000; } + .weapon-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; - z-index: 1; + content: ''; + position: absolute; + inset: 0; + background-image: inherit; + background-size: cover; + background-position: center; + 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: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 * { - position: relative; - z-index: 2; - text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8); + 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; + width: 100%; + height: auto; + border-radius: 10px; + margin-bottom: 15px; } .weapon-card h2 { - margin-bottom: 10px; - font-size: 1.4em; + margin-bottom: 10px; + font-size: 1.4em; } .weapon-card p { - color: #ffffff; - font-size: 0.95em; + color: #ffffff; + font-size: 0.95em; } \ 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 7242cb1..e15c8bb 100644 --- a/FencerJudgeFront/src/app/components/home/home.component.html +++ b/FencerJudgeFront/src/app/components/home/home.component.html @@ -1,137 +1,133 @@
-
- Escrime -
-
- -
-
- ⚔️ - {{ latestMatch.weapon }} -
-
- - {{ getMatchStateLabel(latestMatch.state) }} -
-
- -
-
-
- {{ player1?.name }} {{ player1?.firstName }} -
-
{{ player1?.club }}
-
{{ latestMatch.score1 }}
+
+ Escrime +
-
- VS -
⚔️
+
+
+ ⚔️ + {{ latestMatch.weapon }} +
+
+ + {{ getMatchStateLabel(latestMatch.state) }} +
-
-
- {{ player2?.name }} {{ player2?.firstName }} -
-
{{ player2?.club }}
-
{{ latestMatch.score2 }}
-
-
+
+
+
+ {{ player1?.name }} {{ player1?.firstName }} +
+
{{ player1?.club }}
+
{{ latestMatch.score1 }}
+
-
-
- ARENA COMBAT -
+
+ VS +
⚔️
+
+ +
+
+ {{ player2?.name }} {{ player2?.firstName }} +
+
{{ player2?.club }}
+
{{ latestMatch.score2 }}
+
-
-
-
-
- 🏛️ +
+
+ ARENA COMBAT +
-
- BATTLEFIELD - {{ latestMatch.city }} - {{ latestMatch.country }} -
-
-
-
-
-
- ⚖️ -
-
- COMBAT JUDGE - {{ referee?.name }} {{ referee?.firstName }} - OFFICIAL REFEREE -
-
-
+
+
+
+
+ 🏛️ +
+
+ BATTLEFIELD + {{ latestMatch.city }} + {{ latestMatch.country }} +
+
+
-
-
-
- ⚡ +
+
+
+ ⚖️ +
+
+ COMBAT JUDGE + {{ referee?.name }} {{ referee?.firstName }} + OFFICIAL REFEREE +
+
+
+ +
+
+
+ ⚡ +
+
+ COMBAT START + {{ getTimeUntilMatch() }} + LIVE BATTLE +
+
+
+
+
+ 🎯 +
+
+ FUN FACT + + Saviez-vous que l'escrime est l'un des sports les plus anciens aux + Jeux Olympiques ? + + Inspiration et tradition au rendez-vous +
+
-
- COMBAT START - {{ getTimeUntilMatch() }} - LIVE BATTLE -
-
-
-
-
- 🎯 -
-
- FUN FACT - - Saviez-vous que l'escrime est l'un des sports les plus anciens aux - Jeux Olympiques ? - - Inspiration et tradition au rendez-vous -
-
-
-
-
-
-

Épée

-

Tout le corps est cible valable. Pas de priorité.

-
- -
-

Fleuret

-

Cible : torse. La priorité s'applique.

-
- -
-

Sabre

-

Cible : haut du corps. Priorité en cas de touche simultanée.

-
- -
-

Sabre Laser

-

Arme moderne d’escrime sportive, inspirée de la science-fiction. Lame lumineuse, règles proches du sabre classique. Discipline visuelle et dynamique.

-
+
+
+

Les Armes

+
+
+
+

Épée

+

Tout le corps est cible valable. Pas de priorité.

+
- +
+

Fleuret

+

Cible : torse. La priorité s'applique.

+
+ +
+

Sabre

+

Cible : haut du corps. Priorité en cas de touche simultanée.

+
+ +
+

Sabre Laser

+

Arme moderne d’escrime sportive, inspirée de la science-fiction. Lame lumineuse, règles proches du sabre + classique. Discipline visuelle et dynamique.

+
+ +
+
+ + \ No newline at end of file From cd86540ca0d4a6f19c6195f6796251acfe8cece1 Mon Sep 17 00:00:00 2001 From: kelen-dev Date: Tue, 3 Jun 2025 14:27:37 +0200 Subject: [PATCH 2/2] =?UTF-8?q?Add=20dipl=C3=B4mes=20section=20with=20deta?= =?UTF-8?q?iled=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