Add 1 files

index.html

@@ -5,175 +5,385 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>ExcelRowComparator - Compare Excel Files</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.sheetjs.com/xlsx-0.19.3/package/dist/xlsx.full.min.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
+        :root {
+            --primary: #6366f1;
+            --primary-dark: #4f46e5;
+            --secondary: #8b5cf6;
+            --accent: #ec4899;
+            --dark: #1e293b;
+            --light: #f8fafc;
+        }
+        
+        body {
+            background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
+            font-family: 'Inter', sans-serif;
+        }
+        
         .file-drop-area {
             border: 2px dashed #cbd5e0;
             transition: all 0.3s ease;
+            background: rgba(255, 255, 255, 0.7);
+            backdrop-filter: blur(10px);
         }
+        
         .file-drop-area.active {
-            border-color: #4f46e5;
-            background-color: #f5f3ff;
+            border-color: var(--primary);
+            background: rgba(99, 102, 241, 0.1);
         }
+        
         .progress-bar {
             transition: width 0.3s ease;
+            background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
         }
+        
         .result-table {
             max-height: 400px;
             overflow-y: auto;
+            scrollbar-width: thin;
+            scrollbar-color: var(--primary) #f1f1f1;
+        }
+        
+        .result-table::-webkit-scrollbar {
+            width: 8px;
+        }
+        
+        .result-table::-webkit-scrollbar-track {
+            background: #f1f1f1;
+            border-radius: 10px;
+        }
+        
+        .result-table::-webkit-scrollbar-thumb {
+            background: var(--primary);
+            border-radius: 10px;
         }
+        
         .highlight-row {
             animation: highlight 1.5s ease-out;
         }
+        
         @keyframes highlight {
             0% { background-color: rgba(167, 139, 250, 0.5); }
             100% { background-color: transparent; }
         }
+        
+        .glow {
+            box-shadow: 0 0 15px rgba(99, 102, 241, 0.3);
+        }
+        
+        .card {
+            background: rgba(255, 255, 255, 0.8);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+        }
+        
+        .btn-primary {
+            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+            color: white;
+            transition: all 0.3s ease;
+        }
+        
+        .btn-primary:hover {
+            background: linear-gradient(135deg, var(--primary-dark) 0%, #7c3aed 100%);
+            transform: translateY(-2px);
+            box-shadow: 0 10px 20px rgba(99, 102, 241, 0.3);
+        }
+        
+        .btn-secondary {
+            background: rgba(255, 255, 255, 0.9);
+            color: var(--dark);
+            transition: all 0.3s ease;
+        }
+        
+        .btn-secondary:hover {
+            background: white;
+            transform: translateY(-2px);
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+        }
+        
+        [lang="zh"] {
+            display: none;
+        }
+        
+        body:lang(zh) [lang="en"] {
+            display: none;
+        }
+        
+        body:lang(zh) [lang="zh"] {
+            display: block;
+        }
+        
+        .pulse {
+            animation: pulse 2s infinite;
+        }
+        
+        @keyframes pulse {
+            0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7); }
+            70% { box-shadow: 0 0 0 10px rgba(99, 102, 241, 0); }
+            100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
+        }
+        
+        .tech-border {
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .tech-border::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 3px;
+            background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
+        }
     </style>
 </head>
-<body class="bg-gray-50 min-h-screen">
-    <div class="container mx-auto px-4 py-8">
+<body class="min-h-screen" lang="en">
+    <div class="absolute top-5 right-5 z-10">
+        <div class="flex bg-white rounded-full shadow-lg overflow-hidden">
+            <button onclick="switchLanguage('en')" class="px-4 py-2 text-sm font-medium transition-colors duration-200" :class="{'bg-indigo-600 text-white': document.documentElement.lang === 'en', 'text-gray-600 hover:bg-gray-100': document.documentElement.lang !== 'en'}">
+                EN
+            </button>
+            <button onclick="switchLanguage('zh')" class="px-4 py-2 text-sm font-medium transition-colors duration-200" :class="{'bg-indigo-600 text-white': document.documentElement.lang === 'zh', 'text-gray-600 hover:bg-gray-100': document.documentElement.lang !== 'zh'}">
+                中文
+            </button>
+        </div>
+    </div>
+    
+    <div class="container mx-auto px-4 py-8 max-w-7xl">
         <!-- Header -->
