andrew
e8dc253f03
Enhanced inter-process communication for theme updates and navigation between home, settings, and main browser pages. Theme changes in settings now propagate to home via Electron IPC and postMessage fallback. Navigation requests from home and other webviews are handled more robustly, supporting both Electron IPC and postMessage. Also refactored tab creation and improved event handling for better reliability.
120 lines
4.1 KiB
HTML
120 lines
4.1 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">
|
|
</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 -->
|
|
<label for="iconFilter">Icon</label>
|
|
<input type="text" id="iconFilter" class="icon-filter"
|
|
placeholder="Search for icon or enter emoji">
|
|
<div id="iconGrid" class="icon-grid"></div>
|
|
<input type="hidden" id="selectedIcon">
|
|
|
|
<!-- 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>
|