Discover what's really in your food. Find restaurants near you and see their cooking oil choices.
-
-
-
Know Your Oils
-
Discover what's really in your food with FryFinder
-
-
+
+
+
-
+
+
+
+
+
-
-
-
-
Filter by Oil Type
-
-
-
-
-
-
-
-
+
-
-
Oil Guide
-
-
-
Olive Oil
-
Heart-healthy option with rich flavor profile
-
-
-
-
Avocado Oil
-
High smoke point, perfect for high-heat cooking
-
-
-
-
Vegetable Oil
-
Common all-purpose cooking oil
-
-
-
-
Peanut Oil
-
Popular in Asian cuisine, allergen alert
-
-
-
+
+
About FryFinder
+
FryFinder helps you make informed dining choices by revealing the cooking oils used in restaurants near you. Whether you're avoiding certain oils for health reasons, following specific dietary guidelines, or just curious, FryFinder gives you transparency about cooking methods.
- "text": "I'll help create this website. For the domain, I suggest:\n\n---domain---\nfryfinder.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://fryfinder.scroll.pub\nmetaTags\neditButton /edit.html\ntitle FryFinder - Know Your Cooking Oils\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n\n \n\n\n\n \n
\n
Know Your Oils
\n
Discover what's really in your food with FryFinder
\n \n
\n \n\n \n
Restaurants Near You
\n
\n \n
\n
Filter by Oil Type
\n
\n \n \n \n \n
\n
\n
\n \n\n \n
Oil Guide
\n
\n \n
Olive Oil
\n
Heart-healthy option with rich flavor profile
\n \n \n \n
Avocado Oil
\n
High smoke point, perfect for high-heat cooking
\n \n \n \n
Vegetable Oil
\n
Common all-purpose cooking oil
\n \n \n \n
Peanut Oil
\n
Popular in Asian cuisine, allergen alert
\n \n \n
\n \n\n\n\n\n---style.css---\n:root {\n --primary-color: #2c3e50;\n --accent-color: #e67e22;\n --text-color: #333;\n --light-bg: #f9f9f9;\n --transition: all 0.3s ease;\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 line-height: 1.6;\n color: var(--text-color);\n}\n\n/* Header & Navigation */\nheader {\n background: var(--primary-color);\n padding: 1rem;\n position: fixed;\n width: 100%;\n top: 0;\n z-index: 1000;\n}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.logo {\n color: white;\n font-size: 1.5rem;\n font-weight: bold;\n}\n\n.nav-links {\n display: flex;\n list-style: none;\n}\n\n.nav-links a {\n color: white;\n text-decoration: none;\n padding: 0.5rem 1rem;\n transition: var(--transition);\n}\n\n.nav-links a:hover {\n color: var(--accent-color);\n}\n\n/* Hero Section */\n.hero {\n height: 100vh;\n background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),\n url('data:image/svg+xml,');\n background-size: cover;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n color: white;\n}\n\n.hero-content h1 {\n font-size: 3.5rem;\n margin-bottom: 1rem;\n}\n\n.cta-button {\n background: var(--accent-color);\n color: white;\n border: none;\n padding: 1rem 2rem;\n font-size: 1.2rem;\n border-radius: 30px;\n cursor: pointer;\n transition: var(--transition);\n}\n\n.cta-button:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 15px rgba(0,0,0,0.2);\n}\n\n/* Map Section */\n.map-section {\n padding: 4rem 2rem;\n background: var(--light-bg);\n}\n\n.map-container {\n max-width: 1200px;\n margin: 0 auto;\n background: white;\n border-radius: 10px;\n box-shadow: 0 2px 20px rgba(0,0,0,0.1);\n overflow: hidden;\n}\n\n#map-display {\n height: 400px;\n background: #e5e5e5;\n}\n\n/* Oil Cards */\n.oils-guide {\n padding: 4rem 2rem;\n}\n\n.oil-cards {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.oil-card {\n background: white;\n padding: 2rem;\n border-radius: 10px;\n box-shadow: 0 2px 20px rgba(0,0,0,0.1);\n transition: var(--transition);\n}\n\n.oil-card:hover {\n transform: translateY(-5px);\n}\n\n.health-meter {\n height: 6px;\n background: #e5e5e5;\n border-radius: 3px;\n margin-top: 1rem;\n overflow: hidden;\n}\n\n.health-meter::before {\n content: '';\n display: block;\n height: 100%;\n background: var(--accent-color);\n width: var(--health-percentage);\n}\n\n/* Mobile Responsiveness */\n@media (max-width: 768px) {\n .nav-links {\n display: none;\n }\n \n .menu-toggle {\n display: block;\n background: none;\n border: none;\n cursor: pointer;\n }\n \n .menu-toggle span {\n display: block;\n width: 25px;\n height: 3px;\n background: white;\n margin: 5px 0;\n transition: var(--transition);\n }\n \n .hero-content h1 {\n font-size: 2.5rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\n // Mobile menu toggle\n const menuToggle = document.querySelector('.menu-toggle');\n const navLinks = document.querySelector('.nav-links');\n \n menuToggle?.addEventListener('click', () => {\n navLinks.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex';\n });\n\n // Health meter initialization\n const healthMeters = document.querySelectorAll('.health-meter');\n healthMeters.forEach(meter => {\n const health = meter.dataset.health;\n meter.style.setProperty('--health-percentage', `${health}%`);\n });\n\n // Smooth scroll for navigation links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function(e) {\n e.preventDefault();\n const target = document.querySelector(this.getAttribute('href'));\n if (target) {\n target.scrollIntoView({\n behavior: 'smooth'\n });\n }\n });\n });\n\n // Mock map initialization (placeholder)\n const mapDisplay = document.getElementById('map-display');\n if (mapDisplay) {\n // Add mock map markers\n const mockMarkers = [\n { lat: 40.7128, lng: -74.0060, name: \"Restaurant A\" },\n { lat: 40.7580, lng: -73.9855, name: \"Restaurant B\" }\n ];\n }\n\n // Filter functionality\n const filterCheckboxes = document.querySelectorAll('.filter-options input');\n filterCheckboxes.forEach(checkbox => {\n checkbox.addEventListener('change', function() {\n // Mock filter implementation\n console.log(`Filter ${this.value} is ${this.checked ? 'checked' : 'unchecked'}`);\n });\n });\n});\n\n---end---\n\nThis implementation creates a modern, responsive website for FryFinder with smooth animations, intuitive navigation, and a clean design. The site features a striking hero section, an interactive map area (though the actual map implementation would require a mapping service), and beautiful oil guide cards with health meters.\n\nThe CSS includes advanced features like:\n- CSS Variables for consistent theming\n- Smooth transitions and hover effects\n- CSS Grid for responsive layouts\n- Custom health meter animations\n- Modern box-shadow effects\n- Gradient overlays\n- Responsive design breakpoints\n\nThe JavaScript handles:\n- Mobile menu toggling\n- Smooth scroll behavior\n- Health meter initialization\n- Filter functionality (mock implementation)\n- Event listeners for interactive elements\n\nThe HTML is semantic and accessible, with proper ARIA labels and semantic elements throughout. The design is both professional and engaging, with careful attention to spacing, typography, and visual hierarchy."
+ "index": 0,
+ "message": {
+ "role": "assistant",
+ "content": "---domain---\nfryfinder.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://fryfinder.scroll.pub\nmetaTags\neditButton /edit.html\ntitle FryFinder: Know Your Oils\nstyle.css\nbody.html\nscript.js\n---body.html---\n\n
FryFinder
\n
Discover what's really in your food. Find restaurants near you and see their cooking oil choices.
\n\n\n\n \n \n \n \n\n \n \n \n\n \n
Restaurants Near You
\n \n \n\n \n
About FryFinder
\n
FryFinder helps you make informed dining choices by revealing the cooking oils used in restaurants near you. Whether you're avoiding certain oils for health reasons, following specific dietary guidelines, or just curious, FryFinder gives you transparency about cooking methods.
- Website generated by Claude from prompt: FryFinder: Know Your Oils Discover what's really in your food with FryFinder, the app that maps restaurants near you and reveals their cooking oil choices. Whether you're avoiding certain oils for health reasons, following specific dietary guidelines, or just curious about what's being used to prepare your meals, FryFinder gives you transparency about cooking methods. The app features: A map interface showing restaurants in your area Detailed oil profiles for each establishment, from olive and avocado to vegetable and peanut User-contributed data and verified restaurant information Filters to find places using specific types of oils Health and allergen alerts for oils you want to avoid Easy-to-read restaurant profiles showing cooking methods and oil rotation schedules Make informed dining choices and find restaurants that align with your dietary preferences, all in one simple tap.
+ Website generated by DeepSeek from prompt: FryFinder: Know Your Oils Discover what's really in your food with FryFinder, the app that maps restaurants near you and reveals their cooking oil choices. Whether you're avoiding certain oils for health reasons, following specific dietary guidelines, or just curious about what's being used to prepare your meals, FryFinder gives you transparency about cooking methods. The app features: A map interface showing restaurants in your area Detailed oil profiles for each establishment, from olive and avocado to vegetable and peanut User-contributed data and verified restaurant information Filters to find places using specific types of oils Health and allergen alerts for oils you want to avoid Easy-to-read restaurant profiles showing cooking methods and oil rotation schedules Make informed dining choices and find restaurants that align with your dietary preferences, all in one simple tap.
+ "text": "I'll help create this website. For the domain, I suggest:\n\n---domain---\nfryfinder.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://fryfinder.scroll.pub\nmetaTags\neditButton /edit.html\ntitle FryFinder - Know Your Cooking Oils\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n\n \n\n\n\n \n
\n
Know Your Oils
\n
Discover what's really in your food with FryFinder
\n \n
\n \n\n \n
Restaurants Near You
\n
\n \n
\n
Filter by Oil Type
\n
\n \n \n \n \n
\n
\n
\n \n\n \n
Oil Guide
\n
\n \n
Olive Oil
\n
Heart-healthy option with rich flavor profile
\n \n \n \n
Avocado Oil
\n
High smoke point, perfect for high-heat cooking
\n \n \n \n
Vegetable Oil
\n
Common all-purpose cooking oil
\n \n \n \n
Peanut Oil
\n
Popular in Asian cuisine, allergen alert
\n \n \n
\n \n\n\n\n\n---style.css---\n:root {\n --primary-color: #2c3e50;\n --accent-color: #e67e22;\n --text-color: #333;\n --light-bg: #f9f9f9;\n --transition: all 0.3s ease;\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 line-height: 1.6;\n color: var(--text-color);\n}\n\n/* Header & Navigation */\nheader {\n background: var(--primary-color);\n padding: 1rem;\n position: fixed;\n width: 100%;\n top: 0;\n z-index: 1000;\n}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.logo {\n color: white;\n font-size: 1.5rem;\n font-weight: bold;\n}\n\n.nav-links {\n display: flex;\n list-style: none;\n}\n\n.nav-links a {\n color: white;\n text-decoration: none;\n padding: 0.5rem 1rem;\n transition: var(--transition);\n}\n\n.nav-links a:hover {\n color: var(--accent-color);\n}\n\n/* Hero Section */\n.hero {\n height: 100vh;\n background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),\n url('data:image/svg+xml,');\n background-size: cover;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n color: white;\n}\n\n.hero-content h1 {\n font-size: 3.5rem;\n margin-bottom: 1rem;\n}\n\n.cta-button {\n background: var(--accent-color);\n color: white;\n border: none;\n padding: 1rem 2rem;\n font-size: 1.2rem;\n border-radius: 30px;\n cursor: pointer;\n transition: var(--transition);\n}\n\n.cta-button:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 15px rgba(0,0,0,0.2);\n}\n\n/* Map Section */\n.map-section {\n padding: 4rem 2rem;\n background: var(--light-bg);\n}\n\n.map-container {\n max-width: 1200px;\n margin: 0 auto;\n background: white;\n border-radius: 10px;\n box-shadow: 0 2px 20px rgba(0,0,0,0.1);\n overflow: hidden;\n}\n\n#map-display {\n height: 400px;\n background: #e5e5e5;\n}\n\n/* Oil Cards */\n.oils-guide {\n padding: 4rem 2rem;\n}\n\n.oil-cards {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.oil-card {\n background: white;\n padding: 2rem;\n border-radius: 10px;\n box-shadow: 0 2px 20px rgba(0,0,0,0.1);\n transition: var(--transition);\n}\n\n.oil-card:hover {\n transform: translateY(-5px);\n}\n\n.health-meter {\n height: 6px;\n background: #e5e5e5;\n border-radius: 3px;\n margin-top: 1rem;\n overflow: hidden;\n}\n\n.health-meter::before {\n content: '';\n display: block;\n height: 100%;\n background: var(--accent-color);\n width: var(--health-percentage);\n}\n\n/* Mobile Responsiveness */\n@media (max-width: 768px) {\n .nav-links {\n display: none;\n }\n \n .menu-toggle {\n display: block;\n background: none;\n border: none;\n cursor: pointer;\n }\n \n .menu-toggle span {\n display: block;\n width: 25px;\n height: 3px;\n background: white;\n margin: 5px 0;\n transition: var(--transition);\n }\n \n .hero-content h1 {\n font-size: 2.5rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\n // Mobile menu toggle\n const menuToggle = document.querySelector('.menu-toggle');\n const navLinks = document.querySelector('.nav-links');\n \n menuToggle?.addEventListener('click', () => {\n navLinks.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex';\n });\n\n // Health meter initialization\n const healthMeters = document.querySelectorAll('.health-meter');\n healthMeters.forEach(meter => {\n const health = meter.dataset.health;\n meter.style.setProperty('--health-percentage', `${health}%`);\n });\n\n // Smooth scroll for navigation links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function(e) {\n e.preventDefault();\n const target = document.querySelector(this.getAttribute('href'));\n if (target) {\n target.scrollIntoView({\n behavior: 'smooth'\n });\n }\n });\n });\n\n // Mock map initialization (placeholder)\n const mapDisplay = document.getElementById('map-display');\n if (mapDisplay) {\n // Add mock map markers\n const mockMarkers = [\n { lat: 40.7128, lng: -74.0060, name: \"Restaurant A\" },\n { lat: 40.7580, lng: -73.9855, name: \"Restaurant B\" }\n ];\n }\n\n // Filter functionality\n const filterCheckboxes = document.querySelectorAll('.filter-options input');\n filterCheckboxes.forEach(checkbox => {\n checkbox.addEventListener('change', function() {\n // Mock filter implementation\n console.log(`Filter ${this.value} is ${this.checked ? 'checked' : 'unchecked'}`);\n });\n });\n});\n\n---end---\n\nThis implementation creates a modern, responsive website for FryFinder with smooth animations, intuitive navigation, and a clean design. The site features a striking hero section, an interactive map area (though the actual map implementation would require a mapping service), and beautiful oil guide cards with health meters.\n\nThe CSS includes advanced features like:\n- CSS Variables for consistent theming\n- Smooth transitions and hover effects\n- CSS Grid for responsive layouts\n- Custom health meter animations\n- Modern box-shadow effects\n- Gradient overlays\n- Responsive design breakpoints\n\nThe JavaScript handles:\n- Mobile menu toggling\n- Smooth scroll behavior\n- Health meter initialization\n- Filter functionality (mock implementation)\n- Event listeners for interactive elements\n\nThe HTML is semantic and accessible, with proper ARIA labels and semantic elements throughout. The design is both professional and engaging, with careful attention to spacing, typography, and visual hierarchy."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 444,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2907
+ }
+ }
readme.scroll
Changed around line 1
+ # fryfinder.scroll.pub
+ Website generated by Claude from prompt: FryFinder: Know Your Oils Discover what's really in your food with FryFinder, the app that maps restaurants near you and reveals their cooking oil choices. Whether you're avoiding certain oils for health reasons, following specific dietary guidelines, or just curious about what's being used to prepare your meals, FryFinder gives you transparency about cooking methods. The app features: A map interface showing restaurants in your area Detailed oil profiles for each establishment, from olive and avocado to vegetable and peanut User-contributed data and verified restaurant information Filters to find places using specific types of oils Health and allergen alerts for oils you want to avoid Easy-to-read restaurant profiles showing cooking methods and oil rotation schedules Make informed dining choices and find restaurants that align with your dietary preferences, all in one simple tap.
