Update index.html

index.html

@@ -20,7 +20,7 @@
           --text-muted: #aaa;
           --border-color: #333;
           --error-color: #EF665B;
-          --success-color: #28a745;
+          --success-color: #28a745; 
       }
       * {
           box-sizing: border-box;
@@ -66,45 +66,7 @@
           50% { background-position: 100% 50%; }
           100% { background-position: 0% 50%; }
       }
-      header {
-          display: flex; justify-content: space-between; align-items: center;
-          padding: 15px 20px; 
-          background-color: rgba(26, 26, 46, 0.7); 
-          backdrop-filter: blur(10px); 
-          border-bottom: 1px solid var(--border-color); 
-          box-shadow: 0 2px 10px rgba(0,0,0,0.3); 
-          width: 100%;
-          position: sticky; 
-          top: 0;
-          z-index: 100;
-      }
-      .logo-container { display: flex; align-items: center; }
-      .logo-container img { height: 35px; margin-left: 10px; }
-      .logo-shine {
-          position: relative;
-          overflow: hidden;
-      }
-      .logo-shine::after {
-          content: '';
-          position: absolute;
-          top: 0;
-          left: -100%;
-          width: 50%;
-          height: 100%;
-          background: linear-gradient(
-              90deg,
-              transparent,
-              rgba(255, 255, 255, 0.3),
-              transparent
-          );
-          transform: skewX(-25deg);
-          animation: shine-effect 5s infinite linear;
-      }
-      @keyframes shine-effect {
-          0% { left: -100%; }
-          50% { left: 150%; }
-          100% { left: 150%; }
-      }
+      
       main {
           flex-grow: 1; 
           display: flex;
@@ -119,7 +81,7 @@
       .form {
           display: flex;
           flex-direction: column;
-          gap: 15px; /* (تم تعديل المسافة) */
+          gap: 15px; 
           padding: 30px;
           border-radius: 10px; 
           position: relative;
@@ -172,7 +134,8 @@
           display: flex;
           align-items: center;
           justify-content: center;
-          text-align: center; /* (للعنصر label) */
+          text-align: center; 
+          text-decoration: none; 
       }
       .submit i { margin-left: 10px; }
       [dir="rtl"] .submit i { margin-left: 0; margin-right: 10px; }
@@ -182,6 +145,14 @@
           box-shadow: 0 6px 12px rgba(0, 123, 255, 0.4);
       }
       .submit:disabled { background: #555; cursor: not-allowed; box-shadow: none; }
+      
+      #download-btn {
+          background-color: var(--success-color); 
+      }
+      #download-btn:hover {
+          background-color: #218838; 
+      }
+
       .cancel-button {
           display: block; 
           width: 100%;
@@ -198,7 +169,7 @@
           margin-top: 10px; 
           transition: all 0.3s ease;
           text-align: center;
-          display: flex; /* (لإضافة الأيقونة) */
+          display: flex; 
           align-items: center;
           justify-content: center;
       }
@@ -217,14 +188,14 @@
         height: 20px;
         animation: spin 1s linear infinite;
         display: none;
-        margin: 15px auto 0; /* (توسيط) */
+        margin: 15px auto 0; 
       }
       #result-area {
           display:none;
           margin-top: 25px;
           border-top: 1px solid var(--border-color);
           padding-top: 25px;
-          text-align: center; /* (توسيط النتيجة) */
+          text-align: center; 
       }
       #result-img { 
           max-width: 100%; 
@@ -287,7 +258,7 @@
           font-size: 14px;
           width: 100%; 
           line-height: 1.4;
-          direction: rtl; /* (ضمان الاتجاه داخل الـ Toast) */
+          direction: rtl; 
       }
       .toast-close-btn {
           background: none;
@@ -306,52 +277,15 @@
       }
       #global-toast.success .toast-close-btn { color: #155724; }
       #global-toast.error .toast-close-btn { color: #71192F; }
