{"id":28645,"date":"2025-08-07T17:42:07","date_gmt":"2025-08-07T20:42:07","guid":{"rendered":"https:\/\/staging.brasilead.com\/?page_id=28645"},"modified":"2025-08-07T17:43:21","modified_gmt":"2025-08-07T20:43:21","slug":"geradorteste","status":"publish","type":"page","link":"https:\/\/staging.brasilead.com\/?page_id=28645","title":{"rendered":"geradorteste"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\n\n\n \n \n Sistema de Gera\u00e7\u00e3o de Aulas - IA<\/title>\n \n <!-- Font Awesome -->\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\n \n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n :root {\n --primary: #667eea;\n --primary-dark: #5a67d8;\n --secondary: #ed64a6;\n --success: #48bb78;\n --danger: #f56565;\n --warning: #ed8936;\n --dark: #2d3748;\n --light: #f7fafc;\n --gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n --shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n }\n\n body {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n min-height: 100vh;\n padding: 20px;\n position: relative;\n overflow-x: hidden;\n }\n\n \/* Animated Background *\/\n .bg-animation {\n position: fixed;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n z-index: -1;\n opacity: 0.3;\n }\n\n .bg-animation span {\n position: absolute;\n display: block;\n width: 20px;\n height: 20px;\n background: rgba(255, 255, 255, 0.2);\n animation: move 25s linear infinite;\n bottom: -150px;\n }\n\n .bg-animation span:nth-child(1) {\n left: 25%;\n width: 80px;\n height: 80px;\n animation-delay: 0s;\n }\n\n .bg-animation span:nth-child(2) {\n left: 10%;\n width: 20px;\n height: 20px;\n animation-delay: 2s;\n animation-duration: 12s;\n }\n\n .bg-animation span:nth-child(3) {\n left: 70%;\n width: 20px;\n height: 20px;\n animation-delay: 4s;\n }\n\n .bg-animation span:nth-child(4) {\n left: 40%;\n width: 60px;\n height: 60px;\n animation-delay: 0s;\n animation-duration: 18s;\n }\n\n .bg-animation span:nth-child(5) {\n left: 65%;\n width: 20px;\n height: 20px;\n animation-delay: 0s;\n }\n\n .bg-animation span:nth-child(6) {\n left: 75%;\n width: 110px;\n height: 110px;\n animation-delay: 3s;\n }\n\n .bg-animation span:nth-child(7) {\n left: 35%;\n width: 150px;\n height: 150px;\n animation-delay: 7s;\n }\n\n .bg-animation span:nth-child(8) {\n left: 50%;\n width: 25px;\n height: 25px;\n animation-delay: 15s;\n animation-duration: 45s;\n }\n\n .bg-animation span:nth-child(9) {\n left: 20%;\n width: 15px;\n height: 15px;\n animation-delay: 2s;\n animation-duration: 35s;\n }\n\n .bg-animation span:nth-child(10) {\n left: 85%;\n width: 150px;\n height: 150px;\n animation-delay: 0s;\n animation-duration: 11s;\n }\n\n @keyframes move {\n 0% {\n transform: translateY(0) rotate(0deg);\n opacity: 1;\n border-radius: 0;\n }\n 100% {\n transform: translateY(-1000px) rotate(720deg);\n opacity: 0;\n border-radius: 50%;\n }\n }\n\n .container {\n max-width: 1200px;\n margin: 0 auto;\n animation: fadeInUp 0.8s ease;\n }\n\n @keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n .header {\n text-align: center;\n margin-bottom: 40px;\n color: white;\n }\n\n .header h1 {\n font-size: 3rem;\n font-weight: 800;\n margin-bottom: 10px;\n text-shadow: 2px 2px 4px rgba(0,0,0,0.2);\n animation: glow 2s ease-in-out infinite alternate;\n }\n\n @keyframes glow {\n from { text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); }\n to { text-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 0 0 30px rgba(255, 255, 255, 0.6); }\n }\n\n .header p {\n font-size: 1.2rem;\n opacity: 0.95;\n font-weight: 300;\n }\n\n .form-card {\n background: rgba(255, 255, 255, 0.98);\n border-radius: 20px;\n padding: 40px;\n box-shadow: var(--shadow);\n backdrop-filter: blur(10px);\n border: 1px solid rgba(255, 255, 255, 0.3);\n }\n\n .progress-bar {\n display: flex;\n justify-content: space-between;\n margin-bottom: 40px;\n position: relative;\n }\n\n .progress-bar::before {\n content: '';\n position: absolute;\n top: 20px;\n left: 0;\n right: 0;\n height: 2px;\n background: #e2e8f0;\n z-index: -1;\n }\n\n .progress-step {\n background: #e2e8f0;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n color: #a0aec0;\n transition: all 0.3s ease;\n cursor: pointer;\n }\n\n .progress-step.active {\n background: var(--gradient);\n color: white;\n transform: scale(1.1);\n box-shadow: 0 0 20px rgba(102, 126, 234, 0.5);\n }\n\n .progress-step.completed {\n background: var(--success);\n color: white;\n }\n\n .form-section {\n display: none;\n animation: slideIn 0.5s ease;\n }\n\n .form-section.active {\n display: block;\n }\n\n @keyframes slideIn {\n from {\n opacity: 0;\n transform: translateX(20px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n\n .section-title {\n font-size: 1.8rem;\n font-weight: 700;\n color: var(--dark);\n margin-bottom: 25px;\n display: flex;\n align-items: center;\n gap: 15px;\n }\n\n .section-title i {\n background: var(--gradient);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n font-size: 2rem;\n }\n\n .form-group {\n margin-bottom: 25px;\n }\n\n .form-group label {\n display: block;\n margin-bottom: 8px;\n color: var(--dark);\n font-weight: 600;\n font-size: 0.95rem;\n }\n\n .form-group label .required {\n color: var(--danger);\n }\n\n .form-control {\n width: 100%;\n padding: 12px 15px;\n border: 2px solid #e2e8f0;\n border-radius: 10px;\n font-size: 1rem;\n transition: all 0.3s ease;\n background: white;\n }\n\n .form-control:focus {\n outline: none;\n border-color: var(--primary);\n box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\n transform: translateY(-2px);\n }\n\n .form-control.error {\n border-color: var(--danger);\n animation: shake 0.5s;\n }\n\n @keyframes shake {\n 0%, 100% { transform: translateX(0); }\n 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }\n 20%, 40%, 60%, 80% { transform: translateX(5px); }\n }\n\n textarea.form-control {\n resize: vertical;\n min-height: 120px;\n font-family: inherit;\n }\n\n .form-hint {\n font-size: 0.85rem;\n color: #718096;\n margin-top: 5px;\n display: flex;\n align-items: center;\n gap: 5px;\n }\n\n .form-hint i {\n font-size: 0.9rem;\n }\n\n .error-message {\n color: var(--danger);\n font-size: 0.85rem;\n margin-top: 5px;\n display: none;\n animation: fadeIn 0.3s;\n }\n\n .error-message.show {\n display: block;\n }\n\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n\n .char-counter {\n text-align: right;\n font-size: 0.85rem;\n color: #718096;\n margin-top: 5px;\n }\n\n .char-counter.warning {\n color: var(--warning);\n }\n\n .char-counter.danger {\n color: var(--danger);\n }\n\n .button-group {\n display: flex;\n justify-content: space-between;\n margin-top: 40px;\n gap: 15px;\n }\n\n .btn {\n padding: 12px 30px;\n border: none;\n border-radius: 10px;\n font-size: 1rem;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.3s ease;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n text-decoration: none;\n position: relative;\n overflow: hidden;\n }\n\n .btn::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0;\n height: 0;\n border-radius: 50%;\n background: rgba(255, 255, 255, 0.3);\n transform: translate(-50%, -50%);\n transition: width 0.6s, height 0.6s;\n }\n\n .btn:hover::before {\n width: 300px;\n height: 300px;\n }\n\n .btn-primary {\n background: var(--gradient);\n color: white;\n box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);\n }\n\n .btn-primary:hover {\n transform: translateY(-2px);\n box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);\n }\n\n .btn-secondary {\n background: #e2e8f0;\n color: var(--dark);\n }\n\n .btn-secondary:hover {\n background: #cbd5e0;\n transform: translateY(-2px);\n }\n\n .btn-success {\n background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);\n color: white;\n box-shadow: 0 4px 15px rgba(72, 187, 120, 0.3);\n }\n\n .btn-success:hover {\n transform: translateY(-2px);\n box-shadow: 0 6px 20px rgba(72, 187, 120, 0.4);\n }\n\n .btn:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n transform: none !important;\n }\n\n .loading-spinner {\n display: none;\n width: 20px;\n height: 20px;\n border: 3px solid rgba(255, 255, 255, 0.3);\n border-top-color: white;\n border-radius: 50%;\n animation: spin 1s linear infinite;\n }\n\n .btn.loading .loading-spinner {\n display: inline-block;\n }\n\n .btn.loading .btn-text {\n opacity: 0.7;\n }\n\n @keyframes spin {\n to { transform: rotate(360deg); }\n }\n\n .summary-section {\n display: none;\n }\n\n .summary-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 20px;\n margin-top: 20px;\n }\n\n .summary-item {\n padding: 15px;\n background: #f8f9fa;\n border-radius: 10px;\n border-left: 4px solid var(--primary);\n }\n\n .summary-item h4 {\n color: var(--primary);\n margin-bottom: 5px;\n font-size: 0.9rem;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n }\n\n .summary-item p {\n color: var(--dark);\n font-size: 1rem;\n margin: 0;\n }\n\n .success-message {\n display: none;\n background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);\n color: white;\n padding: 20px;\n border-radius: 10px;\n text-align: center;\n margin-top: 20px;\n animation: bounceIn 0.6s;\n }\n\n @keyframes bounceIn {\n 0% {\n opacity: 0;\n transform: scale(0.3);\n }\n 50% {\n opacity: 1;\n transform: scale(1.05);\n }\n 70% {\n transform: scale(0.9);\n }\n 100% {\n transform: scale(1);\n }\n }\n\n .success-message i {\n font-size: 3rem;\n margin-bottom: 10px;\n }\n\n .webhook-status {\n margin-top: 20px;\n padding: 15px;\n background: #f0f4f8;\n border-radius: 10px;\n display: none;\n }\n\n .webhook-status.loading {\n border-left: 4px solid var(--warning);\n }\n\n .webhook-status.success {\n border-left: 4px solid var(--success);\n }\n\n .webhook-status.error {\n border-left: 4px solid var(--danger);\n }\n\n .tooltip {\n position: relative;\n display: inline-block;\n cursor: help;\n }\n\n .tooltip .tooltiptext {\n visibility: hidden;\n width: 200px;\n background-color: var(--dark);\n color: white;\n text-align: center;\n border-radius: 6px;\n padding: 8px;\n position: absolute;\n z-index: 1;\n bottom: 125%;\n left: 50%;\n margin-left: -100px;\n opacity: 0;\n transition: opacity 0.3s;\n font-size: 0.85rem;\n }\n\n .tooltip:hover .tooltiptext {\n visibility: visible;\n opacity: 1;\n }\n\n @media (max-width: 768px) {\n .header h1 {\n font-size: 2rem;\n }\n \n .form-card {\n padding: 20px;\n }\n \n .button-group {\n flex-direction: column;\n }\n \n .btn {\n width: 100%;\n justify-content: center;\n }\n }\n\n \/* API Key Toggle *\/\n .api-key-toggle {\n position: relative;\n }\n\n .toggle-visibility {\n position: absolute;\n right: 15px;\n top: 50%;\n transform: translateY(-50%);\n cursor: pointer;\n color: #718096;\n transition: color 0.3s;\n }\n\n .toggle-visibility:hover {\n color: var(--primary);\n }\n\n \/* File Upload Style *\/\n .file-upload {\n position: relative;\n display: inline-block;\n width: 100%;\n }\n\n .file-upload-label {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n padding: 20px;\n border: 2px dashed #cbd5e0;\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.3s;\n background: #f8f9fa;\n }\n\n .file-upload-label:hover {\n border-color: var(--primary);\n background: #f0f4ff;\n }\n\n .file-upload input[type=\"file\"] {\n display: none;\n }\n\n \/* Custom Select *\/\n .custom-select {\n position: relative;\n }\n\n .custom-select select {\n appearance: none;\n padding-right: 40px;\n }\n\n .custom-select::after {\n content: '\\f078';\n font-family: 'Font Awesome 6 Free';\n font-weight: 900;\n position: absolute;\n right: 15px;\n top: 50%;\n transform: translateY(-50%);\n pointer-events: none;\n color: #718096;\n }\n <\/style>\n<\/head>\n<body>\n <!-- Animated Background -->\n <div class=\"bg-animation\">\n <span><\/span>\n <span><\/span>\n <span><\/span>\n <span><\/span>\n <span><\/span>\n <span><\/span>\n <span><\/span>\n <span><\/span>\n <span><\/span>\n <span><\/span>\n <\/div>\n\n <div class=\"container\">\n <div class=\"header\">\n <h1><i class=\"fas fa-robot\"><\/i> Gerador Inteligente de Aulas<\/h1>\n <p>Crie conte\u00fado educacional profissional com IA em minutos<\/p>\n <\/div>\n\n <div class=\"form-card\">\n <!-- Progress Bar -->\n <div class=\"progress-bar\">\n <div class=\"progress-step active\" data-step=\"1\">1<\/div>\n <div class=\"progress-step\" data-step=\"2\">2<\/div>\n <div class=\"progress-step\" data-step=\"3\">3<\/div>\n <div class=\"progress-step\" data-step=\"4\">4<\/div>\n <\/div>\n\n <form id=\"aulaForm\">\n <!-- Section 1: Informa\u00e7\u00f5es B\u00e1sicas -->\n <div class=\"form-section active\" data-section=\"1\">\n <h2 class=\"section-title\">\n <i class=\"fas fa-info-circle\"><\/i>\n Informa\u00e7\u00f5es B\u00e1sicas\n <\/h2>\n \n <div class=\"form-group\">\n <label for=\"nome_do_curso\">\n Nome do Curso <span class=\"required\">*<\/span>\n <\/label>\n <input type=\"text\" \n class=\"form-control\" \n id=\"nome_do_curso\" \n name=\"nome_do_curso\" \n required\n placeholder=\"Ex: Curso de Educa\u00e7\u00e3o Especial\">\n <div class=\"error-message\">Este campo \u00e9 obrigat\u00f3rio<\/div>\n <\/div>\n\n <div class=\"form-group\">\n <label for=\"nome_da_aula\">\n Nome da Aula <span class=\"required\">*<\/span>\n <\/label>\n <input type=\"text\" \n class=\"form-control\" \n id=\"nome_da_aula\" \n name=\"nome_da_aula\" \n required\n placeholder=\"Ex: Aula 4 \u2013 Defici\u00eancia Intelectual (DI)\">\n <div class=\"error-message\">Este campo \u00e9 obrigat\u00f3rio<\/div>\n <\/div>\n\n <div class=\"form-group\">\n <label for=\"carga_horaria_da_aula\">\n Carga Hor\u00e1ria (minutos) <span class=\"required\">*<\/span>\n <span class=\"tooltip\">\n <i class=\"fas fa-question-circle\"><\/i>\n <span class=\"tooltiptext\">Cada 6 minutos equivale a aproximadamente 1 p\u00e1gina de conte\u00fado<\/span>\n <\/span>\n <\/label>\n <input type=\"number\" \n class=\"form-control\" \n id=\"carga_horaria_da_aula\" \n name=\"carga_horaria_da_aula\" \n required\n min=\"30\"\n max=\"480\"\n value=\"240\"\n placeholder=\"Ex: 240\">\n <div class=\"form-hint\">\n <i class=\"fas fa-lightbulb\"><\/i>\n <span id=\"paginasEstimadas\">Aproximadamente 40 p\u00e1ginas de conte\u00fado<\/span>\n <\/div>\n <div class=\"error-message\">Digite um valor entre 30 e 480 minutos<\/div>\n <\/div>\n\n <div class=\"form-group\">\n <label for=\"pasta_raiz\">\n Pasta Raiz no Google Drive\n <\/label>\n <input type=\"text\" \n class=\"form-control\" \n id=\"pasta_raiz\" \n name=\"pasta_raiz\" \n value=\"Cursos\"\n placeholder=\"Ex: Cursos\">\n <div class=\"form-hint\">\n <i class=\"fas fa-folder\"><\/i>\n Pasta onde o curso ser\u00e1 organizado\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Section 2: Detalhes do Conte\u00fado -->\n <div class=\"form-section\" data-section=\"2\">\n <h2 class=\"section-title\">\n <i class=\"fas fa-book\"><\/i>\n Detalhes do Conte\u00fado\n <\/h2>\n\n <div class=\"form-group\">\n <label for=\"publico_alvo\">\n P\u00fablico-Alvo <span class=\"required\">*<\/span>\n <\/label>\n <textarea class=\"form-control\" \n id=\"publico_alvo\" \n name=\"publico_alvo\" \n required\n maxlength=\"500\"\n placeholder=\"Descreva o perfil dos alunos que far\u00e3o este curso...\"><\/textarea>\n <div class=\"char-counter\">\n <span id=\"publico_alvo_counter\">0<\/span>\/500 caracteres\n <\/div>\n <div class=\"error-message\">Este campo \u00e9 obrigat\u00f3rio<\/div>\n <\/div>\n\n <div class=\"form-group\">\n <label for=\"objetivo_da_aula\">\n Objetivo da Aula <span class=\"required\">*<\/span>\n <\/label>\n <textarea class=\"form-control\" \n id=\"objetivo_da_aula\" \n name=\"objetivo_da_aula\" \n required\n maxlength=\"500\"\n placeholder=\"Qual o principal objetivo desta aula?\"><\/textarea>\n <div class=\"char-counter\">\n <span id=\"objetivo_da_aula_counter\">0<\/span>\/500 caracteres\n <\/div>\n <div class=\"error-message\">Este campo \u00e9 obrigat\u00f3rio<\/div>\n <\/div>\n\n <div class=\"form-group\">\n <label for=\"conteudo_da_aula\">\n Conte\u00fado Program\u00e1tico <span class=\"required\">*<\/span>\n <\/label>\n <textarea class=\"form-control\" \n id=\"conteudo_da_aula\" \n name=\"conteudo_da_aula\" \n required\n maxlength=\"1000\"\n rows=\"5\"\n placeholder=\"Liste os t\u00f3picos que ser\u00e3o abordados nesta aula...\"><\/textarea>\n <div class=\"char-counter\">\n <span id=\"conteudo_da_aula_counter\">0<\/span>\/1000 caracteres\n <\/div>\n <div class=\"error-message\">Este campo \u00e9 obrigat\u00f3rio<\/div>\n <\/div>\n\n <div class=\"form-group\">\n <label for=\"proxima_aula\">\n Pr\u00f3xima Aula\n <\/label>\n <input type=\"text\" \n class=\"form-control\" \n id=\"proxima_aula\" \n name=\"proxima_aula\"\n placeholder=\"Ex: Aula 5 \u2013 Transtorno do Espectro Autista\">\n <div class=\"form-hint\">\n <i class=\"fas fa-arrow-right\"><\/i>\n Ajuda a criar conex\u00e3o entre os conte\u00fados\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Section 3: Configura\u00e7\u00f5es Avan\u00e7adas -->\n <div class=\"form-section\" data-section=\"3\">\n <h2 class=\"section-title\">\n <i class=\"fas fa-cog\"><\/i>\n Configura\u00e7\u00f5es Avan\u00e7adas\n <\/h2>\n\n <div class=\"form-group\">\n <label for=\"tendencias_incorporadas\">\n Tend\u00eancias e Metodologias a Incorporar\n <\/label>\n <textarea class=\"form-control\" \n id=\"tendencias_incorporadas\" \n name=\"tendencias_incorporadas\"\n maxlength=\"2000\"\n rows=\"6\"\n placeholder=\"Descreva metodologias, legisla\u00e7\u00f5es, teorias ou tend\u00eancias educacionais que devem ser consideradas na cria\u00e7\u00e3o do conte\u00fado...\"><\/textarea>\n <div class=\"char-counter\">\n <span id=\"tendencias_incorporadas_counter\">0<\/span>\/2000 caracteres\n <\/div>\n <div class=\"form-hint\">\n <i class=\"fas fa-trends-up\"><\/i>\n Isso tornar\u00e1 o conte\u00fado mais atual e relevante\n <\/div>\n <\/div>\n\n <div class=\"form-group\">\n <label for=\"observacoes\">\n Observa\u00e7\u00f5es Adicionais\n <\/label>\n <textarea class=\"form-control\" \n id=\"observacoes\" \n name=\"observacoes\"\n maxlength=\"500\"\n rows=\"3\"\n placeholder=\"Alguma instru\u00e7\u00e3o especial para a gera\u00e7\u00e3o do conte\u00fado?\"><\/textarea>\n <div class=\"char-counter\">\n <span id=\"observacoes_counter\">0<\/span>\/500 caracteres\n <\/div>\n <\/div>\n\n <div class=\"form-group\">\n <label for=\"webhook_url\">\n URL do Webhook n8n <span class=\"required\">*<\/span>\n <span class=\"tooltip\">\n <i class=\"fas fa-question-circle\"><\/i>\n <span class=\"tooltiptext\">Cole aqui a URL do webhook do seu workflow n8n<\/span>\n <\/span>\n <\/label>\n <input type=\"url\" \n class=\"form-control\" \n id=\"webhook_url\" \n name=\"webhook_url\"\n required\n value=\"https:\/\/bead.app.n8n.cloud\/webhook-test\/34e7f4e7-1fe6-472e-be36-093ea422a6c4\"\n placeholder=\"https:\/\/seu-n8n.com\/webhook\/xxx-xxx-xxx\">\n <div class=\"form-hint\">\n <i class=\"fas fa-link\"><\/i>\n URL do webhook j\u00e1 preenchida - Certifique-se que o m\u00e9todo est\u00e1 como POST no n8n\n <\/div>\n <div class=\"error-message\">Digite uma URL v\u00e1lida<\/div>\n <\/div>\n <\/div>\n\n <!-- Section 4: Resumo e Confirma\u00e7\u00e3o -->\n <div class=\"form-section summary-section\" data-section=\"4\">\n <h2 class=\"section-title\">\n <i class=\"fas fa-check-circle\"><\/i>\n Resumo e Confirma\u00e7\u00e3o\n <\/h2>\n\n <div class=\"summary-grid\" id=\"summaryGrid\">\n <!-- Preenchido dinamicamente -->\n <\/div>\n\n <div class=\"webhook-status\" id=\"webhookStatus\">\n <h4><i class=\"fas fa-sync fa-spin\"><\/i> Enviando dados para o n8n...<\/h4>\n <p>Aguarde enquanto processamos sua solicita\u00e7\u00e3o<\/p>\n <\/div>\n\n <div class=\"success-message\" id=\"successMessage\">\n <i class=\"fas fa-check-circle\"><\/i>\n <h3>Aula Enviada com Sucesso!<\/h3>\n <p>O conte\u00fado est\u00e1 sendo gerado. Verifique sua pasta no Google Drive em alguns minutos.<\/p>\n <\/div>\n <\/div>\n\n <!-- Navigation Buttons -->\n <div class=\"button-group\">\n <button type=\"button\" class=\"btn btn-secondary\" id=\"btnPrevious\" style=\"display: none;\">\n <i class=\"fas fa-arrow-left\"><\/i>\n <span>Anterior<\/span>\n <\/button>\n \n <button type=\"button\" class=\"btn btn-primary\" id=\"btnNext\">\n <span>Pr\u00f3ximo<\/span>\n <i class=\"fas fa-arrow-right\"><\/i>\n <\/button>\n \n <button type=\"submit\" class=\"btn btn-success\" id=\"btnSubmit\" style=\"display: none;\">\n <span class=\"loading-spinner\"><\/span>\n <span class=\"btn-text\">\n <i class=\"fas fa-paper-plane\"><\/i>\n Gerar Aula\n <\/span>\n <\/button>\n <\/div>\n <\/form>\n <\/div>\n <\/div>\n\n <script>\n \/\/ Estado do formul\u00e1rio\n let currentSection = 1;\n const totalSections = 4;\n \n \/\/ Elementos\n const form = document.getElementById('aulaForm');\n const btnNext = document.getElementById('btnNext');\n const btnPrevious = document.getElementById('btnPrevious');\n const btnSubmit = document.getElementById('btnSubmit');\n const progressSteps = document.querySelectorAll('.progress-step');\n const formSections = document.querySelectorAll('.form-section');\n \n \/\/ Valida\u00e7\u00e3o em tempo real\n document.querySelectorAll('.form-control').forEach(input => {\n input.addEventListener('blur', () => validateField(input));\n input.addEventListener('input', () => {\n input.classList.remove('error');\n const errorMsg = input.parentElement.querySelector('.error-message');\n if (errorMsg) errorMsg.classList.remove('show');\n });\n });\n \n \/\/ Contador de caracteres\n document.querySelectorAll('textarea[maxlength]').forEach(textarea => {\n const counterId = textarea.id + '_counter';\n const counter = document.getElementById(counterId);\n \n if (counter) {\n textarea.addEventListener('input', () => {\n const length = textarea.value.length;\n const maxLength = parseInt(textarea.getAttribute('maxlength'));\n counter.textContent = length;\n \n const counterElement = counter.parentElement;\n counterElement.classList.remove('warning', 'danger');\n \n if (length > maxLength * 0.9) {\n counterElement.classList.add('danger');\n } else if (length > maxLength * 0.7) {\n counterElement.classList.add('warning');\n }\n });\n }\n });\n \n \/\/ C\u00e1lculo de p\u00e1ginas estimadas\n document.getElementById('carga_horaria_da_aula').addEventListener('input', (e) => {\n const minutos = parseInt(e.target.value) || 0;\n const paginas = Math.ceil(minutos \/ 6);\n document.getElementById('paginasEstimadas').textContent = \n `Aproximadamente ${paginas} p\u00e1gina${paginas !== 1 ? 's' : ''} de conte\u00fado`;\n });\n \n \/\/ Navega\u00e7\u00e3o\n btnNext.addEventListener('click', () => {\n if (validateCurrentSection()) {\n if (currentSection < totalSections) {\n moveToSection(currentSection + 1);\n }\n }\n });\n \n btnPrevious.addEventListener('click', () => {\n if (currentSection > 1) {\n moveToSection(currentSection - 1);\n }\n });\n \n \/\/ Progress bar click navigation\n progressSteps.forEach(step => {\n step.addEventListener('click', () => {\n const targetSection = parseInt(step.dataset.step);\n if (targetSection < currentSection || validateSectionsUpTo(targetSection - 1)) {\n moveToSection(targetSection);\n }\n });\n });\n \n function moveToSection(section) {\n \/\/ Atualiza se\u00e7\u00e3o ativa\n formSections.forEach(s => s.classList.remove('active'));\n document.querySelector(`[data-section=\"${section}\"]`).classList.add('active');\n \n \/\/ Atualiza progress bar\n progressSteps.forEach((step, index) => {\n step.classList.remove('active', 'completed');\n if (index + 1 < section) {\n step.classList.add('completed');\n } else if (index + 1 === section) {\n step.classList.add('active');\n }\n });\n \n \/\/ Atualiza bot\u00f5es\n btnPrevious.style.display = section === 1 ? 'none' : 'inline-flex';\n \n if (section === totalSections) {\n btnNext.style.display = 'none';\n btnSubmit.style.display = 'inline-flex';\n generateSummary();\n } else {\n btnNext.style.display = 'inline-flex';\n btnSubmit.style.display = 'none';\n }\n \n currentSection = section;\n \n \/\/ Scroll suave para o topo\n window.scrollTo({ top: 0, behavior: 'smooth' });\n }\n \n function validateField(field) {\n let isValid = true;\n const errorMsg = field.parentElement.querySelector('.error-message');\n \n if (field.hasAttribute('required') && !field.value.trim()) {\n field.classList.add('error');\n if (errorMsg) {\n errorMsg.textContent = 'Este campo \u00e9 obrigat\u00f3rio';\n errorMsg.classList.add('show');\n }\n isValid = false;\n } else if (field.type === 'email' && field.value) {\n const emailPattern = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\n if (!emailPattern.test(field.value)) {\n field.classList.add('error');\n if (errorMsg) {\n errorMsg.textContent = 'Digite um email v\u00e1lido';\n errorMsg.classList.add('show');\n }\n isValid = false;\n }\n } else if (field.type === 'url' && field.value) {\n try {\n new URL(field.value);\n } catch {\n field.classList.add('error');\n if (errorMsg) {\n errorMsg.textContent = 'Digite uma URL v\u00e1lida';\n errorMsg.classList.add('show');\n }\n isValid = false;\n }\n } else if (field.type === 'number') {\n const min = parseInt(field.getAttribute('min'));\n const max = parseInt(field.getAttribute('max'));\n const value = parseInt(field.value);\n \n if (min && value < min) {\n field.classList.add('error');\n if (errorMsg) {\n errorMsg.textContent = `Valor m\u00ednimo: ${min}`;\n errorMsg.classList.add('show');\n }\n isValid = false;\n } else if (max && value > max) {\n field.classList.add('error');\n if (errorMsg) {\n errorMsg.textContent = `Valor m\u00e1ximo: ${max}`;\n errorMsg.classList.add('show');\n }\n isValid = false;\n }\n }\n \n return isValid;\n }\n \n function validateCurrentSection() {\n const currentSectionElement = document.querySelector(`[data-section=\"${currentSection}\"]`);\n const fields = currentSectionElement.querySelectorAll('.form-control[required]');\n let isValid = true;\n \n fields.forEach(field => {\n if (!validateField(field)) {\n isValid = false;\n }\n });\n \n if (!isValid) {\n \/\/ Anima o card de erro\n document.querySelector('.form-card').style.animation = 'shake 0.5s';\n setTimeout(() => {\n document.querySelector('.form-card').style.animation = '';\n }, 500);\n }\n \n return isValid;\n }\n \n function validateSectionsUpTo(section) {\n for (let i = 1; i <= section; i++) {\n const sectionElement = document.querySelector(`[data-section=\"${i}\"]`);\n const fields = sectionElement.querySelectorAll('.form-control[required]');\n \n for (let field of fields) {\n if (!validateField(field)) {\n return false;\n }\n }\n }\n return true;\n }\n \n function generateSummary() {\n const summaryGrid = document.getElementById('summaryGrid');\n const formData = new FormData(form);\n \n const summaryItems = [\n { label: 'Nome do Curso', value: formData.get('nome_do_curso') },\n { label: 'Nome da Aula', value: formData.get('nome_da_aula') },\n { label: 'Carga Hor\u00e1ria', value: formData.get('carga_horaria_da_aula') + ' minutos' },\n { label: 'P\u00fablico-Alvo', value: formData.get('publico_alvo') },\n { label: 'Objetivo', value: formData.get('objetivo_da_aula') },\n { label: 'Pasta no Drive', value: formData.get('pasta_raiz') || 'Cursos' }\n ];\n \n summaryGrid.innerHTML = summaryItems.map(item => `\n <div class=\"summary-item\">\n <h4>${item.label}<\/h4>\n <p>${item.value || 'N\u00e3o informado'}<\/p>\n <\/div>\n `).join('');\n }\n \n \/\/ Submiss\u00e3o do formul\u00e1rio\n form.addEventListener('submit', async (e) => {\n e.preventDefault();\n \n if (!validateCurrentSection()) {\n return;\n }\n \n const formData = new FormData(form);\n const webhookUrl = formData.get('webhook_url');\n \n \/\/ Preparar dados para o webhook\n const payload = {\n nome_do_curso: formData.get('nome_do_curso'),\n nome_da_aula: formData.get('nome_da_aula'),\n publico_alvo: formData.get('publico_alvo'),\n objetivo_da_aula: formData.get('objetivo_da_aula'),\n conteudo_da_aula: formData.get('conteudo_da_aula'),\n proxima_aula: formData.get('proxima_aula') || '',\n tendencias_incorporadas: formData.get('tendencias_incorporadas') || '',\n pasta_raiz: formData.get('pasta_raiz') || 'Cursos',\n observacoes: formData.get('observacoes') || '',\n carga_horaria_da_aula: parseInt(formData.get('carga_horaria_da_aula'))\n };\n \n \/\/ Mostrar loading\n btnSubmit.classList.add('loading');\n btnSubmit.disabled = true;\n \n const statusDiv = document.getElementById('webhookStatus');\n statusDiv.style.display = 'block';\n statusDiv.className = 'webhook-status loading';\n \n try {\n const response = await fetch(webhookUrl, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json',\n },\n body: JSON.stringify(payload)\n });\n \n if (response.ok) {\n \/\/ Sucesso\n statusDiv.style.display = 'none';\n document.getElementById('successMessage').style.display = 'block';\n \n \/\/ Desabilitar bot\u00f5es\n btnSubmit.style.display = 'none';\n btnPrevious.style.display = 'none';\n \n \/\/ Opcional: Resetar o formul\u00e1rio ap\u00f3s 5 segundos\n setTimeout(() => {\n if (confirm('Deseja criar outra aula?')) {\n form.reset();\n moveToSection(1);\n document.getElementById('successMessage').style.display = 'none';\n }\n }, 5000);\n } else {\n throw new Error('Erro na resposta do webhook');\n }\n } catch (error) {\n \/\/ Erro\n statusDiv.className = 'webhook-status error';\n statusDiv.innerHTML = `\n <h4><i class=\"fas fa-exclamation-triangle\"><\/i> Erro ao enviar dados<\/h4>\n <p>${error.message}<\/p>\n <p>Verifique a URL do webhook e tente novamente.<\/p>\n `;\n \n btnSubmit.classList.remove('loading');\n btnSubmit.disabled = false;\n }\n });\n \n \/\/ Anima\u00e7\u00e3o inicial\n document.addEventListener('DOMContentLoaded', () => {\n document.querySelector('.form-card').style.opacity = '0';\n setTimeout(() => {\n document.querySelector('.form-card').style.transition = 'opacity 1s ease';\n document.querySelector('.form-card').style.opacity = '1';\n }, 100);\n });\n <\/script>\n<\/body>\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Sistema de Gera\u00e7\u00e3o de Aulas – IA Gerador Inteligente de Aulas Crie conte\u00fado educacional profissional com IA em minutos 1 2 3 4 Informa\u00e7\u00f5es B\u00e1sicas Nome do Curso * Este campo \u00e9 obrigat\u00f3rio Nome da Aula * Este campo \u00e9 obrigat\u00f3rio Carga Hor\u00e1ria (minutos) * Cada 6 minutos equivale a aproximadamente 1 p\u00e1gina de conte\u00fado Aproximadamente 40 p\u00e1ginas de conte\u00fado Digite um valor entre 30 e 480 minutos Pasta Raiz no Google Drive Pasta onde o curso ser\u00e1 organizado Detalhes do Conte\u00fado P\u00fablico-Alvo * 0\/500 caracteres Este campo \u00e9 obrigat\u00f3rio Objetivo da Aula * 0\/500 caracteres Este campo \u00e9 obrigat\u00f3rio Conte\u00fado Program\u00e1tico * 0\/1000 caracteres Este campo \u00e9 obrigat\u00f3rio Pr\u00f3xima Aula Ajuda a criar conex\u00e3o entre os conte\u00fados Configura\u00e7\u00f5es Avan\u00e7adas Tend\u00eancias e Metodologias a Incorporar 0\/2000 caracteres Isso tornar\u00e1 o conte\u00fado mais atual e relevante Observa\u00e7\u00f5es Adicionais 0\/500 caracteres URL do Webhook n8n * Cole aqui a URL do webhook do seu workflow n8n URL do webhook j\u00e1 preenchida – Certifique-se que o m\u00e9todo est\u00e1 como POST no n8n Digite uma URL v\u00e1lida Resumo e Confirma\u00e7\u00e3o Enviando dados para o n8n… Aguarde enquanto processamos sua solicita\u00e7\u00e3o Aula Enviada com Sucesso! O conte\u00fado est\u00e1 sendo gerado. Verifique sua pasta no Google Drive em alguns minutos. Anterior Pr\u00f3ximo Gerar Aula<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_sitemap_exclude":false,"_sitemap_priority":"","_sitemap_frequency":"","footnotes":""},"class_list":["post-28645","page","type-page","status-publish","hentry","post-no-thumbnail"],"_links":{"self":[{"href":"https:\/\/staging.brasilead.com\/index.php?rest_route=\/wp\/v2\/pages\/28645","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staging.brasilead.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/staging.brasilead.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/staging.brasilead.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/staging.brasilead.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=28645"}],"version-history":[{"count":0,"href":"https:\/\/staging.brasilead.com\/index.php?rest_route=\/wp\/v2\/pages\/28645\/revisions"}],"wp:attachment":[{"href":"https:\/\/staging.brasilead.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=28645"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}