Changes to tastebites.scroll.pub

root
root
14 days ago
Initial commit
body.html
Changed around line 1
+
+
+
+
+
+
+
+
+
    +
  • Home
    • +
  • Menu
    • +
  • About
    • +
  • Contact
    • +
    +
    +
    +
    +
    +
    +
    +

    Experience Culinary Excellence

    +

    Discover a world of flavors crafted with passion and precision

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    🌟
    +

    Premium Quality

    +

    Fresh ingredients, expertly prepared

    +
    +
    +
    🚚
    +

    Fast Delivery

    +

    Hot meals at your doorstep

    +
    +
    +
    💝
    +

    Special Care

    +

    Made with love and attention

    +
    +
    +
    +
    +
    +
    +

    TasteBites - Crafting Memories Through Food

    +
    + Privacy Policy
    + Terms of Service
    + Contact Us
    +
    +
    +
    index.scroll
    Changed around line 1
    + buildHtml
    + baseUrl https://tastebites.scroll.pub
    + metaTags
    + editButton /edit.html
    + title TasteBites | Delicious Food Journey
    + style.css
    + body.html
    + script.js
    prompt.json
    Changed around line 1
    + {
    + "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
    \n \n
    \n\n
    \n
    \n
    \n

    Experience Culinary Excellence

    \n

    Discover a world of flavors crafted with passion and precision

    \n
    \n \n \n
    \n
    \n
    \n\n
    \n
    \n
    🌟
    \n

    Premium Quality

    \n

    Fresh ingredients, expertly prepared

    \n
    \n
    \n
    🚚
    \n

    Fast Delivery

    \n

    Hot meals at your doorstep

    \n
    \n
    \n
    💝
    \n

    Special Care

    \n

    Made with love and attention

    \n
    \n
    \n
    \n\n\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
    + }
    + }
    readme.scroll
    Changed around line 1
    + # tastebites.scroll.pub
    +
    + website generated by Claude from prompt: Food landing page with a few buttons
    script.js
    Changed around line 1
    + 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);
    + });
    + });
    style.css
    Changed around line 1
    + :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;
    + }
    + }