index.php

backend/tools/html-debug/index.php
<!DOCTYPE html>
<html lang="en">
<head>
<!-- FILE: index.php · PATH: backend/tools/html-debug/index.php · VERSION: v1.2 · CREATED: 07-16-2026 · LAST-UPDATED: 07-17-2026 · AUTHOR: USR369 · CHANGES: v1.0 initial build — v1.1 rebuilt to STANDARDS-S.md v2.12 -->
<meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>HTML Debug Tools — yttcom.net</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;700&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#000;--surface:#0a1520;--card:#0d1a27;--border:#1e3448;--accent:#3d85c8;--accent-hi:#60a8e8;--dim:#8aaccc;--text:#d0e8ff;--bright:#fff;--yellow:#f5e642;--green:#5dd68c;--red:#f47068;--orange:#f0b86a;--purple:#c49dff;--sys:#ffb347;}
body{background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;min-height:100vh;padding:60px 0 80px}
/* TOP BAR */
.top{position:fixed;top:0;left:0;right:0;height:clamp(56px,9vw,90px);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,4vw,48px);border-bottom:1px solid var(--border);background:#000;z-index:200}
.tl{display:flex;flex-direction:column;gap:1px}
.tn{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--dim);opacity:.7;letter-spacing:.12em;text-transform:uppercase}
.tp{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--dim)}
.tp a{color:var(--accent-hi);text-decoration:none;font-weight:700}.tp a:hover{color:var(--bright)}.tp .sep{color:var(--border);margin:0 3px}.tp .h{color:var(--purple)}
.tr{display:flex;align-items:center;gap:6px}
.tv{font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;color:var(--yellow)}
.badge{font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;padding:2px 8px;border-radius:3px}
.b-v{background:rgba(93,214,140,.1);color:var(--green);border:1px solid rgba(93,214,140,.25)}
/* PAGE */
.page{max-width:clamp(340px,95vw,900px);margin:0 auto;padding:clamp(14px,2vw,28px) clamp(16px,3vw,32px) 0}
.sec-lbl{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin-bottom:8px;margin-top:20px}
/* TOOL CARDS */
.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:4px}
.tool-card{background:var(--card);border:1px solid var(--border);border-radius:6px;padding:12px 14px}
.tool-name{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;color:var(--bright);margin-bottom:3px}
.tool-desc{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--dim);line-height:1.5}
/* FORM */
.inp{width:100%;background:var(--card);border:1px solid var(--border);border-radius:5px;color:var(--bright);font-family:'JetBrains Mono',monospace;font-size:12px;padding:10px 12px;outline:none;margin-bottom:8px;transition:border-color .15s}
.inp:focus{border-color:var(--accent-hi)}.inp::placeholder{color:var(--dim)}
.checks{display:flex;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.chk{display:flex;align-items:center;gap:5px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text);cursor:pointer;user-select:none}
.btn{background:var(--accent-hi);color:#000;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;padding:10px 24px;border:none;border-radius:5px;cursor:pointer;transition:background .12s}
.btn:hover{background:var(--bright)}.btn:disabled{background:#1a3a5a;color:var(--dim);cursor:not-allowed}
/* OUTPUT */
.out{background:var(--card);border:1px solid var(--border);border-radius:6px;padding:14px;margin-top:16px;font-family:'JetBrains Mono',monospace;font-size:11px;line-height:1.75;white-space:pre-wrap;word-break:break-word;max-height:560px;overflow-y:auto;display:none}
.out.show{display:block}
.score-badge{font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:700}
.A{color:var(--green)}.B{color:#a8d870}.C{color:var(--yellow)}.F{color:var(--red)}
.line-issue{color:var(--red)}.line-warn{color:var(--orange)}.line-info{color:var(--dim)}.line-ok{color:var(--green)}
.status-msg{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--yellow);margin-top:8px;min-height:16px}
/* BOTTOM TABS */
.bottom-tabs{position:fixed;bottom:0;left:0;right:0;background:rgba(0,0,0,.96);border-top:1px solid var(--border);display:flex;justify-content:center;flex-wrap:wrap;gap:4px;padding:8px 12px;z-index:100}
.btab{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);text-decoration:none;border:1px solid var(--border);border-radius:3px;padding:5px 12px;white-space:nowrap;transition:color .12s,border-color .12s}
.btab:hover{color:var(--accent-hi);border-color:var(--accent)}.btab.here{color:var(--purple);border-color:var(--purple)}
@media(max-width:540px){.tool-grid{grid-template-columns:1fr}}
</style>
</head>
<body>

<!-- TOP BAR -->
<div class="top">
  <div class="tl">
    <span class="tn">yttcom.net</span>
    <div class="tp">
      <a href="/backend/index.html">Backend</a><span class="sep">/</span><a href="/backend/tools/">Tools</a><span class="sep">/</span><span class="h">HTML Debug</span>
    </div>
  </div>
  <div class="tr">
    <span class="badge b-v">v1.1</span>
    <span class="tv">07.16.26</span>
  </div>
</div>

<div class="page">

  <!-- TOOL INVENTORY -->
  <div class="sec-lbl">Scripts — backend/tools/html-debug/critical/</div>
  <div class="tool-grid">
    <div class="tool-card">
      <div class="tool-name">html-check.php</div>
      <div class="tool-desc">DOCTYPE · tags · unclosed elements · broken links</div>
    </div>
    <div class="tool-card">
      <div class="tool-name">php-check.php</div>
      <div class="tool-desc">PHP syntax · error log scan · 500 detection</div>
    </div>
    <div class="tool-card">
      <div class="tool-name">js-check.php</div>
      <div class="tool-desc">Function existence · onclick wiring · fetch calls · token</div>
    </div>
    <div class="tool-card">
      <div class="tool-name">api-check.php</div>
      <div class="tool-desc">Endpoint health · HTTP status · ping · JSON validity</div>
    </div>
  </div>

  <!-- RUN FORM -->
  <div class="sec-lbl">Run Debug</div>
  <input class="inp" id="target" type="text"
    placeholder="URL: https://yttcom.net/page  OR  path: systems/00-admin/index.php"
    autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false"/>
  <input class="inp" id="fns" type="text"
    placeholder="JS functions to verify (optional): fn1,fn2,fn3"
    autocomplete="off" autocorrect="off" spellcheck="false"/>
  <div class="checks">
    <label class="chk"><input type="checkbox" id="c-html" checked> HTML</label>
    <label class="chk"><input type="checkbox" id="c-php" checked> PHP</label>
    <label class="chk"><input type="checkbox" id="c-js" checked> JavaScript</label>
    <label class="chk"><input type="checkbox" id="c-api" checked> API</label>
  </div>
  <button class="btn" id="run-btn" onclick="runDebug()">Run ↓</button>
  <div class="status-msg" id="status-msg"></div>

  <!-- OUTPUT -->
  <div class="out" id="output"></div>

</div>

<!-- BOTTOM TABS -->
<div class="bottom-tabs">
  <a class="btab" href="/backend/index.html">Backend</a>
  <a class="btab" href="/backend/tools/">Tools</a>
  <a class="btab here" href="/backend/tools/html-debug/index.php">HTML Debug</a>
  <a class="btab" href="/backend/sandbox/index.html">Sandbox</a>
  <a class="btab" href="/backend/tools/file-editor.php?path=backend/tools/html-debug/index.php">Edit</a>
</div>

<script>
const TK='yttcom-admin-d60283b1a40a3180ea51e7a579e4d9f2f8fc5f07ac81d89e';
const BASE='/backend/tools/html-debug/critical/';

function runDebug(){
  const target=document.getElementById('target').value.trim();
  const fns=document.getElementById('fns').value.trim();
  const checks=[];
  if(document.getElementById('c-html').checked) checks.push('html');
  if(document.getElementById('c-php').checked) checks.push('php');
  if(document.getElementById('c-js').checked) checks.push('js');
  if(document.getElementById('c-api').checked) checks.push('api');
  if(!target){document.getElementById('status-msg').textContent='Enter a URL or path first.';return;}
  const btn=document.getElementById('run-btn');
  btn.disabled=true;
  document.getElementById('status-msg').textContent='Running checks...';
  document.getElementById('output').classList.remove('show');
  let p=`token=${TK}&checks=${checks.join(',')}`;
  if(target.startsWith('http')) p+=`&url=${encodeURIComponent(target)}`;
  else p+=`&path=${encodeURIComponent(target)}`;
  if(fns) p+=`&functions=${encodeURIComponent(fns)}`;
  fetch(BASE+'debug-run.php?'+p)
    .then(r=>r.json())
    .then(d=>{
      const el=document.getElementById('output');
      let h=`<span class="score-badge ${d.grade}">${d.score}/100 (${d.grade})</span>  ${d.source}
`;
      h+=`Issues: ${d.total_issues}  Warnings: ${d.total_warnings}  Checked: ${d.run_at}

`;
      for(const[k,res] of Object.entries(d.results||{})){
        h+=`━━ ${k.toUpperCase()} `;
        h+='━'.repeat(Math.max(0,50-k.length))+'━
';
        if(res.error) h+=`<span class="line-issue">ERROR: ${res.error}</span>
`;
        (res.issues||[]).forEach(i=>h+=`<span class="line-issue">✗ ${i}</span>
`);
        (res.warnings||[]).forEach(w=>h+=`<span class="line-warn">⚠ ${w}</span>
`);
        (res.info||[]).forEach(i=>h+=`<span class="line-info">· ${i}</span>
`);
        if(res.score!==undefined) h+=`<span class="line-ok">Score: ${res.score}/100 (${res.grade})</span>
`;
        if(res.pass!==undefined) h+=`<span class="${res.fail>0?'line-issue':'line-ok'}">API: ${res.pass} pass / ${res.fail} fail</span>
`;
        if((res.error_log_hits||[]).length){
          h+=`<span class="line-warn">Error log:</span>
`;
          res.error_log_hits.forEach(l=>h+=`  <span class="line-issue">${l}</span>
`);
        }
        h+='
';
      }
      el.innerHTML=h;
      el.classList.add('show');
      document.getElementById('status-msg').textContent='';
      btn.disabled=false;
    })
    .catch(e=>{
      document.getElementById('status-msg').textContent='Error: '+e.message;
      btn.disabled=false;
    });
}
document.getElementById('target').addEventListener('keydown',e=>{if(e.key==='Enter')runDebug();});
</script>
</body>
</html>