From 288f7f67061097daa8b7953b7d33456b3002e54d Mon Sep 17 00:00:00 2001
From: 65160392 <65160392@go.buu.ac.th>
Date: Mon, 24 Mar 2025 14:08:32 +0000
Subject: [PATCH] Edit main.js
---
public/js/main.js | 124 ++++++++++++++++++++++++++++++++++++++--------
1 file changed, 102 insertions(+), 22 deletions(-)
diff --git a/public/js/main.js b/public/js/main.js
index 891c3d1..6b2c248 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -1,25 +1,105 @@
-// Project Management System JavaScript functions
-
-// Auto-dismiss alerts after 5 seconds
+// Add fade-in animation to elements
document.addEventListener('DOMContentLoaded', function() {
- // Auto-dismiss alerts
- setTimeout(function() {
- const alerts = document.querySelectorAll('.alert');
- alerts.forEach(function(alert) {
- const bsAlert = new bootstrap.Alert(alert);
- bsAlert.close();
+ // Add fade-in animation to cards
+ const cards = document.querySelectorAll('.card');
+ cards.forEach((card, index) => {
+ card.style.opacity = '0';
+ card.style.animation = `fadeIn 0.5s ease forwards ${index * 0.1}s`;
+ });
+
+ // Add hover effect to project cards
+ const projectCards = document.querySelectorAll('.project-card');
+ projectCards.forEach(card => {
+ card.addEventListener('mouseenter', function() {
+ this.style.transform = 'translateY(-5px)';
+ this.style.boxShadow = '0 8px 15px rgba(0,0,0,0.1)';
+ });
+
+ card.addEventListener('mouseleave', function() {
+ this.style.transform = 'translateY(0)';
+ this.style.boxShadow = '0 4px 6px rgba(0,0,0,0.1)';
+ });
+ });
+
+ // Add smooth scroll behavior
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
+ behavior: 'smooth'
+ });
+ });
+ });
+
+ // Add loading animation to buttons
+ const buttons = document.querySelectorAll('.btn');
+ buttons.forEach(button => {
+ button.addEventListener('click', function() {
+ this.style.transform = 'scale(0.95)';
+ setTimeout(() => {
+ this.style.transform = 'scale(1)';
+ }, 100);
+ });
+ });
+
+ // Add search bar animation
+ const searchBar = document.querySelector('.search-bar');
+ if (searchBar) {
+ searchBar.addEventListener('focus', function() {
+ this.style.transform = 'translateY(-2px)';
+ this.style.boxShadow = '0 8px 15px rgba(0,0,0,0.1)';
+ });
+
+ searchBar.addEventListener('blur', function() {
+ this.style.transform = 'translateY(0)';
+ this.style.boxShadow = '0 4px 6px rgba(0,0,0,0.1)';
+ });
+ }
+
+ // Add table row hover effect
+ const tableRows = document.querySelectorAll('.table-hover tbody tr');
+ tableRows.forEach(row => {
+ row.addEventListener('mouseenter', function() {
+ this.style.backgroundColor = 'rgba(92, 107, 192, 0.05)';
+ this.style.transition = 'all 0.3s ease';
+ });
+
+ row.addEventListener('mouseleave', function() {
+ this.style.backgroundColor = '';
+ });
+ });
+
+ // Add task item animation
+ const taskItems = document.querySelectorAll('.task-item');
+ taskItems.forEach(item => {
+ item.addEventListener('mouseenter', function() {
+ this.style.transform = 'translateX(5px)';
+ this.style.boxShadow = '0 8px 15px rgba(0,0,0,0.1)';
+ });
+
+ item.addEventListener('mouseleave', function() {
+ this.style.transform = 'translateX(0)';
+ this.style.boxShadow = '0 4px 6px rgba(0,0,0,0.1)';
+ });
+ });
+
+ // Add stat card counter animation
+ const statValues = document.querySelectorAll('.stat-value');
+ statValues.forEach(value => {
+ const target = parseInt(value.textContent);
+ let current = 0;
+ const increment = target / 50;
+ const duration = 1000;
+ const step = duration / 50;
+
+ const counter = setInterval(() => {
+ current += increment;
+ if (current >= target) {
+ value.textContent = target;
+ clearInterval(counter);
+ } else {
+ value.textContent = Math.round(current);
+ }
+ }, step);
});
- }, 5000);
-
- // Enable tooltips
- const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
- tooltipTriggerList.map(function (tooltipTriggerEl) {
- return new bootstrap.Tooltip(tooltipTriggerEl);
- });
-
- // Enable popovers
- const popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
- popoverTriggerList.map(function (popoverTriggerEl) {
- return new bootstrap.Popover(popoverTriggerEl);
- });
});
\ No newline at end of file
--
GitLab