nimrodkerrett
/
eye-of-beholder


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
							<!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-danger text-white h2 fw-bolder w100 opacity-50 text-nowrap" role="alert" style="direction:rtl; position:fixed; left:0; bottom:4rem; z-index:23">
          חוסל מחבל חמאס שעבד עם "אל-ג'זירה" • ברצועה מדווחים על הרוגים בתקיפות במחנה נוסיראת ובדרום חאן יונס • בין ההרוגים - כתב "פלשתין אל יום" וכתב "אל-ג'זירה" חוסאם שבאת • צה"ל חשף כי לפי מידע מודיעיני, חוסאם שבאת הוא מחבל בגדוד בית חאנון של ארגון הטרור חמאס • שחר קליימן, ישראל היום, 24/2/25
        </div>
      </div>
    </div>
  </div>
  <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>
  $(()=> {
    $(".marquee").marquee({
      "direction": "right",
      "duplicated": true,
      "speed": 69
    });
  });
  async function getDistance() {
    try {
      let response = await fetch("/d");
      let data = await response.json();
      return data.distance;
    } catch {
      return 0;
    }
  };
  const MAX_DIST = 2000;
  const MIN_DIST = 300;
  const VID_BLUR_FACTOR = MAX_DIST/16.0; // float
  const TICKER_BLUR_FACTOR = MAX_DIST/32.0; // float
  async function updateDistance() {
    var dist = await getDistance();
    var vidblur = 0; tickerblur = 0;
    if (dist>MIN_DIST && dist<MAX_DIST) {
      vidblur = parseInt((MAX_DIST-dist)/VID_BLUR_FACTOR);
      tickerblur = parseInt(dist/TICKER_BLUR_FACTOR);
    }
    //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>