{"version":3,"file":"js/index.9314aabc.js","mappings":"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","sources":["webpack://fairytalegen/./src/components/Fairy-Popup.vue","webpack://fairytalegen/./src/components/Fairy-Popup.vue?2666","webpack://fairytalegen/./src/components/Fairy-Form.vue","webpack://fairytalegen/./src/components/Fairy-Form.vue?3ea8","webpack://fairytalegen/./src/components/Fairy-Loadingoverlay.vue","webpack://fairytalegen/./src/components/Fairy-Loadingoverlay.vue?a27e","webpack://fairytalegen/./src/components/Main-App.vue","webpack://fairytalegen/./src/components/Main-App.vue?b98a","webpack://fairytalegen/./src/App.vue","webpack://fairytalegen/./src/main.js","webpack://fairytalegen/webpack/bootstrap","webpack://fairytalegen/webpack/runtime/chunk loaded","webpack://fairytalegen/webpack/runtime/compat get default export","webpack://fairytalegen/webpack/runtime/define property getters","webpack://fairytalegen/webpack/runtime/global","webpack://fairytalegen/webpack/runtime/hasOwnProperty shorthand","webpack://fairytalegen/webpack/runtime/make namespace object","webpack://fairytalegen/webpack/runtime/publicPath","webpack://fairytalegen/webpack/runtime/jsonp chunk loading","webpack://fairytalegen/webpack/startup"],"sourcesContent":["<template>\n    <TransitionRoot as=\"template\" :show=\"open\">\n        <Dialog as=\"div\" class=\"relative z-10\">\n            <TransitionChild as=\"template\" enter=\"ease-out duration-300\" enter-from=\"opacity-0\" enter-to=\"opacity-100\" leave=\"ease-in duration-200\" leave-from=\"opacity-100\" leave-to=\"opacity-0\">\n                <div class=\"fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity\" />\n            </TransitionChild>\n\n            <div class=\"fixed inset-0 z-10 overflow-y-auto\">\n                <div class=\"flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0 bg-no-repeat bg-fixed bg-cover bg-[url('../assets/background_mobile.jpg')] sm:bg-[url('../assets/fairy_background.png')] \">\n                    <TransitionChild as=\"template\" enter=\"ease-out duration-300\" enter-from=\"opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95\" enter-to=\"opacity-100 translate-y-0 sm:scale-100\" leave=\"ease-in duration-200\" leave-from=\"opacity-100 translate-y-0 sm:scale-100\" leave-to=\"opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95\">\n                        <DialogPanel class=\"relative transform overflow-hidden rounded-lg bg-secondary-300 px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6\">\n                            <form class=\"bg-secondary-300 shadow-sm sm:rounded-xl md:col-span-2\" @submit.prevent=\"\">\n                                <div>\n                                    <div class=\"mt-3 text-center sm:mt-5\">\n                                        <DialogTitle as=\"h3\" class=\"text-xl font-semibold leading-6 text-primary-500\">Herzlich Willkommen beim Märchengenerator</DialogTitle>\n                                        <div class=\"mt-2\">\n                                            <p class=\"text-sm text-gray-500\">Bitte gib mindestens deinen Namen und dein Alter an</p>\n\n                                            <div class=\"px-4 py-6 sm:p-8\">\n                                                <div class=\"grid max-w-2xl grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6\">\n\n                                                    <div class=\"sm:col-span-3\">\n                                                        <label for=\"name\" class=\"block text-sm font-medium leading-6 text-primary text-start\">Dein Name</label>\n                                                        <div class=\"mt-2\">\n                                                            <input v-model=\"form.name\" type=\"text\" name=\"name\" id=\"name\" autocomplete=\"name\" class=\"block bg-secondary-300 w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6\" :disabled=\"disabled\" />\n                                                        </div>\n                                                    </div>\n\n\n                                                    <div class=\"sm:col-span-4\">\n                                                        <label for=\"age\" class=\"block text-sm font-medium leading-6 text-primary text-start\">Dein Alter</label>\n                                                        <div class=\"mt-2\">\n                                                            <input v-model=\"form.age\" id=\"age\" name=\"age\" type=\"number\" autocomplete=\"age\" class=\"block bg-secondary-300 w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6\" :disabled=\"disabled\" />\n                                                        </div>\n                                                    </div>\n\n                                                    <div class=\"sm:col-span-4\">\n                                                        <label for=\"country\" class=\"block text-sm font-medium leading-6 text-primary text-start\">Junge o. Mädchen</label>\n                                                        <div class=\"mt-2\">\n                                                            <select v-model=\"form.sex\" id=\"country\" name=\"country\" autocomplete=\"country-name\" class=\"block bg-secondary-300 w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:max-w-xs sm:text-sm sm:leading-6\" :disabled=\"disabled\">\n                                                                <option>Junge</option>\n                                                                <option>Mädchen</option>\n                                                            </select>\n                                                        </div>\n                                                    </div>\n\n\n                                                    <div class=\"sm:col-span-2 sm:col-start-1\">\n                                                        <label for=\"city\" class=\"block text-sm font-medium leading-6 text-primary text-start\">Haarfarbe</label>\n                                                        <div class=\"mt-2\">\n\n                                                            <select v-model=\"form.haircolor\" id=\"country\" name=\"country\" autocomplete=\"country-name\" class=\"bg-secondary-300 block w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-primary-600 \n                                                            sm:max-w-xs sm:text-sm sm:leading-6\" :disabled=\"disabled\">\n                                                                <option>braun</option>\n                                                                <option>blond</option>\n                                                                <option>schwarz</option>\n                                                                <option>rot</option>\n                                                                <option>weiß</option>\n                                                                <option>grau</option>\n                                                                <option>blau</option>\n                                                                <option>grün</option>\n                                                                <option>lila</option>\n                                                                <option>rosa</option>\n                                                                <option>orange</option>\n                                                                <option>gelb</option>\n                                                                <option>gold</option>\n                                                                <option>silber</option>\n                                                                <option>kupfer</option>\n                                                                <option>bernstein</option>\n                                                            </select>\n                                                        </div>\n                                                    </div>\n\n                                                    <div class=\"sm:col-span-2\">\n                                                        <label for=\"region\" class=\"block text-sm font-medium leading-6 text-primary text-start\">Deine Frisur</label>\n                                                        <div class=\"mt-2\">\n                                                            <select v-model=\"form.hair\" id=\"country\" name=\"country\" autocomplete=\"country-name\" class=\"block w-full bg-secondary-300 rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:max-w-xs sm:text-sm sm:leading-6\" :disabled=\"disabled\">\n                                                                <option>Kurz</option>\n                                                                <option>Mittelkurz</option>\n                                                                <option>Locken</option>\n                                                                <option>glattes Haar</option>\n                                                                <option>Wuschelfrisur</option>\n                                                                <option>Bob</option>\n                                                                <option>Pixie-Cut</option>\n                                                                <option>Langer Pferdeschwanz</option>\n                                                                <option>Hoher Pferdeschwanz</option>\n                                                                <option>Dutt</option>\n                                                                <option>Chignon</option>\n                                                                <option>Sidecut</option>\n                                                                <option>Undercut</option>\n                                                                <option>Wellen</option>\n                                                                <option>Zopf</option>\n                                                                <option>Fischgrätenzopf</option>\n                                                                <option>Top Knot</option>\n                                                                <option>Hochsteckfrisur</option>\n                                                                <option>Blunt Cut</option>\n                                                                <option>Long Bob</option>\n                                                                <option>Messy Bun</option>\n                                                                <option>French Twist</option>\n                                                                <option>Quiff</option>\n                                                                <option>Spiky Hair</option>\n                                                                <option>Slicked Back</option>\n                                                                <option>Braid Crown</option>\n                                                                <option>Mohawk</option>\n                                                                <option>Afro</option>\n                                                                <option>Curly Bob</option>\n                                                                <option>Curly Afro</option>\n                                                                <option>Cornrows</option>\n                                                                <option>Bantu Knots</option>\n                                                                <option>Frisch geschnittene Kurzhaarfrisur</option>\n                                                                <option>Lockige Frisur mit seitlichem Scheitel</option>\n                                                                <option>Geflochtene Zöpfe mit Perlen und Glasperlen</option>\n                                                                <option>Gebunden mit einem Haarband</option>\n                                                                <option>Schalfrisur</option>\n                                                                <option>Natürliche Afro-Textur</option>\n                                                            </select>\n                                                        </div>\n                                                    </div>\n\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n\n                                <div class=\"mt-5 sm:mt-6\">\n                                    <button type=\"button\" class=\"inline-flex w-full justify-center rounded-md bg-primary-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 disabled:bg-primary-50\" @click=\"open = false\" :disabled=\"starter\n                                    \">{{ button_msg }}</button>\n                                </div>\n                            </form>\n                        </DialogPanel>\n                    </TransitionChild>\n                </div>\n            </div>\n        </Dialog>\n    </TransitionRoot>\n</template>\n\n<script setup>\nimport { ref, reactive, defineEmits, watch, computed } from 'vue'\nimport { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'\nconst form = reactive({\n    name: '',\n    age: '',\n    sex: 'Mädchen',\n    hair: '',\n    animal: 'Löwe',\n    haircolor: ''\n});\nconst emit = defineEmits(['update']);\n\nconst disabled = ref(false);\nconst starter = ref(true);\nconst open = ref(true)\n\nwatch(form, res => {\n    if (form.name.length > 0 && form.age > 0 && form.hair.length > 0 && form.haircolor.length > 0) {\n        starter.value = false;\n    }\n    emit('update', res)\n})\n\n\nconst button_msg = computed(() => {\n    if (starter.value === true) {\n        return 'Bitte gib vorher noch alle Daten an'\n    } else {\n        return 'Los geht`s';\n    }\n\n});\n</script>\n","import script from \"./Fairy-Popup.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./Fairy-Popup.vue?vue&type=script&setup=true&lang=js\"\n\nconst __exports__ = script;\n\nexport default __exports__","<template>\n    <form class=\"shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl md:col-span-2\" @submit.prevent=\"\">\n        <div class=\"px-4 py-6 sm:p-8\">\n            <div class=\"grid max-w-2xl grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6\">\n\n                <div class=\"sm:col-span-3\">\n                    <label for=\"first-name\" class=\"block text-sm font-medium leading-6 text-gray-900\">Dein Vorname</label>\n                    <div class=\"mt-2\">\n                        <input v-model=\"form.name\" type=\"text\" name=\"first-name\" id=\"first-name\" autocomplete=\"given-name\" class=\"block w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-primary-300 placeholder:text-primary-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6 bg-secondary-300 disabled:bg-gray-200\" :disabled=\"disabled\" />\n                    </div>\n                </div>\n\n\n                <div class=\"sm:col-span-4\">\n                    <label for=\"age\" class=\"block text-sm font-medium leading-6 text-gray-900\">Dein Alter</label>\n                    <div class=\"mt-2\">\n                        <input v-model=\"form.age\" id=\"age\" name=\"age\" type=\"number\" autocomplete=\"age\" class=\"block w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-primary-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6 bg-secondary-300 disabled:bg-gray-200\" :disabled=\"disabled\" />\n                    </div>\n                </div>\n\n                <div class=\"sm:col-span-4\">\n                    <label for=\"country\" class=\"block text-sm font-medium leading-6 text-gray-900\">Junge o. Mädchen</label>\n                    <div class=\"mt-2\">\n                        <select v-model=\"form.sex\" id=\"country\" name=\"country\" autocomplete=\"country-name\" class=\"block w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-primary-300 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:max-w-xs sm:text-sm sm:leading-6 bg-secondary-300 disabled:bg-gray-200\" :disabled=\"disabled\">\n                            <option>Junge</option>\n                            <option>Mädchen</option>\n                        </select>\n                    </div>\n                </div>\n\n\n                <div class=\"col-span-full\">\n                    <label for=\"street-address\" class=\"block text-sm font-medium leading-6 text-gray-900\">Dein Lieblingscharakter</label>\n                    <div class=\"mt-2\">\n                        <select v-model=\"form.settings.charakter\" id=\"country\" name=\"country\" autocomplete=\"country-name\" class=\"block w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-primary-300 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:max-w-xs sm:text-sm sm:leading-6 bg-secondary-300 disabled:bg-gray-200\" :disabled=\"disabled\">\n                            <option>Prinzessin</option>\n                            <option>Zauberer</option>\n                            <option>Elfe</option>\n                            <option>Ork</option>\n                            <option>Prinz</option>\n                            <option>König</option>\n                            <option>Ritter</option>\n                            <option>Wikinger</option>\n                            <option>Hexe</option>\n                            <option>Paladin</option>\n                            <option>Feenprinz</option>\n                            <option>Drache</option>\n                            <option>Feenwesen</option>\n                            <option>Goblin</option>\n                            <option>Märchenprinz</option>\n                            <option>Fee</option>\n                            <option>Zwerg</option>\n                            <option>Die kleine Meerjungfrau</option>\n                            <option>Das tapfere Schneiderlein</option>\n                            <option>Hänsel und Gretel</option>\n                            <option>Rumpelstilzchen</option>\n                            <option>Schneeweißchen und Rosenrot</option>\n                            <option>Aschenputtel</option>\n                            <option>Rotkäppchen</option>\n                            <option>Der Froschkönig</option>\n                            <option>Der gestiefelte Kater</option>\n                            <option>Dornröschen</option>\n                            <option>Die drei kleinen Schweinchen</option>\n                            <option>Der Wolf und die sieben Geißlein</option>\n                            <option>Ali Baba und die vierzig Räuber</option>\n                            <option>Aladdin</option>\n                            <option>Peter Pan</option>\n                            <option>Robin Hood</option>\n                            <option>Sherlock Holmes</option>\n                            <option>Die Schöne und das Biest</option>\n                            <option>Die kleine Meerjungfrau</option>\n                            <option>Das tapfere Schneiderlein</option>\n                            <option>Hänsel und Gretel</option>\n                            <option>Rumpelstilzchen</option>\n                            <option>Schneeweißchen und Rosenrot</option>\n                            <option>Aschenputtel</option>\n                            <option>Rotkäppchen</option>\n                            <option>Der Froschkönig</option>\n                            <option>Der gestiefelte Kater</option>\n                            <option>Dornröschen</option>\n                            <option>Die drei kleinen Schweinchen</option>\n                            <option>Der Wolf und die sieben Geißlein</option>\n                            <option>Ali Baba und die vierzig Räuber</option>\n                            <option>Aladdin</option>\n                            <option>Peter Pan</option>\n                            <option>Robin Hood</option>\n                            <option>Sherlock Holmes</option>\n                            <option>Cinderella</option>\n                            <option>Der Zauberlehrling</option>\n                            <option>Hans im Glück</option>\n                            <option>Die Bremer Stadtmusikanten</option>\n                            <option>Die Prinzessin auf der Erbse</option>\n                            <option>Der Rattenfänger von Hameln</option>\n                            <option>Das Dschungelbuch</option>\n                            <option>Pocahontas</option>\n                            <option>Die Schneekönigin</option>\n                            <option>Die wilden Schwäne</option>\n                            <option>Der fliegende Holländer</option>\n                            <option>Der goldene Vogel</option>\n                            <option>Der Hase und der Igel</option>\n                        </select>\n                    </div>\n                </div>\n\n                <div class=\"col-span-full\">\n                    <label for=\"street-address\" class=\"block text-sm font-medium leading-6 text-gray-900\">Deine Lieblingsumgebung</label>\n                    <div class=\"mt-2\">\n                        <select v-model=\"form.settings.set\" id=\"country\" name=\"country\" autocomplete=\"country-name\" class=\"block w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-primary-300 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:max-w-xs sm:text-sm sm:leading-6 bg-secondary-300 disabled:bg-gray-200\" :disabled=\"disabled\">\n                            <option>Schloss im Wald</option>\n                            <option>Im Wald</option>\n                            <option>In einem Wolkenparadies</option>\n                            <option>Schloss im Gebirge</option>\n                            <option>Märchenwald</option>\n                            <option>Zauberwald</option>\n                            <option>Feenland</option>\n                            <option>Eisiges Königreich</option>\n                            <option>Höhle des Drachen</option>\n                            <option>Gefängnis des Riesen</option>\n                            <option>Zauberberg</option>\n                            <option>Märchenschloss</option>\n                            <option>Zauberhöhle</option>\n                            <option>Wunderland</option>\n                            <option>Geheime Garten</option>\n                            <option>Dunkler Wald</option>\n                            <option>Zauberwiese</option>\n                            <option>Unterwasserwelt</option>\n                            <option>Verzauberte Ruine</option>\n                            <option>Im Himmel</option>\n                            <option>Unterirdischer Palast</option>\n                            <option>Zauberhafte Insel</option>\n                            <option>Geheimnisvolles Tal</option>\n                            <option>Wolkenstadt</option>\n                            <option>Wüste des Wunders</option>\n                            <option>Unterirdischer See</option>\n                            <option>Trollhöhle</option>\n                            <option>Schloss am Meer</option>\n                            <option>Bergdorf</option>\n                            <option>Verzauberte Bibliothek</option>\n                            <option>Unterirdischer Fluss</option>\n                            <option>Schloss auf der Wolke</option>\n                            <option>Fliegende Insel</option>\n                            <option>Geisterstadt</option>\n                            <option>Drachenhort</option>\n                            <option>Palast der Winde</option>\n                            <option>Verbotener Garten</option>\n                            <option>Magische Taverne</option>\n                            <option>Märchenküste</option>\n                            <option>Zauberstube</option>\n                            <option>Elfenreich</option>\n                            <option>Eisgrotte</option>\n                            <option>Schloss im Wasserfall</option>\n                            <option>Märchenwiese</option>\n                            <option>Geheimnisvolle Grotte</option>\n                            <option>Zauberhafte Berge</option>\n                            <option>Schloss im Nebel</option>\n                            <option>Höhle der Wunder</option>\n                            <option>Mystischer Wald</option>\n                            <option>Unterirdischer Tempel</option>\n                            <option>Zauberhafte Oase</option>\n                            <option>Wunderhöhle</option>\n                            <option>Schloss auf dem Berg</option>\n                            <option>Zauberhafte Höhle</option>\n                            <option>Verzaubertes Labyrinth</option>\n                            <option>Verfluchtes Schloss</option>\n                            <option>Unterirdischer Garten</option>\n                            <option>Schloss im Eis</option>\n                            <option>Drachenhöhle</option>\n                            <option>Verzaubertes Meer</option>\n                            <option>Zauberhafter Wasserfall</option>\n                            <option>Wald des Vergessens</option>\n                            <option>Mystischer See</option>\n                            <option>Verzauberter Waldsee</option>\n                            <option>Unterirdischer Markt</option>\n                            <option>Magische Wüste</option>\n                            <option>Schloss in den Wolken</option>\n                            <option>Höhle des Schreckens</option>\n                            <option>Unterirdischer Wald</option>\n                            <option>Schloss im Feuer</option>\n                            <option>Verzauberter Fluss</option>\n                            <option>Wunderbaum</option>\n                            <option>Magischer See</option>\n                            <option>Unterirdisches Reich</option>\n                            <option>Zauberhaftes Schmuckkästchen</option>\n                            <option>Märchenhaftes Schloss</option>\n                            <option>Palast der Träume</option>\n                            <option>Verzaubertes Bergdorf</option>\n                            <option>Schloss im Regenbogen</option>\n                            <option>Unterirdischer See der Sterne</option>\n                            <option>Zauberhaftes Dorf</option>\n                            <option>Wundersamer Garten</option>\n                            <option>Märchenhafter Hafen</option>\n                            <option>Verzaubertes Schmuckkästchen</option>\n                            <option>Magischer Turm</option>\n                        </select>\n                    </div>\n                </div>\n\n                <div class=\"sm:col-span-2 sm:col-start-1\">\n                    <label for=\"city\" class=\"block text-sm font-medium leading-6 text-gray-900\">Haarfarbe</label>\n                    <div class=\"mt-2\">\n\n                        <select v-model=\"form.haircolor\" id=\"country\" name=\"country\" autocomplete=\"country-name\" class=\"block w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-primary-300 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:max-w-xs sm:text-sm sm:leading-6 bg-secondary-300 disabled:bg-gray-200\" :disabled=\"disabled\">\n                            <option>braun</option>\n                            <option>blond</option>\n                            <option>schwarz</option>\n                            <option>rot</option>\n                            <option>weiß</option>\n                            <option>grau</option>\n                            <option>blau</option>\n                            <option>grün</option>\n                            <option>lila</option>\n                            <option>rosa</option>\n                            <option>orange</option>\n                            <option>gelb</option>\n                            <option>gold</option>\n                            <option>silber</option>\n                            <option>kupfer</option>\n                            <option>bernstein</option>\n                            <option>platinblond</option>\n                            <option>dunkelbraun</option>\n                            <option>honigblond</option>\n                            <option>rotbraun</option>\n                            <option>aubergine</option>\n                            <option>türkis</option>\n                            <option>lavendel</option>\n                            <option>apricot</option>\n                            <option>mahagoni</option>\n                            <option>pastellpink</option>\n                        </select>\n                        <!-- <input type=\"text\" name=\"city\" id=\"city\" autocomplete=\"address-level2\" v-model=\"form.haircolor\" class=\"block w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-primary-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6\" /> -->\n\n\n                    </div>\n                </div>\n\n                <div class=\"sm:col-span-2\">\n                    <label for=\"region\" class=\"block text-sm font-medium leading-6 text-gray-900\">Deine Frisur</label>\n                    <div class=\"mt-2\">\n                        <select v-model=\"form.hair\" id=\"country\" name=\"country\" autocomplete=\"country-name\" class=\"block w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-primary-300 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:max-w-xs sm:text-sm sm:leading-6 bg-secondary-300 disabled:bg-gray-200\" :disabled=\"disabled\">\n                            <option>Kurz</option>\n                            <option>Mittelkurz</option>\n                            <option>Lang</option>\n                            <option>sehr lang</option>\n                            <option>halblang</option>\n                            <option>Glatze</option>\n                            <option>Stoppel</option>\n                            <option>Locken</option>\n                            <option>glattes Haar</option>\n                            <option>Wuschelfrisur</option>\n                            <option>Bob</option>\n                            <option>Pixie-Cut</option>\n                            <option>Langer Pferdeschwanz</option>\n                            <option>Hoher Pferdeschwanz</option>\n                            <option>Dutt</option>\n                            <option>Chignon</option>\n                            <option>Sidecut</option>\n                            <option>Undercut</option>\n                            <option>Wellen</option>\n                            <option>Zopf</option>\n                            <option>Fischgrätenzopf</option>\n                            <option>Top Knot</option>\n                            <option>Hochsteckfrisur</option>\n                            <option>Blunt Cut</option>\n                            <option>Long Bob</option>\n                            <option>Messy Bun</option>\n                            <option>French Twist</option>\n                            <option>Quiff</option>\n                            <option>Spiky Hair</option>\n                            <option>Slicked Back</option>\n                            <option>Braid Crown</option>\n                            <option>Mohawk</option>\n                            <option>Afro</option>\n                            <option>Curly Bob</option>\n                            <option>Curly Afro</option>\n                            <option>Cornrows</option>\n                            <option>Bantu Knots</option>\n                            <option>Frisch geschnittene Kurzhaarfrisur</option>\n                            <option>Lockige Frisur mit seitlichem Scheitel</option>\n                            <option>Geflochtene Zöpfe mit Perlen und Glasperlen</option>\n                            <option>Gebunden mit einem Haarband</option>\n                            <option>Schalfrisur</option>\n                            <option>Natürliche Afro-Textur</option>\n                        </select>\n\n                        <!-- <input type=\"text\" name=\"region\" id=\"region\" autocomplete=\"address-level1\" v-model=\"form.hair\" class=\"block w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-primary-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6\" /> -->\n\n\n                    </div>\n                </div>\n\n                <div class=\"sm:col-span-3\">\n                        <label for=\"hobby\" class=\"block text-sm font-medium leading-6 text-gray-900\">Dein Hobby</label>\n                        <div class=\"mt-2\">\n                            <input v-model=\"form.hobby\" type=\"text\" name=\"hobby\" id=\"hobby\" autocomplete=\"given-name\" class=\"block rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-primary-300 placeholder:text-primary-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6 bg-secondary-300 disabled:bg-gray-200\" :disabled=\"disabled\" />\n                        </div>\n                </div>\n\n                    <div class=\"col-span-full\">\n                        <label for=\"plot\" class=\"block text-sm font-medium leading-6 text-gray-900\">Handlung</label>\n                        <div class=\"mt-2\">\n                            <select v-model=\"form.settings.plot\" id=\"plot\" name=\"plot\" autocomplete=\"plote\" class=\"block w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-primary-300 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:max-w-xs sm:text-sm sm:leading-6 bg-secondary-300 disabled:bg-gray-200\" :disabled=\"disabled\">\n                            <option v-for=\"(element) in handlungen\" :key=\"element.id\" :value=\"element.name\">{{ element.name}}</option>\n                            </select>\n                        </div>\n                    </div>\n\n            </div>\n        </div>\n        <div class=\"flex items-center justify-end gap-x-6 border-t border-gray-900/10 px-4 py-4 sm:px-8\">\n            <button type=\"button\" class=\"text-sm font-semibold leading-6 text-gray-900\" @click=\"deleteHistory\">History löschen</button>\n            <button type=\"submit\" class=\"rounded-md bg-primary-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 disabled:bg-gray-200\" @click=\"getTale\" :disabled=\"disabled\">Neues Märchen</button>\n        </div>\n    </form>\n</template>\n<script setup>\nimport { reactive, defineEmits, watch, defineProps, ref } from 'vue';\n\nconst handlungen = [\n    {\n        \"id\": 1,\n        \"name\": \"Abenteuer\",\n        \"description\": \"Eine spannende Reise oder Mission, auf der die Hauptfigur verschiedene Herausforderungen bewältigen muss.\"\n    },\n    {\n        \"id\": 2,\n        \"name\": \"Rätsel\",\n        \"description\": \"Die Hauptfigur muss komplexe Rätsel lösen, um ein Ziel zu erreichen oder um eine Situation zu bewältigen.\"\n    },\n    {\n        \"id\": 3,\n        \"name\": \"Magie\",\n        \"description\": \"Die Verwendung von magischen Kräften oder Zauberei durch Charaktere oder in der Umgebung.\"\n    },\n    {\n        \"id\": 4,\n        \"name\": \"Freundschaft\",\n        \"description\": \"Die Entwicklung von Freundschaften und Zusammenarbeit zwischen Charakteren.\"\n    },\n    {\n        \"id\": 5,\n        \"name\": \"Liebe\",\n        \"description\": \"Eine romantische Beziehung oder die Suche nach wahrer Liebe als zentrales Thema.\"\n    },\n    {\n        \"id\": 6,\n        \"name\": \"Verwandlung\",\n        \"description\": \"Charaktere oder Objekte, die ihre Gestalt oder ihr Wesen ändern.\"\n    },\n    {\n        \"id\": 7,\n        \"name\": \"Heldentum\",\n        \"description\": \"Die Hauptfigur wird zum Helden, indem sie Mut, Weisheit oder andere Tugenden zeigt.\"\n    },\n    {\n        \"id\": 8,\n        \"name\": \"Wettstreit\",\n        \"description\": \"Ein Wettkampf oder Kampf, bei dem die Hauptfigur ihre Fähigkeiten unter Beweis stellen muss.\"\n    },\n    {\n        \"id\": 9,\n        \"name\": \"Schatzsuche\",\n        \"description\": \"Die Suche nach einem verborgenen oder verlorenen Schatz, der für die Hauptfigur oder andere von großer Bedeutung ist.\"\n    },\n    {\n        \"id\": 10,\n        \"name\": \"Reise in eine andere Welt\",\n        \"description\": \"Die Hauptfigur gelangt in eine andere Welt oder Dimension, in der sie auf ungewöhnliche Herausforderungen und Charaktere trifft.\"\n    },\n    {\n        \"id\": 11,\n        \"name\": \"Selbstfindung\",\n        \"description\": \"Die Hauptfigur durchläuft eine persönliche Entwicklung und entdeckt ihre eigenen Stärken und Schwächen.\"\n    },\n    {\n        \"id\": 12,\n        \"name\": \"Erlösung\",\n        \"description\": \"Ein Charakter, der von einem Fehler oder einer schlechten Tat geplagt ist, sucht nach Erlösung und Vergebung.\"\n    },\n    {\n        \"id\": 13,\n        \"name\": \"Intrigen und Verrat\",\n        \"description\": \"Die Hauptfigur wird in politische oder soziale Intrigen verwickelt und muss sich gegen Verrat oder Täuschung behaupten.\"\n    },\n    {\n        \"id\": 14,\n        \"name\": \"Geheimnisse\",\n        \"description\": \"Die Aufdeckung verborgener Geheimnisse, die das Schicksal der Hauptfigur oder anderer beeinflussen.\"\n    }, {\n        \"id\": 15,\n        \"name\": \"Übernatürliche Wesen\",\n        \"description\": \"Die Begegnung mit Fabelwesen, Geistern, Monstern oder anderen übernatürlichen Kreaturen.\"\n\n    }];\n\nconst form = reactive({\n    name: '',\n    age: '',\n    sex: 'Mädchen',\n    hair: 'Kurz',\n    animal: 'Löwe',\n    color: 'black',\n    hobby:'Apps programmieren',\n    haircolor: 'blond',\n    settings: {\n        charakter: 'Ritter',\n        set: 'Schloss im Wald',\n        plot: 'Abenteuer',\n        plot_description:''\n    }\n});\nconst disabled = ref(false);\nconst props = defineProps(['disabled', 'formdata']);\nconst emit = defineEmits(['data', 'submit', 'deleteHistory']);\n\n\n\n\nwatch(() => props.disabled, (oldVal) => {\n    //console.log(oldVal,newVal);\n    disabled.value = oldVal;\n});\n\nwatch(props.formdata, (old, newVal) => {\n    for (const [key, value] of Object.entries(newVal)) {\n        form[key] = value;\n    }\n    form.settings.plot_description = handlungen.filter(h => h.name === form.settings.plot).map(h => h.description)[0]\n});\n\nwatch(form, res => {\n    emit('data', res)\n});\n\nconst getTale = () => {\n    emit('submit', true)\n};\nconst deleteHistory = () => {\n    emit('deleteHistory', true)\n};\n\n</script>","import script from \"./Fairy-Form.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./Fairy-Form.vue?vue&type=script&setup=true&lang=js\"\n\nconst __exports__ = script;\n\nexport default __exports__","<template>\n    <TransitionRoot as=\"template\" :show=\"open\">\n        <Dialog as=\"div\" class=\"relative z-10\">\n\n            <TransitionChild as=\"template\" enter=\"ease-out duration-300\" enter-from=\"opacity-0\" enter-to=\"opacity-100\" leave=\"ease-in duration-200\" leave-from=\"opacity-100\" leave-to=\"opacity-0\">\n                <div class=\"fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity\" />\n            </TransitionChild>\n\n            <div class=\"fixed inset-0 z-10 overflow-y-auto\">\n                <div class=\"flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0 bg-no-repeat bg-cover bg-[url('../assets/background_mobile.jpg')] sm:bg-[url('../assets/fairy_background.png')] \">\n                    <TransitionChild as=\"template\" enter=\"ease-out duration-300\" enter-from=\"opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95\" enter-to=\"opacity-100 translate-y-0 sm:scale-100\" leave=\"ease-in duration-200\" leave-from=\"opacity-100 translate-y-0 sm:scale-100\" leave-to=\"opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95\">\n                        <DialogPanel class=\"relative transform overflow-hidden rounded-lg bg-secondary-300 px-4 pb-4 pt-5 shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6 text-center\">\n                             Hab Geduld, dein Märchen wird gerade geschrieben.\n                            <div class=\"flex justify-center items-center\">\n                               \n                                <svg aria-hidden=\"true\" class=\"w-12 h-12 my-3 text-primary-200 animate-spin dark:text-secondary-600 fill-primary-100\" viewBox=\"0 0 100 101\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                    <path\n                                        d=\"M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z\"\n                                        fill=\"currentColor\" />\n                                    <path\n                                        d=\"M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z\"\n                                        fill=\"currentFill\" />\n                                </svg>\n                                <span class=\"sr-only\">Loading...</span>\n                            </div>\n                        </DialogPanel>\n                    </TransitionChild>\n                </div>\n            </div>\n        </Dialog>\n    </TransitionRoot>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport { Dialog, DialogPanel, TransitionChild, TransitionRoot } from '@headlessui/vue'\n\nconst open = ref(true)\n\n</script>\n","import script from \"./Fairy-Loadingoverlay.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./Fairy-Loadingoverlay.vue?vue&type=script&setup=true&lang=js\"\n\nconst __exports__ = script;\n\nexport default __exports__","\n<template>\n\n    <div class=\"h-full w-full  bg-[url('../assets/background_mobile.jpg')] sm:bg-[url('../assets/fairy_background.png')]  bg-cover bg-fixed\">\n    <Popover as=\"header\" class=\" pb-24\" v-slot=\"{ open }\">\n        <div class=\"mx-auto max-w-3xl px-4 sm:px-6 lg:max-w-7xl lg:px-8\">\n            <div class=\"relative flex items-center justify-center py-5 lg:justify-between\">\n                    <!-- Logo -->\n                    <div class=\"absolute left-0 flex-shrink-0 lg:static\">\n                        <a href=\"#\">\n                        <span class=\"sr-only\">Märchen Generator</span>\n                        <img class=\"h-8 w-auto\" src=\"../assets/logo.png\" alt=\"Märchen Generator\" />\n                    </a>\n                </div>\n\n                <!-- Right section on desktop -->\n                <div class=\"hidden lg:ml-4 lg:flex lg:items-center lg:pr-0.5\">\n                   \n                    </div>\n\n                <!-- Menu button -->\n                <div class=\"absolute right-0 flex-shrink-0 lg:hidden\">\n                        <!-- Mobile menu button -->\n                        <!-- <PopoverButton class=\"inline-flex items-center justify-center rounded-md bg-transparent p-2 text-primary-200 hover:bg-white hover:bg-opacity-10 hover:text-white focus:outline-none focus:ring-2 focus:ring-white\">\n                                        <span class=\"sr-only\">Open main menu</span>\n                        <Bars3Icon v-if=\"!open\" class=\"block h-6 w-6\" aria-hidden=\"true\" />\n                        <XMarkIcon v-else class=\"block h-6 w-6\" aria-hidden=\"true\" />\n                    </PopoverButton> -->\n                </div>\n            </div>\n            <div class=\"hidden border-t border-white border-opacity-20 py-5 lg:block\">\n                <div class=\"grid grid-cols-3 items-center gap-8\">\n                    <div class=\"col-span-2\">\n                            <!-- <nav class=\"flex space-x-4\">\n                                                            <a v-for=\"item in navigation\" :key=\"item.name\" :href=\"item.href\" :class=\"[item.current ? 'text-white' : 'text-primary-100', 'rounded-md bg-white bg-opacity-0 px-3 py-2 text-sm font-medium hover:bg-opacity-10']\" :aria-current=\"item.current ? 'page' : undefined\">{{ item.name }}</a>\n                                                        </nav> -->\n                        </div>\n                        <div>\n                            <!-- <div class=\"mx-auto w-full max-w-md\">\n                                                            <label for=\"mobile-search\" class=\"sr-only\">Search</label>\n                                                            <div class=\"relative text-white focus-within:text-gray-600\">\n                                                                <div class=\"pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3\">\n                                                                    <MagnifyingGlassIcon class=\"h-5 w-5\" aria-hidden=\"true\" />\n                                                                </div>\n                                                                <input id=\"mobile-search\" class=\"block w-full rounded-md border-0 bg-white/20 py-1.5 pl-10 pr-3 text-white placeholder:text-white focus:bg-white focus:text-gray-900 focus:ring-0 focus:placeholder:text-gray-500 sm:text-sm sm:leading-6\" placeholder=\"Search\" type=\"search\" name=\"search\" />\n                                                            </div>\n                                                        </div> -->\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <TransitionRoot as=\"template\" :show=\"open\">\n                <div class=\"lg:hidden\">\n                    <TransitionChild as=\"template\" enter=\"duration-150 ease-out\" enter-from=\"opacity-0\" enter-to=\"opacity-100\" leave=\"duration-150 ease-in\" leave-from=\"opacity-100\" leave-to=\"opacity-0\">\n                        <PopoverOverlay class=\"fixed inset-0 z-20 bg-black bg-opacity-25\" />\n                    </TransitionChild>\n\n                    <TransitionChild as=\"template\" enter=\"duration-150 ease-out\" enter-from=\"opacity-0 scale-95\" enter-to=\"opacity-100 scale-100\" leave=\"duration-150 ease-in\" leave-from=\"opacity-100 scale-100\" leave-to=\"opacity-0 scale-95\">\n                        <PopoverPanel focus class=\"absolute inset-x-0 top-0 z-30 mx-auto w-full max-w-3xl origin-top transform p-2 transition\">\n                            <div class=\"divide-y divide-gray-200 rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5\">\n                                <div class=\"pb-2 pt-3\">\n                                    <div class=\"flex items-center justify-between px-4\">\n                                        <div>\n                                            <img class=\"h-8 w-auto\" src=\"https://tailwindui.com/img/logos/mark.svg?color=primary&shade=600\" alt=\"Märchen Generator\" />\n                                        </div>\n                                        <div class=\"-mr-2\">\n                                            <PopoverButton class=\"inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary-500\">\n                                                <span class=\"sr-only\">Close menu</span>\n                                                <XMarkIcon class=\"h-6 w-6\" aria-hidden=\"true\" />\n                                            </PopoverButton>\n                                        </div>\n                                    </div>\n                                    <div class=\"mt-3 space-y-1 px-2\">\n                                        <a href=\"#\" class=\"block rounded-md px-3 py-2 text-base font-medium text-gray-900 hover:bg-gray-100 hover:text-gray-800\">Home</a>\n                                        <a href=\"#\" class=\"block rounded-md px-3 py-2 text-base font-medium text-gray-900 hover:bg-gray-100 hover:text-gray-800\">Profile</a>\n                                        <a href=\"#\" class=\"block rounded-md px-3 py-2 text-base font-medium text-gray-900 hover:bg-gray-100 hover:text-gray-800\">Resources</a>\n                                        <a href=\"#\" class=\"block rounded-md px-3 py-2 text-base font-medium text-gray-900 hover:bg-gray-100 hover:text-gray-800\">Company Directory</a>\n                                        <a href=\"#\" class=\"block rounded-md px-3 py-2 text-base font-medium text-gray-900 hover:bg-gray-100 hover:text-gray-800\">Openings</a>\n                                    </div>\n                                </div>\n                                <div class=\"pb-2 pt-4\">\n                                    <div class=\"flex items-center px-5\">\n                                        <div class=\"flex-shrink-0\">\n                                            <img class=\"h-10 w-10 rounded-full\" :src=\"user.imageUrl\" alt=\"\" />\n                                        </div>\n                                        <div class=\"ml-3 min-w-0 flex-1\">\n                                            <div class=\"truncate text-base font-medium text-gray-800\">{{ user.name }}</div>\n                                            <div class=\"truncate text-sm font-medium text-gray-500\">{{ user.email }}</div>\n                                        </div>\n                                        <button type=\"button\" class=\"ml-auto flex-shrink-0 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2\">\n                                            <span class=\"sr-only\">View notifications</span>\n                                            <BellIcon class=\"h-6 w-6\" aria-hidden=\"true\" />\n                                        </button>\n                                    </div>\n                                    <div class=\"mt-3 space-y-1 px-2\">\n                                        <a v-for=\"item in userNavigation\" :key=\"item.name\" :href=\"item.href\" class=\"block rounded-md px-3 py-2 text-base font-medium text-gray-900 hover:bg-gray-100 hover:text-gray-800\">{{ item.name }}</a>\n                                    </div>\n                                </div>\n                            </div>\n                        </PopoverPanel>\n                    </TransitionChild>\n                </div>\n            </TransitionRoot>\n        </Popover>\n        <main class=\"-mt-24 pb-8\">\n            <div class=\"mx-auto max-w-3xl px-4 sm:px-6 lg:max-w-7xl lg:px-8\">\n                <h1 class=\"sr-only\"></h1>\n                <!-- Main 3 column grid -->\n                <div class=\"grid grid-cols-1 items-start gap-4 lg:grid-cols-3 lg:gap-8\">\n                    <!-- Left col -->\n                    <div class=\"grid grid-cols-1 gap-4\">\n                        <section aria-labelledby=\"section-2-title\">\n                            <h2 class=\"sr-only\" id=\"section-2-title\">Section title</h2>\n                            <div class=\"overflow-hidden bg-secondary-300 rounded-lg shadow\">\n                                <div class=\"p-6\">\n                                    <fairy-form :formdata=\"form\" @data=\"emitFormData\" :disabled=\"disabled\" @submit=\"getTale\" @deleteHistory=\"deleteHistory\" />\n                                </div>\n                            </div>\n                        </section>\n                    </div>\n\n                    <!-- Right col -->\n                    <div class=\"grid grid-cols-1 gap-4 lg:col-span-2\">\n                        <section aria-labelledby=\"section-1-title\">\n\n                            <div class=\"overflow-hidden rounded-lg \">\n                                <div class=\"\">\n                                    <!-- Your content -->\n\n                                    <div v-if=\"isLoading\" class=\"flex justify-center items-center m-5\">\n                                        <div role=\"status\">\n                                            <svg aria-hidden=\"true\" class=\"w-12 h-12 mr-2 text-gray-200 animate-spin dark:text-gray-600 fill-gray-300\" viewBox=\"0 0 100 101\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                <path\n                                                    d=\"M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z\"\n                                                    fill=\"currentColor\" />\n                                                <path\n                                                    d=\"M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z\"\n                                                    fill=\"currentFill\" />\n                                            </svg>\n                                            <span class=\"sr-only\">Loading...</span>\n                                        </div>\n                                    </div>\n                                    <!-- <div v-if=\"got_story\">\n                                        <h2 class=\"mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl\">{{ story_title }}</h2>\n                                        <div>\n                                            {{ story_content }}\n                                        </div>\n                                    </div> -->\n                                    <div v-if=\"show_history\">\n\n                                        <div v-for=\"historyItem in history\" :key=\"historyItem.title\" class=\"bg-secondary-300 overflow-hidden rounded-lg p-6 mb-4\">\n                                            <h2 class=\"mt-2 text-2xl md:text-3xl font-bold tracking-tight text-primary-600 sm:text-4xl\">{{ historyItem.title }}</h2>\n                                           <img v-if=\"historyItem.image\" :src=\"historyItem.image\" width=\"300\" height=\"300\" class=\" rounded-lg float-left mr-4\" />\n    <span class=\"md:text-base text-sm\">{{ historyItem.text }}</span>\n                                            <div class=\"mt-1 text-xs\">Geschrieben am {{ formatDate(historyItem.date) }}</div>\n                                        </div>\n\n                                        <div v-if=\"history.length == 0\" class=\"bg-secondary-300 overflow-hidden rounded-lg p-6 mb-4\">\n                                            Bisher noch keine Märchen vorhanden.<br>\n                                            <button type=\"submit\" class=\"my-2 rounded-md bg-primary-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600\" @click=\"getTale\" :disabled=\"disabled\">Neues Märchen</button>\n                                        </div>\n                                    </div>\n\n                                </div>\n                            </div>\n                        </section>\n                    </div>\n                </div>\n            </div>\n        </main>\n        <footer>\n            <div class=\"mx-auto max-w-3xl px-4 sm:px-6 lg:max-w-7xl lg:px-8\">\n                <div class=\"border-t border-gray-200 py-8 text-center text-sm text-gray-500 sm:text-left\"><span class=\"block sm:inline\">&copy; Tobeworks 2023, Version {{ appdata.version }}</span> <span class=\"block sm:inline\"></span></div>\n            </div>\n        </footer>\n    </div>\n\n    <FairyPopup @update=\"getStartForm\" v-if=\"start_screen\"></FairyPopup>\n    <Overlay v-if=\"isLoading\" />\n</template>\n\n<script setup>\nimport { ref, reactive, onMounted } from 'vue';\nimport axios from 'axios';\nimport {\n    // Menu,\n    // MenuButton,\n    // MenuItem,\n    // MenuItems,\n    Popover,\n    PopoverButton,\n    PopoverOverlay,\n    PopoverPanel,\n    TransitionChild,\n    TransitionRoot,\n} from '@headlessui/vue'\nimport { BellIcon, XMarkIcon } from '@heroicons/vue/24/outline'\n//import { MagnifyingGlassIcon } from '@heroicons/vue/20/solid'\n//import bg from '../assets/fairy_background.png';\nimport FairyPopup from '../components/Fairy-Popup.vue'\nimport FairyForm from '../components/Fairy-Form.vue'\nimport Overlay from '../components/Fairy-Loadingoverlay.vue'\nimport appdata from '../../package.json'\n\nconst user = {\n    name: 'Tobias Lorsbach',\n    email: 'tom@example.com',\n    imageUrl:\n        'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',\n}\n\nconst userNavigation = [\n    { name: 'Your Profile', href: '#' },\n    { name: 'Settings', href: '#' },\n    { name: 'Sign out', href: '#' },\n]\n\nconst got_story = ref(false);\nconst isLoading = ref(false);\nconst story_content = ref(null);\nconst story_title = ref(null);\nconst story_image = ref();\nconst start_screen = ref(true);\nconst show_history = ref(true);\nconst history = ref([]);\nconst disabled = ref(false);\nconst history_data_name = 'maerchengenerator_history-v2';\nconst history_data_form = `${history_data_name}-formdata`;\nconst form = reactive({\n    name: '',\n    age: '',\n    sex: 'Mädchen',\n    hair: 'Kurz',\n    animal: 'Löwe',\n    color: 'black',\n    haircolor: 'blond',\n    hobby: 'Apps programmieren',\n    settings: {\n        charakter: 'Ritter',\n        set: 'Schloss im Wald',\n        plot: 'Abenteuer',\n        plot_description: ''\n    }\n});\n\n\n\nonMounted(() => {\n    const savedForm = JSON.parse(localStorage.getItem(history_data_form));\n    if (savedForm != null) {\n        start_screen.value = false;\n    }\n    if (savedForm) {\n        for (const [key, value] of Object.entries(savedForm)) {\n            form[key] = value;\n        }\n    }\n    showHistory();\n});\n\nconst getTale = () => {\n    generateFairyTale();\n\n}\n\nconst getStartForm = (res) => {\n    for (const [key, value] of Object.entries(res)) {\n        form[key] = value;\n    }\n}\n\nfunction generateFairyTale() {\n    got_story.value = false;\n    isLoading.value = true;\n    disabled.value = true;\n    const payload = {\n        name: form.name,\n        age: form.age,\n        sex: form.sex,\n        hobby: form.hobby,\n        hair: `${form.haircolor} ${form.hair}`,\n        settings: {\n            charakter: form.settings.charakter,\n            set: form.settings.set,\n            plot: form.settings.plot,\n            plot_description: form.settings.plot_description\n        }\n    };\n\n    let url;\n    if (process.env.NODE_ENV === 'development') {\n        url = 'http://localhost:5000';\n    } else {\n        url = 'https://twapi1-nr2qe7lb3q-oa.a.run.app';\n    }\n\n    axios.post(`${url}/generate-fairy-tale`, payload)\n        .then(response => {\n\n            saveFormToLocalStorage();\n\n            const json_data = response.data;\n            \n            if (json_data.text != undefined && json_data.text.length > 1) {\n                story_content.value = json_data.text;\n                story_title.value = json_data.title;\n                story_image.value = json_data.image;\n                isLoading.value = false;\n                disabled.value = false;\n\n                saveToLocalStorage(json_data);\n                showHistory();\n                saveFormToLocalStorage();\n            } else {\n                alert('Der Märchenonkel konnte das Märchen leider nicht ganz zu Ende schreiben, bitte versuche es erneut');\n                location.reload();\n            }\n        })\n        .catch(error => {\n            console.log(error);\n        });\n}\n\nfunction saveToLocalStorage(obj) {\n    const new_id = Math.random().toString(36).substr(2, 9);\n    let existingData = JSON.parse(localStorage.getItem(history_data_name) || '[]');\n    const new_obj = { \"id\": new_id, \"date\": new Date().toISOString(), ...obj };\n    existingData.push(new_obj);\n    localStorage.setItem(history_data_name, JSON.stringify(existingData));\n}\n\nfunction showHistory() {\n    show_history.value = true;\n    const historyData = JSON.parse(localStorage.getItem(history_data_name));\n    if (historyData != null) {\n        historyData.sort((a, b) => new Date(b.date) - new Date(a.date));\n        history.value = historyData;\n    }\n}\n\nfunction deleteHistory() {\n    localStorage.removeItem(history_data_name);\n    localStorage.removeItem(history_data_form);\n    showHistory();\n    location.reload();\n}\n\nconst emitFormData = (res) =>{\n    for (const [key, value] of Object.entries(res)) {\n        form[key] = value;\n    }\n}\n\nfunction formatDate(dateString) {\n    const date = new Date(dateString);\n    const options = {\n        year: 'numeric',\n        month: 'long',\n        day: 'numeric',\n        hour: 'numeric',\n        minute: 'numeric',\n        hour12: false\n    };\n    return date.toLocaleTimeString('de-DE', options);\n}\n\nfunction saveFormToLocalStorage() {\n    localStorage.setItem(history_data_form, JSON.stringify(form));\n}\n\n</script>","import script from \"./Main-App.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./Main-App.vue?vue&type=script&setup=true&lang=js\"\n\nconst __exports__ = script;\n\nexport default __exports__","import script from \"./App.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./App.vue?vue&type=script&setup=true&lang=js\"\n\nconst __exports__ = script;\n\nexport default __exports__","import { createApp } from 'vue'\nimport App from './App.vue'\nimport '@/assets/style.css'\n//import VueMeta from 'vue-meta'\n\nconst Vue = createApp(App);\n\n\n\n//Vue.use(VueMeta)\nVue.mount('#app')\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n// expose the modules object (__webpack_modules__)\n__webpack_require__.m = __webpack_modules__;\n\n","var deferred = [];\n__webpack_require__.O = function(result, chunkIds, fn, priority) {\n\tif(chunkIds) {\n\t\tpriority = priority || 0;\n\t\tfor(var i = deferred.length; i > 0 && deferred[i - 1][2] > priority; i--) deferred[i] = deferred[i - 1];\n\t\tdeferred[i] = [chunkIds, fn, priority];\n\t\treturn;\n\t}\n\tvar notFulfilled = Infinity;\n\tfor (var i = 0; i < deferred.length; i++) {\n\t\tvar chunkIds = deferred[i][0];\n\t\tvar fn = deferred[i][1];\n\t\tvar priority = deferred[i][2];\n\t\tvar fulfilled = true;\n\t\tfor (var j = 0; j < chunkIds.length; j++) {\n\t\t\tif ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__webpack_require__.O).every(function(key) { return __webpack_require__.O[key](chunkIds[j]); })) {\n\t\t\t\tchunkIds.splice(j--, 1);\n\t\t\t} else {\n\t\t\t\tfulfilled = false;\n\t\t\t\tif(priority < notFulfilled) notFulfilled = priority;\n\t\t\t}\n\t\t}\n\t\tif(fulfilled) {\n\t\t\tdeferred.splice(i--, 1)\n\t\t\tvar r = fn();\n\t\t\tif (r !== undefined) result = r;\n\t\t}\n\t}\n\treturn result;\n};","// getDefaultExport function for compatibility with non-harmony modules\n__webpack_require__.n = function(module) {\n\tvar getter = module && module.__esModule ?\n\t\tfunction() { return module['default']; } :\n\t\tfunction() { return module; };\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};","// define getter functions for harmony exports\n__webpack_require__.d = function(exports, definition) {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.g = (function() {\n\tif (typeof globalThis === 'object') return globalThis;\n\ttry {\n\t\treturn this || new Function('return this')();\n\t} catch (e) {\n\t\tif (typeof window === 'object') return window;\n\t}\n})();","__webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }","// define __esModule on exports\n__webpack_require__.r = function(exports) {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","__webpack_require__.p = \"/\";","// no baseURI\n\n// object to store loaded and loading chunks\n// undefined = chunk not loaded, null = chunk preloaded/prefetched\n// [resolve, reject, Promise] = chunk loading, 0 = chunk loaded\nvar installedChunks = {\n\t826: 0\n};\n\n// no chunk on demand loading\n\n// no prefetching\n\n// no preloaded\n\n// no HMR\n\n// no HMR manifest\n\n__webpack_require__.O.j = function(chunkId) { return installedChunks[chunkId] === 0; };\n\n// install a JSONP callback for chunk loading\nvar webpackJsonpCallback = function(parentChunkLoadingFunction, data) {\n\tvar chunkIds = data[0];\n\tvar moreModules = data[1];\n\tvar runtime = data[2];\n\t// add \"moreModules\" to the modules object,\n\t// then flag all \"chunkIds\" as loaded and fire callback\n\tvar moduleId, chunkId, i = 0;\n\tif(chunkIds.some(function(id) { return installedChunks[id] !== 0; })) {\n\t\tfor(moduleId in moreModules) {\n\t\t\tif(__webpack_require__.o(moreModules, moduleId)) {\n\t\t\t\t__webpack_require__.m[moduleId] = moreModules[moduleId];\n\t\t\t}\n\t\t}\n\t\tif(runtime) var result = runtime(__webpack_require__);\n\t}\n\tif(parentChunkLoadingFunction) parentChunkLoadingFunction(data);\n\tfor(;i < chunkIds.length; i++) {\n\t\tchunkId = chunkIds[i];\n\t\tif(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {\n\t\t\tinstalledChunks[chunkId][0]();\n\t\t}\n\t\tinstalledChunks[chunkId] = 0;\n\t}\n\treturn __webpack_require__.O(result);\n}\n\nvar chunkLoadingGlobal = self[\"webpackChunkfairytalegen\"] = self[\"webpackChunkfairytalegen\"] || [];\nchunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));\nchunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));","// startup\n// Load entry module and return exports\n// This entry module depends on other loaded chunks and execution need to be delayed\nvar __webpack_exports__ = __webpack_require__.O(undefined, [998], function() { return __webpack_require__(1896); })\n__webpack_exports__ = __webpack_require__.O(__webpack_exports__);\n"],"names":["form","reactive","name","age","sex","hair","animal","haircolor","disabled","ref","starter","open","watch","res","length","value","emit","button_msg","computed","__exports__","handlungen","color","hobby","settings","charakter","set","plot","plot_description","props","oldVal","formdata","old","newVal","key","Object","entries","filter","h","map","description","getTale","deleteHistory","user","email","imageUrl","userNavigation","href","got_story","isLoading","story_content","story_title","story_image","start_screen","show_history","history","history_data_name","history_data_form","onMounted","savedForm","JSON","parse","localStorage","getItem","showHistory","generateFairyTale","getStartForm","payload","url","axios","then","response","saveFormToLocalStorage","json_data","data","undefined","text","title","image","saveToLocalStorage","alert","location","reload","catch","error","console","log","obj","new_id","Math","random","toString","substr","existingData","new_obj","Date","toISOString","push","setItem","stringify","historyData","sort","a","b","date","removeItem","emitFormData","formatDate","dateString","options","year","month","day","hour","minute","hour12","toLocaleTimeString","Vue","createApp","App","mount","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","exports","module","__webpack_modules__","m","deferred","O","result","chunkIds","fn","priority","notFulfilled","Infinity","i","fulfilled","j","keys","every","splice","r","n","getter","__esModule","d","definition","o","defineProperty","enumerable","get","g","globalThis","this","Function","e","window","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","p","installedChunks","chunkId","webpackJsonpCallback","parentChunkLoadingFunction","moreModules","runtime","some","id","chunkLoadingGlobal","self","forEach","bind","__webpack_exports__"],"sourceRoot":""}