1141 lines
34 KiB
HTML
1141 lines
34 KiB
HTML
<!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-page:has(#rule-hints:not(:checked)) .rule-badge,
|
|
.preview-page:has(#rule-hints:not(:checked)) .rule-callout {
|
|
display: none;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.preview-values > summary.preview-values-head {
|
|
cursor: pointer;
|
|
list-style: none;
|
|
}
|
|
|
|
.preview-values > summary.preview-values-head::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.preview-values > summary.preview-values-head::after {
|
|
content: "Auf/zu";
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
font-weight: 650;
|
|
}
|
|
|
|
.preview-values:not([open]) {
|
|
gap: 0;
|
|
}
|
|
|
|
.preview-values:not([open]) .value-set {
|
|
display: none !important;
|
|
}
|
|
|
|
.rule-scope {
|
|
position: relative;
|
|
}
|
|
|
|
.rule-badge {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
width: max-content;
|
|
min-height: 24px;
|
|
padding: 0 8px;
|
|
border: 1px solid #b8c7ff;
|
|
border-radius: 999px;
|
|
background: #eef3ff;
|
|
color: #2443a8;
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.rule-badge::before {
|
|
content: "->";
|
|
font-size: 10px;
|
|
}
|
|
|
|
.rule-badge::after {
|
|
content: attr(data-tooltip);
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: calc(100% + 8px);
|
|
z-index: 40;
|
|
display: none;
|
|
width: min(300px, 72vw);
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
box-shadow: 0 12px 32px -8px rgb(15 23 42 / 0.22);
|
|
color: var(--text);
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
line-height: 1.45;
|
|
white-space: normal;
|
|
}
|
|
|
|
.rule-badge:hover::after,
|
|
.rule-badge:focus-visible::after {
|
|
display: block;
|
|
}
|
|
|
|
.rule-anchor {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
z-index: 8;
|
|
}
|
|
|
|
.preview-page-content > .rule-anchor {
|
|
top: var(--preview-page-pad);
|
|
right: var(--preview-page-pad);
|
|
}
|
|
|
|
.rule-callout {
|
|
display: grid;
|
|
gap: 8px;
|
|
margin-top: 12px;
|
|
padding: 12px 14px;
|
|
border: 1px solid #c7d2fe;
|
|
border-radius: 8px;
|
|
background: #f7f9ff;
|
|
color: #294268;
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.standards-drawer {
|
|
position: fixed;
|
|
right: 20px;
|
|
bottom: 20px;
|
|
z-index: 30;
|
|
width: min(420px, calc(100vw - 40px));
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
background: #fff;
|
|
box-shadow: 0 16px 40px -14px rgb(15 23 42 / 0.3);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.standards-drawer summary {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
min-height: 48px;
|
|
padding: 0 16px;
|
|
cursor: pointer;
|
|
font-weight: 800;
|
|
list-style: none;
|
|
}
|
|
|
|
.standards-drawer summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.standards-drawer summary::after {
|
|
content: "Auf/zu";
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
font-weight: 650;
|
|
}
|
|
|
|
.standards-drawer-body {
|
|
display: grid;
|
|
gap: 12px;
|
|
max-height: min(520px, calc(100vh - 120px));
|
|
padding: 0 16px 16px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.standards-drawer-note {
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.standards-rule-list {
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.standards-rule {
|
|
display: grid;
|
|
gap: 3px;
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
background: var(--surface-subtle);
|
|
color: var(--text);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.standards-rule strong {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.standards-rule span {
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.standards-drawer {
|
|
right: 12px;
|
|
bottom: 12px;
|
|
width: calc(100vw - 24px);
|
|
}
|
|
}
|
|
</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>
|
|
|
|
<fieldset class="control-group">
|
|
<legend>Hilfen</legend>
|
|
<label class="segmented-option">
|
|
<input id="rule-hints" type="checkbox" checked />
|
|
Rule Hints
|
|
</label>
|
|
</fieldset>
|
|
</div>
|
|
|
|
<details class="preview-values">
|
|
<summary class="preview-values-head">
|
|
<strong>Aktive Layout-Daten</strong>
|
|
<span class="small">Diese Werte aendern sich durch die Umschalter.</span>
|
|
</summary>
|
|
|
|
<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>
|
|
</details>
|
|
</section>
|
|
|
|
<details class="standards-drawer">
|
|
<summary>Layout-Standards</summary>
|
|
<div class="standards-drawer-body">
|
|
<p class="standards-drawer-note">
|
|
Klick springt zur Regel auf der D-D0b-Entscheidungsseite. Die Badges
|
|
in der Preview zeigen, wo die Regel im Beispiel angewendet wird.
|
|
</p>
|
|
<div class="standards-rule-list">
|
|
<a class="standards-rule" href="index.html#d01">
|
|
<strong>D01 Grundraster</strong>
|
|
<span>Erlaubte Werte: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96.</span>
|
|
</a>
|
|
<a class="standards-rule" href="index.html#d02">
|
|
<strong>D02 Page/Card/Grid</strong>
|
|
<span>Page 24px, Card/Surface 16px, Grid Gap 16px, kompakt lokal 12px.</span>
|
|
</a>
|
|
<a class="standards-rule" href="index.html#d03">
|
|
<strong>D03 Text-Rhythmus</strong>
|
|
<span>0px / 24px / 0px / 12px mit 150%-Texttokens fuer Beschreibungen.</span>
|
|
</a>
|
|
<a class="standards-rule" href="index.html#d04">
|
|
<strong>D04 Button Ownership</strong>
|
|
<span>Button Default/Medium/36px; Button-Padding kommt aus der Komponente.</span>
|
|
</a>
|
|
<a class="standards-rule" href="index.html#d05">
|
|
<strong>D05 Forms</strong>
|
|
<span>Komplette Field-Komponenten stehen standardmaessig 16px auseinander.</span>
|
|
</a>
|
|
<a class="standards-rule" href="index.html#d06">
|
|
<strong>D06 Table Ownership</strong>
|
|
<span>Tabellen-Dichte kommt aus der Table-Komponente; Carbon nur als Referenz.</span>
|
|
</a>
|
|
<a class="standards-rule" href="index.html#d07">
|
|
<strong>D07 Dialog Sizes</strong>
|
|
<span>XS 420, S 560, M 720, L 1200; Fullscreen max 2512px.</span>
|
|
</a>
|
|
<a class="standards-rule" href="index.html#d08">
|
|
<strong>D08 Dialog Internal Gaps</strong>
|
|
<span>Title 8px, Field 16px, Section 24px, Footer Button 8px.</span>
|
|
</a>
|
|
<a class="standards-rule" href="index.html#d09">
|
|
<strong>D09 States</strong>
|
|
<span>Empty/Error/No-Permission sind inline Komponenten-Zustaende, keine Modale.</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
|
|
<div class="app-preview">
|
|
<aside class="preview-sidebar rule-scope">
|
|
<a class="rule-badge rule-anchor" href="index.html#d02" data-tooltip="Die App-Shell bleibt als Kontext sichtbar; die eigentlichen Page-Abstaende starten rechts im Content-Bereich.">Shell Kontext</a>
|
|
<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 rule-scope">
|
|
<a class="rule-badge rule-anchor" href="index.html#d02" data-tooltip="D02: Der Content nutzt mindestens 24px Page Padding. Der Wert bleibt auch in kompakten Settings gleich.">D02 Page Padding</a>
|
|
<div class="preview-page-head rule-scope">
|
|
<a class="rule-badge rule-anchor" href="index.html#d03" data-tooltip="D03: Page Title und Beschreibung stehen ohne extra Gap zusammen; der Abstand zum ersten Content bleibt stabil.">D03 Text-Rhythmus</a>
|
|
<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">
|
|
<a class="rule-badge" href="index.html#d04" data-tooltip="D04: Button-Hoehe und Innenpadding kommen aus der Button-Komponente. Standardaktionen nutzen Default/Medium.">D04 Buttons</a>
|
|
<span class="button secondary">Filter</span>
|
|
<span class="button">Create task</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="preview-stat-grid rule-scope">
|
|
<a class="rule-badge rule-anchor" href="index.html#d02" data-tooltip="D02: Grid/Card Gap ist standardmaessig 16px und kann nur in kompakten Teilbereichen auf 12px reduziert werden.">D02 Grid Gap</a>
|
|
<div class="preview-card rule-scope">
|
|
<a class="rule-badge rule-anchor" href="index.html#d02" data-tooltip="D02: Card/Surface Padding bleibt 16px; es wird nicht pro Screen neu erfunden.">D02 Card Padding</a>
|
|
<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 rule-scope">
|
|
<a class="rule-badge rule-anchor" href="index.html#d02" data-tooltip="D02: Auch groessere Inhaltskarten nutzen 16px Innenpadding und den globalen Grid Gap.">D02 Card</a>
|
|
<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 rule-scope">
|
|
<a class="rule-badge rule-anchor" href="index.html#d09" data-tooltip="D09: Empty/Error/No-Permission waeren inline States in genau diesem Inhaltsbereich, nicht automatisch ein Modal.">D09 States</a>
|
|
<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 rule-scope">
|
|
<a class="rule-badge rule-anchor" href="index.html#d06" data-tooltip="D06: Tabellen-Dichte, Row Height und Zellpadding kommen aus der Table-Komponente.">D06 Table</a>
|
|
<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 rule-scope">
|
|
<a class="rule-badge rule-anchor" href="index.html#d07" data-tooltip="D07/D08: Diese Flaeche simuliert die groessere Dialog-Variante. 32px kommt aus der Dialog-Komponente, nicht aus frei gesetztem Screen-Padding.">D07/D08 Dialog</a>
|
|
<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 rule-scope">
|
|
<a class="rule-badge rule-anchor" href="index.html#d05" data-tooltip="D05: Komplette Field-Komponenten stehen 16px auseinander; Label/Help/Error gehoeren in die Komponente.">D05 Field Gap</a>
|
|
<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>
|