Repository navigation
Math #57
Description
<title>لوحة التحكم | معمل سلمى - المعلمة</title>
<style>
:root{
/* ألوان مستوحاة من الهوية (قابلة للتعديل) */
--brand-primary: #00bcd4; /* فيروزي مبهج */
--brand-primary-dark: #0097a7;
--brand-secondary: #ffca28; /* أصفر ذهبي لطيف */
--brand-accent-pink: #ff6fb5; /* وردي طفولي */
--brand-accent-purple: #7c4dff; /* بنفسجي ناعم */
/* خلفيات */
--bg-page: #f9fbff;
--bg-card: #ffffff;
--bg-card-soft: #f3f6ff;
/* نصوص */
--text-main: #0f172a;
--text-soft: #64748b;
/* حدود وظلال */
--border-soft: #e2e8f0;
--shadow-soft: 0 12px 30px rgba(15,23,42,0.10);
/* زوايا */
--radius-lg: 24px;
--radius-md: 16px;
--radius-pill: 999px;
}
*{box-sizing:border-box;}
body{
margin:0;
padding:0;
font-family:"Tajawal",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
background-color: var(--bg-page);
min-height:100vh;
color:var(--text-main);
}
/* الحاوية العامة */
.dashboard-container{
min-height:100vh;
padding:20px;
}
@media (min-width:992px){
.dashboard-container{padding:32px;}
}
.dashboard-wrapper{
max-width:1200px;
margin:0 auto;
background: var(--bg-card);
border-radius:32px;
box-shadow:var(--shadow-soft);
border:1px solid rgba(148,163,184,0.18);
padding:18px 16px 22px;
}
@media (min-width:992px){
.dashboard-wrapper{padding:24px 24px 30px;}
}
@media (max-width:768px){
.dashboard-wrapper{
border-radius:0;
box-shadow:none;
border:none;
padding-inline:10px;
}
}
/* الهيدر العلوي */
.dashboard-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:18px;
padding-bottom:10px;
border-bottom:1px solid rgba(226,232,240,0.9);
}
.brand-section{
display:flex;
align-items:center;
gap:10px;
}
.brand-logo{
width:42px;
height:42px;
border-radius:16px;
background:linear-gradient(135deg,var(--brand-primary),var(--brand-accent-purple));
display:flex;
align-items:center;
justify-content:center;
font-weight:800;
font-size:20px;
color:#fff;
}
.brand-info{
display:flex;
flex-direction:column;
gap:2px;
}
.brand-title{
font-size:18px;
font-weight:800;
color:#020617;
letter-spacing:.02em;
}
.brand-subtitle{
font-size:13px;
color:var(--text-soft);
}
.user-section{
display:flex;
align-items:center;
gap:10px;
}
.icon-btn{
border:none;
background:var(--bg-card);
width:40px;
height:40px;
border-radius:16px;
display:inline-flex;
align-items:center;
justify-content:center;
font-size:18px;
position:relative;
transition:all .2s ease;
box-shadow:0 8px 20px rgba(148,163,184,0.35);
cursor:pointer;
}
.icon-btn:hover{
transform:translateY(-1px);
box-shadow:0 12px 26px rgba(148,163,184,0.45);
}
.notification-badge{
position:absolute;
top:4px;
left:6px;
background:#ff7043;
color:#fff;
font-size:10px;
padding:1px 5px;
border-radius:999px;
box-shadow:0 0 0 2px #fff;
}
.user-chip{
display:flex;
align-items:center;
gap:8px;
background:var(--bg-card-soft);
padding:4px 10px 4px 6px;
border-radius:var(--radius-pill);
border:1px solid rgba(148,163,184,0.5);
}
.user-avatar{
width:32px;
height:32px;
border-radius:999px;
background:linear-gradient(135deg,var(--brand-accent-pink),var(--brand-accent-purple));
display:flex;
align-items:center;
justify-content:center;
font-size:17px;
color:#fff;
}
.user-info{
display:flex;
flex-direction:column;
line-height:1.1;
}
.user-name{
font-size:13px;
font-weight:700;
color:#0f172a;
}
.user-role{
font-size:11px;
color:var(--text-soft);
}
/* شريط التنقل العلوي بين صفحات المعلمة */
.nav-tabs-container{
margin:6px 0 14px;
position:relative;
}
.nav-tabs-scroll{
display:flex;
align-items:center;
gap:6px;
overflow-x:auto;
padding:4px 2px 6px;
scrollbar-width:thin;
}
.nav-tabs-scroll::-webkit-scrollbar{height:5px;}
.nav-tabs-scroll::-webkit-scrollbar-thumb{
background:rgba(148,163,184,0.7);
border-radius:999px;
}
.nav-tab{
white-space:nowrap;
display:inline-flex;
align-items:center;
gap:6px;
border-radius:var(--radius-pill);
font-size:13px;
padding:7px 12px;
border:1px solid transparent;
background:rgba(255,255,255,0.9);
color:var(--text-soft);
text-decoration:none;
transition:all .18s ease;
}
.nav-tab span:first-child{font-size:16px;}
.nav-tab:hover{
background:var(--bg-card-soft);
color:var(--brand-primary-dark);
}
.nav-tab.active{
background:var(--brand-primary);
color:#ffffff;
border-color:var(--brand-primary-dark);
box-shadow:0 10px 25px rgba(0,188,212,0.45);
}
/* عنوان الصفحة */
.page-title-section{margin-bottom:14px;}
.page-title{
font-size:20px;
font-weight:800;
display:flex;
align-items:center;
gap:8px;
margin:0 0 4px;
color:#020617;
}
.page-title span:first-child{font-size:22px;}
.page-subtitle{
margin:0;
font-size:13px;
color:var(--text-soft);
}
@media (min-width:992px){
.page-title{font-size:22px;}
.page-subtitle{font-size:14px;}
}
/* نصوص مساعدة قصيرة داخل البطاقات (شرح للمعلمة) */
.helper-text{
font-size:11px;
color:var(--text-soft);
margin:3px 0 4px;
}
/* بطاقات KPI في أعلى اللوحة */
.kpi-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
margin-bottom:14px;
}
@media (max-width:768px){
.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:576px){
.kpi-grid{grid-template-columns:1fr;}
}
.kpi-card{
background: white;
border-radius: 16px;
padding: 0;
border: 1px solid rgba(148,163,184,0.2);
box-shadow: 0 8px 20px rgba(148,163,184,0.15);
overflow: hidden;
}
.kpi-header {
background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent-purple));
color: white;
padding: 8px 12px;
font-size: 11px;
font-weight: 600;
}
.kpi-body {
padding: 12px;
}
.kpi-value{
font-size: 20px;
font-weight: 800;
color:#111827;
margin-bottom: 4px;
}
.kpi-trend{
font-size: 11px;
display: flex;
align-items: center;
gap: 4px;
}
.kpi-trend span{font-weight:600;}
.kpi-trend.up{color:#16a34a;}
.kpi-trend.down{color:#b91c1c;}
/* بطاقات التذكرة (شكل تذكره) */
.ticket-card{
position:relative;
display:flex;
background:#fff;
border-radius:20px;
box-shadow:0 10px 30px rgba(15,23,42,0.14);
border:1px solid rgba(148,163,184,0.25);
margin-bottom:16px;
overflow:visible;
}
.ticket-side{
flex:0 0 90px;
background:var(--brand-accent-pink);
color:#fff;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
padding:14px 8px;
position:relative;
}
.ticket-side-main{
font-size:14px;
font-weight:800;
letter-spacing:.04em;
}
.ticket-side-sub{
font-size:11px;
opacity:.9;
}
.ticket-main{
flex:1;
padding:16px 18px 14px;
background:#fff;
position:relative;
}
/* ثقب بين الجزء الوردي والجزء الأبيض */
.ticket-card::before{
content:"";
position:absolute;
top:50%;
left:90px;
transform:translate(-50%,-50%);
width:26px;
height:26px;
border-radius:50%;
background:var(--bg-page);
box-shadow:0 0 0 1px rgba(148,163,184,0.25);
z-index:5;
}
/* ثقب في طرف التذكرة (اليمين) */
.ticket-card::after{
content:"";
position:absolute;
top:50%;
right:-13px;
transform:translateY(-50%);
width:26px;
height:26px;
border-radius:50%;
background:var(--bg-page);
box-shadow:0 0 0 1px rgba(148,163,184,0.25);
z-index:5;
}
.ticket-header{
margin-bottom:6px;
}
.ticket-title{
font-size:15px;
font-weight:800;
display:flex;
align-items:center;
justify-content:space-between;
gap:6px;
color:#111827;
}
.ticket-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:4px 10px;
border-radius:var(--radius-pill);
background:var(--brand-secondary);
font-size:11px;
font-weight:600;
color:#333;
white-space:nowrap;
}
.ticket-subtitle{
font-size:12px;
color:var(--text-soft);
margin-top:2px;
}
.ticket-body{
margin-top:6px;
}
.ticket-footer{
margin-top:10px;
padding-top:8px;
border-top:1px dashed rgba(148,163,184,0.45);
display:flex;
justify-content:flex-end;
}
/* جداول وقوائم */
.table-responsive{margin-top:6px;}
table{
font-size:12px;
vertical-align:middle;
background:rgba(248,250,252,0.97);
}
thead tr{background:rgba(243,246,255,0.96);}
thead th{
border-bottom:1px solid rgba(203,213,225,0.9)!important;
color:#475569;
font-weight:600;
}
tbody td{
border-top:1px solid rgba(226,232,240,0.9)!important;
color:#0f172a;
}
.badge-soft{
font-size:11px;
border-radius:999px;
padding:2px 7px;
background:rgba(239,246,255,0.9);
border:1px solid rgba(191,219,254,0.9);
color:#1d4ed8;
}
.badge-green{
background:rgba(22,163,74,0.12);
color:#166534;
border:1px solid rgba(22,163,74,0.4);
}
.badge-amber{
background:rgba(217,119,6,0.12);
color:#92400e;
border:1px solid rgba(217,119,6,0.45);
}
.badge-red{
background:rgba(239,68,68,0.12);
color:#b91c1c;
border:1px solid rgba(239,68,68,0.45);
}
.list-simple{
list-style:none;
margin:4px 0 0;
padding:0;
font-size:12px;
color:var(--text-soft);
}
.list-simple li{
display:flex;
justify-content:space-between;
align-items:center;
padding:6px 0;
border-bottom: 1px dashed rgba(148,163,184,0.2);
}
.list-simple li:last-child{border-bottom:none;}
.list-simple span:first-child{
max-width:70%;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.pill-soft{
display:inline-flex;
align-items:center;
gap:4px;
padding:6px 12px;
border-radius:var(--radius-pill);
font-size:12px;
background:var(--bg-card-soft);
border:1px solid rgba(203,213,225,0.9);
color:#4b5563;
margin-bottom:12px;
}
.small-muted{
font-size:11px;
color:var(--text-soft);
margin-top:8px;
}
.footer-note{
margin-top:16px;
font-size:11px;
color:var(--text-soft);
text-align:left;
padding: 12px 16px;
background: var(--bg-card-soft);
border-radius: 12px;
}
.footer-note span{
font-weight:600;
color:var(--brand-primary-dark);
}
/* زر رئيسي متحرك (CTA) */
.cta-row{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:6px;
}
.cta-btn{
flex:1 1 140px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:6px;
padding:10px 16px;
border-radius:20px;
font-size:13px;
font-weight:600;
color:#fff;
text-decoration:none;
border:2px solid rgba(255,255,255,0.7);
box-shadow:0 10px 24px rgba(15,23,42,0.25);
transform:translateY(0);
transition:transform .18s.ease, box-shadow .18s.ease, filter .18s.ease;
position:relative;
overflow:hidden;
background:linear-gradient(135deg,var(--brand-accent-purple),#5e35b1);
}
.cta-btn::after{
content:"";
position:absolute;
top:-40%;
right:-40%;
width:60%;
height:180%;
background:linear-gradient(120deg,rgba(255,255,255,0.0),rgba(255,255,255,0.35),rgba(255,255,255,0.0));
transform:translateX(0) rotate(-20deg);
opacity:0;
pointer-events:none;
}
.cta-btn:hover{
transform:translateY(-2px) scale(1.02);
box-shadow:0 14px 30px rgba(15,23,42,0.35);
filter:brightness(1.03);
}
.cta-btn:hover::after{
opacity:1;
animation:shine 0.8s forwards;
}
.cta-btn:active{
transform:translateY(0) scale(.99);
box-shadow:0 8px 18px rgba(15,23,42,0.25);
}
.cta-btn-pulse{
animation:pulseGlow 2.6s ease-in-out infinite;
}
.cta-icon{font-size:16px;}
@Keyframes shine{
0%{transform:translateX(120%) rotate(-20deg);opacity:0;}
30%{opacity:1;}
100%{transform:translateX(-120%) rotate(-20deg);opacity:0;}
}
@Keyframes pulseGlow{
0%,100%{box-shadow:0 10px 24px rgba(94,53,177,0.35);}
50%{box-shadow:0 14px 30px rgba(94,53,177,0.55);}
}
/* استجابة التذاكر على الشاشات الصغيرة */
@media (max-width:576px){
.ticket-card{
flex-direction:row;
}
.ticket-main{
padding:12px 12px 10px;
}
}
</style>
<!-- الهيدر: تعريف المنصة + المعلمة + الإشعارات -->
<header class="dashboard-header">
<div class="brand-section">
<div class="brand-logo">م</div>
<div class="brand-info">
<div class="brand-title">معمل سلمى - لوحة المعلمة</div>
<div class="brand-subtitle">اليوم الدراسي الحالي</div>
</div>
</div>
<div class="user-section">
<button class="icon-btn" type="button">
<span>🔔</span>
<span class="notification-badge">7</span>
</button>
<div class="user-chip">
<div class="user-avatar">س</div>
<div class="user-info">
<div class="user-name">المعلمة سارة</div>
<div class="user-role">رياضيات - الصف الخامس</div>
</div>
</div>
</div>
</header>
<!-- شريط التنقل بين صفحات المعلمة -->
<nav class="nav-tabs-container">
<div class="nav-tabs-scroll">
<a href="teacher-dashboard.html" class="nav-tab active">
<span>🏠</span><span>النظرة العامة</span>
</a>
<a href="teacher-management.html" class="nav-tab">
<span>👩🏫</span><span>الإدارة التعليمية</span>
</a>
<a href="teacher-content.html" class="nav-tab">
<span>📚</span><span>المحتوى والتقييم</span>
</a>
<a href="teacher-add-question.html" class="nav-tab">
<span>➕</span><span>إضافة الأسئلة</span>
</a>
<a href="teacher-interactive.html" class="nav-tab">
<span>🎯</span><span>التعلم التفاعلي</span>
</a>
<a href="teacher-analytics.html" class="nav-tab">
<span>📊</span><span>التحليل والتقارير</span>
</a>
<a href="teacher-communication.html" class="nav-tab">
<span>🔔</span><span>التواصل</span>
</a>
</div>
</nav>
<!-- عنوان عام للوحة -->
<section class="page-title-section">
<h1 class="page-title">
<span>📌</span>
<span>لوحة النظرة العامة للمعلمة</span>
</h1>
<p class="page-subtitle">
هذه اللوحة تعطيك صورة سريعة عن وضع فصولك اليوم: التفاعل، التقييمات، والمراجعة المتباعدة.
</p>
</section>
<!-- 1) اليوم في لمحة: أهم 3 أرقام للمعلمة -->
<section>
<!-- وصف قصير للمعلمة -->
<p class="helper-text">
استخدمي هذه الأرقام لمعرفة مستوى نشاط طالباتك وعدد التقييمات والمحتوى التفاعلي المخطط لليوم.
</p>
<div class="kpi-grid">
<div class="kpi-card">
<div class="kpi-header">عدد الطالبات النشطات اليوم</div>
<div class="kpi-body">
<div class="kpi-value">٢٤ طالبة</div>
<div class="kpi-trend up"><span>+٦</span> عن نفس اليوم من الأسبوع الماضي</div>
<p class="helper-text">
إذا كان العدد منخفضًا؛ يمكن زيادة الأنشطة التفاعلية أو الألعاب في الحصة.
</p>
</div>
</div>
<div class="kpi-card">
<div class="kpi-header">التقييمات والواجبات لهذا اليوم</div>
<div class="kpi-body">
<div class="kpi-value">٣ تقييمات</div>
<div class="kpi-trend up"><span>+١</span> عن أيام الأسبوع السابقة</div>
<p class="helper-text">
يساعدك هذا الرقم على موازنة وقت الشرح مع وقت حل التمارين والتقييم.
</p>
</div>
</div>
<div class="kpi-card">
<div class="kpi-header">جلسات التعلم التفاعلي النشطة</div>
<div class="kpi-body">
<div class="kpi-value">٢ جلسة</div>
<div class="kpi-trend up"><span>+١</span> مقارنة بالأسبوع الماضي</div>
<p class="helper-text">
استخدمي جلسات التعلم التفاعلي لرفع حماس الطالبات في الدروس الصعبة.
</p>
</div>
</div>
</div>
</section>
<!-- 2) تقدم الفصول في المهارات الأساسية -->
<section>
<div class="row g-3">
<div class="col-12 col-lg-7">
<!-- بطاقة تذكرة: حالة الفصول -->
<!-- هذه البطاقة تساعد المعلمة على مقارنة مستوى الفصول في المهارات الأساسية -->
<div class="ticket-card">
<div class="ticket-side">
<div class="ticket-side-main">الفصول</div>
<div class="ticket-side-sub">المهارات</div>
</div>
<div class="ticket-main">
<div class="ticket-header">
<div class="ticket-title">
<span>تقدم الفصول في المهارات الأساسية</span>
<span class="ticket-badge">متابعة أسبوعية</span>
</div>
<div class="ticket-subtitle">
من هنا يمكنك معرفة أي الفصول تحتاج إلى دعم إضافي في مهارات معيّنة.
</div>
</div>
<div class="ticket-body">
<div class="table-responsive">
<table class="table table-hover mb-1">
<thead>
<tr>
<th>الصف / الفصل</th>
<th>المهارة الأبرز</th>
<th>متوسط الإتقان</th>
<th>حالة الفصل</th>
</tr>
</thead>
<tbody>
<tr>
<td>الصف الخامس / أ</td>
<td>المسائل اللفظية</td>
<td>٨٨٪</td>
<td><span class="badge-soft badge-green">ممتاز</span></td>
</tr>
<tr>
<td>الصف الخامس / ب</td>
<td>النسبة والتناسب</td>
<td>٧٦٪</td>
<td><span class="badge-soft">جيد – يحتاج تثبيت</span></td>
</tr>
<tr>
<td>الصف الخامس / ج</td>
<td>الكسور والأعداد العشرية</td>
<td>٦٤٪</td>
<td><span class="badge-soft badge-amber">بحاجة دعم</span></td>
</tr>
<tr>
<td>الصف الرابع / أ</td>
<td>جدول الضرب حتى ١٢</td>
<td>٧٠٪</td>
<td><span class="badge-soft">مستوى متوسط</span></td>
</tr>
</tbody>
</table>
</div>
<p class="helper-text">
ركّزي على الفصول ذات اللون البرتقالي/الأصفر لتخصيص أنشطة لعب أو مراجعة إضافية.
</p>
</div>
<div class="ticket-footer">
<a href="teacher-analytics.html" class="cta-btn">
<span>عرض تفاصيل التحليل</span>
<span class="cta-icon">▸</span>
</a>
</div>
</div>
</div>
</div>
<!-- 3) المراجعة المتباعدة + التنبيهات -->
<div class="col-12 col-lg-5">
<!-- بطاقة تذكرة: المراجعة المتباعدة -->
<!-- هذه البطاقة مخصصة لتطبيق منحنى النسيان والمراجعة المتباعدة -->
<div class="ticket-card">
<div class="ticket-side">
<div class="ticket-side-main">مراجعة</div>
<div class="ticket-side-sub">اليوم</div>
</div>
<div class="ticket-main">
<div class="ticket-header">
<div class="ticket-title">
<span>المراجعة المتباعدة اليوم</span>
<span class="ticket-badge">منحنى النسيان</span>
</div>
<div class="ticket-subtitle">
من هنا تعلمين عدد المهارات والطالبات اللاتي يجب مراجعة مهاراتهن اليوم لتثبيت التعلم.
</div>
</div>
<div class="ticket-body">
<ul class="list-simple">
<li>
<span>عدد المهارات التي حان وقت مراجعتها اليوم.</span>
<span class="badge-soft">٣٢ مهارة</span>
</li>
<li>
<span>عدد الطالبات اللاتي لديهن مراجعات متراكمة.</span>
<span class="badge-soft badge-amber">٥ طالبات</span>
</li>
<li>
<span>أكثر مهارة يكرر النظام مراجعتها.</span>
<span class="badge-soft">المسائل اللفظية</span>
</li>
</ul>
<p class="helper-text">
خصصي ٥–١٠ دقائق من الحصة لطرح أسئلة سريعة على هذه المهارات قبل الانتقال لشرح جديد.
</p>
</div>
<div class="ticket-footer">
<button type="button" class="cta-btn cta-btn-pulse">
<span>بدء جلسة المراجعة الآن</span>
<span class="cta-icon">▶</span>
</button>
</div>
</div>
</div>
<!-- بطاقة تذكرة: تنبيهات سريعة -->
<!-- هذه البطاقة تنبّه المعلمة لأهم الأمور العاجلة في اليوم -->
<div class="ticket-card">
<div class="ticket-side">
<div class="ticket-side-main">تنبيهات</div>
<div class="ticket-side-sub">اليوم</div>
</div>
<div class="ticket-main">
<div class="ticket-header">
<div class="ticket-title">
<span>تنبيهات سريعة</span>
<span class="ticket-badge">أولويات المتابعة</span>
</div>
<div class="ticket-subtitle">
تعرض لك أهم ما يحتاج انتباهك اليوم من طالبات أو فصول أو رسائل.
</div>
</div>
<div class="ticket-body">
<ul class="list-simple">
<li>
<span>٢ طالبتان في 5 / ج لم تكملان أي جلسة تفاعلية هذا الأسبوع.</span>
<span class="badge-soft badge-red">هام</span>
</li>
<li>
<span>٣ طالبات تكرر لديهن الخطأ في "النسبة والتناسب".</span>
<span class="badge-soft badge-amber">متابعة</span>
</li>
<li>
<span>وصول رسالة من ولي أمر بخصوص الواجب المنزلي.</span>
<span class="badge-soft">صندوق الوارد</span>
</li>
</ul>
<p class="helper-text">
استخدمي هذه التنبيهات لتحديد الطالبات أو الفصول التي تحتاج تواصل أو دعم إضافي اليوم.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 4) أنشطة اليوم + تخطيط الحصة القادمة -->
<section style="margin-top:10px;">
<div class="row g-3">
<!-- أنشطة اليوم -->
<div class="col-12 col-md-7">
<!-- هذه البطاقة تستخدم لعرض جميع الأنشطة والحصص المجدولة لليوم -->
<div class="ticket-card">
<div class="ticket-side">
<div class="ticket-side-main">أنشطة</div>
<div class="ticket-side-sub">اليوم</div>
</div>
<div class="ticket-main">
<div class="ticket-header">
<div class="ticket-title">
<span>أنشطة اليوم في مادة الرياضيات</span>
<span class="ticket-badge">جدول الحصص</span>
</div>
<div class="ticket-subtitle">
يساعدك هذا القسم على رؤية الحصص والتقييمات والأنشطة التفاعلية المخططة لليوم بالترتيب.
</div>
</div>
<div class="ticket-body">
<ul class="list-simple">
<li>
<span>حصة الصف الخامس / أ – درس المسائل اللفظية (تحدٍ تفاعلي).</span>
<span class="badge-soft">الحصة ٢</span>
</li>
<li>
<span>تقييم قصير للصف الخامس / ب – "النسبة والتناسب".</span>
<span class="badge-soft">الحصة ٤</span>
</li>
<li>
<span>نشاط مراجعة جدول الضرب للصف الرابع / أ.</span>
<span class="badge-soft">الحصة ٥</span>
</li>
</ul>
<p class="helper-text">
راجعي هذه القائمة في بداية اليوم أو أثناء الفسحة لتنظيم وقتك بين الشرح والتقييم والتفاعل.
</p>
</div>
</div>
</div>
</div>
<!-- تخطيط الحصة القادمة -->
<div class="col-12 col-md-5">
<!-- هذه البطاقة تلخّص الحصة القادمة وتوفر زرًا للوصول السريع لمحتواها -->
<div class="ticket-card">
<div class="ticket-side">
<div class="ticket-side-main">تخطيط</div>
<div class="ticket-side-sub">الحصة</div>
</div>
<div class="ticket-main">
<div class="ticket-header">
<div class="ticket-title">
<span>تخطيط سريع للحصة القادمة</span>
<span class="ticket-badge">إعداد مسبق</span>
</div>
<div class="ticket-subtitle">
يمنحك هذا القسم ملخصًا للحصة الأقرب، مع زر سريع للوصول إلى محتوى الحصة في المنصة.
</div>
</div>
<div class="ticket-body">
<div class="pill-soft">
<span>الحصة القادمة:</span>
<span>الصف الخامس / أ – درس المسائل اللفظية</span>
</div>
<ul class="list-simple">
<li>
<span>عدد الأسئلة الجاهزة في بنك الأسئلة.</span>
<span class="badge-soft">١٢ سؤال</span>
</li>
<li>
<span>وضع التحدي التفاعلي في الحصة.</span>
<span class="badge-soft">مفعّل</span>
</li>
<li>
<span>وجود أنشطة مراجعة متباعدة مرتبطة بالدرس.</span>
<span class="badge-soft">نعم – ٨ بطاقات</span>
</li>
</ul>
<div class="cta-row">
<a href="teacher-content.html" class="cta-btn cta-btn-pulse">
<span class="cta-icon">📚</span>
<span>فتح صفحة المحتوى للحصة القادمة</span>
</a>
</div>
<p class="helper-text">
استخدمي هذا الزر للوصول مباشرة لصفحة المحتوى بدون الحاجة للتنقل بين قوائم متعددة.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ملاحظة سفلية عامة للمعلمة -->
<div class="footer-note">
<span>معمل سلمى</span> – صُممت هذه اللوحة لتمنحك نظرة سريعة على أداء طالباتك،
وتساعدك على اتخاذ قرار: هل أقدّم درسًا جديدًا؟ أم أراجع؟ أم أركّز على فصل معيّن؟
</div>
Activity