Compare commits

...

23 Commits

Author SHA1 Message Date
KaviSaparamadu cb50fbbb19 ui chng 2026-08-07 15:04:46 +05:30
KaviSaparamadu 582c3a7e18 ui 2026-08-07 13:07:19 +05:30
KaviSaparamadu 523179880e ui 2 2026-08-07 12:41:16 +05:30
KaviSaparamadu 5f2abd44b4 ui chngs 2026-08-07 11:57:59 +05:30
KaviSaparamadu ba9b90f6e8 ui1 2026-08-07 11:25:00 +05:30
imadhigp e6b5166782 set code structures 2026-08-07 10:13:29 +05:30
imadhigp db3373002d admin set 3 2026-08-07 09:07:35 +05:30
imadhigp d24235a2b7 admin pages 2026-08-06 16:43:59 +05:30
imadhigp 679e37b780 set mycourese 2026-08-05 12:58:03 +05:30
imadhigp 41934b31fc set result and timetable pages 2026-08-05 10:21:54 +05:30
imadhigp 5d76c711f7 set lms parts 2026-08-04 10:36:33 +05:30
imadhigp 705917497d new chages add 2026-08-03 16:29:58 +05:30
imadhigp 897cd82bc6 set 0731 2026-07-31 09:00:01 +05:30
imadhigp d63e9c0a2b set courese backend 2026-07-28 16:46:11 +05:30
imadhigp fa299bcd7c set forget password backend 2026-07-28 11:56:20 +05:30
imadhigp 309934c18f forget password set 2026-07-27 17:01:28 +05:30
imadhigp a03cfc0f40 ui change new themes 2026-07-23 16:53:17 +05:30
imadhigp 5ca81c9b24 set new themes 0722 2026-07-22 17:06:18 +05:30
imadhigp 021ec03fda set new themes 0721 2026-07-21 16:57:33 +05:30
imadhigp 2e799d798a change themes 0720 2026-07-20 17:02:26 +05:30
imadhigp 4289f1d576 change themes 2026-07-18 17:01:09 +05:30
imadhigp 37cd68f170 change themes blue and red 2026-07-17 17:01:32 +05:30
imadhigp 4f3a79c114 7/16 push home 2026-07-16 19:20:24 +05:30
61 changed files with 9298 additions and 3146 deletions

View File

@ -0,0 +1,75 @@
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Facades\Hash;
class AdminAuthController extends Controller
{
public function showLoginForm()
{
return view('adminlogin');
}
public function login(Request $request)
{
// 1. set Validation
$request->validate([
'username' => 'required',
'password' => 'required',
]);
$admin = DB::table('adminlogins')->where('username', $request->username)->first();
if ($admin && Hash::check($request->password, $admin->password)) {
$request->session()->regenerate();
session([
'admin_id' => $admin->id,
'admin_username' => $admin->username
]);
return response()->json([
'success' => true,
'message' => 'Login Successful!',
'redirect_url' => route('admin.mycourses') // නැතහොත් route('admin.admindashboard')
]);
}
return response()->json([
'success' => false,
'message' => 'Wrong Username or Password!'
], 401);
}
public function logout(Request $request)
{
$request->session()->forget(['admin_id', 'admin_username']);
$request->session()->invalidate();
$request->session()->regenerateToken();
if ($request->ajax() || $request->wantsJson()) {
return response()->json([
'success' => true,
'redirect_url' => route('admin.login')
]);
}
return redirect()->route('admin.login')->with('success', 'Logged out successfully!');
}
}

View File

@ -0,0 +1,43 @@
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Timetable;
use App\Models\Notification;
class AdminDashboardController extends Controller
{
public function index()
{
if (!session()->has('admin_id')) {
return redirect()->route('admin.login')->with('error', 'Please login first.');
}
$totalTimetableSlots = Timetable::count();
$unreadNotifications = Notification::where('target_role', 'admin')
->where('is_read', false)
->count();
$notifications = Notification::where('target_role', 'admin')
->orderBy('created_at', 'desc')
->take(5)
->get();
return view('admin.admindashboard', compact(
'totalTimetableSlots',
'unreadNotifications',
'notifications'
));
}
public function markAsRead($id)
{
$notification = Notification::findOrFail($id);
$notification->update(['is_read' => true]);
return redirect()->back()->with('success', 'Notification marked as read!');
}
}

View File

@ -0,0 +1,60 @@
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Hash;
use App\Models\AdminLogin;
class AdminProfileController extends Controller
{
// Display Admin Profile
public function index()
{
$adminId = session('admin_id');
$admin = AdminLogin::find($adminId);
return view('admin.adminprofile', compact('admin'));
}
// Update Username Information
public function update(Request $request)
{
$adminId = session('admin_id');
$admin = AdminLogin::findOrFail($adminId);
$request->validate([
'username' => 'required|string|max:255|unique:adminlogins,username,' . $admin->id,
]);
$admin->update([
'username' => $request->username,
]);
return redirect()->back()->with('success', 'Username updated successfully!');
}
// Change Password
public function updatePassword(Request $request)
{
$request->validate([
'current_password' => 'required',
'new_password' => 'required|min:6|confirmed',
]);
$adminId = session('admin_id');
$admin = AdminLogin::findOrFail($adminId);
// Verify current password
if (!Hash::check($request->current_password, $admin->password)) {
return redirect()->back()->withErrors(['current_password' => 'Current password does not match our records.']);
}
// Update to new password
$admin->update([
'password' => Hash::make($request->new_password)
]);
return redirect()->back()->with('success', 'Password updated successfully!');
}
}

View File

@ -0,0 +1,60 @@
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Result; // Adjust based on your model name
class AdminResultsController extends Controller
{
public function index()
{
$results = Result::orderBy('id', 'desc')->get();
return view('admin.adminresults', compact('results'));
}
public function store(Request $request)
{
$validated = $request->validate([
'student_log_id' => 'required|string|max:255',
'module_code' => 'required|string|max:255',
'module_name' => 'required|string|max:255',
'academic_year' => 'required|string|max:255',
'semester' => 'required|string|max:255',
'marks' => 'required|numeric|min:0|max:100',
'grade' => 'required|string|max:10',
'status' => 'required|in:Pass,Fail',
]);
Result::create($validated);
return redirect()->route('admin.results')->with('success', 'Exam result added successfully.');
}
public function update(Request $request, $id)
{
$validated = $request->validate([
'student_log_id' => 'required|string|max:255',
'module_code' => 'required|string|max:255',
'module_name' => 'required|string|max:255',
'academic_year' => 'required|string|max:255',
'semester' => 'required|string|max:255',
'marks' => 'required|numeric|min:0|max:100',
'grade' => 'required|string|max:10',
'status' => 'required|in:Pass,Fail',
]);
$result = Result::findOrFail($id);
$result->update($validated);
return redirect()->route('admin.results')->with('success', 'Exam result updated successfully.');
}
public function destroy($id)
{
$result = Result::findOrFail($id);
$result->delete();
return redirect()->route('admin.results')->with('success', 'Exam result deleted successfully.');
}
}

View File

@ -0,0 +1,75 @@
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Timetable;
use Carbon\Carbon;
class AdminTimetableController extends Controller
{
public function index()
{
if (!session()->has('admin_id')) {
return redirect()->route('admin.login')->with('error', 'Please login first.');
}
$allTimetables = Timetable::all();
$grid = [];
foreach ($allTimetables as $item) {
$grid[$item->time_slot][$item->day] = $item;
}
$days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];
$timeSlots = [
'08:30 - 10:30',
'10:45 - 12:30',
'12:30 - 01:30', // Lunch / Rest Time
'01:30 - 03:30'
];
// Today's Day Name
$today = Carbon::now()->format('l');
$todaySchedule = Timetable::where('day', $today)->get();
return view('admin.admintimetable', compact('allTimetables', 'days', 'timeSlots', 'grid', 'todaySchedule', 'today'));
}
public function store(Request $request)
{
$request->validate([
'time_slot' => 'required|string',
'day' => 'required|string',
'subject_name' => 'required|string|max:255',
'type' => 'required|string',
]);
Timetable::updateOrCreate(
[
'day' => $request->day,
'time_slot' => $request->time_slot,
],
[
'subject_name' => $request->subject_name,
'type' => $request->type,
]
);
return redirect()->back()->with('success', 'Timetable saved successfully!');
}
// Delete Single Slot
public function destroy($id)
{
$timetable = Timetable::findOrFail($id);
$timetable->delete();
return redirect()->back()->with('success', 'Timetable slot cleared successfully!');
}
}

View File

@ -0,0 +1,46 @@
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
class CoureseAssignController extends Controller
{
public function showMyCourse()
{
$studentLogId = session('student_log_id');
$studentId = session('student_id');
if (!$studentLogId && !$studentId) {
return redirect('/signin')->with('error', 'Please login first!');
}
$student = DB::table('student_details')
->where('student_portal_log_id', $studentLogId)
->orWhere('student_id', $studentId)
->first();
if (!$student) {
return redirect()->back()->with('error', 'Student record not found!');
}
$course = DB::table('courses')
->join('course_assign_student', 'courses.id', '=', 'course_assign_student.course_id')
->where('course_assign_student.student_details_id', $student->id)
->select('courses.*')
->first();
return view('mycourse', compact('course', 'student'));
}
public function showModule($id)
{
return view('module', ['moduleId' => $id]);
}
}

View File

@ -3,40 +3,75 @@
namespace App\Http\Controllers; namespace App\Http\Controllers;
use Illuminate\Http\Request; use Illuminate\Http\Request;
use App\Models\Feedback;
use Illuminate\Support\Facades\DB; use Illuminate\Support\Facades\DB;
class FeedbackController extends Controller class FeedbackController extends Controller
{ {
// public function feedback(Request $request)
// {
// $request->validate([ public function index(Request $request)
// 'feedback_type' => 'required', {
// 'subject' => 'required|string|max:255', $studentLogId = session('student_log_id') ?? session('student_id');
// 'feedback_text' => 'required|string',
// ]); if (!$studentLogId) {
return redirect('/')->with('error', 'Please login first!');
}
$feedbacks = DB::table('feedback')
->where('student_id', $studentLogId)
->orderBy('created_at', 'desc')
->get();
return view('Feedback&Complain', compact('feedbacks'));
}
// $studentLogId = session('student_portal_log_id'); public function store(Request $request)
{
$studentLogId = session('student_log_id') ?? session('student_id');
if (!$studentLogId) {
return redirect('/')->with('error', 'Please login first to submit!');
}
// if (!$studentLogId) { $isComplaint = $request->has('is_complaint') && $request->is_complaint == "1";
// return redirect('/')->with('error', 'Please login first to submit feedback!');
// } if ($isComplaint) {
$request->validate([
'complaint_category' => 'required',
'complaint_title' => 'required|string|max:255',
'complaint_details' => 'required|string',
]);
$type = 'Complaint - ' . $request->complaint_category;
$subject = $request->complaint_title;
$text = $request->complaint_details;
} else {
$request->validate([
'feedback_type' => 'required',
'subject' => 'required|string|max:255',
'feedback_text' => 'required|string',
]);
$type = 'Feedback - ' . $request->feedback_type;
$subject = $request->subject;
$text = $request->feedback_text;
}
// DB::table('feedbacks')->insert([ DB::table('feedback')->insert([
// 'student_id' => $studentLogId, 'student_id' => $studentLogId,
// 'feedback_type' => $request->feedback_type, 'feedback_type' => $type,
// 'subject' => $request->subject, 'subject' => $subject,
// 'feedback_text' => $request->feedback_text, 'feedback_text' => $text,
// 'status' => 'Pending', 'status' => 'Pending',
// 'created_at' => now(), 'created_at' => now(),
// 'updated_at' => now(), 'updated_at' => now(),
// ]); ]);
return redirect()->back()->with('success', ($isComplaint ? 'Complaint' : 'Feedback') . ' submitted successfully!');
}
// return redirect()->back()->with('success', 'Feedback submitted successfully!');
// }
} }

View File

@ -0,0 +1,35 @@
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Result;
class ResultsController extends Controller
{
public function index()
{
$studentLogId = session('student_log_id') ?? session('student_id');
if (!$studentLogId) {
return redirect('/signin')->with('error', 'Please login first!');
}
$results = Result::where('student_log_id', $studentLogId)->get();
$totalModules = $results->count();
$passedModules = $results->filter(function ($item) {
return strtolower(trim($item->status)) === 'pass';
})->count();
$averageMarks = $totalModules > 0 ? round($results->avg('marks'), 1) : 0;
return view('results', compact('results', 'totalModules', 'passedModules', 'averageMarks'));
}
}

View File

@ -4,58 +4,90 @@ namespace App\Http\Controllers;
use Illuminate\Http\Request; use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB; use Illuminate\Support\Facades\DB;
use App\Models\StudentPortalLog ;
use Illuminate\Support\Facades\Hash; use Illuminate\Support\Facades\Hash;
class StudentPortalController extends Controller class StudentPortalController extends Controller
{ {
public function studentlogin(Request $request)
{ public function studentlogin(Request $request)
{
$request->validate([ $request->validate([
'username' => 'required', 'username' => 'required|string',
'password' => 'required', 'password' => 'required|string',
'pin' => 'required|numeric', 'pin' => 'required|numeric',
]); ]);
$student = DB::table('student_portal_logs') $student = DB::table('student_portal_logs')
->where('email', $request->username) ->where('email', $request->username)
->orWhere('studentid', $request->username)
->first(); ->first();
if ($student && Hash::check($request->password, $student->password) && $student->pin == $request->pin) { if ($student && Hash::check($request->password, $student->password) && $student->pin == $request->pin) {
if ($student->status !== 'active' && $student->status !== '') {
return redirect('/')->with('error', 'Your account is inactive!'); if ($student->status !== 'active' && $student->status !== '' && !is_null($student->status)) {
return redirect()->back()->with('error', 'Your account is inactive!');
} }
$request->session()->put('student_id', $student->studentid); $request->session()->put('student_id', $student->studentid);
$request->session()->put('student_log_id', $student->id ?? null);
$name = trim(($student->first_name ?? '') . ' ' . ($student->last_name ?? ''));
$request->session()->put('student_name', $name ?: ($student->email ?? $student->studentid));
return redirect()->route('student.portal')->with('success', 'Logged in successfully!'); return redirect()->route('student.portal')->with('success', 'Logged in successfully!');
} }
return redirect('/')->with('error', 'Invalid Email, Password, or PIN!');
} return redirect()->back()->with('error', 'Invalid Email/Username, Password, or PIN!');
}
public function showProfile(Request $request)
{
$log_id = $request->session()->get('student_log_id');
$student_code = $request->session()->get('student_id');
if (!$log_id && !$student_code) {
return redirect('/')->with('error', 'Please login first!');
}
// public function showProfile(Request $request) $student = DB::table('student_details')
// { ->where(function ($query) use ($log_id, $student_code) {
if ($log_id) {
$query->where('student_portal_log_id', $log_id);
}
if ($student_code) {
// $log_id = $request->session()->get('student_id'); if ($log_id) {
$query->orWhere('student_id', $student_code);
} else {
$query->where('student_id', $student_code);
}
}
})
->first();
// if (!$log_id) { if (!$student) {
// return redirect('/')->with('error', 'Please login first!'); return redirect()->route('student.portal')->with('error', 'Student details not found in database!');
// } }
// $student = DB::table('student_details') return view('StudentProfile', compact('student'));
// ->where('student_portal_log_id', $log_id) }
// ->first();
public function studentlogout(Request $request)
{
$request->session()->forget(['student_id', 'student_log_id', 'student_name']);
$request->session()->invalidate();
$request->session()->regenerateToken();
// if (!$student) { return response()->json(['success' => true]);
// return redirect()->back()->with('error', 'Student details not found!'); }
// }
// return view('StudentProfile', compact('student'));
// }
} }

View File

@ -0,0 +1,42 @@
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Timetable;
use Carbon\Carbon;
class TimetableController extends Controller
{
public function index()
{
$studentLogId = session('student_log_id') ?? session('student_id');
if (!$studentLogId) {
return redirect('/signin')->with('error', 'Please login first!');
}
$rawTimetables = Timetable::all();
$schedule = [];
$timeSlots = [];
foreach ($rawTimetables as $item) {
if (!in_array($item->time_slot, $timeSlots)) {
$timeSlots[] = $item->time_slot;
}
$schedule[$item->time_slot][$item->day] = $item;
}
$todayName = Carbon::now()->format('l');
$todaySchedule = Timetable::where('day', $todayName)
->where('type', '!=', 'Break')
->get();
$days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];
return view('timetable', compact('schedule', 'timeSlots', 'days', 'todaySchedule', 'todayName'));
}
}

View File

@ -0,0 +1,123 @@
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Facades\Storage;
class adminmycoursesController extends Controller
{
public function index()
{
if (!session()->has('admin_id')) {
return redirect('/adminlogin')->with('error', 'Please login first!');
}
$courses = DB::table('courses')->orderBy('id', 'desc')->get();
return view('admin.adminmycourses', compact('courses'));
}
public function store(Request $request)
{
$request->validate([
'title' => 'required|string|max:255',
'course_code' => 'required|string|max:50',
'image' => 'nullable|image|mimes:jpeg,png,jpg,gif,webp|max:2048',
'duration' => 'required|string',
'level' => 'required|string',
'author' => 'nullable|string',
'desc' => 'nullable|string',
'status' => 'required|string',
]);
$imagePath = null;
if ($request->hasFile('image')) {
$imagePath = $request->file('image')->store('courses', 'public');
}
DB::table('courses')->insert([
'title' => $request->title,
'course_code' => $request->course_code,
'image' => $imagePath,
'duration' => $request->duration,
'level' => $request->level,
'author' => $request->author ?? 'Admin',
'desc' => $request->desc,
'student' => $request->student ?? 0,
'rating' => $request->rating ?? 0.0,
'badge' => $request->badge,
'trending' => $request->has('trending') ? 1 : 0,
'status' => $request->status,
'created_at' => now(),
'updated_at' => now(),
]);
return redirect()->back()->with('success', 'Course added successfully!');
}
public function update(Request $request, $id)
{
$request->validate([
'title' => 'required|string|max:255',
'course_code' => 'required|string|max:50',
'image' => 'nullable|image|mimes:jpeg,png,jpg,gif,webp|max:2048',
'duration' => 'required|string',
'level' => 'required|string',
'status' => 'required|string',
]);
$course = DB::table('courses')->where('id', $id)->first();
if (!$course) {
return redirect()->back()->with('error', 'Course not found!');
}
$imagePath = $course->image;
if ($request->hasFile('image')) {
if ($course->image && Storage::disk('public')->exists($course->image)) {
Storage::disk('public')->delete($course->image);
}
$imagePath = $request->file('image')->store('courses', 'public');
}
DB::table('courses')->where('id', $id)->update([
'title' => $request->title,
'course_code' => $request->course_code,
'image' => $imagePath,
'duration' => $request->duration,
'level' => $request->level,
'author' => $request->author,
'desc' => $request->desc,
'badge' => $request->badge,
'trending' => $request->has('trending') ? 1 : 0,
'status' => $request->status,
'updated_at' => now(),
]);
return redirect()->back()->with('success', 'Course updated successfully!');
}
public function destroy($id)
{
$course = DB::table('courses')->where('id', $id)->first();
if ($course) {
if ($course->image && Storage::disk('public')->exists($course->image)) {
Storage::disk('public')->delete($course->image);
}
DB::table('courses')->where('id', $id)->delete();
return redirect()->back()->with('success', 'Course deleted successfully!');
}
return redirect()->back()->with('error', 'Course not found!');
}
}

View File

@ -2,9 +2,60 @@
namespace App\Http\Controllers; namespace App\Http\Controllers;
use App\Models\Application;
use Illuminate\Http\Request; use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
class applyController extends Controller class ApplyController extends Controller
{ {
// public function index()
{
return view('apply');
}
public function store(Request $request)
{
$validatedData = $request->validate([
'first_name' => 'required|string|max:255',
'last_name' => 'required|string|max:255',
'nic' => 'nullable|string|max:50',
'nationality' => 'nullable|string|max:100',
'address' => 'required|string|max:500',
'state' => 'required|string|max:255',
'gender' => 'nullable|string',
'dob' => 'nullable|date',
'mobile' => 'required|string|max:20',
'mobile2' => 'nullable|string|max:20',
'email' => 'required|email|max:255',
'preferred_contact_method' => 'nullable|string',
'still_at_school' => 'nullable|string',
'highest_qualification' => 'nullable|string',
'school_name' => 'nullable|string|max:255',
'year_completed' => 'nullable|numeric|digits:4',
'exam_passed' => 'nullable|string',
'subjects' => 'nullable|string|max:255',
'grades_results' => 'nullable|string',
'certificates.*' => 'nullable|file|mimes:pdf,jpg,jpeg,png|max:5120', // Max 5MB per file
'emergency_contact_name' => 'required|string|max:255',
'emergency_contact_relationship' => 'required|string|max:255',
]);
$certificatePaths = [];
if ($request->hasFile('certificates')) {
foreach ($request->file('certificates') as $file) {
$path = $file->store('certificates', 'public');
$certificatePaths[] = $path;
}
}
$application = new Application($validatedData);
$application->user_id = Auth::id();
$application->certificates = $certificatePaths;
$application->save();
return redirect()->back()->with('success', 'Your application has been submitted successfully!');
}
} }

View File

@ -0,0 +1,112 @@
<?php
namespace App\Http\Controllers\Auth;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Session;
use Illuminate\Support\Facades\Mail;
use Illuminate\Support\Facades\Hash;
use App\Mail\OtpEmail;
use App\Models\User;
class ForgotPasswordController extends Controller
{
public function index()
{
return view('forgotPassword');
}
public function resetEmail(Request $request)
{
$request->validate([
'email' => 'required|email|exists:users,email'
], [
'email.exists' => 'The provided email is not registered in our system.'
]);
$email = $request->input('email');
$user = User::where('email', $email)->first();
$otp = random_int(100000, 999999);
Session::put('otp', $otp);
Session::put('email', $email);
$user->email_otp = $otp;
$user->save();
Mail::to($email)->send(new OtpEmail($otp));
return response()->json([
'success' => true,
'message' => 'OTP has been sent to your email.'
]);
}
public function verifyOtpEmail(Request $request)
{
$request->validate([
'otp' => 'required|numeric'
]);
$otp = $request->input('otp');
$email = Session::get('email');
if (!$email) {
return response()->json([
'success' => false,
'message' => 'Session expired. Please request a new OTP.'
], 400);
}
$user = User::where('email', $email)
->where('email_otp', $otp)
->first();
if ($user) {
Session::put('otp_verified', true);
return response()->json([
'success' => true,
'message' => 'OTP is correct.',
'email' => $email
]);
}
return response()->json([
'success' => false,
'message' => 'Invalid OTP code. Please try again.'
], 422);
}
public function updatePassword(Request $request)
{
$request->validate([
'email' => 'required|email|exists:users,email',
'password_mo' => 'required|string|min:8|confirmed',
]);
$email = $request->input('email');
if (!Session::get('otp_verified') || Session::get('email') !== $email) {
return redirect()->back()->with('error', 'Unauthorized access or session expired.');
}
$user = User::where('email', $email)->first();
if ($user) {
$user->password = Hash::make($request->input('password_mo'));
$user->email_otp = null;
$user->save();
Session::forget(['otp', 'email', 'otp_verified']);
return redirect('/signin')->with('success', 'Password updated successfully. Please login.');
}
return redirect()->back()->with('error', 'User not found.');
}
}

View File

@ -2,9 +2,16 @@
namespace App\Http\Controllers; namespace App\Http\Controllers;
use App\Models\courses;
use Illuminate\Http\Request; use Illuminate\Http\Request;
class coursesController extends Controller class coursesController extends Controller
{ {
// public function index()
{
$courses = courses::all();
return view('courses', compact('courses'));
}
} }

View File

