feat(postcard): profile country, country_from, per-user card number uniqueness, public page overhaul - Profile: add country field for default origin country - Postcard: add country_from field, auto-fill from profile.country on create - card_number uniqueness: change from global to per-user (profile_id + card_number) - Public pages: remove card_number display, only show cards with image_front - Public pages: show country as from→to format - Index page: no time display, add register button, fix lightbox with prev/next - Infinite scroll: add /api/public/cards endpoints and IntersectionObserver - Internal pages: update postcards list/detail for country_from display - i18n: add profiles.country_ph, pc_form.country_from, pc_detail.route

app/templates/index.html

@@ -12,7 +12,8 @@
                 {% endfor %}
             </div>
         </div>
-        <a href="/login" class="btn btn-primary" style="margin-left:.5rem">{{ 'index.go_login'|t(lang) }}</a>
+        <a href="/login" class="btn btn-sm" style="margin-left:.5rem">{{ 'index.go_login'|t(lang) }}</a>
+        <a href="/register" class="btn btn-primary btn-sm">{{ 'index.go_register'|t(lang) }}</a>
     </div>
 </nav>
 {% endblock %}
@@ -22,25 +23,30 @@
     <p style="color:var(--text-muted);margin-top:.25rem">{{ 'index.subtitle'|t(lang) }}</p>
 </div>
 
-{% if postcards %}
-<div class="showcase-grid">
-    {% for pc in postcards %}
-    <div class="showcase-card" data-front="{{ pc.image_front or '' }}" data-number="{{ pc.card_number }}" onclick="openLightbox(this)">
-        {% if pc.image_front %}
+{% set visible = [] %}
+{% for pc in postcards %}
+    {% if pc.image_front %}
+        {% if visible.append(pc) %}{% endif %}
+    {% endif %}
+{% endfor %}
+
+{% if visible|length > 0 or has_more %}
+<div class="showcase-grid" id="showcase-grid">
+    {% for pc in visible %}
+    <div class="showcase-card" data-front="{{ pc.image_front }}" onclick="openLightbox(this)">
         <img src="{{ pc.image_front }}" alt="" class="showcase-card-img" loading="lazy">
-        {% else %}
-        <div class="showcase-card-img placeholder-img">📷</div>
-        {% endif %}
         <div class="showcase-card-body">
-            <strong>{{ pc.card_number }}</strong>
             <div class="showcase-card-meta">
-                <span>{{ pc.country|flag }} {{ pc.country or '' }}</span>
-                {% if pc.send_time %}<span>{{ pc.send_time.strftime('%Y-%m-%d') }}</span>{% endif %}
+                {% if pc.country_from and pc.country %}<span>{{ pc.country_from|flag }}→{{ pc.country|flag }}</span>
+                {% elif pc.country %}<span>{{ pc.country|flag }}</span>
+                {% endif %}
             </div>
         </div>
     </div>
     {% endfor %}
 </div>
+<div id="scroll-sentinel" style="height:1px"></div>
+<div id="scroll-loading" style="text-align:center;padding:1rem;color:var(--text-muted);display:none">⏳</div>
 {% else %}
 <div class="empty-state">
     <p>{{ 'index.empty'|t(lang) }}</p>
@@ -49,26 +55,116 @@
 
 <!-- Lightbox -->
 <div id="lightbox" class="lightbox" onclick="closeLightbox()" style="display:none">
-    <div class="lightbox-inner" onclick="event.stopPropagation()">
+    <div class="lightbox-content" onclick="event.stopPropagation()">
         <button class="lightbox-close" onclick="closeLightbox()">&times;</button>
+        <button class="lightbox-prev" onclick="navLightbox(-1)">&#8249;</button>
+        <button class="lightbox-next" onclick="navLightbox(1)">&#8250;</button>
         <img id="lightbox-img" src="" alt="">
-        <div id="lightbox-number" class="lightbox-number"></div>
+        <div id="lightbox-caption" class="lightbox-caption"></div>
     </div>
 </div>
 
 <script>
