1058 lines
64 KiB
HTML
1058 lines
64 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||
<title>presseportale.com — Meine Pressemitteilungen</title>
|
||
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
|
||
|
||
<script src="https://cdn.tailwindcss.com?plugins=forms"></script>
|
||
<script>
|
||
tailwind.config = {
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
bg:"#F6F4EF","bg-elev":"#FBFAF6","bg-rule":"#E2DDD0","bg-rule-2":"#EDE7D7",
|
||
"bg-card":"#FFFFFF","bg-card-warm":"#EFEADC",
|
||
hub:"#1A2540","hub-2":"#243152","hub-3":"#2E3D66",
|
||
"hub-soft":"#E5E9F1","hub-soft-2":"#CFD6E4","hub-line":"#7B8FBF",
|
||
accent:"#B07A3A","accent-deep":"#8A5E27","accent-soft":"#F1E6D3",
|
||
ink:"#1A1F1C","ink-2":"#3A413D","ink-3":"#5A6360","ink-4":"#8A918D",
|
||
"ink-on-dark":"#F6F4EF","ink-on-dark-2":"#B2B9C7","ink-on-dark-3":"#7B8FBF",
|
||
ok:"#2E8540","ok-soft":"#E2F1E5",
|
||
warn:"#A87A1F","warn-soft":"#F6EAC8",
|
||
err:"#A8331F","err-soft":"#F4DAD2",
|
||
},
|
||
fontFamily:{
|
||
sans:['"Inter Tight"','Inter','system-ui','sans-serif'],
|
||
mono:['"JetBrains Mono"','"SF Mono"','ui-monospace','monospace'],
|
||
},
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
html,body{margin:0;padding:0;}
|
||
body{background:#E8E4DA;font-family:"Inter Tight",system-ui,sans-serif;}
|
||
|
||
.eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.20em;text-transform:uppercase;color:#1A2540;}
|
||
.eyebrow.muted{color:#5A6360;letter-spacing:.16em;font-weight:600;font-size:10px;}
|
||
.eyebrow.accent{color:#8A5E27;}
|
||
.eyebrow.on-dark{color:#7B8FBF;}
|
||
|
||
.section-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#1A2540;}
|
||
.section-eyebrow::after{content:"";display:block;width:30px;height:1px;background:#1A2540;opacity:.45;}
|
||
|
||
.rule{height:1px;background:#E2DDD0;border:0;margin:0;}
|
||
|
||
/* Sidebar */
|
||
.nav-item{display:flex;align-items:center;gap:11px;padding:8px 12px;border-radius:4px;font-size:13px;font-weight:500;color:#3A413D;transition:background .12s,color .12s;position:relative;}
|
||
.nav-item:hover{background:#F6F4EF;color:#1A2540;}
|
||
.nav-item.active{background:#E5E9F1;color:#1A2540;font-weight:600;}
|
||
.nav-item.active::before{content:"";position:absolute;left:-1px;top:6px;bottom:6px;width:2px;background:#1A2540;border-radius:0 2px 2px 0;}
|
||
.nav-item.disabled{color:#8A918D;cursor:default;}
|
||
.nav-item.disabled:hover{background:transparent;color:#8A918D;}
|
||
.nav-item .ico{width:16px;height:16px;flex-shrink:0;color:currentColor;opacity:.8;}
|
||
.nav-item.active .ico{opacity:1;}
|
||
.nav-section{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#8A918D;padding:0 12px 6px;}
|
||
|
||
/* Panels */
|
||
.panel{background:#FFFFFF;border:1px solid #E2DDD0;border-radius:6px;}
|
||
.panel-warm{background:#FBFAF6;border:1px solid #E2DDD0;border-radius:6px;}
|
||
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid #E2DDD0;}
|
||
|
||
/* Buttons */
|
||
.btn-primary{display:inline-flex;align-items:center;gap:8px;justify-content:center;padding:9px 16px;background:#1A2540;color:#fff;border-radius:4px;font-size:13px;font-weight:600;transition:background .15s;}
|
||
.btn-primary:hover{background:#243152;}
|
||
.btn-secondary{display:inline-flex;align-items:center;gap:8px;justify-content:center;padding:8px 14px;background:#fff;color:#1A2540;border:1px solid #CFD6E4;border-radius:4px;font-size:12.5px;font-weight:600;transition:border-color .15s,background .15s;}
|
||
.btn-secondary:hover{border-color:#1A2540;background:#F6F4EF;}
|
||
.btn-ghost{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;color:#3A413D;border-radius:4px;font-size:12px;font-weight:500;transition:background .12s,color .12s;}
|
||
.btn-ghost:hover{background:#F6F4EF;color:#1A2540;}
|
||
|
||
/* Badges */
|
||
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:99px;font-size:10.5px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;}
|
||
.badge.warn{background:#F6EAC8;color:#8A5E27;}
|
||
.badge.ok{background:#E2F1E5;color:#1F5E2E;}
|
||
.badge.err{background:#F4DAD2;color:#8E2A19;}
|
||
.badge.hub{background:#E5E9F1;color:#1A2540;}
|
||
.badge.muted{background:#EFEADC;color:#5A6360;}
|
||
.badge.dot::before{content:"";width:6px;height:6px;border-radius:99px;background:currentColor;}
|
||
|
||
/* Filterleiste */
|
||
.filter-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px 6px 14px;background:#fff;border:1px solid #CFD6E4;border-radius:4px;font-size:12.5px;color:#1A2540;font-weight:500;transition:border-color .15s,background .15s;white-space:nowrap;}
|
||
.filter-chip:hover{border-color:#1A2540;background:#F6F4EF;}
|
||
.filter-chip.is-active{background:#1A2540;color:#fff;border-color:#1A2540;}
|
||
.filter-chip.is-active:hover{background:#243152;}
|
||
.filter-chip .caret{opacity:.55;}
|
||
|
||
.active-chip{display:inline-flex;align-items:center;gap:7px;padding:4px 6px 4px 11px;background:#FBFAF6;border:1px solid #E2DDD0;border-radius:99px;font-size:11.5px;color:#3A413D;font-weight:500;}
|
||
.active-chip strong{color:#1A2540;font-weight:600;}
|
||
.active-chip .x{width:16px;height:16px;border-radius:99px;display:inline-flex;align-items:center;justify-content:center;color:#5A6360;background:#EDE7D7;transition:background .12s,color .12s;}
|
||
.active-chip .x:hover{background:#1A2540;color:#fff;}
|
||
|
||
/* Search */
|
||
.search-wrap{position:relative;flex:1;min-width:220px;}
|
||
.search-wrap input{
|
||
width:100%;padding:8px 12px 8px 34px;background:#fff;border:1px solid #CFD6E4;border-radius:4px;
|
||
font-size:12.5px;color:#1A1F1C;transition:border-color .15s;
|
||
}
|
||
.search-wrap input:focus{outline:none;border-color:#1A2540;}
|
||
.search-wrap input::placeholder{color:#8A918D;}
|
||
.search-wrap .ico{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:#5A6360;}
|
||
.search-wrap kbd{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10px;color:#8A918D;border:1px solid #E2DDD0;border-radius:3px;padding:1px 4px;background:#FBFAF6;}
|
||
|
||
/* Tabelle */
|
||
table.list{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;}
|
||
table.list thead th{
|
||
text-align:left;font-weight:700;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#5A6360;
|
||
padding:11px 14px;background:#FBFAF6;border-bottom:1px solid #E2DDD0;white-space:nowrap;
|
||
}
|
||
table.list thead th:first-child{padding-left:18px;}
|
||
table.list thead th:last-child{padding-right:18px;}
|
||
table.list tbody td{padding:14px;border-bottom:1px solid #EDE7D7;vertical-align:middle;}
|
||
table.list tbody td:first-child{padding-left:18px;}
|
||
table.list tbody td:last-child{padding-right:18px;text-align:right;}
|
||
table.list tbody tr:last-child td{border-bottom:0;}
|
||
table.list tbody tr{transition:background .1s;}
|
||
table.list tbody tr:hover{background:#FBFAF6;}
|
||
table.list tbody tr.is-row-warn:hover{background:#FBF7EB;}
|
||
table.list tbody tr.is-row-err:hover{background:#FBEFEA;}
|
||
|
||
.row-title{font-weight:600;color:#1A1F1C;font-size:13.5px;line-height:1.35;letter-spacing:-.1px;}
|
||
.row-title:hover{color:#1A2540;text-decoration:underline;text-decoration-color:rgba(26,37,64,.35);text-underline-offset:3px;}
|
||
.row-sub{font-size:11.5px;color:#5A6360;margin-top:3px;line-height:1.4;}
|
||
.row-date{font-family:"JetBrains Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;font-size:12px;color:#3A413D;}
|
||
.row-date-sub{font-size:10.5px;color:#8A918D;margin-top:2px;letter-spacing:.04em;}
|
||
|
||
.checkbox{appearance:none;width:14px;height:14px;border:1.5px solid #CFD6E4;border-radius:3px;background:#fff;cursor:pointer;position:relative;transition:border-color .12s,background .12s;}
|
||
.checkbox:hover{border-color:#1A2540;}
|
||
.checkbox:checked{background:#1A2540;border-color:#1A2540;}
|
||
.checkbox:checked::after{content:"";position:absolute;left:3px;top:0px;width:4px;height:8px;border:solid #fff;border-width:0 1.6px 1.6px 0;transform:rotate(45deg);}
|
||
.checkbox.indeterminate{background:#1A2540;border-color:#1A2540;}
|
||
.checkbox.indeterminate::after{content:"";position:absolute;left:2px;top:5px;width:8px;height:2px;background:#fff;}
|
||
|
||
/* Portal pills (consistent with header indicators) */
|
||
.portal-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:99px;font-size:10.5px;font-weight:600;letter-spacing:.06em;background:#FBFAF6;border:1px solid #E2DDD0;color:#3A413D;white-space:nowrap;}
|
||
.portal-pill .pdot{width:6px;height:6px;border-radius:99px;}
|
||
.portal-pill.pe .pdot{background:#1F4D3A;}
|
||
.portal-pill.bp .pdot{background:#C84A1E;}
|
||
|
||
/* Inline action button — neben Status */
|
||
.inline-action{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:#1A2540;background:transparent;padding:3px 6px;margin-left:4px;border-radius:3px;border:1px dashed transparent;transition:border-color .12s,background .12s;}
|
||
.inline-action:hover{background:#E5E9F1;border-color:#CFD6E4;}
|
||
.inline-action.warn{color:#8A5E27;}
|
||
.inline-action.warn:hover{background:#F6EAC8;border-color:#E1C883;}
|
||
.inline-action.err{color:#8E2A19;}
|
||
.inline-action.err:hover{background:#F4DAD2;border-color:#E0B0A5;}
|
||
|
||
/* Aktions-Menü */
|
||
.menu-trigger{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:4px;border:1px solid transparent;color:#5A6360;transition:background .12s,border-color .12s,color .12s;}
|
||
.menu-trigger:hover{background:#F6F4EF;border-color:#CFD6E4;color:#1A2540;}
|
||
|
||
/* Pagination */
|
||
.page-btn{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;padding:0 9px;border-radius:4px;border:1px solid #CFD6E4;background:#fff;font-size:12px;font-weight:600;color:#3A413D;font-family:"JetBrains Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;transition:border-color .12s,background .12s,color .12s;}
|
||
.page-btn:hover{border-color:#1A2540;color:#1A2540;}
|
||
.page-btn.is-current{background:#1A2540;border-color:#1A2540;color:#fff;}
|
||
.page-btn.is-disabled{color:#B5BCB9;border-color:#EDE7D7;background:#FBFAF6;cursor:default;}
|
||
.page-btn.is-disabled:hover{color:#B5BCB9;border-color:#EDE7D7;}
|
||
|
||
/* Bridge ribbon */
|
||
.bridge-row{display:inline-flex;align-items:center;gap:6px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.10em;text-transform:uppercase;color:#5A6360;}
|
||
.dot-pe{width:6px;height:6px;border-radius:99px;background:#1F4D3A;}
|
||
.dot-bp{width:6px;height:6px;border-radius:99px;background:#C84A1E;}
|
||
|
||
/* Counter strip — separat zur H1 */
|
||
.counter-strip{display:inline-flex;align-items:center;gap:14px;padding:6px 0;}
|
||
.counter-strip .seg{display:inline-flex;align-items:baseline;gap:6px;font-size:12.5px;color:#3A413D;}
|
||
.counter-strip .seg b{font-family:"JetBrains Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;font-size:13.5px;font-weight:600;color:#1A1F1C;letter-spacing:-.2px;}
|
||
.counter-strip .sep{width:1px;height:11px;background:#CFD6E4;}
|
||
|
||
/* Empty state */
|
||
.empty-stage{padding:80px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;}
|
||
.empty-ico{width:64px;height:64px;border-radius:6px;background:#E5E9F1;border:1px solid #CFD6E4;color:#1A2540;display:flex;align-items:center;justify-content:center;margin-bottom:20px;}
|
||
.empty-ico.warm{background:#F1E6D3;border-color:#E1C883;color:#8A5E27;}
|
||
.empty-ico.err{background:#F4DAD2;border-color:#E0B0A5;color:#8E2A19;}
|
||
.empty-title{font-size:17px;font-weight:600;color:#1A1F1C;margin:0;letter-spacing:-.2px;}
|
||
.empty-sub{font-size:13px;color:#5A6360;line-height:1.55;margin:8px 0 0;max-width:440px;}
|
||
|
||
/* Saved view tabs */
|
||
.view-tab{display:inline-flex;align-items:center;gap:8px;padding:7px 12px 9px;font-size:12.5px;font-weight:500;color:#5A6360;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .12s,border-color .12s;}
|
||
.view-tab:hover{color:#1A2540;}
|
||
.view-tab.is-active{color:#1A2540;font-weight:600;border-bottom-color:#1A2540;}
|
||
.view-tab .cnt{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10.5px;color:#8A918D;background:#EDE7D7;padding:1px 6px;border-radius:99px;font-weight:600;letter-spacing:.04em;}
|
||
.view-tab.is-active .cnt{background:#1A2540;color:#fff;}
|
||
</style>
|
||
</head>
|
||
|
||
<body class="bg-bg text-ink font-sans antialiased">
|
||
|
||
<!-- ============== ARTBOARD ============== -->
|
||
<div class="mx-auto bg-bg" style="width:1440px;">
|
||
|
||
<div class="flex" style="min-height:1100px;">
|
||
|
||
<!-- ============== SIDEBAR ============== -->
|
||
<aside class="bg-bg-elev border-r border-bg-rule flex flex-col" style="width:260px;">
|
||
<div class="px-5 pt-6 pb-5">
|
||
<a href="Hub Landing presseportale.html" class="flex items-baseline gap-2">
|
||
<span class="text-[19px] font-bold tracking-[-0.4px] text-hub leading-none">presseportale<span class="text-accent">.com</span></span>
|
||
</a>
|
||
<div class="eyebrow muted mt-2">Publisher · Hub</div>
|
||
|
||
<button class="mt-4 w-full grid items-center gap-2.5 px-3 py-2.5 bg-white border border-bg-rule rounded-[4px] hover:border-hub/40 text-left" style="grid-template-columns:auto 1fr auto;">
|
||
<span class="w-7 h-7 rounded-[3px] bg-hub-soft border border-hub-soft-2 flex items-center justify-center text-hub text-[11px] font-bold">TU</span>
|
||
<span class="min-w-0">
|
||
<span class="block text-[12.5px] font-semibold text-ink leading-tight truncate">Test User</span>
|
||
<span class="block text-[10.5px] text-ink-3 leading-tight mt-0.5 truncate">Tegernseer Brauerei AG +1</span>
|
||
</span>
|
||
<svg width="11" height="11" viewBox="0 0 12 12" fill="none" class="text-ink-3">
|
||
<path d="M3 4.5l3 3 3-3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
|
||
<path d="M3 7.5l3-3 3 3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" opacity="0.4"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
<nav class="px-3 flex-1">
|
||
<div class="nav-section">Mein Bereich</div>
|
||
<div class="space-y-0.5 mb-5">
|
||
<a class="nav-item" href="User Dashboard presseportale.html">
|
||
<svg class="ico" viewBox="0 0 16 16" fill="none"><path d="M2 7l6-5 6 5v7H2z" stroke="currentColor" stroke-width="1.4"/><path d="M6 14V9h4v5" stroke="currentColor" stroke-width="1.4"/></svg>
|
||
Übersicht
|
||
</a>
|
||
<a class="nav-item active" href="#">
|
||
<svg class="ico" viewBox="0 0 16 16" fill="none"><rect x="2.5" y="2.5" width="9" height="11" stroke="currentColor" stroke-width="1.4"/><path d="M11.5 5h2v8.5H4" stroke="currentColor" stroke-width="1.4"/><path d="M5 5.5h4M5 8h4M5 10.5h2.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||
Meine Pressemitteilungen
|
||
<span class="badge hub ml-auto" style="font-size:9.5px;padding:1px 6px;letter-spacing:0.08em;">24</span>
|
||
</a>
|
||
<a class="nav-item" href="#">
|
||
<svg class="ico" viewBox="0 0 16 16" fill="none"><rect x="2.5" y="3.5" width="11" height="10" stroke="currentColor" stroke-width="1.4"/><path d="M2.5 6h11" stroke="currentColor" stroke-width="1.4"/><path d="M6 9h1M9 9h1M6 11.5h1M9 11.5h1" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||
Firmen
|
||
</a>
|
||
<a class="nav-item" href="#">
|
||
<svg class="ico" viewBox="0 0 16 16" fill="none"><path d="M3 5h10l-1 9H4z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M6 5V3.5a2 2 0 014 0V5" stroke="currentColor" stroke-width="1.4"/></svg>
|
||
Buchungen & Add-ons
|
||
</a>
|
||
<span class="nav-item disabled">
|
||
<svg class="ico" viewBox="0 0 16 16" fill="none"><path d="M3 13V8M7 13V5M11 13V9" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||
Statistiken
|
||
<span class="ml-auto text-[9.5px] tracking-[0.14em] uppercase font-semibold text-ink-4">bald</span>
|
||
</span>
|
||
</div>
|
||
|
||
<div class="nav-section">Finanzen</div>
|
||
<div class="space-y-0.5 mb-5">
|
||
<span class="nav-item disabled">
|
||
<svg class="ico" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="5" stroke="currentColor" stroke-width="1.4"/><path d="M8 5.5v5M6 8h4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||
Credits & Tarif
|
||
<span class="ml-auto text-[9.5px] tracking-[0.14em] uppercase font-semibold text-ink-4">bald</span>
|
||
</span>
|
||
<a class="nav-item" href="#">
|
||
<svg class="ico" viewBox="0 0 16 16" fill="none"><path d="M3 2.5h7l3 3v8H3z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M10 2.5V5.5h3" stroke="currentColor" stroke-width="1.4"/><path d="M5.5 8h5M5.5 10.5h5M5.5 6h2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
|
||
Rechnungen
|
||
</a>
|
||
<span class="nav-item disabled">
|
||
<svg class="ico" viewBox="0 0 16 16" fill="none"><rect x="2.5" y="4.5" width="11" height="7.5" stroke="currentColor" stroke-width="1.4"/><path d="M2.5 7h11" stroke="currentColor" stroke-width="1.4"/></svg>
|
||
Zahlungsarten
|
||
<span class="ml-auto text-[9.5px] tracking-[0.14em] uppercase font-semibold text-ink-4">bald</span>
|
||
</span>
|
||
</div>
|
||
|
||
<div class="nav-section">Konto</div>
|
||
<div class="space-y-0.5 mb-5">
|
||
<a class="nav-item" href="#">
|
||
<svg class="ico" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="6" r="2.5" stroke="currentColor" stroke-width="1.4"/><path d="M3 13.5c.7-2.4 2.7-4 5-4s4.3 1.6 5 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||
Profil
|
||
</a>
|
||
<a class="nav-item" href="#">
|
||
<svg class="ico" viewBox="0 0 16 16" fill="none"><path d="M8 2l5 2v4c0 3-2 5-5 6-3-1-5-3-5-6V4z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M6 8l1.5 1.5L10.5 6" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
Sicherheit
|
||
</a>
|
||
<a class="nav-item" href="#">
|
||
<svg class="ico" viewBox="0 0 16 16" fill="none"><circle cx="6" cy="8" r="2.5" stroke="currentColor" stroke-width="1.4"/><path d="M8.5 8h5M11 8v2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||
API & Integrationen
|
||
</a>
|
||
<span class="nav-item disabled">
|
||
<svg class="ico" viewBox="0 0 16 16" fill="none"><path d="M3.5 7a4.5 4.5 0 119 0v3.5l1 1.5H2.5l1-1.5z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M6.5 13a1.5 1.5 0 003 0" stroke="currentColor" stroke-width="1.4"/></svg>
|
||
Benachrichtigungen
|
||
<span class="ml-auto text-[9.5px] tracking-[0.14em] uppercase font-semibold text-ink-4">bald</span>
|
||
</span>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="px-4 pb-4">
|
||
<div class="bg-hub text-ink-on-dark rounded-[5px] p-4 relative overflow-hidden">
|
||
<div class="absolute -top-6 -right-6 w-16 h-16 rounded-full bg-hub-3 opacity-50"></div>
|
||
<div class="absolute -bottom-8 -left-8 w-20 h-20 rounded-full bg-hub-3 opacity-30"></div>
|
||
<div class="relative">
|
||
<div class="flex items-center gap-2 mb-2">
|
||
<span class="w-1.5 h-1.5 rounded-full bg-accent animate-pulse"></span>
|
||
<span class="eyebrow on-dark" style="color:#F4D89C;">Testmodus aktiv</span>
|
||
</div>
|
||
<div class="text-[12px] leading-[1.5] text-ink-on-dark-2">
|
||
Angemeldet als <strong class="text-white font-semibold">Test User</strong>.<br/>
|
||
Admin: <strong class="text-white font-semibold">Portal Admin</strong>
|
||
</div>
|
||
<button class="mt-3 w-full px-3 py-2 bg-white text-hub text-[12px] font-semibold rounded-[3px] hover:bg-bg transition-colors flex items-center justify-center gap-1.5">
|
||
<svg width="11" height="11" viewBox="0 0 12 12" fill="none">
|
||
<path d="M9 3L3 9M3 9H8M3 9V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
Zurück zum Admin
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="px-3 pb-5 border-t border-bg-rule pt-4">
|
||
<div class="nav-section">Resources</div>
|
||
<div class="space-y-0.5">
|
||
<a class="nav-item" href="#"><svg class="ico" viewBox="0 0 16 16" fill="none"><path d="M3 11l4 2 6-9-4-1z" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/></svg>Tailwind CSS</a>
|
||
<a class="nav-item" href="#"><svg class="ico" viewBox="0 0 16 16" fill="none"><path d="M8 2l5 2v4c0 3-2 5-5 6-3-1-5-3-5-6V4z" stroke="currentColor" stroke-width="1.3"/></svg>Hero Icons</a>
|
||
<a class="nav-item" href="#"><svg class="ico" viewBox="0 0 16 16" fill="none"><path d="M9 2L4 9h3l-1 5 5-7H8z" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/></svg>Flux UI</a>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- ============== MAIN ============== -->
|
||
<main class="flex-1 min-w-0" data-screen-label="01 Meine Pressemitteilungen">
|
||
|
||
<!-- Topbar -->
|
||
<div class="bg-bg-elev border-b border-bg-rule">
|
||
<div class="px-10 py-3 flex items-center gap-6">
|
||
<div class="flex items-center gap-2 text-[12px] text-ink-3 font-medium">
|
||
<a href="Hub Landing presseportale.html" class="hover:text-hub">Hub</a>
|
||
<span class="text-ink-4">/</span>
|
||
<a href="User Dashboard presseportale.html" class="hover:text-hub">User Backend</a>
|
||
<span class="text-ink-4">/</span>
|
||
<span class="text-hub font-semibold">Meine Pressemitteilungen</span>
|
||
</div>
|
||
|
||
<span class="flex-1"></span>
|
||
|
||
<span class="bridge-row">
|
||
<span class="dot-pe"></span> presseecho
|
||
<span class="text-ink-4 mx-1">·</span>
|
||
<span class="dot-bp"></span> businessportal24
|
||
</span>
|
||
|
||
<span class="w-px h-5 bg-bg-rule"></span>
|
||
|
||
<div class="relative">
|
||
<svg width="13" height="13" viewBox="0 0 16 16" fill="none" class="absolute left-2.5 top-1/2 -translate-y-1/2 text-ink-3">
|
||
<circle cx="7" cy="7" r="4.5" stroke="currentColor" stroke-width="1.3"/>
|
||
<path d="M10.5 10.5L13 13" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
|
||
</svg>
|
||
<input class="pl-8 pr-3 py-1.5 w-[220px] bg-white border border-bg-rule rounded-[4px] text-[12.5px] placeholder:text-ink-4 focus:outline-none focus:border-hub" placeholder="Suchen…" />
|
||
<span class="absolute right-2 top-1/2 -translate-y-1/2 text-[10px] font-mono text-ink-4 border border-bg-rule rounded px-1">⌘K</span>
|
||
</div>
|
||
|
||
<button class="relative w-8 h-8 flex items-center justify-center rounded-[4px] hover:bg-bg border border-transparent hover:border-bg-rule">
|
||
<svg width="15" height="15" viewBox="0 0 16 16" fill="none" class="text-ink-2">
|
||
<path d="M3.5 7a4.5 4.5 0 119 0v3.5l1 1.5H2.5l1-1.5z" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/>
|
||
<path d="M6.5 13a1.5 1.5 0 003 0" stroke="currentColor" stroke-width="1.3"/>
|
||
</svg>
|
||
<span class="absolute top-1 right-1 w-1.5 h-1.5 rounded-full bg-accent"></span>
|
||
</button>
|
||
|
||
<a href="Veroeffentlichen.html" class="btn-primary text-[12px] py-1.5 px-3.5">
|
||
<svg width="11" height="11" viewBox="0 0 12 12" fill="none">
|
||
<path d="M6 2v8M2 6h8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
|
||
</svg>
|
||
Neue Mitteilung
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Inhalt -->
|
||
<div class="px-10 py-8 space-y-6">
|
||
|
||
<!-- ============== PAGE HEADER ============== -->
|
||
<header class="grid items-end gap-8" style="grid-template-columns:1fr auto;">
|
||
<div class="min-w-0">
|
||
<div class="flex items-center gap-3 mb-3 flex-nowrap whitespace-nowrap">
|
||
<span class="badge hub dot">User Backend</span>
|
||
<span class="eyebrow muted">Mein Bereich · A · 02</span>
|
||
</div>
|
||
<h1 class="text-[34px] font-bold tracking-[-0.7px] text-ink leading-[1.1] m-0">Meine Pressemitteilungen</h1>
|
||
|
||
<!-- Counter-Strip statt langer Subzeile -->
|
||
<div class="counter-strip mt-3">
|
||
<span class="seg"><b>24</b> Mitteilungen</span>
|
||
<span class="sep"></span>
|
||
<span class="seg"><b style="color:#1F5E2E;">18</b> veröffentlicht</span>
|
||
<span class="sep"></span>
|
||
<span class="seg"><b style="color:#8A5E27;">1</b> in Prüfung</span>
|
||
<span class="sep"></span>
|
||
<span class="seg"><b style="color:#5A6360;">4</b> Entwürfe</span>
|
||
<span class="sep"></span>
|
||
<span class="seg"><b style="color:#8E2A19;">1</b> abgelehnt</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-center gap-2 flex-shrink-0">
|
||
<button class="btn-secondary whitespace-nowrap">
|
||
<svg width="12" height="12" viewBox="0 0 16 16" fill="none"><path d="M3 5h10M5 8h6M7 11h2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||
Spalten
|
||
</button>
|
||
<button class="btn-secondary whitespace-nowrap">
|
||
<svg width="12" height="12" viewBox="0 0 16 16" fill="none"><path d="M3 4h10M3 8h7M3 12h4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><path d="M11 12l2 2 2-3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
Export
|
||
<span class="badge muted" style="font-size:9px;padding:0px 5px;letter-spacing:0.06em;">bald</span>
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- ============== SAVED VIEWS (TABS) ============== -->
|
||
<nav class="border-b border-bg-rule flex items-center gap-1" aria-label="Gespeicherte Ansichten">
|
||
<button class="view-tab is-active" data-view="all">Alle <span class="cnt">24</span></button>
|
||
<button class="view-tab" data-view="published">Veröffentlicht <span class="cnt">18</span></button>
|
||
<button class="view-tab" data-view="drafts">Entwürfe <span class="cnt">4</span></button>
|
||
<button class="view-tab" data-view="review">In Prüfung <span class="cnt">1</span></button>
|
||
<button class="view-tab" data-view="rejected">Abgelehnt <span class="cnt">1</span></button>
|
||
<button class="view-tab" data-view="archive">Archiv <span class="cnt">0</span></button>
|
||
<span class="flex-1"></span>
|
||
<button class="btn-ghost" title="Eigene Ansicht speichern">
|
||
<svg width="12" height="12" viewBox="0 0 16 16" fill="none"><path d="M3 2.5h8l2 2v9H3z" stroke="currentColor" stroke-width="1.3"/><path d="M5 2.5v3h5v-3M5 13.5v-4h6v4" stroke="currentColor" stroke-width="1.3"/></svg>
|
||
Ansicht speichern
|
||
</button>
|
||
</nav>
|
||
|
||
<!-- ============== FILTER + SUCHE ============== -->
|
||
<section class="space-y-3">
|
||
<!-- Eine Zeile: Filter-Buttons links, Suche rechts -->
|
||
<div class="flex items-center gap-2 flex-wrap">
|
||
<button class="filter-chip">
|
||
<svg width="11" height="11" viewBox="0 0 12 12" fill="none" class="opacity-70"><circle cx="6" cy="6" r="2" fill="currentColor"/><circle cx="6" cy="6" r="4.5" stroke="currentColor" stroke-width="1.2"/></svg>
|
||
Status: <strong class="font-semibold">Alle</strong>
|
||
<svg class="caret" width="9" height="9" viewBox="0 0 12 12" fill="none"><path d="M3 4.5l3 3 3-3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
</button>
|
||
<button class="filter-chip">
|
||
<span class="dot-pe inline-block" style="margin-right:1px;"></span><span class="dot-bp inline-block" style="margin-left:-2px;"></span>
|
||
Portal: <strong class="font-semibold">Alle</strong>
|
||
<svg class="caret" width="9" height="9" viewBox="0 0 12 12" fill="none"><path d="M3 4.5l3 3 3-3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
</button>
|
||
<button class="filter-chip">
|
||
<svg width="11" height="11" viewBox="0 0 16 16" fill="none" class="opacity-70"><rect x="2.5" y="3.5" width="11" height="10" stroke="currentColor" stroke-width="1.4"/><path d="M2.5 6h11M6 9h1M9 9h1M6 11.5h1M9 11.5h1" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||
Firma: <strong class="font-semibold">Alle (2)</strong>
|
||
<svg class="caret" width="9" height="9" viewBox="0 0 12 12" fill="none"><path d="M3 4.5l3 3 3-3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
</button>
|
||
<button class="filter-chip is-active">
|
||
<svg width="11" height="11" viewBox="0 0 16 16" fill="none"><rect x="2.5" y="3.5" width="11" height="10" stroke="currentColor" stroke-width="1.4"/><path d="M2.5 6h11M5 2v3M11 2v3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||
Zeitraum: <strong class="font-semibold">Dieser Monat</strong>
|
||
<svg class="caret" width="9" height="9" viewBox="0 0 12 12" fill="none" style="opacity:.85;"><path d="M3 4.5l3 3 3-3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
</button>
|
||
|
||
<span class="w-px h-6 bg-bg-rule mx-1"></span>
|
||
|
||
<div class="search-wrap" style="max-width:340px;">
|
||
<svg class="ico" width="13" height="13" viewBox="0 0 16 16" fill="none">
|
||
<circle cx="7" cy="7" r="4.5" stroke="currentColor" stroke-width="1.3"/>
|
||
<path d="M10.5 10.5L13 13" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
|
||
</svg>
|
||
<input type="text" placeholder="Titel, Untertitel oder Schlagwort…" />
|
||
<kbd>/</kbd>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Aktive Filter als entfernbare Chips -->
|
||
<div class="flex items-center gap-2 flex-wrap text-[11.5px]">
|
||
<span class="eyebrow muted" style="margin-right:2px;">Aktiv</span>
|
||
<span class="active-chip">
|
||
<span>Zeitraum: <strong>Dieser Monat</strong></span>
|
||
<button class="x" aria-label="Filter entfernen"><svg width="8" height="8" viewBox="0 0 12 12" fill="none"><path d="M3 3l6 6M9 3l-6 6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg></button>
|
||
</span>
|
||
<button class="text-[11.5px] font-semibold text-ink-3 hover:text-hub underline-offset-[3px] hover:underline">Alle zurücksetzen</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============== TABELLE / LISTE ============== -->
|
||
<article class="panel overflow-hidden" data-state-host>
|
||
|
||
<!-- Table-Variante (Default) -->
|
||
<div data-state="list">
|
||
<table class="list">
|
||
<thead>
|
||
<tr>
|
||
<th style="width:32px;"><input type="checkbox" class="checkbox indeterminate" /></th>
|
||
<th style="width:138px;">Status</th>
|
||
<th>Titel</th>
|
||
<th style="width:160px;">Portal</th>
|
||
<th style="width:200px;">Firma</th>
|
||
<th style="width:140px;">
|
||
<span class="inline-flex items-center gap-1">Datum
|
||
<svg width="9" height="9" viewBox="0 0 12 12" fill="none" class="opacity-70"><path d="M6 2v8M3.5 7.5L6 10l2.5-2.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
</span>
|
||
</th>
|
||
<th style="width:40px;"></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
|
||
<!-- 1 — Veröffentlicht -->
|
||
<tr>
|
||
<td><input type="checkbox" class="checkbox" /></td>
|
||
<td><span class="badge ok dot">Veröffentlicht</span></td>
|
||
<td>
|
||
<a href="#" class="row-title">Tegernseer Brauerei eröffnet erste Craft-Beer-Manufaktur im Allgäu</a>
|
||
<div class="row-sub">PM-2026-0418 · 4 Bilder · Auto-Twitter aktiv</div>
|
||
</td>
|
||
<td>
|
||
<span class="portal-pill pe"><span class="pdot"></span>presseecho</span>
|
||
<span class="portal-pill bp" style="margin-left:4px;"><span class="pdot"></span>businessportal24</span>
|
||
</td>
|
||
<td><a href="#" class="text-[12.5px] text-ink-2 font-medium hover:text-hub hover:underline underline-offset-[3px]">Tegernseer Brauerei AG</a></td>
|
||
<td>
|
||
<div class="row-date">14.05.2026</div>
|
||
<div class="row-date-sub">veröffentlicht · 09:12</div>
|
||
</td>
|
||
<td>
|
||
<button class="menu-trigger" aria-label="Aktionen">
|
||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="3.5" r="1.2" fill="currentColor"/><circle cx="8" cy="8" r="1.2" fill="currentColor"/><circle cx="8" cy="12.5" r="1.2" fill="currentColor"/></svg>
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
|
||
<!-- 2 — Veröffentlicht -->
|
||
<tr>
|
||
<td><input type="checkbox" class="checkbox" checked /></td>
|
||
<td><span class="badge ok dot">Veröffentlicht</span></td>
|
||
<td>
|
||
<a href="#" class="row-title">Q1-Ergebnisse: Umsatzwachstum von 18 % im Mittelstand sichtbar</a>
|
||
<div class="row-sub">PM-2026-0411 · 12.483 Aufrufe · ↑ trendet auf businessportal24</div>
|
||
</td>
|
||
<td>
|
||
<span class="portal-pill pe"><span class="pdot"></span>presseecho</span>
|
||
<span class="portal-pill bp" style="margin-left:4px;"><span class="pdot"></span>businessportal24</span>
|
||
</td>
|
||
<td><a href="#" class="text-[12.5px] text-ink-2 font-medium hover:text-hub hover:underline underline-offset-[3px]">Mittelstandsverband Süd</a></td>
|
||
<td>
|
||
<div class="row-date">12.05.2026</div>
|
||
<div class="row-date-sub">veröffentlicht · 14:30</div>
|
||
</td>
|
||
<td>
|
||
<button class="menu-trigger" aria-label="Aktionen">
|
||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="3.5" r="1.2" fill="currentColor"/><circle cx="8" cy="8" r="1.2" fill="currentColor"/><circle cx="8" cy="12.5" r="1.2" fill="currentColor"/></svg>
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
|
||
<!-- 3 — In Prüfung -->
|
||
<tr class="is-row-warn">
|
||
<td><input type="checkbox" class="checkbox" /></td>
|
||
<td>
|
||
<span class="badge warn dot">In Prüfung</span>
|
||
</td>
|
||
<td>
|
||
<a href="#" class="row-title">Neue Niederlassung in Wien — Eröffnung Juli 2026</a>
|
||
<div class="row-sub">PM-2026-0511 · eingereicht vor 3 h · Prüfer: Redaktion BP24</div>
|
||
</td>
|
||
<td>
|
||
<span class="portal-pill pe"><span class="pdot"></span>presseecho</span>
|
||
<span class="portal-pill bp" style="margin-left:4px;"><span class="pdot"></span>businessportal24</span>
|
||
</td>
|
||
<td><a href="#" class="text-[12.5px] text-ink-2 font-medium hover:text-hub hover:underline underline-offset-[3px]">Tegernseer Brauerei AG</a></td>
|
||
<td>
|
||
<div class="row-date">11.05.2026</div>
|
||
<div class="row-date-sub">eingereicht · 17:48</div>
|
||
</td>
|
||
<td>
|
||
<button class="menu-trigger" aria-label="Aktionen">
|
||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="3.5" r="1.2" fill="currentColor"/><circle cx="8" cy="8" r="1.2" fill="currentColor"/><circle cx="8" cy="12.5" r="1.2" fill="currentColor"/></svg>
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
|
||
<!-- 4 — Entwurf mit Inline-Action -->
|
||
<tr>
|
||
<td><input type="checkbox" class="checkbox" /></td>
|
||
<td>
|
||
<span class="badge muted dot">Entwurf</span>
|
||
<a href="#" class="inline-action" title="Zur redaktionellen Prüfung senden">Zur Prüfung →</a>
|
||
</td>
|
||
<td>
|
||
<a href="Veroeffentlichen.html" class="row-title">Personalmeldung: Dr. Anna Berger übernimmt Vertriebsleitung</a>
|
||
<div class="row-sub">Entwurf · zuletzt bearbeitet vor 12 min · 1 Bild · Sperrfrist 20.05.</div>
|
||
</td>
|
||
<td>
|
||
<span class="portal-pill pe"><span class="pdot"></span>presseecho</span>
|
||
</td>
|
||
<td><a href="#" class="text-[12.5px] text-ink-2 font-medium hover:text-hub hover:underline underline-offset-[3px]">Tegernseer Brauerei AG</a></td>
|
||
<td>
|
||
<div class="row-date">10.05.2026</div>
|
||
<div class="row-date-sub">erstellt · 11:02</div>
|
||
</td>
|
||
<td>
|
||
<button class="menu-trigger" aria-label="Aktionen">
|
||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="3.5" r="1.2" fill="currentColor"/><circle cx="8" cy="8" r="1.2" fill="currentColor"/><circle cx="8" cy="12.5" r="1.2" fill="currentColor"/></svg>
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
|
||
<!-- 5 — Veröffentlicht -->
|
||
<tr>
|
||
<td><input type="checkbox" class="checkbox" /></td>
|
||
<td><span class="badge ok dot">Veröffentlicht</span></td>
|
||
<td>
|
||
<a href="#" class="row-title">Kooperation mit BMW Group für klimaneutrale Logistik 2030</a>
|
||
<div class="row-sub">PM-2026-0407 · 8.241 Aufrufe · 6 Backlinks</div>
|
||
</td>
|
||
<td>
|
||
<span class="portal-pill pe"><span class="pdot"></span>presseecho</span>
|
||
<span class="portal-pill bp" style="margin-left:4px;"><span class="pdot"></span>businessportal24</span>
|
||
</td>
|
||
<td><a href="#" class="text-[12.5px] text-ink-2 font-medium hover:text-hub hover:underline underline-offset-[3px]">Mittelstandsverband Süd</a></td>
|
||
<td>
|
||
<div class="row-date">08.05.2026</div>
|
||
<div class="row-date-sub">veröffentlicht · 08:15</div>
|
||
</td>
|
||
<td>
|
||
<button class="menu-trigger" aria-label="Aktionen">
|
||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="3.5" r="1.2" fill="currentColor"/><circle cx="8" cy="8" r="1.2" fill="currentColor"/><circle cx="8" cy="12.5" r="1.2" fill="currentColor"/></svg>
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
|
||
<!-- 6 — Abgelehnt mit Inline-Action -->
|
||
<tr class="is-row-err">
|
||
<td><input type="checkbox" class="checkbox" /></td>
|
||
<td>
|
||
<span class="badge err dot">Abgelehnt</span>
|
||
<a href="#" class="inline-action err" title="Ablehnungsgrund einsehen">Grund ansehen →</a>
|
||
</td>
|
||
<td>
|
||
<a href="#" class="row-title">Großaktion: Nur diese Woche 50 % auf alle Produkte</a>
|
||
<div class="row-sub">Grund: werblich, kein redaktioneller Mehrwert · Redaktion BP24, 07.05.</div>
|
||
</td>
|
||
<td>
|
||
<span class="portal-pill bp"><span class="pdot"></span>businessportal24</span>
|
||
</td>
|
||
<td><a href="#" class="text-[12.5px] text-ink-2 font-medium hover:text-hub hover:underline underline-offset-[3px]">Tegernseer Brauerei AG</a></td>
|
||
<td>
|
||
<div class="row-date">07.05.2026</div>
|
||
<div class="row-date-sub">abgelehnt · 16:21</div>
|
||
</td>
|
||
<td>
|
||
<button class="menu-trigger" aria-label="Aktionen">
|
||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="3.5" r="1.2" fill="currentColor"/><circle cx="8" cy="8" r="1.2" fill="currentColor"/><circle cx="8" cy="12.5" r="1.2" fill="currentColor"/></svg>
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
|
||
<!-- 7 — Veröffentlicht -->
|
||
<tr>
|
||
<td><input type="checkbox" class="checkbox" /></td>
|
||
<td><span class="badge ok dot">Veröffentlicht</span></td>
|
||
<td>
|
||
<a href="#" class="row-title">Studie: 7 von 10 Mittelständlern investieren 2026 in KI-Tools</a>
|
||
<div class="row-sub">PM-2026-0402 · 21.107 Aufrufe · meistgelesen der Woche</div>
|
||
</td>
|
||
<td>
|
||
<span class="portal-pill pe"><span class="pdot"></span>presseecho</span>
|
||
<span class="portal-pill bp" style="margin-left:4px;"><span class="pdot"></span>businessportal24</span>
|
||
</td>
|
||
<td><a href="#" class="text-[12.5px] text-ink-2 font-medium hover:text-hub hover:underline underline-offset-[3px]">Mittelstandsverband Süd</a></td>
|
||
<td>
|
||
<div class="row-date">05.05.2026</div>
|
||
<div class="row-date-sub">veröffentlicht · 10:00</div>
|
||
</td>
|
||
<td>
|
||
<button class="menu-trigger" aria-label="Aktionen">
|
||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="3.5" r="1.2" fill="currentColor"/><circle cx="8" cy="8" r="1.2" fill="currentColor"/><circle cx="8" cy="12.5" r="1.2" fill="currentColor"/></svg>
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
|
||
<!-- 8 — Entwurf -->
|
||
<tr>
|
||
<td><input type="checkbox" class="checkbox" /></td>
|
||
<td>
|
||
<span class="badge muted dot">Entwurf</span>
|
||
<a href="#" class="inline-action">Zur Prüfung →</a>
|
||
</td>
|
||
<td>
|
||
<a href="Veroeffentlichen.html" class="row-title">Jahresbericht 2025 — Vorstellung auf Pressekonferenz in München</a>
|
||
<div class="row-sub">Entwurf · 2 Mitautoren · noch keine Bilder hochgeladen</div>
|
||
</td>
|
||
<td><span class="text-[11.5px] text-ink-4 italic">— keines —</span></td>
|
||
<td><a href="#" class="text-[12.5px] text-ink-2 font-medium hover:text-hub hover:underline underline-offset-[3px]">Mittelstandsverband Süd</a></td>
|
||
<td>
|
||
<div class="row-date">03.05.2026</div>
|
||
<div class="row-date-sub">erstellt · 09:44</div>
|
||
</td>
|
||
<td>
|
||
<button class="menu-trigger" aria-label="Aktionen">
|
||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="3.5" r="1.2" fill="currentColor"/><circle cx="8" cy="8" r="1.2" fill="currentColor"/><circle cx="8" cy="12.5" r="1.2" fill="currentColor"/></svg>
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
|
||
<!-- 9 — Veröffentlicht -->
|
||
<tr>
|
||
<td><input type="checkbox" class="checkbox" /></td>
|
||
<td><span class="badge ok dot">Veröffentlicht</span></td>
|
||
<td>
|
||
<a href="#" class="row-title">Auszeichnung „Bayerns Unternehmen des Jahres" für Tegernseer Brauerei</a>
|
||
<div class="row-sub">PM-2026-0328 · 3.882 Aufrufe · Auto-Twitter, LinkedIn</div>
|
||
</td>
|
||
<td>
|
||
<span class="portal-pill pe"><span class="pdot"></span>presseecho</span>
|
||
<span class="portal-pill bp" style="margin-left:4px;"><span class="pdot"></span>businessportal24</span>
|
||
</td>
|
||
<td><a href="#" class="text-[12.5px] text-ink-2 font-medium hover:text-hub hover:underline underline-offset-[3px]">Tegernseer Brauerei AG</a></td>
|
||
<td>
|
||
<div class="row-date">30.04.2026</div>
|
||
<div class="row-date-sub">veröffentlicht · 12:00</div>
|
||
</td>
|
||
<td>
|
||
<button class="menu-trigger" aria-label="Aktionen">
|
||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="3.5" r="1.2" fill="currentColor"/><circle cx="8" cy="8" r="1.2" fill="currentColor"/><circle cx="8" cy="12.5" r="1.2" fill="currentColor"/></svg>
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
|
||
<!-- 10 — Veröffentlicht -->
|
||
<tr>
|
||
<td><input type="checkbox" class="checkbox" /></td>
|
||
<td><span class="badge ok dot">Veröffentlicht</span></td>
|
||
<td>
|
||
<a href="#" class="row-title">Eröffnung Innovation Lab in Garching — Forschung trifft Mittelstand</a>
|
||
<div class="row-sub">PM-2026-0326 · 5.214 Aufrufe</div>
|
||
</td>
|
||
<td>
|
||
<span class="portal-pill pe"><span class="pdot"></span>presseecho</span>
|
||
</td>
|
||
<td><a href="#" class="text-[12.5px] text-ink-2 font-medium hover:text-hub hover:underline underline-offset-[3px]">Mittelstandsverband Süd</a></td>
|
||
<td>
|
||
<div class="row-date">28.04.2026</div>
|
||
<div class="row-date-sub">veröffentlicht · 15:30</div>
|
||
</td>
|
||
<td>
|
||
<button class="menu-trigger" aria-label="Aktionen">
|
||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="3.5" r="1.2" fill="currentColor"/><circle cx="8" cy="8" r="1.2" fill="currentColor"/><circle cx="8" cy="12.5" r="1.2" fill="currentColor"/></svg>
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
|
||
<!-- 11 — Archiviert -->
|
||
<tr style="opacity:.72;">
|
||
<td><input type="checkbox" class="checkbox" /></td>
|
||
<td><span class="badge muted dot">Archiviert</span></td>
|
||
<td>
|
||
<a href="#" class="row-title">Sommerfest 2025 — Rückblick und Bildergalerie</a>
|
||
<div class="row-sub">archiviert 02.05.2026 · 14.892 Lifetime-Aufrufe</div>
|
||
</td>
|
||
<td>
|
||
<span class="portal-pill pe"><span class="pdot"></span>presseecho</span>
|
||
</td>
|
||
<td><a href="#" class="text-[12.5px] text-ink-2 font-medium hover:text-hub hover:underline underline-offset-[3px]">Tegernseer Brauerei AG</a></td>
|
||
<td>
|
||
<div class="row-date">22.04.2026</div>
|
||
<div class="row-date-sub">veröffentlicht · 09:00</div>
|
||
</td>
|
||
<td>
|
||
<button class="menu-trigger" aria-label="Aktionen">
|
||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="3.5" r="1.2" fill="currentColor"/><circle cx="8" cy="8" r="1.2" fill="currentColor"/><circle cx="8" cy="12.5" r="1.2" fill="currentColor"/></svg>
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
|
||
<!-- 12 — Entwurf -->
|
||
<tr>
|
||
<td><input type="checkbox" class="checkbox" /></td>
|
||
<td>
|
||
<span class="badge muted dot">Entwurf</span>
|
||
</td>
|
||
<td>
|
||
<a href="Veroeffentlichen.html" class="row-title">Pressekonferenz zur Brauerei-Expansion <span class="text-ink-4 font-normal">(Termin offen)</span></a>
|
||
<div class="row-sub">Entwurf · seit 27 Tagen nicht bearbeitet</div>
|
||
</td>
|
||
<td><span class="text-[11.5px] text-ink-4 italic">— keines —</span></td>
|
||
<td><a href="#" class="text-[12.5px] text-ink-2 font-medium hover:text-hub hover:underline underline-offset-[3px]">Tegernseer Brauerei AG</a></td>
|
||
<td>
|
||
<div class="row-date">20.04.2026</div>
|
||
<div class="row-date-sub">erstellt · 16:55</div>
|
||
</td>
|
||
<td>
|
||
<button class="menu-trigger" aria-label="Aktionen">
|
||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="3.5" r="1.2" fill="currentColor"/><circle cx="8" cy="8" r="1.2" fill="currentColor"/><circle cx="8" cy="12.5" r="1.2" fill="currentColor"/></svg>
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<!-- Footer / Pagination -->
|
||
<div class="px-5 py-3 bg-bg-elev border-t border-bg-rule flex items-center justify-between flex-wrap gap-3">
|
||
<div class="flex items-center gap-3 text-[12px] text-ink-3">
|
||
<span><strong class="text-ink-2 font-semibold">1–12</strong> von <strong class="text-ink-2 font-semibold">24</strong></span>
|
||
<span class="text-ink-4">·</span>
|
||
<label class="flex items-center gap-2">
|
||
<span>Pro Seite</span>
|
||
<select class="bg-white border border-bg-rule rounded-[3px] text-[12px] py-1 px-2 pr-6 text-ink-2 font-medium focus:outline-none focus:border-hub">
|
||
<option>12</option><option selected="">25</option><option>50</option><option>100</option>
|
||
</select>
|
||
</label>
|
||
</div>
|
||
|
||
<div class="flex items-center gap-1.5">
|
||
<button class="page-btn is-disabled" aria-label="Vorherige Seite">
|
||
<svg width="11" height="11" viewBox="0 0 12 12" fill="none"><path d="M7.5 3L4.5 6l3 3" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
</button>
|
||
<button class="page-btn is-current">1</button>
|
||
<button class="page-btn">2</button>
|
||
<button class="page-btn">…</button>
|
||
<button class="page-btn" aria-label="Nächste Seite">
|
||
<svg width="11" height="11" viewBox="0 0 12 12" fill="none"><path d="M4.5 3l3 3-3 3" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============== EMPTY STATE — Filter ohne Treffer ============== -->
|
||
<div data-state="empty-filter" style="display:none;">
|
||
<div class="empty-stage">
|
||
<div class="empty-ico warm">
|
||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none"><path d="M3 5h18l-7 9v5l-4 1v-6z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>
|
||
</div>
|
||
<h3 class="empty-title">Keine Mitteilungen mit diesen Filtern</h3>
|
||
<p class="empty-sub">Aktive Filter passen auf keine Einträge. Setzen Sie einen Filter zurück oder probieren Sie eine breitere Auswahl.</p>
|
||
<div class="flex items-center gap-2.5 mt-6">
|
||
<button class="btn-primary">Alle Filter zurücksetzen</button>
|
||
<button class="btn-secondary">Filter bearbeiten</button>
|
||
</div>
|
||
<!-- Erinnerung: aktive Filter -->
|
||
<div class="flex items-center gap-2 mt-7 flex-wrap justify-center">
|
||
<span class="eyebrow muted">Aktiv</span>
|
||
<span class="active-chip"><span>Status: <strong>Abgelehnt</strong></span><button class="x"><svg width="8" height="8" viewBox="0 0 12 12" fill="none"><path d="M3 3l6 6M9 3l-6 6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg></button></span>
|
||
<span class="active-chip"><span>Portal: <strong>presseecho</strong></span><button class="x"><svg width="8" height="8" viewBox="0 0 12 12" fill="none"><path d="M3 3l6 6M9 3l-6 6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg></button></span>
|
||
<span class="active-chip"><span>Zeitraum: <strong>Diese Woche</strong></span><button class="x"><svg width="8" height="8" viewBox="0 0 12 12" fill="none"><path d="M3 3l6 6M9 3l-6 6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg></button></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============== EMPTY STATE — Suche ohne Treffer ============== -->
|
||
<div data-state="empty-search" style="display:none;">
|
||
<div class="empty-stage">
|
||
<div class="empty-ico">
|
||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none"><circle cx="10.5" cy="10.5" r="6" stroke="currentColor" stroke-width="1.6"/><path d="M15.5 15.5L20 20" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
|
||
</div>
|
||
<h3 class="empty-title">Keine Treffer für „brauerei wien expansion 2027"</h3>
|
||
<p class="empty-sub">Wir konnten zu Ihrer Suche nichts finden. Prüfen Sie die Schreibweise oder schränken Sie den Suchbegriff ein.</p>
|
||
<div class="flex items-center gap-2.5 mt-6">
|
||
<button class="btn-primary">Suchbegriff bearbeiten</button>
|
||
<button class="btn-secondary">Suche zurücksetzen</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============== EMPTY STATE — keine Mitteilung überhaupt ============== -->
|
||
<div data-state="empty-none" style="display:none;">
|
||
<div class="empty-stage">
|
||
<div class="empty-ico" style="background:#E5E9F1;">
|
||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none">
|
||
<rect x="3" y="4" width="14" height="16" stroke="currentColor" stroke-width="1.5"/>
|
||
<path d="M17 7h4v13H6" stroke="currentColor" stroke-width="1.5"/>
|
||
<path d="M6 8h8M6 11h8M6 14h5" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
|
||
</svg>
|
||
</div>
|
||
<h3 class="empty-title">Noch keine Pressemitteilungen</h3>
|
||
<p class="empty-sub">Starten Sie mit Ihrer ersten Mitteilung. Nach redaktioneller Prüfung erscheint sie i. d. R. binnen 4 Stunden werktags auf beiden Portalen.</p>
|
||
<div class="flex items-center gap-2.5 mt-6">
|
||
<a href="Veroeffentlichen.html" class="btn-primary">
|
||
<svg width="11" height="11" viewBox="0 0 12 12" fill="none"><path d="M6 2v8M2 6h8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
|
||
Erste Pressemitteilung erstellen
|
||
</a>
|
||
<button class="btn-secondary">Vorlage öffnen</button>
|
||
</div>
|
||
<div class="mt-9 grid gap-3 w-full max-w-[560px]" style="grid-template-columns:repeat(3,1fr);">
|
||
<div class="text-left px-3 py-2.5 bg-bg-elev border border-bg-rule rounded-[3px]">
|
||
<div class="font-mono text-[9.5px] tracking-[0.16em] text-accent font-bold mb-1">01</div>
|
||
<div class="text-[11.5px] font-semibold text-ink leading-tight">Firma zuordnen</div>
|
||
</div>
|
||
<div class="text-left px-3 py-2.5 bg-bg-elev border border-bg-rule rounded-[3px]">
|
||
<div class="font-mono text-[9.5px] tracking-[0.16em] text-accent font-bold mb-1">02</div>
|
||
<div class="text-[11.5px] font-semibold text-ink leading-tight">Mitteilung verfassen</div>
|
||
</div>
|
||
<div class="text-left px-3 py-2.5 bg-bg-elev border border-bg-rule rounded-[3px]">
|
||
<div class="font-mono text-[9.5px] tracking-[0.16em] text-accent font-bold mb-1">03</div>
|
||
<div class="text-[11.5px] font-semibold text-ink leading-tight">Zur Prüfung senden</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</article>
|
||
|
||
<!-- ============== STATUS-AKTIONEN-LEGENDE ============== -->
|
||
<article class="panel-warm p-5">
|
||
<div class="grid items-start gap-6" style="grid-template-columns:auto 1fr;">
|
||
<div class="min-w-[180px]">
|
||
<div class="section-eyebrow">Aktionen je Status</div>
|
||
<p class="text-[12px] text-ink-3 leading-[1.55] mt-3 m-0 max-w-[200px]">
|
||
Welche Aktionen das ⋯-Menü und die Inline-Buttons jeweils anbieten.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="grid gap-4" style="grid-template-columns:repeat(5,1fr);">
|
||
<div>
|
||
<span class="badge muted dot" style="margin-bottom:8px;">Entwurf</span>
|
||
<ul class="text-[11.5px] text-ink-2 leading-[1.7] mt-2 list-none p-0 m-0 space-y-0.5">
|
||
<li>Bearbeiten</li>
|
||
<li>Duplizieren</li>
|
||
<li>Löschen</li>
|
||
<li class="text-accent-deep font-semibold">→ Zur Prüfung senden</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<span class="badge warn dot" style="margin-bottom:8px;">In Prüfung</span>
|
||
<ul class="text-[11.5px] text-ink-2 leading-[1.7] mt-2 list-none p-0 m-0 space-y-0.5">
|
||
<li>Vorschau</li>
|
||
<li>Duplizieren</li>
|
||
<li class="text-accent-deep font-semibold">→ Zurückziehen</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<span class="badge ok dot" style="margin-bottom:8px;">Veröffentlicht</span>
|
||
<ul class="text-[11.5px] text-ink-2 leading-[1.7] mt-2 list-none p-0 m-0 space-y-0.5">
|
||
<li>Vorschau</li>
|
||
<li>Statistik</li>
|
||
<li>Duplizieren</li>
|
||
<li>Archivieren</li>
|
||
<li class="text-accent-deep font-semibold">→ Korrektur einreichen</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<span class="badge err dot" style="margin-bottom:8px;">Abgelehnt</span>
|
||
<ul class="text-[11.5px] text-ink-2 leading-[1.7] mt-2 list-none p-0 m-0 space-y-0.5">
|
||
<li>Bearbeiten</li>
|
||
<li>Duplizieren</li>
|
||
<li>Löschen</li>
|
||
<li class="text-accent-deep font-semibold">→ Ablehnungsgrund</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<span class="badge muted dot" style="margin-bottom:8px;">Archiviert</span>
|
||
<ul class="text-[11.5px] text-ink-2 leading-[1.7] mt-2 list-none p-0 m-0 space-y-0.5">
|
||
<li>Vorschau</li>
|
||
<li class="text-accent-deep font-semibold">→ Reaktivieren</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- ============== FUSSZEILE ============== -->
|
||
<footer class="flex items-center justify-between pt-4 pb-2 text-[11px] text-ink-3 border-t border-bg-rule">
|
||
<span>© 2026 presseportale.com · Publisher-Hub</span>
|
||
<span class="flex items-center gap-5">
|
||
<a href="#" class="hover:text-hub">Tastenkürzel</a>
|
||
<a href="#" class="hover:text-hub">Changelog</a>
|
||
<a href="#" class="hover:text-hub">Statusseite</a>
|
||
<a href="/cdn-cgi/l/email-protection#ccbfb9bcbca3beb88cbcbea9bfbfa9bca3beb8ada0a9e2afa3a1" class="hover:text-hub">Support</a>
|
||
</span>
|
||
</footer>
|
||
|
||
</div>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===================== TWEAKS ===================== -->
|
||
<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
|
||
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
|
||
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
|
||
<script type="text/babel" src="tweaks-panel.jsx"></script>
|
||
|
||
<div id="tweaks-root"></div>
|
||
|
||
<script type="text/babel">
|
||
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
|
||
"view_state": "list",
|
||
"table_density": "comfortable",
|
||
"show_legend": true,
|
||
"show_inline_actions": true
|
||
}/*EDITMODE-END*/;
|
||
|
||
function applyState(t) {
|
||
// Tabellen-State umschalten
|
||
const host = document.querySelector("[data-state-host]");
|
||
if (host) {
|
||
host.querySelectorAll("[data-state]").forEach((el) => {
|
||
el.style.display = (el.getAttribute("data-state") === t.view_state) ? "" : "none";
|
||
});
|
||
}
|
||
// Dichte
|
||
document.querySelectorAll("table.list tbody td").forEach((td) => {
|
||
td.style.paddingTop = t.table_density === "compact" ? "9px" : "14px";
|
||
td.style.paddingBottom = t.table_density === "compact" ? "9px" : "14px";
|
||
});
|
||
document.querySelectorAll(".row-sub").forEach((el) => {
|
||
el.style.display = t.table_density === "compact" ? "none" : "";
|
||
});
|
||
document.querySelectorAll(".row-date-sub").forEach((el) => {
|
||
el.style.display = t.table_density === "compact" ? "none" : "";
|
||
});
|
||
// Legende
|
||
const legend = document.querySelector(".panel-warm");
|
||
if (legend) legend.style.display = t.show_legend ? "" : "none";
|
||
// Inline-Actions
|
||
document.querySelectorAll(".inline-action").forEach((el) => {
|
||
el.style.display = t.show_inline_actions ? "" : "none";
|
||
});
|
||
}
|
||
|
||
function TweaksApp() {
|
||
const { TweaksPanel, TweakSection, TweakRadio, TweakToggle, TweakSelect } = window;
|
||
const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
|
||
|
||
React.useEffect(() => { applyState(t); }, [t]);
|
||
|
||
return (
|
||
<TweaksPanel title="Tweaks">
|
||
<TweakSection label="Ansicht">
|
||
<TweakSelect
|
||
label="Listen-Zustand"
|
||
value={t.view_state}
|
||
onChange={(v) => setTweak("view_state", v)}
|
||
options={[
|
||
{ value: "list", label: "Tabelle (24 Einträge)" },
|
||
{ value: "empty-filter", label: "Empty · Filter ohne Treffer" },
|
||
{ value: "empty-search", label: "Empty · Suche ohne Treffer" },
|
||
{ value: "empty-none", label: "Empty · noch keine Mitteilung" },
|
||
]}
|
||
/>
|
||
<TweakRadio
|
||
label="Dichte"
|
||
value={t.table_density}
|
||
onChange={(v) => setTweak("table_density", v)}
|
||
options={[
|
||
{ value: "comfortable", label: "Komfort" },
|
||
{ value: "compact", label: "Kompakt" },
|
||
]}
|
||
/>
|
||
</TweakSection>
|
||
<TweakSection label="Details">
|
||
<TweakToggle
|
||
label="Inline-Workflow-Buttons"
|
||
value={t.show_inline_actions}
|
||
onChange={(v) => setTweak("show_inline_actions", v)}
|
||
/>
|
||
<TweakToggle
|
||
label="Aktions-Legende"
|
||
value={t.show_legend}
|
||
onChange={(v) => setTweak("show_legend", v)}
|
||
/>
|
||
</TweakSection>
|
||
</TweaksPanel>
|
||
);
|
||
}
|
||
|
||
const root = ReactDOM.createRoot(document.getElementById("tweaks-root"));
|
||
root.render(<TweaksApp />);
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|