Dashboard Temp Share Shortlinks Frames API

HTMLify

script.js
Views: 27 | Author: karbonsites
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
document.addEventListener('DOMContentLoaded', () => {
    // --- 1. Mobile Menu Toggle ---
    const menuToggle = document.querySelector('.menu-toggle');
    const nav = document.querySelector('.nav');

    if (menuToggle && nav) {
        menuToggle.addEventListener('click', () => {
            nav.classList.toggle('open');
        });
    }

    // --- 2. Scroll Animations Observer ---
    const observerOptions = {
        root: null,
        rootMargin: '0px',
        threshold: 0.1
    };

    const scrollObserver = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translateY(0)';
                
                // Handle specific classes if needed
                if (entry.target.classList.contains('fade-in-scroll')) {
                    // Apply transition delay if necessary, though CSS handles most
                }

                observer.unobserve(entry.target);
            }
        });
    }, observerOptions);

    // Apply to elements marked for scroll animation
    document.querySelectorAll('.fade-in-scroll, .fade-in').forEach(el => {
        scrollObserver.observe(el);
    });

    // Manually trigger initial visibility for hero elements (which use opacity/transform directly)
    document.querySelectorAll('.fade-in-up').forEach(el => {
        el.style.opacity = '1';
        el.style.transform = 'translateY(0)';
    });
    document.querySelectorAll('.fade-in').forEach(el => {
        el.style.opacity = '1';
    });

    // --- 3. FAQ Accordion Logic ---
    document.querySelectorAll('.faq-item .faq-question').forEach(button => {
        button.addEventListener('click', () => {
            const parent = button.closest('.faq-item');
            const answer = parent.querySelector('.faq-answer');

            parent.classList.toggle('active');

            if (parent.classList.contains('active')) {
                answer.style.maxHeight = answer.scrollHeight + 'px';
                answer.style.padding = '15px 20px 20px 20px';
            } else {
                answer.style.maxHeight = '0';
                answer.style.padding = '0 20px 0 20px';
            }
        });
    });

    // --- 4. Form Submission Mock (For Contact Page) ---
    const contactForm = document.getElementById('inquiryForm');
    const formMessage = document.getElementById('formMessage');

    if (contactForm) {
        contactForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Simulate API call delay
            formMessage.textContent = 'Sending inquiry...';
            formMessage.style.color = 'var(--color-primary)';

            setTimeout(() => {
                formMessage.textContent = 'Thank you! Your request has been received. We will be in touch shortly.';
                formMessage.style.color = 'var(--color-success)';
                contactForm.reset();
            }, 1500);
        });
    }
});