Update index.html

index.html

@@ -9,15 +9,13 @@
         :root {
             --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;
+            --background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #1e3c72 100%);
             --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);
+            --text-primary: #ffffff;
+            --text-secondary: #e8eaed;
+            --border-color: rgba(255, 255, 255, 0.15);
+            --shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+            --glow: 0 0 30px rgba(102, 126, 234, 0.5);
         }
 
         * {
@@ -28,14 +26,14 @@
 
         body {
             font-family: 'Vazirmatn', sans-serif;
-            background: var(--bg-pattern);
-            background-attachment: fixed;
-            min-height: 100vh;
+            background: var(--background);
             color: var(--text-primary);
+            min-height: 100vh;
+            padding: 20px;
             overflow-x: hidden;
         }
 
-        /* QR Pattern Background */
+        /* Background Animations */
         body::before {
             content: '';
             position: fixed;
@@ -43,78 +41,83 @@
             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;
+            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="qr" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"><rect width="8" height="8" fill="rgba(255,255,255,0.03)"/><rect x="12" y="0" width="8" height="8" fill="rgba(255,255,255,0.03)"/><rect x="0" y="12" width="8" height="8" fill="rgba(255,255,255,0.03)"/><rect x="12" y="12" width="8" height="8" fill="rgba(255,255,255,0.03)"/></pattern></defs><rect width="100" height="100" fill="url(%23qr)"/></svg>');
             z-index: -1;
-            animation: float 20s ease-in-out infinite;
+            animation: backgroundMove 20s ease-in-out infinite;
         }
 
-        @keyframes float {
-            0%, 100% { transform: translateY(0px) rotate(0deg); }
-            50% { transform: translateY(-20px) rotate(1deg); }
+        @keyframes backgroundMove {
+            0%, 100% { transform: translate(0, 0) rotate(0deg); }
+            25% { transform: translate(-10px, -10px) rotate(1deg); }
+            50% { transform: translate(10px, -5px) rotate(-1deg); }
+            75% { transform: translate(-5px, 10px) rotate(0.5deg); }
         }
 
-        .header {
+        .main-header {
             text-align: center;
-            padding: 40px 20px;
-            background: rgba(255, 255, 255, 0.05);
-            backdrop-filter: blur(20px);
             margin-bottom: 40px;
+            animation: slideDown 1s ease-out;
         }
 
         .main-title {
             font-size: clamp(2rem, 5vw, 3.5rem);
             font-weight: 300;
             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);
+            text-shadow: 0 4px 8px rgba(0,0,0,0.5);
+            position: relative;
         }
 
-        .main-title span {
-            font-weight: 700;
-            background: var(--secondary-gradient);
+        .main-title::after {
+            content: '';
+            position: absolute;
+            bottom: -10px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 80px;
+            height: 4px;
+            background: var(--primary-gradient);
+            border-radius: 2px;
+            box-shadow: var(--glow);
+        }
+
+        .main-title .highlight {
+            background: var(--primary-gradient);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             background-clip: text;
+            font-weight: 700;
         }
 
         .subtitle {
             font-size: 1.1rem;
             color: var(--text-secondary);
-            opacity: 0.9;
+            opacity: 0.8;
         }
 
-        .main-container {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
+        .app-container {
+            display: flex;
             gap: 30px;
             max-width: 1200px;
             margin: 0 auto;
-            padding: 0 20px;
-        }
-
-        @media (max-width: 768px) {
-            .main-container {
-                grid-template-columns: 1fr;
-                gap: 25px;
-            }
+            flex-wrap: wrap;
+            justify-content: center;
         }
 
         .card {
+            flex: 1;
+            min-width: 320px;
+            max-width: 500px;
             background: var(--card-bg);
             backdrop-filter: blur(20px);
-            border: 1px solid var(--card-border);
+            -webkit-backdrop-filter: blur(20px);
+            border: 1px solid var(--border-color);
             border-radius: 20px;
             padding: 30px;
-            box-shadow: var(--shadow-light);
-            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+            box-shadow: var(--shadow);
+            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
             position: relative;
             overflow: hidden;
+            animation: slideUp 1s ease-out;
         }
 
         .card::before {
@@ -126,12 +129,12 @@
             height: 4px;
             background: var(--primary-gradient);
             transform: scaleX(0);
-            transition: transform 0.3s ease;
+            transition: transform 0.4s ease;
         }
 
         .card:hover {
-            transform: translateY(-10px);
-            box-shadow: var(--shadow-heavy);
+            transform: translateY(-10px) scale(1.02);
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
         }
 
         .card:hover::before {
@@ -139,29 +142,48 @@
         }
 
         .card-header {
-            display: flex;
-            align-items: center;
-            gap: 15px;
+            text-align: center;
             margin-bottom: 25px;
-            padding-bottom: 15px;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            position: relative;
         }
 
         .card-icon {
-            width: 50px;
-            height: 50px;
-            background: var(--primary-gradient);
-            border-radius: 12px;
+            width: 60px;
+            height: 60px;
+            margin: 0 auto 15px;
+            border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
-            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+            font-size: 24px;
+            color: white;
+            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
+            animation: pulse 2s infinite;
+        }
+
+        .generate-card .card-icon {
+            background: var(--primary-gradient);
+        }
+
+        .read-card .card-icon {
+            background: var(--secondary-gradient);
+        }
+
+        @keyframes pulse {
+            0%, 100% { transform: scale(1); }
+            50% { transform: scale(1.1); }
         }
 
         .card-title {
-            font-size: 1.4rem;
+            font-size: 1.5rem;
             font-weight: 600;
-            color: var(--text-primary);
+            margin-bottom: 8px;
+        }
+
+        .card-subtitle {
+            color: var(--text-secondary);
+            font-size: 0.9rem;
+            opacity: 0.8;
         }
 
         .form-group {
@@ -171,7 +193,7 @@
         .form-label {
             display: block;
             margin-bottom: 8px;
-            font-size: 0.95rem;
+            font-size: 0.9rem;
             color: var(--text-secondary);
             font-weight: 500;
         }
@@ -179,9 +201,9 @@
         .form-input {
             width: 100%;
             padding: 15px;
-            background: var(--input-bg);
             border: 2px solid transparent;
             border-radius: 12px;
+            background: rgba(255, 255, 255, 0.08);
             color: var(--text-primary);
             font-size: 1rem;
             transition: all 0.3s ease;
@@ -191,12 +213,12 @@
         .form-input:focus {
             outline: none;
             border-color: #667eea;
-            background: rgba(255, 255, 255, 0.2);
-            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+            background: rgba(255, 255, 255, 0.12);
+            box-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
         }
 
         .form-input::placeholder {
-            color: rgba(255, 255, 255, 0.6);
+            color: rgba(255, 255, 255, 0.5);
         }
 
         .file-input-wrapper {
@@ -208,53 +230,50 @@
             display: none;
         }
 
-        .file-input-label {
+        .file-label {
             display: flex;
             align-items: center;
             justify-content: center;
-            gap: 12px;
+            gap: 10px;
             padding: 15px;
-            background: var(--input-bg);
             border: 2px dashed rgba(255, 255, 255, 0.3);
             border-radius: 12px;
+            background: rgba(255, 255, 255, 0.05);
             transition: all 0.3s ease;
-            min-height: 60px;
+            cursor: pointer;
         }
 
-        .file-input-label:hover {
-            border-color: #667eea;
-            background: rgba(255, 255, 255, 0.2);
+        .file-label:hover {
+            border-color: #f5576c;
+            background: rgba(245, 87, 108, 0.1);
+            transform: scale(1.02);
         }
 
         .file-name {
             margin-top: 10px;
-            padding: 8px 12px;
-            background: rgba(255, 255, 255, 0.1);
-            border-radius: 8px;
-            font-size: 0.9rem;
+            font-size: 0.85rem;
             color: var(--text-secondary);
             text-align: center;
-            min-height: 1.5em;
+            min-height: 20px;
         }
 
         .btn {
             width: 100%;
-            padding: 16px;
-            background: var(--primary-gradient);
+            padding: 15px;
             border: none;
             border-radius: 12px;
-            color: white;
             font-size: 1.1rem;
             font-weight: 600;
             cursor: pointer;
-            transition: all 0.3s ease;
+            transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+            position: relative;
+            overflow: hidden;
             display: flex;
             align-items: center;
             justify-content: center;
             gap: 10px;
-            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
-            position: relative;
-            overflow: hidden;
+            color: white;
+            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
         }
 
         .btn::before {
@@ -264,55 +283,48 @@
             left: -100%;
             width: 100%;
             height: 100%;
-            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
             transition: left 0.5s;
         }
 
-        .btn:hover:not(:disabled) {
-            transform: translateY(-2px);
-            box-shadow: 0 6px 20px rgba(0,0,0,0.3);
+        .btn:hover::before {
+            left: 100%;
         }
 
-        .btn:hover:not(:disabled)::before {
-            left: 100%;
+        .btn-generate {
+            background: var(--primary-gradient);
+            box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
         }
 
-        .btn:disabled {
-            background: rgba(255, 255, 255, 0.1);
-            cursor: not-allowed;
-            transform: none;
+        .btn-read {
+            background: var(--secondary-gradient);
+            box-shadow: 0 8px 20px rgba(245, 87, 108, 0.4);
         }
 
-        .btn-secondary {
-            background: var(--success-gradient);
+        .btn:hover:not(:disabled) {
+            transform: translateY(-3px);
+            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
+        }
+
+        .btn:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+            transform: none !important;
         }
 
         .result-container {
             margin-top: 20px;
             padding: 20px;
-            background: var(--input-bg);
+            background: rgba(255, 255, 255, 0.05);
             border-radius: 12px;
+            border: 1px solid var(--border-color);
             min-height: 120px;
             display: flex;
             align-items: center;
             justify-content: center;
             text-align: center;
             position: relative;
-            backdrop-filter: blur(10px);
-        }
-
-        .result-container img {
-            max-width: 100%;
-            height: auto;
-            border-radius: 8px;
-            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);
+            overflow: hidden;
         }
 
         .loader {
@@ -322,6 +334,7 @@
             border-top: 4px solid #667eea;
             border-radius: 50%;
             animation: spin 1s linear infinite;
+            display: none;
         }
 
         @keyframes spin {
@@ -329,153 +342,164 @@
             100% { transform: rotate(360deg); }
         }
 
+        .qr-result img {
+            max-width: 100%;
+            height: auto;
+            border-radius: 8px;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+            animation: zoomIn 0.5s ease-out;
+        }
+
         @keyframes zoomIn {
+            from { 
+                opacity: 0; 
+                transform: scale(0.8); 
+            }
+            to { 
+                opacity: 1; 
+                transform: scale(1); 
+            }
+        }
+
+        .text-result {
+            word-wrap: break-word;
+            line-height: 1.6;
+            font-size: 1rem;
+        }
+
+        /* انیمیشن‌های ورود */
+        @keyframes slideDown {
             from {
                 opacity: 0;
-                transform: scale(0.5);
+                transform: translateY(-50px);
             }
             to {
                 opacity: 1;
-                transform: scale(1);
+                transform: translateY(0);
             }
         }
 
-        .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;
+        @keyframes slideUp {
+            from {
+                opacity: 0;
+                transform: translateY(50px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
         }
 
-        .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; }
+        /* Responsive Design */
+        @media (max-width: 768px) {
+            .app-container {
+                flex-direction: column;
+                gap: 20px;
+            }
+            
+            .card {
+                min-width: 100%;
+                padding: 25px;
+            }
+            
+            body {
+                padding: 15px;
+            }
         }
 
-        /* Mobile optimizations */
         @media (max-width: 480px) {
-            .header {
-                padding: 30px 15px;
+            .main-title {
+                font-size: 2rem;
             }
             
             .card {
                 padding: 20px;
-                border-radius: 15px;
-            }
-            
-            .main-container {
-                padding: 0 15px;
             }
         }
     </style>
 </head>
 <body>
-    <div class="floating-elements">
-        <div class="floating-qr"></div>
-        <div class="floating-qr"></div>
-        <div class="floating-qr"></div>
-    </div>
-
-    <header class="header">
-        <h1 class="main-title">ابزار مدرن <span>QR Code</span></h1>
-        <p class="subtitle">ساخت و خواندن کیوآر کد به سادگی</p>
+    <header class="main-header">
+        <h1 class="main-title">ابزار مدرن <span class="highlight">QR Code</span></h1>
+        <p class="subtitle">ساخت و خواندن کدهای QR به سادگی</p>
     </header>
 
-    <div class="main-container">
+    <div class="app-container">
         <!-- کارت ساخت QR Code -->
-        <div class="card">
+        <div class="card generate-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">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                         <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>
+                <p class="card-subtitle">متن خود را به کد QR تبدیل کنید</p>
             </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>
+                <label class="form-label" for="text-input">متن یا لینک خود را وارد کنید:</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"/>
+            <button id="generate-btn" class="btn btn-generate">
+                <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-container">
-                <div id="generate-loader" class="loader" style="display: none;"></div>
-                <div id="qr-code-display"></div>
+                <div id="generate-loader" class="loader"></div>
+                <div id="qr-code-display" class="qr-result"></div>
             </div>
         </div>
 
         <!-- کارت خواندن QR Code -->
-        <div class="card">
+        <div class="card read-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">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                 </div>
                 <h2 class="card-title">خواندن QR Code</h2>
+                <p class="card-subtitle">تصویر QR Code را آپلود کرده و متن آن را بخوانید</p>
             </div>
 
             <div class="form-group">
-                <label for="file-input" class="form-label">تصویر QR Code را انتخاب کنید:</label>
+                <label class="form-label" for="file-input">تصویر 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">
+                    <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>
+                        <span>انتخاب تصویر</span>
                     </label>
                 </div>
-                <div id="file-name" class="file-name"></div>
+                <p id="file-name" class="file-name"></p>
             </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"/>
+            <button id="read-btn" class="btn btn-read">
+                <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">
+                    <circle cx="11" cy="11" r="8"/>
+                    <path d="m21 21-4.35-4.35"/>
                 </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 id="read-loader" class="loader"></div>
+                <p id="decoded-text" class="text-result">نتیجه در اینجا نمایش داده می‌شود</p>
             </div>
         </div>
     </div>
@@ -483,7 +507,7 @@
     <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');
@@ -497,14 +521,14 @@
         // نمایش نام فایل انتخاب شده
         fileInput.addEventListener('change', () => {
             if (fileInput.files.length > 0) {
-                fileNameDisplay.textContent = `✓ ${fileInput.files[0].name}`;
-                fileNameDisplay.style.color = '#4facfe';
+                fileNameDisplay.textContent = `فایل انتخاب شده: ${fileInput.files[0].name}`;
+                fileNameDisplay.style.color = '#4ade80';
             } else {
                 fileNameDisplay.textContent = '';
             }
         });
 
-        // توابع کمکی
+        // --- توابع کمکی ---
         const generateSessionHash = () => Math.random().toString(36).substring(2, 15);
 
         const listenForData = (sessionHash, onResult, onError) => {
@@ -534,13 +558,11 @@
             };
         };
 
-        // منطق ساخت QR Code
+        // --- منطق ساخت QR Code ---
         generateBtn.addEventListener('click', async () => {
             const text = textInput.value.trim();
             if (!text) {
                 textInput.focus();
-                textInput.style.borderColor = '#f5576c';
-                setTimeout(() => textInput.style.borderColor = 'transparent', 2000);
                 return;
             }
 
@@ -565,32 +587,31 @@
                         if (result && result[0]) {
                             qrCodeDisplay.innerHTML = result[0];
                         } else {
-                            qrCodeDisplay.innerHTML = '<p class="result-text">خطا: خروجی معتبر دریافت نشد.</p>';
+                            qrCodeDisplay.innerHTML = '<p style="color: #ef4444;">خطا: خروجی معتبر دریافت نشد</p>';
                         }
                     },
                     (error) => {
-                        qrCodeDisplay.innerHTML = `<p class="result-text">خطا در ساخت: ${error}</p>`;
+                        qrCodeDisplay.innerHTML = `<p style="color: #ef4444;">خطا در ساخت: ${error}</p>`;
                     }
                 );
             } catch (error) {
-                qrCodeDisplay.innerHTML = `<p class="result-text">خطا: ${error.message}</p>`;
+                qrCodeDisplay.innerHTML = `<p style="color: #ef4444;">خطا: ${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) {
-                fileNameDisplay.textContent = '⚠️ لطفاً یک فایل انتخاب کنید';
-                fileNameDisplay.style.color = '#f5576c';
+                fileInput.click();
                 return;
             }
 
             readLoader.style.display = 'block';
-            decodedText.textContent = '';
+            decodedText.innerHTML = '';
             readBtn.disabled = true;
 
             try {
@@ -623,19 +644,62 @@
                 listenForData(
                     sessionHash, 
                     (result) => {
-                        decodedText.textContent = `📄 متن خوانده شده:\n\n${result[0]}`;
+                        decodedText.innerHTML = `<strong style="color: #4ade80;">متن خوانده شده:</strong><br><br>${result[0]}`;
                     },
                     (error) => {
-                        decodedText.textContent = `❌ خطا در خواندن: ${error}`;
+                        decodedText.innerHTML = `<p style="color: #ef4444;">خطا در خواندن: ${error}</p>`;
                     }
                 );
             } catch (error) {
-                decodedText.textContent = `❌ خطا: ${error.message}`;
+                decodedText.innerHTML = `<p style="color: #ef4444;">خطا: ${error.message}</p>`;
             } finally {
                 readLoader.style.display = 'none';
                 readBtn.disabled = false;
             }
         });
+
+        // اضافه کردن قابلیت drag and drop برای فایل
+        const fileLabel = document.querySelector('.file-label');
+        
+        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+            fileLabel.addEventListener(eventName, preventDefaults, false);
+        });
+
+        function preventDefaults(e) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+
+        ['dragenter', 'dragover'].forEach(eventName => {
+            fileLabel.addEventListener(eventName, highlight, false);
+        });
+
+        ['dragleave', 'drop'].forEach(eventName => {
+            fileLabel.addEventListener(eventName, unhighlight, false);
+        });
+
+        function highlight(e) {
+            fileLabel.style.borderColor = '#f5576c';
+            fileLabel.style.backgroundColor = 'rgba(245, 87, 108, 0.2)';
+        }
+
+        function unhighlight(e) {
+            fileLabel.style.borderColor = 'rgba(255, 255, 255, 0.3)';
+            fileLabel.style.backgroundColor = 'rgba(255, 255, 255, 0.05)';
+        }
+
+        fileLabel.addEventListener('drop', handleDrop, false);
+
+        function handleDrop(e) {
+            const dt = e.dataTransfer;
+            const files = dt.files;
+            
+            if (files.length > 0) {
+                fileInput.files = files;
+                fileNameDisplay.textContent = `فایل انتخاب شده: ${files[0].name}`;
+                fileNameDisplay.style.color = '#4ade80';
+            }
+        }
     </script>
 </body>
 </html>