Compare commits

...

8 Commits

Author SHA1 Message Date
imadhigp 80cc7d7e03 fix0716 2026-07-16 17:03:22 +05:30
imadhigp 6cfbe03314 fix0715 2026-07-15 16:59:23 +05:30
imadhigp 2bd5825036 fix0714 2026-07-14 17:42:17 +05:30
imadhigp 31a16b79aa fix0713 2026-07-13 17:04:57 +05:30
imadhigp a1a41fbada fix0710 2026-07-10 17:02:49 +05:30
imadhigp 05ba79ba03 fixhome 2026-07-10 08:53:11 +05:30
imadhigp 33ce7a4ca4 7/9 push home 2026-07-09 22:21:20 +05:30
imadhigp 3350b90866 fix7/9 2026-07-09 17:04:06 +05:30
38 changed files with 4977 additions and 329 deletions

View File

@ -10,9 +10,14 @@ use Illuminate\Support\Facades\Log;
class AuthController extends Controller class AuthController extends Controller
{ {
/**
* Handle Student Registration (POST) public function profilview(Request $request)
*/ {
$user = Auth::user();
return view('profile', compact('user'));
}
public function register(Request $request) public function register(Request $request)
{ {
$request->validate([ $request->validate([
@ -31,16 +36,12 @@ class AuthController extends Controller
'password' => Hash::make($request->password), 'password' => Hash::make($request->password),
]); ]);
// Automatically logs the new user in
Auth::login($user); Auth::login($user);
// FIX: Changed redirect from '/signin' to '/' because they are already logged in
return redirect('/')->with('success', 'Registration successful! Welcome to your dashboard.'); return redirect('/')->with('success', 'Registration successful! Welcome to your dashboard.');
} }
/**
* Handle Student Login (POST)
*/
public function login(Request $request) public function login(Request $request)
{ {
$credentials = $request->validate([ $credentials = $request->validate([
@ -53,30 +54,24 @@ class AuthController extends Controller
return redirect()->intended('/')->with('success', 'Welcome back!'); return redirect()->intended('/')->with('success', 'Welcome back!');
} }
return back()->withErrors([ return back()->withErrors([
'email' => 'The provided credentials do not match our records.', 'email' => 'The provided credentials do not match our records.',
])->onlyInput('email'); ])->onlyInput('email');
} }
/**
* Handle Async Logout (POST Fetch) public function logout(Request $request)
*/
public function logout(Request $request) // FIX: Restored Request injection
{ {
try { try {
if (Auth::check()) { if (Auth::check()) {
Auth::logout(); Auth::logout();
} }
// Flush old fallback explicit keys
$request->session()->forget(['user_id', 'user_name']); $request->session()->forget(['user_id', 'user_name']);
if ($request->session()->isStarted()) { if ($request->session()->isStarted()) {
$request->session()->invalidate(); $request->session()->invalidate();
$request->session()->regenerateToken(); $request->session()->regenerateToken();
} }
return response()->json(['success' => true]); return response()->json(['success' => true]);
} catch (\Exception $e) { } catch (\Exception $e) {
@ -88,4 +83,21 @@ class AuthController extends Controller
return response()->json(['success' => true, 'forced' => true]); return response()->json(['success' => true, 'forced' => true]);
} }
} }
public function update(Request $request)
{
$request->validate([
'first_name' => 'required|string|max:255',
'last_name' => 'required|string|max:255',
'phone' => 'nullable|string|max:20',
]);
$user = Auth::user();
$user->update([
'first_name' => $request->first_name,
'last_name' => $request->last_name,
'phone' => $request->phone,
]);
return redirect()->back()->with('success', 'Profile updated successfully!');
}
} }

View File

@ -0,0 +1,27 @@
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\ContactMsg ;
class ContactMsgController extends Controller
{
public function store(Request $request)
{
$validatedData = $request->validate([
'name' => 'required|string|max:255',
'email' => 'required|email|max:255',
'subject' => 'required|string|max:255',
'message' => 'required|string',
]);
ContactMsg::create($validatedData);
return redirect()->back()->with('success', 'Message sent successfully!');
}
}

View File

@ -0,0 +1,42 @@
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Feedback;
use Illuminate\Support\Facades\DB;
class FeedbackController extends Controller
{
// 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('/')->with('error', 'Please login first to submit feedback!');
// }
// DB::table('feedbacks')->insert([
// 'student_id' => $studentLogId,
// 'feedback_type' => $request->feedback_type,
// 'subject' => $request->subject,
// 'feedback_text' => $request->feedback_text,
// 'status' => 'Pending',
// 'created_at' => now(),
// 'updated_at' => now(),
// ]);
// return redirect()->back()->with('success', 'Feedback submitted successfully!');
// }
}

View File

@ -0,0 +1,61 @@
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
use App\Models\StudentPortalLog ;
use Illuminate\Support\Facades\Hash;
class StudentPortalController extends Controller
{
public function studentlogin(Request $request)
{
$request->validate([
'username' => 'required',
'password' => 'required',
'pin' => 'required|numeric',
]);
$student = DB::table('student_portal_logs')
->where('email', $request->username)
->first();
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!');
}
$request->session()->put('student_id', $student->studentid);
return redirect()->route('student.portal')->with('success', 'Logged in successfully!');
}
return redirect('/')->with('error', 'Invalid Email, Password, or PIN!');
}
// public function showProfile(Request $request)
// {
// $log_id = $request->session()->get('student_id');
// if (!$log_id) {
// return redirect('/')->with('error', 'Please login first!');
// }
// $student = DB::table('student_details')
// ->where('student_portal_log_id', $log_id)
// ->first();
// if (!$student) {
// return redirect()->back()->with('error', 'Student details not found!');
// }
// return view('StudentProfile', compact('student'));
// }
}

View File

@ -0,0 +1,19 @@
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class studentportalnavController extends Controller
{
public function logout(Request $request)
{
Auth::logout();
$request->session()->invalidate();
$request->session()->regenerateToken();
return response()->json([
'success' => true,
'message' => 'Logged out successfully'
]);
}
}

View File

@ -2,9 +2,15 @@
namespace App\Http\Controllers; namespace App\Http\Controllers;
use Illuminate\Http\Request; use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
use App\Models\StudentPortalLog;
use Illuminate\Support\Facades\Hash;
use App\Models\studentDetails;
class studentsController extends Controller class studentsController extends Controller
{ {
//
} }

17
app/Models/ContactMsg.php Normal file
View File

@ -0,0 +1,17 @@
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Model;
class ContactMsg extends Model
{
protected $table = 'contact_msgs';
protected $fillable = [
'name',
'email',
'subject',
'message'
];
}

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

@ -0,0 +1,19 @@
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Factories\HasFactory;
class Feedback extends Model
{
protected $table = 'feedback';
protected $fillable = [
'student_id',
'feedback_type',
'subject',
'feedback_text',
'status'
];
}

View File

@ -0,0 +1,25 @@
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Model;
class StudentPortalLog extends Model
{
protected $table = 'student_portal_logs';
protected $fillable = [
'email',
'studentid',
'password',
'pin',
'status',
];
protected $hidden = [
'password',
'pin',
];
}

10
app/Models/courses.php Normal file
View File

@ -0,0 +1,10 @@
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Model;
class courses extends Model
{
//
}

View File

@ -0,0 +1,10 @@
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Model;
class studentDetails extends Model
{
//
}

View File

@ -0,0 +1,32 @@
<?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('student_portal_logs', function (Blueprint $table) {
$table->id();
$table->string('email');
$table->string('studentid');
$table->string('password');
$table->integer('pin');
$table->string('status');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('student_portal_logs');
}
};

View File

@ -0,0 +1,31 @@
<?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('contact_msgs', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->string('email');
$table->string('subject');
$table->text('message');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('contact_msgs');
}
};

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('feedback', function (Blueprint $table) {
$table->id();
$table->foreignId('user_id')->constrained()->onDelete('cascade');
$table->string('feedback_type');
$table->string('subject');
$table->text('feedback_text');
$table->string('status')->default('Pending');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('feedback');
}
};

View File

@ -0,0 +1,42 @@
<?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('student_details', function (Blueprint $table) {
$table->id();
$table->string('student_id')->unique();
$table->string('image')->nullable();
$table->string('full_name');
$table->string('nic_passport');
$table->date('date_of_birth');
$table->string('gender');
$table->string('email')->unique();
$table->string('phone');
$table->string('qualification');
$table->string('institute');
$table->year('year_completed');
$table->string('course_name');
$table->string('duration');
$table->string('current_semester');
$table->string('trainer_name');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('student_details');
}
};

View File

@ -0,0 +1,39 @@
<?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('courses', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->string('image')->nullable();
$table->string('duration');
$table->string('level');
$table->string('author');
$table->longText('desc')->nullable();
$table->integer('student')->default(0);
$table->decimal('rating', 3, 2)->default(0.00);
$table->string('badge')->nullable();
$table->boolean('trending')->default(false);
$table->string('course_code')->unique();
$table->string('status')->default('draft');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('courses');
}
};

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::table('student_portal_logs', function (Blueprint $table) {
$table->foreignId('user_id')
->nullable()
->after('email')
->constrained('users')
->onDelete('cascade');
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::table('student_portal_logs', function (Blueprint $table) {
$table->dropForeign(['user_id']);
$table->dropColumn('user_id');
});
}
};

View File

@ -0,0 +1,32 @@
<?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('student_details', function (Blueprint $table) {
$table->foreignId('student_portal_log_id')
->nullable()
->constrained('student_portal_logs')
->onDelete('cascade');
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::table('student_details', function (Blueprint $table) {
$table->dropForeign(['student_portal_log_id']);
$table->dropColumn('student_portal_log_id');
});
}
};

View File

@ -0,0 +1,34 @@
<?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('course_assign_student', function (Blueprint $table) {
$table->id();
$table->foreignId('student_details_id')
->constrained('student_details')
->onDelete('cascade');
$table->foreignId('course_id')
->constrained('courses')
->onDelete('cascade');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('course_assign_student');
}
};

View File

@ -0,0 +1,31 @@
<?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('feedback', function (Blueprint $table) {
$table->dropForeign(['user_id']);
$table->dropColumn('user_id');
$table->foreignId('student_id')->after('id')->constrained('student_portal_logs')->onDelete('cascade');
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::table('student_id', function (Blueprint $table) {
//
});
}
};

View File

