3nd coment
This commit is contained in:
parent
1d2790b421
commit
1aab6e147e
|
|
@ -166,7 +166,7 @@ Join our institute and become a skilled automotive professional.
|
||||||
|
|
||||||
|
|
||||||
<div style="display: flex; justify-content:center; width: 100%; ">
|
<div style="display: flex; justify-content:center; width: 100%; ">
|
||||||
<a href="/courses" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-medium transition" style="color:#5E244E">
|
<a href="/apply" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-medium transition" style="color:#5E244E">
|
||||||
Apply Courses
|
Apply Courses
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -87,7 +87,7 @@
|
||||||
padding: 12px 30px;
|
padding: 12px 30px;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
border-radius: 8px;
|
/* border-radius: 8px; */
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
@ -139,7 +139,6 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-md-6 mb-4">
|
<div class="col-md-6 mb-4">
|
||||||
<label class="form-label">Address <span class="required">*</span></label>
|
<label class="form-label">Address <span class="required">*</span></label>
|
||||||
<input type="text" name="address" class="form-control" required>
|
<input type="text" name="address" class="form-control" required>
|
||||||
|
|
@ -229,26 +228,96 @@
|
||||||
<i class="fa-solid fa-graduation-cap me-2"></i> Education
|
<i class="fa-solid fa-graduation-cap me-2"></i> Education
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
|
||||||
|
<!-- Still at School -->
|
||||||
<div class="col-md-6 mb-4">
|
<div class="col-md-6 mb-4">
|
||||||
<label class="form-label">Still at school?</label>
|
<label class="form-label">Still at school?</label>
|
||||||
<select name="gender" class="form-select">
|
<select name="still_at_school" class="form-select">
|
||||||
<option selected disabled>Select Your Option</option>
|
<option selected disabled>Select Your Option</option>
|
||||||
<option value="Male">Yes</option>
|
<option value="Yes">Yes</option>
|
||||||
<option value="Female">No</option>
|
<option value="No">No</option>
|
||||||
|
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Highest Qualification -->
|
||||||
|
<div class="col-md-6 mb-4">
|
||||||
|
<label class="form-label">Highest Educational Qualification</label>
|
||||||
|
<select name="highest_qualification" class="form-select">
|
||||||
|
<option selected disabled>Select Qualification</option>
|
||||||
|
<option value="O/L">G.C.E. O/L</option>
|
||||||
|
<option value="A/L">G.C.E. A/L</option>
|
||||||
|
<option value="NVQ Level 3">NVQ Level 3</option>
|
||||||
|
<option value="NVQ Level 4">NVQ Level 4</option>
|
||||||
|
<option value="Certificate">Certificate</option>
|
||||||
|
<option value="Diploma">Diploma</option>
|
||||||
|
<option value="Higher Diploma">Higher Diploma</option>
|
||||||
|
<option value="Degree">Degree</option>
|
||||||
|
<option value="Other">Other</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- School / College -->
|
||||||
|
<div class="col-md-6 mb-4">
|
||||||
|
<label class="form-label">School / College Name</label>
|
||||||
|
<input type="text" name="school_name" class="form-control"
|
||||||
|
placeholder="Enter School / College Name">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Year Completed -->
|
||||||
|
<div class="col-md-6 mb-4">
|
||||||
|
<label class="form-label">Year Completed</label>
|
||||||
|
<input type="number" name="year_completed" class="form-control"
|
||||||
|
min="1980" max="2100" placeholder="e.g. 2025">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Examination Passed -->
|
||||||
|
<div class="col-md-6 mb-4">
|
||||||
|
<label class="form-label">Examination Passed</label>
|
||||||
|
<select name="exam_passed" class="form-select">
|
||||||
|
<option selected disabled>Select Examination</option>
|
||||||
|
<option value="G.C.E. O/L">G.C.E. O/L</option>
|
||||||
|
<option value="G.C.E. A/L">G.C.E. A/L</option>
|
||||||
|
<option value="NVQ">NVQ</option>
|
||||||
|
<option value="Certificate">Certificate</option>
|
||||||
|
<option value="Diploma">Diploma</option>
|
||||||
|
<option value="Degree">Degree</option>
|
||||||
|
<option value="Other">Other</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Subjects -->
|
||||||
|
<div class="col-md-6 mb-4">
|
||||||
|
<label class="form-label">Subjects</label>
|
||||||
|
<input type="text" name="subjects" class="form-control"
|
||||||
|
placeholder="e.g. Mathematics, Science, English">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Grades / Results -->
|
||||||
|
<div class="col-12 mb-4">
|
||||||
|
<label class="form-label">Grades / Results</label>
|
||||||
|
<textarea name="grades_results" class="form-control" rows="3"
|
||||||
|
placeholder="Enter your grades or examination results"></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Certificate Upload -->
|
||||||
|
<div class="col-12 mb-4">
|
||||||
|
<label class="form-label">Educational Certificates</label>
|
||||||
|
<input type="file" name="certificates[]" class="form-control"
|
||||||
|
accept=".pdf,.jpg,.jpeg,.png" multiple>
|
||||||
|
<small class="text-muted">
|
||||||
|
Upload O/L, A/L, NVQ, Diploma or other educational certificates.
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!--
|
||||||
<div class="section-title">
|
<div class="section-title">
|
||||||
<i class="fa-solid fa-graduation-cap me-2"></i> Qualifications
|
<i class="fa-solid fa-graduation-cap me-2"></i> Qualifications
|
||||||
</div>
|
</div> -->
|
||||||
|
|
||||||
|
|
||||||
<div class="section-title">
|
<div class="section-title">
|
||||||
|
|
@ -257,10 +326,17 @@
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-6 mb-4">
|
<div class="col-md-6 mb-4">
|
||||||
<label class="form-label">Contact Number <span class="required">*</span></label>
|
<label class="form-label"> Emergency Contact Name <span class="required">*</span></label>
|
||||||
<input type="text" name="Emergency_Contact" class="form-control" required>
|
<input type="text" name="Emergency_Contact" class="form-control" required>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-6 mb-4">
|
||||||
|
<label class="form-label">Relationship <span class="required">*</span></label>
|
||||||
|
<input type="text" name="Emergency_Contact" class="form-control" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="form-check mb-4">
|
<div class="form-check mb-4">
|
||||||
<input class="form-check-input" type="checkbox" id="terms" required>
|
<input class="form-check-input" type="checkbox" id="terms" required>
|
||||||
|
|
|
||||||
|
|
@ -11,22 +11,13 @@
|
||||||
--light:#f8f4f7;
|
--light:#f8f4f7;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* .hero{
|
.hero {
|
||||||
background:linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.65)),
|
background-image: linear-gradient(rgba(109, 105, 105, 0.65), rgb(64, 59, 66)),
|
||||||
url(https://images.unsplash.com/photo-1486006920555-c77dce18193b?auto=format&fit=crop&w=1600&q=80);
|
url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=1600&q=80');
|
||||||
background-size:cover;
|
|
||||||
background-position:center;
|
|
||||||
color:#fff;
|
|
||||||
padding:120px 0;
|
|
||||||
text-align:center;
|
|
||||||
} */
|
|
||||||
.hero {
|
|
||||||
background-image: linear-gradient(rgba(135, 125, 145, 0.65), rgba(0, 0, 0, 0.65)),
|
|
||||||
url('https://images.unsplash.com/photo-1486006920555-c77dce18193b?auto=format&fit=crop&w=1600&q=80');
|
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
color: #fff;
|
color: #ffffff;
|
||||||
padding: 120px 0;
|
padding: 120px 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
@ -42,6 +33,43 @@
|
||||||
font-size:18px;
|
font-size:18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* --- Search Box Styling --- */
|
||||||
|
.search-box {
|
||||||
|
max-width: 500px;
|
||||||
|
margin: 30px auto 0 auto;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
|
||||||
|
/* border-radius: 30px; */
|
||||||
|
overflow: hidden;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-box input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 15px 25px;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-box button {
|
||||||
|
background: var(--primary);
|
||||||
|
color: #fff;
|
||||||
|
border: none;
|
||||||
|
padding: 0 25px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: 0.3s;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-box button:hover {
|
||||||
|
background: var(--secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.course-card{
|
.course-card{
|
||||||
border:none;
|
border:none;
|
||||||
border-radius:15px;
|
border-radius:15px;
|
||||||
|
|
@ -71,7 +99,7 @@
|
||||||
.read-btn{
|
.read-btn{
|
||||||
background:var(--primary);
|
background:var(--primary);
|
||||||
color:#fff;
|
color:#fff;
|
||||||
border-radius:30px;
|
/* border-radius:30px; */
|
||||||
padding:10px 25px;
|
padding:10px 25px;
|
||||||
font-weight: 40px;
|
font-weight: 40px;
|
||||||
}
|
}
|
||||||
|
|
@ -87,10 +115,17 @@
|
||||||
padding:25px;
|
padding:25px;
|
||||||
box-shadow:0 5px 20px rgba(0,0,0,.08);
|
box-shadow:0 5px 20px rgba(0,0,0,.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* No results message styling */
|
||||||
|
#noResults {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #666;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
{{-- Hero --}}
|
{{-- Hero --}}
|
||||||
|
|
||||||
<section class="hero">
|
<section class="hero">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h1>Our Courses</h1>
|
<h1>Our Courses</h1>
|
||||||
|
|
@ -98,159 +133,157 @@
|
||||||
Build your future in the automotive industry through practical
|
Build your future in the automotive industry through practical
|
||||||
training and internationally recognized learning experiences.
|
training and internationally recognized learning experiences.
|
||||||
</p>
|
</p>
|
||||||
|
<div class="search-box">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="courseSearch"
|
||||||
|
placeholder="Search Courses by title, level or description..."
|
||||||
|
>
|
||||||
|
<button type="button">
|
||||||
|
<i class="fas fa-search"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
@php
|
@php
|
||||||
|
|
||||||
$courses=[
|
$courses=[
|
||||||
|
[
|
||||||
[
|
'image'=>'https://images.unsplash.com/photo-1486262715619-67b85e0b08d3?auto=format&fit=crop&w=900&q=80',
|
||||||
'image'=>'https://images.unsplash.com/photo-1486262715619-67b85e0b08d3?auto=format&fit=crop&w=900&q=80',
|
'title'=>'Diploma in Automotive Engineering',
|
||||||
'title'=>'Diploma in Automotive Engineering',
|
'duration'=>'2 Years',
|
||||||
'duration'=>'2 Years',
|
'level'=>'Diploma',
|
||||||
'level'=>'Diploma',
|
'description'=>'Learn engine systems, diagnostics, vehicle maintenance, workshop practices and modern automotive technologies.',
|
||||||
'description'=>'Learn engine systems, diagnostics, vehicle maintenance, workshop practices and modern automotive technologies.',
|
],
|
||||||
],
|
[
|
||||||
|
'image'=>'https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=900&q=80',
|
||||||
[
|
'title'=>'Mechanical Systems Technology',
|
||||||
'image'=>'https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=900&q=80',
|
'duration'=>'18 Months',
|
||||||
'title'=>'Mechanical Systems Technology',
|
'level'=>'Certificate',
|
||||||
'duration'=>'18 Months',
|
'description'=>'Study suspension, steering, transmission, braking systems and practical repair techniques.',
|
||||||
'level'=>'Certificate',
|
],
|
||||||
'description'=>'Study suspension, steering, transmission, braking systems and practical repair techniques.',
|
[
|
||||||
],
|
'image'=>'https://images.unsplash.com/photo-1502877338535-766e1452684a?auto=format&fit=crop&w=900&q=80',
|
||||||
|
'title'=>'Electric Vehicle Technology',
|
||||||
[
|
'duration'=>'1 Year',
|
||||||
'image'=>'https://images.unsplash.com/photo-1502877338535-766e1452684a?auto=format&fit=crop&w=900&q=80',
|
'level'=>'Advanced',
|
||||||
'title'=>'Electric Vehicle Technology',
|
'description'=>'Explore EV batteries, charging infrastructure, electric drivetrains and smart mobility systems.',
|
||||||
'duration'=>'1 Year',
|
],
|
||||||
'level'=>'Advanced',
|
[
|
||||||
'description'=>'Explore EV batteries, charging infrastructure, electric drivetrains and smart mobility systems.',
|
'image'=>'https://images.unsplash.com/photo-1511919884226-fd3cad34687c?auto=format&fit=crop&w=900&q=80',
|
||||||
],
|
'title'=>'Hybrid Vehicle Maintenance',
|
||||||
|
'duration'=>'10 Months',
|
||||||
[
|
'level'=>'Professional',
|
||||||
'image'=>'https://images.unsplash.com/photo-1511919884226-fd3cad34687c?auto=format&fit=crop&w=900&q=80',
|
'description'=>'Learn hybrid engine operation, diagnostics and maintenance procedures.',
|
||||||
'title'=>'Hybrid Vehicle Maintenance',
|
],
|
||||||
'duration'=>'10 Months',
|
[
|
||||||
'level'=>'Professional',
|
'image'=>'https://images.unsplash.com/photo-1504215680853-026ed2a45def?auto=format&fit=crop&w=900&q=80',
|
||||||
'description'=>'Learn hybrid engine operation, diagnostics and maintenance procedures.',
|
'title'=>'Auto Electrical Systems',
|
||||||
],
|
'duration'=>'8 Months',
|
||||||
|
'level'=>'Certificate',
|
||||||
[
|
'description'=>'Understand vehicle wiring, sensors, ECU systems and electronic diagnostics.',
|
||||||
'image'=>'https://images.unsplash.com/photo-1504215680853-026ed2a45def?auto=format&fit=crop&w=900&q=80',
|
],
|
||||||
'title'=>'Auto Electrical Systems',
|
[
|
||||||
'duration'=>'8 Months',
|
'image'=>'https://images.unsplash.com/photo-1517524008697-84bbe3c3fd98?auto=format&fit=crop&w=900&q=80',
|
||||||
'level'=>'Certificate',
|
'title'=>'Automobile Service Technician',
|
||||||
'description'=>'Understand vehicle wiring, sensors, ECU systems and electronic diagnostics.',
|
'duration'=>'1 Year',
|
||||||
],
|
'level'=>'NVQ',
|
||||||
|
'description'=>'Hands-on training in servicing, repairing and maintaining modern vehicles.',
|
||||||
[
|
],
|
||||||
'image'=>'https://images.unsplash.com/photo-1517524008697-84bbe3c3fd98?auto=format&fit=crop&w=900&q=80',
|
|
||||||
'title'=>'Automobile Service Technician',
|
|
||||||
'duration'=>'1 Year',
|
|
||||||
'level'=>'NVQ',
|
|
||||||
'description'=>'Hands-on training in servicing, repairing and maintaining modern vehicles.',
|
|
||||||
],
|
|
||||||
|
|
||||||
];
|
];
|
||||||
|
|
||||||
@endphp
|
@endphp
|
||||||
|
|
||||||
<section class="py-5">
|
<section class="py-5">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|
||||||
|
<div id="noResults" class="text-center d-none">
|
||||||
|
<p>No courses found matching your search.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="row g-4">
|
<div class="row g-4" id="courseContainer">
|
||||||
|
@foreach($courses as $course)
|
||||||
|
<div class="col-lg-4 col-md-6 course-item">
|
||||||
|
<div class="card course-card h-100">
|
||||||
|
<img src="{{ $course['image'] }}" alt="{{ $course['title'] }}">
|
||||||
|
<div class="card-body">
|
||||||
|
<span class="badge-course course-level">
|
||||||
|
{{ $course['level'] }}
|
||||||
|
</span>
|
||||||
|
<h4 class="mt-3 fw-bold course-title">
|
||||||
|
{{ $course['title'] }}
|
||||||
|
</h4>
|
||||||
|
<p class="text-muted course-desc">
|
||||||
|
{{ $course['description'] }}
|
||||||
|
</p>
|
||||||
|
<hr>
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<span><b>Duration</b></span>
|
||||||
|
<span>{{ $course['duration'] }}</span>
|
||||||
|
</div>
|
||||||
|
<a href="/apply" class="btn read-btn w-100 mt-4">Apply Course</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
@endforeach
|
||||||
|
</div>
|
||||||
|
|
||||||
@foreach($courses as $course)
|
</div>
|
||||||
|
|
||||||
<div class="col-lg-4 col-md-6">
|
|
||||||
|
|
||||||
<div class="card course-card h-100">
|
|
||||||
|
|
||||||
<img src="{{ $course['image'] }}" alt="{{ $course['title'] }}">
|
|
||||||
|
|
||||||
<div class="card-body">
|
|
||||||
|
|
||||||
<span class="badge-course">
|
|
||||||
{{ $course['level'] }}
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<h4 class="mt-3 fw-bold">
|
|
||||||
{{ $course['title'] }}
|
|
||||||
</h4>
|
|
||||||
|
|
||||||
<p class="text-muted">
|
|
||||||
{{ $course['description'] }}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<hr>
|
|
||||||
|
|
||||||
<div class="d-flex justify-content-between">
|
|
||||||
|
|
||||||
<span>
|
|
||||||
<b>Duration</b>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span>
|
|
||||||
{{ $course['duration'] }}
|
|
||||||
</span>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<a href="/apply" class="btn read-btn w-100 mt-4">
|
|
||||||
Apply Course
|
|
||||||
</a>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
@endforeach
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="pb-5">
|
<section class="pb-5">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
<div class="info-box text-center">
|
||||||
<div class="info-box text-center">
|
<h2 class="mb-3">Why Study With Us?</h2>
|
||||||
|
<div class="row">
|
||||||
<h2 class="mb-3">
|
<div class="col-md-3">
|
||||||
Why Study With Us?
|
<h3>✔</h3>
|
||||||
</h2>
|
<p>Experienced Lecturers</p>
|
||||||
|
</div>
|
||||||
<div class="row">
|
<div class="col-md-3">
|
||||||
|
<h3>✔</h3>
|
||||||
<div class="col-md-3">
|
<p>Modern Workshops</p>
|
||||||
<h3>✔</h3>
|
</div>
|
||||||
<p>Experienced Lecturers</p>
|
<div class="col-md-3">
|
||||||
</div>
|
<h3>✔</h3>
|
||||||
|
<p>Industry Certification</p>
|
||||||
<div class="col-md-3">
|
</div>
|
||||||
<h3>✔</h3>
|
<div class="col-md-3">
|
||||||
<p>Modern Workshops</p>
|
<h3>✔</h3>
|
||||||
</div>
|
<p>Career Guidance</p>
|
||||||
|
</div>
|
||||||
<div class="col-md-3">
|
</div>
|
||||||
<h3>✔</h3>
|
</div>
|
||||||
<p>Industry Certification</p>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-3">
|
|
||||||
<h3>✔</h3>
|
|
||||||
<p>Career Guidance</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.getElementById('courseSearch').addEventListener('keyup', function() {
|
||||||
|
let filter = this.value.toLowerCase();
|
||||||
|
let courseItems = document.querySelectorAll('.course-item');
|
||||||
|
let hasResults = false;
|
||||||
|
|
||||||
|
courseItems.forEach(function(item) {
|
||||||
|
let title = item.querySelector('.course-title').textContent.toLowerCase();
|
||||||
|
let level = item.querySelector('.course-level').textContent.toLowerCase();
|
||||||
|
let desc = item.querySelector('.course-desc').textContent.toLowerCase();
|
||||||
|
|
||||||
|
|
||||||
|
if (title.includes(filter) || level.includes(filter) || desc.includes(filter)) {
|
||||||
|
item.style.setProperty('display', '', 'important');
|
||||||
|
hasResults = true;
|
||||||
|
} else {
|
||||||
|
item.style.setProperty('display', 'none', 'important');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
let noResultsMsg = document.getElementById('noResults');
|
||||||
|
if (hasResults) {
|
||||||
|
noResultsMsg.classList.add('d-none');
|
||||||
|
} else {
|
||||||
|
noResultsMsg.classList.remove('d-none');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
@endsection
|
@endsection
|
||||||
|
|
@ -246,10 +246,11 @@
|
||||||
<h4>Quick Links</h4>
|
<h4>Quick Links</h4>
|
||||||
<nav aria-label="Footer quick links">
|
<nav aria-label="Footer quick links">
|
||||||
<ul class="list-unstyled footer-links">
|
<ul class="list-unstyled footer-links">
|
||||||
<li><a href="{{ Route::has('courses') ? route('courses') : '#' }}">Courses</a></li>
|
<li><a href="/">Home</a></li>
|
||||||
<li><a href="{{ Route::has('research') ? route('research') : '#' }}">Research</a></li>
|
<li><a href="{{ Route::has('courses') ? route('courses') : '/courses' }}">Courses</a></li>
|
||||||
<li><a href="{{ Route::has('faculty') ? route('faculty') : '#' }}">Faculty</a></li>
|
<li><a href="{{ Route::has('research') ? route('research') : '/students' }}">Students</a></li>
|
||||||
<li><a href="{{ Route::has('contact') ? route('contact') : '#' }}">Contact</a></li>
|
<li><a href="{{ Route::has('faculty') ? route('faculty') : '/abouts' }}">Abouts</a></li>
|
||||||
|
<li><a href="{{ Route::has('contact') ? route('contact') : '/contact' }}">Contact</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -304,8 +305,7 @@ function submitLogout() {
|
||||||
.then(data => {
|
.then(data => {
|
||||||
if (data.success) {
|
if (data.success) {
|
||||||
alert('Logged out successfully!');
|
alert('Logged out successfully!');
|
||||||
// සාර්ථකව Logout වුණාම කෙලින්ම මුල් පිටුවට (Home - /) යවනවා.
|
|
||||||
// එවිට Auth::check() false වී Sign In / Register බටන් ටික බලාගන්න පුළුවන්.
|
|
||||||
window.location.href = '/';
|
window.location.href = '/';
|
||||||
} else {
|
} else {
|
||||||
alert('Logout failed. Please try again.');
|
alert('Logout failed. Please try again.');
|
||||||
|
|
@ -329,6 +329,7 @@ window.addEventListener('click', function () {
|
||||||
const dropdown = document.getElementById('userDropdownContent');
|
const dropdown = document.getElementById('userDropdownContent');
|
||||||
if (dropdown) { dropdown.style.display = 'none'; }
|
if (dropdown) { dropdown.style.display = 'none'; }
|
||||||
});
|
});
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -9,6 +9,7 @@
|
||||||
}
|
}
|
||||||
* {
|
* {
|
||||||
font-family: 'Arial', Helvetica, sans-serif;
|
font-family: 'Arial', Helvetica, sans-serif;
|
||||||
|
transform: scale(0.95);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* LEFT PANEL */
|
/* LEFT PANEL */
|
||||||
|
|
@ -56,6 +57,8 @@
|
||||||
.input-container {
|
.input-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-bottom: 25px;
|
margin-bottom: 25px;
|
||||||
|
font-size: 22px;
|
||||||
|
font-family: arial;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-container input {
|
.input-container input {
|
||||||
|
|
@ -66,7 +69,9 @@
|
||||||
border-bottom: 2px solid #ddd;
|
border-bottom: 2px solid #ddd;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
outline: none;
|
outline: none;
|
||||||
font-size: 16px;
|
font-size: 22px;
|
||||||
|
font-family: arial;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-container label {
|
.input-container label {
|
||||||
|
|
@ -76,12 +81,17 @@
|
||||||
color: #744a68;
|
color: #744a68;
|
||||||
transition: .3s;
|
transition: .3s;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
font-size: 22px;
|
||||||
|
font-family: arial;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* FLOATING LABEL & VALIDATION STATES */
|
/* FLOATING LABEL & VALIDATION STATES */
|
||||||
.input-container input:focus,
|
.input-container input:focus,
|
||||||
.input-container input:valid {
|
.input-container input:valid {
|
||||||
border-bottom-color: #744a68;
|
border-bottom-color: #744a68;
|
||||||
|
font-size: 20px;
|
||||||
|
font-family: arial;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-container input:focus + label,
|
.input-container input:focus + label,
|
||||||
|
|
@ -95,7 +105,7 @@
|
||||||
/* FORGOT PASSWORD */
|
/* FORGOT PASSWORD */
|
||||||
.forgot-link {
|
.forgot-link {
|
||||||
color: #744a68;
|
color: #744a68;
|
||||||
font-size: 14px;
|
font-size: 16px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
transition: color 0.2s ease-in-out;
|
transition: color 0.2s ease-in-out;
|
||||||
|
|
@ -115,7 +125,7 @@
|
||||||
background: #5E244E;
|
background: #5E244E;
|
||||||
border: none;
|
border: none;
|
||||||
color: white;
|
color: white;
|
||||||
border-radius: 8px;
|
/* border-radius: 8px; */
|
||||||
transition: background 0.2s ease-in-out, transform 0.1s ease;
|
transition: background 0.2s ease-in-out, transform 0.1s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -141,6 +151,8 @@
|
||||||
color: #744a68;
|
color: #744a68;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: arial;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dontacc a:hover {
|
.dontacc a:hover {
|
||||||
|
|
|
||||||
|
|
@ -9,6 +9,11 @@
|
||||||
font-family: 'Arial', Helvetica, sans-serif;
|
font-family: 'Arial', Helvetica, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
font-family: 'Arial';
|
||||||
|
transform: scale(0.95);
|
||||||
|
}
|
||||||
|
|
||||||
.left-panel {
|
.left-panel {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
background: #f8f9fa;
|
background: #f8f9fa;
|
||||||
|
|
@ -27,7 +32,7 @@
|
||||||
max-width: 520px;
|
max-width: 520px;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
padding: 40px;
|
padding: 40px;
|
||||||
border-radius: 15px;
|
/* border-radius: 15px; */
|
||||||
box-shadow: 0 15px 40px rgba(0, 0, 0, .12);
|
box-shadow: 0 15px 40px rgba(0, 0, 0, .12);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -49,6 +54,8 @@
|
||||||
.input-container {
|
.input-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-bottom: 25px;
|
margin-bottom: 25px;
|
||||||
|
font-size: 22px;
|
||||||
|
font-family: arial;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-container input {
|
.input-container input {
|
||||||
|
|
@ -58,7 +65,9 @@
|
||||||
padding: 12px 0 12px 5px;
|
padding: 12px 0 12px 5px;
|
||||||
outline: none;
|
outline: none;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
font-family: 'Arial', Helvetica, sans-serif;
|
font-family: 'Arial';
|
||||||
|
font-size: 22px;
|
||||||
|
font-family: arial;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-container label {
|
.input-container label {
|
||||||
|
|
@ -70,10 +79,14 @@
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
padding: 0 4px;
|
padding: 0 4px;
|
||||||
|
font-size: 22px;
|
||||||
|
font-family: arial;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-container input:focus {
|
.input-container input:focus {
|
||||||
border-color: #744a68;
|
border-color: #744a68;
|
||||||
|
font-size: 20px;
|
||||||
|
font-family: arial;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Reliable floating label mechanism via :placeholder-shown */
|
/* Reliable floating label mechanism via :placeholder-shown */
|
||||||
|
|
@ -93,17 +106,22 @@
|
||||||
background:#5E244E;
|
background:#5E244E;
|
||||||
border: none;
|
border: none;
|
||||||
margin-bottom:10px;
|
margin-bottom:10px;
|
||||||
|
font-size: 22px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dontacc {
|
.dontacc {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
|
font-size: 19px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dontacc a {
|
.dontacc a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #5E244E;
|
color: #5E244E;
|
||||||
|
font-size: 20px;
|
||||||
|
font-family: arial;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media(max-width: 991px) {
|
@media(max-width: 991px) {
|
||||||
|
|
@ -188,7 +206,7 @@
|
||||||
<label>Confirm Password</label>
|
<label>Confirm Password</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-check mb-4" style="gap: 5px; padding-bottom: 10px;">
|
<div class="form-check mb-4" style="gap: 5px; padding-bottom: 21px;">
|
||||||
<input class="form-check-input" type="checkbox" id="agree" required>
|
<input class="form-check-input" type="checkbox" id="agree" required>
|
||||||
<label class="form-check-label" for="agree" >
|
<label class="form-check-label" for="agree" >
|
||||||
I agree to the Terms & Conditions
|
I agree to the Terms & Conditions
|
||||||
|
|
@ -201,8 +219,6 @@
|
||||||
|
|
||||||
<div class="dontacc">
|
<div class="dontacc">
|
||||||
<p class="mt-4 mb-1" >Already have an account?</p>
|
<p class="mt-4 mb-1" >Already have an account?</p>
|
||||||
|
|
||||||
|
|
||||||
<a href="{{ url('/signin') }}">
|
<a href="{{ url('/signin') }}">
|
||||||
Sign In
|
Sign In
|
||||||
</a>
|
</a>
|
||||||
|
|
|
||||||
|
|
@ -48,7 +48,7 @@ url('https://images.pexels.com/photos/3802510/pexels-photo-3802510.jpeg');
|
||||||
.btn-portal{
|
.btn-portal{
|
||||||
background:#5E244E;
|
background:#5E244E;
|
||||||
color:#fff;
|
color:#fff;
|
||||||
border-radius:30px;
|
|
||||||
padding:10px 30px;
|
padding:10px 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -56,6 +56,57 @@ url('https://images.pexels.com/photos/3802510/pexels-photo-3802510.jpeg');
|
||||||
background:#8B3A74;
|
background:#8B3A74;
|
||||||
color:#fff;
|
color:#fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.modal-content {
|
||||||
|
border: none;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header {
|
||||||
|
background-color: #f8fafc;
|
||||||
|
border-bottom: 1px solid #e2e8f0;
|
||||||
|
border-top-left-radius: 12px;
|
||||||
|
border-top-right-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-title {
|
||||||
|
color: #8B3A74;
|
||||||
|
font-weight: 600;
|
||||||
|
align-item:center;
|
||||||
|
margin-left: 134px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.form-label {
|
||||||
|
color: #475569;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-control {
|
||||||
|
border: 1px solid #cbd5e1;
|
||||||
|
|
||||||
|
padding: 0.6rem 0.75rem;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.form-control:focus {
|
||||||
|
border-color: #a5b4fc;
|
||||||
|
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-footer {
|
||||||
|
background-color: #f8fafc;
|
||||||
|
border-top: 1px solid #e2e8f0;
|
||||||
|
border-bottom-left-radius: 12px;
|
||||||
|
border-bottom-right-radius: 12px;
|
||||||
|
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<!-- Hero -->
|
<!-- Hero -->
|
||||||
|
|
@ -67,9 +118,17 @@ url('https://images.pexels.com/photos/3802510/pexels-photo-3802510.jpeg');
|
||||||
payments and profile from one place.
|
payments and profile from one place.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<a href="#" class="btn btn-portal mt-3">
|
<button onclick="studentlogin()" class="btn btn-portal mt-3">
|
||||||
Student Login
|
Student Login
|
||||||
</a>
|
</button>
|
||||||
|
<script>
|
||||||
|
function studentlogin() {
|
||||||
|
|
||||||
|
var myModal = new bootstrap.Modal(document.getElementById('studentLoginModal'));
|
||||||
|
myModal.show();
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
@ -212,11 +271,57 @@ Contact Support
|
||||||
Log in to manage your academic activities and stay updated.
|
Log in to manage your academic activities and stay updated.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<a href="#" class="btn btn-portal mt-3">
|
|
||||||
|
<button onclick="studentlogin()" class="btn btn-portal mt-3">
|
||||||
Student Login
|
Student Login
|
||||||
</a>
|
</button>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Student Login Modal -->
|
||||||
|
<div class="modal fade" id="studentLoginModal" tabindex="-1" aria-labelledby="studentLoginModalLabel" aria-hidden="true">
|
||||||
|
<div class="modal-dialog modal-dialog-centered">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title" id="studentLoginModalLabel">Student Portal Login</h5>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||||
|
</div>
|
||||||
|
<form action="#" method="POST" id="studentLoginForm">
|
||||||
|
<!-- Laravel use karanawa nam meka active karanna -->
|
||||||
|
<!-- @csrf -->
|
||||||
|
|
||||||
|
<div class="modal-body">
|
||||||
|
<!-- Username Field -->
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="username" class="form-label">Username / Student ID</label>
|
||||||
|
<input type="text" name="username" id="username" class="form-control" placeholder="Enter your username" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Password Field -->
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="password" class="form-label">Password</label>
|
||||||
|
<input type="password" name="password" id="password" class="form-control" placeholder="Enter your password" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- PIN Field -->
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="pin" class="form-label">Security PIN</label>
|
||||||
|
<input type="password" name="pin" id="pin" class="form-control" maxlength="6" placeholder="Enter 4-6 digit PIN" required>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-portal" data-bs-dismiss="modal" style="background-color:gray; width:230px" >Cancel</button>
|
||||||
|
<button type="submit" class="btn btn-portal" style=" width:230px">Login</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
@endsection
|
@endsection
|
||||||
|
|
@ -13,7 +13,7 @@
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
||||||
<style>
|
|
||||||
|
|
||||||
:root{
|
:root{
|
||||||
--primary:#5E244E;
|
--primary:#5E244E;
|
||||||
|
|
@ -108,6 +108,7 @@ background-position: center;
|
||||||
justify-content:center;
|
justify-content:center;
|
||||||
flex-direction:column;
|
flex-direction:column;
|
||||||
color:#fff;
|
color:#fff;
|
||||||
|
padding-top: 38px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero h1{
|
.hero h1{
|
||||||
|
|
@ -306,7 +307,7 @@ h6{
|
||||||
|
|
||||||
<div class="row g-4">
|
<div class="row g-4">
|
||||||
@foreach($courses as $course)
|
@foreach($courses as $course)
|
||||||
<div class="col-lg-4 col-md-6">
|
<div class="col-lg-4 col-md-6" padding-bottom:10px>
|
||||||
<div class="card shadow-sm border-0 h-100">
|
<div class="card shadow-sm border-0 h-100">
|
||||||
|
|
||||||
<img src="{{ $course['image'] }}"
|
<img src="{{ $course['image'] }}"
|
||||||
|
|
@ -338,7 +339,9 @@ h6{
|
||||||
</div>
|
</div>
|
||||||
@endforeach
|
@endforeach
|
||||||
|
|
||||||
<div style="display: flex; justify-content: flex-end; width: 100%; ">
|
|
||||||
|
<div style="display: flex; justify-content: center; width: 100%; ">
|
||||||
|
<!-- <div style="display: flex; justify-content: flex-end; width: 100%; "> -->
|
||||||
<a href="/courses" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-medium transition" style="color:#5E244E">
|
<a href="/courses" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-medium transition" style="color:#5E244E">
|
||||||
View all courses
|
View all courses
|
||||||
</a>
|
</a>
|
||||||
|
|
@ -349,7 +352,7 @@ h6{
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{{-- ===================== WHY CHOOSE US ===================== --}}
|
{{-- ===================== WHY CHOOSE US ===================== --}}
|
||||||
<section class="section py-5 why-section" aria-labelledby="why-us-heading">
|
<section class="section py-5 why-section" aria-labelledby="why-us-heading" >
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row align-items-center g-5">
|
<div class="row align-items-center g-5">
|
||||||
|
|
||||||
|
|
@ -419,4 +422,6 @@ h6{
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@endsection
|
@endsection
|
||||||
Loading…
Reference in New Issue