diff --git a/templates/acheivmentsExample.html b/templates/acheivmentsExample.html
new file mode 100644
index 0000000..b1daf97
--- /dev/null
+++ b/templates/acheivmentsExample.html
@@ -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>
