Hermes
493 lines
22 KiB
HTML
493 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="pt-BR">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>CloneWeb Pro - Clonagem Profissional de Sites</title>
|
|
<link rel="stylesheet" href="styles-new.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
|
|
<script src="agents-panel.js"></script>
|
|
<script src="storage-panel.js"></script>
|
|
</head>
|
|
<body>
|
|
<!-- Sidebar -->
|
|
<aside class="sidebar">
|
|
<div class="logo">
|
|
<i class="fas fa-clone"></i>
|
|
<h1>CloneWeb Pro</h1>
|
|
</div>
|
|
|
|
<nav class="nav-menu">
|
|
<a href="#" class="nav-item active" data-page="dashboard">
|
|
<i class="fas fa-home"></i>
|
|
<span>Dashboard</span>
|
|
</a>
|
|
<a href="#" class="nav-item" data-page="new-clone">
|
|
<i class="fas fa-plus-circle"></i>
|
|
<span>Nova Clonagem</span>
|
|
</a>
|
|
<a href="#" class="nav-item" data-page="history">
|
|
<i class="fas fa-history"></i>
|
|
<span>Histórico</span>
|
|
</a>
|
|
<a href="#" class="nav-item" data-page="agents">
|
|
<i class="fas fa-robot"></i>
|
|
<span>Agentes AI</span>
|
|
</a>
|
|
|
|
<a href="#" class="nav-item" data-page="storage">
|
|
<i class="fas fa-database"></i>
|
|
<span>Storage</span>
|
|
</a>
|
|
|
|
<a href="#" class="nav-item" data-page="optimized-pages">
|
|
<i class="fas fa-paint-brush"></i>
|
|
<span>Otimizados (AI)</span>
|
|
</a>
|
|
|
|
<a href="#" class="nav-item" data-page="settings">
|
|
<i class="fas fa-cog"></i>
|
|
<span>Configurações</span>
|
|
</a>
|
|
</nav>
|
|
|
|
<div class="sidebar-footer">
|
|
<div class="theme-toggle">
|
|
<i class="fas fa-moon"></i>
|
|
<span>Modo Escuro</span>
|
|
<label class="switch">
|
|
<input type="checkbox" id="themeToggle">
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main Content -->
|
|
<main class="main-content">
|
|
<!-- Header -->
|
|
<header class="header">
|
|
<div class="header-left">
|
|
<h2 id="pageTitle">Dashboard</h2>
|
|
</div>
|
|
<div class="header-right">
|
|
<div class="status-indicator" id="serviceStatus">
|
|
<span class="status-dot"></span>
|
|
<span class="status-text">Verificando...</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Dashboard Page -->
|
|
<div class="page active" id="dashboard">
|
|
<div class="stats-grid">
|
|
<div class="stat-card">
|
|
<div class="stat-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
|
|
<i class="fas fa-globe"></i>
|
|
</div>
|
|
<div class="stat-content">
|
|
<h3 id="totalSites">0</h3>
|
|
<p>Sites Clonados</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
|
|
<i class="fas fa-database"></i>
|
|
</div>
|
|
<div class="stat-content">
|
|
<h3 id="totalSize">0 MB</h3>
|
|
<p>Espaço Utilizado</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
|
|
<i class="fas fa-clock"></i>
|
|
</div>
|
|
<div class="stat-content">
|
|
<h3 id="lastClone">Nunca</h3>
|
|
<p>Última Clonagem</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
|
|
<i class="fas fa-check-circle"></i>
|
|
</div>
|
|
<div class="stat-content">
|
|
<h3 id="successRate">100%</h3>
|
|
<p>Taxa de Sucesso</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="recent-clones">
|
|
<div class="section-header">
|
|
<h3>Sites Clonados Recentemente</h3>
|
|
<button class="btn btn-secondary btn-sm" onclick="refreshDashboard()">
|
|
<i class="fas fa-sync-alt"></i> Atualizar
|
|
</button>
|
|
</div>
|
|
<div id="recentClonesList" class="clones-list">
|
|
<!-- Será preenchido dinamicamente -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- New Clone Page -->
|
|
<div class="page" id="new-clone">
|
|
<div class="clone-form-container">
|
|
<div class="form-card">
|
|
<h3>Nova Clonagem de Site</h3>
|
|
<p class="form-description">Insira a URL do site que deseja clonar e configure as opções avançadas.</p>
|
|
|
|
<form id="cloneForm">
|
|
<div class="form-group">
|
|
<label for="cloneUrl">
|
|
<i class="fas fa-link"></i> URL do Site
|
|
</label>
|
|
<input
|
|
type="url"
|
|
id="cloneUrl"
|
|
class="form-control"
|
|
placeholder="https://exemplo.com.br"
|
|
required
|
|
>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="customFolder">
|
|
<i class="fas fa-folder"></i> Nome Específico da Pasta (Opcional)
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="customFolder"
|
|
class="form-control"
|
|
placeholder="ex: meu_projeto"
|
|
>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>
|
|
<i class="fas fa-sliders-h"></i> Configurações Avançadas
|
|
</label>
|
|
<div class="advanced-options">
|
|
<div class="option-row">
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" id="includeImages" checked>
|
|
<span>Incluir Imagens</span>
|
|
</label>
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" id="includeCSS" checked>
|
|
<span>Incluir CSS</span>
|
|
</label>
|
|
</div>
|
|
<div class="option-row">
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" id="includeJS" checked>
|
|
<span>Incluir JavaScript</span>
|
|
</label>
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" id="convertLinks" checked>
|
|
<span>Converter Links</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="depthLevel">
|
|
<i class="fas fa-layer-group"></i> Profundidade de Clonagem
|
|
</label>
|
|
<div class="slider-container">
|
|
<input type="range" id="depthLevel" min="1" max="5" value="3" class="slider-input">
|
|
<span class="slider-value" id="depthValue">3 níveis</span>
|
|
</div>
|
|
<small>Controla quantas páginas vinculadas serão clonadas</small>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<button type="submit" class="btn btn-primary btn-lg">
|
|
<i class="fas fa-download"></i> Iniciar Clonagem
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Progress Card -->
|
|
<div class="progress-card" id="progressCard" style="display: none;">
|
|
<h3>Clonagem em Andamento</h3>
|
|
<div class="progress-info">
|
|
<div class="progress-status">
|
|
<i class="fas fa-spinner fa-spin"></i>
|
|
<span id="progressMessage">Iniciando clonagem...</span>
|
|
</div>
|
|
<div class="progress-bar-container">
|
|
<div class="progress-bar" id="progressBar"></div>
|
|
</div>
|
|
<div class="progress-stats">
|
|
<span><i class="fas fa-file"></i> <span id="filesDownloaded">0</span> arquivos</span>
|
|
<span><i class="fas fa-hdd"></i> <span id="sizeDownloaded">0 MB</span></span>
|
|
<span><i class="fas fa-clock"></i> <span id="timeElapsed">0s</span></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- History Page -->
|
|
<div class="page" id="history">
|
|
<div class="section-header">
|
|
<h3>Histórico de Clonagens</h3>
|
|
<div class="header-actions">
|
|
<button class="btn btn-secondary btn-sm" onclick="refreshHistory()">
|
|
<i class="fas fa-sync-alt"></i> Atualizar
|
|
</button>
|
|
<button class="btn btn-danger btn-sm" onclick="clearHistory()">
|
|
<i class="fas fa-trash"></i> Limpar Histórico
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="history-list" id="historyList">
|
|
<!-- Será preenchido dinamicamente -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Optimized Pages Page -->
|
|
<div class="page" id="optimized-pages">
|
|
<div class="section-header">
|
|
<h3><i class="fas fa-paint-brush"></i> Gestão de Páginas Otimizadas pela IA</h3>
|
|
<div class="header-actions">
|
|
<button class="btn btn-secondary btn-sm" onclick="loadOptimizedPages()">
|
|
<i class="fas fa-sync-alt"></i> Atualizar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="clones-list" id="optimizedList">
|
|
<div class="empty-state">
|
|
<i class="fas fa-spinner fa-spin"></i>
|
|
<h3>Carregando...</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Settings Page -->
|
|
<div class="page" id="settings">
|
|
<div class="settings-container">
|
|
<div class="settings-section">
|
|
<h3><i class="fas fa-cog"></i> Configurações Gerais</h3>
|
|
|
|
<div class="setting-item">
|
|
<div class="setting-info">
|
|
<h4>Diretório de Saída</h4>
|
|
<p>Local onde os sites clonados serão salvos</p>
|
|
</div>
|
|
<div class="setting-control">
|
|
<input type="text" id="settingsOutputDir" class="form-control" value="/root/Desktop/Clonados">
|
|
<button class="btn btn-secondary btn-sm" onclick="openCloneFolder(document.getElementById('settingsOutputDir').value)">
|
|
<i class="fas fa-folder-open"></i> Abrir
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="setting-item">
|
|
<div class="setting-info">
|
|
<h4>Timeout de Requisição</h4>
|
|
<p>Tempo máximo de espera por arquivo (segundos)</p>
|
|
</div>
|
|
<div class="setting-control">
|
|
<input type="number" class="form-control" value="30" min="10" max="120">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="setting-item">
|
|
<div class="setting-info">
|
|
<h4>Tentativas de Download</h4>
|
|
<p>Número de tentativas para arquivos que falharem</p>
|
|
</div>
|
|
<div class="setting-control">
|
|
<input type="number" class="form-control" value="3" min="1" max="10">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-section">
|
|
<h3><i class="fas fa-ban"></i> Exclusões</h3>
|
|
|
|
<div class="setting-item">
|
|
<div class="setting-info">
|
|
<h4>Domínios Excluídos</h4>
|
|
<p>Domínios que não serão clonados (um por linha)</p>
|
|
</div>
|
|
<div class="setting-control">
|
|
<textarea class="form-control" rows="5" placeholder="facebook.com twitter.com instagram.com"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-actions">
|
|
<button class="btn btn-primary" onclick="saveSettings()">
|
|
<i class="fas fa-save"></i> Salvar Configurações
|
|
</button>
|
|
<button class="btn btn-secondary">
|
|
<i class="fas fa-undo"></i> Restaurar Padrões
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Storage Page - Clone Management -->
|
|
<div class="page" id="storage">
|
|
<div class="storage-header">
|
|
<h2>💾 Gestão de Storage</h2>
|
|
<p>Gerencie todos os sites clonados, versões e metadata</p>
|
|
</div>
|
|
|
|
<div id="storageSummary" class="storage-summary">
|
|
<!-- Summary cards rendered by JS -->
|
|
</div>
|
|
|
|
<div class="storage-toolbar">
|
|
<input type="text" id="storageSearch" class="form-control" placeholder="Buscar clones..." oninput="filterClones(this.value)">
|
|
<button class="btn btn-secondary" onclick="loadStoragePanel()">
|
|
<i class="fas fa-redo"></i> Atualizar
|
|
</button>
|
|
</div>
|
|
|
|
<div id="storageLoader" class="storage-loader" style="display:none;">
|
|
<i class="fas fa-spinner fa-spin"></i>
|
|
<span>Carregando clones...</span>
|
|
</div>
|
|
|
|
<div id="storageClonesGrid" class="storage-clones-grid">
|
|
<!-- Clones rendered by JS -->
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Agents Page - BrainSteel Web -->
|
|
<div class="page" id="agents">
|
|
<div class="agents-header">
|
|
<h2>🤖 Agentes BrainSteel Web</h2>
|
|
<p>Pipeline completo: Scout → Designer → Outreach → Orchestrator</p>
|
|
</div>
|
|
|
|
<!-- Agent Tabs -->
|
|
<div class="agent-tabs">
|
|
<button class="agent-tab-btn active" data-tab="scout">
|
|
<i class="fas fa-search"></i> Scout
|
|
</button>
|
|
<button class="agent-tab-btn" data-tab="designer">
|
|
<i class="fas fa-magic"></i> Designer
|
|
</button>
|
|
<button class="agent-tab-btn" data-tab="outreach">
|
|
<i class="fas fa-envelope"></i> Outreach
|
|
</button>
|
|
<button class="agent-tab-btn" data-tab="orchestrator">
|
|
<i class="fas fa-tasks"></i> Orchestrator
|
|
</button>
|
|
</div>
|
|
|
|
<!-- SCOUT SECTION -->
|
|
<div class="agent-section" id="agent-scout">
|
|
<div class="agent-card">
|
|
<h3><i class="fas fa-search"></i> Scout - Prospecção</h3>
|
|
<p class="agent-description">Identifica websites de empresas locais que precisam de redesign</p>
|
|
|
|
<div class="agent-inputs">
|
|
<input type="text" id="scoutNiche" class="form-control" placeholder="Nichos: restaurantes, academias, padarias...">
|
|
<input type="text" id="scoutRegion" class="form-control" placeholder="Região: São Paulo, ABC, Zona Sul...">
|
|
<button id="scoutSearchBtn" class="btn btn-primary">
|
|
<i class="fas fa-search"></i> Pesquisar Alvos
|
|
</button>
|
|
</div>
|
|
|
|
<div class="agent-status" id="scoutStatus">Aguardando pesquisa...</div>
|
|
|
|
<div id="scoutResults" class="scout-results">
|
|
<!-- Results will be rendered here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- DESIGNER SECTION -->
|
|
<div class="agent-section" id="agent-designer" style="display:none;">
|
|
<div class="agent-card">
|
|
<h3><i class="fas fa-magic"></i> Designer - Redesign Ultra-Moderno</h3>
|
|
<p class="agent-description">Transforma sites clonados em interfaces premium com estética anime/moderna</p>
|
|
|
|
<div class="agent-inputs">
|
|
<input type="text" id="designUrl" class="form-control" placeholder="URL do site para redesign...">
|
|
<button id="startDesignBtn" class="btn btn-primary">
|
|
<i class="fas fa-rocket"></i> Iniciar Redesign
|
|
</button>
|
|
</div>
|
|
|
|
<div class="agent-status" id="designerStatus">Aguardando instruções...</div>
|
|
|
|
<div id="designPreview" class="design-preview" style="display:none;">
|
|
<iframe id="previewFrame" src="" width="100%" height="500"></iframe>
|
|
<button id="downloadRedesignBtn" class="btn btn-secondary" style="display:none;">
|
|
<i class="fas fa-download"></i> Baixar Site Redesenhado
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- OUTREACH SECTION -->
|
|
<div class="agent-section" id="agent-outreach" style="display:none;">
|
|
<div class="agent-card">
|
|
<h3><i class="fas fa-envelope"></i> Outreach - Comunicação</h3>
|
|
<p class="agent-description">Envia mensagens para proprietários de sites identificados pelo Scout</p>
|
|
|
|
<div class="agent-inputs">
|
|
<select id="outreachTargetId" class="form-control">
|
|
<option value="">Selecione um alvo do Scout...</option>
|
|
</select>
|
|
<textarea id="outreachMessage" class="form-control" rows="3" placeholder="Sua mensagem...">Olá! vimos o seu site e acreditamos que podemos ajudá-lo com um redesign moderno que pode aumentar suas vendas. Posso enviar uma proposta?</textarea>
|
|
<button id="outreachSendBtn" class="btn btn-primary">
|
|
<i class="fas fa-paper-plane"></i> Enviar Mensagem
|
|
</button>
|
|
</div>
|
|
|
|
<div class="agent-status" id="outreachConfirmation" style="display:none;"></div>
|
|
|
|
<div class="outreach-stats">
|
|
<span><i class="fas fa-check"></i> Enviadas: <strong id="outreachSent">0</strong></span>
|
|
<span><i class="fas fa-times"></i> Falhas: <strong id="outreachFailed">0</strong></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ORCHESTRATOR SECTION -->
|
|
<div class="agent-section" id="agent-orchestrator" style="display:none;">
|
|
<div class="agent-card">
|
|
<h3><i class="fas fa-tasks"></i> Orchestrator - Pipeline Completo</h3>
|
|
<p class="agent-description">Executa o pipeline completo: Scout → Designer → Outreach para múltiplos alvos</p>
|
|
|
|
<div class="orchestrator-info">
|
|
<p><i class="fas fa-info-circle"></i> Execute primeiro o Scout para identificar alvos com score >= 7</p>
|
|
</div>
|
|
|
|
<button id="runPipelineBtn" class="btn btn-primary btn-lg">
|
|
<i class="fas fa-play"></i> Executar Pipeline Completo
|
|
</button>
|
|
|
|
<div class="agent-status" id="orchestratorStatus">Aguardando...</div>
|
|
|
|
<div class="progress-bar-container">
|
|
<div id="orchestratorProgress" class="progress-bar" style="width:0%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</main>
|
|
|
|
<script src="app-new.js"></script>
|
|
</body>
|
|
</html>
|