Upload 8 files

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+static/icon.png filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,11 @@
+FROM python:3.9
+
+WORKDIR /app
+
+COPY requirements.txt .
+
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+CMD ["gunicorn", "-b", "0.0.0.0:7860", "app:app"]

app.py

@@ -0,0 +1,370 @@
+from flask import Flask, render_template, request, jsonify, session, redirect, url_for
+from pymongo import MongoClient
+from werkzeug.security import generate_password_hash, check_password_hash
+from datetime import datetime, timedelta
+import os
+from functools import wraps
+import uuid
+import base64
+import random
+from dotenv import load_dotenv
+load_dotenv()
+
+app = Flask(__name__)
+app.secret_key = os.urandom(24)
+
+# MongoDB connection
+MONGO_URI = os.getenv('MONGO_URI')
+client = MongoClient(MONGO_URI)
+db = client.startpage
+
+# Collections
+users = db.users
+user_bookmarks = db.bookmarks
+user_notes = db.notes
+site_stats = db.site_stats
+vault_passwords = db.vault_passwords
+
+def login_required(f):
+    @wraps(f)
+    def decorated_function(*args, **kwargs):
+        if 'user_id' not in session:
+            return jsonify({'error': 'Authentication required'}), 401
+        return f(*args, **kwargs)
+    return decorated_function
+
+@app.route('/')
+def index():
+    # Track page visit
+    today = datetime.now().strftime('%Y-%m-%d')
+    site_stats.update_one(
+        {'date': today},
+        {'$inc': {'page_visits': 1}},
+        upsert=True
+    )
+    
+    # Check if user is logged in
+    if 'user_id' not in session:
+        return render_template('auth.html')
+    
+    return render_template('index.html', username=session.get('username', 'User'))
+
+@app.route('/register', methods=['POST'])
+def register():
+    data = request.json
+    username = data.get('username')
+    password = data.get('password')
+    
+    if not username or not password:
+        return jsonify({'error': 'Username and password required'}), 400
+    
+    if users.find_one({'username': username}):
+        return jsonify({'error': 'Username already exists'}), 400
+    
+    user_id = str(uuid.uuid4())
+    hashed_password = generate_password_hash(password)
+    
+    users.insert_one({
+        'user_id': user_id,
+        'username': username,
+        'password': hashed_password,
+        'created_at': datetime.now()
+    })
+    
+    # Add default bookmarks for new user
+    default_bookmarks = [
+        { 'name': 'YouTube', 'url': 'https://youtube.com', 'icon': 'play_circle', 'user_id': user_id, 'created_at': datetime.now() },
+        { 'name': 'GitHub', 'url': 'https://github.com', 'icon': 'code', 'user_id': user_id, 'created_at': datetime.now() },
+        { 'name': 'Gmail', 'url': 'https://gmail.com', 'icon': 'mail', 'user_id': user_id, 'created_at': datetime.now() },
+        { 'name': 'Google Drive', 'url': 'https://drive.google.com', 'icon': 'cloud', 'user_id': user_id, 'created_at': datetime.now() },
+        { 'name': 'Netflix', 'url': 'https://netflix.com', 'icon': 'movie', 'user_id': user_id, 'created_at': datetime.now() },
+        { 'name': 'Reddit', 'url': 'https://reddit.com', 'icon': 'forum', 'user_id': user_id, 'created_at': datetime.now() },
+        { 'name': 'Twitter', 'url': 'https://twitter.com', 'icon': 'alternate_email', 'user_id': user_id, 'created_at': datetime.now() },
+        { 'name': 'LinkedIn', 'url': 'https://linkedin.com', 'icon': 'work', 'user_id': user_id, 'created_at': datetime.now() }
+    ]
+    
+    user_bookmarks.insert_many(default_bookmarks)
+    
+    session['user_id'] = user_id
+    session['username'] = username
+    
+    return jsonify({'message': 'Registration successful'})
+
+@app.route('/login', methods=['POST'])
+def login():
+    data = request.json
+    username = data.get('username')
+    password = data.get('password')
+    
+    if not username or not password:
+        return jsonify({'error': 'Username and password required'}), 400
+    
+    user = users.find_one({'username': username})
+    
+    if not user or not check_password_hash(user['password'], password):
+        return jsonify({'error': 'Invalid credentials'}), 401
+    
+    session['user_id'] = user['user_id']
+    session['username'] = username
+    
+    return jsonify({'message': 'Login successful'})
+
+@app.route('/logout', methods=['POST'])
+def logout():
+    session.clear()
+    return jsonify({'message': 'Logout successful'})
+
+@app.route('/api/bookmarks', methods=['GET'])
+@login_required
+def get_bookmarks():
+    user_id = session['user_id']
+    bookmarks = list(user_bookmarks.find({'user_id': user_id}, {'_id': 0}))
+    return jsonify(bookmarks)
+
+@app.route('/api/bookmarks', methods=['POST'])
+@login_required
+def save_bookmarks():
+    user_id = session['user_id']
+    data = request.json
+    
+    user_bookmarks.delete_many({'user_id': user_id})
+    
+    for bookmark in data.get('bookmarks', []):
+        bookmark['user_id'] = user_id
+        bookmark['created_at'] = datetime.now()
+        user_bookmarks.insert_one(bookmark)
+    
+    return jsonify({'message': 'Bookmarks saved'})
+
+@app.route('/api/notes', methods=['GET'])
+@login_required
+def get_notes():
+    user_id = session['user_id']
+    notes = list(user_notes.find({'user_id': user_id}, {'_id': 0}))
+    return jsonify(notes)
+
+@app.route('/api/notes', methods=['POST'])
+@login_required
+def save_notes():
+    user_id = session['user_id']
+    data = request.json
+    
+    user_notes.delete_many({'user_id': user_id})
+    
+    for note in data.get('notes', []):
+        note['user_id'] = user_id
+        note['updated_at'] = datetime.now()
+        user_notes.insert_one(note)
+    
+    return jsonify({'message': 'Notes saved'})
+
+@app.route('/api/search', methods=['POST'])
+@login_required
+def track_search():
+    today = datetime.now().strftime('%Y-%m-%d')
+    site_stats.update_one(
+        {'date': today},
+        {'$inc': {'search_count': 1}},
+        upsert=True
+    )
+    return jsonify({'message': 'Search tracked'})
+
+@app.route('/api/stats', methods=['GET'])
+def get_stats():
+    today = datetime.now().strftime('%Y-%m-%d')
+    stats = site_stats.find_one({'date': today})
+    
+    if not stats:
+        return jsonify({'page_visits': 0, 'search_count': 0})
+    
+    return jsonify({
+        'page_visits': stats.get('page_visits', 0),
+        'search_count': stats.get('search_count', 0)
+    })
+
+@app.route('/api/change-password', methods=['POST'])
+@login_required
+def change_password():
+    data = request.json
+    current_password = data.get('currentPassword')
+    new_password = data.get('newPassword')
+    
+    if not current_password or not new_password:
+        return jsonify({'error': 'Current password and new password required'}), 400
+    
+    user_id = session['user_id']
+    user = users.find_one({'user_id': user_id})
+    
+    if not user or not check_password_hash(user['password'], current_password):
+        return jsonify({'error': 'Current password is incorrect'}), 400
+    
+    if len(new_password) < 6:
+        return jsonify({'error': 'Password must be at least 6 characters long'}), 400
+    
+    # Update password
+    hashed_password = generate_password_hash(new_password)
+    users.update_one(
+        {'user_id': user_id},
+        {'$set': {'password': hashed_password, 'updated_at': datetime.now()}}
+    )
+    
+    return jsonify({'message': 'Password changed successfully'})
+
+@app.route('/api/developer-stats', methods=['GET'])
+@login_required
+def get_developer_stats():
+    # Total users count
+    total_users = users.count_documents({})
+    
+    # Total visits and searches across all time
+    all_stats = list(site_stats.find({}))
+    total_visits = sum(stat.get('page_visits', 0) for stat in all_stats)
+    total_searches = sum(stat.get('search_count', 0) for stat in all_stats)
+    
+    # Monthly data (last 12 months)
+    monthly_data = []
+    current_date = datetime.now()
+    
+    for i in range(12):
+        # Calculate the first day of each month
+        target_date = datetime(current_date.year, current_date.month - i, 1) if current_date.month - i > 0 else datetime(current_date.year - 1, current_date.month - i + 12, 1)
+        
+        # Find all stats for that month
+        start_of_month = target_date
+        if target_date.month == 12:
+            end_of_month = datetime(target_date.year + 1, 1, 1)
+        else:
+            end_of_month = datetime(target_date.year, target_date.month + 1, 1)
+        
+        # Query stats for the month
+        month_stats = site_stats.aggregate([
+            {
+                '$match': {
+                    'date': {
+                        '$gte': start_of_month.strftime('%Y-%m-%d'),
+                        '$lt': end_of_month.strftime('%Y-%m-%d')
+                    }
+                }
+            },
+            {
+                '$group': {
+                    '_id': None,
+                    'total_visits': {'$sum': '$page_visits'},
+                    'total_searches': {'$sum': '$search_count'}
+                }
+            }
+        ])
+        
+        month_result = list(month_stats)
+        month_name = target_date.strftime('%b')
+        
+        if month_result:
+            monthly_data.append({
+                'month': month_name,
+                'visits': month_result[0]['total_visits'],
+                'searches': month_result[0]['total_searches']
+            })
+        else:
+            monthly_data.append({
+                'month': month_name,
+                'visits': 0,
+                'searches': 0
+            })
+    
+    # Reverse to get chronological order
+    monthly_data.reverse()
+    
+    return jsonify({
+        'totalUsers': total_users,
+        'totalVisits': total_visits,
+        'totalSearches': total_searches,
+        'monthlyData': monthly_data
+    })
+
+# Vault API endpoints
+@app.route('/api/vault/authenticate', methods=['POST'])
+@login_required
+def authenticate_vault():
+    data = request.json
+    password = data.get('password')
+    
+    if not password:
+        return jsonify({'error': 'Password required'}), 400
+    
+    user_id = session['user_id']
+    user = users.find_one({'user_id': user_id})
+    
+    if not user or not check_password_hash(user['password'], password):
+        return jsonify({'error': 'Invalid password'}), 401
+    
+    return jsonify({'message': 'Authentication successful'})
+
+@app.route('/api/vault/passwords', methods=['GET'])
+@login_required
+def get_vault_passwords():
+    user_id = session['user_id']
+    passwords = list(vault_passwords.find({'user_id': user_id}, {'_id': 0}))
+    
+    # Decode passwords for display (simple base64 encoding for demo)
+    for password in passwords:
+        try:
+            password['password'] = base64.b64decode(password['password'].encode()).decode()
+        except:
+            pass  # Keep original if decoding fails
+    
+    return jsonify(passwords)
+
+@app.route('/api/vault/passwords', methods=['POST'])
+@login_required
+def save_vault_password():
+    user_id = session['user_id']
+    data = request.json
+    
+    # Validate required fields
+    if not data.get('title') or not data.get('password'):
+        return jsonify({'error': 'Title and password are required'}), 400
+    
+    # Simple base64 encoding for password storage (demo purposes)
+    encoded_password = base64.b64encode(data['password'].encode()).decode()
+    
+    password_entry = {
+        'user_id': user_id,
+        'title': data.get('title'),
+        'username': data.get('username', ''),
+        'password': encoded_password,
+        'website': data.get('website', ''),
+        'notes': data.get('notes', ''),
+        'created_at': datetime.now(),
+        'updated_at': datetime.now()
+    }
+    
+    # Check if updating existing entry
+    if data.get('id'):
+        password_entry['id'] = data['id']
+        vault_passwords.update_one(
+            {'user_id': user_id, 'id': data['id']},
+            {'$set': password_entry}
+        )
+    else:
+        password_entry['id'] = str(uuid.uuid4())
+        vault_passwords.insert_one(password_entry)
+    
+    return jsonify({'message': 'Password saved successfully'})
+
+@app.route('/api/vault/passwords/<password_id>', methods=['DELETE'])
+@login_required
+def delete_vault_password(password_id):
+    user_id = session['user_id']
+    
+    result = vault_passwords.delete_one({
+        'user_id': user_id,
+        'id': password_id
+    })
+    
+    if result.deleted_count > 0:
+        return jsonify({'message': 'Password deleted successfully'})
+    else:
+        return jsonify({'error': 'Password not found'}), 404
+
+if __name__ == '__main__':
+    app.run(debug=True, port=7860)