+/* ---- Infinite Scroll ---- */
+var _page = 1;
+var _hasMore = {{ 'true' if has_more else 'false' }};
+var _loading = false;
+
+function _appendCard(c) {
+    var grid = document.getElementById('showcase-grid');
+    if (!grid) return;
+    var div = document.createElement('div');
+    div.className = 'showcase-card';
+    div.setAttribute('data-front', c.image_front);
+    div.onclick = function() { openLightbox(div); };
+    var countryHtml = '';
+    if (c.country_from && c.country) countryHtml = '<span>' + _flag(c.country_from) + '→' + _flag(c.country) + '</span>';
+    else if (c.country) countryHtml = '<span>' + _flag(c.country) + '</span>';
+    div.innerHTML = '<img src="' + c.image_front + '" alt="" class="showcase-card-img" loading="lazy">' +
+        '<div class="showcase-card-body"><div class="showcase-card-meta">' + countryHtml + '</div></div>';
+    grid.appendChild(div);
+}
+
+function _flag(code) {
+    if (!code || code.length !== 2) return code || '';
+    return String.fromCodePoint(0x1F1E6 + code.charCodeAt(0) - 65) + String.fromCodePoint(0x1F1E6 + code.charCodeAt(1) - 65);
+}
+
+function _loadMore() {
+    if (_loading || !_hasMore) return;
+    _loading = true;
+    document.getElementById('scroll-loading').style.display = '';
+    fetch('/api/public/cards?page=' + (_page + 1) + '&limit=20')
+        .then(function(r) { return r.json(); })
+        .then(function(data) {
+            _loading = false;
+            document.getElementById('scroll-loading').style.display = 'none';
+            _page = data.page;
+            _hasMore = data.has_more;
+            data.cards.forEach(_appendCard);
+            if (!_hasMore) {
+                var s = document.getElementById('scroll-sentinel');
+                if (s) s.remove();
+            }
+        })
+        .catch(function() { _loading = false; });
+}
+
+var _observer = new IntersectionObserver(function(entries) {
+    if (entries[0].isIntersecting) _loadMore();
+}, {rootMargin: '400px'});
+var _sentinel = document.getElementById('scroll-sentinel');
+if (_sentinel) _observer.observe(_sentinel);
+
+/* ---- Lightbox ---- */
+var lightboxItems = [];
+var lightboxIdx = 0;
+
+function buildLightboxItems() {
+    lightboxItems = [];
+    document.querySelectorAll('#showcase-grid .showcase-card[data-front]').forEach(function(card) {
+        lightboxItems.push({src: card.getAttribute('data-front')});
+    });
+}
+
 function openLightbox(el) {
+    buildLightboxItems();
     var src = el.getAttribute('data-front');
     if (!src) return;
-    document.getElementById('lightbox-img').src = src;
-    document.getElementById('lightbox-number').textContent = el.getAttribute('data-number');
+    for (var i = 0; i < lightboxItems.length; i++) {
+        if (lightboxItems[i].src === src) { lightboxIdx = i; break; }
+    }
+    showLightboxItem();
     document.getElementById('lightbox').style.display = 'flex';
+    document.body.style.overflow = 'hidden';
 }
