1
0
Fork 0
yinghong-massage.de/templates/index.html

47 lines
1.8 KiB
HTML

{% extends "base.html" %}
{% block styles %}<link rel="stylesheet" href="{{ get_url(path='leaflet/leaflet.css') }}" />{% 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 shadow" />
</div>
<div class="col d-flex align-content-center flex-wrap ps-5 pe-5 pt-3"
style="min-width: 350px">
<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="{{ get_url(path='angebot') }}"
class="btn btn-success grow-on-hover shadow">Unser Angebot</a>
<a href="{{ get_url(path='termin') }}"
class="btn btn-success grow-on-hover shadow">Terminvereinbarung</a>
</div>
<div class="mb-2 shadow" id="map" style="height: 40vh;"></div>
{% endblock %}
{% block scripts %}
<script src="{{ get_url(path='leaflet/leaflet.js') }}"></script>
<script>
L.Icon.Default.imagePath = "{{ get_url(path='leaflet/images/', trailing_slash=true) }}";
var center = L.latLng(50.05635, 7.12507);
var map = L.map('map', {
center: center,
zoom: 17,
scrollWheelZoom: false,
});
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 %}