From bb8ed6021675a08f72801f69bd5c1fab6c97adb7 Mon Sep 17 00:00:00 2001 From: DevSoftTech Server Date: Tue, 4 Aug 2026 02:30:38 +0530 Subject: [PATCH] fix: repair broken @media print CSS and add PDF tips modal MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Fixed split @media print blocks that caused all print rules to be orphaned (gallery section had added its own block which broke the main rules) - Consolidated into one clean @media print block with proper A4 settings - Print improvements: cover fills page 1, intro on page 2, each section starts on new page, screenshots print at fixed height, 3-col gallery grid - Added "How to save as PDF" button with step-by-step modal overlay - Steps guide: Destination → Save as PDF, A4 Portrait, Background graphics - Both print bar buttons hidden in @media print - @page: A4 portrait, 14mm/12mm/18mm margins, first page margin 0 --- HMS_FEATURES_PRESENTATION.html | 121 +++++++++++++++++++------- public/HMS_FEATURES_PRESENTATION.html | 121 +++++++++++++++++++------- 2 files changed, 176 insertions(+), 66 deletions(-) diff --git a/HMS_FEATURES_PRESENTATION.html b/HMS_FEATURES_PRESENTATION.html index 3640ef5..af491f3 100644 --- a/HMS_FEATURES_PRESENTATION.html +++ b/HMS_FEATURES_PRESENTATION.html @@ -142,14 +142,77 @@ /* ── Print-a-PDF toolbar ── */ .print-bar { position: fixed; bottom: 24px; right: 24px; z-index: 999; - display: flex; gap: 10px; + display: flex; flex-direction: column; align-items: flex-end; gap: 10px; } - .print-bar button { - background: var(--blue); color: white; border: none; border-radius: 8px; - padding: 10px 20px; font-size: 14px; font-weight: 700; cursor: pointer; - box-shadow: 0 4px 12px rgba(13,110,253,.35); display: flex; align-items: center; gap: 6px; + .print-bar .pbtn { + background: var(--blue); color: white; border: none; border-radius: 10px; + padding: 12px 22px; font-size: 14px; font-weight: 700; cursor: pointer; + box-shadow: 0 4px 16px rgba(13,110,253,.4); display: flex; align-items: center; gap: 8px; + transition: background .15s; + } + .print-bar .pbtn:hover { background: #0b5ed7; } + .print-bar .pbtn.secondary { + background: white; color: var(--dark); border: 1px solid var(--border); + font-size: 13px; padding: 8px 16px; box-shadow: 0 2px 8px rgba(0,0,0,.08); + } + .print-bar .pbtn.secondary:hover { background: #f8fafc; } + + /* PDF tips modal */ + #pdfModal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:10000; + align-items:center; justify-content:center; padding:20px; } + #pdfModal.open { display:flex; } + .pdf-modal-box { background:white; border-radius:16px; padding:32px; max-width:480px; width:100%; + box-shadow:0 24px 60px rgba(0,0,0,.2); } + .pdf-modal-box h3 { font-size:1.1rem; font-weight:800; margin-bottom:16px; } + .pdf-steps { list-style:none; padding:0; counter-reset:steps; } + .pdf-steps li { counter-increment:steps; padding:10px 0 10px 44px; position:relative; + border-bottom:1px solid #f1f5f9; font-size:.9rem; color:var(--mid); } + .pdf-steps li:last-child { border-bottom:none; } + .pdf-steps li::before { content:counter(steps); position:absolute; left:0; top:8px; + width:28px; height:28px; background:var(--blue); color:white; border-radius:50%; + display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; } + .pdf-steps li strong { color:var(--dark); } + .pdf-modal-close { margin-top:20px; width:100%; padding:10px; background:var(--blue); color:white; + border:none; border-radius:8px; font-size:14px; font-weight:700; cursor:pointer; } + + @media print { + * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } + body { background: white !important; font-size: 10.5pt; } + .print-bar, #pdfModal, #lightbox { display: none !important; } + /* cover fills first page fully */ + .cover { + page-break-after: always; + min-height: 100vh; + display: flex; flex-direction: column; align-items: center; justify-content: center; + padding: 80px 40px; + } + /* intro on its own page */ + .intro-section { page-break-after: always; box-shadow: none; border: 1pt solid #e2e8f0; } + /* each feature section starts on a new page */ + .section-title { page-break-before: always; margin-top: 0; } + .section-intro { margin-top: 6pt; } + /* no shadows, solid borders for print */ + .card, .mod-strip, .tech-card, .comp-card, .mod-tile, .gallery-item { + box-shadow: none !important; border: 1pt solid #e2e8f0 !important; + break-inside: avoid; + } + /* fix grid columns for A4 */ + .cards.col-3 { grid-template-columns: repeat(3, 1fr); } + .cards.col-2 { grid-template-columns: repeat(2, 1fr); } + .modality-grid { grid-template-columns: repeat(7, 1fr); } + .tech-grid { grid-template-columns: repeat(5, 1fr); } + .compliance-grid { grid-template-columns: repeat(4, 1fr); } + .gallery-grid { grid-template-columns: repeat(3, 1fr); } + /* screenshot images in print */ + .gallery-item .screen-img { aspect-ratio: 16/9; max-height: 120pt; } + /* table headers keep colour */ + .feat-table th { background: #0d6efd !important; color: white !important; } + footer { background: #1e293b !important; color: #94a3b8 !important; page-break-before: always; } + .container { max-width: 100%; padding: 20px 24px; } + /* running header/footer on every page */ + @page { size: A4 portrait; margin: 14mm 12mm 18mm; } + @page :first { margin: 0; } } - .print-bar button:hover { background: #0b5ed7; } /* ── Screenshots Gallery ── */ .gallery-grid { @@ -195,31 +258,6 @@ .gallery-item { break-inside: avoid; } #lightbox { display: none !important; } } - body { background: white !important; font-size: 11pt; } - .print-bar { display: none !important; } - .cover { - page-break-after: always; - padding: 100px 40px 80px; - min-height: 100vh; - display: flex; flex-direction: column; align-items: center; justify-content: center; - } - .intro-section { page-break-after: always; border: 1pt solid #e2e8f0; box-shadow: none; } - .section-title { page-break-before: always; margin-top: 0; } - .card, .mod-strip, .tech-card, .comp-card, .mod-tile { - box-shadow: none !important; border: 1pt solid #e2e8f0 !important; - break-inside: avoid; - } - .cards.col-3 { grid-template-columns: repeat(3, 1fr); } - .cards.col-2 { grid-template-columns: repeat(2, 1fr); } - .modality-grid { grid-template-columns: repeat(7, 1fr); } - .tech-grid { grid-template-columns: repeat(5, 1fr); } - .compliance-grid { grid-template-columns: repeat(4, 1fr); } - .feat-table th { background: #0d6efd !important; color: white !important; } - footer { background: #1e293b !important; color: #94a3b8 !important; } - .container { padding: 32px 24px; } - @page { size: A4; margin: 15mm 12mm; } - @page :first { margin: 0; } - } @@ -239,9 +277,26 @@ - +
- + + +
+ + +
+
+

🖨 How to Save as PDF

+
    +
  1. Click Print / Save PDF button — the browser print dialog will open.
    2. +
  2. In Destination / Printer, select Save as PDF.
    3. +
  3. Set Paper size to A4 and Layout to Portrait.
    4. +
  4. Under More settings, enable Background graphics so colours & card backgrounds print correctly.
    5. +
  5. Set Margins to None or Default.
    6. +
  6. Click Save — your PDF will be downloaded.
    7. +
+ +
diff --git a/public/HMS_FEATURES_PRESENTATION.html b/public/HMS_FEATURES_PRESENTATION.html index 3640ef5..af491f3 100644 --- a/public/HMS_FEATURES_PRESENTATION.html +++ b/public/HMS_FEATURES_PRESENTATION.html @@ -142,14 +142,77 @@ /* ── Print-a-PDF toolbar ── */ .print-bar { position: fixed; bottom: 24px; right: 24px; z-index: 999; - display: flex; gap: 10px; + display: flex; flex-direction: column; align-items: flex-end; gap: 10px; } - .print-bar button { - background: var(--blue); color: white; border: none; border-radius: 8px; - padding: 10px 20px; font-size: 14px; font-weight: 700; cursor: pointer; - box-shadow: 0 4px 12px rgba(13,110,253,.35); display: flex; align-items: center; gap: 6px; + .print-bar .pbtn { + background: var(--blue); color: white; border: none; border-radius: 10px; + padding: 12px 22px; font-size: 14px; font-weight: 700; cursor: pointer; + box-shadow: 0 4px 16px rgba(13,110,253,.4); display: flex; align-items: center; gap: 8px; + transition: background .15s; + } + .print-bar .pbtn:hover { background: #0b5ed7; } + .print-bar .pbtn.secondary { + background: white; color: var(--dark); border: 1px solid var(--border); + font-size: 13px; padding: 8px 16px; box-shadow: 0 2px 8px rgba(0,0,0,.08); + } + .print-bar .pbtn.secondary:hover { background: #f8fafc; } + + /* PDF tips modal */ + #pdfModal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:10000; + align-items:center; justify-content:center; padding:20px; } + #pdfModal.open { display:flex; } + .pdf-modal-box { background:white; border-radius:16px; padding:32px; max-width:480px; width:100%; + box-shadow:0 24px 60px rgba(0,0,0,.2); } + .pdf-modal-box h3 { font-size:1.1rem; font-weight:800; margin-bottom:16px; } + .pdf-steps { list-style:none; padding:0; counter-reset:steps; } + .pdf-steps li { counter-increment:steps; padding:10px 0 10px 44px; position:relative; + border-bottom:1px solid #f1f5f9; font-size:.9rem; color:var(--mid); } + .pdf-steps li:last-child { border-bottom:none; } + .pdf-steps li::before { content:counter(steps); position:absolute; left:0; top:8px; + width:28px; height:28px; background:var(--blue); color:white; border-radius:50%; + display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; } + .pdf-steps li strong { color:var(--dark); } + .pdf-modal-close { margin-top:20px; width:100%; padding:10px; background:var(--blue); color:white; + border:none; border-radius:8px; font-size:14px; font-weight:700; cursor:pointer; } + + @media print { + * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } + body { background: white !important; font-size: 10.5pt; } + .print-bar, #pdfModal, #lightbox { display: none !important; } + /* cover fills first page fully */ + .cover { + page-break-after: always; + min-height: 100vh; + display: flex; flex-direction: column; align-items: center; justify-content: center; + padding: 80px 40px; + } + /* intro on its own page */ + .intro-section { page-break-after: always; box-shadow: none; border: 1pt solid #e2e8f0; } + /* each feature section starts on a new page */ + .section-title { page-break-before: always; margin-top: 0; } + .section-intro { margin-top: 6pt; } + /* no shadows, solid borders for print */ + .card, .mod-strip, .tech-card, .comp-card, .mod-tile, .gallery-item { + box-shadow: none !important; border: 1pt solid #e2e8f0 !important; + break-inside: avoid; + } + /* fix grid columns for A4 */ + .cards.col-3 { grid-template-columns: repeat(3, 1fr); } + .cards.col-2 { grid-template-columns: repeat(2, 1fr); } + .modality-grid { grid-template-columns: repeat(7, 1fr); } + .tech-grid { grid-template-columns: repeat(5, 1fr); } + .compliance-grid { grid-template-columns: repeat(4, 1fr); } + .gallery-grid { grid-template-columns: repeat(3, 1fr); } + /* screenshot images in print */ + .gallery-item .screen-img { aspect-ratio: 16/9; max-height: 120pt; } + /* table headers keep colour */ + .feat-table th { background: #0d6efd !important; color: white !important; } + footer { background: #1e293b !important; color: #94a3b8 !important; page-break-before: always; } + .container { max-width: 100%; padding: 20px 24px; } + /* running header/footer on every page */ + @page { size: A4 portrait; margin: 14mm 12mm 18mm; } + @page :first { margin: 0; } } - .print-bar button:hover { background: #0b5ed7; } /* ── Screenshots Gallery ── */ .gallery-grid { @@ -195,31 +258,6 @@ .gallery-item { break-inside: avoid; } #lightbox { display: none !important; } } - body { background: white !important; font-size: 11pt; } - .print-bar { display: none !important; } - .cover { - page-break-after: always; - padding: 100px 40px 80px; - min-height: 100vh; - display: flex; flex-direction: column; align-items: center; justify-content: center; - } - .intro-section { page-break-after: always; border: 1pt solid #e2e8f0; box-shadow: none; } - .section-title { page-break-before: always; margin-top: 0; } - .card, .mod-strip, .tech-card, .comp-card, .mod-tile { - box-shadow: none !important; border: 1pt solid #e2e8f0 !important; - break-inside: avoid; - } - .cards.col-3 { grid-template-columns: repeat(3, 1fr); } - .cards.col-2 { grid-template-columns: repeat(2, 1fr); } - .modality-grid { grid-template-columns: repeat(7, 1fr); } - .tech-grid { grid-template-columns: repeat(5, 1fr); } - .compliance-grid { grid-template-columns: repeat(4, 1fr); } - .feat-table th { background: #0d6efd !important; color: white !important; } - footer { background: #1e293b !important; color: #94a3b8 !important; } - .container { padding: 32px 24px; } - @page { size: A4; margin: 15mm 12mm; } - @page :first { margin: 0; } - } @@ -239,9 +277,26 @@
- +
- + + +
+ + +
+
+

🖨 How to Save as PDF

+
    +
  1. Click Print / Save PDF button — the browser print dialog will open.
    2. +
  2. In Destination / Printer, select Save as PDF.
    3. +
  3. Set Paper size to A4 and Layout to Portrait.
    4. +
  4. Under More settings, enable Background graphics so colours & card backgrounds print correctly.
    5. +
  5. Set Margins to None or Default.
    6. +
  6. Click Save — your PDF will be downloaded.
    7. +
+ +