requirements.txt

@@ -0,0 +1,4 @@
+flask
+pymongo
+gunicorn
+python-dotenv

static/script.js

@@ -0,0 +1,1348 @@
+// Clock functionality
+function updateClock() {
+    const now = new Date();
+    const timeElement = document.getElementById('time');
+    const dateElement = document.getElementById('date');
+
+    // Format time
+    const hours = now.getHours().toString().padStart(2, '0');
+    const minutes = now.getMinutes().toString().padStart(2, '0');
+    const seconds = now.getSeconds().toString().padStart(2, '0');
+    timeElement.textContent = `${hours}:${minutes}:${seconds}`;
+
+    // Format date
+    const options = {
+        weekday: 'long',
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric'
+    };
+    const formattedDate = now.toLocaleDateString('en-US', options);
+
+    // Add weather emoji
+    const month = now.getMonth();
+    const hour = now.getHours();
+    let weatherEmoji = '☀️';
+    if (month >= 11 || month <= 2) weatherEmoji = '❄️';
+    else if (month >= 3 && month <= 5) weatherEmoji = '🌸';
+    else if (month >= 6 && month <= 8) weatherEmoji = '☀️';
+    else weatherEmoji = '🍂';
+
+    if (hour >= 19 || hour <= 6) weatherEmoji = '🌙';
+
+    dateElement.textContent = `${formattedDate} ${weatherEmoji}`;
+}
+
+// Authentication functions
+async function logout() {
+    try {
+        await fetch('/logout', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            }
+        });
+        window.location.href = '/';
+    } catch (error) {
+        console.error('Logout failed:', error);
+        window.location.href = '/';
+    }
+}
+
+// Search functionality
+function handleSearch() {
+    const searchInput = document.getElementById('searchInput');
+    const query = searchInput.value.trim();
+
+    if (query) {
+        // Track search usage
+        fetch('/api/search', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            }
+        }).catch(err => console.log('Search tracking failed:', err));
+
+        // Check if it's a URL
+        const urlPattern = /^(https?:\/\/)?([\w\-])+\.{1}([a-zA-Z]{2,63})([\/\w\-\._~:?#[\]@!\$&'()*+,;=]*)?$/;
+
+        if (urlPattern.test(query)) {
+            // It's a URL, add https:// if not present
+            const url = query.startsWith('http') ? query : `https://${query}`;
+            window.open(url, '_blank');
+        } else {
+            // It's a search query
+            window.open(`https://www.google.com/search?q=${encodeURIComponent(query)}`, '_blank');
+        }
+
+        searchInput.value = '';
+    }
+}
+
+// Default bookmarks
+const defaultBookmarks = [
+    { name: 'YouTube', url: 'https://youtube.com', icon: 'play_circle' },
+    { name: 'GitHub', url: 'https://github.com', icon: 'code' },
+    { name: 'Gmail', url: 'https://gmail.com', icon: 'mail' },
+    { name: 'Google Drive', url: 'https://drive.google.com', icon: 'cloud' },
+    { name: 'Netflix', url: 'https://netflix.com', icon: 'movie' },
+    { name: 'Reddit', url: 'https://reddit.com', icon: 'forum' },
+    { name: 'Twitter', url: 'https://twitter.com', icon: 'alternate_email' },
+    { name: 'LinkedIn', url: 'https://linkedin.com', icon: 'work' }
+];
+
+// Bookmarks management
+class BookmarksManager {
+    constructor() {
+        this.bookmarks = [];
+        this.loadBookmarks();
+    }
+
+    async loadBookmarks() {
+        try {
+            const response = await fetch('/api/bookmarks');
+            if (response.ok) {
+                this.bookmarks = await response.json();
+            } else {
+                // Fallback to default bookmarks if API fails
+                this.bookmarks = defaultBookmarks;
+            }
+        } catch (error) {
+            console.error('Failed to load bookmarks:', error);
+            this.bookmarks = defaultBookmarks;
+        }
+        this.renderBookmarks();
+    }
+
+    async saveBookmarks() {
+        try {
+            await fetch('/api/bookmarks', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ bookmarks: this.bookmarks })
+            });
+        } catch (error) {
+            console.error('Failed to save bookmarks:', error);
+        }
+    }
+
+    addBookmark(bookmark) {
+        this.bookmarks.push(bookmark);
+        this.saveBookmarks();
+        this.renderBookmarks();
+    }
+
+    editBookmark(index, bookmark) {
+        this.bookmarks[index] = bookmark;
+        this.saveBookmarks();
+        this.renderBookmarks();
+    }
+
+    removeBookmark(index) {
+        this.bookmarks.splice(index, 1);
+        this.saveBookmarks();
+        this.renderBookmarks();
+    }
+
+    renderBookmarks() {
+        const container = document.getElementById('bookmarksGrid');
+        container.innerHTML = '';
+
+        // Render existing bookmarks
+        this.bookmarks.forEach((bookmark, index) => {
+            const bookmarkElement = document.createElement('a');
+            bookmarkElement.className = 'bookmark';
+            bookmarkElement.href = bookmark.url;
+            bookmarkElement.target = '_blank';
+            bookmarkElement.innerHTML = `
+                <span class="material-icons bookmark-icon">${bookmark.icon || 'bookmark'}</span>
+                <span class="bookmark-name">${bookmark.name}</span>
+                <span class="bookmark-url">${new URL(bookmark.url).hostname}</span>
+            `;
+
+            // Add context menu for editing
+            bookmarkElement.addEventListener('contextmenu', (e) => {
+                e.preventDefault();
+                this.openEditModal(index, bookmark);
+            });
+
+            container.appendChild(bookmarkElement);
+        });
+
+        // Add "Add Bookmark" button
+        const addButton = document.createElement('div');
+        addButton.className = 'add-bookmark-btn';
+        addButton.innerHTML = `
+            <span class="material-icons">add</span>
+        `;
+        addButton.addEventListener('click', () => {
+            this.openAddModal();
+        });
+
+        container.appendChild(addButton);
+    }
+
+    openEditModal(index, bookmark) {
+        const modal = document.getElementById('bookmarkModal');
+        const modalTitle = document.getElementById('modalTitle');
+        const submitBtn = document.getElementById('submitBtn');
+        const deleteBtn = document.getElementById('deleteBtn');
+        const nameInput = document.getElementById('bookmarkName');
+        const urlInput = document.getElementById('bookmarkUrl');
+        const iconSelect = document.getElementById('bookmarkIcon');
+
+        // Set modal to edit mode
+        modalTitle.textContent = 'Edit Bookmark';
+        submitBtn.textContent = 'Update';
+        deleteBtn.style.display = 'block';
+
+        // Fill form with current bookmark data
+        nameInput.value = bookmark.name;
+        urlInput.value = bookmark.url;
+        iconSelect.value = bookmark.icon || '';
+
+        // Store the index for editing
+        modal.dataset.editIndex = index;
+        modal.dataset.mode = 'edit';
+
+        // Set up delete button
+        deleteBtn.onclick = () => {
+            if (confirm(`Remove "${bookmark.name}" from bookmarks?`)) {
+                this.removeBookmark(index);
+                modal.style.display = 'none';
+            }
+        };
+
+        modal.style.display = 'block';
+    }
+
+    openAddModal() {
+        const modal = document.getElementById('bookmarkModal');
+        const modalTitle = document.getElementById('modalTitle');
+        const submitBtn = document.getElementById('submitBtn');
+        const deleteBtn = document.getElementById('deleteBtn');
+        const form = document.getElementById('bookmarkForm');
+
+        // Set modal to add mode
+        modalTitle.textContent = 'Add Bookmark';
+        submitBtn.textContent = 'Add Bookmark';
+        deleteBtn.style.display = 'none';
+
+        // Clear form
+        form.reset();
+
+        // Clear edit data
+        delete modal.dataset.editIndex;
+        modal.dataset.mode = 'add';
+
+        modal.style.display = 'block';
+    }
+}
+
+// Notepad functionality with multiple notes
+class NotePad {
+    constructor() {
+        this.notes = [];
+        this.activeNoteId = 0;
+        this.saveTimeouts = new Map();
+        this.loadNotes();
+    }
+
+    async loadNotes() {
+        try {
+            const response = await fetch('/api/notes');
+            if (response.ok) {
+                this.notes = await response.json();
+                if (this.notes.length === 0) {
+                    this.notes = [{ id: 0, title: 'Note 1', content: '' }];
+                }
+            } else {
+                this.notes = [{ id: 0, title: 'Note 1', content: '' }];
+            }
+        } catch (error) {
+            console.error('Failed to load notes:', error);
+            this.notes = [{ id: 0, title: 'Note 1', content: '' }];
+        }
+        this.renderNotes();
+        this.setupEventListeners();
+    }
+
+    async saveNotes() {
+        try {
+            await fetch('/api/notes', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ notes: this.notes })
+            });
+        } catch (error) {
+            console.error('Failed to save notes:', error);
+        }
+    }
+
+    addNote() {
+        const newId = Math.max(...this.notes.map(n => n.id), -1) + 1;
+        const newNote = {
+            id: newId,
+            title: `Note ${newId + 1}`,
+            content: ''
+        };
+        this.notes.push(newNote);
+        this.saveNotes();
+        this.renderNotes();
+        this.switchToNote(newId);
+    }
+
+    removeNote(noteId) {
+        if (this.notes.length <= 1) {
+            alert('Cannot delete the last note!');
+            return;
+        }
+
+        if (confirm('Are you sure you want to delete this note?')) {
+            this.notes = this.notes.filter(note => note.id !== noteId);
+
+            // If we deleted the active note, switch to the first available note
+            if (this.activeNoteId === noteId) {
+                this.activeNoteId = this.notes[0].id;
+            }
+
+            this.saveNotes();
+            this.renderNotes();
+        }
+    }
+
+    switchToNote(noteId) {
+        // Save current note content first
+        this.saveCurrentNote();
+
+        this.activeNoteId = noteId;
+        this.renderNotes();
+
+        // Focus on the new note's textarea
+        const activeTextarea = document.querySelector('.note-content.active .notepad-textarea');
+        if (activeTextarea) {
+            activeTextarea.focus();
+        }
+    }
+
+    saveCurrentNote() {
+        const activeTextarea = document.querySelector('.note-content.active .notepad-textarea');
+        if (activeTextarea) {
+            const note = this.notes.find(n => n.id === this.activeNoteId);
+            if (note) {
+                note.content = activeTextarea.value;
+                this.saveNotes();
+            }
+        }
+    }
+
+    showSaveIndicator(noteId) {
+        const saveIndicator = document.querySelector(`[data-note-id="${noteId}"] .save-indicator`);
+        if (saveIndicator) {
+            saveIndicator.classList.add('visible');
+            setTimeout(() => {
+                saveIndicator.classList.remove('visible');
+            }, 1500);
+        }
+    }
+
+    renderNotes() {
+        const tabsContainer = document.querySelector('.notes-tabs');
+        const notesContainer = document.querySelector('.notepad-container');
+
+        // Clear existing tabs (except add button)
+        const addButton = tabsContainer.querySelector('.add-note-btn');
+        tabsContainer.innerHTML = '';
+
+        // Render note tabs
+        this.notes.forEach(note => {
+            const tab = document.createElement('button');
+            tab.className = `note-tab ${note.id === this.activeNoteId ? 'active' : ''}`;
+            tab.setAttribute('data-note-id', note.id);
+            tab.innerHTML = `
+                ${note.title}
+                ${this.notes.length > 1 ? `<span class="close-note" onclick="event.stopPropagation(); window.notePad.removeNote(${note.id});">×</span>` : ''}
+            `;
+            tab.addEventListener('click', () => this.switchToNote(note.id));
+            tabsContainer.appendChild(tab);
+        });
+
+        // Re-add the add button
+        tabsContainer.appendChild(addButton);
+
+        // Clear and render note contents
+        const existingContents = notesContainer.querySelectorAll('.note-content');
+        existingContents.forEach(content => content.remove());
+
+        this.notes.forEach(note => {
+            const noteContent = document.createElement('div');
+            noteContent.className = `note-content ${note.id === this.activeNoteId ? 'active' : ''}`;
+            noteContent.setAttribute('data-note-id', note.id);
+            noteContent.innerHTML = `
+                <textarea class="notepad-textarea" placeholder="Start typing your notes here...">${note.content}</textarea>
+                <div class="notepad-footer">
+                    <span class="save-indicator">
+                        <span class="material-icons" style="font-size: 1rem; vertical-align: middle;">check_circle</span>
+                        Saved
+                    </span>
+                </div>
+            `;
+            notesContainer.appendChild(noteContent);
+        });
+
+        this.setupNoteEventListeners();
+    }
+
+    setupEventListeners() {
+        // Global event listeners can be set up here
+    }
+
+    setupNoteEventListeners() {
+        this.notes.forEach(note => {
+            const textarea = document.querySelector(`[data-note-id="${note.id}"] .notepad-textarea`);
+
+            if (textarea) {
+                // Remove existing listeners to avoid duplicates
+                textarea.removeEventListener('input', this.handleInput);
+                textarea.removeEventListener('blur', this.handleBlur);
+
+                // Add new listeners
+                textarea.addEventListener('input', () => {
+                    // Update note content
+                    const noteData = this.notes.find(n => n.id === note.id);
+                    if (noteData) {
+                        noteData.content = textarea.value;
+                    }
+
+                    // Auto-save with debounce
+                    if (this.saveTimeouts.has(note.id)) {
+                        clearTimeout(this.saveTimeouts.get(note.id));
+                    }
+
+                    const timeout = setTimeout(() => {
+                        this.saveNotes();
+                        this.showSaveIndicator(note.id);
+                    }, 1000);
+
+                    this.saveTimeouts.set(note.id, timeout);
+                });
+
+                textarea.addEventListener('blur', () => {
+                    if (this.saveTimeouts.has(note.id)) {
+                        clearTimeout(this.saveTimeouts.get(note.id));
+                    }
+                    this.saveCurrentNote();
+                    this.showSaveIndicator(note.id);
+                });
+            }
+        });
+    }
+}
+
+// Modal functionality
+class Modal {
+    constructor() {
+        this.modal = document.getElementById('bookmarkModal');
+        this.form = document.getElementById('bookmarkForm');
+        this.closeBtn = document.getElementById('closeModal');
+        this.cancelBtn = document.getElementById('cancelBtn');
+
+        this.setupEventListeners();
+    }
+
+    setupEventListeners() {
+        // Close modal events
+        this.closeBtn.addEventListener('click', () => this.close());
+        this.cancelBtn.addEventListener('click', () => this.close());
+
+        // Close on outside click
+        window.addEventListener('click', (e) => {
+            if (e.target === this.modal) {
+                this.close();
+            }
+        });
+
+        // Form submission
+        this.form.addEventListener('submit', (e) => {
+            e.preventDefault();
+            this.handleSubmit();
+        });
+
+        // Close on Escape key
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape' && this.modal.style.display === 'block') {
+                this.close();
+            }
+        });
+    }
+
+    open() {
+        this.modal.style.display = 'block';
+        document.getElementById('bookmarkName').focus();
+    }
+
+    close() {
+        this.modal.style.display = 'none';
+        this.form.reset();
+        // Clear edit data
+        delete this.modal.dataset.editIndex;
+        delete this.modal.dataset.mode;
+        // Reset modal to add mode
+        document.getElementById('modalTitle').textContent = 'Add Bookmark';
+        document.getElementById('submitBtn').textContent = 'Add Bookmark';
+        document.getElementById('deleteBtn').style.display = 'none';
+    }
+
+    handleSubmit() {
+        const name = document.getElementById('bookmarkName').value.trim();
+        const url = document.getElementById('bookmarkUrl').value.trim();
+        const icon = document.getElementById('bookmarkIcon').value.trim() || 'bookmark';
+
+        if (name && url) {
+            // Ensure URL has protocol
+            const finalUrl = url.startsWith('http') ? url : `https://${url}`;
+
+            const bookmark = {
+                name,
+                url: finalUrl,
+                icon
+            };
+
+            // Check if we're in edit mode
+            if (this.modal.dataset.mode === 'edit') {
+                const editIndex = parseInt(this.modal.dataset.editIndex);
+                bookmarksManager.editBookmark(editIndex, bookmark);
+            } else {
+                bookmarksManager.addBookmark(bookmark);
+            }
+
+            this.close();
+        }
+    }
+}
+
+// Theme and settings removed - using white background only
+
+// Initialize everything when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+    // Initialize clock
+    updateClock();
+    setInterval(updateClock, 1000);
+
+    // Initialize components
+    window.bookmarksManager = new BookmarksManager();
+    window.notePad = new NotePad();
+    window.modal = new Modal();
+
+    // Setup search functionality
+    const searchInput = document.getElementById('searchInput');
+    const searchIcon = document.getElementById('searchIcon');
+
+    searchInput.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter') {
+            handleSearch();
+        }
+    });
+
+    searchIcon.addEventListener('click', handleSearch);
+
+    // Focus search on load
+    searchInput.focus();
+
+    // Display username (passed from Flask template)
+    const usernameElement = document.getElementById('username');
+    if (usernameElement && typeof window.currentUser !== 'undefined') {
+        usernameElement.textContent = window.currentUser;
+    }
+});
+
+// Service Worker for offline capability (future enhancement)
+if ('serviceWorker' in navigator) {
+    window.addEventListener('load', () => {
+        // Service worker registration could be added here
+        console.log('Start page loaded successfully!');
+    });
+}
+
+// Export for potential future use
+window.StartPageAPI = {
+    bookmarksManager: () => window.bookmarksManager,
+    notePad: () => window.notePad,
+    addBookmark: (bookmark) => window.bookmarksManager.addBookmark(bookmark),
+    exportData: () => ({
+        bookmarks: window.bookmarksManager.bookmarks,
+        notes: window.notePad.notes
+    }),
+    importData: (data) => {
+        if (data.bookmarks) {
+            localStorage.setItem('startpage-bookmarks', JSON.stringify(data.bookmarks));
+        }
+        if (data.notes) {
+            localStorage.setItem('startpage-notes', JSON.stringify(data.notes));
+        }
+        location.reload();
+    }
+};
+
+// Rain Effect
+class RainEffect {
+    constructor() {
+        this.rainContainer = document.getElementById('rainContainer');
+        this.rainDrops = [];
+        this.maxDrops = 150;
+        this.init();
+    }
+
+    init() {
+        this.createRain();
+        this.animateRain();
+    }
+
+    createRain() {
+        for (let i = 0; i < this.maxDrops; i++) {
+            this.createRainDrop();
+        }
+    }
+
+    createRainDrop() {
+        const drop = document.createElement('div');
+        drop.className = 'rain-drop';
+
+        // Random horizontal position
+        const x = Math.random() * window.innerWidth;
+
+        // Random size variation
+        const size = Math.random() * 0.8 + 0.2;
+        drop.style.width = `${2 * size}px`;
+        drop.style.height = `${20 * size}px`;
+
+        // Random speed (duration)
+        const duration = Math.random() * 2 + 1; // 1-3 seconds
+        drop.style.animationDuration = `${duration}s`;
+
+        // Random delay
+        const delay = Math.random() * 2;
+        drop.style.animationDelay = `${delay}s`;
+
+        // Position the drop
+        drop.style.left = `${x}px`;
+        drop.style.top = '-20px';
+
+        this.rainContainer.appendChild(drop);
+        this.rainDrops.push(drop);
+    }
+
+    animateRain() {
+        // Clean up and recreate drops periodically
+        setInterval(() => {
+            this.rainDrops.forEach(drop => {
+                const rect = drop.getBoundingClientRect();
+                if (rect.top > window.innerHeight) {
+                    // Reset the drop to the top with new random position
+                    drop.style.left = `${Math.random() * window.innerWidth}px`;
+                    drop.style.top = '-20px';
+
+                    // Randomize properties again
+                    const size = Math.random() * 0.8 + 0.2;
+                    drop.style.width = `${2 * size}px`;
+                    drop.style.height = `${20 * size}px`;
+
+                    const duration = Math.random() * 2 + 1;
+                    drop.style.animationDuration = `${duration}s`;
+                }
+            });
+        }, 100);
+    }
+}
+
+// Initialize rain effect when the page loads
+document.addEventListener('DOMContentLoaded', () => {
+    new RainEffect();
+});
+
+// Account dropdown functionality
+function toggleAccountDropdown() {
+    const dropdown = document.getElementById('accountDropdown');
+    dropdown.classList.toggle('active');
+}
+
+// Close dropdown when clicking outside
+document.addEventListener('click', (e) => {
+    const dropdown = document.getElementById('accountDropdown');
+    const accountBtn = document.querySelector('.account-btn');
+
+    if (!accountBtn.contains(e.target) && !dropdown.contains(e.target)) {
+        dropdown.classList.remove('active');
+    }
+});
+
+// Change Password Modal Functions
+function openChangePasswordModal() {
+    const modal = document.getElementById('passwordModal');
+    modal.style.display = 'block';
+    document.getElementById('accountDropdown').classList.remove('active');
+}
+
+function closePasswordModal() {
+    const modal = document.getElementById('passwordModal');
+    modal.style.display = 'none';
+    document.getElementById('passwordForm').reset();
+}
+
+// Handle password form submission
+document.addEventListener('DOMContentLoaded', () => {
+    const passwordForm = document.getElementById('passwordForm');
+    if (passwordForm) {
+        passwordForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
+
+            const currentPassword = document.getElementById('currentPassword').value;
+            const newPassword = document.getElementById('newPassword').value;
+            const confirmPassword = document.getElementById('confirmPassword').value;
+
+            if (newPassword !== confirmPassword) {
+                alert('New passwords do not match!');
+                return;
+            }
+
+            if (newPassword.length < 6) {
+                alert('Password must be at least 6 characters long!');
+                return;
+            }
+
+            try {
+                const response = await fetch('/api/change-password', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        currentPassword,
+                        newPassword
+                    })
+                });
+
+                const data = await response.json();
+
+                if (response.ok) {
+                    alert('Password changed successfully!');
+                    closePasswordModal();
+                } else {
+                    alert(data.error || 'Failed to change password');
+                }
+            } catch (error) {
+                console.error('Error changing password:', error);
+                alert('Failed to change password. Please try again.');
+            }
+        });
+    }
+});
+
+// Developer Stats Modal Functions
+function openDeveloperPage() {
+    const modal = document.getElementById('developerModal');
+    modal.style.display = 'block';
+    document.getElementById('accountDropdown').classList.remove('active');
+    loadDeveloperStats();
+}
+
+function closeDeveloperModal() {
+    const modal = document.getElementById('developerModal');
+    modal.style.display = 'none';
+
+    // Destroy chart to prevent memory leaks
+    if (activityChart) {
+        activityChart.destroy();
+        activityChart = null;
+    }
+}
+
+async function loadDeveloperStats() {
+    try {
+        const response = await fetch('/api/developer-stats');
+        if (response.ok) {
+            const data = await response.json();
+
+            // Update stats display
+            document.getElementById('totalUsers').textContent = data.totalUsers || 0;
+            document.getElementById('totalVisits').textContent = data.totalVisits || 0;
+            document.getElementById('totalSearches').textContent = data.totalSearches || 0;
+
+            // Create chart
+            createActivityChart(data.monthlyData || []);
+        } else {
+            console.error('Failed to load developer stats');
+        }
+    } catch (error) {
+        console.error('Error loading developer stats:', error);
+    }
+}
+
+let activityChart = null; // Global variable to store chart instance
+
+function createActivityChart(monthlyData) {
+    const canvas = document.getElementById('activityChart');
+    const ctx = canvas.getContext('2d');
+
+    // Destroy existing chart if it exists
+    if (activityChart) {
+        activityChart.destroy();
+    }
+
+    // Generate sample monthly data if none provided
+    if (monthlyData.length === 0) {
+        const currentDate = new Date();
+        monthlyData = [];
+
+        for (let i = 11; i >= 0; i--) {
+            const date = new Date(currentDate.getFullYear(), currentDate.getMonth() - i, 1);
+            const monthName = date.toLocaleString('default', { month: 'short' });
+
+            monthlyData.push({
+                month: monthName,
+                visits: Math.floor(Math.random() * 500) + 200,
+                searches: Math.floor(Math.random() * 300) + 100
+            });
+        }
+    }
+
+    // Extract data for Chart.js
+    const labels = monthlyData.map(data => data.month);
+    const visitsData = monthlyData.map(data => data.visits);
+    const searchesData = monthlyData.map(data => data.searches);
+
+    // Create Chart.js line chart
+    activityChart = new Chart(ctx, {
+        type: 'line',
+        data: {
+            labels: labels,
+            datasets: [
+                {
+                    label: 'Page Visits',
+                    data: visitsData,
+                    borderColor: '#4285f4',
+                    backgroundColor: 'rgba(66, 133, 244, 0.1)',
+                    borderWidth: 3,
+                    fill: true,
+                    tension: 0.4,
+                    pointBackgroundColor: '#4285f4',
+                    pointBorderColor: '#4285f4',
+                    pointHoverBackgroundColor: '#ffffff',
+                    pointHoverBorderColor: '#4285f4',
+                    pointRadius: 5,
+                    pointHoverRadius: 7
+                },
+                {
+                    label: 'Searches',
+                    data: searchesData,
+                    borderColor: '#34a853',
+                    backgroundColor: 'rgba(52, 168, 83, 0.1)',
+                    borderWidth: 3,
+                    fill: true,
+                    tension: 0.4,
+                    pointBackgroundColor: '#34a853',
+                    pointBorderColor: '#34a853',
+                    pointHoverBackgroundColor: '#ffffff',
+                    pointHoverBorderColor: '#34a853',
+                    pointRadius: 5,
+                    pointHoverRadius: 7
+                }
+            ]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: {
+                    display: true,
+                    position: 'top',
+                    labels: {
+                        usePointStyle: true,
+                        padding: 20,
+                        font: {
+                            size: 12,
+                            family: 'Lexend, sans-serif'
+                        }
+                    }
+                },
+                tooltip: {
+                    mode: 'index',
+                    intersect: false,
+                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
+                    titleColor: '#ffffff',
+                    bodyColor: '#ffffff',
+                    borderColor: '#4285f4',
+                    borderWidth: 1,
+                    cornerRadius: 8,
+                    displayColors: true,
+                    titleFont: {
+                        size: 14,
+                        weight: 'bold'
+                    },
+                    bodyFont: {
+                        size: 13
+                    }
+                }
+            },
+            interaction: {
+                mode: 'nearest',
+                axis: 'x',
+                intersect: false
+            },
+            scales: {
+                x: {
+                    display: true,
+                    title: {
+                        display: true,
+                        text: 'Month',
+                        font: {
+                            size: 14,
+                            weight: 'bold',
+                            family: 'Lexend, sans-serif'
+                        },
+                        color: '#666'
+                    },
+                    grid: {
+                        display: true,
+                        color: 'rgba(0, 0, 0, 0.1)'
+                    },
+                    ticks: {
+                        font: {
+                            size: 12,
+                            family: 'Lexend, sans-serif'
+                        },
+                        color: '#666'
+                    }
+                },
+                y: {
+                    display: true,
+                    title: {
+                        display: true,
+                        text: 'Count',
+                        font: {
+                            size: 14,
+                            weight: 'bold',
+                            family: 'Lexend, sans-serif'
+                        },
+                        color: '#666'
+                    },
+                    grid: {
+                        display: true,
+                        color: 'rgba(0, 0, 0, 0.1)'
+                    },
+                    ticks: {
+                        beginAtZero: true,
+                        font: {
+                            size: 12,
+                            family: 'Lexend, sans-serif'
+                        },
+                        color: '#666'
+                    }
+                }
+            },
+            elements: {
+                line: {
+                    borderJoinStyle: 'round'
+                },
+                point: {
+                    borderWidth: 2,
+                    hoverBorderWidth: 3
+                }
+            },
+            animation: {
+                duration: 1500,
+                easing: 'easeInOutQuart'
+            }
+        }
+    });
+}
+
+// Close modals on Escape key
+document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
+        const passwordModal = document.getElementById('passwordModal');
+        const developerModal = document.getElementById('developerModal');
+        const vaultAuthModal = document.getElementById('vaultAuthModal');
+        const vaultModal = document.getElementById('vaultModal');
+        const passwordEntryModal = document.getElementById('passwordEntryModal');
+
+        if (passwordModal.style.display === 'block') {
+            closePasswordModal();
+        }
+        if (developerModal.style.display === 'block') {
+            closeDeveloperModal();
+        }
+        if (vaultAuthModal.style.display === 'block') {
+            closeVaultAuthModal();
+        }
+        if (vaultModal.style.display === 'block') {
+            closeVaultModal();
+        }
+        if (passwordEntryModal.style.display === 'block') {
+            closePasswordEntryModal();
+        }
+    }
+});
+
+// Close modals when clicking outside
+window.addEventListener('click', (e) => {
+    const passwordModal = document.getElementById('passwordModal');
+    const developerModal = document.getElementById('developerModal');
+    const vaultAuthModal = document.getElementById('vaultAuthModal');
+    const vaultModal = document.getElementById('vaultModal');
+    const passwordEntryModal = document.getElementById('passwordEntryModal');
+
+    if (e.target === passwordModal) {
+        closePasswordModal();
+    }
+    if (e.target === developerModal) {
+        closeDeveloperModal();
+    }
+    if (e.target === vaultAuthModal) {
+        closeVaultAuthModal();
+    }
+    if (e.target === vaultModal) {
+        closeVaultModal();
+    }
+    if (e.target === passwordEntryModal) {
+        closePasswordEntryModal();
+    }
+});
+
+// Vault functionality
+let vaultPasswords = [];
+let currentEditingPassword = null;
+
+function openVaultPage() {
+    document.getElementById('accountDropdown').classList.remove('active');
+    document.getElementById('vaultAuthModal').style.display = 'block';
+}
+
+function closeVaultAuthModal() {
+    document.getElementById('vaultAuthModal').style.display = 'none';
+    document.getElementById('vaultAuthForm').reset();
+}
+
+function openVaultModal() {
+    document.getElementById('vaultModal').style.display = 'block';
+    loadVaultPasswords();
+}
+
+function closeVaultModal() {
+    document.getElementById('vaultModal').style.display = 'none';
+    vaultPasswords = [];
+    renderVaultPasswords();
+}
+
+function openAddPasswordModal() {
+    currentEditingPassword = null;
+    document.getElementById('passwordEntryTitle').textContent = 'Add Password';
+    document.getElementById('savePasswordBtn').textContent = 'Save Password';
+    document.getElementById('deletePasswordBtn').style.display = 'none';
+    document.getElementById('passwordEntryForm').reset();
+    document.getElementById('passwordEntryModal').style.display = 'block';
+}
+
+function openEditPasswordModal(index) {
+    currentEditingPassword = index;
+    const password = vaultPasswords[index];
+
+    document.getElementById('passwordEntryTitle').textContent = 'Edit Password';
+    document.getElementById('savePasswordBtn').textContent = 'Update Password';
+    document.getElementById('deletePasswordBtn').style.display = 'block';
+
+    document.getElementById('entryTitle').value = password.title;
+    document.getElementById('entryUsername').value = password.username || '';
+    document.getElementById('entryPassword').value = password.password;
+    document.getElementById('entryWebsite').value = password.website || '';
+    document.getElementById('entryNotes').value = password.notes || '';
+
+    document.getElementById('passwordEntryModal').style.display = 'block';
+}
+
+function closePasswordEntryModal() {
+    document.getElementById('passwordEntryModal').style.display = 'none';
+    document.getElementById('passwordEntryForm').reset();
+    currentEditingPassword = null;
+}
+
+async function loadVaultPasswords() {
+    try {
+        const response = await fetch('/api/vault/passwords');
+        if (response.ok) {
+            vaultPasswords = await response.json();
+        } else {
+            vaultPasswords = [];
+        }
+        renderVaultPasswords();
+    } catch (error) {
+        console.error('Failed to load vault passwords:', error);
+        vaultPasswords = [];
+        renderVaultPasswords();
+    }
+}
+
+async function saveVaultPassword(passwordData) {
+    try {
+        const response = await fetch('/api/vault/passwords', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(passwordData)
+        });
+
+        if (response.ok) {
+            loadVaultPasswords();
+            return true;
+        } else {
+            console.error('Failed to save password');
+            return false;
+        }
+    } catch (error) {
+        console.error('Failed to save password:', error);
+        return false;
+    }
+}
+
+async function deleteVaultPassword(index) {
+    try {
+        const password = vaultPasswords[index];
+        const response = await fetch(`/api/vault/passwords/${password.id}`, {
+            method: 'DELETE'
+        });
+
+        if (response.ok) {
+            loadVaultPasswords();
+            return true;
+        } else {
+            console.error('Failed to delete password');
+            return false;
+        }
+    } catch (error) {
+        console.error('Failed to delete password:', error);
+        return false;
+    }
+}
+
+function renderVaultPasswords() {
+    const vaultList = document.getElementById('vaultList');
+    const searchTerm = document.getElementById('vaultSearchInput').value.toLowerCase();
+
+    // Filter passwords based on search term
+    const filteredPasswords = vaultPasswords.filter(password =>
+        password.title.toLowerCase().includes(searchTerm) ||
+        (password.username && password.username.toLowerCase().includes(searchTerm)) ||
+        (password.website && password.website.toLowerCase().includes(searchTerm)) ||
+        (password.notes && password.notes.toLowerCase().includes(searchTerm))
+    );
+
+    if (filteredPasswords.length === 0) {
+        vaultList.innerHTML = `
+            <div class="vault-empty">
+                <div class="material-icons">lock</div>
+                <p>${searchTerm ? 'No passwords found matching your search.' : 'Your vault is empty. Add your first password!'}</p>
+            </div>
+        `;
+        return;
+    }
+
+    vaultList.innerHTML = filteredPasswords.map((password, originalIndex) => {
+        const index = vaultPasswords.indexOf(password);
+        return `
+            <div class="vault-entry" onclick="openEditPasswordModal(${index})">
+                <div class="vault-entry-header">
+                    <div class="vault-entry-title">${password.title}</div>
+                    <div class="vault-entry-actions" onclick="event.stopPropagation();">
+                        <button class="vault-action-btn" onclick="copyToClipboard('${password.password}', 'Password')" title="Copy Password">
+                            <span class="material-icons">content_copy</span>
+                        </button>
+                        <button class="vault-action-btn" onclick="openEditPasswordModal(${index})" title="Edit">
+                            <span class="material-icons">edit</span>
+                        </button>
+                    </div>
+                </div>
+                <div class="vault-entry-info">
+                    ${password.username ? `
+                        <span class="vault-entry-label">Username:</span>
+                        <span class="vault-entry-value">${password.username}</span>
+                    ` : ''}
+                    ${password.website ? `
+                        <span class="vault-entry-label">Website:</span>
+                        <span class="vault-entry-value">${password.website}</span>
+                    ` : ''}
+                    ${password.notes ? `
+                        <span class="vault-entry-label">Notes:</span>
+                        <span class="vault-entry-value">${password.notes}</span>
+                    ` : ''}
+                </div>
+            </div>
+        `;
+    }).join('');
+}
+
+function copyToClipboard(text, type) {
+    navigator.clipboard.writeText(text).then(() => {
+        // Show temporary success message
+        const message = document.createElement('div');
+        message.style.cssText = `
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            background: #4caf50;
+            color: white;
+            padding: 12px 20px;
+            border-radius: 8px;
+            z-index: 10000;
+            font-size: 14px;
+        `;
+        message.textContent = `${type} copied to clipboard!`;
+        document.body.appendChild(message);
+
+        setTimeout(() => {
+            document.body.removeChild(message);
+        }, 2000);
+    }).catch(() => {
+        alert('Failed to copy to clipboard');
+    });
+}
+
+function togglePasswordVisibility(inputId) {
+    const input = document.getElementById(inputId);
+    const toggleBtn = input.parentNode.querySelector('.password-toggle-btn span');
+
+    if (input.type === 'password') {
+        input.type = 'text';
+        toggleBtn.textContent = 'visibility_off';
+    } else {
+        input.type = 'password';
+        toggleBtn.textContent = 'visibility';
+    }
+}
+
+function generatePassword() {
+    const length = 16;
+    const charset = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*';
+    let password = '';
+
+    for (let i = 0; i < length; i++) {
+        password += charset.charAt(Math.floor(Math.random() * charset.length));
+    }
+
+    document.getElementById('entryPassword').value = password;
+    updatePasswordStrength(password);
+}
+
+function updatePasswordStrength(password) {
+    const strengthIndicator = document.querySelector('.password-strength-bar');
+    if (!strengthIndicator) return;
+
+    let strength = 0;
+
+    if (password.length >= 8) strength++;
+    if (/[a-z]/.test(password)) strength++;
+    if (/[A-Z]/.test(password)) strength++;
+    if (/[0-9]/.test(password)) strength++;
+    if (/[^A-Za-z0-9]/.test(password)) strength++;
+
+    const classes = ['strength-weak', 'strength-fair', 'strength-good', 'strength-strong'];
+    strengthIndicator.className = 'password-strength-bar ' + (classes[Math.min(strength - 1, 3)] || '');
+}
+
+// Initialize vault event listeners
+document.addEventListener('DOMContentLoaded', () => {
+    // Vault authentication form
+    const vaultAuthForm = document.getElementById('vaultAuthForm');
+    if (vaultAuthForm) {
+        vaultAuthForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
+
+            const password = document.getElementById('vaultPassword').value;
+
+            try {
+                const response = await fetch('/api/vault/authenticate', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({ password })
+                });
+
+                if (response.ok) {
+                    closeVaultAuthModal();
+                    openVaultModal();
+                } else {
+                    const data = await response.json();
+                    alert(data.error || 'Invalid password');
+                }
+            } catch (error) {
+                console.error('Vault authentication failed:', error);
+                alert('Authentication failed. Please try again.');
+            }
+        });
+    }
+
+    // Password entry form
+    const passwordEntryForm = document.getElementById('passwordEntryForm');
+    if (passwordEntryForm) {
+        passwordEntryForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
+
+            const passwordData = {
+                title: document.getElementById('entryTitle').value,
+                username: document.getElementById('entryUsername').value,
+                password: document.getElementById('entryPassword').value,
+                website: document.getElementById('entryWebsite').value,
+                notes: document.getElementById('entryNotes').value
+            };
+
+            if (currentEditingPassword !== null) {
+                passwordData.id = vaultPasswords[currentEditingPassword].id;
+            }
+
+            const success = await saveVaultPassword(passwordData);
+            if (success) {
+                closePasswordEntryModal();
+            } else {
+                alert('Failed to save password. Please try again.');
+            }
+        });
+    }
+
+    // Delete password button
+    const deletePasswordBtn = document.getElementById('deletePasswordBtn');
+    if (deletePasswordBtn) {
+        deletePasswordBtn.addEventListener('click', async () => {
+            if (currentEditingPassword !== null) {
+                if (confirm('Are you sure you want to delete this password?')) {
+                    const success = await deleteVaultPassword(currentEditingPassword);
+                    if (success) {
+                        closePasswordEntryModal();
+                    } else {
+                        alert('Failed to delete password. Please try again.');
+                    }
+                }
+            }
+        });
+    }
+
+    // Vault search functionality
+    const vaultSearchInput = document.getElementById('vaultSearchInput');
+    if (vaultSearchInput) {
+        vaultSearchInput.addEventListener('input', () => {
+            renderVaultPasswords();
+        });
+    }
+
+    // Password strength indicator
+    const entryPasswordInput = document.getElementById('entryPassword');
+    if (entryPasswordInput) {
+        entryPasswordInput.addEventListener('input', (e) => {
+            updatePasswordStrength(e.target.value);
+        });
+    }
+});

