From 0f54048ace002cfa6c0d8bab9f47450ff89585ff Mon Sep 17 00:00:00 2001 From: Sven Date: Wed, 11 Feb 2026 11:56:58 +0100 Subject: [PATCH] Dateien nach "/" hochladen --- .gitlab-ci.yml | 12 + README.md | 31 ++ index.html | 853 +++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 896 insertions(+) create mode 100644 .gitlab-ci.yml create mode 100644 README.md create mode 100644 index.html diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml new file mode 100644 index 0000000..749951c --- /dev/null +++ b/.gitlab-ci.yml @@ -0,0 +1,12 @@ +pages: + stage: deploy + image: alpine:latest + script: + - apk add --no-cache rsync + - mkdir -p public + - rsync -av --delete --exclude public --exclude .git --exclude .gitlab-ci.yml ./ public/ + artifacts: + paths: + - public + only: + - main diff --git a/README.md b/README.md new file mode 100644 index 0000000..74983d2 --- /dev/null +++ b/README.md @@ -0,0 +1,31 @@ +# JuConnect · Styleguide (v0.2) + +Dieses Paket ist ein **Tool-first Styleguide** und gleichzeitig ein **Starter** für die spätere Website. + +## Fokus +- **Kopierbar**: Farben, Tokens, Snippets (HTML/CSS) per Button +- **Seriös & ruhig**: primär über Markenblau, Akzent nur unterstützend +- **Komponenten-Basis**: Buttons, Forms, Feedback, Layout, Patterns + +## Start +1. Entpacken +2. `index.html` öffnen (ideal über lokalen Server) + +## Copy-Funktionen +- `[data-copy="..."]` kopiert beliebigen Text +- `data-snippet-copy` kopiert Inhalt des nächsten `
`
+- Swatches: „Hex“ / „Token“ kopieren
+
+## Brand Tokens
+- Primär: `#1d354f` (`--primary`)
+- Akzent: `#8FAE9A` (`--accent`) → Fokus/Marker/kleine Highlights
+
+## Struktur
+- `assets/css/style.css` – Tokens + Komponenten
+- `assets/js/app.js` – Copy, Toast, Tabs, Accordion, Modal, Sticky-Navigation-Highlight, Nav-Suche
+- `assets/img/juconnect.svg` – Logo
+
+## Nächste Ausbaustufe (wenn ihr wollt)
+- Icons-System (SVG Sprites)
+- Weitere Komponenten: Breadcrumbs, Pagination, Stepper, File Upload, Search/Filter Chips
+- Seiten-Templates: Start / Leistungen / Trägerinfo / Downloads / Kontakt / Datenschutz / Impressum
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..184d0b5
--- /dev/null
+++ b/index.html
@@ -0,0 +1,853 @@
+
+
+
+  
+  
+  
+  JuConnect · Styleguide
+  
+
+
+
+  
+
+  

+    
+    
+
+    
+    

+      

+        

+          

+            Design System
+            Version 0.2
+          

+          

+            JuConnect Logo
+          

+          
Styleguide

+          

+            Toolbox Styleguide für JuConnect. Klar strukturierte Regeln und kopierbare Code-Snippets für konsistente Gestaltung und Kommunikation.
+          

+          

+            
+              
+              Primär #1d354f
+              
+            
+            
+              
+              Akzent #8FAE9A
+              
+            
+          

+        

+
+        

+          

+            

+              
Use-case

+              
Öffentliche Träger

+            

+            

+              
Ton

+              
Sachlich, respektvoll

+            

+            

+              
Akzent

+              
sparsam, unterstützend

+            

+          

+        

+      

+
+      
+      

+        

+          
Marke & Kommunikation

+          
Kurzregeln für Sprache, Tonalität und visuelle Haltung.

+        

+
+        

+          

+            

+              
Stimme (Voice)

+              
+            

+            
    
+              
  • Sie-Ansprache, respektvoll
    • 
+              
  • kurze Sätze, klare Begriffe
    • 
+              
  • keine Marketing-Floskeln, keine Superlative
    • 
+              
  • keine Emotionalisierung sensibler Themen
    • 
+              
  • präzise Zuständigkeiten & Abläufe
    • 
+            

+          

+
+          

+            

+              
Do / Don’t

+              
+            

+            

+              

+                
Do

+                
    
+                  
  • „Ablauf in 3 Schritten“
    • 
+                  
  • „Zuständigkeit & Kontakt“
    • 
+                  
  • „Dokumente & Nachweise“
    • 
+                

+              

+              

+                
Don’t

+                
    
