WBCE CMS Forum

acurti

Member

Begrüssung

# Begüssung
#### DropletCode
###### Anwendung
[[begruessung?lang=de]] oder [[begruessung?lang=en]] oder [[begruessung]] für standard Deutsch
###### Beschreibung
Der Code wurde nochmals angepasst. Code ist Global, für alle Länder. Neu ist, dass JavaScript(LiveScript) die Zeit Lokal ausliesst so, dass die Berüssungsmeldung in jedem Land richtig angezeigt wird. Zusätzlich anstatt if' s eine Matrix für die Zeitumschaltung.

// 1. Parameter für Sprache abrufen
$lang = (isset($lang)) ? strtolower($lang) : 'de';

return '
<div id="greeting-box" style="display: none; align-items: center; background-color: #f4f7f9; border: 1px solid #d1d9e0; border-left: 5px solid #4B85A1; border-radius: 8px; padding: 10px 15px; margin-top: 10px; margin-bottom: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); gap: 12px; position: relative; font-family: Arial, sans-serif;">
    <span onclick="this.parentElement.style.display=\'none\'" style="position: absolute; top: 5px; right: 8px; cursor: pointer; color: #cc0000; font-size: 14px; font-weight: bold;">×</span>
    <img id="greeting-img" src="" style="width: 45px; height: 45px; object-fit: contain;">
    <div style="display: flex; flex-direction: column; padding-right: 15px;">
        <span id="greeting-welcome" style="font-size: 11px; color: #999;"></span>
        <span id="greeting-text" style="font-size: 16px; color: #455a64; font-weight: bold;"></span>
    </div>
</div>

<script>
(function() {
    // 1. Lokale Zeit des Besuchers holen
    const jetzt = new Date();
    const stunde = jetzt.getHours();
    const tagIndex = jetzt.getDay();
    const lang = "' . $lang . '";
    const baseUrl = "' . WB_URL . '/media/";

    // 2. MATRIX (Eins-zu-Eins übernommen)
    const stundenPlan = [
        0,0,0,0,0,      // 0-4: Nacht
        1,1,1,1,1,      // 5-9: Morgen
        2,2,            // 10-11: Tag
        3,              // 12: Mittag
        4,4,4,4,        // 13-16: Nachmittag
        5,5,5,5,5,5,5   // 17-23: Abend
    ];
    const slot = stundenPlan[stunde];

    // 3. DATEN-PAKETE
    const texte = {
        "de": {
            "welcome": "Herzlich willkommen,",
            "tage": ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"],
            "slots": [["Nacht", "Gute"], ["Morgen", "Guten"], ["Tag", "Guten"], ["Mittag", "Guten"], ["Nachmittag", "Guten"], ["Abend", "Guten"]]
        },
        "en": {
            "welcome": "Welcome,",
            "tage": ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
            "slots": [["Night", "Good"], ["Morning", "Good"], ["Day", "Good"], ["Noon", "Good"], ["Afternoon", "Good"], ["Evening", "Good"]]
        }
    };

    const bilder = [
        "begruessung_nacht.png", "begruessung_morgen.png", "begruessung_mittag.png", 
        "begruessung_mittag.png", "begruessung_nachmittag.png", "begruessung_abend.png"
    ];

    const current = texte[lang] || texte["de"];
    const slotData = current.slots[slot];
    const wochentag = current.tage[tagIndex];

    // 4. AUSGABE BAUEN
    document.getElementById("greeting-img").src = baseUrl + bilder[slot];
    document.getElementById("greeting-welcome").innerText = current.welcome;
    
    let finalMsg = "";
    if (lang === "en") {
        finalMsg = slotData[1] + " " + slotData[0] + "! Happy " + wochentag + "!";
    } else {
        finalMsg = slotData[1] + " " + slotData[0] + ", der " + wochentag + " grüsst dich!";
    }
    
    document.getElementById("greeting-text").innerText = finalMsg;
    document.getElementById("greeting-box").style.display = "inline-flex";
})();
</script>
';

###### Zusätzliches:
Im Code ist der Pfad der Bilder sichtbar wenn Keine Bilder vorhanden sind könnte Ihr die 5 Bilder auch runterladen.
###### Zukunft: Später folgt ein Code der genau gleich ist bist auf die Bilder, im zweiten Code werden die Bilder gezeichnet so muss man sich nicht um Bilder kümmer die Bilder würden dann etwas schlichter aussehen.

###### Vorschau:

Ich würde mich auf ein Feedback freuen.

Last edited by acurti (29.01.2026 10:01:41)

---

Keine Tricks und keine Versprechungen, der Code muss das tun was er tun muss und gut lesbar sein und braucht keine Kommentare, dann ist es ein guter Code. Das ist mein lieblingszitat von GNU Linux.

florian

Administrator

Re: Begrüssung

Nette Idee. Habe das Thema mal ins richtige Unterforum verschoben und den Code formatiert.

---

Sorgen sind wie Nudeln: man macht sich meist zu viele.