-      footer {
-          background-color: rgba(26, 26, 46, 0.7); 
-          backdrop-filter: blur(10px);
-          color: #fff;
-          padding: 30px 20px;
-          text-align: center;
-          margin-top: auto; 
-          border-top: 1px solid var(--border-color);
-          width: 100%;
-      }
-      .footer-links-card {
-          margin: 0 auto;
-          border: 1px solid var(--border-color);
-          background: rgba(0,0,0,0.2);
-          padding: 20px;
-          border-radius: 12px;
-          max-width: 400px;
-          box-shadow: 0 0 20px rgba(0,0,0,0.3);
-      }
-      .footer-links-card a {
-          color: var(--text-muted);
-          text-decoration: none;
-          font-size: 1.1em;
-          transition: color 0.2s ease;
-          display: block; 
-          margin: 10px 0; 
-      }
-      .footer-links-card a:hover {
-          color: var(--primary-color);
-      }
-      @media (max-width: 380px) {
-          .logo-container img { height: 30px; }
-      }
+      
+      /* (تم حذف media query الخاص بـ logo-container) */
+      
     </style>
 </head>
 <body>
 
 <div id="app-container">
     
-  <header>
-      <div class="logo-container">
-          <img src="https://i.ibb.co/hJ2nq38z/clouddata.webp" alt="شعار CloudData" class="logo-shine">
-          <img src="https://i.ibb.co/v9zLrFg/skydata.webp" alt="شعار Skydata" class="logo-shine">
-      </div>
-  </header>
-
   <main>
     <div class="main-wrapper" id="loginWrapper">
       
@@ -378,21 +312,18 @@
           <div class="loader-spinner" id="loadingSpinner"></div>
 
           <div id="result-area">
-              <h3 style="color: var(--text-color);">النتيجة (اضغط مطولاً للحفظ):</h3>
+              <h3 style="color: var(--text-color);">النتيجة:</h3>
               <img id="result-img" alt="الصورة بعد إزالة الخلفية">
+              
+              <a href="#" id="download-btn" class="submit" style="display: none; margin-top: 15px;">
+                  <i class="fas fa-download"></i> تحميل الصورة
+              </a>
           </div>
       </div>
 
     </div>
   </main>
 
-  <footer>
-    <div class="footer-links-card">
-        <a href="Safety.html">شروط الاستخدام وسياسة الخصوصية</a>
-        <a href="aboutus.html">عن Skydata</a>
-    </div>
-  </footer>
-
   <div id="global-toast">
       <svg class="toast-icon" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
           <path d="m13 13h-2v-6h2zm0 4h-2v-2h2zm-1-15c-1.3132 0-2.61358.25866-3.82683.7612-1.21326.50255-2.31565 1.23915-3.24424 2.16773-1.87536 1.87537-2.92893 4.41891-2.92893 7.07107 0 2.6522 1.05357 5.1957 2.92893 7.0711.92859.9286 2.03098 1.6651 3.24424 2.1677 1.21325.5025 2.51363.7612 3.82683.7612 2.6522 0 5.1957-1.0536 7.0711-2.9289 1.8753-1.8754 2.9289-4.4189 2.9289-7.0711 0-1.3132-.2587-2.61358-.7612-3.82683-.5026-1.21326-1.2391-2.31565-2.1677-3.24424-.9286-.92858-2.031-1.66518-3.2443-2.16773-1.2132-.50254-2.5136-.7612-3.8268-.7612z"></path>
@@ -406,10 +337,11 @@
     // --- عناصر الواجهة ---
     const fileInput = document.getElementById('file-input');
     const submitBtn = document.getElementById('submit-btn');
-    const uploadLabel = document.getElementById('upload-label'); // (الزر الأخضر)
+    const uploadLabel = document.getElementById('upload-label'); 
     const loadingSpinner = document.getElementById('loadingSpinner');
     const resultArea = document.getElementById('result-area');
     const resultImg = document.getElementById('result-img');
+    const downloadBtn = document.getElementById('download-btn');
 
     // --- عناصر الإشعارات (Toast) ---
     const globalToast = document.getElementById('global-toast');
@@ -417,7 +349,7 @@
     const toastCloseBtn = document.getElementById('toast-close-btn');
     let toastTimer; 
 
