### Website UI Styling Source: https://juy.ai/ai-image-upscaler-online CSS rules defining the visual appearance and layout of various website components. This includes styling for pricing cards, text gradients, fade-in effects, aspect ratio containers, side-by-side layouts, prompt examples, and typography within a 'prose' container. ```css .pricing-card[data-astro-cid-5mb67dfd]>div[data-astro-cid-5mb67dfd]{flex:1;display:flex;flex-direction:column}.pricing-card[data-astro-cid-5mb67dfd] a[data-astro-cid-5mb67dfd]{margin-top:auto}.text-gradient-blue-start[data-astro-cid-jwht2les]{color:#0072ff}.fade-in-section[data-astro-cid-jwht2les]{opacity:0;transform:translateY(20px);transition:opacity .6s ease-out,transform .6s ease-out}.fade-in-section[data-astro-cid-jwht2les].is-visible{opacity:1;transform:translateY(0)}.aspect-ratio-container[data-astro-cid-jwht2les]{position:relative;overflow:hidden;width:100%}.aspect-ratio-container[data-astro-cid-jwht2les] img[data-astro-cid-jwht2les]{position:absolute;top:0;left:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.hover\:scale-102[data-astro-cid-jwht2les]:hover{transform:scale(1.02)}.side-by-side-container[data-astro-cid-jwht2les]{display:grid;margin-bottom:2rem}.hover\:shadow-glow[data-astro-cid-jwht2les]:hover{box-shadow:0 0 20px #a855f766}.prompt-example-card[data-astro-cid-jwht2les] .bg-dark-800\/70[data-astro-cid-jwht2les]{background-color:#111217b3;border:1px solid rgba(31,32,40,.9)}.prompt-example-card[data-astro-cid-jwht2les] .bg-dark-800\/70[data-astro-cid-jwht2les]:hover{background-color:#111217e6;border:1px solid rgba(168,85,247,.3)}@media (max-width: 768px){.side-by-side-container[data-astro-cid-jwht2les]{grid-template-columns:1fr;gap:1rem}}.prose[data-astro-cid-jwht2les] h2[data-astro-cid-jwht2les]{font-size:1.875rem;line-height:2.25rem;margin-top:2.5rem;margin-bottom:1.25rem;font-weight:700;color:#fff;border-bottom:1px solid rgba(75,85,99,.5);padding-bottom:.5rem}.prose[data-astro-cid-jwht2les] h3[data-astro-cid-jwht2les]{font-size:1.5rem;line-height:2rem;margin-top:2rem;margin-bottom:1rem;font-weight:600;color:#fff}.prose[data-astro-cid-jwht2les] p[data-astro-cid-jwht2les]{margin-top:1.25rem;margin-bottom:1.25rem;line-height:1.8}.prose[data-astro-cid-jwht2les] ul[data-astro-cid-jwht2les]{margin-top:1.25rem;margin-bottom:1.25rem}.prose[data-astro-cid-jwht2les] li[data-astro-cid-jwht2les]{margin-top:.5rem;margin-bottom:.5rem;padding-left:1.75rem;position:relative}.prose[data-astro-cid-jwht2les] li[data-astro-cid-jwht2les]:before{content:"";position:absolute;left:0;top:.5rem;height:.5rem;width:.5rem;background-color:#0072ff;border-radius:50%}.prose[data-astro-cid-jwht2les] a[data-astro-cid-jwht2les]{color:#0072ff;text-decoration:none;transition:all .2s ease}.prose[data-astro-cid-jwht2les] a[data-astro-cid-jwht2les]:hover{text-decoration:underline;opacity:.9}.prose[data-astro-cid-jwht2les] strong[data-astro-cid-jwht2les]{font-weight:600;color:#fff}.prose[data-astro-cid-jwht2les] blockquote[data-astro-cid-jwht2les]{border-left:4px solid #0072FF;padding-left:1rem;font-style:italic;margin:1.5rem 0}.prose[data-astro-cid-jwht2les] code[data-astro-cid-jwht2les]{background-color:#37415180;padding:.2rem .4rem;border-radius:.25rem;font-size:.875em}.prose[data-astro-cid-jwht2les] pre[data-astro-cid-jwht2les]{background-color:#25262d;padding:1rem;border-radius:.5rem;overflow-x:auto;margin:1.5rem 0} ``` -------------------------------- ### CSS Styles for JUY AI Web Page Layout and Components Source: https://juy.ai/restore-any-face-photo This CSS code defines styles for various page elements, including pricing cards, text gradients, fade-in animations, aspect ratio containers for images, side-by-side layouts, prompt example cards, and typography within a 'prose' class. It uses Astro-specific data attributes for styling. ```css -card[data-astro-cid-5mb67dfd]>div[data-astro-cid-5mb67dfd]{flex:1;display:flex;flex-direction:column}.pricing-card[data-astro-cid-5mb67dfd] a[data-astro-cid-5mb67dfd]{margin-top:auto} .text-gradient-blue-start[data-astro-cid-jwht2les]{color:#0072ff}.fade-in-section[data-astro-cid-jwht2les]{opacity:0;transform:translateY(20px);transition:opacity .6s ease-out,transform .6s ease-out}.fade-in-section[data-astro-cid-jwht2les].is-visible{opacity:1;transform:translateY(0)}.aspect-ratio-container[data-astro-cid-jwht2les]{position:relative;overflow:hidden;width:100%}.aspect-ratio-container[data-astro-cid-jwht2les] img[data-astro-cid-jwht2les]{position:absolute;top:0;left:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.hover\:scale-102[data-astro-cid-jwht2les]:hover{transform:scale(1.02)}.side-by-side-container[data-astro-cid-jwht2les]{display:grid;margin-bottom:2rem}.hover\:shadow-glow[data-astro-cid-jwht2les]:hover{box-shadow:0 0 20px #a855f766}.prompt-example-card[data-astro-cid-jwht2les] .bg-dark-800\/70[data-astro-cid-jwht2les]{background-color:#111217b3;border:1px solid rgba(31,32,40,.9)}.prompt-example-card[data-astro-cid-jwht2les] .bg-dark-800\/70[data-astro-cid-jwht2les]:hover{background-color:#111217e6;border:1px solid rgba(168,85,247,.3)}@media (max-width: 768px){.side-by-side-container[data-astro-cid-jwht2les]{grid-template-columns:1fr;gap:1rem}}.prose[data-astro-cid-jwht2les] h2[data-astro-cid-jwht2les]{font-size:1.875rem;line-height:2.25rem;margin-top:2.5rem;margin-bottom:1.25rem;font-weight:700;color:#fff;border-bottom:1px solid rgba(75,85,99,.5);padding-bottom:.5rem}.prose[data-astro-cid-jwht2les] h3[data-astro-cid-jwht2les]{font-size:1.5rem;line-height:2rem;margin-top:2rem;margin-bottom:1rem;font-weight:600;color:#fff}.prose[data-astro-cid-jwht2les] p[data-astro-cid-jwht2les]{margin-top:1.25rem;margin-bottom:1.25rem;line-height:1.8}.prose[data-astro-cid-jwht2les] ul[data-astro-cid-jwht2les]{margin-top:1.25rem;margin-bottom:1.25rem}.prose[data-astro-cid-jwht2les] li[data-astro-cid-jwht2les]{margin-top:.5rem;margin-bottom:.5rem;padding-left:1.75rem;position:relative}.prose[data-astro-cid-jwht2les] li[data-astro-cid-jwht2les]:before{content:"";position:absolute;left:0;top:.5rem;height:.5rem;width:.5rem;background-color:#0072ff;border-radius:50%}.prose[data-astro-cid-jwht2les] a[data-astro-cid-jwht2les]{color:#0072ff;text-decoration:none;transition:all .2s ease}.prose[data-astro-cid-jwht2les] a[data-astro-cid-jwht2les]:hover{text-decoration:underline;opacity:.9}.prose[data-astro-cid-jwht2les] strong[data-astro-cid-jwht2les]{font-weight:600;color:#fff}.prose[data-astro-cid-jwht2les] blockquote[data-astro-cid-jwht2les]{border-left:4px solid #0072FF;padding-left:1rem;font-style:italic;margin:1.5rem 0}.prose[data-astro-cid-jwht2les] code[data-astro-cid-jwht2les]{background-color:#37415180;padding:.2rem .4rem;border-radius:.25rem;font-size:.875em}.prose[data-astro-cid-jwht2les] pre[data-astro-cid-jwht2les]{background-color:#25262d;padding:1rem;border-radius:.5rem;overflow-x:auto;margin:1.5rem 0} ``` -------------------------------- ### Schema.org Metadata Source: https://juy.ai/transparent-background-maker-free Schema.org JSON-LD markup providing structured data about the 'Transparent Background Maker' software application. It includes details like name, description, category, operating system, pricing, and aggregate rating, enhancing SEO and search engine understanding. ```json { "@context": "https://schema.org", "@type": "SoftwareApplication", "name": "Transparent Background Maker | Free Online Background Remover", "description": "Remove backgrounds from images instantly with our AI-powered tool. Create transparent PNG images for free online.", "applicationCategory": "MultimediaApplication", "operatingSystem": "Any", "offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" }, "url": "https://juy.ai/transparent-background-maker-free/", "aggregateRating": { "@type": "AggregateRating", "ratingValue": "4.8", "ratingCount": 20, "bestRating": "5", "worstRating": "1" } } ``` -------------------------------- ### Initialize and Control Image Comparison Slider with JavaScript Source: https://juy.ai/old-photo-restoration This JavaScript snippet initializes and manages an interactive image comparison slider. It allows users to drag a handle to reveal 'before' and 'after' states of an image, supporting both mouse and touch interactions. The script dynamically adjusts the clip-path of the 'after' image and the position of the slider handle based on user input, ensuring responsiveness across different screen sizes. ```JavaScript document.addEventListener("DOMContentLoaded",function(){document.querySelectorAll(".comparison-slider-container").forEach(a=>{const t={container:a.querySelector(".aspect-ratio-container"),afterContainer:a.querySelector(".after-container"),handle:a.querySelector(".slider-handle")};if(!t.container||!t.afterContainer||!t.handle)return;let n=!1;const i=e=>{const r=t.container.getBoundingClientRect(),c=e-r.left,d=r.width;let o=c/d*100;o=Math.max(0,Math.min(100,o)),t.afterContainer.style.clipPath=`inset(0 0 0 ${o}%)`,t.handle.style.left=`${o}%`,t.handle.setAttribute("aria-valuenow",o.toString())};t.handle.addEventListener("mousedown",e=>{n=!0,e.preventDefault()}),t.handle.addEventListener("touchstart",e=>{n=!0,e.preventDefault()}),t.container.addEventListener("click",e=>{i(e.clientX)}),t.container.addEventListener("touchend",e=>{e.changedTouches&&e.changedTouches[0]&&i(e.changedTouches[0].clientX)}),document.addEventListener("mousemove",e=>{n&&i(e.clientX)}),document.addEventListener("touchmove",e=>{n&&e.touches[0]&&(i(e.touches[0].clientX),e.preventDefault())}),document.addEventListener("mouseup",()=>{n=!1}),document.addEventListener("touchend",()=>{n=!1}),window.addEventListener("resize",()=>{const e=parseFloat(t.handle.getAttribute("aria-valuenow")||"50");t.afterContainer.style.clipPath=`inset(0 0 0 ${e}%)`,t.handle.style.left=`${e}%`}),setTimeout(()=>{i(t.container.getBoundingClientRect().left+t.container.getBoundingClientRect().width*.5)},100)})}); ``` -------------------------------- ### Image Comparison Slider Implementation Source: https://juy.ai/ru/ JavaScript code to create an interactive image comparison slider. It handles mouse and touch events to update the 'after' image clip path based on the slider handle position. Includes responsiveness for window resizing. ```javascript document.addEventListener("DOMContentLoaded",function(){document.querySelectorAll(".comparison-slider-container").forEach(a=>{const t={container:a.querySelector(".aspect-ratio-container"),afterContainer:a.querySelector(".after-container"),handle:a.querySelector(".slider-handle")};if(!t.container||!t.afterContainer||!t.handle)return;let n=!1;const i=e=>{const r=t.container.getBoundingClientRect(),c=e-r.left,d=r.width;let o=c/d*100;o=Math.max(0,Math.min(100,o)),t.afterContainer.style.clipPath=`inset(0 0 0 ${o}%)`,t.handle.style.left=`${o}%`,t.handle.setAttribute("aria-valuenow",o.toString())};t.handle.addEventListener("mousedown",e=>{n=!0,e.preventDefault()}),t.handle.addEventListener("touchstart",e=>{n=!0,e.preventDefault()}),t.container.addEventListener("click",e=>{i(e.clientX)}),t.container.addEventListener("touchend",e=>{e.changedTouches&&e.changedTouches[0]&&i(e.changedTouches[0].clientX)}),document.addEventListener("mousemove",e=>{n&&i(e.clientX)}),document.addEventListener("touchmove",e=>{n&&e.touches[0]&&(i(e.touches[0].clientX),e.preventDefault())}),document.addEventListener("mouseup",()=>{n=!1}),document.addEventListener("touchend",()=>{n=!1}),window.addEventListener("resize",()=>{const e=parseFloat(t.handle.getAttribute("aria-valuenow")||"50");t.afterContainer.style.clipPath=`inset(0 0 0 ${e}%)`,t.handle.style.left=`${e}%`}),setTimeout(()=>{i(t.container.getBoundingClientRect().left+t.container.getBoundingClientRect().width*.5)},100)})}); ``` -------------------------------- ### JUY AI Terms of Service - Section 1: Acceptance of Terms Source: https://juy.ai/terms This section outlines the user's agreement to the Terms of Service when accessing or using the Juy AI platform. It clarifies that by using the service, users acknowledge they have read, understood, and agreed to be bound by these terms. ```APIDOC Terms of Service - JUY AI ================ Last updated: July 6, 2025 1. Acceptance of Terms ----------------------- By accessing or using the Juy AI platform, services, or any related applications (collectively, the "Service"), you acknowledge that you have read, understood, and agreed to be bound by these Terms of Service ("Terms"). If you do not agree to these Terms, you may not access or use the Service. These Terms constitute a legally binding agreement between you and TenDegree LTD. ``` -------------------------------- ### Implement Image Comparison Slider with JavaScript Source: https://juy.ai/upscale-image-1-5x-online This JavaScript code initializes interactive image comparison sliders. It listens for user interactions on a slider handle to update the display of 'before' and 'after' images by clipping the 'after' image based on the handle's position. It handles mouse, touch, and window resize events for a responsive user experience. ```javascript document.addEventListener("DOMContentLoaded",function(){document.querySelectorAll(".comparison-slider-container").forEach(a=>{const t={container:a.querySelector(".aspect-ratio-container"),afterContainer:a.querySelector(".after-container"),handle:a.querySelector(".slider-handle")};if(!t.container||!t.afterContainer||!t.handle)return;let n=!1;const i=e=>{const r=t.container.getBoundingClientRect(),c=e-r.left,d=r.width;let o=c/d*100;o=Math.max(0,Math.min(100,o)),t.afterContainer.style.clipPath=`inset(0 0 0 ${o}%)`,t.handle.style.left=`${o}%`,t.handle.setAttribute("aria-valuenow",o.toString())};t.handle.addEventListener("mousedown",e=>{n=!0,e.preventDefault()}),t.handle.addEventListener("touchstart",e=>{n=!0,e.preventDefault()}),t.container.addEventListener("click",e=>{i(e.clientX)}),t.container.addEventListener("touchend",e=>{e.changedTouches&&e.changedTouches[0]&&i(e.changedTouches[0].clientX)}),document.addEventListener("mousemove",e=>{n&&i(e.clientX)}),document.addEventListener("touchmove",e=>{n&&e.touches[0]&&(i(e.touches[0].clientX),e.preventDefault())}),document.addEventListener("mouseup",()=>{n=!1}),document.addEventListener("touchend",()=>{n=!1}),window.addEventListener("resize",()=>{const e=parseFloat(t.handle.getAttribute("aria-valuenow")||"50");t.afterContainer.style.clipPath=`inset(0 0 0 ${e}%)`,t.handle.style.left=`${e}%`}),setTimeout(()=>{i(t.container.getBoundingClientRect().left+t.container.getBoundingClientRect().width*.5)},100)})}); ``` -------------------------------- ### Software Application Schema Source: https://juy.ai/upscale-image-1-5x-online Schema.org JSON-LD markup describing the 'Upscale Images 1.5x Online' application. It includes details about its name, description, category, operating system, pricing, and aggregate rating. ```json { "@context": "https://schema.org", "@type": "SoftwareApplication", "name": "Upscale Images 1.5x Online - Precise AI Image Enlargement", "description": "Enhance your images with our free online 1.5x image upscaler. Perfect for precise sizing requirements with AI-powered quality preservation.", "applicationCategory": "MultimediaApplication", "operatingSystem": "Any", "offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" }, "url": "https://juy.ai/upscale-image-1-5x-online/", "aggregateRating": { "@type": "AggregateRating", "ratingValue": "4.8", "ratingCount": 20, "bestRating": "5", "worstRating": "1" } } ``` -------------------------------- ### JUY AI Terms of Service - Section 4: Account Registration Source: https://juy.ai/terms This section, though incomplete in the provided text, is intended to cover the process and requirements for users to register an account on the Juy AI platform. ```APIDOC 4. Account Registration ======================= (Content for this section is not fully provided in the input text.) ``` -------------------------------- ### Implement Image Comparison Slider with JavaScript Source: https://juy.ai/restore-any-face-photo This JavaScript code initializes an interactive image comparison slider. It allows users to drag a handle to reveal 'before' and 'after' versions of an image, enhancing user engagement with visual content. The script handles mouse and touch events for cross-device compatibility. ```javascript document.addEventListener("DOMContentLoaded",function(){document.querySelectorAll(".comparison-slider-container").forEach(a=>{const t={container:a.querySelector(".aspect-ratio-container"),afterContainer:a.querySelector(".after-container"),handle:a.querySelector(".slider-handle")};if(!t.container||!t.afterContainer||!t.handle)return;let n=!1;const i=e=>{const r=t.container.getBoundingClientRect(),c=e-r.left,d=r.width;let o=c/d*100;o=Math.max(0,Math.min(100,o)),t.afterContainer.style.clipPath=`inset(0 0 0 ${o}%)`,t.handle.style.left=`${o}%`,t.handle.setAttribute("aria-valuenow",o.toString())};t.handle.addEventListener("mousedown",e=>{n=!0,e.preventDefault()}),t.handle.addEventListener("touchstart",e=>{n=!0,e.preventDefault()}),t.container.addEventListener("click",e=>{i(e.clientX)}),t.container.addEventListener("touchend",e=>{e.changedTouches&&e.changedTouches\[0\]&&i(e.changedTouches\[0\]\[0].clientX)}),document.addEventListener("mousemove",e=>{n&&i(e.clientX)}),document.addEventListener("touchmove",e=>{n&&e.touches\[0\]&&(i(e.touches\[0\]\[0].clientX),e.preventDefault())}),document.addEventListener("mouseup",()=>{n=!1}),document.addEventListener("touchend",()=>{n=!1}),window.addEventListener("resize",()=>{const e=parseFloat(t.handle.getAttribute("aria-valuenow")||"50");t.afterContainer.style.clipPath=`inset(0 0 0 ${e}%)`,t.handle.style.left=`${e}%`}),setTimeout(()=>{i(t.container.getBoundingClientRect().left+t.container.getBoundingClientRect().width*.5)},100)})}); ``` -------------------------------- ### JavaScript Image Comparison Slider Source: https://juy.ai/anime-image-upscaler-online-free Implements an interactive image comparison slider for before/after views. It uses event listeners for mouse and touch interactions to allow users to drag a handle, dynamically clipping the 'after' image to reveal the 'before' image underneath, providing a visual comparison of quality improvements. ```javascript document.addEventListener("DOMContentLoaded",function(){ document.querySelectorAll(".comparison-slider-container").forEach(a=>{ const t={ container:a.querySelector(".aspect-ratio-container"), afterContainer:a.querySelector(".after-container"), handle:a.querySelector(".slider-handle") }; if(!t.container||!t.afterContainer||!t.handle)return; let n=!1; const i=e=>{ const r=t.container.getBoundingClientRect(), c=e-r.left, d=r.width; let o=c/d*100; o=Math.max(0,Math.min(100,o)), t.afterContainer.style.clipPath=`inset(0 0 0 ${o}%)`, t.handle.style.left=`${o}%`, t.handle.setAttribute("aria-valuenow",o.toString()) }; t.handle.addEventListener("mousedown",e=>{ n=!0, e.preventDefault() }), t.handle.addEventListener("touchstart",e=>{ n=!0, e.preventDefault() }), t.container.addEventListener("click",e=>{ i(e.clientX) }), t.container.addEventListener("touchend",e=>{ e.changedTouches&&e.changedTouches[0]&&i(e.changedTouches[0].clientX) }), document.addEventListener("mousemove",e=>{ n&&i(e.clientX) }), document.addEventListener("touchmove",e=>{ n&&e.touches[0]&&(i(e.touches[0].clientX),e.preventDefault()) }), document.addEventListener("mouseup",()=>{ n=!1 }), document.addEventListener("touchend",()=>{ n=!1 }), window.addEventListener("resize",()=>{ const e=parseFloat(t.handle.getAttribute("aria-valuenow")||"50"); t.afterContainer.style.clipPath=`inset(0 0 0 ${e}%)`, t.handle.style.left=`${e}%` }), setTimeout(()=>{ i(t.container.getBoundingClientRect().left+t.container.getBoundingClientRect().width*.5) },100) }) }); ``` -------------------------------- ### SoftwareApplication Schema for AI Upscaler Source: https://juy.ai/upscale-anime-image-to-4k Schema.org JSON-LD markup defining the 'Upscale Anime Images to 4K Resolution' application. It details the application's name, description, category, operating system compatibility, pricing model, and a direct URL for access. ```json-ld { "@context": "https://schema.org", "@type": "SoftwareApplication", "name": "Upscale Anime Images to 4K Resolution", "description": "Transform your low-quality anime images into stunning 4K resolution with our advanced AI upscaler.", "applicationCategory": "MultimediaApplication", "operatingSystem": "Any", "offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" }, "url": "https://juy.ai/upscale-anime-image-to-4k/", "aggregateRating": { "@type": "AggregateRating", "ratingValue": "4.8", "ratingCount": 20, "bestRating": "5", "worstRating": "1" } } ``` -------------------------------- ### FAQ Toggle Script Source: https://juy.ai/upscale-anime-image-to-4k JavaScript code that adds event listeners to FAQ elements. When clicked, it toggles the visibility of the corresponding answer content and rotates an associated icon, enhancing user interaction with frequently asked questions. ```javascript document.addEventListener("DOMContentLoaded",()=>{ document.querySelectorAll(".faq-toggle").forEach(e=>{ e.addEventListener("click",()=>{ const t=e.nextElementSibling, n=e.querySelector(".faq-icon"); t&&t.classList.toggle("hidden"),n&&n.classList.toggle("rotate-180") }) }) }); ``` -------------------------------- ### Matomo Analytics Tracking Script Source: https://juy.ai/upscale-image-1-5x-online This JavaScript code snippet initializes and configures the Matomo web analytics tracker for the JUY.AI website. It sets up tracking for page views and link clicks, sending data to a specified Matomo server. ```javascript var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://matomo.vpssos.com/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '22']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); ``` -------------------------------- ### Image Comparison Slider Source: https://juy.ai/transparent-background-maker-free JavaScript code for implementing an interactive image comparison slider. It allows users to drag a handle to reveal 'after' content over 'before' content. The script handles mouse and touch events for dragging, click interactions, and updates the clip-path and handle position dynamically. It also includes a resize listener and an initial timeout for proper rendering. ```javascript document.addEventListener("DOMContentLoaded",function(){ document.querySelectorAll(".comparison-slider-container").forEach(a=>{ const t= { container: a.querySelector(".aspect-ratio-container"), afterContainer: a.querySelector(".after-container"), handle: a.querySelector(".slider-handle") }; if(!t.container||!t.afterContainer||!t.handle)return; let n=!1; const i=e=>{ const r=t.container.getBoundingClientRect(), c=e-r.left, d=r.width; let o=c/d*100; o=Math.max(0,Math.min(100,o)), t.afterContainer.style.clipPath=`inset(0 0 0 ${o}%)`, t.handle.style.left=`${o}%`, t.handle.setAttribute("aria-valuenow",o.toString()) }; t.handle.addEventListener("mousedown",e=>{ n=!0, e.preventDefault() }), t.handle.addEventListener("touchstart",e=>{ n=!0, e.preventDefault() }), t.container.addEventListener("click",e=>{ i(e.clientX) }), t.container.addEventListener("touchend",e=>{ e.changedTouches&&e.changedTouches[0]&&i(e.changedTouches[0].clientX) }), document.addEventListener("mousemove",e=>{ n&&i(e.clientX) }), document.addEventListener("touchmove",e=>{ n&&e.touches[0]&&(i(e.touches[0].clientX),e.preventDefault()) }), document.addEventListener("mouseup",()=>{ n=!1 }), document.addEventListener("touchend",()=>{ n=!1 }), window.addEventListener("resize",()=>{ const e=parseFloat(t.handle.getAttribute("aria-valuenow")||"50"); t.afterContainer.style.clipPath=`inset(0 0 0 ${e}%)`, t.handle.style.left=`${e}%` }), setTimeout(()=>{ i(t.container.getBoundingClientRect().left+t.container.getBoundingClientRect().width*.5) },100) }) }); ``` -------------------------------- ### Matomo Analytics Tracking Script Source: https://juy.ai/ai-image-upscaler-online This JavaScript snippet configures and initializes the Matomo web analytics tracker. It sets the tracker URL, site ID, enables link tracking, and tracks page views. ```javascript var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://matomo.vpssos.com/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '22']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); ``` -------------------------------- ### JSON-LD Schema for Software Application Source: https://juy.ai/anime-image-upscaler-online-free A JSON-LD (Linked Data) schema defining the properties of the 'Upscale Anime Images Instantly Online' software application. It includes details like name, description, category, operating system, pricing, and a URL, adhering to schema.org standards for better search engine understanding. ```json { "@context": "https://schema.org", "@type": "SoftwareApplication", "name": "Upscale Anime Images Instantly Online", "description": "Transform your low-resolution anime images into crisp, high-definition visuals using powerful AI technology.", "applicationCategory": "MultimediaApplication", "operatingSystem": "Any", "offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" }, "url": "https://juy.ai/anime-image-upscaler-online-free/", "aggregateRating": { "@type": "AggregateRating", "ratingValue": "4.8", "ratingCount": 20, "bestRating": "5", "worstRating": "1" } } ``` -------------------------------- ### Matomo Analytics Tracking Script Source: https://juy.ai/terms This JavaScript code snippet configures and initializes the Matomo analytics tracking. It sets the tracker URL, site ID, and enables link tracking for website analytics. ```javascript var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://matomo.vpssos.com/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '22']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); ``` -------------------------------- ### JavaScript Image Comparison Slider Implementation Source: https://juy.ai/flux-kontext-pro Implements an interactive image comparison slider using JavaScript. It handles mouse and touch events to control a slider, dynamically adjusting the display of 'after' content over 'before' content via CSS clip-path. ```javascript document.addEventListener("DOMContentLoaded",function(){document.querySelectorAll(".comparison-slider-container").forEach(a=>{const t={container:a.querySelector(".aspect-ratio-container"),afterContainer:a.querySelector(".after-container"),handle:a.querySelector(".slider-handle")};if(!t.container||!t.afterContainer||!t.handle)return;let n=!1;const i=e=>{const r=t.container.getBoundingClientRect(),c=e-r.left,d=r.width;let o=c/d*100;o=Math.max(0,Math.min(100,o)),t.afterContainer.style.clipPath=`inset(0 0 0 ${o}%)`,t.handle.style.left=`${o}%`,t.handle.setAttribute("aria-valuenow",o.toString())};t.handle.addEventListener("mousedown",e=>{n=!0,e.preventDefault()}),t.handle.addEventListener("touchstart",e=>{n=!0,e.preventDefault()}),t.container.addEventListener("click",e=>{i(e.clientX)}),t.container.addEventListener("touchend",e=>{e.changedTouches&&e.changedTouches[0]&&i(e.changedTouches[0].clientX)}),document.addEventListener("mousemove",e=>{n&&i(e.clientX)}),document.addEventListener("touchmove",e=>{n&&e.touches[0]&&(i(e.touches[0].clientX),e.preventDefault())}),document.addEventListener("mouseup",()=>{n=!1}),document.addEventListener("touchend",()=>{n=!1}),window.addEventListener("resize",()=>{const e=parseFloat(t.handle.getAttribute("aria-valuenow")||"50");t.afterContainer.style.clipPath=`inset(0 0 0 ${e}%)`,t.handle.style.left=`${e}%`}),setTimeout(()=>{i(t.container.getBoundingClientRect().left+t.container.getBoundingClientRect().width*.5)},100)})}); ``` -------------------------------- ### JavaScript Image Loading Observer for Side-by-Side Container Source: https://juy.ai/anime-image-upscaler-online-free This JavaScript snippet targets a '.side-by-side-container' element. It logs messages to the console indicating the container's presence and the number of images within it. It also attaches 'load' and 'error' event listeners to each image to report their loading status, providing debugging information for image display. ```javascript document.addEventListener("DOMContentLoaded", () => { const n = document.querySelector(".side-by-side-container"); if (n) { console.log("Side by Side container found"); const e = n.querySelectorAll("img"); console.log(`Found ${e.length} images in side-by-side container`); e.forEach((o, s) => { console.log(`Image ${s + 1} src: ${o.getAttribute("src")}`); o.addEventListener("load", () => { console.log(`Image ${s + 1} loaded successfully`); }); o.addEventListener("error", () => { console.error(`Image ${s + 1} failed to load`); }); }); } }); ``` -------------------------------- ### FAQ Toggle Functionality Source: https://juy.ai/old-photo-restoration Handles click events on FAQ elements to toggle the visibility of their content and rotate an associated icon. This script enhances user interaction with frequently asked questions by dynamically showing or hiding answers. ```javascript document.addEventListener("DOMContentLoaded",()=>{ document.querySelectorAll(".faq-toggle").forEach(e=>{ e.addEventListener("click",()=>{ const t=e.nextElementSibling, n=e.querySelector(".faq-icon"); t&&t.classList.toggle("hidden"), n&&n.classList.toggle("rotate-180") }) }) }); ``` -------------------------------- ### Matomo Analytics Tracking Script Source: https://juy.ai/anime-image-upscaler-online-free This JavaScript code snippet initializes and configures Matomo web analytics for tracking user behavior and page views on the website. ```javascript var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://matomo.vpssos.com/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '22']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); ``` -------------------------------- ### JavaScript FAQ Toggle Interaction Source: https://juy.ai/flux-schnell This script enables interactive toggling for FAQ elements. It listens for clicks on elements with the 'faq-toggle' class, revealing or hiding their associated content and rotating an icon to indicate the state. ```javascript document.addEventListener("DOMContentLoaded",()=>{ document.querySelectorAll(".faq-toggle").forEach(e=>{ e.addEventListener("click",()=>{ const t=e.nextElementSibling, n=e.querySelector(".faq-icon"); t&&t.classList.toggle("hidden"), n&&n.classList.toggle("rotate-180") }) }) }); ``` -------------------------------- ### Image Comparison Slider Functionality (JavaScript) Source: https://juy.ai/ai-image-upscaler-online This JavaScript code initializes and manages interactive image comparison sliders. It handles user interactions like mouse clicks and touches to update the display, allowing users to compare 'before' and 'after' images by sliding a divider. It also includes responsive adjustments for window resizing. ```javascript document.addEventListener("DOMContentLoaded",function(){document.querySelectorAll(".comparison-slider-container").forEach(a=>{const t={container:a.querySelector(".aspect-ratio-container"),afterContainer:a.querySelector(".after-container"),handle:a.querySelector(".slider-handle")};if(!t.container||!t.afterContainer||!t.handle)return;let n=!1;const i=e=>{const r=t.container.getBoundingClientRect(),c=e-r.left,d=r.width;let o=c/d*100;o=Math.max(0,Math.min(100,o)),t.afterContainer.style.clipPath=`inset(0 0 0 ${o}%)`,t.handle.style.left=`${o}%`,t.handle.setAttribute("aria-valuenow",o.toString())};t.handle.addEventListener("mousedown",e=>{n=!0,e.preventDefault()}),t.handle.addEventListener("touchstart",e=>{n=!0,e.preventDefault()}),t.container.addEventListener("click",e=>{i(e.clientX)}),t.container.addEventListener("touchend",e=>{e.changedTouches&&e.changedTouches[0]&&i(e.changedTouches[0].clientX)}),document.addEventListener("mousemove",e=>{n&&i(e.clientX)}),document.addEventListener("touchmove",e=>{n&&e.touches[0]&&(i(e.touches[0].clientX),e.preventDefault())}),document.addEventListener("mouseup",()=>{n=!1}),document.addEventListener("touchend",()=>{n=!1}),window.addEventListener("resize",()=>{const e=parseFloat(t.handle.getAttribute("aria-valuenow")||"50");t.afterContainer.style.clipPath=`inset(0 0 0 ${e}%)`,t.handle.style.left=`${e}%`}),setTimeout(()=>{i(t.container.getBoundingClientRect().left+t.container.getBoundingClientRect().width*.5)},100)})}); ``` -------------------------------- ### FAQ Toggle Functionality Source: https://juy.ai/colorize-photo This JavaScript code snippet handles the interactive behavior for frequently asked questions (FAQs). It allows users to click on FAQ items to reveal or hide their answers, enhancing user experience on the webpage. ```javascript document.addEventListener("DOMContentLoaded",()=>{ document.querySelectorAll(".faq-toggle").forEach(e=>{ e.addEventListener("click",()=>{ const t=e.nextElementSibling, n=e.querySelector(".faq-icon"); t&&t.classList.toggle("hidden"), n&&n.classList.toggle("rotate-180") }) }) }); ``` -------------------------------- ### Interactive Image Comparison Slider Source: https://juy.ai/zh/ Implements a drag-and-drop slider for comparing before-and-after images. It handles mouse and touch events to update the visual split dynamically and adjusts on window resize. Dependencies include HTML elements with specific classes for the container, after-image, and handle. ```javascript document.addEventListener("DOMContentLoaded",function(){document.querySelectorAll(".comparison-slider-container").forEach(a=>{const t={container:a.querySelector(".aspect-ratio-container"),afterContainer:a.querySelector(".after-container"),handle:a.querySelector(".slider-handle")};if(!t.container||!t.afterContainer||!t.handle)return;let n=!1;const i=e=>{const r=t.container.getBoundingClientRect(),c=e-r.left,d=r.width;let o=c/d*100;o=Math.max(0,Math.min(100,o)),t.afterContainer.style.clipPath=`inset(0 0 0 ${o}%)`,t.handle.style.left=`${o}%`,t.handle.setAttribute("aria-valuenow",o.toString())};t.handle.addEventListener("mousedown",e=>{n=!0,e.preventDefault()}),t.handle.addEventListener("touchstart",e=>{n=!0,e.preventDefault()}),t.container.addEventListener("click",e=>{i(e.clientX)}),t.container.addEventListener("touchend",e=>{e.changedTouches&&e.changedTouches\[0\]&&i(e.changedTouches\[0].clientX)}),document.addEventListener("mousemove",e=>{n&&i(e.clientX)}),document.addEventListener("touchmove",e=>{n&&e.touches\[0\]&&(i(e.touches\[0].clientX),e.preventDefault())}),document.addEventListener("mouseup",()=>{n=!1}),document.addEventListener("touchend",()=>{n=!1}),window.addEventListener("resize",()=>{const e=parseFloat(t.handle.getAttribute("aria-valuenow")||"50");t.afterContainer.style.clipPath=`inset(0 0 0 ${e}%)`,t.handle.style.left=`${e}%`}),setTimeout(()=>{i(t.container.getBoundingClientRect().left+t.container.getBoundingClientRect().width*.5)},100)})}); ``` -------------------------------- ### JUY AI Terms of Service - Section 2: Eligibility Source: https://juy.ai/terms This section details the eligibility requirements for using the Juy AI platform. Users must be at least 13 years old (or the legal minimum age), possess the legal capacity to enter into the agreement, and not be prohibited by applicable laws or sanctions. ```APIDOC 2. Eligibility --------------- To use Juy AI, you must: * Be at least 13 years old (or the legal minimum age in your jurisdiction) * Have the legal capacity to enter into this agreement * Not be barred from using our services under applicable laws or sanctions ``` -------------------------------- ### JavaScript Image Comparison Slider Source: https://juy.ai/upscale-anime-image-to-4k Implements an interactive image comparison slider for 'before' and 'after' image views. It uses mouse and touch events to control a handle, dynamically updating the 'after' image's clip path to reveal the comparison. ```javascript document.addEventListener("DOMContentLoaded",function(){ document.querySelectorAll(".comparison-slider-container").forEach(a=>{ const t={ container:a.querySelector(".aspect-ratio-container"), afterContainer:a.querySelector(".after-container"), handle:a.querySelector(".slider-handle") }; if(!t.container||!t.afterContainer||!t.handle)return; let n=!1; const i=e=>{ const r=t.container.getBoundingClientRect(), c=e-r.left, d=r.width; let o=c/d*100; o=Math.max(0,Math.min(100,o)), t.afterContainer.style.clipPath=`inset(0 0 0 ${o}%)`, t.handle.style.left=`${o}%`, t.handle.setAttribute("aria-valuenow",o.toString()) }; t.handle.addEventListener("mousedown",e=>{ n=!0, e.preventDefault() }), t.handle.addEventListener("touchstart",e=>{ n=!0, e.preventDefault() }), t.container.addEventListener("click",e=>{ i(e.clientX) }), t.container.addEventListener("touchend",e=>{ e.changedTouches&&e.changedTouches[0]&&i(e.changedTouches[0].clientX) }), document.addEventListener("mousemove",e=>{ n&&i(e.clientX) }), document.addEventListener("touchmove",e=>{ n&&e.touches[0]&&(i(e.touches[0].clientX),e.preventDefault()) }), document.addEventListener("mouseup",()=>{ n=!1 }), document.addEventListener("touchend",()=>{ n=!1 }), window.addEventListener("resize",()=>{ const e=parseFloat(t.handle.getAttribute("aria-valuenow")||"50"); t.afterContainer.style.clipPath=`inset(0 0 0 ${e}%)`, t.handle.style.left=`${e}%` }), setTimeout(()=>{ i(t.container.getBoundingClientRect().left+t.container.getBoundingClientRect().width*.5) },100) }) }); ```