andrew
5e3b99fdd6
Introduces an edit mode on the home page allowing users to drag and reposition the greeting, search bar, top sites, and 'at a glance' widget. Adds persistent storage for these layout preferences and a settings panel for fine-tuning positions and widget corner. Updates CSS, HTML, and JS to support edit UI, drag logic, and settings integration.
771 lines
29 KiB
HTML
771 lines
29 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;
|
||
}
|
||
|
||
/* About actions */
|
||
.about-actions {
|
||
display: flex;
|
||
gap: 10px;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
.github-btn, .help-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 8px 12px;
|
||
background: var(--primary);
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: 6px;
|
||
text-decoration: none;
|
||
cursor: pointer;
|
||
transition: background 0.2s ease;
|
||
}
|
||
.github-btn:hover, .help-btn:hover {
|
||
background: var(--accent);
|
||
}
|
||
.github-btn svg, .help-btn svg {
|
||
width: 18px;
|
||
height: 18px;
|
||
fill: currentColor;
|
||
display: block;
|
||
}
|
||
</style>
|
||
</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 & 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>
|
||
|
||
<!-- 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>
|
||
<hr style="opacity:.2; margin:10px 0;">
|
||
<div style="display:grid; grid-template-columns: 1fr; gap:10px;">
|
||
<label style="display:flex; align-items:center; gap:10px;">
|
||
<span style="min-width:160px;">Search Y position</span>
|
||
<input type="range" id="home-search-y" min="5" max="85" step="1" value="22">
|
||
<span id="home-search-y-val" style="opacity:.8; width:48px; text-align:right;">22vh</span>
|
||
</label>
|
||
<label style="display:flex; align-items:center; gap:10px;">
|
||
<span style="min-width:160px;">Top Sites Y position</span>
|
||
<input type="range" id="home-bookmarks-y" min="10" max="90" step="1" value="40">
|
||
<span id="home-bookmarks-y-val" style="opacity:.8; width:48px; text-align:right;">40vh</span>
|
||
</label>
|
||
</div>
|
||
<div style="margin-top:8px;">
|
||
<div style="margin-bottom:6px;">At a glance corner</div>
|
||
<label style="margin-right:12px;"><input type="radio" name="home-glance-corner" value="br" checked> Bottom‑Right</label>
|
||
<label style="margin-right:12px;"><input type="radio" name="home-glance-corner" value="bl"> Bottom‑Left</label>
|
||
<label style="margin-right:12px;"><input type="radio" name="home-glance-corner" value="tr"> Top‑Right</label>
|
||
<label style="margin-right:12px;"><input type="radio" name="home-glance-corner" value="tl"> Top‑Left</label>
|
||
</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>
|