Spaces:

mb672038
/

python-mastery-academy

Running

App Files Files Community

mb672038 commited on Dec 31, 2025

Commit

1fca5b4

verified ·

1 Parent(s): 35ed81e

پلتفرم آموزش حرفه‌ای پایتون

Browse files

با سیستم ثبت‌نام، ورود امن، داشبورد کاربری و دوره‌های آموزشی واقعی

🧱 معماری کلی

Full-Stack Web Application

Frontend: React + Vite + TailwindCSS

Backend: Node.js + Express

Database: MongoDB

Auth: JWT + Email Verification + Google Login

UI Style: Modern Dashboard (Professional)

🌐 زبان‌ها

🇮🇷 فارسی

🇬🇧 انگلیسی
(قابلیت تغییر زبان در سایت)

🔐 سیستم احراز هویت (Login / Register)
1️⃣ ثبت‌نام (Register)

کاربر:

ایمیل سایت

رمز عبور سایت

سپس:

ارسال کد تأیید به ایمیل

وارد کردن کد

فعال شدن حساب

⚠️ نکته امنیتی مهم
❌ سایت هرگز رمز ایمیل واقعی کاربر را نمی‌گیرد
✔️ فقط رمز مخصوص همین سایت

2️⃣ ورود (Login)

روش‌ها:

ورود با ایمیل + رمز سایت

ورود با Google Login (OAuth حرفه‌ای)

3️⃣ امنیت

رمزها هش شده (bcrypt)

توکن ورود: JWT

محافظت از مسیرها (Protected Routes)

🧑‍💻 داشبورد کاربری (Dashboard)

بعد از ورود، کاربر وارد داشبورد می‌شود که شامل:

پروفایل کاربر

کارت‌های دوره‌ها

درصد پیشرفت هر دوره

آخرین درس دیده‌شده

تغییر زبان

Dark / Light Mode

خروج از حساب

📚 بخش آموزش پایتون
ساختار آموزشی:

Python Basics

Variables & Data Types

Conditions & Loops

Functions

OOP

File Handling

Libraries

Mini Projects

Final Project

هر درس شامل:

توضیح مفهومی

مثال کدنویسی

تمرین

پروژه کوچک

🖥️ طراحی UI / UX

طراحی مدرن، تمیز، حرفه‌ای

Dashboard Style

Responsive (موبایل / لپ‌تاپ)

کارت‌ها (Cards)

Sidebar حرفه‌ای

فونت مناسب فارسی و انگلیسی

Files changed (6) hide show

README.md +8 -5
components/footer.js +176 -0
components/navbar.js +133 -0
index.html +215 -19
script.js +65 -0
style.css +50 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Python Mastery Academy
-emoji: 🦀
-colorFrom: green
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Python Mastery Academy 🐍
+colorFrom: gray
+colorTo: purple
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js ADDED Viewed

	@@ -0,0 +1,176 @@

