Öffnungszeiten Gaststätte und Restaurant

scherenschlag · scherenschlag MBR 6.1.12

Hallo zusammen.
Die Öffnungszeiten meiner Stammkneipe, deren Homepage ich gestalte,
suchen Ihresgleichen in der Gaststätten und Restaurantwelt. Glaube ich.

Soviel verschiedene Zeiten habe ich noch nirgends gefunden.
Essen. Trinken. Mittagstisch. Sondertage. Fast jeden Tag andere Zeiten.
Hat jemand mal eine Idee, wie ich so etwas neu gestalten könnte?
https://www.gaststaette-zur-sonne.de

Ich würde mal den Leerraum unter dem Footer beseitigen

Oder soll das so ?

Moin,

habe mal meine KI damit beschäftigt.

Das Problem ist weniger die Menge der Öffnungszeiten als die Darstellung. Im Moment muss man sehr genau lesen, weil normale Zeiten, Sonderzeiten und Hinweise optisch fast gleichberechtigt untereinanderstehen.

Ich würde daraus zwei klar getrennte Bereiche „Küche“ und „Gaststätte“ machen und die Wochentage möglichst zusammenfassen. Besonders die Gaststätte lässt sich viel übersichtlicher darstellen.

Gucke Dir mal diese Idee an (HTML-Code folgt):

Diese Seite zeigt dann oben auch immer den aktuellen Tag "Heute geöffnet" automatisch an.

Hier die HTML-Seite - kannst Du nachbauen oder auch einzelne Elemente übernehmen.

Code: Alles auswählen

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Öffnungszeiten der Sonne</title>

    <style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: Arial, Helvetica, sans-serif;
            background: #f5f3ee;
            color: #262626;
            line-height: 1.5;
        }

        .opening-hours {
            max-width: 1050px;
            margin: 0 auto;
            padding: 60px 20px;
        }

        .opening-hours h1 {
            margin: 0 0 12px;
            text-align: center;
            font-size: clamp(2rem, 4vw, 3.2rem);
            line-height: 1.15;
            color: #2f4226;
        }

        .intro {
            max-width: 700px;
            margin: 0 auto 32px;
            text-align: center;
            color: #666;
            font-size: 1.05rem;
        }

        .today-box {
            margin: 0 auto 34px;
            padding: 22px 24px;
            max-width: 820px;
            background: #2f4226;
            color: #fff;
            border-radius: 16px;
            text-align: center;
            box-shadow: 0 8px 24px rgba(0,0,0,.10);
        }

        .today-box .today-title {
            display: block;
            margin-bottom: 8px;
            font-size: .9rem;
            letter-spacing: .08em;
            text-transform: uppercase;
            opacity: .75;
        }

        .today-box .today-day {
            display: block;
            margin-bottom: 12px;
            font-size: 1.4rem;
            font-weight: 700;
        }

        .today-times {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 10px 26px;
            font-size: 1.05rem;
        }

        .today-times strong {
            color: #f4d77b;
        }

        .cards {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 24px;
            align-items: start;
        }

        .card {
            overflow: hidden;
            background: #fff;
            border-radius: 18px;
            box-shadow: 0 8px 30px rgba(0,0,0,.08);
        }

        .card-header {
            padding: 22px 26px;
            color: #fff;
            background: #617d4f;
        }

        .card-header h2 {
            margin: 0;
            font-size: 1.6rem;
        }

        .card-header p {
            margin: 4px 0 0;
            opacity: .85;
        }

        .hours-list {
            margin: 0;
            padding: 8px 26px 18px;
        }

        .hours-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 20px;
            align-items: center;
            padding: 17px 0;
            border-bottom: 1px solid #e7e7e7;
        }

        .hours-row:last-child {
            border-bottom: 0;
        }

        .days {
            font-weight: 600;
        }

        .time {
            white-space: nowrap;
            font-size: 1.05rem;
            font-weight: 700;
            color: #2f4226;
        }

        .additional {
            display: block;
            margin-top: 3px;
            font-size: .85rem;
            font-weight: 400;
            color: #777;
        }

        .notice {
            margin: 0 26px 22px;
            padding: 16px 18px;
            border-radius: 12px;
            background: #fff6d8;
            border-left: 5px solid #e1ad27;
        }

        .notice strong {
            color: #6e4f00;
        }

        .notice.summer {
            background: #edf6e8;
            border-left-color: #71965a;
        }

        .notice.summer strong {
            color: #365127;
        }

        .allergens {
            margin: 24px auto 0;
            max-width: 820px;
            padding: 18px 22px;
            border: 1px solid #ddd8cd;
            border-radius: 12px;
            background: rgba(255,255,255,.55);
            text-align: center;
            color: #666;
            font-size: .95rem;
        }

        .footnote {
            margin: 18px 0 0;
            text-align: center;
            color: #888;
            font-size: .82rem;
        }

        @media (max-width: 760px) {
            .opening-hours {
                padding: 38px 14px;
            }

            .cards {
                grid-template-columns: 1fr;
            }

            .today-box {
                padding: 20px 16px;
            }

            .today-times {
                display: block;
            }

            .today-times span {
                display: block;
                margin: 5px 0;
            }

            .card-header {
                padding: 20px;
            }

            .hours-list {
                padding: 6px 20px 16px;
            }

            .hours-row {
                grid-template-columns: 1fr;
                gap: 4px;
            }

            .notice {
                margin-left: 20px;
                margin-right: 20px;
            }
        }
    </style>
