Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Sample E-commerce Page for JsonCssExtractionStrategy Testing</title> | |
| <style> | |
| body { font-family: Arial, sans-serif; line-height: 1.6; padding: 20px; } | |
| .category { border: 1px solid #ddd; margin-bottom: 20px; padding: 10px; } | |
| .product { border: 1px solid #eee; margin: 10px 0; padding: 10px; } | |
| .product-details, .product-reviews, .related-products { margin-top: 10px; } | |
| .review { background-color: #f9f9f9; margin: 5px 0; padding: 5px; } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Sample E-commerce Product Catalog</h1> | |
| <div id="catalog"></div> | |
| <script> | |
| const categories = ['Electronics', 'Home & Kitchen', 'Books']; | |
| const products = [ | |
| { | |
| name: 'Smartphone X', | |
| price: '$999', | |
| brand: 'TechCorp', | |
| model: 'X-2000', | |
| features: ['5G capable', '6.5" OLED screen', '128GB storage'], | |
| reviews: [ | |
| { reviewer: 'John D.', rating: '4.5', text: 'Great phone, love the camera!' }, | |
| { reviewer: 'Jane S.', rating: '5', text: 'Best smartphone I\'ve ever owned.' } | |
| ], | |
| related: [ | |
| { name: 'Phone Case', price: '$29.99' }, | |
| { name: 'Screen Protector', price: '$9.99' } | |
| ] | |
| }, | |
| { | |
| name: 'Laptop Pro', | |
| price: '$1499', | |
| brand: 'TechMaster', | |
| model: 'LT-3000', | |
| features: ['Intel i7 processor', '16GB RAM', '512GB SSD'], | |
| reviews: [ | |
| { reviewer: 'Alice W.', rating: '4', text: 'Powerful machine, but a bit heavy.' }, | |
| { reviewer: 'Bob M.', rating: '5', text: 'Perfect for my development work!' } | |
| ], | |
| related: [ | |
| { name: 'Laptop Bag', price: '$49.99' }, | |
| { name: 'Wireless Mouse', price: '$24.99' } | |
| ] | |
| } | |
| ]; | |
| function createProductHTML(product) { | |
| return ` | |
| <div class="product"> | |
| <h3 class="product-name">${product.name}</h3> | |
| <p class="product-price">${product.price}</p> | |
| <div class="product-details"> | |
| <span class="brand">${product.brand}</span> | |
| <span class="model">${product.model}</span> | |
| </div> | |
| <ul class="product-features"> | |
| ${product.features.map(feature => `<li>${feature}</li>`).join('')} | |
| </ul> | |
| <div class="product-reviews"> | |
| ${product.reviews.map(review => ` | |
| <div class="review"> | |
| <span class="reviewer">${review.reviewer}</span> | |
| <span class="rating">${review.rating}</span> | |
| <p class="review-text">${review.text}</p> | |
| </div> | |
| `).join('')} | |
| </div> | |
| <ul class="related-products"> | |
| ${product.related.map(item => ` | |
| <li> | |
| <span class="related-name">${item.name}</span> | |
| <span class="related-price">${item.price}</span> | |
| </li> | |
| `).join('')} | |
| </ul> | |
| </div> | |
| `; | |
| } | |
| function createCategoryHTML(category, products) { | |
| return ` | |
| <div class="category"> | |
| <h2 class="category-name">${category}</h2> | |
| ${products.map(createProductHTML).join('')} | |
| </div> | |
| `; | |
| } | |
| function populateCatalog() { | |
| const catalog = document.getElementById('catalog'); | |
| categories.forEach(category => { | |
| catalog.innerHTML += createCategoryHTML(category, products); | |
| }); | |
| } | |
| populateCatalog(); | |
| </script> | |
| </body> | |
| </html> |