generated from bisco/codex-bootstrap
feat: refresh frontend visual design
This commit is contained in:
@@ -36,8 +36,21 @@ type ApiValidationErrors = Record<string, string[]>;
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<mat-card class="content-card">
|
||||
<mat-card-content>
|
||||
<div class="booking-grid">
|
||||
<mat-card class="summary-card">
|
||||
<mat-card-content>
|
||||
<p class="summary-label">Before you submit</p>
|
||||
<h2>Reservations are activated only after email confirmation.</h2>
|
||||
<ul class="summary-list">
|
||||
<li>Your confirmation link arrives at the email address you provide.</li>
|
||||
<li>Seat availability is checked on the server before confirmation.</li>
|
||||
<li>The QR code is generated only after the reservation becomes confirmed.</li>
|
||||
</ul>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
<mat-card class="content-card">
|
||||
<mat-card-content>
|
||||
@if (isSuccess()) {
|
||||
<div class="status-panel success" aria-live="polite">
|
||||
<div class="status-icon">
|
||||
@@ -131,52 +144,69 @@ type ApiValidationErrors = Record<string, string[]>;
|
||||
</div>
|
||||
</form>
|
||||
}
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</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);
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
|
||||
.supporting {
|
||||
color: var(--azionelab-muted);
|
||||
line-height: 1.6;
|
||||
max-width: 56ch;
|
||||
margin: 14px 0 0;
|
||||
}
|
||||
|
||||
.booking-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
|
||||
gap: 20px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.summary-card,
|
||||
.content-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);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.summary-card {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 252, 248, 0.98), rgba(247, 238, 227, 0.94));
|
||||
}
|
||||
|
||||
mat-card-content {
|
||||
padding: 28px !important;
|
||||
}
|
||||
|
||||
.summary-label {
|
||||
margin: 0 0 10px;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--azionelab-accent);
|
||||
}
|
||||
|
||||
.summary-card h2 {
|
||||
margin: 0;
|
||||
max-width: 14ch;
|
||||
}
|
||||
|
||||
.summary-list {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
margin: 18px 0 0;
|
||||
padding-left: 18px;
|
||||
color: var(--azionelab-ink-soft);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.intro-note {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
@@ -317,6 +347,10 @@ type ApiValidationErrors = Record<string, string[]>;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.booking-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
mat-card-content {
|
||||
padding: 22px !important;
|
||||
}
|
||||
|
||||
@@ -68,8 +68,21 @@ type BarcodeDetectorConstructor = new (options?: { formats?: string[] }) => Barc
|
||||
<p class="supporting">Enter a token manually or scan a QR code to preview admission data and confirm entrance.</p>
|
||||
</header>
|
||||
|
||||
<mat-card class="content-card">
|
||||
<mat-card-content>
|
||||
<div class="checkin-grid">
|
||||
<mat-card class="side-card">
|
||||
<mat-card-content>
|
||||
<p class="side-label">Front of house</p>
|
||||
<h2>Designed for quick, low-friction arrivals.</h2>
|
||||
<ul class="side-list">
|
||||
<li>Scan a QR code when a device camera is available.</li>
|
||||
<li>Enter the token manually if scanning is not possible.</li>
|
||||
<li>Confirm admission only after the preview data matches the guest.</li>
|
||||
</ul>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
<mat-card class="content-card">
|
||||
<mat-card-content>
|
||||
<section class="scanner-panel">
|
||||
<div class="scanner-copy">
|
||||
<h2>Camera scan</h2>
|
||||
@@ -175,46 +188,62 @@ type BarcodeDetectorConstructor = new (options?: { formats?: string[] }) => Barc
|
||||
@if (state() === 'error') {
|
||||
<p class="error-message" aria-live="assertive">Something went wrong. Please try again.</p>
|
||||
}
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</section>
|
||||
`,
|
||||
styles: [`
|
||||
.page {
|
||||
max-width: 760px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.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);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.supporting {
|
||||
color: var(--azionelab-muted);
|
||||
line-height: 1.6;
|
||||
max-width: 50ch;
|
||||
}
|
||||
|
||||
.checkin-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
|
||||
gap: 20px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.side-card,
|
||||
.content-card {
|
||||
border-radius: 8px;
|
||||
border-radius: var(--azionelab-radius-lg);
|
||||
border: 1px solid var(--azionelab-border);
|
||||
background: var(--azionelab-surface);
|
||||
background: var(--azionelab-surface-strong);
|
||||
box-shadow: var(--azionelab-shadow);
|
||||
}
|
||||
|
||||
.side-card {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 252, 248, 0.98), rgba(247, 238, 227, 0.94));
|
||||
}
|
||||
|
||||
.side-label {
|
||||
margin: 0 0 10px;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--azionelab-accent);
|
||||
}
|
||||
|
||||
.side-card h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.side-list {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
margin: 18px 0 0;
|
||||
padding-left: 18px;
|
||||
color: var(--azionelab-ink-soft);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.scanner-panel {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
@@ -320,6 +349,12 @@ type BarcodeDetectorConstructor = new (options?: { formats?: string[] }) => Barc
|
||||
color: #b3261e;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.checkin-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
`],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
|
||||
@@ -9,66 +9,103 @@ import { API_BASE_URL } from '../services/api-config.token';
|
||||
standalone: true,
|
||||
imports: [RouterLink, MatButtonModule, MatCardModule],
|
||||
template: `
|
||||
<section class="hero">
|
||||
<section class="hero page">
|
||||
<div class="hero-copy">
|
||||
<p class="eyebrow">AzioneLab Theatre Company</p>
|
||||
<h1>Public website and booking UI foundations.</h1>
|
||||
<h1>Small-stage evenings, thoughtful performances, simple reservations.</h1>
|
||||
<p class="supporting">
|
||||
This Angular shell is wired for the existing Django APIs and ready for the next booking-focused iterations.
|
||||
AzioneLab brings contemporary theatre into intimate venues. This public frontend is shaped around clear show discovery, lightweight booking, and a calm arrival experience at the door.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a mat-flat-button color="primary" routerLink="/shows">Browse shows</a>
|
||||
<a mat-stroked-button routerLink="/check-in">Check-in area</a>
|
||||
<a mat-flat-button color="primary" routerLink="/shows">Browse upcoming shows</a>
|
||||
<a mat-stroked-button routerLink="/check-in">Staff check-in</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-panel">
|
||||
<mat-card>
|
||||
<mat-card-title>Frontend wiring</mat-card-title>
|
||||
<div class="hero-stage" aria-hidden="true">
|
||||
<div class="curtain"></div>
|
||||
<div class="stage-glow"></div>
|
||||
<div class="stage-copy">
|
||||
<span>Tonight at AzioneLab</span>
|
||||
<strong>Doors open 30 minutes before the performance</strong>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="overview page">
|
||||
<div class="section-heading">
|
||||
<div>
|
||||
<p class="eyebrow">At a glance</p>
|
||||
<h2>Built for a small company, not a sprawling ticketing empire</h2>
|
||||
</div>
|
||||
<p class="supporting">The public experience stays simple: browse a show, reserve seats, confirm by email, arrive with a QR code.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-grid">
|
||||
<mat-card class="feature-card">
|
||||
<mat-card-title>Find the right performance</mat-card-title>
|
||||
<mat-card-content>
|
||||
<p><strong>API base URL</strong></p>
|
||||
<code>{{ apiBaseUrl }}</code>
|
||||
<p class="panel-note">Placeholders are in place for public content, booking, and staff check-in flows.</p>
|
||||
<p>Show listings and detail pages keep venue, schedule, and availability visible without noise.</p>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<mat-card class="feature-card">
|
||||
<mat-card-title>Confirm by email</mat-card-title>
|
||||
<mat-card-content>
|
||||
<p>Reservations stay pending until the audience member confirms, which keeps capacity trustworthy and easy to manage.</p>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<mat-card class="feature-card">
|
||||
<mat-card-title>Check in quickly</mat-card-title>
|
||||
<mat-card-content>
|
||||
<p>Front-of-house staff can preview a token, validate it server-side, and record entry in one compact flow.</p>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="journey-grid page">
|
||||
<div class="journey-copy">
|
||||
<p class="eyebrow">Audience journey</p>
|
||||
<h2>From interest to entrance in a few quiet steps</h2>
|
||||
<ol>
|
||||
<li>Browse the public programme and open a show page.</li>
|
||||
<li>Reserve seats for a performance and confirm by email.</li>
|
||||
<li>Keep the QR code ready on your phone or on paper for entry.</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<mat-card class="meta-card">
|
||||
<mat-card-title>Runtime wiring</mat-card-title>
|
||||
<mat-card-content>
|
||||
<p class="meta-label">API base URL</p>
|
||||
<code>{{ apiBaseUrl }}</code>
|
||||
<p class="meta-note">The frontend remains aligned with the existing Django API surface without changing backend contracts.</p>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</section>
|
||||
`,
|
||||
styles: [`
|
||||
.hero {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.9fr);
|
||||
grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.9fr);
|
||||
gap: 28px;
|
||||
align-items: stretch;
|
||||
max-width: 1180px;
|
||||
margin: 0 auto;
|
||||
padding: 12px 0 24px;
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
padding: 36px 0;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 12px;
|
||||
color: var(--azionelab-accent);
|
||||
text-transform: uppercase;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
padding: 34px 0 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
max-width: 10ch;
|
||||
font-size: clamp(2.5rem, 5vw, 4.75rem);
|
||||
line-height: 0.95;
|
||||
max-width: 11ch;
|
||||
font-size: 3.85rem;
|
||||
}
|
||||
|
||||
.supporting {
|
||||
max-width: 52ch;
|
||||
color: var(--azionelab-muted);
|
||||
font-size: 1.08rem;
|
||||
line-height: 1.65;
|
||||
margin: 20px 0 0;
|
||||
font-size: 1.06rem;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
@@ -78,32 +115,189 @@ import { API_BASE_URL } from '../services/api-config.token';
|
||||
margin-top: 28px;
|
||||
}
|
||||
|
||||
.hero-panel mat-card {
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
.hero-stage {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
min-height: 420px;
|
||||
border-radius: var(--azionelab-radius-lg);
|
||||
border: 1px solid rgba(255, 250, 245, 0.16);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(31, 18, 18, 0.1), rgba(27, 18, 14, 0.62)),
|
||||
linear-gradient(135deg, #b04b40 0%, #7f251f 24%, #43261f 56%, #211b1a 100%);
|
||||
box-shadow: var(--azionelab-shadow-strong);
|
||||
}
|
||||
|
||||
.curtain {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0, rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, 0.08) 48%, rgba(255, 255, 255, 0) 74%, rgba(255, 255, 255, 0.08) 100%),
|
||||
repeating-linear-gradient(90deg, rgba(75, 18, 14, 0.2) 0 18px, rgba(160, 60, 52, 0.08) 18px 36px);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.stage-glow {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: -80px;
|
||||
width: 340px;
|
||||
height: 340px;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(245, 214, 150, 0.9) 0, rgba(245, 214, 150, 0.22) 44%, rgba(245, 214, 150, 0) 72%);
|
||||
}
|
||||
|
||||
.stage-copy {
|
||||
position: absolute;
|
||||
left: 24px;
|
||||
right: 24px;
|
||||
bottom: 24px;
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
padding: 18px 20px;
|
||||
border-radius: 18px;
|
||||
background: rgba(24, 17, 15, 0.52);
|
||||
backdrop-filter: blur(8px);
|
||||
color: rgba(255, 247, 239, 0.94);
|
||||
border: 1px solid rgba(255, 247, 239, 0.12);
|
||||
}
|
||||
|
||||
.stage-copy span {
|
||||
text-transform: uppercase;
|
||||
font-size: 0.76rem;
|
||||
letter-spacing: 0.08em;
|
||||
color: rgba(255, 227, 192, 0.84);
|
||||
}
|
||||
|
||||
.stage-copy strong {
|
||||
font-family: var(--azionelab-serif);
|
||||
font-size: 1.4rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.overview,
|
||||
.journey-grid {
|
||||
margin-top: 34px;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
|
||||
gap: 24px;
|
||||
align-items: end;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.section-heading h2,
|
||||
.journey-copy h2 {
|
||||
margin: 0;
|
||||
max-width: 18ch;
|
||||
}
|
||||
|
||||
.feature-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.feature-card,
|
||||
.meta-card {
|
||||
border-radius: var(--azionelab-radius-md);
|
||||
border: 1px solid var(--azionelab-border);
|
||||
background: var(--azionelab-surface);
|
||||
background: linear-gradient(180deg, rgba(255, 253, 250, 0.98), rgba(251, 245, 236, 0.94));
|
||||
box-shadow: var(--azionelab-shadow);
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
min-height: 210px;
|
||||
}
|
||||
|
||||
.feature-card mat-card-title,
|
||||
.meta-card mat-card-title {
|
||||
margin-bottom: 12px;
|
||||
font-family: var(--azionelab-serif);
|
||||
font-size: 1.18rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.feature-card p,
|
||||
.meta-card p {
|
||||
margin: 0;
|
||||
color: var(--azionelab-muted);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.journey-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.9fr);
|
||||
gap: 24px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.journey-copy {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
ol {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
margin: 20px 0 0;
|
||||
padding-left: 22px;
|
||||
color: var(--azionelab-ink-soft);
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.meta-label {
|
||||
margin: 0 0 10px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
color: var(--azionelab-muted);
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
code {
|
||||
display: inline-block;
|
||||
margin-top: 8px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 8px;
|
||||
background: rgba(30, 27, 24, 0.06);
|
||||
border-radius: 12px;
|
||||
background: rgba(34, 28, 24, 0.06);
|
||||
color: var(--azionelab-ink-soft);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.panel-note {
|
||||
margin-top: 20px;
|
||||
color: var(--azionelab-muted);
|
||||
line-height: 1.5;
|
||||
.meta-note {
|
||||
margin: 18px 0 0;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.hero {
|
||||
.hero,
|
||||
.section-heading,
|
||||
.journey-grid,
|
||||
.feature-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
h1 {
|
||||
font-size: 2.25rem;
|
||||
}
|
||||
|
||||
.hero-stage {
|
||||
min-height: 320px;
|
||||
}
|
||||
|
||||
.stage-copy {
|
||||
left: 16px;
|
||||
right: 16px;
|
||||
bottom: 16px;
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
`],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -49,6 +49,10 @@ import { ShowDetail, ShowPerformance, ShowsApiService } from '../services/shows-
|
||||
<p class="eyebrow">Show detail</p>
|
||||
<h1>{{ show()!.title }}</h1>
|
||||
<p class="supporting">{{ show()!.description || show()!.summary }}</p>
|
||||
<div class="hero-note">
|
||||
<span>Published programme</span>
|
||||
<span>Choose a performance below to continue</span>
|
||||
</div>
|
||||
</div>
|
||||
@if (show()!.image_url) {
|
||||
<div class="hero-image-wrap">
|
||||
@@ -116,52 +120,51 @@ import { ShowDetail, ShowPerformance, ShowsApiService } from '../services/shows-
|
||||
</section>
|
||||
`,
|
||||
styles: [`
|
||||
.page {
|
||||
max-width: 1080px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.2fr) minmax(280px, 420px);
|
||||
gap: 24px;
|
||||
gap: 28px;
|
||||
align-items: start;
|
||||
margin-bottom: 28px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.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, 3.2rem);
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.supporting {
|
||||
margin: 14px 0 0;
|
||||
color: var(--azionelab-muted);
|
||||
line-height: 1.6;
|
||||
max-width: 64ch;
|
||||
}
|
||||
|
||||
.hero-note {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.hero-note span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 32px;
|
||||
padding: 0 14px;
|
||||
border-radius: 999px;
|
||||
background: rgba(143, 51, 45, 0.08);
|
||||
color: var(--azionelab-accent-strong);
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.hero-image-wrap {
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
border-radius: var(--azionelab-radius-lg);
|
||||
border: 1px solid var(--azionelab-border);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(207, 71, 51, 0.16), rgba(15, 22, 36, 0.08)),
|
||||
#f8f1ea;
|
||||
box-shadow: var(--azionelab-shadow);
|
||||
aspect-ratio: 4 / 5;
|
||||
box-shadow: var(--azionelab-shadow-strong);
|
||||
aspect-ratio: 4 / 4.8;
|
||||
}
|
||||
|
||||
.hero-image {
|
||||
@@ -185,30 +188,39 @@ import { ShowDetail, ShowPerformance, ShowsApiService } from '../services/shows-
|
||||
|
||||
.section-heading h2 {
|
||||
margin: 0 0 6px;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.section-heading p {
|
||||
margin: 0;
|
||||
color: var(--azionelab-muted);
|
||||
}
|
||||
|
||||
.performance-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 20px;
|
||||
gap: 22px;
|
||||
}
|
||||
|
||||
.performance-card,
|
||||
.status-card {
|
||||
border-radius: 8px;
|
||||
border-radius: var(--azionelab-radius-md);
|
||||
border: 1px solid var(--azionelab-border);
|
||||
background: var(--azionelab-surface);
|
||||
background: linear-gradient(180deg, rgba(255, 253, 249, 0.98), rgba(250, 243, 233, 0.94));
|
||||
box-shadow: var(--azionelab-shadow);
|
||||
}
|
||||
|
||||
.performance-card {
|
||||
min-height: 260px;
|
||||
min-height: 280px;
|
||||
}
|
||||
|
||||
.performance-card mat-card-title,
|
||||
.performance-card mat-card-subtitle,
|
||||
.performance-card mat-card-content,
|
||||
.performance-card mat-card-actions {
|
||||
padding-left: 18px;
|
||||
padding-right: 18px;
|
||||
}
|
||||
|
||||
.performance-card mat-card-title {
|
||||
margin-top: 14px;
|
||||
font-family: var(--azionelab-serif);
|
||||
font-size: 1.28rem;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.performance-meta {
|
||||
|
||||
@@ -19,7 +19,7 @@ import { ShowListItem, ShowsApiService } from '../services/shows-api.service';
|
||||
<h1>Shows</h1>
|
||||
</div>
|
||||
<p class="supporting">
|
||||
Browse current productions published from the AzioneLab backend.
|
||||
Browse current productions, open a show page, and move toward booking without friction.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
@@ -64,6 +64,9 @@ import { ShowListItem, ShowsApiService } from '../services/shows-api.service';
|
||||
<img class="show-image" [src]="show.image_url" [alt]="show.title" />
|
||||
</div>
|
||||
}
|
||||
<div class="card-topline">
|
||||
<span class="card-label">Published show</span>
|
||||
</div>
|
||||
<mat-card-title>{{ show.title }}</mat-card-title>
|
||||
<mat-card-content>
|
||||
<p>{{ show.summary }}</p>
|
||||
@@ -78,42 +81,23 @@ import { ShowListItem, ShowsApiService } from '../services/shows-api.service';
|
||||
</section>
|
||||
`,
|
||||
styles: [`
|
||||
.page {
|
||||
max-width: 1180px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(260px, 380px);
|
||||
grid-template-columns: minmax(0, 1fr) minmax(260px, 410px);
|
||||
gap: 24px;
|
||||
align-items: end;
|
||||
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);
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.supporting {
|
||||
margin: 0;
|
||||
color: var(--azionelab-muted);
|
||||
line-height: 1.6;
|
||||
max-width: 34ch;
|
||||
}
|
||||
|
||||
.show-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
gap: 20px;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 22px;
|
||||
}
|
||||
|
||||
.status-panel,
|
||||
@@ -131,9 +115,9 @@ import { ShowListItem, ShowsApiService } from '../services/shows-api.service';
|
||||
|
||||
.status-card {
|
||||
max-width: 680px;
|
||||
border-radius: 8px;
|
||||
border-radius: var(--azionelab-radius-md);
|
||||
border: 1px solid var(--azionelab-border);
|
||||
background: var(--azionelab-surface);
|
||||
background: var(--azionelab-surface-strong);
|
||||
box-shadow: var(--azionelab-shadow);
|
||||
}
|
||||
|
||||
@@ -155,15 +139,16 @@ import { ShowListItem, ShowsApiService } from '../services/shows-api.service';
|
||||
.show-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 220px;
|
||||
border-radius: 8px;
|
||||
min-height: 360px;
|
||||
overflow: hidden;
|
||||
border-radius: var(--azionelab-radius-md);
|
||||
border: 1px solid var(--azionelab-border);
|
||||
background: var(--azionelab-surface);
|
||||
background: linear-gradient(180deg, rgba(255, 253, 249, 0.98), rgba(250, 243, 233, 0.94));
|
||||
box-shadow: var(--azionelab-shadow);
|
||||
}
|
||||
|
||||
.show-image-wrap {
|
||||
aspect-ratio: 16 / 10;
|
||||
aspect-ratio: 15 / 10;
|
||||
overflow: hidden;
|
||||
border-bottom: 1px solid var(--azionelab-border);
|
||||
background:
|
||||
@@ -176,15 +161,52 @@ import { ShowListItem, ShowsApiService } from '../services/shows-api.service';
|
||||
height: 100%;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
transition: transform 180ms ease;
|
||||
}
|
||||
|
||||
.show-card:hover .show-image {
|
||||
transform: scale(1.03);
|
||||
}
|
||||
|
||||
.card-topline {
|
||||
padding: 18px 18px 0;
|
||||
}
|
||||
|
||||
.card-label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 28px;
|
||||
padding: 0 12px;
|
||||
border-radius: 999px;
|
||||
background: rgba(143, 51, 45, 0.08);
|
||||
color: var(--azionelab-accent-strong);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.show-card mat-card-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.show-card mat-card-title,
|
||||
.show-card mat-card-content,
|
||||
.show-card mat-card-actions {
|
||||
padding-left: 18px;
|
||||
padding-right: 18px;
|
||||
}
|
||||
|
||||
.show-card mat-card-title {
|
||||
margin-top: 10px;
|
||||
font-family: var(--azionelab-serif);
|
||||
font-size: 1.45rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.12;
|
||||
}
|
||||
|
||||
.show-card p {
|
||||
color: var(--azionelab-muted);
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
|
||||
Reference in New Issue
Block a user