التركيب الذي يفيد فائده تامه
📦 النحو الواضح
✨ 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&family=Amiri:wght@400;700&display=swap" rel="stylesheet">
<style>
:root {
--bg-primary: #0a0e27;
--bg-secondary: #151a35;
--bg-card: #1e2542;
--accent-purple: #a855f7;
--accent-blue: #3b82f6;
--accent-green: #10b981;
--accent-cyan: #06b6d4;
--accent-pink: #ec4899;
--accent-orange: #f59e0b;
--text-primary: #f0f6fc;
--text-secondary: #c9d1d9;
--text-muted: #8b949e;
--border-color: #30363d;
}
* {
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.8;
overflow-x: hidden;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
/* Hero Section */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
width: 200%;
height: 200%;
background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.03) 10px, rgba(255,255,255,0.03) 20px);
animation: moveBackground 20s linear infinite;
}
@keyframes moveBackground {
0% { transform: translate(0, 0); }
100% { transform: translate(50px, 50px); }
}
.hero-content {
text-align: center;
z-index: 1;
animation: fadeInUp 1s ease;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.hero h1 {
font-size: 3.5rem;
font-weight: 800;
margin-bottom: 30px;
text-shadow: 0 0 40px rgba(0,0,0,0.3);
animation: pulse 2s ease-in-out infinite;
font-family: 'Amiri', serif;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.hero .code-highlight {
background: rgba(0,0,0,0.5);
padding: 30px 50px;
border-radius: 20px;
font-family: 'Amiri', serif;
display: inline-block;
backdrop-filter: blur(10px);
border: 3px solid rgba(255,255,255,0.3);
font-size: 2rem;
box-shadow: 0 10px 40px rgba(0,0,0,0.3);
margin: 20px 0;
line-height: 2;
}
.hero p {
font-size: 1.5rem;
margin-top: 20px;
opacity: 0.95;
}
.scroll-indicator {
position: absolute;
bottom: 30px;
animation: bounce 2s infinite;
font-size: 2.5rem;
cursor: pointer;
text-decoration: none;
color: inherit;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-15px); }
60% { transform: translateY(-7px); }
}
/* Section Styles */
section {
padding: 80px 0;
}
/* Animate sections on scroll using animation */
.animate-section {
animation: fadeInUp 0.8s ease both;
}
.section-header {
text-align: center;
margin-bottom: 60px;
}
.section-header h2 {
font-size: 3rem;
background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 15px;
font-weight: 800;
font-family: 'Amiri', serif;
}
.section-header p {
color: var(--text-secondary);
font-size: 1.2rem;
}
/* Card Styles */
.card {
background: var(--bg-card);
border-radius: 20px;
padding: 40px;
margin-bottom: 30px;
border: 1px solid var(--border-color);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.card::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--accent-purple), var(--accent-cyan));
transform: scaleX(0);
transition: transform 0.3s ease;
}
.card:hover::before {
transform: scaleX(1);
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
border-color: var(--accent-purple);
}
.card h3 {
font-size: 1.8rem;
margin-bottom: 20px;
color: var(--accent-purple);
font-weight: 700;
font-family: 'Amiri', serif;
}
.card h4 {
font-size: 1.3rem;
margin-bottom: 15px;
color: var(--accent-cyan);
font-weight: 600;
font-family: 'Amiri', serif;
}
.card ul {
margin-right: 20px;
margin-top: 15px;
}
.card li {
margin-bottom: 12px;
line-height: 1.8;
font-size: 1.05rem;
}
/* Example Box */
.example-box {
background: var(--bg-secondary);
border-radius: 15px;
padding: 25px;
margin: 20px 0;
border: 2px solid var(--accent-cyan);
}
.example-sentence {
font-size: 1.5rem;
color: var(--accent-green);
font-weight: 700;
margin: 15px 0;
font-family: 'Amiri', serif;
line-height: 2;
}
/* Info Boxes */
.info-box {
background: rgba(59, 130, 246, 0.1);
border-right: 4px solid var(--accent-blue);
padding: 20px;
border-radius: 10px;
margin: 20px 0;
}
.success-box {
background: rgba(16, 185, 129, 0.1);
border-right: 4px solid var(--accent-green);
padding: 20px;
border-radius: 10px;
margin: 20px 0;
}
.warning-box {
background: rgba(239, 68, 68, 0.1);
border-right: 4px solid #ef4444;
padding: 20px;
border-radius: 10px;
margin: 20px 0;
}
/* Grid Layout */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
margin: 40px 0;
}
.grid-item {
background: var(--bg-card);
padding: 30px;
border-radius: 15px;
border: 1px solid var(--border-color);
transition: all 0.3s ease;
text-align: center;
}
.grid-item:hover {
border-color: var(--accent-purple);
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(168, 85, 247, 0.3);
}
.grid-item .icon {
font-size: 3rem;
margin-bottom: 15px;
display: block;
}
/* CSS-Only Tabs */
.tabs-wrapper {
position: relative;
}
.tabs {
display: flex;
gap: 10px;
margin-bottom: 30px;
flex-wrap: wrap;
justify-content: center;
}
.tabs-wrapper input[type="radio"] {
display: none;
}
.tabs-wrapper label.tab-btn {
background: var(--bg-secondary);
color: var(--text-secondary);
border: 1px solid var(--border-color);
padding: 12px 24px;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s ease;
font-size: 1rem;
font-family: 'Cairo', sans-serif;
font-weight: 600;
}
.tabs-wrapper label.tab-btn:hover {
border-color: var(--accent-purple);
transform: translateY(-2px);
}
#tab-nominal:checked ~ .tabs label[for="tab-nominal"],
#tab-verbal:checked ~ .tabs label[for="tab-verbal"] {
background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan));
color: white;
border-color: transparent;
}
.tab-content {
display: none;
animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
#tab-nominal:checked ~ #nominal-content {
display: block;
}
#tab-verbal:checked ~ #verbal-content {
display: block;
}
/* CSS-Only Accordion using details/summary */
.accordion {
margin: 20px 0;
}
.accordion details {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 10px;
margin-bottom: 10px;
overflow: hidden;
}
.accordion summary {
padding: 20px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.3s ease;
list-style: none;
font-family: 'Amiri', serif;
font-size: 1.3rem;
color: var(--accent-cyan);
font-weight: 600;
}
.accordion summary::-webkit-details-marker {
display: none;
}
.accordion summary::after {
content: '▼';
font-size: 1rem;
transition: transform 0.3s ease;
}
.accordion details[open] summary::after {
transform: rotate(180deg);
}
.accordion summary:hover {
background: var(--bg-secondary);
}
.accordion-content-inner {
padding: 20px;
}
/* CSS-Only Demo using radio buttons */
.demo-box {
background: var(--bg-secondary);
border: 2px solid var(--accent-purple);
border-radius: 15px;
padding: 30px;
margin: 20px 0;
}
.demo-wrapper input[type="radio"] {
display: none;
}
.demo-wrapper label.demo-button {
display: inline-block;
background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan));
color: white;
border: none;
padding: 12px 30px;
border-radius: 10px;
cursor: pointer;
font-size: 1rem;
font-weight: 600;
transition: all 0.3s ease;
margin: 10px;
font-family: 'Cairo', sans-serif;
}
.demo-wrapper label.demo-button:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(168, 85, 247, 0.3);
}
.demo-output {
background: #0d1117;
border: 1px solid var(--border-color);
border-radius: 10px;
padding: 20px;
margin-top: 20px;
min-height: 100px;
font-family: 'Amiri', serif;
font-size: 1.1rem;
line-height: 2;
}
.demo-content {
display: none;
}
.demo-placeholder {
display: block;
}
#demo-nominal:checked ~ .demo-box .demo-placeholder,
#demo-verbal:checked ~ .demo-box .demo-placeholder,
#demo-quran:checked ~ .demo-box .demo-placeholder {
display: none;
}
#demo-nominal:checked ~ .demo-box #demo-nominal-content {
display: block;
}
#demo-verbal:checked ~ .demo-box #demo-verbal-content {
display: block;
}
#demo-quran:checked ~ .demo-box #demo-quran-content {
display: block;
}
/* CSS-Only Quiz using radio + :checked */
.quiz-question {
background: var(--bg-card);
padding: 30px;
border-radius: 15px;
margin-bottom: 20px;
border: 1px solid var(--border-color);
}
.quiz-options {
display: flex;
flex-direction: column;
gap: 15px;
margin-top: 20px;
}
.quiz-options input[type="radio"] {
display: none;
}
.quiz-options label {
background: var(--bg-secondary);
padding: 15px 20px;
border-radius: 10px;
border: 2px solid var(--border-color);
cursor: pointer;
transition: all 0.3s ease;
text-align: right;
display: block;
}
.quiz-options label:hover {
border-color: var(--accent-purple);
transform: translateX(-5px);
}
.quiz-feedback {
margin-top: 20px;
padding: 15px;
border-radius: 10px;
display: none;
font-size: 1.1rem;
}
/* Quiz 1 */
#q1-a:checked ~ .quiz-feedback.q1-wrong,
#q1-c:checked ~ .quiz-feedback.q1-wrong,
#q1-d:checked ~ .quiz-feedback.q1-wrong {
display: block;
background: rgba(239, 68, 68, 0.1);
border: 1px solid #ef4444;
color: #ef4444;
animation: fadeIn 0.5s ease;
}
#q1-b:checked ~ .quiz-feedback.q1-correct {
display: block;
background: rgba(16, 185, 129, 0.1);
border: 1px solid var(--accent-green);
color: var(--accent-green);
animation: fadeIn 0.5s ease;
}
#q1-a:checked ~ label[for="q1-a"],
#q1-c:checked ~ label[for="q1-c"],
#q1-d:checked ~ label[for="q1-d"] {
border-color: #ef4444;
background: rgba(239, 68, 68, 0.1);
}
#q1-b:checked ~ label[for="q1-b"] {
border-color: var(--accent-green);
background: rgba(16, 185, 129, 0.1);
}
/* Quiz 2 */
#q2-a:checked ~ .quiz-feedback.q2-wrong,
#q2-c:checked ~ .quiz-feedback.q2-wrong,
#q2-d:checked ~ .quiz-feedback.q2-wrong {
display: block;
background: rgba(239, 68, 68, 0.1);
border: 1px solid #ef4444;
color: #ef4444;
animation: fadeIn 0.5s ease;
}
#q2-b:checked ~ .quiz-feedback.q2-correct {
display: block;
background: rgba(16, 185, 129, 0.1);
border: 1px solid var(--accent-green);
color: var(--accent-green);
animation: fadeIn 0.5s ease;
}
#q2-a:checked ~ label[for="q2-a"],
#q2-c:checked ~ label[for="q2-c"],
#q2-d:checked ~ label[for="q2-d"] {
border-color: #ef4444;
background: rgba(239, 68, 68, 0.1);
}
#q2-b:checked ~ label[for="q2-b"] {
border-color: var(--accent-green);
background: rgba(16, 185, 129, 0.1);
}
/* Quiz 3 */
#q3-a:checked ~ .quiz-feedback.q3-wrong,
#q3-b:checked ~ .quiz-feedback.q3-wrong,
#q3-d:checked ~ .quiz-feedback.q3-wrong {
display: block;
background: rgba(239, 68, 68, 0.1);
border: 1px solid #ef4444;
color: #ef4444;
animation: fadeIn 0.5s ease;
}
#q3-c:checked ~ .quiz-feedback.q3-correct {
display: block;
background: rgba(16, 185, 129, 0.1);
border: 1px solid var(--accent-green);
color: var(--accent-green);
animation: fadeIn 0.5s ease;
}
#q3-a:checked ~ label[for="q3-a"],
#q3-b:checked ~ label[for="q3-b"],
#q3-d:checked ~ label[for="q3-d"] {
border-color: #ef4444;
background: rgba(239, 68, 68, 0.1);
}
#q3-c:checked ~ label[for="q3-c"] {
border-color: var(--accent-green);
background: rgba(16, 185, 129, 0.1);
}
/* Badge */
.badge {
display: inline-block;
background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan));
padding: 8px 16px;
border-radius: 20px;
font-size: 0.9rem;
margin: 5px;
font-weight: 600;
}
/* Summary Card */
.summary-card {
background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(6, 182, 212, 0.1));
border: 2px solid var(--accent-purple);
border-radius: 20px;
padding: 40px;
margin: 40px 0;
}
.summary-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 30px;
}
.summary-item {
background: var(--bg-card);
padding: 20px;
border-radius: 10px;
border-right: 4px solid var(--accent-purple);
}
.summary-item strong {
color: var(--accent-purple);
display: block;
margin-bottom: 10px;
font-weight: 700;
}
/* Footer */
footer {
background: var(--bg-secondary);
padding: 40px 20px;
text-align: center;
border-top: 1px solid var(--border-color);
}
footer p {
color: var(--text-muted);
}
/* Responsive */
@media (max-width: 768px) {
.hero h1 {
font-size: 2.5rem;
}
.hero .code-highlight {
font-size: 1.3rem;
padding: 20px 30px;
}
.section-header h2 {
font-size: 2rem;
}
.grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<!-- Hero Section -->
<section class="hero" id="hero">
<div class="hero-content">
<h1>📚 الجملة المفيدة</h1>
<div class="code-highlight">
التركيب الذي يفيد فائدة تامة<br>
يُسمى: <span style="color: var(--accent-green);">جملة مفيدة</span>
</div>
<p>✨ أساس التواصل في اللغة العربية ✨</p>
</div>
<a href="#what-is-it" class="scroll-indicator">⬇️</a>
</section>
<!-- What Is It Section -->
<section id="what-is-it" class="animate-section">
<div class="container">
<div class="section-header">
<h2>🤔 ما هي الجملة المفيدة؟</h2>
<p>دعنا نفهم هذا المفهوم الأساسي في النحو العربي</p>
</div>
<div class="card">
<h3>📖 التعريف</h3>
<p style="font-size: 1.2rem; line-height: 2;">
<strong>الجملة المفيدة</strong> هي التركيب اللغوي الذي يُعطي معنى كاملاً ومفهوماً، بحيث يستطيع السامع أن يفهم المقصود دون الحاجة إلى إضافة شيء آخر.
</p>
<div class="info-box">
<strong>🎭 تشبيه بسيط:</strong>
<p style="font-size: 1.1rem; margin-top: 10px;">
تخيل أن الكلمات مثل قطع الأحجية 🧩. قطعة واحدة لا تعطيك الصورة الكاملة، لكن عندما تجمع القطع بطريقة صحيحة، تحصل على صورة واضحة ومفهومة - هذا هو الفرق بين الكلمة المفردة والجملة المفيدة!
</p>
</div>
<div class="example-box">
<h4 style="color: var(--accent-orange); margin-bottom: 15px;">✅ أمثلة على الجملة المفيدة:</h4>
<div class="example-sentence">☀️ طلعت الشمس</div>
<div class="example-sentence">📖 يقرأ الطالب الدرس</div>
<div class="example-sentence">🌸 الحديقة جميلة</div>
<p style="margin-top: 15px; color: var(--text-secondary);">
كل جملة من هذه الجمل تعطي معنى كاملاً يمكن فهمه
</p>
</div>
<div class="example-box">
<h4 style="color: #ef4444; margin-bottom: 15px;">❌ أمثلة على ما ليس جملة مفيدة:</h4>
<div class="example-sentence" style="color: #ef4444;">الشمس (كلمة مفردة فقط)</div>
<div class="example-sentence" style="color: #ef4444;">في الحديقة (شبه جملة - معنى ناقص)</div>
<div class="example-sentence" style="color: #ef4444;">إذا جاء أحمد... (جملة ناقصة - ماذا سيحدث؟)</div>
<p style="margin-top: 15px; color: var(--text-secondary);">
هذه التراكيب لا تعطي معنى كاملاً بمفردها
</p>
</div>
</div>
</div>
</section>
<!-- Why Use It Section -->
<section id="why-use-it" class="animate-section">
<div class="container">
<div class="section-header">
<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>
</section>
<!-- How It Works Section -->
<section id="how-it-works" class="animate-section">
<div class="container">
<div class="section-header">
<h2>⚙️ كيف تعمل الجملة المفيدة؟</h2>
<p>فهم البناء والتركيب</p>
</div>
<div class="card">
<h3>🎨 أنواع الجملة المفيدة</h3>
<div class="tabs-wrapper">
<input type="radio" name="tabs" id="tab-nominal" checked>
<input type="radio" name="tabs" id="tab-verbal">
<div class="tabs">
<label class="tab-btn" for="tab-nominal">الجملة الاسمية</label>
<label class="tab-btn" for="tab-verbal">الجملة الفعلية</label>
</div>
<div id="nominal-content" class="tab-content">
<h4>📌 الجملة الاسمية</h4>
<p style="font-size: 1.1rem; margin-bottom: 20px;">
تتكون من ركنين أساسيين: <strong>المبتدأ</strong> و <strong>الخبر</strong>
</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 style="text-align: center; margin-top: 20px; font-size: 1.5rem;">
<span style="color: var(--accent-cyan);">السماء</span> <span style="color: var(--accent-green);">صافية</span>
</div>
</div>
<div class="success-box">
<h4>أمثلة متنوعة:</h4>
<ul style="font-size: 1.1rem;">
<li>🏠 <strong>البيت</strong> واسع</li>
<li>📚 <strong>الكتاب</strong> مفيد</li>
<li>🌳 <strong>الشجرة</strong> مثمرة</li>
<li>👨🎓 <strong>الطالب</strong> مجتهد</li>
</ul>
</div>
</div>
<div id="verbal-content" class="tab-content">
<h4>📌 الجملة الفعلية</h4>
<p style="font-size: 1.1rem; margin-bottom: 20px;">
تتكون من: <strong>الفعل</strong> و <strong>الفاعل</strong> (وقد يكون هناك مفعول به)
</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 style="text-align: center; margin-top: 20px; font-size: 1.5rem;">
<span style="color: var(--accent-purple);">أشرقت</span> <span style="color: var(--accent-cyan);">الشمس</span>
</div>
</div>
<div class="success-box">
<h4>أمثلة متنوعة:</h4>
<ul style="font-size: 1.1rem;">
<li>☀️ <strong>طلعت</strong> الشمس</li>
<li>🎵 <strong>يغرد</strong> العصفور</li>
<li>📖 <strong>قرأ</strong> أحمد الكتاب</li>
<li>✍️ <strong>كتبت</strong> الطالبة الواجب</li>
</ul>
</div>
</div>
</div>
</div>
<div class="card">
<h3>🔑 شروط الجملة المفيدة</h3>
<div class="accordion">
<details>
<summary>١. الإفادة التامة</summary>
<div class="accordion-content-inner">
<p>يجب أن تعطي الجملة معنى كاملاً مفهوماً لا يحتاج إلى إضافة.</p>
<div class="example-box" style="margin-top: 15px;">
<p>✅ "العلم نور" - معنى كامل</p>
<p>❌ "العلم..." - معنى ناقص</p>
</div>
</div>
</details>
<details>
<summary>٢. حسن السكوت</summary>
<div class="accordion-content-inner">
<p>يمكن الوقوف عند الجملة والسكوت دون الحاجة لإكمال الكلام.</p>
<div class="example-box" style="margin-top: 15px;">
<p>✅ "السماء صافية" - يمكن السكوت</p>
<p>❌ "إذا جاء أحمد..." - لا يمكن السكوت</p>
</div>
</div>
</details>
<details>
<summary>٣. وجود الإسناد</summary>
<div class="accordion-content-inner">
<p>يجب أن يكون هناك إسناد (نسبة) بين ركني الجملة.</p>
<div class="example-box" style="margin-top: 15px;">
<p>✅ إسناد الخبر إلى المبتدأ: "الطالب مجتهد"</p>
<p>✅ إسناد الفعل إلى الفاعل: "يلعب الطفل"</p>
</div>
</div>
</details>
</div>
</div>
</div>
</section>
<!-- Interactive Demo Section -->
<section id="demo" class="animate-section">
<div class="container">
<div class="section-header">
<h2>🎮 تمرين تفاعلي</h2>
<p>اختبر فهمك بطريقة ممتعة</p>
</div>
<div class="card">
<h3>🔨 بناء الجمل</h3>
<div class="demo-wrapper">
<input type="radio" name="demo" id="demo-nominal">
<input type="radio" name="demo" id="demo-verbal">
<input type="radio" name="demo" id="demo-quran">
<div class="demo-box">
<h4 style="margin-bottom: 20px;">اختر نوع الجملة لترى كيفية بنائها:</h4>
<label class="demo-button" for="demo-nominal">بناء جملة اسمية</label>
<label class="demo-button" for="demo-verbal">بناء جملة فعلية</label>
<label class="demo-button" for="demo-quran">أمثلة من القرآن</label>
<div class="demo-output">
<p class="demo-placeholder" style="color: var(--text-muted); text-align: center;">👆 اضغط على زر لرؤية الأمثلة</p>
<div class="demo-content" id="demo-nominal-content" style="text-align: center;">
<h4 style="color: var(--accent-cyan); margin-bottom: 20px;">بناء جملة اسمية</h4>
<p style="font-size: 1.2rem; margin-bottom: 15px;">الخطوة ١: اختر المبتدأ (اسم)</p>
<p style="font-size: 1.5rem; color: var(--accent-cyan); margin-bottom: 20px;">الطالب</p>
<p style="font-size: 1.2rem; margin-bottom: 15px;">الخطوة ٢: أضف الخبر</p>
<p style="font-size: 1.5rem; color: var(--accent-green); margin-bottom: 20px;">مجتهد</p>
<p style="font-size: 1.3rem; margin-top: 25px;">النتيجة: <span style="color: var(--accent-cyan);">الطالب</span> <span style="color: var(--accent-green);">مجتهد</span> ✅</p>
</div>
<div class="demo-content" id="demo-verbal-content" style="text-align: center;">
<h4 style="color: var(--accent-purple); margin-bottom: 20px;">بناء جملة فعلية</h4>
<p style="font-size: 1.2rem; margin-bottom: 15px;">الخطوة ١: اختر الفعل</p>
<p style="font-size: 1.5rem; color: var(--accent-purple); margin-bottom: 20px;">يكتب</p>
<p style="font-size: 1.2rem; margin-bottom: 15px;">الخطوة ٢: أضف الفاعل</p>
<p style="font-size: 1.5rem; color: var(--accent-cyan); margin-bottom: 20px;">الطالب</p>
<p style="font-size: 1.3rem; margin-top: 25px;">النتيجة: <span style="color: var(--accent-purple);">يكتب</span> <span style="color: var(--accent-cyan);">الطالب</span> ✅</p>
</div>
<div class="demo-content" id="demo-quran-content">
<h4 style="color: var(--accent-green); margin-bottom: 20px; text-align: center;">أمثلة من القرآن الكريم</h4>
<div style="font-family: 'Amiri', serif; font-size: 1.3rem; line-height: 2.5;">
<p style="margin-bottom: 15px;">📖 ﴿ اللَّهُ نُورُ السَّمَاوَاتِ وَالْأَرْضِ ﴾</p>
<p style="color: var(--text-secondary); font-size: 1rem; margin-bottom: 25px;">جملة اسمية - المبتدأ: الله، الخبر: نور السماوات والأرض</p>
<p style="margin-bottom: 15px;">📖 ﴿ قَدْ أَفْلَحَ الْمُؤْمِنُونَ ﴾</p>
<p style="color: var(--text-secondary); font-size: 1rem; margin-bottom: 25px;">جملة فعلية - الفعل: أفلح، الفاعل: المؤمنون</p>
<p style="margin-bottom: 15px;">📖 ﴿ الْحَمْدُ لِلَّهِ رَبِّ الْعَالَمِينَ ﴾</p>
<p style="color: var(--text-secondary); font-size: 1rem;">جملة اسمية - المبتدأ: الحمد، الخبر: لله</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Common Mistakes Section -->
<section id="mistakes" class="animate-section">
<div class="container">
<div class="section-header">
<h2>⚠️ الأخطاء الشائعة</h2>
<p>تجنب هذه الأخطاء</p>
</div>
<div class="card">
<div class="warning-box">
<h3>❌ الخطأ الأول: الجملة الناقصة</h3>
<p style="margin-top: 10px;">ترك أحد أركان الجملة</p>
<div class="example-box" style="margin-top: 15px;">
<p>❌ "الطالب..." - أين الخبر؟</p>
<p>❌ "يكتب..." - من يكتب؟</p>
<p>✅ "الطالب مجتهد" - جملة كاملة</p>
<p>✅ "يكتب الطالب" - جملة كاملة</p>
</div>
</div>
<div class="warning-box">
<h3>❌ الخطأ الثاني: الخلط بين الجملة والكلام</h3>
<p style="margin-top: 10px;">اعتبار أي كلام جملة مفيدة</p>
<div class="example-box" style="margin-top: 15px;">
<p>❌ "يا" - كلمة واحدة فقط</p>
<p>❌ "في البيت" - شبه جملة</p>
<p>✅ "أنا في البيت" - جملة مفيدة</p>
</div>
</div>
<div class="warning-box">
<h3>❌ الخطأ الثالث: عدم الإفادة التامة</h3>
<p style="margin-top: 10px;">جملة لا تعطي معنى كاملاً</p>
<div class="example-box" style="margin-top: 15px;">
<p>❌ "إذا جاء أحمد..." - ماذا سيحدث؟</p>
<p>❌ "الذي في الحديقة..." - من هو؟</p>
<p>✅ "إذا جاء أحمد سنذهب" - معنى كامل</p>
</div>
</div>
</div>
</div>
</section>
<!-- Pro Tips Section -->
<section id="tips" class="animate-section">
<div class="container">
<div class="section-header">
<h2>🌟 نصائح الخبراء</h2>
<p>إتقان الجملة المفيدة</p>
</div>
<div class="grid">
<div class="card">
<h3>💡 نصيحة ١</h3>
<h4>اختبار السكوت</h4>
<p>اسأل نفسك: "هل يمكنني السكوت هنا والمعنى واضح؟"</p>
</div>
<div class="card">
<h3>🎨 نصيحة ٢</h3>
<h4>التنويع</h4>
<p>نوّع بين الجمل الاسمية والفعلية لجمال الكلام</p>
</div>
<div class="card">
<h3>🚀 نصيحة ٣</h3>
<h4>الإيجاز المفيد</h4>
<p>أقصر الجمل كلمتان فقط، لكن المعنى يجب أن يكون كاملاً</p>
</div>
<div class="card">
<h3>⚡ نصيحة ٤</h3>
<h4>التدريب المستمر</h4>
<p>تدرب على تحليل الجمل إلى أركانها</p>
</div>
</div>
</div>
</section>
<!-- Quiz Section -->
<section id="quiz" class="animate-section">
<div class="container">
<div class="section-header">
<h2>🎯 اختبر معلوماتك!</h2>
<p>حان وقت إثبات فهمك</p>
</div>
<div class="quiz-question">
<h3>السؤال الأول: أي من التالي يُعتبر جملة مفيدة؟</h3>
<div class="quiz-options">
<input type="radio" name="q1" id="q1-a">
<input type="radio" name="q1" id="q1-b">
<input type="radio" name="q1" id="q1-c">
<input type="radio" name="q1" id="q1-d">
<label for="q1-a">أ) في الحديقة</label>
<label for="q1-b">ب) الحديقة جميلة</label>
<label for="q1-c">ج) الحديقة</label>
<label for="q1-d">د) عندما تكون الحديقة</label>
<div class="quiz-feedback q1-correct">🎉 ممتاز! إجابة صحيحة!</div>
<div class="quiz-feedback q1-wrong">❌ ليست صحيحة! الإجابة الصحيحة هي: الحديقة جميلة</div>
</div>
</div>
<div class="quiz-question">
<h3>السؤال الثاني: ما نوع الجملة: "يلعب الأطفال"؟</h3>
<div class="quiz-options">
<input type="radio" name="q2" id="q2-a">
<input type="radio" name="q2" id="q2-b">
<input type="radio" name="q2" id="q2-c">
<input type="radio" name="q2" id="q2-d">
<label for="q2-a">أ) جملة اسمية</label>
<label for="q2-b">ب) جملة فعلية</label>
<label for="q2-c">ج) ليست جملة مفيدة</label>
<label for="q2-d">د) شبه جملة</label>
<div class="quiz-feedback q2-correct">🎉 ممتاز! إجابة صحيحة!</div>
<div class="quiz-feedback q2-wrong">❌ ليست صحيحة! الإجابة الصحيحة هي: جملة فعلية</div>
</div>
</div>
<div class="quiz-question">
<h3>السؤال الثالث: ما الشرط الأساسي للجملة المفيدة؟</h3>
<div class="quiz-options">
<input type="radio" name="q3" id="q3-a">
<input type="radio" name="q3" id="q3-b">
<input type="radio" name="q3" id="q3-c">
<input type="radio" name="q3" id="q3-d">
<label for="q3-a">أ) أن تكون طويلة</label>
<label for="q3-b">ب) أن تحتوي على فعل</label>
<label for="q3-c">ج) أن تفيد معنى تاماً يحسن السكوت عليه</label>
<label for="q3-d">د) أن تبدأ باسم</label>
<div class="quiz-feedback q3-correct">🎉 ممتاز! إجابة صحيحة!</div>
<div class="quiz-feedback q3-wrong">❌ ليست صحيحة! الإجابة الصحيحة هي: أن تفيد معنى تاماً يحسن السكوت عليه</div>
</div>
</div>
</div>
</section>
<!-- Summary Section -->
<section id="summary" class="animate-section">
<div class="container">
<div class="section-header">
<h2>📚 ملخص سريع</h2>
<p>مرجعك السريع</p>
</div>
<div class="summary-card">
<h3 style="text-align: center; margin-bottom: 30px;">🎯 أساسيات الجملة المفيدة</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 style="font-size: 1.05rem;">
<li>✨ الجملة المفيدة وحدة الكلام الأساسية</li>
<li>🎯 يجب أن تعطي معنى كاملاً ومفهوماً</li>
<li>🎨 نوعان: اسمية وفعلية</li>
<li>⚡ يحسن السكوت عليها</li>
<li>🔧 أساس الكتابة الصحيحة</li>
<li>🚀 ضرورية لفهم النصوص العربية</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="container">
<h3 style="margin-bottom: 20px; color: var(--accent-purple);">🎓 أحسنت! لقد أتممت الدرس بنجاح</h3>
<p style="font-size: 1.1rem; margin-bottom: 15px;">الآن أنت تفهم الجملة المفيدة وأهميتها في اللغة العربية!</p>
<p style="margin-top: 20px; color: var(--text-muted); font-size: 0.9rem;">
تم إنشاؤه بواسطة <strong style="color: var(--accent-cyan);">قاموس الذكاء الاصطناعي</strong> 🤖<br>
نجعل التعلم تفاعلياً وممتعاً وفعالاً!
</p>
<div style="margin-top: 30px;">
<span class="badge">تعلم تفاعلي</span>
<span class="badge">النحو العربي</span>
<span class="badge">اللغة العربية</span>
<span class="badge">الجملة المفيدة</span>
</div>
</div>
</footer>
</body>
</html>
Live Preview