إنشاء قالب HTML جميل
الآن دعونا نجعل تطبيقنا أكثر جمالاً بإضافة قالب HTML مع CSS
templates/index.html
1
<!-- قالب HTML جميل -->
2
<!DOCTYPE html>
3
<html lang="ar" dir="rtl">
4
<head>
5
<meta charset="UTF-8">
6
<title>تطبيقي السحابي</title>
7
<script src="https://cdn.tailwindcss.com"></script>
8
</head>
9
<body class="bg-gradient-to-br from-blue-500 to-purple-600 min-h-screen">
10
<div class="container mx-auto p-8">
11
<div class="bg-white rounded-lg shadow-xl p-8 text-center">
12
<h1 class="text-4xl font-bold text-gray-800 mb-4">
13
🎉 مرحباً بك في تطبيقي السحابي!
14
</h1>
15
<p class="text-xl text-gray-400 mb-8">
16
هذا أول تطبيق ويب بنيته ونشرته على السحابة
17
</p>
18
<div class="grid grid-cols-3 gap-4 mt-8">
19
<div class="bg-blue-100 p-4 rounded">
20
<h3 class="font-bold">🐍 Python</h3>
21
<p>Flask Framework</p>
22
</div>
23
<div class="bg-green-100 p-4 rounded">
24
<h3 class="font-bold">🐳 Docker</h3>
25
<p>محتوية</p>
26
</div>
27
<div class="bg-orange-100 p-4 rounded">
28
<h3 class="font-bold">☁️ AWS</h3>
29
<p>السحابة</p>
30
</div>
31
</div>
32
</div>
33
</div>
34
</body>
35
</html>
معاينة النتيجة في المتصفح
🎉 مرحباً بك في تطبيقي السحابي!
هذا أول تطبيق ويب بنيته ونشرته على السحابة
🐍 Python
Flask Framework
🐳 Docker
محتوية
☁️ AWS
السحابة
تحديث app.py لاستخدام القالب
الكود الجديد:
1
# استيراد مكتبات Flask
2
from flask import Flask, render_template
3
4
# إنشاء التطبيق
5
app = Flask(__name__)
6
7
# المسار الرئيسي مع القالب
8
@app.route('/')
9
def home():
10
return render_template('index.html')
11
12
if __name__ == '__main__':
13
app.run(debug=True)
الخطوات:
1
إنشاء مجلد القوالب
أنشئ مجلد جديد باسم templates/ في نفس مجلد app.py
2
حفظ ملف HTML
احفظ كود HTML في ملف جديد داخل مجلد templates باسم index.html
3
استيراد render_template
أضف render_template إلى استيراد Flask في بداية الملف
4
تحديث دالة home
غيّر return إلى render_template('index.html')
اليوم الثاني: إنشاء قالب HTML
مرحباً بك في اليوم الثاني! 🌟