function addScript(script_url) {
  var script = document.createElement('script');
  script.setAttribute('src', script_url)
  document.body.appendChild(script);
}
function addCSSLink(link_url) {
  var link = document.createElement('link');
  link.setAttribute('rel', 'stylesheet');
  link.setAttribute('href', link_url)
  document.head.appendChild(link);
}
addScript('https://cdn.jsdelivr.net/npm/img-comparison-slider@8/dist/index.js');
addCSSLink('https://cdn.jsdelivr.net/npm/img-comparison-slider@8/dist/styles.css');
window.addEventListener("load", ()=>{

  let target = document.querySelector(".s-block.s-block--splitter");
  let newEl = document.createElement("div");
  target.append(newEl)
  newEl.innerHTML = `
  <div class="dan-comparation">
  <h1>حناء رغد تصنع الفرق</h1>
  <p>اسحبي واكتشفي الفرق</p>
<a href="https://drive.google.com/file/d/1_6WE7wj78klxCZMXkwIz1wFMvF7B30R4/view?usp=drivesdk" class="btn group bg-primary text-primary-reverse h-12 !px-6 mt-8 gap-2 !rounded-none ">
<span>اكتشفِ المزيد من التجارب</span>
<i class="sicon-keyboard_arrow_left text-xl rtl:group-hover:-translate-x-2 ltr:group-hover:translate-x-2 transition-transform duration-300"></i>
</a>
  <img-comparison-slider>
  <figure slot="first" class="before">
    <img width="100%" src="https://i.postimg.cc/Rh6jwTKL/temp-Image9-MGpaa.avif">
    <figcaption>قبل</figcaption>
  </figure>
  <figure slot="second" class="after">
    <img width="100%" src="https://i.postimg.cc/0NZRvj9D/temp-Image-SLfizx.avif">
    <figcaption>بعد</figcaption>
  </figure>
  <div/>
  
  
    `;
  target.after(newEl);
}
);