-function closeLightbox() {
+
+function showLightboxItem() {
+    if (!lightboxItems.length) return;
+    var item = lightboxItems[lightboxIdx];
+    document.getElementById('lightbox-img').src = item.src;
+    document.getElementById('lightbox-caption').textContent = (lightboxIdx+1) + '/' + lightboxItems.length;
+}
+
+function closeLightbox(e) {
+    if (e) e.stopPropagation();
     document.getElementById('lightbox').style.display = 'none';
+    document.body.style.overflow = '';
 }
+
+function navLightbox(dir, e) {
+    if (e) e.stopPropagation();
+    if (!lightboxItems.length) return;
+    lightboxIdx = (lightboxIdx + dir + lightboxItems.length) % lightboxItems.length;
+    showLightboxItem();
+}
+
 document.addEventListener('keydown', function(e) {
+    var lb = document.getElementById('lightbox');
+    if (!lb || lb.style.display === 'none') return;
     if (e.key === 'Escape') closeLightbox();
+    else if (e.key === 'ArrowLeft') navLightbox(-1);
+    else if (e.key === 'ArrowRight') navLightbox(1);
 });
 </script>
 {% endblock %}

app/templates/postcard_detail.html

@@ -52,11 +52,12 @@
             <dt>{{ 'pc_detail.status'|t(user.language) }}</dt><dd>{{ {'sent':'已寄出','delivered':'已送达','received':'已收到'}.get(postcard.status, postcard.status) if user.language=='zh' else {'sent':'Sent','delivered':'Delivered','received':'Received'}.get(postcard.status, postcard.status) }}</dd>
             {% if postcard.status in ('sent','delivered') %}
             <dt>{{ 'pc_detail.recipient'|t(user.language) }}</dt><dd>{{ postcard.recipient_name or '-' }}</dd>
-            <dt>{{ 'pc_detail.country'|t(user.language) }}</dt><dd>{{ postcard.country|flag }} {{ postcard.country or '-' }}</dd>
+            <dt>{{ 'pc_detail.route'|t(user.language) }}</dt><dd>{% if postcard.country_from %}{{ postcard.country_from|flag }} {{ postcard.country_from }} → {% endif %}{{ postcard.country|flag }} {{ postcard.country or '-' }}</dd>
             <dt>{{ 'pc_detail.send_time'|t(user.language) }}</dt><dd>{{ postcard.send_time.strftime('%Y-%m-%d') if postcard.send_time else '-' }}</dd>
             <dt>{{ 'pc_detail.arrival_time'|t(user.language) }}</dt><dd>{{ postcard.arrival_time.strftime('%Y-%m-%d') if postcard.arrival_time else '-' }}</dd>
             {% else %}
             <dt>{{ 'pc_detail.sender'|t(user.language) }}</dt><dd>{{ postcard.sender_name or '-' }}</dd>
+            <dt>{{ 'pc_detail.route'|t(user.language) }}</dt><dd>{% if postcard.country_from %}{{ postcard.country_from|flag }} {{ postcard.country_from }} → {% endif %}{{ postcard.country|flag }} {{ postcard.country or '-' }}</dd>
             <dt>{{ 'pc_detail.receive_time'|t(user.language) }}</dt><dd>{{ postcard.receive_time.strftime('%Y-%m-%d') if postcard.receive_time else '-' }}</dd>
             {% endif %}
             <dt>{{ 'pc_detail.profile'|t(user.language) }}</dt><dd>{{ postcard.profile.nickname }}</dd>

app/templates/postcard_form.html

@@ -18,8 +18,6 @@
     <div id="fields-sent-delivered">
         <label>{{ 'pc_form.recipient'|t(user.language) }} *</label>
         <input type="text" name="recipient_name" id="input-recipient" value="{{ postcard.recipient_name if postcard else '' }}">
-        <label>{{ 'pc_form.country'|t(user.language) }} *</label>
-        <input type="text" name="country" id="input-country" value="{{ postcard.country if postcard else '' }}" maxlength="2" placeholder="JP" style="width:80px;text-transform:uppercase" oninput="this.value=this.value.toUpperCase()">
         <label>{{ 'pc_form.send_time'|t(user.language) }} *</label>
         <input type="date" name="send_time" id="input-send-time" value="{{ postcard.send_time.strftime('%Y-%m-%d') if postcard and postcard.send_time else '' }}">
         <label id="label-arrival">{{ 'pc_form.arrival_time'|t(user.language) }}</label>
@@ -33,6 +31,12 @@
         <input type="date" name="receive_time" id="input-receive" value="{{ postcard.receive_time.strftime('%Y-%m-%d') if postcard and postcard.receive_time else '' }}">
     </div>
 
+    <label>{{ 'pc_form.country_from'|t(user.language) }}</label>
+    <input type="text" name="country_from" id="input-country-from" value="{{ postcard.country_from if postcard and postcard.country_from else (profile.country if profile else '') }}" maxlength="2" style="width:80px;text-transform:uppercase" oninput="this.value=this.value.toUpperCase()">
+
+    <label>{{ 'pc_form.country'|t(user.language) }} *</label>
+    <input type="text" name="country" id="input-country" value="{{ postcard.country if postcard else '' }}" maxlength="2" placeholder="JP" style="width:80px;text-transform:uppercase" oninput="this.value=this.value.toUpperCase()">
+
     <label>{{ 'pc_form.notes'|t(user.language) }}</label>
     <textarea name="notes" rows="3" placeholder="{{ 'pc_form.notes_ph'|t(user.language) }}">{{ postcard.notes if postcard else '' }}</textarea>
 

app/templates/postcards.html

@@ -41,7 +41,7 @@
     <div class="postcard-row-info">
         <strong>{{ pc.card_number }}</strong>
         <div class="postcard-row-detail">
-            <span>{{ pc.country|flag }} {{ pc.country or '-' }}</span>
+            <span>{% if pc.country_from %}{{ pc.country_from|flag }}→{% endif %}{{ pc.country|flag }} {{ pc.country or '-' }}</span>
             <span>→ {{ pc.recipient_name or '-' }}</span>
         </div>
         <span class="badge badge-{{ pc.status }}">{{ {'sent':'已寄出','delivered':'已送达'}.get(pc.status) if user.language=='zh' else {'sent':'Sent','delivered':'Delivered'}.get(pc.status) }}</span>

app/templates/profiles.html

@@ -7,6 +7,7 @@
 <div class="inline-form">
     <form method="post" action="/profiles" class="form-row">
         <input type="text" name="nickname" placeholder="{{ 'profiles.new_ph'|t(user.language) }}" required>
+        <input type="text" name="country" placeholder="{{ 'profiles.country_ph'|t(user.language) }}" maxlength="2" style="width:60px;text-transform:uppercase" oninput="this.value=this.value.toUpperCase()">
         <button type="submit" class="btn btn-primary">{{ 'profiles.new_btn'|t(user.language) }}</button>
     </form>
 </div>
@@ -18,10 +19,12 @@
         <div class="profile-card-header">
             <h3 class="profile-card-name">
                 <span id="name-display-{{ p.id }}">{{ p.nickname }}</span>
+                {% if p.country %}<span style="font-size:.8rem;color:var(--text-muted);font-weight:400">{{ p.country|flag }} {{ p.country }}</span>{% endif %}
                 <button type="button" class="icon-btn" onclick="startRename({{ p.id }})" title="{{ 'profiles.rename'|t(user.language) }}">✏️</button>
             </h3>
             <form method="post" action="/profiles/{{ p.id }}/rename" class="rename-form" id="name-edit-{{ p.id }}" style="display:none">
                 <input type="text" name="nickname" value="{{ p.nickname }}" required>
+                <input type="text" name="country" value="{{ p.country or '' }}" maxlength="2" style="width:60px;text-transform:uppercase" oninput="this.value=this.value.toUpperCase()" placeholder="{{ 'profiles.country_ph'|t(user.language) }}">
                 <button type="submit" class="btn btn-primary btn-sm">✓</button>
                 <button type="button" class="btn btn-sm" onclick="cancelRename({{ p.id }})">✕</button>
             </form>

app/templates/showcase.html

@@ -16,7 +16,20 @@
     <h1>📮 {{ profile_user.username }} {{ 'showcase.title'|t(lang) }}</h1>
 </div>
 
-{% set has_content = (sent_all|length + received_all|length) > 0 %}
+{% set sent_visible = [] %}
+{% set received_visible = [] %}
+{% for pc in sent_all %}
+    {% if pc.image_front %}
+        {% if sent_visible.append(pc) %}{% endif %}
+    {% endif %}
+{% endfor %}
+{% for pc in received_all %}
+    {% if pc.image_front %}
+        {% if received_visible.append(pc) %}{% endif %}
+    {% endif %}
+{% endfor %}
+
+{% set has_content = (sent_visible|length + received_visible|length) > 0 %}
 {% if not has_content %}
 <div class="empty-state">
     <p>{{ 'showcase.empty'|t(lang) }}</p>
@@ -24,25 +37,21 @@
 {% else %}
 
 <div class="tabs" id="tabs">
-    <button class="tab active" onclick="switchTab('sent')">{{ 'showcase.tab_sent'|t(lang) }} ({{ sent_all|length }})</button>
-    <button class="tab" onclick="switchTab('received')">{{ 'showcase.tab_received'|t(lang) }} ({{ received_all|length }})</button>
+    <button class="tab active" onclick="switchTab('sent')">{{ 'showcase.tab_sent'|t(lang) }} ({{ sent_visible|length }})</button>
+    <button class="tab" onclick="switchTab('received')">{{ 'showcase.tab_received'|t(lang) }} ({{ received_visible|length }})</button>
 </div>
 
 <div id="tab-sent" class="tab-panel">
 {% if mode == 'flat' %}
-    <div class="showcase-grid">
-    {% for pc in sent_all %}
-        <div class="showcase-card" data-front="{{ pc.image_front or '' }}" data-number="{{ pc.card_number }}" onclick="openLightbox(this)">
-            {% if pc.image_front %}
+    <div class="showcase-grid" id="grid-sent">
+    {% for pc in sent_visible %}
+        <div class="showcase-card" data-front="{{ pc.image_front }}" onclick="openLightbox(this)">
             <img src="{{ pc.image_front }}" alt="" class="showcase-card-img" loading="lazy">
-            {% else %}
-            <div class="showcase-card-img placeholder-img">📷</div>
-            {% endif %}
             <div class="showcase-card-body">
-                <strong>{{ pc.card_number }}</strong>
                 <div class="showcase-card-meta">
-                    <span>{{ pc.country|flag }} {{ pc.country or '' }}</span>
-                    {% if pc.send_time %}<span>{{ pc.send_time.strftime('%Y-%m-%d') }}</span>{% endif %}
+                    {% if pc.country_from and pc.country %}<span>{{ pc.country_from|flag }}→{{ pc.country|flag }}</span>
+                    {% elif pc.country %}<span>{{ pc.country|flag }}</span>
+                    {% endif %}
                 </div>
             </div>
         </div>
@@ -50,21 +59,23 @@
     </div>
 {% else %}
     {% for g in profile_groups %}
-    {% if g.sent %}
+    {% set g_sent = [] %}
+    {% for pc in g.sent %}
+        {% if pc.image_front %}
+            {% if g_sent.append(pc) %}{% endif %}
+        {% endif %}
+    {% endfor %}
+    {% if g_sent %}
     <h3 style="margin:1rem 0 .75rem;font-size:.95rem;color:var(--text-muted)">{{ g.profile.nickname }}</h3>
     <div class="showcase-grid">
-        {% for pc in g.sent %}
-        <div class="showcase-card" data-front="{{ pc.image_front or '' }}" data-number="{{ pc.card_number }}" onclick="openLightbox(this)">
-            {% if pc.image_front %}
+        {% for pc in g_sent %}
+        <div class="showcase-card" data-front="{{ pc.image_front }}" onclick="openLightbox(this)">
             <img src="{{ pc.image_front }}" alt="" class="showcase-card-img" loading="lazy">
-            {% else %}
-            <div class="showcase-card-img placeholder-img">📷</div>
-            {% endif %}
             <div class="showcase-card-body">
-                <strong>{{ pc.card_number }}</strong>
                 <div class="showcase-card-meta">
-                    <span>{{ pc.country|flag }} {{ pc.country or '' }}</span>
-                    {% if pc.send_time %}<span>{{ pc.send_time.strftime('%Y-%m-%d') }}</span>{% endif %}
+                    {% if pc.country_from and pc.country %}<span>{{ pc.country_from|flag }}→{{ pc.country|flag }}</span>
+                    {% elif pc.country %}<span>{{ pc.country|flag }}</span>
+                    {% endif %}
                 </div>
             </div>
         </div>
@@ -73,23 +84,21 @@
     {% endif %}
     {% endfor %}
 {% endif %}
+<div id="scroll-sentinel-sent" style="height:1px"></div>
+<div id="scroll-loading-sent" style="text-align:center;padding:1rem;color:var(--text-muted);display:none">⏳</div>
 </div>
 
 <div id="tab-received" class="tab-panel" style="display:none">
 {% if mode == 'flat' %}
-    <div class="showcase-grid">
-    {% for pc in received_all %}
-        <div class="showcase-card" data-front="{{ pc.image_front or '' }}" data-number="{{ pc.card_number }}" onclick="openLightbox(this)">
-            {% if pc.image_front %}
+    <div class="showcase-grid" id="grid-received">
+    {% for pc in received_visible %}
+        <div class="showcase-card" data-front="{{ pc.image_front }}" onclick="openLightbox(this)">
             <img src="{{ pc.image_front }}" alt="" class="showcase-card-img" loading="lazy">
-            {% else %}
-            <div class="showcase-card-img placeholder-img">📷</div>
-            {% endif %}
             <div class="showcase-card-body">
-                <strong>{{ pc.card_number }}</strong>
                 <div class="showcase-card-meta">
-                    <span>{{ pc.country|flag }} {{ pc.country or '' }}</span>
-                    {% if pc.receive_time %}<span>{{ pc.receive_time.strftime('%Y-%m-%d') }}</span>{% endif %}
+                    {% if pc.country_from and pc.country %}<span>{{ pc.country_from|flag }}→{{ pc.country|flag }}</span>
+                    {% elif pc.country %}<span>{{ pc.country|flag }}</span>
+                    {% endif %}
                 </div>
             </div>
         </div>
@@ -97,21 +106,23 @@
     </div>
 {% else %}
     {% for g in profile_groups %}
-    {% if g.received %}
+    {% set g_received = [] %}
+    {% for pc in g.received %}
+        {% if pc.image_front %}
+            {% if g_received.append(pc) %}{% endif %}
+        {% endif %}
+    {% endfor %}
+    {% if g_received %}
     <h3 style="margin:1rem 0 .75rem;font-size:.95rem;color:var(--text-muted)">{{ g.profile.nickname }}</h3>
     <div class="showcase-grid">
-        {% for pc in g.received %}
-        <div class="showcase-card" data-front="{{ pc.image_front or '' }}" data-number="{{ pc.card_number }}" onclick="openLightbox(this)">
-            {% if pc.image_front %}
+        {% for pc in g_received %}
+        <div class="showcase-card" data-front="{{ pc.image_front }}" onclick="openLightbox(this)">
             <img src="{{ pc.image_front }}" alt="" class="showcase-card-img" loading="lazy">
-            {% else %}
-            <div class="showcase-card-img placeholder-img">📷</div>
-            {% endif %}
             <div class="showcase-card-body">
-                <strong>{{ pc.card_number }}</strong>
                 <div class="showcase-card-meta">
-                    <span>{{ pc.country|flag }} {{ pc.country or '' }}</span>
-                    {% if pc.receive_time %}<span>{{ pc.receive_time.strftime('%Y-%m-%d') }}</span>{% endif %}
+                    {% if pc.country_from and pc.country %}<span>{{ pc.country_from|flag }}→{{ pc.country|flag }}</span>
+                    {% elif pc.country %}<span>{{ pc.country|flag }}</span>
+                    {% endif %}
                 </div>
             </div>
         </div>
@@ -120,20 +131,88 @@
     {% endif %}
     {% endfor %}
 {% endif %}
+<div id="scroll-sentinel-received" style="height:1px"></div>
+<div id="scroll-loading-received" style="text-align:center;padding:1rem;color:var(--text-muted);display:none">⏳</div>
 </div>
 {% endif %}
 
 <div id="lightbox" class="lightbox" onclick="closeLightbox(event)">
-    <button class="lightbox-close" onclick="closeLightbox(event)">&times;</button>
-    <button class="lightbox-prev" onclick="navLightbox(-1,event)">&#10094;</button>
-    <button class="lightbox-next" onclick="navLightbox(1,event)">&#10095;</button>
     <div class="lightbox-content" onclick="event.stopPropagation()">
+        <button class="lightbox-close" onclick="closeLightbox(event)">&times;</button>
+        <button class="lightbox-prev" onclick="navLightbox(-1,event)">&#8249;</button>
+        <button class="lightbox-next" onclick="navLightbox(1,event)">&#8250;</button>
         <img id="lightbox-img" src="" alt="">
         <div id="lightbox-caption" class="lightbox-caption"></div>
     </div>
 </div>
 
 <script>
+var _username = '{{ profile_user.username }}';
+var _sentPage = 1, _sentMore = {{ 'true' if sent_visible|length > 19 else 'false' }};
+var _recvPage = 1, _recvMore = {{ 'true' if received_visible|length > 19 else 'false' }};
+var _sentLoading = false, _recvLoading = false;
+
+function _flag(code) {
+    if (!code || code.length !== 2) return code || '';
+    return String.fromCodePoint(0x1F1E6 + code.charCodeAt(0) - 65) + String.fromCodePoint(0x1F1E6 + code.charCodeAt(1) - 65);
+}
+
+function _appendCard(c, gridId) {
+    var grid = document.getElementById(gridId);
+    if (!grid) return;
+    var div = document.createElement('div');
+    div.className = 'showcase-card';
+    div.setAttribute('data-front', c.image_front);
+    div.onclick = function() { openLightbox(div); };
+    var countryHtml = '';
+    if (c.country_from && c.country) countryHtml = '<span>' + _flag(c.country_from) + '→' + _flag(c.country) + '</span>';
+    else if (c.country) countryHtml = '<span>' + _flag(c.country) + '</span>';
+    div.innerHTML = '<img src="' + c.image_front + '" alt="" class="showcase-card-img" loading="lazy">' +
+        '<div class="showcase-card-body"><div class="showcase-card-meta">' + countryHtml + '</div></div>';
+    grid.appendChild(div);
+}
+
+function _loadMoreSent() {
+    if (_sentLoading || !_sentMore) return;
+    _sentLoading = true;
+    document.getElementById('scroll-loading-sent').style.display = '';
+    fetch('/api/public/cards/' + _username + '?page=' + (_sentPage + 1) + '&limit=20&tab=sent')
+        .then(function(r) { return r.json(); })
+        .then(function(data) {
+            _sentLoading = false;
+            document.getElementById('scroll-loading-sent').style.display = 'none';
+            _sentPage = data.page;
+            _sentMore = data.has_more;
+            data.cards.forEach(function(c) { _appendCard(c, 'grid-sent'); });
+            if (!_sentMore) { var s = document.getElementById('scroll-sentinel-sent'); if (s) s.remove(); }
+        })
+        .catch(function() { _sentLoading = false; });
+}
+
+function _loadMoreReceived() {
+    if (_recvLoading || !_recvMore) return;
+    _recvLoading = true;
+    document.getElementById('scroll-loading-received').style.display = '';
+    fetch('/api/public/cards/' + _username + '?page=' + (_recvPage + 1) + '&limit=20&tab=received')
+        .then(function(r) { return r.json(); })
+        .then(function(data) {
+            _recvLoading = false;
+            document.getElementById('scroll-loading-received').style.display = 'none';
+            _recvPage = data.page;
+            _recvMore = data.has_more;
+            data.cards.forEach(function(c) { _appendCard(c, 'grid-received'); });
+            if (!_recvMore) { var s = document.getElementById('scroll-sentinel-received'); if (s) s.remove(); }
+        })
+        .catch(function() { _recvLoading = false; });
+}
+
+var _obsSent = new IntersectionObserver(function(e) { if (e[0].isIntersecting) _loadMoreSent(); }, {rootMargin: '400px'});
+var _obsRecv = new IntersectionObserver(function(e) { if (e[0].isIntersecting) _loadMoreReceived(); }, {rootMargin: '400px'});
+var _sSent = document.getElementById('scroll-sentinel-sent');
+var _sRecv = document.getElementById('scroll-sentinel-received');
+if (_sSent) _obsSent.observe(_sSent);
+if (_sRecv) _obsRecv.observe(_sRecv);
+
 function switchTab(name) {
     document.querySelectorAll('.tab').forEach(function(t) { t.classList.remove('active'); });
     document.querySelectorAll('.tab-panel').forEach(function(p) { p.style.display = 'none'; });
@@ -149,8 +228,7 @@ function buildLightboxItems() {
     var visible = document.querySelectorAll('.tab-panel:not([style*="display:none"]) .showcase-card[data-front]');
     visible.forEach(function(card) {
         var front = card.getAttribute('data-front');
-        var number = card.getAttribute('data-number');
-        if (front) lightboxItems.push({src: front, number: number});
+        if (front) lightboxItems.push({src: front});
     });
 }
 
@@ -158,9 +236,8 @@ function openLightbox(el) {
     buildLightboxItems();
     var front = el.getAttribute('data-front');
     if (!front) return;
-    var number = el.getAttribute('data-number');
     for (var i = 0; i < lightboxItems.length; i++) {
-        if (lightboxItems[i].number === number) { lightboxIdx = i; break; }
+        if (lightboxItems[i].src === front) { lightboxIdx = i; break; }
     }
     showLightboxItem();
     document.getElementById('lightbox').classList.add('active');
@@ -171,7 +248,7 @@ function showLightboxItem() {
     if (!lightboxItems.length) return;
     var item = lightboxItems[lightboxIdx];
     document.getElementById('lightbox-img').src = item.src;
-    document.getElementById('lightbox-caption').textContent = item.number + ' (' + (lightboxIdx+1) + '/' + lightboxItems.length + ')';
+    document.getElementById('lightbox-caption').textContent = (lightboxIdx+1) + '/' + lightboxItems.length;
 }
 
 function closeLightbox(e) {
@@ -194,13 +271,10 @@ document.addEventListener('keydown', function(e) {
     else if (e.key === 'ArrowLeft') navLightbox(-1);
     else if (e.key === 'ArrowRight') navLightbox(1);
 });
-// Close language dropdown when clicking outside
 document.addEventListener('click', function(e) {
     var sw = document.getElementById('langSwitcher');
     var dd = document.getElementById('langDropdown');
-    if (sw && dd && !sw.contains(e.target)) {
-        dd.classList.remove('show');
-    }
+    if (sw && dd && !sw.contains(e.target)) dd.classList.remove('show');
 });
 </script>
 {% endblock %}