// Mobile Menu Toggle const mobileMenuBtn = document.getElementById('mobile-menu-btn'); const mobileMenu = document.getElementById('mobile-menu'); const navbar = document.getElementById('navbar'); mobileMenuBtn.addEventListener('click', () => { mobileMenu.classList.toggle('hidden'); }); // Close mobile menu when clicking on a link mobileMenu.querySelectorAll('a').forEach(link => { link.addEventListener('click', () => { mobileMenu.classList.add('hidden'); }); }); // Navbar scroll effect window.addEventListener('scroll', () => { if (window.scrollY > 50) { navbar.classList.add('nav-scrolled'); } else { navbar.classList.remove('nav-scrolled'); } }); // Counter Animation const counters = document.querySelectorAll('.counter'); const speed = 200; const animateCounter = (counter) => { const target = parseFloat(counter.getAttribute('data-target')); const suffix = counter.getAttribute('data-suffix') || ''; const prefix = counter.getAttribute('data-prefix') || ''; const count = parseFloat(counter.innerText.replace(/[^0-9.]/g, '')) || 0; const inc = target / speed; if (count < target) { const newValue = Math.ceil((count + inc) * 10) / 10; counter.innerText = prefix + newValue.toLocaleString() + suffix; setTimeout(() => animateCounter(counter), 20); } else { counter.innerText = prefix + target.toLocaleString() + suffix; } }; // Intersection Observer for counters const observerOptions = { threshold: 0.5 }; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const counter = entry.target; animateCounter(counter); observer.unobserve(counter); } }); }, observerOptions); counters.forEach(counter => observer.observe(counter)); // Feature Card Toggle function toggleFeature(card) { const details = card.querySelector('.feature-details'); const chevron = card.querySelector('[data-lucide="chevron-down"]'); // Close all other cards document.querySelectorAll('.feature-card').forEach(otherCard => { if (otherCard !== card) { const otherDetails = otherCard.querySelector('.feature-details'); const otherChevron = otherCard.querySelector('[data-lucide="chevron-down"]'); if (otherDetails && !otherDetails.classList.contains('hidden')) { otherDetails.classList.add('hidden'); otherChevron.style.transform = 'rotate(0deg)'; } } }); // Toggle current card if (details.classList.contains('hidden')) { details.classList.remove('hidden'); chevron.style.transform = 'rotate(180deg)'; } else { details.classList.add('hidden'); chevron.style.transform = 'rotate(0deg)'; } } // Signup Form Handler function handleSignup(event) { event.preventDefault(); const email = document.getElementById('email').value; const successMessage = document.getElementById('success-message'); const form = event.target; // Simulate API call const button = form.querySelector('button'); const originalText = button.innerText; button.innerText = 'Joining...'; button.disabled = true; setTimeout(() => { form.style.display = 'none'; successMessage.classList.remove('hidden'); // Re-initialize icons for the success message if (typeof lucide !== 'undefined') { lucide.createIcons(); } }, 1500); } // Smooth scroll for anchor links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { const offsetTop = target.offsetTop - 80; // Account for fixed header window.scrollTo({ top: offsetTop, behavior: 'smooth' }); } }); }); // Add scroll reveal animations const revealElements = document.querySelectorAll('.problem-card, .feature-card, .team-card'); const revealObserver = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.style.opacity = '1'; entry.target.style.transform = 'translateY(0)'; revealObserver.unobserve(entry.target); } }); }, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }); revealElements.forEach(el => { el.style.opacity = '0'; el.style.transform = 'translateY(20px)'; el.style.transition = 'opacity 0.6s ease, transform 0.6s ease'; revealObserver.observe(el); }); // Initialize Lucide icons after DOM load document.addEventListener('DOMContentLoaded', () => { if (typeof lucide !== 'undefined') { lucide.createIcons(); } // Initialize search functionality initSearch(); }); // Search functionality function initSearch() { const searchInput = document.getElementById('searchInput'); const searchResults = document.getElementById('searchResults'); if (!searchInput || !searchResults) return; let searchTimeout; let articlesCache = []; // Fetch articles from Storagely API async function fetchArticles() { try { // Fetch from Storagely GitBook API const response = await fetch('https://docs.storagely.io/api/articles'); if (!response.ok) throw new Error('Failed to fetch articles'); const data = await response.json(); articlesCache = data.articles || []; } catch (error) { console.log('API fetch failed, using fallback data'); // Fallback: scrape-able structure from the docs page articlesCache = getFallbackArticles(); } } // Fallback articles based on Storagely docs structure function getFallbackArticles() { return [ { title: 'Storagely Website Editor', url: 'https://docs.storagely.io/storagely-product/storagely-website-editor', category: 'Website Editor' }, { title: 'How to Edit Your Website', url: 'https://docs.storagely.io/storagely-product/storagely-website-editor/how-to-edit-your-website', category: 'Website Editor' }, { title: 'Website Editor Overview', url: 'https://docs.storagely.io/storagely-product/storagely-website-editor/website-editor-overview', category: 'Website Editor' }, { title: 'How-To Guides', url: 'https://docs.storagely.io/storagely-product/how-to-guides', category: 'How-To Guides' }, { title: 'Add a New Unit Type', url: 'https://docs.storagely.io/storagely-product/how-to-guides/add-a-new-unit-type', category: 'How-To Guides' }, { title: 'Add a Promotion', url: 'https://docs.storagely.io/storagely-product/how-to-guides/add-a-promotion', category: 'How-To Guides' }, { title: 'Add a User', url: 'https://docs.storagely.io/storagely-product/how-to-guides/add-a-user', category: 'How-To Guides' }, { title: 'Add a Location', url: 'https://docs.storagely.io/storagely-product/how-to-guides/add-a-location', category: 'How-To Guides' }, { title: 'Customer Onboarding', url: 'https://docs.storagely.io/customer-onboarding', category: 'Getting Started' }, { title: 'Getting Started Guide', url: 'https://docs.storagely.io/customer-onboarding/getting-started-guide', category: 'Getting Started' }, { title: 'Platform Overview', url: 'https://docs.storagely.io/customer-onboarding/platform-overview', category: 'Getting Started' }, { title: 'Setup Checklist', url: 'https://docs.storagely.io/customer-onboarding/setup-checklist', category: 'Getting Started' }, { title: 'Integrations', url: 'https://docs.storagely.io/integrations', category: 'Integrations' }, { title: 'API Documentation', url: 'https://docs.storagely.io/api-documentation', category: 'API' }, { title: 'Troubleshooting', url: 'https://docs.storagely.io/troubleshooting', category: 'Support' } ]; } // Perform search function performSearch(query) { if (!query.trim()) { searchResults.classList.add('hidden'); return; } const lowerQuery = query.toLowerCase(); const filtered = articlesCache.filter(article => article.title.toLowerCase().includes(lowerQuery) || (article.category && article.category.toLowerCase().includes(lowerQuery)) ); displayResults(filtered); } // Display search results function displayResults(results) { if (results.length === 0) { searchResults.innerHTML = `

No articles found

`; searchResults.classList.remove('hidden'); lucide.createIcons(); return; } const html = results.map(article => `

${escapeHtml(article.title)}

${article.category ? `${escapeHtml(article.category)}` : ''}

`).join(''); searchResults.innerHTML = html; searchResults.classList.remove('hidden'); lucide.createIcons(); } // Escape HTML to prevent XSS function escapeHtml(text) { const div = document.createElement('div'); div.textContent = text; return div.innerHTML; } // Event listeners searchInput.addEventListener('input', (e) => { clearTimeout(searchTimeout); searchTimeout = setTimeout(() => performSearch(e.target.value), 300); }); searchInput.addEventListener('focus', () => { if (searchInput.value.trim()) { searchResults.classList.remove('hidden'); } }); // Close search results when clicking outside document.addEventListener('click', (e) => { if (!searchInput.contains(e.target) && !searchResults.contains(e.target)) { searchResults.classList.add('hidden'); } }); // Load articles on init fetchArticles(); }

📽️ The Storagely Rental System - Features, Tools, and Navigation