Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create love-message #742

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Create love-message #742

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
162 changes: 162 additions & 0 deletions love-message
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,162 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
</head>
<body>
<canvas id="heartsCanvas"></canvas>
<div id="message">مرحبًا بك في عالم الحب والجمال ❤️</div>
<div id="buttonContainer">
<button id="showMessageButton">اضغط هنا لرؤية الرسالة الشخصية</button>
</div>
<div id="personalMessage">
غيداء، أنتِ نور حياتي وسبب سعادتي. كل حرف من اسمك يحمل في طياته الحب والجمال. ❤️
</div>

<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>
</body>
</html>