Enhanced PHP File Manager

⬆️ Go Up (..)

📊 Server Information

Server:

LiteSpeed

System:

Linux 5.14.0-611.26.1.el9_7.x86_64

PHP Version:

8.4.15

User:

u892747680

Directory:

/home/u892747680/domains/sisteminformasic.com/public_html/cvsuryaornamen/assets/js

Free Space:

9.97 TB

🔧 Quick Actions

✏️ Editing: frontend.js

/**
 * CV Surya Ornamen - Frontend JavaScript
 * Handles interactions, animations, and dynamic features
 */

document.addEventListener('DOMContentLoaded', function () {
    // Initialize AOS
    AOS.init({
        duration: 800,
        once: true,
        offset: 100
    });

// ===== Navbar Scroll Effect =====
    const navbar = document.getElementById('navbar');

// ===== Mobile Menu Toggle =====
    const navToggle = document.getElementById('navToggle');
    const navMenu = document.getElementById('navMenu');

if (navToggle) {
        navToggle.addEventListener('click', function () {
            navToggle.classList.toggle('active');
            navMenu.classList.toggle('active');
        });

// Close menu when clicking a link
        document.querySelectorAll('.nav-link').forEach(link => {
            link.addEventListener('click', function () {
                navToggle.classList.remove('active');
                navMenu.classList.remove('active');
            });
        });
    }

// ===== Active Nav Link on Scroll =====
    const sections = document.querySelectorAll('section[id]');
    const navLinks = document.querySelectorAll('.nav-link');

window.addEventListener('scroll', function () {
        let current = '';

sections.forEach(section => {
            const sectionTop = section.offsetTop - 150;
            const sectionHeight = section.offsetHeight;

if (window.scrollY >= sectionTop && window.scrollY < sectionTop + sectionHeight) {
                current = section.getAttribute('id');
            }
        });

navLinks.forEach(link => {
            link.classList.remove('active');
            if (link.getAttribute('href') === '#' + current) {
                link.classList.add('active');
            }
        });
    });

// ===== Product Filter =====
    const filterBtns = document.querySelectorAll('.filter-btn');
    const productCards = document.querySelectorAll('.product-card');

filterBtns.forEach(btn => {
        btn.addEventListener('click', function () {
            // Update active button
            filterBtns.forEach(b => b.classList.remove('active'));
            this.classList.add('active');

const filter = this.getAttribute('data-filter');

productCards.forEach(card => {
                const category = card.getAttribute('data-category');

if (filter === 'all' || category === filter) {
                    card.classList.remove('hidden');
                    card.style.display = 'block';
                } else {
                    card.classList.add('hidden');
                    card.style.display = 'none';
                }
            });
        });
    });

// ===== Product Search =====
    const searchInput = document.getElementById('productSearch');

if (searchInput) {
        searchInput.addEventListener('input', function () {
            const searchTerm = this.value.toLowerCase().trim();

productCards.forEach(card => {
                const title = card.querySelector('.product-title').textContent.toLowerCase();
                const desc = card.querySelector('.product-desc').textContent.toLowerCase();

if (title.includes(searchTerm) || desc.includes(searchTerm)) {
                    card.classList.remove('hidden');
                    card.style.display = 'block';
                } else {
                    card.classList.add('hidden');
                    card.style.display = 'none';
                }
            });

// Reset filter buttons when searching
            if (searchTerm) {
                filterBtns.forEach(btn => btn.classList.remove('active'));
            } else {
                filterBtns[0].classList.add('active');
            }
        });
    }

// ===== Testimonial Slider (Infinite Ping-Pong) =====
    const slider = document.getElementById('testimonialSlider');
    const track = slider ? slider.querySelector('.testimonial-track') : null;
    const cards = track ? track.querySelectorAll('.testimonial-card') : [];
    const prevBtn = document.getElementById('sliderPrev');
    const nextBtn = document.getElementById('sliderNext');
    const dotsContainer = document.getElementById('sliderDots');

if (track && cards.length > 0) {
        let currentIndex = 0;
        let direction = 1; // 1 = forward, -1 = backward
        let autoSlideInterval;
        const slideDelay = 4000; // 4 seconds per slide

function getCardsPerView() {
            if (window.innerWidth <= 768) return 1;
            if (window.innerWidth <= 1024) return 2;
            return 3;
        }

let cardsPerView = getCardsPerView();
        let maxIndex = Math.max(0, cards.length - cardsPerView);

function updateSlider() {
            const cardWidth = cards[0].offsetWidth + 30; // Include gap
            track.style.transition = 'transform 0.6s ease-in-out';
            track.style.transform = `translateX(-${currentIndex * cardWidth}px)`;
            updateDots();
        }

function updateDots() {
            const dots = dotsContainer.querySelectorAll('.slider-dot');
            const activeDotIndex = Math.floor(currentIndex / cardsPerView);
            dots.forEach((dot, i) => {
                dot.classList.toggle('active', i === activeDotIndex);
            });
        }

function slide() {
            // Ping-pong logic: reverse direction at edges
            if (currentIndex >= maxIndex) {
                direction = -1;
            } else if (currentIndex <= 0) {
                direction = 1;
            }

currentIndex += direction;
            updateSlider();
        }

function startAutoSlide() {
            stopAutoSlide();
            autoSlideInterval = setInterval(slide, slideDelay);
        }

function stopAutoSlide() {
            if (autoSlideInterval) {
                clearInterval(autoSlideInterval);
            }
        }

function resetAutoSlide() {
            stopAutoSlide();
            startAutoSlide();
        }

// Initialize
        createDots();
        startAutoSlide();

// Event listeners
        if (nextBtn) nextBtn.addEventListener('click', () => {
            nextSlide();
            resetAutoSlide();
        });

if (prevBtn) prevBtn.addEventListener('click', () => {
            prevSlide();
            resetAutoSlide();
        });

slider.addEventListener('mouseenter', stopAutoSlide);
        slider.addEventListener('mouseleave', startAutoSlide);

// Touch support for mobile
        let touchStartX = 0;
        let touchEndX = 0;

slider.addEventListener('touchstart', (e) => {
            touchStartX = e.changedTouches[0].screenX;
            stopAutoSlide();
        }, { passive: true });

slider.addEventListener('touchend', (e) => {
            touchEndX = e.changedTouches[0].screenX;
            if (touchStartX - touchEndX > 50) {
                nextSlide();
            } else if (touchEndX - touchStartX > 50) {
                prevSlide();
            }
            startAutoSlide();
        }, { passive: true });

// Handle resize
        window.addEventListener('resize', function () {
            cardsPerView = getCardsPerView();
            maxIndex = Math.max(0, cards.length - cardsPerView);
            if (currentIndex > maxIndex) currentIndex = maxIndex;
            createDots();
            updateSlider();
        });
    }

// ===== Back to Top Button =====
    const backToTop = document.getElementById('backToTop');

if (backToTop) {
        backToTop.addEventListener('click', function () {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
    }

// ===== Smooth Scroll for Anchor Links =====
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            const targetId = this.getAttribute('href');
            if (targetId === '#') return;

e.preventDefault();
            const targetElement = document.querySelector(targetId);

if (targetElement) {
                const offsetTop = targetElement.offsetTop - 80;
                window.scrollTo({
                    top: offsetTop,
                    behavior: 'smooth'
                });
            }
        });
    });

