codeforlife-portal 5.33.5__py2.py3-none-any.whl → 8.9.9__py2.py3-none-any.whl

portal/templates/portal/home_learning.html

@@ -14,19 +14,18 @@
     </section>
     <div class="row">
         <div class="col-sm-6">
-            <p>Rapid Router is our shopping delivery game that makes it easy for children aged 5–14 to learn
-                how to code using Blockly and Python.</p>
-            <p>The game and lessons support the English National Curriculum Computing strand, and Teachers across
-                the world love them.</p>
+            <p>Rapid Router is our shopping delivery game that teaches children aged 5–14 to learn how to code using
+                Blockly. The pupils can then progress to Python Den to continue to build up their skills.</p>
+            <p>The game and lessons support the English National Curriculum Computing strand, and teachers across the
+                world love them.</p>
+            <p>Now, we’ve made lessons available for parents and caregivers to teach at home, so we can #KeepKidsCoding.
+                They're free and easy, but most of all, they’re fun!</p>
         </div>
         <div class="col-sm-6">
-            <p>We’ve made lessons available for parents and caregivers to teach at home, so we can
-                #KeepKidsCoding. If you're a curious independent student this will also be perfect for you.
-                The lessons are free and easy, but most of all, they’re fun!
-            </p>
-            <p>To begin, you can read our learning guide and start at Level 1.
-                We encourage you to first register as an independent student to ensure the level progress is saved.
-            </p>
+            <p>Read our learning guide and start at Level 1, unless your child has played before. To start playing, you
+                need to first register as an independent student. This will ensure that the level progress is saved.</p>
+            <p>If you would like to keep updated on our products and receive emails about Code for Life, please
+                <a href="#newsletter_form">sign up to our updates</a>.</p>
         </div>
     </div>
     <div class="background text-right">
@@ -56,9 +55,9 @@
                             algorithms, and learn how to create and debug simple programs. Designed for children aged 5–7,
                             but start here if you’ve never played Rapid Router.
                         </div>
-                        <a class="button" href="https://code-for-life.gitbook.io/independent-student-resources/beginner/" target="_blank">
+                        <a class="button" href="https://code-for-life.gitbook.io/independent-student-resources/rapid-router-resources/beginner" target="_blank">
                             <button class="button--primary button--icon">
-                                Go to lessons<span class="iconify" data-icon="mdi:open-in-new">
+                                Go to lessons<span class="iconify" data-icon="mdi:open-in-new"></span>
                             </button>
                         </a>
                     </div>
@@ -122,9 +121,9 @@
                             programming constructs. Designed for children aged 8–11, but anyone can progress here if
                             ready.
                         </div>
-                        <a class="button" href="https://code-for-life.gitbook.io/independent-student-resources/intermediate/" target="_blank">
+                        <a class="button" href="https://code-for-life.gitbook.io/independent-student-resources/rapid-router-resources/intermediate" target="_blank">
                             <button class="button--primary button--icon">
-                                Go to lessons<span class="iconify" data-icon="mdi:open-in-new">
+                                Go to lessons<span class="iconify" data-icon="mdi:open-in-new"></span>
                             </button>
                         </a>
                     </div>
@@ -151,9 +150,9 @@
                         <div>Let’s get advanced! Learn about repeat loops and selection, variables, and how to create
                             efficient code. Designed for children aged 12–14, but open to all.
                         </div>
-                        <a class="button" href="https://code-for-life.gitbook.io/independent-student-resources/advanced/" target="_blank">
+                        <a class="button" href="https://code-for-life.gitbook.io/independent-student-resources/rapid-router-resources/advanced" target="_blank">
                             <button class="button--primary button--icon">
-                                Go to lessons<span class="iconify" data-icon="mdi:open-in-new">
+                                Go to lessons<span class="iconify" data-icon="mdi:open-in-new"></span>
                             </button>
                         </a>
                     </div>
@@ -172,10 +171,11 @@
             <h6>Session 3 & 4</h6>
             <p>Extra tasks for children who want a challenge! Watch the if...do video to learn about selection
                 statements. Ask your child to explain how their finished program works!</p>
+            <h6>Session 5</h6>
+            <p>Learn more about if...else through traffic lights. In the Traffic Lights levels in Rapid Router, traffic light is a variable that either contains red or green.</p>
             <h6>Extended</h6>
             <p>Build on everything learned so far with traffic lights, limited blocks, procedures and brain teasers.
