231 lines
8.9 KiB
HTML
231 lines
8.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{% block title %}Price Tracker{% endblock %}</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
|
<style>
|
|
body {
|
|
background-color: #f8f9fa;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
}
|
|
.navbar {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
box-shadow: 0 2px 4px rgba(0,0,0,.1);
|
|
}
|
|
.navbar-brand {
|
|
font-weight: bold;
|
|
color: white !important;
|
|
}
|
|
.card {
|
|
border: none;
|
|
border-radius: 15px;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
transition: transform 0.2s;
|
|
}
|
|
.card:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
.price-badge {
|
|
font-size: 1.2em;
|
|
font-weight: bold;
|
|
}
|
|
.price-best {
|
|
background: linear-gradient(135deg, #4CAF50, #45a049);
|
|
}
|
|
.price-high {
|
|
background: linear-gradient(135deg, #f44336, #d32f2f);
|
|
}
|
|
.price-medium {
|
|
background: linear-gradient(135deg, #ff9800, #f57c00);
|
|
}
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
border: none;
|
|
border-radius: 25px;
|
|
padding: 10px 25px;
|
|
}
|
|
.btn-success {
|
|
background: linear-gradient(135deg, #4CAF50, #45a049);
|
|
border: none;
|
|
border-radius: 25px;
|
|
}
|
|
.btn-danger {
|
|
background: linear-gradient(135deg, #f44336, #d32f2f);
|
|
border: none;
|
|
border-radius: 25px;
|
|
}
|
|
.alert {
|
|
border-radius: 15px;
|
|
border: none;
|
|
}
|
|
.site-badge {
|
|
font-size: 0.8em;
|
|
padding: 0.3em 0.6em;
|
|
border-radius: 15px;
|
|
margin-right: 5px;
|
|
}
|
|
.jjfoodservice { background-color: #e74c3c; color: white; }
|
|
.atoz_catering { background-color: #3498db; color: white; }
|
|
.amazon_uk { background-color: #ff9900; color: white; }
|
|
.ebay { background-color: #0064d2; color: white; }
|
|
.walmart { background-color: #0071ce; color: white; }
|
|
|
|
@media (max-width: 768px) {
|
|
.card {
|
|
margin-bottom: 1rem;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<nav class="navbar navbar-expand-lg navbar-dark">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="{{ url_for('index') }}">
|
|
<i class="fas fa-chart-line me-2"></i>Price Tracker
|
|
</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|
<ul class="navbar-nav me-auto">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="{{ url_for('index') }}">
|
|
<i class="fas fa-home me-1"></i>Dashboard
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="{{ url_for('shopping_lists') }}">
|
|
<i class="fas fa-shopping-cart me-1"></i>Shopping Lists
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="{{ url_for('add_product') }}">
|
|
<i class="fas fa-plus me-1"></i>Add Product
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="{{ url_for('settings') }}">
|
|
<i class="fas fa-cog me-1"></i>Settings
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<div class="navbar-nav">
|
|
<button class="btn btn-outline-light btn-sm" onclick="scrapeAll()">
|
|
<i class="fas fa-sync-alt me-1"></i>Scrape All
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container mt-4">
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% if messages %}
|
|
{% for category, message in messages %}
|
|
<div class="alert alert-{{ 'danger' if category == 'error' else category }} alert-dismissible fade show" role="alert">
|
|
<i class="fas fa-{{ 'exclamation-triangle' if category == 'error' else 'check-circle' if category == 'success' else 'info-circle' }} me-2"></i>
|
|
{{ message }}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endwith %}
|
|
|
|
{% block content %}{% endblock %}
|
|
</div>
|
|
|
|
<footer class="bg-dark text-light py-4 mt-5">
|
|
<div class="container text-center">
|
|
<p>© 2025 Price Tracker. Built with Beautiful Soup & Flask.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
|
|
<script>
|
|
function scrapeProduct(productId) {
|
|
const btn = document.querySelector(`[onclick="scrapeProduct(${productId})"]`);
|
|
const originalText = btn.innerHTML;
|
|
btn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Scraping...';
|
|
btn.disabled = true;
|
|
|
|
fetch(`/scrape/${productId}`, { method: 'POST' })
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
location.reload();
|
|
} else {
|
|
alert('Error: ' + (data.error || 'Unknown error'));
|
|
}
|
|
})
|
|
.catch(error => {
|
|
alert('Error: ' + error.message);
|
|
})
|
|
.finally(() => {
|
|
btn.innerHTML = originalText;
|
|
btn.disabled = false;
|
|
});
|
|
}
|
|
|
|
function scrapeAll() {
|
|
const btn = document.querySelector('[onclick="scrapeAll()"]');
|
|
const originalText = btn.innerHTML;
|
|
btn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Scraping...';
|
|
btn.disabled = true;
|
|
|
|
fetch('/scrape_all', { method: 'POST' })
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
alert(`Success! Updated ${data.total_updated} price entries.`);
|
|
location.reload();
|
|
} else {
|
|
alert('Error: ' + (data.error || 'Unknown error'));
|
|
}
|
|
})
|
|
.catch(error => {
|
|
alert('Error: ' + error.message);
|
|
})
|
|
.finally(() => {
|
|
btn.innerHTML = originalText;
|
|
btn.disabled = false;
|
|
});
|
|
}
|
|
|
|
function testNotifications() {
|
|
const btn = document.querySelector('[onclick="testNotifications()"]');
|
|
const originalText = btn.innerHTML;
|
|
btn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Testing...';
|
|
btn.disabled = true;
|
|
|
|
fetch('/test_notifications', { method: 'POST' })
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
let message = 'Notification Test Results:\n';
|
|
if (data.email.enabled) {
|
|
message += `Email: ${data.email.success ? 'Success' : 'Failed - ' + data.email.error}\n`;
|
|
}
|
|
if (data.webhook.enabled) {
|
|
message += `Webhook: ${data.webhook.success ? 'Success' : 'Failed - ' + data.webhook.error}\n`;
|
|
}
|
|
if (!data.email.enabled && !data.webhook.enabled) {
|
|
message += 'No notifications are enabled.';
|
|
}
|
|
alert(message);
|
|
})
|
|
.catch(error => {
|
|
alert('Error: ' + error.message);
|
|
})
|
|
.finally(() => {
|
|
btn.innerHTML = originalText;
|
|
btn.disabled = false;
|
|
});
|
|
}
|
|
</script>
|
|
{% block scripts %}{% endblock %}
|
|
</body>
|
|
</html>
|