classroomio/apps/dashboard/src/error.html

<div class="error-container">
  <div class="error-content">
    <img src="/logo-512.png" class="logo" alt="ClassroomIO - Logo" />
    <h2>Something unexpected occured.</h2>
    <p>
      Don't worry, your learning is safe. It isn't your fault, it is ours. We have gotten the error notification and
      will push a fix ASAP. In the meantime, take a short break and come back a bit later.
    </p>
    <a href="mailto:support@classroomio.com">Contact Us</a>
  </div>

  <div class="error-icon">
    <img src="/500-error.svg" alt="Error" />
  </div>
</div>

<style>
  body {
    margin: 0;
  }
  .error-container {
    max-width: 964px;
    margin: auto;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
    padding: 0;
  }

  :global(.dark) .error-container {
    background-color: black;
  }

  .error-content {
    padding: 0.5rem;
    width: 100%;
  }

  .error-content h2 {
    width: 100%;
    font-size: 1.125rem;
    font-weight: 500;
  }

  .error-content p {
    width: 100%;
    font-size: 1rem;
    font-weight: 400;
    margin: 1.5rem 0;
    color: rgb(75, 85, 99);
  }

  :global(.dark) .error-content p {
    color: white;
  }

  .error-content .logo {
    width: 5rem;
  }

  .error-content a {
    background-color: rgb(29, 78, 216);
    padding: 0.75rem 2.25rem;
    border-radius: 0.75rem;
    color: white;
    margin-top: 0.75rem;
    transition: all 0.2s;
    display: inline-block;
  }

  .error-content a:hover {
    background-color: rgb(30, 58, 138);
    text-decoration: none;
  }

  .error-icon {
    width: 18rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  @media (min-width: 768px) {
    .error-content {
      width: 90%;
    }
  }

  @media (min-width: 1024px) {
    .error-container {
      flex-direction: row;
    }

    .error-content {
      width: 50%;
    }

    .error-content h2 {
      font-size: 1.875rem;
      font-weight: 400;
    }

    .error-icon {
      width: 50%;
    }
  }
</style>