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
81 lines
3.9 KiB
HTML
81 lines
3.9 KiB
HTML
{% if session_id and current_page and current_page >= 2 %}
|
|
<nav class="progress-navigation" aria-label="Bewerbungsfortschritt">
|
|
<ol class="progress-steps">
|
|
<!-- Step 1: Email -->
|
|
<li class="progress-step {% if current_page == 1 %}active{% elif current_page > 1 %}completed{% else %}disabled{% endif %}">
|
|
{% if current_page >= 1 %}
|
|
<a href="{{ url_for('page1_email') }}" class="progress-link">
|
|
<span class="progress-icon">{% if current_page > 1 %}✓{% else %}1{% endif %}</span>
|
|
<span class="progress-label">E-Mail</span>
|
|
</a>
|
|
{% else %}
|
|
<span class="progress-link">
|
|
<span class="progress-icon">1</span>
|
|
<span class="progress-label">E-Mail</span>
|
|
</span>
|
|
{% endif %}
|
|
</li>
|
|
|
|
<!-- Step 2: Personal Info -->
|
|
<li class="progress-step {% if current_page == 2 %}active{% elif current_page > 2 %}completed{% else %}disabled{% endif %}">
|
|
{% if current_page >= 2 %}
|
|
<a href="{{ url_for('page2_personal', session_id=session_id) }}" class="progress-link">
|
|
<span class="progress-icon">{% if current_page > 2 %}✓{% else %}2{% endif %}</span>
|
|
<span class="progress-label">Daten</span>
|
|
</a>
|
|
{% else %}
|
|
<span class="progress-link">
|
|
<span class="progress-icon">2</span>
|
|
<span class="progress-label">Daten</span>
|
|
</span>
|
|
{% endif %}
|
|
</li>
|
|
|
|
<!-- Step 3: Motivation -->
|
|
<li class="progress-step {% if current_page == 3 %}active{% elif current_page > 3 %}completed{% else %}disabled{% endif %}">
|
|
{% if current_page >= 3 %}
|
|
<a href="{{ url_for('page3_motivation', session_id=session_id) }}" class="progress-link">
|
|
<span class="progress-icon">{% if current_page > 3 %}✓{% else %}3{% endif %}</span>
|
|
<span class="progress-label">Motivation</span>
|
|
</a>
|
|
{% else %}
|
|
<span class="progress-link">
|
|
<span class="progress-icon">3</span>
|
|
<span class="progress-label">Motivation</span>
|
|
</span>
|
|
{% endif %}
|
|
</li>
|
|
|
|
<!-- Step 4: Upload -->
|
|
<li class="progress-step {% if current_page == 4 %}active{% elif current_page > 4 %}completed{% else %}disabled{% endif %}">
|
|
{% if current_page >= 4 %}
|
|
<a href="{{ url_for('page4_upload', session_id=session_id) }}" class="progress-link">
|
|
<span class="progress-icon">{% if current_page > 4 %}✓{% else %}4{% endif %}</span>
|
|
<span class="progress-label">Dokumente</span>
|
|
</a>
|
|
{% else %}
|
|
<span class="progress-link">
|
|
<span class="progress-icon">4</span>
|
|
<span class="progress-label">Dokumente</span>
|
|
</span>
|
|
{% endif %}
|
|
</li>
|
|
|
|
<!-- Step 5: Confirmation -->
|
|
<li class="progress-step {% if current_page == 5 %}active{% elif current_page > 5 %}completed{% else %}disabled{% endif %}">
|
|
{% if current_page >= 5 %}
|
|
<a href="{{ url_for('page5_confirmation', session_id=session_id) }}" class="progress-link">
|
|
<span class="progress-icon">{% if current_page > 5 %}✓{% else %}5{% endif %}</span>
|
|
<span class="progress-label">Bestätigung</span>
|
|
</a>
|
|
{% else %}
|
|
<span class="progress-link">
|
|
<span class="progress-icon">5</span>
|
|
<span class="progress-label">Bestätigung</span>
|
|
</span>
|
|
{% endif %}
|
|
</li>
|
|
</ol>
|
|
</nav>
|
|
{% endif %}
|