gurix
ef5ccc18f7
- Created _navigation.html component with 5-step progress indicator - Added German labels (E-Mail, Persönliche Daten, Motivation, Dokumente, Bestätigung) - Implemented can_access_page() validation in routes.py - Users can navigate backward to completed pages (data preserved) - Sequential forward progression enforced (cannot skip ahead) - Visual states: completed (green checkmark), current (blue), future (gray) - Added comprehensive CSS styling with responsive design - Updated base.html to include navigation component - Updated page templates to pass current_page context - Navigation appears on pages 2-5 only - All 102 tests passing with no regressions
135 lines
4.1 KiB
HTML
135 lines
4.1 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Bewerbung - Daten{% endblock %}
|
|
|
|
{% block header %}Bewerbung: {{ job_name }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="page-intro">
|
|
<h2>Schritt 1 von 3: Daten</h2>
|
|
<p>Bitte geben Sie Ihre persönlichen Informationen ein. Alle Felder mit * sind Pflichtfelder.</p>
|
|
</div>
|
|
|
|
<form method="POST" action="{{ url_for('submit_personal', session_id=session_id) }}" class="application-form">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
|
|
|
|
<div class="form-section">
|
|
<h3>Persönliche Informationen</h3>
|
|
|
|
<div class="form-group">
|
|
<label for="name">Nachname *</label>
|
|
<input
|
|
type="text"
|
|
id="name"
|
|
name="name"
|
|
required
|
|
maxlength="255"
|
|
value="{{ data.name or '' }}"
|
|
aria-required="true">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="firstname">Vorname *</label>
|
|
<input
|
|
type="text"
|
|
id="firstname"
|
|
name="firstname"
|
|
required
|
|
maxlength="255"
|
|
value="{{ data.firstname or '' }}"
|
|
aria-required="true">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="address">Adresse *</label>
|
|
<input
|
|
type="text"
|
|
id="address"
|
|
name="address"
|
|
required
|
|
maxlength="255"
|
|
value="{{ data.address or '' }}"
|
|
placeholder="Straße und Hausnummer"
|
|
aria-required="true">
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="zip_code">PLZ *</label>
|
|
<input
|
|
type="text"
|
|
id="zip_code"
|
|
name="zip_code"
|
|
required
|
|
maxlength="10"
|
|
value="{{ data.zip_code or '' }}"
|
|
pattern="[0-9]{1,10}"
|
|
aria-required="true">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="city">Stadt *</label>
|
|
<input
|
|
type="text"
|
|
id="city"
|
|
name="city"
|
|
required
|
|
maxlength="255"
|
|
value="{{ data.city or '' }}"
|
|
aria-required="true">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="phone">Telefonnummer *</label>
|
|
<input
|
|
type="tel"
|
|
id="phone"
|
|
name="phone"
|
|
required
|
|
value="{{ data.phone or '' }}"
|
|
placeholder="+41 79 123 45 67"
|
|
pattern="\+\d{1,3}[\s\d]{1,20}"
|
|
aria-required="true">
|
|
<small>Bitte im internationalen Format eingeben (z.B. +41 79 123 45 67)</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-section">
|
|
<h3>Zusätzliche Informationen</h3>
|
|
|
|
<div class="form-group">
|
|
<label for="birth_year">Geburtsjahr *</label>
|
|
<input
|
|
type="text"
|
|
id="birth_year"
|
|
name="birth_year"
|
|
required
|
|
maxlength="4"
|
|
value="{{ data.birth_year or '' }}"
|
|
placeholder="1990"
|
|
pattern="[0-9]{4}"
|
|
aria-required="true">
|
|
<small>Bitte vierstellig eingeben (z.B. 1990)</small>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="civil_status">Zivilstand</label>
|
|
<input
|
|
type="text"
|
|
id="civil_status"
|
|
name="civil_status"
|
|
maxlength="255"
|
|
value="{{ data.civil_status or '' }}"
|
|
placeholder="Optional">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<button type="submit" class="btn btn-primary">Weiter zu Schritt 2</button>
|
|
</div>
|
|
|
|
<p class="required-note">* Pflichtfelder</p>
|
|
</form>
|
|
{% endblock %}
|