@ -0,0 +1,401 @@
@extends('layouts.studentportalnav')
@section('title', 'Assignments')
@section('content')
<style>
body{
background:#f4f7fc;
}
.page-title{
font-size:32px;
font-weight:700;
color:#1f2937;
}
.assignment-card{
border:none;
border-radius:18px;
overflow:hidden;
box-shadow:0 10px 25px rgba(0,0,0,.08);
transition:.3s;
}
.assignment-card:hover{
transform:translateY(-5px);
box-shadow:0 18px 35px rgba(0,0,0,.12);
}
.assignment-header{
background:linear-gradient(135deg,#5E244E,#4a1c3e);
color:white;
padding:18px;
}
.assignment-header h5{
margin:0;
font-weight:600;
}
.assignment-body{
padding:22px;
}
.info-box{
display:flex;
justify-content:space-between;
margin-bottom:12px;
}
.info-title{
color:#6b7280;
font-size:14px;
}
.info-value{
font-weight:600;
}
.status{
padding:6px 14px;
border-radius:50px;
font-size:13px;
font-weight:600;
}
.pending{
background:#fff3cd;
color:#856404;
}
.submitted{
background:#d1e7dd;
color:#0f5132;
}
.overdue{
background:#f8d7da;
color:#842029;
}
.progress{
height:8px;
border-radius:20px;
}
.btn-submit{
border-radius:50px;
padding:10px 22px;
}
.search-box{
border-radius:50px;
}
.filter-btn{
border-radius:50px;
margin-right:8px;
}
</style>
<div class="container py-4">
<!-- Page Header -->
<div class="d-flex justify-content-between align-items-center mb-4" >
<div>
<h2 class="page-title" style="color:#5E244E">
<i class="fas fa-file-alt text-primary" style="color: #5E244E !important;" ></i>
Assignments
</h2>
<p class="text-muted">
View, download and submit your course assignments.
</p>
</div>
</div>
<!-- Search -->
<div class="row mb-4">
<div class="col-md-6">
<input type="text"
class="form-control search-box"
placeholder="Search Assignment...">
</div>
<div class="col-md-6 text-md-end mt-3 mt-md-0">
<button class="btn btn-primary filter-btn" style="background-color:#5E244E">All</button>
<button class="btn btn-warning filter-btn">Pending</button>
<button class="btn btn-success filter-btn">Submitted</button>
<button class="btn btn-danger filter-btn">Overdue</button>
</div>
</div>
<div class="row">
<!-- Assignment 1 -->
<div class="col-lg-6 mb-4">
<div class="card assignment-card">
<div class="assignment-header">
<h5>
Engine Maintenance Report
</h5>
</div>
<div class="assignment-body">
<div class="info-box">
<span class="info-title">Module</span>
<span class="info-value">Automobile Engineering</span>
</div>
<div class="info-box">
<span class="info-title">Due Date</span>
<span class="info-value text-danger">
20 July 2026
</span>
</div>
<div class="info-box">
<span class="info-title">Status</span>
<span class="status pending">
Pending
</span>
</div>
<hr>
<p class="text-muted">
Prepare a detailed report on preventive engine
maintenance including servicing procedures and
safety guidelines.
</p>
<label class="small text-muted mb-2">
Submission Progress
</label>
<div class="progress mb-4">
<div class="progress-bar bg-warning"
style="width:40%">
</div>
</div>
<div class="d-flex justify-content-between">
<a href="#"
class="btn btn-outline-primary">
<i class="fas fa-download"></i>
Download
</a>
<a href="#"
class="btn btn-success btn-submit">
<i class="fas fa-upload"></i>
Submit
</a>
</div>
</div>
</div>
</div>
<!-- Assignment 2 -->
<div class="col-lg-6 mb-4">
<div class="card assignment-card">
<div class="assignment-header bg-success">
<h5>
Brake System Inspection
</h5>
</div>
<div class="assignment-body">
<div class="info-box">
<span class="info-title">Module</span>
<span class="info-value">Vehicle Technology</span>
</div>
<div class="info-box">
<span class="info-title">Due Date</span>
<span class="info-value">
10 July 2026
</span>
</div>
<div class="info-box">
<span class="info-title">Status</span>
<span class="status submitted">
Submitted
</span>
</div>
<hr>
<p class="text-muted">
Explain the complete brake inspection procedure
with diagrams and maintenance schedule.
</p>
<label class="small text-muted mb-2">
Submission Progress
</label>
<div class="progress mb-4">
<div class="progress-bar bg-success"
style="width:100%">
</div>
</div>
<div class="d-flex justify-content-between">
<a href="#"
class="btn btn-outline-primary">
<i class="fas fa-download"></i>
Download
</a>
<button class="btn btn-secondary btn-submit" disabled>
Submitted
</button>
</div>
</div>
</div>
</div>
<!-- Assignment 3 -->
<div class="col-lg-6 mb-4">
<div class="card assignment-card">
<div class="assignment-header bg-danger">
<h5>
Transmission System Analysis
</h5>
</div>
<div class="assignment-body">
<div class="info-box">
<span class="info-title">Module</span>
<span class="info-value">Power Train</span>
</div>
<div class="info-box">
<span class="info-title">Due Date</span>
<span class="info-value text-danger">
01 July 2026
</span>
</div>
<div class="info-box">
<span class="info-title">Status</span>
<span class="status overdue">
Overdue
</span>
</div>
<hr>
<p class="text-muted">
Compare manual and automatic transmission systems
with advantages and disadvantages.
</p>
<label class="small text-muted mb-2">
Submission Progress
</label>
<div class="progress mb-4">
<div class="progress-bar bg-danger"
style="width:0%">
</div>
</div>
<div class="d-flex justify-content-between">
<a href="#"
class="btn btn-outline-primary">
<i class="fas fa-download"></i>
Download
</a>
<button class="btn btn-danger btn-submit">
Submit Late
</button>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection

View File

@ -0,0 +1,271 @@
@extends('layouts.studentportalnav')
@section('title','Feedback & Complaint')
@section('content')
<style>
body{
background:#f6f7fb;
}
/* Header */
.feedback-header{
background:linear-gradient(135deg,#5E244E,#4a1c3e);
color:white;
padding:40px;
border-radius:20px;
margin-bottom:35px;
box-shadow:0 15px 35px rgba(0,0,0,.12);
}
.feedback-header h2{
font-weight:700;
}
.feedback-header p{
color:#ddd;
}
/* Cards */
.feedback-card{
background:#fff;
border-radius:20px;
border:none;
padding:30px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
height:100%;
}
.card-title{
color:#5E244E;
font-weight:700;
margin-bottom:25px;
}
.card-title i{
color:#d4af37;
margin-right:8px;
}
/* Inputs */
.form-control,
.form-select{
border-radius:15px;
padding:12px;
border:1px solid #ddd;
}
.form-control:focus,
.form-select:focus{
border-color:#744a68;
box-shadow:0 0 0 .2rem rgba(94,36,78,.15);
}
/* Button */
.submit-btn{
background:#5E244E;
color:white;
border:none;
border-radius:50px;
padding:12px 30px;
font-weight:600;
}
.submit-btn:hover{
background:#4a1c3e;
color:#fff;
}
/* History */
.history-card{
margin-top:35px;
background:white;
border-radius:20px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.history-head{
background:#5E244E;
color:white;
padding:18px 25px;
}
.badge-status{
padding:7px 15px;
border-radius:50px;
font-size:13px;
}
.pending{
background:#fff3cd;
color:#856404;
}
.resolved{
background:#d1e7dd;
color:#0f5132;
}
</style>
<div class="container py-4">
<!-- Header -->
<div class="feedback-header">
<h2><i class="fas fa-comments"></i> Feedback & Complaint</h2>
<p> Share your suggestions, feedback, or complaints with the
Automobile Engineering Academy management team.</p>
</div>
<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">
<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'))
<div class="alert alert-success alert-dismissible fade show" role="alert">
{{ session('success') }}
</div>
@endif
@if ($errors->any())
<div class="alert alert-danger">
<ul class="mb-0">
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<div class="mb-3">
<label class="form-label"> Feedback Type </label>
<select class="form-select" id="feedbackType" name="feedback_type" required>
<option value=""> Select Type </option>
<option value="Course" {{ old('feedback_type') == 'Course' ? 'selected' : '' }}>Course</option>
<option value="Lecturer" {{ old('feedback_type') == 'Lecturer' ? 'selected' : '' }}>Lecturer</option>
<option value="Workshop" {{ old('feedback_type') == 'Workshop' ? 'selected' : '' }}>Workshop</option>
<option value="Facilities" {{ old('feedback_type') == 'Facilities' ? 'selected' : '' }}>Facilities</option>
</select>
</div>
<div class="mb-3">
<label class="form-label">Subject </label>
<input type="text" class="form-control" id="feedbackSubject" name="subject" value="{{ old('subject') }}" placeholder="Enter subject" required>
</div>
<div class="mb-3">
<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>
</div>
<button type="submit" class="submit-btn">
<i class="fas fa-paper-plane"></i> Submit Feedback
</button>
</form>
<!-- Previous History Table -->
<div class="history-card">
<div class="history-head">
<h4 class="mb-0"><i class="fas fa-history"></i> Previous Requests</h4>
</div>
<div class="table-responsive">
<table class="table table-hover mb-0">
<thead>
<tr>
<th> Type </th>
<th> Subject </th>
<th> Date </th>
<th>Status</th>
</tr>
</thead>
<tbody id="historyTableBody">
<tr>
<td>Feedback</td>
<td>Workshop Equipment </td>
<td>10 July 2026</td>
<td><span class="badge-status resolved"> Resolved</span></td>
</tr>
<tr>
<td>Complaint</td>
<td>Class Schedule Issue </td>
<td>05 July 2026 </td>
<td><span class="badge-status pending"> Pending </span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
@endsection

View File

@ -0,0 +1,311 @@
@extends('layouts.studentportalnav')
@section('title','Dashboard')
@section('content')
<style>
:root{
--primary:#5E244E;
--secondary:#8B3A74;
--light:#f5f6fb;
--dark:#2d2d2d;
}
body{
background:var(--light);
}
/* Header */
.dashboard-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:30px;
}
.dashboard-header h2{
font-weight:700;
color:var(--dark);
}
.dashboard-header p{
color:#777;
margin:0;
}
.avatar{
width:55px;
height:55px;
border-radius:50%;
background:var(--primary);
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-weight:bold;
font-size:20px;
}
/* Statistic Cards */
.stat-card{
background:#fff;
border-radius:15px;
padding:25px;
box-shadow:0 8px 20px rgba(0,0,0,.08);
transition:.3s;
height:100%;
}
.stat-card:hover{
transform:translateY(-6px);
}
.stat-icon{
width:60px;
height:60px;
border-radius:12px;
display:flex;
justify-content:center;
align-items:center;
color:#fff;
font-size:22px;
margin-bottom:20px;
}
.stat-card h3{
font-weight:700;
margin-bottom:5px;
}
.stat-card p{
color:#777;
margin:0;
}
/* Services */
.section-title{
font-size:24px;
font-weight:bold;
margin:40px 0 20px;
}
.service-card{
background:#fff;
border-radius:15px;
padding:30px;
text-align:center;
transition:.3s;
box-shadow:0 8px 20px rgba(0,0,0,.08);
height:100%;
}
.service-card:hover{
transform:translateY(-8px);
}
.service-card i{
font-size:45px;
color:var(--primary);
margin-bottom:20px;
}
.service-card h5{
font-weight:700;
}
.service-card p{
color:#777;
font-size:14px;
}
</style>
<div class="container-fluid">
<div class="dashboard-header">
<div>
<h2>Welcome Back, student
<p>Manage your academic activities from your dashboard.</p>
</div>
<!-- <div class="avatar">
S
</div> -->
</div>
<!-- Statistics -->
<div class="row g-4">
<div class="col-lg-3 col-md-6">
<div class="stat-card">
<div class="stat-icon" style="background:#5E244E;">
<i class="fa-solid fa-book"></i>
</div>
<h3>6</h3>
<p>Enrolled Courses</p>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="stat-card">
<div class="stat-icon" style="background:#0d9488;">
<i class="fa-solid fa-file-lines"></i>
</div>
<h3>3</h3>
<p>Assignments</p>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="stat-card">
<div class="stat-icon" style="background:#d97706;">
<i class="fa-solid fa-chart-column"></i>
</div>
<h3>78%</h3>
<p>Average Result</p>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="stat-card">
<div class="stat-icon" style="background:#dc2626;">
<i class="fa-solid fa-bell"></i>
</div>
<h3>2</h3>
<p>Exam Notices</p>
</div>
</div>
</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">
<i class="fas fa-user"></i> Profile
</a> -->
<h5>Student Profile</h5>
<p>Update your personal information.</p>
</div>
</a>
</div>
</div>
</div>
@endsection

View File

@ -0,0 +1,386 @@
@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="row g-4">
<!-- Profile Left -->
<div class="col-lg-4">
<div class="profile-card text-center">
<img src="https://i.pravatar.cc/300"
class="profile-image">
<h3 class="student-name">Kasun Perera </h3>
<span class="student-id">
Student ID : AEA20260045
</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">
Kasuni Perera
</span>
</div>
<div class="info-row">
<span class="label">
NIC / Passport
</span>
<span class="value">
200012345678
</span>
</div>
<div class="info-row">
<span class="label">
Date of Birth
</span>
<span class="value">
15 March 2000
</span>
</div>
<div class="info-row">
<span class="label">
Gender
</span>
<span class="value">
Male
</span>
</div>
<div class="info-row">
<span class="label">
Email
</span>
<span class="value">
student@email.com
</span>
</div>
<div class="info-row">
<span class="label">
Phone
</span>
<span class="value">
+94 77 1234567
</span>
</div>
</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">
NVQ Level 4
</span>
</div>
<div class="info-row">
<span class="label">
Institute
</span>
<span class="value">
ABC Technical College
</span>
</div>
<div class="info-row">
<span class="label">
Year Completed
</span>
<span class="value">
2025
</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> Diploma in Automobile Engineering </div>
<div class="course-item"> <i class="fas fa-calendar"></i> Duration : 2 Years</div>
<div class="course-item">
<i class="fas fa-layer-group"></i>Current Semester : Semester 2
</div>
<div class="course-item">
<i class="fas fa-user-tie"></i>
Trainer : Mr. Nimal Silva
</div>
</div>
</div>
</div>
</div>
@endsection

View File

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

View File

@ -30,75 +30,140 @@
margin-bottom:40px; margin-bottom:40px;
} }
.about-box{ .about-box {
background:#fff; background:#fff;
border-radius:15px; border-radius:20px;
padding:25px; padding:35px 25px;
box-shadow:0 5px 20px rgba(0,0,0,.08); box-shadow:0 10px 30px rgba(0,0,0,.05);
transition:.3s; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
border: 1px solid #efeff4;
} }
.about-box:hover{ .about-box:hover {
transform:translateY(-6px); transform: translateY(-10px) scale(1.02);
box-shadow: 0 20px 40px rgba(94, 36, 78, 0.1);
border-color: var(--primary);
} }
.icon-circle{ .icon-circle {
width:70px; width:75px;
height:70px; height:75px;
background:var(--primary); background:var(--primary);
color:#fff; color:#fff;
border-radius:50%; border-radius:50%;
display:flex; display:flex;
align-items:center; align-items:center;
justify-content:center; justify-content:center;
font-size:26px; font-size:28px;
margin:auto; margin:auto;
transition: all 0.4s ease;
}
.about-box:hover .icon-circle {
background: var(--secondary);
transform: rotateY(180deg); /* කාඩ් එක උඩට යද්දී අයිකන් එක කැරකෙනවා */
}
/* ========================================================
Advanced CSS Scroll Animations
======================================================== */
.animate-item {
opacity: 0;
will-change: transform, opacity;
transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
/* 1. පල්ලෙහා ඉඳන් උඩට එන ඇනිමේෂන් */
.fade-up-init {
transform: translateY(40px);
}
/* 2. වමේ ඉඳන් දකුණට (රූපය සඳහා) */
.slide-left-init {
transform: translateX(-50px);
}
/* 3. දකුණේ ඉඳන් වමට (විස්තරය සඳහා) */
.slide-right-init {
transform: translateX(50px);
}
/* 4. Zoom වෙලා bounce වෙන්න (කාඩ්ස් සඳහා) */
.zoom-in-init {
transform: scale(0.85);
}
/* Active Class (Scroll කරද්දී apply වේ) */
.animate-item.animated {
opacity: 1;
transform: translate(0) scale(1);
}
/* CTA බටන් එක ගැස්සෙන ඇනිමේෂන් එකක් */
@keyframes pulse-btn {
0% { box-shadow: 0 0 0 0 rgba(94, 36, 78, 0.4); }
70% { box-shadow: 0 0 0 15px rgba(94, 36, 78, 0); }
100% { box-shadow: 0 0 0 0 rgba(94, 36, 78, 0); }
}
.cta-btn {
background: var(--primary);
color: #fff !important;
padding: 14px 35px;
border-radius: 50px;
font-weight: 600;
text-decoration: none;
transition: 0.3s;
animation: pulse-btn 2s infinite;
}
.cta-btn:hover {
background: var(--secondary);
transform: scale(1.05);
} }
</style> </style>
<!-- HERO --> <!-- HERO -->
<section class="hero-about"> <section class="hero-about">
<div class="container"> <div class="container">
<h1 class="fw-bold">About Our Institute</h1> <div class="animate-item animated fade-up-init">
<p class="mt-3"> <h1 class="fw-bold display-4">About Our Institute</h1>
We are committed to delivering high-quality automotive education <p class="mt-3 lead" style="max-width: 700px; margin: auto;">
with practical training and industry-focused learning. We are committed to delivering high-quality automotive education
</p> with practical training and industry-focused learning.
</p>
</div>
</div> </div>
</section> </section>
<!-- ABOUT CONTENT --> <!-- ABOUT CONTENT -->
<section class="py-5"> <section class="py-5 overflow-hidden">
<div class="container"> <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="row align-items-center"> <!-- දකුණේ සිට වමට පැමිණේ -->
<div class="col-md-6 animate-item slide-right-init">
<div class="col-md-6"> <h2 class="fw-bold mb-3">Who We Are</h2>
<img src="https://images.pexels.com/photos/3862130/pexels-photo-3862130.jpeg" <p class="text-muted fs-5">
class="img-fluid rounded shadow" Our institute specializes in automotive engineering education,
alt="About Image"> offering hands-on training in modern vehicle technologies,
</div> mechanical systems, and electric vehicles.
</p>
<div class="col-md-6"> <p class="text-muted mb-4">
<h2>Who We Are</h2> We focus on building skilled professionals who are ready for
<p class="text-muted"> the global automotive industry.
Our institute specializes in automotive engineering education, </p>
offering hands-on training in modern vehicle technologies, <a href="{{ route('courses') }}" class="btn btn-dark btn-lg px-4 rounded-pill">
mechanical systems, and electric vehicles. View Courses
</p> </a>
</div>
<p class="text-muted"> </div>
We focus on building skilled professionals who are ready for
the global automotive industry.
</p>
<a href="{{ route('courses') }}" class="btn btn-dark mt-3">
View Courses
</a>
</div>
</div>
</div> </div>
</section> </section>
@ -106,71 +171,85 @@
<section class="py-5 bg-light"> <section class="py-5 bg-light">
<div class="container"> <div class="container">
<div class="section-title"> <div class="section-title animate-item fade-up-init">
<h2>Why Choose Us</h2> <h2 class="fw-bold">Why Choose Us</h2>
<p class="text-muted">We provide the best learning experience</p> <p class="text-muted">We provide the best learning experience</p>
</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="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"> <div class="col-md-4 animate-item zoom-in-init" style="transition-delay: 250ms;">
<div class="about-box text-center"> <div class="about-box text-center">
<div class="icon-circle"> <div class="icon-circle">
<i class="fa-solid fa-chalkboard-user"></i> <i class="fa-solid fa-screwdriver-wrench"></i>
</div> </div>
<h4 class="mt-3">Expert Lecturers</h4> <h4 class="mt-4 fw-bold">Practical Training</h4>
<p class="text-muted"> <p class="text-muted mb-0">
Experienced industry professionals guiding your learning journey. Hands-on workshop experience with real vehicles and tools.
</p> </p>
</div> </div>
</div> </div>
<div class="col-md-4">
<div class="about-box text-center">
<div class="icon-circle">
<i class="fa-solid fa-screwdriver-wrench"></i>
</div>
<h4 class="mt-3">Practical Training</h4>
<p class="text-muted">
Hands-on workshop experience with real vehicles and tools.
</p>
</div>
</div>
<div class="col-md-4">
<div class="about-box text-center">
<div class="icon-circle">
<i class="fa-solid fa-certificate"></i>
</div>
<h4 class="mt-3">Certified Courses</h4>
<p class="text-muted">
Industry-recognized certifications to boost your career.
</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>
</div> </div>
</section> </section>
<!-- CTA --> <!-- CTA -->
<section class="py-5 text-center"> <section class="py-5 text-center bg-white overflow-hidden">
<div class="container"> <div class="container py-4 animate-item fade-up-init">
<h2 class="fw-bold mb-3">Start Your Automotive Career Today</h2>
<h2>Start Your Automotive Career Today</h2> <p class="text-muted fs-5 mb-5">
<p class="text-muted"> Join our institute and become a skilled automotive professional.
Join our institute and become a skilled automotive professional. </p>
</p> <div class="d-flex justify-content-center">
<a href="/apply" class="cta-btn shadow">
Apply Courses
</a>
<div style="display: flex; justify-content:center; width: 100%; "> </div>
<a href="/apply" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-medium transition" style="color:#5E244E">
Apply Courses
</a>
</div> </div>
</section> </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 // Element එකෙන් 15%ක් පෙනෙද්දීම ඇනිමේෂන් එක පටන් ගනී
});
animatedElements.forEach(el => observer.observe(el));
});
</script>
@endsection @endsection

