Desktop app (Electron + WebLLM), collector progress output, offline LoRA training script
8b38665 verified | :root { | |
| --bg: #f5f6f9; --card: #fff; --text: #16181d; --muted: #5b6270; --line: #e2e5eb; | |
| --red: #ED2939; --blue: #00A1DE; --ok: #1a7f37; --bad: #c4242f; --na: #6e7781; --pending: #9a6700; --err: #8250df; | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| :root { --bg: #0d1117; --card: #161b22; --text: #e6edf3; --muted: #9da7b3; --line: #2b313a; | |
| --ok: #3fb950; --bad: #ff6b6b; --na: #8b949e; --pending: #d29922; --err: #b392f0; } | |
| } | |
| * { box-sizing: border-box; } | |
| body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } | |
| .bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 24px; background: var(--card); border-bottom: 1px solid var(--line); } | |
| .brand { font-weight: 700; display: flex; align-items: center; gap: 8px; } | |
| .dot { width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, var(--red), var(--blue)); } | |
| .device { color: var(--muted); font-size: 13px; } | |
| main { max-width: 900px; margin: 0 auto; padding: 28px 24px 48px; } | |
| h1 { font-size: 26px; margin: 0 0 6px; } | |
| h2 { font-size: 19px; margin: 0 0 8px; } | |
| .lead { color: var(--muted); margin: 0 0 18px; } | |
| .muted { color: var(--muted); font-size: 13px; margin: 8px 0 0; } | |
| .hidden { display: none ; } | |
| .card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; margin-bottom: 16px; } | |
| .row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; } | |
| .progress { height: 10px; background: var(--line); border-radius: 999px; overflow: hidden; margin-top: 10px; } | |
| .progress.thin { height: 6px; margin: 12px 0 4px; } | |
| .progress > div { height: 100%; width: 0; background: linear-gradient(90deg, var(--blue), var(--red)); transition: width .25s; } | |
| .sections { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-bottom: 14px; } | |
| .section { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; } | |
| .section h3 { font-size: 14px; margin: 0 0 6px; display: flex; justify-content: space-between; } | |
| .section h3 span { color: var(--muted); font-weight: 500; } | |
| .section ul { margin: 0; padding-left: 18px; font-size: 13px; color: var(--muted); max-height: 170px; overflow: auto; } | |
| .option { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0 18px; font-size: 14px; } | |
| .actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; } | |
| button { font: inherit; font-weight: 600; border-radius: 10px; padding: 10px 18px; cursor: pointer; border: 1px solid transparent; } | |
| button.primary { background: var(--red); color: #fff; } | |
| button.primary:hover { filter: brightness(.95); } | |
| button.secondary { background: var(--card); color: var(--text); border-color: var(--line); } | |
| button:disabled { opacity: .5; cursor: default; } | |
| .checklist { background: var(--card); border: 1px solid var(--line); border-radius: 12px; max-height: 380px; overflow: auto; } | |
| .check { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 7px 14px; border-bottom: 1px solid var(--line); font-size: 13.5px; } | |
| .check:last-child { border-bottom: 0; } | |
| .check .icon { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line); } | |
| .check.running .icon { border-color: var(--blue); border-top-color: transparent; animation: spin .8s linear infinite; } | |
| .check.done .icon { border: 0; background: currentColor; } | |
| .check .group { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; } | |
| .s-Compliant { color: var(--ok); } .s-Non-Compliant { color: var(--bad); } .s-NotApplicable { color: var(--na); } | |
| .s-Pending { color: var(--pending); } .s-Error { color: var(--err); } | |
| .pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; } | |
| .pill { font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); } | |
| .score { font-size: 40px; font-weight: 800; line-height: 1; } | |
| .gaps { margin: 10px 0 0; padding-left: 18px; } | |
| .modal { position: fixed; inset: 0; background: rgba(10, 12, 16, .55); display: flex; align-items: center; justify-content: center; padding: 16px; } | |
| .modal-box { background: var(--card); border-radius: 14px; padding: 22px; max-width: 480px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,.35); } | |
| @keyframes spin { to { transform: rotate(360deg); } } | |