Busifrog Teleprompter<\/title>\n<scriptsrc=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n<linkrel=\"preconnect\"href=\"https:\/\/fonts.googleapis.com\">\n<linkrel=\"preconnect\"href=\"https:\/\/fonts.gstatic.com\"crossorigin>\n<linkhref=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap\"rel=\"stylesheet\">\n<style>\nbody{\nfont-family:'Inter',sans-serif;\n}\n\/* Custom scrollbar for a cleaner look *\/\n::-webkit-scrollbar{\nwidth:8px;\n}\n::-webkit-scrollbar-track{\nbackground: #1f2937;\n}\n::-webkit-scrollbar-thumb{\nbackground: #4b5563;\nborder-radius:4px;\n}\n::-webkit-scrollbar-thumb:hover{\nbackground: #6b7280;\n}\n\/* The reading guide marker *\/\n#teleprompter::before{\ncontent:'';\nposition:absolute;\ntop:50%;\nleft:0;\nright:0;\nheight:3px;\nbackground-color:rgba(52,211,153,0.6);\/* A semi-transparent green line *\/\ntransform:translateY(-50%);\nz-index:10;\npointer-events:none;\nopacity:0;\ntransition:opacity0.3sease-in-out;\n}\n#teleprompter.scrolling::before{\nopacity:1;\n}\n\/* Class for mirrored text *\/\n.mirrored#scroll-text{\ntransform:scaleX(-1);\n}\n<\/style>\n<\/head>\n<body class=\"bg-gray-900 text-gray-100 flex flex-col h-full overflow-hidden\">\n\n<headerclass=\"bg-gray-800\/50 backdrop-blur-sm shadow-lg p-3 z-30\">\n<divclass=\"container mx-auto flex justify-between items-center\">\n<h1class=\"text-2xl font-bold text-emerald-400\">\n<svgxmlns=\"http:\/\/www.w3.org\/2000\/svg\"class=\"h-8 w-8 inline-block mr-2 -mt-1\"viewBox=\"0 0 24 24\"fill=\"currentColor\">\n<pathd=\"M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8 14H6v-2h6v2zm4-4H6v-2h12v2zm0-4H6V6h12v2z\"\/>\n<\/svg>\nBusifrog Teleprompter\n<\/h1>\n<\/div>\n<\/header>\n\n<divclass=\"flex flex-1 min-h-0\">\n\n<divid=\"editor-panel\"class=\"w-1\/3 bg-gray-800 p-4 flex flex-col transition-all duration-300\">\n<labelfor=\"script-input\"class=\"text-lg font-semibold mb-2 text-gray-300\">Your Script<\/label>\n<textareaid=\"script-input\"class=\"w-full h-full bg-gray-900 border border-gray-700 rounded-lg p-3 text-gray-200 focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 outline-none resize-none\"placeholder=\"Paste your script here...\"><\/textarea>\n<\/div>\n\n<mainclass=\"flex-1 flex flex-col bg-gray-900\">\n\n<divid=\"teleprompter\"class=\"relative flex-1 overflow-hidden cursor-pointer\">\n<divid=\"scroll-text\"class=\"p-16 md:p-24 lg:p-32 text-center text-4xl leading-relaxed transition-transform duration-300\">\n\n<\/div>\n<\/div>\n\n<divclass=\"bg-gray-800\/50 backdrop-blur-sm p-4 shadow-t-lg z-20\">\n<divclass=\"grid grid-cols-1 md:grid-cols-3 gap-6 items-center max-w-6xl mx-auto\">\n\n\n\n<divclass=\"flex items-center justify-center space-x-4\">\n<buttonid=\"play-pause-btn\"class=\"bg-emerald-500 hover:bg-emerald-600 text-white font-bold py-3 px-6 rounded-lg transition-all duration-200 flex items-center space-x-2 text-lg\">\n<svgid=\"play-icon\"xmlns=\"http:\/\/www.w3.org\/2000\/svg\"class=\"h-6 w-6\"fill=\"none\"viewBox=\"0 0 24 24\"stroke=\"currentColor\"><pathstroke-linecap=\"round\"stroke-linejoin=\"round\"stroke-width=\"2\"d=\"M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z\"\/><pathstroke-linecap=\"round\"stroke-linejoin=\"round\"stroke-width=\"2\"d=\"M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\/><\/svg>\n<svgid=\"pause-icon\"xmlns=\"http:\/\/www.w3.org\/2000\/svg\"class=\"h-6 w-6 hidden\"fill=\"none\"viewBox=\"0 0 24 24\"stroke=\"currentColor\"><pathstroke-linecap=\"round\"stroke-linejoin=\"round\"stroke-width=\"2\"d=\"M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z\"\/><\/svg>\n<span>Play<\/span>\n<\/button>\n<buttonid=\"reset-btn\"class=\"bg-gray-600 hover:bg-gray-700 text-white font-bold py-3 px-5 rounded-lg transition-all duration-200\"title=\"Reset Scroll\">\n<svgxmlns=\"http:\/\/www.w3.org\/2000\/svg\"class=\"h-6 w-6\"fill=\"none\"viewBox=\"0 0 24 24\"stroke=\"currentColor\"><pathstroke-linecap=\"round\"stroke-linejoin=\"round\"stroke-width=\"2\"d=\"M4 4v5h5M20 20v-5h-5M4 4l16 16\"\/><\/svg>\n<\/button>\n<\/div>\n\n<divclass=\"flex flex-col space-y-4\">\n<divclass=\"flex items-center space-x-3\">\n<labelfor=\"speed-slider\"class=\"font-medium text-sm w-20\">Speed<\/label>\n<inputid=\"speed-slider\"type=\"range\"min=\"5\"max=\"200\"value=\"40\"class=\"w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-emerald-500\">\n<\/div>\n<divclass=\"flex items-center space-x-3\">\n<labelfor=\"font-size-slider\"class=\"font-medium text-sm w-20\">Font Size<\/label>\n<inputid=\"font-size-slider\"type=\"range\"min=\"16\"max=\"120\"value=\"40\"class=\"w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-emerald-500\">\n<\/div>\n<\/div>\n\n<divclass=\"flex items-center justify-center space-x-4\">\n<buttonid=\"mirror-btn\"class=\"bg-gray-600 hover:bg-gray-700 text-white font-bold py-3 px-5 rounded-lg transition-all duration-200\"title=\"Mirror Text\">\n<svgxmlns=\"http:\/\/www.w3.org\/2000\/svg\"class=\"h-6 w-6\"fill=\"none\"viewBox=\"0 0 24 24\"stroke=\"currentColor\"><pathstroke-linecap=\"round\"stroke-linejoin=\"round\"stroke-width=\"2\"d=\"M12 21V3M8 7l-4 4 4 4M16 7l4 4-4 4\"\/><\/svg>\n<\/button>\n<buttonid=\"fullscreen-btn\"class=\"bg-gray-600 hover:bg-gray-700 text-white font-bold py-3 px-5 rounded-lg transition-all duration-200\"title=\"Fullscreen\">\n<svgxmlns=\"http:\/\/www.w3.org\/2000\/svg\"class=\"h-6 w-6\"fill=\"none\"viewBox=\"0 0 24 24\"stroke=\"currentColor\"><pathstroke-linecap=\"round\"stroke-linejoin=\"round\"stroke-width=\"2\"d=\"M4 8V4m0 0h4M4 4l5 5m11-1v4m0 0h-4m4-4l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5v-4m0 0h-4m4 4l-5-5\"\/><\/svg>\n<\/button>\n<buttonid=\"toggle-editor-btn\"class=\"bg-gray-600 hover:bg-gray-700 text-white font-bold py-3 px-5 rounded-lg transition-all duration-200\"title=\"Toggle Editor Panel\">\n<svgxmlns=\"http:\/\/www.w3.org\/2000\/svg\"class=\"h-6 w-6\"fill=\"none\"viewBox=\"0 0 24 24\"stroke=\"currentColor\"><pathstroke-linecap=\"round\"stroke-linejoin=\"round\"stroke-width=\"2\"d=\"M11 4h4a2 2 0 012 2v12a2 2 0 01-2 2h-4a2 2 0 01-2-2V6a2 2 0 012-2zM15 4V2m0 20v-2m-4-2h.01M11 6h.01M11 10h.01M11 14h.01M7 4h1v16H7V4z\"\/><\/svg>\n<\/button>\n<\/div>\n<\/div>\n<\/div>\n<\/main>\n<\/div>\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n\/\/ DOM Elements\nconst scriptInput = document.getElementById('script-input');\nconst teleprompter = document.getElementById('teleprompter');\nconst scrollText = document.getElementById('scroll-text');\nconst playPauseBtn = document.getElementById('play-pause-btn');\nconst playIcon = document.getElementById('play-icon');\nconst pauseIcon = document.getElementById('pause-icon');\nconst playPauseText = playPauseBtn.querySelector('span');\nconst resetBtn = document.getElementById('reset-btn');\nconst speedSlider = document.getElementById('speed-slider');\nconst fontSizeSlider = document.getElementById('font-size-slider');\nconst mirrorBtn = document.getElementById('mirror-btn');\nconst fullscreenBtn = document.getElementById('fullscreen-btn');\nconst editorPanel = document.getElementById('editor-panel');\nconst toggleEditorBtn = document.getElementById('toggle-editor-btn');\n\/\/ State\nlet isScrolling =false;\nlet animationFrameId =null;\nlet lastTime =0;\n\n\nconst initialState =`Welcome to the Busifrog Teleprompter!\nSimply paste your script into the editor on the left.\nUse the controls below to start, stop, and adjust the speed and font size.\nYou can also mirror the text for professional setups or enter fullscreen for a distraction-free experience.\nPress the Spacebar to Play or Pause. Use Arrow Up\/Down to control speed, and Arrow Left\/Right to change font size.\nHappy speaking!`;\n\/\/ --- Initialization ---\nfunction init(){\n\/\/ Load script from localStorage or use initial state\nconst savedScript = localStorage.getItem('teleprompterScript');\nscriptInput.value = savedScript || initialState;\nupdateScrollText();\n\n\n\/\/ Set initial values from sliders\nupdateFontSize();\n\/\/ Gracefully disable fullscreen button if the feature is not supported or allowed.\nif(!document.fullscreenEnabled){\nfullscreenBtn.disabled = true;\nfullscreenBtn.title = \"Fullscreen is disabled in this environment\";\nfullscreenBtn.classList.add('opacity-50', 'cursor-not-allowed');\n}\n}\n\/\/ --- Core Functions ---\nfunction updateScrollText(){\n\/\/ Replace newlines with <br> for HTML rendering\nscrollText.innerHTML = scriptInput.value.replace(\/\\n\/g, '<br>');\n}\nfunction scrollLoop(timestamp){\nif(!isScrolling)return;\nif(!lastTime){\nlastTime = timestamp;\n}\nconst deltaTime = timestamp - lastTime;\nlastTime = timestamp;\n\n\n\/\/ FIX: The original speed calculation was too slow to be noticeable.\n\/\/ This new formula provides a better, frame-rate independent speed range.\nconst speed = parseInt(speedSlider.value);\nconst scrollAmount = speed *(deltaTime \/500);\nteleprompter.scrollTop += scrollAmount;\n\/\/ Stop when scrolled to the bottom\nif(teleprompter.scrollTop >=(scrollText.offsetHeight - teleprompter.clientHeight)){\nstopScrolling();\n}else{\nanimationFrameId = requestAnimationFrame(scrollLoop);\n}\n}\nfunction startScrolling(){\nif(isScrolling)return;\nisScrolling = true;\nteleprompter.classList.add('scrolling');\nplayIcon.classList.add('hidden');\npauseIcon.classList.remove('hidden');\nplayPauseText.textContent = 'Pause';\nlastTime = 0; \/\/ Reset lastTime to avoid jump on resume\nanimationFrameId = requestAnimationFrame(scrollLoop);\n}\nfunction stopScrolling(){\nif(!isScrolling)return;\nisScrolling = false;\nteleprompter.classList.remove('scrolling');\nplayIcon.classList.remove('hidden');\npauseIcon.classList.add('hidden');\nplayPauseText.textContent = 'Play';\ncancelAnimationFrame(animationFrameId);\nanimationFrameId = null;\n}\n\n\nfunction toggleScrolling(){\nisScrolling ? stopScrolling() : startScrolling();\n}\nfunction resetScroll(){\nstopScrolling();\nteleprompter.scrollTop = 0;\n}\nfunction updateFontSize(){\nconst fontSize = fontSizeSlider.value;\nscrollText.style.fontSize = `${fontSize}px`;\n\/\/ Adjust padding based on font size for better framing\nconst padding =Math.max(16, fontSize *2);\nscrollText.style.padding = `${padding}px`;\n}\nfunction toggleMirror(){\nteleprompter.classList.toggle('mirrored');\n}\nfunction toggleFullscreen(){\n\/\/ Check if fullscreen is enabled before attempting to use it.\nif(!document.fullscreenEnabled){\nconsole.warn(\"Fullscreen mode is not supported or is disabled by the current environment.\");\nreturn;\n}\nif(!document.fullscreenElement){\ndocument.documentElement.requestFullscreen().catch(err => {\n\/\/ This catch is still a good fallback for other potential errors.\nconsole.error(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);\n});\n}else{\ndocument.exitFullscreen();\n}\n}\nfunction toggleEditor(){\neditorPanel.classList.toggle('w-1\/3');\neditorPanel.classList.toggle('w-0');\neditorPanel.classList.toggle('p-4');\neditorPanel.classList.toggle('p-0');\neditorPanel.classList.toggle('overflow-hidden');\n}\n\/\/ --- Event Listeners ---\nscriptInput.addEventListener('input', () => {\nupdateScrollText();\nlocalStorage.setItem('teleprompterScript', scriptInput.value);\n});\n\n\nplayPauseBtn.addEventListener('click', toggleScrolling);\nteleprompter.addEventListener('click', toggleScrolling); \/\/ Click on text to play\/pause\nresetBtn.addEventListener('click', resetScroll);\nspeedSlider.addEventListener('input', () => {\n\/\/ No function needed, value is read directly in scrollLoop\n});\nfontSizeSlider.addEventListener('input', updateFontSize);\nmirrorBtn.addEventListener('click', toggleMirror);\nfullscreenBtn.addEventListener('click', toggleFullscreen);\ntoggleEditorBtn.addEventListener('click', toggleEditor);\n\/\/ Keyboard shortcuts\ndocument.addEventListener('keydown', (e) => {\nif(e.target.tagName ==='TEXTAREA')return;\/\/ Don't interfere with typing\nswitch(e.code){\ncase'Space':\ne.preventDefault();\ntoggleScrolling();\nbreak;\ncase'ArrowUp':\ne.preventDefault();\nspeedSlider.value = Math.min(parseInt(speedSlider.value) + 5, speedSlider.max);\nbreak;\ncase'ArrowDown':\ne.preventDefault();\nspeedSlider.value = Math.max(parseInt(speedSlider.value) - 5, speedSlider.min);\nbreak;\ncase'ArrowRight':\ne.preventDefault();\nfontSizeSlider.value = Math.min(parseInt(fontSizeSlider.value) + 2, fontSizeSlider.max);\nupdateFontSize();\nbreak;\ncase'ArrowLeft':\ne.preventDefault();\nfontSizeSlider.value = Math.max(parseInt(fontSizeSlider.value) - 2, fontSizeSlider.min);\nupdateFontSize();\nbreak;\ncase'KeyR':\ne.preventDefault();\nresetScroll();\nbreak;\n}\n});\n\/\/ --- Run Initialization ---\ninit();\n});\n<\/script>\n<\/body>\n<\/html>\n\n\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Busifrog Teleprompter Busifrog Teleprompter Your Script Play Speed Font Size<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/busifrog.com\/index.php\/wp-json\/wp\/v2\/pages\/1395"}],"collection":[{"href":"https:\/\/busifrog.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/busifrog.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/busifrog.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/busifrog.com\/index.php\/wp-json\/wp\/v2\/comments?post=1395"}],"version-history":[{"count":5,"href":"https:\/\/busifrog.com\/index.php\/wp-json\/wp\/v2\/pages\/1395\/revisions"}],"predecessor-version":[{"id":1427,"href":"https:\/\/busifrog.com\/index.php\/wp-json\/wp\/v2\/pages\/1395\/revisions\/1427"}],"wp:attachment":[{"href":"https:\/\/busifrog.com\/index.php\/wp-json\/wp\/v2\/media?parent=1395"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\t\t\n\n\n\n\n\n\n\nBusifrog Teleprompter<\/title>\n<scriptsrc=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n<linkrel=\"preconnect\"href=\"https:\/\/fonts.googleapis.com\">\n<linkrel=\"preconnect\"href=\"https:\/\/fonts.gstatic.com\"crossorigin>\n<linkhref=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap\"rel=\"stylesheet\">\n<style>\nbody{\nfont-family:'Inter',sans-serif;\n}\n\/* Custom scrollbar for a cleaner look *\/\n::-webkit-scrollbar{\nwidth:8px;\n}\n::-webkit-scrollbar-track{\nbackground: #1f2937;\n}\n::-webkit-scrollbar-thumb{\nbackground: #4b5563;\nborder-radius:4px;\n}\n::-webkit-scrollbar-thumb:hover{\nbackground: #6b7280;\n}\n\/* The reading guide marker *\/\n#teleprompter::before{\ncontent:'';\nposition:absolute;\ntop:50%;\nleft:0;\nright:0;\nheight:3px;\nbackground-color:rgba(52,211,153,0.6);\/* A semi-transparent green line *\/\ntransform:translateY(-50%);\nz-index:10;\npointer-events:none;\nopacity:0;\ntransition:opacity0.3sease-in-out;\n}\n#teleprompter.scrolling::before{\nopacity:1;\n}\n\/* Class for mirrored text *\/\n.mirrored#scroll-text{\ntransform:scaleX(-1);\n}\n<\/style>\n<\/head>\n<body class=\"bg-gray-900 text-gray-100 flex flex-col h-full overflow-hidden\">\n\n<headerclass=\"bg-gray-800\/50 backdrop-blur-sm shadow-lg p-3 z-30\">\n<divclass=\"container mx-auto flex justify-between items-center\">\n<h1class=\"text-2xl font-bold text-emerald-400\">\n<svgxmlns=\"http:\/\/www.w3.org\/2000\/svg\"class=\"h-8 w-8 inline-block mr-2 -mt-1\"viewBox=\"0 0 24 24\"fill=\"currentColor\">\n<pathd=\"M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8 14H6v-2h6v2zm4-4H6v-2h12v2zm0-4H6V6h12v2z\"\/>\n<\/svg>\nBusifrog Teleprompter\n<\/h1>\n<\/div>\n<\/header>\n\n<divclass=\"flex flex-1 min-h-0\">\n\n<divid=\"editor-panel\"class=\"w-1\/3 bg-gray-800 p-4 flex flex-col transition-all duration-300\">\n<labelfor=\"script-input\"class=\"text-lg font-semibold mb-2 text-gray-300\">Your Script<\/label>\n<textareaid=\"script-input\"class=\"w-full h-full bg-gray-900 border border-gray-700 rounded-lg p-3 text-gray-200 focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 outline-none resize-none\"placeholder=\"Paste your script here...\"><\/textarea>\n<\/div>\n\n<mainclass=\"flex-1 flex flex-col bg-gray-900\">\n\n<divid=\"teleprompter\"class=\"relative flex-1 overflow-hidden cursor-pointer\">\n<divid=\"scroll-text\"class=\"p-16 md:p-24 lg:p-32 text-center text-4xl leading-relaxed transition-transform duration-300\">\n\n<\/div>\n<\/div>\n\n<divclass=\"bg-gray-800\/50 backdrop-blur-sm p-4 shadow-t-lg z-20\">\n<divclass=\"grid grid-cols-1 md:grid-cols-3 gap-6 items-center max-w-6xl mx-auto\">\n\n\n\n<divclass=\"flex items-center justify-center space-x-4\">\n<buttonid=\"play-pause-btn\"class=\"bg-emerald-500 hover:bg-emerald-600 text-white font-bold py-3 px-6 rounded-lg transition-all duration-200 flex items-center space-x-2 text-lg\">\n<svgid=\"play-icon\"xmlns=\"http:\/\/www.w3.org\/2000\/svg\"class=\"h-6 w-6\"fill=\"none\"viewBox=\"0 0 24 24\"stroke=\"currentColor\"><pathstroke-linecap=\"round\"stroke-linejoin=\"round\"stroke-width=\"2\"d=\"M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z\"\/><pathstroke-linecap=\"round\"stroke-linejoin=\"round\"stroke-width=\"2\"d=\"M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\/><\/svg>\n<svgid=\"pause-icon\"xmlns=\"http:\/\/www.w3.org\/2000\/svg\"class=\"h-6 w-6 hidden\"fill=\"none\"viewBox=\"0 0 24 24\"stroke=\"currentColor\"><pathstroke-linecap=\"round\"stroke-linejoin=\"round\"stroke-width=\"2\"d=\"M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z\"\/><\/svg>\n<span>Play<\/span>\n<\/button>\n<buttonid=\"reset-btn\"class=\"bg-gray-600 hover:bg-gray-700 text-white font-bold py-3 px-5 rounded-lg transition-all duration-200\"title=\"Reset Scroll\">\n<svgxmlns=\"http:\/\/www.w3.org\/2000\/svg\"class=\"h-6 w-6\"fill=\"none\"viewBox=\"0 0 24 24\"stroke=\"currentColor\"><pathstroke-linecap=\"round\"stroke-linejoin=\"round\"stroke-width=\"2\"d=\"M4 4v5h5M20 20v-5h-5M4 4l16 16\"\/><\/svg>\n<\/button>\n<\/div>\n\n<divclass=\"flex flex-col space-y-4\">\n<divclass=\"flex items-center space-x-3\">\n<labelfor=\"speed-slider\"class=\"font-medium text-sm w-20\">Speed<\/label>\n<inputid=\"speed-slider\"type=\"range\"min=\"5\"max=\"200\"value=\"40\"class=\"w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-emerald-500\">\n<\/div>\n<divclass=\"flex items-center space-x-3\">\n<labelfor=\"font-size-slider\"class=\"font-medium text-sm w-20\">Font Size<\/label>\n<inputid=\"font-size-slider\"type=\"range\"min=\"16\"max=\"120\"value=\"40\"class=\"w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-emerald-500\">\n<\/div>\n<\/div>\n\n<divclass=\"flex items-center justify-center space-x-4\">\n<buttonid=\"mirror-btn\"class=\"bg-gray-600 hover:bg-gray-700 text-white font-bold py-3 px-5 rounded-lg transition-all duration-200\"title=\"Mirror Text\">\n<svgxmlns=\"http:\/\/www.w3.org\/2000\/svg\"class=\"h-6 w-6\"fill=\"none\"viewBox=\"0 0 24 24\"stroke=\"currentColor\"><pathstroke-linecap=\"round\"stroke-linejoin=\"round\"stroke-width=\"2\"d=\"M12 21V3M8 7l-4 4 4 4M16 7l4 4-4 4\"\/><\/svg>\n<\/button>\n<buttonid=\"fullscreen-btn\"class=\"bg-gray-600 hover:bg-gray-700 text-white font-bold py-3 px-5 rounded-lg transition-all duration-200\"title=\"Fullscreen\">\n<svgxmlns=\"http:\/\/www.w3.org\/2000\/svg\"class=\"h-6 w-6\"fill=\"none\"viewBox=\"0 0 24 24\"stroke=\"currentColor\"><pathstroke-linecap=\"round\"stroke-linejoin=\"round\"stroke-width=\"2\"d=\"M4 8V4m0 0h4M4 4l5 5m11-1v4m0 0h-4m4-4l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5v-4m0 0h-4m4 4l-5-5\"\/><\/svg>\n<\/button>\n<buttonid=\"toggle-editor-btn\"class=\"bg-gray-600 hover:bg-gray-700 text-white font-bold py-3 px-5 rounded-lg transition-all duration-200\"title=\"Toggle Editor Panel\">\n<svgxmlns=\"http:\/\/www.w3.org\/2000\/svg\"class=\"h-6 w-6\"fill=\"none\"viewBox=\"0 0 24 24\"stroke=\"currentColor\"><pathstroke-linecap=\"round\"stroke-linejoin=\"round\"stroke-width=\"2\"d=\"M11 4h4a2 2 0 012 2v12a2 2 0 01-2 2h-4a2 2 0 01-2-2V6a2 2 0 012-2zM15 4V2m0 20v-2m-4-2h.01M11 6h.01M11 10h.01M11 14h.01M7 4h1v16H7V4z\"\/><\/svg>\n<\/button>\n<\/div>\n<\/div>\n<\/div>\n<\/main>\n<\/div>\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n\/\/ DOM Elements\nconst scriptInput = document.getElementById('script-input');\nconst teleprompter = document.getElementById('teleprompter');\nconst scrollText = document.getElementById('scroll-text');\nconst playPauseBtn = document.getElementById('play-pause-btn');\nconst playIcon = document.getElementById('play-icon');\nconst pauseIcon = document.getElementById('pause-icon');\nconst playPauseText = playPauseBtn.querySelector('span');\nconst resetBtn = document.getElementById('reset-btn');\nconst speedSlider = document.getElementById('speed-slider');\nconst fontSizeSlider = document.getElementById('font-size-slider');\nconst mirrorBtn = document.getElementById('mirror-btn');\nconst fullscreenBtn = document.getElementById('fullscreen-btn');\nconst editorPanel = document.getElementById('editor-panel');\nconst toggleEditorBtn = document.getElementById('toggle-editor-btn');\n\/\/ State\nlet isScrolling =false;\nlet animationFrameId =null;\nlet lastTime =0;\n\n\nconst initialState =`Welcome to the Busifrog Teleprompter!\nSimply paste your script into the editor on the left.\nUse the controls below to start, stop, and adjust the speed and font size.\nYou can also mirror the text for professional setups or enter fullscreen for a distraction-free experience.\nPress the Spacebar to Play or Pause. Use Arrow Up\/Down to control speed, and Arrow Left\/Right to change font size.\nHappy speaking!`;\n\/\/ --- Initialization ---\nfunction init(){\n\/\/ Load script from localStorage or use initial state\nconst savedScript = localStorage.getItem('teleprompterScript');\nscriptInput.value = savedScript || initialState;\nupdateScrollText();\n\n\n\/\/ Set initial values from sliders\nupdateFontSize();\n\/\/ Gracefully disable fullscreen button if the feature is not supported or allowed.\nif(!document.fullscreenEnabled){\nfullscreenBtn.disabled = true;\nfullscreenBtn.title = \"Fullscreen is disabled in this environment\";\nfullscreenBtn.classList.add('opacity-50', 'cursor-not-allowed');\n}\n}\n\/\/ --- Core Functions ---\nfunction updateScrollText(){\n\/\/ Replace newlines with <br> for HTML rendering\nscrollText.innerHTML = scriptInput.value.replace(\/\\n\/g, '<br>');\n}\nfunction scrollLoop(timestamp){\nif(!isScrolling)return;\nif(!lastTime){\nlastTime = timestamp;\n}\nconst deltaTime = timestamp - lastTime;\nlastTime = timestamp;\n\n\n\/\/ FIX: The original speed calculation was too slow to be noticeable.\n\/\/ This new formula provides a better, frame-rate independent speed range.\nconst speed = parseInt(speedSlider.value);\nconst scrollAmount = speed *(deltaTime \/500);\nteleprompter.scrollTop += scrollAmount;\n\/\/ Stop when scrolled to the bottom\nif(teleprompter.scrollTop >=(scrollText.offsetHeight - teleprompter.clientHeight)){\nstopScrolling();\n}else{\nanimationFrameId = requestAnimationFrame(scrollLoop);\n}\n}\nfunction startScrolling(){\nif(isScrolling)return;\nisScrolling = true;\nteleprompter.classList.add('scrolling');\nplayIcon.classList.add('hidden');\npauseIcon.classList.remove('hidden');\nplayPauseText.textContent = 'Pause';\nlastTime = 0; \/\/ Reset lastTime to avoid jump on resume\nanimationFrameId = requestAnimationFrame(scrollLoop);\n}\nfunction stopScrolling(){\nif(!isScrolling)return;\nisScrolling = false;\nteleprompter.classList.remove('scrolling');\nplayIcon.classList.remove('hidden');\npauseIcon.classList.add('hidden');\nplayPauseText.textContent = 'Play';\ncancelAnimationFrame(animationFrameId);\nanimationFrameId = null;\n}\n\n\nfunction toggleScrolling(){\nisScrolling ? stopScrolling() : startScrolling();\n}\nfunction resetScroll(){\nstopScrolling();\nteleprompter.scrollTop = 0;\n}\nfunction updateFontSize(){\nconst fontSize = fontSizeSlider.value;\nscrollText.style.fontSize = `${fontSize}px`;\n\/\/ Adjust padding based on font size for better framing\nconst padding =Math.max(16, fontSize *2);\nscrollText.style.padding = `${padding}px`;\n}\nfunction toggleMirror(){\nteleprompter.classList.toggle('mirrored');\n}\nfunction toggleFullscreen(){\n\/\/ Check if fullscreen is enabled before attempting to use it.\nif(!document.fullscreenEnabled){\nconsole.warn(\"Fullscreen mode is not supported or is disabled by the current environment.\");\nreturn;\n}\nif(!document.fullscreenElement){\ndocument.documentElement.requestFullscreen().catch(err => {\n\/\/ This catch is still a good fallback for other potential errors.\nconsole.error(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);\n});\n}else{\ndocument.exitFullscreen();\n}\n}\nfunction toggleEditor(){\neditorPanel.classList.toggle('w-1\/3');\neditorPanel.classList.toggle('w-0');\neditorPanel.classList.toggle('p-4');\neditorPanel.classList.toggle('p-0');\neditorPanel.classList.toggle('overflow-hidden');\n}\n\/\/ --- Event Listeners ---\nscriptInput.addEventListener('input', () => {\nupdateScrollText();\nlocalStorage.setItem('teleprompterScript', scriptInput.value);\n});\n\n\nplayPauseBtn.addEventListener('click', toggleScrolling);\nteleprompter.addEventListener('click', toggleScrolling); \/\/ Click on text to play\/pause\nresetBtn.addEventListener('click', resetScroll);\nspeedSlider.addEventListener('input', () => {\n\/\/ No function needed, value is read directly in scrollLoop\n});\nfontSizeSlider.addEventListener('input', updateFontSize);\nmirrorBtn.addEventListener('click', toggleMirror);\nfullscreenBtn.addEventListener('click', toggleFullscreen);\ntoggleEditorBtn.addEventListener('click', toggleEditor);\n\/\/ Keyboard shortcuts\ndocument.addEventListener('keydown', (e) => {\nif(e.target.tagName ==='TEXTAREA')return;\/\/ Don't interfere with typing\nswitch(e.code){\ncase'Space':\ne.preventDefault();\ntoggleScrolling();\nbreak;\ncase'ArrowUp':\ne.preventDefault();\nspeedSlider.value = Math.min(parseInt(speedSlider.value) + 5, speedSlider.max);\nbreak;\ncase'ArrowDown':\ne.preventDefault();\nspeedSlider.value = Math.max(parseInt(speedSlider.value) - 5, speedSlider.min);\nbreak;\ncase'ArrowRight':\ne.preventDefault();\nfontSizeSlider.value = Math.min(parseInt(fontSizeSlider.value) + 2, fontSizeSlider.max);\nupdateFontSize();\nbreak;\ncase'ArrowLeft':\ne.preventDefault();\nfontSizeSlider.value = Math.max(parseInt(fontSizeSlider.value) - 2, fontSizeSlider.min);\nupdateFontSize();\nbreak;\ncase'KeyR':\ne.preventDefault();\nresetScroll();\nbreak;\n}\n});\n\/\/ --- Run Initialization ---\ninit();\n});\n<\/script>\n<\/body>\n<\/html>\n\n\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Busifrog Teleprompter Busifrog Teleprompter Your Script Play Speed Font Size<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/busifrog.com\/index.php\/wp-json\/wp\/v2\/pages\/1395"}],"collection":[{"href":"https:\/\/busifrog.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/busifrog.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/busifrog.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/busifrog.com\/index.php\/wp-json\/wp\/v2\/comments?post=1395"}],"version-history":[{"count":5,"href":"https:\/\/busifrog.com\/index.php\/wp-json\/wp\/v2\/pages\/1395\/revisions"}],"predecessor-version":[{"id":1427,"href":"https:\/\/busifrog.com\/index.php\/wp-json\/wp\/v2\/pages\/1395\/revisions\/1427"}],"wp:attachment":[{"href":"https:\/\/busifrog.com\/index.php\/wp-json\/wp\/v2\/media?parent=1395"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}