Atualização automática: 2026-05-18 22:07:12
This commit is contained in:
Hermes
@@ -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,
|
||||
|
||||
@@ -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 <link> 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<link rel="stylesheet" href="/__ai_redesign.css" id="__AI_REDESIGN_LINK__">\n`;
|
||||
|
||||
if (!html.includes('__ai_redesign.css')) {
|
||||
if (html.includes('</head>')) {
|
||||
html = html.replace('</head>', linkTag + '</head>');
|
||||
} 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({
|
||||
|
||||
Reference in New Issue
Block a user