Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PriceCheck India - Grocery 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, #f5f7fa 0%, #c3cfe2 100%); | |
| } | |
| .price-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .search-bar:focus { | |
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3); | |
| } | |
| .trend-icon { | |
| transition: all 0.3s ease; | |
| } | |
| .trend-icon:hover { | |
| transform: scale(1.1); | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="gradient-bg min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="flex flex-col items-center mb-10"> | |
| <div class="flex items-center mb-4"> | |
| <i class="fas fa-shopping-basket text-4xl text-green-600 mr-3"></i> | |
| <h1 class="text-4xl font-bold text-gray-800">PriceCheck India</h1> | |
| </div> | |
| <p class="text-lg text-gray-600 text-center max-w-2xl"> | |
| Track and compare grocery prices across major Indian cities. Save money on your daily essentials! | |
| </p> | |
| </header> | |
| <!-- Search Section --> | |
| <section class="mb-12"> | |
| <div class="bg-white rounded-xl shadow-lg p-6 max-w-4xl mx-auto"> | |
| <div class="flex flex-col md:flex-row gap-4"> | |
| <div class="flex-1 relative"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| <input type="text" id="searchInput" placeholder="Search for groceries (e.g., Rice, Onion, Milk)" | |
| class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 focus:outline-none search-bar"> | |
| </div> | |
| <div class="relative"> | |
| <i class="fas fa-map-marker-alt absolute left-3 top-3 text-gray-400"></i> | |
| <select id="citySelect" class="pl-10 pr-4 py-3 rounded-lg border border-gray-300 focus:outline-none w-full md:w-48"> | |
| <option value="">All Cities</option> | |
| <option value="delhi">Delhi</option> | |
| <option value="mumbai">Mumbai</option> | |
| <option value="bangalore">Bangalore</option> | |
| <option value="hyderabad">Hyderabad</option> | |
| <option value="chennai">Chennai</option> | |
| <option value="kolkata">Kolkata</option> | |
| <option value="pune">Pune</option> | |
| </select> | |
| </div> | |
| <button id="searchBtn" class="bg-green-600 hover:bg-green-700 text-white font-semibold px-6 py-3 rounded-lg transition-colors"> | |
| Search | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Popular Categories --> | |
| <section class="mb-12"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Popular Categories</h2> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4"> | |
| <div class="category-card bg-white rounded-lg p-4 text-center shadow-md hover:shadow-lg cursor-pointer transition-shadow"> | |
| <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-3"> | |
| <i class="fas fa-wheat-awn text-blue-600 text-2xl"></i> | |
| </div> | |
| <span class="font-medium text-gray-700">Grains</span> | |
| </div> | |
| <div class="category-card bg-white rounded-lg p-4 text-center shadow-md hover:shadow-lg cursor-pointer transition-shadow"> | |
| <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-3"> | |
| <i class="fas fa-apple-alt text-green-600 text-2xl"></i> | |
| </div> | |
| <span class="font-medium text-gray-700">Fruits</span> | |
| </div> | |
| <div class="category-card bg-white rounded-lg p-4 text-center shadow-md hover:shadow-lg cursor-pointer transition-shadow"> | |
| <div class="bg-yellow-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-3"> | |
| <i class="fas fa-carrot text-yellow-600 text-2xl"></i> | |
| </div> | |
| <span class="font-medium text-gray-700">Vegetables</span> | |
| </div> | |
| <div class="category-card bg-white rounded-lg p-4 text-center shadow-md hover:shadow-lg cursor-pointer transition-shadow"> | |
| <div class="bg-red-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-3"> | |
| <i class="fas fa-wine-bottle text-red-600 text-2xl"></i> | |
| </div> | |
| <span class="font-medium text-gray-700">Dairy</span> | |
| </div> | |
| <div class="category-card bg-white rounded-lg p-4 text-center shadow-md hover:shadow-lg cursor-pointer transition-shadow"> | |
| <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-3"> | |
| <i class="fas fa-drumstick-bite text-purple-600 text-2xl"></i> | |
| </div> | |
| <span class="font-medium text-gray-700">Meat</span> | |
| </div> | |
| <div class="category-card bg-white rounded-lg p-4 text-center shadow-md hover:shadow-lg cursor-pointer transition-shadow"> | |
| <div class="bg-pink-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-3"> | |
| <i class="fas fa-mortar-pestle text-pink-600 text-2xl"></i> | |
| </div> | |
| <span class="font-medium text-gray-700">Spices</span> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Price Comparison Section --> | |
| <section class="mb-12"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold text-gray-800">Today's Prices</h2> | |
| <div class="flex items-center"> | |
| <span class="text-gray-600 mr-2">Sort by:</span> | |
| <select class="border border-gray-300 rounded-lg px-3 py-1 focus:outline-none"> | |
| <option>Price: Low to High</option> | |
| <option>Price: High to Low</option> | |
| <option>Name (A-Z)</option> | |
| <option>Popularity</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="priceResults"> | |
| <!-- Sample price cards - these would be dynamically generated in a real app --> | |
| <div class="price-card bg-white rounded-xl shadow-md p-6 transition-all duration-300"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div> | |
| <h3 class="font-bold text-lg text-gray-800">Basmati Rice (1kg)</h3> | |
| <p class="text-gray-500">Fortune, Premium</p> | |
| </div> | |
| <div class="bg-green-100 text-green-800 text-xs font-semibold px-2 py-1 rounded-full"> | |
| <i class="fas fa-store mr-1"></i> BigBasket | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-2xl font-bold text-gray-800">₹89</p> | |
| <p class="text-sm text-gray-500">Mumbai</p> | |
| </div> | |
| <div class="text-red-500 font-medium"> | |
| <i class="fas fa-arrow-trend-up mr-1"></i> 5% ↑ | |
| </div> | |
| </div> | |
| </div> | |
| <div class="price-card bg-white rounded-xl shadow-md p-6 transition-all duration-300"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div> | |
| <h3 class="font-bold text-lg text-gray-800">Tomato (1kg)</h3> | |
| <p class="text-gray-500">Fresh, Local</p> | |
| </div> | |
| <div class="bg-blue-100 text-blue-800 text-xs font-semibold px-2 py-1 rounded-full"> | |
| <i class="fas fa-store mr-1"></i> Reliance Fresh | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-2xl font-bold text-gray-800">₹32</p> | |
| <p class="text-sm text-gray-500">Delhi</p> | |
| </div> | |
| <div class="text-green-500 font-medium"> | |
| <i class="fas fa-arrow-trend-down mr-1"></i> 12% ↓ | |
| </div> | |
| </div> | |
| </div> | |
| <div class="price-card bg-white rounded-xl shadow-md p-6 transition-all duration-300"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div> | |
| <h3 class="font-bold text-lg text-gray-800">Amul Milk (1L)</h3> | |
| <p class="text-gray-500">Full Cream</p> | |
| </div> | |
| <div class="bg-yellow-100 text-yellow-800 text-xs font-semibold px-2 py-1 rounded-full"> | |
| <i class="fas fa-store mr-1"></i> Local Vendor | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-2xl font-bold text-gray-800">₹58</p> | |
| <p class="text-sm text-gray-500">Bangalore</p> | |
| </div> | |
| <div class="text-gray-500 font-medium"> | |
| <i class="fas fa-equals mr-1"></i> No change | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-8"> | |
| <button class="bg-white text-green-600 font-semibold px-6 py-3 rounded-lg border border-green-600 hover:bg-green-50 transition-colors"> | |
| Load More Prices | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Price Trends Section --> | |
| <section class="mb-12 bg-white rounded-xl shadow-lg p-6"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">Price Trends</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="bg-gray-50 rounded-lg p-4"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-semibold text-gray-800">Onion Price Trend (Last 30 days)</h3> | |
| <div class="flex gap-2"> | |
| <button class="bg-white text-xs px-2 py-1 rounded border">Delhi</button> | |
| <button class="bg-white text-xs px-2 py-1 rounded border">Mumbai</button> | |
| <button class="bg-white text-xs px-2 py-1 rounded border">Kolkata</button> | |
| </div> | |
| </div> | |
| <div class="h-48 bg-white rounded p-2 border border-gray-200"> | |
| <!-- This would be a chart in a real app --> | |
| <div class="flex items-end h-full gap-1"> | |
| <div class="w-4 bg-green-200" style="height: 20%;"></div> | |
| <div class="w-4 bg-green-300" style="height: 35%;"></div> | |
| <div class="w-4 bg-green-400" style="height: 50%;"></div> | |
| <div class="w-4 bg-green-500" style="height: 70%;"></div> | |
| <div class="w-4 bg-green-600" style="height: 90%;"></div> | |
| <div class="w-4 bg-green-500 pulse" style="height: 80%;"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 rounded-lg p-4"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-semibold text-gray-800">Top Price Drops</h3> | |
| <a href="#" class="text-sm text-green-600 hover:underline">View All</a> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="bg-red-100 w-10 h-10 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-pepper-hot text-red-500"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium text-gray-800">Green Chilli</p> | |
| <p class="text-xs text-gray-500">1kg</p> | |
| </div> | |
| </div> | |
| <div class="text-green-500 font-medium"> | |
| <i class="fas fa-arrow-trend-down mr-1"></i> 18% ↓ | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="bg-yellow-100 w-10 h-10 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-lemon text-yellow-500"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium text-gray-800">Lemon</p> | |
| <p class="text-xs text-gray-500">500g</p> | |
| </div> | |
| </div> | |
| <div class="text-green-500 font-medium"> | |
| <i class="fas fa-arrow-trend-down mr-1"></i> 15% ↓ | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="bg-purple-100 w-10 h-10 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-egg text-purple-500"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium text-gray-800">Eggs</p> | |
| <p class="text-xs text-gray-500">Dozen</p> | |
| </div> | |
| </div> | |
| <div class="text-green-500 font-medium"> | |
| <i class="fas fa-arrow-trend-down mr-1"></i> 8% ↓ | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter Section --> | |
| <section class="bg-green-600 rounded-xl shadow-lg p-8 text-white mb-12"> | |
| <div class="max-w-3xl mx-auto text-center"> | |
| <div class="flex justify-center mb-4"> | |
| <i class="fas fa-envelope-open-text text-4xl"></i> | |
| </div> | |
| <h2 class="text-2xl font-bold mb-4">Get Price Alerts</h2> | |
| <p class="mb-6">Sign up to receive notifications when prices drop for your favorite groceries</p> | |
| <div class="flex flex-col sm:flex-row gap-2 max-w-md mx-auto"> | |
| <input type="email" placeholder="Your email address" class="flex-1 px-4 py-3 rounded-lg text-gray-800 focus:outline-none"> | |
| <button class="bg-white text-green-600 font-semibold px-6 py-3 rounded-lg hover:bg-gray-100 transition-colors"> | |
| Subscribe | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="border-t border-gray-200 pt-8 pb-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center mb-4 md:mb-0"> | |
| <i class="fas fa-shopping-basket text-2xl text-green-600 mr-2"></i> | |
| <span class="text-xl font-bold text-gray-800">PriceCheck India</span> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-600 hover:text-green-600"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="text-gray-600 hover:text-green-600"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-600 hover:text-green-600"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-600 hover:text-green-600"><i class="fab fa-linkedin-in"></i></a> | |
| </div> | |
| </div> | |
| <div class="mt-6 text-center text-gray-500 text-sm"> | |
| <p>© 2023 PriceCheck India. All prices are indicative and collected from various sources.</p> | |
| <p class="mt-2">Data updated daily from government and retail sources across India.</p> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| // Sample JavaScript for interactivity | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Search functionality | |
| const searchBtn = document.getElementById('searchBtn'); | |
| const searchInput = document.getElementById('searchInput'); | |
| const citySelect = document.getElementById('citySelect'); | |
| searchBtn.addEventListener('click', function() { | |
| const query = searchInput.value.trim(); | |
| const city = citySelect.value; | |
| if (query) { | |
| alert(`Searching for "${query}" in ${city || 'all cities'}`); | |
| // In a real app, this would fetch data from an API | |
| } else { | |
| alert('Please enter a grocery item to search'); | |
| } | |
| }); | |
| // Category cards click event | |
| const categoryCards = document.querySelectorAll('.category-card'); | |
| categoryCards.forEach(card => { | |
| card.addEventListener('click', function() { | |
| const category = this.querySelector('span').textContent; | |
| searchInput.value = category; | |
| searchBtn.click(); | |
| }); | |
| }); | |
| // Price trend buttons | |
| const trendButtons = document.querySelectorAll('.trend-icon'); | |
| trendButtons.forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| // In a real app, this would show more detailed trend information | |
| console.log('Viewing detailed trend for:', this.dataset.item); | |
| }); | |
| }); | |
| }); | |
| </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=vs4vijay/pricecheck" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> | |
| </html> |