|
|
| (36 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| <!-- ============================================================
| | <div class="training-page-wrap"><div class="training-meta"><span class="training-tag">{{{module|Training}}}</span> <span class="training-meta-item">⏱ {{{duration|}}}</span> <span class="training-meta-item">Updated {{{updated|}}}</span></div><div class="training-section-label">Overview</div><div class="training-overview">{{{summary|No summary provided.}}}</div><div class="training-content-grid"><div class="training-video-col"><div class="training-video-wrap">< html><video controls preload="metadata" class="training-video-player" width="1600" data-file=" </html>{{{videofile|}}} <html>" type="video/mp4"></video></ html><div class="training-video-footer"><span class="training-video-title">{{{title|Training Video}}}</span> <span class="training-video-dur">{{{duration|}}}</span></div></div><div class="training-lower-grid"><div class="training-info-card"><div class="training-card-title">✓ Key Points</div>{{{keypoints|No key points provided.}}}</div><div class="training-info-card"><div class="training-card-title">🔗 See Also</div>{{{seealso|No related pages.}}}</div></div></div><div class="training-transcript-col"><div class="training-transcript-card"><div class="training-transcript-header"><span class="training-transcript-title">📋 Transcript</span> <span class="training-transcript-hint">Click any line to jump</span></div><div class="ts-scroll-body"> {{{transcript|No transcript available. }}}</div> |
| TEMPLATE: Template:TrainingVideo
| | </div></div></div> |
|
| |
| Save this page at: Template:TrainingVideo
| |
|
| |
| USAGE ON ANY TRAINING PAGE:
| |
| {{TrainingVideo
| |
| | title = Quick Access – In & Out Board – Staff Timesheets
| |
| | module = Module 3
| |
| | duration = 4:32
| |
| | updated = April 2026
| |
| | summary = This module walks you through the Quick Access panel,
| |
| showing how to record staff arrivals and departures via
| |
| the In & Out Board and how those entries feed directly
| |
| into Staff Timesheets.
| |
| | videofile = Quick_Access_In_and_Out_Board.mp4
| |
| | transcript =
| |
| 0:17|Welcome to Quick Access. This panel is available from every screen via the toolbar at the top right.
| |
| 0:48|Click ''In & Out Board'' to open the attendance log. Staff are listed alphabetically.
| |
| 1:27|To mark a staff member as arrived, click their name and select ''Check In''. The timestamp records automatically.
| |
| 2:10|Departures follow the same process — open the board and select ''Check Out''.
| |
| 2:51|The Timesheets tab now shows today's entries, populated automatically from the board.
| |
| 3:32|To correct an entry, re-open the board, click the record, and choose ''Edit Record''.
| |
| 4:07|Head to Timesheet Summary to export the daily report as CSV or PDF.
| |
| | seealso =
| |
| * [[Setting Up Staff Profiles]]
| |
| * [[Generating Payroll Reports]]
| |
| * [[Leave & Absence Management]]
| |
| | keypoints =
| |
| * Use Quick Access from any screen — no navigation required.
| |
| * In & Out entries auto-populate the daily timesheet.
| |
| * Corrections can be made within the same session.
| |
| * Export to CSV or PDF from the Timesheet summary view.
| |
| }}
| |
| ============================================================ -->
| |
| | |
| <!-- ── Inline styles (scoped to this template) ── -->
| |
| <templatestyles src="Template:TrainingVideo/styles.css" />
| |
| | |
| <div class="training-page-wrap"> | |
| | |
| <!-- ── Page meta ── -->
| |
| <div class="training-meta"> | |
| <span class="training-tag">{{{module|Training}}}</span> | |
| <span class="training-meta-item">⏱ {{{duration|}}}</span> | |
| <span class="training-meta-item">Updated {{{updated|}}}</span> | |
| </div> | |
| | |
| <!-- ── Overview ── -->
| |
| <div class="training-section-label">Overview</div> | |
| <div class="training-overview">{{{summary|No summary provided.}}}</div> | |
| | |
| <!-- ══════════════════════════════════════════
| |
| MAIN CONTENT: Video + Transcript sidebar
| |
| ══════════════════════════════════════════ -->
| |
| <div class="training-content-grid"> | |
| | |
| <!-- Left: video card -->
| |
| <div class="training-video-col"> | |
| <div class="training-video-wrap"> | |
| | |
| <!-- Native HTML5 video player -->
| |
| <video controls preload="metadata" class="training-video-player">
| |
| <source src="{{filepath:{{{videofile|}}}}}" type="video/mp4" />
| |
| Your browser does not support HTML5 video.
| |
| </video>
| |
| | |
| <!-- Custom progress bar (driven by Common.js) -->
| |
| <div class="ts-controls">
| |
| <div class="ts-progress-track">
| |
| <div class="ts-progress-fill"></div>
| |
| <!-- Timestamp markers: add one per transcript entry, times in seconds -->
| |
| <div class="ts-progress-marker" data-time="17"></div>
| |
| <div class="ts-progress-marker" data-time="48"></div>
| |
| <div class="ts-progress-marker" data-time="87"></div>
| |
| <div class="ts-progress-marker" data-time="130"></div>
| |
| <div class="ts-progress-marker" data-time="171"></div>
| |
| <div class="ts-progress-marker" data-time="212"></div>
| |
| <div class="ts-progress-marker" data-time="247"></div>
| |
| </div>
| |
| <div class="ts-ctrl-row">
| |
| <span class="ts-time-display">0:00 / {{{duration|--:--}}}</span>
| |
| </div>
| |
| </div>
| |
| | |
| <div class="training-video-footer"> | |
| <span class="training-video-title">{{{title|Training Video}}}</span>
| |
| <span class="training-video-dur">{{{duration|}}}</span>
| |
| </div>
| |
| </div><!-- /training-video-wrap -->
| |
| | |
| <!-- ── Key Points ── -->
| |
| <div class="training-lower-grid"> | |
| <div class="training-info-card"> | |
| <div class="training-card-title">✓ Key Points</div> | |
| {{{keypoints|No key points provided.}}}
| |
| </div>
| |
| | |
| <!-- ── See Also ── -->
| |
| <div class="training-info-card"> | |
| <div class="training-card-title">🔗 See Also</div> | |
| {{{seealso|No related pages.}}}
| |
| </div>
| |
| </div>
| |
| </div><!-- /training-video-col -->
| |
| | |
| <!-- Right: transcript sidebar -->
| |
| <div class="training-transcript-col"> | |
| <div class="training-transcript-card"> | |
| <div class="training-transcript-header"> | |
| <span class="training-transcript-title">📋 Transcript</span>
| |
| <span class="training-transcript-hint">Click any line to jump</span>
| |
| </div>
| |
| <div class="ts-scroll-body"> | |
| | |
| <!--
| |
| TRANSCRIPT ENTRIES
| |
| Each entry needs:
| |
| class="ts-entry"
| |
| data-time="[seconds]" ← used by Common.js to sync
| |
| | |
| Format below: one <div> per timestamp.
| |
| The ts-time span shows the label; ts-text shows the line.
| |
| | |
| TO ADD/EDIT ENTRIES: duplicate a ts-entry block and update
| |
| data-time (in seconds) and the text inside ts-text.
| |
| -->
| |
| | |
| <div class="ts-entry" data-time="17">
| |
| <span class="ts-time">0:17</span>
| |
| <span class="ts-text">Welcome to Quick Access. This panel is available from every screen via the toolbar at the top right.</span>
| |
| </div>
| |
| <div class="ts-entry" data-time="48">
| |
| <span class="ts-time">0:48</span>
| |
| <span class="ts-text">Click <i>In & Out Board</i> to open the attendance log. Staff are listed alphabetically.</span>
| |
| </div>
| |
| <div class="ts-entry" data-time="87">
| |
| <span class="ts-time">1:27</span>
| |
| <span class="ts-text">To mark a staff member as arrived, click their name and select <i>Check In</i>. The timestamp records automatically.</span>
| |
| </div>
| |
| <div class="ts-entry" data-time="130">
| |
| <span class="ts-time">2:10</span>
| |
| <span class="ts-text">Departures follow the same process — open the board and select <i>Check Out</i>.</span>
| |
| </div>
| |
| <div class="ts-entry" data-time="171">
| |
| <span class="ts-time">2:51</span>
| |
| <span class="ts-text">The Timesheets tab now shows today's entries, populated automatically from the board.</span>
| |
| </div>
| |
| <div class="ts-entry" data-time="212">
| |
| <span class="ts-time">3:32</span>
| |
| <span class="ts-text">To correct an entry, re-open the board, click the record, and choose <i>Edit Record</i>.</span>
| |
| </div>
| |
| <div class="ts-entry" data-time="247">
| |
| <span class="ts-time">4:07</span>
| |
| <span class="ts-text">Head to Timesheet Summary to export the daily report as CSV or PDF.</span>
| |
| </div>
| |
| | |
| </div><!-- /ts-scroll-body -->
| |
| </div><!-- /training-transcript-card -->
| |
| </div><!-- /training-transcript-col -->
| |
| | |
| </div><!-- /training-content-grid -->
| |
| </div><!-- /training-page-wrap --> | |