static/styles.css

@@ -0,0 +1,978 @@
+@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Lexend:wght@100..900&display=swap');
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: "Lexend", sans-serif;
+}
+
+body {
+    font-family: 'Roboto', sans-serif;
+    /* background: linear-gradient(135deg, #e3f2fd 0%, #f5f5f5 50%, #e8f5e8 100%); */
+    background: #4285f4;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    color: #333;
+    position: relative;
+    overflow: hidden;
+}
+
+/* Rain Effect Styles */
+.rain-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: -1;
+}
+
+.rain-drop {
+    position: absolute;
+    width: 2px;
+    height: 20px;
+    /* background: linear-gradient(to bottom, rgba(174, 194, 224, 0.8), rgba(174, 194, 224, 0.3)); */
+    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.9));
+    border-radius: 50%;
+    animation: fall linear infinite;
+}
+
+@keyframes fall {
+    0% {
+        transform: translateY(-100vh);
+        opacity: 1;
+    }
+
+    100% {
+        transform: translateY(100vh);
+        opacity: 0;
+    }
+}
+
+.container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+    /* max-width: 1200px; */
+    margin: 0 auto;
+    width: 100%;
+}
+
+/* Top Bar */
+.top-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+/* User Info Styles */
+.user-info {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    color: #ffffff;
+    font-size: 1rem;
+    font-weight: 500;
+    position: relative;
+    margin-right: 20px;
+}
+
+.account-btn {
+    background: rgba(255, 255, 255, 0.2);
+    border: none;
+    border-radius: 50%;
+    width: 50px;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    color: #ffffff;
+}
+
+.account-btn:hover {
+    background: rgba(255, 255, 255, 0.3);
+    transform: scale(1.1);
+}
+
+.account-btn .material-icons {
+    font-size: 2rem;
+}
+
+/* Account Dropdown */
+.account-dropdown {
+    position: absolute;
+    top: 50px;
+    left: 0;
+    background: white;
+    border-radius: 12px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+    min-width: 220px;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-10px);
+    transition: all 0.3s ease;
+    z-index: 1000;
+}
+
+.account-dropdown.active {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+}
+
+.dropdown-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 16px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.dropdown-header .material-icons {
+    color: #4285f4;
+    font-size: 1.5rem;
+}
+
+.dropdown-username {
+    color: #333;
+    font-weight: 500;
+}
+
+.dropdown-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 16px;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+    color: #333;
+}
+
+.dropdown-item:hover {
+    background-color: rgba(66, 133, 244, 0.1);
+}
+
+.dropdown-item .material-icons {
+    font-size: 1.2rem;
+    color: #666;
+}
+
+.dropdown-divider {
+    height: 1px;
+    background-color: rgba(0, 0, 0, 0.1);
+    margin: 8px 0;
+}
+
+.logout-btn {
+    background: rgba(255, 255, 255, 0.2);
+    border: none;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    color: #ffffff;
+}
+
+.logout-btn:hover {
+    background: rgba(255, 255, 255, 0.3);
+    transform: scale(1.1);
+}
+
+.logout-btn .material-icons {
+    font-size: 1.2rem;
+}
+
+.username {
+    font-size: 1.1rem;
+    color: #ffffff;
+    margin-right: 20px;
+}
+
+/* Clock Styles */
+.clock {
+    color: #ffffff;
+    text-align: left;
+    text-shadow: none;
+    width: 320px;
+}
+
+.time {
+    font-family: "Lexend", sans-serif;
+    font-size: 3rem;
+    /* font-weight: 300; */
+    margin-bottom: 8px;
+}
+
+.date {
+    font-size: 1.1rem;
+    font-weight: 400;
+    opacity: 0.9;
+}
+
+/* Search Bar Styles */
+.search-container {
+    width: 100%;
+    /* max-width: 400px; */
+    margin-right: 50px;
+    position: relative;
+}
+
+.search-container::placeholder {
+    color: #999;
+    font-family: "Lexend", sans-serif;
+}
+
+.search-box {
+    width: 100%;
+    padding: 16px 24px;
+    border: none;
+    border-radius: 50px;
+    font-size: 1.1rem;
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(10px);
+    /* box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); */
+    outline: none;
+    transition: all 0.3s ease;
+    /* border: 2px solid rgba(0, 0, 0, 0.2); */
+}
+
+.search-icon {
+    position: absolute;
+    right: 20px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #666;
+    cursor: pointer;
+    transition: color 0.3s ease;
+}
+
+.search-icon:hover {
+    color: #4285f4;
+}
+
+/* Main Content Grid */
+.main-content {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 30px;
+    width: 100%;
+    /* max-width: 1000px; */
+    margin: 0 auto;
+    flex: 1;
+}
+
+/* Card Styles */
+.card {
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(10px);
+    border-radius: 16px;
+    padding: 24px;
+    /* box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); */
+    transition: all 0.3s ease;
+}
+
+.card-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+    padding-bottom: 16px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.card-icon {
+    margin-right: 12px;
+    color: #4285f4;
+}
+
+.card-title {
+    font-size: 1.3rem;
+    font-weight: 500;
+    color: #333;
+}
+
+/* Bookmarks Styles */
+.bookmarks-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+    gap: 16px;
+    max-height: 400px;
+    overflow-y: auto;
+    padding-right: 8px;
+}
+
+/* Custom scrollbar for bookmarks */
+.bookmarks-grid::-webkit-scrollbar {
+    width: 4px;
+}
+
+.bookmarks-grid::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 2px;
+}
+
+.bookmarks-grid::-webkit-scrollbar-thumb {
+    background: #4285f4;
+    border-radius: 2px;
+}
+
+.bookmarks-grid::-webkit-scrollbar-thumb:hover {
+    background: #3367d6;
+}
+
+.bookmark {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 16px;
+    border-radius: 12px;
+    background: rgba(66, 133, 244, 0.1);
+    text-decoration: none;
+    color: #333;
+    transition: all 0.3s ease;
+    cursor: pointer;
+}
+
+.bookmark:hover {
+    background: rgba(66, 133, 244, 0.2);
+    transform: translateY(-2px);
+}
+
+.bookmark-icon {
+    font-size: 2rem;
+    margin-bottom: 8px;
+    color: #4285f4;
+}
+
+.bookmark-name {
+    font-size: 0.9rem;
+    text-align: center;
+    font-weight: 500;
+}
+
+.bookmark-url {
+    font-size: 0.8rem;
+    color: #666;
+    margin-top: 4px;
+}
+
+/* Notepad Styles */
+.notepad-container {
+    /* height: 500px; */
+    height: calc(100% - 50px);
+    display: flex;
+    flex-direction: column;
+}
+
+.notes-tabs {
+    display: flex;
+    margin-bottom: 16px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.note-tab {
+    padding: 8px 16px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    border-bottom: 2px solid transparent;
+    transition: all 0.3s ease;
+    font-size: 0.9rem;
+    color: #666;
+    position: relative;
+}
+
+.note-tab.active {
+    color: #4285f4;
+    border-bottom-color: #4285f4;
+}
+
+.note-tab:hover {
+    background: rgba(0, 0, 0, 0.05);
+}
+
+.note-tab .close-note {
+    margin-left: 8px;
+    font-size: 0.8rem;
+    opacity: 0.6;
+}
+
+.note-tab .close-note:hover {
+    opacity: 1;
+    color: #f44336;
+}
+
+.add-note-btn {
+    padding: 8px 12px;
+    background: rgba(66, 133, 244, 0.1);
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    color: #4285f4;
+    font-size: 0.9rem;
+    transition: all 0.3s ease;
+    margin-left: 8px;
+}
+
+.add-note-btn:hover {
+    background: rgba(66, 133, 244, 0.2);
+}
+
+.note-content {
+    flex: 1;
+    display: none;
+    flex-direction: column;
+}
+
+.note-content.active {
+    display: flex;
+}
+
+.notepad-textarea {
+    flex: 1;
+    border: none;
+    resize: none;
+    font-family: 'Lexend', sans-serif;
+    font-size: 1rem;
+    line-height: 1.5;
+    padding: 16px;
+    border-radius: 8px;
+    background: rgba(0, 0, 0, 0.02);
+    outline: none;
+    transition: all 0.3s ease;
+    min-height: 300px;
+}
+
+.notepad-textarea:focus {
+    background: rgba(0, 0, 0, 0.05);
+}
+
+.notepad-textarea::placeholder {
+    color: #999;
+    font-family: "Lexend", sans-serif;
+}
+
+.notepad-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 12px;
+    font-size: 0.9rem;
+    color: #666;
+}
+
+.save-indicator {
+    color: #4caf50;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.save-indicator.visible {
+    opacity: 1;
+}
+
+/* Add Bookmark Button */
+.add-bookmark-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 12px;
+    background: rgba(66, 133, 244, 0.1);
+    border: 2px dashed rgba(66, 133, 244, 0.3);
+    border-radius: 12px;
+    color: #4285f4;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    text-decoration: none;
+}
+
+.add-bookmark-btn:hover {
+    background: rgba(66, 133, 244, 0.2);
+    border-color: rgba(66, 133, 244, 0.5);
+}
+
+/* Modal Styles */
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(5px);
+}
+
+.modal-content {
+    background: white;
+    margin: 15% auto;
+    padding: 24px;
+    border-radius: 16px;
+    width: 90%;
+    max-width: 400px;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+}
+
+/* Password Entry Modal - needs less top margin due to height */
+#passwordEntryModal .modal-content {
+    margin: 5% auto;
+    max-width: 500px;
+}
+
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.modal-title {
+    font-size: 1.3rem;
+    font-weight: 500;
+}
+
+.close-btn {
+    background: none;
+    border: none;
+    font-size: 1.5rem;
+    cursor: pointer;
+    color: #666;
+    padding: 4px;
+}
+
+.form-group {
+    margin-bottom: 16px;
+}
+
+.form-label {
+    display: block;
+    margin-bottom: 8px;
+    font-weight: 500;
+    color: #333;
+}
+
+.form-input {
+    width: 100%;
+    padding: 12px;
+    border: 2px solid #e0e0e0;
+    border-radius: 8px;
+    font-size: 1rem;
+    outline: none;
+    transition: border-color 0.3s ease;
+}
+
+.form-input:focus {
+    border-color: #4285f4;
+}
+
+.btn {
+    background: #4285f4;
+    color: white;
+    border: none;
+    padding: 12px 24px;
+    border-radius: 8px;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.btn:hover {
+    background: #3367d6;
+    transform: translateY(-1px);
+}
+
+.btn-secondary {
+    background: #f0f0f0;
+    color: #333;
+    margin-right: 12px;
+}
+
+.btn-secondary:hover {
+    background: #e0e0e0;
+}
+
+.btn-danger {
+    background: #dc3545;
+    color: white;
+    border: none;
+    padding: 12px 24px;
+    border-radius: 8px;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.btn-danger:hover {
+    background: #c82333;
+}
+
+/* Developer Modal Styles */
+.developer-modal {
+    max-width: 1000px;
+    width: 90%;
+    margin: 5% auto;
+}
+
+.developer-content {
+    padding: 20px 0;
+}
+
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 20px;
+    margin-bottom: 30px;
+}
+
+.stat-card {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    padding: 20px;
+    background: rgba(66, 133, 244, 0.1);
+    border-radius: 12px;
+    transition: all 0.3s ease;
+}
+
+.stat-icon {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    background: #4285f4;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+}
+
+.stat-icon .material-icons {
+    font-size: 1.5rem;
+}
+
+.stat-info h4 {
+    font-size: 1.8rem;
+    font-weight: 700;
+    margin: 0;
+    color: #333;
+}
+
+.stat-info p {
+    font-size: 0.9rem;
+    color: #666;
+    margin: 2px 0 0 0;
+}
+
+.chart-container {
+    background: rgba(0, 0, 0, 0.02);
+    border-radius: 12px;
+    padding: 20px;
+    text-align: center;
+    height: 350px;
+}
+
+.chart-container h4 {
+    margin-bottom: 20px;
+    color: #333;
+    font-size: 1.2rem;
+    font-weight: 600;
+}
+
+#activityChart {
+    max-width: 100%;
+    height: 300px !important;
+}
+
+/* Vault Styles */
+.vault-modal {
+    max-width: 900px;
+    width: 95%;
+    margin: 3% auto;
+    max-height: 85vh;
+}
+
+.vault-content {
+    padding: 20px 0;
+    max-height: 70vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.vault-auth-content {
+    text-align: center;
+    padding: 20px;
+}
+
+.vault-lock-icon {
+    font-size: 3rem;
+    color: #4285f4;
+    margin-bottom: 20px;
+}
+
+.vault-lock-icon .material-icons {
+    font-size: 3rem;
+}
+
+.vault-toolbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+    gap: 20px;
+}
+
+.vault-search {
+    flex: 1;
+    position: relative;
+    max-width: 400px;
+}
+
+.search-input {
+    width: 100%;
+    padding: 12px 45px 12px 16px;
+    border: 2px solid #e0e0e0;
+    border-radius: 25px;
+    font-size: 1rem;
+    outline: none;
+    transition: border-color 0.3s ease;
+    background: rgba(255, 255, 255, 0.95);
+}
+
+.search-input:focus {
+    border-color: #4285f4;
+}
+
+.vault-search .search-icon {
+    position: absolute;
+    right: 15px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #666;
+    cursor: pointer;
+}
+
+.add-password-btn {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    white-space: nowrap;
+}
+
+.vault-list {
+    flex: 1;
+    overflow-y: auto;
+    border-radius: 12px;
+    background: rgba(0, 0, 0, 0.02);
+    padding: 10px;
+    max-height: 400px;
+}
+
+.vault-entry {
+    background: white;
+    border-radius: 12px;
+    padding: 16px;
+    margin-bottom: 12px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    cursor: pointer;
+    transition: all 0.3s ease;
+    border-left: 4px solid #4285f4;
+}
+
+.vault-entry-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+}
+
+.vault-entry-title {
+    font-weight: 600;
+    font-size: 1.1rem;
+    color: #333;
+}
+
+.vault-entry-actions {
+    display: flex;
+    gap: 8px;
+}
+
+.vault-action-btn {
+    background: none;
+    border: none;
+    padding: 6px;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    color: #666;
+}
+
+.vault-action-btn:hover {
+    background: rgba(66, 133, 244, 0.1);
+    color: #4285f4;
+}
+
+.vault-entry-info {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 8px 16px;
+    font-size: 0.9rem;
+    color: #666;
+}
+
+.vault-entry-label {
+    font-weight: 500;
+    color: #333;
+}
+
+.vault-entry-value {
+    word-break: break-word;
+}
+
+.password-input-container {
+    position: relative;
+    display: flex;
+}
+
+.password-input-container .form-input {
+    padding-right: 80px;
+}
+
+.password-toggle-btn,
+.password-generate-btn {
+    position: absolute;
+    right: 5px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: none;
+    border: none;
+    padding: 8px;
+    cursor: pointer;
+    color: #666;
+    border-radius: 50%;
+    transition: all 0.3s ease;
+}
+
+.password-toggle-btn {
+    right: 40px;
+}
+
+.password-generate-btn {
+    right: 5px;
+}
+
+.password-toggle-btn:hover,
+.password-generate-btn:hover {
+    background: rgba(66, 133, 244, 0.1);
+    color: #4285f4;
+}
+
+.vault-empty {
+    text-align: center;
+    padding: 40px;
+    color: #666;
+}
+
+.vault-empty .material-icons {
+    font-size: 3rem;
+    color: #ccc;
+    margin-bottom: 16px;
+}
+
+.password-strength {
+    margin-top: 5px;
+    height: 4px;
+    border-radius: 2px;
+    background: #e0e0e0;
+    overflow: hidden;
+}
+
+.password-strength-bar {
+    height: 100%;
+    transition: all 0.3s ease;
+    border-radius: 2px;
+}
+
+.strength-weak {
+    background: #f44336;
+    width: 25%;
+}
+
+.strength-fair {
+    background: #ff9800;
+    width: 50%;
+}
+
+.strength-good {
+    background: #2196f3;
+    width: 75%;
+}
+
+.strength-strong {
+    background: #4caf50;
+    width: 100%;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .top-bar {
+        flex-direction: column;
+        gap: 20px;
+        align-items: center;
+    }
+
+    .main-content {
+        grid-template-columns: 1fr;
+        gap: 20px;
+    }
+
+    .time {
+        font-size: 2.5rem;
+    }
+
+    .bookmarks-grid {
+        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+    }
+
+    .card {
+        padding: 20px;
+    }
+
+    .search-container {
+        max-width: 100%;
+    }
+}
+
+@media (max-width: 480px) {
+    .time {
+        font-size: 2rem;
+    }
+
+    .container {
+        padding: 15px;
+    }
+
+    .modal-content {
+        margin: 10% auto;
+        width: 95%;
+    }
+
+    .notes-tabs {
+        flex-wrap: wrap;
+        gap: 4px;
+    }
+
+    .note-tab {
+        padding: 6px 12px;
+        font-size: 0.8rem;
+    }
+}

