Vibe coding（用 AI 的 prompts 写程式）
an you write a simple tool that compares product prices across multiple websites
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Price Comparison Tool</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);min-height: 100vh;padding: 20px;}.container {max-width: 1200px;margin: 0 auto;background: rgba(255, 255, 255, 0.95);border-radius: 20px;padding: 30px;box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);backdrop-filter: blur(10px);}.header {text-align: center;margin-bottom: 30px;}h1 {color: #333;font-size: 2.5em;margin-bottom: 10px;background: linear-gradient(45deg, #667eea, #764ba2);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;}.subtitle {color: #666;font-size: 1.1em;}.search-section {margin-bottom: 30px;}.search-box {display: flex;gap: 15px;margin-bottom: 20px;}input[type="text"] {flex: 1;padding: 15px 20px;border: 2px solid #e0e0e0;border-radius: 12px;font-size: 16px;transition: all 0.3s ease;background: white;}input[type="text"]:focus {outline: none;border-color: #667eea;box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);}button {padding: 15px 30px;background: linear-gradient(45deg, #667eea, #764ba2);color: white;border: none;border-radius: 12px;font-size: 16px;font-weight: 600;cursor: pointer;transition: all 0.3s ease;}button:hover {transform: translateY(-2px);box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);}.results {display: none;}.results.show {display: block;animation: fadeIn 0.5s ease-in;}@keyframes fadeIn {from { opacity: 0; transform: translateY(20px); }to { opacity: 1; transform: translateY(0); }}.product-card {background: white;border-radius: 15px;padding: 25px;margin-bottom: 20px;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);border: 1px solid #f0f0f0;transition: all 0.3s ease;}.product-card:hover {transform: translateY(-5px);box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);}.product-title {font-size: 1.3em;font-weight: 600;color: #333;margin-bottom: 15px;}.price-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));gap: 15px;}.price-item {display: flex;justify-content: space-between;align-items: center;padding: 12px 15px;background: #f8f9fa;border-radius: 10px;transition: all 0.3s ease;}.price-item:hover {background: #e9ecef;}.store-name {font-weight: 600;color: #495057;}.price {font-weight: 700;font-size: 1.1em;}.best-price {background: linear-gradient(45deg, #28a745, #20c997);color: white;}.best-price:hover {background: linear-gradient(45deg, #218838, #1a9e7a);}.loading {text-align: center;padding: 40px;color: #666;font-size: 1.1em;}.spinner {display: inline-block;width: 30px;height: 30px;border: 3px solid #f3f3f3;border-top: 3px solid #667eea;border-radius: 50%;animation: spin 1s linear infinite;margin-right: 10px;}@keyframes spin {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }}.no-results {text-align: center;padding: 40px;color: #666;font-size: 1.1em;}.sample-searches {margin-top: 20px;}.sample-tag {display: inline-block;padding: 8px 15px;margin: 5px;background: rgba(102, 126, 234, 0.1);color: #667eea;border-radius: 20px;font-size: 0.9em;cursor: pointer;transition: all 0.3s ease;}.sample-tag:hover {background: rgba(102, 126, 234, 0.2);transform: translateY(-2px);}</style>
</head>
<body><div class="container"><div class="header"><h1>🛍️ Price Comparison Tool</h1><p class="subtitle">Find the best deals across multiple retailers</p></div><div class="search-section"><div class="search-box"><input type="text" id="searchInput" placeholder="Enter product name (e.g., iPhone 15, MacBook Pro, Nike shoes...)"><button onclick="searchProducts()">Search Prices</button></div><div class="sample-searches"><strong>Try searching for:</strong><span class="sample-tag" onclick="searchSample('iPhone 15')">iPhone 15</span><span class="sample-tag" onclick="searchSample('MacBook Pro')">MacBook Pro</span><span class="sample-tag" onclick="searchSample('Nike Air Max')">Nike Air Max</span><span class="sample-tag" onclick="searchSample('Sony Headphones')">Sony Headphones</span><span class="sample-tag" onclick="searchSample('Samsung TV')">Samsung TV</span></div></div><div id="loadingDiv" class="loading" style="display: none;"><div class="spinner"></div>Searching for best prices...</div><div id="resultsDiv" class="results"><div id="productsContainer"></div></div></div><script>// Mock product dataconst mockProducts = {'iphone 15': [{name: 'iPhone 15 128GB',stores: [{ name: 'Apple Store', price: 799, inStock: true },{ name: 'Amazon', price: 779, inStock: true },{ name: 'Best Buy', price: 799, inStock: true },{ name: 'Walmart', price: 749, inStock: true },{ name: 'Target', price: 789, inStock: false }]}],'macbook pro': [{name: 'MacBook Pro 14" M3',stores: [{ name: 'Apple Store', price: 1599, inStock: true },{ name: 'Amazon', price: 1549, inStock: true },{ name: 'Best Buy', price: 1599, inStock: true },{ name: 'B&H Photo', price: 1529, inStock: true },{ name: 'Costco', price: 1479, inStock: true }]}],'nike air max': [{name: 'Nike Air Max 270',stores: [{ name: 'Nike.com', price: 150, inStock: true },{ name: 'Amazon', price: 139, inStock: true },{ name: 'Foot Locker', price: 150, inStock: false },{ name: 'Finish Line', price: 145, inStock: true },{ name: 'Dick\'s Sporting', price: 142, inStock: true }]}],'sony headphones': [{name: 'Sony WH-1000XM5 Wireless',stores: [{ name: 'Sony Store', price: 399, inStock: true },{ name: 'Amazon', price: 349, inStock: true },{ name: 'Best Buy', price: 379, inStock: true },{ name: 'Target', price: 369, inStock: true },{ name: 'Walmart', price: 359, inStock: false }]}],'samsung tv': [{name: 'Samsung 55" QLED 4K TV',stores: [{ name: 'Samsung Store', price: 1299, inStock: true },{ name: 'Amazon', price: 1199, inStock: true },{ name: 'Best Buy', price: 1249, inStock: true },{ name: 'Costco', price: 1149, inStock: true },{ name: 'Home Depot', price: 1179, inStock: false }]}]};function searchSample(query) {document.getElementById('searchInput').value = query;searchProducts();}function searchProducts() {const query = document.getElementById('searchInput').value.toLowerCase().trim();const loadingDiv = document.getElementById('loadingDiv');const resultsDiv = document.getElementById('resultsDiv');const productsContainer = document.getElementById('productsContainer');if (!query) {alert('Please enter a product name to search');return;}// Show loadingloadingDiv.style.display = 'block';resultsDiv.classList.remove('show');// Simulate API call delaysetTimeout(() => {loadingDiv.style.display = 'none';// Find matching productslet foundProducts = [];for (const [key, products] of Object.entries(mockProducts)) {if (query.includes(key) || key.includes(query)) {foundProducts = foundProducts.concat(products);}}if (foundProducts.length === 0) {productsContainer.innerHTML = `<div class="no-results"><h3>No results found for "${query}"</h3><p>Try searching for one of the sample products above or check your spelling.</p></div>`;} else {productsContainer.innerHTML = foundProducts.map(product => createProductCard(product)).join('');}resultsDiv.classList.add('show');}, 1500);}function createProductCard(product) {// Sort stores by price to find best dealconst sortedStores = [...product.stores].sort((a, b) => a.price - b.price);const bestPrice = sortedStores[0].price;const storeItems = product.stores.map(store => {const isBestPrice = store.price === bestPrice && store.inStock;const stockStatus = store.inStock ? '' : ' (Out of Stock)';return `<div class="price-item ${isBestPrice ? 'best-price' : ''}"><span class="store-name">${store.name}${stockStatus}</span><span class="price">$${store.price}</span></div>`;}).join('');return `<div class="product-card"><div class="product-title">${product.name}</div><div class="price-grid">${storeItems}</div></div>`;}// Allow Enter key to trigger searchdocument.getElementById('searchInput').addEventListener('keypress', function(e) {if (e.key === 'Enter') {searchProducts();}});</script>
</body>
</html>
由于现在的数据都是 mock 的，那这 clearly 不是我们想要的，我们要它真的去找，现在我们的 prompt 就需要 twit 一下
don't build a tool hardcoding data without the backend, just make a tool that opens different shopping websites with the search term entered already
vscode 打开 html
