🏰 قصر الياسمين
by SilverCobra28806 lines32.3 KB
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🏰 قصر الياسمين</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Tajawal:wght@300;400;500;700;800&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Tajawal', 'Amiri', serif;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: radial-gradient(ellipse at top, #4a1a3f, #2a0a2e, #1a0520);
padding: 20px;
position: relative;
overflow-x: hidden;
}
/* نجوم متلألئة */
body::before {
content: '';
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background-image:
radial-gradient(2px 2px at 20px 30px, #ffd1e8, transparent),
radial-gradient(2px 2px at 40px 70px, #d4af37, transparent),
radial-gradient(1px 1px at 90px 40px, #fff, transparent),
radial-gradient(2px 2px at 130px 80px, #f8bbd0, transparent),
radial-gradient(1px 1px at 160px 20px, #e0c8ff, transparent);
background-size: 250px 150px;
animation: twinkle 6s infinite alternate;
pointer-events: none;
opacity: 0.6;
}
@keyframes twinkle {
0% { opacity: 0.3; transform: scale(1); }
100% { opacity: 0.8; transform: scale(1.05); }
}
/* قلوب طايرة */
.floating-hearts {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
pointer-events: none;
z-index: 1;
overflow: hidden;
}
.heart {
position: absolute;
color: #ffb6d5;
opacity: 0.4;
animation: floatUp linear infinite;
}
@keyframes floatUp {
0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
10% { opacity: 0.5; }
90% { opacity: 0.5; }
100% { transform: translateY(-100px) rotate(360deg); opacity: 0; }
}
.container {
max-width: 920px;
width: 100%;
background: linear-gradient(145deg, rgba(74, 26, 63, 0.5), rgba(42, 10, 46, 0.7));
backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(25px);
border-radius: 50px;
padding: 40px 35px;
position: relative;
z-index: 2;
box-shadow:
0 0 80px rgba(255, 182, 213, 0.2),
0 0 150px rgba(212, 175, 55, 0.15),
inset 0 0 60px rgba(255, 182, 213, 0.05);
}
.container::before {
content: '';
position: absolute;
top: -2px; right: -2px; bottom: -2px; left: -2px;
background: linear-gradient(135deg, #f8bbd0, #d4af37, #e91e63, #d4af37, #f8bbd0);
border-radius: 50px;
z-index: -1;
background-size: 300% 300%;
animation: gradientBorder 8s ease infinite;
}
@keyframes gradientBorder {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* ===== الهيدر ===== */
.crown-header {
text-align: center;
margin-bottom: 5px;
}
.crown-icon {
font-size: 50px;
filter: drop-shadow(0 0 25px rgba(212, 175, 55, 0.8));
animation: crownFloat 3s ease-in-out infinite;
display: inline-block;
}
@keyframes crownFloat {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-10px) scale(1.05); }
}
h1 {
text-align: center;
font-size: 60px;
font-weight: 800;
background: linear-gradient(135deg, #ffd1e8, #d4af37, #fff8dc, #f8bbd0, #d4af37);
background-size: 300% 300%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: shimmer 4s ease infinite;
letter-spacing: 3px;
line-height: 1.3;
filter: drop-shadow(0 0 30px rgba(255, 182, 213, 0.4));
}
@keyframes shimmer {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.subtitle {
text-align: center;
color: #ffe4f0;
font-size: 18px;
margin: 15px auto 35px;
background: linear-gradient(135deg, rgba(255, 182, 213, 0.15), rgba(212, 175, 55, 0.15));
padding: 12px 35px;
border-radius: 60px;
display: block;
width: fit-content;
border: 1px solid rgba(255, 182, 213, 0.4);
backdrop-filter: blur(10px);
font-weight: 700;
box-shadow: 0 0 25px rgba(255, 182, 213, 0.2);
}
.subtitle i {
color: #ffb6d5;
margin: 0 6px;
filter: drop-shadow(0 0 8px rgba(255, 182, 213, 0.8));
}
.subtitle .dev-name {
color: #d4af37;
font-weight: 800;
letter-spacing: 1px;
}
.subtitle .host-name {
color: #ffb6d5;
font-weight: 800;
}
/* ===== الخطوات ===== */
.step {
display: none;
animation: fadeIn 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}
.step.active { display: block; }
@keyframes fadeIn {
from { opacity: 0; transform: translateY(30px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* رسالة تحفيزية */
.motivation-box {
background: linear-gradient(135deg, rgba(255, 182, 213, 0.12), rgba(212, 175, 55, 0.12));
border: 1px solid rgba(255, 182, 213, 0.35);
border-radius: 30px;
padding: 20px 25px;
margin-bottom: 25px;
text-align: center;
backdrop-filter: blur(10px);
box-shadow: 0 0 30px rgba(255, 182, 213, 0.1);
position: relative;
overflow: hidden;
}
.motivation-box::before {
content: '💖';
position: absolute;
top: 10px; right: 15px;
font-size: 24px;
opacity: 0.5;
animation: floatIcon 3s ease-in-out infinite;
}
.motivation-box::after {
content: '✨';
position: absolute;
bottom: 10px; left: 15px;
font-size: 22px;
opacity: 0.5;
animation: floatIcon 4s ease-in-out infinite reverse;
}
@keyframes floatIcon {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-5px) rotate(10deg); }
}
.motivation-text {
color: #ffe4f0;
font-size: 20px;
font-weight: 700;
line-height: 1.7;
font-style: italic;
text-shadow: 0 0 15px rgba(255, 182, 213, 0.3);
}
.motivation-text i {
color: #ffb6d5;
margin: 0 8px;
}
/* إدخال الأسماء */
.section-title {
text-align: center;
color: #ffd1e8;
font-size: 26px;
font-weight: 800;
margin-bottom: 20px;
text-shadow: 0 0 20px rgba(255, 182, 213, 0.4);
}
.section-title i { color: #d4af37; margin: 0 10px; }
.input-group {
display: flex;
gap: 12px;
margin-bottom: 15px;
flex-wrap: wrap;
}
.input-group input {
flex: 1;
padding: 18px 28px;
border-radius: 60px;
border: 2px solid rgba(255, 182, 213, 0.4);
background: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(10px);
color: #fff;
font-size: 19px;
outline: none;
min-width: 150px;
transition: 0.4s;
font-weight: 500;
}
.input-group input:focus {
border-color: #ffb6d5;
box-shadow: 0 0 0 5px rgba(255, 182, 213, 0.15), 0 0 30px rgba(255, 182, 213, 0.3);
background: rgba(255, 255, 255, 0.1);
}
.input-group input::placeholder { color: #ffb6d5; opacity: 0.6; }
.input-group button {
padding: 15px 40px;
border-radius: 60px;
border: none;
background: linear-gradient(135deg, #ffb6d5, #e91e63, #ffb6d5);
background-size: 200% 200%;
color: #fff;
font-weight: 800;
font-size: 19px;
cursor: pointer;
transition: 0.4s;
box-shadow: 0 8px 25px rgba(233, 30, 99, 0.4);
animation: shimmer 4s ease infinite;
}
.input-group button:hover {
transform: translateY(-3px) scale(1.03);
box-shadow: 0 15px 40px rgba(233, 30, 99, 0.6);
}
.players-list {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin: 20px 0;
min-height: 50px;
}
.player-tag {
background: linear-gradient(135deg, rgba(255, 182, 213, 0.15), rgba(212, 175, 55, 0.15));
backdrop-filter: blur(10px);
padding: 12px 28px;
border-radius: 50px;
border: 1px solid rgba(255, 182, 213, 0.5);
display: flex;
align-items: center;
gap: 12px;
font-size: 19px;
font-weight: 700;
color: #ffe4f0;
box-shadow: 0 5px 20px rgba(255, 182, 213, 0.15);
transition: 0.3s;
animation: popIn 0.4s ease;
}
@keyframes popIn {
from { transform: scale(0.7); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.player-tag:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(255, 182, 213, 0.3);
}
.player-tag i { color: #ffb6d5; }
.player-tag .remove {
color: #ff6b9d;
cursor: pointer;
font-weight: 800;
font-size: 22px;
transition: 0.3s;
}
.player-tag .remove:hover {
transform: scale(1.3) rotate(90deg);
color: #ff4444;
}
.btn-primary {
background: linear-gradient(135deg, #ffb6d5, #d4af37, #e91e63, #d4af37);
background-size: 300% 300%;
color: #fff;
border: none;
padding: 20px;
border-radius: 60px;
font-size: 24px;
font-weight: 800;
cursor: pointer;
transition: 0.4s;
width: 100%;
margin-top: 10px;
box-shadow: 0 10px 35px rgba(233, 30, 99, 0.4);
animation: shimmer 4s ease infinite;
letter-spacing: 1px;
}
.btn-primary:hover {
transform: scale(1.02);
box-shadow: 0 15px 50px rgba(233, 30, 99, 0.6);
}
.btn-primary:disabled {
opacity: 0.4;
cursor: not-allowed;
transform: none;
animation: none;
}
/* ===== شاشة التحدي ===== */
.level-bar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
flex-wrap: wrap;
gap: 10px;
}
.level-badge {
display: inline-block;
background: linear-gradient(135deg, #e91e63, #d4af37);
color: #fff;
padding: 10px 35px;
border-radius: 60px;
font-weight: 800;
font-size: 20px;
box-shadow: 0 5px 25px rgba(233, 30, 99, 0.4);
border: 1px solid rgba(255, 255, 255, 0.2);
letter-spacing: 1px;
}
.player-count {
color: #ffe4f0;
font-weight: 700;
background: rgba(255, 182, 213, 0.15);
padding: 8px 25px;
border-radius: 60px;
border: 1px solid rgba(255, 182, 213, 0.3);
}
.player-count i { color: #ffb6d5; margin-left: 5px; }
.progress-bar {
width: 100%;
height: 12px;
background: rgba(255, 182, 213, 0.15);
border-radius: 60px;
margin-bottom: 20px;
overflow: hidden;
border: 1px solid rgba(255, 182, 213, 0.2);
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #ffb6d5, #d4af37, #e91e63);
background-size: 200% 100%;
width: 33%;
transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1);
border-radius: 60px;
animation: shimmer 3s ease infinite;
box-shadow: 0 0 15px rgba(255, 182, 213, 0.6);
}
.challenge-box {
background: linear-gradient(145deg, rgba(74, 26, 63, 0.4), rgba(42, 10, 46, 0.6));
backdrop-filter: blur(25px);
border-radius: 40px;
padding: 40px 35px;
text-align: center;
border: 2px solid rgba(255, 182, 213, 0.4);
margin: 20px 0;
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.4),
inset 0 0 40px rgba(255, 182, 213, 0.05);
position: relative;
overflow: hidden;
}
.challenge-box::before {
content: '👑';
position: absolute;
top: 15px; left: 20px;
font-size: 40px;
opacity: 0.15;
animation: floatIcon 5s ease-in-out infinite;
}
.challenge-box::after {
content: '🌸';
position: absolute;
bottom: 15px; right: 20px;
font-size: 35px;
opacity: 0.2;
animation: floatIcon 4s ease-in-out infinite reverse;
}
.selected-player {
font-size: 42px;
font-weight: 800;
background: linear-gradient(135deg, #ffd1e8, #d4af37, #fff8dc, #ffb6d5);
background-size: 300% 300%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: shimmer 3s ease infinite;
display: inline-block;
padding: 10px 30px;
letter-spacing: 2px;
filter: drop-shadow(0 0 25px rgba(255, 182, 213, 0.5));
margin-bottom: 10px;
}
.challenge-type {
font-size: 20px;
color: #ffd1e8;
background: linear-gradient(135deg, rgba(255, 182, 213, 0.15), rgba(212, 175, 55, 0.15));
padding: 10px 30px;
border-radius: 60px;
display: inline-block;
margin-bottom: 20px;
font-weight: 800;
border: 1px solid rgba(255, 182, 213, 0.4);
box-shadow: 0 0 20px rgba(255, 182, 213, 0.2);
}
.challenge-text {
font-size: 28px;
margin: 25px 0;
color: #ffe4f0;
line-height: 1.7;
font-weight: 700;
text-shadow: 0 0 20px rgba(255, 182, 213, 0.3);
}
.fake-chat {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 182, 213, 0.06));
padding: 25px;
border-radius: 25px;
margin: 25px 0;
text-align: right;
border-right: 6px solid #ffb6d5;
font-style: italic;
color: #ffe4f0;
font-size: 19px;
line-height: 2;
backdrop-filter: blur(10px);
box-shadow: inset 0 0 30px rgba(255, 182, 213, 0.05);
}
.actions-row {
display: flex;
gap: 15px;
flex-wrap: wrap;
margin-top: 20px;
}
.actions-row button {
flex: 1;
padding: 15px 0;
border-radius: 60px;
border: 2px solid #ffb6d5;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
color: #ffd1e8;
font-weight: 800;
font-size: 18px;
cursor: pointer;
transition: 0.4s;
}
.actions-row button:hover {
background: linear-gradient(135deg, #ffb6d5, #e91e63);
color: #fff;
box-shadow: 0 8px 25px rgba(233, 30, 99, 0.4);
transform: translateY(-3px);
}
.footer-note {
margin-top: 30px;
text-align: center;
color: #ffb6d5;
font-size: 15px;
border-top: 2px solid rgba(255, 182, 213, 0.15);
padding-top: 25px;
opacity: 0.8;
}
.footer-note i { color: #d4af37; margin: 0 5px; }
.footer-note strong { color: #ffe4f0; }
@media (max-width: 600px) {
.container { padding: 25px 20px; }
h1 { font-size: 38px; }
.selected-player { font-size: 30px; }
.challenge-text { font-size: 22px; }
.crown-icon { font-size: 38px; }
}
</style>
</head>
<body>
<div class="floating-hearts" id="hearts"></div>
<div class="container">
<!-- ===== الهيدر ===== -->
<div class="crown-header">
<span class="crown-icon">🏰</span>
</div>
<h1>قصر الياسمين</h1>
<div style="text-align:center;">
<div class="subtitle">
<i class="fas fa-heart"></i>
تقديم: <span class="host-name">ياسو ياسمين</span>
<i class="fas fa-star"></i>
المطورة: <span class="dev-name">𝙰𝚁𝙺</span>
<i class="fas fa-heart"></i>
</div>
</div>
<!-- ===== الخطوة 1 ===== -->
<div class="step active" id="step1">
<div class="motivation-box">
<div class="motivation-text" id="motivation1">
<i class="fas fa-quote-right"></i>
"أهلاً بكِ في قصر الياسمين، يا أميرة"
<i class="fas fa-quote-left"></i>
</div>
</div>
<h2 class="section-title"><i class="fas fa-user-friends"></i> أدخلي أسماء الأميرات <i class="fas fa-crown"></i></h2>
<div class="input-group">
<input type="text" id="playerInput" placeholder="اكتبي اسم الأميرة..." />
<button onclick="addPlayer()"><i class="fas fa-plus-circle"></i> إضافة</button>
</div>
<div class="players-list" id="playersList"></div>
<button class="btn-primary" onclick="startGame()" id="startBtn">
<i class="fas fa-sparkles"></i> يلا نبدأ حكاية القصر
</button>
<p style="color:#ffb6d5; text-align:center; margin-top:15px; opacity:0.8; font-weight:700;">
<i class="fas fa-heart"></i> محتاجين 3 أميرات على الأقل <i class="fas fa-heart"></i>
</p>
</div>
<!-- ===== الخطوة 2 ===== -->
<div class="step" id="step2">
<div class="motivation-box">
<div class="motivation-text" id="motivation2">
<i class="fas fa-quote-right"></i>
"كل أميرة عندها قصة في قصر الياسمين"
<i class="fas fa-quote-left"></i>
</div>
</div>
<div class="level-bar">
<div class="level-badge" id="levelBadge">⭐ المستوى الأول</div>
<div class="player-count"><i class="fas fa-crown"></i> <span id="playerCount">0</span> أميرة</div>
</div>
<div class="progress-bar">
<div class="progress-fill" id="progressFill"></div>
</div>
<div class="challenge-box">
<div class="challenge-type" id="challengeType">💖 سؤال رومانسي</div>
<div class="selected-player" id="selectedPlayer">فلانة</div>
<div class="challenge-text" id="challengeText">نص التحدي هنا</div>
<div class="fake-chat" id="fakeChat">
<i class="fas fa-heart" style="color:#ffb6d5;"></i>
محادثة وهمية: "أنا مع رأي فلانة..."
</div>
</div>
<div class="actions-row">
<button onclick="nextChallenge()"><i class="fas fa-dice"></i> تحدٍ جديد</button>
<button onclick="resetGame()"><i class="fas fa-rotate-right"></i> حكاية جديدة</button>
</div>
<p style="color:#ffb6d5; text-align:center; margin-top:20px; font-weight:500;">
<i class="fas fa-magic" style="color:#d4af37;"></i>
الذكاء الاصطناعي بيختار أميرة وتحدي عشوائي... استمتعي يا ملكة ✨
</p>
</div>
<div class="footer-note">
<i class="fas fa-crown"></i>
المطورة: <strong>𝙰𝚁𝙺</strong>
|
المقدمة: <strong>ياسو ياسمين</strong>
|
🏰 قصر الياسمين الإصدار 1.0
<i class="fas fa-heart" style="color:#ffb6d5;"></i>
</div>
</div>
<script>
// =======================================================
// رسائل تحفيزية (كلها مرتبطة بقصر الياسمين)
// =======================================================
const motivations = [
'أهلاً بكِ في قصر الياسمين، يا أميرة',
'كل أميرة عندها قصة في قصر الياسمين',
'قصر الياسمين بيتشرف بوجودك فيه',
'أنتِ نجمة قصر الياسمين اللي بتلمع',
'قصر الياسمين مش قصر من غير أميرات زيك',
'أنتِ تاج قصر الياسمين، فلا تنسي قيمتك',
'في قصر الياسمين، كل أميرة ملكة',
'قصر الياسمين بيفتخر إنك فيه',
'كوني فخورة، فأنتِ أميرة قصر الياسمين',
'قصر الياسمين بيتألق بجمالك وقلبك',
'كل تحدٍ في قصر الياسمين بيخليكي أقوى',
'أنتِ لؤلؤة قصر الياسمين، لا تُقدري بثمن',
'في قصر الياسمين، الحب والجمال هما الأساس',
'كوني كالياسمين، عطرة وجميلة في قصر الياسمين',
'قصر الياسمين بيحبك، فاستمتعي بكل لحظة'
];
// =======================================================
// قاعدة بيانات التحديات (رومانسية - بناتي - فخمة)
// =======================================================
const challenges = [
{ level: 1, type: '💖 سؤال رومانسي', text: 'إيه أجمل كلمة سمعتيها من حد بتحبيه؟', fake: '🌸 "أحلى كلمة سمعتها كانت من ماما، قالتلي "أنتِ نور عيني""' },
{ level: 1, type: '🎀 تحدي لطيف', text: 'ابتسمي لأجمل صديقة في الغرفة وقوليها "أنتِ غالية عليا"', fake: '💕 "يا رب تكوني عارفة إنك غالية عندي أوي"' },
{ level: 1, type: '💌 اعتراف', text: 'قولي حاجة بتحبيها في نفسك وافتخري بيها', fake: '✨ "أنا بحب إن قلبي أبيض وبسامح بسرعة"' },
{ level: 1, type: '👑 سؤال', text: 'لو كنتي أميرة في قصر الياسمين، إيه أول حاجة هتعمليها؟', fake: '👑 "كنت هعمل حفلة لكل الناس اللي بحبهم في القصر"' },
{ level: 1, type: '🌸 طلب', text: 'غني مقطع من أغنيتك المفضلة بصوت حلو', fake: '🎤 "أنا بحب أغنية... هغنيها لكم من قلبي"' },
{ level: 2, type: '💖 سؤال رومانسي', text: 'إيه أكثر موقف رومانسي حصلك في حياتك؟', fake: '💐 "مرة كنت ماشية في المطر ولقيت وردة على الباب بتاعي"' },
{ level: 2, type: '🎀 تحدي لطيف', text: 'احكي لصديقتك عن أحلامك ومستقبلك الجميل', fake: '🌈 "أنا بحلم أسافر باريس، وأكتب كتاب، وأعمل حاجة تفيد الناس"' },
{ level: 2, type: '💌 اعتراف', text: 'اعترفي بحاجة كنتي خايفة منها واتغلبتي عليها', fake: '💪 "كنت خايفة أتكلم قدام الناس، بس النهاردة بقيت قوية"' },
{ level: 2, type: '👑 سؤال', text: 'لو الحب شخص، إيه شكله عندك؟', fake: '❤️ "الحب عندي هو الأمان والصدق والاحترام"' },
{ level: 2, type: '🌸 طلب', text: 'اكتبي رسالة حب لنفسك وقريها بصوت عالي', fake: '💝 "أنا بحبك يا نفسي، وأنتِ تستحقين كل خير"' },
{ level: 3, type: '💖 سؤال رومانسي', text: 'إيه الحلم اللي نفسك تحققيه مهما كان صعب؟', fake: '🌟 "نفسي أفتح مشروعي الخاص وأكون ناجحة ومستقلة"' },
{ level: 3, type: '🎀 تحدي لطيف', text: 'قولي لأول صديقة على يمينك حاجة بحبها فيها', fake: '💕 "أنا بحب فيكي إنك دايماً بتدعميني ومن غير ما تتكلمي"' },
{ level: 3, type: '💌 اعتراف', text: 'قولي سر من أسرارك محدش يعرفه لأول مرة', fake: '🤫 "أنا بحب أرسم، بس مفيش حد يعرف إن دي هوايتي المفضلة"' },
{ level: 3, type: '👑 سؤال', text: 'إيه الحاجة اللي عايزة الناس تفتكرك بيها لما يسمعوا اسمك؟', fake: '👑 "عايزة الناس تفتكر إن قلبي طيب وإن كلامي بيأثر في الناس"' },
{ level: 3, type: '🌸 طلب', text: 'قفي وقولي "أنا أميرة قصر الياسمين" بكل ثقة، واشرحي ليه', fake: '👸 "أنا أميرة قصر الياسمين لأني بحب نفسي وبحترمها وبعرف قيمتي"' },
];
let players = [];
let currentLevel = 1;
let usedChallenges = [];
let motivationIndex = 0;
function createHearts() {
const heartsContainer = document.getElementById('hearts');
const heartIcons = ['💖', '💕', '🌸', '✨', '💗', '🌹', '🏰'];
for (let i = 0; i < 18; i++) {
const heart = document.createElement('div');
heart.className = 'heart';
heart.innerText = heartIcons[Math.floor(Math.random() * heartIcons.length)];
heart.style.left = Math.random() * 100 + '%';
heart.style.fontSize = (Math.random() * 20 + 15) + 'px';
heart.style.animationDuration = (Math.random() * 10 + 10) + 's';
heart.style.animationDelay = (Math.random() * 10) + 's';
heartsContainer.appendChild(heart);
}
}
createHearts();
function rotateMotivation() {
motivationIndex = (motivationIndex + 1) % motivations.length;
const text = motivations[motivationIndex];
const m1 = document.getElementById('motivation1');
const m2 = document.getElementById('motivation2');
if (m1) m1.innerHTML = `<i class="fas fa-quote-right"></i> "${text}" <i class="fas fa-quote-left"></i>`;
if (m2) m2.innerHTML = `<i class="fas fa-quote-right"></i> "${text}" <i class="fas fa-quote-left"></i>`;
}
setInterval(rotateMotivation, 8000);
function addPlayer() {
const input = document.getElementById('playerInput');
const name = input.value.trim();
if (!name) { alert('اكتبي اسم الأميرة أولاً 🌸'); return; }
if (players.includes(name)) { alert('الاسم موجود بالفعل 💕'); return; }
players.push(name);
input.value = '';
renderPlayers();
updateStartButton();
}
function removePlayer(name) {
players = players.filter(p => p !== name);
renderPlayers();
updateStartButton();
}
function renderPlayers() {
const list = document.getElementById('playersList');
if (players.length === 0) {
list.innerHTML = '<p style="color:#ffb6d5; opacity:0.6; font-weight:500;"><i class="fas fa-heart"></i> مفيش أميرات لسه، أضيفي بعض الأسماء الحلوة</p>';
return;
}
list.innerHTML = players.map(p =>
`<span class="player-tag"><i class="fas fa-crown"></i> ${p} <span class="remove" onclick="removePlayer('${p}')">✕</span></span>`
).join('');
}
function updateStartButton() {
const btn = document.getElementById('startBtn');
btn.disabled = players.length < 3;
btn.style.opacity = players.length < 3 ? '0.5' : '1';
}
function startGame() {
if (players.length < 3) {
alert('لازم تضيفي 3 أميرات على الأقل يا ملكة 💕');
return;
}
document.getElementById('step1').classList.remove('active');
document.getElementById('step2').classList.add('active');
currentLevel = 1;
usedChallenges = [];
document.getElementById('playerCount').innerText = players.length;
updateProgressBar();
nextChallenge();
}
function updateProgressBar() {
const fill = document.getElementById('progressFill');
const percentage = (currentLevel / 3) * 100;
fill.style.width = percentage + '%';
}
function nextChallenge() {
const randomPlayer = players[Math.floor(Math.random() * players.length)];
let available = challenges.filter(c => c.level === currentLevel && !usedChallenges.includes(c));
if (available.length === 0) {
if (currentLevel < 3) {
currentLevel++;
const levelNames = { 1: '⭐ المستوى الأول', 2: '💎 المستوى الثاني', 3: '👑 المستوى الثالث' };
document.getElementById('levelBadge').innerText = levelNames[currentLevel];
updateProgressBar();
available = challenges.filter(c => c.level === currentLevel && !usedChallenges.includes(c));
} else {
usedChallenges = [];
available = challenges.filter(c => c.level === currentLevel);
}
}
const challenge = available[Math.floor(Math.random() * available.length)];
usedChallenges.push(challenge);
document.getElementById('challengeType').innerText = challenge.type;
document.getElementById('selectedPlayer').innerText = randomPlayer;
document.getElementById('challengeText').innerText = challenge.text;
document.getElementById('fakeChat').innerHTML = `<i class="fas fa-heart" style="color:#ffb6d5;"></i> ${challenge.fake}`;
document.getElementById('playerCount').innerText = players.length;
rotateMotivation();
}
function resetGame() {
document.getElementById('step2').classList.remove('active');
document.getElementById('step1').classList.add('active');
players = [];
renderPlayers();
updateStartButton();
document.getElementById('playerInput').value = '';
currentLevel = 1;
usedChallenges = [];
document.getElementById('levelBadge').innerText = '⭐ المستوى الأول';
document.getElementById('progressFill').style.width = '33%';
}
window.onload = function() {
renderPlayers();
updateStartButton();
document.getElementById('playerInput').addEventListener('keypress', function(e) {
if (e.key === 'Enter') addPlayer();
});
};
</script>
</body>
</html>Game Source: 🏰 قصر الياسمين
Creator: SilverCobra28
Libraries: none
Complexity: complex (806 lines, 32.3 KB)
The full source code is displayed above on this page.
Remix Instructions
To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: game-silvercobra28" to link back to the original. Then publish at arcadelab.ai/publish.