<!-- 
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⣤⠶⠖⢛⣻⡿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⡔⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⣶⣋⣩⣤⠶⠾⣿⡁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣀⣴⣿⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠉⠉⣠⣴⣾⣿⣿⣿⣷⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣴⣿⣿⣿⣿⣿⣷⣤⣀⣀⡤⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣾⣿⣿⣿⣿⣿⣿⣿⣿⣧⠀⠀⠀⠀⢀⣠⣴⣶⡇⠀⣼⣿⣿⣿⣿⣿⣿⣿⣿⣿⡏⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡆⠀⣠⣶⣿⣿⣿⣿⠃⣸⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣾⣿⣿⣿⣿⣿⠃⢠⣿⣿⣿⠿⣿⣿⣿⣿⣿⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣿⣿⣿⣿⡿⣫⣷⣾⣿⣿⣿⣿⣿⣿⣿⡏⠀⢠⣿⣿⣿⣿⣿⣿⣯⡻⣿⣿⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣿⣿⣿⣿⣫⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⡟⠀⠀⣼⣿⣿⣿⣿⣿⣿⣿⣿⣞⣿⣿⣿⣿⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢪⣿⣿⢟⣽⣿⣿⡿⣫⣽⣿⣿⣿⣿⣿⡟⠀⠀⢠⣿⣿⣿⣿⣿⣿⣯⡻⣿⣿⣷⣝⠿⣿⣏⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢹⣫⣶⣿⣿⡿⣫⣾⣿⣿⣿⣿⣿⣿⣿⡁⡀⢠⣀⣿⣿⣿⣿⣿⣿⣿⣿⣮⡻⣿⣿⣷⣮⣃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣠⣤⣶⣿⣿⡿⠟⢭⣾⡿⣻⣿⣿⣿⣿⣿⣿⣿⡟⠁⠀⢹⣿⣿⣿⣿⣿⣿⣿⣯⣻⠿⠮⠙⠿⣿⣿⣿⣶⣤⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⣀⣤⣶⣿⡿⠿⠿⠿⢛⠋⠀⠀⠀⠐⣿⣿⣿⣿⣿⣿⣿⣿⣿⠃⠀⠀⢈⣿⣿⣿⣿⣿⣿⣿⣿⡿⠃⠀⠀⣀⣈⣙⣛⣛⣻⠿⠿⢿⣶⣤⣀⠀⠀⠀⠀
⠀⠀⢀⣴⣿⠟⠉⠀⣰⣾⣿⣿⣿⣿⣿⡿⣷⣦⡀⠈⠿⣿⣿⣿⣿⣿⣿⣏⠁⠀⠀⠀⢼⣿⣿⣿⣿⣿⣿⠛⠀⣠⣶⡿⣿⣿⣿⣿⣿⣿⣿⣆⠀⠀⠹⣿⣷⣄⠀⠀
⠀⣴⣿⡿⠋⠀⠀⠀⢿⣿⡿⣿⣿⣿⣿⣿⣮⣟⢿⣦⣴⣿⣿⣿⣿⣿⡏⠃⠀⠀⠀⠀⠘⢸⣿⣿⣿⣿⣿⣷⣾⠟⣫⣾⣿⣿⣿⣿⡿⣟⣿⡿⠀⠀⠀⠈⠻⣿⣧⡀
⢊⢼⠟⠀⠀⠀⠀⠀⠘⢿⣿⣮⣻⣿⣿⣿⣿⣿⣷⣽⣿⣿⣿⣿⣿⣿⡇⠀⠀⠀⠀⠀⠀⢸⣿⣿⣿⣿⣿⣿⣷⣿⣿⣿⣿⣿⣿⢯⣾⣿⡿⠁⠀⠀⠀⠀⠀⠹⠗⠈
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠻⣿⣷⡹⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡇⠀⠀⠀⠀⠀⠀⠸⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⢫⣿⣿⠟⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠹⣿⣷⡝⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⣣⣿⡿⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⢿⣿⣮⡻⣿⣿⣿⣿⣿⣿⣿⡿⠃⠀⠀⠀⠀⠀⠀⠀⠀⣿⡿⣿⣿⣿⣿⣿⣿⡿⣫⣾⣿⠟⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⡟⣿⣿⣶⣽⡛⠛⠛⠛⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⢰⣿⠃⠀⠉⠉⠛⣫⣵⣿⣿⣿⢹⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⡾⣵⣿⣿⡿⣿⡟⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣰⡿⠃⠀⠀⠀⠀⠀⢹⡿⠿⣿⣿⣷⣻⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠐⠚⣛⣼⣿⣿⡟⠂⢸⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣾⠏⠀⠀⠀⠀⠀⠀⠀⠀⡇⠘⠹⣿⣿⣷⣍⣙⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠒⠛⠛⠛⠛⠋⠀⠀⠘⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢾⣇⠀⠀⠀⠀⠀⣀⣠⣤⠴⠗⠚⠛⠛⣯⠉⠉⠉⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠛⠷⠶⠖⠛⠋⠉⠁⣀⠀⢀⣀⣠⡴⠟⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠛⠻⠿⡍⠉⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
  <title>IronCDN — cdntests.site</title>
  <style>
 
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

    :root{
      /* core colors - muted, gritty, hacker-ish */
      --bg:#040404;          /* deeper void */
      --surface:#0b0b0b;     /* almost carbon */
      --border:#1c1c1c;      /* subtle separation */
      --accent:#7c9c4a;      /* dead olive green – no neon */
      --red: #ff3002;          /* rust red */
      --green: #4bbc15;        /* murky green */
      --text: #ffffff;         /* soft terminal white */
      --muted:#4f4f4f;        /* quieter text */
    }

    /* global raw terminal vibe */
    body{
      background:var(--bg);
      color:var(--text);
      font-family:'Courier New', 'Fira Code', 'Cascadia Code', monospace;
      font-size:14px;
      min-height:100vh;
      display:flex;
      flex-direction:column;
      position:relative;
      letter-spacing:-0.01em;
    }

    /* subtle noise & scanline texture – industrial CRT feel */
    body::before{
      content:"";
      position:fixed;
      top:0;
      left:0;
      width:100%;
      height:100%;
      pointer-events:none;
      z-index:999;
      background:repeating-linear-gradient(
        0deg,
        rgba(0,0,0,0.2) 0px,
        rgba(0,0,0,0.2) 1px,
        transparent 1px,
        transparent 2px
      );
      opacity:0.35;
    }
    body::after{
      content:"";
      position:fixed;
      top:0;
      left:0;
      width:100%;
      height:100%;
      pointer-events:none;
      background:radial-gradient(circle at 20% 30%, rgba(30,30,20,0.2) 0%, transparent 70%);
      z-index:998;
    }

    /* raw nav – no gloss */
    nav{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:16px 36px;
      border-bottom:1px solid var(--border);
      background:rgba(4,4,4,0.85);
      backdrop-filter:blur(2px);
    }
    .logo{
      font-size:1rem;
      font-weight:600;
      color:#bababa;
      letter-spacing:-0.5px;
      text-transform:uppercase;
    }
    .logo span{
      color:var(--accent);
      background:transparent;
      font-weight:700;
    }
    .nav-right{
      display:flex;
      align-items:center;
      gap:10px;
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:5px;
      background:var(--surface);
      border:1px solid #232323;
      border-radius:0px;
      padding:4px 10px;
      font-size:.7rem;
      color:var(--muted);
      font-family:monospace;
      text-transform:uppercase;
    }
    .badge-dot{
      width:6px;
      height:6px;
      border-radius:0px;
      background:var(--green);
      box-shadow:none;
      animation:pulse 2.5s infinite;
    }
    @keyframes pulse{
      0%,100%{opacity:0.7;}
      50%{opacity:0.3;}
    }
    .domain-tag{
      font-size:.7rem;
      color:#7a7a7a;
      background:var(--surface);
      border:1px solid #232323;
      border-radius:0px;
      padding:4px 9px;
      font-family:monospace;
    }
    .upd-tag{
      font-size:.65rem;
      color:var(--muted);
      font-family:monospace;
      letter-spacing:-0.2px;
    }

    main{
      flex:1;
      padding:28px 36px 36px;
    }

    /* summary cards – raw data blocks */
    .summary{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      margin-bottom:20px;
    }
    .scard{
      background:var(--surface);
      border:1px solid #1f1f1f;
      border-radius:3px;
      padding:14px 18px;
      flex:1;
      min-width:140px;
      box-shadow:none;
      transition:border 0.1s ease;
    }
    .scard:hover{
      border-color:#3a3a3a;
    }
    .scard-label{
      font-size:.65rem;
      text-transform:uppercase;
      letter-spacing:0.08em;
      color: #e3e2e2;
      margin-bottom:6px;
      font-weight:500;
    }
    .scard-val{
      font-size:1.9rem;
      font-weight:700;
      letter-spacing:-1px;
      color:#dedede;
      font-family:'Courier New', monospace;
      line-height:1;
    }
    .scard-val.red{ color:var(--red); }
    .scard-val.green{ color:var(--green); }
    .scard-val.yellow{ color:var(--accent); }
    .scard-sub{
      font-size:.65rem;
      color: #7c9c4a;
      margin-top:6px;
      font-family:monospace;
    }

    /* chart container – terminal block */
    .chart-wrap{
      background:var(--surface);
      border:1px solid #202020;
      border-radius:2px;
      padding:20px 20px 14px;
      box-shadow:none;
    }
    .chart-header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      margin-bottom:18px;
      flex-wrap:wrap;
      gap:8px;
    }
    .chart-title{
      font-size:.8rem;
      font-weight:600;
      color:#b0b0b0;
      text-transform:uppercase;
      letter-spacing:0.5px;
    }
    .chart-legend{
      display:flex;
      gap:14px;
    }
    .leg{
      display:flex;
      align-items:center;
      gap:5px;
      font-size:.7rem;
      color:#6f6f6f;
      font-family:monospace;
    }
    .leg-line{
      width:18px;
      height:2px;
      background:currentColor;
    }
    /* canvas look – raw & dark */
    canvas{
      display:block;
      width:100%!important;
      cursor:crosshair;
      background:#050505;
      filter:contrast(1.02);
      border:1px solid #1a1a1a;
      margin-top:6px;
    }
    .x-labels{
      display:flex;
      justify-content:space-between;
      margin-top:8px;
      padding:0 4px;
    }
    .x-labels span{
      font-size:.6rem;
      color:#5c5c5c;
      font-family:monospace;
    }

    /* Hero section – underground manifesto */
    .hero{
      text-align:center;
      padding:36px 0 28px;
      position:relative;
    }
    .hero h1{
      font-size:clamp(1.8rem,4vw,2.8rem);
      font-weight:800;
      letter-spacing:-1.5px;
      color:#cfcfcf;
      margin-bottom:12px;
      font-family:'Courier New', monospace;
      text-transform:uppercase;
    }
    .hero .hl{
      color:var(--accent);
      background:transparent;
      font-weight:900;
    }
    .hero p{
      font-size:.85rem;
      color:#6e6e6e;
      max-width:520px;
      margin:0 auto;
      line-height:1.65;
      font-family:monospace;
      border-left:1px solid #2a2a2a;
      border-right:1px solid #2a2a2a;
      padding:0 12px;
      display:inline-block;
    }
    .hero p strong{
      color:#b3b3b3;
      font-weight:600;
    }

    /* Tooltip – like a system message */
    #tooltip{
      position:fixed;
      pointer-events:none;
      opacity:0;
      transition:opacity 0.1s linear;
      background:#0a0a0a;
      border:1px solid #2b2b2b;
      border-radius:0px;
      padding:9px 12px;
      font-size:.7rem;
      color:#e0e0e0;
      font-family:'Courier New', monospace;
      box-shadow:4px 4px 0 rgba(0,0,0,0.4);
      z-index:100;
      min-width:140px;
    }
    #tooltip .tt-time{
      color:#757575;
      margin-bottom:5px;
      font-size:.65rem;
      border-bottom:1px dotted #2a2a2a;
      padding-bottom:3px;
    }
    #tooltip .tt-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-top:5px;
    }
    #tooltip .tt-dot{
      width:5px;
      height:5px;
      background:currentColor;
      flex-shrink:0;
    }
    #tooltip .tt-val{
      font-weight:700;
      font-family:monospace;
      color:#d4d4d4;
    }

    /* footer – raw status line */
    footer{
      padding:14px 36px;
      border-top:1px solid #1c1c1c;
      display:flex;
      align-items:center;
      justify-content:space-between;
      font-size:.68rem;
      color:#585858;
      font-family:monospace;
      background:rgba(4,4,4,0.6);
    }

    /* custom selection – hacker highlight */
    ::selection{
      background:var(--accent);
      color:#000;
    }

    /* scrollbar – no frills, just function */
    ::-webkit-scrollbar{
      width:6px;
      height:6px;
    }
    ::-webkit-scrollbar-track{
      background:#0b0b0b;
    }
    ::-webkit-scrollbar-thumb{
      background:#2f2f2f;
      border-radius:0px;
    }
    ::-webkit-scrollbar-thumb:hover{
      background:#4a4a4a;
    }

    @media(max-width:600px){
      nav,main,footer{
        padding-left:14px;
        padding-right:14px;
      }
      .scard-val{
        font-size:1.5rem;
      }
      .hero h1{
        letter-spacing:-1px;
      }
    }
  </style>
