بازی یادگیری آلمانی | اتاق فرار خانه قدیمی
اتاق فرار: فرار بزرگ
:root {
--bg-color: #121212;
--terminal-bg: #1e1e1e;
--accent-color: #00ff88;
--text-color: #e0e0e0;
--german-text-color: #ffeb3b;
--error-color: #ff4757;
--font-fa: 'Tahoma', 'Vazir', sans-serif;
--font-de: 'Courier New', monospace;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
outline: none;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
font-family: var(--font-fa);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
}
.game-device {
width: 100%;
max-width: 500px;
height: 100%;
background-color: var(--terminal-bg);
position: relative;
display: flex;
flex-direction: column;
box-shadow: 0 0 50px rgba(0,0,0,0.5);
}
/* نوار وضعیت */
.status-bar {
height: 50px;
padding: 0 15px;
background: rgba(0,0,0,0.3);
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #333;
flex-shrink: 0; /* جلوگیری از تغییر سایز */
}
.level-badge {
background: var(--accent-color);
color: #000;
padding: 2px 8px;
border-radius: 4px;
font-weight: bold;
font-size: 0.8rem;
}
/* صحنه تصویر - فضای انعطاف‌پذیر */
.scene-display {
flex: 1; /* فضای باقی‌مانده را پر می‌کند */
background: #000;
position: relative;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
border-bottom: 2px solid var(--accent-color);
}
.scene-display::after {
content: "";
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
background-size: 100% 2px, 3px 100%;
pointer-events: none;
z-index: 10;
}
.mystery-icon {
font-size: 5rem;
opacity: 0.5;
animation: float 3s ease-in-out infinite;
}
/* ناحیه گفتگو - ارتفاع ثابت برای جلوگیری از پرش */
.dialogue-box {
height: 45%; /* همیشه 45 درصد ارتفاع صفحه */
min-height: 300px;
background: #252525;
padding: 20px;
display: flex;
flex-direction: column;
flex-shrink: 0;
}
/* باکس متن داستان با اسکرول داخلی */
.narrator-container {
flex-grow: 1;
overflow-y: auto;
margin-bottom: 15px;
/* اسکرول بار زیبا */
scrollbar-width: thin;
scrollbar-color: #444 #252525;
}
.narrator-text {
font-size: 0.95rem;
line-height: 1.8;
color: #cfcfcf;
}
.clue-paper {
background-color: #333;
border-right: 4px solid var(--german-text-color);
padding: 12px;
margin-top: 10px;
border-radius: 6px;
direction: ltr;
text-align: left;
font-family: var(--font-de);
color: var(--german-text-color);
font-size: 1rem;
position: relative;
display: none; /* پیش‌فرض مخفی */
}
/* ورودی ثابت در پایین */
.input-area {
height: 50px;
display: flex;
gap: 10px;
flex-shrink: 0;
visibility: hidden; /* رزرو فضا نمیکند اما با opacity کنترل میکنیم یا کلا مخفی */
}
input[type="text"] {
flex: 1;
background: #111;
border: 1px solid #444;
color: white;
padding: 0 15px;
border-radius: 8px;
font-size: 16px;
direction: ltr;
text-align: left;
}
input[type="text"]:focus {
border-color: var(--accent-color);
}
button.action-btn {
background: var(--accent-color);
color: #000;
border: none;
padding: 0 20px;
border-radius: 8px;
font-weight: bold;
cursor: pointer;
}
/* انیمیشن‌ها */
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.shake-anim { animation: shake 0.4s; }
.fade-in { animation: fadeIn 0.5s forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 501px) {
.game-device {
height: 90vh;
border-radius: 20px;
border: 10px solid #333;
}
}
وضعیت: فراری
مرحله ۱/۲۰
🚪
الدرس الكامل
بقية هذا الدرس للأعضاء
للاطلاع على الدرس كاملاً تحتاج إلى اشتراك فعّال أو التسجيل في دورة ألمانية.
- أمثلة كاملة
- النطق الصوتي
- الدورات والخطط
عضو بالفعل؟ سجّل الدخول