CoolFace
Apppublic

Qlaxcreatives/1688-proxy-paladin

sourceHugging Faceupdated 11mo agoView on Hugging Face
0likes
script.js96 linesDownload Raw Back to root
1 2// Shared functionality across pages3document.addEventListener('DOMContentLoaded', function() {4    // Smooth scrolling for anchor links5    document.querySelectorAll('a[href^="#"]').forEach(anchor => {6        anchor.addEventListener('click', function (e) {7            e.preventDefault();8            document.querySelector(this.getAttribute('href')).scrollIntoView({9                behavior: 'smooth'10            });11        });12    });13 14    // API demo interaction15    if (window.location.pathname === '/' || window.location.pathname === '/index.html') {16        setupAPIDemo();17    }18 19    // Dashboard functionality20    if (window.location.pathname === '/dashboard.html') {21        setupDashboard();22    }23});24 25// Free API demo26async function setupAPIDemo() {27    const demoForm = document.getElementById('demo-form');28    const demoResults = document.getElementById('demo-results');29    30    if (demoForm) {31        demoForm.addEventListener('submit', async (e) => {32            e.preventDefault();33            const keyword = document.getElementById('demo-keyword').value;34            35            try {36                const response = await fetch(`/api/search?keyword=${encodeURIComponent(keyword)}`);37                const data = await response.json();38                39                demoResults.innerHTML = `40                    <pre class="bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm"><code>${JSON.stringify(data, null, 2)}</code></pre>41                    <div class="mt-4 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">42                        ${data.products.map(product => `43                            <div class="bg-white p-4 rounded-lg shadow">44                                <img src="${product.image}" alt="${product.title}" class="w-full h-48 object-contain mb-2">45                                <h3 class="font-medium">${product.title}</h3>46                                <p class="text-gray-600">CNY ${product.price_cny.toFixed(2)}</p>47                                <p class="text-orange-600 font-bold">NGN ${product.price_ngn}</p>48                                <a href="${product.link}" target="_blank" class="text-sm text-blue-500 hover:underline">View on 1688</a>49                            </div>50                        `).join('')}51                    </div>52                `;53            } catch (error) {54                demoResults.innerHTML = '<p class="text-red-500">Failed to fetch products. Please try again.</p>';55            }56        });57    }58}59 60// Dashboard functionality61function setupDashboard() {62    // Generate a demo API key for users63    const apiKeyDisplay = document.getElementById('api-key-display');64    if (apiKeyDisplay) {65        apiKeyDisplay.textContent = 'demo_' + Math.random().toString(36).substring(2, 15);66    }67 68    // Copy API key button69    const copyBtn = document.querySelector('.copy-api-key');70    if (copyBtn) {71        copyBtn.addEventListener('click', () => {72            navigator.clipboard.writeText(apiKeyDisplay.textContent);73            copyBtn.innerHTML = '<i data-feather="check" class="w-4 h-4"></i>';74            setTimeout(() => {75                copyBtn.innerHTML = '<i data-feather="copy" class="w-4 h-4"></i>';76                feather.replace();77            }, 2000);78        });79    }80 81    // Example API request82    const demoRequest = document.getElementById('demo-request');83    if (demoRequest) {84        demoRequest.addEventListener('click', async () => {85            const responseEl = document.getElementById('demo-response');86            try {87                const response = await fetch('/api/search?keyword=shoes');88                const data = await response.json();89                responseEl.innerHTML = `<pre>${JSON.stringify(data, null, 2)}</pre>`;90            } catch (error) {91                responseEl.innerHTML = '<p class="text-red-500">Failed to fetch demo data</p>';92            }93        });94    }95}96