// ===== Lazy Loading Images =====
    const lazyImages = document.querySelectorAll('img[loading="lazy"]');

if ('IntersectionObserver' in window) {
        const imageObserver = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const img = entry.target;
                    img.src = img.src; // Trigger load
                    observer.unobserve(img);
                }
            });
        });

lazyImages.forEach(img => imageObserver.observe(img));
    }

// ===== Header Hide on Scroll Down, Show on Scroll Up =====
    let lastScrollY = 0;
    let ticking = false;

function handleScroll() {
        const currentScrollY = window.scrollY;

// Only hide/show after scrolled past hero
        if (currentScrollY > 500) {
            if (currentScrollY > lastScrollY) {
                // Scrolling down
                navbar.style.transform = 'translateY(-100%)';
            } else {
                // Scrolling up
                navbar.style.transform = 'translateY(0)';
            }
        } else {
            navbar.style.transform = 'translateY(0)';
        }

lastScrollY = currentScrollY;
    }

// ===== Counter Animation =====
    const counters = document.querySelectorAll('.stat-number');
    let countersAnimated = false;

function animateCounters() {
        counters.forEach(counter => {
            const target = parseInt(counter.textContent.replace(/\D/g, ''));
            let count = 0;
            const increment = target / 50;
            const suffix = counter.textContent.replace(/[0-9]/g, '');

updateCount();
        });
    }

// Animate counters when hero stats come into view
    const heroStats = document.querySelector('.hero-stats');
    if (heroStats) {
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting && !countersAnimated) {
                    countersAnimated = true;
                    animateCounters();
                }
            });
        }, { threshold: 0.5 });

observer.observe(heroStats);
    }

console.log('CV Surya Ornamen - Frontend loaded successfully');
});

❌ Cancel

🗂️ Enhanced PHP File Manager

📊 Server Information

🔧 Quick Actions

✏️ Editing: frontend.js

📤 Upload File

📁 Create Folder

📄 Create File

✏️ Rename Item

🗑️ Delete Confirmation