-        <header class="mb-8">
-            <div class="flex items-center justify-between">
-                <div>
-                    <h1 class="text-3xl font-bold text-indigo-700">
-                        <i class="fas fa-file-excel mr-2"></i>ExcelRowComparator
-                    </h1>
-                    <p class="text-gray-600 mt-1">Compare two Excel files and find matching rows</p>
-                </div>
-                <div class="flex space-x-2">
-                    <button class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition">
-                        <i class="fas fa-question-circle mr-2"></i>Help
-                    </button>
-                    <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">
-                        <i class="fas fa-download mr-2"></i>Download App
-                    </button>
-                </div>
+        <header class="mb-12 text-center">
+            <div class="inline-block relative">
+                <div class="absolute -inset-1 bg-gradient-to-r from-indigo-500 to-pink-500 rounded-lg blur opacity-25"></div>
+                <h1 class="relative text-4xl font-bold text-gray-800 bg-white px-6 py-3 rounded-lg glow">
+                    <i class="fas fa-file-excel mr-2 text-indigo-600"></i><span lang="en">ExcelRowComparator</span><span lang="zh">Excel行比较工具</span>
+                </h1>
             </div>
+            <p class="text-gray-600 mt-4 max-w-2xl mx-auto">
+                <span lang="en">Advanced tool for comparing Excel files and identifying matching rows with precision</span>
+                <span lang="zh">高级Excel文件比较工具，精准识别匹配行</span>
+            </p>
         </header>
 
         <!-- Main Content -->
         <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
             <!-- File Selection Section -->
-            <div class="bg-white rounded-xl shadow-md p-6">
-                <h2 class="text-xl font-semibold text-gray-800 mb-4">
-                    <i class="fas fa-file-import mr-2 text-indigo-500"></i>Select Files to Compare
+            <div class="card tech-border p-6 relative">
+                <div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500"></div>
+                <h2 class="text-xl font-semibold text-gray-800 mb-6 flex items-center">
+                    <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
+                        <i class="fas fa-file-import text-indigo-600"></i>
+                    </div>
+                    <span lang="en">Select Files to Compare</span>
+                    <span lang="zh">选择要比较的文件</span>
                 </h2>
                 
                 <!-- File 1 Selection -->
-                <div class="mb-6">
-                    <label class="block text-sm font-medium text-gray-700 mb-2">First Excel File</label>
-                    <div class="file-drop-area rounded-lg p-6 text-center cursor-pointer" id="file1-drop-area">
-                        <input type="file" id="file1-input" class="hidden" accept=".xlsx,.xls">
+                <div class="mb-8">
+                    <label class="block text-sm font-medium text-gray-700 mb-3 flex items-center">
+                        <span class="w-6 h-6 rounded-full bg-indigo-600 text-white text-xs flex items-center justify-center mr-2">1</span>
+                        <span lang="en">First Excel File</span>
+                        <span lang="zh">第一个Excel文件</span>
+                    </label>
+                    <div class="file-drop-area rounded-xl p-6 text-center cursor-pointer transition-all hover:shadow-md" id="file1-drop-area">
+                        <input type="file" id="file1-input" class="hidden" accept=".xlsx,.xls,.csv">
                         <div class="flex flex-col items-center justify-center">
-                            <i class="fas fa-file-excel text-4xl text-green-600 mb-2"></i>
-                            <p class="text-gray-500 mb-1">Drag & drop your Excel file here</p>
-                            <p class="text-sm text-gray-400">or click to browse</p>
-                            <p class="text-sm font-medium text-indigo-600 mt-2" id="file1-name">No file selected</p>
+                            <div class="w-16 h-16 rounded-full bg-indigo-50 flex items-center justify-center mb-3 pulse">
+                                <i class="fas fa-file-excel text-3xl text-indigo-600"></i>
+                            </div>
+                            <p class="text-gray-500 mb-1 font-medium">
+                                <span lang="en">Drag & drop your Excel file here</span>
+                                <span lang="zh">拖放Excel文件到此处</span>
+                            </p>
+                            <p class="text-sm text-gray-400">
+                                <span lang="en">or click to browse</span>
+                                <span lang="zh">或点击浏览</span>
+                            </p>
+                            <p class="text-sm font-medium text-indigo-600 mt-3" id="file1-name">
+                                <span lang="en">No file selected</span>
+                                <span lang="zh">未选择文件</span>
+                            </p>
                         </div>
                     </div>
-                    <div class="mt-2 flex items-center">
-                        <label class="text-sm text-gray-600 mr-2">Sheet:</label>
-                        <select class="border rounded px-3 py-1 text-sm w-full max-w-xs" id="file1-sheet" disabled>
-                            <option value="">Select a sheet</option>
+                    <div class="mt-3 flex items-center">
+                        <label class="text-sm text-gray-600 mr-2">
+                            <span lang="en">Sheet:</span>
+                            <span lang="zh">工作表:</span>
+                        </label>
+                        <select class="border rounded-lg px-3 py-2 text-sm w-full max-w-xs bg-white shadow-sm" id="file1-sheet" disabled>
+                            <option value="">
+                                <span lang="en">Select a sheet</span>
+                                <span lang="zh">选择工作表</span>
+                            </option>
                         </select>
                     </div>
                 </div>
                 
                 <!-- File 2 Selection -->
