Update app.py

app.py

@@ -20,7 +20,7 @@ print("⏳ Loading AI Model...")
 model = WhisperModel("small", device="cpu", compute_type="int8")
 print("✅ AI Model Loaded!")
 
-# --- مدل‌های ورودی (Schema) ---
+# --- مدل‌های ورودی ---
 class Segment(BaseModel):
     start: float
     end: float
@@ -29,29 +29,23 @@ class Segment(BaseModel):
 class StyleOptions(BaseModel):
     font: str
     font_size: int
-    primary_color: str    # Hex (#RRGGBB)
-    outline_color: str    # Hex
-    back_type: str        # 'outline', 'box_transparent', 'box_solid'
+    primary_color: str
+    outline_color: str
+    back_type: str
     outline_width: float
-    margin_v: int         # فاصله از پایین
+    margin_v: int
 
 class BurnPayload(BaseModel):
     file_id: str
     style: StyleOptions
     segments: List[Segment]
 
-# --- توابع تبدیل رنگ و زمان ---
+# --- توابع تبدیل ---
 
 def hex_to_ass_color(hex_color, alpha="00"):
-    """
-    تبدیل رنگ وب (#RRGGBB) به فرمت عجیب ASS (&HAlphaBlueGreenRed)
-    """
     hex_color = hex_color.lstrip('#')
-    if len(hex_color) != 6:
-        return "&H00FFFFFF"
-    
+    if len(hex_color) != 6: return "&H00FFFFFF"
     r, g, b = hex_color[0:2], hex_color[2:4], hex_color[4:6]
-    # فرمت ASS برعکس است: Blue Green Red
     return f"&H{alpha}{b}{g}{r}"
 
 def format_timestamp(seconds: float):
@@ -64,26 +58,19 @@ def format_timestamp(seconds: float):
     return f"{hours:01d}:{minutes:02d}:{secs:02d}.{centisecs:02d}"
 
 def generate_ass_header(style: StyleOptions):
-    """تولید هدر فایل زیرنویس بر اساس تنظیمات دقیق کاربر"""
-    
     font_name = "Vazirmatn" if style.font == "vazir" else "Lalezar"
-    
     primary_c = hex_to_ass_color(style.primary_color, "00")
-    outline_c = hex_to_ass_color(style.outline_color, "00")
     
-    # تنظیمات پس‌زمینه
-    border_style = "1" # 1=Outline, 3=Box
+    border_style = "1"
     back_color = "&H00000000"
+    outline_c = hex_to_ass_color(style.outline_color, "00")
     
-    if style.back_type == "outline":
-        border_style = "1"
-        back_color = "&H00000000" # مهم نیست
-    elif style.back_type == "box_transparent":
+    if style.back_type == "box_transparent":
         border_style = "3"
-        outline_c = "&H80000000" # مشکی ۵۰ درصد شفاف
+        outline_c = "&H80000000"
     elif style.back_type == "box_solid":
         border_style = "3"
