onny/witas-ka
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix content

Browse source
This commit is contained in:
Jonas Heinrich 2024-02-18 18:32:08 +01:00
parent 734c79aef3
commit a9c21a0d9a
1 changed files with 244 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

335
index.html
View file

@ -76,52 +76,47 @@
</main> </main>
</div> </div>
<div class="container"> <template id="cardTemplate" style="display: none;">
<div class="row"> <div class="card">
<div class="col-lg-4"> <div class="card-body">
<div class="card m-b-30"> <div class="media">
<div class="card-body"> <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"> <div class="media-body">
<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" /> <h5 class="mt-0 font-18 mb-1"></h5>
<div class="media-body"> <p class="text-muted font-14"></p>
<h5 class="mt-0 font-18 mb-1">Dr. Gerd Britsch</h5>
<p class="text-muted font-14">Vogel- und Reptilienpraxis</p>
</div>
</div>
<div class="contact">
<ul class="social-links mb-0">
<li>
<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>
</li>
<li>
<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>
</li>
<li>
<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>
</li>
<li>
<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>
</li>
</ul>
</div>
</div> </div>
</div> </div>
<div class="contact">
<ul class="social-links mb-0">
<li class="entry-phone hide">
<i class="fa fa-phone"></i>
<a href="">
<span></span>
</a>
</li>
<li class="entry-envelope hide">
<i class="fa fa-envelope"></i>
<a href="">
<span></span>
</a>
</li>
<li class="entry-home hide">
<i class="fa fa-home"></i>
<a target=new href="">
<span></span>
</a>
</li>
<li class="entry-map hide">
<i class="fa fa-map"></i>
<a target=new href="">
<span></span>
</a>
</li>
</ul>
</div>
</div> </div>
</div> </div>
</div> </template>
</body> </body>
<style> <style>
@ -156,6 +151,9 @@
.progress-tracker-mobile { .progress-tracker-mobile {
display: none; display: none;
} }
.progress-marker:after {
z-index: 10 !important;
}
@media (max-width: 600px) { @media (max-width: 600px) {
.progress-tracker-desktop { .progress-tracker-desktop {
display: none; display: none;
@ -249,14 +247,49 @@
background-color: white; background-color: white;
color: black; color: black;
cursor: pointer; cursor: pointer;
padding: 9px 15px 9px 27px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
text-align: left; text-align: left;
gap: 10px; 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 { button svg {
height: 1rem; height: 1rem;
stroke-width: 2; stroke-width: 2;
@ -300,14 +333,14 @@
width: 70px; width: 70px;
} }
.card { .card {
border: none; border: 1px solid #d5d9d9;
box-shadow: 1px 0px 20px rgba(0, 0, 0, 0.05); border-radius: 8px;
margin-bottom: 1.5rem;
} }
.card-body { .card-body {
padding: 1.5rem 1.5rem 1rem 1.5rem; padding: 0rem !important;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1rem;
} }
.m-b-30 { .m-b-30 {
margin-bottom: 30px; margin-bottom: 30px;
@ -315,25 +348,40 @@
.social-links { .social-links {
list-style: none; list-style: none;
padding-left: 0; padding-left: 0;
display: flex;
flex-direction: column;
gap: 0.5rem 0;
}
.social-links i {
padding-top: 0.3rem;
} }
.social-links li { .social-links li {
color: rgba(33, 37, 41, 0.75); color: rgba(33, 37, 41, 0.75);
display: flex;
flex-direction: row;
gap: 0.5rem 1rem;
} }
.social-links li a { .social-links li a {
color: rgba(33, 37, 41, 0.75); color: rgba(33, 37, 41, 0.75);
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-block;
height: 30px;
padding-left: 0.5rem;
} }
.media { .media {
display: flex; display: flex;
gap: 1.25rem; gap: 1.25rem;
align-items: center; align-items: center;
padding: 1.25rem;
} }
.media-body p { .media-body p {
margin: 0; margin: 0;
} }
.contact {
padding: 1.5rem;
background: #f0f5f9;
}
.hide {
display: none !important;
}
</style> </style>
<script> <script>
var questions = { var questions = {
@ -341,9 +389,18 @@
"question": "Wildtier gefunden", "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.", "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": { "options": {
"1": "Fell", "1": {
"2": "Igel", "title": "Fell",
"3": "Vogel (Keine Zwangsfütterung)" "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": { "nextQuestions": {
"1": "13", "1": "13",
@ -355,12 +412,12 @@
"question": "Vogel", "question": "Vogel",
"explanation": "Um welche Vogelart handelt es sich?", "explanation": "Um welche Vogelart handelt es sich?",
"options": { "options": {
"1": "Greifvogel (verletzt / unverletzt)", "1": { "title": "Greifvogel (verletzt / unverletzt)" },
"2": "Taube", "2": { "title": "Taube" },
"3": "Rabenvögel", "3": { "title": "Rabenvögel" },
"4": "Gänsevögel / Wasservogel", "4": { "title": "Gänsevögel / Wasservogel" },
"5": "Schreitvögel (Storch, Reiher, Kranich)", "5": { "title": "Schreitvögel (Storch, Reiher, Kranich)" },
"6": "Kleinvogel" "6": { "title": "Kleinvogel" }
}, },
"nextQuestions": { "nextQuestions": {
"1": "11", "1": "11",
@ -375,10 +432,10 @@
"question": "Kleinvogel", "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.", "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": { "options": {
"1": "Verletzt", "1": { "title": "Verletzt" },
"2": "Unverletzt", "2": { "title": "Unverletzt" }
}, },
"nextQuestions": { "nextQuestions": {
"1": "10", "1": "10",
"2": "4" "2": "4"
} }
@ -387,8 +444,8 @@
"question": "Unverletzter Kleinvogel", "question": "Unverletzter Kleinvogel",
"explanation": "Handelt es sich um einen ausgewachsenen Vogel oder ein Jungtier/Küken?", "explanation": "Handelt es sich um einen ausgewachsenen Vogel oder ein Jungtier/Küken?",
"options": { "options": {
"1": "Ausgewachsen", "1": { "title": "Ausgewachsen" },
"2": "Jungvogel / Küken", "2": { "title": "Jungvogel / Küken" }
}, },
"nextQuestions": { "nextQuestions": {
"1": "5", "1": "5",
@ -399,21 +456,21 @@
"question": "Ausgewachsener, unverletzter Kleinvogel", "question": "Ausgewachsener, unverletzter Kleinvogel",
"explanation": "Wie verhält sich der Vogel bei einigen Minuten Beobachtung?", "explanation": "Wie verhält sich der Vogel bei einigen Minuten Beobachtung?",
"options": { "options": {
"1": "Agil, lebhaft, fliegt nicht weg", "1": { "title": "Agil, lebhaft, fliegt nicht weg" },
"2": "Apathisch, wirkt benommen, unbeweglich", "2": { "title": "Apathisch, wirkt benommen, unbeweglich" }
}, },
"nextQuestions": { "nextQuestions": {
"1": "6", "1": "6",
"2": "4" "2": "7"
} }
}, },
"6": { "6": {
"question": "Ausgewachsener, unverletzter Kleinvogel", "question": "Ausgewachsener, unverletzter Kleinvogel",
"explanation": "Auffällige Verhaltensmuster", "explanation": "Auffällige Verhaltensmuster",
"options": { "options": {
"1": "Hüpft herum", "1": { "title": "Hüpft herum" },
"2": "Kopf in Schieflage", "2": { "title": "Kopf in Schieflage" },
"3": "Sitzt herum", "3": { "title": "Sitzt herum" }
}, },
"nextQuestions": { "nextQuestions": {
"1": "8", "1": "8",
@ -423,10 +480,10 @@
}, },
"7": { "7": {
"question": "Ausgewachsener, unverletzter Kleinvogel", "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": { "options": {
"1": "Weiterhin schlechter Zustand", "1": { "title": "Weiterhin schlechter Zustand" },
"2": "Besserer Zustand" "2": { "title": "Besserer Zustand" }
}, },
"nextQuestions": { "nextQuestions": {
"1": "10", "1": "10",
@ -435,20 +492,20 @@
}, },
"8": { "8": {
"question": "Ausgewachsener, unverletzter Kleinvogel", "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.", "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.",
"options": { "contacts": {
"1": "WiTAS Hotline", "1": {
}, "name": "WiTAS Kontakt",
"nextQuestions": { "mail": "test@test.de",
"1": "15", },
} },
}, },
"9": { "9": {
"question": "Junger, unverletzter Kleinvogel", "question": "Junger, unverletzter Kleinvogel",
"explanation": "Weitere Charakterisierung", "explanation": "Weitere Charakterisierung",
"options": { "options": {
"1": "Mit Federn", "1": { "title": "Mit Federn" },
"2": "Ohne Federn", "2": { "title": "Ohne Federn" }
}, },
"nextQuestions": { "nextQuestions": {
"1": "20", "1": "20",
@ -457,15 +514,51 @@
}, },
"10": { "10": {
"question": "Taube / Verletzter Kleinvogel", "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": { "11": {
"question": "Greifvogel", "question": "Greifvogel",
"explanation": "Z.B. Falke oder Habicht. Deutlich nach unten gebogener Schnabel.<br><br>Falknerei Mans<br>07251/4743<br>0151-23260704", "explanation": "Z.B. Falke oder Habicht. Deutlich nach unten gebogener Schnabel.<br><br>Falknerei Mans<br>07251/4743<br>0151-23260704",
}, },
"12": { "12": {
"question": "Gänse, Raben-, Wasser- oder Schreitvögel", "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": { "13": {
"question": "Fell", "question": "Fell",
@ -478,13 +571,19 @@
"15": { "15": {
"question": "WiTAS Kontakt", "question": "WiTAS Kontakt",
"explanation": "Kontakt", "explanation": "Kontakt",
"contacts": {
"1": {
"name": "WiTAS Kontakt",
"mail": "test@test.de",
},
},
}, },
"20": { "20": {
"question": "Junger, unverletzter Kleinvogel", "question": "Junger, unverletzter Kleinvogel",
"explanation": "Aus einiger Entfernung beobachten (min 30 Minuten), bei Bedarf aus der Gefahrenzone bringen.", "explanation": "Aus einiger Entfernung beobachten (min 30 Minuten), bei Bedarf aus der Gefahrenzone bringen.",
"options": { "options": {
"1": "Vogel wird von Eltern gefüttert", "1": { "title": "Vogel wird von Eltern gefüttert" },
"2": "Vogel wird von Eltern NICHT gefüttert", "2": { "title": "Vogel wird von Eltern NICHT gefüttert" }
}, },
"nextQuestions": { "nextQuestions": {
"1": "23", "1": "23",
@ -495,8 +594,8 @@
"question": "Junger, unverletzter Kleinvogel", "question": "Junger, unverletzter Kleinvogel",
"explanation": "Befindet sich ein Vogelnest in sichtbarer und zugänglicher Nähe?", "explanation": "Befindet sich ein Vogelnest in sichtbarer und zugänglicher Nähe?",
"options": { "options": {
"1": "Nest sichtbar", "1": { "title": "Nest sichtbar" },
"2": "Kein Nest", "2": { "title": "Kein Nest" }
}, },
"nextQuestions": { "nextQuestions": {
"1": "22", "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) { function displayQuestion(questionId=1) {
currentQuestionId = questionId; currentQuestionId = questionId;
@ -571,13 +701,29 @@
for (var optionId in question.options) { for (var optionId in question.options) {
var button = document.createElement('button'); var button = document.createElement('button');
button.innerText = question.options[optionId]; button.innerText = question.options[optionId].title;
button.value = question.nextQuestions[optionId]; button.value = question.nextQuestions[optionId];
button.id = 'option' + 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'); var icon = document.createElement('i');
icon.setAttribute('data-feather', 'chevron-right'); 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() { button.addEventListener('click', function() {
previousQuestionId = currentQuestionId; previousQuestionId = currentQuestionId;
@ -598,6 +744,13 @@
feather.replace(); feather.replace();
questionContainer.classList.add('show'); 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); }, 500);
} }