UI redisign

This commit is contained in:
ecki
2026-04-06 18:33:43 +02:00
parent 130563d644
commit 01f5c828b0
4 changed files with 83 additions and 21 deletions
+66 -4
View File
@@ -39,30 +39,59 @@ td {
}
button {
background: #3b82f6;
background: #2563eb;
color: white;
border: none;
border-radius: 4px;
padding: 6px 10px;
border: 1px solid #2563eb;
border-radius: 8px;
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;
+7 -7
View File
@@ -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>
+2 -2
View File
@@ -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 btn-danger" onclick="deleteSub(${s.id})">Delete</button>
<button class="btn-small" onclick='openSubEdit(${JSON.stringify(s)})'>Bearbeiten</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>
+8 -8
View File
@@ -37,8 +37,8 @@ window.loadResources = async function(){
tr.innerHTML = `
<td>
<button onclick="moveResource(${r.id}, 'up')">⬆</button>
<button onclick="moveResource(${r.id}, 'down')">⬇</button>
<button class="btn-small" onclick="moveResource(${r.id}, 'up')">⬆</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 onclick="deleteResource(${r.id})">Delete</button>
<button class="btn-small" onclick='openEdit(${JSON.stringify(r)})'>Bearbeiten</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})">
Delete
<button class="btn-danger" onclick="deleteIP(${ip.id}, ${resourceId})">
Loeschen
</button>
`