<!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>