<div class="container py-5 d-flex justify-content-center">
  <div class="bsonline-page">
    <div class="alert alert-danger mb-0 rounded-0 text-center d-none" id="bsonlineOfflineBanner">
      <span class="small fw-semibold">&#128268; You're offline — changes will sync once you're back online.</span>
    </div>
    <div class="alert alert-success mb-0 rounded-0 text-center d-none" id="bsonlineBackBanner">
      <span class="small fw-semibold">&#9989; Back online.</span>
    </div>

    <div class="p-4 text-center">
      <h6 class="fw-bold mb-1">Notes</h6>
      <p class="small text-muted mb-3">This demo can't unplug your real network, so use the buttons below to simulate it.</p>
      <div class="d-flex justify-content-center gap-2">
        <button type="button" class="btn btn-sm btn-outline-danger" id="bsonlineGoOffline">Simulate going offline</button>
        <button type="button" class="btn btn-sm btn-outline-success" id="bsonlineGoOnline">Simulate back online</button>
      </div>
    </div>
  </div>
</div>

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

const offlineBanner = document.getElementById('bsonlineOfflineBanner');
const backBanner = document.getElementById('bsonlineBackBanner');
let backTimer = null;

function showOffline() {
  clearTimeout(backTimer);
  backBanner.classList.add('d-none');
  offlineBanner.classList.remove('d-none');
}

function showBackOnline() {
  offlineBanner.classList.add('d-none');
  backBanner.classList.remove('d-none');
  clearTimeout(backTimer);
  backTimer = setTimeout(() => backBanner.classList.add('d-none'), 2500);
}

// The real, production listeners — these fire on an actual browser
// connectivity change, exactly the way the two demo buttons simulate below.
window.addEventListener('offline', showOffline);
window.addEventListener('online', showBackOnline);

document.getElementById('bsonlineGoOffline').addEventListener('click', () => {
  window.dispatchEvent(new Event('offline'));
});
document.getElementById('bsonlineGoOnline').addEventListener('click', () => {
  window.dispatchEvent(new Event('online'));
});