Add templates/acheivments/acheivmentsExample2.html
This commit is contained in:
parent
ace1194648
commit
28725919e9
867
templates/acheivments/acheivmentsExample2.html
Normal file
867
templates/acheivments/acheivmentsExample2.html
Normal file
@ -0,0 +1,867 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>ETA Achievements – Spotlight Overlay</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<style>
|
||||
:root {
|
||||
--eta-bg: #020314;
|
||||
--eta-panel: rgba(15, 23, 42, 0.92);
|
||||
--eta-glass: rgba(15, 23, 42, 0.78);
|
||||
--eta-border: rgba(148, 163, 184, 0.6);
|
||||
--eta-gold: #facc15;
|
||||
--eta-gold-soft: rgba(250, 204, 21, 0.18);
|
||||
--eta-text: #e5e7eb;
|
||||
--eta-muted: #9ca3af;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
background:
|
||||
radial-gradient(circle at top, #1f2937 0, #020314 55%, #000 100%);
|
||||
color: var(--eta-text);
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
padding: 32px 16px 40px;
|
||||
}
|
||||
|
||||
.eta-page {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.eta-page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.eta-page-title {
|
||||
font-size: 0.86rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.18em;
|
||||
color: var(--eta-muted);
|
||||
}
|
||||
|
||||
.eta-page-subtitle {
|
||||
font-size: 1.7rem;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.eta-page-subtitle span {
|
||||
font-size: 0.8rem;
|
||||
padding: 3px 10px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.7);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.18em;
|
||||
color: var(--eta-muted);
|
||||
}
|
||||
|
||||
.eta-page-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 5px 11px;
|
||||
border-radius: 999px;
|
||||
background: rgba(15, 23, 42, 0.9);
|
||||
border: 1px solid rgba(148, 163, 184, 0.7);
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.eta-page-pill-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 999px;
|
||||
background: #22c55e;
|
||||
box-shadow: 0 0 12px rgba(34, 197, 94, 0.9);
|
||||
}
|
||||
|
||||
.eta-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.eta-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 22px;
|
||||
padding: 14px 16px;
|
||||
background:
|
||||
radial-gradient(circle at top left, #111827, #020617 50%, #020314 100%);
|
||||
border: 1px solid rgba(75, 85, 99, 0.8);
|
||||
color: var(--eta-text);
|
||||
cursor: pointer;
|
||||
transform-origin: center;
|
||||
transition:
|
||||
transform 160ms ease-out,
|
||||
box-shadow 160ms ease-out,
|
||||
border-color 180ms ease-out;
|
||||
}
|
||||
|
||||
.eta-card-glow {
|
||||
position: absolute;
|
||||
inset: -40%;
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(250, 204, 21, 0.2), transparent 55%),
|
||||
radial-gradient(circle at bottom right, rgba(59, 130, 246, 0.18), transparent 55%);
|
||||
opacity: 0;
|
||||
transition: opacity 200ms ease-out;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.eta-card-inner {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.eta-card:hover {
|
||||
transform: translateY(-3px) scale(1.01);
|
||||
box-shadow: 0 20px 45px rgba(15, 23, 42, 0.95);
|
||||
border-color: var(--eta-gold);
|
||||
}
|
||||
|
||||
.eta-card:hover .eta-card-glow {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.eta-card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.eta-card-eyebrow {
|
||||
font-size: 0.72rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.18em;
|
||||
color: var(--eta-muted);
|
||||
}
|
||||
|
||||
.eta-card-medals {
|
||||
font-size: 0.8rem;
|
||||
padding: 2px 10px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(250, 204, 21, 0.9);
|
||||
background: var(--eta-gold-soft);
|
||||
color: var(--eta-gold);
|
||||
}
|
||||
|
||||
.eta-card-title {
|
||||
margin: 0 0 3px;
|
||||
font-size: 1.02rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.eta-card-meta {
|
||||
margin: 0 0 8px;
|
||||
font-size: 0.8rem;
|
||||
color: var(--eta-muted);
|
||||
}
|
||||
|
||||
.eta-card-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.eta-card-avatars {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.eta-avatar {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 999px;
|
||||
border: 2px solid #020617;
|
||||
background: conic-gradient(from 200deg, #fb923c, #f97316, #e11d48, #fb923c);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
color: #020617;
|
||||
margin-left: -8px;
|
||||
}
|
||||
|
||||
.eta-avatar:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.eta-card-cta {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: var(--eta-gold);
|
||||
}
|
||||
|
||||
.eta-card-cta-icon {
|
||||
display: inline-block;
|
||||
transition: transform 150ms ease-out;
|
||||
}
|
||||
|
||||
.eta-card:hover .eta-card-cta-icon {
|
||||
transform: translateY(-1px) translateX(2px);
|
||||
}
|
||||
|
||||
.eta-spotlight {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 60;
|
||||
}
|
||||
|
||||
.eta-spotlight.is-open {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.eta-spotlight-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
radial-gradient(circle at top, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.98)),
|
||||
radial-gradient(circle at bottom right, rgba(250, 204, 21, 0.16), transparent 55%);
|
||||
}
|
||||
|
||||
.eta-spotlight-frame {
|
||||
position: relative;
|
||||
width: min(1120px, 100% - 32px);
|
||||
max-height: calc(100vh - 40px);
|
||||
border-radius: 28px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.7);
|
||||
background: radial-gradient(circle at top left, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.9));
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
|
||||
overflow: hidden;
|
||||
box-shadow:
|
||||
0 30px 70px rgba(15, 23, 42, 0.9),
|
||||
0 0 0 1px rgba(15, 23, 42, 0.8);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.eta-spotlight-frame {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
max-height: calc(100vh - 24px);
|
||||
}
|
||||
}
|
||||
|
||||
.eta-orbit-ring {
|
||||
position: absolute;
|
||||
inset: -40%;
|
||||
pointer-events: none;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.eta-orbit {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
margin: auto;
|
||||
width: 340px;
|
||||
height: 340px;
|
||||
border-radius: 999px;
|
||||
border: 1px dashed rgba(148, 163, 184, 0.4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(148, 163, 184, 0.7);
|
||||
animation: eta-orbit-spin 28s linear infinite;
|
||||
}
|
||||
|
||||
.eta-orbit-gold {
|
||||
border-color: rgba(250, 204, 21, 0.7);
|
||||
color: rgba(250, 204, 21, 0.9);
|
||||
}
|
||||
|
||||
.eta-orbit-silver {
|
||||
width: 420px;
|
||||
height: 420px;
|
||||
animation-direction: reverse;
|
||||
}
|
||||
|
||||
.eta-orbit-bronze {
|
||||
width: 260px;
|
||||
height: 260px;
|
||||
animation-duration: 34s;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
@keyframes eta-orbit-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.eta-spotlight-left {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 16px;
|
||||
gap: 10px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.eta-spotlight-art {
|
||||
position: relative;
|
||||
border-radius: 22px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(30, 64, 175, 0.8);
|
||||
box-shadow: 0 16px 45px rgba(15, 23, 42, 0.9);
|
||||
}
|
||||
|
||||
.eta-spotlight-art img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 320px;
|
||||
object-fit: cover;
|
||||
filter: contrast(1.05) saturate(1.08);
|
||||
transform: scale(1.03);
|
||||
}
|
||||
|
||||
.eta-art-gradient {
|
||||
position: absolute;
|
||||
inset: auto 0 0 0;
|
||||
height: 52%;
|
||||
background: linear-gradient(to top, rgba(15, 23, 42, 0.96), transparent);
|
||||
}
|
||||
|
||||
.eta-art-label {
|
||||
position: absolute;
|
||||
left: 14px;
|
||||
right: 14px;
|
||||
bottom: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.eta-art-badge {
|
||||
align-self: flex-start;
|
||||
font-size: 0.74rem;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
padding: 2px 10px;
|
||||
border-radius: 999px;
|
||||
background: rgba(15, 23, 42, 0.9);
|
||||
border: 1px solid rgba(148, 163, 184, 0.7);
|
||||
color: var(--eta-muted);
|
||||
}
|
||||
|
||||
#eta-spotlight-title {
|
||||
margin: 4px 0 0;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
#eta-spotlight-subtitle {
|
||||
margin: 2px 0 0;
|
||||
font-size: 0.8rem;
|
||||
color: var(--eta-muted);
|
||||
}
|
||||
|
||||
.eta-art-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.eta-art-stats {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
.eta-stat {
|
||||
padding: 8px 10px;
|
||||
border-radius: 14px;
|
||||
background: rgba(15, 23, 42, 0.86);
|
||||
border: 1px solid rgba(55, 65, 81, 0.9);
|
||||
}
|
||||
|
||||
.eta-stat-label {
|
||||
display: block;
|
||||
font-size: 0.7rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.14em;
|
||||
color: var(--eta-muted);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.eta-stat-value {
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.eta-spotlight-right {
|
||||
position: relative;
|
||||
padding: 14px 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: radial-gradient(circle at top right, rgba(30, 64, 175, 0.5), transparent 55%);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.eta-right-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.eta-right-eyebrow {
|
||||
font-size: 0.7rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.2em;
|
||||
color: var(--eta-muted);
|
||||
}
|
||||
|
||||
.eta-right-title {
|
||||
margin: 2px 0 0;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.eta-close {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 0.78rem;
|
||||
border-radius: 999px;
|
||||
padding: 4px 10px;
|
||||
border: 1px solid var(--eta-border);
|
||||
background: rgba(15, 23, 42, 0.9);
|
||||
color: var(--eta-text);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.eta-close span {
|
||||
font-size: 0.7rem;
|
||||
padding: 1px 6px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.8);
|
||||
color: var(--eta-muted);
|
||||
}
|
||||
|
||||
.eta-right-body {
|
||||
font-size: 0.84rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
border-radius: 18px;
|
||||
padding: 10px 10px 12px;
|
||||
background: var(--eta-glass);
|
||||
border: 1px solid var(--eta-border);
|
||||
box-shadow: 0 12px 35px rgba(15, 23, 42, 0.85);
|
||||
backdrop-filter: blur(14px);
|
||||
max-height: calc(100vh - 120px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.eta-right-story {
|
||||
max-height: 96px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.eta-right-divider {
|
||||
height: 1px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(to right, transparent, rgba(148, 163, 184, 0.8), transparent);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.eta-right-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.eta-section-heading {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 0.78rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.17em;
|
||||
color: var(--eta-muted);
|
||||
}
|
||||
|
||||
.eta-section-pill {
|
||||
font-size: 0.7rem;
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.7);
|
||||
}
|
||||
|
||||
.eta-athletes-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.eta-athletes-grid {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.eta-athlete {
|
||||
border-radius: 14px;
|
||||
padding: 7px 9px;
|
||||
background: rgba(15, 23, 42, 0.95);
|
||||
border: 1px solid rgba(55, 65, 81, 1);
|
||||
}
|
||||
|
||||
.eta-athlete-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.eta-athlete-avatar {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 999px;
|
||||
background: radial-gradient(circle at 30% 0, #f97316, #e11d48);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
color: #020617;
|
||||
}
|
||||
|
||||
.eta-athlete-header h4 {
|
||||
margin: 0 0 1px;
|
||||
font-size: 0.86rem;
|
||||
}
|
||||
|
||||
.eta-athlete-header p {
|
||||
margin: 0;
|
||||
font-size: 0.76rem;
|
||||
color: var(--eta-muted);
|
||||
}
|
||||
|
||||
.eta-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.eta-btn-ghost,
|
||||
.eta-btn-primary {
|
||||
font-size: 0.8rem;
|
||||
padding: 6px 10px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--eta-border);
|
||||
background: transparent;
|
||||
color: var(--eta-text);
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.eta-btn-primary {
|
||||
background: linear-gradient(135deg, var(--eta-gold), #fb923c);
|
||||
border-color: transparent;
|
||||
color: #111827;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="eta-page">
|
||||
<header class="eta-page-header">
|
||||
<div>
|
||||
<div class="eta-page-title">Emperor Taekwondo Academy</div>
|
||||
<div class="eta-page-subtitle">
|
||||
Achievement Spotlight
|
||||
<span>Legacy Timeline</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="eta-page-pill">
|
||||
<span class="eta-page-pill-dot"></span>
|
||||
Interactive highlight mode
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="eta-grid">
|
||||
<article class="eta-card" data-achievement-id="thailand-2023">
|
||||
<div class="eta-card-glow"></div>
|
||||
<div class="eta-card-inner">
|
||||
<div class="eta-card-header">
|
||||
<span class="eta-card-eyebrow">International</span>
|
||||
<span class="eta-card-medals">🥇 1 · 🥈 3</span>
|
||||
</div>
|
||||
<h3 class="eta-card-title">Thailand Open Championships</h3>
|
||||
<p class="eta-card-meta">Bangkok, Thailand • November 2023</p>
|
||||
|
||||
<div class="eta-card-footer">
|
||||
<div class="eta-card-avatars">
|
||||
<span class="eta-avatar">H</span>
|
||||
<span class="eta-avatar">A</span>
|
||||
<span class="eta-avatar">S</span>
|
||||
<span class="eta-avatar">M</span>
|
||||
</div>
|
||||
<div class="eta-card-cta">
|
||||
<span>Open spotlight</span>
|
||||
<span class="eta-card-cta-icon">↗</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="eta-card" data-achievement-id="bahrain-2024">
|
||||
<div class="eta-card-glow"></div>
|
||||
<div class="eta-card-inner">
|
||||
<div class="eta-card-header">
|
||||
<span class="eta-card-eyebrow">National</span>
|
||||
<span class="eta-card-medals">🥇 2 · 🥉 1</span>
|
||||
</div>
|
||||
<h3 class="eta-card-title">Bahrain National League</h3>
|
||||
<p class="eta-card-meta">Manama, Bahrain • February 2024</p>
|
||||
|
||||
<div class="eta-card-footer">
|
||||
<div class="eta-card-avatars">
|
||||
<span class="eta-avatar">N</span>
|
||||
<span class="eta-avatar">Y</span>
|
||||
<span class="eta-avatar">R</span>
|
||||
</div>
|
||||
<div class="eta-card-cta">
|
||||
<span>Open spotlight</span>
|
||||
<span class="eta-card-cta-icon">↗</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<div class="eta-spotlight" id="eta-spotlight" aria-hidden="true">
|
||||
<div class="eta-spotlight-bg"></div>
|
||||
|
||||
<div class="eta-spotlight-frame">
|
||||
<div class="eta-orbit-ring">
|
||||
<div class="eta-orbit eta-orbit-gold">GOLD</div>
|
||||
<div class="eta-orbit eta-orbit-silver">SILVER</div>
|
||||
<div class="eta-orbit eta-orbit-bronze">SQUAD</div>
|
||||
</div>
|
||||
|
||||
<section class="eta-spotlight-left">
|
||||
<div class="eta-spotlight-art">
|
||||
<img
|
||||
id="eta-spotlight-image"
|
||||
src="https://images.pexels.com/photos/6238030/pexels-photo-6238030.jpeg?auto=compress&cs=tinysrgb&w=1600"
|
||||
alt="ETA team at competition"
|
||||
/>
|
||||
<div class="eta-art-gradient"></div>
|
||||
|
||||
<div class="eta-art-label">
|
||||
<span class="eta-art-badge">ETA • Legacy Series 01</span>
|
||||
<h2 id="eta-spotlight-title">Thailand Open Championships</h2>
|
||||
<p id="eta-spotlight-subtitle">Bangkok, Thailand • November 2023</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="eta-art-stats">
|
||||
<div class="eta-stat">
|
||||
<span class="eta-stat-label">Medals</span>
|
||||
<span class="eta-stat-value" id="eta-spotlight-medals">1 Gold • 3 Silver</span>
|
||||
</div>
|
||||
<div class="eta-stat">
|
||||
<span class="eta-stat-label">Bouts</span>
|
||||
<span class="eta-stat-value" id="eta-spotlight-bouts">6 total • 4 wins</span>
|
||||
</div>
|
||||
<div class="eta-stat">
|
||||
<span class="eta-stat-label">Category</span>
|
||||
<span class="eta-stat-value" id="eta-spotlight-category">World Taekwondo G2</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="eta-spotlight-right">
|
||||
<header class="eta-right-header">
|
||||
<div>
|
||||
<span class="eta-right-eyebrow">Emperor Taekwondo Academy</span>
|
||||
<h3 class="eta-right-title">Achievement Story</h3>
|
||||
</div>
|
||||
<button type="button" class="eta-close" id="eta-spotlight-close">
|
||||
<span>ESC</span> ×
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div class="eta-right-body">
|
||||
<div class="eta-right-story">
|
||||
<p id="eta-spotlight-story">
|
||||
Under the direction of Grand Master Sami Al Manai, the ETA squad turned a packed
|
||||
Bangkok arena into a stage for Bahrain. Precision poomsae and fearless kyorugi
|
||||
exchanges carried the team into finals night, closing the event with one gold and
|
||||
three silver medals against a stacked international draw.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="eta-right-divider"></div>
|
||||
|
||||
<section class="eta-right-section">
|
||||
<div class="eta-section-heading">
|
||||
<span>Squad</span>
|
||||
<span class="eta-section-pill" id="eta-spotlight-squad-label">4 athletes • 3 categories</span>
|
||||
</div>
|
||||
<div class="eta-athletes-grid" id="eta-spotlight-athletes">
|
||||
<article class="eta-athlete">
|
||||
<div class="eta-athlete-header">
|
||||
<span class="eta-athlete-avatar">H</span>
|
||||
<div>
|
||||
<h4>Hanan</h4>
|
||||
<p>Senior Poomsae • Gold</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="eta-athlete">
|
||||
<div class="eta-athlete-header">
|
||||
<span class="eta-athlete-avatar">A</span>
|
||||
<div>
|
||||
<h4>Asmahan</h4>
|
||||
<p>Kyorugi -49kg • Silver</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="eta-athlete">
|
||||
<div class="eta-athlete-header">
|
||||
<span class="eta-athlete-avatar">H</span>
|
||||
<div>
|
||||
<h4>Hoor Sayed</h4>
|
||||
<p>Junior Poomsae • Silver</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="eta-athlete">
|
||||
<div class="eta-athlete-header">
|
||||
<span class="eta-athlete-avatar">M</span>
|
||||
<div>
|
||||
<h4>Mohammed</h4>
|
||||
<p>Kyorugi -63kg • Silver</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="eta-right-divider"></div>
|
||||
|
||||
<section class="eta-right-section">
|
||||
<div class="eta-section-heading">
|
||||
<span>Actions</span>
|
||||
</div>
|
||||
<div class="eta-actions">
|
||||
<button type="button" class="eta-btn-ghost">📷 Open photo reel</button>
|
||||
<button type="button" class="eta-btn-ghost">📄 Generate PDF recap</button>
|
||||
<button type="button" class="eta-btn-primary">🔗 Share public highlight</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const etaSpotlight = document.getElementById("eta-spotlight");
|
||||
const etaCloseBtn = document.getElementById("eta-spotlight-close");
|
||||
const etaCards = document.querySelectorAll(".eta-card");
|
||||
|
||||
const ETA_DATA = {
|
||||
"thailand-2023": {
|
||||
title: "Thailand Open Championships",
|
||||
subtitle: "Bangkok, Thailand • November 2023",
|
||||
image:
|
||||
"https://images.pexels.com/photos/6238030/pexels-photo-6238030.jpeg?auto=compress&cs=tinysrgb&w=1600",
|
||||
medals: "1 Gold • 3 Silver",
|
||||
bouts: "6 total • 4 wins",
|
||||
category: "World Taekwondo G2",
|
||||
story:
|
||||
"Under the direction of Grand Master Sami Al Manai, the ETA squad turned a packed Bangkok arena into a stage for Bahrain. Precision poomsae and fearless kyorugi exchanges carried the team into finals night, closing the event with one gold and three silver medals against a stacked international draw.",
|
||||
squadLabel: "4 athletes • 3 categories",
|
||||
},
|
||||
"bahrain-2024": {
|
||||
title: "Bahrain National League",
|
||||
subtitle: "Manama, Bahrain • February 2024",
|
||||
image:
|
||||
"https://images.pexels.com/photos/7045451/pexels-photo-7045451.jpeg?auto=compress&cs=tinysrgb&w=1600",
|
||||
medals: "2 Gold • 1 Bronze",
|
||||
bouts: "4 total • 3 wins",
|
||||
category: "National Ranking Event",
|
||||
story:
|
||||
"On home soil, ETA translated relentless training blocks into decisive performances at the Bahrain National League. From explosive kyorugi counters to composed poomsae runs, the team left the event with multiple gold medals and a loud message for the rest of the season.",
|
||||
squadLabel: "3 athletes • 2 categories",
|
||||
},
|
||||
};
|
||||
|
||||
function openSpotlight(id) {
|
||||
const data = ETA_DATA[id];
|
||||
if (!data) return;
|
||||
|
||||
document.getElementById("eta-spotlight-title").textContent = data.title;
|
||||
document.getElementById("eta-spotlight-subtitle").textContent = data.subtitle;
|
||||
document.getElementById("eta-spotlight-image").src = data.image;
|
||||
document.getElementById("eta-spotlight-medals").textContent = data.medals;
|
||||
document.getElementById("eta-spotlight-bouts").textContent = data.bouts;
|
||||
document.getElementById("eta-spotlight-category").textContent = data.category;
|
||||
document.getElementById("eta-spotlight-story").textContent = data.story;
|
||||
document.getElementById("eta-spotlight-squad-label").textContent = data.squadLabel;
|
||||
|
||||
etaSpotlight.classList.add("is-open");
|
||||
etaSpotlight.setAttribute("aria-hidden", "false");
|
||||
}
|
||||
|
||||
function closeSpotlight() {
|
||||
etaSpotlight.classList.remove("is-open");
|
||||
etaSpotlight.setAttribute("aria-hidden", "true");
|
||||
}
|
||||
|
||||
etaCards.forEach((card) => {
|
||||
card.addEventListener("click", () => {
|
||||
const id = card.getAttribute("data-achievement-id");
|
||||
openSpotlight(id);
|
||||
});
|
||||
});
|
||||
|
||||
etaCloseBtn.addEventListener("click", closeSpotlight);
|
||||
|
||||
etaSpotlight.addEventListener("click", (e) => {
|
||||
if (e.target === etaSpotlight || e.target.classList.contains("eta-spotlight-bg")) {
|
||||
closeSpotlight();
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Escape") closeSpotlight();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user