-                Older children might even like to start learning to program using the Python language using levels
-                80 onwards.</p>
+                Older children might even like to start learning to program using the Python language using <a href="{% url 'python_levels' %}">Python Den</a>.</p>
         </div>
     </div>
 </div>

portal/templates/portal/locked_out.html

@@ -1,6 +1,5 @@
 {% extends 'portal/base.html' %}
 {% load static %}
-{% load staticfiles %}
 
 {% block content %}
 <div class="error-page background container">

portal/templates/portal/locked_out_school_student.html

@@ -0,0 +1,16 @@
+{% extends 'portal/base.html' %}
+{% load static %}
+
+{% block content %}
+<div class="error-page background container">
+    <div class="row mx-0 d-flex justify-content-between">
+        <div class="flex-grow-1">
+            <h2>Temporary lock out!</h2>
+            <h5>Your account has been temporarily blocked as there were too many unsuccessful requests.</h5>
+            <p>If you wish to proceed, please ask your teacher to reset your password.
+            Alternatively, you will need to wait 24 hours for your account to be unlocked again.</p>
+        </div>
+        <img title="Phil" alt="Phil" src="{% static 'portal/img/phil.png' %}"/>
+    </div>
+</div>
+{% endblock content %}

portal/templates/portal/login/independent_student.html

@@ -1,32 +1,48 @@
 {% extends 'portal/form_shapes.html' %}
-{% load staticfiles %}
+{% load static %}
 {% load app_tags %}
 
 {% block form_content %}
     <div id="independent_login_page"></div>
-    <h4 class="center-block">Log in as an independent student</h4>
+    <h4 class="center-block">Welcome</h4>
+    <h5>Please enter your login details.</h5>
     <form id="independent_student_login_form" method="post" autocomplete="off">
 
         {% csrf_token %}
 
         {{ form.non_field_errors }}
 
-        <label for="id_{{ form.username.html_name }}">{{ form.username.label }}</label>
-        {{ form.username }}
-        {{ form.username.errors }}
+        <div class="form__input">
+            {{ form.username }}
+            <small>{{ form.username.help_text }}</small>
+            {{ form.username.errors }}
+        </div>
 
-        <label for="id_{{ form.password.html_name }}">{{ form.password.label }}</label>
-        {{ form.password }}
-        {{ form.password.errors }}
+        <div class="form--row">
+            <div class="input--icon">
+                {{ form.password }} <span id="password-field-icon" class="iconify" data-icon="material-symbols:visibility-off"></span>
+            </div>
+            <small>{{ form.password.help_text }}</small>
+            {{ form.password.errors }}
+        </div>
 
         {{ form.captcha }}
 
-        <button type="submit" name="independent_student_login" class="button button--home button--login">Log in</button>
+        <div class="background">
+            <p class="text-left"><strong>Forgotten your password?</strong></p>
+            <p class="text-left">Don't worry, you can
+                <a id="student_forgotten_password_button" href="{% url 'student_password_reset' %}">reset your password</a>.
+            </p>
+        </div>
+
+        <p class="text-left"><strong>Part of a school or club?</strong>
+            <a href="{% url 'student_login_access_code' %}">Log in here</a>.
+        </p>
+
+        <div class="d-flex justify-content-end row">
+            <button type="submit" name="independent_student_login"
+                    class="button button--home button--login button-right-arrow">Log in</button>
+        </div>
     </form>
-
-    <p><strong>Forgotten your password?</strong></p>
-    <p>Don't worry, you can
-        <a id="student_forgotten_password_button" href="{% url 'student_password_reset' %}">reset your password</a>.
-    </p>
-    <p>Part of a school or club? <a href="{% url 'student_login_access_code' %}">Log in here</a>.</p>
+    <script type="text/javascript" src="{% static 'portal/js/independentLogin.js' %}"></script>
 {% endblock form_content %}

portal/templates/portal/login/student.html

@@ -1,5 +1,5 @@
 {% extends 'portal/form_shapes.html' %}
-{% load staticfiles %}
+{% load static %}
 {% load app_tags %}
 
 {% block form_content %}
@@ -18,15 +18,18 @@
             {{ form.username.errors }}
         </div>
 
-        <div class="form__input">
-            {{ form.password }}
+        <div class="form--row">
+            <div class="input--icon">
+                {{ form.password }} <span id="password-field-icon" class="iconify" data-icon="material-symbols:visibility-off"></span>
+            </div>
             <small>{{ form.password.help_text }}</small>
             {{ form.password.errors }}
         </div>
 