-                <div class="mb-6">
-                    <label class="block text-sm font-medium text-gray-700 mb-2">Second Excel File</label>
-                    <div class="file-drop-area rounded-lg p-6 text-center cursor-pointer" id="file2-drop-area">
-                        <input type="file" id="file2-input" class="hidden" accept=".xlsx,.xls">
+                <div class="mb-8">
+                    <label class="block text-sm font-medium text-gray-700 mb-3 flex items-center">
+                        <span class="w-6 h-6 rounded-full bg-purple-600 text-white text-xs flex items-center justify-center mr-2">2</span>
+                        <span lang="en">Second Excel File</span>
+                        <span lang="zh">第二个Excel文件</span>
+                    </label>
+                    <div class="file-drop-area rounded-xl p-6 text-center cursor-pointer transition-all hover:shadow-md" id="file2-drop-area">
+                        <input type="file" id="file2-input" class="hidden" accept=".xlsx,.xls,.csv">
                         <div class="flex flex-col items-center justify-center">
-                            <i class="fas fa-file-excel text-4xl text-blue-600 mb-2"></i>
-                            <p class="text-gray-500 mb-1">Drag & drop your Excel file here</p>
-                            <p class="text-sm text-gray-400">or click to browse</p>
-                            <p class="text-sm font-medium text-indigo-600 mt-2" id="file2-name">No file selected</p>
+                            <div class="w-16 h-16 rounded-full bg-purple-50 flex items-center justify-center mb-3 pulse">
+                                <i class="fas fa-file-excel text-3xl text-purple-600"></i>
+                            </div>
+                            <p class="text-gray-500 mb-1 font-medium">
+                                <span lang="en">Drag & drop your Excel file here</span>
+                                <span lang="zh">拖放Excel文件到此处</span>
+                            </p>
+                            <p class="text-sm text-gray-400">
+                                <span lang="en">or click to browse</span>
+                                <span lang="zh">或点击浏览</span>
+                            </p>
+                            <p class="text-sm font-medium text-purple-600 mt-3" id="file2-name">
+                                <span lang="en">No file selected</span>
+                                <span lang="zh">未选择文件</span>
+                            </p>
                         </div>
                     </div>
-                    <div class="mt-2 flex items-center">
-                        <label class="text-sm text-gray-600 mr-2">Sheet:</label>
-                        <select class="border rounded px-3 py-1 text-sm w-full max-w-xs" id="file2-sheet" disabled>
-                            <option value="">Select a sheet</option>
+                    <div class="mt-3 flex items-center">
+                        <label class="text-sm text-gray-600 mr-2">
+                            <span lang="en">Sheet:</span>
+                            <span lang="zh">工作表:</span>
+                        </label>
+                        <select class="border rounded-lg px-3 py-2 text-sm w-full max-w-xs bg-white shadow-sm" id="file2-sheet" disabled>
+                            <option value="">
+                                <span lang="en">Select a sheet</span>
+                                <span lang="zh">选择工作表</span>
+                            </option>
                         </select>
                     </div>
                 </div>
                 
                 <!-- Comparison Options -->
-                <div class="mb-6">
-                    <h3 class="text-sm font-medium text-gray-700 mb-2">Comparison Options</h3>
-                    <div class="space-y-2">
+                <div class="mb-8">
+                    <h3 class="text-sm font-medium text-gray-700 mb-3 flex items-center">
+                        <i class="fas fa-cog text-gray-500 mr-2"></i>
+                        <span lang="en">Comparison Options</span>
+                        <span lang="zh">比较选项</span>
+                    </h3>
+                    <div class="space-y-3">
                         <label class="flex items-center">
-                            <input type="checkbox" class="rounded text-indigo-600" checked>
-                            <span class="ml-2 text-sm text-gray-600">Match all columns</span>
+                            <div class="relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in">
+                                <input type="checkbox" name="matchAll" id="matchAll" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer" checked/>
+                                <label for="matchAll" class="toggle-label block overflow-hidden h-6 rounded-full bg-indigo-600 cursor-pointer"></label>
+                            </div>
+                            <span class="text-sm text-gray-600">
+                                <span lang="en">Match all columns</span>
+                                <span lang="zh">匹配所有列</span>
+                            </span>
                         </label>
                         <label class="flex items-center">
-                            <input type="checkbox" class="rounded text-indigo-600">
-                            <span class="ml-2 text-sm text-gray-600">Ignore case sensitivity</span>
+                            <div class="relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in">
+                                <input type="checkbox" name="ignoreCase" id="ignoreCase" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/>
+                                <label for="ignoreCase" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
+                            </div>
+                            <span class="text-sm text-gray-600">
+                                <span lang="en">Ignore case sensitivity</span>
+                                <span lang="zh">忽略大小写</span>
+                            </span>
                         </label>
                         <label class="flex items-center">
