Hugging Face's logo

Spaces:
chagtptmm
/
excelrowcomparator
Running

App Files Community
chagtptmm commited on
Commit
70d9d14
·
verified ·
1 Parent(s): c3e696a

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +182 -109
index.html CHANGED
@@ -18,20 +18,21 @@
18
  }
19
 
20
  body {
21
- background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
22
  font-family: 'Inter', sans-serif;
 
23
  }
24
 
25
  .file-drop-area {
26
- border: 2px dashed #cbd5e0;
27
  transition: all 0.3s ease;
28
- background: rgba(255, 255, 255, 0.7);
29
  backdrop-filter: blur(10px);
30
  }
31
 
32
  .file-drop-area.active {
33
  border-color: var(--primary);
34
- background: rgba(99, 102, 241, 0.1);
35
  }
36
 
37
  .progress-bar {
@@ -40,10 +41,10 @@
40
  }
41
 
42
  .result-table {
43
- max-height: 400px;
44
  overflow-y: auto;
45
  scrollbar-width: thin;
46
- scrollbar-color: var(--primary) #f1f1f1;
47
  }
48
 
49
  .result-table::-webkit-scrollbar {
@@ -51,7 +52,7 @@
51
  }
52
 
53
  .result-table::-webkit-scrollbar-track {
54
- background: #f1f1f1;
55
  border-radius: 10px;
56
  }
57
 
@@ -74,11 +75,11 @@
74
  }
75
 
76
  .card {
77
- background: rgba(255, 255, 255, 0.8);
78
  backdrop-filter: blur(10px);
79
  border-radius: 16px;
80
- box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
81
- border: 1px solid rgba(255, 255, 255, 0.3);
82
  }
83
 
84
  .btn-primary {
@@ -94,13 +95,13 @@
94
  }
95
 
96
  .btn-secondary {
97
- background: rgba(255, 255, 255, 0.9);
98
- color: var(--dark);
99
  transition: all 0.3s ease;
100
  }
101
 
102
  .btn-secondary:hover {
103
- background: white;
104
  transform: translateY(-2px);
105
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
106
  }
@@ -141,15 +142,63 @@
141
  height: 3px;
142
  background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
143
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
144
  </style>
145
  </head>
146
  <body class="min-h-screen" lang="en">
147
  <div class="absolute top-5 right-5 z-10">
148
- <div class="flex bg-white rounded-full shadow-lg overflow-hidden">
149
- <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'}">
150
  EN
151
  </button>
152
- <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'}">
153
  中文
154
  </button>
155
  </div>
@@ -160,11 +209,11 @@
160
  <header class="mb-12 text-center">
161
  <div class="inline-block relative">
162
  <div class="absolute -inset-1 bg-gradient-to-r from-indigo-500 to-pink-500 rounded-lg blur opacity-25"></div>
163
- <h1 class="relative text-4xl font-bold text-gray-800 bg-white px-6 py-3 rounded-lg glow">
164
- <i class="fas fa-file-excel mr-2 text-indigo-600"></i><span lang="en">ExcelRowComparator</span><span lang="zh">Excel行比较工具</span>
165
  </h1>
166
  </div>
167
- <p class="text-gray-600 mt-4 max-w-2xl mx-auto">
168
  <span lang="en">Advanced tool for comparing Excel files and identifying matching rows with precision</span>
169
  <span lang="zh">高级Excel文件比较工具，精准识别匹配行</span>
170
  </p>
@@ -175,9 +224,9 @@
175
  <!-- File Selection Section -->
176
  <div class="card tech-border p-6 relative">
177
  <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>
178
- <h2 class="text-xl font-semibold text-gray-800 mb-6 flex items-center">
179
- <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
180
- <i class="fas fa-file-import text-indigo-600"></i>
181
  </div>
182
  <span lang="en">Select Files to Compare</span>
183
  <span lang="zh">选择要比较的文件</span>
@@ -185,7 +234,7 @@
185
 
186
  <!-- File 1 Selection -->
187
  <div class="mb-8">
188
- <label class="block text-sm font-medium text-gray-700 mb-3 flex items-center">
189
  <span class="w-6 h-6 rounded-full bg-indigo-600 text-white text-xs flex items-center justify-center mr-2">1</span>
190
  <span lang="en">First Excel File</span>
191
  <span lang="zh">第一个Excel文件</span>
@@ -193,29 +242,29 @@
193
  <div class="file-drop-area rounded-xl p-6 text-center cursor-pointer transition-all hover:shadow-md" id="file1-drop-area">
