fix content
This commit is contained in:
parent
734c79aef3
commit
a9c21a0d9a
1 changed files with 244 additions and 91 deletions
289
index.html
289
index.html
|
|
@ -76,52 +76,47 @@
|
|||
</main>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<div class="card m-b-30">
|
||||
<template id="cardTemplate" style="display: none;">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="media">
|
||||
<img class="d-flex mr-3 rounded-circle img-thumbnail thumb-lg" src="https://upload.wikimedia.org/wikipedia/commons/9/9d/Unknown_Member.jpg?20170805162126" alt="Generic placeholder image" />
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0 font-18 mb-1">Dr. Gerd Britsch</h5>
|
||||
<p class="text-muted font-14">Vogel- und Reptilienpraxis</p>
|
||||
<h5 class="mt-0 font-18 mb-1"></h5>
|
||||
<p class="text-muted font-14"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact">
|
||||
<ul class="social-links mb-0">
|
||||
<li>
|
||||
<li class="entry-phone hide">
|
||||
<i class="fa fa-phone"></i>
|
||||
<a title="" data-placement="top" data-toggle="tooltip" class="tooltips" href="" data-original-title="1234567890">
|
||||
<span>+49 (0)721 6184280</span>
|
||||
<a href="">
|
||||
<span></span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<li class="entry-envelope hide">
|
||||
<i class="fa fa-envelope"></i>
|
||||
<a title="" data-placement="top" data-toggle="tooltip" class="tooltips" href="" data-original-title="Facebook">
|
||||
<span>info@vogel-und-reptilien-tierarzt.de</span>
|
||||
<a href="">
|
||||
<span></span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<li class="entry-home hide">
|
||||
<i class="fa fa-home"></i>
|
||||
<a title="" data-placement="top" data-toggle="tooltip" class="tooltips" href="" data-original-title="Twitter">
|
||||
<span>vogel-und-reptilien-tierarzt.de</span>
|
||||
<a target=new href="">
|
||||
<span></span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<li class="entry-map hide">
|
||||
<i class="fa fa-map"></i>
|
||||
<a title="" data-placement="top" data-toggle="tooltip" class="tooltips" href="" data-original-title="@skypename">
|
||||
<span>Am Storrenacker 1b, 76139 Karlsruhe</span>
|
||||
<a target=new href="">
|
||||
<span></span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
</body>
|
||||
<style>
|
||||
|
|
@ -156,6 +151,9 @@
|
|||
.progress-tracker-mobile {
|
||||
display: none;
|
||||
}
|
||||
.progress-marker:after {
|
||||
z-index: 10 !important;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.progress-tracker-desktop {
|
||||
display: none;
|
||||
|
|
@ -249,14 +247,49 @@
|
|||
background-color: white;
|
||||
color: black;
|
||||
cursor: pointer;
|
||||
padding: 9px 15px 9px 27px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
gap: 10px;
|
||||
padding: 0;
|
||||
}
|
||||
button span {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 9px 15px 9px 27px;
|
||||
word-break: break-word;
|
||||
}
|
||||
button span.with-image {
|
||||
padding: 0px 10px 0px 5px;
|
||||
flex: 0 1 50%;
|
||||
}
|
||||
button img {
|
||||
object-fit: cover;
|
||||
height: 100%;
|
||||
max-width: 130px;
|
||||
width: 100%;
|
||||
border-radius: 7px 0px 0px 7px;
|
||||
flex: 0 1 50%;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
button {
|
||||
flex-direction: column;
|
||||
}
|
||||
button img {
|
||||
width: 100%;
|
||||
border-radius: 7px 7px 0px 0px;
|
||||
height: 200px;
|
||||
max-width: unset;
|
||||
flex: unset;
|
||||
}
|
||||
button span.with-image {
|
||||
padding: 0px 15px 9px 25px;
|
||||
flex: unset;
|
||||
}
|
||||
}
|
||||
|
||||
button svg {
|
||||
height: 1rem;
|
||||
stroke-width: 2;
|
||||
|
|
@ -300,14 +333,14 @@
|
|||
width: 70px;
|
||||
}
|
||||
.card {
|
||||
border: none;
|
||||
box-shadow: 1px 0px 20px rgba(0, 0, 0, 0.05);
|
||||
border: 1px solid #d5d9d9;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.card-body {
|
||||
padding: 1.5rem 1.5rem 1rem 1.5rem;
|
||||
padding: 0rem !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
.m-b-30 {
|
||||
margin-bottom: 30px;
|
||||
|
|
@ -315,25 +348,40 @@
|
|||
.social-links {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem 0;
|
||||
}
|
||||
.social-links i {
|
||||
padding-top: 0.3rem;
|
||||
}
|
||||
.social-links li {
|
||||
color: rgba(33, 37, 41, 0.75);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 0.5rem 1rem;
|
||||
}
|
||||
.social-links li a {
|
||||
color: rgba(33, 37, 41, 0.75);
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
height: 30px;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
.media {
|
||||
display: flex;
|
||||
gap: 1.25rem;
|
||||
align-items: center;
|
||||
padding: 1.25rem;
|
||||
}
|
||||
.media-body p {
|
||||
margin: 0;
|
||||
}
|
||||
.contact {
|
||||
padding: 1.5rem;
|
||||
background: #f0f5f9;
|
||||
}
|
||||
.hide {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
var questions = {
|
||||
|
|
@ -341,9 +389,18 @@
|
|||
"question": "Wildtier gefunden",
|
||||
"explanation": "Für Felltiere, Vögel und Igel gibt es verschiedene Ansprechpartner.<br>Falls Sie einen verletzten Vogel gefunden haben, folgen Sie bitte der Anleitung „Vogel“.<br><br>Immer wenn ein Feld blau unterlegt ist, rufen Sie direkt die angegebene Nummer an.",
|
||||
"options": {
|
||||
"1": "Fell",
|
||||
"2": "Igel",
|
||||
"3": "Vogel (Keine Zwangsfütterung)"
|
||||
"1": {
|
||||
"title": "Fell",
|
||||
"image": "https://peterlaustercommunity.de/l_f/uploads/gallery/album_45/tn_gallery_14_45_6090.jpg"
|
||||
},
|
||||
"2": {
|
||||
"title": "Igel",
|
||||
"image": "https://kamera-im-vogelhaus.de/wp-content/uploads/2020/02/igel-junge.jpg"
|
||||
},
|
||||
"3": {
|
||||
"title": "Vogel (Keine Zwangsfütterung)",
|
||||
"image": "https://dier-en-natuur.infonu.nl/artikel-foto-upload/vogels/109157-de-vink-een-oer-hollandse-vogel.jpg"
|
||||
},
|
||||
},
|
||||
"nextQuestions": {
|
||||
"1": "13",
|
||||
|
|
@ -355,12 +412,12 @@
|
|||
"question": "Vogel",
|
||||
"explanation": "Um welche Vogelart handelt es sich?",
|
||||
"options": {
|
||||
"1": "Greifvogel (verletzt / unverletzt)",
|
||||
"2": "Taube",
|
||||
"3": "Rabenvögel",
|
||||
"4": "Gänsevögel / Wasservogel",
|
||||
"5": "Schreitvögel (Storch, Reiher, Kranich)",
|
||||
"6": "Kleinvogel"
|
||||
"1": { "title": "Greifvogel (verletzt / unverletzt)" },
|
||||
"2": { "title": "Taube" },
|
||||
"3": { "title": "Rabenvögel" },
|
||||
"4": { "title": "Gänsevögel / Wasservogel" },
|
||||
"5": { "title": "Schreitvögel (Storch, Reiher, Kranich)" },
|
||||
"6": { "title": "Kleinvogel" }
|
||||
},
|
||||
"nextQuestions": {
|
||||
"1": "11",
|
||||
|
|
@ -375,8 +432,8 @@
|
|||
"question": "Kleinvogel",
|
||||
"explanation": "In welchem sichtbaren Zustand befindet sich der Vogel?<br><br>Verletzt: Fliegt nicht weg oder hat eindeutige Verletzungen, z.B. Flügelbruch, kann nicht laufen.",
|
||||
"options": {
|
||||
"1": "Verletzt",
|
||||
"2": "Unverletzt",
|
||||
"1": { "title": "Verletzt" },
|
||||
"2": { "title": "Unverletzt" }
|
||||
},
|
||||
"nextQuestions": {
|
||||
"1": "10",
|
||||
|
|
@ -387,8 +444,8 @@
|
|||
"question": "Unverletzter Kleinvogel",
|
||||
"explanation": "Handelt es sich um einen ausgewachsenen Vogel oder ein Jungtier/Küken?",
|
||||
"options": {
|
||||
"1": "Ausgewachsen",
|
||||
"2": "Jungvogel / Küken",
|
||||
"1": { "title": "Ausgewachsen" },
|
||||
"2": { "title": "Jungvogel / Küken" }
|
||||
},
|
||||
"nextQuestions": {
|
||||
"1": "5",
|
||||
|
|
@ -399,21 +456,21 @@
|
|||
"question": "Ausgewachsener, unverletzter Kleinvogel",
|
||||
"explanation": "Wie verhält sich der Vogel bei einigen Minuten Beobachtung?",
|
||||
"options": {
|
||||
"1": "Agil, lebhaft, fliegt nicht weg",
|
||||
"2": "Apathisch, wirkt benommen, unbeweglich",
|
||||
"1": { "title": "Agil, lebhaft, fliegt nicht weg" },
|
||||
"2": { "title": "Apathisch, wirkt benommen, unbeweglich" }
|
||||
},
|
||||
"nextQuestions": {
|
||||
"1": "6",
|
||||
"2": "4"
|
||||
"2": "7"
|
||||
}
|
||||
},
|
||||
"6": {
|
||||
"question": "Ausgewachsener, unverletzter Kleinvogel",
|
||||
"explanation": "Auffällige Verhaltensmuster",
|
||||
"options": {
|
||||
"1": "Hüpft herum",
|
||||
"2": "Kopf in Schieflage",
|
||||
"3": "Sitzt herum",
|
||||
"1": { "title": "Hüpft herum" },
|
||||
"2": { "title": "Kopf in Schieflage" },
|
||||
"3": { "title": "Sitzt herum" }
|
||||
},
|
||||
"nextQuestions": {
|
||||
"1": "8",
|
||||
|
|
@ -423,10 +480,10 @@
|
|||
},
|
||||
"7": {
|
||||
"question": "Ausgewachsener, unverletzter Kleinvogel",
|
||||
"explanation": "Setzen Sie den Vogel in einen Karton in eine schattige ruhige Ecke. Halten Sie Katzen fern und stellen Sie Wasser bereit.<br><br>Bei keiner eintretenden Verbesserung, kann die Entscheidung schwierig sein. Im Zweifel am besten beim Tierarzt anrufen; wenn das nicht geht, die Hotline von WiTAS nutzen.",
|
||||
"explanation": "Setzen Sie den Vogel in einen Karton in eine schattige ruhige Ecke. Halten Sie Katzen fern und stellen Sie Wasser bereit.<br><br>Bei keiner eintretenden Verbesserung, kann die Entscheidung schwierig sein. Im Zweifel am besten beim Tierarzt anrufen; wenn das nicht geht, die Hotline von WiTAS nutzen.<br><br>Sofern es sich um einen Fensterflieger handelt, finden Sie <a target=new href=''>hier</a> <font color='red'><b>(INFO: Dieser Link muss auf eine WiTAS Seite verlinken mit Infos zu Fensterfliegern)</b></font> weitere Informationen.",
|
||||
"options": {
|
||||
"1": "Weiterhin schlechter Zustand",
|
||||
"2": "Besserer Zustand"
|
||||
"1": { "title": "Weiterhin schlechter Zustand" },
|
||||
"2": { "title": "Besserer Zustand" }
|
||||
},
|
||||
"nextQuestions": {
|
||||
"1": "10",
|
||||
|
|
@ -435,20 +492,20 @@
|
|||
},
|
||||
"8": {
|
||||
"question": "Ausgewachsener, unverletzter Kleinvogel",
|
||||
"explanation": "Starthilfe: Bringen Sie den Vogel zu einer Rohezone im Freien (Erhöhte Ebene bei Mauerseglern). Stellen Sie Wasser bereit. Sie müssen dem Vogel zu nichts zwingen.<br><br>Bei Fragen oder Schwierigkeiten nehmen Sie mit der Hotline kontakt auf.",
|
||||
"options": {
|
||||
"1": "WiTAS Hotline",
|
||||
"explanation": "<b>Starthilfe</b>: Bringen Sie den Vogel zu einer Rohezone im Freien (Erhöhte Ebene bei Mauerseglern). Stellen Sie Wasser bereit. Sie müssen dem Vogel zu nichts zwingen.<br><br>Sofern Schwierigkeiten bestehen, bitte melden Sie sich umgehend an unseren Witas-Kontakt. Wir melden uns umgehend bei ihnen zurück.",
|
||||
"contacts": {
|
||||
"1": {
|
||||
"name": "WiTAS Kontakt",
|
||||
"mail": "test@test.de",
|
||||
},
|
||||
},
|
||||
"nextQuestions": {
|
||||
"1": "15",
|
||||
}
|
||||
},
|
||||
"9": {
|
||||
"question": "Junger, unverletzter Kleinvogel",
|
||||
"explanation": "Weitere Charakterisierung",
|
||||
"options": {
|
||||
"1": "Mit Federn",
|
||||
"2": "Ohne Federn",
|
||||
"1": { "title": "Mit Federn" },
|
||||
"2": { "title": "Ohne Federn" }
|
||||
},
|
||||
"nextQuestions": {
|
||||
"1": "20",
|
||||
|
|
@ -457,7 +514,25 @@
|
|||
},
|
||||
"10": {
|
||||
"question": "Taube / Verletzter Kleinvogel",
|
||||
"explanation": "Bitte nehmen Sie in diesem Fall Kontakt auf mit einem unseren Tierärzt*innen die in diesem Fall zuständig sind:<br><br><b>Vogel- und Reptilienpraxis | Dr. Britsch</b><br> Am Storrenacker 1b, 76139 Karlsruhe<br><br>Dr. Kothe, weitere",
|
||||
"explanation": "Bitte nehmen Sie in diesem Fall umgehend Kontakt mit einer der folgenden Tierarztpraxen auf:",
|
||||
"contacts": {
|
||||
"1": {
|
||||
"name": "Dr. Gerd Britsch",
|
||||
"title": "Vogel- und Reptilienpraxis",
|
||||
"tel": "+49 (0)721 6184280",
|
||||
"mail": "info@vogel-und-reptilien-tierarzt.de",
|
||||
"web": "vogel-und-reptilien-tierarzt.de",
|
||||
"address": "Am Storrenacker 1b, 76139 Karlsruhe",
|
||||
},
|
||||
"2": {
|
||||
"name": "Dr. Kothe",
|
||||
"title": "Vogel- und Reptilienpraxis",
|
||||
"tel": "+49 (0)721 6184280",
|
||||
"mail": "info@vogel-und-reptilien-tierarzt.de",
|
||||
"web": "vogel-und-reptilien-tierarzt.de",
|
||||
"address": "Am Storrenacker 1b, 76139 Karlsruhe",
|
||||
},
|
||||
},
|
||||
},
|
||||
"11": {
|
||||
"question": "Greifvogel",
|
||||
|
|
@ -465,7 +540,25 @@
|
|||
},
|
||||
"12": {
|
||||
"question": "Gänse, Raben-, Wasser- oder Schreitvögel",
|
||||
"explanation": "Bitte nehmen Sie in diesem Fall Kontakt auf mit einem unseren Tierärzt*innen die in diesem Fall zuständig sind:<br><br><b>Wildtierbeauftragte - Veterinäramt</b>",
|
||||
"explanation": "Bitte nehmen Sie in diesem Fall umgehend Kontakt mit dem Veterinäramt bzw. Wildtierbeauftragten auf:",
|
||||
"contacts": {
|
||||
"1": {
|
||||
"name": "Veterinäramt",
|
||||
"title": "?",
|
||||
"tel": "?",
|
||||
"mail": "?",
|
||||
"web": "?",
|
||||
"address": "?",
|
||||
},
|
||||
"2": {
|
||||
"name": "Wildtierbeauftragten",
|
||||
"title": "?",
|
||||
"tel": "?",
|
||||
"mail": "?",
|
||||
"web": "?",
|
||||
"address": "?",
|
||||
},
|
||||
},
|
||||
},
|
||||
"13": {
|
||||
"question": "Fell",
|
||||
|
|
@ -478,13 +571,19 @@
|
|||
"15": {
|
||||
"question": "WiTAS Kontakt",
|
||||
"explanation": "Kontakt",
|
||||
"contacts": {
|
||||
"1": {
|
||||
"name": "WiTAS Kontakt",
|
||||
"mail": "test@test.de",
|
||||
},
|
||||
},
|
||||
},
|
||||
"20": {
|
||||
"question": "Junger, unverletzter Kleinvogel",
|
||||
"explanation": "Aus einiger Entfernung beobachten (min 30 Minuten), bei Bedarf aus der Gefahrenzone bringen.",
|
||||
"options": {
|
||||
"1": "Vogel wird von Eltern gefüttert",
|
||||
"2": "Vogel wird von Eltern NICHT gefüttert",
|
||||
"1": { "title": "Vogel wird von Eltern gefüttert" },
|
||||
"2": { "title": "Vogel wird von Eltern NICHT gefüttert" }
|
||||
},
|
||||
"nextQuestions": {
|
||||
"1": "23",
|
||||
|
|
@ -495,8 +594,8 @@
|
|||
"question": "Junger, unverletzter Kleinvogel",
|
||||
"explanation": "Befindet sich ein Vogelnest in sichtbarer und zugänglicher Nähe?",
|
||||
"options": {
|
||||
"1": "Nest sichtbar",
|
||||
"2": "Kein Nest",
|
||||
"1": { "title": "Nest sichtbar" },
|
||||
"2": { "title": "Kein Nest" }
|
||||
},
|
||||
"nextQuestions": {
|
||||
"1": "22",
|
||||
|
|
@ -525,6 +624,37 @@
|
|||
}
|
||||
};
|
||||
|
||||
function renderContact(name, title, tel, mail, web, address) {
|
||||
var template = document.getElementById('cardTemplate').content.cloneNode(true);
|
||||
|
||||
template.querySelector('.media-body h5').textContent = name;
|
||||
template.querySelector('.media-body p').textContent = title;
|
||||
template.querySelector('.fa-phone + a').textContent = tel;
|
||||
template.querySelector('.fa-phone + a').href = 'tel:' + tel;
|
||||
template.querySelector('.fa-envelope + a').textContent = mail;
|
||||
template.querySelector('.fa-envelope + a').href = 'mailto:' + mail;
|
||||
template.querySelector('.fa-home + a').textContent = web;
|
||||
template.querySelector('.fa-home + a').href = 'https://' + web;
|
||||
template.querySelector('.fa-map + a').textContent = address;
|
||||
template.querySelector('.fa-map + a').href = 'https://www.google.de/maps/place/' + address;
|
||||
|
||||
if (tel) {
|
||||
template.querySelector('.entry-phone').classList.remove('hide');
|
||||
}
|
||||
if (mail) {
|
||||
template.querySelector('.entry-envelope').classList.remove('hide');
|
||||
}
|
||||
if (web) {
|
||||
template.querySelector('.entry-home').classList.remove('hide');
|
||||
}
|
||||
if (address) {
|
||||
template.querySelector('.entry-map').classList.remove('hide');
|
||||
}
|
||||
|
||||
var questionContainer = document.getElementById('questionContainer');
|
||||
questionContainer.appendChild(template);
|
||||
}
|
||||
|
||||
function displayQuestion(questionId=1) {
|
||||
|
||||
currentQuestionId = questionId;
|
||||
|
|
@ -571,13 +701,29 @@
|
|||
|
||||
for (var optionId in question.options) {
|
||||
var button = document.createElement('button');
|
||||
button.innerText = question.options[optionId];
|
||||
button.innerText = question.options[optionId].title;
|
||||
button.value = question.nextQuestions[optionId];
|
||||
button.id = 'option' + optionId;
|
||||
var imageLink = question.options[optionId].image;
|
||||
|
||||
var span = document.createElement('span');
|
||||
while (button.firstChild) {
|
||||
span.appendChild(button.firstChild);
|
||||
}
|
||||
var icon = document.createElement('i');
|
||||
icon.setAttribute('data-feather', 'chevron-right');
|
||||
button.appendChild(icon);
|
||||
span.appendChild(icon);
|
||||
if (imageLink) {
|
||||
span.setAttribute('class', 'with-image' );
|
||||
}
|
||||
|
||||
button.appendChild(span);
|
||||
|
||||
if (imageLink) {
|
||||
var image = document.createElement('img');
|
||||
image.setAttribute('src', imageLink);
|
||||
button.insertBefore(image, button.firstChild);
|
||||
};
|
||||
|
||||
button.addEventListener('click', function() {
|
||||
previousQuestionId = currentQuestionId;
|
||||
|
|
@ -598,6 +744,13 @@
|
|||
feather.replace();
|
||||
|
||||
questionContainer.classList.add('show');
|
||||
|
||||
if ('contacts' in question) {
|
||||
Object.keys(question.contacts).forEach(function(key) {
|
||||
var contact = question.contacts[key];
|
||||
renderContact(contact.name, contact.title, contact.tel, contact.mail, contact.web, contact.address);
|
||||
});
|
||||
}
|
||||
}, 500);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue