Changes to viewlong.scroll.pub

root
root
24 days ago
Initial commit
body.html
Changed around line 1
+
+
+
+
+
+
+
    +
  • Features
    • +
  • Pricing
    • +
  • Download
    • +
    +
    +
    +
    +
    +
    +

    View Long Images with Ease

    +

    Professional image viewing for scrolling screenshots, digital art, and vertical content

    + Download Now
    +
    +
    +
    +

    Features

    +
    +
    +
    🔍
    +

    Smooth Scrolling

    +

    Effortlessly navigate through long images with our optimized scrolling engine

    +
    +
    +
    ⚡
    +

    Lightning Fast

    +

    Advanced memory management for instant loading of large images

    +
    +
    +
    🎨
    +

    Format Support

    +

    View PNG, JPG, WEBP, and more with full color accuracy

    +
    +
    +
    +
    +
    +

    Choose Your Plan

    +
    +
    +

    Free

    +

    $0

    +
      +
    • Basic viewing features
      • +
    • Standard formats support
      • +
    • Community support
      • +
      + Download Free
      +
      +
      +

      Pro

      +

      $4.99/month

      +
        +
      • Advanced features
        • +
      • All formats support
        • +
      • Priority support
        • +
      • No ads
        • +
        + Get Pro
        +
        +
        +
        +
        +
        +

        Download ViewLong

        +
        +
        + Windows
        + v2.1.0
        +
        +
        + macOS
        + v2.1.0
        +
        +
        + Linux
        + v2.1.0
        +
        +
        +
        +
        +
        +
        +
        +
        + Privacy Policy
        + Terms of Service
        + Contact
        +
        +
        +
        index.scroll
        Changed around line 1
        + buildHtml
        + baseUrl https://viewlong.scroll.pub
        + metaTags
        + editButton /edit.html
        + title ViewLong - Professional Long Image Viewer
        + style.css
        + body.html
        + script.js
        prompt.json
        Changed around line 1
        + {
        + "id": "msg_01QDg7eVx3EczT8PY39Ae7P9",
        + "type": "message",
        + "role": "assistant",
        + "model": "claude-3-5-sonnet-20241022",
        + "content": [
        + {
        + "type": "text",
        + "text": "I'll suggest \"viewlong.scroll.pub\" as the domain - it's short, memorable, and clearly represents a long image viewing application.\n\n---domain---\nviewlong.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://viewlong.scroll.pub\nmetaTags\neditButton /edit.html\ntitle ViewLong - Professional Long Image Viewer\nstyle.css\nbody.html\nscript.js\n---body.html---\n
        \n \n
        \n\n
        \n
        \n

        View Long Images with Ease

        \n

        Professional image viewing for scrolling screenshots, digital art, and vertical content

        \n Download Now\n
        \n\n
        \n

        Features

        \n
        \n
        \n
        🔍
        \n

        Smooth Scrolling

        \n

        Effortlessly navigate through long images with our optimized scrolling engine

        \n
        \n
        \n
        ⚡
        \n

        Lightning Fast

        \n

        Advanced memory management for instant loading of large images

        \n
        \n
        \n
        🎨
        \n

        Format Support

        \n

        View PNG, JPG, WEBP, and more with full color accuracy

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

        Choose Your Plan

        \n
        \n
        \n

        Free

        \n

        $0

        \n
          \n
        • Basic viewing features
          • \n
        • Standard formats support
          • \n
        • Community support
          • \n
        \n Download Free\n
        \n
        \n

        Pro

        \n

        $4.99/month

        \n
          \n
        • Advanced features
          • \n
        • All formats support
          • \n
        • Priority support
          • \n
        • No ads
          • \n
        \n Get Pro\n
        \n
        \n
        \n\n
        \n

        Download ViewLong

        \n
        \n \n Windows\n v2.1.0\n \n \n macOS\n v2.1.0\n \n \n Linux\n v2.1.0\n \n
        \n
        \n
        \n\n\n---style.css---\n:root {\n --primary-color: #4a90e2;\n --secondary-color: #2c3e50;\n --accent-color: #e74c3c;\n --background-color: #f5f6fa;\n --text-color: #2c3e50;\n --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\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: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n background: var(--background-color);\n}\n\n.main-nav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 5%;\n background: white;\n box-shadow: var(--card-shadow);\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: var(--transition);\n}\n\n.nav-links a:hover {\n color: var(--primary-color);\n}\n\n.mobile-menu {\n display: none;\n}\n\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: 0 1rem;\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n color: white;\n}\n\n.hero h1 {\n font-size: 3.5rem;\n margin-bottom: 1rem;\n animation: fadeInUp 1s ease;\n}\n\n.hero p {\n font-size: 1.2rem;\n margin-bottom: 2rem;\n animation: fadeInUp 1s ease 0.2s;\n opacity: 0;\n animation-fill-mode: forwards;\n}\n\n.cta-button {\n display: inline-block;\n padding: 1rem 2rem;\n background: white;\n color: var(--primary-color);\n text-decoration: none;\n border-radius: 50px;\n font-weight: bold;\n transition: var(--transition);\n animation: fadeInUp 1s ease 0.4s;\n opacity: 0;\n animation-fill-mode: forwards;\n}\n\n.cta-button:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);\n}\n\nsection {\n padding: 5rem 1rem;\n}\n\n.feature-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n margin-top: 3rem;\n}\n\n.feature-card {\n background: white;\n padding: 2rem;\n border-radius: 10px;\n box-shadow: var(--card-shadow);\n transition: var(--transition);\n text-align: center;\n}\n\n.feature-card:hover {\n transform: translateY(-5px);\n}\n\n.feature-icon {\n font-size: 2.5rem;\n margin-bottom: 1rem;\n}\n\n.pricing-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 2rem;\n margin-top: 3rem;\n}\n\n.price-card {\n background: white;\n padding: 2rem;\n border-radius: 10px;\n box-shadow: var(--card-shadow);\n text-align: center;\n transition: var(--transition);\n}\n\n.price-card.featured {\n transform: scale(1.05);\n border: 2px solid var(--primary-color);\n}\n\n.price-card:hover {\n transform: translateY(-5px);\n}\n\n.price-card.featured:hover {\n transform: scale(1.05) translateY(-5px);\n}\n\n.price {\n font-size: 2.5rem;\n font-weight: bold;\n color: var(--primary-color);\n margin: 1rem 0;\n}\n\n.price span {\n font-size: 1rem;\n color: var(--text-color);\n}\n\n.button {\n display: inline-block;\n padding: 0.8rem 1.5rem;\n background: var(--primary-color);\n color: white;\n text-decoration: none;\n border-radius: 5px;\n transition: var(--transition);\n margin-top: 1rem;\n}\n\n.button:hover {\n background: var(--secondary-color);\n}\n\n.download-options {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 1rem;\n margin-top: 2rem;\n}\n\n.download-button {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 1.5rem;\n background: white;\n border-radius: 10px;\n text-decoration: none;\n color: var(--text-color);\n transition: var(--transition);\n box-shadow: var(--card-shadow);\n}\n\n.download-button:hover {\n transform: translateY(-3px);\n box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);\n}\n\n.os-icon {\n font-size: 1.2rem;\n font-weight: bold;\n margin-bottom: 0.5rem;\n}\n\n.version {\n font-size: 0.9rem;\n color: #666;\n}\n\nfooter {\n background: var(--secondary-color);\n color: white;\n padding: 2rem;\n text-align: center;\n}\n\n.footer-links {\n display: flex;\n justify-content: center;\n gap: 2rem;\n}\n\n.footer-links a {\n color: white;\n text-decoration: none;\n transition: var(--transition);\n}\n\n.footer-links a:hover {\n color: var(--primary-color);\n}\n\n@keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@media (max-width: 768px) {\n .mobile-menu {\n display: block;\n background: none;\n border: none;\n cursor: pointer;\n padding: 0.5rem;\n }\n\n .mobile-menu span {\n display: block;\n width: 25px;\n height: 3px;\n background: var(--text-color);\n margin: 5px 0;\n transition: var(--transition);\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---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Mobile menu toggle\n const mobileMenu = document.querySelector('.mobile-menu');\n const navLinks = document.querySelector('.nav-links');\n\n mobileMenu.addEventListener('click', () => {\n navLinks.classList.toggle('active');\n const spans = mobileMenu.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 scrolling for anchor 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 animation on scroll\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 all feature cards and price cards\n document.querySelectorAll('.feature-card, .price-card').forEach(el => {\n el.style.opacity = '0';\n el.style.transform = 'translateY(20px)';\n observer.observe(el);\n });\n});\n---end---"
        + }
        + ],
        + "stop_reason": "end_turn",
        + "stop_sequence": null,
        + "usage": {
        + "input_tokens": 298,
        + "cache_creation_input_tokens": 0,
        + "cache_read_input_tokens": 0,
        + "output_tokens": 3727
        + }
        + }
        readme.scroll
        Changed around line 1
        + # viewlong.scroll.pub
        + Website generated by Claude from prompt: A website for a long image viewer that provides product introductions, subscription options, and downloads (supporting Windows, macOS, and Linux).
        script.js
        Changed around line 1
        + document.addEventListener('DOMContentLoaded', () => {
        + // Mobile menu toggle
        + const mobileMenu = document.querySelector('.mobile-menu');
        + const navLinks = document.querySelector('.nav-links');
        +
        + mobileMenu.addEventListener('click', () => {
        + navLinks.classList.toggle('active');
        + const spans = mobileMenu.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 scrolling for anchor 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 animation on scroll
        + 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 all feature cards and price cards
        + document.querySelectorAll('.feature-card, .price-card').forEach(el => {
        + el.style.opacity = '0';
        + el.style.transform = 'translateY(20px)';
        + observer.observe(el);
        + });
        + });
        style.css
        Changed around line 1
        + :root {
        + --primary-color: #4a90e2;
        + --secondary-color: #2c3e50;
        + --accent-color: #e74c3c;
        + --background-color: #f5f6fa;
        + --text-color: #2c3e50;
        + --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        + --transition: all 0.3s ease;
        + }
        +
        + * {
        + margin: 0;
        + padding: 0;
        + box-sizing: border-box;
        + }
        +
        + body {
        + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
        + line-height: 1.6;
        + color: var(--text-color);
        + background: var(--background-color);
        + }
        +
        + .main-nav {
        + display: flex;
        + justify-content: space-between;
        + align-items: center;
        + padding: 1rem 5%;
        + background: white;
        + box-shadow: var(--card-shadow);
        + 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: var(--transition);
        + }
        +
        + .nav-links a:hover {
        + color: var(--primary-color);
        + }
        +
        + .mobile-menu {
        + display: none;
        + }
        +
        + .hero {
        + height: 100vh;
        + display: flex;
        + flex-direction: column;
        + justify-content: center;
        + align-items: center;
        + text-align: center;
        + padding: 0 1rem;
        + background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        + color: white;
        + }
        +
        + .hero h1 {
        + font-size: 3.5rem;
        + margin-bottom: 1rem;
        + animation: fadeInUp 1s ease;
        + }
        +
        + .hero p {
        + font-size: 1.2rem;
        + margin-bottom: 2rem;
        + animation: fadeInUp 1s ease 0.2s;
        + opacity: 0;
        + animation-fill-mode: forwards;
        + }
        +
        + .cta-button {
        + display: inline-block;
        + padding: 1rem 2rem;
        + background: white;
        + color: var(--primary-color);
        + text-decoration: none;
        + border-radius: 50px;
        + font-weight: bold;
        + transition: var(--transition);
        + animation: fadeInUp 1s ease 0.4s;
        + opacity: 0;
        + animation-fill-mode: forwards;
        + }
        +
        + .cta-button:hover {
        + transform: translateY(-2px);
        + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        + }
        +
        + section {
        + padding: 5rem 1rem;
        + }
        +
        + .feature-grid {
        + display: grid;
        + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        + gap: 2rem;
        + margin-top: 3rem;
        + }
        +
        + .feature-card {
        + background: white;
        + padding: 2rem;
        + border-radius: 10px;
        + box-shadow: var(--card-shadow);
        + transition: var(--transition);
        + text-align: center;
        + }
        +
        + .feature-card:hover {
        + transform: translateY(-5px);
        + }
        +
        + .feature-icon {
        + font-size: 2.5rem;
        + margin-bottom: 1rem;
        + }
        +
        + .pricing-grid {
        + display: grid;
        + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        + gap: 2rem;
        + margin-top: 3rem;
        + }
        +
        + .price-card {
        + background: white;
        + padding: 2rem;
        + border-radius: 10px;
        + box-shadow: var(--card-shadow);
        + text-align: center;
        + transition: var(--transition);
        + }
        +
        + .price-card.featured {
        + transform: scale(1.05);
        + border: 2px solid var(--primary-color);
        + }
        +
        + .price-card:hover {
        + transform: translateY(-5px);
        + }
        +
        + .price-card.featured:hover {
        + transform: scale(1.05) translateY(-5px);
        + }
        +
        + .price {
        + font-size: 2.5rem;
        + font-weight: bold;
        + color: var(--primary-color);
        + margin: 1rem 0;
        + }
        +
        + .price span {
        + font-size: 1rem;
        + color: var(--text-color);
        + }
        +
        + .button {
        + display: inline-block;
        + padding: 0.8rem 1.5rem;
        + background: var(--primary-color);
        + color: white;
        + text-decoration: none;
        + border-radius: 5px;
        + transition: var(--transition);
        + margin-top: 1rem;
        + }
        +
        + .button:hover {
        + background: var(--secondary-color);
        + }
        +
        + .download-options {
        + display: grid;
        + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        + gap: 1rem;
        + margin-top: 2rem;
        + }
        +
        + .download-button {
        + display: flex;
        + flex-direction: column;
        + align-items: center;
        + padding: 1.5rem;
        + background: white;
        + border-radius: 10px;
        + text-decoration: none;
        + color: var(--text-color);
        + transition: var(--transition);
        + box-shadow: var(--card-shadow);
        + }
        +
        + .download-button:hover {
        + transform: translateY(-3px);
        + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        + }
        +
        + .os-icon {
        + font-size: 1.2rem;
        + font-weight: bold;
        + margin-bottom: 0.5rem;
        + }
        +
        + .version {
        + font-size: 0.9rem;
        + color: #666;
        + }
        +
        + footer {
        + background: var(--secondary-color);
        + color: white;
        + padding: 2rem;
        + text-align: center;
        + }
        +
        + .footer-links {
        + display: flex;
        + justify-content: center;
        + gap: 2rem;
        + }
        +
        + .footer-links a {
        + color: white;
        + text-decoration: none;
        + transition: var(--transition);
        + }
        +
        + .footer-links a:hover {
        + color: var(--primary-color);
        + }
        +
        + @keyframes fadeInUp {
        + from {
        + opacity: 0;
        + transform: translateY(20px);
        + }
        + to {
        + opacity: 1;
        + transform: translateY(0);
        + }
        + }
        +
        + @media (max-width: 768px) {
        + .mobile-menu {
        + display: block;
        + background: none;
        + border: none;
        + cursor: pointer;
        + padding: 0.5rem;
        + }
        +
        + .mobile-menu span {
        + display: block;
        + width: 25px;
        + height: 3px;
        + background: var(--text-color);
        + margin: 5px 0;
        + transition: var(--transition);
        + }
        +
        + .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;
        + }
        + }