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

Compare commits

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

2 Commits
3350b90866 ... 05ba79ba03

Author SHA1 Message Date
imadhigp 05ba79ba03 fixhome 2026-07-10 08:53:11 +05:30
imadhigp 33ce7a4ca4 7/9 push home 2026-07-09 22:21:20 +05:30
6 changed files with 584 additions and 235 deletions
Show Stats Expand all files Collapse all files

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

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

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

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

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

@ -14,6 +14,10 @@
--success-green: #1f8a4c; --success-green: #1f8a4c;
} }
body {
font-family: Arial, Helvetica, sans-serif;
}
.hero { .hero {
background-image: linear-gradient(rgba(109, 105, 105, 0.65), rgb(64, 59, 66)), background-image: linear-gradient(rgba(109, 105, 105, 0.65), rgb(64, 59, 66)),
url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=1600&q=80'); url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=1600&q=80');
@ -217,12 +221,6 @@
text-align: left; text-align: left;
} }
.feature-box:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
border-color: var(--primary);
}
.feature-icon-wrapper { .feature-icon-wrapper {
width: 50px; width: 50px;
height: 50px; height: 50px;
@ -234,6 +232,23 @@
justify-content: center; justify-content: center;
font-size: 22px; font-size: 22px;
margin-bottom: 20px; margin-bottom: 20px;
transition: transform 0.5s ease; /* 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 {
@ -256,11 +271,29 @@
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
@ -277,6 +310,7 @@
</button> </button>
</div> </div>
</div> </div>
</div>
</section> </section>
@php @php
@ -358,8 +392,8 @@ $courses=[
</div> </div>
<div class="row g-4" id="courseContainer"> <div class="row g-4" id="courseContainer">
@foreach($courses as $course) @foreach($courses as $index => $course)
<div class="col-12 course-item"> <div class="col-12 course-item animate-on-scroll fade-up-init" style="transition-delay: {{ $index * 100 }}ms;">
<div class="card course-card h-100"> <div class="card course-card h-100">
<div class="row g-0 align-items-center"> <div class="row g-0 align-items-center">
@ -404,10 +438,10 @@ $courses=[
</div> </div>
</section> </section>
{{-- Modernized Why Study With Us Section --}} {{-- Why Study With Us Section --}}
<section class="pb-5"> <section class="pb-5">
<div class="container"> <div class="container">
<div class="features-section text-center"> <div class="features-section text-center animate-on-scroll fade-up-init">
<h2>Why Study With Us?</h2> <h2>Why Study With Us?</h2>
<div class="row g-4"> <div class="row g-4">
@ -457,6 +491,8 @@ $courses=[
</section> </section>
<script> <script>
document.addEventListener('DOMContentLoaded', function () {
// === 1. Course Search Feature ===
document.getElementById('courseSearch').addEventListener('keyup', function() { 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');
@ -469,6 +505,7 @@ document.getElementById('courseSearch').addEventListener('keyup', 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');
} }
@ -481,6 +518,23 @@ document.getElementById('courseSearch').addEventListener('keyup', function() {
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>
@endsection @endsection

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">

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

@ -11,6 +11,10 @@
--light:#f8f4f7; --light:#f8f4f7;
} }
body {
font-family: Arial, Helvetica, sans-serif;
}
.hero{ .hero{
background:linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.65)), background:linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.65)),
url('https://images.pexels.com/photos/3802510/pexels-photo-3802510.jpeg'); url('https://images.pexels.com/photos/3802510/pexels-photo-3802510.jpeg');
@ -24,12 +28,15 @@
.portal-card{ .portal-card{
border:none; border:none;
border-radius:15px; border-radius:15px;
transition:.3s; transition:.4s cubic-bezier(0.165, 0.84, 0.44, 1);
box-shadow:0 5px 20px rgba(0,0,0,.08); box-shadow:0 5px 20px rgba(0,0,0,.08);
border: 1px solid #efeff4;
} }
.portal-card:hover{ .portal-card:hover{
transform:translateY(-8px); transform:translateY(-8px);
border-color: var(--primary);
box-shadow: 0 15px 30px rgba(94, 36, 78, 0.1);
} }
.portal-icon{ .portal-icon{
@ -43,28 +50,46 @@
justify-content:center; justify-content:center;
font-size:28px; font-size:28px;
margin:auto; margin:auto;
transition: 0.4s ease;
}
.portal-card:hover .portal-icon {
background: var(--secondary);
transform: scale(1.1);
} }
.btn-portal{ .btn-portal{
background:#5E244E; background:#5E244E;
color:#fff; color:#fff;
padding:10px 30px; padding:12px 35px;
border: none; border: none;
transition: 0.2s ease; border-radius: 8px;
font-weight: 600;
transition: all 0.3s ease;
} }
.btn-portal:hover{ .btn-portal:hover{
background:#8B3A74; background:#8B3A74;
color:#fff; color:#fff;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(94, 36, 78, 0.3);
} }
.modal-content { .modal-content {
border: none; border: none;
border-radius: 16px; border-radius: 16px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
} }
/* Modal එක 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;
@ -81,7 +106,6 @@
padding: 10px 25px 20px; padding: 10px 25px 20px;
} }
.input-group-text { .input-group-text {
background-color: #f8fafc; background-color: #f8fafc;
border-color: #cbd5e1; border-color: #cbd5e1;
@ -111,7 +135,6 @@
outline: 0; outline: 0;
} }
.input-group:focus-within .input-group-text { .input-group:focus-within .input-group-text {
border-color: var(--secondary); border-color: var(--secondary);
color: var(--secondary); color: var(--secondary);
@ -123,7 +146,6 @@
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;
@ -132,6 +154,7 @@
padding: 10px 0; padding: 10px 0;
transition: all 0.2s; transition: all 0.2s;
width: 100%; width: 100%;
border-radius: 8px;
} }
.btn-modal-cancel:hover { .btn-modal-cancel:hover {
@ -149,6 +172,7 @@
box-shadow: 0 4px 12px rgba(94, 36, 78, 0.2); box-shadow: 0 4px 12px rgba(94, 36, 78, 0.2);
transition: all 0.2s; transition: all 0.2s;
width: 100%; width: 100%;
border-radius: 8px;
} }
.btn-modal-login:hover { .btn-modal-login:hover {
@ -157,39 +181,69 @@
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: 0 6px 15px rgba(94, 36, 78, 0.3); box-shadow: 0 6px 15px rgba(94, 36, 78, 0.3);
} }
/* ========================================================
Custom CSS Scroll Animations
======================================================== */
.animate-item {
opacity: 0;
will-change: transform, opacity;
transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.fade-up-init {
transform: translateY(30px);
}
.fade-in-init {
transform: scale(0.98);
}
.slide-right-init {
transform: translateX(30px);
}
.animate-item.animated {
opacity: 1;
transform: translate(0) scale(1);
}
</style> </style>
<section class="hero"> <section class="hero">
<div class="container"> <div class="container">
<h1 class="fw-bold">Student Portal</h1> <div class="animate-item animated fade-up-init">
<p class="mt-3"> <h1 class="fw-bold display-5">Student Portal</h1>
<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-3"> <button onclick="studentlogin()" class="btn btn-portal mt-4 shadow">
Student Login Student Login
</button> </button>
</div> </div>
</div>
</section> </section>
<section class="py-5"> <!-- SERVICES SECTION -->
<section class="py-5 overflow-hidden">
<div class="container"> <div class="container">
<div class="text-center mb-5"> <div class="text-center mb-5 animate-item fade-up-init">
<h2>Student Services</h2> <h2 class="fw-bold">Student Services</h2>
<p class="text-muted"> <p class="text-muted">
Everything you need during your academic journey. Everything you need during your academic journey.
</p> </p>
</div> </div>
<div class="row g-4"> <!-- සේවා කාඩ් සියල්ල එකපාර ලස්සනට Fade-in වේ -->
<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">My Courses</h4> <h4 class="mt-4 fw-bold">My Courses</h4>
<p class="text-muted">View enrolled courses and learning materials.</p> <p class="text-muted mb-0">View enrolled courses and learning materials.</p>
</div> </div>
</div> </div>
@ -198,8 +252,8 @@
<div class="portal-icon"> <div class="portal-icon">
<i class="fa-solid fa-calendar-days"></i> <i class="fa-solid fa-calendar-days"></i>
</div> </div>
<h4 class="mt-4">Class Timetable</h4> <h4 class="mt-4 fw-bold">Class Timetable</h4>
<p class="text-muted">Check your weekly lecture schedule.</p> <p class="text-muted mb-0">Check your weekly lecture schedule.</p>
</div> </div>
</div> </div>
@ -208,8 +262,8 @@
<div class="portal-icon"> <div class="portal-icon">
<i class="fa-solid fa-file-lines"></i> <i class="fa-solid fa-file-lines"></i>
</div> </div>
<h4 class="mt-4">Assignments</h4> <h4 class="mt-4 fw-bold">Assignments</h4>
<p class="text-muted">Submit assignments and download resources.</p> <p class="text-muted mb-0">Submit assignments and download resources.</p>
</div> </div>
</div> </div>
@ -218,8 +272,8 @@
<div class="portal-icon"> <div class="portal-icon">
<i class="fa-solid fa-square-poll-vertical"></i> <i class="fa-solid fa-square-poll-vertical"></i>
</div> </div>
<h4 class="mt-4">Exam Results</h4> <h4 class="mt-4 fw-bold">Exam Results</h4>
<p class="text-muted">View semester and final examination results.</p> <p class="text-muted mb-0">View semester and final examination results.</p>
</div> </div>
</div> </div>
@ -228,8 +282,8 @@
<div class="portal-icon"> <div class="portal-icon">
<i class="fa-solid fa-credit-card"></i> <i class="fa-solid fa-credit-card"></i>
</div> </div>
<h4 class="mt-4">Fee Payments</h4> <h4 class="mt-4 fw-bold">Fee Payments</h4>
<p class="text-muted">Pay course fees and download payment receipts.</p> <p class="text-muted mb-0">Pay course fees and download payment receipts.</p>
</div> </div>
</div> </div>
@ -238,47 +292,51 @@
<div class="portal-icon"> <div class="portal-icon">
<i class="fa-solid fa-user"></i> <i class="fa-solid fa-user"></i>
</div> </div>
<h4 class="mt-4">Student Profile</h4> <h4 class="mt-4 fw-bold">Student Profile</h4>
<p class="text-muted">Update your personal information securely.</p> <p class="text-muted mb-0">Update your personal information securely.</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<section class="py-5 bg-light"> <!-- QUICK LINKS -->
<section class="py-5 bg-light overflow-hidden">
<div class="container"> <div class="container">
<div class="text-center mb-5"> <div class="text-center mb-5 animate-item fade-up-init">
<h2>Quick Links</h2> <h2 class="fw-bold">Quick Links</h2>
</div> </div>
<div class="row text-center"> <!-- දකුණේ සිට වමට Slide වේ -->
<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">Academic Calendar</a> <a href="#" class="btn btn-outline-dark w-100 py-2 fw-semibold rounded-pill">Academic Calendar</a>
</div> </div>
<div class="col-md-3 mb-3"> <div class="col-md-3 mb-3">
<a href="#" class="btn btn-outline-dark w-100">Student Handbook</a> <a href="#" class="btn btn-outline-dark w-100 py-2 fw-semibold rounded-pill">Student Handbook</a>
</div> </div>
<div class="col-md-3 mb-3"> <div class="col-md-3 mb-3">
<a href="#" class="btn btn-outline-dark w-100">Examination Notices</a> <a href="#" class="btn btn-outline-dark w-100 py-2 fw-semibold rounded-pill">Examination Notices</a>
</div> </div>
<div class="col-md-3 mb-3"> <div class="col-md-3 mb-3">
<a href="#" class="btn btn-outline-dark w-100">Contact Support</a> <a href="#" class="btn btn-outline-dark w-100 py-2 fw-semibold rounded-pill">Contact Support</a>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<section class="py-5"> <!-- BOTTOM CTA -->
<div class="container text-center"> <section class="py-5 bg-white">
<h2>Ready to Access Your Student Account?</h2> <div class="container text-center animate-item fade-up-init">
<p class="text-muted">Log in to manage your academic activities and stay updated.</p> <h2 class="fw-bold">Ready to Access Your Student Account?</h2>
<button onclick="studentlogin()" class="btn btn-portal mt-3"> <p class="text-muted fs-5">Log in to manage your academic activities and stay updated.</p>
<button onclick="studentlogin()" class="btn btn-portal mt-3 shadow">
Student Login Student Login
</button> </button>
</div> </div>
</section> </section>
<!-- LOGIN MODAL -->
<div class="modal fade" id="studentLoginModal" tabindex="-1" aria-labelledby="studentLoginModalLabel" aria-hidden="true"> <div class="modal fade" id="studentLoginModal" tabindex="-1" aria-labelledby="studentLoginModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered"> <div class="modal-dialog modal-dialog-centered">
<div class="modal-content"> <div class="modal-content">
@ -289,7 +347,6 @@
</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
@ -333,6 +390,23 @@ 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; /* Left alignment for Udemy Style */ text-align: left;
} }
.course-title { .course-title {
@ -245,6 +245,7 @@ body{
/* ===== Why Choose Us ===== */ /* ===== Why Choose Us ===== */
.why-section { .why-section {
background: #F8F4F7; background: #F8F4F7;
overflow-x: hidden;
} }
.why-section li { .why-section li {
@ -256,12 +257,46 @@ 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">
<div class="hero-content text-center"> <!-- Hero එක load වෙද්දිම animate වෙන්න කෙලින්ම animated දැම්මා -->
<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>
@ -290,7 +325,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"> <div class="text-center mb-5 animate-on-scroll fade-up-init">
<h2 id="courses-heading">Our Courses</h2> <h2 id="courses-heading">Our Courses</h2>
<p class="text-muted"> <p class="text-muted">
Explore our professional automotive engineering courses. Explore our professional automotive engineering courses.
@ -330,8 +365,9 @@ body{
@endphp @endphp
<div class="row g-4 mb-5"> <div class="row g-4 mb-5">
@foreach($courses as $course) @foreach($courses as $index => $course)
<div class="col-lg-4 col-md-6"> <!-- Cards ටික එකින් එක delay වෙන්න inline style එකක් දැම්මා -->
<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">
@ -367,7 +403,7 @@ body{
@endforeach @endforeach
</div> </div>
<div class="text-center"> <div class="text-center animate-on-scroll fade-up-init">
<a href="/courses" class="btn btn-theme" style="border-radius: 40px;"> <a href="/courses" class="btn btn-theme" style="border-radius: 40px;">
View All Courses <i class="fa-solid fa-arrow-right ms-2"></i> View All Courses <i class="fa-solid fa-arrow-right ms-2"></i>
</a> </a>
@ -381,7 +417,8 @@ body{
<div class="container"> <div class="container">
<div class="row align-items-center g-5"> <div class="row align-items-center g-5">
<div class="col-lg-6"> <!-- Image: Slides from Left -->
<div class="col-lg-6 animate-on-scroll fade-right-init">
<img src="https://images.unsplash.com/photo-1487754180451-c456f719a1fc?auto=format&fit=crop&w=900&q=80" <img src="https://images.unsplash.com/photo-1487754180451-c456f719a1fc?auto=format&fit=crop&w=900&q=80"
alt="Automotive Engineering Lab" alt="Automotive Engineering Lab"
class="img-fluid rounded shadow-sm" class="img-fluid rounded shadow-sm"
@ -391,7 +428,8 @@ body{
decoding="async"> decoding="async">
</div> </div>
<div class="col-lg-6"> <!-- Content: Slides from Right -->
<div class="col-lg-6 animate-on-scroll fade-left-init">
<h2 id="why-us-heading" class="fw-bold mb-4"> <h2 id="why-us-heading" class="fw-bold mb-4">
Why Choose Us? Why Choose Us?
</h2> </h2>
@ -420,7 +458,7 @@ body{
</section> </section>
{{-- ===================== CALL TO ACTION ===================== --}} {{-- ===================== CALL TO ACTION ===================== --}}
<section class="section py-5"> <section class="section py-5 animate-on-scroll zoom-in-init">
<div class="container text-center"> <div class="container text-center">
<h2 class="fw-bold mb-3"> <h2 class="fw-bold mb-3">
Join the Future of Automotive Engineering Join the Future of Automotive Engineering
@ -435,4 +473,24 @@ 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