add match card
This commit is contained in:
kelen-dev
parent
79413081bd
commit
aa6228aec0
6 changed files with 658 additions and 21 deletions
|
|
@ -1,5 +1,3 @@
|
|||
<app-header></app-header>
|
||||
<div class="container mt-4">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
<router-outlet></router-outlet>
|
||||
<app-footer></app-footer>
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -5,30 +5,18 @@
|
|||
</div>
|
||||
<form (ngSubmit)="onSubmit()" class="login-form">
|
||||
<div class="input-group">
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
[(ngModel)]="email"
|
||||
placeholder="Nom utilisateur"
|
||||
value="user@test.com"
|
||||
required
|
||||
/>
|
||||
<input type="email" name="email" [(ngModel)]="email" placeholder="Nom utilisateur" value="user@test.com"
|
||||
required />
|
||||
<label class="icon">👤</label>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<input
|
||||
type="password"
|
||||
name="password"
|
||||
[(ngModel)]="password"
|
||||
placeholder="Mot de passe"
|
||||
value="password123"
|
||||
required
|
||||
/>
|
||||
<input type="password" name="password" [(ngModel)]="password" placeholder="Mot de passe" value="password123"
|
||||
required />
|
||||
<label class="icon">🔒</label>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="login-btn">Connexion</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1 +1,91 @@
|
|||
<app-sponsort></app-sponsort>
|
||||
<div class="match-card">
|
||||
<div class="match-background">
|
||||
<img src="./assets/duel.webp" alt="Escrime" class="background-image">
|
||||
<div class="image-overlay"></div>
|
||||
</div>
|
||||
|
||||
<div class="match-header">
|
||||
<div class="match-weapon">
|
||||
<i class="sword-icon">⚔️</i>
|
||||
<span class="weapon-type">Épée</span>
|
||||
</div>
|
||||
<div class="match-status status-live">
|
||||
<span class="status-dot"></span>
|
||||
En cours
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="match-versus">
|
||||
<div class="fencer fencer-left">
|
||||
<div class="fencer-name">Martin DUBOIS</div>
|
||||
<div class="fencer-club">CE Paris</div>
|
||||
<div class="score">12</div>
|
||||
</div>
|
||||
|
||||
<div class="vs-divider">
|
||||
<span class="vs-text">VS</span>
|
||||
<div class="crossed-swords">⚔️</div>
|
||||
</div>
|
||||
|
||||
<div class="fencer fencer-right">
|
||||
<div class="fencer-name">Sophie BERNARD</div>
|
||||
<div class="fencer-club">Escrime Lyon</div>
|
||||
<div class="score">8</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="combat-arena">
|
||||
<div class="arena-header">
|
||||
<span class="arena-title">ARENA COMBAT</span>
|
||||
<div class="arena-pulse"></div>
|
||||
</div>
|
||||
|
||||
<div class="combat-grid">
|
||||
<div class="combat-stat venue">
|
||||
<div class="stat-icon">
|
||||
<div class="location-radar"></div>
|
||||
<span>🏛️</span>
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<span class="stat-label">BATTLEFIELD</span>
|
||||
<span class="stat-value">Gymnase Jean Moulin</span>
|
||||
<span class="stat-sub">PARIS • ZONE A</span>
|
||||
</div>
|
||||
<div class="stat-glow venue-glow"></div>
|
||||
</div>
|
||||
|
||||
<div class="combat-stat referee">
|
||||
<div class="stat-icon">
|
||||
<div class="referee-badge"></div>
|
||||
<span>⚖️</span>
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<span class="stat-label">COMBAT JUDGE</span>
|
||||
<span class="stat-value">Pierre MARTIN</span>
|
||||
<span class="stat-sub">OFFICIAL REFEREE</span>
|
||||
</div>
|
||||
<div class="stat-glow referee-glow"></div>
|
||||
</div>
|
||||
|
||||
<div class="combat-stat timing">
|
||||
<div class="stat-icon">
|
||||
<div class="time-ring"></div>
|
||||
<span>⚡</span>
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<span class="stat-label">COMBAT START</span>
|
||||
<span class="stat-value">14:30</span>
|
||||
<span class="stat-sub">LIVE BATTLE</span>
|
||||
</div>
|
||||
<div class="stat-glow timing-glow"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="arena-footer">
|
||||
<div class="danger-tape"></div>
|
||||
<span class="warning-text">⚠️ COMBAT ZONE ACTIVE ⚠️</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<app-sponsort></app-sponsort>
|
||||
BIN
FencerJudgeFront/src/assets/duel.webp
Normal file
BIN
FencerJudgeFront/src/assets/duel.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 171 KiB |
Loading…
Add table
Reference in a new issue