Anmelden

NEU: Ihre Pakete jederzeit im Blick: Verfolgen Sie Ihre Sendungen mit PAQATO, um bei Verzögerungen schneller zu reagieren. Jetzt kostenlos aktivieren!
Import

Daten importieren

Importvorgänge

IDDatum / ZeitraumTypStatus BestellungenNetto UmsatzAktionen
443736106 So, 28. Jun 2026, 17:01 Uhr
27.06.26 00:00 bis 28.06.26 16:59
 Shopify GraphQL (API) Importiert Keine neuen
Übersprungen: 37
 Aktionen ▾
Testaufgabe
Coaching-Testszenario
Herkunft Amazon Coaching
Versandtyp Amazon FBA
VCS seit 01.06.2026 versehentlich
PAN-EU / CEE Nein DE only
OSS Nicht registriert kein OSS
Steuersatz Nur 19 % kein 7 %
Importzeiten 08:00 und 17:00 Uhr
Benjamin
Benjamin
Einrichtungsassistent
Benjamin nutzt KI und kann Fehler machen. Wichtige Angaben bitte prüfen.
?
?
Klicken Sie auf ein anderes Element für die nächste Erklärung – Esc beendet den Erklär-Modus.
Selektor-Inspektor

Echte DOM-Adressen aus connect-mapping.js. Badge anklicken = Selektor kopieren.

Adresse + Erklärtext Adresse, Text fehlt Selektor findet nichts ungeprüft (gegen echtes Connect) Navigations-Route
✏ Erklärtext-Modus – klick ein markiertes Feld zum Bearbeiten · Esc beendet
Gespeichert
Technische Architektur
easybill Connect Demo

Diese Demo ist eine vollständig eigenständige Single-Page-Anwendung, die ohne externe Abhängigkeiten oder Frameworks auskommt. Alle Funktionen sind in einer einzigen HTML-Datei implementiert.

🏗️ Aufbau & Technologie

Frontend: Reines HTML5, CSS3 und Vanilla JavaScript – kein React, Vue oder ähnliches. Die gesamte Logik läuft clientseitig im Browser.
  • HTML: Semantische Struktur mit klar definierten Bereichen (Sidebar, Main, Overlays)
  • CSS: Modernes Design mit CSS Custom Properties (CSS Variables), Flexbox und Transitions
  • JavaScript: Event-gesteuerte Architektur ohne externe Bibliotheken

Kernkomponenten

