Upload index.html

index.html

@@ -837,12 +837,42 @@
             if(validData.length > 0) {
                 document.getElementById('importStatus').innerHTML = `✅ 預先查詢完畢！目前名冊榜首為：<strong style="color:var(--accent); font-size:1.3rem; margin-left: 0.5rem; text-shadow:0 0 5px rgba(252,211,77,0.5);">${validData[0].name}</strong> (隱藏深度 ${validData[0].resultVal})`;
                 drawPodium(validData);
+
+                // 發射紙花特效
+                setTimeout(() => {
+                    confetti({ particleCount: 200, spread: 100, origin: { y: 0.6 }, colors: ['#fde047', '#34d399', '#60a5fa'] });
+                }, 500);
+
+                // 將 Excel 資料預先繪製長條圖
+                const ctx = document.getElementById('resultChart').getContext('2d');
+                if (chartInstance) chartInstance.destroy();
+                chartInstance = new Chart(ctx, {
+                    type: 'bar',
+                    data: {
+                        labels: validData.map(s => `${s.name} (${s.paddedNumber})`),
+                        datasets: [{
+                            label: '神之軌跡隱藏深度 (名冊)',
+                            data: validData.map(s => s.resultVal),
+                            backgroundColor: 'rgba(212, 175, 55, 0.7)',
+                            borderColor: '#fcd34d',
+                            borderWidth: 2,
+                            borderRadius: 6
+                        }]
+                    },
+                    options: {
+                        responsive: true,
+                        plugins: { legend: { labels: { color: '#f9fafb', font: {size: 14} } } },
+                        scales: {
+                            y: { ticks: { color: '#9ca3af' }, grid: { color: 'rgba(255,255,255,0.05)' } },
+                            x: { ticks: { color: '#d1d5db', maxRotation: 45, minRotation: 45 }, grid: { display: false } }
+                        }
+                    }
+                });
             } else {
                 document.getElementById('importStatus').innerHTML = `✅ 查詢完畢！可惜匯入名冊中無人獲得神之眷顧。`;
                 drawPodium([]);
+                if(chartInstance) { chartInstance.destroy(); chartInstance = null; }
             }
-            // 長條圖先不畫出，等待和現場合併
-            if(chartInstance) { chartInstance.destroy(); chartInstance = null; }
         }
 
         // 現場查詢後合併邏輯顯示結果