Hugging Face's logo

Spaces:
Quioyy
/
undefined
Running

App Files Community
undefined / admin /dashboard.html
Quioyy's picture
Quioyy
Generate the complete, modular front-end code for the "Port Sudan Reads Initiative" website and its associated **Admin Dashboard Interface**.
95927c5 verified
Raw History Blame Contribute Delete
13.2 kB
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>لوحة التحكم - بورتسودان تقرأ</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<link href="../css/admin.css" rel="stylesheet">
</head>
<body class="admin-dashboard">
<!-- Sidebar -->
<div class="sidebar">
<div class="sidebar-header">
<h4 class="text-white">
<i class="fas fa-book-reader me-2"></i>
بورتسودان تقرأ
</h4>
</div>
<ul class="sidebar-nav">
<li class="nav-item">
<a href="#" class="nav-link active">
<i class="fas fa-tachometer-alt me-2"></i>
الرئيسية
</a>
</li>
<li class="nav-item">
<a href="#manage-libraries" class="nav-link">
<i class="fas fa-book me-2"></i>
إدارة المكتبات
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fas fa-donate me-2"></i>
التبرعات
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fas fa-users me-2"></i>
المستخدمين
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fas fa-cog me-2"></i>
الإعدادات
</a>
</li>
<li class="nav-item">
<a href="../index.html" class="nav-link text-danger">
<i class="fas fa-sign-out-alt me-2"></i>
تسجيل الخروج
</a>
</li>
</ul>
</div>
<!-- Main Content -->
<div class="main-content">
<!-- Top Bar -->
<nav class="topbar">
<div class="container-fluid">
<button class="sidebar-toggle">
<i class="fas fa-bars"></i>
</button>
<div class="d-flex align-items-center">
<span class="me-3">مرحباً، المدير</span>
<div class="dropdown">
<a href="#" class="dropdown-toggle" data-bs-toggle="dropdown">
<i class="fas fa-user-circle fa-2x"></i>
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">الملف الشخصي</a></li>
<li><a class="dropdown-item" href="#">الإعدادات</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item text-danger" href="../index.html">تسجيل الخروج</a></li>
</ul>
</div>
</div>
</div>
</nav>
<!-- Dashboard Content -->
<div class="container-fluid py-4">
<!-- Summary Cards -->
<div class="row mb-4">
<div class="col-xl-3 col-md-6 mb-4">
<div class="card summary-card">
<div class="card-body">
<div class="d-flex align-items-center">
<div class="flex-grow-1">
<h5 class="card-title">المكتبات</h5>
<h2 class="card-number">8</h2>
</div>
<div class="icon">
<i class="fas fa-book fa-2x text-primary"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 mb-4">
<div class="card summary-card">
<div class="card-body">
<div class="d-flex align-items-center">
<div class="flex-grow-1">
<h5 class="card-title">الكتب المجمعة</h5>
<h2 class="card-number">42,350</h2>
</div>
<div class="icon">
<i class="fas fa-book-open fa-2x text-success"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 mb-4">
<div class="card summary-card">
<div class="card-body">
<div class="d-flex align-items-center">
<div class="flex-grow-1">
<h5 class="card-title">إجمالي التبرعات</h5>
<h2 class="card-number">125,000 SDG</h2>
</div>
<div class="icon">
<i class="fas fa-money-bill-wave fa-2x text-warning"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 mb-4">
<div class="card summary-card">
<div class="card-body">
<div class="d-flex align-items-center">
<div class="flex-grow-1">
<h5 class="card-title">المتطوعين</h5>
<h2 class="card-number">87</h2>
</div>
<div class="icon">
<i class="fas fa-users fa-2x text-info"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Manage Libraries Section -->
<div id="manage-libraries" class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<h5 class="mb-0">إدارة المكتبات</h5>
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addLibraryModal">
<i class="fas fa-plus me-2"></i>إضافة مكتبة جديدة
</button>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>اسم المكتبة</th>
<th>الموقع</th>
<th>الحالة</th>
<th>تاريخ الإنشاء</th>
<th>الإجراءات</th>
</tr>
</thead>
<tbody>
<tr>
<td>مكتبة الحي الأول</td>
<td>الحي الأول، بورتسودان</td>
<td><span class="badge bg-success">نشط</span></td>
<td>2023-03-15</td>
<td>
<button class="btn btn-sm btn-outline-primary me-1">تعديل</button>
<button class="btn btn-sm btn-outline-danger">حذف</button>
</td>
</tr>
<tr>
<td>مكتبة الميناء</td>
<td>منطقة الميناء، بورتسودان</td>
<td><span class="badge bg-success">نشط</span></td>
<td>2023-05-20</td>
<td>
<button class="btn btn-sm btn-outline-primary me-1">تعديل</button>
<button class="btn btn-sm btn-outline-danger">حذف</button>
</td>
</tr>
<tr>
<td>مكتبة الضاحية</td>
<td>الضاحية السكنية، بورتسودان</td>
<td><span class="badge bg-warning">قيد الإنشاء</span></td>
<td>2024-01-10</td>
<td>
<button class="btn btn-sm btn-outline-primary me-1">تعديل</button>
<button class="btn btn-sm btn-outline-danger">حذف</button>
</td>
</tr>
<tr>
<td>مكتبة الطلاب</td>
<td>وسط المدينة، بورتسودان</td>
<td><span class="badge bg-success">نشط</span></td>
<td>2022-11-05</td>
<td>
<button class="btn btn-sm btn-outline-primary me-1">تعديل</button>
<button class="btn btn-sm btn-outline-danger">حذف</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Add Library Modal -->
<div class="modal fade" id="addLibraryModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">إضافة مكتبة جديدة</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="libraryName" class="form-label">اسم المكتبة</label>
<input type="text" class="form-control" id="libraryName" required>
</div>
<div class="mb-3">
<label for="libraryLocation" class="form-label">الموقع</label>
<input type="text" class="form-control" id="libraryLocation" required>
</div>
<div class="mb-3">
<label for="libraryStatus" class="form-label">الحالة</label>
<select class="form-select" id="libraryStatus" required>
<option value="">اختر الحالة</option>
<option value="active">نشط</option>
<option value="under-construction">قيد الإنشاء</option>
<option value="planned">مخطط</option>
<option value="digital">رقمية</option>
</select>
</div>
<div class="mb-3">
<label for="libraryDescription" class="form-label">الوصف</label>
<textarea class="form-control" id="libraryDescription" rows="3"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إلغاء</button>
<button type="button" class="btn btn-primary">حفظ المكتبة</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="../js/admin.js"></script>
</body>
</html>