{% load static %}
{# A screen-time warning popup with a Continue button. #}
<section id="screentime-popup" class="popup-wrapper text-center">
    <div class="popup-box">
        <div class="popup-box__title flex-column justify-content-center">
            <div><img width="100" src="{% static 'common/img/brain.svg' %}"/></div>
            <div class="my-4">Time for a break?</div>
        </div>
        <div class="popup-box__msg">You have been using the Code for Life website for a while. Remember to take regular screen breaks to recharge those brain cells!</div>
        <div class="popup-box__buttons mt-0">
            <a id="screentime_continue_button" class='button button--primary' onclick="hideScreentimePopup()" aria-labelledby="screentime_continue_button"> Continue </a>
        </div>
    </div>
</section>
