rapid-router 5.4.1__py2.py3-none-any.whl → 7.6.8__py2.py3-none-any.whl

game/templates/game/game.html

@@ -7,77 +7,79 @@
 
 {% block scripts %}
 {{block.super}}
-<script defer id="data"
-	data-path="{{level.path|trim}}"
-	data-origin="{{level.origin|trim}}"
-	data-destinations="{{level.destinations|trim}}"
-	data-traffic-lights="{{level.traffic_lights|trim}}"
-	data-cows="{{level.cows|trim}}"
-	data-episode="{{level.episode.id|trim}}"
-	data-level-id="{{level.id|default_if_none:""|trim}}"
-        data-level-name="{{level.name|trim}}"
+  <script defer id="data"
+    data-path="{{level.path|trim}}"
+    data-origin="{{level.origin|trim}}"
+    data-destinations="{{level.destinations|trim}}"
+    data-traffic-lights="{{level.traffic_lights|trim}}"
+    data-cows="{{level.cows|trim}}"
+    data-episode="{{level.episode.id|trim}}"
+    data-level-id="{{level.id|default_if_none:''|trim}}"
+    data-level-name="{{level.name|trim}}"
   >
-    var ANONYMOUS = {{level.anonymous|booltojs}};
-    var PATH = $('#data').data('path');
-    var ORIGIN = $('#data').data('origin');
-    var DESTINATIONS = $('#data').data('destinations');
-    var DECOR = {{decor|safe}};
-    var BACKGROUND_URL = "{{background}}";
-    var HOUSE_URL = "{{house}}";
-    var CFC_URL = "{{cfc}}";
-    var TRAFFIC_LIGHTS = $('#data').data('trafficLights');
-    var COWS = $('#data').data('cows');
-    var EPISODE = $('#data').data('episode');
-    var LEVEL_ID = $('#data').data('levelId');
-    var LEVEL_NAME = $('#data').data('levelName');
-    var NEXT_LEVEL_URL = "{% if next_level_url %}{{next_level_url}}{% else %}{% endif %}";
-    var MODEL_SOLUTION = {{model_solution|default:"[]"}};
-    var DISABLE_ROUTE_SCORE = {{level.disable_route_score|booltojs}};
-    var LESSON = "{{lesson|escapejs}}";
-    var HINT = "{{hint|escapejs}}";
-    var DEFAULT_LEVEL = {{level.default|booltojs}};
-    var FUEL_GAUGE =  {{level.fuel_gauge|booltojs}};
-    var CHARACTER_NAME = "{{character.name}}";
-    var CHARACTER_EN_FACE_URL = "{{character.en_face}}";
-    var CHARACTER_URL = "{{character_url}}";
-    var CHARACTER_HEIGHT = "{{character_height}}";
-    var CHARACTER_WIDTH = "{{character_width}}";
-    var WRECKAGE_URL = "{{wreckage_url}}";
-    var NIGHT_MODE_FEATURE_ENABLED = {{night_mode_feature_enabled}};
-    var NIGHT_MODE = {{night_mode}};
-    var FLIP_NIGHT_MODE_URL = "{{flip_night_mode_url|default:""}}";
-    var USER_LOGGED_IN = {{request.user.is_authenticated|booltojs}};
-
-    var RANDOM = {{episode.random_levels_enabled|booltojs}};
-    var IS_RANDOM_LEVEL = {{random_level|booltojs}};
-
-    var BLOCKS =  [];
-    var maxInstances = {};
+    var ANONYMOUS = {{level.anonymous|booltojs}}
+    var PATH = $('#data').data('path')
+    var ORIGIN = $('#data').data('origin')
+    var DESTINATIONS = $('#data').data('destinations')
+    var DECOR = {{decor|safe}}
+    var BACKGROUND_URL = "{{background}}"
+    var HOUSE_URL = "{{house}}"
+    var CFC_URL = "{{cfc}}"
+    var TRAFFIC_LIGHTS = $('#data').data('trafficLights')
+    var COWS = $('#data').data('cows')
+    var EPISODE = $('#data').data('episode')
+    var LEVEL_ID = $('#data').data('levelId')
+    var LEVEL_NAME = $('#data').data('levelName')
+    var PREV_LEVEL_URL = "{% if prev_level_url %}{{prev_level_url}}{% else %}{% endif %}"
+    var NEXT_LEVEL_URL = "{% if next_level_url %}{{next_level_url}}{% else %}{% endif %}"
+    var MODEL_SOLUTION = {{model_solution|default:"[]"}}
+    var DISABLE_ROUTE_SCORE = {{level.disable_route_score|booltojs}}
+    var DISABLE_ALGORITHM_SCORE = {{level.disable_algorithm_score|booltojs}}
+    var SUBTITLE = "{{subtitle|escapejs}}"
+    var LESSON = "{{lesson|escapejs}}"
+    var HINT = "{{hint|escapejs}}"
+    var COMMANDS = "{{commands|escapejs}}"
+    var DEFAULT_LEVEL = {{level.default|booltojs}}
+    var FUEL_GAUGE =  {{level.fuel_gauge|booltojs}}
+    var CHARACTER_NAME = "{{character.name}}"
+    var CHARACTER_EN_FACE_URL = "{{character.en_face}}"
+    var CHARACTER_URL = "{{character_url}}"
+    var CHARACTER_HEIGHT = "{{character_height}}"
+    var CHARACTER_WIDTH = "{{character_width}}"
+    var WRECKAGE_URL = "{{wreckage_url}}"
+    var NIGHT_MODE_FEATURE_ENABLED = {{night_mode_feature_enabled}}
+    var NIGHT_MODE = {{night_mode}}
+    var FLIP_NIGHT_MODE_URL = "{{flip_night_mode_url|default:""}}"
+    var USER_LOGGED_IN = {{request.user.is_authenticated|booltojs}}
+
+    var RANDOM = {{episode.random_levels_enabled|booltojs}}
+    var IS_RANDOM_LEVEL = {{random_level|booltojs}}
+
+    var BLOCKS =  []
+    var maxInstances = {}
     {% for block in blocks %}