</head>

<body>

<section class="opening-hours">

    <h1>Öffnungszeiten der Sonne</h1>

    <p class="intro">
        Unsere regulären Öffnungszeiten für Küche und Gaststätte
        auf einen Blick.
    </p>

    <div class="today-box">
        <span class="today-title">Heute geöffnet</span>
        <span class="today-day" id="todayDay">–</span>

        <div class="today-times">
            <span>🍽️ Küche: <strong id="todayKitchen">–</strong></span>
            <span>🍺 Gaststätte: <strong id="todayPub">–</strong></span>
        </div>
    </div>

    <div class="cards">

        <!-- KÜCHE -->
        <article class="card">
            <div class="card-header">
                <h2>🍽️ Küche</h2>
                <p>Unsere Küchenzeiten</p>
            </div>

            <div class="hours-list">

                <div class="hours-row">
                    <div class="days">Montag – Sonntag</div>
                    <div class="time">17:00 – 22:00 Uhr</div>
                </div>

                <div class="hours-row">
                    <div class="days">
                        Mittwoch, Sonntag &amp; Feiertage
                        <span class="additional">zusätzliche Mittagsöffnung</span>
                    </div>
                    <div class="time">12:00 – 14:00 Uhr</div>
                </div>

            </div>

            <div class="notice">
                <strong>⚽ BVB 09 Spieltage</strong><br>
                An Spieltagen des BVB 09 können die Öffnungszeiten
                der Küche abweichen.
            </div>
        </article>


        <!-- GASTSTÄTTE -->
        <article class="card">
            <div class="card-header">
                <h2>🍺 Gaststätte</h2>
                <p>Unsere regulären Öffnungszeiten</p>
            </div>

            <div class="hours-list">

                <div class="hours-row">
                    <div class="days">Montag, Dienstag &amp; Donnerstag</div>
                    <div class="time">16:00 – 23:00 Uhr</div>
                </div>

                <div class="hours-row">
                    <div class="days">Mittwoch</div>
                    <div class="time">11:30 – 23:00 Uhr</div>
                </div>

                <div class="hours-row">
                    <div class="days">Freitag</div>
                    <div class="time">16:00 – 01:00 Uhr</div>
                </div>

                <div class="hours-row">
                    <div class="days">Samstag</div>
                    <div class="time">11:30 – 01:00 Uhr</div>
                </div>

                <div class="hours-row">
                    <div class="days">Sonntag &amp; Feiertage</div>
                    <div class="time">11:30 – 23:00 Uhr</div>
                </div>

            </div>

            <div class="notice summer">
                <strong>☀️ Sommerpause der Fußball-Bundesliga</strong><br>
                Samstags öffnen wir während der Sommerpause erst um
                <strong>15:00 Uhr</strong>.
            </div>
        </article>

    </div>

    <div class="allergens">
        <strong>Hinweis zu Zusatzstoffen und Allergenen:</strong><br>
        Informationen zu Zusatzstoffen und Allergenen in unseren Gerichten
        sind vor Ort einsehbar.
    </div>

    <p class="footnote">
        Feiertage und besondere Veranstaltungen können zu abweichenden
        Öffnungszeiten führen.
    </p>

</section>


