1
0
Fork 0

Add templates

This commit is contained in:
Mo 2022-10-25 01:11:48 +02:00
parent 963e92b6fe
commit 8023dea03a
11 changed files with 310 additions and 24 deletions

View file

@ -8,11 +8,22 @@ compile_sass = false
[extra] [extra]
logo_path = "images/logo.png" logo_path = "images/logo.png"
portrait_path = "images/index/portrait.jpeg"
# Custom colors for navigation bar, footer, h1 tags, etc. portrait_path = "images/index/portrait.jpeg"
primary_color = "#6db9a5" self_introduction = "Ich bin Yinghong Yang, komme aus China und lebe und arbeite seit langem in Deutschland. Massagen haben mir in meinem Leben oft geholfen, Stress und Verspannungen abzubauen, sodass ich es auch erlernen wollte, um anderen Menschen zu helfen. Ich habe zweimal in einem Pariser-Massage-Spa gelernt und gearbeitet. Hier in Deutschland habe ich meine Massagetechniken kontinuierlich, mit verschiedenen Lehrenden, weiterentwickelt und verfeinert. Für mehrere Jahre arbeitete ich in einem sehr guten traditionellen Thaimassge-Spa und konnte dort viele Erfahrungen und verschiedene Massagetechniken sammeln. Jetzt betreibe ich meinen eigenen Massage-Salon und freue mich auf Ihren Besuch!"
secondary_color = "#6e0000"
# The name of the image file in the directory content/termin
appointment_image_filename = "image.jpg"
# Custom colors for navigation bar, footer, etc.
primary_color = "#B2DEA7"
secondary_color = "#710802"
# Kontakt
address = "Ferdinand-Remy-Str. 23, 56859 Alf"
mobile_number = "0176 4474 8221"
phone_number = "06542-9690619"
email = "yinghong-yang@protonmail.com"
# Menu # Menu
[[extra.menu_items]] [[extra.menu_items]]

View file

@ -0,0 +1,27 @@
{% extends "base.tera.html" %}
{% block content %}
<h2 class="h1 text-center">
{{ page.title }}
</h2>
<br>
<div class="row pb-3">
<div class="col d-flex align-content-center flex-wrap" style="min-width: 300px;">
{% set dir = page.path | trim_start_matches(pat="/") %}
{% set image_path = dir ~ config.extra.appointment_image_filename %}
{% set image = resize_image(path=image_path, width=500, height=500, op="fill") %}
<img
src="{{ image.url }}"
class="rounded d-block mx-auto img-fluid"
/>
</div>
<div class="col d-flex align-content-center flex-wrap ms-5 me-5 mt-3" style="min-width: 300px;">
<div>
{{ page.content | safe }}
</div>
</div>
</div>
{% endblock content %}

View file

@ -23,6 +23,22 @@
<!-- From https://getbootstrap.com/docs/5.2/getting-started/introduction/ --> <!-- From https://getbootstrap.com/docs/5.2/getting-started/introduction/ -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<style>
.grow-on-hover {
transition: all .3s ease-in-out;
}
.grow-on-hover:hover {
transform: scale(1.1);
}
.underline-on-hover:hover {
text-decoration: underline;
}
</style>
{% block styles %}{% endblock styles %}
</head> </head>
<body class="d-flex flex-column min-vh-100"> <body class="d-flex flex-column min-vh-100">
{% include "partials/nav.tera.html" %} {% include "partials/nav.tera.html" %}
@ -31,6 +47,8 @@
<br> <br>
{% block content %}{% endblock content %} {% block content %}{% endblock content %}
<br>
</div> </div>
<footer <footer
@ -42,5 +60,7 @@
<!-- From https://getbootstrap.com/docs/5.2/getting-started/introduction/ --> <!-- From https://getbootstrap.com/docs/5.2/getting-started/introduction/ -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
{% block scripts %}{% endblock scripts %}
</body> </body>
</html> </html>

View file

