اصناف الفوائد
📦 النحو الواضح
✨ 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: #0b0f1a;
--bg-secondary: #131832;
--bg-card: #1c2147;
--bg-glass: rgba(28, 33, 71, 0.75);
--accent-purple: #a855f7;
--accent-blue: #3b82f6;
--accent-green: #10b981;
--accent-cyan: #06b6d4;
--accent-pink: #ec4899;
--accent-orange: #f59e0b;
--accent-red: #ef4444;
--accent-teal: #14b8a6;
--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);
--glow-green: rgba(16,185,129,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> (يعلمها السامع)
</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="info-box" style="border-right-color:var(--accent-orange)">
<h4 style="color:var(--accent-orange)">🔄 مثال على فائدة قديمة:</h4>
<p style="font-size:1.3rem;font-family:'Amiri',serif;color:var(--accent-orange);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> تُصنّف الفائدة التي تنقلها الجملة المفيدة إلى صنفين اثنين:</p>
<div class="steps">
<div class="step">
<h4>الصنف الأول: الفائدة الجديدة �</h4>
<p>أن تنقل الجملة إلى السامع <span style="color:var(--accent-green);font-weight:700">معلومة لم يكن يعرفها من قبل</span>. هذا هو الأصل في الكلام — أن تُخبر الناس بما لا يعلمون. وتسمى عند البلاغيين <strong>«الفائدة»</strong>.</p>
</div>
<div class="step">
<h4>الصنف الثاني: الفائدة القديمة (لازم الفائدة) 🔄</h4>
<p>أن تنقل الجملة إلى السامع <span style="color:var(--accent-orange);font-weight:700">معلومة يعرفها مسبقاً</span>، لكن الفائدة هنا هي أن السامع يعلم أن المتكلم أيضاً يعلم هذا الأمر. وتسمى <strong>«لازم الفائدة»</strong>.</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> لم يكن على علم بها. وهذا هو الأصل في الكلام والإخبار.</p>
<div class="example-box">
<div style="text-align:center;font-size:1.2rem;font-family:'Amiri',serif">
معلومة <span style="color:var(--accent-green);font-weight:700">لم يعرفها</span> السامع = 🆕 فائدة جديدة
</div>
</div>
<div class="success-box">
<h4 style="margin-bottom:10px">أمثلة على الفائدة الجديدة:</h4>
<ul class="styled-list">
<li>📰 «<span style="color:var(--accent-green);font-weight:700">فازَ الفريقُ</span> في المباراة» ← خبر جديد للسامع</li>
<li>🌧️ «<span style="color:var(--accent-green);font-weight:700">نزلَ المطرُ</span> أمس» ← معلومة لم يعرفها</li>
<li>📚 «<span style="color:var(--accent-green);font-weight:700">صدرَ كتابٌ</span> جديد» ← إخبار بأمر مستحدث</li>
<li>� «<span style="color:var(--accent-green);font-weight:700">نجحتْ أختُك</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> مسبقاً، لكن الفائدة هي أن السامع يعلم أن المتكلم أيضاً يشاركه هذا العلم.</p>
<div class="example-box">
<div style="text-align:center;font-size:1.2rem;font-family:'Amiri',serif">
معلومة <span style="color:var(--accent-orange);font-weight:700">يعرفها</span> السامع + يعلم أن المتكلم يعرفها = 🔄 لازم الفائدة
</div>
</div>
<div class="info-box" style="border-right-color:var(--accent-orange)">
<h4 style="margin-bottom:10px;color:var(--accent-orange)">أمثلة على لازم الفائدة:</h4>
<ul class="styled-list">
<li>👤 «<span style="color:var(--accent-orange);font-weight:700">أنتَ مسافرٌ</span> غداً» ← السامع يعلم سفره، والفائدة أن المتكلم يعلم أيضاً</li>
<li>🏠 «<span style="color:var(--accent-orange);font-weight:700">أنا أسكنُ</span> في هذا البيت» ← يقولها لمن يعرف ذلك</li>
<li>📖 «<span style="color:var(--accent-orange);font-weight:700">لقد حضرتَ</span> الاجتماع» ← تذكير بأمر معلوم</li>
<li>🎯 «<span style="color:var(--accent-orange);font-weight:700">أنت تعرفُ</span> الحقيقة» ← تأكيد لمعلوم</li>
</ul>
</div>
</div>
<div class="tab-panel" id="panel3">
<h4>� مقارنة بين الصنفين</h4>
<div class="two-col">
<div class="success-box">
<h4 style="color:var(--accent-green)">🆕 الفائدة (الجديدة)</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-orange)">
<h4 style="color:var(--accent-orange)">🔄 لازم الفائدة (القديمة)</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>تكون الفائدة جديدة عندما يسمع المخاطب معلومة <strong>لأول مرة</strong>. المعيار هو حال السامع وقت سماع الجملة.</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="info-box"><p><strong>📌 السمة المميزة:</strong></p><p>السامع لم يكن يعلم هذا الخبر قبل سماعه. هو يتلقى معلومة مستحدثة تغيّر حالته المعرفية.</p></div>
</div>
</div>
</details>
<details>
<summary>🔄 متى تكون الفائدة قديمة (لازم الفائدة)؟</summary>
<div class="acc-body">
<p>تكون لازم الفائدة عندما يكون السامع <strong>على علم بالمعلومة</strong> مسبقاً، لكنه يستفيد شيئاً آخر: وهو أن المتكلم يشاركه نفس العلم.</p>
<div class="two-col" style="margin-top:15px">
<div class="info-box" style="border-right-color:var(--accent-orange)"><p><strong>🔄 أمثلة:</strong></p><p class="example-sentence" style="color:var(--accent-orange)">أنت حفظتَ القرآن</p><p class="example-sentence" style="color:var(--accent-orange)">إنّك صادقٌ</p></div>
<div class="info-box"><p><strong>📌 السمة المميزة:</strong></p><p>السامع يعرف المعلومة لكنه لم يكن يعلم أن المتكلم يعرفها. الفائدة الجديدة هنا هي «علم المتكلم».</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="example-box" style="text-align:center;font-size:1.2rem;font-family:'Amiri',serif;margin-top:15px">
<strong>هل السامع يعلم هذه المعلومة قبل سماعها؟</strong><br><br>
إذا <span style="color:var(--accent-green);font-weight:700">لا</span> ← فائدة جديدة 🆕<br>
إذا <span style="color:var(--accent-orange);font-weight:700">نعم</span> ← لازم الفائدة 🔄
</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-green);margin-bottom:20px;text-align:center">� مواقف الفائدة الجديدة</h4>
<div style="background:rgba(16,185,129,0.08);padding:15px;border-radius:10px;margin-bottom:12px">
<p><strong>الموقف:</strong> زيد لا يعلم نتيجة أخيه في الامتحان</p>
<p style="font-size:1.3rem;font-family:'Amiri',serif;color:var(--accent-green);margin:10px 0;text-align:center">«نجح أخوك في الامتحان»</p>
<p>📌 هذه <span style="color:var(--accent-green);font-weight:700">فائدة جديدة</span> — لأن زيداً لم يكن يعلم هذا الخبر</p>
</div>
<div style="background:rgba(16,185,129,0.08);padding:15px;border-radius:10px;margin-bottom:12px">
<p><strong>الموقف:</strong> صديقك لا يعلم أنك سافرت</p>
<p style="font-size:1.3rem;font-family:'Amiri',serif;color:var(--accent-green);margin:10px 0;text-align:center">«سافرتُ إلى مكة أمس»</p>
<p>📌 <span style="color:var(--accent-green);font-weight:700">فائدة جديدة</span> — إخبار بأمر لم يكن يعلمه</p>
</div>
<div style="background:rgba(16,185,129,0.08);padding:15px;border-radius:10px">
<p><strong>الموقف:</strong> جارك لا يعلم أن المطر نزل ليلاً</p>
<p style="font-size:1.3rem;font-family:'Amiri',serif;color:var(--accent-green);margin:10px 0;text-align:center">«نزلَ المطرُ البارحة»</p>
<p>📌 <span style="color:var(--accent-green);font-weight:700">فائدة جديدة</span> — معلومة جديدة تماماً للسامع</p>
</div>
</div>
<div class="demo-panel" id="dp2">
<h4 style="color:var(--accent-orange);margin-bottom:20px;text-align:center">� مواقف لازم الفائدة</h4>
<div style="background:rgba(245,158,11,0.08);padding:15px;border-radius:10px;margin-bottom:12px">
<p><strong>الموقف:</strong> تقول لصديقك الذي يعرف أنه متفوق</p>
<p style="font-size:1.3rem;font-family:'Amiri',serif;color:var(--accent-orange);margin:10px 0;text-align:center">«أنتَ طالبٌ متفوّقٌ»</p>
<p>📌 هذه <span style="color:var(--accent-orange);font-weight:700">لازم الفائدة</span> — هو يعلم أنه متفوق، والجديد أنك تعلم ذلك أيضاً</p>
</div>
<div style="background:rgba(245,158,11,0.08);padding:15px;border-radius:10px;margin-bottom:12px">
<p><strong>الموقف:</strong> تقول لمن حضر معك الاجتماع</p>
<p style="font-size:1.3rem;font-family:'Amiri',serif;color:var(--accent-orange);margin:10px 0;text-align:center">«لقد كان الاجتماع طويلاً»</p>
<p>📌 <span style="color:var(--accent-orange);font-weight:700">لازم الفائدة</span> — كلاكما يعلم ذلك، لكنك تشاركه إحساسك</p>
</div>
<div style="background:rgba(245,158,11,0.08);padding:15px;border-radius:10px">
<p><strong>الموقف:</strong> تقول للمعلم الذي يعرف أنك تلميذه</p>
<p style="font-size:1.3rem;font-family:'Amiri',serif;color:var(--accent-orange);margin:10px 0;text-align:center">«أنا تلميذُك»</p>
<p>📌 <span style="color:var(--accent-orange);font-weight:700">لازم الفائدة</span> — المعلم يعلم ذلك، لكنك تؤكده وتظهر الولاء</p>
</div>
</div>
<div class="demo-panel" id="dp3">
<h4 style="color:var(--accent-cyan);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">↳ <span style="color:var(--accent-orange)">لازم الفائدة</span> — النبي يعلم أنه سيموت، والفائدة التذكير والموعظة</p>
<p>📖 ﴿ <strong>وَاللَّهُ بِمَا تَعْمَلُونَ بَصِيرٌ</strong> ﴾ — البقرة: ٢٣٧</p>
<p style="color:var(--text-secondary);font-size:0.95rem;margin-bottom:20px">↳ <span style="color:var(--accent-orange)">لازم الفائدة</span> — المؤمنون يعلمون ذلك، والقصد التحذير والتنبيه</p>
<p>📖 ﴿ <strong>وَمَا أَرْسَلْنَاكَ إِلَّا رَحْمَةً لِلْعَالَمِينَ</strong> ﴾ — الأنبياء: ١٠٧</p>
<p style="color:var(--text-secondary);font-size:0.95rem;margin-bottom:20px">↳ <span style="color:var(--accent-green)">فائدة جديدة</span> — إخبار بحقيقة الرسالة المحمدية</p>
<p>📖 ﴿ <strong>قُلْ هُوَ اللَّهُ أَحَدٌ</strong> ﴾ — الإخلاص: ١</p>
<p style="color:var(--text-secondary);font-size:0.95rem">↳ <span style="color:var(--accent-green)">فائدة جديدة</span> للمشركين، و<span style="color:var(--accent-orange)">لازم الفائدة</span> للمؤمنين (تأكيد وتثبيت)</p>
</div>
</div>
<div class="demo-panel" id="dp4">
<h4 style="color:var(--accent-purple);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.1rem"><strong>الموقف:</strong> تتصل بصديقك وتقول:</p>
<p style="font-size:1.3rem;font-family:'Amiri',serif;text-align:center;margin:8px 0">«الطقسُ باردٌ اليوم»</p>
<p>← إذا كان صديقك في بلد آخر ولا يعلم: <span style="color:var(--accent-green);font-weight:700">فائدة جديدة 🆕</span></p>
<p>← إذا كان معك في نفس المكان ويشعر بالبرد: <span style="color:var(--accent-orange);font-weight:700">لازم الفائدة 🔄</span></p>
<p style="margin-top:10px;color:var(--accent-cyan);font-weight:700">💡 المفتاح: نفس الجملة قد تكون فائدة أو لازم فائدة حسب حال السامع!</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