-        <button type="submit" name="school_login" class="button button--primary button--login"
-                onclick="deleteAllLocalStorageWorkspaces();">Log in</button>
+        <div class="d-flex justify-content-end row">
+            <button type="submit" name="school_login" class="button button--primary button--login button-right-arrow">
+                Log in</button>
+        </div>
     </form>
-
-    <p>Forgotten your login details? Please check with your teacher.</p>
+    <script type="text/javascript" src="{% static 'portal/js/studentLogin.js' %}"></script>
 {% endblock form_content %}

portal/templates/portal/login/student_class_code.html

@@ -1,5 +1,5 @@
 {% extends 'portal/form_shapes.html' %}
-{% load staticfiles %}
+{% load static %}
 {% load app_tags %}
 
 {% block form_content %}
@@ -18,8 +18,11 @@
             {{ form.access_code.errors }}
         </div>
 
-        <button type="submit" name="school_login_class_code" class="button button--primary button--login">Log in</button>
-    </form>
+        <p class="background text-left"><strong>Forgotten your login details? Please check with your teacher.</strong></p>
 
-    <p>Forgotten your login details? Please check with your teacher.</p>
+        <div class="d-flex justify-content-end row">
+            <button type="submit" name="school_login_class_code"
+                    class="button button--primary button--login button-right-arrow">Log in</button>
+        </div>
+    </form>
 {% endblock form_content %}

portal/templates/portal/login/teacher.html

@@ -1,5 +1,5 @@
 {% extends 'portal/base.html' %}
-{% load staticfiles %}
+{% load static %}
 {% load app_tags %}
 
 {% block css %}
@@ -20,11 +20,16 @@
 
 {% if wizard.steps.current == 'auth' %}
     <section class="row mx-0">
-        <span class="oval-blue login-shape-left"></span>
-        <span class="polygon-yellow login-shape-right"></span>
+        <span class="login-shape-left">
+            <img src="{% static 'portal/img/oval_blue.svg' %}" alt="Blue oval">
+        </span>
+        <span class="login-shape-right">
+            <img src="{% static 'portal/img/polygon_yellow.svg' %}" alt="Yellow polygon">
+        </span>
         <div class="form--login is-flex form--register--teacher">
             <div class="form col-xs-12 col-sm-8 col-md-8 col-lg-9 center-block">
-                <h4 class="center-block">Log in as a teacher</h4>
+                <h4 class="center-block">Welcome</h4>
+                <h5>Please enter your login details.</h5>
                 <form id="form-login-teacher" method="post" autocomplete="off">
 
                     {% csrf_token %}
@@ -32,24 +37,34 @@
 
                     {{ form.non_field_errors }}
 
-                    <label for="id_{{ form.username.html_name }}">{{ form.username.label }}</label>
-                    {{ form.username }}
-                    {{ form.username.errors }}
+                    <div class="form__input">
+                        {{ form.username }}
+                        <small>{{ form.username.help_text }}</small>
+                        {{ form.username.errors }}
+                    </div>
 
-                    <label for="id_{{ form.password.html_name }}">{{ form.password.label }}</label>
-                    {{ form.password }}
-                    {{ form.password.errors }}
+                    <div class="form--row">
+                        <div class="input--icon">
+                            {{ form.password }} <span id="password-field-icon" class="iconify" data-icon="material-symbols:visibility-off"></span>
+                        </div>
+                        <small>{{ form.password.help_text }}</small>
+                        {{ form.password.errors }}
+                    </div>
 
                     {{ form.captcha }}
 
-                    <button type="submit" name="login_view" class="button button--primary button--login"
-                                onclick="deleteAllLocalStorageWorkspaces();">Log in</button>
-                </form>
+                    <div class="background">
+                        <p class="text-left"><strong>Forgotten your password?</strong></p>
+                        <p class="text-left">Don't worry, you can
+                            <a id="teacher_forgotten_password_button" href="{% url 'teacher_password_reset' %}">reset your password</a>.
+                        </p>
+                    </div>
 
-                <p><strong>Forgotten your password?</strong></p>
-                <p>Don&rsquo;t worry, you can
-                    <a id="teacher_forgotten_password_button" href="{% url 'teacher_password_reset' %}">reset your password</a>.
-                </p>
+                    <div class="d-flex justify-content-end row">
+                        <button type="submit" name="login_view"
+                                class="button button--primary button--login button-right-arrow">Log in</button>
+                    </div>
+                </form>
             </div>
         </div>
     </section>
