diff --git a/FencerJudgeFront/src/app/app.component.html b/FencerJudgeFront/src/app/app.component.html index a37d5f5..eaf43d3 100644 --- a/FencerJudgeFront/src/app/app.component.html +++ b/FencerJudgeFront/src/app/app.component.html @@ -1,5 +1,3 @@ -
- -
+ \ No newline at end of file diff --git a/FencerJudgeFront/src/app/components/essentials/login/login.component.css b/FencerJudgeFront/src/app/components/essentials/login/login.component.css index 6093560..a2b0cf2 100644 --- a/FencerJudgeFront/src/app/components/essentials/login/login.component.css +++ b/FencerJudgeFront/src/app/components/essentials/login/login.component.css @@ -41,6 +41,7 @@ inset: 0; background: rgba(0, 0, 0, 0.3); /* voile sombre */ + -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); /* effet de flou */ z-index: 1; diff --git a/FencerJudgeFront/src/app/components/essentials/login/login.component.html b/FencerJudgeFront/src/app/components/essentials/login/login.component.html index 2eca917..993b80b 100644 --- a/FencerJudgeFront/src/app/components/essentials/login/login.component.html +++ b/FencerJudgeFront/src/app/components/essentials/login/login.component.html @@ -5,30 +5,18 @@
- +
- +
- + \ No newline at end of file diff --git a/FencerJudgeFront/src/app/components/home/home.component.css b/FencerJudgeFront/src/app/components/home/home.component.css index e69de29..4e85ad9 100644 --- a/FencerJudgeFront/src/app/components/home/home.component.css +++ b/FencerJudgeFront/src/app/components/home/home.component.css @@ -0,0 +1,560 @@ +.match-card { + background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); + border: 2px solid #daa520; + border-radius: 16px; + 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%; +} + +.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; +} + +@keyframes gradientShift { + 0% { + background-position: 0% 50%; + } + + 50% { + background-position: 100% 50%; + } + + 100% { + background-position: 0% 50%; + } +} + +.match-card:hover { + 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; +} + +.background-image { + 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); +} + +.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% + ); +} + +/* Header */ +.match-header { + 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; +} + +.weapon-type { + 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; +} + +.status-live { + background: rgba(34, 197, 94, 0.2); + color: #22c55e; + border: 1px solid #22c55e; +} + +.status-finished { + background: rgba(239, 68, 68, 0.2); + color: #ef4444; + border: 1px solid #ef4444; +} + +.status-upcoming { + 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; +} + +@keyframes pulse { + 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; +} + +.fencer { + flex: 1; + text-align: center; + color: white; +} + +.fencer-name { + font-size: 18px; + font-weight: 700; + margin-bottom: 4px; + color: #daa520; +} + +.fencer-club { + 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); +} + +.vs-divider { + 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; +} + +.crossed-swords { + 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); +} + +.detail-item { + display: flex; + align-items: center; + gap: 12px; + font-size: 14px; +} + +.detail-item .icon { + font-size: 16px; + width: 20px; + text-align: center; +} + +.detail-item .label { + color: #9ca3af; + font-weight: 500; + min-width: 60px; +} + +.detail-item .value { + color: white; + font-weight: 600; +} + +/* Responsive */ +@media (max-width: 768px) { + .match-card { + padding: 16px; + } + + .match-versus { + flex-direction: column; + gap: 16px; + } + + .vs-divider { + transform: rotate(90deg); + margin: 0; + } + + .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; +} + +.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; +} + +@keyframes rotate { + 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; +} + +.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; +} + +@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; } +} + +.arena-pulse { + 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; +} + +@keyframes pulse-danger { + 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; } +} + +/* Combat Grid */ +.combat-grid { + 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; +} + +.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); +} + +/* Icons animés */ +.stat-icon { + 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; +} + +.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; +} + +.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; +} + +@keyframes radar-spin { + 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); } +} + +@keyframes time-tick { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +/* Content */ +.stat-content { + 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; +} + +.stat-value { + 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; +} + +/* Glows spécifiques */ +.venue .stat-value { color: #10b981; } +.referee .stat-value { color: #ffd700; } +.timing .stat-value { 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; +} + +.combat-stat:hover .stat-glow { + opacity: 1; +} + +.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); } + +/* Footer Arena */ +.arena-footer { + margin-top: 20px; + display: flex; + align-items: center; + justify-content: center; + gap: 12px; +} + +.danger-tape { + flex: 1; + height: 4px; + background: + repeating-linear-gradient( + 45deg, + #ffd700 0px, + #ffd700 10px, + #dc2626 10px, + #dc2626 20px + ); + animation: tape-move 2s linear infinite; +} + +@keyframes tape-move { + 0% { background-position: 0px 0px; } + 100% { background-position: 28px 0px; } +} + +.warning-text { + font-family: 'Orbitron', monospace; + font-size: 12px; + font-weight: 700; + color: #ffd700; + letter-spacing: 1px; + animation: warning-blink 1.5s ease-in-out infinite alternate; +} + +@keyframes warning-blink { + 0% { opacity: 1; } + 100% { opacity: 0.6; } +} + +/* Responsive */ +@media (min-width: 768px) { + .combat-grid { + grid-template-columns: repeat(3, 1fr); + } + + .combat-stat { + flex-direction: column; + text-align: center; + gap: 12px; + } + + .combat-stat:hover { + transform: translateY(-4px); + } +} + diff --git a/FencerJudgeFront/src/app/components/home/home.component.html b/FencerJudgeFront/src/app/components/home/home.component.html index f761df7..402f9ff 100644 --- a/FencerJudgeFront/src/app/components/home/home.component.html +++ b/FencerJudgeFront/src/app/components/home/home.component.html @@ -1 +1,91 @@ - +
+
+ Escrime +
+
+ +
+
+ ⚔️ + Épée +
+
+ + En cours +
+
+ +
+
+
Martin DUBOIS
+
CE Paris
+
12
+
+ +
+ VS +
⚔️
+
+ +
+
Sophie BERNARD
+
Escrime Lyon
+
8
+
+
+ +
+
+ ARENA COMBAT +
+
+ +
+
+
+
+ 🏛️ +
+
+ BATTLEFIELD + Gymnase Jean Moulin + PARIS • ZONE A +
+
+
+ +
+
+
+ ⚖️ +
+
+ COMBAT JUDGE + Pierre MARTIN + OFFICIAL REFEREE +
+
+
+ +
+
+
+ ⚡ +
+
+ COMBAT START + 14:30 + LIVE BATTLE +
+
+
+
+ +
+
+ ⚠️ COMBAT ZONE ACTIVE ⚠️ +
+
+
+ + \ No newline at end of file diff --git a/FencerJudgeFront/src/assets/duel.webp b/FencerJudgeFront/src/assets/duel.webp new file mode 100644 index 0000000..5282448 Binary files /dev/null and b/FencerJudgeFront/src/assets/duel.webp differ