updated

📱 Mobile & Desktop Optimization:
- Responsive grid layout: 1 card (mobile) → 2 cards (tablet) → 3 cards (desktop) → 4 cards (large screens)
- Better card design with improved spacing and hover effects
- Enhanced mobile experience with optimized touch targets

🔧 UI/UX Improvements:
- Modern card-based layout instead of stacked list
- Website logos with fallback icons for better visual recognition
- Improved button placement and iconography
- Better responsive breakpoints for different screen sizes

✨ Visual Enhancements:
- Smooth hover animations and shadow effects
- Better logo positioning with placeholder icons
- Optimized spacing and typography for mobile devices
- Professional card design with rounded corners and subtle shadows

This update provides a much cleaner and more organized view of links, especially on mobile devices where the cards stack properly and buttons are easily accessible.

app/routes/api.py

@@ -216,26 +216,34 @@ def upload_logo():
 def create_link_page():
     """Create a new dynamic link page and QR code"""
     try:
+        print("DEBUG: Starting create_link_page")
         data = request.json
         title = data.get('title', 'My Links')
         description = data.get('description', 'Collection of useful links')
+        print(f"DEBUG: Creating link page with title='{title}', description='{description}'")
         
         # Create the link page
         page_id = link_manager.create_link_page(title, description)
+        print(f"DEBUG: Created link page with ID: {page_id}")
         
         # Create the original page URL
         original_page_url = f"{request.url_root}links/{page_id}"
+        print(f"DEBUG: Original page URL: {original_page_url}")
         
         # Automatically create a short URL for the link page
+        print(f"DEBUG: Creating short URL for: {original_page_url}")
         short_result = link_manager.create_standalone_short_url(
             original_page_url, 
             title=f"Link Page: {title}",
             custom_code=None
         )
+        print(f"DEBUG: Short URL result: {short_result}")
         short_page_url = short_result['short_url']
         
         # Store the short URL info with the page
+        print(f"DEBUG: Setting page short URL: {short_page_url}, code: {short_result['short_code']}")
         link_manager.set_page_short_url(page_id, short_page_url, short_result['short_code'])
+        print(f"DEBUG: Page short URL set successfully")
         
         settings = {
             'size': data.get('size', 10),
@@ -281,7 +289,10 @@ def create_link_page():
 def add_link_to_page(page_id):
     """Add a link to a page"""
     try:
+        print(f"DEBUG: Adding link to page {page_id}")
         data = request.json
+        print(f"DEBUG: Request data: {data}")
+        
         title = data.get('title', '')
         url = data.get('url', '')
         description = data.get('description', '')
@@ -289,8 +300,10 @@ def add_link_to_page(page_id):
         custom_short_code = data.get('custom_short_code', None)
         
         if not title or not url:
+            print("DEBUG: Missing title or URL")
             return jsonify({'error': 'Title and URL are required'}), 400
         
+        print(f"DEBUG: Calling link_manager.add_link with shortener={enable_shortener}")
         success = link_manager.add_link(
             page_id, title, url, description, 
             enable_shortener=enable_shortener, 
@@ -298,11 +311,14 @@ def add_link_to_page(page_id):
         )
         
         if success:
+            print("DEBUG: Link added successfully")
             return jsonify({'success': True})
         else:
+            print(f"DEBUG: Failed to add link - page {page_id} not found")
             return jsonify({'error': 'Page not found'}), 404
             
     except Exception as e:
+        print(f"DEBUG: Exception in add_link_to_page: {e}")
         return jsonify({'error': str(e)}), 500
 
 @bp.route('/link_pages/<page_id>/links/<link_id>', methods=['PUT'])

app/routes/main.py

@@ -5,6 +5,7 @@ Main routes for QR Code Manager
 from flask import Blueprint, render_template, redirect, abort
 from app.utils.auth import login_required
 from app.utils.link_manager import LinkPageManager
+from app.utils.url_shortener import URLShortener
 
 bp = Blueprint('main', __name__)
 
@@ -19,14 +20,24 @@ def index():
 
 @bp.route('/links/<page_id>')
 def view_link_page(page_id):
-    """Display the public link page"""
+    """Display the public link page (for QR codes)"""
     if not link_manager.page_exists(page_id):
         return "Page not found", 404
     
     link_manager.increment_view_count(page_id)
     page_data = link_manager.get_page(page_id)
     
-    return render_template('link_page.html', page=page_data)
+    return render_template('public_page.html', page=page_data)
+
+@bp.route('/stats/<page_id>')
+@login_required
+def view_page_statistics(page_id):
+    """Display the statistics page for admins"""
+    if not link_manager.page_exists(page_id):
+        return "Page not found", 404
+    
+    page_data = link_manager.get_page(page_id)
+    return render_template('statistics_page.html', page=page_data)
 
 @bp.route('/edit/<page_id>')
 @login_required
@@ -48,6 +59,8 @@ def health_check():
 @bp.route('/s/<short_code>')
 def redirect_short_url(short_code):
     """Redirect short URL to original URL"""
+    # Force reload of data to ensure we have the latest short URLs
+    link_manager.url_shortener = URLShortener()
     original_url = link_manager.resolve_short_url(short_code)
     if original_url:
         return redirect(original_url)

app/templates/edit_links.html

@@ -135,20 +135,41 @@
             margin-bottom: 20px;
         }
 
+        .links-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 15px;
+            margin-top: 20px;
+        }
+
         .link-item {
             background: white;
             border: 1px solid #e9ecef;
-            border-radius: 8px;
+            border-radius: 12px;
             padding: 20px;
-            margin-bottom: 15px;
+            margin-bottom: 0;
             display: flex;
-            justify-content: space-between;
-            align-items: flex-start;
+            flex-direction: column;
             gap: 15px;
+            transition: all 0.3s ease;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+        }
+
+        .link-item:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+            border-color: #667eea;
         }
 
         .link-item.editing {
             border-color: #667eea;
+            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
+        }
+
+        .link-header {
+            display: flex;
+            align-items: flex-start;
+            gap: 12px;
         }
 
         .link-content {
@@ -156,9 +177,25 @@
         }
 
         .link-logo {
-            width: 32px;
-            height: 32px;
-            border-radius: 6px;
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            flex-shrink: 0;
+            object-fit: cover;
+            background: #f8f9fa;
+            border: 1px solid #e9ecef;
+        }
+
+        .link-icon-placeholder {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-size: 18px;
             flex-shrink: 0;
         }
 
