كود Shopify (Custom liquid) — حصيف تيوب

هذه صفحة للنسخ. افتحها، اضغط Copy وخذي الكود كامل والصقيه في Custom liquid.

<section class="ht-tv" aria-label="تلفاز الحصيف تيوب" data-ht-tv>
  <div class="ht-inner">
    <div class="ht-screen" data-ht-screen>
      <video
        data-ht-player
        playsinline
        muted
        preload="metadata"
        controls
      ></video>
    </div>
  </div>

<button class="ht-nav ht-nav--prev" type="button" data-ht-prev aria-label="السابق"></button>
  <button class="ht-nav ht-nav--next" type="button" data-ht-next aria-label="التالي"></button>

<div class="ht-pill" aria-hidden="true"></div>
</section>

width: min(520px, 92vw);
    margin: 0 auto;
    border-radius: 28px;
    border: 3px solid var(--wood-edge);
    background:
      radial-gradient(900px 420px at 18% 14%, rgba(255,220,150,.10), rgba(255,220,150,0) 58%),
      linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.28)),
      linear-gradient(135deg, var(--wood-2), var(--wood-1) 55%, var(--wood-3));
    padding: 18px 16px 22px;
    position: relative;
    box-shadow: 0 42px 110px rgba(0,0,0,.33), 0 16px 26px rgba(0,0,0,.22);
  }

.ht-tv::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius: 28px;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.12),
      inset 0 -24px 36px rgba(0,0,0,.26),
      inset 0 0 0 1px rgba(0,0,0,.10);
    pointer-events:none;
  }

.ht-tv::after{
    content:"";
    position:absolute;
    left: 9%;
    right: 9%;
    bottom: -14px;
    height: 20px;
    border-radius: 999px;
    background: rgba(0,0,0,.30);
    filter: blur(16px);
    opacity: .32;
    pointer-events:none;
  }

.ht-inner{
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.24)), var(--bezel);
    border-radius: 18px;
    padding: 9px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), inset 0 30px 64px rgba(0,0,0,.58);
  }

.ht-screen{
    width:100%;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    overflow:hidden;
    background: var(--screen);
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 0 0 10px rgba(0,0,0,.20);
  }

.ht-screen video{
    width:100%;
    height:100%;
    display:block;
    object-fit: cover;
    background:#000;
  }

.ht-screen::after{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(820px 420px at 20% 14%, rgba(255,255,255,.08), rgba(255,255,255,0) 60%),
      linear-gradient(180deg, rgba(255,255,255,.020), rgba(255,255,255,0) 45%);
    opacity:.16;
    pointer-events:none;
    mix-blend-mode: screen;
  }

.ht-screen::before{
    content:"";
    position:absolute;
    inset:0;
    background:#000;
    opacity:0;
    pointer-events:none;
    transition: opacity 140ms ease;
  }
  .ht-screen.is-switching::before{ opacity:.18; }

.ht-pill{
    margin: 12px auto 0;
    width: 82%;
    min-height: 30px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.26)), rgba(0,0,0,.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -12px 20px rgba(0,0,0,.24);
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 6px 12px;
  }

.ht-nav{
    position:absolute;
    bottom: 20px;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,.34);
    background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.22)), rgba(0,0,0,.14);
    box-shadow:
      inset 0 4px 7px rgba(0,0,0,.58),
      inset 0 -1px 0 rgba(255,255,255,.04),
      inset 0 0 0 1px rgba(0,0,0,.28);
    cursor:pointer;
    padding:0;
    display:grid;
    place-items:center;
    -webkit-tap-highlight-color: transparent;
    transition: transform 90ms ease, box-shadow 120ms ease, filter 120ms ease;
  }
  .ht-nav--prev{ left: 30px; }
  .ht-nav--next{ right: 30px; }

.ht-nav::before{
    content:"";
    width:0;
    height:0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    opacity:.55;
    filter: drop-shadow(0 1px 0 rgba(0,0,0,.55)) drop-shadow(0 -1px 0 rgba(255,255,255,.10));
  }
  .ht-nav--prev::before{ border-right: 8px solid rgba(255,255,255,.42); transform: translateX(-1px); }
  .ht-nav--next::before{ border-left: 8px solid rgba(255,255,255,.42); transform: translateX(1px); }

.ht-nav:active,
  .ht-nav.is-pressed{
    transform: translateY(1px) scale(.985);
    box-shadow:
      inset 0 6px 10px rgba(0,0,0,.68),
      inset 0 -1px 0 rgba(255,255,255,.03),
      inset 0 0 0 1px rgba(0,0,0,.32);
    filter: brightness(.97);
  }
</style>

var screen = root.querySelector('[data-ht-screen]');
    var player = root.querySelector('[data-ht-player]');
    var prev = root.querySelector('[data-ht-prev]');
    var next = root.querySelector('[data-ht-next]');
    if (!screen || !player || !prev || !next) return;

var videos = [
      "PASTE_MP4_LINK_1",
      "PASTE_MP4_LINK_2",
      "PASTE_MP4_LINK_3"
    ];

var AUTOPLAY = true;
    var idx = 0;

function pressFx(btn) {
      btn.classList.add('is-pressed');
      window.setTimeout(function () { btn.classList.remove('is-pressed'); }, 120);
    }

function applyVideo(url) {
      player.pause();
      player.src = url;
      player.load();
      if (AUTOPLAY) player.play().catch(function () {});
    }

function setVideo(newIdx) {
      if (!videos.length) return;

if (newIdx < 0) newIdx = videos.length - 1;
      if (newIdx >= videos.length) newIdx = 0;
      idx = newIdx;

screen.classList.add('is-switching');
      window.setTimeout(function () {
        applyVideo(videos[idx]);
        window.setTimeout(function () {
          screen.classList.remove('is-switching');
        }, 160);
      }, 90);
    }

setVideo(0);

prev.addEventListener('click', function () {
      pressFx(prev);
      setVideo(idx - 1);
    });

next.addEventListener('click', function () {
      pressFx(next);
      setVideo(idx + 1);
    });
  })();
</script>