1518 lines
102 KiB
HTML
1518 lines
102 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Take One Sports App</title>
|
||
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
|
||
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
|
||
crossorigin="anonymous">
|
||
<link rel="stylesheet"
|
||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
|
||
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
|
||
crossorigin="anonymous"
|
||
referrerpolicy="no-referrer"/>
|
||
|
||
<style>
|
||
:root {
|
||
--primary-color: #6c63ff;
|
||
--secondary-bg: #f5f5f9;
|
||
--white: #ffffff;
|
||
--text-dark: #333333;
|
||
--text-medium: #555555;
|
||
--text-light: #999999;
|
||
--border-color: #eeeeee;
|
||
--light-gray-bg: #f7f7f7;
|
||
--activity-accent: #00bcd4;
|
||
--tab-bar-height: 62px;
|
||
--app-padding: 16px;
|
||
--success-color: #4caf50;
|
||
--warning-color: #ff9800;
|
||
--danger-color: #f44336;
|
||
}
|
||
|
||
* { box-sizing: border-box; }
|
||
|
||
body {
|
||
margin: 0;
|
||
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||
background-color: var(--secondary-bg);
|
||
color: var(--text-dark);
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* Sidebar */
|
||
.app-sidebar {
|
||
position: fixed;
|
||
top: 0;
|
||
left: -280px;
|
||
width: 280px;
|
||
height: 100vh;
|
||
background: var(--white);
|
||
box-shadow: 2px 0 12px rgba(0,0,0,0.12);
|
||
z-index: 60;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 14px;
|
||
transition: left 0.25s ease-out;
|
||
overflow-y: auto;
|
||
}
|
||
.app-sidebar.open { left: 0; }
|
||
.app-sidebar-backdrop {
|
||
position: fixed; inset: 0; background: rgba(0,0,0,0.4);
|
||
z-index: 55; display: none; backdrop-filter: blur(2px);
|
||
}
|
||
.app-sidebar-backdrop.show { display: block; }
|
||
.sidebar-header {
|
||
display: flex; justify-content: space-between; align-items: center;
|
||
margin-bottom: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--border-color);
|
||
}
|
||
.sidebar-title {
|
||
font-weight: 800; color: var(--primary-color); font-size: 17px;
|
||
display: flex; flex-direction: column; gap: 2px;
|
||
}
|
||
.sidebar-title small {
|
||
font-size: 10px; color: var(--text-light); font-weight: 500;
|
||
}
|
||
.sidebar-close {
|
||
border: none; background: var(--light-gray-bg); font-size: 18px;
|
||
width: 32px; height: 32px; border-radius: 8px;
|
||
color: var(--text-medium); display: flex; align-items: center;
|
||
justify-content: center; cursor: pointer; transition: all 0.2s;
|
||
}
|
||
.sidebar-close:hover { background: var(--danger-color); color: white; }
|
||
.sidebar-section-label {
|
||
font-size: 10px; text-transform: uppercase; color: var(--text-light);
|
||
margin-top: 14px; margin-bottom: 6px; font-weight: 700; letter-spacing: 0.5px;
|
||
padding-left: 4px;
|
||
}
|
||
.sidebar-link {
|
||
width: 100%; border: none; background: transparent;
|
||
display: flex; align-items: center; gap: 12px;
|
||
padding: 11px 10px; border-radius: 10px;
|
||
font-size: 14px; color: var(--text-medium);
|
||
text-align: left; cursor: pointer; transition: all 0.2s;
|
||
font-weight: 500;
|
||
}
|
||
.sidebar-link span:first-child {
|
||
font-size: 18px;
|
||
width: 24px;
|
||
text-align: center;
|
||
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
|
||
}
|
||
.sidebar-link:hover {
|
||
background: linear-gradient(135deg, rgba(108,99,255,0.1), rgba(108,99,255,0.05));
|
||
transform: translateX(3px);
|
||
}
|
||
.sidebar-link.active {
|
||
background: linear-gradient(135deg, var(--primary-color), #8a84ff);
|
||
color: var(--white);
|
||
box-shadow: 0 4px 12px rgba(108, 99, 255, 0.3);
|
||
}
|
||
.sidebar-link.active span:first-child {
|
||
filter: brightness(1.2) drop-shadow(0 2px 4px rgba(0,0,0,0.2));
|
||
}
|
||
.sidebar-badge {
|
||
margin-left: auto;
|
||
background: var(--danger-color);
|
||
color: white;
|
||
font-size: 10px;
|
||
padding: 2px 7px;
|
||
border-radius: 999px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
/* View-specific sidebar items */
|
||
.sidebar-link[data-view="personal"] { display: none; }
|
||
.sidebar-link[data-view="club"] { display: flex; }
|
||
.sidebar-section-label[data-view="personal"] { display: none; }
|
||
.sidebar-section-label[data-view="club"] { display: block; }
|
||
|
||
body.view-personal .sidebar-link[data-view="club"] { display: none; }
|
||
body.view-personal .sidebar-link[data-view="personal"] { display: flex; }
|
||
body.view-personal .sidebar-section-label[data-view="club"] { display: none; }
|
||
body.view-personal .sidebar-section-label[data-view="personal"] { display: block; }
|
||
|
||
body.view-club .sidebar-link[data-view="personal"] { display: none; }
|
||
body.view-club .sidebar-link[data-view="club"] { display: flex; }
|
||
body.view-club .sidebar-section-label[data-view="personal"] { display: none; }
|
||
body.view-club .sidebar-section-label[data-view="club"] { display: block; }
|
||
|
||
/* App header */
|
||
.app-header {
|
||
flex-shrink: 0; padding: 10px var(--app-padding); padding-top: 14px;
|
||
background: var(--white); border-bottom: 1px solid var(--border-color);
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
position: sticky; top: 0; z-index: 10;
|
||
}
|
||
.app-header-left { display: flex; align-items: center; gap: 12px; }
|
||
|
||
/* Logo - NO BORDER/BOX */
|
||
.app-logo {
|
||
width: 44px; height: 44px; object-fit: cover; border-radius: 12px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.1); cursor: pointer;
|
||
transition: all 0.2s;
|
||
}
|
||
.app-logo:hover {
|
||
transform: scale(1.05); box-shadow: 0 4px 12px rgba(108, 99, 255, 0.3);
|
||
}
|
||
|
||
.app-title { display: flex; flex-direction: column; cursor: pointer; }
|
||
.app-title span:first-child { font-size: 10px; color: var(--text-light); font-weight: 500; display: flex; align-items: center; gap: 4px; }
|
||
.app-title span:last-child { font-size: 17px; font-weight: 800; color: var(--primary-color); }
|
||
.app-header-actions { display: flex; align-items: center; gap: 8px; }
|
||
.icon-btn {
|
||
border: none; background: var(--light-gray-bg); width: 38px; height: 38px;
|
||
border-radius: 12px; display: flex; align-items: center;
|
||
justify-content: center; font-size: 17px; color: var(--text-medium);
|
||
padding: 0; cursor: pointer; transition: all 0.2s; position: relative;
|
||
}
|
||
.icon-btn:hover { background: var(--primary-color); color: var(--white); transform: translateY(-2px); }
|
||
.icon-btn .badge-dot {
|
||
position: absolute; top: 6px; right: 6px; width: 9px; height: 9px;
|
||
background: var(--danger-color); border-radius: 50%; border: 2px solid var(--white);
|
||
}
|
||
.pill-btn {
|
||
border-radius: 999px; padding: 9px 18px; font-size: 13px;
|
||
border: none; background: linear-gradient(135deg, var(--primary-color), #8a84ff);
|
||
color: var(--white); display: inline-flex; align-items: center; gap: 7px;
|
||
font-weight: 700; cursor: pointer; transition: all 0.2s;
|
||
box-shadow: 0 4px 12px rgba(108, 99, 255, 0.3);
|
||
}
|
||
.pill-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(108, 99, 255, 0.4); }
|
||
|
||
/* Content area */
|
||
.app-content {
|
||
flex: 1; overflow-y: auto; padding: 14px var(--app-padding);
|
||
padding-bottom: calc(var(--tab-bar-height) + 14px);
|
||
}
|
||
|
||
/* Bottom tab bar */
|
||
.app-tab-bar {
|
||
position: fixed; left: 0; right: 0; bottom: 0;
|
||
height: var(--tab-bar-height); background: var(--white);
|
||
border-top: 1px solid var(--border-color);
|
||
display: flex; justify-content: space-around;
|
||
align-items: center; z-index: 20;
|
||
box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
|
||
}
|
||
.tab-item {
|
||
flex: 1; text-align: center; font-size: 10px; color: var(--text-light);
|
||
display: flex; flex-direction: column; align-items: center;
|
||
justify-content: center; gap: 4px; cursor: pointer; padding: 6px 0;
|
||
transition: all 0.2s;
|
||
}
|
||
.tab-item span:first-child { font-size: 20px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1)); }
|
||
.tab-item.active { color: var(--primary-color); font-weight: 700; }
|
||
.tab-item.active span:first-child { filter: brightness(1.1) drop-shadow(0 2px 4px rgba(108,99,255,0.4)); }
|
||
.tab-item[data-view="personal"] { display: none; }
|
||
.tab-item[data-view="club"] { display: flex; }
|
||
body.view-personal .tab-item[data-view="club"] { display: none; }
|
||
body.view-personal .tab-item[data-view="personal"] { display: flex; }
|
||
|
||
/* Page containers */
|
||
.page-container { display: none; animation: fadeIn 0.35s ease; }
|
||
.page-container.active-page { display: block; }
|
||
.page-container[data-view="personal"] { display: none; }
|
||
.page-container[data-view="club"] { display: none; }
|
||
body.view-club .page-container[data-view="club"] { display: none; }
|
||
body.view-club .page-container[data-view="club"].active-page { display: block; }
|
||
body.view-personal .page-container[data-view="personal"] { display: none; }
|
||
body.view-personal .page-container[data-view="personal"].active-page { display: block; }
|
||
.page-container:not([data-view]).active-page { display: block; }
|
||
|
||
@keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
|
||
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
|
||
@keyframes slideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
|
||
|
||
/* KPI cards */
|
||
.kpi-grid {
|
||
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 12px; margin-bottom: 16px;
|
||
}
|
||
@media (min-width: 540px) { .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
|
||
.kpi-card {
|
||
background: var(--white); padding: 16px; border-radius: 14px;
|
||
box-shadow: 0 3px 12px rgba(0,0,0,0.06);
|
||
border-left: 5px solid var(--primary-color);
|
||
transition: transform 0.2s, box-shadow 0.2s;
|
||
}
|
||
.kpi-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.1); }
|
||
.kpi-label { font-size: 11px; color: var(--text-light); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
|
||
.kpi-value { font-size: 22px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
|
||
.kpi-value span.icon { font-size: 18px; }
|
||
.kpi-change { font-size: 11px; margin-top: 8px; display: flex; align-items: center; gap: 5px; font-weight: 600; }
|
||
.kpi-change.positive { color: var(--success-color); }
|
||
.kpi-change.negative { color: var(--danger-color); }
|
||
|
||
.section-card {
|
||
background: var(--white); border-radius: 16px; padding: 18px;
|
||
box-shadow: 0 3px 15px rgba(0,0,0,0.06); margin-bottom: 16px;
|
||
transition: transform 0.2s, box-shadow 0.2s;
|
||
}
|
||
.section-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,0.1); }
|
||
.section-header {
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
margin-bottom: 14px; flex-wrap: wrap; gap: 10px;
|
||
}
|
||
.section-header h4 { font-size: 16px; margin: 0; color: var(--primary-color); display: flex; align-items: center; gap: 9px; font-weight: 700; }
|
||
.section-header h4 span { font-size: 19px; }
|
||
.section-header small { font-size: 12px; color: var(--text-light); font-weight: 500; }
|
||
|
||
.hot-package { text-align: center; }
|
||
.hot-package-title { font-size: 15px; font-weight: 700; color: var(--primary-color); margin-bottom: 8px; }
|
||
.hot-package-count { font-size: 40px; font-weight: 900; color: var(--danger-color); line-height: 1; text-shadow: 0 2px 8px rgba(244,67,54,0.3); }
|
||
.hot-package-label { font-size: 12px; color: var(--text-medium); }
|
||
|
||
.product-list { display: flex; flex-direction: column; gap: 14px; }
|
||
.product-item { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px dashed var(--border-color); }
|
||
.product-item:last-child { border-bottom: none; }
|
||
.product-rank { font-size: 20px; font-weight: 800; color: var(--primary-color); width: 28px; text-align: center; }
|
||
.product-icon {
|
||
width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--primary-color), #8a84ff);
|
||
display: flex; align-items: center; justify-content: center; font-size: 20px;
|
||
}
|
||
.product-main { flex: 1; min-width: 0; }
|
||
.product-main strong { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
|
||
.product-main small { font-size: 11px; color: var(--text-light); display: block; margin-top: 3px; }
|
||
.product-stats { font-size: 11px; text-align: right; min-width: 80px; }
|
||
.product-stats span { display: block; font-weight: 800; color: var(--text-dark); font-size: 15px; }
|
||
|
||
.package-card {
|
||
background: var(--white); border-radius: 16px; overflow: hidden;
|
||
box-shadow: 0 3px 12px rgba(0,0,0,0.06); margin-bottom: 14px;
|
||
transition: transform 0.2s, box-shadow 0.2s;
|
||
}
|
||
.package-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
|
||
.package-img { width: 100%; height: 140px; object-fit: cover; display: block; }
|
||
.package-body { padding: 14px 16px 16px; }
|
||
.package-body h5 { font-size: 16px; margin: 0 0 8px; font-weight: 700; }
|
||
.package-body p { font-size: 12px; margin: 0 0 10px; color: var(--text-medium); line-height: 1.5; }
|
||
.package-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 12px; }
|
||
.package-meta strong { color: var(--primary-color); font-size: 15px; font-weight: 800; }
|
||
.package-summary {
|
||
display: flex; justify-content: space-between; font-size: 11px; color: var(--text-light);
|
||
border-top: 1px dashed var(--border-color); padding-top: 10px; margin-top: 8px;
|
||
}
|
||
.package-summary div { flex: 1; text-align: center; padding: 0 5px; font-weight: 500; }
|
||
.package-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
|
||
|
||
.activity-card {
|
||
background: var(--white); border-radius: 16px; box-shadow: 0 3px 12px rgba(0,0,0,0.06);
|
||
padding: 14px 16px; margin-bottom: 14px;
|
||
transition: transform 0.2s, box-shadow 0.2s;
|
||
}
|
||
.activity-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.1); }
|
||
.activity-header { display: flex; gap: 14px; margin-bottom: 10px; }
|
||
.activity-thumb { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; background: var(--light-gray-bg); box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
|
||
.activity-title { font-size: 16px; margin: 0 0 4px; font-weight: 700; }
|
||
.activity-subtitle { font-size: 12px; color: var(--text-light); }
|
||
.activity-grid-row { display: flex; gap: 10px; margin-top: 10px; }
|
||
.activity-grid-row > div {
|
||
flex: 1; background: var(--light-gray-bg); padding: 10px; border-radius: 12px;
|
||
font-size: 11px; color: var(--text-medium);
|
||
}
|
||
.activity-grid-row > div strong { display: block; font-size: 12px; color: var(--text-dark); margin-bottom: 4px; font-weight: 700; }
|
||
.activity-icons-grid {
|
||
display: grid; grid-template-columns: 1fr 1fr; gap: 7px 5px;
|
||
margin-top: 10px; font-size: 11px; color: var(--text-light);
|
||
}
|
||
.activity-icons-grid i { color: var(--activity-accent); margin-right: 5px; width: 16px; }
|
||
.activity-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
|
||
|
||
.profile-card {
|
||
background: var(--white); border-radius: 16px; padding: 18px;
|
||
box-shadow: 0 3px 12px rgba(0,0,0,0.06); margin-bottom: 16px;
|
||
}
|
||
.profile-header-content { display: flex; gap: 16px; align-items: flex-start; }
|
||
.profile-pic { width: 80px; height: 80px; border-radius: 18px; object-fit: cover; background: var(--light-gray-bg); box-shadow: 0 3px 12px rgba(0,0,0,0.1); }
|
||
.profile-main-info h3 { font-size: 18px; margin: 0 0 8px; font-weight: 800; }
|
||
.stats-badges { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
|
||
.stat-item { font-size: 11px; text-align: center; min-width: 65px; }
|
||
.stat-item .value { font-size: 17px; font-weight: 800; color: var(--primary-color); display: block; }
|
||
.tag {
|
||
padding: 4px 12px; border-radius: 999px; font-size: 10px;
|
||
font-weight: 700; margin-right: 5px; display: inline-block;
|
||
}
|
||
.tag.age { background: linear-gradient(135deg, #e0f7fa, #b2ebf2); color: #00838f; }
|
||
.tag.places { background: linear-gradient(135deg, #f3e5f5, #e1bee7); color: #7b1fa2; }
|
||
.tag.active { background: linear-gradient(135deg, #e8f5e9, #c8e6c9); color: #2e7d32; }
|
||
|
||
.profile-tabs {
|
||
display: flex; gap: 5px; margin-top: 14px;
|
||
border-bottom: 2px solid var(--border-color); overflow-x: auto; padding-bottom: 3px;
|
||
}
|
||
.profile-tabs button {
|
||
border: none; background: transparent; padding: 9px 14px;
|
||
font-size: 12px; color: var(--text-light);
|
||
white-space: nowrap; cursor: pointer; border-radius: 10px 10px 0 0;
|
||
font-weight: 600; transition: all 0.2s;
|
||
}
|
||
.profile-tabs button:hover { background: var(--light-gray-bg); }
|
||
.profile-tabs button.active {
|
||
color: var(--primary-color); border-bottom: 3px solid var(--primary-color);
|
||
font-weight: 800; background: linear-gradient(135deg, rgba(108,99,255,0.1), rgba(108,99,255,0.05));
|
||
}
|
||
.tab-content-section { display: none; padding-top: 14px; font-size: 13px; color: var(--text-medium); line-height: 1.6; }
|
||
.tab-content-section.active { display: block; }
|
||
|
||
.stats-card {
|
||
background: var(--white); border-radius: 16px; padding: 18px;
|
||
box-shadow: 0 3px 12px rgba(0,0,0,0.06); margin-bottom: 16px;
|
||
}
|
||
.stats-card h4 { font-size: 16px; margin-bottom: 14px; color: var(--primary-color); display: flex; align-items: center; gap: 9px; font-weight: 700; }
|
||
.stats-card h4 span { font-size: 19px; }
|
||
.stats-grid { display: flex; flex-direction: column; gap: 12px; }
|
||
.stat-box {
|
||
border-radius: 14px; padding: 14px; background: var(--light-gray-bg);
|
||
font-size: 12px; transition: transform 0.2s;
|
||
}
|
||
.stat-box:hover { transform: translateX(3px); }
|
||
.stat-box .count { font-size: 22px; font-weight: 800; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
|
||
.progress-bar-container {
|
||
width: 100%; height: 7px; background: var(--border-color);
|
||
border-radius: 999px; overflow: hidden; margin: 8px 0;
|
||
}
|
||
.progress-bar { height: 100%; background: linear-gradient(90deg, var(--primary-color), #8a84ff); border-radius: 999px; transition: width 0.5s ease; }
|
||
.sessions .progress-bar { background: linear-gradient(90deg, var(--primary-color), #8a84ff); }
|
||
.revenue .progress-bar { background: linear-gradient(90deg, var(--success-color), #81c784); }
|
||
.attendance .progress-bar { background: linear-gradient(90deg, var(--warning-color), #ffb74d); }
|
||
.stat-box small { font-size: 11px; color: var(--text-light); display: block; margin-top: 6px; line-height: 1.4; }
|
||
|
||
.search-bar {
|
||
display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap;
|
||
}
|
||
.search-input {
|
||
flex: 1; min-width: 200px; padding: 11px 16px; border: 2px solid var(--border-color);
|
||
border-radius: 12px; font-size: 14px; background: white; transition: all 0.2s;
|
||
font-weight: 500;
|
||
}
|
||
.search-input:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 4px rgba(108, 99, 255, 0.15); }
|
||
.filter-select {
|
||
padding: 11px 16px; border: 2px solid var(--border-color);
|
||
border-radius: 12px; font-size: 13px; background: white; color: var(--text-medium);
|
||
font-weight: 500; cursor: pointer; transition: all 0.2s;
|
||
}
|
||
.filter-select:focus { outline: none; border-color: var(--primary-color); }
|
||
|
||
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
|
||
.data-table th {
|
||
text-align: left; padding: 14px 12px; background: linear-gradient(135deg, var(--light-gray-bg), #f0f0f5);
|
||
color: var(--text-light); font-weight: 700; font-size: 11px; text-transform: uppercase;
|
||
border-bottom: 3px solid var(--border-color); letter-spacing: 0.5px;
|
||
}
|
||
.data-table td {
|
||
padding: 14px 12px; border-bottom: 1px solid var(--border-color);
|
||
vertical-align: middle; transition: background 0.2s;
|
||
}
|
||
.data-table tr:hover { background: linear-gradient(135deg, rgba(108,99,255,0.06), rgba(108,99,255,0.03)); }
|
||
.data-table .avatar {
|
||
width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-color), #8a84ff);
|
||
display: inline-flex; align-items: center; justify-content: center;
|
||
font-weight: 700; color: white; margin-right: 10px; font-size: 13px;
|
||
box-shadow: 0 2px 8px rgba(108,99,255,0.3);
|
||
}
|
||
.member-name { display: flex; align-items: center; font-weight: 600; }
|
||
.status-badge {
|
||
padding: 5px 12px; border-radius: 999px; font-size: 11px; font-weight: 700;
|
||
display: inline-block;
|
||
}
|
||
.status-active { background: linear-gradient(135deg, #e8f5e9, #c8e6c9); color: #2e7d32; }
|
||
.status-pending { background: linear-gradient(135deg, #fff3e0, #ffe0b2); color: #ef6c00; }
|
||
.status-expired { background: linear-gradient(135deg, #ffebee, #ffcdd2); color: #c62828; }
|
||
.action-btns { display: flex; gap: 5px; }
|
||
.action-btn {
|
||
width: 30px; height: 30px; border-radius: 10px; border: none;
|
||
background: var(--light-gray-bg); display: flex; align-items: center;
|
||
justify-content: center; font-size: 13px; cursor: pointer; color: var(--text-medium);
|
||
transition: all 0.2s;
|
||
}
|
||
.action-btn:hover { background: var(--primary-color); color: white; transform: translateY(-2px); }
|
||
|
||
.invoice-card {
|
||
background: var(--white); border-radius: 14px; padding: 16px;
|
||
margin-bottom: 11px; border-left: 5px solid var(--border-color);
|
||
display: flex; justify-content: space-between; align-items: center;
|
||
transition: transform 0.2s, box-shadow 0.2s;
|
||
}
|
||
.invoice-card:hover { transform: translateX(4px); box-shadow: 0 4px 15px rgba(0,0,0,0.08); }
|
||
.invoice-card.paid { border-left-color: var(--success-color); }
|
||
.invoice-card.pending { border-left-color: var(--warning-color); }
|
||
.invoice-card.overdue { border-left-color: var(--danger-color); }
|
||
.invoice-info h5 { margin: 0 0 5px; font-size: 14px; font-weight: 700; }
|
||
.invoice-info p { margin: 0; font-size: 12px; color: var(--text-light); }
|
||
.invoice-amount { text-align: right; }
|
||
.invoice-amount .amount { font-size: 17px; font-weight: 800; display: block; }
|
||
.invoice-amount .date { font-size: 11px; color: var(--text-light); }
|
||
|
||
.chart-placeholder {
|
||
background: linear-gradient(135deg, rgba(108,99,255,0.1), rgba(0,188,212,0.1));
|
||
border-radius: 14px; padding: 24px; text-align: center;
|
||
border: 2px dashed var(--border-color);
|
||
}
|
||
.chart-placeholder span { font-size: 36px; display: block; margin-bottom: 12px; }
|
||
.chart-placeholder p { margin: 0; color: var(--text-medium); font-size: 13px; }
|
||
|
||
.settings-form { display: flex; flex-direction: column; gap: 16px; }
|
||
.form-group { display: flex; flex-direction: column; gap: 6px; }
|
||
.form-group label { font-size: 12px; font-weight: 700; color: var(--text-medium); }
|
||
.form-group input, .form-group select {
|
||
padding: 11px 14px; border: 2px solid var(--border-color);
|
||
border-radius: 12px; font-size: 14px; background: white;
|
||
transition: all 0.2s; font-weight: 500;
|
||
}
|
||
.form-group input:focus, .form-group select:focus {
|
||
outline: none; border-color: var(--primary-color);
|
||
box-shadow: 0 0 0 4px rgba(108, 99, 255, 0.15);
|
||
}
|
||
|
||
.reports-grid {
|
||
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 12px;
|
||
}
|
||
@media (min-width: 600px) { .reports-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
|
||
.report-card {
|
||
background: var(--white); border-radius: 14px; padding: 16px;
|
||
text-align: center; box-shadow: 0 3px 12px rgba(0,0,0,0.06);
|
||
cursor: pointer; transition: all 0.2s; border: 2px solid transparent;
|
||
}
|
||
.report-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); border-color: var(--primary-color); }
|
||
.report-card span { font-size: 32px; display: block; margin-bottom: 10px; }
|
||
.report-card h5 { margin: 0 0 5px; font-size: 13px; font-weight: 700; }
|
||
.report-card small { font-size: 11px; color: var(--text-light); }
|
||
|
||
.feed-post {
|
||
background: var(--white); border-radius: 16px; padding: 16px;
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.04); margin-bottom: 14px;
|
||
}
|
||
.feed-post-header { display: flex; gap: 12px; margin-bottom: 12px; }
|
||
.feed-post-avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-color), #8a84ff); display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; }
|
||
.feed-post-meta h5 { margin: 0 0 2px; font-size: 14px; font-weight: 700; }
|
||
.feed-post-meta small { color: var(--text-light); font-size: 11px; }
|
||
.feed-post-content { font-size: 14px; color: var(--text-medium); line-height: 1.5; margin-bottom: 12px; }
|
||
.feed-post-image { width: 100%; border-radius: 12px; margin-bottom: 12px; max-height: 300px; object-fit: cover; }
|
||
.feed-post-actions { display: flex; gap: 16px; border-top: 1px solid var(--border-color); padding-top: 10px; }
|
||
.feed-action-btn {
|
||
display: flex; align-items: center; gap: 6px; font-size: 12px;
|
||
color: var(--text-medium); background: none; border: none;
|
||
cursor: pointer; padding: 6px 10px; border-radius: 8px;
|
||
transition: all 0.2s;
|
||
}
|
||
.feed-action-btn:hover { background: var(--light-gray-bg); color: var(--primary-color); }
|
||
.feed-action-btn i { font-size: 16px; }
|
||
|
||
.schedule-card {
|
||
background: var(--white); border-radius: 14px; padding: 14px;
|
||
margin-bottom: 10px; border-left: 4px solid var(--primary-color);
|
||
display: flex; justify-content: space-between; align-items: center;
|
||
}
|
||
.schedule-card.upcoming { border-left-color: var(--success-color); }
|
||
.schedule-card.today { border-left-color: var(--warning-color); }
|
||
.schedule-info h5 { margin: 0 0 4px; font-size: 14px; font-weight: 700; }
|
||
.schedule-info p { margin: 0; font-size: 12px; color: var(--text-light); }
|
||
.schedule-time { text-align: right; }
|
||
.schedule-time .time { font-size: 16px; font-weight: 700; color: var(--primary-color); }
|
||
.schedule-time .date { font-size: 11px; color: var(--text-light); }
|
||
|
||
.modal-overlay {
|
||
position: fixed; inset: 0; background: rgba(0,0,0,0.6);
|
||
display: none; align-items: flex-end; justify-content: center; z-index: 100;
|
||
backdrop-filter: blur(3px);
|
||
}
|
||
.modal-overlay.open { display: flex; animation: fadeIn 0.3s; }
|
||
.modal-sheet {
|
||
background: var(--white); width: 100%; border-radius: 22px 22px 0 0;
|
||
max-height: 90vh; display: flex; flex-direction: column;
|
||
padding: 16px 18px 22px; animation: slideUp 0.35s ease;
|
||
}
|
||
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
|
||
.modal-header {
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
margin-bottom: 14px; padding-bottom: 14px; border-bottom: 2px solid var(--border-color);
|
||
}
|
||
.modal-header h4 { margin: 0; font-size: 17px; color: var(--primary-color); font-weight: 800; display: flex; align-items: center; gap: 8px; }
|
||
.modal-header h4 span { font-size: 20px; }
|
||
.modal-header p { margin: 3px 0 0; font-size: 12px; color: var(--text-light); }
|
||
.modal-close-btn {
|
||
border: none; background: var(--light-gray-bg); width: 36px; height: 36px;
|
||
border-radius: 50%; font-size: 19px; color: var(--text-medium);
|
||
display: flex; align-items: center; justify-content: center; cursor: pointer;
|
||
transition: all 0.2s;
|
||
}
|
||
.modal-close-btn:hover { background: var(--danger-color); color: white; transform: rotate(90deg); }
|
||
.pos-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
|
||
.category-tabs { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 5px; }
|
||
.category-tab-btn {
|
||
border: none; background: var(--light-gray-bg); padding: 7px 15px;
|
||
border-radius: 999px; font-size: 12px; white-space: nowrap;
|
||
color: var(--text-medium); cursor: pointer; transition: all 0.2s; font-weight: 600;
|
||
}
|
||
.category-tab-btn:hover { background: rgba(108,99,255,0.15); }
|
||
.category-tab-btn.active { background: linear-gradient(135deg, var(--primary-color), #8a84ff); color: var(--white); box-shadow: 0 3px 10px rgba(108,99,255,0.3); }
|
||
.product-grid {
|
||
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: 11px; margin-bottom: 10px;
|
||
}
|
||
.product-tile {
|
||
background: var(--light-gray-bg); border-radius: 14px; padding: 11px 9px;
|
||
text-align: center; font-size: 11px; cursor: pointer; transition: all 0.2s;
|
||
}
|
||
.product-tile:hover { transform: translateY(-4px); box-shadow: 0 6px 16px rgba(0,0,0,0.12); background: linear-gradient(135deg, rgba(108,99,255,0.1), rgba(108,99,255,0.05)); }
|
||
.product-tile img {
|
||
width: 54px; height: 54px; object-fit: cover;
|
||
border-radius: 12px; margin-bottom: 7px; background: white; box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||
}
|
||
.product-tile strong {
|
||
display: block; font-size: 12px; white-space: nowrap;
|
||
overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; font-weight: 700;
|
||
}
|
||
.product-tile small { font-size: 12px; color: var(--danger-color); font-weight: 800; }
|
||
.cart-section { border-top: 2px solid var(--border-color); padding-top: 14px; }
|
||
.cart-list { max-height: 190px; overflow-y: auto; margin-bottom: 10px; }
|
||
.cart-item {
|
||
display: flex; justify-content: space-between; align-items: center;
|
||
padding: 10px 0; font-size: 12px;
|
||
border-bottom: 1px dashed var(--border-color);
|
||
}
|
||
.cart-item-name { font-weight: 700; font-size: 13px; }
|
||
.cart-item-price { font-size: 12px; color: var(--text-light); }
|
||
.quantity-control {
|
||
display: flex; align-items: center; border-radius: 999px;
|
||
border: 2px solid var(--border-color); overflow: hidden; background: white;
|
||
}
|
||
.qty-btn {
|
||
border: none; background: var(--light-gray-bg); width: 28px;
|
||
height: 28px; font-size: 17px; display: flex;
|
||
align-items: center; justify-content: center; cursor: pointer;
|
||
transition: all 0.2s; font-weight: 700;
|
||
}
|
||
.qty-btn:hover { background: var(--primary-color); color: white; }
|
||
.qty-display { padding: 0 12px; font-weight: 700; font-size: 13px; min-width: 26px; text-align: center; }
|
||
.cart-totals { font-size: 13px; }
|
||
.cart-totals-row { display: flex; justify-content: space-between; margin-bottom: 5px; }
|
||
.cart-totals-row.grand { margin-top: 10px; padding-top: 10px; border-top: 3px solid var(--border-color); font-size: 17px; font-weight: 800; }
|
||
.cart-totals-row.grand span:last-child { color: var(--danger-color); }
|
||
.pay-button {
|
||
width: 100%; margin-top: 12px; border-radius: 999px; padding: 14px;
|
||
border: none; background: linear-gradient(135deg, var(--primary-color), #8a84ff); color: var(--white);
|
||
font-weight: 800; font-size: 16px; cursor: pointer; transition: all 0.2s;
|
||
box-shadow: 0 4px 15px rgba(108, 99, 255, 0.4);
|
||
}
|
||
.pay-button:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(108, 99, 255, 0.5); }
|
||
|
||
@media (max-width: 768px) {
|
||
.app-sidebar { width: 260px; }
|
||
.product-grid { grid-template-columns: repeat(2, 1fr); }
|
||
.activity-grid-row { flex-direction: column; }
|
||
.profile-header-content { flex-direction: column; text-align: center; }
|
||
.stats-badges { justify-content: center; }
|
||
.kpi-grid { grid-template-columns: repeat(2, 1fr); }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="view-club">
|
||
|
||
<!-- Sidebar -->
|
||
<nav class="app-sidebar" id="sidebar">
|
||
<div class="sidebar-header">
|
||
<div class="sidebar-title">
|
||
🏆 Take One Sports
|
||
<small>Core Business System</small>
|
||
</div>
|
||
<button class="sidebar-close" onclick="toggleSidebar(false)">✕</button>
|
||
</div>
|
||
|
||
<!-- BUSINESS/CLUB VIEW SECTION LABELS -->
|
||
<div class="sidebar-section-label" data-view="club">📊 Analytics</div>
|
||
<button class="sidebar-link" data-view="club" data-page="dashboard_page" onclick="navigateTo('dashboard_page', this)">
|
||
<span>🏠</span> Dashboard
|
||
</button>
|
||
<button class="sidebar-link" data-view="club" data-page="reports_page" onclick="navigateTo('reports_page', this)">
|
||
<span>📈</span> Reports & Exports
|
||
</button>
|
||
|
||
<div class="sidebar-section-label" data-view="club">📦 Operations</div>
|
||
<button class="sidebar-link" data-view="club" data-page="packages_page" onclick="navigateTo('packages_page', this)">
|
||
<span>📦</span> Packages & Activities
|
||
</button>
|
||
<button class="sidebar-link" data-view="club" data-page="invoicing_page" onclick="navigateTo('invoicing_page', this)">
|
||
<span>💰</span> Invoicing & Payments
|
||
</button>
|
||
<button class="sidebar-link" data-view="club" data-page="revenue_page" onclick="navigateTo('revenue_page', this)">
|
||
<span>📊</span> Revenue & Expenses
|
||
</button>
|
||
<button class="sidebar-link" data-view="club" data-page="budget_page" onclick="navigateTo('budget_page', this)">
|
||
<span>🗓️</span> Budgeting & Forecasting
|
||
</button>
|
||
<button class="sidebar-link" data-view="club" data-page="payroll_page" onclick="navigateTo('payroll_page', this)">
|
||
<span>💵</span> Payroll Management
|
||
</button>
|
||
<button class="sidebar-link" data-view="club" data-page="inventory_page" onclick="navigateTo('inventory_page', this)">
|
||
<span>📦</span> Equipment & Merch
|
||
</button>
|
||
|
||
<div class="sidebar-section-label" data-view="club">👥 People</div>
|
||
<button class="sidebar-link" data-view="club" data-page="leads_page" onclick="navigateTo('leads_page', this)">
|
||
<span>🎯</span> Leads & Prospects
|
||
<span class="sidebar-badge">5</span>
|
||
</button>
|
||
<button class="sidebar-link" data-view="club" data-page="members_page" onclick="navigateTo('members_page', this)">
|
||
<span>👥</span> Members
|
||
</button>
|
||
<button class="sidebar-link" data-view="club" data-page="enrollments_page" onclick="navigateTo('enrollments_page', this)">
|
||
<span>📘</span> Enrollments
|
||
</button>
|
||
<button class="sidebar-link" data-view="club" data-page="attendance_page" onclick="navigateTo('attendance_page', this)">
|
||
<span>✍️</span> Attendance
|
||
</button>
|
||
<button class="sidebar-link" data-view="club" data-page="workouts_page" onclick="navigateTo('workouts_page', this)">
|
||
<span>💪</span> Workouts
|
||
</button>
|
||
<button class="sidebar-link" data-view="club" data-page="health_page" onclick="navigateTo('health_page', this)">
|
||
<span>🩺</span> Health & Progress
|
||
</button>
|
||
<button class="sidebar-link" data-view="club" data-page="groups_page" onclick="navigateTo('groups_page', this)">
|
||
<span>📁</span> Member Groups
|
||
</button>
|
||
<button class="sidebar-link" data-view="club" data-page="staff_page" onclick="navigateTo('staff_page', this)">
|
||
<span>💼</span> Staff Management
|
||
</button>
|
||
|
||
<div class="sidebar-section-label" data-view="club">⚙️ System</div>
|
||
<button class="sidebar-link" data-view="club" data-page="settings_page" onclick="navigateTo('settings_page', this)">
|
||
<span>⚙️</span> Settings
|
||
</button>
|
||
<button class="sidebar-link" data-view="club" data-page="maintenance_page" onclick="navigateTo('maintenance_page', this)">
|
||
<span>🔧</span> Facility Maintenance
|
||
</button>
|
||
|
||
<!-- PERSONAL VIEW SECTION LABELS -->
|
||
<div class="sidebar-section-label" data-view="personal">🏠 Home</div>
|
||
<button class="sidebar-link" data-view="personal" data-page="personal_feed_page" onclick="navigateTo('personal_feed_page', this)">
|
||
<span>📰</span> News Feed
|
||
</button>
|
||
<button class="sidebar-link" data-view="personal" data-page="personal_schedule_page" onclick="navigateTo('personal_schedule_page', this)">
|
||
<span>📅</span> My Schedule
|
||
</button>
|
||
|
||
<div class="sidebar-section-label" data-view="personal">👤 Profile</div>
|
||
<button class="sidebar-link" data-view="personal" data-page="personal_profile_page" onclick="navigateTo('personal_profile_page', this)">
|
||
<span>👤</span> My Profile
|
||
</button>
|
||
<button class="sidebar-link" data-view="personal" data-page="personal_packages_page" onclick="navigateTo('personal_packages_page', this)">
|
||
<span>🎯</span> My Packages
|
||
</button>
|
||
<button class="sidebar-link" data-view="personal" data-page="personal_progress_page" onclick="navigateTo('personal_progress_page', this)">
|
||
<span>📊</span> My Progress
|
||
</button>
|
||
|
||
<div class="sidebar-section-label" data-view="personal">💳 Finance</div>
|
||
<button class="sidebar-link" data-view="personal" data-page="personal_payments_page" onclick="navigateTo('personal_payments_page', this)">
|
||
<span>💳</span> Payments & Billing
|
||
</button>
|
||
|
||
<div class="sidebar-section-label" data-view="personal">💬 Community</div>
|
||
<button class="sidebar-link" data-view="personal" data-page="personal_community_page" onclick="navigateTo('personal_community_page', this)">
|
||
<span>💬</span> Club Chat
|
||
</button>
|
||
<button class="sidebar-link" data-view="personal" data-page="personal_events_page" onclick="navigateTo('personal_events_page', this)">
|
||
<span>🎉</span> Events
|
||
</button>
|
||
|
||
<div class="sidebar-section-label" data-view="personal">⚙️ Settings</div>
|
||
<button class="sidebar-link" data-view="personal" data-page="personal_settings_page" onclick="navigateTo('personal_settings_page', this)">
|
||
<span>⚙️</span> Account Settings
|
||
</button>
|
||
</nav>
|
||
|
||
<div class="app-sidebar-backdrop" id="sidebarBackdrop" onclick="toggleSidebar(false)"></div>
|
||
|
||
<!-- App Header -->
|
||
<header class="app-header">
|
||
<div class="app-header-left">
|
||
<img src="https://bio.innovator.bh/assets/img/2_1757425606.png" alt="Logo" class="app-logo" onclick="toggleSidebar(true)" title="Open Menu">
|
||
|
||
<div style="position:relative; display:inline-flex; align-items:center;">
|
||
<div class="app-title" onclick="toggleAccountDropdown()" title="Switch account view">
|
||
<span id="accountLabel">
|
||
<i class="fas fa-building" id="accountIcon"></i>
|
||
<span id="accountType">Club Management</span>
|
||
<i class="fas fa-chevron-down" style="font-size:9px; margin-left:2px; transition:transform 0.2s;" id="accountArrow"></i>
|
||
</span>
|
||
<span id="appTitle">Dashboard</span>
|
||
</div>
|
||
|
||
<div id="accountDropdown" style="display:none; position:absolute; top:100%; left:0; margin-top:8px; background:var(--white); border-radius:12px; box-shadow:0 8px 32px rgba(0,0,0,0.18); padding:8px; z-index:40; min-width:220px; border:2px solid var(--border-color); animation:slideDown 0.2s ease;">
|
||
<div style="padding:6px 10px; font-size:10px; color:var(--text-light); text-transform:uppercase; font-weight:700; letter-spacing:0.5px;">Switch View</div>
|
||
<button class="sidebar-link" style="padding:10px 12px; border-radius:10px; margin:4px 0;" onclick="switchAccount('club', this)" id="clubOption">
|
||
<span style="font-size:18px;">🏢</span>
|
||
<div style="flex:1; text-align:left;">
|
||
<div style="font-size:13px; font-weight:700; color:var(--text-dark);">Club Management</div>
|
||
<div style="font-size:10px; color:var(--text-light);">Manage members, packages, finance</div>
|
||
</div>
|
||
<i class="fas fa-check" style="color:var(--success-color); font-size:14px;" id="clubCheck"></i>
|
||
</button>
|
||
<button class="sidebar-link" style="padding:10px 12px; border-radius:10px; margin:4px 0;" onclick="switchAccount('personal', this)" id="personalOption">
|
||
<span style="font-size:18px;">👤</span>
|
||
<div style="flex:1; text-align:left;">
|
||
<div style="font-size:13px; font-weight:700; color:var(--text-dark);">Personal View</div>
|
||
<div style="font-size:10px; color:var(--text-light);">My bookings, progress, payments</div>
|
||
</div>
|
||
<i class="fas fa-check" style="color:var(--success-color); font-size:14px; display:none;" id="personalCheck"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="app-header-actions">
|
||
<button class="icon-btn" onclick="toggleDropdown('notificationDropdown')" aria-label="Notifications">
|
||
<i class="fas fa-bell"></i>
|
||
<span class="badge-dot"></span>
|
||
</button>
|
||
<button class="pill-btn" onclick="openModal('quickSaleModal')" id="quickSaleBtn">
|
||
<span>➕</span> Quick Sale
|
||
</button>
|
||
<button class="pill-btn" onclick="openModal('bookSessionModal')" id="bookSessionBtn" style="display:none;">
|
||
<span>📅</span> Book Class
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Notifications Dropdown -->
|
||
<div id="notificationDropdown" style="display:none; position:absolute; top:65px; right:16px; background:var(--white); border-radius:14px; box-shadow:0 8px 32px rgba(0,0,0,0.18); padding:14px; z-index:30; width:320px; border:2px solid var(--border-color);">
|
||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
|
||
<strong style="font-size:15px; color:var(--primary-color);">🔔 Notifications</strong>
|
||
<small style="color:var(--text-light); font-weight:600;">3 new</small>
|
||
</div>
|
||
<div style="max-height:220px;overflow-y:auto;">
|
||
<div style="padding:11px; border-bottom:1px solid var(--border-color); border-radius:8px; margin-bottom:6px; background:rgba(108,99,255,0.05);">
|
||
<strong style="font-size:13px;">🔄 Membership Renewal</strong><br>
|
||
<small style="color:var(--text-light);">John Doe's membership renews tomorrow.</small>
|
||
</div>
|
||
<div style="padding:11px; border-bottom:1px solid var(--border-color); border-radius:8px; margin-bottom:6px; background:rgba(76,175,80,0.05);">
|
||
<strong style="font-size:13px;">🎉 New Enrollment</strong><br>
|
||
<small style="color:var(--text-light);">Jane Smith signed up for Premium Fitness.</small>
|
||
</div>
|
||
<div style="padding:11px; border-radius:8px; background:rgba(0,188,212,0.05);">
|
||
<strong style="font-size:13px;">✅ Support Ticket #45</strong><br>
|
||
<small style="color:var(--text-light);">Resolved by Staff Member A.</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Main Content -->
|
||
<main class="app-content">
|
||
|
||
<!-- ============ CLUB MANAGEMENT PAGES ============ -->
|
||
|
||
<!-- Dashboard -->
|
||
<section id="dashboard_page" class="page-container active-page" data-view="club">
|
||
<div class="kpi-grid">
|
||
<div class="kpi-card">
|
||
<div class="kpi-label">Active Members</div>
|
||
<div class="kpi-value">325 <span class="icon">👥</span></div>
|
||
<div class="kpi-change positive">+12 this month</div>
|
||
</div>
|
||
<div class="kpi-card">
|
||
<div class="kpi-label">Active Packages</div>
|
||
<div class="kpi-value">18 <span class="icon">📦</span></div>
|
||
<div class="kpi-change positive">+3 new offers</div>
|
||
</div>
|
||
<div class="kpi-card">
|
||
<div class="kpi-label">Revenue (Month)</div>
|
||
<div class="kpi-value">BD 9,450 <span class="icon">💰</span></div>
|
||
<div class="kpi-change positive">+18% vs last</div>
|
||
</div>
|
||
<div class="kpi-card">
|
||
<div class="kpi-label">Attendance Rate</div>
|
||
<div class="kpi-value">87% <span class="icon">📅</span></div>
|
||
<div class="kpi-change negative">-3% vs last</div>
|
||
</div>
|
||
</div>
|
||
<div class="section-card">
|
||
<div class="section-header"><h4><span>📈</span> Membership Trend</h4><small>This month</small></div>
|
||
<div class="chart-placeholder"><span>📊</span><p><strong>Interactive Chart</strong><br><small style="color:var(--text-light);">Chart.js integration ready</small></p></div>
|
||
</div>
|
||
<div style="display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px;">
|
||
<div class="section-card hot-package">
|
||
<div class="section-header" style="justify-content:center;"><h4><span>🔥</span> Hot Package</h4></div>
|
||
<div class="hot-package-title">Unlimited Taekwondo</div>
|
||
<div class="hot-package-count">42</div>
|
||
<div class="hot-package-label">New enrollments</div>
|
||
<small style="color:var(--text-light); display:block; margin-top:10px;">Strong interest from age 8–15 segment.</small>
|
||
</div>
|
||
<div class="section-card">
|
||
<div class="section-header"><h4><span>💵</span> Profit Summary</h4><small>This month</small></div>
|
||
<div style="font-size:13px; color:var(--text-medium);">
|
||
<div style="display:flex; justify-content:space-between; margin-bottom:8px; padding:8px 0; border-bottom:2px dashed var(--border-color);"><span>Revenue</span><strong style="font-size:15px;">BD 9,450</strong></div>
|
||
<div style="display:flex; justify-content:space-between; margin-bottom:8px; padding:8px 0; border-bottom:2px dashed var(--border-color);"><span>Expenses</span><strong style="font-size:15px;">BD 3,200</strong></div>
|
||
<div style="display:flex; justify-content:space-between; padding:10px 0; margin-top:6px; background:linear-gradient(135deg, rgba(76,175,80,0.1), rgba(76,175,80,0.05)); border-radius:10px;"><span style="font-weight:800;">Net Profit</span><strong style="color:var(--success-color); font-size:20px;">BD 6,250</strong></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="section-card">
|
||
<div class="section-header"><h4><span>🏆</span> Top Packages</h4><small>By revenue</small></div>
|
||
<div class="product-list">
|
||
<div class="product-item"><div class="product-rank">1</div><div class="product-icon">🥋</div><div class="product-main"><strong>Kids Taekwondo (3x/week)</strong><small>Highest retention, after-school favorite</small></div><div class="product-stats"><span>68</span> Enrollments</div></div>
|
||
<div class="product-item"><div class="product-rank">2</div><div class="product-icon">🥊</div><div class="product-main"><strong>Adult Self-Defense Program</strong><small>12-week bootcamp, strong add-ons</small></div><div class="product-stats"><span>39</span> Enrollments</div></div>
|
||
<div class="product-item"><div class="product-rank">3</div><div class="product-icon">💪</div><div class="product-main"><strong>Fitness & Conditioning</strong><small>Cross-training add-on package</small></div><div class="product-stats"><span>25</span> Enrollments</div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Reports & Exports -->
|
||
<section id="reports_page" class="page-container" data-view="club">
|
||
<div class="section-card">
|
||
<div class="section-header"><h4><span>📊</span> Financial Reports</h4><small>Export data for accounting</small></div>
|
||
<div class="reports-grid">
|
||
<div class="report-card"><span>💰</span><h5>Revenue Report</h5><small>Monthly breakdown</small></div>
|
||
<div class="report-card"><span>📉</span><h5>Expense Report</h5><small>By category</small></div>
|
||
<div class="report-card"><span>📈</span><h5>Profit & Loss</h5><small>Quarterly summary</small></div>
|
||
<div class="report-card"><span>📋</span><h5>Tax Report</h5><small>VAT compliant</small></div>
|
||
<div class="report-card"><span>📄</span><h5>Invoice Ledger</h5><small>All transactions</small></div>
|
||
<div class="report-card"><span>💵</span><h5>Payroll Report</h5><small>Staff payments</small></div>
|
||
</div>
|
||
</div>
|
||
<div class="section-card">
|
||
<div class="section-header"><h4><span>👥</span> Member Reports</h4><small>Analytics & insights</small></div>
|
||
<div class="reports-grid">
|
||
<div class="report-card"><span>📊</span><h5>Membership Stats</h5><small>Growth trends</small></div>
|
||
<div class="report-card"><span>✍️</span><h5>Attendance Report</h5><small>By class & member</small></div>
|
||
<div class="report-card"><span>🔄</span><h5>Retention Analysis</h5><small>Churn rate</small></div>
|
||
<div class="report-card"><span>📦</span><h5>Package Performance</h5><small>Best sellers</small></div>
|
||
<div class="report-card"><span>🎯</span><h5>Lead Conversion</h5><small>Sales funnel</small></div>
|
||
<div class="report-card"><span>📤</span><h5>Full Export</h5><small>CSV / Excel</small></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Packages & Activities -->
|
||
<section id="packages_page" class="page-container" data-view="club">
|
||
<h4 style="margin:0 0 14px; color:var(--primary-color); display:flex;align-items:center;gap:10px; font-weight:800;"><span>📦</span> Packages</h4>
|
||
<div class="package-card">
|
||
<img src="https://placehold.co/600x300/6c63ff/ffffff?text=Kids+TKD" alt="Kids Taekwondo" class="package-img">
|
||
<div class="package-body">
|
||
<h5>Kids Taekwondo (3x/week)</h5>
|
||
<p>Classes for kids focusing on discipline, focus, and fun through martial arts fundamentals.</p>
|
||
<div class="package-meta"><span><strong>BD 50</strong> / month</span><span>68 active members</span></div>
|
||
<div class="package-summary"><div>3x/week</div><div>Ages 6–12</div><div>94% retention</div></div>
|
||
<div class="package-actions"><button class="action-btn" title="View"><i class="fas fa-eye"></i></button><button class="action-btn" title="Edit"><i class="fas fa-pen"></i></button><button class="action-btn" title="Enroll"><i class="fas fa-user-plus"></i></button></div>
|
||
</div>
|
||
</div>
|
||
<div class="package-card">
|
||
<img src="https://placehold.co/600x300/00bcd4/ffffff?text=Adult+Defense" alt="Adult Program" class="package-img">
|
||
<div class="package-body">
|
||
<h5>Adult Self-Defense (12 weeks)</h5>
|
||
<p>Intensive program combining Taekwondo techniques and practical street defense strategies.</p>
|
||
<div class="package-meta"><span><strong>BD 120</strong> / 12 weeks</span><span>39 active members</span></div>
|
||
<div class="package-summary"><div>12 weeks</div><div>High intensity</div><div>Gear included</div></div>
|
||
<div class="package-actions"><button class="action-btn" title="View"><i class="fas fa-eye"></i></button><button class="action-btn" title="Edit"><i class="fas fa-pen"></i></button><button class="action-btn" title="Enroll"><i class="fas fa-user-plus"></i></button></div>
|
||
</div>
|
||
</div>
|
||
<h4 style="margin:22px 0 14px; color:var(--primary-color); display:flex;align-items:center;gap:10px; font-weight:800;"><span>🏃</span> Activities</h4>
|
||
<div class="activity-card">
|
||
<div class="activity-header">
|
||
<img src="https://placehold.co/100x100/6c63ff/ffffff?text=KT" alt="Kids Taekwondo" class="activity-thumb">
|
||
<div><h5 class="activity-title">Kids Taekwondo – Beginner</h5><div class="activity-subtitle">Coach Ahmed • Dojang A</div></div>
|
||
</div>
|
||
<div class="activity-grid-row"><div><strong>Schedule</strong>Sun, Tue, Thu – 4:00 PM</div><div><strong>Capacity</strong>Max 22 • 18 booked</div></div>
|
||
<div class="activity-icons-grid"><div>Ages 6–9</div><div>Energy focus</div><div>Basic defense</div><div>Confidence</div></div>
|
||
<div class="activity-actions"><button class="action-btn"><i class="fas fa-calendar"></i></button><button class="action-btn"><i class="fas fa-pen"></i></button><button class="action-btn"><i class="fas fa-list"></i></button></div>
|
||
</div>
|
||
<div class="activity-card">
|
||
<div class="activity-header">
|
||
<img src="https://placehold.co/100x100/00bcd4/ffffff?text=AS" alt="Adult Sparring" class="activity-thumb">
|
||
<div><h5 class="activity-title">Adult Sparring – Intermediate</h5><div class="activity-subtitle">Coach Fatima • Dojang B</div></div>
|
||
</div>
|
||
<div class="activity-grid-row"><div><strong>Schedule</strong>Mon, Wed – 7:00 PM</div><div><strong>Capacity</strong>Max 18 • 15 booked</div></div>
|
||
<div class="activity-icons-grid"><div>Cardio</div><div>Sparring</div><div>Balance</div><div>Strategy</div></div>
|
||
<div class="activity-actions"><button class="action-btn"><i class="fas fa-calendar"></i></button><button class="action-btn"><i class="fas fa-pen"></i></button><button class="action-btn"><i class="fas fa-list"></i></button></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Members -->
|
||
<section id="members_page" class="page-container" data-view="club">
|
||
<div class="search-bar">
|
||
<input type="text" class="search-input" placeholder="🔍 Search members by name, phone, or ID..." id="memberSearch">
|
||
<select class="filter-select"><option value="">All Status</option><option value="active">Active</option><option value="pending">Pending</option><option value="expired">Expired</option></select>
|
||
<select class="filter-select"><option value="">All Packages</option><option value="kids-tkd">Kids Taekwondo</option><option value="adult-defense">Adult Self-Defense</option></select>
|
||
<button class="pill-btn" style="padding:11px 18px;"><span>➕</span> Add Member</button>
|
||
</div>
|
||
<div class="section-card" style="overflow-x:auto;">
|
||
<table class="data-table">
|
||
<thead><tr><th>Member</th><th>Package</th><th>Joined</th><th>Attendance</th><th>Status</th><th>Actions</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><div class="member-name"><span class="avatar">AM</span>Ali Mohammed</div></td><td>Kids Taekwondo</td><td>Jan 2024</td><td><strong>94%</strong></td><td><span class="status-badge status-active">Active</span></td><td class="action-btns"><button class="action-btn"><i class="fas fa-eye"></i></button><button class="action-btn"><i class="fas fa-pen"></i></button></td></tr>
|
||
<tr><td><div class="member-name"><span class="avatar">JS</span>Jane Smith</div></td><td>Premium Fitness</td><td>Feb 2024</td><td><strong>88%</strong></td><td><span class="status-badge status-active">Active</span></td><td class="action-btns"><button class="action-btn"><i class="fas fa-eye"></i></button><button class="action-btn"><i class="fas fa-pen"></i></button></td></tr>
|
||
<tr><td><div class="member-name"><span class="avatar">JD</span>John Doe</div></td><td>Adult Self-Defense</td><td>Nov 2023</td><td><strong>76%</strong></td><td><span class="status-badge status-pending">Renewal Due</span></td><td class="action-btns"><button class="action-btn"><i class="fas fa-eye"></i></button><button class="action-btn"><i class="fas fa-pen"></i></button></td></tr>
|
||
<tr><td><div class="member-name"><span class="avatar">SK</span>Sara Khalid</div></td><td>Kids Taekwondo</td><td>Mar 2024</td><td><strong>91%</strong></td><td><span class="status-badge status-active">Active</span></td><td class="action-btns"><button class="action-btn"><i class="fas fa-eye"></i></button><button class="action-btn"><i class="fas fa-pen"></i></button></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div style="text-align:center; padding:14px; color:var(--text-light); font-size:13px;">Showing 1-4 of 325 members</div>
|
||
</section>
|
||
|
||
<!-- Invoicing & Payments -->
|
||
<section id="invoicing_page" class="page-container" data-view="club">
|
||
<div class="search-bar">
|
||
<input type="text" class="search-input" placeholder="🔍 Search invoices..." id="invoiceSearch">
|
||
<select class="filter-select"><option value="">All Status</option><option value="paid">Paid</option><option value="pending">Pending</option><option value="overdue">Overdue</option></select>
|
||
<button class="pill-btn" style="padding:11px 18px;" onclick="openModal('quickSaleModal')"><span>➕</span> New Invoice</button>
|
||
</div>
|
||
<div class="section-card">
|
||
<div class="section-header"><h4><span>📄</span> Recent Invoices</h4><small>Last 30 days</small></div>
|
||
<div class="invoice-card paid"><div class="invoice-info"><h5>INV-2024-0847 • Ali Mohammed</h5><p>Kids Taekwondo (Monthly)</p></div><div class="invoice-amount"><span class="amount" style="color:var(--success-color);">BD 50.00</span><span class="date">Mar 1, 2024</span></div></div>
|
||
<div class="invoice-card pending"><div class="invoice-info"><h5>INV-2024-0848 • Jane Smith</h5><p>Premium Fitness Package</p></div><div class="invoice-amount"><span class="amount" style="color:var(--warning-color);">BD 75.00</span><span class="date">Mar 3, 2024</span></div></div>
|
||
<div class="invoice-card overdue"><div class="invoice-info"><h5>INV-2024-0832 • Mohammed Ali</h5><p>Fitness & Conditioning</p></div><div class="invoice-amount"><span class="amount" style="color:var(--danger-color);">BD 45.00</span><span class="date">Feb 24, 2024</span></div></div>
|
||
</div>
|
||
<div class="section-card">
|
||
<div class="section-header"><h4><span>📊</span> Payment Summary</h4><small>This month</small></div>
|
||
<div style="display:grid; grid-template-columns:repeat(3,1fr); gap:14px; text-align:center;">
|
||
<div><div style="font-size:26px; font-weight:800; color:var(--success-color);">BD 8,920</div><div style="font-size:12px; color:var(--text-light);">Collected</div></div>
|
||
<div><div style="font-size:26px; font-weight:800; color:var(--warning-color);">BD 530</div><div style="font-size:12px; color:var(--text-light);">Pending</div></div>
|
||
<div><div style="font-size:26px; font-weight:800; color:var(--danger-color);">BD 215</div><div style="font-size:12px; color:var(--text-light);">Overdue</div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Revenue & Expenses -->
|
||
<section id="revenue_page" class="page-container" data-view="club">
|
||
<div class="section-card">
|
||
<div class="section-header"><h4><span>📈</span> Revenue Overview</h4><small>Q1 2024</small></div>
|
||
<div class="chart-placeholder"><span>📊</span><p><strong>Revenue Trend Chart</strong></p></div>
|
||
</div>
|
||
<div style="display:grid; grid-template-columns:1fr 1fr; gap:14px;">
|
||
<div class="section-card">
|
||
<h4 style="margin:0 0 14px;"><span>⬆️</span> Revenue Sources</h4>
|
||
<div style="font-size:13px;">
|
||
<div style="display:flex; justify-content:space-between; padding:10px 0; border-bottom:2px dashed var(--border-color);"><span>Package Fees</span><strong>BD 7,850 (83%)</strong></div>
|
||
<div style="display:flex; justify-content:space-between; padding:10px 0; border-bottom:2px dashed var(--border-color);"><span>Merchandise</span><strong>BD 1,120 (12%)</strong></div>
|
||
<div style="display:flex; justify-content:space-between; padding:10px 0;"><span>Private Sessions</span><strong>BD 480 (5%)</strong></div>
|
||
</div>
|
||
</div>
|
||
<div class="section-card">
|
||
<h4 style="margin:0 0 14px; color:var(--danger-color);"><span>⬇️</span> Expense Breakdown</h4>
|
||
<div style="font-size:13px;">
|
||
<div style="display:flex; justify-content:space-between; padding:10px 0; border-bottom:2px dashed var(--border-color);"><span>Staff Salaries</span><strong>BD 2,100 (66%)</strong></div>
|
||
<div style="display:flex; justify-content:space-between; padding:10px 0; border-bottom:2px dashed var(--border-color);"><span>Facility Costs</span><strong>BD 750 (23%)</strong></div>
|
||
<div style="display:flex; justify-content:space-between; padding:10px 0;"><span>Equipment</span><strong>BD 350 (11%)</strong></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Budgeting & Forecasting -->
|
||
<section id="budget_page" class="page-container" data-view="club">
|
||
<div class="section-card">
|
||
<div class="section-header"><h4><span>🗓️</span> Budget Forecast</h4><small>Next 3 months</small></div>
|
||
<div class="chart-placeholder"><span>📊</span><p><strong>Projected Revenue vs Expenses</strong></p></div>
|
||
</div>
|
||
<div class="section-card">
|
||
<h4 style="margin:0 0 14px;"><span>🎯</span> Financial Targets</h4>
|
||
<div style="display:flex; flex-direction:column; gap:14px;">
|
||
<div><div style="display:flex; justify-content:space-between; margin-bottom:6px; font-size:13px; font-weight:600;"><span>Q2 Revenue Target</span><strong>BD 28,000</strong></div><div class="progress-bar-container"><div class="progress-bar" style="width:72%;"></div></div><small style="color:var(--text-light);">72% achieved</small></div>
|
||
<div><div style="display:flex; justify-content:space-between; margin-bottom:6px; font-size:13px; font-weight:600;"><span>New Members Target</span><strong>50</strong></div><div class="progress-bar-container"><div class="progress-bar" style="width:64%; background:linear-gradient(90deg, var(--success-color), #81c784);"></div></div><small style="color:var(--text-light);">64% achieved</small></div>
|
||
<div><div style="display:flex; justify-content:space-between; margin-bottom:6px; font-size:13px; font-weight:600;"><span>Retention Goal</span><strong>90%</strong></div><div class="progress-bar-container"><div class="progress-bar" style="width:94%; background:linear-gradient(90deg, var(--warning-color), #ffb74d);"></div></div><small style="color:var(--text-light);">94% achieved ✓</small></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Payroll Management -->
|
||
<section id="payroll_page" class="page-container" data-view="club">
|
||
<div class="search-bar">
|
||
<input type="text" class="search-input" placeholder="🔍 Search staff..." id="staffSearch">
|
||
<button class="pill-btn" style="padding:11px 18px;"><span>➕</span> Add Staff</button>
|
||
</div>
|
||
<div class="section-card" style="overflow-x:auto;">
|
||
<table class="data-table">
|
||
<thead><tr><th>Staff</th><th>Role</th><th>Hours</th><th>Rate</th><th>Amount Due</th><th>Status</th><th>Actions</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><div class="member-name"><span class="avatar">CA</span>Chef Ahmed</div></td><td>Head Coach</td><td>120h</td><td>BD 8.50/h</td><td><strong>BD 1,020</strong></td><td><span class="status-badge status-active">Paid</span></td><td class="action-btns"><button class="action-btn"><i class="fas fa-eye"></i></button><button class="action-btn"><i class="fas fa-file-pdf"></i></button></td></tr>
|
||
<tr><td><div class="member-name"><span class="avatar">CF</span>Coach Fatima</div></td><td>Instructor</td><td>85h</td><td>BD 7.00/h</td><td><strong>BD 595</strong></td><td><span class="status-badge status-pending">Pending</span></td><td class="action-btns"><button class="action-btn"><i class="fas fa-eye"></i></button><button class="action-btn"><i class="fas fa-file-pdf"></i></button></td></tr>
|
||
<tr><td><div class="member-name"><span class="avatar">AR</span>Admin Reem</div></td><td>Front Desk</td><td>160h</td><td>BD 5.50/h</td><td><strong>BD 880</strong></td><td><span class="status-badge status-pending">Pending</span></td><td class="action-btns"><button class="action-btn"><i class="fas fa-eye"></i></button><button class="action-btn"><i class="fas fa-file-pdf"></i></button></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="section-card" style="margin-top:16px;">
|
||
<div class="section-header"><h4><span>🧮</span> Payroll Summary</h4><small>March 2024</small></div>
|
||
<div style="display:grid; grid-template-columns:repeat(3,1fr); gap:14px; text-align:center;">
|
||
<div><div style="font-size:26px; font-weight:800;">BD 2,495</div><div style="font-size:12px; color:var(--text-light);">Total Due</div></div>
|
||
<div><div style="font-size:26px; font-weight:800; color:var(--success-color);">BD 1,020</div><div style="font-size:12px; color:var(--text-light);">Paid</div></div>
|
||
<div><div style="font-size:26px; font-weight:800; color:var(--warning-color);">BD 1,475</div><div style="font-size:12px; color:var(--text-light);">Pending</div></div>
|
||
</div>
|
||
<button class="pill-btn" style="width:100%; margin-top:14px; justify-content:center;"><span>💵</span> Process Payments</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Leads & Prospects -->
|
||
<section id="leads_page" class="page-container" data-view="club">
|
||
<div class="search-bar">
|
||
<input type="text" class="search-input" placeholder="🔍 Search leads..." id="leadSearch">
|
||
<button class="pill-btn" style="padding:11px 18px;"><span>➕</span> Add Lead</button>
|
||
</div>
|
||
<div class="section-card">
|
||
<div style="display:flex; flex-direction:column; gap:12px;">
|
||
<div style="padding:12px; background:linear-gradient(135deg, rgba(33,150,243,0.1), rgba(33,150,243,0.05)); border-radius:12px; border-left:4px solid #2196f3;">
|
||
<div style="display:flex; justify-content:space-between; align-items:center;"><strong>🆕 New Leads (3)</strong><span class="status-badge status-lead">New</span></div>
|
||
<div style="margin-top:8px; font-size:13px;"><div style="padding:6px 0; border-bottom:1px dashed var(--border-color);">Ahmed Hassan - Interested in Kids TKD</div><div style="padding:6px 0; border-bottom:1px dashed var(--border-color);">Fatima Ali - Interested in Adult Defense</div><div style="padding:6px 0;">Omar Khalid - Website inquiry</div></div>
|
||
</div>
|
||
<div style="padding:12px; background:linear-gradient(135deg, rgba(255,152,0,0.1), rgba(255,152,0,0.05)); border-radius:12px; border-left:4px solid #ff9800;">
|
||
<div style="display:flex; justify-content:space-between; align-items:center;"><strong>📞 Contacted (1)</strong><span class="status-badge status-pending">Contacted</span></div>
|
||
<div style="margin-top:8px; font-size:13px;">Layla Mohammed - Called on Mar 15</div>
|
||
</div>
|
||
<div style="padding:12px; background:linear-gradient(135deg, rgba(76,175,80,0.1), rgba(76,175,80,0.05)); border-radius:12px; border-left:4px solid var(--success-color);">
|
||
<div style="display:flex; justify-content:space-between; align-items:center;"><strong>✅ Converted This Month (5)</strong><span class="status-badge status-active">Converted</span></div>
|
||
<div style="margin-top:8px; font-size:13px;"><div style="padding:6px 0; border-bottom:1px dashed var(--border-color);">Jane Smith → Premium Fitness (BD 75)</div><div style="padding:6px 0;">Sara Khalid → Kids Taekwondo (BD 50)</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Enrollments -->
|
||
<section id="enrollments_page" class="page-container" data-view="club">
|
||
<div class="search-bar">
|
||
<input type="text" class="search-input" placeholder="🔍 Search enrollments...">
|
||
<button class="pill-btn" style="padding:11px 18px;"><span>➕</span> New Enrollment</button>
|
||
</div>
|
||
<div class="section-card">
|
||
<div class="section-header"><h4><span>📘</span> Recent Enrollments</h4><small>This month</small></div>
|
||
<div style="display:flex; flex-direction:column; gap:10px;">
|
||
<div style="display:flex; justify-content:space-between; align-items:center; padding:12px; background:var(--light-gray-bg); border-radius:12px;"><div><strong>Jane Smith</strong><br><small style="color:var(--text-light);">Premium Fitness • Mar 15</small></div><span class="status-badge status-active">Active</span></div>
|
||
<div style="display:flex; justify-content:space-between; align-items:center; padding:12px; background:var(--light-gray-bg); border-radius:12px;"><div><strong>Sara Khalid</strong><br><small style="color:var(--text-light);">Kids Taekwondo • Mar 12</small></div><span class="status-badge status-active">Active</span></div>
|
||
<div style="display:flex; justify-content:space-between; align-items:center; padding:12px; background:var(--light-gray-bg); border-radius:12px;"><div><strong>Omar Hassan</strong><br><small style="color:var(--text-light);">Adult Self-Defense • Mar 10</small></div><span class="status-badge status-active">Active</span></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Attendance -->
|
||
<section id="attendance_page" class="page-container" data-view="club">
|
||
<div class="search-bar">
|
||
<input type="date" class="filter-select">
|
||
<select class="filter-select"><option>All Classes</option><option>Kids Taekwondo</option><option>Adult Self-Defense</option></select>
|
||
<button class="pill-btn"><span>📱</span> Scan Check-in</button>
|
||
</div>
|
||
<div class="section-card">
|
||
<div class="section-header"><h4><span>📋</span> Today's Attendance</h4><small>March 17, 2024</small></div>
|
||
<div style="display:grid; grid-template-columns:repeat(2,1fr); gap:12px;">
|
||
<div style="background:var(--light-gray-bg); padding:14px; border-radius:12px;"><strong>Kids Taekwondo – 4:00 PM</strong><div style="font-size:12px; color:var(--text-medium); margin-top:6px;"><div style="display:flex; justify-content:space-between;"><span>Checked In:</span><strong>16/22</strong></div><div class="progress-bar-container" style="margin:6px 0;"><div class="progress-bar" style="width:73%;"></div></div></div></div>
|
||
<div style="background:var(--light-gray-bg); padding:14px; border-radius:12px;"><strong>Adult Sparring – 7:00 PM</strong><div style="font-size:12px; color:var(--text-medium); margin-top:6px;"><div style="display:flex; justify-content:space-between;"><span>Checked In:</span><strong>12/18</strong></div><div class="progress-bar-container" style="margin:6px 0;"><div class="progress-bar" style="width:67%; background:linear-gradient(90deg, var(--warning-color), #ffb74d);"></div></div></div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Workouts -->
|
||
<section id="workouts_page" class="page-container" data-view="club">
|
||
<div class="section-card">
|
||
<div class="section-header"><h4><span>💪</span> Workout Plans</h4></div>
|
||
<div style="display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:12px;">
|
||
<div style="padding:14px; background:var(--light-gray-bg); border-radius:12px; text-align:center;"><span style="font-size:32px;">🏋️</span><h5 style="margin:8px 0 4px;">Beginner Strength</h5><small style="color:var(--text-light);">12 assigned</small></div>
|
||
<div style="padding:14px; background:var(--light-gray-bg); border-radius:12px; text-align:center;"><span style="font-size:32px;">🤸</span><h5 style="margin:8px 0 4px;">Flexibility</h5><small style="color:var(--text-light);">8 assigned</small></div>
|
||
<div style="padding:14px; background:var(--light-gray-bg); border-radius:12px; text-align:center;"><span style="font-size:32px;">🥊</span><h5 style="margin:8px 0 4px;">Sparring Drills</h5><small style="color:var(--text-light);">15 assigned</small></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Health & Progress -->
|
||
<section id="health_page" class="page-container" data-view="club">
|
||
<div class="section-card">
|
||
<div class="section-header"><h4><span>🩺</span> Member Health Metrics</h4></div>
|
||
<div style="display:flex; flex-direction:column; gap:10px;">
|
||
<div style="padding:12px; background:var(--light-gray-bg); border-radius:12px;"><strong>Ali Mohammed</strong><div style="font-size:12px; color:var(--text-light); margin-top:4px;">Weight: 45kg • Height: 155cm • Belt: Yellow</div></div>
|
||
<div style="padding:12px; background:var(--light-gray-bg); border-radius:12px;"><strong>Jane Smith</strong><div style="font-size:12px; color:var(--text-light); margin-top:4px;">Weight: 62kg • Height: 168cm • Level: Intermediate</div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Member Groups -->
|
||
<section id="groups_page" class="page-container" data-view="club">
|
||
<div class="section-card">
|
||
<div class="section-header"><h4><span>📁</span> Member Groups</h4></div>
|
||
<div style="display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:12px;">
|
||
<div style="padding:14px; background:var(--light-gray-bg); border-radius:12px; text-align:center;"><span style="font-size:28px;">👶</span><h5 style="margin:8px 0 4px;">Kids (6-12)</h5><small style="color:var(--text-light);">68 members</small></div>
|
||
<div style="padding:14px; background:var(--light-gray-bg); border-radius:12px; text-align:center;"><span style="font-size:28px;">🧑</span><h5 style="margin:8px 0 4px;">Adults</h5><small style="color:var(--text-light);">142 members</small></div>
|
||
<div style="padding:14px; background:var(--light-gray-bg); border-radius:12px; text-align:center;"><span style="font-size:28px;">🎯</span><h5 style="margin:8px 0 4px;">VIP</h5><small style="color:var(--text-light);">25 members</small></div>
|
||
<div style="padding:14px; background:var(--light-gray-bg); border-radius:12px; text-align:center;"><span style="font-size:28px;">⚠️</span><h5 style="margin:8px 0 4px;">At Risk</h5><small style="color:var(--text-light);">12 members</small></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Staff Management -->
|
||
<section id="staff_page" class="page-container" data-view="club">
|
||
<div class="search-bar">
|
||
<input type="text" class="search-input" placeholder="🔍 Search staff...">
|
||
<button class="pill-btn"><span>➕</span> Add Staff</button>
|
||
</div>
|
||
<div class="section-card">
|
||
<div style="display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:14px;">
|
||
<div style="text-align:center; padding:18px; background:var(--light-gray-bg); border-radius:14px;"><div style="width:65px; height:65px; border-radius:50%; background:linear-gradient(135deg,var(--primary-color),#8a84ff); margin:0 auto 12px; display:flex; align-items:center; justify-content:center; color:white; font-size:24px; font-weight:800;">CA</div><strong>Chef Ahmed</strong><br><small style="color:var(--text-light);">Head Coach</small><br><span class="status-badge status-active" style="margin-top:10px;">Active</span></div>
|
||
<div style="text-align:center; padding:18px; background:var(--light-gray-bg); border-radius:14px;"><div style="width:65px; height:65px; border-radius:50%; background:linear-gradient(135deg,#00bcd4,#0097a7); margin:0 auto 12px; display:flex; align-items:center; justify-content:center; color:white; font-size:24px; font-weight:800;">CF</div><strong>Coach Fatima</strong><br><small style="color:var(--text-light);">Instructor</small><br><span class="status-badge status-active" style="margin-top:10px;">Active</span></div>
|
||
<div style="text-align:center; padding:18px; background:var(--light-gray-bg); border-radius:14px;"><div style="width:65px; height:65px; border-radius:50%; background:linear-gradient(135deg,#ff9800,#f57c00); margin:0 auto 12px; display:flex; align-items:center; justify-content:center; color:white; font-size:24px; font-weight:800;">AR</div><strong>Admin Reem</strong><br><small style="color:var(--text-light);">Front Desk</small><br><span class="status-badge status-active" style="margin-top:10px;">Active</span></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Settings -->
|
||
<section id="settings_page" class="page-container" data-view="club">
|
||
<div class="section-card">
|
||
<div class="section-header"><h4><span>⚙️</span> Business Settings</h4></div>
|
||
<div class="settings-form">
|
||
<div class="form-group"><label>Club Name</label><input type="text" value="Take One Sports"></div>
|
||
<div class="form-group"><label>Currency</label><select><option>BD - Bahraini Dinar</option><option>USD - US Dollar</option></select></div>
|
||
<div class="form-group"><label>Tax Rate (VAT)</label><input type="number" value="10"></div>
|
||
<button class="pill-btn" style="width:fit-content;"><span>💾</span> Save Settings</button>
|
||
</div>
|
||
</div>
|
||
<div class="section-card">
|
||
<div class="section-header"><h4><span>🔐</span> User Roles</h4></div>
|
||
<div style="font-size:13px;">
|
||
<div style="padding:12px; background:var(--light-gray-bg); border-radius:12px; margin-bottom:10px;"><strong>👑 Admin</strong><br><small style="color:var(--text-light);">Full access</small><span class="status-badge status-active" style="float:right;">2 Users</span></div>
|
||
<div style="padding:12px; background:var(--light-gray-bg); border-radius:12px; margin-bottom:10px;"><strong>👨💼 Manager</strong><br><small style="color:var(--text-light);">Finance, Members</small><span class="status-badge status-active" style="float:right;">3 Users</span></div>
|
||
<div style="padding:12px; background:var(--light-gray-bg); border-radius:12px;"><strong>👨🏫 Coach</strong><br><small style="color:var(--text-light);">Attendance, Workouts</small><span class="status-badge status-active" style="float:right;">5 Users</span></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Facility Maintenance -->
|
||
<section id="maintenance_page" class="page-container" data-view="club">
|
||
<div class="search-bar">
|
||
<input type="text" class="search-input" placeholder="🔍 Search equipment...">
|
||
<button class="pill-btn"><span>➕</span> Report Issue</button>
|
||
</div>
|
||
<div class="section-card">
|
||
<div class="section-header"><h4><span>⚠️</span> Open Issues</h4></div>
|
||
<div style="padding:12px; background:linear-gradient(135deg, rgba(244,67,54,0.1), rgba(244,67,54,0.05)); border-radius:12px; margin-bottom:10px; border-left:4px solid var(--danger-color);"><strong>🥊 Sparring Mats - Dojang B</strong><br><small style="color:var(--text-light);">Tearing observed • High Priority</small></div>
|
||
<div style="padding:12px; background:linear-gradient(135deg, rgba(255,152,0,0.1), rgba(255,152,0,0.05)); border-radius:12px; border-left:4px solid var(--warning-color);"><strong>🚿 Locker Room Showers</strong><br><small style="color:var(--text-light);">Water pressure low • Medium Priority</small></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Inventory -->
|
||
<section id="inventory_page" class="page-container" data-view="club">
|
||
<div class="search-bar">
|
||
<input type="text" class="search-input" placeholder="🔍 Search inventory...">
|
||
<button class="pill-btn"><span>➕</span> Add Item</button>
|
||
</div>
|
||
<div class="section-card" style="overflow-x:auto;">
|
||
<table class="data-table">
|
||
<thead><tr><th>Item</th><th>Category</th><th>Stock</th><th>Price</th><th>Status</th><th>Actions</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><strong>Kids Uniform</strong></td><td>Uniforms</td><td><span style="color:var(--success-color);">24</span></td><td>BD 25</td><td><span class="status-badge status-active">Available</span></td><td class="action-btns"><button class="action-btn"><i class="fas fa-pen"></i></button></td></tr>
|
||
<tr><td><strong>Sparring Gloves</strong></td><td>Gear</td><td><span style="color:var(--warning-color);">5</span></td><td>BD 35</td><td><span class="status-badge status-pending">Low Stock</span></td><td class="action-btns"><button class="action-btn"><i class="fas fa-pen"></i></button></td></tr>
|
||
<tr><td><strong>Focus Pads</strong></td><td>Equipment</td><td><span style="color:var(--danger-color);">0</span></td><td>BD 45</td><td><span class="status-badge status-expired">Out of Stock</span></td><td class="action-btns"><button class="action-btn"><i class="fas fa-pen"></i></button></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<!-- ============ PERSONAL VIEW PAGES ============ -->
|
||
|
||
<!-- Personal Feed -->
|
||
<section id="personal_feed_page" class="page-container" data-view="personal">
|
||
<div class="section-card" style="padding:14px;">
|
||
<div style="display:flex; gap:12px; align-items:center;">
|
||
<div style="width:48px; height:48px; border-radius:50%; background:linear-gradient(135deg, var(--primary-color), #8a84ff); display:flex; align-items:center; justify-content:center; color:white; font-weight:700;">AM</div>
|
||
<input type="text" class="search-input" placeholder="Share an update..." style="flex:1; border-radius:999px; padding:12px 16px;">
|
||
</div>
|
||
</div>
|
||
<div class="feed-post">
|
||
<div class="feed-post-header">
|
||
<div class="feed-post-avatar">🏆</div>
|
||
<div class="feed-post-meta"><h5>Take One Sports</h5><small>Club Announcement • 2 hours ago</small></div>
|
||
</div>
|
||
<div class="feed-post-content">🎉 <strong>Spring Promotion!</strong><br>Enroll in any 3-month package before March 31st and get 15% off!</div>
|
||
<img src="https://placehold.co/600x250/6c63ff/ffffff?text=Spring+Promo" class="feed-post-image">
|
||
<div class="feed-post-actions"><button class="feed-action-btn"><i class="far fa-heart"></i> Like</button><button class="feed-action-btn"><i class="far fa-comment"></i> Comment</button><button class="feed-action-btn"><i class="fas fa-share"></i> Share</button></div>
|
||
</div>
|
||
<div class="feed-post">
|
||
<div class="feed-post-header">
|
||
<div class="feed-post-avatar" style="background:linear-gradient(135deg, #00bcd4, #0097a7);">🥋</div>
|
||
<div class="feed-post-meta"><h5>Coach Ahmed</h5><small>Kids Taekwondo • Yesterday</small></div>
|
||
</div>
|
||
<div class="feed-post-content">Great session today! Remember to practice your front kicks at home. See you Thursday! 💪</div>
|
||
<div class="feed-post-actions"><button class="feed-action-btn"><i class="far fa-heart"></i> Like</button><button class="feed-action-btn"><i class="far fa-comment"></i> Comment</button></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Personal Schedule -->
|
||
<section id="personal_schedule_page" class="page-container" data-view="personal">
|
||
<div class="search-bar"><input type="date" class="filter-select"><select class="filter-select"><option>All Classes</option><option>Kids Taekwondo</option></select></div>
|
||
<div class="section-card">
|
||
<div class="section-header"><h4><span>📅</span> Upcoming Classes</h4></div>
|
||
<div class="schedule-card today"><div class="schedule-info"><h5>Kids Taekwondo – Beginner</h5><p>Coach Ahmed • Dojang A</p></div><div class="schedule-time"><span class="time">4:00 PM</span><span class="date">Today</span></div></div>
|
||
<div class="schedule-card upcoming"><div class="schedule-info"><h5>Kids Taekwondo – Beginner</h5><p>Coach Ahmed • Dojang A</p></div><div class="schedule-time"><span class="time">4:00 PM</span><span class="date">Tue • Mar 19</span></div></div>
|
||
<div class="schedule-card upcoming"><div class="schedule-info"><h5>Kids Taekwondo – Beginner</h5><p>Coach Ahmed • Dojang A</p></div><div class="schedule-time"><span class="time">4:00 PM</span><span class="date">Thu • Mar 21</span></div></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Personal Profile -->
|
||
<section id="personal_profile_page" class="page-container" data-view="personal">
|
||
<div class="profile-card">
|
||
<div class="profile-header-content">
|
||
<img src="https://placehold.co/100x100/6c63ff/ffffff?text=AM" class="profile-pic">
|
||
<div class="profile-main-info">
|
||
<h3>Ali Mohammed</h3>
|
||
<div class="stats-badges"><div class="stat-item"><div class="value">18</div><small>Months</small></div><div class="stat-item"><div class="value">94%</div><small>Attendance</small></div><div class="stat-item"><div class="value">BD 620</div><small>Spend</small></div></div>
|
||
<div><span class="tag age">Age 14</span><span class="tag places">Kids Taekwondo</span><span class="tag active">Yellow Belt</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="stats-card">
|
||
<h4><span>📊</span> My Stats</h4>
|
||
<div class="stats-grid">
|
||
<div class="stat-box sessions"><div class="count">142</div><div>Sessions attended</div><div class="progress-bar-container"><div class="progress-bar" style="width:70%;"></div></div></div>
|
||
<div class="stat-box attendance"><div class="count">94%</div><div>Attendance rate</div><div class="progress-bar-container"><div class="progress-bar" style="width:94%; background:linear-gradient(90deg, var(--warning-color), #ffb74d);"></div></div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Personal Packages -->
|
||
<section id="personal_packages_page" class="page-container" data-view="personal">
|
||
<div class="section-card">
|
||
<div class="section-header"><h4><span>🎯</span> My Active Packages</h4></div>
|
||
<div class="package-card">
|
||
<img src="https://placehold.co/600x300/6c63ff/ffffff?text=Kids+TKD" class="package-img">
|
||
<div class="package-body">
|
||
<h5>Kids Taekwondo (3x/week)</h5>
|
||
<div class="package-meta"><span><strong>BD 50</strong> / month</span><span style="color:var(--success-color);">● Active</span></div>
|
||
<div class="package-summary"><div>Next: Mar 19</div><div>Auto-renewal</div><div>94% attendance</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Personal Progress -->
|
||
<section id="personal_progress_page" class="page-container" data-view="personal">
|
||
<div class="section-card">
|
||
<div class="section-header"><h4><span>📈</span> My Progress</h4></div>
|
||
<div class="chart-placeholder"><span>📊</span><p>Attendance & Skills Chart</p></div>
|
||
</div>
|
||
<div class="section-card">
|
||
<h4><span>🏆</span> Achievements</h4>
|
||
<div style="display:flex; flex-wrap:wrap; gap:10px;">
|
||
<div style="text-align:center; padding:12px; background:var(--light-gray-bg); border-radius:12px; min-width:100px;"><span style="font-size:28px;">🥇</span><br><strong>First Class</strong><br><small style="color:var(--text-light);">Jan 2024</small></div>
|
||
<div style="text-align:center; padding:12px; background:var(--light-gray-bg); border-radius:12px; min-width:100px;"><span style="font-size:28px;">🔟</span><br><strong>10 Sessions</strong><br><small style="color:var(--text-light);">Feb 2024</small></div>
|
||
<div style="text-align:center; padding:12px; background:linear-gradient(135deg, #ffd54f, #ffca28); border-radius:12px; min-width:100px;"><span style="font-size:28px;">🟡</span><br><strong>Yellow Belt</strong><br><small>Mar 2024</small></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Personal Payments -->
|
||
<section id="personal_payments_page" class="page-container" data-view="personal">
|
||
<div class="section-card">
|
||
<div class="section-header"><h4><span>💳</span> Payment Methods</h4></div>
|
||
<div style="padding:12px 16px; background:linear-gradient(135deg, #1976d2, #2196f3); border-radius:12px; color:white; margin-bottom:12px;"><div style="font-size:11px; opacity:0.9;">● Primary</div><div style="font-weight:700; margin:4px 0;">Visa •••• 4242</div><small style="opacity:0.9;">Expires 12/26</small></div>
|
||
<button class="pill-btn"><span>➕</span> Add Card</button>
|
||
</div>
|
||
<div class="section-card">
|
||
<div class="section-header"><h4><span>📄</span> Invoice History</h4></div>
|
||
<div class="invoice-card paid"><div class="invoice-info"><h5>INV-2024-0847</h5><p>Kids Taekwondo</p></div><div class="invoice-amount"><span class="amount" style="color:var(--success-color);">BD 50.00</span><span class="date">Mar 1</span></div></div>
|
||
<div class="invoice-card paid"><div class="invoice-info"><h5>INV-2024-0782</h5><p>Kids Taekwondo</p></div><div class="invoice-amount"><span class="amount" style="color:var(--success-color);">BD 50.00</span><span class="date">Feb 1</span></div></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Personal Community -->
|
||
<section id="personal_community_page" class="page-container" data-view="personal">
|
||
<div class="section-card">
|
||
<div class="section-header"><h4><span>💬</span> Club Chat</h4></div>
|
||
<div style="background:var(--light-gray-bg); border-radius:12px; padding:14px; min-height:200px;">
|
||
<div style="display:flex; gap:10px; margin-bottom:10px;"><div style="width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg, #6c63ff, #8a84ff); display:flex; align-items:center; justify-content:center; color:white; font-size:12px;">CF</div><div><strong style="font-size:13px;">Coach Fatima</strong><small style="color:var(--text-light); display:block;">2 min ago</small><p style="margin:4px 0 0; font-size:13px;">Bring your sparring gear tomorrow! 🥊</p></div></div>
|
||
<div style="display:flex; gap:10px;"><div style="width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg, #4caf50, #66bb6a); display:flex; align-items:center; justify-content:center; color:white; font-size:12px;">SK</div><div><strong style="font-size:13px;">Sara K.</strong><small style="color:var(--text-light); display:block;">15 min ago</small><p style="margin:4px 0 0; font-size:13px;">Great class today! 🙌</p></div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Personal Events -->
|
||
<section id="personal_events_page" class="page-container" data-view="personal">
|
||
<div class="section-card">
|
||
<div class="section-header"><h4><span>🎉</span> Upcoming Events</h4></div>
|
||
<div class="schedule-card upcoming" style="border-left-color:#9c27b0;"><div class="schedule-info"><h5>🥋 Belt Promotion Ceremony</h5><p>Main Dojang • All Members</p></div><div class="schedule-time"><span class="time">6:00 PM</span><span class="date">Mar 30</span></div></div>
|
||
<div class="schedule-card upcoming" style="border-left-color:#ff9800;"><div class="schedule-info"><h5>🏆 Spring Tournament</h5><p>Sports Complex • Yellow Belt+</p></div><div class="schedule-time"><span class="time">9:00 AM</span><span class="date">Apr 13</span></div></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Personal Settings -->
|
||
<section id="personal_settings_page" class="page-container" data-view="personal">
|
||
<div class="section-card">
|
||
<div class="section-header"><h4><span>⚙️</span> Account Settings</h4></div>
|
||
<div class="settings-form">
|
||
<div class="form-group"><label>Display Name</label><input type="text" value="Ali Mohammed"></div>
|
||
<div class="form-group"><label>Email</label><input type="email" value="ali@example.com"></div>
|
||
<div class="form-group"><label>Phone</label><input type="tel" value="+973 3X XXX XXX"></div>
|
||
<button class="pill-btn" style="width:fit-content;"><span>💾</span> Save</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<!-- Bottom Tab Bar -->
|
||
<nav class="app-tab-bar">
|
||
<div class="tab-item active" data-view="club" data-page="dashboard_page" onclick="navigateTo('dashboard_page', this)"><span>🏠</span> Home</div>
|
||
<div class="tab-item" data-view="club" data-page="packages_page" onclick="navigateTo('packages_page', this)"><span>📦</span> Packages</div>
|
||
<div class="tab-item" data-view="club" data-page="members_page" onclick="navigateTo('members_page', this)"><span>👥</span> Members</div>
|
||
<div class="tab-item" data-view="club" data-page="invoicing_page" onclick="navigateTo('invoicing_page', this)"><span>💰</span> Billing</div>
|
||
<div class="tab-item" data-view="club" data-page="settings_page" onclick="navigateTo('settings_page', this)"><span>⚙️</span> Settings</div>
|
||
|
||
<div class="tab-item" data-view="personal" data-page="personal_feed_page" onclick="navigateTo('personal_feed_page', this)"><span>📰</span> Feed</div>
|
||
<div class="tab-item" data-view="personal" data-page="personal_schedule_page" onclick="navigateTo('personal_schedule_page', this)"><span>📅</span> Schedule</div>
|
||
<div class="tab-item" data-view="personal" style="cursor:default;" onclick="openModal('bookSessionModal')"><span style="font-size:24px; background:var(--primary-color); color:white; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;">➕</span></div>
|
||
<div class="tab-item" data-view="personal" data-page="personal_community_page" onclick="navigateTo('personal_community_page', this)"><span>💬</span> Chat</div>
|
||
<div class="tab-item" data-view="personal" data-page="personal_profile_page" onclick="navigateTo('personal_profile_page', this)"><span>👤</span> Profile</div>
|
||
</nav>
|
||
|
||
<!-- Quick Sale Modal -->
|
||
<div class="modal-overlay" id="quickSaleModal">
|
||
<div class="modal-sheet">
|
||
<div class="modal-header"><div><h4><span>🛒</span> Quick Sale</h4><p>Process a walk-in sale</p></div><button class="modal-close-btn" onclick="closeModal('quickSaleModal')">✕</button></div>
|
||
<div class="pos-body">
|
||
<div class="category-tabs"><button class="category-tab-btn active" onclick="filterProducts('all', this)">All</button><button class="category-tab-btn" onclick="filterProducts('packages', this)">Packages</button><button class="category-tab-btn" onclick="filterProducts('merch', this)">Merch</button></div>
|
||
<div class="product-grid" id="productGrid">
|
||
<div class="product-tile" data-category="packages" onclick="addToCart('Kids TKD', 50)"><img src="https://placehold.co/80x80/6c63ff/ffffff?text=KT"><strong>Kids TKD</strong><small>BD 50</small></div>
|
||
<div class="product-tile" data-category="packages" onclick="addToCart('Adult Defense', 120)"><img src="https://placehold.co/80x80/00bcd4/ffffff?text=AD"><strong>Adult Defense</strong><small>BD 120</small></div>
|
||
<div class="product-tile" data-category="merch" onclick="addToCart('Uniform', 25)"><img src="https://placehold.co/80x80/ff9800/ffffff?text=GI"><strong>Uniform</strong><small>BD 25</small></div>
|
||
<div class="product-tile" data-category="merch" onclick="addToCart('Gloves', 15)"><img src="https://placehold.co/80x80/f44336/ffffff?text=GL"><strong>Gloves</strong><small>BD 15</small></div>
|
||
</div>
|
||
<div class="cart-section">
|
||
<div class="cart-list" id="cartList"></div>
|
||
<div class="cart-totals"><div class="cart-totals-row"><span>Sub-total</span><span id="subTotalDisplay">BD 0.00</span></div><div class="cart-totals-row"><span>Discount</span><span id="discountDisplay">BD 0.00</span></div><div class="cart-totals-row grand"><span>Total</span><span id="grandTotalDisplay">BD 0.00</span></div></div>
|
||
<button class="pay-button" onclick="processPayment()"><span>💳</span> Pay Now</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Book Session Modal -->
|
||
<div class="modal-overlay" id="bookSessionModal">
|
||
<div class="modal-sheet">
|
||
<div class="modal-header"><div><h4><span>📅</span> Book a Class</h4><p>Reserve your spot</p></div><button class="modal-close-btn" onclick="closeModal('bookSessionModal')">✕</button></div>
|
||
<div class="pos-body" style="padding:10px 0;">
|
||
<div class="form-group"><label>Package</label><select class="filter-select"><option>Kids Taekwondo</option><option>Adult Self-Defense</option></select></div>
|
||
<div class="form-group"><label>Date</label><input type="date" class="filter-select"></div>
|
||
<div class="form-group"><label>Time</label><select class="filter-select"><option>4:00 PM</option><option>5:30 PM</option></select></div>
|
||
<button class="pay-button" onclick="alert('✅ Booked!'); closeModal('bookSessionModal');"><span>✅</span> Confirm</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
let currentAccount = 'club';
|
||
function navigateTo(pageId, sidebarEl) {
|
||
document.querySelectorAll('.sidebar-link').forEach(link => link.classList.remove('active'));
|
||
if (sidebarEl) sidebarEl.classList.add('active');
|
||
document.querySelectorAll('.tab-item').forEach(tab => {
|
||
if (tab.getAttribute('data-page') === pageId) tab.classList.add('active');
|
||
else tab.classList.remove('active');
|
||
});
|
||
document.querySelectorAll('.page-container').forEach(page => page.classList.remove('active-page'));
|
||
const targetPage = document.getElementById(pageId);
|
||
if (targetPage) targetPage.classList.add('active-page');
|
||
const titles = {dashboard_page:'Dashboard',reports_page:'Reports',packages_page:'Packages',members_page:'Members',invoicing_page:'Invoicing',revenue_page:'Revenue',budget_page:'Budget',payroll_page:'Payroll',leads_page:'Leads',enrollments_page:'Enrollments',attendance_page:'Attendance',workouts_page:'Workouts',health_page:'Health',groups_page:'Groups',staff_page:'Staff',settings_page:'Settings',maintenance_page:'Maintenance',inventory_page:'Inventory',personal_feed_page:'Feed',personal_schedule_page:'Schedule',personal_profile_page:'Profile',personal_packages_page:'Packages',personal_progress_page:'Progress',personal_payments_page:'Payments',personal_community_page:'Chat',personal_events_page:'Events',personal_settings_page:'Settings'};
|
||
document.getElementById('appTitle').textContent = titles[pageId] || 'Take One Sports';
|
||
if (window.innerWidth < 768) toggleSidebar(false);
|
||
}
|
||
document.querySelectorAll('.tab-item').forEach(tab => {
|
||
tab.addEventListener('click', function() {
|
||
if (this.style.cursor === 'default') return;
|
||
const pageId = this.getAttribute('data-page');
|
||
const sidebarLink = document.querySelector(`.sidebar-link[data-page="${pageId}"]`);
|
||
if (sidebarLink) navigateTo(pageId, sidebarLink);
|
||
});
|
||
});
|
||
function toggleSidebar(open) {
|
||
const sidebar = document.getElementById('sidebar');
|
||
const backdrop = document.getElementById('sidebarBackdrop');
|
||
const shouldOpen = (open === true) || (!sidebar.classList.contains('open') && open !== false);
|
||
if (shouldOpen) { sidebar.classList.add('open'); backdrop.classList.add('show'); }
|
||
else { sidebar.classList.remove('open'); backdrop.classList.remove('show'); }
|
||
}
|
||
function toggleDropdown(id) {
|
||
const el = document.getElementById(id);
|
||
if (!el) return;
|
||
const isVisible = el.style.display === 'block';
|
||
document.querySelectorAll('[id$="Dropdown"]').forEach(d => { if (d.id !== 'accountDropdown') d.style.display = 'none'; });
|
||
if (!isVisible) el.style.display = 'block';
|
||
}
|
||
window.addEventListener('click', (e) => {
|
||
const dropdown = document.getElementById('notificationDropdown');
|
||
const btn = e.target.closest('.icon-btn');
|
||
if (!btn && dropdown && !dropdown.contains(e.target)) dropdown.style.display = 'none';
|
||
const accDropdown = document.getElementById('accountDropdown');
|
||
const title = document.querySelector('.app-title');
|
||
if (!accDropdown.contains(e.target) && !title.contains(e.target)) {
|
||
accDropdown.style.display = 'none';
|
||
document.getElementById('accountArrow').style.transform = 'rotate(0deg)';
|
||
}
|
||
});
|
||
function openModal(id) { const modal = document.getElementById(id); if (modal) { modal.classList.add('open'); if (id === 'quickSaleModal') renderCart(); } }
|
||
function closeModal(id) { const modal = document.getElementById(id); if (modal) modal.classList.remove('open'); }
|
||
function toggleAccountDropdown() {
|
||
const dropdown = document.getElementById('accountDropdown');
|
||
const arrow = document.getElementById('accountArrow');
|
||
const isVisible = dropdown.style.display === 'block';
|
||
document.querySelectorAll('[id$="Dropdown"]').forEach(d => { if (d.id !== 'accountDropdown') d.style.display = 'none'; });
|
||
if (!isVisible) { dropdown.style.display = 'block'; arrow.style.transform = 'rotate(180deg)'; }
|
||
else { dropdown.style.display = 'none'; arrow.style.transform = 'rotate(0deg)'; }
|
||
}
|
||
function switchAccount(type, btn) {
|
||
currentAccount = type;
|
||
document.getElementById('accountType').textContent = type === 'club' ? 'Club Management' : 'Personal View';
|
||
document.getElementById('accountIcon').className = type === 'club' ? 'fas fa-building' : 'fas fa-user';
|
||
document.getElementById('clubCheck').style.display = type === 'club' ? 'inline-block' : 'none';
|
||
document.getElementById('personalCheck').style.display = type === 'personal' ? 'inline-block' : 'none';
|
||
document.body.className = type === 'club' ? 'view-club' : 'view-personal';
|
||
document.getElementById('quickSaleBtn').style.display = type === 'club' ? 'inline-flex' : 'none';
|
||
document.getElementById('bookSessionBtn').style.display = type === 'personal' ? 'inline-flex' : 'none';
|
||
document.getElementById('accountDropdown').style.display = 'none';
|
||
document.getElementById('accountArrow').style.transform = 'rotate(0deg)';
|
||
if (type === 'personal') navigateTo('personal_feed_page', document.querySelector('.sidebar-link[data-page="personal_feed_page"]'));
|
||
else navigateTo('dashboard_page', document.querySelector('.sidebar-link[data-page="dashboard_page"]'));
|
||
}
|
||
const cart = [];
|
||
function addToCart(name, price) {
|
||
const existing = cart.find(i => i.name === name);
|
||
if (existing) existing.qty += 1; else cart.push({ name, price, qty: 1 });
|
||
renderCart();
|
||
}
|
||
function updateQty(index, delta) {
|
||
cart[index].qty += delta;
|
||
if (cart[index].qty <= 0) cart.splice(index, 1);
|
||
renderCart();
|
||
}
|
||
function renderCart() {
|
||
const list = document.getElementById('cartList');
|
||
if (!list) return;
|
||
list.innerHTML = '';
|
||
let subTotal = 0;
|
||
cart.forEach((item, index) => {
|
||
const line = item.price * item.qty; subTotal += line;
|
||
const row = document.createElement('div'); row.className = 'cart-item';
|
||
row.innerHTML = `<div><div class="cart-item-name">${item.name}</div><div class="cart-item-price">BD ${item.price.toFixed(2)} × ${item.qty}</div></div><div class="quantity-control"><button class="qty-btn" onclick="updateQty(${index},-1)">−</button><div class="qty-display">${item.qty}</div><button class="qty-btn" onclick="updateQty(${index},1)">+</button></div>`;
|
||
list.appendChild(row);
|
||
});
|
||
document.getElementById('subTotalDisplay').textContent = 'BD ' + subTotal.toFixed(2);
|
||
document.getElementById('discountDisplay').textContent = 'BD 0.00';
|
||
document.getElementById('grandTotalDisplay').textContent = 'BD ' + subTotal.toFixed(2);
|
||
}
|
||
function processPayment() {
|
||
if (cart.length === 0) { alert('⚠️ Cart is empty'); return; }
|
||
alert('✅ Payment successful!\nTotal: ' + document.getElementById('grandTotalDisplay').textContent);
|
||
cart.length = 0; renderCart(); closeModal('quickSaleModal');
|
||
}
|
||
function filterProducts(category, btn) {
|
||
document.querySelectorAll('.category-tab-btn').forEach(b => b.classList.remove('active'));
|
||
btn.classList.add('active');
|
||
document.querySelectorAll('.product-tile').forEach(tile => {
|
||
if (category === 'all' || tile.getAttribute('data-category') === category) tile.style.display = 'block';
|
||
else tile.style.display = 'none';
|
||
});
|
||
}
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
document.querySelector('.sidebar-link[data-page="dashboard_page"]').classList.add('active');
|
||
});
|
||
</script>
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
|
||
</body>
|
||
</html> |