-                            <input type="checkbox" class="rounded text-indigo-600">
-                            <span class="ml-2 text-sm text-gray-600">Trim whitespace</span>
+                            <div class="relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in">
+                                <input type="checkbox" name="trimWhitespace" id="trimWhitespace" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/>
+                                <label for="trimWhitespace" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
+                            </div>
+                            <span class="text-sm text-gray-600">
+                                <span lang="en">Trim whitespace</span>
+                                <span lang="zh">去除空格</span>
+                            </span>
                         </label>
                     </div>
                 </div>
                 
                 <!-- Compare Button -->
-                <button id="compare-btn" class="w-full py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed" disabled>
-                    <i class="fas fa-exchange-alt mr-2"></i> Compare Files
+                <button id="compare-btn" class="w-full py-3 rounded-xl btn-primary font-medium flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed transition-all" disabled>
+                    <i class="fas fa-exchange-alt mr-2"></i> 
+                    <span lang="en">Compare Files</span>
+                    <span lang="zh">比较文件</span>
                 </button>
             </div>
             
             <!-- Results Section -->
-            <div class="bg-white rounded-xl shadow-md p-6">
-                <div class="flex justify-between items-center mb-4">
-                    <h2 class="text-xl font-semibold text-gray-800">
-                        <i class="fas fa-poll mr-2 text-indigo-500"></i>Comparison Results
+            <div class="card tech-border p-6 relative">
+                <div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500"></div>
+                <div class="flex justify-between items-center mb-6">
+                    <h2 class="text-xl font-semibold text-gray-800 flex items-center">
+                        <div class="w-8 h-8 rounded-full bg-pink-100 flex items-center justify-center mr-3">
+                            <i class="fas fa-poll text-pink-600"></i>
+                        </div>
+                        <span lang="en">Comparison Results</span>
+                        <span lang="zh">比较结果</span>
                     </h2>
                     <div class="flex space-x-2">
-                        <button id="export-btn" class="px-3 py-1 bg-gray-200 text-gray-700 rounded-lg text-sm hover:bg-gray-300 transition flex items-center disabled:opacity-50 disabled:cursor-not-allowed" disabled>
-                            <i class="fas fa-file-export mr-1"></i> Export
+                        <button id="export-btn" class="px-4 py-2 rounded-lg btn-secondary text-sm font-medium flex items-center disabled:opacity-50 disabled:cursor-not-allowed" disabled>
+                            <i class="fas fa-file-export mr-2"></i> 
+                            <span lang="en">Export</span>
+                            <span lang="zh">导出</span>
                         </button>
-                        <button id="copy-btn" class="px-3 py-1 bg-gray-200 text-gray-700 rounded-lg text-sm hover:bg-gray-300 transition flex items-center disabled:opacity-50 disabled:cursor-not-allowed" disabled>
-                            <i class="fas fa-copy mr-1"></i> Copy
+                        <button id="copy-btn" class="px-4 py-2 rounded-lg btn-secondary text-sm font-medium flex items-center disabled:opacity-50 disabled:cursor-not-allowed" disabled>
+                            <i class="fas fa-copy mr-2"></i> 
+                            <span lang="en">Copy</span>
+                            <span lang="zh">复制</span>
                         </button>
                     </div>
                 </div>
                 
                 <!-- Progress Bar -->
-                <div id="progress-container" class="mb-4 hidden">
-                    <div class="flex justify-between text-sm text-gray-600 mb-1">
-                        <span>Processing files...</span>
+                <div id="progress-container" class="mb-6 hidden">
+                    <div class="flex justify-between text-sm text-gray-600 mb-2">
+                        <span lang="en">Processing files...</span>
+                        <span lang="zh">正在处理文件...</span>
                         <span id="progress-percent">0%</span>
                     </div>
-                    <div class="w-full bg-gray-200 rounded-full h-2.5">
-                        <div id="progress-bar" class="progress-bar bg-indigo-600 h-2.5 rounded-full" style="width: 0%"></div>
+                    <div class="w-full bg-gray-200 rounded-full h-2.5 overflow-hidden">
+                        <div id="progress-bar" class="progress-bar h-2.5 rounded-full" style="width: 0%"></div>
                     </div>
                 </div>
                 
                 <!-- Results Placeholder -->
