From c06d5b01693c6ceaf802c9859d4b7fe2bd0f37c6 Mon Sep 17 00:00:00 2001
From: ShanHuangNet <shan@supplywhy.ai>
Date: Sat, 31 Jan 2026 10:46:53 -0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=9B=B4=E6=96=B0=E6=A8=A3=E5=BC=8F?=
 =?UTF-8?q?=E9=A0=81=E9=9D=A2=E9=80=A3=E7=B5=90=E4=BB=A5=E5=8F=8D=E6=98=A0?=
 =?UTF-8?q?=E6=AD=A3=E7=A2=BA=E7=9A=84=E5=91=BD=E5=90=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 修改多個樣式頁面的連結，將其名稱更改為更具描述性的格式，例如從 "28-data-dense.html" 更改為 "28-data-dense-dashboard.html"。
- 確保所有相關的樣式頁面連結一致性和可讀性。
---
 index.html | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/index.html b/index.html
index 7a5753b..72c09a7 100644
--- a/index.html
+++ b/index.html
@@ -401,7 +401,7 @@ <h3 class="text-3xl font-bold text-slate-900 mb-2">BI / Analytics Styles</h3>
             <p class="text-slate-600 mb-8">商業智慧與數據分析儀表板專用風格</p>
             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6">
                 <!-- 28. Data-Dense -->
-                <a href="styles/28-data-dense.html" class="card-hover bg-white rounded-2xl overflow-hidden border border-slate-200 cursor-pointer">
+                <a href="styles/28-data-dense-dashboard.html" class="card-hover bg-white rounded-2xl overflow-hidden border border-slate-200 cursor-pointer">
                     <div class="h-40 bg-slate-100 flex items-center justify-center p-3">
                         <div class="grid grid-cols-3 gap-1 w-full">
                             <div class="bg-white rounded p-1 text-center text-xs">KPI</div>
@@ -417,7 +417,7 @@ <h4 class="text-lg font-semibold text-slate-900">Data-Dense Dashboard</h4>
                     </div>
                 </a>
                 <!-- 29. Heatmap -->
-                <a href="styles/29-heatmap.html" class="card-hover bg-white rounded-2xl overflow-hidden border border-slate-200 cursor-pointer">
+                <a href="styles/29-heatmap-density.html" class="card-hover bg-white rounded-2xl overflow-hidden border border-slate-200 cursor-pointer">
                     <div class="h-40 flex items-center justify-center p-3">
                         <div class="grid grid-cols-5 gap-1">
                             <div class="w-6 h-6 bg-blue-200 rounded"></div>
@@ -438,7 +438,7 @@ <h4 class="text-lg font-semibold text-slate-900">Heat Map Style</h4>
                     </div>
                 </a>
                 <!-- 30. Executive -->
-                <a href="styles/30-executive.html" class="card-hover bg-white rounded-2xl overflow-hidden border border-slate-200 cursor-pointer">
+                <a href="styles/30-executive-summary.html" class="card-hover bg-white rounded-2xl overflow-hidden border border-slate-200 cursor-pointer">
                     <div class="h-40 bg-slate-800 flex items-center justify-center">
                         <div class="text-center text-white">
                             <div class="text-3xl font-bold">$2.4M</div>
@@ -451,7 +451,7 @@ <h4 class="text-lg font-semibold text-slate-900">Executive Dashboard</h4>
                     </div>
                 </a>
                 <!-- 31. Real-Time -->
-                <a href="styles/31-realtime.html" class="card-hover bg-white rounded-2xl overflow-hidden border border-slate-200 cursor-pointer">
+                <a href="styles/31-real-time-monitoring.html" class="card-hover bg-white rounded-2xl overflow-hidden border border-slate-200 cursor-pointer">
                     <div class="h-40 bg-slate-900 flex items-center justify-center">
                         <div class="flex items-center gap-2">
                             <div class="w-3 h-3 bg-green-500 rounded-full animate-pulse"></div>
@@ -464,7 +464,7 @@ <h4 class="text-lg font-semibold text-slate-900">Real-Time Monitoring</h4>
                     </div>
                 </a>
                 <!-- 32. Drill-Down -->
-                <a href="styles/32-drilldown.html" class="card-hover bg-white rounded-2xl overflow-hidden border border-slate-200 cursor-pointer">
+                <a href="styles/32-drill-down-analytics.html" class="card-hover bg-white rounded-2xl overflow-hidden border border-slate-200 cursor-pointer">
                     <div class="h-40 bg-slate-100 flex items-center justify-center">
                         <div class="text-center">
                             <div class="text-sm text-slate-500">Region → Country → City</div>
@@ -477,7 +477,7 @@ <h4 class="text-lg font-semibold text-slate-900">Drill-Down Analytics</h4>
                     </div>
                 </a>
                 <!-- 33. Comparative -->
-                <a href="styles/33-comparative.html" class="card-hover bg-white rounded-2xl overflow-hidden border border-slate-200 cursor-pointer">
+                <a href="styles/33-comparative-analytics.html" class="card-hover bg-white rounded-2xl overflow-hidden border border-slate-200 cursor-pointer">
                     <div class="h-40 bg-slate-100 flex items-center justify-center gap-4">
                         <div class="text-center">
                             <div class="text-blue-600 font-bold">A</div>