@@ -57,4 +72,6 @@
     {% include "two_factor/core/login.html" %}
 {% endif %}
 
+<script type="text/javascript" src="{% static 'portal/js/teacherLogin.js' %}"></script>
+
 {% endblock content %}

portal/templates/portal/partials/banner.html

@@ -10,15 +10,29 @@
                     {% if text %}
                         <p>{{ text }}</p>
                     {% endif %}
-                    {% if button %}
-                        <a href="{% url button.link %}" class="button button--primary button-right-arrow">{{ button.text}}</a>
-                    {% endif %}
+                    <div class="button-group">
+                        {% if button %}
+                            {% if button.external %}
+                                <a href="{{ button.link }}" target="_blank" class="button button--primary button-right-arrow">{{ button.text }}</a>
+                            {% else %}
+                                <a href="{% url button.link %}" class="button button--primary button-right-arrow">{{ button.text}}</a>
+                            {% endif %}
+                        {% endif %}
+                        {% if button2 %}
+                            {% if button.external %}
+                                <a href="{{ button2.link }}" target="_blank" class="button button--primary button-right-arrow">{{ button2.text }}</a>
+                            {% else %}
+                                <a href="{% url button2.link %}" class="button button--primary button-right-arrow">{{ button2.text}}</a>
+                            {% endif %}
+                        {% endif %}
+                    </div>
                 </div>
                 <div>
                     <div class="banner--picture">
                         <div class="banner--picture__inside1">
                             <div class="banner--picture__inside2 {{ image_class }}"
-                                 {% if image_description %}title="{{ image_description }}"{% endif %}>
+                                 {% if image_description %}title="{{ image_description }}"{% endif %}
+                                 {% if alt %} alt="{{ alt }}" {% endif %}>
                             </div>
                         </div>
                     </div>

portal/templates/portal/partials/benefits.html

@@ -1,4 +1,4 @@
-{% load staticfiles %}
+{% load static %}
 
 <div class="grid-benefits col-sm-8 col-center">
     {% if image1 %}

portal/templates/portal/partials/card_list.html

@@ -1,29 +1,39 @@
-{% load staticfiles %}
+{% load static %}
 {% load app_tags %}
 
-<div class="grid grid-worksheets grid__fit">
-    {% for card in cards %}
-        <div class="card">
-            <div class="card__images">
-                <img class="card__image" src="{{ card.image | cloud_storage }}">
-                {% if card.thumbnail_text %}
-                    <h3 class="card__thumbnail">{{ card.thumbnail_text }}</h3>
-                {% elif card.thumbnail_image %}
-                    <img class="card__thumbnail" src="{{ card.thumbnail_image | cloud_storage }}">
-                {% endif %}
-            </div>
-            <div class="card__text">
-                <h5 class="card__title">{{ card.title }}</h5>
-                {% if card.description %}
-                    <p>{{ card.description }}</p>
-                {% elif card.button_text %}
-                    <div class="button-group button-group__icon">
-                        <a target="_blank" href="{{ card.button_link }}" class="button button--primary button-right-arrow">
-                            {{ card.button_text }}
-                        </a>
+<script type="text/javascript" src="{% static 'portal/js/carouselCards.js' %}"></script>
+
+<div id="carouselCards" class="carousel carousel-cards slide" data-ride="carousel" data-interval="false">
+    <div class="carousel-inner" role="listbox">
+        {% for card in cards %}
+            <div class="item col-xs-4 {% if forloop.first %}active{% endif %}">
+                <div class="card">
+                    <div class="card__images">
+                        <img class="card__image" src="{{ card.image | cloud_storage }}">
+                    </div>
+                    <div class="card__text">
+                        <h5 class="card__title">{{ card.title }}</h5>
+                        {% if card.description %}
+                            <p>{{ card.description }}</p>
+                        {% endif %}
                     </div>
-                {% endif %}
+                </div>
             </div>
-        </div>
-    {% endfor %}
+        {% endfor %}
+    </div>
+
+    <div class="carousel-nav text-center">
+        <a class="button prev disabled" data-target="#carouselCards" data-slide="prev">
+            <span class="iconify" data-icon="mdi:chevron-left" aria-hidden="true"></span>
+            <span class="sr-only">Previous</span>
+        </a>
+        <a class="button next" data-target="#carouselCards" data-slide="next">
+            <span class="iconify" data-icon="mdi:chevron-right" aria-hidden="true"></span>
+            <span class="sr-only">Next</span>
+        </a>
+    </div>
 </div>