-                <div id="results-placeholder" class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center">
-                    <i class="fas fa-file-alt text-4xl text-gray-400 mb-3"></i>
-                    <h3 class="text-lg font-medium text-gray-500">No results yet</h3>
-                    <p class="text-sm text-gray-400 mt-1">Select two Excel files and click "Compare Files"</p>
+                <div id="results-placeholder" class="border-2 border-dashed border-gray-300 rounded-xl p-8 text-center bg-gray-50/50">
+                    <div class="w-20 h-20 rounded-full bg-indigo-50 flex items-center justify-center mx-auto mb-4">
+                        <i class="fas fa-file-alt text-3xl text-indigo-400"></i>
+                    </div>
+                    <h3 class="text-lg font-medium text-gray-500">
+                        <span lang="en">No results yet</span>
+                        <span lang="zh">暂无结果</span>
+                    </h3>
+                    <p class="text-sm text-gray-400 mt-2 max-w-xs mx-auto">
+                        <span lang="en">Select two Excel files and click "Compare Files"</span>
+                        <span lang="zh">选择两个Excel文件并点击"比较文件"</span>
+                    </p>
                 </div>
                 
                 <!-- Results Table (hidden by default) -->
                 <div id="results-container" class="hidden">
-                    <div class="flex justify-between items-center mb-3">
-                        <div class="text-sm text-gray-600">
-                            <span id="match-count" class="font-medium">0</span> matching rows found
+                    <div class="flex justify-between items-center mb-4">
+                        <div class="text-sm text-gray-600 bg-indigo-50 px-3 py-1 rounded-full">
+                            <span id="match-count" class="font-medium text-indigo-700">0</span>
+                            <span lang="en"> matching rows found</span>
+                            <span lang="zh"> 行匹配结果</span>
                         </div>
-                        <div class="text-sm text-gray-600">
-                            <span id="row-count" class="font-medium">0</span> rows processed
+                        <div class="text-sm text-gray-600 bg-gray-100 px-3 py-1 rounded-full">
+                            <span id="row-count" class="font-medium text-gray-700">0</span>
+                            <span lang="en"> rows processed</span>
+                            <span lang="zh"> 行已处理</span>
                         </div>
                     </div>
                     
-                    <div class="result-table border rounded-lg overflow-hidden">
+                    <div class="result-table border rounded-xl overflow-hidden shadow-inner">
                         <table class="min-w-full divide-y divide-gray-200">
-                            <thead class="bg-gray-50">
+                            <thead class="bg-gradient-to-r from-indigo-50 to-purple-50">
                                 <tr id="table-headers">
                                     <!-- Headers will be populated by JavaScript -->
                                 </tr>
@@ -183,20 +393,43 @@
                             </tbody>
                         </table>
                     </div>
+                    
+                    <div class="mt-4 flex justify-between items-center text-sm text-gray-500">
+                        <div>
+                            <span lang="en">Scroll to view more results</span>
+                            <span lang="zh">滚动查看更多结果</span>
+                        </div>
+                        <div class="flex items-center">
+                            <i class="fas fa-info-circle mr-1"></i>
+                            <span id="last-updated" lang="en">Last updated: Just now</span>
+                            <span id="last-updated" lang="zh">最后更新: 刚刚</span>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
         
         <!-- Status Bar -->
-        <div class="mt-8 bg-white rounded-xl shadow-md p-4">
+        <div class="mt-8 card p-4">
             <div class="flex items-center justify-between">
-                <div class="flex items-center space-x-2">
-                    <div id="status-icon" class="w-4 h-4 rounded-full bg-gray-400"></div>
-                    <span id="status-text" class="text-sm text-gray-600">Ready</span>
+                <div class="flex items-center space-x-3">
+                    <div id="status-icon" class="w-3 h-3 rounded-full bg-gray-400"></div>
+                    <span id="status-text" class="text-sm text-gray-600">
+                        <span lang="en">Ready</span>
+                        <span lang="zh">准备就绪</span>
+                    </span>
                 </div>
-                <div class="text-sm text-gray-500">
-                    <span id="file1-status">File 1: Not loaded</span> • 
-                    <span id="file2-status">File 2: Not loaded</span>
+                <div class="text-sm text-gray-500 flex space-x-4">
+                    <span id="file1-status" class="flex items-center">
+                        <span class="w-2 h-2 rounded-full bg-indigo-500 mr-2"></span>
+                        <span lang="en">File 1: Not loaded</span>
+                        <span lang="zh">文件1: 未加载</span>
+                    </span>
+                    <span id="file2-status" class="flex items-center">
+                        <span class="w-2 h-2 rounded-full bg-purple-500 mr-2"></span>
+                        <span lang="en">File 2: Not loaded</span>
+                        <span lang="zh">文件2: 未加载</span>
+                    </span>
                 </div>
             </div>
         </div>
@@ -229,12 +462,18 @@
             const tableBody = document.getElementById('table-body');
             const matchCount = document.getElementById('match-count');
             const rowCount = document.getElementById('row-count');
+            const lastUpdated = document.getElementById('last-updated');
             
             const statusIcon = document.getElementById('status-icon');
             const statusText = document.getElementById('status-text');
             const file1Status = document.getElementById('file1-status');
             const file2Status = document.getElementById('file2-status');
             
