Update index.html

index.html

@@ -33,6 +33,7 @@
             flex-direction: column;
         }
 
+        /* Animated BG */
         .bg-mesh {
             position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;
             background: radial-gradient(circle at 50% 50%, #1e1b4b 0%, #0f172a 100%);
@@ -54,7 +55,7 @@
             backdrop-filter: blur(10px);
             border-bottom: 1px solid var(--border);
             display: flex;
-            justify-content: space-between;
+            justify-content: center;
             align-items: center;
             z-index: 100;
             position: sticky;
@@ -67,12 +68,12 @@
             display: flex;
             flex-direction: column;
             padding: 20px;
-            max-width: 800px; /* متمرکزتر برای حالت موبایل/دسکتاپ یکسره */
+            max-width: 800px;
             margin: 0 auto;
             width: 100%;
         }
 
-        /* --- VIEWS --- */
+        /* Views */
         .view { display: none; animation: fadeIn 0.4s ease; }
         .view.active { display: block; }
         @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@@ -92,7 +93,7 @@
             border-radius: 14px;
             border: none;
             font-weight: 800;
-            font-size: 1rem;
+            font-size: 1.1rem;
             cursor: pointer;
             transition: 0.2s;
             display: flex;
@@ -107,6 +108,7 @@
         }
         .btn-primary:active { transform: scale(0.98); }
         
+        /* Uploader */
         .upload-zone {
             border: 2px dashed var(--border);
             border-radius: 20px;
@@ -122,16 +124,16 @@
         .upload-zone:hover { border-color: var(--primary); background: rgba(99, 102, 241, 0.05); }
         .upload-icon { font-size: 4rem; margin-bottom: 20px; color: var(--text-muted); }
 
-        /* --- EDITOR ELEMENTS --- */
+        /* Editor & Settings */
         .segment-container {
             max-height: 400px;
             overflow-y: auto;
             padding-right: 5px;
-            margin-bottom: 20px;
-            background: rgba(0,0,0,0.2);
+            margin-bottom: 25px;
+            border: 1px solid var(--border);
             border-radius: 12px;
             padding: 10px;
-            border: 1px solid var(--border);
+            background: rgba(0,0,0,0.2);
         }
 
         .segment-row {
@@ -140,7 +142,6 @@
             padding: 10px;
             margin-bottom: 10px;
             border-right: 3px solid transparent;
-            transition: 0.2s;
         }
         .segment-row:focus-within { border-right-color: var(--accent); background: rgba(255,255,255,0.06); }
         
@@ -152,33 +153,21 @@
             border: 1px solid var(--border);
             border-radius: 8px;
             color: #fff;
-            font-size: 1rem;
+            font-size: 1.1rem;
             font-family: inherit;
             resize: vertical;
             padding: 10px;
-            min-height: 50px;
+            min-height: 60px;
             line-height: 1.5;
         }
-        .seg-input:focus {
-            border-color: var(--primary);
-            background: rgba(0, 0, 0, 0.5);
-        }
+        .seg-input:focus { border-color: var(--primary); background: rgba(0, 0, 0, 0.5); }
 
         .control-group { margin-bottom: 18px; }
         .control-label { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 8px; }
         
-        input[type="range"] {
-            width: 100%; height: 6px; background: var(--border);
-            border-radius: 5px; appearance: none;
-        }
-        input[type="range"]::-webkit-slider-thumb {
-            appearance: none; width: 20px; height: 20px;
-            background: var(--primary); border-radius: 50%; cursor: pointer;
-        }
-        input[type="color"] {
-            width: 100%; height: 40px; border: none; border-radius: 8px;
-            cursor: pointer; background: transparent;
-        }
+        input[type="range"] { width: 100%; height: 6px; background: var(--border); border-radius: 5px; appearance: none; }
+        input[type="range"]::-webkit-slider-thumb { appearance: none; width: 20px; height: 20px; background: var(--primary); border-radius: 50%; cursor: pointer; }
+        input[type="color"] { width: 100%; height: 40px; border: none; border-radius: 8px; cursor: pointer; background: transparent; }
 
         .style-chips { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 5px; }
         .chip {
@@ -199,9 +188,8 @@
             transition: 0.1s; line-height: 1.4; max-width: 80%;
         }
 
-        /* --- RESULT SECTION --- */
         #inlineResult {
-            margin-top: 25px;
+            margin-top: 30px;
             border-top: 2px dashed var(--border);
             padding-top: 20px;
             text-align: center;
