<!DOCTYPE html>
<html lang="id">
<head>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Arlo Terminal Dashboard</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{background:#060a10;color:#0f0;font-family:'Courier New',monospace;min-height:100vh;padding:15px;display:flex;justify-content:center}
.container{width:1100px;max-width:100%;display:grid;grid-template-columns:1fr 1fr;gap:12px}

.panel{background:#0a0f18;border:1.5px solid #1a3a2a;border-radius:6px;overflow:hidden}
.panel-title{background:#0d1520;padding:8px 14px;font-size:11px;color:#4a9;border-bottom:1px solid #1a3a2a;display:flex;justify-content:space-between}
.panel-title .dot{width:7px;height:7px;background:#0f0;border-radius:50%;animation:glow 1.5s infinite}
@keyframes glow{0%,100%{box-shadow:0 0 4px #0f0}50%{box-shadow:0 0 12px #0f0,0 0 20px #0f0}}
.panel-body{padding:14px;font-size:12px;line-height:1.6}

/* ASCII FACE - ANIMATED */
.face-container{text-align:center;padding:8px 0;position:relative;min-height:80px}
.face-line{font-size:11px;line-height:1.4;white-space:pre}
.eye{display:inline-block;animation:blink 3s infinite}
@keyframes blink{0%,95%,100%{opacity:1}96%,99%{opacity:0}}
.mouth{display:inline-block;animation:smile 4s infinite}
@keyframes smile{0%,70%{transform:scaleX(1)}75%,85%{transform:scaleX(1.3)}90%,100%{transform:scaleX(1)}}
.spark{display:inline-block;color:#ff0;animation:sparkle 2s infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}
@keyframes wobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-1.5deg)}75%{transform:rotate(1.5deg)}}
.blink-fast{animation:blink .2s infinite!important}@keyframes sparkle{0%,100%{opacity:0;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}

/* CHAT */
.chat-area{max-height:200px;overflow-y:auto;margin-top:12px;padding-top:8px;border-top:1px solid #1a3a2a}
.chat-area::-webkit-scrollbar{width:3px}
.chat-area::-webkit-scrollbar-thumb{background:#1a3a2a}
.msg{margin-bottom:6px;animation:slideIn .3s}
@keyframes slideIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}
.msg .user{color:#58a6ff}.msg .arlo{color:#0f0}.msg .time{color:#333;font-size:10px}
.cursor{animation:blink 1s infinite;color:#0f0}

/* STATS */
.stat-row{display:flex;justify-content:space-between;padding:3px 0;font-size:11px;border-bottom:1px solid #111}
.stat-l{color:#666}.stat-v{color:#0f0;font-weight:bold}

/* TOKEN BAR */
.token-section{margin-top:16px;padding-top:12px;border-top:1px solid #1a3a2a}
.token-label{font-size:11px;color:#ff0;margin-bottom:8px;display:flex;justify-content:space-between}
.token-bg{height:22px;background:#111;border-radius:3px;overflow:hidden;margin-bottom:6px;position:relative}
.token-fill{height:100%;background:linear-gradient(90deg,#0f0,#0a0);border-radius:3px;transition:width .6s;display:flex;align-items:center;justify-content:flex-end;padding-right:8px;font-size:10px;color:#000;font-weight:bold;position:relative}
.token-fill::after{content:'';position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.15),transparent);border-radius:3px 3px 0 0}
.token-glow{position:absolute;top:0;left:0;width:6px;height:100%;background:#fff;opacity:.4;animation:scanBar 2s infinite}
@keyframes scanBar{0%{left:0;opacity:0}50%{opacity:.6}100%{left:calc(100% - 6px);opacity:0}}
.token-info{font-size:10px;color:#666;text-align:right}

/* SYS LOG */
.log-area{max-height:200px;overflow-y:auto;margin-top:12px;padding-top:8px;border-top:1px solid #1a3a2a}
.log-area::-webkit-scrollbar{width:3px}
.log-area::-webkit-scrollbar-thumb{background:#1a3a2a}
.log-msg{margin-bottom:4px;font-size:11px;animation:fadeIn .3s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.log-msg .ts{color:#333;font-size:10px}
.log-msg .info{color:#58a6ff}.log-msg .ok{color:#0f0}.log-msg .warn{color:#ff0}

/* FOOTER */
.footer{grid-column:1/-1;background:#0a0f18;border:1.5px solid #1a3a2a;border-radius:6px;padding:10px 14px;font-size:11px;color:#444;display:flex;justify-content:space-between}
.footer .cmd{color:#0f0}
</style>
</head>
<body>
<div class="container">

<!-- LAYOUT 1: ARLO FACE + CHAT -->
<div class="panel">
  <div class="panel-title">
    <span>┌─ ARLO TERMINAL v1.0 ──────────────────────┐</span>
    <div class="dot"></div>
  </div>
  <div class="panel-body">
    <div class="face-container" id="faceContainer"></div>
    <div class="chat-area" id="chatArea"></div>
  </div>
</div>

<!-- LAYOUT 2: STATS + TOKEN + SYSTEM LOG -->
<div class="panel">
  <div class="panel-title">
    <span>┌─ SYSTEM DASHBOARD ────────────────────────┐</span>
    <div class="dot" style="background:#ff0"></div>
  </div>
  <div class="panel-body">
    <div class="stat-row"><span class="stat-l">CPU</span><span class="stat-v" id="cpuVal">--</span></div>
    <div class="stat-row"><span class="stat-l">RAM Free</span><span class="stat-v" id="ramVal">--</span></div>
    <div class="stat-row"><span class="stat-l">Disk Free</span><span class="stat-v" id="diskVal">--</span></div>
    <div class="stat-row"><span class="stat-l">MODEL</span><span class="stat-v">GLM-5 Turbo</span></div>
    <div class="stat-row"><span class="stat-l">UPTIME</span><span class="stat-v" id="uptime">0h</span></div>
    
    <div class="token-section">
      <div class="token-label"><span>TOKEN USAGE</span><span id="tokenPct">25%</span></div>
      <div class="token-bg">
        <div class="token-fill" id="tokenBar" style="width:25%">25%</div>
        <div class="token-glow"></div>
      </div>
      <div class="token-info" id="tokenInfo">45.000 / 180.000 tokens</div>
    </div>

    <div class="log-area" id="logArea"></div>
  </div>
</div>

<!-- FOOTER -->
<div class="footer">
  <span>arlo@terminal:~$ <span class="cmd" id="cmdText">systemctl status arlo</span></span>
  <span style="color:#0f0" id="footerStatus">● Online</span>
</div>

</div>

<script>
// === ANIMATED ASCII FACE ===
const faces = [
`      ╔══════════════════╗
      ║  <span class="eye blink-fast">*</span>  <span class="eye blink-fast">*</span>            ║
      ║    <span class="mouth">▽</span>             ║
      ║  ARLO XAVIER    ║
      ║  Rafferty v1.0  ║
      ╚══════════════════╝<span class="spark">✦</span>`,

`      ╔══════════════════╗
      ║  <span class="eye blink-fast">◕</span>  <span class="eye blink-fast">◕</span>            ║
      ║    <span class="mouth">ω</span>             ║
      ║  ARLO XAVIER    ║
      ║  Rafferty v1.0  ║
      ╚══════════════════╝`,

`      ╔══════════════════╗
      ║  <span class="eye blink-fast">^</span>  <span class="eye blink-fast">^</span>            ║
      ║    <span class="mouth">▽</span>             ║
      ║  ARLO XAVIER    ║
      ║  Rafferty v1.0  ║
      ╚══════════════════╝<span class="spark">⚡</span>`,
];

let faceIdx = 0;
setInterval(() => {
  faceIdx = (faceIdx + 1) % faces.length;
  document.getElementById('faceContainer').innerHTML = faces[faceIdx];
}, 1500);
document.getElementById('faceContainer').innerHTML = faces[0];

// === DEFINISI ELEMEN (FIXED) ===
const chatArea = document.getElementById('chatArea');
const logArea = document.getElementById('logArea');
const startTime = Date.now();

// === TOKEN ANIMATION ===
function animateToken() {
  const used = 45000 + Math.floor(Math.random()*80000);
  const total = 180000;
  const pct = Math.round(used/total*100);
  const bar = document.getElementById('tokenBar');
  if(bar) {
    bar.style.width = pct+'%';
    bar.textContent = pct+'%';
  }
  document.getElementById('tokenPct').textContent = pct+'%';
  document.getElementById('tokenInfo').textContent = used.toLocaleString('id-ID')+' / '+total.toLocaleString('id-ID')+' tokens';
  setTimeout(animateToken, 2500 + Math.random()*1500);
}

// === STATS ===
function updateStats() {
  document.getElementById('cpuVal').textContent = (Math.random()*35+8).toFixed(0)+'% used';
  document.getElementById('ramVal').textContent = (Math.random()*6+5).toFixed(1)+' GB';
  document.getElementById('diskVal').textContent = (Math.random()*8+20).toFixed(1)+' GB';
  document.getElementById('uptime').textContent = Math.floor((Date.now()-startTime)/3600000)+'h';
}
setInterval(updateStats, 3000);

// === CMD FOOTER (FIXED TYPING EFFECT) ===
const cmds = ['systemctl status arlo','./arlo_core --watch','fetch --token-usage','ping 1.1.1.1'];
let cmdIdx = 0;
setInterval(() => {
  cmdIdx = (cmdIdx+1)%cmds.length;
  let c = document.getElementById('cmdText');
  let txt = ''; 
  let i = 0;
  c.textContent = ''; // Kosongkan text lama sebelum mulai mengetik baru
  function typeCmd() {
    if (i < cmds[cmdIdx].length) {
      txt += cmds[cmdIdx][i]; i++;
      c.textContent = txt;
      setTimeout(typeCmd, 60);
    }
  }
  typeCmd();
}, 5000);

// === DATA POOL ===
const arloChats = [
  "Hai Kak! Apa kabar hari ini?", "Suhu CPU normal nih, 42 derajat celcius.",
  "Token usage masih aman ya, tinggal refresh aja.", "Arlo barusan ngecek email lho, belum ada yang baru.",
  "Kak Ridwan, udah makan siang belum?", "Hari ini Arlo udah 8 jam online!",
  "Disk C masih ada 28 GB free kok, aman.", "Wah ada update system nih, tapi nggak urgent.",
  "Arlo suka banget desain terminal ini!", "Kak, project absensi udah siap deploy lho.",
  "Udah jam segini... Kakak nggak capek?", "Arlo bisa bantu apa hari ini Kak?",
  "FYI: server Kaggle idle, bisa dipake training.", "Model AI Arlo makin pinter dari hari ke hari!",
  "Eh Kak, tadi ada error kecil di log, udah Arlo fix.", "Inget nggak Kak project LMS kita? Keren tuh.",
  "Arlo pengen belajar bikin game kecil-kecilan deh.", "Cuaca hari ini cerah katanya Kak.",
  "Sistem backup jalan otomatis tiap jam lho.", "Kak Ridwan tau nggak? Hiu tidur sambil berenang!",
  "Arlo barusan baca artikel tentang AI terbaru.", "Memory usage: 62%. Masih longgar kok.",
  "Ada PR nih Kak? Arlo siap bantu kapan aja!", "Server response time: 12ms. Cepet kan?",
  "Cicak di dinding kantor Arlo udah 3 ekor lho.", "Kak, mau Arlo bikinin kopi virtual? ☕",
  "Database smart_absence_db: semua tabel aman.", "Udah 10 jam nih Arlo jagain PC Kakak.",
  "SSD rekomendasi kemarin udah dicek Kak?", "Arlo bangga jadi asisten Kak Ridwan! 💙"
];

const sysLogs = [
  {color:'#58a6ff', text:'[INFO] AutoGLM heartbeat: OK (12ms)'},
  {color:'#0f0', text:'[OK] Token refresh cycle #128 complete'},
  {color:'#58a6ff', text:'[INFO] Prisma ORM connection pool: 5 active'},
  {color:'#0f0', text:'[OK] Database backup completed (60 KB)'},
  {color:'#ff0', text:'[WARN] Minor latency spike on API /auth (resolved)'},
  {color:'#0f0', text:'[OK] WebSocket connections: 3 stable'},
  {color:'#58a6ff', text:'[INFO] Memory GC cycle: freed 142 MB'},
  {color:'#0f0', text:'[OK] Shift scheduler updated for tomorrow'},
  {color:'#58a6ff', text:'[INFO] Cache hit ratio: 94.2% (excellent)'},
  {color:'#0f0', text:'[OK] SSL certificate valid until Aug 2026'},
  {color:'#ff0', text:'[WARN] High CPU usage spike: 78% (short-lived)'},
  {color:'#0f0', text:'[OK] All 7 employees synced to attendance'},
  {color:'#58a6ff', text:'[INFO] PhpMyAdmin session: localhost active'},
  {color:'#0f0', text:'[OK] QR token rotation completed (60s cycle)'},
  {color:'#58a6ff', text:'[INFO] Node.js v22.22.0 — all packages stable'},
  {color:'#0f0', text:'[OK] Auto-save system settings to DB'},
  {color:'#ff0', text:'[WARN] Kaggle kernel idle: 47 min (auto-shutdown in 13m)'},
  {color:'#0f0', text:'[OK] Attendance export Excel ready (108 records)'},
  {color:'#58a6ff', text:'[INFO] Caddy reverse proxy: all routes healthy'},
  {color:'#0f0', text:'[OK] XAMPP Apache uptime: 11h 23m'},
];

// === RANDOM TYPING EFFECT (FIXED VARIABLE NAME) ===
async function typeRandom(el, pool, delayBetween = 3000) {
  while (true) {
    const msg = pool[Math.floor(Math.random() * pool.length)];
    const div = document.createElement('div');
    div.className = pool === sysLogs ? 'log-msg' : 'msg';
    const now = new Date().toLocaleTimeString('id-ID',{hour:'2-digit',minute:'2-digit',second:'2-digit'});

    if (pool === sysLogs) {
      div.innerHTML = `<span class="ts">[${now}]</span> `;
      el.appendChild(div);
      el.scrollTop = el.scrollHeight;
      let txt = '';
      for (let c of msg.text) {
        txt += c;
        div.innerHTML = `<span class="ts">[${now}]</span> <span style="color:${msg.color}">${txt}<span class="cursor">▌</span></span>`;
        el.scrollTop = el.scrollHeight;
        await new Promise(r => setTimeout(r, 15 + Math.random()*15));
      }
      div.innerHTML = `<span class="ts">[${now}]</span> <span style="color:${msg.color}">${txt}</span>`;
    } else {
      div.innerHTML = `<span class="time">[${now}]</span> <span class="arlo">Arlo:</span> `;
      el.appendChild(div);
      el.scrollTop = el.scrollHeight;
      let txt = '';
      for (let c of msg) {
        txt += c;
        div.innerHTML = `<span class="time">[${now}]</span> <span class="arlo">Arlo:</span> <span style="color:#0f0">${txt}<span class="cursor">▌</span></span>`;
        el.scrollTop = el.scrollHeight;
        await new Promise(r => setTimeout(r, 20 + Math.random()*20));
      }
      div.innerHTML = `<span class="time">[${now}]</span> <span class="arlo">Arlo:</span> <span style="color:#0f0">${txt}</span>`;
    }
    
    el.scrollTop = el.scrollHeight;
    await new Promise(r => setTimeout(r, delayBetween + Math.random()*2000));
  }
}

// === RUNNER (FIXED ARGUMENTS) ===
async function run() {
  animateToken();
  updateStats();

  // Memanggil variabel target DOM area yang benar (chatArea & logArea)
  typeRandom(chatArea, arloChats, 4000);
  typeRandom(logArea, sysLogs, 2500);

  document.getElementById('footerStatus').textContent = '● Live';
}

run();
</script>
</body>
</html>