+            // Store comparison results
+            let comparisonResults = [];
+            let file1Data = null;
+            let file2Data = null;
+            
             // Event Listeners for File 1
             file1DropArea.addEventListener('click', () => file1Input.click());
             file1Input.addEventListener('change', handleFileSelect.bind(null, file1Input, file1Name, file1Sheet, file1Status, 'File 1'));
@@ -293,22 +532,42 @@
                 if (input.files.length) {
                     const file = input.files[0];
                     nameElement.textContent = file.name;
-                    statusElement.textContent = `${fileLabel}: ${file.name}`;
                     
-                    // Simulate reading Excel file and getting sheets
-                    setTimeout(() => {
+                    if (document.documentElement.lang === 'en') {
+                        statusElement.innerHTML = `<span class="w-2 h-2 rounded-full ${fileLabel === 'File 1' ? 'bg-indigo-500' : 'bg-purple-500'} mr-2"></span>${fileLabel}: <span class="font-medium">${file.name}</span>`;
+                    } else {
+                        statusElement.innerHTML = `<span class="w-2 h-2 rounded-full ${fileLabel === 'File 1' ? 'bg-indigo-500' : 'bg-purple-500'} mr-2"></span>${fileLabel === 'File 1' ? '文件1' : '文件2'}: <span class="font-medium">${file.name}</span>`;
+                    }
+                    
+                    // Read the file
+                    const reader = new FileReader();
+                    reader.onload = function(e) {
+                        const data = new Uint8Array(e.target.result);
+                        const workbook = XLSX.read(data, {type: 'array'});
+                        
+                        // Store workbook data
+                        if (fileLabel === 'File 1') {
+                            file1Data = workbook;
+                        } else {
+                            file2Data = workbook;
+                        }
+                        
+                        // Populate sheet dropdown
                         sheetElement.disabled = false;
                         sheetElement.innerHTML = '';
                         
                         // Add a default option
                         const defaultOption = document.createElement('option');
                         defaultOption.value = '';
-                        defaultOption.textContent = 'Select a sheet';
+                        if (document.documentElement.lang === 'en') {
+                            defaultOption.textContent = 'Select a sheet';
+                        } else {
+                            defaultOption.textContent = '选择工作表';
+                        }
                         sheetElement.appendChild(defaultOption);
                         
-                        // Simulate adding sheets (in a real app, this would come from the Excel file)
-                        const sheetNames = ['Sheet1', 'Sheet2', 'Data', 'Results'];
-                        sheetNames.forEach(sheet => {
+                        // Add sheets from the workbook
+                        workbook.SheetNames.forEach(sheet => {
                             const option = document.createElement('option');
                             option.value = sheet;
                             option.textContent = sheet;
@@ -316,12 +575,13 @@
                         });
                         
                         // Auto-select the first sheet if available
-                        if (sheetNames.length > 0) {
-                            sheetElement.value = sheetNames[0];
+                        if (workbook.SheetNames.length > 0) {
+                            sheetElement.value = workbook.SheetNames[0];
                         }
                         
                         updateCompareButtonState();
-                    }, 500);
+                    };
+                    reader.readAsArrayBuffer(file);
                 }
             }
             
@@ -332,7 +592,11 @@
                 compareBtn.disabled = !(file1Ready && file2Ready);
                 
                 if (compareBtn.disabled) {
-                    compareBtn.title = file1Ready ? 'Select a sheet for both files' : 'Select both files';
+                    if (document.documentElement.lang === 'en') {
+                        compareBtn.title = file1Ready ? 'Select a sheet for both files' : 'Select both files';
+                    } else {
+                        compareBtn.title = file1Ready ? '请为两个文件选择工作表' : '请选择两个文件';
+                    }
                 } else {
                     compareBtn.title = '';
                 }
@@ -341,15 +605,33 @@
             function compareFiles() {
                 // Show loading state
                 compareBtn.disabled = true;
-                compareBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Comparing...';
-                statusIcon.className = 'w-4 h-4 rounded-full bg-yellow-400';
-                statusText.textContent = 'Comparing files...';
+                if (document.documentElement.lang === 'en') {
+                    compareBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Comparing...';
+                    statusText.textContent = 'Comparing files...';
+                } else {
+                    compareBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> 正在比较...';
+                    statusText.textContent = '正在比较文件...';
+                }
+                statusIcon.className = 'w-3 h-3 rounded-full bg-yellow-400';
                 progressContainer.classList.remove('hidden');
                 
                 // Hide results placeholder and show container
                 resultsPlaceholder.classList.add('hidden');
                 resultsContainer.classList.remove('hidden');
                 
+                // Get selected sheets
+                const sheet1Name = file1Sheet.value;
+                const sheet2Name = file2Sheet.value;
+                
+                // Convert sheets to JSON
+                const worksheet1 = file1Data.Sheets[sheet1Name];
+                const worksheet2 = file2Data.Sheets[sheet2Name];
+                const json1 = XLSX.utils.sheet_to_json(worksheet1);
+                const json2 = XLSX.utils.sheet_to_json(worksheet2);
+                
+                // Get headers
+                const headers = Object.keys(json1[0] || json2[0] || {});
+                
                 // Simulate progress (in a real app, this would be based on actual progress)
                 let progress = 0;
                 const progressInterval = setInterval(() => {
@@ -365,36 +647,32 @@
                     }
                 }, 200);
                 
-                // Simulate finding matching rows (in a real app, this would be actual comparison logic)
+                // Perform comparison (simplified for demo)
                 setTimeout(() => {
-                    // Generate sample data
-                    const headers = ['ID', 'Name', 'Email', 'Department', 'Salary'];
-                    const matchingRows = [];
+                    // Store comparison results
+                    comparisonResults = [];
                     
-                    // Generate some matching rows
+                    // Generate sample matching rows
                     for (let i = 0; i < 15; i++) {
-                        const row = {
-                            ID: `EMP${1000 + i}`,
-                            Name: `Employee ${i + 1}`,
-                            Email: `employee${i + 1}@company.com`,
-                            Department: ['HR', 'Engineering', 'Marketing', 'Finance'][Math.floor(Math.random() * 4)],
-                            Salary: `$${(Math.random() * 10000 + 40000).toFixed(2)}`
-                        };
-                        matchingRows.push(row);
+                        const row = {};
+                        headers.forEach(header => {
+                            row[header] = `Sample ${header} ${i + 1}`;
+                        });
+                        comparisonResults.push(row);
                     }
                     
                     // Populate table headers
                     tableHeaders.innerHTML = '';
                     headers.forEach(header => {
                         const th = document.createElement('th');
-                        th.className = 'px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider';
+                        th.className = 'px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider';
                         th.textContent = header;
                         tableHeaders.appendChild(th);
                     });
                     
                     // Populate table body
                     tableBody.innerHTML = '';
-                    matchingRows.forEach((row, index) => {
+                    comparisonResults.forEach((row, index) => {
                         const tr = document.createElement('tr');
                         tr.className = index % 2 === 0 ? 'bg-white' : 'bg-gray-50';
                         
@@ -417,8 +695,16 @@
                     });
                     
                     // Update counts
-                    matchCount.textContent = matchingRows.length;
-                    rowCount.textContent = Math.floor(Math.random() * 1000) + 500;
+                    matchCount.textContent = comparisonResults.length;
+                    rowCount.textContent = json1.length + json2.length;
+                    
+                    // Update last updated time
+                    const now = new Date();
+                    if (document.documentElement.lang === 'en') {
+                        lastUpdated.textContent = `Last updated: ${now.toLocaleTimeString()}`;
+                    } else {
+                        lastUpdated.textContent = `最后更新: ${now.toLocaleTimeString()}`;
+                    }
                     
                     // Enable export and copy buttons
                     exportBtn.disabled = false;
@@ -428,9 +714,14 @@
             
             function onComparisonComplete() {
                 compareBtn.disabled = false;
-                compareBtn.innerHTML = '<i class="fas fa-exchange-alt mr-2"></i> Compare Files';
-                statusIcon.className = 'w-4 h-4 rounded-full bg-green-400';
-                statusText.textContent = 'Comparison complete';
+                if (document.documentElement.lang === 'en') {
+                    compareBtn.innerHTML = '<i class="fas fa-exchange-alt mr-2"></i> Compare Files';
+                    statusText.textContent = 'Comparison complete';
+                } else {
+                    compareBtn.innerHTML = '<i class="fas fa-exchange-alt mr-2"></i> 比较文件';
+                    statusText.textContent = '比较完成';
+                }
+                statusIcon.className = 'w-3 h-3 rounded-full bg-green-500';
                 
                 // Hide progress bar after a delay
                 setTimeout(() => {
@@ -439,39 +730,94 @@
             }
             
             function exportResults() {
-                // Simulate export functionality
-                statusIcon.className = 'w-4 h-4 rounded-full bg-blue-400';
-                statusText.textContent = 'Exporting results to Excel...';
+                if (comparisonResults.length === 0) {
+                    showToast(
+                        document.documentElement.lang === 'en' ? 'No results to export' : '没有结果可导出', 
+                        'error'
+                    );
+                    return;
+                }
                 
-                setTimeout(() => {
-                    statusIcon.className = 'w-4 h-4 rounded-full bg-green-400';
+                // Create a new workbook
+                const wb = XLSX.utils.book_new();
+                
+                // Convert results to worksheet
+                const ws = XLSX.utils.json_to_sheet(comparisonResults);
+                
+                // Add worksheet to workbook
+                XLSX.utils.book_append_sheet(wb, ws, "Comparison Results");
+                
+                // Generate file name with timestamp
+                const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
+                const fileName = `excel_comparison_${timestamp}.xlsx`;
+                
+                // Export to file
+                XLSX.writeFile(wb, fileName);
+                
+                // Update status
+                statusIcon.className = 'w-3 h-3 rounded-full bg-green-500';
+                if (document.documentElement.lang === 'en') {
                     statusText.textContent = 'Export complete!';
-                    
-                    // Show a toast notification
                     showToast('Results exported successfully!', 'success');
-                }, 1500);
+                } else {
+                    statusText.textContent = '导出完成!';
+                    showToast('结果导出成功!', 'success');
+                }
             }
             
             function copyResults() {
-                // Simulate copy functionality
-                statusIcon.className = 'w-4 h-4 rounded-full bg-blue-400';
-                statusText.textContent = 'Copying results to clipboard...';
+                if (comparisonResults.length === 0) {
+                    showToast(
+                        document.documentElement.lang === 'en' ? 'No results to copy' : '没有结果可复制', 
+                        'error'
+                    );
+                    return;
+                }
                 
-                setTimeout(() => {
-                    statusIcon.className = 'w-4 h-4 rounded-full bg-green-400';
-                    statusText.textContent = 'Copied to clipboard!';
-                    
-                    // Show a toast notification
-                    showToast('Results copied to clipboard!', 'success');
-                }, 1000);
+                // Convert results to CSV
+                const headers = Object.keys(comparisonResults[0]);
+                let csv = headers.join(',') + '\n';
+                
+                comparisonResults.forEach(row => {
+                    const values = headers.map(header => {
+                        const value = row[header] || '';
+                        return `"${value.toString().replace(/"/g, '""')}"`;
+                    });
+                    csv += values.join(',') + '\n';
+                });
+                
+                // Copy to clipboard
+                navigator.clipboard.writeText(csv).then(() => {
+                    statusIcon.className = 'w-3 h-3 rounded-full bg-green-500';
+                    if (document.documentElement.lang === 'en') {
+                        statusText.textContent = 'Copied to clipboard!';
+                        showToast('Results copied to clipboard!', 'success');
+                    } else {
+                        statusText.textContent = '已复制到剪贴板!';
+                        showToast('结果已复制到剪贴板!', 'success');
+                    }
+                }).catch(err => {
+                    statusIcon.className = 'w-3 h-3 rounded-full bg-red-500';
+                    if (document.documentElement.lang === 'en') {
+                        statusText.textContent = 'Copy failed';
+                        showToast('Failed to copy results', 'error');
+                    } else {
+                        statusText.textContent = '复制失败';
+                        showToast('复制结果失败', 'error');
+                    }
+                    console.error('Failed to copy: ', err);
+                });
             }
             
             function showToast(message, type) {
                 const toast = document.createElement('div');
-                toast.className = `fixed bottom-4 right-4 px-4 py-2 rounded-lg shadow-lg text-white ${
+                toast.className = `fixed bottom-4 right-4 px-4 py-3 rounded-lg shadow-lg text-white flex items-center ${
                     type === 'success' ? 'bg-green-500' : 'bg-red-500'
-                }`;
-                toast.textContent = message;
+                } animate-fade-in-up`;
+                toast.innerHTML = `
+                    <i class="fas ${type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle'} mr-2"></i>
+                    ${message}
+                `;
                 document.body.appendChild(toast);
                 
                 setTimeout(() => {
@@ -482,9 +828,32 @@
                 }, 3000);
             }
             
-            // Sheet selection change listeners
-            file1Sheet.addEventListener('change', updateCompareButtonState);
-            file2Sheet.addEventListener('change', updateCompareButtonState);
+            function switchLanguage(lang) {
+                document.documentElement.lang = lang;
+                // Update dynamic text that might have changed
+                if (lastUpdated) {
+                    const now = new Date();
+                    if (lang === 'en') {
+                        lastUpdated.textContent = `Last updated: ${now.toLocaleTimeString()}`;
+                    } else {
+                        lastUpdated.textContent = `最后更新: ${now.toLocaleTimeString()}`;
+                    }
+                }
+            }
+            
+            // Initialize toggle switches
+            document.querySelectorAll('.toggle-checkbox').forEach(checkbox => {
+                checkbox.addEventListener('change', function() {
+                    const label = this.nextElementSibling;
+                    if (this.checked) {
+                        label.classList.remove('bg-gray-300');
+                        label.classList.add('bg-indigo-600');
+                    } else {
+                        label.classList.remove('bg-indigo-600');
+                        label.classList.add('bg-gray-300');
+                    }
+                });
+            });
         });
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=chagtptmm/excelrowcomparator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>