Bookmarking System

<!-- Quick Access Toolbar -->
<div class="quick-access-toolbar">
    <div class="toolbar-section">
        <h4>Quick Access</h4>
        <div class="quick-bookmarks">
            <div class="quick-bookmark" onclick="openBookmark(1)">
                <div class="bookmark-icon">📊</div>
                <div class="bookmark-info">
                    <div class="bookmark-title">Quantitative Formulas</div>
                    <div class="bookmark-url">/quantitative/aptitude/formulas</div>
                </div>
            </div>

            <div class="quick-bookmark" onclick="openBookmark(2)">
                <div class="bookmark-icon">🧩</div>
                <div class="bookmark-info">
                    <div class="bookmark-title">Reasoning Tips</div>
                    <div class="bookmark-url">/reasoning/tips-tricks</div>
                </div>
            </div>

            <div class="quick-bookmark" onclick="openBookmark(3)">
                <div class="bookmark-icon">📝</div>
                <div class="bookmark-info">
                    <div class="bookmark-title">English Grammar</div>
                    <div class="bookmark-url">/english/grammar-rules</div>
                </div>
            </div>

            <div class="quick-bookmark" onclick="openBookmark(4)">
                <div class="bookmark-icon">🏦</div>
                <div class="bookmark-info">
                    <div class="bookmark-title">Banking Awareness</div>
                    <div class="bookmark-url">/awareness/banking-terms</div>
                </div>
            </div>

            <div class="quick-bookmark add-new" onclick="createBookmark()">
                <div class="bookmark-icon">➕</div>
                <div class="bookmark-info">
                    <div class="bookmark-title">Add Bookmark</div>
                    <div class="bookmark-url">Create new</div>
                </div>
            </div>
        </div>
    </div>

    <div class="toolbar-section">
        <h4>Recent Bookmarks</h4>
        <div class="recent-list">
            <div class="recent-item" onclick="openBookmark(5)">
                <span class="recent-title">Time & Work Problems</span>
                <span class="recent-time">5 min ago</span>
            </div>
            <div class="recent-item" onclick="openBookmark(6)">
                <span class="recent-title">Blood Relations Diagram</span>
                <span class="recent-time">1 hour ago</span>
            </div>
            <div class="recent-item" onclick="openBookmark(7)">
                <span class="recent-title">Reading Comprehension Strategy</span>
                <span class="recent-time">2 hours ago</span>
            </div>
            <div class="recent-item" onclick="openBookmark(8)">
                <span class="recent-title">Current Affairs Update</span>
                <span class="recent-time">3 hours ago</span>
            </div>
        </div>
    </div>
</div>

<!-- Search and Filter -->
<div class="search-filter-section">
    <div class="search-bar">
        <div class="search-input-wrapper">
            <span class="search-icon">🔍</span>
            <input type="text" placeholder="Search bookmarks by title, tag, or content..." id="bookmarkSearch" onkeyup="searchBookmarks()">
            <button class="clear-search" onclick="clearSearch()">×</button>
        </div>
    </div>

    <div class="filter-controls">
        <div class="filter-group">
            <label>Collection:</label>
            <select id="collectionFilter" onchange="filterBookmarks()">
                <option value="">All Collections</option>
                <option value="quantitative">Quantitative</option>
                <option value="reasoning">Reasoning</option>
                <option value="english">English</option>
                <option value="awareness">Awareness</option>
                <option value="practice">Practice Tests</option>
                <option value="formulas">Formulas</option>
            </select>
        </div>

        <div class="filter-group">
            <label>Tags:</label>
            <select id="tagFilter" onchange="filterBookmarks()">
                <option value="">All Tags</option>
                <option value="important">Important</option>
                <option value="formulas">Formulas</option>
                <option value="tips">Tips</option>
                <option value="strategies">Strategies</option>
                <option value="practice">Practice</option>
            </select>
        </div>

        <div class="filter-group">
            <label>Sort:</label>
            <select id="sortFilter" onchange="sortBookmarks()">
                <option value="recent">Most Recent</option>
                <option value="alphabetical">Alphabetical</option>
                <option value="favorites">Favorites First</option>
                <option value="most-visited">Most Visited</option>
            </select>
        </div>

        <div class="filter-group">
            <label>View:</label>
            <select id="viewFilter" onchange="changeView()">
                <option value="grid">Grid View</option>
                <option value="list">List View</option>
                <option value="compact">Compact View</option>
            </select>
        </div>
    </div>
