Hugging Face's logo

Spaces:
Quioyy
/
undefined
Running

App Files Community
Quioyy commited on
Commit
95927c5
·
verified ·
1 Parent(s): e30a43b

Generate the complete, modular front-end code for the "Port Sudan Reads Initiative" website and its associated **Admin Dashboard Interface**.

Browse files

## Part 1: Core Requirements & Technology Stack

1. **Goal:** Create a modern, informational website to promote the initiative, collect donations, and provide project updates.
2. **Language & Direction:** The website must be fully in **Arabic (RTL - Right-to-Left)**.
3. **Technology Stack:** Use **HTML5, CSS3 (Flexbox/Grid), and Bootstrap 5** for a highly responsive and component-rich design.
4. **Styling & Scripting:** All public-facing styles must be in a single `main.css` file, and all public scripts in a single `main.js` file.

## Part 2: File Modularity for Backend Integration (HTML Partials)

The HTML must be broken down into individual, reusable component files to facilitate easy inclusion by a backend templating engine (e.g., Jinja, Blade).

| File Name | Content Description |
| :--- | :--- |
| **`_header.html`** | Top-level header structure, including the logo placeholder text ("بورتسودان تقرأ"). |
| **`_navbar.html`** | The full, responsive navigation bar with links: "الرئيسية," "عن المبادرة," "مكتباتنا," "كيف تدعم؟," "اتصل بنا," and the main **CTA Button ("تبرع الآن")**. |
| **`index.html`** | The main landing page file. It will contain the **Hero Section**, **About Section**, and **Support/Donation Section** content. |
| **`libraries.html`** | A dedicated page/component displaying the **Our Libraries** section (project cards with name, status, and description). |
| **`_footer.html`** | The full website footer (quick links, social media icons, copyright notice). |

---

## Part 3: Public Website Sections (RTL Implementation)

Ensure every section uses appropriate Arabic typography and RTL layouts.

* **Hero Section:** Primary headline ("بورتسودان تقرأ: حيث يبدأ نور المعرفة") and secondary CTA ("اكتشف المكتبات").
* **About Section:** Text explaining the vision and goals, plus a bulleted list of achievements/targets.
* **Support Section:** Displays donation methods (Icons for financial, book, and volunteer support) and includes a simple **Donation Form UI** (front-end only).

---

## Part 4: Admin Dashboard Interface

Create a separate, professional-looking dashboard UI that is distinct from the main website design.

### A. File Structure & Styling:

* Create a directory named **`admin/`**.
* **`admin/login.html`**: A clean, centered login form UI (Username, Password, Login Button).
* **`admin/dashboard.html`**: The main panel layout.
* **`css/admin.css`**: All dedicated dashboard styles (clean, dark/light palette, professional look).
* **`js/admin.js`**: All dashboard-specific scripts (sidebar toggles, table interaction placeholders).

### B. Dashboard Components:

* **Sidebar Navigation:** Must include links for: Dashboard Home, **Manage Libraries**, View Donations (Placeholder), Users/Admins (Placeholder), Settings, and Logout.
* **Main Content Area:**
* **Summary Cards (4):** Displaying key metrics (e.g., Total Libraries, Books Collected, Total Donations [Placeholder]).
* **"Manage Libraries" View:** A responsive **Table UI** listing libraries with columns: Name, Location, Status, Date Created, and two **Action Buttons (Edit, Delete)**.
* **"Add New Library" Form UI:** A simple form interface for adding a new project (Name, Location, Status Dropdown).

**Final Instructions:** The generated code must strictly adhere to the file paths and component separation outlined above, ensuring all Arabic text is correctly displayed and styled for RTL reading.

Files changed (12) hide show
  1. README.md +9 -5
  2. _footer.html +52 -0
  3. _header.html +11 -0
  4. _navbar.html +28 -0
  5. admin/dashboard.html +265 -0
  6. admin/login.html +34 -0
  7. css/admin.css +220 -0
  8. css/main.css +91 -0
  9. index.html +165 -19
  10. js/admin.js +156 -0
  11. js/main.js +85 -0
  12. libraries.html +115 -0
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Undefined
3
- emoji: 📚
4
- colorFrom: pink
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
 
1
  ---
