365 lines
11 KiB
PHP
365 lines
11 KiB
PHP
@extends('layouts.studentportalnav')
|
|
|
|
@section('title', 'My Timetable')
|
|
|
|
@section('content')
|
|
|
|
<!-- Bootstrap 5 -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<!-- Font Awesome -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
|
|
<!-- Google Font -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
|
|
<style>
|
|
:root {
|
|
--theme-navy: #2D355B; /* Primary Navy */
|
|
--theme-navy-dark: #1F2541; /* Dark Navy */
|
|
--theme-red: #822424; /* Primary Accent Red */
|
|
--theme-red-hover: #df2c3e; /* Red Hover */
|
|
--theme-yellow: #FFEA85; /* Accent Yellow/Gold */
|
|
--bg-light: #F6F6F6; /* Page Background */
|
|
--white: #ffffff;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Poppins', sans-serif;
|
|
background: var(--bg-light);
|
|
}
|
|
|
|
/* Page Header Hero Section */
|
|
.page-header {
|
|
background: linear-gradient(135deg, #2B293F 0%, #94A6F959 100%) !important;
|
|
color: var(--white);
|
|
padding: 35px 30px;
|
|
border-radius: 16px;
|
|
margin-bottom: 30px;
|
|
box-shadow: 0 8px 25px rgba(31, 37, 65, 0.15);
|
|
border-left: 5px solid var(--theme-red);
|
|
}
|
|
|
|
.page-header h2 {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.page-header p {
|
|
opacity: .85;
|
|
}
|
|
|
|
/* Info Cards & Wrapper */
|
|
.info-card {
|
|
background: var(--white);
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 16px;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, .04);
|
|
}
|
|
|
|
.today-card {
|
|
background: var(--white);
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 16px;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, .04);
|
|
padding: 25px;
|
|
height: 100%;
|
|
}
|
|
|
|
.today-card h5,
|
|
.info-card h5 {
|
|
font-weight: 600;
|
|
color: var(--theme-navy);
|
|
}
|
|
|
|
/* Timetable Card Section */
|
|
.table-card {
|
|
background: var(--white);
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 16px;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, .04);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.table thead {
|
|
background: var(--theme-navy);
|
|
color: var(--white);
|
|
}
|
|
|
|
.table thead th {
|
|
font-weight: 600;
|
|
padding: 15px 10px;
|
|
}
|
|
|
|
.table td,
|
|
.table th {
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
min-width: 140px;
|
|
}
|
|
|
|
.table tbody th {
|
|
background-color: #f8fafc;
|
|
color: var(--theme-navy);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Updated Status Badges */
|
|
.badge-theory {
|
|
background: var(--theme-navy) !important;
|
|
color: var(--white) !important;
|
|
}
|
|
|
|
.badge-practical {
|
|
background: var(--theme-red) !important;
|
|
color: var(--white) !important;
|
|
}
|
|
|
|
.badge-workshop {
|
|
background: #e67e22 !important; /* Workshop Accent */
|
|
color: var(--white) !important;
|
|
}
|
|
|
|
.badge-break {
|
|
background: var(--theme-yellow) !important;
|
|
color: var(--theme-navy-dark) !important;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.table tbody tr:hover {
|
|
background: rgba(45, 53, 91, 0.02);
|
|
transition: .3s;
|
|
}
|
|
|
|
.lunch-row {
|
|
background-color: rgba(255, 234, 133, 0.25) !important;
|
|
color: var(--theme-navy-dark);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.legend span {
|
|
margin-right: 12px;
|
|
display: inline-block;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.legend .badge {
|
|
padding: 8px 14px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* Custom Buttons */
|
|
.download-btn {
|
|
border-radius: 8px;
|
|
padding: 10px 22px;
|
|
background-color: var(--theme-red) !important;
|
|
color: var(--white) !important;
|
|
border: none;
|
|
font-weight: 500;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.download-btn:hover {
|
|
background-color: var(--theme-red-hover) !important;
|
|
color: var(--white) !important;
|
|
}
|
|
|
|
@media(max-width:768px) {
|
|
.table td,
|
|
.table th {
|
|
font-size: 13px;
|
|
min-width: 120px;
|
|
}
|
|
|
|
.page-header {
|
|
padding: 25px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div class="container py-4">
|
|
|
|
<!-- Header -->
|
|
<div class="page-header">
|
|
<div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
|
|
<div>
|
|
<h2 class="mb-1"><i class="fas fa-calendar-alt me-2" style="color: var(--theme-yellow);"></i>My Class Timetable</h2>
|
|
<p class="mb-0">
|
|
Automobile Engineering Academy Student Portal
|
|
</p>
|
|
</div>
|
|
|
|
<button class="btn download-btn shadow-sm" onclick="window.print()">
|
|
<i class="fas fa-print me-2"></i>Print Timetable
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Top Grid Info -->
|
|
<div class="row g-4 mb-4">
|
|
|
|
<!-- Today's Schedule Card -->
|
|
<div class="col-lg-4">
|
|
<div class="today-card">
|
|
<h5 class="mb-3">
|
|
<i class="fas fa-clock me-2" style="color: var(--theme-red);"></i>
|
|
Today's Schedule
|
|
</h5>
|
|
|
|
<div class="mb-3 p-2 rounded" style="background: #f8fafc; border-left: 3px solid var(--theme-navy);">
|
|
<strong>08:30 - 10:30</strong><br>
|
|
<span class="badge badge-theory me-1">Theory</span>
|
|
<span>Engine Fundamentals</span>
|
|
</div>
|
|
|
|
<div class="mb-3 p-2 rounded" style="background: #f8fafc; border-left: 3px solid #e67e22;">
|
|
<strong>10:45 - 12:30</strong><br>
|
|
<span class="badge badge-workshop me-1">Workshop</span>
|
|
<span>Practical Session</span>
|
|
</div>
|
|
|
|
<div class="p-2 rounded" style="background: #f8fafc; border-left: 3px solid var(--theme-red);">
|
|
<strong>01:30 - 03:30</strong><br>
|
|
<span class="badge badge-practical me-1">Practical</span>
|
|
<span>Electrical System</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Legend Card -->
|
|
<div class="col-lg-8">
|
|
<div class="info-card p-4 h-100 d-flex flex-column justify-content-between">
|
|
<div>
|
|
<h5 class="mb-3">
|
|
<i class="fas fa-info-circle me-2" style="color: var(--theme-navy);"></i>
|
|
Timetable Legend
|
|
</h5>
|
|
|
|
<div class="legend mb-2">
|
|
<span>
|
|
<span class="badge badge-theory">Theory</span>
|
|
</span>
|
|
<span>
|
|
<span class="badge badge-practical">Practical</span>
|
|
</span>
|
|
<span>
|
|
<span class="badge badge-workshop">Workshop</span>
|
|
</span>
|
|
<span>
|
|
<span class="badge badge-break">Break</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<hr class="text-muted">
|
|
<p class="mb-0 text-muted small">
|
|
<i class="fas fa-exclamation-circle me-1" style="color: var(--theme-red);"></i>
|
|
Please arrive at least 15 minutes before each class. Attendance is compulsory for all practical sessions.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Timetable Grid -->
|
|
<div class="table-card">
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered align-middle mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th>Time</th>
|
|
<th>Monday</th>
|
|
<th>Tuesday</th>
|
|
<th>Wednesday</th>
|
|
<th>Thursday</th>
|
|
<th>Friday</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th>08:30 - 10:30</th>
|
|
<td>
|
|
<span class="badge badge-theory mb-1">Theory</span><br>
|
|
Engine Fundamentals
|
|
</td>
|
|
<td>
|
|
<span class="badge badge-practical mb-1">Practical</span><br>
|
|
Engine Lab
|
|
</td>
|
|
<td>
|
|
<span class="badge badge-theory mb-1">Theory</span><br>
|
|
Transmission
|
|
</td>
|
|
<td>
|
|
<span class="badge badge-workshop mb-1">Workshop</span><br>
|
|
Engine Repair
|
|
</td>
|
|
<td>
|
|
<span class="badge badge-theory mb-1">Theory</span><br>
|
|
Vehicle Safety
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th>10:45 - 12:30</th>
|
|
<td>
|
|
<span class="badge badge-workshop mb-1">Workshop</span><br>
|
|
Service Practice
|
|
</td>
|
|
<td>
|
|
<span class="badge badge-theory mb-1">Theory</span><br>
|
|
Electrical
|
|
</td>
|
|
<td>
|
|
<span class="badge badge-practical mb-1">Practical</span><br>
|
|
Diagnostics
|
|
</td>
|
|
<td>
|
|
<span class="badge badge-theory mb-1">Theory</span><br>
|
|
Fuel System
|
|
</td>
|
|
<td>
|
|
<span class="badge badge-workshop mb-1">Workshop</span><br>
|
|
Engine Assembly
|
|
</td>
|
|
</tr>
|
|
|
|
<tr class="lunch-row">
|
|
<th>12:30 - 01:30</th>
|
|
<td colspan="5">
|
|
🍴 LUNCH BREAK
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th>01:30 - 03:30</th>
|
|
<td>
|
|
<span class="badge badge-practical mb-1">Practical</span><br>
|
|
Electrical System
|
|
</td>
|
|
<td>
|
|
<span class="badge badge-workshop mb-1">Workshop</span><br>
|
|
Welding
|
|
</td>
|
|
<td>
|
|
<span class="badge badge-theory mb-1">Theory</span><br>
|
|
Auto Electronics
|
|
</td>
|
|
<td>
|
|
<span class="badge badge-practical mb-1">Practical</span><br>
|
|
Brake System
|
|
</td>
|
|
<td>
|
|
<span class="badge badge-theory mb-1">Theory</span><br>
|
|
Revision
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@endsection |