194
  <input type="file" id="file1-input" class="hidden" accept=".xlsx,.xls,.csv">
195
  <div class="flex flex-col items-center justify-center">
196
- <div class="w-16 h-16 rounded-full bg-indigo-50 flex items-center justify-center mb-3 pulse">
197
- <i class="fas fa-file-excel text-3xl text-indigo-600"></i>
198
  </div>
199
- <p class="text-gray-500 mb-1 font-medium">
200
  <span lang="en">Drag & drop your Excel file here</span>
201
  <span lang="zh">拖放Excel文件到此处</span>
202
  </p>
203
- <p class="text-sm text-gray-400">
204
  <span lang="en">or click to browse</span>
205
  <span lang="zh">或点击浏览</span>
206
  </p>
207
- <p class="text-sm font-medium text-indigo-600 mt-3" id="file1-name">
208
  <span lang="en">No file selected</span>
209
  <span lang="zh">未选择文件</span>
210
  </p>
211
  </div>
212
  </div>
213
  <div class="mt-3 flex items-center">
214
- <label class="text-sm text-gray-600 mr-2">
215
  <span lang="en">Sheet:</span>
216
  <span lang="zh">工作表:</span>
217
  </label>
218
- <select class="border rounded-lg px-3 py-2 text-sm w-full max-w-xs bg-white shadow-sm" id="file1-sheet" disabled>
219
  <option value="">
220
  <span lang="en">Select a sheet</span>
221
  <span lang="zh">选择工作表</span>
@@ -226,7 +275,7 @@
226
 
227
  <!-- File 2 Selection -->
228
  <div class="mb-8">
229
- <label class="block text-sm font-medium text-gray-700 mb-3 flex items-center">
230
  <span class="w-6 h-6 rounded-full bg-purple-600 text-white text-xs flex items-center justify-center mr-2">2</span>
231
  <span lang="en">Second Excel File</span>
232
  <span lang="zh">第二个Excel文件</span>
@@ -234,29 +283,29 @@
234
  <div class="file-drop-area rounded-xl p-6 text-center cursor-pointer transition-all hover:shadow-md" id="file2-drop-area">
235
  <input type="file" id="file2-input" class="hidden" accept=".xlsx,.xls,.csv">
236
  <div class="flex flex-col items-center justify-center">
237
- <div class="w-16 h-16 rounded-full bg-purple-50 flex items-center justify-center mb-3 pulse">
238
- <i class="fas fa-file-excel text-3xl text-purple-600"></i>
239
  </div>
240
- <p class="text-gray-500 mb-1 font-medium">
241
  <span lang="en">Drag & drop your Excel file here</span>
242
  <span lang="zh">拖放Excel文件到此处</span>
243
  </p>
244
- <p class="text-sm text-gray-400">
245
  <span lang="en">or click to browse</span>
246
  <span lang="zh">或点击浏览</span>
247
  </p>
248
- <p class="text-sm font-medium text-purple-600 mt-3" id="file2-name">
249
  <span lang="en">No file selected</span>
250
  <span lang="zh">未选择文件</span>
251
  </p>
252
  </div>
253
  </div>
254
  <div class="mt-3 flex items-center">
255
- <label class="text-sm text-gray-600 mr-2">
256
  <span lang="en">Sheet:</span>
257
  <span lang="zh">工作表:</span>
258
  </label>
259
- <select class="border rounded-lg px-3 py-2 text-sm w-full max-w-xs bg-white shadow-sm" id="file2-sheet" disabled>
260
  <option value="">
261
  <span lang="en">Select a sheet</span>
262
  <span lang="zh">选择工作表</span>
@@ -267,7 +316,7 @@
267
 
268
  <!-- Comparison Options -->
269
  <div class="mb-8">
270
- <h3 class="text-sm font-medium text-gray-700 mb-3 flex items-center">
271
  <i class="fas fa-cog text-gray-500 mr-2"></i>
272
  <span lang="en">Comparison Options</span>
273
  <span lang="zh">比较选项</span>
@@ -278,7 +327,7 @@
278
  <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/>
279
  <label for="matchAll" class="toggle-label block overflow-hidden h-6 rounded-full bg-indigo-600 cursor-pointer"></label>
280
  </div>
281
- <span class="text-sm text-gray-600">
282
  <span lang="en">Match all columns</span>
283
  <span lang="zh">匹配所有列</span>
284
  </span>
@@ -286,9 +335,9 @@
286
  <label class="flex items-center">
287
  <div class="relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in">
288
  <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"/>