templates/auth.html

@@ -0,0 +1,362 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Start Suite - Login</title>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='icon.png') }}">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Lexend:wght@100..900&display=swap');
+
+        * {
+            margin: 0;
+            padding: 0;
+            font-family: "Lexend", sans-serif;
+        }
+
+        body {
+            font-family: 'Roboto', sans-serif;
+            background: #4285f4;
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #333;
+            overflow: hidden;
+            position: relative;
+        }
+
+        /* Rain Effect Styles */
+        .rain-container {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            z-index: 1;
+        }
+
+        .rain-drop {
+            position: absolute;
+            background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.2));
+            border-radius: 50px;
+            animation: fall linear infinite;
+            opacity: 0.7;
+        }
+
+        @keyframes fall {
+            0% {
+                transform: translateY(-20px);
+                opacity: 1;
+            }
+
+            100% {
+                transform: translateY(100vh);
+                opacity: 0.3;
+            }
+        }
+
+        .auth-container {
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 20px;
+            padding: 40px;
+            width: 100%;
+            max-width: 400px;
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+            backdrop-filter: blur(10px);
+            position: relative;
+            z-index: 2;
+        }
+
+        .auth-header {
+            text-align: center;
+            margin-bottom: 30px;
+        }
+
+        .auth-title {
+            font-size: 2rem;
+            font-weight: 700;
+            color: #333;
+            margin-bottom: 10px;
+        }
+
+        .auth-subtitle {
+            color: #666;
+            font-size: 1rem;
+        }
+
+        .auth-form {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+
+        .form-group {
+            position: relative;
+        }
+
+        .form-input {
+            width: calc(100% - 42px);
+            padding: 15px 20px;
+            border: 2px solid #e1e5e9;
+            border-radius: 10px;
+            font-size: 1rem;
+            transition: all 0.3s ease;
+            background: white;
+        }
+
+        .form-input:focus {
+            outline: none;
+            border-color: #667eea;
+            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+        }
+
+        .form-input::placeholder {
+            color: #999;
+        }
+
+        .auth-btn {
+            padding: 15px 30px;
+            border: none;
+            border-radius: 10px;
+            font-size: 1rem;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            background: #667eea;
+            color: white;
+        }
+
+        .auth-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
+        }
+
+        .auth-btn:active {
+            transform: translateY(0);
+        }
+
+        .auth-toggle {
+            text-align: center;
+            margin-top: 20px;
+        }
+
+        .auth-toggle a {
+            color: #667eea;
+            text-decoration: none;
+            font-weight: 500;
+            cursor: pointer;
+        }
+
+        .auth-toggle a:hover {
+            text-decoration: underline;
+        }
+
+        .error-message {
+            color: #e74c3c;
+            font-size: 0.9rem;
+            margin-top: 10px;
+            text-align: center;
+        }
+
+        .success-message {
+            color: #27ae60;
+            font-size: 0.9rem;
+            margin-top: 10px;
+            text-align: center;
+        }
+
+        .hidden {
+            display: none;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="rain-container" id="rainContainer"></div>
+
+    <div class="auth-container">
+        <div class="auth-header">
+            <h1 class="auth-title">Start Suite</h1>
+            <p class="auth-subtitle">Your personalized dashboard</p>
+        </div>
+
+        <form class="auth-form" id="loginForm">
+            <div class="form-group">
+                <input type="text" class="form-input" id="username" placeholder="Username" required>
+            </div>
+            <div class="form-group">
+                <input type="password" class="form-input" id="password" placeholder="Password" required>
+            </div>
+            <button type="submit" class="auth-btn" id="authBtn">Login</button>
+            <div class="error-message hidden" id="errorMessage"></div>
+            <div class="success-message hidden" id="successMessage"></div>
+        </form>
+
+        <div class="auth-toggle">
+            <span id="toggleText">Don't have an account? </span>
+            <a href="#" id="toggleLink">Sign up</a>
+        </div>
+    </div>
+
+    <script>
+        let isLoginMode = true;
+        const form = document.getElementById('loginForm');
+        const authBtn = document.getElementById('authBtn');
+        const toggleLink = document.getElementById('toggleLink');
+        const toggleText = document.getElementById('toggleText');
+        const errorMessage = document.getElementById('errorMessage');
+        const successMessage = document.getElementById('successMessage');
+
+        function showError(message) {
+            errorMessage.textContent = message;
+            errorMessage.classList.remove('hidden');
+            successMessage.classList.add('hidden');
+        }
+
+        function showSuccess(message) {
+            successMessage.textContent = message;
+            successMessage.classList.remove('hidden');
+            errorMessage.classList.add('hidden');
+        }
+
+        function hideMessages() {
+            errorMessage.classList.add('hidden');
+            successMessage.classList.add('hidden');
+        }
+
+        toggleLink.addEventListener('click', (e) => {
+            e.preventDefault();
+            isLoginMode = !isLoginMode;
+
+            if (isLoginMode) {
+                authBtn.textContent = 'Login';
+                toggleText.textContent = "Don't have an account? ";
+                toggleLink.textContent = 'Sign up';
+            } else {
+                authBtn.textContent = 'Sign Up';
+                toggleText.textContent = 'Already have an account? ';
+                toggleLink.textContent = 'Login';
+            }
+
+            hideMessages();
+        });
+
+        form.addEventListener('submit', async (e) => {
+            e.preventDefault();
+
+            const username = document.getElementById('username').value;
+            const password = document.getElementById('password').value;
+
+            if (!username || !password) {
+                showError('Please fill in all fields');
+                return;
+            }
+
+            const endpoint = isLoginMode ? '/login' : '/register';
+
+            try {
+                const response = await fetch(endpoint, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({ username, password })
+                });
+
+                const data = await response.json();
+
+                if (response.ok) {
+                    showSuccess(data.message);
+                    setTimeout(() => {
+                        window.location.href = '/';
+                    }, 1000);
+                } else {
+                    showError(data.error);
+                }
+            } catch (error) {
+                showError('An error occurred. Please try again.');
+            }
+        });
+
+        // Rain Effect
+        class RainEffect {
+            constructor() {
+                this.rainContainer = document.getElementById('rainContainer');
+                this.rainDrops = [];
+                this.maxDrops = 100;
+                this.init();
+            }
+
+            init() {
+                this.createRain();
+                this.animateRain();
+            }
+
+            createRain() {
+                for (let i = 0; i < this.maxDrops; i++) {
+                    this.createRainDrop();
+                }
+            }
+
+            createRainDrop() {
+                const drop = document.createElement('div');
+                drop.className = 'rain-drop';
+
+                // Random horizontal position
+                const x = Math.random() * window.innerWidth;
+
+                // Random size variation
+                const size = Math.random() * 0.8 + 0.2;
+                drop.style.width = `${2 * size}px`;
+                drop.style.height = `${20 * size}px`;
+
+                // Random speed (duration)
+                const duration = Math.random() * 2 + 1; // 1-3 seconds
+                drop.style.animationDuration = `${duration}s`;
+
+                // Random delay
+                const delay = Math.random() * 2;
+                drop.style.animationDelay = `${delay}s`;
+
+                // Position the drop
+                drop.style.left = `${x}px`;
+                drop.style.top = '-20px';
+
+                this.rainContainer.appendChild(drop);
+                this.rainDrops.push(drop);
+            }
+
+            animateRain() {
+                // Clean up and recreate drops periodically
+                setInterval(() => {
+                    this.rainDrops.forEach(drop => {
+                        const rect = drop.getBoundingClientRect();
+                        if (rect.top > window.innerHeight) {
+                            // Reset the drop to the top with new random position
+                            drop.style.left = `${Math.random() * window.innerWidth}px`;
+                            drop.style.top = '-20px';
+
+                            // Randomize properties again
+                            const size = Math.random() * 0.8 + 0.2;
+                            drop.style.width = `${2 * size}px`;
+                            drop.style.height = `${20 * size}px`;
+
+                            const duration = Math.random() * 2 + 1;
+                            drop.style.animationDuration = `${duration}s`;
+                        }
+                    });
+                }, 100);
+            }
+        }
+
+        // Initialize rain effect when the page loads
+        new RainEffect();
+    </script>
+</body>
+
+</html>

