Open Tool `; toolGrid.appendChild(card); }); // 2. MODAL HANDLING toolGrid.addEventListener('click', (e) => { if (e.target.classList.contains('btn')) { const toolId = e.target.getAttribute('data-tool-id'); openModal(toolId); } }); const closeModal = () => { modal.classList.remove('show'); // Stop speech synthesis when modal is closed window.speechSynthesis.cancel(); }; closeBtn.onclick = closeModal; modal.addEventListener('click', (e) => { if (e.target === modal) { closeModal(); } }); function openModal(toolId) { const tool = tools.find(t => t.id === toolId); modalHost.innerHTML = getToolHTML(toolId, tool.title); modal.classList.add('show'); attachToolListener(toolId); } // 3. GENERATE HTML FOR EACH TOOL'S INTERFACE function getToolHTML(toolId, title) { let html = `

${title}

`; switch(toolId) { case 'ytTitleGen': case 'videoIdeaGen': html += ` Generate Ideas `; break; case 'aiTextToSpeech': html += ` Speak `; break; default: // For all demonstration tools html += ` Process `; break; } html += ``; return html; } // 4. ATTACH EVENT LISTENERS AND DEFINE TOOL LOGIC function attachToolListener(toolId) { const actionBtn = modal.querySelector('#tool-action-btn'); const resultDiv = modal.querySelector('.tool-result'); const textInput = modal.querySelector('#tool-input-text'); const tool = tools.find(t => t.id === toolId); if (tool.type === 'functional') { // Logic for fully functional tools switch(toolId) { case 'ytTitleGen': actionBtn.onclick = () => { const keyword = textInput.value.trim() || 'Your Topic'; const templates = [ `The Ultimate Guide to ${keyword}`, `5 ${keyword} Mistakes to Avoid`, `How to Master ${keyword} in 2025`, `I Tried ${keyword} for 30 Days... Here's What Happened`, `${keyword}: A Beginner's Guide`, `The TRUTH About ${keyword}`, `Why Everyone is Talking About ${keyword}`, `Unboxing the Best ${keyword} Gadget` ]; let listHTML = '

'; templates.forEach(t => listHTML += `
• ${t}
`); listHTML += '

'; resultDiv.innerHTML = listHTML; }; break; case 'videoIdeaGen': actionBtn.onclick = () => { const topic = textInput.value.trim() || 'Your Niche'; const formats = [ `A 'How-To' video on a core skill in ${topic}`, `A 'Top 5 Myths' about ${topic}`, `Reviewing a popular product in ${topic}`, `A 'Day in the Life' of someone in ${topic}`, `Comparing two popular methods in ${topic}`, `A reaction video to a trending topic in ${topic}`, `A Q&A session about ${topic}` ]; let listHTML = '

'; formats.forEach(f => listHTML += `
• ${f}
`); listHTML += '

'; resultDiv.innerHTML = listHTML; }; break; case 'aiTextToSpeech': const voiceSelect = modal.querySelector('#voice-select'); let voices = []; function populateVoiceList() { voices = window.speechSynthesis.getVoices(); voiceSelect.innerHTML = ''; if(voices.length === 0) { voiceSelect.innerHTML = ''; return; } voices.forEach((voice, i) => { const option = document.createElement('option'); option.textContent = `${voice.name} (${voice.lang})`; option.setAttribute('data-lang', voice.lang); option.setAttribute('data-name', voice.name); voiceSelect.appendChild(option); }); } populateVoiceList(); if (speechSynthesis.onvoiceschanged !== undefined) { speechSynthesis.onvoiceschanged = populateVoiceList; } actionBtn.onclick = () => { if (window.speechSynthesis.speaking) { window.speechSynthesis.cancel(); } const text = textInput.value; if (!text) { resultDiv.textContent = 'Please enter some text to speak.'; return; } const utterance = new SpeechSynthesisUtterance(text); const selectedVoiceName = voiceSelect.selectedOptions[0].getAttribute('data-name'); const selectedVoice = voices.find(voice => voice.name === selectedVoiceName); if (selectedVoice) { utterance.voice = selectedVoice; } utterance.onstart = () => resultDiv.textContent = 'Speaking...'; utterance.onend = () => resultDiv.textContent = 'Finished speaking.'; window.speechSynthesis.speak(utterance); }; break; } } else { // Generic handler for all UI demonstration tools actionBtn.onclick = () => { resultDiv.innerHTML = 'Processing...'; setTimeout(() => { resultDiv.innerHTML = ` Demonstration Complete!

This is a functional UI demonstration. A real ${tool.title} requires complex server-side processing and AI models to provide accurate results. This tool can be connected to a backend API to enable full functionality.

`; }, 1500); // Simulate processing time }; } } })();