Club Martech >

Editor HTML e CSS

Essa ferramenta faz Editor completo de HTML e CSS com preview em tempo real, permitindo criar, editar e visualizar código instantaneamente sem precisar de servidor ou ambiente de desenvolvimento.

HTML

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Minha Página</title>
</head>
<body>
    <h1>Olá, Mundo!</h1>
    <p>Este é um exemplo de página HTML.</p> <script data-no-optimize="1">window.lazyLoadOptions=Object.assign({},{threshold:300},window.lazyLoadOptions||{});!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function o(t){return e({},at,t)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,vt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,vt,e)}function i(t){return s(t,null),0}function r(t){return null===c(t)}function u(t){return c(t)===_t}function d(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function f(t,e){et?t.classList.add(e):t.className+=(t.className?" ":"")+e}function _(t,e){et?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function v(t,e){!e||(e=e._observer)&&e.unobserve(t)}function b(t,e){t&&(t.loadingCount+=e)}function p(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function h(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function m(t){return!!t[lt]}function E(t){return t[lt]}function I(t){return delete t[lt]}function y(e,t){var n;m(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[lt]=n)}function L(a,t){var o;m(a)&&(o=E(a),t.forEach(function(t){var e,n;e=a,(t=o[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function k(t,e,n){f(t,e.class_loading),s(t,st),n&&(b(n,1),d(e.callback_loading,t,n))}function A(t,e,n){n&&t.setAttribute(e,n)}function O(t,e){A(t,rt,l(t,e.data_sizes)),A(t,it,l(t,e.data_srcset)),A(t,ot,l(t,e.data_src))}function w(t,e,n){var a=l(t,e.data_bg_multi),o=l(t,e.data_bg_multi_hidpi);(a=nt&&o?o:a)&&(t.style.backgroundImage=a,n=n,f(t=t,(e=e).class_applied),s(t,dt),n&&(e.unobserve_completed&&v(t,e),d(e.callback_applied,t,n)))}function x(t,e){!e||0<e.loadingCount||0<e.toLoadCount||d(t.callback_finish,e)}function M(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function N(t){return!!t.llEvLisnrs}function z(t){if(N(t)){var e,n,a=t.llEvLisnrs;for(e in a){var o=a[e];n=e,o=o,t.removeEventListener(n,o)}delete t.llEvLisnrs}}function C(t,e,n){var a;delete t.llTempImage,b(n,-1),(a=n)&&--a.toLoadCount,_(t,e.class_loading),e.unobserve_completed&&v(t,n)}function R(i,r,c){var l=g(i)||i;N(l)||function(t,e,n){N(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";M(t,a,e),M(t,"error",n)}(l,function(t){var e,n,a,o;n=r,a=c,o=u(e=i),C(e,n,a),f(e,n.class_loaded),s(e,ut),d(n.callback_loaded,e,a),o||x(n,a),z(l)},function(t){var e,n,a,o;n=r,a=c,o=u(e=i),C(e,n,a),f(e,n.class_error),s(e,ft),d(n.callback_error,e,a),o||x(n,a),z(l)})}function T(t,e,n){var a,o,i,r,c;t.llTempImage=document.createElement("IMG"),R(t,e,n),m(c=t)||(c[lt]={backgroundImage:c.style.backgroundImage}),i=n,r=l(a=t,(o=e).data_bg),c=l(a,o.data_bg_hidpi),(r=nt&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),k(a,o,i)),w(t,e,n)}function G(t,e,n){var a;R(t,e,n),a=e,e=n,(t=Et[(n=t).tagName])&&(t(n,a),k(n,a,e))}function D(t,e,n){var a;a=t,(-1<It.indexOf(a.tagName)?G:T)(t,e,n)}function S(t,e,n){var a;t.setAttribute("loading","lazy"),R(t,e,n),a=e,(e=Et[(n=t).tagName])&&e(n,a),s(t,_t)}function V(t){t.removeAttribute(ot),t.removeAttribute(it),t.removeAttribute(rt)}function j(t){h(t,function(t){L(t,mt)}),L(t,mt)}function F(t){var e;(e=yt[t.tagName])?e(t):m(e=t)&&(t=E(e),e.style.backgroundImage=t.backgroundImage)}function P(t,e){var n;F(t),n=e,r(e=t)||u(e)||(_(e,n.class_entered),_(e,n.class_exited),_(e,n.class_applied),_(e,n.class_loading),_(e,n.class_loaded),_(e,n.class_error)),i(t),I(t)}function U(t,e,n,a){var o;n.cancel_on_exit&&(c(t)!==st||"IMG"===t.tagName&&(z(t),h(o=t,function(t){V(t)}),V(o),j(t),_(t,n.class_loading),b(a,-1),i(t),d(n.callback_cancel,t,e,a)))}function $(t,e,n,a){var o,i,r=(i=t,0<=bt.indexOf(c(i)));s(t,"entered"),f(t,n.class_entered),_(t,n.class_exited),o=t,i=a,n.unobserve_entered&&v(o,i),d(n.callback_enter,t,e,a),r||D(t,n,a)}function q(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function H(t,o,i){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?$(t.target,t,o,i):(e=t.target,n=t,a=o,t=i,void(r(e)||(f(e,a.class_exited),U(e,n,a,t),d(a.callback_exit,e,n,t))));var e,n,a})}function B(e,n){var t;tt&&!q(e)&&(n._observer=new IntersectionObserver(function(t){H(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function J(t){return Array.prototype.slice.call(t)}function K(t){return t.container.querySelectorAll(t.elements_selector)}function Q(t){return c(t)===ft}function W(t,e){return e=t||K(e),J(e).filter(r)}function X(e,t){var n;(n=K(e),J(n).filter(Q)).forEach(function(t){_(t,e.class_error),i(t)}),t.update()}function t(t,e){var n,a,t=o(t);this._settings=t,this.loadingCount=0,B(t,this),n=t,a=this,Y&&window.addEventListener("online",function(){X(n,a)}),this.update(e)}var Y="undefined"!=typeof window,Z=Y&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),tt=Y&&"IntersectionObserver"in window,et=Y&&"classList"in document.createElement("p"),nt=Y&&1<window.devicePixelRatio,at={elements_selector:".lazy",container:Z||Y?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",it="srcset",rt="sizes",ct="poster",lt="llOriginalAttrs",st="loading",ut="loaded",dt="applied",ft="error",_t="native",gt="data-",vt="ll-status",bt=[st,ut,dt,ft],pt=[ot],ht=[ot,ct],mt=[ot,it,rt],Et={IMG:function(t,e){h(t,function(t){y(t,mt),O(t,e)}),y(t,mt),O(t,e)},IFRAME:function(t,e){y(t,pt),A(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){y(t,pt),A(t,ot,l(t,e.data_src))}),y(t,ht),A(t,ct,l(t,e.data_poster)),A(t,ot,l(t,e.data_src)),t.load()}},It=["IMG","IFRAME","VIDEO"],yt={IMG:j,IFRAME:function(t){L(t,pt)},VIDEO:function(t){a(t,function(t){L(t,pt)}),L(t,ht),t.load()}},Lt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,o=this._settings,i=W(t,o);{if(p(this,i.length),!Z&&tt)return q(o)?(e=o,n=this,i.forEach(function(t){-1!==Lt.indexOf(t.tagName)&&S(t,e,n)}),void p(n,0)):(t=this._observer,o=i,t.disconnect(),a=t,void o.forEach(function(t){a.observe(t)}));this.loadAll(i)}},destroy:function(){this._observer&&this._observer.disconnect(),K(this._settings).forEach(function(t){I(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;W(t,n).forEach(function(t){v(t,e),D(t,n,e)})},restoreAll:function(){var e=this._settings;K(e).forEach(function(t){P(t,e)})}},t.load=function(t,e){e=o(e);D(t,e)},t.resetStatus=function(t){i(t)},t}),function(t,e){"use strict";function n(){e.body.classList.add("litespeed_lazyloaded")}function a(){console.log("[LiteSpeed] Start Lazy Load"),o=new LazyLoad(Object.assign({},t.lazyLoadOptions||{},{elements_selector:"[data-lazyloaded]",callback_finish:n})),i=function(){o.update()},t.MutationObserver&&new MutationObserver(i).observe(e.documentElement,{childList:!0,subtree:!0,attributes:!0})}var o,i;t.addEventListener?t.addEventListener("load",a,!1):t.attachEvent("onload",a)}(window,document);</script></body>
</html>

CSS

body {
    font-family: Arial, sans-serif;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background: #f5f5f5;
}

h1 {
    color: #7B63FF;
    text-align: center;
}

p {
    color: #64748b;
    line-height: 1.6;
}

Preview

`;const blob = new Blob([fullHTML], { type: 'text/html' }); const url = URL.createObjectURL(blob); previewFrame.src = url; }// Extract body content from full HTML function extractBodyContent(html) { const parser = new DOMParser(); const doc = parser.parseFromString(html, 'text/html'); const body = doc.querySelector('body'); if (body) { return body.innerHTML; } const main = doc.querySelector('main'); if (main) { return main.innerHTML; } return html; }// Format HTML function formatHTML() { try { const html = htmlEditor.value; // Simple HTML formatting (basic indentation) let formatted = html .replace(/>\s+<') .replace(/>\n<'); // Add indentation let indent = 0; const lines = formatted.split('\n'); formatted = lines.map(line => { const trimmed = line.trim(); if (!trimmed) return ''; if (trimmed.startsWith('')) { indent++; } return indented; }).join('\n'); htmlEditor.value = formatted; showToast('HTML formatado com sucesso!', 'success'); } catch (error) { showToast('Erro ao formatar HTML', 'error'); } }// Format CSS function formatCSS() { try { const css = cssEditor.value; let formatted = css .replace(/\s*\{\s*/g, ' {\n ') .replace(/\s*\}\s*/g, '\n}\n') .replace(/\s*;\s*/g, ';\n ') .replace(/\s*:\s*/g, ': ') .replace(/;\s*\n\s*\}/g, ';\n}') .replace(/\n\s*\n\s*\n/g, '\n\n'); cssEditor.value = formatted.trim(); showToast('CSS formatado com sucesso!', 'success'); } catch (error) { showToast('Erro ao formatar CSS', 'error'); } }// Clear functions function clearHTML() { if (confirm('Tem certeza que deseja limpar o HTML?')) { htmlEditor.value = ''; updatePreview(); } }function clearCSS() { if (confirm('Tem certeza que deseja limpar o CSS?')) { cssEditor.value = ''; updatePreview(); } }function clearAll() { if (confirm('Tem certeza que deseja limpar tudo? Esta ação não pode ser desfeita.')) { htmlEditor.value = ''; cssEditor.value = ''; updatePreview(); showToast('Tudo foi limpo!', 'info'); } }// Save to localStorage function saveToStorage() { try { const data = { html: htmlEditor.value, css: cssEditor.value, timestamp: new Date().toISOString() }; localStorage.setItem('htmlCssEditor', JSON.stringify(data)); showToast('Código salvo com sucesso!', 'success'); return true; } catch (error) { console.error('Erro ao salvar:', error); showToast('Erro ao salvar código: ' + error.message, 'error'); return false; } } // Auto-save functionality let autoSaveTimeout; function autoSave() { clearTimeout(autoSaveTimeout); autoSaveTimeout = setTimeout(() => { try { const data = { html: htmlEditor.value, css: cssEditor.value, timestamp: new Date().toISOString() }; localStorage.setItem('htmlCssEditor', JSON.stringify(data)); } catch (error) { console.error('Erro no auto-save:', error); } }, 2000); // Auto-save após 2 segundos de inatividade } // Enable auto-save on input [htmlEditor, cssEditor].forEach(editor => { editor.addEventListener('input', autoSave); });// Toggle load menu function toggleLoadMenu() { const menu = document.getElementById('loadMenuDropdown'); menu.classList.toggle('show'); }// Hide load menu function hideLoadMenu() { const menu = document.getElementById('loadMenuDropdown'); menu.classList.remove('show'); }// Load HTML file function loadHTMLFile() { const fileInput = document.getElementById('fileInput'); fileInput.accept = '.html,.htm'; fileInput.multiple = false; fileInput.click(); }// Load CSS file function loadCSSFile() { const fileInput = document.getElementById('fileInput'); fileInput.accept = '.css'; fileInput.multiple = false; fileInput.click(); }// Load HTML and CSS files function loadHTMLAndCSSFiles() { const fileInput = document.getElementById('fileInput'); fileInput.accept = '.html,.css,.htm'; fileInput.multiple = true; fileInput.click(); }// Close menu when clicking outside document.addEventListener('click', (e) => { const menu = document.getElementById('loadMenuDropdown'); const button = e.target.closest('.load-menu'); if (!button && menu.classList.contains('show')) { hideLoadMenu(); } const templatesMenu = document.getElementById('templatesMenuDropdown'); const templatesButton = e.target.closest('.templates-menu'); if (!templatesButton && templatesMenu.classList.contains('show')) { hideTemplatesMenu(); } });// Templates Database const templates = { buttons: [ { name: 'Botão Primário', desc: 'Botão estilo primário moderno', html: '', css: `.btn-primary { background: linear-gradient(135deg, #7B63FF 0%, #5BFCAF 100%); color: white; border: none; padding: 12px 24px; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(123, 99, 255, 0.3); }.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(123, 99, 255, 0.4); }` }, { name: 'Botão Outline', desc: 'Botão com borda', html: '', css: `.btn-outline { background: transparent; color: #7B63FF; border: 2px solid #7B63FF; padding: 12px 24px; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; }.btn-outline:hover { background: #7B63FF; color: white; transform: translateY(-2px); }` }, { name: 'Botão com Ícone', desc: 'Botão com ícone Font Awesome', html: '', css: `.btn-icon { background: #0D81FF; color: white; border: none; padding: 12px 24px; border-radius: 8px; font-size: 16px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: all 0.3s ease; }.btn-icon i { color: #ffffff; font-size: 18px; }.btn-icon:hover { background: #0c6fe6; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(13, 129, 255, 0.3); }.btn-icon:hover i { color: #ffffff; }` }, { name: 'Botão Rounded', desc: 'Botão totalmente arredondado', html: '', css: `.btn-rounded { background: #5BFCAF; color: #1e293b; border: none; padding: 12px 32px; border-radius: 50px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; }.btn-rounded:hover { background: #4ae89d; transform: scale(1.05); }` } ], forms: [ { name: 'Formulário de Login', desc: 'Formulário completo de login', html: ``, css: `.login-form { max-width: 400px; margin: 50px auto; padding: 40px; background: white; border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); }.login-form h2 { margin-bottom: 30px; color: #1e293b; text-align: center; }.form-group { margin-bottom: 20px; }.form-group label { display: block; margin-bottom: 8px; color: #64748b; font-weight: 500; font-size: 14px; }.form-group input[type="email"], .form-group input[type="password"] { width: 100%; padding: 12px 16px; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 16px; transition: all 0.3s ease; box-sizing: border-box; }.form-group input[type="email"]:valid { border-color: #5BFCAF; }.form-group input[type="email"]:invalid:not(:placeholder-shown) { border-color: #FF4040; }.form-group input:focus { outline: none; border-color: #7B63FF; box-shadow: 0 0 0 3px rgba(123, 99, 255, 0.1); }.checkbox-label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; margin: 0; }.checkbox-label input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: #7B63FF; margin: 0; }.checkbox-label span { user-select: none; }.btn-submit { width: 100%; background: linear-gradient(135deg, #7B63FF 0%, #5BFCAF 100%); color: white; border: none; padding: 14px; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; margin-top: 10px; }.btn-submit:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(123, 99, 255, 0.3); }.form-link { text-align: center; margin-top: 20px; }.form-link a { color: #7B63FF; text-decoration: none; font-size: 14px; }.form-link a:hover { text-decoration: underline; }` }, { name: 'Formulário de Contato', desc: 'Formulário de contato completo', html: ``, css: `.contact-form { max-width: 600px; margin: 50px auto; padding: 40px; background: white; border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); }.contact-form h2 { margin-bottom: 30px; color: #1e293b; text-align: center; }.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }.form-group { margin-bottom: 20px; }.form-group label { display: block; margin-bottom: 8px; color: #64748b; font-weight: 500; font-size: 14px; }.form-group input, .form-group textarea { width: 100%; padding: 12px 16px; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 16px; font-family: inherit; transition: all 0.3s ease; box-sizing: border-box; }.form-group input[type="email"]:valid { border-color: #5BFCAF; }.form-group input[type="email"]:invalid:not(:placeholder-shown) { border-color: #FF4040; }.form-group input[type="tel"]:valid { border-color: #5BFCAF; }.form-group input[type="tel"]:invalid:not(:placeholder-shown) { border-color: #FF4040; }.form-group input:focus, .form-group textarea:focus { outline: none; border-color: #7B63FF; box-shadow: 0 0 0 3px rgba(123, 99, 255, 0.1); }.form-group textarea { resize: vertical; min-height: 120px; }.btn-submit { width: 100%; background: #7B63FF; color: white; border: none; padding: 14px; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; }.btn-submit:hover { background: #6247e5; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(123, 99, 255, 0.3); }@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }` }, { name: 'Formulário de Registro', desc: 'Formulário de cadastro/registro', html: ``, css: `.register-form { max-width: 500px; margin: 50px auto; padding: 40px; background: white; border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); }.register-form h2 { margin-bottom: 30px; color: #1e293b; text-align: center; }.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }.form-group { margin-bottom: 20px; }.form-group label { display: block; margin-bottom: 8px; color: #64748b; font-weight: 500; font-size: 14px; }.form-group input { width: 100%; padding: 12px 16px; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 16px; transition: all 0.3s ease; box-sizing: border-box; }.form-group input[type="email"]:valid { border-color: #5BFCAF; }.form-group input[type="email"]:invalid:not(:placeholder-shown) { border-color: #FF4040; }.form-group input:focus { outline: none; border-color: #7B63FF; box-shadow: 0 0 0 3px rgba(123, 99, 255, 0.1); }.checkbox-label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; margin: 0; }.checkbox-label input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: #7B63FF; margin: 0; }.checkbox-label span { user-select: none; }.checkbox-label a { color: #7B63FF; text-decoration: none; }.checkbox-label a:hover { text-decoration: underline; }.btn-submit { width: 100%; background: linear-gradient(135deg, #7B63FF 0%, #5BFCAF 100%); color: white; border: none; padding: 14px; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; margin-top: 10px; }.btn-submit:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(123, 99, 255, 0.3); }.form-link { text-align: center; margin-top: 20px; color: #64748b; font-size: 14px; }.form-link a { color: #7B63FF; text-decoration: none; font-weight: 500; }.form-link a:hover { text-decoration: underline; }` } ], emails: [ { name: 'E-mail Marketing', desc: 'Template de e-mail marketing responsivo', html: `E-mail Marketing

Promoção Especial!

Olá, Cliente!

Temos uma oferta especial para você:

Aproveitar Oferta

Esta oferta é válida por tempo limitado. Não perca!

`, css: `body { margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f4f4f4; }.email-wrapper { width: 100%; background-color: #f4f4f4; padding: 20px 0; }.email-container { max-width: 600px; background-color: #ffffff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }.email-header { background: linear-gradient(135deg, #7B63FF 0%, #5BFCAF 100%); padding: 40px 20px; color: white; }.email-header h1 { margin: 0; font-size: 28px; }.email-body { padding: 40px 30px; color: #333333; line-height: 1.6; }.email-body h2 { color: #1e293b; margin-top: 0; }.cta-button { text-align: center; margin: 30px 0; }.cta-button a { display: inline-block; background: #7B63FF; color: white; padding: 15px 40px; text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px; }.email-footer { background-color: #f8fafc; padding: 20px; color: #64748b; font-size: 12px; }.email-footer a { color: #7B63FF; text-decoration: none; }@media only screen and (max-width: 600px) { .email-container { width: 100% !important; } .email-body { padding: 30px 20px !important; } }` }, { name: 'E-mail Newsletter', desc: 'Template de newsletter', html: `Newsletter

Mês de Dezembro - 2024

Últimas Notícias

Título da Notícia 1

Resumo da notícia importante que você precisa saber...

Ler mais →

Título da Notícia 2

Outra notícia interessante para compartilhar...

Ler mais →

`, css: `body { margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f4f4f4; }.email-wrapper { width: 100%; background-color: #f4f4f4; padding: 20px 0; }.email-container { max-width: 600px; background-color: #ffffff; border-radius: 8px; overflow: hidden; }.email-header { background: #1e293b; padding: 40px 20px; color: white; text-align: center; }.email-header h1 { margin: 0 0 10px 0; font-size: 32px; }.email-header p { margin: 0; opacity: 0.9; }.email-content { padding: 40px 30px; }.email-content h2 { color: #1e293b; margin-top: 0; border-bottom: 2px solid #e2e8f0; padding-bottom: 10px; }.news-item { margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid #e2e8f0; }.news-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }.news-item h3 { color: #7B63FF; margin-top: 0; }.read-more { color: #7B63FF; text-decoration: none; font-weight: 600; }.read-more:hover { text-decoration: underline; }.email-footer { background-color: #f8fafc; padding: 20px; color: #64748b; font-size: 12px; text-align: center; }.email-footer a { color: #7B63FF; text-decoration: none; }@media only screen and (max-width: 600px) { .email-container { width: 100% !important; } .email-content { padding: 30px 20px !important; } }` }, { name: 'E-mail com Logo', desc: 'Template de e-mail com logo no cabeçalho', html: `E-mail com Logo

Bem-vindo!

Olá, Cliente!

Obrigado por se juntar a nós. Estamos muito felizes em tê-lo conosco!

Confira nossas ofertas especiais e novidades exclusivas.

Explorar Agora

`, css: `body { margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f4f4f4; }.email-wrapper { width: 100%; background-color: #f4f4f4; padding: 20px 0; }.email-container { max-width: 600px; background-color: #ffffff; border-radius: 8px; overflow: hidden; }.email-header { background: linear-gradient(135deg, #7B63FF 0%, #5BFCAF 100%); padding: 30px 20px; color: white; text-align: center; }.email-logo { max-width: 200px; height: auto; margin-bottom: 20px; display: block; margin-left: auto; margin-right: auto; }.email-header h1 { margin: 0; font-size: 28px; }.email-body { padding: 40px 30px; color: #333333; line-height: 1.6; }.email-body h2 { color: #1e293b; margin-top: 0; }.cta-button { text-align: center; margin: 30px 0; }.cta-button a { display: inline-block; background: #7B63FF; color: white; padding: 15px 40px; text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px; }.email-footer { background-color: #f8fafc; padding: 20px; color: #64748b; font-size: 12px; }.email-footer a { color: #7B63FF; text-decoration: none; }@media only screen and (max-width: 600px) { .email-container { width: 100% !important; } .email-body { padding: 30px 20px !important; } .email-logo { max-width: 150px !important; } }` }, { name: 'E-mail com Colunas', desc: 'Template de e-mail com layout em colunas', html: `E-mail com Colunas

Nossos Produtos

Produto 1

Descrição do produto interessante aqui.

Saiba mais →

Produto 2

Outra descrição de produto aqui.

Saiba mais →

`, css: `body { margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f4f4f4; }.email-wrapper { width: 100%; background-color: #f4f4f4; padding: 20px 0; }.email-container { max-width: 600px; background-color: #ffffff; border-radius: 8px; overflow: hidden; }.email-header { background: #7B63FF; padding: 40px 20px; color: white; text-align: center; }.email-header h1 { margin: 0; font-size: 28px; }.email-content { padding: 40px 30px; }.column { padding: 0; }.product-box { background: #f8fafc; padding: 20px; border-radius: 8px; border: 1px solid #e2e8f0; }.product-box h3 { color: #1e293b; margin-top: 0; margin-bottom: 10px; }.product-box p { color: #64748b; font-size: 14px; line-height: 1.6; margin-bottom: 15px; }.product-link { color: #7B63FF; text-decoration: none; font-weight: 600; font-size: 14px; }.product-link:hover { text-decoration: underline; }.email-footer { background-color: #f8fafc; padding: 20px; color: #64748b; font-size: 12px; }@media only screen and (max-width: 600px) { .column { width: 100% !important; display: block !important; margin-bottom: 20px; } .email-content { padding: 30px 20px !important; } }` }, { name: 'E-mail Marketing Simples', desc: 'Template de e-mail marketing minimalista', html: `E-mail Marketing Simples

Oferta Especial

Aproveite nossa promoção exclusiva!

Desconto de até 50% em produtos selecionados. Válido por tempo limitado.

Ver Ofertas

Esta oferta expira em 48 horas. Não perca!

`, css: `body { margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f4f4f4; }.email-wrapper { width: 100%; background-color: #f4f4f4; padding: 20px 0; }.email-container { max-width: 600px; background-color: #ffffff; border-radius: 8px; overflow: hidden; }.email-body { padding: 50px 40px; color: #333333; line-height: 1.6; text-align: center; }.email-body h1 { color: #1e293b; margin-top: 0; margin-bottom: 15px; font-size: 32px; }.lead { font-size: 20px; color: #7B63FF; font-weight: 600; margin-bottom: 20px; }.email-body p { color: #64748b; margin-bottom: 15px; }.cta-button { margin: 30px 0; }.cta-button a { display: inline-block; background: #7B63FF; color: white; padding: 15px 40px; text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px; }.small { font-size: 12px; color: #94a3b8; margin-top: 20px; }.email-footer { background-color: #f8fafc; padding: 20px; color: #64748b; font-size: 12px; }@media only screen and (max-width: 600px) { .email-container { width: 100% !important; } .email-body { padding: 40px 30px !important; } }` } ], cards: [ { name: 'Card de Produto', desc: 'Card para exibir produtos', html: `

Novo

Nome do Produto

Descrição breve do produto aqui.

R$ 99,90

`, css: `.product-card { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; max-width: 300px; }.product-card:hover { transform: translateY(-5px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15); }.product-image { position: relative; width: 100%; height: 200px; overflow: hidden; }.product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }.product-card:hover .product-image img { transform: scale(1.05); }.product-badge { position: absolute; top: 10px; right: 10px; background: #5BFCAF; color: #1e293b; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; }.product-info { padding: 20px; }.product-title { margin: 0 0 10px 0; color: #1e293b; font-size: 20px; }.product-description { color: #64748b; font-size: 14px; margin: 0 0 15px 0; line-height: 1.5; }.product-price { font-size: 24px; font-weight: 700; color: #7B63FF; margin-bottom: 15px; }.product-button { width: 100%; background: #7B63FF; color: white; border: none; padding: 12px; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; }.product-button:hover { background: #6247e5; transform: translateY(-2px); }` }, { name: 'Card de Artigo', desc: 'Card para blog/artigos', html: `

Tecnologia

Título do Artigo

Resumo do artigo que será exibido aqui. Este é um exemplo de texto de resumo...

15 Dez, 2024 Por João Silva

Ler mais →

`, css: `.article-card { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; max-width: 400px; }.article-card:hover { transform: translateY(-5px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15); }.article-image { width: 100%; height: 250px; overflow: hidden; }.article-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }.article-card:hover .article-image img { transform: scale(1.05); }.article-content { padding: 25px; }.article-category { display: inline-block; background: rgba(123, 99, 255, 0.1); color: #7B63FF; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; margin-bottom: 15px; }.article-title { margin: 0 0 15px 0; color: #1e293b; font-size: 24px; line-height: 1.3; }.article-excerpt { color: #64748b; font-size: 14px; line-height: 1.6; margin: 0 0 20px 0; }.article-meta { display: flex; gap: 15px; font-size: 12px; color: #94a3b8; margin-bottom: 20px; }.article-link { color: #7B63FF; text-decoration: none; font-weight: 600; font-size: 14px; transition: all 0.3s ease; }.article-link:hover { color: #6247e5; text-decoration: underline; }` }, { name: 'Card de Informação', desc: 'Card para exibir informações', html: `

Título da Informação

Novo

Esta é uma descrição detalhada da informação que você deseja compartilhar com seus usuários.

Item de informação 1
Item de informação 2
Item de informação 3

`, css: `.info-card { background: white; border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; max-width: 350px; overflow: hidden; }.info-card:hover { transform: translateY(-5px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15); }.info-header { background: linear-gradient(135deg, #7B63FF 0%, #5BFCAF 100%); padding: 20px; display: flex; justify-content: space-between; align-items: center; }.info-title { margin: 0; color: white; font-size: 20px; font-weight: 600; }.info-badge { background: rgba(255, 255, 255, 0.3); color: white; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; }.info-content { padding: 25px; }.info-description { color: #64748b; font-size: 14px; line-height: 1.6; margin: 0 0 20px 0; }.info-list { list-style: none; padding: 0; margin: 0; }.info-list li { padding: 8px 0; color: #1e293b; font-size: 14px; border-bottom: 1px solid #e2e8f0; padding-left: 25px; position: relative; }.info-list li:last-child { border-bottom: none; }.info-list li:before { content: "✓"; position: absolute; left: 0; color: #5BFCAF; font-weight: bold; }.info-footer { padding: 20px 25px; background: #f8fafc; border-top: 1px solid #e2e8f0; }.info-link { color: #7B63FF; text-decoration: none; font-weight: 600; font-size: 14px; transition: all 0.3s ease; }.info-link:hover { color: #6247e5; text-decoration: underline; }` }, { name: 'Card com Ícone', desc: 'Card destacado com ícone', html: `

Título do Card

Descrição do conteúdo do card. Este é um exemplo de card com ícone destacado.

Ver mais →

`, css: `.icon-card { background: white; border-radius: 12px; padding: 30px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; max-width: 300px; text-align: center; }.icon-card:hover { transform: translateY(-5px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15); }.icon-card-icon { width: 80px; height: 80px; background: linear-gradient(135deg, #7B63FF 0%, #5BFCAF 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; transition: all 0.3s ease; }.icon-card:hover .icon-card-icon { transform: scale(1.1) rotate(5deg); }.icon-card-icon i { font-size: 36px; color: white; }.icon-card-title { margin: 0 0 15px 0; color: #1e293b; font-size: 22px; font-weight: 600; }.icon-card-description { color: #64748b; font-size: 14px; line-height: 1.6; margin: 0 0 20px 0; }.icon-card-link { color: #7B63FF; text-decoration: none; font-weight: 600; font-size: 14px; transition: all 0.3s ease; }.icon-card-link:hover { color: #6247e5; text-decoration: underline; }` } ] };// Initialize templates menu function initTemplatesMenu() { const menu = document.getElementById('templatesMenuDropdown'); let html = '';Object.keys(templates).forEach((category, index) => { const categoryName = { buttons: 'Botões', forms: 'Formulários', emails: 'E-mails', cards: 'Cards' }[category] || category;html += `

${categoryName}

`;templates[category].forEach((template, templateIndex) => { html += `

${template.name}

${template.desc}

`; });html += `

`; });menu.innerHTML = html; }// Toggle category function toggleCategory(category) { const content = document.getElementById(`content-${category}`); const icon = document.getElementById(`icon-${category}`); if (content.classList.contains('show')) { content.classList.remove('show'); icon.style.transform = 'rotate(0deg)'; } else { content.classList.add('show'); icon.style.transform = 'rotate(90deg)'; } }// Insert template function insertTemplate(category, index) { const template = templates[category][index]; // Insert HTML const htmlPos = htmlEditor.selectionStart; const htmlBefore = htmlEditor.value.substring(0, htmlPos); const htmlAfter = htmlEditor.value.substring(htmlPos); htmlEditor.value = htmlBefore + '\n' + template.html + '\n' + htmlAfter; const newHtmlPos = htmlPos + template.html.length + 2; htmlEditor.setSelectionRange(newHtmlPos, newHtmlPos); htmlEditor.focus(); // Insert CSS const cssPos = cssEditor.selectionStart; const cssBefore = cssEditor.value.substring(0, cssPos); const cssAfter = cssEditor.value.substring(cssPos); cssEditor.value = cssBefore + '\n' + template.css + '\n' + cssAfter; const newCssPos = cssPos + template.css.length + 2; cssEditor.setSelectionRange(newCssPos, newCssPos); // Update preview updatePreview(); // Hide menu hideTemplatesMenu(); // Show toast showToast(`Template "${template.name}" inserido com sucesso!`, 'success'); }// Toggle templates menu function toggleTemplatesMenu() { const menu = document.getElementById('templatesMenuDropdown'); menu.classList.toggle('show'); if (menu.classList.contains('show') && menu.innerHTML === '') { initTemplatesMenu(); } }// Hide templates menu function hideTemplatesMenu() { const menu = document.getElementById('templatesMenuDropdown'); menu.classList.remove('show'); }// Load from localStorage function loadFromStorage() { try { const saved = localStorage.getItem('htmlCssEditor'); if (saved) { const data = JSON.parse(saved); htmlEditor.value = data.html || ''; cssEditor.value = data.css || ''; updatePreview(); showToast('Código carregado do armazenamento local com sucesso!', 'success'); return true; } else { showToast('Nenhum código salvo encontrado', 'info'); return false; } } catch (error) { console.error('Erro ao carregar:', error); showToast('Erro ao carregar código: ' + error.message, 'error'); return false; } }// Handle file upload function handleFileUpload(event) { const files = event.target.files; if (!files || files.length === 0) { return; }let htmlContent = ''; let cssContent = ''; let filesProcessed = 0; const totalFiles = files.length;Array.from(files).forEach((file) => { const reader = new FileReader(); reader.onload = (e) => { const content = e.target.result; const fileName = file.name.toLowerCase(); if (fileName.endsWith('.html') || fileName.endsWith('.htm')) { // Extract HTML content if (content.includes(' { if (cssContent) cssContent += '\n\n'; cssContent += style.textContent; }); } else { // Just HTML fragment htmlContent = content; } } else if (fileName.endsWith('.css')) { // CSS file if (cssContent) cssContent += '\n\n'; cssContent += content; } else { // Try to detect content type if (content.trim().startsWith(' { filesProcessed++; showToast(`Erro ao ler o arquivo: ${file.name}`, 'error'); if (filesProcessed === totalFiles) { event.target.value = ''; } }; reader.readAsText(file); }); }// Download code function downloadCode() { const html = htmlEditor.value; const css = cssEditor.value; const fullHTML = `Documento ${html.includes('window.lazyLoadOptions=Object.assign({},{threshold:300},window.lazyLoadOptions||{});!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e`;const blob = new Blob([fullHTML], { type: 'text/html' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'codigo.html'; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); showToast('Código baixado com sucesso!', 'success'); }// Open in new tab function openInNewTab() { const html = htmlEditor.value; const css = cssEditor.value; // Clean HTML - remove unnecessary tags let cleanHTML = html; cleanHTML = cleanHTML.replace(/]*>/gi, ''); cleanHTML = cleanHTML.replace(/]*>/gi, ''); cleanHTML = cleanHTML.replace(/<\/html>/gi, ''); cleanHTML = cleanHTML.replace(/]*>[\s\S]*?<\/head>/gi, ''); cleanHTML = cleanHTML.replace(/]*>/gi, ''); cleanHTML = cleanHTML.replace(/]*>[\s\S]*?<\/title>/gi, ''); cleanHTML = cleanHTML.replace(/]*>/gi, ''); cleanHTML = cleanHTML.replace(/<\/body>/gi, ''); cleanHTML = cleanHTML.replace(/]*>/gi, ''); cleanHTML = cleanHTML.replace(/<\/main>/gi, ''); if (html.includes(' ${cleanHTML} `;const newWindow = window.open(); newWindow.document.write(fullHTML); newWindow.document.close(); }// Autocomplete functionality let autocompleteState = { active: false, selectedIndex: 0, suggestions: [], startPos: 0, endPos: 0 };// Get cursor position in textarea function getCaretPosition(textarea) { return textarea.selectionStart; }// Set cursor position in textarea function setCaretPosition(textarea, pos) { textarea.setSelectionRange(pos, pos); }// Get current word being typed function getCurrentWord(textarea, pos) { const text = textarea.value; let start = pos; let end = pos;// Find start of word while (start > 0 && /[\w-]/.test(text[start - 1])) { start--; }// Find end of word while (end < text.length && /[\w-]/.test(text[end])) { end++; }return { word: text.substring(start, end), start: start, end: end }; }// Show autocomplete dropdown function showAutocomplete(editor, dropdown, suggestions, startPos, endPos) { if (suggestions.length === 0) { hideAutocomplete(dropdown); return; }autocompleteState.active = true; autocompleteState.suggestions = suggestions; autocompleteState.selectedIndex = 0; autocompleteState.startPos = startPos; autocompleteState.endPos = endPos;// Clear and populate dropdown dropdown.innerHTML = ''; suggestions.forEach((suggestion, index) => { const item = document.createElement('div'); item.className = 'autocomplete-item' + (index === 0 ? ' selected' : ''); item.innerHTML = ` ${suggestion.name} ${suggestion.desc || ''} `; item.addEventListener('click', () => { insertAutocomplete(editor, suggestion.name, startPos, endPos); }); dropdown.appendChild(item); });// Position dropdown const editorRect = editor.getBoundingClientRect(); const containerRect = editor.parentElement.getBoundingClientRect(); const scrollTop = editor.scrollTop; const scrollLeft = editor.scrollLeft; const lineHeight = 20; const charWidth = 8; const cursorPos = getCaretPosition(editor); const textBeforeCursor = editor.value.substring(0, cursorPos); const lines = textBeforeCursor.split('\n'); const line = lines.length - 1; const column = lines[lines.length - 1].length;// Calculate position relative to container const top = (line + 1) * lineHeight - scrollTop + 0.75 * 16; // 0.75rem padding const left = column * charWidth - scrollLeft + 0.75 * 16; // 0.75rem padding dropdown.style.top = `${Math.max(5, top)}px`; dropdown.style.left = `${Math.max(5, left)}px`; dropdown.classList.add('show'); // Scroll to first item const firstItem = dropdown.querySelector('.autocomplete-item'); if (firstItem) { firstItem.scrollIntoView({ behavior: 'auto', block: 'nearest' }); } }// Hide autocomplete dropdown function hideAutocomplete(dropdown) { dropdown.classList.remove('show'); autocompleteState.active = false; autocompleteState.suggestions = []; }// Insert autocomplete suggestion function insertAutocomplete(editor, text, startPos, endPos) { const before = editor.value.substring(0, startPos); const after = editor.value.substring(endPos); editor.value = before + text + after; setCaretPosition(editor, startPos + text.length); hideAutocomplete(editor.id === 'htmlEditor' ? htmlAutocomplete : cssAutocomplete); editor.focus(); }// Handle HTML autocomplete function handleHTMLAutocomplete(editor, e) { const pos = getCaretPosition(editor); const text = editor.value; const char = text[pos - 1];// Check if we're typing a tag (after <) if (char === '<' || (char && /[\w-]/.test(char))) { // Get text from last < to cursor const lastOpenBracket = text.lastIndexOf('<', pos - 1); if (lastOpenBracket !== -1) { const textAfterBracket = text.substring(lastOpenBracket + 1, pos); // Check if we haven't closed the tag yet if (!textAfterBracket.includes('>') && !textAfterBracket.includes(' ')) { const searchTerm = textAfterBracket.toLowerCase(); const suggestions = htmlTags .filter(tag => tag.name.toLowerCase().startsWith(searchTerm)) .slice(0, 10);if (suggestions.length > 0 && searchTerm.length > 0) { const startPos = lastOpenBracket + 1; const endPos = pos; showAutocomplete(editor, htmlAutocomplete, suggestions, startPos, endPos); } else if (char === '<') { // Show all tags when just typing < const suggestions = htmlTags.slice(0, 10); showAutocomplete(editor, htmlAutocomplete, suggestions, pos, pos); } else { hideAutocomplete(htmlAutocomplete); } } else { hideAutocomplete(htmlAutocomplete); } } else if (char === '<') { // Show all tags when just typing < const suggestions = htmlTags.slice(0, 10); showAutocomplete(editor, htmlAutocomplete, suggestions, pos, pos); } else { hideAutocomplete(htmlAutocomplete); } } else { hideAutocomplete(htmlAutocomplete); } }// Handle CSS autocomplete function handleCSSAutocomplete(editor, e) { const pos = getCaretPosition(editor); const text = editor.value; const lineStart = text.lastIndexOf('\n', pos - 1) + 1; const lineText = text.substring(lineStart, pos); // Check if we're typing a property (before :) if (!lineText.includes(':')) { const wordInfo = getCurrentWord(editor, pos); const word = wordInfo.word.toLowerCase();if (word.length > 0 && /^[a-z-]+$/.test(word)) { const suggestions = cssProperties .filter(prop => prop.name.toLowerCase().startsWith(word)) .slice(0, 15);if (suggestions.length > 0) { const startPos = wordInfo.start; const endPos = wordInfo.end; showAutocomplete(editor, cssAutocomplete, suggestions, startPos, endPos); } else { hideAutocomplete(cssAutocomplete); } } else { hideAutocomplete(cssAutocomplete); } } else { // We're typing a value (after :) const colonPos = lineText.lastIndexOf(':'); if (colonPos !== -1) { const propertyName = lineText.substring(0, colonPos).trim().toLowerCase(); const valueText = lineText.substring(colonPos + 1).trim(); // Find the property const property = cssProperties.find(prop => prop.name.toLowerCase() === propertyName); if (property && property.values) { const wordInfo = getCurrentWord(editor, pos); const word = wordInfo.word.toLowerCase(); const suggestions = property.values .filter(val => val.toLowerCase().startsWith(word) || word.length === 0) .map(val => ({ name: val, desc: `Valor para ${property.name}` })) .slice(0, 15);if (suggestions.length > 0) { const startPos = wordInfo.start; const endPos = wordInfo.end; showAutocomplete(editor, cssAutocomplete, suggestions, startPos, endPos); } else { hideAutocomplete(cssAutocomplete); } } else { hideAutocomplete(cssAutocomplete); } } else { hideAutocomplete(cssAutocomplete); } } }// Auto-indentation for HTML function handleHTMLIndentation(editor, e) { if (e.key === 'Enter') { e.preventDefault(); const pos = getCaretPosition(editor); const text = editor.value; const beforeCursor = text.substring(0, pos); const afterCursor = text.substring(pos); // Get current line const lineStart = beforeCursor.lastIndexOf('\n') + 1; const currentLine = beforeCursor.substring(lineStart); // Calculate indentation const match = currentLine.match(/^(\s*)/); const currentIndent = match ? match[1] : ''; // Check if we're inside a tag const lastOpenTag = beforeCursor.lastIndexOf('<'); const lastCloseTag = beforeCursor.lastIndexOf('>'); const isInTag = lastOpenTag > lastCloseTag; // Check if current line ends with opening tag const openTagMatch = currentLine.match(/<(\w+)[^>]*>$/); const isOpeningTag = openTagMatch && !currentLine.includes(' { const currentPos = getCaretPosition(editor); const before = editor.value.substring(0, currentPos); const after = editor.value.substring(currentPos); editor.value = before + '\n' + currentIndent + '' + after; setCaretPosition(editor, currentPos); }, 0); } } } // Handle Tab for indentation if (e.key === 'Tab') { e.preventDefault(); const pos = getCaretPosition(editor); const text = editor.value; const before = text.substring(0, pos); const after = text.substring(pos); if (e.shiftKey) { // Unindent const lineStart = before.lastIndexOf('\n') + 1; const lineEnd = after.indexOf('\n') === -1 ? text.length : pos + after.indexOf('\n'); const line = text.substring(lineStart, lineEnd); if (line.startsWith(' ')) { editor.value = before.substring(0, lineStart) + line.substring(4) + after; setCaretPosition(editor, Math.max(lineStart, pos - 4)); } } else { // Indent editor.value = before + ' ' + after; setCaretPosition(editor, pos + 4); } } }// Auto-indentation for CSS function handleCSSIndentation(editor, e) { if (e.key === 'Enter') { e.preventDefault(); const pos = getCaretPosition(editor); const text = editor.value; const beforeCursor = text.substring(0, pos); const afterCursor = text.substring(pos); // Get current line const lineStart = beforeCursor.lastIndexOf('\n') + 1; const currentLine = beforeCursor.substring(lineStart); // Calculate indentation const match = currentLine.match(/^(\s*)/); const currentIndent = match ? match[1] : ''; // Check if we're inside a block const lastOpenBrace = beforeCursor.lastIndexOf('{'); const lastCloseBrace = beforeCursor.lastIndexOf('}'); const isInBlock = lastOpenBrace > lastCloseBrace; let newIndent = currentIndent; if (isInBlock && currentLine.trim().endsWith('{')) { newIndent = currentIndent + ' '; } else if (isInBlock) { newIndent = currentIndent; } // Insert newline with indentation const newText = beforeCursor + '\n' + newIndent + afterCursor; editor.value = newText; // Set cursor position const newPos = pos + 1 + newIndent.length; setCaretPosition(editor, newPos); // Auto-close brace if needed if (isInBlock && currentLine.trim().endsWith('{')) { setTimeout(() => { const currentPos = getCaretPosition(editor); const before = editor.value.substring(0, currentPos); const after = editor.value.substring(currentPos); editor.value = before + '\n' + currentIndent + '}' + after; setCaretPosition(editor, currentPos); }, 0); } } // Handle Tab for indentation if (e.key === 'Tab') { e.preventDefault(); const pos = getCaretPosition(editor); const text = editor.value; const before = text.substring(0, pos); const after = text.substring(pos); if (e.shiftKey) { // Unindent const lineStart = before.lastIndexOf('\n') + 1; const lineEnd = after.indexOf('\n') === -1 ? text.length : pos + after.indexOf('\n'); const line = text.substring(lineStart, lineEnd); if (line.startsWith(' ')) { editor.value = before.substring(0, lineStart) + line.substring(4) + after; setCaretPosition(editor, Math.max(lineStart, pos - 4)); } } else { // Indent editor.value = before + ' ' + after; setCaretPosition(editor, pos + 4); } } }// Setup autocomplete and indentation for HTML editor htmlEditor.addEventListener('input', (e) => { handleHTMLAutocomplete(htmlEditor, e); });htmlEditor.addEventListener('keydown', (e) => { // Handle autocomplete navigation if (autocompleteState.active && htmlAutocomplete.classList.contains('show')) { if (e.key === 'ArrowDown') { e.preventDefault(); autocompleteState.selectedIndex = Math.min( autocompleteState.selectedIndex + 1, autocompleteState.suggestions.length - 1 ); updateAutocompleteSelection(htmlAutocomplete); } else if (e.key === 'ArrowUp') { e.preventDefault(); autocompleteState.selectedIndex = Math.max(0, autocompleteState.selectedIndex - 1); updateAutocompleteSelection(htmlAutocomplete); } else if (e.key === 'Enter' || e.key === 'Tab') { e.preventDefault(); const selected = autocompleteState.suggestions[autocompleteState.selectedIndex]; if (selected) { insertAutocomplete(htmlEditor, selected.name, autocompleteState.startPos, autocompleteState.endPos); } } else if (e.key === 'Escape') { e.preventDefault(); hideAutocomplete(htmlAutocomplete); } else { handleHTMLIndentation(htmlEditor, e); } } else { handleHTMLIndentation(htmlEditor, e); } });// Setup autocomplete and indentation for CSS editor cssEditor.addEventListener('input', (e) => { handleCSSAutocomplete(cssEditor, e); });cssEditor.addEventListener('keydown', (e) => { // Handle autocomplete navigation if (autocompleteState.active && cssAutocomplete.classList.contains('show')) { if (e.key === 'ArrowDown') { e.preventDefault(); autocompleteState.selectedIndex = Math.min( autocompleteState.selectedIndex + 1, autocompleteState.suggestions.length - 1 ); updateAutocompleteSelection(cssAutocomplete); } else if (e.key === 'ArrowUp') { e.preventDefault(); autocompleteState.selectedIndex = Math.max(0, autocompleteState.selectedIndex - 1); updateAutocompleteSelection(cssAutocomplete); } else if (e.key === 'Enter' || e.key === 'Tab') { e.preventDefault(); const selected = autocompleteState.suggestions[autocompleteState.selectedIndex]; if (selected) { insertAutocomplete(cssEditor, selected.name, autocompleteState.startPos, autocompleteState.endPos); } } else if (e.key === 'Escape') { e.preventDefault(); hideAutocomplete(cssAutocomplete); } else { handleCSSIndentation(cssEditor, e); } } else { handleCSSIndentation(cssEditor, e); } });// Update autocomplete selection with auto-scroll function updateAutocompleteSelection(dropdown) { const items = dropdown.querySelectorAll('.autocomplete-item'); items.forEach((item, index) => { if (index === autocompleteState.selectedIndex) { item.classList.add('selected'); // Auto-scroll to selected item item.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); } else { item.classList.remove('selected'); } }); }// Hide autocomplete when clicking outside document.addEventListener('click', (e) => { if (!e.target.closest('.autocomplete-container')) { hideAutocomplete(htmlAutocomplete); hideAutocomplete(cssAutocomplete); } });// Toast notification function showToast(message, type = 'info') { const toast = document.createElement('div'); toast.className = `toast ${type}`; const icon = type === 'success' ? 'fa-check-circle' : type === 'error' ? 'fa-exclamation-circle' : 'fa-info-circle'; toast.innerHTML = `

${message}

`; toastContainer.appendChild(toast); setTimeout(() => { toast.style.animation = 'slideIn 0.3s ease reverse'; setTimeout(() => { toast.remove(); }, 300); }, 3000); }// Load saved code on page load function loadSavedCodeOnStartup() { const saved = localStorage.getItem('htmlCssEditor'); if (saved) { try { const data = JSON.parse(saved); if (data.html || data.css) { // Auto-load without confirmation for better UX htmlEditor.value = data.html || ''; cssEditor.value = data.css || ''; updatePreview(); showToast('Código salvo anteriormente foi carregado automaticamente', 'info'); } } catch (error) { console.error('Erro ao carregar código salvo:', error); } } } // Load on DOM ready if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', loadSavedCodeOnStartup); } else { loadSavedCodeOnStartup(); }// Keyboard shortcuts document.addEventListener('keydown', (e) => { // Ctrl/Cmd + S to save if ((e.ctrlKey || e.metaKey) && e.key === 's') { e.preventDefault(); saveToStorage(); } // Ctrl/Cmd + L to load if ((e.ctrlKey || e.metaKey) && e.key === 'l') { e.preventDefault(); toggleLoadMenu(); } // Ctrl/Cmd + Enter to force update preview (optional) if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') { e.preventDefault(); updatePreview(); } });

Editor HTML e CSS

Editor HTML e CSS gratuito e completo. Editores separados para HTML e CSS. Preview em tempo real mostrando resultados instantaneamente. Autocomplete inteligente (sugestões de tags HTML e propriedades CSS). Formatação automática. Salvar e carregar código no navegador. Upload e download de arquivos. Templates prontos. Abrir preview em nova aba. Ideal para desenvolvimento rápido, aprendizado, prototipagem, testes e edição de código. Editor HTML e CSS pode acelerar desenvolvimento em até 70% comparado a desenvolvimento tradicional.

Editor completo de HTML e CSS com preview em tempo real, permitindo criar, editar e visualizar código instantaneamente sem precisar de servidor ou ambiente de desenvolvimento. Desenvolvimento web tradicional requer configuração de servidor local, múltiplas ferramentas, e processo de salvar, atualizar navegador, e verificar mudanças manualmente, resultando em fluxo de trabalho lento e ineficiente. Editor HTML e CSS pode acelerar desenvolvimento em até 70% comparado a desenvolvimento tradicional, permitindo ver resultados instantaneamente e iterar rapidamente. Essencial para desenvolvimento rápido (criar e testar código rapidamente — maior produtividade), aprendizado (aprender HTML e CSS com feedback instantâneo — melhor aprendizado), prototipagem (criar protótipos rapidamente — validação rápida de ideias), testes (testar código antes de implementar — evitar erros), e edição de código (editar código existente com preview — maior eficiência).

Por Que Preview em Tempo Real Acelera Desenvolvimento

Editor HTML e CSS pode acelerar desenvolvimento em até 70% comparado a desenvolvimento tradicional porque permite ver resultados instantaneamente enquanto digita, eliminando necessidade de salvar arquivos, atualizar navegador, e navegar entre aplicações. Desenvolvimento tradicional requer múltiplos passos (salvar arquivo, atualizar navegador, verificar mudanças) que consomem tempo e quebram fluxo de trabalho. Preview em tempo real elimina esses passos, permitindo focar em código e ver resultados imediatamente. A ferramenta facilita desenvolvimento fornecendo ambiente integrado que combina edição e visualização em uma única interface.

Funcionalidades Completas para Desenvolvimento Eficiente

Editores separados para HTML e CSS (edite HTML e CSS simultaneamente — organização clara), preview em tempo real (veja resultados enquanto digita — feedback instantâneo), autocomplete inteligente (sugestões de tags HTML e propriedades CSS — acelera digitação), formatação automática (formata código automaticamente — código limpo e legível), salvar e carregar código (salve código no navegador — não perca trabalho), upload e download de arquivos (importe e exporte código — portabilidade completa), templates prontos (comece com templates — acelera início), e abrir preview em nova aba (visualize em tela cheia — melhor visualização). Funcionalidades completas fornecem ferramenta completa para desenvolvimento sem limitações.

Benefícios Significativos para Produtividade

Desenvolvimento mais rápido (até 70% mais rápido — maior produtividade), feedback instantâneo (veja resultados imediatamente — iteração rápida), sem configuração (funciona no navegador — sem instalação), portabilidade (salve e carregue código — trabalhe em qualquer lugar), e aprendizado eficiente (aprenda com feedback visual — melhor compreensão). Benefícios são especialmente valiosos para profissionais que precisam criar e testar código rapidamente.

Casos de Uso Práticos e Essenciais

Desenvolvimento rápido (criar e testar código rapidamente — maior produtividade e eficiência), aprendizado (aprender HTML e CSS com feedback instantâneo — melhor aprendizado e compreensão), prototipagem (criar protótipos rapidamente — validação rápida de ideias e conceitos), testes (testar código antes de implementar — evitar erros e problemas), e edição de código (editar código existente com preview — maior eficiência e precisão). Cada caso de uso se beneficia de preview em tempo real que acelera desenvolvimento significativamente.

Perguntas frequentes

Desenvolvimento web tradicional requer configuração de servidor local, múltiplas ferramentas, e processo de salvar, atualizar navegador, e verificar mudanças manualmente (fluxo de trabalho lento e ineficiente — consome tempo). Editor HTML e CSS com preview em tempo real permite ver resultados instantaneamente enquanto digita (feedback instantâneo — iteração rápida), eliminando necessidade de salvar arquivos e atualizar navegador manualmente. Editor HTML e CSS pode acelerar desenvolvimento em até 70% comparado a desenvolvimento tradicional. A ferramenta facilita desenvolvimento fornecendo ambiente integrado que combina edição e visualização em uma única interface.

Preview atualiza automaticamente enquanto você digita (atualização automática — não precisa atualizar manualmente), mostrando resultados instantaneamente no painel de preview (feedback visual imediato — veja mudanças em tempo real). Você também pode atualizar manualmente usando botão de atualizar (controle manual — atualize quando quiser). Preview em tempo real é especialmente valioso porque elimina necessidade de salvar e atualizar manualmente, permitindo focar em código. A ferramenta facilita preview fornecendo atualização automática que mostra resultados instantaneamente.

Sim! Salve código no armazenamento local do navegador (salvamento automático — não perca trabalho), carregue código salvo anteriormente (recuperação fácil — continue de onde parou), e código é carregado automaticamente ao abrir ferramenta (carregamento automático — conveniência). Você também pode fazer upload de arquivos HTML e CSS (importe código existente — portabilidade), e baixar código como arquivos (exporte código — compartilhe ou use em outros projetos). Salvar e carregar é especialmente valioso porque permite trabalhar em qualquer lugar e não perder progresso. A ferramenta facilita salvamento fornecendo armazenamento local que preserva código automaticamente.

Autocomplete fornece sugestões inteligentes enquanto você digita (sugestões automáticas — acelera digitação), incluindo tags HTML (ex: div, span, p, h1, a, img — tags comuns), propriedades CSS (ex: color, background, margin, padding — propriedades comuns), e valores CSS (ex: cores, unidades, funções — valores relevantes). Sugestões aparecem automaticamente e você pode selecionar usando teclado ou mouse (seleção fácil — conveniência). Autocomplete é especialmente valioso porque acelera digitação e reduz erros de digitação. A ferramenta facilita autocomplete fornecendo sugestões inteligentes que aparecem automaticamente.

Sim! Formate HTML automaticamente (formatação HTML — código limpo e legível), formate CSS automaticamente (formatação CSS — código organizado), e formatação mantém estrutura e indentação corretas (estrutura preservada — código profissional). Formatação é especialmente valiosa porque melhora legibilidade e facilita manutenção. A ferramenta facilita formatação fornecendo formatação automática que organiza código instantaneamente.

Use menu de templates para inserir templates prontos (templates prontos — comece rapidamente), incluindo estruturas HTML básicas (ex: página HTML completa — estrutura inicial), layouts comuns (ex: header, footer, sidebar — layouts prontos), e exemplos de CSS (ex: estilos básicos — estilos iniciais). Templates são especialmente valiosos porque aceleram início de projetos e fornecem exemplos úteis. A ferramenta facilita templates fornecendo coleção de templates que podem ser inseridos com um clique.

Sim! Abra preview em nova aba para visualização em tela cheia (visualização ampliada — melhor visualização), testar responsividade (teste em diferentes tamanhos — verifique adaptação), e compartilhar preview (compartilhe link — mostre para outros). Preview em nova aba é especialmente valioso porque permite visualizar resultado final em contexto real. A ferramenta facilita preview fornecendo opção de abrir em nova aba que permite visualização completa.

Use para aprender HTML e CSS com feedback visual instantâneo (aprendizado visual — melhor compreensão), experimentar código sem risco (experimentação segura — aprenda fazendo), e ver resultados imediatamente (feedback imediato — aprendizado eficiente). Aprendizado é especialmente valioso porque feedback visual acelera compreensão significativamente. A ferramenta facilita aprendizado fornecendo ambiente interativo que permite experimentar e ver resultados instantaneamente.

Ferramenta funciona completamente no navegador (sem servidor — limitações de segurança do navegador), então JavaScript do lado do servidor não funciona (sem backend — apenas frontend), e algumas funcionalidades avançadas podem ter limitações (ex: APIs externas — dependem de CORS). Para maioria dos casos de uso (HTML, CSS, JavaScript básico), ferramenta funciona perfeitamente. Limitações são especialmente importantes porque garantem que você sabe o que pode e não pode fazer. A ferramenta fornece ambiente completo para desenvolvimento frontend, mas funcionalidades de servidor requerem ambiente separado.

Editor HTML e CSS

Editor de HTML e CSS

HTML

CSS

Preview

Login

Entre em Contato

Criar Conta

Promoção Especial!

Olá, Cliente!

Newsletter

Últimas Notícias

Título da Notícia 1

Título da Notícia 2

Bem-vindo!

Olá, Cliente!

Nossos Produtos

Produto 1

Produto 2

Oferta Especial

Nome do Produto

Título do Artigo

Título da Informação

Título do Card

Editor HTML e CSS

Por Que Preview em Tempo Real Acelera Desenvolvimento

Funcionalidades Completas para Desenvolvimento Eficiente

Benefícios Significativos para Produtividade

Casos de Uso Práticos e Essenciais

Perguntas frequentes

Por que usar editor HTML e CSS com preview em tempo real e quais são os benefícios?

Como funciona o preview em tempo real e é preciso atualizar manualmente?

Posso salvar e carregar código e como funciona?

Como funciona o autocomplete e quais sugestões são fornecidas?

Posso formatar código automaticamente e como funciona?

Como usar templates e quais templates estão disponíveis?

Posso abrir preview em nova aba e para que serve?

Como usar para aprendizado e desenvolvimento de habilidades?

Há limitações e o que não é suportado?

Receba o melhor conteúdo sobre Marketing e Tecnologia

Cadastre-se para o participar da primeira comunidade sobre Martech do brasil!