+                  
  • „Wir ändern Ihr Leben“
    • 
+                  
  • zu viele Fotos/Emotionen
    • 
+                  
  • verspielte UI-Effekte
    • 
+                

+              

+            

+          

+        

+      

+
+      
+      

+        

+          
Bildsprache

+          
Leitlinien für sachliche, respektvolle Illustrationen im JuConnect-Kontext.

+        

+
+        

+          

+            

+              
Regeln

+              
+            

+            
    
+              
  • Stil: sachlich, reduziert, freundlich
    • 
+              
  • Keine Verniedlichung
    • 
+              
  • Keine übertriebenen Emotionen
    • 
+              
  • Klare Formen, ruhige Farben
    • 
+              
  • Eher erklärend als erzählend
    • 
+            

+          

+
+          

+            

+              
Beispiele

+              Referenz
+            

+            

+              

+                Beispielbild Helfer
+                
Helfer

+              

+              

+                Beispielbild Gruppe
+                
Gruppe

+              

+            

+          

+        

+
+        

+          

+            
Prompt-Generator

+            
+          

+
+          

+            
+            
+            
Beim Kopieren wird das Thema direkt in den Prompt eingesetzt.

+          

+        

+      

+
+      
+      
+
+      
+      

+        

+          
Design Tokens

+          
Copy & paste: CSS Variablen als Single Source of Truth.

+        

+
+        

+          

+            

+              
CSS Tokens (Auszug)

+              

+                
+              

+            

+            
:root{
+  --primary: #1d354f;
+  --accent:  #8FAE9A;
+
+  --bg:       #f6f7f8;
+  --surface:  #ffffff;
+  --surface2: #eef1f3;
+  --text:     #101922;
+  --text2:    #3c4a58;
+  --muted:    #607384;
+  --line:     #d7dee5;
+
+  --radius: 14px;
+  --shadow-sm: 0 6px 16px rgba(16, 25, 34, .08);
+  --focus: 0 0 0 3px rgba(143, 174, 154, .35);
+}

+          

+        

+      

+
+      
+      

+        

+          
Farben

+          
Primärfarbe führt. Akzent ist Unterstützung, nicht Hauptdarsteller.

+        

+
+        

+          

+            

+            

+              
Primär

+              
--primary · #1d354f

+              

+                
+                
+              

+            

+          

+
+          

+            

+            

+              
Akzent (Salbei)

+              
--accent · #8FAE9A

+              

+                
+                
+              

+            

+          

+
+          

+            

+            

+              
Hintergrund

+              
--bg · #f6f7f8

+              

+                
+                
+              

+            

+          

+        

+
+        

+          

+            

+              
Header-Verlauf

+              
+            

+            

+            
Layer 1 (light) · #8FAE9A38 → #8FAE9A00

+            
Layer 2 (light) · #1D354F1A → #1D354F00

+            
Layer 1 (dark) · #8FAE9A2E → #8FAE9A00

+            
Layer 2 (dark) · #8FAE9A26 → #8FAE9A00

+            
Base · var(--surface)

+            

+              
+              
+              
+            

+            
Einsatz: Page-Header, Hero-Flächen und ruhige visuelle Trennung.

+          

+        

+
+        

+          

+            

+              
Primär in UI

+              
+            

+            
Primärfarbe für Navigation, Headlines, Primary Actions.

+            

+              
+              
+              
+            

+          

+
+          

+            

+              
Akzent sparsam

+              
+            

+            

+              
Beispiel: dezenter Highlight

+              
Akzent nur als feiner Rahmen / Marker — nicht als große Fläche.

+            

+          

+        

+      

+
+      
+      

+        

+          
Typografie

+          
Source Sans 3. Lesbarkeit und ruhige Hierarchie.

+        

+
+        

+          

+            

+              
Skala

+              
+            

+            

+              
H1 — Überschrift

+              
H2 — Abschnitt

+              
H3 — Unterpunkt

+              
Lead: kurze Einleitung. Keine Floskeln, klare Sprache.

+              
Fließtext: max. 75 Zeichen pro Zeile. Link ist deutlich.

+              
Muted: Metadaten, Hilfetexte, sekundäre Inhalte.

+            

+          

+
+          

+            

+              
Copy Snippets

+              
+            

+            

+              
Regel

+              
Fließtext-Breite begrenzen (max-width: 75ch).

+            

+            

+              
Betonung

+              
Fett sparsam; Bedeutung entsteht durch Struktur, nicht Gewicht.

+            

+          

+        

+      

+
+      
+      

+        

+          
Buttons

