Create love-message

[harfousha]

<title>رسالة جميلة مع قلوب متحركة</title> <style> body { margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #ffe6e6; /* Light pink */ overflow: hidden; font-family: 'Arial', sans-serif; position: relative; } canvas { display: block; } #message { position: absolute; top: 20px; text-align: center; color: #ff1493; /* Deep pink */ font-size: 30px; font-weight: bold; opacity: 0; animation: fadeIn 2s forwards; } #buttonContainer { position: absolute; bottom: 20px; text-align: center; } button { background-color: #ff69b4; /* Hot pink */ color: white; border: none; padding: 10px 20px; font-size: 18px; cursor: pointer; border-radius: 5px; transition: background-color 0.3s ease; } button:hover { background-color: #ff1493; /* Deep pink */ } #personalMessage { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(255, 182, 193, 0.8); /* Light pink with transparency */ padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); font-size: 24px; color: #ff1493; text-align: center; display: none; } @Keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } </style>

مرحبًا بك في عالم الحب والجمال ❤️

اضغط هنا لرؤية الرسالة الشخصية

غيداء، أنتِ نور حياتي وسبب سعادتي. كل حرف من اسمك يحمل في طياته الحب والجمال. ❤️

<script>
    const canvas = document.getElementById('heartsCanvas');
    const ctx = canvas.getContext('2d');

    // Set canvas dimensions
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    // Hearts properties
    const hearts = [];
    const heartCount = 50;

    // Initialize hearts
    for (let i = 0; i < heartCount; i++) {
        hearts.push({
            x: Math.random() * canvas.width,
            y: Math.random() * canvas.height,
            size: Math.random() * 30 + 10,
            speedX: Math.random() * 2 - 1,
            speedY: Math.random() * 2 - 1,
            color: `rgba(255, ${Math.random() * 100 + 100}, ${Math.random() * 100 + 100}, 0.8)`
        });
    }

    function drawHearts() {
        hearts.forEach(heart => {
            ctx.fillStyle = heart.color;
            ctx.beginPath();
            drawHeart(heart.x, heart.y, heart.size);
            ctx.fill();

            // Move hearts
            heart.x += heart.speedX;
            heart.y += heart.speedY;

            // Bounce off edges
            if (heart.x < 0 || heart.x > canvas.width) heart.speedX *= -1;
            if (heart.y < 0 || heart.y > canvas.height) heart.speedY *= -1;
        });
    }

    function drawHeart(x, y, size) {
        ctx.save();
        ctx.translate(x, y);
        ctx.scale(size / 100, size / 100);

        // Draw the heart shape
        ctx.moveTo(0, -50);
        ctx.bezierCurveTo(-30, -30, -30, 10, 0, 50);
        ctx.bezierCurveTo(30, 10, 30, -30, 0, -50);

        ctx.restore();
    }

    function draw() {
        // Clear the canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // Draw hearts
        drawHearts();

        // Loop the animation
        requestAnimationFrame(draw);
    }

    // Show personal message on button click
    const button = document.getElementById('showMessageButton');
    const personalMessage = document.getElementById('personalMessage');
    button.addEventListener('click', () => {
        personalMessage.style.display = 'block';
        button.style.display = 'none';
    });

    // Start the animation
    draw();
</script>

[harfousha]

<title>رسالة جميلة مع قلوب متحركة</title> <style> body { margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #ffe6e6; /* Light pink */ overflow: hidden; font-family: 'Arial', sans-serif; position: relative; } canvas { display: block; } #message { position: absolute; top: 20px; text-align: center; color: #ff1493; /* Deep pink */ font-size: 30px; font-weight: bold; opacity: 0; animation: fadeIn 2s forwards; } #buttonContainer { position: absolute; bottom: 20px; text-align: center; } button { background-color: #ff69b4; /* Hot pink */ color: white; border: none; padding: 10px 20px; font-size: 18px; cursor: pointer; border-radius: 5px; transition: background-color 0.3s ease; } button:hover { background-color: #ff1493; /* Deep pink */ } #personalMessage { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(255, 182, 193, 0.8); /* Light pink with transparency */ padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); font-size: 24px; color: #ff1493; text-align: center; display: none; } @Keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } </style>

مرحبًا بك في عالم الحب والجمال ❤️

اضغط هنا لرؤية الرسالة الشخصية

غيداء، أنتِ نور حياتي وسبب سعادتي. كل حرف من اسمك يحمل في طياته الحب والجمال. ❤️

<script>
    const canvas = document.getElementById('heartsCanvas');
    const ctx = canvas.getContext('2d');

    // Set canvas dimensions
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    // Hearts properties
    const hearts = [];
    const heartCount = 50;

    // Initialize hearts
    for (let i = 0; i < heartCount; i++) {
        hearts.push({
            x: Math.random() * canvas.width,
            y: Math.random() * canvas.height,
            size: Math.random() * 30 + 10,
            speedX: Math.random() * 2 - 1,
            speedY: Math.random() * 2 - 1,
            color: `rgba(255, ${Math.random() * 100 + 100}, ${Math.random() * 100 + 100}, 0.8)`
        });
    }

    function drawHearts() {
        hearts.forEach(heart => {
            ctx.fillStyle = heart.color;
            ctx.beginPath();
            drawHeart(heart.x, heart.y, heart.size);
            ctx.fill();

            // Move hearts
            heart.x += heart.speedX;
            heart.y += heart.speedY;

            // Bounce off edges
            if (heart.x < 0 || heart.x > canvas.width) heart.speedX *= -1;
            if (heart.y < 0 || heart.y > canvas.height) heart.speedY *= -1;
        });
    }

    function drawHeart(x, y, size) {
        ctx.save();
        ctx.translate(x, y);
        ctx.scale(size / 100, size / 100);

        // Draw the heart shape
        ctx.moveTo(0, -50);
        ctx.bezierCurveTo(-30, -30, -30, 10, 0, 50);
        ctx.bezierCurveTo(30, 10, 30, -30, 0, -50);

        ctx.restore();
    }

    function draw() {
        // Clear the canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // Draw hearts
        drawHearts();

        // Loop the animation
        requestAnimationFrame(draw);
    }

    // Show personal message on button click
    const button = document.getElementById('showMessageButton');
    const personalMessage = document.getElementById('personalMessage');
    button.addEventListener('click', () => {
        personalMessage.style.display = 'block';
        button.style.display = 'none';
    });

    // Start the animation
    draw();
</script>