+
+<script>
+    setUpCarouselCards({{ cards | length }})
+</script>

portal/templates/portal/partials/character_list.html

@@ -1,12 +1,12 @@
-{% load staticfiles %}
+{% load static %}
 {% load app_tags %}
 
 <div class="grid grid-characters grid__fit">
     {% for character in characters %}
-        <div class="card">
-            <h5 class="card__title">{{ character.name }}</h5>
-            <img class="card__image" src="{{ character.image_path | cloud_storage }}">
-            <p class="card__text">{{ character.description }}</p>
+        <div>
+            <img class="grid-character-image" src="{{ character.image_path | cloud_storage }}" alt="{{ character.alt }}">
+            <h5 class="grid-character-title">{{ character.name }}</h5>
+            <p>{{ character.description }}</p>
         </div>
     {% endfor %}
 </div>

portal/templates/portal/partials/cookie_list.html

@@ -0,0 +1,161 @@
+<h6>Strictly Necessary Cookies</h6>
+
+<table class="table table-bordered header-primary">
+    <colgroup>
+        <col span="1" style="width: 23%;">
+        <col span="1" style="width: 20%;">
+        <col span="1" style="width: 47%;">
+        <col span="1" style="width: 10%;">
+    </colgroup>
+    <tr>
+        <th><strong>Cookie name</strong></th>
+        <th><strong>Host</strong></th>
+        <th><strong>Description</strong></th>
+        <th><strong>Expiry</strong></th>
+    </tr>
+    <tr>
+        <td><p>OptanonAlertBoxClosed</p></td>
+        <td><p>codeforlife.education</p></td>
+        <td><p>This cookie is set by the cookie compliance solution from OneTrust. It is set after visitors have
+            seen a cookie information notice and in some cases only when they actively close the notice down. It
+            enables the website not to show the message more than once to a user. It contains no personal
+            information.</p>
+        </td>
+        <td><p>1 year</p></td>
+    </tr>
+    <tr>
+        <td><p>OptanonConsent</p></td>
+        <td><p>codeforlife.education</p></td>
+        <td><p>This cookie is set by the cookie compliance solution from OneTrust. It stores information about
+            the categories of cookies the site uses and whether visitors have given or withdrawn consent for the
+            use of each category. This enables site owners to prevent cookies in each category from being set in
+            the users browser, when consent is not given. It contains no information that can identify the site
+            visitor.</p>
+        </td>
+        <td><p>1 year</p></td>
+    </tr>
+    <tr>
+        <td><p>csrftoken</p></td>
+        <td><p>codeforlife.education</p></td>
+        <td><p>This cookie is associated with the Django web development platform for Python. It is designed to
+            help protect a site against a particular type of software attack on web forms.</p>
+        </td>
+        <td><p>1 year</p></td>
+    </tr>
+    <tr>
+        <td><p>sessionid</p></td>
+        <td><p>codeforlife.education</p></td>
+        <td><p>This cookie is associated with the Django web development platform for Python. It contains a
+            special session id to identify each browser and its associated session with the site.</p>
+        </td>
+        <td><p>Session</p></td>
+    </tr>
+    <tr>
+        <td><p>_GRECAPTCHA</p></td>
+        <td><p>www.google.com</p></td>
+        <td><p>Cookie used by Google Recaptcha. It is used for risk analysis in spam protection and may store
+            browsing device information.</p>
+        </td>
+        <td><p>5 months</p></td>
+    </tr>
+</table>
+
+<h6>Analytics / Performance Cookies</h6>
+
+<table class="table table-bordered header-primary">
+    <colgroup>
+        <col span="1" style="width: 23%;">
+        <col span="1" style="width: 20%;">
+        <col span="1" style="width: 47%;">
+        <col span="1" style="width: 10%;">
+    </colgroup>
+    <tr>
+        <th><strong>Cookie name</strong></th>
+        <th><strong>Host</strong></th>
+        <th><strong>Description</strong></th>
+        <th><strong>Expiry</strong></th>
+    </tr>
+    <tr>
+        <td><p>_ga</p></td>
+        <td><p>codeforlife.education</p></td>
+        <td><p>This cookie is associated with Google Universal Analytics - which is a significant update to
+            Google's more commonly used analytics service. This cookie is used to distinguish unique users by
+            assigning a randomly generated number as a client identifier. It is included in each page request in
+            a site and used to calculate visitor, session and campaign data for the sites analytics reports.</p>
+        </td>
+        <td><p>1 year</p></td>
+    </tr>
+    <tr>
+        <td><p>_gid</p></td>
+        <td><p>codeforlife.education</p></td>
+        <td><p>This cookie is associated with Google Universal Analytics. It is used to store and count page
+            views.</p>
+        </td>
+        <td><p>A few seconds</p></td>
+    </tr>
+    <tr>
+        <td><p>_ga_xxxxxxxxxx</p></td>
+        <td><p>codeforlife.education</p></td>
+        <td><p>This cookie is associated with Google Universal Analytics. Used to distinguish unique users by
+            assigning a randomly generated number as a client identifier. Its primary purpose is to help website
+            owners measure visitor interactions, track site usage, and provide personalised experiences to
+            enhance user engagement.</p>
+        </td>
+        <td><p>1 year</p></td>
+    </tr>
+    <tr>
+        <td><p>_gat_UA-xxxxxxxx-x</p></td>
+        <td><p>codeforlife.education</p></td>
+        <td><p>This cookie is associated with Google Tag Manager. It is used to store to provide technical
+            monitoring and limit the amount of data recorded by Google on high-traffic sites.</p>
+        </td>
+        <td><p>1 minute</p></td>
+    </tr>
+    <tr>
+        <td><p>_gat_gtag_UA_xxxxxxxx_x</p></td>
+        <td><p>codeforlife.education</p></td>
+        <td><p>This cookie is associated with Google Tag Manager. It is used to store a unique user ID.</p>
+        </td>
+        <td><p>1 minute</p></td>
+    </tr>
+</table>
+
+<h6>Functional Cookies</h6>
+
+<table class="table table-bordered header-primary">
+    <colgroup>
+        <col span="1" style="width: 23%;">
+        <col span="1" style="width: 20%;">
+        <col span="1" style="width: 47%;">
+        <col span="1" style="width: 10%;">
+    </colgroup>
+    <tr>
+        <th><strong>Cookie name</strong></th>
+        <th><strong>Host</strong></th>
+        <th><strong>Description</strong></th>
+        <th><strong>Expiry</strong></th>
+    </tr>
+    <tr>
+        <td><p>preferredLanguage</p></td>
+        <td><p>codeforlife.education</p></td>
+        <td><p>This cookie is used to remember your selected language preference in Rapid Router and Python Den,
+            so you don't have to keep selecting it every time you load a new level.</p>
+        </td>
+        <td><p>Session</p></td>
+    </tr>
+    <tr>
+        <td><p>muted</p></td>
+        <td><p>codeforlife.education</p></td>
+        <td><p>This cookie is used to remember your muted setting in Rapid Router and Python Den, so you don't
+            have to keep setting it every time you load a new level.</p>
+        </td>
+        <td><p>Session</p></td>
+    </tr>
+    <tr>
+        <td><p>__cf_bm</p></td>
+        <td><p>pwnedpasswords.com</p></td>
+        <td><p>This cookie is used by CloudFlare to read and filter requests from bots.</p>
+        </td>
+        <td><p>30 minutes</p></td>
+    </tr>
+</table>

