Update templates/club-layout.html
This commit is contained in:
parent
37182cd37e
commit
1a750f39ac
@ -9,7 +9,7 @@
|
||||
<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; }
|
||||
:root { --primary: #ff3131; --dark: #0f172a; --secondary-bg: #f8fafc; --muted-foreground: #64748b; }
|
||||
body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #f1f5f9; color: #1e293b; }
|
||||
|
||||
/* BOXED LAYOUT - FIXED */
|
||||
@ -63,10 +63,27 @@
|
||||
/* --- FACILITY GRID --- */
|
||||
.fac-preview { border-radius: 20px; height: 160px; object-fit: cover; width: 100%; margin-bottom: 15px; }
|
||||
|
||||
/* Packages (Standardized) */
|
||||
.package-card { border: 1px solid #edf2f7; border-radius: 28px; overflow: hidden; height: 100%; display: flex; flex-direction: column; }
|
||||
.package-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
|
||||
/* --- PACKAGES GRID ADDITIONS --- */
|
||||
.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; border-radius: 28px; overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: all 0.3s; }
|
||||
.package-card:hover { shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
|
||||
.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; border-radius: 12px; 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; }
|
||||
|
||||
/* --- STATS CHART BOX --- */
|
||||
.chart-box { background: #f8fafc; border-radius: 24px; padding: 25px; border: 1px solid #e2e8f0; }
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@ -93,14 +110,16 @@
|
||||
|
||||
<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-about">Overview</button></li>
|
||||
<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-fac">Facilities</button></li>
|
||||
<li class="nav-item"><button class="nav-link" data-bs-toggle="pill" data-bs-target="#tab-pro">Expert Coaches</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">
|
||||
<div class="tab-pane fade show active" id="tab-about">
|
||||
|
||||
<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">
|
||||
@ -108,7 +127,7 @@
|
||||
<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>
|
||||
<span class="badge bg-light text-dark rounded-pill border px-3 py-2">Powered by TAKEONE</span>
|
||||
<!--<span class="badge bg-light text-dark rounded-pill border px-3 py-2">Powered by TAKEONE</span>-->
|
||||
</div>
|
||||
<div class="row g-3">
|
||||
<div class="col-md-4">
|
||||
@ -147,33 +166,33 @@
|
||||
<hr class="my-5 opacity-5">
|
||||
|
||||
<div class="row g-5">
|
||||
<div class="col-lg-6">
|
||||
<h4 class="fw-800 mb-4">Meet the Experts</h4>
|
||||
<div class="row g-3">
|
||||
<div class="col-12">
|
||||
<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>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="mini-trainer">
|
||||
<img src="https://images.unsplash.com/photo-1567013127542-490d757e51fe?auto=format&fit=crop&w=200" class="mini-pfp">
|
||||
<div>
|
||||
<h6 class="fw-bold mb-1">Coach Yasin</h6>
|
||||
<p class="text-muted small mb-0">IFBB Pro & Body Transformation specialist.</p>
|
||||
</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">Meet The Experts</h4>
|
||||
<p class="text-muted small mb-0">Best Trainers With Exceptional Experties</p>
|
||||
</div>
|
||||
<!--<span class="badge bg-light text-dark rounded-pill border px-3 py-2">Powered by TAKEONE</span>-->
|
||||
</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">
|
||||
<h4 class="fw-800 mb-4">Elite Facilities</h4>
|
||||
<!--<h4 class="fw-800 mb-4">Elite Facilities</h4>-->
|
||||
<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>
|
||||
<!--<span class="badge bg-light text-dark rounded-pill border px-3 py-2">Powered by TAKEONE</span>-->
|
||||
</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">
|
||||
@ -191,14 +210,90 @@
|
||||
</div>
|
||||
|
||||
<div class="tab-pane fade" id="tab-packages">
|
||||
<p class="text-muted">Package details content...</p>
|
||||
<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 (S.T.T) 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 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 (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 (S.T.T) CLASS C</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</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/1760759003755-1760759026625.jpg" class="package-img">
|
||||
</div>
|
||||
<div class="p-4 flex-grow-1">
|
||||
<h3 class="h5 fw-bold mb-2">Juniors (S.T.T) 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 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 (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 (S.T.T) CLASS C</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</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>
|
||||
|
||||
<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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user