bisco/azionelab
1
0
Fork 0
generated from bisco/codex-bootstrap
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: redesign public reservation flow pages

Browse Source
This commit is contained in:
bisco
2026-05-05 16:38:53 +02:00
parent 0c465b53cd
commit 5e843d0810
3 changed files with 152 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
frontend/src/app/pages/reservation-confirm-page.component.ts
View File

@@ -22,10 +22,11 @@ type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error'
],
template: `
<section class="page">
<div class="confirmation-shell">
<header class="page-header">
<p class="eyebrow">Conferma prenotazione</p>
<h1>Ci siamo quasi</h1>
<p class="supporting">Stai completando l'ultimo passaggio: appena la conferma va a buon fine, il tuo QR code sara' pronto per accompagnarti all'ingresso.</p>
<h1>Prenotazione confermata</h1>
<p class="supporting">Quando la conferma va a buon fine, il tuo QR code e' pronto per accompagnarti all'ingresso in sala.</p>
</header>
<mat-card class="status-card">
@@ -71,12 +72,12 @@ type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error'
<div class="next-steps">
<div>
<p class="step-label">Cosa fare adesso</p>
<p class="step-label">Portalo con te</p>
<p>Conserva il QR code sul telefono oppure stampalo. All'ingresso bastera' mostrarlo allo staff.</p>
</div>
<div>
<p class="step-label">Ti serve di nuovo il link?</p>
<p>Tieni l'email di conferma: potrai riaprire questa pagina in qualsiasi momento se vorrai recuperare il QR.</p>
<p class="step-label">Tieni l'email a portata di mano</p>
<p>Se ne avrai bisogno, potrai riaprire questa pagina in qualsiasi momento dal messaggio di conferma.</p>
</div>
</div>
}
@@ -119,20 +120,31 @@ type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error'
</mat-card-content>
<mat-card-actions>
<a mat-button routerLink="/">Inizio</a>
<a mat-button routerLink="/shows">Spettacoli</a>
<a mat-button routerLink="/shows">Torna agli spettacoli</a>
</mat-card-actions>
</mat-card>
</div>
</section>
`,
styles: [`
.confirmation-shell {
width: min(100%, 700px);
margin: 0 auto;
}
.page-header {
margin-bottom: 24px;
margin-bottom: 28px;
text-align: center;
}
h1 {
margin: 0;
font-size: 3rem;
}
.supporting {
max-width: 58ch;
margin: 14px 0 0;
max-width: 40ch;
margin: 16px auto 0;
}
.status-card {
@@ -148,15 +160,17 @@ type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error'
}
mat-card-actions {
padding: 0 28px 24px !important;
gap: 8px;
padding: 0 28px 28px !important;
justify-content: center;
}
.status-panel {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 20px;
flex-direction: column;
align-items: center;
text-align: center;
gap: 18px;
padding: 24px;
border-radius: 18px;
border: 1px solid transparent;
}
@@ -227,6 +241,7 @@ type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error'
.success-points {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
margin-top: 14px;
@@ -250,12 +265,14 @@ type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error'
}
.qr-panel {
margin-top: 18px;
padding: 16px;
display: grid;
justify-items: center;
margin: 22px auto 0;
padding: 22px;
border-radius: var(--azionelab-radius-md);
border: 1px solid var(--azionelab-border);
display: inline-block;
background: white;
background: #ffffff;
width: min(100%, 360px);
}
.panel-label {
@@ -277,10 +294,10 @@ type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error'
display: flex;
align-items: flex-start;
gap: 10px;
margin-top: 16px;
margin-top: 18px;
padding: 14px 16px;
border-radius: var(--azionelab-radius-md);
background: rgba(159, 47, 40, 0.05);
background: var(--azionelab-bg-strong);
color: var(--azionelab-muted);
}
@@ -296,8 +313,8 @@ type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error'
.next-steps {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin-top: 18px;
gap: 16px;
margin-top: 22px;
}
.next-steps > div {
@@ -323,6 +340,10 @@ type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error'
}
@media (max-width: 640px) {
h1 {
font-size: 2.3rem;
}
mat-card-content {
padding: 22px !important;
}