commit 936bfb4d7d12ce266874a14251a75dd55f3edb95
Author: root <root@hub.scroll.pub>
Date: 2025-01-14 18:52:15 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..378e550
--- /dev/null
+++ b/body.html
@@ -0,0 +1,76 @@
+<header>
+ <nav class="main-nav">
+ <div class="logo">Mel's Diner</div>
+ <button class="mobile-menu" aria-label="Toggle menu">
+ <span></span><span></span><span></span>
+ </button>
+ <ul class="nav-links">
+ <li><a href="#home" class="active">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">
+ <h1>Welcome to Mel's Diner</h1>
+ <p>Serving comfort food with a smile since 1952</p>
+ <a href="#menu" class="cta-button">View Our Menu</a>
+ </section>
+
+ <section id="specialties" class="specialties">
+ <h2>Today's Specials</h2>
+ <div class="specials-grid">
+ <div class="special-item">
+ <h3>Classic Burger</h3>
+ <p>Hand-crafted patty with fresh toppings</p>
+ <span class="price">$12.99</span>
+ </div>
+ <div class="special-item">
+ <h3>Blue Plate Special</h3>
+ <p>Meatloaf with mashed potatoes</p>
+ <span class="price">$14.99</span>
+ </div>
+ <div class="special-item">
+ <h3>Apple Pie</h3>
+ <p>Made fresh daily</p>
+ <span class="price">$6.99</span>
+ </div>
+ </div>
+ </section>
+
+ <section id="hours" class="hours">
+ <h2>Hours</h2>
+ <div class="hours-grid">
+ <div>
+ <h3>Monday - Friday</h3>
+ <p>6:00 AM - 10:00 PM</p>
+ </div>
+ <div>
+ <h3>Saturday - Sunday</h3>
+ <p>7:00 AM - 11:00 PM</p>
+ </div>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <div class="footer-content">
+ <div class="location">
+ <h3>Find Us</h3>
+ <p>123 Main Street</p>
+ <p>Anytown, USA 12345</p>
+ <p>Phone: (555) 555-5555</p>
+ </div>
+ <div class="social">
+ <h3>Connect With Us</h3>
+ <div class="social-links">
+ <a href="#" aria-label="Facebook">FB</a>
+ <a href="#" aria-label="Instagram">IG</a>
+ <a href="#" aria-label="Twitter">TW</a>
+ </div>
+ </div>
+ </div>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..3f96d69
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://mels.scroll.pub
+metaTags
+editButton /edit.html
+title Mel's Diner - Homestyle Cooking Since 1952
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..7dd9f7a
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01Q9dowZ21dTr1TT97SiZtv1",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll help create a website for Mel's Diner. For the domain, I suggest:\n\n---domain---\nmels.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://mels.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Mel's Diner - Homestyle Cooking Since 1952\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav class=\"main-nav\">\n <div class=\"logo\">Mel's Diner</div>\n <button class=\"mobile-menu\" aria-label=\"Toggle menu\">\n <span></span><span></span><span></span>\n </button>\n <ul class=\"nav-links\">\n <li><a href=\"#home\" class=\"active\">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 <h1>Welcome to Mel's Diner</h1>\n <p>Serving comfort food with a smile since 1952</p>\n <a href=\"#menu\" class=\"cta-button\">View Our Menu</a>\n </section>\n\n <section id=\"specialties\" class=\"specialties\">\n <h2>Today's Specials</h2>\n <div class=\"specials-grid\">\n <div class=\"special-item\">\n <h3>Classic Burger</h3>\n <p>Hand-crafted patty with fresh toppings</p>\n <span class=\"price\">$12.99</span>\n </div>\n <div class=\"special-item\">\n <h3>Blue Plate Special</h3>\n <p>Meatloaf with mashed potatoes</p>\n <span class=\"price\">$14.99</span>\n </div>\n <div class=\"special-item\">\n <h3>Apple Pie</h3>\n <p>Made fresh daily</p>\n <span class=\"price\">$6.99</span>\n </div>\n </div>\n </section>\n\n <section id=\"hours\" class=\"hours\">\n <h2>Hours</h2>\n <div class=\"hours-grid\">\n <div>\n <h3>Monday - Friday</h3>\n <p>6:00 AM - 10:00 PM</p>\n </div>\n <div>\n <h3>Saturday - Sunday</h3>\n <p>7:00 AM - 11:00 PM</p>\n </div>\n </div>\n </section>\n</main>\n\n<footer>\n <div class=\"footer-content\">\n <div class=\"location\">\n <h3>Find Us</h3>\n <p>123 Main Street</p>\n <p>Anytown, USA 12345</p>\n <p>Phone: (555) 555-5555</p>\n </div>\n <div class=\"social\">\n <h3>Connect With Us</h3>\n <div class=\"social-links\">\n <a href=\"#\" aria-label=\"Facebook\">FB</a>\n <a href=\"#\" aria-label=\"Instagram\">IG</a>\n <a href=\"#\" aria-label=\"Twitter\">TW</a>\n </div>\n </div>\n </div>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #e63946;\n --secondary-color: #457b9d;\n --background-color: #f1faee;\n --text-color: #1d3557;\n --accent-color: #a8dadc;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Arial', sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n background-color: var(--background-color);\n}\n\n/* Header & Navigation */\n.main-nav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 5%;\n background-color: white;\n box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n position: fixed;\n width: 100%;\n z-index: 1000;\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 list-style: none;\n gap: 2rem;\n}\n\n.nav-links a {\n text-decoration: none;\n color: var(--text-color);\n font-weight: 500;\n transition: color 0.3s ease;\n}\n\n.nav-links a:hover {\n color: var(--primary-color);\n}\n\n.mobile-menu {\n display: none;\n}\n\n/* Hero Section */\n.hero {\n height: 100vh;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n text-align: center;\n padding: 2rem;\n background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),\n url('images/diner.jpg');\n background-size: cover;\n background-position: center;\n color: white;\n}\n\n.hero h1 {\n font-size: 3.5rem;\n margin-bottom: 1rem;\n animation: fadeIn 1s ease-in;\n}\n\n.cta-button {\n display: inline-block;\n padding: 1rem 2rem;\n background-color: var(--primary-color);\n color: white;\n text-decoration: none;\n border-radius: 5px;\n margin-top: 2rem;\n transition: transform 0.3s ease;\n}\n\n.cta-button:hover {\n transform: translateY(-3px);\n}\n\n/* Specialties Section */\n.specialties {\n padding: 5rem 2rem;\n}\n\n.specials-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n}\n\n.special-item {\n background: white;\n padding: 2rem;\n border-radius: 10px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n transition: transform 0.3s ease;\n}\n\n.special-item:hover {\n transform: translateY(-5px);\n}\n\n/* Hours Section */\n.hours {\n background-color: var(--accent-color);\n padding: 5rem 2rem;\n text-align: center;\n}\n\n.hours-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n}\n\n/* Footer */\nfooter {\n background-color: var(--text-color);\n color: white;\n padding: 3rem 2rem;\n}\n\n.footer-content {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 2rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.social-links {\n display: flex;\n gap: 1rem;\n margin-top: 1rem;\n}\n\n.social-links a {\n color: white;\n text-decoration: none;\n padding: 0.5rem;\n border: 1px solid white;\n border-radius: 50%;\n width: 35px;\n height: 35px;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background-color 0.3s ease;\n}\n\n.social-links a:hover {\n background-color: var(--primary-color);\n}\n\n/* Animations */\n@keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n/* Mobile Responsiveness */\n@media (max-width: 768px) {\n .mobile-menu {\n display: block;\n background: none;\n border: none;\n cursor: pointer;\n }\n\n .mobile-menu span {\n display: block;\n width: 25px;\n height: 3px;\n background-color: var(--text-color);\n margin: 5px 0;\n transition: 0.3s;\n }\n\n .nav-links {\n display: none;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n background-color: 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\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\n // Mobile menu toggle\n const mobileMenu = document.querySelector('.mobile-menu');\n const navLinks = document.querySelector('.nav-links');\n\n mobileMenu.addEventListener('click', function() {\n navLinks.classList.toggle('active');\n \n // Animate hamburger to X\n const spans = this.querySelectorAll('span');\n spans.forEach(span => span.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 block: 'start'\n });\n // Close mobile menu if open\n navLinks.classList.remove('active');\n }\n });\n });\n\n // Intersection Observer for scroll animations\n const observerOptions = {\n threshold: 0.1\n };\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n }\n });\n }, observerOptions);\n\n // Observe all sections\n document.querySelectorAll('section').forEach(section => {\n observer.observe(section);\n });\n});\n\n---end---\n\nThis website features a modern, responsive design with smooth animations, a mobile-friendly navigation menu, and beautiful visual effects. The color scheme is warm and inviting, perfect for a diner. The layout includes all essential information while maintaining a clean, professional appearance. The CSS includes advanced features like CSS Grid, Flexbox, custom properties, and smooth transitions. The JavaScript handles mobile menu functionality and smooth scrolling, with the addition of intersection observers for scroll animations."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 277,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2874
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..7772fc6
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,3 @@
+# mels.scroll.pub
+
+website generated by Claude from prompt: a website for mels diner
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..edade8a
--- /dev/null
+++ b/script.js
@@ -0,0 +1,47 @@
+document.addEventListener('DOMContentLoaded', function() {
+ // Mobile menu toggle
+ const mobileMenu = document.querySelector('.mobile-menu');
+ const navLinks = document.querySelector('.nav-links');
+
+ mobileMenu.addEventListener('click', function() {
+ navLinks.classList.toggle('active');
+
+ // Animate hamburger to X
+ const spans = this.querySelectorAll('span');
+ spans.forEach(span => span.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',
+ block: 'start'
+ });
+ // Close mobile menu if open
+ navLinks.classList.remove('active');
+ }
+ });
+ });
+
+ // Intersection Observer for scroll animations
+ const observerOptions = {
+ threshold: 0.1
+ };
+
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.classList.add('visible');
+ }
+ });
+ }, observerOptions);
+
+ // Observe all sections
+ document.querySelectorAll('section').forEach(section => {
+ observer.observe(section);
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..8e948e5
--- /dev/null
+++ b/style.css
@@ -0,0 +1,219 @@
+:root {
+ --primary-color: #e63946;
+ --secondary-color: #457b9d;
+ --background-color: #f1faee;
+ --text-color: #1d3557;
+ --accent-color: #a8dadc;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Arial', sans-serif;
+ line-height: 1.6;
+ color: var(--text-color);
+ background-color: var(--background-color);
+}
+
+/* Header & Navigation */
+.main-nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem 5%;
+ background-color: white;
+ box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+ position: fixed;
+ width: 100%;
+ z-index: 1000;
+}
+
+.logo {
+ font-size: 1.5rem;
+ font-weight: bold;
+ color: var(--primary-color);
+}
+
+.nav-links {
+ display: flex;
+ list-style: none;
+ gap: 2rem;
+}
+
+.nav-links a {
+ text-decoration: none;
+ color: var(--text-color);
+ font-weight: 500;
+ transition: color 0.3s ease;
+}
+
+.nav-links a:hover {
+ color: var(--primary-color);
+}
+
+.mobile-menu {
+ display: none;
+}
+
+/* Hero Section */
+.hero {
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ padding: 2rem;
+ background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
+ url('images/diner.jpg');
+ background-size: cover;
+ background-position: center;
+ color: white;
+}
+
+.hero h1 {
+ font-size: 3.5rem;
+ margin-bottom: 1rem;
+ animation: fadeIn 1s ease-in;
+}
+
+.cta-button {
+ display: inline-block;
+ padding: 1rem 2rem;
+ background-color: var(--primary-color);
+ color: white;
+ text-decoration: none;
+ border-radius: 5px;
+ margin-top: 2rem;
+ transition: transform 0.3s ease;
+}
+
+.cta-button:hover {
+ transform: translateY(-3px);
+}
+
+/* Specialties Section */
+.specialties {
+ padding: 5rem 2rem;
+}
+
+.specials-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ margin-top: 2rem;
+}
+
+.special-item {
+ background: white;
+ padding: 2rem;
+ border-radius: 10px;
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+ transition: transform 0.3s ease;
+}
+
+.special-item:hover {
+ transform: translateY(-5px);
+}
+
+/* Hours Section */
+.hours {
+ background-color: var(--accent-color);
+ padding: 5rem 2rem;
+ text-align: center;
+}
+
+.hours-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 2rem;
+ margin-top: 2rem;
+}
+
+/* Footer */
+footer {
+ background-color: var(--text-color);
+ color: white;
+ padding: 3rem 2rem;
+}
+
+.footer-content {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 2rem;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.social-links {
+ display: flex;
+ gap: 1rem;
+ margin-top: 1rem;
+}
+
+.social-links a {
+ color: white;
+ text-decoration: none;
+ padding: 0.5rem;
+ border: 1px solid white;
+ border-radius: 50%;
+ width: 35px;
+ height: 35px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: background-color 0.3s ease;
+}
+
+.social-links a:hover {
+ background-color: var(--primary-color);
+}
+
+/* Animations */
+@keyframes fadeIn {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+
+/* Mobile Responsiveness */
+@media (max-width: 768px) {
+ .mobile-menu {
+ display: block;
+ background: none;
+ border: none;
+ cursor: pointer;
+ }
+
+ .mobile-menu span {
+ display: block;
+ width: 25px;
+ height: 3px;
+ background-color: var(--text-color);
+ margin: 5px 0;
+ transition: 0.3s;
+ }
+
+ .nav-links {
+ display: none;
+ position: absolute;
+ top: 100%;
+ left: 0;
+ right: 0;
+ background-color: white;
+ flex-direction: column;
+ padding: 1rem;
+ text-align: center;
+ }
+
+ .nav-links.active {
+ display: flex;
+ }
+
+ .hero h1 {
+ font-size: 2.5rem;
+ }
+}