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 @@ ...@@ -4,822 +4,338 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Book of the ERP - كتاب النظام</title> <title>Book of the ERP - كتاب النظام</title>
<style> <style>
/* ═══════════════════════════════════════════════════════════════════ /* ══════════════════════════════════════════════════════════════
DESIGN FEATURES: SCREEN-FIRST DESIGN
1. Full-page module divider pages with gradient backgrounds Normal document flow for browser viewing.
2. page-break-inside:avoid on all tutorial blocks (no split) Print enhancements added via @media print only.
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)
═══════════════════════════════════════════════════════════════════ */
@page { *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
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; }
}
/* ── Feature 13: Typography hierarchy ── */
body { body {
font-family: 'Noto Sans Arabic', 'Noto Sans', 'Segoe UI', Tahoma, Arial, sans-serif; font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif;
font-size: 12px; font-size: 14px;
line-height: 1.8; line-height: 1.8;
color: #1F2937; color: #1F2937;
direction: rtl; direction: rtl;
background: #f1f5f9;
padding: 24px;
-webkit-print-color-adjust: exact; -webkit-print-color-adjust: exact;
print-color-adjust: exact; print-color-adjust: exact;
} }
/* ── Feature 3: Orphan/Widow control ── */ /* ── COVER ── */
p, li, .tut-step-body { .book-cover {
orphans: 3; max-width: 800px;
widows: 3; margin: 0 auto 32px;
} padding: 80px 48px;
background: linear-gradient(160deg, #0F0A2A 0%, #1A1145 30%, #2D1B69 60%, #4C1D95 100%);
/* ══════════════════════════════════════ border-radius: 16px;
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%);
color: #fff; color: #fff;
text-align: center; text-align: center;
padding: 60px 50px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.cover-page::before { .book-cover::after {
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 {
content: ''; content: '';
position: absolute; position: absolute;
bottom: 0; bottom: 0; left: 0; right: 0;
left: 0; height: 5px;
right: 0;
height: 4px;
background: linear-gradient(90deg, #8B5CF6, #EC4899, #F59E0B, #10B981, #3B82F6); background: linear-gradient(90deg, #8B5CF6, #EC4899, #F59E0B, #10B981, #3B82F6);
} }
.cover-geometric { .cover-icon {
position: absolute; width: 100px; height: 100px;
top: 40px; margin: 0 auto 32px;
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;
background: rgba(255,255,255,0.08); background: rgba(255,255,255,0.08);
border-radius: 36px; border-radius: 28px;
display: flex; display: flex; align-items: center; justify-content: center;
align-items: center; border: 2px solid rgba(255,255,255,0.12);
justify-content: center; }
margin-bottom: 48px; .cover-icon svg { width: 50px; height: 50px; fill: none; stroke: #fff; stroke-width: 1.5; }
border: 2px solid rgba(255,255,255,0.15); .book-cover h1 { font-size: 48px; font-weight: 900; margin-bottom: 8px; letter-spacing: -1px; }
position: relative; .book-cover .subtitle { font-size: 22px; font-weight: 600; opacity: 0.85; margin-bottom: 12px; }
z-index: 1; .book-cover .desc { font-size: 14px; opacity: 0.6; max-width: 420px; margin: 0 auto 48px; line-height: 2; }
box-shadow: 0 20px 60px rgba(0,0,0,0.3); .cover-stats { display: flex; gap: 40px; justify-content: center; margin-bottom: 48px; }
} .cover-stat-num { display: block; font-size: 32px; font-weight: 900; }
.cover-logo svg { .cover-stat-label { font-size: 11px; opacity: 0.5; }
width: 70px; .cover-meta { font-size: 11px; opacity: 0.4; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 16px; }
height: 70px;
fill: none; /* ── TABLE OF CONTENTS ── */
stroke: #fff; .book-toc {
stroke-width: 1.5; max-width: 800px;
} margin: 0 auto 32px;
.cover-title { padding: 40px;
font-size: 56px; background: #fff;
font-weight: 900; border-radius: 16px;
margin-bottom: 8px; border: 1px solid #e2e8f0;
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;
} }
.toc-section-num { .book-toc h2 { font-size: 28px; font-weight: 900; text-align: center; margin-bottom: 8px; color: #1a1a2e; }
width: 22px; .book-toc .toc-sub { font-size: 13px; color: #6b7280; text-align: center; margin-bottom: 32px; }
height: 22px; .toc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
background: #8B5CF6; .toc-item {
color: #fff; padding: 14px 16px;
border-radius: 6px; background: #f9fafb;
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;
border-radius: 10px; border-radius: 10px;
} border-right: 4px solid var(--c);
.toc-items { }
list-style: none; .toc-item-title { font-size: 13px; font-weight: 700; color: #1a1a2e; display: flex; align-items: center; gap: 8px; }
padding: 0; .toc-item-num {
margin: 6px 0 0; display: inline-flex; align-items: center; justify-content: center;
} width: 22px; height: 22px; border-radius: 6px;
.toc-items li { background: var(--c); color: #fff; font-size: 10px; font-weight: 800;
font-size: 10px; }
color: #6B7280; .toc-item-badge { margin-right: auto; background: #ede9fe; color: #7c3aed; font-size: 9px; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
padding: 1px 0; .toc-item ul { list-style: none; margin: 8px 0 0; padding: 0; }
padding-right: 12px; .toc-item li { font-size: 11px; color: #6b7280; padding: 2px 0 2px 0; padding-right: 14px; position: relative; }
position: relative; .toc-item li::before { content: '—'; position: absolute; right: 0; color: #d1d5db; font-size: 9px; }
}
.toc-items li::before { /* ── SECTION DIVIDER ── */
content: '—'; .section-divider {
position: absolute; max-width: 800px;
right: 0; margin: 48px auto 32px;
color: #D1D5DB; padding: 60px 40px;
font-size: 9px; background: #fafbff;
} border-radius: 16px;
border: 1px solid #e2e8f0;
/* ══════════════════════════════════════
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;
text-align: center; text-align: center;
position: relative; position: relative;
padding: 80px 40px; overflow: hidden;
background: #FAFBFF;
}
.module-divider::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
background: var(--section-color, #8B5CF6);
} }
.module-divider::after { .section-divider::before {
content: ''; content: '';
position: absolute; position: absolute; top: 0; left: 0; right: 0; height: 5px;
bottom: 0; background: var(--c);
left: 0; }
right: 0; .section-divider-icon {
height: 2px; width: 72px; height: 72px;
background: var(--section-color, #8B5CF6); margin: 0 auto 24px;
opacity: 0.3; background: var(--c);
} border-radius: 18px;
display: flex; align-items: center; justify-content: center;
/* Feature 14: Decorative corners */ }
.module-divider-corners { .section-divider-icon svg { width: 36px; height: 36px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
position: absolute; .section-divider h2 { font-size: 32px; font-weight: 900; color: #1a1a2e; margin-bottom: 8px; }
top: 30px; .section-divider .section-sub { font-size: 14px; color: #6b7280; margin-bottom: 24px; max-width: 360px; margin-left: auto; margin-right: auto; line-height: 2; }
left: 30px; .section-stats { display: inline-flex; gap: 24px; background: #fff; padding: 14px 28px; border-radius: 12px; border: 1px solid #e5e7eb; }
right: 30px; .section-stat-num { display: block; font-size: 22px; font-weight: 900; color: var(--c); }
bottom: 30px; .section-stat-label { font-size: 10px; color: #9ca3af; font-weight: 600; }
pointer-events: none;
} /* ── CATEGORY HEADER ── */
.module-divider-corners::before, .cat-header {
.module-divider-corners::after { max-width: 800px;
content: ''; margin: 28px auto 16px;
position: absolute; padding: 10px 18px;
width: 40px; background: #f9fafb;
height: 40px; border-radius: 10px;
border-color: var(--section-color, #8B5CF6); border-right: 5px solid var(--c);
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 {
font-size: 15px; font-size: 15px;
color: #6B7280; font-weight: 800;
margin-bottom: 32px; color: #1a1a2e;
max-width: 350px;
line-height: 2;
} }
/* Feature 19: Section summary stats */ /* ── TUTORIAL CARD ── */
.module-divider-stats { .tutorial-card {
display: flex; max-width: 800px;
gap: 24px; margin: 0 auto 20px;
background: #fff; background: #fff;
padding: 16px 32px; border: 1px solid #e2e8f0;
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-radius: 12px; border-radius: 12px;
overflow: hidden; overflow: hidden;
box-shadow: 0 1px 4px rgba(0,0,0,0.04);
} }
.tutorial-card-head {
/* Feature 9: Gradient badge numbering */
.tutorial-block-header {
background: linear-gradient(135deg, #FAFBFF, #F3F4F6);
padding: 16px 20px; padding: 16px 20px;
border-bottom: 1px solid #E5E7EB; background: #f9fafb;
border-bottom: 1px solid #e5e7eb;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 14px; gap: 14px;
} }
.tutorial-num { .tutorial-card-num {
width: 32px; width: 32px; height: 32px;
height: 32px; background: var(--c);
background: linear-gradient(135deg, #7C3AED, #8B5CF6);
color: #fff; color: #fff;
border-radius: 10px; border-radius: 10px;
display: flex; display: flex; align-items: center; justify-content: center;
align-items: center; font-size: 13px; font-weight: 800; flex-shrink: 0;
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;
} }
.tutorial-card-head h3 { font-size: 15px; font-weight: 700; color: #1a1a2e; margin: 0; }
/* Feature 15: Tutorial metadata tags */ .tutorial-card-head .t-sub { font-size: 11px; color: #6b7280; margin: 2px 0 0; }
.tutorial-tags { .tutorial-card-body {
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 {
padding: 20px 24px; padding: 20px 24px;
} }
/* ── Feature 10: Screenshot frames ── */ /* ── STEP CARDS ── */
.tutorial-screenshot { .step-card {
width: 100%; position: relative;
max-height: 350px; padding: 14px 16px 14px 48px;
object-fit: contain; margin-bottom: 10px;
border: 1px solid #E5E7EB; background: #fff;
border-radius: 8px; border: 1px solid #e5e7eb;
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);
border-radius: 10px; border-radius: 10px;
border: 1px solid #E5E7EB; border-right: 4px solid var(--c);
} }
.tut-header-icon { .step-card-num {
width: 40px; position: absolute; left: 12px; top: 14px;
height: 40px; 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); background: linear-gradient(135deg, #7C3AED, #8B5CF6);
border-radius: 10px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
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;
} }
.tut-header p { .tutorial-card-body .tut-header h1 { font-size: 16px; font-weight: 800; color: #1a1a2e; margin: 0; }
font-size: 11px; .tutorial-card-body .tut-header p { font-size: 11px; color: #6b7280; margin: 0; }
color: #6B7280; .tutorial-card-body .tut-step {
margin: 0;
}
.tut-step {
position: relative; position: relative;
padding: 14px 16px 14px 48px; padding: 14px 16px 14px 48px;
margin-bottom: 10px; margin-bottom: 10px;
background: #fff; background: #fff;
border: 1px solid #E5E7EB; border: 1px solid #e5e7eb;
border-radius: 10px; border-radius: 10px;
border-right: 4px solid #8B5CF6; 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 { .tutorial-card-body .tut-step-num {
content: ''; position: absolute; left: 12px; top: 14px;
flex: 1; width: 26px; height: 26px;
height: 1px; background: #ede9fe; color: #7c3aed;
background: #E5E7EB; border-radius: 8px; display: flex; align-items: center; justify-content: center;
} font-size: 11px; font-weight: 800;
}
/* ── Feature 6: Running footer ── */ .tutorial-card-body .tut-step-title { font-size: 13px; font-weight: 700; color: #1a1a2e; margin-bottom: 4px; }
.page-footer { .tutorial-card-body .tut-step-body { font-size: 12px; color: #374151; line-height: 1.8; }
position: fixed; .tutorial-card-body .tut-step-body ul { margin: 6px 0; padding-right: 16px; }
bottom: 8mm; .tutorial-card-body .tut-step-body li { margin-bottom: 4px; }
left: 18mm; .tutorial-card-body .tut-step-body .field {
right: 18mm; display: inline-block; background: #f3f4f6; color: #1a1a2e;
font-size: 8px; padding: 1px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; border: 1px solid #e5e7eb;
color: #9CA3AF; }
display: flex; .tutorial-card-body .tut-step-body .warn {
justify-content: space-between; display: block; background: #fffbeb; border: 1px solid #fde68a; border-right: 4px solid #f59e0b;
align-items: center; border-radius: 8px; padding: 10px 14px; margin: 8px 0; font-size: 11px; color: #92400e; line-height: 1.8;
border-top: 1px solid #F3F4F6; }
padding-top: 6px; .tutorial-card-body .tut-step-body .info {
} display: block; background: #eff6ff; border: 1px solid #bfdbfe; border-right: 4px solid #3b82f6;
.page-footer-brand { border-radius: 8px; padding: 10px 14px; margin: 8px 0; font-size: 11px; color: #1e40af; line-height: 1.8;
font-weight: 600; }
color: #6B7280; .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;
} }
.section-screenshot img {
/* ── Feature 10: Screenshot styling ── */ max-width: 100%; height: auto; border-radius: 12px;
.tutorial-block-body img { border: 1px solid #e2e8f0; box-shadow: 0 4px 16px rgba(0,0,0,0.08);
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);
} }
/* ══════════════════════════════════════ /* ── BACK COVER ── */
Feature 18: BACK COVER .book-back {
══════════════════════════════════════ */ max-width: 800px;
.back-cover { margin: 48px auto 0;
page-break-before: always; padding: 60px;
width: 100%;
min-height: 250mm;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
background: linear-gradient(160deg, #0F0A2A, #1A1145, #2D1B69); background: linear-gradient(160deg, #0F0A2A, #1A1145, #2D1B69);
border-radius: 16px;
color: #fff; color: #fff;
padding: 60px; text-align: center;
position: relative; position: relative;
overflow: hidden;
} }
.back-cover::after { .book-back::after {
content: ''; content: '';
position: absolute; position: absolute; bottom: 0; left: 0; right: 0; height: 5px;
bottom: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #8B5CF6, #EC4899, #F59E0B, #10B981, #3B82F6); background: linear-gradient(90deg, #8B5CF6, #EC4899, #F59E0B, #10B981, #3B82F6);
} }
.back-cover-logo { .book-back-icon {
width: 80px; width: 64px; height: 64px;
height: 80px; margin: 0 auto 20px;
background: rgba(255,255,255,0.08); background: rgba(255,255,255,0.08);
border-radius: 20px; border-radius: 16px;
display: flex; display: flex; align-items: center; justify-content: center;
align-items: center;
justify-content: center;
margin-bottom: 24px;
border: 1px solid rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.1);
} }
.back-cover-logo svg { .book-back-icon svg { width: 32px; height: 32px; fill: none; stroke: #fff; stroke-width: 1.5; }
width: 40px; .book-back h2 { font-size: 22px; font-weight: 800; margin-bottom: 8px; opacity: 0.9; }
height: 40px; .book-back p { font-size: 12px; opacity: 0.5; margin-bottom: 4px; }
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;
}
/* ── Feature 20: Consistent spacing rhythm ── */ /* ══════════════════════════════════════════════════════════════
.spacing-sm { margin-bottom: 8px; } PRINT ONLY: page breaks, full-page elements, sizing
.spacing-md { margin-bottom: 16px; } ══════════════════════════════════════════════════════════════ */
.spacing-lg { margin-bottom: 24px; }
.spacing-xl { margin-bottom: 32px; }
/* ── Feature 17: Print optimizations ── */
@media print { @media print {
body { font-size: 11px; } @page { size: A4; margin: 20mm 18mm 24mm 18mm; }
.cover-page { height: 297mm; }
.module-divider { height: 297mm; } body { background: #fff; padding: 0; font-size: 11px; }
.back-cover { height: 297mm; }
.no-print { display: none; } .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> </style>
</head> </head>
...@@ -833,9 +349,6 @@ $sectionColors = [ ...@@ -833,9 +349,6 @@ $sectionColors = [
'#0891B2', '#7C3AED', '#059669', '#DC2626', '#2563EB', '#0891B2', '#7C3AED', '#059669', '#DC2626', '#2563EB',
'#8B5CF6', '#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#3B82F6', '#10B981', '#F59E0B', '#EF4444',
'#06B6D4', '#EC4899', '#14B8A6', '#F97316', '#6366F1', '#06B6D4', '#EC4899', '#14B8A6', '#F97316', '#6366F1',
'#84CC16', '#0EA5E9', '#D946EF', '#22C55E', '#E11D48',
'#0891B2', '#7C3AED', '#059669', '#DC2626', '#2563EB',
'#8B5CF6', '#3B82F6', '#10B981',
]; ];
$totalTutorials = 0; $totalTutorials = 0;
$totalSections = count($data['sections']); $totalSections = count($data['sections']);
...@@ -850,61 +363,41 @@ $sectionIcons = [ ...@@ -850,61 +363,41 @@ $sectionIcons = [
]; ];
?> ?>
<!-- ═══ COVER PAGE ═══ --> <!-- ═══ COVER ═══ -->
<div class="cover-page"> <div class="book-cover">
<div class="cover-geometric"></div> <div class="cover-icon">
<div class="cover-logo">
<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> <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>
<div class="cover-title">Book of the ERP</div> <h1>Book of the ERP</h1>
<div class="cover-subtitle">كتاب النظام الشامل</div> <div class="subtitle">كتاب النظام الشامل — الإصدار الأول</div>
<div class="cover-desc">الدليل التدريبي التفصيلي لجميع عمليات وأقسام نظام إدارة النادي — مرجع شامل للموظفين</div> <div class="desc">الدليل التدريبي التفصيلي لجميع عمليات وأقسام نظام إدارة النادي — مرجع شامل للموظفين</div>
<div class="cover-stats"> <div class="cover-stats">
<div class="cover-stat"> <div><span class="cover-stat-num"><?= $totalSections ?></span><span class="cover-stat-label">قسم</span></div>
<span class="cover-stat-num"><?= $totalSections ?></span> <div><span class="cover-stat-num"><?= $totalTutorials ?></span><span class="cover-stat-label">شرح</span></div>
<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> </div>
<div class="cover-meta">تم التوليد تلقائياً بواسطة نظام إدارة النادي<br><?= $data['generatedAt'] ?></div>
</div> </div>
<!-- ═══ TABLE OF CONTENTS ═══ --> <!-- ═══ TABLE OF CONTENTS ═══ -->
<div class="toc-page"> <div class="book-toc">
<div class="toc-header"> <h2>فهرس المحتويات</h2>
<h1>فهرس المحتويات</h1> <div class="toc-sub"><?= $totalSections ?> قسم — <?= $totalTutorials ?> شرح تفصيلي</div>
<p><?= $totalSections ?> قسم — <?= $totalTutorials ?> شرح تفصيلي</p>
</div>
<div class="toc-grid"> <div class="toc-grid">
<?php $sectionNum = 0; foreach ($data['sections'] as $sectionKey => $section): $sectionNum++; ?> <?php $sn = 0; foreach ($data['sections'] as $sk => $sec): $sn++; $c = $sectionColors[$sn - 1] ?? '#8B5CF6'; ?>
<div class="toc-section" style="border-right-color: <?= $sectionColors[$sectionNum - 1] ?? '#8B5CF6' ?>;"> <div class="toc-item" style="--c:<?= $c ?>;">
<div class="toc-section-title"> <div class="toc-item-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-item-num" style="background:<?= $c ?>;"><?= $sn ?></span>
<span class="toc-badge"><?= count($section['tutorials']) ?></span> <?= htmlspecialchars($sec['title'], ENT_QUOTES, 'UTF-8') ?>
<span class="toc-item-badge"><?= count($sec['tutorials']) ?></span>
</div> </div>
<?php if (count($section['tutorials']) <= 8): ?> <ul>
<ul class="toc-items"> <?php $ti = 0; foreach ($sec['tutorials'] as $tSlug => $tut): $ti++; if ($ti > 5): break; endif; ?>
<?php foreach ($section['tutorials'] as $slug => $tutorial): ?> <li><?= htmlspecialchars($tut['title'], ENT_QUOTES, 'UTF-8') ?></li>
<li><?= htmlspecialchars($tutorial['title'], ENT_QUOTES, 'UTF-8') ?></li> <?php endforeach; ?>
<?php endforeach; ?> <?php if (count($sec['tutorials']) > 5): ?>
</ul> <li style="color:#9ca3af;font-style:italic;">+ <?= count($sec['tutorials']) - 5 ?> شرح آخر...</li>
<?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>
<?php endif; ?> <?php endif; ?>
</ul>
</div> </div>
<?php endforeach; ?> <?php endforeach; ?>
</div> </div>
...@@ -913,37 +406,25 @@ $sectionIcons = [ ...@@ -913,37 +406,25 @@ $sectionIcons = [
<!-- ═══ SECTIONS & TUTORIALS ═══ --> <!-- ═══ SECTIONS & TUTORIALS ═══ -->
<?php $sectionNum = 0; foreach ($data['sections'] as $sectionKey => $section): $sectionNum++; $color = $sectionColors[$sectionNum - 1] ?? '#8B5CF6'; ?> <?php $sectionNum = 0; foreach ($data['sections'] as $sectionKey => $section): $sectionNum++; $color = $sectionColors[$sectionNum - 1] ?? '#8B5CF6'; ?>
<!-- Module Divider Page --> <div class="section-divider" style="--c:<?= $color ?>;">
<div class="module-divider" style="--section-color: <?= $color ?>;"> <div class="section-divider-icon" style="background:<?= $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 ?>;">
<svg viewBox="0 0 24 24"><?= $sectionIcons[$sectionKey] ?? $sectionIcons['default'] ?></svg> <svg viewBox="0 0 24 24"><?= $sectionIcons[$sectionKey] ?? $sectionIcons['default'] ?></svg>
</div> </div>
<h2><?= htmlspecialchars($section['title'], ENT_QUOTES, 'UTF-8') ?></h2> <h2><?= htmlspecialchars($section['title'], ENT_QUOTES, 'UTF-8') ?></h2>
<?php if (!empty($section['subtitle'])): ?> <?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; ?> <?php endif; ?>
<div class="module-divider-stats"> <div class="section-stats">
<div class="module-divider-stat"> <div><span class="section-stat-num" style="color:<?= $color ?>;"><?= count($section['tutorials']) ?></span><span class="section-stat-label">شرح</span></div>
<span class="module-divider-stat-num" style="color:<?= $color ?>;"><?= count($section['tutorials']) ?></span> <div><span class="section-stat-num" style="color:<?= $color ?>;"><?= count($section['categories'] ?? []) ?></span><span class="section-stat-label">تصنيف</span></div>
<span class="module-divider-stat-label">شرح</span> <div><span class="section-stat-num" style="color:<?= $color ?>;">القسم <?= $sectionNum ?></span><span class="section-stat-label">من <?= $totalSections ?></span></div>
</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> </div>
</div> </div>
<?php if (!empty($section['screenshot']) && file_exists($section['screenshot'])): ?> <?php if (!empty($section['screenshot']) && file_exists($section['screenshot'])): ?>
<?php $webPath = str_replace(realpath(__DIR__ . '/../../../../public'), '', $section['screenshot']); ?> <?php $webPath = str_replace(realpath(__DIR__ . '/../../../../public'), '', $section['screenshot']); ?>
<div style="text-align:center;margin: 24px 0;page-break-inside:avoid;"> <div class="section-screenshot">
<img src="<?= $webPath ?>" class="tutorial-screenshot" alt="<?= htmlspecialchars($section['title'], ENT_QUOTES, 'UTF-8') ?>"> <img src="<?= $webPath ?>" alt="<?= htmlspecialchars($section['title'], ENT_QUOTES, 'UTF-8') ?>">
</div> </div>
<?php endif; ?> <?php endif; ?>
...@@ -956,34 +437,34 @@ foreach ($section['tutorials'] as $slug => $tutorial): ...@@ -956,34 +437,34 @@ foreach ($section['tutorials'] as $slug => $tutorial):
if ($cat !== $currentCategory && !empty($section['categories'][$cat])): if ($cat !== $currentCategory && !empty($section['categories'][$cat])):
$currentCategory = $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') ?> <?= htmlspecialchars($section['categories'][$cat]['label'], ENT_QUOTES, 'UTF-8') ?>
</div> </div>
<?php endif; ?> <?php endif; ?>
<div class="tutorial-block"> <div class="tutorial-card" style="--c:<?= $color ?>;">
<div class="tutorial-block-header"> <div class="tutorial-card-head">
<div class="tutorial-num" style="background: linear-gradient(135deg, <?= $color ?>, <?= $color ?>CC);"><?= $tutorialNum ?></div> <div class="tutorial-card-num" style="background:<?= $color ?>;"><?= $tutorialNum ?></div>
<div style="flex:1;"> <div>
<h3><?= htmlspecialchars($tutorial['title'], ENT_QUOTES, 'UTF-8') ?></h3> <h3><?= htmlspecialchars($tutorial['title'], ENT_QUOTES, 'UTF-8') ?></h3>
<?php if (!empty($tutorial['subtitle'])): ?> <?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; ?> <?php endif; ?>
</div> </div>
</div> </div>
<div class="tutorial-block-body"> <div class="tutorial-card-body">
<?php if (!empty($tutorial['htmlContent'])): ?> <?php if (!empty($tutorial['htmlContent'])): ?>
<?= $tutorial['htmlContent'] ?> <?= $tutorial['htmlContent'] ?>
<?php elseif (!empty($tutorial['steps'])): ?> <?php elseif (!empty($tutorial['steps'])): ?>
<?php foreach ($tutorial['steps'] as $stepIdx => $step): ?> <?php foreach ($tutorial['steps'] as $stepIdx => $step): ?>
<div class="tut-step" style="border-right-color: <?= $color ?>;"> <div class="step-card" style="--c:<?= $color ?>;">
<div class="tut-step-num"><?= $stepIdx + 1 ?></div> <div class="step-card-num"><?= $stepIdx + 1 ?></div>
<div class="tut-step-title"><?= htmlspecialchars($step['title'] ?? '', ENT_QUOTES, 'UTF-8') ?></div> <div class="step-card-title"><?= htmlspecialchars($step['title'] ?? '', ENT_QUOTES, 'UTF-8') ?></div>
<div class="tut-step-body"><?= $step['body'] ?? '' ?></div> <div class="step-card-body"><?= $step['body'] ?? '' ?></div>
</div> </div>
<?php endforeach; ?> <?php endforeach; ?>
<?php else: ?> <?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') ?> <?= htmlspecialchars($tutorial['subtitle'] ?? $tutorial['title'], ENT_QUOTES, 'UTF-8') ?>
</p> </p>
<?php endif; ?> <?php endif; ?>
...@@ -994,8 +475,8 @@ foreach ($section['tutorials'] as $slug => $tutorial): ...@@ -994,8 +475,8 @@ foreach ($section['tutorials'] as $slug => $tutorial):
<?php endforeach; ?> <?php endforeach; ?>
<!-- ═══ BACK COVER ═══ --> <!-- ═══ BACK COVER ═══ -->
<div class="back-cover"> <div class="book-back">
<div class="back-cover-logo"> <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> <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>
<h2>Book of the ERP</h2> <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