Bootstrap Maintenance Mode Banner — Free HTML CSS JS Snippet

<div class="container py-5 d-flex justify-content-center">
  <div class="bsmaint-page">
    <div class="alert alert-warning d-flex justify-content-between align-items-center mb-0 rounded-0" id="bsmaintBanner">
      <span class="small">&#9888; Scheduled maintenance begins in <strong id="bsmaintCountdown">--:--:--</strong>. The app may be briefly unavailable.</span>
      <button type="button" class="btn-close" id="bsmaintDismiss" aria-label="Dismiss"></button>
    </div>
    <div class="bsmaint-body p-4 text-center">
      <h6 class="fw-bold mb-1">Dashboard</h6>
      <p class="small text-muted mb-3">The rest of the app underneath the banner.</p>
      <button type="button" class="btn btn-sm btn-outline-secondary" id="bsmaintReload">Reload page (demo)</button>
    </div>
  </div>
</div>

.bsmaint-page { width: 420px; max-width: 100%; border: 1px solid #eceef1; border-radius: 14px; overflow: hidden; }
.bsmaint-body { background: #fff; }

const KEY = 'bsmaint-dismissed-demo';
const banner = document.getElementById('bsmaintBanner');
const countdown = document.getElementById('bsmaintCountdown');

// A fixed target a couple hours out, so the countdown has something real to
// count down to for this preview.
const target = Date.now() + 2 * 60 * 60 * 1000 + 14 * 60 * 1000;

function pad(n) { return String(n).padStart(2, '0'); }

function renderCountdown() {
  const diff = Math.max(0, target - Date.now());
  const h = Math.floor(diff / 3600000);
  const m = Math.floor((diff % 3600000) / 60000);
  const s = Math.floor((diff % 60000) / 1000);
  countdown.textContent = pad(h) + ':' + pad(m) + ':' + pad(s);
}

function applyDismissedState() {
  let dismissed = false;
  try { dismissed = sessionStorage.getItem(KEY) === '1'; } catch (e) { /* storage unavailable — banner just always shows */ }
  banner.classList.toggle('d-none', dismissed);
}

document.getElementById('bsmaintDismiss').addEventListener('click', () => {
  banner.classList.add('d-none');
  try { sessionStorage.setItem(KEY, '1'); } catch (e) { /* nothing to persist, banner reappears each load */ }
});

// There's no real page reload to demo inside this preview, so this button
// re-runs exactly the same check a real reload's initial page load would —
// proving the dismissal genuinely persisted rather than just hiding the DOM.
document.getElementById('bsmaintReload').addEventListener('click', applyDismissedState);

applyDismissedState();
renderCountdown();
setInterval(renderCountdown, 1000);