yinghong-massage.de/templates/index.html

{% extends "base.tera.html" %}

{% block styles %}
    <!-- Leaflet -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.2/dist/leaflet.css"
        integrity="sha256-sA+zWATbFveLLNqWO2gtiw3HL/lh1giY/Inf1BJ0z14="
        crossorigin=""/>
{% endblock %}

{% block content %}
    <div class="row pb-3">
        <div class="col d-flex align-content-center flex-wrap">
            {% set image = resize_image(path=config.extra.portrait_path, height=500, op="fit_height") %}
            <img
                src="{{ image.url }}"
                class="rounded d-block mx-auto"
            />
        </div>
        <div class="col d-flex align-content-center flex-wrap ps-5 pe-5 pt-3" style="min-width: 400px;">
            <p style="font-size: 17px;">{{ config.extra.self_introduction }}</p>
        </div>
    </div>

    <div class="d-grid col-5 mx-auto gap-2 pt-2 pb-4">
        <a href="/angebot" class="btn btn-success grow-on-hover">
            Unser Angebot
        </a>
        <a href="/termin" class="btn btn-success grow-on-hover">
            Terminvereinbarung
        </a>
    </div>

    <div class="mb-2" id="map" style="height: 50vh;"></div>
{% endblock %}

{% block scripts %}
    <!-- Leaflet -->
    <script src="https://unpkg.com/leaflet@1.9.2/dist/leaflet.js"
        integrity="sha256-o9N1jGDZrf5tS+Ft4gbIK7mYMipq9lqpVJ91xHSyKhg="
        crossorigin=""></script>
    <script>
        var center = L.latLng(50.05635, 7.12507);
        var map = L.map('map', {
            center: center,
            zoom: 18,
        });

        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
            minZoom: 5,
            maxZoom: 19,
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        }).addTo(map);

        L.marker(center).addTo(map).bindPopup("{{ config.extra.address }}").openPopup();
    </script>
{% endblock %}