Coming Soon
<style type="text/css">html, body {
      height: 100%;
      margin: 0;
    }

    body {
      font-family: Arial, sans-serif;
      color: #fff;
      background: url('landscape.jpg') center / cover no-repeat fixed;
      display: grid;
      place-items: center;
      overflow: hidden;
    }

    #overlayCanvas {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
    }

    .center {
      position: relative;
      z-index: 1;
      text-align: center;
    }

    .domain {
      font-size: clamp(28px, 6vw, 54px);
      font-weight: bold;
      text-shadow: 0 4px 12px rgba(0,0,0,0.6);
      margin: 0;
    }

    .welcome {
      margin-top: 10px;
      font-size: clamp(16px, 2.5vw, 22px);
      text-shadow: 0 2px 8px rgba(0,0,0,0.6);
    }
</style>


<div class="center">
<h1 class="domain" id="domainName"> </h1>
Welcome Back</div>

// Insert domain name dynamically document.getElementById(&#39;domainName&#39;).textContent = window.location.hostname; const canvas = document.getElementById(&#39;overlayCanvas&#39;); const ctx = canvas.getContext(&#39;2d&#39;); function resize() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; } resize(); window.addEventListener(&#39;resize&#39;, resize); // Star objects let stars = []; for (let i = 0; i < 150; i++) { stars.push({ x: Math.random() * canvas.width, y: Math.random() * canvas.height, r: Math.random() * 2, dx: (Math.random() - 0.5) * 0.3, dy: (Math.random() - 0.5) * 0.3 }); } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); // Semi-transparent overlay ctx.fillStyle = "rgba(0,0,0,0.5)"; ctx.fillRect(0, 0, canvas.width, canvas.height); // Green flying dots ctx.fillStyle = "rgba(153, 243, 107, 1)"; for (let s of stars) { ctx.beginPath(); ctx.arc(s.x, s.y, s.r, 0, Math.PI * 2); ctx.fill(); s.x += s.dx; s.y += s.dy; if (s.x < 0 || s.x > canvas.width) s.dx *= -1; if (s.y < 0 || s.y > canvas.height) s.dy *= -1; } requestAnimationFrame(draw); } draw();