2
+ title: undefined
3
+ colorFrom: gray
4
+ colorTo: red
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
_footer.html ADDED
@@ -0,0 +1,52 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <footer class="bg-dark text-white py-5">
2
+ <div class="container">
3
+ <div class="row">
4
+ <div class="col-lg-4 mb-4">
5
+ <h5 class="mb-3">بورتسودان تقرأ</h5>
6
+ <p class="text-muted">مبادرة مجتمعية تهدف لنشر ثقافة القراءة والمعرفة في جميع أنحاء بورتسودان.</p>
7
+ <div class="social-links">
8
+ <a href="#" class="text-white me-3"><i class="fab fa-facebook fa-lg"></i></a>
9
+ <a href="#" class="text-white me-3"><i class="fab fa-twitter fa-lg"></i></a>
10
+ <a href="#" class="text-white me-3"><i class="fab fa-instagram fa-lg"></i></a>
11
+ <a href="#" class="text-white"><i class="fab fa-linkedin fa-lg"></i></a>
12
+ </div>
13
+ </div>
14
+ <div class="col-lg-2 col-md-6 mb-4">
15
+ <h5 class="mb-3">روابط سريعة</h5>
16
+ <ul class="list-unstyled">
17
+ <li class="mb-2"><a href="index.html" class="text-muted text-decoration-none">الرئيسية</a></li>
18
+ <li class="mb-2"><a href="#about" class="text-muted text-decoration-none">عن المبادرة</a></li>
19
+ <li class="mb-2"><a href="libraries.html" class="text-muted text-decoration-none">مكتباتنا</a></li>
20
+ <li class="mb-2"><a href="#support" class="text-muted text-decoration-none">كيف تدعم؟</a></li>
21
+ </ul>
22
+ </div>
23
+ <div class="col-lg-3 col-md-6 mb-4">
24
+ <h5 class="mb-3">معلومات الاتصال</h5>
25
+ <ul class="list-unstyled">
26
+ <li class="mb-2 text-muted"><i class="fas fa-map-marker-alt me-2"></i>بورتسودان، السودان</li>
27
+ <li class="mb-2 text-muted"><i class="fas fa-phone me-2"></i>+249 123 456 789</li>
28
+ <li class="mb-2 text-muted"><i class="fas fa-envelope me-2"></i>info@portsudanreads.sd</li>
29
+ </ul>
30
+ </div>
31
+ <div class="col-lg-3 mb-4">
32
+ <h5 class="mb-3">النشرة البريدية</h5>
33
+ <form>
34
+ <div class="input-group">
35
+ <input type="email" class="form-control" placeholder="بريدك الإلكتروني" required>
36
+ <button class="btn btn-primary" type="submit">اشترك</button>
37
+ </div>
38
+ </form>
39
+ </div>
40
+ </div>
41
+ <hr class="my-4">
42
+ <div class="row align-items-center">
43
+ <div class="col-md-6">
44
+ <p class="text-muted mb-0">&copy; 2024 بورتسودان تقرأ. جميع الحقوق محفوظة.</p>
45
+ </div>
46
+ <div class="col-md-6 text-md-end">
47
+ <a href="#" class="text-muted text-decoration-none me-3">سياسة الخصوصية</a>
48
+ <a href="#" class="text-muted text-decoration-none">شروط الاستخدام</a>
49
+ </div>
50
+ </div>
51
+ </div>
52
+ </footer>
_header.html ADDED
@@ -0,0 +1,11 @@
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ar" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>بورتسودان تقرأ</title>
7
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
8
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
9
+ <link href="css/main.css" rel="stylesheet">
10
+ </head>
11
+ <body>
_navbar.html ADDED
@@ -0,0 +1,28 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm py-3">
2
+ <div class="container">
3
+ <a class="navbar-brand fw-bold text-primary fs-3" href="index.html">بورتسودان تقرأ</a>
4
+ <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
5
+ <span class="navbar-toggler-icon"></span>
6
+ </button>
7
+ <div class="collapse navbar-collapse" id="navbarNav">
8
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0">
9
+ <li class="nav-item">
10
+ <a class="nav-link active" href="index.html">الرئيسية</a>
11
+ </li>
12
+ <li class="nav-item">
13
+ <a class="nav-link" href="#about">عن المبادرة</a>
14
+ </li>
15
+ <li class="nav-item">
16
+ <a class="nav-link" href="libraries.html">مكتباتنا</a>
17
+ </li>
18
+ <li class="nav-item">
19
+ <a class="nav-link" href="#support">كيف تدعم؟</a>
20
+ </li>
21
+ <li class="nav-item">
22
+ <a class="nav-link" href="#contact">اتصل بنا</a>
23
+ </li>
24
+ </ul>
25
+ <a href="#donate" class="btn btn-primary px-4">تبرع الآن</a>
26
+ </div>
27
+ </div>
28
+ </nav>
admin/dashboard.html ADDED
@@ -0,0 +1,265 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ar" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>لوحة التحكم - بورتسودان تقرأ</title>
7
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
8
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
9
+ <link href="../css/admin.css" rel="stylesheet">
10
+ </head>
11
+ <body class="admin-dashboard">
12
+ <!-- Sidebar -->
13
+ <div class="sidebar">
14
+ <div class="sidebar-header">
15
+ <h4 class="text-white">
16
+ <i class="fas fa-book-reader me-2"></i>
17
+ بورتسودان تقرأ
18
+ </h4>
19
+ </div>
20
+ <ul class="sidebar-nav">
21
+ <li class="nav-item">
22
+ <a href="#" class="nav-link active">
23
+ <i class="fas fa-tachometer-alt me-2"></i>
24
+ الرئيسية
25
+ </a>
26
+ </li>
27
+ <li class="nav-item">
28
+ <a href="#manage-libraries" class="nav-link">
29
+ <i class="fas fa-book me-2"></i>
30
+ إدارة المكتبات
31
+ </a>
32
+ </li>
33
+ <li class="nav-item">
34
+ <a href="#" class="nav-link">
35
+ <i class="fas fa-donate me-2"></i>
36
+ التبرعات
37
+ </a>
38
+ </li>
39
+ <li class="nav-item">
40
+ <a href="#" class="nav-link">
41
+ <i class="fas fa-users me-2"></i>
42
+ المستخدمين
43
+ </a>
44
+ </li>
45
+ <li class="nav-item">
46
+ <a href="#" class="nav-link">
47
+ <i class="fas fa-cog me-2"></i>
48
+ الإعدادات
49
+ </a>
50
+ </li>
51
+ <li class="nav-item">
52
+ <a href="../index.html" class="nav-link text-danger">
53
+ <i class="fas fa-sign-out-alt me-2"></i>
54
+ تسجيل الخروج
55
+ </a>
56
+ </li>
57
+ </ul>
58
+ </div>
59
+
60
+ <!-- Main Content -->
61
+ <div class="main-content">
62
+ <!-- Top Bar -->
63
+ <nav class="topbar">
64
+ <div class="container-fluid">
65
+ <button class="sidebar-toggle">
66
+ <i class="fas fa-bars"></i>
67
+ </button>
68
+ <div class="d-flex align-items-center">
69
+ <span class="me-3">مرحباً، المدير</span>
70
+ <div class="dropdown">
71
+ <a href="#" class="dropdown-toggle" data-bs-toggle="dropdown">
72
+ <i class="fas fa-user-circle fa-2x"></i>
73
+ </a>
74
+ <ul class="dropdown-menu dropdown-menu-end">
75
+ <li><a class="dropdown-item" href="#">الملف الشخصي</a></li>
76
+ <li><a class="dropdown-item" href="#">الإعدادات</a></li>
77
+ <li><hr class="dropdown-divider"></li>
78
+ <li><a class="dropdown-item text-danger" href="../index.html">تسجيل الخروج</a></li>
79
+ </ul>
80
+ </div>
81
+ </div>
82
+ </div>
83
+ </nav>
84
+
85
+ <!-- Dashboard Content -->
86
+ <div class="container-fluid py-4">
87
+ <!-- Summary Cards -->
88
+ <div class="row mb-4">
89
+ <div class="col-xl-3 col-md-6 mb-4">
90
+ <div class="card summary-card">
91
+ <div class="card-body">
92
+ <div class="d-flex align-items-center">
93
+ <div class="flex-grow-1">
94
+ <h5 class="card-title">المكتبات</h5>
95
+ <h2 class="card-number">8</h2>
96
+ </div>
97
+ <div class="icon">
98
+ <i class="fas fa-book fa-2x text-primary"></i>
99
+ </div>
100
+ </div>
101
+ </div>
102
+ </div>
103
+ </div>
104
+ <div class="col-xl-3 col-md-6 mb-4">
105
+ <div class="card summary-card">
106
+ <div class="card-body">
107
+ <div class="d-flex align-items-center">
108
+ <div class="flex-grow-1">
109
+ <h5 class="card-title">الكتب المجمعة</h5>
110
+ <h2 class="card-number">42,350</h2>
111
+ </div>
112
+ <div class="icon">
113
+ <i class="fas fa-book-open fa-2x text-success"></i>
114
+ </div>
115
+ </div>
116
+ </div>
117
+ </div>
118
+ </div>
119
+ <div class="col-xl-3 col-md-6 mb-4">
120
+ <div class="card summary-card">
121
+ <div class="card-body">
122
+ <div class="d-flex align-items-center">
123
+ <div class="flex-grow-1">
124
+ <h5 class="card-title">إجمالي التبرعات</h5>
125
+ <h2 class="card-number">125,000 SDG</h2>
126
+ </div>
127
+ <div class="icon">
128
+ <i class="fas fa-money-bill-wave fa-2x text-warning"></i>
129
+ </div>
130
+ </div>
131
+ </div>
132
+ </div>
133
+ </div>
134
+ <div class="col-xl-3 col-md-6 mb-4">
135
+ <div class="card summary-card">
136
+ <div class="card-body">
137
+ <div class="d-flex align-items-center">
138
+ <div class="flex-grow-1">
139
+ <h5 class="card-title">المتطوعين</h5>
140
+ <h2 class="card-number">87</h2>
141
+ </div>
142
+ <div class="icon">
143
+ <i class="fas fa-users fa-2x text-info"></i>
144
+ </div>
145
+ </div>
146
+ </div>
147
+ </div>
148
+ </div>
149
+ </div>
150
+
151
+ <!-- Manage Libraries Section -->
152
+ <div id="manage-libraries" class="card">
153
+ <div class="card-header d-flex justify-content-between align-items-center">
154
+ <h5 class="mb-0">إدارة المكتبات</h5>
155
+ <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addLibraryModal">
156
+ <i class="fas fa-plus me-2"></i>إضافة مكتبة جديدة
157
+ </button>
158
+ </div>
159
+ <div class="card-body">
160
+ <div class="table-responsive">
161
+ <table class="table table-striped">
162
+ <thead>
163
+ <tr>
164
+ <th>اسم المكتبة</th>
165
+ <th>الموقع</th>
166
+ <th>الحالة</th>
167
+ <th>تاريخ الإنشاء</th>
168
+ <th>الإجراءات</th>
169
+ </tr>
170
+ </thead>
171
+ <tbody>
172
+ <tr>
173
+ <td>مكتبة الحي الأول</td>
174
+ <td>الحي الأول، بورتسودان</td>
175
+ <td><span class="badge bg-success">نشط</span></td>
176
+ <td>2023-03-15</td>
177
+ <td>
178
+ <button class="btn btn-sm btn-outline-primary me-1">تعديل</button>
179
+ <button class="btn btn-sm btn-outline-danger">حذف</button>
180
+ </td>
181
+ </tr>
182
+ <tr>
183
+ <td>مكتبة الميناء</td>
184
+ <td>منطقة الميناء، بورتسودان</td>
185
+ <td><span class="badge bg-success">نشط</span></td>
186
+ <td>2023-05-20</td>
187
+ <td>
188
+ <button class="btn btn-sm btn-outline-primary me-1">تعديل</button>
189
+ <button class="btn btn-sm btn-outline-danger">حذف</button>
190
+ </td>
191
+ </tr>
192
+ <tr>
193
+ <td>مكتبة الضاحية</td>
194
+ <td>الضاحية السكنية، بورتسودان</td>
195
+ <td><span class="badge bg-warning">قيد الإنشاء</span></td>
196
+ <td>2024-01-10</td>
197
+ <td>
198
+ <button class="btn btn-sm btn-outline-primary me-1">تعديل</button>
199
+ <button class="btn btn-sm btn-outline-danger">حذف</button>
200
+ </td>
201
+ </tr>
202
+ <tr>
203
+ <td>مكتبة الطلاب</td>
204
+ <td>وسط المد��نة، بورتسودان</td>
205
+ <td><span class="badge bg-success">نشط</span></td>
206
+ <td>2022-11-05</td>
207
+ <td>
208
+ <button class="btn btn-sm btn-outline-primary me-1">تعديل</button>
209
+ <button class="btn btn-sm btn-outline-danger">حذف</button>
210
+ </td>
211
+ </tr>
212
+ </tbody>
213
+ </table>
214
+ </div>
215
+ </div>
216
+ </div>
217
+ </div>
218
+ </div>
219
+
220
+ <!-- Add Library Modal -->
221
+ <div class="modal fade" id="addLibraryModal" tabindex="-1">
222
+ <div class="modal-dialog">
223
+ <div class="modal-content">
224
+ <div class="modal-header">
225
+ <h5 class="modal-title">إضافة مكتبة جديدة</h5>
226
+ <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
227
+ </div>
228
+ <div class="modal-body">
229
+ <form>
230
+ <div class="mb-3">
231
+ <label for="libraryName" class="form-label">اسم المكتبة</label>
232
+ <input type="text" class="form-control" id="libraryName" required>
233
+ </div>
234
+ <div class="mb-3">
235
+ <label for="libraryLocation" class="form-label">الموقع</label>
236
+ <input type="text" class="form-control" id="libraryLocation" required>
237
+ </div>
238
+ <div class="mb-3">
239
+ <label for="libraryStatus" class="form-label">الحالة</label>
240
+ <select class="form-select" id="libraryStatus" required>
241
+ <option value="">اختر الحالة</option>
242
+ <option value="active">نشط</option>
243
+ <option value="under-construction">قيد الإنشاء</option>
244
+ <option value="planned">مخطط</option>
245
+ <option value="digital">رقمية</option>
246
+ </select>
247
+ </div>
248
+ <div class="mb-3">
249
+ <label for="libraryDescription" class="form-label">الوصف</label>
250
+ <textarea class="form-control" id="libraryDescription" rows="3"></textarea>
251
+ </div>
252
+ </form>
253
+ </div>
254
+ <div class="modal-footer">
255
+ <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إلغاء</button>
256
+ <button type="button" class="btn btn-primary">حفظ المكتبة</button>
257
+ </div>
258
+ </div>
259
+ </div>
260
+ </div>
261
+
262
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
263
+ <script src="../js/admin.js"></script>
264
+ </body>
265
+ </html>
admin/login.html ADDED
@@ -0,0 +1,34 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ar" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>تسجيل الدخول - لوحة التحكم</title>
7
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
8
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
9
+ <link href="../css/admin.css" rel="stylesheet">
10
+ </head>
11
+ <body class="admin-login">
12
+ <div class="login-container">
13
+ <div class="login-card">
14
+ <div class="text-center mb-4">
15
+ <i class="fas fa-book-reader fa-3x text-primary mb-3"></i>
16
+ <h2 class="fw-bold">بورتسودان تقرأ</h2>
17
+ <p class="text-muted">لوحة التحكم - تسجيل الدخول</p>
18
+ </div>
19
+ <form>
20
+ <div class="mb-3">
21
+ <label for="username" class="form-label">اسم المستخدم</label>
22
+ <input type="text" class="form-control" id="username" placeholder="أدخل اسم المستخدم" required>
23
+ </div>
24
+ <div class="mb-4">
25
+ <label for="password" class="form-label">كلمة المرور</label>
26
+ <input type="password" class="form-control" id="password" placeholder="أدخل كلمة المرور" required>
27
+ </div>
28
+ <button type="submit" class="btn btn-primary w-100 py-2">تسجيل الدخول</button>
29
+ </form>
30
+ </div>
31
+ </div>
32
+ <script src="../js/admin.js"></script>
33
+ </body>
34
+ </html>
css/admin.css ADDED
@@ -0,0 +1,220 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ```css
2
+ /* Admin Dashboard CSS */
3
+ .admin-login {
4
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
5
+ min-height: 100vh;
6
+ display: flex;
7
+ align-items: center;
8
+ justify-content: center;
9
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
10
+ }
11
+
12
+ .login-container {
13
+ width: 100%;
14
+ max-width: 400px;
15
+ padding: 20px;
16
+ }
17
+
18
+ .login-card {
19
+ background: white;
20
+ padding: 2rem;
21
+ border-radius: 15px;
22
+ box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
23
+ backdrop-filter: blur(10px);
24
+ }
25
+
26
+ .admin-dashboard {
27
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
28
+ background-color: #f8f9fa;
29
+ min-height: 100vh;
30
+ }
31
+
32
+ /* Sidebar Styles */
33
+ .sidebar {
34
+ position: fixed;
35
+ top: 0;
36
+ right: 0;
37
+ width: 250px;
38
+ height: 100vh;
39
+ background: linear-gradient(180deg, #2c5aa0 0%, #1e3a8a 100%);
40
+ color: white;
41
+ transition: all 0.3s ease;
42
+ z-index: 1000;
43
+ }
44
+
45
+ .sidebar-header {
46
+ padding: 1.5rem 1rem;
47
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
48
+ }
49
+
50
+ .sidebar-nav {
51
+ list-style: none;
52
+ padding: 0;
53
+ margin: 0;
54
+ }
55
+
56
+ .sidebar-nav .nav-item {
57
+ margin: 0;
58
+ }
59
+
60
+ .sidebar-nav .nav-link {
61
+ color: rgba(255, 255, 255, 0.8);
62
+ padding: 0.75rem 1rem;
63
+ text-decoration: none;
64
+ display: block;
65
+ transition: all 0.3s ease;
66
+ border-right: 3px solid transparent;
67
+ }
68
+
69
+ .sidebar-nav .nav-link:hover,
70
+ .sidebar-nav .nav-link.active {
71
+ background-color: rgba(255, 255, 255, 0.1);
72
+ color: white;
73
+ border-right-color: #ff6b35;
74
+ }
75
+
76
+ .sidebar-nav .nav-link i {
77
+ width: 20px;
78
+ text-align: center;
79
+ }
80
+
81
+ /* Main Content Area */
82
+ .main-content {
83
+ margin-right: 250px;
84
+ transition: all 0.3s ease;
85
+ }
86
+
87
+ .main-content.sidebar-collapsed {
88
+ margin-right: 70px;
89
+ }
90
+
91
+ /* Top Bar */
92
+ .topbar {
93
+ background: white;
94
+ padding: 1rem 0;
95
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
96
+ position: sticky;
97
+ top: 0;
98
+ z-index: 999;
99
+ }
100
+
101
+ .sidebar-toggle {
102
+ background: none;
103
+ border: none;
104
+ font-size: 1.25rem;
105
+ color: #6c757d;
106
+ cursor: pointer;
107
+ padding: 0.5rem;
108
+ }
109
+
110
+ /* Summary Cards */
111
+ .summary-card {
112
+ border: none;
113
+ border-radius: 10px;
114
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
115
+ transition: transform 0.3s ease;
116
+ }
117
+
118
+ .summary-card:hover {
119
+ transform: translateY(-5px);
120
+ }
121
+
122
+ .summary-card .card-title {
123
+ font-size: 0.9rem;
124
+ color: #6c757d;
125
+ margin-bottom: 0.5rem;
126
+ }
127
+
128
+ .summary-card .card-number {
129
+ font-size: 2rem;
130
+ font-weight: bold;
131
+ color: #2c5aa0;
132
+ margin-bottom: 0;
133
+ }
134
+
135
+ .summary-card .icon {
136
+ padding: 1rem;
137
+ border-radius: 50%;
138
+ background: rgba(44, 90, 160, 0.1);
139
+ }
140
+
141
+ /* Table Styles */
142
+ .table-responsive {
143
+ border-radius: 10px;
144
+ overflow: hidden;
145
+ }
146
+
147
+ .table {
148
+ margin-bottom: 0;
149
+ }
150
+
151
+ .table th {
152
+ background-color: #f8f9fa;
153
+ border-bottom: 2px solid #dee2e6;
154
+ font-weight: 600;
155
+ color: #495057;
156
+ }
157
+
158
+ .table td {
159
+ vertical-align: middle;
160
+ }
161
+
162
+ /* Modal Styles */
163
+ .modal-header {
164
+ border-bottom: 1px solid #dee2e6;
165
+ padding: 1.5rem;
166
+ }
167
+
168
+ .modal-footer {
169
+ border-top: 1px solid #dee2e6;
170
+ padding: 1.5rem;
171
+ }
172
+
173
+ /* Responsive Design */
174
+ @media (max-width: 768px) {
175
+ .sidebar {
176
+ width: 70px;
177
+ }
178
+
179
+ .sidebar .sidebar-header h4,
180
+ .sidebar .nav-link span {
181
+ display: none;
182
+ }
183
+
184
+ .sidebar .nav-link {
185
+ text-align: center;
186
+ padding: 1rem 0.5rem;
187
+ }
188
+
189
+ .sidebar .nav-link i {
190
+ margin: 0;
191
+ font-size: 1.25rem;
192
+ }
193
+
194
+ .main-content {
195
+ margin-right: 70px;
196
+ }
197
+
198
+ .summary-card .card-number {
199
+ font-size: 1.5rem;
200
+ }
201
+ }
202
+
203
+ /* Custom Scrollbar */
204
+ .sidebar::-webkit-scrollbar {
205
+ width: 5px;
206
+ }
207
+
208
+ .sidebar::-webkit-scrollbar-track {
209
+ background: rgba(255, 255, 255, 0.1);
210
+ }
211
+
212
+ .sidebar::-webkit-scrollbar-thumb {
213
+ background: rgba(255, 255, 255, 0.3);
214
+ border-radius: 3px;
215
+ }
216
+
217
+ .sidebar::-webkit-scrollbar-thumb:hover {
218
+ background: rgba(255, 255, 255, 0.5);
219
+ }
220
+ ```
css/main.css ADDED
@@ -0,0 +1,91 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ```css
2
+ /* Main CSS for Port Sudan Reads Initiative */
3
+ :root {
4
+ --primary-color: #2c5aa0;
5
+ --secondary-color: #f8f9fa;
6
+ --accent-color: #ff6b35;
7
+ }
8
+
9
+ body {
10
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
11
+ line-height: 1.6;
12
+ direction: rtl;
13
+ }
14
+
15
+ .hero-section {
16
+ background: linear-gradient(135deg, var(--primary-color), #1e3a8a);
17
+ min-height: 80vh;
18
+ display: flex;
19
+ align-items: center;
20
+ }
21
+
22
+ .min-vh-50 {
23
+ min-height: 50vh;
24
+ }
25
+
26
+ .navbar-brand {
27
+ font-size: 1.5rem;
28
+ }
29
+
30
+ .btn-primary {
31
+ background-color: var(--primary-color);
32
+ border-color: var(--primary-color);
33
+ }
34
+
35
+ .btn-primary:hover {
36
+ background-color: #1e3a8a;
37
+ border-color: #1e3a8a;
38
+ }
39
+
40
+ .card {
41
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
42
+ border: none;
43
+ }
44
+
45
+ .card:hover {
46
+ transform: translateY(-5px);
47
+ box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
48
+ }
49
+
50
+ .social-links a {
51
+ transition: color 0.3s ease;
52
+ }
53
+
54
+ .social-links a:hover {
55
+ color: var(--accent-color) !important;
56
+ }
57
+
58
+ .badge {
59
+ font-size: 0.8rem;
60
+ }
61
+
62
+ /* Responsive adjustments */
63
+ @media (max-width: 768px) {
64
+ .hero-section {
65
+ min-height: 60vh;
66
+ text-align: center;
67
+ }
68
+
69
+ .display-4 {
70
+ font-size: 2.5rem;
71
+ }
72
+ }
73
+
74
+ /* Custom scrollbar for webkit browsers */
75
+ ::-webkit-scrollbar {
76
+ width: 8px;
77
+ }
78
+
79
+ ::-webkit-scrollbar-track {
80
+ background: #f1f1f1;
81
+ }
82
+
83
+ ::-webkit-scrollbar-thumb {
84
+ background: var(--primary-color);
85
+ border-radius: 4px;
86
+ }
87
+
88
+ ::-webkit-scrollbar-thumb:hover {
89
+ background: #1e3a8a;
90
+ }
91
+ ```
index.html CHANGED
@@ -1,19 +1,165 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ar" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>بورتسودان تقرأ - الرئيسية</title>
7
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
8
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
9
+ <link href="css/main.css" rel="stylesheet">
10
+ </head>
11
+ <body>
12
+ <!-- Header -->
13
+ <header class="hero-section bg-primary text-white py-5">
14
+ <div class="container">
15
+ <div class="row align-items-center min-vh-50">
16
+ <div class="col-lg-6">
17
+ <h1 class="display-4 fw-bold mb-4">بورتسودان تقرأ: حيث يبدأ نور المعرفة</h1>
18
+ <p class="lead mb-4">مبادرة مجتمعية تهدف لنشر ثقافة القراءة وإنشاء المكتبات في جميع أنحاء بورتسودان</p>
19
+ <a href="libraries.html" class="btn btn-light btn-lg px-4">اكتشف المكتبات</a>
20
+ </div>
21
+ <div class="col-lg-6">
22
+ <img src="http://static.photos/education/640x360/1" alt="مكتبة" class="img-fluid rounded shadow">
23
+ </div>
24
+ </div>
25
+ </div>
26
+ </header>
27
+
28
+ <!-- About Section -->
29
+ <section id="about" class="py-5">
30
+ <div class="container">
31
+ <div class="row">
32
+ <div class="col-lg-8 mx-auto text-center">
33
+ <h2 class="display-5 fw-bold mb-4">عن المبادرة</h2>
34
+ <p class="lead text-muted mb-5">
35
+ مبادرة "بورتسودان تقرأ" تهدف إلى تعزيز ثقافة القراءة والمعرفة بين جميع فئات المجتمع في بورتسودان،
36
+ من خلال إنشاء مكتبات مجهزة بالكتب المتنوعة والمناسبة لجميع الأعمار.
37
+ </p>
38
+ <div class="row text-start">
39
+ <div class="col-md-6">
40
+ <ul class="list-unstyled">
41
+ <li class="mb-3"><i class="fas fa-check text-primary me-2"></i>إنشاء 10 مكتبات في مختلف أحياء المدينة</li>
42
+ <li class="mb-3"><i class="fas fa-check text-primary me-2"></i>توفير أكثر من 50,000 كتاب متنوع</li>
43
+ <li class="mb-3"><i class="fas fa-check text-primary me-2"></i>تنظيم ورش قراءة وجلسات حوارية أسبوعية</li>
44
+ </ul>
45
+ </div>
46
+ <div class="col-md-6">
47
+ <ul class="list-unstyled">
48
+ <li class="mb-3"><i class="fas fa-check text-primary me-2"></i>تدريب 100 متطوع على إدارة المكتبات</li>
49
+ <li class="mb-3"><i class="fas fa-check text-primary me-2"></i>توفير كتب بلغة برايل للمكفوفين</li>
50
+ <li class="mb-3"><i class="fas fa-check text-primary me-2"></i>إنشاء مكتبات رقمية مجانية</li>
51
+ </ul>
52
+ </div>
53
+ </div>
54
+ </div>
55
+ </div>
56
+ </div>
57
+ </section>
58
+
59
+ <!-- Support Section -->
60
+ <section id="support" class="py-5 bg-light">
61
+ <div class="container">
62
+ <div class="row">
63
+ <div class="col-lg-8 mx-auto text-center">
64
+ <h2 class="display-5 fw-bold mb-4">كيف تدعم المبادرة؟</h2>
65
+ <p class="lead text-muted mb-5">يمكنك دعم المبادرة بعدة طرق تساعدنا في تحقيق أهدافنا</p>
66
+
67
+ <div class="row mb-5">
68
+ <div class="col-md-4 mb-4">
69
+ <div class="card border-0 shadow-sm h-100">
70
+ <div class="card-body text-center p-4">
71
+ <i class="fas fa-money-bill-wave fa-3x text-primary mb-3"></i>
72
+ <h5 class="card-title">دعم مالي</h5>
73
+ <p class="card-text">تبرع مالي يساعد في شراء الكتب وتجهيز المكتبات</p>
74
+ </div>
75
+ </div>
76
+ </div>
77
+ <div class="col-md-4 mb-4">
78
+ <div class="card border-0 shadow-sm h-100">
79
+ <div class="card-body text-center p-4">
80
+ <i class="fas fa-book fa-3x text-primary mb-3"></i>
81
+ <h5 class="card-title">تبرع بالكتب</h5>
82
+ <p class="card-text">تبرع بكتبك المستعملة أو الجديدة لتوسعة رصيد المكتبات</p>
83
+ </div>
84
+ </div>
85
+ </div>
86
+ <div class="col-md-4 mb-4">
87
+ <div class="card border-0 shadow-sm h-100">
88
+ <div class="card-body text-center p-4">
89
+ <i class="fas fa-hands-helping fa-3x text-primary mb-3"></i>
90
+ <h5 class="card-title">التطوع</h5>
91
+ <p class="card-text">انضم إلينا كمتطوع في إدارة المكتبات أو تنظيم الفعاليات</p>
92
+ </div>
93
+ </div>
94
+ </div>
95
+ </div>
96
+
97
+ <!-- Donation Form -->
98
+ <div id="donate" class="bg-white p-5 rounded shadow-sm">
99
+ <h3 class="mb-4">نموذج التبرع</h3>
100
+ <form>
101
+ <div class="row">
102
+ <div class="col-md-6 mb-3">
103
+ <input type="text" class="form-control" placeholder="الاسم الكامل" required>
104
+ </div>
105
+ <div class="col-md-6 mb-3">
106
+ <input type="email" class="form-control" placeholder="البريد الإلكتروني" required>
107
+ </div>
108
+ <div class="col-md-6 mb-3">
109
+ <select class="form-select" required>
110
+ <option value="">نوع التبرع</option>
111
+ <option value="financial">دعم مالي</option>
112
+ <option value="books">تبرع بالكتب</option>
113
+ <option value="volunteer">التطوع</option>
114
+ </select>
115
+ </div>
116
+ <div class="col-md-6 mb-3">
117
+ <input type="number" class="form-control" placeholder="المبلغ (إذا كان تبرعاً مالياً)">
118
+ </div>
119
+ <div class="col-12 mb-3">
120
+ <textarea class="form-control" rows="4" placeholder="ملاحظات إضافية"></textarea>
121
+ </div>
122
+ <div class="col-12">
123
+ <button type="submit" class="btn btn-primary btn-lg w-100">إرسال التبرع</button>
124
+ </div>
125
+ </div>
126
+ </form>
127
+ </div>
128
+ </div>
129
+ </div>
130
+ </div>
131
+ </section>
132
+
133
+ <!-- Contact Section -->
134
+ <section id="contact" class="py-5">
135
+ <div class="container">
136
+ <div class="row">
137
+ <div class="col-lg-8 mx-auto text-center">
138
+ <h2 class="display-5 fw-bold mb-4">اتصل بنا</h2>
139
+ <p class="lead text-muted mb-5">نحن هنا للإجابة على استفساراتك واستقبال مقترحاتك</p>
140
+ <div class="row">
141
+ <div class="col-md-4 mb-3">
142
+ <i class="fas fa-phone fa-2x text-primary mb-2"></i>
143
+ <h5>الهاتف</h5>
144
+ <p>+249 123 456 789</p>
145
+ </div>
146
+ <div class="col-md-4 mb-3">
147
+ <i class="fas fa-envelope fa-2x text-primary mb-2"></i>
148
+ <h5>البريد الإلكتروني</h5>
149
+ <p>info@portsudanreads.sd</p>
150
+ </div>
151
+ <div class="col-md-4 mb-3">
152
+ <i class="fas fa-map-marker-alt fa-2x text-primary mb-2"></i>
153
+ <h5>العنوان</h5>
154
+ <p>بورتسودان، السودان</p>
155
+ </div>
156
+ </div>
157
+ </div>
158
+ </div>
159
+ </div>
160
+ </section>
161
+
162
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
163
+ <script src="js/main.js"></script>
164
+ </body>
165
+ </html>
js/admin.js ADDED
@@ -0,0 +1,156 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ```javascript
2
+ // Admin Dashboard JavaScript
3
+
4
+ document.addEventListener('DOMContentLoaded', function() {
5
+ // Sidebar toggle functionality
6
+ const sidebarToggle = document.querySelector('.sidebar-toggle');
7
+ const sidebar = document.querySelector('.sidebar');
8
+ const mainContent = document.querySelector('.main-content');
9
+
10
+ if (sidebarToggle) {
11
+ sidebarToggle.addEventListener('click', function() {
12
+ sidebar.classList.toggle('sidebar-collapsed');
13
+ mainContent.classList.toggle('sidebar-collapsed');
14
+ });
15
+ }
16
+
17
+ // Table row actions
18
+ const editButtons = document.querySelectorAll('.btn-outline-primary');
19
+ const deleteButtons = document.querySelectorAll('.btn-outline-danger');
20
+
21
+ editButtons.forEach(button => {
22
+ button.addEventListener('click', function() {
23
+ const row = this.closest('tr');
24
+ const libraryName = row.cells[0].textContent;
25
+ alert(`تعديل مكتبة: ${libraryName}`);
26
+ // In a real application, this would open an edit modal/form
27
+ });
28
+ });
29
+
30
+ deleteButtons.forEach(button => {
31
+ button.addEventListener('click', function() {
32
+ const row = this.closest('tr');
33
+ const libraryName = row.cells[0].textContent;
34
+ if (confirm(`هل أنت متأكد من حذف ${libraryName}؟`)) {
35
+ row.remove();
36
+ // In a real application, this would make an API call to delete the library
37
+ updateSummaryCards();
38
+ }
39
+ });
40
+ });
41
+
42
+ // Add Library Form Submission
43
+ const addLibraryForm = document.querySelector('#addLibraryModal form');
44
+ const saveLibraryBtn = document.querySelector('#addLibraryModal .btn-primary');
45
+
46
+ if (saveLibraryBtn) {
47
+ saveLibraryBtn.addEventListener('click', function() {
48
+ const name = document.getElementById('libraryName').value;
49
+ const location = document.getElementById('libraryLocation').value;
50
+ const status = document.getElementById('libraryStatus').value;
51
+ const description = document.getElementById('libraryDescription').value;
52
+
53
+ if (!name || !location || !status) {
54
+ alert('يرجى ملء جميع الحقول المطلوبة');
55
+ return;
56
+ }
57
+
58
+ // Add new row to table
59
+ const tableBody = document.querySelector('.table tbody');
60
+ const newRow = document.createElement('tr');
61
+
62
+ const statusBadge = {
63
+ 'active': 'bg-success',
64
+ 'under-construction': 'bg-warning',
65
+ 'planned': 'bg-info',
66
+ 'digital': 'bg-primary'
67
+ }[status] || 'bg-secondary';
68
+
69
+ const statusText = {
70
+ 'active': 'نشط',
71
+ 'under-construction': 'قيد الإنشاء',
72
+ 'planned': 'مخطط',
73
+ 'digital': 'رقمية'
74
+ }[status] || status;
75
+
76
+ newRow.innerHTML = `
77
+ <td>${name}</td>
78
+ <td>${location}</td>
79
+ <td><span class="badge ${statusBadge}">${statusText}</span></td>
80
+ <td>${new Date().toISOString().split('T')[0]}</td>
81
+ <td>
82
+ <button class="btn btn-sm btn-outline-primary me-1">تعديل</button>
83
+ <button class="btn btn-sm btn-outline-danger">حذف</button>
84
+ </td>
85
+ `;
86
+
87
+ tableBody.appendChild(newRow);
88
+
89
+ // Close modal and reset form
90
+ const modal = bootstrap.Modal.getInstance(document.getElementById('addLibraryModal'));
91
+ modal.hide();
92
+ addLibraryForm.reset();
93
+
94
+ // Update summary cards
95
+ updateSummaryCards();
96
+
97
+ // Re-attach event listeners to new buttons
98
+ attachRowEventListeners();
99
+ });
100
+ }
101
+
102
+ function updateSummaryCards() {
103
+ const libraryCount = document.querySelectorAll('.table tbody tr').length;
104
+ const libraryCard = document.querySelector('.summary-card:first-child .card-number');
105
+ if (libraryCard) {
106
+ libraryCard.textContent = libraryCount;
107
+ }
108
+ }
109
+
110
+ function attachRowEventListeners() {
111
+ // Re-attach event listeners to all edit and delete buttons
112
+ document.querySelectorAll('.btn-outline-primary').forEach(button => {
113
+ button.addEventListener('click', function() {
114
+ const row = this.closest('tr');
115
+ const libraryName = row.cells[0].textContent;
116
+ alert(`تعديل مكتبة: ${libraryName}`);
117
+ });
118
+ });
119
+
120
+ document.querySelectorAll('.btn-outline-danger').forEach(button => {
121
+ button.addEventListener('click', function() {
122
+ const row = this.closest('tr');
123
+ const libraryName = row.cells[0].textContent;
124
+ if (confirm(`هل أنت متأكد من حذف ${libraryName}؟`)) {
125
+ row.remove();
126
+ updateSummaryCards();
127
+ }
128
+ });
129
+ });
130
+ }
131
+
132
+ // Login form handling
133
+ const loginForm = document.querySelector('.admin-login form');
134
+ if (loginForm) {
135
+ loginForm.addEventListener('submit', function(e) {
136
+ e.preventDefault();
137
+ const username = document.getElementById('username').value;
138
+ const password = document.getElementById('password').value;
139
+
140
+ // Simple validation (in real app, this would be an API call)
141
+ if (username && password) {
142
+ // Simulate login success
143
+ window.location.href = 'dashboard.html';
144
+ } else {
145
+ alert('يرجى إدخال اسم المستخدم وكلمة المرور');
146
+ }
147
+ });
148
+ }
149
+
150
+ // Initialize tooltips
151
+ const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
152
+ const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
153
+ return new bootstrap.Tooltip(tooltipTriggerEl);
154
+ });
155
+ });
156
+ ```
js/main.js ADDED
@@ -0,0 +1,85 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ```javascript
2
+ // Main JavaScript for Port Sudan Reads Initiative
3
+
4
+ document.addEventListener('DOMContentLoaded', function() {
5
+ // Smooth scrolling for anchor links
6
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
7
+ anchor.addEventListener('click', function (e) {
8
+ e.preventDefault();
9
+ const target = document.querySelector(this.getAttribute('href'));
10
+ if (target) {
11
+ target.scrollIntoView({
12
+ behavior: 'smooth',
13
+ block: 'start'
14
+ });
15
+ }
16
+ });
17
+ });
18
+
19
+ // Navbar background change on scroll
20
+ const navbar = document.querySelector('.navbar');
21
+ if (navbar) {
22
+ window.addEventListener('scroll', function() {
23
+ if (window.scrollY > 100) {
24
+ navbar.classList.add('navbar-scrolled');
25
+ } else {
26
+ navbar.classList.remove('navbar-scrolled');
27
+ }
28
+ });
29
+ }
30
+
31
+ // Form submission handling
32
+ const donationForm = document.querySelector('form');
33
+ if (donationForm) {
34
+ donationForm.addEventListener('submit', function(e) {
35
+ e.preventDefault();
36
+ // Basic form validation
37
+ const inputs = this.querySelectorAll('input[required], select[required]');
38
+ let isValid = true;
39
+
40
+ inputs.forEach(input => {
41
+ if (!input.value.trim()) {
42
+ isValid = false;
43
+ input.classList.add('is-invalid');
44
+ } else {
45
+ input.classList.remove('is-invalid');
46
+ }
47
+ });
48
+
49
+ if (isValid) {
50
+ // Show success message (in a real app, this would be an AJAX call)
51
+ alert('شكراً لتبرعك! سنتواصل معك قريباً.');
52
+ this.reset();
53
+ } else {
54
+ alert('يرجى ملء جميع الحقول المطلوبة.');
55
+ }
56
+ });
57
+ }
58
+
59
+ // Add loading animation to buttons
60
+ document.querySelectorAll('.btn').forEach(button => {
61
+ button.addEventListener('click', function() {
62
+ const originalText = this.innerHTML;
63
+ this.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>جاري التحميل...';
64
+ this.disabled = true;
65
+
66
+ // Reset button after 2 seconds (simulate loading)
67
+ setTimeout(() => {
68
+ this.innerHTML = originalText;
69
+ this.disabled = false;
70
+ }, 2000);
71
+ });
72
+ });
73
+ });
74
+
75
+ // Add navbar scroll class to CSS
76
+ const style = document.createElement('style');
77
+ style.textContent = `
78
+ .navbar-scrolled {
79
+ background-color: rgba(255, 255, 255, 0.95) !important;
80
+ backdrop-filter: blur(10px);
81
+ box-shadow: 0 2px 20px rgba(0,0,0,0.1);
82
+ }
83
+ `;
84
+ document.head.appendChild(style);
85
+ ```
libraries.html ADDED
@@ -0,0 +1,115 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ar" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>مكتباتنا - بورتسودان تقرأ</title>
7
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
8
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
9
+ <link href="css/main.css" rel="stylesheet">
10
+ </head>
11
+ <body>
12
+ <!-- Header -->
13
+ <header class="bg-primary text-white py-5">
14
+ <div class="container">
15
+ <h1 class="display-4 fw-bold text-center">مكتباتنا</h1>
16
+ <p class="lead text-center mb-0">اكتشف المكتبات التي أنشأتها المبادرة في مختلف أنحاء بورتسودان</p>
17
+ </div>
18
+ </header>
19
+
20
+ <!-- Libraries Section -->
21
+ <section class="py-5">
22
+ <div class="container">
23
+ <div class="row">
24
+ <!-- Library 1 -->
25
+ <div class="col-lg-4 col-md-6 mb-4">
26
+ <div class="card h-100 shadow-sm">
27
+ <img src="http://static.photos/education/400x300/1" class="card-img-top" alt="مكتبة الحي الأول">
28
+ <div class="card-body">
29
+ <h5 class="card-title">مكتبة الحي الأول</h5>
30
+ <p class="card-text">مكتبة مجتمعية في قلب الحي الأول، تحتوي على أكثر من 5000 كتاب متنوع لجميع الأعمار.</p>
31
+ <div class="d-flex justify-content-between align-items-center">
32
+ <span class="badge bg-success">نشط</span>
33
+ <small class="text-muted">أنشئت: 2023</small>
34
+ </div>
35
+ </div>
36
+ </div>
37
+ </div>
38
+ <!-- Library 2 -->
39
+ <div class="col-lg-4 col-md-6 mb-4">
40
+ <div class="card h-100 shadow-sm">
41
+ <img src="http://static.photos/education/400x300/2" class="card-img-top" alt="مكتبة الميناء">
42
+ <div class="card-body">
43
+ <h5 class="card-title">مكتبة الميناء</h5>
44
+ <p class="card-text">مكتبة حديثة بالقرب من منطقة الميناء، تركز على الكتب التقنية والبحوث البحرية.</p>
45
+ <div class="d-flex justify-content-between align-items-center">
46
+ <span class="badge bg-success">نشط</span>
47
+ <small class="text-muted">أنشئت: 2023</small>
48
+ </div>
49
+ </div>
50
+ </div>
51
+ </div>
52
+ <!-- Library 3 -->
53
+ <div class="col-lg-4 col-md-6 mb-4">
54
+ <div class="card h-100 shadow-sm">
55
+ <img src="http://static.photos/education/400x300/3" class="card-img-top" alt="مكتبة الضاحية">
56
+ <div class="card-body">
57
+ <h5 class="card-title">مكتبة الضاحية</h5>
58
+ <p class="card-text">مكتبة متخصصة في الأدب والعلوم الإنسانية، تقع في منطقة الضاحية السكنية.</p>
59
+ <div class="d-flex justify-content-between align-items-center">
60
+ <span class="badge bg-warning">قيد الإنشاء</span>
61
+ <small class="text-muted">متوقع: 2024</small>
62
+ </div>
63
+ </div>
64
+ </div>
65
+ </div>
66
+ <!-- Library 4 -->
67
+ <div class="col-lg-4 col-md-6 mb-4">
68
+ <div class="card h-100 shadow-sm">
69
+ <img src="http://static.photos/education/400x300/4" class="card-img-top" alt="مكتبة الطلاب">
70
+ <div class="card-body">
71
+ <h5 class="card-title">مكتبة الطلاب</h5>
72
+ <p class="card-text">مكتبة مجهزة خصيصاً لطلاب المدارس والجامعات، تحتوي على مراجع دراسية متخصصة.</p>
73
+ <div class="d-flex justify-content-between align-items-center">
74
+ <span class="badge bg-success">نشط</span>
75
+ <small class="text-muted">أنشئت: 2022</small>
76
+ </div>
77
+ </div>
78
+ </div>
79
+ </div>
80
+ <!-- Library 5 -->
81
+ <div class="col-lg-4 col-md-6 mb-4">
82
+ <div class="card h-100 shadow-sm">
83
+ <img src="http://static.photos/education/400x300/5" class="card-img-top" alt="مكتبة الأطفال">
84
+ <div class="card-body">
85
+ <h5 class="card-title">مكتبة الأطفال</h5>
86
+ <p class="card-text">مكتبة ملونة ومجهزة خصيصاً للأطفال، تحتوي على كتب تعليمية وقصص مصورة.</p>
87
+ <div class="d-flex justify-content-between align-items-center">
88
+ <span class="badge bg-success">نشط</span>
89
+ <small class="text-muted">أنشئت: 2023</small>
90
+ </div>
91
+ </div>
92
+ </div>
93
+ </div>
94
+ <!-- Library 6 -->
95
+ <div class="col-lg-4 col-md-6 mb-4">
96
+ <div class="card h-100 shadow-sm">
97
+ <img src="http://static.photos/education/400x300/6" class="card-img-top" alt="مكتبة الرقمية">
98
+ <div class="card-body">
99
+ <h5 class="card-title">مكتبة الرقمية</h5>
100
+ <p class="card-text">منصة رقمية تحتوي على آلاف الكتب الإلكترونية المتاحة للجميع مجاناً.</p>
101
+ <div class="d-flex justify-content-between align-items-center">
102
+ <span class="badge bg-info">رقمية</span>
103
+ <small class="text-muted">أنشئت: 2023</small>
104
+ </div>
105
+ </div>
106
+ </div>
107
+ </div>
108
+ </div>
109
+ </div>
110
+ </section>
111
+
112
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
113
+ <script src="js/main.js"></script>
114
+ </body>
115
+ </html>