serversdown/project-lyra
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

update to 0.2.0 stable #2

Merged
serversdown merged 51 commits from dev into main 2026-06-18 15:39:46 -04:00
Conversation 0 Commits 51 Files Changed 44
+1069 -1045
7 changed files with 1069 additions and 1045 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 4882225751 - Show all commits
lyra/web/static/hand.html
+41 -17
View File
@@ -3,13 +3,13 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<meta name="theme-color" content="#0b0d12" /> <meta name="theme-color" content="#070707" />
<title>Lyra — Hand</title> <title>Lyra — Hand</title>
<style> <style>
:root { :root {
--bg:#0b0d12; --bg-elev:#141821; --border:#232936; --text:#e6e9ef; --bg:#070707; --bg-elev:#0e0e0e; --border:#2a1d12; --text:#e8e8e8;
--fade:#8b93a7; --accent:#7aa2ff; --felt:#16322a; --feltline:#0f5132; --fade:#8a8a8a; --accent:#ff7a00; --felt:#16322a; --feltline:#0f5132;
--chip:#ffcf6b; --hero:#7aa2ff; --chip:#ffb347; --hero:#ff7a00;
} }
*{box-sizing:border-box;} *{box-sizing:border-box;}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text); html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);
@@ -42,8 +42,8 @@
.seat{position:absolute;transform:translate(-50%,-50%);width:96px;text-align:center; .seat{position:absolute;transform:translate(-50%,-50%);width:96px;text-align:center;
background:rgba(13,16,22,.85);border:1px solid var(--border);border-radius:10px;padding:5px 4px;} background:rgba(13,16,22,.85);border:1px solid var(--border);border-radius:10px;padding:5px 4px;}
.seat.hero{border-color:var(--hero);box-shadow:0 0 10px rgba(122,162,255,.4);} .seat.hero{border-color:var(--hero);box-shadow:0 0 10px rgba(255,122,0,.4);}
.seat.acting{border-color:var(--chip);box-shadow:0 0 12px rgba(255,207,107,.6);} .seat.acting{border-color:var(--chip);box-shadow:0 0 12px rgba(255,179,71,.6);}
.seat .pos{font-size:.66rem;color:var(--accent);font-weight:700;letter-spacing:.4px;} .seat .pos{font-size:.66rem;color:var(--accent);font-weight:700;letter-spacing:.4px;}
.seat .nm{font-size:.66rem;color:var(--fade);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .seat .nm{font-size:.66rem;color:var(--fade);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.seat .cards{display:flex;gap:3px;justify-content:center;margin:3px 0;} .seat .cards{display:flex;gap:3px;justify-content:center;margin:3px 0;}
@@ -52,7 +52,7 @@
.seat.folded{opacity:.4;} .seat.folded{opacity:.4;}
.controls{display:flex;gap:8px;align-items:center;justify-content:center;margin:14px 0 6px;} .controls{display:flex;gap:8px;align-items:center;justify-content:center;margin:14px 0 6px;}
.controls button{background:#1b2333;border:1px solid var(--border);color:var(--text); .controls button{background:#241400;border:1px solid var(--border);color:var(--text);
border-radius:8px;padding:8px 14px;font-size:.95rem;cursor:pointer;-webkit-tap-highlight-color:transparent;} border-radius:8px;padding:8px 14px;font-size:.95rem;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.controls button:disabled{opacity:.4;} .controls button:disabled{opacity:.4;}
.step-label{color:var(--fade);font-size:.8rem;min-width:80px;text-align:center;} .step-label{color:var(--fade);font-size:.8rem;min-width:80px;text-align:center;}
@@ -60,13 +60,13 @@
.log{margin-top:14px;border-top:1px solid var(--border);padding-top:10px;} .log{margin-top:14px;border-top:1px solid var(--border);padding-top:10px;}
.log .ln{padding:5px 8px;border-radius:6px;font-size:.9rem;display:flex;gap:8px;} .log .ln{padding:5px 8px;border-radius:6px;font-size:.9rem;display:flex;gap:8px;}
.log .ln.cur{background:#1b2333;} .log .ln.cur{background:#241400;}
.log .ln.brd{color:var(--fade);font-style:italic;} .log .ln.brd{color:var(--fade);font-style:italic;}
.log .st{color:var(--fade);font-size:.72rem;width:54px;flex:none;text-transform:uppercase;} .log .st{color:var(--fade);font-size:.72rem;width:54px;flex:none;text-transform:uppercase;}
.summary{margin-top:14px;background:var(--bg-elev);border:1px solid var(--border);border-radius:10px;padding:12px;} .summary{margin-top:14px;background:var(--bg-elev);border:1px solid var(--border);border-radius:10px;padding:12px;}
.summary .lbl{color:var(--fade);font-size:.72rem;text-transform:uppercase;letter-spacing:.5px;} .summary .lbl{color:var(--fade);font-size:.72rem;text-transform:uppercase;letter-spacing:.5px;}
.err{color:#ff6b6b;text-align:center;padding:40px;} .err{color:#ff6b6b;text-align:center;padding:40px;}
.net-pos{color:#5ad1a0;} .net-neg{color:#ff6b6b;} .net-pos{color:#8fd694;} .net-neg{color:#ff6b6b;}
</style> </style>
</head> </head>
<body> <body>
@@ -140,7 +140,9 @@
// place seats around the oval // place seats around the oval
const seatsEl = document.getElementById('seats'); const seatsEl = document.getElementById('seats');
const starts = {};
ordered.forEach((p,i)=>{ ordered.forEach((p,i)=>{
starts[p.pos] = (p.stack!=null ? Number(p.stack) : null);
const ang = (90 + i*(360/n)) * Math.PI/180; // bottom = 90deg const ang = (90 + i*(360/n)) * Math.PI/180; // bottom = 90deg
const x = 50 + 46*Math.cos(ang), y = 50 + 44*Math.sin(ang); const x = 50 + 46*Math.cos(ang), y = 50 + 44*Math.sin(ang);
const el = document.createElement('div'); const el = document.createElement('div');
@@ -151,7 +153,7 @@
el.innerHTML = `<div class="pos">${esc(p.pos||'')}</div>` el.innerHTML = `<div class="pos">${esc(p.pos||'')}</div>`
+ (p.name?`<div class="nm">${esc(p.name)}</div>`:'') + (p.name?`<div class="nm">${esc(p.name)}</div>`:'')
+ `<div class="cards">${hcards?cards(hcards,true):'<span class="card sm back">x</span><span class="card sm back">x</span>'}</div>` + `<div class="cards">${hcards?cards(hcards,true):'<span class="card sm back">x</span><span class="card sm back">x</span>'}</div>`
+ (p.stack!=null?`<div class="stack">${esc(p.stack)}</div>`:'') + `<div class="stack" data-stack>${p.stack!=null?esc(p.stack):''}</div>`
+ `<div class="act" data-act></div>`; + `<div class="act" data-act></div>`;
seatsEl.appendChild(el); seatsEl.appendChild(el);
}); });
@@ -167,25 +169,47 @@
return `<div class="ln" data-i="${idx}"><span class="st">${esc(a.street||'')}</span>${esc(a.pos||'')} ${esc(a.action||'')}${amt}</div>`; return `<div class="ln" data-i="${idx}"><span class="st">${esc(a.street||'')}</span>${esc(a.pos||'')} ${esc(a.action||'')}${amt}</div>`;
}).join(''); }).join('');
const cap = s => s ? s[0].toUpperCase()+s.slice(1) : s;
const fmt = n => Number.isInteger(n) ? n : Math.round(n*100)/100;
function draw(){ function draw(){
let pot = 0, board = [], street = 'Preflop'; let board = [], street = 'Preflop';
const lastAct = {}, folded = {}; const lastAct = {}, folded = {};
// street-aware chip accounting: amounts are "to" totals for the street
const contrib = {}; // committed in prior (flushed) streets
let streetCommit = {}, streetBet = 0, curStreet = 'preflop';
const flushStreet = () => { for(const p in streetCommit){ contrib[p]=(contrib[p]||0)+streetCommit[p]; } streetCommit={}; streetBet=0; };
for(let i=0;i<step;i++){ for(let i=0;i<step;i++){
const a = acts[i]; const a = acts[i];
if(a.board){ board = a.board; street = a.street; continue; } if(a.board){ flushStreet(); curStreet=a.street; board=a.board; street=cap(a.street); continue; }
if(a.street) street = a.street; if(a.street && a.street!==curStreet){ flushStreet(); curStreet=a.street; }
if(a.amount!=null && ['call','bet','raise','allin','post'].includes(a.action)) pot += Number(a.amount)||0; if(a.street) street = cap(a.street);
if(a.pos){ lastAct[a.pos] = (a.action||'') + (a.amount!=null?' '+a.amount:''); } const pos=a.pos, amt=(a.amount!=null?Number(a.amount):null);
if(a.action==='fold' && a.pos) folded[a.pos]=true; if(pos){
switch(a.action){
case 'post': case 'bet': streetCommit[pos]=amt||0; streetBet=Math.max(streetBet, amt||0); break;
case 'raise': case 'allin': streetCommit[pos]=(amt!=null?amt:streetBet); streetBet=Math.max(streetBet, streetCommit[pos]); break;
case 'call': streetCommit[pos]=(amt!=null?amt:streetBet); break;
case 'fold': folded[pos]=true; break;
} }
lastAct[pos]=(a.action||'')+(amt!=null?' '+amt:'');
}
}
// committed total per player (flushed streets + current street), pot = sum
const committed={}, allPos=new Set([...Object.keys(contrib),...Object.keys(streetCommit)]);
let pot=0;
allPos.forEach(p=>{ committed[p]=(contrib[p]||0)+(streetCommit[p]||0); pot+=committed[p]; });
boardEl.innerHTML = cards(board); boardEl.innerHTML = cards(board);
potEl.textContent = pot ? ('Pot ~'+pot) : ''; potEl.textContent = pot ? ('Pot '+fmt(pot)) : '';
streetEl.textContent = street; streetEl.textContent = street;
document.querySelectorAll('.seat').forEach(s=>{ document.querySelectorAll('.seat').forEach(s=>{
const pos=s.dataset.pos; const pos=s.dataset.pos;
s.querySelector('[data-act]').textContent = lastAct[pos]||''; s.querySelector('[data-act]').textContent = lastAct[pos]||'';
s.classList.toggle('folded', !!folded[pos]); s.classList.toggle('folded', !!folded[pos]);
s.classList.remove('acting'); s.classList.remove('acting');
const stEl=s.querySelector('[data-stack]'), start=starts[pos], c=committed[pos]||0;
if(start!=null){ const rem=start-c; stEl.textContent = rem<=0 ? 'all in' : fmt(rem); }
else { stEl.textContent = c ? '−'+fmt(c) : ''; }
}); });
const cur = acts[step-1]; const cur = acts[step-1];
if(cur && cur.pos){ if(cur && cur.pos){
lyra/web/static/hands.html
+4 -4
View File
@@ -3,10 +3,10 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<meta name="theme-color" content="#0b0d12" /> <meta name="theme-color" content="#070707" />
<title>Lyra — Hands</title> <title>Lyra — Hands</title>
<style> <style>
:root{--bg:#0b0d12;--bg-elev:#141821;--bg-line:#11141b;--border:#232936;--text:#e6e9ef;--fade:#8b93a7;--accent:#7aa2ff;} :root{--bg:#070707;--bg-elev:#0e0e0e;--bg-line:#141414;--border:#2a1d12;--text:#e8e8e8;--fade:#8a8a8a;--accent:#ff7a00;}
*{box-sizing:border-box;} *{box-sizing:border-box;}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text); html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%;} font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%;}
@@ -19,7 +19,7 @@
main{max-width:640px;margin:0 auto;padding:12px 12px 40px;} main{max-width:640px;margin:0 auto;padding:12px 12px 40px;}
a.hand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text); a.hand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text);
background:var(--bg-elev);border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin-bottom:8px;} background:var(--bg-elev);border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin-bottom:8px;}
a.hand:active{background:#1b2333;} a.hand:active{background:#241400;}
.cards{display:flex;gap:4px;flex:none;} .cards{display:flex;gap:4px;flex:none;}
.card{display:inline-flex;flex-direction:column;align-items:center;justify-content:center; .card{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
width:24px;height:33px;background:#f4f4f0;color:#111;border-radius:4px;font-weight:700;font-size:.72rem;line-height:1;} width:24px;height:33px;background:#f4f4f0;color:#111;border-radius:4px;font-weight:700;font-size:.72rem;line-height:1;}
@@ -29,7 +29,7 @@
.ln1{font-size:.92rem;} .ln1{font-size:.92rem;}
.ln2{font-size:.74rem;color:var(--fade);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .ln2{font-size:.74rem;color:var(--fade);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.res{flex:none;font-variant-numeric:tabular-nums;font-weight:600;} .res{flex:none;font-variant-numeric:tabular-nums;font-weight:600;}
.pos-res{color:#5ad1a0;} .neg-res{color:#ff6b6b;} .pos-res{color:#8fd694;} .neg-res{color:#ff6b6b;}
.tag{font-size:.62rem;text-transform:uppercase;letter-spacing:.4px;color:var(--accent);} .tag{font-size:.62rem;text-transform:uppercase;letter-spacing:.4px;color:var(--accent);}
.empty{color:var(--fade);text-align:center;padding:46px 16px;} .empty{color:var(--fade);text-align:center;padding:46px 16px;}
</style> </style>
lyra/web/static/journal.html
+5 -5
View File
@@ -3,13 +3,13 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<meta name="theme-color" content="#0b0d12" /> <meta name="theme-color" content="#070707" />
<title>Lyra — Journal</title> <title>Lyra — Journal</title>
<style> <style>
:root { :root {
--bg: #0b0d12; --bg-elev: #141821; --bg-line: #11141b; --border: #232936; --bg: #070707; --bg-elev: #0e0e0e; --bg-line: #141414; --border: #2a1d12;
--text: #e6e9ef; --fade: #8b93a7; --accent: #7aa2ff; --text: #e8e8e8; --fade: #8a8a8a; --accent: #ff7a00;
--reflection: #5ad1a0; --metacognition: #c08bff; --journal: #ffcf6b; --reflection: #8fd694; --metacognition: #ffb347; --journal: #ff7a00;
} }
* { box-sizing: border-box; } * { box-sizing: border-box; }
html, body { html, body {
@@ -31,7 +31,7 @@
border: 1px solid var(--border); background: var(--bg-line); color: var(--fade); border: 1px solid var(--border); background: var(--bg-line); color: var(--fade);
cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
} }
.chip.active { color: var(--text); border-color: var(--accent); background: #1b2333; } .chip.active { color: var(--text); border-color: var(--accent); background: #241400; }
main { max-width: 720px; margin: 0 auto; padding: 14px 14px 48px; } main { max-width: 720px; margin: 0 auto; padding: 14px 14px 48px; }
.day { color: var(--fade); font-size: .8rem; text-transform: uppercase; letter-spacing: .5px; .day { color: var(--fade); font-size: .8rem; text-transform: uppercase; letter-spacing: .5px;
lyra/web/static/logs.html
+15 -15
View File
@@ -3,22 +3,22 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<meta name="theme-color" content="#0b0d12" /> <meta name="theme-color" content="#070707" />
<title>Lyra — Live Log</title> <title>Lyra — Live Log</title>
<style> <style>
:root { :root {
--bg: #0b0d12; --bg: #070707;
--bg-elev: #141821; --bg-elev: #0e0e0e;
--bg-line: #11141b; --bg-line: #141414;
--border: #232936; --border: #2a1d12;
--text: #e6e9ef; --text: #e8e8e8;
--fade: #8b93a7; --fade: #8a8a8a;
--accent: #7aa2ff; --accent: #ff7a00;
--info: #5ad1a0; --info: #8fd694;
--debug: #8b93a7; --debug: #8a8a8a;
--error: #ff6b6b; --error: #ff6b6b;
--system: #c08bff; --system: #ffb347;
--warn: #ffcf6b; --warn: #ffb347;
} }
* { box-sizing: border-box; } * { box-sizing: border-box; }
html, body { html, body {
@@ -56,7 +56,7 @@
border: 1px solid var(--border); background: var(--bg-line); color: var(--fade); border: 1px solid var(--border); background: var(--bg-line); color: var(--fade);
cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
} }
.chip.active { color: var(--text); border-color: var(--accent); background: #1b2333; } .chip.active { color: var(--text); border-color: var(--accent); background: #241400; }
#search { #search {
flex: 1 1 140px; min-width: 120px; flex: 1 1 140px; min-width: 120px;
background: var(--bg-line); border: 1px solid var(--border); color: var(--text); background: var(--bg-line); border: 1px solid var(--border); color: var(--text);
@@ -85,9 +85,9 @@
padding: 1px 7px; border-radius: 5px; font-weight: 700; flex: none; padding: 1px 7px; border-radius: 5px; font-weight: 700; flex: none;
} }
.lvl-info { color: var(--info); background: #0f2a20; } .lvl-info { color: var(--info); background: #0f2a20; }
.lvl-debug { color: var(--debug); background: #1a1f29; } .lvl-debug { color: var(--debug); background: #161616; }
.lvl-error { color: var(--error); background: #2e1414; } .lvl-error { color: var(--error); background: #2e1414; }
.lvl-system { color: var(--system); background: #221536; } .lvl-system { color: var(--system); background: #2c2410; }
.lvl-warn { color: var(--warn); background: #2c2410; } .lvl-warn { color: var(--warn); background: #2c2410; }
.msg { font-size: .92rem; font-weight: 500; } .msg { font-size: .92rem; font-weight: 500; }
.fields { .fields {
lyra/web/static/recap.html
+3 -3
View File
@@ -3,10 +3,10 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<meta name="theme-color" content="#0b0d12" /> <meta name="theme-color" content="#070707" />
<title>Lyra — Recap</title> <title>Lyra — Recap</title>
<style> <style>
:root{--bg:#0b0d12;--bg-elev:#141821;--bg-line:#11141b;--border:#232936;--text:#e6e9ef;--fade:#8b93a7;--accent:#7aa2ff;} :root{--bg:#070707;--bg-elev:#0e0e0e;--bg-line:#141414;--border:#2a1d12;--text:#e8e8e8;--fade:#8a8a8a;--accent:#ff7a00;}
*{box-sizing:border-box;} *{box-sizing:border-box;}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text); html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%;} font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%;}
@@ -15,7 +15,7 @@
.topbar{display:flex;align-items:center;gap:10px;padding:12px 0;flex-wrap:wrap;} .topbar{display:flex;align-items:center;gap:10px;padding:12px 0;flex-wrap:wrap;}
.topbar h1{font-size:1.02rem;margin:0;font-weight:600;} .topbar h1{font-size:1.02rem;margin:0;font-weight:600;}
.topbar a.back{color:var(--accent);text-decoration:none;font-size:.92rem;} .topbar a.back{color:var(--accent);text-decoration:none;font-size:.92rem;}
.dl{margin-left:auto;background:#1b2333;border:1px solid var(--border);color:var(--accent); .dl{margin-left:auto;background:#241400;border:1px solid var(--border);color:var(--accent);
border-radius:8px;padding:7px 12px;font-size:.85rem;text-decoration:none;} border-radius:8px;padding:7px 12px;font-size:.85rem;text-decoration:none;}
main{max-width:740px;margin:0 auto;padding:18px 16px 48px;line-height:1.6;} main{max-width:740px;margin:0 auto;padding:18px 16px 48px;line-height:1.6;}
h1,h2,h3,h4{line-height:1.3;color:var(--text);} h1,h2,h3,h4{line-height:1.3;color:var(--text);}
lyra/web/static/self.html
+5 -5
View File
@@ -3,13 +3,13 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<meta name="theme-color" content="#0b0d12" /> <meta name="theme-color" content="#070707" />
<title>Lyra — Mind</title> <title>Lyra — Mind</title>
<style> <style>
:root { :root {
--bg: #0b0d12; --bg-elev: #141821; --bg-line: #11141b; --border: #232936; --bg: #070707; --bg-elev: #0e0e0e; --bg-line: #141414; --border: #2a1d12;
--text: #e6e9ef; --fade: #8b93a7; --accent: #7aa2ff; --text: #e8e8e8; --fade: #8a8a8a; --accent: #ff7a00;
--good: #5ad1a0; --mid: #ffcf6b; --low: #ff6b6b; --violet: #c08bff; --good: #8fd694; --mid: #ffb347; --low: #ff6b6b; --violet: #ffb347;
} }
* { box-sizing: border-box; } * { box-sizing: border-box; }
html, body { html, body {
@@ -26,7 +26,7 @@
.topbar a.back { color: var(--accent); text-decoration: none; font-size: .95rem; } .topbar a.back { color: var(--accent); text-decoration: none; font-size: .95rem; }
.updated { margin-left: auto; color: var(--fade); font-size: .78rem; } .updated { margin-left: auto; color: var(--fade); font-size: .78rem; }
#reflectBtn { #reflectBtn {
background: #1b2333; border: 1px solid var(--border); color: var(--accent); background: #241400; border: 1px solid var(--border); color: var(--accent);
border-radius: 8px; padding: 6px 11px; font-size: .82rem; cursor: pointer; border-radius: 8px; padding: 6px 11px; font-size: .82rem; cursor: pointer;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
} }
lyra/web/static/style.css
+63 -63
View File
@@ -1,9 +1,9 @@
:root { :root {
--bg-dark: #0a0a0a; --bg-dark: #070707;
--bg-panel: rgba(255, 115, 0, 0.1); --bg-panel: rgba(255, 122, 0, 0.1);
--accent: #ff6600; --accent: #ff7a00;
--accent-glow: 0 0 12px #ff6600cc; --accent-glow: 0 0 6px rgba(255,122,0,0.28);
--text-main: #e6e6e6; --text-main: #e8e8e8;
--text-fade: #999; --text-fade: #999;
--font-console: "IBM Plex Mono", monospace; --font-console: "IBM Plex Mono", monospace;
} }
@@ -11,20 +11,20 @@
/* Light mode variables */ /* Light mode variables */
body { body {
--bg-dark: #f5f5f5; --bg-dark: #f5f5f5;
--bg-panel: rgba(255, 115, 0, 0.05); --bg-panel: rgba(255, 122, 0, 0.05);
--accent: #ff6600; --accent: #ff7a00;
--accent-glow: 0 0 12px #ff6600cc; --accent-glow: 0 0 6px rgba(255,122,0,0.28);
--text-main: #1a1a1a; --text-main: #1a1a1a;
--text-fade: #666; --text-fade: #666;
} }
/* Dark mode variables */ /* Dark mode variables */
body.dark { body.dark {
--bg-dark: #0a0a0a; --bg-dark: #070707;
--bg-panel: rgba(255, 115, 0, 0.1); --bg-panel: rgba(255, 122, 0, 0.1);
--accent: #ff6600; --accent: #ff7a00;
--accent-glow: 0 0 12px #ff6600cc; --accent-glow: 0 0 6px rgba(255,122,0,0.28);
--text-main: #e6e6e6; --text-main: #e8e8e8;
--text-fade: #999; --text-fade: #999;
} }
@@ -59,7 +59,7 @@ body {
gap: 8px; gap: 8px;
padding: 8px 12px; padding: 8px 12px;
border-bottom: 1px solid var(--accent); border-bottom: 1px solid var(--accent);
background-color: rgba(255, 102, 0, 0.05); background-color: rgba(255, 122, 0, 0.05);
} }
#status { #status {
justify-content: flex-start; justify-content: flex-start;
@@ -82,13 +82,13 @@ button:hover, select:hover {
} }
#thinkingStreamBtn { #thinkingStreamBtn {
background: rgba(138, 43, 226, 0.2); background: rgba(255, 179, 71, 0.2);
border-color: #8a2be2; border-color: #ffb347;
} }
#thinkingStreamBtn:hover { #thinkingStreamBtn:hover {
box-shadow: 0 0 8px #8a2be2; box-shadow: 0 0 8px #ffb347;
background: rgba(138, 43, 226, 0.3); background: rgba(255, 179, 71, 0.3);
} }
/* Chat area */ /* Chat area */
@@ -109,17 +109,17 @@ button:hover, select:hover {
border-radius: 8px; border-radius: 8px;
line-height: 1.4; line-height: 1.4;
word-wrap: break-word; word-wrap: break-word;
box-shadow: 0 0 8px rgba(255,102,0,0.2); box-shadow: 0 0 8px rgba(255,122,0,0.2);
} }
.msg.user { .msg.user {
align-self: flex-end; align-self: flex-end;
background: rgba(255,102,0,0.15); background: rgba(255,122,0,0.15);
border: 1px solid var(--accent); border: 1px solid var(--accent);
} }
.msg.assistant { .msg.assistant {
align-self: flex-start; align-self: flex-start;
background: rgba(255,102,0,0.08); background: rgba(255,122,0,0.08);
border: 1px solid rgba(255,102,0,0.5); border: 1px solid rgba(255,122,0,0.5);
} }
.msg.system { .msg.system {
align-self: center; align-self: center;
@@ -131,7 +131,7 @@ button:hover, select:hover {
#input { #input {
display: flex; display: flex;
border-top: 1px solid var(--accent); border-top: 1px solid var(--accent);
background: rgba(255, 102, 0, 0.05); background: rgba(255, 122, 0, 0.05);
padding: 10px; padding: 10px;
} }
#userInput { #userInput {
@@ -164,13 +164,13 @@ button:hover, select:hover {
} }
@keyframes pulseGreen { @keyframes pulseGreen {
0% { box-shadow: 0 0 5px #00ff66; opacity: 0.9; } 0% { box-shadow: 0 0 5px #8fd694; opacity: 0.9; }
50% { box-shadow: 0 0 20px #00ff99; opacity: 1; } 50% { box-shadow: 0 0 10px #8fd694; opacity: 1; }
100% { box-shadow: 0 0 5px #00ff66; opacity: 0.9; } 100% { box-shadow: 0 0 5px #8fd694; opacity: 0.9; }
} }
.dot.ok { .dot.ok {
background: #00ff66; background: #8fd694;
animation: pulseGreen 2s infinite ease-in-out; animation: pulseGreen 2s infinite ease-in-out;
} }
@@ -200,7 +200,7 @@ select option {
select:focus, select:focus,
select:hover { select:hover {
outline: none; outline: none;
border-color: #ff7a33; border-color: #ff8a00;
background-color: var(--bg-panel); background-color: var(--bg-panel);
} }
@@ -235,10 +235,10 @@ select:hover {
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
background: linear-gradient(180deg, rgba(255,102,0,0.1) 0%, rgba(10,10,10,0.95) 100%); background: linear-gradient(180deg, rgba(255,122,0,0.1) 0%, rgba(10,10,10,0.95) 100%);
border: 2px solid var(--accent); border: 2px solid var(--accent);
border-radius: 12px; border-radius: 12px;
box-shadow: var(--accent-glow), 0 0 40px rgba(255,102,0,0.3); box-shadow: var(--accent-glow);
min-width: 400px; min-width: 400px;
max-width: 600px; max-width: 600px;
max-height: 80vh; max-height: 80vh;
@@ -252,7 +252,7 @@ select:hover {
align-items: center; align-items: center;
padding: 16px 20px; padding: 16px 20px;
border-bottom: 1px solid var(--accent); border-bottom: 1px solid var(--accent);
background: rgba(255,102,0,0.1); background: rgba(255,122,0,0.1);
} }
.modal-header h3 { .modal-header h3 {
@@ -277,7 +277,7 @@ select:hover {
} }
.close-btn:hover { .close-btn:hover {
background: rgba(255,102,0,0.2); background: rgba(255,122,0,0.2);
box-shadow: 0 0 8px var(--accent); box-shadow: 0 0 8px var(--accent);
} }
@@ -307,17 +307,17 @@ select:hover {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 12px; padding: 12px;
border: 1px solid rgba(255,102,0,0.3); border: 1px solid rgba(255,122,0,0.3);
border-radius: 6px; border-radius: 6px;
background: rgba(255,102,0,0.05); background: rgba(255,122,0,0.05);
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.2s;
} }
.radio-label:hover { .radio-label:hover {
border-color: var(--accent); border-color: var(--accent);
background: rgba(255,102,0,0.1); background: rgba(255,122,0,0.1);
box-shadow: 0 0 8px rgba(255,102,0,0.3); box-shadow: 0 0 8px rgba(255,122,0,0.3);
} }
.radio-label input[type="radio"] { .radio-label input[type="radio"] {
@@ -341,7 +341,7 @@ select:hover {
margin-left: 24px; margin-left: 24px;
padding: 6px; padding: 6px;
background: rgba(0,0,0,0.3); background: rgba(0,0,0,0.3);
border: 1px solid rgba(255,102,0,0.5); border: 1px solid rgba(255,122,0,0.5);
border-radius: 4px; border-radius: 4px;
color: var(--text-main); color: var(--text-main);
font-family: var(--font-console); font-family: var(--font-console);
@@ -350,7 +350,7 @@ select:hover {
.radio-label input[type="text"]:focus { .radio-label input[type="text"]:focus {
outline: none; outline: none;
border-color: var(--accent); border-color: var(--accent);
box-shadow: 0 0 8px rgba(255,102,0,0.3); box-shadow: 0 0 8px rgba(255,122,0,0.3);
} }
.modal-footer { .modal-footer {
@@ -359,7 +359,7 @@ select:hover {
gap: 10px; gap: 10px;
padding: 16px 20px; padding: 16px 20px;
border-top: 1px solid var(--accent); border-top: 1px solid var(--accent);
background: rgba(255,102,0,0.05); background: rgba(255,122,0,0.05);
} }
.primary-btn { .primary-btn {
@@ -369,7 +369,7 @@ select:hover {
} }
.primary-btn:hover { .primary-btn:hover {
background: #ff7a33; background: #ff8a00;
box-shadow: var(--accent-glow); box-shadow: var(--accent-glow);
} }
@@ -387,15 +387,15 @@ select:hover {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 12px; padding: 12px;
border: 1px solid rgba(255,102,0,0.3); border: 1px solid rgba(255,122,0,0.3);
border-radius: 6px; border-radius: 6px;
background: rgba(255,102,0,0.05); background: rgba(255,122,0,0.05);
transition: all 0.2s; transition: all 0.2s;
} }
.session-item:hover { .session-item:hover {
border-color: var(--accent); border-color: var(--accent);
background: rgba(255,102,0,0.1); background: rgba(255,122,0,0.1);
} }
.session-info { .session-info {
@@ -417,7 +417,7 @@ select:hover {
.session-delete-btn { .session-delete-btn {
background: transparent; background: transparent;
border: 1px solid rgba(255,102,0,0.5); border: 1px solid rgba(255,122,0,0.5);
color: var(--accent); color: var(--accent);
padding: 6px 10px; padding: 6px 10px;
border-radius: 4px; border-radius: 4px;
@@ -436,7 +436,7 @@ select:hover {
/* Thinking Stream Panel */ /* Thinking Stream Panel */
.thinking-panel { .thinking-panel {
border-top: 1px solid var(--accent); border-top: 1px solid var(--accent);
background: rgba(255, 102, 0, 0.02); background: rgba(255, 122, 0, 0.02);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
transition: max-height 0.3s ease; transition: max-height 0.3s ease;
@@ -452,16 +452,16 @@ select:hover {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 10px 12px; padding: 10px 12px;
background: rgba(255, 102, 0, 0.08); background: rgba(255, 122, 0, 0.08);
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
border-bottom: 1px solid rgba(255, 102, 0, 0.2); border-bottom: 1px solid rgba(255, 122, 0, 0.2);
font-size: 0.9rem; font-size: 0.9rem;
font-weight: 500; font-weight: 500;
} }
.thinking-header:hover { .thinking-header:hover {
background: rgba(255, 102, 0, 0.12); background: rgba(255, 122, 0, 0.12);
} }
.thinking-controls { .thinking-controls {
@@ -479,8 +479,8 @@ select:hover {
} }
.thinking-status-dot.connected { .thinking-status-dot.connected {
background: #00ff66; background: #8fd694;
box-shadow: 0 0 8px #00ff66; box-shadow: 0 0 8px #8fd694;
} }
.thinking-status-dot.disconnected { .thinking-status-dot.disconnected {
@@ -490,7 +490,7 @@ select:hover {
.thinking-clear-btn, .thinking-clear-btn,
.thinking-toggle-btn { .thinking-toggle-btn {
background: transparent; background: transparent;
border: 1px solid rgba(255, 102, 0, 0.5); border: 1px solid rgba(255, 122, 0, 0.5);
color: var(--text-main); color: var(--text-main);
padding: 4px 8px; padding: 4px 8px;
border-radius: 4px; border-radius: 4px;
@@ -500,8 +500,8 @@ select:hover {
.thinking-clear-btn:hover, .thinking-clear-btn:hover,
.thinking-toggle-btn:hover { .thinking-toggle-btn:hover {
background: rgba(255, 102, 0, 0.2); background: rgba(255, 122, 0, 0.2);
box-shadow: 0 0 6px rgba(255, 102, 0, 0.3); box-shadow: 0 0 6px rgba(255, 122, 0, 0.3);
} }
.thinking-toggle-btn { .thinking-toggle-btn {
@@ -560,14 +560,14 @@ select:hover {
} }
.thinking-event-connected { .thinking-event-connected {
background: rgba(0, 255, 102, 0.1); background: rgba(0, 255, 122, 0.1);
border-color: #00ff66; border-color: #8fd694;
color: #00ff66; color: #8fd694;
} }
.thinking-event-thinking { .thinking-event-thinking {
background: rgba(138, 43, 226, 0.1); background: rgba(255, 179, 71, 0.1);
border-color: #8a2be2; border-color: #ffb347;
color: #c79cff; color: #c79cff;
} }
@@ -689,7 +689,7 @@ select:hover {
flex-direction: column; flex-direction: column;
gap: 8px; gap: 8px;
padding-bottom: 16px; padding-bottom: 16px;
border-bottom: 1px solid rgba(255, 102, 0, 0.3); border-bottom: 1px solid rgba(255, 122, 0, 0.3);
} }
.mobile-menu-section:last-child { .mobile-menu-section:last-child {
@@ -935,12 +935,12 @@ select:hover {
.log-info { border-left-color: #00bfff; } .log-info { border-left-color: #00bfff; }
.log-info .log-level { color: #7dd3fc; } .log-info .log-level { color: #7dd3fc; }
.log-debug { border-left-color: #8a2be2; } .log-debug { border-left-color: #ffb347; }
.log-debug .log-level { color: #c79cff; } .log-debug .log-level { color: #c79cff; }
.log-error { border-left-color: #ff3333; background: rgba(255,51,51,0.08); } .log-error { border-left-color: #ff3333; background: rgba(255,51,51,0.08); }
.log-error .log-level, .log-error .log-msg { color: #fca5a5; } .log-error .log-level, .log-error .log-msg { color: #fca5a5; }
.log-system { border-left-color: #00ff66; } .log-system { border-left-color: #8fd694; }
.log-system .log-level { color: #00ff66; } .log-system .log-level { color: #8fd694; }
.log-detail { width: 100%; margin-top: 4px; } .log-detail { width: 100%; margin-top: 4px; }
.log-detail summary { .log-detail summary {
@@ -990,7 +990,7 @@ select:hover {
background: rgba(255,255,255,0.08); padding: 1px 5px; border-radius: 4px; background: rgba(255,255,255,0.08); padding: 1px 5px; border-radius: 4px;
} }
.msg.assistant pre { .msg.assistant pre {
background: rgba(0,0,0,0.32); border: 1px solid rgba(255,102,0,0.3); background: rgba(0,0,0,0.32); border: 1px solid rgba(255,122,0,0.3);
border-radius: 6px; padding: 10px 12px; margin: 8px 0; overflow-x: auto; border-radius: 6px; padding: 10px 12px; margin: 8px 0; overflow-x: auto;
} }
.msg.assistant pre code { background: none; padding: 0; font-size: 0.85em; } .msg.assistant pre code { background: none; padding: 0; font-size: 0.85em; }