</div>

<!-- Bookmarks Grid -->
<div class="bookmarks-container">
    <div id="bookmarksGrid" class="bookmarks-grid">
        <!-- Sample Bookmarks -->
        <div class="bookmark-card" data-collection="quantitative" data-tags="formulas,important" data-visits="45">
            <div class="bookmark-header">
                <div class="bookmark-favorite" onclick="toggleFavorite(1)">
                    <span class="star-icon">⭐</span>
                </div>
                <div class="bookmark-actions">
                    <button class="action-btn" onclick="editBookmark(1)">✏️</button>
                    <button class="action-btn" onclick="deleteBookmark(1)">🗑️</button>
                    <button class="action-btn" onclick="shareBookmark(1)">🔗</button>
                </div>
            </div>

            <div class="bookmark-content">
                <div class="bookmark-title">
                    <span class="bookmark-icon">📊</span>
                    <span class="title-text">Time & Work Formulas</span>
                </div>
                <div class="bookmark-description">
                    Complete collection of time and work formulas with examples and shortcuts for IBPS PO preparation
                </div>
                <div class="bookmark-url">/quantitative/aptitude/time-work/formulas</div>
                <div class="bookmark-tags">
                    <span class="tag">formulas</span>
                    <span class="tag">important</span>
                    <span class="tag">quantitative</span>
                </div>
            </div>

            <div class="bookmark-footer">
                <div class="bookmark-stats">
                    <span class="stat">👁 45 visits</span>
                    <span class="stat">⏰ 2h ago</span>
                </div>
                <div class="bookmark-preview">
                    <img src="data:image/svg+xml,%3Csvg width='300' height='150' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='300' height='150' fill='%23f0f9ff'/%3E%3Ctext x='150' y='75' text-anchor='middle' font-family='Arial' font-size='14' fill='%23067ea'%3EPreview%3C/text%3E%3C/svg%3E" alt="Preview">
                </div>
            </div>
        </div>

        <div class="bookmark-card" data-collection="reasoning" data-tags="tips,strategies" data-visits="32">
            <div class="bookmark-header">
                <div class="bookmark-favorite" onclick="toggleFavorite(2)">
                    <span class="star-icon">⭐</span>
                </div>
                <div class="bookmark-actions">
                    <button class="action-btn" onclick="editBookmark(2)">✏️</button>
                    <button class="action-btn" onclick="deleteBookmark(2)">🗑️</button>
                    <button class="action-btn" onclick="shareBookmark(2)">🔗</button>
                </div>
            </div>

            <div class="bookmark-content">
                <div class="bookmark-title">
                    <span class="bookmark-icon">🧩</span>
                    <span class="title-text">Blood Relations Tips</span>
                </div>
                <div class="bookmark-description">
                    Essential tips and tricks for solving blood relation questions in reasoning ability section with family tree examples
                </div>
                <div class="bookmark-url">/reasoning/blood-relations/tips</div>
                <div class="bookmark-tags">
                    <span class="tag">tips</span>
                    <span class="tag">strategies</span>
                    <span class="tag">reasoning</span>
                </div>
            </div>

            <div class="bookmark-footer">
                <div class="bookmark-stats">
                    <span class="stat">👁 32 visits</span>
                    <span class="stat">⏰ 1 day ago</span>
                </div>
                <div class="bookmark-preview">
                    <img src="data:image/svg+xml,%3Csvg width='300' height='150' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='300' height='150' fill='%23fce7f3'/%3E%3Ctext x='150' y='75' text-anchor='middle' font-family='Arial' font-size='14' fill='%23166534'%3EPreview%3C/text%3E%3C/svg%3E" alt="Preview">
                </div>
            </div>
        </div>

        <div class="bookmark-card" data-collection="english" data-tags="grammar,rules" data-visits="28">
            <div class="bookmark-header">
                <div class="bookmark-favorite" onclick="toggleFavorite(3)">
                    <span class="star-icon inactive">⭐</span>
                </div>
                <div class="bookmark-actions">
                    <button class="action-btn" onclick="editBookmark(3)">✏️</button>
                    <button class="action-btn" onclick="deleteBookmark(3)">🗑️</button>
                    <button class="action-btn" onclick="shareBookmark(3)">🔗</button>
                </div>
            </div>

            <div class="bookmark-content">
                <div class="bookmark-title">
                    <span class="bookmark-icon">📝</span>
                    <span class="title-text">English Grammar Rules</span>
                </div>
                <div class="bookmark-description">
                    Comprehensive guide to English grammar rules including tenses, prepositions, articles, and common errors to avoid
                </div>
                <div class="bookmark-url">/english/grammar/rules</div>
                <div class="bookmark-tags">
                    <span class="tag">grammar</span>
                    <span class="tag">rules</span>
                    <span class="tag">english</span>
                </div>
            </div>

            <div class="bookmark-footer">
                <div class="bookmark-stats">
                    <span class="stat">👁 28 visits</span>
                    <span class="stat">⏰ 2 days ago</span>
                </div>
                <div class="bookmark-preview">
                    <img src="data:image/svg+xml,%3Csvg width='300' height='150' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='300' height='150' fill='%23e9d5ff'/%3E%3Ctext x='150' y='75' text-anchor='middle' font-family='Arial' font-size='14' fill='%237c3aed'%3EPreview%3C/text%3E%3C/svg%3E" alt="Preview">
                </div>
            </div>
        </div>

        <div class="bookmark-card" data-collection="awareness" data-tags="banking,current" data-visits="67">
            <div class="bookmark-header">
                <div class="bookmark-favorite" onclick="toggleFavorite(4)">
                    <span class="star-icon">⭐</span>
                </div>
                <div class="bookmark-actions">
                    <button class="action-btn" onclick="editBookmark(4)">✏️</button>
                    <button class="action-btn" onclick="deleteBookmark(4)">🗑️</button>
                    <button class="action-btn" onclick="shareBookmark(4)">🔗</button>
                </div>
            </div>

            <div class="bookmark-content">
                <div class="bookmark-title">
                    <span class="bookmark-icon">🏦</span>
                    <span class="title-text">Banking Terms Glossary</span>
                </div>
                <div class="bookmark-description">
                    Updated banking terminology glossary with CRR, SLR, repo rates, and other important banking awareness terms
                </div>
                <div class="bookmark-url">/awareness/banking/glossary</div>
                <div class="bookmark-tags">
                    <span class="tag">banking</span>
                    <span class="tag">current</span>
                    <span class="tag">awareness</span>
                </div>
            </div>

            <div class="bookmark-footer">
                <div class="bookmark-stats">
                    <span class="stat">👁 67 visits</span>
                    <span class="stat">⏰ 1 week ago</span>
                </div>
                <div class="bookmark-preview">
                    <img src="data:image/svg+xml,%3Csvg width='300' height='150' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='300' height='150' fill='%23fed7aa'/%3E%3Ctext x='150' y='75' text-anchor='middle' font-family='Arial' font-size='14' fill='%23c2410c'%3EPreview%3C/text%3E%3C/svg%3E" alt="Preview">
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Collections Section -->
<div class="collections-section">
    <h3>My Collections</h3>
    <div class="collections-grid">
        <div class="collection-card">
            <div class="collection-header">
                <div class="collection-icon">📊</div>
                <div class="collection-actions">
                    <button class="action-btn" onclick="editCollection('quantitative')">✏️</button>
                    <button class="action-btn" onclick="deleteCollection('quantitative')">🗑️</button>
                </div>
            </div>
            <div class="collection-content">
                <div class="collection-name">Quantitative Aptitude</div>
                <div class="collection-count">45 bookmarks</div>
                <div class="collection-description">All quantitative aptitude topics including formulas, shortcuts, and practice materials</div>
            </div>
            <div class="collection-footer">
                <button class="collection-btn" onclick="openCollection('quantitative')">Open Collection</button>
            </div>
        </div>

        <div class="collection-card">
            <div class="collection-header">
                <div class="collection-icon">🧩</div>
                <div class="collection-actions">
                    <button class="action-btn" onclick="editCollection('reasoning')">✏️</button>
                    <button class="action-btn" onclick="deleteCollection('reasoning')">🗑️</button>
                </div>
            </div>
            <div class="collection-content">
                <div class="collection-name">Reasoning Ability</div>
                <div class="collection-count">38 bookmarks</div>
                <div class="collection-description">Reasoning topics, shortcuts, and practice questions for various reasoning types</div>
            </div>
            <div class="collection-footer">
                <button class="collection-btn" onclick="openCollection('reasoning')">Open Collection</button>
            </div>
        </div>

        <div class="collection-card">
            <div class="collection-header">
                <div class="collection-icon">📝</div>
                <div class="collection-actions">
                    <button class="action-btn" onclick="editCollection('english')">✏️</button>
                    <button class="action-btn" onclick="deleteCollection('english')">🗑️</button>
                </div>
            </div>
            <div class="collection-content">
                <div class="collection-name">English Language</div>
                <div class="collection-count">32 bookmarks</div>
                <div class="collection-description">Grammar, vocabulary, comprehension, and other English language resources</div>
            </div>
            <div class="collection-footer">
                <button class="collection-btn" onclick="openCollection('english')">Open Collection</button>
            </div>
        </div>

        <div class="collection-card">
            <div class="collection-header">
                <div class="collection-icon">🏦</div>
                <div class="collection-actions">
                    <button class="action-btn" onclick="editCollection('awareness')">✏️</button>
                    <button class="action-btn" onclick="deleteCollection('awareness')">🗑️</button>
                </div>
            </div>
            <div class="collection-content">
                <div class="collection-name">General Awareness</div>
                <div class="collection-count">56 bookmarks</div>
                <div class="collection-description">Current affairs, banking awareness, and static GK materials</div>
            </div>
            <div class="collection-footer">
                <button class="collection-btn" onclick="openCollection('awareness')">Open Collection</button>
            </div>
        </div>

        <div class="collection-card new">
            <div class="collection-header">
                <div class="collection-icon">➕</div>
                <div class="collection-actions">
                    <button class="action-btn disabled" disabled>—</button>
                    <button class="action-btn disabled" disabled>—</button>
                </div>
            </div>
            <div class="collection-content">
                <div class="collection-name">Create Collection</div>
                <div class="collection-count">New collection</div>
                <div class="collection-description">Organize your bookmarks into custom collections</div>
            </div>
            <div class="collection-footer">
                <button class="collection-btn" onclick="createCollection()">Create Collection</button>
            </div>
        </div>
    </div>