-    // --- دالة إظهار الإشعارات (من login.html) ---
+    // --- دالة إظهار الإشعارات ---
     function showToast(message, type = 'success', duration = 5000) {
         if (toastTimer) clearTimeout(toastTimer);
         
@@ -440,30 +372,27 @@
     });
 
 
-    // --- معالج حدث اختيار الملف (مع التحقق من الحجم) ---
+    // --- معالج حدث اختيار الملف ---
     fileInput.addEventListener('change', () => {
-        // إخفاء الـ Toast القديم إذا كان موجوداً
         globalToast.classList.remove('show');
 
         if (fileInput.files.length > 0) {
             const file = fileInput.files[0];
             const MAX_SIZE = 10 * 1024 * 1024; // 10 MB
             
-            // *************************************
-            // * 9. التحقق من الحد الأقصى للحجم (10 ميغا)
-            // *************************************
             if (file.size > MAX_SIZE) {
-                showToast('حجم الملف كبير جداً. الحد الأقصى 10 ميجابايت.', 'error', 0); // (0 = يبقى ولا يختفي)
-                fileInput.value = ''; // (إلغاء اختيار الملف)
+                showToast('حجم الملف كبير جداً. الحد الأقصى 10 ميجابايت.', 'error', 0); 
+                fileInput.value = ''; 
                 submitBtn.style.display = 'none';
                 resultArea.style.display = 'none';
-                return; // (إنهاء الدالة)
+                downloadBtn.style.display = 'none'; 
+                return; 
             }
             
-            // إذا كان الحجم مقبولاً
-            showToast(`تم اختيار: ${file.name}`, 'success', 3000); // (إشعار نجاح)
-            submitBtn.style.display = 'block';
+            showToast(`تم اختيار: ${file.name}`, 'success', 3000); 
+            submitBtn.style.display = 'flex'; 
             resultArea.style.display = 'none';
+            downloadBtn.style.display = 'none'; 
         }
     });
 
@@ -471,20 +400,19 @@
     submitBtn.addEventListener('click', async () => {
         if (fileInput.files.length === 0) return;
 
-        // إخفاء الـ Toast القديم
         globalToast.classList.remove('show');
         
-        // استخدام مؤشر التحميل بدلاً من النص
         loadingSpinner.style.display = 'block';
         submitBtn.disabled = true;
-        uploadLabel.style.pointerEvents = 'none'; // (منع الضغط على زر الاختيار)
+        uploadLabel.style.pointerEvents = 'none'; 
         uploadLabel.style.opacity = '0.7';
+        downloadBtn.style.display = 'none'; 
 
         const formData = new FormData();
-        formData.append('file', fileInput.files[0]);
+        const file = fileInput.files[0];
+        formData.append('file', file);
 
         try {
-            // إرسال الصورة إلى /remove-bg في app.py
             const response = await fetch('/remove-bg', {
                 method: 'POST',
                 body: formData
@@ -492,19 +420,23 @@
 
             if (!response.ok) throw new Error('فشل المعالجة');
 
-            // استقبال الصورة النظيفة
             const imageBlob = await response.blob();
             const imageUrl = URL.createObjectURL(imageBlob);
             
             resultImg.src = imageUrl;
             resultArea.style.display = 'block';
+            
+            const originalFilename = file.name.split('.').slice(0, -1).join('.');
+            downloadBtn.download = `${originalFilename}-no-bg.png`;
+            downloadBtn.href = imageUrl;
+            downloadBtn.style.display = 'flex';
+
             showToast('اكتملت المعالجة بنجاح!', 'success', 4000);
 
         } catch (error) {
-            // استخدام الـ Toast لعرض الخطأ
             showToast('⚠️ حدث خطأ. حاول بصورة أخرى أو تأكد من اتصالك.', 'error', 0);
+            downloadBtn.style.display = 'none'; 
         } finally {
-            // إخفاء مؤشر التحميل وإعادة تفعيل الأزرار
             loadingSpinner.style.display = 'none';
             submitBtn.disabled = false;
             uploadLabel.style.pointerEvents = 'auto';