214 lines
11 KiB
HTML
214 lines
11 KiB
HTML
 
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' file: blob: data:; style-src 'self' 'unsafe-inline'; script-src 'self'" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
|
|
<title>Band Lineup</title>
|
||
|
|
<link rel="stylesheet" href="styles.css" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="top-edge-hit" id="top-edge-hit" aria-hidden="true"></div>
|
||
|
|
<header class="toolbar" id="toolbar">
|
||
|
|
<button type="button" class="btn primary" id="btn-add">Add photos</button>
|
||
|
|
<div class="toolbar-spacer"></div>
|
||
|
|
<div class="layout-controls">
|
||
|
|
<label class="layout-field">
|
||
|
|
<span>Cols</span>
|
||
|
|
<input type="number" id="layout-cols" min="1" step="1" value="7" />
|
||
|
|
</label>
|
||
|
|
<label class="layout-field">
|
||
|
|
<span>Rows</span>
|
||
|
|
<input type="number" id="layout-rows" min="1" step="1" value="2" />
|
||
|
|
</label>
|
||
|
|
<button type="button" class="btn" id="btn-apply-layout">Apply</button>
|
||
|
|
</div>
|
||
|
|
<button type="button" class="btn" id="btn-toggle-parallax">Parallax On</button>
|
||
|
|
<button type="button" class="btn" id="btn-fullscreen">Fullscreen</button>
|
||
|
|
<span class="app-version" id="app-version" title="Installed version"></span>
|
||
|
|
</header>
|
||
|
|
<div class="app-main">
|
||
|
|
<main class="stage" id="drop-zone">
|
||
|
|
<div class="row" id="row" aria-label="Lineup"></div>
|
||
|
|
<p class="empty" id="empty">Drag people from the right into any stage slot.</p>
|
||
|
|
</main>
|
||
|
|
<aside class="library-panel" id="library-panel" aria-label="Setup panel">
|
||
|
|
<nav class="library-tabs" id="library-tabs" role="tablist" aria-label="Panel sections">
|
||
|
|
<button type="button" class="lib-tab is-active" id="tab-pictures" data-tab="pictures" role="tab" aria-selected="true">Pictures</button>
|
||
|
|
<button type="button" class="lib-tab" id="tab-pco" data-tab="pco" role="tab" aria-selected="false">PCO</button>
|
||
|
|
<button type="button" class="lib-tab" id="tab-propresenter" data-tab="propresenter" role="tab" aria-selected="false">ProPresenter</button>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<div class="library-pane is-active" data-pane="pictures" role="tabpanel" aria-labelledby="tab-pictures">
|
||
|
|
<div class="library-scroll" id="library-list"></div>
|
||
|
|
<div class="pane-foot">
|
||
|
|
<span class="slot-size-readout" id="slot-size-readout"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="library-pane" data-pane="pco" role="tabpanel" aria-labelledby="tab-pco">
|
||
|
|
<div class="pane-scroll">
|
||
|
|
<div class="pane-head">
|
||
|
|
<span class="pane-title">Planning Center</span>
|
||
|
|
<button type="button" class="btn btn-small" id="btn-pco-connect">Connect PCO</button>
|
||
|
|
</div>
|
||
|
|
<div class="pco-controls">
|
||
|
|
<select id="pco-service-type" class="pco-select" aria-label="Planning Center service type">
|
||
|
|
<option value="">Choose service type</option>
|
||
|
|
</select>
|
||
|
|
<button type="button" class="btn btn-small" id="btn-pco-sync">Sync Upcoming</button>
|
||
|
|
<button type="button" class="btn btn-small" id="btn-pco-test-birthdays">Test Birthdays</button>
|
||
|
|
<button type="button" class="btn btn-small" id="btn-pco-disconnect">Disconnect</button>
|
||
|
|
</div>
|
||
|
|
<div class="pco-status" id="pco-status">Planning Center is not connected.</div>
|
||
|
|
<div class="pco-status pco-birthday-result" id="pco-birthday-result"></div>
|
||
|
|
|
||
|
|
<div class="bday-block">
|
||
|
|
<div class="bday-head">
|
||
|
|
<span class="bday-title">Birthday Mode 🎂</span>
|
||
|
|
<label class="bday-switch">
|
||
|
|
<input type="checkbox" id="bday-enabled" />
|
||
|
|
<span class="bday-switch-label">On</span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="bday-controls" id="bday-controls">
|
||
|
|
<div class="bday-line">
|
||
|
|
<span class="bday-line-label">Intensity</span>
|
||
|
|
<div class="seg-inline" id="bday-intensity" role="group" aria-label="Birthday intensity">
|
||
|
|
<button type="button" data-int="subtle">Subtle</button>
|
||
|
|
<button type="button" data-int="full">Full</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="bday-line">
|
||
|
|
<span class="bday-line-label">Force on <em>(test)</em></span>
|
||
|
|
<select id="bday-test" class="pco-select bday-test-select" aria-label="Force birthday on a person for testing">
|
||
|
|
<option value="">Off</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="bday-hint">Birthdays celebrate for the whole service week (Wednesday→Tuesday). Force is for testing only — it clears when the app restarts.</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="pco-position-builder">
|
||
|
|
<select id="pco-position-option" class="pco-select" aria-label="Planning Center position">
|
||
|
|
<option value="">Choose position</option>
|
||
|
|
</select>
|
||
|
|
<button type="button" class="btn btn-small" id="btn-pco-add-position">Add Position</button>
|
||
|
|
</div>
|
||
|
|
<div class="pco-position-list" id="pco-position-list" aria-label="Selected Planning Center positions"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="library-pane" data-pane="propresenter" role="tabpanel" aria-labelledby="tab-propresenter">
|
||
|
|
<div class="pane-scroll">
|
||
|
|
<div class="pane-head">
|
||
|
|
<span class="pane-title">ProPresenter</span>
|
||
|
|
<div class="pp-controls-buttons">
|
||
|
|
<button type="button" class="btn btn-small" id="btn-pp-connect">Connect</button>
|
||
|
|
<button type="button" class="btn btn-small" id="btn-pp-disconnect">Disconnect</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="pp-status" id="pp-status">ProPresenter is not connected.</div>
|
||
|
|
<select id="pp-playlist-select" class="pco-select pp-playlist-select" aria-label="ProPresenter playlist to display">
|
||
|
|
<option value="">Choose playlist</option>
|
||
|
|
</select>
|
||
|
|
|
||
|
|
<div class="pane-head pane-head-spaced">
|
||
|
|
<span class="pane-title">Studio Displays</span>
|
||
|
|
<button type="button" class="btn btn-small" id="btn-display-toggle">Turn On</button>
|
||
|
|
</div>
|
||
|
|
<div class="pp-status" id="display-status">Off — screens around the building can’t see this yet.</div>
|
||
|
|
<div class="display-urls" id="display-urls"></div>
|
||
|
|
<div class="display-port-row">
|
||
|
|
<label class="display-port-field">
|
||
|
|
<span>Port</span>
|
||
|
|
<input type="text" id="display-port" inputmode="numeric" autocomplete="off" spellcheck="false" />
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</aside>
|
||
|
|
<aside class="pp-column" id="pp-column" aria-label="ProPresenter playlist position">
|
||
|
|
<div class="pp-playlist-name" id="pp-playlist-name"></div>
|
||
|
|
<div class="pp-now" id="pp-now"></div>
|
||
|
|
<div class="pp-next-wrap">
|
||
|
|
<div class="pp-section-label" id="pp-next-label">Next</div>
|
||
|
|
<div class="pp-next-list" id="pp-next-list"></div>
|
||
|
|
</div>
|
||
|
|
</aside>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="label-modal" class="modal hidden" role="dialog" aria-modal="true" aria-labelledby="label-modal-title">
|
||
|
|
<div class="modal-backdrop" id="label-modal-backdrop"></div>
|
||
|
|
<div class="modal-card">
|
||
|
|
<h2 id="label-modal-title" class="modal-title">Edit label</h2>
|
||
|
|
<input type="text" class="label-input" id="label-input" autocomplete="off" spellcheck="false" />
|
||
|
|
<div class="vkeyboard" id="vkeyboard" aria-label="On-screen keyboard"></div>
|
||
|
|
<div class="modal-actions">
|
||
|
|
<button type="button" class="btn" id="label-cancel">Cancel</button>
|
||
|
|
<button type="button" class="btn primary" id="label-done">Done</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="number-modal" class="modal hidden" role="dialog" aria-modal="true" aria-labelledby="number-modal-title">
|
||
|
|
<div class="modal-backdrop" id="number-modal-backdrop"></div>
|
||
|
|
<div class="modal-card modal-card-small">
|
||
|
|
<h2 id="number-modal-title" class="modal-title">Set value</h2>
|
||
|
|
<input type="text" class="label-input number-input" id="number-input" inputmode="numeric" autocomplete="off" readonly />
|
||
|
|
<div class="vkeyboard" id="number-keyboard" aria-label="On-screen number keyboard"></div>
|
||
|
|
<div class="modal-actions">
|
||
|
|
<button type="button" class="btn" id="number-cancel">Cancel</button>
|
||
|
|
<button type="button" class="btn primary" id="number-done">Done</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="pco-modal" class="modal hidden" role="dialog" aria-modal="true" aria-labelledby="pco-modal-title">
|
||
|
|
<div class="modal-backdrop" id="pco-modal-backdrop"></div>
|
||
|
|
<div class="modal-card modal-card-small">
|
||
|
|
<h2 id="pco-modal-title" class="modal-title">Connect Planning Center</h2>
|
||
|
|
<p class="modal-copy">Paste the Client ID and Secret from your Planning Center personal access token.</p>
|
||
|
|
<label class="modal-field">
|
||
|
|
<span>Client ID</span>
|
||
|
|
<input type="text" class="label-input modal-input" id="pco-client-id" autocomplete="off" spellcheck="false" />
|
||
|
|
</label>
|
||
|
|
<label class="modal-field">
|
||
|
|
<span>Secret</span>
|
||
|
|
<input type="password" class="label-input modal-input" id="pco-secret" autocomplete="off" spellcheck="false" />
|
||
|
|
</label>
|
||
|
|
<div class="modal-actions">
|
||
|
|
<button type="button" class="btn" id="pco-cancel">Cancel</button>
|
||
|
|
<button type="button" class="btn primary" id="pco-save">Connect</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="pp-modal" class="modal hidden" role="dialog" aria-modal="true" aria-labelledby="pp-modal-title">
|
||
|
|
<div class="modal-backdrop" id="pp-modal-backdrop"></div>
|
||
|
|
<div class="modal-card modal-card-small">
|
||
|
|
<h2 id="pp-modal-title" class="modal-title">Connect ProPresenter</h2>
|
||
|
|
<p class="modal-copy">Enter the IP address and network port of the computer running ProPresenter. Turn on the API in ProPresenter ▸ Preferences ▸ Network.</p>
|
||
|
|
<label class="modal-field">
|
||
|
|
<span>Host / IP address</span>
|
||
|
|
<input type="text" class="label-input modal-input" id="pp-host" autocomplete="off" spellcheck="false" placeholder="192.168.1.50" />
|
||
|
|
</label>
|
||
|
|
<label class="modal-field">
|
||
|
|
<span>Port</span>
|
||
|
|
<input type="text" class="label-input modal-input" id="pp-port" inputmode="numeric" autocomplete="off" spellcheck="false" placeholder="1025" />
|
||
|
|
</label>
|
||
|
|
<label class="modal-field">
|
||
|
|
<span>Password (only if set in ProPresenter)</span>
|
||
|
|
<input type="password" class="label-input modal-input" id="pp-password" autocomplete="off" spellcheck="false" />
|
||
|
|
</label>
|
||
|
|
<div class="modal-actions">
|
||
|
|
<button type="button" class="btn" id="pp-cancel">Cancel</button>
|
||
|
|
<button type="button" class="btn primary" id="pp-save">Connect</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="drag-ghost" class="drag-ghost hidden" aria-hidden="true"></div>
|
||
|
|
<script src="renderer.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|