EP/myep
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement screendesign

Browse Source
This commit is contained in:
Björn Fromme
2026-03-16 11:59:12 +01:00
parent 39e6cc4d68
commit 4a2d1f4a02
84 changed files with 2807 additions and 2603 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/booking/create/authenticate.html.twig
+80 -82
View File
@@ -1,98 +1,96 @@
{% extends 'layout.html.twig' %}
{% block content %}
{% include '_partials/_flashes.html.twig' %}
<div class="px-4 lg:px-8 py-8 lg:py-16">
<h1 class="mb-4">
Neue Buchung
</h1>
{% include '_partials/_flashes.html.twig' %}
<div class="bg-blue-50 border border-blue-200 rounded-lg p-6 mb-6">
<h2 class="text-blue-900 font-semibold text-lg mb-3">
Optional: Anmelden für schnelleres Buchen
</h2>
<p class="text-blue-800 mb-2">
Melde dich an, um deine persönlichen Daten automatisch in die Buchung zu übernehmen.
Dies ist <strong>vollständig optional</strong> – du kannst auch ohne Anmeldung als Gast fortfahren.
</p>
</div>
<h1 class="text-white uppercase pb-4 mb-8 border-b border-primary-bg/40">
Neue<br>Buchung
</h1>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
{# Login Form #}
<div>
<h3 class="mb-4 font-semibold text-lg">
Mit bestehendem Account anmelden
</h3>
{% if error %}
{% include '_partials/_alert.html.twig' with { 'level': 'error', messages: [ error.messageKey|trans(error.messageData, 'security') ] } %}
{% endif %}
<form action="{{ path('app_login') }}" method="post" {{ stimulus_action('loading', 'toggle') }}>
<div class="mb-4">
<label for="username" class="mb-1 font-semibold">
E-Mail:
</label>
<input type="email"
id="username"
name="_username"
value="{{ last_username }}"
class="form-field"
required
autocomplete="username">
</div>
<div class="mb-4">
<label for="password" class="mb-1 font-semibold">
Passwort:
</label>
<input type="password"
id="password"
name="_password"
class="form-field"
required
autocomplete="current-password">
</div>
<div class="flex flex-col space-y-2">
<button type="submit" class="button bg-button">
Anmelden und fortfahren
</button>
<a href="{{ path('app_reset_password') }}"
class="text-sm text-center text-blue-600 hover:underline">
Passwort vergessen?
</a>
</div>
<input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
</form>
<div class="text-white uppercase pb-4 ld:pb-8">
{{ travel_title }}
<br>
{{ travel_date_from | date('d.m.Y') }} - {{ travel_date_to | date('d.m.Y') }}
</div>
{# Continue as Guest #}
<div>
<h3 class="mb-4 font-semibold text-lg">
Als Gast fortfahren
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<a href="{{ path('app_booking_create_step_1') }}" class="button button--secondary mb-4">
Als Gast fortfahren
</a>
<p class="mb-4 text-gray-700">
Du kannst auch ohne Anmeldung buchen. Deine persönlichen Daten gibst du dann im nächsten Schritt ein.
</p>
<a href="{{ path('app_booking_create_step_1') }}" class="button bg-button bg-button--secondary w-full block text-center">
Als Gast fortfahren
</a>
<div class="mt-6 p-4 bg-gray-50 border border-gray-200 rounded">
<h4 class="font-semibold mb-2 text-sm">
<h2 class="text-base text-white">
Noch kein Account?
</h4>
<p class="text-sm text-gray-700">
</h2>
<p class="text-white">
Nach Abschluss deiner Buchung wird automatisch ein Account für dich erstellt.
Du erhältst dann Zugangsdaten per E-Mail und kannst deine Buchungen jederzeit verwalten.
</p>
</div>
</div>
</div>
<div>
<h2 class="text-base text-white">
Mit bestehendem Account anmelden
</h2>
{% include 'booking/_cancel_link.html.twig' %}
{% if error %}
{% include '_partials/_alert.html.twig' with { 'level': 'error', messages: [ error.messageKey|trans(error.messageData, 'security') ] } %}
{% endif %}
<div class="pb-4">
<form action="{{ path('app_login') }}" method="post" {{ stimulus_action('loading', 'toggle') }}>
<div class="mb-4">
<label for="username" class="mb-1 font-semibold text-white">
E-Mail:
</label>
<input type="email"
id="username"
name="_username"
value="{{ last_username }}"
class="form-field"
required
autocomplete="username">
</div>
<div class="mb-4">
<label for="password" class="mb-1 font-semibold text-white">
Passwort:
</label>
<input type="password"
id="password"
name="_password"
class="form-field"
required
autocomplete="current-password">
</div>
<button type="submit" class="button button--primary">
Anmelden und fortfahren
</button>
<input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
</form>
</div>
<a href="{{ path('app_reset_password') }}"
class="text-sm underline text-white">
Passwort vergessen?
</a>
</div>
</div>
</div>
{% endblock %}
{% block footer %}
<div class="shrink-0 bg-primary-dark px-4 lg:px-8 py-2 lg:py-4">
<button type="button"
hx-get="{{ path('app_booking_cancel') }}"
hx-target="body"
hx-swap="beforeend"
class="inline-flex items-center justify-center bg-gray-200 rounded-md w-10 h-10">
<svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
</button>
</div>
{% endblock %}