commit f6e0ab1479999387fbc01e06a8b474f4f57d5500
Author: root <root@hub.scroll.pub>
Date: 2025-01-08 04:32:01 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..8f245a9
--- /dev/null
+++ b/body.html
@@ -0,0 +1,58 @@
+<header class="nav-header">
+ <nav>
+ <div class="logo">TasteBites</div>
+ <div class="menu-toggle" aria-label="Toggle menu">
+ <span></span>
+ <span></span>
+ <span></span>
+ </div>
+ <ul class="nav-links">
+ <li><a href="#home">Home</a></li>
+ <li><a href="#menu">Menu</a></li>
+ <li><a href="#about">About</a></li>
+ <li><a href="#contact">Contact</a></li>
+ </ul>
+ </nav>
+</header>
+
+<main>
+ <section id="hero" class="hero">
+ <div class="hero-content">
+ <h1>Experience Culinary Excellence</h1>
+ <p>Discover a world of flavors crafted with passion and precision</p>
+ <div class="cta-buttons">
+ <button class="btn primary">View Menu</button>
+ <button class="btn secondary">Make Reservation</button>
+ </div>
+ </div>
+ </section>
+
+ <section id="features" class="features">
+ <div class="feature-card">
+ <div class="icon">🌟</div>
+ <h3>Premium Quality</h3>
+ <p>Fresh ingredients, expertly prepared</p>
+ </div>
+ <div class="feature-card">
+ <div class="icon">🚚</div>
+ <h3>Fast Delivery</h3>
+ <p>Hot meals at your doorstep</p>
+ </div>
+ <div class="feature-card">
+ <div class="icon">💝</div>
+ <h3>Special Care</h3>
+ <p>Made with love and attention</p>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <div class="footer-content">
+ <p>TasteBites - Crafting Memories Through Food</p>
+ <nav class="footer-nav">
+ <a href="#privacy">Privacy Policy</a>
+ <a href="#terms">Terms of Service</a>
+ <a href="#contact">Contact Us</a>
+ </nav>
+ </div>
+</footer>
\ No newline at end of file
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..df0cf76
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://tastebites.scroll.pub
+metaTags
+editButton /edit.html
+title TasteBites | Delicious Food Journey
+style.css
+body.html
+script.js
\ No newline at end of file
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..cf55769
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_0161eJwdSFPyViaBHHgMhF7Y",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create a delicious food landing page with an elegant design.\n\nSuggested domain: tastebites.scroll.pub\n\n---domain---\ntastebites.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://tastebites.scroll.pub\nmetaTags\neditButton /edit.html\ntitle TasteBites | Delicious Food Journey\nstyle.css\nbody.html\nscript.js\n---body.html---\n<header class=\"nav-header\">\n <nav>\n <div class=\"logo\">TasteBites</div>\n <div class=\"menu-toggle\" aria-label=\"Toggle menu\">\n <span></span>\n <span></span>\n <span></span>\n </div>\n <ul class=\"nav-links\">\n <li><a href=\"#home\">Home</a></li>\n <li><a href=\"#menu\">Menu</a></li>\n <li><a href=\"#about\">About</a></li>\n <li><a href=\"#contact\">Contact</a></li>\n </ul>\n </nav>\n</header>\n\n<main>\n <section id=\"hero\" class=\"hero\">\n <div class=\"hero-content\">\n <h1>Experience Culinary Excellence</h1>\n <p>Discover a world of flavors crafted with passion and precision</p>\n <div class=\"cta-buttons\">\n <button class=\"btn primary\">View Menu</button>\n <button class=\"btn secondary\">Make Reservation</button>\n </div>\n </div>\n </section>\n\n <section id=\"features\" class=\"features\">\n <div class=\"feature-card\">\n <div class=\"icon\">🌟</div>\n <h3>Premium Quality</h3>\n <p>Fresh ingredients, expertly prepared</p>\n </div>\n <div class=\"feature-card\">\n <div class=\"icon\">🚚</div>\n <h3>Fast Delivery</h3>\n <p>Hot meals at your doorstep</p>\n </div>\n <div class=\"feature-card\">\n <div class=\"icon\">💝</div>\n <h3>Special Care</h3>\n <p>Made with love and attention</p>\n </div>\n </section>\n</main>\n\n<footer>\n <div class=\"footer-content\">\n <p>TasteBites - Crafting Memories Through Food</p>\n <nav class=\"footer-nav\">\n <a href=\"#privacy\">Privacy Policy</a>\n <a href=\"#terms\">Terms of Service</a>\n <a href=\"#contact\">Contact Us</a>\n </nav>\n </div>\n</footer>\n---style.css---\n:root {\n --primary-color: #ff6b6b;\n --secondary-color: #4ecdc4;\n --text-color: #2d3436;\n --background-color: #ffffff;\n --accent-color: #ffd93d;\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.nav-header {\n position: fixed;\n width: 100%;\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(10px);\n z-index: 1000;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n}\n\nnav {\n max-width: 1200px;\n margin: 0 auto;\n padding: 1rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: bold;\n color: var(--primary-color);\n}\n\n.nav-links {\n display: flex;\n gap: 2rem;\n list-style: none;\n}\n\n.nav-links a {\n text-decoration: none;\n color: var(--text-color);\n transition: color 0.3s ease;\n}\n\n.nav-links a:hover {\n color: var(--primary-color);\n}\n\n.hero {\n min-height: 100vh;\n background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n padding: 2rem;\n}\n\n.hero-content {\n max-width: 800px;\n}\n\n.hero h1 {\n font-size: 3.5rem;\n margin-bottom: 1rem;\n color: white;\n text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);\n}\n\n.hero p {\n font-size: 1.2rem;\n color: white;\n margin-bottom: 2rem;\n}\n\n.cta-buttons {\n display: flex;\n gap: 1rem;\n justify-content: center;\n}\n\n.btn {\n padding: 1rem 2rem;\n border: none;\n border-radius: 50px;\n font-size: 1.1rem;\n cursor: pointer;\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.btn:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);\n}\n\n.btn.primary {\n background: var(--primary-color);\n color: white;\n}\n\n.btn.secondary {\n background: white;\n color: var(--primary-color);\n}\n\n.features {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n padding: 4rem 2rem;\n background: var(--background-color);\n}\n\n.feature-card {\n text-align: center;\n padding: 2rem;\n border-radius: 20px;\n background: white;\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);\n transition: transform 0.3s ease;\n}\n\n.feature-card:hover {\n transform: translateY(-10px);\n}\n\n.feature-card .icon {\n font-size: 3rem;\n margin-bottom: 1rem;\n}\n\n.menu-toggle {\n display: none;\n flex-direction: column;\n gap: 6px;\n cursor: pointer;\n}\n\n.menu-toggle span {\n width: 25px;\n height: 3px;\n background: var(--text-color);\n transition: 0.3s;\n}\n\nfooter {\n background: #f8f9fa;\n padding: 2rem;\n text-align: center;\n}\n\n.footer-nav {\n margin-top: 1rem;\n display: flex;\n gap: 1rem;\n justify-content: center;\n}\n\n.footer-nav a {\n color: var(--text-color);\n text-decoration: none;\n}\n\n@media (max-width: 768px) {\n .menu-toggle {\n display: flex;\n }\n\n .nav-links {\n display: none;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n background: white;\n flex-direction: column;\n padding: 1rem;\n text-align: center;\n }\n\n .nav-links.active {\n display: flex;\n }\n\n .hero h1 {\n font-size: 2.5rem;\n }\n\n .cta-buttons {\n flex-direction: column;\n }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\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.classList.toggle('active');\n menuToggle.classList.toggle('active');\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 // Close mobile menu if open\n navLinks.classList.remove('active');\n menuToggle.classList.remove('active');\n }\n });\n });\n\n // Intersection Observer for fade-in animations\n const observerOptions = {\n threshold: 0.1,\n rootMargin: '0px 0px -50px 0px'\n };\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.style.opacity = '1';\n entry.target.style.transform = 'translateY(0)';\n }\n });\n }, observerOptions);\n\n // Observe feature cards\n document.querySelectorAll('.feature-card').forEach(card => {\n card.style.opacity = '0';\n card.style.transform = 'translateY(20px)';\n card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';\n observer.observe(card);\n });\n});\n---end---\n\nThis creates a modern, responsive food landing page with smooth animations, a mobile-friendly design, and elegant styling. Key features include:\n\n1. Sticky navigation header with mobile menu\n2. Hero section with gradient background and CTA buttons\n3. Feature cards with hover effects\n4. Smooth scroll behavior\n5. Intersection Observer for scroll animations\n6. Mobile-responsive design\n7. Accessible semantic HTML\n8. Modern CSS with variables and fluid layouts\n9. Clean JavaScript with event handling\n10. Beautiful color scheme and typography\n\nThe design is minimal yet impactful, with attention to detail in animations and transitions. It follows modern web standards and best practices while maintaining excellent performance without any external dependencies."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 277,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2643
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..4cf6b4e
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,3 @@
+# tastebites.scroll.pub
+
+website generated by Claude from prompt: Food landing page with a few buttons
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..05c7589
--- /dev/null
+++ b/script.js
@@ -0,0 +1,49 @@
+document.addEventListener('DOMContentLoaded', () => {
+ // Mobile menu toggle
+ const menuToggle = document.querySelector('.menu-toggle');
+ const navLinks = document.querySelector('.nav-links');
+
+ menuToggle.addEventListener('click', () => {
+ navLinks.classList.toggle('active');
+ menuToggle.classList.toggle('active');
+ });
+
+ // 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'
+ });
+ // Close mobile menu if open
+ navLinks.classList.remove('active');
+ menuToggle.classList.remove('active');
+ }
+ });
+ });
+
+ // Intersection Observer for fade-in animations
+ const observerOptions = {
+ threshold: 0.1,
+ rootMargin: '0px 0px -50px 0px'
+ };
+
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.style.opacity = '1';
+ entry.target.style.transform = 'translateY(0)';
+ }
+ });
+ }, observerOptions);
+
+ // Observe feature cards
+ document.querySelectorAll('.feature-card').forEach(card => {
+ card.style.opacity = '0';
+ card.style.transform = 'translateY(20px)';
+ card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
+ observer.observe(card);
+ });
+});
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..596f91b
--- /dev/null
+++ b/style.css
@@ -0,0 +1,204 @@
+:root {
+ --primary-color: #ff6b6b;
+ --secondary-color: #4ecdc4;
+ --text-color: #2d3436;
+ --background-color: #ffffff;
+ --accent-color: #ffd93d;
+}
+
+* {
+ 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);
+}
+
+.nav-header {
+ position: fixed;
+ width: 100%;
+ background: rgba(255, 255, 255, 0.95);
+ backdrop-filter: blur(10px);
+ z-index: 1000;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+nav {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 1rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.logo {
+ font-size: 1.5rem;
+ font-weight: bold;
+ color: var(--primary-color);
+}
+
+.nav-links {
+ display: flex;
+ gap: 2rem;
+ list-style: none;
+}
+
+.nav-links a {
+ text-decoration: none;
+ color: var(--text-color);
+ transition: color 0.3s ease;
+}
+
+.nav-links a:hover {
+ color: var(--primary-color);
+}
+
+.hero {
+ min-height: 100vh;
+ background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ padding: 2rem;
+}
+
+.hero-content {
+ max-width: 800px;
+}
+
+.hero h1 {
+ font-size: 3.5rem;
+ margin-bottom: 1rem;
+ color: white;
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.hero p {
+ font-size: 1.2rem;
+ color: white;
+ margin-bottom: 2rem;
+}
+
+.cta-buttons {
+ display: flex;
+ gap: 1rem;
+ justify-content: center;
+}
+
+.btn {
+ padding: 1rem 2rem;
+ border: none;
+ border-radius: 50px;
+ font-size: 1.1rem;
+ cursor: pointer;
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.btn:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
+
+.btn.primary {
+ background: var(--primary-color);
+ color: white;
+}
+
+.btn.secondary {
+ background: white;
+ color: var(--primary-color);
+}
+
+.features {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ padding: 4rem 2rem;
+ background: var(--background-color);
+}
+
+.feature-card {
+ text-align: center;
+ padding: 2rem;
+ border-radius: 20px;
+ background: white;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+ transition: transform 0.3s ease;
+}
+
+.feature-card:hover {
+ transform: translateY(-10px);
+}
+
+.feature-card .icon {
+ font-size: 3rem;
+ margin-bottom: 1rem;
+}
+
+.menu-toggle {
+ display: none;
+ flex-direction: column;
+ gap: 6px;
+ cursor: pointer;
+}
+
+.menu-toggle span {
+ width: 25px;
+ height: 3px;
+ background: var(--text-color);
+ transition: 0.3s;
+}
+
+footer {
+ background: #f8f9fa;
+ padding: 2rem;
+ text-align: center;
+}
+
+.footer-nav {
+ margin-top: 1rem;
+ display: flex;
+ gap: 1rem;
+ justify-content: center;
+}
+
+.footer-nav a {
+ color: var(--text-color);
+ text-decoration: none;
+}
+
+@media (max-width: 768px) {
+ .menu-toggle {
+ display: flex;
+ }
+
+ .nav-links {
+ display: none;
+ position: absolute;
+ top: 100%;
+ left: 0;
+ right: 0;
+ background: white;
+ flex-direction: column;
+ padding: 1rem;
+ text-align: center;
+ }
+
+ .nav-links.active {
+ display: flex;
+ }
+
+ .hero h1 {
+ font-size: 2.5rem;
+ }
+
+ .cta-buttons {
+ flex-direction: column;
+ }
+}
\ No newline at end of file