simple coming soon template

coming-soon.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Coming Soon</title>
</head>
<body class="bg-gradient-to-br from-blue-600 via-indigo-700 to-purple-800 text-white min-h-screen flex items-center justify-center">
  <div class="text-center px-6">
    <!-- Logo / Placeholder -->
    <div class="mb-6">
      <div class="mx-auto w-20 h-20 rounded-full bg-white/20 flex items-center justify-center text-3xl font-bold">
        🚀
      </div>
    </div>
    
    <!-- Heading -->
    <h1 class="text-4xl md:text-6xl font-extrabold mb-4">We’re Coming Soon!</h1>
    
    <!-- Subtext -->
    <p class="text-lg md:text-xl text-gray-200 mb-8 max-w-xl mx-auto">
      Our website is under construction. We will be available soon.
    </p>
    
    <!-- Email Subscribe Form -->
    <form class="flex flex-col sm:flex-row gap-3 justify-center max-w-md mx-auto">
      <input 
        type="email" 
        placeholder="Enter your email" 
        class="px-4 py-3 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-yellow-400 flex-1"
      />
      <button 
        type="submit" 
        class="px-6 py-3 bg-yellow-400 hover:bg-yellow-500 text-gray-900 font-semibold rounded-lg shadow-lg transition"
      >
        Notify Me
      </button>
    </form>

    <!-- Footer -->
    <div class="mt-10 text-sm text-gray-300">
      © 2025 Your Company. All rights reserved.
    </div>
  </div>
</body>
</html>

maintenance.html

export default {
  async fetch(request, env, ctx) {
    try {
      const response = await fetch(request);
      
      // If origin returns error status
      if (response.status >= 500) {
        return new Response(MAINTENANCE_HTML, {
          status: 503,
          headers: { "content-type": "text/html" }
        });
      }

      return response;
    } catch (err) {
      // If origin is unreachable (timeout, DNS fail, etc.)
      return new Response(MAINTENANCE_HTML, {
        status: 503,
        headers: { "content-type": "text/html" }
      });
    }
  }
};

const MAINTENANCE_HTML = `
<!doctype html>
<html>
  <head>
    <title>Maintenance</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      body,
      main {
        font-family: sans-serif;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        height: 100vh;
        gap: 16px;
      }

      footer {
        font-family: monospace;
        padding-bottom: 20px;
      }

      a {
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <main><svg width="128px" heightdown.e-pourashava.com="128px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
        <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
        <g id="SVGRepo_iconCarrier">
          <path d="M8.96973 22H14.9697C19.9697 22 21.9697 20 21.9697 15V9C21.9697 4 19.9697 2 14.9697 2H8.96973C3.96973 2 1.96973 4 1.96973 9V15C1.96973 20 3.96973 22 8.96973 22Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          <path opacity="0.4" d="M1.96973 12.7001L7.96973 12.6801C8.71973 12.6801 9.55973 13.2501 9.83973 13.9501L10.9797 16.8301C11.2397 17.4801 11.6497 17.4801 11.9097 16.8301L14.1997 11.0201C14.4197 10.4601 14.8297 10.4401 15.1097 10.9701L16.1497 12.9401C16.4597 13.5301 17.2597 14.0101 17.9197 14.0101H21.9797" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        </g>
      </svg>
      <h1>We'll be back soon</h1>
      <p>Our server is currently unavailable. Please try again later.</p>
    </main>
    <footer><a href="https://msar.me" target="_blank">msar.me</a></footer>
  </body>
</html>
`;