-      BLOCKS.push({'type':"{{block.type}}"{% if block.number %}, 'number':{{block.number}} {% endif %}});
+      BLOCKS.push({'type':"{{block.type}}"{% if block.number %}, 'number':{{block.number}} {% endif %}})
       {% if block.number %}
-        maxInstances["{{block.type}}"] = {{block.number}};
+        maxInstances["{{block.type}}"] = {{block.number}}
       {% endif %}
     {% endfor %}
 
-    var BLOCKLY_XML = '<xml id="blockly_toolbox" style="display: none">';
+    var BLOCKLY_XML = '<xml id="blockly_toolbox" style="display: none">'
     for (var i = 0; i < BLOCKS.length; i++) {
-        BLOCKLY_XML += '<block type="' + BLOCKS[i].type + '"></block>';
+        BLOCKLY_XML += '<block type="' + BLOCKS[i].type + '"></block>'
     }
 
-    BLOCKLY_XML += '</xml>';
-    var MAX_FUEL = {{level.max_fuel}};
-    var DIRECT_DRIVE = {{level.direct_drive|booltojs}};
-    var NEXT_EPISODE = {% if level.episode.next_episode == None %}null{% else %}"{{level.episode.next_episode.id}}"{% endif %};
-    var WORKSPACE = {% if workspace == None %}null{% else %}"{{workspace}}"{% endif %};
-    var BLOCKLY_ENABLED = {{level.blocklyEnabled|booltojs}};
-    var PYTHON_ENABLED = {{level.pythonEnabled|booltojs}};
-    var PYTHON_VIEW_ENABLED = {{level.pythonViewEnabled|booltojs}};
-    var RETURN_URL = "{{return_url}}";
-    var PYTHON_WORKSPACE = {% if python_workspace == None %}null{% else %}"{{python_workspace|linebreaksbr}}"{% endif %};
+    BLOCKLY_XML += '</xml>'
+    var MAX_FUEL = {{level.max_fuel}}
+    var NEXT_EPISODE = {% if level.episode.next_episode == None %}null{% else %}"{{level.episode.next_episode.id}}"{% endif %}
+    var WORKSPACE = {% if workspace == None %}null{% else %}"{{workspace}}"{% endif %}
+    var BLOCKLY_ENABLED = {{level.blockly_enabled|booltojs}}
+    var PYTHON_ENABLED = {{level.python_enabled|booltojs}}
+    var PYTHON_VIEW_ENABLED = {{level.python_view_enabled|booltojs}}
+    var RETURN_URL = "{{return_url}}"
+    var PYTHON_WORKSPACE = {% if python_workspace == None %}null{% else %}"{{python_workspace|linebreaksbr}}"{% endif %}
   </script>
 