@ -3,14 +3,18 @@
namespace App\Http\Controllers; namespace App\Http\Controllers;
use Illuminate\Http\Request; use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
class studentportalnavController extends Controller class studentportalnavController extends Controller
{ {
public function logout(Request $request) public function logout(Request $request)
{ {
$request->session()->forget(['student_log_id', 'student_id']);
Auth::logout(); Auth::logout();
$request->session()->invalidate(); $request->session()->invalidate();
$request->session()->regenerateToken(); $request->session()->regenerateToken();
return response()->json([ return response()->json([
'success' => true, 'success' => true,
'message' => 'Logged out successfully' 'message' => 'Logged out successfully'

56
app/Mail/OtpEmail.php Normal file
View File

@ -0,0 +1,56 @@
<?php
namespace App\Mail;
use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Mail\Mailable;
use Illuminate\Mail\Mailables\Attachment;
use Illuminate\Mail\Mailables\Content;
use Illuminate\Mail\Mailables\Envelope;
use Illuminate\Queue\SerializesModels;
class OtpEmail extends Mailable
{
use Queueable, SerializesModels;
public $otp;
/**
* Create a new message instance.
*/
public function __construct($otp)
{
$this->otp = $otp;
}
/**
* Get the message envelope.
*/
public function envelope(): Envelope
{
return new Envelope(
subject: 'Academy - Password Reset OTP',
);
}
/**
* Get the message content definition.
*/
public function content(): Content
{
return new Content(
view: 'Mail.otp',
);
}
/**
* Get the attachments for the message.
*
* @return array<int, Attachment>
*/
public function attachments(): array
{
return [];
}
}

View File

@ -0,0 +1,48 @@
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Application extends Model
{
use HasFactory;
protected $fillable = [
'user_id',
'first_name',
'last_name',
'nic',
'nationality',
'address',
'state',
'gender',
'dob',
'mobile',
'mobile2',
'email',
'preferred_contact_method',
'still_at_school',
'highest_qualification',
'school_name',
'year_completed',
'exam_passed',
'subjects',
'grades_results',
'certificates',
'emergency_contact_name',
'emergency_contact_relationship',
];
// Array/JSON Cast for dynamic Multi-file storage
protected $casts = [
'certificates' => 'array',
'dob' => 'date',
];
public function user()
{
return $this->belongsTo(User::class);
}
}

View File

@ -0,0 +1,20 @@
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Notification extends Model
{
use HasFactory;
protected $fillable = [
'title',
'message',
'type',
'link',
'is_read',
'target_role',
];
}

25
app/Models/Result.php Normal file
View File

@ -0,0 +1,25 @@
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Result extends Model
{
use HasFactory;
protected $table = 'results';
protected $fillable = [
'student_log_id',
'module_code',
'academic_year',
'semester',
'module_name',
'marks',
'grade',
'status',
];
}

22
app/Models/Timetable.php Normal file
View File

@ -0,0 +1,22 @@
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Timetable extends Model
{
use HasFactory;
protected $table = 'timetables';
protected $fillable = [
'student_log_id',
'time_slot',
'day',
'subject_name',
'type',
'sort_order',
];
}

View File

@ -24,6 +24,7 @@ class User extends Authenticatable
'email', 'email',
'phone', 'phone',
'password', 'password',
'email_otp',
]; ];
/** /**

19
app/Models/adminlogin.php Normal file
View File

@ -0,0 +1,19 @@
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Model;
class adminlogin extends Model
{
protected $table = 'adminlogins';
protected $fillable = [
'username',
'password',
];
protected $hidden = [
'password',
];
}

View File

@ -2,9 +2,39 @@
namespace App\Models; namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model; use Illuminate\Database\Eloquent\Model;
class courses extends Model class courses extends Model
{ {
// use HasFactory;
protected $table = 'courses';
protected $fillable = [
'title',
'image',
'duration',
'level',
'author',
'desc',
'student',
'rating',
'badge',
'trending',
'course_code',
'status'
];
public function students()
{
return $this->belongsToMany(
StudentDetail::class,
'course_assign_student',
'course_id',
'student_details_id'
);
}
} }

View File

@ -0,0 +1,57 @@
<?php
namespace App\Observers;
use App\Models\User;
use App\Models\StudentPortalLog;
class UserObserver
{
/**
* Handle the User "created" event.
*/
public function created(User $user): void
{
}
/**
* Handle the User "updated" event.
*/
public function updated(User $user): void
{
if ($user->isDirty('password')) {
StudentPortalLog::where('user_id', $user->id)
->update([
'password' => $user->password,
]);
}
}
/**
* Handle the User "deleted" event.
*/
public function deleted(User $user): void
{
}
/**
* Handle the User "restored" event.
*/
public function restored(User $user): void
{
}
/**
* Handle the User "force deleted" event.
*/
public function forceDeleted(User $user): void
{
}
}

View File

@ -3,6 +3,8 @@
namespace App\Providers; namespace App\Providers;
use Illuminate\Support\ServiceProvider; use Illuminate\Support\ServiceProvider;
use App\Models\User;
use App\Observers\UserObserver;
class AppServiceProvider extends ServiceProvider class AppServiceProvider extends ServiceProvider
{ {
@ -19,6 +21,6 @@ class AppServiceProvider extends ServiceProvider
*/ */
public function boot(): void public function boot(): void
{ {
// User::observe(UserObserver::class);
} }
} }

View File

@ -0,0 +1,28 @@
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::table('users', function (Blueprint $table) {
$table->string('email_otp')->nullable()->after('password');
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::table('users', function (Blueprint $table) {
$table->dropColumn('email_otp');
});
}
};

View File

@ -0,0 +1,59 @@
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::create('applications', function (Blueprint $table) {
$table->id();
$table->foreignId('user_id')->constrained()->onDelete('cascade');
// Student Info
$table->string('first_name');
$table->string('last_name');
$table->string('nic')->nullable();
$table->string('nationality')->nullable();
$table->string('address');
$table->string('state');
$table->string('gender')->nullable();
$table->date('dob')->nullable();
// Contact Info
$table->string('mobile');
$table->string('mobile2')->nullable();
$table->string('email');
$table->string('preferred_contact_method')->nullable();
// Academic Qualifications
$table->string('still_at_school')->nullable();
$table->string('highest_qualification')->nullable();
$table->string('school_name')->nullable();
$table->integer('year_completed')->nullable();
$table->string('exam_passed')->nullable();
$table->string('subjects')->nullable();
$table->text('grades_results')->nullable();
$table->json('certificates')->nullable(); // Multi-file paths JSON row එකක් ලෙස
// Emergency Contacts
$table->string('emergency_contact_name');
$table->string('emergency_contact_relationship');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('applications');
}
};

View File

@ -0,0 +1,35 @@
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::create('results', function (Blueprint $table) {
$table->id();
$table->foreignId('student_log_id')->constrained('student_portal_logs')->onDelete('cascade');
$table->string('module_code');
$table->string('academic_year');
$table->string('semester');
$table->string('module_name');
$table->integer('marks');
$table->string('grade');
$table->string('status')->default('Pass');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('results');
}
};

View File

@ -0,0 +1,33 @@
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::create('timetables', function (Blueprint $table) {
$table->id();
$table->unsignedBigInteger('student_log_id')->nullable();
$table->string('time_slot');
$table->string('day');
$table->string('subject_name');
$table->enum('type', ['Theory', 'Practical', 'Workshop', 'Break'])->default('Theory');
$table->integer('sort_order')->default(1);
$table->timestamps();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('timetables');
}
};

View File

@ -0,0 +1,29 @@
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::create('adminlogins', function (Blueprint $table) {
$table->id();
$table->string('username')->unique();
$table->string('password');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('adminlogins');
}
};

View File

@ -0,0 +1,33 @@
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::create('notifications', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->text('message');
$table->string('type')->default('info');
$table->string('link')->nullable();
$table->boolean('is_read')->default(false);
$table->string('target_role')->default('admin');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('notifications');
}
};

View File

@ -1,111 +1,135 @@
@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;
--theme-navy-dark: #1F2541;
--theme-red: #822424;
--theme-red-hover: #df2c3e;
--theme-yellow: #FFEA85;
--bg-light: #F6F6F6;
--white: #ffffff;
} }
/* Header */ body {
.feedback-header{ font-family: 'Poppins', sans-serif;
background:linear-gradient(135deg,#5E244E,#4a1c3e); background: var(--bg-light);
color:white;
padding:40px;
border-radius:20px;
margin-bottom:35px;
box-shadow:0 15px 35px rgba(0,0,0,.12);
} }
.feedback-header h2{ .feedback-header {
font-weight:700; 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);
} }
.feedback-header p{ .feedback-card {
color:#ddd; background: var(--white);
border: 1px solid #e2e8f0;
border-radius: 16px;
padding: 30px;
box-shadow: 0 4px 15px rgba(0, 0, 0, .04);
height: 100%;
} }
/* Cards */ .card-title {
.feedback-card{ color: var(--theme-navy);
background:#fff; font-weight: 700;
border-radius:20px; margin-bottom: 25px;
border:none;
padding:30px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
height:100%;
} }
.card-title{ .card-title i {
color:#5E244E; color: var(--theme-red);
font-weight:700; margin-right: 8px;
margin-bottom:25px;
} }
.card-title i{ .form-label {
color:#d4af37; font-weight: 600;
margin-right:8px; color: var(--theme-navy);
font-size: 14px;
} }
/* Inputs */ .form-control, .form-select {
.form-control, border-radius: 10px;
.form-select{ padding: 12px 15px;
border-radius:15px; border: 1px solid #cbd5e1;
padding:12px; font-size: 14px;
border:1px solid #ddd;
} }
.form-control:focus, .submit-btn {
.form-select:focus{ background: var(--theme-red) !important;
border-color:#744a68; color: var(--white) !important;
box-shadow:0 0 0 .2rem rgba(94,36,78,.15); border: none;
border-radius: 8px;
padding: 12px 30px;
font-weight: 600;
transition: all 0.2s ease;
width: 100%;
} }
/* Button */ .submit-btn:hover {
.submit-btn{ background: var(--theme-red-hover) !important;
background:#5E244E; color: var(--white) !important;
color:white;
border:none;
border-radius:50px;
padding:12px 30px;
font-weight:600;
} }
.submit-btn:hover{ .history-card {
background:#4a1c3e; margin-top: 35px;
color:#fff; background: var(--white);
border: 1px solid #e2e8f0;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, .04);
} }
/* History */ .history-head {
.history-card{ background: var(--theme-navy);
margin-top:35px; color: var(--white);
background:white; padding: 18px 25px;
border-radius:20px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,.08);
} }
.history-head{ .table th {
background:#5E244E; background: #f8fafc;
color:white; color: var(--theme-navy);
padding:18px 25px; font-weight: 600;
border-bottom: 2px solid #e2e8f0;
padding: 14px 20px;
} }
.badge-status{ .table td {
padding:7px 15px; vertical-align: middle;
border-radius:50px; padding: 14px 20px;
font-size:13px;
} }
.pending{ .badge-status {
background:#fff3cd; padding: 6px 14px;
color:#856404; border-radius: 30px;
font-size: 12px;
font-weight: 600;
display: inline-block;
} }
.resolved{ .pending {
background:#d1e7dd; background: rgba(255, 234, 133, 0.4);
color:#0f5132; color: #856404;
}
.resolved {
background: #d1e7dd;
color: #0f5132;
} }
</style> </style>
@ -113,89 +137,28 @@ 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 -->
<!-- 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>
@endif
@if(session('error'))
<div class="alert alert-danger alert-dismissible fade show rounded-3 mb-4" role="alert">
<i class="fas fa-exclamation-circle me-2"></i>{{ session('error') }}
<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 +166,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,46 +191,99 @@ 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>
<!-- Previous History Table --> <!-- 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">
<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>
<!-- Dynamic 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 class="m-0"><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>
<th> Subject </th> <th> Subject </th>
<th> Date </th> <th> Date </th>
<th>Status</th> <th> Status </th>
</tr> </tr>
</thead> </thead>
<tbody id="historyTableBody"> <tbody id="historyTableBody">
@forelse ($feedbacks as $item)
<tr> <tr>
<td>Feedback</td> <td>
<td>Workshop Equipment </td> <span class="fw-semibold" style="color: var(--theme-navy);">
<td>10 July 2026</td> {{ $item->feedback_type }}
<td><span class="badge-status resolved"> Resolved</span></td> </span>
</td>
<td>{{ $item->subject }}</td>
<td>{{ \Carbon\Carbon::parse($item->created_at)->format('d M Y') }}</td>
<td>
@if(strtolower($item->status) == 'resolved')
<span class="badge-status resolved"><i class="fas fa-check me-1"></i> Resolved</span>
@else
<span class="badge-status pending"><i class="fas fa-clock me-1"></i> {{ $item->status ?? 'Pending' }}</span>
@endif
</td>
</tr> </tr>
@empty
<tr> <tr>
<td>Complaint</td> <td colspan="4" class="text-center py-4 text-muted">
<td>Class Schedule Issue </td> <i class="fas fa-inbox fa-2x mb-2 d-block"></i>
<td>05 July 2026 </td> No feedback or complaints submitted yet.
<td><span class="badge-status pending"> Pending </span></td> </td>
</tr> </tr>
@endforelse
</tbody> </tbody>
</table> </table>
</div> </div>
@ -266,6 +291,4 @@ body{
</div> </div>
@endsection @endsection

View File

@ -1,310 +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:var(--primary); 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: 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>

View File

@ -4,383 +4,289 @@
@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> <i class="fas fa-user-graduate"></i> Student Profile </h2>
<p>Manage your personal information and academic details.</p>
<h2>
<i class="fas fa-user-graduate"></i>
Student Profile
</h2>
<p>
Manage your personal information and academic details.
</p>
</div> </div>
<!-- Main Profile Row -->
<div class="row g-4"> <div class="row g-4">
<!-- Profile Card -->
<!-- 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="{{ !empty($student->image) ? asset($student->image) : 'https://i.pravatar.cc/300' }}"
class="profile-image"> class="profile-image" alt="Profile Image">
<h3 class="student-name">Kasun Perera </h3>
<h3 class="student-name">{{ $student->full_name }}</h3>
<span class="student-id"> <span class="student-id">
Student ID : AEA20260045 Student ID : {{ $student->student_id }}
</span> </span>
<hr> <hr>
<button class="edit-btn mt-3"> <button class="edit-btn mt-3">
<i class="fas fa-edit"></i> Edit Profile </button> <i class="fas fa-edit"></i> Edit Profile
</button>
</div> </div>
</div> </div>
<!-- Personal Details -->
<!-- Details -->
<div class="col-lg-8"> <div class="col-lg-8">
<div class="profile-card"> <div class="profile-card">
<h4 class="info-title"> <h4 class="info-title">
<i class="fas fa-user"></i> <i class="fas fa-user"></i> Personal Information
Personal Information
</h4> </h4>
<div class="info-row"> <div class="info-row">
<span class="label"> <span class="label">Full Name</span>
Full Name <span class="value">{{ $student->full_name }}</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">{{ $student->nic_passport }}</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>
<span class="value"> <span class="value">
15 March 2000 {{ !empty($student->date_of_birth) ? date('d F Y', strtotime($student->date_of_birth)) : 'N/A' }}
</span> </span>
</div> </div>
<div class="info-row"> <div class="info-row">
<span class="label"> <span class="label">Gender</span>
Gender <span class="value">{{ $student->gender }}</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 }}</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">{{ $student->phone }}</span>
</span>
<span class="value">
+94 77 1234567
</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- Education & Course Details Row -->
<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">
<h4 class="info-title"> <h4 class="info-title">
<i class="fas fa-graduation-cap"></i> <i class="fas fa-graduation-cap"></i> 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">{{ $student->qualification }}</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">{{ $student->institute }}</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">{{ $student->year_completed }}</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"></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> {{ $student->course_name }}
<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 : {{ $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> </div>
<div class="course-item">
<i class="fas fa-user-tie"></i>
Trainer : Mr. Nimal Silva
</div>
</div>
</div>
</div>
</div> </div>
@endsection @endsection

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>

View File

@ -6,16 +6,29 @@
<style> <style>
:root{ :root{
--primary:#5E244E; /* Premium Modern Automotive Palette */
--secondary:#8B3A74; --primary: #3E51B8; /* Tech Blue */
--light:#f8f4f7; --primary-light: #0a67df; /* Vibrant Electric Blue */
--secondary: #BC1A1A; /* Deep Racing Red */
--secondary-hover: #822424; /* Dark Burnt Red */
--accent-dark: #753939; /* Muted Crimson */
--bg-light: #F8FAFC; /* Soft slate light gray */
/* Semantic Adjustments */
--text-main: #1E293B; /* Slate dark grey */
--text-muted: #64748B; /* Neutral gray */
--card-border: rgba(62, 81, 184, 0.1);
} }
.hero-about{ body {
font-family: 'Segoe UI', Arial, sans-serif;
color: var(--text-main);
}
/* .hero-about{
min-height:60vh; min-height:60vh;
background: background:
linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7)), linear-gradient(rgba(185, 205, 253, 0.31), rgb(0, 0, 0)), url('https://images.pexels.com/photos/1595385/pexels-photo-1595385.jpeg');
url('https://images.pexels.com/photos/1595385/pexels-photo-1595385.jpeg');
background-size:cover; background-size:cover;
background-position:center; background-position:center;
display:flex; display:flex;
@ -23,6 +36,17 @@
justify-content:center; justify-content:center;
text-align:center; text-align:center;
color:#fff; color:#fff;
} */
.hero-about {
min-height: 60vh;
background: linear-gradient(rgba(194, 217, 255, 0.75), rgba(0, 0, 0, 0.85)), url('https://images.unsplash.com/photo-1617814076367-b759c7d7e738?auto=format&fit=crop&w=1600&q=80');
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #fff;
} }
.section-title{ .section-title{
@ -34,22 +58,22 @@
background:#fff; background:#fff;
border-radius:20px; border-radius:20px;
padding:35px 25px; padding:35px 25px;
box-shadow:0 10px 30px rgba(0,0,0,.05); box-shadow: 0 10px 30px rgba(0,0,0,.04);
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
border: 1px solid #efeff4; border: 1px solid var(--card-border);
} }
.about-box:hover { .about-box:hover {
transform: translateY(-10px) scale(1.02); transform: translateY(-10px) scale(1.02);
box-shadow: 0 20px 40px rgba(94, 36, 78, 0.1); box-shadow: 0 20px 40px rgba(62, 81, 184, 0.12);
border-color: var(--primary); border-color: var(--primary-light);
} }
.icon-circle { .icon-circle {
width:75px; width:75px;
height:75px; height:75px;
background:var(--primary); background: #6e3232;
color:#fff; color: #f6e983;
border-radius:50%; border-radius:50%;
display:flex; display:flex;
align-items:center; align-items:center;
@ -60,8 +84,9 @@
} }
.about-box:hover .icon-circle { .about-box:hover .icon-circle {
background: var(--secondary); background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
transform: rotateY(180deg); /* කාඩ් එක උඩට යද්දී අයිකන් එක කැරකෙනවා */ transform: rotateY(180deg);
box-shadow: 0 5px 15px rgba(188, 26, 26, 0.3);
} }
/* ======================================================== /* ========================================================
@ -73,41 +98,36 @@
transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1); transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
} }
/* 1. පල්ලෙහා ඉඳන් උඩට එන ඇනිමේෂන් */
.fade-up-init { .fade-up-init {
transform: translateY(40px); transform: translateY(40px);
} }
/* 2. වමේ ඉඳන් දකුණට (රූපය සඳහා) */
.slide-left-init { .slide-left-init {
transform: translateX(-50px); transform: translateX(-50px);
} }
/* 3. දකුණේ ඉඳන් වමට (විස්තරය සඳහා) */
.slide-right-init { .slide-right-init {
transform: translateX(50px); transform: translateX(50px);
} }
/* 4. Zoom වෙලා bounce වෙන්න (කාඩ්ස් සඳහා) */
.zoom-in-init { .zoom-in-init {
transform: scale(0.85); transform: scale(0.85);
} }
/* Active Class (Scroll කරද්දී apply වේ) */
.animate-item.animated { .animate-item.animated {
opacity: 1; opacity: 1;
transform: translate(0) scale(1); transform: translate(0) scale(1);
} }
/* CTA බටන් එක ගැස්සෙන ඇනිමේෂන් එකක් */ /* Automotive Theme Glow Pulse Button */
@keyframes pulse-btn { @keyframes pulse-btn {
0% { box-shadow: 0 0 0 0 rgba(94, 36, 78, 0.4); } 0% { box-shadow: 0 0 0 0 rgba(10, 103, 223, 0.4); }
70% { box-shadow: 0 0 0 15px rgba(94, 36, 78, 0); } 70% { box-shadow: 0 0 0 15px rgba(10, 103, 223, 0); }
100% { box-shadow: 0 0 0 0 rgba(94, 36, 78, 0); } 100% { box-shadow: 0 0 0 0 rgba(10, 103, 223, 0); }
} }
.cta-btn { .cta-btn {
background: var(--primary); background: var(--primary-light);
color: #fff !important; color: #fff !important;
padding: 14px 35px; padding: 14px 35px;
border-radius: 50px; border-radius: 50px;
@ -118,8 +138,249 @@
} }
.cta-btn:hover { .cta-btn:hover {
background: var(--secondary); background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
transform: scale(1.05); transform: scale(1.05);
box-shadow: 0 5px 15px rgba(188, 26, 26, 0.4);
}
/* .btn-view-courses {
background: var(--primary);
color: #fff;
transition: all 0.3s ease;
}
.btn-view-courses:hover {
background: var(--secondary);
color: #fff;
box-shadow: 0 5px 15px rgba(188, 26, 26, 0.2);
} */
.btn-view-courses{
background: #822424;
color: #fff;
/* padding: 14px ; */
border-radius: 40px;
font-weight: 600;
transition: all 0.3s ease;
font-weight: bolder;
}
.btn-view-courses:hover {
background: var(--secondary-hover);
border-color: var(--secondary-hover);
color: #fff;
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(227, 100, 20, 0.3);
}
</style>
<!-- HERO -->
<section class="hero-about">
<div class="container">
<div class="animate-item animated fade-up-init">
<h1 class="fw-bold display-4">About Our Institute</h1>
<p class="mt-3 lead" style="max-width: 700px; margin: auto;">
We are committed to delivering high-quality automotive education
with practical training and industry-focused learning.
</p>
</div>
</div>
</section>
<!-- ABOUT CONTENT -->
<section class="py-5 overflow-hidden">
<div class="container">
<div class="row align-items-center g-5">
<div class="col-md-6 animate-item slide-left-init">
<img src="https://images.pexels.com/photos/3862130/pexels-photo-3862130.jpeg"
class="img-fluid rounded shadow-lg"
alt="About Image">
</div>
<div class="col-md-6 animate-item slide-right-init">
<h2 class="fw-bold mb-3">Who We Are</h2>
<p class="text-muted fs-5">
Our institute specializes in automotive engineering education,
offering hands-on training in modern vehicle technologies,
mechanical systems, and electric vehicles.
</p>
<p class="text-muted mb-4">
We focus on building skilled professionals who are ready for
the global automotive industry.
</p>
<a href="/courses" class="btn btn-view-courses btn-lg px-4 rounded-pill shadow-sm">
View Courses@extends('layouts.app')
@section('title','About Us')
@section('content')
<style>
:root {
/* Premium Modern Automotive Palette */
--primary: #3E51B8; /* Tech Blue */
--primary-light: #0a67df; /* Vibrant Electric Blue */
--secondary: #BC1A1A; /* Deep Racing Red */
--secondary-hover: #822424; /* Dark Burnt Red */
--accent-dark: #753939; /* Muted Crimson */
--bg-light: #F8FAFC; /* Soft slate light gray */
/* Semantic Adjustments */
--text-main: #1E293B; /* Slate dark grey */
--text-muted: #64748B; /* Neutral gray */
--card-border: rgba(62, 81, 184, 0.1);
}
body {
font-family: 'Segoe UI', Arial, sans-serif;
color: var(--text-main);
}
.hero-about {
min-height: 60vh;
background: linear-gradient(rgba(194, 217, 255, 0.75), rgba(0, 0, 0, 0.85)),url('https://images.unsplash.com/photo-1552519507-da3b142c6e3d?auto=format&fit=crop&w=1600&q=80');
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #fff;
}
.section-title {
text-align: center;
margin-bottom: 40px;
}
.about-box {
background: #fff;
border-radius: 20px;
padding: 35px 25px;
box-shadow: 0 10px 30px rgba(0,0,0,.04);
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
border: 1px solid var(--card-border);
}
.about-box:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 20px 40px rgba(62, 81, 184, 0.12);
border-color: var(--primary-light);
}
.icon-circle {
width: 75px;
height: 75px;
background: #6e3232;
color: #fffefa;;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
margin: auto;
transition: all 0.4s ease;
}
.about-box:hover .icon-circle {
background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
transform: rotateY(180deg);
box-shadow: 0 5px 15px rgba(188, 26, 26, 0.3);
}
/* ========================================================
Advanced CSS Scroll Animations
======================================================== */
.animate-item {
opacity: 0;
will-change: transform, opacity;
transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.fade-up-init {
transform: translateY(40px);
}
.slide-left-init {
transform: translateX(-50px);
}
.slide-right-init {
transform: translateX(50px);
}
.zoom-in-init {
transform: scale(0.85);
}
.animate-item.animated {
opacity: 1;
transform: translate(0) scale(1);
}
/* Automotive Theme Glow Pulse Button */
@keyframes pulse-btn {
0% { box-shadow: 0 0 0 0 rgba(10, 103, 223, 0.4); }
70% { box-shadow: 0 0 0 15px rgba(10, 103, 223, 0); }
100% { box-shadow: 0 0 0 0 rgba(10, 103, 223, 0); }
}
/* .cta-btn {
background: var(--primary-light);
color: #fff !important;
padding: 14px 35px;
border-radius: 50px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
animation: pulse-btn 2s infinite;
}
.cta-btn:hover {
background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
transform: scale(1.05);
box-shadow: 0 5px 15px rgba(188, 26, 26, 0.4);
} */
.cta-btn{
background: #822424;
color: #fff;
padding: 14px 35px;
border-radius: 40px;
font-weight: 600;
transition: all 0.3s ease;
font-weight: bolder;
}
.cta-btn:hover {
background: var(--secondary-hover);
border-color: var(--secondary-hover);
color: #fff;
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(227, 100, 20, 0.3);
}
.btn-view-courses {
background: var(--secondary-hover);
color: #fff;
padding: 14px 35px;
border-radius: 40px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
/* border: none; */
}
.btn-view-courses:hover {
background: var(--secondary);
color: #fff;
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(188, 26, 26, 0.3);
} }
</style> </style>
@ -140,14 +401,12 @@
<section class="py-5 overflow-hidden"> <section class="py-5 overflow-hidden">
<div class="container"> <div class="container">
<div class="row align-items-center g-5"> <div class="row align-items-center g-5">
<!-- වමේ සිට දකුණට පැමිණේ -->
<div class="col-md-6 animate-item slide-left-init"> <div class="col-md-6 animate-item slide-left-init">
<img src="https://images.pexels.com/photos/3862130/pexels-photo-3862130.jpeg" <img src="https://images.pexels.com/photos/3862130/pexels-photo-3862130.jpeg"
class="img-fluid rounded shadow-lg" class="img-fluid rounded shadow-lg"
alt="About Image"> alt="About Image">
</div> </div>
<!-- දකුණේ සිට වමට පැමිණේ -->
<div class="col-md-6 animate-item slide-right-init"> <div class="col-md-6 animate-item slide-right-init">
<h2 class="fw-bold mb-3">Who We Are</h2> <h2 class="fw-bold mb-3">Who We Are</h2>
<p class="text-muted fs-5"> <p class="text-muted fs-5">
@ -159,7 +418,7 @@
We focus on building skilled professionals who are ready for We focus on building skilled professionals who are ready for
the global automotive industry. the global automotive industry.
</p> </p>
<a href="{{ route('courses') }}" class="btn btn-dark btn-lg px-4 rounded-pill"> <a href="/courses" class="btn btn-view-courses btn-lg px-4 rounded-pill shadow-sm">
View Courses View Courses
</a> </a>
</div> </div>
@ -177,7 +436,6 @@
</div> </div>
<div class="row g-4"> <div class="row g-4">
<!-- කාඩ් එකින් එක Zoom-in වේ -->
<div class="col-md-4 animate-item zoom-in-init" style="transition-delay: 100ms;"> <div class="col-md-4 animate-item zoom-in-init" style="transition-delay: 100ms;">
<div class="about-box text-center"> <div class="about-box text-center">
<div class="icon-circle"> <div class="icon-circle">
@ -245,7 +503,98 @@ document.addEventListener('DOMContentLoaded', function () {
} }
}); });
}, { }, {
threshold: 0.15 // Element එකෙන් 15%ක් පෙනෙද්දීම ඇනිමේෂන් එක පටන් ගනී threshold: 0.15
});
animatedElements.forEach(el => observer.observe(el));
});
</script>
@endsection
</a>
</div>
</div>
</div>
</section>
<!-- FEATURES -->
<section class="py-5 bg-light">
<div class="container">
<div class="section-title animate-item fade-up-init">
<h2 class="fw-bold">Why Choose Us</h2>
<p class="text-muted">We provide the best learning experience</p>
</div>
<div class="row g-4">
<div class="col-md-4 animate-item zoom-in-init" style="transition-delay: 100ms;">
<div class="about-box text-center">
<div class="icon-circle">
<i class="fa-solid fa-chalkboard-user"></i>
</div>
<h4 class="mt-4 fw-bold">Expert Lecturers</h4>
<p class="text-muted mb-0">
Experienced industry professionals guiding your learning journey.
</p>
</div>
</div>
<div class="col-md-4 animate-item zoom-in-init" style="transition-delay: 250ms;">
<div class="about-box text-center">
<div class="icon-circle">
<i class="fa-solid fa-screwdriver-wrench"></i>
</div>
<h4 class="mt-4 fw-bold">Practical Training</h4>
<p class="text-muted mb-0">
Hands-on workshop experience with real vehicles and tools.
</p>
</div>
</div>
<div class="col-md-4 animate-item zoom-in-init" style="transition-delay: 400ms;">
<div class="about-box text-center">
<div class="icon-circle">
<i class="fa-solid fa-certificate"></i>
</div>
<h4 class="mt-4 fw-bold">Certified Courses</h4>
<p class="text-muted mb-0">
Industry-recognized certifications to boost your career.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-5 text-center bg-white overflow-hidden">
<div class="container py-4 animate-item fade-up-init">
<h2 class="fw-bold mb-3">Start Your Automotive Career Today</h2>
<p class="text-muted fs-5 mb-5">
Join our institute and become a skilled automotive professional.
</p>
<div class="d-flex justify-content-center">
<a href="/apply" class="cta-btn shadow">
Apply Courses
</a>
</div>
</div>
</section>
<script>
document.addEventListener('DOMContentLoaded', function () {
const animatedElements = document.querySelectorAll('.animate-item');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animated');
observer.unobserve(entry.target);
}
});
}, {
threshold: 0.15
}); });
animatedElements.forEach(el => observer.observe(el)); animatedElements.forEach(el => observer.observe(el));

View File

