الدرس السادس: "تحسين واجهة المستخدم باستخدام Bootstrap وFlexbox"

🎯 الهدف من الدرس:

في هذا الدرس سنجعل واجهة تطبيق الملاحظات أكثر جمالًا وتنظيمًا باستخدام Bootstrap 5 + Flexbox.
سنعمل على:

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

تحسين واجهة المستخدم باستخدام Bootstrap وFlexbox

🧩 الخطوة 1: تعديل ملف `index.html`

استبدل الكود السابق بهذا الكود الكامل 👇

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <title>📒 تطبيق الملاحظات</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

    <style>
        body {
            background: linear-gradient(to right, #f9fafb, #eef2f3);
            font-family: "Tajawal", sans-serif;
        }
        .note-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .note-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        }
        .add-btn {
            background-color: #198754;
            color: white;
            border: none;
        }
        .add-btn:hover {
            background-color: #157347;
        }
        .notes-container {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            justify-content: center;
        }
        .note {
            flex: 1 1 300px;
            max-width: 350px;
        }
    </style>
</head>
<body>

<div class="container py-4">

    <!-- تنبيهات فورية -->
    {% with messages = get_flashed_messages(with_categories=true) %}
      {% if messages %}
        {% for category, message in messages %}
          <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
            {{ message }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
          </div>
        {% endfor %}
      {% endif %}
    {% endwith %}

    <!-- العنوان -->
    <div class="text-center mb-4">
        <h2 class="fw-bold text-success">📝 تطبيق الملاحظات</h2>
        <p class="text-muted">دوّن أفكارك وذكرياتك بطريقة أنيقة وسهلة</p>
    </div>

    <!-- نموذج إضافة ملاحظة -->
    <form method="POST" action="/add" class="card shadow-sm p-3 mb-4">
        <div class="mb-2">
            <input type="text" name="title" class="form-control" placeholder="عنوان الملاحظة">
        </div>
        <div class="mb-2">
            <textarea name="content" class="form-control" rows="3" placeholder="محتوى الملاحظة"></textarea>
        </div>
        <button type="submit" class="btn add-btn w-100">➕ إضافة ملاحظة</button>
    </form>

    <!-- عرض الملاحظات -->
    <div class="notes-container">
        {% for note in notes %}
        <div class="note">
            <div class="card note-card border-0 shadow-sm">
                <div class="card-body">
                    <h5 class="card-title text-success">📌 {{ note['title'] }}</h5>
                    <p class="card-text">{{ note['content'] }}</p>
                    <div class="d-flex justify-content-end">
                        <a href="/delete/{{ note['id'] }}" class="btn btn-sm btn-outline-danger">🗑 حذف</a>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

</div>

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

✨ النتيجة النهائية:

بعد حفظ التعديلات وتشغيل التطبيق:

python app.py

ستلاحظ أن:

الواجهة أصبحت منسقة ومريحة للعين 🎨
الملاحظات تظهر كبطاقات مرتبة بشكل جميل باستخدام Flexbox
عند تمرير الماوس على الملاحظة، يظهر تأثير خفيف أنيق ✨

🧱 الخطوة 2: إضافة ملف CSS خارجي (اختياري ولكن منظم أكثر)

بدل كتابة التنسيقات داخل <style>، يمكنك إنشاء ملف جديد داخل مجلد اسمه static:

static/style.css

وأضف فيه:

body {
    background: linear-gradient(to right, #f9fafb, #eef2f3);
    font-family: "Tajawal", sans-serif;
}
.note-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.note-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.add-btn {
    background-color: #198754;
    color: white;
    border: none;
}
.add-btn:hover {
    background-color: #157347;
}
.notes-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}
.note {
    flex: 1 1 300px;
    max-width: 350px;
}

ثم في ملف index.html غيّر هذا السطر:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

إلى:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">

⚙️ الخطوة 3: تحسين تجربة المستخدم بإضافة أيقونة في تبويب الصفحة

داخل <head> أضف:

<link rel="icon" type="image/png" href="https://cdn-icons-png.flaticon.com/512/1828/1828911.png">

سيجعل التطبيق يظهر بأيقونة 📒 أنيقة في شريط المتصفح.

💾 الخطوة 4: تجربة كل شيء

1- شغل التطبيق:

python app.py

2- أضف عدة ملاحظات.
3- لاحظ التناسق والترتيب الجديد ✨
4- جرّب حذف ملاحظة وشاهد التنبيهات الفورية (flash message) تظهر بتصميم .

✅ النتيجة النهائية:

تطبيق منظم وجميل.
تنسيقات مفصولة في ملف خارجي.
واجهة متجاوبة تعمل بسلاسة على الجوال والكمبيوتر.

🧩 التمرين العملي:

المطلوب:
أضف تحسينات تصميمية إلى تطبيق الملاحظات الحالي بحيث يبدو أنيقًا ومتجاوبًا مع مختلف الأجهزة.

المهام المطلوبة في التمرين:

إضافة Bootstrap لتنسيق الصفحة.
تنظيم الملاحظات في شبكة (grid) باستخدام Flexbox.
جعل كل ملاحظة تظهر داخل بطاقة (card) أنيقة.
تخصيص أزرار الإضافة والحذف بألوان مميزة.
جعل التصميم متجاوبًا مع الهواتف الذكية.

💡 الحل الكامل خطوة بخطوة

الخطوة 1: تعديل قالب `index.html`

افتح الملف templates/index.html وعدّله كما يلي:

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <title>ملاحظاتي</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- تحميل Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- ملف التنسيق الخارجي -->
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body class="bg-light">

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">📒 ملاحظاتي</a>
  </div>
</nav>

<div class="container mt-4">
    <div class="text-center mb-4">
        <h2 class="fw-bold text-success">مرحبًا بك في تطبيق الملاحظات</h2>
        <p class="text-muted">أضف ملاحظاتك واحتفظ بها في قاعدة البيانات</p>
    </div>

    <form action="/add" method="POST" class="d-flex justify-content-center mb-4">
        <input type="text" name="content" class="form-control w-50 me-2" placeholder="أدخل ملاحظة جديدة..." required>
        <button type="submit" class="btn btn-success add-btn">➕ إضافة</button>
    </form>

    <div class="notes-container">
        {% for note in notes %}
        <div class="card shadow-sm note">
            <div class="card-body">
                <p class="card-text">{{ note.content }}</p>
                <a href="/delete/{{ note.id }}" class="btn btn-danger btn-sm">🗑 حذف</a>
            </div>
        </div>
        {% else %}
        <p class="text-center text-muted">لا توجد ملاحظات بعد.</p>
        {% endfor %}
    </div>
</div>

</body>
</html>

الخطوة 2: إنشاء ملف CSS في مجلد `static/style.css`

أنشئ مجلدًا باسم static داخل مشروعك، وأضف بداخله ملفًا جديدًا باسم style.css يحتوي على التنسيقات التالية:

body {
    background: linear-gradient(to right, #f9fafb, #eef2f3);
    font-family: "Tajawal", sans-serif;
}

.note {
    flex: 1 1 300px;
    max-width: 350px;
    margin: 10px;
}

.notes-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

.add-btn {
    background-color: #198754;
    color: white;
    border: none;
    transition: 0.3s ease;
}

.add-btn:hover {
    background-color: #157347;
    transform: scale(1.05);
}

.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

الخطوة 3: تجربة التطبيق

1- شغّل الخادم باستخدام:

python app.py

2- افتح المتصفح على:

http://127.0.0.1:5000/

3- جرّب:

إضافة ملاحظات جديدة.
حذف الملاحظات.
تصفّح التطبيق على الهاتف والكمبيوتر لتلاحظ التناسق والتجاوب الكامل 🎨

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

🎉 أصبح التطبيق الآن يبدو احترافيًا:

تصميم أنيق ومتجاوب.
أزرار واضحة وسهلة الاستخدام.
تأثيرات جميلة عند تمرير الفأرة على البطاقات.
تجربة مستخدم سلسة وممتعة.

الدرس السادس: "تحسين واجهة المستخدم باستخدام Bootstrap وFlexbox"

🎯 الهدف من الدرس:

🧩 الخطوة 1: تعديل ملف `index.html`

✨ النتيجة النهائية:

🧱 الخطوة 2: إضافة ملف CSS خارجي (اختياري ولكن منظم أكثر)

⚙️ الخطوة 3: تحسين تجربة المستخدم بإضافة أيقونة في تبويب الصفحة

💾 الخطوة 4: تجربة كل شيء

✅ النتيجة النهائية:

🧩 التمرين العملي:

المهام المطلوبة في التمرين:

💡 الحل الكامل خطوة بخطوة

الخطوة 1: تعديل قالب `index.html`

الخطوة 2: إنشاء ملف CSS في مجلد `static/style.css`

الخطوة 3: تجربة التطبيق

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

إرسال تعليق

وصف المدونة

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

Contact form

الدرس السادس: "تحسين واجهة المستخدم باستخدام Bootstrap وFlexbox"

🎯 الهدف من الدرس:

🧩 الخطوة 1: تعديل ملف index.html

✨ النتيجة النهائية:

🧱 الخطوة 2: إضافة ملف CSS خارجي (اختياري ولكن منظم أكثر)

⚙️ الخطوة 3: تحسين تجربة المستخدم بإضافة أيقونة في تبويب الصفحة

💾 الخطوة 4: تجربة كل شيء

✅ النتيجة النهائية:

🧩 التمرين العملي:

المهام المطلوبة في التمرين:

💡 الحل الكامل خطوة بخطوة

الخطوة 1: تعديل قالب index.html

الخطوة 2: إنشاء ملف CSS في مجلد static/style.css

الخطوة 3: تجربة التطبيق

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

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

إرسال تعليق

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

Contact form

🧩 الخطوة 1: تعديل ملف `index.html`

الخطوة 1: تعديل قالب `index.html`

الخطوة 2: إنشاء ملف CSS في مجلد `static/style.css`