Last 10 Commits for asianplate.scroll.pub

commit d1ef39ae8025fa03645dfc0eecf711cb68a3e815 Author: root <root@hub.scroll.pub> Date: 2024-12-27 23:32:56 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..d00d720 --- /dev/null +++ b/body.html @@ -0,0 +1,25 @@ +<header> + <nav> + <h1>Asian<span>Plate</span></h1> + </nav> +</header> + +<main> + <section class="hero"> + <h2>Discover Your Next Asian Dinner</h2> + <button id="generateBtn">Get Random Dish</button> + </section> + + <section class="dish-display" id="dishDisplay"> + <div class="dish-card hidden" id="dishCard"> + <h3 id="dishName"></h3> + <div class="dish-image" id="dishImage"></div> + <p id="dishDescription"></p> + <div class="tags" id="dishTags"></div> + </div> + </section> +</main> + +<footer> + <p>Made with 🥢 for food lovers</p> +</footer> diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..5647946 --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://asianplate.scroll.pub +metaTags +editButton /edit.html +title AsianPlate - Random Asian Dinner Ideas +style.css +body.html +script.js diff --git a/prompt.json b/prompt.json new file mode 100644 index 0000000..04bf229 --- /dev/null +++ b/prompt.json @@ -0,0 +1,20 @@ +{ + "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<header>\n <nav>\n <h1>Asian<span>Plate</span></h1>\n </nav>\n</header>\n\n<main>\n <section class=\"hero\">\n <h2>Discover Your Next Asian Dinner</h2>\n <button id=\"generateBtn\">Get Random Dish</button>\n </section>\n\n <section class=\"dish-display\" id=\"dishDisplay\">\n <div class=\"dish-card hidden\" id=\"dishCard\">\n <h3 id=\"dishName\"></h3>\n <div class=\"dish-image\" id=\"dishImage\"></div>\n <p id=\"dishDescription\"></p>\n <div class=\"tags\" id=\"dishTags\"></div>\n </div>\n </section>\n</main>\n\n<footer>\n <p>Made with 🥢 for food lovers</p>\n</footer>\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 + } +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..f4e8ff6 --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# 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 \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..c855f4f --- /dev/null +++ b/script.js @@ -0,0 +1,39 @@ +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); +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..f9060e9 --- /dev/null +++ b/style.css @@ -0,0 +1,119 @@ +: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; + } +}