<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <title>Welcome to detector!</title>
  <style>
*{box-sizing:border-box}body{margin:0;padding:0;background:#f0f2f5;font-family:Inter,"Segoe UI",sans-serif;color:#333;display:flex;justify-content:center;align-items:center;height:100vh}.card{background:#fff;padding:40px 32px;border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.06);max-width:800px;width:100%;text-align:center}h1{font-size:24px;margin-bottom:16px;color:#222}.info{font-size:14px;color:#666;margin:6px 0}#chart-container{margin-top:30px;height:300px;width:100%;border:1px dashed #ccc;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#aaa;font-size:14px}
  </style>
</head>
<body>
  <div class="card">
    <h1>Custom response from <strong>restyJIT</strong></h1>
    <div class="info">IP Address: <span id="user-ip">216.73.216.47</span></div>
    <div class="info">User-Agent: <span id="user-agent">Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)</span></div>
    <div class="info">JA4: <span id="user-agent">t13d1011h2_cdd96bf937af_db48641fd927</span></div>
    <div class="info">JA4Hash: <span id="user-agent">3cfd8a872653b088526ae0f7572aefacf5546b63f2c3c86308d0e5fc627f7da1</span></div>
    <div id="graph1" style="margin-top: 32px; border-radius: 10px;">
    </div>
  </div>
  <script>
var chartInstance,renderTarget="graph1",previous={host:"unknown",since:0,total:0,_5xx:0,blocked:0,verified:0},options={plotOptions:{area:{fillOpacity:1e-5,cropThreshold:60},series:{cropThreshold:60,marker:{enabled:!1},events:{legendItemClick:function(e){e.preventDefault()}}}},chart:{zoomType:"",renderTo:renderTarget,style:{fontFamily:"'Unica One', sans-serif"},animation:{duration:1100},backgroundColor:"#1a1530",height:350},title:{text:"detector demo",style:{color:"#c2c6dc"}},xAxis:{type:"datetime",dateTimeLabelFormats:{day:"%a"}},yAxis:{labels:{style:{color:"#c2c6dc"}},title:{text:"Requests",margin:80,style:{color:"#c2c6dc"}}},credits:{enabled:!1},legend:{useHTML:!0,symbolWidth:0,labelFormatter:function(){return"<div><div style=\"display: inline-block; margin-right:5px\"> </div><span style='color: #c2c6dc;'> "+this.name+" </span></div>"}},subtitle:{style:{color:"#c2c6dc",font:'bold 12px "Trebuchet MS", Verdana, sans-serif'}},series:[{type:"area",name:"Total Requests",color:"#ea5455",data:[]},{type:"area",name:"5xx Errors",color:"#bb00cf",data:[]},{type:"area",name:"Blocked Requests",color:"#ff1416",data:[]},{type:"area",name:"Verified Requests",color:"#0049bb",data:[]}]};window.addEventListener("DOMContentLoaded",()=>{console.log("stats loading");var e="webshield.website";document.title=`${e} metrics`,Highcharts.createElement("link",{href:"//fonts.googleapis.com/css?family=Unica+One",rel:"stylesheet",type:"text/css"},null,document.getElementsByTagName("head")[0]),chartInstance=new Highcharts.Chart(options);var t=async()=>{var a=e,r=null,s=await fetch("https://webshield.website/get_stats");if(200!==s.status){setTimeout(t,50);return}var o=await s.json(),i=0,n=0,l=0,c=0,d=0;if(Object.keys(o).forEach(e=>{var t=e.replace(a,"");"_since"===t&&(i=o[e]),"_total"===t&&(n=o[e],console.log("statsTotal:"+o[e])),"_5xx"===t&&(l=o[e]),"_blocked"===t&&(c=o[e]),"_verified"===t&&(d=o[e])}),i>0&&n-previous.total>=0){var $=!1;0==previous.since&&($=!0);var p=chartInstance.series[0],v=chartInstance.series[1],h=chartInstance.series[2],u=chartInstance.series[3],f=Math.floor(Date.now());if(!1==$){var m=!1;v.addPoint([f,l-previous._5xx],!0,m),h.addPoint([f,c-previous.blocked],!0,m),u.addPoint([f,d-previous.verified],!0,m),p.addPoint([f,n-previous.total],!0,m)}else v.addPoint([f,0],!0,!0),h.addPoint([f,0],!0,!0),u.addPoint([f,0],!0,!0),p.addPoint([f,0],!0,!0);previous.host=a,previous.since=i,previous.total=n,previous._5xx=l,previous.blocked=c,previous.verified=d}setTimeout(t,1e3)};t()});var clearChart=()=>{for(var e=chartInstance.series.length,t=e-1;t>-1;t--)chartInstance.series[t].data[0].remove(!0)};
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/11.2.0/highcharts.js"></script>
</body>
</html>