</head>
<body>

<nav>
  <div class="logo">Iron<span>CDN</span></div>
  <div class="nav-right">
    <span class="domain-tag">cdntests.site</span>
    <div class="badge"><span class="badge-dot"></span>Live</div>
    <span class="upd-tag" id="updTag">—</span>
  </div>
</nav>

<main>
  <!-- Hero -->
  <div class="hero">
    <h1>try <span class="hl">Down me.</span></h1>
    <p>Come at me. I bet you can’t even touch <strong>cdntests.site.</strong>. You can see your trash requests below. Data refreshes every 2 minutes.</p>
  </div>

  <div class="summary">
    <div class="scard">
      <div class="scard-label">Total Requests</div>
      <div class="scard-val yellow" id="sTotal">—</div>
      <div class="scard-sub">last 60 min</div>
    </div>
    <div class="scard">
      <div class="scard-label">Allowed</div>
      <div class="scard-val green" id="sAllowed">—</div>
      <div class="scard-sub">passed to origin</div>
    </div>
    <div class="scard">
      <div class="scard-label">Blocked</div>
      <div class="scard-val red" id="sBlocked">—</div>
      <div class="scard-sub">DDoS / WAF</div>
    </div>
    <div class="scard">
      <div class="scard-label">Block Rate</div>
      <div class="scard-val" id="sRate">—</div>
      <div class="scard-sub">of all traffic</div>
    </div>
  </div>

  <div class="chart-wrap">
    <div class="chart-header">
      <span class="chart-title">Requests &amp; Blocked — per minute</span>
      <div class="chart-legend">
        <div class="leg"><span class="leg-line" style="background:var(--accent)"></span>Requests</div>
        <div class="leg"><span class="leg-line" style="background:var(--red)"></span>Blocked</div>
      </div>
    </div>
    <canvas id="chart" height="200"></canvas>
    <div class="x-labels" id="xLabels"></div>
  </div>
