دلالات الفعل
📦 النحو الواضح
✨ 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@400;500;700&display=swap" rel="stylesheet">
<style>
/* ============================================
CSS VARIABLES & ROOT SETTINGS
============================================ */
:root {
--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
--accent-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
--success-gradient: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
--warning-gradient: linear-gradient(135deg, #f2994a 0%, #f2c94c 100%);
--error-gradient: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);
--bg-dark: #0f0f1a;
--bg-card: rgba(255, 255, 255, 0.05);
--bg-glass: rgba(255, 255, 255, 0.1);
--text-primary: #ffffff;
--text-secondary: #b4b4c4;
--text-muted: #6b6b7b;
--border-color: rgba(255, 255, 255, 0.1);
--radius-sm: 8px;
--radius-md: 16px;
--radius-lg: 24px;
--radius-xl: 32px;
--shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.1);
--shadow-md: 0 10px 30px rgba(0, 0, 0, 0.2);
--shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.3);
--shadow-glow: 0 0 40px rgba(102, 126, 234, 0.3);
--transition-fast: 0.2s ease;
--transition-normal: 0.3s ease;
--transition-slow: 0.5s ease;
}
/* ============================================
RESET & BASE STYLES
============================================ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
font-size: 16px;
}
body {
font-family: 'Tajawal', 'Amiri', sans-serif;
background: var(--bg-dark);
color: var(--text-primary);
line-height: 1.8;
min-height: 100vh;
overflow-x: hidden;
}
/* Background Animation */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(ellipse at 20% 20%, rgba(102, 126, 234, 0.15) 0%, transparent 50%),
radial-gradient(ellipse at 80% 80%, rgba(118, 75, 162, 0.15) 0%, transparent 50%),
radial-gradient(ellipse at 50% 50%, rgba(79, 172, 254, 0.1) 0%, transparent 50%);
pointer-events: none;
z-index: -1;
animation: bgPulse 10s ease-in-out infinite;
}
@keyframes bgPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
/* ============================================
TYPOGRAPHY
============================================ */
h1, h2, h3, h4, h5, h6 {
font-family: 'Amiri', serif;
font-weight: 700;
line-height: 1.4;
}
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 3vw, 1.75rem); }
p {
margin-bottom: 1rem;
color: var(--text-secondary);
}
a {
color: #4facfe;
text-decoration: none;
transition: var(--transition-fast);
}
a:hover {
color: #00f2fe;
text-decoration: underline;
}
/* ============================================
UTILITY CLASSES
============================================ */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1.5rem;
}
.text-center { text-align: center; }
.text-gradient {
background: var(--primary-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.highlight {
background: var(--accent-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 700;
}
.arabic-text {
font-family: 'Amiri', serif;
font-size: 1.3em;
line-height: 2;
}
/* ============================================
GLASSMORPHISM CARD
============================================ */
.glass-card {
background: var(--bg-glass);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
padding: 2rem;
box-shadow: var(--shadow-md);
transition: var(--transition-normal);
}
.glass-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg), var(--shadow-glow);
border-color: rgba(102, 126, 234, 0.3);
}
/* ============================================
NAVIGATION
============================================ */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: rgba(15, 15, 26, 0.9);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border-color);
padding: 1rem 0;
}
.nav-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.nav-logo {
font-family: 'Amiri', serif;
font-size: 1.5rem;
font-weight: 700;
background: var(--primary-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.nav-links {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
list-style: none;
}
.nav-links a {
color: var(--text-secondary);
font-size: 0.9rem;
padding: 0.5rem;
border-radius: var(--radius-sm);
transition: var(--transition-fast);
}
.nav-links a:hover {
color: var(--text-primary);
background: var(--bg-glass);
text-decoration: none;
}
/* ============================================
HERO SECTION
============================================ */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 6rem 1.5rem 4rem;
position: relative;
overflow: hidden;
}
.hero-content {
text-align: center;
max-width: 900px;
animation: fadeInUp 1s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.hero-badge {
display: inline-block;
background: var(--bg-glass);
border: 1px solid var(--border-color);
border-radius: 50px;
padding: 0.5rem 1.5rem;
font-size: 0.9rem;
color: var(--text-secondary);
margin-bottom: 2rem;
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.4); }
50% { box-shadow: 0 0 0 15px rgba(102, 126, 234, 0); }
}
.hero-title {
margin-bottom: 1.5rem;
text-shadow: 0 0 40px rgba(102, 126, 234, 0.5);
}
.hero-phrase {
font-family: 'Amiri', serif;
font-size: clamp(1.2rem, 3vw, 1.8rem);
line-height: 2.2;
background: var(--bg-glass);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
padding: 2rem;
margin: 2rem 0;
position: relative;
overflow: hidden;
}
.hero-phrase::before {
content: '❝';
position: absolute;
top: -20px;
right: 20px;
font-size: 6rem;
opacity: 0.1;
color: #667eea;
}
.hero-phrase .term {
display: inline-block;
padding: 0.2rem 0.8rem;
margin: 0.2rem;
border-radius: var(--radius-sm);
font-weight: 700;
animation: termGlow 3s ease-in-out infinite;
}
.hero-phrase .term-event {
background: rgba(79, 172, 254, 0.2);
color: #4facfe;
border: 1px solid rgba(79, 172, 254, 0.3);
}
.hero-phrase .term-time {
background: rgba(240, 147, 251, 0.2);
color: #f093fb;
border: 1px solid rgba(240, 147, 251, 0.3);
}
.hero-phrase .term-masdar {
background: rgba(56, 239, 125, 0.2);
color: #38ef7d;
border: 1px solid rgba(56, 239, 125, 0.3);
}
@keyframes termGlow {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.2); }
}
.hero-stats {
display: flex;
justify-content: center;
gap: 3rem;
margin-top: 3rem;
flex-wrap: wrap;
}
.stat-item {
text-align: center;
}
.stat-number {
font-size: 2.5rem;
font-weight: 700;
background: var(--primary-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.stat-label {
font-size: 0.9rem;
color: var(--text-muted);
}
/* Floating Elements */
.floating-elements {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
overflow: hidden;
}
.float-item {
position: absolute;
font-size: 2rem;
opacity: 0.3;
animation: float 6s ease-in-out infinite;
}
.float-item:nth-child(1) { top: 10%; left: 10%; animation-delay: 0s; }
.float-item:nth-child(2) { top: 20%; right: 15%; animation-delay: 1s; }
.float-item:nth-child(3) { bottom: 30%; left: 20%; animation-delay: 2s; }
.float-item:nth-child(4) { bottom: 20%; right: 10%; animation-delay: 3s; }
.float-item:nth-child(5) { top: 50%; left: 5%; animation-delay: 4s; }
@keyframes float {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-20px) rotate(10deg); }
}
/* ============================================
PROGRESS BAR
============================================ */
.progress-container {
position: fixed;
top: 60px;
left: 0;
right: 0;
height: 4px;
background: var(--bg-card);
z-index: 999;
}
.progress-bar {
height: 100%;
background: var(--primary-gradient);
width: 0%;
transition: width 0.1s linear;
}
/* ============================================
SECTION STYLES
============================================ */
.section {
padding: 5rem 0;
position: relative;
}
.section-header {
text-align: center;
margin-bottom: 3rem;
}
.section-icon {
font-size: 3rem;
margin-bottom: 1rem;
display: block;
animation: bounce 2s ease-in-out infinite;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.section-title {
margin-bottom: 0.5rem;
}
.section-subtitle {
color: var(--text-muted);
font-size: 1.1rem;
}
/* ============================================
WHAT IS IT SECTION
============================================ */
.concept-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.concept-card {
background: var(--bg-glass);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
padding: 2rem;
text-align: center;
transition: var(--transition-normal);
position: relative;
overflow: hidden;
}
.concept-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--primary-gradient);
transform: scaleX(0);
transition: var(--transition-normal);
}
.concept-card:hover::before {
transform: scaleX(1);
}
.concept-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-lg);
}
.concept-icon {
font-size: 3rem;
margin-bottom: 1rem;
}
.concept-title {
font-size: 1.3rem;
margin-bottom: 0.5rem;
color: var(--text-primary);
}
.concept-desc {
color: var(--text-secondary);
font-size: 0.95rem;
}
/* ============================================
COMPARISON TABLE
============================================ */
.comparison-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.5rem;
text-align: center;
border-bottom: 1px solid var(--border-color);
}
.comparison-table th {
background: rgba(102, 126, 234, 0.2);
font-weight: 700;
font-size: 1.1rem;
}
.comparison-table tr:hover {
background: rgba(255, 255, 255, 0.05);
}
.comparison-table .check {
color: #38ef7d;
font-size: 1.5rem;
}
.comparison-table .cross {
color: #f45c43;
font-size: 1.5rem;
}
/* ============================================
ACCORDION / DETAILS SECTIONS
============================================ */
.accordion-container {
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(102, 126, 234, 0.5);
}
details[open] {
box-shadow: var(--shadow-md);
}
summary {
padding: 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);
}
summary::-webkit-details-marker {
display: none;
}
summary::before {
content: '▶';
font-size: 0.8rem;
transition: var(--transition-fast);
color: #667eea;
}
details[open] summary::before {
transform: rotate(90deg);
}
summary:hover {
background: rgba(255, 255, 255, 0.05);
}
.details-content {
padding: 0 1.5rem 1.5rem;
animation: slideDown 0.3s ease-out;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ============================================
TABS (CSS-Only with Radio Buttons)
============================================ */
.tabs-container {
margin: 2rem 0;
}
.tabs-nav {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 1rem;
}
.tab-radio {
position: absolute;
opacity: 0;
pointer-events: none;
}
.tab-label {
padding: 1rem 2rem;
background: var(--bg-glass);
border: 1px solid var(--border-color);
border-radius: var(--radius-md) var(--radius-md) 0 0;
cursor: pointer;
font-weight: 500;
transition: var(--transition-fast);
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.tab-label:hover {
background: rgba(102, 126, 234, 0.2);
}
.tab-radio:checked + .tab-label {
background: var(--primary-gradient);
color: white;
border-color: transparent;
}
.tab-panels {
position: relative;
min-height: 300px;
}
.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.3s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
#tab1:checked ~ .tab-panels .panel-1,
#tab2:checked ~ .tab-panels .panel-2,
#tab3:checked ~ .tab-panels .panel-3 {
display: block;
}
/* ============================================
CODE BLOCKS
============================================ */
.code-block {
background: #1a1a2e;
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
overflow: hidden;
margin: 1.5rem 0;
}
.code-header {
background: rgba(102, 126, 234, 0.2);
padding: 0.75rem 1rem;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--border-color);
}
.code-title {
font-size: 0.9rem;
color: var(--text-secondary);
display: flex;
align-items: center;
gap: 0.5rem;
}
.code-content {
padding: 1.5rem;
font-family: 'Courier New', monospace;
font-size: 1rem;
line-height: 1.8;
overflow-x: auto;
direction: rtl;
}
.code-line {
display: block;
padding: 0.25rem 0;
}
.code-comment {
color: #6b6b7b;
font-style: italic;
}
.code-keyword {
color: #f093fb;
}
.code-string {
color: #38ef7d;
}
.code-number {
color: #4facfe;
}
/* ============================================
QUIZ SECTION (CSS-Only)
============================================ */
.quiz-container {
max-width: 700px;
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;
}
.quiz-number {
position: absolute;
top: -15px;
right: 20px;
background: var(--primary-gradient);
color: white;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
}
.quiz-text {
font-size: 1.2rem;
margin-bottom: 1.5rem;
color: var(--text-primary);
}
.quiz-options {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.quiz-option {
position: absolute;
opacity: 0;
pointer-events: none;
}
.quiz-label {
display: block;
padding: 1rem 1.5rem;
background: rgba(255, 255, 255, 0.05);
border: 2px solid var(--border-color);
border-radius: var(--radius-md);
cursor: pointer;
transition: var(--transition-fast);
position: relative;
padding-right: 3rem;
}
.quiz-label::before {
content: '';
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
border: 2px solid var(--border-color);
border-radius: 50%;
transition: var(--transition-fast);
}
.quiz-label:hover {
border-color: rgba(102, 126, 234, 0.5);
background: rgba(102, 126, 234, 0.1);
}
.quiz-option:checked + .quiz-label {
border-color: #667eea;
}
.quiz-option:checked + .quiz-label::before {
background: #667eea;
border-color: #667eea;
}
.quiz-feedback {
margin-top: 1rem;
padding: 1rem;
border-radius: var(--radius-md);
display: none;
animation: fadeIn 0.3s ease-out;
}
.feedback-correct {
background: rgba(56, 239, 125, 0.2);
border: 1px solid rgba(56, 239, 125, 0.3);
color: #38ef7d;
}
.feedback-incorrect {
background: rgba(244, 92, 67, 0.2);
border: 1px solid rgba(244, 92, 67, 0.3);
color: #f45c43;
}
/* Quiz 1 Feedback */
#q1-correct:checked ~ .feedback-q1-correct { display: block; }
#q1-wrong1:checked ~ .feedback-q1-wrong,
#q1-wrong2:checked ~ .feedback-q1-wrong { display: block; }
/* Quiz 2 Feedback */
#q2-correct:checked ~ .feedback-q2-correct { display: block; }
#q2-wrong1:checked ~ .feedback-q2-wrong,
#q2-wrong2:checked ~ .feedback-q2-wrong { display: block; }
/* Quiz 3 Feedback */
#q3-correct:checked ~ .feedback-q3-correct { display: block; }
#q3-wrong1:checked ~ .feedback-q3-wrong,
#q3-wrong2:checked ~ .feedback-q3-wrong { display: block; }
/* Confetti Animation for Correct Answers */
.confetti-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
opacity: 0;
}
#q1-correct:checked ~ .confetti-container,
#q2-correct:checked ~ .confetti-container,
#q3-correct:checked ~ .confetti-container {
opacity: 1;
}
.confetti {
position: absolute;
width: 10px;
height: 10px;
border-radius: 2px;
}
.confetti:nth-child(1) { background: #667eea; top: 0; left: 10%; animation: confettiFall 1.5s ease-out forwards; animation-delay: 0s; }
.confetti:nth-child(2) { background: #f093fb; top: 0; left: 20%; animation: confettiFall 1.5s ease-out forwards; animation-delay: 0.1s; }
.confetti:nth-child(3) { background: #38ef7d; top: 0; left: 30%; animation: confettiFall 1.5s ease-out forwards; animation-delay: 0.2s; }
.confetti:nth-child(4) { background: #4facfe; top: 0; left: 40%; animation: confettiFall 1.5s ease-out forwards; animation-delay: 0.3s; }
.confetti:nth-child(5) { background: #f5576c; top: 0; left: 50%; animation: confettiFall 1.5s ease-out forwards; animation-delay: 0.4s; }
.confetti:nth-child(6) { background: #667eea; top: 0; left: 60%; animation: confettiFall 1.5s ease-out forwards; animation-delay: 0.5s; }
.confetti:nth-child(7) { background: #f093fb; top: 0; left: 70%; animation: confettiFall 1.5s ease-out forwards; animation-delay: 0.6s; }
.confetti:nth-child(8) { background: #38ef7d; top: 0; left: 80%; animation: confettiFall 1.5s ease-out forwards; animation-delay: 0.7s; }
.confetti:nth-child(9) { background: #4facfe; top: 0; left: 90%; animation: confettiFall 1.5s ease-out forwards; animation-delay: 0.8s; }
.confetti:nth-child(10) { background: #f5576c; top: 0; left: 95%; animation: confettiFall 1.5s ease-out forwards; animation-delay: 0.9s; }
@keyframes confettiFall {
0% {
transform: translateY(-20px) rotate(0deg);
opacity: 1;
}
100% {
transform: translateY(300px) rotate(720deg);
opacity: 0;
}
}
/* ============================================
TIPS CARDS
============================================ */
.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.5rem;
position: relative;
overflow: hidden;
transition: var(--transition-normal);
}
.tip-card::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 80px;
height: 80px;
background: var(--primary-gradient);
opacity: 0.1;
border-radius: 0 0 0 100%;
}
.tip-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
}
.tip-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
background: var(--primary-gradient);
color: white;
border-radius: 50%;
font-weight: 700;
font-size: 0.9rem;
margin-bottom: 1rem;
}
.tip-title {
font-size: 1.1rem;
margin-bottom: 0.5rem;
color: var(--text-primary);
}
.tip-desc {
color: var(--text-secondary);
font-size: 0.95rem;
}
/* ============================================
MISTAKES SECTION
============================================ */
.mistake-item {
background: var(--bg-glass);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
padding: 1.5rem;
margin-bottom: 1.5rem;
display: grid;
grid-template-columns: auto 1fr;
gap: 1.5rem;
align-items: start;
transition: var(--transition-normal);
}
.mistake-item:hover {
border-color: rgba(244, 92, 67, 0.3);
box-shadow: 0 0 20px rgba(244, 92, 67, 0.1);
}
.mistake-icon {
font-size: 2.5rem;
line-height: 1;
}
.mistake-content h4 {
color: #f45c43;
margin-bottom: 0.5rem;
}
.mistake-correct {
background: rgba(56, 239, 125, 0.1);
border: 1px solid rgba(56, 239, 125, 0.2);
border-radius: var(--radius-sm);
padding: 1rem;
margin-top: 1rem;
}
.mistake-correct h5 {
color: #38ef7d;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
/* ============================================
SUMMARY CARD
============================================ */
.summary-card {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
border: 2px solid rgba(102, 126, 234, 0.3);
border-radius: var(--radius-xl);
padding: 3rem;
position: relative;
overflow: hidden;
}
.summary-card::before {
content: '📋';
position: absolute;
top: -30px;
left: -30px;
font-size: 150px;
opacity: 0.05;
}
.summary-title {
text-align: center;
margin-bottom: 2rem;
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
}
.summary-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.summary-item {
background: rgba(255, 255, 255, 0.05);
border-radius: var(--radius-md);
padding: 1.5rem;
}
.summary-item h4 {
color: #4facfe;
margin-bottom: 0.75rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.summary-item ul {
list-style: none;
padding: 0;
}
.summary-item li {
padding: 0.5rem 0;
padding-right: 1.5rem;
position: relative;
color: var(--text-secondary);
}
.summary-item li::before {
content: '✓';
position: absolute;
right: 0;
color: #38ef7d;
}
/* ============================================
TOOLTIP (CSS-Only)
============================================ */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 2px dotted #667eea;
cursor: help;
}
.tooltip::after {
content: attr(data-tooltip);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%) translateY(-10px);
background: #1a1a2e;
color: white;
padding: 0.75rem 1rem;
border-radius: var(--radius-sm);
font-size: 0.85rem;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: var(--transition-fast);
z-index: 100;
border: 1px solid var(--border-color);
max-width: 250px;
white-space: normal;
text-align: center;
}
.tooltip::before {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border: 8px solid transparent;
border-top-color: #1a1a2e;
opacity: 0;
visibility: hidden;
transition: var(--transition-fast);
}
.tooltip:hover::after,
.tooltip:hover::before {
opacity: 1;
visibility: visible;
}
/* ============================================
FOOTER
============================================ */
.footer {
background: rgba(0, 0, 0, 0.3);
border-top: 1px solid var(--border-color);
padding: 3rem 0;
margin-top: 4rem;
}
.footer-content {
text-align: center;
}
.footer-logo {
font-family: 'Amiri', serif;
font-size: 1.5rem;
background: var(--primary-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 1rem;
}
.footer-text {
color: var(--text-muted);
font-size: 0.9rem;
}
.footer-badge {
display: inline-block;
background: var(--bg-glass);
border: 1px solid var(--border-color);
border-radius: 50px;
padding: 0.5rem 1.5rem;
margin-top: 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;
padding: 1.5rem;
}
.hero-stats {
gap: 1.5rem;
}
.section {
padding: 3rem 0;
}
.glass-card {
padding: 1.5rem;
}
.tab-label {
padding: 0.75rem 1rem;
font-size: 0.9rem;
}
.summary-card {
padding: 2rem 1.5rem;
}
.mistake-item {
grid-template-columns: 1fr;
text-align: center;
}
}
@media (max-width: 480px) {
html {
font-size: 14px;
}
.hero-phrase .term {
display: block;
margin: 0.5rem auto;
max-width: fit-content;
}
.tabs-nav {
flex-direction: column;
}
.tab-label {
border-radius: var(--radius-md);
}
}
/* ============================================
ANIMATIONS ON SCROLL (CSS-Only Approximation)
============================================ */
.fade-in-section {
animation: fadeInUp 0.8s ease-out both;
}
.fade-in-section:nth-child(2) { animation-delay: 0.1s; }
.fade-in-section:nth-child(3) { animation-delay: 0.2s; }
.fade-in-section:nth-child(4) { animation-delay: 0.3s; }
.fade-in-section:nth-child(5) { animation-delay: 0.4s; }
/* Achievement Badge Animation */
.achievement {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--success-gradient);
color: white;
padding: 0.5rem 1rem;
border-radius: 50px;
font-size: 0.9rem;
font-weight: 600;
animation: achievementPop 0.5s ease-out;
}
@keyframes achievementPop {
0% { transform: scale(0); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
/* Decorative Elements */
.decoration-circle {
position: absolute;
border-radius: 50%;
background: var(--primary-gradient);
opacity: 0.1;
pointer-events: none;
}
.decoration-circle-1 {
width: 300px;
height: 300px;
top: -150px;
right: -150px;
}
.decoration-circle-2 {
width: 200px;
height: 200px;
bottom: -100px;
left: -100px;
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="nav">
<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-elements">
<span class="float-item">📖</span>
<span class="float-item">✨</span>
<span class="float-item">🎯</span>
<span class="float-item">💡</span>
<span class="float-item">🌟</span>
</div>
<div class="hero-content">
<span class="hero-badge">🎓 درس تفاعلي في النحو العربي</span>
<h1 class="hero-title">
<span class="text-gradient">دلالات الفعل في اللغة العربية</span>
</h1>
<div class="hero-phrase arabic-text">
من دلالات الفعل أنه يدل على
<span class="term term-event">حدث</span>
و
<span class="term term-time">زمان</span>
وهذا هو الفارق بينه وبين
<span class="term term-masdar">المصدر</span>.
فللمصدر أحكامه الخاصة
</div>
<div class="hero-stats">
<div class="stat-item">
<div class="stat-number">2</div>
<div class="stat-label">دلالتان أساسيتان</div>
</div>
<div class="stat-item">
<div class="stat-number">3</div>
<div class="stat-label">أزمنة الفعل</div>
</div>
<div class="stat-item">
<div class="stat-number">∞</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">
<p class="arabic-text" style="font-size: 1.2rem; color: var(--text-primary); margin-bottom: 2rem;">
الفعل في اللغة العربية ليس مجرد كلمة تدل على حدث، بل هو <strong>وحدة لغوية مزدوجة الدلالة</strong> تحمل في طياتها معنيين متلازمين لا ينفصلان.
</p>
<div class="concept-grid">
<div class="concept-card">
<div class="concept-icon">⚡</div>
<h3 class="concept-title">الدلالة على الحدث</h3>
<p class="concept-desc">
كل فعل يشير إلى حدث أو فعل معين يقوم به الفاعل. مثل: الكتابة، القراءة، الأكل، النوم...
</p>
</div>
<div class="concept-card">
<div class="concept-icon">⏰</div>
<h3 class="concept-title">الدلالة على الزمان</h3>
<p class="concept-desc">
كل فعل يحدد زمن وقوع الحدث: ماضٍ، حاضر، أو مستقبل. وهذا ما يميزه عن المصدر.
</p>
</div>
<div class="concept-card">
<div class="concept-icon">📝</div>
<h3 class="concept-title">الفرق مع المصدر</h3>
<p class="concept-desc">
المصدر يدل على الحدث فقط دون زمان. فـ"كتابة" تدل على الحدث، لكن "كَتَبَ" تدل على حدث في الماضي.
</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-container">
<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>
</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-container">
<input type="radio" name="tabs" id="tab1" class="tab-radio" checked>
<label for="tab1" class="tab-label">📖 الفعل الماضي</label>
<input type="radio" name="tabs" id="tab2" class="tab-radio">
<label for="tab2" class="tab-label">🔄 الفعل المضارع</label>
<input type="radio" name="tabs" id="tab3" class="tab-radio">
<label for="tab3" class="tab-label">👆 فعل الأمر</label>
<div class="tab-panels">
<div class="tab-panel panel-1">
<h3 style="color: var(--text-primary); margin-bottom: 1rem;">الفعل الماضي ⏪</h3>
<p>يدل على حدث وقع وانتهى في زمن مضى.</p>
<div class="code-block">
<div class="code-header">
<span class="code-title">📝 أمثلة</span>
</div>
<div class="code-content">
<span class="code-line"><span class="code-keyword">كَتَبَ</span> ← حدث: الكتابة + زمن: الماضي</span>
<span class="code-line"><span class="code-keyword">قَرَأَ</span> ← حدث: القراءة + زمن: الماضي</span>
<span class="code-line"><span class="code-keyword">ذَهَبَ</span> ← حدث: الذهاب + زمن: الماضي</span>
</div>
</div>
<p style="margin-top: 1rem;"><strong>علامته:</strong> قبول تاء التأنيث الساكنة (كَتَبَتْ) وتاء الفاعل (كَتَبْتُ)</p>
</div>
<div class="tab-panel panel-2">
<h3 style="color: var(--text-primary); margin-bottom: 1rem;">الفعل المضارع 🔄</h3>
<p>يدل على حدث يقع في الحاضر أو المستقبل.</p>
<div class="code-block">
<div class="code-header">
<span class="code-title">📝 أمثلة</span>
</div>
<div class="code-content">
<span class="code-line"><span class="code-keyword">يَكْتُبُ</span> ← حدث: الكتابة + زمن: الحاضر/المستقبل</span>
<span class="code-line"><span class="code-keyword">يَقْرَأُ</span> ← حدث: القراءة + زمن: الحاضر/المستقبل</span>
<span class="code-line"><span class="code-keyword">يَذْهَبُ</span> ← حدث: الذهاب + زمن: الحاضر/المستقبل</span>
</div>
</div>
<p style="margin-top: 1rem;"><strong>علامته:</strong> يبدأ بأحد حروف المضارعة (أ، ن، ي، ت) ويقبل "لم" و"سوف"</p>
</div>
<div class="tab-panel panel-3">
<h3 style="color: var(--text-primary); margin-bottom: 1rem;">فعل الأمر 👆</h3>
<p>يدل على طلب حدوث الفعل في المستقبل.</p>
<div class="code-block">
<div class="code-header">
<span class="code-title">📝 أمثلة</span>
</div>
<div class="code-content">
<span class="code-line"><span class="code-keyword">اُكْتُبْ</span> ← حدث: الكتابة + زمن: المستقبل (طلب)</span>
<span class="code-line"><span class="code-keyword">اِقْرَأْ</span> ← حدث: القراءة + زمن: المستقبل (طلب)</span>
<span class="code-line"><span class="code-keyword">اِذْهَبْ</span> ← حدث: الذهاب + زمن: المستقبل (طلب)</span>
</div>
</div>
<p style="margin-top: 1rem;"><strong>علامته:</strong> يدل على الطلب ويقبل ياء المخاطبة (اكتبي)</p>
</div>
</div>
</div>
<!-- Comparison Table -->
<h3 style="text-align: center; margin: 3rem 0 1.5rem;">📊 جدول المقارنة: الفعل vs المصدر</h3>
<div class="comparison-wrapper">
<table class="comparison-table">
<thead>
<tr>
<th>الخاصية</th>
<th>الفعل</th>
<th>المصدر</th>
</tr>
</thead>
<tbody>
<tr>
<td>الدلالة على الحدث</td>
<td><span class="check">✓</span></td>
<td><span class="check">✓</span></td>
</tr>
<tr>
<td>الدلالة على الزمان</td>
<td><span class="check">✓</span></td>
<td><span class="cross">✗</span></td>
</tr>
<tr>
<td>يُعرب إعراب الأسماء</td>
<td><span class="cross">✗</span></td>
<td><span class="check">✓</span></td>
</tr>
<tr>
<td>يقبل علامات الفعل</td>
<td><span class="check">✓</span></td>
<td><span class="cross">✗</span></td>
</tr>
<tr>
<td>مثال</td>
<td>كَتَبَ، يَكْتُبُ</td>
<td>كِتَابَة، كَتْب</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- Live Examples Section -->
<section class="section" id="examples">
<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">
<div class="code-block">
<div class="code-header">
<span class="code-title">🔍 تحليل جملة</span>
</div>
<div class="code-content">
<span class="code-line code-comment">// الجملة الأولى: باستخدام الفعل</span>
<span class="code-line"><span class="code-keyword">كَتَبَ</span> <span class="code-string">الطالبُ</span> <span class="code-number">الدرسَ</span></span>
<span class="code-line code-comment">// التحليل: حدث (الكتابة) + زمن (الماضي) + فاعل + مفعول</span>
<span class="code-line"></span>
<span class="code-line code-comment">// الجملة الثانية: باستخدام المصدر</span>
<span class="code-line"><span class="code-string">الكِتَابَةُ</span> <span
Live Preview