<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<meta name="theme-color" content="#050505">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>Hacker Prank Demo</title>

<style>
*{box-sizing:border-box}

html,body{
  margin:0;
  width:100%;
  height:100%;
}

body{
  background:#030303;
  color:#ff3333;
  font-family:monospace;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 3px,
    rgba(255,0,0,.035) 4px
  );
}

.app{
  width:94%;
  max-width:720px;
  padding:25px;
  text-align:center;
  border:1px solid #a00;
  background:#070707;
  box-shadow:0 0 35px #700;
}

.warning{
  color:#ff2222;
  font-size:clamp(25px,7vw,52px);
  animation:glitch .5s infinite;
}

#count{
  font-size:80px;
  font-weight:bold;
  text-shadow:0 0 20px red;
  margin:12px;
}

.progress{
  height:8px;
  background:#211;
  margin:15px 0;
  overflow:hidden;
}

#bar{
  height:100%;
  width:100%;
  background:#e22;
  transition:width .7s linear;
}

#log{
  height:180px;
  overflow:hidden;
  direction:ltr;
  text-align:left;
  padding:12px;
  border:1px solid #411;
  background:#000;
  color:#ff7777;
  font-size:13px;
}

.fake-data{
  text-align:left;
  direction:ltr;
  color:#777;
  margin-top:12px;
  font-size:12px;
}

.final{
  display:none;
  color:#fff;
}

.final h2{
  color:#ff2222;
  font-size:clamp(25px,7vw,45px);
  text-shadow:0 0 15px red;
}

.fake-access{
  color:#ff7777;
  line-height:2;
}

.joke{
  border:1px solid #555;
  padding:15px;
  margin-top:20px;
}

button{
  margin-top:18px;
  padding:13px 25px;
  border:0;
  border-radius:8px;
  background:#d11;
  color:#fff;
  font-weight:bold;
  font-family:inherit;
}

@keyframes glitch{
  0%,100%{transform:translate(0)}
  20%{transform:translate(2px,-1px)}
  40%{transform:translate(-2px,1px)}
  60%{transform:translate(1px,2px)}
  80%{transform:translate(-1px,-2px)}
}
</style>
</head>

<body>

<div class="app">

<section id="demo">

<h1 class="warning">⚠️ SYSTEM ALERT ⚠️</h1>

<p>در حال اجرای شبیه‌سازی امنیتی...</p>

<div id="count">10</div>

<div class="progress">
  <div id="bar"></div>
</div>

<div id="log"></div>

<div class="fake-data">
PACKET: 0x7A91<br>
NODE: DEMO-LOCAL<br>
STATUS: SIMULATION
</div>

</section>

<section class="final" id="final">

<h2>🚨 دسترسی کامل گرفته شد 🚨</h2>

<div class="fake-access">

<p>📤 تمام اطلاعات در حال ارسال به سرور مرکزی...</p>

<p>
📍 موقعیت مکانی: ارسال شد<br>
📸 دوربین: فعال<br>
🎤 میکروفون: فعال
</p>

<p>👑 طاها عبدلی | هکر برتر 👑</p>

</div>

<div class="joke">
>

</div>

<button onclick="location.reload()">
اجرای دوباره
</button>

</section>

</div>

<script>
const messages = [
  "دوربین فعال شد",
  "موقعیت مکانی ارسال شد",
  "دسترسی ریشه به دست آمد",
  "در حال بررسی داده‌ها...",
  "اتصال به سرور مرکزی...",
  "رمزنگاری نمایشی فعال شد",
  "در حال اسکن سیستم...",
  "بررسی فایل‌های نمایشی...",
  "ایجاد اتصال نمایشی...",
  "تکمیل فرآیند..."
];

let count = 10;
let index = 0;

const countEl = document.getElementById("count");
const logEl = document.getElementById("log");
const barEl = document.getElementById("bar");

const timer = setInterval(() => {

  count--;

  countEl.textContent = count;

  barEl.style.width = (count * 10) + "%";

  const line = document.createElement("div");

  line.textContent =
    `[${String(index + 1).padStart(4,"0")}] ` +
    messages[index % messages.length];

  logEl.appendChild(line);
  logEl.scrollTop = logEl.scrollHeight;

  index++;

  if(count <= 0){

    clearInterval(timer);

    document.getElementById("demo").style.display = "none";
    document.getElementById("final").style.display = "block";

  }

},700);
</script>

</body>
</html>