Under construction page and dynamic profile loading

frontend/assets/css/under-construction.css

@@ -0,0 +1,24 @@
+.construction-icon-wrapper {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 80px;
+    height: 80px;
+    background: rgba(59, 130, 246, 0.1); /* Nutzt die var(--accent) Transparenz */
+    border: 1px solid rgba(59, 130, 246, 0.2);
+    border-radius: 50%;
+    margin-bottom: 1.5rem;
+}
+
+.gear-icon {
+    animation: gearRotate 8s linear infinite;
+}
+
+@keyframes gearRotate {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}

frontend/assets/js/api.js

@@ -39,6 +39,8 @@ document.addEventListener("DOMContentLoaded", () => {
     if (document.getElementById('items-table-body')) loadItems();
     if (document.getElementById('locations-table-body')) loadLocations();
     if (document.getElementById('projects-table-body')) loadProjects();
+
+    loadProfile();
 });
 
 function closeModal(id) {
@@ -464,4 +466,19 @@ async function openDashboardModal(url, title, dataKey) {
     } catch (e) {
         tbody.innerHTML = '<tr><td colspan="2" style="color:var(--error); text-align:center; padding:1.5rem;">Failed to load data.</td></tr>';
     }
+}
+
+// ---- PROFILE ----
+async function loadProfile() {
+    const avatar = document.getElementById("avatar");
+    const username = document.getElementById('username');
+
+    try {
+        const data = await apiRequest('/api/profile');
+
+        avatar.innerText = data.username[0].toLocaleUpperCase();
+        username.innerText = data.username;
+    } catch (e) {
+        username.innerHTML = '<tr><td colspan="2" style="color:var(--error); text-align:center; padding:1.5rem;">Failed to load data.</td></tr>';
+    }
 }