@@ -253,12 +290,93 @@
         }
 
         @media (max-width: 768px) {
+            body {
+                padding: 10px;
+            }
+
+            .container {
+                border-radius: 10px;
+            }
+
+            .header {
+                padding: 20px 15px;
+            }
+
+            .header h1 {
+                font-size: 1.8em;
+            }
+
             .main-content {
                 grid-template-columns: 1fr;
+                gap: 20px;
+                padding: 20px 15px;
+            }
+
+            .form-section {
+                padding: 20px 15px;
+            }
+
+            .links-grid {
+                grid-template-columns: 1fr;
+                gap: 12px;
+            }
+
+            .link-item {
+                padding: 15px;
+            }
+
+            .link-header {
+                gap: 10px;
+            }
+
+            .link-logo,
+            .link-icon-placeholder {
+                width: 35px;
+                height: 35px;
+            }
+
+            .link-title {
+                font-size: 1.1em;
+            }
+
+            .link-actions {
+                flex-direction: column;
+                gap: 8px;
+            }
+
+            .link-actions .btn-small {
+                width: 100%;
+                text-align: center;
             }
             
             .page-actions {
                 flex-direction: column;
+                padding: 15px;
+                gap: 10px;
+            }
+
+            .page-actions .btn {
+                width: 100%;
+                text-align: center;
+                margin-right: 0;
+            }
+        }
+
+        @media (min-width: 769px) and (max-width: 1024px) {
+            .links-grid {
+                grid-template-columns: repeat(2, 1fr);
+            }
+        }
+
+        @media (min-width: 1025px) {
+            .links-grid {
+                grid-template-columns: repeat(3, 1fr);
+            }
+        }
+
+        @media (min-width: 1400px) {
+            .links-grid {
+                grid-template-columns: repeat(4, 1fr);
             }
         }
     </style>
@@ -310,28 +428,35 @@
 
             <div class="links-section">
                 <h2>Current Links ({{ page.links|length }})</h2>
-                <div id="links-container">
+                <div class="links-grid" id="links-container">
                     {% if page.links %}
                         {% for link in page.links %}
                         <div class="link-item" data-link-id="{{ link.id }}">
-                            <div class="link-content">
-                                <div class="link-display">
-                                    <div class="link-title">{{ link.title }}</div>
-                                    {% if link.description %}
-                                    <div class="link-description">{{ link.description }}</div>
-                                    {% endif %}
-                                    <div class="link-url" data-url="{{ link.url }}">{{ link.url }}</div>
+                            <div class="link-display">
+                                <div class="link-header">
+                                    <div class="link-icon-placeholder" style="display: flex;">🔗</div>
+                                    <img class="link-logo" src="" alt="" style="display: none;" onerror="this.style.display='none'">
+                                    <div class="link-content">
+                                        <div class="link-title">{{ link.title }}</div>
+                                        {% if link.description %}
+                                        <div class="link-description">{{ link.description }}</div>
+                                        {% endif %}
+                                        <div class="link-url" data-url="{{ link.url }}">{{ link.url }}</div>
+                                    </div>
+                                </div>
+                                
                                 {% if link.short_url %}
-                                <div class="short-url-display" style="margin-top: 8px; padding: 8px; background: #e3f2fd; border-radius: 5px; border-left: 3px solid #2196f3;">
+                                <div class="short-url-display" style="margin-top: 12px; padding: 10px; background: #e3f2fd; border-radius: 8px; border-left: 3px solid #2196f3;">
                                     <small style="color: #1976d2; font-weight: 600;">🔗 Short URL:</small>
                                     <br>
-                                    <a href="{{ link.short_url }}" target="_blank" style="color: #1976d2; text-decoration: none; font-family: monospace;">{{ link.short_url }}</a>
-                                    <button class="btn-copy" onclick="copyToClipboard('{{ link.short_url }}')" style="margin-left: 10px; padding: 2px 8px; background: #2196f3; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 0.8em;">Copy</button>
+                                    <a href="{{ link.short_url }}" target="_blank" style="color: #1976d2; text-decoration: none; font-family: monospace; font-size: 0.9em;">{{ link.short_url }}</a>
+                                    <button class="btn-copy" onclick="copyToClipboard('{{ link.short_url }}')" style="margin-left: 8px; padding: 3px 8px; background: #2196f3; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 0.8em;">Copy</button>
                                 </div>
                                 {% endif %}
+                                
                                 <div class="link-actions">
-                                    <button class="btn btn-small btn-secondary" onclick="editLink('{{ link.id }}')">Edit</button>
-                                    <button class="btn btn-small btn-danger" onclick="deleteLink('{{ link.id }}')">Delete</button>
+                                    <button class="btn btn-small btn-secondary" onclick="editLink('{{ link.id }}')">✏️ Edit</button>
+                                    <button class="btn btn-small btn-danger" onclick="deleteLink('{{ link.id }}')">🗑️ Delete</button>
                                 </div>
                             </div>
                             
@@ -349,15 +474,14 @@
                                     <textarea class="edit-description">{{ link.description or '' }}</textarea>
                                 </div>
                                 <div class="link-actions">
-                                    <button class="btn btn-small btn-success" onclick="saveLink('{{ link.id }}')">Save</button>
-                                    <button class="btn btn-small btn-secondary" onclick="cancelEdit('{{ link.id }}')">Cancel</button>
+                                    <button class="btn btn-small btn-success" onclick="saveLink('{{ link.id }}')">💾 Save</button>
+                                    <button class="btn btn-small btn-secondary" onclick="cancelEdit('{{ link.id }}')">❌ Cancel</button>
                                 </div>
                             </div>
-                            <img class="link-logo" src="" alt="" style="display: none;" onerror="this.style.display='none'">
                         </div>
                         {% endfor %}
                     {% else %}
-                        <div class="empty-state">
+                        <div class="empty-state" style="grid-column: 1 / -1;">
                             <div class="icon">📝</div>
                             <h3>No links yet</h3>
                             <p>Add your first link using the form on the left.</p>
@@ -368,7 +492,8 @@
         </div>
 
         <div class="page-actions">
-            <a href="/links/{{ page.id }}" target="_blank" class="btn">👁️ View Public Page</a>
+            <a href="/stats/{{ page.id }}" class="btn">📊 View Statistics</a>
+            <a href="/links/{{ page.id }}" target="_blank" class="btn btn-secondary">👁️ Preview Public Page</a>
             <a href="/" class="btn btn-secondary">🏠 Back to Dashboard</a>
         </div>
     </div>
