|
|
<!DOCTYPE html> |
|
|
<html lang="de"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>CineMagic - Premium Kinoerlebnis</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@keyframes float { |
|
|
0%, 100% { transform: translateY(0); } |
|
|
50% { transform: translateY(-10px); } |
|
|
} |
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(20px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
@keyframes pulse { |
|
|
0%, 100% { transform: scale(1); } |
|
|
50% { transform: scale(1.05); } |
|
|
} |
|
|
.floating { |
|
|
animation: float 4s ease-in-out infinite; |
|
|
} |
|
|
.fade-in { |
|
|
animation: fadeIn 0.6s ease-out forwards; |
|
|
} |
|
|
.pulse { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
.ticket { |
|
|
background: linear-gradient(135deg, #fff 0%, #f8f8f8 100%); |
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); |
|
|
transform-style: preserve-3d; |
|
|
perspective: 1000px; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
.ticket::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
height: 8px; |
|
|
background: linear-gradient(90deg, #ff416c, #ff4b2b, #ff416c); |
|
|
background-size: 200% 200%; |
|
|
animation: gradient 3s ease infinite; |
|
|
} |
|
|
.ticket::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
bottom: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
height: 8px; |
|
|
background: linear-gradient(90deg, #ff416c, #ff4b2b, #ff416c); |
|
|
background-size: 200% 200%; |
|
|
animation: gradient 3s ease infinite; |
|
|
} |
|
|
@keyframes gradient { |
|
|
0% { background-position: 0% 50%; } |
|
|
50% { background-position: 100% 50%; } |
|
|
100% { background-position: 0% 50%; } |
|
|
} |
|
|
.ticket-stub { |
|
|
position: relative; |
|
|
background: repeating-linear-gradient( |
|
|
45deg, |
|
|
#f8f8f8, |
|
|
#f8f8f8 10px, |
|
|
#e0e0e0 10px, |
|
|
#e0e0e0 20px |
|
|
); |
|
|
} |
|
|
.ticket-stub::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: -15px; |
|
|
left: 0; |
|
|
right: 0; |
|
|
height: 15px; |
|
|
background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='3' fill='%23ff4b2b'/%3E%3C/svg%3E"); |
|
|
} |
|
|
.seat-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(10, 1fr); |
|
|
gap: 6px; |
|
|
} |
|
|
.seat { |
|
|
width: 32px; |
|
|
height: 32px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
border-radius: 4px; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); |
|
|
font-size: 10px; |
|
|
font-weight: bold; |
|
|
} |
|
|
.seat:hover { |
|
|
transform: scale(1.1); |
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); |
|
|
} |
|
|
.seat.selected { |
|
|
background-color: #ff4b2b !important; |
|
|
color: white; |
|
|
box-shadow: 0 4px 8px rgba(255, 75, 43, 0.4); |
|
|
} |
|
|
.seat.occupied { |
|
|
background-color: #e0e0e0 !important; |
|
|
color: #9e9e9e; |
|
|
cursor: not-allowed; |
|
|
position: relative; |
|
|
} |
|
|
.seat.occupied::after { |
|
|
content: '✗'; |
|
|
position: absolute; |
|
|
color: #f44336; |
|
|
font-size: 14px; |
|
|
} |
|
|
.seat.vip { |
|
|
background-color: #ffc107; |
|
|
color: #000; |
|
|
} |
|
|
.screen { |
|
|
background: linear-gradient(to bottom, #e0e0e0, #f5f5f5); |
|
|
box-shadow: inset 0 10px 20px rgba(0, 0, 0, 0.2); |
|
|
position: relative; |
|
|
} |
|
|
.screen::after { |
|
|
content: 'LEINWAND'; |
|
|
position: absolute; |
|
|
bottom: -25px; |
|
|
left: 0; |
|
|
right: 0; |
|
|
text-align: center; |
|
|
font-size: 12px; |
|
|
color: #616161; |
|
|
} |
|
|
.confetti { |
|
|
position: absolute; |
|
|
width: 10px; |
|
|
height: 10px; |
|
|
background-color: #f00; |
|
|
opacity: 0; |
|
|
} |
|
|
.modal-overlay { |
|
|
background: rgba(0, 0, 0, 0.7); |
|
|
backdrop-filter: blur(5px); |
|
|
} |
|
|
.film-poster { |
|
|
transition: all 0.3s ease; |
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); |
|
|
} |
|
|
.film-poster:hover { |
|
|
transform: translateY(-5px) scale(1.02); |
|
|
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); |
|
|
} |
|
|
.film-selector::-webkit-scrollbar { |
|
|
width: 6px; |
|
|
height: 6px; |
|
|
} |
|
|
.film-selector::-webkit-scrollbar-track { |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
.film-selector::-webkit-scrollbar-thumb { |
|
|
background: rgba(255, 255, 255, 0.3); |
|
|
border-radius: 3px; |
|
|
} |
|
|
.glow-text { |
|
|
text-shadow: 0 0 10px rgba(255, 255, 255, 0.7); |
|
|
} |
|
|
.price-tag { |
|
|
clip-path: polygon(0% 0%, 100% 0%, 90% 50%, 100% 100%, 0% 100%); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="min-h-screen bg-gradient-to-br from-gray-900 via-purple-900 to-violet-800 flex items-center justify-center p-4 overflow-x-hidden"> |
|
|
|
|
|
<div id="popcornContainer" class="fixed inset-0 pointer-events-none z-0 overflow-hidden"></div> |
|
|
|
|
|
<div class="max-w-6xl w-full bg-white/5 backdrop-blur-md rounded-3xl shadow-2xl overflow-hidden border border-white/10 transform transition-all duration-300 hover:shadow-2xl hover:shadow-purple-500/20"> |
|
|
|
|
|
<div class="p-6 bg-gradient-to-r from-purple-900/50 to-pink-800/50 border-b border-white/10"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-film text-4xl mr-3 text-yellow-400 floating"></i> |
|
|
<h1 class="text-4xl font-bold text-white glow-text"> |
|
|
<span class="text-yellow-400">Cine</span><span>Magic</span> |
|
|
</h1> |
|
|
</div> |
|
|
<div class="hidden md:flex items-center space-x-2"> |
|
|
<div class="px-3 py-1 bg-yellow-400 text-black rounded-full text-sm font-bold flex items-center"> |
|
|
<i class="fas fa-star mr-1"></i> |
|
|
<span>PREMIUM</span> |
|
|
</div> |
|
|
<div class="px-3 py-1 bg-pink-500 text-white rounded-full text-sm font-bold flex items-center"> |
|
|
<i class="fas fa-ticket-alt mr-1"></i> |
|
|
<span id="selectedSeatCount">0</span>/<span>4</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<p class="mt-2 text-white/80 text-sm flex items-center"> |
|
|
<i class="fas fa-map-marker-alt mr-2"></i> |
|
|
<span>Musterstraße 123, 10115 Berlin • Heute geöffnet: 12:00 - 24:00</span> |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid lg:grid-cols-3 gap-0"> |
|
|
|
|
|
<div class="lg:col-span-1 p-6 border-r border-white/10 bg-black/20"> |
|
|
<h2 class="text-2xl font-semibold text-white mb-6 flex items-center"> |
|
|
<i class="fas fa-calendar-alt text-yellow-400 mr-3"></i> |
|
|
<span>Heutige Vorstellungen</span> |
|
|
</h2> |
|
|
|
|
|
<div class="film-selector max-h-[500px] overflow-y-auto pr-2"> |
|
|
<div class="grid grid-cols-1 gap-4"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="lg:col-span-2 p-6"> |
|
|
<div class="grid md:grid-cols-2 gap-8"> |
|
|
|
|
|
<div class="fade-in" style="animation-delay: 0.1s;"> |
|
|
<h2 class="text-2xl font-semibold text-white mb-6 flex items-center"> |
|
|
<i class="fas fa-ticket-alt text-yellow-400 mr-3"></i> |
|
|
<span>Ihre Buchung</span> |
|
|
</h2> |
|
|
|
|
|
<div class="space-y-5"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-white/80 mb-2">Name</label> |
|
|
<div class="relative"> |
|
|
<i class="fas fa-user absolute left-3 top-1/2 transform -translate-y-1/2 text-yellow-400"></i> |
|
|
<input type="text" id="nameInput" placeholder="Vor- und Nachname" |
|
|
class="w-full pl-10 pr-4 py-3 rounded-xl bg-white/10 border border-white/20 focus:outline-none focus:ring-2 focus:ring-yellow-400 text-white placeholder-white/50 transition-all duration-200"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-white/80 mb-2">E-Mail</label> |
|
|
<div class="relative"> |
|
|
<i class="fas fa-envelope absolute left-3 top-1/2 transform -translate-y-1/2 text-yellow-400"></i> |
|
|
<input type="email" id="emailInput" placeholder="Ihre E-Mail-Adresse" |
|
|
class="w-full pl-10 pr-4 py-3 rounded-xl bg-white/10 border border-white/20 focus:outline-none focus:ring-2 focus:ring-yellow-400 text-white placeholder-white/50 transition-all duration-200"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-white/80 mb-2">Datum</label> |
|
|
<div class="relative"> |
|
|
<i class="fas fa-calendar-day absolute left-3 top-1/2 transform -translate-y-1/2 text-yellow-400"></i> |
|
|
<input type="date" id="dateInput" |
|
|
class="w-full pl-10 pr-4 py-3 rounded-xl bg-white/10 border border-white/20 focus:outline-none focus:ring-2 focus:ring-yellow-400 text-white placeholder-white/50 transition-all duration-200"> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-white/80 mb-2">Uhrzeit</label> |
|
|
<div class="relative"> |
|
|
<i class="fas fa-clock absolute left-3 top-1/2 transform -translate-y-1/2 text-yellow-400"></i> |
|
|
<select id="timeInput" |
|
|
class="w-full pl-10 pr-4 py-3 rounded-xl bg-white/10 border border-white/20 focus:outline-none focus:ring-2 focus:ring-yellow-400 text-white appearance-none transition-all duration-200"> |
|
|
|
|
|
</select> |
|
|
<i class="fas fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-yellow-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-white/80 mb-2">Sitzplatz auswählen</label> |
|
|
<div class="bg-white/10 p-4 rounded-xl border border-white/10"> |
|
|
<div class="screen w-full h-4 mb-6 rounded"></div> |
|
|
|
|
|
<div class="seat-grid mb-4" id="seatGrid"> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="flex flex-wrap justify-between gap-2 text-xs"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-3 h-3 bg-gray-300 mr-2 rounded-sm"></div> |
|
|
<span class="text-white/80">Frei</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-3 h-3 bg-red-500 mr-2 rounded-sm"></div> |
|
|
<span class="text-white/80">Ausgewählt</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-3 h-3 bg-gray-500 mr-2 rounded-sm"></div> |
|
|
<span class="text-white/80">Belegt</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-3 h-3 bg-yellow-400 mr-2 rounded-sm"></div> |
|
|
<span class="text-white/80">VIP</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="pt-2"> |
|
|
<button id="bookButton" onclick="generateTicket()" |
|
|
class="w-full bg-gradient-to-r from-yellow-400 to-yellow-500 hover:from-yellow-500 hover:to-yellow-600 text-black font-bold py-4 px-6 rounded-xl transition-all duration-300 transform hover:scale-[1.02] shadow-lg hover:shadow-yellow-500/30 flex items-center justify-center group"> |
|
|
<span class="mr-2 group-hover:mr-3 transition-all duration-300">Jetzt buchen</span> |
|
|
<i class="fas fa-arrow-right group-hover:translate-x-1 transition-transform duration-300"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="hidden md:block fade-in" style="animation-delay: 0.2s;"> |
|
|
<div class="sticky top-6"> |
|
|
<h2 class="text-2xl font-semibold text-white mb-6 flex items-center"> |
|
|
<i class="fas fa-receipt text-yellow-400 mr-3"></i> |
|
|
<span>Ihr Ticket</span> |
|
|
</h2> |
|
|
|
|
|
<div class="ticket p-6 h-full flex flex-col transform transition-all duration-300 hover:rotate-1"> |
|
|
<div class="flex-1"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-2xl font-bold text-gray-800"> |
|
|
<span class="text-yellow-500">Cine</span><span>Magic</span> |
|
|
</h2> |
|
|
<div class="text-xs bg-yellow-400 text-black px-3 py-1 rounded-full font-bold flex items-center"> |
|
|
<i class="fas fa-crown mr-1"></i> |
|
|
<span>PREMIUM</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<div class="text-xs text-gray-500 uppercase tracking-wider">Film</div> |
|
|
<div class="text-xl font-semibold text-gray-800 mt-1" id="previewFilm">Wählen Sie einen Film</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-2 gap-4 mb-6"> |
|
|
<div> |
|
|
<div class="text-xs text-gray-500 uppercase tracking-wider">Datum</div> |
|
|
<div class="font-medium text-gray-800 mt-1" id="previewDate">--.--.----</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="text-xs text-gray-500 uppercase tracking-wider">Zeit</div> |
|
|
<div class="font-medium text-gray-800 mt-1" id="previewTime">--:--</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="text-xs text-gray-500 uppercase tracking-wider">Saal</div> |
|
|
<div class="font-medium text-gray-800 mt-1">3</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="text-xs text-gray-500 uppercase tracking-wider">Sitz</div> |
|
|
<div class="font-medium text-gray-800 mt-1" id="previewSeat">--</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<div class="text-xs text-gray-500 uppercase tracking-wider">Name</div> |
|
|
<div class="font-medium text-gray-800 mt-1" id="previewName">Geben Sie Ihren Namen ein</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<div class="text-xs text-gray-500">Ticket-ID: <span id="previewTicketId" class="font-mono">XXXXXX</span></div> |
|
|
<div class="text-sm font-bold text-gray-800" id="previewPrice">0,00 €</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="ticket-stub bg-gray-100 p-4 -mx-6 -mb-6 relative"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="text-sm font-medium text-gray-700">Barcode</div> |
|
|
<div class="text-xs text-gray-500"> |
|
|
<i class="fas fa-qrcode mr-1"></i> |
|
|
<span>SCAN ME</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="h-12 bg-white mt-2 flex items-center justify-center overflow-hidden"> |
|
|
<div class="flex space-x-1"> |
|
|
<div class="w-1 h-10 bg-black"></div> |
|
|
<div class="w-1 h-8 bg-black"></div> |
|
|
<div class="w-1 h-6 bg-black"></div> |
|
|
<div class="w-1 h-10 bg-black"></div> |
|
|
<div class="w-1 h-4 bg-black"></div> |
|
|
<div class="w-1 h-8 bg-black"></div> |
|
|
<div class="w-1 h-6 bg-black"></div> |
|
|
<div class="w-1 h-10 bg-black"></div> |
|
|
<div class="w-1 h-4 bg-black"></div> |
|
|
<div class="w-1 h-8 bg-black"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-4 bg-white/10 p-4 rounded-xl border border-white/10"> |
|
|
<div class="text-white/80 text-sm mb-2">Ihre Auswahl:</div> |
|
|
<div id="selectedSeatsList" class="text-white text-sm"> |
|
|
<div class="text-white/50 italic">Keine Sitze ausgewählt</div> |
|
|
</div> |
|
|
<div class="mt-3 pt-3 border-t border-white/10 flex justify-between items-center"> |
|
|
<div class="text-white/80 text-sm">Gesamt:</div> |
|
|
<div class="text-white font-bold" id="totalPrice">0,00 €</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="ticketModal" class="fixed inset-0 flex items-center justify-center p-4 z-50 hidden modal-overlay"> |
|
|
<div class="relative fade-in" style="animation-delay: 0.1s;"> |
|
|
<div class="ticket p-8 max-w-md w-full relative transform transition-all duration-300"> |
|
|
<button onclick="closeTicket()" class="absolute top-4 right-4 text-gray-500 hover:text-gray-700 transition-colors duration-200"> |
|
|
<i class="fas fa-times text-xl"></i> |
|
|
</button> |
|
|
|
|
|
<div class="text-center mb-6"> |
|
|
<h2 class="text-3xl font-bold text-gray-800"> |
|
|
<span class="text-yellow-500">Cine</span><span>Magic</span> |
|
|
</h2> |
|
|
<div class="text-sm text-yellow-600 mt-1">Vielen Dank für Ihre Buchung!</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<div class="text-xs text-gray-500 uppercase tracking-wider">Film</div> |
|
|
<div class="text-xl font-semibold text-gray-800 mt-1" id="ticketFilm"></div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-2 gap-4 mb-6"> |
|
|
<div> |
|
|
<div class="text-xs text-gray-500 uppercase tracking-wider">Datum</div> |
|
|
<div class="font-medium text-gray-800 mt-1" id="ticketDate"></div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="text-xs text-gray-500 uppercase tracking-wider">Zeit</div> |
|
|
<div class="font-medium text-gray-800 mt-1" id="ticketTime"></div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="text-xs text-gray-500 uppercase tracking-wider">Saal</div> |
|
|
<div class="font-medium text-gray-800 mt-1">3</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="text-xs text-gray-500 uppercase tracking-wider">Sitz</div> |
|
|
<div class="font-medium text-gray-800 mt-1" id="ticketSeat"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<div class="text-xs text-gray-500 uppercase tracking-wider">Name</div> |
|
|
<div class="font-medium text-gray-800 mt-1" id="ticketName"></div> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<div class="text-xs text-gray-500">Ticket-ID: <span id="ticketId" class="font-mono"></span></div> |
|
|
<div class="text-sm font-bold text-gray-800" id="ticketPrice"></div> |
|
|
</div> |
|
|
|
|
|
<div class="ticket-stub bg-gray-100 p-4 -mx-8 -mb-8 relative"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="text-sm font-medium text-gray-700">Barcode</div> |
|
|
<div class="text-xs text-gray-500"> |
|
|
<i class="fas fa-qrcode mr-1"></i> |
|
|
<span>SCAN ME</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="h-12 bg-white mt-2 flex items-center justify-center overflow-hidden"> |
|
|
<div class="flex space-x-1"> |
|
|
<div class="w-1 h-10 bg-black"></div> |
|
|
<div class="w-1 h-8 bg-black"></div> |
|
|
<div class="w-1 h-6 bg-black"></div> |
|
|
<div class="w-1 h-10 bg-black"></div> |
|
|
<div class="w-1 h-4 bg-black"></div> |
|
|
<div class="w-1 h-8 bg-black"></div> |
|
|
<div class="w-1 h-6 bg-black"></div> |
|
|
<div class="w-1 h-10 bg-black"></div> |
|
|
<div class="w-1 h-4 bg-black"></div> |
|
|
<div class="w-1 h-8 bg-black"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex space-x-3 mt-6"> |
|
|
<button onclick="window.print()" class="flex-1 bg-blue-500 hover:bg-blue-600 text-white py-3 px-4 rounded-lg flex items-center justify-center transition-colors duration-200"> |
|
|
<i class="fas fa-print mr-2"></i> Drucken |
|
|
</button> |
|
|
<button onclick="closeTicket()" class="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-800 py-3 px-4 rounded-lg flex items-center justify-center transition-colors duration-200"> |
|
|
<i class="fas fa-check mr-2"></i> Fertig |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="confirmationToast" class="fixed bottom-6 left-1/2 transform -translate-x-1/2 bg-green-500 text-white px-6 py-3 rounded-full shadow-lg flex items-center hidden z-50"> |
|
|
<i class="fas fa-check-circle mr-2"></i> |
|
|
<span>Buchung erfolgreich!</span> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const films = [ |
|
|
{ |
|
|
title: "Der König der Löwen", |
|
|
times: ["14:00", "16:30", "19:00", "21:30"], |
|
|
poster: "https://m.media-amazon.com/images/M/MV5BYTYxNGMyZTYtMjE3MS00MzNjLWFjNmYtMDk3N2FmM2JiM2M1XkEyXkFqcGdeQXVyNjY5NDU4NzI@._V1_.jpg", |
|
|
duration: "118 min", |
|
|
price: 12.50, |
|
|
vipPrice: 16.50 |
|
|
}, |
|
|
{ |
|
|
title: "Die Eiskönigin – Völlig unverfroren", |
|
|
times: ["14:15", "16:45", "19:15"], |
|
|
poster: "https://m.media-amazon.com/images/M/MV5BMjA0YjYyZGMtN2U0Ni00YmY4LWJkZTItYTMyMjY3NGYyMTJkXkEyXkFqcGdeQXVyNDg4NjY5OTQ@._V1_.jpg", |
|
|
duration: "102 min", |
|
|
price: 11.00, |
|
|
vipPrice: 15.00 |
|
|
}, |
|
|
{ |
|
|
title: "Toy Story", |
|
|
times: ["13:45", "16:00", "18:15", "20:30"], |
|
|
poster: "https://m.media-amazon.com/images/M/MV5BMDU2ZWJlMjktMTRhMy00ZTA5LWEzNDgtYmNmZTEwZTViZWJkXkEyXkFqcGdeQXVyNDQ2OTk4MzI@._V1_.jpg", |
|
|
duration: "81 min", |
|
|
price: 9.50, |
|
|
vipPrice: 13.50 |
|
|
}, |
|
|
{ |
|
|
title: "Findet Nemo", |
|
|
times: ["14:30", "17:00", "19:30"], |
|
|
poster: "https://m.media-amazon.com/images/M/MV5BZjMxYzBiNjUtZDliNC00MDAyLTg3N2QtOWNjNmNhZGQzNDg5XkEyXkFqcGdeQXVyNjE2MjQwNjc@._V1_.jpg", |
|
|
duration: "100 min", |
|
|
price: 10.50, |
|
|
vipPrice: 14.50 |
|
|
}, |
|
|
{ |
|
|
title: "Ratatouille", |
|
|
times: ["15:00", "17:30", "20:00"], |
|
|
poster: "https://m.media-amazon.com/images/M/MV5BMTMzODU0NTkxMF5BMl5BanBnXkFtZTcwMjQ4MzMzMw@@._V1_.jpg", |
|
|
duration: "111 min", |
|
|
price: 11.00, |
|
|
vipPrice: 15.00 |
|
|
} |
|
|
]; |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
const today = new Date(); |
|
|
const dd = String(today.getDate()).padStart(2, '0'); |
|
|
const mm = String(today.getMonth() + 1).padStart(2, '0'); |
|
|
const yyyy = today.getFullYear(); |
|
|
document.getElementById('dateInput').value = `${yyyy}-${mm}-${dd}`; |
|
|
|
|
|
|
|
|
const filmSelector = document.querySelector('.film-selector .grid'); |
|
|
films.forEach((film, index) => { |
|
|
const filmCard = document.createElement('div'); |
|
|
filmCard.className = 'film-poster bg-white/5 rounded-xl overflow-hidden border border-white/10 cursor-pointer transition-all duration-300'; |
|
|
filmCard.innerHTML = ` |
|
|
<div class="flex"> |
|
|
<div class="w-1/3"> |
|
|
<img src="${film.poster}" alt="${film.title}" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="w-2/3 p-4"> |
|
|
<h3 class="font-bold text-white">${film.title}</h3> |
|
|
<div class="text-yellow-400 text-sm mt-1">${film.duration}</div> |
|
|
<div class="flex mt-3"> |
|
|
<div class="text-xs bg-yellow-400 text-black px-2 py-1 rounded mr-2">${film.price.toFixed(2)} €</div> |
|
|
<div class="text-xs bg-purple-500 text-white px-2 py-1 rounded">VIP ${film.vipPrice.toFixed(2)} €</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
filmCard.addEventListener('click', () => selectFilm(index)); |
|
|
filmSelector.appendChild(filmCard); |
|
|
}); |
|
|
|
|
|
|
|
|
initializeSeats(); |
|
|
|
|
|
|
|
|
createPopcorn(); |
|
|
|
|
|
|
|
|
updatePreview(); |
|
|
}); |
|
|
|
|
|
|
|
|
function createPopcorn() { |
|
|
const container = document.getElementById('popcornContainer'); |
|
|
for (let i = 0; i < 20; i++) { |
|
|
const popcorn = document.createElement('div'); |
|
|
popcorn.className = 'absolute text-yellow-300 opacity-20'; |
|
|
popcorn.innerHTML = '<i class="fas fa-popcorn"></i>'; |
|
|
popcorn.style.left = `${Math.random() * 100}%`; |
|
|
popcorn.style.top = `${Math.random() * 100}%`; |
|
|
popcorn.style.fontSize = `${Math.random() * 20 + 10}px`; |
|
|
popcorn.style.animation = `float ${Math.random() * 10 + 5}s ease-in-out infinite`; |
|
|
popcorn.style.animationDelay = `${Math.random() * 5}s`; |
|
|
container.appendChild(popcorn); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function initializeSeats() { |
|
|
const seatGrid = document.getElementById('seatGrid'); |
|
|
seatGrid.innerHTML = ''; |
|
|
|
|
|
|
|
|
for (let row = 0; row < 10; row++) { |
|
|
const rowLetter = String.fromCharCode(65 + row); |
|
|
|
|
|
|
|
|
for (let seatNum = 1; seatNum <= 10; seatNum++) { |
|
|
const seat = document.createElement('div'); |
|
|
seat.className = 'seat'; |
|
|
seat.textContent = rowLetter + seatNum; |
|
|
seat.dataset.row = rowLetter; |
|
|
seat.dataset.number = seatNum; |
|
|
|
|
|
|
|
|
if (Math.random() < 0.2) { |
|
|
seat.classList.add('occupied'); |
|
|
} |
|
|
|
|
|
|
|
|
if (row < 2) { |
|
|
seat.classList.add('vip'); |
|
|
} |
|
|
|
|
|
seat.addEventListener('click', function() { |
|
|
if (!this.classList.contains('occupied')) { |
|
|
|
|
|
const selectedCount = document.querySelectorAll('.seat.selected').length; |
|
|
if (this.classList.contains('selected') || selectedCount < 4) { |
|
|
this.classList.toggle('selected'); |
|
|
updatePreview(); |
|
|
} else { |
|
|
showToast('Maximal 4 Sitze auswählbar', 'red'); |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
seatGrid.appendChild(seat); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function selectFilm(index) { |
|
|
const film = films[index]; |
|
|
|
|
|
|
|
|
document.getElementById('filmInput').value = film.title; |
|
|
|
|
|
|
|
|
const timeSelect = document.getElementById('timeInput'); |
|
|
timeSelect.innerHTML = ''; |
|
|
film.times.forEach(time => { |
|
|
const option = document.createElement('option'); |
|
|
option.value = time; |
|
|
option.textContent = time; |
|
|
timeSelect.appendChild(option); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.film-poster').forEach((card, i) => { |
|
|
if (i === index) { |
|
|
card.classList.add('ring-2', 'ring-yellow-400'); |
|
|
card.classList.remove('bg-white/5'); |
|
|
card.classList.add('bg-white/10'); |
|
|
} else { |
|
|
card.classList.remove('ring-2', 'ring-yellow-400'); |
|
|
card.classList.add('bg-white/5'); |
|
|
card.classList.remove('bg-white/10'); |
|
|
} |
|
|
}); |
|
|
|
|
|
updatePreview(); |
|
|
} |
|
|
|
|
|
|
|
|
function updatePreview() { |
|
|
const name = document.getElementById('nameInput').value; |
|
|
const email = document.getElementById('emailInput').value; |
|
|
const film = document.getElementById('filmInput').value; |
|
|
const date = document.getElementById('dateInput').value; |
|
|
const time = document.getElementById('timeInput').value; |
|
|
|
|
|
|
|
|
document.getElementById('previewName').textContent = name || 'Geben Sie Ihren Namen ein'; |
|
|
document.getElementById('previewFilm').textContent = film || 'Wählen Sie einen Film'; |
|
|
document.getElementById('previewDate').textContent = formatDate(date) || '--.--.----'; |
|
|
document.getElementById('previewTime').textContent = time || '--:--'; |
|
|
|
|
|
|
|
|
const selectedSeats = Array.from(document.querySelectorAll('.seat.selected')); |
|
|
const selectedSeatsList = document.getElementById('selectedSeatsList'); |
|
|
|
|
|
if (selectedSeats.length > 0) { |
|
|
selectedSeatsList.innerHTML = ''; |
|
|
let totalPrice = 0; |
|
|
|
|
|
selectedSeats.forEach(seat => { |
|
|
const isVip = seat.classList.contains('vip'); |
|
|
const filmObj = films.find(f => f.title === film) || films[0]; |
|
|
const price = isVip ? filmObj.vipPrice : filmObj.price; |
|
|
totalPrice += price; |
|
|
|
|
|
const seatItem = document.createElement('div'); |
|
|
seatItem.className = 'flex justify-between items-center py-1'; |
|
|
seatItem.innerHTML = ` |
|
|
<div>${seat.textContent} ${isVip ? '<span class="text-yellow-400">(VIP)</span>' : ''}</div> |
|
|
<div class="font-bold">${price.toFixed(2)} €</div> |
|
|
`; |
|
|
selectedSeatsList.appendChild(seatItem); |
|
|
}); |
|
|
|
|
|
document.getElementById('previewSeat').textContent = selectedSeats.map(s => s.textContent).join(', '); |
|
|
document.getElementById('totalPrice').textContent = totalPrice.toFixed(2) + ' €'; |
|
|
document.getElementById('previewPrice').textContent = totalPrice.toFixed(2) + ' €'; |
|
|
} else { |
|
|
selectedSeatsList.innerHTML = '<div class="text-white/50 italic">Keine Sitze ausgewählt</div>'; |
|
|
document.getElementById('previewSeat').textContent = '--'; |
|
|
document.getElementById('totalPrice').textContent = '0,00 €'; |
|
|
document.getElementById('previewPrice').textContent = '0,00 €'; |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('selectedSeatCount').textContent = selectedSeats.length; |
|
|
|
|
|
|
|
|
document.getElementById('previewTicketId').textContent = Math.random().toString(36).substring(2, 8).toUpperCase(); |
|
|
|
|
|
|
|
|
const bookButton = document.getElementById('bookButton'); |
|
|
if (name && email && film && date && time && selectedSeats.length > 0) { |
|
|
bookButton.disabled = false; |
|
|
bookButton.classList.remove('opacity-50', 'cursor-not-allowed'); |
|
|
} else { |
|
|
bookButton.disabled = true; |
|
|
bookButton.classList.add('opacity-50', 'cursor-not-allowed'); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function formatDate(dateString) { |
|
|
if (!dateString) return ''; |
|
|
const date = new Date(dateString); |
|
|
const day = String(date.getDate()).padStart(2, '0'); |
|
|
const month = String(date.getMonth() + 1).padStart(2, '0'); |
|
|
const year = date.getFullYear(); |
|
|
return `${day}.${month}.${year}`; |
|
|
} |
|
|
|
|
|
|
|
|
function generateTicket() { |
|
|
const name = document.getElementById('nameInput').value; |
|
|
const email = document.getElementById('emailInput').value; |
|
|
const film = document.getElementById('filmInput').value; |
|
|
const date = document.getElementById('dateInput').value; |
|
|
const time = document.getElementById('timeInput').value; |
|
|
const selectedSeats = Array.from(document.querySelectorAll('.seat.selected')); |
|
|
|
|
|
if (!name || !email || !film || !date || !time || selectedSeats.length === 0) { |
|
|
showToast('Bitte füllen Sie alle Felder aus!', 'red'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
let totalPrice = 0; |
|
|
selectedSeats.forEach(seat => { |
|
|
const isVip = seat.classList.contains('vip'); |
|
|
const filmObj = films.find(f => f.title === film) || films[0]; |
|
|
totalPrice += isVip ? filmObj.vipPrice : filmObj.price; |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('ticketName').textContent = name; |
|
|
document.getElementById('ticketFilm').textContent = film; |
|
|
document.getElementById('ticketDate').textContent = formatDate(date); |
|
|
document.getElementById('ticketTime').textContent = time; |
|
|
document.getElementById('ticketSeat').textContent = selectedSeats.map(s => s.textContent).join(', '); |
|
|
document.getElementById('ticketPrice').textContent = totalPrice.toFixed(2) + ' €'; |
|
|
|
|
|
|
|
|
const ticketId = Math.random().toString(36).substring(2, 8).toUpperCase(); |
|
|
document.getElementById('ticketId').textContent = ticketId; |
|
|
|
|
|
|
|
|
document.getElementById('ticketModal').classList.remove('hidden'); |
|
|
|
|
|
|
|
|
createConfetti(); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
showToast('Buchung erfolgreich!', 'green'); |
|
|
}, 500); |
|
|
} |
|
|
|
|
|
|
|
|
function createConfetti() { |
|
|
const colors = ['#ff4b2b', '#ff416c', '#ffc107', '#4CAF50', '#2196F3']; |
|
|
const container = document.getElementById('ticketModal'); |
|
|
|
|
|
for (let i = 0; i < 50; i++) { |
|
|
const confetti = document.createElement('div'); |
|
|
confetti.className = 'confetti'; |
|
|
confetti.style.left = `${Math.random() * 100}%`; |
|
|
confetti.style.top = `${Math.random() * 100}%`; |
|
|
confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; |
|
|
confetti.style.width = `${Math.random() * 10 + 5}px`; |
|
|
confetti.style.height = `${Math.random() * 10 + 5}px`; |
|
|
confetti.style.opacity = '1'; |
|
|
confetti.style.transform = `rotate(${Math.random() * 360}deg)`; |
|
|
confetti.style.animation = `fadeIn 0.5s ease-out, float ${Math.random() * 3 + 2}s ease-in forwards`; |
|
|
|
|
|
container.appendChild(confetti); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
confetti.remove(); |
|
|
}, 5000); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function closeTicket() { |
|
|
document.getElementById('ticketModal').classList.add('hidden'); |
|
|
} |
|
|
|
|
|
|
|
|
function showToast(message, color) { |
|
|
const toast = document.getElementById('confirmationToast'); |
|
|
toast.innerHTML = `<i class="fas fa-${color === 'green' ? 'check-circle' : 'exclamation-circle'} mr-2"></i><span>${message}</span>`; |
|
|
toast.className = toast.className.replace('hidden', '').trim(); |
|
|
toast.style.backgroundColor = color === 'green' ? '#4CAF50' : '#F44336'; |
|
|
|
|
|
setTimeout(() => { |
|
|
toast.classList.add('hidden'); |
|
|
}, 3000); |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('nameInput').addEventListener('input', updatePreview); |
|
|
document.getElementById('emailInput').addEventListener('input', updatePreview); |
|
|
document.getElementById('filmInput').addEventListener('change', updatePreview); |
|
|
document.getElementById('dateInput').addEventListener('change', updatePreview); |
|
|
document.getElementById('timeInput').addEventListener('change', updatePreview); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Joshua353/d" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
