166 lines
7.6 KiB
HTML
166 lines
7.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="pt-BR">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'self' http://localhost:3001; font-src 'self';">
|
|
<title>CloneWeb - Website Crawler Platform</title>
|
|
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
|
<link rel="stylesheet" href="fallback-icons.css">
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<!-- Header -->
|
|
<header class="header">
|
|
<div class="container">
|
|
<div class="header-content">
|
|
<div class="logo">
|
|
<i class="fas fa-spider"></i>
|
|
<h1>CloneWeb</h1>
|
|
</div>
|
|
<div class="header-actions">
|
|
<div class="status-indicator" id="crawlerStatus">
|
|
<i class="fas fa-circle"></i>
|
|
<span>Verificando...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main class="main">
|
|
<div class="container">
|
|
<!-- Hero Section -->
|
|
<section class="hero">
|
|
<h2>Plataforma Inteligente de Crawling</h2>
|
|
<p>Extraia dados de websites com precisão usando nossa tecnologia avançada de crawling</p>
|
|
</section>
|
|
|
|
<!-- Crawler Form -->
|
|
<section class="crawler-section">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3><i class="fas fa-globe"></i> Iniciar Crawling</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<form id="crawlerForm">
|
|
<div class="form-group">
|
|
<label for="urlInput">URL do Website</label>
|
|
<div class="input-group">
|
|
<i class="fas fa-link"></i>
|
|
<input
|
|
type="url"
|
|
id="urlInput"
|
|
placeholder="https://example.com"
|
|
required
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<button type="submit" class="btn btn-primary" id="crawlBtn">
|
|
<i class="fas fa-spider"></i>
|
|
Iniciar Crawling
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Loading State -->
|
|
<section class="loading-section" id="loadingSection" style="display: none;">
|
|
<div class="card">
|
|
<div class="card-body text-center">
|
|
<div class="spinner"></div>
|
|
<h3>Crawling em Progresso...</h3>
|
|
<p id="loadingMessage">Analisando o website...</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Results Section -->
|
|
<section class="results-section" id="resultsSection" style="display: none;">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3><i class="fas fa-chart-line"></i> Resultados do Crawling</h3>
|
|
<button class="btn btn-secondary btn-sm" id="exportBtn">
|
|
<i class="fas fa-download"></i>
|
|
Exportar JSON
|
|
</button>
|
|
</div>
|
|
<div class="card-body">
|
|
<!-- Summary Stats -->
|
|
<div class="stats-grid" id="statsGrid">
|
|
<!-- Stats will be populated by JavaScript -->
|
|
</div>
|
|
|
|
<!-- Detailed Results -->
|
|
<div class="results-tabs">
|
|
<div class="tab-buttons">
|
|
<button class="tab-btn active" data-tab="overview">Visão Geral</button>
|
|
<button class="tab-btn" data-tab="links">Links</button>
|
|
<button class="tab-btn" data-tab="images">Imagens</button>
|
|
<button class="tab-btn" data-tab="raw">Dados Brutos</button>
|
|
</div>
|
|
|
|
<div class="tab-content">
|
|
<div class="tab-pane active" id="overview">
|
|
<div class="overview-content">
|
|
<!-- Overview content will be populated -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-pane" id="links">
|
|
<div class="links-list">
|
|
<!-- Links will be populated -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-pane" id="images">
|
|
<div class="images-grid">
|
|
<!-- Images will be populated -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-pane" id="raw">
|
|
<pre class="json-output" id="rawData">
|
|
<!-- Raw JSON will be populated -->
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Error Section -->
|
|
<section class="error-section" id="errorSection" style="display: none;">
|
|
<div class="card error-card">
|
|
<div class="card-body text-center">
|
|
<i class="fas fa-exclamation-triangle"></i>
|
|
<h3>Erro no Crawling</h3>
|
|
<p id="errorMessage">Ocorreu um erro durante o processo de crawling.</p>
|
|
<button class="btn btn-primary" onclick="resetForm()">
|
|
<i class="fas fa-redo"></i>
|
|
Tentar Novamente
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<p>© 2025 CloneWeb Platform. Desenvolvido com ❤️ para crawling inteligente.</p>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html> |