X-Git-Url: https://git.mdrn.pl/wolnelektury.git/blobdiff_plain/8a078a30db08afb680c48ce94d6e576236febeed..HEAD:/src/experiments/templates/experiments/main_switch.html

diff --git a/src/experiments/templates/experiments/main_switch.html b/src/experiments/templates/experiments/main_switch.html
index fbdf863e6..883ff69fb 100644
--- a/src/experiments/templates/experiments/main_switch.html
+++ b/src/experiments/templates/experiments/main_switch.html
@@ -1,43 +1,51 @@
-{% extends "base/base.html" %}
+{% extends "base.html" %}
+{% load static i18n %}
 
+{% block breadcrumbs %}
+  <span>{% translate "Aktualne eksperymenty" %}</span>
+{% endblock %}
 
-{% block body %}
-  <img src="https://upload.wikimedia.org/wikipedia/commons/c/c8/MH1Asimulator.JPG" style="width:100">
-
-  {% for exp in request.EXPERIMENTS.values %}
-    <div class="experiment" data-slug="{{ exp.slug }}">
-      {{ exp.name }}
-      <button
-          {% if exp.value %}
-          disabled class="active"
-          {% endif %}
-          data-value="on">włączony</button>
-      <button
-          {% if not exp.value %}
-          disabled class="active"
-          {% endif %}
-          data-value="off">wyłączony</button>
+{% block main %}
+  {% block body %}
+    <div class="l-checkout__box">
+      <div class="l-checkout__box__header">
+        <img src="{% static 'img/experiment.jpg' %}">
+        <div class="l-checkout__box__header__content">
+          <h1>{% translate "Aktualne eksperymenty" %}</h1>
+        </div>
+      </div>
+      <div>
+        {% for exp in experiments %}
+          <div class="experiment">
+            <span>
+              {{ exp.name }}
+            </span>
+            <div>
+              <input id="experiment-{{ exp.slug }}-off" name="{{ exp.slug }}" class="toggle-input toggle-input-left" value="off" type="radio" {% if not exp.value %}checked="checked"{% endif %}>
+              <input id="experiment-{{ exp.slug }}-on" name="{{ exp.slug }}" class="toggle-input toggle-input-right"  value="on" type="radio" {% if exp.value %}checked="checked"{% endif %}>
+              <div class="l-switch__wrapper">
+                <div class="l-switch white">
+                  <label class="toggle-for toggle-for-left" for="experiment-{{ exp.slug }}-off">{% translate "wyłączony" %}</label>
+                  <label class="toggle-for toggle-for-right" for="experiment-{{ exp.slug }}-on">{% translate "włączony" %}</label>
+                  <span class="toggle"></span>
+                </div>
+              </div>
+            </div>
+          </div>
+        {% empty %}
+          <div class="experiment">
+            <div>
+              {% translate 'Aktualnie nie są dostępne żadne eksperymenty.' %}
+            </div>
+          </div>
+        {% endfor %}
+      </div>
     </div>
-  {% endfor %}
-{% endblock %}
 
-{% block extrabody %}
-  <style>
-   .experiment {
-       margin: 1em 0;
-       font-size: 1.5em;
-   }
-   .experiment button {
-       margin: 0 1em;
-       padding: .5em;
-       font-size: 1em;
+    <div class="legend">
+      {% translate "Obraz" %}:
+      Ken Lund, <a target="_blank" href="https://flickr.com/photos/kenlund/42675643424/">Windmill Modern Art, Chicago Lakefront Trail, Chicago, Illinois</a>, <a href="https://creativecommons.org/licenses/by-sa/2.0/" target="_blank">CC By-SA 2.0</a>
+    </div>
+  {% endblock %}
 
-   }
-  </style>
-  <script>
-   $(".experiment button").click(function() {
-       document.cookie = 'EXPERIMENT_' + $(this).parent().data('slug') + '=' + $(this).data('value') + '; path=/';
-       window.location.reload(true);
-   });
-  </script>
 {% endblock %}