        <a href="index.html" class="error-card__brand" aria-label="CoolAdmin home">
            <span class="logo-mark" aria-hidden="true">C</span>
            <span class="logo-text">CoolAdmin</span>
        </a>

        <div class="error-card__icon"><i class="fa-solid fa-screwdriver-wrench" aria-hidden="true"></i></div>
        <h1 class="error-card__title" style="font-size: 24px; margin-bottom: 12px;">We're upgrading the dashboard</h1>
        <p class="error-card__text">
            We&rsquo;re shipping some improvements that&rsquo;ll be worth the wait. The dashboard
            should be back in <strong style="color: var(--m-text);">about 15 minutes</strong>.
            Thanks for your patience.
        </p>

        <div class="error-card__actions">
            <button type="button" class="m-btn m-btn--primary" onclick="location.reload()">
                <i class="fa-solid fa-arrows-rotate" aria-hidden="true"></i>
                Check again
            </button>
            <a href="#" class="m-btn m-btn--ghost">
                <i class="fa-regular fa-bell" aria-hidden="true"></i>
                Notify me when done
            </a>
        </div>

        <p class="error-card__hint">
            Follow <a href="#">@cooladmin</a> for live updates &middot; status page at <a href="#">status.cooladmin.com</a>.
        </p>
