ui change new themes
This commit is contained in:
parent
5ca81c9b24
commit
a03cfc0f40
|
|
@ -1,111 +1,170 @@
|
|||
@extends('layouts.studentportalnav')
|
||||
|
||||
@section('title','Feedback & Complaint')
|
||||
@section('title', 'Feedback & Complaint')
|
||||
|
||||
@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{
|
||||
background:#f6f7fb;
|
||||
:root {
|
||||
--theme-navy: #2D355B; /* Primary Navy */
|
||||
--theme-navy-dark: #1F2541; /* Dark Navy */
|
||||
--theme-red: #822424; /* Primary Accent Red */
|
||||
--theme-red-hover: #df2c3e; /* Red Hover */
|
||||
--theme-yellow: #FFEA85; /* Accent Yellow/Gold */
|
||||
--bg-light: #F6F6F6; /* Page Background */
|
||||
--white: #ffffff;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
background: var(--bg-light);
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.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 {
|
||||
background: linear-gradient(135deg, #2B293F 0%, #94A6F959 100%) !important;
|
||||
color: var(--white);
|
||||
padding: 35px 30px;
|
||||
border-radius: 16px;
|
||||
margin-bottom: 30px;
|
||||
box-shadow: 0 8px 25px rgba(31, 37, 65, 0.15);
|
||||
border-left: 5px solid var(--theme-red);
|
||||
}
|
||||
|
||||
.feedback-header h2{
|
||||
font-weight:700;
|
||||
.feedback-header h2 {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.feedback-header p{
|
||||
color:#ddd;
|
||||
.feedback-header p {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Cards */
|
||||
.feedback-card{
|
||||
background:#fff;
|
||||
border-radius:20px;
|
||||
border:none;
|
||||
padding:30px;
|
||||
box-shadow:0 10px 30px rgba(0,0,0,.08);
|
||||
height:100%;
|
||||
.feedback-card {
|
||||
background: var(--white);
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 16px;
|
||||
padding: 30px;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, .04);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card-title{
|
||||
color:#5E244E;
|
||||
font-weight:700;
|
||||
margin-bottom:25px;
|
||||
.card-title {
|
||||
color: var(--theme-navy);
|
||||
font-weight: 700;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.card-title i{
|
||||
color:#d4af37;
|
||||
margin-right:8px;
|
||||
.card-title i {
|
||||
color: var(--theme-red);
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
/* Form Controls */
|
||||
.form-label {
|
||||
font-weight: 600;
|
||||
color: var(--theme-navy);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Inputs */
|
||||
.form-control,
|
||||
.form-select{
|
||||
border-radius:15px;
|
||||
padding:12px;
|
||||
border:1px solid #ddd;
|
||||
.form-select {
|
||||
border-radius: 10px;
|
||||
padding: 12px 15px;
|
||||
border: 1px solid #cbd5e1;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.form-control:focus,
|
||||
.form-select:focus{
|
||||
border-color:#744a68;
|
||||
box-shadow:0 0 0 .2rem rgba(94,36,78,.15);
|
||||
.form-select:focus {
|
||||
border-color: var(--theme-navy);
|
||||
box-shadow: 0 0 0 0.25rem rgba(45, 53, 91, 0.15);
|
||||
}
|
||||
|
||||
/* Button */
|
||||
.submit-btn{
|
||||
background:#5E244E;
|
||||
color:white;
|
||||
border:none;
|
||||
border-radius:50px;
|
||||
padding:12px 30px;
|
||||
font-weight:600;
|
||||
/* Buttons */
|
||||
.submit-btn {
|
||||
background: var(--theme-red) !important;
|
||||
color: var(--white) !important;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 12px 30px;
|
||||
font-weight: 600;
|
||||
transition: all 0.2s ease;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.submit-btn:hover{
|
||||
background:#4a1c3e;
|
||||
color:#fff;
|
||||
.submit-btn:hover {
|
||||
background: var(--theme-red-hover) !important;
|
||||
color: var(--white) !important;
|
||||
}
|
||||
|
||||
/* History */
|
||||
.history-card{
|
||||
margin-top:35px;
|
||||
background:white;
|
||||
border-radius:20px;
|
||||
overflow:hidden;
|
||||
box-shadow:0 10px 30px rgba(0,0,0,.08);
|
||||
/* History Card */
|
||||
.history-card {
|
||||
margin-top: 35px;
|
||||
background: var(--white);
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, .04);
|
||||
}
|
||||
|
||||
.history-head{
|
||||
background:#5E244E;
|
||||
color:white;
|
||||
padding:18px 25px;
|
||||
.history-head {
|
||||
background: var(--theme-navy);
|
||||
color: var(--white);
|
||||
padding: 18px 25px;
|
||||
}
|
||||
|
||||
.badge-status{
|
||||
padding:7px 15px;
|
||||
border-radius:50px;
|
||||
font-size:13px;
|
||||
.history-head h5 {
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.pending{
|
||||
background:#fff3cd;
|
||||
color:#856404;
|
||||
.table th {
|
||||
background: #f8fafc;
|
||||
color: var(--theme-navy);
|
||||
font-weight: 600;
|
||||
border-bottom: 2px solid #e2e8f0;
|
||||
padding: 14px 20px;
|
||||
}
|
||||
|
||||
.resolved{
|
||||
background:#d1e7dd;
|
||||
color:#0f5132;
|
||||
.table td {
|
||||
vertical-align: middle;
|
||||
padding: 14px 20px;
|
||||
}
|
||||
|
||||
/* Status Badges */
|
||||
.badge-status {
|
||||
padding: 6px 14px;
|
||||
border-radius: 30px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.pending {
|
||||
background: rgba(255, 234, 133, 0.4);
|
||||
color: #856404;
|
||||
}
|
||||
|
||||
.resolved {
|
||||
background: #d1e7dd;
|
||||
color: #0f5132;
|
||||
}
|
||||
|
||||
@media(max-width:768px) {
|
||||
.feedback-header, .feedback-card {
|
||||
padding: 25px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -113,89 +172,21 @@ body{
|
|||
|
||||
<!-- 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>
|
||||
<h2 class="mb-1"><i class="fas fa-comments me-2" style="color: var(--theme-yellow);"></i> Feedback & Complaint</h2>
|
||||
<p>Share your suggestions, feedback, or complaints with the 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
|
||||
|
||||
|
||||
<!-- Alert Messages (Validation & Success) -->
|
||||
@if(session('success'))
|
||||
<div class="alert alert-success alert-dismissible fade show" role="alert">
|
||||
{{ session('success') }}
|
||||
<div class="alert alert-success alert-dismissible fade show rounded-3 mb-4" role="alert">
|
||||
<i class="fas fa-check-circle me-2"></i>{{ session('success') }}
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if ($errors->any())
|
||||
<div class="alert alert-danger">
|
||||
<ul class="mb-0">
|
||||
<div class="alert alert-danger rounded-3 mb-4">
|
||||
<ul class="mb-0 ps-3">
|
||||
@foreach ($errors->all() as $error)
|
||||
<li>{{ $error }}</li>
|
||||
@endforeach
|
||||
|
|
@ -203,14 +194,23 @@ body{
|
|||
</div>
|
||||
@endif
|
||||
|
||||
<div class="row g-4">
|
||||
<!-- Feedback Form -->
|
||||
<div class="col-lg-6">
|
||||
<div class="feedback-card">
|
||||
<h4 class="card-title"><i class="fas fa-star"></i> Submit Feedback</h4>
|
||||
|
||||
<form id="feedbackForm" action="{{ route('feedback.store') }}" method="POST">
|
||||
@csrf
|
||||
|
||||
<div class="mb-3">
|
||||
<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>
|
||||
<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>
|
||||
|
||||
|
|
@ -219,24 +219,64 @@ body{
|
|||
<input type="text" class="form-control" id="feedbackSubject" name="subject" value="{{ old('subject') }}" placeholder="Enter subject" required>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<div class="mb-4">
|
||||
<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 type="submit" class="submit-btn shadow-sm">
|
||||
<i class="fas fa-paper-plane me-2"></i>Submit Feedback
|
||||
</button>
|
||||
</form>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Complaint Form -->
|
||||
<div class="col-lg-6">
|
||||
<div class="feedback-card">
|
||||
<h4 class="card-title"><i class="fas fa-exclamation-triangle"></i> Submit Complaint</h4>
|
||||
|
||||
<form id="complaintForm" action="{{ route('feedback.store') }}" method="POST">
|
||||
@csrf
|
||||
<input type="hidden" name="is_complaint" value="1"> <!-- IF NEEDED FOR BACKEND -->
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label"> Complaint Category</label>
|
||||
<select class="form-select" id="complaintCategory" name="complaint_category" required>
|
||||
<option value="">Select Category </option>
|
||||
<option value="Academic Issue"> Academic Issue</option>
|
||||
<option value="Staff Issue">Staff Issue </option>
|
||||
<option value="Technical Issue">Technical Issue</option>
|
||||
<option value="Other">Other</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label"> Complaint Title </label>
|
||||
<input type="text" class="form-control" id="complaintTitle" name="complaint_title" placeholder="Enter complaint title" required>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="form-label"> Complaint Details</label>
|
||||
<textarea class="form-control" id="complaintDetails" name="complaint_details" rows="5" placeholder="Explain your complaint" required></textarea>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="submit-btn shadow-sm">
|
||||
<i class="fas fa-paper-plane me-2"></i>Submit Complaint
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Previous History Table -->
|
||||
<div class="history-card">
|
||||
<div class="history-head">
|
||||
<h4 class="mb-0"><i class="fas fa-history"></i> Previous Requests</h4>
|
||||
<h5><i class="fas fa-history me-2" style="color: var(--theme-yellow);"></i> Previous Requests</h5>
|
||||
</div>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover mb-0">
|
||||
<table class="table table-hover align-middle mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th> Type </th>
|
||||
|
|
@ -248,16 +288,16 @@ body{
|
|||
|
||||
<tbody id="historyTableBody">
|
||||
<tr>
|
||||
<td>Feedback</td>
|
||||
<td><span class="fw-semibold" style="color: var(--theme-navy);">Feedback</span></td>
|
||||
<td>Workshop Equipment </td>
|
||||
<td>10 July 2026</td>
|
||||
<td><span class="badge-status resolved"> Resolved</span></td>
|
||||
<td><span class="badge-status resolved"><i class="fas fa-check me-1"></i> Resolved</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Complaint</td>
|
||||
<td><span class="fw-semibold" style="color: var(--theme-navy);">Complaint</span></td>
|
||||
<td>Class Schedule Issue </td>
|
||||
<td>05 July 2026 </td>
|
||||
<td><span class="badge-status pending"> Pending </span></td>
|
||||
<td><span class="badge-status pending"><i class="fas fa-clock me-1"></i> Pending </span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -266,6 +306,4 @@ body{
|
|||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@endsection
|
||||
|
|
@ -1,311 +1,295 @@
|
|||
@extends('layouts.studentportalnav')
|
||||
|
||||
@section('title','Dashboard')
|
||||
@section('title', 'Dashboard')
|
||||
|
||||
@section('content')
|
||||
|
||||
<style>
|
||||
:root{
|
||||
--primary:#5E244E;
|
||||
--secondary:#8B3A74;
|
||||
--light:#f5f6fb;
|
||||
--dark:#2d2d2d;
|
||||
:root {
|
||||
--theme-navy: #2D355B; /* Primary Dark Navy */
|
||||
--theme-footer-navy: #1F2541; /* Darker Navy */
|
||||
--theme-red: #822424; /* Primary Accent Red */
|
||||
--theme-red-hover: #df2c3e; /* Red Hover State */
|
||||
--theme-yellow: #FFEA85; /* Accent Gold/Yellow */
|
||||
--theme-bg: #F6F6F6; /* Page Background */
|
||||
--text-dark: #333333;
|
||||
}
|
||||
|
||||
body{
|
||||
background:var(--light);
|
||||
body {
|
||||
background-color: var(--theme-bg);
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.dashboard-header{
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
align-items:center;
|
||||
margin-bottom:30px;
|
||||
.dashboard-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 2px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.dashboard-header h2{
|
||||
font-weight:700;
|
||||
color:var(--dark);
|
||||
.dashboard-header h2 {
|
||||
font-weight: 700;
|
||||
color: var(--theme-navy);
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.dashboard-header p{
|
||||
color:#777;
|
||||
margin:0;
|
||||
.dashboard-header p {
|
||||
color: #6c757d;
|
||||
margin: 0;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
.avatar {
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
border-radius: 50%;
|
||||
background: var(--theme-navy);
|
||||
color: var(--theme-yellow);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
/* 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 {
|
||||
background: #ffffff;
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
|
||||
transition: all 0.3s ease;
|
||||
height: 100%;
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.stat-card:hover{
|
||||
transform:translateY(-6px);
|
||||
.stat-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 20px rgba(45, 53, 91, 0.12);
|
||||
border-color: var(--theme-navy);
|
||||
}
|
||||
|
||||
.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-icon {
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #ffffff;
|
||||
font-size: 22px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.stat-card h3{
|
||||
font-weight:700;
|
||||
margin-bottom:5px;
|
||||
.stat-card h3 {
|
||||
font-weight: 700;
|
||||
color: var(--theme-navy);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.stat-card p{
|
||||
color:#777;
|
||||
margin:0;
|
||||
.stat-card p {
|
||||
color: #6c757d;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Services */
|
||||
|
||||
.section-title{
|
||||
font-size:24px;
|
||||
font-weight:bold;
|
||||
margin:40px 0 20px;
|
||||
.section-title {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: var(--theme-navy);
|
||||
margin: 40px 0 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.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%;
|
||||
.section-title::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 5px;
|
||||
height: 24px;
|
||||
background-color: var(--theme-red);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.service-card:hover{
|
||||
transform:translateY(-8px);
|
||||
.service-card {
|
||||
background: #ffffff;
|
||||
border-radius: 12px;
|
||||
padding: 30px 20px;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
|
||||
height: 100%;
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.service-card i{
|
||||
font-size:45px;
|
||||
color: #6C2B2E;
|
||||
margin-bottom:20px;
|
||||
.service-card:hover {
|
||||
transform: translateY(-6px);
|
||||
box-shadow: 0 8px 22px rgba(0,0,0,0.1);
|
||||
border-color: var(--theme-red);
|
||||
}
|
||||
|
||||
.service-card h5{
|
||||
font-weight:700;
|
||||
color: #773939;
|
||||
.service-card i {
|
||||
font-size: 40px;
|
||||
color: var(--theme-red);
|
||||
margin-bottom: 16px;
|
||||
transition: transform 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
.service-card p{
|
||||
color:#777;
|
||||
font-size:14px;
|
||||
.service-card:hover i {
|
||||
transform: scale(1.1);
|
||||
color: var(--theme-red-hover);
|
||||
}
|
||||
|
||||
.service-card h5 {
|
||||
font-weight: 700;
|
||||
color: var(--theme-navy);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.service-card p {
|
||||
color: #6c757d;
|
||||
font-size: 13.5px;
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
|
||||
<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">
|
||||
<!-- Dashboard Header -->
|
||||
<div class="dashboard-header">
|
||||
<div>
|
||||
<h2>Welcome Back, {{ Auth::check() ? Auth::user()->first_name : 'Student' }}!</h2>
|
||||
<p>Manage your academic activities and course updates from your dashboard.</p>
|
||||
</div>
|
||||
|
||||
@if(Auth::check())
|
||||
<div class="avatar" title="{{ Auth::user()->first_name }}">
|
||||
{{ strtoupper(substr(Auth::user()->first_name, 0, 1)) }}
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<!-- Statistics Cards -->
|
||||
<div class="row g-4">
|
||||
|
||||
<div class="col-lg-3 col-md-6">
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon" style="background: var(--theme-navy);">
|
||||
<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: var(--theme-red);">
|
||||
<i class="fa-solid fa-bell"></i>
|
||||
</div>
|
||||
<h3>2</h3>
|
||||
<p>Exam Notices</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Student Services Section -->
|
||||
<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">
|
||||
<div class="service-card">
|
||||
<i class="fas fa-user"></i> Profile
|
||||
</a> -->
|
||||
<h5>Student Profile</h5>
|
||||
<i class="fa-solid fa-book"></i>
|
||||
<h5>My Courses</h5>
|
||||
<p>Access all learning materials, lectures, and course content.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<p>Update your personal information.</p>
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<a href="/timetable" class="text-decoration-none">
|
||||
<div class="service-card">
|
||||
<i class="fa-solid fa-calendar-days"></i>
|
||||
<h5>Class Timetable</h5>
|
||||
<p>View your weekly lecture schedule and upcoming classes.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<a href="/results" class="text-decoration-none">
|
||||
<div class="service-card">
|
||||
<i class="fa-solid fa-square-poll-vertical"></i>
|
||||
<h5>Exam Results</h5>
|
||||
<p>Check semester examination marks and performance reports.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<a href="/Studentguidelines" class="text-decoration-none">
|
||||
<div class="service-card">
|
||||
<i class="fa-solid fa-book-open"></i>
|
||||
<h5>Student Guidelines</h5>
|
||||
<p>Read campus rules, regulations, and academic guidelines.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<a href="/Feedback&Complain" class="text-decoration-none">
|
||||
<div class="service-card">
|
||||
<i class="fa-solid fa-comments"></i>
|
||||
<h5>Feedback & Complaint</h5>
|
||||
<p>Send feedback or submit inquiries directly to administration.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<a href="/StudentProfile" class="text-decoration-none">
|
||||
<div class="service-card">
|
||||
<i class="fa-solid fa-user"></i>
|
||||
<h5>Student Profile</h5>
|
||||
<p>Manage and update your personal student profile details.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,240 +4,207 @@
|
|||
|
||||
@section('content')
|
||||
|
||||
<style>
|
||||
<!-- Bootstrap 5 -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
body{
|
||||
background:#f6f7fb;
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
|
||||
<!-- Google Font -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--theme-navy: #2D355B; /* Primary Navy */
|
||||
--theme-navy-dark: #1F2541; /* Dark Navy */
|
||||
--theme-red: #822424; /* Primary Accent Red */
|
||||
--theme-red-hover: #df2c3e; /* Red Hover */
|
||||
--theme-yellow: #FFEA85; /* Accent Yellow/Gold */
|
||||
--bg-light: #F6F6F6; /* Page Background */
|
||||
--white: #ffffff;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
background: var(--bg-light);
|
||||
}
|
||||
|
||||
/* 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 {
|
||||
background: linear-gradient(135deg, var(--theme-navy) 0%, var(--theme-navy-dark) 100%) !important;
|
||||
color: var(--white);
|
||||
border-radius: 16px;
|
||||
padding: 35px 30px;
|
||||
margin-bottom: 30px;
|
||||
box-shadow: 0 8px 25px rgba(31, 37, 65, 0.15);
|
||||
border-left: 5px solid var(--theme-red);
|
||||
}
|
||||
|
||||
|
||||
.profile-header h2{
|
||||
|
||||
font-weight:700;
|
||||
|
||||
.profile-header h2 {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
|
||||
.profile-header p{
|
||||
|
||||
color:#ddd;
|
||||
|
||||
.profile-header p {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Profile Card */
|
||||
|
||||
.profile-card{
|
||||
|
||||
background:#fff;
|
||||
border-radius:20px;
|
||||
padding:30px;
|
||||
box-shadow:0 10px 30px rgba(0,0,0,.08);
|
||||
height:100%;
|
||||
|
||||
.profile-card {
|
||||
background: var(--white);
|
||||
border-radius: 16px;
|
||||
padding: 30px;
|
||||
border: 1px solid #e2e8f0;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, .04);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Student Image */
|
||||
|
||||
.profile-image{
|
||||
|
||||
width:150px;
|
||||
height:150px;
|
||||
border-radius:50%;
|
||||
object-fit:cover;
|
||||
border:6px solid #d4af37;
|
||||
|
||||
.profile-image {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 4px solid var(--theme-navy);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
|
||||
.student-name{
|
||||
|
||||
color:#5E244E;
|
||||
font-weight:700;
|
||||
margin-top:15px;
|
||||
|
||||
.student-name {
|
||||
color: var(--theme-navy);
|
||||
font-weight: 700;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
|
||||
.student-id{
|
||||
|
||||
background:#5E244E;
|
||||
color:#fff;
|
||||
padding:8px 20px;
|
||||
border-radius:50px;
|
||||
display:inline-block;
|
||||
font-size:14px;
|
||||
|
||||
.student-id {
|
||||
background: var(--theme-navy);
|
||||
color: var(--white);
|
||||
padding: 8px 20px;
|
||||
border-radius: 50px;
|
||||
display: inline-block;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Information */
|
||||
|
||||
.info-title{
|
||||
|
||||
color:#5E244E;
|
||||
font-weight:700;
|
||||
border-bottom:2px solid #d4af37;
|
||||
padding-bottom:10px;
|
||||
margin-bottom:20px;
|
||||
|
||||
.info-title {
|
||||
color: var(--theme-navy);
|
||||
font-weight: 700;
|
||||
border-bottom: 2px solid var(--theme-yellow);
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
|
||||
.info-row{
|
||||
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
padding:12px 0;
|
||||
border-bottom:1px solid #eee;
|
||||
|
||||
.info-title i {
|
||||
color: var(--theme-red);
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
|
||||
.label{
|
||||
|
||||
color:#777;
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
}
|
||||
|
||||
|
||||
.value{
|
||||
|
||||
font-weight:600;
|
||||
color:#333;
|
||||
|
||||
.info-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Course */
|
||||
|
||||
.course-box{
|
||||
|
||||
background:#5E244E;
|
||||
color:#fff;
|
||||
padding:25px;
|
||||
border-radius:20px;
|
||||
|
||||
.label {
|
||||
color: #64748b;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
||||
.course-box h4{
|
||||
|
||||
color:#d4af37;
|
||||
font-weight:700;
|
||||
|
||||
.value {
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
|
||||
.course-item{
|
||||
|
||||
margin-top:12px;
|
||||
|
||||
/* Course Box */
|
||||
.course-box {
|
||||
background: linear-gradient(135deg, var(--theme-navy) 0%, var(--theme-navy-dark) 100%);
|
||||
color: var(--white);
|
||||
padding: 30px;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 8px 25px rgba(31, 37, 65, 0.15);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
.course-item i{
|
||||
|
||||
color:#d4af37;
|
||||
width:25px;
|
||||
|
||||
.course-box h4 {
|
||||
color: var(--theme-yellow);
|
||||
font-weight: 700;
|
||||
margin-bottom: 20px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Button */
|
||||
|
||||
.edit-btn{
|
||||
|
||||
background:#d4af37;
|
||||
color:white;
|
||||
border:none;
|
||||
border-radius:50px;
|
||||
padding:12px 30px;
|
||||
font-weight:600;
|
||||
|
||||
.course-item {
|
||||
margin-top: 14px;
|
||||
font-size: 15px;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
|
||||
.edit-btn:hover{
|
||||
|
||||
background:#c49d20;
|
||||
color:#fff;
|
||||
|
||||
.course-item i {
|
||||
color: var(--theme-yellow);
|
||||
width: 28px;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.edit-btn {
|
||||
background: var(--theme-red) !important;
|
||||
color: var(--white) !important;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 10px 25px;
|
||||
font-weight: 600;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.edit-btn:hover {
|
||||
background: var(--theme-red-hover) !important;
|
||||
color: var(--white) !important;
|
||||
}
|
||||
|
||||
@media(max-width:768px) {
|
||||
.profile-header, .profile-card, .course-box {
|
||||
padding: 25px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
<div class="container py-4">
|
||||
|
||||
|
||||
<!-- Header -->
|
||||
|
||||
<div class="profile-header">
|
||||
|
||||
|
||||
<h2>
|
||||
|
||||
<i class="fas fa-user-graduate"></i>
|
||||
|
||||
<i class="fas fa-user-graduate me-2" style="color: var(--theme-yellow);"></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>
|
||||
<img src="https://i.pravatar.cc/300" class="profile-image mb-2">
|
||||
<h3 class="student-name">Kasun Perera</h3>
|
||||
|
||||
<span class="student-id">
|
||||
<span class="student-id my-2">
|
||||
Student ID : AEA20260045
|
||||
</span>
|
||||
<hr>
|
||||
<hr class="my-3" style="color: #cbd5e1;">
|
||||
|
||||
<button class="edit-btn mt-3">
|
||||
<i class="fas fa-edit"></i> Edit Profile </button>
|
||||
<button class="edit-btn shadow-sm">
|
||||
<i class="fas fa-edit me-1"></i> Edit Profile
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Details -->
|
||||
<div class="col-lg-8">
|
||||
<div class="profile-card">
|
||||
|
|
@ -247,62 +214,33 @@ body{
|
|||
</h4>
|
||||
|
||||
<div class="info-row">
|
||||
<span class="label">
|
||||
Full Name
|
||||
</span>
|
||||
<span class="value">
|
||||
Kasuni Perera
|
||||
</span>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<span class="label">Phone</span>
|
||||
<span class="value">+94 77 1234567</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -311,8 +249,6 @@ body{
|
|||
|
||||
<div class="row g-4 mt-1">
|
||||
|
||||
|
||||
|
||||
<!-- Education -->
|
||||
<div class="col-lg-6">
|
||||
<div class="profile-card">
|
||||
|
|
@ -321,66 +257,41 @@ body{
|
|||
Educational Background
|
||||
</h4>
|
||||
<div class="info-row">
|
||||
<span class="label">
|
||||
Qualification
|
||||
</span>
|
||||
|
||||
<span class="value">
|
||||
NVQ Level 4
|
||||
</span>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<h4><i class="fas fa-car me-2"></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>
|
||||
|
||||
<i class="fas fa-book"></i> Diploma in Automobile Engineering
|
||||
</div>
|
||||
<div class="course-item">
|
||||
<i class="fas fa-layer-group"></i>Current Semester : Semester 2
|
||||
<i class="fas fa-calendar"></i> Duration : 2 Years
|
||||
</div>
|
||||
<div class="course-item">
|
||||
<i class="fas fa-layer-group"></i> Current Semester : Semester 2
|
||||
</div>
|
||||
<div class="course-item">
|
||||
<i class="fas fa-user-tie"></i> Trainer : Mr. Nimal Silva
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="course-item">
|
||||
<i class="fas fa-user-tie"></i>
|
||||
Trainer : Mr. Nimal Silva
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@endsection
|
||||
|
|
@ -4,469 +4,348 @@
|
|||
|
||||
@section('content')
|
||||
|
||||
<!-- Bootstrap 5 -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
|
||||
<!-- Google Font -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--theme-navy: #2D355B; /* Primary Navy */
|
||||
--theme-navy-dark: #1F2541; /* Dark Navy */
|
||||
--theme-red: #822424; /* Primary Accent Red */
|
||||
--theme-red-hover: #df2c3e; /* Red Hover */
|
||||
--theme-yellow: #FFEA85; /* Accent Yellow/Gold */
|
||||
--bg-light: #F6F6F6; /* Page Background */
|
||||
--white: #ffffff;
|
||||
}
|
||||
|
||||
body{
|
||||
background:#f6f7fb;
|
||||
body {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
background: var(--bg-light);
|
||||
}
|
||||
|
||||
/*==========================
|
||||
Hero
|
||||
Hero Section
|
||||
===========================*/
|
||||
|
||||
.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 {
|
||||
background: linear-gradient(135deg, #2B293F 0%, #94A6F959 100%) !important;
|
||||
border-radius: 16px;
|
||||
padding: 35px 30px;
|
||||
color: var(--white);
|
||||
margin-bottom: 30px;
|
||||
box-shadow: 0 8px 25px rgba(31, 37, 65, 0.15);
|
||||
border-left: 5px solid var(--theme-red);
|
||||
}
|
||||
|
||||
.guideline-hero h2{
|
||||
font-weight:700;
|
||||
margin-bottom:10px;
|
||||
.guideline-hero h2 {
|
||||
font-weight: 700;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.guideline-hero p{
|
||||
color:#ececec;
|
||||
margin-bottom:0;
|
||||
font-size:15px;
|
||||
.guideline-hero p {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
margin-bottom: 0;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
/*==========================
|
||||
Cards
|
||||
Guide 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 {
|
||||
background: var(--white);
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, .04);
|
||||
transition: all 0.3s ease;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.guide-card:hover{
|
||||
|
||||
transform:translateY(-6px);
|
||||
|
||||
.guide-card:hover {
|
||||
transform: translateY(-4px);
|
||||
border-color: var(--theme-navy);
|
||||
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.card-head{
|
||||
|
||||
background:#5E244E;
|
||||
color:#fff;
|
||||
padding:18px 22px;
|
||||
|
||||
.card-head {
|
||||
background: #753636;
|
||||
color: var(--white);
|
||||
padding: 18px 22px;
|
||||
}
|
||||
|
||||
.card-head h5{
|
||||
|
||||
margin:0;
|
||||
font-weight:600;
|
||||
|
||||
.card-head h5 {
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.card-head i{
|
||||
|
||||
color:#d4af37;
|
||||
margin-right:10px;
|
||||
|
||||
.card-head i {
|
||||
color: var(--theme-yellow);
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.card-body{
|
||||
|
||||
padding:22px;
|
||||
|
||||
.card-body {
|
||||
padding: 22px;
|
||||
}
|
||||
|
||||
.card-body ul{
|
||||
|
||||
padding-left:20px;
|
||||
|
||||
.card-body ul {
|
||||
padding-left: 20px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.card-body li{
|
||||
|
||||
margin-bottom:10px;
|
||||
color:#555;
|
||||
.card-body li {
|
||||
margin-bottom: 10px;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.card-body li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/*==========================
|
||||
Alert
|
||||
Notice Alert Box
|
||||
===========================*/
|
||||
|
||||
.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 {
|
||||
background: rgba(255, 234, 133, 0.2);
|
||||
border-left: 5px solid var(--theme-red);
|
||||
border-radius: 16px;
|
||||
padding: 22px;
|
||||
margin-top: 35px;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, .03);
|
||||
}
|
||||
|
||||
.notice h5{
|
||||
|
||||
color:#5E244E;
|
||||
font-weight:700;
|
||||
|
||||
.notice h5 {
|
||||
color: var(--theme-navy);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.notice p{
|
||||
|
||||
margin-bottom:0;
|
||||
color:#555;
|
||||
|
||||
.notice p {
|
||||
margin-bottom: 0;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
/*==========================
|
||||
Contact
|
||||
Contact Box
|
||||
===========================*/
|
||||
|
||||
.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 {
|
||||
margin-top: 30px;
|
||||
border-radius: 16px;
|
||||
background: linear-gradient(135deg, #2B293F 0%, #94A6F959 100%) !important;
|
||||
color: var(--white);
|
||||
padding: 35px;
|
||||
box-shadow: 0 8px 25px rgba(31, 37, 65, 0.15);
|
||||
}
|
||||
|
||||
.contact-card h4{
|
||||
|
||||
color:#d4af37;
|
||||
font-weight:700;
|
||||
|
||||
.contact-card h4 {
|
||||
color: var(--theme-yellow);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.contact-item{
|
||||
|
||||
margin-top:18px;
|
||||
font-size:15px;
|
||||
|
||||
.contact-item {
|
||||
margin-top: 18px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.contact-item i{
|
||||
|
||||
color:#d4af37;
|
||||
width:28px;
|
||||
|
||||
.contact-item i {
|
||||
color: var(--theme-yellow);
|
||||
width: 28px;
|
||||
}
|
||||
|
||||
@media(max-width:768px) {
|
||||
.guideline-hero, .contact-card {
|
||||
padding: 25px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container py-4">
|
||||
|
||||
<!-- Hero -->
|
||||
|
||||
<div class="guideline-hero">
|
||||
|
||||
<h2>
|
||||
<i class="fas fa-book-open"></i>
|
||||
<i class="fas fa-book-open me-2" style="color: var(--theme-yellow);"></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>
|
||||
|
||||
<!-- Guidelines Cards -->
|
||||
<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>
|
||||
<i class="fas fa-exclamation-circle me-1" style="color: var(--theme-red);"></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>
|
||||
<i class="fas fa-headset me-2"></i>
|
||||
Student Support
|
||||
|
||||
</h4>
|
||||
|
||||
<p class="mt-3">
|
||||
|
||||
<p class="mt-3 text-white-50">
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,466 @@
|
|||
<!-- feedback controller function -->
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- use Illuminate\Http\Request;
|
||||
use App\Models\Feedback;
|
||||
use App\Models\user; -->
|
||||
|
||||
|
||||
|
||||
<!-- // public function feedback(Request $request)
|
||||
// {
|
||||
|
||||
// $request->validate([
|
||||
// 'feedback_type' => 'required',
|
||||
// 'subject' => 'required|string|max:255',
|
||||
// 'feedback_text' => 'required|string',
|
||||
// ]);
|
||||
|
||||
|
||||
// Feedback::create([
|
||||
// 'student_id' => auth()->id(),
|
||||
// 'feedback_type' => $request->feedback_type,
|
||||
// 'subject' => $request->subject,
|
||||
// 'feedback_text' => $request->feedback_text,
|
||||
// 'status' => 'Pending',
|
||||
// ]);
|
||||
|
||||
// return redirect()->back()->with('success', 'Feedback submitted successfully!');
|
||||
// }
|
||||
|
||||
|
||||
// public function feedback(Request $request)
|
||||
// {
|
||||
// $request->validate([
|
||||
// 'feedback_type' => 'required',
|
||||
// 'subject' => 'required|string|max:255',
|
||||
// 'feedback_text' => 'required|string',
|
||||
// ]);
|
||||
|
||||
|
||||
// $studentLogId = session('student_portal_log_id');
|
||||
|
||||
|
||||
// if (!$studentLogId) {
|
||||
// return redirect('/students')->with('error', 'Please login first to submit feedback!');
|
||||
// }
|
||||
|
||||
// Feedback::create([
|
||||
// 'student_id' => $studentLogId,
|
||||
// 'feedback_type' => $request->feedback_type,
|
||||
// 'subject' => $request->subject,
|
||||
// 'feedback_text' => $request->feedback_text,
|
||||
// 'status' => 'Pending',
|
||||
// ]);
|
||||
|
||||
// return redirect('/Feedback&Complain')->back()->with('success', 'Feedback submitted successfully!');}
|
||||
// -->
|
||||
|
||||
|
||||
########### ########### ########### ########### ########### ########### ########### ###########
|
||||
|
||||
|
||||
<!-- js table data view -->
|
||||
|
||||
|
||||
<!-- JavaScript to handle Submissions -->
|
||||
<!-- <script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const tableBody = document.getElementById('historyTableBody');
|
||||
|
||||
|
||||
function getFormattedDate() {
|
||||
const options = { day: '2-digit', month: 'long', year: 'numeric' };
|
||||
return new Date().toLocaleDateString('en-GB', options);
|
||||
}
|
||||
|
||||
|
||||
document.getElementById('feedbackForm').addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const subject = document.getElementById('feedbackSubject').value;
|
||||
const date = getFormattedDate();
|
||||
|
||||
|
||||
const newRow = document.createElement('tr');
|
||||
newRow.innerHTML = `
|
||||
<td>Feedback</td>
|
||||
<td>${subject}</td>
|
||||
<td>${date}</td>
|
||||
<td><span class="badge-status pending"> Pending </span></td>
|
||||
`;
|
||||
|
||||
|
||||
tableBody.insertBefore(newRow, tableBody.firstChild);
|
||||
|
||||
|
||||
this.reset();
|
||||
alert('Feedback submitted successfully!');
|
||||
});
|
||||
|
||||
// 2. Complaint Form Submission
|
||||
document.getElementById('complaintForm').addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const title = document.getElementById('complaintTitle').value;
|
||||
const date = getFormattedDate();
|
||||
|
||||
const newRow = document.createElement('tr');
|
||||
newRow.innerHTML = `
|
||||
<td>Complaint</td>
|
||||
<td>${title}</td>
|
||||
<td>${date}</td>
|
||||
<td><span class="badge-status pending"> Pending </span></td>
|
||||
`;
|
||||
|
||||
tableBody.insertBefore(newRow, tableBody.firstChild);
|
||||
|
||||
this.reset();
|
||||
alert('Complaint submitted successfully!');
|
||||
});
|
||||
});
|
||||
</script> -->
|
||||
|
||||
|
||||
|
||||
########### ########### ########### ########### ########### ########### ########### ###########
|
||||
|
||||
<!-- student view profile blade -->
|
||||
|
||||
|
||||
|
||||
<!-- @extends('layouts.studentportalnav')
|
||||
|
||||
@section('title', 'Student Profile')
|
||||
|
||||
@section('content')
|
||||
|
||||
<style>
|
||||
|
||||
body{
|
||||
background:#f6f7fb;
|
||||
}
|
||||
|
||||
|
||||
/* Header */
|
||||
|
||||
.profile-header{
|
||||
|
||||
background:linear-gradient(135deg,#5E244E,#4a1c3e);
|
||||
color:#fff;
|
||||
border-radius:20px;
|
||||
padding:40px;
|
||||
margin-bottom:35px;
|
||||
box-shadow:0 15px 35px rgba(0,0,0,.15);
|
||||
|
||||
}
|
||||
|
||||
|
||||
.profile-header h2{
|
||||
|
||||
font-weight:700;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.profile-header p{
|
||||
|
||||
color:#ddd;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Profile Card */
|
||||
|
||||
.profile-card{
|
||||
|
||||
background:#fff;
|
||||
border-radius:20px;
|
||||
padding:30px;
|
||||
box-shadow:0 10px 30px rgba(0,0,0,.08);
|
||||
height:100%;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Student Image */
|
||||
|
||||
.profile-image{
|
||||
|
||||
width:150px;
|
||||
height:150px;
|
||||
border-radius:50%;
|
||||
object-fit:cover;
|
||||
border:6px solid #d4af37;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.student-name{
|
||||
|
||||
color:#5E244E;
|
||||
font-weight:700;
|
||||
margin-top:15px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.student-id{
|
||||
|
||||
background:#5E244E;
|
||||
color:#fff;
|
||||
padding:8px 20px;
|
||||
border-radius:50px;
|
||||
display:inline-block;
|
||||
font-size:14px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Information */
|
||||
|
||||
.info-title{
|
||||
|
||||
color:#5E244E;
|
||||
font-weight:700;
|
||||
border-bottom:2px solid #d4af37;
|
||||
padding-bottom:10px;
|
||||
margin-bottom:20px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.info-row{
|
||||
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
padding:12px 0;
|
||||
border-bottom:1px solid #eee;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.label{
|
||||
|
||||
color:#777;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.value{
|
||||
|
||||
font-weight:600;
|
||||
color:#333;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Course */
|
||||
|
||||
.course-box{
|
||||
|
||||
background:#5E244E;
|
||||
color:#fff;
|
||||
padding:25px;
|
||||
border-radius:20px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.course-box h4{
|
||||
|
||||
color:#d4af37;
|
||||
font-weight:700;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.course-item{
|
||||
|
||||
margin-top:12px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.course-item i{
|
||||
|
||||
color:#d4af37;
|
||||
width:25px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Button */
|
||||
|
||||
.edit-btn{
|
||||
|
||||
background:#d4af37;
|
||||
color:white;
|
||||
border:none;
|
||||
border-radius:50px;
|
||||
padding:12px 30px;
|
||||
font-weight:600;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.edit-btn:hover{
|
||||
|
||||
background:#c49d20;
|
||||
color:#fff;
|
||||
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
<div class="container py-4">
|
||||
|
||||
|
||||
Header -->
|
||||
|
||||
<!-- <div class="profile-header">
|
||||
<h2> <i class="fas fa-user-graduate"></i>Student Profile </h2>
|
||||
<p>Manage your personal information and academic details. </p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-lg-4">
|
||||
<div class="profile-card text-center">
|
||||
|
||||
<img src="{{ !empty($student->image) ? asset($student->image) : 'https://i.pravatar.cc/300' }}"
|
||||
class="profile-image" alt="Profile Image">
|
||||
|
||||
<h3 class="student-name">{{ $student->full_name }}</h3>
|
||||
|
||||
<span class="student-id">
|
||||
Student ID : {{ $student->student_id }}
|
||||
</span>
|
||||
<hr>
|
||||
|
||||
<button class="edit-btn mt-3">
|
||||
<i class="fas fa-edit"></i> Edit Profile
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Details -->
|
||||
<!-- <div class="col-lg-8">
|
||||
<div class="profile-card">
|
||||
<h4 class="info-title">
|
||||
<i class="fas fa-user"></i>
|
||||
Personal Information
|
||||
</h4>
|
||||
|
||||
<div class="info-row">
|
||||
<span class="label">Full Name</span>
|
||||
<span class="value">{{ $student->full_name }}</span>
|
||||
</div>
|
||||
|
||||
<div class="info-row">
|
||||
<span class="label">NIC / Passport</span>
|
||||
<span class="value">{{ $student->nic_passport }}</span>
|
||||
</div>
|
||||
|
||||
<div class="info-row">
|
||||
<span class="label">Date of Birth</span>
|
||||
<span class="value">
|
||||
{{ date('d F Y', strtotime($student->date_of_birth)) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="info-row">
|
||||
<span class="label">Gender</span>
|
||||
<span class="value">{{ $student->gender }}</span>
|
||||
</div>
|
||||
|
||||
<div class="info-row">
|
||||
<span class="label">Email</span>
|
||||
<span class="value">{{ $student->email }}</span>
|
||||
</div>
|
||||
|
||||
<div class="info-row">
|
||||
<span class="label">Phone</span>
|
||||
<span class="value">{{ $student->phone }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-4 mt-1"> -->
|
||||
<!-- Education -->
|
||||
<!-- <div class="col-lg-6">
|
||||
<div class="profile-card">
|
||||
<h4 class="info-title">
|
||||
<i class="fas fa-graduation-cap"></i>
|
||||
Educational Background
|
||||
</h4>
|
||||
<div class="info-row">
|
||||
<span class="label">Qualification</span>
|
||||
<span class="value">{{ $student->qualification }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">Institute</span>
|
||||
<span class="value">{{ $student->institute }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="label">Year Completed</span>
|
||||
<span class="value">{{ $student->year_completed }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- Course Details -->
|
||||
<!-- <div class="col-lg-6">
|
||||
<div class="course-box">
|
||||
<h4><i class="fas fa-car"></i>Course Details</h4>
|
||||
|
||||
<div class="course-item">
|
||||
<i class="fas fa-book"></i> {{ $student->course_name }}
|
||||
</div>
|
||||
<div class="course-item">
|
||||
<i class="fas fa-calendar"></i> Duration : {{ $student->duration }}
|
||||
</div>
|
||||
<div class="course-item">
|
||||
<i class="fas fa-layer-group"></i> Current Semester : {{ $student->current_semester }}
|
||||
</div>
|
||||
<div class="course-item">
|
||||
<i class="fas fa-user-tie"></i> Trainer : {{ $student->trainer_name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@endsection -->
|
||||
|
||||
########### ########### ########### ########### ########### ########### ########### ###########
|
||||
|
||||
<!-- // Home Page
|
||||
Route::get('/', function () {
|
||||
return view('welcome');
|
||||
});
|
||||
|
||||
|
||||
// Route::get('/StudentProfile', [studentsController::class, 'showProfile'])->name('StudentProfile');
|
||||
|
||||
Route::post('/studentlogout', [studentportalnavController::class, 'logout']);
|
||||
|
||||
// Route::post('/feedback', [FeedbackController ::class, 'feedback'])->name('feedback.store'); -->
|
||||
<!--
|
||||
Route::post('/feedback/store', [FeedbackController::class, 'feedback']) ->middleware('auth') ->name('feedback.store');
|
||||
|
||||
|
||||
Route::post('/contact-submit', [ContactMsgController::class, 'store'])->name('contact.store'); -->
|
||||
|
||||
|
||||
|
||||
|
|
@ -4,32 +4,35 @@
|
|||
<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>
|
||||
<title>@yield('title', 'Student Portal - Automobile Academic')</title>
|
||||
|
||||
<!-- Font Awesome Icons -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<!-- Font Awesome Icons & Bootstrap 5 -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
/* Global Root Variables */
|
||||
/* Global Root Variables based on Master Layout */
|
||||
:root {
|
||||
--primary: #642326;
|
||||
--background: #f5f6fb;
|
||||
--theme-navy: #2D355B; /* Primary Dark Navy */
|
||||
--theme-footer-navy: #1F2541; /* Dark Navy for active/hover states */
|
||||
--theme-red: #822424; /* Primary Accent Red */
|
||||
--theme-red-hover: #df2c3e; /* Red Hover state */
|
||||
--theme-yellow: #FFEA85; /* Accent Yellow/Gold */
|
||||
--theme-bg: #F6F6F6; /* Light Background */
|
||||
--sidebar-width: 260px;
|
||||
--text-color: #333333;
|
||||
--sidebar-bg: #282d55;
|
||||
--text-dark: #333333;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
font-family: 'Segoe UI', sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background);
|
||||
color: var(--text-color);
|
||||
background-color: var(--theme-bg);
|
||||
color: var(--text-dark);
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
|
|
@ -39,7 +42,7 @@
|
|||
.sidebar {
|
||||
width: var(--sidebar-width);
|
||||
height: 100vh;
|
||||
background: var(--sidebar-bg);
|
||||
background: var(--theme-navy);
|
||||
color: #fff;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
|
@ -49,51 +52,37 @@
|
|||
z-index: 1030;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 2px 0 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.sidebar .brand {
|
||||
padding: 0 24px 24px;
|
||||
padding: 0 24px 20px;
|
||||
font-weight: 700;
|
||||
font-size: 1.2rem;
|
||||
border-bottom: 1px solid rgba(255,255,255,.12);
|
||||
font-size: 1.25rem;
|
||||
color: #ffffff;
|
||||
border-bottom: 1px solid rgba(255,255,255,.15);
|
||||
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;
|
||||
color: #2e2750;
|
||||
}
|
||||
|
||||
.sidebar .nav-link {
|
||||
color: rgba(255,255,255,.75);
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
padding: 14px 24px;
|
||||
font-size: .95rem;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
transition: .2s;
|
||||
border-left: 3px solid transparent;
|
||||
transition: all 0.2s ease;
|
||||
border-left: 4px solid transparent;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -102,26 +91,53 @@
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
/* Hover & Active states matched to Main Theme */
|
||||
.sidebar .nav-link:hover {
|
||||
background: rgba(255,255,255,.06);
|
||||
color: #fff;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: var(--theme-yellow) !important;
|
||||
padding-left: 28px;
|
||||
}
|
||||
|
||||
.sidebar .nav-link.active {
|
||||
background: rgba(255,255,255,.1);
|
||||
color: #fff;
|
||||
border-left: 3px solid #fff;
|
||||
font-weight: 600;
|
||||
background: var(--theme-footer-navy);
|
||||
color: var(--theme-yellow) !important;
|
||||
border-left: 4px solid #F73F52;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.sidebar .logout-link {
|
||||
color: rgba(255,255,255,.6);
|
||||
/* User Profile Section inside Sidebar */
|
||||
.sidebar-user-profile {
|
||||
padding: 15px 24px;
|
||||
border-top: 1px solid rgba(255,255,255,.15);
|
||||
margin-top: auto;
|
||||
background: var(--theme-footer-navy);
|
||||
}
|
||||
|
||||
.sidebar .logout-link:hover {
|
||||
.sidebar-user-profile .user-dropdown-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: #fff;
|
||||
background: rgba(220,53,69,.25);
|
||||
text-decoration: none;
|
||||
font-size: 0.95rem;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.sidebar-user-profile .user-dropdown-toggle:hover {
|
||||
color: var(--theme-yellow);
|
||||
}
|
||||
|
||||
/* Custom Theme Buttons */
|
||||
.btn-theme-register {
|
||||
background-color: var(--theme-red);
|
||||
color: white;
|
||||
border: 1px solid #ffffff;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-theme-register:hover {
|
||||
background-color: var(--theme-red-hover);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* ---------- Main Content Layout ---------- */
|
||||
|
|
@ -130,16 +146,17 @@
|
|||
width: calc(100% - var(--sidebar-width));
|
||||
min-height: 100vh;
|
||||
padding: 40px;
|
||||
background: var(--background);
|
||||
background: var(--theme-bg);
|
||||
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);
|
||||
background: var(--theme-navy);
|
||||
color: #ffffff;
|
||||
padding: 12px 20px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: fixed;
|
||||
|
|
@ -152,18 +169,22 @@
|
|||
.sidebar-toggle {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.4rem;
|
||||
cursor: pointer;
|
||||
color: var(--sidebar-bg);
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sidebar-toggle:hover {
|
||||
color: var(--theme-yellow);
|
||||
}
|
||||
|
||||
.mobile-brand {
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem;
|
||||
color: #333;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* Overlay Background when sidebar open on Mobile */
|
||||
|
|
@ -174,7 +195,7 @@
|
|||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0,0,0,0.4);
|
||||
background: rgba(0,0,0,0.5);
|
||||
z-index: 1025;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
|
|
@ -185,7 +206,7 @@
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
/* Responsive Breakpoints */
|
||||
@media (max-width: 991px) {
|
||||
.sidebar {
|
||||
left: calc(-1 * var(--sidebar-width));
|
||||
|
|
@ -197,7 +218,7 @@
|
|||
|
||||
.main {
|
||||
margin-left: 0;
|
||||
padding: 90px 20px 20px 20px;
|
||||
padding: 85px 20px 20px 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -214,22 +235,24 @@
|
|||
<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>
|
||||
<div class="mobile-brand">
|
||||
<i class="fa-solid fa-car-side me-1"></i> AutoEdu Portal
|
||||
</div>
|
||||
|
||||
<!-- Mobile View User Profile Header Dropdown -->
|
||||
<!-- Mobile View User Profile Dropdown -->
|
||||
<div class="mobile-user-profile">
|
||||
@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 class="text-white text-decoration-none dropdown-toggle d-flex align-items-center gap-2" href="#" role="button" id="userMenuMobile" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="fa-solid fa-circle-user" style="font-size: 26px; color: var(--theme-yellow);"></i>
|
||||
<span class="fw-semibold small">{{ Auth::user()->first_name }}</span>
|
||||
</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>
|
||||
<a class="dropdown-item" href="/StudentProfile">
|
||||
<i class="fa-solid fa-user me-2"></i> Profile
|
||||
</a>
|
||||
</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">
|
||||
|
|
@ -239,7 +262,7 @@
|
|||
</ul>
|
||||
</div>
|
||||
@else
|
||||
<a href="/signin" class="btn btn-sm btn-outline-dark"><i class="fa-solid fa-right-to-bracket"></i></a>
|
||||
<a href="/signin" class="btn btn-sm btn-outline-light"><i class="fa-solid fa-right-to-bracket me-1"></i> Sign In</a>
|
||||
@endif
|
||||
</div>
|
||||
</header>
|
||||
|
|
@ -250,51 +273,44 @@
|
|||
<!-- Sidebar Navigation -->
|
||||
<aside class="sidebar" id="sidebar">
|
||||
<div class="brand">
|
||||
<i class="fa-solid fa-graduation-cap"></i> Student Portal
|
||||
<i class="fa-solid fa-car-side me-2"></i> AutoEdu
|
||||
</div>
|
||||
|
||||
<!-- Sidebar Active User Profile Details (Desktop View) -->
|
||||
|
||||
|
||||
<!-- Navigation Links -->
|
||||
<nav class="nav">
|
||||
<a href="/Dashboard" class="nav-link ">
|
||||
<i class="fa-solid fa-gauge"></i>Dashboard
|
||||
<a href="/Dashboard" class="nav-link {{ request()->is('Dashboard*') ? 'active' : '' }}">
|
||||
<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 href="/mycourse" class="nav-link {{ request()->is('mycourse*') ? 'active' : '' }}">
|
||||
<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 href="/timetable" class="nav-link {{ request()->is('timetable*') ? 'active' : '' }}">
|
||||
<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 href="/results" class="nav-link {{ request()->is('results*') ? 'active' : '' }}">
|
||||
<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 href="/Studentguidelines" class="nav-link {{ request()->is('Studentguidelines*') ? 'active' : '' }}">
|
||||
<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 href="/Feedback&Complain" class="nav-link {{ request()->is('Feedback&Complain*') ? 'active' : '' }}">
|
||||
<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 href="/StudentProfile" class="nav-link {{ request()->is('StudentProfile*') ? 'active' : '' }}">
|
||||
<i class="fa-solid fa-user"></i> Student Profile
|
||||
</a>
|
||||
|
||||
|
||||
</nav>
|
||||
|
||||
<!-- Sidebar User Profile (Desktop View Footer) -->
|
||||
<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>
|
||||
<div class="dropdown dropup">
|
||||
<a class="user-dropdown-toggle dropdown-toggle" href="#" role="button" id="userMenuDesktop" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="fa-solid fa-circle-user" style="font-size: 24px; color: var(--theme-yellow);"></i>
|
||||
<span class="text-truncate" style="max-width: 150px;">{{ $displayName }}</span>
|
||||
</a>
|
||||
|
||||
<ul class="dropdown-menu dropdown-menu-start shadow w-100" aria-labelledby="userMenuDesktop">
|
||||
|
|
@ -305,20 +321,19 @@
|
|||
</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>
|
||||
<button type="button" onclick="submitLogout()" class="dropdown-item text-danger border-0 bg-transparent w-100 text-start">
|
||||
<i class="fa-solid fa-right-from-bracket me-2"></i> Logout
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@else
|
||||
<div class="d-flex gap-2 px-2">
|
||||
<div class="d-flex gap-2">
|
||||
<a href="/signin" class="btn btn-outline-light btn-sm w-50">Sign In</a>
|
||||
<a href="/signup" class="btn btn-warning btn-sm w-50">Register</a>
|
||||
<a href="/signup" class="btn btn-theme-register btn-sm w-50">Register</a>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
|
||||
<!-- Main Content Area -->
|
||||
|
|
@ -326,27 +341,26 @@
|
|||
@yield('content')
|
||||
</main>
|
||||
|
||||
<!-- Sidebar Toggle JavaScript -->
|
||||
<!-- Scripts -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
<script>
|
||||
// Sidebar Toggle Logic
|
||||
const toggleBtn = document.getElementById('toggleBtn');
|
||||
const sidebar = document.getElementById('sidebar');
|
||||
const overlay = document.getElementById('sidebarOverlay');
|
||||
|
||||
// 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>
|
||||
// Dynamic Logout Logic
|
||||
function submitLogout() {
|
||||
const tokenEl = document.querySelector('meta[name="csrf-token"]');
|
||||
|
||||
|
|
@ -376,8 +390,7 @@
|
|||
console.error('Error:', err);
|
||||
alert('Server side error occurred during logout.');
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -4,46 +4,39 @@
|
|||
|
||||
@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;
|
||||
--theme-navy: #2D355B; /* Primary Navy */
|
||||
--theme-navy-dark: #1F2541; /* Dark Navy */
|
||||
--theme-red: #822424; /* Primary Accent Red */
|
||||
--theme-red-hover: #df2c3e; /* Red Hover */
|
||||
--theme-yellow: #FFEA85; /* Accent Yellow/Gold */
|
||||
--bg-light: #F6F6F6; /* Page Background */
|
||||
--white: #ffffff;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--bg-light);
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-family: 'Segoe UI', sans-serif;
|
||||
}
|
||||
|
||||
.main-portal-content {
|
||||
padding: 20px 15px;
|
||||
padding: 10px 5px;
|
||||
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;
|
||||
background: linear-gradient(135deg, #2B293F 0%, #94A6F959 100%) !important;
|
||||
color: var(--white) !important;
|
||||
border-radius: 20px;
|
||||
padding: 30px 20px;
|
||||
border-radius: 16px;
|
||||
padding: 35px 30px;
|
||||
margin-bottom: 30px;
|
||||
box-shadow: 0 10px 30px rgba(74, 28, 62, 0.15);
|
||||
box-shadow: 0 8px 25px rgba(31, 37, 65, 0.15);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-left: 5px solid var(--theme-red);
|
||||
}
|
||||
|
||||
.hero::after {
|
||||
|
|
@ -60,33 +53,34 @@ body {
|
|||
|
||||
/* Course Card */
|
||||
.course-card {
|
||||
border: none !important;
|
||||
border-radius: 20px !important;
|
||||
border: 1px solid #e2e8f0 !important;
|
||||
border-radius: 16px !important;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
|
||||
background: var(--white);
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.course-card img {
|
||||
height: 200px;
|
||||
height: 240px;
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Sidebar Info Boxes */
|
||||
.info-box {
|
||||
border-radius: 16px !important;
|
||||
border-radius: 12px !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;
|
||||
box-shadow: 0 4px 12px rgba(219, 240, 99, 0.04) !important;
|
||||
border: 1px solid #e2e8f0 !important;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.info-box:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06) !important;
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;
|
||||
border-color: var(--theme-navy) !important;
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
|
|
@ -95,97 +89,118 @@ body {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 12px;
|
||||
border-radius: 10px;
|
||||
font-size: 18px;
|
||||
background: rgba(94, 36, 78, 0.08);
|
||||
color: var(--purple-main);
|
||||
background: var(--theme-red) !important;
|
||||
color: #ffff8d;
|
||||
}
|
||||
|
||||
/* 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);
|
||||
border: 1px solid #e2e8f0 !important;
|
||||
border-radius: 14px !important;
|
||||
transition: all 0.3s ease;
|
||||
background: var(--white);
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
|
||||
}
|
||||
|
||||
.module-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.08) !important;
|
||||
border-color: var(--purple-light) !important;
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08) !important;
|
||||
border-color: var(--theme-red) !important;
|
||||
}
|
||||
|
||||
/* Progress bar customizations */
|
||||
.progress {
|
||||
height: 10px !important;
|
||||
border-radius: 50px !important;
|
||||
background-color: #f1f5f9 !important;
|
||||
background-color: #e2e8f0 !important;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
border-radius: 50px !important;
|
||||
background: linear-gradient(90deg, var(--gold-accent), #f4d05e) !important;
|
||||
background: linear-gradient(90deg, var(--theme-red), var(--theme-red-hover)) !important;
|
||||
}
|
||||
|
||||
/* Status Badges */
|
||||
.status {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
padding: 5px 14px;
|
||||
font-weight: 700;
|
||||
padding: 6px 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; }
|
||||
.completed { background: rgba(45, 53, 91, 0.12); color: var(--theme-navy); }
|
||||
.progressing { background: rgba(247, 63, 82, 0.15); color: var(--theme-red); }
|
||||
.locked { background: #e2e8f0; color: #64748b; }
|
||||
|
||||
/* Custom Buttons */
|
||||
.btn-gold {
|
||||
background-color: var(--gold-accent) !important;
|
||||
border-color: var(--gold-accent) !important;
|
||||
.btn-theme-red {
|
||||
background-color: var(--theme-red) !important;
|
||||
border-color: var(--theme-red) !important;
|
||||
color: #fff !important;
|
||||
border-radius: 10px;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.btn-theme-red:hover {
|
||||
background-color: var(--theme-red-hover) !important;
|
||||
border-color: var(--theme-red-hover) !important;
|
||||
}
|
||||
.btn-gold:hover { background-color: var(--gold-hover) !important; }
|
||||
|
||||
.btn-purple {
|
||||
background-color: var(--purple-main) !important;
|
||||
border-color: var(--purple-main) !important;
|
||||
.btn-theme-navy {
|
||||
background-color: var(--theme-navy) !important;
|
||||
border-color: var(--theme-navy) !important;
|
||||
color: #fff !important;
|
||||
border-radius: 10px;
|
||||
font-weight: 500;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.btn-theme-navy:hover {
|
||||
background-color: var(--theme-navy-dark) !important;
|
||||
}
|
||||
.btn-purple:hover { background-color: var(--purple-dark) !important; }
|
||||
|
||||
.btn-continue {
|
||||
background-color: #fff !important;
|
||||
color: var(--purple-main) !important;
|
||||
border-radius: 10px;
|
||||
background-color: var(--theme-red) !important;
|
||||
color: #ffffff !important;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.btn-continue:hover {
|
||||
background-color: var(--theme-red-hover) !important;
|
||||
}
|
||||
|
||||
/* Section Title Indicator */
|
||||
.section-title-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin: 30px 0 20px;
|
||||
}
|
||||
|
||||
.section-title-wrapper::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 5px;
|
||||
height: 24px;
|
||||
background-color: var(--theme-red);
|
||||
border-radius: 2px;
|
||||
}
|
||||
.btn-continue:hover { background-color: #f1f5f9 !important; }
|
||||
|
||||
/* Responsive Media Queries */
|
||||
@media (min-width: 768px) {
|
||||
.main-portal-content {
|
||||
padding: 34px;
|
||||
padding: 10px;
|
||||
}
|
||||
.hero {
|
||||
padding: 45px;
|
||||
padding: 40px;
|
||||
}
|
||||
.course-card img {
|
||||
height: 280px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.main-portal-content {
|
||||
margin-left: 18px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="main-portal-content">
|
||||
|
|
@ -202,7 +217,7 @@ body {
|
|||
</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>
|
||||
<i class="fa-solid fa-car-side" style="font-size: 157px;opacity: 0.35;color: #8C080F;"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -219,22 +234,22 @@ body {
|
|||
<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>
|
||||
<h3 class="fw-bold mb-1" style="color: var(--theme-navy);">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
|
||||
<i class="fa-solid fa-building me-1" style="color: var(--theme-red);"></i> Automotive Engineering Department
|
||||
</p>
|
||||
</div>
|
||||
<span class="badge bg-dark px-3 py-2 rounded-pill">Diploma</span>
|
||||
<span class="badge px-3 py-2 rounded-pill" style="background-color: var(--theme-navy); color: var(--theme-yellow);">Diploma</span>
|
||||
</div>
|
||||
|
||||
<p class="text-secondary small lh-base">
|
||||
Master engine diagnostics, suspension systems, transmission technology, electrical systems and hybrid vehicle maintenance.
|
||||
Master engine diagnostics, suspension systems, transmission technology, electrical systems, and hybrid vehicle maintenance through hands-on training and theoretical modules.
|
||||
</p>
|
||||
|
||||
<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>
|
||||
<span class="fw-semibold" style="color: var(--theme-navy);">Overall Progress</span>
|
||||
<span class="fw-bold" style="color: var(--theme-red);">55%</span>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar" style="width:55%"></div>
|
||||
|
|
@ -244,9 +259,9 @@ body {
|
|||
</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
|
||||
<div class="section-title-wrapper">
|
||||
<h4 class="fw-bold mb-0" style="color: var(--theme-navy);">
|
||||
Course Modules
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
|
|
@ -258,13 +273,13 @@ body {
|
|||
<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>
|
||||
<h6 class="fw-bold mb-0" style="color: var(--theme-navy);">Engine Fundamentals</h6>
|
||||
<span class="status completed">Completed</span>
|
||||
</div>
|
||||
<p class="text-muted small">Learn engine parts and working principles.</p>
|
||||
<p class="text-muted small mb-0">Learn engine parts and working principles.</p>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<button class="btn btn-purple w-100 btn-sm py-2">Review Module</button>
|
||||
<div class="mt-4">
|
||||
<button class="btn btn-theme-navy w-100 btn-sm py-2">Review Module</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -276,13 +291,13 @@ body {
|
|||
<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>
|
||||
<h6 class="fw-bold mb-0" style="color: var(--theme-navy);">Transmission Systems</h6>
|
||||
<span class="status progressing">In Progress</span>
|
||||
</div>
|
||||
<p class="text-muted small">Manual & Automatic transmission systems.</p>
|
||||
<p class="text-muted small mb-0">Manual & Automatic transmission systems.</p>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<button class="btn btn-gold w-100 btn-sm py-2">Continue Learning</button>
|
||||
<div class="mt-4">
|
||||
<button class="btn btn-theme-red w-100 btn-sm py-2">Continue Learning</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -297,9 +312,9 @@ body {
|
|||
<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>
|
||||
<p class="text-muted small mb-0">Complete previous module to unlock.</p>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<div class="mt-4">
|
||||
<button class="btn btn-secondary w-100 btn-sm py-2" disabled>Locked</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -315,9 +330,9 @@ body {
|
|||
<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>
|
||||
<p class="text-muted small mb-0">Learn EV and Hybrid systems.</p>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<div class="mt-4">
|
||||
<button class="btn btn-secondary w-100 btn-sm py-2" disabled>Locked</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -334,7 +349,7 @@ body {
|
|||
<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>
|
||||
<h5 class="fw-bold mb-0" style="color: var(--theme-navy);">12</h5>
|
||||
<span class="text-muted small">Modules Available</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -344,7 +359,7 @@ body {
|
|||
<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>
|
||||
<h5 class="fw-bold mb-0" style="color: var(--theme-navy);">2 Years</h5>
|
||||
<span class="text-muted small">Course Duration</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -354,7 +369,7 @@ body {
|
|||
<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>
|
||||
<h5 class="fw-bold mb-0" style="color: var(--theme-navy);">NVQ Level 5</h5>
|
||||
<span class="text-muted small">Qualification</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -367,5 +382,4 @@ body {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
@endsection
|
||||
|
|
@ -4,523 +4,373 @@
|
|||
|
||||
@section('content')
|
||||
|
||||
<style>
|
||||
<!-- Bootstrap 5 -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
body{
|
||||
background:#f6f7fb;
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
|
||||
<!-- Google Font -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--theme-navy: #2D355B; /* Primary Navy */
|
||||
--theme-navy-dark: #1F2541; /* Dark Navy */
|
||||
--theme-red: #822424; /* Primary Accent Red */
|
||||
--theme-red-hover: #df2c3e; /* Red Hover */
|
||||
--theme-yellow: #FFEA85; /* Accent Yellow/Gold */
|
||||
--bg-light: #F6F6F6; /* Page Background */
|
||||
--white: #ffffff;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
background: var(--bg-light);
|
||||
}
|
||||
|
||||
/* =======================
|
||||
Hero
|
||||
Hero Section
|
||||
======================= */
|
||||
|
||||
.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 {
|
||||
background: linear-gradient(135deg, #2B293F 0%, #94A6F959 100%) !important;
|
||||
color: var(--white);
|
||||
border-radius: 16px;
|
||||
padding: 35px 30px;
|
||||
margin-bottom: 30px;
|
||||
box-shadow: 0 8px 25px rgba(31, 37, 65, 0.15);
|
||||
border-left: 5px solid var(--theme-red);
|
||||
}
|
||||
|
||||
.result-hero h2{
|
||||
|
||||
font-weight:700;
|
||||
|
||||
.result-hero h2 {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.result-hero p{
|
||||
|
||||
color:#ddd;
|
||||
margin-bottom:0;
|
||||
|
||||
.result-hero p {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
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 {
|
||||
background: var(--white);
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 16px;
|
||||
padding: 25px;
|
||||
text-align: center;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, .04);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.summary-card:hover{
|
||||
|
||||
transform:translateY(-5px);
|
||||
|
||||
.summary-card:hover {
|
||||
transform: translateY(-4px);
|
||||
border-color: var(--theme-navy);
|
||||
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.summary-card i{
|
||||
|
||||
font-size:40px;
|
||||
color:#5E244E;
|
||||
margin-bottom:15px;
|
||||
|
||||
.summary-card i {
|
||||
font-size: 36px;
|
||||
color: var(--theme-red);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.summary-card h3{
|
||||
|
||||
color:#5E244E;
|
||||
font-weight:700;
|
||||
|
||||
.summary-card h3 {
|
||||
color: var(--theme-navy);
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.summary-card small{
|
||||
|
||||
color:#777;
|
||||
|
||||
.summary-card small {
|
||||
color: #64748b;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* =======================
|
||||
Result Table
|
||||
======================= */
|
||||
|
||||
.result-card{
|
||||
|
||||
margin-top:35px;
|
||||
background:#fff;
|
||||
border-radius:20px;
|
||||
overflow:hidden;
|
||||
box-shadow:0 10px 30px rgba(0,0,0,.08);
|
||||
|
||||
.result-card {
|
||||
margin-top: 30px;
|
||||
background: var(--white);
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, .04);
|
||||
}
|
||||
|
||||
.table-head{
|
||||
|
||||
background:#5E244E;
|
||||
color:#fff;
|
||||
padding:18px 25px;
|
||||
|
||||
.table-head {
|
||||
background: var(--theme-navy);
|
||||
color: var(--white);
|
||||
padding: 18px 25px;
|
||||
}
|
||||
|
||||
.table{
|
||||
|
||||
margin-bottom:0;
|
||||
|
||||
.table {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.table th{
|
||||
|
||||
background:#744a68;
|
||||
color:#fff;
|
||||
border:none;
|
||||
|
||||
.table th {
|
||||
background: #f8fafc;
|
||||
color: var(--theme-navy);
|
||||
font-weight: 600;
|
||||
border-bottom: 2px solid #e2e8f0;
|
||||
padding: 14px 20px;
|
||||
}
|
||||
|
||||
.table td{
|
||||
|
||||
vertical-align:middle;
|
||||
|
||||
.table td {
|
||||
vertical-align: middle;
|
||||
padding: 14px 20px;
|
||||
}
|
||||
|
||||
.grade{
|
||||
|
||||
padding:7px 15px;
|
||||
border-radius:30px;
|
||||
font-weight:600;
|
||||
color:#fff;
|
||||
display:inline-block;
|
||||
|
||||
.grade {
|
||||
padding: 5px 14px;
|
||||
border-radius: 30px;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
color: var(--white);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.a{
|
||||
|
||||
background:#28a745;
|
||||
|
||||
.grade.a {
|
||||
background: var(--theme-navy);
|
||||
}
|
||||
|
||||
.b{
|
||||
|
||||
background:#17a2b8;
|
||||
|
||||
.grade.b {
|
||||
background: var(--theme-red);
|
||||
}
|
||||
|
||||
.c{
|
||||
|
||||
background:#ffc107;
|
||||
color:#222;
|
||||
|
||||
.grade.c {
|
||||
background: #e67e22;
|
||||
}
|
||||
|
||||
.fail{
|
||||
|
||||
background:#dc3545;
|
||||
.grade.fail {
|
||||
background: #dc3545;
|
||||
}
|
||||
|
||||
.status-pass {
|
||||
color: #198754;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* =======================
|
||||
Progress
|
||||
======================= */
|
||||
.progress {
|
||||
height: 10px;
|
||||
border-radius: 20px;
|
||||
background-color: #e2e8f0;
|
||||
}
|
||||
|
||||
.progress{
|
||||
|
||||
height:10px;
|
||||
border-radius:20px;
|
||||
.progress-bar-navy {
|
||||
background-color: var(--theme-navy) !important;
|
||||
}
|
||||
|
||||
.progress-bar-red {
|
||||
background-color: var(--theme-red) !important;
|
||||
}
|
||||
|
||||
/* =======================
|
||||
Download
|
||||
Download Card
|
||||
======================= */
|
||||
|
||||
.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 {
|
||||
margin-top: 30px;
|
||||
background: linear-gradient(135deg, #2B293F 0%, #94A6F959 100%) !important;
|
||||
color: var(--white);
|
||||
border-radius: 16px;
|
||||
padding: 30px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
box-shadow: 0 8px 25px rgba(31, 37, 65, 0.15);
|
||||
}
|
||||
|
||||
.download-card h4{
|
||||
|
||||
color:#d4af37;
|
||||
font-weight:700;
|
||||
|
||||
.download-card h4 {
|
||||
color: var(--theme-yellow);
|
||||
font-weight: 700;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.btn-result{
|
||||
|
||||
background:#d4af37;
|
||||
color:#fff;
|
||||
border:none;
|
||||
border-radius:50px;
|
||||
padding:12px 30px;
|
||||
font-weight:600;
|
||||
|
||||
.btn-result {
|
||||
background-color: var(--theme-red) !important;
|
||||
color: var(--white) !important;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 10px 24px;
|
||||
font-weight: 600;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-result:hover{
|
||||
|
||||
background:#c49d20;
|
||||
color:#fff;
|
||||
|
||||
.btn-result:hover {
|
||||
background-color: var(--theme-red-hover) !important;
|
||||
color: var(--white) !important;
|
||||
}
|
||||
|
||||
@media(max-width:768px) {
|
||||
.result-hero {
|
||||
padding: 25px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container py-4">
|
||||
|
||||
<!-- Hero -->
|
||||
|
||||
<!-- Hero Section -->
|
||||
<div class="result-hero">
|
||||
|
||||
<h2>
|
||||
|
||||
<i class="fas fa-award"></i>
|
||||
|
||||
<i class="fas fa-award me-2" style="color: var(--theme-yellow);"></i>
|
||||
Academic Results
|
||||
|
||||
</h2>
|
||||
|
||||
<p>
|
||||
|
||||
View your examination results and academic performance.
|
||||
|
||||
View your examination results and overall academic performance.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Summary -->
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-md-4 mb-4">
|
||||
|
||||
<!-- Summary Cards -->
|
||||
<div class="row g-4">
|
||||
<div class="col-md-4">
|
||||
<div class="summary-card">
|
||||
|
||||
<i class="fas fa-chart-line"></i>
|
||||
|
||||
<h3>82%</h3>
|
||||
|
||||
<small>Overall Average</small>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 mb-4">
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="summary-card">
|
||||
|
||||
<i class="fas fa-medal"></i>
|
||||
|
||||
<h3>3.65</h3>
|
||||
|
||||
<small>Current GPA</small>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 mb-4">
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="summary-card">
|
||||
|
||||
<i class="fas fa-book"></i>
|
||||
|
||||
<i class="fas fa-book-open"></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">
|
||||
|
||||
<h5 class="mb-0 fw-bold">
|
||||
Semester Results
|
||||
|
||||
</h4>
|
||||
|
||||
</h5>
|
||||
</div>
|
||||
|
||||
<table class="table table-hover">
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover align-middle">
|
||||
<thead>
|
||||
|
||||
<tr>
|
||||
|
||||
<th>Module</th>
|
||||
<th>Marks</th>
|
||||
<th>Grade</th>
|
||||
<th>Status</th>
|
||||
|
||||
</tr>
|
||||
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
|
||||
<td>Engine Technology</td>
|
||||
|
||||
<td class="fw-semibold" style="color: var(--theme-navy);">Engine Technology</td>
|
||||
<td>91</td>
|
||||
|
||||
<td>
|
||||
|
||||
<span class="grade a">
|
||||
|
||||
A+
|
||||
|
||||
</span>
|
||||
|
||||
<span class="grade a">A+</span>
|
||||
</td>
|
||||
|
||||
<td>Pass</td>
|
||||
|
||||
<td><span class="status-pass"><i class="fas fa-check-circle me-1"></i>Pass</span></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td>Brake Systems</td>
|
||||
|
||||
<td class="fw-semibold" style="color: var(--theme-navy);">Brake Systems</td>
|
||||
<td>84</td>
|
||||
|
||||
<td>
|
||||
|
||||
<span class="grade a">
|
||||
|
||||
A
|
||||
|
||||
</span>
|
||||
|
||||
<span class="grade a">A</span>
|
||||
</td>
|
||||
|
||||
<td>Pass</td>
|
||||
|
||||
<td><span class="status-pass"><i class="fas fa-check-circle me-1"></i>Pass</span></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td>Electrical Systems</td>
|
||||
|
||||
<td class="fw-semibold" style="color: var(--theme-navy);">Electrical Systems</td>
|
||||
<td>79</td>
|
||||
|
||||
<td>
|
||||
|
||||
<span class="grade b">
|
||||
|
||||
B+
|
||||
|
||||
</span>
|
||||
|
||||
<span class="grade b">B+</span>
|
||||
</td>
|
||||
|
||||
<td>Pass</td>
|
||||
|
||||
<td><span class="status-pass"><i class="fas fa-check-circle me-1"></i>Pass</span></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td>Transmission Systems</td>
|
||||
|
||||
<td class="fw-semibold" style="color: var(--theme-navy);">Transmission Systems</td>
|
||||
<td>74</td>
|
||||
|
||||
<td>
|
||||
|
||||
<span class="grade b">
|
||||
|
||||
B
|
||||
|
||||
</span>
|
||||
|
||||
<span class="grade b">B</span>
|
||||
</td>
|
||||
|
||||
<td>Pass</td>
|
||||
|
||||
<td><span class="status-pass"><i class="fas fa-check-circle me-1"></i>Pass</span></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td>Workshop Practice</td>
|
||||
|
||||
<td class="fw-semibold" style="color: var(--theme-navy);">Workshop Practice</td>
|
||||
<td>88</td>
|
||||
|
||||
<td>
|
||||
|
||||
<span class="grade a">
|
||||
|
||||
A
|
||||
|
||||
</span>
|
||||
|
||||
<span class="grade a">A</span>
|
||||
</td>
|
||||
|
||||
<td>Pass</td>
|
||||
|
||||
<td><span class="status-pass"><i class="fas fa-check-circle me-1"></i>Pass</span></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td>Industrial Safety</td>
|
||||
|
||||
<td class="fw-semibold" style="color: var(--theme-navy);">Industrial Safety</td>
|
||||
<td>81</td>
|
||||
|
||||
<td>
|
||||
|
||||
<span class="grade a">
|
||||
|
||||
A-
|
||||
|
||||
</span>
|
||||
|
||||
<span class="grade a">A-</span>
|
||||
</td>
|
||||
|
||||
<td>Pass</td>
|
||||
|
||||
<td><span class="status-pass"><i class="fas fa-check-circle me-1"></i>Pass</span></td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Performance -->
|
||||
|
||||
<div class="result-card mt-4">
|
||||
|
||||
<!-- Performance Bars -->
|
||||
<div class="result-card">
|
||||
<div class="table-head">
|
||||
|
||||
<h4 class="mb-0">
|
||||
|
||||
<h5 class="mb-0 fw-bold">
|
||||
Overall Performance
|
||||
|
||||
</h4>
|
||||
|
||||
</h5>
|
||||
</div>
|
||||
|
||||
<div class="p-4">
|
||||
|
||||
<p class="mb-2">
|
||||
|
||||
Course Completion
|
||||
|
||||
</p>
|
||||
|
||||
<div class="d-flex justify-content-between mb-2">
|
||||
<span class="fw-semibold" style="color: var(--theme-navy);">Course Completion</span>
|
||||
<span class="fw-bold" style="color: var(--theme-navy);">82%</span>
|
||||
</div>
|
||||
<div class="progress mb-4">
|
||||
|
||||
<div class="progress-bar bg-success"
|
||||
|
||||
style="width:82%">
|
||||
|
||||
<div class="progress-bar progress-bar-navy" style="width:82%"></div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-between mb-2">
|
||||
<span class="fw-semibold" style="color: var(--theme-navy);">Attendance Score</span>
|
||||
<span class="fw-bold" style="color: var(--theme-red);">90%</span>
|
||||
</div>
|
||||
|
||||
<p class="mb-2">
|
||||
|
||||
Attendance Score
|
||||
|
||||
</p>
|
||||
|
||||
<div class="progress">
|
||||
|
||||
<div class="progress-bar bg-warning"
|
||||
|
||||
style="width:90%">
|
||||
|
||||
<div class="progress-bar progress-bar-red" style="width:90%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Download -->
|
||||
|
||||
<!-- Download Section -->
|
||||
<div class="download-card">
|
||||
|
||||
<div>
|
||||
|
||||
<h4>
|
||||
|
||||
Download Official Result Sheet
|
||||
|
||||
</h4>
|
||||
|
||||
<h4>Download Official Result Sheet</h4>
|
||||
<p class="mb-0">
|
||||
|
||||
Download your latest semester examination results in PDF format.
|
||||
|
||||
Get your latest semester examination results in official PDF format.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<button class="btn btn-result">
|
||||
|
||||
<i class="fas fa-download"></i>
|
||||
|
||||
Download PDF
|
||||
|
||||
<button class="btn btn-result shadow-sm">
|
||||
<i class="fas fa-download me-2"></i>Download PDF
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,26 +3,50 @@
|
|||
@section('title', 'Student Login')
|
||||
|
||||
@push('styles')
|
||||
<!-- Google Font -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
body {
|
||||
background: #f5f7fb;
|
||||
:root {
|
||||
--theme-navy: #2D355B; /* Primary Navy */
|
||||
--theme-navy-dark: #1F2541; /* Dark Navy */
|
||||
--theme-red: #822424; /* Primary Accent Red */
|
||||
--theme-red-hover: #df2c3e; /* Red Hover */
|
||||
--theme-yellow: #FFEA85; /* Accent Yellow/Gold */
|
||||
--bg-light: #F6F6F6; /* Page Background */
|
||||
--white: #ffffff;
|
||||
}
|
||||
* {
|
||||
font-family: 'Arial', Helvetica, sans-serif;
|
||||
transform: scale(0.95);
|
||||
|
||||
body {
|
||||
background: var(--bg-light);
|
||||
font-family: 'Poppins', sans-serif;
|
||||
}
|
||||
|
||||
/* LEFT PANEL */
|
||||
.left-panel {
|
||||
min-height: 100vh;
|
||||
background: #f8f9fa;
|
||||
background: linear-gradient(135deg, var(--theme-navy) 0%, var(--theme-navy-dark) 100%);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: var(--white);
|
||||
border-right: 5px solid var(--theme-red);
|
||||
}
|
||||
|
||||
.left-panel img {
|
||||
max-width: 450px;
|
||||
max-width: 400px;
|
||||
filter: drop-shadow(0 10px 15px rgba(0,0,0,0.3));
|
||||
}
|
||||
|
||||
.left-panel h2 {
|
||||
color: var(--white);
|
||||
font-size: 28px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.left-panel p {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
/* RIGHT PANEL */
|
||||
|
|
@ -32,106 +56,103 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 40px;
|
||||
background: var(--bg-light);
|
||||
scale: 0.7;
|
||||
}
|
||||
|
||||
/* LOGIN BOX */
|
||||
.box {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
background: #ffffff;
|
||||
padding: 45px;
|
||||
border-radius: 18px;
|
||||
box-shadow: 0 15px 40px rgba(0,0,0,0.12);
|
||||
max-width: 480px;
|
||||
background: var(--white);
|
||||
padding: 45px 40px;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 10px 30px rgba(31, 37, 65, 0.08);
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
/* TITLE */
|
||||
.headline {
|
||||
text-align: center;
|
||||
font-size: 32px;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: #222;
|
||||
color: var(--theme-navy);
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
|
||||
/* INPUT */
|
||||
/* INPUT CONTAINER */
|
||||
.input-container {
|
||||
position: relative;
|
||||
margin-bottom: 25px;
|
||||
font-size: 22px;
|
||||
font-family: arial;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.input-container input {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
padding: 12px 0;
|
||||
height: 48px;
|
||||
padding: 10px 0 5px 0;
|
||||
border: none;
|
||||
border-bottom: 2px solid #ddd;
|
||||
border-bottom: 2px solid #cbd5e1;
|
||||
background: transparent;
|
||||
outline: none;
|
||||
font-size: 22px;
|
||||
font-family: arial;
|
||||
|
||||
font-size: 16px;
|
||||
color: #1e293b;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.input-container label {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
top: 12px;
|
||||
left: 0;
|
||||
color: #744a68;
|
||||
transition: .3s;
|
||||
color: #64748b;
|
||||
transition: 0.3s ease;
|
||||
pointer-events: none;
|
||||
font-size: 22px;
|
||||
font-family: arial;
|
||||
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
/* FLOATING LABEL & VALIDATION STATES */
|
||||
.input-container input:focus,
|
||||
.input-container input:valid {
|
||||
border-bottom-color: #744a68;
|
||||
font-size: 20px;
|
||||
font-family: arial;
|
||||
.input-container input:focus {
|
||||
border-bottom-color: var(--theme-navy);
|
||||
}
|
||||
|
||||
.input-container input:focus + label,
|
||||
.input-container input:not(:placeholder-shown) + label {
|
||||
top: -12px;
|
||||
font-size: 12px;
|
||||
color: #744a68;
|
||||
color: var(--theme-navy);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* FORGOT PASSWORD */
|
||||
.forgot-link {
|
||||
color: #744a68;
|
||||
font-size: 16px;
|
||||
color: var(--theme-red);
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
padding-left: 37%;
|
||||
transition: color 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.forgot-link:hover {
|
||||
text-decoration: underline;
|
||||
color: #5E244E;
|
||||
color: var(--theme-red-hover);
|
||||
}
|
||||
|
||||
/* BUTTON */
|
||||
.btn-primary {
|
||||
height: 50px;
|
||||
height: 48px;
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
background: #5E244E;
|
||||
background: var(--theme-red) !important;
|
||||
border: none;
|
||||
color: white;
|
||||
/* border-radius: 8px; */
|
||||
transition: background 0.2s ease-in-out, transform 0.1s ease;
|
||||
color: var(--white) !important;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-primary:hover, .btn-primary:focus {
|
||||
background: #4a1c3e;
|
||||
color: white;
|
||||
background: var(--theme-red-hover) !important;
|
||||
box-shadow: 0 4px 12px rgba(130, 36, 36, 0.3);
|
||||
}
|
||||
|
||||
.btn-primary:active {
|
||||
|
|
@ -141,22 +162,25 @@
|
|||
/* BOTTOM TEXT */
|
||||
.dontacc {
|
||||
text-align: center;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.dontacc p {
|
||||
color: #666;
|
||||
color: #64748b;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.dontacc a {
|
||||
color: #744a68;
|
||||
color: var(--theme-navy);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
font-family: arial;
|
||||
font-size: 15px;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.dontacc a:hover {
|
||||
text-decoration: underline;
|
||||
color: var(--theme-navy-dark);
|
||||
}
|
||||
|
||||
/* RESPONSIVE DESIGN */
|
||||
|
|
@ -171,14 +195,11 @@
|
|||
}
|
||||
|
||||
.box {
|
||||
padding: 30px;
|
||||
padding: 35px 25px;
|
||||
}
|
||||
|
||||
.headline {
|
||||
font-size: 28px;
|
||||
color: #5E244E;
|
||||
font-weight: bold;
|
||||
font-family: Arial;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -188,17 +209,9 @@
|
|||
<div class="container-fluid">
|
||||
<div class="row min-vh-100">
|
||||
|
||||
<!-- <div class="col-lg-6 left-panel">
|
||||
<div class="text-center">
|
||||
<img src="{{ asset('images/login-banner.png') }}" class="img-fluid mb-4" alt="Automobile Engineering Academy">
|
||||
<h2 class="fw-bold">Automobile Engineering Academy</h2>
|
||||
<p class="text-muted px-5">
|
||||
Driving Innovation Through Education, Research and Technology.
|
||||
</p>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="col-lg-6 right-panel">
|
||||
|
||||
<div class="col-lg-6 right-panel col-12 mx-auto">
|
||||
<div class="box">
|
||||
<h2 class="headline">Student Sign In</h2>
|
||||
|
||||
|
|
@ -223,15 +236,14 @@
|
|||
|
||||
|
||||
|
||||
<button type="submit" class="btn btn-primary mb-4">
|
||||
<button type="submit" class="btn btn-primary mb-4 shadow-sm">
|
||||
Sign In
|
||||
</button>
|
||||
|
||||
<div class="d-flex justify-content-end mb-4" style="gap: 10px;padding-top: 10px; padding-left: 190px;">
|
||||
<div class="d-flex justify-content-end mb-4">
|
||||
<a href="{{ url('/password/reset') }}" class="forgot-link">Forgot Password?</a>
|
||||
</div>
|
||||
|
||||
<div class="dontacc" style="padding-top: 10px; " >
|
||||
<div class="dontacc">
|
||||
<!-- <p class="mb-1">Don't have an account?</p> -->
|
||||
<a href="{{ url('/signup') }}">Create Student Account</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -37,6 +37,7 @@
|
|||
padding: 45px;
|
||||
border-radius: 18px;
|
||||
box-shadow: 0 15px 40px rgba(0,0,0,0.12);
|
||||
scale : 0.72
|
||||
}
|
||||
|
||||
/* TITLE */
|
||||
|
|
|
|||
|
|
@ -14,372 +14,350 @@
|
|||
<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;
|
||||
:root {
|
||||
--theme-navy: #2D355B; /* Primary Navy */
|
||||
--theme-navy-dark: #1F2541; /* Dark Navy */
|
||||
--theme-red: #822424; /* Primary Accent Red */
|
||||
--theme-red-hover: #df2c3e; /* Red Hover */
|
||||
--theme-yellow: #FFEA85; /* Accent Yellow/Gold */
|
||||
--bg-light: #F6F6F6; /* Page Background */
|
||||
--white: #ffffff;
|
||||
}
|
||||
|
||||
.page-header{
|
||||
background:linear-gradient(135deg,#9954b8,#4f3d5b));
|
||||
color:#fff;
|
||||
padding:45px;
|
||||
border-radius:20px;
|
||||
background-color: #5E244E;
|
||||
margin-bottom:30px;
|
||||
body {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
background: var(--bg-light);
|
||||
}
|
||||
|
||||
.page-header h2{
|
||||
font-weight:700;
|
||||
/* Page Header Hero Section */
|
||||
.page-header {
|
||||
background: linear-gradient(135deg, #2B293F 0%, #94A6F959 100%) !important;
|
||||
color: var(--white);
|
||||
padding: 35px 30px;
|
||||
border-radius: 16px;
|
||||
margin-bottom: 30px;
|
||||
box-shadow: 0 8px 25px rgba(31, 37, 65, 0.15);
|
||||
border-left: 5px solid var(--theme-red);
|
||||
}
|
||||
|
||||
.page-header p{
|
||||
opacity:.9;
|
||||
.page-header h2 {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.info-card{
|
||||
border:none;
|
||||
border-radius:15px;
|
||||
box-shadow:0 10px 30px rgba(0,0,0,.08);
|
||||
.page-header p {
|
||||
opacity: .85;
|
||||
}
|
||||
|
||||
.table-card{
|
||||
background:#fff;
|
||||
border-radius:20px;
|
||||
box-shadow:0 10px 30px rgba(0,0,0,.08);
|
||||
overflow:hidden;
|
||||
/* Info Cards & Wrapper */
|
||||
.info-card {
|
||||
background: var(--white);
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, .04);
|
||||
}
|
||||
|
||||
.table thead{
|
||||
background:#0d6efd;
|
||||
color:#fff;
|
||||
.today-card {
|
||||
background: var(--white);
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, .04);
|
||||
padding: 25px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.today-card h5,
|
||||
.info-card h5 {
|
||||
font-weight: 600;
|
||||
color: var(--theme-navy);
|
||||
}
|
||||
|
||||
/* Timetable Card Section */
|
||||
.table-card {
|
||||
background: var(--white);
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, .04);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.table thead {
|
||||
background: var(--theme-navy);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.table thead th {
|
||||
font-weight: 600;
|
||||
padding: 15px 10px;
|
||||
}
|
||||
|
||||
.table td,
|
||||
.table th{
|
||||
text-align:center;
|
||||
vertical-align:middle;
|
||||
min-width:140px;
|
||||
.table th {
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
.badge-theory{
|
||||
background:#0d6efd;
|
||||
.table tbody th {
|
||||
background-color: #f8fafc;
|
||||
color: var(--theme-navy);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.badge-practical{
|
||||
background:#198754;
|
||||
/* Updated Status Badges */
|
||||
.badge-theory {
|
||||
background: var(--theme-navy) !important;
|
||||
color: var(--white) !important;
|
||||
}
|
||||
|
||||
.badge-workshop{
|
||||
background:#fd7e14;
|
||||
.badge-practical {
|
||||
background: var(--theme-red) !important;
|
||||
color: var(--white) !important;
|
||||
}
|
||||
|
||||
.badge-break{
|
||||
background:#ffc107;
|
||||
color:#000;
|
||||
.badge-workshop {
|
||||
background: #e67e22 !important; /* Workshop Accent */
|
||||
color: var(--white) !important;
|
||||
}
|
||||
|
||||
.table tbody tr:hover{
|
||||
background:#f8fbff;
|
||||
transition:.3s;
|
||||
.badge-break {
|
||||
background: var(--theme-yellow) !important;
|
||||
color: var(--theme-navy-dark) !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.legend span{
|
||||
margin-right:15px;
|
||||
.table tbody tr:hover {
|
||||
background: rgba(45, 53, 91, 0.02);
|
||||
transition: .3s;
|
||||
}
|
||||
|
||||
.legend .badge{
|
||||
padding:8px 12px;
|
||||
.lunch-row {
|
||||
background-color: rgba(255, 234, 133, 0.25) !important;
|
||||
color: var(--theme-navy-dark);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.today-card{
|
||||
background:white;
|
||||
border-radius:15px;
|
||||
box-shadow:0 10px 25px rgba(0,0,0,.08);
|
||||
padding:25px;
|
||||
height:100%;
|
||||
.legend span {
|
||||
margin-right: 12px;
|
||||
display: inline-block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.today-card h5{
|
||||
font-weight:600;
|
||||
.legend .badge {
|
||||
padding: 8px 14px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.download-btn{
|
||||
border-radius:50px;
|
||||
padding:10px 25px;
|
||||
/* Custom Buttons */
|
||||
.download-btn {
|
||||
border-radius: 8px;
|
||||
padding: 10px 22px;
|
||||
background-color: var(--theme-red) !important;
|
||||
color: var(--white) !important;
|
||||
border: none;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
@media(max-width:768px){
|
||||
|
||||
.table td,
|
||||
.table th{
|
||||
font-size:13px;
|
||||
min-width:120px;
|
||||
.download-btn:hover {
|
||||
background-color: var(--theme-red-hover) !important;
|
||||
color: var(--white) !important;
|
||||
}
|
||||
|
||||
.page-header{
|
||||
padding: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 class="d-flex justify-content-between align-items-center flex-wrap gap-3">
|
||||
<div>
|
||||
|
||||
<h2><i class="fas fa-calendar-alt me-2"></i>My Class Timetable</h2>
|
||||
|
||||
<h2 class="mb-1"><i class="fas fa-calendar-alt me-2" style="color: var(--theme-yellow);"></i>My Class Timetable</h2>
|
||||
<p class="mb-0">
|
||||
Automobile Engineering Academy Student Portal
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<button class="btn btn-light download-btn" onclick="window.print()">
|
||||
<i class="fas fa-print me-2"></i>Print
|
||||
<button class="btn download-btn shadow-sm" onclick="window.print()">
|
||||
<i class="fas fa-print me-2"></i>Print Timetable
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Top Grid Info -->
|
||||
<div class="row g-4 mb-4">
|
||||
|
||||
<!-- Today's Schedule Card -->
|
||||
<div class="col-lg-4">
|
||||
|
||||
<div class="today-card">
|
||||
|
||||
<h5 class="mb-3">
|
||||
<i class="fas fa-clock text-primary me-2"></i>
|
||||
Today's Classes
|
||||
<i class="fas fa-clock me-2" style="color: var(--theme-red);"></i>
|
||||
Today's Schedule
|
||||
</h5>
|
||||
|
||||
<div class="mb-3">
|
||||
|
||||
<div class="mb-3 p-2 rounded" style="background: #f8fafc; border-left: 3px solid var(--theme-navy);">
|
||||
<strong>08:30 - 10:30</strong><br>
|
||||
|
||||
<span class="badge badge-theory">
|
||||
Theory
|
||||
</span>
|
||||
|
||||
Engine Fundamentals
|
||||
|
||||
<span class="badge badge-theory me-1">Theory</span>
|
||||
<span>Engine Fundamentals</span>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
|
||||
<div class="mb-3 p-2 rounded" style="background: #f8fafc; border-left: 3px solid #e67e22;">
|
||||
<strong>10:45 - 12:30</strong><br>
|
||||
|
||||
<span class="badge badge-workshop">
|
||||
Workshop
|
||||
</span>
|
||||
|
||||
Practical Session
|
||||
|
||||
<span class="badge badge-workshop me-1">Workshop</span>
|
||||
<span>Practical Session</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
<div class="p-2 rounded" style="background: #f8fafc; border-left: 3px solid var(--theme-red);">
|
||||
<strong>01:30 - 03:30</strong><br>
|
||||
|
||||
<span class="badge badge-practical">
|
||||
Practical
|
||||
</span>
|
||||
|
||||
Electrical System
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<span class="badge badge-practical me-1">Practical</span>
|
||||
<span>Electrical System</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Legend Card -->
|
||||
<div class="col-lg-8">
|
||||
|
||||
<div class="info-card p-4 h-100">
|
||||
|
||||
<div class="info-card p-4 h-100 d-flex flex-column justify-content-between">
|
||||
<div>
|
||||
<h5 class="mb-3">
|
||||
<i class="fas fa-info-circle text-primary me-2"></i>
|
||||
<i class="fas fa-info-circle me-2" style="color: var(--theme-navy);"></i>
|
||||
Timetable Legend
|
||||
</h5>
|
||||
|
||||
<div class="legend">
|
||||
|
||||
<div class="legend mb-2">
|
||||
<span>
|
||||
<span class="badge badge-theory">Theory</span>
|
||||
</span>
|
||||
|
||||
<span>
|
||||
<span class="badge badge-practical">Practical</span>
|
||||
</span>
|
||||
|
||||
<span>
|
||||
<span class="badge badge-workshop">Workshop</span>
|
||||
</span>
|
||||
|
||||
<span>
|
||||
<span class="badge badge-break">Break</span>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<p class="mb-0 text-muted">
|
||||
Please arrive at least 15 minutes before each class.
|
||||
Attendance is compulsory for all practical sessions.
|
||||
<div>
|
||||
<hr class="text-muted">
|
||||
<p class="mb-0 text-muted small">
|
||||
<i class="fas fa-exclamation-circle me-1" style="color: var(--theme-red);"></i>
|
||||
Please arrive at least 15 minutes before each class. Attendance is compulsory for all practical sessions.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Timetable -->
|
||||
|
||||
<!-- Timetable Grid -->
|
||||
<div class="table-card">
|
||||
|
||||
<div class="table-responsive">
|
||||
|
||||
<table class="table table-bordered align-middle mb-0">
|
||||
|
||||
<thead>
|
||||
|
||||
<tr>
|
||||
|
||||
<th>Time</th>
|
||||
|
||||
<th>Monday</th>
|
||||
|
||||
<th>Tuesday</th>
|
||||
|
||||
<th>Wednesday</th>
|
||||
|
||||
<th>Thursday</th>
|
||||
|
||||
<th>Friday</th>
|
||||
|
||||
</tr>
|
||||
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
|
||||
<th>08:30 - 10:30</th>
|
||||
|
||||
<td>
|
||||
<span class="badge badge-theory">Theory</span><br>
|
||||
<span class="badge badge-theory mb-1">Theory</span><br>
|
||||
Engine Fundamentals
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<span class="badge badge-practical">Practical</span><br>
|
||||
<span class="badge badge-practical mb-1">Practical</span><br>
|
||||
Engine Lab
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<span class="badge badge-theory">Theory</span><br>
|
||||
<span class="badge badge-theory mb-1">Theory</span><br>
|
||||
Transmission
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<span class="badge badge-workshop">Workshop</span><br>
|
||||
<span class="badge badge-workshop mb-1">Workshop</span><br>
|
||||
Engine Repair
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<span class="badge badge-theory">Theory</span><br>
|
||||
<span class="badge badge-theory mb-1">Theory</span><br>
|
||||
Vehicle Safety
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<th>10:45 - 12:30</th>
|
||||
|
||||
<td>
|
||||
<span class="badge badge-workshop">Workshop</span><br>
|
||||
<span class="badge badge-workshop mb-1">Workshop</span><br>
|
||||
Service Practice
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<span class="badge badge-theory">Theory</span><br>
|
||||
<span class="badge badge-theory mb-1">Theory</span><br>
|
||||
Electrical
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<span class="badge badge-practical">Practical</span><br>
|
||||
<span class="badge badge-practical mb-1">Practical</span><br>
|
||||
Diagnostics
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<span class="badge badge-theory">Theory</span><br>
|
||||
<span class="badge badge-theory mb-1">Theory</span><br>
|
||||
Fuel System
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<span class="badge badge-workshop">Workshop</span><br>
|
||||
<span class="badge badge-workshop mb-1">Workshop</span><br>
|
||||
Engine Assembly
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr class="table-warning">
|
||||
|
||||
<tr class="lunch-row">
|
||||
<th>12:30 - 01:30</th>
|
||||
|
||||
<td colspan="5">
|
||||
🍴 LUNCH BREAK
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<th>01:30 - 03:30</th>
|
||||
|
||||
<td>
|
||||
<span class="badge badge-practical">Practical</span><br>
|
||||
<span class="badge badge-practical mb-1">Practical</span><br>
|
||||
Electrical System
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<span class="badge badge-workshop">Workshop</span><br>
|
||||
<span class="badge badge-workshop mb-1">Workshop</span><br>
|
||||
Welding
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<span class="badge badge-theory">Theory</span><br>
|
||||
<span class="badge badge-theory mb-1">Theory</span><br>
|
||||
Auto Electronics
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<span class="badge badge-practical">Practical</span><br>
|
||||
<span class="badge badge-practical mb-1">Practical</span><br>
|
||||
Brake System
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<span class="badge badge-theory">Theory</span><br>
|
||||
<span class="badge badge-theory mb-1">Theory</span><br>
|
||||
Revision
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue