الخبر
📦 النحو الواضح
✨ 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>
/* ══════════════════════════════════════════════════════
DESIGN TOKENS
══════════════════════════════════════════════════════ */
:root {
--bg: #080c14;
--bg2: #0d1220;
--bg3: #111827;
--card: rgba(255,255,255,.055);
--border: rgba(255,255,255,.09);
--teal: #14b8a6;
--teal-dim: rgba(20,184,166,.14);
--teal-glow: rgba(20,184,166,.35);
--purple: #a855f7;
--purple-dim: rgba(168,85,247,.14);
--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: #f0f9ff;
--bg2: #e0f2fe;
--bg3: #ffffff;
--card: rgba(0,0,0,.04);
--border:rgba(0,0,0,.10);
--text: #0f172a;
--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 65% 45% at 85% 5%, rgba(20,184,166,.13) 0%, transparent 55%),
radial-gradient(ellipse 50% 35% at 10% 92%, rgba(168,85,247,.11) 0%, transparent 50%);
transition: background .3s, color .3s;
}
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--teal); border-radius: 3px; }
/* ── Read progress ────────────────────────────────────── */
#readBar {
position: fixed; top: 0; left: 0;
height: 3px; width: 0%;
background: linear-gradient(90deg, var(--teal), var(--purple), var(--blue));
z-index: 9999;
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: 11px 28px;
background: rgba(8,12,20,.82);
backdrop-filter: blur(18px);
border-bottom: 1px solid var(--border);
}
.nav-logo {
font-size: 1.05rem; font-weight: 900;
background: linear-gradient(135deg, var(--teal), var(--purple));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.nav-links { display: flex; gap: 5px; list-style: none; flex-wrap: wrap; }
.nav-links a {
padding: 5px 11px; border-radius: 999px;
font-size: .77rem; font-weight: 600;
color: var(--muted-l); text-decoration: none;
border: 1px solid transparent;
transition: background .2s, color .2s, border-color .2s;
}
.nav-links a:hover {
background: var(--teal-dim); color: var(--teal);
border-color: rgba(20,184,166,.25);
}
.theme-btn {
width: 35px; height: 35px; border-radius: 50%;
border: 1px solid var(--border); background: var(--card);
color: var(--text); cursor: pointer; font-size: .95rem;
display: flex; align-items: center; justify-content: center;
transition: transform .25s, background .2s;
}
.theme-btn:hover { transform: rotate(22deg); background: var(--teal-dim); }
/* ── Sections ─────────────────────────────────────────── */
section {
max-width: 920px; margin: 0 auto;
padding: 80px 24px 44px;
opacity: 0; transform: translateY(28px);
transition: opacity .6s ease, transform .6s ease;
}
section.visible { opacity: 1; transform: translateY(0); }
/* ── Sec 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.45rem; flex-shrink: 0;
}
.sec-title { font-size: 1.55rem; font-weight: 800; line-height: 1.2; }
.sec-sub { font-size: .88rem; 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(220px,1fr)); gap: 14px; }
/* ── Highlight boxes ──────────────────────────────────── */
.hbox {
border-radius: 14px; padding: 18px 20px;
display: flex; align-items: flex-start; gap: 13px;
margin-bottom: 14px; border: 1px solid;
}
.hbox.teal { background: var(--teal-dim); border-color: rgba(20,184,166,.25); }
.hbox.purple { background: var(--purple-dim); border-color: rgba(168,85,247,.25); }
.hbox.blue { background: var(--blue-dim); border-color: rgba(59,130,246,.25); }
.hbox.green { background: var(--green-dim); border-color: rgba(16,185,129,.25); }
.hbox.amber { background: var(--amber-dim); border-color: rgba(245,158,11,.25); }
.hbox.red { background: var(--red-dim); border-color: rgba(239,68,68,.25); }
.hbox-icon { font-size: 1.35rem; flex-shrink: 0; margin-top: 2px; }
.hbox-title { font-weight: 700; margin-bottom: 4px; font-size: .93rem; }
.hbox-text { font-size: .87rem; color: var(--muted-l); line-height: 1.65; }
/* ══════════════════════════════════════════════════════
HERO
══════════════════════════════════════════════════════ */
#hero {
min-height: 100vh;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
text-align: center; padding-top: 90px;
opacity: 1 !important; transform: none !important;
}
.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: .78rem; font-weight: 600;
letter-spacing: .05em; margin-bottom: 22px;
animation: badge-in .8s cubic-bezier(.34,1.56,.64,1) .2s both;
}
@keyframes badge-in {
from { opacity:0; transform:translateY(-14px) scale(.9); }
to { opacity:1; transform:translateY(0) scale(1); }
}
.hero-phrase {
font-size: clamp(1.7rem, 5.5vw, 3.5rem);
font-weight: 900; line-height: 1.35;
background: linear-gradient(135deg, #e2e8f0 15%, var(--teal) 50%, var(--purple) 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: 18px;
}
@keyframes phrase-in {
from { opacity:0; transform:scale(.86); }
to { opacity:1; transform:scale(1); }
}
.hero-sub {
font-size: 1.05rem; color: var(--muted-l);
max-width: 540px; line-height: 1.75;
animation: fade-up .8s ease .6s both; margin-bottom: 30px;
}
@keyframes fade-up {
from { opacity:0; transform:translateY(14px); }
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: 44px;
}
.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(--teal), var(--purple));
color: #fff; box-shadow: 0 4px 20px var(--teal-glow);
}
.btn-primary:hover { box-shadow: 0 8px 30px var(--teal-glow); }
.btn-ghost {
background: var(--card); color: var(--text);
border: 1px solid var(--border);
}
.btn-ghost:hover { background: var(--teal-dim); color: var(--teal); }
.hero-stats {
display: flex; gap: 20px; 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: 14px 22px; border-radius: 16px;
background: var(--card); border: 1px solid var(--border);
backdrop-filter: blur(10px);
}
.hero-stat .num {
font-size: 1.5rem; font-weight: 900;
background: linear-gradient(135deg, var(--teal), var(--purple));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-stat .lbl { font-size: .75rem; color: var(--muted-l); }
/* ── Sentence display ─────────────────────────────────── */
.sent-box {
background: var(--bg2); border: 1px solid var(--border);
border-radius: 16px; padding: 26px;
text-align: center;
font-size: clamp(1.3rem, 4vw, 2rem);
font-weight: 800; line-height: 2.2;
margin-bottom: 16px; position: relative; overflow: hidden;
}
.sent-box::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(20,184,166,.05), rgba(168,85,247,.05));
}
.w-mubtada { color: var(--purple); cursor: pointer; position: relative; }
.w-khabar { color: var(--teal); cursor: pointer; position: relative; }
.w-other { color: var(--muted-l); }
.w-mubtada::after, .w-khabar::after {
content: attr(data-lbl);
position: absolute; bottom: -22px; right: 50%;
transform: translateX(50%);
font-size: .6rem; font-weight: 700;
padding: 2px 7px; border-radius: 999px;
white-space: nowrap; letter-spacing: .04em;
pointer-events: none;
}
.w-mubtada::after { background: var(--purple-dim); color: var(--purple); border: 1px solid rgba(168,85,247,.3); }
.w-khabar::after { background: var(--teal-dim); color: var(--teal); border: 1px solid rgba(20,184,166,.3); }
/* ── Tooltip ──────────────────────────────────────────── */
.tt { position: relative; display: inline-block; }
.tt .tip {
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: .77rem; color: var(--text);
white-space: normal; text-align: center; line-height: 1.5;
pointer-events: none; opacity: 0; transition: opacity .2s;
z-index: 100; box-shadow: 0 8px 24px rgba(0,0,0,.4);
max-width: 200px; min-width: 140px;
}
.tt:hover .tip { opacity: 1; }
/* ── Steps ────────────────────────────────────────────── */
.steps { display: flex; flex-direction: column; gap: 14px; }
.step {
display: flex; gap: 16px; align-items: flex-start;
padding: 18px; border-radius: 14px;
background: var(--card); border: 1px solid var(--border);
transition: transform .2s, border-color .2s;
}
.step:hover { transform: translateX(-4px); border-color: rgba(20,184,166,.3); }
.step-num {
width: 40px; height: 40px; border-radius: 12px;
background: linear-gradient(135deg, var(--teal), var(--purple));
color: #fff; font-size: .95rem; font-weight: 800;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.step-title { font-weight: 700; margin-bottom: 4px; }
.step-text { font-size: .87rem; color: var(--muted-l); line-height: 1.65; }
/* ── Tabs ─────────────────────────────────────────────── */
.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 15px; border-radius: 8px; border: none;
background: transparent; color: var(--muted-l);
font-family: 'Tajawal', sans-serif;
font-size: .84rem; font-weight: 600; cursor: pointer;
transition: background .2s, color .2s;
}
.tab-btn.active {
background: linear-gradient(135deg, var(--teal), var(--purple));
color: #fff; box-shadow: 0 4px 12px var(--teal-glow);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fade-up .3s ease; }
/* ── 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: 15px 20px; cursor: pointer;
font-weight: 700; font-size: .93rem;
transition: background .2s; user-select: none;
}
.acc-header:hover { background: rgba(255,255,255,.04); }
.acc-arrow { font-size: .78rem; transition: transform .3s; color: var(--teal); }
.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: .87rem; color: var(--muted-l); line-height: 1.7;
}
.acc-item.open .acc-body { max-height: 500px; padding: 0 20px 18px; }
/* ── 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: .77rem; color: var(--muted);
}
.code-bar .dots { display: flex; gap: 6px; }
.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;
display: flex; align-items: center; gap: 5px;
transition: background .18s, color .18s;
}
.copy-btn:hover { background: var(--teal-dim); color: var(--teal); }
.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: .84rem; line-height: 1.85;
color: #cdd6f4; overflow-x: auto;
direction: ltr; text-align: left;
}
.tk-khabar { color: #94e2d5; font-weight: 700; }
.tk-mubtada{ color: #cba6f7; font-weight: 700; }
.tk-label { color: #a6e3a1; }
.tk-note { color: #585b70; font-style: italic; }
.tk-rule { color: #89b4fa; }
.tk-ex { color: #fab387; }
/* ── Interactive demo ─────────────────────────────────── */
.demo-input {
width: 100%; padding: 13px 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;
margin-bottom: 10px;
}
.demo-input:focus {
border-color: var(--teal);
box-shadow: 0 0 0 3px rgba(20,184,166,.2);
}
.demo-result {
background: var(--bg2); border: 1px solid var(--border);
border-radius: 14px; padding: 20px;
min-height: 80px; font-size: .95rem; line-height: 1.9;
transition: all .3s ease;
}
.dtag {
display: inline-block; padding: 3px 10px;
border-radius: 8px; font-size: .78rem; font-weight: 700; margin: 2px;
}
.dtag.mubtada { background: var(--purple-dim); color: var(--purple); border: 1px solid rgba(168,85,247,.3); }
.dtag.khabar { background: var(--teal-dim); color: var(--teal); border: 1px solid rgba(20,184,166,.3); }
/* ── Khabar type cards ────────────────────────────────── */
.type-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 14px; }
.type-card {
padding: 18px; border-radius: 14px;
border: 1px solid var(--border); background: var(--card);
text-align: center; cursor: pointer;
transition: transform .22s, border-color .22s, box-shadow .22s;
}
.type-card:hover {
transform: translateY(-4px);
border-color: rgba(20,184,166,.4);
box-shadow: 0 12px 32px rgba(20,184,166,.15);
}
.type-card .tc-icon { font-size: 1.8rem; margin-bottom: 8px; }
.type-card .tc-name { font-weight: 800; margin-bottom: 6px; font-size: .95rem; }
.type-card .tc-ex { font-size: .82rem; color: var(--teal); font-weight: 700; margin-bottom: 4px; }
.type-card .tc-desc { font-size: .78rem; color: var(--muted-l); line-height: 1.5; }
/* ── Mistakes ─────────────────────────────────────────── */
.mistake {
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:hover { transform: translateX(-4px); }
.mistake-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: 2px; }
.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; }
/* ── Tips ─────────────────────────────────────────────── */
.tip-item {
display: flex; gap: 14px; padding: 18px;
border-radius: 14px; background: var(--teal-dim);
border: 1px solid rgba(20,184,166,.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-title { font-weight: 700; color: var(--teal); margin-bottom: 4px; }
.tip-text { font-size: .86rem; color: var(--muted-l); line-height: 1.6; }
/* ── Quiz ─────────────────────────────────────────────── */
.quiz-card {
background: var(--card); border: 1px solid var(--border);
border-radius: var(--radius); padding: 26px; margin-bottom: 16px;
}
.quiz-q {
font-size: 1.02rem; font-weight: 700;
margin-bottom: 18px; line-height: 1.55;
display: flex; align-items: flex-start; gap: 10px;
}
.q-num {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px; border-radius: 8px;
background: linear-gradient(135deg, var(--teal), var(--purple));
color: #fff; font-size: .78rem; font-weight: 800; flex-shrink: 0;
}
.quiz-opts { 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(--teal); background: var(--teal-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-fb {
margin-top: 12px; padding: 12px 16px; border-radius: 10px;
font-size: .87rem; font-weight: 600; display: none;
animation: fade-up .3s ease;
}
.quiz-fb.show { display: block; }
.quiz-fb.ok { background: var(--green-dim); color: var(--green); border: 1px solid rgba(16,185,129,.3); }
.quiz-fb.bad { background: var(--red-dim); color: var(--red); border: 1px solid rgba(239,68,68,.3); }
.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; line-height: 1;
background: linear-gradient(135deg, var(--teal), var(--purple), var(--green));
-webkit-background-clip: text; background-clip: text; color: transparent;
margin-bottom: 8px;
}
/* ── Summary ──────────────────────────────────────────── */
.summary-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr));
gap: 13px; margin-bottom: 20px;
}
.si {
padding: 18px; border-radius: 14px;
border: 1px solid var(--border); background: var(--card);
text-align: center; transition: transform .2s;
}
.si:hover { transform: translateY(-3px); }
.si-icon { font-size: 1.7rem; margin-bottom: 8px; }
.si-label { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.si-val { font-size: .92rem; font-weight: 700; }
/* Cheat sheet table */
.cheat-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.cheat-table th, .cheat-table td {
padding: 12px 16px; border: 1px solid var(--border); text-align: right;
}
.cheat-table th {
background: var(--teal-dim); color: var(--teal);
font-weight: 800; font-size: .8rem; letter-spacing: .04em;
}
.cheat-table tr:nth-child(even) td { background: rgba(255,255,255,.02); }
.cheat-table tr:hover td { background: var(--teal-dim); }
/* ── Badge ────────────────────────────────────────────── */
.badge {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 11px; border-radius: 999px;
font-size: .73rem; font-weight: 700; letter-spacing: .04em;
}
.badge-teal { background: var(--teal-dim); color: var(--teal); border: 1px solid rgba(20,184,166,.25); }
.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-amber { background: var(--amber-dim); color: var(--amber); border: 1px solid rgba(245,158,11,.25); }
/* ── Achievement toast ────────────────────────────────── */
#achieveToast {
position: fixed; bottom: 26px; left: 26px;
background: rgba(12,18,30,.96); 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); }
.ach-icon { font-size: 1.75rem; }
.ach-title { font-weight: 800; font-size: .88rem; color: var(--amber); }
.ach-sub { font-size: .76rem; color: var(--muted-l); margin-top: 2px; }
/* ── Confetti ─────────────────────────────────────────── */
.confetti-p {
position: fixed; width: 9px; height: 9px;
border-radius: 2px; pointer-events: none; z-index: 9999;
animation: cffall linear forwards;
}
@keyframes cffall {
0% { transform: translateY(-10px) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
/* ── Footer ───────────────────────────────────────────── */
footer {
text-align: center; padding: 44px 24px;
border-top: 1px solid var(--border);
color: var(--muted); font-size: .84rem; line-height: 1.85;
}
.footer-logo {
font-size: 1.15rem; font-weight: 900;
background: linear-gradient(135deg, var(--teal), var(--purple));
-webkit-background-clip: text; background-clip: text; color: transparent;
margin-bottom: 8px; display: block;
}
/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 640px) {
nav { padding: 10px 14px; }
.nav-links { display: none; }
section { padding: 68px 14px 30px; }
.sent-box { font-size: 1.2rem; }
.type-cards { grid-template-columns: 1fr 1fr; }
}
</style>
</head>
<body>
<div id="readBar"></div>
<!-- Achievement toast -->
<div id="achieveToast">
<div class="ach-icon" id="achIcon">🏆</div>
<div>
<div class="ach-title" id="achTitle">إنجاز!</div>
<div class="ach-sub" id="achSub">أحسنت!</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="#types">أنواعه</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>
جملةً مفيدةً — وهو <span style="color:var(--teal);">الخبر</span>
</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(--teal-dim);border:1px solid rgba(20,184,166,.25);">🤔</div>
<div>
<div class="sec-title">ما هو الخبر؟</div>
<div class="sec-sub">التعريف الكامل بأسلوب بسيط وممتع</div>
</div>
</div>
<div class="hbox teal" style="margin-bottom:22px;">
<div class="hbox-icon">💡</div>
<div>
<div class="hbox-title">التعريف الرسمي</div>
<div class="hbox-text">
<strong>الخبر</strong> هو الاسم المرفوع الذي يُكمل معنى المبتدأ ويجعل الجملة مفيدة.
هو الجزء الذي يُخبرنا بشيء عن المبتدأ — صفةً كان أم حالاً أم خبراً آخر.
بدونه تبقى الجملة ناقصة المعنى.
</div>
</div>
</div>
<!-- Analogy -->
<div class="card" style="margin-bottom:22px;">
<div style="font-weight:800;font-size:1rem;margin-bottom:14px;">🎭 تشبيهات لتسهيل الفهم</div>
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;font-size:.88rem;">
<div style="padding:14px;border-radius:12px;background:var(--teal-dim);border:1px solid rgba(20,184,166,.2);">
<div style="font-weight:700;color:var(--teal);margin-bottom:6px;">🎬 في الأفلام</div>
<div style="color:var(--muted-l);line-height:1.6;">المبتدأ = البطل<br>الخبر = ما يفعله البطل أو صفته</div>
</div>
<div style="padding:14px;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:14px;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>
<!-- Visual sentence -->
<div style="margin-bottom:8px;font-weight:700;font-size:.88rem;color:var(--muted-l);">
مثال مرئي — المبتدأ بالبنفسجي 🟣 والخبر بالأخضر المزرق 🩵:
</div>
<div class="sent-box" style="margin-bottom:28px;">
<span class="w-mubtada tt" data-lbl="مبتدأ">
العلمُ
<div class="tip">المبتدأ: الاسم المرفوع الذي نتحدث عنه</div>
</span>
<span class="w-khabar tt" data-lbl="خبر">
نورٌ
<div class="tip">الخبر: يُكمل معنى المبتدأ ويجعل الجملة مفيدة</div>
</span>
</div>
<div class="card-grid">
<div class="card" style="text-align:center;">
<div style="font-size:1.4rem;margin-bottom:8px;">⬆️</div>
<div style="font-weight:700;margin-bottom:5px;">إعرابه</div>
<div style="font-size:.84rem;color:var(--muted-l);">دائماً <strong>مرفوع</strong> بالضمة أو ما ينوب عنها</div>
</div>
<div class="card" style="text-align:center;">
<div style="font-size:1.4rem;margin-bottom:8px;">🔗</div>
<div style="font-weight:700;margin-bottom:5px;">علاقته بالمبتدأ</div>
<div style="font-size:.84rem;color:var(--muted-l);">يُكمله ويجعل الجملة <strong>مفيدة</strong></div>
</div>
<div class="card" style="text-align:center;">
<div style="font-size:1.4rem;margin-bottom:8px;">📍</div>
<div style="font-weight:700;margin-bottom:5px;">موقعه</div>
<div style="font-size:.84rem;color:var(--muted-l);">يأتي <strong>بعد المبتدأ</strong> في الغالب</div>
</div>
<div class="card" style="text-align:center;">
<div style="font-size:1.4rem;margin-bottom:8px;">🎯</div>
<div style="font-weight:700;margin-bottom:5px;">وظيفته</div>
<div style="font-size:.84rem;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(--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="hbox purple" style="margin-bottom:20px;">
<div class="hbox-icon">🎯</div>
<div>
<div class="hbox-title">بدون الخبر — الجملة ناقصة تماماً!</div>
<div class="hbox-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">
«الطقسُ <strong>جميلٌ</strong>»، «البيتُ <strong>كبيرٌ</strong>»، «أخي <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>
</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> — اسمية ✓
</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">
الخبر هو الجزء الذي يجعل الجملة «مفيدة» — أي تامة المعنى.
«الكتابُ...» ناقصة. «الكتابُ <span style="color:var(--teal);">مفيدٌ</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">
الخبر مرفوع دائماً. علامة الرفع الأصلية هي <strong>الضمة (ُ)</strong>.
«مفيدٌ» — الضمة على الدال + التنوين = مرفوع منوّن.
</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>
<!-- ══════════════════════════════════════════════════════
TYPES OF KHABAR
══════════════════════════════════════════════════════ -->
<section id="types">
<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>
<div class="hbox amber" style="margin-bottom:22px;">
<div class="hbox-icon">⭐</div>
<div>
<div class="hbox-title">الخبر أكثر مرونةً من المبتدأ!</div>
<div class="hbox-text">
بينما المبتدأ دائماً اسم مفرد أو شبهه، الخبر يأتي في أربعة أشكال مختلفة.
اضغط على كل بطاقة لمعرفة المزيد!
</div>
</div>
</div>
<div class="type-cards" id="typeCards">
<div class="type-card" onclick="showTypeDetail(0)">
<div class="tc-icon">1️⃣</div>
<div class="tc-name">خبر مفرد</div>
<div class="tc-ex">«الجوُّ صافٍ»</div>
<div class="tc-desc">اسم واحد يُخبر عن المبتدأ مباشرةً</div>
</div>
<div class="type-card" onclick="showTypeDetail(1)">
<div class="tc-icon">2️⃣</div>
<div class="tc-name">خبر جملة فعلية</div>
<div class="tc-ex">«الطالبُ يدرسُ»</div>
<div class="tc-desc">جملة فعلية كاملة تقع خبراً</div>
</div>
<div class="type-card" onclick="showTypeDetail(2)">
<div class="tc-icon">3️⃣</div>
<div class="tc-name">خبر جملة اسمية</div>
<div class="tc-ex">«الحديقةُ أزهارُها جميلةٌ»</div>
<div class="tc-desc">جملة اسمية تقع خبراً للمبتدأ</div>
</div>
<div class="type-card" onclick="showTypeDetail(3)">
<div class="tc-icon">4️⃣</div>
<div class="tc-name">خبر شبه جملة</div>
<div class="tc-ex">«الكتابُ على الطاولةِ»</div>
<div class="tc-desc">ظرف أو جار ومجرور يقع خبراً</div>
</div>
</div>
<!-- Type detail panel -->
<div id="typeDetail" style="display:none;margin-top:16px;">
<div class="card" id="typeDetailCard" style="border-color:rgba(20,184,166,.3);">
<div id="typeDetailContent"></div>
</div>
</div>
</section>
<!-- ══════════════════════════════════════════════════════
CODE BREAKDOWN
══════════════════════════════════════════════════════ -->
<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>تعريف الخبر — تحليل نحوي</span>
<button class="copy-btn" onclick="copyCode(this,'code1')">📋 نسخ</button>
</div>
<pre id="code1"><span class="tk-note">/* ══ تعريف الخبر ══════════════════════════════════ */</span>
<span class="tk-label">الخبر</span> = <span class="tk-rule">اسم مرفوع</span> <span class="tk-note">← الإعراب: رفع دائماً</span>
+ <span class="tk-rule">يكون مع المبتدأ</span> <span class="tk-note">← الشرط: لا بد من مبتدأ قبله</span>
+ <span class="tk-rule">جملة مفيدة</span> <span class="tk-note">← الغاية: إتمام المعنى</span>
<span class="tk-note">/* ══ مثال تطبيقي ══════════════════════════════════
Live Preview