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 @@
-
-
+
Tout le corps est cible valable. Pas de priorité.
-Cible : torse. La priorité s'applique.
-Cible : haut du corps. Priorité en cas de touche simultanée.
-Arme moderne d’escrime sportive, inspirée de la science-fiction. Lame lumineuse, règles proches du sabre classique. Discipline visuelle et dynamique.
Tout le corps est cible valable. Pas de priorité.
+Cible : torse. La priorité s'applique.
+Cible : haut du corps. Priorité en cas de touche simultanée.
+Arme moderne d’escrime sportive, inspirée de la science-fiction. Lame lumineuse, règles proches du sabre + classique. Discipline visuelle et dynamique.
+