📜 Auto-Scroll Teleprompter

Hello, my name is Moundir Boufaa, and I am from Constantine, Algeria. I hold a five-year Master's degree in Market Finance and Financial Engineering, and I am the founder of SITEK Agency that provides digital business solutions. Through my experience, I developed a strong interest in finance, management, and sustainable business growth. I am applying to the Accounting and Management program at Siena to strengthen my expertise in financial strategy and governance. While developing an ERP for SMEs, I realized sustainable success requires strategic expertise. My goal is building sustainable businesses globally. I'm motivated to join you. Thank you.

<div class="settings">
            <div class="setting-row">
                <label>
                    Scroll Speed: <span class="value-display" id="speed-value">10</span>
                </label>
                <input type="range" id="speed-slider" min="1" max="100" value="10" step="1">
            </div>

<div class="setting-row">
                <label>
                    Text Position: <span class="value-display" id="position-value">Middle</span>
                </label>
                <input type="range" id="position-slider" min="1" max="3" value="2" step="1">
            </div>
        </div>

<button id="start-btn">▶ Start Teleprompter</button>

<button id="mirror-toggle">🔄 Toggle Mirror Mode (for selfie camera)</button>

<div class="info" style="margin-top: 20px;">
            <h3>💡 How to Use:</h3>
            <ul>
                <li>Your text will scroll automatically from right to left</li>
                <li>Position your phone/screen below your camera</li>
                <li>Adjust speed in real-time while recording (1-100, INSANELY FAST!)</li>
                <li>Change text position: Top, Middle, or Bottom</li>
                <li>Pause/Resume anytime with Spacebar</li>
                <li>Press 'R' to restart from the beginning</li>
                <li>Press 'P' to cycle through positions while recording</li>
                <li>Use mirror mode if using front/selfie camera</li>
            </ul>
        </div>
    </div>

<div id="teleprompter-screen">
        <div class="quick-controls">
            <button id="quick-pause-btn">⏸</button>
            <button id="quick-restart-btn">🔄</button>
            <button id="quick-stop-btn">⏹</button>
        </div>
        
        <div id="scroll-container">
            <div id="text-display"></div>
        </div>
        
        <div class="controls-bar">
            <div class="control-buttons">
                <button id="pause-btn">⏸ Pause</button>
                <button id="restart-btn">🔄 Restart</button>
                <button id="stop-btn">⏹ Stop</button>
            </div>
            
            <div class="speed-control">
                <label>Speed:</label>
                <input type="range" id="live-speed-slider" min="1" max="100" value="10" step="1">
                <span class="value-display" id="live-speed-value">10</span>
            </div>

<div class="speed-control">
                <label>Position:</label>
                <input type="range" id="live-position-slider" min="1" max="3" value="2" step="1">
                <span class="value-display" id="live-position-value">Middle</span>
            </div>
        </div>
    </div>

let isPaused = false;
        let isMirrored = false;
        let currentSpeed = 10;
        let currentSize = 48;
        let currentPosition = 2;

speedSlider.addEventListener('input', (e) => {
            currentSpeed = e.target.value;
            speedValue.textContent = currentSpeed;
        });

sizeSlider.addEventListener('input', (e) => {
            currentSize = e.target.value;
            sizeValue.textContent = currentSize + 'px';
        });

positionSlider.addEventListener('input', (e) => {
            currentPosition = e.target.value;
            const positions = ['Top', 'Middle', 'Bottom'];
            positionValue.textContent = positions[currentPosition - 1];
        });

liveSpeedSlider.addEventListener('input', (e) => {
            currentSpeed = e.target.value;
            liveSpeedValue.textContent = currentSpeed;
            updateAnimationSpeed();
        });

livePositionSlider.addEventListener('input', (e) => {
            currentPosition = e.target.value;
            const positions = ['Top', 'Middle', 'Bottom'];
            livePositionValue.textContent = positions[currentPosition - 1];
            updateTextPosition();
        });

function updateAnimationSpeed() {
            const textLength = textDisplay.textContent.length;
            const baseDuration = textLength / 25;
            const speedMultiplier = Math.max(0.1, (101 - currentSpeed) / 10);
            const duration = baseDuration * speedMultiplier;
            textDisplay.style.animationDuration = Math.max(0.5, duration) + 's';
        }

mirrorToggle.addEventListener('click', () => {
            isMirrored = !isMirrored;
            if (isMirrored) {
                mirrorToggle.textContent = '✓ Mirror Mode ON';
                mirrorToggle.style.background = '#4CAF50';
            } else {
                mirrorToggle.textContent = '🔄 Toggle Mirror Mode (for selfie camera)';
                mirrorToggle.style.background = '#2196F3';
            }
        });

startBtn.addEventListener('click', () => {
            const script = scriptInput.value.trim();
            if (!script) {
                alert('Please enter some text first!');
                return;
            }

textDisplay.textContent = script;
            textDisplay.style.fontSize = currentSize + 'px';
            
            if (isMirrored) {
                scrollContainer.classList.add('mirrored');
                textDisplay.style.transform = 'scaleX(-1)';
            } else {
                scrollContainer.classList.remove('mirrored');
                textDisplay.style.transform = 'none';
            }

liveSpeedSlider.value = currentSpeed;
            liveSpeedValue.textContent = currentSpeed;
            
            livePositionSlider.value = currentPosition;
            const positions = ['Top', 'Middle', 'Bottom'];
            livePositionValue.textContent = positions[currentPosition - 1];
            
            updateAnimationSpeed();
            updateTextPosition();

setupScreen.style.display = 'none';
            teleprompterScreen.style.display = 'block';
            
            textDisplay.style.animationPlayState = 'running';
            isPaused = false;
            pauseBtn.textContent = '⏸ Pause';
        });

pauseBtn.addEventListener('click', () => {
            if (isPaused) {
                textDisplay.style.animationPlayState = 'running';
                pauseBtn.textContent = '⏸ Pause';
                quickPauseBtn.textContent = '⏸';
                isPaused = false;
            } else {
                textDisplay.style.animationPlayState = 'paused';
                pauseBtn.textContent = '▶ Resume';
                quickPauseBtn.textContent = '▶';
                isPaused = true;
            }
        });

quickPauseBtn.addEventListener('click', () => {
            pauseBtn.click();
        });

restartBtn.addEventListener('click', () => {
            textDisplay.style.animation = 'none';
            setTimeout(() => {
                textDisplay.style.animation = '';
                updateAnimationSpeed();
                textDisplay.style.animationPlayState = 'running';
                isPaused = false;
                pauseBtn.textContent = '⏸ Pause';
                quickPauseBtn.textContent = '⏸';
            }, 10);
        });

quickRestartBtn.addEventListener('click', () => {
            restartBtn.click();
        });

stopBtn.addEventListener('click', () => {
            setupScreen.style.display = 'block';
            teleprompterScreen.style.display = 'none';
            textDisplay.style.animationPlayState = 'paused';
            isPaused = false;
        });

quickStopBtn.addEventListener('click', () => {
            stopBtn.click();
        });