<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Scraping Interface</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.10.0/font/bootstrap-icons.min.css" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Open Sans', sans-serif;
background: linear-gradient(135deg, #642a30 0%, #68364c 35%, #bf355b 70%, #68364c 100%);
min-height: 100vh;
color: #333;
}
.header {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
padding: 1rem 0;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.header .container {
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
font-size: 1.8rem;
font-weight: 700;
color: #642a30;
}
.logo span {
color: #ff6171;
}
.nav-links {
display: flex;
list-style: none;
gap: 2rem;
}
.nav-links a {
text-decoration: none;
color: #333;
font-weight: 500;
transition: color 0.3s ease;
}
.nav-links a:hover {
color: #ff6171;
}
.main-content {
margin-top: 100px;
padding: 2rem 0;
}
.hero-section {
text-align: center;
color: white;
padding: 4rem 0;
}
.hero-section h1 {
font-size: 2.5rem;
margin-bottom: 1rem;
font-weight: 700;
}
.hero-section h2 {
font-size: 1.2rem;
font-weight: 300;
margin-bottom: 2rem;
opacity: 0.9;
}
.scraping-interface {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 15px;
padding: 2rem;
margin: 2rem auto;
max-width: 800px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
color: #333;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
color: #642a30;
}
.form-control {
width: 100%;
padding: 12px 15px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 1rem;
transition: all 0.3s ease;
background: white;
}
.form-control:focus {
outline: none;
border-color: #ff6171;
box-shadow: 0 0 0 3px rgba(255, 97, 113, 0.1);
}
.form-control:hover {
border-color: #ff6171;
}
.btn {
padding: 12px 30px;
border: none;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
display: inline-block;
text-align: center;
}
.btn-primary {
background: linear-gradient(45deg, #ff6171, #bf355b);
color: white;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(255, 97, 113, 0.3);
}
.btn-secondary {
background: transparent;
color: #ff6171;
border: 2px solid #ff6171;
}
.btn-secondary:hover {
background: #ff6171;
color: white;
}
.options-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-bottom: 1.5rem;
}
.option-card {
background: #f8f9fa;
border: 2px solid #e0e0e0;
border-radius: 8px;
padding: 1rem;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
}
.option-card:hover {
border-color: #ff6171;
background: #fff;
transform: translateY(-2px);
}
.option-card.active {
border-color: #ff6171;
background: rgba(255, 97, 113, 0.1);
}
.option-card i {
font-size: 2rem;
color: #ff6171;
margin-bottom: 0.5rem;
}
.results-section {
background: white;
border-radius: 10px;
padding: 1.5rem;
margin-top: 2rem;
border: 1px solid #e0e0e0;
}
.results-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid #e0e0e0;
}
.status-indicator {
display: flex;
align-items: center;
gap: 0.5rem;
}
.status-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: #28a745;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}
.progress-bar {
width: 100%;
height: 8px;
background: #e0e0e0;
border-radius: 4px;
overflow: hidden;
margin-bottom: 1rem;
}
.progress-fill {
height: 100%;
background: linear-gradient(45deg, #ff6171, #bf355b);
border-radius: 4px;
transition: width 0.3s ease;
animation: progress 3s ease-in-out infinite;
}
@keyframes progress {
0% { width: 0%; }
50% { width: 75%; }
100% { width: 100%; }
}
.data-preview {
background: #f8f9fa;
border-radius: 8px;
padding: 1rem;
margin-top: 1rem;
font-family: 'Courier New', monospace;
font-size: 0.9rem;
max-height: 300px;
overflow-y: auto;
}
.action-buttons {
display: flex;
gap: 1rem;
justify-content: center;
margin-top: 2rem;
}
.mobile-nav-toggle {
display: none;
background: none;
border: none;
font-size: 1.5rem;
color: #333;
cursor: pointer;
}
@media (max-width: 768px) {
.nav-links {
display: none;
}
.mobile-nav-toggle {
display: block;
}
.hero-section h1 {
font-size: 2rem;
}
.scraping-interface {
margin: 1rem;
padding: 1.5rem;
}
.options-grid {
grid-template-columns: 1fr;
}
.action-buttons {
flex-direction: column;
}
}
.feature-highlight {
background: rgba(255, 97, 113, 0.1);
border-left: 4px solid #ff6171;
padding: 1rem;
margin: 1rem 0;
border-radius: 0 8px 8px 0;
}
.loading-spinner {
border: 3px solid #f3f3f3;
border-top: 3px solid #ff6171;
border-radius: 50%;
width: 30px;
height: 30px;
animation: spin 1s linear infinite;
margin: 0 auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<header class="header">
<div class="container">
<div class="logo">
GRAPH<span>SCRAPER</span>
</div>
<nav>
<ul class="nav-links">
<li><a href="#home">Home</a></li>
<li><a href="#scraper">Scraper</a></li>
<li><a href="#results">Results</a></li>
<li><a href="#export">Export</a></li>
</ul>
<button class="mobile-nav-toggle">
<i class="bi bi-list"></i>
</button>
</nav>
</div>
</header>
<main class="main-content">
<section class="hero-section">
<div class="container">
<h1>Advanced Web Scraping <span style="color: #ff6171;">with AI</span></h1>
<h2>Extract structured data from any website with intelligent automation</h2>
</div>
</section>
<section class="scraping-interface">
<div class="container">
<h3 style="text-align: center; margin-bottom: 2rem; color: #642a30;">Configure Your Scraping Job</h3>
<div class="form-group">
<label for="target-url">Target URL</label>
<input type="url" id="target-url" class="form-control" placeholder="https://example.com" value="https://example.com/data">
</div>
<div class="form-group">
<label>Scraping Method</label>
<div class="options-grid">
<div class="option-card active" data-method="auto">
<i class="bi bi-magic"></i>
<h4>Auto Detect</h4>
<p>AI-powered detection</p>
</div>
<div class="option-card" data-method="css">
<i class="bi bi-code-slash"></i>
<h4>CSS Selector</h4>
<p>Manual selection</p>
</div>
<div class="option-card" data-method="xpath">
<i class="bi bi-diagram-3"></i>
<h4>XPath</h4>
<p>Advanced targeting</p>
</div>
<div class="option-card" data-method="api">
<i class="bi bi-cloud-download"></i>
<h4>API Mode</h4>
<p>Direct API calls</p>
</div>
</div>
</div>
<div class="form-group">
<label for="selectors">CSS Selectors / XPath (Optional)</label>
<textarea id="selectors" class="form-control" rows="3" placeholder="table.financial-data, .stock-price, #revenue-table"></textarea>
</div>
<div class="form-group">
<label for="output-format">Output Format</label>
<select id="output-format" class="form-control">
<option value="json">JSON</option>
<option value="csv">CSV</option>
<option value="excel">Excel</option>
<option value="xml">XML</option>
</select>
</div>
<div class="feature-highlight">
<i class="bi bi-lightbulb" style="color: #ff6171; margin-right: 0.5rem;"></i>
<strong>Smart Detection:</strong> Our AI automatically identifies tables, lists, and structured data on financial websites including SEC filings, Yahoo Finance, and more.
</div>
<div class="action-buttons">
<button class="btn btn-primary" onclick="startScraping()">
<i class="bi bi-play-circle"></i> Start Scraping
</button>
<button class="btn btn-secondary" onclick="previewData()">
<i class="bi bi-eye"></i> Preview
</button>
</div>
</div>
</section>
<section class="results-section" id="results" style="display: none;">
<div class="container">
<div class="results-header">
<h3>Scraping Results</h3>
<div class="status-indicator">
<div class="status-dot"></div>
<span>Processing...</span>
</div>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 0%"></div>
</div>
<div class="data-preview">
<div id="loading" style="text-align: center; padding: 2rem;">
<div class="loading-spinner"></div>
<p style="margin-top: 1rem;">Analyzing website structure...</p>
</div>
<div id="preview-content" style="display: none;">
{
"status": "success",
"timestamp": "2025-06-26T10:30:00Z",
"url": "https://example.com/data",
"data": [
{
"company": "AAPL",
"price": "$150.25",
"change": "+2.3%",
"volume": "45.2M"
},
{
"company": "GOOGL",
"price": "$2,750.80",
"change": "-0.8%",
"volume": "1.2M"
},
{
"company": "MSFT",
"price": "$335.50",
"change": "+1.2%",
"volume": "23.8M"
}
],
"total_records": 3,
"execution_time": "2.3s"
}
</div>
</div>
<div class="action-buttons">
<button class="btn btn-primary" onclick="downloadData()">
<i class="bi bi-download"></i> Download Data
</button>
<button class="btn btn-secondary" onclick="copyToClipboard()">
<i class="bi bi-clipboard"></i> Copy to Clipboard
</button>
<button class="btn btn-secondary" onclick="exportToSheets()">
<i class="bi bi-table"></i> Export to Sheets
</button>
</div>
</div>
</section>
</main>
<script>
// Method selection
document.querySelectorAll('.option-card').forEach(card => {
card.addEventListener('click', function() {
document.querySelectorAll('.option-card').forEach(c => c.classList.remove('active'));
this.classList.add('active');
});
});
// Scraping simulation
function startScraping() {
const resultsSection = document.getElementById('results');
const loading = document.getElementById('loading');
const previewContent = document.getElementById('preview-content');
const progressFill = document.querySelector('.progress-fill');
const statusText = document.querySelector('.status-indicator span');
resultsSection.style.display = 'block';
loading.style.display = 'block';
previewContent.style.display = 'none';
progressFill.style.width = '0%';
// Scroll to results
resultsSection.scrollIntoView({ behavior: 'smooth' });
// Simulate progress
let progress = 0;
const interval = setInterval(() => {
progress += Math.random() * 20;
if (progress >= 100) {
progress = 100;
progressFill.style.width = '100%';
statusText.textContent = 'Complete';
setTimeout(() => {
loading.style.display = 'none';
previewContent.style.display = 'block';
}, 500);
clearInterval(interval);
} else {
progressFill.style.width = progress + '%';
}
}, 300);
}
function previewData() {
alert('Preview mode would show a sample of data without full extraction');
}
function downloadData() {
const data = document.getElementById('preview-content').textContent;
const blob = new Blob([data], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'scraped_data.json';
a.click();
URL.revokeObjectURL(url);
}
function copyToClipboard() {
const data = document.getElementById('preview-content').textContent;
navigator.clipboard.writeText(data).then(() => {
alert('Data copied to clipboard!');
});
}
function exportToSheets() {
alert('Integration with Google Sheets would be implemented here');
}
// Mobile menu toggle
document.querySelector('.mobile-nav-toggle').addEventListener('click', function() {
const navLinks = document.querySelector('.nav-links');
navLinks.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex';
});
// Auto-update URL preview
document.getElementById('target-url').addEventListener('input', function() {
// Real implementation would validate and preview the URL
});
</script>
</body>
</html>
/* Add your styles here */
// Add your code here