</div>

<!-- Activity Section -->
<div class="activity-section">
    <h3>Recent Activity</h3>
    <div class="activity-timeline">
        <div class="activity-item">
            <div class="activity-icon">🔖</div>
            <div class="activity-content">
                <div class="activity-text">Bookmarked "Mock Test Analysis"</div>
                <div class="activity-details">Added to Practice Tests collection</div>
                <div class="activity-time">2 hours ago</div>
            </div>
        </div>

        <div class="activity-item">
            <div class="activity-icon">⭐</div>
            <div class="activity-content">
                <div class="activity-text">Favorited "Time & Work Formulas"</div>
                <div class="activity-details">Added to favorites</div>
                <div class="activity-time">3 hours ago</div>
            </div>
        </div>

        <div class="activity-item">
            <div class="activity-icon">📁</div>
            <div class="activity-content">
                <div class="activity-text">Created collection "Quick Reference"</div>
                <div class="activity-details">12 bookmarks moved</div>
                <div class="activity-time">1 day ago</div>
            </div>
        </div>

        <div class="activity-item">
            <div class="activity-icon">✏️</div>
            <div class="activity-content">
                <div class="activity-text">Updated "English Grammar Rules"</div>
                <div class="activity-details">Tags and description modified</div>
                <div class="activity-time">2 days ago</div>
            </div>
        </div>
    </div>
</div>