Changes to sip1.scroll.pub

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

    Elevate Your Drink Experience

    +

    Discover the art of perfect sipping

    + Explore Drinks
    +
    +
    +
    +
    +

    Signature Drinks

    +
    +
    +
    +

    Classic Martini

    +

    Timeless elegance in a glass

    +
    +
    +
    +

    Velvet Mojito

    +

    Fresh mint meets premium rum

    +
    +
    +
    +

    Golden Hour

    +

    Our signature sunset cocktail

    +
    +
    +
    +
    +
    +
    +
    +
    +

    Visit Us

    +

    123 Beverage Lane
    Cocktail City, ST 12345

    +
    +
    +

    Hours

    +

    Mon-Sat: 4pm-2am
    Sun: 4pm-12am

    +
    +
    +

    Contact

    +

    info@sip.scroll.pub
    +1 (555) 123-4567

    +
    +
    +
    index.scroll
    Changed around line 1
    + buildHtml
    + baseUrl https://sip.scroll.pub
    + metaTags
    + editButton /edit.html
    + title SIP - Elevate Your Drink Experience
    + style.css
    + body.html
    + script.js
    prompt.json
    Changed around line 1
    + {
    + "id": "msg_01SA5GkFvi21mMbWWzWgwSKM",
    + "type": "message",
    + "role": "assistant",
    + "model": "claude-3-5-sonnet-20241022",
    + "content": [
    + {
    + "type": "text",
    + "text": "Let me create a stylish website for a premium drink/cocktail brand called \"SIP\".\n\n---domain---\nsip.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://sip.scroll.pub\nmetaTags\neditButton /edit.html\ntitle SIP - Elevate Your Drink Experience\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n
    \n \n
    \n\n
    \n
    \n
    \n

    Elevate Your Drink Experience

    \n

    Discover the art of perfect sipping

    \n Explore Drinks\n
    \n
    \n\n
    \n

    Signature Drinks

    \n
    \n
    \n
    \n

    Classic Martini

    \n

    Timeless elegance in a glass

    \n
    \n
    \n
    \n

    Velvet Mojito

    \n

    Fresh mint meets premium rum

    \n
    \n
    \n
    \n

    Golden Hour

    \n

    Our signature sunset cocktail

    \n
    \n
    \n
    \n
    \n\n
    \n
    \n
    \n

    Visit Us

    \n

    123 Beverage Lane
    Cocktail City, ST 12345

    \n
    \n
    \n

    Hours

    \n

    Mon-Sat: 4pm-2am
    Sun: 4pm-12am

    \n
    \n
    \n

    Contact

    \n

    info@sip.scroll.pub
    +1 (555) 123-4567

    \n
    \n
    \n
    \n\n---style.css---\n:root {\n --primary: #2c3e50;\n --accent: #e74c3c;\n --light: #ecf0f1;\n --dark: #2c3e50;\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(--dark);\n overflow-x: hidden;\n}\n\n.main-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 20px rgba(0,0,0,0.1);\n}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 5%;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.logo {\n font-size: 2rem;\n font-weight: bold;\n color: var(--primary);\n text-decoration: none;\n}\n\n.nav-links {\n display: flex;\n gap: 2rem;\n list-style: none;\n}\n\n.nav-links a {\n color: var(--dark);\n text-decoration: none;\n transition: var(--transition);\n}\n\n.nav-links a:hover {\n color: var(--accent);\n}\n\n.menu-toggle {\n display: none;\n}\n\n.hero {\n height: 100vh;\n background: linear-gradient(135deg, var(--primary), var(--accent));\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n color: white;\n padding: 2rem;\n}\n\n.hero-content {\n max-width: 800px;\n}\n\n.hero h1 {\n font-size: 4rem;\n margin-bottom: 1rem;\n line-height: 1.2;\n}\n\n.cta-button {\n display: inline-block;\n padding: 1rem 2rem;\n background: white;\n color: var(--primary);\n text-decoration: none;\n border-radius: 50px;\n margin-top: 2rem;\n transition: var(--transition);\n}\n\n.cta-button:hover {\n transform: translateY(-3px);\n box-shadow: 0 10px 20px rgba(0,0,0,0.2);\n}\n\n.drinks-grid {\n padding: 5rem 5%;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.drinks-grid h2 {\n text-align: center;\n margin-bottom: 3rem;\n font-size: 2.5rem;\n}\n\n.grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n}\n\n.drink-card {\n background: white;\n border-radius: 15px;\n overflow: hidden;\n box-shadow: 0 5px 15px rgba(0,0,0,0.1);\n transition: var(--transition);\n}\n\n.drink-card:hover {\n transform: translateY(-10px);\n box-shadow: 0 15px 30px rgba(0,0,0,0.2);\n}\n\n.drink-image {\n height: 200px;\n background: var(--accent);\n background-size: cover;\n background-position: center;\n}\n\n.drink-card h3, .drink-card p {\n padding: 1rem;\n}\n\nfooter {\n background: var(--primary);\n color: white;\n padding: 3rem 5%;\n}\n\n.footer-content {\n max-width: 1200px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 2rem;\n}\n\n@media (max-width: 768px) {\n .menu-toggle {\n display: block;\n background: none;\n border: none;\n cursor: pointer;\n padding: 0.5rem;\n }\n\n .menu-toggle span {\n display: block;\n width: 25px;\n height: 3px;\n background: var(--primary);\n margin: 5px 0;\n transition: var(--transition);\n }\n\n .nav-links {\n position: fixed;\n top: 70px;\n right: -100%;\n flex-direction: column;\n background: white;\n width: 100%;\n text-align: center;\n transition: var(--transition);\n padding: 2rem;\n }\n\n .nav-links.active {\n right: 0;\n }\n\n .hero h1 {\n font-size: 2.5rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\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 \n const spans = menuToggle.querySelectorAll('span');\n spans[0].style.transform = navLinks.classList.contains('active') \n ? 'rotate(45deg) translate(8px, 8px)' \n : 'none';\n spans[1].style.opacity = navLinks.classList.contains('active') \n ? '0' \n : '1';\n spans[2].style.transform = navLinks.classList.contains('active') \n ? 'rotate(-45deg) translate(7px, -7px)' \n : 'none';\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 target.scrollIntoView({\n behavior: 'smooth'\n });\n \n // Close mobile menu if open\n if (navLinks.classList.contains('active')) {\n navLinks.classList.remove('active');\n }\n });\n });\n\n // Parallax effect on hero section\n window.addEventListener('scroll', () => {\n const hero = document.querySelector('.hero');\n const scrolled = window.pageYOffset;\n hero.style.backgroundPosition = `center ${scrolled * 0.5}px`;\n });\n});\n\n---end---\n\nThis website features:\n- Clean, minimal design with sophisticated animations\n- Smooth scrolling navigation\n- Mobile-responsive layout with hamburger menu\n- Parallax scrolling effect on hero section\n- Beautiful gradient background\n- Card-based design for drink showcase\n- Elegant hover effects\n- Accessible navigation\n- Semantic HTML structure\n- Modern CSS with custom properties\n- Optimized performance with minimal JavaScript\n\nThe design emphasizes elegance and sophistication while maintaining simplicity and usability. The color scheme and typography create a premium feel appropriate for a high-end drink establishment."
    + }
    + ],
    + "stop_reason": "end_turn",
    + "stop_sequence": null,
    + "usage": {
    + "input_tokens": 272,
    + "cache_creation_input_tokens": 0,
    + "cache_read_input_tokens": 0,
    + "output_tokens": 2636
    + }
    + }
    readme.scroll
    Changed around line 1
    + # sip1.scroll.pub
    +
    + website generated by Claude from prompt: sip
    script.js
    Changed around line 1
    + document.addEventListener('DOMContentLoaded', () => {
    + const menuToggle = document.querySelector('.menu-toggle');
    + const navLinks = document.querySelector('.nav-links');
    +
    + menuToggle.addEventListener('click', () => {
    + navLinks.classList.toggle('active');
    +
    + const spans = menuToggle.querySelectorAll('span');
    + spans[0].style.transform = navLinks.classList.contains('active')
    + ? 'rotate(45deg) translate(8px, 8px)'
    + : 'none';
    + spans[1].style.opacity = navLinks.classList.contains('active')
    + ? '0'
    + : '1';
    + spans[2].style.transform = navLinks.classList.contains('active')
    + ? 'rotate(-45deg) translate(7px, -7px)'
    + : 'none';
    + });
    +
    + // 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'));
    + target.scrollIntoView({
    + behavior: 'smooth'
    + });
    +
    + // Close mobile menu if open
    + if (navLinks.classList.contains('active')) {
    + navLinks.classList.remove('active');
    + }
    + });
    + });
    +
    + // Parallax effect on hero section
    + window.addEventListener('scroll', () => {
    + const hero = document.querySelector('.hero');
    + const scrolled = window.pageYOffset;
    + hero.style.backgroundPosition = `center ${scrolled * 0.5}px`;
    + });
    + });
    style.css
    Changed around line 1
    + :root {
    + --primary: #2c3e50;
    + --accent: #e74c3c;
    + --light: #ecf0f1;
    + --dark: #2c3e50;
    + --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(--dark);
    + overflow-x: hidden;
    + }
    +
    + .main-header {
    + position: fixed;
    + width: 100%;
    + background: rgba(255, 255, 255, 0.95);
    + backdrop-filter: blur(10px);
    + z-index: 1000;
    + box-shadow: 0 2px 20px rgba(0,0,0,0.1);
    + }
    +
    + nav {
    + display: flex;
    + justify-content: space-between;
    + align-items: center;
    + padding: 1rem 5%;
    + max-width: 1200px;
    + margin: 0 auto;
    + }
    +
    + .logo {
    + font-size: 2rem;
    + font-weight: bold;
    + color: var(--primary);
    + text-decoration: none;
    + }
    +
    + .nav-links {
    + display: flex;
    + gap: 2rem;
    + list-style: none;
    + }
    +
    + .nav-links a {
    + color: var(--dark);
    + text-decoration: none;
    + transition: var(--transition);
    + }
    +
    + .nav-links a:hover {
    + color: var(--accent);
    + }
    +
    + .menu-toggle {
    + display: none;
    + }
    +
    + .hero {
    + height: 100vh;
    + background: linear-gradient(135deg, var(--primary), var(--accent));
    + display: flex;
    + align-items: center;
    + justify-content: center;
    + text-align: center;
    + color: white;
    + padding: 2rem;
    + }
    +
    + .hero-content {
    + max-width: 800px;
    + }
    +
    + .hero h1 {
    + font-size: 4rem;
    + margin-bottom: 1rem;
    + line-height: 1.2;
    + }
    +
    + .cta-button {
    + display: inline-block;
    + padding: 1rem 2rem;
    + background: white;
    + color: var(--primary);
    + text-decoration: none;
    + border-radius: 50px;
    + margin-top: 2rem;
    + transition: var(--transition);
    + }
    +
    + .cta-button:hover {
    + transform: translateY(-3px);
    + box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    + }
    +
    + .drinks-grid {
    + padding: 5rem 5%;
    + max-width: 1200px;
    + margin: 0 auto;
    + }
    +
    + .drinks-grid h2 {
    + text-align: center;
    + margin-bottom: 3rem;
    + font-size: 2.5rem;
    + }
    +
    + .grid {
    + display: grid;
    + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    + gap: 2rem;
    + }
    +
    + .drink-card {
    + background: white;
    + border-radius: 15px;
    + overflow: hidden;
    + box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    + transition: var(--transition);
    + }
    +
    + .drink-card:hover {
    + transform: translateY(-10px);
    + box-shadow: 0 15px 30px rgba(0,0,0,0.2);
    + }
    +
    + .drink-image {
    + height: 200px;
    + background: var(--accent);
    + background-size: cover;
    + background-position: center;
    + }
    +
    + .drink-card h3, .drink-card p {
    + padding: 1rem;
    + }
    +
    + footer {
    + background: var(--primary);
    + color: white;
    + padding: 3rem 5%;
    + }
    +
    + .footer-content {
    + max-width: 1200px;
    + margin: 0 auto;
    + display: grid;
    + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    + gap: 2rem;
    + }
    +
    + @media (max-width: 768px) {
    + .menu-toggle {
    + display: block;
    + background: none;
    + border: none;
    + cursor: pointer;
    + padding: 0.5rem;
    + }
    +
    + .menu-toggle span {
    + display: block;
    + width: 25px;
    + height: 3px;
    + background: var(--primary);
    + margin: 5px 0;
    + transition: var(--transition);
    + }
    +
    + .nav-links {
    + position: fixed;
    + top: 70px;
    + right: -100%;
    + flex-direction: column;
    + background: white;
    + width: 100%;
    + text-align: center;
    + transition: var(--transition);
    + padding: 2rem;
    + }
    +
    + .nav-links.active {
    + right: 0;
    + }
    +
    + .hero h1 {
    + font-size: 2.5rem;
    + }
    + }