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

{% block title %}
Sozialpsychologie Heidelberg
{% endblock %}

{% block content %}
<div class="outerHeadDiv">

    <!-- Hier muss der Titel für die Seite rein (der dann groß und rot angezeigt wird) -->
    <span class="innerHeadDivText new-title">
        Generelle Angaben
    </span>

    <div class="innerHeadDivLogo">
        <img src="{% static 'Simpson/unihei_color.jpg' %}" class="logo"/>
    </div>

</div>
<hr>

<p>
Bevor Sie mit dem eigentlichen Experiment starten, möchten wir Sie bitten, einige
generelle Fragen zu beantworen. Wie bereits erwähnt, werden alle Personenbezogenen
Daten getrennt von ...
</p>
<br>

<!-- Individueller Code generieren. Hier muss ich mit CSS das bisschen anpassen, damit das
ordentlicher aussieht. Die anderen Formfelder werden wieder mit der otree-Methode abgerufen. -->
<h5>Individueller Code</h5>

<p>Zuerst möchten wir Sie bitten, einen persönlichen Code zu generieren, der zum Einen
Ihre Daten <b>anonymisiert</b> und sie zum Anderen <b>auswertbar</b> macht.</p>

<!-- ------------Anfang: Code-Generationsfelder--------------
Hier muss noch viel angepasst werden! -->
<div style = "position:relative; width:100%; height:200px;">

<div class="form-group required", style="position:absolute;
                                         top:10px;
                                         left:0">
            <label class="col-form-label" for="id_codeFirst">Der erste Buchstabe Ihres Vornamens:</label>
            <div class="controls  field-codeFirst">
                <input type="text" name="codeFirst"
 maxlength="10000" required id="id_codeFirst" class="form-control">
            </div>
</div>
<div class="form-group required", style="position:absolute;
                                         top:10px;
                                         right:0;">
            <label class="col-form-label" for="id_codeSecond">Ihr Geburtstag:</label>
            <div class="controls  field-codeSecond">
                <input type="text" name="codeSecond"
 maxlength="10000" required id="id_codeSecond" class="form-control">
            </div>
</div>

</div>
<!-- --------------Ende: Code-Generationsfelder------------- -->

<br>

{% formfields %}

<br>

<button class="otree-btn-next btn btn-primary">Weiter</button>

<hr>
<p> <a href="mailto: lob@stud.uni-heidelberg.de" target="_blank" style="color:#D11222">Aaron Lob</a>, Universität Heidelberg  - 2020</p>

{% endblock %}