View File

@ -17,7 +17,7 @@
} }
.hero { .hero {
height: 220px; /* Hero එකේ උස තවත් අඩු කළා */ height: 220px;
background: linear-gradient(rgba(20,20,20,.55),rgba(20,20,20,.55)), background: linear-gradient(rgba(20,20,20,.55),rgba(20,20,20,.55)),
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;
@ -65,7 +65,7 @@
} }
.section-title { .section-title {
background: var(--primary); background: #735D6D;
color: white; color: white;
padding: 8px 12px; padding: 8px 12px;
margin-top: 22px; margin-top: 22px;

View File

@ -11,6 +11,10 @@
--light:#f8f4f7; --light:#f8f4f7;
} }
body {
font-family: Arial, Helvetica, sans-serif;
}
.hero-contact{ .hero-contact{
min-height:50vh; min-height:50vh;
background: background:
@ -27,26 +31,39 @@
.contact-box{ .contact-box{
background:#fff; background:#fff;
border-radius:15px; border-radius:20px;
padding:25px; padding:35px;
box-shadow:0 5px 20px rgba(0,0,0,.08); box-shadow: 0 10px 30px rgba(0,0,0,.05);
border: 1px solid #efeff4;
} }
.form-control{ .form-control{
border-radius:10px; border-radius:10px;
padding:12px; padding:12px;
border: 1px solid #ced4da;
transition: all 0.3s ease;
}
.form-control:focus {
border-color: var(--primary);
box-shadow: 0 0 0 0.25rem rgba(94, 36, 78, 0.25);
} }
.btn-contact{ .btn-contact{
background:var(--primary); background:var(--primary);
color:#fff; color:#fff;
/* border-radius:30px; */ border-radius:10px;
padding:10px 30px; padding:12px 30px;
font-weight: 600;
transition: all 0.3s ease;
border: none;
} }
.btn-contact:hover{ .btn-contact:hover{
background:var(--secondary); background:var(--secondary);
color:#fff; color:#fff;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(94, 36, 78, 0.3);
} }
.info-card{ .info-card{
@ -54,56 +71,105 @@
border-radius:15px; border-radius:15px;
padding:20px; padding:20px;
text-align:center; text-align:center;
box-shadow:0 5px 15px rgba(0,0,0,.08); box-shadow: 0 5px 20px rgba(0,0,0,.04);
border: 1px solid #efeff4;
transition:.3s; transition:.3s;
} }
.info-card:hover{ .info-card:hover{
transform:translateY(-5px); transform:translateY(-5px);
border-color: var(--primary);
box-shadow: 0 10px 25px rgba(94, 36, 78, 0.08);
}
.info-card i {
color: var(--primary) !important;
}
/* ========================================================
Custom 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(30px);
}
.slide-left-init {
transform: translateX(-40px);
}
.fade-in-init {
transform: scale(0.98);
}
/* Active Class */
.animate-item.animated {
opacity: 1;
transform: translate(0) scale(1);
} }
</style> </style>
<!-- HERO --> <!-- HERO -->
<section class="hero-contact"> <section class="hero-contact">
<div class="container"> <div class="container">
<h1 class="fw-bold">Contact Us</h1> <div class="animate-item animated fade-up-init">
<p>We are here to help you. Reach us anytime.</p> <h1 class="fw-bold display-4">Contact Us</h1>
<p class="fs-5">We are here to help you. Reach us anytime.</p>
</div>
</div> </div>
</section> </section>
<!-- CONTACT SECTIONs--> <!-- CONTACT SECTION -->
<section class="py-5"> <section class="py-5 overflow-hidden">
<div class="container"> <div class="container">
<div class="row g-4"> <div class="row g-4">
<!-- Contact Form --> <!-- Contact Form (Slide Left) -->
<div class="col-md-6"> <div class="col-md-6 animate-item slide-left-init">
<div class="contact-box"> <div class="contact-box">
<h3 class="mb-4">Send Message</h3> <h3 class="mb-4 fw-bold" style="color: #1c1d1f;">Send Message</h3>
<form action="#" method="POST">
@if(session('success'))
<div class="alert alert-success">
{{ session('success') }}
</div>
@endif
<form action="{{ route('contact.store') }}" method="POST">
@csrf @csrf
<div class="mb-3"> <div class="mb-3">
<label>Name</label> <label class="form-label fw-semibold">Name</label>
<input type="text" name="name" class="form-control" placeholder="Your Name"> <input type="text" name="name" class="form-control" placeholder="Your Name" required>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label>Email</label> <label class="form-label fw-semibold">Email</label>
<input type="email" name="email" class="form-control" placeholder="Your Email"> <input type="email" name="email" class="form-control" placeholder="Your Email" required>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label>Subject</label> <label class="form-label fw-semibold">Subject</label>
<input type="text" name="subject" class="form-control" placeholder="Subject"> <input type="text" name="subject" class="form-control" placeholder="Subject" required>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label>Message</label> <label class="form-label fw-semibold">Message</label>
<textarea name="message" rows="5" class="form-control" placeholder="Your Message"></textarea> <textarea name="message" rows="5" class="form-control" placeholder="Your Message" required></textarea>
</div> </div>
<button type="submit" class="btn btn-contact w-100"> <button type="submit" class="btn btn-contact w-100">
@ -115,31 +181,31 @@ Send Message
</div> </div>
</div> </div>
<!-- Contact Info -->
<div class="col-md-6"> <div class="col-md-6 animate-item fade-in-init">
<div class="info-card mb-3"> <div class="info-card mb-3">
<i class="fa-solid fa-location-dot fa-2x text-primary"></i> <i class="fa-solid fa-location-dot fa-2x"></i>
<h5 class="mt-2">Address</h5> <h5 class="mt-3 fw-bold">Address</h5>
<p>No 12, Colombo Road, Sri Lanka</p> <p class="text-muted mb-0">No 12, Colombo Road, Sri Lanka</p>
</div> </div>
<div class="info-card mb-3"> <div class="info-card mb-3">
<i class="fa-solid fa-phone fa-2x text-success"></i> <i class="fa-solid fa-phone fa-2x"></i>
<h5 class="mt-2">Phone</h5> <h5 class="mt-3 fw-bold">Phone</h5>
<p>+94 77 123 4567</p> <p class="text-muted mb-0">+94 77 123 4567</p>
</div> </div>
<div class="info-card mb-3"> <div class="info-card mb-3">
<i class="fa-solid fa-envelope fa-2x text-danger"></i> <i class="fa-solid fa-envelope fa-2x"></i>
<h5 class="mt-2">Email</h5> <h5 class="mt-3 fw-bold">Email</h5>
<p>info@automotiveacademy.lk</p> <p class="text-muted mb-0">info@automotiveacademy.lk</p>
</div> </div>
<div class="info-card"> <div class="info-card">
<i class="fa-solid fa-clock fa-2x text-warning"></i> <i class="fa-solid fa-clock fa-2x"></i>
<h5 class="mt-2">Working Hours</h5> <h5 class="mt-3 fw-bold">Working Hours</h5>
<p>Mon - Fri: 8.00 AM - 5.00 PM</p> <p class="text-muted mb-0">Mon - Fri: 8.00 AM - 5.00 PM</p>
</div> </div>
</div> </div>
@ -150,7 +216,7 @@ Send Message
</section> </section>
<!-- MAP --> <!-- MAP -->
<section class="pb-5"> <section class="pb-5">
<div class="container"> <div class="container">
<!-- <iframe <!-- <iframe
@ -170,9 +236,36 @@ Send Message
allowfullscreen="" allowfullscreen=""
loading="lazy"> loading="lazy">
</iframe> </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"
style="border:0;border-radius:20px; box-shadow: 0 10px 30px rgba(0,0,0,.05);"
allowfullscreen=""
loading="lazy">
</iframe>
</div> </div>
</section> </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.10
});
animatedElements.forEach(el => observer.observe(el));
});
</script>
@endsection @endsection

