Add templates/club-layout.html
This commit is contained in:
parent
2b5d8f9d1b
commit
37182cd37e
208
templates/club-layout.html
Normal file
208
templates/club-layout.html
Normal file
@ -0,0 +1,208 @@
|
||||
<!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; }
|
||||
body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #f1f5f9; color: #1e293b; }
|
||||
|
||||
/* BOXED LAYOUT - FIXED */
|
||||
.page-container { max-width: 1200px; margin: 30px auto; padding: 0 15px; }
|
||||
|
||||
/* --- THE BANNER --- */
|
||||
.hero-banner {
|
||||
min-height: 580px; border-radius: 40px;
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.95)),
|
||||
url('https://images.unsplash.com/photo-1534438327276-14e5300c3a48?auto=format&fit=crop&w=1400&q=80') 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; background: white; border-radius: 24px; padding: 12px; 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; background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(12px); padding: 10px; border-radius: 22px; border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
.hub-link {
|
||||
width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
|
||||
color: white; text-decoration: none; border-radius: 15px; transition: 0.3s; background: rgba(255,255,255,0.05);
|
||||
}
|
||||
.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 SECTION --- */
|
||||
.content-card { background: white; border-radius: 40px; 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); }
|
||||
|
||||
/* --- PERKS CARDS --- */
|
||||
.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-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 CARDS --- */
|
||||
.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; }
|
||||
|
||||
/* --- 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; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="page-container">
|
||||
<div class="hero-banner">
|
||||
<div class="banner-top">
|
||||
<div class="club-logo-wrapper"><img src="https://takeone-dev.innovator.bh/img/logo.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="display-3 fw-800 text-white mb-2">Titanium Zenith</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-about">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-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>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane fade show active" id="tab-about">
|
||||
|
||||
<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>
|
||||
<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">
|
||||
<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">
|
||||
<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>
|
||||
</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>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="tab-pane fade" id="tab-packages">
|
||||
<p class="text-muted">Package details content...</p>
|
||||
</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>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user