<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YouTubeGen Pro - لوحة التحكم</title>
    <!-- إضافة Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- إضافة خط Tajawal من Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa;
            font-family: 'Tajawal', sans-serif;
        }
        h1, h2 {
            color: #0d6efd;
        }
        .form-container {
            background-color: #ffffff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }
        .btn-primary {
            background-color: #0d6efd;
            border-color: #0d6efd;
        }
        .btn-primary:hover {
            background-color: #0b5ed7;
            border-color: #0b5ed7;
        }
        .log-area {
            background-color: #f4f4f4;
            font-family: monospace;
            font-size: 14px;
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #ddd;
            height: 300px;
            overflow-y: auto;
        }
    </style>
</head>
<body>
    <div class="container mt-5">
        <!-- عرض رسائل flash -->
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    <div class="alert alert-{{ category }}">
                        {{ message }}
                    </div>
                {% endfor %}
            {% endif %}
        {% endwith %}

        <h1 class="text-center mb-4">YouTubeGen Pro - لوحة التحكم</h1>

        <!-- تبويب الإعدادات النصية والمرئية -->
        <div class="form-container">
            <h2 class="mb-3">الإعدادات النصية والمرئية</h2>
            <form id="combinedSettingsForm" action="/update_settings" method="POST">
                <div class="mb-3">
                    <label for="topic" class="form-label">📝 موضوع الفيديو:</label>
                    <textarea class="form-control" id="topic" name="topic" rows="3" required>{{ env_data.get('TOPIC', '') }}</textarea>
                </div>
                <div class="mb-3">
                    <label for="word_count" class="form-label">🔢 عدد الكلمات:</label>
                    <input type="number" class="form-control" id="word_count" name="word_count" value="{{ env_data.get('WORD_COUNT', '6000') }}" required>
                </div>
                <div class="mb-3">
                    <label for="text_type" class="form-label">🖋️ نوع النص:</label>
                    <select class="form-select" id="text_type" name="text_type" required>
                        <option value="حكاية" {% if env_data.get('TEXT_TYPE') == 'حكاية' %}selected{% endif %}>حكاية</option>
                        <option value="مقال" {% if env_data.get('TEXT_TYPE') == 'مقال' %}selected{% endif %}>مقال</option>
                        <option value="وصف" {% if env_data.get('TEXT_TYPE') == 'وصف' %}selected{% endif %}>وصف</option>
                        <option value="قصة" {% if env_data.get('TEXT_TYPE') == 'قصة' %}selected{% endif %}>قصة</option>
                        <option value="أفكار" {% if env_data.get('TEXT_TYPE') == 'أفكار' %}selected{% endif %}>أفكار</option>
                        <option value="تحليل" {% if env_data.get('TEXT_TYPE') == 'تحليل' %}selected{% endif %}>تحليل</option>
                    </select>
                </div>
                <div class="mb-3">
                    <label for="language_type" class="form-label">🌐 لغة النص:</label>
                    <select class="form-select" id="language_type" name="language_type" required>
                        <option value="ar" {% if env_data.get('LANGUAGE_TYPE') == 'ar' %}selected{% endif %}>العربية</option>
                        <option value="en" {% if env_data.get('LANGUAGE_TYPE') == 'en' %}selected{% endif %}>الإنجليزية</option>
                        <option value="fr" {% if env_data.get('LANGUAGE_TYPE') == 'fr' %}selected{% endif %}>الفرنسية</option>
                    </select>
                </div>
                <div class="mb-3">
                    <label for="style_number" class="form-label">🎨 اختر الاستايل:</label>
                    <select class="form-select" id="style_number" name="style_number" required>
                        <option value="1" {% if env_data.get('STYLE_NUMBER') == '1' %}selected{% endif %}>1 - 3D Render with High Detail</option>
                        <option value="2" {% if env_data.get('STYLE_NUMBER') == '2' %}selected{% endif %}>2 - Cyberpunk with Neon Lights</option>
                        <option value="3" {% if env_data.get('STYLE_NUMBER') == '3' %}selected{% endif %}>3 - Realistic Photo</option>
                        <option value="4" {% if env_data.get('STYLE_NUMBER') == '4' %}selected{% endif %}>4 - 3D Cartoon</option>
                        <option value="5" {% if env_data.get('STYLE_NUMBER') == '5' %}selected{% endif %}>5 - Vintage Watercolor Art</option>
                        <option value="6" {% if env_data.get('STYLE_NUMBER') == '6' %}selected{% endif %}>6 - Dark Fantasy with Dramatic Lighting</option>
                        <option value="7" {% if env_data.get('STYLE_NUMBER') == '7' %}selected{% endif %}>7 - Sci-Fi with Futuristic Technology</option>
                        <option value="8" {% if env_data.get('STYLE_NUMBER') == '8' %}selected{% endif %}>8 - Steampunk with Victorian Aesthetic</option>
                        <option value="9" {% if env_data.get('STYLE_NUMBER') == '9' %}selected{% endif %}>9 - Minimalist with Clean Lines</option>
                        <option value="10" {% if env_data.get('STYLE_NUMBER') == '10' %}selected{% endif %}>10 - Nature Photography with Soft Lighting</option>
                        <option value="11" {% if env_data.get('STYLE_NUMBER') == '11' %}selected{% endif %}>11 - Fantasy Creature Design</option>
                        <option value="12" {% if env_data.get('STYLE_NUMBER') == '12' %}selected{% endif %}>12 - Retro 80s Neon Art</option>
                    </select>
                </div>
                <div class="mb-3">
                    <label for="size_number" class="form-label">📏 اختر حجم الفيديو:</label>
                    <select class="form-select" id="size_number" name="size_number" required>
                        <option value="1" {% if env_data.get('SIZE_NUMBER') == '1' %}selected{% endif %}>1 - العرض الأفقي (1920x1080) - ستاندرد</option>
                        <option value="2" {% if env_data.get('SIZE_NUMBER') == '2' %}selected{% endif %}>2 - العرض الرأسي (1080x1920) - شورت</option>
                    </select>
                </div>
                <div class="mb-3">
                    <label for="voice_number" class="form-label">🔊 رقم الصوت:</label>
                    <input type="number" class="form-control" id="voice_number" name="voice_number" value="{{ env_data.get('VOICE_NUMBER', '1') }}" required>
                </div>
                <div class="mb-3">
                    <label for="speed" class="form-label">⚡️ سرعة الصوت:</label>
                    <input type="range" class="form-range" id="speed" name="speed" min="50" max="200" value="{{ env_data.get('SPEED', '90') }}">
                    <span id="speedValue">{{ (env_data.get('SPEED', '90') | float) }}</span>
                </div>
                <button type="submit" class="btn btn-primary w-100">💾 حفظ الإعدادات النصية والمرئية</button>
            </form>
        </div>

        <!-- تبويب التحكم بالسكربتات -->
        <div class="form-container">
            <h2 class="mb-3">التحكم بالسكربتات</h2>
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>✅ تشغيل</th>
                        <th>📝 اسم السكربت</th>
                        <th>📁 مسار السكربت</th>
                    </tr>
                </thead>
                <tbody id="scriptTableBody">
                    {% set scripts = [
                        {"name": "1 TOPICE GENERATE TEXT.py"},
                        {"name": "2 Prompts.py"},
                        {"name": "3 Generate Images.py"},
                        {"name": "4 Generate Tashkeel.py"},
                        {"name": "5 Generate Audio.py"},
                        {"name": "6 Generate Video 1.py"},
                        {"name": "7 Generate Video Translate 2.py"},
                        {"name": "8 Generate Video Final 3.py"},
                        {"name": "9 UPLOAD VIDEO YOUTUBE.py"}
                    ] %}
                    {% for script in scripts %}
                    <tr>
                        <td>
                            <form action="{{ url_for('run_script', script_name=script.name) }}" method="POST">
                                <button type="submit" class="btn btn-primary">تشغيل</button>
                            </form>
                        </td>
                        <td>{{ script.name }}</td>
                        <td>D:/YoutubeGen Pro Online/Models/{{ script.name }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- سجل العمليات -->
        <div class="form-container">
            <h2 class="mb-3">سجل العمليات</h2>
            <div class="log-area" id="logArea"></div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // دالة لتحديث قيمة سرعة الصوت
        document.getElementById('speed').addEventListener('input', function () {
            const speedValue = (this.value / 100).toFixed(2);
            document.getElementById('speedValue').textContent = speedValue;
        });

        // دالة لتسجيل الرسائل في سجل العمليات (يمكن تخصيصها حسب الحاجة)
        function log(message, color = 'black') {
            const logArea = document.getElementById('logArea');
            const logEntry = document.createElement('div');
            logEntry.innerHTML = `<span style="color:${color};">${message}</span>`;
            logArea.appendChild(logEntry);
            logArea.scrollTop = logArea.scrollHeight;
        }
    </script>
</body>
</html> عدل هذا الكود ليقوم بحفظ البيانات فورياداخل ملف الكونفج  وعرضها فى نفس الصفحة وقوم بعرض سجل العمليات فى الشاشة اسفل الحفظ وتفعيل زر مسح الشاشة وعمل زر تشغيل كل الاسكريبتات دفعة واحدة