Add templates/acheivmentsExample.html
This commit is contained in:
parent
7a9ac6546a
commit
eb84bdc436
859
templates/acheivmentsExample.html
Normal file
859
templates/acheivmentsExample.html
Normal file
@ -0,0 +1,859 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>ETA Achievements</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<style>
|
||||
:root {
|
||||
--bg: #050816;
|
||||
--bg-soft: #0b1020;
|
||||
--accent: #ffb800;
|
||||
--accent-soft: rgba(255, 184, 0, 0.2);
|
||||
--text: #f7f7ff;
|
||||
--muted: #9ca3af;
|
||||
--card-radius: 18px;
|
||||
--transition-fast: 180ms ease-out;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
background: radial-gradient(circle at top, #19213a 0, #050816 55%, #020308 100%);
|
||||
color: var(--text);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.page {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
padding: 32px 16px 48px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 1.4rem;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 1.9rem;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.page-subtitle span.highlight {
|
||||
padding: 4px 10px;
|
||||
border-radius: 999px;
|
||||
background: var(--accent-soft);
|
||||
color: var(--accent);
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
.badge-live {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 999px;
|
||||
background: #0f172a;
|
||||
color: var(--muted);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.badge-live-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 999px;
|
||||
background: #22c55e;
|
||||
box-shadow: 0 0 12px rgba(34, 197, 94, 0.9);
|
||||
}
|
||||
|
||||
.achievements-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.achievement-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: var(--card-radius);
|
||||
background: radial-gradient(circle at top left, #1e293b, #020617 55%);
|
||||
border: 1px solid rgba(148, 163, 184, 0.2);
|
||||
cursor: pointer;
|
||||
transform-origin: center;
|
||||
transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), background 220ms ease-out;
|
||||
}
|
||||
|
||||
.achievement-card::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(circle at top, rgba(255, 184, 0, 0.25), transparent 55%);
|
||||
opacity: 0;
|
||||
transform: translateY(12px);
|
||||
transition: opacity 220ms ease-out, transform 220ms ease-out;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.achievement-card:hover {
|
||||
transform: translateY(-4px) scale(1.01);
|
||||
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.9);
|
||||
border-color: rgba(253, 224, 71, 0.7);
|
||||
background: radial-gradient(circle at top left, #334155, #020617 55%);
|
||||
}
|
||||
|
||||
.achievement-card:hover::before {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.achievement-media {
|
||||
position: relative;
|
||||
height: 180px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.achievement-media img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transform: scale(1.02);
|
||||
transition: transform var(--transition-fast);
|
||||
}
|
||||
|
||||
.achievement-card:hover .achievement-media img {
|
||||
transform: scale(1.06);
|
||||
}
|
||||
|
||||
.achievement-medal-pill {
|
||||
position: absolute;
|
||||
inset: 10px 10px auto auto;
|
||||
padding: 4px 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 0.7rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.14em;
|
||||
background: rgba(15, 23, 42, 0.92);
|
||||
border: 1px solid rgba(249, 250, 251, 0.09);
|
||||
color: var(--accent);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
|
||||
.achievement-medal-pill span.dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 999px;
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
.achievement-body {
|
||||
padding: 12px 14px 14px;
|
||||
}
|
||||
|
||||
.achievement-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.achievement-title-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 6px;
|
||||
background: radial-gradient(circle at 30% 0, #fbbf24, #b45309);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.achievement-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
font-size: 0.78rem;
|
||||
color: var(--muted);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.achievement-meta span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.achievement-avatars {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 6px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.achievement-avatar-stack {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.achievement-avatar {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 999px;
|
||||
border: 2px solid #020617;
|
||||
background: linear-gradient(135deg, #f97316, #ec4899);
|
||||
color: #020617;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: -8px;
|
||||
}
|
||||
|
||||
.achievement-avatar:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.achievement-count {
|
||||
font-size: 0.75rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.achievement-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 0.76rem;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.achievement-footer-left {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.achievement-footer-right {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.achievement-footer-right svg {
|
||||
transform: translateX(0);
|
||||
transition: transform var(--transition-fast);
|
||||
}
|
||||
|
||||
.achievement-card:hover .achievement-footer-right svg {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
/* Fullscreen detail view */
|
||||
.achievement-detail-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: radial-gradient(circle at top, rgba(10, 15, 30, 0.98), rgba(2, 6, 23, 0.98));
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 220ms ease-out;
|
||||
z-index: 40;
|
||||
}
|
||||
|
||||
.achievement-detail-backdrop.is-open {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.achievement-detail-shell {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 1080px;
|
||||
margin: 18px;
|
||||
border-radius: 24px;
|
||||
background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.92));
|
||||
border: 1px solid rgba(148, 163, 184, 0.35);
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.achievement-detail-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - 36px);
|
||||
}
|
||||
}
|
||||
|
||||
.achievement-detail-media {
|
||||
position: relative;
|
||||
background: radial-gradient(circle at top, #1f2937, #020617 70%);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.achievement-detail-media img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transform: scale(1.03);
|
||||
filter: contrast(1.1) saturate(1.05);
|
||||
}
|
||||
|
||||
.achievement-detail-media-gradient {
|
||||
position: absolute;
|
||||
inset: auto 0 0 0;
|
||||
height: 45%;
|
||||
background: linear-gradient(to top, rgba(15, 23, 42, 0.96), transparent);
|
||||
}
|
||||
|
||||
.achievement-detail-media-inner {
|
||||
position: absolute;
|
||||
inset: auto 0 10px 10px;
|
||||
padding: 12px 12px 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.achievement-detail-chip-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-top: 4px;
|
||||
font-size: 0.76rem;
|
||||
}
|
||||
|
||||
.chip {
|
||||
padding: 4px 9px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.6);
|
||||
background: rgba(15, 23, 42, 0.75);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
.chip.gold {
|
||||
border-color: rgba(250, 204, 21, 0.9);
|
||||
background: rgba(23, 23, 5, 0.92);
|
||||
color: #facc15;
|
||||
}
|
||||
|
||||
.chip.gold svg {
|
||||
color: #facc15;
|
||||
}
|
||||
|
||||
.achievement-detail-body {
|
||||
padding: 18px 18px 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
max-height: calc(100vh - 60px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.achievement-detail-body {
|
||||
max-height: none;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-header-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.detail-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 650;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.detail-kanji {
|
||||
font-size: 0.82rem;
|
||||
letter-spacing: 0.24em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(148, 163, 184, 0.85);
|
||||
}
|
||||
|
||||
.detail-meta-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
font-size: 0.8rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.detail-meta-row span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.detail-divider {
|
||||
height: 1px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(to right, transparent, rgba(148, 163, 184, 0.9), transparent);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.detail-description {
|
||||
font-size: 0.86rem;
|
||||
color: #e5e7eb;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.detail-section-label {
|
||||
font-size: 0.78rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.18em;
|
||||
color: var(--muted);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.detail-athlete-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
||||
gap: 8px;
|
||||
font-size: 0.84rem;
|
||||
}
|
||||
|
||||
.detail-athlete-card {
|
||||
border-radius: 14px;
|
||||
background: radial-gradient(circle at top left, #1f2937, #020617 70%);
|
||||
border: 1px solid rgba(75, 85, 99, 0.9);
|
||||
padding: 8px 9px;
|
||||
}
|
||||
|
||||
.detail-athlete-name {
|
||||
font-weight: 600;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.detail-athlete-role {
|
||||
font-size: 0.78rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.detail-actions-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.detail-actions-left,
|
||||
.detail-actions-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.ghost-button,
|
||||
.primary-button {
|
||||
border-radius: 999px;
|
||||
font-size: 0.8rem;
|
||||
padding: 7px 12px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.6);
|
||||
background: rgba(15, 23, 42, 0.9);
|
||||
color: #e5e7eb;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
cursor: pointer;
|
||||
transition: background 160ms ease-out, border-color 160ms ease-out, transform 160ms ease-out;
|
||||
}
|
||||
|
||||
.ghost-button:hover {
|
||||
background: rgba(15, 23, 42, 1);
|
||||
border-color: rgba(249, 250, 251, 0.9);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.primary-button {
|
||||
background: linear-gradient(135deg, #facc15, #f97316);
|
||||
color: #111827;
|
||||
border-color: transparent;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.primary-button:hover {
|
||||
filter: brightness(1.08);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.close-pill {
|
||||
position: absolute;
|
||||
inset: 12px 12px auto auto;
|
||||
z-index: 10;
|
||||
border-radius: 999px;
|
||||
padding: 4px 9px;
|
||||
font-size: 0.78rem;
|
||||
border: 1px solid rgba(148, 163, 184, 0.7);
|
||||
background: rgba(15, 23, 42, 0.85);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
cursor: pointer;
|
||||
color: #e5e7eb;
|
||||
backdrop-filter: blur(6px);
|
||||
transition: background 140ms ease-out, transform 140ms ease-out, border-color 140ms ease-out;
|
||||
}
|
||||
|
||||
.close-pill:hover {
|
||||
background: rgba(15, 23, 42, 0.98);
|
||||
border-color: rgba(248, 250, 252, 0.9);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.close-pill span.key {
|
||||
font-size: 0.72rem;
|
||||
padding: 0 6px;
|
||||
border-radius: 4px;
|
||||
background: rgba(15, 23, 42, 0.96);
|
||||
border: 1px solid rgba(148, 163, 184, 0.9);
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.achievement-detail-backdrop[data-state="entering"] .achievement-detail-shell {
|
||||
animation: scaleIn 220ms ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes scaleIn {
|
||||
from {
|
||||
transform: translateY(10px) scale(0.96);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.page-subtitle {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<header class="page-header">
|
||||
<div>
|
||||
<div class="page-title">Emperor Taekwondo Academy</div>
|
||||
<div class="page-subtitle">
|
||||
Recent Achievements
|
||||
<span class="highlight">ETA Legacy</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="badge-live">
|
||||
<span class="badge-live-dot"></span>
|
||||
Achievement timeline
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="achievements-grid">
|
||||
<!-- Example card -->
|
||||
<article class="achievement-card" data-achievement-id="thailand-2023">
|
||||
<div class="achievement-media">
|
||||
<img src="https://images.pexels.com/photos/6238030/pexels-photo-6238030.jpeg?auto=compress&cs=tinysrgb&w=1200" alt="ETA Team in competition" />
|
||||
<div class="achievement-medal-pill">
|
||||
<span class="dot"></span>
|
||||
1 Gold • 3 Silver
|
||||
</div>
|
||||
</div>
|
||||
<div class="achievement-body">
|
||||
<div class="achievement-title">
|
||||
<span class="achievement-title-icon">🏆</span>
|
||||
Thailand Open Championships
|
||||
</div>
|
||||
<div class="achievement-meta">
|
||||
<span>📍 Bangkok, Thailand</span>
|
||||
<span>📅 Nov 2023</span>
|
||||
</div>
|
||||
|
||||
<div class="achievement-avatars">
|
||||
<div class="achievement-avatar-stack">
|
||||
<div class="achievement-avatar">H</div>
|
||||
<div class="achievement-avatar">A</div>
|
||||
<div class="achievement-avatar">S</div>
|
||||
<div class="achievement-avatar">M</div>
|
||||
</div>
|
||||
<div class="achievement-count">4 athletes | 6 bouts</div>
|
||||
</div>
|
||||
|
||||
<div class="achievement-footer">
|
||||
<div class="achievement-footer-left">
|
||||
<span>Tap to view story</span>
|
||||
</div>
|
||||
<div class="achievement-footer-right">
|
||||
<span>Full recap</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M7 4L13 10L7 16" stroke="#facc15" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Duplicate with slight changes to see variation -->
|
||||
<article class="achievement-card" data-achievement-id="bahrain-2024">
|
||||
<div class="achievement-media">
|
||||
<img src="https://images.pexels.com/photos/7045451/pexels-photo-7045451.jpeg?auto=compress&cs=tinysrgb&w=1200" alt="Local championship" />
|
||||
<div class="achievement-medal-pill">
|
||||
<span class="dot"></span>
|
||||
2 Gold • 1 Bronze
|
||||
</div>
|
||||
</div>
|
||||
<div class="achievement-body">
|
||||
<div class="achievement-title">
|
||||
<span class="achievement-title-icon">🥋</span>
|
||||
Bahrain National League
|
||||
</div>
|
||||
<div class="achievement-meta">
|
||||
<span>📍 Manama, Bahrain</span>
|
||||
<span>📅 Feb 2024</span>
|
||||
</div>
|
||||
|
||||
<div class="achievement-avatars">
|
||||
<div class="achievement-avatar-stack">
|
||||
<div class="achievement-avatar">N</div>
|
||||
<div class="achievement-avatar">Y</div>
|
||||
<div class="achievement-avatar">R</div>
|
||||
</div>
|
||||
<div class="achievement-count">3 athletes | 4 bouts</div>
|
||||
</div>
|
||||
|
||||
<div class="achievement-footer">
|
||||
<div class="achievement-footer-left">
|
||||
<span>Tap to view story</span>
|
||||
</div>
|
||||
<div class="achievement-footer-right">
|
||||
<span>Full recap</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M7 4L13 10L7 16" stroke="#facc15" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Fullscreen detail view -->
|
||||
<div class="achievement-detail-backdrop" id="achievement-detail" aria-hidden="true">
|
||||
<div class="achievement-detail-shell">
|
||||
<!-- Close -->
|
||||
<button type="button" class="close-pill" id="detail-close">
|
||||
⨉ Close
|
||||
<span class="key">Esc</span>
|
||||
</button>
|
||||
|
||||
<!-- Left: media & quick chips -->
|
||||
<div class="achievement-detail-media">
|
||||
<img id="detail-image" src="" alt="Achievement cover" />
|
||||
<div class="achievement-detail-media-gradient"></div>
|
||||
|
||||
<div class="achievement-detail-media-inner">
|
||||
<div>
|
||||
<div class="chip gold">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M10 2L12.09 7.26L17.8 7.27L13.18 10.74L15.27 16L10 12.52L4.73 16L6.82 10.74L2.2 7.27L7.91 7.26L10 2Z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round" />
|
||||
</svg>
|
||||
1 Gold • 3 Silver
|
||||
</div>
|
||||
<div class="achievement-detail-chip-row">
|
||||
<span class="chip">World Ranking Points</span>
|
||||
<span class="chip">ETA National Team</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chip">
|
||||
<span>📊</span>
|
||||
6 Bouts • 4 Wins
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: text/content -->
|
||||
<div class="achievement-detail-body">
|
||||
<div class="detail-header-row">
|
||||
<div>
|
||||
<div class="detail-kanji">Emperor Taekwondo Academy</div>
|
||||
<h2 class="detail-title" id="detail-title">Thailand Open Championships 2023</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-meta-row">
|
||||
<span>📍 <span id="detail-location">Bangkok, Thailand</span></span>
|
||||
<span>📅 <span id="detail-date">November 2023</span></span>
|
||||
<span>🥋 World Taekwondo G2 Event</span>
|
||||
</div>
|
||||
|
||||
<div class="detail-divider"></div>
|
||||
|
||||
<section>
|
||||
<div class="detail-section-label">Achievement story</div>
|
||||
<p class="detail-description" id="detail-description">
|
||||
Under the leadership of Grand Master Sami Al Manai, the ETA squad delivered a standout performance at the Thailand Open Championships.
|
||||
The team converted early-round momentum into podium finishes, securing one gold and three silver medals against a deep international field.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="detail-section-label">Athletes</div>
|
||||
<div class="detail-athlete-grid" id="detail-athletes">
|
||||
<div class="detail-athlete-card">
|
||||
<div class="detail-athlete-name">Hanan</div>
|
||||
<div class="detail-athlete-role">Senior Poomsae • Gold</div>
|
||||
</div>
|
||||
<div class="detail-athlete-card">
|
||||
<div class="detail-athlete-name">Asmahan</div>
|
||||
<div class="detail-athlete-role">Kyorugi -49kg • Silver</div>
|
||||
</div>
|
||||
<div class="detail-athlete-card">
|
||||
<div class="detail-athlete-name">Hoor Sayed</div>
|
||||
<div class="detail-athlete-role">Junior Poomsae • Silver</div>
|
||||
</div>
|
||||
<div class="detail-athlete-card">
|
||||
<div class="detail-athlete-name">Mohammed</div>
|
||||
<div class="detail-athlete-role">Kyorugi -63kg • Silver</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="detail-divider"></div>
|
||||
|
||||
<div class="detail-actions-row">
|
||||
<div class="detail-actions-left">
|
||||
<button type="button" class="ghost-button">
|
||||
📷 View gallery
|
||||
</button>
|
||||
<button type="button" class="ghost-button">
|
||||
📄 Download summary
|
||||
</button>
|
||||
</div>
|
||||
<div class="detail-actions-right">
|
||||
<button type="button" class="primary-button">
|
||||
🔗 Share highlight
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const detailBackdrop = document.getElementById("achievement-detail");
|
||||
const detailClose = document.getElementById("detail-close");
|
||||
|
||||
const detailImage = document.getElementById("detail-image");
|
||||
const detailTitle = document.getElementById("detail-title");
|
||||
const detailLocation = document.getElementById("detail-location");
|
||||
const detailDate = document.getElementById("detail-date");
|
||||
const detailDescription = document.getElementById("detail-description");
|
||||
|
||||
const ACHIEVEMENTS = {
|
||||
"thailand-2023": {
|
||||
image:
|
||||
"https://images.pexels.com/photos/6238030/pexels-photo-6238030.jpeg?auto=compress&cs=tinysrgb&w=1600",
|
||||
title: "Thailand Open Championships 2023",
|
||||
location: "Bangkok, Thailand",
|
||||
date: "November 2023",
|
||||
description:
|
||||
"Under the leadership of Grand Master Sami Al Manai, the ETA squad delivered a standout performance at the Thailand Open Championships, securing one gold and three silver medals against a deep international field.",
|
||||
},
|
||||
"bahrain-2024": {
|
||||
image:
|
||||
"https://images.pexels.com/photos/7045451/pexels-photo-7045451.jpeg?auto=compress&cs=tinysrgb&w=1600",
|
||||
title: "Bahrain National League 2024",
|
||||
location: "Manama, Bahrain",
|
||||
date: "February 2024",
|
||||
description:
|
||||
"ETA athletes dominated the domestic stage at the Bahrain National League with explosive kicking combinations and disciplined poomsae, converting their preparation into multiple podium finishes.",
|
||||
},
|
||||
};
|
||||
|
||||
function openDetail(id) {
|
||||
const data = ACHIEVEMENTS[id];
|
||||
if (!data) return;
|
||||
|
||||
detailImage.src = data.image;
|
||||
detailTitle.textContent = data.title;
|
||||
detailLocation.textContent = data.location;
|
||||
detailDate.textContent = data.date;
|
||||
detailDescription.textContent = data.description;
|
||||
|
||||
detailBackdrop.dataset.state = "entering";
|
||||
detailBackdrop.classList.add("is-open");
|
||||
detailBackdrop.setAttribute("aria-hidden", "false");
|
||||
}
|
||||
|
||||
function closeDetail() {
|
||||
detailBackdrop.classList.remove("is-open");
|
||||
detailBackdrop.setAttribute("aria-hidden", "true");
|
||||
}
|
||||
|
||||
document.querySelectorAll(".achievement-card").forEach((card) => {
|
||||
card.addEventListener("click", () => {
|
||||
const id = card.getAttribute("data-achievement-id");
|
||||
openDetail(id);
|
||||
});
|
||||
});
|
||||
|
||||
detailClose.addEventListener("click", closeDetail);
|
||||
|
||||
detailBackdrop.addEventListener("click", (event) => {
|
||||
if (event.target === detailBackdrop) {
|
||||
closeDetail();
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener("keydown", (event) => {
|
||||
if (event.key === "Escape") closeDetail();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user