@@ -495,7 +495,7 @@ <h4 class="text-lg font-semibold text-slate-900">Comparative Analysis</h4>
                     </div>
                 </a>
                 <!-- 34. Predictive -->
-                <a href="styles/34-predictive.html" class="card-hover bg-white rounded-2xl overflow-hidden border border-slate-200 cursor-pointer">
+                <a href="styles/34-predictive-analytics.html" class="card-hover bg-white rounded-2xl overflow-hidden border border-slate-200 cursor-pointer">
                     <div class="h-40 bg-slate-900 flex items-center justify-center">
                         <div class="text-center">
                             <div class="text-purple-400 text-sm">Forecast</div>
@@ -509,7 +509,7 @@ <h4 class="text-lg font-semibold text-slate-900">Predictive Analytics</h4>
                     </div>
                 </a>
                 <!-- 35. User Behavior -->
-                <a href="styles/35-user-behavior.html" class="card-hover bg-white rounded-2xl overflow-hidden border border-slate-200 cursor-pointer">
+                <a href="styles/35-user-behavior-analytics.html" class="card-hover bg-white rounded-2xl overflow-hidden border border-slate-200 cursor-pointer">
                     <div class="h-40 bg-slate-100 flex items-center justify-center">
                         <div class="flex flex-col items-center gap-1">
                             <div class="w-20 h-4 bg-blue-500 rounded-full"></div>
@@ -524,7 +524,7 @@ <h4 class="text-lg font-semibold text-slate-900">User Behavior Analytics</h4>
                     </div>
                 </a>
                 <!-- 36. Financial -->
-                <a href="styles/36-financial.html" class="card-hover bg-white rounded-2xl overflow-hidden border border-slate-200 cursor-pointer">
+                <a href="styles/36-financial-analytics.html" class="card-hover bg-white rounded-2xl overflow-hidden border border-slate-200 cursor-pointer">
                     <div class="h-40 bg-slate-800 flex items-center justify-center">
                         <div class="font-mono text-green-400 text-lg">$$$</div>
                     </div>
@@ -582,7 +582,7 @@ <h4 class="text-lg font-semibold text-slate-900">Bento Box Grid</h4>
                     </div>
                 </a>
                 <!-- 40. Y2K -->
-                <a href="styles/40-y2k.html" class="card-hover bg-white rounded-2xl overflow-hidden border border-slate-200 cursor-pointer">
+                <a href="styles/40-y2k-revival.html" class="card-hover bg-white rounded-2xl overflow-hidden border border-slate-200 cursor-pointer">
                     <div class="h-40 bg-gradient-to-br from-pink-400 via-purple-400 to-cyan-400 flex items-center justify-center">
                         <div class="text-white font-bold text-2xl" style="text-shadow: 2px 2px 0 #ff00ff;">Y2K</div>
                     </div>
@@ -628,7 +628,7 @@ <h4 class="text-lg font-semibold text-slate-900">AI-Native UI</h4>
                     </div>
                 </a>
                 <!-- 44. Memphis -->
-                <a href="styles/44-memphis.html" class="card-hover bg-white rounded-2xl overflow-hidden border border-slate-200 cursor-pointer">
+                <a href="styles/44-memphis-revival.html" class="card-hover bg-white rounded-2xl overflow-hidden border border-slate-200 cursor-pointer">
                     <div class="h-40 bg-pink-300 flex items-center justify-center gap-3">
                         <div class="w-8 h-8 bg-yellow-400 rounded-full"></div>
                         <div class="w-8 h-8 bg-teal-400" style="transform: rotate(45deg);"></div>
@@ -779,7 +779,7 @@ <h4 class="text-lg font-semibold text-slate-900">Spatial UI (VisionOS)</h4>
                     </div>
                 </a>
                 <!-- 56. E-Ink Paper -->
-                <a href="styles/56-eink-paper.html" class="card-hover bg-white rounded-2xl overflow-hidden border border-slate-200 cursor-pointer">
+                <a href="styles/56-e-ink-paper.html" class="card-hover bg-white rounded-2xl overflow-hidden border border-slate-200 cursor-pointer">
                     <div class="h-40 bg-stone-100 flex items-center justify-center" style="background-image: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"4\" height=\"4\"><rect width=\"4\" height=\"4\" fill=\"%23f5f5f0\"/><rect width=\"1\" height=\"1\" fill=\"%23e8e8e3\"/></svg>'); background-size: 4px 4px;">
                         <div class="text-slate-800 font-serif text-lg">E-Ink</div>
                     </div>
@@ -789,7 +789,7 @@ <h4 class="text-lg font-semibold text-slate-900">E-Ink / Paper</h4>
                     </div>
                 </a>
                 <!-- 57. Gen Z Chaos -->
-                <a href="styles/57-genz-chaos.html" class="card-hover bg-white rounded-2xl overflow-hidden border border-slate-200 cursor-pointer">
+                <a href="styles/57-gen-z-chaos.html" class="card-hover bg-white rounded-2xl overflow-hidden border border-slate-200 cursor-pointer">
                     <div class="h-40 bg-gradient-to-br from-pink-500 via-yellow-400 to-green-400 flex items-center justify-center overflow-hidden">
                         <div class="text-white font-bold text-xl transform rotate-12">CHAOS!!!</div>
                     </div>