82a0911d24
- New dedicated Content Manager tab (WordPress-like layout) with: - Stats dashboard (published, drafts, categories, quizzes, attempts) - Sidebar with category tree and filter controls (status, category) - Table-style content list with search - Full-page editor with title bar, meta fields, body editor, quiz builder - Content Manager visible only for admin and moderator roles in sidebar - Removed CMS from admin panel (admin panel is admin-only again) - Email templates: fully responsive with max-width, proper mobile breakpoints, table-based layout for Outlook/Gmail compatibility, no overflow - Security: escape all user data in emails with escHtml(), escape APP_URL in verify-email HTML, replace raw err.message with generic errors in auth - Security: email body from admin settings now HTML-escaped before rendering
128 lines
6.5 KiB
HTML
128 lines
6.5 KiB
HTML
<div class="module-header">
|
|
<h2><i class="fas fa-pen-to-square"></i> Content Manager</h2>
|
|
<p>Create and manage Learning Hub content, quizzes, and categories</p>
|
|
</div>
|
|
|
|
<!-- Stats bar -->
|
|
<div class="cms-stats-bar" id="lh-cms-stats-bar">
|
|
<div class="cms-stat"><span class="cms-stat-value" id="cms-stat-published">-</span><span class="cms-stat-label">Published</span></div>
|
|
<div class="cms-stat"><span class="cms-stat-value" id="cms-stat-drafts">-</span><span class="cms-stat-label">Drafts</span></div>
|
|
<div class="cms-stat"><span class="cms-stat-value" id="cms-stat-categories">-</span><span class="cms-stat-label">Categories</span></div>
|
|
<div class="cms-stat"><span class="cms-stat-value" id="cms-stat-quizzes">-</span><span class="cms-stat-label">Quizzes</span></div>
|
|
<div class="cms-stat"><span class="cms-stat-value" id="cms-stat-attempts">-</span><span class="cms-stat-label">Attempts</span></div>
|
|
</div>
|
|
|
|
<!-- CMS Layout: sidebar + main -->
|
|
<div class="cms-layout">
|
|
|
|
<!-- Sidebar: Categories + filters -->
|
|
<aside class="cms-sidebar">
|
|
<div class="cms-sidebar-section">
|
|
<h4><i class="fas fa-folder-tree"></i> Categories</h4>
|
|
<div id="lh-cms-categories" class="cms-cat-list"></div>
|
|
<div class="cms-add-cat">
|
|
<input type="text" id="lh-cms-cat-name" placeholder="New category..." class="cms-input-sm">
|
|
<button id="btn-lh-add-cat" class="cms-btn-add" title="Add category"><i class="fas fa-plus"></i></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cms-sidebar-section">
|
|
<h4><i class="fas fa-filter"></i> Filter</h4>
|
|
<select id="cms-filter-status" class="cms-input-sm" style="width:100%;margin-bottom:6px;">
|
|
<option value="all">All Status</option>
|
|
<option value="published">Published</option>
|
|
<option value="draft">Drafts</option>
|
|
</select>
|
|
<select id="cms-filter-category" class="cms-input-sm" style="width:100%;">
|
|
<option value="all">All Categories</option>
|
|
</select>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main: Content list / Editor -->
|
|
<div class="cms-main">
|
|
|
|
<!-- Content list view -->
|
|
<div id="cms-list-view">
|
|
<div class="cms-toolbar">
|
|
<button id="btn-lh-new-content" class="btn-sm btn-primary"><i class="fas fa-plus"></i> New Content</button>
|
|
<div class="cms-search">
|
|
<i class="fas fa-search"></i>
|
|
<input type="text" id="cms-search" placeholder="Search content..." class="cms-input-sm">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cms-content-table">
|
|
<div class="cms-table-header">
|
|
<span class="cms-col-title">Title</span>
|
|
<span class="cms-col-cat">Category</span>
|
|
<span class="cms-col-type">Type</span>
|
|
<span class="cms-col-status">Status</span>
|
|
<span class="cms-col-date">Updated</span>
|
|
<span class="cms-col-actions"></span>
|
|
</div>
|
|
<div id="lh-cms-content-list" class="cms-table-body">
|
|
<div style="text-align:center;padding:40px;color:var(--g400);">Loading...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Editor view (hidden until edit/new) -->
|
|
<div id="lh-cms-editor" class="cms-editor hidden">
|
|
<div class="cms-editor-header">
|
|
<button id="btn-lh-close-editor" class="btn-sm btn-ghost"><i class="fas fa-arrow-left"></i> Back to List</button>
|
|
<div class="cms-editor-actions">
|
|
<button id="btn-lh-delete-content" class="btn-sm hidden" style="background:var(--red-light);color:var(--red);"><i class="fas fa-trash"></i> Delete</button>
|
|
<select id="lh-cms-edit-published" class="cms-input-sm">
|
|
<option value="false">Draft</option>
|
|
<option value="true">Published</option>
|
|
</select>
|
|
<button id="btn-lh-save-content" class="btn-sm btn-primary"><i class="fas fa-save"></i> Save</button>
|
|
</div>
|
|
</div>
|
|
|
|
<input type="hidden" id="lh-cms-edit-id" value="">
|
|
|
|
<!-- Title -->
|
|
<input type="text" id="lh-cms-edit-title" class="cms-title-input" placeholder="Enter title...">
|
|
|
|
<!-- Meta row -->
|
|
<div class="cms-meta-row">
|
|
<div class="cms-meta-field">
|
|
<label>Category</label>
|
|
<select id="lh-cms-edit-category" class="cms-input-sm">
|
|
<option value="">Uncategorized</option>
|
|
</select>
|
|
</div>
|
|
<div class="cms-meta-field">
|
|
<label>Subject</label>
|
|
<input type="text" id="lh-cms-edit-subject" class="cms-input-sm" placeholder="e.g., Development">
|
|
</div>
|
|
<div class="cms-meta-field">
|
|
<label>Type</label>
|
|
<select id="lh-cms-edit-type" class="cms-input-sm">
|
|
<option value="article">Article</option>
|
|
<option value="quiz">Quiz Only</option>
|
|
<option value="pearl">Clinical Pearl</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Body editor -->
|
|
<div class="cms-body-section">
|
|
<label class="cms-label">Body <span style="color:var(--g400);font-weight:400;">(supports basic HTML: bold, lists, tables, links)</span></label>
|
|
<textarea id="lh-cms-edit-body" class="cms-body-editor" rows="16" placeholder="Write your content here... You can use HTML tags like <b>, <ul>, <ol>, <table>, <blockquote>, <a>, <h2>, <h3>, <code>, <p>..."></textarea>
|
|
</div>
|
|
|
|
<!-- Quiz builder -->
|
|
<div class="cms-quiz-section">
|
|
<div class="cms-quiz-header">
|
|
<h3><i class="fas fa-clipboard-question"></i> Quiz Questions</h3>
|
|
<button id="btn-lh-add-question" class="btn-sm btn-ghost"><i class="fas fa-plus"></i> Add Question</button>
|
|
</div>
|
|
<div id="lh-cms-questions" class="cms-questions-list"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|