Skip to content

C
Clubphp
Commit d0024d34 authored by Mahmoud Aglan's avatar Mahmoud Aglan
Browse files
Options

pdffix

parent 97727780
Hide whitespace changes
Inline Side-by-side
Showing with 310 additions and 829 deletions
app/Modules/Tutorials/Views/export_pdf.php
View file @ d0024d34
......@@ -4,822 +4,338 @@
<meta charset="UTF-8">
<title>Book of the ERP - كتاب النظام</title>
<style>
/* ═══════════════════════════════════════════════════════════════════
DESIGN FEATURES:
1. Full-page module divider pages with gradient backgrounds
2. page-break-inside:avoid on all tutorial blocks (no split)
3. Orphan/widow control (min 3 lines before/after break)
4. Professional TOC with numbered sections & dot leaders
5. Color-coded section accents (unique color per module)
6. Running footer with page numbers
7. Cover page with geometric SVG pattern
8. Category sub-dividers with thick colored left border
9. Tutorial numbering with gradient badges
10. Screenshot frames with drop shadow effect
11. Step cards with colored side accent bar
12. Styled callout boxes (info/warning/success/tip)
13. Professional typography hierarchy (8pt grid)
14. Decorative corner elements on divider pages
15. Tutorial metadata tags (colored chips)
16. Subtle diagonal stripe background on divider pages
17. Proper print margins with gutters
18. Back cover page with branding
19. Section summary stats on divider pages
20. Consistent vertical rhythm (8px base unit)
═══════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
SCREEN-FIRST DESIGN
Normal document flow for browser viewing.
Print enhancements added via @media print only.
══════════════════════════════════════════════════════════════ */
@page {
size: A4;
margin: 22mm 18mm 28mm 18mm;
}
@page :first {
margin: 0;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
/* ── Screen display: readable layout ── */
@media screen {
body { max-width: 210mm; margin: 0 auto; padding: 20px 20px 60px; font-size: 14px; background: #f3f4f6; }
/* Kill all page-break rules on screen */
.cover-page, .toc-page, .module-divider, .back-cover,
.tutorial-block, .tut-step, .category-header {
page-break-before: auto !important;
page-break-after: auto !important;
page-break-inside: auto !important;
}
/* Cover, dividers, back cover: auto height, visible on screen */
.cover-page, .module-divider, .back-cover {
width: 100% !important;
height: auto !important;
min-height: auto !important;
padding: 60px 40px !important;
margin-bottom: 24px;
border-radius: 12px;
overflow: visible !important;
}
/* TOC */
.toc-page {
height: auto !important;
min-height: auto !important;
padding: 40px !important;
margin-bottom: 24px;
background: #fff;
border-radius: 12px;
}
/* Tutorials: clear visibility */
.tutorial-block {
margin-bottom: 20px;
overflow: visible !important;
background: #fff;
}
.tutorial-block-body {
display: block !important;
overflow: visible !important;
max-height: none !important;
}
.tut-step {
overflow: visible !important;
}
/* Hide fixed footer on screen */
.page-footer { display: none !important; }
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* ── Feature 13: Typography hierarchy ── */
body {
font-family: 'Noto Sans Arabic', 'Noto Sans', 'Segoe UI', Tahoma, Arial, sans-serif;
font-size: 12px;
font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif;
font-size: 14px;
line-height: 1.8;
color: #1F2937;
direction: rtl;
background: #f1f5f9;
padding: 24px;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
/* ── Feature 3: Orphan/Widow control ── */
p, li, .tut-step-body {
orphans: 3;
widows: 3;
}
/* ══════════════════════════════════════
Feature 7: COVER PAGE
══════════════════════════════════════ */
.cover-page {
page-break-after: always;
width: 210mm;
height: 297mm;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: linear-gradient(160deg, #0F0A2A 0%, #1A1145 25%, #2D1B69 50%, #4C1D95 75%, #6D28D9 100%);
/* ── COVER ── */
.book-cover {
max-width: 800px;
margin: 0 auto 32px;
padding: 80px 48px;
background: linear-gradient(160deg, #0F0A2A 0%, #1A1145 30%, #2D1B69 60%, #4C1D95 100%);
border-radius: 16px;
color: #fff;
text-align: center;
padding: 60px 50px;
position: relative;
overflow: hidden;
}
.cover-page::before {
content: '';
position: absolute;
top: -50%;
right: -30%;
width: 120%;
height: 120%;
background: radial-gradient(ellipse at center, rgba(139,92,246,0.15) 0%, transparent 60%);
}
.cover-page::after {
.book-cover::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 4px;
bottom: 0; left: 0; right: 0;
height: 5px;
background: linear-gradient(90deg, #8B5CF6, #EC4899, #F59E0B, #10B981, #3B82F6);
}
.cover-geometric {
position: absolute;
top: 40px;
left: 40px;
right: 40px;
bottom: 40px;
border: 1px solid rgba(255,255,255,0.06);
border-radius: 24px;
}
.cover-geometric::before {
content: '';
position: absolute;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
border: 1px solid rgba(255,255,255,0.04);
border-radius: 20px;
}
.cover-logo {
width: 140px;
height: 140px;
.cover-icon {
width: 100px; height: 100px;
margin: 0 auto 32px;
background: rgba(255,255,255,0.08);
border-radius: 36px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 48px;
border: 2px solid rgba(255,255,255,0.15);
position: relative;
z-index: 1;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.cover-logo svg {
width: 70px;
height: 70px;
fill: none;
stroke: #fff;
stroke-width: 1.5;
}
.cover-title {
font-size: 56px;
font-weight: 900;
margin-bottom: 8px;
letter-spacing: -2px;
position: relative;
z-index: 1;
text-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.cover-subtitle {
font-size: 26px;
font-weight: 600;
opacity: 0.9;
margin-bottom: 12px;
position: relative;
z-index: 1;
}
.cover-desc {
font-size: 15px;
opacity: 0.6;
margin-bottom: 80px;
max-width: 400px;
line-height: 2;
position: relative;
z-index: 1;
}
.cover-stats {
display: flex;
gap: 40px;
margin-bottom: 60px;
position: relative;
z-index: 1;
}
.cover-stat {
text-align: center;
}
.cover-stat-num {
font-size: 36px;
font-weight: 900;
display: block;
background: linear-gradient(135deg, #C4B5FD, #fff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.cover-stat-label {
font-size: 11px;
opacity: 0.5;
text-transform: uppercase;
letter-spacing: 1px;
}
.cover-meta {
font-size: 11px;
opacity: 0.4;
position: relative;
z-index: 1;
border-top: 1px solid rgba(255,255,255,0.1);
padding-top: 20px;
width: 100%;
max-width: 400px;
}
/* ══════════════════════════════════════
Feature 4: TABLE OF CONTENTS
══════════════════════════════════════ */
.toc-page {
page-break-after: always;
padding: 0;
}
.toc-header {
text-align: center;
margin-bottom: 40px;
padding-bottom: 24px;
border-bottom: 2px solid #E5E7EB;
}
.toc-header h1 {
font-size: 32px;
font-weight: 900;
color: #1A1A2E;
margin-bottom: 8px;
}
.toc-header p {
font-size: 13px;
color: #6B7280;
}
.toc-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px 32px;
}
.toc-section {
margin-bottom: 8px;
padding: 12px 16px;
background: #F9FAFB;
border-radius: 10px;
border-right: 4px solid #8B5CF6;
}
.toc-section-title {
font-size: 13px;
font-weight: 700;
color: #1A1A2E;
margin-bottom: 4px;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 28px;
display: flex; align-items: center; justify-content: center;
border: 2px solid rgba(255,255,255,0.12);
}
.cover-icon svg { width: 50px; height: 50px; fill: none; stroke: #fff; stroke-width: 1.5; }
.book-cover h1 { font-size: 48px; font-weight: 900; margin-bottom: 8px; letter-spacing: -1px; }
.book-cover .subtitle { font-size: 22px; font-weight: 600; opacity: 0.85; margin-bottom: 12px; }
.book-cover .desc { font-size: 14px; opacity: 0.6; max-width: 420px; margin: 0 auto 48px; line-height: 2; }
.cover-stats { display: flex; gap: 40px; justify-content: center; margin-bottom: 48px; }
.cover-stat-num { display: block; font-size: 32px; font-weight: 900; }
.cover-stat-label { font-size: 11px; opacity: 0.5; }
.cover-meta { font-size: 11px; opacity: 0.4; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 16px; }
/* ── TABLE OF CONTENTS ── */
.book-toc {
max-width: 800px;
margin: 0 auto 32px;
padding: 40px;
background: #fff;
border-radius: 16px;
border: 1px solid #e2e8f0;
}
.toc-section-num {
width: 22px;
height: 22px;
background: #8B5CF6;
color: #fff;
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 800;
margin-left: 8px;
}
.toc-badge {
display: inline-block;
background: #EDE9FE;
color: #7C3AED;
font-size: 9px;
font-weight: 700;
padding: 2px 8px;
.book-toc h2 { font-size: 28px; font-weight: 900; text-align: center; margin-bottom: 8px; color: #1a1a2e; }
.book-toc .toc-sub { font-size: 13px; color: #6b7280; text-align: center; margin-bottom: 32px; }
.toc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.toc-item {
padding: 14px 16px;
background: #f9fafb;
border-radius: 10px;
}
.toc-items {
list-style: none;
padding: 0;
margin: 6px 0 0;
}
.toc-items li {
font-size: 10px;
color: #6B7280;
padding: 1px 0;
padding-right: 12px;
position: relative;
}
.toc-items li::before {
content: '—';
position: absolute;
right: 0;
color: #D1D5DB;
font-size: 9px;
}
/* ══════════════════════════════════════
Feature 1 & 16: MODULE DIVIDER PAGES
══════════════════════════════════════ */
.module-divider {
page-break-before: always;
page-break-after: always;
width: 100%;
min-height: 250mm;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-right: 4px solid var(--c);
}
.toc-item-title { font-size: 13px; font-weight: 700; color: #1a1a2e; display: flex; align-items: center; gap: 8px; }
.toc-item-num {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; border-radius: 6px;
background: var(--c); color: #fff; font-size: 10px; font-weight: 800;
}
.toc-item-badge { margin-right: auto; background: #ede9fe; color: #7c3aed; font-size: 9px; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
.toc-item ul { list-style: none; margin: 8px 0 0; padding: 0; }
.toc-item li { font-size: 11px; color: #6b7280; padding: 2px 0 2px 0; padding-right: 14px; position: relative; }
.toc-item li::before { content: '—'; position: absolute; right: 0; color: #d1d5db; font-size: 9px; }
/* ── SECTION DIVIDER ── */
.section-divider {
max-width: 800px;
margin: 48px auto 32px;
padding: 60px 40px;
background: #fafbff;
border-radius: 16px;
border: 1px solid #e2e8f0;
text-align: center;
position: relative;
padding: 80px 40px;
background: #FAFBFF;
}
.module-divider::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
background: var(--section-color, #8B5CF6);
overflow: hidden;
}
.module-divider::after {
.section-divider::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: var(--section-color, #8B5CF6);
opacity: 0.3;
}
/* Feature 14: Decorative corners */
.module-divider-corners {
position: absolute;
top: 30px;
left: 30px;
right: 30px;
bottom: 30px;
pointer-events: none;
}
.module-divider-corners::before,
.module-divider-corners::after {
content: '';
position: absolute;
width: 40px;
height: 40px;
border-color: var(--section-color, #8B5CF6);
opacity: 0.2;
}
.module-divider-corners::before {
top: 0;
right: 0;
border-top: 3px solid;
border-right: 3px solid;
}
.module-divider-corners::after {
bottom: 0;
left: 0;
border-bottom: 3px solid;
border-left: 3px solid;
}
.module-divider-num {
font-size: 80px;
font-weight: 900;
color: var(--section-color, #8B5CF6);
opacity: 0.1;
position: absolute;
top: 60px;
left: 50%;
transform: translateX(-50%);
line-height: 1;
}
.module-divider-icon {
width: 80px;
height: 80px;
background: var(--section-color, #8B5CF6);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 32px;
box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}
.module-divider-icon svg {
width: 40px;
height: 40px;
fill: none;
stroke: #fff;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.module-divider h2 {
font-size: 36px;
font-weight: 900;
color: #1A1A2E;
margin-bottom: 12px;
}
.module-divider-subtitle {
position: absolute; top: 0; left: 0; right: 0; height: 5px;
background: var(--c);
}
.section-divider-icon {
width: 72px; height: 72px;
margin: 0 auto 24px;
background: var(--c);
border-radius: 18px;
display: flex; align-items: center; justify-content: center;
}
.section-divider-icon svg { width: 36px; height: 36px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.section-divider h2 { font-size: 32px; font-weight: 900; color: #1a1a2e; margin-bottom: 8px; }
.section-divider .section-sub { font-size: 14px; color: #6b7280; margin-bottom: 24px; max-width: 360px; margin-left: auto; margin-right: auto; line-height: 2; }
.section-stats { display: inline-flex; gap: 24px; background: #fff; padding: 14px 28px; border-radius: 12px; border: 1px solid #e5e7eb; }
.section-stat-num { display: block; font-size: 22px; font-weight: 900; color: var(--c); }
.section-stat-label { font-size: 10px; color: #9ca3af; font-weight: 600; }
/* ── CATEGORY HEADER ── */
.cat-header {
max-width: 800px;
margin: 28px auto 16px;
padding: 10px 18px;
background: #f9fafb;
border-radius: 10px;
border-right: 5px solid var(--c);
font-size: 15px;
color: #6B7280;
margin-bottom: 32px;
max-width: 350px;
line-height: 2;
font-weight: 800;
color: #1a1a2e;
}
/* Feature 19: Section summary stats */
.module-divider-stats {
display: flex;
gap: 24px;
/* ── TUTORIAL CARD ── */
.tutorial-card {
max-width: 800px;
margin: 0 auto 20px;
background: #fff;
padding: 16px 32px;
border-radius: 12px;
border: 1px solid #E5E7EB;
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.module-divider-stat {
text-align: center;
}
.module-divider-stat-num {
font-size: 24px;
font-weight: 900;
color: var(--section-color, #8B5CF6);
display: block;
}
.module-divider-stat-label {
font-size: 10px;
color: #9CA3AF;
font-weight: 600;
}
/* ══════════════════════════════════════
Feature 2: TUTORIAL BLOCKS (no split)
══════════════════════════════════════ */
.tutorial-block {
page-break-inside: avoid;
page-break-before: auto;
margin-bottom: 24px;
border: 1px solid #E5E7EB;
border: 1px solid #e2e8f0;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
/* Feature 9: Gradient badge numbering */
.tutorial-block-header {
background: linear-gradient(135deg, #FAFBFF, #F3F4F6);
.tutorial-card-head {
padding: 16px 20px;
border-bottom: 1px solid #E5E7EB;
background: #f9fafb;
border-bottom: 1px solid #e5e7eb;
display: flex;
align-items: center;
gap: 14px;
}
.tutorial-num {
width: 32px;
height: 32px;
background: linear-gradient(135deg, #7C3AED, #8B5CF6);
.tutorial-card-num {
width: 32px; height: 32px;
background: var(--c);
color: #fff;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 800;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(124,58,237,0.3);
}
.tutorial-block-header h3 {
font-size: 15px;
font-weight: 700;
color: #1A1A2E;
margin: 0 0 2px;
}
.tutorial-block-header .tutorial-subtitle {
font-size: 11px;
color: #6B7280;
margin: 0;
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 800; flex-shrink: 0;
}
/* Feature 15: Tutorial metadata tags */
.tutorial-tags {
display: flex;
gap: 6px;
margin-top: 6px;
flex-wrap: wrap;
}
.tutorial-tag {
display: inline-block;
padding: 2px 8px;
border-radius: 8px;
font-size: 9px;
font-weight: 600;
}
.tutorial-tag-setup { background: #DBEAFE; color: #1D4ED8; }
.tutorial-tag-operation { background: #D1FAE5; color: #065F46; }
.tutorial-tag-report { background: #FEF3C7; color: #92400E; }
.tutorial-tag-management { background: #EDE9FE; color: #6D28D9; }
.tutorial-block-body {
.tutorial-card-head h3 { font-size: 15px; font-weight: 700; color: #1a1a2e; margin: 0; }
.tutorial-card-head .t-sub { font-size: 11px; color: #6b7280; margin: 2px 0 0; }
.tutorial-card-body {
padding: 20px 24px;
}
/* ── Feature 10: Screenshot frames ── */
.tutorial-screenshot {
width: 100%;
max-height: 350px;
object-fit: contain;
border: 1px solid #E5E7EB;
border-radius: 8px;
margin: 12px 0;
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
/* ══════════════════════════════════════
Feature 11: STEP CARDS
══════════════════════════════════════ */
.tut-page { max-width: 100%; }
.tut-header {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 20px;
padding: 14px 16px;
background: linear-gradient(135deg, #F9FAFB, #F3F4F6);
/* ── STEP CARDS ── */
.step-card {
position: relative;
padding: 14px 16px 14px 48px;
margin-bottom: 10px;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 10px;
border: 1px solid #E5E7EB;
border-right: 4px solid var(--c);
}
.tut-header-icon {
width: 40px;
height: 40px;
.step-card-num {
position: absolute; left: 12px; top: 14px;
width: 26px; height: 26px;
background: #ede9fe; color: #7c3aed;
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 800;
}
.step-card-title { font-size: 13px; font-weight: 700; color: #1a1a2e; margin-bottom: 4px; }
.step-card-body { font-size: 12px; color: #374151; line-height: 1.8; }
.step-card-body ul { margin: 6px 0; padding-right: 16px; }
.step-card-body li { margin-bottom: 4px; }
/* ── EXTRACTED HTML CONTENT STYLES ── */
.tutorial-card-body .tut-page { max-width: 100%; }
.tutorial-card-body .tut-header {
display: flex; align-items: center; gap: 14px;
margin-bottom: 20px; padding: 14px 16px;
background: #f9fafb; border-radius: 10px; border: 1px solid #e5e7eb;
}
.tutorial-card-body .tut-header-icon {
width: 40px; height: 40px;
background: linear-gradient(135deg, #7C3AED, #8B5CF6);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.tut-header h1 {
font-size: 16px;
font-weight: 800;
color: #1A1A2E;
margin: 0 0 2px;
border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.tut-header p {
font-size: 11px;
color: #6B7280;
margin: 0;
}
.tut-step {
.tutorial-card-body .tut-header h1 { font-size: 16px; font-weight: 800; color: #1a1a2e; margin: 0; }
.tutorial-card-body .tut-header p { font-size: 11px; color: #6b7280; margin: 0; }
.tutorial-card-body .tut-step {
position: relative;
padding: 14px 16px 14px 48px;
margin-bottom: 10px;
background: #fff;
border: 1px solid #E5E7EB;
border: 1px solid #e5e7eb;
border-radius: 10px;
border-right: 4px solid #8B5CF6;
page-break-inside: avoid;
}
.tut-step-num {
position: absolute;
right: auto;
left: 12px;
top: 14px;
width: 26px;
height: 26px;
background: linear-gradient(135deg, #EDE9FE, #DDD6FE);
color: #7C3AED;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 800;
}
.tut-step-title {
font-size: 12px;
font-weight: 700;
color: #1A1A2E;
margin: 0 0 4px;
}
.tut-step-body {
font-size: 11px;
color: #374151;
line-height: 1.8;
}
.tut-step-body ul { margin: 6px 0; padding-right: 16px; }
.tut-step-body li { margin-bottom: 4px; }
.tut-step-body .field {
display: inline-block;
background: #F3F4F6;
color: #1A1A2E;
padding: 1px 8px;
border-radius: 4px;
font-size: 10px;
font-weight: 600;
border: 1px solid #E5E7EB;
}
/* ── Feature 12: Callout boxes ── */
.tut-step-body .warn {
display: block;
background: #FFFBEB;
border: 1px solid #FDE68A;
border-right: 4px solid #F59E0B;
border-radius: 8px;
padding: 10px 14px;
margin: 8px 0;
font-size: 10px;
color: #92400E;
line-height: 1.8;
}
.tut-step-body .info {
display: block;
background: #EFF6FF;
border: 1px solid #BFDBFE;
border-right: 4px solid #3B82F6;
border-radius: 8px;
padding: 10px 14px;
margin: 8px 0;
font-size: 10px;
color: #1E40AF;
line-height: 1.8;
}
.tut-step-body .success {
display: block;
background: #ECFDF5;
border: 1px solid #A7F3D0;
border-right: 4px solid #10B981;
border-radius: 8px;
padding: 10px 14px;
margin: 8px 0;
font-size: 10px;
color: #065F46;
line-height: 1.8;
}
.tut-step-body .tip {
display: block;
background: #F5F3FF;
border: 1px solid #DDD6FE;
border-right: 4px solid #8B5CF6;
border-radius: 8px;
padding: 10px 14px;
margin: 8px 0;
font-size: 10px;
color: #5B21B6;
line-height: 1.8;
}
.tut-diagram {
background: #F8FAFC;
border: 1px solid #E2E8F0;
border-radius: 8px;
padding: 14px;
margin: 10px 0;
font-family: 'Courier New', monospace;
font-size: 9px;
direction: ltr;
text-align: left;
line-height: 1.6;
overflow: hidden;
}
/* ── Feature 8: Category sub-dividers ── */
.category-header {
margin: 28px 0 16px;
padding: 10px 18px;
background: linear-gradient(135deg, #F9FAFB, #F3F4F6);
border-radius: 10px;
border-right: 5px solid var(--section-color, #8B5CF6);
font-size: 14px;
font-weight: 800;
color: #1A1A2E;
page-break-after: avoid;
display: flex;
align-items: center;
gap: 10px;
}
.category-header::after {
content: '';
flex: 1;
height: 1px;
background: #E5E7EB;
}
/* ── Feature 6: Running footer ── */
.page-footer {
position: fixed;
bottom: 8mm;
left: 18mm;
right: 18mm;
font-size: 8px;
color: #9CA3AF;
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid #F3F4F6;
padding-top: 6px;
}
.page-footer-brand {
font-weight: 600;
color: #6B7280;
.tutorial-card-body .tut-step-num {
position: absolute; left: 12px; top: 14px;
width: 26px; height: 26px;
background: #ede9fe; color: #7c3aed;
border-radius: 8px; display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 800;
}
.tutorial-card-body .tut-step-title { font-size: 13px; font-weight: 700; color: #1a1a2e; margin-bottom: 4px; }
.tutorial-card-body .tut-step-body { font-size: 12px; color: #374151; line-height: 1.8; }
.tutorial-card-body .tut-step-body ul { margin: 6px 0; padding-right: 16px; }
.tutorial-card-body .tut-step-body li { margin-bottom: 4px; }
.tutorial-card-body .tut-step-body .field {
display: inline-block; background: #f3f4f6; color: #1a1a2e;
padding: 1px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; border: 1px solid #e5e7eb;
}
.tutorial-card-body .tut-step-body .warn {
display: block; background: #fffbeb; border: 1px solid #fde68a; border-right: 4px solid #f59e0b;
border-radius: 8px; padding: 10px 14px; margin: 8px 0; font-size: 11px; color: #92400e; line-height: 1.8;
}
.tutorial-card-body .tut-step-body .info {
display: block; background: #eff6ff; border: 1px solid #bfdbfe; border-right: 4px solid #3b82f6;
border-radius: 8px; padding: 10px 14px; margin: 8px 0; font-size: 11px; color: #1e40af; line-height: 1.8;
}
.tutorial-card-body .tut-step-body .success {
display: block; background: #ecfdf5; border: 1px solid #a7f3d0; border-right: 4px solid #10b981;
border-radius: 8px; padding: 10px 14px; margin: 8px 0; font-size: 11px; color: #065f46; line-height: 1.8;
}
.tutorial-card-body .tut-step-body .tip {
display: block; background: #f5f3ff; border: 1px solid #ddd6fe; border-right: 4px solid #8b5cf6;
border-radius: 8px; padding: 10px 14px; margin: 8px 0; font-size: 11px; color: #5b21b6; line-height: 1.8;
}
.tutorial-card-body .tut-diagram {
background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
padding: 14px; margin: 10px 0; font-family: monospace; font-size: 10px;
direction: ltr; text-align: left; line-height: 1.6;
}
.tutorial-card-body img {
max-width: 100%; height: auto; border-radius: 8px;
border: 1px solid #e5e7eb; margin: 12px 0;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
/* ── SECTION SCREENSHOT ── */
.section-screenshot {
max-width: 800px;
margin: 0 auto 24px;
text-align: center;
}
/* ── Feature 10: Screenshot styling ── */
.tutorial-block-body img {
max-width: 100%;
height: auto;
border-radius: 8px;
border: 1px solid #E5E7EB;
margin: 10px 0;
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
.section-screenshot img {
max-width: 100%; height: auto; border-radius: 12px;
border: 1px solid #e2e8f0; box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
/* ══════════════════════════════════════
Feature 18: BACK COVER
══════════════════════════════════════ */
.back-cover {
page-break-before: always;
width: 100%;
min-height: 250mm;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
/* ── BACK COVER ── */
.book-back {
max-width: 800px;
margin: 48px auto 0;
padding: 60px;
background: linear-gradient(160deg, #0F0A2A, #1A1145, #2D1B69);
border-radius: 16px;
color: #fff;
padding: 60px;
text-align: center;
position: relative;
overflow: hidden;
}
.back-cover::after {
.book-back::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 4px;
position: absolute; bottom: 0; left: 0; right: 0; height: 5px;
background: linear-gradient(90deg, #8B5CF6, #EC4899, #F59E0B, #10B981, #3B82F6);
}
.back-cover-logo {
width: 80px;
height: 80px;
.book-back-icon {
width: 64px; height: 64px;
margin: 0 auto 20px;
background: rgba(255,255,255,0.08);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
border-radius: 16px;
display: flex; align-items: center; justify-content: center;
border: 1px solid rgba(255,255,255,0.1);
}
.back-cover-logo svg {
width: 40px;
height: 40px;
fill: none;
stroke: #fff;
stroke-width: 1.5;
}
.back-cover h2 {
font-size: 24px;
font-weight: 800;
margin-bottom: 8px;
opacity: 0.9;
}
.back-cover p {
font-size: 12px;
opacity: 0.5;
margin-bottom: 4px;
}
.book-back-icon svg { width: 32px; height: 32px; fill: none; stroke: #fff; stroke-width: 1.5; }
.book-back h2 { font-size: 22px; font-weight: 800; margin-bottom: 8px; opacity: 0.9; }
.book-back p { font-size: 12px; opacity: 0.5; margin-bottom: 4px; }
/* ── Feature 20: Consistent spacing rhythm ── */
.spacing-sm { margin-bottom: 8px; }
.spacing-md { margin-bottom: 16px; }
.spacing-lg { margin-bottom: 24px; }
.spacing-xl { margin-bottom: 32px; }
/* ── Feature 17: Print optimizations ── */
/* ══════════════════════════════════════════════════════════════
PRINT ONLY: page breaks, full-page elements, sizing
══════════════════════════════════════════════════════════════ */
@media print {
body { font-size: 11px; }
.cover-page { height: 297mm; }
.module-divider { height: 297mm; }
.back-cover { height: 297mm; }
.no-print { display: none; }
@page { size: A4; margin: 20mm 18mm 24mm 18mm; }
body { background: #fff; padding: 0; font-size: 11px; }
.no-print { display: none !important; }
.book-cover, .book-toc, .section-divider, .tutorial-card, .cat-header, .section-screenshot, .book-back {
max-width: 100%; margin-left: 0; margin-right: 0; border: none; border-radius: 0; box-shadow: none;
}
.book-cover {
border-radius: 0;
min-height: 100vh;
margin-bottom: 0;
page-break-after: always;
}
.book-toc {
page-break-after: always;
margin-bottom: 0;
}
.section-divider {
page-break-before: always;
page-break-after: always;
min-height: 80vh;
margin-top: 0;
margin-bottom: 0;
}
.tutorial-card {
page-break-inside: avoid;
margin-bottom: 16px;
}
.step-card, .tutorial-card-body .tut-step {
page-break-inside: avoid;
}
.book-back {
page-break-before: always;
min-height: 80vh;
margin-top: 0;
border-radius: 0;
}
}
</style>
</head>
......@@ -833,9 +349,6 @@ $sectionColors = [
'#0891B2', '#7C3AED', '#059669', '#DC2626', '#2563EB',
'#8B5CF6', '#3B82F6', '#10B981', '#F59E0B', '#EF4444',
'#06B6D4', '#EC4899', '#14B8A6', '#F97316', '#6366F1',
'#84CC16', '#0EA5E9', '#D946EF', '#22C55E', '#E11D48',
'#0891B2', '#7C3AED', '#059669', '#DC2626', '#2563EB',
'#8B5CF6', '#3B82F6', '#10B981',
];
$totalTutorials = 0;
$totalSections = count($data['sections']);
......@@ -850,61 +363,41 @@ $sectionIcons = [
];
?>
<!-- ═══ COVER PAGE ═══ -->
<div class="cover-page">
<div class="cover-geometric"></div>
<div class="cover-logo">
<!-- ═══ COVER ═══ -->
<div class="book-cover">
<div class="cover-icon">
<svg viewBox="0 0 24 24"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" stroke-linecap="round" stroke-linejoin="round"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<div class="cover-title">Book of the ERP</div>
<div class="cover-subtitle">كتاب النظام الشامل</div>
<div class="cover-desc">الدليل التدريبي التفصيلي لجميع عمليات وأقسام نظام إدارة النادي — مرجع شامل للموظفين</div>
<h1>Book of the ERP</h1>
<div class="subtitle">كتاب النظام الشامل — الإصدار الأول</div>
<div class="desc">الدليل التدريبي التفصيلي لجميع عمليات وأقسام نظام إدارة النادي — مرجع شامل للموظفين</div>
<div class="cover-stats">
<div class="cover-stat">
<span class="cover-stat-num"><?= $totalSections ?></span>
<span class="cover-stat-label">قسم</span>
</div>
<div class="cover-stat">
<span class="cover-stat-num"><?= $totalTutorials ?></span>
<span class="cover-stat-label">شرح</span>
</div>
<div class="cover-stat">
<span class="cover-stat-num">105</span>
<span class="cover-stat-label">لقطة شاشة</span>
</div>
</div>
<div class="cover-meta">
تم التوليد في: <?= $data['generatedAt'] ?>
<div><span class="cover-stat-num"><?= $totalSections ?></span><span class="cover-stat-label">قسم</span></div>
<div><span class="cover-stat-num"><?= $totalTutorials ?></span><span class="cover-stat-label">شرح</span></div>
</div>
<div class="cover-meta">تم التوليد تلقائياً بواسطة نظام إدارة النادي<br><?= $data['generatedAt'] ?></div>
</div>
<!-- ═══ TABLE OF CONTENTS ═══ -->
<div class="toc-page">
<div class="toc-header">
<h1>فهرس المحتويات</h1>
<p><?= $totalSections ?> قسم — <?= $totalTutorials ?> شرح تفصيلي</p>
</div>
<div class="book-toc">
<h2>فهرس المحتويات</h2>
<div class="toc-sub"><?= $totalSections ?> قسم — <?= $totalTutorials ?> شرح تفصيلي</div>
<div class="toc-grid">
<?php $sectionNum = 0; foreach ($data['sections'] as $sectionKey => $section): $sectionNum++; ?>
<div class="toc-section" style="border-right-color: <?= $sectionColors[$sectionNum - 1] ?? '#8B5CF6' ?>;">
<div class="toc-section-title">
<span><span class="toc-section-num" style="background:<?= $sectionColors[$sectionNum - 1] ?? '#8B5CF6' ?>;"><?= $sectionNum ?></span> <?= htmlspecialchars($section['title'], ENT_QUOTES, 'UTF-8') ?></span>
<span class="toc-badge"><?= count($section['tutorials']) ?></span>
<?php $sn = 0; foreach ($data['sections'] as $sk => $sec): $sn++; $c = $sectionColors[$sn - 1] ?? '#8B5CF6'; ?>
<div class="toc-item" style="--c:<?= $c ?>;">
<div class="toc-item-title">
<span class="toc-item-num" style="background:<?= $c ?>;"><?= $sn ?></span>
<?= htmlspecialchars($sec['title'], ENT_QUOTES, 'UTF-8') ?>
<span class="toc-item-badge"><?= count($sec['tutorials']) ?></span>
</div>
<?php if (count($section['tutorials']) <= 8): ?>
<ul class="toc-items">
<?php foreach ($section['tutorials'] as $slug => $tutorial): ?>
<li><?= htmlspecialchars($tutorial['title'], ENT_QUOTES, 'UTF-8') ?></li>
<?php endforeach; ?>
</ul>
<?php else: ?>
<ul class="toc-items">
<?php $i = 0; foreach ($section['tutorials'] as $slug => $tutorial): $i++; if ($i > 5) break; ?>
<li><?= htmlspecialchars($tutorial['title'], ENT_QUOTES, 'UTF-8') ?></li>
<?php endforeach; ?>
<li style="color:#9CA3AF;font-style:italic;">+ <?= count($section['tutorials']) - 5 ?> شرح آخر...</li>
</ul>
<ul>
<?php $ti = 0; foreach ($sec['tutorials'] as $tSlug => $tut): $ti++; if ($ti > 5): break; endif; ?>
<li><?= htmlspecialchars($tut['title'], ENT_QUOTES, 'UTF-8') ?></li>
<?php endforeach; ?>
<?php if (count($sec['tutorials']) > 5): ?>
<li style="color:#9ca3af;font-style:italic;">+ <?= count($sec['tutorials']) - 5 ?> شرح آخر...</li>
<?php endif; ?>
</ul>
</div>
<?php endforeach; ?>
</div>
......@@ -913,37 +406,25 @@ $sectionIcons = [
<!-- ═══ SECTIONS & TUTORIALS ═══ -->
<?php $sectionNum = 0; foreach ($data['sections'] as $sectionKey => $section): $sectionNum++; $color = $sectionColors[$sectionNum - 1] ?? '#8B5CF6'; ?>
<!-- Module Divider Page -->
<div class="module-divider" style="--section-color: <?= $color ?>;">
<div class="module-divider-corners"></div>
<div class="module-divider-num"><?= str_pad((string)$sectionNum, 2, '0', STR_PAD_LEFT) ?></div>
<div class="module-divider-icon" style="background: <?= $color ?>;">
<div class="section-divider" style="--c:<?= $color ?>;">
<div class="section-divider-icon" style="background:<?= $color ?>;">
<svg viewBox="0 0 24 24"><?= $sectionIcons[$sectionKey] ?? $sectionIcons['default'] ?></svg>
</div>
<h2><?= htmlspecialchars($section['title'], ENT_QUOTES, 'UTF-8') ?></h2>
<?php if (!empty($section['subtitle'])): ?>
<div class="module-divider-subtitle"><?= htmlspecialchars($section['subtitle'], ENT_QUOTES, 'UTF-8') ?></div>
<div class="section-sub"><?= htmlspecialchars($section['subtitle'], ENT_QUOTES, 'UTF-8') ?></div>
<?php endif; ?>
<div class="module-divider-stats">
<div class="module-divider-stat">
<span class="module-divider-stat-num" style="color:<?= $color ?>;"><?= count($section['tutorials']) ?></span>
<span class="module-divider-stat-label">شرح</span>
</div>
<div class="module-divider-stat">
<span class="module-divider-stat-num" style="color:<?= $color ?>;"><?= count($section['categories'] ?? []) ?></span>
<span class="module-divider-stat-label">تصنيف</span>
</div>
<div class="module-divider-stat">
<span class="module-divider-stat-num" style="color:<?= $color ?>;">القسم <?= $sectionNum ?></span>
<span class="module-divider-stat-label">من <?= $totalSections ?></span>
</div>
<div class="section-stats">
<div><span class="section-stat-num" style="color:<?= $color ?>;"><?= count($section['tutorials']) ?></span><span class="section-stat-label">شرح</span></div>
<div><span class="section-stat-num" style="color:<?= $color ?>;"><?= count($section['categories'] ?? []) ?></span><span class="section-stat-label">تصنيف</span></div>
<div><span class="section-stat-num" style="color:<?= $color ?>;">القسم <?= $sectionNum ?></span><span class="section-stat-label">من <?= $totalSections ?></span></div>
</div>
</div>
<?php if (!empty($section['screenshot']) && file_exists($section['screenshot'])): ?>
<?php $webPath = str_replace(realpath(__DIR__ . '/../../../../public'), '', $section['screenshot']); ?>
<div style="text-align:center;margin: 24px 0;page-break-inside:avoid;">
<img src="<?= $webPath ?>" class="tutorial-screenshot" alt="<?= htmlspecialchars($section['title'], ENT_QUOTES, 'UTF-8') ?>">
<div class="section-screenshot">
<img src="<?= $webPath ?>" alt="<?= htmlspecialchars($section['title'], ENT_QUOTES, 'UTF-8') ?>">
</div>
<?php endif; ?>
......@@ -956,34 +437,34 @@ foreach ($section['tutorials'] as $slug => $tutorial):
if ($cat !== $currentCategory && !empty($section['categories'][$cat])):
$currentCategory = $cat;
?>
<div class="category-header" style="--section-color: <?= $color ?>; border-right-color: <?= $color ?>;">
<div class="cat-header" style="--c:<?= $color ?>;">
<?= htmlspecialchars($section['categories'][$cat]['label'], ENT_QUOTES, 'UTF-8') ?>
</div>
<?php endif; ?>
<div class="tutorial-block">
<div class="tutorial-block-header">
<div class="tutorial-num" style="background: linear-gradient(135deg, <?= $color ?>, <?= $color ?>CC);"><?= $tutorialNum ?></div>
<div style="flex:1;">
<div class="tutorial-card" style="--c:<?= $color ?>;">
<div class="tutorial-card-head">
<div class="tutorial-card-num" style="background:<?= $color ?>;"><?= $tutorialNum ?></div>
<div>
<h3><?= htmlspecialchars($tutorial['title'], ENT_QUOTES, 'UTF-8') ?></h3>
<?php if (!empty($tutorial['subtitle'])): ?>
<div class="tutorial-subtitle"><?= htmlspecialchars($tutorial['subtitle'], ENT_QUOTES, 'UTF-8') ?></div>
<div class="t-sub"><?= htmlspecialchars($tutorial['subtitle'], ENT_QUOTES, 'UTF-8') ?></div>
<?php endif; ?>
</div>
</div>
<div class="tutorial-block-body">
<div class="tutorial-card-body">
<?php if (!empty($tutorial['htmlContent'])): ?>
<?= $tutorial['htmlContent'] ?>
<?php elseif (!empty($tutorial['steps'])): ?>
<?php foreach ($tutorial['steps'] as $stepIdx => $step): ?>
<div class="tut-step" style="border-right-color: <?= $color ?>;">
<div class="tut-step-num"><?= $stepIdx + 1 ?></div>
<div class="tut-step-title"><?= htmlspecialchars($step['title'] ?? '', ENT_QUOTES, 'UTF-8') ?></div>
<div class="tut-step-body"><?= $step['body'] ?? '' ?></div>
<div class="step-card" style="--c:<?= $color ?>;">
<div class="step-card-num"><?= $stepIdx + 1 ?></div>
<div class="step-card-title"><?= htmlspecialchars($step['title'] ?? '', ENT_QUOTES, 'UTF-8') ?></div>
<div class="step-card-body"><?= $step['body'] ?? '' ?></div>
</div>
<?php endforeach; ?>
<?php else: ?>
<p style="color:#6B7280;font-size:11px;padding:8px 0;">
<p style="color:#6b7280;padding:8px 0;">
<?= htmlspecialchars($tutorial['subtitle'] ?? $tutorial['title'], ENT_QUOTES, 'UTF-8') ?>
</p>
<?php endif; ?>
......@@ -994,8 +475,8 @@ foreach ($section['tutorials'] as $slug => $tutorial):
<?php endforeach; ?>
<!-- ═══ BACK COVER ═══ -->
<div class="back-cover">
<div class="back-cover-logo">
<div class="book-back">
<div class="book-back-icon">
<svg viewBox="0 0 24 24"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" stroke-linecap="round" stroke-linejoin="round"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<h2>Book of the ERP</h2>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment