Weiter am Dating gearbeitet
Some checks failed
Host-Based Deploy (Java 21 Fix) / build-and-run (push) Has been cancelled
Some checks failed
Host-Based Deploy (Java 21 Fix) / build-and-run (push) Has been cancelled
This commit is contained in:
@@ -60,6 +60,53 @@
|
||||
width: 100%;
|
||||
}
|
||||
.visitor-time { font-size: 0.68rem; color: var(--color-muted); text-align: center; }
|
||||
|
||||
/* ── Dating: Likes & Matches ── */
|
||||
.dating-strip { display: flex; flex-wrap: wrap; gap: 0.75rem; }
|
||||
.dating-card {
|
||||
display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
|
||||
text-decoration: none; color: var(--color-text); width: 72px;
|
||||
}
|
||||
.dating-card:hover .dating-avatar { border-color: var(--color-primary); }
|
||||
.dating-avatar {
|
||||
width: 56px; height: 56px; border-radius: 50%;
|
||||
background: var(--color-secondary);
|
||||
border: 2px solid var(--color-secondary);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 1.4rem; overflow: hidden; flex-shrink: 0;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.dating-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
|
||||
.dating-name {
|
||||
font-size: 0.75rem; text-align: center;
|
||||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;
|
||||
}
|
||||
/* Verschwommene Karte für nicht-Premium */
|
||||
.dating-card-locked {
|
||||
width: 72px; display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
|
||||
cursor: default;
|
||||
}
|
||||
.dating-avatar-blurred {
|
||||
width: 56px; height: 56px; border-radius: 50%;
|
||||
background: var(--color-secondary);
|
||||
border: 2px solid var(--color-secondary);
|
||||
overflow: hidden; flex-shrink: 0; position: relative;
|
||||
}
|
||||
.dating-avatar-blurred img {
|
||||
width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
|
||||
filter: blur(6px); transform: scale(1.1);
|
||||
}
|
||||
.dating-avatar-blurred .lock-icon {
|
||||
position: absolute; inset: 0;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
.premium-hint {
|
||||
font-size: 0.65rem; color: var(--color-primary); text-align: center; font-weight: 600;
|
||||
}
|
||||
.match-badge {
|
||||
font-size: 0.65rem; color: var(--color-primary); text-align: center; font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="app">
|
||||
@@ -105,6 +152,18 @@
|
||||
<div class="section-label">Profilbesucher</div>
|
||||
<div class="visitors-strip" id="visitorsStrip"></div>
|
||||
</div>
|
||||
|
||||
<!-- Wer hat mich geliked (Dating) -->
|
||||
<div id="likesSection" style="display:none;">
|
||||
<div class="section-label">Dating – Wer mag mich ♥</div>
|
||||
<div class="dating-strip" id="likesStrip"></div>
|
||||
</div>
|
||||
|
||||
<!-- Matches -->
|
||||
<div id="matchesSection" style="display:none;">
|
||||
<div class="section-label">Dating – Matches 🎉</div>
|
||||
<div class="dating-strip" id="matchesStrip"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -120,6 +179,10 @@
|
||||
if (user) {
|
||||
document.getElementById('greeting').textContent = 'Willkommen zurück, ' + user.name + '!';
|
||||
loadVisitors();
|
||||
if (user.datingAktiv) {
|
||||
loadWhoLikesMe();
|
||||
loadMatches();
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(() => { window.location.href = '/login.html'; });
|
||||
@@ -132,6 +195,69 @@
|
||||
return 'vor ' + Math.floor(diff / 86400) + ' Tag' + (Math.floor(diff / 86400) === 1 ? '' : 'en');
|
||||
}
|
||||
|
||||
async function loadWhoLikesMe() {
|
||||
try {
|
||||
const res = await fetch('/dating/who-likes-me');
|
||||
if (!res.ok) return;
|
||||
const data = await res.json();
|
||||
if (data.total === 0) return;
|
||||
|
||||
const strip = document.getElementById('likesStrip');
|
||||
strip.innerHTML = data.likers.map(l => {
|
||||
const pic = l.profilePicture
|
||||
? `<img src="data:image/png;base64,${l.profilePicture}" alt="">`
|
||||
: '◉';
|
||||
|
||||
if (data.premium && l.userId) {
|
||||
return `
|
||||
<a class="dating-card" href="/community/benutzer.html?userId=${l.userId}">
|
||||
<div class="dating-avatar">${pic}</div>
|
||||
<span class="dating-name">${esc(l.name)}</span>
|
||||
</a>`;
|
||||
} else {
|
||||
return `
|
||||
<div class="dating-card-locked">
|
||||
<div class="dating-avatar-blurred">
|
||||
${pic}
|
||||
<span class="lock-icon">🔒</span>
|
||||
</div>
|
||||
<span class="premium-hint">Premium</span>
|
||||
</div>`;
|
||||
}
|
||||
}).join('');
|
||||
|
||||
document.getElementById('likesSection').style.display = '';
|
||||
} catch (_) {}
|
||||
}
|
||||
|
||||
async function loadMatches() {
|
||||
try {
|
||||
const res = await fetch('/dating/matches');
|
||||
if (!res.ok) return;
|
||||
const matches = await res.json();
|
||||
if (!matches.length) return;
|
||||
|
||||
const strip = document.getElementById('matchesStrip');
|
||||
strip.innerHTML = matches.map(m => `
|
||||
<a class="dating-card" href="/community/benutzer.html?userId=${m.userId}">
|
||||
<div class="dating-avatar">
|
||||
${m.profilePicture
|
||||
? `<img src="data:image/png;base64,${m.profilePicture}" alt="${esc(m.name)}">`
|
||||
: '◉'}
|
||||
</div>
|
||||
<span class="dating-name">${esc(m.name)}</span>
|
||||
<span class="match-badge">♥ Match</span>
|
||||
</a>
|
||||
`).join('');
|
||||
document.getElementById('matchesSection').style.display = '';
|
||||
} catch (_) {}
|
||||
}
|
||||
|
||||
function esc(s) {
|
||||
if (!s) return '';
|
||||
return String(s).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"');
|
||||
}
|
||||
|
||||
async function loadVisitors() {
|
||||
try {
|
||||
const res = await fetch('/social/profile-visits/my-visitors');
|
||||
|
||||
Reference in New Issue
Block a user