289
- <label for="ignoreCase" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
290
  </div>
291
- <span class="text-sm text-gray-600">
292
  <span lang="en">Ignore case sensitivity</span>
293
  <span lang="zh">忽略大小写</span>
294
  </span>
@@ -296,9 +345,9 @@
296
  <label class="flex items-center">
297
  <div class="relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in">
298
  <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"/>
299
- <label for="trimWhitespace" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
300
  </div>
301
- <span class="text-sm text-gray-600">
302
  <span lang="en">Trim whitespace</span>
303
  <span lang="zh">去除空格</span>
304
  </span>
@@ -318,9 +367,9 @@
318
  <div class="card tech-border p-6 relative">
319
  <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>
320
  <div class="flex justify-between items-center mb-6">
321
- <h2 class="text-xl font-semibold text-gray-800 flex items-center">
322
- <div class="w-8 h-8 rounded-full bg-pink-100 flex items-center justify-center mr-3">
323
- <i class="fas fa-poll text-pink-600"></i>
324
  </div>
325
  <span lang="en">Comparison Results</span>
326
  <span lang="zh">比较结果</span>
@@ -341,57 +390,58 @@
341
 
342
  <!-- Progress Bar -->
343
  <div id="progress-container" class="mb-6 hidden">
344
- <div class="flex justify-between text-sm text-gray-600 mb-2">
345
  <span lang="en">Processing files...</span>
346
  <span lang="zh">正在处理文件...</span>
347
  <span id="progress-percent">0%</span>
348
  </div>
349
- <div class="w-full bg-gray-200 rounded-full h-2.5 overflow-hidden">
350
  <div id="progress-bar" class="progress-bar h-2.5 rounded-full" style="width: 0%"></div>
351
  </div>
352
  </div>
353
 
354
  <!-- Results Placeholder -->
355
- <div id="results-placeholder" class="border-2 border-dashed border-gray-300 rounded-xl p-8 text-center bg-gray-50/50">
356
- <div class="w-20 h-20 rounded-full bg-indigo-50 flex items-center justify-center mx-auto mb-4">
357
- <i class="fas fa-file-alt text-3xl text-indigo-400"></i>
358
  </div>
359
- <h3 class="text-lg font-medium text-gray-500">
360
  <span lang="en">No results yet</span>
361
  <span lang="zh">暂无结果</span>
362
  </h3>
363
- <p class="text-sm text-gray-400 mt-2 max-w-xs mx-auto">
364
  <span lang="en">Select two Excel files and click "Compare Files"</span>
365
  <span lang="zh">选择两个Excel文件并点击"比较文件"</span>
366
  </p>
367
  </div>
368
 
369
- <!-- Results Table (hidden by default) -->
370
  <div id="results-container" class="hidden">
371
  <div class="flex justify-between items-center mb-4">
372
- <div class="text-sm text-gray-600 bg-indigo-50 px-3 py-1 rounded-full">
373
- <span id="match-count" class="font-medium text-indigo-700">0</span>
374
- <span lang="en"> matching rows found</span>
375
- <span lang="zh"> 行匹配结果</span>
 
 
 
376
  </div>
377
- <div class="text-sm text-gray-600 bg-gray-100 px-3 py-1 rounded-full">
378
- <span id="row-count" class="font-medium text-gray-700">0</span>
379
- <span lang="en"> rows processed</span>
380
- <span lang="zh"> 行已处理</span>
 
 
381
  </div>
382
  </div>
383
 
384
- <div class="result-table border rounded-xl overflow-hidden shadow-inner">
385
- <table class="min-w-full divide-y divide-gray-200">
386
- <thead class="bg-gradient-to-r from-indigo-50 to-purple-50">
387
- <tr id="table-headers">
388
- <!-- Headers will be populated by JavaScript -->
389
- </tr>
390
- </thead>
391
- <tbody class="bg-white divide-y divide-gray-200" id="table-body">
392
- <!-- Rows will be populated by JavaScript -->
393
- </tbody>
394
- </table>
395
  </div>
396
 
397
  <div class="mt-4 flex justify-between items-center text-sm text-gray-500">
@@ -413,8 +463,8 @@
413
  <div class="mt-8 card p-4">
414
  <div class="flex items-center justify-between">
415
  <div class="flex items-center space-x-3">
416
- <div id="status-icon" class="w-3 h-3 rounded-full bg-gray-400"></div>
417
- <span id="status-text" class="text-sm text-gray-600">
418
  <span lang="en">Ready</span>
419
  <span lang="zh">准备就绪</span>
