Notes and Highlighting System

<!-- 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 notes, topics, or highlights..." id="searchInput" onkeyup="searchNotes()">
            <button class="clear-search" onclick="clearSearch()">×</button>
        </div>
    </div>

    <div class="filter-controls">
        <div class="filter-group">
            <label>Subject:</label>
            <select id="subjectFilter" onchange="filterNotes()">
                <option value="">All Subjects</option>
                <option value="quantitative">Quantitative Aptitude</option>
                <option value="reasoning">Reasoning Ability</option>
                <option value="english">English Language</option>
                <option value="awareness">General Awareness</option>
            </select>
        </div>

        <div class="filter-group">
            <label>Type:</label>
            <select id="typeFilter" onchange="filterNotes()">
                <option value="">All Types</option>
                <option value="note">Notes</option>
                <option value="highlight">Highlights</option>
                <option value="formula">Formulas</option>
                <option value="summary">Summaries</option>
            </select>
        </div>

        <div class="filter-group">
            <label>Color:</label>
            <select id="colorFilter" onchange="filterNotes()">
                <option value="">All Colors</option>
                <option value="yellow">Yellow</option>
                <option value="green">Green</option>
                <option value="blue">Blue</option>
                <option value="pink">Pink</option>
                <option value="orange">Orange</option>
            </select>
        </div>

        <div class="filter-group">
            <label>Sort:</label>
            <select id="sortFilter" onchange="sortNotes()">
                <option value="recent">Most Recent</option>
                <option value="alphabetical">Alphabetical</option>
                <option value="subject">By Subject</option>
                <option value="color">By Color</option>
            </select>
        </div>
    </div>
</div>

<!-- Quick Access Toolbar -->
<div class="quick-toolbar">
    <div class="toolbar-section">
        <h4>Quick Actions</h4>
        <div class="toolbar-buttons">
            <button class="tool-btn" onclick="toggleHighlightMode()">
                <span class="btn-icon">🖍️</span>
                <span class="btn-text">Highlight</span>
            </button>
            <button class="tool-btn" onclick="insertFormula()">
                <span class="btn-icon">📐</span>
                <span class="btn-text">Formula</span>
            </button>
            <button class="tool-btn" onclick="addDrawing()">
                <span class="btn-icon">✏️</span>
                <span class="btn-text">Drawing</span>
            </button>
            <button class="tool-btn" onclick="addVoiceNote()">
                <span class="btn-icon">🎙️</span>
                <span class="btn-text">Voice</span>
            </button>
            <button class="tool-btn" onclick="addPhoto()">
                <span class="btn-icon">📷</span>
                <span class="btn-text">Photo</span>
            </button>
        </div>
    </div>

    <div class="toolbar-section">
        <h4>Color Palette</h4>
        <div class="color-palette">
            <button class="color-btn yellow" onclick="selectHighlightColor('yellow')"></button>
            <button class="color-btn green" onclick="selectHighlightColor('green')"></button>
            <button class="color-btn blue" onclick="selectHighlightColor('blue')"></button>
            <button class="color-btn pink" onclick="selectHighlightColor('pink')"></button>
            <button class="color-btn orange" onclick="selectHighlightColor('orange')"></button>
            <button class="color-btn purple" onclick="selectHighlightColor('purple')"></button>
            <button class="color-btn red" onclick="selectHighlightColor('red')"></button>
            <button class="color-btn gray" onclick="selectHighlightColor('gray')"></button>
        </div>
    </div>
</div>

