Load Lemon Sicus button with custom settings and display content.

by lemniscus

HTML

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.8/css/bootstrap.min.css"
/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.8/js/bootstrap.min.js"></script>

<!--
lemmyFlansch – Online-Termin Integration (lemniscus)

Ein einziges Script für:
- Inline-Buttons
- Floating-Button
- Termin-Teaser (Scroller oder Pager)

=====================================================
GRUNDPRINZIP
=====================================================

Das Script sucht im Dokument nach Elementen mit
data-lemmy-flansch="…"
und ersetzt diese dynamisch durch die passenden UI-Komponenten.

=====================================================
INLINE BUTTONS
=====================================================

HTML:
<a data-lemmy-flansch="button"></a>

Wird automatisch ersetzt durch einen gestylten
Online-Termin-Button.


=====================================================
FLOATING BUTTON
=====================================================

Wird automatisch erzeugt, wenn data-floating-side gesetzt ist.

Optionen (am Script-Tag):

- data-floating-side
    "right" | "left"
    Standard: right

- data-floating-text
    Text unter dem Icon
    Standard: "Termin?"

=====================================================
TEASER (TERMIN-VORSCHAU)
=====================================================

HTML:
<div data-lemmy-flansch="teasers"></div>

Optional:
- data-teaser-swipe
    "scroll"  → horizontales freies Scrollen (Default)
    "dots"    → Pager mit Punkten (eine Karte im Fokus)

Beispiel:
<div data-lemmy-flansch="teasers" data-teaser-swipe="dots"></div>

=====================================================
DESIGN / STYLING
=====================================================

Optionen (am Script-Tag):

- data-theme
    "blue" | "dark" | "light" | "sepia"
    Standard: blue

- data-radius
    Zahlenwert oder CSS-Wert
    Beispiel: "12" → 12px
     ...