um-cseg/chez-betty

{% extends "base.jinja2" %}
{% import "../macro_alerts.jinja2" as alerts %}
{% block title %}Home{% endblock %}

{% block alerts %}
{# Empty this block on this page so that we can render the alerts in a better place #}
{% endblock %}

{% block content %}

<style>
body {
  padding-bottom: 100px;
}
</style>

<div id="index" class="row">
  <div class="col-md-7">


    <div class="row">
      <div class="col-md-12">
        <h1 style="font-size:375%;">
        <img src="/static/chezbetty_1000px.jpg" style="margin-top:5px;width:180px;" />
        Current User Debt: <strong>{{ owed_by_users|format_debt|safe }}</strong>
        </h1>
      </div>
    </div>

    <div class="row">
      <div class="col-md-12">

        {{ alerts.alerts_container(request, nested=True) }}

        <div id="announcements" style="font-size:20pt;">
          {% for announcement in announcements %}
          <div class="alert alert-info" role="alert">
            {{ announcement.announcement }}
          </div>
          {% endfor %}
        </div>

      </div>
    </div>

    <div class="row">
      <div class="col-md-12">

        {% if demo and request.has_permission("admin") %}
        <div id="front-demo" class="buttons">
          <div class="well">
            <h3>Demo Mode:</h3>
            {% for admin in admins %}
            <a class="btn btn-default btn-huge btn-bordered" href="/terminal/{{ admin.umid }}">Login as {{ admin.name }}</a>
            {% endfor %}
          </div>
        </div>
        {% endif %}

      </div>
    </div>

  </div>

  <div class="col-md-5" style="text-align: center;">

    <div id="index-main" style="margin-top:100px;">
      <h2>{{ _('Swipe your M-Card to login') }}</h2>
    </div>

    <hr />
    <div class="or"><span>OR</span></div>

    <div class="center">
      <h2>{{ _('Enter your UMID here') }}</h2>
    </div>

    <link rel="stylesheet" href="{{'chezbetty:static/css/chezbetty-terminal-keypad.css'|static_url}}" />

    <div id="keypad-umid" class="center keypad-lg">
      <container>
        <container id="keypad-umid-status">
          <block class="umid-status-block btn btn-default"></block>
          <block class="umid-status-block btn btn-default"></block>
          <block class="umid-status-block btn btn-default"></block>
          <block class="umid-status-block btn btn-default"></block>
          <block class="umid-status-block btn btn-default"></block>
          <block class="umid-status-block btn btn-default"></block>
          <block class="umid-status-block btn btn-default"></block>
          <block class="umid-status-block btn btn-default"></block>
        </container>
        <block><button type="button" id="btn-keypad-9" class="btn btn-default btn-keypad">9</button></block>
        <block><button type="button" id="btn-keypad-8" class="btn btn-default btn-keypad">8</button></block>
        <block><button type="button" id="btn-keypad-7" class="btn btn-default btn-keypad">7</button></block>
        <block><button type="button" id="btn-keypad-6" class="btn btn-default btn-keypad">6</button></block>
        <block><button type="button" id="btn-keypad-5" class="btn btn-default btn-keypad">5</button></block>
        <block><button type="button" id="btn-keypad-4" class="btn btn-default btn-keypad">4</button></block>
        <block><button type="button" id="btn-keypad-3" class="btn btn-default btn-keypad">3</button></block>
        <block><button type="button" id="btn-keypad-2" class="btn btn-default btn-keypad">2</button></block>
        <block><button type="button" id="btn-keypad-1" class="btn btn-default btn-keypad">1</button></block>
        <block><button type="button" id="btn-keypad-clear" class="btn btn-default btn-keypad">{{ _('Clear') }}</button></block>
        <block><button type="button" id="btn-keypad-del" class="btn btn-default btn-keypad">&laquo;</button></block>
        <block><button type="button" id="btn-keypad-0" class="btn btn-default btn-keypad">0</button></block>
      </container>
    </div>

  </div>


</div>


{# Splash page saying we need people to pay us back. #}
<!--
<div id="splash" class="container">
  <h1>We're glad everyone is using Betty, but we do need to get paid back.</h1>
  <h1>The current user debt is: <strong>{{ owed_by_users|format_debt|safe }}</strong>.</h1>
  <h1>We could use some help getting that repaid.</h1>
  <h1>So please, if you owe Betty money pay back today.</h1>
  <div class="pull-right">
    <br />
    <h4>
      Also, you get a 5% discount if you have at least $20 in your account.
      Users who are more than $5 in debt are taxed on every purchase.
    </h4>
  </div>
  <div class="pull-left">
    <a class="btn btn-deftaul btn-huge btn-bordered" onclick='$("#splash").hide(); $("#index").show(); $("#footer").show();'>Continue to Betty</a>
  </div>
  <div class="clearfix"></div>
</div>
-->


{% endblock %}

{% block footer %}
<div id="footer" class="navbar navbar-fixed-bottom" role="navigation" style="width:50%">
  <div class="container-fluid">
    <hr />
    <p>
      <a class="btn btn-default btn-lg btn-bordered" href="/lang-en">English</a>
      <a class="btn btn-default btn-lg btn-bordered" href="/lang-de">Deutsch</a>
      <a class="btn btn-default btn-lg btn-bordered" href="/lang-fr">français</a>
      <a class="btn btn-default btn-lg btn-bordered" href="/lang-tw">漢語</a>
      <a class="btn btn-default btn-lg btn-bordered" href="/lang-cn">简体中文</a>
      <a class="btn btn-default btn-lg btn-bordered" href="/lang-fa">فارسی</a>
      <a class="btn btn-default btn-lg btn-bordered" href="/lang-ro">Română</a>
      <a class="btn btn-default btn-lg btn-bordered" href="/lang-es">Español</a>
      <a class="btn btn-default btn-lg btn-bordered" href="/lang-ar">العربية</a>
    </p>
    <p>
      <strong>{{ _('Can you help translate Betty?') }} github.com/cseg-michigan/chez-betty</strong>
    </p>
    <hr />
  </div>
</div>
{% endblock %}

{% set timeout = 1000*60*60*4 %}

{% block onload %}
<script>
  if($('#splash').length != 0) {
    $("#index").hide();
    $("#footer").hide();
    $("#splash").show();
  }
</script>
{% endblock %}