Font Playlist Script Link
<!-- Custom text input --> <label>✏️ Your message:</label> <textarea id="userMessage" rows="2" placeholder="Type any text...">The quick brown fox jumps over the lazy dog</textarea>
<!-- 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> font playlist script
// refresh font list UI (with remove & reorder stub) function renderPlaylistUI() fontListContainer.innerHTML = ''; playlist.forEach((font, idx) => const itemDiv = document.createElement('div'); itemDiv.className = 'font-item'; const nameSpan = document.createElement('span'); nameSpan.className = 'font-name'; nameSpan.innerText = font; nameSpan.style.fontFamily = `'$font', monospace`; // click on font name => jump to that font & pause nameSpan.addEventListener('click', () => if (playlist.length) currentIndex = idx; updateDisplay(); stopAutoRotate(); ); const removeBtn = document.createElement('button'); removeBtn.innerText = '✖️'; removeBtn.className = 'remove-font'; removeBtn.addEventListener('click', (e) => e.stopPropagation(); if (playlist.length <= 1) alert("Cannot remove last font – add another first."); return; playlist.splice(idx, 1); if (currentIndex >= playlist.length) currentIndex = playlist.length - 1; if (currentIndex < 0) currentIndex = 0; renderPlaylistUI(); updateDisplay(); stopAutoRotate(); ); itemDiv.appendChild(nameSpan); itemDiv.appendChild(removeBtn); fontListContainer.appendChild(itemDiv); ); !-- Custom text input -->
// Add font function addFont() let newFont = newFontNameInput.value.trim(); if (newFont === "") return alert("Enter a font name"); // simple check: avoid duplicate (case-insensitive) if (playlist.some(f => f.toLowerCase() === newFont.toLowerCase())) alert("Font already in playlist"); return; playlist.push(newFont); renderPlaylistUI(); if (playlist.length === 1) currentIndex = 0; updateDisplay(); newFontNameInput.value = ""; if (isPlaying) stopAutoRotate(); startAutoRotate(); ✏️ Your message:<
function updateTextContent() let newText = userMessageTextarea.value; if (newText.trim() === "") newText = " "; // keep visible displayDiv.innerText = newText;
// 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);