@@ -425,13 +550,26 @@
         function setLogosForLinks() {
             document.querySelectorAll('.link-url[data-url]').forEach(linkElement => {
                 const url = linkElement.getAttribute('data-url');
-                const logoImg = linkElement.closest('.link-item').querySelector('.link-logo');
+                const linkItem = linkElement.closest('.link-item');
+                const logoImg = linkItem.querySelector('.link-logo');
+                const placeholder = linkItem.querySelector('.link-icon-placeholder');
                 const logoSrc = getWebsiteLogo(url);
                 
                 if (logoSrc && logoImg) {
                     logoImg.src = logoSrc;
-                    logoImg.style.display = 'block';
                     logoImg.alt = new URL(url.startsWith('http') ? url : 'https://' + url).hostname;
+                    
+                    // Show logo and hide placeholder when loaded
+                    logoImg.onload = function() {
+                        logoImg.style.display = 'block';
+                        if (placeholder) placeholder.style.display = 'none';
+                    };
+                    
+                    // Show placeholder if logo fails to load
+                    logoImg.onerror = function() {
+                        logoImg.style.display = 'none';
+                        if (placeholder) placeholder.style.display = 'flex';
+                    };
                 }
             });
         }

app/templates/index.html

@@ -214,7 +214,9 @@
         }
 
         .download-section {
+            display: flex;
             gap: 10px;
+            flex-wrap: wrap;
         }
 
         .btn-secondary {
@@ -292,16 +294,202 @@
         }
 
         @media (max-width: 768px) {
+            body {
+                padding: 10px;
+            }
+
+            .container {
+                border-radius: 10px;
+            }
+
+            .header {
+                padding: 20px 15px;
+                position: relative;
+            }
+
+            .header h1 {
+                font-size: 2em;
+                margin-bottom: 8px;
+            }
+
+            .header p {
+                font-size: 1em;
+            }
+
+            .header div {
+                position: static !important;
+                text-align: center;
+                margin-top: 15px;
+            }
+
             .main-content {
                 grid-template-columns: 1fr;
+                gap: 20px;
+                padding: 20px 15px;
+            }
+
+            .form-section {
+                padding: 20px 15px;
+            }
+
+            .form-section h2 {
+                font-size: 1.3em;
+                margin-bottom: 15px;
             }
             
             .color-inputs {
                 grid-template-columns: 1fr;
+                gap: 10px;
             }
             
             .style-selector {
                 grid-template-columns: 1fr;
+                gap: 8px;
+            }
+
+            .qr-preview {
+                padding: 20px 10px;
+                min-height: 250px;
+            }
+
+            .qr-preview img {
+                max-height: 200px;
+            }
+
+            .download-section {
+                gap: 8px;
+                flex-direction: column;
+            }
+
+            .download-section .btn {
+                margin: 0;
+                padding: 12px;
+                font-size: 14px;
+            }
+
+            /* QR History Mobile Optimization */
+            .qr-history {
+                margin-top: 20px;
+                padding: 15px;
+            }
+
+            .qr-history h3 {
+                font-size: 1.2em;
+                margin-bottom: 15px;
+            }
+
+            .qr-item {
+                flex-direction: column;
+                align-items: stretch;
+                gap: 12px;
+                padding: 15px;
+                margin-bottom: 15px;
+            }
+
+            .qr-item-header {
+                display: flex;
+                align-items: center;
+                gap: 12px;
+            }
+
+            .qr-item img {
+                width: 60px;
+                height: 60px;
+                flex-shrink: 0;
+            }
+
+            .qr-item-info {
+                flex: 1;
+                margin: 0;
+            }
+
+            .qr-item-info h4 {
+                font-size: 1em;
+                margin-bottom: 4px;
+            }
+
+            .qr-item-info p {
+                font-size: 0.85em;
+                margin: 0;
+            }
+
+            .qr-item-actions {
+                display: grid;
+                grid-template-columns: 1fr 1fr;
+                gap: 8px;
+                margin-top: 10px;
+            }
+
+            .qr-item-actions.full-width {
+                grid-template-columns: 1fr 1fr 1fr;
+            }
+
+            .btn-small {
+                padding: 8px 12px;
+                font-size: 11px;
+                text-align: center;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                min-height: 32px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+
+            /* Special handling for link_page items with more buttons */
+            .qr-item[data-type="link_page"] .qr-item-actions {
+                grid-template-columns: 1fr 1fr;
+                gap: 6px;
+            }
+
+            .qr-item[data-type="link_page"] .btn-small {
+                font-size: 10px;
+                padding: 6px 8px;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .header h1 {
+                font-size: 1.8em;
+            }
+
+            .form-section {
+                padding: 15px 10px;
+            }
+
+            .main-content {
+                padding: 15px 10px;
+            }
+
+            .qr-history {
+                padding: 10px;
+            }
+
+            .qr-item {
+                padding: 12px;
+            }
+
+            .qr-item img {
+                width: 50px;
+                height: 50px;
+            }
+
+            .qr-item-actions {
+                grid-template-columns: 1fr 1fr;
+                gap: 6px;
+            }
+
+            .btn-small {
+                font-size: 10px;
+                padding: 6px 8px;
+                min-height: 30px;
+            }
+
+            /* Stack action buttons for very small screens */
+            .qr-item[data-type="link_page"] .qr-item-actions {
+                grid-template-columns: 1fr 1fr;
+                gap: 5px;
             }
         }
     </style>
@@ -741,16 +929,19 @@
                 }
 
                 historyList.innerHTML = qrCodes.map(qr => `
-                    <div class="qr-item">
-                        <img src="${qr.preview}" alt="QR Code">
-                        <div class="qr-item-info">
-                            <h4>${qr.type.toUpperCase()}${qr.type === 'link_page' ? ' 🔗' : ''}</h4>
-                            <p>Created: ${new Date(qr.created_at).toLocaleDateString()}</p>
+                    <div class="qr-item" data-type="${qr.type}">
+                        <div class="qr-item-header">
+                            <img src="${qr.preview}" alt="QR Code">
+                            <div class="qr-item-info">
+                                <h4>${qr.type.toUpperCase()}${qr.type === 'link_page' ? ' 🔗' : ''}</h4>
+                                <p>Created: ${new Date(qr.created_at).toLocaleDateString()}</p>
+                            </div>
                         </div>
-                        <div class="qr-item-actions">
+                        <div class="qr-item-actions ${qr.type === 'link_page' ? 'full-width' : ''}">
                             <button class="btn btn-small btn-primary" onclick="downloadQRById('${qr.id}', 'png')" title="Download PNG">📥 PNG</button>
                             <button class="btn btn-small btn-success" onclick="downloadQRById('${qr.id}', 'svg')" title="Download SVG">🎨 SVG</button>
-                            ${qr.type === 'link_page' ? `<button class="btn btn-small" onclick="openLinkPage('${qr.id}')" style="background: #28a745;" title="Manage Links">📝 Manage</button>` : ''}
+                            ${qr.type === 'link_page' ? `<button class="btn btn-small" onclick="openLinkPage('${qr.id}')" style="background: #28a745;" title="Manage Links">📝 Edit</button>` : ''}
+                            ${qr.type === 'link_page' ? `<button class="btn btn-small" onclick="openStatistics('${qr.id}')" style="background: #17a2b8;" title="View Statistics">📊 Stats</button>` : ''}
                             <button class="btn btn-small btn-secondary" onclick="deleteQR('${qr.id}')" title="Delete QR Code">🗑️</button>
                         </div>
                     </div>
@@ -801,6 +992,21 @@
             }
         }
 
+        async function openStatistics(qrId) {
+            try {
+                const response = await fetch(`/api/qr_codes/${qrId}`);
+                const qrData = await response.json();
+                
+                if (qrData.page_id) {
+                    window.open(`/stats/${qrData.page_id}`, '_blank');
+                } else {
+                    alert('Link page not found');
+                }
+            } catch (error) {
+                alert('Error opening statistics page: ' + error.message);
+            }
+        }
+
         // Load history on page load
         document.addEventListener('DOMContentLoaded', function() {
             loadQRHistory();

app/templates/public_page.html

@@ -0,0 +1,319 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ page.title }}</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            padding: 20px;
+        }
+
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            background: white;
+            border-radius: 15px;
+            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+            overflow: hidden;
+        }
+
+        .header {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 40px 30px;
+            text-align: center;
+        }
+
+        .header h1 {
+            font-size: 2.5em;
+            margin-bottom: 10px;
+            font-weight: 300;
+        }
+
+        .header p {
+            font-size: 1.1em;
+            opacity: 0.9;
+        }
+
+        .content {
+            padding: 30px;
+        }
+
+        .links-section h2 {
+            color: #333;
+            margin-bottom: 25px;
+            font-size: 1.8em;
+            text-align: center;
+        }
+
+        .link-item {
+            background: #f8f9fa;
+            border: 1px solid #e9ecef;
+            border-radius: 12px;
+            padding: 20px;
+            margin-bottom: 15px;
+            transition: all 0.3s ease;
+            cursor: pointer;
+            text-decoration: none;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            gap: 15px;
+            color: inherit;
+        }
+
+        .link-item:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(0,0,0,0.1);
+            border-color: #667eea;
+        }
+
+        .link-content {
+            flex: 1;
+        }
+
+        .link-title {
+            font-size: 1.3em;
+            font-weight: 600;
+            color: #333;
+            margin-bottom: 8px;
+        }
+
+        .link-logo {
+            width: 36px;
+            height: 36px;
+            border-radius: 8px;
+            flex-shrink: 0;
+        }
+
+        .link-icon {
+            width: 20px;
+            height: 20px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-size: 12px;
+        }
+
+        .link-description {
+            color: #666;
+            font-size: 0.95em;
+            line-height: 1.4;
+            margin-bottom: 10px;
+        }
+
+        .link-url {
+            color: #667eea;
+            font-size: 0.9em;
+            font-weight: 500;
+        }
+
+        .empty-state {
+            text-align: center;
+            padding: 60px 20px;
+            color: #666;
+        }
+
+        .empty-state h3 {
+            font-size: 1.5em;
+            margin-bottom: 15px;
+            color: #999;
+        }
+
+        .empty-state p {
+            font-size: 1.1em;
+            line-height: 1.6;
+        }
+
+        /* Responsive design */
+        @media (max-width: 768px) {
+            body {
+                padding: 10px;
+            }
+            
+            .container {
+                border-radius: 10px;
+            }
+            
+            .header {
+                padding: 30px 20px;
+            }
+            
+            .header h1 {
+                font-size: 2em;
+            }
+            
+            .content {
+                padding: 20px;
+            }
+            
+            .link-item {
+                padding: 15px;
+                flex-direction: column;
+                align-items: flex-start;
+                gap: 10px;
+            }
+            
+            .link-content {
+                width: 100%;
+            }
+            
+            .link-title {
+                font-size: 1.1em;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .header h1 {
+                font-size: 1.8em;
+            }
+            
+            .header p {
+                font-size: 1em;
+            }
+            
+            .content {
+                padding: 15px;
+            }
+            
+            .links-section h2 {
+                font-size: 1.5em;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>{{ page.title }}</h1>
+            <p>{{ page.description }}</p>
+        </div>
+
+        <div class="content">
+            <div class="links-section">
+                {% if page.links %}
+                    <h2>📚 Available Links</h2>
+                    {% for link in page.links %}
+                    <a href="{{ link.short_url if link.short_url else link.url }}" target="_blank" class="link-item" data-url="{{ link.url }}">
+                        <div class="link-content">
+                            <div class="link-title">
+                                {{ link.title }}
+                                {% if link.short_url %}<span style="background: #2196f3; color: white; font-size: 0.7em; padding: 2px 6px; border-radius: 10px; margin-left: 8px;">SHORT</span>{% endif %}
+                            </div>
+                            {% if link.description %}
+                            <div class="link-description">{{ link.description }}</div>
+                            {% endif %}
+                            <div class="link-url">{{ link.short_url if link.short_url else link.url }}</div>
+                        </div>
+                        <div style="display: flex; align-items: center; gap: 10px;">
+                            <img class="link-logo" style="display: none;" alt="Logo">
+                            <div class="link-icon">🔗</div>
+                        </div>
+                    </a>
+                    {% endfor %}
+                {% else %}
+                    <div class="empty-state">
+                        <h3>No Links Yet</h3>
+                        <p>This page doesn't have any links yet. Check back later!</p>
+                    </div>
+                {% endif %}
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Website logo mapping for better recognition
+        function getWebsiteLogo(url) {
+            try {
+                const urlObj = new URL(url.startsWith('http') ? url : 'https://' + url);
+                const domain = urlObj.hostname.replace('www.', '');
+                
+                const logoMap = {
+                    'youtube.com': 'https://www.youtube.com/favicon.ico',
+                    'youtu.be': 'https://www.youtube.com/favicon.ico',
+                    'facebook.com': 'https://www.facebook.com/favicon.ico',
+                    'instagram.com': 'https://www.instagram.com/favicon.ico',
+                    'twitter.com': 'https://abs.twimg.com/favicons/twitter.ico',
+                    'x.com': 'https://abs.twimg.com/favicons/twitter.ico',
+                    'linkedin.com': 'https://static.licdn.com/sc/h/al2o9zrvru7aqj8e1x2rzsrca',
+                    'github.com': 'https://github.com/favicon.ico',
+                    'stackoverflow.com': 'https://stackoverflow.com/favicon.ico',
+                    'reddit.com': 'https://www.reddit.com/favicon.ico',
+                    'medium.com': 'https://medium.com/favicon.ico',
+                    'discord.com': 'https://discord.com/assets/f8389ca1a741a115313bede9ac02e2c0.ico',
+                    'twitch.tv': 'https://static.twitchcdn.net/assets/favicon-32-d6025c14e900565d6177.png',
+                    'spotify.com': 'https://open.spotify.com/favicon.ico',
+                    'apple.com': 'https://www.apple.com/favicon.ico',
+                    'google.com': 'https://www.google.com/favicon.ico',
+                    'microsoft.com': 'https://www.microsoft.com/favicon.ico',
+                    'amazon.com': 'https://www.amazon.com/favicon.ico',
+                    'netflix.com': 'https://assets.nflxext.com/ffe/siteui/common/icons/nficon2016.ico',
+                    'whatsapp.com': 'https://static.whatsapp.net/rsrc.php/v3/yz/r/ujTY9i_Jhs1.png'
+                };
+                
+                if (logoMap[domain]) {
+                    return logoMap[domain];
+                }
+                
+                // Fallback to favicon
+                return `https://www.google.com/s2/favicons?domain=${domain}&sz=64`;
+            } catch (e) {
+                return null;
+            }
+        }
+        
+        // Set logos for links
+        function setLogosForLinks() {
+            document.querySelectorAll('.link-item[data-url]').forEach(linkElement => {
+                const url = linkElement.getAttribute('data-url');
+                const logoImg = linkElement.querySelector('.link-logo');
+                const fallbackIcon = linkElement.querySelector('.link-icon');
+                const logoSrc = getWebsiteLogo(url);
+                
+                if (logoSrc && logoImg) {
+                    logoImg.src = logoSrc;
+                    logoImg.style.display = 'block';
+                    logoImg.alt = new URL(url.startsWith('http') ? url : 'https://' + url).hostname;
+                    // Hide the fallback icon when logo is shown
+                    logoImg.onload = function() {
+                        if (fallbackIcon) fallbackIcon.style.display = 'none';
+                    };
+                    logoImg.onerror = function() {
+                        this.style.display = 'none';
+                        if (fallbackIcon) fallbackIcon.style.display = 'flex';
+                    };
+                }
+            });
+        }
+        
+        // Initialize logos when page loads
+        document.addEventListener('DOMContentLoaded', setLogosForLinks);
+        
+        // Add click tracking (optional)
+        document.querySelectorAll('.link-item').forEach(link => {
+            link.addEventListener('click', function() {
+                // You could add analytics here
+                console.log('Link clicked:', this.querySelector('.link-title').textContent.trim());
+            });
+        });
+
+        // Auto-refresh every 30 seconds to get latest links
+        setInterval(() => {
+            window.location.reload();
+        }, 30000);
+    </script>
+</body>
+</html>