@@ -212,12 +200,13 @@
         
         .result-video { width: 100%; border-radius: 12px; margin-top: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
         .dl-btn {
-            display: inline-block; margin-top: 15px; padding: 12px 30px;
+            display: inline-block; margin-top: 15px; padding: 15px 30px;
             background: var(--success); color: white; text-decoration: none;
-            border-radius: 10px; font-weight: bold;
+            border-radius: 12px; font-weight: bold; font-size: 1.1rem;
+            box-shadow: 0 5px 20px rgba(16, 185, 129, 0.3);
         }
 
-        /* LOADER */
+        /* Loader */
         .loader-screen {
             position: fixed; top:0; left:0; width:100%; height:100%;
             background: rgba(15, 23, 42, 0.95); z-index: 1000;
@@ -239,7 +228,7 @@
     </div>
 
     <header class="app-header">
-        <div class="brand"><i class="fa-solid fa-bolt"></i> SubMaster</div>
+        <div class="brand"><i class="fa-solid fa-wand-magic-sparkles"></i> SubMaster</div>
     </header>
 
     <div class="app-body">
@@ -258,10 +247,12 @@
             </div>
         </div>
 
-        <!-- VIEW 2: SINGLE PAGE EDITOR -->
+        <!-- VIEW 2: MAIN EDITOR -->
         <div id="view-editor" class="view">
             
-            <div class="settings-panel card">
+            <div class="card">
+                
+                <!-- 1. SETTINGS & PREVIEW -->
                 <h2 style="color: var(--primary); margin-top:0;">🎨 تنظیمات ظاهری</h2>
                 
                 <div class="preview-box">
@@ -307,19 +298,18 @@
                     <input type="range" id="rngPos" min="10" max="600" value="150" oninput="updatePreview()">
                 </div>
 
-                <hr style="border-color: var(--border); margin: 20px 0;">
+                <hr style="border-color: var(--border); margin: 30px 0;">
                 
-                <!-- SUBTITLE LIST (MOVED HERE ABOVE BUTTON) -->
-                <h2 style="color: var(--text-main);">📝 ویرایش زیرنویس‌ها</h2>
-                <div id="segmentsList" class="segment-container">
-                    <!-- Segments will load here -->
-                </div>
+                <!-- 2. EDITOR LIST -->
+                <h2 style="color: var(--text-main);">📝 ویرایش متن‌ها</h2>
+                <div id="segmentsList" class="segment-container"></div>
 
+                <!-- 3. ACTION BUTTON -->
                 <button class="btn btn-primary" onclick="startRender()">
-                    <i class="fa-solid fa-wand-magic-sparkles"></i> ساخت ویدیو نهایی
+                    <i class="fa-solid fa-bolt"></i> ساخت ویدیو نهایی
                 </button>
 
-                <!-- INLINE RESULT AREA (MOVED BELOW BUTTON) -->
+                <!-- 4. RESULT AREA -->
                 <div id="inlineResult">
                     <h3 style="color: var(--success); margin:0;">✅ ویدیو آماده شد!</h3>
                     <video id="finalPlayer" controls class="result-video"></video>
@@ -342,6 +332,27 @@
             }
         };
 
+        // Storage Keys
+        const STORAGE_KEYS = ['colorMain', 'colorOutline', 'rngSize', 'rngPos'];
+
+        // Load Settings
+        document.addEventListener('DOMContentLoaded', () => {
+            STORAGE_KEYS.forEach(key => {
+                const val = localStorage.getItem(key);
+                if(val) {
+                    document.getElementById(key).value = val;
+                    if(key === 'rngSize') document.getElementById('lblSize').innerText = val;
+                }
+            });
+        });
+
+        // Save Settings
+        STORAGE_KEYS.forEach(key => {
+            document.getElementById(key).addEventListener('input', (e) => {
+                localStorage.setItem(key, e.target.value);
+            });
+        });
+
         // --- UPLOAD ---
         async function handleUpload() {
             const file = document.getElementById('fileIn').files[0];
@@ -366,6 +377,8 @@
                 document.getElementById('view-upload').classList.remove('active');
                 document.getElementById('view-editor').classList.add('active');
                 updatePreview();
+                
+                window.scrollTo(0, 0);
 
             } catch(e) {
                 alert("Error: " + e.message);
@@ -427,8 +440,8 @@
             
             let font = 'Vazirmatn';
             if(appState.style.font === 'lalezar') font = 'Lalezar';
-            if(appState.style.font === 'roboto') font = 'Arial, sans-serif'; // Web safe fallback for preview
-            if(appState.style.font === 'bangers') font = 'Impact, sans-serif'; 
+            if(appState.style.font === 'roboto') font = 'Arial';
+            if(appState.style.font === 'bangers') font = 'Impact';
             
             document.getElementById('lblSize').innerText = size;