Update templates/weather_index.html

templates/weather_index.html

@@ -7,7 +7,6 @@
     <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
-        /* ... (الأنماط تبقى كما هي) ... */
         body {
             font-family: 'Cairo', sans-serif;
             background-color: #0b132b;
@@ -16,9 +15,7 @@
             min-height: 100vh;
             padding: 50px 20px;
             direction: rtl;
-            display: flex;
-            justify-content: center;
-            align-items: flex-start;
+            /* ✅ تم إزالة خصائص Flexbox التي كانت تمنع التمرير */
         }
         .container {
             background-color: #111a30;
@@ -29,6 +26,8 @@
             max-width: 500px;
             border: 1px solid #2a3a5a;
             text-align: center;
+            /* ✅ لضمان التوسيط الأفقي بعد إزالة Flex من body */
+            margin: 0 auto; 
         }
         h1 {
             color: #00aaff;
@@ -92,10 +91,10 @@
             justify-content: center;
             align-items: center;
         }
-        .temp-display i { /* استخدام أيقونات Font Awesome بدلاً من صور OpenWeatherMap */
+        .temp-display i { /* استخدام أيقونات Font Awesome */
             font-size: 0.8em;
             margin-left: 15px;
-            color: #FFD700; /* لون افتراضي للأيقونة */
+            color: #FFD700; 
         }
         .error-message {
             color: #ff6b6b;
@@ -109,7 +108,7 @@
         <h1><i class="fas fa-cloud-sun" style="margin-left: 10px;"></i> متتبع الطقس العالمي (مجاني 100%)</h1>
         
         <form id="weatherForm">
-            <input type="text" id="city_name" name="city_name" placeholder="أدخل اسم المدينة (مثال: Riyadh)" required>
+            <input type="text" id="city_name" name="city_name" placeholder="أدخل اسم المدينة (مثال: Cairo)" required>
             <button type="submit"><i class="fas fa-search"></i></button>
         </form>
         
@@ -121,7 +120,8 @@
     <script>
         // دالة مساعدة لتحويل رمز الطقس إلى أيقونة Font Awesome (بناءً على رموز WMO)
         function getWeatherIcon(code) {
-            if (code >= 0 && code <= 3) return 'fas fa-sun'; // صافي/مشمس جزئياً/غائم جزئياً
+            if (code === 0) return 'fas fa-sun'; // صافية
+            if (code >= 1 && code <= 3) return 'fas fa-cloud-sun'; // مشمس جزئياً/غائم جزئياً
             if (code >= 51 && code <= 55) return 'fas fa-cloud-drizzle'; // رذاذ
             if (code >= 61 && code <= 65) return 'fas fa-cloud-showers-heavy'; // مطر
             if (code >= 71 && code <= 75) return 'fas fa-snowflake'; // ثلج
@@ -158,30 +158,28 @@
                     resultBox.style.display = 'none';
                 } else {
                     const iconClass = getWeatherIcon(data.icon);
-
+                    const formattedTemp = Math.round(data.temp);
+                    const formattedFeelsLike = Math.round(data.feels_like);
+                    
                     resultBox.innerHTML = `
-                        <h2 style="color:#fff; margin-bottom: 20px;">${data.city}</h2>
+                        <h2 style="color:#fff; margin-bottom: 20px;">${data.city} (${data.country})</h2>
                         
                         <div class="temp-display">
                             <i class="${iconClass}"></i>
-                            <span>${Math.round(data.temp)}°C</span>
+                            <span>${formattedTemp}°C</span>
                         </div>
 
-                        <div class="result-item">
-                            <span class="label">الدولة:</span>
-                            <span class="value">${data.country}</span>
-                        </div>
                         <div class="result-item">
                             <span class="label">الحالة:</span>
                             <span class="value">${data.description}</span>
                         </div>
                         <div class="result-item">
-                            <span class="label">الرطوبة:</span>
-                            <span class="value">${data.humidity}</span>
+                            <span class="label">ملموسة كـ:</span>
+                            <span class="value">${formattedFeelsLike}°C</span>
                         </div>
                         <div class="result-item">
-                            <span class="label">ملموسة كـ:</span>
-                            <span class="value">${Math.round(data.feels_like)}°C</span>
+                            <span class="label">الرطوبة:</span>
+                            <span class="value">${data.humidity}</span>
                         </div>
                     `;
                     errorOutput.style.display = 'none';