Sub4Sub Exchange

Traffic Exchange System

TrafficExchange

Credits: 0

Contents

1 Submit Website
2 Your Websites
3 Surf Websites & Earn Credits
4 Website Preview

Submit Website

Your Websites

Surf Websites & Earn Credits

Click “Start Surfing” to begin viewing websites and earn credits!

Website Preview

You haven\'t added any websites yet.

'; return; } userSites.forEach(site => { const siteItem = document.createElement('li'); siteItem.className = 'site-item'; siteItem.innerHTML = `

${getInitials(site.title)}

${site.title}

${site.url}

Views: ${site.views}

Credits: ${site.credits}

`; userSitesList.appendChild(siteItem); }); } // Get initials from site title function getInitials(title) { return title.split(' ').map(word => word[0]).join('').toUpperCase().substring(0, 2); } // Render preview cards function renderPreviewCards() { previewContainer.innerHTML = ''; if (allSites.length === 0) { previewContainer.innerHTML = '

No websites available for preview.

'; return; } allSites.forEach(site => { const previewCard = document.createElement('div'); previewCard.className = 'preview-card'; previewCard.innerHTML = `

${getInitials(site.title)}

${site.title}

${site.url}

${site.description}

Views: ${site.views}

Category: ${site.category}

`; previewContainer.appendChild(previewCard); }); } // Preview a specific site function previewSite(siteId) { const site = allSites.find(s => s.id === siteId); if (site) { alert(`Previewing: ${site.title}\nURL: ${site.url}\nDescription: ${site.description}`); } } // Delete a site function deleteSite(siteId) { if (confirm('Are you sure you want to delete this website?')) { allSites = allSites.filter(site => site.id !== siteId); db.saveSites(allSites); renderUserSites(); renderPreviewCards(); showAlert('Website deleted successfully!', 'success'); } } // Show alert message function showAlert(message, type) { // Remove any existing alerts const existingAlert = document.querySelector('.alert'); if (existingAlert) { existingAlert.remove(); } const alert = document.createElement('div'); alert.className = `alert alert-${type}`; alert.textContent = message; document.querySelector('main').insertBefore(alert, document.querySelector('.dashboard')); // Auto remove after 5 seconds setTimeout(() => { if (alert.parentElement) { alert.remove(); } }, 5000); } // Start surfing websites function startSurfing() { if (allSites.length === 0) { showAlert('No websites available to surf!', 'warning'); return; } // Filter sites that are not owned by the current user const availableSites = allSites.filter(site => site.owner !== 'user'); if (availableSites.length === 0) { showAlert('No external websites available to surf! Add more websites to the system.', 'warning'); return; } // Select a random site const randomIndex = Math.floor(Math.random() * availableSites.length); currentSurfingSite = availableSites[randomIndex]; // Set timer (30 seconds for demonstration) timeRemaining = 30; // Update surf container UI surfContainer.innerHTML = `

Currently Viewing: ${currentSurfingSite.title}

${timeRemaining}

Preview: ${currentSurfingSite.title}

${currentSurfingSite.description}

URL: ${currentSurfingSite.url}

Please wait ${timeRemaining} seconds to earn credits...

`; // Start countdown surfTimer = setInterval(() => { timeRemaining--; document.querySelector('.timer-display').textContent = timeRemaining; if (timeRemaining <= 0) { finishSurfing(); } }, 1000); // Add event listener to stop button document.getElementById('stop-surfing').addEventListener('click', stopSurfing); } // Stop surfing manually function stopSurfing() { clearInterval(surfTimer); resetSurfContainer(); showAlert('Surfing stopped. No credits earned.', 'warning'); } // Finish surfing and award credits function finishSurfing() { clearInterval(surfTimer); // Update site views const siteIndex = allSites.findIndex(site => site.id === currentSurfingSite.id); if (siteIndex !== -1) { allSites[siteIndex].views += 1; allSites[siteIndex].credits += 1; } // Award credits to user (1:1 ratio) userCredits += 1; // Save to database db.saveSites(allSites); db.saveUserCredits(userCredits); // Update UI updateCreditDisplay(); renderPreviewCards(); // Show success message resetSurfContainer(); showAlert(`You earned 1 credit for viewing ${currentSurfingSite.title}!`, 'success'); // Reset current site currentSurfingSite = null; } // Reset surf container to initial state function resetSurfContainer() { surfContainer.innerHTML = `

Click "Start Surfing" to begin viewing websites and earn credits!

`; // Reattach event listener document.getElementById('start-surfing').addEventListener('click', startSurfing); } // Add a new website function addWebsite(url, title, description, category, owner = 'user') { // Validate URL try { new URL(url); } catch (e) { showAlert('Please enter a valid URL!', 'danger'); return false; } // Check if URL already exists if (allSites.some(site => site.url === url)) { showAlert('This website URL is already in the system!', 'danger'); return false; } // Create new site object const newSite = { id: generateId(), url, title, description, category, views: 0, credits: 0, owner }; // Add to sites array allSites.push(newSite); // Save to database db.saveSites(allSites); // Update UI renderUserSites(); renderPreviewCards(); return true; } // Event Listeners document.addEventListener('DOMContentLoaded', init); // Start surfing button startSurfingBtn.addEventListener('click', startSurfing); // Add site button (opens modal) addSiteBtn.addEventListener('click', () => { addSiteModal.style.display = 'flex'; }); // Close modal button closeModalBtn.addEventListener('click', () => { addSiteModal.style.display = 'none'; }); // Close modal when clicking outside window.addEventListener('click', (e) => { if (e.target === addSiteModal) { addSiteModal.style.display = 'none'; } }); // Site form submission (in modal) modalSiteForm.addEventListener('submit', (e) => { e.preventDefault(); const url = document.getElementById('modal-site-url').value; const title = document.getElementById('modal-site-title').value; const description = document.getElementById('modal-site-description').value; const category = document.getElementById('modal-site-category').value; if (addWebsite(url, title, description, category)) { showAlert('Website added successfully!', 'success'); modalSiteForm.reset(); addSiteModal.style.display = 'none'; } }); // Site form submission (in main form) siteForm.addEventListener('submit', (e) => { e.preventDefault(); const url = document.getElementById('site-url').value; const title = document.getElementById('site-title').value; const description = document.getElementById('site-description').value; const category = document.getElementById('site-category').value; if (addWebsite(url, title, description, category)) { showAlert('Website added successfully!', 'success'); siteForm.reset(); } });