Update index.html

index.html

@@ -7,236 +7,483 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css">
     <style>
         :root {
-            --primary-color: #8e44ad;
-            --secondary-color: #3498db;
-            --background-start: #141e30;
-            --background-end: #243b55;
-            --text-color: #ecf0f1;
-            --input-bg: rgba(255, 255, 255, 0.1);
-            --container-bg: rgba(255, 255, 255, 0.15);
-            --border-color: rgba(255, 255, 255, 0.2);
+            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+            --success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+            --bg-pattern: linear-gradient(45deg, #1e3c72 0%, #2a5298 50%, #1e3c72 100%);
+            --text-primary: #ffffff;
+            --text-secondary: #e2e8f0;
+            --card-bg: rgba(255, 255, 255, 0.1);
+            --card-border: rgba(255, 255, 255, 0.2);
+            --input-bg: rgba(255, 255, 255, 0.15);
+            --shadow-light: 0 8px 32px rgba(31, 38, 135, 0.37);
+            --shadow-heavy: 0 15px 35px rgba(31, 38, 135, 0.5);
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
         }
 
         body {
             font-family: 'Vazirmatn', sans-serif;
-            background: linear-gradient(135deg, var(--background-end), var(--background-start));
-            color: var(--text-color);
-            display: flex;
-            justify-content: center;
-            align-items: center;
+            background: var(--bg-pattern);
+            background-attachment: fixed;
             min-height: 100vh;
-            padding: 20px;
-            gap: 40px;
-            flex-wrap: wrap;
+            color: var(--text-primary);
+            overflow-x: hidden;
         }
 
-        .main-title {
+        /* QR Pattern Background */
+        body::before {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
             width: 100%;
+            height: 100%;
+            background-image: 
+                radial-gradient(circle at 25% 25%, rgba(255,255,255,0.05) 2px, transparent 2px),
+                radial-gradient(circle at 75% 75%, rgba(255,255,255,0.05) 2px, transparent 2px);
+            background-size: 50px 50px;
+            z-index: -1;
+            animation: float 20s ease-in-out infinite;
+        }
+
+        @keyframes float {
+            0%, 100% { transform: translateY(0px) rotate(0deg); }
+            50% { transform: translateY(-20px) rotate(1deg); }
+        }
+
+        .header {
             text-align: center;
-            font-size: 2.5rem;
+            padding: 40px 20px;
+            background: rgba(255, 255, 255, 0.05);
+            backdrop-filter: blur(20px);
+            margin-bottom: 40px;
+        }
+
+        .main-title {
+            font-size: clamp(2rem, 5vw, 3.5rem);
             font-weight: 300;
-            margin-bottom: 20px;
-            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
+            margin-bottom: 10px;
+            background: linear-gradient(135deg, #ffffff, #a8edea);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            text-shadow: 0 2px 10px rgba(0,0,0,0.3);
         }
+
         .main-title span {
             font-weight: 700;
-            color: #fff;
+            background: var(--secondary-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
         }
 
-        .container {
-            background: var(--container-bg);
+        .subtitle {
+            font-size: 1.1rem;
+            color: var(--text-secondary);
+            opacity: 0.9;
+        }
+
+        .main-container {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 30px;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 20px;
+        }
+
+        @media (max-width: 768px) {
+            .main-container {
+                grid-template-columns: 1fr;
+                gap: 25px;
+            }
+        }
+
+        .card {
+            background: var(--card-bg);
+            backdrop-filter: blur(20px);
+            border: 1px solid var(--card-border);
+            border-radius: 20px;
             padding: 30px;
-            border-radius: 15px;
-            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
-            backdrop-filter: blur(10px);
-            -webkit-backdrop-filter: blur(10px);
-            border: 1px solid var(--border-color);
-            width: 100%;
-            max-width: 450px;
-            display: flex;
-            flex-direction: column;
-            gap: 20px;
-            transition: transform 0.3s ease, box-shadow 0.3s ease;
+            box-shadow: var(--shadow-light);
+            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 4px;
+            background: var(--primary-gradient);
+            transform: scaleX(0);
+            transition: transform 0.3s ease;
         }
-        .container:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.45);
+
+        .card:hover {
+            transform: translateY(-10px);
+            box-shadow: var(--shadow-heavy);
         }
 
-        h2 {
-            text-align: center;
-            color: #fff;
-            margin-top: 0;
-            font-weight: 500;
-            border-bottom: 1px solid var(--secondary-color);
+        .card:hover::before {
+            transform: scaleX(1);
+        }
+
+        .card-header {
+            display: flex;
+            align-items: center;
+            gap: 15px;
+            margin-bottom: 25px;
             padding-bottom: 15px;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
         }
 
-        label {
-            font-size: 0.9rem;
-            margin-bottom: -10px;
-            color: #bdc3c7;
+        .card-icon {
+            width: 50px;
+            height: 50px;
+            background: var(--primary-gradient);
+            border-radius: 12px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+        }
+
+        .card-title {
+            font-size: 1.4rem;
+            font-weight: 600;
+            color: var(--text-primary);
+        }
+
+        .form-group {
+            margin-bottom: 20px;
+        }
+
+        .form-label {
+            display: block;
+            margin-bottom: 8px;
+            font-size: 0.95rem;
+            color: var(--text-secondary);
+            font-weight: 500;
         }
 
-        textarea, .file-label {
+        .form-input {
             width: 100%;
-            padding: 12px;
-            border-radius: 8px;
-            border: 1px solid var(--border-color);
-            box-sizing: border-box;
-            font-size: 1rem;
+            padding: 15px;
             background: var(--input-bg);
-            color: var(--text-color);
-            transition: border-color 0.3s, box-shadow 0.3s;
-        }
-        textarea::placeholder {
-            color: #95a5a6;
+            border: 2px solid transparent;
+            border-radius: 12px;
+            color: var(--text-primary);
+            font-size: 1rem;
+            transition: all 0.3s ease;
+            backdrop-filter: blur(10px);
         }
-        textarea:focus, .file-label:hover {
+
+        .form-input:focus {
             outline: none;
-            border-color: var(--secondary-color);
-            box-shadow: 0 0 10px rgba(52, 152, 219, 0.5);
+            border-color: #667eea;
+            background: rgba(255, 255, 255, 0.2);
+            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
         }
 
-        /* Custom file input */
-        .file-wrapper {
+        .form-input::placeholder {
+            color: rgba(255, 255, 255, 0.6);
+        }
+
+        .file-input-wrapper {
             position: relative;
             cursor: pointer;
         }
-        input[type="file"] {
+
+        .file-input {
             display: none;
         }
-        .file-label {
+
+        .file-input-label {
             display: flex;
-            justify-content: center;
             align-items: center;
-            gap: 10px;
+            justify-content: center;
+            gap: 12px;
+            padding: 15px;
+            background: var(--input-bg);
+            border: 2px dashed rgba(255, 255, 255, 0.3);
+            border-radius: 12px;
+            transition: all 0.3s ease;
+            min-height: 60px;
+        }
+
+        .file-input-label:hover {
+            border-color: #667eea;
+            background: rgba(255, 255, 255, 0.2);
         }
-        #file-name {
+
+        .file-name {
             margin-top: 10px;
-            font-size: 0.85rem;
-            color: #bdc3c7;
+            padding: 8px 12px;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 8px;
+            font-size: 0.9rem;
+            color: var(--text-secondary);
             text-align: center;
-            height: 1.2em;
+            min-height: 1.5em;
         }
-        
-        button {
-            padding: 14px 20px;
-            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
-            color: white;
+
+        .btn {
+            width: 100%;
+            padding: 16px;
+            background: var(--primary-gradient);
             border: none;
-            border-radius: 8px;
-            cursor: pointer;
+            border-radius: 12px;
+            color: white;
             font-size: 1.1rem;
             font-weight: 600;
+            cursor: pointer;
             transition: all 0.3s ease;
             display: flex;
-            justify-content: center;
             align-items: center;
+            justify-content: center;
             gap: 10px;
             box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .btn::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+            transition: left 0.5s;
         }
-        button:hover:not(:disabled) {
-            transform: translateY(-3px);
+
+        .btn:hover:not(:disabled) {
+            transform: translateY(-2px);
             box-shadow: 0 6px 20px rgba(0,0,0,0.3);
         }
-        button:disabled {
-            background: #555;
+
+        .btn:hover:not(:disabled)::before {
+            left: 100%;
+        }
+
+        .btn:disabled {
+            background: rgba(255, 255, 255, 0.1);
             cursor: not-allowed;
-            opacity: 0.7;
+            transform: none;
+        }
+
+        .btn-secondary {
+            background: var(--success-gradient);
         }
 
-        .result-box {
-            margin-top: 15px;
+        .result-container {
+            margin-top: 20px;
             padding: 20px;
             background: var(--input-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            min-height: 100px;
+            border-radius: 12px;
+            min-height: 120px;
             display: flex;
-            justify-content: center;
             align-items: center;
+            justify-content: center;
             text-align: center;
-            word-wrap: break-word;
-            color: #ecf0f1;
-            font-size: 1rem;
+            position: relative;
+            backdrop-filter: blur(10px);
         }
-        
-        #qr-code-display img {
+
+        .result-container img {
             max-width: 100%;
             height: auto;
             border-radius: 8px;
-            border: 2px solid white;
-            animation: fadeIn 0.5s ease-in-out;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
+            animation: zoomIn 0.5s ease-out;
+        }
+
+        .result-text {
+            word-wrap: break-word;
+            line-height: 1.6;
+            color: var(--text-primary);
         }
 
         .loader {
-            border: 4px solid #555;
-            border-top: 4px solid var(--secondary-color);
+            width: 40px;
+            height: 40px;
+            border: 4px solid rgba(255, 255, 255, 0.1);
+            border-top: 4px solid #667eea;
             border-radius: 50%;
-            width: 30px;
-            height: 30px;
             animation: spin 1s linear infinite;
-            display: none;
         }
 
         @keyframes spin {
             0% { transform: rotate(0deg); }
             100% { transform: rotate(360deg); }
         }
-        @keyframes fadeIn {
-            from { opacity: 0; transform: scale(0.9); }
-            to { opacity: 1; transform: scale(1); }
+
+        @keyframes zoomIn {
+            from {
+                opacity: 0;
+                transform: scale(0.5);
+            }
+            to {
+                opacity: 1;
+                transform: scale(1);
+            }
+        }
+
+        .floating-elements {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            z-index: -1;
+        }
+
+        .floating-qr {
+            position: absolute;
+            width: 20px;
+            height: 20px;
+            background: rgba(255, 255, 255, 0.05);
+            animation: float-qr 15s infinite linear;
+        }
+
+        .floating-qr:nth-child(1) { top: 20%; left: 10%; animation-delay: 0s; }
+        .floating-qr:nth-child(2) { top: 80%; left: 90%; animation-delay: 5s; }
+        .floating-qr:nth-child(3) { top: 40%; left: 80%; animation-delay: 10s; }
+
+        @keyframes float-qr {
+            0% { transform: translateY(0) rotate(0deg); opacity: 0; }
+            50% { opacity: 1; }
+            100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; }
+        }
+
+        /* Mobile optimizations */
+        @media (max-width: 480px) {
+            .header {
+                padding: 30px 15px;
+            }
+            
+            .card {
+                padding: 20px;
+                border-radius: 15px;
+            }
+            
+            .main-container {
+                padding: 0 15px;
+            }
         }
     </style>
 </head>
 <body>
-
-    <h1 class="main-title">ابزار مدرن <span>QR Code</span></h1>
-
-    <!-- بخش ساخت QR Code -->
-    <div class="container">
-        <h2>ساخت QR Code از متن</h2>
-        <label for="text-input">متن خود را وارد کنید:</label>
-        <textarea id="text-input" rows="4" placeholder="مثلا: https://google.com">سلام دنیا</textarea>
-        <button id="generate-btn">
-            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2v0z"/><path d="M12 8l4 4-4 4"/><path d="M8 12h7"/></svg>
-            <span>ساخت QR Code</span>
-        </button>
-        <div class="result-box">
-            <div id="generate-loader" class="loader"></div>
-            <div id="qr-code-display"></div>
-        </div>
+    <div class="floating-elements">
+        <div class="floating-qr"></div>
+        <div class="floating-qr"></div>
+        <div class="floating-qr"></div>
     </div>
 
-    <!-- بخش خواندن QR Code -->
-    <div class="container">
-        <h2>خواندن متن از QR Code</h2>
-        <label for="file-input">فایل تصویر QR Code را انتخاب کنید:</label>
-        <div class="file-wrapper">
-            <input type="file" id="file-input" accept="image/*">
-            <label for="file-input" class="file-label">
-                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
-                <span>انتخاب فایل تصویر</span>
-            </label>
+    <header class="header">
+        <h1 class="main-title">ابزار مدرن <span>QR Code</span></h1>
+        <p class="subtitle">ساخت و خواندن کیوآر کد به سادگی</p>
+    </header>
+
+    <div class="main-container">
+        <!-- کارت ساخت QR Code -->
+        <div class="card">
+            <div class="card-header">
+                <div class="card-icon">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <rect x="3" y="3" width="7" height="7"/>
+                        <rect x="14" y="3" width="7" height="7"/>
+                        <rect x="14" y="14" width="7" height="7"/>
+                        <rect x="3" y="14" width="7" height="7"/>
+                        <rect x="5" y="5" width="3" height="3"/>
+                        <rect x="16" y="5" width="3" height="3"/>
+                        <rect x="16" y="16" width="3" height="3"/>
+                        <rect x="5" y="16" width="3" height="3"/>
+                    </svg>
+                </div>
+                <h2 class="card-title">ساخت QR Code</h2>
+            </div>
+
+            <div class="form-group">
+                <label for="text-input" class="form-label">متن یا لینک خود را وارد کنید:</label>
+                <textarea id="text-input" class="form-input" rows="4" placeholder="مثال: https://google.com یا متن دلخواه">سلام دنیا</textarea>
+            </div>
+
+            <button id="generate-btn" class="btn">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
+                </svg>
+                <span>ساخت QR Code</span>
+            </button>
+
+            <div class="result-container">
+                <div id="generate-loader" class="loader" style="display: none;"></div>
+                <div id="qr-code-display"></div>
+            </div>
         </div>
-        <p id="file-name"></p>
-        <button id="read-btn">
-            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
-            <span>خواندن QR Code</span>
-        </button>
-        <div class="result-box">
-            <div id="read-loader" class="loader"></div>
-            <p id="decoded-text">نتیجه در اینجا نمایش داده می‌شود.</p>
+
+        <!-- کارت خواندن QR Code -->
+        <div class="card">
+            <div class="card-header">
+                <div class="card-icon">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
+                        <circle cx="12" cy="12" r="3"/>
+                    </svg>
+                </div>
+                <h2 class="card-title">خواندن QR Code</h2>
+            </div>
+
+            <div class="form-group">
+                <label for="file-input" class="form-label">تصویر QR Code را انتخاب کنید:</label>
+                <div class="file-input-wrapper">
+                    <input type="file" id="file-input" class="file-input" accept="image/*">
+                    <label for="file-input" class="file-input-label">
+                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+                            <polyline points="17 8 12 3 7 8"/>
+                            <line x1="12" y1="3" x2="12" y2="15"/>
+                        </svg>
+                        <span>انتخاب فایل تصویر</span>
+                    </label>
+                </div>
+                <div id="file-name" class="file-name"></div>
+            </div>
+
+            <button id="read-btn" class="btn btn-secondary">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+                    <polyline points="14,2 14,8 20,8"/>
+                    <line x1="16" y1="13" x2="8" y2="13"/>
+                    <line x1="16" y1="17" x2="8" y2="17"/>
+                    <polyline points="10,9 9,9 8,9"/>
+                </svg>
+                <span>خواندن QR Code</span>
+            </button>
+
+            <div class="result-container">
+                <div id="read-loader" class="loader" style="display: none;"></div>
+                <div id="decoded-text" class="result-text">نتیجه در اینجا نمایش داده می‌شود</div>
+            </div>
         </div>
     </div>
 
     <script>
-        // --- کد جاوااسکریپت بدون هیچ تغییری باقی مانده است ---
-
         const SPACE_URL = "https://cultrix-qrcode-read-generate.hf.space";
 
-        // --- دریافت عناصر DOM ---
+        // دریافت عناصر DOM
         const generateBtn = document.getElementById('generate-btn');
         const readBtn = document.getElementById('read-btn');
         const textInput = document.getElementById('text-input');
@@ -250,13 +497,14 @@
         // نمایش نام فایل انتخاب شده
         fileInput.addEventListener('change', () => {
             if (fileInput.files.length > 0) {
-                fileNameDisplay.textContent = `فایل انتخاب شده: ${fileInput.files[0].name}`;
+                fileNameDisplay.textContent = `✓ ${fileInput.files[0].name}`;
+                fileNameDisplay.style.color = '#4facfe';
             } else {
                 fileNameDisplay.textContent = '';
             }
         });
 
-        // --- توابع کمکی ---
+        // توابع کمکی
         const generateSessionHash = () => Math.random().toString(36).substring(2, 15);
 
         const listenForData = (sessionHash, onResult, onError) => {
@@ -286,10 +534,15 @@
             };
         };
 
-        // --- منطق ساخت QR Code ---
+        // منطق ساخت QR Code
         generateBtn.addEventListener('click', async () => {
             const text = textInput.value.trim();
-            if (!text) return alert("لطفاً متنی را وارد کنید.");
+            if (!text) {
+                textInput.focus();
+                textInput.style.borderColor = '#f5576c';
+                setTimeout(() => textInput.style.borderColor = 'transparent', 2000);
+                return;
+            }
 
             generateLoader.style.display = 'block';
             qrCodeDisplay.innerHTML = '';
@@ -312,29 +565,32 @@
                         if (result && result[0]) {
                             qrCodeDisplay.innerHTML = result[0];
                         } else {
-                            qrCodeDisplay.innerText = "خطا: خروجی معتبر دریافت نشد.";
+                            qrCodeDisplay.innerHTML = '<p class="result-text">خطا: خروجی معتبر دریافت نشد.</p>';
                         }
                     },
                     (error) => {
-                        alert(`خطا در پردازش: ${error}`);
-                        qrCodeDisplay.innerText = "خطا در ساخت تصویر.";
+                        qrCodeDisplay.innerHTML = `<p class="result-text">خطا در ساخت: ${error}</p>`;
                     }
                 );
             } catch (error) {
-                alert(`یک خطا رخ داد: ${error.message}`);
+                qrCodeDisplay.innerHTML = `<p class="result-text">خطا: ${error.message}</p>`;
             } finally {
                 generateLoader.style.display = 'none';
                 generateBtn.disabled = false;
             }
         });
 
-        // --- منطق خواندن QR Code ---
+        // منطق خواندن QR Code
         readBtn.addEventListener('click', async () => {
             const file = fileInput.files[0];
-            if (!file) return alert("لطفاً یک فایل تصویر انتخاب کنید.");
+            if (!file) {
+                fileNameDisplay.textContent = '⚠️ لطفاً ی�� فایل انتخاب کنید';
+                fileNameDisplay.style.color = '#f5576c';
+                return;
+            }
 
             readLoader.style.display = 'block';
-            decodedText.innerText = '';
+            decodedText.textContent = '';
             readBtn.disabled = true;
 
             try {
@@ -367,20 +623,17 @@
                 listenForData(
                     sessionHash, 
                     (result) => {
-                        decodedText.innerText = `متن خوانده شده: \n ${result[0]}`;
+                        decodedText.textContent = `📄 متن خوانده شده:\n\n${result[0]}`;
                     },
                     (error) => {
-                        alert(`خطا در پردازش: ${error}`);
-                        decodedText.innerText = "خطا در خواندن کد.";
+                        decodedText.textContent = `❌ خطا در خواندن: ${error}`;
                     }
                 );
             } catch (error) {
-                alert(`یک خطا رخ داد: ${error.message}`);
-                decodedText.innerText = "نتیجه در اینجا نمایش داده می‌شود.";
+                decodedText.textContent = `❌ خطا: ${error.message}`;
             } finally {
                 readLoader.style.display = 'none';
                 readBtn.disabled = false;
-                // fileInput.value = ''; // ریست کردن اینپوت فایل باعث حذف نام فایل از نمایش می‌شود
             }
         });
     </script>