tldraw makereal prompt copy

system prompt copied from tldraw's "low-fidelity wireframe"

Certainly! I'll create a high-fidelity, interactive prototype for a pizza ordering website based on your description. This prototype will include options for selecting pizzas, customizing toppings, collecting customer information, and processing payment. Here's the HTML file with the prototype: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Slice Haven - Order Your Perfect Pizza</title> <script src="https://cdn.tailwindcss.com"></script> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet"> <style> body { font-family: 'Roboto', sans-serif; } </style> </head> <body class="bg-gray-100"> <header class="bg-red-600 text-white p-4"> <div class="container mx-auto flex justify-between items-center"> <h1 class="text-2xl font-bold">Slice Haven</h1> <nav> <ul class="flex space-x-4"> <li><a href="#" class="hover:underline">Menu</a></li> <li><a href="#" class="hover:underline">About</a></li> <li><a href="#" class="hover:underline">Contact</a></li> </ul> </nav> </div> </header> <main class="container mx-auto mt-8 p-4"> <div class="bg-white rounded-lg shadow-md p-6"> <h2 class="text-2xl font-bold mb-4">Create Your Perfect Pizza</h2> <div id="pizza-builder" class="space-y-6"> <div> <h3 class="text-xl font-semibold mb-2">1. Choose Your Size</h3> <div class="flex space-x-4"> <button class="size-btn bg-gray-200 hover:bg-red-500 hover:text-white px-4 py-2 rounded" data-size="small">Small</button> <button class="size-btn bg-gray-200 hover:bg-red-500 hover:text-white px-4 py-2 rounded" data-size="medium">Medium</button> <button class="size-btn bg-gray-200 hover:bg-red-500 hover:text-white px-4 py-2 rounded" data-size="large">Large</button> </div> </div> <div> <h3 class="text-xl font-semibold mb-2">2. Choose Your Toppings</h3> <div class="grid grid-cols-2 md:grid-cols-3 gap-4"> <label class="flex items-center space-x-2"> <input type="checkbox" class="topping-checkbox" value="pepperoni"> <span>Pepperoni</span> </label> <label class="flex items-center space-x-2"> <input type="checkbox" class="topping-checkbox" value="mushrooms"> <span>Mushrooms</span> </label> <label class="flex items-center space-x-2"> <input type="checkbox" class="topping-checkbox" value="onions"> <span>Onions</span> </label> <label class="flex items-center space-x-2"> <input type="checkbox" class="topping-checkbox" value="sausage"> <span>Sausage</span> </label> <label class="flex items-center space-x-2"> <input type="checkbox" class="topping-checkbox" value="bell-peppers"> <span>Bell Peppers</span> </label> <label class="flex items-center space-x-2"> <input type="checkbox" class="topping-checkbox" value="extra-cheese"> <span>Extra Cheese</span> </label> </div> </div> </div> <div class="mt-8"> <h3 class="text-xl font-semibold mb-2">3. Your Information</h3> <form id="order-form" class="space-y-4"> <div> <label for="name" class="block mb-1">Name</label> <input type="text" id="name" name="name" required class="w-full px-3 py-2 border rounded"> </div> <div> <label for="email" class="block mb-1">Email</label> <input type="email" id="email" name="email" required class="w-full px-3 py-2 border rounded"> </div> <div> <label for="address" class="block mb-1">Delivery Address</label> <textarea id="address" name="address" required class="w-full px-3 py-2 border rounded"></textarea> </div> <div> <label for="phone" class="block mb-1">Phone</label> <input type="tel" id="phone" name="phone" required class="w-full px-3 py-2 border rounded"> </div> <div> <h4 class="font-semibold mb-2">Payment Method</h4> <div class="space-y-2"> <label class="flex items-center space-x-2"> <input type="radio" name="payment" value="credit-card" required> <span>Credit Card</span> </label> <label class="flex items-center space-x-2"> <input type="radio" name="payment" value="paypal" required> <span>PayPal</span> </label> <label class="flex items-center space-x-2"> <input type="radio" name="payment" value="cash" required> <span>Cash on Delivery</span> </label> </div> </div> <div> <button type="submit" class="bg-red-600 text-white px-6 py-2 rounded hover:bg-red-700">Place Order</button> </div> </form> </div> </div> </main> <footer class="bg-gray-800 text-white mt-12 py-6"> <div class="container mx-auto text-center"> <p>© 2023 Slice Haven. All rights reserved.</p> </div> </footer> <script type="module"> const pizzaBuilder = document.getElementById('pizza-builder'); const orderForm = document.getElementById('order-form'); const sizeBtns = document.querySelectorAll('.size-btn'); const toppingCheckboxes = document.querySelectorAll('.topping-checkbox'); let selectedSize = ''; let selectedToppings = []; sizeBtns.forEach(btn => { btn.addEventListener('click', () => { sizeBtns.forEach(b => b.classList.remove('bg-red-500', 'text-white')); btn.classList.add('bg-red-500', 'text-white'); selectedSize = btn.dataset.size; }); }); toppingCheckboxes.forEach(checkbox => { checkbox.addEventListener

1 Run

Created on 7/18/2024, 9:03:10 PM

jamiedubs12 mo. ago