Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 13 additions & 13 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down