-
   <script defer type="text/javascript" src="{% static 'game/js/utils.js' %}"></script>
   <script defer type="text/javascript" src="{% static 'game/js/skulpt/skulpt.min.js' %}"></script>
   <script defer type="text/javascript" src="{% static 'game/js/skulpt/skulpt-stdlib.js' %}"></script>
@@ -103,6 +105,7 @@
   <script defer type="text/javascript" src="{% static 'game/js/blocklyCompiler.js' %}"></script>
   <script defer type="text/javascript" src="{% static 'game/js/blocklyCustomBlocks.js' %}"></script>
   <script defer type="text/javascript" src="{% static 'game/js/blocklyCustomisations.js' %}"></script>
+  <script defer type="text/javascript" src="{% static 'game/js/loadLanguages.js' %}"></script>
   <script defer type="text/javascript" src="{% static 'game/js/blocklyMessages.js' %}"></script>
   <script defer type="text/javascript" src="{% static 'game/js/model.js' %}"></script>
   <script defer type="text/javascript" src="{% static 'game/js/pathFinder.js' %}"></script>
@@ -142,33 +145,50 @@
 
 {% block content %}
 {{ block.super }}
-<div style='position: fixed; top: 0px; right: 0px; background: black; z-index: 99'>
+
+<div style='position: fixed; top: 0; right: 0; background: black; z-index: 99'>
   <div id='fps' style='font-size: 2em; color: white'></div>
 </div>
 
 <div id="wrapper" class="unselectable">
+  {% if level.python_view_enabled or level.python_enabled %}
+    <img src="{% static 'game/image/python_den_header.svg' %}" class="game-header">
+  {% endif %}
   <span id="game_page"></span>
 
   <div id="tabs" class='no-print bg--{{ level.difficulty }}'>
-    <div id="blockly_tab" class="tab selectable {% if level.blocklyEnabled %}{% else %}hidden{% endif %}">
+
+    <div id="blockly_tab"
+         class="tab selectable {% if not level.blockly_enabled and not level.python_view_enabled %}hidden{% endif %}">
       <input type="radio" name="tabs" id="blockly_radio" checked>
       <label for="blockly_radio">
-        <img src="{% static "game/image/icons/blockly.svg" %}">
+        <img src="{% static 'game/image/icons/blockly.svg' %}">
         <span>{% trans "Blockly" %}</span>
       </label>
     </div>
-    <div id="python_tab" class="tab selectable {% if level.pythonEnabled %}{% else %}hidden{% endif %}">
+
+    <div id="python_tab" class="tab selectable {% if not level.python_enabled %}hidden{% endif %}">
       <input type="radio" name="tabs" id="python_radio">
       <label for="python_radio">
-        <img src='{% static "game/image/icons/python.svg" %}'>
-        <span>{% trans "Python" %}</span>
+        <img src="{% static 'game/image/icons/python.svg' %}">
+        <span>{% trans "Python Den" %}</span>
       </label>
     </div>
 
+    <div id="language_tab" class="tab">
+      <select name="language_dropdown" class="tab selectable bg--{{level.difficulty}} {% if level.python_enabled %}hidden{% endif %}" id="language_dropdown" onchange="gameUpdateBlockLanguageAndCookie(this.value)">
+        {% for language_code, language in available_language_dict.items %}
+          <option id="language_dropdown_{{language_code}}" value="{{language_code}}">{{language}}</option>
+        {% endfor %}
+      </select>
+    </div>
+
+    <div class="tab_break"></div>
+
     <div id="clear_tab" class="tab">
       <input type="radio" name="tabs" id="clear_program_radio">
       <label for="clear_program_radio">
-        <img src='{% static "game/image/icons/clear.svg" %}'>
+        <img src="{% static 'game/image/icons/clear.svg' %}">
         <span>{% trans "Clear" %}</span>
       </label>
     </div>
@@ -178,7 +198,7 @@
     <div id="play_tab" class="tab">
       <input type="radio" name="tabs" id="play_radio">
       <label for="play_radio">
-        <img src='{% static "game/image/icons/play.svg" %}'>
+        <img src="{% static 'game/image/icons/play.svg' %}">
         <span>{% trans "Play" %}</span>
         {% csrf_token %}
       </label>
