KOKINIO - MANAGER

Edit File: index.html

<!doctype html>  
<html>  
<head>  
<meta charset="utf-8">  
<meta name="viewport" content="width=device-width,initial-scale=1">  
  
<style>  
  body{  
    margin:0;  
    height:100vh;  
    background:url("https://dl.dropboxusercontent.com/scl/fi/60wbjjrw6dbbl40amg5p0/20251205_221110.jpg?rlkey=wraa4dwn8n6e72r4ekus8rbr8&st=i2te7a2p") center/cover no-repeat fixed;  
    display:flex;  
    flex-direction:column;  
    justify-content:center;  
    align-items:center;  
    gap:14px;  
    position:relative;  
    overflow:hidden;  
    filter:contrast(1.3) brightness(1.05) saturate(1.2);  
  }  
  
  /* scanline */  
  body::before{  
    content:"";  
    position:absolute;  
    inset:0;  
    background:repeating-linear-gradient(  
      to bottom,  
      rgba(255,255,255,0.04) 0px,  
      rgba(255,255,255,0.04) 2px,  
      transparent 4px  
    );  
    mix-blend-mode:overlay;  
    pointer-events:none;  
    animation:scan 4s linear infinite;  
  }  
  
  @keyframes scan{  
    0%{ transform:translateY(-100%); }  
    100%{ transform:translateY(100%); }  
  }  
  
  /* static noise overlay */  
  body::after{  
    content:"";  
    position:absolute;  
    inset:0;  
    background:url("https://i.imgur.com/8QfK4eL.png");  
    opacity:0.08;  
    mix-blend-mode:screen;  
    pointer-events:none;  
    animation:noiseMove 0.2s steps(2) infinite;
  }

@keyframes noiseMove {
    0%{ transform:translate(0,0); }
    50%{ transform:translate(-3px,2px); }
    100%{ transform:translate(2px,-3px); }
  }

.wrap{  
    display:flex;  
    gap:12px;  
    z-index:3;  
  }  
  
  .img-left,  
  .img-right{  
    width:160px;  
    filter:contrast(1.2);  
  }  
  
  audio{  
    width:240px;  
    z-index:3;  
  }  
  
  /* gambar jumpscare */  
  .scary{  
    position:absolute;  
    top:50%;  
    left:50%;  
    transform:translate(-50%, -50%);  
    width:260px;  
    opacity:0;  
    pointer-events:none;  
    z-index:10;  
    transition:opacity 0.05s;  
    filter:contrast(1.4) brightness(0.9);  
  }

/* efek RGB split glitch */
  .rgbGlitch{
    animation: rgbSplit 0.18s steps(2) infinite;
  }

@keyframes rgbSplit {
    0%{
      filter: drop-shadow(-3px 0 red) drop-shadow(3px 0 cyan);
    }
    50%{
      filter: drop-shadow(4px 0 red) drop-shadow(-4px 0 blue);
    }
    100%{
      filter: drop-shadow(-2px 0 red) drop-shadow(2px 0 cyan);
    }
  }

/* efek layar split horizontal */
  .screenSplit::before,
  .screenSplit::after{
    content:"";
    position:absolute;
    left:0;
    width:100%;
    height:50%;
    background:inherit;
    background-attachment:fixed;
    background-size:cover;
    animation:splitGlitch 0.15s steps(2) infinite;
    pointer-events:none;
    z-index:20;
  }

.screenSplit::before{
    top:0;
    clip-path:inset(0 0 50% 0);
  }

.screenSplit::after{
    bottom:0;
    clip-path:inset(50% 0 0 0);
  }

@keyframes splitGlitch {
    0%{ transform:translateY(0); }
    50%{ transform:translateY(-6px); }
    100%{ transform:translateY(4px); }
  }

</style>  
  
</head>  
<body>  
  
<div class="wrap">  
  <img src="https://dl.dropboxusercontent.com/scl/fi/7tdiiubznditjxk42396m/20251205_132801.png?rlkey=kjg6gcnb0mv3hy17k6pwu4i7a&st=u2e8y0dg" class="img-left">  
  <img src="https://dl.dropboxusercontent.com/scl/fi/0rvo12wilckw6hd7jenbj/IMG-20251205-WA0353.jpg?rlkey=x8lurnwjid8n7feswmv1fmkvp&st=dg6ip2fr" class="img-right">  
</div>  
  
<audio controls>  
  <source src="https://dl.dropboxusercontent.com/scl/fi/vclv3tkml92h0i8xamgr8/AUD-20251205-WA0402.mp3?rlkey=yimiq46ahdx1u1cnzio3h83ns&st=pp7tol3i" type="audio/mp3">  
</audio>  
  
<img class="scary" src="https://dl.dropboxusercontent.com/scl/fi/uu4rriro7x7ulzvk5j3dj/9ebb94533b7c37f31e3c39e6dfb6a2e9.jpg?rlkey=gta9hit4iyo932vovpburep0i&st=yxndt3vw">  
  
<script>  
  const img = document.querySelector('.scary');  
  const body = document.body;

function flashScary() {  
    img.classList.add("rgbGlitch");
    body.classList.add("screenSplit");

img.style.opacity = "1";

setTimeout(() => {  
      img.style.opacity = "0";  
      img.classList.remove("rgbGlitch");
      body.classList.remove("screenSplit");
    }, 150);  
  }  
  
  // window 9 detik (wajib 1 jumpscare)  
  function startWindow() {  
    const randomTime = Math.random() * 9000;  
    setTimeout(() => {  
      flashScary();  
    }, randomTime);  
    setTimeout(startWindow, 9000);  
  }  
  
  startWindow();  
</script>  
  
</body>  
</html>