andrew
aef9b816db
Introduces a full browser customization system with support for theme presets, live editing, import/export, and non-destructive design. Adds new documentation for customization, updates the features list, and implements a ThemeManager for loading and managing themes at the application level. Updates home and settings pages to support live theming and preview, and adds four built-in themes (default, forest, ocean, sunset).
117 lines
3.9 KiB
HTML
117 lines
3.9 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
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
BrowserCustomizer.applyThemeToPage();
|
|
|
|
// Listen for theme updates from settings
|
|
window.addEventListener('message', (event) => {
|
|
if (event.data.type === 'theme-update') {
|
|
const theme = event.data.theme;
|
|
localStorage.setItem('currentTheme', JSON.stringify(theme));
|
|
BrowserCustomizer.applyThemeToPage();
|
|
|
|
// Update logo and title if needed
|
|
updateLogoAndTitle(theme);
|
|
}
|
|
});
|
|
|
|
// 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 (!theme.showLogo && logoImg) {
|
|
logoImg.style.display = 'none';
|
|
} else if (logoImg) {
|
|
logoImg.style.display = 'block';
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<!-- make this a module so we can import icons -->
|
|
<script type="module" src="home.js"></script>
|
|
</body>
|
|
</html>
|