← back to Watches
museum/index.html
169 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Omega Watch Museum - Top 100 Most Expensive Pieces</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
.watch-card {
transition: all 0.3s ease;
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}
.watch-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(217, 119, 6, 0.3);
}
.price-badge {
background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
}
.loading-shimmer {
background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
</style>
</head>
<body class="bg-black text-slate-100">
<div class="max-w-7xl mx-auto px-4 py-12">
<header class="text-center mb-12">
<h1 class="text-5xl font-bold text-amber-400 mb-4">🏛️ Omega Watch Museum</h1>
<p class="text-xl text-slate-300 mb-2">Top 100 Most Expensive Museum-Quality Pieces</p>
<div id="stats" class="text-slate-400">
<p>Loading collection...</p>
</div>
<p class="text-slate-500 text-sm mt-2">Curated from Sotheby's, Christie's, Phillips & Antiquorum</p>
<div class="mt-4">
<a href="http://45.61.58.125:7600" class="text-amber-400 hover:text-amber-300 underline">
← Back to Price History Database
</a>
</div>
</header>
<div id="collection" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
<!-- Loading placeholders -->
<div class="watch-card rounded-lg overflow-hidden border border-slate-700 loading-shimmer h-96"></div>
<div class="watch-card rounded-lg overflow-hidden border border-slate-700 loading-shimmer h-96"></div>
<div class="watch-card rounded-lg overflow-hidden border border-slate-700 loading-shimmer h-96"></div>
<div class="watch-card rounded-lg overflow-hidden border border-slate-700 loading-shimmer h-96"></div>
</div>
<footer id="footer" class="mt-12 text-center text-slate-500 text-sm">
<p>Loading museum data...</p>
</footer>
</div>
<script>
async function loadMuseum() {
try {
const response = await fetch('/museum/omega-museum-top-100.json');
const data = await response.json();
// Update stats
document.getElementById('stats').innerHTML = `
<p class="text-2xl font-bold text-green-400">
Total Collection Value: $${data.totalValue.toLocaleString()}
</p>
<p class="text-slate-400">
${data.totalPieces} pieces · Updated ${new Date(data.curatedAt).toLocaleDateString()}
</p>
`;
// Render collection
const collection = document.getElementById('collection');
if (data.collection.length === 0) {
collection.innerHTML = `
<div class="col-span-full text-center py-20">
<p class="text-3xl text-yellow-500 mb-4">⏳ Crawler is working...</p>
<p class="text-slate-400">The slow crawler is gathering museum-quality pieces.</p>
<p class="text-slate-400">Check back in a few minutes!</p>
<p class="text-sm text-slate-500 mt-4">
Current progress: Check
<a href="/museum/crawl-data/progress.json" class="text-blue-400 underline">progress.json</a>
</p>
</div>
`;
return;
}
collection.innerHTML = data.collection.map((watch, index) => `
<div class="watch-card rounded-lg overflow-hidden border border-slate-700">
<div class="relative">
${watch.image ? `
<img src="${watch.image}"
alt="${watch.title}"
class="w-full h-48 object-cover"
onerror="this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22400%22 height=%22300%22%3E%3Crect fill=%22%231e293b%22 width=%22400%22 height=%22300%22/%3E%3Ctext x=%2250%25%22 y=%2250%25%22 fill=%22%23475569%22 text-anchor=%22middle%22 dy=%22.3em%22 font-size=%2220%22%3ENo Image%3C/text%3E%3C/svg%3E'">
` : `
<div class="w-full h-48 bg-slate-800 flex items-center justify-center">
<span class="text-slate-600 text-4xl">⌚</span>
</div>
`}
<div class="absolute top-2 left-2 price-badge text-white px-3 py-1 rounded-full text-sm font-bold">
#${index + 1}
</div>
</div>
<div class="p-4">
<h3 class="font-bold text-white mb-2 line-clamp-2 min-h-[3rem]">
${watch.title}
</h3>
<div class="space-y-2 text-sm">
<p class="text-2xl font-bold text-amber-400">
$${watch.price.toLocaleString()}
</p>
${watch.lotNumber ? `
<p class="text-slate-400">Lot ${watch.lotNumber}</p>
` : ''}
${watch.date ? `
<p class="text-slate-400">📅 ${watch.date}</p>
` : ''}
<p class="text-blue-400 text-xs">
${watch.source}
</p>
${watch.url ? `
<a href="${watch.url}"
target="_blank"
rel="noopener noreferrer"
class="inline-block mt-2 text-xs text-green-400 hover:text-green-300 underline">
View Auction Lot →
</a>
` : ''}
</div>
</div>
</div>
`).join('');
// Update footer
document.getElementById('footer').innerHTML = `
<p>Curated on ${new Date(data.curatedAt).toLocaleDateString()}</p>
<p class="mt-2">Museum collection of ${data.totalPieces} pieces worth $${data.totalValue.toLocaleString()}</p>
<p class="mt-2 text-xs">
Sources: ${data.sources.join(', ')}
</p>
`;
} catch (error) {
console.error('Error loading museum:', error);
document.getElementById('collection').innerHTML = `
<div class="col-span-full text-center py-20">
<p class="text-red-500 text-xl">❌ Error loading museum data</p>
<p class="text-slate-400 mt-2">${error.message}</p>
</div>
`;
}
}
// Load on page load
loadMuseum();
// Auto-refresh every 2 minutes to show new crawler results
setInterval(loadMuseum, 120000);
</script>
</body>
</html>