<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Image Enhancer</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex justify-center items-center h-screen m-0">
  <div id="particles-js"></div>
  <div class="con">
    <h1 class="title">Remini Image Enhancer</h1>

    <!-- Simplified Upload Section -->
    <div>
      <input type="file" id="file-input" class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 focus:outline-none">
      <img id="uploaded-image" class="mt-5 w-full rounded-lg hidden" alt="Uploaded Preview">
    </div>

    <!-- Enhance Button Section -->
    <div class="mt-5 hidden" id="enhance-button-section">
      <button class="block w-full py-3 bg-green-500 rounded-lg hover:bg-green-600 transition" onclick="enhanceImage()">Enhance</button>
    </div>

    <!-- Loading Indicator -->
    <div class="hidden mb-5 flex justify-center" id="loading-indicator">
      <img src="https://i.gifer.com/ZZ5H.gif" alt="Loading..." class="w-12 h-12">
    </div>

    <!-- Enhanced Image Display Section -->
    <div class="mt-5 hidden" id="enhanced-section">
      <h2 class="title2">Enhanced Image Result:</h2>
      <img id="enhanced-image" class="w-full rounded-lg" alt="Enhanced Result">
      <div class="mt-3 flex justify-between">
        <a id="download-link" class="py-2 px-4 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition" download>Download</a>
        <button class="py-2 px-4 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition" onclick="resetApp()">Start Over</button>
      </div>
    </div>
  </div>
  <footer id="status">
        Made with ♥️ by <a href="https://www.facebook.com/61550011623347"><span style="color: red; text-decoration: underline">Charlie</span></a> and ☕.
    </footer>
</body>
</html>