commit 3e60f813cdc387295af6a471982da7491a9fa487
Author: root <root@hub.scroll.pub>
Date: 2024-12-27 19:02:33 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..61871c7
--- /dev/null
+++ b/body.html
@@ -0,0 +1,32 @@
+<header>
+ <h1>YumRoulette</h1>
+ <p class="tagline">Spin the wheel of flavors!</p>
+</header>
+
+<main>
+ <div class="container">
+ <div class="food-display" aria-live="polite">
+ <div class="plate" id="plate">
+ <span class="initial-text">What's for dinner?</span>
+ <span class="result" id="result"></span>
+ </div>
+ </div>
+
+ <button class="spin-button" id="generateBtn" aria-label="Generate food suggestion">
+ <span class="button-text">Surprise Me!</span>
+ <span class="button-icon">🎲</span>
+ </button>
+
+ <div class="mode-toggle">
+ <label class="toggle">
+ <input type="checkbox" id="modeToggle">
+ <span class="slider"></span>
+ <span class="toggle-label">Weird Mode</span>
+ </label>
+ </div>
+ </div>
+</main>
+
+<footer>
+ <p>Made with 🍽️ by YumRoulette</p>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..5e6dc89
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,12 @@
+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
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..e153b9d
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "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<header>\n <h1>YumRoulette</h1>\n <p class=\"tagline\">Spin the wheel of flavors!</p>\n</header>\n\n<main>\n <div class=\"container\">\n <div class=\"food-display\" aria-live=\"polite\">\n <div class=\"plate\" id=\"plate\">\n <span class=\"initial-text\">What's for dinner?</span>\n <span class=\"result\" id=\"result\"></span>\n </div>\n </div>\n \n <button class=\"spin-button\" id=\"generateBtn\" aria-label=\"Generate food suggestion\">\n <span class=\"button-text\">Surprise Me!</span>\n <span class=\"button-icon\">🎲</span>\n </button>\n\n <div class=\"mode-toggle\">\n <label class=\"toggle\">\n <input type=\"checkbox\" id=\"modeToggle\">\n <span class=\"slider\"></span>\n <span class=\"toggle-label\">Weird Mode</span>\n </label>\n </div>\n </div>\n</main>\n\n<footer>\n <p>Made with 🍽️ by YumRoulette</p>\n</footer>\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."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 318,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2557
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..23477a9
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# 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!
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..ee0a416
--- /dev/null
+++ b/script.js
@@ -0,0 +1,74 @@
+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();
+ }
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..00a8a3d
--- /dev/null
+++ b/style.css
@@ -0,0 +1,187 @@
+: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;
+ }
+}