+          
Primär = Markenblau. Akzent bleibt dezent.

+        

+
+        

+          

+            

+              
Preview

+              
+            

+
+            

+              
+              
+              
+              
+              
+            

+            
Fokuszustand ist sichtbar, Hover ist zurückhaltend.

+          

+
+          

+            

+              
Button CSS

+              
+            

+            
.btn--primary{
+  background: var(--primary);
+  color: #fff;
+  border-color: rgba(0,0,0,.06);
+}

+          

+        

+      

+
+      
+      

+        

+          
Formulare

+          
Klare Labels, Hilfetexte, Validierung. Tool-first: HTML direkt kopieren.

+        

+
+        

+          

+            

+              
Kontaktformular (Snippet)

+              
+            

+
+            

+
<form class="form">
+  <div class="field">
+    <label class="label" for="name">Name</label>
+    <input class="input" id="name" type="text" />
+    <div class="help">Pflichtfeld.</div>
+  </div>
+
+  <div class="field">
+    <label class="label" for="email">E-Mail</label>
+    <input class="input" id="email" type="email" />
+  </div>
+
+  <button class="btn btn--primary" type="submit">Senden</button>
+</form>

+            

+
+            

+
+            

+              

+                
+                
+                
Pflichtfeld.

+              

+
+              

+                
+                
+                
Wir antworten i. d. R. innerhalb von 2 Werktagen.

+              

+
+              

+                
+                
+              

+
+              

+                
+                
+              

+
+              

+                
+                Pflicht für Anfrage.
+              

+
+              

+                
+                
+              

+
+              

+            

+          

+
+          

+            

+              
Zustände

+              
+            

+
+            

+              
+              
+              
Bitte eine gültige E-Mail-Adresse eingeben.

+            

+
+            

+              
+              
+              
Beispiel für korrekte Eingabe.

+            

+
+            

+              
Regel

+              
Fehlertexte sind konkret, kurz, lösungsorientiert.

+            

+          

+        

+      

+
+      
+      

+        

+          
Feedback

+          
Modal, Toast, Tooltip, Accordion/Tabs (kopierbar).

+        

+
+        

+          

+            

+              
Modal

+              
+            

+            

+              
+              
+              
+            

+            
Modal: Esc schließt, Backdrop klick schließt, Fokus-Falle aktiv.

+          

+
+          

+            

+              
Accordion + Tabs

+              
+            

+
+            

+              

+                
+                
+                
+              

+              

+                
Kurze, klare Beschreibung der Leistung.

+              

+              

+                
  1. Anfrage
  2. Rückmeldung
  3. Abstimmung

+              

+              

+                
Kontaktmöglichkeiten für Träger.

+              

+            

+
+            

+
+            

+              
+              
+
+              
+              
+            

+          

+        

+      

+
+      
+      

+        

+          
Layout

+          
Cards, Grid, Tables. Vorlagen für spätere Seiten.

+        

+
+        

+          

+            

+              
Card

+              
+            

+            
Für Inhalt, nicht für Deko. Konsistente Abstände.

+            Mehr
+          

+
+          

+            

+              
Callout

+              
+            

+            

+              
Hinweis

+              
Ruhige Information ohne Alarmismus.

+            

+          

+
+          

+            

+              
Tabelle

+              
+            

+            

+              
+                
+                  
+                
+                
+                  
+                  
+                
+              
DokumentStatusAktion
LeistungsbeschreibungEntwurf
DatenschutzFinal

+            

+          

+        

+      

+
+      
+      

+        

+          
Patterns

+          
Basis-Sektionen für die spätere Website (Hero, Section, CTA).

+        

+
+        

+          

+            
Hero (Template)

+            
+          

+
+          

+
<section class="hero">
+  <div class="hero__inner">
+    <h1 class="h1">Hilfen zur Erziehung – strukturiert & verlässlich</h1>
+    <p class="lead">Informationen für öffentliche Träger und Kooperationspartner.</p>
+    <div class="row wrap">
+      <a class="btn btn--primary" href="#kontakt">Kontakt</a>
+      <a class="btn btn--secondary" href="#leistungen">Leistungen</a>
+    </div>
+  </div>
+</section>

+          

+
+          

+            

+              
Hilfen zur Erziehung – strukturiert & verlässlich

+              
Informationen für öffentliche Träger und Kooperationspartner.

+              

+                Kontakt
+                Leitlinien
+              

+            

+          

+        

+      

+
+      

+        JuConnect · Styleguide v0.2
+      

+    

+  

+
+  
+  
+
+  
+  

+
+  
+
+