diff --git a/client/src/pages/Report.tsx b/client/src/pages/Report.tsx index 1d11c02..289bb51 100644 --- a/client/src/pages/Report.tsx +++ b/client/src/pages/Report.tsx @@ -64,31 +64,185 @@ export default function Report() { return `${baseUrl}${content.pptPath}`; }; - // Remove margins and padding from iframe content + // Enhance report styling const handleReportLoad = (e: React.SyntheticEvent) => { try { const iframe = e.currentTarget; const iframeDoc = iframe.contentDocument || iframe.contentWindow?.document; - if (iframeDoc) { + if (iframeDoc && iframeDoc.body) { + // Wrap all body content in a container if not already wrapped + if (!iframeDoc.querySelector('.sapiens-report-wrapper')) { + const wrapper = iframeDoc.createElement('div'); + wrapper.className = 'sapiens-report-wrapper'; + while (iframeDoc.body.firstChild) { + wrapper.appendChild(iframeDoc.body.firstChild); + } + iframeDoc.body.appendChild(wrapper); + } + const style = iframeDoc.createElement('style'); style.textContent = ` html, body { margin: 0 !important; padding: 0 !important; + background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%) !important; + max-width: none !important; + width: 100% !important; } - body > * { - margin: 0 !important; + + body { + padding: 48px 32px !important; } - h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { + + .sapiens-report-wrapper { + background: white !important; + border-radius: 16px !important; + box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important; + padding: 56px !important; + max-width: 1000px !important; + margin: 0 auto !important; + } + + h1 { + font-size: 36px !important; + font-weight: 700 !important; + color: #1a202c !important; + margin-bottom: 28px !important; margin-top: 0 !important; + padding-bottom: 20px !important; + border-bottom: 3px solid #3b82f6 !important; + background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important; + -webkit-background-clip: text !important; + -webkit-text-fill-color: transparent !important; + background-clip: text !important; } - .report, .container, .page, .content { - margin: 0 !important; - padding: 8px !important; + + h2 { + font-size: 26px !important; + font-weight: 600 !important; + color: #2d3748 !important; + margin-top: 44px !important; + margin-bottom: 18px !important; + padding-bottom: 10px !important; + border-bottom: 2px solid #e2e8f0 !important; } + + h3 { + font-size: 22px !important; + font-weight: 600 !important; + color: #374151 !important; + margin-top: 32px !important; + margin-bottom: 14px !important; + } + + h4 { + font-size: 19px !important; + font-weight: 600 !important; + color: #4b5563 !important; + margin-top: 26px !important; + margin-bottom: 12px !important; + } + + p { + font-size: 17px !important; + line-height: 1.8 !important; + color: #374151 !important; + margin-bottom: 18px !important; + text-align: justify !important; + } + + .metadata { + background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important; + padding: 24px !important; + border-radius: 12px !important; + border-left: 4px solid #3b82f6 !important; + margin-bottom: 36px !important; + font-size: 15px !important; + color: #1e40af !important; + text-align: center !important; + } + + .section { + margin-bottom: 36px !important; + } + + ul, ol { + margin-bottom: 20px !important; + padding-left: 32px !important; + } + + li { + font-size: 17px !important; + line-height: 1.8 !important; + color: #4b5563 !important; + margin-bottom: 10px !important; + } + + .highlight { + background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important; + padding: 24px !important; + border-left: 4px solid #f59e0b !important; + border-radius: 10px !important; + margin: 28px 0 !important; + box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08) !important; + } + + .quote { + background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%) !important; + padding: 24px 28px !important; + border-left: 4px solid #6b7280 !important; + border-radius: 10px !important; + margin: 28px 0 !important; + font-style: italic !important; + color: #374151 !important; + box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08) !important; + } + + strong { + font-weight: 700 !important; + color: #1f2937 !important; + } + + img { + max-width: 100% !important; + height: auto !important; + border-radius: 12px !important; + box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.15) !important; + margin: 20px 0 !important; + } + + table { + max-width: 100% !important; + width: 100% !important; + border-collapse: collapse !important; + margin: 20px 0 !important; + } + + table, iframe { + max-width: 100% !important; + } + @page { margin: 0 !important; } + + @media (max-width: 768px) { + .sapiens-report-wrapper { + padding: 32px 24px !important; + } + + h1 { + font-size: 28px !important; + } + + h2 { + font-size: 22px !important; + } + + h3 { + font-size: 19px !important; + } + } `; iframeDoc.head.appendChild(style); }