Playlist Script - Font
<!-- Playlist editor --> <h3>📋 Font Playlist</h3> <div class="add-font-area"> <input type="text" id="newFontName" placeholder="Font name (e.g., 'Poppins', 'Courier New')"> <button id="addFontBtn">➕ Add</button> </div> <div class="font-list" id="fontListContainer"> <!-- dynamic font list --> </div> <div class="toolbar"> <button id="exportBtn">💾 Export Playlist</button> <button id="importBtn">📂 Import Playlist</button> <input type="file" id="importFile" style="display:none" accept=".json"> </div> <p style="font-size: 0.75rem; margin-top: 20px; opacity:0.6;">💡 Tip: Add any Google Font or system font. Playlist rotates every 3 sec.</p> </div>
function prevFont() if (!playlist.length) return; currentIndex = (currentIndex - 1 + playlist.length) % playlist.length; updateDisplay(); if (isPlaying) stopAutoRotate(); startAutoRotate(); else updateDisplay(); font playlist script
// export/import function exportPlaylist() const dataStr = JSON.stringify( fonts: playlist, savedText: userMessageTextarea.value , null, 2); const blob = new Blob([dataStr], type: "application/json"); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = "fontPlaylist.json"; a.click(); URL.revokeObjectURL(url); !-- Playlist editor -->
userMessageTextarea.addEventListener('input', updateTextContent); prevBtn.addEventListener('click', prevFont); nextBtn.addEventListener('click', nextFont); playBtn.addEventListener('click', () => if (playlist.length) startAutoRotate(); else alert("Add fonts to playlist first"); ); pauseBtn.addEventListener('click', stopAutoRotate); addFontBtn.addEventListener('click', addFont); exportBtn.addEventListener('click', exportPlaylist); importBtn.addEventListener('click', () => importFileInput.click()); importFileInput.addEventListener('change', (e) => if (e.target.files.length) importPlaylist(e.target.files[0]); importFileInput.value = ''; ); darkModeBtn.addEventListener('click', toggleDarkMode); // Stop rotation when page visibility or before unload (clean) window.addEventListener('beforeunload', () => if(intervalId) clearInterval(intervalId); ); 📋 Font Playlist<
function updateTextContent() let newText = userMessageTextarea.value; if (newText.trim() === "") newText = " "; // keep visible displayDiv.innerText = newText;