420
  </span>
@@ -458,8 +508,8 @@
458
 
459
  const resultsPlaceholder = document.getElementById('results-placeholder');
460
  const resultsContainer = document.getElementById('results-container');
461
- const tableHeaders = document.getElementById('table-headers');
462
- const tableBody = document.getElementById('table-body');
463
  const matchCount = document.getElementById('match-count');
464
  const rowCount = document.getElementById('row-count');
465
  const lastUpdated = document.getElementById('last-updated');
@@ -652,46 +702,39 @@
652
  // Store comparison results
653
  comparisonResults = [];
654
 
655
- // Generate sample matching rows
656
  for (let i = 0; i < 15; i++) {
657
  const row = {};
658
  headers.forEach(header => {
659
- row[header] = `Sample ${header} ${i + 1}`;
 
660
  });
661
  comparisonResults.push(row);
662
  }
663
 
664
- // Populate table headers
665
- tableHeaders.innerHTML = '';
666
  headers.forEach(header => {
667
- const th = document.createElement('th');
668
- th.className = 'px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider';
669
- th.textContent = header;
670
- tableHeaders.appendChild(th);
671
  });
672
 
673
- // Populate table body
674
- tableBody.innerHTML = '';
 
 
 
 
675
  comparisonResults.forEach((row, index) => {
676
- const tr = document.createElement('tr');
677
- tr.className = index % 2 === 0 ? 'bg-white' : 'bg-gray-50';
678
-
679
- // Add highlight animation class to new rows
680
- setTimeout(() => {
681
- tr.classList.add('highlight-row');
682
- setTimeout(() => {
683
- tr.classList.remove('highlight-row');
684
- }, 1500);
685
- }, index * 50);
686
-
687
  headers.forEach(header => {
688
- const td = document.createElement('td');
689
- td.className = 'px-6 py-4 whitespace-nowrap text-sm text-gray-900';
690
- td.textContent = row[header] || '';
691
- tr.appendChild(td);
 
692
  });
693
-
694
- tableBody.appendChild(tr);
695
  });
696
 
697
  // Update counts
