andrew
870c52b4a6
Added support for a dynamic 'Custom' theme button that appears when user settings diverge from predefined themes. Improved theme state management by tracking the active theme name in localStorage, updating button states, and refining the preview to better reflect customizations. Also updated the settings page layout and styles for better user experience and fixed the preview to always show the custom title.
617 lines
20 KiB
HTML
617 lines
20 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: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
|
gap: 15px;
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.theme-btn {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 12px 8px;
|
|
background: transparent;
|
|
border: 2px solid transparent;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
color: var(--text);
|
|
text-align: center;
|
|
font-size: 0.85rem;
|
|
min-height: 90px;
|
|
}
|
|
|
|
.theme-btn:hover {
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.theme-btn.active {
|
|
border-color: var(--primary);
|
|
background: rgba(123, 46, 255, 0.1);
|
|
}
|
|
|
|
.custom-theme-btn {
|
|
border: 2px dashed rgba(255, 255, 255, 0.3) !important;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.custom-theme-btn:hover {
|
|
border-color: var(--accent) !important;
|
|
opacity: 1;
|
|
}
|
|
|
|
.custom-theme-btn.active {
|
|
border-color: var(--primary) !important;
|
|
background: rgba(123, 46, 255, 0.15) !important;
|
|
opacity: 1;
|
|
}
|
|
|
|
.theme-preview {
|
|
width: 60px;
|
|
height: 40px;
|
|
border-radius: 4px;
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.theme-preview::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
border-radius: 4px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.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-text {
|
|
font-size: 1.2rem;
|
|
font-weight: 600;
|
|
color: var(--primary);
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.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" 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>
|
|
|
|
<!-- 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" 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>
|
|
|
|
<!-- 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>
|