andrew
f54ed2164d
Introduces a unified icon picker supporting Material, Lucide, Tabler, Phosphor, Remix, Bootstrap, Heroicons, Feather, Simple Icons, and Radix, with category navigation and search. Adds option to use site favicon for bookmarks, updates bookmark rendering to support SVG and image icons, and refines popup and icon grid UI. Includes new iconSets.js for icon set management and updates CSS/HTML for improved icon selection experience.
135 lines
5.0 KiB
HTML
135 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>New Tab</title>
|
|
<link rel="icon" href="../assets/images/Logos/Nebula-Icon.svg" type="image/png">
|
|
<link rel="stylesheet" href="home.css">
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined"
|
|
rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/remixicon@3/fonts/remixicon.css" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1/font/bootstrap-icons.css" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<div class="home-container">
|
|
<div class="logo">
|
|
<img src="../assets/images/Logos/Nebula-Logo.svg" class="logo-img">
|
|
<div class="logo-text">Nebula Browser</div>
|
|
</div>
|
|
|
|
<div class="search-container">
|
|
<div class="search-engine-selector">
|
|
<button id="searchEngineBtn" class="search-engine-btn">
|
|
<img id="searchEngineLogo" src="../assets/images/icons/google.svg" alt="Search Engine">
|
|
</button>
|
|
<div id="searchEngineDropdown" class="search-engine-dropdown hidden">
|
|
<div class="search-engine-option" data-engine="google">
|
|
<img src="../assets/images/icons/google.svg" alt="Google">
|
|
</div>
|
|
<div class="search-engine-option" data-engine="bing">
|
|
<img src="../assets/images/icons/bing.svg" alt="Bing">
|
|
</div>
|
|
<div class="search-engine-option" data-engine="duckduckgo">
|
|
<img src="../assets/images/icons/duckduckgo.svg" alt="DuckDuckGo">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="search-bar">
|
|
<input type="text" id="searchInput" class="search-input" placeholder="Search">
|
|
<button id="searchBtn" class="search-btn">
|
|
<span class="material-symbols-outlined">search</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bookmarks" id="bookmarkList">
|
|
<!-- Bookmarks dynamically inserted here -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Popup for adding a bookmark -->
|
|
<div id="addPopup" class="popup hidden">
|
|
<div class="popup-inner">
|
|
<h2>Add New Bookmark</h2>
|
|
|
|
<!-- Title field -->
|
|
<label for="titleInput">Title</label>
|
|
<input type="text" id="titleInput" placeholder="Enter title">
|
|
|
|
<!-- URL field -->
|
|
<label for="urlInput">URL</label>
|
|
<input type="url" id="urlInput" placeholder="https://example.com">
|
|
|
|
<!-- Icon picker -->
|
|
<div class="icon-picker-layout">
|
|
<nav class="icon-side-nav" id="iconCategoryNav" aria-label="Icon Categories">
|
|
<!-- Category nav buttons injected here -->
|
|
</nav>
|
|
<div class="icon-main">
|
|
<div class="icon-header">
|
|
<label for="iconFilter" class="icon-filter-label">Icon</label>
|
|
<div class="favicon-toggle">
|
|
<input type="checkbox" id="useFavicon" class="favicon-checkbox">
|
|
<label for="useFavicon" class="favicon-label">Use site favicon</label>
|
|
</div>
|
|
</div>
|
|
<input type="text" id="iconFilter" class="icon-filter"
|
|
placeholder="Search for icon, enter emoji, or type 'favicon'">
|
|
<div id="iconGrid" class="icon-grid" tabindex="0" aria-label="Icon selection list"></div>
|
|
<input type="hidden" id="selectedIcon">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- action buttons -->
|
|
<div class="popup-buttons">
|
|
<button id="cancelBtn">Cancel</button>
|
|
<button id="saveBookmarkBtn">Add</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Theme loader script -->
|
|
<script src="customization.js"></script>
|
|
<script>
|
|
// Apply saved theme on page load and listen for updates
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
BrowserCustomizer.applyThemeToPage();
|
|
|
|
// Function to update logo and title based on theme
|
|
function updateLogoAndTitle(theme) {
|
|
const logoText = document.querySelector('.logo-text');
|
|
const logoImg = document.querySelector('.logo-img');
|
|
if (logoText) {
|
|
logoText.textContent = theme.customTitle || 'Nebula Browser';
|
|
}
|
|
if (logoImg) {
|
|
logoImg.style.display = theme.showLogo ? 'block' : 'none';
|
|
}
|
|
}
|
|
|
|
// Listen for theme updates via postMessage fallback
|
|
window.addEventListener('message', (event) => {
|
|
if (event.data.type === 'theme-update') {
|
|
const theme = event.data.theme;
|
|
localStorage.setItem('currentTheme', JSON.stringify(theme));
|
|
BrowserCustomizer.applyThemeToPage();
|
|
updateLogoAndTitle(theme);
|
|
}
|
|
});
|
|
|
|
// Listen for theme updates via Electron IPC
|
|
if (window.electronAPI && typeof window.electronAPI.on === 'function') {
|
|
window.electronAPI.on('theme-update', (theme) => {
|
|
localStorage.setItem('currentTheme', JSON.stringify(theme));
|
|
BrowserCustomizer.applyThemeToPage();
|
|
updateLogoAndTitle(theme);
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<!-- make this a module so we can import icons -->
|
|
<script type="module" src="home.js"></script>
|
|
</body>
|
|
</html>
|