174 lines
9.8 KiB
PHP
174 lines
9.8 KiB
PHP
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>{{ $event->title }} - Veranstaltungs-App</title>
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f9f9f9; color: #1a1a2e; }
|
||
main { max-width: 900px; margin: 0 auto; padding: 40px 20px; }
|
||
|
||
.back-link { display: inline-flex; align-items: center; gap: 6px; color: #667eea; text-decoration: none; font-size: 0.875em; font-weight: 600; margin-bottom: 24px; transition: gap 0.2s; }
|
||
.back-link:hover { gap: 10px; }
|
||
|
||
.detail-card { background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.08); border: 1px solid #eee; }
|
||
|
||
.detail-stripe { height: 6px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
|
||
|
||
.detail-content { padding: 40px; }
|
||
|
||
.meta-top { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
|
||
.category-badge { padding: 4px 12px; border-radius: 20px; font-size: 0.75em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; background: #f0f0ff; color: #4338ca; }
|
||
.source-badge { padding: 4px 12px; border-radius: 20px; font-size: 0.75em; font-weight: 600; background: #f0fdf4; color: #15803d; }
|
||
|
||
h1 { font-size: 2.2em; font-weight: 800; line-height: 1.2; margin-bottom: 32px; color: #1a1a2e; }
|
||
|
||
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 36px; padding-bottom: 36px; border-bottom: 1px solid #f3f4f6; }
|
||
.info-box { background: #f9f9f9; border-radius: 10px; padding: 16px 20px; display: flex; gap: 14px; align-items: flex-start; }
|
||
.info-icon { font-size: 1.5em; line-height: 1; }
|
||
.info-text label { display: block; font-size: 0.72em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #9ca3af; margin-bottom: 4px; }
|
||
.info-text p { font-size: 0.95em; font-weight: 600; color: #1a1a2e; line-height: 1.4; }
|
||
|
||
.section-title { font-size: 1.15em; font-weight: 700; color: #1a1a2e; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 2px solid #667eea; display: inline-block; }
|
||
|
||
.description { color: #4b5563; font-size: 1em; line-height: 1.8; margin-bottom: 40px; }
|
||
|
||
.occurrences { display: flex; flex-direction: column; gap: 10px; margin-bottom: 40px; }
|
||
.occurrence-item { background: #f9f9f9; border-left: 3px solid #667eea; border-radius: 0 8px 8px 0; padding: 14px 20px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
|
||
.occurrence-date { font-weight: 700; font-size: 0.95em; }
|
||
.occurrence-time { color: #6b7280; font-size: 0.85em; margin-top: 2px; }
|
||
.occurrence-status { font-size: 0.75em; font-weight: 700; background: #ecfdf5; color: #15803d; padding: 3px 10px; border-radius: 20px; white-space: nowrap; }
|
||
|
||
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 40px; }
|
||
.contact-item { background: #f9f9f9; border-radius: 10px; padding: 16px 20px; }
|
||
.contact-item label { display: block; font-size: 0.72em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #9ca3af; margin-bottom: 6px; }
|
||
.contact-item a, .contact-item span { font-size: 0.9em; color: #667eea; font-weight: 600; text-decoration: none; }
|
||
.contact-item a:hover { text-decoration: underline; }
|
||
|
||
.action-buttons { display: flex; gap: 12px; margin-top: 40px; flex-wrap: wrap; }
|
||
.btn-primary { padding: 12px 28px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 8px; text-decoration: none; font-weight: 700; font-size: 0.9em; transition: opacity 0.2s; }
|
||
.btn-primary:hover { opacity: 0.9; }
|
||
.btn-secondary { padding: 12px 28px; background: #f3f4f6; color: #374151; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 0.9em; transition: background 0.2s; }
|
||
.btn-secondary:hover { background: #e5e7eb; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
@include('partials.header')
|
||
|
||
<main>
|
||
<a href="{{ route('events') }}" class="back-link">← Zurück zur Übersicht</a>
|
||
|
||
<div class="detail-card">
|
||
<div class="detail-stripe"></div>
|
||
<div class="detail-content">
|
||
|
||
<div class="meta-top">
|
||
@if($event->category)
|
||
<span class="category-badge">{{ $event->category }}</span>
|
||
@endif
|
||
@if($event->source)
|
||
<span class="source-badge">Quelle: {{ $event->source->name }}</span>
|
||
@endif
|
||
</div>
|
||
|
||
<h1>{{ $event->title }}</h1>
|
||
|
||
<div class="info-grid">
|
||
@if($event->occurrences->count() > 0)
|
||
@php $first = $event->occurrences->first(); @endphp
|
||
<div class="info-box">
|
||
<span class="info-icon">📅</span>
|
||
<div class="info-text">
|
||
<label>Nächster Termin</label>
|
||
<p>{{ $first->start_datetime->format('d. F Y') }}</p>
|
||
</div>
|
||
</div>
|
||
<div class="info-box">
|
||
<span class="info-icon">⏰</span>
|
||
<div class="info-text">
|
||
<label>Uhrzeit</label>
|
||
<p>{{ $first->start_datetime->format('H:i') }}{{ $first->end_datetime ? ' – ' . $first->end_datetime->format('H:i') : '' }} Uhr</p>
|
||
</div>
|
||
</div>
|
||
@endif
|
||
@if($event->location)
|
||
<div class="info-box">
|
||
<span class="info-icon">📍</span>
|
||
<div class="info-text">
|
||
<label>Ort</label>
|
||
<p>{{ $event->location->name }}, {{ $event->location->city }}</p>
|
||
</div>
|
||
</div>
|
||
@endif
|
||
</div>
|
||
|
||
@if($event->description)
|
||
<div class="section-title">Beschreibung</div>
|
||
<p class="description">{{ $event->description }}</p>
|
||
@endif
|
||
|
||
@if($event->occurrences->count() > 0)
|
||
<div class="section-title">Alle Termine ({{ $event->occurrences->count() }})</div>
|
||
<div class="occurrences">
|
||
@foreach($event->occurrences as $occ)
|
||
<div class="occurrence-item">
|
||
<div>
|
||
<div class="occurrence-date">{{ $occ->start_datetime->format('d. F Y') }}</div>
|
||
<div class="occurrence-time">{{ $occ->start_datetime->format('H:i') }}{{ $occ->end_datetime ? ' – ' . $occ->end_datetime->format('H:i') : '' }} Uhr</div>
|
||
</div>
|
||
@php
|
||
$statusLabels = [
|
||
'scheduled' => 'Geplant',
|
||
'cancelled' => 'Abgesagt',
|
||
'postponed' => 'Verschoben',
|
||
'sold_out' => 'Ausverkauft',
|
||
'completed' => 'Abgeschlossen',
|
||
];
|
||
$statusLabel = $statusLabels[$occ->status] ?? ucfirst($occ->status);
|
||
@endphp
|
||
<span class="occurrence-status">{{ $statusLabel }}</span>
|
||
</div>
|
||
@endforeach
|
||
</div>
|
||
@endif
|
||
|
||
@if($event->contact_email || $event->contact_phone || $event->website_url)
|
||
<div class="section-title">Kontakt & Links</div>
|
||
<div class="contact-grid">
|
||
@if($event->contact_email)
|
||
<div class="contact-item">
|
||
<label>✉️ E-Mail</label>
|
||
<a href="mailto:{{ $event->contact_email }}">{{ $event->contact_email }}</a>
|
||
</div>
|
||
@endif
|
||
@if($event->contact_phone)
|
||
<div class="contact-item">
|
||
<label>📞 Telefon</label>
|
||
<a href="tel:{{ $event->contact_phone }}">{{ $event->contact_phone }}</a>
|
||
</div>
|
||
@endif
|
||
@if($event->website_url)
|
||
<div class="contact-item">
|
||
<label>🌐 Website</label>
|
||
<a href="{{ $event->website_url }}" target="_blank" rel="noopener">Zur Website →</a>
|
||
</div>
|
||
@endif
|
||
</div>
|
||
@endif
|
||
|
||
<div class="action-buttons">
|
||
@if($event->website_url)
|
||
<a href="{{ $event->website_url }}" class="btn-primary" target="_blank">🎫 Tickets / Mehr Info</a>
|
||
@endif
|
||
<a href="{{ route('events') }}" class="btn-secondary">← Alle Veranstaltungen</a>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
@include('partials.footer')
|
||
</body>
|
||
</html>
|