Math #57
Description
wanashelp-sys
Issue body actions
<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>
Reactions are currently unavailable