diff --git a/scripts/mirror.js b/scripts/mirror.js
index e30f42e..2271ecd 100644
--- a/scripts/mirror.js
+++ b/scripts/mirror.js
@@ -143,14 +143,21 @@ async function main() {
await page.screenshot({ path: pngPath, fullPage: true, type: 'png' });
console.log(`[mirror] screenshot: ${pngPath} (${fs.statSync(pngPath).size} bytes)`);
- // Decide gap position — mid-point between question 1 and question 2
- let chatTop = Math.round(pageHeight / 3);
- if (quePositions.length >= 2) {
- chatTop = Math.round((quePositions[0].bottom + quePositions[1].top) / 2 - 30);
+ // One chat slot per gap (between Q1-Q2, between Q2-Q3, ...)
+ const slots = [];
+ for (let i = 0; i < quePositions.length - 1; i++) {
+ slots.push({ id: i + 1, top: Math.round(quePositions[i].bottom + 20) });
}
+ console.log(`[mirror] chat slots:`, slots);
const pageTitle = (await page.title()).replace(/[<>]/g, '');
+ const chatBlocks = slots.map(s => `
+
`).join('');
+
const wrapperHtml = `
@@ -163,81 +170,129 @@ async function main() {
.q-wrap img.bg { display:block; width:100%; height:auto; }
.q-chat {
position: absolute;
- left: 50%;
- transform: translateX(-50%);
- top: ${chatTop}px;
- width: 720px;
- max-width: 94%;
+ left: 250px;
+ width: 520px;
z-index: 10;
background: #fff;
- padding: 8px 0;
}
- .q-chat textarea {
- display: block;
- width: 100%;
- border: 1px solid #e0e0e0;
- border-radius: 4px;
- background: #fff;
- color: #333;
- font-size: 14px;
- line-height: 1.5;
- padding: 8px 12px;
- resize: none;
- height: 34px;
- font-family: inherit;
- outline: none;
- box-sizing: border-box;
+ .q-chat .c-in {
+ display: block; width: 100%;
+ border: 1px solid #e0e0e0; border-radius: 4px;
+ background: #fff; color: #333;
+ font-size: 14px; line-height: 1.5;
+ padding: 8px 12px; resize: none;
+ height: 34px; font-family: inherit;
+ outline: none; box-sizing: border-box;
}
- .q-chat textarea::placeholder { color: #bbb; }
- .q-chat .out {
- margin-top: 8px;
- min-height: 0;
- padding: 6px 12px;
- font-size: 12px;
- color: #888;
- line-height: 1.5;
- white-space: pre-wrap;
- word-break: break-word;
+ .q-chat .c-in::placeholder { color: #bbb; }
+ .q-chat .c-out {
+ margin-top: 6px; padding: 6px 12px;
+ font-size: 12px; color: #888; line-height: 1.5;
+ white-space: pre-wrap; word-break: break-word;
font-family: Arial, sans-serif;
}
- .q-chat .out:empty { padding: 0; }
- .q-chat .out code { background:#f5f5f5; padding:1px 4px; border-radius:3px; font-family:Consolas,monospace; font-size:11px; }
- .q-chat .out pre { background:#f5f5f5; padding:8px; border-radius:4px; overflow-x:auto; margin:4px 0; }
+ .q-chat .c-out:empty { padding: 0; }
+ .q-chat .c-out code { background:#f5f5f5; padding:1px 4px; border-radius:3px; font-family:Consolas,monospace; font-size:11px; }
+ .q-chat .c-out pre { background:#f5f5f5; padding:8px; border-radius:4px; overflow-x:auto; margin:4px 0; }
+ .q-chat .badge {
+ display:inline-block; margin-left:8px; font-size:11px; color:#bbb;
+ vertical-align:middle;
+ }

-
+ ${chatBlocks}
`;
fs.writeFileSync(path.join(OUT, 'index.html'), wrapperHtml, 'utf8');
- console.log(`[mirror] wrote ${path.join(OUT, 'index.html')} — chat at y=${chatTop}px`);
+ console.log(`[mirror] wrote ${path.join(OUT, 'index.html')} — ${slots.length} chat slot(s)`);
await browser.close();
console.log('[mirror] done');