|
|
<!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 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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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 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; |
|
|
} |
|
|
|
|
|
|
|
|
loadingState.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
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); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
loadingState.classList.add('hidden'); |
|
|
resultsSection.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
resultsSection.scrollIntoView({ behavior: 'smooth' }); |
|
|
|
|
|
|
|
|
updateProductInfo(); |
|
|
renderPriceChart(); |
|
|
}, 500); |
|
|
} |
|
|
}, 300); |
|
|
}); |
|
|
|
|
|
function updateProductInfo() { |
|
|
|
|
|
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.'; |
|
|
|
|
|
|
|
|
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)'; |
|
|
|
|
|
|
|
|
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'); |
|
|
|
|
|
|
|
|
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> |
