{"id":3116,"date":"2025-09-15T10:17:58","date_gmt":"2025-09-15T10:17:58","guid":{"rendered":"https:\/\/crehistor.com\/?page_id=3116"},"modified":"2025-09-15T13:41:44","modified_gmt":"2025-09-15T13:41:44","slug":"votre-histoire","status":"publish","type":"page","link":"https:\/\/crehistor.com\/de\/votre-histoire\/","title":{"rendered":"Ihre Geschichte"},"content":{"rendered":"<div class=\"narractive-container\">\n        <!-- Language Selector + History -->\n        <div class=\"narr-lang-selector\">\n            <span class=\"narr-lang-label\">KI-Generator<\/span>\n            <div class=\"narr-lang-right\">\n                <button class=\"narr-history-btn\" id=\"narr-history-toggle\">\n                    \ud83d\udcda Verlauf                <\/button>\n                <div class=\"narr-lang-dropdown\">\n                    <select id=\"narr-lang-select\" onchange=\"window.location.href=window.location.pathname+'?lang='+this.value\">\n                        <option value=\"fr\" >\ud83c\uddeb\ud83c\uddf7 Fran\u00e7ais<\/option>\n                        <option value=\"en\" >\ud83c\uddec\ud83c\udde7 English<\/option>\n                        <option value=\"es\" >\ud83c\uddea\ud83c\uddf8 Espa\u00f1ol<\/option>\n                        <option value=\"de\" selected>\ud83c\udde9\ud83c\uddea Deutsch<\/option>\n                        <option value=\"it\" >\ud83c\uddee\ud83c\uddf9 Italiano<\/option>\n                    <\/select>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Header -->\n        <div class=\"narr-header\">\n            <h1 class=\"narr-title\">Geschichtenschmiede<\/h1>\n            <p class=\"narr-subtitle\">Erschaffe einzigartige Erz\u00e4hlungen und lass deine Fantasie lebendig werden<\/p>\n        <\/div>\n\n        <!-- Progress Steps -->\n        <div class=\"narr-steps\">\n            <div class=\"narr-step active\" data-step=\"1\">\n                <span class=\"step-number\">1<\/span>\n                <span class=\"step-label\">Erstellung<\/span>\n            <\/div>\n            <div class=\"narr-step\" data-step=\"2\">\n                <span class=\"step-number\">2<\/span>\n                <span class=\"step-label\">Geschichte<\/span>\n            <\/div>\n            <div class=\"narr-step\" data-step=\"3\">\n                <span class=\"step-number\">3<\/span>\n                <span class=\"step-label\">Export<\/span>\n            <\/div>\n        <\/div>\n\n        <!-- Main Card -->\n        <div class=\"narr-card\" id=\"narr-form-card\">\n            <h2 class=\"narr-card-title\">\u2726 Skizziere deine Geschichte \u2726<\/h2>\n            <p class=\"narr-card-hint\">F\u00fclle die gew\u00fcnschten Felder aus oder lass die KI entscheiden...<\/p>\n\n            <form id=\"narr-form\" action=\"\">\n                <input type=\"hidden\" name=\"lang\" value=\"de\">\n\n                <!-- Genre Select -->\n                <div class=\"narr-field\">\n                    <label>Genre \/ Ton<\/label>\n                    <select name=\"tone\" class=\"narr-select\">\n                        <option value=\"\">\u2014 KI entscheiden lassen \u2014<\/option>\n                        <option value=\"Aventure\">Abenteuer<\/option>\n                        <option value=\"Horreur\">Horror<\/option>\n                        <option value=\"Policier\">Krimi<\/option>\n                        <option value=\"Sci-Fi\">Science-Fiction<\/option>\n                        <option value=\"Humour\">Humor<\/option>\n                        <option value=\"Enfant\">Kinder<\/option>\n                        <option value=\"Fantasy\">Fantasy<\/option>\n                        <option value=\"Romance\">Romanze<\/option>\n                    <\/select>\n                <\/div>\n\n                <!-- Title -->\n                <div class=\"narr-field\">\n                    <label>Titel der Geschichte<\/label>\n                    <input type=\"text\" name=\"title\" class=\"narr-input\" placeholder=\"Bsp.: Der vergessene Schatz\">\n                <\/div>\n\n                <!-- Author -->\n                <div class=\"narr-field\">\n                    <label>Name des Autors<\/label>\n                    <input type=\"text\" name=\"author\" class=\"narr-input\" placeholder=\"Ex: Jules Martin\">\n                <\/div>\n\n                <!-- Pitch -->\n                <div class=\"narr-field\">\n                    <label>Pitch (Ausgangsidee)<\/label>\n                    <textarea name=\"pitch\" class=\"narr-textarea\" rows=\"3\" placeholder=\"Ex: Un aventurier d\u00e9couvre une carte myst\u00e9rieuse...\"><\/textarea>\n                <\/div>\n\n                <!-- Mode -->\n                <div class=\"narr-field\">\n                    <label>Erz\u00e4hlmodus<\/label>\n                    <div class=\"narr-radio-group\">\n                        <label class=\"narr-radio\">\n                            <input type=\"radio\" name=\"mode\" value=\"interactive\" checked>\n                            <span class=\"radio-custom\"><\/span>\n                            Interaktiv (Mehrfachauswahl)                        <\/label>\n                        <label class=\"narr-radio\">\n                            <input type=\"radio\" name=\"mode\" value=\"linear\">\n                            <span class=\"radio-custom\"><\/span>\n                            Linear (vollst\u00e4ndige Geschichte)                        <\/label>\n                    <\/div>\n                <\/div>\n\n                <!-- Submit Button -->\n                <div class=\"narr-submit-area\">\n                                            <div id=\"narr-login-cta\" class=\"narr-login-cta\">\n                            <a class=\"xoo-el-action-sc xoo-el-login-tgr\" >Login<\/a>                        <\/div>\n                                    <\/div>\n            <input type=\"hidden\" name=\"trp-form-language\" value=\"de\"\/><\/form>\n        <\/div>\n\n        <!-- Loading State -->\n        <div class=\"narr-card narr-loading-card hidden\" id=\"narr-loading\">\n            <div class=\"narr-loading-content\">\n                <div class=\"narr-spinner\"><\/div>\n                <h3>Schmieden l\u00e4uft...<\/h3>\n                <p class=\"narr-tip\">\ud83d\udca1 Tipp: Je mehr Details du angibst, desto reicher wird die Geschichte!<\/p>\n            <\/div>\n        <\/div>\n\n        <!-- Result Card -->\n        <div class=\"narr-card narr-result-card hidden\" id=\"narr-result\">\n            <div class=\"narr-result-header\">\n                <h2 id=\"narr-result-title\"><\/h2>\n            <\/div>\n            <div class=\"narr-result-content\" id=\"narr-result-content\">\n                <!-- Story content will be inserted here -->\n            <\/div>\n            <div class=\"narr-result-actions\" id=\"narr-result-actions\">\n                <!-- Action buttons will be inserted here -->\n            <\/div>\n        <\/div>\n\n        <!-- History Modal -->\n        <div class=\"narr-modal hidden\" id=\"narr-history-modal\">\n            <div class=\"narr-modal-content\">\n                <div class=\"narr-modal-header\">\n                    <h3>Dein Verlauf<\/h3>\n                    <button class=\"narr-modal-close\" id=\"narr-history-close\">\u00d7<\/button>\n                <\/div>\n                <div class=\"narr-modal-body\" id=\"narr-history-list\">\n                    <p class=\"narr-empty-history\">Keine Geschichten gespeichert<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Footer -->\n        <div class=\"narr-footer\">\n            Powered by AI \u2014 <a href=\"https:\/\/crehistor.com\/de\/\">Crehistor.com<\/a>\n        <\/div>\n    <\/div>\n\n    <script>\n        (() => {\n            const LANG = {\"t\":\"Geschichtenschmiede\",\"subtitle\":\"Erschaffe einzigartige Erz\\u00e4hlungen und lass deine Fantasie lebendig werden\",\"h\":\"F\\u00fclle die gew\\u00fcnschten Felder aus oder lass die KI entscheiden...\",\"tt\":\"Titel der Geschichte\",\"author\":\"Name des Autors\",\"pp\":\"Pitch (Ausgangsidee)\",\"gg\":\"Genre \\\/ Ton\",\"mm\":\"Erz\\u00e4hlmodus\",\"ia\":\"Interaktiv (Mehrfachauswahl)\",\"ln\":\"Linear (vollst\\u00e4ndige Geschichte)\",\"gn\":\"\\u2726 GESCHICHTE SCHMIEDEN \\u2726\",\"pdf\":\"PDF herunterladen\",\"nw\":\"\\u2726 Neue Geschichte\",\"choose\":\"Sprache w\\u00e4hlen:\",\"step1\":\"Erstellung\",\"step2\":\"Geschichte\",\"step3\":\"Export\",\"generating\":\"Schmieden l\\u00e4uft...\",\"tip\":\"Tipp: Je mehr Details du angibst, desto reicher wird die Geschichte!\",\"history\":\"Verlauf\",\"print\":\"PDF drucken\",\"appearance\":\"Erscheinung\",\"character\":\"Charaktere\",\"plot\":\"Handlung\",\"genre_adventure\":\"Abenteuer\",\"genre_horror\":\"Horror\",\"genre_detective\":\"Krimi\",\"genre_scifi\":\"Science-Fiction\",\"genre_humor\":\"Humor\",\"genre_children\":\"Kinder\",\"genre_fantasy\":\"Fantasy\",\"genre_romance\":\"Romanze\",\"let_ai\":\"\\u2014 KI entscheiden lassen \\u2014\",\"login_required\":\"Anmeldung erforderlich\",\"login_msg\":\"Bitte melde dich an, um deine Geschichte zu schmieden.\",\"no_credits\":\"Unzureichende Credits\",\"buy_credits\":\"Credits kaufen\",\"credits_msg\":\"Du hast keine Credits mehr, um eine Geschichte zu generieren.\",\"generator_title\":\"KI-Generator\",\"sketch_title\":\"\\u2726 Skizziere deine Geschichte \\u2726\",\"new_story\":\"\\u2726 NEUE GESCHICHTE\",\"credits_label\":\"Credits\",\"no_history\":\"Keine Geschichten gespeichert\",\"your_history\":\"Dein Verlauf\"};\n            const AJAX_URL = 'https:\/\/crehistor.com\/wp-admin\/admin-ajax.php';\n            const NONCE = '8024d18be2';\n            const SHOP_URL = 'https:\/\/crehistor.com\/boutique\/';\n            const LOGIN_URL = 'https:\/\/crehistor.com\/wp-login.php';\n\n            const form = document.getElementById('narr-form');\n            const formCard = document.getElementById('narr-form-card');\n            const loadingCard = document.getElementById('narr-loading');\n            const resultCard = document.getElementById('narr-result');\n            const resultTitle = document.getElementById('narr-result-title');\n            const resultContent = document.getElementById('narr-result-content');\n            const resultActions = document.getElementById('narr-result-actions');\n            const steps = document.querySelectorAll('.narr-step');\n\n            \/\/ History\n            const historyBtn = document.getElementById('narr-history-toggle');\n            const historyModal = document.getElementById('narr-history-modal');\n            const historyClose = document.getElementById('narr-history-close');\n            const historyList = document.getElementById('narr-history-list');\n\n            historyBtn?.addEventListener('click', () => {\n                historyModal.classList.remove('hidden');\n                loadHistory();\n            });\n            historyClose?.addEventListener('click', () => historyModal.classList.add('hidden'));\n            historyModal?.addEventListener('click', (e) => {\n                if (e.target === historyModal) historyModal.classList.add('hidden');\n            });\n\n            function loadHistory() {\n                const stories = JSON.parse(localStorage.getItem('narractive_history') || '[]');\n                if (stories.length === 0) {\n                    historyList.innerHTML = `<p class=\"narr-empty-history\">${LANG.no_history}<\/p>`;\n                    return;\n                }\n                historyList.innerHTML = stories.map((s, i) => `\n                <div class=\"narr-history-item\" data-index=\"${i}\">\n                    <span class=\"history-title\">${s.title || 'Untitled'}<\/span>\n                    <span class=\"history-date\">${new Date(s.date).toLocaleDateString()}<\/span>\n                <\/div>\n            `).join('');\n            }\n\n            function saveToHistory(data) {\n                const stories = JSON.parse(localStorage.getItem('narractive_history') || '[]');\n                stories.unshift({\n                    title: data.title,\n                    date: new Date().toISOString(),\n                    data: data\n                });\n                if (stories.length > 10) stories.pop();\n                localStorage.setItem('narractive_history', JSON.stringify(stories));\n            }\n\n            function setStep(step) {\n                steps.forEach((s, i) => {\n                    s.classList.toggle('active', i < step);\n                    s.classList.toggle('current', i === step - 1);\n                });\n            }\n\n            function showLoading() {\n                formCard.classList.add('hidden');\n                loadingCard.classList.remove('hidden');\n                resultCard.classList.add('hidden');\n                setStep(2);\n            }\n\n            function showResult(title) {\n                formCard.classList.add('hidden');\n                loadingCard.classList.add('hidden');\n                resultCard.classList.remove('hidden');\n                resultTitle.textContent = title;\n                setStep(3);\n            }\n\n            function showForm() {\n                formCard.classList.remove('hidden');\n                loadingCard.classList.add('hidden');\n                resultCard.classList.add('hidden');\n                setStep(1);\n            }\n\n            function showError(message) {\n                resultContent.innerHTML = `<div class=\"narr-error\"><p>${message}<\/p><\/div>`;\n                resultActions.innerHTML = `<button class=\"narr-btn narr-btn-secondary\" onclick=\"location.reload()\">${LANG.nw}<\/button>`;\n                showResult('Erreur');\n            }\n\n            form?.addEventListener('submit', async (e) => {\n                e.preventDefault();\n                const genBtn = document.getElementById('narr-generate-btn');\n                if (genBtn) genBtn.disabled = true;\n\n                showLoading();\n\n                const formDataObj = Object.fromEntries(new FormData(form).entries());\n                \n                \/\/ Build FormData for WordPress AJAX\n                const ajaxData = new FormData();\n                ajaxData.append('action', 'narractive_generate');\n                ajaxData.append('nonce', NONCE);\n                for (const [key, value] of Object.entries(formDataObj)) {\n                    ajaxData.append(key, value);\n                }\n\n                try {\n                    const res = await fetch(AJAX_URL, {\n                        method: 'POST',\n                        credentials: 'same-origin',\n                        body: ajaxData\n                    });\n                    const response = await res.json();\n\n                    if (!response.success) {\n                        const data = response.data || {};\n                        if (data.code === 'not_logged') {\n                            showError(`${LANG.login_msg} <a href=\"${LOGIN_URL}\">Connexion<\/a>`);\n                            return;\n                        }\n                        if (data.code === 'no_credits') {\n                            showError(`${LANG.credits_msg} <a href=\"${SHOP_URL}\">${LANG.buy_credits}<\/a>`);\n                            return;\n                        }\n                        showError(data.message || 'Erreur inconnue');\n                        return;\n                    }\n\n                    const data = response.data;\n                    saveToHistory(data);\n\n                    if (data.mode === 'linear') {\n                        renderLinear(data, formDataObj);\n                    } else {\n                        renderInteractive(data, formDataObj);\n                    }\n\n                } catch (err) {\n                    console.error('Error:', err);\n                    showError('Erreur r\u00e9seau ou serveur.');\n                    if (genBtn) genBtn.disabled = false;\n                }\n            });\n\n            function renderLinear(data, formData) {\n                const paragraphs = data.text.split('\\n').filter(p => p.trim());\n                resultContent.innerHTML = paragraphs.map(p => `<p>${p}<\/p>`).join('');\n                resultActions.innerHTML = `\n                <button class=\"narr-btn narr-btn-primary\" id=\"pdfLinear\">\ud83d\udda8\ufe0f ${LANG.pdf}<\/button>\n                <button class=\"narr-btn narr-btn-secondary\" onclick=\"location.reload()\">${LANG.nw}<\/button>\n            `;\n                document.getElementById('pdfLinear').onclick = () => makePDF({\n                    title: data.title,\n                    author: formData.author,\n                    tone: data.tone,\n                    pitch: formData.pitch,\n                    text: data.text\n                });\n                showResult(data.title);\n            }\n\n            function renderInteractive(data, formData) {\n                let path = [];\n                let cur = data.root;\n\n                function render() {\n                    const n = data.nodes[cur];\n                    path.push(n.text);\n\n                    let html = path.map(t => `<p class=\"narr-story-para\">${t}<\/p>`).join('');\n\n                    if (!n.choices || !n.choices.length) {\n                        resultContent.innerHTML = html;\n                        resultActions.innerHTML = `\n                        <button class=\"narr-btn narr-btn-primary\" id=\"pdfInteractive\">\ud83d\udda8\ufe0f ${LANG.pdf}<\/button>\n                        <button class=\"narr-btn narr-btn-secondary\" onclick=\"location.reload()\">${LANG.nw}<\/button>\n                    `;\n                        document.getElementById('pdfInteractive').onclick = () => makePDF({\n                            title: data.title,\n                            author: formData.author,\n                            tone: data.tone,\n                            pitch: formData.pitch,\n                            sections: path\n                        });\n                        showResult(data.title);\n                        return;\n                    }\n\n                    html += '<div class=\"narr-choices\">';\n                    n.choices.forEach(c => {\n                        html += `<button class=\"narr-choice-btn\" data-target=\"${c.target}\">${c.label}<\/button>`;\n                    });\n                    html += '<\/div>';\n\n                    resultContent.innerHTML = html;\n                    resultActions.innerHTML = '';\n                    showResult(data.title);\n\n                    resultContent.querySelectorAll('.narr-choice-btn').forEach(btn => {\n                        btn.onclick = () => {\n                            path.push('\u2192 ' + btn.textContent);\n                            cur = btn.dataset.target;\n                            render();\n                        };\n                    });\n                }\n\n                render();\n            }\n\n            async function makePDF(content) {\n                resultActions.innerHTML = '<p class=\"narr-pdf-loading\">\ud83d\udcc4 G\u00e9n\u00e9ration du PDF en cours... (peut prendre jusqu\\'\u00e0 30 secondes)<\/p>';\n\n                try {\n                    \/\/ Build FormData for WordPress AJAX\n                    const ajaxData = new FormData();\n                    ajaxData.append('action', 'narractive_pdf');\n                    ajaxData.append('title', content.title || '');\n                    ajaxData.append('author', content.author || '');\n                    ajaxData.append('tone', content.tone || '');\n                    ajaxData.append('pitch', content.pitch || '');\n                    if (content.text) {\n                        ajaxData.append('text', content.text);\n                    }\n                    if (content.sections) {\n                        content.sections.forEach((s, i) => {\n                            ajaxData.append(`sections[${i}]`, s);\n                        });\n                    }\n\n                    const res = await fetch(AJAX_URL, {\n                        method: 'POST',\n                        credentials: 'same-origin',\n                        body: ajaxData\n                    });\n                    \n                    const response = await res.json();\n\n                    if (response.success && response.data.url) {\n                        resultActions.innerHTML = `\n                        <a href=\"${response.data.url}\" target=\"_blank\" class=\"narr-btn narr-btn-primary\">\ud83d\udce5 T\u00e9l\u00e9charger votre PDF<\/a>\n                        <button class=\"narr-btn narr-btn-secondary\" onclick=\"location.reload()\">${LANG.nw}<\/button>\n                    `;\n                        window.open(response.data.url, '_blank');\n                    } else {\n                        const errorMsg = response.data?.message || 'G\u00e9n\u00e9ration du PDF \u00e9chou\u00e9e';\n                        resultActions.innerHTML = `\n                        <p class=\"narr-error\">Erreur: ${errorMsg}<\/p>\n                        <button class=\"narr-btn narr-btn-secondary\" onclick=\"location.reload()\">${LANG.nw}<\/button>\n                    `;\n                    }\n                } catch (err) {\n                    console.error('PDF generation error:', err);\n                    resultActions.innerHTML = `\n                    <p class=\"narr-error\">Erreur: ${err.message || 'Erreur r\u00e9seau'}<\/p>\n                    <button class=\"narr-btn narr-btn-secondary\" onclick=\"location.reload()\">${LANG.nw}<\/button>\n                `;\n                }\n            }\n\n        })();\n    <\/script>\n\n\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-3116","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/crehistor.com\/de\/wp-json\/wp\/v2\/pages\/3116","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/crehistor.com\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/crehistor.com\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/crehistor.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/crehistor.com\/de\/wp-json\/wp\/v2\/comments?post=3116"}],"version-history":[{"count":4,"href":"https:\/\/crehistor.com\/de\/wp-json\/wp\/v2\/pages\/3116\/revisions"}],"predecessor-version":[{"id":3122,"href":"https:\/\/crehistor.com\/de\/wp-json\/wp\/v2\/pages\/3116\/revisions\/3122"}],"wp:attachment":[{"href":"https:\/\/crehistor.com\/de\/wp-json\/wp\/v2\/media?parent=3116"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}