|
|
<!DOCTYPE html> |
|
|
<html lang="de"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Mullala Kundenportal</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: '#e8e887', |
|
|
accent: '#bd8fff', |
|
|
dark: '#000000', |
|
|
}, |
|
|
fontFamily: { |
|
|
sans: ['Poppins', 'sans-serif'], |
|
|
}, |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
background-color: #f9f9f9; |
|
|
} |
|
|
.calendar-day { |
|
|
height: 40px; |
|
|
width: 40px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
cursor: pointer; |
|
|
border-radius: 50%; |
|
|
transition: all 0.2s; |
|
|
} |
|
|
.calendar-day:hover:not(.empty):not(.selected) { |
|
|
background-color: #f0f0f0; |
|
|
} |
|
|
.calendar-day.selected { |
|
|
background-color: #bd8fff; |
|
|
color: white; |
|
|
} |
|
|
.calendar-day.today { |
|
|
border: 2px solid #bd8fff; |
|
|
} |
|
|
.calendar-day.has-appointment { |
|
|
background-color: #e8e887; |
|
|
} |
|
|
.tab-active { |
|
|
border-bottom: 3px solid #bd8fff; |
|
|
color: #000000; |
|
|
font-weight: 600; |
|
|
} |
|
|
.chat-bubble { |
|
|
max-width: 80%; |
|
|
padding: 10px 15px; |
|
|
border-radius: 18px; |
|
|
margin-bottom: 10px; |
|
|
position: relative; |
|
|
} |
|
|
.chat-bubble.user { |
|
|
background-color: #e8e887; |
|
|
margin-left: auto; |
|
|
border-bottom-right-radius: 4px; |
|
|
} |
|
|
.chat-bubble.admin { |
|
|
background-color: #f0f0f0; |
|
|
margin-right: auto; |
|
|
border-bottom-left-radius: 4px; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50"> |
|
|
<div id="app" class="max-w-md mx-auto bg-white min-h-screen shadow-lg"> |
|
|
<!-- Header --> |
|
|
<header class="bg-primary p-4 flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<!-- Logo Placeholder --> |
|
|
<div class="w-10 h-10 bg-white rounded-full flex items-center justify-center mr-3"> |
|
|
<span class="font-bold text-lg">M</span> |
|
|
</div> |
|
|
<h1 class="text-dark font-bold text-xl">Mullala</h1> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<button id="notificationBtn" class="mr-4 relative"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /> |
|
|
</svg> |
|
|
<span class="absolute -top-1 -right-1 bg-accent text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">3</span> |
|
|
</button> |
|
|
<button id="profileBtn"> |
|
|
<div class="w-8 h-8 bg-accent rounded-full flex items-center justify-center text-white"> |
|
|
<span>MK</span> |
|
|
</div> |
|
|
</button> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<!-- Navigation Tabs --> |
|
|
<div class="flex border-b"> |
|
|
<button class="tab-btn flex-1 py-3 text-center tab-active" data-tab="appointments">Termine</button> |
|
|
<button class="tab-btn flex-1 py-3 text-center" data-tab="chat">Chat</button> |
|
|
<button class="tab-btn flex-1 py-3 text-center" data-tab="services">Services</button> |
|
|
<button class="tab-btn flex-1 py-3 text-center" data-tab="clients">Kunden</button> |
|
|
</div> |
|
|
|
|
|
<!-- Content Area --> |
|
|
<div class="content-area p-4"> |
|
|
<!-- Appointments Tab --> |
|
|
<div id="appointments" class="tab-content"> |
|
|
<div class="mb-6"> |
|
|
<h2 class="text-lg font-semibold mb-3">Nächste Abholungen</h2> |
|
|
<div class="space-y-3"> |
|
|
<!-- Appointment Card --> |
|
|
<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<h3 class="font-medium">Wertstoff Abholung</h3> |
|
|
<p class="text-sm text-gray-600">Montag, 15. Juli 2024</p> |
|
|
<p class="text-sm text-gray-600">08:00 - 12:00 Uhr</p> |
|
|
</div> |
|
|
<div class="bg-primary rounded-full p-2"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /> |
|
|
</svg> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-3 flex space-x-2"> |
|
|
<button class="bg-accent text-white py-2 px-4 rounded-lg flex-1 hover:bg-opacity-90 transition">Bestätigen</button> |
|
|
<button class="border border-gray-300 py-2 px-4 rounded-lg flex-1 hover:bg-gray-50 transition">Absagen</button> |
|
|
<button class="border border-gray-300 py-2 px-3 rounded-lg hover:bg-gray-50 transition"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<!-- Appointment Card --> |
|
|
<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<h3 class="font-medium">Wertstoff Abholung</h3> |
|
|
<p class="text-sm text-gray-600">Montag, 29. Juli 2024</p> |
|
|
<p class="text-sm text-gray-600">08:00 - 12:00 Uhr</p> |
|
|
</div> |
|
|
<div class="bg-primary rounded-full p-2"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /> |
|
|
</svg> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-3 flex space-x-2"> |
|
|
<button class="bg-accent text-white py-2 px-4 rounded-lg flex-1 hover:bg-opacity-90 transition">Bestätigen</button> |
|
|
<button class="border border-gray-300 py-2 px-4 rounded-lg flex-1 hover:bg-gray-50 transition">Absagen</button> |
|
|
<button class="border border-gray-300 py-2 px-3 rounded-lg hover:bg-gray-50 transition"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<!-- Calendar --> |
|
|
<div class="mt-6"> |
|
|
<h2 class="text-lg font-semibold mb-3">Kalender</h2> |
|
|
<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<button id="prevMonth" class="p-1"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /> |
|
|
</svg> |
|
|
</button> |
|
|
<h3 id="currentMonth" class="font-medium">Juli 2024</h3> |
|
|
<button id="nextMonth" class="p-1"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
<div class="grid grid-cols-7 gap-1 text-center mb-2"> |
|
|
<div class="text-xs font-medium text-gray-500">Mo</div> |
|
|
<div class="text-xs font-medium text-gray-500">Di</div> |
|
|
<div class="text-xs font-medium text-gray-500">Mi</div> |
|
|
<div class="text-xs font-medium text-gray-500">Do</div> |
|
|
<div class="text-xs font-medium text-gray-500">Fr</div> |
|
|
<div class="text-xs font-medium text-gray-500">Sa</div> |
|
|
<div class="text-xs font-medium text-gray-500">So</div> |
|
|
</div> |
|
|
<div id="calendarDays" class="grid grid-cols-7 gap-1"> |
|
|
<!-- Calendar days will be generated by JS --> |
|
|
</div> |
|
|
<div class="mt-3 flex items-center text-sm"> |
|
|
<div class="flex items-center mr-4"> |
|
|
<div class="w-3 h-3 bg-primary rounded-full mr-1"></div> |
|
|
<span>Abholung</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-3 h-3 border-2 border-accent rounded-full mr-1"></div> |
|
|
<span>Heute</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<!-- Chat Tab --> |
|
|
<div id="chat" class="tab-content hidden"> |
|
|
<div class="flex flex-col h-[calc(100vh-140px)]"> |
|
|
<div class="flex-1 overflow-y-auto p-2" id="chatMessages"> |
|
|
<div class="chat-bubble admin"> |
|
|
<p>Guten Tag! Wie können wir Ihnen helfen?</p> |
|
|
<span class="text-xs text-gray-500 block mt-1">10:30</span> |
|
|
</div> |
|
|
<div class="chat-bubble user"> |
|
|
<p>Hallo, ich möchte gerne meinen Abholtermin am 15. Juli verschieben.</p> |
|
|
<span class="text-xs text-gray-500 block mt-1">10:32</span> |
|
|
</div> |
|
|
<div class="chat-bubble admin"> |
|
|
<p>Selbstverständlich. Welches Datum würde Ihnen besser passen?</p> |
|
|
<span class="text-xs text-gray-500 block mt-1">10:35</span> |
|
|
</div> |
|
|
<div class="chat-bubble user"> |
|
|
<p>Wäre der 17. Juli möglich?</p> |
|
|
<span class="text-xs text-gray-500 block mt-1">10:36</span> |
|
|
</div> |
|
|
<div class="chat-bubble admin"> |
|
|
<p>Ich prüfe das für Sie... Ja, am 17. Juli zwischen 8:00 und 12:00 Uhr wäre ein Termin möglich. Soll ich diesen für Sie buchen?</p> |
|
|
<span class="text-xs text-gray-500 block mt-1">10:38</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t p-3"> |
|
|
<div class="flex"> |
|
|
<input type="text" id="messageInput" placeholder="Nachricht schreiben..." class="flex-1 border rounded-l-lg px-3 py-2 focus:outline-none focus:ring-1 focus:ring-accent"> |
|
|
<button id="sendMessage" class="bg-accent text-white px-4 py-2 rounded-r-lg hover:bg-opacity-90 transition"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<!-- Services Tab --> |
|
|
<div id="services" class="tab-content hidden"> |
|
|
<h2 class="text-lg font-semibold mb-4">Zusätzliche Services</h2> |
|
|
<div class="grid grid-cols-1 gap-4"> |
|
|
<!-- Service Card --> |
|
|
<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-primary p-3 rounded-lg mr-3"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /> |
|
|
</svg> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<h3 class="font-medium">Sperrmüll Abholung</h3> |
|
|
<p class="text-sm text-gray-600 mt-1">Lassen Sie Ihren Sperrmüll bequem abholen</p> |
|
|
<button class="mt-3 bg-accent text-white py-2 px-4 rounded-lg hover:bg-opacity-90 transition w-full">Termin buchen</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<!-- Service Card --> |
|
|
<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-primary p-3 rounded-lg mr-3"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" /> |
|
|
</svg> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<h3 class="font-medium">Grünschnitt Abholung</h3> |
|
|
<p class="text-sm text-gray-600 mt-1">Wir entsorgen Ihren Grünschnitt umweltgerecht</p> |
|
|
<button class="mt-3 bg-accent text-white py-2 px-4 rounded-lg hover:bg-opacity-90 transition w-full">Termin buchen</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<!-- Service Card --> |
|
|
<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-primary p-3 rounded-lg mr-3"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" /> |
|
|
</svg> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<h3 class="font-medium">Sonderabholung</h3> |
|
|
<p class="text-sm text-gray-600 mt-1">Individuelle Abholungen nach Ihren Bedürfnissen</p> |
|
|
<button class="mt-3 bg-accent text-white py-2 px-4 rounded-lg hover:bg-opacity-90 transition w-full">Anfrage stellen</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<!-- Admin Section (would be hidden for regular users) --> |
|
|
<div class="mt-8 border-t pt-6"> |
|
|
<h2 class="text-lg font-semibold mb-4">Admin-Bereich</h2> |
|
|
<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm"> |
|
|
<h3 class="font-medium mb-3">Termin an Kunden senden</h3> |
|
|
<div class="space-y-3"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Kundengruppe</label> |
|
|
<select class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-1 focus:ring-accent"> |
|
|
<option>Alle Kunden</option> |
|
|
<option>Bezirk 1010</option> |
|
|
<option>Bezirk 1020</option> |
|
|
<option>Premium Kunden</option> |
|
|
<option>Neue Kunden</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Terminart</label> |
|
|
<select class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-1 focus:ring-accent"> |
|
|
<option>Wertstoff Abholung</option> |
|
|
<option>Sperrmüll Abholung</option> |
|
|
<option>Grünschnitt Abholung</option> |
|
|
<option>Sonderabholung</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Datum</label> |
|
|
<input type="date" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-1 focus:ring-accent"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Zeitfenster</label> |
|
|
<div class="flex space-x-2"> |
|
|
<input type="time" class="flex-1 border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-1 focus:ring-accent"> |
|
|
<span class="flex items-center">bis</span> |
|
|
<input type="time" class="flex-1 border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-1 focus:ring-accent"> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Nachricht</label> |
|
|
<textarea class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-1 focus:ring-accent" rows="3"></textarea> |
|
|
</div> |
|
|
<button class="w-full bg-accent text-white py-2 px-4 rounded-lg hover:bg-opacity-90 transition">Termine versenden</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<!-- Clients Tab (New) --> |
|
|
<div id="clients" class="tab-content hidden"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-lg font-semibold">Kundenverwaltung</h2> |
|
|
<button class="bg-accent text-white px-3 py-1 rounded-lg text-sm hover:bg-opacity-90 transition flex items-center"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" /> |
|
|
</svg> |
|
|
Neuer Kunde |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<!-- Search and Filter --> |
|
|
<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm mb-4"> |
|
|
<div class="flex space-x-2"> |
|
|
<div class="flex-1"> |
|
|
<input type="text" id="clientSearch" placeholder="Kunden suchen..." class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-1 focus:ring-accent"> |
|
|
</div> |
|
|
<button class="bg-primary px-4 py-2 rounded-lg hover:bg-opacity-90 transition"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
<div class="mt-3 flex flex-wrap gap-2"> |
|
|
<button class="bg-accent bg-opacity-20 text-accent px-3 py-1 rounded-full text-sm hover:bg-opacity-30 transition">Alle</button> |
|
|
<button class="bg-gray-100 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition">Bezirk 1010</button> |
|
|
<button class="bg-gray-100 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition">Bezirk 1020</button> |
|
|
<button class="bg-gray-100 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition">Premium</button> |
|
|
<button class="bg-gray-100 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition">Neue Kunden</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<!-- Client List --> |
|
|
<div class="space-y-3"> |
|
|
<!-- Client Card --> |
|
|
<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm"> |
|
|
<div class="flex justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 bg-primary rounded-full flex items-center justify-center mr-3"> |
|
|
<span class="font-medium">MS</span> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium">Max Schneider</h3> |
|
|
<p class="text-sm text-gray-600">Bezirk 1010</p> |
|
|
</div> |
|
|
</div> |
|
|
<button class="text-accent" id="expandClient1"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
<div id="clientDetails1" class="mt-3 pt-3 border-t hidden"> |
|
|
<div class="grid grid-cols-2 gap-3 mb-3"> |
|
|
<div> |
|
|
<p class="text-xs text-gray-500">E-Mail</p> |
|
|
<p class="text-sm">max.schneider@example.com</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-xs text-gray-500">Telefon</p> |
|
|
<p class="text-sm">+43 123 456789</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-xs text-gray-500">Adresse</p> |
|
|
<p class="text-sm">Hauptstraße 1, 1010 Wien</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-xs text-gray-500">Kunde seit</p> |
|
|
<p class="text-sm">15.03.2023</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="bg-accent text-white py-2 px-3 rounded-lg flex-1 hover:bg-opacity-90 transition flex items-center justify-center"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /> |
|
|
</svg> |
|
|
Termin planen |
|
|
</button> |
|
|
<button class="border border-gray-300 py-2 px-3 rounded-lg hover:bg-gray-50 transition flex items-center justify-center"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" /> |
|
|
</svg> |
|
|
Chat |
|
|
</button> |
|
|
<button class="border border-gray-300 py-2 px-3 rounded-lg hover:bg-gray-50 transition flex items-center justify-center"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<!-- Client Card --> |
|
|
<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm"> |
|
|
<div class="flex justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 bg-primary rounded-full flex items-center justify-center mr-3"> |
|
|
<span class="font-medium">AH</span> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium">Anna Huber</h3> |
|
|
<p class="text-sm text-gray-600">Bezirk 1020</p> |
|
|
</div> |
|
|
</div> |
|
|
<button class="text-accent" id="expandClient2"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
<div id="clientDetails2" class="mt-3 pt-3 border-t hidden"> |
|
|
<div class="grid grid-cols-2 gap-3 mb-3"> |
|
|
<div> |
|
|
<p class="text-xs text-gray-500">E-Mail</p> |
|
|
<p class="text-sm">anna.huber@example.com</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-xs text-gray-500">Telefon</p> |
|
|
<p class="text-sm">+43 987 654321</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-xs text-gray-500">Adresse</p> |
|
|
<p class="text-sm">Praterstraße 15, 1020 Wien</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-xs text-gray-500">Kunde seit</p> |
|
|
<p class="text-sm">02.05.2023</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="bg-accent text-white py-2 px-3 rounded-lg flex-1 hover:bg-opacity-90 transition flex items-center justify-center"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /> |
|
|
</svg> |
|
|
Termin planen |
|
|
</button> |
|
|
<button class="border border-gray-300 py-2 px-3 rounded-lg hover:bg-gray-50 transition flex items-center justify-center"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" /> |
|
|
</svg> |
|
|
Chat |
|
|
</button> |
|
|
<button class="border border-gray-300 py-2 px-3 rounded-lg hover:bg-gray-50 transition flex items-center justify-center"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<!-- Client Card --> |
|
|
<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm"> |
|
|
<div class="flex justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 bg-primary rounded-full flex items-center justify-center mr-3"> |
|
|
<span class="font-medium">TM</span> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium">Thomas Müller</h3> |
|
|
<p class="text-sm text-gray-600">Bezirk 1010 • Premium</p> |
|
|
</div> |
|
|
</div> |
|
|
<button class="text-accent" id="expandClient3"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
<div id="clientDetails3" class="mt-3 pt-3 border-t hidden"> |
|
|
<div class="grid grid-cols-2 gap-3 mb-3"> |
|
|
<div> |
|
|
<p class="text-xs text-gray-500">E-Mail</p> |
|
|
<p class="text-sm">thomas.mueller@example.com</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-xs text-gray-500">Telefon</p> |
|
|
<p class="text-sm">+43 555 123456</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-xs text-gray-500">Adresse</p> |
|
|
<p class="text-sm">Stephansplatz 8, 1010 Wien</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-xs text-gray-500">Kunde seit</p> |
|
|
<p class="text-sm">10.01.2022</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="bg-accent text-white py-2 px-3 rounded-lg flex-1 hover:bg-opacity-90 transition flex items-center justify-center"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /> |
|
|
</svg> |
|
|
Termin planen |
|
|
</button> |
|
|
<button class="border border-gray-300 py-2 px-3 rounded-lg hover:bg-gray-50 transition flex items-center justify-center"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" /> |
|
|
</svg> |
|
|
Chat |
|
|
</button> |
|
|
<button class="border border-gray-300 py-2 px-3 rounded-lg hover:bg-gray-50 transition flex items-center justify-center"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<!-- Client Card --> |
|
|
<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm"> |
|
|
<div class="flex justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 bg-primary rounded-full flex items-center justify-center mr-3"> |
|
|
<span class="font-medium">LW</span> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium">Lisa Wagner</h3> |
|
|
<p class="text-sm text-gray-600">Bezirk 1020 • Neu</p> |
|
|
</div> |
|
|
</div> |
|
|
<button class="text-accent" id="expandClient4"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
<div id="clientDetails4" class="mt-3 pt-3 border-t hidden"> |
|
|
<div class="grid grid-cols-2 gap-3 mb-3"> |
|
|
<div> |
|
|
<p class="text-xs text-gray-500">E-Mail</p> |
|
|
<p class="text-sm">lisa.wagner@example.com</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-xs text-gray-500">Telefon</p> |
|
|
<p class="text-sm">+43 777 987654</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-xs text-gray-500">Adresse</p> |
|
|
<p class="text-sm">Taborstraße 42, 1020 Wien</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-xs text-gray-500">Kunde seit</p> |
|
|
<p class="text-sm">05.06.2024</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="bg-accent text-white py-2 px-3 rounded-lg flex-1 hover:bg-opacity-90 transition flex items-center justify-center"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /> |
|
|
</svg> |
|
|
Termin planen |
|
|
</button> |
|
|
<button class="border border-gray-300 py-2 px-3 rounded-lg hover:bg-gray-50 transition flex items-center justify-center"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" /> |
|
|
</svg> |
|
|
Chat |
|
|
</button> |
|
|
<button class="border border-gray-300 py-2 px-3 rounded-lg hover:bg-gray-50 transition flex items-center justify-center"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<!-- Individual Appointment Modal --> |
|
|
<div id="appointmentModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
|
|
<div class="bg-white rounded-lg p-6 w-full max-w-md mx-4"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-lg font-semibold">Termin planen</h3> |
|
|
<button id="closeModal" class="text-gray-500 hover:text-gray-700"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Kunde</label> |
|
|
<div class="flex items-center bg-gray-100 p-2 rounded-lg"> |
|
|
<div class="w-8 h-8 bg-primary rounded-full flex items-center justify-center mr-2"> |
|
|
<span class="font-medium text-sm" id="clientInitials">MS</span> |
|
|
</div> |
|
|
<span id="clientName">Max Schneider</span> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Terminart</label> |
|
|
<select class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-1 focus:ring-accent"> |
|
|
<option>Wertstoff Abholung</option> |
|
|
<option>Sperrmüll Abholung</option> |
|
|
<option>Grünschnitt Abholung</option> |
|
|
<option>Sonderabholung</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Datum</label> |
|
|
<input type="date" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-1 focus:ring-accent"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Zeitfenster</label> |
|
|
<div class="flex space-x-2"> |
|
|
<input type="time" class="flex-1 border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-1 focus:ring-accent"> |
|
|
<span class="flex items-center">bis</span> |
|
|
<input type="time" class="flex-1 border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-1 focus:ring-accent"> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Nachricht</label> |
|
|
<textarea class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-1 focus:ring-accent" rows="3" placeholder="Optionale Nachricht an den Kunden..."></textarea> |
|
|
</div> |
|
|
<div class="flex space-x-3 pt-2"> |
|
|
<button id="cancelAppointment" class="border border-gray-300 py-2 px-4 rounded-lg flex-1 hover:bg-gray-50 transition">Abbrechen</button> |
|
|
<button id="saveAppointment" class="bg-accent text-white py-2 px-4 rounded-lg flex-1 hover:bg-opacity-90 transition">Termin speichern</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
// Tab Navigation |
|
|
document.querySelectorAll('.tab-btn').forEach(button => { |
|
|
button.addEventListener('click', () => { |
|
|
// Remove active class from all tabs |
|
|
document.querySelectorAll('.tab-btn').forEach(btn => { |
|
|
btn.classList.remove('tab-active'); |
|
|
}); |
|
|
|
|
|
// Add active class to clicked tab |
|
|
button.classList.add('tab-active'); |
|
|
|
|
|
// Hide all tab content |
|
|
document.querySelectorAll('.tab-content').forEach(content => { |
|
|
content.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
// Show selected tab content |
|
|
const tabId = button.getAttribute('data-tab'); |
|
|
document.getElementById(tabId).classList.remove('hidden'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
// Calendar functionality |
|
|
function generateCalendar() { |
|
|
const calendarDays = document.getElementById('calendarDays'); |
|
|
calendarDays.innerHTML = ''; |
|
|
|
|
|
// Sample data - in a real app this would come from your backend |
|
|
const today = new Date(); |
|
|
const currentMonth = today.getMonth(); |
|
|
const currentYear = today.getFullYear(); |
|
|
|
|
|
// Update the month display |
|
|
const monthNames = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"]; |
|
|
document.getElementById('currentMonth').textContent = `${monthNames[currentMonth]} ${currentYear}`; |
|
|
|
|
|
// Get the first day of the month |
|
|
const firstDay = new Date(currentYear, currentMonth, 1); |
|
|
const startingDay = firstDay.getDay() === 0 ? 6 : firstDay.getDay() - 1; // Adjust for Monday as first day |
|
|
|
|
|
// Get the last day of the month |
|
|
const lastDay = new Date(currentYear, currentMonth + 1, 0).getDate(); |
|
|
|
|
|
// Sample appointment dates |
|
|
const appointmentDates = [15, 29]; // 15th and 29th of the current month |
|
|
|
|
|
// Create empty cells for days before the first day of the month |
|
|
for (let i = 0; i < startingDay; i++) { |
|
|
const emptyDay = document.createElement('div'); |
|
|
emptyDay.className = 'calendar-day empty'; |
|
|
calendarDays.appendChild(emptyDay); |
|
|
} |
|
|
|
|
|
// Create cells for each day of the month |
|
|
for (let day = 1; day <= lastDay; day++) { |
|
|
const dayCell = document.createElement('div'); |
|
|
dayCell.className = 'calendar-day'; |
|
|
dayCell.textContent = day; |
|
|
|
|
|
// Mark today |
|
|
if (day === today.getDate() && currentMonth === today.getMonth() && currentYear === today.getFullYear()) { |
|
|
dayCell.classList.add('today'); |
|
|
} |
|
|
|
|
|
// Mark days with appointments |
|
|
if (appointmentDates.includes(day)) { |
|
|
dayCell.classList.add('has-appointment'); |
|
|
} |
|
|
|
|
|
dayCell.addEventListener('click', () => { |
|
|
document.querySelectorAll('.calendar-day').forEach(cell => { |
|
|
cell.classList.remove('selected'); |
|
|
}); |
|
|
dayCell.classList.add('selected'); |
|
|
}); |
|
|
|
|
|
calendarDays.appendChild(dayCell); |
|
|
} |
|
|
} |
|
|
|
|
|
// Initialize calendar |
|
|
generateCalendar(); |
|
|
|
|
|
// Previous and Next month buttons |
|
|
document.getElementById('prevMonth').addEventListener('click', () => { |
|
|
// In a real app, this would update the month and regenerate the calendar |
|
|
alert('Vorheriger Monat (In der fertigen App würde hier der Kalender aktualisiert)'); |
|
|
}); |
|
|
|
|
|
document.getElementById('nextMonth').addEventListener('click', () => { |
|
|
// In a real app, this would update the month and regenerate the calendar |
|
|
alert('Nächster Monat (In der fertigen App würde hier der Kalender aktualisiert)'); |
|
|
}); |
|
|
|
|
|
// Chat functionality |
|
|
document.getElementById('sendMessage').addEventListener('click', sendMessage); |
|
|
document.getElementById('messageInput').addEventListener('keypress', function(e) { |
|
|
if (e.key === 'Enter') { |
|
|
sendMessage(); |
|
|
} |
|
|
}); |
|
|
|
|
|
function sendMessage() { |
|
|
const messageInput = document.getElementById('messageInput'); |
|
|
const message = messageInput.value.trim(); |
|
|
|
|
|
if (message) { |
|
|
const chatMessages = document.getElementById('chatMessages'); |
|
|
const now = new Date(); |
|
|
const time = now.getHours() + ':' + (now.getMinutes() < 10 ? '0' : '') + now.getMinutes(); |
|
|
|
|
|
const messageBubble = document.createElement('div'); |
|
|
messageBubble.className = 'chat-bubble user'; |
|
|
messageBubble.innerHTML = ` |
|
|
<p>${message}</p> |
|
|
<span class="text-xs text-gray-500 block mt-1">${time}</span> |
|
|
`; |
|
|
|
|
|
chatMessages.appendChild(messageBubble); |
|
|
chatMessages.scrollTop = chatMessages.scrollHeight; |
|
|
messageInput.value = ''; |
|
|
|
|
|
// Simulate admin response (in a real app, this would come from your backend) |
|
|
setTimeout(() => { |
|
|
const adminResponse = document.createElement('div'); |
|
|
adminResponse.className = 'chat-bubble admin'; |
|
|
adminResponse.innerHTML = ` |
|
|
<p>Danke für Ihre Nachricht. Ein Mitarbeiter wird sich in Kürze bei Ihnen melden.</p> |
|
|
<span class="text-xs text-gray-500 block mt-1">${time}</span> |
|
|
`; |
|
|
|
|
|
chatMessages.appendChild(adminResponse); |
|
|
chatMessages.scrollTop = chatMessages.scrollHeight; |
|
|
}, 1000); |
|
|
} |
|
|
} |
|
|
|
|
|
// Client details expand/collapse |
|
|
document.getElementById('expandClient1').addEventListener('click', function() { |
|
|
toggleClientDetails('clientDetails1', 'expandClient1'); |
|
|
}); |
|
|
|
|
|
document.getElementById('expandClient2').addEventListener('click', function() { |
|
|
toggleClientDetails('clientDetails2', 'expandClient2'); |
|
|
}); |
|
|
|
|
|
document.getElementById('expandClient3').addEventListener('click', function() { |
|
|
toggleClientDetails('clientDetails3', 'expandClient3'); |
|
|
}); |
|
|
|
|
|
document.getElementById('expandClient4').addEventListener('click', function() { |
|
|
toggleClientDetails('clientDetails4', 'expandClient4'); |
|
|
}); |
|
|
|
|
|
function toggleClientDetails(detailsId, buttonId) { |
|
|
const details = document.getElementById(detailsId); |
|
|
const button = document.getElementById(buttonId); |
|
|
|
|
|
if (details.classList.contains('hidden')) { |
|
|
details.classList.remove('hidden'); |
|
|
button.innerHTML = ` |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" /> |
|
|
</svg> |
|
|
`; |
|
|
} else { |
|
|
details.classList.add('hidden'); |
|
|
button.innerHTML = ` |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> |
|
|
</svg> |
|
|
`; |
|
|
} |
|
|
} |
|
|
|
|
|
// Appointment Modal |
|
|
const appointmentModal = document.getElementById('appointmentModal'); |
|
|
|
|
|
// Open modal when "Termin planen" button is clicked |
|
|
document.querySelectorAll('.bg-accent.text-white.py-2.px-3.rounded-lg.flex-1').forEach(button => { |
|
|
button.addEventListener('click', function() { |
|
|
// Get client info from the parent card |
|
|
const clientCard = this.closest('.bg-white.border.border-gray-200.rounded-lg.p-4'); |
|
|
const clientName = clientCard.querySelector('h3.font-medium').textContent; |
|
|
const clientInitials = clientCard.querySelector('.w-10.h-10.bg-primary span').textContent; |
|
|
|
|
|
// Update modal with client info |
|
|
document.getElementById('clientName').textContent = clientName; |
|
|
document.getElementById('clientInitials').textContent = clientInitials; |
|
|
|
|
|
// Show modal |
|
|
appointmentModal.classList.remove('hidden'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
// Close modal |
|
|
document.getElementById('closeModal').addEventListener('click', function() { |
|
|
appointmentModal.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
document.getElementById('cancelAppointment').addEventListener('click', function() { |
|
|
appointmentModal.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
document.getElementById('saveAppointment').addEventListener('click', function() { |
|
|
// In a real app, this would save the appointment data |
|
|
alert('Termin wurde gespeichert!'); |
|
|
appointmentModal.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
// Close modal when clicking outside |
|
|
window.addEventListener('click', function(event) { |
|
|
if (event.target === appointmentModal) { |
|
|
appointmentModal.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
|
|
|
// Note: The sevDesk API integration would be implemented here in a real application |
|
|
// For security reasons, API tokens should never be exposed in frontend code |
|
|
// Instead, all API calls should be proxied through your backend |
|
|
|
|
|
// Sample function for sevDesk API integration (for demonstration purposes only) |
|
|
function connectToSevDesk() { |
|
|
// In a real app, this would be handled by your backend |
|
|
console.log("Connecting to sevDesk API..."); |
|
|
// API token should be stored securely on your backend |
|
|
// const apiToken = "7e97587222e8401e5261cbc86af6eafd"; // Never expose API tokens in frontend code |
|
|
} |
|
|
</script> |
|
|
<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'936cc47ec35bf562',t:'MTc0NTc0MDYzMS4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body> |
|
|
</html> |