المصدر
📦 النحو الواضح
✨ 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 rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Tajawal:wght@300;400;500;700;800&display=swap" rel="stylesheet">
<style>
/* =============================================
CSS CUSTOM PROPERTIES (VARIABLES)
============================================= */
:root {
--primary: #8b5cf6;
--primary-dark: #7c3aed;
--secondary: #06b6d4;
--accent: #10b981;
--warning: #f59e0b;
--danger: #ef4444;
--success: #22c55e;
--bg-dark: #0f172a;
--bg-darker: #020617;
--bg-card: rgba(30, 41, 59, 0.8);
--bg-glass: rgba(255, 255, 255, 0.05);
--text-primary: #f8fafc;
--text-secondary: #94a3b8;
--text-muted: #64748b;
--border-color: rgba(148, 163, 184, 0.2);
--glow-primary: rgba(139, 92, 246, 0.4);
--glow-secondary: rgba(6, 182, 212, 0.4);
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-xl: 28px;
--radius-full: 9999px;
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
--shadow-glow: 0 0 40px var(--glow-primary);
--transition-fast: 0.15s ease;
--transition-normal: 0.3s ease;
--transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
--font-arabic: 'Amiri', serif;
--font-ui: 'Tajawal', sans-serif;
}
/* =============================================
RESET & BASE STYLES
============================================= */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
font-size: 16px;
}
body {
font-family: var(--font-ui);
background: var(--bg-dark);
color: var(--text-primary);
line-height: 1.8;
min-height: 100vh;
overflow-x: hidden;
}
/* Animated Background */
body::before {
content: '';
position: fixed;
inset: 0;
background:
radial-gradient(ellipse 80% 50% at 20% 20%, rgba(139, 92, 246, 0.15), transparent),
radial-gradient(ellipse 60% 40% at 80% 80%, rgba(6, 182, 212, 0.12), transparent),
radial-gradient(ellipse 50% 30% at 50% 50%, rgba(16, 185, 129, 0.08), transparent);
pointer-events: none;
z-index: -1;
animation: bgShift 15s ease-in-out infinite alternate;
}
@keyframes bgShift {
0% { opacity: 1; filter: hue-rotate(0deg); }
100% { opacity: 0.8; filter: hue-rotate(30deg); }
}
/* =============================================
TYPOGRAPHY
============================================= */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-arabic);
font-weight: 700;
line-height: 1.4;
color: var(--text-primary);
}
h1 { font-size: clamp(2rem, 6vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 3vw, 1.75rem); }
h4 { font-size: clamp(1.1rem, 2.5vw, 1.4rem); }
p {
color: var(--text-secondary);
margin-bottom: 1rem;
}
a {
color: var(--secondary);
text-decoration: none;
transition: var(--transition-fast);
}
a:hover {
color: var(--primary);
}
.arabic-text {
font-family: var(--font-arabic);
font-size: 1.3em;
line-height: 2.2;
}
/* =============================================
UTILITY CLASSES
============================================= */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1.5rem;
}
.text-center { text-align: center; }
.gradient-text {
background: linear-gradient(135deg, var(--primary), var(--secondary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.gradient-text-alt {
background: linear-gradient(135deg, var(--secondary), var(--accent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* =============================================
GLASS CARD COMPONENT
============================================= */
.glass-card {
background: var(--bg-glass);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
padding: 2rem;
transition: var(--transition-normal);
}
.glass-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md), var(--shadow-glow);
border-color: rgba(139, 92, 246, 0.3);
}
/* =============================================
NAVIGATION
============================================= */
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: rgba(15, 23, 42, 0.9);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border-color);
padding: 0.75rem 0;
}
.nav-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.nav-logo {
font-family: var(--font-arabic);
font-size: 1.4rem;
font-weight: 700;
background: linear-gradient(135deg, var(--primary), var(--secondary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
display: flex;
align-items: center;
gap: 0.5rem;
}
.nav-links {
display: flex;
gap: 0.5rem;
list-style: none;
flex-wrap: wrap;
}
.nav-links a {
color: var(--text-secondary);
padding: 0.5rem 1rem;
border-radius: var(--radius-sm);
font-size: 0.9rem;
transition: var(--transition-fast);
}
.nav-links a:hover {
color: var(--text-primary);
background: var(--bg-glass);
}
/* =============================================
HERO SECTION
============================================= */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 7rem 1.5rem 4rem;
position: relative;
overflow: hidden;
}
.hero-content {
text-align: center;
max-width: 950px;
animation: heroFadeIn 1s ease-out;
}
@keyframes heroFadeIn {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--bg-glass);
border: 1px solid var(--border-color);
border-radius: var(--radius-full);
padding: 0.6rem 1.5rem;
font-size: 0.95rem;
color: var(--text-secondary);
margin-bottom: 2rem;
animation: badgePulse 3s ease-in-out infinite;
}
@keyframes badgePulse {
0%, 100% { box-shadow: 0 0 0 0 var(--glow-primary); }
50% { box-shadow: 0 0 0 12px transparent; }
}
.hero-title {
margin-bottom: 1.5rem;
text-shadow: 0 0 60px var(--glow-primary);
}
.hero-phrase-box {
background: var(--bg-glass);
border: 1px solid var(--border-color);
border-radius: var(--radius-xl);
padding: 2.5rem;
margin: 2.5rem 0;
position: relative;
overflow: hidden;
}
.hero-phrase-box::before {
content: '❝';
position: absolute;
top: -25px;
right: 25px;
font-size: 7rem;
opacity: 0.08;
color: var(--primary);
}
.hero-phrase-box::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
}
.hero-phrase {
font-family: var(--font-arabic);
font-size: clamp(1.1rem, 2.5vw, 1.6rem);
line-height: 2.4;
color: var(--text-primary);
}
.term {
display: inline-block;
padding: 0.15rem 0.75rem;
margin: 0.15rem;
border-radius: var(--radius-sm);
font-weight: 700;
transition: var(--transition-normal);
}
.term:hover {
transform: scale(1.08);
}
.term-event {
background: rgba(6, 182, 212, 0.2);
color: var(--secondary);
border: 1px solid rgba(6, 182, 212, 0.4);
}
.term-abstract {
background: rgba(139, 92, 246, 0.2);
color: var(--primary);
border: 1px solid rgba(139, 92, 246, 0.4);
}
.term-time {
background: rgba(245, 158, 11, 0.2);
color: var(--warning);
border: 1px solid rgba(245, 158, 11, 0.4);
}
.term-verb {
background: rgba(239, 68, 68, 0.2);
color: var(--danger);
border: 1px solid rgba(239, 68, 68, 0.4);
}
.term-masdar {
background: rgba(16, 185, 129, 0.2);
color: var(--accent);
border: 1px solid rgba(16, 185, 129, 0.4);
}
/* Floating decorations */
.floating-icons {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
.float-icon {
position: absolute;
font-size: 2rem;
opacity: 0.25;
animation: floatAnim 8s ease-in-out infinite;
}
.float-icon:nth-child(1) { top: 15%; left: 8%; animation-delay: 0s; }
.float-icon:nth-child(2) { top: 25%; right: 12%; animation-delay: 1.5s; }
.float-icon:nth-child(3) { bottom: 35%; left: 15%; animation-delay: 3s; }
.float-icon:nth-child(4) { bottom: 25%; right: 8%; animation-delay: 4.5s; }
.float-icon:nth-child(5) { top: 55%; left: 5%; animation-delay: 2s; }
.float-icon:nth-child(6) { top: 45%; right: 5%; animation-delay: 5s; }
@keyframes floatAnim {
0%, 100% { transform: translateY(0) rotate(0deg); }
25% { transform: translateY(-15px) rotate(5deg); }
75% { transform: translateY(10px) rotate(-5deg); }
}
/* Stats */
.hero-stats {
display: flex;
justify-content: center;
gap: 3rem;
margin-top: 3rem;
flex-wrap: wrap;
}
.stat {
text-align: center;
}
.stat-value {
font-size: 2.5rem;
font-weight: 800;
background: linear-gradient(135deg, var(--primary), var(--secondary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.stat-label {
font-size: 0.9rem;
color: var(--text-muted);
}
/* =============================================
SECTION STYLES
============================================= */
.section {
padding: 5rem 0;
position: relative;
}
.section-header {
text-align: center;
margin-bottom: 3rem;
}
.section-icon {
font-size: 3.5rem;
display: block;
margin-bottom: 1rem;
animation: iconBounce 2.5s ease-in-out infinite;
}
@keyframes iconBounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-12px); }
}
.section-title {
margin-bottom: 0.5rem;
}
.section-subtitle {
color: var(--text-muted);
font-size: 1.1rem;
}
/* =============================================
CONCEPT CARDS GRID
============================================= */
.concepts-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
.concept-card {
background: var(--bg-glass);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
padding: 2rem;
text-align: center;
position: relative;
overflow: hidden;
transition: var(--transition-normal);
}
.concept-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary), var(--secondary));
transform: scaleX(0);
transition: var(--transition-normal);
}
.concept-card:hover::before {
transform: scaleX(1);
}
.concept-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-lg);
border-color: var(--primary);
}
.concept-icon {
font-size: 3rem;
margin-bottom: 1rem;
}
.concept-title {
font-size: 1.3rem;
margin-bottom: 0.75rem;
color: var(--text-primary);
}
.concept-desc {
color: var(--text-secondary);
font-size: 0.95rem;
}
/* =============================================
VISUAL DIAGRAM
============================================= */
.diagram-container {
background: var(--bg-glass);
border: 1px solid var(--border-color);
border-radius: var(--radius-xl);
padding: 3rem 2rem;
margin: 2rem 0;
}
.diagram {
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
}
.diagram-row {
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
flex-wrap: wrap;
}
.diagram-box {
background: var(--bg-card);
border: 2px solid var(--border-color);
border-radius: var(--radius-md);
padding: 1.5rem 2rem;
text-align: center;
min-width: 150px;
transition: var(--transition-normal);
}
.diagram-box:hover {
transform: scale(1.05);
box-shadow: var(--shadow-glow);
}
.diagram-box.masdar {
border-color: var(--accent);
background: rgba(16, 185, 129, 0.1);
}
.diagram-box.verb {
border-color: var(--danger);
background: rgba(239, 68, 68, 0.1);
}
.diagram-box.shared {
border-color: var(--secondary);
background: rgba(6, 182, 212, 0.1);
}
.diagram-box-title {
font-family: var(--font-arabic);
font-size: 1.4rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.diagram-box-subtitle {
font-size: 0.85rem;
color: var(--text-muted);
}
.diagram-arrow {
font-size: 2rem;
color: var(--primary);
animation: arrowPulse 1.5s ease-in-out infinite;
}
@keyframes arrowPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.6; transform: scale(1.2); }
}
.diagram-connector {
width: 60px;
height: 3px;
background: linear-gradient(90deg, var(--primary), var(--secondary));
border-radius: 2px;
}
/* =============================================
ACCORDION (Details/Summary)
============================================= */
.accordion {
display: flex;
flex-direction: column;
gap: 1rem;
}
details {
background: var(--bg-glass);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
overflow: hidden;
transition: var(--transition-normal);
}
details:hover {
border-color: rgba(139, 92, 246, 0.4);
}
details[open] {
box-shadow: var(--shadow-md);
}
summary {
padding: 1.25rem 1.5rem;
cursor: pointer;
font-weight: 600;
font-size: 1.1rem;
display: flex;
align-items: center;
gap: 1rem;
list-style: none;
transition: var(--transition-fast);
color: var(--text-primary);
}
summary::-webkit-details-marker {
display: none;
}
summary::before {
content: '◀';
font-size: 0.75rem;
color: var(--primary);
transition: var(--transition-fast);
}
details[open] summary::before {
transform: rotate(-90deg);
}
summary:hover {
background: rgba(139, 92, 246, 0.1);
}
.details-content {
padding: 0 1.5rem 1.5rem;
animation: slideIn 0.3s ease-out;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* =============================================
TABS (CSS-Only with Radio Buttons)
============================================= */
.tabs-wrapper {
margin: 2rem 0;
}
.tabs-nav {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 0;
}
.tab-input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.tab-label {
padding: 1rem 1.75rem;
background: var(--bg-glass);
border: 1px solid var(--border-color);
border-bottom: none;
border-radius: var(--radius-md) var(--radius-md) 0 0;
cursor: pointer;
font-weight: 500;
color: var(--text-secondary);
transition: var(--transition-fast);
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.tab-label:hover {
background: rgba(139, 92, 246, 0.15);
color: var(--text-primary);
}
.tab-input:checked + .tab-label {
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
color: white;
border-color: var(--primary);
}
.tabs-content {
position: relative;
min-height: 280px;
}
.tab-panel {
display: none;
background: var(--bg-glass);
border: 1px solid var(--border-color);
border-radius: 0 var(--radius-md) var(--radius-md) var(--radius-md);
padding: 2rem;
animation: fadeIn 0.4s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
#tab-masdar:checked ~ .tabs-content .panel-masdar,
#tab-verb:checked ~ .tabs-content .panel-verb,
#tab-compare:checked ~ .tabs-content .panel-compare {
display: block;
}
/* =============================================
CODE BLOCKS
============================================= */
.code-block {
background: rgba(2, 6, 23, 0.8);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
overflow: hidden;
margin: 1.5rem 0;
}
.code-header {
background: rgba(139, 92, 246, 0.15);
padding: 0.75rem 1.25rem;
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
gap: 0.75rem;
}
.code-title {
font-size: 0.9rem;
color: var(--text-secondary);
}
.code-body {
padding: 1.5rem;
font-family: 'Courier New', monospace;
font-size: 1rem;
line-height: 2;
overflow-x: auto;
direction: rtl;
}
.code-line {
display: block;
padding: 0.25rem 0;
}
.code-comment {
color: var(--text-muted);
font-style: italic;
}
.code-keyword {
color: var(--primary);
font-weight: 600;
}
.code-string {
color: var(--accent);
}
.code-number {
color: var(--secondary);
}
.code-highlight {
background: rgba(139, 92, 246, 0.2);
padding: 0.1rem 0.4rem;
border-radius: 4px;
}
/* =============================================
COMPARISON TABLE
============================================= */
.table-wrapper {
overflow-x: auto;
margin: 2rem 0;
}
.comparison-table {
width: 100%;
border-collapse: collapse;
background: var(--bg-glass);
border-radius: var(--radius-lg);
overflow: hidden;
}
.comparison-table th,
.comparison-table td {
padding: 1.25rem 1.5rem;
text-align: center;
border-bottom: 1px solid var(--border-color);
}
.comparison-table th {
background: rgba(139, 92, 246, 0.2);
font-weight: 700;
font-size: 1.05rem;
color: var(--text-primary);
}
.comparison-table tbody tr {
transition: var(--transition-fast);
}
.comparison-table tbody tr:hover {
background: rgba(139, 92, 246, 0.08);
}
.comparison-table tbody tr:last-child td {
border-bottom: none;
}
.table-check {
color: var(--success);
font-size: 1.4rem;
}
.table-cross {
color: var(--danger);
font-size: 1.4rem;
}
/* =============================================
QUIZ SECTION (CSS-Only)
============================================= */
.quiz-container {
max-width: 750px;
margin: 0 auto;
}
.quiz-question {
background: var(--bg-glass);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
padding: 2rem;
margin-bottom: 2rem;
position: relative;
overflow: hidden;
}
.quiz-number {
position: absolute;
top: -12px;
right: 20px;
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: white;
width: 45px;
height: 45px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 1.1rem;
box-shadow: var(--shadow-md);
}
.quiz-text {
font-size: 1.2rem;
font-family: var(--font-arabic);
margin-bottom: 1.5rem;
color: var(--text-primary);
padding-top: 0.5rem;
}
.quiz-options {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.quiz-radio {
position: absolute;
opacity: 0;
pointer-events: none;
}
.quiz-label {
display: block;
padding: 1rem 1.5rem;
padding-right: 3.5rem;
background: rgba(255, 255, 255, 0.03);
border: 2px solid var(--border-color);
border-radius: var(--radius-md);
cursor: pointer;
transition: var(--transition-fast);
position: relative;
font-family: var(--font-arabic);
}
.quiz-label::before {
content: '';
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
width: 22px;
height: 22px;
border: 2px solid var(--border-color);
border-radius: 50%;
transition: var(--transition-fast);
}
.quiz-label:hover {
border-color: var(--primary);
background: rgba(139, 92, 246, 0.08);
}
.quiz-radio:checked + .quiz-label {
border-color: var(--primary);
background: rgba(139, 92, 246, 0.12);
}
.quiz-radio:checked + .quiz-label::before {
background: var(--primary);
border-color: var(--primary);
box-shadow: inset 0 0 0 3px var(--bg-dark);
}
/* Quiz Feedback */
.quiz-feedback {
margin-top: 1.25rem;
padding: 1rem 1.25rem;
border-radius: var(--radius-md);
display: none;
animation: feedbackPop 0.4s ease-out;
}
@keyframes feedbackPop {
0% { transform: scale(0.9); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.feedback-correct {
background: rgba(34, 197, 94, 0.15);
border: 1px solid rgba(34, 197, 94, 0.4);
color: var(--success);
}
.feedback-wrong {
background: rgba(239, 68, 68, 0.15);
border: 1px solid rgba(239, 68, 68, 0.4);
color: var(--danger);
}
/* Quiz 1 */
#q1a:checked ~ .q1-correct { display: block; }
#q1b:checked ~ .q1-wrong,
#q1c:checked ~ .q1-wrong { display: block; }
/* Quiz 2 */
#q2b:checked ~ .q2-correct { display: block; }
#q2a:checked ~ .q2-wrong,
#q2c:checked ~ .q2-wrong { display: block; }
/* Quiz 3 */
#q3c:checked ~ .q3-correct { display: block; }
#q3a:checked ~ .q3-wrong,
#q3b:checked ~ .q3-wrong { display: block; }
/* Confetti for correct answers */
.confetti-box {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
opacity: 0;
}
#q1a:checked ~ .confetti-box,
#q2b:checked ~ .confetti-box,
#q3c:checked ~ .confetti-box {
opacity: 1;
}
.confetti-piece {
position: absolute;
width: 10px;
height: 10px;
top: 0;
}
.confetti-piece:nth-child(1) { left: 10%; background: var(--primary); animation: confettiFall 1.8s ease-out forwards; animation-delay: 0s; border-radius: 50%; }
.confetti-piece:nth-child(2) { left: 20%; background: var(--secondary); animation: confettiFall 1.8s ease-out forwards; animation-delay: 0.1s; }
.confetti-piece:nth-child(3) { left: 30%; background: var(--accent); animation: confettiFall 1.8s ease-out forwards; animation-delay: 0.2s; border-radius: 50%; }
.confetti-piece:nth-child(4) { left: 40%; background: var(--warning); animation: confettiFall 1.8s ease-out forwards; animation-delay: 0.15s; }
.confetti-piece:nth-child(5) { left: 50%; background: var(--primary); animation: confettiFall 1.8s ease-out forwards; animation-delay: 0.25s; border-radius: 50%; }
.confetti-piece:nth-child(6) { left: 60%; background: var(--danger); animation: confettiFall 1.8s ease-out forwards; animation-delay: 0.05s; }
.confetti-piece:nth-child(7) { left: 70%; background: var(--secondary); animation: confettiFall 1.8s ease-out forwards; animation-delay: 0.3s; border-radius: 50%; }
.confetti-piece:nth-child(8) { left: 80%; background: var(--accent); animation: confettiFall 1.8s ease-out forwards; animation-delay: 0.12s; }
.confetti-piece:nth-child(9) { left: 90%; background: var(--warning); animation: confettiFall 1.8s ease-out forwards; animation-delay: 0.22s; border-radius: 50%; }
.confetti-piece:nth-child(10) { left: 15%; background: var(--primary); animation: confettiFall 1.8s ease-out forwards; animation-delay: 0.18s; }
@keyframes confettiFall {
0% {
transform: translateY(-20px) rotate(0deg) scale(1);
opacity: 1;
}
100% {
transform: translateY(350px) rotate(720deg) scale(0.5);
opacity: 0;
}
}
/* =============================================
TIPS SECTION
============================================= */
.tips-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
}
.tip-card {
background: var(--bg-glass);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
padding: 1.75rem;
position: relative;
overflow: hidden;
transition: var(--transition-normal);
}
.tip-card::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 100px;
background: linear-gradient(135deg, var(--primary), transparent);
opacity: 0.1;
border-radius: 0 0 0 100%;
}
.tip-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-md);
border-color: var(--primary);
}
.tip-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 35px;
height: 35px;
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: white;
border-radius: 50%;
font-weight: 700;
font-size: 0.95rem;
margin-bottom: 1rem;
}
.tip-title {
font-size: 1.15rem;
margin-bottom: 0.5rem;
color: var(--text-primary);
}
.tip-desc {
color: var(--text-secondary);
font-size: 0.95rem;
}
/* =============================================
MISTAKES SECTION
============================================= */
.mistake-card {
background: var(--bg-glass);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
padding: 1.75rem;
margin-bottom: 1.5rem;
display: grid;
grid-template-columns: auto 1fr;
gap: 1.5rem;
align-items: flex-start;
transition: var(--transition-normal);
}
.mistake-card:hover {
border-color: rgba(239, 68, 68, 0.4);
box-shadow: 0 0 25px rgba(239, 68, 68, 0.1);
}
.mistake-icon {
font-size: 2.5rem;
}
.mistake-title {
color: var(--danger);
margin-bottom: 0.5rem;
font-size: 1.1rem;
}
.mistake-desc {
color: var(--text-secondary);
margin-bottom: 1rem;
}
.mistake-fix {
background: rgba(34, 197, 94, 0.1);
border: 1px solid rgba(34, 197, 94, 0.25);
border-radius: var(--radius-sm);
padding: 1rem;
}
.mistake-fix-title {
color: var(--success);
font-weight: 600;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
/* =============================================
SUMMARY CARD
============================================= */
.summary-card {
background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(6, 182, 212, 0.15));
border: 2px solid rgba(139, 92, 246, 0.3);
border-radius: var(--radius-xl);
padding: 3rem;
position: relative;
overflow: hidden;
}
.summary-card::before {
content: '📋';
position: absolute;
top: -40px;
left: -40px;
font-size: 180px;
opacity: 0.05;
}
.summary-header {
text-align: center;
margin-bottom: 2.5rem;
}
.summary-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 2rem;
}
.summary-item {
background: rgba(255, 255, 255, 0.05);
border-radius: var(--radius-md);
padding: 1.5rem;
}
.summary-item-title {
color: var(--secondary);
font-size: 1.1rem;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.summary-list {
list-style: none;
}
.summary-list li {
padding: 0.5rem 0;
padding-right: 1.75rem;
position: relative;
color: var(--text-secondary);
}
.summary-list li::before {
content: '✓';
position: absolute;
right: 0;
color: var(--accent);
font-weight: 700;
}
/* =============================================
TOOLTIP (CSS-Only)
============================================= */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 2px dotted var(--primary);
cursor: help;
}
.tooltip::after {
content: attr(data-tip);
position: absolute;
bottom: calc(100% + 10px);
left: 50%;
transform: translateX(-50%);
background: var(--bg-darker);
color: var(--text-primary);
padding: 0.75rem 1rem;
border-radius: var(--radius-sm);
font-size: 0.85rem;
white-space: nowrap;
max-width: 280px;
white-space: normal;
text-align: center;
opacity: 0;
visibility: hidden;
transition: var(--transition-fast);
z-index: 100;
border: 1px solid var(--border-color);
box-shadow: var(--shadow-md);
}
.tooltip::before {
content: '';
position: absolute;
bottom: calc(100% + 2px);
left: 50%;
transform: translateX(-50%);
border: 8px solid transparent;
border-top-color: var(--bg-darker);
opacity: 0;
visibility: hidden;
transition: var(--transition-fast);
}
.tooltip:hover::after,
.tooltip:hover::before {
opacity: 1;
visibility: visible;
}
/* =============================================
FOOTER
============================================= */
.footer {
background: rgba(2, 6, 23, 0.6);
border-top: 1px solid var(--border-color);
padding: 3rem 0;
margin-top: 4rem;
}
.footer-content {
text-align: center;
}
.footer-logo {
font-family: var(--font-arabic);
font-size: 1.6rem;
font-weight: 700;
background: linear-gradient(135deg, var(--primary), var(--secondary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 1rem;
}
.footer-text {
color: var(--text-muted);
font-size: 0.95rem;
margin-bottom: 1.5rem;
}
.footer-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--bg-glass);
border: 1px solid var(--border-color);
border-radius: var(--radius-full);
padding: 0.6rem 1.5rem;
font-size: 0.85rem;
color: var(--text-secondary);
}
/* =============================================
RESPONSIVE DESIGN
============================================= */
@media (max-width: 768px) {
.nav-links {
display: none;
}
.hero {
padding: 5rem 1rem 3rem;
}
.hero-phrase {
font-size: 1rem;
}
.hero-phrase-box {
padding: 1.75rem;
}
.hero-stats {
gap: 2rem;
}
.section {
padding: 3.5rem 0;
}
.glass-card {
padding: 1.5rem;
}
.diagram-row {
flex-direction: column;
}
.diagram-connector {
width: 3px;
height: 40px;
}
.tab-label {
padding: 0.75rem 1rem;
font-size: 0.9rem;
}
.mistake-card {
grid-template-columns: 1fr;
text-align: center;
}
.summary-card {
padding: 2rem 1.5rem;
}
}
@media (max-width: 480px) {
html {
font-size: 14px;
}
.term {
display: block;
margin: 0.4rem auto;
max-width: fit-content;
}
.tabs-nav {
flex-direction: column;
}
.tab-label {
border-radius: var(--radius-md);
border: 1px solid var(--border-color);
}
.tab-panel {
border-radius: var(--radius-md);
}
}
/* =============================================
SCROLL ANIMATIONS (Pure CSS)
============================================= */
.fade-up {
animation: fadeUp 0.8s ease-out both;
}
.fade-up:nth-child(1) { animation-delay: 0.1s; }
.fade-up:nth-child(2) { animation-delay: 0.2s; }
.fade-up:nth-child(3) { animation-delay: 0.3s; }
.fade-up:nth-child(4) { animation-delay: 0.4s; }
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Achievement Badge */
.achievement {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: linear-gradient(135deg, var(--success), #059669);
color: white;
padding: 0.5rem 1.25rem;
border-radius: var(--radius-full);
font-size: 0.9rem;
font-weight: 600;
box-shadow: var(--shadow-sm);
}
/* Progress indicator */
.progress-dots {
display: flex;
justify-content: center;
gap: 0.75rem;
margin: 2rem 0;
}
.progress-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--border-color);
transition: var(--transition-normal);
}
.progress-dot.active {
background: var(--primary);
box-shadow: 0 0 10px var(--glow-primary);
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="navbar">
<div class="container nav-content">
<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="#examples">أمثلة</a></li>
<li><a href="#quiz">اختبار</a></li>
</ul>
</div>
</nav>
<!-- Hero Section -->
<header class="hero" id="top">
<div class="floating-icons">
<span class="float-icon">📖</span>
<span class="float-icon">✨</span>
<span class="float-icon">🎯</span>
<span class="float-icon">💡</span>
<span class="float-icon">🌟</span>
<span class="float-icon">📝</span>
</div>
<div class="hero-content">
<span class="hero-badge">🎓 درس تفاعلي في الصرف العربي</span>
<h1 class="hero-title">
<span class="gradient-text">المصدر في اللغة العربية</span>
</h1>
<p style="font-size: 1.2rem; color: var(--text-secondary); margin-bottom: 1rem;">
الحدث المجرد عن الزمان — أصل المشتقات وجوهر المعنى
</p>
<div class="hero-phrase-box">
<p class="hero-phrase">
المصدر هو
<span class="term term-event">حدث</span>
<span class="term term-abstract">مجرد</span>
عن
<span class="term term-time">الزمان</span>
ولكل مصدر فعل إذ هو في الحقيقة حدث وهو الشيء المشترك ما بين المصدر والفعل ومثاله
<span class="term term-verb">آمَنَ</span>
هو فعل ماضٍ أما مصدره فهو
<span class="term term-masdar">الإيمان</span>
— الإيمان مصدر آمن وهو حدث مجرد عن الزمان
</p>
</div>
<div class="hero-stats">
<div class="stat">
<div class="stat-value">∞</div>
<div class="stat-label">مصادر في العربية</div>
</div>
<div class="stat">
<div class="stat-value">1</div>
<div class="stat-label">عنصر مشترك (الحدث)</div>
</div>
<div class="stat">
<div class="stat-value">0</div>
<div class="stat-label">زمان في المصدر</div>
</div>
</div>
</div>
</header>
<!-- What Is It Section -->
<section class="section" id="what">
<div class="container">
<div class="section-header">
<span class="section-icon">🤔</span>
<h2 class="section-title">ما هو المصدر؟</h2>
<p class="section-subtitle">فهم الأساس الصرفي للمصادر العربية</p>
</div>
<div class="glass-card" style="margin-bottom: 2rem;">
<p class="arabic-text" style="font-size: 1.25rem; color: var(--text-primary); margin-bottom: 1.5rem;">
المصدر هو <strong>الاسم الدال على الحدث مجرداً من الزمان</strong>. فهو يحمل معنى الفعل دون أن يرتبط بزمن ماضٍ أو حاضر أو مستقبل.
</p>
<p style="color: var(--text-secondary); font-size: 1.1rem;">
تخيل أن الحدث هو <strong>الجوهر المشترك</strong> بين الفعل والمصدر — كلاهما يدل على نفس الفعل، لكن الفعل يضيف بُعد الزمان، بينما المصدر يبقى مجرداً خالصاً.
</p>
</div>
<div class="concepts-grid">
<div class="concept-card fade-up">
<div class="concept-icon">⚡</div>
<h3 class="concept-title">الحدث (Event)</h3>
<p class="concept-desc">
الفعل أو العمل الذي يُشير إليه اللفظ. مثل: الكتابة، القراءة، الإيمان، الصلاة...
</p>
</div>
<div class="concept-card fade-up">
<div class="concept-icon">🚫</div>
<h3 class="concept-title">التجريد من الزمان</h3>
<p class="concept-desc">
المصدر لا يدل على وقت حدوث الفعل. "الإيمان" لا يخبرك متى آمن الشخص.
</p>
</div>
<div class="concept-card fade-up">
<div class="concept-icon">🔗</div>
<h3 class="concept-title">العلاقة بالفعل</h3>
<p class="concept-desc">
لكل فعل مصدر، ولكل مصدر فعل. هما وجهان لعملة واحدة — الحدث.
</p>
</div>
</div>
<!-- Visual Diagram -->
<div class="diagram-container">
<h3 class="text-center" style="margin-bottom: 2rem;">🎨 العلاقة بين المصدر والفعل</h3>
<div class="diagram">
<div class="diagram-row">
<div class="diagram-box masdar">
<div class="diagram-box-title">الإيمان</div>
<div class="diagram-box-subtitle">المصدر (حدث مجرد)</div>
</div>
<span class="diagram-connector"></span>
<div class="diagram-box shared">
<div class="diagram-box-title">الحدث</div>
<div class="diagram-box-subtitle">العنصر المشترك</div>
</div>
<span class="diagram-connector"></span>
<div class="diagram-box verb">
<div class="diagram-box-title">آمَنَ</div>
<div class="diagram-box-subtitle">الفعل (حدث + زمان)</div>
</div>
</div>
<div class="diagram-arrow">⬇️</div>
<div style="text-align: center; max-width: 500px;">
<p style="color: var(--text-secondary);">
<strong style="color: var(--accent);">المصدر</strong> = الحدث فقط
<br>
<strong style="color: var(--danger);">الفعل</strong> = الحدث + الزمان
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Why Section -->
<section class="section" id="why">
<div class="container">
<div class="section-header">
<span class="section-icon">💡</span>
<h2 class="section-title">لماذا نتعلم المصدر؟</h2>
<p class="section-subtitle">أهمية فهم المصادر في إتقان العربية</p>
</div>
<div class="accordion">
<details open>
<summary>🏛️ المصدر أصل المشتقات</summary>
<div class="details-content">
<p>يرى كثير من النحاة أن المصدر هو أصل الكلمات المشتقة. فمن المصدر "كِتابة" نشتق: كَتَبَ، يَكتُب، كاتِب، مكتوب، مَكتَب... فهم المصدر يفتح لك باب فهم عائلة الكلمات بأكملها.</p>
</div>
</details>
<details>
<summary>📚 فهم القرآن والأحاديث</summary>
<div class="details-content">
<p>النصوص الدينية تستخدم المصادر بكثرة للتعبير عن المعاني المجردة. مثل: "الإيمان"، "الإسلام"، "الإحسان"، "التوحيد". فهم المصدر يعمّق فهمك للنصوص الشرعية.</p>
</div>
</details>
<details>
<summary>✍️ الدقة في التعبير</summary>
<div class="details-content">
<p>استخدام المصدر يعطي معنى العمومية والإطلاق. عندما تقول "أحب القراءة" فأنت تتحدث عن الفعل بشكل مطلق، بينما "قرأتُ" تحدد زمناً معيناً.</p>
</div>
</details>
<details>
<summary>🎯 إتقان الإعراب</summary>
<div class="details-content">
<p>المصدر يُعرب إعراب الأسماء (رفع، نصب، جر)، بينما الفعل له إعرابه الخاص. معرفة الفرق ضرورية للإعراب الصحيح.</p>
</div>
</details>
<details>
<summary>🌟 البلاغة والأدب</summary>
<div class="details-content">
<p>الأدباء يستخدمون المصادر للتعبير عن المعاني السامية والمجردة. المصدر يعطي إحساساً بالخلود والاستمرارية لا يعطيه الفعل المقيد بالزمان.</p>
</div>
</details>
</div>
</div>
</section>
<!-- How It Works Section -->
<section class="section" id="how">
<div class="container">
<div class="section-header">
<span class="section-icon">⚙️</span>
<h2 class="section-title">كيف يعمل المصدر؟</h2>
<p class="section-subtitle">شرح تفصيلي مع أمثلة توضيحية</p>
</div>
<!-- CSS-Only Tabs -->
<div class="tabs-wrapper">
<input type="radio" name="main-tabs" id="tab-masdar" class="tab-input" checked>
<label for="tab-masdar" class="tab-label">📖 المصدر</label>
<input type="radio" name="main-tabs" id="tab-verb" class="tab-input">
<label for="tab-verb" class="tab-label">⚡ الفعل</label>
Live Preview