المبتدأ
📦 النحو الواضح
✨ 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>المبتدأ - Interactive Tutorial</title>
<link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&family=Fira+Code:wght@400;600&display=swap" rel="stylesheet" />
<style>
/* ── Tokens ───────────────────────────────────────────── */
:root {
--bg: #080c14;
--bg2: #0d1220;
--bg3: #111827;
--card: rgba(255,255,255,.05);
--border: rgba(255,255,255,.09);
--purple: #a855f7;
--purple-dim: rgba(168,85,247,.15);
--blue: #3b82f6;
--blue-dim: rgba(59,130,246,.13);
--green: #10b981;
--green-dim: rgba(16,185,129,.13);
--amber: #f59e0b;
--amber-dim: rgba(245,158,11,.13);
--red: #ef4444;
--red-dim: rgba(239,68,68,.13);
--text: #e2e8f0;
--muted: #64748b;
--muted-l: #94a3b8;
--radius: 18px;
--shadow: 0 20px 60px rgba(0,0,0,.5);
}
[data-theme="light"] {
--bg: #f0f4ff;
--bg2: #e8eeff;
--bg3: #ffffff;
--card: rgba(0,0,0,.04);
--border:rgba(0,0,0,.10);
--text: #1e293b;
--muted: #94a3b8;
--muted-l:#64748b;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: 'Tajawal', system-ui, sans-serif;
background: var(--bg);
color: var(--text);
min-height: 100vh;
overflow-x: hidden;
background-image:
radial-gradient(ellipse 60% 40% at 80% 5%, rgba(168,85,247,.14) 0%, transparent 55%),
radial-gradient(ellipse 50% 35% at 10% 90%, rgba(59,130,246,.10) 0%, transparent 50%);
transition: background .3s, color .3s;
}
/* ── Scrollbar ────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--purple); border-radius: 3px; }
/* ── Progress bar ─────────────────────────────────────── */
#readProgress {
position: fixed;
top: 0; left: 0;
height: 3px;
background: linear-gradient(90deg, var(--purple), var(--blue), var(--green));
z-index: 9999;
width: 0%;
transition: width .1s;
}
/* ── Navbar ───────────────────────────────────────────── */
nav {
position: fixed;
top: 3px; left: 0; right: 0;
z-index: 900;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 28px;
background: rgba(8,12,20,.8);
backdrop-filter: blur(16px);
border-bottom: 1px solid var(--border);
}
.nav-logo {
font-size: 1.1rem;
font-weight: 800;
background: linear-gradient(135deg, var(--purple), var(--blue));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.nav-links {
display: flex;
gap: 6px;
list-style: none;
flex-wrap: wrap;
}
.nav-links a {
padding: 5px 12px;
border-radius: 999px;
font-size: .78rem;
font-weight: 600;
color: var(--muted-l);
text-decoration: none;
transition: background .2s, color .2s;
border: 1px solid transparent;
}
.nav-links a:hover {
background: var(--purple-dim);
color: var(--purple);
border-color: rgba(168,85,247,.25);
}
.theme-btn {
width: 36px; height: 36px;
border-radius: 50%;
border: 1px solid var(--border);
background: var(--card);
color: var(--text);
cursor: pointer;
font-size: 1rem;
display: flex;
align-items: center;
justify-content: center;
transition: transform .2s, background .2s;
}
.theme-btn:hover { transform: rotate(20deg); background: var(--purple-dim); }
/* ── Sections ─────────────────────────────────────────── */
section {
max-width: 900px;
margin: 0 auto;
padding: 80px 24px 40px;
opacity: 0;
transform: translateY(30px);
transition: opacity .6s ease, transform .6s ease;
}
section.visible { opacity: 1; transform: translateY(0); }
/* ── Section header ───────────────────────────────────── */
.sec-header {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 28px;
}
.sec-icon {
width: 52px; height: 52px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
flex-shrink: 0;
}
.sec-title {
font-size: 1.6rem;
font-weight: 800;
line-height: 1.2;
}
.sec-sub {
font-size: .9rem;
color: var(--muted-l);
margin-top: 3px;
}
/* ── Card ─────────────────────────────────────────────── */
.card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 24px;
backdrop-filter: blur(10px);
box-shadow: var(--shadow);
transition: transform .25s, box-shadow .25s;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 28px 70px rgba(0,0,0,.5); }
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 16px;
}
/* ── Hero ─────────────────────────────────────────────── */
#hero {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding-top: 100px;
opacity: 1;
transform: none;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 18px;
border-radius: 999px;
border: 1px solid var(--border);
background: var(--card);
color: var(--muted-l);
font-size: .8rem;
font-weight: 600;
letter-spacing: .05em;
margin-bottom: 24px;
animation: badge-in .8s cubic-bezier(.34,1.56,.64,1) .2s both;
}
@keyframes badge-in {
from { opacity:0; transform:translateY(-16px) scale(.9); }
to { opacity:1; transform:translateY(0) scale(1); }
}
.hero-phrase {
font-size: clamp(1.8rem, 6vw, 3.8rem);
font-weight: 900;
line-height: 1.3;
background: linear-gradient(135deg, #e2e8f0 20%, var(--purple) 55%, var(--blue) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: phrase-in .9s cubic-bezier(.34,1.3,.64,1) .4s both;
margin-bottom: 16px;
}
@keyframes phrase-in {
from { opacity:0; transform:scale(.85); }
to { opacity:1; transform:scale(1); }
}
.hero-sub {
font-size: 1.1rem;
color: var(--muted-l);
max-width: 560px;
line-height: 1.7;
animation: fade-up .8s ease .6s both;
margin-bottom: 32px;
}
@keyframes fade-up {
from { opacity:0; transform:translateY(16px); }
to { opacity:1; transform:translateY(0); }
}
.hero-btns {
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
animation: fade-up .8s ease .8s both;
margin-bottom: 48px;
}
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
border-radius: 12px;
border: none;
font-family: 'Tajawal', sans-serif;
font-size: .92rem;
font-weight: 700;
cursor: pointer;
transition: transform .2s, box-shadow .2s, background .2s;
text-decoration: none;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
background: linear-gradient(135deg, var(--purple), var(--blue));
color: #fff;
box-shadow: 0 4px 20px rgba(168,85,247,.35);
}
.btn-primary:hover { box-shadow: 0 8px 30px rgba(168,85,247,.5); }
.btn-ghost {
background: var(--card);
color: var(--text);
border: 1px solid var(--border);
}
.btn-ghost:hover { background: var(--purple-dim); color: var(--purple); }
/* Floating stats */
.hero-stats {
display: flex;
gap: 24px;
flex-wrap: wrap;
justify-content: center;
animation: fade-up .8s ease 1s both;
}
.hero-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 16px 24px;
border-radius: 16px;
background: var(--card);
border: 1px solid var(--border);
backdrop-filter: blur(10px);
}
.hero-stat .num {
font-size: 1.6rem;
font-weight: 900;
background: linear-gradient(135deg, var(--purple), var(--blue));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hero-stat .lbl { font-size: .78rem; color: var(--muted-l); }
/* ── Highlight box ────────────────────────────────────── */
.highlight-box {
border-radius: 16px;
padding: 20px 24px;
display: flex;
align-items: flex-start;
gap: 14px;
margin-bottom: 16px;
border: 1px solid;
}
.highlight-box.purple { background: var(--purple-dim); border-color: rgba(168,85,247,.25); }
.highlight-box.blue { background: var(--blue-dim); border-color: rgba(59,130,246,.25); }
.highlight-box.green { background: var(--green-dim); border-color: rgba(16,185,129,.25); }
.highlight-box.amber { background: var(--amber-dim); border-color: rgba(245,158,11,.25); }
.highlight-box.red { background: var(--red-dim); border-color: rgba(239,68,68,.25); }
.highlight-box .hb-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 2px; }
.highlight-box .hb-body { flex: 1; }
.highlight-box .hb-title { font-weight: 700; margin-bottom: 4px; font-size: .95rem; }
.highlight-box .hb-text { font-size: .88rem; color: var(--muted-l); line-height: 1.65; }
/* ── Sentence display ─────────────────────────────────── */
.sentence-display {
background: var(--bg2);
border: 1px solid var(--border);
border-radius: 16px;
padding: 28px;
text-align: center;
font-size: clamp(1.4rem, 4vw, 2.2rem);
font-weight: 800;
letter-spacing: .02em;
line-height: 1.8;
margin-bottom: 16px;
position: relative;
overflow: hidden;
}
.sentence-display::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(168,85,247,.05), rgba(59,130,246,.05));
}
.word-mubtada { color: var(--purple); position: relative; cursor: pointer; }
.word-khabar { color: var(--blue); position: relative; cursor: pointer; }
.word-other { color: var(--muted-l); }
.word-mubtada::after, .word-khabar::after {
content: attr(data-label);
position: absolute;
bottom: -26px;
right: 50%;
transform: translateX(50%);
font-size: .65rem;
font-weight: 700;
padding: 2px 8px;
border-radius: 999px;
white-space: nowrap;
letter-spacing: .04em;
}
.word-mubtada::after { background: var(--purple-dim); color: var(--purple); border: 1px solid rgba(168,85,247,.3); }
.word-khabar::after { background: var(--blue-dim); color: var(--blue); border: 1px solid rgba(59,130,246,.3); }
/* ── Tooltip ──────────────────────────────────────────── */
.tooltip-wrap { position: relative; display: inline-block; }
.tooltip-wrap .tooltip {
position: absolute;
bottom: calc(100% + 10px);
right: 50%;
transform: translateX(50%);
background: #1e293b;
border: 1px solid var(--border);
border-radius: 10px;
padding: 8px 12px;
font-size: .78rem;
color: var(--text);
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity .2s;
z-index: 100;
box-shadow: 0 8px 24px rgba(0,0,0,.4);
max-width: 220px;
white-space: normal;
text-align: center;
line-height: 1.5;
}
.tooltip-wrap:hover .tooltip { opacity: 1; }
/* ── Steps ────────────────────────────────────────────── */
.steps { display: flex; flex-direction: column; gap: 16px; }
.step {
display: flex;
gap: 16px;
align-items: flex-start;
padding: 20px;
border-radius: 16px;
background: var(--card);
border: 1px solid var(--border);
transition: transform .2s, border-color .2s;
}
.step:hover { transform: translateX(-4px); border-color: rgba(168,85,247,.3); }
.step-num {
width: 40px; height: 40px;
border-radius: 12px;
background: linear-gradient(135deg, var(--purple), var(--blue));
color: #fff;
font-size: 1rem;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.step-body { flex: 1; }
.step-title { font-weight: 700; margin-bottom: 4px; }
.step-text { font-size: .88rem; color: var(--muted-l); line-height: 1.65; }
/* ── Tabs ─────────────────────────────────────────────── */
.tabs-wrap { margin-bottom: 16px; }
.tabs-bar {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 16px;
background: var(--bg2);
border: 1px solid var(--border);
border-radius: 12px;
padding: 6px;
}
.tab-btn {
padding: 8px 16px;
border-radius: 8px;
border: none;
background: transparent;
color: var(--muted-l);
font-family: 'Tajawal', sans-serif;
font-size: .85rem;
font-weight: 600;
cursor: pointer;
transition: background .2s, color .2s;
}
.tab-btn.active {
background: linear-gradient(135deg, var(--purple), var(--blue));
color: #fff;
box-shadow: 0 4px 12px rgba(168,85,247,.3);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fade-up .3s ease; }
/* ── Code block ───────────────────────────────────────── */
.code-block {
background: #0b0f1a;
border: 1px solid var(--border);
border-radius: 14px;
overflow: hidden;
margin-bottom: 16px;
}
.code-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 16px;
background: rgba(255,255,255,.04);
border-bottom: 1px solid var(--border);
font-size: .78rem;
color: var(--muted);
}
.code-bar .dots { display: flex; gap: 6px; }
.code-bar .dot { width:11px; height:11px; border-radius:50%; }
.dot-r { background:#ff5f57; }
.dot-y { background:#febc2e; }
.dot-g { background:#28c840; }
.copy-btn {
padding: 4px 10px;
border-radius: 6px;
border: 1px solid var(--border);
background: rgba(255,255,255,.06);
color: var(--muted-l);
font-family: 'Tajawal', sans-serif;
font-size: .72rem;
cursor: pointer;
transition: background .18s, color .18s;
display: flex;
align-items: center;
gap: 5px;
}
.copy-btn:hover { background: var(--purple-dim); color: var(--purple); }
.copy-btn.copied { color: var(--green); border-color: rgba(16,185,129,.3); }
.code-block pre {
padding: 18px 20px;
font-family: 'Fira Code', Consolas, monospace;
font-size: .85rem;
line-height: 1.8;
color: #cdd6f4;
overflow-x: auto;
direction: ltr;
text-align: left;
}
.tk-ar { color: #cba6f7; font-weight: 700; }
.tk-label{ color: #a6e3a1; }
.tk-note { color: #585b70; font-style: italic; }
.tk-kw { color: #89b4fa; }
.tk-str { color: #fab387; }
/* ── Accordion ────────────────────────────────────────── */
.accordion { display: flex; flex-direction: column; gap: 10px; }
.acc-item {
border: 1px solid var(--border);
border-radius: 14px;
overflow: hidden;
background: var(--card);
}
.acc-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
cursor: pointer;
font-weight: 700;
font-size: .95rem;
transition: background .2s;
user-select: none;
}
.acc-header:hover { background: rgba(255,255,255,.04); }
.acc-arrow {
font-size: .8rem;
transition: transform .3s;
color: var(--purple);
}
.acc-item.open .acc-arrow { transform: rotate(180deg); }
.acc-body {
max-height: 0;
overflow: hidden;
transition: max-height .35s ease;
padding: 0 20px;
font-size: .88rem;
color: var(--muted-l);
line-height: 1.7;
}
.acc-item.open .acc-body { max-height: 400px; padding: 0 20px 18px; }
/* ── Interactive demo ─────────────────────────────────── */
.demo-input-wrap {
display: flex;
gap: 10px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.demo-input {
flex: 1;
min-width: 200px;
padding: 12px 16px;
border-radius: 12px;
border: 1.5px solid var(--border);
background: var(--bg2);
color: var(--text);
font-family: 'Tajawal', sans-serif;
font-size: 1rem;
outline: none;
direction: rtl;
transition: border-color .2s, box-shadow .2s;
}
.demo-input:focus {
border-color: var(--purple);
box-shadow: 0 0 0 3px rgba(168,85,247,.2);
}
.demo-result {
background: var(--bg2);
border: 1px solid var(--border);
border-radius: 14px;
padding: 20px;
min-height: 80px;
font-size: 1rem;
line-height: 1.8;
transition: all .3s ease;
}
.demo-tag {
display: inline-block;
padding: 3px 10px;
border-radius: 8px;
font-size: .78rem;
font-weight: 700;
margin: 2px;
}
.demo-tag.mubtada { background: var(--purple-dim); color: var(--purple); border: 1px solid rgba(168,85,247,.3); }
.demo-tag.khabar { background: var(--blue-dim); color: var(--blue); border: 1px solid rgba(59,130,246,.3); }
/* ── Quiz ─────────────────────────────────────────────── */
.quiz-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 28px;
margin-bottom: 16px;
}
.quiz-q {
font-size: 1.05rem;
font-weight: 700;
margin-bottom: 18px;
line-height: 1.5;
}
.quiz-q .q-num {
display: inline-block;
width: 28px; height: 28px;
border-radius: 8px;
background: linear-gradient(135deg, var(--purple), var(--blue));
color: #fff;
font-size: .8rem;
text-align: center;
line-height: 28px;
margin-left: 8px;
flex-shrink: 0;
}
.quiz-options { display: flex; flex-direction: column; gap: 10px; }
.quiz-opt {
padding: 12px 18px;
border-radius: 12px;
border: 1.5px solid var(--border);
background: var(--bg2);
color: var(--text);
font-family: 'Tajawal', sans-serif;
font-size: .92rem;
font-weight: 500;
cursor: pointer;
text-align: right;
transition: border-color .2s, background .2s, transform .18s;
}
.quiz-opt:hover:not(:disabled) {
border-color: var(--purple);
background: var(--purple-dim);
transform: translateX(-4px);
}
.quiz-opt.correct { border-color: var(--green); background: var(--green-dim); color: var(--green); }
.quiz-opt.wrong { border-color: var(--red); background: var(--red-dim); color: var(--red); }
.quiz-opt:disabled { cursor: default; }
.quiz-feedback {
margin-top: 12px;
padding: 12px 16px;
border-radius: 10px;
font-size: .88rem;
font-weight: 600;
display: none;
animation: fade-up .3s ease;
}
.quiz-feedback.show { display: block; }
.quiz-feedback.ok { background: var(--green-dim); color: var(--green); border: 1px solid rgba(16,185,129,.3); }
.quiz-feedback.bad { background: var(--red-dim); color: var(--red); border: 1px solid rgba(239,68,68,.3); }
/* Score */
.quiz-score {
text-align: center;
padding: 32px;
border-radius: var(--radius);
background: var(--card);
border: 1px solid var(--border);
display: none;
animation: fade-up .5s ease;
}
.quiz-score.show { display: block; }
.score-num {
font-size: 4rem;
font-weight: 900;
background: linear-gradient(135deg, var(--purple), var(--blue), var(--green));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
line-height: 1;
margin-bottom: 8px;
}
/* ── Summary card ─────────────────────────────────────── */
.summary-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 14px;
margin-bottom: 20px;
}
.summary-item {
padding: 18px;
border-radius: 14px;
border: 1px solid var(--border);
background: var(--card);
text-align: center;
transition: transform .2s;
}
.summary-item:hover { transform: translateY(-3px); }
.summary-item .si-icon { font-size: 1.8rem; margin-bottom: 8px; }
.summary-item .si-label { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.summary-item .si-val { font-size: .95rem; font-weight: 700; color: var(--text); }
/* ── Mistakes ─────────────────────────────────────────── */
.mistake-item {
display: flex;
gap: 14px;
padding: 18px;
border-radius: 14px;
background: var(--red-dim);
border: 1px solid rgba(239,68,68,.2);
margin-bottom: 12px;
align-items: flex-start;
transition: transform .2s;
}
.mistake-item:hover { transform: translateX(-4px); }
.mistake-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: 2px; }
.mistake-body { flex: 1; }
.mistake-title { font-weight: 700; color: var(--red); margin-bottom: 4px; }
.mistake-text { font-size: .86rem; color: var(--muted-l); line-height: 1.6; }
.mistake-fix { margin-top: 8px; font-size: .84rem; color: var(--green); font-weight: 600; }
/* ── Pro tips ─────────────────────────────────────────── */
.tip-item {
display: flex;
gap: 14px;
padding: 18px;
border-radius: 14px;
background: var(--green-dim);
border: 1px solid rgba(16,185,129,.2);
margin-bottom: 12px;
align-items: flex-start;
transition: transform .2s;
}
.tip-item:hover { transform: translateX(-4px); }
.tip-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: 2px; }
.tip-body { flex: 1; }
.tip-title { font-weight: 700; color: var(--green); margin-bottom: 4px; }
.tip-text { font-size: .86rem; color: var(--muted-l); line-height: 1.6; }
/* ── Confetti ─────────────────────────────────────────── */
.confetti-piece {
position: fixed;
width: 10px; height: 10px;
border-radius: 2px;
pointer-events: none;
z-index: 9999;
animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
0% { transform: translateY(-20px) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
/* ── Badge ────────────────────────────────────────────── */
.badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
border-radius: 999px;
font-size: .75rem;
font-weight: 700;
letter-spacing: .04em;
}
.badge-purple { background: var(--purple-dim); color: var(--purple); border: 1px solid rgba(168,85,247,.25); }
.badge-green { background: var(--green-dim); color: var(--green); border: 1px solid rgba(16,185,129,.25); }
.badge-blue { background: var(--blue-dim); color: var(--blue); border: 1px solid rgba(59,130,246,.25); }
.badge-amber { background: var(--amber-dim); color: var(--amber); border: 1px solid rgba(245,158,11,.25); }
/* ── Achievement toast ────────────────────────────────── */
#achieveToast {
position: fixed;
bottom: 28px;
left: 28px;
background: rgba(15,20,35,.95);
border: 1px solid var(--border);
border-radius: 16px;
padding: 14px 18px;
display: flex;
align-items: center;
gap: 12px;
box-shadow: 0 12px 40px rgba(0,0,0,.5);
z-index: 9998;
transform: translateX(-120%);
transition: transform .4s cubic-bezier(.34,1.56,.64,1);
backdrop-filter: blur(12px);
max-width: 300px;
}
#achieveToast.show { transform: translateX(0); }
.achieve-icon { font-size: 1.8rem; }
.achieve-title { font-weight: 800; font-size: .9rem; color: var(--amber); }
.achieve-sub { font-size: .78rem; color: var(--muted-l); margin-top: 2px; }
/* ── Footer ───────────────────────────────────────────── */
footer {
text-align: center;
padding: 48px 24px;
border-top: 1px solid var(--border);
color: var(--muted);
font-size: .85rem;
line-height: 1.8;
}
footer .footer-logo {
font-size: 1.2rem;
font-weight: 800;
background: linear-gradient(135deg, var(--purple), var(--blue));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
margin-bottom: 8px;
}
/* ── Divider ──────────────────────────────────────────── */
.divider {
height: 1px;
background: var(--border);
margin: 8px 0 24px;
}
/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 640px) {
nav { padding: 10px 16px; }
.nav-links { display: none; }
section { padding: 70px 16px 32px; }
.sentence-display { font-size: 1.3rem; }
}
</style>
</head>
<body>
<!-- Progress bar -->
<div id="readProgress"></div>
<!-- Achievement toast -->
<div id="achieveToast">
<div class="achieve-icon" id="achieveIcon">🏆</div>
<div>
<div class="achieve-title" id="achieveTitle">إنجاز جديد!</div>
<div class="achieve-sub" id="achieveSub">أحسنت!</div>
</div>
</div>
<!-- ── Navbar ─────────────────────────────────────────────── -->
<nav>
<div class="nav-logo">📚 النحو العربي</div>
<ul class="nav-links">
<li><a href="#what">ما هو؟</a></li>
<li><a href="#why">لماذا؟</a></li>
<li><a href="#how">كيف يعمل؟</a></li>
<li><a href="#demo">تطبيق</a></li>
<li><a href="#quiz">اختبار</a></li>
<li><a href="#summary">ملخص</a></li>
</ul>
<button class="theme-btn" id="themeBtn" aria-label="تبديل الوضع">🌙</button>
</nav>
<!-- ══════════════════════════════════════════════════════
HERO
══════════════════════════════════════════════════════ -->
<section id="hero">
<div class="hero-badge">🎓 درس نحوي تفاعلي · مستوى مبتدئ</div>
<h1 class="hero-phrase">المبتدأ اسمٌ مرفوعٌ<br>في أوّل الجملة</h1>
<p class="hero-sub">
تعلّم أحد أهم أركان الجملة الاسمية في اللغة العربية —
المبتدأ — بطريقة تفاعلية ممتعة وسهلة الفهم! 🚀
</p>
<div class="hero-btns">
<a href="#what" class="btn btn-primary">🎯 ابدأ التعلّم</a>
<a href="#quiz" class="btn btn-ghost">🎮 انتقل للاختبار</a>
</div>
<div class="hero-stats">
<div class="hero-stat"><span class="num">٥</span><span class="lbl">دقائق للتعلّم</span></div>
<div class="hero-stat"><span class="num">٣</span><span class="lbl">تمارين تفاعلية</span></div>
<div class="hero-stat"><span class="num">١٠٠٪</span><span class="lbl">مجاني</span></div>
</div>
</section>
<!-- ══════════════════════════════════════════════════════
WHAT IS IT?
══════════════════════════════════════════════════════ -->
<section id="what">
<div class="sec-header">
<div class="sec-icon" style="background:var(--purple-dim);border:1px solid rgba(168,85,247,.25);">🤔</div>
<div>
<div class="sec-title">ما هو المبتدأ؟</div>
<div class="sec-sub">التعريف الكامل بأسلوب بسيط وممتع</div>
</div>
</div>
<div class="highlight-box purple" style="margin-bottom:24px;">
<div class="hb-icon">💡</div>
<div class="hb-body">
<div class="hb-title">التعريف الرسمي</div>
<div class="hb-text">
<strong>المبتدأ</strong> هو الاسم المرفوع الذي تبدأ به الجملة الاسمية، وهو المحكوم عليه — أي الشيء الذي نتحدث عنه.
يُشكّل مع الخبر ركنَي الجملة الاسمية الأساسيين.
</div>
</div>
</div>
<!-- Analogy -->
<div class="card" style="margin-bottom:20px;">
<div style="font-size:1rem;font-weight:800;margin-bottom:14px;">🎭 تشبيه لتسهيل الفهم</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:14px;font-size:.9rem;">
<div style="padding:16px;border-radius:12px;background:var(--purple-dim);border:1px solid rgba(168,85,247,.2);">
<div style="font-weight:700;color:var(--purple);margin-bottom:6px;">🎬 في عالم الأفلام</div>
<div style="color:var(--muted-l);line-height:1.6;">المبتدأ = البطل الرئيسي للجملة<br>الخبر = ما يفعله البطل أو صفته</div>
</div>
<div style="padding:16px;border-radius:12px;background:var(--blue-dim);border:1px solid rgba(59,130,246,.2);">
<div style="font-weight:700;color:var(--blue);margin-bottom:6px;">📸 في الصورة</div>
<div style="color:var(--muted-l);line-height:1.6;">المبتدأ = الشخص في الصورة<br>الخبر = ما نقوله عنه</div>
</div>
</div>
</div>
<!-- Sentence examples with labels -->
<div style="margin-bottom:8px;font-weight:700;font-size:.9rem;color:var(--muted-l);">مثال مرئي — اضغط على الكلمات الملوّنة:</div>
<div class="sentence-display" style="margin-bottom:32px;">
<span class="word-mubtada tooltip-wrap" data-label="مبتدأ">
محمدٌ
<div class="tooltip">المبتدأ: هو الاسم المرفوع الذي نتحدث عنه</div>
</span>
<span class="word-khabar tooltip-wrap" data-label="خبر">
طالبٌ
<div class="tooltip">الخبر: ما قيل عن المبتدأ — يُكمل المعنى</div>
</span>
</div>
<div class="card-grid">
<div class="card" style="text-align:center;">
<div style="font-size:1.5rem;margin-bottom:8px;">📌</div>
<div style="font-weight:700;margin-bottom:6px;">موقعه</div>
<div style="font-size:.85rem;color:var(--muted-l);">يأتي في <strong>أوّل الجملة</strong> الاسمية عادةً</div>
</div>
<div class="card" style="text-align:center;">
<div style="font-size:1.5rem;margin-bottom:8px;">⬆️</div>
<div style="font-weight:700;margin-bottom:6px;">إعرابه</div>
<div style="font-size:.85rem;color:var(--muted-l);">دائماً <strong>مرفوع</strong> (ضمة أو ما ينوب عنها)</div>
</div>
<div class="card" style="text-align:center;">
<div style="font-size:1.5rem;margin-bottom:8px;">🏷️</div>
<div style="font-weight:700;margin-bottom:6px;">نوعه</div>
<div style="font-size:.85rem;color:var(--muted-l);">لا بد أن يكون <strong>اسماً</strong> (ليس فعلاً)</div>
</div>
<div class="card" style="text-align:center;">
<div style="font-size:1.5rem;margin-bottom:8px;">🔗</div>
<div style="font-weight:700;margin-bottom:6px;">شريكه</div>
<div style="font-size:.85rem;color:var(--muted-l);">يحتاج <strong>خبراً</strong> ليُكمل معناه</div>
</div>
</div>
</section>
<!-- ══════════════════════════════════════════════════════
WHY USE IT?
══════════════════════════════════════════════════════ -->
<section id="why">
<div class="sec-header">
<div class="sec-icon" style="background:var(--blue-dim);border:1px solid rgba(59,130,246,.25);">🌟</div>
<div>
<div class="sec-title">لماذا نتعلّم المبتدأ؟</div>
<div class="sec-sub">أهميته في اللغة العربية والحياة اليومية</div>
</div>
</div>
<div class="highlight-box blue" style="margin-bottom:20px;">
<div class="hb-icon">🎯</div>
<div class="hb-body">
<div class="hb-title">الجملة الاسمية — قلب اللغة العربية</div>
<div class="hb-text">
نصف جمل اللغة العربية تقريباً هي جمل اسمية تبدأ بمبتدأ! من القرآن الكريم إلى الأحاديث النبوية
إلى الكتابة الأدبية — المبتدأ في كل مكان.
</div>
</div>
</div>
<div class="accordion">
<div class="acc-item">
<div class="acc-header" onclick="toggleAcc(this)">
<span>📖 في القرآن الكريم</span>
<span class="acc-arrow">▼</span>
</div>
<div class="acc-body">
الجملة الاسمية وفيها المبتدأ تملأ آيات القرآن الكريم. مثال: <strong>«اللهُ نورُ السماواتِ والأرضِ»</strong>
— كلمة «اللهُ» هنا مبتدأ مرفوع بالضمة الظاهرة على آخره.
</div>
</div>
<div class="acc-item">
<div class="acc-header" onclick="toggleAcc(this)">
<span>✍️ في الكتابة الرسمية</span>
<span class="acc-arrow">▼</span>
</div>
<div class="acc-body">
الرسائل الرسمية، التقارير، والمقالات الأكاديمية تعتمد على الجملة الاسمية بشكل كبير.
معرفة المبتدأ تساعدك على الكتابة السليمة والإعراب الصحيح.
</div>
</div>
<div class="acc-item">
<div class="acc-header" onclick="toggleAcc(this)">
<span>🗣️ في الحديث اليومي</span>
<span class="acc-arrow">▼</span>
</div>
<div class="acc-body">
حتى في حديثنا اليومي نستخدم المبتدأ: «البيتُ جميلٌ»، «الطقسُ حارٌّ»، «أخي طبيبٌ».
كل هذه الجمل تبدأ بمبتدأ مرفوع.
</div>
</div>
<div class="acc-item">
<div class="acc-header" onclick="toggleAcc(this)">
<span>🎓 في الدراسة والامتحانات</span>
<span class="acc-arrow">▼</span>
</div>
<div class="acc-body">
المبتدأ هو أول ما يُسأل عنه في أسئلة الإعراب. إتقانه يضمن لك درجات ممتازة
في مادة اللغة العربية من الابتدائي حتى الجامعة.
</div>
</div>
</div>
</section>
<!-- ══════════════════════════════════════════════════════
HOW DOES IT WORK?
══════════════════════════════════════════════════════ -->
<section id="how">
<div class="sec-header">
<div class="sec-icon" style="background:var(--green-dim);border:1px solid rgba(16,185,129,.25);">⚙️</div>
<div>
<div class="sec-title">كيف يعمل المبتدأ؟</div>
<div class="sec-sub">خطوات تحديد المبتدأ في أي جملة</div>
</div>
</div>
<div class="steps">
<div class="step">
<div class="step-num">١</div>
<div class="step-body">
<div class="step-title">تأكّد أن الجملة اسمية</div>
<div class="step-text">
الجملة الاسمية تبدأ باسم (وليس فعلاً). إذا بدأت بفعل فهي جملة فعلية ولا مبتدأ فيها.
<br><span style="color:var(--green);">✅ «الكتابُ مفيدٌ»</span> — اسمية |
<span style="color:var(--red);">❌ «قرأتُ الكتابَ»</span> — فعلية
</div>
</div>
</div>
<div class="step">
<div class="step-num">٢</div>
<div class="step-body">
<div class="step-title">ابحث عن الاسم في أوّل الجملة</div>
<div class="step-text">
المبتدأ يأتي في الغالب في بداية الجملة. اسأل نفسك: «عمَّ تتحدث هذه الجملة؟»
الجواب هو المبتدأ.
</div>
</div>
</div>
<div class="step">
<div class="step-num">٣</div>
<div class="step-body">
<div class="step-title">تحقّق من الرفع</div>
<div class="step-text">
المبتدأ مرفوع دائماً. علامة الرفع الأصلية هي <strong>الضمة (ُ)</strong>.
<br>مثال: «محمدٌ» — الضمة على الدال تدل على الرفع والتنوين يدل على التنكير.
</div>
</div>
</div>
<div class="step">
<div class="step-num">٤</div>
<div class="step-body">
<div class="step-title">حدّد الخبر الذي يُكمله</div>
<div class="step-text">
بعد المبتدأ يأتي الخبر الذي يُكمل المعنى. الجملة ناقصة بدون الخبر.
<br>«محمدٌ ___» — ما الذي يأتي بعده؟ هذا هو الخبر.
</div>
</div>
</div>
<div class="step">
<div class="step-num">٥</div>
<div class="step-body">
<div class="step-title">اكتب الإعراب الكامل</div>
<div class="step-text">
<strong>محمدٌ:</strong> مبتدأ مرفوع وعلامة رفعه الضمة الظاهرة على آخره.
<br>هذه هي الصيغة الكاملة للإعراب في الامتحانات.
</div>
</div>
</div>
</div>
</section>
<!-- ══════════════════════════════════════════════════════
LIVE DEMO
══════════════════════════════════════════════════════ -->
<section id="demo">
<div class="sec-header">
<div class="sec-icon" style="background:var(--amber-dim);border:1px solid rgba(245,158,11,.25);">🎮</div>
<div>
<div class="sec-title">تطبيق تفاعلي</div>
<div class="sec-sub">جرّب بنفسك — اكتب جملة وحلّلها!</div>
</div>
</div>
<!-- Tab examples -->
<div class="tabs-wrap">
<div class="tabs-bar">
<button class="tab-btn active" onclick="switchTab('t1',this)">أمثلة بسيطة</button>
<button class="tab-btn" onclick="switchTab('t2',this)">أمثلة متقدمة</button>
<button class="tab-btn" onclick="switchTab('t3',this)">من القرآن</button>
</div>
<div class="tab-panel active" id="t1">
<div style="display:flex;flex-direction:column;gap:14px;">
<div class="sentence-display" style="font-size:1.5rem;padding:20px;cursor:default;">
<span class="word-mubtada" data-label="مبتدأ">الجوُّ</span>
<span class="word-khabar" data-label="خبر">صافٍ</span>
</div>
<div class="sentence-display" style="font-size:1.5rem;padding:20px;cursor:default;">
<span class="word-mubtada" data-label="مبتدأ">الأمُّ</span>
<span class="word-khabar" data-label="خبر">حنونةٌ</span>
</div>
<div class="sentence-display" style="font-size:1.5rem;padding:20px;cursor:default;">
<span class="word-mubtada" data-label="مبتدأ">العلمُ</span>
<span class="word-khabar" data-label="خبر">نورٌ</span>
</div>
</div>
</div>
<div class="tab-panel" id="t2">
<div style="display:flex;flex-direction:column;gap:14px;">
<div class="sentence-display" style="font-size:1.3rem;padding:20px;cursor:default;">
<span class="word-mubtada" data-label="مبتدأ">الطلابُ</span>
<span class="word-khabar" data-label="خبر">مجتهدون في دراستهم</span>
</div>
<div class="sentence-display" style="font-size:1.3rem;padding:20px;cursor:default;">
<span class="word-mubtada" data-label="مبتدأ">الكتابُ</span>
<span class="word-khabar" data-label="خبر">على الطاولةِ</span>
</div>
</div>
</div>
<div class="tab-panel" id="t3">
<div style="display:flex;flex-direction:column;gap:14px;">
<div class="sentence-display" style="font-size:1.3rem;padding:20px;cursor:default;">
<span class="word-mubtada" data-label="مبتدأ">اللهُ</span>
<span class="word-khabar" data-label="خبر">نورُ السماواتِ والأرضِ</span>
</div>
<div class="sentence-display" style="font-size:1.3rem;padding:20px;cursor:default;">
<span class="word-mubtada" data-label="مبتدأ">الحقُّ</span>
<span class="word-khabar" data-label="خبر">من ربِّكَ</span>
</div>
</div>
</div>
</div>
<!-- Interactive sentence builder -->
<div class="card" style="margin-top:24px;">
<div style="font-weight:800;font-size:1rem;margin-bottom:6px;">🔬 محلّل الجملة التفاعلي</div>
<div style="font-size:.85rem;color:var(--muted-l);margin-bottom:16px;">اكتب جملة اسمية بسيطة (مبتدأ + خبر) وسنحلّلها لك!</div>
<div class="demo-input-wrap">
<input class="demo-input" id="demoInput" type="text" placeholder="مثال: الشمسُ مشرقةٌ" maxlength="60" />
<button class="btn btn-primary" onclick="analyzeDemo()">🔍 حلّل</button>
<button class="btn btn-ghost" onclick="clearDemo()">🗑 مسح</button>
</div>
<div class="demo-result" id="demoResult" style="color:var(--muted);">
✨ اكتب جملة أعلاه واضغط «حلّل» لرؤية التحليل...
</div>
</div>
</section>
<!-- ══════════════════════════════════════════════════════
CODE BREAKDOWN (Annotation)
══════════════════════════════════════════════════════ -->
<section id="breakdown">
<div class="sec-header">
<div class="sec-icon" style="background:var(--blue-dim);border:1px solid rgba(59,130,246,.25);">🔬</div>
<div>
<div class="sec-title">تحليل القاعدة</div>
<div class="sec-sub">تشريح العبارة النحوية كلمةً كلمة</div>
</div>
</div>
<div class="code-block">
<div class="code-bar">
<div class="dots">
<div class="dot dot-r"></div>
<div class="dot dot-y"></div>
<div class="dot dot-g"></div>
</div>
<span>القاعد
Live Preview