<!-- Notes Grid -->
<div class="notes-grid" id="notesGrid">
    <!-- Sample Notes -->
    <div class="note-card" data-subject="quantitative" data-type="note" data-color="yellow">
        <div class="note-header">
            <div class="note-title">Time & Work Formulas</div>
            <div class="note-actions">
                <button class="note-action" onclick="editNote(1)">✏️</button>
                <button class="note-action" onclick="deleteNote(1)">🗑️</button>
            </div>
        </div>
        <div class="note-subject-tag quantitative">Quantitative</div>
        <div class="note-preview">
            <div class="highlighted-text yellow">
                Work = Rate × Time | Rate = Work/Time | Time = Work/Rate
            </div>
            <div class="note-content">
                Basic formula for time and work problems. Remember these variations:
                • If A can do work in x days, A's rate = 1/x
                • If A and B work together, combined rate = 1/x + 1/y
            </div>
        </div>
        <div class="note-footer">
            <div class="note-date">Oct 23, 2024</div>
            <div class="note-tags">
                <span class="tag">formula</span>
                <span class="tag">important</span>
            </div>
        </div>
    </div>

    <div class="note-card" data-subject="reasoning" data-type="highlight" data-color="green">
        <div class="note-header">
            <div class="note-title">Blood Relations Tips</div>
            <div class="note-actions">
                <button class="note-action" onclick="editNote(2)">✏️</button>
                <button class="note-action" onclick="deleteNote(2)">🗑️</button>
            </div>
        </div>
        <div class="note-subject-tag reasoning">Reasoning</div>
        <div class="note-preview">
            <div class="highlighted-text green">
                Key relationships: Mother's sister = Aunt | Father's brother = Uncle
            </div>
            <div class="note-content">
                Important shortcuts for blood relations problems. Create a family tree diagram for complex questions.
            </div>
        </div>
        <div class="note-footer">
            <div class="note-date">Oct 22, 2024</div>
            <div class="note-tags">
                <span class="tag">tips</span>
                <span class="tag">shortcuts</span>
            </div>
        </div>
    </div>

    <div class="note-card" data-subject="english" data-type="summary" data-color="blue">
        <div class="note-header">
            <div class="note-title">Reading Comprehension Strategy</div>
            <div class="note-actions">
                <button class="note-action" onclick="editNote(3)">✏️</button>
                <button class="note-action" onclick="deleteNote(3)">🗑️</button>
            </div>
        </div>
        <div class="note-subject-tag english">English</div>
        <div class="note-preview">
            <div class="highlighted-text blue">
                SKIM → SCAN → READ → ANSWER
            </div>
            <div class="note-content">
                4-step approach for RC passages:
                1. Skim for main idea
                2. Scan for keywords
                3. Read carefully
                4. Answer systematically
            </div>
        </div>
        <div class="note-footer">
            <div class="note-date">Oct 21, 2024</div>
            <div class="note-tags">
                <span class="tag">strategy</span>
                <span class="tag">method</span>
            </div>
        </div>
    </div>

    <div class="note-card" data-subject="awareness" data-type="formula" data-color="pink">
        <div class="note-header">
            <div class="note-title">Banking Terms</div>
            <div class="note-actions">
                <button class="note-action" onclick="editNote(4)">✏️</button>
                <button class="note-action" onclick="deleteNote(4)">🗑️</button>
            </div>
        </div>
        <div class="note-subject-tag awareness">Awareness</div>
        <div class="note-preview">
            <div class="highlighted-text pink">
                CRR = Cash Reserve Ratio | SLR = Statutory Liquidity Ratio
            </div>
            <div class="note-content">
                Current rates: CRR = 4.00% | SLR = 18.00% | Repo Rate = 6.50%
                Updated as of October 2024
            </div>
        </div>
        <div class="note-footer">
            <div class="note-date">Oct 20, 2024</div>
            <div class="note-tags">
                <span class="tag">banking</span>
                <span class="tag">current</span>
            </div>
        </div>
    </div>

    <div class="note-card" data-subject="quantitative" data-type="note" data-color="orange">
        <div class="note-header">
            <div class="note-title">Percentage Quick Tips</div>
            <div class="note-actions">
                <button class="note-action" onclick="editNote(5)">✏️</button>
                <button class="note-action" onclick="deleteNote(5)">🗑️</button>
            </div>
        </div>
        <div class="note-subject-tag quantitative">Quantitative</div>
        <div class="note-preview">
            <div class="highlighted-text orange">
                10% = 1/10 | 25% = 1/4 | 33.33% = 1/3 | 50% = 1/2
            </div>
            <div class="note-content">
                Common percentage to fraction conversions. These help in quick calculations during exams.
            </div>
        </div>
        <div class="note-footer">
            <div class="note-date">Oct 19, 2024</div>
            <div class="note-tags">
                <span class="tag">shortcuts</span>
                <span class="tag">mental-math</span>
            </div>
        </div>
    </div>

    <div class="note-card" data-subject="reasoning" data-type="highlight" data-color="purple">
        <div class="note-header">
            <div class="note-title">Direction Sense</div>
            <div class="note-actions">
                <button class="note-action" onclick="editNote(6)">✏️</button>
                <button class="note-action" onclick="deleteNote(6)">🗑️</button>
            </div>
        </div>
        <div class="note-subject-tag reasoning">Reasoning</div>
        <div class="note-preview">
            <div class="highlighted-text purple">
                Left turn = 90° anticlockwise | Right turn = 90° clockwise
            </div>
            <div class="note-content">
                Remember: East to North = Left | East to South = Right
                Always face North as reference point unless specified.
            </div>
        </div>
        <div class="note-footer">
            <div class="note-date">Oct 18, 2024</div>
            <div class="note-tags">
                <span class="tag">directions</span>
                <span class="tag">spatial</span>
            </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-icon">📚</div>
            <div class="collection-info">
                <div class="collection-name">Quantitative Formulas</div>
                <div class="collection-count">23 notes</div>
            </div>
            <button class="collection-btn" onclick="openCollection('quantitative-formulas')">Open</button>
        </div>

        <div class="collection-card">
            <div class="collection-icon">🧩</div>
            <div class="collection-info">
                <div class="collection-name">Reasoning Shortcuts</div>
                <div class="collection-count">18 notes</div>
            </div>
            <button class="collection-btn" onclick="openCollection('reasoning-shortcuts')">Open</button>
        </div>

        <div class="collection-card">
            <div class="collection-icon">📝</div>
            <div class="collection-info">
                <div class="collection-name">English Grammar</div>
                <div class="collection-count">15 notes</div>
            </div>
            <button class="collection-btn" onclick="openCollection('english-grammar')">Open</button>
        </div>

        <div class="collection-card">
            <div class="collection-icon">🏦</div>
            <div class="collection-info">
                <div class="collection-name">Banking Awareness</div>
                <div class="collection-count">31 notes</div>
            </div>
            <button class="collection-btn" onclick="openCollection('banking-awareness')">Open</button>
        </div>

        <div class="collection-card">
            <div class="collection-icon">⭐</div>
            <div class="collection-info">
                <div class="collection-name">Important Topics</div>
                <div class="collection-count">40 notes</div>
            </div>
            <button class="collection-btn" onclick="openCollection('important-topics')">Open</button>
        </div>

        <div class="collection-card new">
            <div class="collection-icon">➕</div>
            <div class="collection-info">
                <div class="collection-name">Create Collection</div>
                <div class="collection-count">New</div>
            </div>
            <button class="collection-btn" onclick="createCollection()">Create</button>
        </div>
    </div>
</div>

<!-- Recent Activity -->
<div class="recent-activity">
    <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">Created note: "Time & Work Formulas"</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">Highlighted text in "Blood Relations Tips"</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">Added 5 notes to "Quantitative Formulas" collection</div>
                <div class="activity-time">Yesterday</div>
            </div>
        </div>

        <div class="activity-item">
            <div class="activity-icon">✏️</div>
            <div class="activity-content">
                <div class="activity-text">Updated "Banking Terms" note</div>
                <div class="activity-time">2 days ago</div>
            </div>
        </div>
    </div>
</div>