@@ -812,8 +855,8 @@
812
  function showToast(message, type) {
813
  const toast = document.createElement('div');
814
  toast.className = `fixed bottom-4 right-4 px-4 py-3 rounded-lg shadow-lg text-white flex items-center ${
815
- type === 'success' ? 'bg-green-500' : 'bg-red-500'
816
- } animate-fade-in-up`;
817
  toast.innerHTML = `
818
  <i class="fas ${type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle'} mr-2"></i>
819
  ${message}
@@ -839,6 +882,36 @@
839
  lastUpdated.textContent = `最后更新: ${now.toLocaleTimeString()}`;
840
  }
841
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
842
  }
843
 
844
  // Initialize toggle switches
@@ -846,11 +919,11 @@
846
  checkbox.addEventListener('change', function() {
847
  const label = this.nextElementSibling;
848
  if (this.checked) {
849
- label.classList.remove('bg-gray-300');
850
  label.classList.add('bg-indigo-600');
851
  } else {
852
  label.classList.remove('bg-indigo-600');
853
- label.classList.add('bg-gray-300');
854
  }
855
  });
856
  });
 
18
  }
19
 
20
  body {
21
+ background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
22
  font-family: 'Inter', sans-serif;
23
+ color: #f8fafc;
24
  }
25
 
26
  .file-drop-area {
27
+ border: 2px dashed #334155;
28
  transition: all 0.3s ease;
29
+ background: rgba(30, 41, 59, 0.7);
30
  backdrop-filter: blur(10px);
31
  }
32
 
33
  .file-drop-area.active {
34
  border-color: var(--primary);
35
+ background: rgba(99, 102, 241, 0.2);
36
  }
37
 
38
  .progress-bar {
 
41
  }
42
 
43
  .result-table {
44
+ max-height: 500px;
45
  overflow-y: auto;
46
  scrollbar-width: thin;
47
+ scrollbar-color: var(--primary) #1e293b;
48
  }
49
 
50
  .result-table::-webkit-scrollbar {
 
52
  }
53
 
54
  .result-table::-webkit-scrollbar-track {
55
+ background: #1e293b;
56
  border-radius: 10px;
57
  }
58
 
 
75
  }
76
 
77
  .card {
78
+ background: rgba(30, 41, 59, 0.8);
79
  backdrop-filter: blur(10px);
80
  border-radius: 16px;
81
+ box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
82
+ border: 1px solid rgba(255, 255, 255, 0.1);
83
  }
84
 
85
  .btn-primary {
 
95
  }
96
 
97
  .btn-secondary {
98
+ background: rgba(255, 255, 255, 0.1);
99
+ color: var(--light);
100
  transition: all 0.3s ease;
101
  }
102
 
103
  .btn-secondary:hover {
104
+ background: rgba(255, 255, 255, 0.2);
105
  transform: translateY(-2px);
106
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
107
  }
 
142
  height: 3px;
143
  background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
144
  }
145
+
146
+ .data-grid {
147
+ display: grid;
148
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
149
+ gap: 1px;
150
+ background-color: #334155;
151
+ }
152
+
153
+ .data-cell {
154
+ background-color: #1e293b;
155
+ padding: 12px;
156
+ border-bottom: 1px solid #334155;
157
+ }
158
+
159
+ .data-header {
160
+ background-color: #0f172a;
161
+ font-weight: 600;
162
+ color: #94a3b8;
163
+ text-transform: uppercase;
164
+ font-size: 0.75rem;
165
+ letter-spacing: 0.05em;
166
+ }
167
+
168
+ .match-indicator {
169
+ width: 10px;
170
+ height: 10px;
171
+ border-radius: 50%;
172
+ background-color: #10b981;
173
+ display: inline-block;
174
+ margin-right: 8px;
175
+ }
176
+
177
+ .hud-display {
178
+ background: rgba(15, 23, 42, 0.7);
179
+ border: 1px solid rgba(74, 222, 128, 0.2);
180
+ border-radius: 8px;
181
+ padding: 12px;
182
+ font-family: 'Courier New', monospace;
183
+ }
184
+
185
+ @keyframes fadeIn {
186
+ from { opacity: 0; transform: translateY(10px); }
187
+ to { opacity: 1; transform: translateY(0); }
188
+ }
189
+
190
+ .animate-fade-in {
191
+ animation: fadeIn 0.3s ease-out forwards;
192
+ }
193
  </style>
194
  </head>
195
  <body class="min-h-screen" lang="en">
196
  <div class="absolute top-5 right-5 z-10">
197
+ <div class="flex bg-gray-800 rounded-full shadow-lg overflow-hidden border border-gray-700">
198
+ <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-400 hover:bg-gray-700': document.documentElement.lang !== 'en'}">
199
  EN
200
  </button>
201
+ <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-400 hover:bg-gray-700': document.documentElement.lang !== 'zh'}">
202
  中文
203
  </button>
204
  </div>
 
209
  <header class="mb-12 text-center">
210
  <div class="inline-block relative">
211
  <div class="absolute -inset-1 bg-gradient-to-r from-indigo-500 to-pink-500 rounded-lg blur opacity-25"></div>
212
+ <h1 class="relative text-4xl font-bold text-white bg-gray-800 px-6 py-3 rounded-lg glow border border-gray-700">
213
+ <i class="fas fa-file-excel mr-2 text-indigo-400"></i><span lang="en">ExcelRowComparator</span><span lang="zh">Excel行比较工具</span>
214
  </h1>
215
  </div>
216
+ <p class="text-gray-400 mt-4 max-w-2xl mx-auto">
217
  <span lang="en">Advanced tool for comparing Excel files and identifying matching rows with precision</span>
218
  <span lang="zh">高级Excel文件比较工具，精准识别匹配行</span>
219
  </p>
 
224
  <!-- File Selection Section -->
225
  <div class="card tech-border p-6 relative">
226
  <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>
227
+ <h2 class="text-xl font-semibold text-white mb-6 flex items-center">
228
+ <div class="w-8 h-8 rounded-full bg-indigo-900 flex items-center justify-center mr-3">
229
+ <i class="fas fa-file-import text-indigo-400"></i>
230
  </div>
231
  <span lang="en">Select Files to Compare</span>
232
  <span lang="zh">选择要比较的文件</span>
 
234
 
235
  <!-- File 1 Selection -->
236
  <div class="mb-8">
237
+ <label class="block text-sm font-medium text-gray-300 mb-3 flex items-center">
238
  <span class="w-6 h-6 rounded-full bg-indigo-600 text-white text-xs flex items-center justify-center mr-2">1</span>
239
  <span lang="en">First Excel File</span>
240
  <span lang="zh">第一个Excel文件</span>
 
242
  <div class="file-drop-area rounded-xl p-6 text-center cursor-pointer transition-all hover:shadow-md" id="file1-drop-area">
243
  <input type="file" id="file1-input" class="hidden" accept=".xlsx,.xls,.csv">
244
  <div class="flex flex-col items-center justify-center">
245
+ <div class="w-16 h-16 rounded-full bg-indigo-900 flex items-center justify-center mb-3 pulse">
246
+ <i class="fas fa-file-excel text-3xl text-indigo-400"></i>
247
  </div>
248
+ <p class="text-gray-400 mb-1 font-medium">
249
  <span lang="en">Drag & drop your Excel file here</span>
250
  <span lang="zh">拖放Excel文件到此处</span>
251
  </p>
252
+ <p class="text-sm text-gray-500">
253
  <span lang="en">or click to browse</span>
254
  <span lang="zh">或点击浏览</span>
255
  </p>
256
+ <p class="text-sm font-medium text-indigo-400 mt-3" id="file1-name">
257
  <span lang="en">No file selected</span>
258
  <span lang="zh">未选择文件</span>
259
  </p>
260
  </div>
261
  </div>
262
  <div class="mt-3 flex items-center">
263
+ <label class="text-sm text-gray-400 mr-2">
264
  <span lang="en">Sheet:</span>
265
  <span lang="zh">工作表:</span>
266
  </label>
267
+ <select class="border border-gray-700 rounded-lg px-3 py-2 text-sm w-full max-w-xs bg-gray-800 text-white shadow-sm" id="file1-sheet" disabled>
268
  <option value="">
269
  <span lang="en">Select a sheet</span>
270
  <span lang="zh">选择工作表</span>
 
275
 
276
  <!-- File 2 Selection -->
277
  <div class="mb-8">
278
+ <label class="block text-sm font-medium text-gray-300 mb-3 flex items-center">
279
  <span class="w-6 h-6 rounded-full bg-purple-600 text-white text-xs flex items-center justify-center mr-2">2</span>
280
  <span lang="en">Second Excel File</span>
281
  <span lang="zh">第二个Excel文件</span>
 
283
  <div class="file-drop-area rounded-xl p-6 text-center cursor-pointer transition-all hover:shadow-md" id="file2-drop-area">
284
  <input type="file" id="file2-input" class="hidden" accept=".xlsx,.xls,.csv">
285
  <div class="flex flex-col items-center justify-center">
286
+ <div class="w-16 h-16 rounded-full bg-purple-900 flex items-center justify-center mb-3 pulse">
287
+ <i class="fas fa-file-excel text-3xl text-purple-400"></i>
288
  </div>
289
+ <p class="text-gray-400 mb-1 font-medium">
290
  <span lang="en">Drag & drop your Excel file here</span>
291
  <span lang="zh">拖放Excel文件到此处</span>
292
  </p>
293
+ <p class="text-sm text-gray-500">
294
  <span lang="en">or click to browse</span>
295
  <span lang="zh">或点击浏览</span>
296
  </p>
297
+ <p class="text-sm font-medium text-purple-400 mt-3" id="file2-name">
298
  <span lang="en">No file selected</span>
299
  <span lang="zh">未选择文件</span>
300
  </p>
301
  </div>
302
  </div>
303
  <div class="mt-3 flex items-center">
304
+ <label class="text-sm text-gray-400 mr-2">
305
  <span lang="en">Sheet:</span>
306
  <span lang="zh">工作表:</span>
307
  </label>
308
+ <select class="border border-gray-700 rounded-lg px-3 py-2 text-sm w-full max-w-xs bg-gray-800 text-white shadow-sm" id="file2-sheet" disabled>
309
  <option value="">
310
  <span lang="en">Select a sheet</span>
311
  <span lang="zh">选择工作表</span>
 
316
 
317
  <!-- Comparison Options -->
318
  <div class="mb-8">
319
+ <h3 class="text-sm font-medium text-gray-300 mb-3 flex items-center">
320
  <i class="fas fa-cog text-gray-500 mr-2"></i>
321
  <span lang="en">Comparison Options</span>
322
  <span lang="zh">比较选项</span>
 
327
  <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/>
328
  <label for="matchAll" class="toggle-label block overflow-hidden h-6 rounded-full bg-indigo-600 cursor-pointer"></label>
329
  </div>
330
+ <span class="text-sm text-gray-400">
331
  <span lang="en">Match all columns</span>
332
  <span lang="zh">匹配所有列</span>
333
  </span>
 
335
  <label class="flex items-center">
336
  <div class="relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in">
337
  <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"/>
338
+ <label for="ignoreCase" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-700 cursor-pointer"></label>
339
  </div>
340
+ <span class="text-sm text-gray-400">
341
  <span lang="en">Ignore case sensitivity</span>
342
  <span lang="zh">忽略大小写</span>
343
  </span>
 
345
  <label class="flex items-center">
346
  <div class="relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in">
347
  <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"/>
348
+ <label for="trimWhitespace" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-700 cursor-pointer"></label>
349
  </div>
350
+ <span class="text-sm text-gray-400">
351
  <span lang="en">Trim whitespace</span>
352
  <span lang="zh">去除空格</span>
353
  </span>
 
367
  <div class="card tech-border p-6 relative">
368
  <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>
369
  <div class="flex justify-between items-center mb-6">
370
+ <h2 class="text-xl font-semibold text-white flex items-center">
371
+ <div class="w-8 h-8 rounded-full bg-pink-900 flex items-center justify-center mr-3">
372
+ <i class="fas fa-poll text-pink-400"></i>
373
  </div>
374
  <span lang="en">Comparison Results</span>
375
  <span lang="zh">比较结果</span>
 
390
 
391
  <!-- Progress Bar -->
392
  <div id="progress-container" class="mb-6 hidden">
393
+ <div class="flex justify-between text-sm text-gray-400 mb-2">
394
  <span lang="en">Processing files...</span>
395
  <span lang="zh">正在处理文件...</span>
396
  <span id="progress-percent">0%</span>
397
  </div>
398
+ <div class="w-full bg-gray-800 rounded-full h-2.5 overflow-hidden">
399
  <div id="progress-bar" class="progress-bar h-2.5 rounded-full" style="width: 0%"></div>
400
  </div>
401
  </div>
402
 
403
  <!-- Results Placeholder -->
404
+ <div id="results-placeholder" class="border-2 border-dashed border-gray-700 rounded-xl p-8 text-center bg-gray-800/50">
405
+ <div class="w-20 h-20 rounded-full bg-indigo-900 flex items-center justify-center mx-auto mb-4">
406
+ <i class="fas fa-file-alt text-3xl text-indigo-500"></i>
407
  </div>
408
+ <h3 class="text-lg font-medium text-gray-400">
409
  <span lang="en">No results yet</span>
410
  <span lang="zh">暂无结果</span>
411
  </h3>
412
+ <p class="text-sm text-gray-500 mt-2 max-w-xs mx-auto">
413
  <span lang="en">Select two Excel files and click "Compare Files"</span>
414
  <span lang="zh">选择两个Excel文件并点击"比较文件"</span>
415
  </p>
416
  </div>
417
 
418
+ <!-- Results Container -->
419
  <div id="results-container" class="hidden">
420
  <div class="flex justify-between items-center mb-4">
421
+ <div class="hud-display flex items-center">
422
+ <span class="match-indicator"></span>
423
+ <span class="text-green-400 font-mono">
424
+ <span id="match-count" class="font-bold">0</span>
425
+ <span lang="en"> matching rows</span>
426
+ <span lang="zh"> 行匹配结果</span>
427
+ </span>
428
  </div>
429
+ <div class="hud-display">
430
+ <span class="text-blue-400 font-mono">
431
+ <span id="row-count" class="font-bold">0</span>
432
+ <span lang="en"> rows processed</span>
433
+ <span lang="zh"> 行已处理</span>
434
+ </span>
435
  </div>
436
  </div>
437
 
438
+ <div class="result-table border border-gray-700 rounded-xl overflow-hidden">
439
+ <div class="data-grid" id="data-grid-headers">
440
+ <!-- Headers will be populated by JavaScript -->
441
+ </div>
442
+ <div class="data-grid" id="data-grid-body" style="max-height: 400px; overflow-y: auto;">
443
+ <!-- Rows will be populated by JavaScript -->
444
+ </div>
 
 
 
 
445
  </div>
446
 
447
  <div class="mt-4 flex justify-between items-center text-sm text-gray-500">
 
463
  <div class="mt-8 card p-4">
464
  <div class="flex items-center justify-between">
465
  <div class="flex items-center space-x-3">
466
+ <div id="status-icon" class="w-3 h-3 rounded-full bg-gray-500"></div>
467
+ <span id="status-text" class="text-sm text-gray-400">
468
  <span lang="en">Ready</span>
469
  <span lang="zh">准备就绪</span>
470
  </span>
 
508
 
509
  const resultsPlaceholder = document.getElementById('results-placeholder');
510
  const resultsContainer = document.getElementById('results-container');
511
+ const dataGridHeaders = document.getElementById('data-grid-headers');
512
+ const dataGridBody = document.getElementById('data-grid-body');
513
  const matchCount = document.getElementById('match-count');
514
  const rowCount = document.getElementById('row-count');
515
  const lastUpdated = document.getElementById('last-updated');
 
702
  // Store comparison results
703
  comparisonResults = [];
704
 
705
+ // Generate sample matching rows (showing identical rows)
706
  for (let i = 0; i < 15; i++) {
707
  const row = {};
708
  headers.forEach(header => {
709
+ // Create identical values for both files
710
+ row[header] = `Sample Value ${i + 1}`;
711
  });
712
  comparisonResults.push(row);
713
  }
714
 
715
+ // Populate data grid headers
716
+ dataGridHeaders.innerHTML = '';
717
  headers.forEach(header => {
718
+ const headerCell = document.createElement('div');
719
+ headerCell.className = 'data-cell data-header';
720
+ headerCell.textContent = header;
721
+ dataGridHeaders.appendChild(headerCell);
722
  });
723
 
724
+ // Set grid template columns based on number of headers
725
+ dataGridHeaders.style.gridTemplateColumns = `repeat(${headers.length}, minmax(150px, 1fr))`;
726
+ dataGridBody.style.gridTemplateColumns = `repeat(${headers.length}, minmax(150px, 1fr))`;
727
+
728
+ // Populate data grid body
729
+ dataGridBody.innerHTML = '';
730
  comparisonResults.forEach((row, index) => {
 
 
 
 
 
 
 
 
 
 
 
731
  headers.forEach(header => {
732
+ const cell = document.createElement('div');
733
+ cell.className = 'data-cell animate-fade-in';
734
+ cell.style.animationDelay = `${index * 0.05}s`;
735
+ cell.textContent = row[header] || '';
736
+ dataGridBody.appendChild(cell);
737
  });
 
 
738
  });
739
 
740
  // Update counts
 
855
  function showToast(message, type) {
856
  const toast = document.createElement('div');
857
  toast.className = `fixed bottom-4 right-4 px-4 py-3 rounded-lg shadow-lg text-white flex items-center ${
858
+ type === 'success' ? 'bg-green-600' : 'bg-red-600'
859
+ } animate-fade-in`;
860
  toast.innerHTML = `
861
  <i class="fas ${type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle'} mr-2"></i>
862
  ${message}
 
882
  lastUpdated.textContent = `最后更新: ${now.toLocaleTimeString()}`;
883
  }
