Skip to content

E
EL-Captain-Website
Commit 8c142ce1 authored by Mahmoud Aglan's avatar Mahmoud Aglan
Browse files
Options

koko

parents
Hide whitespace changes
Inline Side-by-side
Showing with 4197 additions and 0 deletions
Dockerfile 0 → 100644
View file @ 8c142ce1
FROM nginx:alpine
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY public/ /usr/share/nginx/html/
COPY screenshots/ /usr/share/nginx/html/screenshots/
EXPOSE 80
PRODUCT.md 0 → 100644
View file @ 8c142ce1
# Product
## Register
brand
## Users
Egyptian sports club administrators, board of trustees members, pool/facility managers, and sports academy directors. They are decision-makers aged 35-60, Arabic-speaking, evaluating ERP solutions for their clubs. They visit this site from desktop during board meetings or from mobile when forwarded a link by a colleague. They need to understand quickly that this system handles their exact operational pain points — not generic business problems.
## Product Purpose
El-Captain is a comprehensive ERP system built exclusively for Egyptian sports clubs and facilities. It manages the complete member lifecycle (registration, interviews, activation, transfers, divorce/death/waiver separations), sports activities (academies, training groups, pool management, facility scheduling, player cards), financial operations (accounting, treasury, payments, installments, fines, subscriptions), HR, inventory, procurement, and mobile apps for players, coaches, and parents.
The website exists to convert club decision-makers into buyers by demonstrating that El-Captain is purpose-built for their exact operational reality — not adapted from generic software.
## Brand Personality
Commanding. Exclusive. Purpose-built.
Like a private operations center for elite sports facility management. The tone is confident and direct — this system doesn't try to sell itself; it demonstrates mastery over the domain.
## Anti-references
- Generic SaaS landing pages (hero-metric templates, gradient cards, "trusted by 10,000+" badges, generic stock photos)
- Colorful/playful Arabic websites (bright colors, rounded cartoon UI, casual tone)
- Cheap WordPress themes (slider carousels, icon grids, contact popups, template layouts)
- Competitor club management software sites (typically dated, feature-list-heavy, no visual identity)
- Any site where you can't tell what industry it serves from the hero alone
## Design Principles
1. **Domain mastery over feature listing** — Show understanding of the specific operational pain points of Egyptian sports clubs, don't just list features. A visitor should feel "they understand my exact problems."
2. **Product as proof** — Let the real UI screenshots do the heavy lifting. The system's interface is the strongest argument; the website frames it, doesn't compete with it.
3. **Emotional progression** — Build through recognition ("built for us"), then capability ("controls everything"), then urgency ("we're behind without it"). Each page section advances this arc.
4. **Institutional weight** — This is enterprise software for organizations managing thousands of members and millions in revenue. The site must feel like it belongs to an entity of that scale.
5. **Arabic-native, not translated** — The site should feel like it was conceived in Arabic, not translated from English. Typography, reading flow, and content structure should be native RTL.
## Accessibility & Inclusion
- WCAG 2.1 AA minimum
- Dark theme requires careful contrast management (light text on dark must hit 4.5:1)
- Reduced motion alternatives for all animations
- Arabic text must be readable at all sizes (no thin weights below 16px)
- Touch targets minimum 44px for mobile
captain-definition 0 → 100644
View file @ 8c142ce1
{
"schemaVersion": 2,
"dockerfilePath": "./Dockerfile"
}
nginx.conf 0 → 100644
View file @ 8c142ce1
server {
listen 80;
server_name _;
root /usr/share/nginx/html;
index index.html;
charset utf-8;
location / {
try_files $uri $uri/ $uri.html =404;
}
location /screenshots/ {
alias /usr/share/nginx/html/screenshots/;
expires 30d;
add_header Cache-Control "public, immutable";
}
location ~* \.(css|js|woff2|woff|ttf|svg|png|jpg|jpeg|webp|ico)$ {
expires 30d;
add_header Cache-Control "public, immutable";
}
error_page 404 /404.html;
gzip on;
gzip_types text/plain text/css application/javascript text/html image/svg+xml;
gzip_min_length 256;
}
public/404.html 0 → 100644
View file @ 8c142ce1
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>صفحة غير موجودة - El-Captain</title>
<link rel="stylesheet" href="css/tokens.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/components.css">
</head>
<body>
<nav class="nav nav--scrolled" aria-label="التنقل الرئيسي">
<div class="container nav__inner">
<a href="/" class="nav__logo">
<span class="nav__logo-mark">EC</span>
<span>El-Captain</span>
</a>
<div class="nav__links">
<a href="/" class="nav__link">الرئيسية</a>
<a href="features.html" class="nav__link">المزايا</a>
<a href="contact.html" class="nav__cta">تواصل معنا</a>
</div>
</div>
</nav>
<main style="min-height: 80dvh; display: grid; place-items: center; text-align: center; padding: var(--space-3xl) var(--space-lg);">
<div>
<div style="font-size: var(--text-5xl); font-weight: 900; color: var(--brand-primary-dim); margin-bottom: var(--space-md);">404</div>
<h1 style="font-size: var(--text-2xl); margin-bottom: var(--space-md);">الصفحة غير موجودة</h1>
<p style="color: var(--ink-secondary); margin-bottom: var(--space-xl); margin-inline: auto;">الصفحة التي تبحث عنها غير متاحة. يمكنك العودة للصفحة الرئيسية.</p>
<a href="/" class="btn btn--primary">العودة للرئيسية</a>
</div>
</main>
<script src="js/main.js"></script>
</body>
</html>
public/contact.html 0 → 100644
View file @ 8c142ce1
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>تواصل معنا - El-Captain</title>
<meta name="description" content="تواصل مع فريق El-Captain لحجز عرض تجريبي مجاني او الاستفسار عن نظام ادارة الاندية الرياضية.">
<link rel="stylesheet" href="css/tokens.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/components.css">
<link rel="stylesheet" href="css/pages.css">
</head>
<body>
<nav class="nav" aria-label="التنقل الرئيسي">
<div class="container nav__inner">
<a href="/" class="nav__logo">
<span class="nav__logo-mark">EC</span>
<span>El-Captain</span>
</a>
<div class="nav__links" id="navLinks">
<a href="/" class="nav__link">الرئيسية</a>
<a href="features.html" class="nav__link">المزايا</a>
<a href="sports.html" class="nav__link">الانشطة الرياضية</a>
<a href="pool.html" class="nav__link">حمامات السباحة</a>
<a href="members.html" class="nav__link">العضويات</a>
<a href="finance.html" class="nav__link">المالية</a>
<a href="contact.html" class="nav__cta">تواصل معنا</a>
</div>
<button class="nav__toggle" aria-label="فتح القائمة" aria-expanded="false" aria-controls="navLinks">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12h18M3 6h18M3 18h18"/></svg>
</button>
</div>
</nav>
<!-- Hero -->
<section class="module-hero section">
<div class="container">
<div class="module-hero__content" data-reveal>
<nav class="breadcrumb" aria-label="مسار التنقل">
<a href="/">الرئيسية</a>
<span class="breadcrumb__separator">/</span>
<span>تواصل معنا</span>
</nav>
<h1 class="module-hero__title">نقطة البداية</h1>
<p class="module-hero__desc">عرض تجريبي مجاني بدون التزام. نريك النظام يعمل على بيانات حقيقية مشابهة لناديك.</p>
</div>
</div>
</section>
<!-- Contact Form + Info -->
<section class="section">
<div class="container">
<div class="contact-section" data-reveal>
<form class="contact-form" action="#" method="POST">
<div class="form-group">
<label for="name">الاسم</label>
<input type="text" id="name" name="name" required placeholder="اسمك الكامل">
</div>
<div class="form-group">
<label for="club">اسم النادي / المنشأة</label>
<input type="text" id="club" name="club" required placeholder="مثال: نادي الشمس الرياضي">
</div>
<div class="form-group">
<label for="role">المنصب</label>
<select id="role" name="role" required>
<option value="">اختر منصبك</option>
<option value="board">عضو مجلس ادارة</option>
<option value="director">مدير تنفيذي</option>
<option value="finance">مدير مالي / محاسب</option>
<option value="it">مسؤول تقنية المعلومات</option>
<option value="sports">مدير النشاط الرياضي</option>
<option value="pool">مدير حمام السباحة</option>
<option value="other">اخرى</option>
</select>
</div>
<div class="form-group">
<label for="phone">رقم الهاتف</label>
<input type="tel" id="phone" name="phone" required placeholder="01xxxxxxxxx" dir="ltr">
</div>
<div class="form-group">
<label for="email">البريد الالكتروني</label>
<input type="email" id="email" name="email" placeholder="email@club.com" dir="ltr">
</div>
<div class="form-group">
<label for="members_count">عدد الاعضاء التقريبي</label>
<select id="members_count" name="members_count">
<option value="">اختر</option>
<option value="500">اقل من 500</option>
<option value="1000">500 - 1000</option>
<option value="5000">1000 - 5000</option>
<option value="10000">5000 - 10000</option>
<option value="more">اكثر من 10000</option>
</select>
</div>
<div class="form-group">
<label for="interest">اكثر ما يهمك</label>
<select id="interest" name="interest">
<option value="">ما الوحدة الاهم بالنسبة لك؟</option>
<option value="members">ادارة العضويات</option>
<option value="sports">الانشطة الرياضية</option>
<option value="pool">حمام السباحة</option>
<option value="finance">المالية والمحاسبة</option>
<option value="hr">الموارد البشرية</option>
<option value="mobile">التطبيقات المحمولة</option>
<option value="all">النظام بالكامل</option>
</select>
</div>
<div class="form-group">
<label for="message">ملاحظات اضافية</label>
<textarea id="message" name="message" placeholder="اخبرنا عن اي متطلبات خاصة لناديك"></textarea>
</div>
<button type="submit" class="btn btn--primary btn--large" style="width: 100%;">ارسل طلب العرض التجريبي</button>
</form>
<div>
<div class="contact-info" data-reveal="200">
<div class="contact-info__item">
<div class="contact-info__icon">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
</div>
<div>
<div class="contact-info__label">الهاتف</div>
<div class="contact-info__value" dir="ltr">+20 1X XXXX XXXX</div>
</div>
</div>
<div class="contact-info__item">
<div class="contact-info__icon">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
</div>
<div>
<div class="contact-info__label">البريد الالكتروني</div>
<div class="contact-info__value" dir="ltr">info@el-captain.com</div>
</div>
</div>
<div class="contact-info__item">
<div class="contact-info__icon">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
</div>
<div>
<div class="contact-info__label">اوقات العمل</div>
<div class="contact-info__value">الاحد - الخميس: 9 ص - 5 م</div>
</div>
</div>
<div class="contact-info__item">
<div class="contact-info__icon">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
</div>
<div>
<div class="contact-info__label">الموقع</div>
<div class="contact-info__value">القاهرة، مصر</div>
</div>
</div>
</div>
<div style="margin-top: var(--space-xl); padding: var(--space-xl); background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);" data-reveal="300">
<h4 style="margin-bottom: var(--space-md); font-size: var(--text-lg);">ماذا يتضمن العرض التجريبي؟</h4>
<div class="module-detail__list">
<div class="module-detail__list-item">عرض مباشر للنظام على بيانات مشابهة لناديك</div>
<div class="module-detail__list-item">استعراض الوحدات التي تهمك بالتفصيل</div>
<div class="module-detail__list-item">اجابة كل استفساراتك عن التنفيذ والتكامل</div>
<div class="module-detail__list-item">عرض سعري مخصص لحجم ناديك</div>
<div class="module-detail__list-item">لا يوجد اي التزام</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer__grid">
<div class="footer__brand">
<div class="footer__brand-name">El-Captain</div>
<p class="footer__brand-desc">نظام ادارة متكامل مصمم خصيصا للاندية الرياضية والمنشآت في مصر. يغطي كل العمليات من العضويات حتى المحاسبة.</p>
</div>
<div>
<h4 class="footer__col-title">الوحدات</h4>
<a href="members.html" class="footer__link">العضويات</a>
<a href="sports.html" class="footer__link">الانشطة الرياضية</a>
<a href="pool.html" class="footer__link">حمامات السباحة</a>
<a href="finance.html" class="footer__link">المالية</a>
<a href="features.html" class="footer__link">كل المزايا</a>
</div>
<div>
<h4 class="footer__col-title">النظام</h4>
<a href="features.html#hr" class="footer__link">الموارد البشرية</a>
<a href="features.html#inventory" class="footer__link">المخازن</a>
<a href="features.html#reports" class="footer__link">التقارير</a>
<a href="features.html#mobile" class="footer__link">التطبيقات</a>
</div>
<div>
<h4 class="footer__col-title">تواصل</h4>
<a href="contact.html" class="footer__link">اطلب عرض</a>
<a href="contact.html" class="footer__link">الدعم الفني</a>
</div>
</div>
<div class="footer__bottom">
<span>El-Captain ERP System</span>
<span>نظام ادارة الاندية الرياضية</span>
</div>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>
public/css/base.css 0 → 100644
View file @ 8c142ce1
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&display=swap');
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
direction: rtl;
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
body {
font-family: 'Tajawal', sans-serif;
font-size: var(--text-base);
line-height: 1.7;
color: var(--ink-primary);
background-color: var(--bg-deep);
overflow-x: hidden;
min-height: 100dvh;
}
h1, h2, h3, h4, h5, h6 {
line-height: 1.25;
font-weight: 700;
text-wrap: balance;
}
h1 { font-size: var(--text-5xl); font-weight: 900; }
h2 { font-size: var(--text-4xl); font-weight: 800; }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl); }
p {
max-width: var(--content-max);
text-wrap: pretty;
color: var(--ink-secondary);
line-height: 1.85;
}
a {
color: var(--brand-primary-light);
text-decoration: none;
transition: color var(--duration-fast) var(--ease-out-quart);
}
a:hover {
color: var(--brand-primary);
}
img {
display: block;
max-width: 100%;
height: auto;
}
button {
font-family: inherit;
cursor: pointer;
border: none;
background: none;
}
ul, ol {
list-style: none;
}
::selection {
background: oklch(0.570 0.158 353.3 / 0.3);
color: var(--ink-primary);
}
:focus-visible {
outline: 2px solid var(--brand-primary);
outline-offset: 3px;
border-radius: var(--radius-sm);
}
.container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--space-lg);
}
.container--wide {
max-width: var(--container-wide);
}
.section {
padding-block: var(--space-section);
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
public/css/components.css 0 → 100644
View file @ 8c142ce1
/* Navigation */
.nav {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: var(--z-sticky);
padding-block: var(--space-md);
transition: background var(--duration-normal) var(--ease-out-quart),
backdrop-filter var(--duration-normal) var(--ease-out-quart);
}
.nav--scrolled {
background: oklch(0.120 0.008 353.3 / 0.85);
backdrop-filter: blur(20px) saturate(1.2);
border-bottom: 1px solid var(--border-subtle);
}
.nav__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-lg);
}
.nav__logo {
font-size: var(--text-xl);
font-weight: 900;
color: var(--ink-primary);
display: flex;
align-items: center;
gap: var(--space-sm);
}
.nav__logo-mark {
width: 2.5rem;
height: 2.5rem;
background: var(--brand-primary);
border-radius: var(--radius-md);
display: grid;
place-items: center;
color: white;
font-weight: 900;
font-size: var(--text-sm);
}
.nav__links {
display: flex;
align-items: center;
gap: var(--space-lg);
}
.nav__link {
color: var(--ink-secondary);
font-size: var(--text-sm);
font-weight: 500;
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-sm);
transition: color var(--duration-fast) var(--ease-out-quart),
background var(--duration-fast) var(--ease-out-quart);
}
.nav__link:hover,
.nav__link--active {
color: var(--ink-primary);
background: oklch(1 0 0 / 0.05);
}
.nav__cta {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-sm) var(--space-lg);
background: var(--brand-primary);
color: white;
font-weight: 700;
font-size: var(--text-sm);
border-radius: var(--radius-md);
transition: transform var(--duration-fast) var(--ease-out-quart),
box-shadow var(--duration-fast) var(--ease-out-quart);
}
.nav__cta:hover {
color: white;
transform: translateY(-1px);
box-shadow: var(--shadow-glow);
}
/* Mobile menu */
.nav__toggle {
display: none;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
color: var(--ink-primary);
}
.nav__toggle svg {
width: 24px;
height: 24px;
}
@media (max-width: 768px) {
.nav__toggle {
display: flex;
}
.nav__links {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: min(320px, 85vw);
flex-direction: column;
align-items: stretch;
padding: var(--space-3xl) var(--space-lg);
background: var(--bg-base);
border-left: 1px solid var(--border-subtle);
transform: translateX(100%);
transition: transform var(--duration-slow) var(--ease-out-expo);
z-index: var(--z-modal);
}
.nav__links--open {
transform: translateX(0);
}
.nav__link {
font-size: var(--text-lg);
padding: var(--space-md);
}
.nav__cta {
margin-top: var(--space-lg);
justify-content: center;
padding: var(--space-md);
}
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
padding: var(--space-md) var(--space-xl);
font-weight: 700;
font-size: var(--text-base);
border-radius: var(--radius-md);
transition: transform var(--duration-fast) var(--ease-out-quart),
box-shadow var(--duration-fast) var(--ease-out-quart),
background var(--duration-fast) var(--ease-out-quart);
min-height: 48px;
}
.btn--primary {
background: var(--brand-primary);
color: white;
}
.btn--primary:hover {
color: white;
transform: translateY(-2px);
box-shadow: var(--shadow-glow);
}
.btn--secondary {
background: transparent;
color: var(--ink-primary);
border: 1px solid var(--border-default);
}
.btn--secondary:hover {
color: var(--ink-primary);
background: oklch(1 0 0 / 0.05);
border-color: var(--ink-muted);
}
.btn--large {
padding: var(--space-lg) var(--space-2xl);
font-size: var(--text-lg);
border-radius: var(--radius-lg);
}
/* Screenshot showcase */
.screenshot {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--border-subtle);
box-shadow: var(--shadow-lg);
transition: transform var(--duration-normal) var(--ease-out-quart),
box-shadow var(--duration-normal) var(--ease-out-quart);
}
.screenshot:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg), var(--shadow-glow);
}
.screenshot img {
width: 100%;
height: auto;
}
.screenshot--framed {
background: var(--bg-surface);
padding: var(--space-sm);
}
.screenshot--framed::before {
content: '';
display: block;
height: 2rem;
background: var(--bg-elevated);
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
margin: calc(-1 * var(--space-sm));
margin-bottom: var(--space-sm);
background-image: radial-gradient(circle, var(--ink-muted) 4px, transparent 4px);
background-size: 16px 16px;
background-position: 12px center;
background-repeat: repeat-x;
}
/* Feature cards */
.feature-card {
padding: var(--space-xl);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
transition: border-color var(--duration-normal) var(--ease-out-quart),
box-shadow var(--duration-normal) var(--ease-out-quart);
}
.feature-card:hover {
border-color: var(--brand-primary-muted);
box-shadow: 0 0 30px oklch(0.570 0.158 353.3 / 0.08);
}
.feature-card__icon {
width: 3rem;
height: 3rem;
display: grid;
place-items: center;
background: var(--brand-primary-dim);
border-radius: var(--radius-md);
margin-bottom: var(--space-lg);
color: var(--brand-primary-light);
}
.feature-card__title {
font-size: var(--text-xl);
font-weight: 700;
margin-bottom: var(--space-sm);
color: var(--ink-primary);
}
.feature-card__text {
font-size: var(--text-sm);
color: var(--ink-secondary);
line-height: 1.8;
}
/* Stats */
.stat {
text-align: center;
}
.stat__value {
font-size: var(--text-4xl);
font-weight: 900;
color: var(--brand-primary-light);
line-height: 1;
margin-bottom: var(--space-xs);
}
.stat__label {
font-size: var(--text-sm);
color: var(--ink-muted);
font-weight: 500;
}
/* Section headers */
.section-header {
margin-bottom: var(--space-2xl);
}
.section-header__tag {
display: inline-block;
font-size: var(--text-sm);
font-weight: 700;
color: var(--brand-primary-light);
margin-bottom: var(--space-md);
padding: var(--space-xs) var(--space-md);
background: oklch(0.570 0.158 353.3 / 0.1);
border-radius: var(--radius-sm);
border: 1px solid oklch(0.570 0.158 353.3 / 0.2);
}
.section-header__title {
margin-bottom: var(--space-md);
}
.section-header__desc {
font-size: var(--text-lg);
max-width: 60ch;
}
/* Footer */
.footer {
padding-block: var(--space-2xl);
background: var(--bg-base);
border-top: 1px solid var(--border-subtle);
}
.footer__grid {
display: grid;
grid-template-columns: 2fr repeat(3, 1fr);
gap: var(--space-2xl);
}
@media (max-width: 768px) {
.footer__grid {
grid-template-columns: 1fr;
gap: var(--space-xl);
}
}
.footer__brand {
max-width: 30ch;
}
.footer__brand-name {
font-size: var(--text-xl);
font-weight: 900;
margin-bottom: var(--space-md);
color: var(--ink-primary);
}
.footer__brand-desc {
font-size: var(--text-sm);
color: var(--ink-muted);
line-height: 1.8;
}
.footer__col-title {
font-size: var(--text-sm);
font-weight: 700;
color: var(--ink-primary);
margin-bottom: var(--space-md);
}
.footer__link {
display: block;
font-size: var(--text-sm);
color: var(--ink-muted);
padding-block: var(--space-xs);
transition: color var(--duration-fast) var(--ease-out-quart);
}
.footer__link:hover {
color: var(--brand-primary-light);
}
.footer__bottom {
margin-top: var(--space-2xl);
padding-top: var(--space-lg);
border-top: 1px solid var(--border-subtle);
display: flex;
justify-content: space-between;
align-items: center;
font-size: var(--text-xs);
color: var(--ink-muted);
}
@media (max-width: 768px) {
.footer__bottom {
flex-direction: column;
gap: var(--space-md);
text-align: center;
}
}
/* Module page hero */
.module-hero {
min-height: 60vh;
display: flex;
align-items: center;
padding-top: 6rem;
position: relative;
overflow: hidden;
}
.module-hero::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 30% 20%, oklch(0.570 0.158 353.3 / 0.08) 0%, transparent 60%);
pointer-events: none;
}
.module-hero__content {
position: relative;
z-index: 1;
max-width: 55ch;
}
.module-hero__title {
margin-bottom: var(--space-lg);
}
.module-hero__desc {
font-size: var(--text-xl);
margin-bottom: var(--space-xl);
}
/* Screenshot gallery */
.gallery {
display: grid;
gap: var(--space-lg);
}
.gallery--2col {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 500px), 1fr));
}
.gallery--3col {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr));
}
/* Testimonial / Quote blocks */
.quote-block {
padding: var(--space-xl);
background: var(--bg-surface);
border-radius: var(--radius-lg);
border-right: 3px solid var(--brand-primary);
position: relative;
}
.quote-block__text {
font-size: var(--text-lg);
font-weight: 500;
color: var(--ink-primary);
line-height: 1.9;
margin-bottom: var(--space-md);
}
.quote-block__source {
font-size: var(--text-sm);
color: var(--ink-muted);
}
/* Breadcrumb */
.breadcrumb {
display: flex;
align-items: center;
gap: var(--space-sm);
font-size: var(--text-sm);
color: var(--ink-muted);
margin-bottom: var(--space-lg);
}
.breadcrumb a {
color: var(--ink-muted);
}
.breadcrumb a:hover {
color: var(--brand-primary-light);
}
.breadcrumb__separator {
opacity: 0.4;
}
/* Page transitions */
.page-enter {
opacity: 0;
transform: translateY(20px);
}
.page-enter--active {
opacity: 1;
transform: translateY(0);
transition: opacity var(--duration-slow) var(--ease-out-expo),
transform var(--duration-slow) var(--ease-out-expo);
}
public/css/home.css 0 → 100644
View file @ 8c142ce1
/* Hero */
.hero {
min-height: 100dvh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
padding-top: 5rem;
}
.hero::before {
content: '';
position: absolute;
top: -20%;
left: -10%;
width: 70%;
height: 70%;
background: radial-gradient(ellipse, oklch(0.570 0.158 353.3 / 0.12) 0%, transparent 65%);
pointer-events: none;
animation: hero-glow 8s ease-in-out infinite alternate;
}
@keyframes hero-glow {
from { opacity: 0.6; transform: translate(0, 0) scale(1); }
to { opacity: 1; transform: translate(3%, 3%) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
.hero::before { animation: none; }
}
.hero__grid {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: var(--space-2xl);
align-items: center;
}
@media (max-width: 1024px) {
.hero__grid {
grid-template-columns: 1fr;
text-align: center;
}
}
.hero__content {
position: relative;
z-index: 1;
}
.hero__title {
margin-bottom: var(--space-lg);
letter-spacing: -0.02em;
}
.hero__title-accent {
color: var(--brand-primary-light);
}
.hero__desc {
font-size: var(--text-xl);
margin-bottom: var(--space-xl);
max-width: 50ch;
}
@media (max-width: 1024px) {
.hero__desc {
margin-inline: auto;
}
}
.hero__actions {
display: flex;
align-items: center;
gap: var(--space-md);
flex-wrap: wrap;
}
@media (max-width: 1024px) {
.hero__actions {
justify-content: center;
}
}
.hero__visual {
position: relative;
}
.hero__screenshot {
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-lg), var(--shadow-glow);
border: 1px solid var(--border-subtle);
}
.hero__screenshot img {
width: 100%;
height: auto;
}
/* Pain points section */
.pain-points {
background: var(--bg-base);
}
.pain-points__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
gap: var(--space-lg);
}
.pain-point {
padding: var(--space-xl);
border-radius: var(--radius-lg);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
}
.pain-point__problem {
font-size: var(--text-base);
color: var(--ink-muted);
margin-bottom: var(--space-md);
line-height: 1.7;
}
.pain-point__solution {
font-size: var(--text-lg);
color: var(--brand-primary-light);
font-weight: 700;
}
/* Modules showcase */
.modules-showcase__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
gap: var(--space-lg);
}
.module-card {
display: block;
padding: var(--space-xl);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
transition: border-color var(--duration-normal) var(--ease-out-quart),
transform var(--duration-normal) var(--ease-out-quart),
box-shadow var(--duration-normal) var(--ease-out-quart);
}
.module-card:hover {
border-color: var(--brand-primary-muted);
transform: translateY(-3px);
box-shadow: 0 12px 40px oklch(0 0 0 / 0.3);
color: inherit;
}
.module-card__icon {
width: 3.5rem;
height: 3.5rem;
display: grid;
place-items: center;
background: oklch(0.570 0.158 353.3 / 0.1);
border: 1px solid oklch(0.570 0.158 353.3 / 0.2);
border-radius: var(--radius-md);
margin-bottom: var(--space-lg);
font-size: 1.5rem;
}
.module-card__title {
font-size: var(--text-xl);
font-weight: 700;
color: var(--ink-primary);
margin-bottom: var(--space-sm);
}
.module-card__desc {
font-size: var(--text-sm);
color: var(--ink-secondary);
line-height: 1.8;
margin-bottom: var(--space-md);
}
.module-card__link {
font-size: var(--text-sm);
font-weight: 700;
color: var(--brand-primary-light);
display: inline-flex;
align-items: center;
gap: var(--space-xs);
}
/* Product screenshots carousel section */
.product-showcase {
position: relative;
overflow: hidden;
}
.product-showcase__track {
display: flex;
gap: var(--space-lg);
animation: scroll-right 40s linear infinite;
width: max-content;
}
@keyframes scroll-right {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.product-showcase__track { animation: none; flex-wrap: wrap; width: auto; }
}
.product-showcase__item {
flex: 0 0 400px;
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--border-subtle);
}
.product-showcase__item img {
width: 100%;
height: 250px;
object-fit: cover;
object-position: top right;
}
/* Numbers / Social proof */
.social-proof {
background: var(--bg-base);
}
.social-proof__stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-xl);
text-align: center;
}
/* CTA section */
.cta-section {
text-align: center;
position: relative;
overflow: hidden;
}
.cta-section::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, oklch(0.570 0.158 353.3 / 0.06) 0%, transparent 70%);
pointer-events: none;
}
.cta-section__content {
position: relative;
z-index: 1;
}
.cta-section__title {
margin-bottom: var(--space-lg);
}
.cta-section__desc {
font-size: var(--text-xl);
margin-inline: auto;
margin-bottom: var(--space-xl);
}
.cta-section__actions {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-md);
flex-wrap: wrap;
}
public/css/pages.css 0 → 100644
View file @ 8c142ce1
/* Module detail pages */
.module-detail__features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
gap: var(--space-lg);
}
.module-detail__screenshot-section {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: var(--space-2xl);
align-items: center;
}
.module-detail__screenshot-section--reverse {
grid-template-columns: 1fr 1.2fr;
}
@media (max-width: 900px) {
.module-detail__screenshot-section,
.module-detail__screenshot-section--reverse {
grid-template-columns: 1fr;
}
}
.module-detail__text h3 {
margin-bottom: var(--space-md);
font-size: var(--text-2xl);
}
.module-detail__text p {
margin-bottom: var(--space-md);
}
.module-detail__list {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.module-detail__list-item {
display: flex;
align-items: flex-start;
gap: var(--space-sm);
font-size: var(--text-base);
color: var(--ink-secondary);
}
.module-detail__list-item::before {
content: '';
flex-shrink: 0;
width: 6px;
height: 6px;
margin-top: 0.65em;
background: var(--brand-primary);
border-radius: 50%;
}
/* Features overview page */
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
gap: var(--space-lg);
}
.feature-item {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-lg);
padding: var(--space-xl);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
align-items: start;
}
.feature-item__number {
font-size: var(--text-3xl);
font-weight: 900;
color: var(--brand-primary-dim);
line-height: 1;
opacity: 0.6;
}
.feature-item__content h4 {
font-size: var(--text-lg);
margin-bottom: var(--space-xs);
color: var(--ink-primary);
}
.feature-item__content p {
font-size: var(--text-sm);
color: var(--ink-secondary);
}
/* Contact / Pricing page */
.contact-section {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2xl);
align-items: start;
}
@media (max-width: 900px) {
.contact-section {
grid-template-columns: 1fr;
}
}
.contact-form {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.form-group {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.form-group label {
font-size: var(--text-sm);
font-weight: 500;
color: var(--ink-secondary);
}
.form-group input,
.form-group textarea,
.form-group select {
padding: var(--space-md);
background: var(--bg-surface);
border: 1px solid var(--border-default);
border-radius: var(--radius-md);
color: var(--ink-primary);
font-family: inherit;
font-size: var(--text-base);
transition: border-color var(--duration-fast) var(--ease-out-quart);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
outline: none;
border-color: var(--brand-primary);
box-shadow: 0 0 0 3px oklch(0.570 0.158 353.3 / 0.15);
}
.form-group textarea {
min-height: 150px;
resize: vertical;
}
.contact-info {
padding: var(--space-xl);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
}
.contact-info__item {
display: flex;
align-items: flex-start;
gap: var(--space-md);
padding-block: var(--space-md);
}
.contact-info__item + .contact-info__item {
border-top: 1px solid var(--border-subtle);
}
.contact-info__icon {
width: 2.5rem;
height: 2.5rem;
display: grid;
place-items: center;
background: oklch(0.570 0.158 353.3 / 0.1);
border-radius: var(--radius-md);
color: var(--brand-primary-light);
flex-shrink: 0;
}
.contact-info__label {
font-size: var(--text-sm);
color: var(--ink-muted);
margin-bottom: 2px;
}
.contact-info__value {
font-size: var(--text-base);
color: var(--ink-primary);
font-weight: 500;
}
/* Workflow diagram */
.workflow {
display: flex;
align-items: center;
gap: var(--space-md);
flex-wrap: wrap;
justify-content: center;
padding: var(--space-xl) 0;
}
.workflow__step {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-md) var(--space-lg);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
font-size: var(--text-sm);
font-weight: 500;
color: var(--ink-primary);
}
.workflow__arrow {
color: var(--brand-primary-dim);
font-size: var(--text-xl);
}
/* Comparison table */
.comparison-table {
width: 100%;
border-collapse: collapse;
background: var(--bg-surface);
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--border-subtle);
}
.comparison-table th {
padding: var(--space-md) var(--space-lg);
background: var(--bg-elevated);
font-weight: 700;
font-size: var(--text-sm);
color: var(--ink-primary);
text-align: right;
border-bottom: 1px solid var(--border-subtle);
}
.comparison-table td {
padding: var(--space-md) var(--space-lg);
font-size: var(--text-sm);
color: var(--ink-secondary);
border-bottom: 1px solid var(--border-subtle);
}
.comparison-table tr:last-child td {
border-bottom: none;
}
.comparison-table .check {
color: var(--success);
font-weight: 700;
}
.comparison-table .cross {
color: var(--ink-muted);
opacity: 0.5;
}
public/css/tokens.css 0 → 100644
View file @ 8c142ce1
:root {
/* Brand seed: oklch(0.570 0.158 353.3) — deep rose/crimson */
--brand-primary: oklch(0.570 0.158 353.3);
--brand-primary-light: oklch(0.650 0.140 353.3);
--brand-primary-dim: oklch(0.450 0.120 353.3);
--brand-primary-muted: oklch(0.380 0.080 353.3);
/* Backgrounds — true dark, not warm-tinted */
--bg-deep: oklch(0.120 0.008 353.3);
--bg-base: oklch(0.150 0.010 353.3);
--bg-surface: oklch(0.185 0.012 353.3);
--bg-elevated: oklch(0.220 0.014 353.3);
/* Text */
--ink-primary: oklch(0.950 0.005 353.3);
--ink-secondary: oklch(0.750 0.010 353.3);
--ink-muted: oklch(0.550 0.008 353.3);
/* Borders */
--border-subtle: oklch(0.250 0.012 353.3);
--border-default: oklch(0.320 0.015 353.3);
/* Accent — gold for secondary highlights */
--accent-gold: oklch(0.700 0.120 85);
--accent-gold-dim: oklch(0.550 0.090 85);
/* Functional */
--success: oklch(0.650 0.150 145);
--warning: oklch(0.700 0.140 80);
--error: oklch(0.600 0.180 25);
/* Typography scale — 1.333 ratio (perfect fourth) */
--text-xs: clamp(0.694rem, 0.65vi + 0.5rem, 0.75rem);
--text-sm: clamp(0.833rem, 0.8vi + 0.6rem, 0.875rem);
--text-base: clamp(1rem, 1vi + 0.7rem, 1.063rem);
--text-lg: clamp(1.125rem, 1.2vi + 0.8rem, 1.25rem);
--text-xl: clamp(1.333rem, 1.5vi + 0.9rem, 1.5rem);
--text-2xl: clamp(1.777rem, 2.2vi + 1rem, 2.25rem);
--text-3xl: clamp(2.369rem, 3vi + 1.2rem, 3rem);
--text-4xl: clamp(3.157rem, 4vi + 1.5rem, 4rem);
--text-5xl: clamp(4.209rem, 5.5vi + 1.8rem, 5.5rem);
/* Spacing */
--space-xs: clamp(0.25rem, 0.5vi, 0.5rem);
--space-sm: clamp(0.5rem, 1vi, 0.75rem);
--space-md: clamp(1rem, 2vi, 1.5rem);
--space-lg: clamp(1.5rem, 3vi, 2.5rem);
--space-xl: clamp(2.5rem, 5vi, 4rem);
--space-2xl: clamp(4rem, 8vi, 6rem);
--space-3xl: clamp(6rem, 12vi, 10rem);
--space-section: clamp(5rem, 10vi, 8rem);
/* Radius */
--radius-sm: 0.25rem;
--radius-md: 0.5rem;
--radius-lg: 1rem;
--radius-xl: 1.5rem;
/* Shadows */
--shadow-sm: 0 1px 3px oklch(0 0 0 / 0.3);
--shadow-md: 0 4px 12px oklch(0 0 0 / 0.4);
--shadow-lg: 0 8px 32px oklch(0 0 0 / 0.5);
--shadow-glow: 0 0 40px oklch(0.570 0.158 353.3 / 0.2);
/* Transitions */
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--duration-fast: 150ms;
--duration-normal: 300ms;
--duration-slow: 500ms;
/* Z-index scale */
--z-base: 0;
--z-dropdown: 100;
--z-sticky: 200;
--z-modal-backdrop: 300;
--z-modal: 400;
--z-toast: 500;
--z-tooltip: 600;
/* Layout */
--container-max: 1280px;
--container-wide: 1440px;
--content-max: 75ch;
}
public/features.html 0 → 100644
View file @ 8c142ce1
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>المزايا - El-Captain</title>
<meta name="description" content="استكشف كل مزايا نظام El-Captain لادارة الاندية الرياضية. +35 وحدة متكاملة تغطي كل العمليات.">
<link rel="stylesheet" href="css/tokens.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/components.css">
<link rel="stylesheet" href="css/pages.css">
</head>
<body>
<nav class="nav" aria-label="التنقل الرئيسي">
<div class="container nav__inner">
<a href="/" class="nav__logo">
<span class="nav__logo-mark">EC</span>
<span>El-Captain</span>
</a>
<div class="nav__links" id="navLinks">
<a href="/" class="nav__link">الرئيسية</a>
<a href="features.html" class="nav__link nav__link--active">المزايا</a>
<a href="sports.html" class="nav__link">الانشطة الرياضية</a>
<a href="pool.html" class="nav__link">حمامات السباحة</a>
<a href="members.html" class="nav__link">العضويات</a>
<a href="finance.html" class="nav__link">المالية</a>
<a href="contact.html" class="nav__cta">تواصل معنا</a>
</div>
<button class="nav__toggle" aria-label="فتح القائمة" aria-expanded="false" aria-controls="navLinks">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12h18M3 6h18M3 18h18"/></svg>
</button>
</div>
</nav>
<!-- Hero -->
<section class="module-hero section">
<div class="container">
<div class="module-hero__content" data-reveal>
<nav class="breadcrumb" aria-label="مسار التنقل">
<a href="/">الرئيسية</a>
<span class="breadcrumb__separator">/</span>
<span>المزايا</span>
</nav>
<h1 class="module-hero__title">كل ما يحتاجه ناديك في نظام واحد</h1>
<p class="module-hero__desc">+35 وحدة مبنية لحل المشاكل الحقيقية التي يواجهها كل ناد رياضي في مصر كل يوم. ليست قائمة مزايا — بل حلول فعلية تعمل.</p>
</div>
</div>
</section>
<!-- Core Modules -->
<section class="section" id="core">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">الوحدات الاساسية</span>
<h2 class="section-header__title">العمليات اليومية</h2>
<p class="section-header__desc">الوحدات التي يستخدمها فريقك كل يوم لادارة العمل الاساسي.</p>
</div>
<div class="features-grid">
<div class="feature-item" data-reveal="100">
<div class="feature-item__number">01</div>
<div class="feature-item__content">
<h4>ادارة العضويات</h4>
<p>دورة حياة كاملة: تقديم، مقابلة، تفعيل، تجديد، تحويل، انفصال. انواع متعددة: عامل، رياضي، شرفي، موسمي، اجنبي.</p>
</div>
</div>
<div class="feature-item" data-reveal="150">
<div class="feature-item__number">02</div>
<div class="feature-item__content">
<h4>الاشتراكات والتجديد</h4>
<p>تجديد تلقائي وتنبيهات قبل انتهاء الاشتراك. احتساب غرامات التاخير تلقائيا وفقا للائحة.</p>
</div>
</div>
<div class="feature-item" data-reveal="200">
<div class="feature-item__number">03</div>
<div class="feature-item__content">
<h4>الانشطة الرياضية</h4>
<p>اكاديميات وتخصصات ومجموعات تدريب. جداول مواعيد ومدربين وكروت لاعبين وتسجيل حضور.</p>
</div>
</div>
<div class="feature-item" data-reveal="250">
<div class="feature-item__number">04</div>
<div class="feature-item__content">
<h4>حمامات السباحة</h4>
<p>تذاكر وكرنيهات وحصر متواجدين لحظي. ادارة الحارات والحجوزات ومراقبة السعة القصوى.</p>
</div>
</div>
<div class="feature-item" data-reveal="300">
<div class="feature-item__number">05</div>
<div class="feature-item__content">
<h4>ادارة المنشآت</h4>
<p>حجز الملاعب والصالات. تقويم متكامل يمنع التعارض. ادارة المعدات والصيانة.</p>
</div>
</div>
<div class="feature-item" data-reveal="350">
<div class="feature-item__number">06</div>
<div class="feature-item__content">
<h4>الخزينة والتحصيل</h4>
<p>جلسات خزينة متعددة. طابور دفع منظم. تسويات يومية. متابعة كل جنيه.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Financial -->
<section class="section" id="finance" style="background: var(--bg-base);">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">المالية</span>
<h2 class="section-header__title">محاسبة كاملة مدمجة</h2>
<p class="section-header__desc">ليست محاسبة مضافة — بل نظام مالي متكامل يتغذى تلقائيا من كل عملية تحدث في النادي.</p>
</div>
<div class="features-grid">
<div class="feature-item" data-reveal="100">
<div class="feature-item__number">07</div>
<div class="feature-item__content">
<h4>شجرة الحسابات</h4>
<p>شجرة حسابات كاملة قابلة للتخصيص. مراكز تكلفة. ميزانيات تقديرية بمتابعة الصرف الفعلي.</p>
</div>
</div>
<div class="feature-item" data-reveal="150">
<div class="feature-item__number">08</div>
<div class="feature-item__content">
<h4>القيود والدفاتر</h4>
<p>قيود يومية تتولد تلقائيا من كل عملية. دفتر استاذ عام. ميزان مراجعة. حسابات الذمم.</p>
</div>
</div>
<div class="feature-item" data-reveal="200">
<div class="feature-item__number">09</div>
<div class="feature-item__content">
<h4>التقارير المالية</h4>
<p>ميزانية عمومية. قائمة دخل. تقارير مراكز التكلفة. تقارير المتحصلات والمديونيات.</p>
</div>
</div>
<div class="feature-item" data-reveal="250">
<div class="feature-item__number">10</div>
<div class="feature-item__content">
<h4>المدفوعات والاقساط</h4>
<p>نظام اقساط مرن. تقسيط اي مبلغ. تنبيهات بالاقساط المتاخرة. تقارير التحصيل.</p>
</div>
</div>
<div class="feature-item" data-reveal="300">
<div class="feature-item__number">11</div>
<div class="feature-item__content">
<h4>الغرامات</h4>
<p>احتساب تلقائي وفقا لقواعد اللائحة. غرامات تاخير تجديد. غرامات مخالفات. غرامات غياب.</p>
</div>
</div>
<div class="feature-item" data-reveal="350">
<div class="feature-item__number">12</div>
<div class="feature-item__content">
<h4>الحسابات البنكية</h4>
<p>ادارة حسابات النادي البنكية. تسويات بنكية. تتبع الشيكات الواردة والصادرة.</p>
</div>
</div>
</div>
</div>
</section>
<!-- HR -->
<section class="section" id="hr">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">الموارد البشرية</span>
<h2 class="section-header__title">ادارة الموظفين المتكاملة</h2>
<p class="section-header__desc">كل ما يحتاجه قسم الموارد البشرية من التعيين حتى نهاية الخدمة.</p>
</div>
<div class="features-grid">
<div class="feature-item" data-reveal="100">
<div class="feature-item__number">13</div>
<div class="feature-item__content">
<h4>ادارة الموظفين</h4>
<p>ملفات شاملة لكل موظف. عقود وشروط التعيين. الهيكل الوظيفي والاقسام.</p>
</div>
</div>
<div class="feature-item" data-reveal="150">
<div class="feature-item__number">14</div>
<div class="feature-item__content">
<h4>المرتبات</h4>
<p>مسيرات رواتب شهرية. حساب الاستحقاقات والاستقطاعات. ربط تلقائي بالمحاسبة.</p>
</div>
</div>
<div class="feature-item" data-reveal="200">
<div class="feature-item__number">15</div>
<div class="feature-item__content">
<h4>الاجازات والحضور</h4>
<p>رصيد اجازات تلقائي. طلبات واعتمادات. تسجيل حضور وانصراف. تقارير تاخير.</p>
</div>
</div>
<div class="feature-item" data-reveal="250">
<div class="feature-item__number">16</div>
<div class="feature-item__content">
<h4>التقييم والاداء</h4>
<p>تقييمات دورية. مؤشرات اداء. خطط تحسين. ربط التقييم بالمكافآت.</p>
</div>
</div>
<div class="feature-item" data-reveal="300">
<div class="feature-item__number">17</div>
<div class="feature-item__content">
<h4>نهاية الخدمة</h4>
<p>حساب مستحقات نهاية الخدمة. تصفية حسابات. اجراءات خروج منظمة.</p>
</div>
</div>
<div class="feature-item" data-reveal="350">
<div class="feature-item__number">18</div>
<div class="feature-item__content">
<h4>اللجنة الطبية</h4>
<p>فحوصات دورية. لياقة طبية. متابعة الحالات. ربط باللاعبين والموظفين.</p>
</div>
</div>
</div>
<div class="gallery gallery--2col" style="margin-top: var(--space-2xl);">
<div class="screenshot screenshot--framed" data-reveal="100">
<img src="screenshots/hr/hr-dashboard.png" alt="لوحة الموارد البشرية" loading="lazy">
</div>
<div class="screenshot screenshot--framed" data-reveal="200">
<img src="screenshots/hr/payroll.png" alt="مسير المرتبات" loading="lazy">
</div>
</div>
</div>
</section>
<!-- Operations -->
<section class="section" id="operations" style="background: var(--bg-base);">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">العمليات</span>
<h2 class="section-header__title">ادوات العمل اليومي</h2>
</div>
<div class="features-grid">
<div class="feature-item" data-reveal="100">
<div class="feature-item__number">19</div>
<div class="feature-item__content">
<h4>المخازن والمشتريات</h4>
<p>ادارة اصناف ومخازن متعددة. اوامر شراء ولجان فحص. جرد دوري ومفاجئ.</p>
</div>
</div>
<div class="feature-item" data-reveal="150">
<div class="feature-item__number">20</div>
<div class="feature-item__content">
<h4>المبيعات ونقاط البيع</h4>
<p>نقاط بيع متعددة. كافتيريات ومحلات. فواتير وايصالات. ربط بالمحاسبة.</p>
</div>
</div>
<div class="feature-item" data-reveal="200">
<div class="feature-item__number">21</div>
<div class="feature-item__content">
<h4>التقارير والاحصائيات</h4>
<p>تقارير جاهزة لكل قسم. لوحات احصائية. تصدير Excel. تقارير مخصصة.</p>
</div>
</div>
<div class="feature-item" data-reveal="250">
<div class="feature-item__number">22</div>
<div class="feature-item__content">
<h4>الاعدادات والصلاحيات</h4>
<p>ادوار وصلاحيات دقيقة. كل موظف يرى فقط ما يخصه. سجل عمليات كامل.</p>
</div>
</div>
<div class="feature-item" data-reveal="300">
<div class="feature-item__number">23</div>
<div class="feature-item__content">
<h4>المقابلات واللجان</h4>
<p>ادارة مواعيد المقابلات. تسجيل قرارات اللجنة. اخطارات بالنتائج. ارشيف كامل.</p>
</div>
</div>
<div class="feature-item" data-reveal="350">
<div class="feature-item__number">24</div>
<div class="feature-item__content">
<h4>البطولات والمسابقات</h4>
<p>تنظيم بطولات داخلية وخارجية. جداول مباريات. نتائج وترتيب. شهادات مشاركة.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Mobile -->
<section class="section" id="mobile">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">التطبيقات</span>
<h2 class="section-header__title">ثلاث تطبيقات محمولة</h2>
<p class="section-header__desc">النظام يمتد خارج المكتب. ثلاث تطبيقات لثلاث فئات مختلفة تربطهم بالنادي في اي وقت.</p>
</div>
<div class="features-grid" style="grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr));">
<div class="feature-card" data-reveal="100">
<div class="feature-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
</div>
<h3 class="feature-card__title">تطبيق اللاعب</h3>
<p class="feature-card__text">جداول التدريب والمواعيد. الاشعارات. حالة الاشتراك. صور ومقاطع التدريب. انجازات وشهادات.</p>
</div>
<div class="feature-card" data-reveal="200">
<div class="feature-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
</div>
<h3 class="feature-card__title">تطبيق ولي الامر</h3>
<p class="feature-card__text">متابعة حضور الابناء. اشعارات فورية بالوصول والمغادرة. تقارير الاداء والتقييم. المدفوعات.</p>
</div>
<div class="feature-card" data-reveal="300">
<div class="feature-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8"/><path d="M12 17v4"/></svg>
</div>
<h3 class="feature-card__title">تطبيق المدرب</h3>
<p class="feature-card__text">تسجيل الحضور بنقرة واحدة. تقييم اللاعبين. رفع الصور والفيديو. جداول المجموعات.</p>
</div>
</div>
</div>
</section>
<!-- Inventory -->
<section class="section" id="inventory" style="background: var(--bg-base);">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">المخازن</span>
<h2 class="section-header__title">المخازن والمشتريات</h2>
</div>
<div class="gallery gallery--2col">
<div class="screenshot screenshot--framed" data-reveal="100">
<img src="screenshots/inventory/items.png" alt="قائمة الاصناف" loading="lazy">
</div>
<div class="screenshot screenshot--framed" data-reveal="200">
<img src="screenshots/procurement/requisitions.png" alt="اوامر الشراء" loading="lazy">
</div>
</div>
</div>
</section>
<!-- Reports -->
<section class="section" id="reports">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">التقارير</span>
<h2 class="section-header__title">بيانات حقيقية لقرارات صحيحة</h2>
<p class="section-header__desc">كل وحدة تولد تقاريرها. ولوحة التحكم تجمعها لك في نظرة واحدة.</p>
</div>
<div class="gallery gallery--2col">
<div class="screenshot screenshot--framed" data-reveal="100">
<img src="screenshots/reports/reports-main.png" alt="تقارير النظام" loading="lazy">
</div>
<div class="screenshot screenshot--framed" data-reveal="200">
<img src="screenshots/dashboard/main.png" alt="لوحة التحكم الرئيسية" loading="lazy">
</div>
</div>
</div>
</section>
<!-- CTA -->
<section class="section" style="text-align: center; position: relative; overflow: hidden;">
<div class="container" data-reveal>
<h2 style="margin-bottom: var(--space-lg);">جاهز لتجربة النظام؟</h2>
<p style="font-size: var(--text-xl); margin-inline: auto; margin-bottom: var(--space-xl); max-width: 50ch;">
كل هذه الوحدات تعمل معا في نظام واحد متكامل. لا تحتاج شراء كل وحدة على حدة.
</p>
<div style="display: flex; justify-content: center; gap: var(--space-md); flex-wrap: wrap;">
<a href="contact.html" class="btn btn--primary btn--large">احجز عرض مجاني</a>
<a href="pool.html" class="btn btn--secondary btn--large">شاهد وحدة حمام السباحة</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer__grid">
<div class="footer__brand">
<div class="footer__brand-name">El-Captain</div>
<p class="footer__brand-desc">نظام ادارة متكامل مصمم خصيصا للاندية الرياضية والمنشآت في مصر. يغطي كل العمليات من العضويات حتى المحاسبة.</p>
</div>
<div>
<h4 class="footer__col-title">الوحدات</h4>
<a href="members.html" class="footer__link">العضويات</a>
<a href="sports.html" class="footer__link">الانشطة الرياضية</a>
<a href="pool.html" class="footer__link">حمامات السباحة</a>
<a href="finance.html" class="footer__link">المالية</a>
<a href="features.html" class="footer__link">كل المزايا</a>
</div>
<div>
<h4 class="footer__col-title">النظام</h4>
<a href="features.html#hr" class="footer__link">الموارد البشرية</a>
<a href="features.html#inventory" class="footer__link">المخازن</a>
<a href="features.html#reports" class="footer__link">التقارير</a>
<a href="features.html#mobile" class="footer__link">التطبيقات</a>
</div>
<div>
<h4 class="footer__col-title">تواصل</h4>
<a href="contact.html" class="footer__link">اطلب عرض</a>
<a href="contact.html" class="footer__link">الدعم الفني</a>
</div>
</div>
<div class="footer__bottom">
<span>El-Captain ERP System</span>
<span>نظام ادارة الاندية الرياضية</span>
</div>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>
public/finance.html 0 → 100644
View file @ 8c142ce1
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>المالية والمحاسبة - El-Captain</title>
<meta name="description" content="نظام محاسبة متكامل مصمم للاندية الرياضية. شجرة حسابات، قيود يومية، خزينة، ميزانيات، مراكز تكلفة، اقساط، وتقارير مالية شاملة مع قيود آلية من العمليات.">
<link rel="stylesheet" href="css/tokens.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/components.css">
<link rel="stylesheet" href="css/pages.css">
</head>
<body>
<!-- Navigation -->
<nav class="nav" aria-label="التنقل الرئيسي">
<div class="container nav__inner">
<a href="/" class="nav__logo">
<span class="nav__logo-mark">EC</span>
<span>El-Captain</span>
</a>
<div class="nav__links" id="navLinks">
<a href="/" class="nav__link">الرئيسية</a>
<a href="features.html" class="nav__link">المزايا</a>
<a href="sports.html" class="nav__link">الانشطة الرياضية</a>
<a href="pool.html" class="nav__link">حمامات السباحة</a>
<a href="members.html" class="nav__link">العضويات</a>
<a href="finance.html" class="nav__link nav__link--active">المالية</a>
<a href="contact.html" class="nav__cta">تواصل معنا</a>
</div>
<button class="nav__toggle" aria-label="فتح القائمة" aria-expanded="false" aria-controls="navLinks">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M3 12h18M3 6h18M3 18h18"/>
</svg>
</button>
</div>
</nav>
<!-- Module Hero -->
<section class="module-hero section">
<div class="container">
<nav class="breadcrumb" data-reveal>
<a href="/">الرئيسية</a>
<span class="breadcrumb__separator">/</span>
<span>المالية والمحاسبة</span>
</nav>
<div class="module-hero__content" data-reveal="100">
<h1 class="module-hero__title">ادارة مالية متكاملة للاندية الرياضية</h1>
<p class="module-hero__desc">
نظام محاسبي كامل يعمل بشكل تلقائي مع كل العمليات. من لحظة تسجيل العضو حتى اعداد الميزانية العمومية، كل قرش محسوب ومسجل بدون تدخل يدوي.
</p>
<div>
<a href="contact.html" class="btn btn--primary btn--large">اطلب عرض تجريبي</a>
</div>
</div>
</div>
</section>
<!-- Accounting Dashboard Overview -->
<section class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">لوحة التحكم المالية</span>
<h2 class="section-header__title">رؤية شاملة للوضع المالي</h2>
<p class="section-header__desc">لوحة تحكم مالية تعرض الارصدة والتدفقات والمؤشرات في نظرة واحدة. مصممة لامين الصندوق ومجلس الادارة.</p>
</div>
<div class="screenshot screenshot--framed" data-reveal="100">
<img src="screenshots/accounting/accounting-dashboard.png" alt="لوحة التحكم المالية - ارصدة وتدفقات ومؤشرات مالية" loading="lazy">
</div>
</div>
</section>
<!-- Chart of Accounts -->
<section class="section">
<div class="container">
<div class="module-detail__screenshot-section" data-reveal>
<div class="screenshot screenshot--framed">
<img src="screenshots/accounting/chart-of-accounts.png" alt="شجرة الحسابات - دليل حسابات هرمي متعدد المستويات" loading="lazy">
</div>
<div class="module-detail__text">
<h3>شجرة حسابات مرنة</h3>
<p>دليل حسابات هرمي متعدد المستويات مصمم خصيصا للاندية الرياضية. يشمل حسابات الاشتراكات والغرامات والانشطة وحمامات السباحة والمخازن والمرتبات جاهزة من اليوم الاول.</p>
<div class="module-detail__list">
<div class="module-detail__list-item">تصنيف الحسابات: اصول، خصوم، حقوق ملكية، ايرادات، مصروفات</div>
<div class="module-detail__list-item">مستويات فرعية غير محدودة لاي درجة من التفصيل</div>
<div class="module-detail__list-item">ارصدة لحظية لكل حساب مع تتبع الحركات</div>
<div class="module-detail__list-item">قوالب جاهزة لشجرة حسابات الاندية الرياضية</div>
<div class="module-detail__list-item">ربط تلقائي بين الحسابات والعمليات التشغيلية</div>
</div>
</div>
</div>
</div>
</section>
<!-- Journal Entries & General Ledger -->
<section class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">القيود والاستاذ</span>
<h2 class="section-header__title">قيود يومية ودفتر استاذ عام</h2>
<p class="section-header__desc">كل حركة مالية موثقة بقيد محاسبي مزدوج. يمكن انشاء القيود يدويا او تركها تتولد تلقائيا من عمليات النادي.</p>
</div>
<div class="module-detail__screenshot-section--reverse" style="display:grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-2xl); align-items: center;" data-reveal="100">
<div class="module-detail__text">
<h3>قيود يومية محكمة</h3>
<p>نظام قيد مزدوج كامل يضمن توازن الميزان في كل لحظة. يدعم القيود البسيطة والمركبة مع مرفقات ومراجع وتصنيفات متعددة.</p>
<div class="module-detail__list">
<div class="module-detail__list-item">قيد مزدوج اجباري - لا يمكن ترحيل قيد غير متوازن</div>
<div class="module-detail__list-item">ارقام مرجعية تلقائية مع امكانية التعديل</div>
<div class="module-detail__list-item">ربط القيد بمركز التكلفة والفرع</div>
<div class="module-detail__list-item">ارفاق مستندات ومرفقات لكل قيد</div>
<div class="module-detail__list-item">بحث متقدم وفلترة حسب التاريخ والحساب والمرجع</div>
</div>
</div>
<div class="screenshot screenshot--framed">
<img src="screenshots/accounting/journal-entries.png" alt="القيود اليومية - قيد مزدوج مع تفاصيل الحسابات المدينة والدائنة" loading="lazy">
</div>
</div>
<div class="gallery gallery--2col" style="margin-top: var(--space-2xl);" data-reveal="200">
<div class="screenshot screenshot--framed">
<img src="screenshots/accounting/general-ledger.png" alt="دفتر الاستاذ العام - حركات الحسابات والارصدة" loading="lazy">
</div>
<div class="screenshot screenshot--framed">
<img src="screenshots/accounting/accounts-receivable.png" alt="حسابات المدينين - ارصدة الاعضاء المستحقة" loading="lazy">
</div>
</div>
</div>
</section>
<!-- Financial Statements -->
<section class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">التقارير المالية</span>
<h2 class="section-header__title">قوائم مالية جاهزة لمجلس الادارة</h2>
<p class="section-header__desc">ميزانية عمومية وقائمة دخل تتولد تلقائيا من القيود. جاهزة للطباعة والعرض على مجلس الادارة والمراجعين في اي وقت.</p>
</div>
<div class="gallery gallery--2col" data-reveal="100">
<div>
<div class="screenshot screenshot--framed">
<img src="screenshots/accounting/balance-sheet.png" alt="الميزانية العمومية - الاصول والخصوم وحقوق الملكية" loading="lazy">
</div>
<div class="module-detail__text" style="margin-top: var(--space-lg);">
<h3>الميزانية العمومية</h3>
<p>عرض فوري لمركز النادي المالي. الاصول والخصوم وحقوق الملكية بتفصيل كامل مع مقارنة بالفترات السابقة.</p>
</div>
</div>
<div>
<div class="screenshot screenshot--framed">
<img src="screenshots/accounting/income-statement.png" alt="قائمة الدخل - الايرادات والمصروفات وصافي الربح" loading="lazy">
</div>
<div class="module-detail__text" style="margin-top: var(--space-lg);">
<h3>قائمة الدخل</h3>
<p>ايرادات ومصروفات النادي لاي فترة زمنية. تصنيف تلقائي حسب النشاط ومركز التكلفة مع صافي الربح او الخسارة.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Treasury Management -->
<section class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">الخزينة</span>
<h2 class="section-header__title">ادارة خزينة متقدمة</h2>
<p class="section-header__desc">نظام خزينة كامل بجلسات عمل وطوابير تحصيل وتسويات يومية. كل درج نقدي مراقب ومحسوب.</p>
</div>
<div class="module-detail__screenshot-section" data-reveal="100">
<div class="screenshot screenshot--framed">
<img src="screenshots/treasury/dashboard.png" alt="لوحة تحكم الخزينة - الارصدة والجلسات والتسويات" loading="lazy">
</div>
<div class="module-detail__text">
<h3>جلسات الخزينة</h3>
<p>كل موظف خزينة يبدا جلسة عمل برصيد افتتاحي وينهيها بتسوية. لا يمكن لموظفين اثنين العمل على نفس الدرج. النظام يتتبع كل عملية داخل الجلسة.</p>
<div class="module-detail__list">
<div class="module-detail__list-item">جلسات عمل مستقلة لكل موظف خزينة</div>
<div class="module-detail__list-item">رصيد افتتاحي وختامي مع فرق التسوية</div>
<div class="module-detail__list-item">طوابير تحصيل منظمة لمنع الازدحام</div>
<div class="module-detail__list-item">تسويات يومية تلقائية مع تقارير الفروقات</div>
<div class="module-detail__list-item">صلاحيات منفصلة للتحصيل والصرف والتسوية</div>
</div>
</div>
</div>
<div class="gallery gallery--3col" style="margin-top: var(--space-2xl);" data-reveal="200">
<div class="screenshot screenshot--framed">
<img src="screenshots/treasury/sessions.png" alt="جلسات الخزينة - فتح واغلاق الجلسات" loading="lazy">
</div>
<div class="screenshot screenshot--framed">
<img src="screenshots/treasury/queue.png" alt="طابور التحصيل - تنظيم عمليات الدفع" loading="lazy">
</div>
<div class="screenshot screenshot--framed">
<img src="screenshots/treasury/settlements.png" alt="تسويات الخزينة - مطابقة الارصدة" loading="lazy">
</div>
</div>
</div>
</section>
<!-- Payment Processing -->
<section class="section">
<div class="container">
<div class="module-detail__screenshot-section--reverse" style="display:grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-2xl); align-items: center;" data-reveal>
<div class="module-detail__text">
<h3>معالجة المدفوعات</h3>
<p>نظام دفع مركزي يستقبل كل انواع المدفوعات: اشتراكات، غرامات، رسوم انشطة، تذاكر سباحة، اقساط. كل عملية دفع تولد قيدا محاسبيا تلقائيا.</p>
<div class="module-detail__list">
<div class="module-detail__list-item">دعم طرق الدفع المتعددة: نقدي، تحويل بنكي، شيكات</div>
<div class="module-detail__list-item">ايصالات الكترونية قابلة للطباعة</div>
<div class="module-detail__list-item">ربط كل عملية دفع بالعضو والخدمة تلقائيا</div>
<div class="module-detail__list-item">تقارير تحصيل يومية واسبوعية وشهرية</div>
<div class="module-detail__list-item">اشعار فوري لولي الامر عند الدفع عبر التطبيق</div>
</div>
</div>
<div class="screenshot screenshot--framed">
<img src="screenshots/payments/list.png" alt="قائمة المدفوعات - كل عمليات الدفع والتحصيل" loading="lazy">
</div>
</div>
</div>
</section>
<!-- Installment Plans -->
<section class="section">
<div class="container">
<div class="module-detail__screenshot-section" data-reveal>
<div class="screenshot screenshot--framed">
<img src="screenshots/installments/list.png" alt="خطط التقسيط - جدولة الاقساط ومتابعة السداد" loading="lazy">
</div>
<div class="module-detail__text">
<h3>نظام اقساط مرن</h3>
<p>تقسيط اي مبلغ على عدد اقساط مرن. النظام يتابع مواعيد السداد ويحسب الغرامات تلقائيا عند التاخير ويرسل تنبيهات للعضو.</p>
<div class="module-detail__list">
<div class="module-detail__list-item">انشاء خطة تقسيط لاي خدمة او رسم</div>
<div class="module-detail__list-item">جدولة مرنة: شهري، ربع سنوي، مخصص</div>
<div class="module-detail__list-item">حساب غرامات التاخير تلقائيا</div>
<div class="module-detail__list-item">تنبيهات قبل موعد القسط واشعار عند التاخير</div>
<div class="module-detail__list-item">تقارير الاقساط المتاخرة والمحصلة</div>
</div>
</div>
</div>
</div>
</section>
<!-- Budgets & Cost Centers -->
<section class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">الموازنات</span>
<h2 class="section-header__title">ميزانيات ومراكز تكلفة</h2>
<p class="section-header__desc">خطط ميزانية سنوية لكل نشاط ومركز تكلفة مع متابعة الانحرافات لحظيا. ادوات الرقابة المالية التي يحتاجها مجلس الادارة.</p>
</div>
<div class="gallery gallery--2col" data-reveal="100">
<div>
<div class="screenshot screenshot--framed">
<img src="screenshots/accounting/budgets.png" alt="الموازنات التقديرية - خطة مالية سنوية مع متابعة التنفيذ" loading="lazy">
</div>
<div class="module-detail__text" style="margin-top: var(--space-lg);">
<h3>الموازنات التقديرية</h3>
<div class="module-detail__list">
<div class="module-detail__list-item">موازنة سنوية لكل نشاط وقسم</div>
<div class="module-detail__list-item">مقارنة الفعلي بالمخطط مع نسب الانحراف</div>
<div class="module-detail__list-item">تنبيهات عند تجاوز الميزانية المعتمدة</div>
</div>
</div>
</div>
<div>
<div class="screenshot screenshot--framed">
<img src="screenshots/accounting/cost-centers.png" alt="مراكز التكلفة - توزيع المصروفات على الاقسام والانشطة" loading="lazy">
</div>
<div class="module-detail__text" style="margin-top: var(--space-lg);">
<h3>مراكز التكلفة</h3>
<div class="module-detail__list">
<div class="module-detail__list-item">تصنيف المصروفات حسب النشاط والفرع</div>
<div class="module-detail__list-item">معرفة ربحية كل نشاط رياضي على حدة</div>
<div class="module-detail__list-item">تقارير مقارنة بين مراكز التكلفة</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Bank Accounts -->
<section class="section">
<div class="container">
<div class="module-detail__screenshot-section--reverse" style="display:grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-2xl); align-items: center;" data-reveal>
<div class="module-detail__text">
<h3>ادارة الحسابات البنكية</h3>
<p>ربط حسابات النادي البنكية بالنظام المحاسبي. متابعة الارصدة والتحويلات والشيكات مع تسوية بنكية دورية.</p>
<div class="module-detail__list">
<div class="module-detail__list-item">اضافة حسابات بنكية متعددة بعملات مختلفة</div>
<div class="module-detail__list-item">تسجيل الايداعات والسحوبات والتحويلات</div>
<div class="module-detail__list-item">متابعة الشيكات الصادرة والواردة</div>
<div class="module-detail__list-item">تسوية بنكية شهرية مع كشف الحساب</div>
<div class="module-detail__list-item">تقارير الارصدة البنكية لحظيا</div>
</div>
</div>
<div class="screenshot screenshot--framed">
<img src="screenshots/accounting/bank-accounts.png" alt="الحسابات البنكية - ارصدة وتحويلات وتسويات" loading="lazy">
</div>
</div>
</div>
</section>
<!-- Automatic Journal Entries — Integration Highlight -->
<section class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">التكامل التلقائي</span>
<h2 class="section-header__title">قيود آلية من كل عملية</h2>
<p class="section-header__desc">لا حاجة لادخال القيود يدويا. كل عملية في النادي تولد قيودها المحاسبية تلقائيا. المحاسب يراجع فقط ولا يدخل بيانات.</p>
</div>
<div class="module-detail__features" data-reveal="100">
<div class="feature-card">
<div class="feature-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
</div>
<h4 class="feature-card__title">تسديد الاشتراكات</h4>
<p class="feature-card__text">عند دفع العضو لاشتراكه يتولد قيد: مدين الخزينة، دائن ايرادات الاشتراكات. مع التصنيف حسب نوع العضوية والفرع.</p>
</div>
<div class="feature-card">
<div class="feature-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
</div>
<h4 class="feature-card__title">الغرامات والجزاءات</h4>
<p class="feature-card__text">فرض الغرامة يولد قيد استحقاق تلقائي. عند التحصيل يتم اقفال المدين وتسجيل الايراد الفعلي بدون اي تدخل.</p>
</div>
<div class="feature-card">
<div class="feature-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 2a10 10 0 0 1 0 20"/><path d="M2 12h20"/></svg>
</div>
<h4 class="feature-card__title">رسوم الانشطة الرياضية</h4>
<p class="feature-card__text">تسجيل لاعب في نشاط يولد قيد ايراد مصنف حسب النشاط ومركز التكلفة. يظهر فورا في تقارير ربحية النشاط.</p>
</div>
<div class="feature-card">
<div class="feature-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 20c2-2 4-2 6 0s4 2 6 0 4-2 6 0"/><path d="M2 16c2-2 4-2 6 0s4 2 6 0 4-2 6 0"/></svg>
</div>
<h4 class="feature-card__title">تذاكر حمام السباحة</h4>
<p class="feature-card__text">كل تذكرة او كرنيه مباع يولد قيد ايراد مرتبط بمركز تكلفة حمام السباحة. تقارير يومية بدون ادخال يدوي.</p>
</div>
<div class="feature-card">
<div class="feature-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8"/><path d="M12 17v4"/></svg>
</div>
<h4 class="feature-card__title">المرتبات والاجور</h4>
<p class="feature-card__text">صرف المرتبات يولد قيود مصروفات مصنفة حسب القسم: مرتب اساسي، بدلات، خصومات، تامينات. كل بند في حسابه.</p>
</div>
<div class="feature-card">
<div class="feature-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>
</div>
<h4 class="feature-card__title">حركات المخازن</h4>
<p class="feature-card__text">صرف او اضافة اصناف من المخزن يولد قيد تلقائي. مبيعات الكافتيريا والبوفيه تسجل ايراداتها فورا.</p>
</div>
</div>
<!-- Workflow Diagram -->
<div class="workflow" style="margin-top: var(--space-2xl);" data-reveal="200">
<div class="workflow__step">عملية تشغيلية</div>
<span class="workflow__arrow">&#8592;</span>
<div class="workflow__step">توليد قيد آلي</div>
<span class="workflow__arrow">&#8592;</span>
<div class="workflow__step">ترحيل للاستاذ</div>
<span class="workflow__arrow">&#8592;</span>
<div class="workflow__step">تحديث التقارير</div>
</div>
</div>
</section>
<!-- Key Advantages -->
<section class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">لماذا نظامنا المحاسبي</span>
<h2 class="section-header__title">مصمم للاندية وليس للشركات</h2>
<p class="section-header__desc">الفرق بين نظام محاسبة عام ونظام El-Captain هو ان كل قيد وتقرير مصمم لواقع العمل اليومي في النادي الرياضي.</p>
</div>
<div class="module-detail__features" data-reveal="100">
<div class="feature-card">
<div class="feature-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
</div>
<h4 class="feature-card__title">رقابة مالية محكمة</h4>
<p class="feature-card__text">صلاحيات دقيقة لكل عملية مالية. لا يمكن تعديل قيد مرحل. كل تغيير مسجل بمن قام به ومتى.</p>
</div>
<div class="feature-card">
<div class="feature-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg>
</div>
<h4 class="feature-card__title">تقارير فورية</h4>
<p class="feature-card__text">ميزان مراجعة، ميزانية عمومية، قائمة دخل، تدفقات نقدية. كلها متاحة لحظيا بدون انتظار اقفال الشهر.</p>
</div>
<div class="feature-card">
<div class="feature-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><path d="M22 6l-10 7L2 6"/></svg>
</div>
<h4 class="feature-card__title">متعدد الفروع</h4>
<p class="feature-card__text">ميزانية موحدة او منفصلة لكل فرع. تقارير تجميعية على مستوى المؤسسة مع تفصيل لكل فرع على حدة.</p>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="cta-section section">
<div class="container">
<div class="cta-section__content" data-reveal>
<h2 class="cta-section__title">مالية ناديك تستحق نظام يفهمها</h2>
<p class="cta-section__desc">
لا تترك المحاسبة للورق والاكسل. نظام El-Captain يحول كل عملية في ناديك الى قيد محاسبي تلقائي وتقرير جاهز لمجلس الادارة.
</p>
<div class="cta-section__actions">
<a href="contact.html" class="btn btn--primary btn--large">احجز عرض تجريبي مجاني</a>
<a href="features.html" class="btn btn--secondary btn--large">تعرف على كل الوحدات</a>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer__grid">
<div class="footer__brand">
<div class="footer__brand-name">El-Captain</div>
<p class="footer__brand-desc">نظام ادارة متكامل مصمم خصيصا للاندية الرياضية والمنشآت في مصر. يغطي كل العمليات من العضويات حتى المحاسبة.</p>
</div>
<div>
<h4 class="footer__col-title">الوحدات</h4>
<a href="members.html" class="footer__link">العضويات</a>
<a href="sports.html" class="footer__link">الانشطة الرياضية</a>
<a href="pool.html" class="footer__link">حمامات السباحة</a>
<a href="finance.html" class="footer__link">المالية</a>
<a href="features.html" class="footer__link">كل المزايا</a>
</div>
<div>
<h4 class="footer__col-title">النظام</h4>
<a href="features.html#hr" class="footer__link">الموارد البشرية</a>
<a href="features.html#inventory" class="footer__link">المخازن</a>
<a href="features.html#reports" class="footer__link">التقارير</a>
<a href="features.html#mobile" class="footer__link">التطبيقات</a>
</div>
<div>
<h4 class="footer__col-title">تواصل</h4>
<a href="contact.html" class="footer__link">اطلب عرض</a>
<a href="contact.html" class="footer__link">الدعم الفني</a>
</div>
</div>
<div class="footer__bottom">
<span>El-Captain ERP System</span>
<span>نظام ادارة الاندية الرياضية</span>
</div>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>
public/index.html 0 → 100644
View file @ 8c142ce1
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>El-Captain - نظام ادارة الاندية الرياضية</title>
<meta name="description" content="نظام El-Captain المتكامل لادارة الاندية الرياضية والمنشآت. ادارة العضويات، الانشطة الرياضية، حمامات السباحة، المحاسبة، والموارد البشرية.">
<link rel="stylesheet" href="css/tokens.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/components.css">
<link rel="stylesheet" href="css/home.css">
</head>
<body>
<!-- Navigation -->
<nav class="nav" aria-label="التنقل الرئيسي">
<div class="container nav__inner">
<a href="/" class="nav__logo">
<span class="nav__logo-mark">EC</span>
<span>El-Captain</span>
</a>
<div class="nav__links" id="navLinks">
<a href="/" class="nav__link nav__link--active">الرئيسية</a>
<a href="features.html" class="nav__link">المزايا</a>
<a href="sports.html" class="nav__link">الانشطة الرياضية</a>
<a href="pool.html" class="nav__link">حمامات السباحة</a>
<a href="members.html" class="nav__link">العضويات</a>
<a href="finance.html" class="nav__link">المالية</a>
<a href="contact.html" class="nav__cta">تواصل معنا</a>
</div>
<button class="nav__toggle" aria-label="فتح القائمة" aria-expanded="false" aria-controls="navLinks">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M3 12h18M3 6h18M3 18h18"/>
</svg>
</button>
</div>
</nav>
<!-- Hero -->
<section class="hero section">
<div class="container">
<div class="hero__grid">
<div class="hero__content" data-reveal>
<h1 class="hero__title">
نظام ادارة متكامل
<br>
<span class="hero__title-accent">مصمم للاندية الرياضية</span>
</h1>
<p class="hero__desc">
ليس برنامج محاسبة تم تعديله. ليس نظام عام تم تخصيصه.
El-Captain مبني من الصفر لادارة كل تفصيلة في ناديك الرياضي.
</p>
<div class="hero__actions">
<a href="contact.html" class="btn btn--primary btn--large">اطلب عرض تجريبي</a>
<a href="features.html" class="btn btn--secondary btn--large">استكشف المزايا</a>
</div>
</div>
<div class="hero__visual" data-reveal="200">
<div class="hero__screenshot">
<img src="screenshots/dashboard/dashboard-hero.png" alt="لوحة التحكم الرئيسية لنظام El-Captain" loading="eager">
</div>
</div>
</div>
</div>
</section>
<!-- Pain Points -->
<section class="pain-points section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">المشكلة التي نحلها</span>
<h2 class="section-header__title">تعرف هذه المشاكل؟</h2>
<p class="section-header__desc">كل ناد رياضي في مصر يعاني من نفس التحديات. الفرق ان البعض قرر حلها.</p>
</div>
<div class="pain-points__grid">
<div class="pain-point" data-reveal="100">
<p class="pain-point__problem">اشتراكات متاخرة وغرامات ضائعة لان لا احد يتابع مواعيد التجديد يدويا لالاف الاعضاء</p>
<p class="pain-point__solution">متابعة تلقائية لكل اشتراك بتنبيهات وغرامات محسوبة</p>
</div>
<div class="pain-point" data-reveal="200">
<p class="pain-point__problem">حمام السباحة يعمل بطاقة استيعاب عشوائية بدون حصر حقيقي للمتواجدين</p>
<p class="pain-point__solution">نظام كامل لادارة حمام السباحة بتذاكر وكرنيهات وحصر لحظي</p>
</div>
<div class="pain-point" data-reveal="300">
<p class="pain-point__problem">ملفات Excel منفصلة للعضويات والمالية والانشطة ولا رابط بينها</p>
<p class="pain-point__solution">نظام واحد متكامل يربط كل شيء ببعضه تلقائيا</p>
</div>
<div class="pain-point" data-reveal="400">
<p class="pain-point__problem">المدربين لا يعرفون من حضر ومن غاب الا بكشوف ورقية قابلة للتلاعب</p>
<p class="pain-point__solution">تطبيق للمدرب يسجل الحضور لحظيا مع اشعارات لاولياء الامور</p>
</div>
</div>
</div>
</section>
<!-- Modules Showcase -->
<section class="modules-showcase section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">الوحدات</span>
<h2 class="section-header__title">نظام كامل في كل التفاصيل</h2>
<p class="section-header__desc">كل وحدة مصممة لحل مشكلة حقيقية يواجهها ناديك كل يوم. ليست مجرد شاشات عرض.</p>
</div>
<div class="modules-showcase__grid">
<a href="members.html" class="module-card" data-reveal="100">
<div class="module-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
</div>
<h3 class="module-card__title">ادارة العضويات</h3>
<p class="module-card__desc">دورة حياة العضو كاملة من التقديم والمقابلة حتى التفعيل والتحويل والانفصال وانهاء العضوية.</p>
<span class="module-card__link">اعرف المزيد ←</span>
</a>
<a href="sports.html" class="module-card" data-reveal="200">
<div class="module-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 2a10 10 0 0 1 0 20"/><path d="M2 12h20"/></svg>
</div>
<h3 class="module-card__title">الانشطة الرياضية</h3>
<p class="module-card__desc">اكاديميات ومجموعات تدريب ومسابقات وجداول مواعيد وادارة المدربين وكروت اللاعبين.</p>
<span class="module-card__link">اعرف المزيد ←</span>
</a>
<a href="pool.html" class="module-card" data-reveal="300">
<div class="module-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 20c2-2 4-2 6 0s4 2 6 0 4-2 6 0"/><path d="M2 16c2-2 4-2 6 0s4 2 6 0 4-2 6 0"/><path d="M6 12V4"/><path d="M18 12V4"/></svg>
</div>
<h3 class="module-card__title">حمامات السباحة</h3>
<p class="module-card__desc">تذاكر يومية وكرنيهات وحصر متواجدين لحظي وادارة الحارات والحجوزات ومراقبة السعة.</p>
<span class="module-card__link">اعرف المزيد ←</span>
</a>
<a href="finance.html" class="module-card" data-reveal="400">
<div class="module-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 1v22"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
</div>
<h3 class="module-card__title">المالية والمحاسبة</h3>
<p class="module-card__desc">شجرة حسابات وقيود يومية واقساط وخزينة ومراكز تكلفة وميزانيات وتقارير مالية شاملة.</p>
<span class="module-card__link">اعرف المزيد ←</span>
</a>
<a href="features.html#hr" class="module-card" data-reveal="500">
<div class="module-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8"/><path d="M12 17v4"/></svg>
</div>
<h3 class="module-card__title">الموارد البشرية</h3>
<p class="module-card__desc">ادارة الموظفين والمرتبات والاجازات والحضور والانصراف والتقييمات ومكافات نهاية الخدمة.</p>
<span class="module-card__link">اعرف المزيد ←</span>
</a>
<a href="features.html#mobile" class="module-card" data-reveal="600">
<div class="module-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="2" width="14" height="20" rx="2"/><path d="M12 18h.01"/></svg>
</div>
<h3 class="module-card__title">التطبيقات المحمولة</h3>
<p class="module-card__desc">تطبيق للاعبين واولياء الامور والمدربين. اشعارات فورية وتسجيل حضور وجداول تدريب.</p>
<span class="module-card__link">اعرف المزيد ←</span>
</a>
</div>
</div>
</section>
<!-- Product Screenshots Carousel -->
<section class="product-showcase section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">من داخل النظام</span>
<h2 class="section-header__title">شاشات حقيقية، لا تصاميم تخيلية</h2>
</div>
</div>
<div class="product-showcase__track" aria-hidden="true">
<div class="product-showcase__item"><img src="screenshots/members/list.png" alt="قائمة الاعضاء" loading="lazy"></div>
<div class="product-showcase__item"><img src="screenshots/sports/activities.png" alt="الانشطة الرياضية" loading="lazy"></div>
<div class="product-showcase__item"><img src="screenshots/accounting/accounting-dashboard.png" alt="لوحة المحاسبة" loading="lazy"></div>
<div class="product-showcase__item"><img src="screenshots/facilities/pool.png" alt="ادارة حمام السباحة" loading="lazy"></div>
<div class="product-showcase__item"><img src="screenshots/hr/hr-dashboard.png" alt="لوحة الموارد البشرية" loading="lazy"></div>
<div class="product-showcase__item"><img src="screenshots/treasury/dashboard.png" alt="الخزينة" loading="lazy"></div>
<div class="product-showcase__item"><img src="screenshots/sports/attendance.png" alt="تسجيل الحضور" loading="lazy"></div>
<div class="product-showcase__item"><img src="screenshots/payments/list.png" alt="المدفوعات" loading="lazy"></div>
<!-- Duplicate for seamless loop -->
<div class="product-showcase__item"><img src="screenshots/members/list.png" alt="" loading="lazy"></div>
<div class="product-showcase__item"><img src="screenshots/sports/activities.png" alt="" loading="lazy"></div>
<div class="product-showcase__item"><img src="screenshots/accounting/accounting-dashboard.png" alt="" loading="lazy"></div>
<div class="product-showcase__item"><img src="screenshots/facilities/pool.png" alt="" loading="lazy"></div>
<div class="product-showcase__item"><img src="screenshots/hr/hr-dashboard.png" alt="" loading="lazy"></div>
<div class="product-showcase__item"><img src="screenshots/treasury/dashboard.png" alt="" loading="lazy"></div>
<div class="product-showcase__item"><img src="screenshots/sports/attendance.png" alt="" loading="lazy"></div>
<div class="product-showcase__item"><img src="screenshots/payments/list.png" alt="" loading="lazy"></div>
</div>
</section>
<!-- Social Proof -->
<section class="social-proof section">
<div class="container">
<div class="social-proof__stats" data-reveal>
<div class="stat">
<div class="stat__value">+35</div>
<div class="stat__label">وحدة متكاملة</div>
</div>
<div class="stat">
<div class="stat__value">+250</div>
<div class="stat__label">شاشة ادارية</div>
</div>
<div class="stat">
<div class="stat__value">3</div>
<div class="stat__label">تطبيقات محمولة</div>
</div>
<div class="stat">
<div class="stat__value">100%</div>
<div class="stat__label">عربي بالكامل</div>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section class="cta-section section">
<div class="container">
<div class="cta-section__content" data-reveal>
<h2 class="cta-section__title">ناديك يستحق نظام يفهمه</h2>
<p class="cta-section__desc">
لا تضيع وقتك في انظمة عامة تحتاج سنوات لتخصيصها.
El-Captain جاهز لادارة ناديك من اليوم الاول.
</p>
<div class="cta-section__actions">
<a href="contact.html" class="btn btn--primary btn--large">احجز عرض تجريبي مجاني</a>
<a href="features.html" class="btn btn--secondary btn--large">تعرف على كل المزايا</a>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer__grid">
<div class="footer__brand">
<div class="footer__brand-name">El-Captain</div>
<p class="footer__brand-desc">نظام ادارة متكامل مصمم خصيصا للاندية الرياضية والمنشآت في مصر. يغطي كل العمليات من العضويات حتى المحاسبة.</p>
</div>
<div>
<h4 class="footer__col-title">الوحدات</h4>
<a href="members.html" class="footer__link">العضويات</a>
<a href="sports.html" class="footer__link">الانشطة الرياضية</a>
<a href="pool.html" class="footer__link">حمامات السباحة</a>
<a href="finance.html" class="footer__link">المالية</a>
<a href="features.html" class="footer__link">كل المزايا</a>
</div>
<div>
<h4 class="footer__col-title">النظام</h4>
<a href="features.html#hr" class="footer__link">الموارد البشرية</a>
<a href="features.html#inventory" class="footer__link">المخازن</a>
<a href="features.html#reports" class="footer__link">التقارير</a>
<a href="features.html#mobile" class="footer__link">التطبيقات</a>
</div>
<div>
<h4 class="footer__col-title">تواصل</h4>
<a href="contact.html" class="footer__link">اطلب عرض</a>
<a href="contact.html" class="footer__link">الدعم الفني</a>
</div>
</div>
<div class="footer__bottom">
<span>El-Captain ERP System</span>
<span>نظام ادارة الاندية الرياضية</span>
</div>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>
public/js/main.js 0 → 100644
View file @ 8c142ce1
document.addEventListener('DOMContentLoaded', () => {
initNav();
initReveal();
initMobileMenu();
});
function initNav() {
const nav = document.querySelector('.nav');
if (!nav) return;
let ticking = false;
window.addEventListener('scroll', () => {
if (!ticking) {
requestAnimationFrame(() => {
nav.classList.toggle('nav--scrolled', window.scrollY > 50);
ticking = false;
});
ticking = true;
}
}, { passive: true });
}
function initMobileMenu() {
const toggle = document.querySelector('.nav__toggle');
const links = document.querySelector('.nav__links');
if (!toggle || !links) return;
toggle.addEventListener('click', () => {
const isOpen = links.classList.toggle('nav__links--open');
toggle.setAttribute('aria-expanded', String(isOpen));
document.body.style.overflow = isOpen ? 'hidden' : '';
});
links.addEventListener('click', (e) => {
if (e.target.classList.contains('nav__link')) {
links.classList.remove('nav__links--open');
toggle.setAttribute('aria-expanded', 'false');
document.body.style.overflow = '';
}
});
}
function initReveal() {
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add('revealed');
observer.unobserve(entry.target);
}
});
},
{ threshold: 0.1, rootMargin: '0px 0px -50px 0px' }
);
document.querySelectorAll('[data-reveal]').forEach((el) => {
el.style.opacity = '0';
el.style.transform = 'translateY(24px)';
el.style.transition = `opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1)`;
const delay = el.dataset.reveal || '0';
el.style.transitionDelay = `${delay}ms`;
observer.observe(el);
});
}
document.documentElement.addEventListener('animationend', () => {});
const style = document.createElement('style');
style.textContent = `.revealed { opacity: 1 !important; transform: translateY(0) !important; }`;
document.head.appendChild(style);
public/members.html 0 → 100644
View file @ 8c142ce1
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ادارة العضويات - El-Captain</title>
<meta name="description" content="نظام ادارة العضويات المتكامل من El-Captain. دورة حياة العضو كاملة من التقديم والمقابلة حتى التحويل والانفصال. انواع عضويات متعددة وادارة شاملة للاسر.">
<link rel="stylesheet" href="css/tokens.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/components.css">
<link rel="stylesheet" href="css/pages.css">
</head>
<body>
<!-- Navigation -->
<nav class="nav" aria-label="التنقل الرئيسي">
<div class="container nav__inner">
<a href="/" class="nav__logo">
<span class="nav__logo-mark">EC</span>
<span>El-Captain</span>
</a>
<div class="nav__links" id="navLinks">
<a href="/" class="nav__link">الرئيسية</a>
<a href="features.html" class="nav__link">المزايا</a>
<a href="sports.html" class="nav__link">الانشطة الرياضية</a>
<a href="pool.html" class="nav__link">حمامات السباحة</a>
<a href="members.html" class="nav__link nav__link--active">العضويات</a>
<a href="finance.html" class="nav__link">المالية</a>
<a href="contact.html" class="nav__cta">تواصل معنا</a>
</div>
<button class="nav__toggle" aria-label="فتح القائمة" aria-expanded="false" aria-controls="navLinks">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M3 12h18M3 6h18M3 18h18"/>
</svg>
</button>
</div>
</nav>
<!-- Breadcrumb -->
<section class="section" style="padding-bottom: 0; padding-top: 7rem;">
<div class="container">
<div class="breadcrumb" data-reveal>
<a href="/">الرئيسية</a>
<span class="breadcrumb__separator">/</span>
<span>ادارة العضويات</span>
</div>
</div>
</section>
<!-- Module Hero -->
<section class="module-hero section">
<div class="container">
<div class="module-hero__content" data-reveal>
<h1 class="module-hero__title">ادارة دورة حياة العضو بالكامل</h1>
<p class="module-hero__desc">
من لحظة تقديم طلب الالتحاق حتى انتهاء العضوية. نظام متكامل يدير كل تفصيلة في علاقة النادي باعضائه: التسجيل، المقابلات، الملفات الشخصية، الاسر، المستندات، التحويلات، والانفصال.
</p>
<div class="hero__actions">
<a href="contact.html" class="btn btn--primary btn--large">اطلب عرض تجريبي</a>
<a href="#registration" class="btn btn--secondary btn--large">استكشف المزايا</a>
</div>
</div>
</div>
</section>
<!-- Member Lifecycle Workflow -->
<section class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">دورة الحياة</span>
<h2 class="section-header__title">رحلة العضو داخل النظام</h2>
<p class="section-header__desc">كل مرحلة مدعومة بضوابط وصلاحيات وتوثيق كامل. لا شيء يحدث بدون تتبع.</p>
</div>
<div class="workflow" data-reveal="100">
<div class="workflow__step">تقديم الطلب</div>
<span class="workflow__arrow">←</span>
<div class="workflow__step">المقابلة</div>
<span class="workflow__arrow">←</span>
<div class="workflow__step">الموافقة</div>
<span class="workflow__arrow">←</span>
<div class="workflow__step">السداد</div>
<span class="workflow__arrow">←</span>
<div class="workflow__step">التفعيل</div>
<span class="workflow__arrow">←</span>
<div class="workflow__step">التجديد</div>
</div>
</div>
</section>
<!-- Member Registration -->
<section id="registration" class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">التسجيل</span>
<h2 class="section-header__title">تسجيل الاعضاء بكل انواعهم</h2>
<p class="section-header__desc">نماذج تسجيل مخصصة لكل نوع عضوية مع جمع كافة البيانات المطلوبة وفقا للوائح النادي.</p>
</div>
<div class="module-detail__screenshot-section" data-reveal="100">
<div class="screenshot screenshot--framed">
<img src="screenshots/members/create.png" alt="شاشة تسجيل عضو جديد" loading="lazy">
</div>
<div class="module-detail__text">
<h3>نموذج تسجيل شامل</h3>
<p>نموذج تسجيل يجمع كافة البيانات الشخصية والمهنية والعائلية للعضو في خطوات منظمة. يدعم التحقق التلقائي من البيانات ومنع التكرار.</p>
<div class="module-detail__list">
<div class="module-detail__list-item">بيانات شخصية كاملة مع صور شخصية</div>
<div class="module-detail__list-item">بيانات العمل والمؤهلات</div>
<div class="module-detail__list-item">عنوان الاقامة وبيانات التواصل</div>
<div class="module-detail__list-item">تحديد نوع العضوية والفئة</div>
<div class="module-detail__list-item">ربط تلقائي بالمنظومة المالية</div>
</div>
</div>
</div>
</div>
</section>
<!-- Member Types -->
<section class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">انواع العضوية</span>
<h2 class="section-header__title">دعم كامل لكل انواع العضويات</h2>
<p class="section-header__desc">كل نوع عضوية له قواعد مختلفة في الرسوم والصلاحيات والمستندات المطلوبة. النظام يدير كل هذا تلقائيا.</p>
</div>
<div class="module-detail__features" data-reveal="100">
<div class="feature-card">
<div class="feature-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
</div>
<h3 class="feature-card__title">العضوية العاملة</h3>
<p class="feature-card__text">العضوية الاساسية بكامل الحقوق. تشمل حق التصويت في الجمعية العمومية والترشح للمناصب. رسوم اشتراك سنوية ورسوم التحاق.</p>
</div>
<div class="feature-card">
<div class="feature-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 2a10 10 0 0 1 0 20"/><path d="M2 12h20"/></svg>
</div>
<h3 class="feature-card__title">العضوية الرياضية</h3>
<p class="feature-card__text">عضوية مخصصة لممارسة الانشطة الرياضية فقط. بدون حقوق الجمعية العمومية. مناسبة للشباب والناشئين المهتمين بالتدريب.</p>
</div>
<div class="feature-card">
<div class="feature-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
</div>
<h3 class="feature-card__title">العضوية الشرفية</h3>
<p class="feature-card__text">عضوية تمنح لشخصيات مميزة بقرار من مجلس الادارة. معفاة من الرسوم كليا او جزئيا مع صلاحيات خاصة يحددها القرار.</p>
</div>
<div class="feature-card">
<div class="feature-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4"/><path d="M8 2v4"/><path d="M3 10h18"/></svg>
</div>
<h3 class="feature-card__title">العضوية الموسمية</h3>
<p class="feature-card__text">عضوية محدودة بفترة زمنية معينة. مثالية لفترات الصيف او المواسم الرياضية. تنتهي تلقائيا بانتهاء الموسم المحدد.</p>
</div>
<div class="feature-card">
<div class="feature-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
</div>
<h3 class="feature-card__title">العضوية الاجنبية</h3>
<p class="feature-card__text">عضوية مخصصة لغير المصريين. تتطلب مستندات اضافية مثل جواز السفر واقامة سارية. رسوم مختلفة وفقا للوائح.</p>
</div>
</div>
<div class="gallery gallery--2col" style="margin-top: var(--space-2xl);" data-reveal="200">
<div class="screenshot screenshot--framed">
<img src="screenshots/members/honorary.png" alt="تسجيل عضوية شرفية" loading="lazy">
</div>
<div class="screenshot screenshot--framed">
<img src="screenshots/members/seasonal.png" alt="العضوية الموسمية" loading="lazy">
</div>
</div>
</div>
</section>
<!-- Interview Process -->
<section class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">المقابلات</span>
<h2 class="section-header__title">نظام المقابلات والموافقات</h2>
<p class="section-header__desc">ادارة كاملة لعملية قبول الاعضاء الجدد من تحديد مواعيد المقابلة حتى صدور القرار النهائي.</p>
</div>
<div class="module-detail__screenshot-section module-detail__screenshot-section--reverse" data-reveal="100">
<div class="module-detail__text">
<h3>عملية قبول منظمة</h3>
<p>النظام يدير العملية الكاملة لقبول الاعضاء الجدد وفقا للائحة النادي. من جدولة المقابلات وتسجيل الملاحظات حتى اصدار قرار القبول او الرفض.</p>
<div class="module-detail__list">
<div class="module-detail__list-item">جدولة مواعيد المقابلات تلقائيا</div>
<div class="module-detail__list-item">تسجيل نتائج المقابلة وملاحظات اللجنة</div>
<div class="module-detail__list-item">سير عمل الموافقات متعدد المستويات</div>
<div class="module-detail__list-item">اشعارات تلقائية للمتقدمين بالنتيجة</div>
<div class="module-detail__list-item">ارشفة الطلبات المرفوضة للرجوع اليها</div>
</div>
</div>
<div class="screenshot screenshot--framed">
<img src="screenshots/interviews/list.png" alt="قائمة المقابلات" loading="lazy">
</div>
</div>
</div>
</section>
<!-- Member Profiles -->
<section class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">الملف الشخصي</span>
<h2 class="section-header__title">ملفات شخصية شاملة</h2>
<p class="section-header__desc">كل معلومة عن العضو في مكان واحد. بيانات شخصية، مالية، رياضية، وعائلية مع تاريخ كامل لكل التعاملات.</p>
</div>
<div class="module-detail__screenshot-section" data-reveal="100">
<div class="screenshot screenshot--framed">
<img src="screenshots/members/member-profile.png" alt="الملف الشخصي للعضو" loading="lazy">
</div>
<div class="module-detail__text">
<h3>كل شيء عن العضو في نظرة واحدة</h3>
<p>الملف الشخصي يعرض كل المعلومات المتعلقة بالعضو في واجهة منظمة. من البيانات الاساسية حتى سجل المدفوعات والانشطة الرياضية والمخالفات.</p>
<div class="module-detail__list">
<div class="module-detail__list-item">البيانات الشخصية والصور</div>
<div class="module-detail__list-item">حالة الاشتراك والمديونيات</div>
<div class="module-detail__list-item">الانشطة الرياضية المسجل فيها</div>
<div class="module-detail__list-item">سجل الحضور والغياب</div>
<div class="module-detail__list-item">المستندات المرفقة</div>
<div class="module-detail__list-item">سجل العقوبات والمخالفات</div>
<div class="module-detail__list-item">تاريخ المعاملات المالية الكامل</div>
</div>
</div>
</div>
<div class="gallery gallery--2col" style="margin-top: var(--space-2xl);" data-reveal="200">
<div class="screenshot screenshot--framed">
<img src="screenshots/members/member-profile-1.png" alt="تفاصيل اضافية للملف الشخصي" loading="lazy">
</div>
<div class="screenshot screenshot--framed">
<img src="screenshots/members/sports-members.png" alt="الانشطة الرياضية للعضو" loading="lazy">
</div>
</div>
</div>
</section>
<!-- Family Management -->
<section class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">الاسر</span>
<h2 class="section-header__title">ادارة اسر الاعضاء</h2>
<p class="section-header__desc">نظام متكامل لادارة افراد اسرة العضو مع قواعد ذكية للسن والاهلية والرسوم.</p>
</div>
<div class="module-detail__screenshot-section module-detail__screenshot-section--reverse" data-reveal="100">
<div class="module-detail__text">
<h3>ادارة الزوجات والابناء</h3>
<p>اضافة وادارة افراد اسرة العضو مع تطبيق تلقائي لقواعد النادي الخاصة بالسن والمستندات المطلوبة ورسوم الاشتراك لكل فرد.</p>
<div class="module-detail__list">
<div class="module-detail__list-item">اضافة الزوجة والابناء بملفات منفصلة</div>
<div class="module-detail__list-item">قواعد السن التلقائية للابناء</div>
<div class="module-detail__list-item">تنبيهات عند بلوغ السن القانوني</div>
<div class="module-detail__list-item">رسوم مختلفة حسب عدد وعمر الابناء</div>
<div class="module-detail__list-item">ربط الاسرة بنفس رقم العضوية الاساسي</div>
<div class="module-detail__list-item">ادارة حالات الانفصال والطلاق</div>
</div>
</div>
<div class="screenshot screenshot--framed">
<img src="screenshots/family/list.png" alt="ادارة اسر الاعضاء" loading="lazy">
</div>
</div>
</div>
</section>
<!-- Document Tracking -->
<section class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">المستندات</span>
<h2 class="section-header__title">ادارة وتتبع المستندات</h2>
<p class="section-header__desc">كل مستند مطلوب من العضو يتم تتبعه وارشفته رقميا مع تنبيهات لانتهاء الصلاحية.</p>
</div>
<div class="module-detail__screenshot-section" data-reveal="100">
<div class="screenshot screenshot--framed">
<img src="screenshots/members/documents.png" alt="مستندات العضو" loading="lazy">
</div>
<div class="module-detail__text">
<h3>ارشفة رقمية كاملة</h3>
<p>النظام يحتفظ بنسخ رقمية من كل المستندات المطلوبة لكل نوع عضوية. مع تنبيهات تلقائية عند اقتراب انتهاء صلاحية اي مستند.</p>
<div class="module-detail__list">
<div class="module-detail__list-item">رفع وارشفة البطاقة الشخصية</div>
<div class="module-detail__list-item">صور شخصية وعائلية</div>
<div class="module-detail__list-item">شهادات الميلاد للابناء</div>
<div class="module-detail__list-item">جواز السفر والاقامة للاجانب</div>
<div class="module-detail__list-item">خطابات التوصية والموافقات</div>
<div class="module-detail__list-item">تنبيهات انتهاء صلاحية المستندات</div>
</div>
</div>
</div>
</div>
</section>
<!-- Search and Filtering -->
<section class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">البحث</span>
<h2 class="section-header__title">بحث وتصفية متقدمة</h2>
<p class="section-header__desc">الوصول لاي عضو في ثوان معدودة مهما كان حجم قاعدة البيانات. فلاتر متعددة وبحث ذكي.</p>
</div>
<div class="module-detail__screenshot-section module-detail__screenshot-section--reverse" data-reveal="100">
<div class="module-detail__text">
<h3>ايجاد اي عضو فورا</h3>
<p>محرك بحث متقدم يدعم البحث بالاسم ورقم العضوية ورقم الهاتف والرقم القومي. مع فلاتر متعددة لتضييق النتائج حسب النوع والحالة والفرع.</p>
<div class="module-detail__list">
<div class="module-detail__list-item">بحث فوري اثناء الكتابة</div>
<div class="module-detail__list-item">تصفية حسب نوع العضوية</div>
<div class="module-detail__list-item">تصفية حسب حالة الاشتراك</div>
<div class="module-detail__list-item">تصفية حسب الفرع</div>
<div class="module-detail__list-item">تصدير نتائج البحث</div>
<div class="module-detail__list-item">حفظ عمليات البحث المتكررة</div>
</div>
</div>
<div class="screenshot screenshot--framed">
<img src="screenshots/members/search.png" alt="بحث الاعضاء المتقدم" loading="lazy">
</div>
</div>
<div class="gallery gallery--2col" style="margin-top: var(--space-2xl);" data-reveal="200">
<div class="screenshot screenshot--framed">
<img src="screenshots/members/list.png" alt="قائمة الاعضاء" loading="lazy">
</div>
<div class="screenshot screenshot--framed">
<img src="screenshots/members/foreign.png" alt="الاعضاء الاجانب" loading="lazy">
</div>
</div>
</div>
</section>
<!-- Transfers and Separations -->
<section class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">التحويلات</span>
<h2 class="section-header__title">التحويلات والانفصال</h2>
<p class="section-header__desc">ادارة كاملة لحالات تحويل العضوية والانفصال بكل اشكاله وفقا للائحة النادي.</p>
</div>
<div class="module-detail__screenshot-section" data-reveal="100">
<div class="screenshot screenshot--framed">
<img src="screenshots/transfers/list.png" alt="قائمة التحويلات" loading="lazy">
</div>
<div class="module-detail__text">
<h3>كل حالات التحويل والانفصال</h3>
<p>النظام يدير كل السيناريوهات المعقدة لتغيير حالة العضوية. من تحويل العضوية بين الاشخاص حتى حالات الطلاق والوفاة والتنازل.</p>
<div class="module-detail__list">
<div class="module-detail__list-item">تحويل العضوية لفرد اخر من الاسرة</div>
<div class="module-detail__list-item">انفصال بسبب الطلاق مع حفظ حقوق الاطراف</div>
<div class="module-detail__list-item">حالات الوفاة ونقل العضوية للورثة</div>
<div class="module-detail__list-item">التنازل الاختياري عن العضوية</div>
<div class="module-detail__list-item">حساب الرسوم المستحقة لكل حالة</div>
<div class="module-detail__list-item">توثيق كامل بالمستندات المطلوبة</div>
</div>
</div>
</div>
</div>
</section>
<!-- Subscription Management -->
<section class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">الاشتراكات</span>
<h2 class="section-header__title">ادارة الاشتراكات والتجديد</h2>
<p class="section-header__desc">متابعة تلقائية لمواعيد التجديد والغرامات والمتأخرات. لا يفلت اشتراك من المنظومة.</p>
</div>
<div class="module-detail__features" data-reveal="100">
<div class="feature-card">
<div class="feature-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/><path d="M12 6v6l4 2"/></svg>
</div>
<h3 class="feature-card__title">تجديد تلقائي</h3>
<p class="feature-card__text">النظام يتابع مواعيد انتهاء كل اشتراك ويرسل تنبيهات مسبقة. حساب تلقائي للغرامات عند التأخر في التجديد وفقا لجدول الغرامات المعتمد.</p>
</div>
<div class="feature-card">
<div class="feature-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 1v22"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
</div>
<h3 class="feature-card__title">ادارة الرسوم</h3>
<p class="feature-card__text">رسوم مختلفة حسب نوع العضوية وعدد افراد الاسرة والفترة. دعم كامل للاعفاءات الجزئية والكلية والاقساط والسداد المقدم.</p>
</div>
<div class="feature-card">
<div class="feature-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M16 13H8"/><path d="M16 17H8"/><path d="M10 9H8"/></svg>
</div>
<h3 class="feature-card__title">تقارير شاملة</h3>
<p class="feature-card__text">تقارير تفصيلية عن حالة الاشتراكات والمتأخرات والتحصيل. كشوف بالاعضاء المنتهية اشتراكاتهم والمتأخرين عن السداد.</p>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="cta-section section">
<div class="container">
<div class="cta-section__content" data-reveal>
<h2 class="cta-section__title">جاهز لادارة عضوياتك باحترافية؟</h2>
<p class="cta-section__desc">
نظام El-Captain يدير الاف الاعضاء بكفاءة تامة.
من التسجيل حتى التجديد، كل شيء مؤتمت ومتابع.
</p>
<div class="cta-section__actions">
<a href="contact.html" class="btn btn--primary btn--large">احجز عرض تجريبي مجاني</a>
<a href="finance.html" class="btn btn--secondary btn--large">استكشف المالية</a>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer__grid">
<div class="footer__brand">
<div class="footer__brand-name">El-Captain</div>
<p class="footer__brand-desc">نظام ادارة متكامل مصمم خصيصا للاندية الرياضية والمنشآت في مصر. يغطي كل العمليات من العضويات حتى المحاسبة.</p>
</div>
<div>
<h4 class="footer__col-title">الوحدات</h4>
<a href="members.html" class="footer__link">العضويات</a>
<a href="sports.html" class="footer__link">الانشطة الرياضية</a>
<a href="pool.html" class="footer__link">حمامات السباحة</a>
<a href="finance.html" class="footer__link">المالية</a>
<a href="features.html" class="footer__link">كل المزايا</a>
</div>
<div>
<h4 class="footer__col-title">النظام</h4>
<a href="features.html#hr" class="footer__link">الموارد البشرية</a>
<a href="features.html#inventory" class="footer__link">المخازن</a>
<a href="features.html#reports" class="footer__link">التقارير</a>
<a href="features.html#mobile" class="footer__link">التطبيقات</a>
</div>
<div>
<h4 class="footer__col-title">تواصل</h4>
<a href="contact.html" class="footer__link">اطلب عرض</a>
<a href="contact.html" class="footer__link">الدعم الفني</a>
</div>
</div>
<div class="footer__bottom">
<span>El-Captain ERP System</span>
<span>نظام ادارة الاندية الرياضية</span>
</div>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>
public/pool.html 0 → 100644
View file @ 8c142ce1
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ادارة حمامات السباحة - El-Captain</title>
<meta name="description" content="النظام الوحيد في مصر المصمم خصيصا لادارة حمامات السباحة في الاندية الرياضية. حصر لحظي للمتواجدين، تذاكر يومية، كرنيهات، حجوزات حارات، مراقبة السعة القصوى.">
<link rel="stylesheet" href="css/tokens.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/components.css">
<link rel="stylesheet" href="css/home.css">
<link rel="stylesheet" href="css/pages.css">
</head>
<body>
<!-- Navigation -->
<nav class="nav" aria-label="التنقل الرئيسي">
<div class="container nav__inner">
<a href="/" class="nav__logo">
<span class="nav__logo-mark">EC</span>
<span>El-Captain</span>
</a>
<div class="nav__links" id="navLinks">
<a href="/" class="nav__link">الرئيسية</a>
<a href="features.html" class="nav__link">المزايا</a>
<a href="sports.html" class="nav__link">الانشطة الرياضية</a>
<a href="pool.html" class="nav__link nav__link--active">حمامات السباحة</a>
<a href="members.html" class="nav__link">العضويات</a>
<a href="finance.html" class="nav__link">المالية</a>
<a href="contact.html" class="nav__cta">تواصل معنا</a>
</div>
<button class="nav__toggle" aria-label="فتح القائمة" aria-expanded="false" aria-controls="navLinks">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M3 12h18M3 6h18M3 18h18"/>
</svg>
</button>
</div>
</nav>
<!-- Module Hero -->
<section class="module-hero section">
<div class="container">
<div class="breadcrumb" data-reveal>
<a href="/">الرئيسية</a>
<span class="breadcrumb__separator">/</span>
<span>حمامات السباحة</span>
</div>
<div class="module-hero__content" data-reveal>
<h1 class="module-hero__title">
النظام الوحيد في مصر
<br>
<span class="hero__title-accent">لادارة حمامات السباحة بالكامل</span>
</h1>
<p class="module-hero__desc">
ليس مجرد شاشة لتسجيل الدخول. نظام متكامل يتحكم في السعة لحظيا، يصدر التذاكر والكرنيهات، يدير الحجوزات والحارات، ويمنع تجاوز الطاقة الاستيعابية. مصمم لحل المشاكل الحقيقية التي يواجهها كل نادي رياضي في مصر.
</p>
<div class="hero__actions">
<a href="contact.html" class="btn btn--primary btn--large">اطلب عرض تجريبي</a>
<a href="#features" class="btn btn--secondary btn--large">استكشف المزايا</a>
</div>
</div>
</div>
</section>
<!-- Pain Points -->
<section class="pain-points section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">لماذا تحتاج هذا النظام</span>
<h2 class="section-header__title">مشاكل حقيقية تتكرر كل صيف</h2>
<p class="section-header__desc">كل نادي في مصر يعاني من نفس المشاكل عند ادارة حمام السباحة. الفرق بين الفوضى والنظام هو وجود نظام حقيقي مصمم لهذا الغرض.</p>
</div>
<div class="pain-points__grid">
<div class="pain-point" data-reveal="100">
<p class="pain-point__problem">لا يوجد حصر حقيقي لعدد المتواجدين في حمام السباحة. المنقذ يقدر بالنظر. خطر حقيقي على سلامة الاعضاء وتعرض مجلس الادارة للمسائلة القانونية.</p>
<p class="pain-point__solution">حصر لحظي اوتوماتيكي لكل متواجد مع تنبيه فوري عند الاقتراب من السعة القصوى</p>
</div>
<div class="pain-point" data-reveal="200">
<p class="pain-point__problem">التذاكر اليومية ورقية وقابلة للتزوير. لا سجل رقمي. لا رقابة على الايرادات الفعلية. فجوة مالية يومية بين التذاكر المطبوعة والمحصل الفعلي.</p>
<p class="pain-point__solution">نظام تذاكر رقمي بالكامل مربوط بالخزينة والتقارير المالية لحظيا</p>
</div>
<div class="pain-point" data-reveal="300">
<p class="pain-point__problem">الكرنيهات تدار يدويا بدفتر ورقي. لا يمكن معرفة الرصيد المتبقي بدقة. اعتراضات يومية من الاعضاء. سرقة دخلات بدون رقابة.</p>
<p class="pain-point__solution">نظام كرنيهات رقمي يسجل كل دخلة بتاريخها ووقتها مع رصيد محدث لحظيا</p>
</div>
<div class="pain-point" data-reveal="400">
<p class="pain-point__problem">دخول الضيوف بدون ضوابط. لا حد اقصى لعدد الضيوف. لا تتبع لمن ادخل من. ضغط مفاجئ على حمام السباحة ومشاكل مع الاعضاء الاساسيين.</p>
<p class="pain-point__solution">نظام ضيوف محكم يحدد العدد المسموح ويربط كل ضيف بالعضو المسؤول</p>
</div>
</div>
</div>
</section>
<!-- Main Features -->
<section class="section" id="features">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">المزايا الاساسية</span>
<h2 class="section-header__title">كل ما تحتاجه لادارة حمام السباحة</h2>
<p class="section-header__desc">ست وحدات فرعية تغطي كل جانب من جوانب تشغيل حمام السباحة. من لحظة دخول العضو حتى خروجه.</p>
</div>
<div class="module-detail__features">
<div class="feature-card" data-reveal="100">
<div class="feature-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
</div>
<h3 class="feature-card__title">حصر المتواجدين لحظيا</h3>
<p class="feature-card__text">عداد حقيقي لعدد المتواجدين داخل حمام السباحة في هذه اللحظة. يزيد عند الدخول وينقص عند الخروج. تنبيه اوتوماتيكي عند الاقتراب من الحد الاقصى ومنع الدخول عند الوصول للسعة القصوى.</p>
</div>
<div class="feature-card" data-reveal="200">
<div class="feature-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M6 2v4"/><path d="M18 2v4"/><path d="M2 10h20"/></svg>
</div>
<h3 class="feature-card__title">التذاكر اليومية</h3>
<p class="feature-card__text">اصدار تذاكر يومية لدخول حمام السباحة مع اسعار مختلفة حسب فئة العضو والسن والوقت. كل تذكرة مسجلة رقميا ومربوطة بالخزينة. لا تذاكر ورقية ولا فجوات مالية.</p>
</div>
<div class="feature-card" data-reveal="300">
<div class="feature-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M3 10h18"/><path d="M7 2v4"/><path d="M17 2v4"/><path d="M10 14h4"/><path d="M10 18h4"/></svg>
</div>
<h3 class="feature-card__title">الكرنيهات</h3>
<p class="feature-card__text">كرنيهات بعدد دخلات محدد. يشتريها العضو مرة ويستخدمها على فترة. كل استخدام مسجل بالتاريخ والوقت. الرصيد المتبقي ظاهر للموظف والعضو. لا اعتراضات ولا خلافات.</p>
</div>
<div class="feature-card" data-reveal="400">
<div class="feature-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
</div>
<h3 class="feature-card__title">ادارة الضيوف</h3>
<p class="feature-card__text">نظام محكم لدخول الضيوف. تحديد الحد الاقصى لعدد الضيوف لكل عضو. تسجيل بيانات الضيف وربطه بالعضو المسؤول. تسعير مختلف للضيوف. سجل كامل لكل عمليات الاستضافة.</p>
</div>
<div class="feature-card" data-reveal="500">
<div class="feature-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4"/><path d="M8 2v4"/><path d="M3 10h18"/><path d="M8 14h.01"/><path d="M12 14h.01"/><path d="M16 14h.01"/><path d="M8 18h.01"/><path d="M12 18h.01"/></svg>
</div>
<h3 class="feature-card__title">جدولة وحجوزات</h3>
<p class="feature-card__text">تقويم كامل لجدول حمام السباحة. فترات للاعضاء وفترات للتدريب وفترات للصيانة. حجز الحارات لفرق السباحة والتمارين الخاصة. لا تعارض في المواعيد.</p>
</div>
<div class="feature-card" data-reveal="600">
<div class="feature-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 12V4"/><path d="M18 12V4"/><path d="M6 20v-4"/><path d="M18 20v-4"/><path d="M2 16c2-2 4-2 6 0s4 2 6 0 4-2 6 0"/><path d="M2 12c2-2 4-2 6 0s4 2 6 0 4-2 6 0"/></svg>
</div>
<h3 class="feature-card__title">ادارة الحارات</h3>
<p class="feature-card__text">تعريف حارات حمام السباحة وتخصيص كل حارة لنشاط محدد. حارة للسباحة الحرة وحارة للتدريب وحارة للاطفال. مراقبة اشغال كل حارة وتوزيع المستخدمين بشكل آمن.</p>
</div>
</div>
</div>
</section>
<!-- Screenshot Section: Real-time Occupancy -->
<section class="section">
<div class="container">
<div class="module-detail__screenshot-section" data-reveal>
<div class="module-detail__text">
<h3>مراقبة السعة والتحكم لحظيا</h3>
<p>شاشة مركزية تعرض عدد المتواجدين في حمام السباحة في هذه اللحظة مقارنة بالسعة القصوى. عند الاقتراب من الحد الاقصى يتغير اللون تلقائيا للتنبيه. عند الوصول للسعة يتم منع اي دخول جديد حتى خروج شخص.</p>
<div class="module-detail__list">
<div class="module-detail__list-item">عداد تصاعدي وتنازلي بالدخول والخروج</div>
<div class="module-detail__list-item">تنبيه عند 80% من السعة</div>
<div class="module-detail__list-item">منع دخول اوتوماتيكي عند اكتمال السعة</div>
<div class="module-detail__list-item">سجل يومي لاوقات الذروة والاشغال</div>
<div class="module-detail__list-item">احصائيات اسبوعية وشهرية لعدد الزوار</div>
</div>
</div>
<div class="screenshot screenshot--framed">
<img src="screenshots/facilities/pool.png" alt="شاشة مراقبة السعة اللحظية لحمام السباحة" loading="lazy">
</div>
</div>
</div>
</section>
<!-- Screenshot Section: Tickets & List -->
<section class="section">
<div class="container">
<div class="module-detail__screenshot-section module-detail__screenshot-section--reverse" data-reveal>
<div class="screenshot screenshot--framed">
<img src="screenshots/facilities/list.png" alt="قائمة التذاكر والدخلات اليومية" loading="lazy">
</div>
<div class="module-detail__text">
<h3>سجل رقمي شامل لكل دخلة</h3>
<p>كل عملية دخول لحمام السباحة مسجلة بالاسم والتاريخ والوقت ونوع التذكرة والسعر. لا توجد دخلة واحدة بدون سجل. تقارير يومية واسبوعية وشهرية لكل العمليات مع مقارنة بين الايرادات المتوقعة والمحصلة.</p>
<div class="module-detail__list">
<div class="module-detail__list-item">سجل كامل لكل دخلة بالتوقيت الدقيق</div>
<div class="module-detail__list-item">فلترة بالتاريخ ونوع التذكرة والعضو</div>
<div class="module-detail__list-item">ربط اوتوماتيكي بالخزينة والتقارير المالية</div>
<div class="module-detail__list-item">تصدير البيانات لمراجعة مجلس الادارة</div>
</div>
</div>
</div>
</div>
</section>
<!-- Screenshot Section: Carnets -->
<section class="section">
<div class="container">
<div class="module-detail__screenshot-section" data-reveal>
<div class="module-detail__text">
<h3>نظام الكرنيهات المتقدم</h3>
<p>بديل مثالي للتذاكر اليومية. العضو يشتري كرنيه بعدد دخلات محدد ويستخدمه على مدار الموسم. كل استخدام يخصم دخلة واحدة مع تسجيل التاريخ والوقت. الرصيد المتبقي ظاهر دائما لمنع اي خلاف.</p>
<div class="module-detail__list">
<div class="module-detail__list-item">انواع متعددة من الكرنيهات بعدد دخلات مختلفة</div>
<div class="module-detail__list-item">تسعير مرن حسب فئة العضو والسن</div>
<div class="module-detail__list-item">خصم اوتوماتيكي عند كل دخول</div>
<div class="module-detail__list-item">تنبيه عند قرب انتهاء الرصيد</div>
<div class="module-detail__list-item">تقارير استخدام الكرنيهات واكثر الاعضاء استهلاكا</div>
</div>
</div>
<div class="screenshot screenshot--framed">
<img src="screenshots/carnets/list.png" alt="نظام الكرنيهات وادارة الارصدة" loading="lazy">
</div>
</div>
</div>
</section>
<!-- Screenshot Section: Guest Entries -->
<section class="section">
<div class="container">
<div class="module-detail__screenshot-section module-detail__screenshot-section--reverse" data-reveal>
<div class="screenshot screenshot--framed">
<img src="screenshots/carnets/guest-entries.png" alt="ادارة دخول الضيوف" loading="lazy">
</div>
<div class="module-detail__text">
<h3>التحكم في دخول الضيوف</h3>
<p>مشكلة الضيوف من اكبر مشاكل حمامات السباحة في مصر. النظام يضع قواعد واضحة: عدد محدد من الضيوف لكل عضو، تسعير منفصل، سجل كامل لكل ضيف ومن استضافه. لا فوضى ولا اعتراضات.</p>
<div class="module-detail__list">
<div class="module-detail__list-item">حد اقصى لعدد الضيوف لكل عضو يوميا وشهريا</div>
<div class="module-detail__list-item">تسعير مختلف للضيوف عن الاعضاء</div>
<div class="module-detail__list-item">ربط كل ضيف بالعضو المسؤول عنه</div>
<div class="module-detail__list-item">تقرير شامل لاكثر الاعضاء استضافة</div>
<div class="module-detail__list-item">امكانية حظر الاستضافة لاعضاء محددين</div>
</div>
</div>
</div>
</div>
</section>
<!-- Screenshot Section: Calendar & Reservations -->
<section class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">الحجوزات والجدولة</span>
<h2 class="section-header__title">تقويم ذكي لادارة حمام السباحة</h2>
<p class="section-header__desc">تنظيم فترات الاستخدام والصيانة والتدريب في تقويم مرئي واضح. لا تعارض في المواعيد ولا ارتباك في التنظيم.</p>
</div>
<div class="gallery gallery--2col" data-reveal>
<div class="screenshot screenshot--framed">
<img src="screenshots/facilities/calendar.png" alt="تقويم حجوزات حمام السباحة" loading="lazy">
</div>
<div class="screenshot screenshot--framed">
<img src="screenshots/facilities/reservations-list.png" alt="قائمة الحجوزات والفترات" loading="lazy">
</div>
</div>
</div>
</section>
<!-- How it Works - Workflow -->
<section class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">كيف يعمل النظام</span>
<h2 class="section-header__title">رحلة العضو من الدخول حتى الخروج</h2>
<p class="section-header__desc">كل خطوة مسجلة ومحسوبة. من لحظة وصول العضو لبوابة حمام السباحة حتى مغادرته.</p>
</div>
<div class="workflow" data-reveal>
<div class="workflow__step">وصول العضو للبوابة</div>
<span class="workflow__arrow">&#8592;</span>
<div class="workflow__step">التحقق من الاشتراك او التذكرة</div>
<span class="workflow__arrow">&#8592;</span>
<div class="workflow__step">فحص السعة المتاحة</div>
<span class="workflow__arrow">&#8592;</span>
<div class="workflow__step">تسجيل الدخول</div>
<span class="workflow__arrow">&#8592;</span>
<div class="workflow__step">تحديث العداد</div>
<span class="workflow__arrow">&#8592;</span>
<div class="workflow__step">تسجيل الخروج</div>
</div>
<div class="module-detail__features" data-reveal>
<div class="feature-card">
<div class="feature-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg>
</div>
<h3 class="feature-card__title">عند الدخول</h3>
<p class="feature-card__text">يتم التحقق من صلاحية العضوية او التذكرة او رصيد الكرنيه. يتم فحص السعة الحالية. اذا كانت متاحة يتم تسجيل الدخول وتحديث العداد وخصم دخلة من الكرنيه ان وجد. كل شيء في ثوان.</p>
</div>
<div class="feature-card">
<div class="feature-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 20c2-2 4-2 6 0s4 2 6 0 4-2 6 0"/><path d="M2 16c2-2 4-2 6 0s4 2 6 0 4-2 6 0"/><path d="M2 12c2-2 4-2 6 0s4 2 6 0 4-2 6 0"/></svg>
</div>
<h3 class="feature-card__title">اثناء التواجد</h3>
<p class="feature-card__text">العداد يعكس العدد الفعلي للمتواجدين. ادارة حمام السباحة ترى في اي لحظة نسبة الاشغال. اذا اقتربت السعة من الحد الاقصى يتم ايقاف الدخول الجديد تلقائيا حتى خروج احد.</p>
</div>
<div class="feature-card">
<div class="feature-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
</div>
<h3 class="feature-card__title">عند الخروج</h3>
<p class="feature-card__text">يتم تسجيل وقت الخروج وحساب مدة التواجد. العداد ينخفض تلقائيا. يتم فتح المجال لدخول شخص جديد. كل هذه البيانات متاحة في التقارير لمعرفة اوقات الذروة وسلوك الاستخدام.</p>
</div>
</div>
</div>
</section>
<!-- Comparison / Differentiation -->
<section class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">لماذا El-Captain</span>
<h2 class="section-header__title">مقارنة مع البدائل المتاحة</h2>
<p class="section-header__desc">لا يوجد نظام ERP اخر في مصر يقدم وحدة متخصصة لادارة حمامات السباحة بهذا المستوى من التفصيل.</p>
</div>
<div data-reveal>
<table class="comparison-table">
<thead>
<tr>
<th>الميزة</th>
<th>El-Captain</th>
<th>انظمة ERP عامة</th>
<th>Excel / ورقي</th>
</tr>
</thead>
<tbody>
<tr>
<td>حصر متواجدين لحظي</td>
<td class="check">متوفر</td>
<td class="cross">غير متوفر</td>
<td class="cross">مستحيل</td>
</tr>
<tr>
<td>مراقبة السعة القصوى</td>
<td class="check">اوتوماتيكي</td>
<td class="cross">غير متوفر</td>
<td class="cross">يدوي بالتقدير</td>
</tr>
<tr>
<td>تذاكر يومية رقمية</td>
<td class="check">متوفر</td>
<td class="cross">يحتاج تخصيص</td>
<td class="cross">ورقية فقط</td>
</tr>
<tr>
<td>نظام كرنيهات</td>
<td class="check">مدمج بالكامل</td>
<td class="cross">غير متوفر</td>
<td class="cross">دفتر يدوي</td>
</tr>
<tr>
<td>ادارة الضيوف</td>
<td class="check">محكم بقواعد</td>
<td class="cross">غير متوفر</td>
<td class="cross">بدون ضوابط</td>
</tr>
<tr>
<td>حجز الحارات</td>
<td class="check">تقويم مرئي</td>
<td class="cross">غير متوفر</td>
<td class="cross">غير ممكن</td>
</tr>
<tr>
<td>تقارير اشغال وايرادات</td>
<td class="check">لحظية وشاملة</td>
<td class="cross">عامة وغير متخصصة</td>
<td class="cross">يدوية ومتاخرة</td>
</tr>
<tr>
<td>ربط بالعضويات والمالية</td>
<td class="check">تلقائي</td>
<td class="cross">يحتاج تطوير</td>
<td class="cross">منفصل تماما</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- Quote Block -->
<section class="section">
<div class="container">
<div class="quote-block" data-reveal>
<p class="quote-block__text">ادارة حمام السباحة بدون نظام رقمي هي مخاطرة بسلامة الاعضاء وخسارة يومية في الايرادات. كل يوم بدون حصر لحظي هو يوم قد يحدث فيه حادث بسبب تجاوز السعة، او تسرب مالي بسبب غياب الرقابة.</p>
<span class="quote-block__source">واقع يومي في اغلب الاندية الرياضية في مصر</span>
</div>
</div>
</section>
<!-- CTA -->
<section class="cta-section section">
<div class="container">
<div class="cta-section__content" data-reveal>
<h2 class="cta-section__title">حمام السباحة يستحق نظام يحميه</h2>
<p class="cta-section__desc">
لا تنتظر حتى يحدث حادث او تكتشف فجوة مالية كبيرة.
El-Captain يعطيك رؤية كاملة وتحكم حقيقي في حمام السباحة من اليوم الاول.
</p>
<div class="cta-section__actions">
<a href="contact.html" class="btn btn--primary btn--large">احجز عرض تجريبي مجاني</a>
<a href="features.html" class="btn btn--secondary btn--large">تعرف على باقي الوحدات</a>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer__grid">
<div class="footer__brand">
<div class="footer__brand-name">El-Captain</div>
<p class="footer__brand-desc">نظام ادارة متكامل مصمم خصيصا للاندية الرياضية والمنشآت في مصر. يغطي كل العمليات من العضويات حتى المحاسبة.</p>
</div>
<div>
<h4 class="footer__col-title">الوحدات</h4>
<a href="members.html" class="footer__link">العضويات</a>
<a href="sports.html" class="footer__link">الانشطة الرياضية</a>
<a href="pool.html" class="footer__link">حمامات السباحة</a>
<a href="finance.html" class="footer__link">المالية</a>
<a href="features.html" class="footer__link">كل المزايا</a>
</div>
<div>
<h4 class="footer__col-title">النظام</h4>
<a href="features.html#hr" class="footer__link">الموارد البشرية</a>
<a href="features.html#inventory" class="footer__link">المخازن</a>
<a href="features.html#reports" class="footer__link">التقارير</a>
<a href="features.html#mobile" class="footer__link">التطبيقات</a>
</div>
<div>
<h4 class="footer__col-title">تواصل</h4>
<a href="contact.html" class="footer__link">اطلب عرض</a>
<a href="contact.html" class="footer__link">الدعم الفني</a>
</div>
</div>
<div class="footer__bottom">
<span>El-Captain ERP System</span>
<span>نظام ادارة الاندية الرياضية</span>
</div>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>
public/sports.html 0 → 100644
View file @ 8c142ce1
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>الانشطة الرياضية - El-Captain</title>
<meta name="description" content="ادارة الاكاديميات الرياضية والمجموعات التدريبية والمدربين والحضور وكروت اللاعبين. نظام El-Captain يغطي كل تفاصيل النشاط الرياضي في ناديك.">
<link rel="stylesheet" href="css/tokens.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/components.css">
<link rel="stylesheet" href="css/pages.css">
</head>
<body>
<!-- Navigation -->
<nav class="nav" aria-label="التنقل الرئيسي">
<div class="container nav__inner">
<a href="/" class="nav__logo">
<span class="nav__logo-mark">EC</span>
<span>El-Captain</span>
</a>
<div class="nav__links" id="navLinks">
<a href="/" class="nav__link">الرئيسية</a>
<a href="features.html" class="nav__link">المزايا</a>
<a href="sports.html" class="nav__link nav__link--active">الانشطة الرياضية</a>
<a href="pool.html" class="nav__link">حمامات السباحة</a>
<a href="members.html" class="nav__link">العضويات</a>
<a href="finance.html" class="nav__link">المالية</a>
<a href="contact.html" class="nav__cta">تواصل معنا</a>
</div>
<button class="nav__toggle" aria-label="فتح القائمة" aria-expanded="false" aria-controls="navLinks">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M3 12h18M3 6h18M3 18h18"/>
</svg>
</button>
</div>
</nav>
<!-- Module Hero -->
<section class="module-hero section">
<div class="container">
<div class="breadcrumb" data-reveal>
<a href="/">الرئيسية</a>
<span class="breadcrumb__separator">/</span>
<span>الانشطة الرياضية</span>
</div>
<div class="module-hero__content" data-reveal>
<h1 class="module-hero__title">ادارة الاكاديميات الرياضية بالكامل</h1>
<p class="module-hero__desc">
من تسجيل اللاعب في النشاط حتى متابعة حضوره اليومي وتقييم مستواه.
نظام متكامل يربط المدرب والاداري وولي الامر في منظومة واحدة.
</p>
<div class="hero__actions">
<a href="contact.html" class="btn btn--primary btn--large">اطلب عرض تجريبي</a>
<a href="#features" class="btn btn--secondary btn--large">استكشف المزايا</a>
</div>
</div>
</div>
</section>
<!-- Academy & Disciplines -->
<section class="section" id="features">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">الاكاديميات والالعاب</span>
<h2 class="section-header__title">انشطة رياضية متعددة في نظام واحد</h2>
<p class="section-header__desc">سباحة، كرة قدم، كاراتيه، جمباز، تنس، وغيرها. كل لعبة لها اعداداتها الخاصة ومجموعاتها ومدربيها وجداولها.</p>
</div>
<div class="module-detail__screenshot-section" data-reveal>
<div class="screenshot screenshot--framed">
<img src="screenshots/sports/disciplines.png" alt="ادارة الالعاب والتخصصات الرياضية" loading="lazy">
</div>
<div class="module-detail__text">
<h3>تصنيف مرن للالعاب الرياضية</h3>
<p>انشئ اي عدد من الانشطة الرياضية وحدد لكل نشاط خصائصه من سعة المجموعات والفئات العمرية والرسوم والمدربين المتاحين.</p>
<div class="module-detail__list">
<div class="module-detail__list-item">تعريف انشطة رياضية غير محدودة</div>
<div class="module-detail__list-item">تحديد الفئات العمرية لكل نشاط</div>
<div class="module-detail__list-item">ربط الرسوم والاشتراكات بكل نشاط</div>
<div class="module-detail__list-item">تصنيف الانشطة حسب النوع والمستوى</div>
<div class="module-detail__list-item">اعدادات مستقلة لكل لعبة</div>
</div>
</div>
</div>
</div>
</section>
<!-- Activities Overview -->
<section class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">شاشة الانشطة</span>
<h2 class="section-header__title">عرض شامل لكل الانشطة الجارية</h2>
<p class="section-header__desc">لوحة واحدة تعرض جميع الانشطة الرياضية النشطة مع احصائيات اللاعبين والمجموعات والمدربين لكل نشاط.</p>
</div>
<div class="module-detail__screenshot-section--reverse" style="display:grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-2xl); align-items: center;" data-reveal>
<div class="module-detail__text">
<h3>متابعة لحظية للاكاديميات</h3>
<p>شاشة مركزية تعرض حالة كل اكاديمية: عدد اللاعبين المسجلين، المجموعات النشطة، نسب الحضور، والايرادات المحصلة.</p>
<div class="module-detail__list">
<div class="module-detail__list-item">عدد اللاعبين المسجلين في كل نشاط</div>
<div class="module-detail__list-item">نسب الحضور الاسبوعية والشهرية</div>
<div class="module-detail__list-item">حالة الاشتراكات والمتاخرات</div>
<div class="module-detail__list-item">تنبيهات الطاقة الاستيعابية</div>
</div>
</div>
<div class="screenshot screenshot--framed">
<img src="screenshots/sports/activities.png" alt="شاشة عرض الانشطة الرياضية" loading="lazy">
</div>
</div>
</div>
</section>
<!-- Training Groups & Scheduling -->
<section class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">المجموعات التدريبية</span>
<h2 class="section-header__title">تنظيم المجموعات وجداول التدريب</h2>
<p class="section-header__desc">قسم اللاعبين الى مجموعات حسب المستوى والسن، وحدد جدول تدريب كل مجموعة بمواعيد ثابتة وملاعب مخصصة.</p>
</div>
<div class="module-detail__screenshot-section" data-reveal>
<div class="screenshot screenshot--framed">
<img src="screenshots/sports/groups.png" alt="ادارة المجموعات التدريبية" loading="lazy">
</div>
<div class="module-detail__text">
<h3>مجموعات ذكية بجداول مرنة</h3>
<p>كل مجموعة لها مدربها وجدولها ومكانها. النظام يمنع التعارضات ويتابع السعة تلقائيا.</p>
<div class="module-detail__list">
<div class="module-detail__list-item">انشاء مجموعات بسعة محددة</div>
<div class="module-detail__list-item">جدول اسبوعي لكل مجموعة</div>
<div class="module-detail__list-item">ربط المجموعة بملعب او صالة محددة</div>
<div class="module-detail__list-item">نقل اللاعبين بين المجموعات</div>
<div class="module-detail__list-item">كشف التعارضات في المواعيد</div>
<div class="module-detail__list-item">تقسيم حسب الفئة العمرية والمستوى</div>
</div>
</div>
</div>
</div>
</section>
<!-- Coach Management -->
<section class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">ادارة المدربين</span>
<h2 class="section-header__title">ملف كامل لكل مدرب</h2>
<p class="section-header__desc">سجل المدربين بكل تفاصيلهم: التخصصات، المجموعات المسندة، الجداول، والتقييمات.</p>
</div>
<div class="module-detail__screenshot-section--reverse" style="display:grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-2xl); align-items: center;" data-reveal>
<div class="module-detail__text">
<h3>منظومة متكاملة للمدربين</h3>
<p>كل مدرب له ملف يحتوي على تخصصاته ومجموعاته وجدول عمله. ربط مباشر مع تطبيق المدرب لتسجيل الحضور وارسال التقييمات.</p>
<div class="module-detail__list">
<div class="module-detail__list-item">ملف تعريفي بالمؤهلات والشهادات</div>
<div class="module-detail__list-item">اسناد مجموعات تدريبية لكل مدرب</div>
<div class="module-detail__list-item">جدول اسبوعي تلقائي بناء على المجموعات</div>
<div class="module-detail__list-item">تطبيق محمول خاص بالمدرب</div>
<div class="module-detail__list-item">تقييم اداء المدربين</div>
</div>
</div>
<div class="screenshot screenshot--framed">
<img src="screenshots/sports/coaches.png" alt="ادارة المدربين" loading="lazy">
</div>
</div>
</div>
</section>
<!-- Attendance Tracking -->
<section class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">الحضور والغياب</span>
<h2 class="section-header__title">تسجيل حضور لحظي عبر تطبيق المدرب</h2>
<p class="section-header__desc">المدرب يسجل الحضور من هاتفه مباشرة. ولي الامر يستلم اشعار فوري. الادارة ترى التقارير لحظيا.</p>
</div>
<div class="module-detail__screenshot-section" data-reveal>
<div class="screenshot screenshot--framed">
<img src="screenshots/sports/attendance.png" alt="شاشة تسجيل الحضور" loading="lazy">
</div>
<div class="module-detail__text">
<h3>حضور رقمي بدون ورق</h3>
<p>انتهى زمن الكشوف الورقية. كل حصة تدريبية يتم تسجيل حضورها الكترونيا مع اشعارات فورية لاولياء الامور.</p>
<div class="module-detail__list">
<div class="module-detail__list-item">تسجيل الحضور من تطبيق المدرب</div>
<div class="module-detail__list-item">اشعار فوري لولي الامر عند الحضور والغياب</div>
<div class="module-detail__list-item">تقارير حضور يومية واسبوعية وشهرية</div>
<div class="module-detail__list-item">تنبيهات للغياب المتكرر</div>
<div class="module-detail__list-item">ربط الحضور بصلاحية الاشتراك</div>
<div class="module-detail__list-item">سجل تاريخي كامل لكل لاعب</div>
</div>
</div>
</div>
</div>
</section>
<!-- Player Cards & Registration -->
<section class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">كروت اللاعبين</span>
<h2 class="section-header__title">بطاقة تعريف لكل لاعب</h2>
<p class="section-header__desc">كل لاعب مسجل يحصل على كارت يحتوي على بياناته ونشاطه ومجموعته. يستخدم في البوابات وتسجيل الحضور.</p>
</div>
<div class="gallery gallery--2col" data-reveal>
<div class="screenshot screenshot--framed">
<img src="screenshots/sports/list.png" alt="قائمة اللاعبين المسجلين" loading="lazy">
</div>
<div class="screenshot screenshot--framed">
<img src="screenshots/sports/coaching.png" alt="شاشة التدريب وبيانات اللاعبين" loading="lazy">
</div>
</div>
<div class="module-detail__features" style="margin-top: var(--space-2xl);" data-reveal>
<div class="feature-card">
<div class="feature-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
</div>
<h3 class="feature-card__title">ملف شامل للاعب</h3>
<p class="feature-card__text">بيانات شخصية وصحية وبيانات ولي الامر ورقم الطوارئ. صورة شخصية وتاريخ التسجيل ومسار الانشطة.</p>
</div>
<div class="feature-card">
<div class="feature-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M7 15h0M2 9.5h20"/></svg>
</div>
<h3 class="feature-card__title">كارت تعريفي</h3>
<p class="feature-card__text">بطاقة مطبوعة او رقمية تحتوي على اسم اللاعب والنشاط والمجموعة وصلاحية الاشتراك وباركود للبوابات.</p>
</div>
<div class="feature-card">
<div class="feature-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
</div>
<h3 class="feature-card__title">ربط بولي الامر</h3>
<p class="feature-card__text">كل لاعب مرتبط بحساب ولي امره. ولي الامر يستلم اشعارات الحضور والمدفوعات والتقييمات عبر التطبيق.</p>
</div>
</div>
</div>
</section>
<!-- Gate Control -->
<section class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">البوابات والتحكم</span>
<h2 class="section-header__title">تحكم في الدخول والخروج</h2>
<p class="section-header__desc">ربط مع بوابات النادي لمنع دخول غير المشتركين والتحقق من صلاحية الاشتراك لحظيا.</p>
</div>
<div class="module-detail__screenshot-section--reverse" style="display:grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-2xl); align-items: center;" data-reveal>
<div class="module-detail__text">
<h3>بوابة ذكية مربوطة بالنظام</h3>
<p>عند مرور اللاعب من البوابة، النظام يتحقق من صلاحية اشتراكه ونشاطه وموعد تدريبه قبل السماح بالدخول.</p>
<div class="module-detail__list">
<div class="module-detail__list-item">التحقق التلقائي من صلاحية الاشتراك</div>
<div class="module-detail__list-item">منع الدخول للاشتراكات المنتهية</div>
<div class="module-detail__list-item">تسجيل وقت الدخول والخروج</div>
<div class="module-detail__list-item">تقارير الدخول اليومية</div>
<div class="module-detail__list-item">تنبيهات امنية للمحاولات المرفوضة</div>
</div>
</div>
<div class="screenshot screenshot--framed">
<img src="screenshots/sports/gate.png" alt="نظام التحكم في البوابات" loading="lazy">
</div>
</div>
</div>
</section>
<!-- Locker Management -->
<section class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">اللوكرات</span>
<h2 class="section-header__title">ادارة خزائن اللاعبين</h2>
<p class="section-header__desc">تخصيص خزائن شخصية للاعبين مع تتبع حالة كل خزانة ومواعيد الحجز والاسترداد.</p>
</div>
<div class="module-detail__screenshot-section" data-reveal>
<div class="screenshot screenshot--framed">
<img src="screenshots/sports/lockers.png" alt="ادارة اللوكرات وخزائن اللاعبين" loading="lazy">
</div>
<div class="module-detail__text">
<h3>نظام حجز وتخصيص الخزائن</h3>
<p>كل لاعب يمكنه حجز خزانة شخصية. النظام يتتبع حالة كل خزانة ويدير التأمين والاسترداد تلقائيا.</p>
<div class="module-detail__list">
<div class="module-detail__list-item">خريطة مرئية لحالة الخزائن</div>
<div class="module-detail__list-item">حجز وتخصيص تلقائي</div>
<div class="module-detail__list-item">ادارة التأمين والاسترداد</div>
<div class="module-detail__list-item">تنبيهات الخزائن المنتهية</div>
<div class="module-detail__list-item">تقارير الاشغال والتوافر</div>
</div>
</div>
</div>
</div>
</section>
<!-- Player Journey Workflow -->
<section class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">رحلة اللاعب</span>
<h2 class="section-header__title">من التسجيل حتى التدريب اليومي</h2>
<p class="section-header__desc">مسار واضح ومنظم لانضمام اي لاعب جديد لاي نشاط رياضي في النادي.</p>
</div>
<div class="workflow" data-reveal>
<div class="workflow__step">تقديم طلب الالتحاق</div>
<span class="workflow__arrow">&#8592;</span>
<div class="workflow__step">اختيار النشاط والمجموعة</div>
<span class="workflow__arrow">&#8592;</span>
<div class="workflow__step">سداد الاشتراك</div>
<span class="workflow__arrow">&#8592;</span>
<div class="workflow__step">اصدار كارت اللاعب</div>
<span class="workflow__arrow">&#8592;</span>
<div class="workflow__step">بدء التدريب</div>
<span class="workflow__arrow">&#8592;</span>
<div class="workflow__step">تسجيل الحضور يوميا</div>
</div>
<div class="module-detail__features" style="margin-top: var(--space-2xl);" data-reveal>
<div class="feature-card">
<div class="feature-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
</div>
<h3 class="feature-card__title">تسجيل الكتروني كامل</h3>
<p class="feature-card__text">ولي الامر يسجل ابنه من التطبيق او يحضر للنادي. البيانات تدخل مرة واحدة وتتوفر في كل مكان.</p>
</div>
<div class="feature-card">
<div class="feature-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
</div>
<h3 class="feature-card__title">ضوابط وصلاحيات</h3>
<p class="feature-card__text">النظام يتحقق من السن والشروط الصحية وسعة المجموعة قبل قبول التسجيل. لا تسجيل عشوائي.</p>
</div>
<div class="feature-card">
<div class="feature-card__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
</div>
<h3 class="feature-card__title">متابعة مستمرة</h3>
<p class="feature-card__text">بعد التسجيل، النظام يتابع الحضور والسداد والتقييمات. ولي الامر يستلم تقارير دورية عن مستوى ابنه.</p>
</div>
</div>
</div>
</section>
<!-- Bookings Screenshot -->
<section class="section">
<div class="container">
<div class="section-header" data-reveal>
<span class="section-header__tag">الحجوزات</span>
<h2 class="section-header__title">نظام حجوزات مرن</h2>
<p class="section-header__desc">حجز الملاعب والصالات والمرافق بجداول زمنية واضحة تمنع التعارضات وتضمن الاستغلال الامثل.</p>
</div>
<div class="screenshot screenshot--framed" data-reveal>
<img src="screenshots/sports/bookings.png" alt="نظام حجوزات الملاعب والصالات" loading="lazy">
</div>
</div>
</section>
<!-- CTA -->
<section class="cta-section section">
<div class="container">
<div class="cta-section__content" data-reveal>
<h2 class="cta-section__title">جاهز لتنظيم اكاديمياتك الرياضية؟</h2>
<p class="cta-section__desc">
لا تدير الانشطة الرياضية بكشوف ورقية ومكالمات هاتفية.
El-Captain يوفر لك نظام متكامل يربط الادارة بالمدربين واولياء الامور.
</p>
<div class="cta-section__actions">
<a href="contact.html" class="btn btn--primary btn--large">احجز عرض تجريبي مجاني</a>
<a href="features.html" class="btn btn--secondary btn--large">تعرف على باقي الوحدات</a>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer__grid">
<div class="footer__brand">
<div class="footer__brand-name">El-Captain</div>
<p class="footer__brand-desc">نظام ادارة متكامل مصمم خصيصا للاندية الرياضية والمنشآت في مصر. يغطي كل العمليات من العضويات حتى المحاسبة.</p>
</div>
<div>
<h4 class="footer__col-title">الوحدات</h4>
<a href="members.html" class="footer__link">العضويات</a>
<a href="sports.html" class="footer__link">الانشطة الرياضية</a>
<a href="pool.html" class="footer__link">حمامات السباحة</a>
<a href="finance.html" class="footer__link">المالية</a>
<a href="features.html" class="footer__link">كل المزايا</a>
</div>
<div>
<h4 class="footer__col-title">النظام</h4>
<a href="features.html#hr" class="footer__link">الموارد البشرية</a>
<a href="features.html#inventory" class="footer__link">المخازن</a>
<a href="features.html#reports" class="footer__link">التقارير</a>
<a href="features.html#mobile" class="footer__link">التطبيقات</a>
</div>
<div>
<h4 class="footer__col-title">تواصل</h4>
<a href="contact.html" class="footer__link">اطلب عرض</a>
<a href="contact.html" class="footer__link">الدعم الفني</a>
</div>
</div>
<div class="footer__bottom">
<span>El-Captain ERP System</span>
<span>نظام ادارة الاندية الرياضية</span>
</div>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment