QOL :3
This commit is contained in:
parent
6796c5e10d
commit
fb3d89a0bf
4 changed files with 810 additions and 2 deletions
|
@ -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>
|
||||
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue