116 lines
2.6 KiB
HTML
116 lines
2.6 KiB
HTML
<!--
|
||
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>
|