</main>

<div id="tooltip">
  <div class="tt-time" id="ttTime"></div>
  <div class="tt-row"><span class="tt-dot" style="background:#e8ff00"></span><span style="color:var(--muted)">Requests</span><span class="tt-val" id="ttReq"></span></div>
  <div class="tt-row"><span class="tt-dot" style="background:#ff4444"></span><span style="color:var(--muted)">Blocked</span><span class="tt-val" style="color:#ff4444" id="ttBlk"></span></div>
</div>

<footer>
  <span>cdntests.site &mdash; IronCDN Edge Analytics</span>
  <span>Refreshes every 2 min</span>
</footer>

<script>
function fmt(n){
  if(n>=1e6) return (n/1e6).toFixed(1)+'M';
  if(n>=1e3) return (n/1e3).toFixed(1)+'k';
  return String(n);
}

function drawChart(labels,reqs,blocked){
  _chartData = {labels:labels, requests:reqs, blocked:blocked};
  var canvas=document.getElementById('chart');
  var dpr=window.devicePixelRatio||1;
  var W=canvas.parentElement.clientWidth-44;
  var H=200;
  canvas.width=W*dpr; canvas.height=H*dpr;
  canvas.style.width=W+'px'; canvas.style.height=H+'px';
  var ctx=canvas.getContext('2d');
  ctx.scale(dpr,dpr);

  var PAD={t:8,r:8,b:24,l:52};
  var cW=W-PAD.l-PAD.r, cH=H-PAD.t-PAD.b;
  var n=reqs.length;
  var maxVal=Math.max.apply(null,reqs.concat([1]));

  function xP(i){return PAD.l+(n<=1?cW/2:i/(n-1)*cW);}
  function yP(v){return PAD.t+cH-(v/maxVal*cH);}

  ctx.font='10px Segoe UI,sans-serif';
  ctx.fillStyle='#555'; ctx.textAlign='right';
  for(var i=0;i<=4;i++){
    var v=maxVal*i/4;
    var y=yP(v);
    ctx.beginPath(); ctx.strokeStyle='#1a1a1a'; ctx.lineWidth=1;
    ctx.moveTo(PAD.l,y); ctx.lineTo(PAD.l+cW,y); ctx.stroke();
    ctx.fillText(fmt(v),PAD.l-4,y+3);
  }

  function series(data,color){
    if(data.length<2) return;
    var grad=ctx.createLinearGradient(0,PAD.t,0,PAD.t+cH);
    grad.addColorStop(0,color+'20'); grad.addColorStop(1,color+'00');
    ctx.beginPath();
    ctx.moveTo(xP(0),yP(data[0]));
    for(var i=1;i<data.length;i++) ctx.lineTo(xP(i),yP(data[i]));
    ctx.lineTo(xP(data.length-1),PAD.t+cH);
    ctx.lineTo(xP(0),PAD.t+cH);
    ctx.closePath(); ctx.fillStyle=grad; ctx.fill();

    ctx.beginPath();
    ctx.moveTo(xP(0),yP(data[0]));
    for(var i=1;i<data.length;i++) ctx.lineTo(xP(i),yP(data[i]));
    ctx.strokeStyle=color; ctx.lineWidth=2;
    ctx.lineJoin='round'; ctx.lineCap='round'; ctx.stroke();

    var lx=xP(data.length-1), ly=yP(data[data.length-1]);
    ctx.beginPath(); ctx.arc(lx,ly,3.5,0,2*Math.PI);
    ctx.fillStyle=color; ctx.fill();
  }

  series(reqs,'#e8ff00');
  series(blocked,'#ff4444');

  var xWrap=document.getElementById('xLabels');
  xWrap.innerHTML='';
  var step=Math.max(1,Math.floor(labels.length/6));
  for(var i=0;i<labels.length;i++){
    var sp=document.createElement('span');
    sp.textContent=(i%step===0||i===labels.length-1)?labels[i]:'';
    xWrap.appendChild(sp);
  }
}

