85 lines
4.8 KiB
HTML
85 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>SymClaw — Result</title>
|
||
<style>
|
||
*{margin:0;padding:0;box-sizing:border-box}
|
||
body{background:#0d1117;color:#c9d1d9;font-family:'SF Mono',Consolas,'Courier New',monospace;display:flex;justify-content:center;padding:24px}
|
||
.card{max-width:640px;width:100%;background:#161b22;border:1px solid #30363d;border-radius:8px;overflow:hidden}
|
||
.header{padding:14px 18px;border-bottom:1px solid #30363d;display:flex;align-items:center;gap:10px}
|
||
.header .dot{width:8px;height:8px;border-radius:50%;background:#3fb950}
|
||
.header .title{font-size:13px;color:#8b949e}
|
||
.section{padding:16px 18px;border-bottom:1px solid #21262d}
|
||
.section:last-child{border-bottom:none}
|
||
.label{font-size:11px;color:#484f58;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}
|
||
.expr{font-size:20px;color:#58a6ff;word-break:break-all}
|
||
.result{font-size:22px;color:#e6edf3;word-break:break-all}
|
||
.latex{font-size:16px;color:#c9d1d9;background:#0d1117;padding:10px 14px;border-radius:4px;overflow-x:auto;white-space:pre-wrap;word-break:break-all}
|
||
.steps{list-style:none;counter-reset:step}
|
||
.steps li{counter-increment:step;padding:6px 0;font-size:13px;color:#8b949e;border-bottom:1px solid #21262d;display:flex;gap:8px}
|
||
.steps li:last-child{border-bottom:none}
|
||
.steps li::before{content:counter(step);color:#484f58;min-width:18px;text-align:right}
|
||
.steps .math{color:#c9d1d9}
|
||
.meta{font-size:11px;color:#484f58;padding:10px 18px;display:flex;gap:16px}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="card" id="card">
|
||
<div class="header"><span class="dot"></span><span class="title">SymClaw Result</span></div>
|
||
<div class="section"><div class="label">Input</div><div class="expr" id="r-input">—</div></div>
|
||
<div class="section"><div class="label">Result</div><div class="result" id="r-result">—</div></div>
|
||
<div class="section" id="s-latex" style="display:none"><div class="label">LaTeX</div><div class="latex" id="r-latex"></div></div>
|
||
<div class="section" id="s-steps" style="display:none"><div class="label">Steps</div><ol class="steps" id="r-steps"></ol></div>
|
||
<div class="meta" id="r-meta"></div>
|
||
</div>
|
||
<script>
|
||
// Unicode math replacements for display
|
||
const umap={'\\alpha':'α','\\beta':'β','\\gamma':'γ','\\delta':'δ','\\theta':'θ','\\pi':'π','\\sigma':'σ','\\omega':'ω','\\infty':'∞','\\sqrt':'√','\\pm':'±','\\cdot':'·','\\times':'×','\\div':'÷','\\leq':'≤','\\geq':'≥','\\neq':'≠','\\approx':'≈','\\sum':'∑','\\prod':'∏','\\int':'∫','\\partial':'∂','\\nabla':'∇','\\in':'∈','\\notin':'∉','\\subset':'⊂','\\cup':'∪','\\cap':'∩','\\forall':'∀','\\exists':'∃','\\rightarrow':'→','\\leftarrow':'←','\\Rightarrow':'⇒','\\langle':'⟨','\\rangle':'⟩'};
|
||
const sups='⁰¹²³⁴⁵⁶⁷⁸⁹';
|
||
|
||
function texToUnicode(s){
|
||
if(!s)return '';
|
||
Object.entries(umap).forEach(([k,v])=>{s=s.split(k).join(v)});
|
||
s=s.replace(/\^{(\d+)}/g,(_,d)=>[...d].map(c=>sups[+c]).join(''));
|
||
s=s.replace(/\^(\d)/g,(_,c)=>sups[+c]);
|
||
s=s.replace(/\\frac{([^}]*)}{([^}]*)}/g,'($1)/($2)');
|
||
s=s.replace(/[{}]/g,'');s=s.replace(/\\\s/g,' ');s=s.replace(/\\[a-zA-Z]+/g,'');
|
||
return s.trim();
|
||
}
|
||
|
||
function render(data){
|
||
if(!data)return;
|
||
document.getElementById('r-input').textContent=data.expr||data.input||'—';
|
||
document.getElementById('r-result').textContent=data.result||(data.solutions?data.solutions.join(', '):'—');
|
||
if(data.latex){
|
||
document.getElementById('s-latex').style.display='';
|
||
document.getElementById('r-latex').textContent=texToUnicode(data.latex)+'\n\n'+data.latex;
|
||
}
|
||
if(data.steps&&data.steps.length){
|
||
document.getElementById('s-steps').style.display='';
|
||
const ol=document.getElementById('r-steps');ol.innerHTML='';
|
||
data.steps.forEach(st=>{const li=document.createElement('li');
|
||
li.innerHTML='<span class="math">'+st.replace(/</g,'<')+'</span>';ol.append(li)});
|
||
}
|
||
const meta=[];
|
||
if(data.action)meta.push('Action: '+data.action);
|
||
if(data.var)meta.push('Variable: '+data.var);
|
||
if(data.time_ms)meta.push(data.time_ms+'ms');
|
||
document.getElementById('r-meta').textContent=meta.join(' · ');
|
||
}
|
||
|
||
// Load data from hash, query param, or postMessage
|
||
try{const h=location.hash.slice(1);if(h)render(JSON.parse(decodeURIComponent(h)))}catch{}
|
||
try{const q=new URLSearchParams(location.search).get('data');if(q)render(JSON.parse(q))}catch{}
|
||
window.addEventListener('message',e=>{try{render(typeof e.data==='string'?JSON.parse(e.data):e.data)}catch{}});
|
||
|
||
// Demo fallback
|
||
if(document.getElementById('r-input').textContent==='—'){
|
||
render({expr:'x^2 - 5*x + 6',action:'solve',result:'x = 2, x = 3',solutions:['2','3'],latex:'x^{2} - 5x + 6 = 0',steps:['Factor the quadratic','(x - 2)(x - 3) = 0','x = 2 or x = 3'],var:'x',time_ms:0.4});
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|