UI redisign

backend/public/css/style.css

@@ -39,30 +39,59 @@ td {
 }
 
 button {
-    background: #3b82f6;
+    background: #2563eb;
     color: white;
-    border: none;
+    border: 1px solid #2563eb;
-    border-radius: 4px;
+    border-radius: 8px;
-    padding: 6px 10px;
+    padding: 7px 12px;
     margin: 2px;
     cursor: pointer;
+    font-weight: 600;
+    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
 }
 
 button:hover {
     background: #1e40af;
+    border-color: #1e40af;
+    transform: translateY(-1px);
 }
 
 button.btn-small{
     font-size:11px;
     padding:4px 8px;
+    border-radius:999px;
+}
+
+button.btn-secondary{
+    background:#e2e8f0;
+    color:#0f172a;
+    border-color:#cbd5e1;
+}
+
+button.btn-secondary:hover{
+    background:#cbd5e1;
+    border-color:#94a3b8;
 }
 
 button.btn-danger{
     background:#dc2626;
+    border-color:#dc2626;
 }
 
 button.btn-danger:hover{
     background:#b91c1c;
+    border-color:#b91c1c;
+}
+
+button.btn-ghost{
+    background:transparent;
+    color:#1e3a8a;
+    border-color:#bfdbfe;
+}
+
+button.btn-ghost:hover{
+    background:#dbeafe;
+    border-color:#93c5fd;
 }
 
 input, textarea {
@@ -346,6 +375,39 @@ body.dark .modal-meta{
     color:#94a3b8;
 }
 
+body.dark button{
+    background:#2563eb;
+    border-color:#2563eb;
+    color:white;
+}
+
+body.dark button:hover{
+    background:#1d4ed8;
+    border-color:#1d4ed8;
+}
+
+body.dark button.btn-secondary{
+    background:#334155;
+    color:#e5e7eb;
+    border-color:#475569;
+}
+
+body.dark button.btn-secondary:hover{
+    background:#475569;
+    border-color:#64748b;
+}
+
+body.dark button.btn-ghost{
+    background:transparent;
+    color:#bfdbfe;
+    border-color:#334155;
+}
+
+body.dark button.btn-ghost:hover{
+    background:#1e293b;
+    border-color:#475569;
+}
+
 body.dark .domain-name,
 body.dark .subdomain-name{
     color:#f8fafc;

backend/public/index.html

@@ -14,7 +14,7 @@
 
 <h1>Ressourcen Verwaltung</h1>
 
-<button onclick="toggleDarkMode()">🌙 Dark Mode</button>
+<button class="btn-secondary" onclick="toggleDarkMode()">🌙 Dark Mode</button>
 
 <div id="lastUpdate" style="margin-bottom:10px;color:#555;">
 Letztes Update: -
@@ -216,7 +216,7 @@ Domains jährlich: <span id="costDomain">0</span> €<br>
 <br><br>
 
 <button onclick="saveResource()">Speichern</button>
-<button onclick="closeModal()">Abbrechen</button>
+<button class="btn-secondary" onclick="closeModal()">Abbrechen</button>
 
 </div>
 
@@ -238,7 +238,7 @@ Domains jährlich: <span id="costDomain">0</span> €<br>
 
 
     <button id="ipSaveBtn" onclick="saveIP()">Add</button>
-    <button id="ipCancelBtn" onclick="cancelIPEdit()" style="display:none">
+    <button class="btn-secondary" id="ipCancelBtn" onclick="cancelIPEdit()" style="display:none">
         Cancel
     </button>
 </div>
@@ -247,7 +247,7 @@ Domains jährlich: <span id="costDomain">0</span> €<br>
 
 <br><br>
 
-<button onclick="closeIPModal()">Close</button>
+<button class="btn-secondary" onclick="closeIPModal()">Close</button>
 
 </div>
 
@@ -279,7 +279,7 @@ Domains jährlich: <span id="costDomain">0</span> €<br>
 <br><br>
 
 <button id="domainSaveBtn" onclick="saveDomain()">Save</button>
-<button onclick="closeDomainModal()">Cancel</button>
+<button class="btn-secondary" onclick="closeDomainModal()">Cancel</button>
 
 </div>
 
@@ -293,7 +293,7 @@ Domains jährlich: <span id="costDomain">0</span> €<br>
 
         <br>
 
-        <button onclick="closeServerDetail()">Schließen</button>
+        <button class="btn-secondary" onclick="closeServerDetail()">Schließen</button>
 
     </div>
 
@@ -317,7 +317,7 @@ Domains jährlich: <span id="costDomain">0</span> €<br>
 <br><br>
 
 <button id="subdomainSaveBtn" onclick="saveSubdomain()">Save</button>
-<button onclick="closeSubModal()">Cancel</button>
+<button class="btn-secondary" onclick="closeSubModal()">Cancel</button>
 
 </div>
 

backend/public/js/domains.js

@@ -94,8 +94,8 @@ window.loadDomains = async function(){
                                 </div>
                             </div>
                             <div class="domain-actions">
-                                <button class="btn-small" onclick='openSubEdit(${JSON.stringify(s)})'>Edit</button>
+                                <button class="btn-small" onclick='openSubEdit(${JSON.stringify(s)})'>Bearbeiten</button>
-                                <button class="btn-small btn-danger" onclick="deleteSub(${s.id})">Delete</button>
+                                <button class="btn-small btn-danger" onclick="deleteSub(${s.id})">Loeschen</button>
                             </div>
                         </div>
                         <div id="subdns-${s.id}" style="margin-top:8px">...</div>

backend/public/js/resources.js

@@ -37,8 +37,8 @@ window.loadResources = async function(){
 
         tr.innerHTML = `
         <td>
-        <button onclick="moveResource(${r.id}, 'up')">⬆</button>
+        <button class="btn-small" onclick="moveResource(${r.id}, 'up')">⬆</button>
-        <button onclick="moveResource(${r.id}, 'down')">⬇</button>
+        <button class="btn-small" onclick="moveResource(${r.id}, 'down')">⬇</button>
         </td>
         <td>
         <span style="cursor:pointer;color:#1e3a8a;font-weight:bold"
@@ -66,12 +66,12 @@ window.loadResources = async function(){
         <td>
         ${ips}
         <br>
-        <button type="button" onclick="openIPManager(${r.id})">IPs</button>
+        <button class="btn-small btn-secondary" type="button" onclick="openIPManager(${r.id})">IPs</button>
         </td>
 
         <td>
-        <button onclick='openEdit(${JSON.stringify(r)})'>Edit</button>
+        <button class="btn-small" onclick='openEdit(${JSON.stringify(r)})'>Bearbeiten</button>
-        <button onclick="deleteResource(${r.id})">Delete</button>
+        <button class="btn-small btn-danger" onclick="deleteResource(${r.id})">Loeschen</button>
         </td>
         `
 
@@ -291,11 +291,11 @@ window.loadIPs = async function(resourceId){
             </span>
 
             <button onclick="editIP(${ip.id}, '${ip.ip}', '${ip.type || ""}', '${ip.comment || ""}')">
-                Edit
+                Bearbeiten
             </button>
 
-            <button onclick="deleteIP(${ip.id}, ${resourceId})">
+            <button class="btn-danger" onclick="deleteIP(${ip.id}, ${resourceId})">
-                Delete
+                Loeschen
             </button>
         `