283 lines
5.7 KiB
HTML
283 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
|
|
<head>
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, initial-scale=1.0"
|
|
>
|
|
|
|
<title>Pingu Concerts</title>
|
|
|
|
<link
|
|
rel="stylesheet"
|
|
href="/static/style.css"
|
|
>
|
|
|
|
<style>
|
|
|
|
.page-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 20px;
|
|
margin-bottom: 35px;
|
|
}
|
|
|
|
.page-header h1 {
|
|
margin: 0;
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
.subtitle {
|
|
color: #8b949e;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.new-concert-button {
|
|
display: inline-block;
|
|
padding: 12px 18px;
|
|
background: #238636;
|
|
color: white;
|
|
text-decoration: none;
|
|
border-radius: 10px;
|
|
font-weight: bold;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.new-concert-button:hover {
|
|
background: #2ea043;
|
|
}
|
|
|
|
.header-actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
}
|
|
|
|
.admin-button {
|
|
display: inline-block;
|
|
padding: 12px 18px;
|
|
border: 1px solid #30363d;
|
|
border-radius: 10px;
|
|
color: #b8c1cc;
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.admin-button:hover {
|
|
color: #ffffff;
|
|
border-color: #58a6ff;
|
|
}
|
|
|
|
.concert-list {
|
|
display: grid;
|
|
gap: 15px;
|
|
}
|
|
|
|
.past-concerts-title {
|
|
margin: 28px 0 0;
|
|
}
|
|
|
|
.concert-card {
|
|
display: block;
|
|
padding: 22px;
|
|
background: #161b22;
|
|
border: 1px solid #30363d;
|
|
border-radius: 14px;
|
|
text-decoration: none;
|
|
transition:
|
|
transform 0.15s ease,
|
|
border-color 0.15s ease,
|
|
background 0.15s ease;
|
|
}
|
|
|
|
.concert-card:hover {
|
|
transform: translateY(-2px);
|
|
border-color: #58a6ff;
|
|
background: #1b222c;
|
|
}
|
|
|
|
.concert-artist {
|
|
font-size: 1.4rem;
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.concert-meta {
|
|
color: #b8c1cc;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.concert-date {
|
|
color: #58a6ff;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.empty-state {
|
|
padding: 40px;
|
|
text-align: center;
|
|
background: #161b22;
|
|
border: 1px dashed #30363d;
|
|
border-radius: 14px;
|
|
color: #8b949e;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
|
|
.page-header {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.new-concert-button {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
<div class="container">
|
|
|
|
<header class="page-header">
|
|
|
|
<div>
|
|
|
|
<h1>
|
|
🐧 Pingu Concerts
|
|
</h1>
|
|
|
|
<div class="subtitle">
|
|
Unser Konzertkalender
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="header-actions">
|
|
|
|
{% if user.is_admin %}
|
|
|
|
<a href="/admin" class="admin-button">
|
|
⚙️ Verwaltung
|
|
</a>
|
|
|
|
{% endif %}
|
|
|
|
<a
|
|
href="/concerts/new"
|
|
class="new-concert-button"
|
|
>
|
|
+ Konzert hinzufügen
|
|
</a>
|
|
|
|
</div>
|
|
|
|
</header>
|
|
|
|
|
|
{% if upcoming_concerts or past_concerts %}
|
|
|
|
<div class="concert-list">
|
|
|
|
{% for concert in upcoming_concerts %}
|
|
|
|
<a
|
|
href="/concerts/{{ concert.id }}"
|
|
class="concert-card"
|
|
>
|
|
|
|
<div class="concert-artist">
|
|
🎸 {{ concert.artist }}
|
|
</div>
|
|
|
|
|
|
<div class="concert-meta">
|
|
|
|
<div class="concert-date">
|
|
📅 {{ concert.date }}
|
|
um {{ concert.time }} Uhr
|
|
</div>
|
|
|
|
|
|
<div>
|
|
📍 {{ concert.venue }}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</a>
|
|
|
|
{% endfor %}
|
|
|
|
{% if past_concerts %}
|
|
|
|
<h2 class="past-concerts-title">
|
|
Vergangene Konzerte
|
|
</h2>
|
|
|
|
{% for concert in past_concerts %}
|
|
|
|
<a
|
|
href="/concerts/{{ concert.id }}"
|
|
class="concert-card"
|
|
>
|
|
|
|
<div class="concert-artist">
|
|
🎸 {{ concert.artist }}
|
|
</div>
|
|
|
|
<div class="concert-meta">
|
|
|
|
<div class="concert-date">
|
|
📅 {{ concert.date }}
|
|
um {{ concert.time }} Uhr
|
|
</div>
|
|
|
|
<div>
|
|
📍 {{ concert.venue }}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</a>
|
|
|
|
{% endfor %}
|
|
|
|
{% endif %}
|
|
|
|
</div>
|
|
|
|
{% else %}
|
|
|
|
<div class="empty-state">
|
|
|
|
<h2>
|
|
Noch keine Konzerte 🎸
|
|
</h2>
|
|
|
|
<p>
|
|
Leg das erste Konzert an!
|
|
</p>
|
|
|
|
</div>
|
|
|
|
{% endif %}
|
|
|
|
</div>
|
|
|
|
</body>
|
|
|
|
</html>
|