From 83fd6d802152487dc657f1cc95eed3a9c86427ee Mon Sep 17 00:00:00 2001 From: Ghassan Yusuf Date: Sun, 15 Feb 2026 16:00:20 +0300 Subject: [PATCH] Update templates/club-layout.html --- templates/club-layout.html | 1041 +++++++++++++++++++++++++++++++++++- 1 file changed, 1014 insertions(+), 27 deletions(-) diff --git a/templates/club-layout.html b/templates/club-layout.html index aa369a7..7563152 100644 --- a/templates/club-layout.html +++ b/templates/club-layout.html @@ -23,19 +23,16 @@ 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; + 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; @@ -52,9 +49,6 @@ .club-logo-wrapper { width: 95px; height: 95px; - /*background: white;*/ - /*border-radius: 24px;*/ - /*padding: 12px;*/ display: flex; align-items: center; justify-content: center; @@ -74,12 +68,11 @@ justify-content: center; color: white; text-decoration: none; - border-radius: 15px; + border-radius: 22px; transition: 0.3s; 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); } @@ -118,10 +111,8 @@ font-weight: 700; } - /* --- CONTENT SECTION --- */ .content-card { background: white; - /*border-radius: 40px;*/ margin-top: -65px; position: relative; z-index: 10; @@ -144,7 +135,6 @@ box-shadow: 0 12px 24px rgba(255, 49, 49, 0.25); } - /* --- PERKS CARDS --- */ .perk-card { border-radius: 24px; overflow: hidden; @@ -175,6 +165,11 @@ 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; @@ -187,7 +182,6 @@ font-size: 0.8rem; } - /* --- MINI TRAINER CARDS --- */ .mini-trainer { background: #f8fafc; border-radius: 20px; @@ -211,7 +205,6 @@ object-fit: cover; } - /* --- FACILITY GRID --- */ .fac-preview { border-radius: 20px; height: 160px; @@ -220,7 +213,6 @@ margin-bottom: 15px; } - /* --- PACKAGES GRID ADDITIONS --- */ .grid-packages { display: grid; grid-template-columns: repeat(1, 1fr); @@ -241,7 +233,6 @@ .package-card { border: 1px solid #edf2f7; - /*border-radius: 28px;*/ overflow: hidden; height: 100%; display: flex; @@ -250,7 +241,8 @@ } .package-card:hover { - shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); + box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.25); + transform: translateY(-4px); } .package-img-wrapper { @@ -269,7 +261,6 @@ .activity-item { border: 1px solid #e2e8f0; - /*border-radius: 12px;*/ padding: 12px; background: rgba(248, 250, 252, 0.5); margin-bottom: 8px; @@ -307,13 +298,398 @@ border: none; } - /* --- STATS CHART BOX --- */ .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; + } + } @@ -323,7 +699,9 @@