Update index.html

index.html

@@ -7,10 +7,9 @@
     <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@600;700&display=swap" rel="stylesheet">
     
     <style>
-        /* إعدادات أساسية لضبط المقاسات على الجوال */
         * {
             box-sizing: border-box;
-            -webkit-tap-highlight-color: transparent; /* إخفاء مربع التحديد الأزرق عند اللمس في الجوال */
+            -webkit-tap-highlight-color: transparent; 
         }
         
         body {
@@ -27,7 +26,7 @@
         
         .container {
             width: 100%;
-            max-width: 400px; /* مقاس مثالي لشاشات الهواتف */
+            max-width: 400px; 
             background: white;
             padding: 30px 20px;
             border-radius: 24px;
@@ -84,7 +83,7 @@
         }
 
         button:active {
-            transform: scale(0.96); /* تأثير تفاعلي عند الضغط بالاصبع */
+            transform: scale(0.96); 
             box-shadow: 0 2px 5px rgba(44, 62, 80, 0.2);
         }
         
@@ -95,14 +94,22 @@
             box-shadow: 0 4px 10px rgba(39, 174, 96, 0.2);
         }
 
-        /* الكانفاس (الصورة المدمجة) */
+        /* الكانفاس أصبح مخفياً دائماً، نحن نستخدمه للرسم فقط وليس للعرض */
         canvas {
+            display: none !important; 
+        }
+
+        /* هذا هو عنصر الصورة الحقيقية الذي سيتم عرضه للمستخدم */
+        #finalImage {
             width: 100%;
             height: auto;
             margin-top: 25px;
             border-radius: 16px;
             box-shadow: 0 8px 16px rgba(0,0,0,0.1);
-            display: none; 
+            display: none; /* مخفي حتى تكتمل الصورة */
+            /* تحسينات اللمس للجوال */
+            -webkit-user-select: none;
+            user-select: none;
         }
 
         .hint {
@@ -125,6 +132,8 @@
         
         <canvas id="myCanvas"></canvas>
         
+        <img id="finalImage" alt="تهنئة رمضان لأسرة العصيل">
+        
         <button id="downloadBtn" onclick="downloadImage()">تحميل الصورة</button>
         <p id="downloadHint" class="hint">ملاحظة: إذا لم يعمل زر التحميل، اضغط مطولاً على الصورة واختر "حفظ الصورة".</p>
     </div>
@@ -150,38 +159,42 @@
                 return;
             }
 
+            // 1. الرسم على الكانفاس المخفي
             ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
-
             ctx.font = "bold 80px 'Cairo'"; 
             ctx.fillStyle = "#000000"; 
             ctx.textAlign = "center"; 
-            
             const xPosition = canvas.width / 2;
             const yPosition = canvas.height - 350; 
-
             ctx.fillText(name, xPosition, yPosition);
 
-            canvas.style.display = "block";
+            // 2. تحويل الرسمة إلى صورة حقيقية وعرضها (هذا هو الحل لمشكلة التعليق!)
+            const finalImage = document.getElementById('finalImage');
+            finalImage.src = canvas.toDataURL("image/png");
+            finalImage.style.display = "block";
+
+            // إظهار الأزرار
             document.getElementById('downloadBtn').style.display = "block";
             document.getElementById('downloadHint').style.display = "block";
             
-            // تمرير الشاشة تلقائياً للأسفل لرؤية الصورة وزر التحميل على الجوال
+            // التمرير للأسفل
             setTimeout(() => {
                 window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
             }, 100);
         }
 
         function downloadImage() {
+            // الآن نأخذ رابط التحميل من الصورة الحقيقية
             try {
-                const dataUrl = canvas.toDataURL("image/png");
+                const finalImgSrc = document.getElementById('finalImage').src;
                 const link = document.createElement('a');
                 link.download = 'ramadan-mubarak.png';
-                link.href = dataUrl;
+                link.href = finalImgSrc;
                 document.body.appendChild(link);
                 link.click();
                 document.body.removeChild(link);
             } catch (error) {
-                alert("عذراً، متصفحك يمنع التحميل المباشر لحماية الأمان. يرجى الضغط مطولاً على الصورة واختيار 'حفظ الصورة'.");
+                alert("عذراً، متصفحك يمنع التحميل المباشر. يرجى الضغط مطولاً على الصورة واختيار 'حفظ الصورة'.");
             }
         }
     </script>