1551 lines
75 KiB
HTML
1551 lines
75 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-banner {
|
||
min-height: 580px;
|
||
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;
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
padding: 45px;
|
||
}
|
||
|
||
.banner-top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.club-logo-wrapper {
|
||
width: 95px;
|
||
height: 95px;
|
||
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;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.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%;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
/* TODAY CLASSES */
|
||
.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 FEED */
|
||
.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 */
|
||
.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 #e5e7eb;
|
||
background: #f9fafb;
|
||
color: #475569;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
|
||
.event-footer {
|
||
border-top: 1px dashed #e5e7eb;
|
||
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: #e5e7eb;
|
||
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 #e5e7eb;
|
||
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;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<div class="page-container">
|
||
<div class="hero-banner">
|
||
<div class="banner-top">
|
||
<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 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</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>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content-card">
|
||
<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-feeds">News</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">Scheduled</button></li>
|
||
<li class="nav-item"><button class="nav-link" data-bs-toggle="pill" data-bs-target="#tab-events">Events</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>
|
||
<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>
|
||
<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>
|
||
|
||
<!-- NEWS TAB -->
|
||
<div class="tab-pane fade" id="tab-feeds">
|
||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||
<div>
|
||
<h4 class="fw-800 mb-1">Latest News</h4>
|
||
<p class="text-muted small mb-0">Updates, moments, and stories from our community.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="news-timeline">
|
||
<div class="row">
|
||
<div class="col-12">
|
||
|
||
<!-- 15 Feb 2026 -->
|
||
<div class="timeline-date"><span>15 Feb 2026</span></div>
|
||
|
||
<!-- 1: Just now -->
|
||
<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>
|
||
|
||
<!-- 2: 1 hour ago -->
|
||
<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>
|
||
|
||
<!-- 3: 3 hours ago -->
|
||
<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>
|
||
|
||
<!-- 14 Feb 2026 -->
|
||
<div class="timeline-date"><span>14 Feb 2026</span></div>
|
||
|
||
<!-- 4: Yesterday -->
|
||
<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>
|
||
|
||
<!-- 13 Feb 2026 -->
|
||
<div class="timeline-date"><span>13 Feb 2026</span></div>
|
||
|
||
<!-- 5: 2 days ago -->
|
||
<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>
|
||
|
||
<!-- 12 Feb 2026 -->
|
||
<div class="timeline-date"><span>12 Feb 2026</span></div>
|
||
|
||
<!-- 6: 3 days ago -->
|
||
<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>
|
||
|
||
<!-- 11 Feb 2026 -->
|
||
<div class="timeline-date"><span>11 Feb 2026</span></div>
|
||
|
||
<!-- 7: 4 days ago -->
|
||
<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>
|
||
|
||
<!-- 10 Feb 2026 -->
|
||
<div class="timeline-date"><span>10 Feb 2026</span></div>
|
||
|
||
<!-- 8: 5 days ago -->
|
||
<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>
|
||
|
||
<!-- 9 Feb 2026 -->
|
||
<div class="timeline-date"><span>9 Feb 2026</span></div>
|
||
|
||
<!-- 9: 1 week ago – Community -->
|
||
<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>
|
||
|
||
<!-- 8 Feb 2026 -->
|
||
<div class="timeline-date"><span>8 Feb 2026</span></div>
|
||
|
||
<!-- 10: 1 week ago – Reminder -->
|
||
<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>
|
||
|
||
<!-- 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>
|
||
|
||
<!-- SCHEDULED 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">
|
||
<!-- Empty left column as requested -->
|
||
</div>
|
||
<div class="col-lg-8 col-12">
|
||
|
||
<!-- 5:00 PM – DROP-IN (PAST, DISABLED) -->
|
||
<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>
|
||
|
||
<!-- 6:00 PM – ONGOING & BOOKABLE -->
|
||
<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>
|
||
|
||
<!-- 8:30 PM – FULL -->
|
||
<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">
|
||
|
||
<!-- EVENT 1 -->
|
||
<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>
|
||
|
||
<!-- EVENT 2 -->
|
||
<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>
|
||
|
||
<!-- EVENT 3 -->
|
||
<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>
|
||
|
||
<!-- EVENT 4 -->
|
||
<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>
|
||
|
||
<!-- EXTRA 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>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||
</body>
|
||
|
||
</html>
|