{"id":689,"date":"2026-05-08T09:40:43","date_gmt":"2026-05-08T07:40:43","guid":{"rendered":"https:\/\/candidatura.sviluppo.host\/?page_id=689"},"modified":"2026-05-15T16:00:51","modified_gmt":"2026-05-15T14:00:51","slug":"elementor-689","status":"publish","type":"page","link":"https:\/\/candidatura.sviluppo.host\/index.php\/elementor-689\/","title":{"rendered":"Elementor #689"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"689\" class=\"elementor elementor-689\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-55fdf72 e-flex e-con-boxed e-con e-parent\" data-id=\"55fdf72\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-90ecb89 elementor-widget elementor-widget-html\" data-id=\"90ecb89\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<div id=\"n8n-chat-wrapper\">\r\n    <div id=\"chat-container\">\r\n        <div id=\"chat-header\">\r\n            <span>\ud83d\udc68\u200d\ud83c\udf73 Il nostro Assistente Menu<\/span>\r\n            <button id=\"reset-chat\" onclick=\"resetChat()\" title=\"Reset Chat\">\ud83d\udd04<\/button>\r\n        <\/div>\r\n        <div id=\"chat-box\">\r\n            <div class=\"message ai\">Ciao! Sono l'assistente digitale. Chiedimi pure cosa vorresti mangiare o bere oggi!<\/div>\r\n        <\/div>\r\n        <div id=\"input-area\">\r\n            <input type=\"text\" id=\"user-input\" placeholder=\"Vorrei un piatto vegetariano...\" onkeypress=\"handleKeyPress(event)\">\r\n            <button onclick=\"sendMessage()\" id=\"send-btn\">\r\n                <svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\"><path fill=\"currentColor\" d=\"M2.01 21L23 12 2.01 3 2 10l15 2-15 2z\"><\/path><\/svg>\r\n            <\/button>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<style>\r\n    \/* Usiamo un wrapper per isolare lo stile *\/\r\n    #n8n-chat-wrapper {\r\n        --chat-primary: #ff6b6b; \/* Cambia questo per il tuo colore brand *\/\r\n        --chat-bg: #fdfdfd;\r\n        --chat-text: #333;\r\n        display: flex;\r\n        justify-content: center;\r\n        width: 100%;\r\n    }\r\n\r\n    #n8n-chat-wrapper #chat-container {\r\n        width: 100%;\r\n        max-width: 500px;\r\n        height: 600px;\r\n        background: white;\r\n        border-radius: 12px;\r\n        box-shadow: 0 8px 30px rgba(0,0,0,0.12);\r\n        display: flex;\r\n        flex-direction: column;\r\n        overflow: hidden;\r\n        border: 1px solid #eee;\r\n    }\r\n\r\n    #n8n-chat-wrapper #chat-header {\r\n        background: var(--chat-primary);\r\n        color: white;\r\n        padding: 15px 20px;\r\n        font-weight: 600;\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n    }\r\n\r\n    #n8n-chat-wrapper #reset-chat {\r\n        background: transparent;\r\n        border: none;\r\n        color: white;\r\n        cursor: pointer;\r\n        font-size: 1.2rem;\r\n        padding: 0;\r\n    }\r\n\r\n    #n8n-chat-wrapper #chat-box {\r\n        flex: 1;\r\n        padding: 20px;\r\n        overflow-y: auto;\r\n        background: var(--chat-bg);\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 12px;\r\n    }\r\n\r\n    #n8n-chat-wrapper .message {\r\n        padding: 12px 16px;\r\n        border-radius: 18px;\r\n        font-size: 15px;\r\n        line-height: 1.5;\r\n        max-width: 85%;\r\n        word-wrap: break-word;\r\n    }\r\n\r\n    #n8n-chat-wrapper .user {\r\n        align-self: flex-end;\r\n        background: var(--chat-primary);\r\n        color: white;\r\n        border-bottom-right-radius: 4px;\r\n    }\r\n\r\n    #n8n-chat-wrapper .ai {\r\n        align-self: flex-start;\r\n        background: #e9e9eb;\r\n        color: var(--chat-text);\r\n        border-bottom-left-radius: 4px;\r\n    }\r\n\r\n    #n8n-chat-wrapper #input-area {\r\n        padding: 15px;\r\n        background: white;\r\n        display: flex;\r\n        gap: 10px;\r\n        border-top: 1px solid #eee;\r\n    }\r\n\r\n    #n8n-chat-wrapper input {\r\n        flex: 1;\r\n        padding: 12px 18px;\r\n        border: 1px solid #ddd;\r\n        border-radius: 25px;\r\n        outline: none;\r\n        font-size: 14px;\r\n    }\r\n\r\n    #n8n-chat-wrapper button#send-btn {\r\n        background: var(--chat-primary);\r\n        color: white;\r\n        border: none;\r\n        width: 45px;\r\n        height: 45px;\r\n        border-radius: 50%;\r\n        cursor: pointer;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        transition: transform 0.2s;\r\n    }\r\n\r\n    #n8n-chat-wrapper button#send-btn:hover {\r\n        transform: scale(1.05);\r\n    }\r\n\r\n    #n8n-chat-wrapper button:disabled {\r\n        filter: grayscale(1);\r\n        cursor: not-allowed;\r\n    }\r\n\r\n    \/* Animazione puntini caricamento *\/\r\n    .typing::after {\r\n        content: '...';\r\n        animation: blink 1s infinite;\r\n    }\r\n    @keyframes blink { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }\r\n<\/style>\r\n\r\n<script>\r\n    \/\/ --- CONFIGURAZIONE WEBHOOK ---\r\n    const N8N_URL = 'https:\/\/candidatura.sviluppo.host\/n8n-proxy.php'; \r\n\r\n    const chatBox = document.querySelector('#n8n-chat-wrapper #chat-box');\r\n    const userInput = document.querySelector('#n8n-chat-wrapper #user-input');\r\n    const sendBtn = document.querySelector('#n8n-chat-wrapper #send-btn');\r\n\r\n    async function sendMessage() {\r\n        const message = userInput.value.trim();\r\n        if (!message) return;\r\n\r\n        appendMessage(message, 'user');\r\n        userInput.value = '';\r\n        \r\n        \/\/ Messaggio di attesa\r\n        const loadingDiv = document.createElement('div');\r\n        loadingDiv.className = 'message ai typing';\r\n        loadingDiv.innerText = 'Sto consultando il menu';\r\n        chatBox.appendChild(loadingDiv);\r\n        chatBox.scrollTop = chatBox.scrollHeight;\r\n\r\n        try {\r\n            const response = await fetch(N8N_URL, {\r\n                method: 'POST',\r\n                headers: { 'Content-Type': 'application\/json' },\r\n                body: JSON.stringify({ \r\n                    message: message,\r\n                    date: new Date().toISOString()\r\n                })\r\n            });\r\n\r\n            const data = await response.json();\r\n            chatBox.removeChild(loadingDiv); \/\/ Rimuovi caricamento\r\n\r\n            \/\/ Prendi la risposta (adattalo in base a come esce l'output dal tuo agente n8n)\r\n            const aiText = data.output || data.text || data[0]?.output || \"Non sono riuscito a trovare questa informazione.\";\r\n            appendMessage(aiText, 'ai');\r\n\r\n        } catch (error) {\r\n            chatBox.removeChild(loadingDiv);\r\n            appendMessage(\"Ops! Il server non risponde. Riprova tra poco.\", 'ai');\r\n            console.error('Errore:', error);\r\n        }\r\n    }\r\n\r\n    function appendMessage(text, sender) {\r\n        const msgDiv = document.createElement('div');\r\n        msgDiv.className = `message ${sender}`;\r\n        msgDiv.innerText = text;\r\n        chatBox.appendChild(msgDiv);\r\n        chatBox.scrollTop = chatBox.scrollHeight;\r\n    }\r\n\r\n    function handleKeyPress(e) {\r\n        if (e.key === 'Enter') sendMessage();\r\n    }\r\n\r\n    function resetChat() {\r\n        chatBox.innerHTML = '<div class=\"message ai\">Chat resettata. Come posso aiutarti?<\/div>';\r\n    }\r\n<\/script>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-014b77b e-flex e-con-boxed e-con e-parent\" data-id=\"014b77b\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-55d5551 elementor-widget elementor-widget-html\" data-id=\"55d5551\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\r\n    .elementor-meteo-box {\r\n        font-family: inherit; \/* Prende il font del tuo tema Elementor *\/\r\n        background: #f8f9fa; \/* Colore di sfondo leggero *\/\r\n        border: 1px solid #e5e5e5;\r\n        border-radius: 12px;\r\n        padding: 20px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        justify-content: center;\r\n        box-shadow: 0 2px 8px rgba(0,0,0,0.05);\r\n        max-width: 200px;\r\n        margin: 0 auto;\r\n    }\r\n    .meteo-citta {\r\n        font-size: 16px;\r\n        font-weight: 600;\r\n        color: #333333;\r\n        margin: 0 0 5px 0;\r\n        text-transform: uppercase;\r\n        letter-spacing: 1px;\r\n    }\r\n    .meteo-gradi {\r\n        font-size: 36px;\r\n        font-weight: 700;\r\n        color: #0073aa; \/* Colore classico WordPress\/Elementor *\/\r\n        margin: 0;\r\n        line-height: 1;\r\n    }\r\n<\/style>\r\n\r\n<div class=\"elementor-meteo-box\">\r\n    <p class=\"meteo-citta\">Milano<\/p>\r\n    <div class=\"meteo-gradi\" id=\"meteo-milano-ele\">...<\/div>\r\n<\/div>\r\n\r\n<script>\r\n    (async function() {\r\n        \/\/ Coordinate di Milano\r\n        const lat = 45.4642;\r\n        const lon = 9.1900;\r\n        const url = `https:\/\/api.open-meteo.com\/v1\/forecast?latitude=${lat}&longitude=${lon}&current_weather=true`;\r\n\r\n        try {\r\n            const response = await fetch(url);\r\n            if (!response.ok) throw new Error(\"Errore API\");\r\n            \r\n            const data = await response.json();\r\n            const temp = data.current_weather.temperature;\r\n            \r\n            \/\/ 1. Mostra (stampa) il dato visivamente nella pagina\r\n            document.getElementById('meteo-milano-ele').innerText = `${temp}\u00b0C`;\r\n            \r\n            \/\/ 2. Stampa il dato nei log della console (F12)\r\n            console.log(`[Meteo Elementor] Temperatura a Milano recuperata con successo: ${temp}\u00b0C`);\r\n\r\n        } catch (error) {\r\n            console.error(\"[Meteo Elementor] Errore nel recupero dati:\", error);\r\n            document.getElementById('meteo-milano-ele').innerText = \"--\u00b0C\";\r\n        }\r\n    })();\r\n<\/script>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a303003 e-flex e-con-boxed e-con e-parent\" data-id=\"a303003\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8f1af5e elementor-widget elementor-widget-html\" data-id=\"8f1af5e\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<script charset=\"UTF-8\" defer src=\"https:\/\/cdn.beddy.io\/bol-v2\/prod\/beddy-bar-web-component.js\"><\/script><beddy-bar lang=\"it\" widgetcode=\"79573f6712538\"><\/beddy-bar>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\ud83d\udc68\u200d\ud83c\udf73 Il nostro Assistente Menu \ud83d\udd04 Ciao! Sono l&#8217;assistente digitale. Chiedimi pure cosa vorresti mangiare o bere oggi! Milano &#8230;<\/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-689","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/candidatura.sviluppo.host\/index.php\/wp-json\/wp\/v2\/pages\/689","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/candidatura.sviluppo.host\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/candidatura.sviluppo.host\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/candidatura.sviluppo.host\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/candidatura.sviluppo.host\/index.php\/wp-json\/wp\/v2\/comments?post=689"}],"version-history":[{"count":19,"href":"https:\/\/candidatura.sviluppo.host\/index.php\/wp-json\/wp\/v2\/pages\/689\/revisions"}],"predecessor-version":[{"id":811,"href":"https:\/\/candidatura.sviluppo.host\/index.php\/wp-json\/wp\/v2\/pages\/689\/revisions\/811"}],"wp:attachment":[{"href":"https:\/\/candidatura.sviluppo.host\/index.php\/wp-json\/wp\/v2\/media?parent=689"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}