@@ -187,7 +207,7 @@
     <div id="fast_tab" class="tab">
       <input type="radio" name="tabs" id="fast_radio">
       <label for="fast_radio">
-          <img src='{% static "game/image/icons/fast.svg" %}'>
+          <img src="{% static 'game/image/icons/fast.svg' %}">
           <span>{% trans "Fast" %}</span>
       </label>
     </div>
@@ -195,7 +215,7 @@
     <div id="stop_tab" class="tab">
       <input type="radio" name="tabs" id="stop_radio">
       <label for="stop_radio">
-        <img src='{% static "game/image/icons/stop.svg" %}'>
+        <img src="{% static 'game/image/icons/stop.svg' %}">
         <span>{% trans "Stop" %}</span>
       </label>
     </div>
@@ -203,25 +223,25 @@
     <div id="step_tab" class="tab">
       <input type="radio" name="tabs" id="step_radio">
       <label for="step_radio">
-        <img src='{% static "game/image/icons/step.svg" %}'>
+        <img src="{% static 'game/image/icons/step.svg' %}">
         <span>{% trans "Step" %}</span>
       </label>
     </div>
 
     <div class="tab_break"></div>
 
-      <div id="solution_tab"class="tab selectable" hidden>
+      <div id="solution_tab" class="tab selectable" hidden>
           <input type="radio" name="tabs" id="solution_radio">
           <label for="solution_radio">
-              <img src='{% static "game/image/icons/solve.svg" %}'>
+              <img src="{% static 'game/image/icons/solve.svg' %}">
               <span>{% trans "Solve" %}</span>
           </label>
       </div>
 {% if request.user.is_authenticated %}
-    <div id="load_tab"class="tab selectable">
+    <div id="load_tab" class="tab selectable">
       <input type="radio" name="tabs" id="load_radio">
       <label for="load_radio">
-        <img src='{% static "game/image/icons/load.svg" %}'>
+        <img src="{% static 'game/image/icons/load.svg' %}">
         <span>{% trans "Load" %}</span>
       </label>
     </div>
@@ -229,16 +249,16 @@
     <div id="save_tab" class="tab selectable">
       <input type="radio" name="tabs" id="save_radio">
       <label for="save_radio">
-        <img src='{% static "game/image/icons/save.svg" %}'>
+        <img src="{% static 'game/image/icons/save.svg' %}">
         <span>{% trans "Save" %}</span>
       </label>
     </div>
 
     {% if user|get_user_status == 'TEACHER' and not level.default%}
-    <div id="share_tab"  class="tab selectable">
+    <div id="share_tab" class="tab selectable">
       <input type="radio" name="tabs" id="share_radio">
       <label for="share_radio">
-        <img src='{% static "game/image/icons/share.svg" %}'>
+        <img src="{% static 'game/image/icons/share.svg' %}">
         <span>Share</span>
       </label>
     </div>
@@ -249,7 +269,7 @@
     <div id="help_tab" class="tab selectable">
       <input type="radio" name="tabs" id="help_radio">
       <label for="help_radio">
-        <img src='{% static "game/image/icons/help.svg" %}'>
+        <img src="{% static 'game/image/icons/help.svg' %}">
         <span>{% trans "Help" %}</span>
       </label>
     </div>
@@ -257,7 +277,7 @@
     <!--div class="tab">
       <input type="radio" name="tabs" id="big_code_mode_radio">
       <label for="big_code_mode_radio">
-        <img src='{% static "game/image/icons/big_code_mode.svg" %}'>
+        <img src="{% static 'game/image/icons/big_code_mode.svg' %}">
         <span>Enlarge</span>
       </label>
     </div-->
@@ -265,7 +285,7 @@
     <div id="mute_tab" class="tab">
       <input type="radio" name="tabs" id="mute_radio">
       <label for="mute_radio">
-        <img src='{% static "game/image/icons/muted.svg" %}'>
+        <img src="{% static 'game/image/icons/muted.svg' %}">
         <span id="mute_text">{% trans "Mute" %}</span>
       </label>
     </div>
@@ -274,19 +294,19 @@
       <input type="radio" name="tabs" id="nightmode_radio">
       <label for="nightmode_radio">
           {% if night_mode == "true" %}
-        <img src='/static/game/image/icons/day.svg'>
+        <img src="/static/game/image/icons/day.svg">
         <span>{% trans "Day" %}</span>
           {% else %}