// Hover tooltip
var _chartData = {labels:[],requests:[],blocked:[]};
var _chartPAD  = {t:8,r:8,b:24,l:52};

function attachHover(){
  var canvas = document.getElementById('chart');
  var tip    = document.getElementById('tooltip');

  canvas.addEventListener('mousemove', function(e){
    var d = _chartData;
    var n = d.labels.length;
    if(n === 0){ tip.style.opacity=0; return; }

    var rect = canvas.getBoundingClientRect();
    var mx   = e.clientX - rect.left;
    var cW   = rect.width - _chartPAD.l - _chartPAD.r;

    // Find nearest index
    var idx = Math.round((mx - _chartPAD.l) / cW * (n-1));
    idx = Math.max(0, Math.min(idx, n-1));

    document.getElementById('ttTime').textContent = d.labels[idx];
    document.getElementById('ttReq').textContent  = fmt(d.requests[idx]);
    document.getElementById('ttBlk').textContent  = fmt(d.blocked[idx]);

    // Position tooltip
    var tx = e.clientX + 14;
    var ty = e.clientY - 40;
    if(tx + 160 > window.innerWidth) tx = e.clientX - 160;
    tip.style.left = tx + 'px';
    tip.style.top  = ty + 'px';
    tip.style.opacity = 1;
  });

  canvas.addEventListener('mouseleave', function(){
    tip.style.opacity = 0;
  });
}

attachHover();

function animCount(elId,target){
  var el=document.getElementById(elId);
  var cur=parseInt(el.dataset.cur||'0');
  var step=Math.max(1,Math.abs(target-cur)/30|0);
  var dir=target>cur?1:-1;
  var t=setInterval(function(){
    cur=dir>0?Math.min(cur+step,target):Math.max(cur-step,target);
    el.textContent=fmt(cur);
    el.dataset.cur=cur;
    if(cur===target) clearInterval(t);
  },20);
}

function load(){
  fetch('/data.json?t='+Date.now())
    .then(function(r){return r.json();})
    .then(function(d){
      var s=d.stats;
      animCount('sTotal',  s.total);
      animCount('sAllowed',s.allowed);
      animCount('sBlocked',s.blocked);
      document.getElementById('sRate').textContent=s.block_pct+'%';
      document.getElementById('updTag').textContent=d.updated_at;
      drawChart(d.labels,d.requests,d.blocked);
    })
    .catch(function(e){console.warn('fetch failed',e);});
}

load();
setInterval(load,120000);
</script>
</body>
</html>