+class CustomFooter extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    background-color: #1F2937;
+                    color: white;
+                    padding: 3rem 1rem;
+                }
+                .footer-container {
+                    max-width: 1200px;
+                    margin: 0 auto;
+                    display: grid;
+                    grid-template-columns: repeat(1, 1fr);
+                    gap: 2rem;
+                }
+                .footer-logo {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                    font-size: 1.5rem;
+                    font-weight: 700;
+                    margin-bottom: 1rem;
+                    color: white;
+                    text-decoration: none;
+                }
+                .footer-description {
+                    color: #D1D5DB;
+                    margin-bottom: 1.5rem;
+                    line-height: 1.6;
+                }
+                .social-links {
+                    display: flex;
+                    gap: 1rem;
+                }
+                .social-link {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    width: 40px;
+                    height: 40px;
+                    border-radius: 50%;
+                    background-color: #374151;
+                    color: white;
+                    transition: background-color 0.2s;
+                }
+                .social-link:hover {
+                    background-color: #3B82F6;
+                }
+                .footer-section-title {
+                    font-size: 1.125rem;
+                    font-weight: 600;
+                    margin-bottom: 1.5rem;
+                    color: white;
+                }
+                .footer-links {
+                    display: flex;
+                    flex-direction: column;
+                    gap: 0.75rem;
+                }
+                .footer-link {
+                    color: #D1D5DB;
+                    text-decoration: none;
+                    transition: color 0.2s;
+                }
+                .footer-link:hover {
+                    color: #3B82F6;
+                }
+                .footer-bottom {
+                    margin-top: 3rem;
+                    padding-top: 1.5rem;
+                    border-top: 1px solid #374151;
+                    text-align: center;
+                    color: #9CA3AF;
+                }
+                @media (min-width: 640px) {
+                    .footer-container {
+                        grid-template-columns: repeat(2, 1fr);
+                    }
+                }
+                @media (min-width: 1024px) {
+                    .footer-container {
+                        grid-template-columns: repeat(4, 1fr);
+                    }
+                }
+            </style>
+            <div class="footer-container">
+                <div class="footer-about">
+                    <a href="/" class="footer-logo">
+                        <i data-feather="code"></i>
+                        پایتون مستری
+                    </a>
+                    <p class="footer-description">
+                        پلتفرم تخصصی آموزش برنامه‌نویسی پایتون با متدهای روز دنیا و مربیان حرفه‌ای
+                    </p>
+                    <div class="social-links">
+                        <a href="#" class="social-link">
+                            <i data-feather="instagram"></i>
+                        </a>
+                        <a href="#" class="social-link">
+                            <i data-feather="twitter"></i>
+                        </a>
+                        <a href="#" class="social-link">
+                            <i data-feather="linkedin"></i>
+                        </a>
+                        <a href="#" class="social-link">
+                            <i data-feather="youtube"></i>
+                        </a>
+                    </div>
+                </div>
+                <div class="footer-links-section">
+                    <h3 class="footer-section-title">لینک‌های سریع</h3>
+                    <div class="footer-links">
+                        <a href="/" class="footer-link">صفحه اصلی</a>
+                        <a href="/courses" class="footer-link">دوره‌ها</a>
+                        <a href="/about" class="footer-link">درباره ما</a>
+                        <a href="/blog" class="footer-link">بلاگ</a>
+                        <a href="/contact" class="footer-link">تماس با ما</a>
+                    </div>
+                </div>
+                <div class="footer-links-section">
+                    <h3 class="footer-section-title">دوره‌ها</h3>
+                    <div class="footer-links">
+                        <a href="/course/python-basics" class="footer-link">پایتون مقدماتی</a>
+                        <a href="/course/python-oop" class="footer-link">برنامه‌نویسی شی‌گرا</a>
+                        <a href="/course/python-web" class="footer-link">توسعه وب با پایتون</a>
+                        <a href="/course/data-science" class="footer-link">علم داده با پایتون</a>
+                        <a href="/course/automation" class="footer-link">اتوماسیون با پایتون</a>
+                    </div>
+                </div>
+                <div class="footer-contact">
+                    <h3 class="footer-section-title">تماس با ما</h3>
+                    <div class="footer-links">
+                        <a href="mailto:info@pythonmastery.com" class="footer-link flex items-center gap-2">
+                            <i data-feather="mail" class="w-4 h-4"></i>
+                            info@pythonmastery.com
+                        </a>
+                        <a href="tel:+982122345678" class="footer-link flex items-center gap-2">
+                            <i data-feather="phone" class="w-4 h-4"></i>
+                            021-22345678
+                        </a>
+                        <div class="flex items-center gap-2 text-gray-300">
+                            <i data-feather="map-pin" class="w-4 h-4"></i>
+                            تهران، خیابان آزادی، دانشگاه صنعتی شریف
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="footer-bottom">
+                <p>© ۱۴۰۲ پایتون مستری. تمامی حقوق محفوظ است.</p>
+            </div>
+        `;
+    }
+}
+customElements.define('custom-footer', CustomFooter);

components/navbar.js ADDED Viewed

	@@ -0,0 +1,133 @@

+class CustomNavbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    width: 100%;
+                    position: sticky;
+                    top: 0;
+                    z-index: 50;
+                    background-color: white;
+                    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+                }
+                .navbar-container {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    padding: 1rem 2rem;
+                    max-width: 1400px;
+                    margin: 0 auto;
+                }
+                .logo {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                    font-weight: 700;
+                    font-size: 1.25rem;
+                    color: #3B82F6;
+                    text-decoration: none;
+                }
+                .nav-links {
+                    display: flex;
+                    gap: 1.5rem;
+                    align-items: center;
+                }
+                .nav-link {
+                    color: #4B5563;
+                    font-weight: 500;
+                    text-decoration: none;
+                    transition: color 0.2s;
+                }
+                .nav-link:hover {
+                    color: #3B82F6;
+                }
+                .auth-buttons {
+                    display: flex;
+                    gap: 1rem;
+                }
+                .login-btn {
+                    padding: 0.5rem 1rem;
+                    border-radius: 0.375rem;
+                    font-weight: 500;
+                    color: #3B82F6;
+                    border: 1px solid #3B82F6;
+                    text-decoration: none;
+                    transition: all 0.2s;
+                }
+                .login-btn:hover {
+                    background-color: #EFF6FF;
+                }
+                .register-btn {
+                    padding: 0.5rem 1rem;
+                    border-radius: 0.375rem;
+                    font-weight: 500;
+                    color: white;
+                    background-color: #3B82F6;
+                    text-decoration: none;
+                    transition: background-color 0.2s;
+                }
+                .register-btn:hover {
+                    background-color: #2563EB;
+                }
+                .mobile-menu-btn {
+                    display: none;
+                    background: none;
+                    border: none;
+                    cursor: pointer;
+                }
+                @media (max-width: 768px) {
+                    .nav-links, .auth-buttons {
+                        display: none;
+                    }
+                    .mobile-menu-btn {
+                        display: block;
+                    }
+                    .navbar-container {
+                        padding: 1rem;
+                    }
+                }
+            </style>
+            <div class="navbar-container">
+                <a href="/" class="logo">
+                    <i data-feather="code"></i>
+                    پایتون مستری
+                </a>
+                <div class="nav-links">
+                    <a href="/courses" class="nav-link">دوره‌ها</a>
+                    <a href="/about" class="nav-link">درباره ما</a>
+                    <a href="/blog" class="nav-link">بلاگ</a>
+                    <a href="/contact" class="nav-link">تماس با ما</a>
+                </div>
+                <div class="auth-buttons">
+                    <a href="/login" class="login-btn">ورود</a>
+                    <a href="/register" class="register-btn">ثبت‌نام</a>
+                </div>
+                <button class="mobile-menu-btn">
+                    <i data-feather="menu"></i>
+                </button>
+            </div>
+        `;
+    }
+}
+customElements.define('custom-navbar', CustomNavbar);

