123 lines
5.0 KiB
HTML
123 lines
5.0 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 Premium</title>
|
|
<link rel="stylesheet" href="styles-premium.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap" rel="stylesheet">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="background-effects">
|
|
<div class="glow-orb orb-1"></div>
|
|
<div class="glow-orb orb-2"></div>
|
|
<div class="grid-background"></div>
|
|
</div>
|
|
|
|
<main class="container">
|
|
<!-- Hero / Input Section -->
|
|
<section class="hero-section" id="hero">
|
|
<div class="logo-area">
|
|
<i class="fas fa-bolt logo-icon"></i>
|
|
<h1>CloneWeb <span class="badge">PRO</span></h1>
|
|
<p>Clonagem de alta fidelidade com Inteligência Artificial</p>
|
|
</div>
|
|
|
|
<div class="clone-input-wrapper">
|
|
<div class="input-group">
|
|
<i class="fas fa-link input-icon"></i>
|
|
<input type="url" id="urlInput" placeholder="Cole o link do site aqui..." autocomplete="off">
|
|
<button id="startBtn" class="action-btn">
|
|
<span>CLONAR</span>
|
|
<i class="fas fa-arrow-right"></i>
|
|
</button>
|
|
</div>
|
|
<!-- Remove toggle if we want to force smart mode or hide complex options -->
|
|
<div class="options-toggle hidden">
|
|
<label class="toggle-switch">
|
|
<input type="checkbox" id="smartMode" checked>
|
|
<span class="slider"></span>
|
|
<span class="label-text">Smart Mode (IA)</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="features-pill">
|
|
<span><i class="fas fa-magic"></i> Smart Clone</span>
|
|
<span><i class="fas fa-image"></i> Verificação Visual</span>
|
|
<span><i class="fas fa-code"></i> HTML5/CSS3</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Loading State -->
|
|
<section class="loading-section hidden" id="loading">
|
|
<div class="loader-circle">
|
|
<svg viewBox="0 0 100 100">
|
|
<circle cx="50" cy="50" r="45" class="bg"></circle>
|
|
<circle cx="50" cy="50" r="45" class="fg" id="progressCircle"></circle>
|
|
</svg>
|
|
<div class="loader-icon">
|
|
<i class="fas fa-dna fa-spin animated-icon"></i>
|
|
</div>
|
|
</div>
|
|
<h2 id="loadingText">Iniciando Motor IA...</h2>
|
|
<p id="loadingSubtext">Preparando ambiente de clonagem</p>
|
|
|
|
<div class="terminal-log" id="terminalLog">
|
|
<div class="log-line">> Sistema inicializado</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Result / Verification State -->
|
|
<section class="result-section hidden" id="result">
|
|
<div class="success-header">
|
|
<div class="checkmark-circle">
|
|
<i class="fas fa-check"></i>
|
|
</div>
|
|
<h2>Clonagem Concluída!</h2>
|
|
</div>
|
|
|
|
<div class="verification-container hidden" id="verificationContainer">
|
|
<h3 class="verify-title">Verificação de Qualidade</h3>
|
|
<div class="comparison-card">
|
|
<div class="image-wrapper">
|
|
<span class="img-label">Site Original</span>
|
|
<img id="imgOriginal" src="" alt="Original">
|
|
</div>
|
|
<div class="vs-badge">VS</div>
|
|
<div class="image-wrapper">
|
|
<span class="img-label lg-accent">Clone Local</span>
|
|
<img id="imgClone" src="" alt="Clone">
|
|
</div>
|
|
</div>
|
|
<p class="verification-note">As imagens acima mostram a comparação visual automática.</p>
|
|
</div>
|
|
|
|
<div class="actions-grid">
|
|
<button class="btn-secondary" id="btnOpenFolder">
|
|
<i class="fas fa-folder-open"></i> Abrir Pasta
|
|
</button>
|
|
<button class="btn-primary glow" id="btnOpenSite">
|
|
<i class="fas fa-external-link-alt"></i> Abrir Site
|
|
</button>
|
|
</div>
|
|
|
|
<div class="retry-area">
|
|
<button class="btn-text" onclick="window.location.reload()">
|
|
<i class="fas fa-undo"></i> Clonar outro site
|
|
</button>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<div id="toast-container"></div>
|
|
|
|
<script src="app-premium.js"></script>
|
|
</body>
|
|
|
|
</html> |