كل عام وانتم بخير

[sozansada-rgb]

<title>معايدة عيد الفطر - المفتشة سناء عابد بكري</title> <style> :root { --main-color: #D4AF37; } body { font-family: 'Cairo', sans-serif; background: #f0f2f5; margin: 0; padding: 20px; display: flex; flex-direction: column; align-items: center; } .container { max-width: 1000px; background: #fff; padding: 30px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); display: grid; grid-template-columns: 1fr 1fr; gap: 30px; } @media (max-width: 800px) { .container { grid-template-columns: 1fr; } }

    .header { text-align: center; grid-column: 1 / -1; margin-bottom: 20px; }
    .header h1 { font-family: 'Amiri', serif; color: #444; margin: 0; font-size: 32px; }
    .header p { color: #888; margin: 5px 0; }

    .form-side { display: flex; flex-direction: column; gap: 15px; text-align: right; }
    label { font-weight: bold; color: #555; font-size: 14px; }
    input[type="text"] { padding: 12px; border: 2px solid #eee; border-radius: 10px; font-family: 'Cairo'; outline: none; transition: 0.3s; }
    input[type="text"]:focus { border-color: var(--main-color); }
    
    /* خيارات الإطارات */
    .frames-container { display: flex; gap: 10px; margin-top: 5px; }
    .frame-circle { width: 45px; height: 45px; border-radius: 50%; cursor: pointer; border: 3px solid white; box-shadow: 0 0 5px rgba(0,0,0,0.2); transition: 0.3s; }
    .frame-circle.active { transform: scale(1.2); border-color: #333; }

    .btn { padding: 15px; border: none; border-radius: 10px; cursor: pointer; font-family: 'Cairo'; font-weight: bold; font-size: 16px; transition: 0.3s; color: white; text-decoration: none; text-align: center; }
    .btn-download { background: #5c5e4e; margin-top: 10px; }
    .btn-whatsapp { background: #25D366; display: flex; align-items: center; justify-content: center; gap: 10px; }
    .btn:hover { opacity: 0.9; transform: translateY(-2px); }

    .preview-side { display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fafafa; border-radius: 15px; padding: 20px; border: 2px dashed #ddd; }
    #canvasPreview { max-width: 100%; height: auto; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
    canvas { display: none; } /* الكانفاس الحقيقي مخفي */
</style>

<div class="header">
    <h1>معايدة عيد الفطر السعيد</h1>
    <p>من المفتشة سناء عابد بكري وطاقم الإرشاد والاستشارة</p>
</div>

<div class="container">
    <!-- جهة الإدخال -->
    <div class="form-side">
        <label>اسم المربية الفاضلة:</label>
        <input type="text" id="teacherName" placeholder="اكتبي اسمك هنا لظهوره على البطاقة" oninput="drawCard()">

        <label>صورتكِ الشخصية (اختياري):</label>
        <input type="file" id="imageInput" accept="image/*" onchange="handleImage(this)">

        <label>اختاري لون ونمط البطاقة:</label>
        <div class="frames-container">
            <div class="frame-circle active" style="background: #D4AF37;" onclick="changeTheme('#D4AF37', this)"></div>
            <div class="frame-circle" style="background: #2D6A4F;" onclick="changeTheme('#2D6A4F', this)"></div>
            <div class="frame-circle" style="background: #C1121F;" onclick="changeTheme('#C1121F', this)"></div>
            <div class="frame-circle" style="background: #1D3557;" onclick="changeTheme('#1D3557', this)"></div>
            <div class="frame-circle" style="background: #8338EC;" onclick="changeTheme('#8338EC', this)"></div>
        </div>

        <button class="btn btn-download" onclick="downloadCard()">⬇️ تحميل البطاقة على جهازك</button>
        
        <a id="whatsappLink" class="btn btn-whatsapp" onclick="shareOnWhatsApp()">
            ارسال عبر الواتساب
        </a>
        <p style="font-size: 11px; color: #999; text-align: center;">* حمّلي البطاقة أولاً ثم أرفقيها في الواتساب</p>
    </div>

    <!-- جهة المعاينة -->
    <div class="preview-side">
        <span style="margin-bottom: 10px; font-size: 14px; font-weight: bold;">معاينة حية للبطاقة:</span>
        <img id="canvasPreview" src="" alt="المعاينة">
    </div>
</div>

<!-- الكانفاس المخفي للمعالجة -->
<canvas id="mainCanvas" width="800" height="1000"></canvas>

<script>
    const canvas = document.getElementById('mainCanvas');
    const ctx = canvas.getContext('2d');
    const preview = document.getElementById('canvasPreview');
    
    let currentTheme = '#D4AF37';
    let userImage = null;

    // 1. تغيير اللون (الثيم) وتحديث البطاقة فوراً
    function changeTheme(color, element) {
        currentTheme = color;
        document.querySelectorAll('.frame-circle').forEach(c => c.classList.remove('active'));
        element.classList.add('active');
        drawCard(); // إعادة الرسم فوراً باللون الجديد
    }

    // 2. معالجة الصورة المرفوعة
    function handleImage(input) {
        if (input.files && input.files[0]) {
            const reader = new FileReader();
            reader.onload = function(e) {
                const img = new Image();
                img.onload = function() {
                    userImage = img;
                    drawCard();
                };
                img.src = e.target.result;
            }
            reader.readAsDataURL(input.files[0]);
        }
    }

    // 3. المحرك الرئيسي للرسم (يرسم كل شيء)
    function drawCard() {
        const name = document.getElementById('teacherName').value || "اسم المربية";

        // تنظيف الخلفية
        ctx.fillStyle = "#FFFFFF";
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // رسم الإطار الخارجي
        ctx.strokeStyle = currentTheme;
        ctx.lineWidth = 35;
        ctx.strokeRect(17, 17, canvas.width - 34, canvas.height - 34);

        // رسم إطار داخلي رفيع
        ctx.lineWidth = 2;
        ctx.strokeRect(55, 55, canvas.width - 110, canvas.height - 110);

        // رسم الصورة الشخصية (دائرة)
        if (userImage) {
            const size = 320;
            const x = canvas.width / 2;
            const y = 280;
            ctx.save();
            ctx.beginPath();
            ctx.arc(x, y, size/2, 0, Math.PI * 2);
            ctx.closePath();
            ctx.clip();
            ctx.drawImage(userImage, x - size/2, y - size/2, size, size);
            ctx.restore();
            ctx.strokeStyle = currentTheme;
            ctx.lineWidth = 8;
            ctx.stroke();
        } else {
            // شكل افتراضي إذا لم توجد صورة
            ctx.fillStyle = "#f3f3f3";
            ctx.beginPath();
            ctx.arc(canvas.width/2, 280, 100, 0, Math.PI * 2);
            ctx.fill();
        }

        // كتابة النصوص
        ctx.textAlign = "center";
        ctx.direction = "rtl";

        // تهنئة العيد
        ctx.fillStyle = "#333";
        ctx.font = "bold 50px Cairo";
        ctx.fillText("كل عام وأنتِ بخير", canvas.width/2, 530);

        // طاقم الإرشاد
        ctx.font = "24px Cairo";
        ctx.fillStyle = "#666";
        ctx.fillText("من المفتشة سناء عابد بكري", canvas.width/2, 600);
        ctx.fillText("وطاقم الإرشاد والاستشارة", canvas.width/2, 645);

        // اسم المربية (الجزء الأهم)
        ctx.fillStyle = currentTheme;
        ctx.font = "bold 75px Amiri";
        ctx.fillText(name, canvas.width/2, 800);

        // زخرفة تحتية
        ctx.font = "35px Cairo";
        ctx.fillText("🌙 عيد فطر سعيد 🌙", canvas.width/2, 920);

        // تحديث المعاينة الحية
        preview.src = canvas.toDataURL("image/png");
    }

    // 4. وظيفة التحميل
    function downloadCard() {
        const link = document.createElement('a');
        const name = document.getElementById('teacherName').value || "مربية";
        link.download = معايدة_عيد_الفطر_${name}.png;
        link.href = canvas.toDataURL("image/png");
        link.click();
    }

    // 5. وظيفة الواتساب
    function shareOnWhatsApp() {
        const name = document.getElementById('teacherName').value || "زميلتي";
        const message = أهلاً بكِ.. صممت بطاقة معايدة عيد الفطر الخاصة بي من المفتشة سناء عابد بكري. كل عام وأنتِ بخير!;
        const encodedMessage = encodeURIComponent(message);
        window.open(https://wa.me/?text=${encodedMessage}, '_blank');
    }

    // تشغيل الرسم لأول مرة عند فتح الصفحة
    window.onload = drawCard;
</script>