From a9c21a0d9a5794df5e354c4a01444101612659dc Mon Sep 17 00:00:00 2001
From: Jonas Heinrich <onny@project-insanity.org>
Date: Sun, 18 Feb 2024 18:32:08 +0100
Subject: [PATCH] fix content

---
 index.html | 335 ++++++++++++++++++++++++++++++++++++++---------------
 1 file changed, 244 insertions(+), 91 deletions(-)

diff --git a/index.html b/index.html
index b505803..0af792c 100644
--- a/index.html
+++ b/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">
-                    <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>
-                            </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>
+    <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"></h5>
+                        <p class="text-muted font-14"></p>
                     </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>
-    
+    </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,10 +432,10 @@
            "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": {
+         "nextQuestions": {
                "1": "10",
                "2": "4"
            }
@@ -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",
-           },
-           "nextQuestions": {
-               "1": "15",
-           }
+           "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",
+                },
+            },
         },
         "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,15 +514,51 @@
        },
        "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",
            "explanation": "Z.B. Falke oder Habicht. Deutlich nach unten gebogener Schnabel.<br><br>Falknerei Mans<br>07251/4743<br>0151-23260704",
        },
        "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);
     }