-          <img src='/static/game/image/icons/night.svg'>
+          <img src="/static/game/image/icons/night.svg">
         <span>{% trans "Night" %}</span>
           {% endif %}
       </label>
     </div>
 
-    <div  id="quit_tab"class="tab">
+    <div  id="quit_tab" class="tab">
       <input type="radio" name="tabs" id="quit_radio">
       <label for="quit_radio">
-        <img src='{% static "game/image/icons/quit.svg" %}'>
+        <img src="{% static 'game/image/icons/quit.svg' %}">
         <span>{% trans "Exit" %}</span>
       </label>
     </div>
@@ -299,24 +319,24 @@
       <div id="blockly_pane" class="tab_pane">
         <div id="blockCountDiv"></div>
 
-        <div id="blockly_holder" style='width: calc(100%); {% if level.pythonViewEnabled %} height: 50%{% endif %}'></div>
+        <div id="blockly_holder" style='width: calc(100%); {% if level.python_view_enabled %} height: 50%; {% endif %}'></div>
 
-        {% if level.pythonViewEnabled %}
+        {% if level.python_view_enabled %}
           <div id="pythonViewSlider" class="no-print"></div>
         {% endif %}
 
-        <div id="pythonView_holder" {% if not level.pythonViewEnabled %} style="visibility: hidden" {% endif %}>
+        <div id="pythonView_holder" {% if not level.python_view_enabled %} style="visibility: hidden" {% endif %}>
           <p>{% trans "This is what your program would look like in Python:" %}</p>
           <textarea id="pythonView" cols="85" rows="25"></textarea>
         </div>
       </div>
 
       <div id="python_pane" class="tab_pane">
-        <div id="pythonCode" {% if not level.pythonEnabled %} style="visibility: hidden" {% endif %}>
+        <div id="pythonCode" {% if not level.python_enabled %} style="visibility: hidden" {% endif %}>
           <div id="editor">
             <div class="description">
               <h3>{% trans "Python Program" %}
-                {% if level.blocklyEnabled %}
+                {% if level.blockly_enabled %}
                 <button class="navigation_button long_button" id="convert_from_blockly">
                   <span>{% trans "Convert from Blockly" %}</span>
                 </button>
@@ -325,7 +345,7 @@
               <div>
                   <div id="pythonIntro">{% trans "Use the Python editor below to design your program, and then click play to try it out!" %}</div>
                   <button class="navigation_button_portal long_button" id="van_commands_help">
-                    <img src="{% static "game/image/icons/python.svg" %}">
+                    <img src="{% static 'game/image/icons/python.svg' %}">
                     <span>{% trans "Commands" %}</span>
                   </button>
                 </div>
@@ -338,7 +358,7 @@
               <div id="consoleRunCode">
                 <button onclick="runCode()" id="run-code-button" class="navigation_button_kurono">
                     <span>{% trans "Run code" %}</span>
-                    <img src='{% static "game/image/icons/play.svg" %}'>
+                    <img src="{% static 'game/image/icons/play.svg' %}">
                 </button>
                   <h4>
                     {% trans "Console log" %}
@@ -376,13 +396,13 @@
             </div>
             <br>
             <div>
-              <button class="navigation_button" id="deleteWorkspace">
-                <img src="{% static "game/image/icons/clear.svg" %}"/>
+              <button class="navigation_button long_button" id="deleteWorkspace">
+                <img src="{% static 'game/image/icons/clear.svg' %}"/>
                 <span>{% trans "Delete" %}</span>
               </button>
 
               <button class="navigation_button long_button" id="loadWorkspace">
-                <img src="{% static "game/image/icons/load.svg" %}"/>
+                <img src="{% static 'game/image/icons/load.svg' %}"/>
                 <span>{% trans "Load" %}</span>
               </button>
             </div>
@@ -390,7 +410,7 @@
       </div>
 
       <div id="save_pane" class="tab_pane">
-        <h2 class="title"><img class="modal_image" src='{% static "game/image/icons/save.svg" %}'>{% trans "Save" %}</h2>
+        <h2 class="title"><img class="modal_image" src="{% static 'game/image/icons/save.svg' %}">{% trans "Save" %}</h2>
         <p>{% trans "Here you can save your program so you can retrieve it later!" %}</p>
         <div class="scrolling-table-wrapper">
           <table id="saveWorkspaceTableHeader">
