Last 10 Commits for fryfinder.scroll.pub

commit 12c1ae40dc40aa272557e9f883ab1a1532182992 Author: root <root@hub.scroll.pub> Date: 2024-12-30 03:16:09 +0000 Subject: Initial commit diff --git a/.log.txt b/.log.txt new file mode 100644 index 0000000..dba44d5 --- /dev/null +++ b/.log.txt @@ -0,0 +1,3 @@ +read fryfinder.scroll.pub https://hub.scroll.pub/edit.html?folderName=fryfinder.scroll.pub 1735528552652 ::ffff:71.38.199.201 0.0 200 Chrome.131 MacOSX.10.15.7 +read fryfinder.scroll.pub https://hub.scroll.pub/ls.json?folderName=fryfinder.scroll.pub 1735528553530 ::ffff:71.38.199.201 0.0 200 Chrome.131 MacOSX.10.15.7 +read fryfinder.scroll.pub https://hub.scroll.pub/readFile.htm?folderName=fryfinder.scroll.pub&filePath=fryfinder.scroll.pub%2Findex.scroll 1735528553595 ::ffff:71.38.199.201 0.0 200 Chrome.131 MacOSX.10.15.7 diff --git a/.stats.json b/.stats.json new file mode 100644 index 0000000..c4e13e7 --- /dev/null +++ b/.stats.json @@ -0,0 +1,21 @@ +{ + "files": [ + "body.html", + "index.scroll", + "prompt.json", + "readme.scroll", + "script.js", + "style.css" + ], + "hasSslCert": false, + "stats": { + "folder": "fryfinder.scroll.pub", + "folderLink": "http://fryfinder.scroll.pub", + "created": "2024-12-30T03:15:51.000Z", + "revised": "2024-12-30T03:15:51.000Z", + "files": 6, + "mb": 1, + "revisions": 1, + "hash": "b7dd736486" + } +} \ No newline at end of file diff --git a/body.html b/body.html index 5849a60..eda4ce9 100644 --- a/body.html +++ b/body.html @@ -1,82 +1,29 @@ -<header> - <nav> - <div class="logo">FryFinder</div> - <button class="menu-toggle" aria-label="Toggle menu"> - <span></span><span></span><span></span> - </button> - <ul class="nav-links"> - <li><a href="#map">Map</a></li> - <li><a href="#oils">Oil Guide</a></li> - <li><a href="#about">About</a></li> - </ul> - </nav> +<header class="header"> + <h1>FryFinder</h1> + <p>Discover what's really in your food. Find restaurants near you and see their cooking oil choices.</p> </header> <main> - <section class="hero"> - <div class="hero-content"> - <h1>Know Your Oils</h1> - <p>Discover what's really in your food with FryFinder</p> - <button class="cta-button">Find Restaurants</button> - </div> + <section class="search"> + <input type="text" id="locationInput" placeholder="Enter your location" aria-label="Enter your location"> + <button id="searchButton">Search</button> </section> - <section id="map" class="map-section"> + <section class="map"> + <div id="mapContainer" aria-label="Map showing restaurants in your area"></div> + </section> + + <section class="restaurant-list"> <h2>Restaurants Near You</h2> - <div class="map-container"> - <div id="map-display"></div> - <div class="filters"> - <h3>Filter by Oil Type</h3> - <div class="filter-options"> - <label><input type="checkbox" value="olive"> Olive Oil</label> - <label><input type="checkbox" value="avocado"> Avocado Oil</label> - <label><input type="checkbox" value="vegetable"> Vegetable Oil</label> - <label><input type="checkbox" value="peanut"> Peanut Oil</label> - </div> - </div> - </div> + <div id="restaurantList"></div> </section> - <section id="oils" class="oils-guide"> - <h2>Oil Guide</h2> - <div class="oil-cards"> - <article class="oil-card"> - <h3>Olive Oil</h3> - <p>Heart-healthy option with rich flavor profile</p> - <div class="health-meter" data-health="90"></div> - </article> - <article class="oil-card"> - <h3>Avocado Oil</h3> - <p>High smoke point, perfect for high-heat cooking</p> - <div class="health-meter" data-health="95"></div> - </article> - <article class="oil-card"> - <h3>Vegetable Oil</h3> - <p>Common all-purpose cooking oil</p> - <div class="health-meter" data-health="70"></div> - </article> - <article class="oil-card"> - <h3>Peanut Oil</h3> - <p>Popular in Asian cuisine, allergen alert</p> - <div class="health-meter" data-health="80"></div> - </article> - </div> + <section class="about"> + <h2>About FryFinder</h2> + <p>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.</p> </section> </main> -<footer> - <div class="footer-content"> - <div class="footer-section"> - <h4>FryFinder</h4> - <p>Make informed dining choices</p> - </div> - <div class="footer-section"> - <h4>Quick Links</h4> - <ul> - <li><a href="#map">Restaurant Map</a></li> - <li><a href="#oils">Oil Guide</a></li> - <li><a href="#about">About Us</a></li> - </ul> - </div> - </div> -</footer> +<footer class="footer"> + <p>FryFinder - Know Your Oils</p> +</footer> \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..fa34034 --- /dev/null +++ b/index.html @@ -0,0 +1,108 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>FryFinder - Know Your Cooking Oils</title> + <script>/* This HTML was generated by 📜 Scroll v164.11.0. https://scroll.pub */</script> + <style>@media print {.doNotPrint {display: none !important;}}</style> + <link rel="canonical" href="https://fryfinder.scroll.pub/index.html"> + <meta name="viewport" content="width=device-width,initial-scale=1"> + <meta name="description" content=""> + <meta name="generator" content="Scroll v164.11.0"> + <meta property="og:title" content="FryFinder - Know Your Cooking Oils"> + <meta property="og:description" content=""> + <meta property="og:image" content=""> + + <link rel="source" type="application/git" title="Source Code Repository" href="index.scroll"> + + <meta name="twitter:card" content="summary_large_image"> +</head> +<body> +<style>.abstractIconButtonParser {position:absolute;top:0.25rem; }.abstractIconButtonParser svg {fill: rgba(204,204,204,.8);width:1.875rem;height:1.875rem; padding: 0 7px;} .abstractIconButtonParser:hover svg{fill: #333;}</style><a href="/edit.html" class="doNotPrint abstractIconButtonParser" style="right:2rem;"><svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M21.1213 2.70705C19.9497 1.53548 18.0503 1.53547 16.8787 2.70705L15.1989 4.38685L7.29289 12.2928C7.16473 12.421 7.07382 12.5816 7.02986 12.7574L6.02986 16.7574C5.94466 17.0982 6.04451 17.4587 6.29289 17.707C6.54127 17.9554 6.90176 18.0553 7.24254 17.9701L11.2425 16.9701C11.4184 16.9261 11.5789 16.8352 11.7071 16.707L19.5556 8.85857L21.2929 7.12126C22.4645 5.94969 22.4645 4.05019 21.2929 2.87862L21.1213 2.70705ZM18.2929 4.12126C18.6834 3.73074 19.3166 3.73074 19.7071 4.12126L19.8787 4.29283C20.2692 4.68336 20.2692 5.31653 19.8787 5.70705L18.8622 6.72357L17.3068 5.10738L18.2929 4.12126ZM15.8923 6.52185L17.4477 8.13804L10.4888 15.097L8.37437 15.6256L8.90296 13.5112L15.8923 6.52185ZM4 7.99994C4 7.44766 4.44772 6.99994 5 6.99994H10C10.5523 6.99994 11 6.55223 11 5.99994C11 5.44766 10.5523 4.99994 10 4.99994H5C3.34315 4.99994 2 6.34309 2 7.99994V18.9999C2 20.6568 3.34315 21.9999 5 21.9999H16C17.6569 21.9999 19 20.6568 19 18.9999V13.9999C19 13.4477 18.5523 12.9999 18 12.9999C17.4477 12.9999 17 13.4477 17 13.9999V18.9999C17 19.5522 16.5523 19.9999 16 19.9999H5C4.44772 19.9999 4 19.5522 4 18.9999V7.99994Z"/></svg></a> +<link rel="stylesheet" type="text/css" href="style.css"> +<header> + <nav> + <div class="logo">FryFinder</div> + <button class="menu-toggle" aria-label="Toggle menu"> + <span></span><span></span><span></span> + </button> + <ul class="nav-links"> + <li><a href="#map">Map</a></li> + <li><a href="#oils">Oil Guide</a></li> + <li><a href="#about">About</a></li> + </ul> + </nav> +</header> + +<main> + <section class="hero"> + <div class="hero-content"> + <h1>Know Your Oils</h1> + <p>Discover what's really in your food with FryFinder</p> + <button class="cta-button">Find Restaurants</button> + </div> + </section> + + <section id="map" class="map-section"> + <h2>Restaurants Near You</h2> + <div class="map-container"> + <div id="map-display"></div> + <div class="filters"> + <h3>Filter by Oil Type</h3> + <div class="filter-options"> + <label><input type="checkbox" value="olive"> Olive Oil</label> + <label><input type="checkbox" value="avocado"> Avocado Oil</label> + <label><input type="checkbox" value="vegetable"> Vegetable Oil</label> + <label><input type="checkbox" value="peanut"> Peanut Oil</label> + </div> + </div> + </div> + </section> + + <section id="oils" class="oils-guide"> + <h2>Oil Guide</h2> + <div class="oil-cards"> + <article class="oil-card"> + <h3>Olive Oil</h3> + <p>Heart-healthy option with rich flavor profile</p> + <div class="health-meter" data-health="90"></div> + </article> + <article class="oil-card"> + <h3>Avocado Oil</h3> + <p>High smoke point, perfect for high-heat cooking</p> + <div class="health-meter" data-health="95"></div> + </article> + <article class="oil-card"> + <h3>Vegetable Oil</h3> + <p>Common all-purpose cooking oil</p> + <div class="health-meter" data-health="70"></div> + </article> + <article class="oil-card"> + <h3>Peanut Oil</h3> + <p>Popular in Asian cuisine, allergen alert</p> + <div class="health-meter" data-health="80"></div> + </article> + </div> + </section> +</main> + +<footer> + <div class="footer-content"> + <div class="footer-section"> + <h4>FryFinder</h4> + <p>Make informed dining choices</p> + </div> + <div class="footer-section"> + <h4>Quick Links</h4> + <ul> + <li><a href="#map">Restaurant Map</a></li> + <li><a href="#oils">Oil Guide</a></li> + <li><a href="#about">About Us</a></li> + </ul> + </div> + </div> +</footer> + +<script src="script.js"></script> +</body> +</html> \ No newline at end of file diff --git a/index.scroll b/index.scroll index 9b8fcce..ca85563 100644 --- a/index.scroll +++ b/index.scroll @@ -2,7 +2,7 @@ buildHtml baseUrl https://fryfinder.scroll.pub metaTags editButton /edit.html -title FryFinder - Know Your Cooking Oils +title FryFinder: Know Your Oils style.css body.html -script.js +script.js \ No newline at end of file diff --git a/prompt.json b/prompt.json index 32fb1d9..4d45f38 100644 --- a/prompt.json +++ b/prompt.json @@ -1,20 +1,25 @@ { - "id": "msg_01NeaoUX7VHL7kwcpxEnJuSb", - "type": "message", - "role": "assistant", - "model": "claude-3-5-sonnet-20241022", - "content": [ + "id": "a4d1ac9d-d3fb-4048-929e-a96b20ed159e", + "object": "chat.completion", + "created": 1735528545, + "model": "deepseek-chat", + "choices": [ { - "type": "text", - "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<header>\n <nav>\n <div class=\"logo\">FryFinder</div>\n <button class=\"menu-toggle\" aria-label=\"Toggle menu\">\n <span></span><span></span><span></span>\n </button>\n <ul class=\"nav-links\">\n <li><a href=\"#map\">Map</a></li>\n <li><a href=\"#oils\">Oil Guide</a></li>\n <li><a href=\"#about\">About</a></li>\n </ul>\n </nav>\n</header>\n\n<main>\n <section class=\"hero\">\n <div class=\"hero-content\">\n <h1>Know Your Oils</h1>\n <p>Discover what's really in your food with FryFinder</p>\n <button class=\"cta-button\">Find Restaurants</button>\n </div>\n </section>\n\n <section id=\"map\" class=\"map-section\">\n <h2>Restaurants Near You</h2>\n <div class=\"map-container\">\n <div id=\"map-display\"></div>\n <div class=\"filters\">\n <h3>Filter by Oil Type</h3>\n <div class=\"filter-options\">\n <label><input type=\"checkbox\" value=\"olive\"> Olive Oil</label>\n <label><input type=\"checkbox\" value=\"avocado\"> Avocado Oil</label>\n <label><input type=\"checkbox\" value=\"vegetable\"> Vegetable Oil</label>\n <label><input type=\"checkbox\" value=\"peanut\"> Peanut Oil</label>\n </div>\n </div>\n </div>\n </section>\n\n <section id=\"oils\" class=\"oils-guide\">\n <h2>Oil Guide</h2>\n <div class=\"oil-cards\">\n <article class=\"oil-card\">\n <h3>Olive Oil</h3>\n <p>Heart-healthy option with rich flavor profile</p>\n <div class=\"health-meter\" data-health=\"90\"></div>\n </article>\n <article class=\"oil-card\">\n <h3>Avocado Oil</h3>\n <p>High smoke point, perfect for high-heat cooking</p>\n <div class=\"health-meter\" data-health=\"95\"></div>\n </article>\n <article class=\"oil-card\">\n <h3>Vegetable Oil</h3>\n <p>Common all-purpose cooking oil</p>\n <div class=\"health-meter\" data-health=\"70\"></div>\n </article>\n <article class=\"oil-card\">\n <h3>Peanut Oil</h3>\n <p>Popular in Asian cuisine, allergen alert</p>\n <div class=\"health-meter\" data-health=\"80\"></div>\n </article>\n </div>\n </section>\n</main>\n\n<footer>\n <div class=\"footer-content\">\n <div class=\"footer-section\">\n <h4>FryFinder</h4>\n <p>Make informed dining choices</p>\n </div>\n <div class=\"footer-section\">\n <h4>Quick Links</h4>\n <ul>\n <li><a href=\"#map\">Restaurant Map</a></li>\n <li><a href=\"#oils\">Oil Guide</a></li>\n <li><a href=\"#about\">About Us</a></li>\n </ul>\n </div>\n </div>\n</footer>\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,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><rect width=\"100\" height=\"100\" fill=\"%232c3e50\"/></svg>');\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<header class=\"header\">\n <h1>FryFinder</h1>\n <p>Discover what's really in your food. Find restaurants near you and see their cooking oil choices.</p>\n</header>\n\n<main>\n <section class=\"search\">\n <input type=\"text\" id=\"locationInput\" placeholder=\"Enter your location\" aria-label=\"Enter your location\">\n <button id=\"searchButton\">Search</button>\n </section>\n\n <section class=\"map\">\n <div id=\"mapContainer\" aria-label=\"Map showing restaurants in your area\"></div>\n </section>\n\n <section class=\"restaurant-list\">\n <h2>Restaurants Near You</h2>\n <div id=\"restaurantList\"></div>\n </section>\n\n <section class=\"about\">\n <h2>About FryFinder</h2>\n <p>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.</p>\n </section>\n</main>\n\n<footer class=\"footer\">\n <p>FryFinder - Know Your Oils</p>\n</footer>\n---style.css---\n:root {\n --primary-color: #ff6f61;\n --secondary-color: #4a4a4a;\n --background-color: #f9f9f9;\n --text-color: #333;\n --font-family: 'Arial', sans-serif;\n}\n\nbody {\n font-family: var(--font-family);\n color: var(--text-color);\n background-color: var(--background-color);\n margin: 0;\n padding: 0;\n line-height: 1.6;\n}\n\n.header {\n background-color: var(--primary-color);\n color: white;\n padding: 2rem;\n text-align: center;\n}\n\n.header h1 {\n margin: 0;\n font-size: 2.5rem;\n}\n\n.header p {\n margin: 0.5rem 0 0;\n font-size: 1.2rem;\n}\n\n.search {\n padding: 1rem;\n text-align: center;\n}\n\n.search input {\n padding: 0.5rem;\n font-size: 1rem;\n border: 1px solid #ccc;\n border-radius: 4px;\n margin-right: 0.5rem;\n}\n\n.search button {\n padding: 0.5rem 1rem;\n font-size: 1rem;\n background-color: var(--primary-color);\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n}\n\n.search button:hover {\n background-color: #e65a50;\n}\n\n.map {\n height: 300px;\n background-color: #ddd;\n margin: 1rem;\n border-radius: 8px;\n overflow: hidden;\n}\n\n.restaurant-list {\n padding: 1rem;\n}\n\n.restaurant-list h2 {\n font-size: 1.8rem;\n margin-bottom: 1rem;\n}\n\n#restaurantList {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 1rem;\n}\n\n.restaurant-card {\n background-color: white;\n padding: 1rem;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.restaurant-card h3 {\n margin: 0;\n font-size: 1.2rem;\n}\n\n.restaurant-card p {\n margin: 0.5rem 0 0;\n font-size: 0.9rem;\n}\n\n.about {\n padding: 1rem;\n background-color: white;\n margin: 1rem;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.about h2 {\n font-size: 1.8rem;\n margin-bottom: 1rem;\n}\n\n.footer {\n background-color: var(--secondary-color);\n color: white;\n text-align: center;\n padding: 1rem;\n margin-top: 2rem;\n}\n\n@media (max-width: 768px) {\n .header h1 {\n font-size: 2rem;\n }\n\n .header p {\n font-size: 1rem;\n }\n\n .search input {\n width: 100%;\n margin-bottom: 0.5rem;\n }\n\n .search button {\n width: 100%;\n }\n}\n---script.js---\ndocument.getElementById('searchButton').addEventListener('click', function() {\n const location = document.getElementById('locationInput').value;\n if (location) {\n alert(`Searching for restaurants in ${location}...`);\n // Here you would typically make an API call to fetch restaurant data\n // For now, we'll simulate some data\n const restaurants = [\n { name: 'Healthy Bites', oil: 'Olive Oil' },\n { name: 'Veggie Delight', oil: 'Avocado Oil' },\n { name: 'Classic Diner', oil: 'Vegetable Oil' }\n ];\n displayRestaurants(restaurants);\n } else {\n alert('Please enter a location.');\n }\n});\n\nfunction displayRestaurants(restaurants) {\n const restaurantList = document.getElementById('restaurantList');\n restaurantList.innerHTML = '';\n restaurants.forEach(restaurant => {\n const card = document.createElement('div');\n card.className = 'restaurant-card';\n card.innerHTML = `\n <h3>${restaurant.name}</h3>\n <p>Uses: ${restaurant.oil}</p>\n `;\n restaurantList.appendChild(card);\n });\n}\n---end---" + }, + "logprobs": null, + "finish_reason": "stop" } ], - "stop_reason": "end_turn", - "stop_sequence": null, "usage": { - "input_tokens": 444, - "cache_creation_input_tokens": 0, - "cache_read_input_tokens": 0, - "output_tokens": 2907 - } + "prompt_tokens": 391, + "completion_tokens": 1339, + "total_tokens": 1730, + "prompt_cache_hit_tokens": 0, + "prompt_cache_miss_tokens": 391 + }, + "system_fingerprint": "fp_f1afce2943" } \ No newline at end of file diff --git a/readme.scroll b/readme.scroll index 998e51e..d2f85a9 100644 --- a/readme.scroll +++ b/readme.scroll @@ -1,2 +1,2 @@ # 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. \ No newline at end of file +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. \ No newline at end of file diff --git a/script.js b/script.js index 5e0f111..3f581c9 100644 --- a/script.js +++ b/script.js @@ -1,48 +1,30 @@ -document.addEventListener('DOMContentLoaded', function() { - // Mobile menu toggle - const menuToggle = document.querySelector('.menu-toggle'); - const navLinks = document.querySelector('.nav-links'); - - menuToggle?.addEventListener('click', () => { - navLinks.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex'; - }); - - // Health meter initialization - const healthMeters = document.querySelectorAll('.health-meter'); - healthMeters.forEach(meter => { - const health = meter.dataset.health; - meter.style.setProperty('--health-percentage', `${health}%`); - }); - - // Smooth scroll for navigation links - document.querySelectorAll('a[href^="#"]').forEach(anchor => { - anchor.addEventListener('click', function(e) { - e.preventDefault(); - const target = document.querySelector(this.getAttribute('href')); - if (target) { - target.scrollIntoView({ - behavior: 'smooth' - }); - } - }); - }); - - // Mock map initialization (placeholder) - const mapDisplay = document.getElementById('map-display'); - if (mapDisplay) { - // Add mock map markers - const mockMarkers = [ - { lat: 40.7128, lng: -74.0060, name: "Restaurant A" }, - { lat: 40.7580, lng: -73.9855, name: "Restaurant B" } +document.getElementById('searchButton').addEventListener('click', function() { + const location = document.getElementById('locationInput').value; + if (location) { + alert(`Searching for restaurants in ${location}...`); + // Here you would typically make an API call to fetch restaurant data + // For now, we'll simulate some data + const restaurants = [ + { name: 'Healthy Bites', oil: 'Olive Oil' }, + { name: 'Veggie Delight', oil: 'Avocado Oil' }, + { name: 'Classic Diner', oil: 'Vegetable Oil' } ]; + displayRestaurants(restaurants); + } else { + alert('Please enter a location.'); } +}); - // Filter functionality - const filterCheckboxes = document.querySelectorAll('.filter-options input'); - filterCheckboxes.forEach(checkbox => { - checkbox.addEventListener('change', function() { - // Mock filter implementation - console.log(`Filter ${this.value} is ${this.checked ? 'checked' : 'unchecked'}`); - }); +function displayRestaurants(restaurants) { + const restaurantList = document.getElementById('restaurantList'); + restaurantList.innerHTML = ''; + restaurants.forEach(restaurant => { + const card = document.createElement('div'); + card.className = 'restaurant-card'; + card.innerHTML = ` + <h3>${restaurant.name}</h3> + <p>Uses: ${restaurant.oil}</p> + `; + restaurantList.appendChild(card); }); -}); +} \ No newline at end of file diff --git a/style.css b/style.css index 85fa277..40988fb 100644 --- a/style.css +++ b/style.css @@ -1,181 +1,140 @@ :root { - --primary-color: #2c3e50; - --accent-color: #e67e22; + --primary-color: #ff6f61; + --secondary-color: #4a4a4a; + --background-color: #f9f9f9; --text-color: #333; - --light-bg: #f9f9f9; - --transition: all 0.3s ease; + --font-family: 'Arial', sans-serif; } -* { +body { + font-family: var(--font-family); + color: var(--text-color); + background-color: var(--background-color); margin: 0; padding: 0; - box-sizing: border-box; -} - -body { - font-family: 'Segoe UI', system-ui, sans-serif; line-height: 1.6; - color: var(--text-color); } -/* Header & Navigation */ -header { - background: var(--primary-color); - padding: 1rem; - position: fixed; - width: 100%; - top: 0; - z-index: 1000; -} - -nav { - display: flex; - justify-content: space-between; - align-items: center; - max-width: 1200px; - margin: 0 auto; -} - -.logo { +.header { + background-color: var(--primary-color); color: white; - font-size: 1.5rem; - font-weight: bold; -} - -.nav-links { - display: flex; - list-style: none; + padding: 2rem; + text-align: center; } -.nav-links a { - color: white; - text-decoration: none; - padding: 0.5rem 1rem; - transition: var(--transition); +.header h1 { + margin: 0; + font-size: 2.5rem; } -.nav-links a:hover { - color: var(--accent-color); +.header p { + margin: 0.5rem 0 0; + font-size: 1.2rem; } -/* Hero Section */ -.hero { - height: 100vh; - background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), - url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect width="100" height="100" fill="%232c3e50"/></svg>'); - background-size: cover; - display: flex; - align-items: center; - justify-content: center; +.search { + padding: 1rem; text-align: center; - color: white; } -.hero-content h1 { - font-size: 3.5rem; - margin-bottom: 1rem; +.search input { + padding: 0.5rem; + font-size: 1rem; + border: 1px solid #ccc; + border-radius: 4px; + margin-right: 0.5rem; } -.cta-button { - background: var(--accent-color); +.search button { + padding: 0.5rem 1rem; + font-size: 1rem; + background-color: var(--primary-color); color: white; border: none; - padding: 1rem 2rem; - font-size: 1.2rem; - border-radius: 30px; + border-radius: 4px; cursor: pointer; - transition: var(--transition); -} - -.cta-button:hover { - transform: translateY(-2px); - box-shadow: 0 4px 15px rgba(0,0,0,0.2); } -/* Map Section */ -.map-section { - padding: 4rem 2rem; - background: var(--light-bg); +.search button:hover { + background-color: #e65a50; } -.map-container { - max-width: 1200px; - margin: 0 auto; - background: white; - border-radius: 10px; - box-shadow: 0 2px 20px rgba(0,0,0,0.1); +.map { + height: 300px; + background-color: #ddd; + margin: 1rem; + border-radius: 8px; overflow: hidden; } -#map-display { - height: 400px; - background: #e5e5e5; +.restaurant-list { + padding: 1rem; } -/* Oil Cards */ -.oils-guide { - padding: 4rem 2rem; +.restaurant-list h2 { + font-size: 1.8rem; + margin-bottom: 1rem; } -.oil-cards { +#restaurantList { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - gap: 2rem; - max-width: 1200px; - margin: 0 auto; + gap: 1rem; } -.oil-card { - background: white; - padding: 2rem; - border-radius: 10px; - box-shadow: 0 2px 20px rgba(0,0,0,0.1); - transition: var(--transition); +.restaurant-card { + background-color: white; + padding: 1rem; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } -.oil-card:hover { - transform: translateY(-5px); +.restaurant-card h3 { + margin: 0; + font-size: 1.2rem; } -.health-meter { - height: 6px; - background: #e5e5e5; - border-radius: 3px; - margin-top: 1rem; - overflow: hidden; +.restaurant-card p { + margin: 0.5rem 0 0; + font-size: 0.9rem; } -.health-meter::before { - content: ''; - display: block; - height: 100%; - background: var(--accent-color); - width: var(--health-percentage); +.about { + padding: 1rem; + background-color: white; + margin: 1rem; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +.about h2 { + font-size: 1.8rem; + margin-bottom: 1rem; +} + +.footer { + background-color: var(--secondary-color); + color: white; + text-align: center; + padding: 1rem; + margin-top: 2rem; } -/* Mobile Responsiveness */ @media (max-width: 768px) { - .nav-links { - display: none; + .header h1 { + font-size: 2rem; } - - .menu-toggle { - display: block; - background: none; - border: none; - cursor: pointer; + + .header p { + font-size: 1rem; } - - .menu-toggle span { - display: block; - width: 25px; - height: 3px; - background: white; - margin: 5px 0; - transition: var(--transition); + + .search input { + width: 100%; + margin-bottom: 0.5rem; } - - .hero-content h1 { - font-size: 2.5rem; + + .search button { + width: 100%; } -} +} \ No newline at end of file