@ -1,3 +1,56 @@
{% extends "base.tera.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 %} {% block content %}
{% endblock 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 %}

View file

@ -0,0 +1,41 @@
{% macro offer(image_filename, name, description) %}
<div class="row pb-5 pt-3">
<div class="col d-flex align-content-center flex-wrap" style="min-width: 300px;">
{% set dir = page.path | trim_start_matches(pat="/") %}
{% set image_path = dir ~ image_filename %}
{% set image = resize_image(path=image_path, width=400, height=400, op="fill") %}
<img
src="{{ image.url }}"
class="rounded d-block mx-auto img-fluid"
/>
</div>
<div class="col d-flex align-content-center flex-wrap ms-5 me-5 mt-3" style="min-width: 300px;">
<div>
<h3>{{ name }}</h3>
<p>{{ description | safe }}</p>
</div>
</div>
</div>
{% endmacro %}
{% macro prices_table(caption, names, prices) %}
<div class="text-center pb-5">
<h3 class="h2">{{ caption }}</h3>
<div class="d-inline-flex">
<table class="table table-sm">
<tbody>
{% for name in names %}
<tr>
<th class="pe-3" scope="row">{{ name }}</th>
<td class="ps-3">{{ prices | nth(n=loop.index0) }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
<hr>
{% endmacro %}

View file

@ -0,0 +1,95 @@
{% extends "base.tera.html" %}
{% import "macros/offers.tera.html" as offers_macros %}
{% block content %}
<h1 class="h1 text-center">Massagen</h1>
{{ offers_macros::offer(
image_filename="Rücken-_und_Nackenmassage.jpg",
name="Rücken- und Nackenmassage mit Öl",
description="Dieser zentrale Bereich des Körpers ist täglich vielen Belastungen ausgesetzt.<br>
Eine Rücken- und Nackenmassage kann aufbauend wirken und die Regeneration fördern. Unsere Kunden schätzen diese Massage und kommen gerne wieder."
) }}
{{ offers_macros::offer(
image_filename="Ying-Yang-Massage.jpg",
name="Ying-Yang-Massage",
description="Eine tiefe Form der Ganzkörpermassage, die zur Entspannung dient. Das Massieren mit feinen Ölen, kombiniert mit Handgriffen der traditionellen Thaimassage am ganzen Körper, bewirkt eine tiefe körperliche und seelische Entspannung.<br>
Hilft Verspannungen zu lösen und lindert Schmerzen.<br>
Eine Wohltat nach einem anstrengenden Tag."
) }}
{{ offers_macros::offer(
image_filename="Traditionelle_Thai-Massage.jpg",
name="Traditionelle Thai-Massage",
description="Die Wirkung dieser Massageform ist tiefgreifender als bei einer herkömmlichen Massage. Durch Daumendruck, Reib- und Streichbewegungen sowie leichtem Klopfen wird die Blutzirkulation gefördert und gleichzeitig der komplette Energiefluss im Körper reguliert und regeneriert. Punktueller Druck und Dehnungen mit den Händen, Ellbogen und Füßen führen zu einer entspannenden Wirkung."
) }}
{{ offers_macros::offer(
image_filename="Antistress-Massage.jpg",
name="Antistress Massage mit Aroma-Öl",
description="Eine “sanfte” Form der Ganzkörpermassage, die zur Entspannung dient. Das Massieren mit feinen Ölen, kombiniert mit einer Druckpunktmassage der Energielinien am ganzen Körper, bewirkt eine tiefe körperliche und seelische Entspannung."
) }}
{{ offers_macros::offer(
image_filename="Fußmassage.jpg",
name="Fußmassage",
description="Eine Fußmassage kann eine wirkliche tiefgreifende Erfahrung sein. Sie werden merken, wie sehr sich Ihre Füße eine Massage verdient haben. Die Fußsohle wird als der Spiegel der Gesundheit des gesamten Körpers angesehen."
) }}
{{ offers_macros::prices_table(
caption="Massage-Preise",
names=["30 Minuten", "60 Minuten", "90 Minuten", "120 Minuten"],
prices=["27€", "47€", "67€", "82€"]
) }}
<h1 class="h1 text-center">Spezielle Massagen</h1>
{{ offers_macros::offer(
image_filename="Bambus-Massage.jpeg",
name="Bambus-Massage",
description="Löst auch tiefe Verspannungen!<br>
Hier werden unterschiedlich geformte Bambusstäbe für die Massage genutzt. Diese Stäbe wirken im Sommer kühlend, können aber auch angewärmt werden.<br>
Durch verschiedene Techniken wie Rollen, Kneten, Hebeln und Klopfen lösen sich auch tiefer liegende Verspannungen auf eine wohltuende Art. Somit ergibt sich eine positive Wirkung auf Muskulatur und Faszien. Diese Massage befreit von alltäglichem Stress und vermittelt ein Gefühl von Leichtigkeit."
) }}
{{ offers_macros::prices_table(
caption="Bambus-Massage-Preise",
names=["60 Minuten", "90 Minuten"],
prices=["57€", "77€"]
) }}
<h1 class="h1 text-center">Fußpflege</h1>
{{ offers_macros::offer(
image_filename="Medizinische_Fußpflege.jpg",
name="Medizinische Fußpflege",
description="Inkl. Fuß-Desinfektion, Nägel schneiden & bearbeiten, Hühneraugen-, Hornhaut- und Schwielenentfernung, Eincremen ab 27€"
) }}
{{ offers_macros::offer(
image_filename="Wellness_Fußpflege.jpg",
name="Wellness Fußpflege",
description="Fußbad mit Kräuter, med. Pflege, Peeling, leichte Massage ab 45€"
) }}
{{ offers_macros::prices_table(
caption="Zusätzliche Fußpflege-Angebote",
names=["Fußnägel lackieren", "Maniküre"],
prices=["10€", "20€"]
)}}
<div class="d-grid col-5 mx-auto pt-2 pb-3">
<a href="/termin" class="btn btn-success grow-on-hover">
Terminvereinbarung
</a>
</div>
<h4 class="text-center p-3" style="color: red;">Wichtig: Jegliche Nachfrage nach Erotik ist unerwünscht und respektlos!</h4>
{% endblock %}

View file

@ -1,17 +1,17 @@
<div class="container-xxl"> <div class="container-xxl">
<br /> <br />
<div class="row"> <div class="row">
{% for footer_item in config.extra.footer_items %} {% for footer_item in config.extra.footer_items %}
<div class="col-sm"> <div class="col-sm p-1">
<a href="{{ footer_item.url }}"> <a href="{{ footer_item.url }}" style="text-decoration: none;">
<font color="{{ config.extra.secondary_color}}"> <span class="underline-on-hover" style="color: {{ config.extra.secondary_color}};">
{{ footer_item.name }} {{ footer_item.name }}
</font> </span>
</a> </a>
</div>
{% endfor %}
</div> </div>
{% endfor %}
</div>
<br /> <br />
</div> </div>

View file

@ -1,6 +1,23 @@
<nav class="navbar navbar-expand-lg" style="background-color: {{ config.extra.primary_color }};"> {% set image = resize_image(path="images/background/nav_background.jpg", height=750, op="fit_height") %}
<div
class="d-flex align-content-end flex-wrap"
style="
background-image: url('{{ image.url }}');
background-position: center;
height: 40vh;
background-size: cover;
"
>
<div class="container-fluid mb-3" style="background-color: rgba(0, 0, 0, 0.6);">
<div class="container-xxl text-white p-3">
<h1 style="font-weight: bold;">{{ config.title }}</h1>
<h5>{{ config.extra.address }}</h5>
</div>
</div>
</div>
<nav class="navbar navbar-expand-lg" style="background-image: linear-gradient(rgba(0, 0, 0, 0.6), 8%, {{ config.extra.primary_color }}, white);">
<div class="container-xxl"> <div class="container-xxl">
<a class="navbar-brand" href="/"> <a class="navbar-brand grow-on-hover" href="/">
<!-- Use heigher resize_height for better resolution --> <!-- Use heigher resize_height for better resolution -->
{% set resize_height = 85 %} {% set resize_height = 85 %}
{% set logo_meta = get_image_metadata(path=config.extra.logo_path) %} {% set logo_meta = get_image_metadata(path=config.extra.logo_path) %}
@ -9,7 +26,7 @@
{% set image = resize_image(path=config.extra.logo_path, width=resize_width, height=resize_height, op="fill") %} {% set image = resize_image(path=config.extra.logo_path, width=resize_width, height=resize_height, op="fill") %}
<img <img
src="{{ image.url }}" src="{{ image.url }}"
alt="Home" alt="Startseite"
{% set actual_height = 70 %} {% set actual_height = 70 %}
{% set actual_width = logo_width_to_height_ratio * actual_height | int %} {% set actual_width = logo_width_to_height_ratio * actual_height | int %}
width="{{ actual_width }}" width="{{ actual_width }}"
@ -38,9 +55,9 @@
class="nav-link" class="nav-link"
href="{{ menu_item.url }}" href="{{ menu_item.url }}"
> >
<font color="{{ config.extra.secondary_color }}"> <span class="underline-on-hover" style="color: {{ config.extra.secondary_color }}; font-size: 17px;">
{{ menu_item.name }} {{ menu_item.name }}
</font> </span>
</a> </a>
</li> </li>
{% else %} {% else %}

View file

@ -0,0 +1 @@
{{ config.extra.address }}

View file

@ -0,0 +1,20 @@
<table class="table">
<tbody>
<tr>
<th scope="row">Mobil:</th>
<td>{{ config.extra.mobile_number }}</td>
</tr>
<tr>
<th scope="row">Tel.:</th>
<td>{{ config.extra.phone_number }}</td>
</tr>
<tr>
<th scope="row">E-Mail:</th>
<td><a href="mailto:{{ config.extra.email }}">{{ config.extra.email }}</a></td>
</tr>
<tr>
<th scope="row">Adresse:</th>
<td>{{ config.extra.address }}</td>
</tr>
</tbody>
</table>

View file

@ -1,8 +1,9 @@
{% extends "base.tera.html" %} {% extends "base.tera.html" %}
{% block content %} {% block content %}
<h1 class="h1"> <h2 class="h2 text-center">
{{ page.title }} {{ page.title }}
</h1> </h2>
<br> <br>