stephan/wlkns-dev-standards
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui

Browse Source
This commit is contained in:
Stephan Wilkens
2025-12-20 15:53:19 +01:00
parent 769462c439
commit e9807a60d5
11 changed files with 1023 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
design/ui-skeleton.html Normal file
View File

@ -0,0 +1,115 @@
<!--
wlkns-dev-standards
UI Skeleton – Admin & Tool UI
Version: v1.3
-->
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>wlkns Admin UI</title>
<link rel="stylesheet" href="tokens.css" />
<link rel="stylesheet" href="tokens-dark.css" />
<link rel="stylesheet" href="components.css" />
<link rel="stylesheet" href="components-tables-alerts.css" />
<link rel="stylesheet" href="components-states.css" />
<link rel="stylesheet" href="layout-admin.css" />
<link rel="stylesheet" href="form-patterns.css" />
<style>
.theme-toggle {
margin-left: auto;
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
cursor: pointer;
}
.theme-toggle input {
cursor: pointer;
}
</style>
</head>
<body>
<div class="app">
<div class="topbar">
<div class="topbar-title">wlkns Admin</div>
<label class="theme-toggle">
<span>Dark</span>
<input type="checkbox" id="themeToggle" />
</label>
</div>
<aside class="sidebar">
<nav>
<a href="#" class="active">Dashboard</a>
<a href="#">Users</a>
<a href="#">Settings</a>
</nav>
</aside>
<main class="content">
<div class="bulk-bar">
<div class="count">2 ausgewählt</div>
<div class="actions">
<button class="button secondary">Export</button>
<button class="button danger">Löschen</button>
</div>
</div>
<div class="section">
<div class="search-bar">
<input type="text" placeholder="Search…" />
<button class="button primary">Search</button>
</div>
</div>
<div class="section" style="position: relative;">
<table>
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>Item A</td>
<td>Active</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>Item B</td>
<td>Inactive</td>
</tr>
</tbody>
</table>
</div>
<div class="alert warning">
Demo Alert – Konfiguration prüfen
</div>
</main>
</div>
<script>
const toggle = document.getElementById('themeToggle');
const root = document.documentElement;
toggle.addEventListener('change', () => {
root.dataset.theme = toggle.checked ? 'dark' : 'light';
});
</script>
</body>
</html>