علامات عناصر الجملة
📦 النحو الواضح
✨ 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;800&display=swap" rel="stylesheet">
<style>
/* ===== CSS VARIABLES ===== */
: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%);
--negative-gradient: linear-gradient(135deg, #c471ed 0%, #f64f59 100%);
--bg-dark: #0a0a12;
--bg-card: rgba(255, 255, 255, 0.03);
--bg-glass: rgba(255, 255, 255, 0.08);
--text-primary: #ffffff;
--text-secondary: rgba(255, 255, 255, 0.7);
--text-muted: rgba(255, 255, 255, 0.4);
--border-color: rgba(255, 255, 255, 0.1);
--radius-sm: 8px;
--radius-md: 16px;
--radius-lg: 24px;
--radius-xl: 32px;
--shadow-glow: 0 0 40px rgba(102, 126, 234, 0.3);
--shadow-glow-pink: 0 0 40px rgba(240, 147, 251, 0.3);
--transition-fast: 0.2s ease;
--transition-normal: 0.3s ease;
}
/* ===== RESET & BASE ===== */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
font-size: 16px;
}
body {
font-family: 'Tajawal', sans-serif;
background: var(--bg-dark);
color: var(--text-primary);
line-height: 1.9;
min-height: 100vh;
overflow-x: hidden;
}
/* ===== ANIMATED BACKGROUND ===== */
.bg-animation {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
overflow: hidden;
}
.bg-animation::before {
content: '';
position: absolute;
width: 800px;
height: 800px;
border-radius: 50%;
background: radial-gradient(circle, rgba(102, 126, 234, 0.15) 0%, transparent 70%);
top: -400px;
right: -400px;
animation: floatBg 25s ease-in-out infinite;
}
.bg-animation::after {
content: '';
position: absolute;
width: 600px;
height: 600px;
border-radius: 50%;
background: radial-gradient(circle, rgba(240, 147, 251, 0.12) 0%, transparent 70%);
bottom: -300px;
left: -300px;
animation: floatBg 20s ease-in-out infinite reverse;
}
@keyframes floatBg {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(30px, -30px) scale(1.05); }
66% { transform: translate(-20px, 20px) scale(0.95); }
}
/* ===== CONTAINER ===== */
.container {
max-width: 950px;
margin: 0 auto;
padding: 20px;
}
/* ===== NAVIGATION ===== */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
background: rgba(10, 10, 18, 0.95);
backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border-color);
z-index: 1000;
padding: 12px 20px;
}
.nav-content {
max-width: 950px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
.nav-logo {
font-size: 1.1rem;
font-weight: 700;
background: var(--primary-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.nav-links {
display: flex;
gap: 5px;
flex-wrap: wrap;
}
.nav-links a {
color: var(--text-secondary);
text-decoration: none;
padding: 6px 12px;
border-radius: var(--radius-sm);
font-size: 0.85rem;
transition: var(--transition-fast);
}
.nav-links a:hover {
color: var(--text-primary);
background: var(--bg-glass);
}
/* ===== HERO SECTION ===== */
.hero {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 100px 20px 60px;
position: relative;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--bg-glass);
border: 1px solid var(--border-color);
padding: 8px 20px;
border-radius: 50px;
font-size: 0.9rem;
margin-bottom: 30px;
animation: fadeInDown 0.8s ease;
}
.hero-badge-dot {
width: 8px;
height: 8px;
background: #f093fb;
border-radius: 50%;
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(1.3); }
}
.hero-title {
font-family: 'Amiri', serif;
font-size: clamp(1.4rem, 4vw, 2.2rem);
font-weight: 700;
line-height: 2;
margin-bottom: 25px;
animation: fadeInUp 0.8s ease 0.2s both;
}
.hero-title .highlight {
position: relative;
display: inline-block;
padding: 0 8px;
}
.hero-title .highlight::after {
content: '';
position: absolute;
bottom: 8px;
left: 0;
right: 0;
height: 10px;
background: var(--accent-gradient);
opacity: 0.3;
border-radius: 4px;
z-index: -1;
}
.hero-title .negative {
color: #f093fb;
text-decoration: underline;
text-decoration-style: wavy;
text-underline-offset: 5px;
}
.hero-subtitle {
font-size: 1.15rem;
color: var(--text-secondary);
max-width: 650px;
margin-bottom: 40px;
animation: fadeInUp 0.8s ease 0.4s both;
}
.hero-cta {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--primary-gradient);
color: white;
padding: 15px 35px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
font-size: 1.1rem;
box-shadow: var(--shadow-glow);
transition: var(--transition-normal);
animation: fadeInUp 0.8s ease 0.6s both;
}
.hero-cta:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 0 60px rgba(102, 126, 234, 0.5);
}
.scroll-indicator {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
animation: bounce 2s ease-in-out infinite;
}
.scroll-indicator span {
display: block;
width: 26px;
height: 42px;
border: 2px solid var(--text-muted);
border-radius: 15px;
position: relative;
}
.scroll-indicator span::before {
content: '';
position: absolute;
top: 6px;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 8px;
background: var(--text-muted);
border-radius: 2px;
animation: scrollDot 2s ease-in-out infinite;
}
@keyframes bounce {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(8px); }
}
@keyframes scrollDot {
0%, 100% { opacity: 1; top: 6px; }
50% { opacity: 0.3; top: 18px; }
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
from { opacity: 0; transform: translateY(-30px); }
to { opacity: 1; transform: translateY(0); }
}
/* ===== SECTIONS ===== */
.section {
padding: 70px 0;
}
.section-header {
text-align: center;
margin-bottom: 45px;
}
.section-icon {
font-size: 2.8rem;
margin-bottom: 15px;
display: block;
}
.section-title {
font-size: 1.9rem;
font-weight: 700;
margin-bottom: 12px;
background: var(--primary-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.section-subtitle {
color: var(--text-secondary);
font-size: 1.05rem;
max-width: 600px;
margin: 0 auto;
}
/* ===== CARDS ===== */
.card {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
padding: 28px;
margin-bottom: 20px;
backdrop-filter: blur(10px);
transition: var(--transition-normal);
}
.card:hover {
transform: translateY(-4px);
border-color: rgba(102, 126, 234, 0.3);
}
.card-glass {
background: var(--bg-glass);
}
/* ===== ACCORDION ===== */
.accordion {
margin-bottom: 12px;
}
.accordion details {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
overflow: hidden;
transition: var(--transition-normal);
}
.accordion details:hover {
border-color: rgba(102, 126, 234, 0.3);
}
.accordion details[open] {
border-color: rgba(240, 147, 251, 0.4);
box-shadow: var(--shadow-glow-pink);
}
.accordion summary {
padding: 18px 22px;
cursor: pointer;
display: flex;
align-items: center;
gap: 12px;
font-weight: 600;
font-size: 1.05rem;
list-style: none;
transition: var(--transition-fast);
}
.accordion summary::-webkit-details-marker {
display: none;
}
.accordion summary::before {
content: '◀';
font-size: 0.75rem;
transition: var(--transition-fast);
color: var(--text-muted);
}
.accordion details[open] summary::before {
transform: rotate(-90deg);
color: #f093fb;
}
.accordion summary:hover {
background: var(--bg-glass);
}
.accordion-content {
padding: 0 22px 22px;
color: var(--text-secondary);
line-height: 2;
}
.accordion-icon {
font-size: 1.4rem;
}
/* ===== TABS (CSS-Only) ===== */
.tabs {
margin: 30px 0;
}
.tabs input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.tab-labels {
display: flex;
gap: 8px;
margin-bottom: 20px;
flex-wrap: wrap;
justify-content: center;
}
.tab-label {
padding: 12px 22px;
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
cursor: pointer;
font-weight: 500;
transition: var(--transition-fast);
display: flex;
align-items: center;
gap: 8px;
}
.tab-label:hover {
background: var(--bg-glass);
border-color: rgba(102, 126, 234, 0.3);
}
.tab-content {
display: none;
animation: fadeIn 0.4s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
#tab1:checked ~ .tab-labels .tab-label[for="tab1"],
#tab2:checked ~ .tab-labels .tab-label[for="tab2"],
#tab3:checked ~ .tab-labels .tab-label[for="tab3"] {
background: var(--primary-gradient);
border-color: transparent;
color: white;
box-shadow: var(--shadow-glow);
}
#tab1:checked ~ .tab-panels .tab-content:nth-child(1),
#tab2:checked ~ .tab-panels .tab-content:nth-child(2),
#tab3:checked ~ .tab-panels .tab-content:nth-child(3) {
display: block;
}
/* ===== SIGN CARDS ===== */
.sign-card {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
padding: 25px;
margin-bottom: 15px;
transition: var(--transition-normal);
}
.sign-card:hover {
transform: translateX(-5px);
border-color: rgba(102, 126, 234, 0.4);
}
.sign-card-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 15px;
}
.sign-card-icon {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
}
.sign-card-icon.positive {
background: var(--success-gradient);
}
.sign-card-icon.negative {
background: var(--negative-gradient);
}
.sign-card-title {
font-size: 1.15rem;
font-weight: 600;
}
.sign-card-subtitle {
font-size: 0.9rem;
color: var(--text-muted);
}
/* ===== EXAMPLE BOX ===== */
.example-box {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
border: 1px solid rgba(102, 126, 234, 0.3);
border-radius: var(--radius-md);
padding: 22px;
margin: 18px 0;
}
.example-box-title {
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
margin-bottom: 12px;
color: #a78bfa;
}
.example-arabic {
font-family: 'Amiri', serif;
font-size: 1.5rem;
line-height: 2.4;
margin: 12px 0;
padding: 18px;
background: rgba(0, 0, 0, 0.25);
border-radius: var(--radius-sm);
}
.example-translation {
color: var(--text-secondary);
font-style: italic;
padding-right: 18px;
border-right: 3px solid #667eea;
}
/* ===== TOOLTIP ===== */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 2px dotted #f093fb;
cursor: help;
}
.tooltip::after {
content: attr(data-tip);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%) translateY(-8px);
background: rgba(0, 0, 0, 0.95);
color: white;
padding: 10px 14px;
border-radius: var(--radius-sm);
font-size: 0.85rem;
white-space: normal;
width: max-content;
max-width: 220px;
opacity: 0;
visibility: hidden;
transition: var(--transition-fast);
z-index: 100;
text-align: center;
border: 1px solid rgba(240, 147, 251, 0.3);
}
.tooltip:hover::after {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(-5px);
}
/* ===== COMPARISON TABLE ===== */
.comparison-table {
width: 100%;
border-collapse: collapse;
margin: 25px 0;
background: var(--bg-card);
border-radius: var(--radius-md);
overflow: hidden;
}
.comparison-table th,
.comparison-table td {
padding: 16px 18px;
text-align: center;
border-bottom: 1px solid var(--border-color);
}
.comparison-table th {
background: var(--primary-gradient);
font-weight: 600;
}
.comparison-table tr:last-child td {
border-bottom: none;
}
.comparison-table tr:hover td {
background: var(--bg-glass);
}
.check-yes {
color: #38ef7d;
font-size: 1.3rem;
}
.check-no {
color: #f45c43;
font-size: 1.3rem;
}
/* ===== NEGATIVE SIGN BOX ===== */
.negative-box {
background: linear-gradient(135deg, rgba(196, 113, 237, 0.15) 0%, rgba(246, 79, 89, 0.15) 100%);
border: 2px solid rgba(240, 147, 251, 0.4);
border-radius: var(--radius-lg);
padding: 30px;
margin: 25px 0;
position: relative;
overflow: hidden;
}
.negative-box::before {
content: '❌';
position: absolute;
top: -15px;
left: -15px;
font-size: 100px;
opacity: 0.08;
}
.negative-box-title {
display: flex;
align-items: center;
gap: 12px;
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 18px;
color: #f093fb;
}
/* ===== FLOWCHART ===== */
.flowchart {
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
margin: 30px 0;
}
.flow-step {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
padding: 20px 30px;
text-align: center;
min-width: 280px;
transition: var(--transition-normal);
}
.flow-step:hover {
transform: scale(1.03);
border-color: rgba(102, 126, 234, 0.5);
}
.flow-step-question {
background: var(--primary-gradient);
color: white;
}
.flow-step-yes {
background: linear-gradient(135deg, rgba(17, 153, 142, 0.3) 0%, rgba(56, 239, 125, 0.3) 100%);
border-color: rgba(56, 239, 125, 0.5);
}
.flow-step-no {
background: linear-gradient(135deg, rgba(196, 113, 237, 0.2) 0%, rgba(246, 79, 89, 0.2) 100%);
border-color: rgba(240, 147, 251, 0.4);
}
.flow-arrow {
font-size: 1.8rem;
color: var(--text-muted);
padding: 8px 0;
}
.flow-branch {
display: flex;
gap: 40px;
justify-content: center;
flex-wrap: wrap;
}
.flow-branch-item {
display: flex;
flex-direction: column;
align-items: center;
}
.flow-label {
font-size: 0.85rem;
color: var(--text-muted);
margin-bottom: 8px;
}
.flow-label.yes { color: #38ef7d; }
.flow-label.no { color: #f093fb; }
/* ===== QUIZ ===== */
.quiz {
margin: 35px 0;
}
.quiz-question {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
padding: 28px;
margin-bottom: 22px;
position: relative;
}
.quiz-question-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 18px;
}
.quiz-number {
background: var(--primary-gradient);
width: 42px;
height: 42px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.1rem;
}
.quiz-question-text {
font-size: 1.1rem;
font-weight: 600;
}
.quiz-options {
display: flex;
flex-direction: column;
gap: 10px;
}
.quiz-options input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.quiz-option {
padding: 14px 18px;
background: var(--bg-glass);
border: 2px solid var(--border-color);
border-radius: var(--radius-md);
cursor: pointer;
transition: var(--transition-fast);
display: flex;
align-items: center;
gap: 12px;
}
.quiz-option::before {
content: '';
width: 20px;
height: 20px;
border: 2px solid var(--text-muted);
border-radius: 50%;
transition: var(--transition-fast);
flex-shrink: 0;
}
.quiz-option:hover {
border-color: rgba(102, 126, 234, 0.5);
background: rgba(102, 126, 234, 0.1);
}
.quiz-feedback {
margin-top: 15px;
padding: 15px 18px;
border-radius: var(--radius-md);
display: none;
animation: fadeIn 0.3s ease;
}
.quiz-feedback-correct {
background: linear-gradient(135deg, rgba(17, 153, 142, 0.25) 0%, rgba(56, 239, 125, 0.25) 100%);
border: 1px solid rgba(56, 239, 125, 0.5);
color: #38ef7d;
}
.quiz-feedback-wrong {
background: linear-gradient(135deg, rgba(235, 51, 73, 0.2) 0%, rgba(244, 92, 67, 0.2) 100%);
border: 1px solid rgba(244, 92, 67, 0.5);
color: #f45c43;
}
/* Quiz 1 - Correct answer: b */
#q1a:checked ~ .quiz-options .quiz-option[for="q1a"],
#q1b:checked ~ .quiz-options .quiz-option[for="q1b"],
#q1c:checked ~ .quiz-options .quiz-option[for="q1c"] {
border-color: #667eea;
}
#q1a:checked ~ .quiz-options .quiz-option[for="q1a"]::before,
#q1b:checked ~ .quiz-options .quiz-option[for="q1b"]::before,
#q1c:checked ~ .quiz-options .quiz-option[for="q1c"]::before {
background: #667eea;
border-color: #667eea;
}
#q1b:checked ~ .quiz-feedback-correct { display: block; }
#q1a:checked ~ .quiz-feedback-wrong,
#q1c:checked ~ .quiz-feedback-wrong { display: block; }
/* Quiz 2 - Correct answer: c */
#q2a:checked ~ .quiz-options .quiz-option[for="q2a"],
#q2b:checked ~ .quiz-options .quiz-option[for="q2b"],
#q2c:checked ~ .quiz-options .quiz-option[for="q2c"] {
border-color: #667eea;
}
#q2a:checked ~ .quiz-options .quiz-option[for="q2a"]::before,
#q2b:checked ~ .quiz-options .quiz-option[for="q2b"]::before,
#q2c:checked ~ .quiz-options .quiz-option[for="q2c"]::before {
background: #667eea;
border-color: #667eea;
}
#q2c:checked ~ .quiz-feedback-correct { display: block; }
#q2a:checked ~ .quiz-feedback-wrong,
#q2b:checked ~ .quiz-feedback-wrong { display: block; }
/* Quiz 3 - Correct answer: a */
#q3a:checked ~ .quiz-options .quiz-option[for="q3a"],
#q3b:checked ~ .quiz-options .quiz-option[for="q3b"],
#q3c:checked ~ .quiz-options .quiz-option[for="q3c"] {
border-color: #667eea;
}
#q3a:checked ~ .quiz-options .quiz-option[for="q3a"]::before,
#q3b:checked ~ .quiz-options .quiz-option[for="q3b"]::before,
#q3c:checked ~ .quiz-options .quiz-option[for="q3c"]::before {
background: #667eea;
border-color: #667eea;
}
#q3a:checked ~ .quiz-feedback-correct { display: block; }
#q3b:checked ~ .quiz-feedback-wrong,
#q3c:checked ~ .quiz-feedback-wrong { display: block; }
/* ===== CONFETTI ===== */
.celebration {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9999;
display: none;
}
#q1b:checked ~ .celebration,
#q2c:checked ~ .celebration,
#q3a:checked ~ .celebration {
display: block;
}
.confetti {
position: absolute;
width: 10px;
height: 10px;
opacity: 0;
}
.confetti:nth-child(1) { background: #f093fb; left: 10%; animation: confettiFall 2.5s ease-out forwards; }
.confetti:nth-child(2) { background: #667eea; left: 25%; animation: confettiFall 2.5s ease-out 0.1s forwards; }
.confetti:nth-child(3) { background: #38ef7d; left: 40%; animation: confettiFall 2.5s ease-out 0.2s forwards; }
.confetti:nth-child(4) { background: #f5576c; left: 55%; animation: confettiFall 2.5s ease-out 0.3s forwards; }
.confetti:nth-child(5) { background: #4facfe; left: 70%; animation: confettiFall 2.5s ease-out 0.4s forwards; }
.confetti:nth-child(6) { background: #f2c94c; left: 85%; animation: confettiFall 2.5s ease-out 0.5s forwards; }
@keyframes confettiFall {
0% { transform: translateY(-50px) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
/* ===== SUMMARY CARD ===== */
.summary-card {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
border: 2px solid rgba(102, 126, 234, 0.4);
border-radius: var(--radius-xl);
padding: 35px;
margin: 35px 0;
position: relative;
overflow: hidden;
}
.summary-card::before {
content: '📋';
position: absolute;
top: -20px;
left: -20px;
font-size: 120px;
opacity: 0.06;
}
.summary-card-title {
font-size: 1.4rem;
font-weight: 700;
margin-bottom: 22px;
display: flex;
align-items: center;
gap: 12px;
}
.summary-list {
list-style: none;
}
.summary-list li {
padding: 12px 0;
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: flex-start;
gap: 12px;
}
.summary-list li:last-child {
border-bottom: none;
}
.summary-list-icon {
font-size: 1.2rem;
min-width: 28px;
}
/* ===== MISTAKE BOX ===== */
.mistake-box {
background: linear-gradient(135deg, rgba(235, 51, 73, 0.12) 0%, rgba(244, 92, 67, 0.12) 100%);
border: 1px solid rgba(244, 92, 67, 0.35);
border-radius: var(--radius-md);
padding: 22px;
margin: 18px 0;
}
.mistake-box-title {
display: flex;
align-items: center;
gap: 10px;
font-weight: 600;
margin-bottom: 12px;
color: #f45c43;
}
/* ===== PRO TIP ===== */
.pro-tip {
background: linear-gradient(135deg, rgba(56, 239, 125, 0.12) 0%, rgba(17, 153, 142, 0.12) 100%);
border: 1px solid rgba(56, 239, 125, 0.35);
border-radius: var(--radius-md);
padding: 22px;
margin: 18px 0;
}
.pro-tip-title {
display: flex;
align-items: center;
gap: 10px;
font-weight: 600;
margin-bottom: 12px;
color: #38ef7d;
}
/* ===== GRID ===== */
.grid-3 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 18px;
margin: 25px 0;
}
/* ===== FEATURE CARD ===== */
.feature-card {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
padding: 25px;
text-align: center;
transition: var(--transition-normal);
}
.feature-card:hover {
transform: translateY(-8px);
border-color: rgba(102, 126, 234, 0.5);
box-shadow: var(--shadow-glow);
}
.feature-card-icon {
font-size: 2.8rem;
margin-bottom: 15px;
display: block;
}
.feature-card-title {
font-size: 1.15rem;
font-weight: 600;
margin-bottom: 8px;
}
.feature-card-text {
color: var(--text-secondary);
font-size: 0.95rem;
}
/* ===== DIVIDER ===== */
.divider {
height: 1px;
background: linear-gradient(90deg, transparent, var(--border-color), transparent);
margin: 50px 0;
}
/* ===== DETECTIVE BOX ===== */
.detective-box {
background: linear-gradient(135deg, rgba(79, 172, 254, 0.12) 0%, rgba(0, 242, 254, 0.12) 100%);
border: 2px solid rgba(79, 172, 254, 0.4);
border-radius: var(--radius-xl);
padding: 30px;
margin: 25px 0;
text-align: center;
}
.detective-box-icon {
font-size: 4rem;
margin-bottom: 15px;
display: block;
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-12px); }
}
.detective-box-title {
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 12px;
color: #4facfe;
}
/* ===== FOOTER ===== */
.footer {
background: rgba(0, 0, 0, 0.4);
border-top: 1px solid var(--border-color);
padding: 50px 20px;
text-align: center;
margin-top: 60px;
}
.footer-logo {
font-size: 1.4rem;
font-weight: 700;
background: var(--primary-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 15px;
}
.footer-text {
color: var(--text-secondary);
margin-bottom: 25px;
}
.footer-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--bg-glass);
border: 1px solid var(--border-color);
padding: 10px 18px;
border-radius: 50px;
font-size: 0.9rem;
}
.footer-heart {
color: #f45c43;
animation: heartbeat 1.5s ease-in-out infinite;
}
@keyframes heartbeat {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.15); }
}
/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
.nav-links { display: none; }
.hero-title { font-size: 1.3rem; }
.section { padding: 50px 0; }
.card { padding: 20px; }
.flow-branch { gap: 20px; }
.flow-step { min-width: 220px; padding: 15px 20px; }
}
/* ===== ARABIC STYLING ===== */
.arabic-large {
font-family: 'Amiri', serif;
font-size: 1.6rem;
line-height: 2.4;
}
.arabic-highlight {
background: linear-gradient(135deg, rgba(240, 147, 251, 0.25) 0%, rgba(246, 79, 89, 0.25) 100%);
padding: 4px 12px;
border-radius: var(--radius-sm);
border-bottom: 3px solid #f093fb;
}
/* ===== INTERACTIVE DEMO ===== */
.demo-container {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
padding: 28px;
margin: 25px 0;
}
.demo-word {
display: inline-block;
padding: 8px 18px;
margin: 6px;
border-radius: var(--radius-sm);
font-family: 'Amiri', serif;
font-size: 1.4rem;
transition: var(--transition-fast);
cursor: default;
}
.demo-word:hover {
transform: scale(1.08);
}
.demo-word-noun {
background: rgba(56, 239, 125, 0.2);
border: 2px solid rgba(56, 239, 125, 0.5);
}
.demo-word-verb {
background: rgba(79, 172, 254, 0.2);
border: 2px solid rgba(79, 172, 254, 0.5);
}
.demo-word-particle {
background: rgba(240, 147, 251, 0.2);
border: 2px solid rgba(240, 147, 251, 0.5);
}
.demo-legend {
display: flex;
justify-content: center;
gap: 25px;
flex-wrap: wrap;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--border-color);
}
.demo-legend-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.9rem;
}
.demo-legend-color {
width: 18px;
height: 18px;
border-radius: 4px;
}
.demo-legend-color.noun { background: rgba(56, 239, 125, 0.5); }
.demo-legend-color.verb { background: rgba(79, 172, 254, 0.5); }
.demo-legend-color.particle { background: rgba(240, 147, 251, 0.5); }
/* ===== TEST RESULT DISPLAY ===== */
.test-result {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
padding: 18px;
border-radius: var(--radius-md);
margin: 15px 0;
font-weight: 600;
font-size: 1.1rem;
}
.test-result-pass {
background: linear-gradient(135deg, rgba(56, 239, 125, 0.2) 0%, rgba(17, 153, 142, 0.2) 100%);
border: 1px solid rgba(56, 239, 125, 0.5);
color: #38ef7d;
}
.test-result-fail {
background: linear-gradient(135deg, rgba(240, 147, 251, 0.2) 0%, rgba(246, 79, 89, 0.2) 100%);
border: 1px solid rgba(240, 147, 251, 0.5);
color: #f093fb;
}
</style>
</head>
<body>
<!-- Background Animation -->
<div class="bg-animation"></div>
<!-- Navigation -->
<nav class="nav">
<div class="nav-content">
<div class="nav-logo">🔍 علامات أقسام الكلام</div>
<div class="nav-links">
<a href="#what">ما هي؟</a>
<a href="#signs">العلامات</a>
<a href="#negative">السلبية</a>
<a href="#how">كيف نميز؟</a>
<a href="#quiz">اختبار</a>
</div>
</div>
</nav>
<main>
<!-- Hero Section -->
<section class="hero" id="top">
<div class="hero-badge">
<span class="hero-badge-dot"></span>
قاعدة ذهبية في النحو العربي
</div>
<h1 class="hero-title">
للاسم <span class="highlight">علامات</span> معروفة<br>
وللفعل <span class="highlight">علامات</span> معروفة<br>
أما الحرف فليس له علامات<br>
بل علاماته <span class="negative">سلبية</span><br>
ويُعرف بعدم انتسابه لعلامة
</h1>
<p class="hero-subtitle">
🎯 اكتشف كيف يُعرَّف الحرف بطريقة عبقرية: ليس بما يملكه، بل بما لا يملكه!
</p>
<a href="#what" class="hero-cta">
ابدأ الاكتشاف 🔍
</a>
<div class="scroll-indicator">
<span></span>
</div>
</section>
<div class="container">
<!-- What Is It Section -->
<section class="section" id="what">
<div class="section-header">
<span class="section-icon">🤔</span>
<h2 class="section-title">ما معنى هذه القاعدة؟</h2>
<p class="section-subtitle">فهم مبدأ التعريف بالسلب في النحو العربي</p>
</div>
<div class="card card-glass">
<p class="arabic-large" style="text-align: center; margin-bottom: 25px;">
الحرف = ما <span class="arabic-highlight">لا يقبل</span> علامات الاسم ولا علامات الفعل
</p>
<p style="font-size: 1.1rem; line-height: 2; margin-bottom: 18px;">
تخيّل أنك محقق 🕵️ تحاول التعرف على شخص مجهول. عادةً تبحث عن صفات مميزة (طويل، أشقر، يرتدي نظارة...)
</p>
<p style="font-size: 1.1rem; line-height: 2; margin-bottom: 18px;">
لكن ماذا لو كان هذا الشخص <strong>بلا أي صفة مميزة؟</strong> 🤷♂️
</p>
<p style="font-size: 1.1rem; line-height: 2;">
هنا تأتي عبقرية النحاة العرب: عرّفوا الحرف بـ<span class="tooltip" data-tip="أي بغياب العلامات لا بوجودها">العلامات السلبية</span> — ما لا يقبل علامات الاسم ولا الفعل فهو حرف!
</p>
</div>
<div class="detective-box">
<span class="detective-box-icon">🔍</span>
<h3 class="detective-box-title">طريقة المحقق الذكي</h3>
<p style="color: var(--text-secondary);">
بدلاً من السؤال: "ما علامات الحرف؟"<br>
اسأل: "هل يقبل علامات الاسم؟ لا. هل يقبل علامات الفعل؟ لا. إذن هو حرف!"
</p>
</div>
</section>
<div class="divider"></div>
<!-- Signs Section -->
<section class="section" id="signs">
<div class="section-header">
<span class="section-icon">✅</span>
<h2 class="section-title">علامات الاسم والفعل</h2>
<p class="section-subtitle">العلامات الإيجابية التي تميز كل قسم</p>
</div>
<!-- Tabs -->
<div class="tabs">
<input type="radio" name="tabs" id="tab1" checked>
<input type="radio" name="tabs" id="tab2">
<input type="radio" name="tabs" id="tab3">
<div class="tab-labels">
<label class="tab-label" for="tab1">📝 علامات الاسم</label>
<label class="tab-label" for="tab2">⚡ علامات الفعل</label>
<label class="tab-label" for="tab3">❌ الحرف (سلبي)</label>
</div>
<div class="tab-panels">
<!-- Tab 1: Noun Signs -->
<div class="tab-content">
<div class="card">
<h3 style="margin-bottom: 20px; color: #38ef7d;">🏷️ علامات الاسم الأربع</h3>
<div class="sign-card">
<div class="sign-card-header">
<div class="sign-card-icon positive">1</div>
<div>
<div class="sign-card-title">قبول "أل" التعريف</div>
<div class="sign-card-subtitle">الكلمة تقبل دخول "ال" عليها</div>
</div>
</div>
<div class="example-box">
<p class="example-arabic">كتاب ← <strong>الـ</strong>ـكتاب ✅</p>
<p class="example-arabic">مِن ← <strong>الـ</strong>ـمِن ❌ (لا يصح)</p>
</div>
</div>
<div class="sign-card">
<div class="sign-card-header">
<div class="sign-card-icon positive">2</div>
<div>
<div class="sign-card-title">قبول التنوين</div>
<div class="sign-card-subtitle">الكلمة تقبل التنوين (ـً ـٍ ـٌ)</div>
</div>
</div>
<div class="example-box">
<p class="example-arabic">كتاب<strong>ٌ</strong> - كتاب<strong>ًا</strong> - كتاب<strong>ٍ</strong> ✅</p>
</div>
</div>
<div class="sign-card">
<div class="sign-card-header">
<div class="sign-card-icon positive">3</div>
<div>
<div class="sign-card-title">قبول حرف الجر</div>
<div class="sign-card-subtitle">يمكن أن يسبقها حرف جر</div>
</div>
</div>
<div class="example-box">
<p class="example-arabic"><strong>في</strong> البيت - <strong>إلى</strong> المدرسة ✅</p>
</div>
</div>
<div class="sign-card">
<div class="sign-card-header">
<div class="sign-card-icon positive">4</div>
<div>
<div class="sign-card-title">قبول النداء</div>
<div class="sign-card-subtitle">يمكن نداؤها بـ"يا"</div>
</div>
</div>
<div class="example-box">
<p class="example-arabic"><strong>يا</strong> محمد - <strong>يا</strong> طالب ✅</p>
</div>
</div>
</div>
</div>
<!-- Tab 2: Verb Signs -->
<div class="tab-content">
<div class="card">
<h3 style="margin-bottom: 20px; color: #4facfe;">⚡ علامات الفعل الأربع</h3>
<div class="sign-card">
<div class="sign-card-header">
<div class="sign-card-icon positive">1</div>
<div>
<div class="sign-card-title">قبول تاء الفاعل</div>
<div class="sign-card-subtitle">تاء متحركة تتصل بالفعل الماضي</div>
</div>
</div>
<div class="example-box">
<p class="example-arabic">كتب ← كتب<strong>تُ</strong> / كتب<strong>تَ</strong> / كتب<strong>تِ</strong> ✅</p>
</div>
</div>
<div class="sign-card">
<div class="sign-card-header">
<div class="sign-card-icon positive">2</div>
<div>
<div class="sign-card-title">قبول تاء التأنيث الساكنة</div>
<div class="sign-card-subtitle">تاء ساكنة في آخر الفعل الماضي</div>
</div>
</div>
<div class="example-box">
<p class="example-arabic">كتب ← كتب<strong>تْ</strong> (هي كتبتْ) ✅</p>
</div>
</div>
<div class="sign-card">
<div class="sign-card-header">
<div class="sign-card-icon positive">3</div>
<div>
<div class="sign-card-title">قبول ياء المخاطبة</div>
<div class="sign-card-subtitle">ياء تتصل بفعل الأمر والمضارع</div>
</div>
</div>
<div class="example-box">
<p class="example-arabic">اكتب ← اكتب<strong>ي</strong> (أنتِ) ✅</p>
<p class="example-arabic">تكتب ← تكتب<strong>ين</strong> ✅</p>
</div>
</div>
<div class="sign-card">
<div class="sign-card-header">
<div class="sign-card-icon positive">4</div>
<div>
<div class="sign-card-title">قبول نون التوكيد</div>
<div class="sign-card-subtitle">نون ثقيلة أو خفيفة للتوكيد</div>
</div>
</div>
<div class="example-box">
<p class="example-arabic">يكتب ← ليكتب<strong>نَّ</strong> / ليكتب<strong>نْ</strong> ✅</p>
</div>
</div>
</div>
</div>
<!-- Tab 3: Particle -->
<div class="tab-content">
<div class="negative-box">
<div class="negative-box-title">
<span>❌</span>
الحرف: العلامات السلبية
</div>
<p style="font-size: 1.1rem; line-height: 2; margin-bottom: 20px;">
الحرف <strong>لا يقبل</strong> أياً من العلامات السابقة! هذا هو تعريفه.
</p>
<div class="test-result test-result-fail">
<span>🧪</span>
اختبار كلمة "مِن" (حرف جر)
</div>
<table class="comparison-table">
<thead>
<tr>
<th>الاختبار</th>
<th>النتيجة</th>
<th>المحاولة</th>
</tr>
</thead>
<tbody>
<tr>
<td>هل يقبل "ال"؟</td>
<td><span class="check-no">✗</span></td>
<td>الـمِن ❌</td>
</tr>
<tr>
<td>هل يقبل التنوين؟</td>
<td><span class="check-no">✗</span></td>
<td>مِنٌ ❌</td>
</tr>
<tr>
<td>هل يقبل تا
Live Preview