Quest Character Sheet Generator

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_205":206,"_207":208},"routes/_app.x.$handle.$name",{"_114":113,"_34":62,"_123":102,"_29":124,"_13":14,"_125":-5,"_11":126,"_127":128,"_129":130,"_131":132,"_133":134,"_23":-5,"_135":-5,"_136":137,"_138":27,"_139":140,"_141":142,"_143":-5,"_144":-5,"_145":146},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_60":61,"_34":62,"_39":63,"_64":-5,"_65":27,"_66":67,"_68":67,"_69":70,"_71":-5,"_18":72,"_73":-5,"_74":27,"_75":-5,"_76":-5,"_77":78,"_79":80,"_81":-5,"_82":-5,"_83":-5,"_84":-5,"_85":86,"_87":86,"_88":89,"_90":89,"_91":89,"_92":86,"_93":86,"_94":95,"_96":97,"_98":99,"_100":27},"version",1,"changes",[19,20,21,22],"aiChatInfo","userId",{"_23":55,"_25":-7,"_26":27,"_28":27,"_29":56,"_31":56},{"_23":50,"_25":-7,"_26":27,"_28":27,"_29":51,"_31":51},{"_23":44,"_25":-7,"_26":27,"_28":27,"_29":45,"_31":45},{"_23":24,"_25":-7,"_26":27,"_28":27,"_29":30,"_31":30},"file",{"_32":33,"_34":30,"_35":36,"_37":38,"_39":40,"_41":14,"_42":43,"_26":27},"previous","deleted",false,"deletedHere","path","styles.ts","latestPath","fileId","019b8a12-65d9-77d3-add3-72c324ba8625","name","fileType","script","content","export const styles = `\n* { box-sizing: border-box; margin: 0; padding: 0; }\n:root { --ink: #1a1a1a; --accent: #7c3aed; --bg: #18181b; --card: #27272a; --border: #3f3f46; }\nbody { font-family: Georgia, serif; background: var(--bg); color: #e4e4e7; display: flex; height: 100vh; overflow: hidden; }\n\n.sidebar { width: 280px; background: var(--card); display: flex; flex-direction: column; padding: 12px; border-right: 1px solid var(--border); overflow-y: auto; }\n.sidebar-title { font-family: Georgia, serif; font-weight: 900; font-size: 22px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }\n.sidebar-title span { color: var(--accent); }\n\n.section { margin-bottom: 12px; }\n.label { font-family: Arial, sans-serif; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #71717a; margin-bottom: 4px; }\n\ntextarea { width: 100%; height: 70px; background: var(--bg); border: 1px solid var(--border); color: #e4e4e7; font-family: monospace; font-size: 9px; padding: 6px; border-radius: 4px; resize: none; }\ntextarea:focus { outline: none; border-color: var(--accent); }\n\nselect { width: 100%; background: var(--bg); border: 1px solid var(--border); color: #e4e4e7; padding: 6px 8px; border-radius: 4px; font-size: 11px; }\n\n.btn { background: var(--border); color: white; border: none; padding: 8px 12px; border-radius: 4px; font-family: Arial, sans-serif; font-weight: 700; font-size: 10px; text-transform: uppercase; cursor: pointer; transition: all 0.15s; }\n.btn:hover { background: #52525b; }\n.btn:disabled { opacity: 0.5; cursor: not-allowed; }\n.btn-primary { background: var(--accent); }\n.btn-primary:hover { background: #6d28d9; }\n.btn-row { display: flex; gap: 4px; margin-top: 6px; }\n.btn-row .btn { flex: 1; padding: 6px; font-size: 9px; }\n\n.char-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; margin: 6px 0; min-height: 100px; }\n.char-item { display: flex; align-items: center; gap: 8px; padding: 8px; background: var(--bg); border-radius: 4px; cursor: pointer; border: 1px solid transparent; }\n.char-item:hover { border-color: var(--border); }\n.char-item.active { border-color: var(--accent); background: rgba(124, 58, 237, 0.1); }\n.char-item input[type=\"checkbox\"] { accent-color: var(--accent); }\n.char-name { font-family: Georgia, serif; font-weight: 700; font-size: 13px; }\n.char-role { font-size: 9px; color: #71717a; text-transform: uppercase; font-family: Arial, sans-serif; }\n\n.preview-area { flex: 1; padding: 20px; overflow: auto; background: #09090b; display: flex; justify-content: center; }\n\n.paper { width: 210mm; min-height: 297mm; background: white; color: var(--ink); box-shadow: 0 4px 24px rgba(0,0,0,0.5); padding: 6mm; position: relative; display: flex; flex-direction: column; font-family: Georgia, serif; }\n\n/* ===== PDF-MATCHING PREVIEW STYLES ===== */\n\n/* Top half layout */\n.pdf-top-half { display: flex; gap: 5mm; margin-bottom: 2mm; }\n\n/* Left column: portrait + stats */\n.pdf-left-col { width: 40mm; flex-shrink: 0; }\n.pdf-portrait { width: 40mm; height: 60mm; border: 1px solid var(--ink); overflow: hidden; background: #fafafa; display: flex; align-items: center; justify-content: center; cursor: pointer; }\n.pdf-portrait:hover { background: #f0f0f0; }\n.pdf-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }\n.portrait-placeholder { font-family: Arial, sans-serif; font-size: 9pt; color: #999; text-align: center; padding: 10px; line-height: 1.4; }\n\n.pdf-stats-row { display: flex; gap: 4mm; margin-top: 2mm; }\n.pdf-stat-box { flex: 1; border: 1px solid var(--ink); text-align: center; padding: 1mm; }\n.pdf-stat-label { font-family: Arial, sans-serif; font-weight: 700; font-size: 9pt; }\n.pdf-stat-value { font-family: Georgia, serif; font-size: 14pt; font-weight: 700; min-height: 6mm; }\n\n/* Right column: name, role, bio, traits */\n.pdf-right-col { flex: 1; display: flex; flex-direction: column; }\n.pdf-name { font-family: Georgia, serif; font-weight: 700; font-size: 24pt; line-height: 1; border-bottom: 1px solid var(--ink); padding-bottom: 1mm; margin-bottom: 1mm; }\n.pdf-role { font-family: Arial, sans-serif; font-weight: 700; font-size: 11pt; color: #555; letter-spacing: 0.5px; margin-bottom: 2mm; }\n.pdf-bio { font-family: Georgia, serif; font-size: 11pt; line-height: 1.4; font-style: italic; color: var(--ink); margin-bottom: 2mm; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }\n\n.pdf-traits { display: flex; gap: 8mm; margin-top: auto; }\n.pdf-trait { display: flex; flex-direction: column; }\n.pdf-trait-label { font-family: Arial, sans-serif; font-size: 7pt; font-weight: 700; color: #888; text-transform: uppercase; }\n.pdf-trait-value { font-family: Georgia, serif; font-size: 12pt; font-weight: 700; }\n\n/* Bottom row: abilities + inventory */\n.pdf-bottom-row { display: flex; gap: 4mm; margin-top: 2mm; }\n\n.pdf-abilities-col { flex: 1; }\n.pdf-inventory-col { width: 50%; flex-shrink: 0; }\n\n.pdf-section-header { font-family: Arial, sans-serif; font-weight: 700; font-size: 9pt; text-transform: uppercase; background: var(--ink); color: white; padding: 1.5mm 2mm; text-align: center; }\n.pdf-section-content { padding: 2mm; }\n\n.pdf-ability { padding: 2mm 0; color: var(--ink); }\n.pdf-ability-path { font-family: Arial, sans-serif; font-weight: 700; font-size: 8pt; color: #666; }\n.pdf-ability-name { font-family: Georgia, serif; font-weight: 700; font-size: 11pt; color: var(--ink); }\n.pdf-inv-item { font-family: Georgia, serif; font-size: 12pt; padding: 1mm 0; color: var(--ink); }\n\n/* Fold line */\n.pdf-fold-line { border-top: 2px dashed #bbb; margin: 4mm 0; }\n\n/* Bottom half (back) */\n.pdf-bottom-half { display: flex; gap: 5mm; flex: 1; }\n\n.pdf-back-text { flex: 1; display: flex; flex-direction: column; }\n.pdf-back-name { font-family: Georgia, serif; font-weight: 700; font-size: 18pt; border-bottom: 1px solid var(--ink); padding-bottom: 1mm; margin-bottom: 2mm; }\n.pdf-back-section-label { font-family: Arial, sans-serif; font-size: 8pt; font-weight: 700; color: #888; text-transform: uppercase; margin-top: 2mm; margin-bottom: 1mm; }\n.pdf-back-text-content { font-family: Georgia, serif; font-size: 11pt; line-height: 1.45; color: #333; }\n.pdf-italic { font-style: italic; }\n\n.pdf-back-portrait { width: 55mm; height: 82.5mm; flex-shrink: 0; border: 1px solid var(--ink); overflow: hidden; }\n.pdf-back-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }\n\n.quest-footer { position: absolute; bottom: 4mm; left: 0; right: 0; text-align: center; font-family: Arial, sans-serif; font-size: 6pt; color: #aaa; text-transform: uppercase; letter-spacing: 1.5px; }\n\n.status { font-size: 10px; color: #71717a; margin-top: 4px; min-height: 14px; }\n.error { color: #f87171; font-size: 10px; margin-top: 4px; display: none; }\n`;\n","createdAt",["D",1767548020191],"branchVersion","branchId","8229dac8-e993-11f0-8ee6-42dde27851f2",{"_32":46,"_34":45,"_35":47,"_37":48,"_39":49,"_41":14,"_42":43,"_26":27},"main.ts","019b8a12-65d9-77d3-add3-6ca3290fb92e","http","import { styles } from \"./styles.ts\";\nimport { clientScript } from \"./client.ts\";\n\nexport default async function(req: Request): Promise {\n return new Response(renderHTML(), { \n headers: { \"Content-Type\": \"text/html\" } \n });\n}\n\nfunction renderHTML(): string {\n return `\n\n\n \n \n Quest Character Sheet Generator\n

Diff · v1