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

Compare commits

base: imadhi:05ba79ba0397075b11f79c7b841cf5361208935f
Branches Tags
imadhi:main
imadhi:dev
imadhi:homefix0716
imadhi:homefix3
imadhi:homefix2
..
compare: imadhi:3350b90866eedd920d087cc713bceb2798083452
Branches Tags
imadhi:dev
imadhi:homefix0716
imadhi:main
imadhi:homefix3
imadhi:homefix2

No commits in common. "05ba79ba0397075b11f79c7b841cf5361208935f" and "3350b90866eedd920d087cc713bceb2798083452" have entirely different histories.
05ba79ba03 ... 3350b90866

6 changed files with 235 additions and 584 deletions
Show Stats Expand all files Collapse all files

245
resources/views/abouts.blade.php
View File

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

162
resources/views/contacts.blade.php
View File

@ -11,10 +11,6 @@
--light:#f8f4f7; --light:#f8f4f7;
} }
body {
font-family: Arial, Helvetica, sans-serif;
}
.hero-contact{ .hero-contact{
min-height:50vh; min-height:50vh;
background: background:
@ -31,39 +27,26 @@ body {
.contact-box{ .contact-box{
background:#fff; background:#fff;
border-radius:20px; border-radius:15px;
padding:35px; padding:25px;
box-shadow: 0 10px 30px rgba(0,0,0,.05); box-shadow:0 5px 20px rgba(0,0,0,.08);
border: 1px solid #efeff4;
} }
.form-control{ .form-control{
border-radius:10px; border-radius:10px;
padding:12px; padding:12px;
border: 1px solid #ced4da;
transition: all 0.3s ease;
}
.form-control:focus {
border-color: var(--primary);
box-shadow: 0 0 0 0.25rem rgba(94, 36, 78, 0.25);
} }
.btn-contact{ .btn-contact{
background:var(--primary); background:var(--primary);
color:#fff; color:#fff;
border-radius:10px; /* border-radius:30px; */
padding:12px 30px; padding:10px 30px;
font-weight: 600;
transition: all 0.3s ease;
border: none;
} }
.btn-contact:hover{ .btn-contact:hover{
background:var(--secondary); background:var(--secondary);
color:#fff; color:#fff;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(94, 36, 78, 0.3);
} }
.info-card{ .info-card{
@ -71,96 +54,56 @@ body {
border-radius:15px; border-radius:15px;
padding:20px; padding:20px;
text-align:center; text-align:center;
box-shadow: 0 5px 20px rgba(0,0,0,.04); box-shadow:0 5px 15px rgba(0,0,0,.08);
border: 1px solid #efeff4;
transition:.3s; transition:.3s;
} }
.info-card:hover{ .info-card:hover{
transform:translateY(-5px); transform:translateY(-5px);
border-color: var(--primary);
box-shadow: 0 10px 25px rgba(94, 36, 78, 0.08);
}
/* Icons වල පාට වෙනස් කිරීම */
.info-card i {
color: var(--primary) !important;
}
/* ========================================================
Custom CSS Scroll Animations
======================================================== */
.animate-item {
opacity: 0;
will-change: transform, opacity;
transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
/* 1. පල්ලෙහා ඉඳන් උඩට (Hero & Map) */
.fade-up-init {
transform: translateY(30px);
}
/* 2. වමේ ඉඳන් දකුණට (Form එක සඳහා) */
.slide-left-init {
transform: translateX(-40px);
}
/* 3. එකපාර (Fade In) මතු වෙන්න (Info Cards සඳහා) */
.fade-in-init {
transform: scale(0.98);
}
/* Active Class */
.animate-item.animated {
opacity: 1;
transform: translate(0) scale(1);
} }
</style> </style>
<!-- HERO --> <!-- HERO -->
<section class="hero-contact"> <section class="hero-contact">
<div class="container"> <div class="container">
<div class="animate-item animated fade-up-init"> <h1 class="fw-bold">Contact Us</h1>
<h1 class="fw-bold display-4">Contact Us</h1> <p>We are here to help you. Reach us anytime.</p>
<p class="fs-5">We are here to help you. Reach us anytime.</p>
</div>
</div> </div>
</section> </section>
<!-- CONTACT SECTION --> <!-- CONTACT SECTIONs-->
<section class="py-5 overflow-hidden"> <section class="py-5">
<div class="container"> <div class="container">
<div class="row g-4"> <div class="row g-4">
<!-- Contact Form (Slide Left) --> <!-- Contact Form -->
<div class="col-md-6 animate-item slide-left-init"> <div class="col-md-6">
<div class="contact-box"> <div class="contact-box">
<h3 class="mb-4 fw-bold" style="color: #1c1d1f;">Send Message</h3> <h3 class="mb-4">Send Message</h3>
<form action="#" method="POST"> <form action="#" method="POST">
@csrf @csrf
<div class="mb-3"> <div class="mb-3">
<label class="form-label fw-semibold">Name</label> <label>Name</label>
<input type="text" name="name" class="form-control" placeholder="Your Name" required> <input type="text" name="name" class="form-control" placeholder="Your Name">
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label class="form-label fw-semibold">Email</label> <label>Email</label>
<input type="email" name="email" class="form-control" placeholder="Your Email" required> <input type="email" name="email" class="form-control" placeholder="Your Email">
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label class="form-label fw-semibold">Subject</label> <label>Subject</label>
<input type="text" name="subject" class="form-control" placeholder="Subject" required> <input type="text" name="subject" class="form-control" placeholder="Subject">
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label class="form-label fw-semibold">Message</label> <label>Message</label>
<textarea name="message" rows="5" class="form-control" placeholder="Your Message" required></textarea> <textarea name="message" rows="5" class="form-control" placeholder="Your Message"></textarea>
</div> </div>
<button type="submit" class="btn btn-contact w-100"> <button type="submit" class="btn btn-contact w-100">
@ -172,31 +115,31 @@ Send Message
</div> </div>
</div> </div>
<!-- Contact Info (සියල්ල එකපාර Fade In වේ) --> <!-- Contact Info -->
<div class="col-md-6 animate-item fade-in-init"> <div class="col-md-6">
<div class="info-card mb-3"> <div class="info-card mb-3">
<i class="fa-solid fa-location-dot fa-2x"></i> <i class="fa-solid fa-location-dot fa-2x text-primary"></i>
<h5 class="mt-3 fw-bold">Address</h5> <h5 class="mt-2">Address</h5>
<p class="text-muted mb-0">No 12, Colombo Road, Sri Lanka</p> <p>No 12, Colombo Road, Sri Lanka</p>
</div> </div>
<div class="info-card mb-3"> <div class="info-card mb-3">
<i class="fa-solid fa-phone fa-2x"></i> <i class="fa-solid fa-phone fa-2x text-success"></i>
<h5 class="mt-3 fw-bold">Phone</h5> <h5 class="mt-2">Phone</h5>
<p class="text-muted mb-0">+94 77 123 4567</p> <p>+94 77 123 4567</p>
</div> </div>
<div class="info-card mb-3"> <div class="info-card mb-3">
<i class="fa-solid fa-envelope fa-2x"></i> <i class="fa-solid fa-envelope fa-2x text-danger"></i>
<h5 class="mt-3 fw-bold">Email</h5> <h5 class="mt-2">Email</h5>
<p class="text-muted mb-0">info@automotiveacademy.lk</p> <p>info@automotiveacademy.lk</p>
</div> </div>
<div class="info-card"> <div class="info-card">
<i class="fa-solid fa-clock fa-2x"></i> <i class="fa-solid fa-clock fa-2x text-warning"></i>
<h5 class="mt-3 fw-bold">Working Hours</h5> <h5 class="mt-2">Working Hours</h5>
<p class="text-muted mb-0">Mon - Fri: 8.00 AM - 5.00 PM</p> <p>Mon - Fri: 8.00 AM - 5.00 PM</p>
</div> </div>
</div> </div>
@ -207,7 +150,7 @@ Send Message
</section> </section>
<!-- MAP --> <!-- MAP -->
<section class="pb-5"> <section class="pb-5">
<div class="container"> <div class="container">
<!-- <iframe <!-- <iframe
@ -227,36 +170,9 @@ Send Message
allowfullscreen="" allowfullscreen=""
loading="lazy"> loading="lazy">
</iframe> </iframe>
<!-- <section class="pb-5">
<div class="container animate-item fade-up-init">
<iframe
src="https://www.google.com/maps/embed/pb=!1m14!1m8!1m3!1d989.8732851214081!2d80.0435697!3d7.0771955!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ae2fc2f4b77d05d%3A0x34523a0fdbdedc60!2sGlitz%20Park!5e0!3m2!1sen!2slk!4v1719999999999!5m2!1sen!2slk"
width="100%"
height="350"
style="border:0;border-radius:20px; box-shadow: 0 10px 30px rgba(0,0,0,.05);"
allowfullscreen=""
loading="lazy">
</iframe>
</div> </div>
</section> --> </section>
<script>
document.addEventListener('DOMContentLoaded', function () {
const animatedElements = document.querySelectorAll('.animate-item');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animated');
observer.unobserve(entry.target);
}
});
}, {
threshold: 0.10
});
animatedElements.forEach(el => observer.observe(el));
});
</script>
@endsection @endsection