portal/templates/portal/partials/delete_popup.html

@@ -0,0 +1,18 @@
+{# A popup for delete account with Review classes button. #}
+<section id="popup-delete-review" class="popup-wrapper">
+    <div class="popup-box">
+        <div>
+            <button class="close popup-box__close" type="button" id="close_popup_button" onclick="hideDeleteAccountPopup()" aria-label="Close">
+                <span class="iconify" data-icon="mdi:close"></span>
+            </button>
+        </div>
+        <div class="popup-box__title"></div>
+        <div class="popup-box__msg"></div>
+        <div class="popup-box__buttons justify-content-center">
+            <a id="review_button" class="button button--primary" href="{% url 'dashboard' %}#classes" onclick="$('#tab-classes').click(); hideDeleteAccountPopup();" aria-labelledby="review_button">Review classes</a>
+            <a id="cancel_popup_button" class="button button--secondary button--secondary--dark" onclick="hideDeleteAccountPopup()" aria-labelledby="cancel_popup_button">Cancel</a>
+            <a id="delete_button" class='button button--primary button--primary--danger button--icon' data-delete-path="{% url 'delete_account' %}" onclick="" aria-labelledby="delete_button">
+                Delete <span class="iconify" data-icon="mdi:delete-outline"></span></a>
+        </div>
+    </div>
+</section>