<div class="root">
  <div class="content">
    <h1>
      Current status: 
      <span class="status" />
    </h1>
    <h2 class="message">
      You can either disconnect from your connection by turning off your WiFi or by disconnecting your ethernet cable.
      <br/>
      <br/>
      Or you can simulate offline mode by inspecting this page, going into the 'Network' tab, and changing 'No throttling' to 'Offline'.
    </h2>
    <h3 class="see-original-message">
      To see the original message, go back online and refresh the page.
    </h3>
  </div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

html, body {
  padding: 0;
  margin: 0; 
  font-family: 'Open Sans', sans-serif;
}

.root {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
}

.content {
  max-width: 800px;
  text-align: center;
}

.see-original-message {
  display: none;
}

const root = document.querySelector('.root');
const message = document.querySelector('.message');
const status = document.querySelector('.status');
const seeOriginalMessage = document.querySelector('.see-original-message');
const onlineState = window.navigator.onLine;

status.innerHTML = onlineState ? 'online' : 'offline';


window.addEventListener('online', () => {
  status.innerHTML = 'online'
  root.style.backgroundColor = '#10451d';
  message.innerHTML = 'You are back online :D ';
});

window.addEventListener('offline', () => {
  status.innerHTML = 'offline'
  root.style.backgroundColor = '#8d0801';
  root.style.color = '#ffffff';
  message.innerHTML = 'You went offline :( ';
  seeOriginalMessage.style.display = 'block';
});