app/templates/statistics_page.html

@@ -0,0 +1,652 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ page.title }} - Statistics</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            padding: 20px;
+        }
+
+        .container {
+            max-width: 900px;
+            margin: 0 auto;
+            background: white;
+            border-radius: 15px;
+            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+            overflow: hidden;
+        }
+
+        .header {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 40px 30px;
+            text-align: center;
+        }
+
+        .header h1 {
+            font-size: 2.5em;
+            margin-bottom: 10px;
+            font-weight: 300;
+        }
+
+        .header p {
+            font-size: 1.1em;
+            opacity: 0.9;
+            margin-bottom: 20px;
+        }
+
+        .stats {
+            background: rgba(255,255,255,0.1);
+            margin-top: 20px;
+            padding: 15px;
+            border-radius: 10px;
+            display: flex;
+            justify-content: center;
+            gap: 30px;
+        }
+
+        .stat-item {
+            text-align: center;
+        }
+
+        .stat-number {
+            font-size: 1.5em;
+            font-weight: bold;
+        }
+
+        .stat-label {
+            font-size: 0.9em;
+            opacity: 0.8;
+            margin-top: 5px;
+        }
+
+        .admin-info {
+            background: rgba(255,255,255,0.1);
+            margin-top: 15px;
+            padding: 15px;
+            border-radius: 10px;
+            text-align: left;
+        }
+
+        .admin-info h3 {
+            margin-bottom: 10px;
+            font-size: 1.2em;
+        }
+
+        .info-row {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 8px;
+            font-size: 0.9em;
+        }
+
+        .content {
+            padding: 30px;
+        }
+
+        .section {
+            margin-bottom: 30px;
+        }
+
+        .section h2 {
+            color: #333;
+            margin-bottom: 20px;
+            font-size: 1.8em;
+            border-bottom: 2px solid #667eea;
+            padding-bottom: 10px;
+        }
+
+        .links-section h2 {
+            color: #333;
+            margin-bottom: 25px;
+            font-size: 1.8em;
+            text-align: center;
+        }
+
+        .link-item {
+            background: #f8f9fa;
+            border: 1px solid #e9ecef;
+            border-radius: 12px;
+            padding: 20px;
+            margin-bottom: 15px;
+            transition: all 0.3s ease;
+            cursor: pointer;
+            text-decoration: none;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            gap: 15px;
+            color: inherit;
+        }
+
+        .link-item:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(0,0,0,0.1);
+            border-color: #667eea;
+        }
+
+        .link-content {
+            flex: 1;
+        }
+
+        .link-title {
+            font-size: 1.3em;
+            font-weight: 600;
+            color: #333;
+            margin-bottom: 8px;
+        }
+
+        .link-logo {
+            width: 36px;
+            height: 36px;
+            border-radius: 8px;
+            flex-shrink: 0;
+        }
+
+        .link-icon {
+            width: 20px;
+            height: 20px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-size: 12px;
+        }
+
+        .link-description {
+            color: #666;
+            font-size: 0.95em;
+            line-height: 1.4;
+            margin-bottom: 10px;
+        }
+
+        .link-url {
+            color: #667eea;
+            font-size: 0.9em;
+            font-weight: 500;
+        }
+
+        .empty-state {
+            text-align: center;
+            padding: 60px 20px;
+            color: #666;
+        }
+
+        .empty-state h3 {
+            font-size: 1.5em;
+            margin-bottom: 15px;
+            color: #999;
+        }
+
+        .empty-state p {
+            font-size: 1.1em;
+            line-height: 1.6;
+        }
+
+        .actions {
+            background: #f8f9fa;
+            padding: 20px 30px;
+            border-top: 1px solid #e9ecef;
+            display: flex;
+            justify-content: space-between;
+            gap: 15px;
+        }
+
+        .btn {
+            padding: 12px 24px;
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            text-decoration: none;
+            font-weight: 500;
+            transition: all 0.3s ease;
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .btn-primary {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+        }
+
+        .btn-secondary {
+            background: #6c757d;
+            color: white;
+        }
+
+        .btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+        }
+
+        .qr-info {
+            background: #e8f4fd;
+            border: 1px solid #b8daff;
+            border-radius: 8px;
+            padding: 15px;
+            margin-bottom: 20px;
+        }
+
+        .qr-info h3 {
+            color: #0c5460;
+            margin-bottom: 10px;
+        }
+
+        .qr-info p {
+            color: #0c5460;
+            font-size: 0.9em;
+            margin-bottom: 8px;
+        }
+
+        .qr-url {
+            background: white;
+            padding: 8px 12px;
+            border-radius: 4px;
+            font-family: monospace;
+            font-size: 0.9em;
+            word-break: break-all;
+            border: 1px solid #b8daff;
+        }
+
+        .qr-preview-section {
+            background: #f8f9fa;
+            border: 1px solid #e9ecef;
+            border-radius: 8px;
+            padding: 20px;
+            margin-top: 20px;
+            text-align: center;
+        }
+
+        .qr-preview-section h4 {
+            color: #495057;
+            margin-bottom: 15px;
+            font-size: 1.1em;
+        }
+
+        .qr-preview-container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 15px;
+        }
+
+        .qr-preview-image {
+            max-width: 200px;
+            max-height: 200px;
+            border: 2px solid #dee2e6;
+            border-radius: 8px;
+            background: white;
+            padding: 10px;
+        }
+
+        .qr-download-actions {
+            display: flex;
+            gap: 10px;
+            flex-wrap: wrap;
+            justify-content: center;
+        }
+
+        .btn-download {
+            padding: 8px 16px;
+            border: none;
+            border-radius: 6px;
+            cursor: pointer;
+            text-decoration: none;
+            font-weight: 500;
+            font-size: 0.9em;
+            transition: all 0.3s ease;
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+        }
+
+        .btn-download-png {
+            background: #007bff;
+            color: white;
+        }
+
+        .btn-download-svg {
+            background: #28a745;
+            color: white;
+        }
+
+        .btn-download:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+        }
+
+        .qr-loading {
+            color: #666;
+            font-style: italic;
+        }
+
+        /* Responsive design */
+        @media (max-width: 768px) {
+            body {
+                padding: 10px;
+            }
+            
+            .container {
+                border-radius: 10px;
+            }
+            
+            .header {
+                padding: 30px 20px;
+            }
+            
+            .header h1 {
+                font-size: 2em;
+            }
+            
+            .content {
+                padding: 20px;
+            }
+            
+            .actions {
+                padding: 15px 20px;
+                flex-direction: column;
+            }
+            
+            .stats {
+                flex-direction: column;
+                gap: 15px;
+            }
+            
+            .link-item {
+                padding: 15px;
+                flex-direction: column;
+                align-items: flex-start;
+                gap: 10px;
+            }
+            
+            .link-content {
+                width: 100%;
+            }
+            
+            .link-title {
+                font-size: 1.1em;
+            }
+            
+            .qr-preview-image {
+                max-width: 150px;
+                max-height: 150px;
+            }
+            
+            .qr-download-actions {
+                flex-direction: column;
+                width: 100%;
+            }
+            
+            .btn-download {
+                width: 100%;
+                justify-content: center;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .header h1 {
+                font-size: 1.8em;
+            }
+            
+            .header p {
+                font-size: 1em;
+            }
+            
+            .content {
+                padding: 15px;
+            }
+            
+            .links-section h2 {
+                font-size: 1.5em;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>{{ page.title }} - Statistics</h1>
+            <p>{{ page.description }}</p>
+            
+            <div class="stats">
+                <div class="stat-item">
+                    <div class="stat-number">{{ page.links|length }}</div>
+                    <div class="stat-label">Links</div>
+                </div>
+                <div class="stat-item">
+                    <div class="stat-number">{{ page.view_count }}</div>
+                    <div class="stat-label">Page Views</div>
+                </div>
+                <div class="stat-item">
+                    <div class="stat-number">{{ page.links|sum(attribute='clicks') or 0 }}</div>
+                    <div class="stat-label">Total Clicks</div>
+                </div>
+            </div>
+
+            <div class="admin-info">
+                <h3>📊 Page Information</h3>
+                <div class="info-row">
+                    <span>Page ID:</span>
+                    <span>{{ page.id }}</span>
+                </div>
+                <div class="info-row">
+                    <span>Created:</span>
+                    <span>{{ page.created_at or 'N/A' }}</span>
+                </div>
+                <div class="info-row">
+                    <span>Last Updated:</span>
+                    <span>{{ page.updated_at or 'N/A' }}</span>
+                </div>
+                {% if page.short_url %}
+                <div class="info-row">
+                    <span>Short URL:</span>
+                    <span>{{ page.short_url }}</span>
+                </div>
+                {% endif %}
+            </div>
+        </div>
+
+        <div class="content">
+            <div class="section">
+                <div class="qr-info">
+                    <h3>🔗 Public QR Code URL</h3>
+                    <p>This is the URL that your QR code points to (public page without statistics):</p>
+                    <div class="qr-url">{{ request.url_root }}links/{{ page.id }}</div>
+                    
+                    <div class="qr-preview-section">
+                        <h4>📱 QR Code Preview</h4>
+                        <div class="qr-preview-container">
+                            <div id="qr-preview-loading" class="qr-loading">Loading QR code...</div>
+                            <img id="qr-preview-image" class="qr-preview-image" style="display: none;" alt="QR Code">
+                            <div class="qr-download-actions" id="qr-download-actions" style="display: none;">
+                                <button class="btn-download btn-download-png" onclick="downloadQRCode('png')">
+                                    📥 Download PNG
+                                </button>
+                                <button class="btn-download btn-download-svg" onclick="downloadQRCode('svg')">
+                                    🎨 Download SVG
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="section links-section">
+                {% if page.links %}
+                    <h2>📚 Links with Statistics</h2>
+                    {% for link in page.links %}
+                    <div class="link-item" style="cursor: default;">
+                        <div class="link-content">
+                            <div class="link-title">
+                                {{ link.title }}
+                                {% if link.short_url %}<span style="background: #2196f3; color: white; font-size: 0.7em; padding: 2px 6px; border-radius: 10px; margin-left: 8px;">SHORT</span>{% endif %}
+                            </div>
+                            {% if link.description %}
+                            <div class="link-description">{{ link.description }}</div>
+                            {% endif %}
+                            <div class="link-url">{{ link.short_url if link.short_url else link.url }}</div>
+                            <div style="margin-top: 10px; font-size: 0.85em; color: #666;">
+                                <strong>Clicks:</strong> {{ link.clicks or 0 }} | 
+                                <strong>Added:</strong> {{ link.created_at or 'N/A' }}
+                            </div>
+                        </div>
+                        <div style="display: flex; align-items: center; gap: 10px;">
+                            <img class="link-logo" style="display: none;" alt="Logo">
+                            <div class="link-icon">📊</div>
+                        </div>
+                    </div>
+                    {% endfor %}
+                {% else %}
+                    <div class="empty-state">
+                        <h3>No Links Yet</h3>
+                        <p>This page doesn't have any links yet. Add some links to see statistics here.</p>
+                    </div>
+                {% endif %}
+            </div>
+        </div>
+
+        <div class="actions">
+            <a href="/edit/{{ page.id }}" class="btn btn-primary">
+                ✏️ Edit Page
+            </a>
+            <a href="/links/{{ page.id }}" class="btn btn-secondary" target="_blank">
+                👁️ View Public Page
+            </a>
+            <a href="/" class="btn btn-secondary">
+                🏠 Back to Dashboard
+            </a>
+        </div>
+    </div>
+
+    <script>
+        // Website logo mapping for better recognition
+        function getWebsiteLogo(url) {
+            try {
+                const urlObj = new URL(url.startsWith('http') ? url : 'https://' + url);
+                const domain = urlObj.hostname.replace('www.', '');
+                
+                const logoMap = {
+                    'youtube.com': 'https://www.youtube.com/favicon.ico',
+                    'youtu.be': 'https://www.youtube.com/favicon.ico',
+                    'facebook.com': 'https://www.facebook.com/favicon.ico',
+                    'instagram.com': 'https://www.instagram.com/favicon.ico',
+                    'twitter.com': 'https://abs.twimg.com/favicons/twitter.ico',
+                    'x.com': 'https://abs.twimg.com/favicons/twitter.ico',
+                    'linkedin.com': 'https://static.licdn.com/sc/h/al2o9zrvru7aqj8e1x2rzsrca',
+                    'github.com': 'https://github.com/favicon.ico',
+                    'stackoverflow.com': 'https://stackoverflow.com/favicon.ico',
+                    'reddit.com': 'https://www.reddit.com/favicon.ico',
+                    'medium.com': 'https://medium.com/favicon.ico',
+                    'discord.com': 'https://discord.com/assets/f8389ca1a741a115313bede9ac02e2c0.ico',
+                    'twitch.tv': 'https://static.twitchcdn.net/assets/favicon-32-d6025c14e900565d6177.png',
+                    'spotify.com': 'https://open.spotify.com/favicon.ico',
+                    'apple.com': 'https://www.apple.com/favicon.ico',
+                    'google.com': 'https://www.google.com/favicon.ico',
+                    'microsoft.com': 'https://www.microsoft.com/favicon.ico',
+                    'amazon.com': 'https://www.amazon.com/favicon.ico',
+                    'netflix.com': 'https://assets.nflxext.com/ffe/siteui/common/icons/nficon2016.ico',
+                    'whatsapp.com': 'https://static.whatsapp.net/rsrc.php/v3/yz/r/ujTY9i_Jhs1.png'
+                };
+                
+                if (logoMap[domain]) {
+                    return logoMap[domain];
+                }
+                
+                // Fallback to favicon
+                return `https://www.google.com/s2/favicons?domain=${domain}&sz=64`;
+            } catch (e) {
+                return null;
+            }
+        }
+        
+        // Set logos for links
+        function setLogosForLinks() {
+            document.querySelectorAll('[data-url]').forEach(linkElement => {
+                const url = linkElement.getAttribute('data-url');
+                const logoImg = linkElement.querySelector('.link-logo');
+                const fallbackIcon = linkElement.querySelector('.link-icon');
+                const logoSrc = getWebsiteLogo(url);
+                
+                if (logoSrc && logoImg) {
+                    logoImg.src = logoSrc;
+                    logoImg.style.display = 'block';
+                    logoImg.alt = new URL(url.startsWith('http') ? url : 'https://' + url).hostname;
+                    // Hide the fallback icon when logo is shown
+                    logoImg.onload = function() {
+                        if (fallbackIcon) fallbackIcon.style.display = 'none';
+                    };
+                    logoImg.onerror = function() {
+                        this.style.display = 'none';
+                        if (fallbackIcon) fallbackIcon.style.display = 'flex';
+                    };
+                }
+            });
+        }
+        
+        // Initialize logos when page loads
+        document.addEventListener('DOMContentLoaded', function() {
+            setLogosForLinks();
+            loadQRCodePreview();
+        });
+
+        // QR Code functionality
+        let currentQRId = null;
+
+        async function loadQRCodePreview() {
+            try {
+                const pageId = '{{ page.id }}';
+                
+                // Find the QR code for this page
+                const response = await fetch('/api/qr_codes');
+                const qrCodes = await response.json();
+                
+                const pageQR = qrCodes.find(qr => qr.type === 'link_page' && qr.page_id === pageId);
+                
+                if (pageQR) {
+                    currentQRId = pageQR.id;
+                    const previewImage = document.getElementById('qr-preview-image');
+                    const loadingText = document.getElementById('qr-preview-loading');
+                    const downloadActions = document.getElementById('qr-download-actions');
+                    
+                    previewImage.src = pageQR.preview;
+                    previewImage.style.display = 'block';
+                    loadingText.style.display = 'none';
+                    downloadActions.style.display = 'flex';
+                } else {
+                    document.getElementById('qr-preview-loading').textContent = 'QR code not found';
+                }
+            } catch (error) {
+                console.error('Failed to load QR code preview:', error);
+                document.getElementById('qr-preview-loading').textContent = 'Failed to load QR code';
+            }
+        }
+
+        function downloadQRCode(format) {
+            if (!currentQRId) {
+                alert('QR code not found');
+                return;
+            }
+            
+            if (format === 'svg') {
+                window.open(`/api/download/${currentQRId}/svg`, '_blank');
+            } else {
+                window.open(`/api/download/${currentQRId}`, '_blank');
+            }
+        }
+    </script>
+</body>
+</html>

app/utils/link_manager.py

@@ -69,7 +69,16 @@ class LinkPageManager:
 
     def add_link(self, page_id, title, url, description="", enable_shortener=False, custom_short_code=None):
         """Add a link to a page with optional URL shortening"""
+        print(f"DEBUG: LinkManager.add_link called for page {page_id}")
+        print(f"DEBUG: Current pages in memory: {list(self.link_pages_db.keys())}")
+        
         if page_id not in self.link_pages_db:
+            print(f"DEBUG: Page {page_id} not found in memory, reloading from file")
+            self.link_pages_db = self._load_link_pages()
+            print(f"DEBUG: After reload, pages: {list(self.link_pages_db.keys())}")
+            
+        if page_id not in self.link_pages_db:
+            print(f"DEBUG: Page {page_id} still not found after reload")
             return False
         
         # Ensure URL has protocol
@@ -90,21 +99,27 @@ class LinkPageManager:
         
         # Generate short URL if enabled
         if enable_shortener:
+            print(f"DEBUG: Creating short URL for {url}")
             try:
                 short_result = self.url_shortener.create_short_url(
                     url, 
                     custom_code=custom_short_code,
                     title=title
                 )
+                print(f"DEBUG: Short URL created: {short_result}")
                 link_data['short_url'] = short_result['short_url']
                 link_data['short_code'] = short_result['short_code']
             except Exception as e:
                 # If shortening fails, continue without it
-                print(f"URL shortening failed: {e}")
+                print(f"DEBUG: URL shortening failed: {e}")
         
+        print(f"DEBUG: Adding link to page data: {link_data}")
         self.link_pages_db[page_id]['links'].append(link_data)
         self.link_pages_db[page_id]['updated_at'] = datetime.now().isoformat()
+        
+        print(f"DEBUG: Saving link pages to file")
         self._save_link_pages()  # Persist to file
+        print(f"DEBUG: Link added successfully")
         return True
     
     def update_link(self, page_id, link_id, title=None, url=None, description=None, enable_shortener=None, custom_short_code=None):
@@ -196,4 +211,6 @@ class LinkPageManager:
     
     def resolve_short_url(self, short_code):
         """Resolve a short URL to its original URL"""
+        # Reload URLShortener data to ensure we have the latest URLs
+        self.url_shortener = URLShortener()
         return self.url_shortener.get_original_url(short_code)

app/utils/url_shortener.py

@@ -57,11 +57,15 @@ class URLShortener:
     
     def create_short_url(self, original_url, custom_code=None, title=""):
         """Create a shortened URL"""
+        print(f"DEBUG: URLShortener.create_short_url called with url='{original_url}', custom_code='{custom_code}', title='{title}'")
+        
         # Generate or use custom short code
         if custom_code and custom_code not in self.short_urls_db:
             short_code = custom_code
+            print(f"DEBUG: Using custom short code: {short_code}")
         else:
             short_code = self.generate_short_code()
+            print(f"DEBUG: Generated short code: {short_code}")
         
         # Ensure original URL has protocol
         if not original_url.startswith(('http://', 'https://')):
@@ -78,11 +82,16 @@ class URLShortener:
             'last_accessed': None
         }
         
+        print(f"DEBUG: Adding to short_urls_db: {short_code} -> {url_data}")
         self.short_urls_db[short_code] = url_data
+        
+        print(f"DEBUG: Saving short URLs to file")
         self._save_short_urls()  # Persist to file
+        print(f"DEBUG: Short URLs saved successfully")
         
         # Return the complete short URL
         short_url = f"{self.base_domain}/s/{short_code}"
+        print(f"DEBUG: Returning short URL: {short_url}")
         return {
             'short_url': short_url,
             'short_code': short_code,

cookies.txt

@@ -1,5 +0,0 @@
-# Netscape HTTP Cookie File
-# https://curl.se/docs/http-cookies.html
-# This file was generated by libcurl! Edit at your own risk.
-
-#HttpOnly_localhost	FALSE	/	FALSE	0	session	55e50d08-fd25-4369-83fd-e7d55418fd80.0RCjAWZ4XqOrd6e0QigIwgmcqes

data/link_pages.json

@@ -1 +1,13 @@
-{}
+{
+  "69247bcc-a1eb-439c-a5dd-fcfcf12cd7a1": {
+    "id": "69247bcc-a1eb-439c-a5dd-fcfcf12cd7a1",
+    "title": "Test Page",
+    "description": "Test page for debugging",
+    "links": [],
+    "created_at": "2025-07-18T12:27:00.000Z",
+    "updated_at": "2025-07-18T12:27:00.000Z",
+    "view_count": 0,
+    "short_url": null,
+    "short_code": null
+  }
+}

data/short_urls.json

@@ -1 +1,9 @@
-{}
+{
+  "W7BsLT": {
+    "short_code": "W7BsLT",
+    "original_url": "http://qr.moto-adv.com/links/69247bcc-a1eb-439c-a5dd-fcfcf12cd7a1",
+    "title": "Test Page",
+    "created_at": "2025-07-18T12:28:00.000Z",
+    "click_count": 0
+  }
+}

gunicorn.conf.py

@@ -6,10 +6,10 @@ bind = "0.0.0.0:5000"
 backlog = 2048
 
 # Worker processes
-workers = 4
+workers = 1  # Reduced to 1 to avoid file concurrency issues
 worker_class = "sync"
 worker_connections = 1000
-timeout = 30
+timeout = 60  # Increased timeout to handle potentially slow operations
 keepalive = 2
 
 # Restart workers after this many requests, to prevent memory leaks