commit b7dd736486aefb65638233a710471193ee47d6bd Author: root <root@hub.scroll.pub> Date: 2024-12-30 03:15:51 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..5849a60 --- /dev/null +++ b/body.html @@ -0,0 +1,82 @@ +<header> + <nav> + <div class="logo">FryFinder</div> + <button class="menu-toggle" aria-label="Toggle menu"> + <span></span><span></span><span></span> + </button> + <ul class="nav-links"> + <li><a href="#map">Map</a></li> + <li><a href="#oils">Oil Guide</a></li> + <li><a href="#about">About</a></li> + </ul> + </nav> +</header> + +<main> + <section class="hero"> + <div class="hero-content"> + <h1>Know Your Oils</h1> + <p>Discover what's really in your food with FryFinder</p> + <button class="cta-button">Find Restaurants</button> + </div> + </section> + + <section id="map" class="map-section"> + <h2>Restaurants Near You</h2> + <div class="map-container"> + <div id="map-display"></div> + <div class="filters"> + <h3>Filter by Oil Type</h3> + <div class="filter-options"> + <label><input type="checkbox" value="olive"> Olive Oil</label> + <label><input type="checkbox" value="avocado"> Avocado Oil</label> + <label><input type="checkbox" value="vegetable"> Vegetable Oil</label> + <label><input type="checkbox" value="peanut"> Peanut Oil</label> + </div> + </div> + </div> + </section> + + <section id="oils" class="oils-guide"> + <h2>Oil Guide</h2> + <div class="oil-cards"> + <article class="oil-card"> + <h3>Olive Oil</h3> + <p>Heart-healthy option with rich flavor profile</p> + <div class="health-meter" data-health="90"></div> + </article> + <article class="oil-card"> + <h3>Avocado Oil</h3> + <p>High smoke point, perfect for high-heat cooking</p> + <div class="health-meter" data-health="95"></div> + </article> + <article class="oil-card"> + <h3>Vegetable Oil</h3> + <p>Common all-purpose cooking oil</p> + <div class="health-meter" data-health="70"></div> + </article> + <article class="oil-card"> + <h3>Peanut Oil</h3> + <p>Popular in Asian cuisine, allergen alert</p> + <div class="health-meter" data-health="80"></div> + </article> + </div> + </section> +</main> + +<footer> + <div class="footer-content"> + <div class="footer-section"> + <h4>FryFinder</h4> + <p>Make informed dining choices</p> + </div> + <div class="footer-section"> + <h4>Quick Links</h4> + <ul> + <li><a href="#map">Restaurant Map</a></li> + <li><a href="#oils">Oil Guide</a></li> + <li><a href="#about">About Us</a></li> + </ul> + </div> + </div> +</footer> diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..9b8fcce --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://fryfinder.scroll.pub +metaTags +editButton /edit.html +title FryFinder - Know Your Cooking Oils +style.css +body.html +script.js diff --git a/prompt.json b/prompt.json new file mode 100644 index 0000000..32fb1d9 --- /dev/null +++ b/prompt.json @@ -0,0 +1,20 @@ +{ + "id": "msg_01NeaoUX7VHL7kwcpxEnJuSb", + "type": "message", + "role": "assistant", + "model": "claude-3-5-sonnet-20241022", + "content": [ + { + "type": "text", + "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<header>\n <nav>\n <div class=\"logo\">FryFinder</div>\n <button class=\"menu-toggle\" aria-label=\"Toggle menu\">\n <span></span><span></span><span></span>\n </button>\n <ul class=\"nav-links\">\n <li><a href=\"#map\">Map</a></li>\n <li><a href=\"#oils\">Oil Guide</a></li>\n <li><a href=\"#about\">About</a></li>\n </ul>\n </nav>\n</header>\n\n<main>\n <section class=\"hero\">\n <div class=\"hero-content\">\n <h1>Know Your Oils</h1>\n <p>Discover what's really in your food with FryFinder</p>\n <button class=\"cta-button\">Find Restaurants</button>\n </div>\n </section>\n\n <section id=\"map\" class=\"map-section\">\n <h2>Restaurants Near You</h2>\n <div class=\"map-container\">\n <div id=\"map-display\"></div>\n <div class=\"filters\">\n <h3>Filter by Oil Type</h3>\n <div class=\"filter-options\">\n <label><input type=\"checkbox\" value=\"olive\"> Olive Oil</label>\n <label><input type=\"checkbox\" value=\"avocado\"> Avocado Oil</label>\n <label><input type=\"checkbox\" value=\"vegetable\"> Vegetable Oil</label>\n <label><input type=\"checkbox\" value=\"peanut\"> Peanut Oil</label>\n </div>\n </div>\n </div>\n </section>\n\n <section id=\"oils\" class=\"oils-guide\">\n <h2>Oil Guide</h2>\n <div class=\"oil-cards\">\n <article class=\"oil-card\">\n <h3>Olive Oil</h3>\n <p>Heart-healthy option with rich flavor profile</p>\n <div class=\"health-meter\" data-health=\"90\"></div>\n </article>\n <article class=\"oil-card\">\n <h3>Avocado Oil</h3>\n <p>High smoke point, perfect for high-heat cooking</p>\n <div class=\"health-meter\" data-health=\"95\"></div>\n </article>\n <article class=\"oil-card\">\n <h3>Vegetable Oil</h3>\n <p>Common all-purpose cooking oil</p>\n <div class=\"health-meter\" data-health=\"70\"></div>\n </article>\n <article class=\"oil-card\">\n <h3>Peanut Oil</h3>\n <p>Popular in Asian cuisine, allergen alert</p>\n <div class=\"health-meter\" data-health=\"80\"></div>\n </article>\n </div>\n </section>\n</main>\n\n<footer>\n <div class=\"footer-content\">\n <div class=\"footer-section\">\n <h4>FryFinder</h4>\n <p>Make informed dining choices</p>\n </div>\n <div class=\"footer-section\">\n <h4>Quick Links</h4>\n <ul>\n <li><a href=\"#map\">Restaurant Map</a></li>\n <li><a href=\"#oils\">Oil Guide</a></li>\n <li><a href=\"#about\">About Us</a></li>\n </ul>\n </div>\n </div>\n</footer>\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,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><rect width=\"100\" height=\"100\" fill=\"%232c3e50\"/></svg>');\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 + } +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..998e51e --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# 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. \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..5e0f111 --- /dev/null +++ b/script.js @@ -0,0 +1,48 @@ +document.addEventListener('DOMContentLoaded', function() { + // Mobile menu toggle + const menuToggle = document.querySelector('.menu-toggle'); + const navLinks = document.querySelector('.nav-links'); + + menuToggle?.addEventListener('click', () => { + navLinks.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex'; + }); + + // Health meter initialization + const healthMeters = document.querySelectorAll('.health-meter'); + healthMeters.forEach(meter => { + const health = meter.dataset.health; + meter.style.setProperty('--health-percentage', `${health}%`); + }); + + // Smooth scroll for navigation links + document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function(e) { + e.preventDefault(); + const target = document.querySelector(this.getAttribute('href')); + if (target) { + target.scrollIntoView({ + behavior: 'smooth' + }); + } + }); + }); + + // Mock map initialization (placeholder) + const mapDisplay = document.getElementById('map-display'); + if (mapDisplay) { + // Add mock map markers + const mockMarkers = [ + { lat: 40.7128, lng: -74.0060, name: "Restaurant A" }, + { lat: 40.7580, lng: -73.9855, name: "Restaurant B" } + ]; + } + + // Filter functionality + const filterCheckboxes = document.querySelectorAll('.filter-options input'); + filterCheckboxes.forEach(checkbox => { + checkbox.addEventListener('change', function() { + // Mock filter implementation + console.log(`Filter ${this.value} is ${this.checked ? 'checked' : 'unchecked'}`); + }); + }); +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..85fa277 --- /dev/null +++ b/style.css @@ -0,0 +1,181 @@ +:root { + --primary-color: #2c3e50; + --accent-color: #e67e22; + --text-color: #333; + --light-bg: #f9f9f9; + --transition: all 0.3s ease; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Segoe UI', system-ui, sans-serif; + line-height: 1.6; + color: var(--text-color); +} + +/* Header & Navigation */ +header { + background: var(--primary-color); + padding: 1rem; + position: fixed; + width: 100%; + top: 0; + z-index: 1000; +} + +nav { + display: flex; + justify-content: space-between; + align-items: center; + max-width: 1200px; + margin: 0 auto; +} + +.logo { + color: white; + font-size: 1.5rem; + font-weight: bold; +} + +.nav-links { + display: flex; + list-style: none; +} + +.nav-links a { + color: white; + text-decoration: none; + padding: 0.5rem 1rem; + transition: var(--transition); +} + +.nav-links a:hover { + color: var(--accent-color); +} + +/* Hero Section */ +.hero { + height: 100vh; + background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), + url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect width="100" height="100" fill="%232c3e50"/></svg>'); + background-size: cover; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + color: white; +} + +.hero-content h1 { + font-size: 3.5rem; + margin-bottom: 1rem; +} + +.cta-button { + background: var(--accent-color); + color: white; + border: none; + padding: 1rem 2rem; + font-size: 1.2rem; + border-radius: 30px; + cursor: pointer; + transition: var(--transition); +} + +.cta-button:hover { + transform: translateY(-2px); + box-shadow: 0 4px 15px rgba(0,0,0,0.2); +} + +/* Map Section */ +.map-section { + padding: 4rem 2rem; + background: var(--light-bg); +} + +.map-container { + max-width: 1200px; + margin: 0 auto; + background: white; + border-radius: 10px; + box-shadow: 0 2px 20px rgba(0,0,0,0.1); + overflow: hidden; +} + +#map-display { + height: 400px; + background: #e5e5e5; +} + +/* Oil Cards */ +.oils-guide { + padding: 4rem 2rem; +} + +.oil-cards { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; + max-width: 1200px; + margin: 0 auto; +} + +.oil-card { + background: white; + padding: 2rem; + border-radius: 10px; + box-shadow: 0 2px 20px rgba(0,0,0,0.1); + transition: var(--transition); +} + +.oil-card:hover { + transform: translateY(-5px); +} + +.health-meter { + height: 6px; + background: #e5e5e5; + border-radius: 3px; + margin-top: 1rem; + overflow: hidden; +} + +.health-meter::before { + content: ''; + display: block; + height: 100%; + background: var(--accent-color); + width: var(--health-percentage); +} + +/* Mobile Responsiveness */ +@media (max-width: 768px) { + .nav-links { + display: none; + } + + .menu-toggle { + display: block; + background: none; + border: none; + cursor: pointer; + } + + .menu-toggle span { + display: block; + width: 25px; + height: 3px; + background: white; + margin: 5px 0; + transition: var(--transition); + } + + .hero-content h1 { + font-size: 2.5rem; + } +}