new file: assets/css/style.css
This commit is contained in:
Sven Steinert
785
assets/css/style.css
Normal file
785
assets/css/style.css
Normal file
@@ -0,0 +1,785 @@
|
||||
/* =========================
|
||||
JuConnect · Tool-first Styleguide (v0.2)
|
||||
========================= */
|
||||
|
||||
/* Source Sans 3 (lokal) */
|
||||
@font-face{
|
||||
font-family: "Source Sans 3";
|
||||
src: url("../fonts/SourceSans3-VariableFont_wght.ttf") format("truetype");
|
||||
font-weight: 200 900;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face{
|
||||
font-family: "Source Sans 3";
|
||||
src: url("../fonts/SourceSans3-Italic-VariableFont_wght.ttf") format("truetype");
|
||||
font-weight: 200 900;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
:root{
|
||||
/* Brand */
|
||||
--primary: #1d354f; /* JuConnect Blau */
|
||||
--accent: #8FAE9A; /* Salbei warm (support only) */
|
||||
|
||||
/* Neutral scale (light) */
|
||||
--bg: #f6f7f8;
|
||||
--surface: #ffffff;
|
||||
--surface2: #eef1f3;
|
||||
--text: #101922;
|
||||
--text2: #3c4a58;
|
||||
--muted: #607384;
|
||||
--line: #d7dee5;
|
||||
|
||||
/* Status */
|
||||
--info: #2b6cb0;
|
||||
--success: #2f855a;
|
||||
--warn: #b7791f;
|
||||
--danger: #c53030;
|
||||
|
||||
/* Typography */
|
||||
--font: "Source Sans 3", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
|
||||
--fs-1: 2.0rem; /* H1 */
|
||||
--fs-2: 1.5rem; /* H2 */
|
||||
--fs-3: 1.125rem; /* H3 */
|
||||
--fs-b: 1.0rem; /* body */
|
||||
--fs-s: 0.92rem; /* small */
|
||||
|
||||
--lh-tight: 1.2;
|
||||
--lh-base: 1.55;
|
||||
|
||||
/* Layout */
|
||||
--maxw: 1120px;
|
||||
--radius: 14px;
|
||||
--radius-sm: 10px;
|
||||
|
||||
/* Spacing */
|
||||
--s1: 6px;
|
||||
--s2: 10px;
|
||||
--s3: 14px;
|
||||
--s4: 18px;
|
||||
--s5: 24px;
|
||||
--s6: 32px;
|
||||
|
||||
/* Shadows */
|
||||
--shadow-sm: 0 6px 16px rgba(16, 25, 34, .08);
|
||||
--shadow: 0 10px 28px rgba(16, 25, 34, .10);
|
||||
|
||||
/* Focus (accent only for focus/marker) */
|
||||
--focus: 0 0 0 3px rgba(143, 174, 154, .35);
|
||||
|
||||
/* Header/Hero gradient system */
|
||||
--header-shell-border: rgba(29,53,79,.16);
|
||||
--header-grad-accent: rgba(143,174,154,.22);
|
||||
--header-grad-primary: rgba(29,53,79,.10);
|
||||
}
|
||||
|
||||
[data-theme="dark"]{
|
||||
--bg: #0e1318;
|
||||
--surface: #131a21;
|
||||
--surface2: #18212a;
|
||||
--text: #e8eef4;
|
||||
--text2: #c2cdd8;
|
||||
--muted: #9fb0c0;
|
||||
--line: #24303b;
|
||||
--shadow-sm: 0 8px 18px rgba(0,0,0,.35);
|
||||
--shadow: 0 12px 30px rgba(0,0,0,.45);
|
||||
--header-shell-border: rgba(143,174,154,.28);
|
||||
--header-grad-accent: rgba(143,174,154,.18);
|
||||
--header-grad-primary: rgba(143,174,154,.15);
|
||||
}
|
||||
|
||||
/* Base */
|
||||
*{ box-sizing: border-box; }
|
||||
html, body{ height: 100%; }
|
||||
body{
|
||||
margin: 0;
|
||||
font-family: var(--font);
|
||||
font-size: var(--fs-b);
|
||||
line-height: var(--lh-base);
|
||||
color: var(--text);
|
||||
background: var(--bg);
|
||||
}
|
||||
code{
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
|
||||
font-size: .95em;
|
||||
}
|
||||
a{ color: inherit; }
|
||||
.hr{
|
||||
border: 0;
|
||||
border-top: 1px solid var(--line);
|
||||
margin: var(--s4) 0;
|
||||
}
|
||||
.spacer{ height: var(--s4); }
|
||||
|
||||
/* Screen-reader only */
|
||||
.sr-only{
|
||||
position:absolute;
|
||||
width:1px;height:1px;
|
||||
padding:0;margin:-1px;
|
||||
overflow:hidden;clip:rect(0,0,0,0);
|
||||
white-space:nowrap;border:0;
|
||||
}
|
||||
|
||||
/* Skip Link */
|
||||
.skip-link{
|
||||
position: absolute;
|
||||
left: -999px;
|
||||
top: 10px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--line);
|
||||
padding: var(--s2) var(--s3);
|
||||
border-radius: var(--radius-sm);
|
||||
box-shadow: var(--shadow-sm);
|
||||
z-index: 999;
|
||||
}
|
||||
.skip-link:focus{
|
||||
left: 10px;
|
||||
outline: none;
|
||||
box-shadow: var(--focus), var(--shadow-sm);
|
||||
}
|
||||
|
||||
/* App layout (ProcXera-ish) */
|
||||
.app{
|
||||
display: grid;
|
||||
grid-template-columns: 320px 1fr;
|
||||
min-height: 100vh;
|
||||
}
|
||||
@media (max-width: 1020px){
|
||||
.app{ grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
/* Side nav (sticky) */
|
||||
.sidenav{
|
||||
border-right: 1px solid var(--line);
|
||||
background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
|
||||
}
|
||||
.sidenav__inner{
|
||||
position: sticky;
|
||||
top: 0;
|
||||
min-height: 100vh;
|
||||
padding: var(--s5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@media (max-width: 1020px){
|
||||
.sidenav__inner{
|
||||
position: static;
|
||||
height: auto;
|
||||
overflow: visible;
|
||||
padding-bottom: var(--s4);
|
||||
}
|
||||
}
|
||||
|
||||
.sidenav__top{ display:flex; flex-direction:column; gap: var(--s3); }
|
||||
.brand{
|
||||
display:flex;
|
||||
gap: var(--s3);
|
||||
text-decoration:none;
|
||||
align-items:center;
|
||||
}
|
||||
.brand__logo{
|
||||
width: 44px; height: 44px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.brand__name{ font-weight: 800; letter-spacing: .2px; }
|
||||
.brand__tagline{ font-size: var(--fs-s); color: var(--muted); }
|
||||
|
||||
.sidenav__actions{ display:flex; gap: 8px; flex-wrap: wrap; }
|
||||
|
||||
.sidenav__search{ margin-top: var(--s2); }
|
||||
.input--sm{ padding: 8px 10px; border-radius: 12px; font-size: var(--fs-s); }
|
||||
|
||||
.sidenav__nav{
|
||||
margin-top: var(--s4);
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
gap: var(--s3);
|
||||
}
|
||||
.navgroup__title{
|
||||
font-size: var(--fs-s);
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .08em;
|
||||
margin: var(--s2) 0;
|
||||
}
|
||||
.navlink{
|
||||
text-decoration:none;
|
||||
padding: 10px 12px;
|
||||
border-radius: 12px;
|
||||
color: var(--text2);
|
||||
border: 1px solid transparent;
|
||||
display:block;
|
||||
}
|
||||
.navlink:hover{
|
||||
background: var(--surface2);
|
||||
color: var(--text);
|
||||
}
|
||||
.navlink.is-active{
|
||||
background: rgba(29,53,79,.10);
|
||||
color: var(--text);
|
||||
border-color: rgba(29,53,79,.18);
|
||||
}
|
||||
.sidenav__bottom{ margin-top: auto; padding-top: var(--s5); }
|
||||
|
||||
@media (min-width: 1021px) and (max-height: 1080px){
|
||||
.sidenav__inner{ padding: var(--s4); }
|
||||
.sidenav__top{ gap: var(--s2); }
|
||||
.sidenav__nav{ margin-top: var(--s3); gap: var(--s2); }
|
||||
.navgroup__title{ margin: var(--s1) 0; }
|
||||
.navlink{ padding: 8px 10px; }
|
||||
.sidenav__bottom{ padding-top: var(--s4); }
|
||||
}
|
||||
|
||||
.mini-note{
|
||||
border: 1px solid var(--line);
|
||||
background: var(--surface);
|
||||
border-radius: var(--radius);
|
||||
padding: var(--s4);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
.mini-note__title{ font-weight: 800; margin-bottom: 6px; }
|
||||
.mini-note__text{ color: var(--muted); font-size: var(--fs-s); }
|
||||
|
||||
/* Main */
|
||||
.main{
|
||||
padding: var(--s6);
|
||||
max-width: calc(var(--maxw) + 2*var(--s6));
|
||||
}
|
||||
@media (max-width: 1020px){
|
||||
.main{ padding: var(--s5); }
|
||||
}
|
||||
|
||||
/* Page head */
|
||||
.pagehead{
|
||||
display:grid;
|
||||
grid-template-columns: 1fr 340px;
|
||||
gap: var(--s5);
|
||||
align-items: start;
|
||||
margin-bottom: var(--s6);
|
||||
position: relative;
|
||||
padding: var(--s6);
|
||||
border: 1px solid var(--header-shell-border);
|
||||
border-radius: 20px;
|
||||
background:
|
||||
radial-gradient(120% 140% at 100% 0%, var(--header-grad-accent) 0%, rgba(143,174,154,0) 50%),
|
||||
radial-gradient(120% 140% at 0% 100%, var(--header-grad-primary) 0%, rgba(29,53,79,0) 60%),
|
||||
var(--surface);
|
||||
box-shadow: var(--shadow-sm);
|
||||
overflow: hidden;
|
||||
}
|
||||
@media (max-width: 1020px){
|
||||
.pagehead{
|
||||
grid-template-columns: 1fr;
|
||||
padding: var(--s5);
|
||||
}
|
||||
}
|
||||
.pagehead__left{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--s3);
|
||||
}
|
||||
.pagehead__eyebrow{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--s2);
|
||||
}
|
||||
.pagehead__chips{
|
||||
display:flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.pagehead__brand img{
|
||||
display: block;
|
||||
width: auto;
|
||||
height: 104px;
|
||||
}
|
||||
.pagehead .h1{
|
||||
font-size: clamp(2rem, 3.2vw, 2.7rem);
|
||||
margin: 0;
|
||||
}
|
||||
.pagehead .lead{
|
||||
max-width: 64ch;
|
||||
}
|
||||
.pagehead__right .card{
|
||||
border-color: var(--header-shell-border);
|
||||
background: var(--surface);
|
||||
}
|
||||
@media (max-width: 1020px){
|
||||
.pagehead__brand img{ height: 84px; }
|
||||
}
|
||||
|
||||
/* Sections */
|
||||
.section{ margin: 0 0 var(--s6) 0; }
|
||||
.section__head{ margin-bottom: var(--s4); }
|
||||
.footer{
|
||||
padding-top: var(--s4);
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
/* Typography helpers */
|
||||
.h1{ font-size: var(--fs-1); line-height: var(--lh-tight); margin: 0 0 var(--s2) 0; }
|
||||
.h2{ font-size: var(--fs-2); line-height: 1.25; margin: 0 0 var(--s2) 0; }
|
||||
.h3{ font-size: var(--fs-3); line-height: 1.25; margin: 0; }
|
||||
.lead{ font-size: 1.1rem; color: var(--text2); margin: 0; max-width: 75ch; }
|
||||
.muted{ color: var(--muted); }
|
||||
.typeset p{ max-width: 75ch; }
|
||||
|
||||
/* Layout utilities */
|
||||
.grid{ display:grid; gap: var(--s4); }
|
||||
.grid--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.grid--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
.section > .grid + .grid{ margin-top: var(--s4); }
|
||||
.section > .grid + .card,
|
||||
.section > .card + .grid{ margin-top: var(--s4); }
|
||||
@media (max-width: 1020px){
|
||||
.grid--2, .grid--3{ grid-template-columns: 1fr; }
|
||||
}
|
||||
.row{ display:flex; gap: var(--s2); align-items:center; }
|
||||
.wrap{ flex-wrap: wrap; }
|
||||
|
||||
/* Cards */
|
||||
.card{
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
padding: var(--s5);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
.card--tight{ padding: var(--s4); }
|
||||
.card:not(.card--tight):not(.swatch) > * + *{ margin-top: var(--s4); }
|
||||
.card:not(.card--tight):not(.swatch) > .card__head{ margin-bottom: 0; }
|
||||
.card__head{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content: space-between;
|
||||
gap: var(--s3);
|
||||
margin-bottom: var(--s3);
|
||||
}
|
||||
|
||||
/* KPI */
|
||||
.kpi{ display:flex; justify-content: space-between; gap: var(--s3); padding: 10px 0; border-bottom: 1px solid var(--line); }
|
||||
.kpi:last-child{ border-bottom: 0; }
|
||||
.kpi__label{ color: var(--muted); font-size: var(--fs-s); }
|
||||
.kpi__value{ font-weight: 800; color: var(--text2); }
|
||||
|
||||
/* Pills with copy */
|
||||
.pill{
|
||||
display:inline-flex;
|
||||
align-items:center;
|
||||
gap: 10px;
|
||||
border: 1px solid var(--line);
|
||||
background: var(--surface);
|
||||
border-radius: 999px;
|
||||
padding: 8px 10px 8px 12px;
|
||||
color: var(--text2);
|
||||
}
|
||||
.pill__dot{
|
||||
width: 10px; height: 10px;
|
||||
border-radius: 999px;
|
||||
background: var(--primary);
|
||||
}
|
||||
.pill--accent .pill__dot{ background: var(--accent); }
|
||||
.pill__copy{
|
||||
border: 1px solid var(--line);
|
||||
background: var(--surface2);
|
||||
border-radius: 999px;
|
||||
width: 28px; height: 28px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.pill__copy:hover{ filter: brightness(0.98); }
|
||||
|
||||
/* Links */
|
||||
.link{
|
||||
color: var(--primary);
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
.link:hover{ text-decoration-thickness: 2px; }
|
||||
|
||||
/* Focus */
|
||||
:focus-visible{ outline: none; box-shadow: var(--focus); border-radius: 10px; }
|
||||
|
||||
/* Buttons */
|
||||
.btn{
|
||||
border: 1px solid transparent;
|
||||
background: transparent;
|
||||
color: var(--text);
|
||||
padding: 10px 14px;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
display:inline-flex;
|
||||
align-items:center;
|
||||
gap: 10px;
|
||||
transition: transform .06s ease, background .15s ease, border-color .15s ease, filter .15s ease;
|
||||
}
|
||||
.btn:active{ transform: translateY(1px); }
|
||||
.btn[disabled]{ opacity: .55; cursor: not-allowed; transform: none; }
|
||||
|
||||
.btn--primary{
|
||||
background: var(--primary);
|
||||
border-color: rgba(0,0,0,.06);
|
||||
color: #fff;
|
||||
}
|
||||
.btn--primary:hover{ filter: brightness(0.98); }
|
||||
|
||||
.btn--secondary{
|
||||
background: var(--surface2);
|
||||
border-color: var(--line);
|
||||
color: var(--text);
|
||||
}
|
||||
.btn--secondary:hover{ filter: brightness(0.98); }
|
||||
|
||||
.btn--ghost{
|
||||
border-color: var(--line);
|
||||
background: transparent;
|
||||
color: var(--text);
|
||||
}
|
||||
.btn--ghost:hover{ background: var(--surface2); }
|
||||
|
||||
.btn--danger{
|
||||
border-color: rgba(197,48,48,.35);
|
||||
background: rgba(197,48,48,.10);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.btn--sm{ padding: 8px 10px; border-radius: 12px; font-size: var(--fs-s); }
|
||||
.btn--icon{ padding: 8px 10px; }
|
||||
|
||||
.btn__icon{ opacity: .9; }
|
||||
|
||||
/* Lists */
|
||||
.list{ margin: 0; padding-left: 18px; color: var(--text2); }
|
||||
.list li{ margin: 6px 0; }
|
||||
|
||||
/* Badges */
|
||||
.badge{
|
||||
display:inline-flex;
|
||||
align-items:center;
|
||||
padding: 6px 10px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--line);
|
||||
font-size: var(--fs-s);
|
||||
color: var(--text2);
|
||||
background: var(--surface2);
|
||||
}
|
||||
.badge--info{ border-color: rgba(43,108,176,.35); background: rgba(43,108,176,.10); color: var(--info); }
|
||||
.badge--success{ border-color: rgba(47,133,90,.35); background: rgba(47,133,90,.10); color: var(--success); }
|
||||
.badge--warn{ border-color: rgba(183,121,31,.35); background: rgba(183,121,31,.12); color: var(--warn); }
|
||||
.badge--danger{ border-color: rgba(197,48,48,.35); background: rgba(197,48,48,.12); color: var(--danger); }
|
||||
|
||||
/* Callouts */
|
||||
.callout{
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid var(--line);
|
||||
background: var(--surface2);
|
||||
padding: var(--s4);
|
||||
}
|
||||
.callout__title{ font-weight: 800; margin-bottom: 4px; }
|
||||
.callout__text{ color: var(--text2); }
|
||||
.callout--info{ border-color: rgba(43,108,176,.28); background: rgba(43,108,176,.08); }
|
||||
.callout--accent{ border-color: rgba(143,174,154,.35); background: rgba(143,174,154,.10); }
|
||||
|
||||
/* Forms */
|
||||
.form{ display:flex; flex-direction:column; gap: var(--s4); }
|
||||
.field{ display:flex; flex-direction:column; gap: 6px; }
|
||||
.field--inline{ flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s3); }
|
||||
.label{ font-weight: 800; color: var(--text2); }
|
||||
.help{ font-size: var(--fs-s); color: var(--muted); }
|
||||
.error{ font-size: var(--fs-s); color: var(--danger); }
|
||||
.field.is-error .input,
|
||||
.field.is-error .select,
|
||||
.field.is-error .textarea{
|
||||
border-color: rgba(197,48,48,.55);
|
||||
box-shadow: 0 0 0 3px rgba(197,48,48,.12);
|
||||
}
|
||||
|
||||
.input, .select, .textarea{
|
||||
width: 100%;
|
||||
border: 1px solid var(--line);
|
||||
background: var(--surface);
|
||||
color: var(--text);
|
||||
border-radius: 12px;
|
||||
padding: 10px 12px;
|
||||
font: inherit;
|
||||
transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
|
||||
}
|
||||
.input::placeholder, .textarea::placeholder{ color: var(--muted); }
|
||||
.input:focus, .select:focus, .textarea:focus{
|
||||
outline: none;
|
||||
border-color: rgba(29,53,79,.55);
|
||||
box-shadow: var(--focus);
|
||||
}
|
||||
|
||||
.check{ display:flex; align-items:center; gap: 10px; }
|
||||
.check__box{ width: 18px; height: 18px; }
|
||||
|
||||
/* Snippets (tool-first copy blocks) */
|
||||
.snippet{
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
background: var(--surface);
|
||||
overflow: hidden;
|
||||
}
|
||||
.snippet__head{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content: space-between;
|
||||
gap: var(--s3);
|
||||
padding: 12px 14px;
|
||||
background: var(--surface2);
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
.snippet__title{ font-weight: 800; color: var(--text2); }
|
||||
.snippet__code{
|
||||
margin: 0;
|
||||
padding: 14px;
|
||||
overflow:auto;
|
||||
font-size: 0.92rem;
|
||||
line-height: 1.5;
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
/* Swatches */
|
||||
.swatch{ display:flex; align-items:flex-start; gap: var(--s4); }
|
||||
.swatch__chip{
|
||||
width: 58px; height: 58px;
|
||||
border-radius: 16px;
|
||||
border: 1px solid var(--line);
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.swatch__chip--primary{ background: var(--primary); border-color: rgba(0,0,0,.08); }
|
||||
.swatch__chip--accent{ background: var(--accent); border-color: rgba(0,0,0,.08); }
|
||||
.swatch__chip--bg{ background: var(--bg); }
|
||||
.swatch__name{ font-weight: 800; margin-bottom: 4px; }
|
||||
.swatch__row{ color: var(--muted); font-size: var(--fs-s); display:flex; align-items:center; gap: 8px; flex-wrap: wrap; }
|
||||
.dot{ opacity: .7; }
|
||||
.swatch__actions{ margin-top: 10px; display:flex; gap: 8px; }
|
||||
.gradient-preview{
|
||||
height: 120px;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--header-shell-border);
|
||||
background:
|
||||
radial-gradient(120% 140% at 100% 0%, var(--header-grad-accent) 0%, rgba(143,174,154,0) 50%),
|
||||
radial-gradient(120% 140% at 0% 100%, var(--header-grad-primary) 0%, rgba(29,53,79,0) 60%),
|
||||
var(--surface);
|
||||
}
|
||||
.image-grid{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: var(--s3);
|
||||
}
|
||||
.image-card{
|
||||
margin: 0;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: var(--s2);
|
||||
background: var(--surface2);
|
||||
}
|
||||
.image-card img{
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
object-fit: cover;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.image-card figcaption{
|
||||
margin-top: var(--s2);
|
||||
font-size: var(--fs-s);
|
||||
}
|
||||
@media (max-width: 760px){
|
||||
.image-grid{ grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
/* Logo demo */
|
||||
.logo-demo{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
|
||||
@media (max-width: 520px){ .logo-demo{ grid-template-columns: 1fr; } }
|
||||
.logo-demo__label{ font-size: var(--fs-s); color: var(--muted); margin-bottom: 6px; }
|
||||
.logo-demo__surface{
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid var(--line);
|
||||
padding: var(--s4);
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
}
|
||||
.logo-demo__surface--light{ background: #fff; }
|
||||
.logo-demo__surface--dark{ background: var(--primary); }
|
||||
.logo-demo--icon .logo-demo__surface{ min-height: 130px; }
|
||||
.logo-demo__icon{
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
.logo-downloads{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: var(--s2);
|
||||
align-items: stretch;
|
||||
}
|
||||
.logo-downloads .btn{
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
@media (max-width: 640px){
|
||||
.logo-downloads{ grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
/* Tabs */
|
||||
.tabs__list{
|
||||
display:flex;
|
||||
gap: 8px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.tab{
|
||||
border: 1px solid var(--line);
|
||||
background: var(--surface);
|
||||
color: var(--text2);
|
||||
padding: 8px 12px;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
}
|
||||
.tab:hover{ background: var(--surface2); }
|
||||
.tab.is-active{
|
||||
background: rgba(29,53,79,.10);
|
||||
border-color: rgba(29,53,79,.18);
|
||||
color: var(--text);
|
||||
}
|
||||
.tabs__panel{ padding-top: var(--s3); display:none; }
|
||||
.tabs__panel.is-active{ display:block; }
|
||||
|
||||
/* Accordion */
|
||||
.accordion{ display:flex; flex-direction:column; gap: 8px; }
|
||||
.acc__trigger{
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
border: 1px solid var(--line);
|
||||
background: var(--surface);
|
||||
color: var(--text);
|
||||
padding: 12px 14px;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
.acc__trigger:hover{ background: var(--surface2); }
|
||||
.acc__panel{
|
||||
border: 1px solid var(--line);
|
||||
border-top: 0;
|
||||
background: var(--surface);
|
||||
border-radius: 0 0 12px 12px;
|
||||
padding: 12px 14px;
|
||||
margin-top: -8px;
|
||||
}
|
||||
|
||||
/* Table */
|
||||
.tablewrap{ overflow:auto; }
|
||||
.table{
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
min-width: 520px;
|
||||
}
|
||||
.table th, .table td{
|
||||
text-align: left;
|
||||
padding: 12px 10px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
.table th{ color: var(--text2); font-weight: 800; background: var(--surface2); }
|
||||
.table tr:hover td{ background: rgba(29,53,79,.05); }
|
||||
|
||||
@media (min-width: 1021px){
|
||||
#layout .layout__table{ grid-column: 1 / -1; }
|
||||
}
|
||||
|
||||
/* Hero pattern */
|
||||
.hero{
|
||||
margin-top: var(--s4);
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid var(--header-shell-border);
|
||||
background:
|
||||
radial-gradient(120% 140% at 100% 0%, var(--header-grad-accent) 0%, rgba(143,174,154,0) 50%),
|
||||
radial-gradient(120% 140% at 0% 100%, var(--header-grad-primary) 0%, rgba(29,53,79,0) 60%),
|
||||
var(--surface);
|
||||
padding: var(--s6);
|
||||
}
|
||||
.hero__inner{ max-width: 75ch; }
|
||||
.hero .row{ margin-top: var(--s3); }
|
||||
|
||||
/* Modal */
|
||||
.modal{
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
display:grid;
|
||||
place-items: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
.modal[hidden]{ display:none !important; }
|
||||
.modal__backdrop{
|
||||
position:absolute;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,.35);
|
||||
z-index: 0;
|
||||
}
|
||||
.modal__panel{
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: min(640px, calc(100% - 32px));
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid var(--line);
|
||||
background: var(--surface);
|
||||
box-shadow: var(--shadow);
|
||||
overflow: hidden;
|
||||
}
|
||||
.modal__head, .modal__foot{
|
||||
padding: var(--s4) var(--s5);
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content: space-between;
|
||||
gap: var(--s3);
|
||||
background: var(--surface2);
|
||||
}
|
||||
.modal__body{ padding: var(--s5); }
|
||||
|
||||
/* Toasts */
|
||||
.toasts{
|
||||
position: fixed;
|
||||
right: 18px;
|
||||
bottom: 18px;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
z-index: 1100;
|
||||
}
|
||||
.toast{
|
||||
width: min(380px, calc(100vw - 36px));
|
||||
border: 1px solid var(--line);
|
||||
background: var(--surface);
|
||||
border-radius: 14px;
|
||||
padding: 12px 14px;
|
||||
box-shadow: var(--shadow-sm);
|
||||
display:flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
.toast__text{ color: var(--text2); }
|
||||
.toast__close{ border: 0; background: transparent; cursor:pointer; font: inherit; color: var(--muted); }
|
||||
.toast__close:hover{ color: var(--text); }
|
||||
|
||||
/* Tooltip */
|
||||
.tooltip{
|
||||
position: fixed;
|
||||
z-index: 1200;
|
||||
pointer-events: none;
|
||||
max-width: 320px;
|
||||
border: 1px solid var(--line);
|
||||
background: var(--surface);
|
||||
color: var(--text2);
|
||||
border-radius: 12px;
|
||||
padding: 10px 12px;
|
||||
box-shadow: var(--shadow-sm);
|
||||
font-size: var(--fs-s);
|
||||
}
|
||||
BIN
assets/fonts/SourceSans3-Italic-VariableFont_wght.ttf
Normal file
BIN
assets/fonts/SourceSans3-Italic-VariableFont_wght.ttf
Normal file
Binary file not shown.
BIN
assets/fonts/SourceSans3-VariableFont_wght.ttf
Normal file
BIN
assets/fonts/SourceSans3-VariableFont_wght.ttf
Normal file
Binary file not shown.
BIN
assets/img/gruppe.png
Normal file
BIN
assets/img/gruppe.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 392 KiB |
BIN
assets/img/helfer.png
Normal file
BIN
assets/img/helfer.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 420 KiB |
51
assets/img/juconnect.svg
Normal file
51
assets/img/juconnect.svg
Normal file
@@ -0,0 +1,51 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Ebene_2" data-name="Ebene 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.89 595.28">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: #1d354f;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<g>
|
||||
<circle class="cls-1" cx="180.4" cy="221.61" r="25.76"/>
|
||||
<circle class="cls-1" cx="204.13" cy="280.91" r="19"/>
|
||||
<path class="cls-1" d="M140.83,286.78s4.7,25.27,23.01,35.32c18.31,10.04,33.86,8.91,36.45,8.91s5.08,1.18,5.87,5.99c1.9,11.5-5.82,34.48-10.73,42.12-4.2,6.54-3.87,10.31-1.94,12.15,2.07,1.98,7.7,3.24,12.68-2.59,4.98-5.83,21.02-28.84,22.48-47.79,1.46-18.96-5.83-30.46-14.09-31.92-8.26-1.46-22.68,1.13-35.16-6.32-12.47-7.45-10.85-28.19-10.69-33.7.16-5.51-3.08-17.5-12.96-20.58-9.88-3.08-28.19,6.97-35.64,19.44-7.45,12.47-20.74,41.31-10.53,78.25,4.05,17.34,20.9,36.13,30.3,41.64s13.61,7.45,17.01,3.73c3.4-3.73,2.11-7.29-3.4-11.66-5.51-4.37-22.68-22.68-23.01-47.47-.32-24.79,5.18-36.13,10.37-45.53Z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path class="cls-1" d="M259.79,293.45l8.97-6.57c3,5.42,6.95,7.76,11.43,7.76,6.86,0,10.4-3.72,10.4-14.17v-49.18h13v50.3c0,13.4-6.59,24.34-21.88,24.34-10.27,0-17.26-4.21-21.92-12.48Z"/>
|
||||
<path class="cls-1" d="M320.09,284.06v-34.52h12.91v32.86c0,9.06,2.6,12.46,8.56,12.46,4.84,0,8.02-2.24,12.19-7.62v-37.7h12.91v55.05h-10.58l-.99-8.11h-.36c-4.84,5.74-10.18,9.46-17.71,9.46-11.79,0-16.95-7.98-16.95-21.88Z"/>
|
||||
<path class="cls-1" d="M380.29,268.19c0-23.98,15.02-38.24,33.58-38.24,9.19,0,16.5,4.39,21.11,9.28l-6.95,8.38c-3.77-3.77-8.16-6.37-13.9-6.37-11.92,0-20.49,10.09-20.49,26.54s7.89,26.85,20.17,26.85c6.5,0,11.52-3,15.65-7.53l6.95,8.16c-5.94,6.9-13.58,10.67-23.09,10.67-18.42,0-33.04-13.49-33.04-37.75Z"/>
|
||||
<path class="cls-1" d="M443.95,277.11c0-18.34,12.46-28.92,26.18-28.92s26.18,10.58,26.18,28.92-12.46,28.83-26.18,28.83-26.18-10.58-26.18-28.83ZM483.04,277.11c0-11.03-4.84-18.38-12.91-18.38s-12.91,7.35-12.91,18.38,4.84,18.29,12.91,18.29,12.91-7.26,12.91-18.29Z"/>
|
||||
<path class="cls-1" d="M509.11,249.54h10.58l.99,7.44h.36c4.93-4.8,10.54-8.79,18.07-8.79,11.79,0,16.95,7.98,16.95,21.88v34.52h-12.91v-32.86c0-9.06-2.6-12.46-8.56-12.46-4.84,0-8.03,2.38-12.55,6.86v38.46h-12.91v-55.05Z"/>
|
||||
<path class="cls-1" d="M571.87,249.54h10.58l.99,7.44h.36c4.93-4.8,10.54-8.79,18.07-8.79,11.79,0,16.95,7.98,16.95,21.88v34.52h-12.91v-32.86c0-9.06-2.6-12.46-8.56-12.46-4.84,0-8.03,2.38-12.55,6.86v38.46h-12.91v-55.05Z"/>
|
||||
<path class="cls-1" d="M631,277.11c0-17.89,12.42-28.92,25.37-28.92,14.88,0,22.73,10.76,22.73,26.14,0,2.47-.27,4.93-.56,6.28h-34.95c1.08,9.77,7.35,15.33,16.23,15.33,4.71,0,8.74-1.48,12.78-3.99l4.39,8.02c-5.25,3.54-11.88,5.96-18.87,5.96-15.2,0-27.12-10.67-27.12-28.83ZM667.94,271.82c0-8.47-3.77-13.63-11.3-13.63-6.41,0-12.06,4.8-13.18,13.63h24.48Z"/>
|
||||
<path class="cls-1" d="M687.82,277.11c0-18.34,12.96-28.92,27.62-28.92,6.99,0,12.1,2.69,16.09,6.19l-6.28,8.38c-2.91-2.56-5.69-4.03-9.15-4.03-8.88,0-15.02,7.35-15.02,18.38s6.05,18.29,14.61,18.29c4.3,0,8.25-2.11,11.39-4.75l5.25,8.52c-5.16,4.57-11.7,6.77-17.98,6.77-15.02,0-26.54-10.58-26.54-28.83Z"/>
|
||||
<path class="cls-1" d="M744.04,286.04v-26.23h-7.85v-9.68l8.52-.58,1.52-15.02h10.71v15.02h14.03v10.27h-14.03v26.2c0,6.48,2.51,9.66,7.8,9.66,1.88,0,4.12-.63,5.74-1.26l2.2,9.5c-3,.99-6.84,2.02-11.25,2.02-12.69,0-17.39-8.02-17.39-19.9Z"/>
|
||||
</g>
|
||||
<g>
|
||||
<polygon class="cls-1" points="282.18 346.17 269.41 346.17 269.41 333.48 263.81 333.48 263.81 365.07 269.41 365.07 269.41 351.06 282.18 351.06 282.18 365.07 287.78 365.07 287.78 333.48 282.18 333.48 282.18 346.17"/>
|
||||
<path class="cls-1" d="M298.15,330.89c-1.97,0-3.44,1.28-3.44,3.15s1.47,3.15,3.44,3.15,3.44-1.31,3.44-3.15-1.47-3.15-3.44-3.15Z"/>
|
||||
<rect class="cls-1" x="295.35" y="341.34" width="5.56" height="23.72"/>
|
||||
<path class="cls-1" d="M314.76,361.11c-.58,0-1.2-.48-1.2-1.85v-28.3h-5.56v28.01c0,4.13,1.45,6.68,5.39,6.68,1.33,0,2.26-.21,2.94-.48l-.7-4.15c-.42.1-.62.1-.87.1Z"/>
|
||||
<path class="cls-1" d="M322.03,338.89v2.47l-3.19.23v4.17h3.19v19.3h5.56v-19.3h4.64v-4.42h-4.64v-2.55c0-2.75,1.04-4,3.01-4,.81,0,1.72.19,2.57.56l1.06-4.15c-1.06-.42-2.63-.83-4.35-.83-5.6,0-7.86,3.6-7.86,8.52Z"/>
|
||||
<path class="cls-1" d="M345.28,340.76c-5.58,0-10.93,4.75-10.93,12.46s5.14,12.42,11.69,12.42c3.01,0,5.87-1.04,8.13-2.57l-1.89-3.46c-1.74,1.08-3.48,1.72-5.51,1.72-3.82,0-6.53-2.4-6.99-6.61h15.06c.13-.58.24-1.64.24-2.7,0-6.63-3.38-11.26-9.79-11.26ZM339.72,350.94c.48-3.81,2.92-5.87,5.68-5.87,3.25,0,4.87,2.22,4.87,5.87h-10.55Z"/>
|
||||
<path class="cls-1" d="M373.32,340.76c-3.25,0-5.66,1.72-7.78,3.79h-.15l-.42-3.21h-4.56v23.72h5.56v-16.57c1.95-1.93,3.32-2.96,5.41-2.96,2.57,0,3.69,1.47,3.69,5.37v14.16h5.56v-14.88c0-5.99-2.22-9.43-7.3-9.43Z"/>
|
||||
<polygon class="cls-1" points="413.39 344.32 413.39 341.34 396.48 341.34 396.48 345.77 406.41 345.77 395.23 362.09 395.23 365.07 413.75 365.07 413.75 360.64 402.2 360.64 413.39 344.32"/>
|
||||
<path class="cls-1" d="M432.25,357.59c-1.8,2.32-3.17,3.28-5.25,3.28-2.57,0-3.69-1.47-3.69-5.37v-14.16h-5.56v14.87c0,5.99,2.22,9.43,7.3,9.43,3.25,0,5.54-1.6,7.63-4.08h.15l.42,3.5h4.56v-23.72h-5.56v16.25Z"/>
|
||||
<path class="cls-1" d="M450,345.57h-.15l-.43-4.23h-4.56v23.72h5.56v-14.47c1.43-3.61,3.71-4.91,5.6-4.91.98,0,1.6.16,2.43.39l.97-4.83c-.71-.33-1.48-.48-2.69-.48-2.54,0-5.05,1.72-6.74,4.81Z"/>
|
||||
<polygon class="cls-1" points="478.62 351 489.98 351 489.98 346.29 478.62 346.29 478.62 338.19 492.03 338.19 492.03 333.48 473.02 333.48 473.02 365.07 492.51 365.07 492.51 360.35 478.62 360.35 478.62 351"/>
|
||||
<path class="cls-1" d="M503.66,345.57h-.15l-.43-4.23h-4.56v23.72h5.56v-14.47c1.43-3.61,3.71-4.91,5.6-4.91.98,0,1.6.16,2.43.39l.97-4.83c-.71-.33-1.48-.48-2.69-.48-2.54,0-5.05,1.72-6.74,4.81Z"/>
|
||||
<polygon class="cls-1" points="532.53 344.32 532.53 341.34 515.63 341.34 515.63 345.77 525.56 345.77 514.37 362.09 514.37 365.07 532.9 365.07 532.9 360.64 521.35 360.64 532.53 344.32"/>
|
||||
<path class="cls-1" d="M540.44,330.89c-1.97,0-3.44,1.28-3.44,3.15s1.47,3.15,3.44,3.15,3.44-1.31,3.44-3.15-1.47-3.15-3.44-3.15Z"/>
|
||||
<rect class="cls-1" x="537.64" y="341.34" width="5.56" height="23.72"/>
|
||||
<path class="cls-1" d="M559.66,340.76c-5.58,0-10.93,4.75-10.93,12.46s5.14,12.42,11.69,12.42c3.01,0,5.87-1.04,8.13-2.57l-1.89-3.46c-1.74,1.08-3.48,1.72-5.51,1.72-3.83,0-6.53-2.4-6.99-6.61h15.06c.12-.58.24-1.64.24-2.7,0-6.63-3.38-11.26-9.79-11.26ZM554.1,350.94c.48-3.81,2.92-5.87,5.68-5.87,3.25,0,4.87,2.22,4.87,5.87h-10.55Z"/>
|
||||
<path class="cls-1" d="M587.7,340.76c-3.25,0-5.6,1.72-7.59,3.59l.23-4.58v-8.83h-5.56v34.12h5.56v-16.57c1.95-1.93,3.32-2.96,5.41-2.96,2.57,0,3.69,1.47,3.69,5.37v14.16h5.56v-14.88c0-5.99-2.22-9.43-7.3-9.43Z"/>
|
||||
<path class="cls-1" d="M615.96,357.59c-1.8,2.32-3.17,3.28-5.25,3.28-2.57,0-3.69-1.47-3.69-5.37v-14.16h-5.56v14.87c0,5.99,2.22,9.43,7.3,9.43,3.25,0,5.54-1.6,7.63-4.08h.15l.42,3.5h4.56v-23.72h-5.56v16.25Z"/>
|
||||
<path class="cls-1" d="M641.5,340.76c-3.25,0-5.66,1.72-7.79,3.79h-.15l-.43-3.21h-4.56v23.72h5.56v-16.57c1.95-1.93,3.32-2.96,5.41-2.96,2.57,0,3.69,1.47,3.69,5.37v14.16h5.56v-14.88c0-5.99-2.22-9.43-7.3-9.43Z"/>
|
||||
<path class="cls-1" d="M667.84,361.34h-4.22c-2.88,0-3.84-.81-3.84-2.14,0-1.06.44-1.66,1.16-2.27,1.06.42,2.2.63,3.21.63,5.02,0,9.02-2.82,9.02-8.09,0-1.62-.58-3.09-1.35-3.98h4.33v-4.13h-8.48c-.97-.35-2.2-.58-3.52-.58-4.96,0-9.37,3.07-9.37,8.52,0,2.8,1.51,5.06,3.13,6.26v.19c-1.37.97-2.63,2.59-2.63,4.42s.93,3.17,2.14,3.96v.19c-2.18,1.31-3.42,3.06-3.42,5.06,0,4.15,4.21,6.18,9.87,6.18,7.75,0,12.65-3.69,12.65-8.36,0-4.1-3.01-5.85-8.68-5.85ZM664.14,344.61c2.32,0,4.12,1.7,4.12,4.67s-1.83,4.77-4.12,4.77-4.11-1.76-4.11-4.77,1.8-4.67,4.11-4.67ZM664.72,371.94c-3.73,0-6.05-1.26-6.05-3.42,0-1.1.56-2.16,1.84-3.13.91.23,1.93.33,3.21.33h3.25c2.71,0,4.18.54,4.18,2.38,0,2.05-2.61,3.84-6.43,3.84Z"/>
|
||||
<path class="cls-1" d="M703.21,352.57h5.95v6.82c-1,.89-2.74,1.39-4.5,1.39-6.34,0-9.68-4.37-9.68-11.57s3.77-11.44,9.37-11.44c2.94,0,4.79,1.2,6.38,2.74l2.99-3.61c-1.99-2.03-5.06-4-9.54-4-8.4,0-14.95,6.14-14.95,16.48s6.36,16.26,14.88,16.26c4.33,0,7.98-1.62,10.08-3.75v-13.93h-10.97v4.6Z"/>
|
||||
<path class="cls-1" d="M732.98,340.76c-2.43,0-4.87,1.22-6.85,2.96l.15-3.94v-8.83h-5.56v34.12h4.38l.48-2.49h.15c1.99,1.97,4.31,3.07,6.47,3.07,5.27,0,10.12-4.69,10.12-12.84,0-7.29-3.43-12.04-9.36-12.04ZM731.04,361.05c-1.37,0-3.09-.52-4.75-1.97v-11.05c1.8-1.8,3.46-2.67,5.18-2.67,3.61,0,5.16,2.8,5.16,7.53,0,5.37-2.42,8.15-5.58,8.15Z"/>
|
||||
<path class="cls-1" d="M771.62,365.07l-7.56-13.17c3.79-1.32,6.32-4.25,6.32-9.05,0-7.05-5.06-9.37-11.63-9.37h-10.64v31.58h5.6v-12.34h4.81l6.8,12.34h6.3ZM753.71,337.96h4.46c4.33,0,6.68,1.26,6.68,4.89s-2.36,5.39-6.68,5.39h-4.46v-10.28Z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.4 KiB |
13
assets/img/juconnect_icon.svg
Normal file
13
assets/img/juconnect_icon.svg
Normal file
@@ -0,0 +1,13 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.98 197.51">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: #1d354f;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<circle class="cls-1" cx="74.55" cy="25.76" r="25.76"/>
|
||||
<circle class="cls-1" cx="98.29" cy="85.06" r="19"/>
|
||||
<path class="cls-1" d="M34.98,90.93s4.7,25.27,23.01,35.32c18.31,10.04,33.86,8.91,36.45,8.91s5.08,1.18,5.87,5.99c1.9,11.5-5.82,34.48-10.73,42.12-4.2,6.54-3.87,10.31-1.94,12.15,2.07,1.98,7.7,3.24,12.68-2.59,4.98-5.83,21.02-28.84,22.48-47.79,1.46-18.96-5.83-30.46-14.09-31.92s-22.68,1.13-35.16-6.32c-12.47-7.45-10.85-28.19-10.69-33.7.16-5.51-3.08-17.5-12.96-20.58-9.88-3.08-28.19,6.97-35.64,19.44-7.45,12.47-20.74,41.31-10.53,78.25,4.05,17.34,20.9,36.13,30.3,41.64s13.61,7.45,17.01,3.73c3.4-3.73,2.11-7.29-3.4-11.66-5.51-4.37-22.68-22.68-23.01-47.47-.32-24.79,5.18-36.13,10.37-45.53Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 936 B |
13
assets/img/juconnect_icon_light.svg
Normal file
13
assets/img/juconnect_icon_light.svg
Normal file
@@ -0,0 +1,13 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.98 197.51">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: #f7f8f8;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<circle class="cls-1" cx="74.55" cy="25.76" r="25.76"/>
|
||||
<circle class="cls-1" cx="98.29" cy="85.06" r="19"/>
|
||||
<path class="cls-1" d="M34.98,90.93s4.7,25.27,23.01,35.32c18.31,10.04,33.86,8.91,36.45,8.91s5.08,1.18,5.87,5.99c1.9,11.5-5.82,34.48-10.73,42.12-4.2,6.54-3.87,10.31-1.94,12.15,2.07,1.98,7.7,3.24,12.68-2.59,4.98-5.83,21.02-28.84,22.48-47.79,1.46-18.96-5.83-30.46-14.09-31.92s-22.68,1.13-35.16-6.32c-12.47-7.45-10.85-28.19-10.69-33.7.16-5.51-3.08-17.5-12.96-20.58-9.88-3.08-28.19,6.97-35.64,19.44-7.45,12.47-20.74,41.31-10.53,78.25,4.05,17.34,20.9,36.13,30.3,41.64s13.61,7.45,17.01,3.73c3.4-3.73,2.11-7.29-3.4-11.66-5.51-4.37-22.68-22.68-23.01-47.47-.32-24.79,5.18-36.13,10.37-45.53Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 936 B |
51
assets/img/juconnect_light.svg
Normal file
51
assets/img/juconnect_light.svg
Normal file
@@ -0,0 +1,51 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Ebene_2" data-name="Ebene 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.89 595.28">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: #f7f8f8;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<g>
|
||||
<circle class="cls-1" cx="180.4" cy="221.61" r="25.76"/>
|
||||
<circle class="cls-1" cx="204.13" cy="280.91" r="19"/>
|
||||
<path class="cls-1" d="M140.83,286.78s4.7,25.27,23.01,35.32c18.31,10.04,33.86,8.91,36.45,8.91s5.08,1.18,5.87,5.99c1.9,11.5-5.82,34.48-10.73,42.12-4.2,6.54-3.87,10.31-1.94,12.15,2.07,1.98,7.7,3.24,12.68-2.59,4.98-5.83,21.02-28.84,22.48-47.79,1.46-18.96-5.83-30.46-14.09-31.92-8.26-1.46-22.68,1.13-35.16-6.32-12.47-7.45-10.85-28.19-10.69-33.7.16-5.51-3.08-17.5-12.96-20.58-9.88-3.08-28.19,6.97-35.64,19.44-7.45,12.47-20.74,41.31-10.53,78.25,4.05,17.34,20.9,36.13,30.3,41.64s13.61,7.45,17.01,3.73c3.4-3.73,2.11-7.29-3.4-11.66-5.51-4.37-22.68-22.68-23.01-47.47-.32-24.79,5.18-36.13,10.37-45.53Z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path class="cls-1" d="M259.79,293.45l8.97-6.57c3,5.42,6.95,7.76,11.43,7.76,6.86,0,10.4-3.72,10.4-14.17v-49.18h13v50.3c0,13.4-6.59,24.34-21.88,24.34-10.27,0-17.26-4.21-21.92-12.48Z"/>
|
||||
<path class="cls-1" d="M320.09,284.06v-34.52h12.91v32.86c0,9.06,2.6,12.46,8.56,12.46,4.84,0,8.02-2.24,12.19-7.62v-37.7h12.91v55.05h-10.58l-.99-8.11h-.36c-4.84,5.74-10.18,9.46-17.71,9.46-11.79,0-16.95-7.98-16.95-21.88Z"/>
|
||||
<path class="cls-1" d="M380.29,268.19c0-23.98,15.02-38.24,33.58-38.24,9.19,0,16.5,4.39,21.11,9.28l-6.95,8.38c-3.77-3.77-8.16-6.37-13.9-6.37-11.92,0-20.49,10.09-20.49,26.54s7.89,26.85,20.17,26.85c6.5,0,11.52-3,15.65-7.53l6.95,8.16c-5.94,6.9-13.58,10.67-23.09,10.67-18.42,0-33.04-13.49-33.04-37.75Z"/>
|
||||
<path class="cls-1" d="M443.95,277.11c0-18.34,12.46-28.92,26.18-28.92s26.18,10.58,26.18,28.92-12.46,28.83-26.18,28.83-26.18-10.58-26.18-28.83ZM483.04,277.11c0-11.03-4.84-18.38-12.91-18.38s-12.91,7.35-12.91,18.38,4.84,18.29,12.91,18.29,12.91-7.26,12.91-18.29Z"/>
|
||||
<path class="cls-1" d="M509.11,249.54h10.58l.99,7.44h.36c4.93-4.8,10.54-8.79,18.07-8.79,11.79,0,16.95,7.98,16.95,21.88v34.52h-12.91v-32.86c0-9.06-2.6-12.46-8.56-12.46-4.84,0-8.03,2.38-12.55,6.86v38.46h-12.91v-55.05Z"/>
|
||||
<path class="cls-1" d="M571.87,249.54h10.58l.99,7.44h.36c4.93-4.8,10.54-8.79,18.07-8.79,11.79,0,16.95,7.98,16.95,21.88v34.52h-12.91v-32.86c0-9.06-2.6-12.46-8.56-12.46-4.84,0-8.03,2.38-12.55,6.86v38.46h-12.91v-55.05Z"/>
|
||||
<path class="cls-1" d="M631,277.11c0-17.89,12.42-28.92,25.37-28.92,14.88,0,22.73,10.76,22.73,26.14,0,2.47-.27,4.93-.56,6.28h-34.95c1.08,9.77,7.35,15.33,16.23,15.33,4.71,0,8.74-1.48,12.78-3.99l4.39,8.02c-5.25,3.54-11.88,5.96-18.87,5.96-15.2,0-27.12-10.67-27.12-28.83ZM667.94,271.82c0-8.47-3.77-13.63-11.3-13.63-6.41,0-12.06,4.8-13.18,13.63h24.48Z"/>
|
||||
<path class="cls-1" d="M687.82,277.11c0-18.34,12.96-28.92,27.62-28.92,6.99,0,12.1,2.69,16.09,6.19l-6.28,8.38c-2.91-2.56-5.69-4.03-9.15-4.03-8.88,0-15.02,7.35-15.02,18.38s6.05,18.29,14.61,18.29c4.3,0,8.25-2.11,11.39-4.75l5.25,8.52c-5.16,4.57-11.7,6.77-17.98,6.77-15.02,0-26.54-10.58-26.54-28.83Z"/>
|
||||
<path class="cls-1" d="M744.04,286.04v-26.23h-7.85v-9.68l8.52-.58,1.52-15.02h10.71v15.02h14.03v10.27h-14.03v26.2c0,6.48,2.51,9.66,7.8,9.66,1.88,0,4.12-.63,5.74-1.26l2.2,9.5c-3,.99-6.84,2.02-11.25,2.02-12.69,0-17.39-8.02-17.39-19.9Z"/>
|
||||
</g>
|
||||
<g>
|
||||
<polygon class="cls-1" points="282.18 346.17 269.41 346.17 269.41 333.48 263.81 333.48 263.81 365.07 269.41 365.07 269.41 351.06 282.18 351.06 282.18 365.07 287.78 365.07 287.78 333.48 282.18 333.48 282.18 346.17"/>
|
||||
<path class="cls-1" d="M298.15,330.89c-1.97,0-3.44,1.28-3.44,3.15s1.47,3.15,3.44,3.15,3.44-1.31,3.44-3.15-1.47-3.15-3.44-3.15Z"/>
|
||||
<rect class="cls-1" x="295.35" y="341.34" width="5.56" height="23.72"/>
|
||||
<path class="cls-1" d="M314.76,361.11c-.58,0-1.2-.48-1.2-1.85v-28.3h-5.56v28.01c0,4.13,1.45,6.68,5.39,6.68,1.33,0,2.26-.21,2.94-.48l-.7-4.15c-.42.1-.62.1-.87.1Z"/>
|
||||
<path class="cls-1" d="M322.03,338.89v2.47l-3.19.23v4.17h3.19v19.3h5.56v-19.3h4.64v-4.42h-4.64v-2.55c0-2.75,1.04-4,3.01-4,.81,0,1.72.19,2.57.56l1.06-4.15c-1.06-.42-2.63-.83-4.35-.83-5.6,0-7.86,3.6-7.86,8.52Z"/>
|
||||
<path class="cls-1" d="M345.28,340.76c-5.58,0-10.93,4.75-10.93,12.46s5.14,12.42,11.69,12.42c3.01,0,5.87-1.04,8.13-2.57l-1.89-3.46c-1.74,1.08-3.48,1.72-5.51,1.72-3.82,0-6.53-2.4-6.99-6.61h15.06c.13-.58.24-1.64.24-2.7,0-6.63-3.38-11.26-9.79-11.26ZM339.72,350.94c.48-3.81,2.92-5.87,5.68-5.87,3.25,0,4.87,2.22,4.87,5.87h-10.55Z"/>
|
||||
<path class="cls-1" d="M373.32,340.76c-3.25,0-5.66,1.72-7.78,3.79h-.15l-.42-3.21h-4.56v23.72h5.56v-16.57c1.95-1.93,3.32-2.96,5.41-2.96,2.57,0,3.69,1.47,3.69,5.37v14.16h5.56v-14.88c0-5.99-2.22-9.43-7.3-9.43Z"/>
|
||||
<polygon class="cls-1" points="413.39 344.32 413.39 341.34 396.48 341.34 396.48 345.77 406.41 345.77 395.23 362.09 395.23 365.07 413.75 365.07 413.75 360.64 402.2 360.64 413.39 344.32"/>
|
||||
<path class="cls-1" d="M432.25,357.59c-1.8,2.32-3.17,3.28-5.25,3.28-2.57,0-3.69-1.47-3.69-5.37v-14.16h-5.56v14.87c0,5.99,2.22,9.43,7.3,9.43,3.25,0,5.54-1.6,7.63-4.08h.15l.42,3.5h4.56v-23.72h-5.56v16.25Z"/>
|
||||
<path class="cls-1" d="M450,345.57h-.15l-.43-4.23h-4.56v23.72h5.56v-14.47c1.43-3.61,3.71-4.91,5.6-4.91.98,0,1.6.16,2.43.39l.97-4.83c-.71-.33-1.48-.48-2.69-.48-2.54,0-5.05,1.72-6.74,4.81Z"/>
|
||||
<polygon class="cls-1" points="478.62 351 489.98 351 489.98 346.29 478.62 346.29 478.62 338.19 492.03 338.19 492.03 333.48 473.02 333.48 473.02 365.07 492.51 365.07 492.51 360.35 478.62 360.35 478.62 351"/>
|
||||
<path class="cls-1" d="M503.66,345.57h-.15l-.43-4.23h-4.56v23.72h5.56v-14.47c1.43-3.61,3.71-4.91,5.6-4.91.98,0,1.6.16,2.43.39l.97-4.83c-.71-.33-1.48-.48-2.69-.48-2.54,0-5.05,1.72-6.74,4.81Z"/>
|
||||
<polygon class="cls-1" points="532.53 344.32 532.53 341.34 515.63 341.34 515.63 345.77 525.56 345.77 514.37 362.09 514.37 365.07 532.9 365.07 532.9 360.64 521.35 360.64 532.53 344.32"/>
|
||||
<path class="cls-1" d="M540.44,330.89c-1.97,0-3.44,1.28-3.44,3.15s1.47,3.15,3.44,3.15,3.44-1.31,3.44-3.15-1.47-3.15-3.44-3.15Z"/>
|
||||
<rect class="cls-1" x="537.64" y="341.34" width="5.56" height="23.72"/>
|
||||
<path class="cls-1" d="M559.66,340.76c-5.58,0-10.93,4.75-10.93,12.46s5.14,12.42,11.69,12.42c3.01,0,5.87-1.04,8.13-2.57l-1.89-3.46c-1.74,1.08-3.48,1.72-5.51,1.72-3.83,0-6.53-2.4-6.99-6.61h15.06c.12-.58.24-1.64.24-2.7,0-6.63-3.38-11.26-9.79-11.26ZM554.1,350.94c.48-3.81,2.92-5.87,5.68-5.87,3.25,0,4.87,2.22,4.87,5.87h-10.55Z"/>
|
||||
<path class="cls-1" d="M587.7,340.76c-3.25,0-5.6,1.72-7.59,3.59l.23-4.58v-8.83h-5.56v34.12h5.56v-16.57c1.95-1.93,3.32-2.96,5.41-2.96,2.57,0,3.69,1.47,3.69,5.37v14.16h5.56v-14.88c0-5.99-2.22-9.43-7.3-9.43Z"/>
|
||||
<path class="cls-1" d="M615.96,357.59c-1.8,2.32-3.17,3.28-5.25,3.28-2.57,0-3.69-1.47-3.69-5.37v-14.16h-5.56v14.87c0,5.99,2.22,9.43,7.3,9.43,3.25,0,5.54-1.6,7.63-4.08h.15l.42,3.5h4.56v-23.72h-5.56v16.25Z"/>
|
||||
<path class="cls-1" d="M641.5,340.76c-3.25,0-5.66,1.72-7.79,3.79h-.15l-.43-3.21h-4.56v23.72h5.56v-16.57c1.95-1.93,3.32-2.96,5.41-2.96,2.57,0,3.69,1.47,3.69,5.37v14.16h5.56v-14.88c0-5.99-2.22-9.43-7.3-9.43Z"/>
|
||||
<path class="cls-1" d="M667.84,361.34h-4.22c-2.88,0-3.84-.81-3.84-2.14,0-1.06.44-1.66,1.16-2.27,1.06.42,2.2.63,3.21.63,5.02,0,9.02-2.82,9.02-8.09,0-1.62-.58-3.09-1.35-3.98h4.33v-4.13h-8.48c-.97-.35-2.2-.58-3.52-.58-4.96,0-9.37,3.07-9.37,8.52,0,2.8,1.51,5.06,3.13,6.26v.19c-1.37.97-2.63,2.59-2.63,4.42s.93,3.17,2.14,3.96v.19c-2.18,1.31-3.42,3.06-3.42,5.06,0,4.15,4.21,6.18,9.87,6.18,7.75,0,12.65-3.69,12.65-8.36,0-4.1-3.01-5.85-8.68-5.85ZM664.14,344.61c2.32,0,4.12,1.7,4.12,4.67s-1.83,4.77-4.12,4.77-4.11-1.76-4.11-4.77,1.8-4.67,4.11-4.67ZM664.72,371.94c-3.73,0-6.05-1.26-6.05-3.42,0-1.1.56-2.16,1.84-3.13.91.23,1.93.33,3.21.33h3.25c2.71,0,4.18.54,4.18,2.38,0,2.05-2.61,3.84-6.43,3.84Z"/>
|
||||
<path class="cls-1" d="M703.21,352.57h5.95v6.82c-1,.89-2.74,1.39-4.5,1.39-6.34,0-9.68-4.37-9.68-11.57s3.77-11.44,9.37-11.44c2.94,0,4.79,1.2,6.38,2.74l2.99-3.61c-1.99-2.03-5.06-4-9.54-4-8.4,0-14.95,6.14-14.95,16.48s6.36,16.26,14.88,16.26c4.33,0,7.98-1.62,10.08-3.75v-13.93h-10.97v4.6Z"/>
|
||||
<path class="cls-1" d="M732.98,340.76c-2.43,0-4.87,1.22-6.85,2.96l.15-3.94v-8.83h-5.56v34.12h4.38l.48-2.49h.15c1.99,1.97,4.31,3.07,6.47,3.07,5.27,0,10.12-4.69,10.12-12.84,0-7.29-3.43-12.04-9.36-12.04ZM731.04,361.05c-1.37,0-3.09-.52-4.75-1.97v-11.05c1.8-1.8,3.46-2.67,5.18-2.67,3.61,0,5.16,2.8,5.16,7.53,0,5.37-2.42,8.15-5.58,8.15Z"/>
|
||||
<path class="cls-1" d="M771.62,365.07l-7.56-13.17c3.79-1.32,6.32-4.25,6.32-9.05,0-7.05-5.06-9.37-11.63-9.37h-10.64v31.58h5.6v-12.34h4.81l6.8,12.34h6.3ZM753.71,337.96h4.46c4.33,0,6.68,1.26,6.68,4.89s-2.36,5.39-6.68,5.39h-4.46v-10.28Z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.4 KiB |
381
assets/js/app.js
Normal file
381
assets/js/app.js
Normal file
@@ -0,0 +1,381 @@
|
||||
/* JuConnect · Tool-first UI interactions (v0.2) */
|
||||
|
||||
const $ = (sel, root=document) => root.querySelector(sel);
|
||||
const $$ = (sel, root=document) => Array.from(root.querySelectorAll(sel));
|
||||
|
||||
function normalizeHexColor(value) {
|
||||
if (!value) return "";
|
||||
const trimmed = value.trim();
|
||||
if (trimmed.startsWith("#")) return trimmed;
|
||||
|
||||
const match = trimmed.match(/^rgba?\(([^)]+)\)$/i);
|
||||
if (!match) return trimmed;
|
||||
|
||||
const parts = match[1].split(",").map(p => p.trim());
|
||||
if (parts.length < 3) return trimmed;
|
||||
|
||||
const toHex = (n) => {
|
||||
const num = Number.parseInt(n, 10);
|
||||
if (Number.isNaN(num)) return "00";
|
||||
return Math.max(0, Math.min(255, num)).toString(16).padStart(2, "0");
|
||||
};
|
||||
|
||||
return `#${toHex(parts[0])}${toHex(parts[1])}${toHex(parts[2])}`.toLowerCase();
|
||||
}
|
||||
|
||||
function syncBackgroundSwatch() {
|
||||
const swatch = document.querySelector('[data-swatch][data-name="bg"]');
|
||||
if (!swatch) return;
|
||||
|
||||
const rawBg = getComputedStyle(document.documentElement).getPropertyValue("--bg");
|
||||
const hex = normalizeHexColor(rawBg);
|
||||
if (!hex) return;
|
||||
|
||||
swatch.setAttribute("data-hex", hex);
|
||||
const label = swatch.querySelector("[data-bg-hex]");
|
||||
if (label) label.textContent = hex;
|
||||
}
|
||||
|
||||
function syncThemeLogos() {
|
||||
const isDark = document.documentElement.getAttribute("data-theme") === "dark";
|
||||
$$("[data-logo-light][data-logo-dark]").forEach((img) => {
|
||||
const src = isDark ? img.getAttribute("data-logo-dark") : img.getAttribute("data-logo-light");
|
||||
if (src) img.setAttribute("src", src);
|
||||
});
|
||||
}
|
||||
|
||||
/* Toasts */
|
||||
const Toast = (() => {
|
||||
const container = () => document.querySelector(".toasts");
|
||||
|
||||
const show = (text, timeoutMs=2600) => {
|
||||
const c = container();
|
||||
if (!c) return;
|
||||
|
||||
const el = document.createElement("div");
|
||||
el.className = "toast";
|
||||
el.innerHTML = `
|
||||
<div class="toast__text"></div>
|
||||
<button class="toast__close" type="button" aria-label="Toast schließen">✕</button>
|
||||
`;
|
||||
$(".toast__text", el).textContent = text;
|
||||
|
||||
const close = () => { el.remove(); clearTimeout(t); };
|
||||
$(".toast__close", el).addEventListener("click", close);
|
||||
c.appendChild(el);
|
||||
const t = setTimeout(close, timeoutMs);
|
||||
};
|
||||
|
||||
return { show };
|
||||
})();
|
||||
|
||||
/* Clipboard copy helper */
|
||||
async function copyText(text, label="Kopiert.") {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
Toast.show(label);
|
||||
} catch {
|
||||
// Fallback
|
||||
const ta = document.createElement("textarea");
|
||||
ta.value = text;
|
||||
ta.style.position = "fixed";
|
||||
ta.style.left = "-9999px";
|
||||
document.body.appendChild(ta);
|
||||
ta.select();
|
||||
document.execCommand("copy");
|
||||
ta.remove();
|
||||
Toast.show(label);
|
||||
}
|
||||
}
|
||||
|
||||
function decodeCopyText(text) {
|
||||
if (!text) return "";
|
||||
return text
|
||||
.replace(/\\r\\n/g, "\n")
|
||||
.replace(/\\n/g, "\n")
|
||||
.replace(/\\t/g, "\t");
|
||||
}
|
||||
|
||||
/* Generic [data-copy] buttons */
|
||||
document.addEventListener("click", (e) => {
|
||||
const btn = e.target.closest("[data-copy]");
|
||||
if (!btn) return;
|
||||
const text = decodeCopyText(btn.getAttribute("data-copy") || "");
|
||||
const label = btn.getAttribute("data-copy-label") || "Kopiert.";
|
||||
copyText(text, label);
|
||||
});
|
||||
|
||||
/* Copy for snippet blocks */
|
||||
document.addEventListener("click", (e) => {
|
||||
const btn = e.target.closest("[data-snippet-copy]");
|
||||
if (!btn) return;
|
||||
const snippet = btn.closest("[data-snippet]") || btn.closest(".card");
|
||||
const code = snippet?.querySelector("pre code");
|
||||
if (!code) return;
|
||||
copyText(code.innerText, btn.getAttribute("data-copy-label") || "Snippet kopiert");
|
||||
});
|
||||
|
||||
/* Swatch copy buttons */
|
||||
document.addEventListener("click", (e) => {
|
||||
const btn = e.target.closest("[data-swatch-copy]");
|
||||
if (!btn) return;
|
||||
const swatch = btn.closest("[data-swatch]");
|
||||
if (!swatch) return;
|
||||
|
||||
const mode = btn.getAttribute("data-swatch-copy");
|
||||
const name = swatch.getAttribute("data-name") || "";
|
||||
const hex = swatch.getAttribute("data-hex") || "";
|
||||
if (mode === "hex") return copyText(hex, "Hex kopiert");
|
||||
if (mode === "token") return copyText(`var(--${name})`, "Token kopiert");
|
||||
});
|
||||
|
||||
/* Theme toggle */
|
||||
(() => {
|
||||
const btn = document.querySelector("[data-theme-toggle]");
|
||||
const saved = localStorage.getItem("juconnect_theme");
|
||||
if (saved) document.documentElement.setAttribute("data-theme", saved);
|
||||
syncBackgroundSwatch();
|
||||
syncThemeLogos();
|
||||
|
||||
btn?.addEventListener("click", () => {
|
||||
const current = document.documentElement.getAttribute("data-theme");
|
||||
const next = current === "dark" ? "light" : "dark";
|
||||
document.documentElement.setAttribute("data-theme", next);
|
||||
localStorage.setItem("juconnect_theme", next);
|
||||
syncBackgroundSwatch();
|
||||
syncThemeLogos();
|
||||
Toast.show(`Theme: ${next}`);
|
||||
});
|
||||
})();
|
||||
|
||||
/* Active nav link on scroll */
|
||||
(() => {
|
||||
const links = $$(".navlink");
|
||||
const sections = links
|
||||
.map(a => document.querySelector(a.getAttribute("href")))
|
||||
.filter(Boolean);
|
||||
|
||||
const obs = new IntersectionObserver((entries) => {
|
||||
const visible = entries
|
||||
.filter(e => e.isIntersecting)
|
||||
.sort((a,b) => b.intersectionRatio - a.intersectionRatio)[0];
|
||||
if (!visible) return;
|
||||
|
||||
links.forEach(a => a.classList.remove("is-active"));
|
||||
const id = "#" + visible.target.id;
|
||||
const active = links.find(a => a.getAttribute("href") === id);
|
||||
active?.classList.add("is-active");
|
||||
}, { rootMargin: "-25% 0px -65% 0px", threshold: [0.12, 0.25, 0.45] });
|
||||
|
||||
sections.forEach(s => obs.observe(s));
|
||||
})();
|
||||
|
||||
/* Nav search filter */
|
||||
(() => {
|
||||
const input = document.querySelector("[data-nav-search]");
|
||||
const nav = document.querySelector("[data-nav]");
|
||||
if (!input || !nav) return;
|
||||
|
||||
const allLinks = $$("a.navlink", nav);
|
||||
|
||||
input.addEventListener("input", () => {
|
||||
const q = input.value.trim().toLowerCase();
|
||||
allLinks.forEach(a => {
|
||||
const show = !q || a.textContent.toLowerCase().includes(q) || a.getAttribute("href").toLowerCase().includes(q);
|
||||
a.style.display = show ? "" : "none";
|
||||
});
|
||||
|
||||
// hide empty groups
|
||||
$$(".navgroup", nav).forEach(g => {
|
||||
const anyVisible = $$("a.navlink", g).some(a => a.style.display !== "none");
|
||||
g.style.display = anyVisible ? "" : "none";
|
||||
});
|
||||
});
|
||||
})();
|
||||
|
||||
/* Bildsprache prompt generator */
|
||||
(() => {
|
||||
const topicInput = document.querySelector("[data-bild-topic]");
|
||||
const copyBtn = document.querySelector("[data-bild-copy]");
|
||||
if (!topicInput || !copyBtn) return;
|
||||
|
||||
const template = `Erstelle eine ruhige, sachliche Illustration zum Thema: {THEMA}.
|
||||
|
||||
Stil:
|
||||
- reduzierte, professionelle Vektorillustration
|
||||
- klare Formen, weiche Kanten, keine Comic-\u00dcberzeichnung
|
||||
- keine Verniedlichung, keine \u00fcbertriebenen Emotionen
|
||||
- sachlich, freundlich, respektvoll
|
||||
- geeignet f\u00fcr Jugend- und Familienhilfe im Kontext \u00f6ffentlicher Tr\u00e4ger
|
||||
|
||||
Farbwelt:
|
||||
- Prim\u00e4rfarbe: tiefes, seri\u00f6ses Blau (#1d354f) f\u00fcr Struktur, Kleidung, Rahmen
|
||||
- Akzentfarbe: dezenter, warmer Salbeiton (#8FAE9A) nur f\u00fcr kleine Hervorhebungen
|
||||
- neutrale Off-White- und Grau-T\u00f6ne f\u00fcr Hintergr\u00fcnde
|
||||
- keine grellen Farben, kein hoher Kontrast, kein Schwarz
|
||||
|
||||
Motivik:
|
||||
- abstrahierte Menschen oder Symbole (keine realistischen Portr\u00e4ts)
|
||||
- keine konkreten Alters-, Ethnie- oder Rollenklischees
|
||||
- Fokus auf Handlung, Beziehung oder Prozess \u2013 nicht auf Drama
|
||||
- positive, ruhige K\u00f6rpersprache
|
||||
- ausreichend Freiraum (Whitespace), damit Text erg\u00e4nzt werden kann
|
||||
|
||||
Komposition:
|
||||
- klarer Bildaufbau, gut lesbar auch in klein
|
||||
- geeignet f\u00fcr Website-Sektionen, Infoboxen oder Erkl\u00e4rgrafiken
|
||||
- Hintergrund ruhig und nicht detailreich
|
||||
|
||||
Ausschl\u00fcsse:
|
||||
- keine Fotos, kein Fotorealismus
|
||||
- keine Stock-Illustrations-Klischees
|
||||
- keine kindlichen Comic-Stile
|
||||
- keine starken Schatten, Glows oder Effekte`;
|
||||
|
||||
const buildPrompt = () => {
|
||||
const topic = topicInput.value.trim() || "[THEMA EINF\u00dcGEN]";
|
||||
return template.replace("{THEMA}", topic);
|
||||
};
|
||||
|
||||
copyBtn.addEventListener("click", () => {
|
||||
copyText(buildPrompt(), copyBtn.getAttribute("data-copy-label") || "Bildprompt kopiert");
|
||||
});
|
||||
})();
|
||||
|
||||
/* Tabs */
|
||||
(() => {
|
||||
$$("[data-tabs]").forEach((tabs) => {
|
||||
const buttons = $$(".tab", tabs);
|
||||
const panels = $$(".tabs__panel", tabs);
|
||||
|
||||
const activate = (btn) => {
|
||||
buttons.forEach(b => {
|
||||
const active = b === btn;
|
||||
b.classList.toggle("is-active", active);
|
||||
b.setAttribute("aria-selected", String(active));
|
||||
b.tabIndex = active ? 0 : -1;
|
||||
});
|
||||
|
||||
const id = btn.getAttribute("aria-controls");
|
||||
panels.forEach(p => p.classList.toggle("is-active", p.id === id));
|
||||
};
|
||||
|
||||
buttons.forEach((btn) => {
|
||||
btn.addEventListener("click", () => activate(btn));
|
||||
btn.addEventListener("keydown", (e) => {
|
||||
const idx = buttons.indexOf(btn);
|
||||
if (e.key === "ArrowRight") { e.preventDefault(); buttons[(idx + 1) % buttons.length].focus(); }
|
||||
if (e.key === "ArrowLeft") { e.preventDefault(); buttons[(idx - 1 + buttons.length) % buttons.length].focus(); }
|
||||
if (e.key === "Enter" || e.key === " ") { e.preventDefault(); activate(btn); }
|
||||
});
|
||||
});
|
||||
});
|
||||
})();
|
||||
|
||||
/* Accordion */
|
||||
(() => {
|
||||
$$("[data-accordion]").forEach((acc) => {
|
||||
$$(".acc__trigger", acc).forEach((btn) => {
|
||||
const panel = btn.nextElementSibling;
|
||||
if (!panel) return;
|
||||
|
||||
btn.addEventListener("click", () => {
|
||||
const open = btn.getAttribute("aria-expanded") === "true";
|
||||
btn.setAttribute("aria-expanded", String(!open));
|
||||
panel.hidden = open;
|
||||
});
|
||||
});
|
||||
});
|
||||
})();
|
||||
|
||||
/* Modal */
|
||||
(() => {
|
||||
let lastFocus = null;
|
||||
|
||||
const openModal = (modal) => {
|
||||
if (!modal) return;
|
||||
lastFocus = document.activeElement;
|
||||
modal.hidden = false;
|
||||
|
||||
const focusables = $$("button,[href],input,select,textarea,[tabindex]:not([tabindex='-1'])", modal)
|
||||
.filter(el => !el.hasAttribute("disabled"));
|
||||
const first = focusables[0];
|
||||
const last = focusables[focusables.length - 1];
|
||||
first?.focus();
|
||||
|
||||
const onKey = (e) => {
|
||||
if (e.key === "Escape") closeModal(modal);
|
||||
if (e.key !== "Tab") return;
|
||||
if (!focusables.length) return;
|
||||
|
||||
if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
|
||||
else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
|
||||
};
|
||||
|
||||
modal.__onKey = onKey;
|
||||
document.addEventListener("keydown", onKey);
|
||||
};
|
||||
|
||||
const closeModal = (modal) => {
|
||||
if (!modal) return;
|
||||
modal.hidden = true;
|
||||
document.removeEventListener("keydown", modal.__onKey);
|
||||
lastFocus?.focus?.();
|
||||
};
|
||||
|
||||
document.addEventListener("click", (e) => {
|
||||
const openBtn = e.target.closest("[data-modal-open]");
|
||||
if (openBtn) {
|
||||
const sel = openBtn.getAttribute("data-modal-open");
|
||||
openModal(document.querySelector(sel));
|
||||
return;
|
||||
}
|
||||
|
||||
const closeBtn = e.target.closest("[data-modal-close]");
|
||||
if (closeBtn) {
|
||||
const modal = closeBtn.closest(".modal");
|
||||
closeModal(modal);
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
||||
/* Demo form validation */
|
||||
(() => {
|
||||
const form = document.querySelector("[data-demo-form]");
|
||||
if (!form) return;
|
||||
|
||||
const status = $(".form__status", form);
|
||||
|
||||
const setStatus = (msg, type="info") => {
|
||||
status.textContent = msg;
|
||||
status.style.marginTop = "6px";
|
||||
status.style.color = type === "danger" ? "var(--danger)" : "var(--muted)";
|
||||
};
|
||||
|
||||
form.addEventListener("submit", (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const name = form.name.value.trim();
|
||||
const email = form.email.value.trim();
|
||||
const topic = form.topic.value.trim();
|
||||
const privacy = form.privacy.checked;
|
||||
|
||||
const errors = [];
|
||||
if (!name) errors.push("Name fehlt.");
|
||||
if (!email || !email.includes("@")) errors.push("E-Mail ungültig.");
|
||||
if (!topic) errors.push("Thema auswählen.");
|
||||
if (!privacy) errors.push("Datenschutz bestätigen.");
|
||||
|
||||
if (errors.length) {
|
||||
setStatus("Bitte prüfen: " + errors.join(" "), "danger");
|
||||
Toast.show("Formular unvollständig.");
|
||||
return;
|
||||
}
|
||||
|
||||
setStatus("Demo: Formular wäre jetzt versendet.", "info");
|
||||
Toast.show("Danke. Anfrage gespeichert (Demo).");
|
||||
form.reset();
|
||||
});
|
||||
|
||||
form.addEventListener("reset", () => setStatus("Zurückgesetzt."));
|
||||
})();
|
||||
Reference in New Issue
Block a user