feat: major UX overhaul for PDF viewer, drive browser, and NeetPrep

PDF Viewer:
- Replace PDF.js with Adobe PDF Embed API for state-of-the-art UX
- Native smooth pinch-to-zoom centered on finger position
- Better touch handling, zoom controls, and fullscreen support
- Clean minimal header with back button and download

Drive Browser:
- Copy button now copies direct download URL (not viewer URL)
- Add support for more file types: slides, sheets, docs, video
- Add "Open in Google" button for Slides/Sheets/Docs files
- Add dedicated image viewer with zoom/pan support

NeetPrep:
- Add tag-based quiz filtering with searchable tag chips
- Extract tags from classified questions
- Pass tag filters to quiz generation for filtered quizzes

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

drive_routes.py

@@ -217,10 +217,15 @@ def browse_drive(source_id, subpath=''):
             for entry in os.scandir(current_path):
                 is_dir = entry.is_dir()
                 file_type = 'file'
+                name_lower = entry.name.lower()
                 if is_dir: file_type = 'folder'
-                elif entry.name.lower().endswith('.pdf'): file_type = 'pdf'
-                elif entry.name.lower().endswith(('.png', '.jpg', '.jpeg')): file_type = 'image'
-                
+                elif name_lower.endswith('.pdf'): file_type = 'pdf'
+                elif name_lower.endswith(('.png', '.jpg', '.jpeg', '.gif', '.webp', '.bmp')): file_type = 'image'
+                elif name_lower.endswith(('.ppt', '.pptx', '.odp')): file_type = 'slides'
+                elif name_lower.endswith(('.xls', '.xlsx', '.ods', '.csv')): file_type = 'sheet'
+                elif name_lower.endswith(('.doc', '.docx', '.odt', '.txt', '.rtf')): file_type = 'doc'
+                elif name_lower.endswith(('.mp4', '.mov', '.avi', '.mkv', '.webm')): file_type = 'video'
+
                 items.append({
                     'name': entry.name,
                     'type': file_type,
@@ -260,9 +265,13 @@ def view_drive_file(source_id, filepath):
         except Exception as e: return f"Error downloading file: {e}", 500
     
     if not os.path.exists(full_path): return "File not found.", 404
-    if full_path.lower().endswith('.pdf'):
+    name_lower = full_path.lower()
+    if name_lower.endswith('.pdf'):
         file_url = url_for('drive.serve_drive_file', source_id=source_id, filepath=os.path.basename(full_path))
         return render_template('pdfjs_viewer.html', pdf_url=file_url, pdf_title=os.path.basename(full_path))
+    if name_lower.endswith(('.png', '.jpg', '.jpeg', '.gif', '.webp', '.bmp')):
+        file_url = url_for('drive.serve_drive_file', source_id=source_id, filepath=os.path.basename(full_path))
+        return render_template('image_viewer.html', image_url=file_url, image_title=os.path.basename(full_path))
     return send_from_directory(os.path.dirname(full_path), os.path.basename(full_path))
 
 @drive_bp.route('/drive/raw/<int:source_id>/<path:filepath>')
@@ -308,8 +317,22 @@ def browse_drive_api(folder_id):
     items = []
     for f in files:
         is_folder = f['mimeType'] == 'application/vnd.google-apps.folder'
-        f_type = 'folder' if is_folder else ('pdf' if f['mimeType'] == 'application/pdf' else 'file')
-        if 'image' in f['mimeType']: f_type = 'image'
+        mime = f['mimeType']
+        f_type = 'folder' if is_folder else 'file'
+
+        if mime == 'application/pdf': f_type = 'pdf'
+        elif 'image' in mime: f_type = 'image'
+        elif mime in ['application/vnd.google-apps.presentation', 'application/vnd.ms-powerpoint',
+                      'application/vnd.openxmlformats-officedocument.presentationml.presentation']:
+            f_type = 'slides'
+        elif mime in ['application/vnd.google-apps.spreadsheet', 'application/vnd.ms-excel',
+                      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']:
+            f_type = 'sheet'
+        elif mime in ['application/vnd.google-apps.document', 'application/msword',
+                      'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'text/plain']:
+            f_type = 'doc'
+        elif 'video' in mime: f_type = 'video'
+
         items.append({
             'name': f['name'],
             'type': f_type,
@@ -344,12 +367,20 @@ def api_open_file(file_id):
             ''', (current_user.id, file_id, filename, 'drive_api'))
             conn.commit()
             conn.close()
-            
+
             file_url = url_for('drive.serve_cache_file', filename=safe_name)
             return render_template('pdfjs_viewer.html', pdf_url=file_url, pdf_title=filename)
-        if safe_name.lower().endswith(('.png', '.jpg', '.jpeg')):
-             return send_from_directory(cache_dir, safe_name)
-        return "File downloaded but type not supported for viewing.", 200
+        if safe_name.lower().endswith(('.png', '.jpg', '.jpeg', '.gif', '.webp', '.bmp')):
+            return render_template('image_viewer.html', image_url=url_for('drive.serve_cache_file', filename=safe_name), image_title=filename)
+        if safe_name.lower().endswith(('.ppt', '.pptx', '.odp')):
+            # Redirect to Google Slides for presentation files
+            return redirect(f'https://docs.google.com/presentation/d/{file_id}/edit')
+        if safe_name.lower().endswith(('.xls', '.xlsx', '.ods', '.csv')):
+            return redirect(f'https://docs.google.com/spreadsheets/d/{file_id}/edit')
+        if safe_name.lower().endswith(('.doc', '.docx', '.odt')):
+            return redirect(f'https://docs.google.com/document/d/{file_id}/edit')
+        # For other files, serve directly
+        return send_from_directory(cache_dir, safe_name)
     except Exception as e: return f"Error opening file: {e}", 500
 
 @drive_bp.route('/drive/cache/<filename>')

neetprep.py

@@ -70,7 +70,7 @@ def index():
     conn = get_db_connection()
     selected_subject = request.args.get('subject', 'All')
     AVAILABLE_SUBJECTS = ["All", "Biology", "Chemistry", "Physics", "Mathematics"]
-    
+
     neetprep_topic_counts = {}
     unclassified_count = 0
     if current_user.neetprep_enabled:
@@ -88,23 +88,23 @@ def index():
     # Get classified question counts per chapter for the current user, filtered by subject
     query_params = [current_user.id]
     base_query = """
-        SELECT q.chapter, COUNT(*) as count 
+        SELECT q.chapter, COUNT(*) as count
         FROM questions q
         JOIN sessions s ON q.session_id = s.id
-        WHERE s.user_id = ? AND q.subject IS NOT NULL AND q.chapter IS NOT NULL 
+        WHERE s.user_id = ? AND q.subject IS NOT NULL AND q.chapter IS NOT NULL
     """
     if selected_subject != 'All':
         base_query += " AND q.subject = ? "
         query_params.append(selected_subject)
-    
+
     base_query += " GROUP BY q.chapter"
-    
+
     classified_chapters = conn.execute(base_query, query_params).fetchall()
     classified_chapter_counts = {row['chapter']: row['count'] for row in classified_chapters}
 
     # Combine the topics
     all_topics = set(neetprep_topic_counts.keys()) | set(classified_chapter_counts.keys())
-    
+
     combined_topics = []
     for topic in sorted(list(all_topics)):
         combined_topics.append({
@@ -113,13 +113,30 @@ def index():
             'my_questions_count': classified_chapter_counts.get(topic, 0)
         })
 
+    # Get distinct tags from classified questions for tag-based filtering
+    tag_rows = conn.execute("""
+        SELECT DISTINCT q.tags FROM questions q
+        JOIN sessions s ON q.session_id = s.id
+        WHERE s.user_id = ? AND q.tags IS NOT NULL AND q.tags != ''
+    """, (current_user.id,)).fetchall()
+
+    # Parse comma-separated tags into unique set
+    all_tags = set()
+    for row in tag_rows:
+        if row['tags']:
+            for tag in row['tags'].split(','):
+                tag = tag.strip()
+                if tag:
+                    all_tags.add(tag)
+
     conn.close()
-    return render_template('neetprep.html', 
-                           topics=combined_topics, 
+    return render_template('neetprep.html',
+                           topics=combined_topics,
                            unclassified_count=unclassified_count,
                            available_subjects=AVAILABLE_SUBJECTS,
                            selected_subject=selected_subject,
-                           neetprep_enabled=current_user.neetprep_enabled)
+                           neetprep_enabled=current_user.neetprep_enabled,
+                           available_tags=sorted(list(all_tags)))
 
 @neetprep_bp.route('/neetprep/sync', methods=['POST'])
 @login_required
@@ -314,6 +331,10 @@ def generate_neetprep_pdf():
     topics = json.loads(topics_str) if topics_str and topics_str != '[]' else []
     source_filter = data.get('source', 'all')  # 'all', 'neetprep', or 'classified'
 
+    # Get tag filters
+    tags_str = data.get('tags')
+    filter_tags = json.loads(tags_str) if tags_str and tags_str != '[]' else []
+
     conn = get_db_connection()
     all_questions = []
 
@@ -353,10 +374,21 @@ def generate_neetprep_pdf():
     if include_classified:
         if topics and pdf_type in ['quiz', 'selected']:
             placeholders = ', '.join('?' for _ in topics)
-            classified_questions_from_db = conn.execute(f"""
+            query = f"""
                 SELECT q.* FROM questions q JOIN sessions s ON q.session_id = s.id
                 WHERE q.chapter IN ({placeholders}) AND s.user_id = ?
-            """, (*topics, current_user.id)).fetchall()
+            """
+            params = list(topics) + [current_user.id]
+
+            # Add tag filtering if tags are specified
+            if filter_tags:
+                tag_conditions = []
+                for tag in filter_tags:
+                    tag_conditions.append("q.tags LIKE ?")
+                    params.append(f"%{tag}%")
+                query += f" AND ({' OR '.join(tag_conditions)})"
+
+            classified_questions_from_db = conn.execute(query, params).fetchall()
             for q in classified_questions_from_db:
                 image_info = conn.execute("SELECT processed_filename, note_filename FROM images WHERE id = ?", (q['image_id'],)).fetchone()
                 if image_info and image_info['processed_filename']:

templates/drive_browser.html

@@ -129,6 +129,26 @@
         color: #6c757d;
     }
 
+    .file-icon.slides {
+        background: linear-gradient(135deg, rgba(251,188,5,0.2) 0%, rgba(234,88,12,0.2) 100%);
+        color: #f59e0b;
+    }
+
+    .file-icon.sheet {
+        background: linear-gradient(135deg, rgba(34,197,94,0.2) 0%, rgba(22,163,74,0.2) 100%);
+        color: #22c55e;
+    }
+
+    .file-icon.doc {
+        background: linear-gradient(135deg, rgba(59,130,246,0.2) 0%, rgba(37,99,235,0.2) 100%);
+        color: #3b82f6;
+    }
+
+    .file-icon.video {
+        background: linear-gradient(135deg, rgba(168,85,247,0.2) 0%, rgba(139,92,246,0.2) 100%);
+        color: #a855f7;
+    }
+
     .file-name {
         font-size: 0.9rem;
         font-weight: 500;
@@ -208,6 +228,36 @@
         color: white;
     }
 
+    /* Action buttons for files */
+    .file-actions {
+        display: flex;
+        gap: 4px;
+        flex-shrink: 0;
+    }
+
+    .action-btn-sm {
+        width: 28px;
+        height: 28px;
+        border-radius: 6px;
+        background: rgba(255,255,255,0.1);
+        border: none;
+        color: var(--text-muted);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.2s ease;
+        font-size: 0.85rem;
+    }
+
+    .action-btn-sm:hover {
+        background: var(--accent-primary);
+        color: white;
+    }
+
+    .action-btn-sm.google-btn:hover {
+        background: #4285f4;
+    }
+
     /* Empty State */
     .empty-state {
         text-align: center;
@@ -297,29 +347,74 @@
         {% for item in items %}
         {% if item.type == 'folder' %}
             {% set link = '/drive/api/browse/' + item.path if is_api else '/drive/browse/' + source.id|string + '/' + item.path %}
+            {% set raw_link = '' %}
             {% set icon_class = 'folder' %}
             {% set icon = 'bi-folder-fill' %}
+            {% set google_link = '' %}
         {% elif item.type == 'pdf' %}
             {% set link = '/drive/api/open/' + item.path if is_api else '/drive/file/' + source.id|string + '/' + item.path %}
+            {% set raw_link = '/drive/raw/' + source.id|string + '/' + item.path if not is_api else '' %}
             {% set icon_class = 'pdf' %}
             {% set icon = 'bi-file-earmark-pdf-fill' %}
+            {% set google_link = '' %}
         {% elif item.type == 'image' %}
             {% set link = '/drive/api/open/' + item.path if is_api else '/drive/file/' + source.id|string + '/' + item.path %}
+            {% set raw_link = '/drive/raw/' + source.id|string + '/' + item.path if not is_api else '' %}
             {% set icon_class = 'image' %}
             {% set icon = 'bi-file-earmark-image-fill' %}
+            {% set google_link = '' %}
+        {% elif item.type == 'slides' %}
+            {% set link = '/drive/api/open/' + item.path if is_api else '/drive/file/' + source.id|string + '/' + item.path %}
+            {% set raw_link = '' %}
+            {% set icon_class = 'slides' %}
+            {% set icon = 'bi-file-earmark-slides-fill' %}
+            {% set google_link = 'https://docs.google.com/presentation/d/' + item.path + '/edit' if is_api else '' %}
+        {% elif item.type == 'sheet' %}
+            {% set link = '/drive/api/open/' + item.path if is_api else '/drive/file/' + source.id|string + '/' + item.path %}
+            {% set raw_link = '' %}
+            {% set icon_class = 'sheet' %}
+            {% set icon = 'bi-file-earmark-spreadsheet-fill' %}
+            {% set google_link = 'https://docs.google.com/spreadsheets/d/' + item.path + '/edit' if is_api else '' %}
+        {% elif item.type == 'doc' %}
+            {% set link = '/drive/api/open/' + item.path if is_api else '/drive/file/' + source.id|string + '/' + item.path %}
+            {% set raw_link = '' %}
+            {% set icon_class = 'doc' %}
+            {% set icon = 'bi-file-earmark-word-fill' %}
+            {% set google_link = 'https://docs.google.com/document/d/' + item.path + '/edit' if is_api else '' %}
+        {% elif item.type == 'video' %}
+            {% set link = '/drive/api/open/' + item.path if is_api else '/drive/file/' + source.id|string + '/' + item.path %}
+            {% set raw_link = '' %}
+            {% set icon_class = 'video' %}
+            {% set icon = 'bi-file-earmark-play-fill' %}
+            {% set google_link = '' %}
         {% else %}
             {% set link = '/drive/api/open/' + item.path if is_api else '/drive/file/' + source.id|string + '/' + item.path %}
+            {% set raw_link = '/drive/raw/' + source.id|string + '/' + item.path if not is_api else '' %}
             {% set icon_class = 'file' %}
             {% set icon = 'bi-file-earmark-fill' %}
+            {% set google_link = '' %}
         {% endif %}
 
         <div class="col">
-            <div class="file-card" onclick="navigate('{{ link }}')">
+            <div class="file-card" onclick="navigate('{{ link }}')" data-file-type="{{ item.type }}">
                 <div class="card-body">
                     {% if item.type != 'folder' %}
-                    <button class="copy-btn" onclick="event.stopPropagation(); copyFileLink('{{ link }}', this)" title="Copy link">
-                        <i class="bi bi-link-45deg"></i>
-                    </button>
+                    <div class="file-actions" style="position: absolute; top: 8px; right: 8px; opacity: 0; transition: opacity 0.2s;">
+                        {% if raw_link %}
+                        <button class="action-btn-sm" onclick="event.stopPropagation(); copyFileLink('{{ raw_link }}', this)" title="Copy direct download link">
+                            <i class="bi bi-link-45deg"></i>
+                        </button>
+                        {% elif is_api %}
+                        <button class="action-btn-sm" onclick="event.stopPropagation(); copyFileLink('{{ link }}', this)" title="Copy link">
+                            <i class="bi bi-link-45deg"></i>
+                        </button>
+                        {% endif %}
+                        {% if google_link %}
+                        <a href="{{ google_link }}" target="_blank" class="action-btn-sm google-btn" onclick="event.stopPropagation()" title="Open in Google">
+                            <i class="bi bi-google"></i>
+                        </a>
+                        {% endif %}
+                    </div>
                     {% endif %}
                     <div class="file-icon {{ icon_class }}">
                         <i class="bi {{ icon }}"></i>
@@ -347,20 +442,52 @@
         {% for item in items %}
         {% if item.type == 'folder' %}
             {% set link = '/drive/api/browse/' + item.path if is_api else '/drive/browse/' + source.id|string + '/' + item.path %}
+            {% set raw_link = '' %}
             {% set icon_class = 'folder' %}
             {% set icon = 'bi-folder-fill' %}
+            {% set google_link = '' %}
         {% elif item.type == 'pdf' %}
             {% set link = '/drive/api/open/' + item.path if is_api else '/drive/file/' + source.id|string + '/' + item.path %}
+            {% set raw_link = '/drive/raw/' + source.id|string + '/' + item.path if not is_api else '' %}
             {% set icon_class = 'pdf' %}
             {% set icon = 'bi-file-earmark-pdf-fill' %}
+            {% set google_link = '' %}
         {% elif item.type == 'image' %}
             {% set link = '/drive/api/open/' + item.path if is_api else '/drive/file/' + source.id|string + '/' + item.path %}
+            {% set raw_link = '/drive/raw/' + source.id|string + '/' + item.path if not is_api else '' %}
             {% set icon_class = 'image' %}
             {% set icon = 'bi-file-earmark-image-fill' %}
+            {% set google_link = '' %}
+        {% elif item.type == 'slides' %}
+            {% set link = '/drive/api/open/' + item.path if is_api else '/drive/file/' + source.id|string + '/' + item.path %}
+            {% set raw_link = '' %}
+            {% set icon_class = 'slides' %}
+            {% set icon = 'bi-file-earmark-slides-fill' %}
+            {% set google_link = 'https://docs.google.com/presentation/d/' + item.path + '/edit' if is_api else '' %}
+        {% elif item.type == 'sheet' %}
+            {% set link = '/drive/api/open/' + item.path if is_api else '/drive/file/' + source.id|string + '/' + item.path %}
+            {% set raw_link = '' %}
+            {% set icon_class = 'sheet' %}
+            {% set icon = 'bi-file-earmark-spreadsheet-fill' %}
+            {% set google_link = 'https://docs.google.com/spreadsheets/d/' + item.path + '/edit' if is_api else '' %}
+        {% elif item.type == 'doc' %}
+            {% set link = '/drive/api/open/' + item.path if is_api else '/drive/file/' + source.id|string + '/' + item.path %}
+            {% set raw_link = '' %}
+            {% set icon_class = 'doc' %}
+            {% set icon = 'bi-file-earmark-word-fill' %}
+            {% set google_link = 'https://docs.google.com/document/d/' + item.path + '/edit' if is_api else '' %}
+        {% elif item.type == 'video' %}
+            {% set link = '/drive/api/open/' + item.path if is_api else '/drive/file/' + source.id|string + '/' + item.path %}
+            {% set raw_link = '' %}
+            {% set icon_class = 'video' %}
+            {% set icon = 'bi-file-earmark-play-fill' %}
+            {% set google_link = '' %}
         {% else %}
             {% set link = '/drive/api/open/' + item.path if is_api else '/drive/file/' + source.id|string + '/' + item.path %}
+            {% set raw_link = '/drive/raw/' + source.id|string + '/' + item.path if not is_api else '' %}
             {% set icon_class = 'file' %}
             {% set icon = 'bi-file-earmark-fill' %}
+            {% set google_link = '' %}
         {% endif %}
 
         <div class="file-row" onclick="navigate('{{ link }}')">
@@ -370,9 +497,22 @@
             <div class="file-name">{{ item.name }}</div>
             <span class="badge bg-secondary">{{ item.type }}</span>
             {% if item.type != 'folder' %}
-            <button class="copy-btn" onclick="event.stopPropagation(); copyFileLink('{{ link }}', this)" title="Copy link">
-                <i class="bi bi-link-45deg"></i>
-            </button>
+            <div class="file-actions">
+                {% if raw_link %}
+                <button class="action-btn-sm" onclick="event.stopPropagation(); copyFileLink('{{ raw_link }}', this)" title="Copy direct link">
+                    <i class="bi bi-link-45deg"></i>
+                </button>
+                {% elif is_api %}
+                <button class="action-btn-sm" onclick="event.stopPropagation(); copyFileLink('{{ link }}', this)" title="Copy link">
+                    <i class="bi bi-link-45deg"></i>
+                </button>
+                {% endif %}
+                {% if google_link %}
+                <a href="{{ google_link }}" target="_blank" class="action-btn-sm google-btn" onclick="event.stopPropagation()" title="Open in Google">
+                    <i class="bi bi-google"></i>
+                </a>
+                {% endif %}
+            </div>
             {% endif %}
         </div>
         {% endfor %}
@@ -449,8 +589,10 @@
         const fullUrl = window.location.origin + path;
         navigator.clipboard.writeText(fullUrl).then(() => {
             // Show success state
-            btn.classList.add('copied');
+            const originalHtml = btn.innerHTML;
             btn.innerHTML = '<i class="bi bi-check"></i>';
+            btn.style.background = '#198754';
+            btn.style.color = 'white';
 
             // Show toast
             const toast = document.getElementById('copyToast');
@@ -458,10 +600,20 @@
 
             // Reset button after delay
             setTimeout(() => {
-                btn.classList.remove('copied');
-                btn.innerHTML = '<i class="bi bi-link-45deg"></i>';
+                btn.innerHTML = originalHtml;
+                btn.style.background = '';
+                btn.style.color = '';
             }, 2000);
         });
     }
+
+    // Show action buttons on hover
+    document.querySelectorAll('.file-card').forEach(card => {
+        const actions = card.querySelector('.file-actions');
+        if (actions) {
+            card.addEventListener('mouseenter', () => actions.style.opacity = '1');
+            card.addEventListener('mouseleave', () => actions.style.opacity = '0');
+        }
+    });
 </script>
 {% endblock %}

templates/image_viewer.html

@@ -0,0 +1,252 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, user-scalable=yes">
+    <title>{{ image_title }}</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+    <style>
+        :root {
+            --bg-dark: #0d0d0d;
+            --toolbar-bg: #1a1a1a;
+            --accent: #3b82f6;
+        }
+
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
+            background: var(--bg-dark);
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+            color: #fff;
+        }
+
+        .toolbar {
+            height: 48px;
+            background: var(--toolbar-bg);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0 16px;
+            border-bottom: 1px solid rgba(255,255,255,0.1);
+            flex-shrink: 0;
+        }
+
+        .toolbar-title {
+            font-size: 14px;
+            font-weight: 500;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            max-width: 50%;
+        }
+
+        .toolbar-actions {
+            display: flex;
+            gap: 8px;
+        }
+
+        .toolbar-btn {
+            background: transparent;
+            border: none;
+            color: #999;
+            padding: 8px 12px;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 16px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            transition: all 0.15s ease;
+            text-decoration: none;
+        }
+
+        .toolbar-btn:hover {
+            background: rgba(255,255,255,0.08);
+            color: #fff;
+        }
+
+        .image-container {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+            overflow: auto;
+        }
+
+        .image-container img {
+            max-width: 100%;
+            max-height: 100%;
+            object-fit: contain;
+            border-radius: 4px;
+            box-shadow: 0 4px 20px rgba(0,0,0,0.5);
+            transition: transform 0.3s ease;
+        }
+
+        .image-container img.zoomed {
+            max-width: none;
+            max-height: none;
+            cursor: zoom-out;
+        }
+
+        .zoom-controls {
+            position: fixed;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: var(--toolbar-bg);
+            border-radius: 12px;
+            padding: 8px;
+            display: flex;
+            gap: 4px;
+            border: 1px solid rgba(255,255,255,0.1);
+        }
+
+        .zoom-btn {
+            width: 40px;
+            height: 40px;
+            border: none;
+            background: transparent;
+            color: #999;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 18px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.15s ease;
+        }
+
+        .zoom-btn:hover {
+            background: rgba(255,255,255,0.1);
+            color: #fff;
+        }
+
+        .zoom-level {
+            min-width: 60px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 13px;
+            color: #999;
+        }
+    </style>
+</head>
+<body>
+    <div class="toolbar">
+        <a href="javascript:history.back()" class="toolbar-btn">
+            <i class="bi bi-arrow-left"></i>
+            Back
+        </a>
+        <div class="toolbar-title">{{ image_title }}</div>
+        <div class="toolbar-actions">
+            <a href="{{ image_url }}" download class="toolbar-btn">
+                <i class="bi bi-download"></i>
+            </a>
+            <button class="toolbar-btn" onclick="toggleFullscreen()">
+                <i class="bi bi-arrows-fullscreen"></i>
+            </button>
+        </div>
+    </div>
+
+    <div class="image-container" id="imageContainer">
+        <img src="{{ image_url }}" alt="{{ image_title }}" id="mainImage" onclick="toggleZoom()">
+    </div>
+
+    <div class="zoom-controls">
+        <button class="zoom-btn" onclick="zoomOut()"><i class="bi bi-dash"></i></button>
+        <span class="zoom-level" id="zoomLevel">100%</span>
+        <button class="zoom-btn" onclick="zoomIn()"><i class="bi bi-plus"></i></button>
+        <button class="zoom-btn" onclick="resetZoom()"><i class="bi bi-arrows-angle-contract"></i></button>
+    </div>
+
+    <script>
+        const img = document.getElementById('mainImage');
+        const zoomLevelEl = document.getElementById('zoomLevel');
+        let currentZoom = 1;
+
+        function updateZoom() {
+            img.style.transform = `scale(${currentZoom})`;
+            zoomLevelEl.textContent = Math.round(currentZoom * 100) + '%';
+            if (currentZoom > 1) {
+                img.classList.add('zoomed');
+            } else {
+                img.classList.remove('zoomed');
+            }
+        }
+
+        function zoomIn() {
+            currentZoom = Math.min(currentZoom * 1.25, 5);
+            updateZoom();
+        }
+
+        function zoomOut() {
+            currentZoom = Math.max(currentZoom / 1.25, 0.25);
+            updateZoom();
+        }
+
+        function resetZoom() {
+            currentZoom = 1;
+            updateZoom();
+        }
+
+        function toggleZoom() {
+            if (currentZoom > 1) {
+                resetZoom();
+            } else {
+                currentZoom = 2;
+                updateZoom();
+            }
+        }
+
+        function toggleFullscreen() {
+            if (!document.fullscreenElement) {
+                document.documentElement.requestFullscreen();
+            } else {
+                document.exitFullscreen();
+            }
+        }
+
+        // Keyboard shortcuts
+        document.addEventListener('keydown', (e) => {
+            if (e.key === '+' || e.key === '=') zoomIn();
+            else if (e.key === '-') zoomOut();
+            else if (e.key === '0') resetZoom();
+            else if (e.key === 'Escape') history.back();
+        });
+
+        // Pinch to zoom
+        let initialDistance = 0;
+        let initialZoom = 1;
+
+        document.addEventListener('touchstart', (e) => {
+            if (e.touches.length === 2) {
+                initialDistance = Math.hypot(
+                    e.touches[0].clientX - e.touches[1].clientX,
+                    e.touches[0].clientY - e.touches[1].clientY
+                );
+                initialZoom = currentZoom;
+            }
+        }, { passive: true });
+
+        document.addEventListener('touchmove', (e) => {
+            if (e.touches.length === 2) {
+                const distance = Math.hypot(
+                    e.touches[0].clientX - e.touches[1].clientX,
+                    e.touches[0].clientY - e.touches[1].clientY
+                );
+                const ratio = distance / initialDistance;
+                currentZoom = Math.min(Math.max(initialZoom * ratio, 0.25), 5);
+                updateZoom();
+            }
+        }, { passive: true });
+    </script>
+</body>
+</html>

templates/neetprep.html

@@ -189,6 +189,29 @@
         font-weight: 500;
         color: var(--accent-primary);
     }
+
+    /* Tag chips */
+    .tag-chip {
+        border-radius: 20px;
+        font-size: 0.8rem;
+        padding: 4px 12px;
+        transition: all 0.15s ease;
+    }
+
+    .tag-chip.active {
+        background-color: var(--accent-primary);
+        border-color: var(--accent-primary);
+        color: white;
+    }
+
+    .tag-chip:hover:not(.active) {
+        background-color: rgba(13, 110, 253, 0.15);
+        border-color: var(--accent-primary);
+    }
+
+    .tag-search-container input::placeholder {
+        color: var(--text-muted);
+    }
 </style>
 {% endblock %}
 
@@ -269,6 +292,28 @@
                 </div>
             </div>
 
+            <!-- Tag Filter -->
+            {% if available_tags %}
+            <div class="section-card">
+                <div class="section-title"><i class="bi bi-tags"></i>Filter by Tags</div>
+                <div class="tag-search-container mb-2">
+                    <input type="text" class="form-control form-control-sm" id="tag-search" placeholder="Search tags..." style="background: var(--bg-elevated); border-color: var(--border-subtle); color: #fff;">
+                </div>
+                <div class="tag-chips-container" id="tag-chips" style="max-height: 150px; overflow-y: auto;">
+                    {% for tag in available_tags %}
+                    <button type="button" class="btn btn-outline-secondary btn-sm tag-chip me-1 mb-1" data-tag="{{ tag }}">
+                        {{ tag }}
+                    </button>
+                    {% endfor %}
+                </div>
+                <div class="selected-tags mt-2" id="selected-tags-display" style="display: none;">
+                    <small class="text-muted">Selected: </small>
+                    <span id="selected-tags-list"></span>
+                    <button type="button" class="btn btn-link btn-sm text-danger p-0 ms-2" onclick="clearAllTags()">Clear</button>
+                </div>
+            </div>
+            {% endif %}
+
             <!-- Status Messages -->
             <div id="sync-status"></div>
             <div id="pdf-link-container"></div>
@@ -397,6 +442,56 @@ topicCheckboxes.forEach(cb => {
     cb.addEventListener('change', updateSelectedCount);
 });
 
+// Tag filtering functionality
+const selectedTags = new Set();
+const tagChips = document.querySelectorAll('.tag-chip');
+const tagSearchInput = document.getElementById('tag-search');
+const selectedTagsDisplay = document.getElementById('selected-tags-display');
+const selectedTagsList = document.getElementById('selected-tags-list');
+
+function updateTagsDisplay() {
+    if (selectedTags.size > 0) {
+        selectedTagsDisplay.style.display = 'block';
+        selectedTagsList.textContent = Array.from(selectedTags).join(', ');
+    } else {
+        selectedTagsDisplay.style.display = 'none';
+    }
+}
+
+tagChips.forEach(chip => {
+    chip.addEventListener('click', () => {
+        const tag = chip.dataset.tag;
+        if (selectedTags.has(tag)) {
+            selectedTags.delete(tag);
+            chip.classList.remove('active');
+        } else {
+            selectedTags.add(tag);
+            chip.classList.add('active');
+        }
+        updateTagsDisplay();
+    });
+});
+
+if (tagSearchInput) {
+    tagSearchInput.addEventListener('input', (e) => {
+        const searchTerm = e.target.value.toLowerCase();
+        tagChips.forEach(chip => {
+            const tag = chip.dataset.tag.toLowerCase();
+            if (tag.includes(searchTerm)) {
+                chip.style.display = '';
+            } else {
+                chip.style.display = 'none';
+            }
+        });
+    });
+}
+
+function clearAllTags() {
+    selectedTags.clear();
+    tagChips.forEach(chip => chip.classList.remove('active'));
+    updateTagsDisplay();
+}
+
 // Only attach event listeners if NeetPrep is enabled
 {% if neetprep_enabled %}
 document.getElementById('sync-btn').addEventListener('click', async () => {
@@ -479,6 +574,13 @@ document.getElementById('generate-pdf-form').addEventListener('submit', async (e
         sourceInput.value = sourceFilter;
         form.appendChild(sourceInput);
 
+        // Include selected tags
+        const tagsInput = document.createElement('input');
+        tagsInput.type = 'hidden';
+        tagsInput.name = 'tags';
+        tagsInput.value = JSON.stringify(Array.from(selectedTags));
+        form.appendChild(tagsInput);
+
         document.body.appendChild(form);
         form.submit();
         return;
@@ -487,6 +589,7 @@ document.getElementById('generate-pdf-form').addEventListener('submit', async (e
     let payload = {
         type: pdfType,
         source: sourceFilter,
+        tags: JSON.stringify(Array.from(selectedTags)),
         layout: {
             images_per_page: settings.images_per_page,
             orientation: settings.orientation,

templates/pdfjs_viewer.html

@@ -1,1071 +1,49 @@
 <!DOCTYPE html>
-<html lang="en" dir="ltr">
+<html>
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     <title>{{ pdf_title }}</title>
-    <!-- Bootstrap Icons -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
-    <!-- Inline Styles -->
+    <meta charset="utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <style>
-        /* Mozilla PDF.js Viewer Visual Replication */
-        :root {
-            --sidebar-width: 200px;
-            --toolbar-height: 32px;
-            --body-bg: #525659; /* Classic PDF.js grey background */
-            --toolbar-bg: #2a2a2e; /* Dark Toolbar */
-            --sidebar-bg: #383c40;
-            --text-color: #f1f1f1;
-            --icon-color: #c0c0c0;
-            --icon-hover: #ffffff;
-            --input-bg: #1d1d1f;
-            --separator-color: #555;
-            --toast-bg: #333;
-            --toast-text: #fff;
-        }
-
-        * {
-            box-sizing: border-box;
-            user-select: none;
-            -webkit-user-select: none;
-        }
-
-        body {
-            background-color: var(--body-bg);
-            height: 100vh;
-            width: 100vw;
-            margin: 0;
-            padding: 0;
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-            overflow: hidden;
-            display: flex;
-            flex-direction: column;
-            color: var(--text-color);
-            /* Prevent native pull-to-refresh and other touch behaviors */
-            overscroll-behavior: none; 
-        }
-
-        #outerContainer {
-            width: 100%;
-            height: 100%;
-            display: flex;
-        }
-
-        /* SIDEBAR */
-        #sidebarContainer {
-            width: 0;
-            background-color: var(--sidebar-bg);
-            border-right: 1px solid #000;
-            transition: width 0.2s ease;
-            display: flex;
-            flex-direction: column;
-            overflow: hidden;
-        }
-
-        #sidebarContainer.open {
-            width: var(--sidebar-width);
-        }
-
-        #sidebarContent {
-            flex: 1;
-            overflow-y: auto;
-            padding: 10px;
-            position: relative;
-        }
-
-        #sidebarContent::-webkit-scrollbar { width: 10px; }
-        #sidebarContent::-webkit-scrollbar-track { background: var(--sidebar-bg); }
-        #sidebarContent::-webkit-scrollbar-thumb { background: #666; border-radius: 10px; border: 2px solid var(--sidebar-bg); }
-
-        .thumbnail {
-            margin-bottom: 15px;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            cursor: pointer;
-        }
-
-        .thumbnail-image-container {
-            border: 1px solid transparent;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
-            background: white;
-            transition: border-color 0.2s;
-            position: relative;
-        }
-
-        .thumbnail.selected .thumbnail-image-container {
-            border-color: #63b3ed;
-            box-shadow: 0 0 0 2px rgba(99, 179, 237, 0.4);
-        }
-
-        .thumbnail-canvas {
-            display: block;
-            width: 100px;
-            height: auto;
-        }
-
-        .thumbnail-label {
-            font-size: 11px;
-            margin-top: 4px;
-            color: #aaa;
-        }
-
-        /* MAIN */
-        #mainContainer {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            min-width: 0;
-            position: relative;
-        }
-
-        /* TOOLBAR */
-        .toolbar {
-            height: var(--toolbar-height);
-            background-color: var(--toolbar-bg);
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 0 10px;
-            box-shadow: 0 1px 0 rgba(0,0,0,0.5);
-            z-index: 9999;
-            font-size: 12px;
-        }
-
-        .toolbarGroup {
-            display: flex;
-            align-items: center;
-            gap: 2px;
-        }
-
-        .toolbarButton {
-            background: transparent;
-            border: none;
-            color: var(--icon-color);
-            padding: 4px 8px;
-            border-radius: 2px;
-            cursor: pointer;
-            font-size: 14px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            min-width: 28px;
-        }
-
-        .toolbarButton:hover {
-            background-color: rgba(255,255,255,0.1);
-            color: var(--icon-hover);
-        }
-
-        .toolbarButton.toggled {
-            background-color: rgba(0,0,0,0.3);
-            color: var(--icon-hover);
-            box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
-        }
-
-        .verticalSeparator {
-            width: 1px;
-            height: 16px;
-            background-color: var(--separator-color);
-            margin: 0 6px;
-        }
-
-        .toolbarField {
-            background-color: var(--input-bg);
-            border: 1px solid transparent;
-            color: var(--text-color);
-            padding: 2px 6px;
-            border-radius: 2px;
-            font-size: 12px;
-            text-align: center;
-            outline: none;
-        }
-
-        .toolbarField:focus {
-            background-color: #000;
-            border-color: #63b3ed;
-        }
-
-        .pageNumber { width: 40px; }
-        .toolbarLabel { color: var(--icon-color); margin: 0 5px; }
-
-        /* VIEWER AREA */
-        #viewerContainer {
-            flex: 1;
-            overflow: auto;
-            position: absolute;
-            top: var(--toolbar-height);
-            right: 0; bottom: 0; left: 0;
-            background-color: var(--body-bg);
-            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=');
-            /* Important for touch handling */
-            touch-action: pan-x pan-y;
-            -webkit-overflow-scrolling: touch;
-        }
-
-        #viewerContainer::-webkit-scrollbar { width: 14px; height: 14px; }
-        #viewerContainer::-webkit-scrollbar-track { background: var(--body-bg); border-left: 1px solid rgba(255,255,255,0.1); }
-        #viewerContainer::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border: 3px solid transparent; background-clip: content-box; border-radius: 8px; }
-        #viewerContainer::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,0.3); }
-
-        #viewer {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            padding: 20px 0;
-            position: relative;
-            /* Enhance hardware acceleration for smoother pinch */
-            will-change: transform;
-            transform-origin: top center;
-        }
-
-        .page {
-            direction: ltr;
-            margin: 1px auto 10px auto;
-            position: relative;
-            overflow: hidden;
-            background-color: white;
-            box-shadow: 0px 4px 6px rgba(0,0,0,0.3); 
-            border: 9px solid transparent;
-            background-clip: content-box;
-        }
-
-        .page canvas {
-            display: block;
-            width: 100%;
-            height: 100%;
-        }
-
-        /* LOADERS */
-        #loadingBar {
-            position: relative; width: 100%; height: 4px;
-            background: #333; border-bottom: 1px solid #000; display: none;
-        }
-        #loadingBar .bar {
-            position: absolute; top: 0; left: 0; height: 100%;
-            background-color: #63b3ed; width: 0%; transition: width 0.2s;
-        }
-
-        /* TOAST NOTIFICATION */
-        .toast-container {
-            position: fixed;
-            bottom: 20px;
-            right: 20px;
-            z-index: 10000;
-        }
-        
-        .toast {
-            background-color: #2b3035;
-            color: #fff;
-            border-radius: 0.375rem;
-            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
-            min-width: 250px;
-            max-width: 350px;
-            font-size: 0.875rem;
-            opacity: 0;
-            transform: translateY(100%);
-            transition: all 0.3s ease-in-out;
-            pointer-events: none;
-            border: 1px solid rgba(255,255,255,0.1);
-        }
-
-        .toast.show {
-            opacity: 1;
-            transform: translateY(0);
-            pointer-events: auto;
-        }
-
-        .toast-header {
-            display: flex;
-            align-items: center;
-            padding: 0.5rem 0.75rem;
-            color: #fff;
-            background-color: rgba(255, 255, 255, 0.05);
-            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-            border-top-left-radius: calc(0.375rem - 1px);
-            border-top-right-radius: calc(0.375rem - 1px);
-        }
-
-        .toast-body {
-            padding: 0.75rem;
-            word-wrap: break-word;
-        }
-
-        .btn-close-white {
-            background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
-            border: 0;
-            opacity: 0.5;
-            padding: 0.5rem;
-            margin-left: auto;
-            cursor: pointer;
-            width: 1em;
-            height: 1em;
-        }
-        
-        .btn-close-white:hover { opacity: 0.75; }
-
-        @media (max-width: 600px) {
-            .hiddenSmall { display: none; }
-            :root { --sidebar-width: 180px; }
-        }
-        
-        @media print {
-            .toolbar, #sidebarContainer, #loadingBar { display: none; }
-            #viewerContainer { position: static; overflow: visible; background: none; }
-            .page { margin: 0; box-shadow: none; border: none; page-break-after: always; }
-        }
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        html, body { height: 100%; background: #1a1a1a; }
+        #adobe-dc-view { height: 100%; width: 100%; }
     </style>
 </head>
 <body>
-
-    <div id="outerContainer">
-        <!-- SIDEBAR -->
-        <div id="sidebarContainer">
-            <div id="sidebarContent"></div>
-        </div>
-
-        <!-- MAIN -->
-        <div id="mainContainer">
-            <!-- TOOLBAR -->
-            <div class="toolbar">
-                <div class="toolbarGroup">
-                    <button id="sidebarToggle" class="toolbarButton" title="Toggle Sidebar">
-                        <i class="bi bi-layout-sidebar"></i>
-                    </button>
-                    <div class="verticalSeparator"></div>
-                    <button id="prev" class="toolbarButton" title="Previous Page">
-                        <i class="bi bi-chevron-up"></i>
-                    </button>
-                    <button id="next" class="toolbarButton" title="Next Page">
-                        <i class="bi bi-chevron-down"></i>
-                    </button>
-                    <input type="number" id="pageNumber" class="toolbarField pageNumber" value="1" min="1">
-                    <span id="numPages" class="toolbarLabel">of --</span>
-                </div>
-
-                <div class="toolbarGroup">
-                    <button id="zoomOut" class="toolbarButton" title="Zoom Out">
-                        <i class="bi bi-dash"></i>
-                    </button>
-                    <button id="zoomIn" class="toolbarButton" title="Zoom In">
-                        <i class="bi bi-plus"></i>
-                    </button>
-                    <select id="scaleSelect" class="toolbarField">
-                        <option value="page-actual">Actual Size</option>
-                        <option value="page-fit">Page Fit</option>
-                        <option value="page-width">Page Width</option>
-                        <option value="0.5">50%</option>
-                        <option value="0.75">75%</option>
-                        <option value="1">100%</option>
-                        <option value="1.25">125%</option>
-                        <option value="1.5">150%</option>
-                        <option value="2">200%</option>
-                    </select>
-                </div>
-
-                <div class="toolbarGroup hiddenSmall">
-                    <button id="print" class="toolbarButton" title="Print">
-                        <i class="bi bi-printer"></i>
-                    </button>
-                    <button id="download" class="toolbarButton" title="Download">
-                        <i class="bi bi-download"></i>
-                    </button>
-                </div>
-            </div>
-
-            <!-- LOADING BAR -->
-            <div id="loadingBar"><div class="bar" id="progressBar"></div></div>
-
-            <!-- VIEWER AREA -->
-            <div id="viewerContainer">
-                <div id="viewer" class="pdfViewer"></div>
-            </div>
-        </div>
-    </div>
-
-    <!-- TOAST CONTAINER -->
-    <div class="toast-container">
-        <div id="cacheToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
-            <div class="toast-header">
-                <i class="bi bi-hdd-fill me-2" style="margin-right: 8px;"></i>
-                <strong style="margin-right: auto;">System</strong>
-                <button type="button" class="btn-close-white" onclick="hideToast()" aria-label="Close"></button>
-            </div>
-            <div class="toast-body">
-                File loaded from local cache.
-            </div>
-        </div>
-    </div>
-
-    <!-- LOAD PDF.JS BEFORE MAIN SCRIPT -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
-    
-    <script>
-        // Check if PDF.js loaded correctly
-        if (typeof pdfjsLib === 'undefined') {
-            alert("Error: PDF.js library failed to load. Please check your internet connection.");
-        } else {
-            // Set worker source
-            pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
-        }
-
-        const config = {
-            url: "{{ pdf_url }}",
-            scale: 1.25,
-            currentScaleValue: '1.25',
-            pdfIdentifier: "{{ pdf_url }}".split('/').pop() // Use filename as identifier
-        };
-
-        const state = {
-            pdfDoc: null,
-            pageNum: 1,
-            pages: [],
-            thumbnailsRendered: false
-        };
-
-        // ==========================================
-        // PAGE POSITION MEMORY
-        // ==========================================
-        const PageMemory = {
-            storageKey: 'pdf_last_pages',
-            
-            getLastPage(pdfId) {
-                try {
-                    const data = localStorage.getItem(this.storageKey);
-                    if (data) {
-                        const pages = JSON.parse(data);
-                        return pages[pdfId] || 1;
-                    }
-                } catch (e) {
-                    console.error('Error reading last page:', e);
-                }
-                return 1;
-            },
-            
-            saveLastPage(pdfId, pageNum) {
-                try {
-                    const data = localStorage.getItem(this.storageKey);
-                    const pages = data ? JSON.parse(data) : {};
-                    pages[pdfId] = pageNum;
-                    localStorage.setItem(this.storageKey, JSON.stringify(pages));
-                } catch (e) {
-                    console.error('Error saving last page:', e);
-                }
-            }
-        };
-
-        // DOM Elements Collection
-        const elements = {
-            container: document.getElementById('viewerContainer'),
-            viewer: document.getElementById('viewer'),
-            prev: document.getElementById('prev'),
-            next: document.getElementById('next'),
-            pageNum: document.getElementById('pageNumber'),
-            pageCount: document.getElementById('numPages'),
-            zoomIn: document.getElementById('zoomIn'),
-            zoomOut: document.getElementById('zoomOut'),
-            scaleSelect: document.getElementById('scaleSelect'),
-            sidebarToggle: document.getElementById('sidebarToggle'),
-            sidebar: document.getElementById('sidebarContainer'),
-            sidebarContent: document.getElementById('sidebarContent'),
-            loadingBar: document.getElementById('loadingBar'),
-            progressBar: document.getElementById('progressBar'),
-            print: document.getElementById('print'),
-            download: document.getElementById('download'),
-            toast: document.getElementById('cacheToast')
-        };
-
-        // ==========================================
-        // PINCH TO ZOOM MODULE
-        // ==========================================
-        const PinchZoom = {
-            state: {
-                active: false,
-                startDist: 0,
-                startScale: 1,
-                lastRatio: 1
-            },
-
-            init() {
-                // Attach listeners to the container to capture gestures anywhere on the viewer
-                elements.container.addEventListener('touchstart', this.onStart.bind(this), { passive: false });
-                elements.container.addEventListener('touchmove', this.onMove.bind(this), { passive: false });
-                elements.container.addEventListener('touchend', this.onEnd.bind(this));
-            },
-
-            getDistance(e) {
-                return Math.hypot(
-                    e.touches[0].clientX - e.touches[1].clientX,
-                    e.touches[0].clientY - e.touches[1].clientY
-                );
-            },
-            
-            getCenter(e) {
-                return {
-                    x: (e.touches[0].clientX + e.touches[1].clientX) / 2,
-                    y: (e.touches[0].clientY + e.touches[1].clientY) / 2
-                };
-            },
-
-            onStart(e) {
-                if (e.touches.length === 2) {
-                    e.preventDefault(); // Prevent native browser zoom/pan
-                    this.state.active = true;
-                    this.state.startDist = this.getDistance(e);
-                    this.state.startScale = config.scale;
-                    this.state.lastRatio = 1;
-
-                    // Calculate transform origin based on finger position relative to viewer
-                    const center = this.getCenter(e);
-                    const rect = elements.viewer.getBoundingClientRect();
-                    
-                    // The viewer might be scrolled, getBoundingClientRect handles that
-                    const originX = center.x - rect.left;
-                    const originY = center.y - rect.top;
-
-                    // Set transform origin so we zoom into the space between fingers
-                    elements.viewer.style.transformOrigin = `${originX}px ${originY}px`;
-                    elements.viewer.style.transition = 'none';
-                }
-            },
-
-            onMove(e) {
-                if (this.state.active && e.touches.length === 2) {
-                    e.preventDefault();
-                    const dist = this.getDistance(e);
-                    const ratio = dist / this.state.startDist;
-                    this.state.lastRatio = ratio;
-
-                    // Apply temporary visual scale using CSS transform
-                    // This is performant (60fps) compared to re-rendering canvas
-                    elements.viewer.style.transform = `scale(${ratio})`;
-                }
-            },
-
-            onEnd(e) {
-                if (this.state.active && e.touches.length < 2) {
-                    this.state.active = false;
-
-                    // Calculate new final scale
-                    let newScale = this.state.startScale * this.state.lastRatio;
-
-                    // Clamp scale to reasonable limits (0.25x to 5.0x)
-                    newScale = Math.max(0.25, Math.min(newScale, 5.0));
-
-                    // Reset CSS transform
-                    elements.viewer.style.transform = 'none';
-                    elements.viewer.style.transformOrigin = 'center top';
-
-                    // Apply new scale to config
-                    config.scale = newScale;
-                    config.currentScaleValue = newScale.toString();
-
-                    // Update UI Dropdown
-                    this.updateScaleDropdown(newScale);
-
-                    // Re-render PDF at new resolution (crisp text)
-                    initViewer();
-                }
-            },
-
-            updateScaleDropdown(scaleVal) {
-                // Check if value exists in dropdown
-                const rounded = Math.round(scaleVal * 100) / 100;
-                let exists = false;
-                
-                // Try to find exact match
-                for(let option of elements.scaleSelect.options) {
-                    if (Math.abs(parseFloat(option.value) - scaleVal) < 0.05) {
-                        elements.scaleSelect.value = option.value;
-                        exists = true;
-                        break;
-                    }
-                }
-
-                // If no match, add custom option
-                if (!exists) {
-                    const opt = document.createElement('option');
-                    opt.value = scaleVal;
-                    opt.textContent = `${Math.round(scaleVal * 100)}%`;
-                    elements.scaleSelect.appendChild(opt);
-                    elements.scaleSelect.value = scaleVal;
-                }
-            }
-        };
-
-        // ==========================================
-        // INDEXED DB CACHE
-        // ==========================================
-        const PDFCache = {
-            dbName: 'PDFViewerCache',
-            storeName: 'pdfs',
-            MAX_TOTAL_SIZE: 100 * 1024 * 1024, // 100MB limit
-            
-            async open() {
-                return new Promise((resolve, reject) => {
-                    const request = indexedDB.open(this.dbName, 1);
-                    request.onerror = () => reject(request.error);
-                    request.onsuccess = () => resolve(request.result);
-                    request.onupgradeneeded = (e) => {
-                        const db = e.target.result;
-                        if (!db.objectStoreNames.contains(this.storeName)) {
-                            db.createObjectStore(this.storeName);
-                        }
-                    };
-                });
-            },
-            
-            async get(url) {
-                try {
-                    const db = await this.open();
-                    const record = await new Promise((resolve, reject) => {
-                        const tx = db.transaction(this.storeName, 'readonly');
-                        const req = tx.objectStore(this.storeName).get(url);
-                        req.onerror = () => reject(req.error);
-                        req.onsuccess = () => resolve(req.result);
-                    });
-
-                    if (!record) return null;
-
-                    const data = record.data || record;
-                    if (record.data) {
-                        this.touch(url, record);
-                    }
-                    return data;
-                } catch (err) {
-                    console.warn('PDFCache get error:', err);
-                    return null;
-                }
-            },
-
-            async touch(url, record) {
-                try {
-                    const db = await this.open();
-                    const tx = db.transaction(this.storeName, 'readwrite');
-                    record.timestamp = Date.now();
-                    tx.objectStore(this.storeName).put(record, url);
-                } catch(e) {}
-            },
-            
-            async put(url, data) {
-                try {
-                    const newSize = data.byteLength;
-                    const db = await this.open();
-                    const tx = db.transaction(this.storeName, 'readwrite');
-                    const store = tx.objectStore(this.storeName);
-
-                    let currentSize = 0;
-                    const entries = [];
-
-                    await new Promise((resolve) => {
-                        const req = store.openCursor();
-                        req.onsuccess = (e) => {
-                            const cursor = e.target.result;
-                            if (cursor) {
-                                if (cursor.key !== url) {
-                                    const val = cursor.value;
-                                    const itemSize = (val.data || val).byteLength || 0;
-                                    const itemTime = val.timestamp || 0;
-                                    currentSize += itemSize;
-                                    entries.push({ key: cursor.key, size: itemSize, timestamp: itemTime });
-                                }
-                                cursor.continue();
-                            } else {
-                                resolve();
-                            }
-                        };
-                        req.onerror = () => resolve();
+    <div id="adobe-dc-view"></div>
+    <script src="https://acrobatservices.adobe.com/view-sdk/viewer.js"></script>
+    <script type="text/javascript">
+        document.addEventListener("adobe_dc_view_sdk.ready", function() {
+            var adobeDCView = new AdobeDC.View({
+                clientId: "13f2edf18b654344bbc7e4d7b2583d4a",
+                divId: "adobe-dc-view"
+            });
+
+            // Fetch PDF and pass as ArrayBuffer
+            fetch("{{ pdf_url }}", { credentials: 'include' })
+                .then(response => response.arrayBuffer())
+                .then(buffer => {
+                    adobeDCView.previewFile({
+                        content: { promise: Promise.resolve(buffer) },
+                        metaData: { fileName: "{{ pdf_title }}" }
+                    }, {
+                        embedMode: "FULL_WINDOW",
+                        showAnnotationTools: false,
+                        showDownloadPDF: true,
+                        showPrintPDF: true
                     });
-
-                    if (currentSize + newSize > this.MAX_TOTAL_SIZE) {
-                        entries.sort((a, b) => a.timestamp - b.timestamp);
-                        while (entries.length > 0 && (currentSize + newSize > this.MAX_TOTAL_SIZE)) {
-                            const entry = entries.shift();
-                            store.delete(entry.key);
-                            currentSize -= entry.size;
-                            console.log(`[PDFCache] Evicting ${entry.key} to free space.`);
-                        }
-                    }
-
-                    const record = { data: data, timestamp: Date.now() };
-                    store.put(record, url);
-
-                    return new Promise((resolve) => {
-                        tx.oncomplete = () => resolve();
-                        tx.onerror = () => resolve();
-                    });
-
-                } catch (err) {
-                    console.warn('PDFCache put error:', err);
-                }
-            }
-        };
-
-        function showToast() {
-            elements.toast.classList.add('show');
-            setTimeout(hideToast, 4000);
-        }
-
-        function hideToast() {
-            elements.toast.classList.remove('show');
-        }
-
-        window.hideToast = hideToast;
-
-        // ==========================================
-        // LOADING
-        // ==========================================
-
-        async function loadPDF() {
-            if (typeof pdfjsLib === 'undefined') return;
-
-            elements.loadingBar.style.display = 'block';
-            elements.progressBar.style.width = '10%';
-
-            try {
-                let data = await PDFCache.get(config.url);
-                let isCached = !!data;
-
-                if (isCached) {
-                    showToast();
-                }
-
-                const params = {
-                    cMapUrl: 'https://cdn.jsdelivr.net/npm/pdf.js@3.11.174/dist/cmaps/',
-                    cMapPacked: true,
-                    standardFontDataUrl: 'https://cdn.jsdelivr.net/npm/pdf.js@3.11.174/dist/standard_fonts/'
-                };
-
-                if (data) {
-                    params.data = data;
-                } else {
-                    params.url = config.url;
-                }
-
-                const loadingTask = pdfjsLib.getDocument(params);
-                
-                loadingTask.onProgress = (p) => {
-                    const percent = Math.round((p.loaded / p.total) * 100);
-                    elements.progressBar.style.width = `${percent}%`;
-                };
-
-                state.pdfDoc = await loadingTask.promise;
-
-                if (!isCached) {
-                    state.pdfDoc.getData().then(pdfData => {
-                        if (pdfData.byteLength <= 100 * 1024 * 1024) {
-                            PDFCache.put(config.url, pdfData);
-                        } else {
-                            console.warn("PDF too large to cache (>100MB)");
-                        }
-                    }).catch(err => console.warn("Caching failed", err));
-                }
-                
-                elements.pageCount.textContent = 'of ' + state.pdfDoc.numPages;
-                elements.pageNum.max = state.pdfDoc.numPages;
-                
-                elements.progressBar.style.width = '100%';
-                setTimeout(() => elements.loadingBar.style.display = 'none', 300);
-
-                initViewer();
-            } catch (error) {
-                console.error('Error loading PDF:', error);
-                elements.progressBar.style.background = '#ef4444';
-                alert('Error loading PDF: ' + error.message);
-            }
-        }
-
-        function initViewer() {
-            elements.viewer.innerHTML = '';
-            state.pages = [];
-            
-            // Get last viewed page for this PDF to restore scroll position
-            // If just loaded, use storage. If zoomed, use current state.pageNum
-            const lastPage = state.pageNum > 1 ? state.pageNum : PageMemory.getLastPage(config.pdfIdentifier);
-
-            for (let i = 1; i <= state.pdfDoc.numPages; i++) {
-                const pageDiv = document.createElement('div');
-                pageDiv.className = 'page';
-                pageDiv.setAttribute('data-page-number', i);
-                pageDiv.id = `pageContainer${i}`;
-                
-                // Initial size guess (letter) until rendered
-                pageDiv.style.width = '612px'; 
-                pageDiv.style.height = '792px';
-
-                elements.viewer.appendChild(pageDiv);
-                state.pages.push(pageDiv);
-            }
-
-            setupIntersectionObserver();
-            
-            if (!state.thumbnailsRendered) {
-                generateThumbnails();
-                state.thumbnailsRendered = true;
-            }
-            
-            // Restore scroll position
-            if (lastPage > 1) {
-                setTimeout(() => scrollToPage(lastPage), 100);
-            }
-        }
-
-        function setupIntersectionObserver() {
-            const observerOptions = {
-                root: elements.container,
-                rootMargin: '500px', 
-                threshold: 0
-            };
-
-            const observer = new IntersectionObserver((entries) => {
-                entries.forEach(entry => {
-                    if (entry.isIntersecting) {
-                        const pageDiv = entry.target;
-                        const pageNum = parseInt(pageDiv.getAttribute('data-page-number'));
-                        
-                        if (!pageDiv.getAttribute('data-loaded')) {
-                            renderPage(pageNum, pageDiv);
-                        }
-                    }
-                });
-            }, observerOptions);
-
-            state.pages.forEach(page => observer.observe(page));
-
-            const scrollObserver = new IntersectionObserver((entries) => {
-                entries.forEach(entry => {
-                    if (entry.isIntersecting && entry.intersectionRatio > 0.5) {
-                        const pageNum = parseInt(entry.target.getAttribute('data-page-number'));
-                        updateUIState(pageNum);
-                        PageMemory.saveLastPage(config.pdfIdentifier, pageNum);
-                    }
+                })
+                .catch(err => {
+                    console.error("Fetch error:", err);
+                    // Fallback to URL
+                    adobeDCView.previewFile({
+                        content: { location: { url: window.location.origin + "{{ pdf_url }}" } },
+                        metaData: { fileName: "{{ pdf_title }}" }
+                    }, { showAnnotationTools: false });
                 });
-            }, { root: elements.container, threshold: 0.5 });
-            
-            state.pages.forEach(page => scrollObserver.observe(page));
-        }
-
-        async function renderPage(num, container) {
-            container.setAttribute('data-loaded', 'true');
-            
-            try {
-                const page = await state.pdfDoc.getPage(num);
-                
-                let scale = config.scale;
-                const viewport = page.getViewport({ scale: 1 });
-                
-                if (config.currentScaleValue === 'page-width') {
-                    const containerWidth = elements.container.clientWidth - 40;
-                    scale = containerWidth / viewport.width;
-                } else if (config.currentScaleValue === 'page-fit') {
-                    const containerHeight = elements.container.clientHeight - 40;
-                    const containerWidth = elements.container.clientWidth - 40;
-                    const scaleH = containerHeight / viewport.height;
-                    const scaleW = containerWidth / viewport.width;
-                    scale = Math.min(scaleH, scaleW);
-                }
-
-                const scaledViewport = page.getViewport({ scale: scale });
-
-                container.style.width = `${scaledViewport.width}px`;
-                container.style.height = `${scaledViewport.height}px`;
-
-                const canvas = document.createElement('canvas');
-                const context = canvas.getContext('2d');
-                canvas.height = scaledViewport.height;
-                canvas.width = scaledViewport.width;
-
-                container.appendChild(canvas);
-
-                await page.render({
-                    canvasContext: context,
-                    viewport: scaledViewport
-                }).promise;
-
-            } catch (e) {
-                console.error(e);
-            }
-        }
-
-        // ==========================================
-        // THUMBNAILS
-        // ==========================================
-        async function generateThumbnails() {
-            elements.sidebarContent.innerHTML = '';
-            
-            for (let i = 1; i <= state.pdfDoc.numPages; i++) {
-                const thumbContainer = document.createElement('div');
-                thumbContainer.className = 'thumbnail';
-                thumbContainer.id = `thumbnail-${i}`;
-                thumbContainer.onclick = () => scrollToPage(i);
-
-                const imgContainer = document.createElement('div');
-                imgContainer.className = 'thumbnail-image-container';
-                imgContainer.id = `thumb-img-${i}`;
-                
-                imgContainer.style.width = '100px'; 
-                imgContainer.style.height = '130px'; 
-                
-                const label = document.createElement('div');
-                label.className = 'thumbnail-label';
-                label.textContent = i;
-
-                thumbContainer.appendChild(imgContainer);
-                thumbContainer.appendChild(label);
-                elements.sidebarContent.appendChild(thumbContainer);
-            }
-
-            renderThumbnailsQueue();
-        }
-
-        async function renderThumbnailsQueue() {
-             for (let i = 1; i <= state.pdfDoc.numPages; i++) {
-                 await renderSingleThumbnail(i);
-             }
-        }
-
-        async function renderSingleThumbnail(i) {
-            try {
-                const page = await state.pdfDoc.getPage(i);
-                const viewport = page.getViewport({ scale: 0.2 });
-                const canvas = document.createElement('canvas');
-                canvas.className = 'thumbnail-canvas';
-                canvas.height = viewport.height;
-                canvas.width = viewport.width;
-
-                const context = canvas.getContext('2d');
-                await page.render({
-                    canvasContext: context,
-                    viewport: viewport
-                }).promise;
-
-                const container = document.getElementById(`thumb-img-${i}`);
-                if (container) {
-                    container.innerHTML = '';
-                    container.style.width = 'auto';
-                    container.style.height = 'auto';
-                    container.appendChild(canvas);
-                }
-            } catch(e) { console.warn("Thumb render error", e); }
-        }
-
-        function scrollToPage(num) {
-            if (num < 1 || num > state.pdfDoc.numPages) return;
-            const pageDiv = document.getElementById(`pageContainer${num}`);
-            if (pageDiv) {
-                elements.container.scrollTop = pageDiv.offsetTop;
-            }
-        }
-
-        function updateUIState(pageNum) {
-            if (state.pageNum === pageNum) return;
-            state.pageNum = pageNum;
-            elements.pageNum.value = pageNum;
-            
-            document.querySelectorAll('.thumbnail').forEach(t => t.classList.remove('selected'));
-            const thumb = document.getElementById(`thumbnail-${pageNum}`);
-            if (thumb) {
-                thumb.classList.add('selected');
-                
-                const thumbTop = thumb.offsetTop;
-                const thumbHeight = thumb.clientHeight;
-                const containerHeight = elements.sidebarContent.clientHeight;
-                const containerScroll = elements.sidebarContent.scrollTop;
-
-                if (thumbTop < containerScroll) {
-                    elements.sidebarContent.scrollTop = thumbTop - 10;
-                } 
-                else if (thumbTop + thumbHeight > containerScroll + containerHeight) {
-                    elements.sidebarContent.scrollTop = thumbTop + thumbHeight - containerHeight + 10;
-                }
-            }
-        }
-
-        function changeScale(newScaleVal) {
-            config.currentScaleValue = newScaleVal;
-            if (!isNaN(parseFloat(newScaleVal))) {
-                config.scale = parseFloat(newScaleVal);
-            }
-            initViewer();
-        }
-
-        // Event Listeners
-        if (elements.prev) elements.prev.addEventListener('click', () => scrollToPage(state.pageNum - 1));
-        if (elements.next) elements.next.addEventListener('click', () => scrollToPage(state.pageNum + 1));
-        
-        if (elements.pageNum) elements.pageNum.addEventListener('change', (e) => {
-            let num = parseInt(e.target.value);
-            if (num >= 1 && num <= state.pdfDoc.numPages) {
-                scrollToPage(num);
-            }
-        });
-
-        if (elements.sidebarToggle) elements.sidebarToggle.addEventListener('click', () => {
-            elements.sidebar.classList.toggle('open');
-            elements.sidebarToggle.classList.toggle('toggled');
-        });
-
-        if (elements.zoomIn) elements.zoomIn.addEventListener('click', () => {
-            let current = parseFloat(elements.scaleSelect.value);
-            if(isNaN(current)) current = config.scale;
-            const newScale = (Math.floor(current * 4) + 1) / 4; // Step to next 0.25 increment
-            
-            // Check if current was page-fit or similar
-            if(isNaN(parseFloat(elements.scaleSelect.value))) {
-                config.scale = config.scale + 0.25;
-            } else {
-                config.scale = newScale;
-            }
-
-            config.currentScaleValue = config.scale.toString();
-            
-            // Sync Dropdown
-            PinchZoom.updateScaleDropdown(config.scale);
-            initViewer();
-        });
-
-        if (elements.zoomOut) elements.zoomOut.addEventListener('click', () => {
-             if (config.scale <= 0.25) return;
-             
-             let current = parseFloat(elements.scaleSelect.value);
-             if(isNaN(current)) current = config.scale;
-             const newScale = (Math.ceil(current * 4) - 1) / 4; // Step to prev 0.25 increment
-             
-             if(isNaN(parseFloat(elements.scaleSelect.value))) {
-                 config.scale = Math.max(0.25, config.scale - 0.25);
-             } else {
-                 config.scale = Math.max(0.25, newScale);
-             }
-
-             config.currentScaleValue = config.scale.toString();
-             
-             // Sync Dropdown
-             PinchZoom.updateScaleDropdown(config.scale);
-             initViewer();
-        });
-
-        if (elements.scaleSelect) elements.scaleSelect.addEventListener('change', (e) => {
-            changeScale(e.target.value);
-        });
-
-        if (elements.print) elements.print.addEventListener('click', () => window.print());
-
-        if (elements.download) elements.download.addEventListener('click', () => {
-            const link = document.createElement('a');
-            link.href = config.url;
-            link.download = "document.pdf";
-            link.click();
         });
-
-        // Initialize Pinch Zoom
-        PinchZoom.init();
-
-        // Start loading
-        if (typeof pdfjsLib !== 'undefined') {
-            loadPDF();
-        } else {
-            window.addEventListener('load', loadPDF);
-        }
     </script>
 </body>
-</html> 
+</html>