imadhi
/
academy
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ui change new themes

This commit is contained in:
imadhigp 2026-07-23 16:53:17 +05:30
parent 5ca81c9b24
commit a03cfc0f40
11 changed files with 2042 additions and 1896 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

356
resources/views/Feedback&Complain.blade.php
View File

@ -1,111 +1,170 @@
@extends('layouts.studentportalnav') @extends('layouts.studentportalnav')
@section('title','Feedback & Complaint') @section('title', 'Feedback & Complaint')
@section('content') @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> <style>
body{ :root {
background:#f6f7fb; --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);
} }
/* Header */ /* Header */
.feedback-header{ .feedback-header {
background:linear-gradient(135deg,#5E244E,#4a1c3e); background: linear-gradient(135deg, #2B293F 0%, #94A6F959 100%) !important;
color:white; color: var(--white);
padding:40px; padding: 35px 30px;
border-radius:20px; border-radius: 16px;
margin-bottom:35px; margin-bottom: 30px;
box-shadow:0 15px 35px rgba(0,0,0,.12); box-shadow: 0 8px 25px rgba(31, 37, 65, 0.15);
border-left: 5px solid var(--theme-red);
} }
.feedback-header h2{ .feedback-header h2 {
font-weight:700; font-weight: 700;
} }
.feedback-header p{ .feedback-header p {
color:#ddd; color: rgba(255, 255, 255, 0.85);
margin-bottom: 0;
} }
/* Cards */ /* Cards */
.feedback-card{ .feedback-card {
background:#fff; background: var(--white);
border-radius:20px; border: 1px solid #e2e8f0;
border:none; border-radius: 16px;
padding:30px; padding: 30px;
box-shadow:0 10px 30px rgba(0,0,0,.08); box-shadow: 0 4px 15px rgba(0, 0, 0, .04);
height:100%; height: 100%;
} }
.card-title{ .card-title {
color:#5E244E; color: var(--theme-navy);
font-weight:700; font-weight: 700;
margin-bottom:25px; margin-bottom: 25px;
} }
.card-title i{ .card-title i {
color:#d4af37; color: var(--theme-red);
margin-right:8px; margin-right: 8px;
}
/* Form Controls */
.form-label {
font-weight: 600;
color: var(--theme-navy);
font-size: 14px;
} }
/* Inputs */
.form-control, .form-control,
.form-select{ .form-select {
border-radius:15px; border-radius: 10px;
padding:12px; padding: 12px 15px;
border:1px solid #ddd; border: 1px solid #cbd5e1;
font-size: 14px;
} }
.form-control:focus, .form-control:focus,
.form-select:focus{ .form-select:focus {
border-color:#744a68; border-color: var(--theme-navy);
box-shadow:0 0 0 .2rem rgba(94,36,78,.15); box-shadow: 0 0 0 0.25rem rgba(45, 53, 91, 0.15);
} }
/* Button */ /* Buttons */
.submit-btn{ .submit-btn {
background:#5E244E; background: var(--theme-red) !important;
color:white; color: var(--white) !important;
border:none; border: none;
border-radius:50px; border-radius: 8px;
padding:12px 30px; padding: 12px 30px;
font-weight:600; font-weight: 600;
transition: all 0.2s ease;
width: 100%;
} }
.submit-btn:hover{ .submit-btn:hover {
background:#4a1c3e; background: var(--theme-red-hover) !important;
color:#fff; color: var(--white) !important;
} }
/* History */ /* History Card */
.history-card{ .history-card {
margin-top:35px; margin-top: 35px;
background:white; background: var(--white);
border-radius:20px; border: 1px solid #e2e8f0;
overflow:hidden; border-radius: 16px;
box-shadow:0 10px 30px rgba(0,0,0,.08); overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, .04);
} }
.history-head{ .history-head {
background:#5E244E; background: var(--theme-navy);
color:white; color: var(--white);
padding:18px 25px; padding: 18px 25px;
} }
.badge-status{ .history-head h5 {
padding:7px 15px; font-weight: 700;
border-radius:50px; margin: 0;
font-size:13px;
} }
.pending{ .table th {
background:#fff3cd; background: #f8fafc;
color:#856404; color: var(--theme-navy);
font-weight: 600;
border-bottom: 2px solid #e2e8f0;
padding: 14px 20px;
} }
.resolved{ .table td {
background:#d1e7dd; vertical-align: middle;
color:#0f5132; padding: 14px 20px;
}
/* Status Badges */
.badge-status {
padding: 6px 14px;
border-radius: 30px;
font-size: 12px;
font-weight: 600;
display: inline-block;
}
.pending {
background: rgba(255, 234, 133, 0.4);
color: #856404;
}
.resolved {
background: #d1e7dd;
color: #0f5132;
}
@media(max-width:768px) {
.feedback-header, .feedback-card {
padding: 25px;
}
} }
</style> </style>
@ -113,89 +172,21 @@ body{
<!-- Header --> <!-- Header -->
<div class="feedback-header"> <div class="feedback-header">
<h2><i class="fas fa-comments"></i> Feedback & Complaint</h2> <h2 class="mb-1"><i class="fas fa-comments me-2" style="color: var(--theme-yellow);"></i> Feedback & Complaint</h2>
<p> Share your suggestions, feedback, or complaints with the <p>Share your suggestions, feedback, or complaints with the Automobile Engineering Academy management team.</p>
Automobile Engineering Academy management team.</p>
</div> </div>
<div class="row g-4"> <!-- Alert Messages (Validation & Success) -->
<!-- Feedback Form -->
<div class="col-lg-6">
<div class="feedback-card">
<h4 class="card-title"><i class="fas fa-star"></i> Submit Feedback</h4>
<form id="feedbackForm" action="{{ route('feedback.store') }}" method="POST">
@csrf
<div class="mb-3">
<label class="form-label"> Feedback Type </label>
<!-- Added name="feedback_type" -->
<select class="form-select" id="feedbackType" name="feedback_type" required>
<option value=""> Select Type </option>
<option value="Course">Course</option>
<option value="Lecturer">Lecturer </option>
<option value="Workshop">Workshop </option>
<option value="Facilities"> Facilities </option>
</select>
</div>
<div class="mb-3">
<label class="form-label">Subject </label>
<!-- Added name="subject" -->
<input type="text" class="form-control" id="feedbackSubject" name="subject" placeholder="Enter subject" required>
</div>
<div class="mb-3">
<label class="form-label">Your Feedback </label>
<!-- Added name="feedback_text" -->
<textarea class="form-control" id="feedbackText" name="feedback_text" rows="5" placeholder="Write your feedback" required></textarea>
</div>
<button type="submit" class="submit-btn">
<i class="fas fa-paper-plane"></i>Submit Feedback
</button>
</form>
</div>
</div>
<!-- Complaint Form -->
<!-- <div class="col-lg-6">
<div class="feedback-card">
<h4 class="card-title"><i class="fas fa-exclamation-triangle"></i> Submit Complaint</h4>
<form id="complaintForm">
<div class="mb-3">
<label class="form-label"> Complaint Category</label>
<select class="form-select" id="complaintCategory" required>
<option value="">Select Category </option>
<option value="Academic Issue"> Academic Issue</option>
<option value="Staff Issue">Staff Issue </option>
<option value="Technical Issue">Technical Issue</option>
<option value="Other">Other</option>
</select>
</div>
<div class="mb-3">
<label class="form-label"> Complaint Title </label>
<input type="text" class="form-control" id="complaintTitle" placeholder="Enter complaint title" required>
</div>
<div class="mb-3">
<label class="form-label"> Complaint Details</label>
<textarea class="form-control" id="complaintDetails" rows="5" placeholder="Explain your complaint" required></textarea>
</div>
<button type="submit" class="submit-btn">
<i class="fas fa-paper-plane"></i>Submit Complaint
</button>
</form>
</div>
</div>
</div> -->
<form id="feedbackForm" action="{{ route('feedback.store') }}" method="POST">
@csrf
@if(session('success')) @if(session('success'))
<div class="alert alert-success alert-dismissible fade show" role="alert"> <div class="alert alert-success alert-dismissible fade show rounded-3 mb-4" role="alert">
{{ session('success') }} <i class="fas fa-check-circle me-2"></i>{{ session('success') }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div> </div>
@endif @endif
@if ($errors->any()) @if ($errors->any())
<div class="alert alert-danger"> <div class="alert alert-danger rounded-3 mb-4">
<ul class="mb-0"> <ul class="mb-0 ps-3">
@foreach ($errors->all() as $error) @foreach ($errors->all() as $error)
<li>{{ $error }}</li> <li>{{ $error }}</li>
@endforeach @endforeach
@ -203,14 +194,23 @@ body{
</div> </div>
@endif @endif
<div class="row g-4">
<!-- Feedback Form -->
<div class="col-lg-6">
<div class="feedback-card">
<h4 class="card-title"><i class="fas fa-star"></i> Submit Feedback</h4>
<form id="feedbackForm" action="{{ route('feedback.store') }}" method="POST">
@csrf
<div class="mb-3"> <div class="mb-3">
<label class="form-label"> Feedback Type </label> <label class="form-label"> Feedback Type </label>
<select class="form-select" id="feedbackType" name="feedback_type" required> <select class="form-select" id="feedbackType" name="feedback_type" required>
<option value=""> Select Type </option> <option value=""> Select Type </option>
<option value="Course" {{ old('feedback_type') == 'Course' ? 'selected' : '' }}>Course</option> <option value="Course" {{ old('feedback_type') == 'Course' ? 'selected' : '' }}>Course</option>
<option value="Lecturer" {{ old('feedback_type') == 'Lecturer' ? 'selected' : '' }}>Lecturer</option> <option value="Lecturer" {{ old('feedback_type') == 'Lecturer' ? 'selected' : '' }}>Lecturer </option>
<option value="Workshop" {{ old('feedback_type') == 'Workshop' ? 'selected' : '' }}>Workshop</option> <option value="Workshop" {{ old('feedback_type') == 'Workshop' ? 'selected' : '' }}>Workshop </option>
<option value="Facilities" {{ old('feedback_type') == 'Facilities' ? 'selected' : '' }}>Facilities</option> <option value="Facilities" {{ old('feedback_type') == 'Facilities' ? 'selected' : '' }}> Facilities </option>
</select> </select>
</div> </div>
@ -219,24 +219,64 @@ body{
<input type="text" class="form-control" id="feedbackSubject" name="subject" value="{{ old('subject') }}" placeholder="Enter subject" required> <input type="text" class="form-control" id="feedbackSubject" name="subject" value="{{ old('subject') }}" placeholder="Enter subject" required>
</div> </div>
<div class="mb-3"> <div class="mb-4">
<label class="form-label">Your Feedback </label> <label class="form-label">Your Feedback </label>
<textarea class="form-control" id="feedbackText" name="feedback_text" rows="5" placeholder="Write your feedback" required>{{ old('feedback_text') }}</textarea> <textarea class="form-control" id="feedbackText" name="feedback_text" rows="5" placeholder="Write your feedback" required>{{ old('feedback_text') }}</textarea>
</div> </div>
<button type="submit" class="submit-btn"> <button type="submit" class="submit-btn shadow-sm">
<i class="fas fa-paper-plane"></i> Submit Feedback <i class="fas fa-paper-plane me-2"></i>Submit Feedback
</button> </button>
</form> </form>
</div>
</div>
<!-- Complaint Form -->
<div class="col-lg-6">
<div class="feedback-card">
<h4 class="card-title"><i class="fas fa-exclamation-triangle"></i> Submit Complaint</h4>
<form id="complaintForm" action="{{ route('feedback.store') }}" method="POST">
@csrf
<input type="hidden" name="is_complaint" value="1"> <!-- IF NEEDED FOR BACKEND -->
<div class="mb-3">
<label class="form-label"> Complaint Category</label>
<select class="form-select" id="complaintCategory" name="complaint_category" required>
<option value="">Select Category </option>
<option value="Academic Issue"> Academic Issue</option>
<option value="Staff Issue">Staff Issue </option>
<option value="Technical Issue">Technical Issue</option>
<option value="Other">Other</option>
</select>
</div>
<div class="mb-3">
<label class="form-label"> Complaint Title </label>
<input type="text" class="form-control" id="complaintTitle" name="complaint_title" placeholder="Enter complaint title" required>
</div>
<div class="mb-4">
<label class="form-label"> Complaint Details</label>
<textarea class="form-control" id="complaintDetails" name="complaint_details" rows="5" placeholder="Explain your complaint" required></textarea>
</div>
<button type="submit" class="submit-btn shadow-sm">
<i class="fas fa-paper-plane me-2"></i>Submit Complaint
</button>
</form>
</div>
</div>
</div>
<!-- Previous History Table --> <!-- Previous History Table -->
<div class="history-card"> <div class="history-card">
<div class="history-head"> <div class="history-head">
<h4 class="mb-0"><i class="fas fa-history"></i> Previous Requests</h4> <h5><i class="fas fa-history me-2" style="color: var(--theme-yellow);"></i> Previous Requests</h5>
</div> </div>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-hover mb-0"> <table class="table table-hover align-middle mb-0">
<thead> <thead>
<tr> <tr>
<th> Type </th> <th> Type </th>
@ -248,16 +288,16 @@ body{
<tbody id="historyTableBody"> <tbody id="historyTableBody">
<tr> <tr>
<td>Feedback</td> <td><span class="fw-semibold" style="color: var(--theme-navy);">Feedback</span></td>
<td>Workshop Equipment </td> <td>Workshop Equipment </td>
<td>10 July 2026</td> <td>10 July 2026</td>
<td><span class="badge-status resolved"> Resolved</span></td> <td><span class="badge-status resolved"><i class="fas fa-check me-1"></i> Resolved</span></td>
</tr> </tr>
<tr> <tr>
<td>Complaint</td> <td><span class="fw-semibold" style="color: var(--theme-navy);">Complaint</span></td>
<td>Class Schedule Issue </td> <td>Class Schedule Issue </td>
<td>05 July 2026 </td> <td>05 July 2026 </td>
<td><span class="badge-status pending"> Pending </span></td> <td><span class="badge-status pending"><i class="fas fa-clock me-1"></i> Pending </span></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -266,6 +306,4 @@ body{
</div> </div>
@endsection @endsection

498
resources/views/StudentPortal.blade.php
View File

@ -1,311 +1,295 @@
@extends('layouts.studentportalnav') @extends('layouts.studentportalnav')
@section('title','Dashboard') @section('title', 'Dashboard')
@section('content') @section('content')
<style> <style>
:root{ :root {
--primary:#5E244E; --theme-navy: #2D355B; /* Primary Dark Navy */
--secondary:#8B3A74; --theme-footer-navy: #1F2541; /* Darker Navy */
--light:#f5f6fb; --theme-red: #822424; /* Primary Accent Red */
--dark:#2d2d2d; --theme-red-hover: #df2c3e; /* Red Hover State */
--theme-yellow: #FFEA85; /* Accent Gold/Yellow */
--theme-bg: #F6F6F6; /* Page Background */
--text-dark: #333333;
} }
body{ body {
background:var(--light); background-color: var(--theme-bg);
color: var(--text-dark);
} }
/* Header */ /* Header */
.dashboard-header{ .dashboard-header {
display:flex; display: flex;
justify-content:space-between; justify-content: space-between;
align-items:center; align-items: center;
margin-bottom:30px; margin-bottom: 30px;
padding-bottom: 15px;
border-bottom: 2px solid #e2e8f0;
} }
.dashboard-header h2{ .dashboard-header h2 {
font-weight:700; font-weight: 700;
color:var(--dark); color: var(--theme-navy);
margin-bottom: 5px;
} }
.dashboard-header p{ .dashboard-header p {
color:#777; color: #6c757d;
margin:0; margin: 0;
font-size: 0.95rem;
} }
.avatar{ .avatar {
width:55px; width: 55px;
height:55px; height: 55px;
border-radius:50%; border-radius: 50%;
background:var(--primary); background: var(--theme-navy);
color:#fff; color: var(--theme-yellow);
display:flex; display: flex;
align-items:center; align-items: center;
justify-content:center; justify-content: center;
font-weight:bold; font-weight: bold;
font-size:20px; font-size: 20px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
} }
/* Statistic Cards */ /* Statistic Cards */
.stat-card {
.stat-card{ background: #ffffff;
background:#fff; border-radius: 12px;
border-radius:15px; padding: 24px;
padding:25px; box-shadow: 0 4px 12px rgba(0,0,0,0.05);
box-shadow:0 8px 20px rgba(0,0,0,.08); transition: all 0.3s ease;
transition:.3s; height: 100%;
height:100%; border: 1px solid #e2e8f0;
} }
.stat-card:hover{ .stat-card:hover {
transform:translateY(-6px); transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(45, 53, 91, 0.12);
border-color: var(--theme-navy);
} }
.stat-icon{ .stat-icon {
width:60px; width: 55px;
height:60px; height: 55px;
border-radius:12px; border-radius: 10px;
display:flex; display: flex;
justify-content:center; justify-content: center;
align-items:center; align-items: center;
color:#fff; color: #ffffff;
font-size:22px; font-size: 22px;
margin-bottom:20px; margin-bottom: 16px;
} }
.stat-card h3{ .stat-card h3 {
font-weight:700; font-weight: 700;
margin-bottom:5px; color: var(--theme-navy);
margin-bottom: 4px;
} }
.stat-card p{ .stat-card p {
color:#777; color: #6c757d;
margin:0; font-size: 0.9rem;
font-weight: 600;
margin: 0;
} }
/* Services */ /* Services */
.section-title {
.section-title{ font-size: 22px;
font-size:24px; font-weight: 700;
font-weight:bold; color: var(--theme-navy);
margin:40px 0 20px; margin: 40px 0 20px;
display: flex;
align-items: center;
gap: 10px;
} }
.service-card{ .section-title::before {
background:#fff; content: '';
border-radius:15px; display: inline-block;
padding:30px; width: 5px;
text-align:center; height: 24px;
transition:.3s; background-color: var(--theme-red);
box-shadow:0 8px 20px rgba(0,0,0,.08); border-radius: 2px;
height:100%;
} }
.service-card:hover{ .service-card {
transform:translateY(-8px); background: #ffffff;
border-radius: 12px;
padding: 30px 20px;
text-align: center;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
height: 100%;
border: 1px solid #e2e8f0;
} }
.service-card i{ .service-card:hover {
font-size:45px; transform: translateY(-6px);
color: #6C2B2E; box-shadow: 0 8px 22px rgba(0,0,0,0.1);
margin-bottom:20px; border-color: var(--theme-red);
} }
.service-card h5{ .service-card i {
font-weight:700; font-size: 40px;
color: #773939; color: var(--theme-red);
margin-bottom: 16px;
transition: transform 0.3s ease, color 0.3s ease;
} }
.service-card p{ .service-card:hover i {
color:#777; transform: scale(1.1);
font-size:14px; color: var(--theme-red-hover);
}
.service-card h5 {
font-weight: 700;
color: var(--theme-navy);
margin-bottom: 10px;
}
.service-card p {
color: #6c757d;
font-size: 13.5px;
margin: 0;
line-height: 1.5;
} }
</style> </style>
<div class="container-fluid"> <div class="container-fluid">
<div class="dashboard-header"> <!-- Dashboard Header -->
<div class="dashboard-header">
<div> <div>
<h2>Welcome Back, student <h2>Welcome Back, {{ Auth::check() ? Auth::user()->first_name : 'Student' }}!</h2>
<p>Manage your academic activities from your dashboard.</p> <p>Manage your academic activities and course updates from your dashboard.</p>
</div> </div>
<!-- <div class="avatar"> @if(Auth::check())
S <div class="avatar" title="{{ Auth::user()->first_name }}">
</div> --> {{ strtoupper(substr(Auth::user()->first_name, 0, 1)) }}
</div>
</div> @endif
</div>
<!-- Statistics -->
<!-- Statistics Cards -->
<div class="row g-4"> <div class="row g-4">
<div class="col-lg-3 col-md-6"> <div class="col-lg-3 col-md-6">
<div class="stat-card"> <div class="stat-card">
<div class="stat-icon" style="background: var(--theme-navy);">
<div class="stat-icon" style="background:#5E244E;"> <i class="fa-solid fa-book"></i>
<i class="fa-solid fa-book"></i> </div>
</div> <h3>6</h3>
<p>Enrolled Courses</p>
<h3>6</h3> </div>
<p>Enrolled Courses</p> </div>
</div> <div class="col-lg-3 col-md-6">
</div> <div class="stat-card">
<div class="stat-icon" style="background: #0d9488;">
<div class="col-lg-3 col-md-6"> <i class="fa-solid fa-file-lines"></i>
<div class="stat-card"> </div>
<h3>3</h3>
<div class="stat-icon" style="background:#0d9488;"> <p>Assignments</p>
<i class="fa-solid fa-file-lines"></i> </div>
</div> </div>
<h3>3</h3> <div class="col-lg-3 col-md-6">
<p>Assignments</p> <div class="stat-card">
<div class="stat-icon" style="background: #d97706;">
</div> <i class="fa-solid fa-chart-column"></i>
</div> </div>
<h3>78%</h3>
<div class="col-lg-3 col-md-6"> <p>Average Result</p>
<div class="stat-card"> </div>
</div>
<div class="stat-icon" style="background:#d97706;">
<i class="fa-solid fa-chart-column"></i> <div class="col-lg-3 col-md-6">
</div> <div class="stat-card">
<div class="stat-icon" style="background: var(--theme-red);">
<h3>78%</h3> <i class="fa-solid fa-bell"></i>
<p>Average Result</p> </div>
<h3>2</h3>
</div> <p>Exam Notices</p>
</div> </div>
</div>
<div class="col-lg-3 col-md-6">
<div class="stat-card"> </div>
<div class="stat-icon" style="background:#dc2626;"> <!-- Student Services Section -->
<i class="fa-solid fa-bell"></i> <div class="section-title">
</div> Student Services
</div>
<h3>2</h3>
<p>Exam Notices</p> <div class="row g-4">
</div> <div class="col-lg-4 col-md-6">
</div> <a href="/mycourse" class="text-decoration-none">
</div>
<!-- Services -->
<div class="section-title">
Student Services
</div>
<div class="row g-4">
<div class="col-lg-4 col-md-6" >
<a href="/mycourse" class="text-decoration-none" style="color:#5E244E">
<div class="service-card">
<i class="fa-solid fa-book"></i>
<h5>My Courses</h5>
<p>Access all learning materials and course content.</p>
</div>
</a>
</div>
<div class="col-lg-4 col-md-6" >
<a href="/timetable" class="text-decoration-none" style="color:#5E244E">
<div class="service-card">
<i class="fa-solid fa-calendar-days"></i>
<h5>Class Timetable</h5>
<p>View your weekly lecture timetable.</p>
</div>
</a>
</div>
<div class="col-lg-4 col-md-6">
<a href="/Assignments" class="text-decoration-none" style="color:#5E244E">
<div class="service-card">
<i class="fa-solid fa-file-lines"></i>
<h5>Assignments</h5>
<p>Submit and manage assignments.</p>
</div>
</a>
</div>
<div class="col-lg-4 col-md-6">
<a href="/results" class="text-decoration-none" style="color:#5E244E">
<div class="service-card">
<i class="fa-solid fa-square-poll-vertical"></i>
<h5>Exam Results</h5>
<p>Check semester examination results.</p>
</div>
</a>
</div>
<div class="col-lg-4 col-md-6">
<a href="/Feedback&Complain" class="text-decoration-none"style="color:#5E244E">
<div class="service-card">
<i class="fa-solid fa-comments"></i>
<h5>Feedback & Complaint</h5>
<p>Send feedback and contact administration.</p>
</div>
</a>
</div>
<div class="col-lg-4 col-md-6">
<a href="/StudentProfile" class="text-decoration-none"style="color:#5E244E">
<div class="service-card">
<i class="fa-solid fa-user"></i>
<!-- <a href="{{ route('StudentProfile') }}" class="text-decoration-none"style="color:#5E244E">
<div class="service-card"> <div class="service-card">
<i class="fas fa-user"></i> Profile <i class="fa-solid fa-book"></i>
</a> --> <h5>My Courses</h5>
<h5>Student Profile</h5> <p>Access all learning materials, lectures, and course content.</p>
</div>
</a>
</div>
<p>Update your personal information.</p> <div class="col-lg-4 col-md-6">
<a href="/timetable" class="text-decoration-none">
<div class="service-card">
<i class="fa-solid fa-calendar-days"></i>
<h5>Class Timetable</h5>
<p>View your weekly lecture schedule and upcoming classes.</p>
</div>
</a>
</div>
</div> <div class="col-lg-4 col-md-6">
<a href="/results" class="text-decoration-none">
<div class="service-card">
<i class="fa-solid fa-square-poll-vertical"></i>
<h5>Exam Results</h5>
<p>Check semester examination marks and performance reports.</p>
</div>
</a>
</div>
</a> <div class="col-lg-4 col-md-6">
</div> <a href="/Studentguidelines" class="text-decoration-none">
<div class="service-card">
<i class="fa-solid fa-book-open"></i>
<h5>Student Guidelines</h5>
<p>Read campus rules, regulations, and academic guidelines.</p>
</div>
</a>
</div>
</div> <div class="col-lg-4 col-md-6">
<a href="/Feedback&Complain" class="text-decoration-none">
<div class="service-card">
<i class="fa-solid fa-comments"></i>
<h5>Feedback & Complaint</h5>
<p>Send feedback or submit inquiries directly to administration.</p>
</div>
</a>
</div>
<div class="col-lg-4 col-md-6">
<a href="/StudentProfile" class="text-decoration-none">
<div class="service-card">
<i class="fa-solid fa-user"></i>
<h5>Student Profile</h5>
<p>Manage and update your personal student profile details.</p>
</div>
</a>
</div>
</div>
</div> </div>

415
resources/views/StudentProfile.blade.php
View File

@ -4,240 +4,207 @@
@section('content') @section('content')
<style> <!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
body{ <!-- Font Awesome -->
background:#f6f7fb; <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);
}
/* Header */ /* Header */
.profile-header {
.profile-header{ background: linear-gradient(135deg, var(--theme-navy) 0%, var(--theme-navy-dark) 100%) !important;
color: var(--white);
background:linear-gradient(135deg,#5E244E,#4a1c3e); border-radius: 16px;
color:#fff; padding: 35px 30px;
border-radius:20px; margin-bottom: 30px;
padding:40px; box-shadow: 0 8px 25px rgba(31, 37, 65, 0.15);
margin-bottom:35px; border-left: 5px solid var(--theme-red);
box-shadow:0 15px 35px rgba(0,0,0,.15);
} }
.profile-header h2 {
.profile-header h2{ font-weight: 700;
font-weight:700;
} }
.profile-header p {
.profile-header p{ color: rgba(255, 255, 255, 0.85);
margin-bottom: 0;
color:#ddd;
} }
/* Profile Card */ /* Profile Card */
.profile-card {
.profile-card{ background: var(--white);
border-radius: 16px;
background:#fff; padding: 30px;
border-radius:20px; border: 1px solid #e2e8f0;
padding:30px; box-shadow: 0 4px 15px rgba(0, 0, 0, .04);
box-shadow:0 10px 30px rgba(0,0,0,.08); height: 100%;
height:100%;
} }
/* Student Image */ /* Student Image */
.profile-image {
.profile-image{ width: 140px;
height: 140px;
width:150px; border-radius: 50%;
height:150px; object-fit: cover;
border-radius:50%; border: 4px solid var(--theme-navy);
object-fit:cover; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
border:6px solid #d4af37;
} }
.student-name {
.student-name{ color: var(--theme-navy);
font-weight: 700;
color:#5E244E; margin-top: 15px;
font-weight:700;
margin-top:15px;
} }
.student-id {
.student-id{ background: var(--theme-navy);
color: var(--white);
background:#5E244E; padding: 8px 20px;
color:#fff; border-radius: 50px;
padding:8px 20px; display: inline-block;
border-radius:50px; font-size: 13px;
display:inline-block; font-weight: 600;
font-size:14px; letter-spacing: 0.5px;
} }
/* Information */ /* Information */
.info-title {
.info-title{ color: var(--theme-navy);
font-weight: 700;
color:#5E244E; border-bottom: 2px solid var(--theme-yellow);
font-weight:700; padding-bottom: 10px;
border-bottom:2px solid #d4af37; margin-bottom: 20px;
padding-bottom:10px;
margin-bottom:20px;
} }
.info-title i {
.info-row{ color: var(--theme-red);
margin-right: 8px;
display:flex;
justify-content:space-between;
padding:12px 0;
border-bottom:1px solid #eee;
} }
.info-row {
.label{ display: flex;
justify-content: space-between;
color:#777; padding: 12px 0;
border-bottom: 1px solid #f1f5f9;
} }
.info-row:last-child {
.value{ border-bottom: none;
font-weight:600;
color:#333;
} }
.label {
color: #64748b;
/* Course */ font-weight: 500;
.course-box{
background:#5E244E;
color:#fff;
padding:25px;
border-radius:20px;
} }
.value {
.course-box h4{ font-weight: 600;
color: #1e293b;
color:#d4af37;
font-weight:700;
} }
/* Course Box */
.course-item{ .course-box {
background: linear-gradient(135deg, var(--theme-navy) 0%, var(--theme-navy-dark) 100%);
margin-top:12px; color: var(--white);
padding: 30px;
border-radius: 16px;
box-shadow: 0 8px 25px rgba(31, 37, 65, 0.15);
height: 100%;
} }
.course-box h4 {
.course-item i{ color: var(--theme-yellow);
font-weight: 700;
color:#d4af37; margin-bottom: 20px;
width:25px; border-bottom: 1px solid rgba(255, 255, 255, 0.15);
padding-bottom: 10px;
} }
.course-item {
margin-top: 14px;
/* Button */ font-size: 15px;
color: rgba(255, 255, 255, 0.9);
.edit-btn{
background:#d4af37;
color:white;
border:none;
border-radius:50px;
padding:12px 30px;
font-weight:600;
} }
.course-item i {
.edit-btn:hover{ color: var(--theme-yellow);
width: 28px;
background:#c49d20;
color:#fff;
} }
/* Buttons */
.edit-btn {
background: var(--theme-red) !important;
color: var(--white) !important;
border: none;
border-radius: 8px;
padding: 10px 25px;
font-weight: 600;
transition: all 0.2s ease;
}
.edit-btn:hover {
background: var(--theme-red-hover) !important;
color: var(--white) !important;
}
@media(max-width:768px) {
.profile-header, .profile-card, .course-box {
padding: 25px;
}
}
</style> </style>
<div class="container py-4"> <div class="container py-4">
<!-- Header --> <!-- Header -->
<div class="profile-header"> <div class="profile-header">
<h2> <h2>
<i class="fas fa-user-graduate me-2" style="color: var(--theme-yellow);"></i>
<i class="fas fa-user-graduate"></i>
Student Profile Student Profile
</h2> </h2>
<p> <p>
Manage your personal information and academic details. Manage your personal information and academic details.
</p> </p>
</div> </div>
<div class="row g-4"> <div class="row g-4">
<!-- Profile Left --> <!-- Profile Left -->
<div class="col-lg-4"> <div class="col-lg-4">
<div class="profile-card text-center"> <div class="profile-card text-center">
<img src="https://i.pravatar.cc/300" <img src="https://i.pravatar.cc/300" class="profile-image mb-2">
class="profile-image"> <h3 class="student-name">Kasun Perera</h3>
<h3 class="student-name">Kasun Perera </h3>
<span class="student-id"> <span class="student-id my-2">
Student ID : AEA20260045 Student ID : AEA20260045
</span> </span>
<hr> <hr class="my-3" style="color: #cbd5e1;">
<button class="edit-btn mt-3"> <button class="edit-btn shadow-sm">
<i class="fas fa-edit"></i> Edit Profile </button> <i class="fas fa-edit me-1"></i> Edit Profile
</button>
</div> </div>
</div> </div>
<!-- Details --> <!-- Details -->
<div class="col-lg-8"> <div class="col-lg-8">
<div class="profile-card"> <div class="profile-card">
@ -247,62 +214,33 @@ body{
</h4> </h4>
<div class="info-row"> <div class="info-row">
<span class="label"> <span class="label">Full Name</span>
Full Name <span class="value">Kasuni Perera</span>
</span>
<span class="value">
Kasuni Perera
</span>
</div> </div>
<div class="info-row"> <div class="info-row">
<span class="label"> <span class="label">NIC / Passport</span>
NIC / Passport <span class="value">200012345678</span>
</span>
<span class="value">
200012345678
</span>
</div> </div>
<div class="info-row"> <div class="info-row">
<span class="label"> <span class="label">Date of Birth</span>
Date of Birth <span class="value">15 March 2000</span>
</span>
<span class="value">
15 March 2000
</span>
</div> </div>
<div class="info-row"> <div class="info-row">
<span class="label"> <span class="label">Gender</span>
Gender <span class="value">Male</span>
</span>
<span class="value">
Male
</span>
</div> </div>
<div class="info-row"> <div class="info-row">
<span class="label"> <span class="label">Email</span>
Email <span class="value">student@email.com</span>
</span>
<span class="value">
student@email.com
</span>
</div> </div>
<div class="info-row"> <div class="info-row">
<span class="label"> <span class="label">Phone</span>
Phone <span class="value">+94 77 1234567</span>
</span>
<span class="value">
+94 77 1234567
</span>
</div> </div>
</div> </div>
@ -311,8 +249,6 @@ body{
<div class="row g-4 mt-1"> <div class="row g-4 mt-1">
<!-- Education --> <!-- Education -->
<div class="col-lg-6"> <div class="col-lg-6">
<div class="profile-card"> <div class="profile-card">
@ -321,66 +257,41 @@ body{
Educational Background Educational Background
</h4> </h4>
<div class="info-row"> <div class="info-row">
<span class="label"> <span class="label">Qualification</span>
Qualification <span class="value">NVQ Level 4</span>
</span>
<span class="value">
NVQ Level 4
</span>
</div> </div>
<div class="info-row"> <div class="info-row">
<span class="label"> <span class="label">Institute</span>
Institute <span class="value">ABC Technical College</span>
</span>
<span class="value">
ABC Technical College
</span>
</div> </div>
<div class="info-row"> <div class="info-row">
<span class="label"> <span class="label">Year Completed</span>
Year Completed <span class="value">2025</span>
</span> </div>
<span class="value">
2025
</span>
</div>
</div> </div>
</div> </div>
<!-- Course Details --> <!-- Course Details -->
<div class="col-lg-6"> <div class="col-lg-6">
<div class="course-box"> <div class="course-box">
<h4><i class="fas fa-car"></i>Course Details</h4> <h4><i class="fas fa-car me-2"></i>Course Details</h4>
<div class="course-item"> <div class="course-item">
<i class="fas fa-book"></i> Diploma in Automobile Engineering </div> <i class="fas fa-book"></i> Diploma in Automobile Engineering
<div class="course-item"> <i class="fas fa-calendar"></i> Duration : 2 Years</div> </div>
<div class="course-item"> <div class="course-item">
<i class="fas fa-layer-group"></i>Current Semester : Semester 2 <i class="fas fa-calendar"></i> Duration : 2 Years
</div>
<div class="course-item">
<i class="fas fa-layer-group"></i> Current Semester : Semester 2
</div>
<div class="course-item">
<i class="fas fa-user-tie"></i> Trainer : Mr. Nimal Silva
</div>
</div>
</div> </div>
<div class="course-item">
<i class="fas fa-user-tie"></i>
Trainer : Mr. Nimal Silva
</div>
</div>
</div>
</div> </div>
</div> </div>
@endsection @endsection

345
resources/views/Studentguidelines.blade.php
View File

@ -4,469 +4,348 @@
@section('content') @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> <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{ body {
background:#f6f7fb; font-family: 'Poppins', sans-serif;
background: var(--bg-light);
} }
/*========================== /*==========================
Hero Hero Section
===========================*/ ===========================*/
.guideline-hero {
.guideline-hero{ background: linear-gradient(135deg, #2B293F 0%, #94A6F959 100%) !important;
background:linear-gradient(135deg,#5E244E,#4a1c3e); border-radius: 16px;
border-radius:20px; padding: 35px 30px;
padding:45px; color: var(--white);
color:#fff; margin-bottom: 30px;
margin-bottom:35px; box-shadow: 0 8px 25px rgba(31, 37, 65, 0.15);
box-shadow:0 18px 40px rgba(0,0,0,.12); border-left: 5px solid var(--theme-red);
} }
.guideline-hero h2{ .guideline-hero h2 {
font-weight:700; font-weight: 700;
margin-bottom:10px; margin-bottom: 10px;
} }
.guideline-hero p{ .guideline-hero p {
color:#ececec; color: rgba(255, 255, 255, 0.85);
margin-bottom:0; margin-bottom: 0;
font-size:15px; font-size: 15px;
} }
/*========================== /*==========================
Cards Guide Cards
===========================*/ ===========================*/
.guide-card {
.guide-card{ background: var(--white);
border: 1px solid #e2e8f0;
background:#fff; border-radius: 16px;
border:none; box-shadow: 0 4px 15px rgba(0, 0, 0, .04);
border-radius:20px; transition: all 0.3s ease;
box-shadow:0 10px 30px rgba(0,0,0,.08); overflow: hidden;
transition:.3s; height: 100%;
overflow:hidden;
height:100%;
} }
.guide-card:hover{ .guide-card:hover {
transform: translateY(-4px);
transform:translateY(-6px); border-color: var(--theme-navy);
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
} }
.card-head{ .card-head {
background: #753636;
background:#5E244E; color: var(--white);
color:#fff; padding: 18px 22px;
padding:18px 22px;
} }
.card-head h5{ .card-head h5 {
margin: 0;
margin:0; font-weight: 600;
font-weight:600;
} }
.card-head i{ .card-head i {
color: var(--theme-yellow);
color:#d4af37; margin-right: 10px;
margin-right:10px;
} }
.card-body{ .card-body {
padding: 22px;
padding:22px;
} }
.card-body ul{ .card-body ul {
padding-left: 20px;
padding-left:20px; margin-bottom: 0;
} }
.card-body li{ .card-body li {
margin-bottom: 10px;
margin-bottom:10px; color: #475569;
color:#555; }
.card-body li:last-child {
margin-bottom: 0;
} }
/*========================== /*==========================
Alert Notice Alert Box
===========================*/ ===========================*/
.notice {
.notice{ background: rgba(255, 234, 133, 0.2);
border-left: 5px solid var(--theme-red);
background:#fff7e4; border-radius: 16px;
border-left:6px solid #d4af37; padding: 22px;
border-radius:16px; margin-top: 35px;
padding:22px; box-shadow: 0 4px 15px rgba(0, 0, 0, .03);
margin-top:35px;
box-shadow:0 8px 25px rgba(0,0,0,.06);
} }
.notice h5{ .notice h5 {
color: var(--theme-navy);
color:#5E244E; font-weight: 700;
font-weight:700;
} }
.notice p{ .notice p {
margin-bottom: 0;
margin-bottom:0; color: #475569;
color:#555;
} }
/*========================== /*==========================
Contact Contact Box
===========================*/ ===========================*/
.contact-card {
.contact-card{ margin-top: 30px;
border-radius: 16px;
margin-top:35px; background: linear-gradient(135deg, #2B293F 0%, #94A6F959 100%) !important;
border-radius:20px; color: var(--white);
background:#4a1c3e; padding: 35px;
color:#fff; box-shadow: 0 8px 25px rgba(31, 37, 65, 0.15);
padding:35px;
box-shadow:0 12px 35px rgba(0,0,0,.12);
} }
.contact-card h4{ .contact-card h4 {
color: var(--theme-yellow);
color:#d4af37; font-weight: 700;
font-weight:700;
} }
.contact-item{ .contact-item {
margin-top: 18px;
margin-top:18px; font-size: 15px;
font-size:15px;
} }
.contact-item i{ .contact-item i {
color: var(--theme-yellow);
color:#d4af37; width: 28px;
width:28px;
} }
@media(max-width:768px) {
.guideline-hero, .contact-card {
padding: 25px;
}
}
</style> </style>
<div class="container py-4"> <div class="container py-4">
<!-- Hero --> <!-- Hero -->
<div class="guideline-hero"> <div class="guideline-hero">
<h2> <h2>
<i class="fas fa-book-open"></i> <i class="fas fa-book-open me-2" style="color: var(--theme-yellow);"></i>
Student Guidelines Student Guidelines
</h2> </h2>
<p> <p>
Welcome to the Automobile Engineering Academy. These guidelines are Welcome to the Automobile Engineering Academy. These guidelines are
designed to help every student maintain professionalism, safety, designed to help every student maintain professionalism, safety,
discipline, and academic excellence throughout the training programme. discipline, and academic excellence throughout the training programme.
</p> </p>
</div> </div>
<!-- Guidelines Cards -->
<div class="row g-4"> <div class="row g-4">
<!-- Classroom --> <!-- Classroom -->
<div class="col-lg-6"> <div class="col-lg-6">
<div class="guide-card"> <div class="guide-card">
<div class="card-head"> <div class="card-head">
<h5> <h5>
<i class="fas fa-chalkboard-teacher"></i> <i class="fas fa-chalkboard-teacher"></i>
Classroom Rules Classroom Rules
</h5> </h5>
</div> </div>
<div class="card-body"> <div class="card-body">
<ul> <ul>
<li>Attend every class on time.</li> <li>Attend every class on time.</li>
<li>Maintain discipline and respect lecturers.</li> <li>Maintain discipline and respect lecturers.</li>
<li>Switch mobile phones to silent mode.</li> <li>Switch mobile phones to silent mode.</li>
<li>Complete all assignments before deadlines.</li> <li>Complete all assignments before deadlines.</li>
<li>Keep classrooms clean and organized.</li> <li>Keep classrooms clean and organized.</li>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
<!-- Workshop --> <!-- Workshop -->
<div class="col-lg-6"> <div class="col-lg-6">
<div class="guide-card"> <div class="guide-card">
<div class="card-head"> <div class="card-head">
<h5> <h5>
<i class="fas fa-tools"></i> <i class="fas fa-tools"></i>
Workshop Safety Workshop Safety
</h5> </h5>
</div> </div>
<div class="card-body"> <div class="card-body">
<ul> <ul>
<li>Wear PPE before entering workshops.</li> <li>Wear PPE before entering workshops.</li>
<li>Follow instructor safety instructions.</li> <li>Follow instructor safety instructions.</li>
<li>Never operate equipment without permission.</li> <li>Never operate equipment without permission.</li>
<li>Report damaged tools immediately.</li> <li>Report damaged tools immediately.</li>
<li>Keep workstations clean after practical sessions.</li> <li>Keep workstations clean after practical sessions.</li>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
<!-- Attendance --> <!-- Attendance -->
<div class="col-lg-6"> <div class="col-lg-6">
<div class="guide-card"> <div class="guide-card">
<div class="card-head"> <div class="card-head">
<h5> <h5>
<i class="fas fa-user-check"></i> <i class="fas fa-user-check"></i>
Attendance Policy Attendance Policy
</h5> </h5>
</div> </div>
<div class="card-body"> <div class="card-body">
<ul> <ul>
<li>Minimum attendance requirement is 80%.</li> <li>Minimum attendance requirement is 80%.</li>
<li>Medical leave must be supported by documents.</li> <li>Medical leave must be supported by documents.</li>
<li>Repeated absence may affect examinations.</li> <li>Repeated absence may affect examinations.</li>
<li>Late arrivals will be recorded.</li> <li>Late arrivals will be recorded.</li>
<li>Inform the administration if absent.</li> <li>Inform the administration if absent.</li>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
<!-- Dress --> <!-- Dress -->
<div class="col-lg-6"> <div class="col-lg-6">
<div class="guide-card"> <div class="guide-card">
<div class="card-head"> <div class="card-head">
<h5> <h5>
<i class="fas fa-user-tie"></i> <i class="fas fa-user-tie"></i>
Uniform & PPE Uniform & PPE
</h5> </h5>
</div> </div>
<div class="card-body"> <div class="card-body">
<ul> <ul>
<li>Wear academy uniform during lectures.</li> <li>Wear academy uniform during lectures.</li>
<li>Safety shoes are compulsory.</li> <li>Safety shoes are compulsory.</li>
<li>Use gloves and safety glasses.</li> <li>Use gloves and safety glasses.</li>
<li>Long hair must be tied properly.</li> <li>Long hair must be tied properly.</li>
<li>ID card must be visible at all times.</li> <li>ID card must be visible at all times.</li>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
<!-- Assessment --> <!-- Assessment -->
<div class="col-lg-6"> <div class="col-lg-6">
<div class="guide-card"> <div class="guide-card">
<div class="card-head"> <div class="card-head">
<h5> <h5>
<i class="fas fa-file-alt"></i> <i class="fas fa-file-alt"></i>
Assessment Rules Assessment Rules
</h5> </h5>
</div> </div>
<div class="card-body"> <div class="card-body">
<ul> <ul>
<li>Submit assignments before due dates.</li> <li>Submit assignments before due dates.</li>
<li>No plagiarism is permitted.</li> <li>No plagiarism is permitted.</li>
<li>Bring required materials for practical tests.</li> <li>Bring required materials for practical tests.</li>
<li>Follow examination regulations.</li> <li>Follow examination regulations.</li>
<li>Maintain academic honesty.</li> <li>Maintain academic honesty.</li>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
<!-- Conduct --> <!-- Conduct -->
<div class="col-lg-6"> <div class="col-lg-6">
<div class="guide-card"> <div class="guide-card">
<div class="card-head"> <div class="card-head">
<h5> <h5>
<i class="fas fa-handshake"></i> <i class="fas fa-handshake"></i>
Student Conduct Student Conduct
</h5> </h5>
</div> </div>
<div class="card-body"> <div class="card-body">
<ul> <ul>
<li>Respect staff and fellow students.</li> <li>Respect staff and fellow students.</li>
<li>Protect academy property.</li> <li>Protect academy property.</li>
<li>Do not smoke inside the campus.</li> <li>Do not smoke inside the campus.</li>
<li>Avoid discrimination and harassment.</li> <li>Avoid discrimination and harassment.</li>
<li>Represent the academy professionally.</li> <li>Represent the academy professionally.</li>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- Notice --> <!-- Notice -->
<div class="notice"> <div class="notice">
<h5> <h5>
<i class="fas fa-exclamation-circle text-warning"></i> <i class="fas fa-exclamation-circle me-1" style="color: var(--theme-red);"></i>
Important Notice Important Notice
</h5> </h5>
<p> <p>
Students who fail to follow academy regulations may face disciplinary Students who fail to follow academy regulations may face disciplinary
action according to the Automobile Engineering Academy Student Policy. action according to the Automobile Engineering Academy Student Policy.
</p> </p>
</div> </div>
<!-- Contact --> <!-- Contact -->
<div class="contact-card"> <div class="contact-card">
<h4> <h4>
<i class="fas fa-headset me-2"></i>
<i class="fas fa-headset"></i>
Student Support Student Support
</h4> </h4>
<p class="mt-3 text-white-50">
<p class="mt-3">
If you have any questions regarding academic regulations, If you have any questions regarding academic regulations,
attendance, workshop safety, or student services, please contact attendance, workshop safety, or student services, please contact
the Student Affairs Office. the Student Affairs Office.
</p> </p>
<div class="contact-item"> <div class="contact-item">
<i class="fas fa-envelope"></i> <i class="fas fa-envelope"></i>
support@academy.lk support@academy.lk
</div> </div>
<div class="contact-item"> <div class="contact-item">
<i class="fas fa-phone"></i> <i class="fas fa-phone"></i>
+94 11 234 5678 +94 11 234 5678
</div> </div>
<div class="contact-item"> <div class="contact-item">
<i class="fas fa-map-marker-alt"></i> <i class="fas fa-map-marker-alt"></i>
Automobile Engineering Academy Automobile Engineering Academy
</div> </div>
</div> </div>
</div> </div>

466
resources/views/help_code.blade.php Normal file
View File

@ -0,0 +1,466 @@
<!-- feedback controller function -->
<!-- use Illuminate\Http\Request;
use App\Models\Feedback;
use App\Models\user; -->
<!-- // public function feedback(Request $request)
// {
// $request->validate([
// 'feedback_type' => 'required',
// 'subject' => 'required|string|max:255',
// 'feedback_text' => 'required|string',
// ]);
// Feedback::create([
// 'student_id' => auth()->id(),
// 'feedback_type' => $request->feedback_type,
// 'subject' => $request->subject,
// 'feedback_text' => $request->feedback_text,
// 'status' => 'Pending',
// ]);
// return redirect()->back()->with('success', 'Feedback submitted successfully!');
// }
// public function feedback(Request $request)
// {
// $request->validate([
// 'feedback_type' => 'required',
// 'subject' => 'required|string|max:255',
// 'feedback_text' => 'required|string',
// ]);
// $studentLogId = session('student_portal_log_id');
// if (!$studentLogId) {
// return redirect('/students')->with('error', 'Please login first to submit feedback!');
// }
// Feedback::create([
// 'student_id' => $studentLogId,
// 'feedback_type' => $request->feedback_type,
// 'subject' => $request->subject,
// 'feedback_text' => $request->feedback_text,
// 'status' => 'Pending',
// ]);
// return redirect('/Feedback&Complain')->back()->with('success', 'Feedback submitted successfully!');}
// -->
########### ########### ########### ########### ########### ########### ########### ###########
<!-- js table data view -->
<!-- JavaScript to handle Submissions -->
<!-- <script>
document.addEventListener('DOMContentLoaded', function() {
const tableBody = document.getElementById('historyTableBody');
function getFormattedDate() {
const options = { day: '2-digit', month: 'long', year: 'numeric' };
return new Date().toLocaleDateString('en-GB', options);
}
document.getElementById('feedbackForm').addEventListener('submit', function(e) {
e.preventDefault();
const subject = document.getElementById('feedbackSubject').value;
const date = getFormattedDate();
const newRow = document.createElement('tr');
newRow.innerHTML = `
<td>Feedback</td>
<td>${subject}</td>
<td>${date}</td>
<td><span class="badge-status pending"> Pending </span></td>
`;
tableBody.insertBefore(newRow, tableBody.firstChild);
this.reset();
alert('Feedback submitted successfully!');
});
// 2. Complaint Form Submission
document.getElementById('complaintForm').addEventListener('submit', function(e) {
e.preventDefault();
const title = document.getElementById('complaintTitle').value;
const date = getFormattedDate();
const newRow = document.createElement('tr');
newRow.innerHTML = `
<td>Complaint</td>
<td>${title}</td>
<td>${date}</td>
<td><span class="badge-status pending"> Pending </span></td>
`;
tableBody.insertBefore(newRow, tableBody.firstChild);
this.reset();
alert('Complaint submitted successfully!');
});
});
</script> -->
########### ########### ########### ########### ########### ########### ########### ###########
<!-- student view profile blade -->
<!-- @extends('layouts.studentportalnav')
@section('title', 'Student Profile')
@section('content')
<style>
body{
background:#f6f7fb;
}
/* Header */
.profile-header{
background:linear-gradient(135deg,#5E244E,#4a1c3e);
color:#fff;
border-radius:20px;
padding:40px;
margin-bottom:35px;
box-shadow:0 15px 35px rgba(0,0,0,.15);
}
.profile-header h2{
font-weight:700;
}
.profile-header p{
color:#ddd;
}
/* Profile Card */
.profile-card{
background:#fff;
border-radius:20px;
padding:30px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
height:100%;
}
/* Student Image */
.profile-image{
width:150px;
height:150px;
border-radius:50%;
object-fit:cover;
border:6px solid #d4af37;
}
.student-name{
color:#5E244E;
font-weight:700;
margin-top:15px;
}
.student-id{
background:#5E244E;
color:#fff;
padding:8px 20px;
border-radius:50px;
display:inline-block;
font-size:14px;
}
/* Information */
.info-title{
color:#5E244E;
font-weight:700;
border-bottom:2px solid #d4af37;
padding-bottom:10px;
margin-bottom:20px;
}
.info-row{
display:flex;
justify-content:space-between;
padding:12px 0;
border-bottom:1px solid #eee;
}
.label{
color:#777;
}
.value{
font-weight:600;
color:#333;
}
/* Course */
.course-box{
background:#5E244E;
color:#fff;
padding:25px;
border-radius:20px;
}
.course-box h4{
color:#d4af37;
font-weight:700;
}
.course-item{
margin-top:12px;
}
.course-item i{
color:#d4af37;
width:25px;
}
/* Button */
.edit-btn{
background:#d4af37;
color:white;
border:none;
border-radius:50px;
padding:12px 30px;
font-weight:600;
}
.edit-btn:hover{
background:#c49d20;
color:#fff;
}
</style>
<div class="container py-4">
Header -->
<!-- <div class="profile-header">
<h2> <i class="fas fa-user-graduate"></i>Student Profile </h2>
<p>Manage your personal information and academic details. </p>
</div>
<div class="col-lg-4">
<div class="profile-card text-center">
<img src="{{ !empty($student->image) ? asset($student->image) : 'https://i.pravatar.cc/300' }}"
class="profile-image" alt="Profile Image">
<h3 class="student-name">{{ $student->full_name }}</h3>
<span class="student-id">
Student ID : {{ $student->student_id }}
</span>
<hr>
<button class="edit-btn mt-3">
<i class="fas fa-edit"></i> Edit Profile
</button>
</div>
</div>
Details -->
<!-- <div class="col-lg-8">
<div class="profile-card">
<h4 class="info-title">
<i class="fas fa-user"></i>
Personal Information
</h4>
<div class="info-row">
<span class="label">Full Name</span>
<span class="value">{{ $student->full_name }}</span>
</div>
<div class="info-row">
<span class="label">NIC / Passport</span>
<span class="value">{{ $student->nic_passport }}</span>
</div>
<div class="info-row">
<span class="label">Date of Birth</span>
<span class="value">
{{ date('d F Y', strtotime($student->date_of_birth)) }}
</span>
</div>
<div class="info-row">
<span class="label">Gender</span>
<span class="value">{{ $student->gender }}</span>
</div>
<div class="info-row">
<span class="label">Email</span>
<span class="value">{{ $student->email }}</span>
</div>
<div class="info-row">
<span class="label">Phone</span>
<span class="value">{{ $student->phone }}</span>
</div>
</div>
</div>
<div class="row g-4 mt-1"> -->
<!-- Education -->
<!-- <div class="col-lg-6">
<div class="profile-card">
<h4 class="info-title">
<i class="fas fa-graduation-cap"></i>
Educational Background
</h4>
<div class="info-row">
<span class="label">Qualification</span>
<span class="value">{{ $student->qualification }}</span>
</div>
<div class="info-row">
<span class="label">Institute</span>
<span class="value">{{ $student->institute }}</span>
</div>
<div class="info-row">
<span class="label">Year Completed</span>
<span class="value">{{ $student->year_completed }}</span>
</div>
</div>
</div> -->
<!-- Course Details -->
<!-- <div class="col-lg-6">
<div class="course-box">
<h4><i class="fas fa-car"></i>Course Details</h4>
<div class="course-item">
<i class="fas fa-book"></i> {{ $student->course_name }}
</div>
<div class="course-item">
<i class="fas fa-calendar"></i> Duration : {{ $student->duration }}
</div>
<div class="course-item">
<i class="fas fa-layer-group"></i> Current Semester : {{ $student->current_semester }}
</div>
<div class="course-item">
<i class="fas fa-user-tie"></i> Trainer : {{ $student->trainer_name }}
</div>
</div>
</div>
</div>
@endsection -->
########### ########### ########### ########### ########### ########### ########### ###########
<!-- // Home Page
Route::get('/', function () {
return view('welcome');
});
// Route::get('/StudentProfile', [studentsController::class, 'showProfile'])->name('StudentProfile');
Route::post('/studentlogout', [studentportalnavController::class, 'logout']);
// Route::post('/feedback', [FeedbackController ::class, 'feedback'])->name('feedback.store'); -->
<!--
Route::post('/feedback/store', [FeedbackController::class, 'feedback']) ->middleware('auth') ->name('feedback.store');
Route::post('/contact-submit', [ContactMsgController::class, 'store'])->name('contact.store'); -->

231
resources/views/layouts/studentportalnav.blade.php
View File

@ -4,32 +4,35 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="csrf-token" content="{{ csrf_token() }}"> <meta name="csrf-token" content="{{ csrf_token() }}">
<title>Responsive Student Portal</title> <title>@yield('title', 'Student Portal - Automobile Academic')</title>
<!-- Font Awesome Icons --> <!-- Font Awesome Icons & Bootstrap 5 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style> <style>
/* Global Root Variables */ /* Global Root Variables based on Master Layout */
:root { :root {
--primary: #642326; --theme-navy: #2D355B; /* Primary Dark Navy */
--background: #f5f6fb; --theme-footer-navy: #1F2541; /* Dark Navy for active/hover states */
--theme-red: #822424; /* Primary Accent Red */
--theme-red-hover: #df2c3e; /* Red Hover state */
--theme-yellow: #FFEA85; /* Accent Yellow/Gold */
--theme-bg: #F6F6F6; /* Light Background */
--sidebar-width: 260px; --sidebar-width: 260px;
--text-color: #333333; --text-dark: #333333;
--sidebar-bg: #282d55;
} }
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-family: 'Segoe UI', sans-serif;
} }
body { body {
background-color: var(--background); background-color: var(--theme-bg);
color: var(--text-color); color: var(--text-dark);
display: flex; display: flex;
min-height: 100vh; min-height: 100vh;
overflow-x: hidden; overflow-x: hidden;
@ -39,7 +42,7 @@
.sidebar { .sidebar {
width: var(--sidebar-width); width: var(--sidebar-width);
height: 100vh; height: 100vh;
background: var(--sidebar-bg); background: var(--theme-navy);
color: #fff; color: #fff;
position: fixed; position: fixed;
top: 0; top: 0;
@ -49,51 +52,37 @@
z-index: 1030; z-index: 1030;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
box-shadow: 2px 0 10px rgba(0,0,0,0.1);
} }
.sidebar .brand { .sidebar .brand {
padding: 0 24px 24px; padding: 0 24px 20px;
font-weight: 700; font-weight: 700;
font-size: 1.2rem; font-size: 1.25rem;
border-bottom: 1px solid rgba(255,255,255,.12); color: #ffffff;
border-bottom: 1px solid rgba(255,255,255,.15);
margin-bottom: 12px; margin-bottom: 12px;
display: flex; display: flex;
align-items: center; align-items: center;
} }
/* User Profile Section inside Sidebar */
.sidebar-user-profile {
padding: 15px 24px;
border-bottom: 1px solid rgba(255,255,255,.12);
margin-bottom: 15px;
}
.sidebar-user-profile .dropdown-toggle {
display: flex;
align-items: center;
gap: 10px;
color: #fff;
text-decoration: none;
font-size: 0.95rem;
}
.sidebar .nav { .sidebar .nav {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-grow: 1; flex-grow: 1;
overflow-y: auto; overflow-y: auto;
color: #2e2750;
} }
.sidebar .nav-link { .sidebar .nav-link {
color: rgba(255,255,255,.75); color: rgba(255, 255, 255, 0.85);
padding: 14px 24px; padding: 14px 24px;
font-size: .95rem; font-size: 0.95rem;
font-weight: 600;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
transition: .2s; transition: all 0.2s ease;
border-left: 3px solid transparent; border-left: 4px solid transparent;
text-decoration: none; text-decoration: none;
} }
@ -102,26 +91,53 @@
text-align: center; text-align: center;
} }
/* Hover & Active states matched to Main Theme */
.sidebar .nav-link:hover { .sidebar .nav-link:hover {
background: rgba(255,255,255,.06); background: rgba(255, 255, 255, 0.08);
color: #fff; color: var(--theme-yellow) !important;
padding-left: 28px;
} }
.sidebar .nav-link.active { .sidebar .nav-link.active {
background: rgba(255,255,255,.1); background: var(--theme-footer-navy);
color: #fff; color: var(--theme-yellow) !important;
border-left: 3px solid #fff; border-left: 4px solid #F73F52;
font-weight: 600; font-weight: 700;
} }
.sidebar .logout-link { /* User Profile Section inside Sidebar */
color: rgba(255,255,255,.6); .sidebar-user-profile {
padding: 15px 24px;
border-top: 1px solid rgba(255,255,255,.15);
margin-top: auto; margin-top: auto;
background: var(--theme-footer-navy);
} }
.sidebar .logout-link:hover { .sidebar-user-profile .user-dropdown-toggle {
display: flex;
align-items: center;
gap: 10px;
color: #fff; color: #fff;
background: rgba(220,53,69,.25); text-decoration: none;
font-size: 0.95rem;
transition: color 0.2s ease;
}
.sidebar-user-profile .user-dropdown-toggle:hover {
color: var(--theme-yellow);
}
/* Custom Theme Buttons */
.btn-theme-register {
background-color: var(--theme-red);
color: white;
border: 1px solid #ffffff;
transition: background-color 0.2s ease;
}
.btn-theme-register:hover {
background-color: var(--theme-red-hover);
color: white;
} }
/* ---------- Main Content Layout ---------- */ /* ---------- Main Content Layout ---------- */
@ -130,16 +146,17 @@
width: calc(100% - var(--sidebar-width)); width: calc(100% - var(--sidebar-width));
min-height: 100vh; min-height: 100vh;
padding: 40px; padding: 40px;
background: var(--background); background: var(--theme-bg);
transition: all 0.3s ease; transition: all 0.3s ease;
} }
/* Mobile Header Toggle Bar */ /* Mobile Header Toggle Bar */
.mobile-header { .mobile-header {
display: none; display: none;
background: #fff; background: var(--theme-navy);
padding: 15px 20px; color: #ffffff;
box-shadow: 0 2px 5px rgba(0,0,0,0.05); padding: 12px 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
position: fixed; position: fixed;
@ -152,18 +169,22 @@
.sidebar-toggle { .sidebar-toggle {
background: none; background: none;
border: none; border: none;
font-size: 1.5rem; font-size: 1.4rem;
cursor: pointer; cursor: pointer;
color: var(--sidebar-bg); color: #ffffff;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.sidebar-toggle:hover {
color: var(--theme-yellow);
}
.mobile-brand { .mobile-brand {
font-weight: 700; font-weight: 700;
font-size: 1.1rem; font-size: 1.1rem;
color: #333; color: #ffffff;
} }
/* Overlay Background when sidebar open on Mobile */ /* Overlay Background when sidebar open on Mobile */
@ -174,7 +195,7 @@
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background: rgba(0,0,0,0.4); background: rgba(0,0,0,0.5);
z-index: 1025; z-index: 1025;
opacity: 0; opacity: 0;
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
@ -185,7 +206,7 @@
opacity: 1; opacity: 1;
} }
/* Responsive Breakpoints */
@media (max-width: 991px) { @media (max-width: 991px) {
.sidebar { .sidebar {
left: calc(-1 * var(--sidebar-width)); left: calc(-1 * var(--sidebar-width));
@ -197,7 +218,7 @@
.main { .main {
margin-left: 0; margin-left: 0;
padding: 90px 20px 20px 20px; padding: 85px 20px 20px 20px;
width: 100%; width: 100%;
} }
@ -214,22 +235,24 @@
<button class="sidebar-toggle" id="toggleBtn" aria-label="Toggle Sidebar"> <button class="sidebar-toggle" id="toggleBtn" aria-label="Toggle Sidebar">
<i class="fa-solid fa-bars"></i> <i class="fa-solid fa-bars"></i>
</button> </button>
<div class="mobile-brand">Student Portal</div> <div class="mobile-brand">
<i class="fa-solid fa-car-side me-1"></i> AutoEdu Portal
</div>
<!-- Mobile View User Profile Header Dropdown --> <!-- Mobile View User Profile Dropdown -->
<div class="mobile-user-profile"> <div class="mobile-user-profile">
@if(Auth::check()) @if(Auth::check())
<div class="dropdown"> <div class="dropdown">
<a class="text-dark no-toggle-icon" href="#" role="button" id="userMenuMobile" data-bs-toggle="dropdown" aria-expanded="false"> <a class="text-white text-decoration-none dropdown-toggle d-flex align-items-center gap-2" href="#" role="button" id="userMenuMobile" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fa-solid fa-circle-user" style="font-size: 35px; color: var(--sidebar-bg);"></i> <i class="fa-solid fa-circle-user" style="font-size: 26px; color: var(--theme-yellow);"></i>
<strong>{{ Auth::user()->first_name }}</strong> <span class="fw-semibold small">{{ Auth::user()->first_name }}</span>
</a> </a>
<ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="userMenuMobile"> <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="userMenuMobile">
<li class="px-3 py-2 "> <li>
<!-- <small class="text-muted">Signed in as</small><br> --> <a class="dropdown-item" href="/StudentProfile">
<!-- <strong>{{ Auth::user()->first_name }}</strong> --> <i class="fa-solid fa-user me-2"></i> Profile
</a>
</li> </li>
<li><a class="dropdown-item mt-1" href="/StudentProfile"><i class="fa-solid fa-user me-2"></i> Profile</a></li>
<li><hr class="dropdown-divider"></li> <li><hr class="dropdown-divider"></li>
<li> <li>
<button type="button" onclick="submitLogout()" class="dropdown-item text-danger w-100 text-start border-0 bg-transparent"> <button type="button" onclick="submitLogout()" class="dropdown-item text-danger w-100 text-start border-0 bg-transparent">
@ -239,7 +262,7 @@
</ul> </ul>
</div> </div>
@else @else
<a href="/signin" class="btn btn-sm btn-outline-dark"><i class="fa-solid fa-right-to-bracket"></i></a> <a href="/signin" class="btn btn-sm btn-outline-light"><i class="fa-solid fa-right-to-bracket me-1"></i> Sign In</a>
@endif @endif
</div> </div>
</header> </header>
@ -250,51 +273,44 @@
<!-- Sidebar Navigation --> <!-- Sidebar Navigation -->
<aside class="sidebar" id="sidebar"> <aside class="sidebar" id="sidebar">
<div class="brand"> <div class="brand">
<i class="fa-solid fa-graduation-cap"></i>&nbsp;&nbsp;Student Portal <i class="fa-solid fa-car-side me-2"></i> AutoEdu
</div> </div>
<!-- Sidebar Active User Profile Details (Desktop View) --> <!-- Navigation Links -->
<nav class="nav"> <nav class="nav">
<a href="/Dashboard" class="nav-link "> <a href="/Dashboard" class="nav-link {{ request()->is('Dashboard*') ? 'active' : '' }}">
<i class="fa-solid fa-gauge"></i>Dashboard <i class="fa-solid fa-gauge"></i> Dashboard
</a> </a>
<a href="/mycourse" class="nav-link"> <a href="/mycourse" class="nav-link {{ request()->is('mycourse*') ? 'active' : '' }}">
<i class="fa-solid fa-book"></i>My Courses <i class="fa-solid fa-book"></i> My Courses
</a> </a>
<a href="/timetable" class="nav-link"> <a href="/timetable" class="nav-link {{ request()->is('timetable*') ? 'active' : '' }}">
<i class="fa-solid fa-calendar-days"></i>Class Timetable <i class="fa-solid fa-calendar-days"></i> Class Timetable
</a> </a>
<!-- <a href="/Assignments" class="nav-link"> <a href="/results" class="nav-link {{ request()->is('results*') ? 'active' : '' }}">
<i class="fa-solid fa-file-lines"></i>Assignments <i class="fa-solid fa-square-poll-vertical"></i> Exam Results
</a> -->
<a href="/results" class="nav-link">
<i class="fa-solid fa-square-poll-vertical"></i>Exam Results
</a> </a>
<a href="/Studentguidelines" class="nav-link {{ request()->is('Studentguidelines*') ? 'active' : '' }}">
<a href="/Studentguidelines" class="nav-link"> <i class="fa-solid fa-book-open"></i> Student Guidelines
<i class="fa-solid fa-book-open"></i>Student Guidelines
</a> </a>
<a href="/Feedback&Complain" class="nav-link"> <a href="/Feedback&Complain" class="nav-link {{ request()->is('Feedback&Complain*') ? 'active' : '' }}">
<i class="fa-solid fa-comments"></i>Feedback & Complain <i class="fa-solid fa-comments"></i> Feedback & Complain
</a> </a>
<a href="/StudentProfile" class="nav-link"> <a href="/StudentProfile" class="nav-link {{ request()->is('StudentProfile*') ? 'active' : '' }}">
<i class="fa-solid fa-user"></i>Student Profile <i class="fa-solid fa-user"></i> Student Profile
</a> </a>
</nav> </nav>
<!-- Sidebar User Profile (Desktop View Footer) -->
<div class="sidebar-user-profile"> <div class="sidebar-user-profile">
@if(Auth::check()) @if(Auth::check())
@php @php
$displayName = Auth::user()->first_name . ' ' . Auth::user()->last_name; $displayName = Auth::user()->first_name . ' ' . Auth::user()->last_name;
@endphp @endphp
<div class="dropdown"> <div class="dropdown dropup">
<a class="dropdown-toggle" href="#" role="button" id="userMenuDesktop" data-bs-toggle="dropdown" aria-expanded="false"> <a class="user-dropdown-toggle dropdown-toggle" href="#" role="button" id="userMenuDesktop" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fa-solid fa-circle-user" style="font-size: 24px;"></i> <i class="fa-solid fa-circle-user" style="font-size: 24px; color: var(--theme-yellow);"></i>
<span class="user-profile-name text-truncate" style="max-width: 160px;">{{ $displayName }}</span> <span class="text-truncate" style="max-width: 150px;">{{ $displayName }}</span>
</a> </a>
<ul class="dropdown-menu dropdown-menu-start shadow w-100" aria-labelledby="userMenuDesktop"> <ul class="dropdown-menu dropdown-menu-start shadow w-100" aria-labelledby="userMenuDesktop">
@ -305,20 +321,19 @@
</li> </li>
<li><hr class="dropdown-divider"></li> <li><hr class="dropdown-divider"></li>
<li> <li>
<a href="#" onclick="submitLogout(); return false;" class="nav-link logout-link mt-auto" style="color:black;"> <button type="button" onclick="submitLogout()" class="dropdown-item text-danger border-0 bg-transparent w-100 text-start">
<i class="fa-solid fa-right-from-bracket"></i>Logout <i class="fa-solid fa-right-from-bracket me-2"></i> Logout
</a> </button>
</li> </li>
</ul> </ul>
</div> </div>
@else @else
<div class="d-flex gap-2 px-2"> <div class="d-flex gap-2">
<a href="/signin" class="btn btn-outline-light btn-sm w-50">Sign In</a> <a href="/signin" class="btn btn-outline-light btn-sm w-50">Sign In</a>
<a href="/signup" class="btn btn-warning btn-sm w-50">Register</a> <a href="/signup" class="btn btn-theme-register btn-sm w-50">Register</a>
</div> </div>
@endif @endif
</div> </div>
</aside> </aside>
<!-- Main Content Area --> <!-- Main Content Area -->
@ -326,27 +341,26 @@
@yield('content') @yield('content')
</main> </main>
<!-- Sidebar Toggle JavaScript --> <!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script> <script>
// Sidebar Toggle Logic
const toggleBtn = document.getElementById('toggleBtn'); const toggleBtn = document.getElementById('toggleBtn');
const sidebar = document.getElementById('sidebar'); const sidebar = document.getElementById('sidebar');
const overlay = document.getElementById('sidebarOverlay'); const overlay = document.getElementById('sidebarOverlay');
// Function to toggle sidebar view
toggleBtn.addEventListener('click', () => { toggleBtn.addEventListener('click', () => {
sidebar.classList.toggle('show'); sidebar.classList.toggle('show');
overlay.classList.toggle('show'); overlay.classList.toggle('show');
}); });
// Close sidebar if user clicks outside of it
overlay.addEventListener('click', () => { overlay.addEventListener('click', () => {
sidebar.classList.remove('show'); sidebar.classList.remove('show');
overlay.classList.remove('show'); overlay.classList.remove('show');
}); });
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script> // Dynamic Logout Logic
function submitLogout() { function submitLogout() {
const tokenEl = document.querySelector('meta[name="csrf-token"]'); const tokenEl = document.querySelector('meta[name="csrf-token"]');
@ -376,8 +390,7 @@
console.error('Error:', err); console.error('Error:', err);
alert('Server side error occurred during logout.'); alert('Server side error occurred during logout.');
}); });
} }
</script>
</script>
</body> </body>
</html> </html>

202
resources/views/mycourse.blade.php
View File

@ -4,46 +4,39 @@
@section('content') @section('content')
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
<style> <style>
:root { :root {
--purple-main: #5E244E; --theme-navy: #2D355B; /* Primary Navy */
--purple-dark: #4a1c3e; --theme-navy-dark: #1F2541; /* Dark Navy */
--purple-light: #744a68; --theme-red: #822424; /* Primary Accent Red */
--gold-accent: #D4AF37; --theme-red-hover: #df2c3e; /* Red Hover */
--gold-hover: #b8972e; --theme-yellow: #FFEA85; /* Accent Yellow/Gold */
--bg-light: #f8fafc; --bg-light: #F6F6F6; /* Page Background */
--white: #ffffff; --white: #ffffff;
} }
body { body {
background: var(--bg-light); background: var(--bg-light);
font-family: 'Poppins', sans-serif; font-family: 'Segoe UI', sans-serif;
} }
.main-portal-content { .main-portal-content {
padding: 20px 15px; padding: 10px 5px;
min-height: 100vh; min-height: 100vh;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
/* Premium Hero Section */ /* Premium Hero Section */
.hero { .hero {
background: linear-gradient(135deg, var(--purple-main) 0%, var(--purple-dark) 100%) !important; background: linear-gradient(135deg, #2B293F 0%, #94A6F959 100%) !important;
color: var(--white) !important; color: var(--white) !important;
border-radius: 20px; border-radius: 16px;
padding: 30px 20px; padding: 35px 30px;
margin-bottom: 30px; margin-bottom: 30px;
box-shadow: 0 10px 30px rgba(74, 28, 62, 0.15); box-shadow: 0 8px 25px rgba(31, 37, 65, 0.15);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
border-left: 5px solid var(--theme-red);
} }
.hero::after { .hero::after {
@ -60,33 +53,34 @@ body {
/* Course Card */ /* Course Card */
.course-card { .course-card {
border: none !important; border: 1px solid #e2e8f0 !important;
border-radius: 20px !important; border-radius: 16px !important;
overflow: hidden; overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
background: var(--white); background: var(--white);
margin-bottom: 30px; margin-bottom: 30px;
} }
.course-card img { .course-card img {
height: 200px; height: 240px;
object-fit: cover; object-fit: cover;
width: 100%; width: 100%;
} }
/* Sidebar Info Boxes */ /* Sidebar Info Boxes */
.info-box { .info-box {
border-radius: 16px !important; border-radius: 12px !important;
padding: 20px 24px; padding: 20px 24px;
background: var(--white); background: var(--white);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important; box-shadow: 0 4px 12px rgba(219, 240, 99, 0.04) !important;
border: 1px solid rgba(94, 36, 78, 0.05) !important; border: 1px solid #e2e8f0 !important;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.info-box:hover { .info-box:hover {
transform: translateY(-3px); transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06) !important; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;
border-color: var(--theme-navy) !important;
} }
.stat-icon { .stat-icon {
@ -95,97 +89,118 @@ body {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 12px; border-radius: 10px;
font-size: 18px; font-size: 18px;
background: rgba(94, 36, 78, 0.08); background: var(--theme-red) !important;
color: var(--purple-main); color: #ffff8d;
} }
/* Modules Card */ /* Modules Card */
.module-card { .module-card {
border: 1px solid rgba(94, 36, 78, 0.06) !important; border: 1px solid #e2e8f0 !important;
border-radius: 16px !important; border-radius: 14px !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.3s ease;
background: var(--white); background: var(--white);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
} }
.module-card:hover { .module-card:hover {
transform: translateY(-5px); transform: translateY(-4px);
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.08) !important; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08) !important;
border-color: var(--purple-light) !important; border-color: var(--theme-red) !important;
} }
/* Progress bar customizations */ /* Progress bar customizations */
.progress { .progress {
height: 10px !important; height: 10px !important;
border-radius: 50px !important; border-radius: 50px !important;
background-color: #f1f5f9 !important; background-color: #e2e8f0 !important;
} }
.progress-bar { .progress-bar {
border-radius: 50px !important; border-radius: 50px !important;
background: linear-gradient(90deg, var(--gold-accent), #f4d05e) !important; background: linear-gradient(90deg, var(--theme-red), var(--theme-red-hover)) !important;
} }
/* Status Badges */ /* Status Badges */
.status { .status {
font-size: 11px; font-size: 11px;
font-weight: 600; font-weight: 700;
padding: 5px 14px; padding: 6px 14px;
border-radius: 50px; border-radius: 50px;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.5px; letter-spacing: 0.5px;
} }
.completed { background: rgba(94, 36, 78, 0.1); color: var(--purple-main); } .completed { background: rgba(45, 53, 91, 0.12); color: var(--theme-navy); }
.progressing { background: rgba(212, 175, 55, 0.15); color: #9c7e1c; } .progressing { background: rgba(247, 63, 82, 0.15); color: var(--theme-red); }
.locked { background: #f1f5f9; color: #64748b; } .locked { background: #e2e8f0; color: #64748b; }
/* Custom Buttons */ /* Custom Buttons */
.btn-gold { .btn-theme-red {
background-color: var(--gold-accent) !important; background-color: var(--theme-red) !important;
border-color: var(--gold-accent) !important; border-color: var(--theme-red) !important;
color: #fff !important; color: #fff !important;
border-radius: 10px; border-radius: 8px;
font-weight: 600; font-weight: 600;
transition: all 0.2s ease;
}
.btn-theme-red:hover {
background-color: var(--theme-red-hover) !important;
border-color: var(--theme-red-hover) !important;
} }
.btn-gold:hover { background-color: var(--gold-hover) !important; }
.btn-purple { .btn-theme-navy {
background-color: var(--purple-main) !important; background-color: var(--theme-navy) !important;
border-color: var(--purple-main) !important; border-color: var(--theme-navy) !important;
color: #fff !important; color: #fff !important;
border-radius: 10px; border-radius: 8px;
font-weight: 500; font-weight: 600;
transition: all 0.2s ease;
}
.btn-theme-navy:hover {
background-color: var(--theme-navy-dark) !important;
} }
.btn-purple:hover { background-color: var(--purple-dark) !important; }
.btn-continue { .btn-continue {
background-color: #fff !important; background-color: var(--theme-red) !important;
color: var(--purple-main) !important; color: #ffffff !important;
border-radius: 10px; border-radius: 8px;
transition: all 0.2s ease;
}
.btn-continue:hover {
background-color: var(--theme-red-hover) !important;
}
/* Section Title Indicator */
.section-title-wrapper {
display: flex;
align-items: center;
gap: 10px;
margin: 30px 0 20px;
}
.section-title-wrapper::before {
content: '';
display: inline-block;
width: 5px;
height: 24px;
background-color: var(--theme-red);
border-radius: 2px;
} }
.btn-continue:hover { background-color: #f1f5f9 !important; }
/* Responsive Media Queries */ /* Responsive Media Queries */
@media (min-width: 768px) { @media (min-width: 768px) {
.main-portal-content { .main-portal-content {
padding: 34px; padding: 10px;
} }
.hero { .hero {
padding: 45px; padding: 40px;
} }
.course-card img { .course-card img {
height: 280px; height: 280px;
} }
} }
@media (min-width: 992px) {
.main-portal-content {
margin-left: 18px;
}
}
</style> </style>
<div class="main-portal-content"> <div class="main-portal-content">
@ -202,7 +217,7 @@ body {
</a> </a>
</div> </div>
<div class="col-lg-3 col-md-4 text-center d-none d-md-block"> <div class="col-lg-3 col-md-4 text-center d-none d-md-block">
<i class="fa-solid fa-car-side" style="font-size:100px; opacity:.2; color: var(--gold-accent);"></i> <i class="fa-solid fa-car-side" style="font-size: 157px;opacity: 0.35;color: #8C080F;"></i>
</div> </div>
</div> </div>
</div> </div>
@ -219,22 +234,22 @@ body {
<div class="card-body p-4"> <div class="card-body p-4">
<div class="d-flex flex-wrap justify-content-between align-items-start gap-2 mb-3"> <div class="d-flex flex-wrap justify-content-between align-items-start gap-2 mb-3">
<div> <div>
<h3 class="fw-bold text-dark mb-1">AE101</h3> <h3 class="fw-bold mb-1" style="color: var(--theme-navy);">AE101</h3>
<p class="text-muted small mb-0"> <p class="text-muted small mb-0">
<i class="fa-solid fa-building me-1" style="color: var(--purple-light);"></i> Automotive Engineering Department <i class="fa-solid fa-building me-1" style="color: var(--theme-red);"></i> Automotive Engineering Department
</p> </p>
</div> </div>
<span class="badge bg-dark px-3 py-2 rounded-pill">Diploma</span> <span class="badge px-3 py-2 rounded-pill" style="background-color: var(--theme-navy); color: var(--theme-yellow);">Diploma</span>
</div> </div>
<p class="text-secondary small lh-base"> <p class="text-secondary small lh-base">
Master engine diagnostics, suspension systems, transmission technology, electrical systems and hybrid vehicle maintenance. Master engine diagnostics, suspension systems, transmission technology, electrical systems, and hybrid vehicle maintenance through hands-on training and theoretical modules.
</p> </p>
<div class="mt-4"> <div class="mt-4">
<div class="d-flex justify-content-between mb-2 small"> <div class="d-flex justify-content-between mb-2 small">
<span class="text-dark fw-semibold">Overall Progress</span> <span class="fw-semibold" style="color: var(--theme-navy);">Overall Progress</span>
<span class="fw-bold" style="color: var(--purple-main);">55%</span> <span class="fw-bold" style="color: var(--theme-red);">55%</span>
</div> </div>
<div class="progress"> <div class="progress">
<div class="progress-bar" style="width:55%"></div> <div class="progress-bar" style="width:55%"></div>
@ -244,9 +259,9 @@ body {
</div> </div>
<!-- Modules Header --> <!-- Modules Header -->
<div class="my-4"> <div class="section-title-wrapper">
<h4 class="fw-bold text-dark"> <h4 class="fw-bold mb-0" style="color: var(--theme-navy);">
<i class="fa-solid fa-list-check me-2" style="color: var(--gold-accent);"></i> Course Modules Course Modules
</h4> </h4>
</div> </div>
@ -258,13 +273,13 @@ body {
<div class="card-body p-4 d-flex flex-column justify-content-between"> <div class="card-body p-4 d-flex flex-column justify-content-between">
<div> <div>
<div class="d-flex justify-content-between align-items-start gap-2 mb-2"> <div class="d-flex justify-content-between align-items-start gap-2 mb-2">
<h6 class="fw-bold text-dark mb-0">Engine Fundamentals</h6> <h6 class="fw-bold mb-0" style="color: var(--theme-navy);">Engine Fundamentals</h6>
<span class="status completed">Completed</span> <span class="status completed">Completed</span>
</div> </div>
<p class="text-muted small">Learn engine parts and working principles.</p> <p class="text-muted small mb-0">Learn engine parts and working principles.</p>
</div> </div>
<div class="mt-3"> <div class="mt-4">
<button class="btn btn-purple w-100 btn-sm py-2">Review Module</button> <button class="btn btn-theme-navy w-100 btn-sm py-2">Review Module</button>
</div> </div>
</div> </div>
</div> </div>
@ -276,13 +291,13 @@ body {
<div class="card-body p-4 d-flex flex-column justify-content-between"> <div class="card-body p-4 d-flex flex-column justify-content-between">
<div> <div>
<div class="d-flex justify-content-between align-items-start gap-2 mb-2"> <div class="d-flex justify-content-between align-items-start gap-2 mb-2">
<h6 class="fw-bold text-dark mb-0">Transmission Systems</h6> <h6 class="fw-bold mb-0" style="color: var(--theme-navy);">Transmission Systems</h6>
<span class="status progressing">In Progress</span> <span class="status progressing">In Progress</span>
</div> </div>
<p class="text-muted small">Manual & Automatic transmission systems.</p> <p class="text-muted small mb-0">Manual & Automatic transmission systems.</p>
</div> </div>
<div class="mt-3"> <div class="mt-4">
<button class="btn btn-gold w-100 btn-sm py-2">Continue Learning</button> <button class="btn btn-theme-red w-100 btn-sm py-2">Continue Learning</button>
</div> </div>
</div> </div>
</div> </div>
@ -297,9 +312,9 @@ body {
<h6 class="fw-bold text-secondary mb-0">Brake Systems</h6> <h6 class="fw-bold text-secondary mb-0">Brake Systems</h6>
<span class="status locked"><i class="fa fa-lock me-1"></i> Locked</span> <span class="status locked"><i class="fa fa-lock me-1"></i> Locked</span>
</div> </div>
<p class="text-muted small">Complete previous module to unlock.</p> <p class="text-muted small mb-0">Complete previous module to unlock.</p>
</div> </div>
<div class="mt-3"> <div class="mt-4">
<button class="btn btn-secondary w-100 btn-sm py-2" disabled>Locked</button> <button class="btn btn-secondary w-100 btn-sm py-2" disabled>Locked</button>
</div> </div>
</div> </div>
@ -315,9 +330,9 @@ body {
<h6 class="fw-bold text-secondary mb-0">Hybrid Technology</h6> <h6 class="fw-bold text-secondary mb-0">Hybrid Technology</h6>
<span class="status locked"><i class="fa fa-lock me-1"></i> Locked</span> <span class="status locked"><i class="fa fa-lock me-1"></i> Locked</span>
</div> </div>
<p class="text-muted small">Learn EV and Hybrid systems.</p> <p class="text-muted small mb-0">Learn EV and Hybrid systems.</p>
</div> </div>
<div class="mt-3"> <div class="mt-4">
<button class="btn btn-secondary w-100 btn-sm py-2" disabled>Locked</button> <button class="btn btn-secondary w-100 btn-sm py-2" disabled>Locked</button>
</div> </div>
</div> </div>
@ -334,7 +349,7 @@ body {
<div class="info-box d-flex align-items-center"> <div class="info-box d-flex align-items-center">
<div class="stat-icon"><i class="fa fa-book"></i></div> <div class="stat-icon"><i class="fa fa-book"></i></div>
<div class="ms-3"> <div class="ms-3">
<h5 class="fw-bold mb-0" style="color: var(--purple-dark);">12</h5> <h5 class="fw-bold mb-0" style="color: var(--theme-navy);">12</h5>
<span class="text-muted small">Modules Available</span> <span class="text-muted small">Modules Available</span>
</div> </div>
</div> </div>
@ -344,7 +359,7 @@ body {
<div class="info-box d-flex align-items-center"> <div class="info-box d-flex align-items-center">
<div class="stat-icon"><i class="fa fa-clock"></i></div> <div class="stat-icon"><i class="fa fa-clock"></i></div>
<div class="ms-3"> <div class="ms-3">
<h5 class="fw-bold mb-0" style="color: var(--purple-dark);">2 Years</h5> <h5 class="fw-bold mb-0" style="color: var(--theme-navy);">2 Years</h5>
<span class="text-muted small">Course Duration</span> <span class="text-muted small">Course Duration</span>
</div> </div>
</div> </div>
@ -354,7 +369,7 @@ body {
<div class="info-box d-flex align-items-center"> <div class="info-box d-flex align-items-center">
<div class="stat-icon"><i class="fa fa-award"></i></div> <div class="stat-icon"><i class="fa fa-award"></i></div>
<div class="ms-3"> <div class="ms-3">
<h5 class="fw-bold mb-0" style="color: var(--purple-dark);">NVQ Level 5</h5> <h5 class="fw-bold mb-0" style="color: var(--theme-navy);">NVQ Level 5</h5>
<span class="text-muted small">Qualification</span> <span class="text-muted small">Qualification</span>
</div> </div>
</div> </div>
@ -367,5 +382,4 @@ body {
</div> </div>
</div> </div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
@endsection @endsection

544
resources/views/results.blade.php
View File

@ -4,523 +4,373 @@
@section('content') @section('content')
<style> <!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
body{ <!-- Font Awesome -->
background:#f6f7fb; <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);
} }
/* ======================= /* =======================
Hero Hero Section
======================= */ ======================= */
.result-hero {
.result-hero{ background: linear-gradient(135deg, #2B293F 0%, #94A6F959 100%) !important;
color: var(--white);
background:linear-gradient(135deg,#5E244E,#4a1c3e); border-radius: 16px;
color:#fff; padding: 35px 30px;
border-radius:20px; margin-bottom: 30px;
padding:40px; box-shadow: 0 8px 25px rgba(31, 37, 65, 0.15);
margin-bottom:30px; border-left: 5px solid var(--theme-red);
box-shadow:0 15px 35px rgba(0,0,0,.15);
} }
.result-hero h2{ .result-hero h2 {
font-weight: 700;
font-weight:700;
} }
.result-hero p{ .result-hero p {
color: rgba(255, 255, 255, 0.85);
color:#ddd; margin-bottom: 0;
margin-bottom:0;
} }
/* ======================= /* =======================
Summary Cards Summary Cards
======================= */ ======================= */
.summary-card {
.summary-card{ background: var(--white);
border: 1px solid #e2e8f0;
background:#fff; border-radius: 16px;
border:none; padding: 25px;
border-radius:20px; text-align: center;
padding:25px; box-shadow: 0 4px 15px rgba(0, 0, 0, .04);
text-align:center; transition: all 0.3s ease;
box-shadow:0 10px 25px rgba(0,0,0,.08);
transition:.3s;
} }
.summary-card:hover{ .summary-card:hover {
transform: translateY(-4px);
transform:translateY(-5px); border-color: var(--theme-navy);
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
} }
.summary-card i{ .summary-card i {
font-size: 36px;
font-size:40px; color: var(--theme-red);
color:#5E244E; margin-bottom: 12px;
margin-bottom:15px;
} }
.summary-card h3{ .summary-card h3 {
color: var(--theme-navy);
color:#5E244E; font-weight: 700;
font-weight:700; margin-bottom: 4px;
} }
.summary-card small{ .summary-card small {
color: #64748b;
color:#777; font-weight: 500;
} }
/* ======================= /* =======================
Result Table Result Table
======================= */ ======================= */
.result-card {
.result-card{ margin-top: 30px;
background: var(--white);
margin-top:35px; border: 1px solid #e2e8f0;
background:#fff; border-radius: 16px;
border-radius:20px; overflow: hidden;
overflow:hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, .04);
box-shadow:0 10px 30px rgba(0,0,0,.08);
} }
.table-head{ .table-head {
background: var(--theme-navy);
background:#5E244E; color: var(--white);
color:#fff; padding: 18px 25px;
padding:18px 25px;
} }
.table{ .table {
margin-bottom: 0;
margin-bottom:0;
} }
.table th{ .table th {
background: #f8fafc;
background:#744a68; color: var(--theme-navy);
color:#fff; font-weight: 600;
border:none; border-bottom: 2px solid #e2e8f0;
padding: 14px 20px;
} }
.table td{ .table td {
vertical-align: middle;
vertical-align:middle; padding: 14px 20px;
} }
.grade{ .grade {
padding: 5px 14px;
padding:7px 15px; border-radius: 30px;
border-radius:30px; font-weight: 600;
font-weight:600; font-size: 13px;
color:#fff; color: var(--white);
display:inline-block; display: inline-block;
} }
.a{ .grade.a {
background: var(--theme-navy);
background:#28a745;
} }
.b{ .grade.b {
background: var(--theme-red);
background:#17a2b8;
} }
.c{ .grade.c {
background: #e67e22;
background:#ffc107;
color:#222;
} }
.fail{ .grade.fail {
background: #dc3545;
background:#dc3545; }
.status-pass {
color: #198754;
font-weight: 600;
} }
/* ======================= /* =======================
Progress Progress
======================= */ ======================= */
.progress {
height: 10px;
border-radius: 20px;
background-color: #e2e8f0;
}
.progress{ .progress-bar-navy {
background-color: var(--theme-navy) !important;
height:10px; }
border-radius:20px;
.progress-bar-red {
background-color: var(--theme-red) !important;
} }
/* ======================= /* =======================
Download Download Card
======================= */ ======================= */
.download-card {
.download-card{ margin-top: 30px;
background: linear-gradient(135deg, #2B293F 0%, #94A6F959 100%) !important;
margin-top:30px; color: var(--white);
background:#4a1c3e; border-radius: 16px;
color:#fff; padding: 30px;
border-radius:20px; display: flex;
padding:30px; justify-content: space-between;
display:flex; align-items: center;
justify-content:space-between; flex-wrap: wrap;
align-items:center; gap: 15px;
flex-wrap:wrap; box-shadow: 0 8px 25px rgba(31, 37, 65, 0.15);
} }
.download-card h4{ .download-card h4 {
color: var(--theme-yellow);
color:#d4af37; font-weight: 700;
font-weight:700; margin-bottom: 6px;
} }
.btn-result{ .btn-result {
background-color: var(--theme-red) !important;
background:#d4af37; color: var(--white) !important;
color:#fff; border: none;
border:none; border-radius: 8px;
border-radius:50px; padding: 10px 24px;
padding:12px 30px; font-weight: 600;
font-weight:600; transition: all 0.2s ease;
} }
.btn-result:hover{ .btn-result:hover {
background-color: var(--theme-red-hover) !important;
background:#c49d20; color: var(--white) !important;
color:#fff;
} }
@media(max-width:768px) {
.result-hero {
padding: 25px;
}
}
</style> </style>
<div class="container py-4"> <div class="container py-4">
<!-- Hero --> <!-- Hero Section -->
<div class="result-hero"> <div class="result-hero">
<h2> <h2>
<i class="fas fa-award me-2" style="color: var(--theme-yellow);"></i>
<i class="fas fa-award"></i>
Academic Results Academic Results
</h2> </h2>
<p> <p>
View your examination results and overall academic performance.
View your examination results and academic performance.
</p> </p>
</div> </div>
<!-- Summary --> <!-- Summary Cards -->
<div class="row g-4">
<div class="row"> <div class="col-md-4">
<div class="col-md-4 mb-4">
<div class="summary-card"> <div class="summary-card">
<i class="fas fa-chart-line"></i> <i class="fas fa-chart-line"></i>
<h3>82%</h3> <h3>82%</h3>
<small>Overall Average</small> <small>Overall Average</small>
</div>
</div> </div>
</div> <div class="col-md-4">
<div class="col-md-4 mb-4">
<div class="summary-card"> <div class="summary-card">
<i class="fas fa-medal"></i> <i class="fas fa-medal"></i>
<h3>3.65</h3> <h3>3.65</h3>
<small>Current GPA</small> <small>Current GPA</small>
</div>
</div> </div>
</div> <div class="col-md-4">
<div class="col-md-4 mb-4">
<div class="summary-card"> <div class="summary-card">
<i class="fas fa-book-open"></i>
<i class="fas fa-book"></i>
<h3>6 / 6</h3> <h3>6 / 6</h3>
<small>Modules Passed</small> <small>Modules Passed</small>
</div> </div>
</div> </div>
</div> </div>
<!-- Result Table --> <!-- Result Table -->
<div class="result-card"> <div class="result-card">
<div class="table-head"> <div class="table-head">
<h5 class="mb-0 fw-bold">
<h4 class="mb-0">
Semester Results Semester Results
</h5>
</h4>
</div> </div>
<table class="table table-hover"> <div class="table-responsive">
<table class="table table-hover align-middle">
<thead> <thead>
<tr> <tr>
<th>Module</th> <th>Module</th>
<th>Marks</th> <th>Marks</th>
<th>Grade</th> <th>Grade</th>
<th>Status</th> <th>Status</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td class="fw-semibold" style="color: var(--theme-navy);">Engine Technology</td>
<td>Engine Technology</td>
<td>91</td> <td>91</td>
<td> <td>
<span class="grade a">A+</span>
<span class="grade a">
A+
</span>
</td> </td>
<td><span class="status-pass"><i class="fas fa-check-circle me-1"></i>Pass</span></td>
<td>Pass</td>
</tr> </tr>
<tr> <tr>
<td class="fw-semibold" style="color: var(--theme-navy);">Brake Systems</td>
<td>Brake Systems</td>
<td>84</td> <td>84</td>
<td> <td>
<span class="grade a">A</span>
<span class="grade a">
A
</span>
</td> </td>
<td><span class="status-pass"><i class="fas fa-check-circle me-1"></i>Pass</span></td>
<td>Pass</td>
</tr> </tr>
<tr> <tr>
<td class="fw-semibold" style="color: var(--theme-navy);">Electrical Systems</td>
<td>Electrical Systems</td>
<td>79</td> <td>79</td>
<td> <td>
<span class="grade b">B+</span>
<span class="grade b">
B+
</span>
</td> </td>
<td><span class="status-pass"><i class="fas fa-check-circle me-1"></i>Pass</span></td>
<td>Pass</td>
</tr> </tr>
<tr> <tr>
<td class="fw-semibold" style="color: var(--theme-navy);">Transmission Systems</td>
<td>Transmission Systems</td>
<td>74</td> <td>74</td>
<td> <td>
<span class="grade b">B</span>
<span class="grade b">
B
</span>
</td> </td>
<td><span class="status-pass"><i class="fas fa-check-circle me-1"></i>Pass</span></td>
<td>Pass</td>
</tr> </tr>
<tr> <tr>
<td class="fw-semibold" style="color: var(--theme-navy);">Workshop Practice</td>
<td>Workshop Practice</td>
<td>88</td> <td>88</td>
<td> <td>
<span class="grade a">A</span>
<span class="grade a">
A
</span>
</td> </td>
<td><span class="status-pass"><i class="fas fa-check-circle me-1"></i>Pass</span></td>
<td>Pass</td>
</tr> </tr>
<tr> <tr>
<td class="fw-semibold" style="color: var(--theme-navy);">Industrial Safety</td>
<td>Industrial Safety</td>
<td>81</td> <td>81</td>
<td> <td>
<span class="grade a">A-</span>
<span class="grade a">
A-
</span>
</td> </td>
<td><span class="status-pass"><i class="fas fa-check-circle me-1"></i>Pass</span></td>
<td>Pass</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
</div> </div>
<!-- Performance --> <!-- Performance Bars -->
<div class="result-card">
<div class="result-card mt-4">
<div class="table-head"> <div class="table-head">
<h5 class="mb-0 fw-bold">
<h4 class="mb-0">
Overall Performance Overall Performance
</h5>
</h4>
</div> </div>
<div class="p-4"> <div class="p-4">
<div class="d-flex justify-content-between mb-2">
<p class="mb-2"> <span class="fw-semibold" style="color: var(--theme-navy);">Course Completion</span>
<span class="fw-bold" style="color: var(--theme-navy);">82%</span>
Course Completion </div>
</p>
<div class="progress mb-4"> <div class="progress mb-4">
<div class="progress-bar progress-bar-navy" style="width:82%"></div>
<div class="progress-bar bg-success"
style="width:82%">
</div> </div>
<div class="d-flex justify-content-between mb-2">
<span class="fw-semibold" style="color: var(--theme-navy);">Attendance Score</span>
<span class="fw-bold" style="color: var(--theme-red);">90%</span>
</div> </div>
<p class="mb-2">
Attendance Score
</p>
<div class="progress"> <div class="progress">
<div class="progress-bar progress-bar-red" style="width:90%"></div>
<div class="progress-bar bg-warning" </div>
</div>
style="width:90%">
</div> </div>
</div> <!-- Download Section -->
</div>
</div>
<!-- Download -->
<div class="download-card"> <div class="download-card">
<div> <div>
<h4>Download Official Result Sheet</h4>
<h4>
Download Official Result Sheet
</h4>
<p class="mb-0"> <p class="mb-0">
Get your latest semester examination results in official PDF format.
Download your latest semester examination results in PDF format.
</p> </p>
</div> </div>
<button class="btn btn-result"> <button class="btn btn-result shadow-sm">
<i class="fas fa-download me-2"></i>Download PDF
<i class="fas fa-download"></i>
Download PDF
</button> </button>
</div> </div>
</div> </div>

150
resources/views/signin.blade.php
View File

@ -3,26 +3,50 @@
@section('title', 'Student Login') @section('title', 'Student Login')
@push('styles') @push('styles')
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
<style> <style>
body { :root {
background: #f5f7fb; --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;
} }
* {
font-family: 'Arial', Helvetica, sans-serif; body {
transform: scale(0.95); background: var(--bg-light);
font-family: 'Poppins', sans-serif;
} }
/* LEFT PANEL */ /* LEFT PANEL */
.left-panel { .left-panel {
min-height: 100vh; min-height: 100vh;
background: #f8f9fa; background: linear-gradient(135deg, var(--theme-navy) 0%, var(--theme-navy-dark) 100%);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color: var(--white);
border-right: 5px solid var(--theme-red);
} }
.left-panel img { .left-panel img {
max-width: 450px; max-width: 400px;
filter: drop-shadow(0 10px 15px rgba(0,0,0,0.3));
}
.left-panel h2 {
color: var(--white);
font-size: 28px;
margin-top: 20px;
}
.left-panel p {
color: rgba(255, 255, 255, 0.8);
font-size: 15px;
} }
/* RIGHT PANEL */ /* RIGHT PANEL */
@ -32,106 +56,103 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 40px; padding: 40px;
background: var(--bg-light);
scale: 0.7;
} }
/* LOGIN BOX */ /* LOGIN BOX */
.box { .box {
width: 100%; width: 100%;
max-width: 500px; max-width: 480px;
background: #ffffff; background: var(--white);
padding: 45px; padding: 45px 40px;
border-radius: 18px; border-radius: 16px;
box-shadow: 0 15px 40px rgba(0,0,0,0.12); box-shadow: 0 10px 30px rgba(31, 37, 65, 0.08);
border: 1px solid #e2e8f0;
} }
/* TITLE */ /* TITLE */
.headline { .headline {
text-align: center; text-align: center;
font-size: 32px; font-size: 28px;
font-weight: 700; font-weight: 700;
color: #222; color: var(--theme-navy);
margin-bottom: 35px; margin-bottom: 35px;
} }
/* INPUT */ /* INPUT CONTAINER */
.input-container { .input-container {
position: relative; position: relative;
margin-bottom: 25px; margin-bottom: 28px;
font-size: 22px;
font-family: arial;
} }
.input-container input { .input-container input {
width: 100%; width: 100%;
height: 50px; height: 48px;
padding: 12px 0; padding: 10px 0 5px 0;
border: none; border: none;
border-bottom: 2px solid #ddd; border-bottom: 2px solid #cbd5e1;
background: transparent; background: transparent;
outline: none; outline: none;
font-size: 22px; font-size: 16px;
font-family: arial; color: #1e293b;
transition: all 0.3s ease;
} }
.input-container label { .input-container label {
position: absolute; position: absolute;
top: 15px; top: 12px;
left: 0; left: 0;
color: #744a68; color: #64748b;
transition: .3s; transition: 0.3s ease;
pointer-events: none; pointer-events: none;
font-size: 22px; font-size: 15px;
font-family: arial;
} }
/* FLOATING LABEL & VALIDATION STATES */ /* FLOATING LABEL & VALIDATION STATES */
.input-container input:focus, .input-container input:focus {
.input-container input:valid { border-bottom-color: var(--theme-navy);
border-bottom-color: #744a68;
font-size: 20px;
font-family: arial;
} }
.input-container input:focus + label, .input-container input:focus + label,
.input-container input:not(:placeholder-shown) + label { .input-container input:not(:placeholder-shown) + label {
top: -12px; top: -12px;
font-size: 12px; font-size: 12px;
color: #744a68; color: var(--theme-navy);
font-weight: 600; font-weight: 600;
} }
/* FORGOT PASSWORD */ /* FORGOT PASSWORD */
.forgot-link { .forgot-link {
color: #744a68; color: var(--theme-red);
font-size: 16px; font-size: 14px;
text-decoration: none; text-decoration: none;
font-weight: 500; font-weight: 500;
padding-left: 37%;
transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out;
} }
.forgot-link:hover { .forgot-link:hover {
text-decoration: underline; text-decoration: underline;
color: #5E244E; color: var(--theme-red-hover);
} }
/* BUTTON */ /* BUTTON */
.btn-primary { .btn-primary {
height: 50px; height: 48px;
width: 100%; width: 100%;
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
background: #5E244E; background: var(--theme-red) !important;
border: none; border: none;
color: white; color: var(--white) !important;
/* border-radius: 8px; */ border-radius: 8px;
transition: background 0.2s ease-in-out, transform 0.1s ease; transition: all 0.2s ease;
} }
.btn-primary:hover, .btn-primary:focus { .btn-primary:hover, .btn-primary:focus {
background: #4a1c3e; background: var(--theme-red-hover) !important;
color: white; box-shadow: 0 4px 12px rgba(130, 36, 36, 0.3);
} }
.btn-primary:active { .btn-primary:active {
@ -141,22 +162,25 @@
/* BOTTOM TEXT */ /* BOTTOM TEXT */
.dontacc { .dontacc {
text-align: center; text-align: center;
margin-top: 15px;
} }
.dontacc p { .dontacc p {
color: #666; color: #64748b;
font-size: 14px;
} }
.dontacc a { .dontacc a {
color: #744a68; color: var(--theme-navy);
text-decoration: none; text-decoration: none;
font-weight: 600; font-weight: 600;
font-size: 16px; font-size: 15px;
font-family: arial; transition: color 0.2s ease;
} }
.dontacc a:hover { .dontacc a:hover {
text-decoration: underline; text-decoration: underline;
color: var(--theme-navy-dark);
} }
/* RESPONSIVE DESIGN */ /* RESPONSIVE DESIGN */
@ -171,14 +195,11 @@
} }
.box { .box {
padding: 30px; padding: 35px 25px;
} }
.headline { .headline {
font-size: 28px; font-size: 24px;
color: #5E244E;
font-weight: bold;
font-family: Arial;
} }
} }
</style> </style>
@ -188,17 +209,9 @@
<div class="container-fluid"> <div class="container-fluid">
<div class="row min-vh-100"> <div class="row min-vh-100">
<!-- <div class="col-lg-6 left-panel">
<div class="text-center">
<img src="{{ asset('images/login-banner.png') }}" class="img-fluid mb-4" alt="Automobile Engineering Academy">
<h2 class="fw-bold">Automobile Engineering Academy</h2>
<p class="text-muted px-5">
Driving Innovation Through Education, Research and Technology.
</p>
</div>
</div> -->
<div class="col-lg-6 right-panel">
<div class="col-lg-6 right-panel col-12 mx-auto">
<div class="box"> <div class="box">
<h2 class="headline">Student Sign In</h2> <h2 class="headline">Student Sign In</h2>
@ -223,15 +236,14 @@
<button type="submit" class="btn btn-primary mb-4"> <button type="submit" class="btn btn-primary mb-4 shadow-sm">
Sign In Sign In
</button> </button>
<div class="d-flex justify-content-end mb-4">
<div class="d-flex justify-content-end mb-4" style="gap: 10px;padding-top: 10px; padding-left: 190px;">
<a href="{{ url('/password/reset') }}" class="forgot-link">Forgot Password?</a> <a href="{{ url('/password/reset') }}" class="forgot-link">Forgot Password?</a>
</div> </div>
<div class="dontacc" style="padding-top: 10px; " > <div class="dontacc">
<!-- <p class="mb-1">Don't have an account?</p> --> <!-- <p class="mb-1">Don't have an account?</p> -->
<a href="{{ url('/signup') }}">Create Student Account</a> <a href="{{ url('/signup') }}">Create Student Account</a>
</div> </div>

1
resources/views/signup.blade.php
View File

@ -37,6 +37,7 @@
padding: 45px; padding: 45px;
border-radius: 18px; border-radius: 18px;
box-shadow: 0 15px 40px rgba(0,0,0,0.12); box-shadow: 0 15px 40px rgba(0,0,0,0.12);
scale : 0.72
} }
/* TITLE */ /* TITLE */

362
resources/views/timetable.blade.php
View File

@ -14,372 +14,350 @@
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
<style> <style>
body{ :root {
font-family:'Poppins',sans-serif; --theme-navy: #2D355B; /* Primary Navy */
background:#f4f7fc; --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;
} }
.page-header{ body {
background:linear-gradient(135deg,#9954b8,#4f3d5b)); font-family: 'Poppins', sans-serif;
color:#fff; background: var(--bg-light);
padding:45px;
border-radius:20px;
background-color: #5E244E;
margin-bottom:30px;
} }
.page-header h2{ /* Page Header Hero Section */
font-weight:700; .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 p{ .page-header h2 {
opacity:.9; font-weight: 700;
} }
.info-card{ .page-header p {
border:none; opacity: .85;
border-radius:15px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
} }
.table-card{ /* Info Cards & Wrapper */
background:#fff; .info-card {
border-radius:20px; background: var(--white);
box-shadow:0 10px 30px rgba(0,0,0,.08); border: 1px solid #e2e8f0;
overflow:hidden; border-radius: 16px;
box-shadow: 0 4px 15px rgba(0, 0, 0, .04);
} }
.table thead{ .today-card {
background:#0d6efd; background: var(--white);
color:#fff; 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 td,
.table th{ .table th {
text-align:center; text-align: center;
vertical-align:middle; vertical-align: middle;
min-width:140px; min-width: 140px;
} }
.badge-theory{ .table tbody th {
background:#0d6efd; background-color: #f8fafc;
color: var(--theme-navy);
font-weight: 600;
} }
.badge-practical{ /* Updated Status Badges */
background:#198754; .badge-theory {
background: var(--theme-navy) !important;
color: var(--white) !important;
} }
.badge-workshop{ .badge-practical {
background:#fd7e14; background: var(--theme-red) !important;
color: var(--white) !important;
} }
.badge-break{ .badge-workshop {
background:#ffc107; background: #e67e22 !important; /* Workshop Accent */
color:#000; color: var(--white) !important;
} }
.table tbody tr:hover{ .badge-break {
background:#f8fbff; background: var(--theme-yellow) !important;
transition:.3s; color: var(--theme-navy-dark) !important;
font-weight: 600;
} }
.legend span{ .table tbody tr:hover {
margin-right:15px; background: rgba(45, 53, 91, 0.02);
transition: .3s;
} }
.legend .badge{ .lunch-row {
padding:8px 12px; background-color: rgba(255, 234, 133, 0.25) !important;
color: var(--theme-navy-dark);
font-weight: 600;
} }
.today-card{ .legend span {
background:white; margin-right: 12px;
border-radius:15px; display: inline-block;
box-shadow:0 10px 25px rgba(0,0,0,.08); margin-bottom: 8px;
padding:25px;
height:100%;
} }
.today-card h5{ .legend .badge {
font-weight:600; padding: 8px 14px;
font-size: 12px;
} }
.download-btn{ /* Custom Buttons */
border-radius:50px; .download-btn {
padding:10px 25px; 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;
} }
@media(max-width:768px){ .download-btn:hover {
background-color: var(--theme-red-hover) !important;
.table td, color: var(--white) !important;
.table th{
font-size:13px;
min-width:120px;
} }
.page-header{ @media(max-width:768px) {
padding:25px; .table td,
} .table th {
font-size: 13px;
min-width: 120px;
}
.page-header {
padding: 25px;
}
} }
</style> </style>
<div class="container py-4"> <div class="container py-4">
<!-- Header --> <!-- Header -->
<div class="page-header"> <div class="page-header">
<div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
<div class="d-flex justify-content-between align-items-center flex-wrap">
<div> <div>
<h2 class="mb-1"><i class="fas fa-calendar-alt me-2" style="color: var(--theme-yellow);"></i>My Class Timetable</h2>
<h2><i class="fas fa-calendar-alt me-2"></i>My Class Timetable</h2>
<p class="mb-0"> <p class="mb-0">
Automobile Engineering Academy Student Portal Automobile Engineering Academy Student Portal
</p> </p>
</div> </div>
<button class="btn btn-light download-btn" onclick="window.print()"> <button class="btn download-btn shadow-sm" onclick="window.print()">
<i class="fas fa-print me-2"></i>Print <i class="fas fa-print me-2"></i>Print Timetable
</button> </button>
</div>
</div>
</div> </div>
<!-- Top Grid Info -->
<div class="row g-4 mb-4"> <div class="row g-4 mb-4">
<!-- Today's Schedule Card -->
<div class="col-lg-4"> <div class="col-lg-4">
<div class="today-card"> <div class="today-card">
<h5 class="mb-3"> <h5 class="mb-3">
<i class="fas fa-clock text-primary me-2"></i> <i class="fas fa-clock me-2" style="color: var(--theme-red);"></i>
Today's Classes Today's Schedule
</h5> </h5>
<div class="mb-3"> <div class="mb-3 p-2 rounded" style="background: #f8fafc; border-left: 3px solid var(--theme-navy);">
<strong>08:30 - 10:30</strong><br> <strong>08:30 - 10:30</strong><br>
<span class="badge badge-theory me-1">Theory</span>
<span class="badge badge-theory"> <span>Engine Fundamentals</span>
Theory
</span>
Engine Fundamentals
</div> </div>
<div class="mb-3"> <div class="mb-3 p-2 rounded" style="background: #f8fafc; border-left: 3px solid #e67e22;">
<strong>10:45 - 12:30</strong><br> <strong>10:45 - 12:30</strong><br>
<span class="badge badge-workshop me-1">Workshop</span>
<span class="badge badge-workshop"> <span>Practical Session</span>
Workshop
</span>
Practical Session
</div> </div>
<div> <div class="p-2 rounded" style="background: #f8fafc; border-left: 3px solid var(--theme-red);">
<strong>01:30 - 03:30</strong><br> <strong>01:30 - 03:30</strong><br>
<span class="badge badge-practical me-1">Practical</span>
<span class="badge badge-practical"> <span>Electrical System</span>
Practical </div>
</span> </div>
Electrical System
</div>
</div>
</div> </div>
<!-- Legend Card -->
<div class="col-lg-8"> <div class="col-lg-8">
<div class="info-card p-4 h-100 d-flex flex-column justify-content-between">
<div class="info-card p-4 h-100"> <div>
<h5 class="mb-3"> <h5 class="mb-3">
<i class="fas fa-info-circle text-primary me-2"></i> <i class="fas fa-info-circle me-2" style="color: var(--theme-navy);"></i>
Timetable Legend Timetable Legend
</h5> </h5>
<div class="legend"> <div class="legend mb-2">
<span> <span>
<span class="badge badge-theory">Theory</span> <span class="badge badge-theory">Theory</span>
</span> </span>
<span> <span>
<span class="badge badge-practical">Practical</span> <span class="badge badge-practical">Practical</span>
</span> </span>
<span> <span>
<span class="badge badge-workshop">Workshop</span> <span class="badge badge-workshop">Workshop</span>
</span> </span>
<span> <span>
<span class="badge badge-break">Break</span> <span class="badge badge-break">Break</span>
</span> </span>
</div>
</div> </div>
<hr> <div>
<hr class="text-muted">
<p class="mb-0 text-muted"> <p class="mb-0 text-muted small">
Please arrive at least 15 minutes before each class. <i class="fas fa-exclamation-circle me-1" style="color: var(--theme-red);"></i>
Attendance is compulsory for all practical sessions. Please arrive at least 15 minutes before each class. Attendance is compulsory for all practical sessions.
</p> </p>
</div>
</div>
</div> </div>
</div> </div>
</div> <!-- Timetable Grid -->
<!-- Timetable -->
<div class="table-card"> <div class="table-card">
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-bordered align-middle mb-0"> <table class="table table-bordered align-middle mb-0">
<thead> <thead>
<tr> <tr>
<th>Time</th> <th>Time</th>
<th>Monday</th> <th>Monday</th>
<th>Tuesday</th> <th>Tuesday</th>
<th>Wednesday</th> <th>Wednesday</th>
<th>Thursday</th> <th>Thursday</th>
<th>Friday</th> <th>Friday</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<th>08:30 - 10:30</th> <th>08:30 - 10:30</th>
<td> <td>
<span class="badge badge-theory">Theory</span><br> <span class="badge badge-theory mb-1">Theory</span><br>
Engine Fundamentals Engine Fundamentals
</td> </td>
<td> <td>
<span class="badge badge-practical">Practical</span><br> <span class="badge badge-practical mb-1">Practical</span><br>
Engine Lab Engine Lab
</td> </td>
<td> <td>
<span class="badge badge-theory">Theory</span><br> <span class="badge badge-theory mb-1">Theory</span><br>
Transmission Transmission
</td> </td>
<td> <td>
<span class="badge badge-workshop">Workshop</span><br> <span class="badge badge-workshop mb-1">Workshop</span><br>
Engine Repair Engine Repair
</td> </td>
<td> <td>
<span class="badge badge-theory">Theory</span><br> <span class="badge badge-theory mb-1">Theory</span><br>
Vehicle Safety Vehicle Safety
</td> </td>
</tr> </tr>
<tr> <tr>
<th>10:45 - 12:30</th> <th>10:45 - 12:30</th>
<td> <td>
<span class="badge badge-workshop">Workshop</span><br> <span class="badge badge-workshop mb-1">Workshop</span><br>
Service Practice Service Practice
</td> </td>
<td> <td>
<span class="badge badge-theory">Theory</span><br> <span class="badge badge-theory mb-1">Theory</span><br>
Electrical Electrical
</td> </td>
<td> <td>
<span class="badge badge-practical">Practical</span><br> <span class="badge badge-practical mb-1">Practical</span><br>
Diagnostics Diagnostics
</td> </td>
<td> <td>
<span class="badge badge-theory">Theory</span><br> <span class="badge badge-theory mb-1">Theory</span><br>
Fuel System Fuel System
</td> </td>
<td> <td>
<span class="badge badge-workshop">Workshop</span><br> <span class="badge badge-workshop mb-1">Workshop</span><br>
Engine Assembly Engine Assembly
</td> </td>
</tr> </tr>
<tr class="table-warning"> <tr class="lunch-row">
<th>12:30 - 01:30</th> <th>12:30 - 01:30</th>
<td colspan="5"> <td colspan="5">
🍴 LUNCH BREAK 🍴 LUNCH BREAK
</td> </td>
</tr> </tr>
<tr> <tr>
<th>01:30 - 03:30</th> <th>01:30 - 03:30</th>
<td> <td>
<span class="badge badge-practical">Practical</span><br> <span class="badge badge-practical mb-1">Practical</span><br>
Electrical System Electrical System
</td> </td>
<td> <td>
<span class="badge badge-workshop">Workshop</span><br> <span class="badge badge-workshop mb-1">Workshop</span><br>
Welding Welding
</td> </td>
<td> <td>
<span class="badge badge-theory">Theory</span><br> <span class="badge badge-theory mb-1">Theory</span><br>
Auto Electronics Auto Electronics
</td> </td>
<td> <td>
<span class="badge badge-practical">Practical</span><br> <span class="badge badge-practical mb-1">Practical</span><br>
Brake System Brake System
</td> </td>
<td> <td>
<span class="badge badge-theory">Theory</span><br> <span class="badge badge-theory mb-1">Theory</span><br>
Revision Revision
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
</div> </div>