This commit is contained in:
PlOszukiwacz 2025-02-01 17:25:09 +01:00
parent 6796c5e10d
commit fb3d89a0bf
Signed by: ploszukiwacz
GPG key ID: E059F5C88034386C
4 changed files with 810 additions and 2 deletions

View file

@ -79,7 +79,6 @@
<h4>Keyboard Shortcuts</h4>
<div id="shortcuts-editor">
</div>
<button class="settings-btn" id="addShortcut" data-action="addShortcut">Add Shortcut</button>
</div>
<div class="settings-section">
<h4>Layout & Style</h4>
@ -105,7 +104,21 @@
<textarea id="customCSS" class="settings-input code" rows="5" spellcheck="false"></textarea>
</div>
</div>
<div class="settings-section">
<h4>Backup & Restore</h4>
<button class="settings-btn" id="exportData">Export All Data</button>
<input type="file" id="importDataFile" accept=".json" style="display: none;">
<button class="settings-btn" id="importData">Import Data</button>
<p class="settings-note">This will backup/restore all your settings, links, shortcuts, icons, and search engines.</p>
</div>
<button class="settings-btn close-settings" data-action="closeSettings">Close</button>
<div class="copyright-section">
<p>Startpage v1.0.0</p>
<p>Made by <a href="https://ploszukiwacz.is-a.dev target="_blank">PlOszukiwacz</a></p>
<p><a href="https://git.hackclub.app/ploszukiwacz/StartPage" target="_blank">Git Repository</a></p>
<p>Licensed under <a href="https://www.gnu.org/licenses/agpl-3.0.html" target="_blank">GNU AGPL v3.0</a></p>
<p class="copyright-footer">© 2025 PlOszukiwacz. All rights reserved.</p>
</div>
</div>
</div>

View file

@ -10,6 +10,7 @@ export class SettingsManager {
init() {
this.attachEventListeners();
this.loadSavedSettings();
this.setupDataManagement();
}
attachEventListeners() {
@ -70,6 +71,78 @@ export class SettingsManager {
customStyle.textContent = customCSSEditor.value;
document.head.appendChild(customStyle);
}
setupDataManagement() {
document.getElementById('exportData').addEventListener('click', () => this.exportAllData());
document.getElementById('importData').addEventListener('click', () => {
document.getElementById('importDataFile').click();
});
document.getElementById('importDataFile').addEventListener('change', (e) => {
if (e.target.files[0]) this.importAllData(e.target.files[0]);
});
}
async exportAllData() {
const data = {
version: '1.0.0',
exportDate: new Date().toISOString(),
settings: {
theme: localStorage.getItem('theme'),
layout: localStorage.getItem('layout'),
font: localStorage.getItem('font'),
linkSize: localStorage.getItem('linkSize'),
username: localStorage.getItem('username'),
background: localStorage.getItem('background'),
customCSS: localStorage.getItem('customCSS')
},
links: JSON.parse(localStorage.getItem('customLinks') || '{}'),
shortcuts: JSON.parse(localStorage.getItem('shortcuts') || '{}'),
searchEngines: JSON.parse(localStorage.getItem('searchEngines') || '[]'),
customIcons: JSON.parse(localStorage.getItem('customIcons') || '{}')
};
const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `startpage-backup-${new Date().toISOString().split('T')[0]}.json`;
a.click();
URL.revokeObjectURL(url);
}
async importAllData(file) {
try {
const text = await file.text();
const data = JSON.parse(text);
if (!data.version) {
throw new Error('Invalid backup file format');
}
// Confirm import
if (!confirm('This will override all your current settings. Continue?')) {
return;
}
// Import settings
Object.entries(data.settings).forEach(([key, value]) => {
if (value !== null) localStorage.setItem(key, value);
});
// Import data
localStorage.setItem('customLinks', JSON.stringify(data.links));
localStorage.setItem('shortcuts', JSON.stringify(data.shortcuts));
localStorage.setItem('searchEngines', JSON.stringify(data.searchEngines));
localStorage.setItem('customIcons', JSON.stringify(data.customIcons));
// Reload page to apply changes
alert('Settings imported successfully. The page will now reload.');
window.location.reload();
} catch (error) {
console.error('Failed to import data:', error);
alert('Failed to import settings. Make sure the file is a valid backup.');
}
}
}
class ThemeManager {

View file

@ -129,9 +129,26 @@ body {
}
.category a {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--text);
text-decoration: none;
transition: color 0.2s;
transition: all 0.2s;
font-size: calc(var(--link-size, 16px) * 0.9);
line-height: 1.5;
padding: 0.25rem 0;
}
.category a i,
.category a img.custom-link-icon {
width: var(--link-size, 16px);
height: var(--link-size, 16px);
min-width: var(--link-size, 16px);
display: flex;
align-items: center;
justify-content: center;
font-size: calc(var(--link-size, 16px) * 0.8);
}
.category a:hover {
@ -833,3 +850,47 @@ body {
transform: translateY(-2px);
background: var(--surface0);
}
.copyright-section {
margin-top: 2rem;
padding-top: 1rem;
border-top: 1px solid var(--surface0);
text-align: center;
font-size: 0.95rem;
opacity: 1;
color: var(--text);
}
.copyright-section p {
margin: 0.5rem 0;
line-height: 1.6;
}
copyright-section a {
color: var(--blue);
text-decoration: none;
transition: all 0.2s;
font-weight: 500;
padding: 0.1rem 0.3rem;
border-radius: 4px;
}
copyright-section a:hover {
color: var(--pink);
background: var(--surface0);
}
copyright-footer {
margin-top: 1rem;
font-size: 0.85rem;
opacity: 0.7;
color: var(--text);
}
.settings-note {
margin-top: 1rem;
font-size: 0.9rem;
opacity: 0.8;
color: var(--text);
text-align: center;
}