Automatically update gh-pages [skip ci]

sneas · Oct 30, 2023 · b47dd7f · b47dd7f
1 parent 18a3c6a
commit b47dd7f
Showing 1 changed file with 1 addition and 1 deletion.
diff --git a/index.html b/index.html
@@ -1 +1 @@
-<!doctype html><html dir="ltr" lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=5"/><title>Image Comparison Slider - React, Vue, Angular</title><meta name="description" content="Lightweight, accessible, and mobile-friendly slider component that allows users to compare two images. It is compatible with React, Vue and Angular."><style>x-ray{display:block;margin-bottom:1rem}</style><link rel="icon" href="favicon.ico"><meta property="og:type" content="website"/><meta property="og:title" content="Image Comparison Slider - React, Vue, Angular"/><meta property="og:description" content="Lightweight, accessible, and mobile-friendly slider component."/><meta property="og:url" content="https://img-comparison-slider.sneas.io"/><meta property="og:image" content="https://img-comparison-slider.sneas.io/social-preview.png"/><link href="css/main.71f732f6.css" rel="stylesheet"><script src="js/xray.bf2974cc.js" defer="defer"></script><script src="js/index.1.359d1b98.js" defer="defer"></script></head><body><nav class="navbar navbar-expand navbar-light"><div class="container"><a class="navbar-brand" href="/"><img src="images/logo.a516ac1d.svg" class="navbar-brand-image" alt="img-comparison-slider logo"/></a><ul class="navbar-nav ms-auto align-items-center"><li class="nav-item mx-0"><a class="nav-link py-3" href="examples.html">Usage Examples</a></li><li class="nav-item mx-0"><a class="nav-link py-3" href="https://github.com/sneas/img-comparison-slider" aria-label="Project's GitHub Page"><i class="fab fa-github fa-xl"></i><span class="d-none"> GitHub</span></a></li></ul></div></nav><div class="container pt-4 position-relative"><img-comparison-slider class="d-block main-slider" onfocus='if(window.hasKeyboardBeenUsed=!1,window.session=window.session??1,2===window.session)document.getElementById("message").classList.add("d-none"),document.getElementById("second-message").classList.remove("d-none");else document.getElementById("message").classList.remove("d-none"),document.getElementById("second-message").classList.add("d-none")' onkeyup='if(!["ArrowLeft","ArrowRight"].includes(event.code))return;switch(window.hasKeyboardBeenUsed=!0,window.session){case 2:document.getElementById("message").classList.add("opacity-0"),document.getElementById("second-message").classList.remove("opacity-0");break;case 3:document.getElementById("message").classList.add("opacity-0"),document.getElementById("second-message").classList.add("opacity-0");break;default:document.getElementById("message").classList.remove("opacity-0"),document.getElementById("second-message").classList.add("opacity-0")}' onblur='!0===window.hasKeyboardBeenUsed&&window.session++,document.getElementById("message").classList.add("opacity-0"),document.getElementById("second-message").classList.add("opacity-0")'><div slot="first"><img src="images/first.b4046e00.svg" width="100%" alt="First image example"/><div class="position-absolute" style="left:1%;top:60%"><div class="fs-md-5 fs-lg-3 fs-xl-2 fs-xxl-1 mb-1">Compare two images. Before and after.</div><div data-nosnippet class="fs-md-5 fs-lg-3 fs-xl-2 fs-xxl-1 mb-1 d-none d-md-block show-on-focus text-nowrap">Now try to use <i class="fas fa-caret-left align-middle"></i> or <i class="fas fa-caret-right align-middle"></i> arrows on the keyboard.</div><div data-nosnippet class="fs-md-5 fs-lg-3 fs-xl-2 fs-xxl-1 opacity-0 show-on-focus d-none" id="message">Amazing, isn't it?</div><div data-nosnippet class="fs-md-5 fs-lg-3 fs-xl-2 fs-xxl-1 opacity-0 show-on-focus d-none" id="second-message">Your <a href="https://github.com/sneas/img-comparison-slider" target="_blank" class="text-decoration-none" onmousedown="event.stopPropagation()"><i class="fab fa-github fa-sm align-middle"></i> star</a> will make a big difference for this project.</div></div></div><div slot="second"><img src="images/second.93ae2554.svg" width="100%" alt="Second image example"/></div></img-comparison-slider></div><div class="bg-warning py-5"><div class="container"><div class="row gx-0 gx-md-5"><div class="col-12 col-md-6">This <a href="https://github.com/sneas/img-comparison-slider/blob/master/LICENSE">free open source</a> slider component was created to demonstrate the difference between two images. For example, to show the difference before and after applying photo effects or filters, to compare photos of rooms before and after construction, or to show landscape changes over time. The component is well suited for news portals, artists, or design portfolios.</div><div class="col-12 col-md-6 mt-3 mt-md-0">Because it is a <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components">web component</a>, it is compatible with almost any JS framework, web application, or design system. In addition, this component offers a wide range of settings - the <a href="/examples.html">examples</a> section provides many ideas and styling techniques. The setup and settings documentation is available on the <a href="https://github.com/sneas/img-comparison-slider">component's GitHub page</a>.</div></div></div></div><div class="container pt-5 pb-0 pb-md-5"><h2 class="h1 mb-5">Features</h2><ul class="row align-items-start list-unstyled g-0"><li class="col-6 col-xl-4 mb-5 text-center row justify-content-center g-3"><div class="col-8"><img src="images/mobile-friendly.22aec8f8.svg" class="w-100" alt="Mobile-friendly"/></div><div class="col-12 lead"><strong>Mobile-friendly</strong></div></li><li class="col-6 col-xl-4 mb-5 text-center row justify-content-center g-3"><div class="col-8"><img src="images/accessible.1330e75b.svg" class="w-100" alt="Accessible"/></div><div class="col-12 lead"><strong>Accessible</strong></div></li><li class="col-6 col-xl-4 mb-5 text-center row justify-content-center g-3"><div class="col-8"><img src="images/responsive.5e14bd71.svg" class="w-100" alt="Responsive"/></div><div class="col-12 lead"><strong>Responsive</strong></div></li><li class="col-6 col-xl-4 mb-5 text-center row justify-content-center g-3"><div class="col-8"><img src="images/compact.9116300d.svg" class="w-100" alt="Compact"/></div><div class="col-12 lead"><strong>Compact</strong></div></li><li class="col-6 col-xl-4 mb-5 text-center row justify-content-center g-3"><div class="col-8"><img src="images/adjustable.72f16042.svg" class="w-100" alt="Adjustable"/></div><div class="col-12 lead"><strong>Adjustable</strong></div></li><li class="col-6 col-xl-4 mb-5 text-center row justify-content-center g-3"><div class="col-8"><img src="images/js.38f5c51e.svg" class="w-100" alt="Supports modern JS frameworks"/></div><div class="col-12 lead"><strong>Supports modern JS frameworks</strong></div></li></ul></div><div class="pb-5 pt-0 mt-md-5"><div class="container"><div class="h1 mb-5">What it looks like on default / <a href="/examples.html#always-show" style="text-decoration-thickness:2px">See more examples</a></div><img-comparison-slider class="d-block"><img slot="first" src="images/morning.372b13bb.webp" width="100%" alt="First image example"/> <img slot="second" src="images/morning-blurred.1d21249b.webp" width="100%" alt="Second image example"/></img-comparison-slider></div></div><footer class="footer py-5 bg-warning"><div class="container">&copy; 2019 – Made with love and care by <a href="mailto:[email protected]" class="text-decoration-none">sneas</a> <a href="https://github.com/sneas" target="_blank" class="ms-2"><i class="fab fa-github fa-2xl"></i></a> <a href="https://twitter.com/sneasio" target="_blank" class="ms-2"><i class="fab fa-x-twitter fa-2xl"></i></a> <a href="https://linkedin.com/in/sneas" target="_blank" class="ms-2"><i class="fab fa-linkedin fa-2xl"></i></a>.</div></footer><script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/js/all.min.js" integrity="sha512-uKQ39gEGiyUJl4AI6L+ekBdGKpGw4xJ55+xyJG7YFlJokPNYegn9KwQ3P8A7aFQAUtUsAQHep+d/lrGqrbPIDQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script></body></html>
+<!doctype html><html dir="ltr" lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=5"/><title>Image Comparison Slider - React, Vue, Angular</title><meta name="description" content="Lightweight, accessible, and mobile-friendly slider component that allows users to compare two images. It is compatible with React, Vue and Angular."><style>x-ray{display:block;margin-bottom:1rem}</style><link rel="icon" href="favicon.ico"><meta property="og:type" content="website"/><meta property="og:title" content="Image Comparison Slider - React, Vue, Angular"/><meta property="og:description" content="Lightweight, accessible, and mobile-friendly slider component."/><meta property="og:url" content="https://img-comparison-slider.sneas.io"/><meta property="og:image" content="https://img-comparison-slider.sneas.io/social-preview.png"/><link href="css/main.71f732f6.css" rel="stylesheet"><script src="js/xray.bf2974cc.js" defer="defer"></script><script src="js/index.1.359d1b98.js" defer="defer"></script></head><body><nav class="navbar navbar-expand navbar-light"><div class="container"><a class="navbar-brand" href="/"><img src="images/logo.a516ac1d.svg" class="navbar-brand-image" alt="img-comparison-slider logo"/></a><ul class="navbar-nav ms-auto align-items-center"><li class="nav-item mx-0"><a class="nav-link py-3" href="examples.html">Usage Examples</a></li><li class="nav-item mx-0"><a class="nav-link py-3" href="https://github.com/sneas/img-comparison-slider" aria-label="Project's GitHub Page"><i class="fab fa-github fa-xl"></i><span class="d-none"> GitHub</span></a></li></ul></div></nav><div class="container pt-4 position-relative"><img-comparison-slider class="d-block main-slider" onfocus='if(window.hasKeyboardBeenUsed=!1,window.session=window.session??1,2===window.session)document.getElementById("message").classList.add("d-none"),document.getElementById("second-message").classList.remove("d-none");else document.getElementById("message").classList.remove("d-none"),document.getElementById("second-message").classList.add("d-none")' onkeyup='if(!["ArrowLeft","ArrowRight"].includes(event.code))return;if(window.hasKeyboardBeenUsed=!0,2===window.session)document.getElementById("message").classList.add("opacity-0"),document.getElementById("second-message").classList.remove("opacity-0");else document.getElementById("message").classList.remove("opacity-0"),document.getElementById("second-message").classList.add("opacity-0")' onblur='!0===window.hasKeyboardBeenUsed&&window.session++,document.getElementById("message").classList.add("opacity-0"),document.getElementById("second-message").classList.add("opacity-0")'><div slot="first"><img src="images/first.b4046e00.svg" width="100%" alt="First image example"/><div class="position-absolute" style="left:1%;top:60%"><div class="fs-md-5 fs-lg-3 fs-xl-2 fs-xxl-1 mb-1">Compare two images. Before and after.</div><div data-nosnippet class="fs-md-5 fs-lg-3 fs-xl-2 fs-xxl-1 mb-1 d-none d-md-block show-on-focus text-nowrap">Now try to use <i class="fas fa-caret-left align-middle"></i> or <i class="fas fa-caret-right align-middle"></i> arrows on the keyboard.</div><div data-nosnippet class="fs-md-5 fs-lg-3 fs-xl-2 fs-xxl-1 opacity-0 show-on-focus d-none" id="message">Amazing, isn't it?</div><div data-nosnippet class="fs-md-5 fs-lg-3 fs-xl-2 fs-xxl-1 opacity-0 show-on-focus d-none" id="second-message">Your <a href="https://github.com/sneas/img-comparison-slider" target="_blank" class="text-decoration-none" onmousedown="event.stopPropagation()"><i class="fab fa-github fa-sm align-middle"></i> star</a> will make a big difference for this project.</div></div></div><div slot="second"><img src="images/second.93ae2554.svg" width="100%" alt="Second image example"/></div></img-comparison-slider></div><div class="bg-warning py-5"><div class="container"><div class="row gx-0 gx-md-5"><div class="col-12 col-md-6">This <a href="https://github.com/sneas/img-comparison-slider/blob/master/LICENSE">free open source</a> slider component was created to demonstrate the difference between two images. For example, to show the difference before and after applying photo effects or filters, to compare photos of rooms before and after construction, or to show landscape changes over time. The component is well suited for news portals, artists, or design portfolios.</div><div class="col-12 col-md-6 mt-3 mt-md-0">Because it is a <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components">web component</a>, it is compatible with almost any JS framework, web application, or design system. In addition, this component offers a wide range of settings - the <a href="/examples.html">examples</a> section provides many ideas and styling techniques. The setup and settings documentation is available on the <a href="https://github.com/sneas/img-comparison-slider">component's GitHub page</a>.</div></div></div></div><div class="container pt-5 pb-0 pb-md-5"><h2 class="h1 mb-5">Features</h2><ul class="row align-items-start list-unstyled g-0"><li class="col-6 col-xl-4 mb-5 text-center row justify-content-center g-3"><div class="col-8"><img src="images/mobile-friendly.22aec8f8.svg" class="w-100" alt="Mobile-friendly"/></div><div class="col-12 lead"><strong>Mobile-friendly</strong></div></li><li class="col-6 col-xl-4 mb-5 text-center row justify-content-center g-3"><div class="col-8"><img src="images/accessible.1330e75b.svg" class="w-100" alt="Accessible"/></div><div class="col-12 lead"><strong>Accessible</strong></div></li><li class="col-6 col-xl-4 mb-5 text-center row justify-content-center g-3"><div class="col-8"><img src="images/responsive.5e14bd71.svg" class="w-100" alt="Responsive"/></div><div class="col-12 lead"><strong>Responsive</strong></div></li><li class="col-6 col-xl-4 mb-5 text-center row justify-content-center g-3"><div class="col-8"><img src="images/compact.9116300d.svg" class="w-100" alt="Compact"/></div><div class="col-12 lead"><strong>Compact</strong></div></li><li class="col-6 col-xl-4 mb-5 text-center row justify-content-center g-3"><div class="col-8"><img src="images/adjustable.72f16042.svg" class="w-100" alt="Adjustable"/></div><div class="col-12 lead"><strong>Adjustable</strong></div></li><li class="col-6 col-xl-4 mb-5 text-center row justify-content-center g-3"><div class="col-8"><img src="images/js.38f5c51e.svg" class="w-100" alt="Supports modern JS frameworks"/></div><div class="col-12 lead"><strong>Supports modern JS frameworks</strong></div></li></ul></div><div class="pb-5 pt-0 mt-md-5"><div class="container"><div class="h1 mb-5">What it looks like on default / <a href="/examples.html#always-show" style="text-decoration-thickness:2px">See more examples</a></div><img-comparison-slider class="d-block"><img slot="first" src="images/morning.372b13bb.webp" width="100%" alt="First image example"/> <img slot="second" src="images/morning-blurred.1d21249b.webp" width="100%" alt="Second image example"/></img-comparison-slider></div></div><footer class="footer py-5 bg-warning"><div class="container">&copy; 2019 – Made with love and care by <a href="mailto:[email protected]" class="text-decoration-none">sneas</a> <a href="https://github.com/sneas" target="_blank" class="ms-2"><i class="fab fa-github fa-2xl"></i></a> <a href="https://twitter.com/sneasio" target="_blank" class="ms-2"><i class="fab fa-x-twitter fa-2xl"></i></a> <a href="https://linkedin.com/in/sneas" target="_blank" class="ms-2"><i class="fab fa-linkedin fa-2xl"></i></a>.</div></footer><script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/js/all.min.js" integrity="sha512-uKQ39gEGiyUJl4AI6L+ekBdGKpGw4xJ55+xyJG7YFlJokPNYegn9KwQ3P8A7aFQAUtUsAQHep+d/lrGqrbPIDQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script></body></html>