@@ -410,7 +430,7 @@
         <div>
           <input type="text" id="workspaceNameInput">
           <button class="navigation_button long_button" id="saveWorkspace">
-            <img src="{% static "game/image/icons/save.svg" %}">
+            <img src="{% static 'game/image/icons/save.svg' %}">
             <span>{% trans "Save" %}</span>
           </button>
         </div>
@@ -418,7 +438,7 @@
 
       {% if user|get_user_status == 'TEACHER' and not level.default %}
       <div id="share_pane" class="tab_pane">
-        <h2 class="title"><img class="modal_image" src='{% static "game/image/icons/share.svg" %}'>Share</h2>
+        <h2 class="title"><img class="modal_image" src="{% static 'game/image/icons/share.svg' %}">Share</h2>
 
         <p>Here you can share this level with your classes or your fellow teachers.</p>
 
@@ -453,37 +473,142 @@
         </div>
 
         <button class="navigation_button long_button" id="shareWithAll">
-          <img src="{% static "game/image/icons/share.svg" %}">
+          <img src="{% static 'game/image/icons/share.svg' %}">
           <span>Share with all</span>
         </button>
       </div>
       {% endif %}
     </div>
 
-    <div id="paper" class="col" style="background-color:{{level.theme.background}}"></div>
-
-    <div id="direct_drive" class="unselectable no-print">
-      <button class="direct_drive_button" id="moveForward" {% if not level.direct_drive %} style="visibility: hidden" {% endif %}></button>
-      <button class="direct_drive_button" id="turnLeft" {% if not level.direct_drive %} style="visibility: hidden" {% endif %}></button>
-      <button class="direct_drive_button" id="go" {% if not level.direct_drive %} style="visibility: hidden" {% endif %}></button>
-      <button class="direct_drive_button" id="turnRight" {% if not level.direct_drive %} style="visibility: hidden" {% endif %}></button>
-    </div>
+    <div id="paper" class="col" style="background-color: {{level.theme.background}}"></div>
 
     <div id="zoom_pan" >
-      <button class="direct_drive_button" id="zoomOut" ></button>
-      <button class="direct_drive_button" id="zoomIn"></button>
+      <button class="zoom_pan_button" id="zoomOut" ></button>
+      <button class="zoom_pan_button" id="zoomIn"></button>
     </div>
 
     <div id="fuelGauge" class="no-print unselectable">
-      <img src="{% static "game/image/fuelGauge.svg" %}"/>
+      <img src="{% static 'game/image/fuelGauge.svg' %}"/>
       <div id="fuelGaugePointer">
-        <img src="{% static "game/image/fuelGaugePointer.svg" %}"/>
+        <img src="{% static 'game/image/fuelGaugePointer.svg' %}"/>
       </div>
     </div>
 
+    <div id="electricFuelGauge" class="no-print unselectable">
+      <electric-gauge />
+    </div>
+
     <div id="consoleSlider" class="no-print"></div>
 
   </div>
 </div>
 
