|
| 1 | +import { createServer } from 'node:http'; |
| 2 | + |
| 3 | +const HTML = `<!DOCTYPE html> |
| 4 | +<html lang="en"> |
| 5 | +<head> |
| 6 | + <meta charset="UTF-8"> |
| 7 | + <title>Test App</title> |
| 8 | + <style> |
| 9 | + body { font-family: sans-serif; padding: 2rem; background: #f5f5f5; } |
| 10 | + h1 { color: #333; } |
| 11 | + .card { background: white; border-radius: 8px; padding: 1.5rem; margin: 1rem 0; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } |
| 12 | + button { background: #6366f1; color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 6px; cursor: pointer; font-size: 1rem; } |
| 13 | + button:hover { background: #4f46e5; } |
| 14 | + .modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); align-items: center; justify-content: center; } |
| 15 | + .modal.open { display: flex; } |
| 16 | + .modal-content { background: white; border-radius: 12px; padding: 2rem; max-width: 400px; width: 90%; } |
| 17 | + .close-btn { float: right; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #666; } |
| 18 | + #counter { font-size: 2rem; font-weight: bold; color: #6366f1; margin: 1rem 0; } |
| 19 | + </style> |
| 20 | +</head> |
| 21 | +<body> |
| 22 | + <h1>Product Page</h1> |
| 23 | +
|
| 24 | + <div class="card"> |
| 25 | + <h2>Wireless Headphones</h2> |
| 26 | + <p>Premium noise-cancelling headphones with 30-hour battery life.</p> |
| 27 | + <p id="counter">0</p> |
| 28 | + <button id="add-to-cart">Add to Cart</button> |
| 29 | + <button id="try-on-btn" style="margin-left:0.5rem; background:#10b981">Virtual Try-On</button> |
| 30 | + </div> |
| 31 | +
|
| 32 | + <div class="modal" id="modal"> |
| 33 | + <div class="modal-content"> |
| 34 | + <button class="close-btn" id="close-modal" aria-label="Close">×</button> |
| 35 | + <h2>Virtual Try-On</h2> |
| 36 | + <p>See how these headphones look on you using your camera.</p> |
| 37 | + <button id="start-tryon">Start Try-On</button> |
| 38 | + </div> |
| 39 | + </div> |
| 40 | +
|
| 41 | + <script> |
| 42 | + let count = 0; |
| 43 | + document.getElementById('add-to-cart').addEventListener('click', () => { |
| 44 | + count++; |
| 45 | + document.getElementById('counter').textContent = count; |
| 46 | + }); |
| 47 | + document.getElementById('try-on-btn').addEventListener('click', () => { |
| 48 | + document.getElementById('modal').classList.add('open'); |
| 49 | + }); |
| 50 | + document.getElementById('close-modal').addEventListener('click', () => { |
| 51 | + document.getElementById('modal').classList.remove('open'); |
| 52 | + }); |
| 53 | + </script> |
| 54 | +</body> |
| 55 | +</html>`; |
| 56 | + |
| 57 | +const PORT = process.env.PORT ? Number(process.env.PORT) : 3000; |
| 58 | + |
| 59 | +const server = createServer((_req, res) => { |
| 60 | + res.writeHead(200, { 'Content-Type': 'text/html' }); |
| 61 | + res.end(HTML); |
| 62 | +}); |
| 63 | + |
| 64 | +server.listen(PORT, '0.0.0.0', () => { |
| 65 | + console.log(`Simple app running at http://localhost:${PORT}`); |
| 66 | +}); |
0 commit comments