@ -0,0 +1,233 @@
@extends('layouts.adminnav')
@section('title', 'Admin Dashboard')
@section('content')
<style>
.welcome-card {
background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
color: #ffffff;
border-radius: 12px;
}
.stat-card {
transition: transform 0.2s ease, box-shadow 0.2s ease;
border: none;
border-radius: 12px;
}
.stat-card:hover {
transform: translateY(-4px);
}
.icon-box {
width: 55px;
height: 55px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
</style>
<div class="container-fluid py-4">
<!-- Welcome Banner -->
<div class="welcome-card p-4 mb-4 shadow-sm d-flex justify-content-between align-items-center">
<div>
<h3 class="fw-bold mb-1"><i class="fa-solid fa-gauge me-2"></i>Welcome to Admin Dashboard</h3>
<p class="mb-0 text-white-50">Automobile Engineering Academy System Overview</p>
</div>
<div class="text-end d-none d-md-block">
<span class="badge bg-danger fs-6 px-3 py-2 rounded-pill"><i class="fa-solid fa-shield-halved me-1"></i> System Active</span>
</div>
</div>
<!-- Alert Messages -->
@if(session('success'))
<div class="alert alert-success alert-dismissible fade show mb-4" role="alert">
<i class="fa-solid fa-circle-check me-2"></i>{{ session('success') }}
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif
<!-- Quick Stats Cards Row -->
<div class="row g-4 mb-4">
<!-- Courses Card -->
<div class="col-md-6 col-lg-3">
<div class="card stat-card shadow-sm h-100">
<div class="card-body d-flex align-items-center justify-content-between p-4">
<div>
<span class="text-muted fw-bold small text-uppercase">My Courses</span>
<h3 class="fw-bold text-dark mt-1 mb-0">Manage</h3>
</div>
<div class="icon-box bg-primary bg-opacity-10 text-primary">
<i class="fa-solid fa-book"></i>
</div>
</div>
<div class="card-footer bg-light border-0 py-2 text-center">
<a href="{{ route('admin.mycourses') }}" class="text-primary fw-bold text-decoration-none small">
View Details <i class="fa-solid fa-arrow-right ms-1"></i>
</a>
</div>
</div>
</div>
<!-- Timetable Card -->
<div class="col-md-6 col-lg-3">
<div class="card stat-card shadow-sm h-100">
<div class="card-body d-flex align-items-center justify-content-between p-4">
<div>
<span class="text-muted fw-bold small text-uppercase">Active Slots</span>
<h3 class="fw-bold text-dark mt-1 mb-0">{{ $totalTimetableSlots ?? 0 }}</h3>
</div>
<div class="icon-box bg-success bg-opacity-10 text-success">
<i class="fa-solid fa-calendar-days"></i>
</div>
</div>
<div class="card-footer bg-light border-0 py-2 text-center">
<a href="{{ route('admin.timetable') }}" class="text-success fw-bold text-decoration-none small">
Manage Timetable <i class="fa-solid fa-arrow-right ms-1"></i>
</a>
</div>
</div>
</div>
<!-- Exam Results Card -->
<div class="col-md-6 col-lg-3">
<div class="card stat-card shadow-sm h-100">
<div class="card-body d-flex align-items-center justify-content-between p-4">
<div>
<span class="text-muted fw-bold small text-uppercase">Results</span>
<h3 class="fw-bold text-dark mt-1 mb-0">Publish</h3>
</div>
<div class="icon-box bg-warning bg-opacity-10 text-warning">
<i class="fa-solid fa-graduation-cap"></i>
</div>
</div>
<div class="card-footer bg-light border-0 py-2 text-center">
<a href="{{ route('admin.results') }}" class="text-warning fw-bold text-decoration-none small">
Manage Results <i class="fa-solid fa-arrow-right ms-1"></i>
</a>
</div>
</div>
</div>
<!-- Notifications Card -->
<div class="col-md-6 col-lg-3">
<div class="card stat-card shadow-sm h-100">
<div class="card-body d-flex align-items-center justify-content-between p-4">
<div>
<span class="text-muted fw-bold small text-uppercase">Notifications</span>
<h3 class="fw-bold text-dark mt-1 mb-0">{{ $unreadNotifications ?? 0 }} New</h3>
</div>
<div class="icon-box bg-danger bg-opacity-10 text-danger">
<i class="fa-solid fa-bell"></i>
</div>
</div>
<div class="card-footer bg-light border-0 py-2 text-center">
<a href="#notifications-section" class="text-danger fw-bold text-decoration-none small">
View All <i class="fa-solid fa-arrow-down ms-1"></i>
</a>
</div>
</div>
</div>
</div>
<!-- Main Content Area: Quick Navigation & Live Notifications -->
<div class="row g-4">
<!-- Quick Action Shortcuts Panel -->
<div class="col-lg-7">
<div class="card border-0 shadow-sm rounded-3 h-100">
<div class="card-header bg-white py-3 border-0">
<h5 class="fw-bold mb-0 text-dark">
<i class="fa-solid fa-bolt text-warning me-2"></i>Quick Management Shortcuts
</h5>
</div>
<div class="card-body">
<div class="row g-3">
<div class="col-md-6">
<a href="{{ route('admin.timetable') }}" class="btn btn-outline-primary p-3 w-100 text-start d-flex align-items-center rounded-3">
<i class="fa-solid fa-calendar-plus fs-3 me-3"></i>
<div>
<strong class="d-block">Manage Timetable</strong>
<small class="text-muted">Edit weekly schedules and subjects</small>
</div>
</a>
</div>
<div class="col-md-6">
<a href="{{ route('admin.mycourses') }}" class="btn btn-outline-success p-3 w-100 text-start d-flex align-items-center rounded-3">
<i class="fa-solid fa-folder-plus fs-3 me-3"></i>
<div>
<strong class="d-block">Courses & Modules</strong>
<small class="text-muted">Add or edit active modules</small>
</div>
</a>
</div>
<div class="col-md-6">
<a href="{{ route('admin.results') }}" class="btn btn-outline-warning p-3 w-100 text-start d-flex align-items-center rounded-3">
<i class="fa-solid fa-file-invoice fs-3 me-3"></i>
<div>
<strong class="d-block">Student Results</strong>
<small class="text-muted">Upload and update grades</small>
</div>
</a>
</div>
<div class="col-md-6">
<a href="{{ route('admin.profile') }}" class="btn btn-outline-danger p-3 w-100 text-start d-flex align-items-center rounded-3">
<i class="fa-solid fa-user-gear fs-3 me-3"></i>
<div>
<strong class="d-block">Account Settings</strong>
<small class="text-muted">Update profile and password</small>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Live Notifications Feed Panel -->
<div class="col-lg-5" id="notifications-section">
<div class="card border-0 shadow-sm rounded-3 h-100">
<div class="card-header bg-white py-3 border-0 d-flex justify-content-between align-items-center">
<h5 class="fw-bold mb-0 text-dark">
<i class="fa-solid fa-bell text-danger me-2"></i>System Notifications
</h5>
<span class="badge bg-danger rounded-pill">{{ $unreadNotifications ?? 0 }} Unread</span>
</div>
<div class="card-body p-0">
<ul class="list-group list-group-flush">
@forelse($notifications ?? [] as $notification)
<li class="list-group-item p-3 border-bottom {{ $notification->is_read ? 'bg-light' : '' }}">
<div class="d-flex justify-content-between align-items-start">
<div>
<h6 class="fw-bold mb-1 text-dark">{{ $notification->title }}</h6>
<p class="mb-1 text-muted small">{{ $notification->message }}</p>
<small class="text-secondary opacity-75" style="font-size: 11px;">
<i class="fa-regular fa-clock me-1"></i>{{ $notification->created_at->diffForHumans() }}
</small>
</div>
@if(!$notification->is_read)
<form action="{{ route('admin.notifications.read', $notification->id) }}" method="POST">
@csrf
<button type="submit" class="btn btn-sm btn-outline-success" title="Mark as Read">
<i class="fa-solid fa-check"></i>
</button>
</form>
@endif
</div>
</li>
@empty
<li class="list-group-item text-center py-4 text-muted">
<i class="fa-solid fa-inbox fs-3 d-block mb-2 text-secondary"></i>
No notifications found.
</li>
@endforelse
</ul>
</div>
</div>
</div>
</div>
</div>
@endsection

View File

@ -0,0 +1,518 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Course Management - Admin Portal</title>
<!-- Font Awesome Icons & Bootstrap 5 -->
<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">
<style>
:root {
--theme-navy: #2D355B;
--theme-footer-navy: #1F2541;
--theme-red: #822424;
--theme-red-hover: #df2c3e;
--theme-yellow: #FFEA85;
--theme-bg: #F6F6F6;
--sidebar-width: 260px;
--text-dark: #333333;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', sans-serif;
}
body {
background-color: var(--theme-bg);
color: var(--text-dark);
display: flex;
min-height: 100vh;
overflow-x: hidden;
}
.sidebar {
width: var(--sidebar-width);
height: 100vh;
background: var(--theme-navy);
color: #fff;
position: fixed;
top: 0;
left: 0;
padding: 24px 0;
transition: all 0.3s ease;
z-index: 1030;
display: flex;
flex-direction: column;
box-shadow: 2px 0 10px rgba(0,0,0,0.1);
}
.sidebar .brand {
padding: 0 24px 20px;
font-weight: 700;
font-size: 1.25rem;
color: #ffffff;
border-bottom: 1px solid rgba(255,255,255,.15);
margin-bottom: 12px;
display: flex;
align-items: center;
}
.sidebar .admin-badge {
background-color: var(--theme-red);
font-size: 0.7rem;
padding: 2px 8px;
border-radius: 4px;
margin-left: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.sidebar .nav {
display: flex;
flex-direction: column;
flex-grow: 1;
overflow-y: auto;
}
.sidebar .nav-link {
color: rgba(255, 255, 255, 0.85);
padding: 14px 24px;
font-size: 0.95rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 12px;
transition: all 0.2s ease;
border-left: 4px solid transparent;
text-decoration: none;
}
.sidebar .nav-link i {
width: 20px;
text-align: center;
}
.sidebar .nav-link:hover {
background: rgba(255, 255, 255, 0.08);
color: var(--theme-yellow) !important;
padding-left: 28px;
}
.sidebar .nav-link.active {
background: var(--theme-footer-navy);
color: var(--theme-yellow) !important;
border-left: 4px solid #F73F52;
font-weight: 700;
}
.sidebar-user-profile {
padding: 15px 24px;
border-top: 1px solid rgba(255,255,255,.15);
margin-top: auto;
background: var(--theme-footer-navy);
}
.main {
margin-left: var(--sidebar-width);
width: calc(100% - var(--sidebar-width));
min-height: 100vh;
padding: 40px;
background: var(--theme-bg);
transition: all 0.3s ease;
}
.mobile-header {
display: none;
background: var(--theme-navy);
color: #ffffff;
padding: 12px 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
align-items: center;
justify-content: space-between;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1020;
}
.sidebar-toggle {
background: none;
border: none;
font-size: 1.4rem;
cursor: pointer;
color: #ffffff;
}
.sidebar-overlay {
display: none;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.5);
z-index: 1025;
}
.sidebar-overlay.show { display: block; }
@media (max-width: 991px) {
.sidebar { left: calc(-1 * var(--sidebar-width)); }
.sidebar.show { left: 0; }
.main { margin-left: 0; padding: 85px 20px 20px 20px; width: 100%; }
.mobile-header { display: flex; }
}
.course-img-preview {
width: 50px;
height: 50px;
object-fit: cover;
border-radius: 6px;
}
</style>
</head>
<body>
<!-- Mobile Top Navigation Bar -->
<header class="mobile-header">
<button class="sidebar-toggle" id="toggleBtn" aria-label="Toggle Sidebar">
<i class="fa-solid fa-bars"></i>
</button>
<div class="fw-bold">Admin Panel</div>
<a href="/admin/login" class="btn btn-sm btn-outline-light">Sign In</a>
</header>
<div class="sidebar-overlay" id="sidebarOverlay"></div>
<!-- Sidebar Navigation -->
<aside class="sidebar" id="sidebar">
<div class="brand">
<i class="fa-solid fa-car-side me-2"></i> AutoEdu
<span class="admin-badge">Admin</span>
</div>
<nav class="nav">
<a href="/admin/dashboard" class="nav-link">
<i class="fa-solid fa-chart-line"></i> Admin Dashboard
</a>
<a href="/admin/adminmycourses" class="nav-link active">
<i class="fa-solid fa-book-bookmark"></i> Course Management
</a>
<a href="/admin/timetable" class="nav-link">
<i class="fa-solid fa-calendar-check"></i> Class Timetable
</a>
<a href="/admin/results" class="nav-link">
<i class="fa-solid fa-file-invoice-dollar"></i> Exam Results
</a>
</nav>
<div class="sidebar-user-profile">
<div class="dropdown dropup">
<a class="text-white text-decoration-none dropdown-toggle d-flex align-items-center gap-2" href="#" data-bs-toggle="dropdown">
<i class="fa-solid fa-circle-user" style="font-size: 24px; color: var(--theme-yellow);"></i>
<span>{{ session('admin_username', 'Admin') }}</span>
</a>
<ul class="dropdown-menu dropdown-menu-start shadow w-100">
<li>
<button type="button" onclick="submitAdminLogout()" class="dropdown-item text-danger border-0 bg-transparent">
<i class="fa-solid fa-right-from-bracket me-2"></i> Logout
</button>
</li>
</ul>
</div>
</div>
</aside>
<!-- Main Content Area -->
<main class="main">
<div class="d-flex justify-content-between align-items-center mb-4">
<h3 class="fw-bold"><i class="fa-solid fa-book-bookmark me-2"></i> Course Management</h3>
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addCourseModal">
<i class="fa-solid fa-plus me-1"></i> Add New Course
</button>
</div>
<!-- Success/Error Alerts -->
@if(session('success'))
<div class="alert alert-success alert-dismissible fade show" role="alert">
{{ session('success') }}
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif
@if(session('error'))
<div class="alert alert-danger alert-dismissible fade show" role="alert">
{{ session('error') }}
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif
<!-- Courses Table Card -->
<div class="card border-0 shadow-sm rounded-3">
<div class="card-body p-0">
<div class="table-responsive">
<table class="table table-hover align-middle mb-0">
<thead class="table-dark">
<tr>
<th>#</th>
<th>Image</th>
<th>Code</th>
<th>Title</th>
<th>Duration</th>
<th>Level</th>
<th>Status</th>
<th class="text-center">Actions</th>
</tr>
</thead>
<tbody>
@forelse($courses as $course)
<tr>
<td>{{ $loop->iteration }}</td>
<td>
@if($course->image)
<img src="{{ asset('storage/' . $course->image) }}" class="course-img-preview" alt="Course Image">
@else
<span class="badge bg-secondary">No Image</span>
@endif
</td>
<td><span class="badge bg-light text-dark border">{{ $course->course_code }}</span></td>
<td class="fw-semibold">{{ $course->title }}</td>
<td>{{ $course->duration }}</td>
<td>{{ $course->level }}</td>
<td>
@if($course->status == 'Active')
<span class="badge bg-success">Active</span>
@else
<span class="badge bg-secondary">Inactive</span>
@endif
</td>
<td class="text-center">
<!-- Edit Button -->
<button class="btn btn-sm btn-outline-warning me-1"
data-bs-toggle="modal"
data-bs-target="#editCourseModal{{ $course->id }}">
<i class="fa-solid fa-pen-to-square"></i> Edit
</button>
<!-- Delete Form -->
<form action="{{ route('admin.courses.delete', $course->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Are you sure you want to delete this course?')">
@csrf
@method('DELETE')
<button type="submit" class="btn btn-sm btn-outline-danger">
<i class="fa-solid fa-trash"></i> Delete
</button>
</form>
</td>
</tr>
<!-- EDIT COURSE MODAL -->
<div class="modal fade" id="editCourseModal{{ $course->id }}" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form action="{{ route('admin.courses.update', $course->id) }}" method="POST" enctype="multipart/form-data">
@csrf
<div class="modal-header bg-warning text-dark">
<h5 class="modal-title fw-bold"><i class="fa-solid fa-pen-to-square me-2"></i>Edit Course</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<div class="row g-3">
<div class="col-md-8">
<label class="form-label fw-semibold">Course Title</label>
<input type="text" name="title" class="form-control" value="{{ $course->title }}" required>
</div>
<div class="col-md-4">
<label class="form-label fw-semibold">Course Code</label>
<input type="text" name="course_code" class="form-control" value="{{ $course->course_code }}" required>
</div>
<div class="col-md-4">
<label class="form-label fw-semibold">Duration</label>
<input type="text" name="duration" class="form-control" value="{{ $course->duration }}" required>
</div>
<div class="col-md-4">
<label class="form-label fw-semibold">Level</label>
<select name="level" class="form-select" required>
<option value="Beginner" {{ $course->level == 'Beginner' ? 'selected' : '' }}>Beginner</option>
<option value="Intermediate" {{ $course->level == 'Intermediate' ? 'selected' : '' }}>Intermediate</option>
<option value="Advanced" {{ $course->level == 'Advanced' ? 'selected' : '' }}>Advanced</option>
</select>
</div>
<div class="col-md-4">
<label class="form-label fw-semibold">Status</label>
<select name="status" class="form-select" required>
<option value="Active" {{ $course->status == 'Active' ? 'selected' : '' }}>Active</option>
<option value="Inactive" {{ $course->status == 'Inactive' ? 'selected' : '' }}>Inactive</option>
</select>
</div>
<div class="col-md-6">
<label class="form-label fw-semibold">Author/Lecturer</label>
<input type="text" name="author" class="form-control" value="{{ $course->author }}">
</div>
<div class="col-md-6">
<label class="form-label fw-semibold">Badge (e.g. Popular, New)</label>
<input type="text" name="badge" class="form-control" value="{{ $course->badge }}">
</div>
<div class="col-md-12">
<label class="form-label fw-semibold">Change Image (Optional)</label>
<input type="file" name="image" class="form-control">
</div>
<div class="col-md-12">
<label class="form-label fw-semibold">Description</label>
<textarea name="desc" class="form-control" rows="3">{{ $course->desc }}</textarea>
</div>
<div class="col-md-12 form-check">
<input class="form-check-input" type="checkbox" name="trending" value="1" id="trendingEdit{{ $course->id }}" {{ $course->trending ? 'checked' : '' }}>
<label class="form-check-label fw-semibold" for="trendingEdit{{ $course->id }}">
Mark as Trending Course
</label>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-warning">Save Changes</button>
</div>
</form>
</div>
</div>
</div>
@empty
<tr>
<td colspan="8" class="text-center py-4 text-muted">No courses found. Click "Add New Course" to create one.</td>
</tr>
@endforelse
</tbody>
</table>
</div>
</div>
</div>
</main>
<!-- ADD COURSE MODAL -->
<div class="modal fade" id="addCourseModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form action="{{ route('admin.courses.store') }}" method="POST" enctype="multipart/form-data">
@csrf
<div class="modal-header bg-navy text-white" style="background-color: var(--theme-navy);">
<h5 class="modal-title fw-bold text-white"><i class="fa-solid fa-plus me-2"></i>Add New Course</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<div class="row g-3">
<div class="col-md-8">
<label class="form-label fw-semibold">Course Title</label>
<input type="text" name="title" class="form-control" placeholder="e.g. Engine Diagnostics Masterclass" required>
</div>
<div class="col-md-4">
<label class="form-label fw-semibold">Course Code</label>
<input type="text" name="course_code" class="form-control" placeholder="e.g. AUTO-101" required>
</div>
<div class="col-md-4">
<label class="form-label fw-semibold">Duration</label>
<input type="text" name="duration" class="form-control" placeholder="e.g. 6 Months" required>
</div>
<div class="col-md-4">
<label class="form-label fw-semibold">Level</label>
<select name="level" class="form-select" required>
<option value="Beginner">Beginner</option>
<option value="Intermediate">Intermediate</option>
<option value="Advanced">Advanced</option>
</select>
</div>
<div class="col-md-4">
<label class="form-label fw-semibold">Status</label>
<select name="status" class="form-select" required>
<option value="Active">Active</option>
<option value="Inactive">Inactive</option>
</select>
</div>
<div class="col-md-6">
<label class="form-label fw-semibold">Author/Lecturer</label>
<input type="text" name="author" class="form-control" placeholder="Lecturer Name">
</div>
<div class="col-md-6">
<label class="form-label fw-semibold">Badge</label>
<input type="text" name="badge" class="form-control" placeholder="e.g. Popular">
</div>
<div class="col-md-12">
<label class="form-label fw-semibold">Course Image</label>
<input type="file" name="image" class="form-control">
</div>
<div class="col-md-12">
<label class="form-label fw-semibold">Description</label>
<textarea name="desc" class="form-control" rows="3" placeholder="Enter course description..."></textarea>
</div>
<div class="col-md-12 form-check">
<input class="form-check-input" type="checkbox" name="trending" value="1" id="trendingAdd">
<label class="form-check-label fw-semibold" for="trendingAdd">
Mark as Trending Course
</label>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save Course</button>
</div>
</form>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Sidebar Toggle Logic
const toggleBtn = document.getElementById('toggleBtn');
const sidebar = document.getElementById('sidebar');
const overlay = document.getElementById('sidebarOverlay');
if(toggleBtn) {
toggleBtn.addEventListener('click', () => {
sidebar.classList.toggle('show');
overlay.classList.toggle('show');
});
}
if(overlay) {
overlay.addEventListener('click', () => {
sidebar.classList.remove('show');
overlay.classList.remove('show');
});
}
// Admin Logout Logic
function submitAdminLogout() {
const tokenEl = document.querySelector('meta[name="csrf-token"]');
fetch('/admin/logout', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
'X-CSRF-TOKEN': tokenEl ? tokenEl.getAttribute('content') : ''
}
})
.then(res => res.json())
.then(data => {
if (data.success) {
window.location.href = '/adminlogin';
} else {
alert('Logout failed. Please try again.');
}
})
.catch(err => {
console.error('Error:', err);
alert('Server side error occurred during logout.');
});
}
</script>
</body>
</html>

View File

