small ui changes to all lists, added red underscore

laravel/public/icons/ITProjekt_trash.svg

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 29.3.1, SVG Export Plug-In . SVG Version: 9.03 Build 55982)  -->
+<svg version="1.0" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#000000;stroke-width:44;stroke-linecap:round;stroke-linejoin:round;}
+	.st1{fill:none;stroke:#000000;stroke-width:44;}
+	.st2{fill:none;stroke:#000000;stroke-width:44;stroke-linecap:round;}
+	.st3{fill:none;stroke:#900B09;stroke-width:44;stroke-linecap:round;stroke-linejoin:round;}
+</style>
+<g>
+	<path class="st3" d="M416.2,187.7l-41.5,235.8c-3.5,19.9-20.8,34.4-40.9,34.4H166.1c-20.2,0-37.4-14.5-40.9-34.4L83.8,187.7"/>
+	<path class="st3" d="M437,125.3H320.1 M63,125.3h116.9 M179.9,125.3V83.8c0-23,18.6-41.6,41.6-41.6h57.1c23,0,41.6,18.6,41.6,41.6
+		v41.6 M179.9,125.3h140.3"/>
+</g>
+</svg>

laravel/resources/css/app.css

@@ -19,5 +19,29 @@ .btn-secondary {
 }
 
 .title{
-  @apply text-3xl font-bold mb-20
+  @apply text-3xl font-bold mb-3
+}
+
+.title-underscore{
+  @apply w-full mb-20 border-y-2 border-red-500
+}
+
+.table-custom {
+  @apply w-full border rounded-[14px] overflow-hidden
+}
+
+.table-custom th {
+  @apply bg-gray-300 text-left p-2 border
+}
+
+.table-custom td {
+  @apply p-2 border
+}
+
+.table-custom input{
+  @apply w-full border rounded-[10px] px-2 py-1
+}
+
+.btn-delete {
+  @apply bg-red-500 text-white px-2 py-1 rounded disabled:opacity-50
 }

laravel/resources/css/pages/adduser.css

-.autocomplete-container {
-    position: relative;
-    display: inline-block;
-    width: 300px;
-}
-
-input[type="text"] {
-    width: 100%;
-    padding: 8px;
-    box-sizing: border-box;
-}
-
-.autocomplete-items {
-    position: absolute;
-    z-index: 1;
-    border: 1px solid #d4d4d4;
-    max-height: 200px;
-    overflow-y: auto;
-    width: 100%;
-    background-color: #fff;
-    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
-}
-
-.autocomplete-items div {
-    padding: 8px;
-}
-
-.autocomplete-items div:focus {
-    background-color: #00aeff;
-    outline: none;
-}
-
-.autocomplete-items div:hover {
-    background-color: #ddd;
-}
+@import 'tailwindcss';
 
 .autocomplete-list {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
+  @apply w-full
 }
 
 .autocomplete-list li {
-    padding: 8px;
-    border: 1px solid #000000;
-    border-radius: 10px;
-    margin-bottom: 10px;
+  @apply w-full px-10 flex items-center justify-between p-2 border border-black rounded-[10px] mb-[10px] [word-spacing:5px];
 }
 
 .autocomplete-list li:hover {
-    background-color: #ddd;
-}
-
-.submit-button {
-    display: block;
-    margin: 10px auto;
-    padding: 10px 20px;
-    background-color: #ccc;
-    color: #fff;
-    border: none;
-    border-radius: 5px;
-    cursor: not-allowed;
-    text-align: center;
-}
-
-.submit-button.enabled {
-    background-color: #00aeff;
-    cursor: pointer;
+  @apply bg-[#ddd]
 }
\ No newline at end of file

laravel/resources/js/pages/adduser.js

@@ -52,9 +52,7 @@ function rebuildList() {
         listItem.textContent = `${user.sn}, ${user.givenname}, ${user.cn}, ${user.mail}`; // Use user.searchfield as the displayed value
 
         const removeButton = document.createElement("button");
-        removeButton.textContent = "Remove";
         removeButton.classList.add("cursor-pointer");
-        removeButton.style.marginLeft = "10px"; // Add some spacing
         removeButton.addEventListener("click", () => {
             const index = usersToAdd.indexOf(user);
             if (index > -1) {
@@ -63,6 +61,20 @@ function rebuildList() {
             }
         });
 
+    const img = document.createElement("img");
+    img.src = "/icons/ITProjekt_trash.svg";
+    img.alt = "Entfernen";
+    img.style.width = "20px";
+    img.style.height = "20px";
+    img.addEventListener("mouseenter", () => {
+      img.style.opacity = "0.7";
+    });
+    img.addEventListener("mouseleave", () => {
+      img.style.opacity = "1";
+    });
+
+    removeButton.appendChild(img);
+
         listItem.appendChild(removeButton); // Add the button to the list item
         list.appendChild(listItem); // Add the list item to the list
     });

laravel/resources/views/pages/addusers.blade.php

@@ -7,7 +7,10 @@
         @vite('resources/js/pages/adduser.js')
     @endpush
 
+    <div>
         <h2 class=title>Nutzer Hinzufügen</h2>
+        <div class=title-underscore></div>
+    </div>
 
     <div class="flex flex-col md:flex-row justify-center items-start gap-8 md:gap-16">
         <!-- Left: Hochschul-Mitglied suchen -->
@@ -21,9 +24,9 @@ class="w-full rounded-full border border-gray-300 py-2 px-4 text-lg focus:outlin
         </div>
 
         <!-- Divider -->
-        <div class="hidden md:flex items-center">
+        <div class="hidden md:flex items-center relative">
+            <div class="absolute -top-10 left-1/2 -translate-x-1/2 bg-white px-2 text-xl">oder</div>
             <div class="border-l-2 border-black h-96 mx-6"></div>
-            {{-- <span class="absolute bg-white px-2 -ml-3 text-lg">oder</span> --}}
         </div>
 
         <!-- Right: Manuelle Eingabe -->

laravel/resources/views/pages/dashboard.blade.php

 <x-layouts.app title="Dashboard">
+    <div>
         <h2 class="title">Dashboard</h2>
+        <div class=title-underscore></div>
+    </div>
     <p>This is your dashboard content.</p>
 </x-layouts.app>

laravel/resources/views/pages/flag.blade.php

 <x-layouts.app title="Flagverwaltung">
+    <div>
         <h2 class="title">Flags</h2>
+        <div class=title-underscore></div>
+    </div>
     <p>Manage your settings here.</p>
 </x-layouts.app>
\ No newline at end of file

laravel/resources/views/pages/home.blade.php

 <x-layouts.app title="Home">
+    <div>
         <h2 class="title">Homepage</h2>
+        <div class=title-underscore></div>
+    </div>
     <p>Please select an action from the left!</p>
 </x-layouts.app>
\ No newline at end of file

laravel/resources/views/pages/id-pools.blade.php

 <x-layouts.app title="Poolverwaltung">
+    <div>
         <h2 class="title">Poolverwaltung</h2>
+        <div class=title-underscore></div>
+    </div>
     <p>Hier Pools für IDs für Templates angeben</p>
 
     @if($errors->any())
         <div class="text-red-600 my-2">{{ $errors->first() }}</div>
     @endif
 
-    <table class="table-auto w-full mt-4 border">
+  <table class="table-custom">
     <thead>
-            <tr class="bg-gray-100 text-left">
-                <th class="p-2 border">Start</th>
-                <th class="p-2 border">End</th>
-                <th class="p-2 border">Used (%)</th>
-                <th class="p-2 border">Actions</th>
+        <tr>
+            <th>Start</th>
+            <th>End</th>
+            <th>Used (%)</th>
+            <th>Actions</th>
         </tr>
     </thead>
     <tbody>
         @foreach($pools as $pool)
             <tr>
-                    <td class="p-2 border">{{ $pool->start }}</td>
-                    <td class="p-2 border">{{ $pool->end }}</td>
-                    <td class="p-2 border">{{ $pool->usedCount().'/'.$pool->totalCount().' ('.number_format($pool->usagePercent(), 2).'%)   ' }}</td>
-                    <td class="p-2 border">
+                <td>{{ $pool->start }}</td>
+                <td>{{ $pool->end }}</td>
+                <td>
+                    {{ $pool->usedCount() . '/' . $pool->totalCount() . 
+                       ' (' . number_format($pool->usagePercent(), 2) . '%)' }}
+                </td>
+                <td>
                     <form method="POST" action="{{ route('id-pools.destroy', $pool) }}">
                         @csrf
                         @method('DELETE')
+
                         <button
-                                class="bg-red-500 text-white px-2 py-1 rounded disabled:opacity-50 {{ $pool->usagePercent() <= 0 ? 'hover:cursor-pointer' : '' }}"
+                            type="submit"
+                            class="btn-delete {{ $pool->usagePercent() <= 0 ? 'hover:cursor-pointer' : '' }}"
                             onclick="return confirm('Are you sure?')"
                             {{ $pool->usagePercent() > 0 ? 'disabled' : '' }}
                             @if($pool->usagePercent() > 0)
-                                    onmouseover="document.getElementById('error-{{ $pool->id }}').classList.remove('invisible');"
-                                    onmouseout="document.getElementById('error-{{ $pool->id }}').classList.add('invisible');"
-                                @endif>
+                                onmouseover="document.getElementById('tooltip-{{ $pool->id }}').classList.remove('invisible');"
+                                onmouseout="document.getElementById('tooltip-{{ $pool->id }}').classList.add('invisible');"
+                            @endif
+                        >
                             Delete
                         </button>
+
                         @if($pool->usagePercent() > 0)
-                                <div id="error-{{ $pool->id }}" role="tooltip" class="absolute z-10 invisible inline-block w-64 p-2 text-sm font-medium text-white bg-red-600 rounded-lg shadow-sm tooltip">
+                            <div
+                                id="tooltip-{{ $pool->id }}"
+                                role="tooltip"
+                                class="tooltip-content invisible"
+                            >
                                 Pool is in use, cannot be deleted.
-                                    <div class="tooltip-arrow" data-popper-arrow></div>
+                                <div class="tooltip-arrow"></div>
                             </div>
                         @endif
                     </form>
@@ -46,19 +60,29 @@ class="bg-red-500 text-white px-2 py-1 rounded disabled:opacity-50 {{ $pool->usa
             </tr>
         @endforeach
 
-            <!-- New Pool Row -->
+        <!-- Neue Pool-Zeile -->
         <tr>
             <form method="POST" action="{{ route('id-pools.store') }}">
                 @csrf
-                    <td class="p-2 border">
-                        <input type="number" name="start" class="w-full border px-2 py-1" required>
+                <td>
+                    <input
+                        type="number"
+                        name="start"
+                        required
+                    >
                 </td>
-                    <td class="p-2 border">
-                        <input type="number" name="end" class="w-full border px-2 py-1" required>
+                <td>
+                    <input
+                        type="number"
+                        name="end"
+                        required
+                    >
                 </td>
-                    <td class="p-2 border">-</td>
-                    <td class="p-2 border">
-                        <button class="bg-blue-500 text-white px-3 py-1 rounded">Add Pool</button>
+                <td>-</td>
+                <td>
+                    <button class="bg-blue-500 text-white px-3 py-1 rounded">
+                        Add Pool
+                    </button>
                 </td>
             </form>
         </tr>

laravel/resources/views/pages/repos/help.blade.php

 <x-layouts.app title="Repository Help">
+    <div>
         <h2 class="title">Repo-Help</h2>
+        <div class=title-underscore></div>
+    </div>
     <div class="mb-8">
         <h3 class="text-lg font-semibold mb-2">Tokeninformation</h3>
         <div class="bg-blue-50 border border-blue-200 rounded p-4 mb-4">

laravel/resources/views/pages/repos/index.blade.php

 <x-layouts.app title="Repositories">
+    <div>
         <h2 class="title">Repositories</h2>
+        <div class=title-underscore></div>
+    </div>
 
     @push('scripts')
      @vite('resources/js/pages/repos.js')

laravel/resources/views/pages/repos/scans.blade.php

 <x-layouts.app title="Scan Repositories">
+    <div>
         <h2 class="title">Scan for new Images</h2>
+        <div class=title-underscore></div>
+    </div>
 
     @push('scripts')
      @vite('resources/js/pages/scan-repos.js')

laravel/resources/views/pages/settings.blade.php

 <x-layouts.app title="Settings">
+    <div>
         <h2 class="title">Settings</h2>
+        <div class=title-underscore></div>
+    </div>
     <p>Manage your settings here.</p>
 </x-layouts.app>
\ No newline at end of file

laravel/resources/views/pages/vm-pool.blade.php

 <x-layouts.app title="VM Pool">
+    <div>
         <h2 class="title">VM Pool</h2>
+        <div class=title-underscore></div>
+    </div>
     <p>Hier kannst du deine virtuellen Maschinen verwalten.</p>
 </x-layouts.app>
\ No newline at end of file

laravel/resources/views/pages/vm-templates.blade.php

 <x-layouts.app title="Template VMs">
+    <div>
         <h2 class="title">Template VMs</h2>
+        <div class=title-underscore></div>
+    </div>
     <p>Manage your templates here.</p>
 
     @if($errors->any())
         <div class="text-red-600 my-2">{{ $errors->first() }}</div>
     @endif
 
-    <table class="table-auto w-full mt-4 border">
+    <table class="table-custom">
         <thead>
-            <tr class="bg-gray-100 text-left">
-                <th class="p-2 border">Name</th>
-                <th class="p-2 border">VM ID</th>
-                <th class="p-2 border">Repo</th>
+            <tr>
+                <th>Name</th>
+                <th>VM ID</th>
+                <th>Repo</th>
             </tr>
         </thead>
         <tbody>
             @foreach($templates as $template)
                 <tr>
-                    <td class="p-2 border">{{ $template->name }}</td>
-                    <td class="p-2 border">{{ $template->vm_id }}</td>
-                    <td class="p-2 border">{{ $template->repo->name ?? $template->repo->url }}</td>
-                    <td class="p-2 border">
+                    <td>{{ $template->name }}</td>
+                    <td>{{ $template->vm_id }}</td>
+                    <td>{{ $template->repo->name ?? $template->repo->url }}</td>
+                    <td>
                         <form method="POST" action="{{ route('templates.destroy', $template) }}">
                             @csrf
                             @method('DELETE')

laravel/resources/views/pages/workstation-pool.blade.php

 <x-layouts.app title="Workstation Pool">
+    <div>
         <h2 class="title">Workstation Pool</h2>
+        <div class=title-underscore></div>
+    </div>
     <p>Please select an action from the left!</p>
 </x-layouts.app>
\ No newline at end of file