{% extends "base.html" %}

{% block announce %}
<style>
    div[data-md-component="announce"] {
        z-index: 10;
    }

    div[data-md-component="announce"] a {
        color: white;
    }

    div[data-md-component="announce"] a:hover, div[data-md-component="announce"] a:focus {
        transition: ease-in 150ms;
        color: #ccc;
    }

    div[data-md-component="announce"] .md-banner__button {
        color: #ccc;
    }

    div[data-md-component="announce"] .md-banner.hidden {
        display: none;
    }

    div[data-md-component="announce"] .twemoji {
        margin-top: 2px;
    }
</style>
<button id="announce-bar-close" class="md-banner__button md-icon" aria-label="Don't show this again">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"></path>
    </svg>
</button>
If you like ntfy, please consider sponsoring me via <a target="_blank" href="https://github.com/sponsors/binwiederhier"><strong>GitHub Sponsors</strong></a>
or <a target="_blank" href="https://en.liberapay.com/ntfy/"><strong>Liberapay</strong></a>
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 36 36" class="twemoji md-footer-custom-text">
    <path fill="#DD2E44" d="M35.885 11.833c0-5.45-4.418-9.868-9.867-9.868-3.308 0-6.227 1.633-8.018 4.129-1.791-2.496-4.71-4.129-8.017-4.129-5.45 0-9.868 4.417-9.868 9.868 0 .772.098 1.52.266 2.241C1.751 22.587 11.216 31.568 18 34.034c6.783-2.466 16.249-11.447 17.617-19.959.17-.721.268-1.469.268-2.242z"/>
</svg>, or subscribing to <a target="_blank" href="https://ntfy.sh/app"><strong>ntfy Pro</strong></a>.
<script>
    announceBarKey = 'announce-bar-closed-sponsor';
    document.getElementById('announce-bar-close').addEventListener('click', (e) => {
        localStorage.setItem(announceBarKey, 'true');
        document.querySelector('div[data-md-component="announce"] .md-banner').style.display = 'none';
    });
    if (localStorage.getItem(announceBarKey) === 'true') {
        document.querySelector('div[data-md-component="announce"] .md-banner').style.display = 'none';
    }
</script>
{% endblock %}