<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Single Image Page</title>
<!-- Tailwind CSS for styling -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Google Fonts: Inter -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
}
</style>
</head>
<body class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
<!-- Main container to center content -->
<div class="min-h-screen flex flex-col items-center justify-center p-4">
<!-- Card container for the image -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden max-w-lg w-full">
<div class="p-6">
<h1 class="text-2xl font-bold text-center mb-4">Under Construction</h1>
<p class="text-gray-600 dark:text-gray-300 text-center mb-6">
Coming Soon!
</p>
</div>
<img
src="blob:https://dash.cloudflare.com/29c271a5-ed55-4523-a6f5-e07b26b9258a"
alt=“Planet Pluto”
class="w-full h-auto object-cover"
onerror="this.onerror=null;this.src='https://placehold.co/600x400/ef4444/white?text=Image+Not+Found';"
>
<div class="p-6 text-center text-sm text-gray-500 dark:text-gray-400">
</div>
</div>
</div>
</body>
</html>