<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Korn - Follow the Leader</title>
<!-- Tailwind CSS for modern styling --><script src="https://cdn.tailwindcss.com"></script>
<style>
/* Optional: Apply a modern font */
body {
font-family: 'Inter', sans-serif;
}
</style>
</head>
<body class="bg-gray-900 text-white min-h-screen flex items-center justify-center p-4">
<!-- Main Container for Image and Title --><div id="app" class="w-full max-w-lg bg-gray-800 rounded-xl shadow-2xl p-6">
<h1 class="text-3xl font-bold text-center mb-6 text-yellow-400">Album Cover Display</h1>
<!-- Image Container --><div id="image-container" class="w-full">
<img id="album-image"
src="https://upload.wikimedia.org/wikipedia/en/thumb/5/5a/Korn_-_Follow_the_Leader.jpg/220px-Korn_-_Follow_the_Leader.jpg"
alt="Korn - Follow the Leader Album Cover"
onerror="this.style.display='none'; document.getElementById('error-message').classList.remove('hidden')"
class="w-full h-auto rounded-lg shadow-lg transition-transform duration-300 hover:scale-[1.02] border-4 border-gray-700"
>
</div>
<p id="error-message" class="hidden text-center text-red-500 mt-4 font-semibold">
Error loading image. Please check the URL.
</p>
<div class="mt-6 text-center text-gray-400">
<p class="text-lg">Korn</p>
<p class="text-xl font-semibold">Follow the Leader (1998)</p>
</div>
</div>
<script>
// Removed the fileContentId variable and renderUploadedImage function
// The image src is now directly set in the HTML using a public URL
// No JavaScript is needed to set the image source in this version.
// This script block can now be removed entirely if no other JS is needed,
// or kept if you plan to add other dynamic functionalities.
console.log('Using a public URL for reliable image display.');
</script>
</body>
</html>