127 lines
3.5 KiB
HTML
127 lines
3.5 KiB
HTML
@include(snippets/header)
|
|
|
|
<div id="main">
|
|
<div style="padding: 20px; max-width: 1200px; margin: 0 auto;">
|
|
<h2 style="margin-bottom: 20px; border-bottom: 1px solid #333; padding-bottom: 10px;">My Subscriptions</h2>
|
|
|
|
@if(items.length === 0)
|
|
<div style="padding: 20px; background: rgba(0,0,0,0.2); border-radius: 4px; text-align: center;">
|
|
You haven't subscribed to any threads yet.
|
|
</div>
|
|
@else
|
|
<div class="subs-grid">
|
|
@each(items as item)
|
|
<div class="sub-card" id="sub-{{ item.id }}">
|
|
<a href="/{{ item.id }}" class="sub-link">
|
|
<img src="{{ item.thumb }}" loading="lazy" />
|
|
<div class="sub-info">
|
|
<span class="sub-id">#{{ item.id }}</span>
|
|
<span class="sub-user">by {{ item.user }}</span>
|
|
</div>
|
|
</a>
|
|
<button class="unsub-btn" data-id="{{ item.id }}">Unsubscribe</button>
|
|
</div>
|
|
@endeach
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.subs-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
|
gap: 15px;
|
|
}
|
|
|
|
.sub-card {
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.sub-link {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
display: block;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.sub-card img {
|
|
width: 100%;
|
|
height: 110px;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
|
|
.sub-info {
|
|
padding: 8px;
|
|
}
|
|
|
|
.sub-id {
|
|
display: block;
|
|
font-weight: bold;
|
|
color: var(--accent);
|
|
}
|
|
|
|
.sub-user {
|
|
display: block;
|
|
font-size: 0.85em;
|
|
color: #888;
|
|
}
|
|
|
|
.unsub-btn {
|
|
width: 100%;
|
|
border: none;
|
|
background: rgba(200, 50, 50, 0.2);
|
|
color: #ff6666;
|
|
padding: 8px;
|
|
cursor: pointer;
|
|
font-size: 0.9em;
|
|
transition: background 0.2s;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.unsub-btn:hover {
|
|
background: rgba(200, 50, 50, 0.4);
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
document.querySelectorAll('.unsub-btn').forEach(btn => {
|
|
btn.addEventListener('click', async (e) => {
|
|
if (!confirm('Unsubscribe from this thread?')) return;
|
|
|
|
const id = e.target.dataset.id;
|
|
const card = document.getElementById('sub-' + id);
|
|
const originalText = e.target.textContent;
|
|
e.target.textContent = '...';
|
|
|
|
try {
|
|
const res = await fetch('/api/subscriptions/' + id + '/delete', { method: 'POST' });
|
|
const json = await res.json();
|
|
|
|
if (json.success) {
|
|
card.style.opacity = '0';
|
|
setTimeout(() => {
|
|
card.remove();
|
|
if (document.querySelectorAll('.sub-card').length === 0) {
|
|
location.reload();
|
|
}
|
|
}, 300);
|
|
} else {
|
|
alert('Error: ' + (json.message || 'Failed'));
|
|
e.target.textContent = originalText;
|
|
}
|
|
} catch (err) {
|
|
console.error(err);
|
|
alert('Error removing subscription');
|
|
e.target.textContent = originalText;
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
@include(snippets/footer) |