127 lines
7.9 KiB
PHP
127 lines
7.9 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Veranstaltungen</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f9f9f9; }
|
|
main { max-width: 1200px; margin: 0 auto; padding: 40px 20px; }
|
|
h1 { text-align: center; margin-bottom: 30px; font-size: 2.5em; }
|
|
.filters { background: white; padding: 25px; border-radius: 8px; margin-bottom: 40px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
|
|
.filter-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; align-items: flex-end; }
|
|
.filter-group { display: flex; flex-direction: column; }
|
|
.filter-group label { font-weight: 600; margin-bottom: 6px; font-size: 0.9em; }
|
|
.filter-group input, .filter-group select { padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 0.95em; }
|
|
.filter-group input:focus, .filter-group select:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1); }
|
|
.btn-filter { padding: 10px 24px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 4px; font-weight: 600; cursor: pointer; }
|
|
.btn-filter:hover { transform: translateY(-1px); }
|
|
.events-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }
|
|
.event-card { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.08); display: flex; flex-direction: column; height: 100%; transition: transform 0.2s, box-shadow 0.2s; border: 1px solid #eee; }
|
|
.event-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
|
|
.event-stripe { height: 4px; width: 100%; }
|
|
.event-content { padding: 22px; flex-grow: 1; display: flex; flex-direction: column; }
|
|
.event-category { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 0.72em; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 10px; width: fit-content; }
|
|
.event-title { font-size: 1.2em; font-weight: 700; margin-bottom: 8px; line-height: 1.35; color: #1a1a2e; }
|
|
.event-description { color: #6b7280; font-size: 0.875em; margin-bottom: 16px; flex-grow: 1; line-height: 1.55; }
|
|
.event-meta { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-top: 1px solid #f3f4f6; font-size: 0.82em; color: #6b7280; margin-bottom: 16px; }
|
|
.event-meta span { display: flex; align-items: center; gap: 6px; }
|
|
.event-link { display: block; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 11px 20px; border-radius: 8px; text-decoration: none; font-weight: 600; text-align: center; font-size: 0.875em; letter-spacing: 0.02em; transition: opacity 0.2s; }
|
|
.event-link:hover { opacity: 0.9; }
|
|
.no-events { text-align: center; padding: 60px 20px; background: white; border-radius: 12px; color: #9ca3af; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
@include('partials.header')
|
|
<main>
|
|
<h1>Veranstaltungen</h1>
|
|
|
|
<div class="filters">
|
|
<form method="GET" action="/">
|
|
<div class="filter-row">
|
|
<div class="filter-group">
|
|
<label for="from">Von:</label>
|
|
<input type="date" id="from" name="from" value="{{ request('from') }}">
|
|
</div>
|
|
<div class="filter-group">
|
|
<label for="to">Bis:</label>
|
|
<input type="date" id="to" name="to" value="{{ request('to') }}">
|
|
</div>
|
|
<div class="filter-group">
|
|
<label for="category">Kategorie:</label>
|
|
<select id="category" name="category">
|
|
<option value="">-- Alle Kategorien --</option>
|
|
@foreach($categories as $category)
|
|
<option value="{{ $category }}" {{ request('category') === $category ? 'selected' : '' }}>
|
|
{{ $category }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div class="filter-group">
|
|
<label for="location">Ort:</label>
|
|
<select id="location" name="location">
|
|
<option value="">-- Alle Orte --</option>
|
|
@foreach($locations as $location)
|
|
<option value="{{ $location }}" {{ request('location') === $location ? 'selected' : '' }}>
|
|
{{ $location }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<button type="submit" class="btn-filter">🔍 Filtern</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
@if($events->count() > 0)
|
|
<div class="events-grid">
|
|
@foreach($events as $event)
|
|
@php
|
|
$colors = [
|
|
'Musik' => ['stripe' => '#8b5cf6', 'bg' => '#f3f0ff', 'text' => '#6d28d9'],
|
|
'Film' => ['stripe' => '#ec4899', 'bg' => '#fdf2f8', 'text' => '#be185d'],
|
|
'Sport' => ['stripe' => '#10b981', 'bg' => '#ecfdf5', 'text' => '#065f46'],
|
|
'Kunst' => ['stripe' => '#f59e0b', 'bg' => '#fffbeb', 'text' => '#92400e'],
|
|
'Literatur' => ['stripe' => '#3b82f6', 'bg' => '#eff6ff', 'text' => '#1d4ed8'],
|
|
'Kulinarik' => ['stripe' => '#ef4444', 'bg' => '#fef2f2', 'text' => '#b91c1c'],
|
|
'Theater' => ['stripe' => '#f97316', 'bg' => '#fff7ed', 'text' => '#c2410c'],
|
|
];
|
|
$color = $colors[$event->category] ?? ['stripe' => '#667eea', 'bg' => '#f0f0ff', 'text' => '#4338ca'];
|
|
@endphp
|
|
<div class="event-card">
|
|
<div class="event-stripe" style="background: {{ $color['stripe'] }};"></div>
|
|
<div class="event-content">
|
|
@if($event->category)
|
|
<span class="event-category" style="background: {{ $color['bg'] }}; color: {{ $color['text'] }};">
|
|
{{ $event->category }}
|
|
</span>
|
|
@endif
|
|
<h2 class="event-title">{{ $event->title }}</h2>
|
|
<p class="event-description">{{ Str::limit($event->description, 110) }}</p>
|
|
<div class="event-meta">
|
|
@if($event->occurrences && $event->occurrences->count() > 0)
|
|
<span>📅 {{ $event->occurrences->first()->start_datetime->format('d.m.Y') }}</span>
|
|
@endif
|
|
@if($event->location_id && $event->location)
|
|
<span>📍 {{ $event->location->name }}</span>
|
|
@endif
|
|
</div>
|
|
<a href="{{ route('events.show', $event) }}" class="event-link">Details ansehen →</a>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@else
|
|
<div class="no-events">
|
|
<h3>Keine Veranstaltungen gefunden</h3>
|
|
<p>Versuchen Sie, Ihre Filter anzupassen</p>
|
|
</div>
|
|
@endif
|
|
</main>
|
|
|
|
@include('partials.footer')
|
|
</body>
|
|
</html>
|