Rainer Koschnick
0abee5b794
- Implement PostgreSQL database schema with users and bookmarks tables - Add database connection pooling with retry logic and error handling - Create migration system with automatic schema initialization - Add database CLI tools for management (init, status, validate, etc.) - Include comprehensive error handling and diagnostics - Add development seed data and testing utilities - Implement health monitoring and connection pool statistics - Create detailed documentation and troubleshooting guide Database features: - Users table with authentication fields and email verification - Bookmarks table with user association and metadata - Proper indexes for performance optimization - Automatic timestamp triggers - Transaction support with rollback handling - Connection pooling (20 max connections, 30s idle timeout) - Graceful shutdown handling CLI commands available: - npm run db:init - Initialize database - npm run db:status - Check database status - npm run db:validate - Validate schema - npm run db:test - Run database tests - npm run db:diagnostics - Full diagnostics
1438 lines
74 KiB
HTML
1438 lines
74 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Bookmark Manager</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<header role="banner">
|
|
<h1>Bookmark Manager</h1>
|
|
<div class="header-actions" role="toolbar" aria-label="Main actions">
|
|
<button id="importBtn" class="btn btn-primary" aria-label="Import bookmarks from file">Import
|
|
Bookmarks</button>
|
|
<button id="exportBtn" class="btn btn-secondary" aria-label="Export bookmarks to file">Export
|
|
Bookmarks</button>
|
|
<button id="addBookmarkBtn" class="btn btn-success" aria-label="Add new bookmark">Add Bookmark</button>
|
|
</div>
|
|
</header>
|
|
|
|
<nav class="toolbar" role="navigation" aria-label="Bookmark management tools">
|
|
<div class="search-container" role="search">
|
|
<label for="searchInput" class="sr-only">Search bookmarks</label>
|
|
<input type="text" id="searchInput" placeholder="Search bookmarks..."
|
|
aria-label="Search bookmarks by title, URL, or folder" list="searchSuggestions">
|
|
<datalist id="searchSuggestions">
|
|
<!-- Dynamically populated with search suggestions -->
|
|
</datalist>
|
|
<button id="advancedSearchBtn" class="btn btn-small btn-secondary"
|
|
aria-label="Open advanced search options">Advanced</button>
|
|
<button id="searchBtn" class="btn btn-small" aria-label="Execute search">Search</button>
|
|
</div>
|
|
<div class="actions-container">
|
|
<!-- Link Testing & Quality -->
|
|
<div class="action-group" role="toolbar" aria-label="Link testing and quality tools">
|
|
<span class="group-label">Testing</span>
|
|
<button id="testAllBtn" class="btn btn-warning"
|
|
aria-label="Test all bookmark links for validity">Test All Links</button>
|
|
<button id="testInvalidBtn" class="btn btn-warning"
|
|
aria-label="Retest only invalid bookmark links">Test Invalid</button>
|
|
<button id="findDuplicatesBtn" class="btn btn-info"
|
|
aria-label="Find and mark duplicate bookmarks">Find Duplicates</button>
|
|
</div>
|
|
|
|
<!-- Organization & Management -->
|
|
<div class="action-group" role="toolbar" aria-label="Organization and management tools">
|
|
<span class="group-label">Organize</span>
|
|
<button id="bulkModeBtn" class="btn btn-secondary" aria-label="Enable bulk selection mode">Bulk
|
|
Select</button>
|
|
<button id="sortBtn" class="btn btn-secondary" aria-label="Sort bookmarks">Sort</button>
|
|
<button id="folderManagementBtn" class="btn btn-secondary" aria-label="Manage folders">Manage
|
|
Folders</button>
|
|
</div>
|
|
|
|
<!-- Sharing & Templates -->
|
|
<div class="action-group" role="toolbar" aria-label="Sharing and template tools">
|
|
<span class="group-label">Share</span>
|
|
<button id="shareBtn" class="btn btn-success" aria-label="Share bookmark collections">Share</button>
|
|
<button id="templatesBtn" class="btn btn-info"
|
|
aria-label="Browse bookmark collection templates">Templates</button>
|
|
</div>
|
|
|
|
<!-- Settings & Analytics -->
|
|
<div class="action-group" role="toolbar" aria-label="Settings and analytics tools">
|
|
<span class="group-label">Tools</span>
|
|
<button id="analyticsBtn" class="btn btn-info"
|
|
aria-label="View detailed analytics dashboard">Analytics</button>
|
|
<button id="settingsBtn" class="btn btn-secondary"
|
|
aria-label="Configure link testing settings">Settings</button>
|
|
<button id="securityBtn" class="btn btn-warning"
|
|
aria-label="Configure security and privacy settings">Security</button>
|
|
</div>
|
|
|
|
<!-- Danger Zone -->
|
|
<div class="action-group danger-group" role="toolbar" aria-label="Destructive actions">
|
|
<span class="group-label">Danger</span>
|
|
<button id="clearAllBtn" class="btn btn-danger" aria-label="Delete all bookmarks permanently">Clear
|
|
All</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<section class="stats" role="region" aria-label="Bookmark statistics and filters">
|
|
<button id="totalCount" class="stats-filter active" data-filter="all" aria-label="Show all bookmarks"
|
|
aria-pressed="true">Total: 0</button>
|
|
<button id="validCount" class="stats-filter" data-filter="valid" aria-label="Show only valid bookmarks"
|
|
aria-pressed="false">Valid: 0</button>
|
|
<button id="invalidCount" class="stats-filter" data-filter="invalid"
|
|
aria-label="Show only invalid bookmarks" aria-pressed="false">Invalid: 0</button>
|
|
<button id="duplicateCount" class="stats-filter" data-filter="duplicate"
|
|
aria-label="Show only duplicate bookmarks" aria-pressed="false">Duplicates: 0</button>
|
|
<button id="favoriteCount" class="stats-filter" data-filter="favorite"
|
|
aria-label="Show only favorite bookmarks" aria-pressed="false">Favorites: 0</button>
|
|
</section>
|
|
|
|
<div class="progress-container" id="progressContainer" style="display: none;" role="status" aria-live="polite">
|
|
<div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
|
|
<div id="progressBar" class="progress-fill"></div>
|
|
</div>
|
|
<div id="progressText" aria-live="polite">Testing links...</div>
|
|
</div>
|
|
|
|
<main id="bookmarksList" class="bookmarks-list" role="main" aria-label="Bookmark collection"></main>
|
|
</div>
|
|
|
|
<!-- Import Modal -->
|
|
<div id="importModal" class="modal" role="dialog" aria-labelledby="importModalTitle" aria-modal="true"
|
|
aria-hidden="true">
|
|
<div class="modal-content advanced-import-content">
|
|
<button class="close" aria-label="Close import dialog">×</button>
|
|
<h2 id="importModalTitle">Import Bookmarks</h2>
|
|
|
|
<div class="import-tabs">
|
|
<button class="import-tab active" data-tab="file">File Import</button>
|
|
<button class="import-tab" data-tab="sync">Device Sync</button>
|
|
</div>
|
|
|
|
<!-- File Import Tab -->
|
|
<div id="fileImportTab" class="import-tab-content active">
|
|
<div class="form-group">
|
|
<label for="importFormat">Import Format:</label>
|
|
<select id="importFormat" aria-describedby="formatImportHelp">
|
|
<option value="netscape">Netscape HTML (Standard)</option>
|
|
<option value="chrome">Chrome Bookmarks JSON</option>
|
|
<option value="firefox">Firefox JSON Backup</option>
|
|
<option value="safari">Safari Bookmarks Plist</option>
|
|
<option value="json">JSON (Bookmark Manager Export)</option>
|
|
<option value="auto" selected>Auto-detect Format</option>
|
|
</select>
|
|
<div id="formatImportHelp" class="help-text">
|
|
Choose the format of your bookmark file or use auto-detect
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="fileInput" class="sr-only">Choose bookmark file</label>
|
|
<input type="file" id="fileInput" accept=".html,.htm,.json,.plist" aria-describedby="fileInputHelp">
|
|
<div id="fileInputHelp" class="help-text">
|
|
Select bookmark file from Chrome, Firefox, Safari, or standard HTML format
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="importMode">Import Mode:</label>
|
|
<select id="importMode" aria-describedby="importModeHelp">
|
|
<option value="preview">Preview before import</option>
|
|
<option value="merge">Merge with existing (skip duplicates)</option>
|
|
<option value="replace">Replace all existing bookmarks</option>
|
|
<option value="incremental">Incremental import (smart merge)</option>
|
|
</select>
|
|
<div id="importModeHelp" class="help-text">
|
|
Choose how to handle the imported bookmarks
|
|
</div>
|
|
</div>
|
|
|
|
<div class="duplicate-handling" id="duplicateHandling" style="display: none;">
|
|
<h3>Duplicate Detection Settings:</h3>
|
|
<div class="form-group">
|
|
<label>
|
|
<input type="checkbox" id="normalizeUrls" checked>
|
|
Normalize URLs (remove www, trailing slashes, etc.)
|
|
</label>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>
|
|
<input type="checkbox" id="fuzzyTitleMatch">
|
|
Enable fuzzy title matching for near-duplicates
|
|
</label>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="duplicateStrategy">When duplicates found:</label>
|
|
<select id="duplicateStrategy">
|
|
<option value="skip">Skip duplicate (keep existing)</option>
|
|
<option value="update">Update existing with new data</option>
|
|
<option value="keep_newer">Keep newer bookmark</option>
|
|
<option value="keep_older">Keep older bookmark</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Device Sync Tab -->
|
|
<div id="syncImportTab" class="import-tab-content">
|
|
<div class="sync-section">
|
|
<h3>Device Synchronization</h3>
|
|
<p>Sync bookmarks between multiple devices using cloud storage or direct transfer.</p>
|
|
|
|
<div class="form-group">
|
|
<label for="syncMethod">Sync Method:</label>
|
|
<select id="syncMethod">
|
|
<option value="cloud">Cloud Storage (Google Drive, Dropbox)</option>
|
|
<option value="qr">QR Code Transfer</option>
|
|
<option value="local">Local Network Transfer</option>
|
|
<option value="manual">Manual Export/Import</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div id="cloudSyncOptions" class="sync-options">
|
|
<div class="form-group">
|
|
<label for="cloudProvider">Cloud Provider:</label>
|
|
<select id="cloudProvider">
|
|
<option value="gdrive">Google Drive</option>
|
|
<option value="dropbox">Dropbox</option>
|
|
<option value="onedrive">OneDrive</option>
|
|
</select>
|
|
</div>
|
|
<button id="connectCloudBtn" class="btn btn-secondary">Connect to Cloud</button>
|
|
<div id="cloudStatus" class="cloud-status"></div>
|
|
</div>
|
|
|
|
<div id="qrSyncOptions" class="sync-options" style="display: none;">
|
|
<div class="qr-sync-container">
|
|
<div class="qr-generate">
|
|
<button id="generateQRBtn" class="btn btn-primary">Generate QR Code</button>
|
|
<div id="qrCodeDisplay" class="qr-display"></div>
|
|
</div>
|
|
<div class="qr-scan">
|
|
<button id="scanQRBtn" class="btn btn-secondary">Scan QR Code</button>
|
|
<div id="qrScanArea" class="qr-scan-area"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="localSyncOptions" class="sync-options" style="display: none;">
|
|
<div class="local-sync-container">
|
|
<button id="startLocalServerBtn" class="btn btn-primary">Start Local Server</button>
|
|
<button id="connectToDeviceBtn" class="btn btn-secondary">Connect to Device</button>
|
|
<div id="localSyncStatus" class="sync-status"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-actions">
|
|
<button id="importFileBtn" class="btn btn-primary"
|
|
aria-label="Import selected bookmark file">Import</button>
|
|
<button id="previewImportBtn" class="btn btn-secondary"
|
|
aria-label="Preview import before applying">Preview</button>
|
|
<button id="cancelImportBtn" class="btn btn-secondary"
|
|
aria-label="Cancel import and close dialog">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Import Preview Modal -->
|
|
<div id="importPreviewModal" class="modal" role="dialog" aria-labelledby="importPreviewTitle" aria-modal="true"
|
|
aria-hidden="true">
|
|
<div class="modal-content import-preview-content">
|
|
<button class="close" aria-label="Close import preview dialog">×</button>
|
|
<h2 id="importPreviewTitle">Import Preview</h2>
|
|
|
|
<div class="import-summary">
|
|
<div class="import-stats">
|
|
<div class="stat-item">
|
|
<span class="stat-number" id="previewTotalCount">0</span>
|
|
<span class="stat-label">Total Bookmarks</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-number" id="previewNewCount">0</span>
|
|
<span class="stat-label">New Bookmarks</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-number" id="previewDuplicateCount">0</span>
|
|
<span class="stat-label">Duplicates Found</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-number" id="previewFolderCount">0</span>
|
|
<span class="stat-label">Folders</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="preview-tabs">
|
|
<button class="preview-tab active" data-tab="new">New Bookmarks</button>
|
|
<button class="preview-tab" data-tab="duplicates">Duplicates</button>
|
|
<button class="preview-tab" data-tab="folders">Folder Structure</button>
|
|
</div>
|
|
|
|
<div class="preview-content">
|
|
<div id="newBookmarksPreview" class="preview-tab-content active">
|
|
<div class="preview-list" id="newBookmarksList"></div>
|
|
</div>
|
|
<div id="duplicatesPreview" class="preview-tab-content">
|
|
<div class="preview-list" id="duplicatesList"></div>
|
|
</div>
|
|
<div id="foldersPreview" class="preview-tab-content">
|
|
<div class="preview-list" id="foldersList"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-actions">
|
|
<button id="confirmImportBtn" class="btn btn-primary"
|
|
aria-label="Confirm and proceed with import">Confirm Import</button>
|
|
<button id="modifyImportBtn" class="btn btn-secondary" aria-label="Modify import settings">Modify
|
|
Settings</button>
|
|
<button id="cancelPreviewBtn" class="btn btn-secondary" aria-label="Cancel import">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add/Edit Bookmark Modal -->
|
|
<div id="bookmarkModal" class="modal" role="dialog" aria-labelledby="modalTitle" aria-modal="true"
|
|
aria-hidden="true">
|
|
<div class="modal-content">
|
|
<button class="close" aria-label="Close bookmark dialog">×</button>
|
|
<h2 id="modalTitle">Add Bookmark</h2>
|
|
<form id="bookmarkForm">
|
|
<div class="form-group">
|
|
<label for="bookmarkTitle">Title:</label>
|
|
<input type="text" id="bookmarkTitle" required aria-describedby="titleHelp">
|
|
<div id="titleHelp" class="sr-only">Enter a descriptive title for the bookmark</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="bookmarkUrl">URL:</label>
|
|
<input type="url" id="bookmarkUrl" required aria-describedby="urlHelp">
|
|
<div id="urlHelp" class="sr-only">Enter the complete web address including http or https</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="bookmarkFolder">Folder:</label>
|
|
<div class="folder-input-container">
|
|
<input type="text" id="bookmarkFolder" list="folderList"
|
|
placeholder="Select existing folder or type new name" aria-describedby="folderHelp">
|
|
<datalist id="folderList">
|
|
<!-- Dynamically populated with existing folders -->
|
|
</datalist>
|
|
<div id="folderHelp" class="sr-only">Choose an existing folder from the dropdown or type a new
|
|
folder name</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="bookmarkTags">Tags:</label>
|
|
<input type="text" id="bookmarkTags"
|
|
placeholder="Enter tags separated by commas (e.g., work, reference, tutorial)"
|
|
aria-describedby="tagsHelp">
|
|
<div id="tagsHelp" class="help-text">Add tags to categorize your bookmark beyond folders</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="bookmarkNotes">Notes/Description:</label>
|
|
<textarea id="bookmarkNotes" rows="3" placeholder="Add notes or description for this bookmark..."
|
|
aria-describedby="notesHelp"></textarea>
|
|
<div id="notesHelp" class="help-text">Optional notes to help you remember what this bookmark is for
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="bookmarkRating">Rating:</label>
|
|
<div class="rating-container">
|
|
<div class="star-rating" id="starRating" aria-label="Rate this bookmark">
|
|
<span class="star" data-rating="1" tabindex="0" role="button" aria-label="1 star">★</span>
|
|
<span class="star" data-rating="2" tabindex="0" role="button" aria-label="2 stars">★</span>
|
|
<span class="star" data-rating="3" tabindex="0" role="button" aria-label="3 stars">★</span>
|
|
<span class="star" data-rating="4" tabindex="0" role="button" aria-label="4 stars">★</span>
|
|
<span class="star" data-rating="5" tabindex="0" role="button" aria-label="5 stars">★</span>
|
|
</div>
|
|
<input type="hidden" id="bookmarkRating" value="0">
|
|
<label class="favorite-checkbox">
|
|
<input type="checkbox" id="bookmarkFavorite">
|
|
<span class="favorite-label">Mark as Favorite ❤️</span>
|
|
</label>
|
|
</div>
|
|
<div id="ratingHelp" class="help-text">Rate this bookmark and optionally mark as favorite</div>
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button type="submit" class="btn btn-primary" aria-label="Save bookmark">Save</button>
|
|
<button type="button" id="cancelBookmarkBtn" class="btn btn-secondary"
|
|
aria-label="Cancel and close dialog">Cancel</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bookmark Context Menu Modal -->
|
|
<div id="contextModal" class="modal" role="dialog" aria-labelledby="contextTitle" aria-modal="true"
|
|
aria-hidden="true">
|
|
<div class="modal-content">
|
|
<button class="close" aria-label="Close bookmark actions dialog">×</button>
|
|
<h2 id="contextTitle">Bookmark Actions</h2>
|
|
<div class="bookmark-preview" role="region" aria-label="Bookmark details">
|
|
<img id="contextFavicon" class="bookmark-favicon" alt="" role="presentation">
|
|
<div class="bookmark-info">
|
|
<div id="contextBookmarkTitle" class="bookmark-title" role="heading" aria-level="3"></div>
|
|
<a id="contextBookmarkLink" class="bookmark-url-link" href="#" target="_blank"
|
|
aria-label="Visit bookmark in new tab"></a>
|
|
<div id="contextBookmarkUrl" class="bookmark-url"></div>
|
|
<div id="contextBookmarkFolder" class="bookmark-folder" style="display: none;"></div>
|
|
<div class="bookmark-dates">
|
|
<div id="contextAddDate" class="bookmark-date"></div>
|
|
<div id="contextLastModified" class="bookmark-date" style="display: none;"></div>
|
|
<div id="contextLastVisited" class="bookmark-last-visited" style="display: none;"></div>
|
|
</div>
|
|
</div>
|
|
<div id="contextBookmarkStatus" class="bookmark-status" role="status" aria-label="Bookmark status">
|
|
</div>
|
|
</div>
|
|
<div class="bookmark-metadata" id="contextBookmarkMetadata" style="display: none;">
|
|
<div class="bookmark-metadata-item" id="contextBookmarkTags" style="display: none;">
|
|
<span class="bookmark-metadata-label">Tags:</span>
|
|
<div class="bookmark-tags" id="contextTagsDisplay"></div>
|
|
</div>
|
|
<div class="bookmark-metadata-item" id="contextBookmarkRating" style="display: none;">
|
|
<span class="bookmark-metadata-label">Rating:</span>
|
|
<span class="bookmark-metadata-value">
|
|
<span class="bookmark-stars" id="contextStarsDisplay"></span>
|
|
<span class="bookmark-favorite" id="contextFavoriteDisplay" style="display: none;">❤️</span>
|
|
</span>
|
|
</div>
|
|
<div class="bookmark-metadata-item" id="contextBookmarkNotes" style="display: none;">
|
|
<span class="bookmark-metadata-label">Notes:</span>
|
|
<div class="bookmark-metadata-value" id="contextNotesDisplay"></div>
|
|
</div>
|
|
</div>
|
|
<div class="privacy-controls">
|
|
<h4>Privacy & Security</h4>
|
|
<div class="privacy-toggle">
|
|
<input type="checkbox" id="contextPrivacyToggle">
|
|
<label for="contextPrivacyToggle">Mark as private (exclude from exports/sharing)</label>
|
|
</div>
|
|
<div class="privacy-toggle">
|
|
<input type="checkbox" id="contextEncryptionToggle">
|
|
<label for="contextEncryptionToggle">Encrypt this bookmark</label>
|
|
</div>
|
|
</div>
|
|
<div class="modal-actions" role="toolbar" aria-label="Bookmark actions">
|
|
<button id="visitBookmarkBtn" class="btn btn-primary"
|
|
aria-label="Visit bookmark in new tab">Visit</button>
|
|
<button id="testBookmarkBtn" class="btn btn-warning" aria-label="Test if bookmark link is valid">Test
|
|
Link</button>
|
|
<button id="editBookmarkBtn" class="btn btn-secondary" aria-label="Edit bookmark details">Edit</button>
|
|
<button id="deleteBookmarkBtn" class="btn btn-danger"
|
|
aria-label="Delete bookmark permanently">Delete</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Duplicate Preview Modal -->
|
|
<div id="duplicateModal" class="modal" role="dialog" aria-labelledby="duplicateTitle" aria-modal="true"
|
|
aria-hidden="true">
|
|
<div class="modal-content duplicate-modal-content">
|
|
<button class="close" aria-label="Close duplicate preview dialog">×</button>
|
|
<h2 id="duplicateTitle">Duplicate Bookmarks Found</h2>
|
|
<div id="duplicatePreview" class="duplicate-preview">
|
|
<!-- Dynamically populated with duplicate groups -->
|
|
</div>
|
|
<div class="duplicate-resolution">
|
|
<h3>Resolution Options:</h3>
|
|
<div class="resolution-options">
|
|
<label>
|
|
<input type="radio" name="resolutionStrategy" value="keep_newest" checked>
|
|
Keep newest bookmark in each group
|
|
</label>
|
|
<label>
|
|
<input type="radio" name="resolutionStrategy" value="keep_oldest">
|
|
Keep oldest bookmark in each group
|
|
</label>
|
|
<label>
|
|
<input type="radio" name="resolutionStrategy" value="manual">
|
|
Let me choose manually for each group
|
|
</label>
|
|
<label>
|
|
<input type="radio" name="resolutionStrategy" value="mark_only">
|
|
Just mark as duplicates (don't delete)
|
|
</label>
|
|
</div>
|
|
<div class="manual-resolution-controls">
|
|
<div class="manual-resolution-help">
|
|
<strong>Manual Selection:</strong> Check the bookmarks you want to keep in each group. Unchecked
|
|
bookmarks will be deleted.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button id="applyDuplicateResolution" class="btn btn-primary"
|
|
aria-label="Apply selected resolution strategy">Apply Resolution</button>
|
|
<button id="cancelDuplicateBtn" class="btn btn-secondary"
|
|
aria-label="Cancel and close dialog">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Settings Modal -->
|
|
<div id="settingsModal" class="modal" role="dialog" aria-labelledby="settingsTitle" aria-modal="true"
|
|
aria-hidden="true">
|
|
<div class="modal-content">
|
|
<button class="close" aria-label="Close settings dialog">×</button>
|
|
<h2 id="settingsTitle">Link Testing Settings</h2>
|
|
<form id="settingsForm">
|
|
<div class="form-group">
|
|
<label for="timeoutSetting">Request Timeout (seconds):</label>
|
|
<input type="number" id="timeoutSetting" min="5" max="60" step="1" aria-describedby="timeoutHelp"
|
|
required>
|
|
<div id="timeoutHelp" class="help-text">
|
|
How long to wait for each link before timing out (5-60 seconds)
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="maxRetriesSetting">Maximum Retries:</label>
|
|
<input type="number" id="maxRetriesSetting" min="0" max="5" step="1" aria-describedby="retriesHelp"
|
|
required>
|
|
<div id="retriesHelp" class="help-text">
|
|
Number of retry attempts for transient network failures (0-5)
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="retryDelaySetting">Retry Delay (milliseconds):</label>
|
|
<input type="number" id="retryDelaySetting" min="500" max="5000" step="100"
|
|
aria-describedby="delayHelp" required>
|
|
<div id="delayHelp" class="help-text">
|
|
Delay between retry attempts (500-5000ms)
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="userAgentSetting">User Agent:</label>
|
|
<input type="text" id="userAgentSetting" maxlength="200" aria-describedby="userAgentHelp" required>
|
|
<div id="userAgentHelp" class="help-text">
|
|
User agent string sent with requests
|
|
</div>
|
|
</div>
|
|
<div class="settings-info">
|
|
<h3>Error Categories Explained:</h3>
|
|
<ul>
|
|
<li><strong>Network Error:</strong> Connection issues, DNS problems</li>
|
|
<li><strong>Timeout:</strong> Request took too long to complete</li>
|
|
<li><strong>HTTP Error:</strong> Server returned error status (4xx, 5xx)</li>
|
|
<li><strong>CORS Blocked:</strong> Cross-origin request blocked by browser</li>
|
|
<li><strong>Invalid URL:</strong> Malformed or invalid URL format</li>
|
|
<li><strong>SSL Error:</strong> Certificate or encryption issues</li>
|
|
</ul>
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button type="submit" class="btn btn-primary" aria-label="Save settings">Save Settings</button>
|
|
<button type="button" id="resetSettingsBtn" class="btn btn-warning"
|
|
aria-label="Reset to default settings">Reset to Defaults</button>
|
|
<button type="button" id="cancelSettingsBtn" class="btn btn-secondary"
|
|
aria-label="Cancel and close dialog">Cancel</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Security Settings Modal -->
|
|
<div id="securitySettingsModal" class="modal" role="dialog" aria-labelledby="securitySettingsTitle"
|
|
aria-modal="true" aria-hidden="true">
|
|
<div class="modal-content">
|
|
<button class="close" aria-label="Close security settings dialog">×</button>
|
|
<h2 id="securitySettingsTitle">Security & Privacy Settings</h2>
|
|
<form id="securitySettingsForm">
|
|
<div class="form-group">
|
|
<label>
|
|
<input type="checkbox" id="encryptionEnabled">
|
|
Enable bookmark encryption for sensitive collections
|
|
</label>
|
|
<div class="help-text">
|
|
Encrypt bookmark data using password-based encryption
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>
|
|
<input type="checkbox" id="privacyMode">
|
|
Enable privacy mode
|
|
</label>
|
|
<div class="help-text">
|
|
Exclude private bookmarks from exports and sharing
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>
|
|
<input type="checkbox" id="accessLogging">
|
|
Enable access logging for security auditing
|
|
</label>
|
|
<div class="help-text">
|
|
Log user actions for security monitoring and auditing
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>
|
|
<input type="checkbox" id="passwordProtection">
|
|
Enable password protection
|
|
</label>
|
|
<div class="help-text">
|
|
Require password authentication to access bookmarks
|
|
</div>
|
|
</div>
|
|
|
|
<div id="passwordSetupGroup" class="form-group" style="display: none;">
|
|
<label for="newPassword">New Password:</label>
|
|
<input type="password" id="newPassword" minlength="8" aria-describedby="passwordHelp">
|
|
<div id="passwordHelp" class="help-text">
|
|
Password must be at least 8 characters long
|
|
</div>
|
|
|
|
<label for="confirmPassword">Confirm Password:</label>
|
|
<input type="password" id="confirmPassword" minlength="8">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="sessionTimeout">Session Timeout (minutes):</label>
|
|
<input type="number" id="sessionTimeout" min="5" max="120" step="5" value="30"
|
|
aria-describedby="sessionTimeoutHelp">
|
|
<div id="sessionTimeoutHelp" class="help-text">
|
|
Automatically log out after period of inactivity (5-120 minutes)
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="maxLoginAttempts">Maximum Login Attempts:</label>
|
|
<input type="number" id="maxLoginAttempts" min="1" max="10" step="1" value="3"
|
|
aria-describedby="maxAttemptsHelp">
|
|
<div id="maxAttemptsHelp" class="help-text">
|
|
Number of failed login attempts before account lockout (1-10)
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="lockoutDuration">Lockout Duration (minutes):</label>
|
|
<input type="number" id="lockoutDuration" min="1" max="60" step="1" value="15"
|
|
aria-describedby="lockoutHelp">
|
|
<div id="lockoutHelp" class="help-text">
|
|
How long to lock account after maximum failed attempts (1-60 minutes)
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-actions">
|
|
<button type="submit" class="btn btn-primary" aria-label="Save security settings">Save
|
|
Settings</button>
|
|
<button type="button" id="viewAuditLogBtn" class="btn btn-info"
|
|
aria-label="View security audit log">View Audit Log</button>
|
|
<button type="button" id="cancelSecuritySettingsBtn" class="btn btn-secondary"
|
|
aria-label="Cancel and close dialog">Cancel</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Security Authentication Modal -->
|
|
<div id="securityAuthModal" class="modal" role="dialog" aria-labelledby="securityAuthTitle" aria-modal="true"
|
|
aria-hidden="true">
|
|
<div class="modal-content">
|
|
<h2 id="securityAuthTitle">Authentication Required</h2>
|
|
<p>Please enter your password to access the bookmark manager.</p>
|
|
<form id="securityAuthForm">
|
|
<div class="form-group">
|
|
<label for="securityPassword">Password:</label>
|
|
<input type="password" id="securityPassword" required aria-describedby="authHelp">
|
|
<div id="authHelp" class="help-text">
|
|
Enter the password you configured in security settings
|
|
</div>
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button type="submit" class="btn btn-primary" aria-label="Login">Login</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Security Audit Log Modal -->
|
|
<div id="securityAuditModal" class="modal" role="dialog" aria-labelledby="securityAuditTitle" aria-modal="true"
|
|
aria-hidden="true">
|
|
<div class="modal-content security-audit-content">
|
|
<button class="close" aria-label="Close security audit dialog">×</button>
|
|
<h2 id="securityAuditTitle">Security Audit Log</h2>
|
|
|
|
<div class="audit-controls">
|
|
<button id="refreshAuditBtn" class="btn btn-secondary">Refresh</button>
|
|
<button id="exportAuditBtn" class="btn btn-info">Export Log</button>
|
|
<button id="clearAuditBtn" class="btn btn-danger">Clear Log</button>
|
|
</div>
|
|
|
|
<div id="auditLogContainer" class="audit-log-container">
|
|
<!-- Dynamically populated with audit log entries -->
|
|
</div>
|
|
|
|
<div class="modal-actions">
|
|
<button id="closeAuditBtn" class="btn btn-secondary" aria-label="Close audit log">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Export Options Modal -->
|
|
<div id="exportModal" class="modal" role="dialog" aria-labelledby="exportTitle" aria-modal="true"
|
|
aria-hidden="true">
|
|
<div class="modal-content">
|
|
<button class="close" aria-label="Close export dialog">×</button>
|
|
<h2 id="exportTitle">Export Bookmarks</h2>
|
|
<form id="exportForm">
|
|
<div class="form-group">
|
|
<label for="exportFormat">Export Format:</label>
|
|
<select id="exportFormat" required aria-describedby="formatHelp">
|
|
<option value="html">HTML (Netscape format)</option>
|
|
<option value="json">JSON</option>
|
|
<option value="csv">CSV</option>
|
|
<option value="txt">Plain Text</option>
|
|
</select>
|
|
<div id="formatHelp" class="help-text">
|
|
Choose the format for your exported bookmarks
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="exportFilter">Export Selection:</label>
|
|
<select id="exportFilter" required aria-describedby="filterHelp">
|
|
<option value="all">All Bookmarks</option>
|
|
<option value="current">Current View (filtered)</option>
|
|
<option value="valid">Valid Links Only</option>
|
|
<option value="invalid">Invalid Links Only</option>
|
|
<option value="duplicates">Duplicates Only</option>
|
|
<option value="folder">Specific Folder</option>
|
|
</select>
|
|
<div id="filterHelp" class="help-text">
|
|
Choose which bookmarks to include in the export
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group" id="folderSelectionGroup" style="display: none;">
|
|
<label for="exportFolderSelect">Select Folder:</label>
|
|
<select id="exportFolderSelect" aria-describedby="folderSelectHelp">
|
|
<option value="">Select a folder...</option>
|
|
</select>
|
|
<div id="folderSelectHelp" class="help-text">
|
|
Choose the specific folder to export
|
|
</div>
|
|
</div>
|
|
|
|
<div class="export-preview">
|
|
<h3>Export Preview:</h3>
|
|
<div id="exportPreviewContent" class="export-preview-content">
|
|
<div class="export-stats">
|
|
<span id="exportCount">0 bookmarks</span> will be exported
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-actions">
|
|
<button type="submit" class="btn btn-primary"
|
|
aria-label="Export bookmarks with selected options">Export</button>
|
|
<button type="button" id="cancelExportBtn" class="btn btn-secondary"
|
|
aria-label="Cancel export and close dialog">Cancel</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Backup Reminder Modal -->
|
|
<div id="backupReminderModal" class="modal" role="dialog" aria-labelledby="backupReminderTitle" aria-modal="true"
|
|
aria-hidden="true">
|
|
<div class="modal-content">
|
|
<button class="close" aria-label="Close backup reminder dialog">×</button>
|
|
<h2 id="backupReminderTitle">Backup Reminder</h2>
|
|
<div class="backup-reminder-content">
|
|
<p>It's been a while since your last backup! Consider exporting your bookmarks to keep them safe.</p>
|
|
<div class="backup-stats">
|
|
<div class="backup-stat">
|
|
<strong id="bookmarkCountSinceBackup">0</strong> bookmarks added since last backup
|
|
</div>
|
|
<div class="backup-stat">
|
|
<strong id="daysSinceBackup">0</strong> days since last backup
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button id="backupNowBtn" class="btn btn-primary" aria-label="Create backup now">Backup Now</button>
|
|
<button id="remindLaterBtn" class="btn btn-secondary" aria-label="Remind me later">Remind Later</button>
|
|
<button id="disableRemindersBtn" class="btn btn-warning" aria-label="Disable backup reminders">Disable
|
|
Reminders</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Advanced Search Modal -->
|
|
<div id="advancedSearchModal" class="modal" role="dialog" aria-labelledby="advancedSearchTitle" aria-modal="true"
|
|
aria-hidden="true">
|
|
<div class="modal-content advanced-search-content">
|
|
<button class="close" aria-label="Close advanced search dialog">×</button>
|
|
<h2 id="advancedSearchTitle">Advanced Search</h2>
|
|
<form id="advancedSearchForm">
|
|
<div class="form-group">
|
|
<label for="advancedSearchQuery">Search Query:</label>
|
|
<input type="text" id="advancedSearchQuery" placeholder="Enter search terms..."
|
|
aria-describedby="queryHelp">
|
|
<div id="queryHelp" class="help-text">
|
|
Search in titles, URLs, and folder names
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="searchInFolder">Search in Folder:</label>
|
|
<select id="searchInFolder" aria-describedby="folderSearchHelp">
|
|
<option value="">All Folders</option>
|
|
<!-- Dynamically populated with folder options -->
|
|
</select>
|
|
<div id="folderSearchHelp" class="help-text">
|
|
Limit search to a specific folder
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="dateFilter">Date Added:</label>
|
|
<select id="dateFilter" aria-describedby="dateHelp">
|
|
<option value="">Any time</option>
|
|
<option value="today">Today</option>
|
|
<option value="week">This week</option>
|
|
<option value="month">This month</option>
|
|
<option value="year">This year</option>
|
|
<option value="custom">Custom range</option>
|
|
</select>
|
|
<div id="dateHelp" class="help-text">
|
|
Filter by when bookmarks were added
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group" id="customDateRange" style="display: none;">
|
|
<label for="dateFrom">From:</label>
|
|
<input type="date" id="dateFrom" aria-describedby="dateFromHelp">
|
|
<div id="dateFromHelp" class="help-text">Start date for custom range</div>
|
|
|
|
<label for="dateTo">To:</label>
|
|
<input type="date" id="dateTo" aria-describedby="dateToHelp">
|
|
<div id="dateToHelp" class="help-text">End date for custom range</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="statusFilter">Status:</label>
|
|
<select id="statusFilter" aria-describedby="statusHelp">
|
|
<option value="">Any status</option>
|
|
<option value="valid">Valid links</option>
|
|
<option value="invalid">Invalid links</option>
|
|
<option value="duplicate">Duplicates</option>
|
|
<option value="unknown">Untested</option>
|
|
</select>
|
|
<div id="statusHelp" class="help-text">
|
|
Filter by link status
|
|
</div>
|
|
</div>
|
|
|
|
<div class="search-actions">
|
|
<button type="submit" class="btn btn-primary" aria-label="Execute advanced search">Search</button>
|
|
<button type="button" id="saveSearchBtn" class="btn btn-secondary"
|
|
aria-label="Save this search">Save Search</button>
|
|
<button type="button" id="clearAdvancedSearchBtn" class="btn btn-warning"
|
|
aria-label="Clear all search criteria">Clear</button>
|
|
<button type="button" id="cancelAdvancedSearchBtn" class="btn btn-secondary"
|
|
aria-label="Cancel and close dialog">Cancel</button>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="saved-searches-section">
|
|
<h3>Saved Searches</h3>
|
|
<div id="savedSearchesList" class="saved-searches-list">
|
|
<!-- Dynamically populated with saved searches -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="search-history-section">
|
|
<h3>Recent Searches</h3>
|
|
<div id="searchHistoryList" class="search-history-list">
|
|
<!-- Dynamically populated with search history -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bulk Actions Bar -->
|
|
<div id="bulkActions" class="bulk-actions" style="display: none;" role="toolbar" aria-label="Bulk actions">
|
|
<div class="bulk-selection-info">
|
|
<span class="selection-count">0 selected</span>
|
|
</div>
|
|
<div class="bulk-action-buttons">
|
|
<select id="bulkMoveFolder" class="bulk-folder-select" aria-label="Select folder for bulk move">
|
|
<option value="">Move to folder...</option>
|
|
</select>
|
|
<button id="bulkMoveBtn" class="btn btn-secondary" disabled
|
|
aria-label="Move selected bookmarks to folder">Move</button>
|
|
<button id="bulkDeleteBtn" class="btn btn-danger" disabled aria-label="Delete selected bookmarks">Delete
|
|
Selected</button>
|
|
<button id="bulkSelectAllBtn" class="btn btn-secondary" aria-label="Select all visible bookmarks">Select
|
|
All</button>
|
|
<button id="bulkClearSelectionBtn" class="btn btn-secondary" aria-label="Clear all selections">Clear
|
|
Selection</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Analytics Dashboard Modal -->
|
|
<div id="analyticsModal" class="modal" role="dialog" aria-labelledby="analyticsTitle" aria-modal="true"
|
|
aria-hidden="true">
|
|
<div class="modal-content analytics-modal-content">
|
|
<button class="close" aria-label="Close analytics dashboard">×</button>
|
|
<h2 id="analyticsTitle">Analytics Dashboard</h2>
|
|
|
|
<div class="analytics-tabs">
|
|
<button class="analytics-tab active" data-tab="overview">Overview</button>
|
|
<button class="analytics-tab" data-tab="trends">Trends</button>
|
|
<button class="analytics-tab" data-tab="health">Health Report</button>
|
|
<button class="analytics-tab" data-tab="usage">Usage Patterns</button>
|
|
</div>
|
|
|
|
<div class="analytics-content">
|
|
<!-- Overview Tab -->
|
|
<div id="overviewTab" class="analytics-tab-content active">
|
|
<div class="analytics-summary">
|
|
<div class="summary-cards">
|
|
<div class="summary-card">
|
|
<div class="summary-value" id="totalBookmarksCount">0</div>
|
|
<div class="summary-label">Total Bookmarks</div>
|
|
</div>
|
|
<div class="summary-card">
|
|
<div class="summary-value" id="validLinksCount">0</div>
|
|
<div class="summary-label">Valid Links</div>
|
|
</div>
|
|
<div class="summary-card">
|
|
<div class="summary-value" id="invalidLinksCount">0</div>
|
|
<div class="summary-label">Invalid Links</div>
|
|
</div>
|
|
<div class="summary-card">
|
|
<div class="summary-value" id="duplicatesCount">0</div>
|
|
<div class="summary-label">Duplicates</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="analytics-charts">
|
|
<div class="chart-container">
|
|
<h3>Status Distribution</h3>
|
|
<canvas id="statusChart" width="400" height="200"></canvas>
|
|
</div>
|
|
<div class="chart-container">
|
|
<h3>Folders Overview</h3>
|
|
<canvas id="foldersChart" width="400" height="200"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Trends Tab -->
|
|
<div id="trendsTab" class="analytics-tab-content">
|
|
<div class="trends-controls">
|
|
<select id="trendsTimeframe">
|
|
<option value="7">Last 7 days</option>
|
|
<option value="30">Last 30 days</option>
|
|
<option value="90">Last 90 days</option>
|
|
<option value="365">Last year</option>
|
|
</select>
|
|
</div>
|
|
<div class="chart-container">
|
|
<h3>Bookmarks Added Over Time</h3>
|
|
<canvas id="trendsChart" width="600" height="300"></canvas>
|
|
</div>
|
|
<div class="chart-container">
|
|
<h3>Link Testing Results Over Time</h3>
|
|
<canvas id="testingTrendsChart" width="600" height="300"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Health Report Tab -->
|
|
<div id="healthTab" class="analytics-tab-content">
|
|
<div class="health-summary">
|
|
<div class="health-metric">
|
|
<span class="health-label">Overall Health Score:</span>
|
|
<span class="health-score" id="healthScore">0%</span>
|
|
</div>
|
|
<div class="health-metric">
|
|
<span class="health-label">Last Full Test:</span>
|
|
<span class="health-value" id="lastFullTest">Never</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="health-issues">
|
|
<h3>Issues Found</h3>
|
|
<div id="healthIssuesList" class="health-issues-list">
|
|
<!-- Dynamically populated -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="health-recommendations">
|
|
<h3>Recommendations</h3>
|
|
<div id="healthRecommendations" class="recommendations-list">
|
|
<!-- Dynamically populated -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Usage Patterns Tab -->
|
|
<div id="usageTab" class="analytics-tab-content">
|
|
<div class="usage-stats">
|
|
<div class="usage-metric">
|
|
<span class="usage-label">Most Active Folder:</span>
|
|
<span class="usage-value" id="mostActiveFolder">-</span>
|
|
</div>
|
|
<div class="usage-metric">
|
|
<span class="usage-label">Average Rating:</span>
|
|
<span class="usage-value" id="averageRating">-</span>
|
|
</div>
|
|
<div class="usage-metric">
|
|
<span class="usage-label">Most Visited:</span>
|
|
<span class="usage-value" id="mostVisited">-</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chart-container">
|
|
<h3>Top Folders by Bookmark Count</h3>
|
|
<canvas id="topFoldersChart" width="600" height="300"></canvas>
|
|
</div>
|
|
|
|
<div class="chart-container">
|
|
<h3>Rating Distribution</h3>
|
|
<canvas id="ratingsChart" width="600" height="300"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="analytics-actions">
|
|
<button id="exportAnalyticsBtn" class="btn btn-secondary">Export Analytics Data</button>
|
|
<button id="generateReportBtn" class="btn btn-primary">Generate Report</button>
|
|
<button id="closeAnalyticsBtn" class="btn btn-secondary">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sort Options Modal -->
|
|
<div id="sortModal" class="modal" role="dialog" aria-labelledby="sortTitle" aria-modal="true" aria-hidden="true">
|
|
<div class="modal-content">
|
|
<button class="close" aria-label="Close sort dialog">×</button>
|
|
<h2 id="sortTitle">Sort Bookmarks</h2>
|
|
<form id="sortForm">
|
|
<div class="form-group">
|
|
<label for="sortCriteria">Sort by:</label>
|
|
<select id="sortCriteria" required aria-describedby="sortHelp">
|
|
<option value="title">Title (A-Z)</option>
|
|
<option value="url">URL</option>
|
|
<option value="folder">Folder</option>
|
|
<option value="date">Date Added</option>
|
|
<option value="status">Status</option>
|
|
</select>
|
|
<div id="sortHelp" class="help-text">
|
|
Choose the criteria to sort bookmarks by
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="sortOrder">Order:</label>
|
|
<select id="sortOrder" required aria-describedby="orderHelp">
|
|
<option value="asc">Ascending</option>
|
|
<option value="desc">Descending</option>
|
|
</select>
|
|
<div id="orderHelp" class="help-text">
|
|
Choose ascending or descending order
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-actions">
|
|
<button type="submit" class="btn btn-primary" aria-label="Apply sort">Sort</button>
|
|
<button type="button" id="cancelSortBtn" class="btn btn-secondary"
|
|
aria-label="Cancel and close dialog">Cancel</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Folder Management Modal -->
|
|
<div id="folderManagementModal" class="modal" role="dialog" aria-labelledby="folderManagementTitle"
|
|
aria-modal="true" aria-hidden="true">
|
|
<div class="modal-content folder-management-content">
|
|
<button class="close" aria-label="Close folder management dialog">×</button>
|
|
<h2 id="folderManagementTitle">Manage Folders</h2>
|
|
|
|
<div class="folder-management-section">
|
|
<h3>Existing Folders</h3>
|
|
<div id="folderManagementList" class="folder-management-list">
|
|
<!-- Dynamically populated with folder items -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="folder-creation-section">
|
|
<h3>Create New Folder</h3>
|
|
<form id="createFolderForm">
|
|
<div class="form-group">
|
|
<label for="newFolderName">Folder Name:</label>
|
|
<input type="text" id="newFolderName" required placeholder="Enter folder name..."
|
|
aria-describedby="folderNameHelp">
|
|
<div id="folderNameHelp" class="help-text">
|
|
Enter a name for the new folder
|
|
</div>
|
|
</div>
|
|
<button type="submit" class="btn btn-success" aria-label="Create new folder">Create Folder</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="modal-actions">
|
|
<button type="button" id="cancelFolderManagementBtn" class="btn btn-secondary"
|
|
aria-label="Close folder management">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Share Modal -->
|
|
<div id="shareModal" class="modal" role="dialog" aria-labelledby="shareTitle" aria-modal="true" aria-hidden="true">
|
|
<div class="modal-content share-modal-content">
|
|
<button class="close" aria-label="Close share dialog">×</button>
|
|
<h2 id="shareTitle">Share Bookmark Collection</h2>
|
|
|
|
<div class="share-tabs">
|
|
<button class="share-tab active" data-tab="public">Public Collection</button>
|
|
<button class="share-tab" data-tab="social">Social Media</button>
|
|
<button class="share-tab" data-tab="email">Email</button>
|
|
<button class="share-tab" data-tab="recommendations">Recommendations</button>
|
|
</div>
|
|
|
|
<!-- Public Collection Tab -->
|
|
<div id="publicShareTab" class="share-tab-content active">
|
|
<div class="share-section">
|
|
<h3>Create Public Collection</h3>
|
|
<p>Generate a shareable URL for your bookmark collection that others can view and import.</p>
|
|
|
|
<div class="form-group">
|
|
<label for="collectionName">Collection Name:</label>
|
|
<input type="text" id="collectionName" placeholder="My Awesome Bookmarks" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="collectionDescription">Description:</label>
|
|
<textarea id="collectionDescription" rows="3"
|
|
placeholder="Describe your bookmark collection..."></textarea>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="shareFilter">What to Share:</label>
|
|
<select id="shareFilter">
|
|
<option value="all">All Bookmarks</option>
|
|
<option value="current">Current View (filtered)</option>
|
|
<option value="valid">Valid Links Only</option>
|
|
<option value="folder">Specific Folder</option>
|
|
<option value="favorites">Favorites Only</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group" id="shareFolderGroup" style="display: none;">
|
|
<label for="shareFolderSelect">Select Folder:</label>
|
|
<select id="shareFolderSelect">
|
|
<!-- Dynamically populated -->
|
|
</select>
|
|
</div>
|
|
|
|
<div class="privacy-settings">
|
|
<h4>Privacy Settings:</h4>
|
|
<label>
|
|
<input type="checkbox" id="allowComments" checked>
|
|
Allow comments on shared collection
|
|
</label>
|
|
<label>
|
|
<input type="checkbox" id="allowDownload" checked>
|
|
Allow others to download/import this collection
|
|
</label>
|
|
<label>
|
|
<input type="checkbox" id="requirePassword">
|
|
Require password to access
|
|
</label>
|
|
<div id="passwordGroup" class="form-group" style="display: none;">
|
|
<label for="sharePassword">Password:</label>
|
|
<input type="password" id="sharePassword" placeholder="Enter password">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="share-actions">
|
|
<button id="generateShareUrlBtn" class="btn btn-primary">Generate Share URL</button>
|
|
<button id="copyShareUrlBtn" class="btn btn-secondary" style="display: none;">Copy URL</button>
|
|
</div>
|
|
|
|
<div id="shareUrlResult" class="share-url-result" style="display: none;">
|
|
<div class="share-url-container">
|
|
<input type="text" id="shareUrl" readonly>
|
|
<button id="copyUrlBtn" class="btn btn-small btn-secondary">Copy</button>
|
|
</div>
|
|
<div class="share-stats">
|
|
<span id="shareViewCount">0 views</span> •
|
|
<span id="shareDownloadCount">0 downloads</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Social Media Tab -->
|
|
<div id="socialShareTab" class="share-tab-content">
|
|
<div class="share-section">
|
|
<h3>Share to Social Media</h3>
|
|
<p>Share your bookmark collection on social media platforms.</p>
|
|
|
|
<div class="social-platforms">
|
|
<button class="social-btn twitter-btn" data-platform="twitter">
|
|
<span class="social-icon">🐦</span>
|
|
Share on Twitter
|
|
</button>
|
|
<button class="social-btn facebook-btn" data-platform="facebook">
|
|
<span class="social-icon">📘</span>
|
|
Share on Facebook
|
|
</button>
|
|
<button class="social-btn linkedin-btn" data-platform="linkedin">
|
|
<span class="social-icon">💼</span>
|
|
Share on LinkedIn
|
|
</button>
|
|
<button class="social-btn reddit-btn" data-platform="reddit">
|
|
<span class="social-icon">🔴</span>
|
|
Share on Reddit
|
|
</button>
|
|
</div>
|
|
|
|
<div class="social-preview">
|
|
<h4>Preview:</h4>
|
|
<div class="social-post-preview">
|
|
<div class="social-post-text" id="socialPostText">
|
|
Check out my curated bookmark collection: "My Awesome Bookmarks" - 25 carefully selected
|
|
links about web development, design, and productivity tools.
|
|
</div>
|
|
<div class="social-post-link" id="socialPostLink">
|
|
https://bookmarks.share/abc123
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="socialMessage">Custom Message:</label>
|
|
<textarea id="socialMessage" rows="3"
|
|
placeholder="Add your own message to the post..."></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Email Tab -->
|
|
<div id="emailShareTab" class="share-tab-content">
|
|
<div class="share-section">
|
|
<h3>Share via Email</h3>
|
|
<p>Send your bookmark collection via email.</p>
|
|
|
|
<div class="form-group">
|
|
<label for="emailRecipients">Recipients:</label>
|
|
<input type="email" id="emailRecipients" placeholder="Enter email addresses separated by commas"
|
|
multiple>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="emailSubject">Subject:</label>
|
|
<input type="text" id="emailSubject" value="Check out my bookmark collection">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="emailMessage">Message:</label>
|
|
<textarea id="emailMessage" rows="5"
|
|
placeholder="Hi! I wanted to share my bookmark collection with you..."></textarea>
|
|
</div>
|
|
|
|
<div class="email-format">
|
|
<h4>Include:</h4>
|
|
<label>
|
|
<input type="checkbox" id="includeShareUrl" checked>
|
|
Shareable URL
|
|
</label>
|
|
<label>
|
|
<input type="checkbox" id="includeBookmarkList">
|
|
Full bookmark list in email
|
|
</label>
|
|
<label>
|
|
<input type="checkbox" id="attachHtmlFile">
|
|
Attach HTML file
|
|
</label>
|
|
</div>
|
|
|
|
<div class="email-actions">
|
|
<button id="sendEmailBtn" class="btn btn-primary">Send Email</button>
|
|
<button id="openEmailClientBtn" class="btn btn-secondary">Open Email Client</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recommendations Tab -->
|
|
<div id="recommendationsTab" class="share-tab-content">
|
|
<div class="share-section">
|
|
<h3>Bookmark Recommendations</h3>
|
|
<p>Discover similar bookmark collections and get personalized recommendations.</p>
|
|
|
|
<div class="recommendation-categories">
|
|
<h4>Based on Your Collection:</h4>
|
|
<div class="category-tags" id="detectedCategories">
|
|
<!-- Dynamically populated based on user's bookmarks -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="similar-collections">
|
|
<h4>Similar Collections:</h4>
|
|
<div id="similarCollectionsList" class="collections-list">
|
|
<!-- Dynamically populated -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="recommended-bookmarks">
|
|
<h4>Recommended Bookmarks:</h4>
|
|
<div id="recommendedBookmarksList" class="recommendations-list">
|
|
<!-- Dynamically populated -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="recommendation-actions">
|
|
<button id="refreshRecommendationsBtn" class="btn btn-secondary">Refresh
|
|
Recommendations</button>
|
|
<button id="saveRecommendationsBtn" class="btn btn-primary">Save Selected</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-actions">
|
|
<button id="cancelShareBtn" class="btn btn-secondary"
|
|
aria-label="Cancel and close share dialog">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Templates Modal -->
|
|
<div id="templatesModal" class="modal" role="dialog" aria-labelledby="templatesTitle" aria-modal="true"
|
|
aria-hidden="true">
|
|
<div class="modal-content templates-modal-content">
|
|
<button class="close" aria-label="Close templates dialog">×</button>
|
|
<h2 id="templatesTitle">Bookmark Collection Templates</h2>
|
|
|
|
<div class="templates-tabs">
|
|
<button class="templates-tab active" data-tab="browse">Browse Templates</button>
|
|
<button class="templates-tab" data-tab="create">Create Template</button>
|
|
<button class="templates-tab" data-tab="my-templates">My Templates</button>
|
|
</div>
|
|
|
|
<!-- Browse Templates Tab -->
|
|
<div id="browseTemplatesTab" class="templates-tab-content active">
|
|
<div class="templates-section">
|
|
<div class="template-categories">
|
|
<button class="category-filter active" data-category="all">All Categories</button>
|
|
<button class="category-filter" data-category="development">Development</button>
|
|
<button class="category-filter" data-category="design">Design</button>
|
|
<button class="category-filter" data-category="productivity">Productivity</button>
|
|
<button class="category-filter" data-category="learning">Learning</button>
|
|
<button class="category-filter" data-category="news">News & Media</button>
|
|
<button class="category-filter" data-category="tools">Tools</button>
|
|
</div>
|
|
|
|
<div class="templates-grid" id="templatesGrid">
|
|
<!-- Dynamically populated with templates -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Create Template Tab -->
|
|
<div id="createTemplateTab" class="templates-tab-content">
|
|
<div class="templates-section">
|
|
<h3>Create New Template</h3>
|
|
<p>Create a template from your current bookmark collection to share with others.</p>
|
|
|
|
<div class="form-group">
|
|
<label for="templateName">Template Name:</label>
|
|
<input type="text" id="templateName" placeholder="e.g., Web Developer Starter Kit" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="templateDescription">Description:</label>
|
|
<textarea id="templateDescription" rows="3"
|
|
placeholder="Describe what this template is for and who would benefit from it..."></textarea>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="templateCategory">Category:</label>
|
|
<select id="templateCategory">
|
|
<option value="development">Development</option>
|
|
<option value="design">Design</option>
|
|
<option value="productivity">Productivity</option>
|
|
<option value="learning">Learning</option>
|
|
<option value="news">News & Media</option>
|
|
<option value="tools">Tools</option>
|
|
<option value="other">Other</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="templateTags">Tags:</label>
|
|
<input type="text" id="templateTags" placeholder="Enter tags separated by commas">
|
|
</div>
|
|
|
|
<div class="template-source">
|
|
<h4>Source Bookmarks:</h4>
|
|
<div class="form-group">
|
|
<label for="templateSource">Include:</label>
|
|
<select id="templateSource">
|
|
<option value="all">All Bookmarks</option>
|
|
<option value="current">Current View (filtered)</option>
|
|
<option value="folder">Specific Folder</option>
|
|
<option value="favorites">Favorites Only</option>
|
|
<option value="valid">Valid Links Only</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="template-privacy">
|
|
<label>
|
|
<input type="checkbox" id="templatePublic" checked>
|
|
Make template publicly available
|
|
</label>
|
|
<label>
|
|
<input type="checkbox" id="templateAttribution">
|
|
Allow attribution to my profile
|
|
</label>
|
|
</div>
|
|
|
|
<div class="template-actions">
|
|
<button id="createTemplateBtn" class="btn btn-primary">Create Template</button>
|
|
<button id="previewTemplateBtn" class="btn btn-secondary">Preview</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- My Templates Tab -->
|
|
<div id="myTemplatesTab" class="templates-tab-content">
|
|
<div class="templates-section">
|
|
<h3>My Templates</h3>
|
|
<div id="myTemplatesList" class="my-templates-list">
|
|
<!-- Dynamically populated -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-actions">
|
|
<button id="cancelTemplatesBtn" class="btn btn-secondary"
|
|
aria-label="Cancel and close templates dialog">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
|
|
</html> |