khaledmahfouz5/AL-Najeeb-System
1
0
نسخ 0
الشفرة المشكلات طلبات السحب Actions Packages المشاريع الإصدارات الويكي النشاط

- version : 0.5

تصفح المصدر 
- description : making a template.html and use it in index.html .
هذا الالتزام موجود في:
Khaled Mahfouz
2025-06-11 17:43:28 +03:00
الأصل e1ff741007
التزام de8970436c
2 ملفات معدلة مع 182 إضافات و170 حذوفات
تنزيل ملف التصحيح تنزيل ملف الاختلاف توسيع جميع الملفات طي جميع الملفات

49
templates/index.html
عرض الملف

@@ -1,42 +1,8 @@
<!DOCTYPE html> {% extends 'template.html' %}
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>بيانات الطلاب</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
body { font-family: 'Cairo', sans-serif; }
/* Style for disabled buttons */
button:disabled {
cursor: not-allowed;
opacity: 0.6;
}
</style>
</head>
<body class="bg-gray-50 text-gray-800">
<div class="container mx-auto p-4 sm:p-6 lg:p-8 max-w-6xl"> {% block title %}الصفحة الرئيسية{% endblock %} {# Specific title for this page #}
<div class="mb-6 space-y-3" aria-live="polite" aria-atomic="true">
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
{% set bg_color = 'bg-blue-100 border-blue-500 text-blue-700' %}
{% if category == 'success' %}{% set bg_color = 'bg-green-100 border-green-500 text-green-700' %}{% endif %}
{% if category == 'danger' %}{% set bg_color = 'bg-red-100 border-red-500 text-red-700' %}{% endif %}
{% if category == 'warning' %}{% set bg_color = 'bg-yellow-100 border-yellow-500 text-yellow-700' %}{% endif %}
<div class="{{ bg_color }} border-r-4 border-l-0 p-4 rounded-md shadow" role="alert">
<p class="font-bold">{{ message }}</p>
</div>
{% endfor %}
{% endif %}
{% endwith %}
</div>
{% block content %}
<header class="text-center mb-8"> <header class="text-center mb-8">
<h1 class="text-3xl sm:text-4xl font-bold text-gray-900">نظام إدارة الطلاب</h1> <h1 class="text-3xl sm:text-4xl font-bold text-gray-900">نظام إدارة الطلاب</h1>
<p class="text-gray-600 mt-2">أدخل بيانات الطلاب يدوياً أو قم باستيراد ملف CSV.</p> <p class="text-gray-600 mt-2">أدخل بيانات الطلاب يدوياً أو قم باستيراد ملف CSV.</p>
@@ -174,19 +140,17 @@
</div> </div>
</div> </div>
</div>
<script> <script>
// Get references to all necessary elements // Get references to all necessary elements
const csvFileInput = document.getElementById('csv-file-input'); const csvFileInput = document.getElementById('csv-file-input');
const chooseFileButton = document.getElementById('choose-file-button'); const chooseFileButton = document.getElementById('choose-file-button');
const fileNameDisplay = document.getElementById('file-name-display'); const fileNameDisplay = document.getElementById('file-name-display');
const submitImportButton = document.getElementById('submit-import-button'); // Added for clarity const submitImportButton = document.getElementById('submit-import-button');
const addManuallyButton = document.getElementById('add-manually-button'); const addManuallyButton = document.getElementById('add-manually-button');
const addStudentSection = document.getElementById('add-student-section'); const addStudentSection = document.getElementById('add-student-section');
const addStudentForm = document.getElementById('add-student-form'); const addStudentForm = document.getElementById('add-student-form');
const importForm = document.getElementById('import-form'); const importForm = document.getElementById('import-form');
const submitAddButton = document.getElementById('submit-add-button'); // Added for clarity const submitAddButton = document.getElementById('submit-add-button');
// When the "Choose File" button is clicked, it programmatically clicks the hidden file input. // When the "Choose File" button is clicked, it programmatically clicks the hidden file input.
chooseFileButton.addEventListener('click', () => { chooseFileButton.addEventListener('click', () => {
@@ -232,5 +196,4 @@
submitAddButton.textContent = 'جاري الحفظ...'; // "Saving..." submitAddButton.textContent = 'جاري الحفظ...'; // "Saving..."
}); });
</script> </script>
</body> {% endblock %}
</html>

49
templates/template.html Normal file
عرض الملف

@@ -0,0 +1,49 @@
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{# A block for specific page titles #}
<title>{% block title %}نظام إدارة الطلاب{% endblock %}</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
body { font-family: 'Cairo', sans-serif; }
/* Style for disabled buttons to provide visual feedback */
button:disabled {
cursor: not-allowed;
opacity: 0.6;
}
</style>
</head>
<body class="bg-gray-50 text-gray-800">
<div class="container mx-auto p-4 sm:p-6 lg:p-8 max-w-6xl">
{# Section for displaying Flask flashed messages #}
<div class="mb-6 space-y-3" aria-live="polite" aria-atomic="true">
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
{# Dynamically set background and text colors based on message category #}
{% set bg_color = 'bg-blue-100 border-blue-500 text-blue-700' %}
{% if category == 'success' %}{% set bg_color = 'bg-green-100 border-green-500 text-green-700' %}{% endif %}
{% if category == 'danger' %}{% set bg_color = 'bg-red-100 border-red-500 text-red-700' %}{% endif %}
{% if category == 'warning' %}{% set bg_color = 'bg-yellow-100 border-yellow-500 text-yellow-700' %}{% endif %}
<div class="{{ bg_color }} border-r-4 border-l-0 p-4 rounded-md shadow" role="alert">
<p class="font-bold">{{ message }}</p>
</div>
{% endfor %}
{% endif %}
{% endwith %}
</div>
{# This block will be filled by child templates #}
{% block content %}{% endblock %}
</div>
</body>
</html>