From e278160824c4386edb3d62bfdc3766b024d95996 Mon Sep 17 00:00:00 2001
From: Jonas Heinrich <onny@project-insanity.org>
Date: Mon, 15 Jan 2024 16:09:19 +0100
Subject: [PATCH] Initial commit

---
 index.html | 321 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 321 insertions(+)
 create mode 100644 index.html
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..55fa635
--- /dev/null
+++ b/index.html
@@ -0,0 +1,321 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Questionnaire Wizard</title>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Roboto+Condensed:wght@100;200;300;400&display=swap" rel="stylesheet">
+ <script src="https://unpkg.com/feather-icons"></script>
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+ <link rel="stylesheet" href="https://nigelotoole.github.io/progress-tracker/styles/progress-tracker.css">
+</head>
+<body>
+
+    <div class="stepTracker">
+        <ul class="progress-tracker progress-tracker--text progress-tracker--text-inline progress-tracker--spaced">
+            <li class="progress-step is-complete">
+              <div class="progress-marker" data-text="1">
+                <div class="progress-text">
+                  <h4 class="progress-title">Wildtier gefunden</h4>
+                </div>
+              </div>
+            </li>
+  
+            <li class="progress-step is-complete">
+              <div class="progress-marker" data-text="2">
+                <div class="progress-text">
+                  <h4 class="progress-title">Klassifizieren</h4>
+                </div>
+              </div>
+            </li>
+  
+            <li class="progress-step is-complete">
+              <div class="progress-marker" data-text="3">
+                <div class="progress-text">
+                  <h4 class="progress-title">Hilfestellung erhalten</h4>
+                </div>
+              </div>
+            </li>
+          </ul>        
+    </div>
+    <main>
+        <!-- <div class="infoArea">Test 123</div> -->
+        <div id="questionContainer"></div>
+    </main>
+
+ <style>
+    .progress-step:last-child {
+        display: inline-table !important;
+        flex-grow: unset !important;
+    }
+    .progress-step:last-child .progress-text {
+        overflow: visible !important;
+    }
+    .stepTracker {
+        min-width: 800px;
+    }
+    .progress-tracker {
+        margin: 30px auto;
+    }
+    .progress-marker::after {
+        height: 1px !important;
+    }
+    .progress-marker::before {
+        font-size: 0.8rem;
+        font-weight: 1000;
+        padding: 0.1rem;
+    }
+    .progress-title {
+        font-weight: 400;
+    }
+    .progress-text {
+        background-color: #f7fafa !important;
+    }
+    .infoArea {
+        padding: 2rem;
+        border-right: 1px solid #d5d9d9
+    }
+
+    .progress-step.is-complete .progress-marker::before, .progress-step.is-progress .progress-marker::before {
+        background-color: #008296 !important;
+    }
+    html {
+        background: #f7fafa;
+        font-family: "Roboto Condensed";
+    }
+
+    body {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+    }
+
+    h2 {
+        margin-bottom: 0rem;
+        font-weight: 800;
+        font-size: 1.2rem;
+    }
+
+    a {
+        text-decoration: none;
+        color: #0F1111;
+    }
+    main {
+        display: flex;
+        align-items: top;
+        max-width: 500px;
+        width: 100%;
+        margin: auto;
+        padding: 40px;
+        background-color: #fff;
+        border-radius: 5px;
+        border: 1px solid #ddd;
+        box-shadow: 0 0 10px rgba(0,0,0,.1);
+        font-size: 0.95rem;
+        gap: 2rem;
+        transition: all 0.3s ease;
+    }
+    button {
+        border: 1px solid #d5d9d9;
+        border-radius: 8px;
+        box-shadow: 0px 2px 5px rgba(213, 217, 217, 0.5);
+        background-color: white;
+        color: black;
+        margin: 5px 0;
+        cursor: pointer;
+        padding: 9px 20px 9px 32px;
+        font-size: 0.8rem;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        text-align: left;
+        gap: 10px;
+    }
+
+    button svg {
+        height: 0.8rem;
+        stroke-width: 3;
+    }
+
+    #buttonContainer {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 7px 13px;
+    }
+
+    @media (max-width: 600px) {
+        #buttonContainer {
+            grid-template-columns: 1fr;
+        }
+    }
+
+    button:hover {
+        background-color: #f7fafa;
+    }
+
+    #questionContainer {
+        opacity: 0;
+        transition: opacity 0.25s ease-in-out;
+    }
+
+    #questionContainer.show {
+        opacity: 1;
+    }
+
+    #questionContainer > svg {
+        margin-bottom: -6px;
+    }
+
+ </style>
+ <script>
+   var questions = {
+        "1": {
+            "question": "Wildtier gefunden",
+            "explanation": "Wenn Sie ein Tier finden, ist es zuerst wichtig zu entscheiden, ob dieses Tier von WiTAS versorgt werden könnte. Noch besser wäre es, wenn Sie das Tier selbst versorgen könnten. Dafür haben wir diese Handlungsanweisung erstellt.",
+            "options": {
+                "1": "Fell",
+                "2": "Igel",
+                "3": "Vogel (Keine Zwangsfütterung)"
+            },
+            "nextQuestions": {
+                "1": "13",
+                "2": "3",
+                "3": "2"
+            }
+        },
+       "2": {
+           "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"
+           },
+           "nextQuestions": {
+               "1": "11",
+               "2": "10",
+               "3": "12",
+               "4": "12",
+               "5": "12",
+               "6": "3",
+           }
+       },
+       "3": {
+           "question": "Kleinvogel",
+           "explanation": "In welchem sichtbaren Zustand befindet sich der Vogel?",
+           "options": {
+               "1": "Verletzt",
+               "2": "Unverletzt",
+           },
+           "nextQuestions": {
+               "1": "4",
+               "2": "4"
+           }
+       },
+       "4": {
+           "question": "Unverletzter Kleinvogel",
+           "explanation": "Handelt es sich um einen ausgewachsenen Vogel oder ein Jungtier/Küken?",
+           "options": {
+               "1": "Ausgewachsen",
+               "2": "Jungvogel / Küken",
+           },
+           "nextQuestions": {
+               "1": "4",
+               "2": "4"
+           }
+       },
+       "10": {
+           "question": "Taube",
+           "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",
+       },
+       "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>",
+        },
+        "13": {
+           "question": "Fell",
+           "explanation": "Für diesen Eintrag gibt es noch keine Handlungsanweisung.",
+        },
+    };
+
+    var currentQuestionId = "1";
+    var previousQuestionId = null;
+
+    window.onhashchange = function() {
+        var questionId = window.location.hash.substring(1);
+        if (questionId in questions) {
+            displayQuestion(questionId);
+        } else {
+            displayQuestion();
+        }
+    };
+
+    function displayQuestion(questionId=1) {
+        currentQuestionId = questionId;
+        var questionContainer = document.getElementById('questionContainer');
+        questionContainer.classList.remove('show');
+
+        setTimeout(function() {
+            questionContainer.innerHTML = '';
+            var question = questions[currentQuestionId];
+
+            if (currentQuestionId !== 1) {
+                questionContainer.innerHTML += '<i data-feather="chevron-left"></i>';
+                var backLink = document.createElement('a');
+                backLink.innerText = 'Zurück';
+                backLink.href = 'javascript:history.back()';
+                questionContainer.appendChild(backLink);
+            }
+
+            questionContainer.innerHTML += '<h2>' + question.question + '</h2>';
+            questionContainer.innerHTML += '<p>' + question.explanation + '</p>';
+
+            var buttonContainer = document.createElement('div');
+            buttonContainer.id = 'buttonContainer';
+
+            for (var optionId in question.options) {
+                var button = document.createElement('button');
+                button.innerText = question.options[optionId];
+                button.value = question.nextQuestions[optionId];
+                button.id = 'option' + optionId;
+
+                var icon = document.createElement('i');
+                icon.setAttribute('data-feather', 'chevron-right');
+                button.appendChild(icon);
+
+                button.addEventListener('click', function() {
+                    previousQuestionId = currentQuestionId;
+                    currentQuestionId = this.value;
+                    window.location.hash = currentQuestionId;
+                    setTimeout(displayQuestion(currentQuestionId), 250);
+                });
+
+                buttonContainer.appendChild(button);
+            }
+            questionContainer.appendChild(buttonContainer);
+            feather.replace();
+
+            questionContainer.classList.add('show');
+        }, 500);
+    }
+
+    var initialQuestionId = window.location.hash.substring(1);
+    if (initialQuestionId in questions) {
+        displayQuestion(initialQuestionId);
+    } else {
+        displayQuestion();
+    }
+    
+    feather.replace();
+ </script>
+</body>
+</html>
