uccser/cs-field-guide

{% extends interactive_mode_template %}

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

{% block interactive_html %}
  <div id="interactive-rgb-mixer" class="my-3 container-fluid">
    <img id="pixelmania-logo" src="{% static 'interactives/rgb-mixer/img/pixelmania-logo-half-size.png' %}" class="d-none img-fluid" crossorigin="anonymous">
    <h3>{% trans "RGB Colour Mixer - Used by Screens" %}</h3>
    <div id="interactive-rgb-mixer-container" class="row">
      <div id="interactive-rgb-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-rgb-mixer-colour-code" class="m-0 py-5"></p>
      </div>
        <div id="interactive-rgb-mixer-sliders" class="col-sm-12 col-md-8 col-lg-7 pt-3">
          <div>
            <div>
                <strong>{% trans 'Red' %}</strong> - {% trans 'Currently set to' %} <input id="interactive-rgb-mixer-red-value" value=127 class="form-control w-auto d-inline" size="3">
            </div>
            <div class="interactive-rgb-mixer-slider"></div>
          </div>
          <div>
            <div>
                <strong>{% trans 'Green' %}</strong> - {% trans 'Currently set to' %} <input id="interactive-rgb-mixer-green-value" value=127 class="form-control w-auto d-inline" size="3">
            </div>
            <div class="interactive-rgb-mixer-slider"></div>
          </div>
          <div>
            <div>
                <strong>{% trans 'Blue' %}</strong> - {% trans 'Currently set to' %} <input id="interactive-rgb-mixer-blue-value" value=127 class="form-control w-auto d-inline" size="3">
            </div>
            <div class="interactive-rgb-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-rgb-mixer-colourCode" value="dec" id="interactive-rgb-mixer-dec-colour-code" checked>
          <label class="form-check-label" for="interactive-rgb-mixer-dec-colour-code">{% trans "Decimal" %}</label>
      </div>
      <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="interactive-rgb-mixer-colourCode" value="hex" id="interactive-rgb-mixer-hex-colour-code">
          <label class="form-check-label" for="interactive-rgb-mixer-hex-colour-code">{% trans "Hexadecimal" %}</label>
      </div>
    </div>
  </div>
{% endblock interactive_html %}

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

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