-        outline_c = hex_to_ass_color(style.outline_color, "00") # رنگ کادر کامل
+        outline_c = hex_to_ass_color(style.outline_color, "00")
 
     header = f"""[Script Info]
 ScriptType: v4.00+
@@ -102,13 +89,11 @@ Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
 
 def create_ass_file(payload: BurnPayload, output_path):
     content = generate_ass_header(payload.style)
-    
     with open(output_path, "w", encoding="utf-8") as f:
         f.write(content)
         for seg in payload.segments:
             start = format_timestamp(seg.start)
             end = format_timestamp(seg.end)
-            # حذف کاراکترهای مزاحم
             clean_text = seg.text.strip().replace("\n", " ")
             f.write(f"Dialogue: 0,{start},{end},Default,,0,0,0,,{clean_text}\n")
 
@@ -119,16 +104,10 @@ async def upload_video(file: UploadFile = File(...)):
     try:
         file_id = str(uuid.uuid4())[:8]
         file_path = f"{TEMP_DIR}/{file_id}_raw.mp4"
+        with open(file_path, "wb") as f: shutil.copyfileobj(file.file, f)
         
-        with open(file_path, "wb") as f:
-            shutil.copyfileobj(file.file, f)
-            
-        # پردازش هوش مصنوعی
         segments_gen, _ = model.transcribe(file_path, language="fa", beam_size=5)
-        
-        segments = []
-        for s in segments_gen:
-            segments.append({"start": s.start, "end": s.end, "text": s.text.strip()})
+        segments = [{"start": s.start, "end": s.end, "text": s.text.strip()} for s in segments_gen]
             
         return {"file_id": file_id, "segments": segments}
     except Exception as e:
@@ -142,23 +121,15 @@ async def burn_video(payload: BurnPayload):
         output_path = f"{TEMP_DIR}/{payload.file_id}_final.mp4"
         
         if not os.path.exists(input_path):
-            return JSONResponse(status_code=404, content={"error": "فایل منقضی شده است. لطفا دوباره آپلود کنید."})
+            return JSONResponse(status_code=404, content={"error": "فایل منقضی شده است."})
             
-        # 1. ساخت فایل ASS با استایل دقیق
         create_ass_file(payload, ass_path)
         
-        # 2. رندر نهایی
-        # از ultrafast استفاده می‌کنیم تا کاربر معطل نشود
         cmd = [
-            "ffmpeg", "-y",
-            "-i", input_path,
-            "-vf", f"ass={ass_path}",
-            "-c:v", "libx264", "-preset", "ultrafast", "-crf", "26",
-            "-c:a", "copy",
-            output_path
+            "ffmpeg", "-y", "-i", input_path, "-vf", f"ass={ass_path}",
+            "-c:v", "libx264", "-preset", "ultrafast", "-crf", "26", "-c:a", "copy", output_path
         ]
         subprocess.run(cmd, check=True)
-        
         return {"url": f"/download/{payload.file_id}_final.mp4"}
     except Exception as e:
         return JSONResponse(status_code=500, content={"error": str(e)})
@@ -169,7 +140,7 @@ async def download(filename: str):
     if os.path.exists(path): return FileResponse(path)
     return JSONResponse(status_code=404, content={"error": "File not found"})
 
-# --- رابط کاربری حرفه‌ای (Frontend) ---
+# --- UI ---
 
 @app.get("/", response_class=HTMLResponse)
 async def ui():
@@ -178,150 +149,193 @@ async def ui():
 <html lang="fa" dir="rtl">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>استودیو زیرنویس پرو</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>زیرنویس‌ساز موبایل</title>
     <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;600;800&display=swap" rel="stylesheet">
     <style>
-        :root { --primary: #3A86FF; --accent: #FF006E; --bg: #F8F9FA; --card: #fff; --text: #212529; }
-        * { box-sizing: border-box; outline: none; }
-        body { font-family: 'Vazirmatn', sans-serif; background: var(--bg); color: var(--text); margin: 0; padding: 20px; }
-        
-        .main-container { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 20px; }
-        @media(min-width: 768px) { .main-container { grid-template-columns: 1.2fr 0.8fr; } }
-        
-        .card { background: var(--card); padding: 20px; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.05); }
-        h2 { margin-top: 0; font-size: 1.2rem; color: var(--primary); border-bottom: 2px solid #f1f3f5; padding-bottom: 10px; }
+        :root { 
+            --primary: #4f46e5; 
+            --bg: #f3f4f6; 
+            --card: #ffffff; 
+            --text: #1f2937; 
+            --border: #e5e7eb;
+        }
+        * { box-sizing: border-box; outline: none; -webkit-tap-highlight-color: transparent; }
+        body { 
+            font-family: 'Vazirmatn', sans-serif; 
+            background: var(--bg); 
+            color: var(--text); 
+            margin: 0; 
+            padding: 15px; 
+            font-size: 14px;
+        }
+        .main-container { max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: 15px; }
+        .card { background: var(--card); padding: 20px; border-radius: 16px; box-shadow: 0 2px 10px rgba(0,0,0,0.03); }
+        h2 { margin-top: 0; font-size: 1.1rem; color: var(--primary); border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 15px; }
         
         /* Uploader */
-        .upload-box { border: 2px dashed #dee2e6; padding: 40px; text-align: center; border-radius: 12px; cursor: pointer; transition: 0.3s; }
-        .upload-box:hover { border-color: var(--primary); background: #e7f5ff; }
+        .upload-box { border: 2px dashed #c7d2fe; padding: 30px 10px; text-align: center; border-radius: 12px; background: #eef2ff; transition: 0.2s; }
+        .upload-box:active { background: #e0e7ff; border-color: var(--primary); }
+        .upload-icon { font-size: 2.5rem; margin-bottom: 10px; display: block; }
         
-        /* Editor List */
-        .segment-list { max-height: 500px; overflow-y: auto; padding-left: 5px; }
-        .segment-item { background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 10px; padding: 10px; margin-bottom: 10px; display: flex; gap: 10px; align-items: center; }
-        .time-tag { font-size: 0.75rem; background: #212529; color: #fff; padding: 2px 6px; border-radius: 4px; height: fit-content; }
-        .text-edit { width: 100%; border: 1px solid transparent; background: transparent; font-family: inherit; font-size: 1rem; padding: 5px; }
+        /* Editor */
+        .segment-list { max-height: 350px; overflow-y: auto; padding: 5px; background: #f9fafb; border-radius: 8px; border: 1px solid var(--border); }
+        .segment-item { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 12px; margin-bottom: 10px; }
+        .time-tag { font-size: 0.7rem; background: #e5e7eb; color: #374151; padding: 2px 6px; border-radius: 4px; display: inline-block; margin-bottom: 5px; }
+        .text-edit { width: 100%; border: none; background: transparent; font-family: inherit; font-size: 1rem; padding: 0; resize: none; border-bottom: 1px dashed #ccc; }
         .text-edit:focus { border-bottom: 1px solid var(--primary); }
 
-        /* Controls */
+        /* Settings */
+        .settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
         .control-group { margin-bottom: 15px; }
-        .control-group label { display: block; font-size: 0.85rem; font-weight: bold; margin-bottom: 5px; color: #495057; }
-        .row { display: flex; gap: 10px; }
-        
-        input[type="color"] { width: 100%; height: 40px; border: none; cursor: pointer; padding: 0; border-radius: 8px; }
-        input[type="range"] { width: 100%; }
-        select { width: 100%; padding: 8px; border-radius: 8px; border: 1px solid #ced4da; font-family: inherit; }
+        .control-group label { display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: 6px; color: #4b5563; }
+        input[type="color"] { width: 100%; height: 45px; border: none; border-radius: 10px; padding: 2px; background: #fff; border: 1px solid var(--border); }
+        input[type="range"] { width: 100%; accent-color: var(--primary); }
+        select { width: 100%; padding: 12px; border-radius: 10px; border: 1px solid var(--border); font-family: inherit; background: #fff; font-size: 0.9rem; }
         
-        .action-btn { width: 100%; padding: 15px; background: var(--primary); color: white; border: none; border-radius: 12px; font-weight: 800; font-size: 1.1rem; cursor: pointer; transition: 0.2s; margin-top: 20px; }
-        .action-btn:disabled { background: #adb5bd; cursor: wait; }
-        .action-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(58, 134, 255, 0.4); }
+        .action-btn { width: 100%; padding: 16px; background: linear-gradient(135deg, #4f46e5, #4338ca); color: white; border: none; border-radius: 14px; font-weight: 800; font-size: 1.1rem; cursor: pointer; box-shadow: 0 4px 15px rgba(79, 70, 229, 0.3); }
+        .action-btn:active { transform: scale(0.98); }
         
-        .hidden { display: none; }
-        .loader-overlay { position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(255,255,255,0.9); z-index: 999; display: flex; flex-direction: column; justify-content: center; align-items: center; }
-        .spinner { width: 50px; height: 50px; border: 5px solid #f3f3f3; border-top: 5px solid var(--primary); border-radius: 50%; animation: spin 1s linear infinite; }
+        /* Loader */
+        .loader-overlay { position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(255,255,255,0.95); z-index: 999; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 20px; }
+        .spinner { width: 50px; height: 50px; border: 5px solid #e5e7eb; border-top: 5px solid var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; margin-bottom: 20px; }
         @keyframes spin { 100% { transform: rotate(360deg); } }
-        
+
+        /* Result */
         .result-box { text-align: center; }
-        .dl-link { display: inline-block; margin-top: 10px; padding: 10px 20px; background: #06d6a0; color: white; text-decoration: none; border-radius: 8px; font-weight: bold; }
+        video { width: 100%; border-radius: 12px; background: #000; margin-top: 10px; }
+        .dl-link { display: block; margin-top: 15px; padding: 15px; background: #10b981; color: white; text-decoration: none; border-radius: 12px; font-weight: bold; font-size: 1.1rem; }
+
+        .hidden { display: none !important; }
+        .disabled-panel { opacity: 0.6; pointer-events: none; filter: grayscale(0.5); }
     </style>
 </head>
 <body>
 
-<div id="mainLoader" class="loader-overlay hidden">
+<div id="mainLoader" class="loader-overlay" style="display: none;">
     <div class="spinner"></div>
-    <h3 id="loaderText" style="margin-top: 15px;">در حال پردازش...</h3>
+    <h3 id="loaderText">در حال پردازش...</h3>
+    <p style="color:#666; font-size:0.9rem;">لطفاً صفحه را نبندید</p>
 </div>
 
 <div class="main-container">
-    <!-- ستون راست: ویرایشگر متن -->
-    <div class="card">
-        <h2>📝 ویرایش متن‌ها</h2>
-        
-        <div id="uploadSection">
-            <div class="upload-box" onclick="document.getElementById('videoInput').click()">
-                <div style="font-size: 3rem;">📤</div>
-                <p>کلیک کنید یا ویدیو را اینجا رها کنید</p>
-                <input type="file" id="videoInput" hidden accept="video/*" onchange="uploadVideo()">
-            </div>
+    
+    <div class="card" id="cardUpload">
+        <h2>1. انتخاب ویدیو</h2>
+        <div class="upload-box" onclick="document.getElementById('videoInput').click()">
+            <span class="upload-icon">📹</span>
+            <p id="uploadMsg">ویدیو را از گالری انتخاب کنید</p>
+            <input type="file" id="videoInput" hidden accept="video/*" onchange="uploadVideo()">
         </div>
+    </div>
 
-        <div id="editorSection" class="hidden">
-            <div class="segment-list" id="segmentsContainer"></div>
-        </div>
+    <div class="card hidden" id="cardEditor">
+        <h2>2. ویرایش متن‌ها</h2>
+        <div class="segment-list" id="segmentsContainer"></div>
     </div>
 
-    <!-- ستون چپ: تنظیمات گرافیکی -->
-    <div class="card" id="settingsPanel" style="opacity: 0.5; pointer-events: none;">
-        <h2>🎨 تنظیمات ظاهری</h2>
+    <div class="card disabled-panel" id="cardSettings">
+        <h2>3. تنظیمات ظاهری</h2>
         
-        <div class="row">
-            <div class="control-group" style="flex:1">
+        <div class="settings-grid">
+            <div class="control-group">
                 <label>رنگ متن</label>
                 <input type="color" id="primaryColor" value="#FFFFFF">
             </div>
-            <div class="control-group" style="flex:1">
-                <label>رنگ حاشیه/کادر</label>
+            <div class="control-group">
+                <label>رنگ کادر</label>
                 <input type="color" id="outlineColor" value="#000000">
             </div>
         </div>
 
         <div class="control-group">
-            <label>حالت کادر</label>
+            <label>استایل کادر</label>
             <select id="backType">
+                <option value="box_solid">کادر پررنگ (هرمزی)</option>
+                <option value="box_transparent">کادر شفاف (سینمایی)</option>
                 <option value="outline">فقط حاشیه (Outline)</option>
-                <option value="box_transparent">کادر مشکی شفاف (سینمایی)</option>
-                <option value="box_solid" selected>کادر رنگی پررنگ (هرمزی)</option>
             </select>
         </div>
 
-        <div class="row">
-            <div class="control-group" style="flex:1">
+        <div class="settings-grid">
+            <div class="control-group">
                 <label>فونت</label>
                 <select id="fontSelect">
+                    <option value="lalezar">لاله زار (ضخیم)</option>
                     <option value="vazir">وزیر (رسمی)</option>
-                    <option value="lalezar">لاله زار (تیتر)</option>
                 </select>
             </div>
+            <div class="control-group">
+                <label>اندازه فونت: <span id="fontSizeVal">60</span></label>
+                <input type="range" id="fontSize" min="30" max="100" value="60" oninput="updateVal('fontSizeVal', this.value)">
+            </div>
         </div>
 
         <div class="control-group">
-            <label>اندازه متن: <span id="fontSizeVal">60</span></label>
-            <input type="range" id="fontSize" min="20" max="120" value="60" oninput="updateVal('fontSizeVal', this.value)">
-        </div>
-
-        <div class="control-group">
-            <label>ضخامت حاشیه: <span id="outlineWidthVal">2</span></label>
-            <input type="range" id="outlineWidth" min="0" max="10" step="0.5" value="2" oninput="updateVal('outlineWidthVal', this.value)">
+            <label>موقعیت عمودی (از پایین): <span id="marginVal">150</span></label>
+            <input type="range" id="marginV" min="50" max="600" value="150" oninput="updateVal('marginVal', this.value)">
         </div>
 
-        <div class="control-group">
-            <label>فاصله از پایین: <span id="marginVal">150</span></label>
-            <input type="range" id="marginV" min="10" max="500" value="150" oninput="updateVal('marginVal', this.value)">
-        </div>
+        <button id="burnBtn" class="action-btn" onclick="burnProcess()">ساخت ویدیو نهایی ✨</button>
+    </div>
 
-        <button id="burnBtn" class="action-btn" onclick="burnProcess()">🔥 ساخت و دانلود</button>
-        
-        <div id="finalSection" class="result-box hidden">
-            <hr>
-            <p>✅ ویدیو آماده شد!</p>
+    <div class="card hidden" id="cardResult">
+        <h2>🎉 ویدیو آماده شد!</h2>
+        <div class="result-box">
+            <video id="previewVideo" controls playsinline></video>
             <a id="downloadLink" class="dl-link" href="#" download>دانلود ویدیو</a>
-            <br>
-            <button onclick="location.reload()" style="margin-top:10px; background:none; border:none; color:#999; cursor:pointer;">شروع مجدد</button>
+            <button onclick="location.reload()" style="margin-top:20px; background:none; border:none; color:#6b7280; padding:10px;">شروع دوباره</button>
         </div>
     </div>
+
 </div>
 
 <script>
     let globalFileId = null;
     let globalSegments = [];
 
+    // --- مدیریت حافظه مرورگر (LocalStorage) ---
+    const settingIds = ['primaryColor', 'outlineColor', 'backType', 'fontSelect', 'fontSize', 'marginV'];
+
+    // لود کردن تنظیمات هنگام باز شدن صفحه
+    document.addEventListener('DOMContentLoaded', () => {
+        settingIds.forEach(id => {
+            const savedVal = localStorage.getItem(id);
+            if (savedVal) {
+                const el = document.getElementById(id);
+                el.value = savedVal;
+                // بروزرسانی عدد اسلایدرها
+                if(id === 'fontSize') updateVal('fontSizeVal', savedVal);
+                if(id === 'marginV') updateVal('marginVal', savedVal);
+            }
+        });
+    });
+
+    // ذخیره تنظیمات هنگام تغییر
+    settingIds.forEach(id => {
+        document.getElementById(id).addEventListener('input', (e) => {
+            localStorage.setItem(id, e.target.value);
+        });
+    });
+
     function updateVal(id, val) { document.getElementById(id).innerText = val; }
 
+    function showLoader(text) {
+        document.getElementById('loaderText').innerText = text;
+        document.getElementById('mainLoader').style.display = 'flex';
+    }
+    function hideLoader() {
+        document.getElementById('mainLoader').style.display = 'none';
+    }
+
     async function uploadVideo() {
         const fileInput = document.getElementById('videoInput');
         if (!fileInput.files[0]) return;
 
-        showLoader("در حال آپلود و هوش مصنوعی... (ممکن است ۱-۲ دقیقه طول بکشد)");
+        document.getElementById('cardResult').classList.add('hidden');
+        document.getElementById('uploadMsg').innerText = fileInput.files[0].name;
+        
+        showLoader("در حال آپلود و آنالیز هوشمند...");
         
         const formData = new FormData();
         formData.append("file", fileInput.files[0]);
@@ -336,15 +350,15 @@ async def ui():
             globalSegments = data.segments;
             
             renderEditor();
-            enableSettings();
-            hideLoader();
             
-            document.getElementById('uploadSection').classList.add('hidden');
-            document.getElementById('editorSection').classList.remove('hidden');
+            document.getElementById('cardEditor').classList.remove('hidden');
+            document.getElementById('cardSettings').classList.remove('disabled-panel');
+            document.getElementById('cardEditor').scrollIntoView({behavior: 'smooth'});
 
         } catch (e) {
-            hideLoader();
             alert("خطا: " + e.message);
+        } finally {
+            hideLoader();
         }
     }
 
@@ -356,20 +370,15 @@ async def ui():
             const div = document.createElement('div');
             div.className = 'segment-item';
             div.innerHTML = `
-                <span class="time-tag">${Math.round(seg.start)}s</span>
-                <input class="text-edit" value="${seg.text}" oninput="globalSegments[${idx}].text = this.value">
+                <div class="time-tag">${Math.floor(seg.start)} - ${Math.floor(seg.end)}s</div>
+                <textarea class="text-edit" rows="1" oninput="globalSegments[${idx}].text = this.value; this.style.height='auto'; this.style.height=this.scrollHeight+'px';">${seg.text}</textarea>
             `;
             container.appendChild(div);
         });
     }
 
-    function enableSettings() {
-        document.getElementById('settingsPanel').style.opacity = "1";
-        document.getElementById('settingsPanel').style.pointerEvents = "all";
-    }
-
     async function burnProcess() {
-        showLoader("در حال چسباندن زیرنویس روی ویدیو...");
+        showLoader("در حال ساخت زیرنویس...");
         
         const payload = {
             file_id: globalFileId,
@@ -380,7 +389,7 @@ async def ui():
                 primary_color: document.getElementById('primaryColor').value,
                 outline_color: document.getElementById('outlineColor').value,
                 back_type: document.getElementById('backType').value,
-                outline_width: parseFloat(document.getElementById('outlineWidth').value),
+                outline_width: 2.0, 
                 margin_v: parseInt(document.getElementById('marginV').value)
             }
         };
@@ -395,24 +404,22 @@ async def ui():
             
             if (data.error) throw new Error(data.error);
             
-            hideLoader();
-            document.getElementById('burnBtn').classList.add('hidden');
-            document.getElementById('finalSection').classList.remove('hidden');
+            const videoEl = document.getElementById('previewVideo');
+            videoEl.src = data.url;
             document.getElementById('downloadLink').href = data.url;
             
+            document.getElementById('cardResult').classList.remove('hidden');
+            document.getElementById('cardResult').scrollIntoView({behavior: 'smooth'});
+            document.getElementById('cardUpload').classList.add('hidden');
+            document.getElementById('cardEditor').classList.add('hidden');
+            document.getElementById('cardSettings').classList.add('hidden');
+
         } catch (e) {
-            hideLoader();
             alert("خطا در ساخت ویدیو: " + e.message);
+        } finally {
+            hideLoader();
         }
     }
-
-    function showLoader(text) {
-        document.getElementById('loaderText').innerText = text;
-        document.getElementById('mainLoader').classList.remove('hidden');
-    }
-    function hideLoader() {
-        document.getElementById('mainLoader').classList.add('hidden');
-    }
 </script>
 
 </body>