معنى ان تكون الجمله مفيده
📦 النحو الواضح
✨ The Prompt Phrase
بان الجمله تكون ذات فائده ~تامه~ ويحسن السكوت عليها فلا يسال السائل بعدها
💻 Code Preview
📦 All-in-One Code
<!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 href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;800;900&family=Amiri:wght@400;700&display=swap" rel="stylesheet">
<style>
:root {
--bg-primary: #0a0e27;
--bg-secondary: #111638;
--bg-card: #1a1f45;
--bg-glass: rgba(26, 31, 69, 0.7);
--accent-purple: #a855f7;
--accent-blue: #3b82f6;
--accent-green: #10b981;
--accent-cyan: #06b6d4;
--accent-pink: #ec4899;
--accent-orange: #f59e0b;
--accent-red: #ef4444;
--text-primary: #f0f6fc;
--text-secondary: #c9d1d9;
--text-muted: #8b949e;
--border-color: rgba(139,148,158,0.2);
--glow-purple: rgba(168,85,247,0.3);
--radius: 16px;
--radius-sm: 10px;
--radius-lg: 24px;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Cairo',sans-serif;background:var(--bg-primary);color:var(--text-primary);line-height:1.9;overflow-x:hidden}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--bg-primary)}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--accent-purple),var(--accent-cyan));border-radius:10px}
.container{max-width:1100px;margin:0 auto;padding:0 24px}
/* NAV */
.nav{position:fixed;top:0;right:0;left:0;z-index:100;background:rgba(10,14,39,0.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border-color);padding:12px 0}
.nav .container{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.nav-brand{font-weight:800;font-size:1.1rem;background:linear-gradient(135deg,var(--accent-purple),var(--accent-cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.nav-links{display:flex;gap:6px;flex-wrap:wrap;list-style:none}
.nav-links a{color:var(--text-muted);text-decoration:none;font-size:0.8rem;padding:6px 12px;border-radius:20px;transition:all 0.3s;border:1px solid transparent}
.nav-links a:hover{color:var(--text-primary);background:var(--bg-card);border-color:var(--accent-purple)}
/* HERO */
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding-top:60px}
.hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 20% 50%,rgba(168,85,247,0.15) 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(59,130,246,0.15) 0%,transparent 50%),radial-gradient(ellipse at 50% 80%,rgba(6,182,212,0.1) 0%,transparent 50%)}
.hero-pattern{position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent,transparent 30px,rgba(255,255,255,0.01) 30px,rgba(255,255,255,0.01) 60px);animation:patternMove 30s linear infinite}
@keyframes patternMove{0%{transform:translate(0,0)}100%{transform:translate(60px,60px)}}
.hero-content{text-align:center;z-index:2;padding:40px 20px;animation:heroIn 1.2s ease both}
@keyframes heroIn{from{opacity:0;transform:translateY(40px) scale(0.95)}to{opacity:1;transform:translateY(0) scale(1)}}
.hero-badge{display:inline-block;background:linear-gradient(135deg,var(--accent-purple),var(--accent-blue));padding:8px 24px;border-radius:30px;font-size:0.9rem;font-weight:700;margin-bottom:30px;animation:badgePulse 3s ease-in-out infinite}
@keyframes badgePulse{0%,100%{box-shadow:0 0 20px var(--glow-purple)}50%{box-shadow:0 0 40px var(--glow-purple)}}
.hero h1{font-size:clamp(2.2rem,5vw,4rem);font-weight:900;margin-bottom:30px;line-height:1.4;font-family:'Amiri',serif}
.gradient-text{background:linear-gradient(135deg,#c084fc,#38bdf8,#34d399);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-phrase{background:var(--bg-glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:2px solid rgba(168,85,247,0.3);border-radius:var(--radius-lg);padding:30px 40px;font-family:'Amiri',serif;font-size:clamp(1.2rem,3vw,1.8rem);line-height:2.2;max-width:800px;margin:0 auto 30px}
.highlight{color:var(--accent-green);font-weight:700;text-decoration:underline wavy var(--accent-green);text-underline-offset:8px}
.keyword{color:var(--accent-cyan);font-weight:700}
.important{color:var(--accent-orange);font-weight:700}
.hero-stats{display:flex;justify-content:center;gap:30px;margin-top:30px;flex-wrap:wrap}
.hero-stat-number{font-size:2rem;font-weight:900;background:linear-gradient(135deg,var(--accent-purple),var(--accent-cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-stat-label{font-size:0.85rem;color:var(--text-muted)}
.scroll-arrow{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);text-decoration:none;font-size:2rem;animation:arrowB 2s infinite;z-index:2}
@keyframes arrowB{0%,20%,50%,80%,100%{transform:translateX(-50%) translateY(0)}40%{transform:translateX(-50%) translateY(-12px)}60%{transform:translateX(-50%) translateY(-6px)}}
/* SECTIONS */
.section{padding:80px 0;position:relative}
.section-header{text-align:center;margin-bottom:50px}
.section-number{display:inline-block;width:50px;height:50px;line-height:50px;border-radius:50%;background:linear-gradient(135deg,var(--accent-purple),var(--accent-blue));font-weight:800;font-size:1.2rem;margin-bottom:15px;box-shadow:0 5px 20px var(--glow-purple)}
.section-header h2{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;margin-bottom:10px;font-family:'Amiri',serif;background:linear-gradient(135deg,var(--accent-purple),var(--accent-cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.section-header p{color:var(--text-secondary);font-size:1.1rem;max-width:600px;margin:0 auto}
/* CARDS */
.card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:35px;margin-bottom:25px;transition:all 0.4s;position:relative;overflow:hidden}
.card::after{content:'';position:absolute;top:0;right:0;left:0;height:3px;background:linear-gradient(90deg,var(--accent-purple),var(--accent-cyan),var(--accent-green));opacity:0;transition:opacity 0.4s}
.card:hover{transform:translateY(-4px);box-shadow:0 15px 40px rgba(0,0,0,0.4);border-color:rgba(168,85,247,0.3)}
.card:hover::after{opacity:1}
.card h3{font-size:1.5rem;color:var(--accent-purple);font-weight:700;margin-bottom:18px;font-family:'Amiri',serif}
.card h4{font-size:1.15rem;color:var(--accent-cyan);font-weight:600;margin-bottom:12px;font-family:'Amiri',serif}
.glass-card{background:var(--bg-glass);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border:1px solid rgba(168,85,247,0.2);border-radius:var(--radius-lg);padding:35px;margin-bottom:25px}
/* BOXES */
.example-box{background:rgba(6,182,212,0.05);border:2px solid rgba(6,182,212,0.2);border-radius:var(--radius);padding:22px;margin:18px 0}
.example-sentence{font-size:1.4rem;color:var(--accent-green);font-weight:700;margin:12px 0;font-family:'Amiri',serif;line-height:2.2}
.example-sentence.wrong{color:var(--accent-red)}
.info-box{background:rgba(59,130,246,0.08);border-right:4px solid var(--accent-blue);padding:20px;border-radius:var(--radius-sm);margin:18px 0}
.success-box{background:rgba(16,185,129,0.08);border-right:4px solid var(--accent-green);padding:20px;border-radius:var(--radius-sm);margin:18px 0}
.warning-box{background:rgba(239,68,68,0.08);border-right:4px solid var(--accent-red);padding:20px;border-radius:var(--radius-sm);margin:18px 0}
.tip-box{background:rgba(168,85,247,0.08);border-right:4px solid var(--accent-purple);padding:20px;border-radius:var(--radius-sm);margin:18px 0}
/* GRID */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin:30px 0}
.grid-item{background:var(--bg-card);padding:28px;border-radius:var(--radius);border:1px solid var(--border-color);transition:all 0.3s;text-align:center}
.grid-item:hover{border-color:var(--accent-purple);transform:translateY(-5px);box-shadow:0 10px 30px var(--glow-purple)}
.grid-item .icon{font-size:2.8rem;margin-bottom:15px;display:block}
.grid-item h4{color:var(--accent-cyan);margin-bottom:8px;font-weight:700}
/* CSS-ONLY TABS */
.tabs-wrapper{position:relative}
.tabs-wrapper input[type="radio"]{position:absolute;opacity:0;pointer-events:none}
.tabs-nav{display:flex;gap:8px;margin-bottom:25px;flex-wrap:wrap;justify-content:center}
.tabs-wrapper label{background:var(--bg-secondary);color:var(--text-secondary);border:1px solid var(--border-color);padding:10px 22px;border-radius:30px;cursor:pointer;transition:all 0.3s;font-size:0.95rem;font-family:'Cairo',sans-serif;font-weight:600}
.tabs-wrapper label:hover{border-color:var(--accent-purple);transform:translateY(-2px)}
.tab-panel{display:none;animation:fadeIn 0.5s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
#tab1:checked~.tabs-nav label[for="tab1"],#tab2:checked~.tabs-nav label[for="tab2"],#tab3:checked~.tabs-nav label[for="tab3"]{background:linear-gradient(135deg,var(--accent-purple),var(--accent-cyan));color:white;border-color:transparent;box-shadow:0 5px 15px var(--glow-purple)}
#tab1:checked~#panel1,#tab2:checked~#panel2,#tab3:checked~#panel3{display:block}
/* CSS-ONLY ACCORDION */
.accordion{margin:20px 0}
.accordion details{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius);margin-bottom:12px;overflow:hidden;transition:all 0.3s}
.accordion details:hover{border-color:rgba(168,85,247,0.3)}
.accordion details[open]{border-color:rgba(168,85,247,0.4);box-shadow:0 5px 20px rgba(168,85,247,0.1)}
.accordion summary{padding:18px 22px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;list-style:none;font-family:'Cairo',sans-serif;font-size:1.05rem;color:var(--text-primary);font-weight:600;gap:10px;transition:all 0.3s}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary::after{content:'▼';font-size:0.75rem;color:var(--accent-purple);transition:transform 0.3s;flex-shrink:0}
.accordion details[open] summary::after{transform:rotate(180deg)}
.accordion summary:hover{background:rgba(168,85,247,0.05)}
.acc-body{padding:0 22px 22px;line-height:2}
/* TOOLTIP */
.tooltip{position:relative;display:inline-block;border-bottom:2px dotted var(--accent-cyan);cursor:help;color:var(--accent-cyan);font-weight:600}
.tooltip .tt{visibility:hidden;opacity:0;width:220px;background:var(--bg-secondary);color:var(--text-primary);text-align:center;border-radius:var(--radius-sm);padding:10px 14px;position:absolute;z-index:10;bottom:130%;right:50%;transform:translateX(50%);transition:all 0.3s;font-size:0.85rem;line-height:1.6;border:1px solid var(--accent-purple);box-shadow:0 10px 30px rgba(0,0,0,0.5);font-weight:400}
.tooltip:hover .tt{visibility:visible;opacity:1}
/* CODE BLOCK */
.code-block{background:#0d1117;border:1px solid var(--border-color);border-radius:var(--radius);padding:22px;margin:18px 0;font-family:'Amiri',serif;font-size:1.15rem;line-height:2.2}
.code-comment{color:var(--text-muted);font-style:italic}
.code-keyword{color:var(--accent-purple);font-weight:700}
.code-string{color:var(--accent-green)}
.code-important{color:var(--accent-orange);font-weight:700}
.code-function{color:var(--accent-cyan)}
/* DEMO */
.demo-wrapper{position:relative}
.demo-wrapper input[type="radio"]{position:absolute;opacity:0;pointer-events:none}
.demo-buttons{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.demo-btn{display:inline-block;background:linear-gradient(135deg,var(--accent-purple),var(--accent-cyan));color:white;padding:12px 28px;border-radius:30px;cursor:pointer;font-size:0.95rem;font-weight:600;transition:all 0.3s;font-family:'Cairo',sans-serif}
.demo-btn:hover{transform:translateY(-2px);box-shadow:0 8px 25px var(--glow-purple)}
.demo-output{background:#0d1117;border:1px solid var(--border-color);border-radius:var(--radius);padding:25px;min-height:120px;font-family:'Amiri',serif;font-size:1.1rem;line-height:2}
.demo-panel{display:none;animation:fadeIn 0.5s ease}
.demo-placeholder{display:block}
#d1:checked~.demo-box .demo-placeholder,#d2:checked~.demo-box .demo-placeholder,#d3:checked~.demo-box .demo-placeholder,#d4:checked~.demo-box .demo-placeholder{display:none}
#d1:checked~.demo-box #dp1{display:block}
#d2:checked~.demo-box #dp2{display:block}
#d3:checked~.demo-box #dp3{display:block}
#d4:checked~.demo-box #dp4{display:block}
/* QUIZ */
.quiz-q{background:var(--bg-card);padding:28px;border-radius:var(--radius);margin-bottom:24px;border:1px solid var(--border-color)}
.quiz-q h3{color:var(--text-primary);font-size:1.2rem;margin-bottom:18px;font-weight:700}
.quiz-opts{display:flex;flex-direction:column;gap:12px}
.quiz-opts input[type="radio"]{position:absolute;opacity:0;pointer-events:none}
.quiz-opts label{background:var(--bg-secondary);padding:14px 20px;border-radius:var(--radius-sm);border:2px solid var(--border-color);cursor:pointer;transition:all 0.3s;display:block}
.quiz-opts label:hover{border-color:var(--accent-purple);transform:translateX(-4px)}
.quiz-fb{margin-top:18px;padding:14px;border-radius:var(--radius-sm);display:none;font-size:1.05rem;animation:fadeIn 0.5s}
#q1b:checked~.q1-ok{display:block;background:rgba(16,185,129,0.1);border:1px solid var(--accent-green);color:var(--accent-green)}
#q1a:checked~.q1-no,#q1c:checked~.q1-no,#q1d:checked~.q1-no{display:block;background:rgba(239,68,68,0.1);border:1px solid var(--accent-red);color:var(--accent-red)}
#q1b:checked~label[for="q1b"]{border-color:var(--accent-green);background:rgba(16,185,129,0.1)}
#q1a:checked~label[for="q1a"],#q1c:checked~label[for="q1c"],#q1d:checked~label[for="q1d"]{border-color:var(--accent-red);background:rgba(239,68,68,0.1)}
#q2c:checked~.q2-ok{display:block;background:rgba(16,185,129,0.1);border:1px solid var(--accent-green);color:var(--accent-green)}
#q2a:checked~.q2-no,#q2b:checked~.q2-no,#q2d:checked~.q2-no{display:block;background:rgba(239,68,68,0.1);border:1px solid var(--accent-red);color:var(--accent-red)}
#q2c:checked~label[for="q2c"]{border-color:var(--accent-green);background:rgba(16,185,129,0.1)}
#q2a:checked~label[for="q2a"],#q2b:checked~label[for="q2b"],#q2d:checked~label[for="q2d"]{border-color:var(--accent-red);background:rgba(239,68,68,0.1)}
#q3b:checked~.q3-ok{display:block;background:rgba(16,185,129,0.1);border:1px solid var(--accent-green);color:var(--accent-green)}
#q3a:checked~.q3-no,#q3c:checked~.q3-no,#q3d:checked~.q3-no{display:block;background:rgba(239,68,68,0.1);border:1px solid var(--accent-red);color:var(--accent-red)}
#q3b:checked~label[for="q3b"]{border-color:var(--accent-green);background:rgba(16,185,129,0.1)}
#q3a:checked~label[for="q3a"],#q3c:checked~label[for="q3c"],#q3d:checked~label[for="q3d"]{border-color:var(--accent-red);background:rgba(239,68,68,0.1)}
/* STEPS */
.steps{counter-reset:step-counter;margin:25px 0}
.step{position:relative;padding:20px 70px 20px 0;margin-bottom:15px;counter-increment:step-counter}
.step::before{content:counter(step-counter);position:absolute;right:0;top:20px;width:45px;height:45px;line-height:45px;text-align:center;border-radius:50%;background:linear-gradient(135deg,var(--accent-purple),var(--accent-blue));font-weight:800;font-size:1.1rem;box-shadow:0 4px 15px var(--glow-purple)}
.step::after{content:'';position:absolute;right:21px;top:70px;width:3px;height:calc(100% - 50px);background:linear-gradient(to bottom,var(--accent-purple),transparent)}
.step:last-child::after{display:none}
.step h4{color:var(--accent-cyan);font-size:1.15rem;margin-bottom:8px;font-weight:700}
/* MISC */
.badge{display:inline-block;background:linear-gradient(135deg,var(--accent-purple),var(--accent-cyan));padding:6px 18px;border-radius:20px;font-size:0.85rem;margin:4px;font-weight:600}
.divider{height:2px;background:linear-gradient(90deg,transparent,var(--accent-purple),var(--accent-cyan),transparent);margin:50px auto;max-width:400px;border:none}
.summary-card{background:linear-gradient(135deg,rgba(168,85,247,0.1),rgba(6,182,212,0.1));border:2px solid rgba(168,85,247,0.3);border-radius:var(--radius-lg);padding:40px;margin:30px 0}
.summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:25px}
.summary-item{background:var(--bg-card);padding:20px;border-radius:var(--radius);border-right:4px solid var(--accent-purple)}
.summary-item strong{color:var(--accent-purple);display:block;margin-bottom:8px;font-weight:700}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:20px 0}
.styled-list{list-style:none;margin:15px 0}
.styled-list li{padding:10px 30px 10px 0;position:relative;line-height:1.9;font-size:1.05rem}
.styled-list li::before{content:'◆';position:absolute;right:0;color:var(--accent-purple);font-size:0.7rem;top:14px}
footer{background:var(--bg-secondary);padding:50px 20px;text-align:center;border-top:1px solid var(--border-color)}
footer p{color:var(--text-muted)}
@media(max-width:768px){
.hero-phrase{padding:20px;font-size:1.1rem}
.card,.glass-card{padding:22px}
.two-col,.grid{grid-template-columns:1fr}
.nav-links{display:none}
.section{padding:50px 0}
.step{padding-right:60px}
}
</style>
</head>
<body>
<!-- NAV -->
<nav class="nav">
<div class="container">
<span class="nav-brand">📚 قاموس الذكاء الاصطناعي</span>
<ul class="nav-links">
<li><a href="#what-is-it">ما هي؟</a></li>
<li><a href="#why">لماذا؟</a></li>
<li><a href="#how">كيف؟</a></li>
<li><a href="#demo-section">تجربة</a></li>
<li><a href="#breakdown">التحليل</a></li>
<li><a href="#mistakes">أخطاء</a></li>
<li><a href="#tips">نصائح</a></li>
<li><a href="#quiz-section">اختبار</a></li>
</ul>
</div>
</nav>
<!-- HERO -->
<section class="hero" id="hero">
<div class="hero-bg"></div>
<div class="hero-pattern"></div>
<div class="hero-content">
<div class="hero-badge">🎓 درس تفاعلي شامل</div>
<h1><span class="gradient-text">الجملة المفيدة</span><br>وشروط تمامها</h1>
<div class="hero-phrase">
<span class="keyword">بأنّ</span> الجملة تكون ذات <span class="highlight">فائدة تامّة</span> ويحسن <span class="important">السكوت عليها</span> فلا يسأل السائل بعدها
</div>
<p style="color:var(--text-secondary);font-size:1.15rem;max-width:600px;margin:0 auto">✨ رحلة تعليمية ممتعة لفهم أساس الكلام في اللغة العربية ✨</p>
<div class="hero-stats">
<div><div class="hero-stat-number">١١</div><div class="hero-stat-label">قسم تعليمي</div></div>
<div><div class="hero-stat-number">٣</div><div class="hero-stat-label">أسئلة تفاعلية</div></div>
<div><div class="hero-stat-number">١٠</div><div class="hero-stat-label">دقائق للإتمام</div></div>
</div>
</div>
<a href="#overview" class="scroll-arrow">⬇️</a>
</section>
<!-- PART A: QUICK OVERVIEW -->
<section class="section" id="overview">
<div class="container">
<div class="section-header">
<div class="section-number">أ</div>
<h2>📖 نظرة سريعة</h2>
<p>فهم الفكرة الأساسية في دقيقتين</p>
</div>
<div class="glass-card">
<h3>🎯 الخلاصة ببساطة</h3>
<p style="font-size:1.15rem;line-height:2.2;margin-bottom:20px">هذه العبارة تشرح <strong style="color:var(--accent-green)">القاعدة الذهبية</strong> للجملة المفيدة في اللغة العربية:</p>
<div class="example-box">
<p style="font-size:1.3rem;font-family:'Amiri',serif;line-height:2.5;text-align:center">
الجملة المفيدة = كلام يعطي <span style="color:var(--accent-green);font-weight:700">معنى كاملاً</span> + يمكنك <span style="color:var(--accent-orange);font-weight:700">التوقف عنده</span> + لا يحتاج <span style="color:var(--accent-cyan);font-weight:700">سؤالاً بعده</span>
</p>
</div>
<div class="two-col" style="margin-top:25px">
<div class="success-box">
<h4>✅ مثال على جملة مفيدة:</h4>
<p style="font-size:1.3rem;font-family:'Amiri',serif;color:var(--accent-green);margin-top:10px">«الشمسُ طالعةٌ»</p>
<p style="margin-top:8px">المعنى واضح ✓ يمكن السكوت ✓ لا سؤال بعدها ✓</p>
</div>
<div class="warning-box">
<h4>❌ مثال على كلام ناقص:</h4>
<p style="font-size:1.3rem;font-family:'Amiri',serif;color:var(--accent-red);margin-top:10px">«إذا طلعت الشمس...»</p>
<p style="margin-top:8px">المعنى ناقص ✗ لا يمكن السكوت ✗ السائل يسأل: ماذا؟ ✗</p>
</div>
</div>
<div class="info-box" style="margin-top:20px">
<p style="font-size:1.05rem">🧩 <strong>تشبيه بسيط:</strong> تخيل أنك تبني بيتاً من المكعبات. الجملة المفيدة هي البيت المكتمل الذي يقف بمفرده. أما الكلام الناقص فهو بيت بلا سقف — لا يزال يحتاج شيئاً ليكتمل!</p>
</div>
</div>
</div>
</section>
<hr class="divider">
<!-- SECTION 1: WHAT IS IT -->
<section class="section" id="what-is-it">
<div class="container">
<div class="section-header">
<div class="section-number">١</div>
<h2>🤔 ما معنى هذه العبارة؟</h2>
<p>شرح تفصيلي لكل جزء من العبارة</p>
</div>
<div class="card">
<h3>📝 التعريف الكامل</h3>
<p style="font-size:1.1rem;line-height:2.2">هذه العبارة هي <strong style="color:var(--accent-purple)">تعريف نحوي</strong> يشرح متى يكون الكلام "جملة مفيدة". وتضع <strong>ثلاثة شروط</strong> أساسية:</p>
<div class="steps">
<div class="step">
<h4>الشرط الأول: الفائدة التامة 🎯</h4>
<p>الجملة يجب أن تعطي <span style="color:var(--accent-green);font-weight:700">معنى كاملاً ومفهوماً</span>. يستطيع السامع فهم المقصود بدون أي إضافة.</p>
</div>
<div class="step">
<h4>الشرط الثاني: حُسن السكوت 🤫</h4>
<p>يمكن للمتكلم أن <span style="color:var(--accent-orange);font-weight:700">يتوقف ويسكت</span> بعد قول الجملة دون شعور السامع بأن الكلام ناقص.</p>
</div>
<div class="step">
<h4>الشرط الثالث: عدم الاحتياج للسؤال 💬</h4>
<p>لا يحتاج السامع أن <span style="color:var(--accent-cyan);font-weight:700">يسأل سؤالاً</span> بعد سماع الجملة — الكلام مكتفٍ بذاته.</p>
</div>
</div>
</div>
<div class="card">
<h3>🔬 تحليل العبارة كلمة بكلمة</h3>
<div class="code-block" style="font-size:1.2rem">
<div><span class="code-keyword">بأنّ</span> ← أداة تعليل وتفسير وتوكيد</div>
<div><span class="code-function">الجملة</span> ← التركيب اللغوي المكوّن من كلمتين أو أكثر</div>
<div><span class="code-string">تكون ذات فائدة تامّة</span> ← الشرط الأول: إعطاء معنى كامل</div>
<div><span class="code-important">ويحسن السكوت عليها</span> ← الشرط الثاني: يمكن الوقف</div>
<div><span class="code-keyword">فلا يسأل السائل بعدها</span> ← الشرط الثالث: لا حاجة لسؤال</div>
</div>
<div class="tip-box">
<p>💡 <strong>ملاحظة مهمة:</strong> هذه الشروط مترابطة — إذا تحقق أحدها غالباً تحققت جميعها. فالجملة ذات الفائدة التامة يحسن السكوت عليها بطبيعة الحال.</p>
</div>
</div>
</div>
</section>
<!-- SECTION 2: WHY -->
<section class="section" id="why">
<div class="container">
<div class="section-header">
<div class="section-number">٢</div>
<h2>💡 لماذا هذه القاعدة مهمة؟</h2>
<p>أهمية فهم الجملة المفيدة في حياتنا</p>
</div>
<div class="grid">
<div class="grid-item"><span class="icon">🗣️</span><h4>التواصل الفعال</h4><p>بناء كلام واضح يوصل الفكرة بدون غموض</p></div>
<div class="grid-item"><span class="icon">📝</span><h4>الكتابة السليمة</h4><p>كتابة نصوص مترابطة ومفهومة</p></div>
<div class="grid-item"><span class="icon">📖</span><h4>فهم القرآن الكريم</h4><p>تحليل الآيات وفهم بنيتها النحوية</p></div>
<div class="grid-item"><span class="icon">🎓</span><h4>التفوق الدراسي</h4><p>أساس النحو العربي كله</p></div>
<div class="grid-item"><span class="icon">⚖️</span><h4>الدقة القانونية</h4><p>صياغة عقود ووثائق لا تحتمل اللبس</p></div>
<div class="grid-item"><span class="icon">🎯</span><h4>الإقناع والتأثير</h4><p>الخطابة تعتمد على جمل واضحة ومكتملة</p></div>
</div>
<div class="info-box">
<p style="font-size:1.05rem">🌟 <strong>حقيقة ممتعة:</strong> قال العلماء: «أقلّ ما تتركب منه الجملة المفيدة كلمتان». فقولك «الله أكبر» جملة مفيدة كاملة من كلمتين فقط!</p>
</div>
</div>
</section>
<!-- SECTION 3: HOW IT WORKS -->
<section class="section" id="how">
<div class="container">
<div class="section-header">
<div class="section-number">٣</div>
<h2>⚙️ كيف تعمل هذه القاعدة؟</h2>
<p>فهم البنية والتطبيق العملي</p>
</div>
<div class="card">
<h3>🎨 أنواع الجملة المفيدة</h3>
<div class="tabs-wrapper">
<input type="radio" name="main-tabs" id="tab1" checked>
<input type="radio" name="main-tabs" id="tab2">
<input type="radio" name="main-tabs" id="tab3">
<div class="tabs-nav">
<label for="tab1">📘 الجملة الاسمية</label>
<label for="tab2">📗 الجملة الفعلية</label>
<label for="tab3">📙 المقارنة</label>
</div>
<div class="tab-panel" id="panel1">
<h4>📘 الجملة الاسمية المفيدة</h4>
<p style="margin-bottom:15px">تبدأ باسم وتتكون من <span class="tooltip">المبتدأ<span class="tt">المبتدأ: الاسم الذي نبدأ به الجملة ونخبر عنه</span></span> و<span class="tooltip">الخبر<span class="tt">الخبر: ما نخبر به عن المبتدأ ويتمم المعنى</span></span></p>
<div class="example-box">
<div style="text-align:center;font-size:1.3rem;font-family:'Amiri',serif">
<span style="color:var(--accent-cyan)">المبتدأ</span> + <span style="color:var(--accent-green)">الخبر</span> = ✅ جملة اسمية مفيدة
</div>
</div>
<div class="success-box">
<h4 style="margin-bottom:10px">أمثلة:</h4>
<ul class="styled-list">
<li>🌞 <span style="color:var(--accent-cyan);font-weight:700">الشمسُ</span> <span style="color:var(--accent-green)">مشرقةٌ</span></li>
<li>📚 <span style="color:var(--accent-cyan);font-weight:700">العلمُ</span> <span style="color:var(--accent-green)">نورٌ</span></li>
<li>🏠 <span style="color:var(--accent-cyan);font-weight:700">البيتُ</span> <span style="color:var(--accent-green)">واسعٌ</span></li>
<li>🌊 <span style="color:var(--accent-cyan);font-weight:700">البحرُ</span> <span style="color:var(--accent-green)">هادئٌ</span></li>
</ul>
</div>
</div>
<div class="tab-panel" id="panel2">
<h4>📗 الجملة الفعلية المفيدة</h4>
<p style="margin-bottom:15px">تبدأ بفعل وتتكون من <span class="tooltip">الفعل<span class="tt">الفعل: كلمة تدل على حدث مرتبط بزمن</span></span> و<span class="tooltip">الفاعل<span class="tt">الفاعل: من قام بالفعل أو اتصف به</span></span></p>
<div class="example-box">
<div style="text-align:center;font-size:1.3rem;font-family:'Amiri',serif">
<span style="color:var(--accent-purple)">الفعل</span> + <span style="color:var(--accent-cyan)">الفاعل</span> = ✅ جملة فعلية مفيدة
</div>
</div>
<div class="success-box">
<h4 style="margin-bottom:10px">أمثلة:</h4>
<ul class="styled-list">
<li>☀️ <span style="color:var(--accent-purple);font-weight:700">طلعت</span> <span style="color:var(--accent-cyan)">الشمسُ</span></li>
<li>📖 <span style="color:var(--accent-purple);font-weight:700">قرأ</span> <span style="color:var(--accent-cyan)">الطالبُ</span> <span style="color:var(--accent-green)">الكتابَ</span></li>
<li>🎵 <span style="color:var(--accent-purple);font-weight:700">يغرّد</span> <span style="color:var(--accent-cyan)">العصفورُ</span></li>
<li>✍️ <span style="color:var(--accent-purple);font-weight:700">كتبت</span> <span style="color:var(--accent-cyan)">الطالبةُ</span> <span style="color:var(--accent-green)">الواجبَ</span></li>
</ul>
</div>
</div>
<div class="tab-panel" id="panel3">
<h4>📙 مقارنة بين النوعين</h4>
<div class="two-col">
<div class="info-box" style="border-right-color:var(--accent-cyan)">
<h4 style="color:var(--accent-cyan)">الجملة الاسمية</h4>
<ul class="styled-list">
<li>تبدأ باسم</li>
<li>مبتدأ + خبر</li>
<li>تدل على الثبوت</li>
<li>مثال: «السماءُ صافيةٌ»</li>
</ul>
</div>
<div class="info-box" style="border-right-color:var(--accent-purple)">
<h4 style="color:var(--accent-purple)">الجملة الفعلية</h4>
<ul class="styled-list">
<li>تبدأ بفعل</li>
<li>فعل + فاعل</li>
<li>تدل على الحدوث والتجدد</li>
<li>مثال: «هبّت الرياحُ»</li>
</ul>
</div>
</div>
<div class="tip-box" style="margin-top:15px">
<p>💡 <strong>القاعدة المشتركة:</strong> سواء اسمية أو فعلية، يجب أن تتوفر الشروط الثلاثة: الفائدة التامة، وحسن السكوت، وعدم احتياج السامع للسؤال.</p>
</div>
</div>
</div>
</div>
<div class="card">
<h3>📋 الشروط الثلاثة بالتفصيل</h3>
<div class="accordion">
<details>
<summary>🎯 الشرط الأول: الفائدة التامة</summary>
<div class="acc-body">
<p>الجملة تحمل معنى مكتملاً يفهمه السامع فوراً.</p>
<div class="two-col" style="margin-top:15px">
<div class="success-box"><p><strong>✅ فائدة تامة:</strong></p><p class="example-sentence">العلمُ نافعٌ</p><p class="example-sentence">أحبُّ وطني</p></div>
<div class="warning-box"><p><strong>❌ فائدة ناقصة:</strong></p><p class="example-sentence wrong">العلمُ النافعُ... (ماذا عنه؟)</p><p class="example-sentence wrong">في الصباح... (ماذا حدث؟)</p></div>
</div>
</div>
</details>
<details>
<summary>🤫 الشرط الثاني: حُسن السكوت عليها</summary>
<div class="acc-body">
<p>يمكن للمتكلم أن يتوقف بعد الجملة ويسكت والسامع يشعر بأن الكلام تام.</p>
<div class="two-col" style="margin-top:15px">
<div class="success-box"><p><strong>✅ يحسن السكوت:</strong></p><p class="example-sentence">الحمد لله</p><p class="example-sentence">نجح الطالبُ</p></div>
<div class="warning-box"><p><strong>❌ لا يحسن السكوت:</strong></p><p class="example-sentence wrong">إذا نجحتَ...</p><p class="example-sentence wrong">لأنّ العلمَ...</p></div>
</div>
<div class="tip-box" style="margin-top:15px"><p>💡 <strong>اختبار سريع:</strong> اقرأ الجملة بصوت عالٍ ثم اسكت. هل تشعر بالراحة؟ إذا نعم فهي جملة مفيدة!</p></div>
</div>
</details>
<details>
<summary>💬 الشرط الثالث: لا يسأل السائل بعدها</summary>
<div class="acc-body">
<p>بعد سماع الجملة، لا يسأل السامع «ماذا؟» أو «ثم ماذا؟»</p>
<div class="two-col" style="margin-top:15px">
<div class="success-box"><p><strong>✅ لا سؤال:</strong></p><p class="example-sentence">فتح المسلمون الأندلس</p></div>
<div class="warning-box"><p><strong>❌ يسأل بعدها:</strong></p><p class="example-sentence wrong">عندما فتح المسلمون... (ماذا حدث؟)</p></div>
</div>
</div>
</details>
</div>
</div>
</div>
</section>
<!-- SECTION 4: LIVE DEMO -->
<section class="section" id="demo-section">
<div class="container">
<div class="section-header">
<div class="section-number">٤</div>
<h2>🎮 تجربة تفاعلية</h2>
<p>شاهد أمثلة حية وتعلم بالممارسة</p>
</div>
<div class="card">
<h3>🔨 استكشف أنواع الجمل</h3>
<div class="demo-wrapper">
<input type="radio" name="demo-choice" id="d1">
<input type="radio" name="demo-choice" id="d2">
<input type="radio" name="demo-choice" id="d3">
<input type="radio" name="demo-choice" id="d4">
<div class="demo-box">
<div class="demo-buttons">
<label class="demo-btn" for="d1">🏗️ بناء جملة اسمية</label>
<label class="demo-btn" for="d2">🔧 بناء جملة فعلية</label>
<label class="demo-btn" for="d3">📖 أمثلة قرآنية</label>
<label class="demo-btn" for="d4">🧪 اختبار الشروط</label>
</div>
<div class="demo-output">
<p class="demo-placeholder" style="color:var(--text-muted);text-align:center;padding:20px">👆 اضغط على أحد الأزرار أعلاه لاستكشاف الأمثلة</p>
<div class="demo-panel" id="dp1">
<h4 style="color:var(--accent-cyan);margin-bottom:20px;text-align:center">🏗️ بناء جملة اسمية خطوة بخطوة</h4>
<p>الخطوة ١: نختار <strong style="color:var(--accent-cyan)">اسماً</strong> ليكون المبتدأ</p>
<p style="font-size:1.4rem;color:var(--accent-cyan);text-align:center;margin:10px 0">السماءُ</p>
<p>الخطوة ٢: نضيف <strong style="color:var(--accent-green)">الخبر</strong> لإكمال المعنى</p>
<p style="font-size:1.4rem;color:var(--accent-green);text-align:center;margin:10px 0">صافيةٌ</p>
<p style="margin-top:15px;text-align:center;font-size:1.3rem;padding:15px;background:rgba(16,185,129,0.1);border-radius:10px">✅ النتيجة: <span style="color:var(--accent-cyan)">السماءُ</span> <span style="color:var(--accent-green)">صافيةٌ</span></p>
<p style="text-align:center;margin-top:10px;color:var(--text-muted)">فائدة تامة ✓ | يحسن السكوت ✓ | لا سؤال ✓</p>
</div>
<div class="demo-panel" id="dp2">
<h4 style="color:var(--accent-purple);margin-bottom:20px;text-align:center">🔧 بناء جملة فعلية خطوة بخطوة</h4>
<p>الخطوة ١: نختار <strong style="color:var(--accent-purple)">فعلاً</strong></p>
<p style="font-size:1.4rem;color:var(--accent-purple);text-align:center;margin:10px 0">كتبَ</p>
<p>الخطوة ٢: نضيف <strong style="color:var(--accent-cyan)">الفاعل</strong></p>
<p style="font-size:1.4rem;color:var(--accent-cyan);text-align:center;margin:10px 0">الطالبُ</p>
<p>الخطوة ٣ (اختياري): نضيف <strong style="color:var(--accent-green)">المفعول به</strong></p>
<p style="font-size:1.4rem;color:var(--accent-green);text-align:center;margin:10px 0">الدرسَ</p>
<p style="margin-top:15px;text-align:center;font-size:1.3rem;padding:15px;background:rgba(168,85,247,0.1);border-radius:10px">✅ النتيجة: <span style="color:var(--accent-purple)">كتبَ</span> <span style="color:var(--accent-cyan)">الطالبُ</span> <span style="color:var(--accent-green)">الدرسَ</span></p>
<p style="text-align:center;margin-top:10px;color:var(--text-muted)">فائدة تامة ✓ | يحسن السكوت ✓ | لا سؤال ✓</p>
</div>
<div class="demo-panel" id="dp3">
<h4 style="color:var(--accent-green);margin-bottom:20px;text-align:center">📖 أمثلة من القرآن الكريم</h4>
<div style="font-family:'Amiri',serif;font-size:1.2rem;line-height:2.8">
<p>📖 ﴿ <strong>اللَّهُ نُورُ السَّمَاوَاتِ وَالْأَرْضِ</strong> ﴾ — النور: ٣٥</p>
<p style="color:var(--text-secondary);font-size:0.95rem;margin-bottom:20px">↳ جملة اسمية مفيدة | المبتدأ: الله | الخبر: نور السماوات والأرض</p>
<p>📖 ﴿ <strong>قَدْ أَفْلَحَ الْمُؤْمِنُونَ</strong> ﴾ — المؤمنون: ١</p>
<p style="color:var(--text-secondary);font-size:0.95rem;margin-bottom:20px">↳ جملة فعلية مفيدة | الفعل: أفلح | الفاعل: المؤمنون</p>
<p>📖 ﴿ <strong>الْحَمْدُ لِلَّهِ رَبِّ الْعَالَمِينَ</strong> ﴾ — الفاتحة: ٢</p>
<p style="color:var(--text-secondary);font-size:0.95rem;margin-bottom:20px">↳ جملة اسمية مفيدة | المبتدأ: الحمد | الخبر: لله</p>
<p>📖 ﴿ <strong>خَلَقَ اللَّهُ السَّمَاوَاتِ وَالْأَرْضَ</strong> ﴾ — العنكبوت: ٤٤</p>
<p style="color:var(--text-secondary);font-size:0.95rem">↳ جملة فعلية مفيدة | الفعل: خلق | الفاعل: الله | المفعول: السماوات والأرض</p>
</div>
</div>
<div class="demo-panel" id="dp4">
<h4 style="color:var(--accent-orange);margin-bottom:20px;text-align:center">🧪 اختبار الشروط الثلاثة</h4>
<p style="text-align:center;margin-bottom:15px;font-size:1.1rem">لنطبّق الشروط على أمثلة:</p>
<div style="background:rgba(16,185,129,0.08);padding:15px;border-radius:10px;margin-bottom:12px">
<p style="font-size:1.2rem;font-family:'Amiri',serif"><strong>«نجح المجتهدُ»</strong></p>
<p>١. فائدة تامة؟ ✅ نعم — نعرف من نجح</p>
<p>٢. يحسن السكوت؟ ✅ نعم — الكلام تام</p>
<p>٣. لا سؤال بعدها؟ ✅ نعم</p>
<p style="color:var(--accent-green);font-weight:700;margin-top:5px">🎉 النتيجة: جملة مفيدة!</p>
</div>
<div style="background:rgba(239,68,68,0.08);padding:15px;border-radius:10px">
<p style="font-size:1.2rem;font-family:'Amiri',serif"><strong>«لو اجتهدتَ...»</strong></p>
<p>١. فائدة تامة؟ ❌ لا — ماذا سيحدث؟</p>
<p>٢. يحسن السكوت؟ ❌ لا — ننتظر تكملة</p>
<p>٣. لا سؤال بعدها؟ ❌ لا — السامع يسأل: ماذا؟</p>
<p style="color:var(--accent-red);font-weight:700;margin-top:5px">❌ النتيجة: ليست جملة مفيدة!</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- SECTION 5: CODE BREAKDOWN -->
<section class="section" id="breakdown">
<div class="container">
<div class="section-header">
<div class="section-number">٥</div>
<h2>🔎 تحليل العبارة بالتفصيل</h2>
<p>تشريح كل مقطع من النص الأصلي</p>
</div>
<div class="card">
<h3>📐 التحليل النحوي للعبارة</h3>
<div class="code-block" style="font-size:1.25rem;line-height:2.5">
<div><span class="code-comment">/* المقطع الأول: مقدمة وتعليل */</span></div>
<div><span class="code-keyword">بأنّ</span> الجملة تكون</div>
<div style="margin-top:10px"><span class="code-comment">/* المقطع الثاني: الشرط الأول */</span></div>
<div>ذات <span class="code-string">فائدة تامّة</span></div>
<div style="margin-top:10px"><span class="code-comment">/* المقطع الثالث: الشرط الثاني */</span></div>
<div><span class="code-important">ويحسن السكوت عليها</span></div>
<div style="margin-top:10px"><span class="code-comment">/* المقطع الرابع: النتيجة */</span></div>
<div><span class="code-function">فلا يسأل السائل بعدها</span></div>
</div>
<div class="accordion" style="margin-top:20px">
<details>
<summary>📌 «بأنّ الجملة تكون» — التقديم</summary>
<div class="acc-body">
<p><strong>بأنّ:</strong> حرف مشبه بالفعل يفيد التوكيد والتعليل.</p>
<p><strong>الجملة:</strong> اسم «أنّ» منصوب — التركيب اللغوي الذي نتحدث عنه.</p>
<p><strong>تكون:</strong> فعل مضارع ناقص — خبر «أنّ».</p>
</div>
</details>
<details>
<summary>📌 «ذات فائدة تامّة» — الشرط الأول</summary>
<div class="acc-body">
<p><strong>ذات:</strong> بمعنى صاحبة — تدل على الاتصاف.</p>
<p><strong>فائدة:</strong> المعنى أو الدلالة التي تحملها الجملة.</p>
<p><strong>تامّة:</strong> صفة — أي كاملة لا نقص فيها. ليست فائدة جزئية بل شاملة يفهمها السامع فوراً.</p>
</div>
</details>
<details>
<summary>📌 «ويحسن السكوت عليها» — الشرط الثاني</summary>
<div class="acc-body">
<p><strong>يحسن:</strong> فعل مضارع — أي يكون حسناً ومقبولاً.</p>
<p><strong>السكوت:</strong> التوقف عن الكلام — فاعل مرفوع.</p>
<p><strong>عليها:</strong> الضمير يعود على الجملة المفيدة.</p>
<p style="margin-top:10px">المعنى: المتكلم يستطيع التوقف بعد هذه الجملة دون أن يشعر بالحرج أو النقص.</p>
</div>
</details>
<details>
<summary>📌 «فلا يسأل السائل بعدها» — الشرط الثالث</summary>
<div class="acc-body">
<p><strong>فلا:</strong> الفاء تفيد النتيجة، و«لا» نافية.</p>
<p><strong>يسأل:</strong> فعل مضارع — لا يحتاج لطرح سؤال.</p>
<p><strong>السائل:</strong> المستمع — فاعل مرفوع.</p>
<p><strong>بعدها:</strong> بعد سماع هذه الجملة.</p>
<p style="margin-top:10px">نتيجة طبيعية: إذا تمت الفائدة وحسن السكوت، فلن يحتاج السامع أن يسأل شيئاً.</p>
</div>
</details>
</div>
</div>
</div>
</section>
<!-- SECTION 6: COMMON MISTAKES -->
<section class="section" id="mistakes">
<div class="container">
<div class="section-header">
<div class="section-number">٦</div>
<h2>⚠️ الأخطاء الشائعة</h2>
<p>تجنب هذه الأخطاء لإتقان القاعدة</p>
</div>
<div class="card">
<div class="warning-box" style="margin-bottom:20px">
<h4 style="color:var(--accent-red)">❌ الخطأ ١: اعتبار كل تركيب جملة مفيدة</h4>
<p style="margin-top:8px">ليس كل تركيب من كلمتين أو أكثر يُعتبر جملة مفيدة.</p>
<div class="example-box" style="margin-top:12px">
<p class="example-sentence wrong">«في الصباح الباكر» ← ليست جملة مفيدة!</p>
<p class="example-sentence">«استيقظتُ في الصباح الباكر» ← ✅ جملة مفيدة</p>
</div>
</div>
<div class="warning-box" style="margin-bottom:20px">
<h4 style="color:var(--accent-red)">❌ الخطأ ٢: الجمل الشرطية الناقصة</h4>
<p style="margin-top:8px">استخدام أدوات الشرط بدون جواب الشرط.</p>
<div class="example-box" style="margin-top:12px">
<p class="example-sentence wrong">«إذا اجتهدتَ...» ← ماذا سيحدث؟</p>
<p class="example-sentence wrong">«لو كنتُ مكانك...» ← ماذا كنت ستفعل؟</p>
<p class="example-sentence">«إذا اجتهدتَ نجحتَ» ← ✅ جملة كاملة</p>
</div>
</div>
<div class="warning-box" style="margin-bottom:20px">
<h4 style="color:var(--accent-red)">❌ الخطأ ٣: الخلط بين الكلمة والجملة</h4>
<p style="margin-top:8px">الكلمة المفردة ليست جملة مفيدة مهما كان معناها.</p>
<div class="example-box" style="margin-top:12px">
<p class="example-sentence wrong">«الشمس» ← كلمة مفردة فقط</p>
<p class="example-sentence">«الشمسُ جميلةٌ» ← ✅ جملة مفيدة كاملة</p>
</div>
</div>
<div class="warning-box">
<h4 style="color:var(--accent-red)">❌ الخطأ ٤: الموصول بدون صلة كاملة</h4>
<p style="margin-top:8px">استخدام الأسماء الموصولة بدون إكمال الكلام.</p>
<div class="example-box" style="margin-top:12px">
<p class="example-sentence wrong">«الذي في المدرسة...» ← من هو؟ ما خبره؟</p>
<p class="example-sentence">«الذي في المدرسة أخي» ← ✅ جملة مفيدة</p>
</div>
</div>
</div>
</div>
</section>
<!-- SECTION 7: PRO TIPS -->
<section class="section" id="tips">
<div class="container">
<div class="section-header">
<div class="section-number">٧</div>
<h2>🌟 نصائح الخبراء</h2>
<p>أسرار إتقان هذه القاعدة</p>
</div>
<div class="grid">
<div class="card"><h3>💡 اختبار الثلاثة</h3><p>عند الشك اسأل: هل المعنى تام؟ هل يمكنني السكوت؟ هل سيسأل أحد؟ إذا كانت الإجابات: نعم، نعم، لا — فهي مفيدة!</p></div>
<div class="card"><h3>🎯 أقصر جملة</h3><p>أقل جملة مفيدة كلمتان: «اللهُ أكبرُ» أو «جاءَ الحقُّ». البساطة لا تتعارض مع الفائدة التامة!</p></div>
<div class="card"><h3>📖 تدرّب بالقرآن</h3><p>القرآن أفضل مصدر. حلّل بداية كل آية: اسمية أم فعلية؟ أين المبتدأ والخبر أو الفعل والفاعل؟</p></div>
<div class="card"><h3>⚡ انتبه للأدوات</h3><p>أدوات الشرط (إذا، لو، إن) والأسماء الموصولة (الذي، التي) تحتاج تكملة. لا تتوقف عندها!</p></div>
<div class="card"><h3>🎨 نوّع بين النوعين</h3><p>الاسمية للثبات والوصف، والفعلية للحركة والأحداث. التنويع يجعل النص حياً وجميلاً!</p></div>
<div class="card"><h3>🔍 راجع كتابتك</h3><p>بعد الكتابة، اقرأ كل جملة بمفردها. هل كل جملة مفيدة بذاتها؟ هذه المراجعة تحسّن كتابتك كثيراً.</p></div>
</div>
</div>
</section>
<!-- SECTION 8: QUIZ -->
<section class="section" id="quiz-section">
<div class="container">
<div class="section-header">
<div class="section-number">٨</div>
<h2>🎯 اختبر معلوماتك!</h2>
<p>ثلاثة أسئلة لإثبات فهمك</p>
</div>
<div class="info-box" style="text-align:center;margin-bottom:30px">
<p style="font-size:1.1rem">🏆 اختر الإجابة الصحيحة وسيظهر لك التقييم فوراً!</p>
</div>
<!-- Quiz 1 — correct: b -->
<div class="quiz-q">
<h3>❓ السؤال الأول: أيّ مما يلي يُعتبر جملة مفيدة؟</h3>
<div class="quiz-opts">
<input type="radio" name="quiz1" id="q1a">
<input type="radio" name="quiz1" id="q1b">
<input type="radio" name="quiz1" id="q1c">
<input type="radio" name="quiz1" id="q1d">
<label for="q1a">أ) في المدرسة الكبيرة</label>
<label for="q1b">ب) العلمُ نورٌ</label>
<label for="q1c">ج) الطالب المجتهد الذي...</label>
<label for="q1d">د) إذا جاء الربيع</label>
<div class="quiz-fb q1-ok">🎉 ممتاز! «العلمُ نورٌ» جملة اسمية مفيدة — فائدة تامة، يحسن السكوت عليها، ولا يسأل السائل بعدها!</div>
<div class="quiz-fb q1-no">❌ الإجابة الصحيحة هي «العلمُ نورٌ» — الوحيدة التي تحقق الشروط الثلاثة.</div>
</div>
</div>
<!-- Quiz 2 — correct: c -->
<div class="quiz-q">
<h3>❓ السؤال الثاني: ما المشكلة في «لو كنتُ غنياً...»؟</h3>
<div class="quiz-opts">
<input type="radio" name="quiz2" id="q2a">
<input type="radio" name="quiz2" id="q2b">
<input type="radio" name="quiz2" id="q2c">
<input type="radio" name="quiz2" id="q2d">
<label for="q2a">أ) لا تحتوي على فعل</label>
<label for="q2b">ب) ليس فيها اسم</label>
<label for="q2c">ج) لا يحسن السكوت عليها ولا تفيد فائدة تامة</label>
<label for="q2d">د) طويلة جداً</label>
<div class="quiz-fb q2-ok">🎉 أحسنت! هذه جملة شرطية ناقصة — السامع ينتظر جواب الشرط ويسأل: ماذا لو كنت غنياً؟</div>
<div class="quiz-fb q2-no">❌ الإجابة الصحيحة: لا يحسن السكوت عليها ولا تفيد فائدة تامة — لأنها جملة شرطية ناقصة بدون جواب.</div>
</div>
</div>
<!-- Quiz 3 — correct: b -->
<div class="quiz-q">
<h3>❓ السؤال الثالث: «فتح المسلمون الأندلس» — ما نوعها؟</h3>
<div class="quiz-opts">
<input type="radio" name="quiz3" id="q3a">
<input type="radio" name="quiz3" id="q3b">
<input type="radio" name="quiz3" id="q3c">
<input type="radio" name="quiz3" id="q3d">
<label for="q3a">أ) جملة اسمية مفيدة</label>
<label for="q3b">ب) جملة فعلية مفيدة</label>
<label for="q3c">ج) ليست جملة مفيدة</label>
<label for="q3d">د) شبه جملة</label>
<div class="quiz-fb q3-ok">🎉 ممتاز! جملة فعلية مفيدة — الفعل: فتح، الفاعل: المسلمون، المفعول: الأندلس. فائدة تامة ويحسن السكوت عليها!</div>
<div class="quiz-fb q3-no">❌ الإجابة الصحيحة: جملة فعلية مفيدة — تبدأ بالفعل «فتح» وتحقق جميع الشروط الثلاثة.</div>
</div>
</div>
</div>
</section>
<!-- SECTION 9: SUMMARY CARD -->
<section class="section" id="summary">
<div class="container">
<div class="section-header">
<div class="section-number">٩</div>
<h2>📚 ملخص سريع</h2>
<p>مرجعك السريع للمراجعة</p>
</div>
<div class="summary-card">
<h3 style="text-align:center;margin-bottom:30px;font-family:'Amiri',serif;font-size:1.6rem;color:var(--accent-purple)">🎯 أساسيات الجملة المفيدة</h3>
<div class="summary-grid">
<div class="summary-item"><strong>📝 التعريف</strong><p>تركيب لغوي يفيد معنى تاماً يحسن السكوت عليه</p></div>
<div class="summary-item"><strong>📘 النوع الأول</strong><p>الجملة الاسمية: مبتدأ + خبر (تدل على الثبوت)</p></div>
<div class="summary-item"><strong>📗 النوع الثاني</strong><p>الجملة الفعلية: فعل + فاعل (تدل على الحدوث)</p></div>
<div class="summary-item"><strong>🎯 الشرط الأول</strong><p>الفائدة التامة — معنى كامل ومفهوم</p></div>
<div class="summary-item"><strong>🤫 الشرط الثاني</strong><p>حسن السكوت — يمكن التوقف عندها</p></div>
<div class="summary-item"><strong>💬 الشرط الثالث</strong><p>لا يسأل السائل — لا حاجة لسؤال بعدها</p></div>
</div>
<div class="success-box" style="margin-top:30px">
<h4 style="text-align:center;margin-bottom:15px">🔑 النقاط الرئيسية</h4>
<ul class="styled-list">
<li>✨ الجملة المفيدة هي وحدة الكلام الأساسية في اللغة العربية</li>
<li>🎯 أقل جملة مفيدة تتكون من كلمتين فقط</li>
<li>🎨 نوعان: اسمية (مبتدأ + خبر) وفعلية (فعل + فاعل)</li>
<li>⚡ الشروط الثلاثة مترابطة ومتكاملة</li>
<li>🔧 أساس الكتابة الصحيحة والتواصل الفعال</li>
<li>📖 ضرورية لفهم القرآن والنصوص العربية</li>
<li>⚠️ احذر من الجمل الشرطية الناقصة والأسماء الموصولة بدون خبر</li>
</ul>
</div>
</div>
</div>
</section>
<hr class="divider">
<!-- SECTION 10: ACHIEVEMENT -->
<section class="section">
<div class="container">
<div class="glass-card" style="text-align:center">
<h2 style="font-size:2.5rem;margin-bottom:20px">🏆</h2>
<h2 style="font-size:1.8rem;font-family:'Amiri',serif;margin-bottom:15px;color:var(--accent-purple)">أحسنت! لقد أتممت الدرس بنجاح!</h2>
<p style="font-size:1.15rem;color:var(--text-secondary);margin-bottom:25px">الآن أنت تفهم متى تكون الجملة ذات فائدة تامة يحسن السكوت عليها</p>
<div>
<span class="badge">🎓 خبير النحو</span>
<span class="badge">📖 محلل الجمل</span>
<span class="badge">✨ متقن اللغة</span>
<span class="badge">🏆 أتمّ الدرس</span>
</div>
</div>
</div>
</section>
<!-- FOOTER (SECTION 11) -->
<footer>
<div class="container">
<h3 style="margin-bottom:20px;color:var(--accent-purple);font-family:'Amiri',serif;font-size:1.5rem">📚 قاموس الذكاء الاصطناعي</h3>
<p style="font-size:1.1rem;margin-bottom:15px;color:var(--text-secondary)">نجعل التعلم تفاعلياً وممتعاً وفعالاً!</p>
<p style="margin-top:10px;font-size:0.9rem">تم إنشاؤه بواسطة <strong style="color:var(--accent-cyan)">AI Prompt Dictionary</strong> 🤖</p>
<div style="margin-top:25px">
<span class="badge">تعلم تفاعلي</span>
<span class="badge">النحو العربي</span>
<span class="badge">اللغة العربية</span>
<span class="badge">الجملة المفيدة</span>
<span class="badge">بدون JavaScript</span>
</div>
<p style="margin-top:20px;font-size:0.8rem;color:var(--text-muted)">هذا الملف يعمل بدون أي JavaScript — آمن تماماً للحفظ على الاستضافة المشتركة</p>
</div>
</footer>
Live Preview