Mehrsprachige Themen-Seite mit Tags

🇩🇪 README (Deutsch)

🧩 Template – Modulbasierte Web-Dokumentation

Status: Alpha/Beta

Sprache: Deutsch / Englisch

Live-Demo: (optional – hier später Link einfügen)

📌 Überblick

Dieses Projekt ist ein modular aufgebautes Template für Webseiten-Dokumentationen, Tutorials oder Produktpräsentationen.

Es enthält:

Mehrsprachigen Aufbau (Deutsch & Englisch)

Linke Sidebar für Navigation („BIO“, „Theme Switch“, „Info“, …)

Theme-System (Hell/Dunkel + automatische Erkennung)

Sprachumschaltung über Flaggen (ähnlich wie incredibox.com)

Dynamische Tags (über tags.js)

Modulbasierte Dokumentationsseiten (docs/de.html, docs/en.html)

Responsives Design

Favicons & Assets (z. B. Flaggen in SVG)

📂 Ordnerstruktur

project-root/
├─ index.html
├─ index-en.html
├─ css/
│  ├─ styles.css
│  └─ themes.css
├─ js/
│  ├─ tags.js
│  ├─ theme.js
│  ├─ lang.js
│  └─ app.js
├─ icons/
│  ├─ favicon-32.png (oder .svg)
│  └─ logo.svg
├─ assets/flags/
│  ├─ de.svg
│  ├─ en.svg
│  ├─ fr.svg
│  ├─ es.svg
│  ├─ it.svg
│  ├─ us.svg
│  ├─ jp.svg
│  ├─ cn.svg
│  ├─ tw.svg
│  ├─ br.svg
│  ├─ pl.svg
│  ├─ tr.svg
│  ├─ us.svg
│  └─ ua.svg
├─ docs/
│  ├─ index.html
│  ├─ de.html
│  ├─ en.html
│  └─ assets/
│     ├─ docs.css
│     └─ docs.js
├─ docs/examples/live-demo.html
├─ build/
│  ├─ package.json
│  └─ generate-themes.js
├─ README.md
├─ folder-structor.md
└─ tutorial.md

✨ Funktionen

🌙 Theme-System

Hell/Dunkel per Button

OS-Theme wird automatisch erkannt

Theme wird gespeichert (localStorage)

🌐 Mehrsprachigkeit

Sprachauswahl oben rechts mit Flaggen (SVG).

Wird über URL-Wechsel realisiert (index.html ↔ index-en.html).

📚 Sidebar

Linke Navigation mit modifizierbaren Kategorien:

BIO

Theme Switch

About

Dokumentation

Tutorial

🏷️ Tags

Für Suchfeatures oder Sortierungen.

🔧 Build-Skript

Das Build-Skript (build.sh) optimiert:

CSS minimieren

JS minimieren

Assets kopieren

🧪 Entwicklungsstatus

Derzeit Alpha/Beta, weitere Module sind in Arbeit:

Erweiterte Live-Demo-Integration

Vollständige Barrierefreiheitsprüfung

Download-Module

📝 Lizenz

(Hier kann deine Lizenz rein – MIT, Apache, GPL, …)

---

🇬🇧 README (English)

🧩 Template – Modular Web Documentation

Status: Alpha/Beta

Language: German / English

Live Demo: (optional – add link later)

📌 Overview

This project is a modular template for documentation pages, tutorials, or product presentation websites.

It includes:

Multilingual setup (German & English)

Left-side navigation sidebar (“BIO”, “Theme Switch”, “Info”, …)

Theme system (Light/Dark + system recognition)

Language selector with flags (similar to incredibox.com)

Dynamic tags (via tags.js)

Modular documentation pages (docs/en.html, docs/de.html)

Responsive layout

Favicons & SVG assets (flags included)

📂 Project Structure

project-root/
├─ index.html
├─ index-en.html
├─ css/
│  ├─ styles.css
│  └─ themes.css
├─ js/
│  ├─ tags.js
│  ├─ theme.js
│  ├─ lang.js
│  └─ app.js
├─ icons/
│  ├─ favicon-32.png (oder .svg)
│  └─ logo.svg
├─ assets/flags/
│  ├─ de.svg
│  ├─ en.svg
│  ├─ fr.svg
│  ├─ es.svg
│  ├─ it.svg
│  ├─ us.svg
│  ├─ jp.svg
│  ├─ cn.svg
│  ├─ tw.svg
│  ├─ br.svg
│  ├─ pl.svg
│  ├─ tr.svg
│  ├─ us.svg
│  └─ ua.svg
├─ docs/
│  ├─ index.html
│  ├─ de.html
│  ├─ en.html
│  └─ assets/
│     ├─ docs.css
│     └─ docs.js
├─ docs/examples/live-demo.html
├─ build/
│  ├─ package.json
│  └─ generate-themes.js
├─ README.md
├─ folder-structor.md
└─ tutorial.md

✨ Features

🌙 Theme System

Light/Dark toggle

Auto-detection of system theme

Theme is persisted via localStorage

🌐 Multilingual Support

Language selection in the top-right corner with flag icons.

Implemented by switching between:

index.html (German)

index-en.html (English)

📚 Sidebar

Left-hand navigation for important modules:

BIO

Theme Switch

About

Documentation

Tutorial

🏷️ Tag System

Used for filtering or search modules.

🔧 Build Script

build.sh performs:

CSS minification

JS minification

Asset bundling

🧪 Development Status

Currently in Alpha/Beta stage.

Upcoming features include:

Enhanced live demo

Accessibility improvements

Additional UI modules

📝 License

(Insert your chosen license here – MIT, Apache, GPL, …)