884
  }
885
+
886
+ // Update file status text
887
+ if (file1Input.files.length) {
888
+ const fileName = file1Input.files[0].name;
889
+ if (lang === 'en') {
890
+ file1Status.innerHTML = `<span class="w-2 h-2 rounded-full bg-indigo-500 mr-2"></span>File 1: <span class="font-medium">${fileName}</span>`;
891
+ } else {
892
+ file1Status.innerHTML = `<span class="w-2 h-2 rounded-full bg-indigo-500 mr-2"></span>文件1: <span class="font-medium">${fileName}</span>`;
893
+ }
894
+ }
895
+
896
+ if (file2Input.files.length) {
897
+ const fileName = file2Input.files[0].name;
898
+ if (lang === 'en') {
899
+ file2Status.innerHTML = `<span class="w-2 h-2 rounded-full bg-purple-500 mr-2"></span>File 2: <span class="font-medium">${fileName}</span>`;
900
+ } else {
901
+ file2Status.innerHTML = `<span class="w-2 h-2 rounded-full bg-purple-500 mr-2"></span>文件2: <span class="font-medium">${fileName}</span>`;
902
+ }
903
+ }
904
+
905
+ // Update compare button text
906
+ if (compareBtn.disabled) {
907
+ if (lang === 'en') {
908
+ compareBtn.innerHTML = '<i class="fas fa-exchange-alt mr-2"></i> Compare Files';
909
+ statusText.textContent = 'Ready';
910
+ } else {
911
+ compareBtn.innerHTML = '<i class="fas fa-exchange-alt mr-2"></i> 比较文件';
912
+ statusText.textContent = '准备就绪';
913
+ }
914
+ }
915
  }
916
 
917
  // Initialize toggle switches
 
919
  checkbox.addEventListener('change', function() {
920
  const label = this.nextElementSibling;
921
  if (this.checked) {
922
+ label.classList.remove('bg-gray-700');
923
  label.classList.add('bg-indigo-600');
924
  } else {
925
  label.classList.remove('bg-indigo-600');
926
+ label.classList.add('bg-gray-700');
927
  }
928
  });
929
  });