\n
\n\n
\n \n \n\n \n What's for dinner?\n \n
\n \n \n
\n 
body.html
Changed around line 1
+
+
YumRoulette
+
Spin the wheel of flavors!
+
+
+
+
+
+
+ What's for dinner?
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Weird Mode
+
+
+
+
+
+
+
Made with 🍽️ by YumRoulette
+
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://yumroulette.scroll.pub
+ metaTags
+ description "End your food indecision! Click for instant meal suggestions - from practical to playful. Your next craving is just one click away."
+ keywords "food generator, meal decisions, random food picker, food suggestions, what to eat"
+ author "YumRoulette"
+ viewport "width=device-width, initial-scale=1"
+ editButton /edit.html
+ title YumRoulette - Your Random Food Adventure
+ style.css
+ body.html
+ script.js
prompt.json
Changed around line 1
+ {
+ "id": "msg_01Pfj5Kx5FMA3F61Yv6dxUUg",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create a fun food decision generator website. For the domain, I suggest:\n\n---domain---\nyumroulette.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://yumroulette.scroll.pub\nmetaTags\n description \"End your food indecision! Click for instant meal suggestions - from practical to playful. Your next craving is just one click away.\"\n keywords \"food generator, meal decisions, random food picker, food suggestions, what to eat\"\n author \"YumRoulette\"\n viewport \"width=device-width, initial-scale=1\"\neditButton /edit.html\ntitle YumRoulette - Your Random Food Adventure\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n\n \n\n\n \n\n\n\n---style.css---\n:root {\n --primary-color: #ff6b6b;\n --secondary-color: #4ecdc4;\n --bg-color: #f7f7f7;\n --text-color: #2d3436;\n --plate-color: #ffffff;\n --shadow-color: rgba(0, 0, 0, 0.1);\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 background: var(--bg-color);\n color: var(--text-color);\n line-height: 1.6;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n}\n\nheader {\n text-align: center;\n padding: 2rem 1rem;\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n color: white;\n}\n\nh1 {\n font-size: 3rem;\n margin-bottom: 0.5rem;\n text-shadow: 2px 2px 4px var(--shadow-color);\n}\n\n.tagline {\n font-size: 1.2rem;\n opacity: 0.9;\n}\n\n.container {\n max-width: 600px;\n margin: 2rem auto;\n padding: 0 1rem;\n flex-grow: 1;\n}\n\n.food-display {\n margin: 2rem 0;\n}\n\n.plate {\n background: var(--plate-color);\n border-radius: 50%;\n width: 300px;\n height: 300px;\n margin: 0 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n padding: 2rem;\n box-shadow: 0 10px 30px var(--shadow-color);\n transition: transform 0.3s ease;\n cursor: pointer;\n}\n\n.plate:hover {\n transform: scale(1.02);\n}\n\n.result {\n font-size: 1.5rem;\n font-weight: bold;\n opacity: 0;\n transition: opacity 0.3s ease;\n}\n\n.result.show {\n opacity: 1;\n}\n\n.initial-text {\n font-size: 1.5rem;\n color: #666;\n}\n\n.spin-button {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n background: var(--primary-color);\n color: white;\n border: none;\n padding: 1rem 2rem;\n font-size: 1.2rem;\n border-radius: 50px;\n cursor: pointer;\n margin: 2rem auto;\n transition: transform 0.2s ease, background-color 0.3s ease;\n}\n\n.spin-button:hover {\n transform: scale(1.05);\n background: var(--secondary-color);\n}\n\n.button-icon {\n font-size: 1.4rem;\n}\n\n.mode-toggle {\n text-align: center;\n margin: 1rem 0;\n}\n\n.toggle {\n position: relative;\n display: inline-block;\n cursor: pointer;\n}\n\n.toggle input {\n display: none;\n}\n\n.slider {\n width: 60px;\n height: 30px;\n background: #ccc;\n border-radius: 30px;\n display: inline-block;\n position: relative;\n transition: 0.3s;\n}\n\n.slider:before {\n content: '';\n position: absolute;\n width: 26px;\n height: 26px;\n border-radius: 50%;\n background: white;\n top: 2px;\n left: 2px;\n transition: 0.3s;\n}\n\ninput:checked + .slider {\n background: var(--secondary-color);\n}\n\ninput:checked + .slider:before {\n transform: translateX(30px);\n}\n\n.toggle-label {\n margin-left: 0.5rem;\n vertical-align: super;\n}\n\nfooter {\n text-align: center;\n padding: 1rem;\n background: var(--text-color);\n color: white;\n margin-top: auto;\n}\n\n@media (max-width: 480px) {\n h1 {\n font-size: 2rem;\n }\n \n .plate {\n width: 250px;\n height: 250px;\n }\n \n .result {\n font-size: 1.2rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const generateBtn = document.getElementById('generateBtn');\n const result = document.getElementById('result');\n const plate = document.getElementById('plate');\n const modeToggle = document.getElementById('modeToggle');\n const initialText = document.querySelector('.initial-text');\n\n const normalFoods = [\n \"Pizza Margherita 🍕\",\n \"Chicken Stir-Fry 🥢\",\n \"Spaghetti Carbonara 🍝\",\n \"Grilled Salmon 🐟\",\n \"Caesar Salad 🥗\",\n \"Hamburger 🍔\",\n \"Vegetable Curry 🍛\",\n \"Tacos 🌮\",\n \"Sushi Roll 🍱\",\n \"Roast Chicken 🍗\"\n ];\n\n const weirdCombos = [\n \"Chocolate-covered Pickles 🥒🍫\",\n \"Ice Cream Spaghetti 🍝🍦\",\n \"Peanut Butter Pizza 🍕🥜\",\n \"Banana Burger 🍌🍔\",\n \"Cookie Sushi 🍪🍱\",\n \"Hot Dog Smoothie 🌭🥤\",\n \"Cereal Tacos 🌮🥣\",\n \"Donut Sandwich 🍩🥪\",\n \"Pizza Ice Pop 🍕🍡\",\n \"Candy Soup 🍬🥣\"\n ];\n\n const spinPlate = () => {\n plate.style.transform = 'rotate(360deg) scale(0.95)';\n setTimeout(() => {\n plate.style.transform = 'rotate(0deg) scale(1)';\n }, 500);\n };\n\n const generateFood = () => {\n initialText.style.display = 'none';\n result.classList.remove('show');\n \n const foods = modeToggle.checked ? weirdCombos : normalFoods;\n const randomFood = foods[Math.floor(Math.random() * foods.length)];\n \n spinPlate();\n \n setTimeout(() => {\n result.textContent = randomFood;\n result.classList.add('show');\n }, 250);\n };\n\n generateBtn.addEventListener('click', generateFood);\n plate.addEventListener('click', generateFood);\n\n // Add button press effect\n generateBtn.addEventListener('mousedown', () => {\n generateBtn.style.transform = 'scale(0.95)';\n });\n\n generateBtn.addEventListener('mouseup', () => {\n generateBtn.style.transform = 'scale(1)';\n });\n\n // Handle keyboard navigation\n generateBtn.addEventListener('keydown', (e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n generateFood();\n }\n });\n});\n\n---end---\n\nThis implementation features:\n- A spinning plate animation\n- Normal and \"Weird\" mode toggle\n- Responsive design\n- Accessible keyboard navigation\n- Smooth animations and transitions\n- Modern gradient header\n- Clean, semantic HTML\n- Proper ARIA attributes\n- Mobile-friendly interface\n- Interactive hover and click effects\n- Professional yet playful design\n\nThe site works completely client-side with no external dependencies, following all the specified requirements while maintaining a fun and engaging user experience."
YumRoulette
\nSpin the wheel of flavors!
\n+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 318,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2557
+ }
+ }
readme.scroll
Changed around line 1
+ # yumroulette.scroll.pub
+ Website generated by Claude from prompt: Feeling indecisive about what to eat? Click the button and let us decide for you! From real meals to hilariously weird combos, we’ll surprise you every time. Hungry or just curious? Find out now!
script.js
Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+ const generateBtn = document.getElementById('generateBtn');
+ const result = document.getElementById('result');
+ const plate = document.getElementById('plate');
+ const modeToggle = document.getElementById('modeToggle');
+ const initialText = document.querySelector('.initial-text');
+
+ const normalFoods = [
+ "Pizza Margherita 🍕",
+ "Chicken Stir-Fry 🥢",
+ "Spaghetti Carbonara 🍝",
+ "Grilled Salmon 🐟",
+ "Caesar Salad 🥗",
+ "Hamburger 🍔",
+ "Vegetable Curry 🍛",
+ "Tacos 🌮",
+ "Sushi Roll 🍱",
+ "Roast Chicken 🍗"
+ ];
+
+ const weirdCombos = [
+ "Chocolate-covered Pickles 🥒🍫",
+ "Ice Cream Spaghetti 🍝🍦",
+ "Peanut Butter Pizza 🍕🥜",
+ "Banana Burger 🍌🍔",
+ "Cookie Sushi 🍪🍱",
+ "Hot Dog Smoothie 🌭🥤",
+ "Cereal Tacos 🌮🥣",
+ "Donut Sandwich 🍩🥪",
+ "Pizza Ice Pop 🍕🍡",
+ "Candy Soup 🍬🥣"
+ ];
+
+ const spinPlate = () => {
+ plate.style.transform = 'rotate(360deg) scale(0.95)';
+ setTimeout(() => {
+ plate.style.transform = 'rotate(0deg) scale(1)';
+ }, 500);
+ };
+
+ const generateFood = () => {
+ initialText.style.display = 'none';
+ result.classList.remove('show');
+
+ const foods = modeToggle.checked ? weirdCombos : normalFoods;
+ const randomFood = foods[Math.floor(Math.random() * foods.length)];
+
+ spinPlate();
+
+ setTimeout(() => {
+ result.textContent = randomFood;
+ result.classList.add('show');
+ }, 250);
+ };
+
+ generateBtn.addEventListener('click', generateFood);
+ plate.addEventListener('click', generateFood);
+
+ // Add button press effect
+ generateBtn.addEventListener('mousedown', () => {
+ generateBtn.style.transform = 'scale(0.95)';
+ });
+
+ generateBtn.addEventListener('mouseup', () => {
+ generateBtn.style.transform = 'scale(1)';
+ });
+
+ // Handle keyboard navigation
+ generateBtn.addEventListener('keydown', (e) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ generateFood();
+ }
+ });
+ });
style.css
Changed around line 1
+ :root {
+ --primary-color: #ff6b6b;
+ --secondary-color: #4ecdc4;
+ --bg-color: #f7f7f7;
+ --text-color: #2d3436;
+ --plate-color: #ffffff;
+ --shadow-color: rgba(0, 0, 0, 0.1);
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: 'Segoe UI', system-ui, sans-serif;
+ background: var(--bg-color);
+ color: var(--text-color);
+ line-height: 1.6;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ }
+
+ header {
+ text-align: center;
+ padding: 2rem 1rem;
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+ color: white;
+ }
+
+ h1 {
+ font-size: 3rem;
+ margin-bottom: 0.5rem;
+ text-shadow: 2px 2px 4px var(--shadow-color);
+ }
+
+ .tagline {
+ font-size: 1.2rem;
+ opacity: 0.9;
+ }
+
+ .container {
+ max-width: 600px;
+ margin: 2rem auto;
+ padding: 0 1rem;
+ flex-grow: 1;
+ }
+
+ .food-display {
+ margin: 2rem 0;
+ }
+
+ .plate {
+ background: var(--plate-color);
+ border-radius: 50%;
+ width: 300px;
+ height: 300px;
+ margin: 0 auto;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ padding: 2rem;
+ box-shadow: 0 10px 30px var(--shadow-color);
+ transition: transform 0.3s ease;
+ cursor: pointer;
+ }
+
+ .plate:hover {
+ transform: scale(1.02);
+ }
+
+ .result {
+ font-size: 1.5rem;
+ font-weight: bold;
+ opacity: 0;
+ transition: opacity 0.3s ease;
+ }
+
+ .result.show {
+ opacity: 1;
+ }
+
+ .initial-text {
+ font-size: 1.5rem;
+ color: #666;
+ }
+
+ .spin-button {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.5rem;
+ background: var(--primary-color);
+ color: white;
+ border: none;
+ padding: 1rem 2rem;
+ font-size: 1.2rem;
+ border-radius: 50px;
+ cursor: pointer;
+ margin: 2rem auto;
+ transition: transform 0.2s ease, background-color 0.3s ease;
+ }
+
+ .spin-button:hover {
+ transform: scale(1.05);
+ background: var(--secondary-color);
+ }
+
+ .button-icon {
+ font-size: 1.4rem;
+ }
+
+ .mode-toggle {
+ text-align: center;
+ margin: 1rem 0;
+ }
+
+ .toggle {
+ position: relative;
+ display: inline-block;
+ cursor: pointer;
+ }
+
+ .toggle input {
+ display: none;
+ }
+
+ .slider {
+ width: 60px;
+ height: 30px;
+ background: #ccc;
+ border-radius: 30px;
+ display: inline-block;
+ position: relative;
+ transition: 0.3s;
+ }
+
+ .slider:before {
+ content: '';
+ position: absolute;
+ width: 26px;
+ height: 26px;
+ border-radius: 50%;
+ background: white;
+ top: 2px;
+ left: 2px;
+ transition: 0.3s;
+ }
+
+ input:checked + .slider {
+ background: var(--secondary-color);
+ }
+
+ input:checked + .slider:before {
+ transform: translateX(30px);
+ }
+
+ .toggle-label {
+ margin-left: 0.5rem;
+ vertical-align: super;
+ }
+
+ footer {
+ text-align: center;
+ padding: 1rem;
+ background: var(--text-color);
+ color: white;
+ margin-top: auto;
+ }
+
+ @media (max-width: 480px) {
+ h1 {
+ font-size: 2rem;
+ }
+
+ .plate {
+ width: 250px;
+ height: 250px;
+ }
+
+ .result {
+ font-size: 1.2rem;
+ }
+ }