carsten/LinedanceAfspiller
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web

Browse Source
This commit is contained in:
Carsten Kvist
2026-04-14 20:20:46 +02:00
parent cd3ed811f6
commit 4a206f2f19
3 changed files with 89 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
linedance-api/web/public/index.html
View File

@@ -199,8 +199,20 @@
</div>
</div>
<div id="qr-modal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(4px);z-index:300;align-items:center;justify-content:center;">
<div style="background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:2rem;width:100%;max-width:340px;text-align:center;animation:fadeUp .25s ease;">
<h3 id="qr-title" style="font-size:1rem;margin-bottom:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"></h3>
<canvas id="qr-canvas" style="margin:0 auto 1rem;display:block;border-radius:8px;"></canvas>
<div id="qr-url" style="font-size:.72rem;color:var(--muted);word-break:break-all;margin-bottom:1.25rem;"></div>
<div style="display:flex;gap:.6rem;justify-content:center;">
<button class="btn sm" onclick="copyLiveUrl()">Kopiér link</button>
<button class="btn sm" onclick="document.getElementById('qr-modal').style.display='none'">Luk</button>
</div>
<div id="copy-msg" style="font-size:.75rem;color:var(--green);margin-top:.6rem;height:1rem;"></div>
</div>
</div>
<div id="login-modal">
<div class="login-box">
<h3>Log ind</h3>
<div id="login-msg"></div>
<div class="form-row"><label>Brugernavn eller e-mail</label><input type="text" id="inp-user" placeholder="dit@email.dk"></div>
@@ -212,6 +224,7 @@
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>
<script>
const API = '/api';
let token = localStorage.getItem('ld_token') || '';
@@ -326,6 +339,8 @@ async function loadMyPlaylists() {
onclick="toggleVis('${p.id}','${vis}')">
${vis === 'public' ? 'Gør privat' : 'Gør public'}
</button>
<a class="btn sm" href="/live.html?id=${p.id}" target="_blank" title="Åbn storskærm">📺</a>
<button class="btn sm" onclick="showQR('${p.id}','${esc(p.name)}')" title="QR-kode">QR</button>
</div>
</div>`;
}).join('');
@@ -409,6 +424,34 @@ document.getElementById('btn-copy').onclick = async () => {
} catch(e) { btn.textContent = '⚠ ' + e.message; btn.disabled = false; }
};
let currentQRUrl = '';
function showQR(id, name) {
const url = `${location.protocol}//${location.host}/live.html?id=${id}`;
currentQRUrl = url;
document.getElementById('qr-title').textContent = name;
document.getElementById('qr-url').textContent = url;
document.getElementById('copy-msg').textContent = '';
document.getElementById('qr-modal').style.display = 'flex';
// Tegn QR med et simpelt bibliotek
const canvas = document.getElementById('qr-canvas');
if (window.QRious) {
new QRious({ element: canvas, value: url, size: 220, backgroundAlpha: 0, foreground: '#eceef4' });
} else {
// Fallback: vis bare URL hvis bibliotek ikke er loadet
canvas.style.display = 'none';
}
}
function copyLiveUrl() {
navigator.clipboard.writeText(currentQRUrl).then(() => {
const msg = document.getElementById('copy-msg');
msg.textContent = '✓ Kopieret!';
setTimeout(() => msg.textContent = '', 2000);
});
}
function esc(s) { return (s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
updateAuthUI();