index.html CHANGED Viewed

@@ -1,19 +1,215 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en" dir="rtl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Python Mastery Academy | یادگیری حرفه‌ای پایتون</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#3B82F6',
+                        secondary: '#10B981',
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gray-50 font-sans">
+    <custom-navbar></custom-navbar>
+    <main class="container mx-auto px-4 py-8">
+        <!-- Hero Section -->
+        <section class="flex flex-col md:flex-row items-center justify-between gap-8 mb-16">
+            <div class="md:w-1/2">
+                <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
+                    <span class="text-primary">پلتفرم آموزش حرفه‌ای</span> پایتون
+                </h1>
+                <p class="text-lg text-gray-600 mb-8">
+                    یادگیری پایتون را با بهترین متدها و پروژه‌های واقعی شروع کنید. از مبتدی تا حرفه‌ای در کنار ما باشید.
+                </p>
+                <div class="flex flex-col sm:flex-row gap-4">
+                    <a href="/register" class="bg-primary hover:bg-primary-600 text-white px-6 py-3 rounded-lg font-medium text-center transition">
+                        شروع یادگیری
+                    </a>
+                    <a href="/courses" class="border border-primary text-primary px-6 py-3 rounded-lg font-medium text-center hover:bg-primary-50 transition">
+                        مشاهده دوره‌ها
+                    </a>
+                </div>
+            </div>
+            <div class="md:w-1/2">
+                <img src="http://static.photos/technology/1024x576/42" alt="Python Programming" class="rounded-xl shadow-lg w-full">
+            </div>
+        </section>
+        <!-- Features Section -->
+        <section class="mb-16">
+            <h2 class="text-3xl font-bold text-center text-gray-900 mb-12">چرا پایتون مستری؟</h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
+                    <div class="bg-primary-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">
+                        <i data-feather="code" class="text-primary w-6 h-6"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2">آموزش پروژه‌محور</h3>
+                    <p class="text-gray-600">یادگیری با انجام پروژه‌های واقعی و کاربردی در دنیای کار</p>
+                </div>
+                <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
+                    <div class="bg-secondary-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">
+                        <i data-feather="users" class="text-secondary w-6 h-6"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2">مربیان حرفه‌ای</h3>
+                    <p class="text-gray-600">همراهی با بهترین مربیان صنعت در طول مسیر یادگیری</p>
+                </div>
+                <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
+                    <div class="bg-primary-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">
+                        <i data-feather="award" class="text-primary w-6 h-6"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2">گواهینامه معتبر</h3>
+                    <p class="text-gray-600">دریافت مدرک معتبر پس از اتمام هر دوره</p>
+                </div>
+            </div>
+        </section>
+        <!-- Courses Preview -->
+        <section class="mb-16">
+            <div class="flex justify-between items-center mb-8">
+                <h2 class="text-3xl font-bold text-gray-900">دوره‌های آموزشی</h2>
+                <a href="/courses" class="text-primary hover:text-primary-600 font-medium flex items-center gap-2">
+                    مشاهده همه
+                    <i data-feather="arrow-left" class="w-4 h-4"></i>
+                </a>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                <!-- Course Card 1 -->
+                <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
+                    <img src="http://static.photos/technology/640x360/101" alt="Python Basics" class="w-full h-48 object-cover">
+                    <div class="p-6">
+                        <div class="flex justify-between items-start mb-2">
+                            <h3 class="text-xl font-bold">پایتون مقدماتی</h3>
+                            <span class="bg-primary-100 text-primary text-sm px-3 py-1 rounded-full">جدید</span>
+                        </div>
+                        <p class="text-gray-600 mb-4">آموزش اصول اولیه برنامه‌نویسی با پایتون برای شروع کار</p>
+                        <div class="flex justify-between items-center">
+                            <div class="flex items-center gap-1 text-yellow-500">
+                                <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                                <span>4.9</span>
+                            </div>
+                            <a href="/course/python-basics" class="text-primary hover:text-primary-600 font-medium">مشاهده دوره</a>
+                        </div>
+                    </div>
+                </div>
+                <!-- Course Card 2 -->
+                <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
+                    <img src="http://static.photos/technology/640x360/102" alt="Python OOP" class="w-full h-48 object-cover">
+                    <div class="p-6">
+                        <div class="flex justify-between items-start mb-2">
+                            <h3 class="text-xl font-bold">برنامه‌نویسی شی‌گرا</h3>
+                            <span class="bg-secondary-100 text-secondary text-sm px-3 py-1 rounded-full">پرفروش</span>
+                        </div>
+                        <p class="text-gray-600 mb-4">آموزش کامل مفاهیم شی‌گرایی در پایتون با مثال‌های عملی</p>
+                        <div class="flex justify-between items-center">
+                            <div class="flex items-center gap-1 text-yellow-500">
+                                <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                                <span>4.8</span>
+                            </div>
+                            <a href="/course/python-oop" class="text-primary hover:text-primary-600 font-medium">مشاهده دوره</a>
+                        </div>
+                    </div>
+                </div>
+                <!-- Course Card 3 -->
+                <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
+                    <img src="http://static.photos/technology/640x360/103" alt="Python Web" class="w-full h-48 object-cover">
+                    <div class="p-6">
+                        <div class="flex justify-between items-start mb-2">
+                            <h3 class="text-xl font-bold">توسعه وب با پایتون</h3>
+                            <span class="bg-primary-100 text-primary text-sm px-3 py-1 rounded-full">پرطرفدار</span>
+                        </div>
+                        <p class="text-gray-600 mb-4">یادگیری Django و Flask برای ساخت وب‌اپلیکیشن‌های حرفه‌ای</p>
+                        <div class="flex justify-between items-center">
+                            <div class="flex items-center gap-1 text-yellow-500">
+                                <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                                <span>4.7</span>
+                            </div>
+                            <a href="/course/python-web" class="text-primary hover:text-primary-600 font-medium">مشاهده دوره</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Testimonials -->
+        <section class="mb-16">
+            <h2 class="text-3xl font-bold text-center text-gray-900 mb-12">نظرات دانشجویان</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                <div class="bg-white p-6 rounded-xl shadow-md">
+                    <div class="flex items-center gap-4 mb-4">
+                        <img src="http://static.photos/people/200x200/1" alt="User" class="w-12 h-12 rounded-full object-cover">
+                        <div>
+                            <h4 class="font-semibold">محمد رضایی</h4>
+                            <div class="flex items-center gap-1 text-yellow-500">
+                                <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                                <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                                <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                                <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                                <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                            </div>
+                        </div>
+                    </div>
+                    <p class="text-gray-600">
+                        بهترین پلتفرم برای یادگیری پایتون. دوره‌ها بسیار کامل و پروژه‌محور هستند. بعد از اتمام دوره مقدماتی توانستم در شرکت معتبری استخدام شوم.
+                    </p>
+                </div>
+                <div class="bg-white p-6 rounded-xl shadow-md">
+                    <div class="flex items-center gap-4 mb-4">
+                        <img src="http://static.photos/people/200x200/2" alt="User" class="w-12 h-12 rounded-full object-cover">
+                        <div>
+                            <h4 class="font-semibold">فاطمه محمدی</h4>
+                            <div class="flex items-center gap-1 text-yellow-500">
+                                <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                                <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                                <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                                <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                                <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                            </div>
+                        </div>
+                    </div>
+                    <p class="text-gray-600">
+                        به عنوان کسی که هیچ پیشینه برنامه‌نویسی نداشتم، دوره‌های این سایت واقعا برای من مفید بود. پشتیبانی عالی و محتوای باکیفیت.
+                    </p>
+                </div>
+            </div>
+        </section>
+        <!-- CTA Section -->
+        <section class="bg-gradient-to-r from-primary to-secondary text-white rounded-xl p-8 md:p-12 mb-16">
+            <div class="max-w-3xl mx-auto text-center">
+                <h2 class="text-3xl md:text-4xl font-bold mb-4">آماده شروع یادگیری هستید؟</h2>
+                <p class="text-lg mb-8 opacity-90">
+                    همین حالا ثبت‌نام کنید و به جمع هزاران دانشجوی ما بپیوندید. اولین قدم برای تبدیل شدن به یک برنامه‌نویس حرفه‌ای را بردارید.
+                </p>
+                <a href="/register" class="bg-white text-primary hover:bg-gray-100 px-8 py-3 rounded-lg font-bold inline-block transition">
+                    ثبت‌نام رایگان
+                </a>
+            </div>
+        </section>
+    </main>
+    <custom-footer></custom-footer>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,65 @@

