From 7d2a72b1665b372b17f14c18ddae76d97526ad15 Mon Sep 17 00:00:00 2001 From: Hermes Date: Mon, 18 May 2026 22:07:12 +0000 Subject: [PATCH] =?UTF-8?q?Atualiza=C3=A7=C3=A3o=20autom=C3=A1tica:=202026?= =?UTF-8?q?-05-18=2022:07:12?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web-interface/public/agents-panel.js | 13 ++- web-interface/server.js | 147 +++++++++++++++++++++++++++ 2 files changed, 159 insertions(+), 1 deletion(-) diff --git a/web-interface/public/agents-panel.js b/web-interface/public/agents-panel.js index 0e92e28..674ee07 100644 --- a/web-interface/public/agents-panel.js +++ b/web-interface/public/agents-panel.js @@ -248,7 +248,18 @@ async function applyUltraModernRedesign(cloneDir) { console.error("Erro na IA do Designer:", e); } - const previewUrl = `http://localhost:${window.location.port || 3000}/${cloneDir.split('/').pop()}/index.html`; + // Injetar o CSS de Redesign Ultra-Moderno gerado pela IA no site clonado + try { + await fetch('/api/ai/inject-redesign', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ cloneDir, appliedStyles, elementsRedesigned }) + }); + } catch (e) { + console.error("Erro ao injetar CSS de redesign:", e); + } + + const previewUrl = `/api/preview/${cloneDir.split('/').pop()}`; return { success: true, diff --git a/web-interface/server.js b/web-interface/server.js index e5c2418..64b73fb 100644 --- a/web-interface/server.js +++ b/web-interface/server.js @@ -632,6 +632,153 @@ app.post('/api/ai/agent', async (req, res) => { } }); +// AI Inject Redesign Route (Pilar 1 - Agente Designer Real) +app.post('/api/ai/inject-redesign', (req, res) => { + const { cloneDir, appliedStyles, elementsRedesigned } = req.body; + if (!cloneDir) return res.status(400).json({ error: 'cloneDir is required' }); + + const folderName = cloneDir.split('/').pop(); + const folderPath = path.join(__dirname, '..', 'cloned-sites', folderName); + + if (!fs.existsSync(folderPath)) { + return res.status(404).json({ error: 'Cloned site folder not found' }); + } + + try { + // 1. Criar o arquivo CSS de Redesign Ultra-Moderno (__ai_redesign.css) + const cssContent = ` +/* ========================================================================== + BRAINSTEEL WEB - AI ULTRA-MODERN REDESIGN (AGENTE DESIGNER) + ========================================================================== */ + +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;600;800&display=swap'); + +:root { + --ai-bg-dark: #0b0f19; + --ai-bg-card: rgba(18, 24, 38, 0.7); + --ai-border-glass: rgba(255, 255, 255, 0.08); + --ai-accent-glow: #3b82f6; + --ai-accent-gradient: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%); + --ai-text-main: #f3f4f6; + --ai-text-muted: #9ca3af; +} + +/* Força Dark Mode elegante e tipografia moderna no body e containers principais */ +body, main, #root, #app, .app, .main, .container, .wrapper, header, footer, section { + background-color: var(--ai-bg-dark) !important; + color: var(--ai-text-main) !important; + font-family: 'Inter', sans-serif !important; +} + +/* Glassmorphism e Glow em Cards, Painéis, Cabeçalhos e Rodapés */ +div[class*="card"], div[class*="panel"], div[class*="box"], div[class*="container"], div[class*="item"], header, footer, nav, .navbar, .header, .footer { + background: var(--ai-bg-card) !important; + backdrop-filter: blur(16px) !important; + -webkit-backdrop-filter: blur(16px) !important; + border: 1px solid var(--ai-border-glass) !important; + box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.5) !important; + border-radius: 16px !important; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; +} + +div[class*="card"]:hover, div[class*="item"]:hover { + transform: translateY(-5px) !important; + border-color: rgba(59, 130, 246, 0.4) !important; + box-shadow: 0 20px 40px -15px rgba(59, 130, 246, 0.3) !important; +} + +/* Títulos com Gradiente Vibrante (Outfit Font) */ +h1, h2, h3, h4, h5, .title, .heading, .header-title { + font-family: 'Outfit', sans-serif !important; + background: var(--ai-accent-gradient) !important; + -webkit-background-clip: text !important; + -webkit-text-fill-color: transparent !important; + background-clip: text !important; + font-weight: 700 !important; + letter-spacing: -0.03em !important; +} + +/* Botões Ultra-Modernos com Gradiente e Animação de Pulso */ +button, .btn, a[class*="btn"], input[type="submit"], input[type="button"] { + background: var(--ai-accent-gradient) !important; + color: #ffffff !important; + border: none !important; + border-radius: 50px !important; + padding: 12px 28px !important; + font-family: 'Inter', sans-serif !important; + font-weight: 600 !important; + letter-spacing: 0.02em !important; + box-shadow: 0 10px 25px -5px rgba(139, 92, 246, 0.5) !important; + cursor: pointer !important; + transition: all 0.3s ease !important; + text-transform: none !important; + -webkit-text-fill-color: #ffffff !important; +} + +button:hover, .btn:hover, a[class*="btn"]:hover { + transform: scale(1.05) translateY(-2px) !important; + box-shadow: 0 15px 35px -5px rgba(236, 72, 153, 0.6) !important; +} + +/* Inputs e Textareas com Efeito Glass */ +input, select, textarea, .input, .form-control { + background: rgba(255, 255, 255, 0.05) !important; + border: 1px solid var(--ai-border-glass) !important; + color: var(--ai-text-main) !important; + border-radius: 12px !important; + padding: 12px 16px !important; + font-family: 'Inter', sans-serif !important; +} + +input:focus, select:focus, textarea:focus { + outline: none !important; + border-color: var(--ai-accent-glow) !important; + box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3) !important; +} + +/* Links e Textos Secundários */ +a { + color: var(--ai-accent-glow) !important; + text-decoration: none !important; + transition: color 0.2s !important; +} + +a:hover { + color: #8b5cf6 !important; +} + +p, span, li, label, td, th { + color: var(--ai-text-muted) !important; + line-height: 1.6 !important; +} +`; + + const cssPath = path.join(folderPath, '__ai_redesign.css'); + fs.writeFileSync(cssPath, cssContent, 'utf8'); + + // 2. Injetar a tag no index.html do clone + const indexPath = path.join(folderPath, 'index.html'); + if (fs.existsSync(indexPath)) { + let html = fs.readFileSync(indexPath, 'utf8'); + const linkTag = `\n\n`; + + if (!html.includes('__ai_redesign.css')) { + if (html.includes('')) { + html = html.replace('', linkTag + ''); + } else { + html = linkTag + html; + } + fs.writeFileSync(indexPath, html, 'utf8'); + } + } + + res.json({ success: true, message: 'AI Redesign CSS injected successfully' }); + } catch (err) { + console.error('Error injecting AI redesign:', err); + res.status(500).json({ error: err.message }); + } +}); + // Handle 404s app.use((req, res) => { res.status(404).json({