Update index.html

index.html

@@ -2,84 +2,131 @@
 <html lang="ar" dir="rtl">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <title>تهنئة رمضان</title>
-    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@700&display=swap" rel="stylesheet">
+    <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; /* إخفاء مربع التحديد الأزرق عند اللمس في الجوال */
+        }
+        
         body {
             font-family: 'Cairo', sans-serif;
-            background-color: #f4f4f9;
+            background-color: #eef2f5;
             text-align: center;
-            padding: 20px;
+            margin: 0;
+            padding: 15px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
         }
+        
         .container {
-            max-width: 600px;
-            margin: 0 auto;
+            width: 100%;
+            max-width: 400px; /* مقاس مثالي لشاشات الهواتف */
             background: white;
-            padding: 20px;
-            border-radius: 15px;
-            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+            padding: 30px 20px;
+            border-radius: 24px;
+            box-shadow: 0 10px 25px rgba(0,0,0,0.05);
+        }
+
+        h2 {
+            font-size: 22px;
+            color: #2c3e50;
+            margin-top: 0;
+            margin-bottom: 5px;
+            line-height: 1.4;
         }
+
+        p {
+            font-size: 14px;
+            color: #7f8c8d;
+            margin-bottom: 25px;
+        }
+        
         input[type="text"] {
-            width: 80%;
-            padding: 10px;
-            margin: 15px 0;
-            font-size: 18px;
+            width: 100%;
+            padding: 15px;
+            margin-bottom: 15px;
+            font-size: 16px;
+            font-weight: 600;
             font-family: 'Cairo', sans-serif;
-            border: 2px solid #ccc;
-            border-radius: 8px;
+            border: 2px solid #e0e6ed;
+            border-radius: 14px;
+            text-align: center;
+            transition: 0.3s;
+            background-color: #f8fafc;
+        }
+
+        input[type="text"]:focus {
+            border-color: #2c3e50;
+            background-color: #ffffff;
+            outline: none;
         }
+        
         button {
+            width: 100%;
             background-color: #2c3e50;
             color: white;
             border: none;
-            padding: 10px 20px;
+            padding: 16px;
             font-size: 18px;
+            font-weight: 700;
             font-family: 'Cairo', sans-serif;
-            border-radius: 8px;
+            border-radius: 14px;
             cursor: pointer;
-            transition: 0.3s;
+            transition: all 0.2s ease;
+            box-shadow: 0 4px 10px rgba(44, 62, 80, 0.2);
+        }
+
+        button:active {
+            transform: scale(0.96); /* تأثير تفاعلي عند الضغط بالاصبع */
+            box-shadow: 0 2px 5px rgba(44, 62, 80, 0.2);
         }
-        button:hover { background-color: #1a252f; }
         
         #downloadBtn {
             background-color: #27ae60;
-            display: none; /* مخفي حتى يتم إنشاء الصورة */
+            display: none; 
             margin-top: 15px;
+            box-shadow: 0 4px 10px rgba(39, 174, 96, 0.2);
         }
-        #downloadBtn:hover { background-color: #2ecc71; }
-        
-        /* إخفاء الكانفاس لتجنب تشوه التصميم، سنعرضه فقط عند الحاجة */
+
+        /* الكانفاس (الصورة المدمجة) */
         canvas {
-            max-width: 100%;
+            width: 100%;
             height: auto;
-            margin-top: 20px;
-            border-radius: 10px;
+            margin-top: 25px;
+            border-radius: 16px;
+            box-shadow: 0 8px 16px rgba(0,0,0,0.1);
             display: none; 
         }
+
         .hint {
-            font-size: 14px;
-            color: #7f8c8d;
-            margin-top: 10px;
+            font-size: 12px;
+            color: #95a5a6;
+            margin-top: 15px;
             display: none;
+            line-height: 1.6;
         }
     </style>
 </head>
 <body>
 
     <div class="container">
-        <h2>🌙 بطاقة تهنئة رمضان لأسرة العصيل 🌙</h2>
+        <h2>بطاقة تهنئة رمضان<br>لأسرة العصيل</h2>
         <p>أدخل اسمك لتظهر لك التهنئة المخصصة</p>
         
         <input type="text" id="userName" placeholder="اكتب اسمك هنا...">
-        <br>
         <button onclick="generateCard()">إنشاء البطاقة</button>
         
         <canvas id="myCanvas"></canvas>
-        <br>
+        
         <button id="downloadBtn" onclick="downloadImage()">تحميل الصورة</button>
-        <p id="downloadHint" class="hint">ملاحظة: إذا لم يعمل زر التحميل، اضغط مطولاً على الصورة (أو كليك يمين) واختر "حفظ الصورة".</p>
+        <p id="downloadHint" class="hint">ملاحظة: إذا لم يعمل زر التحميل، اضغط مطولاً على الصورة واختر "حفظ الصورة".</p>
     </div>
 
     <script>
@@ -87,10 +134,7 @@
         const ctx = canvas.getContext('2d');
         const image = new Image();
         
-        // حل مشكلة أمان المتصفحات للصور
         image.crossOrigin = "Anonymous";
-        
-        // اسم صورتك
         image.src = 'template.jpg'; 
 
         image.onload = function() {
@@ -108,25 +152,25 @@
 
             ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
 
-            // 📍 هنا تعدل حجم الخط (غير الرقم 45)
             ctx.font = "bold 80px 'Cairo'"; 
             ctx.fillStyle = "#000000"; 
             ctx.textAlign = "center"; 
             
             const xPosition = canvas.width / 2;
-            
-            // 📍 هنا تعدل الارتفاع والنزول (غير الرقم 135)
             const yPosition = canvas.height - 350; 
 
             ctx.fillText(name, xPosition, yPosition);
 
-            // إظهار الصورة والزر والملاحظة
             canvas.style.display = "block";
-            document.getElementById('downloadBtn').style.display = "inline-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");
@@ -137,7 +181,7 @@
                 link.click();
                 document.body.removeChild(link);
             } catch (error) {
-                alert("عذراً، متصفحك يمنع التحميل المباشر لحماية الأمان. يرجى الضغط مطولاً (أو كليك يمين) على الصورة واختيار 'حفظ الصورة'.");
+                alert("عذراً، متصفحك يمنع التحميل المباشر لحماية الأمان. يرجى الضغط مطولاً على الصورة واختيار 'حفظ الصورة'.");
             }
         }
     </script>