make the colors more light

index.html

@@ -32,10 +32,10 @@
         }
     </style>
 </head>
-<body class="bg-gradient-to-br from-blue-50 to-purple-50">
+<body class="bg-gradient-to-br from-blue-50 to-indigo-50">
 <div class="min-h-screen">
         <!-- Header -->
-        <header class="bg-gradient-to-r from-blue-600 to-purple-600 shadow-lg">
+        <header class="bg-gradient-to-r from-blue-400 to-indigo-400 shadow-lg">
 <div class="max-w-7xl mx-auto px-4 py-4 sm:px-6 lg:px-8 flex justify-between items-center">
                 <h1 class="text-2xl font-bold text-white">Behältermanagement Dashboard</h1>
                 <div class="flex items-center space-x-4 text-white">
@@ -66,20 +66,20 @@
                     </div>
                     <div class="flex flex-wrap gap-2">
                         <div class="flex items-center">
-                            <input id="filter-type1" type="checkbox" checked class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded">
-                            <label for="filter-type1" class="ml-2 text-sm font-medium text-gray-700">Typ A</label>
+                            <input id="filter-type1" type="checkbox" checked class="h-4 w-4 text-indigo-400 focus:ring-indigo-300 border-gray-300 rounded">
+<label for="filter-type1" class="ml-2 text-sm font-medium text-gray-700">Typ A</label>
 </div>
                         <div class="flex items-center">
-                            <input id="filter-type2" type="checkbox" checked class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
-                            <label for="filter-type2" class="ml-2 text-sm font-medium text-gray-700">Typ B</label>
+                            <input id="filter-type2" type="checkbox" checked class="h-4 w-4 text-blue-400 focus:ring-blue-300 border-gray-300 rounded">
+<label for="filter-type2" class="ml-2 text-sm font-medium text-gray-700">Typ B</label>
 </div>
                         <div class="flex items-center">
-                            <input id="filter-type3" type="checkbox" checked class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded">
-                            <label for="filter-type3" class="ml-2 text-sm font-medium text-gray-700">Typ C</label>
+                            <input id="filter-type3" type="checkbox" checked class="h-4 w-4 text-green-400 focus:ring-green-300 border-gray-300 rounded">
+<label for="filter-type3" class="ml-2 text-sm font-medium text-gray-700">Typ C</label>
 </div>
                         <div class="flex items-center">
-                            <input id="filter-type4" type="checkbox" checked class="h-4 w-4 text-yellow-600 focus:ring-yellow-500 border-gray-300 rounded">
-                            <label for="filter-type4" class="ml-2 text-sm font-medium text-gray-700">Typ D</label>
+                            <input id="filter-type4" type="checkbox" checked class="h-4 w-4 text-yellow-400 focus:ring-yellow-300 border-gray-300 rounded">
+<label for="filter-type4" class="ml-2 text-sm font-medium text-gray-700">Typ D</label>
 </div>
                     </div>
                 </div>
@@ -88,13 +88,13 @@
             <!-- Dashboard Overview -->
             <div class="bg-white shadow rounded-lg p-4 mb-6">
                 <h2 class="text-lg font-medium text-gray-900 mb-4">Standortübersicht</h2>
-                <div class="chart-container bg-gradient-to-b from-white to-blue-50 p-4 rounded-lg">
+                <div class="chart-container bg-gradient-to-b from-white to-indigo-50 p-4 rounded-lg">
 <canvas id="locationChart"></canvas>
                 </div>
             </div>
 
             <!-- Location Details -->
-            <div class="bg-white shadow-lg rounded-xl p-4 overflow-x-auto custom-scrollbar border-l-8 border-purple-500">
+            <div class="bg-white shadow-lg rounded-xl p-4 overflow-x-auto custom-scrollbar border-l-8 border-indigo-400">
 <h2 class="text-lg font-medium text-gray-900 mb-4">Standortdetails</h2>
                 <table class="min-w-full divide-y divide-gray-200">
                     <thead class="bg-gray-50">
@@ -209,29 +209,29 @@
                         {
                             label: 'IST Aktuell',
                             data: [145, 140, 152, 145, 140],
-                            backgroundColor: 'rgba(255, 159, 64, 0.7)',
-                            borderColor: 'rgba(255, 159, 64, 1)',
+                            backgroundColor: 'rgba(255, 206, 86, 0.4)',
+                            borderColor: 'rgba(255, 206, 86, 0.8)',
 borderWidth: 1
                         },
                         {
                             label: 'IST Min',
                             data: [80, 95, 110, 70, 90],
-                            backgroundColor: 'rgba(75, 192, 192, 0.8)',
-                            borderColor: 'rgba(75, 192, 192, 1)',
+                            backgroundColor: 'rgba(75, 192, 192, 0.4)',
+                            borderColor: 'rgba(75, 192, 192, 0.8)',
 borderWidth: 1
                         },
                         {
                             label: 'IST Max',
                             data: [210, 185, 195, 220, 190],
-                            backgroundColor: 'rgba(54, 162, 235, 0.8)',
-                            borderColor: 'rgba(54, 162, 235, 1)',
+                            backgroundColor: 'rgba(54, 162, 235, 0.4)',
+                            borderColor: 'rgba(54, 162, 235, 0.8)',
 borderWidth: 1
                         },
                         {
                             label: 'SOLL Min',
                             data: [100, 120, 100, 100, 110],
-                            backgroundColor: 'rgba(255, 99, 132, 0.8)',
-                            borderColor: 'rgba(255, 99, 132, 1)',
+                            backgroundColor: 'rgba(255, 99, 132, 0.4)',
+                            borderColor: 'rgba(255, 99, 132, 0.8)',
 borderWidth: 1,
                             type: 'line',
                             fill: false
@@ -239,8 +239,8 @@ borderWidth: 1,
                         {
                             label: 'SOLL Max',
                             data: [200, 180, 200, 200, 190],
-                            backgroundColor: 'rgba(153, 102, 255, 0.8)',
-                            borderColor: 'rgba(153, 102, 255, 1)',
+                            backgroundColor: 'rgba(153, 102, 255, 0.4)',
+                            borderColor: 'rgba(153, 102, 255, 0.8)',
 borderWidth: 1,
                             type: 'line',
                             fill: false