View File

@ -14,6 +14,10 @@
--success-green: #1f8a4c; --success-green: #1f8a4c;
} }
body {
font-family: Arial, Helvetica, sans-serif;
}
.hero { .hero {
background-image: linear-gradient(rgba(109, 105, 105, 0.65), rgb(64, 59, 66)), background-image: linear-gradient(rgba(109, 105, 105, 0.65), rgb(64, 59, 66)),
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');
@ -71,7 +75,6 @@
background: var(--secondary); background: var(--secondary);
} }
/* --- Udemy Style Course Card --- */
.course-card { .course-card {
border: 1px solid var(--card-border); border: 1px solid var(--card-border);
border-radius: 20px; border-radius: 20px;
@ -79,6 +82,7 @@
background: #fff; background: #fff;
transition: transform 0.3s ease, box-shadow 0.3s ease; transition: transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: none; box-shadow: none;
scale: .99;
} }
.course-card:hover { .course-card:hover {
@ -87,18 +91,18 @@
} }
.course-image-wrapper { .course-image-wrapper {
padding: 16px 16px 0 16px; padding: 16px;
} }
.course-card img { .course-card img {
height: 190px; height: 200px;
width: 100%; width: 100%;
object-fit: cover; object-fit: cover;
border-radius: 14px; /* border-radius: 14px; */
} }
.course-card .card-body { .course-card .card-body {
padding: 20px 24px 24px 24px; padding: 24px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@ -108,29 +112,19 @@
font-weight: 700; font-weight: 700;
line-height: 1.3; line-height: 1.3;
color: #1c1d1f; color: #1c1d1f;
margin-bottom: 6px; margin-bottom: 8px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
height: 55px;
} }
.course-author { .course-author {
font-size: 14px; font-size: 14px;
color: var(--text-muted); color: var(--text-muted);
margin-bottom: 8px; margin-bottom: 12px;
} }
.course-short-desc { .course-short-desc {
font-size: 14px; font-size: 14px;
color: #4f5357; color: #4f5357;
margin-bottom: 12px; margin-bottom: 16px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
height: 42px;
line-height: 1.5; line-height: 1.5;
} }
@ -171,7 +165,7 @@
gap: 15px; gap: 15px;
font-size: 13px; font-size: 13px;
color: var(--success-green); color: var(--success-green);
margin-bottom: 18px; margin-bottom: 20px;
font-weight: 500; font-weight: 500;
} }
@ -227,12 +221,6 @@
text-align: left; text-align: left;
} }
.feature-box:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
border-color: var(--primary);
}
.feature-icon-wrapper { .feature-icon-wrapper {
width: 50px; width: 50px;
height: 50px; height: 50px;
@ -244,6 +232,23 @@
justify-content: center; justify-content: center;
font-size: 22px; font-size: 22px;
margin-bottom: 20px; margin-bottom: 20px;
transition: transform 0.5s ease;
}
.feature-box:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
border-color: var(--primary);
}
.feature-box:hover .feature-icon-wrapper i {
transform: rotate(360deg);
}
.feature-icon-wrapper i {
transition: transform 0.5s ease;
} }
.feature-box h5 { .feature-box h5 {
@ -266,25 +271,44 @@
color: #666; color: #666;
margin-top: 20px; margin-top: 20px;
} }
/* ========================================================
Custom Pure CSS Animations (Scroll Animations)
======================================================== */
/* .animate-on-scroll {
opacity: 0;
transition: all 0.8s ease-out;
}
.fade-up-init {
transform: translateY(30px);
}
.animate-on-scroll.animated {
opacity: 1;
transform: translateY(0);
} */
</style> </style>
{{-- Hero --}} {{-- Hero --}}
<section class="hero"> <section class="hero">
<div class="container"> <div class="container">
<h1>Our Courses</h1> <div class="animate-on-scroll animated fade-up-init">
<p> <h1>Our Courses</h1>
Build your future in the automotive industry through practical <p>
training and internationally recognized learning experiences. Build your future in the automotive industry through practical
</p> training and internationally recognized learning experiences.
<div class="search-box"> </p>
<input <div class="search-box">
type="text" <input
id="courseSearch" type="text"
placeholder="Search Courses by title, level or description..." id="courseSearch"
> placeholder="Search Courses by title, level or description..."
<button type="button"> >
<i class="fas fa-search"></i> <button type="button">
</button> <i class="fas fa-search"></i>
</button>
</div>
</div> </div>
</div> </div>
</section> </section>
@ -368,34 +392,43 @@ $courses=[
</div> </div>
<div class="row g-4" id="courseContainer"> <div class="row g-4" id="courseContainer">
@foreach($courses as $course) @foreach($courses as $index => $course)
<div class="col-lg-4 col-md-6 course-item"> <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="course-image-wrapper"> <div class="row g-0 align-items-center">
<img src="{{ $course['image'] }}" alt="{{ $course['title'] }}">
</div>
<div class="card-body">
<h4 class="course-title">{{ $course['title'] }}</h4>
<div class="course-author">{{ $course['author'] }}</div>
<p class="course-short-desc">{{ $course['desc'] }}</p> <div class="col-md-4">
<div class="course-image-wrapper">
<img src="{{ $course['image'] }}" alt="{{ $course['title'] }}">
</div>
</div>
<div class="course-meta-row"> <div class="col-md-8">
<span class="badge-bestseller">{{ $course['badge'] }}</span> <div class="card-body">
<span class="rating-star"> <h4 class="course-title">{{ $course['title'] }}</h4>
<i class="fas fa-star"></i> {{ $course['rating'] }} <div class="course-author">{{ $course['author'] }}</div>
</span>
<span class="rating-count">({{ $course['students'] }})</span> <p class="course-short-desc">{{ $course['desc'] }}</p>
<div class="course-meta-row">
<span class="badge-bestseller">{{ $course['badge'] }}</span>
<span class="rating-star">
<i class="fas fa-star"></i> {{ $course['rating'] }}
</span>
<span class="rating-count">({{ $course['students'] }})</span>
</div>
<div class="course-features">
<span><i class="fas fa-tools"></i> Practical Labs</span>
<span><i class="fas fa-certificate"></i> Verified ({{ $course['duration'] }})</span>
</div>
<div class="course-footer" style="max-width: 200px;">
<a href="/apply" class="read-btn">Apply Course</a>
</div>
</div>
</div> </div>
<div class="course-features">
<span><i class="fas fa-tools"></i> Practical Labs</span>
<span><i class="fas fa-certificate"></i> Verified ({{ $course['duration'] }})</span>
</div>
<div class="course-footer">
<a href="/apply" class="read-btn">View & Apply Course</a>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -405,14 +438,13 @@ $courses=[
</div> </div>
</section> </section>
{{-- Modernized Why Study With Us Section --}} {{-- Why Study With Us Section --}}
<section class="pb-5"> <section class="pb-5">
<div class="container"> <div class="container">
<div class="features-section text-center"> <div class="features-section text-center animate-on-scroll fade-up-init">
<h2>Why Study With Us?</h2> <h2>Why Study With Us?</h2>
<div class="row g-4"> <div class="row g-4">
<!-- Feature 1 -->
<div class="col-xl-3 col-md-6"> <div class="col-xl-3 col-md-6">
<div class="feature-box"> <div class="feature-box">
<div class="feature-icon-wrapper"> <div class="feature-icon-wrapper">
@ -423,7 +455,6 @@ $courses=[
</div> </div>
</div> </div>
<!-- Feature 2 -->
<div class="col-xl-3 col-md-6"> <div class="col-xl-3 col-md-6">
<div class="feature-box"> <div class="feature-box">
<div class="feature-icon-wrapper"> <div class="feature-icon-wrapper">
@ -434,7 +465,6 @@ $courses=[
</div> </div>
</div> </div>
<!-- Feature 3 -->
<div class="col-xl-3 col-md-6"> <div class="col-xl-3 col-md-6">
<div class="feature-box"> <div class="feature-box">
<div class="feature-icon-wrapper"> <div class="feature-icon-wrapper">
@ -445,7 +475,6 @@ $courses=[
</div> </div>
</div> </div>
<!-- Feature 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">
<div class="feature-icon-wrapper"> <div class="feature-icon-wrapper">
@ -462,29 +491,49 @@ $courses=[
</section> </section>
<script> <script>
document.getElementById('courseSearch').addEventListener('keyup', function() { document.addEventListener('DOMContentLoaded', function () {
let filter = this.value.toLowerCase(); // === 1. Course Search Feature ===
let courseItems = document.querySelectorAll('.course-item'); document.getElementById('courseSearch').addEventListener('keyup', function() {
let hasResults = false; let filter = this.value.toLowerCase();
let courseItems = document.querySelectorAll('.course-item');
let hasResults = false;
courseItems.forEach(function(item) { courseItems.forEach(function(item) {
let title = item.querySelector('.course-title').textContent.toLowerCase(); let title = item.querySelector('.course-title').textContent.toLowerCase();
let desc = item.querySelector('.course-short-desc').textContent.toLowerCase(); let 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; hasResults = true;
item.classList.add('animated');
} else {
item.style.setProperty('display', 'none', 'important');
}
});
let noResultsMsg = document.getElementById('noResults');
if (hasResults) {
noResultsMsg.classList.add('d-none');
} else { } else {
item.style.setProperty('display', 'none', 'important'); noResultsMsg.classList.remove('d-none');
} }
}); });
let noResultsMsg = document.getElementById('noResults'); // === 2. Pure Intersection Observer Scroll Animation ===
if (hasResults) { const animatedElements = document.querySelectorAll('.animate-on-scroll');
noResultsMsg.classList.add('d-none');
} else { const observer = new IntersectionObserver((entries) => {
noResultsMsg.classList.remove('d-none'); entries.forEach(entry => {
} if (entry.isIntersecting) {
entry.target.classList.add('animated');
observer.unobserve(entry.target);
}
});
}, {
threshold: 0.10
});
animatedElements.forEach(el => observer.observe(el));
}); });
</script> </script>

View File

@ -13,7 +13,7 @@
body { body {
font-family: 'Segoe UI', sans-serif; font-family: 'Segoe UI', sans-serif;
background: #f5f7fb; background: #f5f7fb;
/* 80px තිබුණු එක 56px කළා, එවිට අනවශ්‍ය space එක ඉවත් වේ */
padding-top: 56px; padding-top: 56px;
} }
@ -25,6 +25,7 @@
left: 0; left: 0;
width: 100%; width: 100%;
box-shadow: 0 2px 10px rgba(0,0,0,0.1); box-shadow: 0 2px 10px rgba(0,0,0,0.1);
height: 83px;
} }
.navbar-brand { .navbar-brand {
@ -41,12 +42,14 @@
color: rgba(255, 255, 255, 0.85) !important; color: rgba(255, 255, 255, 0.85) !important;
margin-left: 20px; margin-left: 20px;
transition: 0.2s ease; transition: 0.2s ease;
} font-weight:bold;
/* දැනට ඉන්න පිටුව හෝ hover වන විට පැහැදිලිව පෙනීමට */ }
.nav-link:hover, .nav-link:hover,
.nav-link.active-page { .nav-link.active-page {
color: #ffc107 !important; color: #ffc107 !important;
font-weight:bold;
} }
.site-footer { .site-footer {
@ -155,6 +158,12 @@
.slideIn { .slideIn {
animation-name: slideIn; animation-name: slideIn;
} }
@media (min-width: 1400px) {
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
max-width: 1435px;
}
}
</style> </style>
</head> </head>
<body> <body>
@ -175,7 +184,7 @@
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="menu"> <div class="collapse navbar-collapse" id="menu" style="padding-left:214px;">
<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>
@ -198,8 +207,8 @@
@php @php
$displayName = Auth::user()->first_name . ' ' . Auth::user()->last_name; $displayName = Auth::user()->first_name . ' ' . Auth::user()->last_name;
@endphp @endphp
<div class="dropdown"> <div class="dropdown" style="padding-left:325px;">
<a class="user-dropdown-toggle dropdown-toggle text-white" <a class="user-dropdown-toggle text-white"
href="#" href="#"
role="button" role="button"
id="userMenu" id="userMenu"
@ -209,11 +218,11 @@
<span class="user-profile-name">{{ $displayName }}</span> <span class="user-profile-name">{{ $displayName }}</span>
</a> </a>
{{-- Dropdown responsive alignment එක හැදුවා --}}
<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="/profile"> <a class="dropdown-item" href="{{ route('profile.view') }}">
<i class="fa-solid fa-user me-2"></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>
@ -225,7 +234,7 @@
</ul> </ul>
</div> </div>
@else @else
<div class="d-flex gap-2"> <div class="d-flex gap-2" style="padding-left:214px;">
<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> <a href="/signup" class="btn btn-warning btn-sm px-3">Register</a>
</div> </div>
@ -236,11 +245,13 @@
</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">

View File

@ -0,0 +1,382 @@
<!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>Responsive Student Portal</title>
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
/* Global Root Variables */
:root {
--primary: #000000;
--background: #f5f6fb;
--sidebar-width: 260px;
--text-color: #333333;
--sidebar-bg: #5E244E;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: var(--background);
color: var(--text-color);
display: flex;
min-height: 100vh;
overflow-x: hidden;
}
/* ---------- Sidebar Style ---------- */
.sidebar {
width: var(--sidebar-width);
height: 100vh;
background: var(--sidebar-bg);
color: #fff;
position: fixed;
top: 0;
left: 0;
padding: 24px 0;
transition: all 0.3s ease;
z-index: 1030;
display: flex;
flex-direction: column;
}
.sidebar .brand {
padding: 0 24px 24px;
font-weight: 700;
font-size: 1.2rem;
border-bottom: 1px solid rgba(255,255,255,.12);
margin-bottom: 12px;
display: flex;
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 {
display: flex;
flex-direction: column;
flex-grow: 1;
overflow-y: auto;
}
.sidebar .nav-link {
color: rgba(255,255,255,.75);
padding: 14px 24px;
font-size: .95rem;
display: flex;
align-items: center;
gap: 12px;
transition: .2s;
border-left: 3px solid transparent;
text-decoration: none;
}
.sidebar .nav-link i {
width: 20px;
text-align: center;
}
.sidebar .nav-link:hover {
background: rgba(255,255,255,.06);
color: #fff;
}
.sidebar .nav-link.active {
background: rgba(255,255,255,.1);
color: #fff;
border-left: 3px solid #fff;
font-weight: 600;
}
.sidebar .logout-link {
color: rgba(255,255,255,.6);
margin-top: auto;
}
.sidebar .logout-link:hover {
color: #fff;
background: rgba(220,53,69,.25);
}
/* ---------- Main Content Layout ---------- */
.main {
margin-left: var(--sidebar-width);
width: calc(100% - var(--sidebar-width));
min-height: 100vh;
padding: 40px;
background: var(--background);
transition: all 0.3s ease;
}
/* Mobile Header Toggle Bar */
.mobile-header {
display: none;
background: #fff;
padding: 15px 20px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
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.5rem;
cursor: pointer;
color: var(--sidebar-bg);
display: flex;
align-items: center;
justify-content: center;
}
.mobile-brand {
font-weight: 700;
font-size: 1.1rem;
color: #333;
}
/* Overlay Background when sidebar open on Mobile */
.sidebar-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.4);
z-index: 1025;
opacity: 0;
transition: opacity 0.3s ease;
}
.sidebar-overlay.show {
display: block;
opacity: 1;
}
/* ---------- Responsive Media Queries (Mobile & Tablets) ---------- */
@media (max-width: 991px) {
.sidebar {
left: calc(-1 * var(--sidebar-width));
}
.sidebar.show {
left: 0;
}
.main {
margin-left: 0;
padding: 90px 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">Student Portal</div>
<!-- Mobile View User Profile Header Dropdown -->
<div class="mobile-user-profile">
@if(Auth::check())
<div class="dropdown">
<a class="text-dark no-toggle-icon" 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>
<strong>{{ Auth::user()->first_name }}</strong>
</a>
<ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="userMenuMobile">
<li class="px-3 py-2 ">
<!-- <small class="text-muted">Signed in as</small><br> -->
<!-- <strong>{{ Auth::user()->first_name }}</strong> -->
</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>
<button type="button" onclick="submitLogout()" 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="/signin" class="btn btn-sm btn-outline-dark"><i class="fa-solid fa-right-to-bracket"></i></a>
@endif
</div>
</header>
<!-- Overlay dim background element -->
<div class="sidebar-overlay" id="sidebarOverlay"></div>
<!-- Sidebar Navigation -->
<aside class="sidebar" id="sidebar">
<div class="brand">
<i class="fa-solid fa-graduation-cap"></i>&nbsp;&nbsp;Student Portal
</div>
<!-- Sidebar Active User Profile Details (Desktop View) -->
<nav class="nav">
<a href="/Dashboard" class="nav-link ">
<i class="fa-solid fa-gauge"></i>Dashboard
</a>
<a href="/mycourse" class="nav-link">
<i class="fa-solid fa-book"></i>My Courses
</a>
<a href="/timetable" class="nav-link">
<i class="fa-solid fa-calendar-days"></i>Class Timetable
</a>
<!-- <a href="/Assignments" class="nav-link">
<i class="fa-solid fa-file-lines"></i>Assignments
</a> -->
<a href="/results" class="nav-link">
<i class="fa-solid fa-square-poll-vertical"></i>Exam Results
</a>
<a href="/Studentguidelines" class="nav-link">
<i class="fa-solid fa-book-open"></i>Student Guidelines
</a>
<a href="/Feedback&Complain" class="nav-link">
<i class="fa-solid fa-comments"></i>Feedback & Complain
</a>
<a href="/StudentProfile" class="nav-link">
<i class="fa-solid fa-user"></i>Student Profile
</a>
</nav>
<div class="sidebar-user-profile">
@if(Auth::check())
@php
$displayName = Auth::user()->first_name . ' ' . Auth::user()->last_name;
@endphp
<div class="dropdown">
<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>
<ul class="dropdown-menu dropdown-menu-start shadow w-100" aria-labelledby="userMenuDesktop">
<li>
<a class="dropdown-item" href="/StudentProfile">
<i class="fa-solid fa-user me-2"></i> Profile
</a>
</li>
<li><hr class="dropdown-divider"></li>
<li>
<a href="#" onclick="submitLogout(); return false;" class="nav-link logout-link mt-auto" style="color:black;">
<i class="fa-solid fa-right-from-bracket"></i>Logout
</a>
</li>
</ul>
</div>
@else
<div class="d-flex gap-2 px-2">
<a href="/signin" class="btn btn-outline-light btn-sm w-50">Sign In</a>
<a href="/signup" class="btn btn-warning btn-sm w-50">Register</a>
</div>
@endif
</div>
</aside>
<!-- Main Content Area -->
<main class="main">
@yield('content')
</main>
<!-- Sidebar Toggle JavaScript -->
<script>
const toggleBtn = document.getElementById('toggleBtn');
const sidebar = document.getElementById('sidebar');
const overlay = document.getElementById('sidebarOverlay');
// Function to toggle sidebar view
toggleBtn.addEventListener('click', () => {
sidebar.classList.toggle('show');
overlay.classList.toggle('show');
});
// Close sidebar if user clicks outside of it
overlay.addEventListener('click', () => {
sidebar.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>
function submitLogout() {
const tokenEl = document.querySelector('meta[name="csrf-token"]');
fetch('/studentlogout', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
'X-CSRF-TOKEN': tokenEl ? tokenEl.getAttribute('content') : ''
}
})
.then(res => {
if (!res.ok) {
return res.text().then(text => { throw new Error(text) });
}
return res.json();
})
.then(data => {
if (data.success) {
alert('Logged out successfully!');
window.location.href = '/students';
} 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,371 @@
@extends('layouts.studentportalnav')
@section('title', 'My Course')
@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>
:root {
--purple-main: #5E244E;
--purple-dark: #4a1c3e;
--purple-light: #744a68;
--gold-accent: #D4AF37;
--gold-hover: #b8972e;
--bg-light: #f8fafc;
--white: #ffffff;
}
body {
background: var(--bg-light);
font-family: 'Poppins', sans-serif;
}
.main-portal-content {
padding: 20px 15px;
min-height: 100vh;
transition: all 0.3s ease;
}
/* Premium Hero Section */
.hero {
background: linear-gradient(135deg, var(--purple-main) 0%, var(--purple-dark) 100%) !important;
color: var(--white) !important;
border-radius: 20px;
padding: 30px 20px;
margin-bottom: 30px;
box-shadow: 0 10px 30px rgba(74, 28, 62, 0.15);
position: relative;
overflow: hidden;
}
.hero::after {
content: '';
position: absolute;
top: -30%;
right: -10%;
width: 350px;
height: 350px;
background: rgba(255, 255, 255, 0.04);
border-radius: 50%;
pointer-events: none;
}
/* Course Card */
.course-card {
border: none !important;
border-radius: 20px !important;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
background: var(--white);
margin-bottom: 30px;
}
.course-card img {
height: 200px;
object-fit: cover;
width: 100%;
}
/* Sidebar Info Boxes */
.info-box {
border-radius: 16px !important;
padding: 20px 24px;
background: var(--white);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
border: 1px solid rgba(94, 36, 78, 0.05) !important;
transition: all 0.3s ease;
}
.info-box:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06) !important;
}
.stat-icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
font-size: 18px;
background: rgba(94, 36, 78, 0.08);
color: var(--purple-main);
}
/* Modules Card */
.module-card {
border: 1px solid rgba(94, 36, 78, 0.06) !important;
border-radius: 16px !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
background: var(--white);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
}
.module-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.08) !important;
border-color: var(--purple-light) !important;
}
/* Progress bar customizations */
.progress {
height: 10px !important;
border-radius: 50px !important;
background-color: #f1f5f9 !important;
}
.progress-bar {
border-radius: 50px !important;
background: linear-gradient(90deg, var(--gold-accent), #f4d05e) !important;
}
/* Status Badges */
.status {
font-size: 11px;
font-weight: 600;
padding: 5px 14px;
border-radius: 50px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.completed { background: rgba(94, 36, 78, 0.1); color: var(--purple-main); }
.progressing { background: rgba(212, 175, 55, 0.15); color: #9c7e1c; }
.locked { background: #f1f5f9; color: #64748b; }
/* Custom Buttons */
.btn-gold {
background-color: var(--gold-accent) !important;
border-color: var(--gold-accent) !important;
color: #fff !important;
border-radius: 10px;
font-weight: 600;
}
.btn-gold:hover { background-color: var(--gold-hover) !important; }
.btn-purple {
background-color: var(--purple-main) !important;
border-color: var(--purple-main) !important;
color: #fff !important;
border-radius: 10px;
font-weight: 500;
}
.btn-purple:hover { background-color: var(--purple-dark) !important; }
.btn-continue {
background-color: #fff !important;
color: var(--purple-main) !important;
border-radius: 10px;
}
.btn-continue:hover { background-color: #f1f5f9 !important; }
/* Responsive Media Queries */
@media (min-width: 768px) {
.main-portal-content {
padding: 34px;
}
.hero {
padding: 45px;
}
.course-card img {
height: 280px;
}
}
@media (min-width: 992px) {
.main-portal-content {
margin-left: 18px;
}
}
</style>
<div class="main-portal-content">
<div class="container-fluid">
<!-- Hero Section -->
<div class="hero">
<div class="row align-items-center">
<div class="col-lg-9 col-md-8 text-start">
<h1 class="fw-bold display-6 mb-2">Diploma in Automotive Engineering</h1>
<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">
<i class="fa fa-play me-2"></i> Continue Learning
</a>
</div>
<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>
</div>
</div>
</div>
<!-- Main Content Grid -->
<div class="row g-4">
<!-- LEFT COLUMN: Course details & Modules -->
<div class="col-lg-8 col-12">
<!-- Main 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">
<div class="card-body p-4">
<div class="d-flex flex-wrap justify-content-between align-items-start gap-2 mb-3">
<div>
<h3 class="fw-bold text-dark mb-1">AE101</h3>
<p class="text-muted small mb-0">
<i class="fa-solid fa-building me-1" style="color: var(--purple-light);"></i> Automotive Engineering Department
</p>
</div>
<span class="badge bg-dark px-3 py-2 rounded-pill">Diploma</span>
</div>
<p class="text-secondary small lh-base">
Master engine diagnostics, suspension systems, transmission technology, electrical systems and hybrid vehicle maintenance.
</p>
<div class="mt-4">
<div class="d-flex justify-content-between mb-2 small">
<span class="text-dark fw-semibold">Overall Progress</span>
<span class="fw-bold" style="color: var(--purple-main);">55%</span>
</div>
<div class="progress">
<div class="progress-bar" style="width:55%"></div>
</div>
</div>
</div>
</div>
<!-- Modules Header -->
<div class="my-4">
<h4 class="fw-bold text-dark">
<i class="fa-solid fa-list-check me-2" style="color: var(--gold-accent);"></i> Course Modules
</h4>
</div>
<!-- Modules Sub-Grid -->
<div class="row g-4">
<!-- Module 1 -->
<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">Engine 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>
</div>
<p class="text-muted small">Manual & Automatic transmission systems.</p>
</div>
<div class="mt-3">
<button class="btn btn-gold w-100 btn-sm py-2">Continue Learning</button>
</div>
</div>
</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>
<!-- RIGHT COLUMN: Sidebar Statistics -->
<div class="col-lg-4 col-12">
<div class="row g-3">
<div class="col-12">
<div class="info-box d-flex align-items-center">
<div class="stat-icon"><i class="fa fa-book"></i></div>
<div class="ms-3">
<h5 class="fw-bold mb-0" style="color: var(--purple-dark);">12</h5>
<span class="text-muted small">Modules Available</span>
</div>
</div>
</div>
<div class="col-12">
<div class="info-box d-flex align-items-center">
<div class="stat-icon"><i class="fa fa-clock"></i></div>
<div class="ms-3">
<h5 class="fw-bold mb-0" style="color: var(--purple-dark);">2 Years</h5>
<span class="text-muted small">Course Duration</span>
</div>
</div>
</div>
<div class="col-12">
<div class="info-box d-flex align-items-center">
<div class="stat-icon"><i class="fa fa-award"></i></div>
<div class="ms-3">
<h5 class="fw-bold mb-0" style="color: var(--purple-dark);">NVQ Level 5</h5>
<span class="text-muted small">Qualification</span>
</div>
</div>
</div>
</div>
</div>
</div> <!-- End Row -->
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
@endsection

View File

@ -0,0 +1,176 @@
@extends('layouts.app')
@section('content')
<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%);
padding: 1.25rem 1.5rem;
border-top-left-radius: 12px !important;
border-top-right-radius: 12px !important;
}
.profile-info-row {
padding: 0.9rem 0;
border-bottom: 1px solid #f1f1f4;
}
.profile-info-row:last-of-type {
border-bottom: none;
}
.profile-label {
color: #6c757d;
font-weight: 600;
font-size: 0.95rem;
}
.profile-value {
color: #212529;
font-weight: 500;
font-size: 0.95rem;
}
.btn-edit {
background-color: #5c1d5c;
color: white;
border-radius: 6px;
padding: 0.5rem 1.5rem;
font-weight: 500;
transition: all 0.2s ease;
border: none;
text-decoration: none;
}
.btn-edit:hover {
background-color: #3d0c3d;
color: white;
box-shadow: 0 4px 10px rgba(92, 29, 92, 0.3);
}
</style>
<div class="container mt-5 mb-5">
<div class="row justify-content-center">
<div class="col-md-8">
@if(session('success'))
<div class="alert alert-success alert-dismissible fade show mb-4" role="alert" style="border-radius: 8px;">
<i class="bi bi-check-circle-fill me-2"></i> {{ session('success') }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif
<div class="card profile-card">
<!-- Purple Header -->
<div class="card-header profile-header text-white">
<h4 class="mb-0 fw-bold" style="font-size: 1.25rem;">User Profile Dashboard</h4>
</div>
<div class="card-body p-4">
<!-- Name -->
<div class="row profile-info-row align-items-center">
<div class="col-md-4 profile-label">Full Name:</div>
<div class="col-md-8 profile-value">{{ $user->first_name . ' ' . $user->last_name }}</div>
</div>
<!-- Email -->
<div class="row profile-info-row align-items-center">
<div class="col-md-4 profile-label">Email Address:</div>
<div class="col-md-8 profile-value">{{ $user->email }}</div>
</div>
<!-- Phone -->
<div class="row profile-info-row align-items-center">
<div class="col-md-4 profile-label">Phone Number:</div>
<div class="col-md-8 profile-value">
{{ $user->phone ?? 'Not Provided' }}
</div>
</div>
<!-- Created At -->
<div class="row profile-info-row align-items-center">
<div class="col-md-4 profile-label">Account Created:</div>
<div class="col-md-8 profile-value text-muted">
{{ $user->created_at ? $user->created_at->format('Y-m-d H:i') : 'N/A' }}
</div>
</div>
<!-- Updated At -->
<div class="row profile-info-row align-items-center">
<div class="col-md-4 profile-label">Last Updated:</div>
<div class="col-md-8 profile-value text-muted">
{{ $user->updated_at ? $user->updated_at->format('Y-m-d H:i') : 'N/A' }}
</div>
</div>
<!-- Edit Button -->
<div class="mt-4 text-end">
<!-- <a href="#" class="btn btn-edit">Edit Profile</a> -->
<div class="mt-4 text-end">
<button type="button" class="btn btn-edit" data-bs-toggle="modal" data-bs-target="#editProfileModal">
Edit Profile
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
<div class="modal fade" id="editProfileModal" tabindex="-1" aria-labelledby="editProfileModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content" style="border-radius: 12px; overflow: hidden;">
<!-- Modal Header (Oyage purple theme ekata match kala) -->
<div class="modal-header text-white" style="background: linear-gradient(135deg, #3d0c3d 0%, #5c1d5c 100%);">
<h5 class="modal-title fw-bold" id="editProfileModalLabel">Update Profile Details</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form action="{{ route('profile.update') }}" method="POST">
@csrf
@method('PUT')
<div class="modal-body p-4">
<!-- First Name Input -->
<div class="mb-3">
<label for="first_name" class="form-label fw-bold" style="color: #6c757d;">First Name</label>
<input type="text" class="form-control" id="first_name" name="first_name" value="{{ $user->first_name }}" required>
</div>
<!-- Last Name Input -->
<div class="mb-3">
<label for="last_name" class="form-label fw-bold" style="color: #6c757d;">Last Name</label>
<input type="text" class="form-control" id="last_name" name="last_name" value="{{ $user->last_name }}" required>
</div>
<!-- Phone Input -->
<div class="mb-3">
<label for="phone" class="form-label fw-bold" style="color: #6c757d;">Phone Number</label>
<input type="text" class="form-control" id="phone" name="phone" value="{{ $user->phone }}">
</div>
</div>
<!-- Modal Footer Buttons -->
<div class="modal-footer bg-light">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn text-white" style="background-color: #5c1d5c;">Save Changes</button>
</div>
</form>
</div>
</div>
</div>

View File

@ -0,0 +1,528 @@
@extends('layouts.studentportalnav')
@section('title','Results')
@section('content')
<style>
body{
background:#f6f7fb;
}
/* =======================
Hero
======================= */
.result-hero{
background:linear-gradient(135deg,#5E244E,#4a1c3e);
color:#fff;
border-radius:20px;
padding:40px;
margin-bottom:30px;
box-shadow:0 15px 35px rgba(0,0,0,.15);
}
.result-hero h2{
font-weight:700;
}
.result-hero p{
color:#ddd;
margin-bottom:0;
}
/* =======================
Summary Cards
======================= */
.summary-card{
background:#fff;
border:none;
border-radius:20px;
padding:25px;
text-align:center;
box-shadow:0 10px 25px rgba(0,0,0,.08);
transition:.3s;
}
.summary-card:hover{
transform:translateY(-5px);
}
.summary-card i{
font-size:40px;
color:#5E244E;
margin-bottom:15px;
}
.summary-card h3{
color:#5E244E;
font-weight:700;
}
.summary-card small{
color:#777;
}
/* =======================
Result Table
======================= */
.result-card{
margin-top:35px;
background:#fff;
border-radius:20px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.table-head{
background:#5E244E;
color:#fff;
padding:18px 25px;
}
.table{
margin-bottom:0;
}
.table th{
background:#744a68;
color:#fff;
border:none;
}
.table td{
vertical-align:middle;
}
.grade{
padding:7px 15px;
border-radius:30px;
font-weight:600;
color:#fff;
display:inline-block;
}
.a{
background:#28a745;
}
.b{
background:#17a2b8;
}
.c{
background:#ffc107;
color:#222;
}
.fail{
background:#dc3545;
}
/* =======================
Progress
======================= */
.progress{
height:10px;
border-radius:20px;
}
/* =======================
Download
======================= */
.download-card{
margin-top:30px;
background:#4a1c3e;
color:#fff;
border-radius:20px;
padding:30px;
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
}
.download-card h4{
color:#d4af37;
font-weight:700;
}
.btn-result{
background:#d4af37;
color:#fff;
border:none;
border-radius:50px;
padding:12px 30px;
font-weight:600;
}
.btn-result:hover{
background:#c49d20;
color:#fff;
}
</style>
<div class="container py-4">
<!-- Hero -->
<div class="result-hero">
<h2>
<i class="fas fa-award"></i>
Academic Results
</h2>
<p>
View your examination results and academic performance.
</p>
</div>
<!-- Summary -->
<div class="row">
<div class="col-md-4 mb-4">
<div class="summary-card">
<i class="fas fa-chart-line"></i>
<h3>82%</h3>
<small>Overall Average</small>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="summary-card">
<i class="fas fa-medal"></i>
<h3>3.65</h3>
<small>Current GPA</small>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="summary-card">
<i class="fas fa-book"></i>
<h3>6 / 6</h3>
<small>Modules Passed</small>
</div>
</div>
</div>
<!-- Result Table -->
<div class="result-card">
<div class="table-head">
<h4 class="mb-0">
Semester Results
</h4>
</div>
<table class="table table-hover">
<thead>
<tr>
<th>Module</th>
<th>Marks</th>
<th>Grade</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Engine Technology</td>
<td>91</td>
<td>
<span class="grade a">
A+
</span>
</td>
<td>Pass</td>
</tr>
<tr>
<td>Brake Systems</td>
<td>84</td>
<td>
<span class="grade a">
A
</span>
</td>
<td>Pass</td>
</tr>
<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>
</table>
</div>
<!-- Performance -->
<div class="result-card mt-4">
<div class="table-head">
<h4 class="mb-0">
Overall Performance
</h4>
</div>
<div class="p-4">
<p class="mb-2">
Course Completion
</p>
<div class="progress mb-4">
<div class="progress-bar bg-success"
style="width:82%">
</div>
</div>
<p class="mb-2">
Attendance Score
</p>
<div class="progress">
<div class="progress-bar bg-warning"
style="width:90%">
</div>
</div>
</div>
</div>
<!-- Download -->
<div class="download-card">
<div>
<h4>
Download Official Result Sheet
</h4>
<p class="mb-0">
Download your latest semester examination results in PDF format.
</p>
</div>
<button class="btn btn-result">
<i class="fas fa-download"></i>
Download PDF
</button>
</div>
</div>
@endsection

View File

@ -11,6 +11,10 @@
--light:#f8f4f7; --light:#f8f4f7;
} }
body {
font-family: Arial, Helvetica, sans-serif;
}
.hero{ .hero{
background:linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.65)), background:linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.65)),
url('https://images.pexels.com/photos/3802510/pexels-photo-3802510.jpeg'); url('https://images.pexels.com/photos/3802510/pexels-photo-3802510.jpeg');
@ -24,12 +28,15 @@
.portal-card{ .portal-card{
border:none; border:none;
border-radius:15px; border-radius:15px;
transition:.3s; transition:.4s cubic-bezier(0.165, 0.84, 0.44, 1);
box-shadow:0 5px 20px rgba(0,0,0,.08); box-shadow:0 5px 20px rgba(0,0,0,.08);
border: 1px solid #efeff4;
} }
.portal-card:hover{ .portal-card:hover{
transform:translateY(-8px); transform:translateY(-8px);
border-color: var(--primary);
box-shadow: 0 15px 30px rgba(94, 36, 78, 0.1);
} }
.portal-icon{ .portal-icon{
@ -43,28 +50,47 @@
justify-content:center; justify-content:center;
font-size:28px; font-size:28px;
margin:auto; margin:auto;
transition: 0.4s ease;
}
.portal-card:hover .portal-icon {
background: var(--secondary);
transform: scale(1.1);
} }
.btn-portal{ .btn-portal{
background:#5E244E; background:#5E244E;
color:#fff; color:#fff;
padding:10px 30px; padding:12px 35px;
border: none; border: none;
transition: 0.2s ease; border-radius: 8px;
font-weight: 600;
transition: all 0.3s ease;
} }
.btn-portal:hover{ .btn-portal:hover{
background:#8B3A74; background:#8B3A74;
color:#fff; color:#fff;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(94, 36, 78, 0.3);
} }
.modal-content { .modal-content {
border: none; border: none;
border-radius: 16px; border-radius: 16px;
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 {
transform: scale(0.85);
transition: transform 0.3s ease-out;
}
.modal.show .modal-dialog {
transform: scale(1);
}
.modal-header { .modal-header {
background: transparent; background: transparent;
border-bottom: none; border-bottom: none;
@ -81,7 +107,6 @@
padding: 10px 25px 20px; padding: 10px 25px 20px;
} }
.input-group-text { .input-group-text {
background-color: #f8fafc; background-color: #f8fafc;
border-color: #cbd5e1; border-color: #cbd5e1;
@ -111,7 +136,6 @@
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(--secondary);
color: var(--secondary); color: var(--secondary);
@ -122,7 +146,6 @@
border-top: none; border-top: none;
padding: 0 25px 30px; padding: 0 25px 30px;
} }
.btn-modal-cancel { .btn-modal-cancel {
background: transparent; background: transparent;
@ -132,6 +155,7 @@
padding: 10px 0; padding: 10px 0;
transition: all 0.2s; transition: all 0.2s;
width: 100%; width: 100%;
border-radius: 8px;
} }
.btn-modal-cancel:hover { .btn-modal-cancel:hover {
@ -149,6 +173,7 @@
box-shadow: 0 4px 12px rgba(94, 36, 78, 0.2); box-shadow: 0 4px 12px rgba(94, 36, 78, 0.2);
transition: all 0.2s; transition: all 0.2s;
width: 100%; width: 100%;
border-radius: 8px;
} }
.btn-modal-login:hover { .btn-modal-login:hover {
@ -157,128 +182,161 @@
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: 0 6px 15px rgba(94, 36, 78, 0.3); box-shadow: 0 6px 15px rgba(94, 36, 78, 0.3);
} }
/* ========================================================
Custom 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(30px);
}
.fade-in-init {
transform: scale(0.98);
}
.slide-right-init {
transform: translateX(30px);
}
.animate-item.animated {
opacity: 1;
transform: translate(0) scale(1);
}
</style> </style>
<section class="hero"> <section class="hero">
<div class="container"> <div class="container">
<h1 class="fw-bold">Student Portal</h1> <div class="animate-item animated fade-up-init">
<p class="mt-3"> <h1 class="fw-bold display-5">Student Portal</h1>
Access your courses, timetable, assignments, examination results, <p class="mt-3 fs-5" style="max-width: 700px; margin: auto;">
payments and profile from one place. Access your courses, timetable, assignments, examination results,
</p> payments and profile from one place.
</p>
<button onclick="studentlogin()" class="btn btn-portal mt-3"> <button onclick="studentlogin()" class="btn btn-portal mt-4 shadow">
Student Login Student Login
</button> </button>
</div>
</div> </div>
</section> </section>
<section class="py-5"> <!-- SERVICES SECTION -->
<section class="py-5 overflow-hidden">
<div class="container"> <div class="container">
<div class="text-center mb-5"> <div class="text-center mb-5 animate-item fade-up-init">
<h2>Student Services</h2> <h2 class="fw-bold">Student Services</h2>
<p class="text-muted"> <p class="text-muted">
Everything you need during your academic journey. Everything you need during your academic journey.
</p> </p>
</div> </div>
<div class="row g-4">
<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"> <div class="card portal-card h-100 text-center p-4" onclick="studentlogin()">
<div class="portal-icon"> <div class="portal-icon">
<i class="fa-solid fa-book"></i> <i class="fa-solid fa-book"></i>
</div> </div>
<h4 class="mt-4">My Courses</h4> <h4 class="mt-4 fw-bold">My Courses</h4>
<p class="text-muted">View enrolled courses and learning materials.</p> <p class="text-muted mb-0">View enrolled courses and learning materials.</p>
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<div class="card portal-card h-100 text-center p-4"> <div class="card portal-card h-100 text-center p-4" onclick="studentlogin()">
<div class="portal-icon"> <div class="portal-icon">
<i class="fa-solid fa-calendar-days"></i> <i class="fa-solid fa-calendar-days"></i>
</div> </div>
<h4 class="mt-4">Class Timetable</h4> <h4 class="mt-4 fw-bold">Class Timetable</h4>
<p class="text-muted">Check your weekly lecture schedule.</p> <p class="text-muted mb-0">Check your weekly lecture schedule.</p>
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<div class="card portal-card h-100 text-center p-4"> <div class="card portal-card h-100 text-center p-4" onclick="studentlogin()">
<div class="portal-icon"> <div class="portal-icon">
<i class="fa-solid fa-file-lines"></i> <i class="fa-solid fa-file-lines"></i>
</div> </div>
<h4 class="mt-4">Assignments</h4> <h4 class="mt-4 fw-bold">Assignments</h4>
<p class="text-muted">Submit assignments and download resources.</p> <p class="text-muted mb-0">Submit assignments and download resources.</p>
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<div class="card portal-card h-100 text-center p-4"> <div class="card portal-card h-100 text-center p-4" onclick="studentlogin()">
<div class="portal-icon"> <div class="portal-icon">
<i class="fa-solid fa-square-poll-vertical"></i> <i class="fa-solid fa-square-poll-vertical"></i>
</div> </div>
<h4 class="mt-4">Exam Results</h4> <h4 class="mt-4 fw-bold">Exam Results</h4>
<p class="text-muted">View semester and final examination results.</p> <p class="text-muted mb-0">View semester and final examination results.</p>
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<div class="card portal-card h-100 text-center p-4"> <div class="card portal-card h-100 text-center p-4" onclick="studentlogin()">
<div class="portal-icon"> <div class="portal-icon">
<i class="fa-solid fa-credit-card"></i> <i class="fa-solid fa-credit-card"></i>
</div> </div>
<h4 class="mt-4">Fee Payments</h4> <h4 class="mt-4 fw-bold">Fee Payments</h4>
<p class="text-muted">Pay course fees and download payment receipts.</p> <p class="text-muted mb-0">Pay course fees and download payment receipts.</p>
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<div class="card portal-card h-100 text-center p-4"> <div class="card portal-card h-100 text-center p-4" onclick="studentlogin()">
<div class="portal-icon"> <div class="portal-icon">
<i class="fa-solid fa-user"></i> <i class="fa-solid fa-user"></i>
</div> </div>
<h4 class="mt-4">Student Profile</h4> <h4 class="mt-4 fw-bold">Student Profile</h4>
<p class="text-muted">Update your personal information securely.</p> <p class="text-muted mb-0">Update your personal information securely.</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<section class="py-5 bg-light"> <!-- QUICK LINKS -->
<section class="py-5 bg-light overflow-hidden">
<div class="container"> <div class="container">
<div class="text-center mb-5"> <div class="text-center mb-5 animate-item fade-up-init" onclick="studentlogin()">
<h2>Quick Links</h2> <h2 class="fw-bold">Quick Links</h2>
</div> </div>
<div class="row text-center"> <div class="row text-center animate-item slide-right-init" onclick="studentlogin()">
<div class="col-md-3 mb-3"> <div class="col-md-3 mb-3">
<a href="#" class="btn btn-outline-dark w-100">Academic Calendar</a> <a href="#" class="btn btn-outline-dark w-100 py-2 fw-semibold rounded-pill">Academic Calendar</a>
</div> </div>
<div class="col-md-3 mb-3"> <div class="col-md-3 mb-3">
<a href="#" class="btn btn-outline-dark w-100">Student Handbook</a> <a href="#" class="btn btn-outline-dark w-100 py-2 fw-semibold rounded-pill">Student Handbook</a>
</div> </div>
<div class="col-md-3 mb-3"> <div class="col-md-3 mb-3">
<a href="#" class="btn btn-outline-dark w-100">Examination Notices</a> <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"> <div class="col-md-3 mb-3">
<a href="#" class="btn btn-outline-dark w-100">Contact Support</a> <a href="#" class="btn btn-outline-dark w-100 py-2 fw-semibold rounded-pill">Contact Support</a>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<section class="py-5"> <!-- BOTTOM CTA -->
<div class="container text-center"> <section class="py-5 bg-white">
<h2>Ready to Access Your Student Account?</h2> <div class="container text-center animate-item fade-up-init">
<p class="text-muted">Log in to manage your academic activities and stay updated.</p> <h2 class="fw-bold">Ready to Access Your Student Account?</h2>
<button onclick="studentlogin()" class="btn btn-portal mt-3"> <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">
Student Login Student Login
</button> </button>
</div> </div>
</section> </section>
<!-- LOGIN MODAL -->
<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">
@ -289,7 +347,7 @@
</h5> </h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div> </div>
<form action="#" method="POST" id="studentLoginForm"> <form action="{{ route('student.login.submit') }}" method="POST" id="studentLoginForm">
@csrf @csrf
<div class="modal-body"> <div class="modal-body">
@ -319,8 +377,8 @@
</div> </div>
<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"> Login </button>
</div> </div>
</form> </form>
</div> </div>
@ -332,6 +390,25 @@ function studentlogin() {
var myModal = new bootstrap.Modal(document.getElementById('studentLoginModal')); var myModal = new bootstrap.Modal(document.getElementById('studentLoginModal'));
myModal.show(); myModal.show();
} }
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.10
});
animatedElements.forEach(el => observer.observe(el));
});
</script> </script>
@endsection @endsection

View File

@ -0,0 +1,387 @@
@extends('layouts.studentportalnav')
@section('title', 'My Timetable')
@section('content')
<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
body{
font-family:'Poppins',sans-serif;
background:#f4f7fc;
}
.page-header{
background:linear-gradient(135deg,#9954b8,#4f3d5b));
color:#fff;
padding:45px;
border-radius:20px;
background-color: #5E244E;
margin-bottom:30px;
}
.page-header h2{
font-weight:700;
}
.page-header p{
opacity:.9;
}
.info-card{
border:none;
border-radius:15px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.table-card{
background:#fff;
border-radius:20px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
overflow:hidden;
}
.table thead{
background:#0d6efd;
color:#fff;
}
.table td,
.table th{
text-align:center;
vertical-align:middle;
min-width:140px;
}
.badge-theory{
background:#0d6efd;
}
.badge-practical{
background:#198754;
}
.badge-workshop{
background:#fd7e14;
}
.badge-break{
background:#ffc107;
color:#000;
}
.table tbody tr:hover{
background:#f8fbff;
transition:.3s;
}
.legend span{
margin-right:15px;
}
.legend .badge{
padding:8px 12px;
}
.today-card{
background:white;
border-radius:15px;
box-shadow:0 10px 25px rgba(0,0,0,.08);
padding:25px;
height:100%;
}
.today-card h5{
font-weight:600;
}
.download-btn{
border-radius:50px;
padding:10px 25px;
}
@media(max-width:768px){
.table td,
.table th{
font-size:13px;
min-width:120px;
}
.page-header{
padding:25px;
}
}
</style>
<div class="container py-4">
<!-- Header -->
<div class="page-header">
<div class="d-flex justify-content-between align-items-center flex-wrap">
<div>
<h2><i class="fas fa-calendar-alt me-2"></i>My Class Timetable</h2>
<p class="mb-0">
Automobile Engineering Academy Student Portal
</p>
</div>
<button class="btn btn-light download-btn" onclick="window.print()">
<i class="fas fa-print me-2"></i>Print
</button>
</div>
</div>
<div class="row g-4 mb-4">
<div class="col-lg-4">
<div class="today-card">
<h5 class="mb-3">
<i class="fas fa-clock text-primary me-2"></i>
Today's Classes
</h5>
<div class="mb-3">
<strong>08:30 - 10:30</strong><br>
<span class="badge badge-theory">
Theory
</span>
Engine Fundamentals
</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>
<div class="col-lg-8">
<div class="info-card p-4 h-100">
<h5 class="mb-3">
<i class="fas fa-info-circle text-primary me-2"></i>
Timetable Legend
</h5>
<div class="legend">
<span>
<span class="badge badge-theory">Theory</span>
</span>
<span>
<span class="badge badge-practical">Practical</span>
</span>
<span>
<span class="badge badge-workshop">Workshop</span>
</span>
<span>
<span class="badge badge-break">Break</span>
</span>
</div>
<hr>
<p class="mb-0 text-muted">
Please arrive at least 15 minutes before each class.
Attendance is compulsory for all practical sessions.
</p>
</div>
</div>
</div>
<!-- Timetable -->
<div class="table-card">
<div class="table-responsive">
<table class="table table-bordered align-middle mb-0">
<thead>
<tr>
<th>Time</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
</thead>
<tbody>
<tr>
<th>08:30 - 10:30</th>
<td>
<span class="badge badge-theory">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">
🍴 LUNCH BREAK
</td>
</tr>
<tr>
<th>01:30 - 03:30</th>
<td>
<span class="badge badge-practical">Practical</span><br>
Electrical System
</td>
<td>
<span class="badge badge-workshop">Workshop</span><br>
Welding
</td>
<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>
</tbody>
</table>
</div>
</div>
</div>
@endsection

View File

@ -119,10 +119,11 @@ body{
.course-card { .course-card {
border: 1px solid var(--card-border); border: 1px solid var(--card-border);
border-radius: 20px; /* border-radius: 20px; */
overflow: hidden; overflow: hidden;
background: #fff; /* background: #fff; */
transition: transform 0.3s ease, box-shadow 0.3s ease; transition: transform 0.3s ease, box-shadow 0.3s ease;
} }
.course-card:hover { .course-card:hover {
@ -139,7 +140,7 @@ body{
height: 190px; height: 190px;
width: 100%; width: 100%;
object-fit: cover; object-fit: cover;
border-radius: 14px; /* border-radius: 14px; */
transition: 0.5s; transition: 0.5s;
} }
@ -151,7 +152,7 @@ body{
padding: 20px 24px 24px 24px; padding: 20px 24px 24px 24px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
text-align: left; /* Left alignment for Udemy Style */ text-align: left;
} }
.course-title { .course-title {
@ -245,6 +246,7 @@ body{
/* ===== Why Choose Us ===== */ /* ===== Why Choose Us ===== */
.why-section { .why-section {
background: #F8F4F7; background: #F8F4F7;
overflow-x: hidden;
} }
.why-section li { .why-section li {
@ -255,12 +257,45 @@ body{
.why-section i { .why-section i {
color: #5E244E; color: #5E244E;
} }
.animate-on-scroll {
opacity: 0;
transition: all 1s ease-out;
}
.fade-up-init {
transform: translateY(40px);
}
.fade-left-init {
transform: translateX(50px);
}
.fade-right-init {
transform: translateX(-50px);
}
.zoom-in-init {
transform: scale(0.9);
}
.animate-on-scroll.animated {
opacity: 1;
transform: translateY(0) translateX(0) scale(1);
}
</style> </style>
{{-- ===================== HERO ===================== --}} {{-- ===================== HERO ===================== --}}
<section class="hero" role="banner" aria-label="Automobile Engineering Academy introduction"> <section class="hero" role="banner" aria-label="Automobile Engineering Academy introduction">
<div class="container"> <div class="container">
<div class="hero-content text-center">
<div class="hero-content text-center animate-on-scroll animated fade-up-init">
<h1 class="display-4 fw-bold"> <h1 class="display-4 fw-bold">
Automobile Engineering Academy Automobile Engineering Academy
</h1> </h1>
@ -286,10 +321,12 @@ body{
</section> </section>
{{-- ===================== OUR COURSES ===================== --}} {{-- ===================== OUR COURSES ===================== --}}
<section class="section py-5" aria-labelledby="courses-heading"> <section class="section py-5" aria-labelledby="courses-heading" >
<!-- style=" background: linear-gradient(rgba(177, 155, 185, 0.65),rgba(133, 118, 129, 0.65)),
url('https://images.unsplash.com/photo-1517524206127-48bbd363f3d7?auto=format&fit=crop&w=1600&q=80');" -->
<div class="container py-5"> <div class="container py-5">
<div class="text-center mb-5"> <div class="text-center mb-5 animate-on-scroll fade-up-init">
<h2 id="courses-heading">Our Courses</h2> <h2 id="courses-heading">Our Courses</h2>
<p class="text-muted"> <p class="text-muted">
Explore our professional automotive engineering courses. Explore our professional automotive engineering courses.
@ -329,8 +366,9 @@ body{
@endphp @endphp
<div class="row g-4 mb-5"> <div class="row g-4 mb-5">
@foreach($courses as $course) @foreach($courses as $index => $course)
<div class="col-lg-4 col-md-6">
<div class="col-lg-4 col-md-6 " style="transition-delay: {{ $index * 150 }}ms;">
<div class="card course-card h-100"> <div class="card course-card h-100">
<div class="course-image-wrapper"> <div class="course-image-wrapper">
@ -366,7 +404,7 @@ body{
@endforeach @endforeach
</div> </div>
<div class="text-center"> <div class="text-center animate-on-scroll fade-up-init">
<a href="/courses" class="btn btn-theme" style="border-radius: 40px;"> <a href="/courses" class="btn btn-theme" style="border-radius: 40px;">
View All Courses <i class="fa-solid fa-arrow-right ms-2"></i> View All Courses <i class="fa-solid fa-arrow-right ms-2"></i>
</a> </a>
@ -380,7 +418,8 @@ body{
<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-lg-6"> <!-- Image: Slides from Left -->
<div class="col-lg-6 animate-on-scroll fade-right-init">
<img src="https://images.unsplash.com/photo-1487754180451-c456f719a1fc?auto=format&fit=crop&w=900&q=80" <img src="https://images.unsplash.com/photo-1487754180451-c456f719a1fc?auto=format&fit=crop&w=900&q=80"
alt="Automotive Engineering Lab" alt="Automotive Engineering Lab"
class="img-fluid rounded shadow-sm" class="img-fluid rounded shadow-sm"
@ -390,7 +429,8 @@ body{
decoding="async"> decoding="async">
</div> </div>
<div class="col-lg-6"> <!-- Content: Slides from Right -->
<div class="col-lg-6 animate-on-scroll fade-left-init">
<h2 id="why-us-heading" class="fw-bold mb-4"> <h2 id="why-us-heading" class="fw-bold mb-4">
Why Choose Us? Why Choose Us?
</h2> </h2>
@ -419,7 +459,7 @@ body{
</section> </section>
{{-- ===================== CALL TO ACTION ===================== --}} {{-- ===================== CALL TO ACTION ===================== --}}
<section class="section py-5"> <section class="section py-5 animate-on-scroll zoom-in-init">
<div class="container text-center"> <div class="container text-center">
<h2 class="fw-bold mb-3"> <h2 class="fw-bold mb-3">
Join the Future of Automotive Engineering Join the Future of Automotive Engineering
@ -434,4 +474,24 @@ body{
</div> </div>
</section> </section>
<script>
document.addEventListener('DOMContentLoaded', function () {
const animatedElements = document.querySelectorAll('.animate-on-scroll');
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));
});
</script>
@endsection @endsection

View File

@ -1,8 +1,11 @@
<?php <?php
use Illuminate\Support\Facades\Route; use Illuminate\Support\Facades\Route;
use App\Http\Controllers\AuthController; use App\Http\Controllers\AuthController;
use App\Http\Controllers\StudentPortalController;
use App\Http\Controllers\ContactMsgController;
use App\Http\Controllers\FeedbackController;
use App\Http\Controllers\studentportalnavController;
/* /*
|-------------------------------------------------------------------------- |--------------------------------------------------------------------------
@ -15,27 +18,61 @@ Route::get('/', function () {
return view('welcome'); return view('welcome');
}); });
Route::post('/studentlogout', [studentportalnavController::class, 'logout']);
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('/signuppage', [AuthController::class, 'register']);
Route::post('/signin', [AuthController::class, 'login']); Route::post('/signin', [AuthController::class, 'login']);
Route::post('/custom-logout', [AuthController::class, 'logout']); 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');
// Static Pages (Views)
Route::view('/apply', 'apply')->name('apply'); Route::view('/apply', 'apply')->name('apply');
Route::view('/courses', 'courses')->name('courses'); 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');
// Route::get('/signup', function () { Route::view('/timetable','timetable')->name('timetable');
// return view('signup'); Route::view('/Assignments','Assignments')->name('Assignments');
// })->name('signup'); Route::view('/Studentguidelines','Studentguidelines')->name('Studentguidelines');
Route::view('/results','results')->name('results');
Route::view('/Feedback&Complain','Feedback&Complain')->name('Feedback&Complain');
Route::view('/StudentProfile','StudentProfile')->name('StudentProfile');