Verschiebung nach anderem RePo - nun pro Projekt getrennt
This commit is contained in:
128
bin/main/static/games/bdsm/bdsm-einladung.html
Normal file
128
bin/main/static/games/bdsm/bdsm-einladung.html
Normal file
@@ -0,0 +1,128 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="/img/icon.png" type="image/png">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>BDSM Game – Einladung – xXx Sphere</title>
|
||||
<link rel="stylesheet" href="/css/variables.css">
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
<style>
|
||||
.invite-card {
|
||||
background: var(--color-card);
|
||||
border: 1px solid var(--color-secondary);
|
||||
border-radius: 14px;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.invite-icon { font-size: 2.5rem; margin-bottom: 1rem; }
|
||||
.invite-title { font-size: 1.2rem; font-weight: 700; margin-bottom: 0.5rem; }
|
||||
.invite-sub { font-size: 0.9rem; color: var(--color-muted); margin-bottom: 2rem; line-height: 1.6; }
|
||||
.invite-actions { display: flex; flex-direction: column; gap: 0.75rem; }
|
||||
.invite-actions button { width: 100%; padding: 0.85rem; }
|
||||
.decline-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--color-muted);
|
||||
font-size: 0.82rem;
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
padding: 0.25rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="app">
|
||||
<div class="main">
|
||||
<div class="content">
|
||||
<div id="loading" style="text-align:center;color:var(--color-muted);padding:3rem 0;">Einladung wird geladen…</div>
|
||||
<div class="invite-card" id="card" style="display:none;">
|
||||
<div class="invite-icon">⛓️</div>
|
||||
<div class="invite-title" id="title"></div>
|
||||
<div class="invite-sub" id="sub"></div>
|
||||
<div class="message" id="message" style="display:none;margin-bottom:1rem;"></div>
|
||||
<div class="invite-actions" id="actions"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/js/icons.js"></script>
|
||||
<script src="/js/sidebar.js"></script>
|
||||
<script>
|
||||
const params = new URLSearchParams(location.search);
|
||||
const einladungId = params.get('id');
|
||||
if (!einladungId) window.location.replace('/userhome.html');
|
||||
|
||||
let einladung = null;
|
||||
|
||||
async function laden() {
|
||||
try {
|
||||
const res = await fetch(`/bdsm/einladung/${einladungId}`);
|
||||
if (!res.ok) { zeigeFehler('Einladung nicht gefunden.'); return; }
|
||||
einladung = await res.json();
|
||||
document.getElementById('loading').style.display = 'none';
|
||||
document.getElementById('card').style.display = '';
|
||||
|
||||
if (einladung.status === 'ACCEPTED_OWN' || einladung.status === 'ACCEPTED_HOST') {
|
||||
zeigeBestaetigt();
|
||||
return;
|
||||
}
|
||||
if (einladung.status === 'DECLINED' || einladung.status === 'CANCELLED') {
|
||||
zeigeFehler('Diese Einladung ist nicht mehr gültig.');
|
||||
return;
|
||||
}
|
||||
|
||||
document.getElementById('title').textContent = `${einladung.inviterName || 'Jemand'} lädt dich ein`;
|
||||
document.getElementById('sub').textContent = 'Du wurdest zu einem BDSM Game eingeladen. Wie möchtest du mitspielen?';
|
||||
const actions = document.getElementById('actions');
|
||||
actions.innerHTML = `
|
||||
<button onclick="antworten(true, 'OWN_DEVICE')">Am eigenen Gerät mitspielen</button>
|
||||
<button class="secondary" onclick="antworten(true, 'HOST_DEVICE')">Am Gerät von ${einladung.inviterName || 'der einladenden Person'}</button>
|
||||
<button class="decline-btn" onclick="antworten(false, null)">Einladung ablehnen</button>`;
|
||||
} catch (e) {
|
||||
zeigeFehler('Fehler beim Laden der Einladung.');
|
||||
}
|
||||
}
|
||||
|
||||
async function antworten(accepted, mode) {
|
||||
document.getElementById('actions').innerHTML = '<div style="color:var(--color-muted);font-size:0.9rem;">Wird gespeichert…</div>';
|
||||
try {
|
||||
const res = await fetch(`/bdsm/einladung/${einladungId}/antwort`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ accepted, mode }),
|
||||
});
|
||||
if (!res.ok) throw new Error();
|
||||
if (!accepted) {
|
||||
document.getElementById('title').textContent = 'Einladung abgelehnt';
|
||||
document.getElementById('sub').textContent = 'Du hast die Einladung abgelehnt.';
|
||||
document.getElementById('actions').innerHTML = '<button onclick="window.location.href=\'/userhome.html\'">Zur Startseite</button>';
|
||||
} else if (mode === 'OWN_DEVICE') {
|
||||
window.location.replace(`/games/bdsm/neubdsm.html`);
|
||||
} else {
|
||||
zeigeBestaetigt();
|
||||
}
|
||||
} catch (_) {
|
||||
document.getElementById('actions').innerHTML = '';
|
||||
zeigeFehler('Fehler beim Speichern der Antwort.');
|
||||
}
|
||||
}
|
||||
|
||||
function zeigeBestaetigt() {
|
||||
document.getElementById('title').textContent = 'Einladung angenommen';
|
||||
document.getElementById('sub').textContent = 'Du spielst am Gerät der einladenden Person mit. Das Spiel wird dort von ihr gestartet.';
|
||||
document.getElementById('actions').innerHTML = '<button onclick="window.location.href=\'/userhome.html\'">Zur Startseite</button>';
|
||||
}
|
||||
|
||||
function zeigeFehler(text) {
|
||||
document.getElementById('loading').style.display = 'none';
|
||||
document.getElementById('card').style.display = '';
|
||||
document.getElementById('title').textContent = 'Hinweis';
|
||||
document.getElementById('sub').textContent = text;
|
||||
document.getElementById('actions').innerHTML = '<button onclick="window.location.href=\'/userhome.html\'">Zur Startseite</button>';
|
||||
}
|
||||
|
||||
laden();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user