templates/index.html

@@ -0,0 +1,346 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Start Suite</title>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='icon.png') }}">
+</head>
+
+<body>
+    <!-- Rain Effect Background -->
+    <div class="rain-container" id="rainContainer"></div>
+
+    <div class="container">
+        <!-- Top Bar with Clock and Search -->
+        <div class="top-bar">
+            <!-- User Info -->
+            <div class="user-info">
+                <button class="account-btn" onclick="toggleAccountDropdown()">
+                    <span class="material-icons">account_circle</span>
+                </button>
+
+                <!-- Account Dropdown -->
+                <div class="account-dropdown" id="accountDropdown">
+                    <div class="dropdown-header">
+                        <span class="material-icons">person</span>
+                        <span id="username" class="dropdown-username">{{ username }}</span>
+                    </div>
+                    <!-- <div class="dropdown-divider"></div> -->
+                    <div class="dropdown-item" onclick="openChangePasswordModal()">
+                        <span class="material-icons">lock</span>
+                        <span>Change Password</span>
+                    </div>
+                    <div class="dropdown-item" onclick="openVaultPage()">
+                        <span class="material-icons">security</span>
+                        <span>Password Vault</span>
+                    </div>
+                    <div class="dropdown-item" onclick="openDeveloperPage()">
+                        <span class="material-icons">analytics</span>
+                        <span>Developer Stats</span>
+                    </div>
+                    <div class="dropdown-divider"></div>
+                    <div class="dropdown-item" onclick="logout()">
+                        <span class="material-icons">logout</span>
+                        <span>Logout</span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Search Bar -->
+            <div class="search-container">
+                <input type="text" class="search-box" placeholder="Search Google or type a URL" id="searchInput">
+                <span class="material-icons search-icon" id="searchIcon">search</span>
+            </div>
+
+            <!-- Clock Section -->
+            <div class="clock">
+                <div class="time" id="time">12:00:00</div>
+                <div class="date" id="date">Monday, January 1, 2024</div>
+            </div>
+
+
+        </div>
+
+        <!-- Main Content -->
+        <div class="main-content">
+            <!-- Bookmarks Card -->
+            <div class="card">
+                <div class="card-header">
+                    <span class="material-icons card-icon">bookmark</span>
+                    <h3 class="card-title">Quick Access</h3>
+                </div>
+                <div class="bookmarks-grid" id="bookmarksGrid">
+                    <!-- Bookmarks will be populated by JavaScript -->
+                </div>
+            </div>
+
+            <!-- Notepad Card -->
+            <div class="card">
+                <div class="card-header">
+                    <span class="material-icons card-icon">notes</span>
+                    <h3 class="card-title">Notes</h3>
+                </div>
+                <div class="notepad-container">
+                    <div class="notes-tabs">
+                        <button class="note-tab active" data-note-id="0">
+                            Note 1
+                            <span class="close-note"
+                                onclick="event.stopPropagation(); window.notePad.removeNote(0);">×</span>
+                        </button>
+                        <button class="add-note-btn" onclick="window.notePad.addNote()">
+                            <span class="material-icons" style="font-size: 1rem;">add</span>
+                        </button>
+                    </div>
+                    <div class="note-content active" data-note-id="0">
+                        <textarea class="notepad-textarea" placeholder="Start typing your notes here..."></textarea>
+                        <div class="notepad-footer">
+                            <span class="save-indicator">
+                                <span class="material-icons"
+                                    style="font-size: 1rem; vertical-align: middle;">check_circle</span>
+                                Saved
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Add Bookmark Modal -->
+    <div id="bookmarkModal" class="modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3 class="modal-title" id="modalTitle">Add Bookmark</h3>
+                <button class="close-btn" id="closeModal">&times;</button>
+            </div>
+            <form id="bookmarkForm">
+                <div class="form-group">
+                    <label class="form-label" for="bookmarkName">Name</label>
+                    <input type="text" class="form-input" id="bookmarkName" required>
+                </div>
+                <div class="form-group">
+                    <label class="form-label" for="bookmarkUrl">URL</label>
+                    <input type="url" class="form-input" id="bookmarkUrl" required>
+                </div>
+                <div class="form-group">
+                    <label class="form-label" for="bookmarkIcon">Icon</label>
+                    <select class="form-input" id="bookmarkIcon" required>
+                        <option value="">Select an icon</option>
+                        <option value="language">🌐 Web/Language</option>
+                        <option value="work">💼 Work</option>
+                        <option value="home">🏠 Home</option>
+                        <option value="school">🎓 Education</option>
+                        <option value="shopping_cart">🛒 Shopping</option>
+                        <option value="movie">🎬 Entertainment</option>
+                        <option value="music_note">🎵 Music</option>
+                        <option value="photo">📸 Photos</option>
+                        <option value="mail">📧 Email</option>
+                        <option value="forum">💬 Social</option>
+                        <option value="sports">⚽ Sports</option>
+                        <option value="local_dining">🍽️ Food</option>
+                        <option value="flight">✈️ Travel</option>
+                        <option value="account_balance">🏦 Finance</option>
+                        <option value="favorite">❤️ Favorites</option>
+                    </select>
+                </div>
+                <div style="display: flex; justify-content: space-between; align-items: center;">
+                    <button type="button" class="btn btn-danger" id="deleteBtn" style="display: none;">Delete</button>
+                    <div>
+                        <button type="button" class="btn btn-secondary" id="cancelBtn">Cancel</button>
+                        <button type="submit" class="btn" id="submitBtn">Add Bookmark</button>
+                    </div>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <!-- Change Password Modal -->
+    <div id="passwordModal" class="modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3 class="modal-title">Change Password</h3>
+                <button class="close-btn" onclick="closePasswordModal()">&times;</button>
+            </div>
+            <form id="passwordForm">
+                <div class="form-group">
+                    <label class="form-label" for="currentPassword">Current Password</label>
+                    <input type="password" class="form-input" id="currentPassword" required>
+                </div>
+                <div class="form-group">
+                    <label class="form-label" for="newPassword">New Password</label>
+                    <input type="password" class="form-input" id="newPassword" required>
+                </div>
+                <div class="form-group">
+                    <label class="form-label" for="confirmPassword">Confirm New Password</label>
+                    <input type="password" class="form-input" id="confirmPassword" required>
+                </div>
+                <div style="display: flex; justify-content: flex-end;">
+                    <button type="button" class="btn btn-secondary" onclick="closePasswordModal()">Cancel</button>
+                    <button type="submit" class="btn">Change Password</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <!-- Developer Stats Modal -->
+    <div id="developerModal" class="modal">
+        <div class="modal-content developer-modal">
+            <div class="modal-header">
+                <h3 class="modal-title">Developer Statistics</h3>
+                <button class="close-btn" onclick="closeDeveloperModal()">&times;</button>
+            </div>
+            <div class="developer-content">
+                <div class="stats-grid">
+                    <div class="stat-card">
+                        <div class="stat-icon">
+                            <span class="material-icons">people</span>
+                        </div>
+                        <div class="stat-info">
+                            <h4 id="totalUsers">0</h4>
+                            <p>Total Users</p>
+                        </div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-icon">
+                            <span class="material-icons">visibility</span>
+                        </div>
+                        <div class="stat-info">
+                            <h4 id="totalVisits">0</h4>
+                            <p>Total Visits</p>
+                        </div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-icon">
+                            <span class="material-icons">search</span>
+                        </div>
+                        <div class="stat-info">
+                            <h4 id="totalSearches">0</h4>
+                            <p>Total Searches</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="chart-container">
+                    <h4>Monthly Activity Trends</h4>
+                    <canvas id="activityChart" width="600" height="300"></canvas>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Vault Authentication Modal -->
+    <div id="vaultAuthModal" class="modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3 class="modal-title">Vault Access</h3>
+                <button class="close-btn" onclick="closeVaultAuthModal()">&times;</button>
+            </div>
+            <div class="vault-auth-content">
+                <div class="vault-lock-icon">
+                    <span class="material-icons">lock</span>
+                </div>
+                <!-- <p>Enter your password to access the vault</p> -->
+                <form id="vaultAuthForm">
+                    <div class="form-group">
+                        <input type="password" class="form-input" id="vaultPassword" placeholder="Enter your password"
+                            required>
+                    </div>
+                    <div style="display: flex; justify-content: flex-start; gap: 10px;">
+                        <button type="button" class="btn btn-secondary" onclick="closeVaultAuthModal()">Cancel</button>
+                        <button type="submit" class="btn">Access</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+
+    <!-- Password Vault Modal -->
+    <div id="vaultModal" class="modal">
+        <div class="modal-content vault-modal">
+            <div class="modal-header">
+                <h3 class="modal-title">Password Vault</h3>
+                <button class="close-btn" onclick="closeVaultModal()">&times;</button>
+            </div>
+            <div class="vault-content">
+                <div class="vault-toolbar">
+                    <div class="vault-search">
+                        <input type="text" class="search-input" placeholder="Search passwords..." id="vaultSearchInput">
+                        <span class="material-icons search-icon">search</span>
+                    </div>
+                    <button class="btn add-password-btn" onclick="openAddPasswordModal()">
+                        <span class="material-icons">add</span>
+                        Add Password
+                    </button>
+                </div>
+                <div class="vault-list" id="vaultList">
+                    <!-- Password entries will be populated here -->
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Add/Edit Password Modal -->
+    <div id="passwordEntryModal" class="modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3 class="modal-title" id="passwordEntryTitle">Add Password</h3>
+                <button class="close-btn" onclick="closePasswordEntryModal()">&times;</button>
+            </div>
+            <form id="passwordEntryForm">
+                <div class="form-group">
+                    <label class="form-label" for="entryTitle">Title</label>
+                    <input type="text" class="form-input" id="entryTitle" required>
+                </div>
+                <div class="form-group">
+                    <label class="form-label" for="entryUsername">Username/Email</label>
+                    <input type="text" class="form-input" id="entryUsername">
+                </div>
+                <div class="form-group">
+                    <label class="form-label" for="entryPassword">Password</label>
+                    <div class="password-input-container">
+                        <input type="password" class="form-input" id="entryPassword" required>
+                        <button type="button" class="password-toggle-btn"
+                            onclick="togglePasswordVisibility('entryPassword')">
+                            <span class="material-icons">visibility</span>
+                        </button>
+                        <button type="button" class="password-generate-btn" onclick="generatePassword()">
+                            <span class="material-icons">refresh</span>
+                        </button>
+                    </div>
+                    <div class="password-strength">
+                        <div class="password-strength-bar"></div>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label class="form-label" for="entryWebsite">Website</label>
+                    <input type="url" class="form-input" id="entryWebsite">
+                </div>
+                <div class="form-group">
+                    <label class="form-label" for="entryNotes">Notes</label>
+                    <textarea class="form-input" id="entryNotes" rows="3"></textarea>
+                </div>
+                <div style="display: flex; justify-content: space-between; align-items: center;">
+                    <button type="button" class="btn btn-danger" id="deletePasswordBtn"
+                        style="display: none;">Delete</button>
+                    <div>
+                        <button type="button" class="btn btn-secondary"
+                            onclick="closePasswordEntryModal()">Cancel</button>
+                        <button type="submit" class="btn" id="savePasswordBtn">Save Password</button>
+                    </div>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <script>
+        window.currentUser = '{{ username }}';
+    </script>
+    <script src="{{ url_for('static', filename='script.js') }}"></script>
+</body>
+
+</html>