Spaces:

Quioyy
/

undefined

Running

undefined / index.html

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

95927c5 verified 8 months ago

raw

history blame contribute delete

9.7 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/main.css" rel="stylesheet">
	</head>
	<body>
	<!-- Header -->
	<header class="hero-section bg-primary text-white py-5">
	<div class="container">
	<div class="row align-items-center min-vh-50">
	<div class="col-lg-6">
	<h1 class="display-4 fw-bold mb-4">بورتسودان تقرأ: حيث يبدأ نور المعرفة</h1>
	<p class="lead mb-4">مبادرة مجتمعية تهدف لنشر ثقافة القراءة وإنشاء المكتبات في جميع أنحاء بورتسودان</p>
	<a href="libraries.html" class="btn btn-light btn-lg px-4">اكتشف المكتبات</a>
	</div>
	<div class="col-lg-6">
	<img src="http://static.photos/education/640x360/1" alt="مكتبة" class="img-fluid rounded shadow">
	</div>
	</div>
	</div>
	</header>

	<!-- About Section -->
	<section id="about" class="py-5">
	<div class="container">
	<div class="row">
	<div class="col-lg-8 mx-auto text-center">
	<h2 class="display-5 fw-bold mb-4">عن المبادرة</h2>
	<p class="lead text-muted mb-5">
	مبادرة "بورتسودان تقرأ" تهدف إلى تعزيز ثقافة القراءة والمعرفة بين جميع فئات المجتمع في بورتسودان،
	من خلال إنشاء مكتبات مجهزة بالكتب المتنوعة والمناسبة لجميع الأعمار.
	</p>
	<div class="row text-start">
	<div class="col-md-6">
	<ul class="list-unstyled">
	<li class="mb-3"><i class="fas fa-check text-primary me-2"></i>إنشاء 10 مكتبات في مختلف أحياء المدينة</li>
	<li class="mb-3"><i class="fas fa-check text-primary me-2"></i>توفير أكثر من 50,000 كتاب متنوع</li>
	<li class="mb-3"><i class="fas fa-check text-primary me-2"></i>تنظيم ورش قراءة وجلسات حوارية أسبوعية</li>
	</ul>
	</div>
	<div class="col-md-6">
	<ul class="list-unstyled">
	<li class="mb-3"><i class="fas fa-check text-primary me-2"></i>تدريب 100 متطوع على إدارة المكتبات</li>
	<li class="mb-3"><i class="fas fa-check text-primary me-2"></i>توفير كتب بلغة برايل للمكفوفين</li>
	<li class="mb-3"><i class="fas fa-check text-primary me-2"></i>إنشاء مكتبات رقمية مجانية</li>
	</ul>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Support Section -->
	<section id="support" class="py-5 bg-light">
	<div class="container">
	<div class="row">
	<div class="col-lg-8 mx-auto text-center">
	<h2 class="display-5 fw-bold mb-4">كيف تدعم المبادرة؟</h2>
	<p class="lead text-muted mb-5">يمكنك دعم المبادرة بعدة طرق تساعدنا في تحقيق أهدافنا</p>

	<div class="row mb-5">
	<div class="col-md-4 mb-4">
	<div class="card border-0 shadow-sm h-100">
	<div class="card-body text-center p-4">
	<i class="fas fa-money-bill-wave fa-3x text-primary mb-3"></i>
	<h5 class="card-title">دعم مالي</h5>
	<p class="card-text">تبرع مالي يساعد في شراء الكتب وتجهيز المكتبات</p>
	</div>
	</div>
	</div>
	<div class="col-md-4 mb-4">
	<div class="card border-0 shadow-sm h-100">
	<div class="card-body text-center p-4">
	<i class="fas fa-book fa-3x text-primary mb-3"></i>
	<h5 class="card-title">تبرع بالكتب</h5>
	<p class="card-text">تبرع بكتبك المستعملة أو الجديدة لتوسعة رصيد المكتبات</p>
	</div>
	</div>
	</div>
	<div class="col-md-4 mb-4">
	<div class="card border-0 shadow-sm h-100">
	<div class="card-body text-center p-4">
	<i class="fas fa-hands-helping fa-3x text-primary mb-3"></i>
	<h5 class="card-title">التطوع</h5>
	<p class="card-text">انضم إلينا كمتطوع في إدارة المكتبات أو تنظيم الفعاليات</p>
	</div>
	</div>
	</div>
	</div>

	<!-- Donation Form -->
	<div id="donate" class="bg-white p-5 rounded shadow-sm">
	<h3 class="mb-4">نموذج التبرع</h3>
	<form>
	<div class="row">
	<div class="col-md-6 mb-3">
	<input type="text" class="form-control" placeholder="الاسم الكامل" required>
	</div>
	<div class="col-md-6 mb-3">
	<input type="email" class="form-control" placeholder="البريد الإلكتروني" required>
	</div>
	<div class="col-md-6 mb-3">
	<select class="form-select" required>
	<option value="">نوع التبرع</option>
	<option value="financial">دعم مالي</option>
	<option value="books">تبرع بالكتب</option>
	<option value="volunteer">التطوع</option>
	</select>
	</div>
	<div class="col-md-6 mb-3">
	<input type="number" class="form-control" placeholder="المبلغ (إذا كان تبرعاً مالياً)">
	</div>
	<div class="col-12 mb-3">
	<textarea class="form-control" rows="4" placeholder="ملاحظات إضافية"></textarea>
	</div>
	<div class="col-12">
	<button type="submit" class="btn btn-primary btn-lg w-100">إرسال التبرع</button>
	</div>
	</div>
	</form>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Contact Section -->
	<section id="contact" class="py-5">
	<div class="container">
	<div class="row">
	<div class="col-lg-8 mx-auto text-center">
	<h2 class="display-5 fw-bold mb-4">اتصل بنا</h2>
	<p class="lead text-muted mb-5">نحن هنا للإجابة على استفساراتك واستقبال مقترحاتك</p>
	<div class="row">
	<div class="col-md-4 mb-3">
	<i class="fas fa-phone fa-2x text-primary mb-2"></i>
	<h5>الهاتف</h5>
	<p>+249 123 456 789</p>
	</div>
	<div class="col-md-4 mb-3">
	<i class="fas fa-envelope fa-2x text-primary mb-2"></i>
	<h5>البريد الإلكتروني</h5>
	<p>info@portsudanreads.sd</p>
	</div>
	<div class="col-md-4 mb-3">
	<i class="fas fa-map-marker-alt fa-2x text-primary mb-2"></i>
	<h5>العنوان</h5>
	<p>بورتسودان، السودان</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>

	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
	<script src="js/main.js"></script>
	</body>
	</html>