nebula-project/NebulaBrowser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity
Files
95f523461395889eb9934ece52b43ea3fcaa275e
NebulaBrowser/renderer/settings.html
T
andrew 5fac652b27 Settings page mods 
- Made the settings page look more moderns
- Removed home page layout settings from settings menu
2025-09-08 12:41:46 +12:00

472 lines
21 KiB
HTML
Raw Blame History

<!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>">
<!-- Inline styles removed; styles now live in settings.css for a cleaner, modern look. -->
</head>
<body>
<div class="container" role="application">
<aside class="sidebar" aria-label="Settings categories">
<h1>⚙️ Settings</h1>
<nav class="tabs" role="tablist">
<button class="tab-link active" role="tab" aria-selected="true" aria-controls="panel-general" id="tab-general" data-tab="general">General</button>
<button class="tab-link" role="tab" aria-selected="false" aria-controls="panel-appearance" id="tab-appearance" data-tab="appearance">Appearance</button>
<button class="tab-link" role="tab" aria-selected="false" aria-controls="panel-history" id="tab-history" data-tab="history">History</button>
<button class="tab-link" role="tab" aria-selected="false" aria-controls="panel-about" id="tab-about" data-tab="about">About</button>
</nav>
</aside>
<main class="content">
<!-- General Panel -->
<section class="tab-panel active" id="panel-general" role="tabpanel" aria-labelledby="tab-general">
<h2>General</h2>
<div class="setting-group">
<label for="clear-data-btn">Clear All Cookies &amp; Data</label>
<button id="clear-data-btn">Clear Data</button>
</div>
<p class="note">Settings are stored locally on this device.</p>
<div class="setting-group">
<h3>Weather</h3>
<fieldset class="weather-units" style="display:flex; flex-direction:column; gap:8px; border:1px solid rgba(255,255,255,0.15); padding:10px; border-radius:8px;">
<legend style="padding:0 6px; opacity:.85;">Temperature units</legend>
<label><input type="radio" name="weather-unit" id="weather-unit-auto" value="auto" checked> Auto (based on locale)</label>
<label><input type="radio" name="weather-unit" id="weather-unit-c" value="c"> Celsius (°C)</label>
<label><input type="radio" name="weather-unit" id="weather-unit-f" value="f"> Fahrenheit (°F)</label>
</fieldset>
<p class="note">Affects the weather card on the Home page.</p>
</div>
<div class="debug-info" id="debug-info">Loading debug info...</div>
</section>
<!-- Appearance Panel -->
<section class="tab-panel" id="panel-appearance" role="tabpanel" aria-labelledby="tab-appearance">
<h2>🎨 Appearance</h2>
<!-- Theme Selection -->
<div class="customization-group">
<h3>Theme Presets</h3>
<div class="theme-selector">
<button id="theme-default" class="theme-btn" 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>
<button id="theme-cyberpunk" class="theme-btn" data-theme="cyberpunk">
<div class="theme-preview" style="background: linear-gradient(145deg, #0a0a0a, #2a0a3a, #1a0520);"></div>
<span>Cyberpunk</span>
</button>
<button id="theme-midnight-rose" class="theme-btn" data-theme="midnight-rose">
<div class="theme-preview" style="background: linear-gradient(145deg, #1c1820, #3d3046);"></div>
<span>Midnight Rose</span>
</button>
<button id="theme-arctic-ice" class="theme-btn" data-theme="arctic-ice">
<div class="theme-preview" style="background: linear-gradient(145deg, #f0f8ff, #d1e7ff);"></div>
<span>Arctic Ice</span>
</button>
<button id="theme-cherry-blossom" class="theme-btn" data-theme="cherry-blossom">
<div class="theme-preview" style="background: linear-gradient(145deg, #fff5f8, #ffd4db);"></div>
<span>Cherry Blossom</span>
</button>
<button id="theme-cosmic-purple" class="theme-btn" data-theme="cosmic-purple">
<div class="theme-preview" style="background: linear-gradient(145deg, #0f0524, #2d1b69, #4b0082);"></div>
<span>Cosmic Purple</span>
</button>
<button id="theme-emerald-dream" class="theme-btn" data-theme="emerald-dream">
<div class="theme-preview" style="background: linear-gradient(145deg, #0d2818, #2d5a44);"></div>
<span>Emerald Dream</span>
</button>
<button id="theme-mocha-coffee" class="theme-btn" data-theme="mocha-coffee">
<div class="theme-preview" style="background: linear-gradient(145deg, #3c2414, #5d3a26);"></div>
<span>Mocha Coffee</span>
</button>
<button id="theme-lavender-fields" class="theme-btn" data-theme="lavender-fields">
<div class="theme-preview" style="background: linear-gradient(145deg, #f8f4ff, #e6d8ff);"></div>
<span>Lavender Fields</span>
</button>
<button id="theme-custom" class="theme-btn custom-theme-btn" data-theme="custom" style="display: none;">
<div class="theme-preview" style="background: linear-gradient(145deg, var(--bg), var(--gradient-color));"></div>
<span>Custom</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>
<!-- 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" id="preview-logo">../assets/images/Logos/Nebula-Logo.svg</div>
<div class="preview-text">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>
<!-- History Panel -->
<section class="tab-panel" id="panel-history" role="tabpanel" aria-labelledby="tab-history">
<h2>History</h2>
<div class="customization-group">
<h3>Search History</h3>
<ul id="search-history-list"></ul>
<button id="clear-search-history-btn" style="margin-top: 10px;">Clear Search History</button>
</div>
<div class="customization-group">
<h3>Site History</h3>
<ul id="site-history-list"></ul>
<div style="display:flex; gap:10px; margin-top:10px; flex-wrap:wrap;">
<button id="clear-site-history-btn">Clear Site History</button>
<button id="add-test-history-btn">Add Test History</button>
</div>
</div>
</section>
<!-- About Panel -->
<section class="tab-panel" id="panel-about" role="tabpanel" aria-labelledby="tab-about">
<h2>About</h2>
<div class="customization-group">
<h3>Application</h3>
<ul id="about-app">
<li><strong>Name:</strong> <span id="about-app-name">Loading...</span></li>
<li><strong>Version:</strong> <span id="about-app-version">Loading...</span></li>
<li><strong>Packaged:</strong> <span id="about-packaged">Loading...</span></li>
<li><strong>User data:</strong> <span id="about-userdata" style="word-break: break-all;">Loading...</span></li>
</ul>
</div>
<div class="customization-group">
<h3>Runtime</h3>
<ul id="about-runtime">
<li><strong>Electron:</strong> <span id="about-electron">Loading...</span></li>
<li><strong>Chromium:</strong> <span id="about-chrome">Loading...</span></li>
<li><strong>Node.js:</strong> <span id="about-node">Loading...</span></li>
<li><strong>V8:</strong> <span id="about-v8">Loading...</span></li>
</ul>
</div>
<div class="customization-group">
<h3>System</h3>
<ul id="about-system">
<li><strong>OS:</strong> <span id="about-os">Loading...</span></li>
<li><strong>CPU:</strong> <span id="about-cpu">Loading...</span></li>
<li><strong>Architecture:</strong> <span id="about-arch">Loading...</span></li>
<li><strong>Memory:</strong> <span id="about-mem">Loading...</span></li>
</ul>
</div>
<div class="customization-group about-actions">
<button id="copy-about-btn">Copy diagnostics</button>
<a id="github-link" href="https://github.com/Bobbybear007/NebulaBrowser" class="github-btn" rel="noopener noreferrer">
<!-- GitHub mark (Octicons) MIT License -->
<svg viewBox="0 0 16 16" aria-hidden="true" focusable="false" role="img">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.01.08-2.11 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.91.08 2.11.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
</svg>
<span>GitHub</span>
</a>
<a id="help-link" href="https://nebula.zambazosmedia.group" class="help-btn" rel="noopener noreferrer">
<!-- Help icon -->
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" role="img">
<path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 15a1.25 1.25 0 1 1 0 2.5A1.25 1.25 0 0 1 12 17zm-.02-1.9c-.6 0-1.02-.42-1.02-.98 0-1.97 2.76-1.95 2.76-3.62 0-.77-.66-1.4-1.72-1.4-1 0-1.67.5-2.06 1.22-.3.54-.95.73-1.45.44-.54-.31-.72-1-.42-1.53C7.7 7.7 9.06 6.5 12 6.5c2.26 0 3.98 1.3 3.98 3.35 0 2.74-2.96 2.77-3 3.83-.03.6-.43 1.02-1 1.02z"/>
</svg>
<span>Help</span>
</a>
</div>
</section>
</main>
</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.style.wordBreak = 'break-all';
// Create a clickable link that asks host to navigate in a new tab
const a = document.createElement('a');
a.href = item;
a.textContent = item;
a.target = '_blank';
a.rel = 'noopener noreferrer';
a.style.color = 'var(--accent)';
a.style.textDecoration = 'none';
a.addEventListener('click', (e) => {
e.preventDefault();
try {
if (window.electronAPI && typeof window.electronAPI.sendToHost === 'function') {
// Ask the host to open this URL in a new tab to keep Settings open
window.electronAPI.sendToHost('navigate', item, { newTab: true });
} else if (window.parent) {
// Fallback: postMessage to parent if available
window.parent.postMessage({ type: 'navigate', url: item }, '*');
} else {
// Last resort: open in this webview
window.location.href = item;
}
} catch (err) {
console.error('[SETTINGS DEBUG] Failed to trigger navigation for', item, err);
}
});
li.appendChild(a);
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>
Reference in New Issue View Git Blame Copy Permalink