[TASK] Paketierung in Ordner dist abgelegt

This commit is contained in:
Christian Seyfferth 2020-04-10 23:28:18 +02:00
parent 533468da09
commit de4cd3d414
15 changed files with 495 additions and 0 deletions

BIN
dist/bilder/1500px/13.jpg vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 268 KiB

BIN
dist/bilder/1500px/15.jpg vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 200 KiB

BIN
dist/bilder/1500px/4.jpg vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 219 KiB

BIN
dist/bilder/1500px/5.jpg vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 265 KiB

BIN
dist/bilder/1500px/6.jpg vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 208 KiB

BIN
dist/bilder/1500px/8.jpg vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 168 KiB

BIN
dist/bilder/2400px/1.jpg vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
dist/bilder/2400px/10.jpg vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 752 KiB

BIN
dist/bilder/2400px/5.jpg vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 527 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 610 KiB

BIN
dist/favicon.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

368
dist/index.html vendored Normal file
View File

@ -0,0 +1,368 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Ferienwohnung "Wanderlust"</title>
<link rel="manifest" href="manifest.json">
<link rel="shortcut icon" href="favicon.png" type="image/x-icon">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<meta name="description" content="Unsere Ferienwohnung in Finsterbergen">
<meta name="keywords" content="Ferienwohnung, Unterkunft, Wandern, Friedrichroda, Kamin">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="navbar-fixed">
<nav class="light-green lighten-1">
<div class="nav-wrapper container">
<a href="/" id="logo-container" class="brand-logo left" title="Gehe zur Startseite">
<img src="favicon.png" alt="Visitenkarten-Logo" loading="eager">
</a>
<ul class="right hide-on-small-and-down">
<li><a href="#willkommen" title="Gehe zu Abschnitt 'Willkommen'">Willkommen</a></li>
<li><a href="#wohnung" title="Gehe zu Abschnitt 'Ferienwohnung'">Ferienwohnung</a></li>
<li><a href="#buchung" title="Gehe zu Abschnitt 'Buchung und Anreise'">Buchung und Anreise</a></li>
</ul>
</div>
</nav>
</div>
<div id="willkommen-banner" class="parallax-container valign-wrapper">
<div class="container">
<div class="card-panel">
<div class="center">
<h1 class="heading-2 light-green-text">Ferienwohnung "<span class="uppercase">Wanderlust</span>"
</h1>
</div>
<h2 class="heading-5 light center light-green-text text-darken-3">
<i>Entspannen in gemütlicher Atmosphäre</i>
</h2>
</div>
</div>
<div class="parallax">
<picture>
<source srcset="bilder/2400px/StartbildOriginal_Rev.jpg.webp" type="image/webp">
<img src="bilder/2400px/StartbildOriginal_Rev.jpg" alt="Kollage von Bildern aus der Ferienwohnung"
loading="auto">
</picture>
</div>
</div>
<section id="willkommen" class="container">
<div class="row">
<div class="col s12 center">
<h2 class="light-green-text">Willkommen</h2>
</div>
</div>
<div class="row">
<div class="col s12 l6 offset-l3">
<p>
Wir heißen Sie seit September 2019 in unserer gemütlichen Ferienwohnung "Wanderlust" herzlich
Willkommen.
</p>
<p>
Seitdem ist die Ferienwohnung für unsere Gäste der Ausgangspunkt für Erkundungen im und um den
Thüringer
Wald.
</p>
<p>
Genießen Sie die wundervolle Natur mit ausgiebigen Wanderungen auf und um den
Rennsteig-Höhenwanderweg.
Nutzen
Sie die Zeit um kulturelle Stätten im nahen Umkreis zu erleben. Oder entspannen Sie sich in den
Sommermonaten
doch einfach im nahegelegenen beheizten Freibad.
</p>
<p>
Wir freuen uns auf Ihren Besuch.
</p>
</div>
</div>
</section>
<div id="wohnung-banner" class="parallax-container">
<div class="parallax">
<picture>
<source srcset="bilder/2400px/5.jpg.webp" type="image/webp">
<img src="bilder/2400px/5.jpg" alt="Schlafzimmer mit Schrank, Kommode und Kingsize-Bett" loading="auto">
</picture>
</div>
</div>
<section id="wohnung" class="container">
<div class="row">
<div class="col s12 center">
<h2 class="light-green-text">Ferienwohnung</h2>
</div>
</div>
<div class="row">
<div class="slider col l6 offset-l3">
<ul class="slides">
<li>
<img src="bilder/1500px/6.jpg" alt="Blick auf den Hauseingang">
<div class="caption left-align">
<div class="card-panel col">
<h3 class="heading-5 light grey-text text-lighten-3">Das Haus</h5>
</div>
</div>
</li>
<li>
<img src="bilder/1500px/4.jpg" alt="Wein mit Gläsern und Blumenstrauß">
<div class="caption left-align ">
<div class="card-panel col">
<h3 class="heading-5 light grey-text text-lighten-3">Herzlich <br> Willkommen</h3>
</div>
</div>
</li>
<li>
<img src="bilder/1500px/5.jpg" alt="Schlafzimmer mit Kleiderschrank und Kingsize-Bett">
<div class="caption right-align">
<div class="card-panel col">
<h3 class="heading-5 light grey-text text-lighten-3">Schlafzimmer <br> mit Kingsize-Bett
</h3>
</div>
</div>
</li>
<li>
<img src="bilder/1500px/8.jpg" alt="Badezimmer mit Wanne und Duschkabine">
<div class="caption right-align">
<div class="card-panel col">
<h3 class="heading-5 light grey-text text-lighten-3">Badezimmer mit Wanne</h3>
</div>
</div>
</li>
<li><img src="bilder/1500px/15.jpg" alt="Wohnbereich mit Holzkamin und Fernseher">
<div class="caption right-align ">
<div class="card-panel col">
<h3 class="heading-5 light grey-text text-lighten-3">Wohnbereich <br> mit Holzkamin</h3>
</div>
</div>
</li>
<li><img src="bilder/1500px/13.jpg" alt="Küchenzeile mit Elektrogeräten">
<div class="caption right-align">
<div class="card-panel col black">
<h3 class="heading-5 light grey-text text-lighten-3">voll ausgestattete <br> Küche</h3>
</div>
</div>
</li>
</ul>
</div>
<div class="col s12 m8 l6 offset-l3">
<p>
Unsere gemütliche Ferienwohnung "<span class="uppercase">Wanderlust</span> " liegt im Zentrum des
heilklimatischen Luftkurortes
Finsterbergen.
In nur wenigen Gehminuten erreichen Sie den Thüringer Wald und Rennsteig-Höhenwanderweg mit
seiner wundervollen Natur.
</p>
<p>
Die lichtdurchflutete Ferienwohnung hat ca. 55m², ein separates Schlafzimmer mit King-Size-Bett
mit Platz für 2 Erwachsene.
Nach ihrem Ausflug lädt Sie unsere gemütliche Ferienwohnung zum Verweilen vor dem Kamin oder auf
der anliegenden Terrasse ein. Unsere Ferienwohnung bietet Ihnen den Komfort einer vollausgestattete
Küchenzeile und eines großzügigen Badezimmers mit Badewanne. Das Kingsize-Bett bietet Platz für zwei
Personen.
Um Thüringen auch kulinarisch zu entdecken, steht Ihnen ein Original THÜROS-Grill zur Verfügung.
</p>
<p>
Für Ihr Mountainbike oder Auto kann bei Bedarf und auf Anfrage ein Garagenstellplatz hinzugebucht
werden.
</p>
</div>
<div class="col s12 m4 l3">
<h3 class="heading-5 light-green-text text-darken-3">Top-Ausstattung</h3>
<ul>
<li>Holz-Kamin</li>
<li>Badewanne</li>
<li>Vollwertige Küche</li>
<li>Terrasse</li>
<li>Grill</li>
<li>WIFI inklusive</li>
<li>Satelliten-Fernseher</li>
</ul>
</div>
</div>
</section>
<div id="buchung-banner" class="parallax-container">
<div class="parallax">
<picture>
<source srcset="bilder/2400px/10.jpg.webp" type="image/webp">
<img src="bilder/2400px/10.jpg" alt="Wohnbereich und Teil der Küchenzeile mit Blick Richtung Fenster"
loading="auto">
</picture>
</div>
</div>
<section id="buchung" class="container">
<div class="row">
<div class="col s12 center">
<h2 class=" light-green-text">Buchung und Anreise</h2>
</div>
</div>
<div class="row">
<div class="col s12 m8 l6 offset-l3">
<p>
Wir wollen Ihnen einen erholsamen Aufenthalt bieten und tolle Eindrücke verschaffen, von denen
Sie
auch nach
ihrem Urlaub nach Zerren können.
Auf diesen Seiten können Sie sich über unsere Unterkunft informieren und ihre Anreise bequem
planen.
</p>
<p>
Vor der Ferienwohnung befinden sich zahlreiche gebührenfreie Parkmöglichkeiten. Für
Motorradfahrer
und
Mountainbiker gibt es gesonderte Abstellmöglichkeiten direkt in der Unterkunft.
</p>
<p>
Die Unterkunft ist in der Regel ab 16.00 Uhr bezugsbereit und ihr Check-out kann bis 11.00 Uhr
erfolgen.
</p>
<p>
Bei Fragen rund um ihren Aufenthalt, ihre Anreise oder weitere Themen stehen wir Ihnen über das
Kontaktformular gerne zur Verfügung.
</p>
<p>
Wir freuen uns auf Ihren Besuch.
</p>
</div>
<div class="col s12 m4 l3">
<div class="row">
<div class="col s12">
<h3 class="heading-5 light-green-text text-darken-3">Kontakt</h3>
<p>
<a class="cryptmail truncate" href="/sendmail.php" data-name="frank.fewo.finsterbergen"
data-domain="gmail" data-tld="com"
title="Startet das Email-Programm um eine Nachricht an Familie Frank zu senden"><i
class="material-icons left">mail</i></a>
</p>
<p>
<a href="tel:+4915170831049" title="Startet einen Anruf per Smartphone bei Familie Frank"><i
class="material-icons left">phone</i>
+49 (0)151 - 70 83 10 49
</a>
</p>
</div>
<div class="col s12">
<h3 class="heading-5 light-green-text text-darken-3">Zur Buchung</h3>
<p>
<a href="https://www.booking.com/hotel/de/ferienwohnung-wanderlust-mit-kamin.de.html"
target="_blank" title="externer Link zur Buchung über Booking.com">
<i class="material-icons left">hotel</i> Booking.com
</a>
</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12 m8 l6 offset-l3">
<iframe title="Auf die Anfahrts-Adresse zentrierter Kartenausschnitt von Google Maps"
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2519.777837443754!2d10.588956515965446!3d50.83527886744169!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47a381a5941d6f53%3A0x871dd2e074ff9078!2sFerienwohnung%20WANDERLUST%20mit%20Kamin!5e0!3m2!1sde!2sde!4v1586533961647!5m2!1sde!2sde"
frameborder="0" style="border:0; width:100%; height:500px;" allowfullscreen="" aria-hidden="false"
tabindex="0" loading="lazy"></iframe>
</div>
<div class="col s12 m4 l3">
<div class="row">
<div class="col s12">
<h3 class="heading-5 light-green-text text-darken-3">Anreise planen</h3>
<p>
<a href="https://www.google.com/maps/dir//Ferienwohnung+WANDERLUST+mit+Kamin,+Am+Dorfteich+4,+99898+Friedrichroda/"
target="_blank" title="externer Link zur Reiseplanung mit Google Maps">
<i class="material-icons left">place</i> mit dem Auto
</a>
</p>
<p>
<a href="https://reiseauskunft.bahn.de/bin/query.exe/dn?Z=99894%20Friedrichroda,%20Am%20Dorfteich%204"
target="_blank" title="externer Link zur Reiseplanung der Deutschen Bahn">
<i class="material-icons left">train</i> mit der Bahn
</a>
</p>
<address>Am Dorfteich 4 <br> 99894 Friedrichroda OT Finsterbergen</address>
</div>
</div>
</div>
</div>
</section>
<div id="footer-banner" class="parallax-container valign-wrapper">
<div class="parallax">
<picture>
<source srcset="bilder/2400px/1.jpg.webp" type="image/webp">
<img src="bilder/2400px/1.jpg" alt="weiße Bank mit Blick über das Tal" loading="auto">
</picture>
</div>
</div>
</div>
<footer class="page-footer white black-text">
<div class="container">
<div class="row">
<div class="col s12 m4">
<a href="impressum.pdf" title="Link zum Impressum">Impressum</a>
</div>
<div class="col s12 m4 center-align">
<a href="datenschutz.pdf" title="Link zum Datenschutz">Datenschutz</a>
</div>
<div class="col s12 m4 right-align">
<a href="https://www.google.com/travel/guide?q=urlaub+in+friedrichroda&dest_mid=/m/0b6h53&tcfs=EiUKCS9tLzBiNmg1MxoYCgoyMDIwLTA0LTI2EgoyMDIwLTA0LTMw"
target="_blank" title="Externer Link zum Google-Reiseführer für Friedrichroda">
Reiseführer Friedrichroda</a>
</div>
</div>
<div class="row">
<div class="col s4">
made by <a href="https://chrosey.de" title="Externer Link zu chrosey.de">chrosey</a> with <a
href="https://materializecss.com" title="externer Link zu Materialize.css">Materialize</a>
</div>
<div class="col s4"></div>
<div class="col s4 right-align">
Urlaub-Friedrichroda.de
</div>
</div>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="script.js"></script>
<!-- Code injected by live-server -->
<script type="text/javascript">
// <![CDATA[ <-- For SVG support
if ('WebSocket' in window) {
(function () {
function refreshCSS() {
var sheets = [].slice.call(document.getElementsByTagName("link"));
var head = document.getElementsByTagName("head")[0];
for (var i = 0; i < sheets.length; ++i) {
var elem = sheets[i];
var parent = elem.parentElement || head;
parent.removeChild(elem);
var rel = elem.rel;
if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
}
parent.appendChild(elem);
}
}
var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
var address = protocol + window.location.host + window.location.pathname + '/ws';
var socket = new WebSocket(address);
socket.onmessage = function (msg) {
if (msg.data == 'reload') window.location.reload();
else if (msg.data == 'refreshcss') refreshCSS();
};
if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
console.log('Live reload enabled.');
sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
}
})();
}
else {
console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
}
// ]]>
</script></body>
</html>

