<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Teleprompter</title>
    <style>
        body {
            font-family: 'Vazir', sans-serif;
            background-color: #171717;
            color: #bababa;
            direction: rtl;
            margin: 0;
            padding: 0;
        }

        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background-color: #212121;
            padding: 20px;
        }

        .input-area, .controls {
            width: 100%;
            max-width: 600px;
            margin-bottom: 20px;
        }

        textarea {
            width: 100%;
            height: 150px;
            background-color: #2f2f2f;
            color: #bababa;
            border: 1px solid #3c3c3c;
            border-radius: 5px;
            padding: 10px;
            resize: none;
            font-size: 16px;
        }

        .controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        button {
            background-color: #3c3c3c;
            color: #bababa;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }

        button:hover {
            background-color: #4d4d4d;
        }

        .slider {
            width: 100%;
            max-width: 200px;
        }

        .teleprompter {
            display: none;
            width: 100%;
            max-width: 600px;
            height: 300px;
            background-color: #2f2f2f;
            border: 1px solid #3c3c3c;
            border-radius: 5px;
            padding: 20px;
            overflow-y: auto;
            font-size: 24px;
        }

        .highlight {
            color: white;
        }

        @media (min-width: 768px) {
            .teleprompter {
                height: 400px;
                font-size: 28px;
            }
        }

        @media (min-width: 1024px) {
            .teleprompter {
                height: 500px;
                font-size: 32px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="input-area">
            <textarea id="text-input" placeholder="متن خود را وارد کنید."></textarea>
        </div>
        <div class="controls">
            <button id="start-btn">شروع</button>
            <button id="stop-btn">توقف</button>
            <input type="range" id="speed-slider" class="slider" min="1" max="10" value="5">
        </div>
        <div id="teleprompter" class="teleprompter"></div>
    </div>

    <script>
        const textInput = document.getElementById('text-input');
        const startBtn = document.getElementById('start-btn');
        const stopBtn = document.getElementById('stop-btn');
        const speedSlider = document.getElementById('speed-slider');
        const teleprompter = document.getElementById('teleprompter');

        let interval;
        let words;
        let currentIndex = 0;

        startBtn.addEventListener('click', () => {
            const text = textInput.value.trim();
            if (text) {
                words = text.split(' ');
                currentIndex = 0;
                teleprompter.innerHTML = '';
                teleprompter.style.display = 'block';
                startPrompter();
            }
        });

        stopBtn.addEventListener('click', stopPrompter);

        function startPrompter() {
            const speed = 1000 / speedSlider.value;
            interval = setInterval(() => {
                if (currentIndex < words.length) {
                    const word = document.createElement('span');
                    word.textContent = words[currentIndex] + ' ';
                    if (currentIndex % 7 === 0) {
                        word.classList.add('highlight');
                    }
                    teleprompter.appendChild(word);
                    teleprompter.scrollTop = teleprompter.scrollHeight;
                    currentIndex++;
                } else {
                    clearInterval(interval);
                }
            }, speed);
        }

        function stopPrompter() {
            clearInterval(interval);
            teleprompter.innerHTML = '';
            teleprompter.style.display = 'none';
        }
    </script>
</body>
</html>

آیا به دنبال راهی ساده و حرفه‌ای برای تولید محتوا جلوی دوربین هستید؟ اسکریپت تلپرامتر ما دقیقاً همون چیزیه که دنبالش می‌گشتید!

این اسکریپت به شما کمک می‌کنه که بدون نگرانی از فراموش کردن متن، به راحتی و با اعتماد به نفس جلوی دوربین صحبت کنید. به جای اینکه متن رو روی کاغذ بنویسید و زیر دوربین قرار بدید، می‌تونید از این ابزار فوق‌العاده استفاده کنید. کافیه متن خودتون رو توی این اسکریپت وارد کنید، سرعت خوندن رو تنظیم کنید و با خیال راحت شروع کنید به ضبط ویدیو.

ویژگی‌ها:
طراحی مینیمال و شیک: این اسکریپت با استفاده از رنگ‌های ساده و شیک طراحی شده که چشم رو خسته نمی‌کنه و تمرکز شما رو روی متن نگه می‌داره.
ریسپانسیو بودن: چه روی موبایل، چه تبلت و چه دسکتاپ، این اسکریپت به خوبی کار می‌کنه و سایز فونت‌ها متناسب با اندازه صفحه‌نمایش تنظیم می‌شه.
 

تلپرامتر ساده و کاربرپسنده مخصوص یوتیوبری و تولید ویدیوهای خفن

اسکریپت تلپرامپتر حرفه‌ای برای ساخت ویدیو یوتوب

اسکریپت جدید تلپرامتر حرفه‌ای برای تولید محتوا ویدیو یوتیوب و آپارتت

تله پرامپتر برای ساخت ویدیو آموزشی

تلپرامتر حرفه‌ای برای تولید محتوا ویدیویی

تلپرامتر برای تولید محتوا ویدیویی

تلپرامتر حرفه‌ای برای تولید ویدیو

teleprompter ,color ,width ,const ,border ,background ,background color ,document getelementbyid ,font size ,width 100% ,border radius ,teleprompter innerhtml teleprompter ,innerhtml teleprompter style ,teleprompter style display ,3c3c3c border radius
مشخصات
آخرین مطالب این وبلاگ