mirror of
https://github.com/DevJSTAR/JSTAR-Tab.git
synced 2025-04-18 17:35:26 +00:00
144 lines
7.0 KiB
HTML
144 lines
7.0 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Browsing History - JSTAR Tab</title>
|
||
|
|
<link rel="icon" href="/images/favicon.png">
|
||
|
|
<link rel="stylesheet" href="css/style.css">
|
||
|
|
<link rel="stylesheet" href="css/history.css">
|
||
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" rel="stylesheet">
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@400;500;600&family=Roboto:wght@400;500;700&family=Montserrat:wght@400;500;600&family=Quicksand:wght@400;500;600&display=swap" rel="stylesheet">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<!-- SVG Icons Definitions -->
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||
|
|
<symbol id="icon-back" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
|
|
<path d="M19 12H5M12 19l-7-7 7-7"></path>
|
||
|
|
</symbol>
|
||
|
|
<symbol id="icon-search" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
|
|
<circle cx="11" cy="11" r="8"></circle>
|
||
|
|
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
|
||
|
|
</symbol>
|
||
|
|
<symbol id="icon-trash" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
|
|
<polyline points="3 6 5 6 21 6"></polyline>
|
||
|
|
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
|
||
|
|
</symbol>
|
||
|
|
<symbol id="icon-clock" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
|
|
<circle cx="12" cy="12" r="10"></circle>
|
||
|
|
<polyline points="12 6 12 12 16 14"></polyline>
|
||
|
|
</symbol>
|
||
|
|
<symbol id="icon-external-link" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
|
|
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
|
||
|
|
<polyline points="15 3 21 3 21 9"></polyline>
|
||
|
|
<line x1="10" y1="14" x2="21" y2="3"></line>
|
||
|
|
</symbol>
|
||
|
|
<symbol id="icon-filter" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
|
|
<polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon>
|
||
|
|
</symbol>
|
||
|
|
<symbol id="icon-x" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||
|
|
</symbol>
|
||
|
|
<symbol id="icon-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
|
|
<polyline points="20 6 9 17 4 12"></polyline>
|
||
|
|
</symbol>
|
||
|
|
<symbol id="icon-alert-triangle" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
|
|
<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
|
||
|
|
<line x1="12" y1="9" x2="12" y2="13"></line>
|
||
|
|
<line x1="12" y1="17" x2="12.01" y2="17"></line>
|
||
|
|
</symbol>
|
||
|
|
</svg>
|
||
|
|
|
||
|
|
<div class="history-container">
|
||
|
|
<!-- Header -->
|
||
|
|
<header class="history-header">
|
||
|
|
<div class="header-left">
|
||
|
|
<button class="back-button" title="Back to Home">
|
||
|
|
<svg><use xlink:href="#icon-back"></use></svg>
|
||
|
|
</button>
|
||
|
|
<h1>Browsing History</h1>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="header-right">
|
||
|
|
<div class="search-bar">
|
||
|
|
<svg><use xlink:href="#icon-search"></use></svg>
|
||
|
|
<input type="text" placeholder="Search history">
|
||
|
|
<button class="search-clear" title="Clear search">
|
||
|
|
<svg><use xlink:href="#icon-x"></use></svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<!-- Action Bar -->
|
||
|
|
<div class="history-actions">
|
||
|
|
<button id="delete-selected" disabled>
|
||
|
|
<svg><use xlink:href="#icon-trash"></use></svg>
|
||
|
|
<span>Delete Selected</span>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<button id="clear-all">
|
||
|
|
<svg><use xlink:href="#icon-trash"></use></svg>
|
||
|
|
<span>Clear All History</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Content Area -->
|
||
|
|
<div class="history-content">
|
||
|
|
<!-- Loading state -->
|
||
|
|
<div class="history-loading">
|
||
|
|
<div class="loading-spinner"></div>
|
||
|
|
<p>Loading your browsing history...</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Empty state -->
|
||
|
|
<div class="history-empty hidden">
|
||
|
|
<div class="empty-icon">
|
||
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||
|
|
<circle cx="12" cy="12" r="10"></circle>
|
||
|
|
<line x1="8" y1="15" x2="16" y2="15"></line>
|
||
|
|
<line x1="9" y1="9" x2="9.01" y2="9"></line>
|
||
|
|
<line x1="15" y1="9" x2="15.01" y2="9"></line>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<h2>No history found</h2>
|
||
|
|
<p>There are no items in your browsing history that match your search.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- History items will be rendered here -->
|
||
|
|
<div class="history-items"></div>
|
||
|
|
|
||
|
|
<!-- Load more button -->
|
||
|
|
<div class="history-load-more hidden">
|
||
|
|
<button>Load More</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Confirmation Dialog -->
|
||
|
|
<div id="confirmation-dialog" class="modal hidden">
|
||
|
|
<div class="modal-backdrop"></div>
|
||
|
|
<div class="modal-content confirmation-dialog">
|
||
|
|
<div class="confirmation-icon">
|
||
|
|
<svg><use xlink:href="#icon-alert-triangle"/></svg>
|
||
|
|
</div>
|
||
|
|
<div class="confirmation-content">
|
||
|
|
<h3 id="confirmation-title">Delete items?</h3>
|
||
|
|
<p id="confirmation-message">Are you sure you want to delete these items from your history?</p>
|
||
|
|
</div>
|
||
|
|
<div class="modal-actions">
|
||
|
|
<button id="confirm-no" class="btn-primary">Cancel</button>
|
||
|
|
<button id="confirm-yes" class="btn-primary btn-danger">Delete</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Notification Container -->
|
||
|
|
<div id="notification-container"></div>
|
||
|
|
|
||
|
|
<script src="js/storage.js"></script>
|
||
|
|
<script src="js/notifications.js"></script>
|
||
|
|
<script src="js/history.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|