496 lines
18 KiB
PHP
496 lines
18 KiB
PHP
@extends('layouts.studentportalnav')
|
|
|
|
@section('title', 'Student Dashboard')
|
|
|
|
@section('content')
|
|
|
|
<style>
|
|
:root {
|
|
--theme-navy: #1E233E;
|
|
--theme-navy-dark: #15182C;
|
|
--theme-red: #822424;
|
|
--theme-red-hover: #df2c3e;
|
|
--theme-yellow: #FFEA85;
|
|
--theme-bg: #F4F6F9;
|
|
--text-dark: #1E293B;
|
|
}
|
|
|
|
/* Welcome Banner */
|
|
.welcome-banner {
|
|
background: linear-gradient(135deg, #1E233E 0%, #2A1F3B 50%, #4A1A24 100%);
|
|
position: relative;
|
|
overflow: hidden;
|
|
border: none;
|
|
box-shadow: 0 10px 30px rgba(30, 35, 62, 0.15);
|
|
}
|
|
|
|
.welcome-banner::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -50%;
|
|
right: -10%;
|
|
width: 350px;
|
|
height: 350px;
|
|
background: radial-gradient(circle, rgba(255, 234, 133, 0.12) 0%, rgba(255, 234, 133, 0) 70%);
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.user-avatar-badge {
|
|
box-shadow: 0 4px 15px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
.avatar-circle {
|
|
width: 52px;
|
|
height: 52px;
|
|
border-radius: 14px;
|
|
background: linear-gradient(135deg, #FFEA85 0%, #F59E0B 100%);
|
|
color: #1E233E;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 800;
|
|
font-size: 22px;
|
|
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
|
|
}
|
|
|
|
/* Stat Cards Modern */
|
|
.stat-card-modern {
|
|
background: #ffffff;
|
|
border-radius: 16px;
|
|
padding: 24px;
|
|
border: 1px solid #E2E8F0;
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
|
|
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
|
position: relative;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.stat-card-modern:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 12px 28px rgba(30, 35, 62, 0.1);
|
|
border-color: rgba(30, 35, 62, 0.2);
|
|
}
|
|
|
|
.stat-icon-wrapper {
|
|
width: 52px;
|
|
height: 52px;
|
|
border-radius: 14px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #ffffff;
|
|
font-size: 22px;
|
|
box-shadow: 0 6px 14px rgba(0,0,0,0.12);
|
|
}
|
|
|
|
.stat-number {
|
|
font-size: 2.1rem;
|
|
font-weight: 800;
|
|
color: #0F172A;
|
|
line-height: 1.2;
|
|
margin-bottom: 2px;
|
|
letter-spacing: -0.5px;
|
|
}
|
|
|
|
.stat-label {
|
|
color: #64748B;
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Section Title Accent */
|
|
.title-accent {
|
|
width: 6px;
|
|
height: 24px;
|
|
background: linear-gradient(180deg, var(--theme-red) 0%, var(--theme-red-hover) 100%);
|
|
border-radius: 4px;
|
|
display: inline-block;
|
|
}
|
|
|
|
/* Modern Service Card */
|
|
.service-card-modern {
|
|
background: #ffffff;
|
|
border-radius: 16px;
|
|
padding: 28px 24px;
|
|
border: 1px solid #E2E8F0;
|
|
box-shadow: 0 4px 16px rgba(0,0,0,0.03);
|
|
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
.service-card-modern:hover {
|
|
transform: translateY(-6px);
|
|
box-shadow: 0 16px 32px rgba(130, 36, 36, 0.1);
|
|
border-color: rgba(130, 36, 36, 0.3);
|
|
}
|
|
|
|
.service-icon-box {
|
|
width: 56px;
|
|
height: 56px;
|
|
border-radius: 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 24px;
|
|
margin-bottom: 20px;
|
|
background: rgba(130, 36, 36, 0.08);
|
|
color: var(--theme-red);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.service-card-modern:hover .service-icon-box {
|
|
background: var(--theme-red);
|
|
color: #ffffff;
|
|
transform: scale(1.08);
|
|
box-shadow: 0 6px 16px rgba(130, 36, 36, 0.3);
|
|
}
|
|
|
|
.service-card-modern h5 {
|
|
font-weight: 700;
|
|
color: #0F172A;
|
|
font-size: 1.1rem;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.service-card-modern p {
|
|
color: #64748B;
|
|
font-size: 0.88rem;
|
|
margin: 0;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.action-link {
|
|
font-weight: 700;
|
|
font-size: 0.85rem;
|
|
color: var(--theme-red);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin-top: 18px;
|
|
transition: gap 0.2s ease, color 0.2s ease;
|
|
}
|
|
|
|
.service-card-modern:hover .action-link {
|
|
gap: 10px;
|
|
color: var(--theme-red-hover);
|
|
}
|
|
|
|
/* Document Card */
|
|
.doc-card {
|
|
background: #ffffff;
|
|
border-radius: 16px;
|
|
padding: 24px 20px;
|
|
border: 1px solid #E2E8F0;
|
|
box-shadow: 0 4px 16px rgba(0,0,0,0.03);
|
|
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
|
height: 100%;
|
|
}
|
|
|
|
.doc-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 12px 24px rgba(0,0,0,0.08);
|
|
border-color: #CBD5E1;
|
|
}
|
|
|
|
.doc-icon-badge {
|
|
width: 52px;
|
|
height: 52px;
|
|
border-radius: 14px;
|
|
background: #FEF2F2;
|
|
color: #DC2626;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 24px;
|
|
margin: 0 auto 16px;
|
|
}
|
|
</style>
|
|
|
|
<div class="portal-content-container">
|
|
|
|
<!-- Welcome Hero Banner -->
|
|
<div class="welcome-banner card rounded-4 mb-4">
|
|
<div class="card-body p-4 p-lg-5 d-flex align-items-center justify-content-between flex-wrap gap-3 position-relative" style="z-index: 1;">
|
|
<div>
|
|
<div class="d-flex align-items-center gap-2 mb-2 flex-wrap">
|
|
<span class="badge bg-success bg-opacity-20 text-success border border-success border-opacity-20 px-3 py-2 rounded-pill fw-semibold" style="font-size: 0.78rem;">
|
|
<i class="fa-solid fa-circle me-1" style="font-size: 7px; vertical-align: middle;"></i> Active Academic Year 2026
|
|
</span>
|
|
<span class="text-white-50 small"><i class="fa-regular fa-calendar me-1"></i> {{ date('l, F j, Y') }}</span>
|
|
</div>
|
|
<h2 class="fw-bold text-white mb-2" style="letter-spacing: -0.5px;">
|
|
Welcome Back, {{ Auth::check() ? Auth::user()->first_name : 'Student' }}! 👋
|
|
</h2>
|
|
<p class="text-white-50 mb-0 fs-6" style="max-width: 580px;">
|
|
Manage your academic activities, course schedules, and exam performance directly from your portal dashboard.
|
|
</p>
|
|
</div>
|
|
|
|
@if(Auth::check())
|
|
<div class="user-avatar-badge d-flex align-items-center gap-3 bg-white bg-opacity-10 p-3 rounded-4 backdrop-blur border border-white border-opacity-10">
|
|
<div class="avatar-circle">
|
|
{{ strtoupper(substr(Auth::user()->first_name, 0, 1)) }}
|
|
</div>
|
|
<div class="text-white d-none d-sm-block">
|
|
<div class="fw-bold fs-6">{{ Auth::user()->first_name }} {{ Auth::user()->last_name }}</div>
|
|
<div class="small fst-italic text-warning opacity-75" style="font-size: 11px;">{{ Auth::user()->email }}</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Key Performance Metrics (Stat Cards) -->
|
|
<div class="row g-3 g-lg-4 mb-4">
|
|
|
|
<div class="col-xl-3 col-md-6">
|
|
<div class="stat-card-modern">
|
|
<div class="d-flex align-items-center justify-content-between mb-3">
|
|
<div class="stat-icon-wrapper" style="background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);">
|
|
<i class="fa-solid fa-book-open-reader"></i>
|
|
</div>
|
|
<span class="badge bg-primary-subtle text-primary border border-primary-subtle px-2.5 py-1.5 rounded-pill fw-semibold" style="font-size: 0.75rem;">
|
|
<i class="fa-solid fa-circle-check me-1"></i> Active
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<div class="stat-number">6</div>
|
|
<div class="stat-label">Enrolled Courses</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-xl-3 col-md-6">
|
|
<div class="stat-card-modern">
|
|
<div class="d-flex align-items-center justify-content-between mb-3">
|
|
<div class="stat-icon-wrapper" style="background: linear-gradient(135deg, #10B981 0%, #047857 100%);">
|
|
<i class="fa-solid fa-file-signature"></i>
|
|
</div>
|
|
<span class="badge bg-warning-subtle text-warning border border-warning-subtle px-2.5 py-1.5 rounded-pill fw-semibold" style="font-size: 0.75rem;">
|
|
<i class="fa-solid fa-clock me-1"></i> Pending
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<div class="stat-number">3</div>
|
|
<div class="stat-label">Assignments Due</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-xl-3 col-md-6">
|
|
<div class="stat-card-modern">
|
|
<div class="d-flex align-items-center justify-content-between mb-3">
|
|
<div class="stat-icon-wrapper" style="background: linear-gradient(135deg, #F59E0B 0%, #B45309 100%);">
|
|
<i class="fa-solid fa-chart-line"></i>
|
|
</div>
|
|
<span class="badge bg-success-subtle text-success border border-success-subtle px-2.5 py-1.5 rounded-pill fw-semibold" style="font-size: 0.75rem;">
|
|
<i class="fa-solid fa-arrow-trend-up me-1"></i> Grade B+
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<div class="stat-number">78%</div>
|
|
<div class="stat-label">Average Result</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-xl-3 col-md-6">
|
|
<div class="stat-card-modern">
|
|
<div class="d-flex align-items-center justify-content-between mb-3">
|
|
<div class="stat-icon-wrapper" style="background: linear-gradient(135deg, #EF4444 0%, #B91C1C 100%);">
|
|
<i class="fa-solid fa-bell"></i>
|
|
</div>
|
|
<span class="badge bg-danger-subtle text-danger border border-danger-subtle px-2.5 py-1.5 rounded-pill fw-semibold" style="font-size: 0.75rem;">
|
|
<i class="fa-solid fa-bullhorn me-1"></i> Upcoming
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<div class="stat-number">2</div>
|
|
<div class="stat-label">Exam Notices</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Student Services Grid -->
|
|
<div class="mb-4">
|
|
<h5 class="fw-bold text-dark mb-3 d-flex align-items-center gap-2">
|
|
<span class="title-accent"></span> Student Services & Quick Actions
|
|
</h5>
|
|
|
|
<div class="row g-3 g-lg-4">
|
|
|
|
<div class="col-lg-4 col-md-6">
|
|
<a href="/mycourse" class="service-card-modern">
|
|
<div>
|
|
<div class="service-icon-box">
|
|
<i class="fa-solid fa-book-bookmark"></i>
|
|
</div>
|
|
<h5>My Courses</h5>
|
|
<p>Access all registered learning modules, video lectures, and syllabus materials.</p>
|
|
</div>
|
|
<div class="action-link">
|
|
Explore Courses <i class="fa-solid fa-arrow-right"></i>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-md-6">
|
|
<a href="/timetable" class="service-card-modern">
|
|
<div>
|
|
<div class="service-icon-box">
|
|
<i class="fa-solid fa-calendar-days"></i>
|
|
</div>
|
|
<h5>Class Timetable</h5>
|
|
<p>Check your weekly lecture schedules, classroom locations, and timing updates.</p>
|
|
</div>
|
|
<div class="action-link">
|
|
View Schedule <i class="fa-solid fa-arrow-right"></i>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-md-6">
|
|
<a href="/results" class="service-card-modern">
|
|
<div>
|
|
<div class="service-icon-box">
|
|
<i class="fa-solid fa-award"></i>
|
|
</div>
|
|
<h5>Exam Results</h5>
|
|
<p>Review semester examination grades, transcript records, and academic progress.</p>
|
|
</div>
|
|
<div class="action-link">
|
|
View Marks <i class="fa-solid fa-arrow-right"></i>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-md-6">
|
|
<a href="/Studentguidelines" class="service-card-modern">
|
|
<div>
|
|
<div class="service-icon-box">
|
|
<i class="fa-solid fa-book-open"></i>
|
|
</div>
|
|
<h5>Student Guidelines</h5>
|
|
<p>Read campus rules, academic regulations, safety procedures, and code of conduct.</p>
|
|
</div>
|
|
<div class="action-link">
|
|
Read Guidelines <i class="fa-solid fa-arrow-right"></i>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-md-6">
|
|
<a href="/Feedback&Complain" class="service-card-modern">
|
|
<div>
|
|
<div class="service-icon-box">
|
|
<i class="fa-solid fa-comments"></i>
|
|
</div>
|
|
<h5>Feedback & Complaints</h5>
|
|
<p>Submit inquiries, suggestions, or complaints directly to the student support team.</p>
|
|
</div>
|
|
<div class="action-link">
|
|
Submit Inquiry <i class="fa-solid fa-arrow-right"></i>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-md-6">
|
|
<a href="/StudentProfile" class="service-card-modern">
|
|
<div>
|
|
<div class="service-icon-box">
|
|
<i class="fa-solid fa-id-card"></i>
|
|
</div>
|
|
<h5>Student Profile</h5>
|
|
<p>View and update your personal contact details, credentials, and security PIN.</p>
|
|
</div>
|
|
<div class="action-link">
|
|
Manage Profile <i class="fa-solid fa-arrow-right"></i>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Official Document Downloads Section -->
|
|
<div class="mb-5">
|
|
<h5 class="fw-bold text-dark mb-3 d-flex align-items-center gap-2">
|
|
<span class="title-accent"></span> Official Academic Documents (PDF)
|
|
</h5>
|
|
|
|
<div class="row g-3 g-lg-4">
|
|
<div class="col-xl-3 col-md-6">
|
|
<a href="{{ route('student.download.calendar') }}" class="text-decoration-none" target="_blank">
|
|
<div class="doc-card text-center">
|
|
<div class="doc-icon-badge">
|
|
<i class="fa-solid fa-file-pdf"></i>
|
|
</div>
|
|
<h6 class="fw-bold text-dark mb-1">Academic Calendar</h6>
|
|
<small class="text-muted d-block mb-3">Semester dates & holidays</small>
|
|
<span class="btn btn-sm btn-outline-danger rounded-pill px-3 fw-semibold">
|
|
<i class="fa-solid fa-download me-1"></i> Download PDF
|
|
</span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="col-xl-3 col-md-6">
|
|
<a href="{{ route('student.download.handbook') }}" class="text-decoration-none" target="_blank">
|
|
<div class="doc-card text-center">
|
|
<div class="doc-icon-badge">
|
|
<i class="fa-solid fa-file-pdf"></i>
|
|
</div>
|
|
<h6 class="fw-bold text-dark mb-1">Student Handbook</h6>
|
|
<small class="text-muted d-block mb-3">Campus rules & policies</small>
|
|
<span class="btn btn-sm btn-outline-danger rounded-pill px-3 fw-semibold">
|
|
<i class="fa-solid fa-download me-1"></i> Download PDF
|
|
</span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="col-xl-3 col-md-6">
|
|
<a href="{{ route('student.download.examcode') }}" class="text-decoration-none" target="_blank">
|
|
<div class="doc-card text-center">
|
|
<div class="doc-icon-badge">
|
|
<i class="fa-solid fa-file-pdf"></i>
|
|
</div>
|
|
<h6 class="fw-bold text-dark mb-1">Exam Code of Conduct</h6>
|
|
<small class="text-muted d-block mb-3">Examination guidelines</small>
|
|
<span class="btn btn-sm btn-outline-danger rounded-pill px-3 fw-semibold">
|
|
<i class="fa-solid fa-download me-1"></i> Download PDF
|
|
</span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="col-xl-3 col-md-6">
|
|
<a href="{{ route('student.download.helpdesk') }}" class="text-decoration-none" target="_blank">
|
|
<div class="doc-card text-center">
|
|
<div class="doc-icon-badge">
|
|
<i class="fa-solid fa-file-pdf"></i>
|
|
</div>
|
|
<h6 class="fw-bold text-dark mb-1">Helpdesk Support Guide</h6>
|
|
<small class="text-muted d-block mb-3">IT & portal assistance</small>
|
|
<span class="btn btn-sm btn-outline-danger rounded-pill px-3 fw-semibold">
|
|
<i class="fa-solid fa-download me-1"></i> Download PDF
|
|
</span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@endsection |