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).
539 lines
17 KiB
HTML
539 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Settings</title>
|
|
<link rel="stylesheet" href="settings.css" />
|
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⚙️</text></svg>">
|
|
<style>
|
|
body { font-family: sans-serif; padding: 20px; }
|
|
section { margin-bottom: 30px; }
|
|
h2 { border-bottom: 1px solid #ccc; padding-bottom: 5px; }
|
|
h3 { margin: 15px 0 10px 0; color: var(--accent); font-size: 1.1rem; }
|
|
ul { list-style: none; padding-left: 0; }
|
|
li { padding: 5px 0; border-bottom: 1px solid #eee; }
|
|
.debug-info { background: #f0f0f0; padding: 10px; margin: 10px 0; font-family: monospace; font-size: 12px; }
|
|
|
|
/* Customization Styles */
|
|
.customization-group {
|
|
margin-bottom: 25px;
|
|
padding: 15px;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.theme-selector {
|
|
display: flex;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.theme-btn {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 10px;
|
|
background: transparent;
|
|
border: 2px solid transparent;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
color: var(--text);
|
|
}
|
|
|
|
.theme-btn:hover {
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.theme-btn.active {
|
|
border-color: var(--primary);
|
|
background: rgba(123, 46, 255, 0.1);
|
|
}
|
|
|
|
.theme-preview {
|
|
width: 60px;
|
|
height: 40px;
|
|
border-radius: 4px;
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.color-controls {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
gap: 15px;
|
|
}
|
|
|
|
.color-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
}
|
|
|
|
.color-group label {
|
|
font-size: 0.9rem;
|
|
color: var(--text);
|
|
}
|
|
|
|
.color-group input[type="color"] {
|
|
width: 100%;
|
|
height: 40px;
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
border-radius: 4px;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.layout-options {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.layout-options label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
cursor: pointer;
|
|
padding: 8px;
|
|
border-radius: 4px;
|
|
transition: background 0.2s ease;
|
|
}
|
|
|
|
.layout-options label:hover {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.logo-options {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.logo-options label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.logo-options input[type="text"] {
|
|
flex: 1;
|
|
padding: 8px;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
border-radius: 4px;
|
|
color: var(--text);
|
|
}
|
|
|
|
.theme-management {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
}
|
|
|
|
.theme-management button {
|
|
padding: 8px 16px;
|
|
background: var(--primary);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: background 0.2s ease;
|
|
}
|
|
|
|
.theme-management button:hover {
|
|
background: var(--accent);
|
|
}
|
|
|
|
.theme-management button:last-child {
|
|
background: #e53e3e;
|
|
}
|
|
|
|
.theme-management button:last-child:hover {
|
|
background: #c53030;
|
|
}
|
|
|
|
.preview-container {
|
|
background: var(--dark-blue);
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.preview-home {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 15px;
|
|
padding: 20px;
|
|
background: var(--bg);
|
|
border-radius: 8px;
|
|
min-height: 200px;
|
|
}
|
|
|
|
.preview-logo {
|
|
font-size: 1.5rem;
|
|
font-weight: bold;
|
|
color: var(--primary);
|
|
}
|
|
|
|
.preview-search {
|
|
width: 60%;
|
|
height: 40px;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 20px;
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.preview-bookmarks {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.preview-bookmark {
|
|
width: 50px;
|
|
height: 50px;
|
|
background: var(--accent);
|
|
border-radius: 8px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>⚙️ Browser Settings</h1>
|
|
|
|
<div class="setting-group">
|
|
<label for="clear-data-btn">Clear All Cookies & Data</label>
|
|
<button id="clear-data-btn">Clear Data</button>
|
|
</div>
|
|
|
|
<p class="note">Settings are stored locally on this device.</p>
|
|
|
|
<div class="debug-info" id="debug-info">Loading debug info...</div>
|
|
|
|
<!-- Customization Section -->
|
|
<section>
|
|
<h2>🎨 Browser Customization</h2>
|
|
|
|
<!-- Theme Selection -->
|
|
<div class="customization-group">
|
|
<h3>Theme Presets</h3>
|
|
<div class="theme-selector">
|
|
<button id="theme-default" class="theme-btn active" data-theme="default">
|
|
<div class="theme-preview" style="background: linear-gradient(145deg, #121418, #1B1035);"></div>
|
|
<span>Default</span>
|
|
</button>
|
|
<button id="theme-ocean" class="theme-btn" data-theme="ocean">
|
|
<div class="theme-preview" style="background: linear-gradient(145deg, #1a365d, #2c5282);"></div>
|
|
<span>Ocean</span>
|
|
</button>
|
|
<button id="theme-forest" class="theme-btn" data-theme="forest">
|
|
<div class="theme-preview" style="background: linear-gradient(145deg, #1a202c, #2d3748);"></div>
|
|
<span>Forest</span>
|
|
</button>
|
|
<button id="theme-sunset" class="theme-btn" data-theme="sunset">
|
|
<div class="theme-preview" style="background: linear-gradient(145deg, #744210, #c05621);"></div>
|
|
<span>Sunset</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Color Customization -->
|
|
<div class="customization-group">
|
|
<h3>Custom Colors</h3>
|
|
<div class="color-controls">
|
|
<div class="color-group">
|
|
<label for="bg-color">Background:</label>
|
|
<input type="color" id="bg-color" value="#121418">
|
|
</div>
|
|
<div class="color-group">
|
|
<label for="gradient-color">Gradient End:</label>
|
|
<input type="color" id="gradient-color" value="#1B1035">
|
|
</div>
|
|
<div class="color-group">
|
|
<label for="accent-color">Accent:</label>
|
|
<input type="color" id="accent-color" value="#7B2EFF">
|
|
</div>
|
|
<div class="color-group">
|
|
<label for="secondary-color">Secondary:</label>
|
|
<input type="color" id="secondary-color" value="#00C6FF">
|
|
</div>
|
|
<div class="color-group">
|
|
<label for="text-color">Text:</label>
|
|
<input type="color" id="text-color" value="#E0E0E0">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Home Page Layout -->
|
|
<div class="customization-group">
|
|
<h3>Home Page Layout</h3>
|
|
<div class="layout-options">
|
|
<label>
|
|
<input type="radio" name="layout" value="centered" checked>
|
|
<span>Centered (Default)</span>
|
|
</label>
|
|
<label>
|
|
<input type="radio" name="layout" value="sidebar">
|
|
<span>Sidebar Navigation</span>
|
|
</label>
|
|
<label>
|
|
<input type="radio" name="layout" value="compact">
|
|
<span>Compact View</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Logo Customization -->
|
|
<div class="customization-group">
|
|
<h3>Logo & Branding</h3>
|
|
<div class="logo-options">
|
|
<label for="show-logo">
|
|
<input type="checkbox" id="show-logo" checked>
|
|
Show Nebula Logo
|
|
</label>
|
|
<label for="custom-title">
|
|
Custom Title:
|
|
<input type="text" id="custom-title" placeholder="Nebula Browser" maxlength="50">
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Theme Management -->
|
|
<div class="customization-group">
|
|
<h3>Theme Management</h3>
|
|
<div class="theme-management">
|
|
<button id="save-custom-theme">Save Current as Custom Theme</button>
|
|
<button id="export-theme">Export Theme</button>
|
|
<button id="import-theme">Import Theme</button>
|
|
<input type="file" id="theme-file-input" accept=".json" style="display: none;">
|
|
<button id="reset-to-default">Reset to Default</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Live Preview -->
|
|
<div class="customization-group">
|
|
<h3>Preview</h3>
|
|
<div class="preview-container" id="preview-container">
|
|
<div class="preview-home">
|
|
<div class="preview-logo">🌌 Nebula</div>
|
|
<div class="preview-search"></div>
|
|
<div class="preview-bookmarks">
|
|
<div class="preview-bookmark"></div>
|
|
<div class="preview-bookmark"></div>
|
|
<div class="preview-bookmark"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- add history views -->
|
|
<section>
|
|
<h2>Search History</h2>
|
|
<ul id="search-history-list"></ul>
|
|
<button id="clear-search-history-btn" style="margin-top: 10px;">Clear Search History</button>
|
|
</section>
|
|
<section>
|
|
<h2>Site History</h2>
|
|
<ul id="site-history-list"></ul>
|
|
<button id="clear-site-history-btn" style="margin-top: 10px;">Clear Site History</button>
|
|
<button id="add-test-history-btn" style="margin-top: 10px; margin-left: 10px;">Add Test History</button>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- status overlay moved outside of .container -->
|
|
<div id="status" class="status hidden">
|
|
<div class="spinner"></div>
|
|
<span id="status-text"></span>
|
|
</div>
|
|
|
|
<script src="settings.js"></script>
|
|
<script src="customization.js"></script>
|
|
<script>
|
|
// Apply saved theme immediately when page loads
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
BrowserCustomizer.applyThemeToPage();
|
|
});
|
|
|
|
// Update debug info
|
|
function updateDebugInfo() {
|
|
const debugDiv = document.getElementById('debug-info');
|
|
const localStorage = window.localStorage;
|
|
const hasElectronAPI = !!window.electronAPI;
|
|
const siteHistory = localStorage ? localStorage.getItem('siteHistory') : 'N/A';
|
|
|
|
debugDiv.innerHTML = `
|
|
localStorage available: ${!!localStorage}<br>
|
|
electronAPI available: ${hasElectronAPI}<br>
|
|
siteHistory in localStorage: ${siteHistory || 'null'}<br>
|
|
Current domain: ${window.location.hostname}<br>
|
|
Current protocol: ${window.location.protocol}
|
|
`;
|
|
}
|
|
|
|
// Get site history from localStorage in this webview context
|
|
function getSiteHistoryFromLocalStorage() {
|
|
try {
|
|
const history = localStorage.getItem('siteHistory');
|
|
console.log('[SETTINGS DEBUG] localStorage siteHistory:', history);
|
|
return history ? JSON.parse(history) : [];
|
|
} catch (err) {
|
|
console.error('[SETTINGS DEBUG] Error reading from localStorage:', err);
|
|
return [];
|
|
}
|
|
}
|
|
|
|
// Sync site history from main browser's localStorage to this webview's localStorage
|
|
function syncSiteHistoryFromMain() {
|
|
try {
|
|
// Try to get the parent window's localStorage
|
|
if (window.parent && window.parent !== window) {
|
|
const parentHistory = window.parent.localStorage.getItem('siteHistory');
|
|
if (parentHistory) {
|
|
localStorage.setItem('siteHistory', parentHistory);
|
|
console.log('[SETTINGS DEBUG] Synced history from parent window');
|
|
return JSON.parse(parentHistory);
|
|
}
|
|
}
|
|
return [];
|
|
} catch (err) {
|
|
console.log('[SETTINGS DEBUG] Could not sync from parent:', err.message);
|
|
return [];
|
|
}
|
|
}
|
|
|
|
function addTestHistory() {
|
|
const testSites = [
|
|
'https://www.google.com',
|
|
'https://github.com',
|
|
'https://stackoverflow.com',
|
|
'https://developer.mozilla.org',
|
|
'https://www.wikipedia.org'
|
|
];
|
|
|
|
testSites.forEach(site => {
|
|
try {
|
|
let history = getSiteHistoryFromLocalStorage();
|
|
history = history.filter(item => item !== site);
|
|
history.unshift(site);
|
|
localStorage.setItem('siteHistory', JSON.stringify(history));
|
|
console.log('[SETTINGS DEBUG] Added test site:', site);
|
|
} catch (err) {
|
|
console.error('Error adding test history:', err);
|
|
}
|
|
});
|
|
|
|
loadHistories();
|
|
}
|
|
|
|
async function loadHistories() {
|
|
try {
|
|
console.log('[SETTINGS DEBUG] Loading histories...');
|
|
updateDebugInfo();
|
|
|
|
// First try to sync from parent window
|
|
let siteHistory = syncSiteHistoryFromMain();
|
|
|
|
// If that didn't work, get from local storage
|
|
if (siteHistory.length === 0) {
|
|
siteHistory = getSiteHistoryFromLocalStorage();
|
|
}
|
|
|
|
// Try to get search history via message passing to parent or direct file access
|
|
let searchHistory = [];
|
|
|
|
const searchList = document.getElementById('search-history-list');
|
|
const siteList = document.getElementById('site-history-list');
|
|
|
|
// Clear existing content
|
|
searchList.innerHTML = '';
|
|
siteList.innerHTML = '';
|
|
|
|
// Populate search history
|
|
const searchLi = document.createElement('li');
|
|
searchLi.textContent = 'Search history not available in webview context';
|
|
searchLi.style.fontStyle = 'italic';
|
|
searchLi.style.color = '#666';
|
|
searchList.appendChild(searchLi);
|
|
|
|
// Populate site history
|
|
if (siteHistory && siteHistory.length > 0) {
|
|
console.log('[SETTINGS DEBUG] Displaying', siteHistory.length, 'site history items');
|
|
siteHistory.forEach(item => {
|
|
const li = document.createElement('li');
|
|
li.textContent = item;
|
|
li.style.wordBreak = 'break-all';
|
|
siteList.appendChild(li);
|
|
});
|
|
} else {
|
|
console.log('[SETTINGS DEBUG] No site history to display');
|
|
const li = document.createElement('li');
|
|
li.textContent = 'No browsing history found. Browse some websites first!';
|
|
li.style.fontStyle = 'italic';
|
|
li.style.color = '#666';
|
|
siteList.appendChild(li);
|
|
}
|
|
} catch(err) {
|
|
console.error('[SETTINGS DEBUG] Error loading histories:', err);
|
|
|
|
const searchList = document.getElementById('search-history-list');
|
|
const siteList = document.getElementById('site-history-list');
|
|
|
|
const errorLi1 = document.createElement('li');
|
|
errorLi1.textContent = 'Error loading search history: ' + err.message;
|
|
errorLi1.style.color = 'red';
|
|
searchList.appendChild(errorLi1);
|
|
|
|
const errorLi2 = document.createElement('li');
|
|
errorLi2.textContent = 'Error loading site history: ' + err.message;
|
|
errorLi2.style.color = 'red';
|
|
siteList.appendChild(errorLi2);
|
|
}
|
|
}
|
|
|
|
async function clearSiteHistory() {
|
|
try {
|
|
// Clear from localStorage
|
|
localStorage.removeItem('siteHistory');
|
|
console.log('[SETTINGS DEBUG] Cleared site history from localStorage');
|
|
|
|
loadHistories(); // Refresh the display
|
|
} catch (err) {
|
|
console.error('Error clearing site history:', err);
|
|
}
|
|
}
|
|
|
|
async function clearSearchHistory() {
|
|
console.log('Search history clearing not available in webview context');
|
|
}
|
|
|
|
// Load histories on page load
|
|
window.addEventListener('DOMContentLoaded', () => {
|
|
console.log('[SETTINGS DEBUG] DOM loaded, window.electronAPI:', !!window.electronAPI);
|
|
loadHistories();
|
|
|
|
// Refresh history every few seconds to pick up new browsing
|
|
setInterval(loadHistories, 3000);
|
|
|
|
// Add test history button functionality
|
|
const addTestBtn = document.getElementById('add-test-history-btn');
|
|
if (addTestBtn) {
|
|
addTestBtn.addEventListener('click', addTestHistory);
|
|
}
|
|
|
|
// Add clear buttons functionality
|
|
const clearSiteBtn = document.getElementById('clear-site-history-btn');
|
|
const clearSearchBtn = document.getElementById('clear-search-history-btn');
|
|
|
|
if (clearSiteBtn) {
|
|
clearSiteBtn.addEventListener('click', clearSiteHistory);
|
|
}
|
|
if (clearSearchBtn) {
|
|
clearSearchBtn.addEventListener('click', clearSearchHistory);
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|