Die Anwendung besteht aus mehreren unabhängigen Modulen:

  • Login-System: Demo-Authentifizierung mit SessionStorage (Passwort: easybill2026)
    Ja, ich weiß – Passwort im Klartext im Code 😬 Aber hey, ist ja nur 'ne Demo! In der echten easybill Connect Anwendung gibt's natürlich OAuth 2.0 mit PKCE, bcrypt-gehashte Passwörter (min. 12 Zeichen, Sonderzeichen, Zahlen), Multi-Faktor-Authentifizierung, Rate-Limiting, Session-Tokens mit HTTP-only Cookies, CSRF-Protection und regelmäßige Security-Audits. Also alles nach BSI-Standard. Versprochen! 🔐
  • Seitennavigation: Dynamisches Umschalten zwischen verschiedenen Einstellungsseiten
  • Geführte Tour: Animierter Walkthrough mit Spotlight-Effekt und Step-by-Step-Erklärungen
  • Chat-Butler: KI-ähnlicher Assistent mit vordefiniertem Szenario, der Einstellungen automatisch vornimmt
  • Erklär-Modus: Interaktives Hilfe-System mit Kontext-Popups für jedes UI-Element
  • Erklärtext-Editor: Redaktioneller Editor (Admin → Tab „Erklärtexte") mit Markdown-Formatierung und Live-Vorschau; Persistierung über PHP-Backend oder LocalStorage als Fallback

Datenpersistenz

Hybrid-Ansatz: Server-first mit LocalStorage-Fallback für maximale Flexibilität

Die Erklärtexte werden zunächst über texte_admin.php auf dem Server gespeichert (erklaer-texte.json). Schlägt dies fehl (z. B. bei lokaler Nutzung via file://), wechselt der Editor automatisch zu LocalStorage – die Vorschau funktioniert dann trotzdem.

Design-Prinzipien

  • Progressive Enhancement: Kernfunktionalität ohne JavaScript, erweiterte Features mit JS
  • Responsive Design: Optimiert für Desktop, mit mobilen Breakpoints
  • Accessibility: ARIA-Labels, Tastaturnavigation und semantisches HTML
  • Performance: Keine externen Requests außer Google Fonts – alles inline

Backend (Optional)

texte_admin.php ist ein minimalistisches PHP-Script, das:

  • GET-Requests beantwortet mit allen Erklärtexten aus erklaer-texte.json
  • POST-Requests (passwortgeschützt) verarbeitet und die Texte gebündelt speichert
  • vor dem Schreiben ein Backup (.bak) anlegt und atomar via temp-Datei schreibt

Deployment

Die Demo kann auf drei Arten bereitgestellt werden:

  • Vollversion (empfohlen): HTML + PHP auf einem Webserver mit PHP-Unterstützung
  • Statisch: Nur HTML auf CDN/Static-Hosting – Erklärtext-Editor nutzt LocalStorage
  • Lokal: Direkt als Datei öffnen – alle Features außer serverseitigem Speichern verfügbar

Besonderheiten

  • Zero Dependencies: Kein npm, keine Build-Tools, kein Bundler
  • Self-Contained: Eine Datei, kopieren & fertig
  • Graceful Degradation: Funktioniert auch ohne Server
  • Developer-Friendly: Klarer, kommentierter Code ohne Minification

Technischer Stack: HTML5 · CSS3 · ES6+ JavaScript · PHP 7.4+ (optional)
Browser-Support: Chrome, Firefox, Safari, Edge (moderne Versionen)

Für Entwickler
Integrations-Übersicht · Phase 1 ready to integrate
FeatureVerzeichnisAktivierung
Erklär-Modus features/erklaer-modus/ ErklaerModus.init({explanations}).toggle()
Normale Tour features/tour-normal/ TourNormal.init({steps, onNavigate}).start()
Tour mit Benjamin features/tour-benjamin/ TourBenjamin.init({steps, onNavigate, assetsPath}).start()
  • onNavigate(page) — Seite wechseln; page = String aus tour-schritte.json, z. B. "auto-import", "vcs-upload"
  • onAction(aktion) — optional; Demo-Aktionen wie "import_aktivieren" oder "vcs_modus_setzen:vcs-connect" ausführen oder ignorieren
  • CSS-Variable --blue muss im Host definiert sein (Primärfarbe)
  • Selektoren in tour-schritte.json und erklaer-texte.json auf echte Connect-IDs anpassen — das ist der Hauptaufwand

Alle Erklär- und Zuordnungsdaten liegen an einer Stelle: connect-mapping.js (Single Source of Truth). Pro Feld ein Eintrag mit echter DOM-Adresse (address), Seite, Typ sowie title + text. Daraus speisen sich Erklär-Modus, Butler und der Selektor-Inspektor – kein Selektor wird doppelt gepflegt.

Wie die Texte künftig redaktionell gepflegt werden, ist eine bewusste Entwickler-Entscheidung. Drei Modelle, alle mit demselben Schlüssel (der name-/href-Adresse) als Verbindung – ein späterer Wechsel ist daher günstig:

ModellWo / wie gepflegtWer pflegtIntegrations­aufwand
A · Registry im Code title/text direkt im Eintrag in connect-mapping.js bzw. erklaer-texte.json Entwickler am geringsten (Ist-Zustand)
B · Separate JSON Texte ausgelagert in erklaer-texte.json; Struktur (Selektor/Seite/Typ) bleibt im Code, das Mapping lädt die Texte per Key jede:r mit JSON-Zugriff, ohne JS-Kenntnisse gering–mittel
C · Admin-Panel Editor-Seite analog Chatbutler-KB (kb_admin.php + wissen.json): Titel/Text je Feld bearbeiten, gespeichert als JSON/DB Fachredaktion, ganz ohne Code höher (UI + Speicher-Endpoint)

Empfehlung zur Konsistenz: Da für den Chatbutler bereits ein Admin-Panel mit JSON-Wissensbasis existiert, liegt Modell C nahe – muss aber nicht. Wichtig nur: die Texte bleiben Daten (keine fest in Templates eingebauten Strings) und werden über die stabile name-/href-Adresse zugeordnet. Den Selektor-Inspektor (Button „Selektoren") als laufende Abdeckungs-Kontrolle nutzen: 🟢 Adresse + Text · 🟡 Text fehlt · 🔴 Selektor findet nichts.

Der Butler (Anthropic Claude Haiku, SSE-Streaming) kann Fragen beantworten und im Ausführ-Modus Einstellungen setzen. Voraussetzungen vor Integration: KI-Modellwahl, DSGVO-Klärung, serverseitiger Action-Whitelist, Rate Limiting. Details: butler/README.md

📄.gitignore← ai_config.php, *.bak, .DS_Store, .claude/ ausgeschlossen
📄README.md← Projekt-Übersicht + Phasenplan
📄ai_config.example.php← Template ohne echte Keys (Original nie ins Repo!)
📄index.html← diese Demo (Mock easybill Connect)
▶📂features/Phase 1
▶📂erklaer-modus/
📄erklaer-modus.css← Mechanismus (Styles)
📄erklaer-modus.js← ErklaerModus.init() / .toggle()
📄erklaer-texte.json← 30 Erklärtexte, trennbar vom Code
📄README.md
▶📂tour-normal/
📄tour-normal.css
📄tour-normal.js← TourNormal.init() / .start()
📄tour-schritte.json← 12 Schritte als Daten (ohne Logik)
📄README.md
▶📂tour-benjamin/
📄tour-benjamin.css
📄tour-benjamin.js← TourBenjamin.init() / .start()
▶📂assets/← 3 PNGs (begruessung / zeigen / abschluss)
🖼begruessung.png
🖼zeigen.png
🖼abschluss.png
📄README.md
▶📂butler/Phase 2
📄README.md← warum zurückgestellt, was nötig ist
▶📂docs/
📄integration-uebersicht.md← Reihenfolge, FAQ, Abhängigkeiten für Ruby-Devs
Wissensdatenbank pflegen
Grundlage für den KI-Butler (Claude)
Wissens-Einträge