https://mobiletabletech.com/js/main.js

1// DOM Elements
2const mobileMenuToggle = document.querySelector('.mobile-menu-toggle');
3const navLinks = document.querySelector('.nav-links');
4const themeToggle = document.querySelector('.theme-toggle');
5const body = document.body;
6const logoImg = document.querySelector('.logo-img');
7
8document.addEventListener('DOMContentLoaded', function() {
9    // Dark mode toggle
10    const modeText = themeToggle.querySelector('.mode-text');
11    const modeIcon = themeToggle.querySelector('.mode-icon');
12    
13    function setDarkMode(isDark) {
14        document.body.classList.toggle('dark-mode', isDark);
15        modeText.textContent = isDark ? 'Light Mode' : 'Dark Mode';
16        modeIcon.className = isDark ? 'fas fa-sun mode-icon' : 'fas fa-moon mode-icon';
17        // Update logo based on dark mode
18        if (logoImg) {
19            const baseUrl = document.body.getAttribute('data-base-url') || '';
20            logoImg.src = isDark ? baseUrl + 'images/mtt_logo_dark.png' : baseUrl + 'images/mtt_logo.png';
21        }
22        localStorage.setItem('darkMode', isDark);
23    }
24
25    // Check for saved dark mode preference
26    const isDarkMode = localStorage.getItem('darkMode') === 'true';
27    setDarkMode(isDarkMode);
28
29    themeToggle.addEventListener('click', () => {
30        setDarkMode(!document.body.classList.contains('dark-mode'));
31    });
32
33    // Mobile menu toggle
34    mobileMenuToggle?.addEventListener('click', () => {
35        navLinks.classList.toggle('active');
36        mobileMenuToggle.classList.toggle('active');
37    });
38
39    // Support form handling
40    const supportForm = document.getElementById('supportForm');
41    const submitButton = document.getElementById('submitButton');
42
43    if (supportForm) {
44        supportForm.addEventListener('submit', function(e) {
45            e.preventDefault();
46
47            // Disable submit button
48            submitButton.disabled = true;
49            submitButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Sending...';
50
51            // Get form data
52            const formData = {
53                name: document.getElementById('name').value,
54                email: document.getElementById('email').value,
55                subject: document.getElementById('subject').value,
56                message: document.getElementById('message').value
57            };
58
59            // Send AJAX request
60            $.ajax({
61                url: baseUrl + 'includes/send-email.php',
62                type: 'POST',
63                data: formData,
64                success: function(response) {
65                    if (response.status === 'success') {
66                        alertify.success('Message sent successfully!');
67                        supportForm.reset();
68                    } else {
69                        alertify.error(response.message || 'Failed to send message.');
70                    }
71                },
72                error: function(xhr, status, error) {
73                    alertify.error('An error occurred. Please try again later.');
74                    console.error('Error:', error);
75                },
76                complete: function() {
77                    // Re-enable submit button
78                    submitButton.disabled = false;
79                    submitButton.innerHTML = 'Send Message';
80                }
81            });
82        });
83    }
84});
85
86// Close mobile menu when clicking outside
87document.addEventListener('click', (e) => {
88    if (!mobileMenuToggle.contains(e.target) && !navLinks.contains(e.target) && navLinks.classList.contains('active')) {
89        navLinks.classList.remove('active');
90        mobileMenuToggle.classList.remove('active');
91    }
92});
93
94// Smooth scroll for anchor links
95document.querySelectorAll('a[href^="#"]').forEach(anchor => {
96    anchor.addEventListener('click', function (e) {
97        e.preventDefault();
98        const target = document.querySelector(this.getAttribute('href'));
99        if (target) {
100            target.scrollIntoView({
101                behavior: 'smooth',
102                block: 'start'
103            });
104            // Close mobile menu if open
105            if (navLinks.classList.contains('active')) {
106                navLinks.classList.remove('active');
107                mobileMenuToggle.classList.remove('active');
108            }
109        }
110    });
111});
112
113// Add active class to current navigation link
114const currentPath = window.location.pathname.replace(/\/$/, ''); // Remove trailing slash
115const navLinksAnchors = document.querySelectorAll('.nav-links a');
116

117navLinksAnchors.forEach(link => {
118    const linkPath = link.getAttribute('href').replace(/\/$/, ''); // Remove trailing slash
119    if (linkPath === currentPath || 
120        (currentPath === '' && linkPath === '/')) {
121        link.classList.add('active');
122    }
123});
124
125// Configure Alertify defaults
126alertify.defaults.notifier.position = 'top-right';
127alertify.defaults.notifier.delay = 5;
128alertify.defaults.transition = "slide";
129alertify.defaults.theme.ok = "btn btn-primary";
130alertify.defaults.theme.cancel = "btn btn-danger";
131alertify.defaults.theme.input = "form-control";