@ -0,0 +1,126 @@
@extends('layouts.adminnav')
@section('title', 'Admin Profile - Admin Panel')
@section('content')
<div class="container py-4">
<div class="row">
<div class="col-12 mb-4">
<h3 class="fw-bold text-navy">
<i class="fa-solid fa-user-gear me-2"></i>Admin Profile Management
</h3>
</div>
</div>
<!-- Success & Error Alerts -->
@if(session('success'))
<div class="alert alert-success alert-dismissible fade show mb-4" role="alert">
<i class="fa-solid fa-circle-check me-2"></i>{{ session('success') }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif
@if($errors->any())
<div class="alert alert-danger alert-dismissible fade show mb-4" role="alert">
<i class="fa-solid fa-triangle-exclamation me-2"></i>
<strong>Please check the form for errors:</strong>
<ul class="mb-0 mt-1">
@foreach($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif
<div class="row g-4">
<!-- Profile Summary Card -->
<div class="col-lg-4">
<div class="card border-0 shadow-sm rounded-3 text-center p-4">
<div class="card-body">
<div class="mb-3">
<div class="rounded-circle bg-navy text-white d-inline-flex align-items-center justify-content-center shadow" style="width: 100px; height: 100px; font-size: 40px;">
<i class="fa-solid fa-user-shield"></i>
</div>
</div>
<h4 class="fw-bold mb-1">{{ $admin->username ?? 'Administrator' }}</h4>
<span class="badge bg-danger fs-6 px-3 py-2 rounded-pill mt-2">System Administrator</span>
<hr class="my-4">
<div class="text-start">
<p class="mb-2"><strong><i class="fa-solid fa-id-badge text-navy me-2"></i>Admin ID:</strong> {{ $admin->id ?? session('admin_id') }}</p>
<p class="mb-2"><strong><i class="fa-solid fa-user text-navy me-2"></i>Username:</strong> {{ $admin->username ?? 'N/A' }}</p>
<p class="mb-0"><strong><i class="fa-solid fa-clock text-navy me-2"></i>Created At:</strong> {{ isset($admin->created_at) ? $admin->created_at->format('Y-m-d') : 'N/A' }}</p>
</div>
</div>
</div>
</div>
<!-- Edit Profile & Password Forms -->
<div class="col-lg-8">
<!-- Update Username Card -->
<div class="card border-0 shadow-sm rounded-3 mb-4">
<div class="card-header bg-white py-3 border-0">
<h5 class="fw-bold mb-0 text-navy">
<i class="fa-solid fa-pen-to-square me-2"></i>Update Account Details
</h5>
</div>
<div class="card-body">
<form action="{{ route('admin.profile.update') }}" method="POST">
@csrf
@method('PUT')
<div class="row g-3">
<div class="col-md-12">
<label class="form-label fw-bold">Username</label>
<input type="text" name="username" class="form-control" value="{{ old('username', $admin->username ?? '') }}" required>
</div>
<div class="col-12 text-end mt-4">
<button type="submit" class="btn btn-primary">
<i class="fa-solid fa-floppy-disk me-1"></i> Save Changes
</button>
</div>
</div>
</form>
</div>
</div>
<!-- Change Password Card -->
<div class="card border-0 shadow-sm rounded-3">
<div class="card-header bg-white py-3 border-0">
<h5 class="fw-bold mb-0 text-navy">
<i class="fa-solid fa-key me-2"></i>Change Password
</h5>
</div>
<div class="card-body">
<form action="{{ route('admin.profile.password') }}" method="POST">
@csrf
@method('PUT')
<div class="row g-3">
<div class="col-md-12">
<label class="form-label fw-bold">Current Password</label>
<input type="password" name="current_password" class="form-control" required>
</div>
<div class="col-md-6">
<label class="form-label fw-bold">New Password</label>
<input type="password" name="new_password" class="form-control" required>
</div>
<div class="col-md-6">
<label class="form-label fw-bold">Confirm New Password</label>
<input type="password" name="new_password_confirmation" class="form-control" required>
</div>
<div class="col-12 text-end mt-4">
<button type="submit" class="btn btn-danger">
<i class="fa-solid fa-shield-halved me-1"></i> Update Password
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endsection

View File

@ -0,0 +1,221 @@
@extends('layouts.adminnav')
@section('title', 'Exam Results Management - Admin Panel')
@section('content')
<div class="container-fluid">
<div class="d-flex justify-content-between align-items-center mb-4">
<h3 class="fw-bold text-navy">
<i class="fa-solid fa-square-poll-vertical me-2"></i>Exam Results Management
</h3>
<button class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#addResultModal">
<i class="fa-solid fa-plus me-1"></i> Add New Result
</button>
</div>
@if(session('success'))
<div class="alert alert-success alert-dismissible fade show" role="alert">
<i class="fa-solid fa-circle-check me-2"></i>{{ session('success') }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif
@if($errors->any())
<div class="alert alert-danger alert-dismissible fade show" role="alert">
<i class="fa-solid fa-triangle-exclamation me-2"></i>
<strong>Please fix the following errors:</strong>
<ul class="mb-0 mt-1">
@foreach($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif
<!-- Results Table -->
<div class="card border-0 shadow-sm rounded-3">
<div class="card-body p-0">
<div class="table-responsive">
<table class="table table-hover align-middle mb-0">
<thead class="table-dark">
<tr>
<th>ID</th>
<th>Student Log ID</th>
<th>Module Code</th>
<th>Module Name</th>
<th>Academic Year</th>
<th>Semester</th>
<th>Marks</th>
<th>Grade</th>
<th>Status</th>
<th class="text-center">Actions</th>
</tr>
</thead>
<tbody>
@forelse($results as $result)
<tr>
<td>{{ $result->id }}</td>
<td><span class="badge bg-secondary">{{ $result->student_log_id }}</span></td>
<td><strong>{{ $result->module_code }}</strong></td>
<td>{{ $result->module_name }}</td>
<td>{{ $result->academic_year }}</td>
<td>{{ $result->semester }}</td>
<td><span class="fw-bold">{{ $result->marks }}</span></td>
<td>
<span class="badge bg-primary fs-6">{{ $result->grade }}</span>
</td>
<td>
@if(strtolower($result->status) == 'pass')
<span class="badge bg-success">Pass</span>
@else
<span class="badge bg-danger">Fail</span>
@endif
</td>
<td class="text-center">
<!-- Edit Button -->
<button class="btn btn-sm btn-outline-primary me-1"
data-bs-toggle="modal"
data-bs-target="#editResultModal{{ $result->id }}">
<i class="fa-solid fa-pen-to-square"></i>
</button>
<!-- Delete Button -->
<form action="{{ route('admin.results.delete', $result->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Are you sure you want to delete this result?');">
@csrf
@method('DELETE')
<button type="submit" class="btn btn-sm btn-outline-danger">
<i class="fa-solid fa-trash-can"></i>
</button>
</form>
</td>
</tr>
<!-- Edit Result Modal -->
<div class="modal fade" id="editResultModal{{ $result->id }}" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header bg-navy text-white">
<h5 class="modal-title"><i class="fa-solid fa-pen-to-square me-2"></i>Edit Student Result</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form action="{{ route('admin.results.update', $result->id) }}" method="POST">
@csrf
@method('PUT')
<div class="modal-body text-start">
<div class="row g-3">
<div class="col-md-6">
<label class="form-label fw-bold">Student Log ID</label>
<input type="text" name="student_log_id" class="form-control" value="{{ $result->student_log_id }}" required>
</div>
<div class="col-md-6">
<label class="form-label fw-bold">Module Code</label>
<input type="text" name="module_code" class="form-control" value="{{ $result->module_code }}" required>
</div>
<div class="col-md-12">
<label class="form-label fw-bold">Module Name</label>
<input type="text" name="module_name" class="form-control" value="{{ $result->module_name }}" required>
</div>
<div class="col-md-6">
<label class="form-label fw-bold">Academic Year</label>
<input type="text" name="academic_year" class="form-control" value="{{ $result->academic_year }}" required>
</div>
<div class="col-md-6">
<label class="form-label fw-bold">Semester</label>
<input type="text" name="semester" class="form-control" value="{{ $result->semester }}" required>
</div>
<div class="col-md-4">
<label class="form-label fw-bold">Marks</label>
<input type="number" step="0.01" name="marks" class="form-control" value="{{ $result->marks }}" required>
</div>
<div class="col-md-4">
<label class="form-label fw-bold">Grade</label>
<input type="text" name="grade" class="form-control" value="{{ $result->grade }}" required>
</div>
<div class="col-md-4">
<label class="form-label fw-bold">Status</label>
<select name="status" class="form-select" required>
<option value="Pass" {{ $result->status == 'Pass' ? 'selected' : '' }}>Pass</option>
<option value="Fail" {{ $result->status == 'Fail' ? 'selected' : '' }}>Fail</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">Update Result</button>
</div>
</form>
</div>
</div>
</div>
@empty
<tr>
<td colspan="10" class="text-center py-4 text-muted">No examination results found.</td>
</tr>
@endforelse
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Add Result Modal -->
<div class="modal fade" id="addResultModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header bg-navy text-white">
<h5 class="modal-title"><i class="fa-solid fa-plus-circle me-2"></i>Add New Examination Result</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form action="{{ route('admin.results.store') }}" method="POST">
@csrf
<div class="modal-body">
<div class="row g-3">
<div class="col-md-6">
<label class="form-label fw-bold">Student Log ID</label>
<input type="text" name="student_log_id" class="form-control" placeholder="e.g. ST1001" required>
</div>
<div class="col-md-6">
<label class="form-label fw-bold">Module Code</label>
<input type="text" name="module_code" class="form-control" placeholder="e.g. AME201" required>
</div>
<div class="col-md-12">
<label class="form-label fw-bold">Module Name</label>
<input type="text" name="module_name" class="form-control" placeholder="e.g. Automobile Technology II" required>
</div>
<div class="col-md-6">
<label class="form-label fw-bold">Academic Year</label>
<input type="text" name="academic_year" class="form-control" placeholder="e.g. 2025/2026" required>
</div>
<div class="col-md-6">
<label class="form-label fw-bold">Semester</label>
<input type="text" name="semester" class="form-control" placeholder="e.g. Semester 1" required>
</div>
<div class="col-md-4">
<label class="form-label fw-bold">Marks</label>
<input type="number" step="0.01" name="marks" class="form-control" placeholder="0 - 100" required>
</div>
<div class="col-md-4">
<label class="form-label fw-bold">Grade</label>
<input type="text" name="grade" class="form-control" placeholder="e.g. A+, B, C" required>
</div>
<div class="col-md-4">
<label class="form-label fw-bold">Status</label>
<select name="status" class="form-select" required>
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success"><i class="fa-solid fa-floppy-disk me-1"></i> Save Result</button>
</div>
</form>
</div>
</div>
</div>
@endsection

View File

@ -0,0 +1,296 @@
@extends('layouts.adminnav')
@section('title', 'Admin Timetable Management')
@section('content')
<style>
.bg-custom-header {
background: linear-gradient(135deg, #2c2a4a 0%, #4a4773 100%);
color: white;
border-radius: 12px;
}
/* Badge Colors matching the design */
.badge-type {
font-size: 11px;
font-weight: 600;
padding: 3px 12px;
border-radius: 12px;
letter-spacing: 0.3px;
display: inline-block;
}
.badge-theory { background-color: #1e2035; color: #ffffff; }
.badge-practical { background-color: #6b1d1d; color: #ffffff; }
.badge-workshop { background-color: #ea580c; color: #ffffff; }
.badge-exam { background-color: #ca8a04; color: #ffffff; }
/* Table Custom Styles */
.table-timetable {
border-collapse: separate;
border-spacing: 0;
border: 1px solid #e2e8f0;
border-radius: 10px;
overflow: hidden;
}
.table-timetable th {
text-align: center;
vertical-align: middle;
font-weight: 700;
padding: 14px 10px;
color: #334155;
background-color: #f8fafc;
border-bottom: 1px solid #e2e8f0;
}
.table-timetable td {
text-align: center;
vertical-align: middle;
height: 90px;
padding: 6px;
border-bottom: 1px solid #e2e8f0;
border-right: 1px solid #e2e8f0;
}
.table-timetable tr:last-child td {
border-bottom: none;
}
.table-timetable td:last-child {
border-right: none;
}
/* Cell Hover & Click */
.timetable-cell {
cursor: pointer;
padding: 8px;
border-radius: 8px;
transition: all 0.2s ease-in-out;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.timetable-cell:hover {
background-color: #f1f5f9;
transform: translateY(-1px);
}
/* Today's Red Header Highlight */
.today-header {
background-color: #d9383a !important;
color: white !important;
}
</style>
<div class="container-fluid py-4">
<!-- Header Banner -->
<div class="p-4 mb-4 bg-custom-header shadow-sm d-flex justify-content-between align-items-center">
<div>
<h3 class="fw-bold mb-1"><i class="fa-solid fa-calendar-days me-2"></i>My Class Timetable</h3>
<p class="mb-0 text-white-50 small">Automobile Engineering Academy Timetable Management</p>
</div>
</div>
<!-- Alert Messages -->
@if(session('success'))
<div class="alert alert-success alert-dismissible fade show mb-4" role="alert">
<i class="fa-solid fa-circle-check me-2"></i>{{ session('success') }}
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif
<div class="row g-4 mb-4">
<!-- Today's Schedule Card -->
<div class="col-lg-5">
<div class="card border-0 shadow-sm rounded-3 h-100">
<div class="card-header bg-white py-3 border-0">
<h6 class="fw-bold mb-0 text-danger">
<i class="fa-solid fa-clock me-2"></i>Today's Schedule ({{ $today }})
</h6>
</div>
<div class="card-body">
@forelse($todaySchedule as $item)
<div class="p-3 mb-2 bg-light rounded border-start border-4 border-danger d-flex justify-content-between align-items-center">
<div>
<span class="badge badge-type badge-{{ strtolower($item->type) }} mb-1">{{ $item->type }}</span>
<h6 class="fw-bold mb-0 text-dark">{{ $item->subject_name }}</h6>
</div>
<small class="text-muted fw-bold">{{ $item->time_slot }}</small>
</div>
@empty
<p class="text-muted text-center py-4 mb-0">No classes scheduled for today.</p>
@endforelse
</div>
</div>
</div>
<!-- Legend Card -->
<div class="col-lg-7">
<div class="card border-0 shadow-sm rounded-3 h-100">
<div class="card-header bg-white py-3 border-0">
<h6 class="fw-bold mb-0 text-primary">
<i class="fa-solid fa-layer-group me-2"></i>Timetable Legend
</h6>
</div>
<div class="card-body">
<div class="d-flex flex-wrap gap-2 mb-3">
<span class="badge badge-type badge-theory">Theory</span>
<span class="badge badge-type badge-practical">Practical</span>
<span class="badge badge-type badge-workshop">Workshop</span>
<span class="badge badge-type badge-exam">Exam</span>
</div>
<hr>
<p class="text-muted small mb-0">
<i class="fa-solid fa-hand-pointer me-1 text-primary"></i> <strong>How to Edit / Add:</strong> Click on any timetable slot in the table below to add or edit class details.
</p>
</div>
</div>
</div>
</div>
<!-- Main Timetable Grid -->
<div class="card border-0 shadow-sm rounded-3">
<div class="card-body p-3">
<div class="table-responsive">
<table class="table table-timetable mb-0 align-middle">
<thead>
<tr>
<th style="width: 15%;">Time</th>
@foreach($days as $day)
<th class="{{ strtolower($today) == strtolower($day) ? 'today-header' : '' }}">
{{ $day }} {{ strtolower($today) == strtolower($day) ? '(Today)' : '' }}
</th>
@endforeach
</tr>
</thead>
<tbody>
@foreach($timeSlots as $slot)
<tr>
<!-- Time Column -->
<td class="fw-bold text-secondary bg-light" style="font-size: 13px;">{{ $slot }}</td>
@if($slot == '12:30 - 01:30')
<!-- Lunch / Rest Time Row -->
<td colspan="5" class="bg-light text-center fw-bold text-secondary py-3" style="letter-spacing: 0.5px;">
🍱 LUNCH BREAK / REST TIME
</td>
@else
<!-- Days Columns -->
@foreach($days as $day)
@php
$item = $grid[$slot][$day] ?? null;
@endphp
<td>
<div class="timetable-cell"
data-bs-toggle="modal"
data-bs-target="#editSlotModal"
onclick="openEditModal('{{ $day }}', '{{ $slot }}', '{{ $item->subject_name ?? '' }}', '{{ $item->type ?? 'Theory' }}', '{{ $item->id ?? '' }}')">
@if($item)
<span class="badge badge-type badge-{{ strtolower($item->type) }} mb-1">
{{ $item->type }}
</span>
<div class="fw-bold text-dark small">{{ $item->subject_name }}</div>
@else
<span class="text-muted small opacity-50"><i class="fa-solid fa-plus text-primary me-1"></i>Add</span>
@endif
</div>
</td>
@endforeach
@endif
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Modal for Edit / Add Slot -->
<div class="modal fade" id="editSlotModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content border-0 shadow">
<div class="modal-header bg-custom-header text-white">
<h5 class="modal-title" id="modalTitle"><i class="fa-solid fa-pen-to-square me-2"></i>Update Timetable Slot</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
</div>
<form action="{{ route('admin.timetable.store') }}" method="POST">
@csrf
<input type="hidden" name="day" id="modal_day">
<input type="hidden" name="time_slot" id="modal_time_slot">
<div class="modal-body">
<div class="mb-3">
<label class="form-label fw-bold">Day & Time Slot</label>
<input type="text" id="display_day_time" class="form-control bg-light" readonly>
</div>
<div class="mb-3">
<label class="form-label fw-bold">Subject Name</label>
<input type="text" name="subject_name" id="modal_subject" class="form-control" placeholder="e.g. Engine Fundamentals" required>
</div>
<div class="mb-3">
<label class="form-label fw-bold">Subject Type</label>
<select name="type" id="modal_type" class="form-select" required>
<option value="Theory">Theory</option>
<option value="Practical">Practical</option>
<option value="Workshop">Workshop</option>
<!-- <option value="Exam">Exam</option> -->
</select>
</div>
</div>
<div class="modal-footer d-flex justify-content-between">
<button type="button" id="clearBtn" class="btn btn-outline-danger d-none" onclick="clearSlotData()">
<i class="fa-solid fa-trash me-1"></i> Clear Slot
</button>
<div>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-success"><i class="fa-solid fa-floppy-disk me-1"></i> Save Changes</button>
</div>
</div>
</form>
<!-- Hidden Form to Clear Slot -->
<form id="deleteSlotForm" method="POST" class="d-none">
@csrf
@method('DELETE')
</form>
</div>
</div>
</div>
<script>
var currentSlotId = null;
function openEditModal(day, timeSlot, subject, type, id) {
document.getElementById('modal_day').value = day;
document.getElementById('modal_time_slot').value = timeSlot;
document.getElementById('display_day_time').value = day + ' (' + timeSlot + ')';
document.getElementById('modal_subject').value = subject;
document.getElementById('modal_type').value = type || 'Theory';
currentSlotId = id;
var clearBtn = document.getElementById('clearBtn');
var modalTitle = document.getElementById('modalTitle');
if(id) {
clearBtn.classList.remove('d-none');
modalTitle.innerHTML = '<i class="fa-solid fa-pen-to-square me-2"></i>Edit Class Slot';
} else {
clearBtn.classList.add('d-none');
modalTitle.innerHTML = '<i class="fa-solid fa-plus me-2"></i>Add Class Slot';
}
}
function clearSlotData() {
if(currentSlotId && confirm('Are you sure you want to clear this timetable slot?')) {
var form = document.getElementById('deleteSlotForm');
form.action = "/admin/timetable/delete/" + currentSlotId;
form.submit();
}
}
</script>
@endsection

View File

@ -0,0 +1,143 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Admin Login - AutoEdu</title>
<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">
<style>
:root {
--theme-navy: #2D355B;
--theme-red: #822424;
--theme-yellow: #FFEA85;
--theme-bg: #F6F6F6;
}
body {
background-color: var(--theme-bg);
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Segoe UI', sans-serif;
}
.login-card {
width: 100%;
max-width: 400px;
border: none;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
overflow: hidden;
background: #fff;
}
.login-header {
background: var(--theme-navy);
color: #fff;
padding: 25px 20px;
text-align: center;
}
.btn-theme-red {
background-color: var(--theme-red);
color: #fff;
border: none;
padding: 12px;
font-weight: 600;
border-radius: 8px;
transition: all 0.3s;
}
.btn-theme-red:hover {
background-color: #a32d2d;
color: #fff;
}
</style>
</head>
<body>
<div class="login-card">
<div class="login-header">
<i class="fa-solid fa-user-shield fa-2x mb-2" style="color: var(--theme-yellow);"></i>
<h5 class="fw-bold mb-0">Admin Login</h5>
</div>
<div class="p-4">
<!-- Error Alert -->
<div id="errorAlert" class="alert alert-danger d-none py-2 text-center small" role="alert"></div>
<form id="adminLoginForm">
<div class="mb-3">
<label class="form-label fw-semibold text-dark">Username</label>
<div class="input-group">
<span class="input-group-text"><i class="fa-solid fa-user"></i></span>
<input type="text" id="username" class="form-control" placeholder="Username" required>
</div>
</div>
<div class="mb-4">
<label class="form-label fw-semibold text-dark">Password</label>
<div class="input-group">
<span class="input-group-text"><i class="fa-solid fa-lock"></i></span>
<input type="password" id="password" class="form-control" placeholder="Password" required>
</div>
</div>
<button type="submit" class="btn btn-theme-red w-100" id="loginBtn">
<i class="fa-solid fa-right-to-bracket me-2"></i> Login
</button>
</form>
</div>
</div>
<script>
document.getElementById('adminLoginForm').addEventListener('submit', function(e) {
e.preventDefault();
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
const errorAlert = document.getElementById('errorAlert');
const loginBtn = document.getElementById('loginBtn');
const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
errorAlert.classList.add('d-none');
loginBtn.disabled = true;
loginBtn.innerHTML = '<i class="fa-solid fa-spinner fa-spin me-2"></i> Logging in...';
fetch('/admin/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
'X-CSRF-TOKEN': csrfToken
},
body: JSON.stringify({ username: username, password: password })
})
.then(res => res.json())
.then(data => {
if (data.success) {
window.location.href = '/admin/adminmycourses';
} else {
errorAlert.innerText = data.message || 'Login failed!';
errorAlert.classList.remove('d-none');
loginBtn.disabled = false;
loginBtn.innerHTML = '<i class="fa-solid fa-right-to-bracket me-2"></i> Login';
}
})
.catch(err => {
console.error('Error:', err);
errorAlert.innerText = 'Server error occurred!';
errorAlert.classList.remove('d-none');
loginBtn.disabled = false;
loginBtn.innerHTML = '<i class="fa-solid fa-right-to-bracket me-2"></i> Login';
});
});
</script>
</body>
</html>

View File

@ -1,141 +1,189 @@
@extends('layouts.app') @extends('layouts.app')
@section('title','Apply Now') @section('title', 'Apply Now')
@section('content') @section('content')
<style> <style>
body { body {
font-family: Arial, Helvetica, sans-serif; font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
background: #f5f5f5; background: #F8FAFC;
color: #1E293B;
} }
:root { :root {
--primary: #5E244E; /* Premium Modern Automotive Palette */
--secondary: #8B3A74; --primary: #0F2C59;
--light: #F8F4F7; --secondary: #822424;
--secondary-hover: #6a2525;
--accent-yellow: #FFE618;
--bg-light: #F8FAFC;
--text-main: #1E293B;
--card-border: rgba(62, 81, 184, 0.12);
} }
.hero { .hero {
height: 220px; height: 240px;
background: linear-gradient(rgba(20,20,20,.55),rgba(20,20,20,.55)), background: linear-gradient(rgba(214, 219, 255, 0.79), rgba(0, 0, 0, 0.85)), url('https://images.unsplash.com/photo-1517520287167-4bbf64a00d66?auto=format&fit=crop&w=1600&q=80');
url('https://images.unsplash.com/photo-1517520287167-4bbf64a00d66?auto=format&fit=crop&w=1600&q=80');
background-size: cover; background-size: cover;
background-position: center; background-position: center;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color: white; color: white;
text-align: center;
} }
.hero h1 { .hero h1 {
font-size: 32px; font-size: 36px;
font-weight: bold; font-weight: 800;
margin: 0; margin: 0;
letter-spacing: -0.5px;
} }
.apply-area { .apply-area {
margin-top: -40px; margin-top: -50px;
margin-bottom: 40px; margin-bottom: 50px;
} }
.form-container-sm { .form-container-sm {
max-width: 820px; max-width: 850px;
margin: 0 auto; margin: 0 auto;
} }
.form-card { .form-card {
background: white; background: white;
border-radius: 10px; border-radius: 16px;
overflow: hidden; overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,.08); border: 1px solid var(--card-border);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
} }
.form-header { .form-header {
background: var(--primary); background: linear-gradient(135deg, #8C4242 0%, #161414fa 100%);
color: white; color: white;
padding: 15px 25px; padding: 25px 30px;
border-bottom: 3px solid var(--accent-yellow);
} }
.form-header h2 { .form-header h2 {
margin: 0; margin: 0;
font-size: 20px; font-size: 22px;
font-weight: bold; font-weight: 700;
} }
.section-title { .section-title {
background: #735D6D; background: var(--secondary);
color: white; color: white;
padding: 8px 12px; padding: 10px 16px;
margin-top: 22px; margin-top: 30px;
margin-bottom: 15px; margin-bottom: 20px;
font-size: 14px; font-size: 14px;
border-radius: 5px; border-radius: 6px;
font-weight: 600; font-weight: 600;
letter-spacing: 0.5px;
box-shadow: 0 4px 10px rgba(106, 37, 37, 0.15);
} }
.form-label { .form-label {
font-weight: 600; font-weight: 600;
font-size: 13px; font-size: 13px;
margin-bottom: 4px; margin-bottom: 6px;
color: #000;
} }
.form-control, .form-control,
.form-select { .form-select {
border-radius: 5px; border: 1px solid #cbd5e1;
padding: 6px 10px; border-radius: 8px;
font-size: 13px; padding: 10px 14px;
font-size: 14px;
transition: all 0.2s ease;
}
.form-control:focus,
.form-select:focus {
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(62, 81, 184, 0.15);
outline: 0;
} }
.required { .required {
color: red; color: var(--secondary-hover);
font-weight: bold;
} }
.submit-btn { .submit-btn {
background: var(--primary); background:var(--secondary);
color: white; color: white;
border: none; border: none;
padding: 8px 20px; padding: 14px 30px;
font-size: 15px; font-size: 16px;
font-weight: bold; font-weight: 700;
border-radius: 30px; border-radius: 8px;
cursor: pointer; cursor: pointer;
width: 100%; width: 100%;
transition: 0.3s ease; transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
box-shadow: 0 4px 12px rgba(62, 81, 184, 0.2);
} }
.submit-btn:hover { .submit-btn:hover {
background: var(--secondary); background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
transform: translateY(-1px); color: var(--accent-yellow);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(130, 36, 36, 0.35);
} }
.mb-3-custom { .mb-3-custom {
margin-bottom: 0.75rem !important; margin-bottom: 1.25rem !important;
}
.form-check-input:checked {
background-color: var(--primary);
border-color: var(--primary);
} }
</style> </style>
<div class="hero"> <div class="hero">
<div class="text-center"> <div class="text-center px-3">
<h1>Course Enrolment Form</h1> <h1>Course Enrolment Form</h1>
<p class="lead mb-0" style="font-size: 14px; opacity: 0.9;">Automobile Engineering Academy</p> <p class="lead mb-0 mt-2 fw-semibold" style="font-size: 15px; opacity: 0.95; color: var(--accent-yellow);">
Automobile Engineering Academy
</p>
</div> </div>
</div> </div>
<div class="container apply-area"> <div class="container apply-area">
<div class="form-container-sm"> <div class="form-container-sm">
<div class="form-card"> <div class="form-card">
<div class="form-header"> <div class="form-header">
<h2> <h2>
<i class="fa-solid fa-file-circle-check me-2"></i> <i class="fa-solid fa-file-circle-check me-2"></i>
Course Enrolment Form New Student Registration
</h2> </h2>
</div> </div>
<div class="p-4"> <div class="p-4 p-md-5">
<form action="#" method="POST" enctype="multipart/form-data">
@if(session('success'))
<div class="alert alert-success alert-dismissible fade show mb-4" role="alert">
{{ session('success') }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif
@if($errors->any())
<div class="alert alert-danger mb-4">
<ul class="mb-0">
@foreach($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<form action="{{ route('apply.store') }}" method="POST" enctype="multipart/form-data">
@csrf @csrf
{{-- STUDENT INFORMATION --}} {{-- STUDENT INFORMATION --}}
@ -146,32 +194,32 @@
<div class="row"> <div class="row">
<div class="col-md-6 mb-3-custom"> <div class="col-md-6 mb-3-custom">
<label class="form-label">First Name <span class="required">*</span></label> <label class="form-label">First Name <span class="required">*</span></label>
<input type="text" name="first_name" class="form-control" required> <input type="text" name="first_name" class="form-control" placeholder="Enter your first name" required>
</div> </div>
<div class="col-md-6 mb-3-custom"> <div class="col-md-6 mb-3-custom">
<label class="form-label">Last Name <span class="required">*</span></label> <label class="form-label">Last Name <span class="required">*</span></label>
<input type="text" name="last_name" class="form-control" required> <input type="text" name="last_name" class="form-control" placeholder="Enter your last name" required>
</div> </div>
<div class="col-md-6 mb-3-custom"> <div class="col-md-6 mb-3-custom">
<label class="form-label">NIC / Passport</label> <label class="form-label">NIC / Passport Number</label>
<input type="text" name="nic" class="form-control"> <input type="text" name="nic" class="form-control" placeholder="Identity Document No.">
</div> </div>
<div class="col-md-6 mb-3-custom"> <div class="col-md-6 mb-3-custom">
<label class="form-label">Nationality</label> <label class="form-label">Nationality</label>
<input type="text" name="nationality" class="form-control"> <input type="text" name="nationality" class="form-control" placeholder="e.g. Sri Lankan">
</div> </div>
<div class="col-md-6 mb-3-custom"> <div class="col-md-6 mb-3-custom">
<label class="form-label">Address <span class="required">*</span></label> <label class="form-label">Residential Address <span class="required">*</span></label>
<input type="text" name="address" class="form-control" required> <input type="text" name="address" class="form-control" placeholder="Street address" required>
</div> </div>
<div class="col-md-6 mb-3-custom"> <div class="col-md-6 mb-3-custom">
<label class="form-label">District / City / State <span class="required">*</span></label> <label class="form-label">District / City / State <span class="required">*</span></label>
<input type="text" name="state" class="form-control" required> <input type="text" name="state" class="form-control" placeholder="City or region" required>
</div> </div>
<div class="col-md-6 mb-3-custom"> <div class="col-md-6 mb-3-custom">
@ -198,17 +246,17 @@
<div class="row"> <div class="row">
<div class="col-md-6 mb-3-custom"> <div class="col-md-6 mb-3-custom">
<label class="form-label">Contact Number <span class="required">*</span></label> <label class="form-label">Contact Number <span class="required">*</span></label>
<input type="tel" name="mobile" class="form-control" required> <input type="tel" name="mobile" class="form-control" placeholder="Primary phone number" required>
</div> </div>
<div class="col-md-6 mb-3-custom"> <div class="col-md-6 mb-3-custom">
<label class="form-label">Alternative Contact Number</label> <label class="form-label">Alternative Contact Number</label>
<input type="tel" name="mobile2" class="form-control"> <input type="tel" name="mobile2" class="form-control" placeholder="Backup phone number">
</div> </div>
<div class="col-md-6 mb-3-custom"> <div class="col-md-6 mb-3-custom">
<label class="form-label">Email Address <span class="required">*</span></label> <label class="form-label">Email Address <span class="required">*</span></label>
<input type="email" name="email" class="form-control" required> <input type="email" name="email" class="form-control" placeholder="name@example.com" required>
</div> </div>
<div class="col-md-6 mb-3-custom"> <div class="col-md-6 mb-3-custom">
@ -216,7 +264,7 @@
<select name="preferred_contact_method" class="form-select"> <select name="preferred_contact_method" class="form-select">
<option selected disabled>Select Your Option</option> <option selected disabled>Select Your Option</option>
<option value="email">Email</option> <option value="email">Email</option>
<option value="phone">Phone</option> <option value="phone">Phone Call</option>
<option value="sms">SMS</option> <option value="sms">SMS</option>
</select> </select>
</div> </div>
@ -224,12 +272,12 @@
{{-- EDUCATION --}} {{-- EDUCATION --}}
<div class="section-title"> <div class="section-title">
<i class="fa-solid fa-graduation-cap me-2"></i> Education <i class="fa-solid fa-graduation-cap me-2"></i> Academic Qualifications
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-6 mb-3-custom"> <div class="col-md-6 mb-3-custom">
<label class="form-label">Still at school?</label> <label class="form-label">Are you currently a school student?</label>
<select name="still_at_school" class="form-select"> <select name="still_at_school" class="form-select">
<option selected disabled>Select Your Option</option> <option selected disabled>Select Your Option</option>
<option value="Yes">Yes</option> <option value="Yes">Yes</option>
@ -255,7 +303,7 @@
<div class="col-md-6 mb-3-custom"> <div class="col-md-6 mb-3-custom">
<label class="form-label">School / College Name</label> <label class="form-label">School / College Name</label>
<input type="text" name="school_name" class="form-control" placeholder="Enter School Name"> <input type="text" name="school_name" class="form-control" placeholder="Enter last attended school name">
</div> </div>
<div class="col-md-6 mb-3-custom"> <div class="col-md-6 mb-3-custom">
@ -266,10 +314,10 @@
<div class="col-md-6 mb-3-custom"> <div class="col-md-6 mb-3-custom">
<label class="form-label">Examination Passed</label> <label class="form-label">Examination Passed</label>
<select name="exam_passed" class="form-select"> <select name="exam_passed" class="form-select">
<option selected disabled>Select Examination</option> <option selected disabled>Select Final Examination</option>
<option value="G.C.E. O/L">G.C.E. O/L</option> <option value="G.C.E. O/L">G.C.E. O/L</option>
<option value="G.C.E. A/L">G.C.E. A/L</option> <option value="G.C.E. A/L">G.C.E. A/L</option>
<option value="NVQ">NVQ</option> <option value="NVQ">NVQ Standards</option>
<option value="Certificate">Certificate</option> <option value="Certificate">Certificate</option>
<option value="Diploma">Diploma</option> <option value="Diploma">Diploma</option>
<option value="Degree">Degree</option> <option value="Degree">Degree</option>
@ -278,17 +326,17 @@
</div> </div>
<div class="col-md-6 mb-3-custom"> <div class="col-md-6 mb-3-custom">
<label class="form-label">Subjects</label> <label class="form-label">Core Subjects</label>
<input type="text" name="subjects" class="form-control" placeholder="e.g. Mathematics, Science"> <input type="text" name="subjects" class="form-control" placeholder="e.g. Mathematics, Science, Tech">
</div> </div>
<div class="col-12 mb-3-custom"> <div class="col-12 mb-3-custom">
<label class="form-label">Grades / Results</label> <label class="form-label">Grades / Academic Results Summary</label>
<textarea name="grades_results" class="form-control" rows="2" placeholder="Enter your grades or examination results"></textarea> <textarea name="grades_results" class="form-control" rows="3" placeholder="List your relevant examination grades or index summaries..."></textarea>
</div> </div>
<div class="col-12 mb-3-custom"> <div class="col-12 mb-3-custom">
<label class="form-label">Educational Certificates</label> <label class="form-label">Upload Educational Certificates (Multiple Allowed)</label>
<input type="file" name="certificates[]" class="form-control" accept=".pdf,.jpg,.jpeg,.png" multiple> <input type="file" name="certificates[]" class="form-control" accept=".pdf,.jpg,.jpeg,.png" multiple>
</div> </div>
</div> </div>
@ -301,24 +349,24 @@
<div class="row"> <div class="row">
<div class="col-md-6 mb-3-custom"> <div class="col-md-6 mb-3-custom">
<label class="form-label">Emergency Contact Name <span class="required">*</span></label> <label class="form-label">Emergency Contact Name <span class="required">*</span></label>
<input type="text" name="emergency_contact_name" class="form-control" required> <input type="text" name="emergency_contact_name" class="form-control" placeholder="Full name of guardian/relative" required>
</div> </div>
<div class="col-md-6 mb-3-custom"> <div class="col-md-6 mb-3-custom">
<label class="form-label">Relationship <span class="required">*</span></label> <label class="form-label">Relationship <span class="required">*</span></label>
<input type="text" name="emergency_contact_relationship" class="form-control" required> <input type="text" name="emergency_contact_relationship" class="form-control" placeholder="e.g. Father, Mother, Spouse" required>
</div> </div>
</div> </div>
{{-- TERMS AND CONDITIONS --}} {{-- TERMS AND CONDITIONS --}}
<div class="form-check mb-3 mt-2"> <div class="form-check mb-4 mt-3">
<input class="form-check-input" type="checkbox" id="terms" required> <input class="form-check-input" type="checkbox" id="terms" required>
<label class="form-check-label" for="terms" style="font-size: 13px;"> <label class="form-check-label fw-semibold" for="terms" style="font-size: 13px; color: #000; cursor: pointer;">
I agree to the terms and conditions <span class="required">*</span> I hereby declare that the details furnished above are true and correct to the best of my knowledge <span class="required">*</span>
</label> </label>
</div> </div>
<div class="mt-3"> <div class="mt-4">
<button type="submit" class="submit-btn">Submit Application</button> <button type="submit" class="submit-btn">Submit Application</button>
</div> </div>

View File

@ -6,20 +6,29 @@
<style> <style>
:root{ :root{
--primary:#5E244E; /* Premium Modern Automotive Palette */
--secondary:#8B3A74; --primary: #3E51B8; /* Tech Blue */
--light:#f8f4f7; --primary-light: #0a67df; /* Vibrant Electric Blue */
--secondary: #BC1A1A; /* Deep Racing Red */
--secondary-hover: #822424; /* Dark Burnt Red */
--accent-dark: #753939; /* Muted Crimson */
--bg-light: #F8FAFC; /* Soft slate light gray */
/* Semantic Adjustments */
--text-main: #1E293B; /* Slate dark grey */
--text-muted: #64748B; /* Neutral gray */
--card-border: rgba(62, 81, 184, 0.1);
} }
body { body {
font-family: Arial, Helvetica, sans-serif; font-family: 'Segoe UI', Arial, sans-serif;
color: var(--text-main);
} }
.hero-contact{ .hero-contact{
min-height:50vh; min-height:50vh;
background: background:
linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7)), linear-gradient(rgba(233, 236, 246, 0.6), rgba(39, 35, 35, 0.71)), url('https://images.pexels.com/photos/3184465/pexels-photo-3184465.jpeg');
url('https://images.pexels.com/photos/3184465/pexels-photo-3184465.jpeg');
background-size:cover; background-size:cover;
background-position:center; background-position:center;
display:flex; display:flex;
@ -33,37 +42,39 @@ body {
background:#fff; background:#fff;
border-radius:20px; border-radius:20px;
padding:35px; padding:35px;
box-shadow: 0 10px 30px rgba(0,0,0,.05); box-shadow: 0 10px 30px rgba(0,0,0,.04);
border: 1px solid #efeff4; border: 1px solid var(--card-border);
} }
.form-control{ .form-control{
border-radius:10px; border-radius:10px;
padding:12px; padding:12px;
border: 1px solid #ced4da; border: 1px solid #cbd5e1;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.form-control:focus { .form-control:focus {
border-color: var(--primary); border-color: var(--primary-light);
box-shadow: 0 0 0 0.25rem rgba(94, 36, 78, 0.25); box-shadow: 0 0 0 4px rgba(10, 103, 223, 0.15);
outline: 0;
} }
.btn-contact{ .btn-contact{
background:var(--primary); background: #6a2525 ;
color:#fff; color:#fff;
border-radius:10px; border-radius:10px;
padding:12px 30px; padding:12px 30px;
font-weight: 600; font-weight: 600;
transition: all 0.3s ease; transition: all 0.3s ease;
border: none; border: none;
box-shadow: 0 4px 12px rgba(62, 81, 184, 0.2);
} }
.btn-contact:hover{ .btn-contact:hover{
background:var(--secondary); background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
color:#fff; color:#fff;
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(94, 36, 78, 0.3); box-shadow: 0 6px 15px rgba(188, 26, 26, 0.3);
} }
.info-card{ .info-card{
@ -72,19 +83,23 @@ body {
padding:20px; padding:20px;
text-align:center; text-align:center;
box-shadow: 0 5px 20px rgba(0,0,0,.04); box-shadow: 0 5px 20px rgba(0,0,0,.04);
border: 1px solid #efeff4; border: 1px solid var(--card-border);
transition:.3s; transition:.3s;
} }
.info-card:hover{ .info-card:hover{
transform:translateY(-5px); transform:translateY(-5px);
border-color: var(--primary); border-color: var(--primary-light);
box-shadow: 0 10px 25px rgba(94, 36, 78, 0.08); box-shadow: 0 10px 25px rgba(62, 81, 184, 0.1);
} }
.info-card i { .info-card i {
color: var(--primary) !important; color: #861E28 !important;
transition: color 0.3s ease;
}
.info-card:hover i {
color: var(--secondary) !important;
} }
/* ======================================================== /* ========================================================
@ -96,17 +111,14 @@ body {
transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1); transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
} }
.fade-up-init { .fade-up-init {
transform: translateY(30px); transform: translateY(30px);
} }
.slide-left-init { .slide-left-init {
transform: translateX(-40px); transform: translateX(-40px);
} }
.fade-in-init { .fade-in-init {
transform: scale(0.98); transform: scale(0.98);
} }
@ -123,7 +135,7 @@ body {
<div class="container"> <div class="container">
<div class="animate-item animated fade-up-init"> <div class="animate-item animated fade-up-init">
<h1 class="fw-bold display-4">Contact Us</h1> <h1 class="fw-bold display-4">Contact Us</h1>
<p class="fs-5">We are here to help you. Reach us anytime.</p> <p class="fs-5 text-white-50" style="color:rgba(255, 255, 255, 0.8) !important">We are here to help you. Reach us anytime.</p>
</div> </div>
</div> </div>
</section> </section>
@ -138,9 +150,7 @@ body {
<div class="col-md-6 animate-item slide-left-init"> <div class="col-md-6 animate-item slide-left-init">
<div class="contact-box"> <div class="contact-box">
<h3 class="mb-4 fw-bold" style="color: #1c1d1f;">Send Message</h3> <h3 class="mb-4 fw-bold" style="color: var(--text-main);">Send Message</h3>
@if(session('success')) @if(session('success'))
<div class="alert alert-success"> <div class="alert alert-success">
@ -148,27 +158,26 @@ body {
</div> </div>
@endif @endif
<form action="{{ route('contact.store') }}" method="POST"> <form action="{{ route('contact.store') }}" method="POST">
@csrf @csrf
<div class="mb-3"> <div class="mb-3">
<label class="form-label fw-semibold">Name</label> <label class="form-label fw-semibold text-secondary-emphasis">Name</label>
<input type="text" name="name" class="form-control" placeholder="Your Name" required> <input type="text" name="name" class="form-control" placeholder="Your Name" required>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label class="form-label fw-semibold">Email</label> <label class="form-label fw-semibold text-secondary-emphasis">Email</label>
<input type="email" name="email" class="form-control" placeholder="Your Email" required> <input type="email" name="email" class="form-control" placeholder="Your Email" required>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label class="form-label fw-semibold">Subject</label> <label class="form-label fw-semibold text-secondary-emphasis">Subject</label>
<input type="text" name="subject" class="form-control" placeholder="Subject" required> <input type="text" name="subject" class="form-control" placeholder="Subject" required>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label class="form-label fw-semibold">Message</label> <label class="form-label fw-semibold text-secondary-emphasis">Message</label>
<textarea name="message" rows="5" class="form-control" placeholder="Your Message" required></textarea> <textarea name="message" rows="5" class="form-control" placeholder="Your Message" required></textarea>
</div> </div>
@ -181,7 +190,7 @@ Send Message
</div> </div>
</div> </div>
<!-- Info Cards -->
<div class="col-md-6 animate-item fade-in-init"> <div class="col-md-6 animate-item fade-in-init">
<div class="info-card mb-3"> <div class="info-card mb-3">
@ -216,38 +225,18 @@ Send Message
</section> </section>
<!-- MAP --> <!-- MAP -->
<section class="pb-5"> <section class="pb-5">
<div class="container"> <div class="container animate-item fade-up-init">
<!-- <iframe
src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=place_id:ChIJXdB3Sy_84joRYNze2w86UjQ"
width="100%"
height="300"
style="border:0;border-radius:15px;"
allowfullscreen=""
loading="lazy">
</iframe> -->
<iframe <iframe
src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d989.8732851214081!2d80.0435697!3d7.0771955!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ae2fc2f4b77d05d%3A0x34523a0fdbdedc60!2sGlitz%20Park!5e0!3m2!1sen!2slk!4v1719999999999!5m2!1sen!2slk" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d989.8732851214081!2d80.0435697!3d7.0771955!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ae2fc2f4b77d05d%3A0x34523a0fdbdedc60!2sGlitz%20Park!5e0!3m2!1sen!2slk!4v1719999999999!5m2!1sen!2slk"
width="100%" width="100%"
height="300"
style="border:0;border-radius:15px;"
allowfullscreen=""
loading="lazy">
</iframe>
<!-- <section class="pb-5">
<div class="container animate-item fade-up-init">
<iframe
src="https://www.google.com/maps/embed/pb=!1m14!1m8!1m3!1d989.8732851214081!2d80.0435697!3d7.0771955!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ae2fc2f4b77d05d%3A0x34523a0fdbdedc60!2sGlitz%20Park!5e0!3m2!1sen!2slk!4v1719999999999!5m2!1sen!2slk"
width="100%"
height="350" height="350"
style="border:0;border-radius:20px; box-shadow: 0 10px 30px rgba(0,0,0,.05);" style="border:0;border-radius:20px; box-shadow: 0 10px 30px rgba(0,0,0,.04); border: 1px solid var(--card-border);"
allowfullscreen="" allowfullscreen=""
loading="lazy"> loading="lazy">
</iframe> </iframe>
</div> </div>
</section> --> </section>
<script> <script>
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
@ -267,5 +256,7 @@ document.addEventListener('DOMContentLoaded', function () {
animatedElements.forEach(el => observer.observe(el)); animatedElements.forEach(el => observer.observe(el));
}); });
</script> </script>
|
@endsection @endsection

View File

@ -1,176 +1,328 @@
@extends('layouts.app') @extends('layouts.app')
@section('title','Our Courses') @section('title', 'Our Courses')
@section('content') @section('content')
<style> <style>
:root{ :root {
--primary:#5E244E; /* Premium Modern Automotive Palette */
--secondary:#8B3A74; --primary: #3E51B8;
--light:#f8f4f7; --primary-light: #0a67df;
--card-border: #efeff4; --secondary: #BC1A1A;
--text-muted: #6a6f73; --secondary-hover: #822424;
--success-green: #1f8a4c; --accent-dark: #753939;
--accent-light: rgba(227, 100, 20, 0.1);
--accent-orange: #e36414;
--accent-yellow: #FFE618;
--bg-light: #F8FAFC;
--text-main: #1E293B;
--text-muted: #64748B;
--card-border: rgba(62, 81, 184, 0.1);
--shadow-color: rgba(15, 44, 89, 0.05);
--success-green: #10B981;
} }
body { body {
font-family: Arial, Helvetica, sans-serif; font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
color: var(--text-main);
background-color: #ffffff;
} }
h1, h2, h3, h4, h5, h6,
.course-title, .features-section h2, .feature-box h5 {
font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
}
/* ===== Hero Section ===== */
.hero { .hero {
background-image: linear-gradient(rgba(109, 105, 105, 0.65), rgb(64, 59, 66)), background-image: linear-gradient(rgba(207, 220, 238, 0.9), rgba(35, 29, 29, 0.85)), url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=1600&q=80');
url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=1600&q=80');
background-size: cover; background-size: cover;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
color: #ffffff; color: #ffffff;
padding: 120px 0; padding: 92px 0 100px;
text-align: center; text-align: center;
} }
.hero h1{ .hero-badge {
font-size:50px; display: inline-flex;
font-weight:700; align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.14);
border: 1px solid rgba(255, 255, 255, 0.28);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: #FFE618;
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 8px 18px;
border-radius: 999px;
margin-bottom: 18px;
} }
.hero p{ .hero h1 {
max-width:700px; font-size: clamp(2.2rem, 4.5vw, 3.4rem);
margin:auto; font-weight: 800;
font-size:18px; text-shadow: 0 2px 15px rgba(0,0,0,0.4);
} }
/* --- Search Box Styling --- */ .hero p {
max-width: 700px;
margin: auto;
font-size: 17px;
color: #F1F5F9;
}
.search-results-hint {
margin-top: 14px;
font-size: 13.5px;
color: rgba(255, 255, 255, 0.75);
}
/* --- Premium Search Box Styling --- */
.search-box { .search-box {
max-width: 500px; max-width: 550px;
margin: 30px auto 0 auto; margin: 35px auto 0 auto;
position: relative; position: relative;
display: flex; display: flex;
box-shadow: 0 8px 25px rgba(0,0,0,0.1); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
overflow: hidden; overflow: hidden;
background: #fff; background: #fff;
border-radius: 100px; border-radius: 100px;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: box-shadow 0.3s ease;
}
.search-box:focus-within {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), 0 0 0 4px rgba(255, 230, 24, 0.35);
}
.search-box-icon {
display: flex;
align-items: center;
padding-left: 24px;
color: #94A3B8;
font-size: 15px;
} }
.search-box input { .search-box input {
width: 100%; width: 100%;
padding: 15px 25px; padding: 16px 12px;
border: none; border: none;
outline: none; outline: none;
font-size: 16px; font-size: 16px;
color: #333; color: #333;
} }
.search-box-clear {
display: none;
align-items: center;
padding: 0 14px;
border: none;
background: transparent;
color: #94A3B8;
cursor: pointer;
font-size: 15px;
transition: color 0.2s ease;
}
.search-box-clear:hover {
color: var(--secondary);
}
.search-box-clear.visible {
display: flex;
}
.search-box button { .search-box button {
background: var(--primary); background: linear-gradient(135deg, #13141A 0%, #8ca8e9 100%);
color: #fff; color: #fff;
border: none; border: none;
padding: 0 25px; padding: 0 30px;
cursor: pointer; cursor: pointer;
transition: 0.3s; transition: all 0.3s ease;
font-size: 18px; font-size: 18px;
} }
.search-box button:hover { .search-box button:hover {
background: var(--secondary); background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
} }
/* ===== HORIZONTAL COURSE CARDS ===== */
.course-card { .course-card {
border: 1px solid var(--card-border);
border-radius: 20px;
overflow: hidden; overflow: hidden;
background: #fff; background: #fff;
transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid var(--card-border);
box-shadow: none; border-radius: 22px;
scale: .99; box-shadow: 0 8px 24px var(--shadow-color);
transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.4s ease;
} }
.course-card:hover { .course-card:hover {
transform: translateY(-5px); transform: translateY(-7px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08); box-shadow: 0 22px 48px rgba(62, 81, 184, 0.14);
border-color: rgba(62, 81, 184, 0.25);
} }
.course-image-wrapper { .course-image-wrapper {
padding: 16px; padding: 20px;
height: 100%;
overflow: hidden;
} }
.course-card img { .course-card img {
height: 200px; height: 220px;
width: 100%; width: 100%;
object-fit: cover; object-fit: cover;
/* border-radius: 14px; */ border-radius: 16px;
transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.course-card:hover img {
transform: scale(1.05);
} }
.course-card .card-body { .course-card .card-body {
padding: 24px; padding: 32px 32px 32px 10px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@media (max-width: 767px) {
.course-card .card-body {
padding: 0 24px 24px 24px;
}
}
.course-title { .course-title {
font-size: 21px; font-size: 23px;
font-weight: 700; font-weight: 750;
line-height: 1.3; line-height: 1.3;
color: #1c1d1f; color:#2B2B2B;
margin-bottom: 8px; margin-bottom: 8px;
transition: color 0.3s ease;
}
.course-card:hover .course-title {
color: var(--secondary);
} }
.course-author { .course-author {
font-size: 14px; font-size: 14px;
color: var(--text-muted); font-weight: 600;
margin-bottom: 12px; color: #910909;
margin-bottom: 14px;
} }
.course-short-desc { .course-short-desc {
font-size: 14px; font-size: 14.5px;
color: #4f5357; color: #556575;
margin-bottom: 16px; margin-bottom: 20px;
line-height: 1.5; line-height: 1.6;
} }
.course-meta-row { .course-meta-row {
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
gap: 8px; gap: 12px;
margin-bottom: 14px; margin-bottom: 18px;
} }
.badge-bestseller { .badge-bestseller {
background-color: #ece3f1; display: inline-flex;
color: var(--primary); align-items: center;
gap: 5px;
background: linear-gradient(135deg, var(--secondary) 0%, var(--accent-orange) 100%);
color: #fff;
font-weight: 700; font-weight: 700;
font-size: 11px; font-size: 10.5px;
padding: 3px 10px; padding: 4px 12px;
border-radius: 4px; border-radius: 30px;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em;
box-shadow: 0 4px 10px rgba(188, 26, 26, 0.2), 0 0 0 0 rgba(188, 26, 26, 0.4);
animation: badgePulse 2.4s ease-out infinite;
}
@keyframes badgePulse {
0% { box-shadow: 0 4px 10px rgba(188, 26, 26, 0.2), 0 0 0 0 rgba(188, 26, 26, 0.4); }
70% { box-shadow: 0 4px 10px rgba(188, 26, 26, 0.2), 0 0 0 7px rgba(188, 26, 26, 0); }
100% { box-shadow: 0 4px 10px rgba(188, 26, 26, 0.2), 0 0 0 0 rgba(188, 26, 26, 0); }
} }
.rating-star { .rating-star {
color: #b4690e; color: #f39c12;
font-weight: 700; font-weight: 700;
font-size: 14px; font-size: 14px;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 4px; gap: 6px;
}
.star-rating {
position: relative;
display: inline-block;
font-size: 12px;
line-height: 1;
letter-spacing: 2px;
}
.star-rating-bg {
color: #dde3ea;
}
.star-rating-fill {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
white-space: nowrap;
width: 0;
color: #f39c12;
transition: width 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.star-rating.filled .star-rating-fill {
width: calc(var(--rating) / 5 * 100%);
} }
.rating-count { .rating-count {
color: var(--text-muted); color: var(--text-muted);
font-size: 13px; font-size: 13.5px;
font-weight: 500;
} }
.course-features { .course-features {
display: flex; display: flex;
gap: 15px; flex-wrap: wrap;
font-size: 13px; gap: 10px;
font-size: 12.5px;
color: var(--success-green); color: var(--success-green);
margin-bottom: 20px; margin-bottom: 24px;
font-weight: 500; font-weight: 600;
}
.course-features span {
display: inline-flex;
align-items: center;
background: rgba(16, 185, 129, 0.08);
padding: 5px 12px;
border-radius: 8px;
transition: transform 0.3s ease, background-color 0.3s ease;
}
.course-card:hover .course-features span {
background: rgba(16, 185, 129, 0.14);
transform: translateY(-2px);
} }
.course-features span i { .course-features span i {
margin-right: 4px; margin-right: 6px;
} }
.course-footer { .course-footer {
@ -178,212 +330,205 @@ body {
} }
.read-btn { .read-btn {
background: var(--primary); background: #822424;
color: #fff; color: #fff;
padding: 12px 20px; padding: 13px 28px;
font-weight: 600; font-weight: 600;
border-radius: 8px;
font-size: 15px; font-size: 15px;
transition: 0.2s; border-radius: 14px;
border: none; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
border: 2px solid transparent;
text-decoration: none; text-decoration: none;
display: block;
text-align: center;
}
.read-btn:hover {
background: var(--secondary);
color: #fff;
}
/* --- Modernized Why Study With Us Section --- */
.features-section {
background-color: #f8f9fa;
border-radius: 24px;
padding: 60px 40px;
margin-bottom: 60px;
}
.features-section h2 {
font-size: 32px;
font-weight: 700;
color: #1c1d1f;
margin-bottom: 40px;
}
.feature-box {
background: #fff;
padding: 30px 24px;
border-radius: 16px;
height: 100%;
transition: all 0.3s ease;
border: 1px solid #efeff4;
text-align: left;
}
.feature-icon-wrapper {
width: 50px;
height: 50px;
background-color: #ece3f1;
color: var(--primary);
border-radius: 12px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 22px; gap: 8px;
margin-bottom: 20px; box-shadow: 0 4px 12px rgba(10, 103, 223, 0.2);
transition: transform 0.5s ease;
} }
.read-btn .read-btn-arrow {
transition: transform 0.3s ease;
}
.read-btn:hover {
background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
color: #fff;
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(188, 26, 26, 0.3);
}
.read-btn:hover .read-btn-arrow {
transform: translateX(4px);
}
/* --- Features Section --- */
.features-section {
background-color: var(--bg-light);
padding: 80px 40px;
margin-bottom: 40px;
background-image: radial-gradient(rgba(62, 81, 184, 0.04) 1px, transparent 0);
background-size: 20px 20px;
}
.features-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.25);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: #FFE618;
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 7px 18px;
border-radius: 999px;
margin-bottom: 16px;
}
.features-section h2 {
font-size: 45px;
font-weight: 800;
color: #ffffff;
margin-bottom: 54px;
}
.feature-box {
position: relative;
background: #fff;
padding: 40px 28px;
border-radius: 24px;
height: 100%;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
border: 1px solid var(--card-border);
text-align: center;
box-shadow: 0 6px 20px rgba(62, 81, 184, 0.02);
overflow: hidden;
}
.feature-index {
position: absolute;
top: 14px;
right: 18px;
font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
font-size: 13px;
font-weight: 700;
color: rgba(62, 81, 184, 0.25);
letter-spacing: 0.05em;
}
.feature-icon-wrapper {
width: 58px;
height: 58px;
background-color: rgba(62, 81, 184, 0.08);
color: var(--primary);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
margin: 0 auto 24px;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.feature-box:hover { .feature-box:hover {
transform: translateY(-5px); transform: translateY(-8px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05); box-shadow: 0 15px 35px rgba(62, 81, 184, 0.12);
border-color: var(--primary); border-color: rgba(188, 26, 26, 0.2);
color:#6a2525 ;
} }
.feature-box:hover .feature-index {
color: rgba(188, 26, 26, 0.35);
}
.feature-box:hover .feature-icon-wrapper i { .feature-box:hover .feature-icon-wrapper {
transform: rotate(360deg); background: linear-gradient(135deg, var(--secondary) 0%, var(--accent-orange) 100%);
color: #fff;
transform: rotateY(180deg);
box-shadow: 0 8px 15px rgba(188, 26, 26, 0.25);
} }
.feature-icon-wrapper i { .feature-icon-wrapper i {
transition: transform 0.5s ease; transition: transform 0.4s ease;
}
.feature-box:hover .feature-icon-wrapper i {
transform: rotateY(-180deg);
} }
.feature-box h5 { .feature-box h5 {
font-size: 18px; font-size: 19px;
font-weight: 700; font-weight: 700;
color: #1c1d1f; color: #181818;
margin-bottom: 10px; margin-bottom: 12px;
}
.feature-box h5:hover {
color: #822424 ;
} }
.feature-box p { .feature-box p {
font-size: 14px; font-size: 14.5px;
color: var(--text-muted); color: var(--text-muted);
margin-bottom: 0; margin-bottom: 0;
line-height: 1.5; line-height: 1.6;
} }
#noResults { #noResults {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
color: #666; color: var(--text-muted);
margin-top: 20px; margin-top: 30px;
} }
/* ======================================================== /* Animations */
Custom Pure CSS Animations (Scroll Animations) .animate-on-scroll {
======================================================== */
/* .animate-on-scroll {
opacity: 0; opacity: 0;
transition: all 0.8s ease-out; transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
} }
.fade-up-init { .fade-up-init {
transform: translateY(30px); transform: translateY(40px);
} }
.animate-on-scroll.animated { .animate-on-scroll.animated {
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0);
} */ }
</style> </style>
{{-- Hero --}} {{-- Hero --}}
<section class="hero"> <section class="hero">
<div class="container"> <div class="container">
<div class="animate-on-scroll animated fade-up-init"> <div class="animate-on-scroll animated fade-up-init">
<span class="hero-badge"><i class="fa-solid fa-graduation-cap"></i> {{ $courses->count() }} Programs Available</span>
<h1>Our Courses</h1> <h1>Our Courses</h1>
<p> <p>
Build your future in the automotive industry through practical Build your future in the automotive industry through practical
training and internationally recognized learning experiences. training and internationally recognized learning experiences.
</p> </p>
<div class="search-box"> <div class="search-box">
<span class="search-box-icon"><i class="fas fa-search"></i></span>
<input <input
type="text" type="text"
id="courseSearch" id="courseSearch"
placeholder="Search Courses by title, level or description..." placeholder="Search Courses by title, level or description..."
> >
<button type="button" class="search-box-clear" id="courseSearchClear" aria-label="Clear search">
<i class="fa-solid fa-xmark"></i>
</button>
<button type="button"> <button type="button">
<i class="fas fa-search"></i> <i class="fas fa-search"></i>
</button> </button>
</div> </div>
<p class="search-results-hint" id="searchResultsHint"></p>
</div> </div>
</div> </div>
</section> </section>
@php
$courses=[
[
'image'=>'https://images.unsplash.com/photo-1486262715619-67b85e0b08d3?auto=format&fit=crop&w=900&q=80',
'title'=>'Diploma in Automotive Engineering',
'duration'=>'2 Years',
'level'=>'Diploma',
'author'=>'Automotive Engineering Dept.',
'desc'=>'Master engine diagnostics, modern hybrid vehicle maintenance, and advanced automotive electrical systems with hands-on labs.',
'students'=>'1,240 students enrolled',
'rating'=>'4.9',
'badge'=>'Popular'
],
[
'image'=>'https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=900&q=80',
'title'=>'Mechanical Systems Technology',
'duration'=>'18 Months',
'level'=>'Certificate',
'author'=>'Tech & Service Campus',
'desc'=>'Comprehensive training on vehicle suspension, transmissions, steering, braking mechanisms, and professional repair workshop skills.',
'students'=>'850 students enrolled',
'rating'=>'4.7',
'badge'=>'Bestseller'
],
[
'image'=>'https://images.unsplash.com/photo-1502877338535-766e1452684a?auto=format&fit=crop&w=900&q=80',
'title'=>'Electric Vehicle Technology',
'duration'=>'1 Year',
'level'=>'Advanced',
'author'=>'EV Research Institute',
'desc'=>'Dive into the future of mobility. Learn about smart EV battery packs, fast charging infrastructures, and high-voltage safety.',
'students'=>'640 students enrolled',
'rating'=>'4.8',
'badge'=>'New'
],
[
'image'=>'https://images.unsplash.com/photo-1616788494707-ec28f08d05a1?auto=format&fit=crop&w=900&q=80',
'title'=>'Advanced EFI Engine Tuning & Diagnostic',
'duration'=>'6 Months',
'level'=>'Expert',
'author'=>'Performance Tuning Lab',
'desc'=>'Learn professional ECU remapping, electronic fuel injection (EFI) tuning, sensor calibration, and master high-end oscilloscope diagnostics.',
'students'=>'420 students enrolled',
'rating'=>'4.9',
'badge'=>'Hot & New'
],
[
'image'=>'https://images.unsplash.com/photo-1568605117036-5fe5e7bab0b7?auto=format&fit=crop&w=900&q=80',
'title'=>'Hybrid & Plug-in Hybrid Masterclass',
'duration'=>'8 Months',
'level'=>'Professional',
'author'=>'Automotive Engineering Dept.',
'desc'=>'Specialized training in Toyota/Honda Hybrid Synergy Drive systems, inverter repairs, planetary gearboxes, and live diagnostic scanner masterclass.',
'students'=>'980 students enrolled',
'rating'=>'4.8',
'badge'=>'Top Rated'
],
[
'image'=>'https://images.unsplash.com/photo-1517524008697-84bbe3c3fd98?auto=format&fit=crop&w=900&q=80',
'title'=>'Automotive Body Electronics & Comfort Systems',
'duration'=>'1 Year',
'level'=>'Diploma',
'author'=>'Tech & Service Campus',
'desc'=>'Covering modern CAN-bus/LIN-bus communication networks, SRS airbag systems, ABS/ESP braking electronics, and smart climate control.',
'students'=>'510 students enrolled',
'rating'=>'4.6',
'badge'=>'Trending'
],
];
@endphp
<section class="py-5"> <section class="py-5">
<div class="container"> <div class="container">
@ -392,39 +537,60 @@ $courses=[
</div> </div>
<div class="row g-4" id="courseContainer"> <div class="row g-4" id="courseContainer">
@foreach($courses as $index => $course) @forelse($courses as $index => $course)
<div class="col-12 course-item animate-on-scroll fade-up-init" style="transition-delay: {{ $index * 100 }}ms;"> <div class="col-12 course-item animate-on-scroll fade-up-init" style="transition-delay: {{ $index * 100 }}ms;">
<div class="card course-card h-100"> <div class="card course-card h-100">
<div class="row g-0 align-items-center"> <div class="row g-0 align-items-center">
{{-- Course Image --}}
<div class="col-md-4"> <div class="col-md-4">
<div class="course-image-wrapper"> <div class="course-image-wrapper">
<img src="{{ $course['image'] }}" alt="{{ $course['title'] }}"> <img src="{{ $course->image }}" alt="{{ $course->title }}">
</div> </div>
</div> </div>
{{-- Course Details --}}
<div class="col-md-8"> <div class="col-md-8">
<div class="card-body"> <div class="card-body">
<h4 class="course-title">{{ $course['title'] }}</h4> <h4 class="course-title">{{ $course->title }}</h4>
<div class="course-author">{{ $course['author'] }}</div>
<p class="course-short-desc">{{ $course['desc'] }}</p> @if($course->author)
<div class="course-author">
<i class="fa-solid fa-user-gear me-1"></i> {{ $course->author }}
</div>
@endif
<p class="course-short-desc">{{ $course->desc }}</p>
<div class="course-meta-row"> <div class="course-meta-row">
<span class="badge-bestseller">{{ $course['badge'] }}</span> @if($course->badge)
<span class="badge-bestseller"><i class="fa-solid fa-bolt"></i> {{ $course->badge }}</span>
@endif
@if($course->rating)
<span class="rating-star"> <span class="rating-star">
<i class="fas fa-star"></i> {{ $course['rating'] }} <span class="star-rating" style="--rating: {{ $course->rating }};">
<span class="star-rating-bg">★★★★★</span>
<span class="star-rating-fill">★★★★★</span>
</span> </span>
<span class="rating-count">({{ $course['students'] }})</span> {{ $course->rating }}
</span>
@endif
@if($course->student)
<span class="rating-count">({{ $course->student }} students enrolled)</span>
@endif
</div> </div>
<div class="course-features"> <div class="course-features">
<span><i class="fas fa-tools"></i> Practical Labs</span> <span><i class="fas fa-tools"></i> Level: {{ $course->level ?? 'General' }}</span>
<span><i class="fas fa-certificate"></i> Verified ({{ $course['duration'] }})</span> @if($course->duration)
<span><i class="fas fa-certificate"></i> Duration: {{ $course->duration }}</span>
@endif
</div> </div>
<div class="course-footer" style="max-width: 200px;"> <div class="course-footer" style="max-width: 200px;">
<a href="/apply" class="read-btn">Apply Course</a> <a href="/apply" class="read-btn">Apply Course <i class="fa-solid fa-paper-plane read-btn-arrow"></i></a>
</div> </div>
</div> </div>
</div> </div>
@ -432,21 +598,31 @@ $courses=[
</div> </div>
</div> </div>
</div> </div>
@endforeach @empty
<div class="col-12 text-center py-5">
<h4>No courses available at the moment.</h4>
</div>
@endforelse
</div> </div>
</div> </div>
</section> </section>
{{-- Why Study With Us Section --}} {{-- Why Study With Us Section --}}
<section class="pb-5"> <section class="pb-5 why-study-section">
<div class="container"> <div class="container">
<div class="features-section text-center animate-on-scroll fade-up-init"> <div class="features-section text-center animate-on-scroll fade-up-init"
style="background-image: linear-gradient(rgba(77, 103, 169, 0.61), rgba(0, 0, 0, 0.9)), url('https://images.pexels.com/photos/4489749/pexels-photo-4489749.jpeg?auto=compress&cs=tinysrgb&w=1600');
background-size: cover;
background-position: center;
background-repeat: no-repeat;">
<span class="features-eyebrow"><i class="fa-solid fa-star"></i> Our Advantage</span>
<h2>Why Study With Us?</h2> <h2>Why Study With Us?</h2>
<div class="row g-4"> <div class="row g-4">
<div class="col-xl-3 col-md-6"> <div class="col-xl-3 col-md-6">
<div class="feature-box"> <div class="feature-box">
<span class="feature-index">01</span>
<div class="feature-icon-wrapper"> <div class="feature-icon-wrapper">
<i class="fas fa-chalkboard-teacher"></i> <i class="fas fa-chalkboard-teacher"></i>
</div> </div>
@ -457,6 +633,7 @@ $courses=[
<div class="col-xl-3 col-md-6"> <div class="col-xl-3 col-md-6">
<div class="feature-box"> <div class="feature-box">
<span class="feature-index">02</span>
<div class="feature-icon-wrapper"> <div class="feature-icon-wrapper">
<i class="fas fa-cogs"></i> <i class="fas fa-cogs"></i>
</div> </div>
@ -467,6 +644,7 @@ $courses=[
<div class="col-xl-3 col-md-6"> <div class="col-xl-3 col-md-6">
<div class="feature-box"> <div class="feature-box">
<span class="feature-index">03</span>
<div class="feature-icon-wrapper"> <div class="feature-icon-wrapper">
<i class="fas fa-award"></i> <i class="fas fa-award"></i>
</div> </div>
@ -477,6 +655,7 @@ $courses=[
<div class="col-xl-3 col-md-6"> <div class="col-xl-3 col-md-6">
<div class="feature-box"> <div class="feature-box">
<span class="feature-index">04</span>
<div class="feature-icon-wrapper"> <div class="feature-icon-wrapper">
<i class="fas fa-briefcase"></i> <i class="fas fa-briefcase"></i>
</div> </div>
@ -493,18 +672,23 @@ $courses=[
<script> <script>
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
// === 1. Course Search Feature === // === 1. Course Search Feature ===
document.getElementById('courseSearch').addEventListener('keyup', function() { const courseSearchInput = document.getElementById('courseSearch');
let filter = this.value.toLowerCase(); const courseSearchClear = document.getElementById('courseSearchClear');
const searchResultsHint = document.getElementById('searchResultsHint');
const totalCourseCount = document.querySelectorAll('.course-item').length;
function runCourseSearch() {
let filter = courseSearchInput.value.toLowerCase();
let courseItems = document.querySelectorAll('.course-item'); let courseItems = document.querySelectorAll('.course-item');
let hasResults = false; let matchCount = 0;
courseItems.forEach(function(item) { courseItems.forEach(function(item) {
let title = item.querySelector('.course-title').textContent.toLowerCase(); let title = item.querySelector('.course-title') ? item.querySelector('.course-title').textContent.toLowerCase() : '';
let desc = item.querySelector('.course-short-desc').textContent.toLowerCase(); let desc = item.querySelector('.course-short-desc') ? item.querySelector('.course-short-desc').textContent.toLowerCase() : '';
if (title.includes(filter) || desc.includes(filter)) { if (title.includes(filter) || desc.includes(filter)) {
item.style.setProperty('display', '', 'important'); item.style.setProperty('display', '', 'important');
hasResults = true; matchCount++;
item.classList.add('animated'); item.classList.add('animated');
} else { } else {
item.style.setProperty('display', 'none', 'important'); item.style.setProperty('display', 'none', 'important');
@ -512,11 +696,23 @@ document.addEventListener('DOMContentLoaded', function () {
}); });
let noResultsMsg = document.getElementById('noResults'); let noResultsMsg = document.getElementById('noResults');
if (hasResults) { if (matchCount > 0) {
noResultsMsg.classList.add('d-none'); noResultsMsg.classList.add('d-none');
} else { } else {
noResultsMsg.classList.remove('d-none'); noResultsMsg.classList.remove('d-none');
} }
courseSearchClear.classList.toggle('visible', filter.length > 0);
searchResultsHint.textContent = filter.length > 0
? `Showing ${matchCount} of ${totalCourseCount} courses`
: '';
}
courseSearchInput.addEventListener('keyup', runCourseSearch);
courseSearchClear.addEventListener('click', function() {
courseSearchInput.value = '';
runCourseSearch();
courseSearchInput.focus();
}); });
// === 2. Pure Intersection Observer Scroll Animation === // === 2. Pure Intersection Observer Scroll Animation ===
@ -534,6 +730,20 @@ document.addEventListener('DOMContentLoaded', function () {
}); });
animatedElements.forEach(el => observer.observe(el)); animatedElements.forEach(el => observer.observe(el));
// === 3. Animated Star Rating Fill ===
const starRatings = document.querySelectorAll('.star-rating');
if (starRatings.length) {
const starObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('filled');
starObserver.unobserve(entry.target);
}
});
}, { threshold: 0.4 });
starRatings.forEach(el => starObserver.observe(el));
}
}); });
</script> </script>

View File

@ -0,0 +1,437 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Password Recovery</title>
<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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: #f4f6f9;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.container-box {
background: #ffffff;
width: 100%;
max-width: 420px;
border-radius: 16px;
padding: 40px 36px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
.icon-wrap {
width: 64px;
height: 64px;
background: #943835e3;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
}
.icon-wrap i { font-size: 24px; color: #eeff8f; }
h1 { font-size: 22px; color: #1f2937; text-align: center; margin-bottom: 8px; font-weight: 700; }
p.subtitle { text-align: center; color: #6b7280; font-size: 14px; margin-bottom: 28px; line-height: 1.5; }
.form-group { margin-bottom: 20px; position: relative; }
label { display: block; font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 6px; }
input[type="email"], input[type="text"], input[type="password"] {
width: 100%; padding: 12px 14px; border: 1.5px solid #e5e7eb;
border-radius: 10px; font-size: 14px; color: #1f2937; outline: none;
transition: all 0.2s ease;
}
input:focus { border-color: #943835e3; box-shadow: 0 0 0 3px rgba(148, 56, 53, 0.15); }
.toggle-password { position: absolute; right: 14px; top: 38px; cursor: pointer; color: #6b7280; }
.err, .error { color: #dc2626; font-size: 12.5px; margin-top: 6px; display: block; }
.otp-input { letter-spacing: 4px; text-align: center; font-size: 20px; font-weight: 700; }
button[type="submit"] {
width: 100%; padding: 13px; background: #943835e3; color: #fff;
border: none; border-radius: 10px; font-size: 15px; font-weight: 600;
cursor: pointer; margin-top: 10px; transition: transform 0.15s ease;
}
button[type="submit"]:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(148, 56, 53, 0.35); }
button[type="submit"]:disabled { background: #94383580; cursor: not-allowed; }
.back-link { display: block; text-align: center; margin-top: 22px; font-size: 13.5px; color: #6b7280; }
.back-link a { color: #231d77e3; font-weight: 600; text-decoration: none; }
.powered { text-align: center; margin-top: 20px; font-size: 12px; color: #9ca3af; }
.otp-container {
display: flex;
justify-content: space-between;
gap: 8px;
margin-top: 10px;
margin-bottom: 10px;
}
.otp-box {
width: 48px;
height: 52px;
text-align: center;
font-size: 22px;
font-weight: 700;
border: 1.5px solid #e5e7eb;
border-radius: 10px;
outline: none;
transition: all 0.2s ease;
}
.otp-box:focus {
border-color: #943835e3;
box-shadow: 0 0 0 3px rgba(148, 56, 53, 0.15);
}
.success-icon-wrap {
font-size: 60px;
color: #10b981; /* Green color */
margin-bottom: 15px;
}
.login-btn-link {
display: block;
width: 100%;
padding: 13px;
background: #943835e3;
color: #fff;
text-decoration: none;
border-radius: 10px;
font-size: 15px;
font-weight: 600;
margin-top: 20px;
transition: transform 0.15s ease;
}
.login-btn-link:hover {
color: #fff;
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(148, 56, 53, 0.35);
}
</style>
</head>
<body>
<div class="container-box">
<div class="icon-wrap" id="main-icon">
<i class="fa-solid fa-key"></i>
</div>
<!-- Step 1: Email Form -->
<form class="login-form" name="login-form" action="{{ route('password.email') }}" method="post" id="login-form">
@csrf
<h1>Recover Password</h1>
<p class="subtitle">Enter your registered email address to receive an OTP code.</p>
<div class="form-group">
<label for="email-login">Email Address</label>
<input type="email" name="email" id="email-login" placeholder="name@example.com" required>
<span id="email-err" class="err"></span>
@if ($errors->has('email'))
<span class="err">{{ $errors->first('email') }}</span>
@endif
</div>
<button type="submit" id="verify-btn" onclick="validateEmail(event)">Verify Email</button>
<div class="back-link">
Remember the password? <a href="/signin">Please Login</a>
</div>
</form>
<!-- Step 2: OTP Verification Form -->
<div id="otp_sec" style="display: none;">
<h1>Enter OTP Code</h1>
<p class="subtitle">Please check your email and enter the 6-digit verification code.</p>
<form name="emailOtpForm" id="emailOtpForm">
@csrf
<div class="form-group">
<label>Verification Code</label>
<div class="otp-container">
<input type="text" class="otp-box" maxlength="1" pattern="\d*" inputmode="numeric" required>
<input type="text" class="otp-box" maxlength="1" pattern="\d*" inputmode="numeric" required>
<input type="text" class="otp-box" maxlength="1" pattern="\d*" inputmode="numeric" required>
<input type="text" class="otp-box" maxlength="1" pattern="\d*" inputmode="numeric" required>
<input type="text" class="otp-box" maxlength="1" pattern="\d*" inputmode="numeric" required>
<input type="text" class="otp-box" maxlength="1" pattern="\d*" inputmode="numeric" required>
</div>
<input type="hidden" id="otp" name="otpm">
<span id="otpm_err" class="err"></span>
</div>
<button type="submit" onclick="showPassword(event)">Submit Code</button>
</form>
</div>
<!-- Step 3: Password Reset Form -->
<div id="password_sec" style="display: none;">
<h1>Reset Password</h1>
<p class="subtitle">Create a new password for your account.</p>
<form class="login-form" name="reset-password-form" id="reset-password-form" action="{{ route('password.update') }}" method="post" onsubmit="handlePasswordReset(event)">
@csrf
<input type="hidden" name="email" value="" id="hidden_email">
<div class="form-group">
<label for="password-m">New Password</label>
<input type="password" name="password_mo" id="password-m" placeholder="••••••••" required>
<i class="fa-solid fa-eye toggle-password" id="view1" onclick="togglePassword('password-m', 'view1', 'no-view1')"></i>
<i class="fa-solid fa-eye-slash toggle-password" id="no-view1" onclick="togglePassword('password-m', 'view1', 'no-view1')" style="display:none;"></i>
</div>
<div class="form-group">
<label for="confirm_password">Confirm Password</label>
<input type="password" name="password_mo_confirmation" id="confirm_password" placeholder="••••••••" required>
<i class="fa-solid fa-eye toggle-password" id="view-con1" onclick="togglePassword('confirm_password', 'view-con1', 'no-view-con1')"></i>
<i class="fa-solid fa-eye-slash toggle-password" id="no-view-con1" onclick="togglePassword('confirm_password', 'view-con1', 'no-view-con1')" style="display:none;"></i>
<span id="con-pass-err" class="error"></span>
</div>
<button type="submit" id="reset-btn">Reset Password</button>
<div class="back-link">
Remember password? <a href="/signin">Please Login</a>
</div>
</form>
</div>
<!-- Step 4: Success Message Screen -->
<div id="success_sec" style="display: none; text-align: center;">
<div class="success-icon-wrap">
<i class="fa-solid fa-circle-check"></i>
</div>
<h1>Password Reset Successful!</h1>
<p class="subtitle">Your password has been reset successfully. You can now log in with your new password.</p>
<a href="/signin" class="login-btn-link">Proceed to Login</a>
</div>
<p class="powered">Powered by <a href="#" style="color: #6b7280; text-decoration: none; font-weight: 600;">GPiT</a></p>
</div>
<script>
function validateEmail(event) {
event.preventDefault();
var email = document.getElementById('email-login').value;
var emailErr = document.getElementById('email-err');
var csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
var verifyBtn = document.getElementById('verify-btn');
emailErr.textContent = '';
if (email.trim() === '') {
emailErr.textContent = 'Please enter your email';
return;
}
verifyBtn.disabled = true;
verifyBtn.textContent = 'Please Wait...';
fetch("{{ route('password.email') }}", {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
'X-CSRF-TOKEN': csrfToken
},
body: JSON.stringify({ email: email })
})
.then(async response => {
const text = await response.text();
try {
return JSON.parse(text);
} catch (e) {
console.error("SERVER ERROR DETAILS:", text);
throw new Error("Server returned HTML response instead of JSON.");
}
})
.then(data => {
if (data.success) {
document.getElementById("hidden_email").value = email;
document.getElementById("login-form").style.display = "none";
document.getElementById("otp_sec").style.display = "block";
} else {
if (data.errors && data.errors.email) {
emailErr.textContent = data.errors.email[0];
} else {
emailErr.textContent = data.message || 'Email not found in our records.';
}
}
})
.catch(error => {
console.error('Error:', error);
emailErr.textContent = 'An error occurred. Check browser console (F12) for details.';
})
.finally(() => {
verifyBtn.disabled = false;
verifyBtn.textContent = 'Verify Email';
});
}
function showPassword(event) {
event.preventDefault();
const otp = document.getElementById('otp').value;
const otpm_err = document.getElementById('otpm_err');
const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
otpm_err.innerText = '';
if (otp.trim() === '' || otp.length < 6) {
otpm_err.innerText = 'Please enter a valid 6-digit OTP code.';
return;
}
fetch("{{ route('password.verify.otp') }}", {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': token
},
body: JSON.stringify({ otp: otp })
})
.then(response => response.json())
.then(data => {
if (data.success) {
document.getElementById("otp_sec").style.display = "none";
document.getElementById("password_sec").style.display = "block";
} else {
otpm_err.innerText = data.message || 'Invalid OTP code';
}
})
.catch(error => {
console.error('Error:', error);
otpm_err.innerText = 'Verification failed. Try again.';
});
}
function handlePasswordReset(event) {
event.preventDefault();
const form = document.getElementById('reset-password-form');
const formData = new FormData(form);
const resetBtn = document.getElementById('reset-btn');
const passErr = document.getElementById('con-pass-err');
const pass = document.getElementById('password-m').value;
const confirmPass = document.getElementById('confirm_password').value;
if (pass !== confirmPass) {
passErr.innerText = "Passwords do not match!";
passErr.style.color = "#dc2626";
return;
}
resetBtn.disabled = true;
resetBtn.textContent = 'Resetting...';
fetch(form.action, {
method: 'POST',
headers: {
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
'Accept': 'application/json'
},
body: formData
})
.then(async response => {
const data = await response.json();
if (response.ok || data.success) {
document.getElementById("main-icon").style.display = "none";
document.getElementById("password_sec").style.display = "none";
document.getElementById("success_sec").style.display = "block";
} else {
passErr.innerText = data.message || 'Failed to reset password.';
passErr.style.color = "#dc2626";
}
})
.catch(error => {
console.error('Error:', error);
// Unexpected redirect/success response handling
document.getElementById("main-icon").style.display = "none";
document.getElementById("password_sec").style.display = "none";
document.getElementById("success_sec").style.display = "block";
})
.finally(() => {
resetBtn.disabled = false;
resetBtn.textContent = 'Reset Password';
});
}
$('#password-m, #confirm_password').on('keyup', function() {
if ($('#password-m').val() !== '' && $('#password-m').val() === $('#confirm_password').val()) {
$('#con-pass-err').html('Passwords match').css('color', '#047857');
} else if ($('#confirm_password').val() !== '') {
$('#con-pass-err').html('Passwords do not match').css('color', '#dc2626');
}
});
function togglePassword(inputId, eyeId, eyeSlashId) {
var field = document.getElementById(inputId);
var eye = document.getElementById(eyeId);
var eyeSlash = document.getElementById(eyeSlashId);
if (field.type === "password") {
field.type = "text";
eye.style.display = "none";
eyeSlash.style.display = "block";
} else {
field.type = "password";
eye.style.display = "block";
eyeSlash.style.display = "none";
}
}
document.addEventListener("DOMContentLoaded", function () {
const inputs = document.querySelectorAll(".otp-box");
const hiddenOtpInput = document.getElementById("otp");
inputs.forEach((input, index) => {
input.addEventListener("input", (e) => {
input.value = input.value.replace(/\D/g, '');
if (input.value && index < inputs.length - 1) {
inputs[index + 1].focus();
}
updateHiddenOtp();
});
input.addEventListener("keydown", (e) => {
if (e.key === "Backspace" && !input.value && index > 0) {
inputs[index - 1].focus();
}
});
input.addEventListener("paste", (e) => {
e.preventDefault();
const pasteData = e.clipboardData.getData("text").trim().replace(/\D/g, '');
if (pasteData.length === 6) {
pasteData.split("").forEach((char, i) => {
if (inputs[i]) inputs[i].value = char;
});
inputs[5].focus();
updateHiddenOtp();
}
});
});
function updateHiddenOtp() {
let fullOtp = "";
inputs.forEach(input => fullOtp += input.value);
hiddenOtpInput.value = fullOtp;
}
});
</script>
</body>
</html>

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'); -->

View File

@ -0,0 +1,368 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>@yield('title', 'Admin Portal - Automobile Academic')</title>
<!-- Font Awesome Icons & Bootstrap 5 -->
<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">
<style>
:root {
--theme-navy: #2D355B;
--theme-footer-navy: #1F2541;
--theme-red: #822424;
--theme-red-hover: #df2c3e;
--theme-yellow: #FFEA85;
--theme-bg: #F6F6F6;
--sidebar-width: 260px;
--text-dark: #333333;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', sans-serif;
}
body {
background-color: var(--theme-bg);
color: var(--text-dark);
display: flex;
min-height: 100vh;
overflow-x: hidden;
}
.sidebar {
width: var(--sidebar-width);
height: 100vh;
background: var(--theme-navy);
color: #fff;
position: fixed;
top: 0;
left: 0;
padding: 24px 0;
transition: all 0.3s ease;
z-index: 1030;
display: flex;
flex-direction: column;
box-shadow: 2px 0 10px rgba(0,0,0,0.1);
}
.sidebar .brand {
padding: 0 24px 20px;
font-weight: 700;
font-size: 1.25rem;
color: #ffffff;
border-bottom: 1px solid rgba(255,255,255,.15);
margin-bottom: 12px;
display: flex;
align-items: center;
}
.sidebar .admin-badge {
background-color: var(--theme-red);
font-size: 0.7rem;
padding: 2px 8px;
border-radius: 4px;
margin-left: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.sidebar .nav {
display: flex;
flex-direction: column;
flex-grow: 1;
overflow-y: auto;
}
.sidebar .nav-link {
color: rgba(255, 255, 255, 0.85);
padding: 14px 24px;
font-size: 0.95rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 12px;
transition: all 0.2s ease;
border-left: 4px solid transparent;
text-decoration: none;
}
.sidebar .nav-link i {
width: 20px;
text-align: center;
}
.sidebar .nav-link:hover {
background: rgba(255, 255, 255, 0.08);
color: var(--theme-yellow) !important;
padding-left: 28px;
}
.sidebar .nav-link.active {
background: var(--theme-footer-navy);
color: var(--theme-yellow) !important;
border-left: 4px solid #F73F52;
font-weight: 700;
}
.sidebar-user-profile {
padding: 15px 24px;
border-top: 1px solid rgba(255,255,255,.15);
margin-top: auto;
background: var(--theme-footer-navy);
}
.sidebar-user-profile .user-dropdown-toggle {
display: flex;
align-items: center;
gap: 10px;
color: #fff;
text-decoration: none;
font-size: 0.95rem;
transition: color 0.2s ease;
}
.sidebar-user-profile .user-dropdown-toggle:hover {
color: var(--theme-yellow);
}
.main {
margin-left: var(--sidebar-width);
width: calc(100% - var(--sidebar-width));
min-height: 100vh;
padding: 40px;
background: var(--theme-bg);
transition: all 0.3s ease;
}
.mobile-header {
display: none;
background: var(--theme-navy);
color: #ffffff;
padding: 12px 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
align-items: center;
justify-content: space-between;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1020;
}
.sidebar-toggle {
background: none;
border: none;
font-size: 1.4rem;
cursor: pointer;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
}
.sidebar-toggle:hover {
color: var(--theme-yellow);
}
.mobile-brand {
font-weight: 700;
font-size: 1.1rem;
color: #ffffff;
}
.sidebar-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
z-index: 1025;
opacity: 0;
transition: opacity 0.3s ease;
}
.sidebar-overlay.show {
display: block;
opacity: 1;
}
@media (max-width: 991px) {
.sidebar {
left: calc(-1 * var(--sidebar-width));
}
.sidebar.show {
left: 0;
}
.main {
margin-left: 0;
padding: 85px 20px 20px 20px;
width: 100%;
}
.mobile-header {
display: flex;
}
}
</style>
</head>
<body>
<!-- Mobile Top Navigation Bar -->
<header class="mobile-header">
<button class="sidebar-toggle" id="toggleBtn" aria-label="Toggle Sidebar">
<i class="fa-solid fa-bars"></i>
</button>
<div class="mobile-brand">
<i class="fa-solid fa-user-shield me-1"></i> Admin Panel
</div>
<div class="mobile-user-profile">
@if(session()->has('admin_id'))
<div class="dropdown">
<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: 26px; color: var(--theme-yellow);"></i>
<span class="fw-semibold small">{{ session('admin_name', 'Admin') }}</span>
</a>
<ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="userMenuMobile">
<li>
<a class="dropdown-item" href="{{ route('admin.profile') }}">
<i class="fa-solid fa-user-gear me-2"></i> Admin Profile
</a>
</li>
<li><hr class="dropdown-divider"></li>
<li>
<button type="button" onclick="submitAdminLogout()" class="dropdown-item text-danger w-100 text-start border-0 bg-transparent">
<i class="fa-solid fa-right-from-bracket me-2"></i> Logout
</button>
</li>
</ul>
</div>
@else
<a href="{{ route('admin.login') }}" class="btn btn-sm btn-outline-light"><i class="fa-solid fa-right-to-bracket me-1"></i> Sign In</a>
@endif
</div>
</header>
<div class="sidebar-overlay" id="sidebarOverlay"></div>
<!-- Sidebar Navigation -->
<aside class="sidebar" id="sidebar">
<div class="brand">
<i class="fa-solid fa-car-side me-2"></i> AutoEdu
<span class="admin-badge">Admin</span>
</div>
<nav class="nav">
<a href="/admin/dashboard" class="nav-link {{ request()->is('admin/dashboard*') ? 'active' : '' }}">
<i class="fa-solid fa-chart-line"></i> Admin Dashboard
</a>
<a href="{{ route('admin.mycourses') }}" class="nav-link {{ request()->is('admin/adminmycourses*') ? 'active' : '' }}">
<i class="fa-solid fa-book-bookmark"></i> Course Management
</a>
<a href="{{ route('admin.timetable') }}" class="nav-link {{ request()->is('admin/timetable*') ? 'active' : '' }}">
<i class="fa-solid fa-calendar-check"></i> Class Timetable
</a>
<a href="{{ route('admin.results') }}" class="nav-link {{ request()->is('admin/results*') ? 'active' : '' }}">
<i class="fa-solid fa-file-invoice-dollar"></i> Exam Results
</a>
<a href="{{ route('admin.profile') }}" class="nav-link {{ request()->is('admin/profile*') ? 'active' : '' }}">
<i class="fa-solid fa-user-gear"></i> Admin Profile
</a>
</nav>
<div class="sidebar-user-profile">
@if(session()->has('admin_id'))
<div class="dropdown dropup">
<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; color: var(--theme-yellow);"></i>
<span class="text-truncate" style="max-width: 150px;">{{ session('admin_name', 'Admin') }}</span>
</a>
<ul class="dropdown-menu dropdown-menu-start shadow w-100" aria-labelledby="userMenuDesktop">
<li>
<a class="dropdown-item" href="{{ route('admin.profile') }}">
<i class="fa-solid fa-user-gear me-2"></i> Admin Profile
</a>
</li>
<li><hr class="dropdown-divider"></li>
<li>
<button type="button" onclick="submitAdminLogout()" class="dropdown-item text-danger border-0 bg-transparent w-100 text-start">
<i class="fa-solid fa-right-from-bracket me-2"></i> Logout
</button>
</li>
</ul>
</div>
@else
<div class="d-flex gap-2">
<a href="{{ route('admin.login') }}" class="btn btn-outline-light btn-sm w-100">Sign In</a>
</div>
@endif
</div>
</aside>
<main class="main">
@yield('content')
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Sidebar Toggle Logic
const toggleBtn = document.getElementById('toggleBtn');
const sidebar = document.getElementById('sidebar');
const overlay = document.getElementById('sidebarOverlay');
if(toggleBtn) {
toggleBtn.addEventListener('click', () => {
sidebar.classList.toggle('show');
overlay.classList.toggle('show');
});
}
if(overlay) {
overlay.addEventListener('click', () => {
sidebar.classList.remove('show');
overlay.classList.remove('show');
});
}
// Admin Logout Logic
function submitAdminLogout() {
const tokenEl = document.querySelector('meta[name="csrf-token"]');
fetch('/admin/logout', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
'X-CSRF-TOKEN': tokenEl ? tokenEl.getAttribute('content') : ''
}
})
.then(res => res.json())
.then(data => {
if (data.success) {
window.location.href = '/adminlogin';
} else {
alert('Logout failed. Please try again.');
}
})
.catch(err => {
console.error('Error:', err);
alert('Server side error occurred during logout.');
});
}
</script>
</body>
</html>

View File

@ -4,69 +4,174 @@
<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>@yield('title', 'Automobile Academic')</title> <title>@yield('title', 'Home') | AutoEdu - Automobile Engineering Academy</title>
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='14' fill='%232D355B'/%3E%3Cpath d='M18 28 L24 16 L40 16 L46 28 Z' fill='%23FFEA85'/%3E%3Crect x='8' y='28' width='48' height='14' rx='6' fill='%23FFEA85'/%3E%3Ccircle cx='20' cy='44' r='6' fill='%231F2541' stroke='%23FFEA85' stroke-width='2'/%3E%3Ccircle cx='44' cy='44' r='6' fill='%231F2541' stroke='%23FFEA85' stroke-width='2'/%3E%3C/svg%3E">
<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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.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 rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700;800&display=swap" rel="stylesheet">
<style> <style>
body { body {
font-family: 'Segoe UI', sans-serif; font-family: 'Inter', 'Segoe UI', sans-serif;
background: #f5f7fb; background: #F6F6F6;
padding-top: 83px;
}
padding-top: 56px; h1, h2, h3, h4, h5, h6,
.navbar-brand, .site-footer h4 {
font-family: 'Poppins', 'Segoe UI', sans-serif;
} }
.navbar { .navbar {
background: #5E244E; background:#2D355B;
/* background: #3E51B8; */
z-index: 1000; z-index: 1000;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
box-shadow: 0 2px 10px rgba(0,0,0,0.1); box-shadow: 0 4px 24px rgba(0,0,0,0.16);
border-bottom: 1px solid rgba(255,255,255,0.06);
height: 83px; height: 83px;
display: flex;
align-items: center;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: box-shadow 0.3s ease;
}
.navbar .container {
display: flex;
align-items: center;
} }
.navbar-brand { .navbar-brand {
color: white; color: white;
font-weight: bold; font-weight: bold;
font-size: 24px; font-size: 22px;
letter-spacing: -0.01em;
display: inline-flex;
align-items: center;
gap: 12px;
transition: opacity 0.2s ease;
}
.navbar-brand i {
color: #FFEA85;
background: rgba(255, 234, 133, 0.12);
width: 42px;
height: 42px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
transition: transform 0.25s ease;
}
.navbar-brand:hover i {
transform: rotate(-8deg) scale(1.05);
} }
.navbar-brand:hover { .navbar-brand:hover {
color: #ffc107; color: #f4f4f8;
opacity: 0.9;
}
.navbar-toggler {
border: none;
box-shadow: none !important;
}
.navbar-nav {
align-items: center;
gap: 2px;
} }
.nav-link { .nav-link {
color: rgba(255, 255, 255, 0.85) !important; color: rgba(255, 255, 255, 0.85) !important;
margin-left: 20px; margin-left: 2px;
transition: 0.2s ease; padding: 9px 16px !important;
font-weight:bold; border-radius: 999px;
transition: color 0.2s ease, background-color 0.2s ease;
font-weight: 600;
font-size: 15.5px;
position: relative;
} }
.nav-link:hover, .nav-link:hover,
.nav-link.active-page { .nav-link.active-page {
color: #ffc107 !important; color: #FFEA85 !important;
font-weight:bold; background: rgba(255, 255, 255, 0.07);
font-weight: 600;
}
.navbar .btn-outline-light,
.navbar .btn-theme-register {
border-radius: 999px;
font-weight: 600;
padding: 8px 22px !important;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.navbar .btn-outline-light:hover,
.navbar .btn-theme-register:hover {
transform: translateY(-2px);
}
.navbar .btn-theme-register {
box-shadow: 0 8px 20px rgba(130, 36, 36, 0.35);
} }
.site-footer { .site-footer {
background: #2F1027; background:#1F2541;
color: #f1e9ee; /* background: #182EA4; */
padding: 60px 0 30px; color: #ffffff;
padding: 64px 0 30px;
border-top: 3px solid #FFEA85;
} }
.site-footer h4 { .site-footer h4 {
color: #fff; color: #FFEA85;
font-weight: 700; font-weight: 700;
margin-bottom: 18px; margin-bottom: 20px;
letter-spacing: 0.02em;
font-size: 16px;
text-transform: uppercase;
} }
.site-footer p { .site-footer p {
color: #d8c7d3; color: #f1f3f9;
line-height: 1.6; line-height: 1.7;
}
.footer-social {
display: flex;
gap: 10px;
margin-top: 22px;
}
.footer-social a {
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(255, 234, 133, 0.1);
color: #FFEA85;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
transition: transform 0.2s ease, background-color 0.2s ease;
}
.footer-social a:hover {
background: #FFEA85;
color: #1F2541;
transform: translateY(-3px);
} }
.user-dropdown-toggle { .user-dropdown-toggle {
@ -80,7 +185,7 @@
} }
.user-dropdown-toggle:hover { .user-dropdown-toggle:hover {
color: #ffc107; color: #FFEA85;
} }
.user-profile-name { .user-profile-name {
@ -92,53 +197,91 @@
white-space: nowrap; white-space: nowrap;
} }
.dropdown-menu {
border: none;
border-radius: 12px;
padding: 8px;
margin-top: 12px !important;
}
.dropdown-item {
border-radius: 8px;
padding: 8px 12px;
font-weight: 500;
transition: background-color 0.15s ease;
}
.dropdown-item:hover {
background-color: #F4F5FA;
}
.footer-links li { .footer-links li {
margin-bottom: 10px; margin-bottom: 10px;
} }
.footer-links a { .footer-links a {
color: #d8c7d3; color: #f1f3f9;
text-decoration: none; text-decoration: none;
transition: .2s; transition: .2s;
} }
.footer-links a:hover { .footer-links a:hover {
color: #FFC107; color: #FFEA85;
padding-left: 4px; padding-left: 4px;
} }
.footer-contact li { .footer-contact li {
margin-bottom: 14px; margin-bottom: 14px;
color: #d8c7d3; color: #f1f3f9;
display: flex; display: flex;
align-items: flex-start; align-items: center;
gap: 10px; gap: 12px;
} }
.footer-contact i { .footer-contact i {
color: #FFC107; color: #FFEA85;
margin-top: 3px; background: rgba(255, 234, 133, 0.12);
width: 34px;
height: 34px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
} }
.footer-contact a { .footer-contact a {
color: #d8c7d3; color: #f1f3f9;
text-decoration: none; text-decoration: none;
} }
.footer-contact a:hover { .footer-contact a:hover {
color: #FFC107; color: #FFEA85;
} }
.site-footer hr { .site-footer hr {
border-color: rgba(255,255,255,.15); border-color: rgba(255,255,255,.2);
margin: 40px 0 20px; margin: 40px 0 20px;
} }
.footer-bottom { .footer-bottom {
color: #b8a6b3; color: #e2e5f3;
font-size: 14px; font-size: 14px;
} }
/* Custom Theme Overrides for Buttons */
.btn-theme-register {
background-color: #F73F52;
color: white;
border: none;
transition: background-color 0.2s;
}
.btn-theme-register:hover {
background-color: #df2c3e;
color: white;
}
.animate { .animate {
animation-duration: 0.2s; animation-duration: 0.2s;
animation-fill-mode: both; animation-fill-mode: both;
@ -163,7 +306,7 @@
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
max-width: 1435px; max-width: 1435px;
} }
} }
</style> </style>
</head> </head>
<body> <body>
@ -184,7 +327,7 @@
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="menu" style="padding-left:214px;"> <div class="collapse navbar-collapse" id="menu">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 align-items-lg-center"> <ul class="navbar-nav ms-auto mb-2 mb-lg-0 align-items-lg-center">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link {{ request()->is('/') ? 'active-page' : '' }}" href="/">Home</a> <a class="nav-link {{ request()->is('/') ? 'active-page' : '' }}" href="/">Home</a>
@ -207,7 +350,7 @@
@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" style="padding-left:325px;"> <div class="dropdown">
<a class="user-dropdown-toggle text-white" <a class="user-dropdown-toggle text-white"
href="#" href="#"
role="button" role="button"
@ -222,7 +365,7 @@
<ul class="dropdown-menu dropdown-menu-md-end shadow animate slideIn" aria-labelledby="userMenu"> <ul class="dropdown-menu dropdown-menu-md-end shadow animate slideIn" aria-labelledby="userMenu">
<li> <li>
<a class="dropdown-item" href="{{ route('profile.view') }}"> <a class="dropdown-item" href="{{ route('profile.view') }}">
<i class="fa-solid fa-user "></i> Profile <i class="fa-solid fa-user"></i> Profile
</a> </a>
</li> </li>
<li><hr class="dropdown-divider"></li> <li><hr class="dropdown-divider"></li>
@ -234,9 +377,10 @@
</ul> </ul>
</div> </div>
@else @else
<div class="d-flex gap-2" style="padding-left:214px;"> <div class="d-flex gap-2">
<a href="/signin" class="btn btn-outline-light btn-sm px-3">Sign In</a> <a href="/signin" class="btn btn-outline-light btn-sm px-3">Sign In</a>
<a href="/signup" class="btn btn-warning btn-sm px-3">Register</a> <!-- Swapped btn-warning for our new custom primary brand color button -->
<a href="/signup" class="btn btn-theme-register btn-sm px-3" style="background: #822424;border: 2px solid #FFF;">Register</a>
</div> </div>
@endif @endif
</li> </li>
@ -245,18 +389,22 @@
</div> </div>
</nav> </nav>
<main> <main>
@yield('content') @yield('content')
</main> </main>
<footer class="site-footer" role="contentinfo" > <footer class="site-footer" role="contentinfo">
<div class="container"> <div class="container">
<div class="row g-4"> <div class="row g-4">
<div class="col-md-4"> <div class="col-md-4">
<h4>Automobile Academic</h4> <h4>Automobile Academic</h4>
<p>Providing excellence in Automotive Engineering Education, Innovation and Research.</p> <p>Providing excellence in Automotive Engineering Education, Innovation and Research.</p>
<div class="footer-social">
<a href="#" aria-label="Facebook"><i class="fa-brands fa-facebook-f"></i></a>
<a href="#" aria-label="Instagram"><i class="fa-brands fa-instagram"></i></a>
<a href="#" aria-label="LinkedIn"><i class="fa-brands fa-linkedin-in"></i></a>
<a href="#" aria-label="YouTube"><i class="fa-brands fa-youtube"></i></a>
</div>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">

View File

@ -4,42 +4,43 @@
<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 */
:root { :root {
--primary: #000000; --theme-navy: #2D355B;
--background: #f5f6fb; --theme-footer-navy: #1F2541;
--theme-red: #822424;
--theme-red-hover: #df2c3e;
--theme-yellow: #FFEA85;
--theme-bg: #F6F6F6;
--sidebar-width: 260px; --sidebar-width: 260px;
--text-color: #333333; --text-dark: #333333;
--sidebar-bg: #5E244E;
} }
* { * {
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;
} }
/* ---------- Sidebar Style ---------- */
.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,34 +50,20 @@
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;
@ -85,14 +72,15 @@
} }
.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,43 +90,54 @@
} }
.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 { .sidebar-user-profile {
color: rgba(255,255,255,.6); 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);
} }
/* ---------- Main Content Layout ---------- */
.main { .main {
margin-left: var(--sidebar-width); margin-left: var(--sidebar-width);
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 { .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;
@ -151,21 +150,24 @@
.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 */
.sidebar-overlay { .sidebar-overlay {
display: none; display: none;
position: fixed; position: fixed;
@ -173,7 +175,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;
@ -184,7 +186,6 @@
opacity: 1; opacity: 1;
} }
/* ---------- Responsive Media Queries (Mobile & Tablets) ---------- */
@media (max-width: 991px) { @media (max-width: 991px) {
.sidebar { .sidebar {
left: calc(-1 * var(--sidebar-width)); left: calc(-1 * var(--sidebar-width));
@ -196,7 +197,7 @@
.main { .main {
margin-left: 0; margin-left: 0;
padding: 90px 20px 20px 20px; padding: 85px 20px 20px 20px;
width: 100%; width: 100%;
} }
@ -213,22 +214,23 @@
<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 -->
<div class="mobile-user-profile"> <div class="mobile-user-profile">
@if(Auth::check()) @if(session()->has('student_id'))
<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">{{ session('student_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="{{ route('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">
@ -238,114 +240,100 @@
</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="/" 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>
<!-- Overlay dim background element -->
<div class="sidebar-overlay" id="sidebarOverlay"></div> <div class="sidebar-overlay" id="sidebarOverlay"></div>
<!-- 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) -->
<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="{{ route('StudentProfile') }}" class="nav-link {{ request()->routeIs('StudentProfile') ? 'active' : '' }}">
<i class="fa-solid fa-user"></i>Student Profile <i class="fa-solid fa-user"></i> Student Profile
</a> </a>
</nav> </nav>
<div class="sidebar-user-profile"> <div class="sidebar-user-profile">
@if(Auth::check()) @if(session()->has('student_id'))
@php <div class="dropdown dropup">
$displayName = Auth::user()->first_name . ' ' . Auth::user()->last_name; <a class="user-dropdown-toggle dropdown-toggle" href="#" role="button" id="userMenuDesktop" data-bs-toggle="dropdown" aria-expanded="false">
@endphp <i class="fa-solid fa-circle-user" style="font-size: 24px; color: var(--theme-yellow);"></i>
<div class="dropdown"> <span class="text-truncate" style="max-width: 150px;">{{ session('student_name') }}</span>
<a class="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>
<span class="user-profile-name text-truncate" style="max-width: 160px;">{{ $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">
<li> <li>
<a class="dropdown-item" href="/StudentProfile"> <a class="dropdown-item" href="{{ route('StudentProfile') }}">
<i class="fa-solid fa-user me-2"></i> Profile <i class="fa-solid fa-user me-2"></i> Profile
</a> </a>
</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="/" class="btn btn-outline-light btn-sm w-100">Sign In</a>
<a href="/signup" class="btn btn-warning btn-sm w-50">Register</a>
</div> </div>
@endif @endif
</div> </div>
</aside> </aside>
<!-- Main Content Area -->
<main class="main"> <main class="main">
@yield('content') @yield('content')
</main> </main>
<!-- Sidebar Toggle JavaScript --> <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 if(toggleBtn) {
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 if(overlay) {
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> // Logout Logic
function submitLogout() { function submitLogout() {
const tokenEl = document.querySelector('meta[name="csrf-token"]'); const tokenEl = document.querySelector('meta[name="csrf-token"]');
@ -357,16 +345,10 @@
'X-CSRF-TOKEN': tokenEl ? tokenEl.getAttribute('content') : '' 'X-CSRF-TOKEN': tokenEl ? tokenEl.getAttribute('content') : ''
} }
}) })
.then(res => { .then(res => res.json())
if (!res.ok) {
return res.text().then(text => { throw new Error(text) });
}
return res.json();
})
.then(data => { .then(data => {
if (data.success) { if (data.success) {
alert('Logged out successfully!'); window.location.href = '/';
window.location.href = '/students';
} else { } else {
alert('Logout failed. Please try again.'); alert('Logout failed. Please try again.');
} }
@ -375,8 +357,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>

View File

@ -0,0 +1,83 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Password Reset OTP - Academy</title>
<style>
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { -ms-interpolation-mode: bicubic; border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; background-color: #f4f7f6; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
</style>
</head>
<body style="margin: 0; padding: 0; background-color: #f4f7f6;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" style="padding: 40px 10px;">
<!-- Main Container -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 550px; background-color: #ffffff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.05);">
<!-- Header / Logo Area -->
<tr>
<td align="center" style="padding: 30px 20px; background-color: #1a2b4c;">
<!-- Academy Logo / Branding -->
<h2 style="color: #ffffff; margin: 0; font-size: 24px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;">
ACADEMY
</h2>
</td>
</tr>
<!-- Body Content -->
<tr>
<td style="padding: 40px 30px; text-align: center;">
<h1 style="color: #20396b; font-size: 22px; font-weight: 700; margin-top: 0; margin-bottom: 12px;">
Reset Your Password
</h1>
<p style="color: #683636; font-size: 15px; line-height: 22px; margin-bottom: 25px;">
Hello,<br>
We received a request to reset the password for your Academy account. Use the Verification Code (OTP) below to proceed.
</p>
<!-- OTP Box -->
<div style="background-color: #f0f4f9; border: 2px dashed #0236b9; border-radius: 8px; padding: 18px; margin: 20px 0; display: inline-block; width: 80%;">
<span style="font-size: 32px; font-weight: 800; color: #0236b9; letter-spacing: 6px; font-family: 'Courier New', Courier, monospace;">
{{ $otp }}
</span>
</div>
<p style="color: #888888; font-size: 13px; line-height: 18px; margin-top: 25px;">
This OTP is valid for <strong>10 minutes</strong>. If you did not request a password reset, please ignore this email.
</p>
</td>
</tr>
<!-- Divider -->
<tr>
<td style="padding: 0 30px;">
<hr style="border: none; border-top: 1px solid #eeeeee; margin: 0;">
</td>
</tr>
<!-- Footer -->
<tr>
<td style="padding: 25px 30px; text-align: center; background-color: #fafafa;">
<p style="color: #999999; font-size: 12px; margin: 0 0 8px 0;">
Regards,<br>
<strong>Academy Learning Team</strong>
</p>
<p style="color: #cccccc; font-size: 11px; margin: 0;">
&copy; {{ date('Y') }} Academy. All rights reserved.
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

View File

@ -0,0 +1,219 @@
@extends('layouts.studentportalnav')
@section('title', 'Module Details')
@section('content')
<style>
:root {
--theme-navy: #2D355B;
--theme-navy-dark: #1F2541;
--theme-red: #822424;
--theme-red-hover: #df2c3e;
--theme-yellow: #FFEA85;
--bg-light: #F6F6F6;
--white: #ffffff;
}
body {
background: var(--bg-light);
font-family: 'Segoe UI', sans-serif;
}
.main-portal-content {
padding: 10px 5px;
min-height: 100vh;
}
/* Header styling */
.module-header {
background: var(--theme-navy);
color: var(--white);
border-radius: 16px;
padding: 25px 30px;
margin-bottom: 25px;
border-left: 5px solid var(--theme-red);
}
/* Video Wrapper */
.video-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
height: 0;
overflow: hidden;
border-radius: 14px;
background: #000;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
/* Card Styling */
.content-card {
border: 1px solid #e2e8f0;
border-radius: 14px;
background: var(--white);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
margin-bottom: 20px;
}
/* Lesson List */
.lesson-list .list-group-item {
border: none;
border-bottom: 1px solid #f1f5f9;
padding: 14px 20px;
transition: all 0.2s;
}
.lesson-list .list-group-item:hover {
background-color: #f8fafc;
}
.lesson-list .list-group-item.active {
background-color: rgba(130, 36, 36, 0.08);
color: var(--theme-red);
font-weight: 600;
border-left: 4px solid var(--theme-red);
}
.btn-theme-red {
background-color: var(--theme-red) !important;
border-color: var(--theme-red) !important;
color: #fff !important;
border-radius: 8px;
font-weight: 600;
}
.btn-theme-red:hover {
background-color: var(--theme-red-hover) !important;
}
@media (min-width: 768px) {
.main-portal-content { padding: 15px; }
}
</style>
<div class="main-portal-content">
<div class="container-fluid">
<!-- Back Button & Header -->
<div class="mb-3">
<a href="{{ route('mycourse') }}" class="text-decoration-none text-muted small fw-semibold">
<i class="fa fa-arrow-left me-1"></i> Back to My Course
</a>
</div>
<div class="module-header d-flex flex-wrap align-items-center justify-content-between gap-3">
<div>
<span class="badge bg-danger mb-2">Module {{ $moduleId ?? 1 }}</span>
<h2 class="fw-bold mb-1">Introduction & Fundamentals</h2>
<p class="mb-0 opacity-75 small">Learn the basic concepts, core principles, and foundational theories.</p>
</div>
<div>
<button class="btn btn-outline-light btn-sm px-3">
<i class="fa-solid fa-check-circle me-1"></i> Mark as Complete
</button>
</div>
</div>
<!-- Main Content Area -->
<div class="row g-4">
<!-- LEFT: Video Player & Module Details -->
<div class="col-lg-8 col-12">
<!-- Video Container -->
<div class="content-card p-2">
<div class="video-container">
<!-- Sample Video URL (replace with actual video stream/iframe) -->
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="Lesson Video" allowfullscreen></iframe>
</div>
</div>
<!-- Module Description Card -->
<div class="content-card p-4">
<h4 class="fw-bold mb-3" style="color: var(--theme-navy);">Overview & Description</h4>
<p class="text-secondary lh-base">
In this module, you will explore the essential foundational topics. We will cover step-by-step concepts to help you build a strong understanding before moving on to the advanced practical modules.
</p>
<hr class="my-4" style="color: #cbd5e1;">
<h5 class="fw-bold mb-3" style="color: var(--theme-navy);">Resources & Downloads</h5>
<div class="d-flex flex-wrap gap-2">
<a href="#" class="btn btn-light border btn-sm text-dark">
<i class="fa-solid fa-file-pdf text-danger me-2"></i> Lecture Notes.pdf
</a>
<a href="#" class="btn btn-light border btn-sm text-dark">
<i class="fa-solid fa-file-lines text-primary me-2"></i> Assignment Guide.docx
</a>
</div>
</div>
<!-- Navigation Buttons -->
<div class="d-flex justify-content-between align-items-center mb-4">
<button class="btn btn-secondary btn-sm px-4 py-2" disabled>
<i class="fa fa-chevron-left me-1"></i> Previous Module
</button>
<a href="#" class="btn btn-theme-red btn-sm px-4 py-2">
Next Module <i class="fa fa-chevron-right ms-1"></i>
</a>
</div>
</div>
<!-- RIGHT: Lesson Playlist Sidebar -->
<div class="col-lg-4 col-12">
<div class="content-card overflow-hidden">
<div class="p-3 border-bottom bg-light">
<h6 class="fw-bold mb-0" style="color: var(--theme-navy);">
<i class="fa-solid fa-list-ul me-2" style="color: var(--theme-red);"></i> Course Playlist
</h6>
</div>
<ul class="list-group list-group-flush lesson-list">
<li class="list-group-item active d-flex justify-content-between align-items-center">
<div>
<i class="fa-solid fa-circle-play me-2"></i>
<span>1. Introduction to Course</span>
</div>
<span class="badge bg-danger rounded-pill">10 mins</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<div>
<i class="fa-regular fa-circle-play me-2 text-muted"></i>
<span>2. Core Concepts Explained</span>
</div>
<span class="badge bg-secondary rounded-pill">15 mins</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<div>
<i class="fa-regular fa-circle-play me-2 text-muted"></i>
<span>3. Practical Application</span>
</div>
<span class="badge bg-secondary rounded-pill">20 mins</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<div>
<i class="fa-solid fa-lock me-2 text-muted"></i>
<span class="text-muted">4. Summary & Quiz</span>
</div>
<span class="badge bg-light text-dark border">Locked</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
@endsection

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,114 +89,137 @@ 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 */
@media (min-width: 768px) { @media (min-width: 768px) {
.main-portal-content { .main-portal-content { padding: 10px; }
padding: 34px; .hero { padding: 40px; }
} .course-card img { height: 280px; }
.hero {
padding: 45px;
}
.course-card img {
height: 280px;
}
}
@media (min-width: 992px) {
.main-portal-content {
margin-left: 18px;
}
} }
</style> </style>
<div class="main-portal-content"> <div class="main-portal-content">
<div class="container-fluid"> <div class="container-fluid">
@if($course)
{{-- Dynamic Image URL Handler --}}
@php
$imageSrc = Str::startsWith($course->image, ['http://', 'https://'])
? $course->image
: asset('storage/' . $course->image);
@endphp
<!-- Hero Section --> <!-- Hero Section -->
<div class="hero"> <div class="hero">
<div class="row align-items-center"> <div class="row align-items-center">
<div class="col-lg-9 col-md-8 text-start"> <div class="col-lg-9 col-md-8 text-start">
<h1 class="fw-bold display-6 mb-2">Diploma in Automotive Engineering</h1> <h1 class="fw-bold display-6 mb-2">{{ $course->title }}</h1>
<p class="lead mb-4 small opacity-75">Welcome back! Continue your learning journey and complete all modules.</p> <p class="lead mb-4 small opacity-75">Welcome back! Continue your learning journey and complete all modules.</p>
<a href="#" class="btn btn-continue px-4 py-2 fw-semibold shadow-sm"> <a href="#" class="btn btn-continue px-4 py-2 fw-semibold shadow-sm">
<i class="fa fa-play me-2"></i> Continue Learning <i class="fa fa-play me-2"></i> Continue Learning
</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-graduation-cap" style="font-size: 140px; opacity: 0.35; color: #8C080F;"></i>
</div> </div>
</div> </div>
</div> </div>
@ -215,110 +232,59 @@ body {
<!-- Main Course Card --> <!-- Main Course Card -->
<div class="card course-card"> <div class="card course-card">
<img src="https://images.unsplash.com/photo-1486262715619-67b85e0b08d3?auto=format&fit=crop&w=1200&q=80" alt="Course Image"> <img src="{{ $imageSrc }}" alt="{{ $course->title }}" onerror="this.onerror=null;this.src='https://images.unsplash.com/photo-1486262715619-67b85e0b08d3?auto=format&fit=crop&w=1200&q=80';">
<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);">{{ $course->course_code ?? $course->title }}</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-user me-1" style="color: var(--theme-red);"></i> {{ $course->author ?? 'Instructor' }}
</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);">
{{ $course->badge ?? 'Active Course' }}
</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. {{ $course->desc ?? 'No description available for this course.' }}
</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);">0%</span>
</div> </div>
<div class="progress"> <div class="progress">
<div class="progress-bar" style="width:55%"></div> <div class="progress-bar" style="width:0%"></div>
</div> </div>
</div> </div>
</div> </div>
</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>
<!-- Modules Sub-Grid --> <!-- Modules Sub-Grid (Sample Modules Interface) -->
<div class="row g-4"> <div class="row g-4">
<!-- Module 1 -->
<div class="col-md-6 col-12"> <div class="col-md-6 col-12">
<div class="card module-card h-100"> <div class="card module-card h-100">
<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);">Introduction & Fundamentals</h6>
<span class="status completed">Completed</span>
</div>
<p class="text-muted small">Learn engine parts and working principles.</p>
</div>
<div class="mt-3">
<button class="btn btn-purple w-100 btn-sm py-2">Review Module</button>
</div>
</div>
</div>
</div>
<!-- Module 2 -->
<div class="col-md-6 col-12">
<div class="card module-card h-100">
<div class="card-body p-4 d-flex flex-column justify-content-between">
<div>
<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>
<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">Basic concepts and core theories.</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 type="button" onclick="goToModule(1)" class="btn btn-theme-red w-100 btn-sm py-2">
</div> Continue Learning
</div> </button>
</div>
</div>
<!-- Module 3 -->
<div class="col-md-6 col-12">
<div class="card module-card h-100">
<div class="card-body p-4 d-flex flex-column justify-content-between">
<div>
<div class="d-flex justify-content-between align-items-start gap-2 mb-2">
<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>
</div>
<p class="text-muted small">Complete previous module to unlock.</p>
</div>
<div class="mt-3">
<button class="btn btn-secondary w-100 btn-sm py-2" disabled>Locked</button>
</div>
</div>
</div>
</div>
<!-- Module 4 -->
<div class="col-md-6 col-12">
<div class="card module-card h-100">
<div class="card-body p-4 d-flex flex-column justify-content-between">
<div>
<div class="d-flex justify-content-between align-items-start gap-2 mb-2">
<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>
</div>
<p class="text-muted small">Learn EV and Hybrid systems.</p>
</div>
<div class="mt-3">
<button class="btn btn-secondary w-100 btn-sm py-2" disabled>Locked</button>
</div> </div>
</div> </div>
</div> </div>
@ -332,10 +298,10 @@ body {
<div class="row g-3"> <div class="row g-3">
<div class="col-12"> <div class="col-12">
<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-layer-group"></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);">{{ $course->level ?? 'General' }}</h5>
<span class="text-muted small">Modules Available</span> <span class="text-muted small">Course Level</span>
</div> </div>
</div> </div>
</div> </div>
@ -344,7 +310,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);">{{ $course->duration ?? 'N/A' }}</h5>
<span class="text-muted small">Course Duration</span> <span class="text-muted small">Course Duration</span>
</div> </div>
</div> </div>
@ -354,8 +320,8 @@ 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);">{{ $course->status ?? 'Enrolled' }}</h5>
<span class="text-muted small">Qualification</span> <span class="text-muted small">Status</span>
</div> </div>
</div> </div>
</div> </div>
@ -364,8 +330,29 @@ body {
</div> <!-- End Row --> </div> <!-- End Row -->
@else
<!-- Empty State: When no course is assigned -->
<div class="row justify-content-center py-5">
<div class="col-md-8 text-center">
<div class="p-5 rounded-4 shadow-sm bg-white border">
<i class="fas fa-graduation-cap fa-4x text-muted mb-3"></i>
<h3 class="fw-bold text-dark mb-2">No Assigned Course Found</h3>
<p class="text-muted mb-0">You do not have any course assigned to your profile yet. Please contact the administration for assistance.</p>
</div>
</div>
</div>
@endif
</div> </div>
</div> </div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <script>
function goToModule(moduleId) {
window.location.href = "{{ url('/module') }}/" + moduleId;
}
</script>
@endsection @endsection

View File

@ -2,89 +2,144 @@
@section('content') @section('content')
<style> <style>
.profile-card {
border: none;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
background: #ffffff;
}
.profile-header {
background: linear-gradient(135deg, #3d0c3d 0%, #5c1d5c 100%); :root {
padding: 1.25rem 1.5rem; --primary-navy: #0F2C59;
border-top-left-radius: 12px !important; --accent-red: #822424;
border-top-right-radius: 12px !important; --accent-red-hover: #6a2525;
--bg-light: #F4F6F9;
--text-main: #1E293B;
--text-muted: #64748B;
--border-color: rgba(15, 44, 89, 0.1);
} }
.profile-card {
border: 1px solid var(--border-color);
border-radius: 16px;
box-shadow: 0 10px 30px rgba(15, 44, 89, 0.08) !important;
background: #ffffff;
overflow: hidden;
}
.profile-header {
background: linear-gradient(135deg, var(--primary-navy) 0%, #1a3d73 100%);
padding: 1.5rem 1.75rem;
border: none;
}
.profile-info-row { .profile-info-row {
padding: 0.9rem 0; padding: 1.1rem 0;
border-bottom: 1px solid #f1f1f4; border-bottom: 1px solid #f1f5f9;
transition: background 0.2s ease;
} }
.profile-info-row:hover {
background-color: #f8fafc;
}
.profile-info-row:last-of-type { .profile-info-row:last-of-type {
border-bottom: none; border-bottom: none;
} }
.profile-label { .profile-label {
color: #6c757d; color: var(--text-muted);
font-weight: 600; font-weight: 600;
font-size: 0.95rem; font-size: 0.95rem;
} }
.profile-value { .profile-value {
color: #212529; color: var(--text-main);
font-weight: 500; font-weight: 600;
font-size: 0.95rem; font-size: 1rem;
} }
/* ===== Theme Buttons ===== */
.btn-edit { .btn-edit {
background-color: #5c1d5c; background-color: var(--accent-red);
color: white; color: #ffffff;
border-radius: 6px; border-radius: 30px;
padding: 0.5rem 1.5rem; padding: 0.6rem 2rem;
font-weight: 500; font-weight: 600;
transition: all 0.2s ease; transition: all 0.3s ease;
border: none; border: none;
text-decoration: none; text-decoration: none;
} }
.btn-edit:hover { .btn-edit:hover {
background-color: #3d0c3d; background-color: var(--accent-red-hover);
color: white; color: #ffffff;
box-shadow: 0 4px 10px rgba(92, 29, 92, 0.3); box-shadow: 0 6px 15px rgba(130, 36, 36, 0.3);
transform: translateY(-2px);
}
.btn-save {
background-color: var(--accent-red);
color: #ffffff;
border-radius: 6px;
font-weight: 600;
padding: 0.5rem 1.5rem;
border: none;
transition: all 0.2s ease;
}
.btn-save:hover {
background-color: var(--accent-red-hover);
color: #ffffff;
}
/* Form & Input Enhancements */
.form-control:focus {
border-color: var(--primary-navy);
box-shadow: 0 0 0 0.25rem rgba(15, 44, 89, 0.15);
} }
</style> </style>
<div class="container mt-5 mb-5"> <div class="container py-5">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-md-8"> <div class="col-md-8">
{{-- Alert Success Message --}}
@if(session('success')) @if(session('success'))
<div class="alert alert-success alert-dismissible fade show mb-4" role="alert" style="border-radius: 8px;"> <div class="alert alert-success alert-dismissible fade show mb-4 border-0 shadow-sm" role="alert" style="border-radius: 10px; background-color: #d1e7dd; color: #0f5132;">
<i class="bi bi-check-circle-fill me-2"></i> {{ session('success') }} <i class="fa-solid fa-circle-check me-2"></i> {{ session('success') }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div> </div>
@endif @endif
{{-- Main Profile Card --}}
<div class="card profile-card"> <div class="card profile-card">
<!-- Purple Header --> <!-- Navy Header -->
<div class="card-header profile-header text-white"> <div class="card-header profile-header text-white d-flex align-items-center justify-content-between">
<h4 class="mb-0 fw-bold" style="font-size: 1.25rem;">User Profile Dashboard</h4> <h4 class="mb-0 fw-bold" style="font-size: 1.25rem; letter-spacing: 0.02em;">
<i class="fa-solid fa-user-gear me-2"></i>User Profile Dashboard
</h4>
<span class="badge bg-light text-dark fw-semibold px-3 py-2 rounded-pill small">Active Student</span>
</div> </div>
<div class="card-body p-4"> <div class="card-body p-4 p-md-5">
<!-- Name -->
<!-- Full Name -->
<div class="row profile-info-row align-items-center"> <div class="row profile-info-row align-items-center">
<div class="col-md-4 profile-label">Full Name:</div> <div class="col-md-4 profile-label">
<i class="fa-solid fa-id-card me-2 " style="color: #822424;"></i>Full Name:
</div>
<div class="col-md-8 profile-value">{{ $user->first_name . ' ' . $user->last_name }}</div> <div class="col-md-8 profile-value">{{ $user->first_name . ' ' . $user->last_name }}</div>
</div> </div>
<!-- Email --> <!-- Email Address -->
<div class="row profile-info-row align-items-center"> <div class="row profile-info-row align-items-center">
<div class="col-md-4 profile-label">Email Address:</div> <div class="col-md-4 profile-label">
<i class="fa-solid fa-envelope me-2 " style="color: #822424;"></i>Email Address:
</div>
<div class="col-md-8 profile-value">{{ $user->email }}</div> <div class="col-md-8 profile-value">{{ $user->email }}</div>
</div> </div>
<!-- Phone --> <!-- Phone Number -->
<div class="row profile-info-row align-items-center"> <div class="row profile-info-row align-items-center">
<div class="col-md-4 profile-label">Phone Number:</div> <div class="col-md-4 profile-label">
<i class="fa-solid fa-phone me-2 " style="color: #822424;"></i>Phone Number:
</div>
<div class="col-md-8 profile-value"> <div class="col-md-8 profile-value">
{{ $user->phone ?? 'Not Provided' }} {{ $user->phone ?? 'Not Provided' }}
</div> </div>
@ -92,7 +147,9 @@
<!-- Created At --> <!-- Created At -->
<div class="row profile-info-row align-items-center"> <div class="row profile-info-row align-items-center">
<div class="col-md-4 profile-label">Account Created:</div> <div class="col-md-4 profile-label">
<i class="fa-solid fa-calendar-plus me-2 t " style="color: #822424;"></i>Account Created:
</div>
<div class="col-md-8 profile-value text-muted"> <div class="col-md-8 profile-value text-muted">
{{ $user->created_at ? $user->created_at->format('Y-m-d H:i') : 'N/A' }} {{ $user->created_at ? $user->created_at->format('Y-m-d H:i') : 'N/A' }}
</div> </div>
@ -100,44 +157,42 @@
<!-- Updated At --> <!-- Updated At -->
<div class="row profile-info-row align-items-center"> <div class="row profile-info-row align-items-center">
<div class="col-md-4 profile-label">Last Updated:</div> <div class="col-md-4 profile-label">
<i class="fa-solid fa-clock-rotate-left me-2 " style="color: #822424;"></i>Last Updated:
</div>
<div class="col-md-8 profile-value text-muted"> <div class="col-md-8 profile-value text-muted">
{{ $user->updated_at ? $user->updated_at->format('Y-m-d H:i') : 'N/A' }} {{ $user->updated_at ? $user->updated_at->format('Y-m-d H:i') : 'N/A' }}
</div> </div>
</div> </div>
<!-- Edit Button --> <!-- Edit Profile Trigger Button -->
<div class="mt-4 text-end"> <div class="mt-4 pt-2 text-end">
<!-- <a href="#" class="btn btn-edit">Edit Profile</a> --> <button type="button" class="btn btn-edit shadow-sm" data-bs-toggle="modal" data-bs-target="#editProfileModal">
<div class="mt-4 text-end"> <i class="fa-solid fa-pen-to-square me-2"></i>Edit Profile
<button type="button" class="btn btn-edit" data-bs-toggle="modal" data-bs-target="#editProfileModal">
Edit Profile
</button> </button>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
</div> </div>
@endsection
{{-- ===================== EDIT PROFILE MODAL ===================== --}}
<div class="modal fade" id="editProfileModal" tabindex="-1" aria-labelledby="editProfileModalLabel" aria-hidden="true"> <div class="modal fade" id="editProfileModal" tabindex="-1" aria-labelledby="editProfileModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered"> <div class="modal-dialog modal-dialog-centered">
<div class="modal-content" style="border-radius: 12px; overflow: hidden;"> <div class="modal-content border-0 shadow-lg" style="border-radius: 16px; overflow: hidden;">
<!-- Modal Header (Oyage purple theme ekata match kala) --> <!-- Modal Header (Navy Theme) -->
<div class="modal-header text-white" style="background: linear-gradient(135deg, #3d0c3d 0%, #5c1d5c 100%);"> <div class="modal-header text-white" style="background: linear-gradient(135deg, #0F2C59 0%, #1a3d73 100%);">
<h5 class="modal-title fw-bold" id="editProfileModalLabel">Update Profile Details</h5> <h5 class="modal-title fw-bold fs-6" id="editProfileModalLabel">
<i class="fa-solid fa-user-pen me-2"></i>Update Profile Details
</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button> <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div> </div>
<!-- Update Form -->
<form action="{{ route('profile.update') }}" method="POST"> <form action="{{ route('profile.update') }}" method="POST">
@csrf @csrf
@method('PUT') @method('PUT')
@ -146,31 +201,32 @@
<!-- First Name Input --> <!-- First Name Input -->
<div class="mb-3"> <div class="mb-3">
<label for="first_name" class="form-label fw-bold" style="color: #6c757d;">First Name</label> <label for="first_name" class="form-label fw-semibold small" style="color: var(--text-muted);">First Name</label>
<input type="text" class="form-control" id="first_name" name="first_name" value="{{ $user->first_name }}" required> <input type="text" class="form-control form-control-lg fs-6" id="first_name" name="first_name" value="{{ $user->first_name }}" required>
</div> </div>
<!-- Last Name Input --> <!-- Last Name Input -->
<div class="mb-3"> <div class="mb-3">
<label for="last_name" class="form-label fw-bold" style="color: #6c757d;">Last Name</label> <label for="last_name" class="form-label fw-semibold small" style="color: var(--text-muted);">Last Name</label>
<input type="text" class="form-control" id="last_name" name="last_name" value="{{ $user->last_name }}" required> <input type="text" class="form-control form-control-lg fs-6" id="last_name" name="last_name" value="{{ $user->last_name }}" required>
</div> </div>
<!-- Phone Input --> <!-- Phone Input -->
<div class="mb-3"> <div class="mb-3">
<label for="phone" class="form-label fw-bold" style="color: #6c757d;">Phone Number</label> <label for="phone" class="form-label fw-semibold small" style="color: var(--text-muted);">Phone Number</label>
<input type="text" class="form-control" id="phone" name="phone" value="{{ $user->phone }}"> <input type="text" class="form-control form-control-lg fs-6" id="phone" name="phone" value="{{ $user->phone }}">
</div> </div>
</div> </div>
<!-- Modal Footer Buttons --> <!-- Modal Footer -->
<div class="modal-footer bg-light"> <div class="modal-footer bg-light px-4">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button> <button type="button" class="btn btn-secondary border-0 rounded-3" data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn text-white" style="background-color: #5c1d5c;">Save Changes</button> <button type="submit" class="btn btn-save rounded-3">Save Changes</button>
</div> </div>
</form> </form>
</div> </div>
</div> </div>
</div> </div>
@endsection

View File

@ -4,525 +4,420 @@
@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">
<!-- html2pdf Library for Client-side PDF Generation -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<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;
}
.status-fail {
color: #dc3545;
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; .progress-bar-red {
border-radius:20px; background-color: var(--theme-red) !important;
}
.align-items-stretch {
align-items: stretch !important;
padding-top: 38px;
} }
/* ======================= /* =======================
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 --> <!-- Printable Area Container -->
<div id="pdf-download-area">
<!-- 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>{{ $averageMarks ?? 0 }}%</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>{{ $gpa ?? '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>{{ $passedModules ?? 0 }} / {{ $totalModules ?? 0 }}</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 d-flex justify-content-between align-items-center">
<div class="table-head"> <h5 class="mb-0 fw-bold">
<h4 class="mb-0">
Semester Results Semester Results
</h5>
</h4> @if(isset($results) && $results->isNotEmpty())
<span class="badge bg-light text-dark">
{{ optional($results->first())->academic_year }} | {{ optional($results->first())->semester }}
</span>
@endif
</div> </div>
<table class="table table-hover"> <div class="table-responsive">
<table class="table table-hover align-middle">
<thead> <thead>
<tr> <tr>
<th>Module Code</th>
<th>Module</th> <th>Module Name</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>
@forelse ($results ?? [] as $item)
<tr> <tr>
<td class="fw-bold" style="color: var(--theme-navy);">{{ $item->module_code }}</td>
<td>Engine Technology</td> <td class="fw-semibold">{{ $item->module_name }}</td>
<td>{{ $item->marks }}</td>
<td>91</td>
<td> <td>
@php
$gradeClass = 'b';
$upperGrade = strtoupper($item->grade ?? '');
<span class="grade a"> if(str_contains($upperGrade, 'A')) {
$gradeClass = 'a';
A+ } elseif(str_contains($upperGrade, 'F')) {
$gradeClass = 'fail';
</span> } elseif(str_contains($upperGrade, 'C')) {
$gradeClass = 'c';
}
@endphp
<span class="grade {{ $gradeClass }}">{{ $item->grade }}</span>
</td>
<td>
@if(strtolower($item->status ?? '') == 'pass')
<span class="status-pass"><i class="fas fa-check-circle me-1"></i>Pass</span>
@else
<span class="status-fail"><i class="fas fa-times-circle me-1"></i>Fail</span>
@endif
</td> </td>
<td>Pass</td>
</tr> </tr>
@empty
<tr> <tr>
<td colspan="5" class="text-center py-4 text-muted">
<td>Brake Systems</td> <i class="fas fa-info-circle me-1"></i> No result records found for your account.
<td>84</td>
<td>
<span class="grade a">
A
</span>
</td> </td>
<td>Pass</td>
</tr> </tr>
@endforelse
<tr>
<td>Electrical Systems</td>
<td>79</td>
<td>
<span class="grade b">
B+
</span>
</td>
<td>Pass</td>
</tr>
<tr>
<td>Transmission Systems</td>
<td>74</td>
<td>
<span class="grade b">
B
</span>
</td>
<td>Pass</td>
</tr>
<tr>
<td>Workshop Practice</td>
<td>88</td>
<td>
<span class="grade a">
A
</span>
</td>
<td>Pass</td>
</tr>
<tr>
<td>Industrial Safety</td>
<td>81</td>
<td>
<span class="grade a">
A-
</span>
</td>
<td>Pass</td>
</tr>
</tbody> </tbody>
</table> </table>
</div>
</div>
</div> </div>
<!-- Performance --> <!-- Performance & Download Section (Side by Side) -->
<div class="row g-4 align-items-stretch">
<div class="result-card mt-4">
<!-- Overall Performance Card -->
<div class="col-md-6">
<div class="result-card h-100 mt-0">
<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 d-flex flex-column justify-content-center">
<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);">{{ $averageMarks ?? 0 }}%</span>
Course Completion </div>
</p>
<div class="progress mb-4"> <div class="progress mb-4">
<div class="progress-bar progress-bar-navy" style="width: {{ $averageMarks ?? 0 }}%"></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>
</div> <!-- Download Section Card -->
<div class="col-md-6">
</div> <div class="download-card h-100 mt-0 flex-column justify-content-between align-items-start text-start">
</div>
<!-- Download -->
<div class="download-card">
<div> <div>
<h4 class="mb-3">Download Official Result Sheet</h4>
<h4> <p class="mb-4">
Get your latest semester examination results in official PDF format.
Download Official Result Sheet
</h4>
<p class="mb-0">
Download your latest semester examination results in PDF format.
</p> </p>
</div> </div>
<button class="btn btn-result"> <button id="download-pdf-btn" onclick="generatePDF()" class="btn btn-result shadow-sm w-100">
<i class="fas fa-download me-2"></i>Download PDF
<i class="fas fa-download"></i>
Download PDF
</button> </button>
</div>
</div>
</div> </div>
</div> </div>
<!-- JavaScript to handle PDF Download -->
<script>
function generatePDF() {
const element = document.getElementById('pdf-download-area');
const button = document.getElementById('download-pdf-btn');
button.disabled = true;
button.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Generating PDF...';
const options = {
margin: [10, 10, 10, 10],
filename: 'Official_Result_Sheet.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2, useCORS: true },
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
};
html2pdf().set(options).from(element).save().then(() => {
button.disabled = false;
button.innerHTML = '<i class="fas fa-download me-2"></i>Download PDF';
}).catch(err => {
console.error(err);
button.disabled = false;
button.innerHTML = '<i class="fas fa-download me-2"></i>Download PDF';
});
}
</script>
@endsection @endsection

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: #822424 !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>

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 */
@ -109,14 +110,14 @@
width: 100%; width: 100%;
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
background: #5E244E; background: #822424;
border: none; border: none;
color: white; color: white;
transition: background 0.2s ease-in-out, transform 0.1s ease; transition: background 0.2s ease-in-out, transform 0.1s ease;
} }
.btn-primary:hover, .btn-primary:focus { .btn-primary:hover, .btn-primary:focus {
background: #4a1c3e; background: #822424;
color: white; color: white;
} }

View File

@ -5,74 +5,305 @@
@section('content') @section('content')
<style> <style>
:root{ :root {
--primary:#5E244E; /* Premium Modern Automotive Palette matched from previous page */
--secondary:#8B3A74; --primary: #3E51B8; /* Tech Blue */
--light:#f8f4f7; --primary-light: #0a67df; /* Vibrant Electric Blue */
--secondary: #BC1A1A; /* Deep Racing Red */
--secondary-hover: #822424; /* Dark Burnt Red */
--accent-dark: #753939; /* Muted Crimson */
--accent-orange: #e36414; /* Warning/Industrial Orange */
--accent-yellow: #FFE618; /* High-Visibility Electric Yellow */
--bg-light: #F8FAFC; /* Soft slate light gray */
/* Semantic Adjustments */
--text-main: #1E293B; /* Slate dark grey */
--text-muted: #64748B; /* Neutral gray */
--card-border: rgba(62, 81, 184, 0.1);
} }
body { body {
font-family: Arial, Helvetica, sans-serif; font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
color: var(--text-main);
} }
.hero{ h1, h2, h3, h4, h5, h6 {
background:linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.65)), font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
url('https://images.pexels.com/photos/3802510/pexels-photo-3802510.jpeg');
background-size:cover;
background-position:center;
color:#fff;
padding:80px 0;
text-align:center;
} }
.portal-card{ .hero {
border:none; position: relative;
border-radius:15px; overflow: hidden;
transition:.4s cubic-bezier(0.165, 0.84, 0.44, 1); color: #fff;
box-shadow:0 5px 20px rgba(0,0,0,.08); padding: 76px 0 64px;
border: 1px solid #efeff4; text-align: center;
min-height: 420px;
display: flex;
align-items: center;
} }
.portal-card:hover{ .hero-slideshow {
transform:translateY(-8px); position: absolute;
border-color: var(--primary); inset: 0;
box-shadow: 0 15px 30px rgba(94, 36, 78, 0.1); z-index: 0;
} }
.portal-icon{ .hero-slide {
width:70px; position: absolute;
height:70px; inset: 0;
background:#5E244E; background-position: center;
color:#fff; background-size: cover;
border-radius:50%; opacity: 0;
display:flex; transform: scale(1);
align-items:center; transition: opacity 2s ease-in-out, transform 7s ease-out;
justify-content:center;
font-size:28px;
margin:auto;
transition: 0.4s ease;
} }
.portal-card:hover .portal-icon { .hero-slide.active {
background: var(--secondary); opacity: 1;
transform: scale(1.1); transform: scale(1.09);
} }
.btn-portal{ .hero-overlay {
background:#5E244E; position: absolute;
color:#fff; inset: 0;
padding:12px 35px; z-index: 1;
border: none; background: linear-gradient(rgba(214, 218, 238, 0.85), rgba(0, 0, 0, 0.6));
border-radius: 8px; pointer-events: none;
font-weight: 600; }
.hero > .container {
position: relative;
z-index: 2;
}
.hero-dots {
position: absolute;
left: 0;
right: 0;
bottom: 18px;
z-index: 3;
display: flex;
justify-content: center;
gap: 10px;
}
.hero-dot {
width: 10px;
height: 10px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.6);
background: rgba(255, 255, 255, 0.15);
padding: 0;
cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.btn-portal:hover{ .hero-dot:hover {
background:#8B3A74; background: rgba(255, 255, 255, 0.5);
color:#fff; }
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(94, 36, 78, 0.3); .hero-dot.active {
background: #FFE618;
border-color: #FFE618;
width: 26px;
border-radius: 999px;
}
.hero h1 {
font-size: clamp(2rem, 4vw, 3rem);
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.16);
border: 1px solid rgba(255, 255, 255, 0.3);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: #FFE618;
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 8px 18px;
border-radius: 999px;
margin-bottom: 18px;
}
.portal-card {
position: relative;
display: flex;
flex-direction: column;
border: none;
border-radius: 20px;
transition: .4s cubic-bezier(0.165, 0.84, 0.44, 1);
box-shadow: 0 5px 20px rgba(0,0,0,.04);
border: 1px solid var(--card-border);
cursor: pointer;
overflow: hidden;
}
.portal-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--secondary) 0%, var(--accent-orange) 100%);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
}
.portal-card:hover::before {
transform: scaleX(1);
}
.portal-card:hover {
transform: translateY(-8px);
border-color: #5f3131;
box-shadow: 0 20px 40px rgba(62, 81, 184, 0.14);
}
.portal-icon {
position: relative;
width: 70px;
height: 70px;
background: #822a32;
color: #fcfcfc;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
margin: auto;
box-shadow: 0 8px 18px rgba(130, 42, 50, 0.25);
transition: 0.4s ease;
}
.portal-icon::after {
content: '';
position: absolute;
inset: -11px;
z-index: -1;
border-radius: 50%;
background: rgba(130, 42, 50, 0.08);
transition: background-color 0.4s ease, transform 0.4s ease;
}
.portal-card:hover .portal-icon {
background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
transform: scale(1.1);
box-shadow: 0 8px 20px rgba(188, 26, 26, 0.35);
color: #ffed8b;
}
.portal-card:hover .portal-icon::after {
background: rgba(188, 26, 26, 0.14);
transform: scale(1.08);
}
.portal-access-hint {
display: inline-flex;
justify-content: center;
align-items: center;
gap: 6px;
margin-top: auto;
padding-top: 16px;
border-top: 1px dashed var(--card-border);
font-size: 13px;
font-weight: 700;
color: var(--secondary);
opacity: 0.75;
transition: opacity 0.3s ease, color 0.3s ease;
}
.portal-card:hover .portal-access-hint {
opacity: 1;
color: var(--secondary-hover);
}
.portal-access-hint i {
transition: transform 0.3s ease;
}
.portal-card:hover .portal-access-hint i {
transform: translateX(3px);
}
.btn-portal {
background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
color: #fff;
padding: 13px 34px;
border-radius: 999px;
font-weight: 700;
border: 2px solid rgba(255, 255, 255, 0.9);
transition: all 0.3s ease;
}
.btn-portal:hover {
background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
color: #fff;
transform: translateY(-3px);
box-shadow: 0 10px 24px rgba(188, 26, 26, 0.4);
}
.btn-hero-outline {
background: rgba(255, 255, 255, 0.12);
color: #fff;
border: 2px solid rgba(255, 255, 255, 0.7);
padding: 13px 34px;
border-radius: 999px;
font-weight: 700;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.btn-hero-outline:hover {
background: rgba(255, 255, 255, 0.95);
color: var(--secondary-hover);
border-color: #fff;
transform: translateY(-3px);
}
.btn:hover {
border-color: rgba(255, 255, 255, 0.98);
}
.hero-quick-stats {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin-top: 36px;
}
.hero-quick-stat {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: #fff;
font-size: 13.5px;
font-weight: 600;
padding: 9px 18px;
border-radius: 999px;
transition: transform 0.3s ease, background-color 0.3s ease;
}
.hero-quick-stat:hover {
transform: translateY(-3px);
background: rgba(255, 255, 255, 0.16);
}
.hero-quick-stat i {
color: #FFE618;
} }
.modal-content { .modal-content {
@ -81,8 +312,6 @@ body {
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
} }
.modal.fade .modal-dialog { .modal.fade .modal-dialog {
transform: scale(0.85); transform: scale(0.85);
transition: transform 0.3s ease-out; transition: transform 0.3s ease-out;
@ -103,6 +332,19 @@ body {
font-size: 1.35rem; font-size: 1.35rem;
} }
.modal-login-icon {
width: 64px;
height: 64px;
border-radius: 50%;
background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
color: #FFE618;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
box-shadow: 0 10px 24px rgba(188, 26, 26, 0.25);
}
.modal-body { .modal-body {
padding: 10px 25px 20px; padding: 10px 25px 20px;
} }
@ -131,14 +373,14 @@ body {
} }
.form-control:focus { .form-control:focus {
border-color: var(--secondary); border-color: var(--primary-light);
box-shadow: 0 0 0 4px rgba(139, 58, 116, 0.12); box-shadow: 0 0 0 4px rgba(10, 103, 223, 0.15);
outline: 0; outline: 0;
} }
.input-group:focus-within .input-group-text { .input-group:focus-within .input-group-text {
border-color: var(--secondary); border-color: var(--primary-light);
color: var(--secondary); color: var(--primary-light);
} }
.modal-footer { .modal-footer {
@ -170,22 +412,48 @@ body {
border: none; border: none;
font-weight: 600; font-weight: 600;
padding: 10px 0; padding: 10px 0;
box-shadow: 0 4px 12px rgba(94, 36, 78, 0.2); box-shadow: 0 4px 12px rgba(62, 81, 184, 0.2);
transition: all 0.2s; transition: all 0.2s;
width: 100%; width: 100%;
border-radius: 8px; border-radius: 8px;
} }
.btn-modal-login:hover { .btn-modal-login:hover {
background: var(--secondary); background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
color: #fff; color: #fff;
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: 0 6px 15px rgba(94, 36, 78, 0.3); box-shadow: 0 6px 15px rgba(188, 26, 26, 0.3);
} }
/* ======================================================== .custom-list-item {
Custom CSS Scroll Animations background: rgba(255, 255, 255, 0.7);
======================================================== */ border: 1px solid rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.custom-list-item:hover {
background: #ffffff;
transform: translateX(5px);
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}
.quick-link-icon {
width: 48px;
height: 48px;
background-color: rgb(108, 55, 55);
color: #fff;
}
.bg-light {
background: linear-gradient(rgba(162, 190, 255, 0.49), rgba(237, 235, 255, 0.9)), url('https://images.pexels.com/photos/3807277/pexels-photo-3807277.jpeg?auto=compress&cs=tinysrgb&w=1600');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
color: white;
}
/* Scroll Animations */
.animate-item { .animate-item {
opacity: 0; opacity: 0;
will-change: transform, opacity; will-change: transform, opacity;
@ -210,24 +478,57 @@ body {
} }
</style> </style>
<!-- HERO SECTION -->
@php
$studentHeroSlides = [
'https://images.pexels.com/photos/3802510/pexels-photo-3802510.jpeg',
'https://images.unsplash.com/photo-1517524206127-48bbd363f3d7?auto=format&fit=crop&w=1600&q=80',
'https://images.unsplash.com/photo-1553440569-bcc63803a83d?auto=format&fit=crop&w=1600&q=80',
'https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=1600&q=80',
'https://images.unsplash.com/photo-1581093803931-46e730e7622e?auto=format&fit=crop&w=1600&q=80',
];
@endphp
<section class="hero"> <section class="hero">
<div class="container"> <div class="hero-slideshow" aria-hidden="true">
@foreach($studentHeroSlides as $index => $slideImage)
<div class="hero-slide {{ $index === 0 ? 'active' : '' }}" style="background-image: url('{{ $slideImage }}');"></div>
@endforeach
</div>
<div class="hero-overlay" aria-hidden="true"></div>
<div class="hero-dots" aria-hidden="true">
@foreach($studentHeroSlides as $index => $slideImage)
<button type="button" class="hero-dot {{ $index === 0 ? 'active' : '' }}" data-slide-index="{{ $index }}" aria-label="Show slide {{ $index + 1 }}"></button>
@endforeach
</div>
<div class="container" style="padding-top: 46px;">
<div class="animate-item animated fade-up-init"> <div class="animate-item animated fade-up-init">
<span class="hero-badge"><i class="fa-solid fa-user-graduate"></i> Your Academic Hub</span>
<h1 class="fw-bold display-5">Student Portal</h1> <h1 class="fw-bold display-5">Student Portal</h1>
<p class="mt-3 fs-5" style="max-width: 700px; margin: auto;"> <p class="mt-3 fs-5" style="max-width: 700px; margin: auto;">
Access your courses, timetable, assignments, examination results, Access your courses, timetable, assignments, examination results,
payments and profile from one place. payments and profile from one place.
</p> </p>
<button onclick="studentlogin()" class="btn btn-portal mt-4 shadow"> <div class="d-flex flex-wrap justify-content-center gap-3 mt-4">
Student Login <button onclick="studentlogin()" class="btn btn-portal shadow">
<i class="fa-solid fa-right-to-bracket me-2"></i>Student Login
</button> </button>
<a href="#student-services" class="btn btn-hero-outline">
<i class="fa-solid fa-compass me-2"></i>Browse Services
</a>
</div>
<div class="hero-quick-stats">
<span class="hero-quick-stat"><i class="fa-solid fa-clock"></i> 24/7 Access</span>
<span class="hero-quick-stat"><i class="fa-solid fa-shield-halved"></i> Secure Login</span>
<span class="hero-quick-stat"><i class="fa-solid fa-layer-group"></i> 6 Portal Services</span>
</div>
</div> </div>
</div> </div>
</section> </section>
<!-- SERVICES SECTION --> <!-- SERVICES SECTION -->
<section class="py-5 overflow-hidden"> <section id="student-services" class="py-5 overflow-hidden">
<div class="container"> <div class="container">
<div class="text-center mb-5 animate-item fade-up-init"> <div class="text-center mb-5 animate-item fade-up-init">
<h2 class="fw-bold">Student Services</h2> <h2 class="fw-bold">Student Services</h2>
@ -236,7 +537,6 @@ body {
</p> </p>
</div> </div>
<div class="row g-4 animate-item fade-in-init"> <div class="row g-4 animate-item fade-in-init">
<div class="col-md-4"> <div class="col-md-4">
<div class="card portal-card h-100 text-center p-4" onclick="studentlogin()"> <div class="card portal-card h-100 text-center p-4" onclick="studentlogin()">
@ -245,6 +545,7 @@ body {
</div> </div>
<h4 class="mt-4 fw-bold">My Courses</h4> <h4 class="mt-4 fw-bold">My Courses</h4>
<p class="text-muted mb-0">View enrolled courses and learning materials.</p> <p class="text-muted mb-0">View enrolled courses and learning materials.</p>
<span class="portal-access-hint">Access Portal <i class="fa-solid fa-arrow-right"></i></span>
</div> </div>
</div> </div>
@ -255,6 +556,7 @@ body {
</div> </div>
<h4 class="mt-4 fw-bold">Class Timetable</h4> <h4 class="mt-4 fw-bold">Class Timetable</h4>
<p class="text-muted mb-0">Check your weekly lecture schedule.</p> <p class="text-muted mb-0">Check your weekly lecture schedule.</p>
<span class="portal-access-hint">Access Portal <i class="fa-solid fa-arrow-right"></i></span>
</div> </div>
</div> </div>
@ -265,6 +567,7 @@ body {
</div> </div>
<h4 class="mt-4 fw-bold">Assignments</h4> <h4 class="mt-4 fw-bold">Assignments</h4>
<p class="text-muted mb-0">Submit assignments and download resources.</p> <p class="text-muted mb-0">Submit assignments and download resources.</p>
<span class="portal-access-hint">Access Portal <i class="fa-solid fa-arrow-right"></i></span>
</div> </div>
</div> </div>
@ -275,6 +578,7 @@ body {
</div> </div>
<h4 class="mt-4 fw-bold">Exam Results</h4> <h4 class="mt-4 fw-bold">Exam Results</h4>
<p class="text-muted mb-0">View semester and final examination results.</p> <p class="text-muted mb-0">View semester and final examination results.</p>
<span class="portal-access-hint">Access Portal <i class="fa-solid fa-arrow-right"></i></span>
</div> </div>
</div> </div>
@ -285,6 +589,7 @@ body {
</div> </div>
<h4 class="mt-4 fw-bold">Fee Payments</h4> <h4 class="mt-4 fw-bold">Fee Payments</h4>
<p class="text-muted mb-0">Pay course fees and download payment receipts.</p> <p class="text-muted mb-0">Pay course fees and download payment receipts.</p>
<span class="portal-access-hint">Access Portal <i class="fa-solid fa-arrow-right"></i></span>
</div> </div>
</div> </div>
@ -295,31 +600,103 @@ body {
</div> </div>
<h4 class="mt-4 fw-bold">Student Profile</h4> <h4 class="mt-4 fw-bold">Student Profile</h4>
<p class="text-muted mb-0">Update your personal information securely.</p> <p class="text-muted mb-0">Update your personal information securely.</p>
<span class="portal-access-hint">Access Portal <i class="fa-solid fa-arrow-right"></i></span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- QUICK LINKS --> <!-- QUICK LINKS (FIXED WITH FONTAWESOME ICONS & RESPONSIVE LAYOUT) -->
<section class="py-5 bg-light overflow-hidden"> <section class="py-5 position-relative overflow-hidden"
<div class="container"> style=" background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; min-height: 25vh; display: flex; align-items: center;">
<div class="text-center mb-5 animate-item fade-up-init" onclick="studentlogin()">
<h2 class="fw-bold">Quick Links</h2> <div class="container py-4">
<div class="row justify-content-center">
<div class="col-12 col-md-8 col-lg-6" style="width:100%">
<!-- Main Container Card (White Box with Blur) -->
<div class="p-4 p-md-5 rounded-4 shadow-lg text-dark"
style="background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.5);">
<!-- Header Area -->
<div class="d-flex justify-content-between align-items-center mb-4 pb-2 border-bottom">
<div>
<h3 class="fw-bold m-0 text-dark">Quick Links</h3>
<p class="text-muted small m-0">Access important student portals and resources</p>
</div>
</div> </div>
<div class="row text-center animate-item slide-right-init" onclick="studentlogin()"> <!-- Links List Container -->
<div class="col-md-3 mb-3"> <div class="d-flex flex-column gap-3">
<a href="#" class="btn btn-outline-dark w-100 py-2 fw-semibold rounded-pill">Academic Calendar</a>
<!-- Item 1 -->
<a href="#" class="text-decoration-none text-dark p-3 rounded-3 d-flex align-items-center justify-content-between custom-list-item" onclick="studentlogin()">
<div class="d-flex align-items-center gap-3">
<div class="rounded-circle d-flex align-items-center justify-content-center flex-shrink-0 quick-link-icon">
<i class="fa-solid fa-calendar-days fs-5"></i>
</div> </div>
<div class="col-md-3 mb-3"> <div>
<a href="#" class="btn btn-outline-dark w-100 py-2 fw-semibold rounded-pill">Student Handbook</a> <h6 class="fw-bold mb-0 text-dark">Academic Calendar</h6>
<small class="text-muted">Schedules & important dates</small>
</div> </div>
<div class="col-md-3 mb-3">
<a href="#" class="btn btn-outline-dark w-100 py-2 fw-semibold rounded-pill">Examination Notices</a>
</div> </div>
<div class="col-md-3 mb-3">
<a href="#" class="btn btn-outline-dark w-100 py-2 fw-semibold rounded-pill">Contact Support</a> <span class="btn btn-sm btn-outline-dark rounded-pill px-3 ms-2">Open</span>
</a>
<!-- Item 2 -->
<a href="#" class="text-decoration-none text-dark p-3 rounded-3 d-flex align-items-center justify-content-between custom-list-item" onclick="studentlogin()">
<div class="d-flex align-items-center gap-3">
<div class="rounded-circle d-flex align-items-center justify-content-center flex-shrink-0 quick-link-icon">
<i class="fa-solid fa-book-bookmark fs-5"></i>
</div>
<div>
<h6 class="fw-bold mb-0 text-dark">Student Handbook</h6>
<small class="text-muted">Rules, guidelines & policies</small>
</div>
</div>
<span class="btn btn-sm btn-outline-dark rounded-pill px-3 ms-2">View</span>
</a>
<!-- Item 3 -->
<a href="#" class="text-decoration-none text-dark p-3 rounded-3 d-flex align-items-center justify-content-between custom-list-item" onclick="studentlogin()">
<div class="d-flex align-items-center gap-3">
<div class="rounded-circle d-flex align-items-center justify-content-center flex-shrink-0 quick-link-icon">
<i class="fa-solid fa-file-lines fs-5"></i>
</div>
<div>
<h6 class="fw-bold mb-0 text-dark">Examination Notices</h6>
<small class="text-muted">Timetables & results</small>
</div>
</div>
<span class="btn btn-sm btn-outline-dark rounded-pill px-3 ms-2">Check</span>
</a>
<!-- Item 4 -->
<a href="#" class="text-decoration-none text-dark p-3 rounded-3 d-flex align-items-center justify-content-between custom-list-item" onclick="studentlogin()">
<div class="d-flex align-items-center gap-3">
<div class="rounded-circle d-flex align-items-center justify-content-center flex-shrink-0 quick-link-icon">
<i class="fa-solid fa-headset fs-5"></i>
</div>
<div>
<h6 class="fw-bold mb-0 text-dark">Contact Support</h6>
<small class="text-muted">Get help & support</small>
</div>
</div>
<span class="btn btn-sm btn-outline-dark rounded-pill px-3 ms-2">Help</span>
</a>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -331,7 +708,7 @@ body {
<h2 class="fw-bold">Ready to Access Your Student Account?</h2> <h2 class="fw-bold">Ready to Access Your Student Account?</h2>
<p class="text-muted fs-5">Log in to manage your academic activities and stay updated.</p> <p class="text-muted fs-5">Log in to manage your academic activities and stay updated.</p>
<button onclick="studentlogin()" class="btn btn-portal mt-3 shadow"> <button onclick="studentlogin()" class="btn btn-portal mt-3 shadow">
Student Login <i class="fa-solid fa-right-to-bracket me-2"></i>Student Login
</button> </button>
</div> </div>
</section> </section>
@ -340,12 +717,15 @@ body {
<div class="modal fade" id="studentLoginModal" tabindex="-1" aria-labelledby="studentLoginModalLabel" aria-hidden="true"> <div class="modal fade" id="studentLoginModal" tabindex="-1" aria-labelledby="studentLoginModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered"> <div class="modal-dialog modal-dialog-centered">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header d-flex align-items-center justify-content-between"> <div class="modal-header d-flex flex-column align-items-center position-relative">
<h5 class="modal-title w-100 text-center" id="studentLoginModalLabel"> <button type="button" class="btn-close position-absolute top-0 end-0 m-3" data-bs-dismiss="modal" aria-label="Close"></button>
<i class="fa-solid fa-lock-open me-2" style="font-size: 20px; color: var(--secondary);"></i> <div class="modal-login-icon">
<i class="fa-solid fa-lock-open"></i>
</div>
<h5 class="modal-title text-center mt-3" id="studentLoginModalLabel">
Student Portal Login Student Portal Login
</h5> </h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <p class="text-muted small text-center mb-0">Enter your credentials to continue</p>
</div> </div>
<form action="{{ route('student.login.submit') }}" method="POST" id="studentLoginForm"> <form action="{{ route('student.login.submit') }}" method="POST" id="studentLoginForm">
@csrf @csrf
@ -354,7 +734,7 @@ body {
<div class="mb-3"> <div class="mb-3">
<label for="username" class="form-label">Username / Student ID</label> <label for="username" class="form-label">Username / Student ID</label>
<div class="input-group"> <div class="input-group">
<span class="input-group-text"><i class="fa-solid fa-user-graduate"></i></span> <span class="input-group-text"> <i class="fa-solid fa-user-graduate"></i></span>
<input type="text" name="username" id="username" class="form-control" placeholder="Enter your student ID" required> <input type="text" name="username" id="username" class="form-control" placeholder="Enter your student ID" required>
</div> </div>
</div> </div>
@ -378,7 +758,7 @@ body {
<div class="modal-footer d-flex gap-2 justify-content-center"> <div class="modal-footer d-flex gap-2 justify-content-center">
<button type="button" class="btn btn-modal-cancel" data-bs-dismiss="modal">Cancel</button> <button type="button" class="btn btn-modal-cancel" data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-modal-login"> Login </button> <button type="submit" class="btn btn-modal-login" style="color: #fff; background-color: #5a212af5; border-color: #007bff;"> Login </button>
</div> </div>
</form> </form>
</div> </div>
@ -392,6 +772,38 @@ function studentlogin() {
} }
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
// Hero Background Slideshow
const heroSlides = document.querySelectorAll('.hero-slide');
const heroDots = document.querySelectorAll('.hero-dot');
if (heroSlides.length > 1) {
let activeSlide = 0;
let slideTimer;
const goToSlide = (index) => {
heroSlides[activeSlide].classList.remove('active');
heroDots[activeSlide]?.classList.remove('active');
activeSlide = index;
heroSlides[activeSlide].classList.add('active');
heroDots[activeSlide]?.classList.add('active');
};
const startSlideTimer = () => {
clearInterval(slideTimer);
slideTimer = setInterval(() => {
goToSlide((activeSlide + 1) % heroSlides.length);
}, 5500);
};
heroDots.forEach(dot => {
dot.addEventListener('click', () => {
goToSlide(parseInt(dot.dataset.slideIndex, 10));
startSlideTimer();
});
});
startSlideTimer();
}
const animatedElements = document.querySelectorAll('.animate-item'); const animatedElements = document.querySelectorAll('.animate-item');
const observer = new IntersectionObserver((entries) => { const observer = new IntersectionObserver((entries) => {
@ -409,6 +821,4 @@ document.addEventListener('DOMContentLoaded', function () {
}); });
</script> </script>
@endsection @endsection

View File

@ -14,372 +14,330 @@
<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 ({{ $todayName ?? 'Today' }})
</h5> </h5>
<div class="mb-3"> @forelse($todaySchedule ?? [] as $todayItem)
@php
$borderStyle = 'var(--theme-navy)';
$badgeClass = 'badge-theory';
<strong>08:30 - 10:30</strong><br> if(strtolower($todayItem->type) == 'practical') {
$borderStyle = 'var(--theme-red)';
<span class="badge badge-theory"> $badgeClass = 'badge-practical';
Theory } elseif(strtolower($todayItem->type) == 'workshop') {
</span> $borderStyle = '#e67e22';
$badgeClass = 'badge-workshop';
Engine Fundamentals }
@endphp
</div>
<div class="mb-3">
<strong>10:45 - 12:30</strong><br>
<span class="badge badge-workshop">
Workshop
</span>
Practical Session
</div>
<div>
<strong>01:30 - 03:30</strong><br>
<span class="badge badge-practical">
Practical
</span>
Electrical System
</div>
</div>
<div class="mb-3 p-2 rounded" style="background: #f8fafc; border-left: 3px solid {{ $borderStyle }};">
<strong>{{ $todayItem->time_slot }}</strong><br>
<span class="badge {{ $badgeClass }} me-1">{{ $todayItem->type }}</span>
<span>{{ $todayItem->subject_name }}</span>
</div>
@empty
<div class="p-3 text-center text-muted border rounded">
<i class="fas fa-coffee me-1"></i> No classes scheduled for today!
</div>
@endforelse
</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>
@foreach($days as $day)
<th>Monday</th> <th class="{{ ($todayName ?? '') == $day ? 'bg-danger text-white' : '' }}">
{{ $day }} {{ ($todayName ?? '') == $day ? '(Today)' : '' }}
<th>Tuesday</th> </th>
@endforeach
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@forelse($timeSlots as $slot)
@php
// Lunch/Break Check
$isBreakRow = false;
foreach($days as $d) {
if(isset($schedule[$slot][$d]) && strtolower($schedule[$slot][$d]->type) == 'break') {
$isBreakRow = true;
break;
}
}
@endphp
<tr> @if($isBreakRow)
<tr class="lunch-row">
<th>08:30 - 10:30</th> <th>{{ $slot }}</th>
<td>
<span class="badge badge-theory">Theory</span><br>
Engine Fundamentals
</td>
<td>
<span class="badge badge-practical">Practical</span><br>
Engine Lab
</td>
<td>
<span class="badge badge-theory">Theory</span><br>
Transmission
</td>
<td>
<span class="badge badge-workshop">Workshop</span><br>
Engine Repair
</td>
<td>
<span class="badge badge-theory">Theory</span><br>
Vehicle Safety
</td>
</tr>
<tr>
<th>10:45 - 12:30</th>
<td>
<span class="badge badge-workshop">Workshop</span><br>
Service Practice
</td>
<td>
<span class="badge badge-theory">Theory</span><br>
Electrical
</td>
<td>
<span class="badge badge-practical">Practical</span><br>
Diagnostics
</td>
<td>
<span class="badge badge-theory">Theory</span><br>
Fuel System
</td>
<td>
<span class="badge badge-workshop">Workshop</span><br>
Engine Assembly
</td>
</tr>
<tr class="table-warning">
<th>12:30 - 01:30</th>
<td colspan="5"> <td colspan="5">
🍴 LUNCH BREAK 🍴 LUNCH BREAK / REST TIME
</td> </td>
</tr> </tr>
@else
<tr> <tr>
<th>{{ $slot }}</th>
<th>01:30 - 03:30</th> @foreach($days as $day)
<td> <td>
<span class="badge badge-practical">Practical</span><br> @if(isset($schedule[$slot][$day]))
Electrical System @php
</td> $cell = $schedule[$slot][$day];
$typeClass = 'badge-theory';
<td> if(strtolower($cell->type) == 'practical') {
<span class="badge badge-workshop">Workshop</span><br> $typeClass = 'badge-practical';
Welding } elseif(strtolower($cell->type) == 'workshop') {
$typeClass = 'badge-workshop';
}
@endphp
<span class="badge {{ $typeClass }} mb-1">{{ $cell->type }}</span><br>
{{ $cell->subject_name }}
@else
<span class="text-muted">-</span>
@endif
</td> </td>
@endforeach
<td>
<span class="badge badge-theory">Theory</span><br>
Auto Electronics
</td>
<td>
<span class="badge badge-practical">Practical</span><br>
Brake System
</td>
<td>
<span class="badge badge-theory">Theory</span><br>
Revision
</td>
</tr> </tr>
@endif
@empty
<tr>
<td colspan="6" class="text-center py-4 text-muted">
<i class="fas fa-info-circle me-1"></i> No timetable data available right now.
</td>
</tr>
@endforelse
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
</div> </div>

File diff suppressed because it is too large Load Diff

View File

@ -6,73 +6,157 @@ use App\Http\Controllers\StudentPortalController;
use App\Http\Controllers\ContactMsgController; use App\Http\Controllers\ContactMsgController;
use App\Http\Controllers\FeedbackController; use App\Http\Controllers\FeedbackController;
use App\Http\Controllers\studentportalnavController; use App\Http\Controllers\studentportalnavController;
use App\Http\Controllers\Auth\ForgotPasswordController;
use App\Http\Controllers\coursesController;
use App\Http\Controllers\ApplyController;
use App\Http\Controllers\ResultsController;
use App\Http\Controllers\TimetableController;
use App\Http\Controllers\CoureseAssignController;
use App\Http\Controllers\AdminAuthController;
use App\Http\Controllers\adminmycoursesController;
use App\Http\Controllers\AdminResultsController;
use App\Http\Controllers\AdminProfileController;
use App\Http\Controllers\AdminTimetableController;
use App\Http\Controllers\AdminDashboardController;
/* /*
|-------------------------------------------------------------------------- |--------------------------------------------------------------------------
| Web Routes | Public Routes & General Pages
|-------------------------------------------------------------------------- |--------------------------------------------------------------------------
*/ */
// Home Page
Route::get('/', function () { Route::get('/', function () {
return view('welcome'); return view('welcome');
}); });
Route::post('/studentlogout', [studentportalnavController::class, 'logout']); Route::get('/courses', [coursesController::class, 'index'])->name('courses.index');
Route::post('/feedback/store', [FeedbackController::class, 'feedback']) ->middleware('auth') ->name('feedback.store');
Route::post('/contact-submit', [ContactMsgController::class, 'store'])->name('contact.store');
Route::put('/profile/update', [AuthController::class, 'update'])->name('profile.update')->middleware('auth');
Route::middleware(['auth'])->group(function () {
Route::get('/profile', [AuthController::class, 'profilview'])->name('profile.view');
});
// Authentication Routes
Route::post('/signuppage', [AuthController::class, 'register']);
Route::post('/signin', [AuthController::class, 'login']);
Route::post('/custom-logout', [AuthController::class, 'logout']);
// --- STUDENT PORTAL SYSTEM ROUTES ---
Route::post('/student-login', [StudentPortalController::class, 'studentlogin'])->name('student.login.submit');
// Route::get('/student-login', [StudentPortalController::class, 'studentlogin'])->name('student.login.submit');
Route::get('/student-portal', function () {
if (!session()->has('student_id')) {
return redirect()->back()->with('error', 'Please login first!');
}
return view('StudentPortal');
})->name('student.portal');
// Route::get('/student-logout', function () {
// session()->forget('student_id');
// return redirect()->to('/students')->with('success', 'Logged out successfully!');
// })->name('student.logout');
Route::view('/apply', 'apply')->name('apply');
Route::view('/courses', 'courses')->name('courses');
Route::view('/students', 'students')->name('students'); Route::view('/students', 'students')->name('students');
Route::view('/abouts', 'abouts')->name('abouts'); Route::view('/abouts', 'abouts')->name('abouts');
Route::view('/contact', 'contacts')->name('contact'); Route::view('/contact', 'contacts')->name('contact');
Route::view('/signin', 'signin')->name('signin'); Route::view('/signin', 'signin')->name('signin');
Route::view('/signup', 'signup')->name('signup'); Route::view('/signup', 'signup')->name('signup');
//student protal /*
Route::view('/Dashboard','StudentPortal')->name('Dashboard'); |--------------------------------------------------------------------------
Route::view('/mycourse', 'mycourse')->name('mycourse'); | System Auth & Contact Routes (POST)
Route::view('/timetable','timetable')->name('timetable'); |--------------------------------------------------------------------------
Route::view('/Assignments','Assignments')->name('Assignments'); */
Route::view('/Studentguidelines','Studentguidelines')->name('Studentguidelines'); Route::post('/signuppage', [AuthController::class, 'register']);
Route::view('/results','results')->name('results'); Route::post('/signin', [AuthController::class, 'login']);
Route::view('/Feedback&Complain','Feedback&Complain')->name('Feedback&Complain'); Route::post('/custom-logout', [AuthController::class, 'logout']);
Route::view('/StudentProfile','StudentProfile')->name('StudentProfile'); Route::post('/contact-submit', [ContactMsgController::class, 'store'])->name('contact.store');
/*
|--------------------------------------------------------------------------
| Password Reset Routes
|--------------------------------------------------------------------------
*/
Route::middleware('guest')->group(function () {
Route::get('/password/reset', [ForgotPasswordController::class, 'index'])->name('password.request');
Route::post('/resetEmail', [ForgotPasswordController::class, 'resetEmail'])->name('password.email');
Route::post('/verify-otp', [ForgotPasswordController::class, 'verifyOtpEmail'])->name('password.verify.otp');
Route::post('/update-password', [ForgotPasswordController::class, 'updatePassword'])->name('password.update');
});
/*
|--------------------------------------------------------------------------
| Regular Auth Protected Routes
|--------------------------------------------------------------------------
*/
Route::middleware(['auth'])->group(function () {
Route::get('/apply', [ApplyController::class, 'index'])->name('apply.index');
Route::post('/apply', [ApplyController::class, 'store'])->name('apply.store');
Route::put('/profile/update', [AuthController::class, 'update'])->name('profile.update');
Route::get('/profile', [AuthController::class, 'profilview'])->name('profile.view');
});
/*
|--------------------------------------------------------------------------
| STUDENT PORTAL ROUTES
|--------------------------------------------------------------------------
*/
Route::post('/student-login', [StudentPortalController::class, 'studentlogin'])->name('student.login.submit');
Route::post('/studentlogout', [StudentPortalController::class, 'studentlogout'])->name('student.logout');
Route::middleware(['web'])->group(function () {
Route::get('/student-portal', function () {
if (!session()->has('student_id') && !session()->has('student_log_id')) {
return redirect('/signin')->with('error', 'Please login first!');
}
return view('StudentPortal');
})->name('student.portal');
Route::get('/StudentProfile', [StudentPortalController::class, 'showProfile'])->name('StudentProfile');
Route::get('/results', [ResultsController::class, 'index'])->name('results');
Route::get('/Dashboard', function () {
if (!session()->has('student_id') && !session()->has('student_log_id')) {
return redirect('/signin')->with('error', 'Please login first!');
}
return view('StudentPortal');
})->name('Dashboard');
Route::get('/timetable', [TimetableController::class, 'index'])->name('timetable');
Route::get('/Assignments', function () {
if (!session()->has('student_id') && !session()->has('student_log_id')) {
return redirect('/signin')->with('error', 'Please login first!');
}
return view('Assignments');
})->name('Assignments');
Route::get('/Studentguidelines', function () {
if (!session()->has('student_id') && !session()->has('student_log_id')) {
return redirect('/signin')->with('error', 'Please login first!');
}
return view('Studentguidelines');
})->name('Studentguidelines');
Route::get('/Feedback&Complain', [FeedbackController::class, 'index'])->name('feedback.index');
Route::post('/Feedback&Complain/store', [FeedbackController::class, 'store'])->name('feedback.store');
Route::get('/mycourse', [CoureseAssignController::class, 'showMyCourse'])->name('mycourse');
Route::get('/module/{id}', [CoureseAssignController::class, 'showModule'])->name('module.show');
});
/*
|--------------------------------------------------------------------------
| ADMIN PORTAL ROUTES
|--------------------------------------------------------------------------
*/
Route::get('/admin/login', [AdminAuthController::class, 'showLoginForm'])->name('admin.login');
Route::post('/admin/login', [AdminAuthController::class, 'login']);
Route::post('/admin/logout', [AdminAuthController::class, 'logout'])->name('admin.logout');
Route::middleware(['web'])->prefix('admin')->group(function () {
// Admin Dashboard Routes
Route::get('/dashboard', [AdminDashboardController::class, 'index'])->name('admin.admindashboard');
Route::post('/notifications/read/{id}', [AdminDashboardController::class, 'markAsRead'])->name('admin.notifications.read');
// Admin Courses
Route::get('/adminmycourses', [adminmycoursesController::class, 'index'])->name('admin.mycourses');
Route::post('/adminmycourses/store', [adminmycoursesController::class, 'store'])->name('admin.courses.store');
Route::post('/adminmycourses/update/{id}', [adminmycoursesController::class, 'update'])->name('admin.courses.update');
Route::delete('/admin/courses/{id}', [adminmycoursesController::class, 'destroy'])->name('admin.courses.delete');
// Admin Timetable Routes
Route::get('/timetable', [AdminTimetableController::class, 'index'])->name('admin.timetable');
Route::post('/timetable/store', [AdminTimetableController::class, 'store'])->name('admin.timetable.store');
Route::put('/timetable/update/{id}', [AdminTimetableController::class, 'update'])->name('admin.timetable.update');
Route::delete('/timetable/delete/{id}', [AdminTimetableController::class, 'destroy'])->name('admin.timetable.delete');
// Admin Results
Route::get('/results', [AdminResultsController::class, 'index'])->name('admin.results');
Route::post('/results/store', [AdminResultsController::class, 'store'])->name('admin.results.store');
Route::put('/results/update/{id}', [AdminResultsController::class, 'update'])->name('admin.results.update');
Route::delete('/results/delete/{id}', [AdminResultsController::class, 'destroy'])->name('admin.results.delete');
// Admin Profile
Route::get('/profile', [AdminProfileController::class, 'index'])->name('admin.profile');
Route::put('/profile/update', [AdminProfileController::class, 'update'])->name('admin.profile.update');
Route::put('/profile/password', [AdminProfileController::class, 'updatePassword'])->name('admin.profile.password');
});