رسائل مبطنة
<style>
/* --- تصميم الحاوية الرئيسية --- */
#prank-container {
font-family: 'Cairo', 'Tajawal', sans-serif; /* خطوط عربية جميلة */
max-width: 500px;
margin: 30px auto;
padding: 25px;
border: 1px solid #ddd;
border-radius: 15px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
text-align: center;
background-color: #f9f9f9;
direction: rtl; /* لضمان التنسيق من اليمين لليسار */
}
/* --- تصميم الصورة --- */
#prank-image {
max-width: 150px;
border-radius: 50%;
margin-bottom: 20px;
border: 3px solid #eee;
}
/* --- تصميم صندوق الرسالة --- */
#message-box {
background-color: #fff;
padding: 20px;
border-radius: 10px;
border: 1px dashed #ccc;
margin-bottom: 20px;
}
/* --- تصميم أسطر الرسالة --- */
.prank-line {
margin: 4px 0;
font-size: 1.2em;
color: #333;
line-height: 1.6;
transition: all 0.5s ease-in-out; /* حركة ناعمة عند تغيير اللون */
}
/* --- ستايل السطر الباهت (بعد كشف المقلب) --- */
.prank-line.faded {
color: #d8d8d8;
font-size: 0.9em;
text-decoration: line-through;
}
/* --- تصميم نص التعليمات --- */
#instruction-text {
font-size: 1em;
color: #800080; /* لون بنفسجي مميز */
margin-bottom: 15px;
font-style: italic;
}
/* --- تصميم الأزرار --- */
.prank-btn {
padding: 12px 25px;
font-size: 1em;
font-weight: bold;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s, transform 0.2s;
margin-top: 10px;
}
#reveal-btn {
background-color: #007bff; /* أزرق */
}
#reveal-btn:hover {
background-color: #0056b3;
transform: scale(1.05);
}
#reset-btn {
background-color: #28a745; /* أخضر */
}
#reset-btn:hover {
background-color: #218838;
transform: scale(1.05);
}
/* --- تصميم قسم كشف المقلب (مخفي بالأساس) --- */
#result-section {
display: none; /* إخفاء هذا القسم في البداية */
margin-top: 25px;
padding-top: 20px;
border-top: 1px solid #eee;
}
#result-emoji {
font-size: 4em; /* حجم الإيموجي */
}
#result-text {
font-size: 1.5em;
font-weight: bold;
color: #dc3545; /* أحمر */
margin: 10px 0;
}
</style>
<div id="prank-container"><div style="text-align: center;"><img alt="صورة عتاب" id="prank-image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilDfQeijlh6yhxZIg2gUMFgvZ0uPqiS3I8p9fgSUQ_bEBlqJoFtAaYA4OuDSU7E-I7En2ie_-etvOUbQl9S3sT83Y3rIldAh8V5_PFeHt2fQm-1G9bGHqdk-_9PzizYyznbevYk0ktwL0aUW4Txukl-UTpZHIFNKc9O9FBpnZlmozehx9fA3XTdnskxq4/s16000/Gemini_Generated_Image_u5ayw2u5ayw2u5ay.png" /></div>
<div id="message-box">
</div>
<p id="instruction-text" style="text-align: center;">لك حق الرد، ولكن قبل أن تستعجل بالرد اقرأ سطرًا واترك سطرًا!</p>
<button class="prank-btn" id="reveal-btn">وضح اكثر</button>
<div id="result-section">
<div id="result-emoji" style="text-align: center;">😜</div>
<p id="result-text" style="text-align: center;">مقلب! وتعيش وتاكل غيرها</p>
<button class="prank-btn" id="reset-btn">جرب مقلب آخر</button>
</div>
</div>
<script>
// --- قائمة المقالب والرسائل (10 رسائل) ---
const pranks = [
{ // 1
lines: ["أنا ندمان على","إني حبيتك في يوم من","الأيام اللي راحت","لأنك ماتستاهل والأيام","اللي ماعرفتك فيها","كانت سعادة لي","لأنك أروع إنسان"," في الغدر والمكر","قابلته في حياتي"],
image: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlBAJSXOctnxQP1mio7ZxZyZRhNCA0tNg9nVk7rhRJUHrfynIw_kJyQLF_BEstXZIMR6d2IOvMTOnlwnPYgifKj2bQuVkEWNwIo-JrBoO_z-nfeFScAOXIQEkScJBsHKVJ0JsDHstsenI_gfIAANF89h6xh_nJwq9t-kYB0Nx87X7TUzSgR-sNh9Qohys/s225/image.png"
},
{ // 2
lines: ["بصراحة أنا لازم أعترف","إني ما أطيقك أبدا","ووجودك في حياتي","هو أكبر غلطة ارتكبتها","يجيب لي الهم والغم","لكن هذا كله كذب","لأنك شخص غالي","وما أتخيل يومي بدونك","يا أحلى حبيب"],
image: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlBAJSXOctnxQP1mio7ZxZyZRhNCA0tNg9nVk7rhRJUHrfynIw_kJyQLF_BEstXZIMR6d2IOvMTOnlwnPYgifKj2bQuVkEWNwIo-JrBoO_z-nfeFScAOXIQEkScJBsHKVJ0JsDHstsenI_gfIAANF89h6xh_nJwq9t-kYB0Nx87X7TUzSgR-sNh9Qohys/s225/image.png"
},
{ // 3
lines: ["عندي كلام بخاطري","وأنت إنسان ما تستاهل","لازم أقوله لك اليوم","أي كلمة طيبة مني","كل الصفات الحلوة فيك","هي مجرد وهم وكذبة","أنت أطيب قلب وأوفى","شخص عرفته بحياتي كلها","وهذا هو الصدق"],
image: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlBAJSXOctnxQP1mio7ZxZyZRhNCA0tNg9nVk7rhRJUHrfynIw_kJyQLF_BEstXZIMR6d2IOvMTOnlwnPYgifKj2bQuVkEWNwIo-JrBoO_z-nfeFScAOXIQEkScJBsHKVJ0JsDHstsenI_gfIAANF89h6xh_nJwq9t-kYB0Nx87X7TUzSgR-sNh9Qohys/s225/image.png"
},
{ // 4
lines: ["لما أفكر فيك","يومي كله يخرب","يومي يصير أحلى","وأحس بالندم لأني عرفتك","وكل شي حولي يبتسم","وما أطيق سيرتك أبدا","يا أغلى إنسان"],
image: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlBAJSXOctnxQP1mio7ZxZyZRhNCA0tNg9nVk7rhRJUHrfynIw_kJyQLF_BEstXZIMR6d2IOvMTOnlwnPYgifKj2bQuVkEWNwIo-JrBoO_z-nfeFScAOXIQEkScJBsHKVJ0JsDHstsenI_gfIAANF89h6xh_nJwq9t-kYB0Nx87X7TUzSgR-sNh9Qohys/s225/image.png"
},
{ // 5
lines: ["أنت الشخص الوحيد","اللي مستحيل أثق فيه","اللي أئتمنه على أسراري","لأنك تفشي كل شي","وأنا مرتاح معاك","وما أصدقك بكلمة","يا صاحب الطبع الأصيل"],
image: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlBAJSXOctnxQP1mio7ZxZyZRhNCA0tNg9nVk7rhRJUHrfynIw_kJyQLF_BEstXZIMR6d2IOvMTOnlwnPYgifKj2bQuVkEWNwIo-JrBoO_z-nfeFScAOXIQEkScJBsHKVJ0JsDHstsenI_gfIAANF89h6xh_nJwq9t-kYB0Nx87X7TUzSgR-sNh9Qohys/s225/image.png"
},
{ // 6
lines: ["صراحة، عملك الأخير","كان أسوأ شي شفته","ملهم ومبدع جدا","وما عندك أي موهبة","وموهبتك حقيقية","وما تستحق التقدير","ولا يمكن إنكارها"],
image: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlBAJSXOctnxQP1mio7ZxZyZRhNCA0tNg9nVk7rhRJUHrfynIw_kJyQLF_BEstXZIMR6d2IOvMTOnlwnPYgifKj2bQuVkEWNwIo-JrBoO_z-nfeFScAOXIQEkScJBsHKVJ0JsDHstsenI_gfIAANF89h6xh_nJwq9t-kYB0Nx87X7TUzSgR-sNh9Qohys/s225/image.png"
},
{ // 7
lines: ["أنا لازم أشكرك على","كل المصايب اللي سببتها","كل شي سويته عشاني","لأنك دمرت حياتي","و وقفتك معاي دايما","كانت مجرد تمثيل","ما راح أنساها أبدا"],
image: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlBAJSXOctnxQP1mio7ZxZyZRhNCA0tNg9nVk7rhRJUHrfynIw_kJyQLF_BEstXZIMR6d2IOvMTOnlwnPYgifKj2bQuVkEWNwIo-JrBoO_z-nfeFScAOXIQEkScJBsHKVJ0JsDHstsenI_gfIAANF89h6xh_nJwq9t-kYB0Nx87X7TUzSgR-sNh9Qohys/s225/image.png"
},
{ // 8
lines: ["رأيك يهمني كثيرا","لكن الصراحة ما آخذ فيه","ودائما أستمع له","لأنه سطحي وغير مهم","بكل اهتمام وتقدير","وأعتبره كلام فاضي","لأنه ينور طريقي"],
image: "https://i.imgur.com/O3a0v2f.png"
},
{ // 9
lines: ["ذكاؤك مثير للإعجاب","وما عمري شفت أغبى منك","وأفكارك دايمًا عبقرية","وما فيها أي منطق","وتنفع تكون حلول","لأنها مجرد سخافات","لمشاكل كبيرة وعميقة"],
image: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlBAJSXOctnxQP1mio7ZxZyZRhNCA0tNg9nVk7rhRJUHrfynIw_kJyQLF_BEstXZIMR6d2IOvMTOnlwnPYgifKj2bQuVkEWNwIo-JrBoO_z-nfeFScAOXIQEkScJBsHKVJ0JsDHstsenI_gfIAANF89h6xh_nJwq9t-kYB0Nx87X7TUzSgR-sNh9Qohys/s225/image.png"
},
{ // 10
lines: ["بكل صراحة ووضوح","أنت آخر شخص ممكن أفكر فيه","علاقتنا وصلت لطريق مسدود","وما عاد لك مكانة بقلبي","وكل المشاعر الحلوة اللي كانت","مجرد كذبة ووهم عشته","لأنك أغلى من عرفت","والمشاعر هذي تكبر كل يوم","يا أجمل إنسان"],
image: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlBAJSXOctnxQP1mio7ZxZyZRhNCA0tNg9nVk7rhRJUHrfynIw_kJyQLF_BEstXZIMR6d2IOvMTOnlwnPYgifKj2bQuVkEWNwIo-JrBoO_z-nfeFScAOXIQEkScJBsHKVJ0JsDHstsenI_gfIAANF89h6xh_nJwq9t-kYB0Nx87X7TUzSgR-sNh9Qohys/s225/image.png"
}
];
// --- الوصول لعناصر الصفحة ---
const messageBox = document.getElementById('message-box');
const revealBtn = document.getElementById('reveal-btn');
const resetBtn = document.getElementById('reset-btn');
const resultSection = document.getElementById('result-section');
const instructionText = document.getElementById('instruction-text');
const prankImage = document.getElementById('prank-image');
let currentPrankIndex = -1;
// --- دالة لإعداد مقلب جديد ---
function setupNewPrank() {
// اختيار مقلب جديد ومختلف عن السابق
let newIndex;
do {
newIndex = Math.floor(Math.random() * pranks.length);
} while (pranks.length > 1 && newIndex === currentPrankIndex);
currentPrankIndex = newIndex;
const currentPrank = pranks[currentPrankIndex];
// تحديث الصورة
prankImage.src = currentPrank.image;
// مسح الرسالة القديمة
messageBox.innerHTML = '';
// بناء الرسالة الجديدة
currentPrank.lines.forEach(line => {
const p = document.createElement('p');
p.className = 'prank-line';
p.textContent = line;
messageBox.appendChild(p);
});
// إعادة كل شيء لحالته الأولية
resultSection.style.display = 'none';
revealBtn.style.display = 'block';
instructionText.style.display = 'block';
}
// --- دالة كشف المقلب ---
function revealPrank() {
const lines = document.querySelectorAll('.prank-line');
// السطر الثاني, الرابع, السادس... (الفهرس 1, 3, 5...)
for (let i = 1; i < lines.length; i += 2) {
lines[i].classList.add('faded');
}
// إظهار قسم النتيجة وإخفاء زر الكشف
resultSection.style.display = 'block';
revealBtn.style.display = 'none';
instructionText.style.display = 'none';
}
// --- ربط الدوال بالأزرار ---
revealBtn.addEventListener('click', revealPrank);
resetBtn.addEventListener('click', setupNewPrank);
// --- إعداد أول مقلب عند تحميل الصفحة ---
document.addEventListener('DOMContentLoaded', setupNewPrank());
</script>
