Vibe coding
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 data
const 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 loading
loadingDiv.style.display = 'block';
resultsDiv.classList.remove('show');
// Simulate API call delay
setTimeout(() => {
loadingDiv.style.display = 'none';
// Find matching products
let 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 deal
const 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 search
document.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
浙公网安备 33010602011771号