{% extends "global/Page.html" %}
{% load staticfiles otree %}

{% block title %}
Log-in
{% endblock %}

{% block content %}


<p> Bevor es losgeht, generieren wir zunächst für Sie einen individuellen Code. Diesen Code benötigen Sie für die Teilnahme am nächsten
    Termin dieses Experiments. Sollten Sie den Code am nächsten Termin nicht mehr wissen, können Sie leider nicht weiter
    teilnehmen. Beachten Sie die Anweisungen zur Erstellung des Codes daher bitte sorgfältig.</p>

<p>
    <b>1. Stelle:</b> Geben Sie als erste Stelle Ihres Codes bitte den <b>letzten Buchstaben Ihres ersten Vornamens</b> ein.<br />
    <b>2. Stelle:</b> Geben Sie als zweite Stelle Ihres Codes bitte den <b>ersten Buchstaben Ihres Nachnamens</b> ein.<br />
    <b>3. Stelle:</b> Geben Sie als dritte Stelle Ihres Codes bitte die <b>letzte Ziffer Ihrer Handynummer</b> ein.<br />
    <b>4. und 5. Stelle:</b> Geben Sie als vierte und fünfte Stelle Ihres Codes bitte den <b>Tag Ihres Geburtsdatums</b> ein.<br />
</p>
<br />
<b><label for="Code">Ihr Code lautet:</label></b>
    <input type="text" name="Code" id="Code" pattern="([A-Za-z]{2})+([0-9]{3})" maxlength = "5" minlength = "5"
           required class="form-control" onkeyup="this.value = this.value.toUpperCase();"/>

    {{ form.Code.errors }}
<br />

<br><b>Beispiel: </b><br />
    Ma<b>x</b> <b>M</b>ustermann hat folgende Handynummer: 017012345678<b>9</b>. Er hat am <b>01</b>.01.2000 Geburtstag.<br />
    Sein Code wäre: <b> XM901 </b>
</p>
<br />
    {% next_button %}
{% endblock %}

{% block app_styles %}
<style>
    .input-group, input.form-control, select.form-control, textarea.form-control {
        width: 5em;
        max-width: 400px;
        height: 80px;
        font-size : 50px;
        letter-spacing: .5ch;
    }
    input:focus {
    outline: none;
    color: dodgerblue;
}
</style>
{% endblock %}