Clean up D-D0b preview references
This commit is contained in:
1 parent
a18acf4900
commit
91180a82bf
6 files changed
+968
-49
No files matched your search
+7
-5
@@ -3,7 +3,7 @@ kind: final-planning
|
||||
ticket: D-D0b
|
||||
area: Layout Standards
|
||||
status: Abgeschlossen
|
||||
stand: 2026-07-02
|
||||
stand: 2026-07-03
|
||||
---
|
||||
|
||||
# D-D0b Layout Standards
|
||||
@@ -18,11 +18,13 @@ Source of Truth fuer spaetere Screen-Arbeit:
|
||||
- [Subframe UI Standards / Entscheidungen](<../../../04 Standards/Subframe UI Standards/02_Entscheidungen.md>)
|
||||
- [D-D0b Backlog](<D-D0b Backlog.md>)
|
||||
|
||||
Lokale Vorschau:
|
||||
HTML-Preview:
|
||||
|
||||
- Versioniertes Ticket-Artefakt: [D-D0b Layout Preview](<../../../Tickets/Fertige Tickets/Assets/D-D0b-Layout-Preview.html>)
|
||||
- `99 Temp/D-D0b Layout Preview/index.html`
|
||||
- Die Preview bleibt als lokale Arbeitskopie erhalten, ist aber kein Source of Truth.
|
||||
- Versionierte Referenz: [D-D0b Layout Preview](<Preview/index.html>)
|
||||
- Separate Full-Page-Vorschau: [D-D0b Full Page Preview](<Preview/preview.html>)
|
||||
- Lokale Arbeitskopie fuer Self-Hosting: `99 Temp/D-D0b Layout Preview/index.html`
|
||||
- Die versionierte Preview liegt bewusst im D-D0b-Ordner, damit sie zusammen mit den Layout-Entscheidungen auffindbar bleibt.
|
||||
- Die Preview ist visuelle Referenz, aber kein Source of Truth.
|
||||
- `99 Temp/` ist per `.gitignore` ausgeschlossen.
|
||||
- Wenn Regeln spaeter abweichen, gelten die Markdown-Standards, nicht die HTML-Preview.
|
||||
|
||||
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,885 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>D-D0b Full Page Preview</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #f6f8fa;
|
||||
--surface: #ffffff;
|
||||
--surface-subtle: #f1f4f7;
|
||||
--border: #dce3ea;
|
||||
--border-strong: #b8c4cf;
|
||||
--text: #172635;
|
||||
--muted: #5c6f82;
|
||||
--muted-2: #74879a;
|
||||
--primary: #2458d3;
|
||||
--danger: #b42318;
|
||||
--success: #147a46;
|
||||
--warning: #9a5b00;
|
||||
--radius: 8px;
|
||||
--control-h: 40px;
|
||||
font-family:
|
||||
Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
|
||||
"Segoe UI", sans-serif;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.preview-page {
|
||||
--preview-page-pad: 24px;
|
||||
--preview-card-pad: 16px;
|
||||
--preview-gap: 16px;
|
||||
--preview-section-gap: 24px;
|
||||
--preview-editor-pad: 16px;
|
||||
--preview-shell-sidebar: 232px;
|
||||
min-height: 100vh;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.preview-page:has(#density-compact:checked) {
|
||||
--preview-page-pad: 24px;
|
||||
--preview-card-pad: 16px;
|
||||
--preview-gap: 12px;
|
||||
--preview-section-gap: 24px;
|
||||
--preview-editor-pad: 16px;
|
||||
}
|
||||
|
||||
.preview-page:has(#density-standard:checked) {
|
||||
--preview-page-pad: 24px;
|
||||
--preview-card-pad: 16px;
|
||||
--preview-gap: 16px;
|
||||
--preview-section-gap: 24px;
|
||||
--preview-editor-pad: 16px;
|
||||
}
|
||||
|
||||
.preview-page:has(#density-editor:checked) {
|
||||
--preview-page-pad: 24px;
|
||||
--preview-card-pad: 16px;
|
||||
--preview-gap: 16px;
|
||||
--preview-section-gap: 24px;
|
||||
--preview-editor-pad: 32px;
|
||||
}
|
||||
|
||||
.preview-config {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
padding: 16px 24px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.preview-config-head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.preview-config-copy {
|
||||
max-width: 760px;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 8px;
|
||||
color: var(--muted-2);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.preview-config h1 {
|
||||
font-size: 24px;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.section-desc {
|
||||
margin-top: 6px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.preview-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 4px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.control-group legend {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.segmented-option {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 32px;
|
||||
padding: 0 10px;
|
||||
border-radius: 6px;
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
font-weight: 650;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.segmented-option input {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.segmented-option:has(input:checked) {
|
||||
background: var(--text);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: var(--control-h);
|
||||
padding: 0 16px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 6px;
|
||||
background: var(--primary);
|
||||
color: #fff;
|
||||
font-weight: 650;
|
||||
text-decoration: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.button.secondary {
|
||||
border-color: var(--border-strong);
|
||||
background: #fff;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.button.sm {
|
||||
min-height: 32px;
|
||||
padding: 0 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.preview-values {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
background: var(--surface-subtle);
|
||||
}
|
||||
|
||||
.preview-values-head {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.small {
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.value-set {
|
||||
display: none;
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.preview-page:has(#shell-on:checked) .values-shell-on,
|
||||
.preview-page:has(#shell-off:checked) .values-shell-off,
|
||||
.preview-page:has(#density-standard:checked) .values-density-standard,
|
||||
.preview-page:has(#density-compact:checked) .values-density-compact,
|
||||
.preview-page:has(#density-editor:checked) .values-density-editor {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.value-cell {
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
min-height: 56px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.value-cell span {
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.value-cell strong {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.app-preview {
|
||||
display: grid;
|
||||
grid-template-columns: var(--preview-shell-sidebar) minmax(0, 1fr);
|
||||
min-height: calc(100vh - 260px);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.preview-page:has(#shell-off:checked) .app-preview {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.preview-page:has(#shell-off:checked) .preview-sidebar,
|
||||
.preview-page:has(#shell-off:checked) .preview-app-topbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.preview-sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
border-right: 1px solid var(--border);
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.workspace-switcher {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.workspace-mark {
|
||||
display: grid;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
place-items: center;
|
||||
border-radius: 8px;
|
||||
background: var(--text);
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.workspace-copy {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.workspace-copy strong,
|
||||
.workspace-copy span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.workspace-copy span {
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.preview-nav {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.preview-nav a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-height: 36px;
|
||||
padding: 0 10px;
|
||||
border-radius: 6px;
|
||||
color: var(--muted);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.preview-nav a.active {
|
||||
background: #fff;
|
||||
color: var(--text);
|
||||
box-shadow: 0 0 0 1px var(--border);
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1px solid currentColor;
|
||||
border-radius: 4px;
|
||||
opacity: 0.68;
|
||||
}
|
||||
|
||||
.preview-app-main {
|
||||
min-width: 0;
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
.preview-app-topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
min-height: 56px;
|
||||
padding: 0 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.preview-search {
|
||||
width: min(420px, 100%);
|
||||
min-height: var(--control-h);
|
||||
padding: 0 12px;
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.preview-user-area {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.avatar-dot {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(135deg, #dbe4ff, #bdd8ff);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.preview-page-content {
|
||||
display: grid;
|
||||
gap: var(--preview-gap);
|
||||
padding: var(--preview-page-pad);
|
||||
}
|
||||
|
||||
.preview-page-head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.preview-page-head h2 {
|
||||
font-size: 24px;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.preview-page-actions,
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.preview-stat-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: var(--preview-gap);
|
||||
}
|
||||
|
||||
.preview-card {
|
||||
padding: var(--preview-card-pad);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.preview-card h3 {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.preview-editor-card {
|
||||
padding: var(--preview-editor-pad);
|
||||
}
|
||||
|
||||
.preview-meta {
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
margin-top: 8px;
|
||||
font-size: 24px;
|
||||
font-weight: 750;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.preview-workspace-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.6fr) minmax(320px, 0.9fr);
|
||||
gap: var(--preview-gap);
|
||||
}
|
||||
|
||||
.preview-list {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.preview-list-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
min-height: 48px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.preview-list-row strong {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 24px;
|
||||
padding: 0 8px;
|
||||
border-radius: 999px;
|
||||
background: #e8f6ee;
|
||||
color: var(--success);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.pill.warning {
|
||||
background: #fff2d6;
|
||||
color: var(--warning);
|
||||
}
|
||||
|
||||
.preview-table {
|
||||
overflow: hidden;
|
||||
margin-top: 12px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
height: 52px;
|
||||
padding: 0 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
th {
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
tr:last-child td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.preview-editor-body {
|
||||
display: grid;
|
||||
grid-template-columns: 180px minmax(0, 1fr);
|
||||
gap: var(--preview-gap);
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.preview-editor-side {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.preview-editor-side span {
|
||||
padding: 8px 10px;
|
||||
border-radius: 6px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.preview-editor-side span.active {
|
||||
background: var(--surface-subtle);
|
||||
color: var(--text);
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.form {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.field {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
label {
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
width: 100%;
|
||||
min-height: var(--control-h);
|
||||
padding: 0 12px;
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 88px;
|
||||
padding-top: 10px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.preview-config-head,
|
||||
.value-set,
|
||||
.preview-stat-grid,
|
||||
.preview-workspace-grid,
|
||||
.preview-editor-body {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.preview-config-head {
|
||||
display: grid;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="preview-page">
|
||||
<section class="preview-config">
|
||||
<div class="preview-config-head">
|
||||
<div class="preview-config-copy">
|
||||
<p class="eyebrow">Full-page preview</p>
|
||||
<h1>D-D0b Preview Page</h1>
|
||||
<p class="section-desc">
|
||||
Eigene Full-Page-Vorschau fuer App-Shell-Breite, Page Padding,
|
||||
Card Padding und Grid-Gaps. Diese Seite ist bewusst von der
|
||||
D-Entscheidungsseite getrennt.
|
||||
</p>
|
||||
</div>
|
||||
<a class="button sm secondary" href="index.html#d02">Zurueck zu D02</a>
|
||||
</div>
|
||||
|
||||
<div class="preview-controls">
|
||||
<fieldset class="control-group">
|
||||
<legend>App Shell</legend>
|
||||
<label class="segmented-option">
|
||||
<input id="shell-on" type="radio" name="shell" checked />
|
||||
Mit App Shell
|
||||
</label>
|
||||
<label class="segmented-option">
|
||||
<input id="shell-off" type="radio" name="shell" />
|
||||
Ohne App Shell
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
<fieldset class="control-group">
|
||||
<legend>Layout-Dichte</legend>
|
||||
<label class="segmented-option">
|
||||
<input id="density-standard" type="radio" name="density" checked />
|
||||
Admin Standard
|
||||
</label>
|
||||
<label class="segmented-option">
|
||||
<input id="density-compact" type="radio" name="density" />
|
||||
Kompakt
|
||||
</label>
|
||||
<label class="segmented-option">
|
||||
<input id="density-editor" type="radio" name="density" />
|
||||
Dialog 32px
|
||||
</label>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<div class="preview-values">
|
||||
<div class="preview-values-head">
|
||||
<strong>Aktive Layout-Daten</strong>
|
||||
<span class="small">Diese Werte aendern sich durch die Umschalter.</span>
|
||||
</div>
|
||||
|
||||
<div class="value-set values-shell-on">
|
||||
<div class="value-cell"><span>Shell</span><strong>An</strong></div>
|
||||
<div class="value-cell"><span>Sidebar</span><strong>232px</strong></div>
|
||||
<div class="value-cell"><span>Topbar</span><strong>56px sichtbar</strong></div>
|
||||
<div class="value-cell"><span>Content-Breite</span><strong>Viewport minus 232px</strong></div>
|
||||
<div class="value-cell"><span>Bewertung</span><strong>Produktansicht</strong></div>
|
||||
</div>
|
||||
|
||||
<div class="value-set values-shell-off">
|
||||
<div class="value-cell"><span>Shell</span><strong>Aus</strong></div>
|
||||
<div class="value-cell"><span>Sidebar</span><strong>0px</strong></div>
|
||||
<div class="value-cell"><span>Topbar</span><strong>ausgeblendet</strong></div>
|
||||
<div class="value-cell"><span>Content-Breite</span><strong>volle Preview-Breite</strong></div>
|
||||
<div class="value-cell"><span>Bewertung</span><strong>Canvas/Modal-Kontext</strong></div>
|
||||
</div>
|
||||
|
||||
<div class="value-set values-density-standard">
|
||||
<div class="value-cell"><span>Modus</span><strong>Admin Standard</strong></div>
|
||||
<div class="value-cell"><span>Page Padding</span><strong>24px</strong></div>
|
||||
<div class="value-cell"><span>Card Padding</span><strong>16px</strong></div>
|
||||
<div class="value-cell"><span>Grid/Card Gap</span><strong>16px</strong></div>
|
||||
<div class="value-cell"><span>Detail-/Editor Padding</span><strong>16px</strong></div>
|
||||
</div>
|
||||
|
||||
<div class="value-set values-density-compact">
|
||||
<div class="value-cell"><span>Modus</span><strong>Kompakt</strong></div>
|
||||
<div class="value-cell"><span>Page Padding</span><strong>24px min</strong></div>
|
||||
<div class="value-cell"><span>Card Padding</span><strong>16px</strong></div>
|
||||
<div class="value-cell"><span>Grid/Card Gap</span><strong>12px</strong></div>
|
||||
<div class="value-cell"><span>Detail-/Editor Padding</span><strong>16px</strong></div>
|
||||
</div>
|
||||
|
||||
<div class="value-set values-density-editor">
|
||||
<div class="value-cell"><span>Modus</span><strong>Dialog 32px</strong></div>
|
||||
<div class="value-cell"><span>Page Padding</span><strong>24px</strong></div>
|
||||
<div class="value-cell"><span>Card Padding</span><strong>16px</strong></div>
|
||||
<div class="value-cell"><span>Grid/Card Gap</span><strong>16px</strong></div>
|
||||
<div class="value-cell"><span>Dialog Padding</span><strong>32px Variante</strong></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="app-preview">
|
||||
<aside class="preview-sidebar">
|
||||
<div class="workspace-switcher">
|
||||
<div class="workspace-mark">HG</div>
|
||||
<div class="workspace-copy">
|
||||
<strong>HiveGrid Demo</strong>
|
||||
<span>Workspace</span>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="preview-nav" aria-label="Preview navigation">
|
||||
<a href="#" class="active"><span class="nav-icon"></span>Overview</a>
|
||||
<a href="#"><span class="nav-icon"></span>Customers</a>
|
||||
<a href="#"><span class="nav-icon"></span>Projects</a>
|
||||
<a href="#"><span class="nav-icon"></span>Tasks</a>
|
||||
<a href="#"><span class="nav-icon"></span>Reports</a>
|
||||
<a href="#"><span class="nav-icon"></span>Settings</a>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<div class="preview-app-main">
|
||||
<header class="preview-app-topbar">
|
||||
<input class="preview-search" value="Search anything" aria-label="Search anything" />
|
||||
<div class="preview-user-area">
|
||||
<span class="button sm secondary">New</span>
|
||||
<span class="button sm secondary">Export</span>
|
||||
<div class="avatar-dot" aria-hidden="true"></div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="preview-page-content">
|
||||
<div class="preview-page-head">
|
||||
<div>
|
||||
<p class="eyebrow">Workspace overview</p>
|
||||
<h2>Operations dashboard</h2>
|
||||
<p class="section-desc">
|
||||
Beispielseite fuer App-Shell-Breite, Page Padding,
|
||||
Card-Padding und Grid-Gaps im laufenden Produktkontext.
|
||||
</p>
|
||||
</div>
|
||||
<div class="preview-page-actions">
|
||||
<span class="button secondary">Filter</span>
|
||||
<span class="button">Create task</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="preview-stat-grid">
|
||||
<div class="preview-card">
|
||||
<p class="small">Open leads</p>
|
||||
<div class="stat-value">128</div>
|
||||
<p class="preview-meta">+12 this week</p>
|
||||
</div>
|
||||
<div class="preview-card">
|
||||
<p class="small">Active projects</p>
|
||||
<div class="stat-value">42</div>
|
||||
<p class="preview-meta">8 need review</p>
|
||||
</div>
|
||||
<div class="preview-card">
|
||||
<p class="small">Team workload</p>
|
||||
<div class="stat-value">76%</div>
|
||||
<p class="preview-meta">Balanced</p>
|
||||
</div>
|
||||
<div class="preview-card">
|
||||
<p class="small">Pending approvals</p>
|
||||
<div class="stat-value">9</div>
|
||||
<p class="preview-meta">3 overdue</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="preview-workspace-grid">
|
||||
<section class="preview-card">
|
||||
<h3>Recent work</h3>
|
||||
<p class="preview-meta">Tasks, customers and approvals in one dense page area.</p>
|
||||
<div class="preview-list">
|
||||
<div class="preview-list-row">
|
||||
<div>
|
||||
<strong>Review onboarding workspace</strong>
|
||||
<span class="preview-meta">Assigned to Admin Team</span>
|
||||
</div>
|
||||
<span class="pill warning">Due today</span>
|
||||
</div>
|
||||
<div class="preview-list-row">
|
||||
<div>
|
||||
<strong>Prepare customer import</strong>
|
||||
<span class="preview-meta">CRM setup</span>
|
||||
</div>
|
||||
<span class="pill">Active</span>
|
||||
</div>
|
||||
<div class="preview-list-row">
|
||||
<div>
|
||||
<strong>Approve role changes</strong>
|
||||
<span class="preview-meta">Security settings</span>
|
||||
</div>
|
||||
<span class="pill warning">Review</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<aside class="preview-card">
|
||||
<h3>Workspace health</h3>
|
||||
<p class="preview-meta">
|
||||
Kompakte Settings- und Statusflaeche mit denselben
|
||||
D02-Basiswerten wie die Standardseite.
|
||||
</p>
|
||||
<div class="preview-list">
|
||||
<div class="preview-list-row"><span>Members</span><strong>24</strong></div>
|
||||
<div class="preview-list-row"><span>2FA coverage</span><strong>91%</strong></div>
|
||||
<div class="preview-list-row"><span>Open invites</span><strong>3</strong></div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<section class="preview-card">
|
||||
<div class="preview-page-head">
|
||||
<div>
|
||||
<h3>Employee access</h3>
|
||||
<p class="preview-meta">Table area for judging page width inside and outside the shell.</p>
|
||||
</div>
|
||||
<div class="toolbar">
|
||||
<input style="width: 220px" value="Search employees" />
|
||||
<span class="button sm secondary">Role</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="preview-table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Role</th>
|
||||
<th>Department</th>
|
||||
<th>Status</th>
|
||||
<th style="text-align: right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>David Bertram</td>
|
||||
<td>Admin</td>
|
||||
<td>Operations</td>
|
||||
<td><span class="pill">Active</span></td>
|
||||
<td style="text-align: right">...</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Anna Keller</td>
|
||||
<td>Finance Lead</td>
|
||||
<td>Finance</td>
|
||||
<td><span class="pill">Active</span></td>
|
||||
<td style="text-align: right">...</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Max Hoffmann</td>
|
||||
<td>Employee</td>
|
||||
<td>Support</td>
|
||||
<td><span class="pill warning">Pending</span></td>
|
||||
<td style="text-align: right">...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="preview-card preview-editor-card">
|
||||
<h3>Dialog 32px Variante</h3>
|
||||
<p class="preview-meta">
|
||||
Dieser Modus macht nur diese grosse Arbeitsflaeche innen
|
||||
groesser. Das steht fuer die groessere Subframe-Dialog-Variante,
|
||||
nicht fuer frei gesetztes Padding auf normalen Surfaces.
|
||||
</p>
|
||||
<div class="preview-editor-body">
|
||||
<div class="preview-editor-side">
|
||||
<span class="active">Role</span>
|
||||
<span>Contacts</span>
|
||||
<span>Projects</span>
|
||||
<span>Reports</span>
|
||||
</div>
|
||||
<div class="form">
|
||||
<div class="field">
|
||||
<label>Role name</label>
|
||||
<input value="Operations Lead" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Description</label>
|
||||
<textarea>Can review operations, assign team tasks and manage project handoffs.</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user