{"id":468,"date":"2024-02-01T08:50:48","date_gmt":"2024-02-01T08:50:48","guid":{"rendered":"https:\/\/www.joas-it.de\/?page_id=468"},"modified":"2025-09-16T16:49:12","modified_gmt":"2025-09-16T14:49:12","slug":"home","status":"publish","type":"page","link":"https:\/\/www.joas-it.de\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"468\" class=\"elementor elementor-468\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-4ec2053 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"4ec2053\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-9adac53\" data-id=\"9adac53\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-965f936 elementor-widget elementor-widget-kerge-home-page-first\" data-id=\"965f936\" data-element_type=\"widget\" data-widget_type=\"kerge-home-page-first.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n\t\t<div id=\"hp-first-6a0b5598ba5e8\" class=\"start-page elementor-start-page\">\r\n\t\t\t<div class=\"section-inner vcentered home-page-first-style\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"mask\"><\/div>\r\n\t            <div class=\"row\">\r\n\t              \t<div class=\"col-sm-12 col-md-12 col-lg-12\">\r\n\t\t                <div class=\"title-block\">\r\n\t\t\t                <h2>Youssef Abu-Joas<\/h2>\r\n\t\t\t                <div id=\"text-slider-6a0b5598ba60c\" class=\"owl-carousel text-rotation\">   \r\n\t\t\t                \t\t\t\t\t                    <div class=\"sp-subtitle\">Fachinformatiker f\u00fcr Systemintegration<\/div>\r\n\t\t\t\t\t\t\t\t    \r\n\t\t\t                <\/div>\r\n\t\t                <\/div>\r\n\t              \t<\/div>\r\n\t            <\/div>\r\n\t        <\/div>\r\n\t    <\/div>\r\n\r\n        \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-d051973 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"d051973\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-cbf6fc9\" data-id=\"cbf6fc9\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e7e396d elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"e7e396d\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- AI Agent Floating Chat -->\r\n<div id=\"ai-agent\" style=\"position: fixed; bottom: 20px; right: 20px; width: 60px; height: 60px; border-radius: 50%; background-color: #4CAF50; cursor: pointer; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 14px; z-index: 9999;\">\r\n  AI\r\n<\/div>\r\n\r\n<!-- Chat Window (Hidden by default) -->\r\n<div id=\"chat-container\" style=\"display:none; position: fixed; bottom: 90px; right: 20px; width: 350px; max-width: 95%; border: 1px solid #ccc; border-radius: 10px; padding: 10px; background-color: #f9f9f9; color: black; font-family: Arial, sans-serif; z-index: 9999;\">\r\n  <div id=\"chat-box\" style=\"height: 250px; overflow-y: auto; border-bottom: 1px solid #ccc; padding-bottom: 5px; margin-bottom: 5px;\"><\/div>\r\n  <div style=\"display: flex;\">\r\n    <input type=\"text\" id=\"question\" placeholder=\"Frag mich etwas...\" style=\"flex: 1; padding: 6px; border-radius: 5px; border: 1px solid #ccc; color: black;\">\r\n    <button id=\"sendBtn\" style=\"margin-left: 5px; padding: 6px 12px; border-radius: 5px; border: none; background-color: #4CAF50; color: white; cursor: pointer;\">Senden<\/button>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\nconst aiAgent = document.getElementById(\"ai-agent\");\r\nconst chatContainer = document.getElementById(\"chat-container\");\r\nconst chatBox = document.getElementById(\"chat-box\");\r\nconst input = document.getElementById(\"question\");\r\nconst sendBtn = document.getElementById(\"sendBtn\");\r\n\r\n\/\/ \u0641\u062a\u062d \u0648\u063a\u0644\u0642 \u0627\u0644\u0646\u0627\u0641\u0630\u0629 \u0639\u0646\u062f \u0627\u0644\u0636\u063a\u0637 \u0639\u0644\u0649 AI Agent\r\naiAgent.addEventListener(\"click\", () => {\r\n  chatContainer.style.display = chatContainer.style.display === \"none\" ? \"block\" : \"none\";\r\n  if (chatContainer.style.display === \"block\" && chatBox.children.length === 0) {\r\n    \/\/ \u0631\u0633\u0627\u0644\u0629 \u0627\u0644\u062a\u0631\u062d\u064a\u0628 \u0639\u0646\u062f \u0641\u062a\u062d \u0627\u0644\u062f\u0631\u062f\u0634\u0629 \u0644\u0623\u0648\u0644 \u0645\u0631\u0629\r\n    appendMessage(\"\", \"Willkommen! Dieses Modell erm\u00f6glicht es Ihnen, Informationen \u00fcber die Qualifikationen von Herr Youssef Abu-Joas anzufragen und einen Termin zu vereinbaren.\", \"left\", true);\r\n  }\r\n});\r\n\r\n\/\/ \u0625\u0631\u0633\u0627\u0644 \u0627\u0644\u0631\u0633\u0627\u0644\u0629\r\nsendBtn.addEventListener(\"click\", sendQuestion);\r\ninput.addEventListener(\"keypress\", e => { if(e.key === \"Enter\") sendQuestion(); });\r\n\r\nasync function sendQuestion() {\r\n    const question = input.value.trim();\r\n    if (!question) return;\r\n\r\n    appendMessage(\"Du\", question, \"right\");\r\n    input.value = \"\";\r\n\r\n    const botMsg = appendMessage(\"\", \"...\", \"left\", true);\r\n\r\n    try {\r\n        const res = await fetch(\"https:\/\/n8n.joas-it.de\/webhook\/chatbot\", {\r\n            method: \"POST\",\r\n            headers: { \"Content-Type\": \"application\/json\" },\r\n            body: JSON.stringify({ question })\r\n        });\r\n\r\n        if (!res.ok) throw new Error(`Fehler bei der Anfrage: ${res.status}`);\r\n\r\n        const data = await res.json();\r\n        botMsg.innerHTML = data.response || \"Keine Antwort verf\u00fcgbar.\";\r\n        chatBox.scrollTop = chatBox.scrollHeight;\r\n    } catch (err) {\r\n        botMsg.innerHTML = `Fehler: ${err.message}`;\r\n        chatBox.scrollTop = chatBox.scrollHeight;\r\n        console.error(err);\r\n    }\r\n}\r\n\r\nfunction appendMessage(sender, text, align, isBotImage = false) {\r\n    const msgWrapper = document.createElement(\"div\");\r\n    msgWrapper.style.display = \"flex\";\r\n    msgWrapper.style.margin = \"4px 0\";\r\n    msgWrapper.style.justifyContent = align === \"right\" ? \"flex-end\" : \"flex-start\";\r\n    msgWrapper.style.alignItems = \"flex-start\";\r\n\r\n    if (isBotImage) {\r\n        const img = document.createElement(\"img\");\r\n        img.src = \"https:\/\/www.joas-it.de\/wp-content\/uploads\/2025\/09\/ai_logo.png\";\r\n        img.alt = \"AI\";\r\n        img.style.width = \"30px\";\r\n        img.style.height = \"30px\";\r\n        img.style.borderRadius = \"50%\";\r\n        img.style.marginRight = \"5px\";\r\n        msgWrapper.appendChild(img);\r\n    }\r\n\r\n    const msg = document.createElement(\"div\");\r\n    msg.style.backgroundColor = align === \"right\" ? \"#DCF8C6\" : \"#E5E5EA\";\r\n    msg.style.color = \"black\";\r\n    msg.style.padding = \"6px 10px\";\r\n    msg.style.borderRadius = \"10px\";\r\n    msg.style.maxWidth = \"70%\";\r\n    msg.innerHTML = sender ? `<strong>${sender}:<\/strong> ${text}` : text;\r\n    msgWrapper.appendChild(msg);\r\n\r\n    chatBox.appendChild(msgWrapper);\r\n    chatBox.scrollTop = chatBox.scrollHeight;\r\n    return msg;\r\n}\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-a2e70f7\" data-id=\"a2e70f7\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Youssef Abu-Joas Fachinformatiker f\u00fcr Systemintegration AI Senden<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-468","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.joas-it.de\/index.php?rest_route=\/wp\/v2\/pages\/468","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.joas-it.de\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.joas-it.de\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.joas-it.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.joas-it.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=468"}],"version-history":[{"count":79,"href":"https:\/\/www.joas-it.de\/index.php?rest_route=\/wp\/v2\/pages\/468\/revisions"}],"predecessor-version":[{"id":815,"href":"https:\/\/www.joas-it.de\/index.php?rest_route=\/wp\/v2\/pages\/468\/revisions\/815"}],"wp:attachment":[{"href":"https:\/\/www.joas-it.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=468"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}