76
resources/views/courses.blade.php
View File

@ -14,10 +14,6 @@
--success-green: #1f8a4c; --success-green: #1f8a4c;
} }
body {
font-family: Arial, Helvetica, sans-serif;
}
.hero { .hero {
background-image: linear-gradient(rgba(109, 105, 105, 0.65), rgb(64, 59, 66)), background-image: linear-gradient(rgba(109, 105, 105, 0.65), rgb(64, 59, 66)),
url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=1600&q=80'); url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=1600&q=80');
@ -221,6 +217,12 @@ body {
text-align: left; text-align: left;
} }
.feature-box:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
border-color: var(--primary);
}
.feature-icon-wrapper { .feature-icon-wrapper {
width: 50px; width: 50px;
height: 50px; height: 50px;
@ -232,23 +234,6 @@ body {
justify-content: center; justify-content: center;
font-size: 22px; font-size: 22px;
margin-bottom: 20px; margin-bottom: 20px;
transition: transform 0.5s ease; /* Icon එක කැරකෙන්න transition එකක් දුන්නා */
}
/* Card එක උඩට mouse එක ගෙනිච්චම වෙන වෙනස්කම් */
.feature-box:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
border-color: var(--primary);
}
/* Card එක hover කරද්දී Icon එක අංශක 360ක් රොටේට් වෙන කොටස */
.feature-box:hover .feature-icon-wrapper i {
transform: rotate(360deg);
}
.feature-icon-wrapper i {
transition: transform 0.5s ease; /* Smooth rotate වෙන්න */
} }
.feature-box h5 { .feature-box h5 {
@ -271,29 +256,11 @@ body {
color: #666; color: #666;
margin-top: 20px; margin-top: 20px;
} }
/* ========================================================
Custom Pure CSS Animations (Scroll Animations)
======================================================== */
/* .animate-on-scroll {
opacity: 0;
transition: all 0.8s ease-out;
}
.fade-up-init {
transform: translateY(30px);
}
.animate-on-scroll.animated {
opacity: 1;
transform: translateY(0);
} */
</style> </style>
{{-- Hero --}} {{-- Hero --}}
<section class="hero"> <section class="hero">
<div class="container"> <div class="container">
<div class="animate-on-scroll animated fade-up-init">
<h1>Our Courses</h1> <h1>Our Courses</h1>
<p> <p>
Build your future in the automotive industry through practical Build your future in the automotive industry through practical
@ -310,7 +277,6 @@ body {
</button> </button>
</div> </div>
</div> </div>
</div>
</section> </section>
@php @php
@ -392,8 +358,8 @@ $courses=[
</div> </div>
<div class="row g-4" id="courseContainer"> <div class="row g-4" id="courseContainer">
@foreach($courses as $index => $course) @foreach($courses as $course)
<div class="col-12 course-item animate-on-scroll fade-up-init" style="transition-delay: {{ $index * 100 }}ms;"> <div class="col-12 course-item">
<div class="card course-card h-100"> <div class="card course-card h-100">
<div class="row g-0 align-items-center"> <div class="row g-0 align-items-center">
@ -438,10 +404,10 @@ $courses=[
</div> </div>
</section> </section>
{{-- Why Study With Us Section --}} {{-- Modernized Why Study With Us Section --}}
<section class="pb-5"> <section class="pb-5">
<div class="container"> <div class="container">
<div class="features-section text-center animate-on-scroll fade-up-init"> <div class="features-section text-center">
<h2>Why Study With Us?</h2> <h2>Why Study With Us?</h2>
<div class="row g-4"> <div class="row g-4">
@ -491,9 +457,7 @@ $courses=[
</section> </section>
<script> <script>
document.addEventListener('DOMContentLoaded', function () { document.getElementById('courseSearch').addEventListener('keyup', function() {
// === 1. Course Search Feature ===
document.getElementById('courseSearch').addEventListener('keyup', function() {
let filter = this.value.toLowerCase(); let filter = this.value.toLowerCase();
let courseItems = document.querySelectorAll('.course-item'); let courseItems = document.querySelectorAll('.course-item');
let hasResults = false; let hasResults = false;
@ -505,7 +469,6 @@ document.addEventListener('DOMContentLoaded', function () {
if (title.includes(filter) || desc.includes(filter)) { if (title.includes(filter) || desc.includes(filter)) {
item.style.setProperty('display', '', 'important'); item.style.setProperty('display', '', 'important');
hasResults = true; hasResults = true;
item.classList.add('animated');
} else { } else {
item.style.setProperty('display', 'none', 'important'); item.style.setProperty('display', 'none', 'important');
} }
@ -517,23 +480,6 @@ document.addEventListener('DOMContentLoaded', function () {
} else { } else {
noResultsMsg.classList.remove('d-none'); noResultsMsg.classList.remove('d-none');
} }
});
// === 2. Pure Intersection Observer Scroll Animation ===
const animatedElements = document.querySelectorAll('.animate-on-scroll');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animated');
observer.unobserve(entry.target);
}
});
}, {
threshold: 0.10
});
animatedElements.forEach(el => observer.observe(el));
}); });
</script> </script>

2
resources/views/layouts/app.blade.php
View File

@ -212,7 +212,7 @@
<span class="user-profile-name">{{ $displayName }}</span> <span class="user-profile-name">{{ $displayName }}</span>
</a> </a>
{{-- Dropdown responsive alignment එක හැදුවා --}}
<ul class="dropdown-menu dropdown-menu-md-end shadow animate slideIn" aria-labelledby="userMenu"> <ul class="dropdown-menu dropdown-menu-md-end shadow animate slideIn" aria-labelledby="userMenu">
<li> <li>
<a class="dropdown-item" href="/profile"> <a class="dropdown-item" href="/profile">

158
resources/views/students.blade.php
View File

@ -11,10 +11,6 @@
--light:#f8f4f7; --light:#f8f4f7;
} }
body {
font-family: Arial, Helvetica, sans-serif;
}
.hero{ .hero{
background:linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.65)), background:linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.65)),
url('https://images.pexels.com/photos/3802510/pexels-photo-3802510.jpeg'); url('https://images.pexels.com/photos/3802510/pexels-photo-3802510.jpeg');
@ -28,15 +24,12 @@ body {
.portal-card{ .portal-card{
border:none; border:none;
border-radius:15px; border-radius:15px;
transition:.4s cubic-bezier(0.165, 0.84, 0.44, 1); transition:.3s;
box-shadow:0 5px 20px rgba(0,0,0,.08); box-shadow:0 5px 20px rgba(0,0,0,.08);
border: 1px solid #efeff4;
} }
.portal-card:hover{ .portal-card:hover{
transform:translateY(-8px); transform:translateY(-8px);
border-color: var(--primary);
box-shadow: 0 15px 30px rgba(94, 36, 78, 0.1);
} }
.portal-icon{ .portal-icon{
@ -50,46 +43,28 @@ body {
justify-content:center; justify-content:center;
font-size:28px; font-size:28px;
margin:auto; margin:auto;
transition: 0.4s ease;
}
.portal-card:hover .portal-icon {
background: var(--secondary);
transform: scale(1.1);
} }
.btn-portal{ .btn-portal{
background:#5E244E; background:#5E244E;
color:#fff; color:#fff;
padding:12px 35px; padding:10px 30px;
border: none; border: none;
border-radius: 8px; transition: 0.2s ease;
font-weight: 600;
transition: all 0.3s ease;
} }
.btn-portal:hover{ .btn-portal:hover{
background:#8B3A74; background:#8B3A74;
color:#fff; color:#fff;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(94, 36, 78, 0.3);
} }
.modal-content { .modal-content {
border: none; border: none;
border-radius: 16px; border-radius: 16px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
} }
/* Modal එක Open වෙද්දී Zoom-In වෙන්න */
.modal.fade .modal-dialog {
transform: scale(0.85);
transition: transform 0.3s ease-out;
}
.modal.show .modal-dialog {
transform: scale(1);
}
.modal-header { .modal-header {
background: transparent; background: transparent;
border-bottom: none; border-bottom: none;
@ -106,6 +81,7 @@ body {
padding: 10px 25px 20px; padding: 10px 25px 20px;
} }
.input-group-text { .input-group-text {
background-color: #f8fafc; background-color: #f8fafc;
border-color: #cbd5e1; border-color: #cbd5e1;
@ -135,6 +111,7 @@ body {
outline: 0; outline: 0;
} }
.input-group:focus-within .input-group-text { .input-group:focus-within .input-group-text {
border-color: var(--secondary); border-color: var(--secondary);
color: var(--secondary); color: var(--secondary);
@ -146,6 +123,7 @@ body {
padding: 0 25px 30px; padding: 0 25px 30px;
} }
.btn-modal-cancel { .btn-modal-cancel {
background: transparent; background: transparent;
border: 1.5px solid #cbd5e1; border: 1.5px solid #cbd5e1;
@ -154,7 +132,6 @@ body {
padding: 10px 0; padding: 10px 0;
transition: all 0.2s; transition: all 0.2s;
width: 100%; width: 100%;
border-radius: 8px;
} }
.btn-modal-cancel:hover { .btn-modal-cancel:hover {
@ -172,7 +149,6 @@ body {
box-shadow: 0 4px 12px rgba(94, 36, 78, 0.2); box-shadow: 0 4px 12px rgba(94, 36, 78, 0.2);
transition: all 0.2s; transition: all 0.2s;
width: 100%; width: 100%;
border-radius: 8px;
} }
.btn-modal-login:hover { .btn-modal-login:hover {
@ -181,69 +157,39 @@ body {
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: 0 6px 15px rgba(94, 36, 78, 0.3); box-shadow: 0 6px 15px rgba(94, 36, 78, 0.3);
} }
/* ========================================================
Custom CSS Scroll Animations
======================================================== */
.animate-item {
opacity: 0;
will-change: transform, opacity;
transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.fade-up-init {
transform: translateY(30px);
}
.fade-in-init {
transform: scale(0.98);
}
.slide-right-init {
transform: translateX(30px);
}
.animate-item.animated {
opacity: 1;
transform: translate(0) scale(1);
}
</style> </style>
<section class="hero"> <section class="hero">
<div class="container"> <div class="container">
<div class="animate-item animated fade-up-init"> <h1 class="fw-bold">Student Portal</h1>
<h1 class="fw-bold display-5">Student Portal</h1> <p class="mt-3">
<p class="mt-3 fs-5" style="max-width: 700px; margin: auto;">
Access your courses, timetable, assignments, examination results, Access your courses, timetable, assignments, examination results,
payments and profile from one place. payments and profile from one place.
</p> </p>
<button onclick="studentlogin()" class="btn btn-portal mt-4 shadow"> <button onclick="studentlogin()" class="btn btn-portal mt-3">
Student Login Student Login
</button> </button>
</div> </div>
</div>
</section> </section>
<!-- SERVICES SECTION --> <section class="py-5">
<section class="py-5 overflow-hidden">
<div class="container"> <div class="container">
<div class="text-center mb-5 animate-item fade-up-init"> <div class="text-center mb-5">
<h2 class="fw-bold">Student Services</h2> <h2>Student Services</h2>
<p class="text-muted"> <p class="text-muted">
Everything you need during your academic journey. Everything you need during your academic journey.
</p> </p>
</div> </div>
<!-- සේවා කාඩ් සියල්ල එකපාර ලස්සනට Fade-in වේ --> <div class="row g-4">
<div class="row g-4 animate-item fade-in-init">
<div class="col-md-4"> <div class="col-md-4">
<div class="card portal-card h-100 text-center p-4"> <div class="card portal-card h-100 text-center p-4">
<div class="portal-icon"> <div class="portal-icon">
<i class="fa-solid fa-book"></i> <i class="fa-solid fa-book"></i>
</div> </div>
<h4 class="mt-4 fw-bold">My Courses</h4> <h4 class="mt-4">My Courses</h4>
<p class="text-muted mb-0">View enrolled courses and learning materials.</p> <p class="text-muted">View enrolled courses and learning materials.</p>
</div> </div>
</div> </div>
@ -252,8 +198,8 @@ body {
<div class="portal-icon"> <div class="portal-icon">
<i class="fa-solid fa-calendar-days"></i> <i class="fa-solid fa-calendar-days"></i>
</div> </div>
<h4 class="mt-4 fw-bold">Class Timetable</h4> <h4 class="mt-4">Class Timetable</h4>
<p class="text-muted mb-0">Check your weekly lecture schedule.</p> <p class="text-muted">Check your weekly lecture schedule.</p>
</div> </div>
</div> </div>
@ -262,8 +208,8 @@ body {
<div class="portal-icon"> <div class="portal-icon">
<i class="fa-solid fa-file-lines"></i> <i class="fa-solid fa-file-lines"></i>
</div> </div>
<h4 class="mt-4 fw-bold">Assignments</h4> <h4 class="mt-4">Assignments</h4>
<p class="text-muted mb-0">Submit assignments and download resources.</p> <p class="text-muted">Submit assignments and download resources.</p>
</div> </div>
</div> </div>
@ -272,8 +218,8 @@ body {
<div class="portal-icon"> <div class="portal-icon">
<i class="fa-solid fa-square-poll-vertical"></i> <i class="fa-solid fa-square-poll-vertical"></i>
</div> </div>
<h4 class="mt-4 fw-bold">Exam Results</h4> <h4 class="mt-4">Exam Results</h4>
<p class="text-muted mb-0">View semester and final examination results.</p> <p class="text-muted">View semester and final examination results.</p>
</div> </div>
</div> </div>
@ -282,8 +228,8 @@ body {
<div class="portal-icon"> <div class="portal-icon">
<i class="fa-solid fa-credit-card"></i> <i class="fa-solid fa-credit-card"></i>
</div> </div>
<h4 class="mt-4 fw-bold">Fee Payments</h4> <h4 class="mt-4">Fee Payments</h4>
<p class="text-muted mb-0">Pay course fees and download payment receipts.</p> <p class="text-muted">Pay course fees and download payment receipts.</p>
</div> </div>
</div> </div>
@ -292,51 +238,47 @@ body {
<div class="portal-icon"> <div class="portal-icon">
<i class="fa-solid fa-user"></i> <i class="fa-solid fa-user"></i>
</div> </div>
<h4 class="mt-4 fw-bold">Student Profile</h4> <h4 class="mt-4">Student Profile</h4>
<p class="text-muted mb-0">Update your personal information securely.</p> <p class="text-muted">Update your personal information securely.</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- QUICK LINKS --> <section class="py-5 bg-light">
<section class="py-5 bg-light overflow-hidden">
<div class="container"> <div class="container">
<div class="text-center mb-5 animate-item fade-up-init"> <div class="text-center mb-5">
<h2 class="fw-bold">Quick Links</h2> <h2>Quick Links</h2>
</div> </div>
<!-- දකුණේ සිට වමට Slide වේ --> <div class="row text-center">
<div class="row text-center animate-item slide-right-init">
<div class="col-md-3 mb-3"> <div class="col-md-3 mb-3">
<a href="#" class="btn btn-outline-dark w-100 py-2 fw-semibold rounded-pill">Academic Calendar</a> <a href="#" class="btn btn-outline-dark w-100">Academic Calendar</a>
</div> </div>
<div class="col-md-3 mb-3"> <div class="col-md-3 mb-3">
<a href="#" class="btn btn-outline-dark w-100 py-2 fw-semibold rounded-pill">Student Handbook</a> <a href="#" class="btn btn-outline-dark w-100">Student Handbook</a>
</div> </div>
<div class="col-md-3 mb-3"> <div class="col-md-3 mb-3">
<a href="#" class="btn btn-outline-dark w-100 py-2 fw-semibold rounded-pill">Examination Notices</a> <a href="#" class="btn btn-outline-dark w-100">Examination Notices</a>
</div> </div>
<div class="col-md-3 mb-3"> <div class="col-md-3 mb-3">
<a href="#" class="btn btn-outline-dark w-100 py-2 fw-semibold rounded-pill">Contact Support</a> <a href="#" class="btn btn-outline-dark w-100">Contact Support</a>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- BOTTOM CTA --> <section class="py-5">
<section class="py-5 bg-white"> <div class="container text-center">
<div class="container text-center animate-item fade-up-init"> <h2>Ready to Access Your Student Account?</h2>
<h2 class="fw-bold">Ready to Access Your Student Account?</h2> <p class="text-muted">Log in to manage your academic activities and stay updated.</p>
<p class="text-muted fs-5">Log in to manage your academic activities and stay updated.</p> <button onclick="studentlogin()" class="btn btn-portal mt-3">
<button onclick="studentlogin()" class="btn btn-portal mt-3 shadow">
Student Login Student Login
</button> </button>
</div> </div>
</section> </section>
<!-- LOGIN MODAL -->
<div class="modal fade" id="studentLoginModal" tabindex="-1" aria-labelledby="studentLoginModalLabel" aria-hidden="true"> <div class="modal fade" id="studentLoginModal" tabindex="-1" aria-labelledby="studentLoginModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered"> <div class="modal-dialog modal-dialog-centered">
<div class="modal-content"> <div class="modal-content">
@ -347,6 +289,7 @@ body {
</h5> </h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div> </div>
<!-- <form action="#" method="POST" id="studentLoginForm"> -->
<form action="{{ route('student.login.submit') }}" method="POST" id="studentLoginForm"> <form action="{{ route('student.login.submit') }}" method="POST" id="studentLoginForm">
@csrf @csrf
@ -377,8 +320,8 @@ body {
</div> </div>
<div class="modal-footer d-flex gap-2 justify-content-center"> <div class="modal-footer d-flex gap-2 justify-content-center">
<button type="button" class="btn btn-modal-cancel" data-bs-dismiss="modal">Cancel</button> <button type="button" class="btn btn-modal-cancel " data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-modal-login"> Login </button> <button type="submit" class="btn btn-modal-login "> Login </button>
</div> </div>
</form> </form>
</div> </div>
@ -390,23 +333,6 @@ function studentlogin() {
var myModal = new bootstrap.Modal(document.getElementById('studentLoginModal')); var myModal = new bootstrap.Modal(document.getElementById('studentLoginModal'));
myModal.show(); myModal.show();
} }
document.addEventListener('DOMContentLoaded', function () {
const animatedElements = document.querySelectorAll('.animate-item');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animated');
observer.unobserve(entry.target);
}
});
}, {
threshold: 0.10
});
animatedElements.forEach(el => observer.observe(el));
});
</script> </script>
@endsection @endsection

76
resources/views/welcome.blade.php
View File

@ -151,7 +151,7 @@ body{
padding: 20px 24px 24px 24px; padding: 20px 24px 24px 24px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
text-align: left; text-align: left; /* Left alignment for Udemy Style */
} }
.course-title { .course-title {
@ -245,7 +245,6 @@ body{
/* ===== Why Choose Us ===== */ /* ===== Why Choose Us ===== */
.why-section { .why-section {
background: #F8F4F7; background: #F8F4F7;
overflow-x: hidden;
} }
.why-section li { .why-section li {
@ -257,46 +256,12 @@ body{
color: #5E244E; color: #5E244E;
} }
/* ========================================================
Custom Pure CSS Animations (No external libraries needed)
======================================================== */
.animate-on-scroll {
opacity: 0;
transition: all 1s ease-out;
}
/* Fade Up effect */
.fade-up-init {
transform: translateY(40px);
}
/* Fade Left (Slide from Right) effect */
.fade-left-init {
transform: translateX(50px);
}
/* Fade Right (Slide from Left) effect */
.fade-right-init {
transform: translateX(-50px);
}
/* Zoom In effect */
.zoom-in-init {
transform: scale(0.9);
}
/* Animation එක active වූ පසු (JS මඟින් මේ class එක එකතු කරයි) */
.animate-on-scroll.animated {
opacity: 1;
transform: translateY(0) translateX(0) scale(1);
}
</style> </style>
{{-- ===================== HERO ===================== --}} {{-- ===================== HERO ===================== --}}
<section class="hero" role="banner" aria-label="Automobile Engineering Academy introduction"> <section class="hero" role="banner" aria-label="Automobile Engineering Academy introduction">
<div class="container"> <div class="container">
<!-- Hero එක load වෙද්දිම animate වෙන්න කෙලින්ම animated දැම්මා --> <div class="hero-content text-center">
<div class="hero-content text-center animate-on-scroll animated fade-up-init">
<h1 class="display-4 fw-bold"> <h1 class="display-4 fw-bold">
Automobile Engineering Academy Automobile Engineering Academy
</h1> </h1>
@ -325,7 +290,7 @@ body{
<section class="section py-5" aria-labelledby="courses-heading"> <section class="section py-5" aria-labelledby="courses-heading">
<div class="container py-5"> <div class="container py-5">
<div class="text-center mb-5 animate-on-scroll fade-up-init"> <div class="text-center mb-5">
<h2 id="courses-heading">Our Courses</h2> <h2 id="courses-heading">Our Courses</h2>
<p class="text-muted"> <p class="text-muted">
Explore our professional automotive engineering courses. Explore our professional automotive engineering courses.
@ -365,9 +330,8 @@ body{
@endphp @endphp
<div class="row g-4 mb-5"> <div class="row g-4 mb-5">
@foreach($courses as $index => $course) @foreach($courses as $course)
<!-- Cards ටික එකින් එක delay වෙන්න inline style එකක් දැම්මා --> <div class="col-lg-4 col-md-6">
<div class="col-lg-4 col-md-6 animate-on-scroll fade-up-init" style="transition-delay: {{ $index * 150 }}ms;">
<div class="card course-card h-100"> <div class="card course-card h-100">
<div class="course-image-wrapper"> <div class="course-image-wrapper">
@ -403,7 +367,7 @@ body{
@endforeach @endforeach
</div> </div>
<div class="text-center animate-on-scroll fade-up-init"> <div class="text-center">
<a href="/courses" class="btn btn-theme" style="border-radius: 40px;"> <a href="/courses" class="btn btn-theme" style="border-radius: 40px;">
View All Courses <i class="fa-solid fa-arrow-right ms-2"></i> View All Courses <i class="fa-solid fa-arrow-right ms-2"></i>
</a> </a>
@ -417,8 +381,7 @@ body{
<div class="container"> <div class="container">
<div class="row align-items-center g-5"> <div class="row align-items-center g-5">
<!-- Image: Slides from Left --> <div class="col-lg-6">
<div class="col-lg-6 animate-on-scroll fade-right-init">
<img src="https://images.unsplash.com/photo-1487754180451-c456f719a1fc?auto=format&fit=crop&w=900&q=80" <img src="https://images.unsplash.com/photo-1487754180451-c456f719a1fc?auto=format&fit=crop&w=900&q=80"
alt="Automotive Engineering Lab" alt="Automotive Engineering Lab"
class="img-fluid rounded shadow-sm" class="img-fluid rounded shadow-sm"
@ -428,8 +391,7 @@ body{
decoding="async"> decoding="async">
</div> </div>
<!-- Content: Slides from Right --> <div class="col-lg-6">
<div class="col-lg-6 animate-on-scroll fade-left-init">
<h2 id="why-us-heading" class="fw-bold mb-4"> <h2 id="why-us-heading" class="fw-bold mb-4">
Why Choose Us? Why Choose Us?
</h2> </h2>
@ -458,7 +420,7 @@ body{
</section> </section>
{{-- ===================== CALL TO ACTION ===================== --}} {{-- ===================== CALL TO ACTION ===================== --}}
<section class="section py-5 animate-on-scroll zoom-in-init"> <section class="section py-5">
<div class="container text-center"> <div class="container text-center">
<h2 class="fw-bold mb-3"> <h2 class="fw-bold mb-3">
Join the Future of Automotive Engineering Join the Future of Automotive Engineering
@ -473,24 +435,4 @@ body{
</div> </div>
</section> </section>
<!-- බාහිර කිසිම script එකක් ඕනේ නැහැ, මේ සරල කෑල්ල කෙලින්ම වැඩ කරනවා -->
<script>
document.addEventListener('DOMContentLoaded', function () {
const animatedElements = document.querySelectorAll('.animate-on-scroll');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animated');
observer.unobserve(entry.target); // එක පාරක් වැඩ කළාම ඇති නිසා නැවත check කරන්නේ නැත
}
});
}, {
threshold: 0.15 // Section එකෙන් 15%ක් screen එකට ආපු ගමන් animate වේ
});
animatedElements.forEach(el => observer.observe(el));
});
</script>
@endsection @endsection