+// Main JavaScript File
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize animations
+    const animateElements = document.querySelectorAll('.fade-in, .slide-up');
+    animateElements.forEach((el, index) => {
+        el.style.animationDelay = `${index * 0.1}s`;
+    });
+    // Language switcher functionality
+    const langSwitcher = document.getElementById('lang-switcher');
+    if (langSwitcher) {
+        langSwitcher.addEventListener('change', function() {
+            const selectedLang = this.value;
+            // In a real app, this would redirect to the selected language version
+            console.log(`Language changed to: ${selectedLang}`);
+        });
+    }
+    // Theme switcher functionality
+    const themeSwitcher = document.getElementById('theme-switcher');
+    if (themeSwitcher) {
+        themeSwitcher.addEventListener('change', function() {
+            const selectedTheme = this.value;
+            document.body.classList.toggle('dark', selectedTheme === 'dark');
+            localStorage.setItem('theme', selectedTheme);
+        });
+        // Check for saved theme preference
+        const savedTheme = localStorage.getItem('theme') || 'light';
+        themeSwitcher.value = savedTheme;
+        if (savedTheme === 'dark') {
+            document.body.classList.add('dark');
+        }
+    }
+});
+// API functions
+async function fetchCourses() {
+    try {
+        const response = await fetch('/api/courses');
+        const data = await response.json();
+        return data;
+    } catch (error) {
+        console.error('Error fetching courses:', error);
+        return [];
+    }
+}
+// Form validation
+function validateForm(form) {
+    let isValid = true;
+    const inputs = form.querySelectorAll('input[required], textarea[required]');
+    inputs.forEach(input => {
+        if (!input.value.trim()) {
+            isValid = false;
+            input.classList.add('border-red-500');
+        } else {
+            input.classList.remove('border-red-500');
+        }
+    });
+    return isValid;
+}

style.css CHANGED Viewed

@@ -1,28 +1,60 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+/* Custom Styles */
+@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;200;300;400;500;600;700;800;900&display=swap');
 body {
+    font-family: 'Vazirmatn', sans-serif;
+}
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+}
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
 }
+::-webkit-scrollbar-thumb {
+    background: #3B82F6;
+    border-radius: 4px;
 }
+::-webkit-scrollbar-thumb:hover {
+    background: #2563EB;
 }
+/* Animation Classes */
+.fade-in {
+    animation: fadeIn 0.5s ease-in-out;
 }
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
 }
+.slide-up {
+    animation: slideUp 0.5s ease-out;
+}
+@keyframes slideUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+/* Responsive Adjustments */
+@media (max-width: 768px) {
+    .hero-text {
+        text-align: center;
+    }
+    .hero-buttons {
+        justify-content: center;
+    }
+}