18
dist/manifest.json vendored Normal file
View File

@ -0,0 +1,18 @@
{
"name": "Ferienwohnung 'Wanderlust'",
"short_name": "Ferienwohnung",
"start_url": ".",
"display": "standalone",
"background_color": "#bdf787",
"theme_color": "#bdf787",
"dir": "rtl",
"lang": "de",
"description": "Ferienwohnung in Friedrichroda OT Finsterbergen",
"icons": [{
"src": "favicon.png",
"sizes": "48x48 128x128"
}],
"related_applications": [{
"platform": "Web"
}]
}

40
dist/script.js vendored Normal file
View File

@ -0,0 +1,40 @@
document.addEventListener('DOMContentLoaded', function () {
var elems = document.querySelectorAll('.parallax');
var parallaxes = M.Parallax.init(elems, {});
var elems = document.querySelectorAll('.slider');
var sliders = M.Slider.init(elems, {
indicators: true,
duration: 500,
interval: 5000
});
var mailcypts = document.querySelectorAll(".cryptmail");
mailcypts.forEach(element => {
element.onclick = function () {
window.location.href = 'mailto:' + this.dataset.name + '@' + this.dataset.domain + '.' + this.dataset.tld;
return false;
}
});
var hashAnchors = document.querySelectorAll("a[href^='#']");
hashAnchors.forEach(element => {
element.onclick = function () {
var target = this.getAttribute("href");
scrollToElement(target);
return false;
}
});
});
function scrollToElement(name) {
var elementToScrollTo = document.querySelector(name);
var top = elementToScrollTo.getBoundingClientRect().top + window.pageYOffset - 48;
window.scrollTo({
top: top,
behavior: "smooth"
})
}

