uccser/cs-field-guide

{% extends interactive_mode_template %}

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

{% block interactive_html %}
  <div class="row justify-content-center uninteractive" id="binary-mode-calculator">
    <div class="col col-12 col-md-5 calculator pt-1">
      <div class="text-left font-weight-bold small mb-2">
        {% trans "Calculator" %}
      </div>

      <div class="d-flex">
        <div class="calculator-input">168 &divide; 5</div>
      </div>

      <div class="text-right">
        <small>
          {% trans "Malformed expression" %}
        </small>
      </div>

      <form>
        <div class="form-group row mb-1">
          <label for="caluclator-mode" class="col-sm-2 col-form-label col-form-label-sm">{% trans "Mode: " %}</label>
          <div class="col-sm-10">
            <select class="form-control form-control-sm mode-dropdown">
              <option selected>{% trans "Binary" %}</option>
            </select>
          </div>
        </div>
      </form>

      <div class="d-flex">
        <button type="button" class="btn btn-primary">7</button>
        <button type="button" class="btn btn-primary">8</button>
        <button type="button" class="btn btn-primary">9</button>
        <button type="button" class="btn btn-primary">&divide;</button>
      </div>

      <div class="d-flex">
        <button type="button" class="btn btn-primary">4</button>
        <button type="button" class="btn btn-primary">5</button>
        <button type="button" class="btn btn-primary">6</button>
        <button type="button" class="btn btn-primary">&times;</button>
      </div>

      <div class="d-flex">
        <button type="button" class="btn btn-primary">1</button>
        <button type="button" class="btn btn-primary">2</button>
        <button type="button" class="btn btn-primary">3</button>
        <button type="button" class="btn btn-primary">+</button>
      </div>

      <div class="d-flex">
        <button type="button" class="btn btn-primary">.</button>
        <button type="button" class="btn btn-primary">0</button>
        <button type="button" class="btn btn-primary">=</button>
        <button type="button" class="btn btn-primary">-</button>
      </div>
    </div>
  </div>
{% endblock interactive_html %}

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