File size: 24,986 Bytes
e8a795c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PricePulse - Amazon Price Tracker</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.price-card {
transition: all 0.3s ease;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.price-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}
.chart-container {
height: 300px;
position: relative;
}
.pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.loading-spinner {
border: 4px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top: 4px solid #fff;
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body class="bg-gray-50">
<!-- Header -->
<header class="gradient-bg text-white">
<div class="container mx-auto px-4 py-8">
<div class="flex justify-between items-center">
<div class="flex items-center space-x-2">
<i class="fas fa-chart-line text-3xl"></i>
<h1 class="text-2xl font-bold">PricePulse</h1>
</div>
<nav>
<ul class="flex space-x-6">
<li><a href="#" class="hover:underline">Home</a></li>
<li><a href="#" class="hover:underline">How it works</a></li>
<li><a href="#" class="hover:underline">Pricing</a></li>
<li><a href="#" class="hover:underline">Contact</a></li>
</ul>
</nav>
</div>
<div class="mt-16 text-center">
<h2 class="text-4xl md:text-5xl font-bold mb-4">Track Amazon Prices Like Never Before</h2>
<p class="text-xl mb-8 max-w-2xl mx-auto">Our AI analyzes price history to show you the best time to buy and the lowest price ever.</p>
<div class="max-w-2xl mx-auto relative">
<input type="text" id="productUrl" placeholder="Paste Amazon product URL here..." class="w-full px-6 py-4 rounded-full text-gray-800 focus:outline-none focus:ring-2 focus:ring-purple-500">
<button id="analyzeBtn" class="absolute right-2 top-2 bg-purple-700 hover:bg-purple-800 text-white px-6 py-2 rounded-full font-medium transition-all pulse">
Analyze <i class="fas fa-arrow-right ml-2"></i>
</button>
</div>
</div>
</div>
</header>
<!-- How it works -->
<section class="py-16 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">How PricePulse Works</h2>
<div class="grid md:grid-cols-3 gap-8">
<div class="text-center p-6 rounded-lg bg-gray-50">
<div class="bg-purple-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4">
<i class="fas fa-link text-purple-600 text-2xl"></i>
</div>
<h3 class="text-xl font-semibold mb-2">1. Paste URL</h3>
<p class="text-gray-600">Copy and paste any Amazon product link into our analyzer.</p>
</div>
<div class="text-center p-6 rounded-lg bg-gray-50">
<div class="bg-purple-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4">
<i class="fas fa-brain text-purple-600 text-2xl"></i>
</div>
<h3 class="text-xl font-semibold mb-2">2. AI Analysis</h3>
<p class="text-gray-600">Our AI scans historical data to find price patterns and trends.</p>
</div>
<div class="text-center p-6 rounded-lg bg-gray-50">
<div class="bg-purple-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4">
<i class="fas fa-chart-bar text-purple-600 text-2xl"></i>
</div>
<h3 class="text-xl font-semibold mb-2">3. Get Insights</h3>
<p class="text-gray-600">See the lowest price ever, price drops, and best time to buy.</p>
</div>
</div>
</div>
</section>
<!-- Results Section (Initially hidden) -->
<section id="resultsSection" class="py-16 bg-gray-100 hidden">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold">Price Analysis Results</h2>
<p class="text-gray-600 mt-2">Here's what our AI found about this product</p>
</div>
<div class="grid md:grid-cols-3 gap-8 mb-12">
<!-- Product Card -->
<div class="bg-white rounded-xl overflow-hidden shadow-lg">
<div id="productImage" class="h-48 bg-gray-200 flex items-center justify-center">
<i class="fas fa-camera text-gray-400 text-4xl"></i>
</div>
<div class="p-6">
<h3 id="productTitle" class="text-xl font-semibold mb-2">Product Title</h3>
<div class="flex items-center mb-4">
<div id="productRating" class="flex text-yellow-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<span id="reviewCount" class="text-gray-500 ml-2">(123 reviews)</span>
</div>
<div class="flex justify-between items-center">
<div>
<span class="text-gray-500 text-sm">Current Price</span>
<p id="currentPrice" class="text-2xl font-bold text-purple-600">$99.99</p>
</div>
<button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg">
<i class="fas fa-shopping-cart mr-2"></i> Buy Now
</button>
</div>
</div>
</div>
<!-- Price Stats -->
<div class="space-y-6">
<div class="price-card bg-white p-6 rounded-xl">
<div class="flex items-center mb-4">
<div class="bg-green-100 p-3 rounded-full mr-4">
<i class="fas fa-arrow-down text-green-600 text-xl"></i>
</div>
<div>
<p class="text-gray-500">Lowest Price Ever</p>
<h3 id="lowestPrice" class="text-2xl font-bold">$79.99</h3>
</div>
</div>
<p class="text-gray-600 text-sm" id="lowestPriceDate">Recorded on January 15, 2023</p>
</div>
<div class="price-card bg-white p-6 rounded-xl">
<div class="flex items-center mb-4">
<div class="bg-red-100 p-3 rounded-full mr-4">
<i class="fas fa-arrow-up text-red-600 text-xl"></i>
</div>
<div>
<p class="text-gray-500">Highest Price Ever</p>
<h3 id="highestPrice" class="text-2xl font-bold">$129.99</h3>
</div>
</div>
<p class="text-gray-600 text-sm" id="highestPriceDate">Recorded on November 30, 2022</p>
</div>
<div class="price-card bg-white p-6 rounded-xl">
<div class="flex items-center mb-4">
<div class="bg-blue-100 p-3 rounded-full mr-4">
<i class="fas fa-percentage text-blue-600 text-xl"></i>
</div>
<div>
<p class="text-gray-500">Average Price</p>
<h3 id="averagePrice" class="text-2xl font-bold">$89.99</h3>
</div>
</div>
<p class="text-gray-600 text-sm">Based on 6 months of data</p>
</div>
</div>
<!-- Price Drop Alert -->
<div class="price-card bg-white p-6 rounded-xl">
<h3 class="text-xl font-semibold mb-4">Price Drop Alert</h3>
<p class="text-gray-600 mb-6">Get notified when this product reaches your desired price.</p>
<div class="mb-4">
<label class="block text-gray-700 mb-2">Alert me when price drops below:</label>
<div class="relative">
<span class="absolute left-3 top-3 text-gray-500">$</span>
<input type="number" class="w-full pl-8 pr-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500" placeholder="e.g. 85">
</div>
</div>
<div class="mb-4">
<label class="block text-gray-700 mb-2">Email address</label>
<input type="email" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500" placeholder="your@email.com">
</div>
<button class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 rounded-lg font-medium">
Set Price Alert
</button>
</div>
</div>
<!-- Price History Chart -->
<div class="bg-white p-6 rounded-xl shadow-lg mb-12">
<div class="flex justify-between items-center mb-6">
<h3 class="text-xl font-semibold">Price History (Last 6 Months)</h3>
<div class="flex space-x-2">
<button class="px-3 py-1 bg-gray-100 rounded-lg text-sm">3M</button>
<button class="px-3 py-1 bg-purple-600 text-white rounded-lg text-sm">6M</button>
<button class="px-3 py-1 bg-gray-100 rounded-lg text-sm">1Y</button>
<button class="px-3 py-1 bg-gray-100 rounded-lg text-sm">All</button>
</div>
</div>
<div class="chart-container">
<canvas id="priceChart"></canvas>
</div>
</div>
<!-- Price Prediction -->
<div class="bg-white p-6 rounded-xl shadow-lg">
<h3 class="text-xl font-semibold mb-4">AI Price Prediction</h3>
<p class="text-gray-600 mb-6">Our prediction model suggests the best time to buy this product.</p>
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-blue-50 p-6 rounded-lg">
<div class="flex items-center mb-4">
<div class="bg-blue-100 p-3 rounded-full mr-4">
<i class="fas fa-lightbulb text-blue-600 text-xl"></i>
</div>
<div>
<p class="text-gray-700 font-medium">Buy Recommendation</p>
<h3 id="buyRecommendation" class="text-xl font-bold">Wait for a better deal</h3>
</div>
</div>
<p class="text-gray-600" id="buyRecommendationText">The current price is higher than the average price. Our AI predicts a 75% chance of price drop in the next 30 days.</p>
</div>
<div class="bg-purple-50 p-6 rounded-lg">
<div class="flex items-center mb-4">
<div class="bg-purple-100 p-3 rounded-full mr-4">
<i class="fas fa-calendar-alt text-purple-600 text-xl"></i>
</div>
<div>
<p class="text-gray-700 font-medium">Best Time to Buy</p>
<h3 id="bestTimeToBuy" class="text-xl font-bold">Next Month</h3>
</div>
</div>
<p class="text-gray-600" id="bestTimeToBuyText">Historical data shows this product typically has its biggest discounts in November during Black Friday sales.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Loading State -->
<div id="loadingState" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
<div class="bg-white p-8 rounded-xl text-center max-w-md">
<div class="loading-spinner mx-auto mb-4"></div>
<h3 class="text-xl font-semibold mb-2">Analyzing Product</h3>
<p class="text-gray-600 mb-4">Our AI is scanning price history and generating insights...</p>
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div id="progressBar" class="bg-purple-600 h-2.5 rounded-full" style="width: 0%"></div>
</div>
<p id="progressText" class="text-sm text-gray-500 mt-2">0% complete</p>
</div>
</div>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-12">
<div class="container mx-auto px-4">
<div class="grid md:grid-cols-4 gap-8 mb-8">
<div>
<h3 class="text-xl font-bold mb-4">PricePulse</h3>
<p class="text-gray-400">The smart way to track prices and save money on your online shopping.</p>
</div>
<div>
<h4 class="font-semibold mb-4">Features</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">Price Tracking</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Price Alerts</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Price History</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">AI Predictions</a></li>
</ul>
</div>
<div>
<h4 class="font-semibold mb-4">Company</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
</ul>
</div>
<div>
<h4 class="font-semibold mb-4">Connect</h4>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-facebook"></i></a>
<a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-instagram"></i></a>
<a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-linkedin"></i></a>
</div>
</div>
</div>
<div class="border-t border-gray-800 pt-8 text-center text-gray-400">
<p>© 2023 PricePulse. All rights reserved.</p>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const analyzeBtn = document.getElementById('analyzeBtn');
const productUrl = document.getElementById('productUrl');
const resultsSection = document.getElementById('resultsSection');
const loadingState = document.getElementById('loadingState');
const progressBar = document.getElementById('progressBar');
const progressText = document.getElementById('progressText');
analyzeBtn.addEventListener('click', function() {
const url = productUrl.value.trim();
if (!url) {
alert('Please enter an Amazon product URL');
return;
}
// Show loading state
loadingState.classList.remove('hidden');
// Simulate progress
let progress = 0;
const interval = setInterval(() => {
progress += Math.random() * 10;
if (progress > 100) progress = 100;
progressBar.style.width = `${progress}%`;
progressText.textContent = `${Math.floor(progress)}% complete`;
if (progress === 100) {
clearInterval(interval);
// Hide loading and show results after a short delay
setTimeout(() => {
loadingState.classList.add('hidden');
resultsSection.classList.remove('hidden');
// Scroll to results
resultsSection.scrollIntoView({ behavior: 'smooth' });
// Update with mock data
updateProductInfo();
renderPriceChart();
}, 500);
}
}, 300);
});
function updateProductInfo() {
// Mock data - in a real app this would come from an API
document.getElementById('productTitle').textContent = 'Apple AirPods Pro (2nd Generation) Wireless Earbuds';
document.getElementById('currentPrice').textContent = '$199.00';
document.getElementById('lowestPrice').textContent = '$169.99';
document.getElementById('lowestPriceDate').textContent = 'Recorded on July 4, 2023';
document.getElementById('highestPrice').textContent = '$249.00';
document.getElementById('highestPriceDate').textContent = 'Recorded on December 25, 2022';
document.getElementById('averagePrice').textContent = '$189.99';
document.getElementById('buyRecommendation').textContent = 'Good Deal';
document.getElementById('buyRecommendationText').textContent = 'The current price is 15% below the average price. This is a good time to buy.';
document.getElementById('bestTimeToBuy').textContent = 'Now';
document.getElementById('bestTimeToBuyText').textContent = 'Our AI predicts prices will rise in the next month as inventory decreases.';
// Set rating (4.5 stars)
const ratingContainer = document.getElementById('productRating');
ratingContainer.innerHTML = '';
for (let i = 0; i < 4; i++) {
ratingContainer.innerHTML += '<i class="fas fa-star"></i>';
}
ratingContainer.innerHTML += '<i class="fas fa-star-half-alt"></i>';
document.getElementById('reviewCount').textContent = '(12,548 reviews)';
// Set product image
const productImage = document.getElementById('productImage');
productImage.innerHTML = '';
productImage.style.backgroundImage = 'url(https://m.media-amazon.com/images/I/61SUj2aKoEL._AC_SL1500_.jpg)';
productImage.style.backgroundSize = 'contain';
productImage.style.backgroundRepeat = 'no-repeat';
productImage.style.backgroundPosition = 'center';
}
function renderPriceChart() {
const ctx = document.getElementById('priceChart').getContext('2d');
// Mock data
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'];
const prices = [229, 219, 199, 189, 179, 199];
const avgPrices = [219, 209, 199, 189, 189, 199];
new Chart(ctx, {
type: 'line',
data: {
labels: months,
datasets: [
{
label: 'Price History',
data: prices,
borderColor: '#7c3aed',
backgroundColor: 'rgba(124, 58, 237, 0.1)',
borderWidth: 2,
fill: true,
tension: 0.4
},
{
label: 'Average Price',
data: avgPrices,
borderColor: '#10b981',
backgroundColor: 'rgba(16, 185, 129, 0.1)',
borderWidth: 2,
borderDash: [5, 5],
fill: false,
tension: 0.1
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'top',
},
tooltip: {
mode: 'index',
intersect: false,
}
},
scales: {
y: {
beginAtZero: false,
title: {
display: true,
text: 'Price ($)'
}
}
}
}
});
}
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=JInchurikiof9tails/something-new" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html> |