69
dist/style.css vendored Normal file
View File

@ -0,0 +1,69 @@
:root {
--primary-color: #33691e;
}
#willkommen-banner {
height: calc(100vh - 64px);
}
#wohnung-banner {}
#buchung-banner {}
#footer-banner {
height: 90vh;
}
.heading-2 {
font-size: 3.56rem;
line-height: 110%;
margin: 2.3733333333rem 0 1.424rem 0;
}
.heading-3 {
font-size: 1.64rem;
line-height: 110%;
margin: 1.0933333333rem 0 .656rem 0;
}
.heading-5 {
font-size: 1.64rem;
line-height: 110%;
margin: 1.0933333333rem 0 .656rem 0;
}
.uppercase {
text-transform: uppercase;
}
.cryptmail:after {
content: attr(data-name) "@"attr(data-domain) "."attr(data-tld);
}
a:not([href^='#']) {
color: var(--primary-color);
}
#logo-container img {
height: 64px;
}
.slider .card-panel {
background-color: rgba(0, 0, 0, .7);
border-radius: 0;
}
@media only screen and (max-width:600px) {
#willkommen-banner {
height: calc(100vh - 56px);
}
.heading-2,
h2 {
font-size: 2.82rem;
}
#logo-container img {
height: 56px;
}
}