+<script>
+  document.getElementById("language_dropdown").value = navigator.language.toLowerCase();
+
+  if (document.getElementById("language_dropdown").value == "") {
+    document.getElementById("language_dropdown").value = "en";
+  }
+</script>
+
+<script>
+  customElements.define("electric-gauge", class extends HTMLElement {
+    connectedCallback() {
+      setTimeout(() => {
+        this.innerHTML = `<svg id="a" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 119.58 119.58">
+                            <defs>
+                              <linearGradient id="c" x1="2.5" y1="59.86" x2="117.08" y2="59.86" gradientTransform="translate(0 119.65) scale(1 -1)" gradientUnits="userSpaceOnUse">
+                                <stop offset="0" stop-color="#050505"/>
+                                <stop offset="1" stop-color="#111"/>
+                              </linearGradient>
+                              <linearGradient id="g" x1="30.57" y1="24.62" x2="38.29" y2="24.62" gradientTransform="translate(20.78 -15.45) rotate(35.62)" xlink:href="#c"/>
+                              <linearGradient id="h" x1="12.95" y1="46.44" x2="24.09" y2="46.44" gradientTransform="translate(56.12 13.48) rotate(70.5)" xlink:href="#c"/>
+                              <linearGradient id="i" x1="59.23" y1="16.37" x2="60.45" y2="16.37" gradientTransform="matrix(1,0,0,1,0,0)" xlink:href="#c"/>
+                              <linearGradient id="j" x1="59.23" y1="103.05" x2="60.45" y2="103.05" gradientTransform="matrix(1,0,0,1,0,0)" xlink:href="#c"/>
+                              <linearGradient id="k" x1="12.96" y1="73.1" x2="24.28" y2="73.1" gradientTransform="translate(23.5 -2.18) rotate(18)" xlink:href="#c"/>
+                              <linearGradient id="l" x1="30.5" y1="94.77" x2="38.24" y2="94.77" gradientTransform="translate(90.82 11.25) rotate(53.99)" xlink:href="#c"/>
+                              <linearGradient id="m" x1="81.28" y1="95.01" x2="89.02" y2="95.01" gradientTransform="translate(72.11 -31.9) rotate(36)" xlink:href="#c"/>
+                              <linearGradient id="n" x1="81.29" y1="24.57" x2="89.01" y2="24.57" gradientTransform="translate(55.5 -58.95) rotate(54.36)" xlink:href="#c"/>
+                              <linearGradient id="o" x1="95.49" y1="46.4" x2="106.63" y2="46.4" gradientTransform="translate(21.24 -31.02) rotate(19.47)" xlink:href="#c"/>
+                              <linearGradient id="p" x1="95.3" y1="73.06" x2="106.61" y2="73.06" gradientTransform="translate(139.25 -45.53) rotate(72.01)" xlink:href="#c"/>
+                              <linearGradient id="r" x1="59.79" y1="116.72" x2="59.79" y2="56.09" gradientTransform="translate(0 119.65) scale(1 -1)" gradientUnits="userSpaceOnUse">
+                                <stop offset="0" stop-color="#fff" stop-opacity=".4"/>
+                                <stop offset="1" stop-color="#fff" stop-opacity="0"/>
+                              </linearGradient>
+                              <radialGradient id="s" cx="59.25" cy="619.61" fx="59.25" fy="619.61" r="96.47" gradientTransform="translate(0 -88.24) scale(1 .28)" gradientUnits="userSpaceOnUse">
+                                <stop offset=".29" stop-color="#fff" stop-opacity="0"/>
+                                <stop offset="1" stop-color="#fff" stop-opacity=".4"/>
+                              </radialGradient>
+                            </defs>
+                            <g id="b">
+                              <circle fill="url(#c)" cx="59.79" cy="59.79" r="57.29"/>
+                              <path fill="#141414" stroke-width="0px" d="M59.79,13.14c29.86,0,54.38,22.85,57.05,52.02.16-1.74.24-3.49.24-5.27,0-31.64-25.65-57.29-57.29-57.29S2.5,28.25,2.5,59.88c0,1.78.09,3.54.24,5.27C5.4,35.99,29.93,13.14,59.79,13.14Z"/>
+                              <path stroke="#fff" fill="none" stroke-miterlimit="10" d="M59.79,109.9c-27.63,0-50.11-22.48-50.11-50.11S32.16,9.68,59.79,9.68s50.11,22.48,50.11,50.11-22.48,50.11-50.11,50.11Z"/>
+                              <circle fill="none" stroke-miterlimit="10" stroke="#3a3a3a" stroke-width="5px"  cx="59.79" cy="59.79" r="57.29"/>
+                            </g>
+                            <path id="d" fill="#fff" stroke-width="0px" d="M68.91,70.86h-7.35c-.28,0-.48-.26-.42-.53l2.49-10.37c.11-.46-.49-.74-.77-.35l-11.46,16.1c-.2.28,0,.68.35.68h7.35c.28,0,.48.26.42.53l-2.49,10.37c-.11.46.49.74.77.35l11.46-16.1c.2-.28,0-.68-.35-.68Z"/>
+                            <g id="e" isolation="isolate">
+                              <g isolation="isolate">
+                                <text
+                                  id="Text_percentage"
+                                  data-name="Text percentage"
+                                  font-family="LilitaOne, 'Lilita One'"
+                                  font-size="16px"
+                                  transform="translate(43.2 48.2)"
+                                  fill="#4ba0dd">
+                                  <tspan id="Text_percentage_value" x="0" y="0">100%</tspan>
+                                </text>
+                              </g>
+                            </g>
+                            <path id="f" fill="#4ba0dd" stroke-width="0px" d="
+                              M106.22,44.62
+                              c-3.21-9.9-9.5-18.41-17.74-24.4-8.06-5.86-17.97-9.33-28.69-9.33s-20.64,3.47-28.69,9.33
+                              c-8.24,6-14.53,14.5-17.74,24.4-1.54,4.75-2.39,9.82-2.39,15.09
+                              s.84,10.33,2.39,15.09
+                              c3.21,9.9,9.5,18.41,17.74,24.4,8.06,5.86,17.97,9.33,28.69,9.33
+                              s20.64-3.47,28.69-9.33
+                              c8.24-6,14.53-14.5,17.74-24.4,1.54-4.75,2.39-9.82,2.39-15.09
+                              s-.84-10.33-2.39-15.09Z
+                              M82.27,90.65
+                              c-6.31,4.59-14.08,7.31-22.48,7.31
+                              s-16.17-2.72-22.48-7.31
+                              c-6.46-4.7-11.38-11.36-13.9-19.12-1.21-3.72-1.87-7.69-1.87-11.82s.66-8.1,1.87-11.82
+                              c2.52-7.76,7.44-14.42,13.9-19.12,6.31-4.59,14.08-7.31,22.48-7.31
+                              s16.17,2.72,22.48,7.31
+                              c6.46,4.7,11.38,11.36,13.9,19.12,1.21,3.72,1.87,7.69,1.87,11.82
+                              s-.66,8.1-1.87,11.82
+                              c-2.52,7.76-7.44,14.42-13.9,19.12Z"
+                              />
+                            <circle
+                              id="emptying_circle"
+                              cx="59.79"
+                              cy="59.79"
+                              r="43.5"
+                              stroke-width="11"
+                              stroke="#213a47"
+                              fill="transparent"
+                              stroke-dasharray="273.18"
+                              stroke-dashoffset="273.18"
+                              transform="rotate(90, 59.79, 59.79)"
+                              />
+                            <rect fill="url(#g)" stroke-width="0px" x="33.82" y="18.84" width="1.22" height="11.56" transform="translate(-7.9 24.66) rotate(-35.62)"/>
+                            <rect fill="url(#h)" stroke-width="0px" x="17.91" y="40.75" width="1.22" height="11.39" transform="translate(-31.44 48.4) rotate(-70.5)"/>
+                            <rect fill="url(#i)" stroke-width="0px" x="59.23" y="10.63" width="1.22" height="11.5"/>
+                            <rect fill="url(#j)" stroke-width="0px" x="59.23" y="97.3" width="1.22" height="11.5"/>
+                            <rect fill="url(#k)" stroke-width="0px" x="12.87" y="72.49" width="11.5" height="1.22" transform="translate(-21.68 9.33) rotate(-18)"/>
+                            <rect fill="url(#l)" stroke-width="0px" x="28.62" y="94.16" width="11.49" height="1.22" transform="translate(-62.5 66.86) rotate(-53.99)"/>
+                            <rect fill="url(#m)" stroke-width="0px" x="84.54" y="89.26" width="1.22" height="11.49" transform="translate(-39.58 68.19) rotate(-36)"/>
+                            <rect fill="url(#n)" stroke-width="0px" x="79.37" y="23.96" width="11.56" height="1.22" transform="translate(15.57 79.46) rotate(-54.36)"/>
+                            <rect fill="url(#o)" stroke-width="0px" x="95.36" y="45.79" width="11.39" height="1.22" transform="translate(-9.69 36.33) rotate(-19.47)"/>
+                            <rect fill="url(#p)" stroke-width="0px" x="100.35" y="67.31" width="1.22" height="11.5" transform="translate(.28 146.51) rotate(-72.01)"/>
+                            <g id="q">
+                              <path fill="url(#r)" stroke-width="0px" d="M109.8,47.55c0,27.62-20.9,6.09-50.02,6.09s-50.02,21.53-50.02-6.09C9.77,29.42,33.7,7.65,59.79,7.65s50.02,22.32,50.02,39.9Z"/>
+                              <path fill="url(#s)" stroke-width="0px" d="M97.33,91.74c0-13.29-15.69-2.93-37.54-2.93s-37.55-10.36-37.55,2.93c0,8.73,17.96,20.18,37.55,20.18,19.58,0,37.54-11.72,37.54-20.18Z"/>
+                            </g>
+                          </svg>`
+      })
+    }
+  })
+</script>
+
 {% endblock %}