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.
This commit is contained in:
kelen-dev
parent
74daf728dd
commit
9164662336
2 changed files with 564 additions and 522 deletions
File diff suppressed because it is too large
Load diff
|
|
@ -1,137 +1,133 @@
|
||||||
<div class="match-card" *ngIf="latestMatch">
|
<div class="match-card" *ngIf="latestMatch">
|
||||||
<div class="match-background">
|
<div class="match-background">
|
||||||
<img src="./assets/duel.webp" alt="Escrime" class="background-image" />
|
<img src="./assets/duel.webp" alt="Escrime" class="background-image" />
|
||||||
<div class="image-overlay"></div>
|
<div class="image-overlay"></div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="match-header">
|
|
||||||
<div class="match-weapon">
|
|
||||||
<i class="sword-icon">⚔️</i>
|
|
||||||
<span class="weapon-type">{{ latestMatch.weapon }}</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="match-status"
|
|
||||||
[ngClass]="'status-' + getMatchStateColor(latestMatch.state)"
|
|
||||||
>
|
|
||||||
<span class="status-dot"></span>
|
|
||||||
{{ getMatchStateLabel(latestMatch.state) }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="match-versus">
|
|
||||||
<div class="fencer fencer-left">
|
|
||||||
<div class="fencer-name">
|
|
||||||
{{ player1?.name }} {{ player1?.firstName }}
|
|
||||||
</div>
|
|
||||||
<div class="fencer-club">{{ player1?.club }}</div>
|
|
||||||
<div class="score">{{ latestMatch.score1 }}</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="vs-divider">
|
<div class="match-header">
|
||||||
<span class="vs-text">VS</span>
|
<div class="match-weapon">
|
||||||
<div class="crossed-swords">⚔️</div>
|
<i class="sword-icon">⚔️</i>
|
||||||
|
<span class="weapon-type">{{ latestMatch.weapon }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="match-status" [ngClass]="'status-' + getMatchStateColor(latestMatch.state)">
|
||||||
|
<span class="status-dot"></span>
|
||||||
|
{{ getMatchStateLabel(latestMatch.state) }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="fencer fencer-right">
|
<div class="match-versus">
|
||||||
<div class="fencer-name">
|
<div class="fencer fencer-left">
|
||||||
{{ player2?.name }} {{ player2?.firstName }}
|
<div class="fencer-name">
|
||||||
</div>
|
{{ player1?.name }} {{ player1?.firstName }}
|
||||||
<div class="fencer-club">{{ player2?.club }}</div>
|
</div>
|
||||||
<div class="score">{{ latestMatch.score2 }}</div>
|
<div class="fencer-club">{{ player1?.club }}</div>
|
||||||
</div>
|
<div class="score">{{ latestMatch.score1 }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="combat-arena">
|
<div class="vs-divider">
|
||||||
<div class="arena-header">
|
<span class="vs-text">VS</span>
|
||||||
<span class="arena-title">ARENA COMBAT</span>
|
<div class="crossed-swords">⚔️</div>
|
||||||
<div class="arena-pulse"></div>
|
</div>
|
||||||
|
|
||||||
|
<div class="fencer fencer-right">
|
||||||
|
<div class="fencer-name">
|
||||||
|
{{ player2?.name }} {{ player2?.firstName }}
|
||||||
|
</div>
|
||||||
|
<div class="fencer-club">{{ player2?.club }}</div>
|
||||||
|
<div class="score">{{ latestMatch.score2 }}</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="combat-grid">
|
<div class="combat-arena">
|
||||||
<div class="combat-stat venue">
|
<div class="arena-header">
|
||||||
<div class="stat-icon">
|
<span class="arena-title">ARENA COMBAT</span>
|
||||||
<div class="location-radar"></div>
|
<div class="arena-pulse"></div>
|
||||||
<span>🏛️</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-content">
|
|
||||||
<span class="stat-label">BATTLEFIELD</span>
|
|
||||||
<span class="stat-value">{{ latestMatch.city }}</span>
|
|
||||||
<span class="stat-sub">{{ latestMatch.country }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="stat-glow venue-glow"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="combat-stat referee">
|
<div class="combat-grid">
|
||||||
<div class="stat-icon">
|
<div class="combat-stat venue">
|
||||||
<div class="referee-badge"></div>
|
<div class="stat-icon">
|
||||||
<span>⚖️</span>
|
<div class="location-radar"></div>
|
||||||
</div>
|
<span>🏛️</span>
|
||||||
<div class="stat-content">
|
</div>
|
||||||
<span class="stat-label">COMBAT JUDGE</span>
|
<div class="stat-content">
|
||||||
<span class="stat-value"
|
<span class="stat-label">BATTLEFIELD</span>
|
||||||
>{{ referee?.name }} {{ referee?.firstName }}</span
|
<span class="stat-value">{{ latestMatch.city }}</span>
|
||||||
>
|
<span class="stat-sub">{{ latestMatch.country }}</span>
|
||||||
<span class="stat-sub">OFFICIAL REFEREE</span>
|
</div>
|
||||||
</div>
|
<div class="stat-glow venue-glow"></div>
|
||||||
<div class="stat-glow referee-glow"></div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
<div class="combat-stat referee">
|
||||||
class="combat-stat timing"
|
<div class="stat-icon">
|
||||||
*ngIf="latestMatch?.state === MatchState.NOT_STARTED"
|
<div class="referee-badge"></div>
|
||||||
>
|
<span>⚖️</span>
|
||||||
<div class="stat-icon">
|
</div>
|
||||||
<div class="time-ring"></div>
|
<div class="stat-content">
|
||||||
<span>⚡</span>
|
<span class="stat-label">COMBAT JUDGE</span>
|
||||||
|
<span class="stat-value">{{ referee?.name }} {{ referee?.firstName }}</span>
|
||||||
|
<span class="stat-sub">OFFICIAL REFEREE</span>
|
||||||
|
</div>
|
||||||
|
<div class="stat-glow referee-glow"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="combat-stat timing" *ngIf="latestMatch?.state === MatchState.NOT_STARTED">
|
||||||
|
<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">{{ getTimeUntilMatch() }}</span>
|
||||||
|
<span class="stat-sub">LIVE BATTLE</span>
|
||||||
|
</div>
|
||||||
|
<div class="stat-glow timing-glow"></div>
|
||||||
|
</div>
|
||||||
|
<div class="combat-stat funfact" *ngIf="latestMatch?.state !== MatchState.NOT_STARTED">
|
||||||
|
<div class="stat-icon">
|
||||||
|
<span>🎯</span>
|
||||||
|
</div>
|
||||||
|
<div class="stat-content">
|
||||||
|
<span class="stat-label">FUN FACT</span>
|
||||||
|
<span class="stat-value">
|
||||||
|
Saviez-vous que l'escrime est l'un des sports les plus anciens aux
|
||||||
|
Jeux Olympiques ?
|
||||||
|
</span>
|
||||||
|
<span class="stat-sub">Inspiration et tradition au rendez-vous</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-content">
|
|
||||||
<span class="stat-label">COMBAT START</span>
|
|
||||||
<span class="stat-value">{{ getTimeUntilMatch() }}</span>
|
|
||||||
<span class="stat-sub">LIVE BATTLE</span>
|
|
||||||
</div>
|
|
||||||
<div class="stat-glow timing-glow"></div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="combat-stat funfact"
|
|
||||||
*ngIf="latestMatch?.state !== MatchState.NOT_STARTED"
|
|
||||||
>
|
|
||||||
<div class="stat-icon">
|
|
||||||
<span>🎯</span>
|
|
||||||
</div>
|
|
||||||
<div class="stat-content">
|
|
||||||
<span class="stat-label">FUN FACT</span>
|
|
||||||
<span class="stat-value">
|
|
||||||
Saviez-vous que l'escrime est l'un des sports les plus anciens aux
|
|
||||||
Jeux Olympiques ?
|
|
||||||
</span>
|
|
||||||
<span class="stat-sub">Inspiration et tradition au rendez-vous</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="weapons-container">
|
|
||||||
<div class="weapon-card" style="background-image: url('./assets/epee_escrime.jpg');">
|
|
||||||
<h2>Épée</h2>
|
|
||||||
<p>Tout le corps est cible valable. Pas de priorité.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="weapon-card" style="background-image: url('./assets/fleuret_escrime.jpg');">
|
|
||||||
<h2>Fleuret</h2>
|
|
||||||
<p>Cible : torse. La priorité s'applique.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="weapon-card" style="background-image: url('./assets/sabre_escrime.jpg');">
|
|
||||||
<h2>Sabre</h2>
|
|
||||||
<p>Cible : haut du corps. Priorité en cas de touche simultanée.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="weapon-card" style="background-image: url('./assets/sabre_laser_escrime.jpg');">
|
|
||||||
<h2>Sabre Laser</h2>
|
|
||||||
<p>Arme moderne d’escrime sportive, inspirée de la science-fiction. Lame lumineuse, règles proches du sabre classique. Discipline visuelle et dynamique.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
<section class="weapons-section">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2 class="section-title">Les Armes</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="weapons-container">
|
||||||
|
<div class="weapon-card" style="background-image: url('./assets/epee_escrime.jpg');">
|
||||||
|
<h2>Épée</h2>
|
||||||
|
<p>Tout le corps est cible valable. Pas de priorité.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<app-sponsort></app-sponsort>
|
<div class="weapon-card" style="background-image: url('./assets/fleuret_escrime.jpg');">
|
||||||
|
<h2>Fleuret</h2>
|
||||||
|
<p>Cible : torse. La priorité s'applique.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="weapon-card" style="background-image: url('./assets/sabre_escrime.jpg');">
|
||||||
|
<h2>Sabre</h2>
|
||||||
|
<p>Cible : haut du corps. Priorité en cas de touche simultanée.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="weapon-card" style="background-image: url('./assets/sabre_laser_escrime.jpg');">
|
||||||
|
<h2>Sabre Laser</h2>
|
||||||
|
<p>Arme moderne d’escrime sportive, inspirée de la science-fiction. Lame lumineuse, règles proches du sabre
|
||||||
|
classique. Discipline visuelle et dynamique.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<app-sponsort></app-sponsort>
|
||||||
Loading…
Add table
Reference in a new issue