uccser/cs-field-guide

{% extends interactive_mode_template %}

{% load i18n %}
{% load static %}

{% block interactive_html %}
  <div id="interactive-cmy-mixer" class="my-3 container-fluid">
    <h3>{% trans "CMY Colour Mixer - Used by Printers" %}</h3>
    <div id="interactive-cmy-mixer-container" class="row">
      <div id="interactive-cmy-mixer-result" class="d-flex col-sm-12 col-md-3 col-lg-4 align-items-center justify-content-center ml-2">
        <p id="interactive-cmy-mixer-colour-code" class="m-0 py-5"></p>
      </div>
        <div id="interactive-cmy-mixer-sliders" class="col-sm-12 col-md-8 col-lg-7 pt-3">
          <div>
            <div>{% trans '<strong>Cyan</strong> - Currently set to <input id="interactive-cmy-mixer-cyan-value" value=127 class="form-control w-auto d-inline" size="3">' %}</div>
            <div class="interactive-cmy-mixer-slider"></div>
          </div>
          <div>
            <div>{% trans '<strong>Magenta</strong> - Currently set to <input id="interactive-cmy-mixer-magenta-value" value=127 class="form-control w-auto d-inline" size="3">' %}</div>
            <div class="interactive-cmy-mixer-slider"></div>
          </div>
          <div>
            <div>{% trans '<strong>Yellow</strong> - Currently set to <input id="interactive-cmy-mixer-yellow-value" value=127 class="form-control w-auto d-inline" size="3">' %}</div>
            <div class="interactive-cmy-mixer-slider"></div>
          </div>
        </div>
    </div>
    <div id="numeral-system" class="m-1">
      <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="interactive-cmy-mixer-colourCode" value="dec" id="interactive-cmy-mixer-dec-colour-code" checked>
          <label class="form-check-label" for="interactive-cmy-mixer-dec-colour-code">{% trans "Decimal" %}</label>
      </div>
      <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="interactive-cmy-mixer-colourCode" value="hex" id="interactive-cmy-mixer-hex-colour-code">
          <label class="form-check-label" for="interactive-cmy-mixer-hex-colour-code">{% trans "Hexadecimal" %}</label>
      </div>
    </div>
  </div>
{% endblock interactive_html %}

{% block interactive_css %}
  <link rel="stylesheet" href="{% static 'interactives/cmy-mixer/css/cmy-mixer.css' %}">
{% endblock interactive_css %}

{% block interactive_js %}
  <script type="text/javascript" src="{% static 'interactives/cmy-mixer/js/cmy-mixer.js' %}"></script>
{% endblock interactive_js %}