<script>
(function () {

    const dayNames = [
        'Sonntag',
        'Montag',
        'Dienstag',
        'Mittwoch',
        'Donnerstag',
        'Freitag',
        'Samstag'
    ];

    const kitchen = [
        '12:00 – 14:00 Uhr & 17:00 – 22:00 Uhr', // Sonntag
        '17:00 – 22:00 Uhr',                     // Montag
        '17:00 – 22:00 Uhr',                     // Dienstag
        '12:00 – 14:00 Uhr & 17:00 – 22:00 Uhr', // Mittwoch
        '17:00 – 22:00 Uhr',                     // Donnerstag
        '17:00 – 22:00 Uhr',                     // Freitag
        '17:00 – 22:00 Uhr'                      // Samstag
    ];

    const pub = [
        '11:30 – 23:00 Uhr', // Sonntag
        '16:00 – 23:00 Uhr', // Montag
        '16:00 – 23:00 Uhr', // Dienstag
        '11:30 – 23:00 Uhr', // Mittwoch
        '16:00 – 23:00 Uhr', // Donnerstag
        '16:00 – 01:00 Uhr', // Freitag
        '11:30 – 01:00 Uhr'  // Samstag
    ];

    const today = new Date().getDay();

    document.getElementById('todayDay').textContent =
        dayNames[today];

    document.getElementById('todayKitchen').textContent =
        kitchen[today];

    document.getElementById('todayPub').textContent =
        pub[today];

})();
</script>

</body>
</html>

scherenschlag · scherenschlag MBR 6.1.12

Nö. Iss weg.
Vor lauter Speisen habe ich es gar nicht mehr nach unten geschafft....

scherenschlag · scherenschlag MBR 6.1.12

Na das sieht doch schon ganz anders aus.
Danke Tommy.
Ich gehe mal eben einkaufen, trinke mir ein Bier in der Sonne

und baue das mal ein.

Warte mal - ich versuche mal daraus einen importierbaren Block (Erweiterung) zu machen. Das ist dann viel einfacher.

Bushisan

Das mit dem BVB muss natürlich noch in Eintracht Frankfurt geändert werden

Ich habe das jetzt so mal in Mobirise als Block eingebaut (Beispielseite wird wieder gelöscht):

https://www.mobirise-tutorials.com/Vorl ... ungszeiten

Du kannst den Hintergrund und den Hintergrund der Card über den Mobirise-Farbwähler in den Blockwerkzeugen einstellen. Die CSS musst Du dann selbst im Bereich "CSS Editor" vom Code Editor noch ändern, wenn Du willst.

Die "Öffnungszeiten heute" werden über ein JavaScript gesteuert und entsprechend täglich direkt automatisch angezeigt. Das kannst Du dann im Code-Editor im Bereich "HTML Editor" bei Bedarf ändern. Das sieht man aber nur nach dem Publizieren und noch nicht auf der Arbeitsseite.

Die .mbrext-Datei zum Importieren als Mobirise-Block sende ich Dir hier gleich. Ich gehe davon aus, dass Du weißt wie man eine .mbrext-Datei importiert. Sonst lies das hier schon mal.

https://www.mobirise-tutorials.com/AI-B ... sions.html

Hier kannst Du diese Block-Erweiterung zum Importieren in Mobirise downloaden. Der Download steht nur 48 Stunden für insgesamt 20 Downloads zur Verfügung. Bitte lade es gleich runter:

https://www.mobirise-tutorials.com/down ... 38834cfe52

Bitte schreibe mir hier, wenn Du den Download der .mbrext Datei als Block-Erweiterung hast.

Du ziehst dann Deinen Block "Sonne-Gasthof" einfach wie jeden anderen Block von Mobirise auf der Seite auf. Nach dem Import findest Du diesen in der Rubrik "Tommys".

scherenschlag · scherenschlag MBR 6.1.12

Danke.
Ich setze mich gleich mal dran....

scherenschlag · scherenschlag MBR 6.1.12

Astrein.... Danke.....

Mobirise-Tutorials.com

Öffnungszeiten Gaststätte und Restaurant

Öffnungszeiten Gaststätte und Restaurant

Re: Öffnungszeiten Gaststätte und Restaurant

Re: Öffnungszeiten Gaststätte und Restaurant

Re: Öffnungszeiten Gaststätte und Restaurant

Re: Öffnungszeiten Gaststätte und Restaurant

Re: Öffnungszeiten Gaststätte und Restaurant

Re: Öffnungszeiten Gaststätte und Restaurant

Re: Öffnungszeiten Gaststätte und Restaurant

Re: Öffnungszeiten Gaststätte und Restaurant

Re: Öffnungszeiten Gaststätte und Restaurant

Re: Öffnungszeiten Gaststätte und Restaurant

Wer ist online?