nimrodkerrett
/
eye-of-beholder


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
							<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Eye of Beholder</title>
  <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link rel="icon" href="/static/gfx/eye-horus.png">
</head>
<body data-bs-theme="dark">
  <div class="container-fluid text-center">
    <div class="row">
      <div class="col12">
        <video id="the-video" style="height:100vh; margin:0 auto" class="object-fit-contain" muted autoplay loop>
          <source src="/static/video/hossam-shabat-bg-effect.mp4"/>
        </video>
      </div>
    </div>
    <div class="row">
      <div class="col12">
        <div id="the-ticker" class="marquee alert alert-warning h2 fw-bolder w100 opacity-50 text-nowrap" role="alert" style="direction:rtl; position:fixed; left:0; bottom:2rem; z-index:23">
          <h2 id="ticker-text" class="fw-bolder bg-danger text-white my-2 p-4">
          </h2>
        </div>
      </div>
    </div>
  </div>
  <script src="/static/js/config.js"></script>
  <script src="/static/js/jquery-3.7.1.min.js"></script>
  <script src="/static/js/jquery.marquee.min.js"></script>
  <script src="/static/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script>
  function setTicker(ticker_text) {
    $(".marquee").marquee("destroy");
    $(".marquee").text(ticker_text);
    $(".marquee").marquee({
      "direction": "right",
      "duplicated": true,
      "speed": 69
    });
  }
  $(()=> {
    setTicker(
"חוסל מחבל חמאס שעבד עם \"אל-ג'זירה\" • ברצועה מדווחים על הרוגים בתקיפות במחנה נוסיראת ובדרום חאן יונס • בין ההרוגים - כתב \"פלשתין אל יום\" וכתב \"אל-ג'זירה\" חוסאם שבאת • צה\"ל חשף כי לפי מידע מודיעיני, חוסאם שבאת הוא מחבל בגדוד בית חאנון של ארגון הטרור חמאס • שחר קליימן, ישראל היום, 24/2/25"
    );
  });
  async function getDistance() {
    try {
      let response = await fetch("/d");
      let data = await response.json();
      return data.distance;
    } catch {
      return 0;
    }
  };
  async function updateDistance() {
    var dist = await getDistance();
    var vidblur = 0, tickerblur = 8;
    if (dist>MIN_DIST && dist<MAX_DIST) {
      vidblur = parseInt((MAX_DIST-dist)/VID_BLUR_FACTOR);
      tickerblur = parseInt(dist/TICKER_BLUR_FACTOR);
    }
    if (dist<2*MIN_DIST) {
      tickerblur = 0;
    }
    // console.log(`${vidblur}, ${tickerblur}`);
    document.getElementById("the-video").style.filter=`blur(${vidblur}px)`;
    document.getElementById("the-ticker").style.filter=`blur(${tickerblur}px)`;
  }
  window.update_interval = setInterval(updateDistance, 200);
  </script>
</body>
</html>