2505 lines
116 KiB
HTML
2505 lines
116 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Club Profile | TAKEONE Premium</title>
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
|
||
<style>
|
||
:root {
|
||
--primary: #ff3131;
|
||
--dark: #0f172a;
|
||
--secondary-bg: #f8fafc;
|
||
--muted-foreground: #64748b;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Plus Jakarta Sans', sans-serif;
|
||
background-color: #f1f5f9;
|
||
color: #1e293b;
|
||
}
|
||
|
||
.page-container {
|
||
max-width: 1200px;
|
||
margin: 30px auto;
|
||
padding: 0 15px;
|
||
}
|
||
|
||
/* HERO with image + hover video, layout preserved */
|
||
.hero-banner {
|
||
min-height: 580px;
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
padding: 45px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* Background image layer (your original image) */
|
||
.hero-bg-image {
|
||
position: absolute;
|
||
inset: 0;
|
||
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.95)),
|
||
url('https://zcwfreuywtlrrgevhtmo.supabase.co/storage/v1/object/public/avatars/3f9a5abf-a9c8-46de-ad7f-0466a8c1e054/club-bbcc719f-7fd5-41b6-b2c0-3834a4e94018-gallery-1760556106860.jpg') center/cover;
|
||
z-index: 0;
|
||
opacity: 1;
|
||
transition: opacity 0.5s ease;
|
||
}
|
||
|
||
/* Background video layer */
|
||
.hero-bg-video {
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 0;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
transition: opacity 0.5s ease;
|
||
}
|
||
|
||
.hero-bg-video iframe {
|
||
width: 100%;
|
||
height: 100%;
|
||
border: 0;
|
||
}
|
||
|
||
/* When video is ready, allow hover to fade image → video */
|
||
.hero-banner.video-ready:hover .hero-bg-video {
|
||
opacity: 1;
|
||
}
|
||
|
||
.hero-banner.video-ready:hover .hero-bg-image {
|
||
opacity: 0;
|
||
}
|
||
|
||
/* Foreground content stays on top exactly where it was */
|
||
.banner-top,
|
||
.banner-bottom {
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.banner-top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.club-logo-wrapper {
|
||
width: 150px;
|
||
height: 150px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
/*box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);*/
|
||
}
|
||
|
||
.glass-hub {
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
|
||
.hub-link {
|
||
width: 44px;
|
||
height: 44px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: white;
|
||
text-decoration: none;
|
||
border-radius: 22px;
|
||
transition: 0.3s;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
backdrop-filter: blur(12px);
|
||
padding: 10px;
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
.hub-link:hover {
|
||
background: var(--primary);
|
||
transform: translateY(-3px);
|
||
}
|
||
|
||
.banner-bottom {
|
||
margin-bottom: 75px;
|
||
}
|
||
|
||
.stats-row {
|
||
display: flex;
|
||
gap: 50px;
|
||
/*margin-top: 35px;*/
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.stat-item {
|
||
border-left: 3px solid var(--primary);
|
||
padding-left: 20px;
|
||
}
|
||
|
||
.stat-item h3 {
|
||
color: white;
|
||
font-weight: 800;
|
||
margin: 0;
|
||
font-size: 1.8rem;
|
||
}
|
||
|
||
.stat-item span {
|
||
color: rgba(255, 255, 255, 0.5);
|
||
font-size: 0.7rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 1.5px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.stat-pill {
|
||
border-radius: 999px;
|
||
background: rgba(15, 23, 42, 0.8);
|
||
color: #e5e7eb;
|
||
padding: 8px 16px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 12px;
|
||
margin-top: 10px;
|
||
border: 1px solid rgba(148, 163, 184, 0.5);
|
||
}
|
||
|
||
.stat-pill i {
|
||
color: #facc15;
|
||
}
|
||
|
||
.content-card {
|
||
background: white;
|
||
margin-top: -65px;
|
||
position: relative;
|
||
z-index: 10;
|
||
padding: 45px;
|
||
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.nav-pills .nav-link {
|
||
border-radius: 18px;
|
||
padding: 15px 30px;
|
||
font-weight: 700;
|
||
color: #64748b;
|
||
margin: 0 5px;
|
||
border: 1px solid transparent;
|
||
}
|
||
|
||
.nav-pills .nav-link.active {
|
||
background: var(--primary) !important;
|
||
color: white;
|
||
box-shadow: 0 12px 24px rgba(255, 49, 49, 0.25);
|
||
}
|
||
|
||
.perk-card {
|
||
border-radius: 24px;
|
||
overflow: hidden;
|
||
position: relative;
|
||
height: 200px;
|
||
border: none;
|
||
transition: 0.3s;
|
||
}
|
||
|
||
.perk-card img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
transition: 0.5s;
|
||
}
|
||
|
||
.perk-overlay {
|
||
position: absolute;
|
||
inset: 0;
|
||
background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
|
||
padding: 20px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.perk-card:hover img {
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
.perk-card:hover {
|
||
box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.25);
|
||
transform: translateY(-4px);
|
||
}
|
||
|
||
.perk-badge {
|
||
position: absolute;
|
||
top: 15px;
|
||
right: 15px;
|
||
background: var(--primary);
|
||
color: white;
|
||
padding: 5px 12px;
|
||
border-radius: 10px;
|
||
font-weight: 800;
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.mini-trainer {
|
||
background: #f8fafc;
|
||
border-radius: 20px;
|
||
padding: 15px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 15px;
|
||
border: 1px solid #e2e8f0;
|
||
transition: 0.3s;
|
||
}
|
||
|
||
.mini-trainer:hover {
|
||
border-color: var(--primary);
|
||
background: white;
|
||
}
|
||
|
||
.mini-pfp {
|
||
width: 60px;
|
||
height: 60px;
|
||
border-radius: 15px;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.fac-preview {
|
||
border-radius: 20px;
|
||
height: 160px;
|
||
object-fit: cover;
|
||
width: 100%;
|
||
}
|
||
|
||
.grid-packages {
|
||
display: grid;
|
||
grid-template-columns: repeat(1, 1fr);
|
||
gap: 1.5rem;
|
||
}
|
||
|
||
@media (min-width: 768px) {
|
||
.grid-packages {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
}
|
||
|
||
@media (min-width: 1024px) {
|
||
.grid-packages {
|
||
grid-template-columns: repeat(3, 1fr);
|
||
}
|
||
}
|
||
|
||
.package-card {
|
||
border: 1px solid #edf2f7;
|
||
overflow: hidden;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.package-card:hover {
|
||
box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.25);
|
||
transform: translateY(-4px);
|
||
}
|
||
|
||
.package-img-wrapper {
|
||
width: 100%;
|
||
aspect-ratio: 16/9;
|
||
overflow: hidden;
|
||
background: #f1f5f9;
|
||
}
|
||
|
||
.package-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
object-position: top;
|
||
}
|
||
|
||
.activity-item {
|
||
border: 1px solid #e2e8f0;
|
||
padding: 12px;
|
||
background: rgba(248, 250, 252, 0.5);
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.instructor-tag {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
background: rgba(255, 49, 49, 0.1);
|
||
border-radius: 100px;
|
||
padding: 4px 8px;
|
||
}
|
||
|
||
.instructor-img {
|
||
width: 20px;
|
||
height: 20px;
|
||
border-radius: 50%;
|
||
border: 1px solid rgba(255, 49, 49, 0.2);
|
||
}
|
||
|
||
.badge-pill {
|
||
font-size: 10px;
|
||
font-weight: 600;
|
||
padding: 4px 10px;
|
||
border-radius: 100px;
|
||
border: 1px solid #e2e8f0;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.bg-secondary-light {
|
||
background-color: #f1f5f9;
|
||
color: #475569;
|
||
border: none;
|
||
}
|
||
|
||
.chart-box {
|
||
background: #f8fafc;
|
||
border-radius: 24px;
|
||
padding: 25px;
|
||
border: 1px solid #e2e8f0;
|
||
}
|
||
|
||
.class-card {
|
||
border-radius: 18px;
|
||
border: 1px solid #e2e8f0;
|
||
background: #f8fafc;
|
||
display: flex;
|
||
gap: 14px;
|
||
padding: 16px;
|
||
align-items: stretch;
|
||
transition: 0.25s;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.class-card:hover {
|
||
background: white;
|
||
box-shadow: 0 10px 18px rgba(15, 23, 42, 0.08);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.class-thumb {
|
||
width: 96px;
|
||
border-radius: 14px;
|
||
overflow: hidden;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.class-thumb img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.class-meta {
|
||
font-size: 10px;
|
||
}
|
||
|
||
.status-chip {
|
||
font-size: 10px;
|
||
font-weight: 700;
|
||
border-radius: 999px;
|
||
padding: 3px 10px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
border: 1px solid transparent;
|
||
}
|
||
|
||
.status-ongoing {
|
||
background: #ecfdf3;
|
||
color: #166534;
|
||
border-color: #bbf7d0;
|
||
}
|
||
|
||
.status-bookable {
|
||
background: #eff6ff;
|
||
color: #1d4ed8;
|
||
border-color: #bfdbfe;
|
||
}
|
||
|
||
.status-full {
|
||
background: #fef2f2;
|
||
color: #b91c1c;
|
||
border-color: #fecaca;
|
||
}
|
||
|
||
.pill-tag {
|
||
font-size: 10px;
|
||
border-radius: 999px;
|
||
padding: 3px 8px;
|
||
background: #e2e8f0;
|
||
color: #475569;
|
||
}
|
||
|
||
.news-timeline {
|
||
position: relative;
|
||
padding-left: 30px;
|
||
}
|
||
|
||
.news-timeline::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 12px;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 3px;
|
||
background: linear-gradient(to bottom, #e2e8f0, #f1f5f9);
|
||
}
|
||
|
||
.timeline-date {
|
||
position: relative;
|
||
margin: 8px 0 12px;
|
||
padding-left: 8px;
|
||
}
|
||
|
||
.timeline-date span {
|
||
display: inline-block;
|
||
background: #0f172a;
|
||
color: #e5e7eb;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
padding: 4px 10px;
|
||
border-radius: 999px;
|
||
box-shadow: 0 4px 10px rgba(15, 23, 42, 0.25);
|
||
}
|
||
|
||
.news-card {
|
||
background: white;
|
||
border: 1px solid #e2e8f0;
|
||
border-radius: 20px;
|
||
overflow: hidden;
|
||
margin-bottom: 24px;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
|
||
transition: 0.2s;
|
||
position: relative;
|
||
}
|
||
|
||
.news-card:hover {
|
||
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.news-dot {
|
||
position: absolute;
|
||
left: -22px;
|
||
top: 24px;
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 50%;
|
||
background: white;
|
||
border: 3px solid var(--primary);
|
||
}
|
||
|
||
.news-header {
|
||
padding: 20px 24px 16px;
|
||
border-bottom: 1px solid #f1f5f9;
|
||
}
|
||
|
||
.news-avatar {
|
||
width: 42px;
|
||
height: 42px;
|
||
border-radius: 50%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.news-content {
|
||
padding: 0 24px 24px;
|
||
}
|
||
|
||
.news-img {
|
||
width: 100%;
|
||
height: 280px;
|
||
object-fit: cover;
|
||
border-radius: 16px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.news-actions {
|
||
border-top: 1px solid #f1f5f9;
|
||
padding-top: 16px;
|
||
}
|
||
|
||
.news-action {
|
||
color: #64748b;
|
||
text-decoration: none;
|
||
padding: 8px 12px;
|
||
border-radius: 12px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
font-size: 14px;
|
||
transition: 0.2s;
|
||
}
|
||
|
||
.news-action:hover {
|
||
background: #f8fafc;
|
||
color: var(--primary);
|
||
}
|
||
|
||
.events-lane {
|
||
position: relative;
|
||
padding-left: 34px;
|
||
}
|
||
|
||
.events-lane::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 14px;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 3px;
|
||
border-radius: 999px;
|
||
background: linear-gradient(to bottom, #fecaca, #fee2e2);
|
||
}
|
||
|
||
.event-node {
|
||
position: absolute;
|
||
left: 8px;
|
||
width: 14px;
|
||
height: 14px;
|
||
border-radius: 50%;
|
||
background: #fff;
|
||
border: 3px solid var(--primary);
|
||
box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.25);
|
||
}
|
||
|
||
.event-card {
|
||
position: relative;
|
||
margin-bottom: 24px;
|
||
border-radius: 22px;
|
||
overflow: hidden;
|
||
border: 1px solid #e2e8f0;
|
||
background: radial-gradient(circle at top left, rgba(248, 250, 252, 0.9), #ffffff);
|
||
display: flex;
|
||
flex-direction: column;
|
||
transition: 0.25s;
|
||
}
|
||
|
||
.event-card:hover {
|
||
box-shadow: 0 18px 35px rgba(15, 23, 42, 0.12);
|
||
transform: translateY(-3px);
|
||
}
|
||
|
||
.event-header {
|
||
display: flex;
|
||
padding: 16px 20px 12px;
|
||
gap: 14px;
|
||
}
|
||
|
||
.event-date-pill {
|
||
min-width: 60px;
|
||
text-align: center;
|
||
border-radius: 16px;
|
||
background: #0f172a;
|
||
color: #e5e7eb;
|
||
padding: 8px 6px;
|
||
}
|
||
|
||
.event-date-pill .day {
|
||
font-size: 11px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.event-date-pill .date {
|
||
font-size: 18px;
|
||
font-weight: 800;
|
||
line-height: 1;
|
||
}
|
||
|
||
.event-date-pill .month {
|
||
font-size: 11px;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.event-body-main {
|
||
flex: 1;
|
||
}
|
||
|
||
.event-title {
|
||
font-size: 15px;
|
||
font-weight: 800;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.event-meta {
|
||
font-size: 11px;
|
||
color: #6b7280;
|
||
}
|
||
|
||
.event-meta i {
|
||
margin-right: 4px;
|
||
}
|
||
|
||
.event-chip-row {
|
||
padding: 0 20px 10px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px;
|
||
}
|
||
|
||
.event-chip {
|
||
font-size: 10px;
|
||
border-radius: 999px;
|
||
padding: 4px 9px;
|
||
border: 1px solid #e2e8f0;
|
||
background: #f9fafb;
|
||
color: #475569;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
|
||
.event-footer {
|
||
border-top: 1px dashed #e2e8f0;
|
||
padding: 10px 16px 14px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
background: #f9fafb;
|
||
}
|
||
|
||
.event-capacity {
|
||
font-size: 11px;
|
||
color: #6b7280;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.capacity-bar {
|
||
height: 6px;
|
||
border-radius: 999px;
|
||
background: #e2e8f0;
|
||
width: 110px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.capacity-fill {
|
||
height: 100%;
|
||
border-radius: inherit;
|
||
background: linear-gradient(to right, var(--primary), #fb923c);
|
||
}
|
||
|
||
.event-cta-open {
|
||
font-size: 12px;
|
||
border-radius: 999px;
|
||
padding: 6px 14px;
|
||
border: none;
|
||
background: #22c55e;
|
||
color: white;
|
||
font-weight: 700;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.event-cta-open i {
|
||
font-size: 11px;
|
||
}
|
||
|
||
.event-cta-wait {
|
||
font-size: 12px;
|
||
border-radius: 999px;
|
||
padding: 6px 14px;
|
||
border: 1px solid #e2e8f0;
|
||
background: white;
|
||
color: #6b7280;
|
||
font-weight: 700;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.event-ribbon {
|
||
position: absolute;
|
||
top: 14px;
|
||
right: -32px;
|
||
background: #0f172a;
|
||
color: #e5e7eb;
|
||
font-size: 10px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 1px;
|
||
padding: 6px 40px;
|
||
transform: rotate(15deg);
|
||
box-shadow: 0 10px 20px rgba(15, 23, 42, 0.3);
|
||
}
|
||
|
||
.event-ribbon.limited {
|
||
background: #f97316;
|
||
}
|
||
|
||
.event-tagline {
|
||
padding: 0 20px 12px;
|
||
font-size: 11px;
|
||
color: #6b7280;
|
||
}
|
||
|
||
@media (max-width: 576px) {
|
||
.event-header {
|
||
flex-direction: row;
|
||
align-items: flex-start;
|
||
}
|
||
}
|
||
|
||
.stat-card {
|
||
border-radius: 20px;
|
||
background: #f8fafc;
|
||
border: 1px solid #e2e8f0;
|
||
padding: 18px 18px 16px;
|
||
height: 100%;
|
||
}
|
||
|
||
.stat-card h6 {
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.stat-legend {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 8px 0 0;
|
||
font-size: 11px;
|
||
}
|
||
|
||
.stat-legend li {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 4px;
|
||
gap: 6px;
|
||
}
|
||
|
||
.legend-dot {
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 50%;
|
||
margin-right: 6px;
|
||
}
|
||
|
||
.flag-pill {
|
||
border-radius: 999px;
|
||
padding: 2px 8px;
|
||
font-size: 11px;
|
||
background: white;
|
||
border: 1px solid #e2e8f0;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.flag-pill span.flag {
|
||
font-size: 15px;
|
||
}
|
||
|
||
.rating-breakdown-card {
|
||
border-radius: 20px;
|
||
background: #f9fafb;
|
||
color: #111827;
|
||
padding: 18px 20px;
|
||
margin-top: 24px;
|
||
border: 1px solid #e5e7eb;
|
||
}
|
||
|
||
.rating-main-score {
|
||
font-size: 32px;
|
||
font-weight: 800;
|
||
line-height: 1;
|
||
}
|
||
|
||
.rating-stars {
|
||
color: #facc15;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.rating-subtext {
|
||
font-size: 11px;
|
||
color: #6b7280;
|
||
}
|
||
|
||
.aspect-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.aspect-label {
|
||
width: 150px;
|
||
font-size: 11px;
|
||
color: #111827;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.aspect-bar {
|
||
flex: 1;
|
||
height: 6px;
|
||
border-radius: 999px;
|
||
background: #e2e8f0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.aspect-fill {
|
||
height: 100%;
|
||
border-radius: inherit;
|
||
background: linear-gradient(to right, #22c55e, #a3e635);
|
||
}
|
||
|
||
.aspect-score {
|
||
width: 40px;
|
||
text-align: right;
|
||
font-size: 11px;
|
||
color: #111827;
|
||
}
|
||
|
||
.rating-badge-row {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.rating-badge {
|
||
border-radius: 999px;
|
||
padding: 4px 10px;
|
||
background: white;
|
||
color: #111827;
|
||
font-size: 11px;
|
||
border: 1px solid #e5e7eb;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.rating-trend {
|
||
font-size: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
color: #16a34a;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.rating-trend i {
|
||
color: #16a34a;
|
||
}
|
||
|
||
.bar-wrapper-fixed {
|
||
position: relative;
|
||
width: 100%;
|
||
max-width: 100%;
|
||
height: 220px;
|
||
max-height: 220px;
|
||
}
|
||
</style>
|
||
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<div class="page-container">
|
||
<div class="hero-banner" id="heroBanner">
|
||
<!-- Background layers -->
|
||
<div class="hero-bg-image"></div>
|
||
<div class="hero-bg-video">
|
||
<!-- YouTube background video from your link -->
|
||
<iframe id="heroVideoIframe"
|
||
src="https://www.youtube.com/embed/TKEbws4QhEk?enablejsapi=1&controls=0&playsinline=1&mute=1&loop=1&modestbranding=1&rel=0&showinfo=0&playlist=TKEbws4QhEk"
|
||
title="Hero Video"
|
||
allow="autoplay; encrypted-media"
|
||
referrerpolicy="strict-origin-when-cross-origin"></iframe>
|
||
</div>
|
||
|
||
<!-- Original banner content -->
|
||
<div class="banner-top">
|
||
<div>
|
||
<div class="club-logo-wrapper">
|
||
<img src="https://zcwfreuywtlrrgevhtmo.supabase.co/storage/v1/object/public/avatars/3f9a5abf-a9c8-46de-ad7f-0466a8c1e054/club-bbcc719f-7fd5-41b6-b2c0-3834a4e94018-logo-1760529898182.png"
|
||
style="width:100%">
|
||
</div>
|
||
</div>
|
||
<div class="glass-hub">
|
||
<a href="#" class="hub-link"><i class="fa-brands fa-whatsapp"></i></a>
|
||
<a href="#" class="hub-link"><i class="fa-brands fa-instagram"></i></a>
|
||
<a href="#" class="hub-link"><i class="fa-solid fa-phone"></i></a>
|
||
</div>
|
||
</div>
|
||
<div class="banner-bottom">
|
||
<h1 class="h2 fw-bold text-white mb-2">EMPEROR TAEKWONDO ACADEMY</h1>
|
||
<p class="text-white-50 fs-5">
|
||
<i class="fa-solid fa-location-dot me-2 text-danger"></i>Seef District, Bahrain
|
||
<i class="fa-solid fa-fire-flame-curved m-2 text-danger"></i>
|
||
<span>Since 2012 · 14 years of champions</span>
|
||
</p>
|
||
<div class="stats-row">
|
||
<div class="stat-item">
|
||
<h3>4.9/5</h3><span>Rating</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<h3>24/7</h3><span>Access</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<h3>35+</h3><span>Classes</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<h3>450+</h3><span>Active Members</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content-card">
|
||
<!-- TAB ORDER: Overview, Packages, Schedule, Events, Statistics, Timeline -->
|
||
<ul class="nav nav-pills nav-fill mb-5" id="mainTabs">
|
||
<li class="nav-item"><button class="nav-link active" data-bs-toggle="pill"
|
||
data-bs-target="#tab-overview">Overview</button></li>
|
||
<li class="nav-item"><button class="nav-link" data-bs-toggle="pill"
|
||
data-bs-target="#tab-packages">Packages</button></li>
|
||
<li class="nav-item"><button class="nav-link" data-bs-toggle="pill"
|
||
data-bs-target="#tab-scheduled">Schedule</button></li>
|
||
<li class="nav-item"><button class="nav-link" data-bs-toggle="pill"
|
||
data-bs-target="#tab-events">Events</button></li>
|
||
<li class="nav-item"><button class="nav-link" data-bs-toggle="pill"
|
||
data-bs-target="#tab-stats">Statistics</button></li>
|
||
<li class="nav-item"><button class="nav-link" data-bs-toggle="pill"
|
||
data-bs-target="#tab-timeline">Timeline</button></li>
|
||
</ul>
|
||
|
||
<div class="tab-content">
|
||
|
||
<!-- OVERVIEW TAB -->
|
||
<div class="tab-pane fade show active" id="tab-overview">
|
||
|
||
<div class="mb-5">
|
||
<div class="d-flex justify-content-between align-items-end mb-4">
|
||
<div>
|
||
<h4 class="fw-800 mb-1">Member Exclusive Perks</h4>
|
||
<p class="text-muted small mb-0">Partnering businesses and offers available when you register.</p>
|
||
</div>
|
||
</div>
|
||
<div class="row g-3">
|
||
<div class="col-md-4">
|
||
<div class="card perk-card">
|
||
<span class="perk-badge">-20% OFF</span>
|
||
<img
|
||
src="https://images.unsplash.com/photo-1547592166-23ac45744acd?auto=format&fit=crop&w=500">
|
||
<div class="perk-overlay">
|
||
<h5 class="text-white fw-bold mb-0">Fuel Cafe</h5>
|
||
<p class="text-white-50 small mb-0">Post-workout nutrition & coffee</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="card perk-card">
|
||
<span class="perk-badge">-15% OFF</span>
|
||
<img
|
||
src="https://images.unsplash.com/photo-1576091160550-2173dba999ef?auto=format&fit=crop&w=500">
|
||
<div class="perk-overlay">
|
||
<h5 class="text-white fw-bold mb-0">Clinic X Physio</h5>
|
||
<p class="text-white-50 small mb-0">Recovery & Sports Massage</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="card perk-card">
|
||
<span class="perk-badge">+500 PTS</span>
|
||
<img
|
||
src="https://images.unsplash.com/photo-1552674605-db6ffd4facb5?auto=format&fit=crop&w=500">
|
||
<div class="perk-overlay">
|
||
<h5 class="text-white fw-bold mb-0">Daily Check-in</h5>
|
||
<p class="text-white-50 small mb-0">Earn points for every workout</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="my-5 opacity-5">
|
||
|
||
<div class="row g-5">
|
||
<div class="col-lg-6">
|
||
<div class="d-flex justify-content-between align-items-end mb-4">
|
||
<div>
|
||
<h4 class="fw-800 mb-1">Meet The Experts</h4>
|
||
<p class="text-muted small mb-0">Best Trainers With Exceptional Experties</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mini-trainer mb-3">
|
||
<img
|
||
src="https://zcwfreuywtlrrgevhtmo.supabase.co/storage/v1/object/public/avatars/3f9a5abf-a9c8-46de-ad7f-0466a8c1e054/profile-1760528371681.jpg"
|
||
class="mini-pfp">
|
||
<div>
|
||
<h6 class="fw-bold mb-1">Master Sami Al-Mane</h6>
|
||
<div class="d-flex align-items-center mb-1" style="font-size:11px;">
|
||
<span class="me-1 text-warning">
|
||
<i class="fa-solid fa-star"></i>
|
||
<i class="fa-solid fa-star"></i>
|
||
<i class="fa-solid fa-star"></i>
|
||
<i class="fa-solid fa-star"></i>
|
||
<i class="fa-regular fa-star"></i>
|
||
</span>
|
||
<span class="text-muted">4.8 · 126 reviews</span>
|
||
</div>
|
||
<p class="text-muted small mb-0">IFBB Pro & Body Transformation Specialist.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mini-trainer">
|
||
<img
|
||
src="https://zcwfreuywtlrrgevhtmo.supabase.co/storage/v1/object/public/avatars/3f9a5abf-a9c8-46de-ad7f-0466a8c1e054/instructor-bbcc719f-7fd5-41b6-b2c0-3834a4e94018-1760759255222.jpg"
|
||
class="mini-pfp">
|
||
<div>
|
||
<h6 class="fw-bold mb-1">Sulaiman Al-Khalifa</h6>
|
||
<div class="d-flex align-items-center mb-1" style="font-size:11px;">
|
||
<span class="me-1 text-warning">
|
||
<i class="fa-solid fa-star"></i>
|
||
<i class="fa-solid fa-star"></i>
|
||
<i class="fa-solid fa-star"></i>
|
||
<i class="fa-solid fa-star"></i>
|
||
<i class="fa-solid fa-star-half-stroke"></i>
|
||
</span>
|
||
<span class="text-muted">4.9 · 89 reviews</span>
|
||
</div>
|
||
<p class="text-muted small mb-0">Black Belt Taekwondo Specialist & Youth Mentor.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<button
|
||
class="btn btn-link text-danger fw-bold p-0 mt-3 text-decoration-none small"
|
||
onclick="document.querySelector('[data-bs-target=\\'#tab-pro\\']').click()">
|
||
View all 12 coaches <i class="fa-solid fa-arrow-right ms-1"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="col-lg-6">
|
||
<div class="d-flex justify-content-between align-items-end mb-4">
|
||
<div>
|
||
<h4 class="fw-800 mb-1">Elite Facilities</h4>
|
||
<p class="text-muted small mb-0">Best Trainers With Exceptional Experties</p>
|
||
</div>
|
||
</div>
|
||
<div class="row g-3">
|
||
<div class="col-6">
|
||
<img
|
||
src="https://images.unsplash.com/photo-1540497077202-7c8a3999166f?auto=format&fit=crop&w=400"
|
||
class="fac-preview">
|
||
<h6 class="fw-bold mb-1">Pro Strength Hub</h6>
|
||
<p class="text-muted x-small" style="font-size: 11px;">Hammer Strength & Rogue
|
||
equipped.</p>
|
||
</div>
|
||
<div class="col-6">
|
||
<img
|
||
src="https://images.unsplash.com/photo-1593079831268-3381b0db4a77?auto=format&fit=crop&w=400"
|
||
class="fac-preview">
|
||
<h6 class="fw-bold mb-1">Recovery Suite</h6>
|
||
<p class="text-muted x-small" style="font-size: 11px;">Cryo-tanks & Steam sessions.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="my-5 opacity-5">
|
||
|
||
<div class="mt-3">
|
||
<div class="d-flex justify-content-between align-items-end mb-4">
|
||
<div>
|
||
<h4 class="fw-800 mb-1">Latest Achievements</h4>
|
||
<p class="text-muted small mb-0">Celebrating our champions and club milestones.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row g-3">
|
||
<div class="col-md-4">
|
||
<div class="activity-item">
|
||
<h6 class="small fw-bold mb-1">Best Taekwondo Club – Bahrain 2025</h6>
|
||
<p class="text-muted small mb-2">Awarded by the National Taekwondo Federation for
|
||
overall performance.</p>
|
||
<span class="badge-pill bg-secondary-light">
|
||
<i class="fa-solid fa-trophy me-1"></i>Club Award
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-4">
|
||
<div class="activity-item">
|
||
<h6 class="small fw-bold mb-1">GCC Open Championship – 12 Gold Medals</h6>
|
||
<p class="text-muted small mb-2">Team podium finishes across junior and cadet
|
||
divisions.</p>
|
||
<span class="badge-pill bg-secondary-light">
|
||
<i class="fa-solid fa-medal me-1"></i>Tournament Medals
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-4">
|
||
<div class="activity-item">
|
||
<h6 class="small fw-bold mb-1">Black Belt Promotions – 18 Students</h6>
|
||
<p class="text-muted small mb-2">Successful Dan gradings in 2024–2025 season.</p>
|
||
<span class="badge-pill bg-secondary-light">
|
||
<i class="fa-solid fa-star me-1"></i>Student Success
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- PACKAGES TAB -->
|
||
<div class="tab-pane fade" id="tab-packages">
|
||
<div class="grid-packages">
|
||
<div class="package-card">
|
||
<div class="package-img-wrapper">
|
||
<img
|
||
src="https://zcwfreuywtlrrgevhtmo.supabase.co/storage/v1/object/public/avatars/3f9a5abf-a9c8-46de-ad7f-0466a8c1e054/1760759003755-1760759026625.jpg"
|
||
class="package-img">
|
||
</div>
|
||
<div class="p-4 flex-grow-1">
|
||
<h3 class="h5 fw-bold mb-2">Juniors Group A</h3>
|
||
<div class="d-flex flex-wrap gap-1 mb-3">
|
||
<span class="badge-pill bg-secondary-light">Single Activity</span>
|
||
<span class="badge-pill"><i class="fa-solid fa-users me-1"></i>Mixed</span>
|
||
<span class="badge-pill">11-13y</span>
|
||
</div>
|
||
<div class="mb-3">
|
||
<span class="h3 fw-bold text-primary">BHD 35</span>
|
||
<span class="text-muted small ms-2"><i
|
||
class="fa-regular fa-calendar me-1"></i>1mo</span>
|
||
</div>
|
||
<div class="pt-3 border-top">
|
||
<h6 class="small fw-bold mb-3"><i
|
||
class="fa-solid fa-package me-2"></i>Included Activities (1)</h6>
|
||
<div class="activity-item">
|
||
<div
|
||
class="d-flex justify-content-between align-items-start mb-2">
|
||
<h6 class="small fw-bold mb-0">TAEKWONDO</h6>
|
||
<div class="instructor-tag">
|
||
<img
|
||
src="https://zcwfreuywtlrrgevhtmo.supabase.co/storage/v1/object/public/avatars/3f9a5abf-a9c8-46de-ad7f-0466a8c1e054/instructor-bbcc719f-7fd5-41b6-b2c0-3834a4e94018-1760759255222.jpg"
|
||
class="instructor-img">
|
||
<span
|
||
style="font-size: 9px; font-weight: 700; color: var(--primary);">Sulaiman</span>
|
||
</div>
|
||
</div>
|
||
<div class="d-flex gap-3 text-muted" style="font-size: 10px;">
|
||
<span><i class="fa-regular fa-clock me-1"></i>60 min</span>
|
||
<span><i class="fa-regular fa-calendar me-1"></i>Sun, Tue, Thu:
|
||
6:00 PM - 7:00 PM</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-4 pt-0">
|
||
<button class="btn btn-danger w-100 fw-bold py-2 shadow-sm"
|
||
style="border-radius:10px">Select Package</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="package-card">
|
||
<div class="package-img-wrapper">
|
||
<img
|
||
src="https://zcwfreuywtlrrgevhtmo.supabase.co/storage/v1/object/public/avatars/3f9a5abf-a9c8-46de-ad7f-0466a8c1e054/1760759726882-1760759744953.jpg"
|
||
class="package-img">
|
||
</div>
|
||
<div class="p-4 flex-grow-1">
|
||
<h3 class="h5 fw-bold mb-2">Juniors Group B</h3>
|
||
<div class="d-flex flex-wrap gap-1 mb-3">
|
||
<span class="badge-pill bg-secondary-light">Single Activity</span>
|
||
<span class="badge-pill"><i class="fa-solid fa-users me-1"></i>Mixed</span>
|
||
<span class="badge-pill">11-13y</span>
|
||
</div>
|
||
<div class="mb-3">
|
||
<span class="h3 fw-bold text-primary">BHD 45</span>
|
||
<span class="text-muted small ms-2"><i
|
||
class="fa-regular fa-calendar me-1"></i>1mo</span>
|
||
</div>
|
||
<div class="pt-3 border-top">
|
||
<h6 class="small fw-bold mb-3"><i
|
||
class="fa-solid fa-package me-2"></i>Included Activities (2)</h6>
|
||
<div class="activity-item">
|
||
<div
|
||
class="d-flex justify-content-between align-items-start mb-2">
|
||
<h6 class="small fw-bold mb-0">TAEKWONDO</h6>
|
||
<div class="instructor-tag">
|
||
<img
|
||
src="https://zcwfreuywtlrrgevhtmo.supabase.co/storage/v1/object/public/avatars/3f9a5abf-a9c8-46de-ad7f-0466a8c1e054/instructor-bbcc719f-7fd5-41b6-b2c0-3834a4e94018-1760759255222.jpg"
|
||
class="instructor-img">
|
||
<span
|
||
style="font-size: 9px; font-weight: 700; color: var(--primary);">Sulaiman</span>
|
||
</div>
|
||
</div>
|
||
<div class="d-flex gap-3 text-muted" style="font-size: 10px;">
|
||
<span><i class="fa-regular fa-clock me-1"></i>60 min</span>
|
||
<span><i class="fa-regular fa-calendar me-1"></i>Sun, Tue, Thu:
|
||
6:00 PM - 7:00 PM</span>
|
||
</div>
|
||
</div>
|
||
<div class="activity-item">
|
||
<div
|
||
class="d-flex justify-content-between align-items-start mb-2">
|
||
<h6 class="small fw-bold mb-0">HORSE RIDING</h6>
|
||
<div class="instructor-tag">
|
||
<img
|
||
src="https://zcwfreuywtlrrgevhtmo.supabase.co/storage/v1/object/public/avatars/3f9a5abf-a9c8-46de-ad7f-0466a8c1e054/instructor-bbcc719f-7fd5-41b6-b2c0-3834a4e94018-1760759255222.jpg"
|
||
class="instructor-img">
|
||
<span
|
||
style="font-size: 9px; font-weight: 700; color: var(--primary);">Sulaiman</span>
|
||
</div>
|
||
</div>
|
||
<div class="d-flex gap-3 text-muted" style="font-size: 10px;">
|
||
<span><i class="fa-regular fa-clock me-1"></i>60 min</span>
|
||
<span><i class="fa-regular fa-calendar me-1"></i>Sun, Tue, Thu:
|
||
6:00 PM - 7:00 PM</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-4 pt-0">
|
||
<button class="btn btn-danger w-100 fw-bold py-2 shadow-sm"
|
||
style="border-radius:10px">Select Package</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SCHEDULE TAB -->
|
||
<div class="tab-pane fade" id="tab-scheduled">
|
||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||
<div>
|
||
<h4 class="fw-800 mb-1">Today’s Classes</h4>
|
||
<p class="text-muted small mb-0">Live status, flexible sessions, and booking
|
||
availability.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-lg-4 d-none d-lg-block"></div>
|
||
<div class="col-lg-8 col-12">
|
||
|
||
<div class="class-card" style="opacity:0.5;">
|
||
<div class="class-thumb">
|
||
<img
|
||
src="https://images.unsplash.com/photo-1549049950-48d5887197cc?auto=format&fit=crop&w=600&q=80"
|
||
alt="Kids fundamentals">
|
||
</div>
|
||
<div class="flex-grow-1 d-flex flex-column">
|
||
<div class="d-flex justify-content-between align-items-start mb-1">
|
||
<div>
|
||
<h6 class="small fw-bold mb-0">Kids Fundamentals – Open Mat</h6>
|
||
<div class="class-meta text-muted">
|
||
<span><i class="fa-regular fa-clock me-1"></i>5:00 PM – 5:45
|
||
PM</span>
|
||
<span class="ms-2"><i class="fa-solid fa-location-dot me-1"></i>Main
|
||
Dojang</span>
|
||
</div>
|
||
</div>
|
||
<span class="status-chip status-full"
|
||
style="background:#f9fafb;color:#6b7280;border-color:#e5e7eb;">
|
||
<i class="fa-regular fa-clock"></i>
|
||
Finished
|
||
</span>
|
||
</div>
|
||
|
||
<div
|
||
class="d-flex justify-content-between align-items-center mt-2">
|
||
<div class="d-flex flex-wrap gap-1">
|
||
<span class="pill-tag">Session ended</span>
|
||
<span class="pill-tag">Next slot tomorrow</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="class-card">
|
||
<div class="class-thumb">
|
||
<img
|
||
src="https://images.unsplash.com/photo-1603988363607-41a96cdcd875?auto=format&fit=crop&w=600&q=80"
|
||
alt="Taekwondo juniors">
|
||
</div>
|
||
<div class="flex-grow-1 d-flex flex-column">
|
||
<div class="d-flex justify-content-between align-items-start mb-1">
|
||
<div>
|
||
<h6 class="small fw-bold mb-0">Juniors Group A – TAEKWONDO</h6>
|
||
<div class="class-meta text-muted">
|
||
<span><i class="fa-regular fa-clock me-1"></i>6:00 PM – 7:00
|
||
PM</span>
|
||
<span class="ms-2"><i class="fa-solid fa-location-dot me-1"></i>Main
|
||
Dojang</span>
|
||
</div>
|
||
</div>
|
||
<span class="status-chip status-ongoing">
|
||
<span class="rounded-circle bg-success"
|
||
style="width:6px;height:6px;display:inline-block;"></span>
|
||
Live now
|
||
</span>
|
||
</div>
|
||
|
||
<div
|
||
class="d-flex justify-content-between align-items-center mt-2">
|
||
<div class="d-flex flex-wrap gap-1">
|
||
<span class="pill-tag">Age 11–13</span>
|
||
<span class="pill-tag">Capacity 14/18</span>
|
||
<div class="instructor-tag" style="padding:2px 8px;">
|
||
<img
|
||
src="https://zcwfreuywtlrrgevhtmo.supabase.co/storage/v1/object/public/avatars/3f9a5abf-a9c8-46de-ad7f-0466a8c1e054/instructor-bbcc719f-7fd5-41b6-b2c0-3834a4e94018-1760759255222.jpg"
|
||
class="instructor-img">
|
||
<span
|
||
style="font-size: 9px; font-weight: 700; color: var(--primary);">Sulaiman</span>
|
||
</div>
|
||
</div>
|
||
<button class="btn btn-sm btn-success fw-semibold">
|
||
Book Spot
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="class-card">
|
||
<div class="class-thumb">
|
||
<img
|
||
src="https://images.unsplash.com/photo-1571019613542-0063c1bcd0ff?auto=format&fit=crop&w=600&q=80"
|
||
alt="Sparring class">
|
||
</div>
|
||
<div class="flex-grow-1 d-flex flex-column">
|
||
<div class="d-flex justify-content-between align-items-start mb-1">
|
||
<div>
|
||
<h6 class="small fw-bold mb-0">Sparring Squad – Advanced</h6>
|
||
<div class="class-meta text-muted">
|
||
<span><i class="fa-regular fa-clock me-1"></i>8:30 PM – 9:30
|
||
PM</span>
|
||
<span class="ms-2"><i class="fa-solid fa-location-dot me-1"></i>Competition
|
||
Arena</span>
|
||
</div>
|
||
</div>
|
||
<span class="status-chip status-full">
|
||
<i class="fa-solid fa-circle-xmark"></i>
|
||
Full
|
||
</span>
|
||
</div>
|
||
|
||
<div
|
||
class="d-flex justify-content-between align-items-center mt-2">
|
||
<div class="d-flex flex-wrap gap-1">
|
||
<span class="pill-tag">Invite only</span>
|
||
<span class="pill-tag">Capacity 20/20</span>
|
||
</div>
|
||
<button class="btn btn-sm btn-outline-secondary fw-semibold"
|
||
disabled>
|
||
Join Waitlist
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- EVENTS TAB -->
|
||
<div class="tab-pane fade" id="tab-events">
|
||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||
<div>
|
||
<h4 class="fw-800 mb-1">Upcoming Events</h4>
|
||
<p class="text-muted small mb-0">Open to everyone. Reserve your spot before it sells out.</p>
|
||
</div>
|
||
<button class="btn btn-outline-dark btn-sm fw-semibold rounded-pill">
|
||
<i class="fa-regular fa-calendar-plus me-1"></i> Event Calendar
|
||
</button>
|
||
</div>
|
||
|
||
<div class="events-lane">
|
||
|
||
<div class="event-node" style="top: 10px;"></div>
|
||
<article class="event-card mb-4">
|
||
<div class="event-ribbon limited">Limited Seats</div>
|
||
<div class="event-header">
|
||
<div class="event-date-pill">
|
||
<div class="day">Thu</div>
|
||
<div class="date">19</div>
|
||
<div class="month">Feb</div>
|
||
</div>
|
||
<div class="event-body-main">
|
||
<div class="event-title">Open Sparring Night – All Clubs Welcome</div>
|
||
<div class="event-meta mb-1">
|
||
<span class="me-3"><i class="fa-regular fa-clock"></i>7:30 PM – 9:30
|
||
PM</span>
|
||
<span class="me-3"><i class="fa-solid fa-location-dot"></i>Main
|
||
Arena</span>
|
||
<span><i class="fa-solid fa-ranking-star"></i>Intermediate &
|
||
Above</span>
|
||
</div>
|
||
<p class="event-tagline mb-0">
|
||
High-energy sparring rounds with referees, music and live scoring. Bring your
|
||
gear, we bring the atmosphere.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="event-chip-row">
|
||
<span class="event-chip"><i class="fa-solid fa-user-group"></i> Public
|
||
event</span>
|
||
<span class="event-chip"><i class="fa-solid fa-shield-halved"></i> WT
|
||
rules</span>
|
||
<span class="event-chip"><i class="fa-solid fa-camera"></i> Highlight
|
||
reels</span>
|
||
</div>
|
||
<div class="event-footer">
|
||
<div class="event-capacity">
|
||
<i class="fa-solid fa-users-line"></i>
|
||
<span>24 / 30 spots taken</span>
|
||
<div class="capacity-bar">
|
||
<div class="capacity-fill" style="width:80%;"></div>
|
||
</div>
|
||
</div>
|
||
<button class="event-cta-open">
|
||
<i class="fa-solid fa-ticket"></i> Join Event
|
||
</button>
|
||
</div>
|
||
</article>
|
||
|
||
<div class="event-node" style="top: 210px;"></div>
|
||
<article class="event-card mb-4">
|
||
<div class="event-ribbon">Family Friendly</div>
|
||
<div class="event-header">
|
||
<div class="event-date-pill" style="background:#16a34a;">
|
||
<div class="day">Sat</div>
|
||
<div class="date">21</div>
|
||
<div class="month">Feb</div>
|
||
</div>
|
||
<div class="event-body-main">
|
||
<div class="event-title">Free Beginner Try‑Out Day</div>
|
||
<div class="event-meta mb-1">
|
||
<span class="me-3"><i class="fa-regular fa-clock"></i>10:00 AM – 1:00
|
||
PM</span>
|
||
<span class="me-3"><i class="fa-solid fa-location-dot"></i>Dojo &
|
||
Lobby</span>
|
||
<span><i class="fa-solid fa-children"></i>Ages 5+</span>
|
||
</div>
|
||
<p class="event-tagline mb-0">
|
||
Open doors for anyone curious about taekwondo. Meet the coaches, try a safe intro
|
||
class, and tour the facility.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="event-chip-row">
|
||
<span class="event-chip"><i class="fa-solid fa-circle-check"></i> No experience
|
||
needed</span>
|
||
<span class="event-chip"><i class="fa-solid fa-mug-hot"></i> Coffee &
|
||
snacks</span>
|
||
<span class="event-chip"><i class="fa-solid fa-house-user"></i> Parents welcome
|
||
on mat-side</span>
|
||
</div>
|
||
<div class="event-footer">
|
||
<div class="event-capacity">
|
||
<i class="fa-solid fa-infinity"></i>
|
||
<span>Unlimited guests</span>
|
||
</div>
|
||
<button class="event-cta-open" style="background:#0f172a;">
|
||
<i class="fa-solid fa-user-plus"></i> I’m Interested
|
||
</button>
|
||
</div>
|
||
</article>
|
||
|
||
<div class="event-node" style="top: 410px;"></div>
|
||
<article class="event-card mb-4">
|
||
<div class="event-ribbon limited">Grading</div>
|
||
<div class="event-header">
|
||
<div class="event-date-pill" style="background:#f97316;">
|
||
<div class="day">Fri</div>
|
||
<div class="date">28</div>
|
||
<div class="month">Feb</div>
|
||
</div>
|
||
<div class="event-body-main">
|
||
<div class="event-title">Monthly Belt Grading – Kids & Juniors</div>
|
||
<div class="event-meta mb-1">
|
||
<span class="me-3"><i class="fa-regular fa-clock"></i>5:00 PM – 8:00
|
||
PM</span>
|
||
<span class="me-3"><i class="fa-solid fa-location-dot"></i>Main
|
||
Dojang</span>
|
||
<span><i class="fa-solid fa-id-card-clip"></i>Invite & open
|
||
spectators</span>
|
||
</div>
|
||
<p class="event-tagline mb-0">
|
||
Formal grading with photo booth and awards stage. Families and friends are invited
|
||
to cheer from our viewing zone.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="event-chip-row">
|
||
<span class="event-chip"><i class="fa-solid fa-belt"></i> White to Red
|
||
Stripe</span>
|
||
<span class="event-chip"><i class="fa-solid fa-photo-film"></i> Professional
|
||
photography</span>
|
||
<span class="event-chip"><i class="fa-solid fa-hand-sparkles"></i> Medal
|
||
ceremony</span>
|
||
</div>
|
||
<div class="event-footer">
|
||
<div class="event-capacity">
|
||
<i class="fa-solid fa-users-line"></i>
|
||
<span>48 / 50 candidates</span>
|
||
<div class="capacity-bar">
|
||
<div class="capacity-fill" style="width:96%;"></div>
|
||
</div>
|
||
</div>
|
||
<button class="event-cta-open" style="background:#f97316;">
|
||
<i class="fa-solid fa-clipboard-check"></i> Reserve Slot
|
||
</button>
|
||
</div>
|
||
</article>
|
||
|
||
<div class="event-node" style="top: 620px;"></div>
|
||
<article class="event-card mb-2">
|
||
<div class="event-ribbon limited">Almost Full</div>
|
||
<div class="event-header">
|
||
<div class="event-date-pill" style="background:#0369a1;">
|
||
<div class="day">Mon</div>
|
||
<div class="date">02</div>
|
||
<div class="month">Mar</div>
|
||
</div>
|
||
<div class="event-body-main">
|
||
<div class="event-title">Summer Camp 2026 – Preview Session</div>
|
||
<div class="event-meta mb-1">
|
||
<span class="me-3"><i class="fa-regular fa-clock"></i>6:30 PM – 8:00
|
||
PM</span>
|
||
<span class="me-3"><i class="fa-solid fa-location-dot"></i>Mixed
|
||
Zones</span>
|
||
<span><i class="fa-solid fa-person-hiking"></i>Camp activities
|
||
demo</span>
|
||
</div>
|
||
<p class="event-tagline mb-0">
|
||
One‑night preview of our signature summer camp: games, team‑building,
|
||
mini‑workouts and Q&A with the coaching team.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="event-chip-row">
|
||
<span class="event-chip"><i class="fa-solid fa-fire-flame-curved"></i> Limited
|
||
preview</span>
|
||
<span class="event-chip"><i class="fa-solid fa-school"></i> Ideal for 8–14
|
||
yrs</span>
|
||
</div>
|
||
<div class="event-footer">
|
||
<div class="event-capacity">
|
||
<i class="fa-solid fa-users-slash"></i>
|
||
<span>Full · Waitlist only</span>
|
||
<div class="capacity-bar">
|
||
<div class="capacity-fill" style="width:100%;"></div>
|
||
</div>
|
||
</div>
|
||
<button class="event-cta-wait">
|
||
<i class="fa-solid fa-clock-rotate-left"></i> Join Waitlist
|
||
</button>
|
||
</div>
|
||
</article>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- STATISTICS TAB -->
|
||
<div class="tab-pane fade" id="tab-stats">
|
||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||
<div>
|
||
<h4 class="fw-800 mb-1">Club Statistics</h4>
|
||
<p class="text-muted small mb-0">Who trains with us, how they train, and how the club is
|
||
growing.</p>
|
||
</div>
|
||
<span
|
||
class="badge rounded-pill bg-dark text-white d-flex align-items-center gap-2 px-3 py-2">
|
||
<i class="fa-solid fa-chart-simple text-warning"></i>
|
||
Live snapshot · Feb 2026
|
||
</span>
|
||
</div>
|
||
|
||
<div class="row g-3 mb-3">
|
||
<div class="col-md-4">
|
||
<div class="stat-card">
|
||
<h6 class="mb-0 d-flex align-items-center justify-content-between">
|
||
Active Members by Nationality
|
||
<span class="flag-pill">
|
||
<span class="flag">🇧🇭</span>
|
||
Home & Expat
|
||
</span>
|
||
</h6>
|
||
<div class="mt-3">
|
||
<canvas id="donutNationalities" height="160"></canvas>
|
||
</div>
|
||
<ul class="stat-legend">
|
||
<li>
|
||
<span><span class="legend-dot"
|
||
style="background:#ef4444;"></span> 🇧🇭 Bahrain</span>
|
||
<span>52%</span>
|
||
</li>
|
||
<li>
|
||
<span><span class="legend-dot"
|
||
style="background:#0ea5e9;"></span> 🇵🇰 Pakistan</span>
|
||
<span>18%</span>
|
||
</li>
|
||
<li>
|
||
<span><span class="legend-dot"
|
||
style="background:#22c55e;"></span> 🇮🇳 India</span>
|
||
<span>16%</span>
|
||
</li>
|
||
<li>
|
||
<span><span class="legend-dot"
|
||
style="background:#8b5cf6;"></span> 🌍 Other GCC</span>
|
||
<span>14%</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-4">
|
||
<div class="stat-card">
|
||
<h6 class="mb-0 d-flex align-items-center justify-content-between">
|
||
Members by Age Group
|
||
<span class="badge bg-light text-muted border">Avg age 14.2</span>
|
||
</h6>
|
||
<div class="mt-3">
|
||
<canvas id="donutAgeGroups" height="160"></canvas>
|
||
</div>
|
||
<ul class="stat-legend">
|
||
<li>
|
||
<span><span class="legend-dot"
|
||
style="background:#f97316;"></span> Kids (5–10)</span>
|
||
<span>28%</span>
|
||
</li>
|
||
<li>
|
||
<span><span class="legend-dot"
|
||
style="background:#22c55e;"></span> Juniors (11–15)</span>
|
||
<span>42%</span>
|
||
</li>
|
||
<li>
|
||
<span><span class="legend-dot"
|
||
style="background:#3b82f6;"></span> Youth (16–21)</span>
|
||
<span>18%</span>
|
||
</li>
|
||
<li>
|
||
<span><span class="legend-dot"
|
||
style="background:#94a3b8;"></span> Adults (22+)</span>
|
||
<span>12%</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-4">
|
||
<div class="stat-card">
|
||
<h6 class="mb-0 d-flex align-items-center justify-content-between">
|
||
Gender Ratio
|
||
<span class="badge bg-light text-muted border">Balanced squads</span>
|
||
</h6>
|
||
<div class="mt-3">
|
||
<canvas id="donutGender" height="160"></canvas>
|
||
</div>
|
||
<ul class="stat-legend">
|
||
<li>
|
||
<span><span class="legend-dot"
|
||
style="background:#3b82f6;"></span> Male</span>
|
||
<span>58%</span>
|
||
</li>
|
||
<li>
|
||
<span><span class="legend-dot"
|
||
style="background:#ec4899;"></span> Female</span>
|
||
<span>42%</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row g-3 mb-3">
|
||
<div class="col-md-4">
|
||
<div class="stat-card">
|
||
<h6 class="mb-0 d-flex align-items-center justify-content-between">
|
||
Active Members – Horoscope
|
||
<span class="badge bg-light text-muted border">For fun only</span>
|
||
</h6>
|
||
<div class="mt-3">
|
||
<canvas id="donutHoroscope" height="160"></canvas>
|
||
</div>
|
||
<ul class="stat-legend">
|
||
<li>
|
||
<span><span class="legend-dot"
|
||
style="background:#6366f1;"></span> Fire signs</span>
|
||
<span>30%</span>
|
||
</li>
|
||
<li>
|
||
<span><span class="legend-dot"
|
||
style="background:#22c55e;"></span> Earth signs</span>
|
||
<span>25%</span>
|
||
</li>
|
||
<li>
|
||
<span><span class="legend-dot"
|
||
style="background:#0ea5e9;"></span> Air signs</span>
|
||
<span>22%</span>
|
||
</li>
|
||
<li>
|
||
<span><span class="legend-dot"
|
||
style="background:#ec4899;"></span> Water signs</span>
|
||
<span>23%</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-4">
|
||
<div class="stat-card">
|
||
<h6 class="mb-0 d-flex align-items-center justify-content-between">
|
||
Members by Blood Type
|
||
<span class="badge bg-light text-muted border">Self‑reported</span>
|
||
</h6>
|
||
<div class="mt-3">
|
||
<canvas id="donutBloodType" height="160"></canvas>
|
||
</div>
|
||
<ul class="stat-legend">
|
||
<li>
|
||
<span><span class="legend-dot"
|
||
style="background:#ef4444;"></span> O</span>
|
||
<span>40%</span>
|
||
</li>
|
||
<li>
|
||
<span><span class="legend-dot"
|
||
style="background:#f97316;"></span> A</span>
|
||
<span>32%</span>
|
||
</li>
|
||
<li>
|
||
<span><span class="legend-dot"
|
||
style="background:#22c55e;"></span> B</span>
|
||
<span>18%</span>
|
||
</li>
|
||
<li>
|
||
<span><span class="legend-dot"
|
||
style="background:#3b82f6;"></span> AB</span>
|
||
<span>10%</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-4">
|
||
<div class="stat-card">
|
||
<h6 class="mb-0 d-flex align-items-center justify-content-between">
|
||
Members with Championships
|
||
<span class="badge bg-light text-muted border">Achievements</span>
|
||
</h6>
|
||
<div class="mt-3">
|
||
<canvas id="donutChampions" height="160"></canvas>
|
||
</div>
|
||
<ul class="stat-legend">
|
||
<li>
|
||
<span><span class="legend-dot"
|
||
style="background:#22c55e;"></span> Medalists</span>
|
||
<span>18%</span>
|
||
</li>
|
||
<li>
|
||
<span><span class="legend-dot"
|
||
style="background:#eab308;"></span> Podium finishes</span>
|
||
<span>24%</span>
|
||
</li>
|
||
<li>
|
||
<span><span class="legend-dot"
|
||
style="background:#94a3b8;"></span> Competitors</span>
|
||
<span>28%</span>
|
||
</li>
|
||
<li>
|
||
<span><span class="legend-dot"
|
||
style="background:#e5e7eb;"></span> Yet to compete</span>
|
||
<span>30%</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row g-3">
|
||
<div class="col-12">
|
||
<div class="stat-card">
|
||
<div
|
||
class="d-flex justify-content-between align-items-center mb-2">
|
||
<h6 class="mb-0">Active Members – Last 12 Months</h6>
|
||
<span
|
||
class="badge bg-dark text-white d-flex align-items-center gap-1">
|
||
<i class="fa-solid fa-users-line"></i> 12‑month trend
|
||
</span>
|
||
</div>
|
||
<p class="text-muted small mb-2">
|
||
Attendance dips around mid‑year break and Eid, softens over the hottest
|
||
summer months,
|
||
and peaks when school and work routines are most stable.[file:258]
|
||
</p>
|
||
<div class="bar-wrapper-fixed">
|
||
<canvas id="barMonthlyMembers"></canvas>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="rating-breakdown-card">
|
||
<div class="row g-3 align-items-center">
|
||
<div class="col-md-3">
|
||
<div class="rating-main-score">4.9</div>
|
||
<div class="rating-stars">
|
||
<i class="fa-solid fa-star"></i>
|
||
<i class="fa-solid fa-star"></i>
|
||
<i class="fa-solid fa-star"></i>
|
||
<i class="fa-solid fa-star"></i>
|
||
<i class="fa-solid fa-star-half-stroke"></i>
|
||
</div>
|
||
<div class="rating-subtext mt-1">Based on 320+ verified member reviews</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="aspect-row">
|
||
<div class="aspect-label">
|
||
<i class="fa-solid fa-user-tie text-success"></i> Trainers
|
||
</div>
|
||
<div class="aspect-bar">
|
||
<div class="aspect-fill" style="width:96%;"></div>
|
||
</div>
|
||
<div class="aspect-score">4.9</div>
|
||
</div>
|
||
<div class="aspect-row">
|
||
<div class="aspect-label">
|
||
<i class="fa-solid fa-broom text-sky-500"></i> Cleanliness
|
||
</div>
|
||
<div class="aspect-bar">
|
||
<div class="aspect-fill" style="width:94%;"></div>
|
||
</div>
|
||
<div class="aspect-score">4.8</div>
|
||
</div>
|
||
<div class="aspect-row">
|
||
<div class="aspect-label">
|
||
<i class="fa-solid fa-couch text-indigo-400"></i> Comfort
|
||
</div>
|
||
<div class="aspect-bar">
|
||
<div class="aspect-fill" style="width:92%;"></div>
|
||
</div>
|
||
<div class="aspect-score">4.7</div>
|
||
</div>
|
||
<div class="aspect-row">
|
||
<div class="aspect-label">
|
||
<i class="fa-solid fa-bullseye text-amber-400"></i> Keeps you on track
|
||
</div>
|
||
<div class="aspect-bar">
|
||
<div class="aspect-fill" style="width:95%;"></div>
|
||
</div>
|
||
<div class="aspect-score">4.8</div>
|
||
</div>
|
||
<div class="aspect-row mb-0">
|
||
<div class="aspect-label">
|
||
<i class="fa-solid fa-hand-holding-heart text-rose-400"></i> Community vibe
|
||
</div>
|
||
<div class="aspect-bar">
|
||
<div class="aspect-fill" style="width:97%;"></div>
|
||
</div>
|
||
<div class="aspect-score">4.9</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<div class="rating-badge-row">
|
||
<span class="rating-badge">
|
||
<i class="fa-solid fa-face-smile-beam text-warning"></i>
|
||
9.7 / 10 kids’ enjoyment
|
||
</span>
|
||
<span class="rating-badge">
|
||
<i class="fa-solid fa-shield-heart text-success"></i>
|
||
Parents feel kids are safe
|
||
</span>
|
||
<span class="rating-badge">
|
||
<i class="fa-solid fa-stopwatch text-sky-500"></i>
|
||
92% report better discipline
|
||
</span>
|
||
</div>
|
||
<div class="rating-trend">
|
||
<i class="fa-solid fa-arrow-trend-up"></i>
|
||
Rating up +0.2 vs last year
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- TIMELINE TAB -->
|
||
<div class="tab-pane fade" id="tab-timeline">
|
||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||
<div>
|
||
<h4 class="fw-800 mb-1">Club Timeline</h4>
|
||
<p class="text-muted small mb-0">Daily moments, announcements, and highlights.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="news-timeline">
|
||
<div class="row">
|
||
<div class="col-12">
|
||
|
||
<div class="timeline-date"><span>15 Feb 2026</span></div>
|
||
|
||
<article class="news-card">
|
||
<span class="news-dot"></span>
|
||
<div class="news-header d-flex align-items-center gap-3">
|
||
<img class="news-avatar"
|
||
src="https://images.unsplash.com/photo-1546484959-f9a9ae384058?auto=format&fit=crop&w=200&q=80"
|
||
alt="Club avatar">
|
||
<div class="news-meta">
|
||
<h6 class="mb-0 fw-bold">Emperor Taekwondo Academy</h6>
|
||
<small>Just now · Seef District</small>
|
||
</div>
|
||
</div>
|
||
<div class="news-content">
|
||
<img class="news-img"
|
||
src="https://images.unsplash.com/photo-1603988363607-41a96cdcd875?auto=format&fit=crop&w=900&q=80"
|
||
alt="Tournament">
|
||
<p class="mb-2 small">
|
||
What a night! Our juniors brought home 6 gold and 4 silver medals from the
|
||
Bahrain Inter-Club Championship. Proud of every athlete who stepped on the
|
||
mats.
|
||
</p>
|
||
<div class="news-actions">
|
||
<a href="#" class="news-action"><i
|
||
class="fa-regular fa-heart"></i> 142</a>
|
||
<a href="#" class="news-action"><i
|
||
class="fa-regular fa-comment"></i> 18</a>
|
||
<a href="#" class="news-action"><i
|
||
class="fa-solid fa-share"></i> Share</a>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="news-card">
|
||
<span class="news-dot"></span>
|
||
<div class="news-header d-flex align-items-center gap-3">
|
||
<img class="news-avatar"
|
||
src="https://images.unsplash.com/photo-1546484959-f9a9ae384058?auto=format&fit=crop&w=200&q=80"
|
||
alt="Club avatar">
|
||
<div class="news-meta">
|
||
<h6 class="mb-0 fw-bold">Emperor Taekwondo Academy</h6>
|
||
<small>1 hour ago · Announcement</small>
|
||
</div>
|
||
</div>
|
||
<div class="news-content">
|
||
<img class="news-img"
|
||
src="https://images.unsplash.com/photo-1517836357463-d25dfeac3438?auto=format&fit=crop&w=900&q=80"
|
||
alt="New program">
|
||
<p class="mb-2 small">
|
||
New “Parents & Kids” fundamentals class launching next week. Build
|
||
confidence, discipline, and quality time together on the mats.
|
||
</p>
|
||
<div class="news-actions">
|
||
<a href="#" class="news-action"><i
|
||
class="fa-regular fa-heart"></i> 96</a>
|
||
<a href="#" class="news-action"><i
|
||
class="fa-regular fa-comment"></i> 12</a>
|
||
<a href="#" class="news-action"><i
|
||
class="fa-solid fa-share"></i> Share</a>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="news-card">
|
||
<span class="news-dot"></span>
|
||
<div class="news-header d-flex align-items-center gap-3">
|
||
<img class="news-avatar"
|
||
src="https://images.unsplash.com/photo-1546484959-f9a9ae384058?auto=format&fit=crop&w=200&q=80"
|
||
alt="Club avatar">
|
||
<div class="news-meta">
|
||
<h6 class="mb-0 fw-bold">Emperor Taekwondo Academy</h6>
|
||
<small>3 hours ago · Highlight</small>
|
||
</div>
|
||
</div>
|
||
<div class="news-content">
|
||
<img class="news-img"
|
||
src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?auto=format&fit=crop&w=900&q=80"
|
||
alt="Black belt">
|
||
<p class="mb-2 small">
|
||
Congratulations to our newest black belt, Ahmed, for passing his Dan exam
|
||
with distinction. Years of hard work and consistency paying off.
|
||
</p>
|
||
<div class="news-actions">
|
||
<a href="#" class="news-action"><i
|
||
class="fa-regular fa-heart"></i> 210</a>
|
||
<a href="#" class="news-action"><i
|
||
class="fa-regular fa-comment"></i> 34</a>
|
||
<a href="#" class="news-action"><i
|
||
class="fa-solid fa-share"></i> Share</a>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<div class="timeline-date"><span>14 Feb 2026</span></div>
|
||
|
||
<article class="news-card">
|
||
<span class="news-dot"></span>
|
||
<div class="news-header d-flex align-items-center gap-3">
|
||
<img class="news-avatar"
|
||
src="https://images.unsplash.com/photo-1546484959-f9a9ae384058?auto=format&fit=crop&w=200&q=80"
|
||
alt="Club avatar">
|
||
<div class="news-meta">
|
||
<h6 class="mb-0 fw-bold">Emperor Taekwondo Academy</h6>
|
||
<small>Yesterday · Event</small>
|
||
</div>
|
||
</div>
|
||
<div class="news-content">
|
||
<img class="news-img"
|
||
src="https://images.unsplash.com/photo-1528825871115-3581a5387919?auto=format&fit=crop&w=900&q=80"
|
||
alt="Seminar">
|
||
<p class="mb-2 small">
|
||
Thank you Master Lee for an incredible sparring seminar. Over 60 students from
|
||
around Bahrain joined us for three hours of high-level training.
|
||
</p>
|
||
<div class="news-actions">
|
||
<a href="#" class="news-action"><i
|
||
class="fa-regular fa-heart"></i> 173</a>
|
||
<a href="#" class="news-action"><i
|
||
class="fa-regular fa-comment"></i> 27</a>
|
||
<a href="#" class="news-action"><i
|
||
class="fa-solid fa-share"></i> Share</a>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<div class="timeline-date"><span>13 Feb 2026</span></div>
|
||
|
||
<article class="news-card">
|
||
<span class="news-dot"></span>
|
||
<div class="news-header d-flex align-items-center gap-3">
|
||
<img class="news-avatar"
|
||
src="https://images.unsplash.com/photo-1546484959-f9a9ae384058?auto=format&fit=crop&w=200&q=80"
|
||
alt="Club avatar">
|
||
<div class="news-meta">
|
||
<h6 class="mb-0 fw-bold">Emperor Taekwondo Academy</h6>
|
||
<small>2 days ago · Community</small>
|
||
</div>
|
||
</div>
|
||
<div class="news-content">
|
||
<img class="news-img"
|
||
src="https://images.unsplash.com/photo-1601650680065-3f8c8a3a0205?auto=format&fit=crop&w=900&q=80"
|
||
alt="Parents night">
|
||
<p class="mb-2 small">
|
||
Parents’ Open Night recap: Q&A with coaches, live demos from our juniors,
|
||
and a full walkthrough of our belt progression system.
|
||
</p>
|
||
<div class="news-actions">
|
||
<a href="#" class="news-action"><i
|
||
class="fa-regular fa-heart"></i> 88</a>
|
||
<a href="#" class="news-action"><i
|
||
class="fa-regular fa-comment"></i> 9</a>
|
||
<a href="#" class="news-action"><i
|
||
class="fa-solid fa-share"></i> Share</a>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<div class="timeline-date"><span>12 Feb 2026</span></div>
|
||
|
||
<article class="news-card">
|
||
<span class="news-dot"></span>
|
||
<div class="news-header d-flex align-items-center gap-3">
|
||
<img class="news-avatar"
|
||
src="https://images.unsplash.com/photo-1546484959-f9a9ae384058?auto=format&fit=crop&w=200&q=80"
|
||
alt="Club avatar">
|
||
<div class="news-meta">
|
||
<h6 class="mb-0 fw-bold">Emperor Taekwondo Academy</h6>
|
||
<small>3 days ago · Schedule</small>
|
||
</div>
|
||
</div>
|
||
<div class="news-content">
|
||
<img class="news-img"
|
||
src="https://images.unsplash.com/photo-1517836357463-d25dfeac3438?auto=format&fit=crop&w=900&q=80"
|
||
alt="Summer camp">
|
||
<p class="mb-2 small">
|
||
Summer Camp 2026 registrations are now open. Limited spots for our 2‑week
|
||
intensive program mixing taekwondo, conditioning, and character building.
|
||
</p>
|
||
<div class="news-actions">
|
||
<a href="#" class="news-action"><i
|
||
class="fa-regular fa-heart"></i> 132</a>
|
||
<a href="#" class="news-action"><i
|
||
class="fa-regular fa-comment"></i> 22</a>
|
||
<a href="#" class="news-action"><i
|
||
class="fa-solid fa-share"></i> Share</a>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<div class="timeline-date"><span>11 Feb 2026</span></div>
|
||
|
||
<article class="news-card">
|
||
<span class="news-dot"></span>
|
||
<div class="news-header d-flex align-items-center gap-3">
|
||
<img class="news-avatar"
|
||
src="https://images.unsplash.com/photo-1546484959-f9a9ae384058?auto=format&fit=crop&w=200&q=80"
|
||
alt="Club avatar">
|
||
<div class="news-meta">
|
||
<h6 class="mb-0 fw-bold">Emperor Taekwondo Academy</h6>
|
||
<small>4 days ago · Highlight</small>
|
||
</div>
|
||
</div>
|
||
<div class="news-content">
|
||
<img class="news-img"
|
||
src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?auto=format&fit=crop&w=900&q=80"
|
||
alt="Student of month">
|
||
<p class="mb-2 small">
|
||
Student of the Month: Fatima (Juniors Group B). Zero missed sessions, strong
|
||
attitude, and always the first to help her teammates.
|
||
</p>
|
||
<div class="news-actions">
|
||
<a href="#" class="news-action"><i
|
||
class="fa-regular fa-heart"></i> 75</a>
|
||
<a href="#" class="news-action"><i
|
||
class="fa-regular fa-comment"></i> 11</a>
|
||
<a href="#" class="news-action"><i
|
||
class="fa-solid fa-share"></i> Share</a>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<div class="timeline-date"><span>10 Feb 2026</span></div>
|
||
|
||
<article class="news-card">
|
||
<span class="news-dot"></span>
|
||
<div class="news-header d-flex align-items-center gap-3">
|
||
<img class="news-avatar"
|
||
src="https://images.unsplash.com/photo-1546484959-f9a9ae384058?auto=format&fit=crop&w=200&q=80"
|
||
alt="Club avatar">
|
||
<div class="news-meta">
|
||
<h6 class="mb-0 fw-bold">Emperor Taekwondo Academy</h6>
|
||
<small>5 days ago · Facilities</small>
|
||
</div>
|
||
</div>
|
||
<div class="news-content">
|
||
<img class="news-img"
|
||
src="https://images.unsplash.com/photo-1540497077202-7c8a3999166f?auto=format&fit=crop&w=900&q=80"
|
||
alt="Dojo upgrade">
|
||
<p class="mb-2 small">
|
||
New mats, new bags, same spirit. Our main dojang just got a full upgrade to
|
||
competition‑grade flooring for safer, sharper training.
|
||
</p>
|
||
<div class="news-actions">
|
||
<a href="#" class="news-action"><i
|
||
class="fa-regular fa-heart"></i> 101</a>
|
||
<a href="#" class="news-action"><i
|
||
class="fa-regular fa-comment"></i> 14</a>
|
||
<a href="#" class="news-action"><i
|
||
class="fa-solid fa-share"></i> Share</a>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<div class="timeline-date"><span>9 Feb 2026</span></div>
|
||
|
||
<article class="news-card">
|
||
<span class="news-dot"></span>
|
||
<div class="news-header d-flex align-items-center gap-3">
|
||
<img class="news-avatar"
|
||
src="https://images.unsplash.com/photo-1546484959-f9a9ae384058?auto=format&fit=crop&w=200&q=80"
|
||
alt="Club avatar">
|
||
<div class="news-meta">
|
||
<h6 class="mb-0 fw-bold">Emperor Taekwondo Academy</h6>
|
||
<small>1 week ago · Community</small>
|
||
</div>
|
||
</div>
|
||
<div class="news-content">
|
||
<img class="news-img"
|
||
src="https://images.unsplash.com/photo-1517836357463-d25dfeac3438?auto=format&fit=crop&w=900&q=80"
|
||
alt="Charity">
|
||
<p class="mb-2 small">
|
||
Our team joined a charity fitness day in support of local youth initiatives.
|
||
Thank you to everyone who donated and participated.
|
||
</p>
|
||
<div class="news-actions">
|
||
<a href="#" class="news-action"><i
|
||
class="fa-regular fa-heart"></i> 64</a>
|
||
<a href="#" class="news-action"><i
|
||
class="fa-regular fa-comment"></i> 7</a>
|
||
<a href="#" class="news-action"><i
|
||
class="fa-solid fa-share"></i> Share</a>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<div class="timeline-date"><span>8 Feb 2026</span></div>
|
||
|
||
<article class="news-card">
|
||
<span class="news-dot"></span>
|
||
<div class="news-header d-flex align-items-center gap-3">
|
||
<img class="news-avatar"
|
||
src="https://images.unsplash.com/photo-1546484959-f9a9ae384058?auto=format&fit=crop&w=200&q=80"
|
||
alt="Club avatar">
|
||
<div class="news-meta">
|
||
<h6 class="mb-0 fw-bold">Emperor Taekwondo Academy</h6>
|
||
<small>1 week ago · Reminder</small>
|
||
</div>
|
||
</div>
|
||
<div class="news-content">
|
||
<img class="news-img"
|
||
src="https://images.unsplash.com/photo-1571019613914-85f342c1d4b1?auto=format&fit=crop&w=900&q=80"
|
||
alt="Schedule">
|
||
<p class="mb-2 small">
|
||
Reminder: Monthly belt grading is coming up. Please confirm your attendance
|
||
with reception and ensure you’ve completed your attendance requirements.
|
||
</p>
|
||
<div class="news-actions">
|
||
<a href="#" class="news-action"><i
|
||
class="fa-regular fa-heart"></i> 52</a>
|
||
<a href="#" class="news-action"><i
|
||
class="fa-regular fa-comment"></i> 5</a>
|
||
<a href="#" class="news-action"><i
|
||
class="fa-solid fa-share"></i> Share</a>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- PLACEHOLDER TABS -->
|
||
<div class="tab-pane fade" id="tab-fac">
|
||
<p class="text-muted">Detailed facility walkthroughs...</p>
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="tab-pro">
|
||
<p class="text-muted">Full trainer bios...</p>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Scripts -->
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
|
||
|
||
<!-- YouTube IFrame API for hover background video -->
|
||
<script src="https://www.youtube.com/iframe_api"></script>
|
||
<script>
|
||
let heroPlayer;
|
||
let heroVideoReady = false;
|
||
|
||
function onYouTubeIframeAPIReady() {
|
||
const iframe = document.getElementById('heroVideoIframe');
|
||
if (!iframe) return;
|
||
heroPlayer = new YT.Player('heroVideoIframe', {
|
||
events: {
|
||
'onReady': function (e) {
|
||
e.target.mute();
|
||
heroVideoReady = true;
|
||
document.getElementById('heroBanner').classList.add('video-ready');
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
document.addEventListener('DOMContentLoaded', function () {
|
||
const heroBanner = document.getElementById('heroBanner');
|
||
heroBanner.addEventListener('mouseenter', function () {
|
||
if (heroPlayer && heroVideoReady) {
|
||
heroPlayer.playVideo();
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
|
||
<!-- Charts -->
|
||
<script>
|
||
const donutNationalitiesCtx = document.getElementById('donutNationalities');
|
||
if (donutNationalitiesCtx) {
|
||
new Chart(donutNationalitiesCtx, {
|
||
type: 'doughnut',
|
||
data: {
|
||
labels: ['Bahrain', 'Pakistan', 'India', 'Other GCC'],
|
||
datasets: [{
|
||
data: [52, 18, 16, 14],
|
||
backgroundColor: ['#ef4444', '#0ea5e9', '#22c55e', '#8b5cf6'],
|
||
borderWidth: 0
|
||
}]
|
||
},
|
||
options: {
|
||
cutout: '65%',
|
||
plugins: {
|
||
legend: { display: false },
|
||
tooltip: { callbacks: { label: ctx => `${ctx.label}: ${ctx.parsed}%` } }
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
const donutAgeCtx = document.getElementById('donutAgeGroups');
|
||
if (donutAgeCtx) {
|
||
new Chart(donutAgeCtx, {
|
||
type: 'doughnut',
|
||
data: {
|
||
labels: ['Kids', 'Juniors', 'Youth', 'Adults'],
|
||
datasets: [{
|
||
data: [28, 42, 18, 12],
|
||
backgroundColor: ['#f97316', '#22c55e', '#3b82f6', '#94a3b8'],
|
||
borderWidth: 0
|
||
}]
|
||
},
|
||
options: {
|
||
cutout: '65%',
|
||
plugins: {
|
||
legend: { display: false },
|
||
tooltip: { callbacks: { label: ctx => `${ctx.label}: ${ctx.parsed}%` } }
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
const donutGenderCtx = document.getElementById('donutGender');
|
||
if (donutGenderCtx) {
|
||
new Chart(donutGenderCtx, {
|
||
type: 'doughnut',
|
||
data: {
|
||
labels: ['Male', 'Female'],
|
||
datasets: [{
|
||
data: [58, 42],
|
||
backgroundColor: ['#3b82f6', '#ec4899'],
|
||
borderWidth: 0
|
||
}]
|
||
},
|
||
options: {
|
||
cutout: '65%',
|
||
plugins: {
|
||
legend: { display: false },
|
||
tooltip: { callbacks: { label: ctx => `${ctx.label}: ${ctx.parsed}%` } }
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
const donutHoroscopeCtx = document.getElementById('donutHoroscope');
|
||
if (donutHoroscopeCtx) {
|
||
new Chart(donutHoroscopeCtx, {
|
||
type: 'doughnut',
|
||
data: {
|
||
labels: ['Fire', 'Earth', 'Air', 'Water'],
|
||
datasets: [{
|
||
data: [30, 25, 22, 23],
|
||
backgroundColor: ['#f97316', '#22c55e', '#0ea5e9', '#6366f1'],
|
||
borderWidth: 0
|
||
}]
|
||
},
|
||
options: {
|
||
cutout: '65%',
|
||
plugins: {
|
||
legend: { display: false },
|
||
tooltip: { callbacks: { label: ctx => `${ctx.label} signs: ${ctx.parsed}%` } }
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
const donutBloodCtx = document.getElementById('donutBloodType');
|
||
if (donutBloodCtx) {
|
||
new Chart(donutBloodCtx, {
|
||
type: 'doughnut',
|
||
data: {
|
||
labels: ['O', 'A', 'B', 'AB'],
|
||
datasets: [{
|
||
data: [40, 32, 18, 10],
|
||
backgroundColor: ['#ef4444', '#f97316', '#22c55e', '#3b82f6'],
|
||
borderWidth: 0
|
||
}]
|
||
},
|
||
options: {
|
||
cutout: '65%',
|
||
plugins: {
|
||
legend: { display: false },
|
||
tooltip: { callbacks: { label: ctx => `Type ${ctx.label}: ${ctx.parsed}%` } }
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
const donutChampCtx = document.getElementById('donutChampions');
|
||
if (donutChampCtx) {
|
||
new Chart(donutChampCtx, {
|
||
type: 'doughnut',
|
||
data: {
|
||
labels: ['Medalists', 'Podium finishes', 'Competitors', 'Yet to compete'],
|
||
datasets: [{
|
||
data: [18, 24, 28, 30],
|
||
backgroundColor: ['#22c55e', '#eab308', '#94a3b8', '#e5e7eb'],
|
||
borderWidth: 0
|
||
}]
|
||
},
|
||
options: {
|
||
cutout: '65%',
|
||
plugins: {
|
||
legend: { display: false },
|
||
tooltip: { callbacks: { label: ctx => `${ctx.label}: ${ctx.parsed}%` } }
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
const barMonthlyCtx = document.getElementById('barMonthlyMembers');
|
||
if (barMonthlyCtx) {
|
||
new Chart(barMonthlyCtx, {
|
||
type: 'bar',
|
||
data: {
|
||
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||
datasets: [
|
||
{
|
||
label: 'Male',
|
||
data: [126, 135, 140, 145, 138, 120, 112, 115, 132, 145, 142, 130],
|
||
backgroundColor: '#3b82f6',
|
||
borderWidth: 0
|
||
},
|
||
{
|
||
label: 'Female',
|
||
data: [89, 95, 98, 102, 97, 88, 80, 82, 94, 104, 101, 92],
|
||
backgroundColor: '#ec4899',
|
||
borderWidth: 0
|
||
}
|
||
]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
maintainAspectRatio: false,
|
||
animation: false,
|
||
scales: {
|
||
x: {
|
||
stacked: true,
|
||
grid: { display: false },
|
||
ticks: { color: '#6b7280', font: { size: 11 } }
|
||
},
|
||
y: {
|
||
stacked: true,
|
||
grid: { color: '#e5e7eb' },
|
||
ticks: { color: '#6b7280', font: { size: 11 }, stepSize: 50 }
|
||
}
|
||
},
|
||
plugins: {
|
||
legend: {
|
||
labels: { font: { size: 11 }, color: '#374151' }
|
||
},
|
||
tooltip: {
|
||
callbacks: {
|
||
footer: (items) => {
|
||
let total = 0;
|
||
items.forEach(i => total += i.parsed.y);
|
||
return 'Total: ' + total;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
</script>
|
||
|
||
</body>
|
||
|
||
</html>
|