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

feat: refresh frontend visual design

Browse Source
This commit is contained in:
bisco
2026-05-05 10:26:03 +02:00
parent c3a345d60b
commit 3957987b07
8 changed files with 760 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -68,6 +68,17 @@ type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error'
<p>Check-in URL: <a [href]="confirmation()!.qr_code_url">{{ confirmation()!.qr_code_url }}</a></p>
</div>
}
<div class="next-steps">
<div>
<p class="step-label">What to do next</p>
<p>Keep the QR code on your phone or print it. Staff can scan it directly at the entrance.</p>
</div>
<div>
<p class="step-label">Need the link later?</p>
<p>Save the confirmation email so you can reopen the check-in page if the QR needs to be shown again.</p>
</div>
</div>
}
@if (state() === 'invalid') {
@@ -115,37 +126,17 @@ type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error'
</section>
`,
styles: [`
.page {
max-width: 760px;
margin: 0 auto;
}
.page-header {
margin-bottom: 24px;
}
.eyebrow {
margin: 0 0 10px;
color: var(--azionelab-accent);
text-transform: uppercase;
font-size: 0.78rem;
font-weight: 700;
}
h1 {
margin: 0;
font-size: clamp(2rem, 4vw, 3rem);
}
.supporting {
color: var(--azionelab-muted);
line-height: 1.6;
max-width: 58ch;
margin: 14px 0 0;
}
.status-card {
border-radius: 20px;
border-radius: var(--azionelab-radius-lg);
border: 1px solid var(--azionelab-border);
background: var(--azionelab-surface-strong);
box-shadow: var(--azionelab-shadow);
@@ -172,7 +163,6 @@ type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error'
.status-panel h2 {
margin: 0 0 6px;
font-size: 1.2rem;
}
.status-panel p {
@@ -262,7 +252,7 @@ type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error'
.qr-panel {
margin-top: 18px;
padding: 16px;
border-radius: 18px;
border-radius: var(--azionelab-radius-md);
border: 1px solid var(--azionelab-border);
display: inline-block;
background: white;
@@ -289,7 +279,7 @@ type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error'
gap: 10px;
margin-top: 16px;
padding: 14px 16px;
border-radius: 16px;
border-radius: var(--azionelab-radius-md);
background: rgba(159, 47, 40, 0.05);
color: var(--azionelab-muted);
}
@@ -303,6 +293,35 @@ type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error'
color: var(--azionelab-accent-strong);
}
.next-steps {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin-top: 18px;
}
.next-steps > div {
padding: 16px;
border-radius: var(--azionelab-radius-md);
background: rgba(34, 28, 24, 0.035);
border: 1px solid var(--azionelab-border);
}
.step-label {
margin: 0 0 6px !important;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--azionelab-accent);
}
.next-steps p {
margin: 0;
line-height: 1.55;
color: var(--azionelab-muted);
}
@media (max-width: 640px) {
mat-card-content {
padding: 22px !important;
@@ -325,6 +344,10 @@ type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error'
width: min(100%, 280px);
margin: 0 auto;
}
.next-steps {
grid-template-columns: 1fr;
}
}
`],
changeDetection: ChangeDetectionStrategy.OnPush,