<title>رسالة اعتذار ❤️</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
min-height:100vh;
background:linear-gradient(135deg,#ffc0cb,#ff9eb5);
display:flex;
justify-content:center;
align-items:center;
overflow:hidden;
font-family:'Marhey',sans-serif;
}
/* القلوب المتحركة */
.floating-heart{
position:absolute;
color:#ff5c8a;
font-size:25px;
animation:float 6s linear infinite;
opacity:.7;
}
@Keyframes float{
0%{
transform:translateY(100vh) rotate(0);
}
100%{
transform:translateY(-10vh) rotate(360deg);
}
}
/* المحتوى */
.container{
text-align:center;
position:relative;
z-index:2;
}
/* اللوجو */
.logo{
display:flex;
justify-content:center;
align-items:center;
gap:12px;
font-size:80px;
font-weight:bold;
margin-bottom:10px;
}
.o{
color:#89CFF0;
}
.n{
color:#8A2BE2;
}
.love{
color:#ff4f8b;
animation:pulse 1s infinite;
}
@Keyframes pulse{
50%{
transform:scale(1.3);
}
}
/* القلب الكبير */
.big-heart{
font-size:100px;
color:#ff4f8b;
animation:pulse 1.2s infinite;
}
/* الظرف */
.envelope{
width:260px;
height:170px;
background:white;
margin:30px auto;
position:relative;
border-radius:12px;
cursor:pointer;
box-shadow:0 15px 30px rgba(0,0,0,.2);
transition:.5s;
}
.envelope::before{
content:"";
position:absolute;
top:0;
left:0;
border-left:130px solid transparent;
border-right:130px solid transparent;
border-top:85px solid #ff8fb3;
transform-origin:top;
transition:.8s;
}
.envelope.open::before{
transform:rotateX(180deg);
}
/* الورقة داخل الظرف */
.letter{
position:absolute;
width:90%;
left:5%;
top:20px;
background:white;
padding:20px;
border-radius:10px;
box-shadow:0 5px 20px rgba(0,0,0,.2);
transition:1s;
opacity:0;
z-index:-1;
}
.envelope.open .letter{
top:-190px;
opacity:1;
z-index:5;
}
.letter h2{
color:#ff4f8b;
margin-bottom:10px;
}
.letter p{
font-size:16px;
line-height:2;
}
/* الكلام تحت الظرف */
.open-text{
font-size:22px;
font-weight:bold;
color:#fff;
}
/* مكان الرد */
.reply-box{
display:none;
margin-top:40px;
}
.reply-box h2{
color:white;
margin-bottom:15px;
}
textarea{
width:320px;
height:130px;
border:none;
border-radius:15px;
padding:15px;
font-size:18px;
font-family:'Marhey',sans-serif;
outline:none;
resize:none;
}
/* الزر */
button{
margin-top:15px;
padding:14px 35px;
border:none;
border-radius:30px;
background:#ff4f8b;
color:white;
font-size:18px;
font-family:'Marhey',sans-serif;
cursor:pointer;
transition:.3s;
}
button:hover{
transform:scale(1.1);
background:#e91e63;
}
</style>
❤
❤
❤
❤
❤
حبيبتي ❤️
أنا آسف لو زعلتك في يوم،
مكنش قصدي أضايقك أو أوجعك.
إنتِ شخص غالي عندي،
ونفسي نرجع زي الأول وأحسن ❤️
افتحي الظرف 💌
اكتبي ردك 💖
<textarea id="message" placeholder="اكتبي رسالتك هنا..."></textarea>
إرسال الرسالة 💌
<script>
function openEnvelope(){
document.querySelector(".envelope")
.classList.add("open");
document.querySelector(".open-text")
.innerHTML="تم فتح الرسالة ❤️";
setTimeout(()=>{
document.getElementById("replyBox")
.style.display="block";
},1200);
}
// إرسال الرد للواتساب
function sendWhatsApp(){
let message = document.getElementById("message").value;
if(message.trim()==""){
alert("اكتبي الرسالة الأول ❤️");
return;
}
let phone="201122468222";
let url=
"https://wa.me/"+phone+
"?text="+encodeURIComponent(message);
window.open(url,"_blank");
}
</script>
O
❤
N
حبيبتي ❤️
أنا آسف لو زعلتك في يوم،
مكنش قصدي أضايقك أو أوجعك.
إنتِ شخص غالي عندي،
ونفسي نرجع زي الأول وأحسن ❤️
اكتبي ردك 💖
<textarea id="message" placeholder="اكتبي رسالتك هنا..."></textarea>إرسال الرسالة 💌
function openEnvelope(){
document.querySelector(".envelope")
.classList.add("open");
document.querySelector(".open-text")
.innerHTML="تم فتح الرسالة ❤️";
setTimeout(()=>{
document.getElementById("replyBox")
.style.display="block";
},1200);
}
// إرسال الرد للواتساب
function sendWhatsApp(){
let message = document.getElementById("message").value;
if(message.trim()==""){
alert("اكتبي الرسالة الأول ❤️");
return;
}
let phone="201122468222";
let url=
"https://wa.me/"+phone+
"?text="+encodeURIComponent(message);
window.open(url,"_blank");
}
</script>