|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Choose Your Dashboard</title> |
|
|
<style> |
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Inter', -apple-system, sans-serif; |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
min-height: 100vh; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
padding: 20px; |
|
|
} |
|
|
|
|
|
.container { |
|
|
max-width: 1200px; |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
h1 { |
|
|
text-align: center; |
|
|
color: white; |
|
|
font-size: 3rem; |
|
|
margin-bottom: 1rem; |
|
|
text-shadow: 0 2px 10px rgba(0,0,0,0.2); |
|
|
} |
|
|
|
|
|
.subtitle { |
|
|
text-align: center; |
|
|
color: rgba(255,255,255,0.9); |
|
|
font-size: 1.2rem; |
|
|
margin-bottom: 3rem; |
|
|
} |
|
|
|
|
|
.cards { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
|
|
gap: 2rem; |
|
|
margin-bottom: 2rem; |
|
|
} |
|
|
|
|
|
.card { |
|
|
background: white; |
|
|
border-radius: 20px; |
|
|
padding: 2rem; |
|
|
box-shadow: 0 20px 60px rgba(0,0,0,0.3); |
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease; |
|
|
cursor: pointer; |
|
|
text-decoration: none; |
|
|
color: inherit; |
|
|
display: block; |
|
|
} |
|
|
|
|
|
.card:hover { |
|
|
transform: translateY(-10px); |
|
|
box-shadow: 0 30px 80px rgba(0,0,0,0.4); |
|
|
} |
|
|
|
|
|
.card-header { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: space-between; |
|
|
margin-bottom: 1.5rem; |
|
|
} |
|
|
|
|
|
.card-icon { |
|
|
width: 60px; |
|
|
height: 60px; |
|
|
background: linear-gradient(135deg, #667eea, #764ba2); |
|
|
border-radius: 15px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-size: 2rem; |
|
|
} |
|
|
|
|
|
.badge { |
|
|
padding: 0.5rem 1rem; |
|
|
border-radius: 20px; |
|
|
font-size: 0.75rem; |
|
|
font-weight: bold; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 0.5px; |
|
|
} |
|
|
|
|
|
.badge.new { |
|
|
background: linear-gradient(135deg, #11998e, #38ef7d); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.badge.legacy { |
|
|
background: #f3f4f6; |
|
|
color: #6b7280; |
|
|
} |
|
|
|
|
|
.card h2 { |
|
|
font-size: 1.75rem; |
|
|
margin-bottom: 1rem; |
|
|
color: #1f2937; |
|
|
} |
|
|
|
|
|
.card p { |
|
|
color: #6b7280; |
|
|
line-height: 1.6; |
|
|
margin-bottom: 1.5rem; |
|
|
} |
|
|
|
|
|
.features { |
|
|
list-style: none; |
|
|
margin-bottom: 1.5rem; |
|
|
} |
|
|
|
|
|
.features li { |
|
|
padding: 0.5rem 0; |
|
|
color: #374151; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 0.5rem; |
|
|
} |
|
|
|
|
|
.features li::before { |
|
|
content: '✓'; |
|
|
color: #10b981; |
|
|
font-weight: bold; |
|
|
font-size: 1.2rem; |
|
|
} |
|
|
|
|
|
.features li.unavailable::before { |
|
|
content: '✗'; |
|
|
color: #ef4444; |
|
|
} |
|
|
|
|
|
.btn { |
|
|
width: 100%; |
|
|
padding: 1rem; |
|
|
border-radius: 10px; |
|
|
border: none; |
|
|
font-size: 1rem; |
|
|
font-weight: 600; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
text-align: center; |
|
|
text-decoration: none; |
|
|
display: block; |
|
|
} |
|
|
|
|
|
.btn-primary { |
|
|
background: linear-gradient(135deg, #667eea, #764ba2); |
|
|
color: white; |
|
|
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); |
|
|
} |
|
|
|
|
|
.btn-primary:hover { |
|
|
transform: scale(1.02); |
|
|
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5); |
|
|
} |
|
|
|
|
|
.btn-secondary { |
|
|
background: #f3f4f6; |
|
|
color: #374151; |
|
|
} |
|
|
|
|
|
.btn-secondary:hover { |
|
|
background: #e5e7eb; |
|
|
} |
|
|
|
|
|
.docs-link { |
|
|
text-align: center; |
|
|
margin-top: 2rem; |
|
|
} |
|
|
|
|
|
.docs-link a { |
|
|
color: white; |
|
|
text-decoration: none; |
|
|
font-size: 1.1rem; |
|
|
padding: 1rem 2rem; |
|
|
background: rgba(255,255,255,0.2); |
|
|
border-radius: 10px; |
|
|
backdrop-filter: blur(10px); |
|
|
transition: all 0.3s ease; |
|
|
display: inline-block; |
|
|
} |
|
|
|
|
|
.docs-link a:hover { |
|
|
background: rgba(255,255,255,0.3); |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
h1 { |
|
|
font-size: 2rem; |
|
|
} |
|
|
|
|
|
.subtitle { |
|
|
font-size: 1rem; |
|
|
} |
|
|
|
|
|
.cards { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
|
|
|
<script src="/static/js/api-config.js"></script> |
|
|
<script> |
|
|
|
|
|
window.apiReady = new Promise((resolve) => { |
|
|
if (window.apiClient) { |
|
|
console.log('✅ API Client ready'); |
|
|
resolve(window.apiClient); |
|
|
} else { |
|
|
console.error('❌ API Client not loaded'); |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
|
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<h1>🚀 Choose Your Dashboard</h1> |
|
|
<p class="subtitle">Select the version that best fits your needs</p> |
|
|
|
|
|
<div class="cards"> |
|
|
|
|
|
<a href="/static/pages/dashboard/index-modern.html" class="card"> |
|
|
<div class="card-header"> |
|
|
<div class="card-icon">✨</div> |
|
|
<span class="badge new">Recommended</span> |
|
|
</div> |
|
|
|
|
|
<h2>Modern Dashboard</h2> |
|
|
<p>Completely redesigned with 40+ integrated data sources and modern UI/UX</p> |
|
|
|
|
|
<ul class="features"> |
|
|
<li>40+ API sources with auto-fallback</li> |
|
|
<li>Modern responsive design</li> |
|
|
<li>Dark mode support</li> |
|
|
<li>Collapsible sidebar (280px ↔ 72px)</li> |
|
|
<li>Real-time price widgets</li> |
|
|
<li>News aggregation (12+ sources)</li> |
|
|
<li>Fear & Greed index (10+ sources)</li> |
|
|
<li>99%+ uptime with fallbacks</li> |
|
|
<li>Zero import errors</li> |
|
|
<li>Mobile-optimized</li> |
|
|
</ul> |
|
|
|
|
|
<button class="btn btn-primary">Open Modern Dashboard →</button> |
|
|
</a> |
|
|
|
|
|
|
|
|
<a href="/static/pages/dashboard/index.html" class="card"> |
|
|
<div class="card-header"> |
|
|
<div class="card-icon">📊</div> |
|
|
<span class="badge legacy">Legacy</span> |
|
|
</div> |
|
|
|
|
|
<h2>Classic Dashboard</h2> |
|
|
<p>Original dashboard (now with fixed imports)</p> |
|
|
|
|
|
<ul class="features"> |
|
|
<li>Basic API integration</li> |
|
|
<li>Original design</li> |
|
|
<li class="unavailable">Limited fallback options</li> |
|
|
<li class="unavailable">No dark mode</li> |
|
|
<li class="unavailable">Fixed sidebar</li> |
|
|
<li class="unavailable">Fewer data sources</li> |
|
|
<li class="unavailable">Manual error handling</li> |
|
|
<li>Recently fixed import errors</li> |
|
|
<li>Familiar interface</li> |
|
|
</ul> |
|
|
|
|
|
<button class="btn btn-secondary">Open Classic Dashboard →</button> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="docs-link"> |
|
|
<a href="/MIGRATION_GUIDE.md" target="_blank">📖 View Migration Guide</a> |
|
|
<a href="/MODERN_UI_UX_GUIDE.md" target="_blank">📘 Full Documentation</a> |
|
|
</div> |
|
|
|
|
|
<div style="text-align: center; margin-top: 3rem; color: rgba(255,255,255,0.8);"> |
|
|
<p><strong>Issues Fixed:</strong></p> |
|
|
<p>✅ Missing config.js export</p> |
|
|
<p>✅ Import errors resolved</p> |
|
|
<p>✅ 40+ API sources integrated</p> |
|
|
<p>✅ Automatic fallback chains</p> |
|
|
<p style="margin-top: 1rem; font-size: 0.9rem;"> |
|
|
<strong>Recommendation:</strong> Use the Modern Dashboard for best experience |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</body> |
|
|
</html> |
|
|
|
|
|
|
