commit a74aacc59b343a99d08fc3b0447b69129c64e36c
Author: root <root@hub.scroll.pub>
Date: 2025-01-02 08:06:09 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..27f3ed8
--- /dev/null
+++ b/body.html
@@ -0,0 +1,51 @@
+<header>
+ <nav>
+ <div class="logo">Comparezon</div>
+ <button class="mobile-menu" aria-label="Menu">☰</button>
+ <ul class="nav-links">
+ <li><a href="#compare">Compare</a></li>
+ <li><a href="#recent">Recent</a></li>
+ <li><a href="#about">About</a></li>
+ </ul>
+ </nav>
+</header>
+
+<main>
+ <section class="hero">
+ <h1>Compare Amazon Products Side by Side</h1>
+ <p>Make smarter shopping decisions</p>
+ </section>
+
+ <section id="compare" class="comparison-section">
+ <div class="comparison-container">
+ <div class="product-input">
+ <input type="text" id="product1" placeholder="Paste Amazon URL or Product ID">
+ <button class="compare-btn" onclick="addProduct(1)">Add Product</button>
+ </div>
+ <div class="vs">VS</div>
+ <div class="product-input">
+ <input type="text" id="product2" placeholder="Paste Amazon URL or Product ID">
+ <button class="compare-btn" onclick="addProduct(2)">Add Product</button>
+ </div>
+ </div>
+
+ <div class="comparison-results">
+ <div id="product1-details" class="product-details"></div>
+ <div id="product2-details" class="product-details"></div>
+ </div>
+ </section>
+
+ <section id="recent" class="recent-section">
+ <h2>Recent Comparisons</h2>
+ <div class="recent-grid" id="recent-comparisons"></div>
+ </section>
+
+ <section id="about" class="about-section">
+ <h2>About Comparezon</h2>
+ <p>Comparezon helps you make informed shopping decisions by comparing Amazon products side by side. Compare prices, features, reviews, and more.</p>
+ </section>
+</main>
+
+<footer>
+ <p>Made with ❤️ for smart shoppers</p>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..5210596
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,10 @@
+buildHtml
+baseUrl https://comparezon.scroll.pub
+metaTags
+ description Compare any Amazon products side by side - prices, features, reviews, and more
+ keywords amazon, product comparison, price comparison, shopping comparison
+editButton /edit.html
+title Comparezon - Amazon Product Comparison Tool
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..b6ef478
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_018SJCY8mCmWAzWcfXyMjnFs",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "Here's a complete website for comparing Amazon products:\n\n---domain---\ncomparezon.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://comparezon.scroll.pub\nmetaTags\n description Compare any Amazon products side by side - prices, features, reviews, and more\n keywords amazon, product comparison, price comparison, shopping comparison\neditButton /edit.html\ntitle Comparezon - Amazon Product Comparison Tool\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <div class=\"logo\">Comparezon</div>\n <button class=\"mobile-menu\" aria-label=\"Menu\">☰</button>\n <ul class=\"nav-links\">\n <li><a href=\"#compare\">Compare</a></li>\n <li><a href=\"#recent\">Recent</a></li>\n <li><a href=\"#about\">About</a></li>\n </ul>\n </nav>\n</header>\n\n<main>\n <section class=\"hero\">\n <h1>Compare Amazon Products Side by Side</h1>\n <p>Make smarter shopping decisions</p>\n </section>\n\n <section id=\"compare\" class=\"comparison-section\">\n <div class=\"comparison-container\">\n <div class=\"product-input\">\n <input type=\"text\" id=\"product1\" placeholder=\"Paste Amazon URL or Product ID\">\n <button class=\"compare-btn\" onclick=\"addProduct(1)\">Add Product</button>\n </div>\n <div class=\"vs\">VS</div>\n <div class=\"product-input\">\n <input type=\"text\" id=\"product2\" placeholder=\"Paste Amazon URL or Product ID\">\n <button class=\"compare-btn\" onclick=\"addProduct(2)\">Add Product</button>\n </div>\n </div>\n \n <div class=\"comparison-results\">\n <div id=\"product1-details\" class=\"product-details\"></div>\n <div id=\"product2-details\" class=\"product-details\"></div>\n </div>\n </section>\n\n <section id=\"recent\" class=\"recent-section\">\n <h2>Recent Comparisons</h2>\n <div class=\"recent-grid\" id=\"recent-comparisons\"></div>\n </section>\n\n <section id=\"about\" class=\"about-section\">\n <h2>About Comparezon</h2>\n <p>Comparezon helps you make informed shopping decisions by comparing Amazon products side by side. Compare prices, features, reviews, and more.</p>\n </section>\n</main>\n\n<footer>\n <p>Made with ❤️ for smart shoppers</p>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #232f3e;\n --accent-color: #ff9900;\n --text-color: #333;\n --light-bg: #f5f5f5;\n --border-radius: 8px;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n}\n\nheader {\n background: var(--primary-color);\n padding: 1rem;\n position: fixed;\n width: 100%;\n top: 0;\n z-index: 100;\n}\n\nnav {\n max-width: 1200px;\n margin: 0 auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.logo {\n color: white;\n font-size: 1.5rem;\n font-weight: bold;\n}\n\n.nav-links {\n display: flex;\n list-style: none;\n gap: 2rem;\n}\n\n.nav-links a {\n color: white;\n text-decoration: none;\n transition: color 0.3s;\n}\n\n.nav-links a:hover {\n color: var(--accent-color);\n}\n\n.mobile-menu {\n display: none;\n background: none;\n border: none;\n color: white;\n font-size: 1.5rem;\n cursor: pointer;\n}\n\nmain {\n margin-top: 4rem;\n}\n\n.hero {\n background: linear-gradient(135deg, var(--primary-color), #1a237e);\n color: white;\n text-align: center;\n padding: 4rem 1rem;\n}\n\n.hero h1 {\n font-size: 2.5rem;\n margin-bottom: 1rem;\n}\n\n.comparison-section {\n max-width: 1200px;\n margin: 2rem auto;\n padding: 2rem;\n}\n\n.comparison-container {\n display: flex;\n gap: 2rem;\n align-items: center;\n justify-content: center;\n}\n\n.product-input {\n flex: 1;\n}\n\n.vs {\n font-weight: bold;\n font-size: 1.5rem;\n color: var(--accent-color);\n}\n\ninput[type=\"text\"] {\n width: 100%;\n padding: 1rem;\n border: 2px solid #ddd;\n border-radius: var(--border-radius);\n margin-bottom: 1rem;\n}\n\n.compare-btn {\n background: var(--accent-color);\n color: white;\n border: none;\n padding: 0.8rem 1.5rem;\n border-radius: var(--border-radius);\n cursor: pointer;\n transition: background 0.3s;\n}\n\n.compare-btn:hover {\n background: #e88a00;\n}\n\n.comparison-results {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 2rem;\n margin-top: 2rem;\n}\n\n.product-details {\n background: var(--light-bg);\n padding: 1.5rem;\n border-radius: var(--border-radius);\n min-height: 200px;\n}\n\n@media (max-width: 768px) {\n .mobile-menu {\n display: block;\n }\n\n .nav-links {\n display: none;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n background: var(--primary-color);\n flex-direction: column;\n padding: 1rem;\n }\n\n .nav-links.active {\n display: flex;\n }\n\n .comparison-container {\n flex-direction: column;\n }\n\n .comparison-results {\n grid-template-columns: 1fr;\n }\n}\n\n---script.js---\n// Mobile menu toggle\nconst mobileMenu = document.querySelector('.mobile-menu');\nconst navLinks = document.querySelector('.nav-links');\n\nmobileMenu.addEventListener('click', () => {\n navLinks.classList.toggle('active');\n});\n\n// Product comparison functionality\nfunction addProduct(productNumber) {\n const input = document.getElementById(`product${productNumber}`);\n const productDetails = document.getElementById(`product${productNumber}-details`);\n \n if (!input.value) {\n alert('Please enter a product URL or ID');\n return;\n }\n\n // Simulate product fetching\n productDetails.innerHTML = `\n <div class=\"product-loading\">\n <p>Loading product details...</p>\n </div>\n `;\n\n // Simulate API call\n setTimeout(() => {\n displayProductDetails(productNumber, input.value);\n }, 1000);\n}\n\nfunction displayProductDetails(productNumber, productId) {\n // This is a mock function - in reality, you'd fetch real product data\n const mockProduct = {\n title: `Sample Product ${productNumber}`,\n price: `$${Math.floor(Math.random() * 1000)}.99`,\n rating: (Math.random() * 2 + 3).toFixed(1),\n reviews: Math.floor(Math.random() * 1000),\n features: [\n 'Feature 1',\n 'Feature 2',\n 'Feature 3'\n ]\n };\n\n const productDetails = document.getElementById(`product${productNumber}-details`);\n productDetails.innerHTML = `\n <h3>${mockProduct.title}</h3>\n <p class=\"price\">${mockProduct.price}</p>\n <div class=\"rating\">\n ⭐ ${mockProduct.rating} (${mockProduct.reviews} reviews)\n </div>\n <ul class=\"features\">\n ${mockProduct.features.map(feature => `<li>${feature}</li>`).join('')}\n </ul>\n `;\n\n saveToRecent(mockProduct);\n}\n\nfunction saveToRecent(product) {\n let recent = JSON.parse(localStorage.getItem('recentComparisons') || '[]');\n recent.unshift(product);\n recent = recent.slice(0, 6); // Keep only 6 most recent\n localStorage.setItem('recentComparisons', JSON.stringify(recent));\n updateRecentComparisons();\n}\n\nfunction updateRecentComparisons() {\n const recentContainer = document.getElementById('recent-comparisons');\n const recent = JSON.parse(localStorage.getItem('recentComparisons') || '[]');\n \n recentContainer.innerHTML = recent.map(product => `\n <div class=\"recent-item\">\n <h4>${product.title}</h4>\n <p>${product.price}</p>\n </div>\n `).join('');\n}\n\n// Initialize recent comparisons on page load\nupdateRecentComparisons();\n\n---end---\n\nThis website features:\n1. Clean, modern design with smooth animations\n2. Fully responsive layout\n3. Mobile-friendly navigation\n4. Product comparison interface\n5. Recent comparisons history using localStorage\n6. Loading states and error handling\n7. Accessibility features\n8. SEO-friendly structure\n9. Beautiful gradient backgrounds\n10. Professional typography and spacing\n\nThe domain name \"comparezon\" combines \"compare\" and \"amazon\" into a memorable, purpose-describing name.\n\nNote: This is a frontend-only implementation. In a real-world scenario, you'd need to implement proper API calls to fetch Amazon product data and handle CORS issues through a backend service."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 279,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2609
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..1fc3700
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# comparezon.scroll.pub
+Website generated by Claude from prompt: a website which can compare any goods in amazon
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..a31f1ba
--- /dev/null
+++ b/script.js
@@ -0,0 +1,82 @@
+// Mobile menu toggle
+const mobileMenu = document.querySelector('.mobile-menu');
+const navLinks = document.querySelector('.nav-links');
+
+mobileMenu.addEventListener('click', () => {
+ navLinks.classList.toggle('active');
+});
+
+// Product comparison functionality
+function addProduct(productNumber) {
+ const input = document.getElementById(`product${productNumber}`);
+ const productDetails = document.getElementById(`product${productNumber}-details`);
+
+ if (!input.value) {
+ alert('Please enter a product URL or ID');
+ return;
+ }
+
+ // Simulate product fetching
+ productDetails.innerHTML = `
+ <div class="product-loading">
+ <p>Loading product details...</p>
+ </div>
+ `;
+
+ // Simulate API call
+ setTimeout(() => {
+ displayProductDetails(productNumber, input.value);
+ }, 1000);
+}
+
+function displayProductDetails(productNumber, productId) {
+ // This is a mock function - in reality, you'd fetch real product data
+ const mockProduct = {
+ title: `Sample Product ${productNumber}`,
+ price: `$${Math.floor(Math.random() * 1000)}.99`,
+ rating: (Math.random() * 2 + 3).toFixed(1),
+ reviews: Math.floor(Math.random() * 1000),
+ features: [
+ 'Feature 1',
+ 'Feature 2',
+ 'Feature 3'
+ ]
+ };
+
+ const productDetails = document.getElementById(`product${productNumber}-details`);
+ productDetails.innerHTML = `
+ <h3>${mockProduct.title}</h3>
+ <p class="price">${mockProduct.price}</p>
+ <div class="rating">
+ ⭐ ${mockProduct.rating} (${mockProduct.reviews} reviews)
+ </div>
+ <ul class="features">
+ ${mockProduct.features.map(feature => `<li>${feature}</li>`).join('')}
+ </ul>
+ `;
+
+ saveToRecent(mockProduct);
+}
+
+function saveToRecent(product) {
+ let recent = JSON.parse(localStorage.getItem('recentComparisons') || '[]');
+ recent.unshift(product);
+ recent = recent.slice(0, 6); // Keep only 6 most recent
+ localStorage.setItem('recentComparisons', JSON.stringify(recent));
+ updateRecentComparisons();
+}
+
+function updateRecentComparisons() {
+ const recentContainer = document.getElementById('recent-comparisons');
+ const recent = JSON.parse(localStorage.getItem('recentComparisons') || '[]');
+
+ recentContainer.innerHTML = recent.map(product => `
+ <div class="recent-item">
+ <h4>${product.title}</h4>
+ <p>${product.price}</p>
+ </div>
+ `).join('');
+}
+
+// Initialize recent comparisons on page load
+updateRecentComparisons();
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..7482cb8
--- /dev/null
+++ b/style.css
@@ -0,0 +1,171 @@
+:root {
+ --primary-color: #232f3e;
+ --accent-color: #ff9900;
+ --text-color: #333;
+ --light-bg: #f5f5f5;
+ --border-radius: 8px;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+ line-height: 1.6;
+ color: var(--text-color);
+}
+
+header {
+ background: var(--primary-color);
+ padding: 1rem;
+ position: fixed;
+ width: 100%;
+ top: 0;
+ z-index: 100;
+}
+
+nav {
+ max-width: 1200px;
+ margin: 0 auto;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.logo {
+ color: white;
+ font-size: 1.5rem;
+ font-weight: bold;
+}
+
+.nav-links {
+ display: flex;
+ list-style: none;
+ gap: 2rem;
+}
+
+.nav-links a {
+ color: white;
+ text-decoration: none;
+ transition: color 0.3s;
+}
+
+.nav-links a:hover {
+ color: var(--accent-color);
+}
+
+.mobile-menu {
+ display: none;
+ background: none;
+ border: none;
+ color: white;
+ font-size: 1.5rem;
+ cursor: pointer;
+}
+
+main {
+ margin-top: 4rem;
+}
+
+.hero {
+ background: linear-gradient(135deg, var(--primary-color), #1a237e);
+ color: white;
+ text-align: center;
+ padding: 4rem 1rem;
+}
+
+.hero h1 {
+ font-size: 2.5rem;
+ margin-bottom: 1rem;
+}
+
+.comparison-section {
+ max-width: 1200px;
+ margin: 2rem auto;
+ padding: 2rem;
+}
+
+.comparison-container {
+ display: flex;
+ gap: 2rem;
+ align-items: center;
+ justify-content: center;
+}
+
+.product-input {
+ flex: 1;
+}
+
+.vs {
+ font-weight: bold;
+ font-size: 1.5rem;
+ color: var(--accent-color);
+}
+
+input[type="text"] {
+ width: 100%;
+ padding: 1rem;
+ border: 2px solid #ddd;
+ border-radius: var(--border-radius);
+ margin-bottom: 1rem;
+}
+
+.compare-btn {
+ background: var(--accent-color);
+ color: white;
+ border: none;
+ padding: 0.8rem 1.5rem;
+ border-radius: var(--border-radius);
+ cursor: pointer;
+ transition: background 0.3s;
+}
+
+.compare-btn:hover {
+ background: #e88a00;
+}
+
+.comparison-results {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 2rem;
+ margin-top: 2rem;
+}
+
+.product-details {
+ background: var(--light-bg);
+ padding: 1.5rem;
+ border-radius: var(--border-radius);
+ min-height: 200px;
+}
+
+@media (max-width: 768px) {
+ .mobile-menu {
+ display: block;
+ }
+
+ .nav-links {
+ display: none;
+ position: absolute;
+ top: 100%;
+ left: 0;
+ right: 0;
+ background: var(--primary-color);
+ flex-direction: column;
+ padding: 1rem;
+ }
+
+ .nav-links.active {
+ display: flex;
+ }
+
+ .comparison-container {
+ flex-direction: column;
+ }
+
+ .comparison-results {
+ grid-template-columns: 1fr;
+ }
+}