Discover Your Next Asian Dinner
\n \n\n \n \n \n \n
\n 
body.html
Changed around line 1
+
+
+
AsianPlate
+
+
+
+
+
+
Discover Your Next Asian Dinner
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Made with 🥢 for food lovers
+
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://asianplate.scroll.pub
+ metaTags
+ editButton /edit.html
+ title AsianPlate - Random Asian Dinner Ideas
+ style.css
+ body.html
+ script.js
prompt.json
Changed around line 1
+ {
+ "id": "msg_01GYjzxC349KrCN5kX3frpH3",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "Here's a website for random Asian dinner ideas:\n\n---domain---\nasianplate.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://asianplate.scroll.pub\nmetaTags\neditButton /edit.html\ntitle AsianPlate - Random Asian Dinner Ideas\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n\n \n \n\n\n \n \n\n \n \n \n\n\n\n---style.css---\n:root {\n --primary: #ff4757;\n --secondary: #2f3542;\n --light: #f1f2f6;\n --text: #2f3542;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Segoe UI', system-ui, sans-serif;\n color: var(--text);\n background: var(--light);\n line-height: 1.6;\n}\n\nheader {\n background: white;\n padding: 1rem;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n}\n\nh1 {\n font-size: 2rem;\n color: var(--secondary);\n}\n\nh1 span {\n color: var(--primary);\n}\n\n.hero {\n text-align: center;\n padding: 4rem 1rem;\n background: linear-gradient(135deg, #ff4757 0%, #ff6b81 100%);\n color: white;\n}\n\nh2 {\n font-size: 2.5rem;\n margin-bottom: 2rem;\n}\n\nbutton {\n padding: 1rem 2rem;\n font-size: 1.2rem;\n border: none;\n border-radius: 50px;\n background: white;\n color: var(--primary);\n cursor: pointer;\n transition: transform 0.3s ease;\n box-shadow: 0 4px 15px rgba(0,0,0,0.2);\n}\n\nbutton:hover {\n transform: translateY(-2px);\n}\n\n.dish-display {\n padding: 2rem;\n max-width: 800px;\n margin: 0 auto;\n}\n\n.dish-card {\n background: white;\n border-radius: 15px;\n padding: 2rem;\n box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n transition: opacity 0.3s ease;\n}\n\n.hidden {\n opacity: 0;\n}\n\n.dish-image {\n height: 300px;\n background-size: cover;\n background-position: center;\n border-radius: 10px;\n margin: 1rem 0;\n}\n\n.tags {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n margin-top: 1rem;\n}\n\n.tag {\n background: var(--light);\n padding: 0.5rem 1rem;\n border-radius: 20px;\n font-size: 0.9rem;\n}\n\nfooter {\n text-align: center;\n padding: 2rem;\n background: white;\n margin-top: 2rem;\n}\n\n@media (max-width: 768px) {\n h2 {\n font-size: 2rem;\n }\n \n .dish-image {\n height: 200px;\n }\n}\n\n---script.js---\nconst dishes = [\n {\n name: \"Kung Pao Chicken\",\n image: \"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/...\", // Base64 image data would go here\n description: \"Spicy diced chicken with peanuts, vegetables, and chili peppers\",\n tags: [\"Spicy\", \"Sichuan\", \"Chicken\"]\n },\n {\n name: \"Dim Sum\",\n image: \"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/...\",\n description: \"Variety of small dishes including dumplings and buns\",\n tags: [\"Cantonese\", \"Steamed\", \"Traditional\"]\n },\n // Add more dishes here\n];\n\ndocument.getElementById('generateBtn').addEventListener('click', () => {\n const randomDish = dishes[Math.floor(Math.random() * dishes.length)];\n const card = document.getElementById('dishCard');\n \n card.classList.add('hidden');\n \n setTimeout(() => {\n document.getElementById('dishName').textContent = randomDish.name;\n document.getElementById('dishImage').style.backgroundImage = `url(${randomDish.image})`;\n document.getElementById('dishDescription').textContent = randomDish.description;\n \n const tagsContainer = document.getElementById('dishTags');\n tagsContainer.innerHTML = '';\n randomDish.tags.forEach(tag => {\n const tagEl = document.createElement('span');\n tagEl.classList.add('tag');\n tagEl.textContent = tag;\n tagsContainer.appendChild(tagEl);\n });\n \n card.classList.remove('hidden');\n }, 300);\n});\n\n---end---\n\nThis website features:\n- Clean, minimalist design with attractive color scheme\n- Smooth animations and transitions\n- Responsive layout that works on all devices\n- Semantic HTML structure\n- Accessible button and content structure\n- SEO-friendly meta tags\n- Modern CSS with variables and flexbox\n- Interactive JavaScript for random dish generation\n- Beautiful card-based design for dish display\n- Tag system for categorizing dishes\n\nNote: The actual implementation would need real images (encoded as base64 or served from the server) and more dishes in the array. The current example includes just a sample structure."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 304,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 1681
+ }
+ }
readme.scroll
Changed around line 1
+ # asianplate.scroll.pub
+ Website generated by Claude from prompt: create a website that give me random ideas about my dinner, my appetite is more so around chinese and asian, include pictures if that makes the site more attractive, be creative
script.js
Changed around line 1
+ const dishes = [
+ {
+ name: "Kung Pao Chicken",
+ image: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/...", // Base64 image data would go here
+ description: "Spicy diced chicken with peanuts, vegetables, and chili peppers",
+ tags: ["Spicy", "Sichuan", "Chicken"]
+ },
+ {
+ name: "Dim Sum",
+ image: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/...",
+ description: "Variety of small dishes including dumplings and buns",
+ tags: ["Cantonese", "Steamed", "Traditional"]
+ },
+ // Add more dishes here
+ ];
+
+ document.getElementById('generateBtn').addEventListener('click', () => {
+ const randomDish = dishes[Math.floor(Math.random() * dishes.length)];
+ const card = document.getElementById('dishCard');
+
+ card.classList.add('hidden');
+
+ setTimeout(() => {
+ document.getElementById('dishName').textContent = randomDish.name;
+ document.getElementById('dishImage').style.backgroundImage = `url(${randomDish.image})`;
+ document.getElementById('dishDescription').textContent = randomDish.description;
+
+ const tagsContainer = document.getElementById('dishTags');
+ tagsContainer.innerHTML = '';
+ randomDish.tags.forEach(tag => {
+ const tagEl = document.createElement('span');
+ tagEl.classList.add('tag');
+ tagEl.textContent = tag;
+ tagsContainer.appendChild(tagEl);
+ });
+
+ card.classList.remove('hidden');
+ }, 300);
+ });
style.css
Changed around line 1
+ :root {
+ --primary: #ff4757;
+ --secondary: #2f3542;
+ --light: #f1f2f6;
+ --text: #2f3542;
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: 'Segoe UI', system-ui, sans-serif;
+ color: var(--text);
+ background: var(--light);
+ line-height: 1.6;
+ }
+
+ header {
+ background: white;
+ padding: 1rem;
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+ }
+
+ h1 {
+ font-size: 2rem;
+ color: var(--secondary);
+ }
+
+ h1 span {
+ color: var(--primary);
+ }
+
+ .hero {
+ text-align: center;
+ padding: 4rem 1rem;
+ background: linear-gradient(135deg, #ff4757 0%, #ff6b81 100%);
+ color: white;
+ }
+
+ h2 {
+ font-size: 2.5rem;
+ margin-bottom: 2rem;
+ }
+
+ button {
+ padding: 1rem 2rem;
+ font-size: 1.2rem;
+ border: none;
+ border-radius: 50px;
+ background: white;
+ color: var(--primary);
+ cursor: pointer;
+ transition: transform 0.3s ease;
+ box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+ }
+
+ button:hover {
+ transform: translateY(-2px);
+ }
+
+ .dish-display {
+ padding: 2rem;
+ max-width: 800px;
+ margin: 0 auto;
+ }
+
+ .dish-card {
+ background: white;
+ border-radius: 15px;
+ padding: 2rem;
+ box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+ transition: opacity 0.3s ease;
+ }
+
+ .hidden {
+ opacity: 0;
+ }
+
+ .dish-image {
+ height: 300px;
+ background-size: cover;
+ background-position: center;
+ border-radius: 10px;
+ margin: 1rem 0;
+ }
+
+ .tags {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.5rem;
+ margin-top: 1rem;
+ }
+
+ .tag {
+ background: var(--light);
+ padding: 0.5rem 1rem;
+ border-radius: 20px;
+ font-size: 0.9rem;
+ }
+
+ footer {
+ text-align: center;
+ padding: 2rem;
+ background: white;
+ margin-top: 2rem;
+ }
+
+ @media (max-width: 768px) {
+ h2 {
+ font-size: 2rem;
+ }
+
+ .dish-image {
+ height: 200px;
+ }
+ }