Archive/screentinker
1
0
Fork 0
mirror of https://github.com/screentinker/screentinker.git synced 2026-05-15 07:32:23 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

Move player downloads into Add Display modal for discoverability

Browse source 
Player download links now appear directly in the Add Display modal below
the pairing form, so new users can find and install a player app without
hunting through Settings. Removed the duplicate downloads section from
the Settings page.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
ScreenTinker 2026-04-08 15:04:33 -05:00
parent 8a84923d72
commit b7d0c94313
2 changed files with 20 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
frontend/index.html
View file

@ -147,7 +147,7 @@
<!-- Add Device Modal -->
<div class="modal-overlay" id="addDeviceModal" style="display:none">
<div class="modal">
<div class="modal" style="max-width:560px">
<div class="modal-header">
<h3>Add Display</h3>
<button class="btn-icon" onclick="document.getElementById('addDeviceModal').style.display='none'">
@ -157,7 +157,7 @@
</button>
</div>
<div class="modal-body">
<p class="modal-description">Enter the 6-digit pairing code shown on the display.</p>
<p class="modal-description" style="margin-bottom:16px">Enter the 6-digit pairing code shown on the display.</p>
<div class="form-group">
<label>Pairing Code</label>
<input type="text" id="pairingCodeInput" maxlength="6" pattern="[0-9]{6}" placeholder="000000" class="pairing-input">
@ -166,6 +166,24 @@
<label>Display Name (optional)</label>
<input type="text" id="deviceNameInput" placeholder="e.g., Lobby TV" class="input">
</div>
<div style="border-top:1px solid var(--border,#1e293b);margin-top:20px;padding-top:16px">
<p style="font-size:12px;color:var(--text-muted,#64748b);margin-bottom:10px;font-weight:500">Need a player app? Install one to get a pairing code:</p>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:8px">
<a href="/download/apk" class="btn btn-secondary btn-sm" style="text-decoration:none;justify-content:center;font-size:12px">
&#129302; Android APK
</a>
<a href="/player" target="_blank" class="btn btn-secondary btn-sm" style="text-decoration:none;justify-content:center;font-size:12px">
&#127760; Web Player
</a>
<a href="/scripts/raspberry-pi-setup.sh" class="btn btn-secondary btn-sm" style="text-decoration:none;justify-content:center;font-size:12px">
&#129359; Raspberry Pi
</a>
<a href="/scripts/windows-setup.bat" class="btn btn-secondary btn-sm" style="text-decoration:none;justify-content:center;font-size:12px">
&#128187; Windows
</a>
</div>
<p style="font-size:11px;color:var(--text-muted,#64748b);margin-top:8px">Smart TVs (LG/Samsung): open the built-in browser and navigate to <code style="background:var(--bg-input,#0f172a);padding:1px 4px;border-radius:3px">/player</code></p>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" onclick="document.getElementById('addDeviceModal').style.display='none'">Cancel</button>

37
frontend/js/views/settings.js
View file

@ -64,43 +64,6 @@ export async function render(container) {
</div>
</div>
<div class="settings-section">
<h3>Player Downloads</h3>
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px">
<div style="background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);padding:16px">
<div style="font-size:24px;margin-bottom:8px">&#129302;</div>
<div style="font-weight:600;margin-bottom:4px">Android APK</div>
<div style="font-size:11px;color:var(--text-muted);margin-bottom:12px">Apolosign, Fire TV, any Android device</div>
<a href="/download/apk" class="btn btn-primary btn-sm" style="text-decoration:none;width:100%;justify-content:center">Download APK</a>
</div>
<div style="background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);padding:16px">
<div style="font-size:24px;margin-bottom:8px">&#127760;</div>
<div style="font-weight:600;margin-bottom:4px">Web Player</div>
<div style="font-size:11px;color:var(--text-muted);margin-bottom:12px">Any browser, ChromeOS, Smart TVs</div>
<a href="/player" target="_blank" class="btn btn-primary btn-sm" style="text-decoration:none;width:100%;justify-content:center">Open Player</a>
</div>
<div style="background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);padding:16px">
<div style="font-size:24px;margin-bottom:8px">&#129359;</div>
<div style="font-weight:600;margin-bottom:4px">Raspberry Pi</div>
<div style="font-size:11px;color:var(--text-muted);margin-bottom:12px">Auto-start kiosk mode on Pi OS</div>
<a href="/scripts/raspberry-pi-setup.sh" class="btn btn-secondary btn-sm" style="text-decoration:none;width:100%;justify-content:center">Download Script</a>
<div style="font-size:10px;color:var(--text-muted);margin-top:6px"><code>curl -sSL ${serverUrl}/scripts/raspberry-pi-setup.sh | bash</code></div>
</div>
<div style="background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);padding:16px">
<div style="font-size:24px;margin-bottom:8px">&#128187;</div>
<div style="font-weight:600;margin-bottom:4px">Windows</div>
<div style="font-size:11px;color:var(--text-muted);margin-bottom:12px">Chrome kiosk mode on Windows</div>
<a href="/scripts/windows-setup.bat" class="btn btn-secondary btn-sm" style="text-decoration:none;width:100%;justify-content:center">Download Script</a>
</div>
<div style="background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);padding:16px">
<div style="font-size:24px;margin-bottom:8px">&#128250;</div>
<div style="font-weight:600;margin-bottom:4px">LG webOS / Samsung Tizen</div>
<div style="font-size:11px;color:var(--text-muted);margin-bottom:12px">Use the TV's built-in browser</div>
<div style="font-size:11px;color:var(--text-secondary)">Navigate to:<br><code>${serverUrl}/player</code></div>
</div>
</div>
</div>
<div class="settings-section">
<h3>Setup Guide</h3>
<div style="color:var(--text-secondary);font-size:13px;line-height:1.8">