lzstealth/pulse-signage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Activity

Add onboarding weather and template gradients
Publish Docker Image / build-and-push-existing-registry (./build/Dockerfile, web, pulse-signage-web) (push) Successful in 1m53s
Details
Publish Docker Image / build-and-push-existing-registry (./build/Dockerfile.player, player, pulse-signage-player) (push) Successful in 34s
Details

Browse Source
This commit is contained in:
lzstealth
2026-08-28 20:05:23 +01:00
parent aa07a78912
commit 3960931ebe
80 changed files with 12750 additions and 519 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/player/render.js
+24 -23
View File
@@ -36,34 +36,31 @@ function getPlayerServiceWorkerRegistrationScript() {
].join('');
}
function renderOnboardingLandingBody() {
function renderOnboardingLandingBody(options) {
const onboardingCode = String(options && options.pairingCode || '').trim();
const deviceId = String(options && options.deviceId || '').trim();
return [
'<main class="onboarding-shell">',
' <section class="onboarding-card onboarding-card--landing">',
' <p class="onboarding-kicker">Pulse Signage</p>',
' <h1>Onboard this player</h1>',
' <p class="onboarding-copy">Choose an existing screen, name the client, and either scan the QR code or finish right here with a keyboard and mouse.</p>',
' <main id="onboarding-shell" class="onboarding-shell">',
' <section class="onboarding-stage onboarding-stage--landing">',
' <div class="onboarding-layout">',
' <div class="onboarding-qr-pane">',
' <div class="onboarding-qr-frame">',
' <img id="onboarding-qr" alt="Onboarding QR code" src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 320 320%22%3E%3Crect width=%22320%22 height=%22320%22 rx=%2224%22 fill=%22%23ffffff%22/%3E%3Crect x=%2230%22 y=%2230%22 width=%22260%22 height=%22260%22 rx=%2218%22 fill=%22%23f8fafc%22 stroke=%22%23cbd5e1%22 stroke-width=%223%22 stroke-dasharray=%2212 10%22/%3E%3Cpath d=%22M106 118h108M106 156h108M106 194h72%22 stroke=%22%2394a3b8%22 stroke-width=%2214%22 stroke-linecap=%22round%22/%3E%3Ccircle cx=%22128%22 cy=%22248%22 r=%2212%22 fill=%22%2394a3b8%22/%3E%3Ctext x=%22160%22 y=%2278%22 text-anchor=%22middle%22 fill=%22%230f172a%22 font-family=%22Arial,sans-serif%22 font-size=%2224%22 font-weight=%22700%22%3EQR code loading%3C/text%3E%3Ctext x=%22160%22 y=%22266%22 text-anchor=%22middle%22 fill=%22%234b5563%22 font-family=%22Arial,sans-serif%22 font-size=%2214%22%3EPlease wait%3C/text%3E%3C/svg%3E" />',
' </div>',
' <div id="onboarding-status" class="onboarding-status">Preparing onboarding link...</div>',
' <p class="onboarding-qr-caption">Scan this QR code with your phone</p>',
' </div>',
' <div class="onboarding-copy-panel">',
' <p class="onboarding-kicker onboarding-brand-title">Pulse Signage</p>',
' <h1>Quickly set up with your phone</h1>',
' <ol class="onboarding-instructions">',
' <li>Open the camera and scan the QR code.</li>',
' <li>Log in to Pulse Signage and choose a screen.</li>',
' </ol>',
' <div class="onboarding-pin-block">',
' <span class="onboarding-pin-label">Pairing Code</span>',
' <strong id="onboarding-pairing-code" class="onboarding-pin">' + Handlebars.escapeExpression(onboardingCode || 'Loading...') + '</strong>',
' </div>',
' </div>',
' <form id="onboarding-local-form" class="onboarding-form onboarding-form--local">',
' <label>',
' <span>Client name</span>',
' <input name="clientName" type="text" maxlength="255" required placeholder="Lobby player" autocomplete="off" />',
' </label>',
' <label>',
' <span>Screen</span>',
' <select name="screenSlug" id="onboarding-screen-select" required>',
' <option value="">Loading screens...</option>',
' </select>',
' </label>',
' <button type="submit">Save client</button>',
' <div id="onboarding-message" class="onboarding-status"></div>',
' </form>',
' </div>',
' </section>',
'</main>'
@@ -79,6 +76,10 @@ function renderOnboardingFormBody(deviceId) {
' <p class="onboarding-copy">Pick an existing screen and give this player a friendly name that will persist after refreshes.</p>',
' <form id="onboarding-form" class="onboarding-form">',
' <label>',
' <span>Pairing code</span>',
' <input name="pairingCode" type="text" inputmode="numeric" pattern="[0-9]{6}" maxlength="6" required autocomplete="one-time-code" placeholder="Enter the code shown on the kiosk" />',
' </label>',
' <label>',
' <span>Client name</span>',
' <input name="clientName" type="text" maxlength="255" required placeholder="Lobby player" />',
' </label>',
@@ -136,13 +137,13 @@ function renderPlayerPage(slug, initialData) {
});
}
function renderPlayerOnboardingLandingPage() {
function renderPlayerOnboardingLandingPage(options) {
const pageAuthToken = createPageAuthBundle({ scope: 'onboarding' });
const fontStylesheetHref = getFontStylesheetHref(PLAYER_MEDIA_DIR);
return renderPage(getPlayerPageTemplate(), {
title: 'Onboard player',
bodyClass: 'onboarding-page',
body: renderOnboardingLandingBody(),
body: renderOnboardingLandingBody(options),
stylesheets: fontStylesheetHref ? [fontStylesheetHref] : [],
script: createPageFetchAuthScript(pageAuthToken) + getPlayerServiceWorkerRegistrationScript() + renderOnboardingLandingScript()
});