🎨 تصميم واجهة المستخدم (UI) الجميلة للتطبيق باستخدام Bootstrap 5

🎯 هدف الدرس

إضافة تصميم احترافي لتطبيق الملاحظات باستخدام Bootstrap 5
لتحسين تجربة المستخدم وجعل الواجهة أنيقة ومتجاوبة مع جميع الشاشات 📱💻

(UI) الجميلة للتطبيق باستخدام Bootstrap 5

🧱 الملفات التي سنعدلها

templates/base.html → ملف القالب الأساسي.
templates/index.html → عرض الملاحظات.
templates/add_note.html → إضافة ملاحظة جديدة.
templates/login.html و templates/register.html → تحسين واجهة الدخول والتسجيل.

⚙️ الخطوة 1: إنشاء ملف القالب الأساسي base.html

📄 templates/base.html

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{% block title %}تطبيق الملاحظات{% endblock %}</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body {
      font-family: "Cairo", sans-serif;
      background-color: #f8f9fa;
    }
    .navbar {
      background: linear-gradient(45deg, #007bff, #6610f2);
    }
    .navbar-brand, .nav-link {
      color: #fff !important;
      font-weight: 600;
    }
    .container {
      margin-top: 40px;
    }
  </style>
</head>
<body>

  <!-- شريط التنقل -->
  <nav class="navbar navbar-expand-lg">
    <div class="container-fluid">
      <a class="navbar-brand" href="{{ url_for('index') }}">📝 تقنيات نور التعليمية</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ms-auto">
          {% if 'user_id' in session %}
          <li class="nav-item"><a class="nav-link" href="{{ url_for('add_note') }}">➕ إضافة ملاحظة</a></li>
          <li class="nav-item"><a class="nav-link" href="{{ url_for('logout') }}">🚪 تسجيل الخروج</a></li>
          {% else %}
          <li class="nav-item"><a class="nav-link" href="{{ url_for('login') }}">تسجيل الدخول</a></li>
          <li class="nav-item"><a class="nav-link" href="{{ url_for('register') }}">إنشاء حساب</a></li>
          {% endif %}
        </ul>
      </div>
    </div>
  </nav>

  <div class="container">
    {% with messages = get_flashed_messages() %}
      {% if messages %}
        <div class="alert alert-info mt-3">
          {% for message in messages %}
            <div>{{ message }}</div>
          {% endfor %}
        </div>
      {% endif %}
    {% endwith %}

    {% block content %}{% endblock %}
  </div>

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

🗒️ الخطوة 2: تعديل صفحة عرض الملاحظات index.html

📄 templates/index.html

{% extends 'base.html' %}
{% block title %}قائمة الملاحظات{% endblock %}
{% block content %}
<h2 class="text-center mb-4">ملاحظاتك</h2>

<div class="row">
  {% for note in notes %}
  <div class="col-md-4">
    <div class="card mb-4 shadow-sm border-0">
      <div class="card-body">
        <h5 class="card-title">{{ note.title }}</h5>
        <p class="card-text">{{ note.content }}</p>
        <a href="{{ url_for('edit_note', note_id=note.id) }}" class="btn btn-sm btn-outline-primary">✏️ تعديل</a>
        <a href="{{ url_for('delete_note', note_id=note.id) }}" class="btn btn-sm btn-outline-danger">🗑️ حذف</a>
      </div>
    </div>
  </div>
  {% else %}
  <p class="text-center">📭 لا توجد ملاحظات بعد.</p>
  {% endfor %}
</div>
{% endblock %}

📝 الخطوة 3: صفحة إضافة ملاحظة add_note.html

📄 templates/add_note.html

{% extends 'base.html' %}
{% block title %}إضافة ملاحظة{% endblock %}
{% block content %}
<div class="card shadow-sm border-0 p-4">
  <h4 class="mb-3">🖊️ إضافة ملاحظة جديدة</h4>
  <form method="POST">
    <div class="mb-3">
      <label class="form-label">العنوان</label>
      <input type="text" name="title" class="form-control" required>
    </div>
    <div class="mb-3">
      <label class="form-label">المحتوى</label>
      <textarea name="content" class="form-control" rows="5" required></textarea>
    </div>
    <button type="submit" class="btn btn-primary">💾 حفظ الملاحظة</button>
  </form>
</div>
{% endblock %}

🔑 الخطوة 4: تنسيق صفحات تسجيل الدخول والتسجيل

📄 templates/login.html

{% extends 'base.html' %}
{% block title %}تسجيل الدخول{% endblock %}
{% block content %}
<div class="card shadow-sm p-4 mx-auto" style="max-width:400px;">
  <h4 class="mb-3 text-center">🔐 تسجيل الدخول</h4>
  <form method="POST">
    <div class="mb-3">
      <label class="form-label">اسم المستخدم</label>
      <input type="text" name="username" class="form-control" required>
    </div>
    <div class="mb-3">
      <label class="form-label">كلمة المرور</label>
      <input type="password" name="password" class="form-control" required>
    </div>
    <button type="submit" class="btn btn-success w-100">دخول</button>
  </form>
  <p class="text-center mt-3">ليس لديك حساب؟ <a href="{{ url_for('register') }}">إنشاء حساب</a></p>
</div>
{% endblock %}

📄 templates/register.html

{% extends 'base.html' %}
{% block title %}تسجيل حساب جديد{% endblock %}
{% block content %}
<div class="card shadow-sm p-4 mx-auto" style="max-width:400px;">
  <h4 class="mb-3 text-center">🧾 إنشاء حساب جديد</h4>
  <form method="POST">
    <div class="mb-3">
      <label class="form-label">اسم المستخدم</label>
      <input type="text" name="username" class="form-control" required>
    </div>
    <div class="mb-3">
      <label class="form-label">كلمة المرور</label>
      <input type="password" name="password" class="form-control" required>
    </div>
    <button type="submit" class="btn btn-primary w-100">تسجيل</button>
  </form>
  <p class="text-center mt-3">هل لديك حساب؟ <a href="{{ url_for('login') }}">تسجيل الدخول</a></p>
</div>
{% endblock %}

💡 النتيجة النهائية

الآن سيظهر تطبيقك بمظهر أنيق وحديث:

تنقل جميل بالأعلى.
بطاقات للملاحظات بشكل منسق.
صفحات تسجيل دخول وتسجيل أنيقة جدًا.
تصميم متجاوب يناسب الموبايل والكمبيوتر.

🎨 تصميم واجهة المستخدم (UI) الجميلة للتطبيق باستخدام Bootstrap 5

🎯 هدف الدرس

🧱 الملفات التي سنعدلها

⚙️ الخطوة 1: إنشاء ملف القالب الأساسي base.html

🗒️ الخطوة 2: تعديل صفحة عرض الملاحظات index.html

📝 الخطوة 3: صفحة إضافة ملاحظة add_note.html

🔑 الخطوة 4: تنسيق صفحات تسجيل الدخول والتسجيل

💡 النتيجة النهائية

إرسال تعليق

وصف المدونة

#buttons=( أقبل ! ) #days=(20)

Contact form

🎨 تصميم واجهة المستخدم (UI) الجميلة للتطبيق باستخدام Bootstrap 5

🎯 هدف الدرس

🧱 الملفات التي سنعدلها

⚙️ الخطوة 1: إنشاء ملف القالب الأساسي base.html

🗒️ الخطوة 2: تعديل صفحة عرض الملاحظات index.html

📝 الخطوة 3: صفحة إضافة ملاحظة add_note.html

🔑 الخطوة 4: تنسيق صفحات تسجيل الدخول والتسجيل

💡 النتيجة النهائية

مواضيع ذات صلة

إرسال تعليق

#buttons=( أقبل ! ) #days=(20)

Contact form