From 08203f135bd07dac9dde158b0f37694f30daff1c Mon Sep 17 00:00:00 2001 From: Zan <62830223+Zan1456@users.noreply.github.com> Date: Mon, 1 Dec 2025 20:34:56 +0100 Subject: [PATCH] Remove custom themes --- i18n/en.json | 27 --- i18n/hu.json | 27 --- settings/index.css | 359 ------------------------------------ settings/index.html | 122 ------------- settings/index.js | 432 -------------------------------------------- 5 files changed, 967 deletions(-) diff --git a/i18n/en.json b/i18n/en.json index 10a6915..b30b9aa 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -32,33 +32,6 @@ "title": "Support", "description": "If you like our work and would like to support the development, you can do so in the following way:", "kofi": "Ko-Fi" - }, - "custom_theme": { - "title": "Custom Theme", - "create": "Create New Theme", - "import": "Import Theme", - "editor_title": "Theme Editor", - "import_title": "Import Theme", - "name": "Theme name", - "background": "Background", - "text": "Text", - "accent": "Accent colors", - "main_background": "Main background", - "card_background": "Card background", - "primary_text": "Primary text", - "secondary_text": "Secondary text", - "primary_accent": "Primary accent", - "secondary_accent": "Secondary accent", - "preview": "Preview", - "save": "Save", - "cancel": "Cancel", - "import_string": "Theme ID", - "apply": "Apply", - "edit": "Edit", - "export": "Export", - "delete": "Delete", - "no_themes": "No custom themes yet", - "delete_confirm": "Are you sure you want to delete the \"{name}\" theme?" } }, "navigation": { diff --git a/i18n/hu.json b/i18n/hu.json index 1f73c72..52436cb 100644 --- a/i18n/hu.json +++ b/i18n/hu.json @@ -34,33 +34,6 @@ "title": "Támogatás", "description": "Ha tetszik a munkánk és szeretnéd támogatni a fejlesztést, az alábbi módon teheted meg:", "kofi": "Ko-Fi" - }, - "custom_theme": { - "title": "Egyéni Téma", - "create": "Új Téma Létrehozása", - "import": "Téma Importálása", - "editor_title": "Téma Szerkesztő", - "import_title": "Téma Importálása", - "name": "Téma neve", - "background": "Háttér", - "text": "Szöveg", - "accent": "Kiemelő színek", - "main_background": "Fő háttér", - "card_background": "Kártya háttér", - "primary_text": "Elsődleges szöveg", - "secondary_text": "Másodlagos szöveg", - "primary_accent": "Elsődleges kiemelő", - "secondary_accent": "Másodlagos kiemelő", - "preview": "Előnézet", - "save": "Mentés", - "cancel": "Mégse", - "import_string": "Téma azonosító", - "apply": "Alkalmaz", - "edit": "Szerkeszt", - "export": "Export", - "delete": "Töröl", - "no_themes": "Még nincsenek egyéni témák", - "delete_confirm": "Biztosan törölni szeretnéd a \"{name}\" témát?" } }, "navigation": { diff --git a/settings/index.css b/settings/index.css index 12e21eb..79945db 100644 --- a/settings/index.css +++ b/settings/index.css @@ -72,16 +72,6 @@ h2 { font-size:16px; color:var(--text-primary); } - -.custom-theme-editor .setting-header { - justify-content:space-between; -} - -.setting-header > div:first-child { - display:flex; - align-items:center; - gap:8px; -} .theme-grid,.language-grid { display:grid; grid-template-columns:repeat(2,1fr); @@ -251,355 +241,6 @@ h2 { text-align:center; } -.theme-editor-controls { - display: flex; - gap: 8px; -} - -.icon-btn { - background: var(--button-secondaryFill); - border: none !important; - border-radius: 8px; - width: 36px; - height: 36px; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - transition: all 0.2s ease; - color: var(--text-primary); -} - -.icon-btn:hover { - background: var(--accent-accent); - color: white; - transform: translateY(-1px); -} - -.icon-btn .material-icons-round { - font-size: 18px; -} - -.btn-primary, .btn-secondary { - padding: 8px 16px; - border-radius: 8px; - border: none; - font-family: inherit; - font-size: 14px; - font-weight: 500; - cursor: pointer; - transition: all 0.2s ease; -} - -.btn-primary { - background: var(--accent-accent); - color: white; -} - -.btn-primary:hover { - background: var(--accent-secondary); -} - -.btn-secondary { - background: var(--button-secondaryFill); - color: var(--text-primary); - border: 1px solid var(--accent-15); -} - -.btn-secondary:hover { - background: var(--accent-15); -} - -.custom-themes-list { - display: flex; - flex-direction: column; - gap: 8px; -} - -.custom-theme-item { - display: flex; - align-items: center; - justify-content: space-between; - padding: 12px; - background: var(--button-secondaryFill); - border-radius: 8px; - border: 1px solid var(--accent-15); -} - -.custom-theme-info { - display: flex; - align-items: center; - gap: 12px; -} - -.custom-theme-preview-mini { - width: 40px; - height: 24px; - border-radius: 4px; - display: flex; - overflow: hidden; -} - -.custom-theme-preview-mini .color-strip { - flex: 1; - height: 100%; -} - -.custom-theme-name { - font-weight: 500; - color: var(--text-primary); -} - -.custom-theme-actions { - display: flex; - gap: 4px; -} - -.action-btn { - padding: 6px; - border: none; - border-radius: 4px; - background: var(--accent-15); - color: var(--text-primary); - cursor: pointer; - font-size: 16px; - transition: background 0.2s ease; - display: flex; - align-items: center; - justify-content: center; - width: 32px; - height: 32px; -} - -.action-btn .material-icons-round { - font-size: 16px; -} - -.action-btn:hover { - background: var(--accent-accent); - color: white; -} - -.action-btn.delete:hover { - background: var(--error-accent); -} - -.theme-editor-modal, .import-modal { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.5); - display: flex; - align-items: center; - justify-content: center; - z-index: 1000; -} - -.modal-content { - background: var(--card-card); - border-radius: 16px; - width: 90%; - max-width: 500px; - max-height: 90vh; - overflow-y: auto; - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); -} - -.modal-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 16px; - border-bottom: 1px solid var(--accent-15); -} - -.modal-header h3 { - margin: 0; - color: var(--text-primary); - font-size: 18px; -} - -.close-modal { - background: none; - border: none; - color: var(--text-secondary); - cursor: pointer; - padding: 4px; - border-radius: 4px; - transition: background 0.2s ease; -} - -.close-modal:hover { - background: var(--accent-15); -} - -.modal-body { - padding: 16px; -} - -.modal-footer { - display: flex; - gap: 8px; - justify-content: flex-end; - padding: 16px; - border-top: 1px solid var(--accent-15); -} - -.theme-name-input { - margin-bottom: 20px; -} - -.theme-name-input label { - display: block; - margin-bottom: 4px; - color: var(--text-primary); - font-weight: 500; -} - -.theme-name-input input { - width: 100%; - padding: 8px 12px; - border: 1px solid var(--accent-15); - border-radius: 8px; - background: var(--button-secondaryFill); - color: var(--text-primary); - font-family: inherit; -} - -.color-groups { - display: flex; - flex-direction: column; - gap: 20px; - margin-bottom: 20px; -} - -.color-group h4 { - margin: 0 0 12px 0; - color: var(--text-primary); - font-size: 16px; -} - -.color-inputs { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 12px; -} - -.color-input-group { - display: flex; - flex-direction: column; - gap: 4px; -} - -.color-input-group label { - color: var(--text-secondary); - font-size: 12px; - font-weight: 500; -} - -.color-input-group input[type="color"] { - width: 100%; - height: 40px; - border: 1px solid var(--accent-15); - border-radius: 8px; - background: var(--card-card); - cursor: pointer; - padding: 4px; -} - -.color-input-group input[type="color"]::-webkit-color-swatch-wrapper { - padding: 0; - border-radius: 6px; - overflow: hidden; -} - -.color-input-group input[type="color"]::-webkit-color-swatch { - border: none; - border-radius: 6px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); -} - -.theme-preview-container h4 { - margin: 0 0 12px 0; - color: var(--text-primary); - font-size: 16px; -} - -.custom-theme-preview { - border: 1px solid var(--accent-15); - border-radius: 8px; - overflow: hidden; - height: 120px; - position: relative; -} - -.custom-theme-preview .preview-header { - height: 30px; - background: var(--preview-background, var(--background)); - border-bottom: 1px solid var(--accent-15); -} - -.custom-theme-preview .preview-content { - padding: 12px; - background: var(--preview-background, var(--background)); -} - -.custom-theme-preview .preview-card { - background: var(--preview-card, var(--card-card)); - border-radius: 8px; - padding: 12px; - height: 100%; - display: flex; - flex-direction: column; - gap: 8px; -} - -.preview-text-primary { - color: var(--preview-text-primary, var(--text-primary)); - font-weight: 600; - font-size: 14px; -} - -.preview-text-secondary { - color: var(--preview-text-secondary, var(--text-secondary)); - font-size: 12px; -} - -.preview-accent { - background: var(--preview-accent, var(--accent-accent)); - color: white; - padding: 6px 12px; - border-radius: 6px; - font-size: 12px; - font-weight: 500; - display: inline-block; - margin-top: 4px; -} - -.import-input { - display: flex; - flex-direction: column; - gap: 8px; -} - -.import-input label { - color: var(--text-primary); - font-weight: 500; -} - -.import-input textarea { - width: 100%; - padding: 12px; - border: 1px solid var(--accent-15); - border-radius: 8px; - background: var(--button-secondaryFill); - color: var(--text-primary); - font-family: inherit; - resize: vertical; - min-height: 80px; -} .material-icons-round { font-size:18px; vertical-align:middle; diff --git a/settings/index.html b/settings/index.html index 26b6376..ea222df 100644 --- a/settings/index.html +++ b/settings/index.html @@ -52,128 +52,6 @@ -
language diff --git a/settings/index.js b/settings/index.js index f6a99a4..e32aee4 100644 --- a/settings/index.js +++ b/settings/index.js @@ -135,436 +135,4 @@ document.addEventListener("DOMContentLoaded", async () => { window.addEventListener("languageChanged", (event) => { updateLanguageButtons(event.detail.language); }); - - class CustomThemeManager { - constructor() { - this.customThemes = this.loadCustomThemes(); - this.currentEditingTheme = null; - this.initializeEventListeners(); - this.renderCustomThemes(); - } - - loadCustomThemes() { - const stored = localStorage.getItem('customThemes'); - return stored ? JSON.parse(stored) : []; - } - - saveCustomThemes() { - localStorage.setItem('customThemes', JSON.stringify(this.customThemes)); - } - - generateThemeId() { - const existingIds = this.customThemes.map(theme => theme.id); - let counter = 1; - let id; - - do { - id = 'custom-' + counter; - counter++; - } while (existingIds.includes(id)); - - return id; - } - - createTheme(name, colors) { - const theme = { - id: this.generateThemeId(), - name: name, - colors: colors, - created: new Date().toISOString() - }; - this.customThemes.push(theme); - this.saveCustomThemes(); - return theme; - } - - updateTheme(id, name, colors) { - const index = this.customThemes.findIndex(t => t.id === id); - if (index !== -1) { - this.customThemes[index] = { - ...this.customThemes[index], - name: name, - colors: colors, - updated: new Date().toISOString() - }; - this.saveCustomThemes(); - return this.customThemes[index]; - } - return null; - } - - deleteTheme(id) { - this.customThemes = this.customThemes.filter(t => t.id !== id); - this.saveCustomThemes(); - - const currentTheme = getCurrentTheme(); - if (currentTheme === id) { - this.applyTheme('light-green'); - } - } - - applyTheme(themeId) { - if (themeId.startsWith('custom-')) { - const theme = this.customThemes.find(t => t.id === themeId); - if (theme) { - this.applyCustomThemeColors(theme.colors); - localStorage.setItem("themePreference", themeId); - } - } else { - document.documentElement.setAttribute('data-theme', themeId); - localStorage.setItem("themePreference", themeId); - } - updateThemeButtons(themeId); - } - - applyCustomThemeColors(colors) { - const root = document.documentElement; - root.removeAttribute('data-theme'); - Object.entries(colors).forEach(([key, value]) => { - const cssVar = this.convertToCSSVariable(key); - root.style.setProperty(cssVar, value); - }); - } - - convertToCSSVariable(key) { - return '--' + key.replace(/([A-Z])/g, '-$1').toLowerCase(); - } - - exportTheme(themeId) { - const theme = this.customThemes.find(t => t.id === themeId); - if (!theme) return null; - - const colors = theme.colors; - const colorString = [ - colors.background.substring(1), - colors.cardCard.substring(1), - colors.textPrimary.substring(1), - colors.textSecondary.substring(1), - colors.accentAccent.substring(1), - colors.accentSecondary.substring(1) - ].join(''); - - return theme.name + '|' + colorString; - } - - importTheme(themeString) { - try { - const parts = themeString.split('|'); - if (parts.length !== 2) { - throw new Error('Invalid theme format - expected name|colors'); - } - - const [themeName, colorString] = parts; - if (colorString.length !== 36) { - throw new Error('Invalid theme format - expected 36 hex characters'); - } - - const hexPattern = /^[0-9A-Fa-f]{36}$/; - if (!hexPattern.test(colorString)) { - throw new Error('Invalid hex color format'); - } - - const colors = []; - for (let i = 0; i < 36; i += 6) { - colors.push(colorString.substring(i, i + 6)); - } - - const themeColors = { - background: '#' + colors[0], - cardCard: '#' + colors[1], - textPrimary: '#' + colors[2], - textSecondary: '#' + colors[3], - accentAccent: '#' + colors[4], - accentSecondary: '#' + colors[5] - }; - - const importedTheme = this.createTheme( - themeName + ' (Importált)', - themeColors - ); - - this.renderCustomThemes(); - return importedTheme; - } catch (error) { - console.error('Theme import failed:', error); - return null; - } - } - - renderCustomThemes() { - /*const container = document.getElementById('customThemesList'); - container.innerHTML = ''; - - if (this.customThemes.length === 0) { - const emptyMessage = window.translations?.settings?.custom_theme?.no_themes || 'Még nincsenek egyéni témák'; - container.innerHTML = `

${emptyMessage}

`; - return; - } - - this.customThemes.forEach(theme => { - const themeElement = this.createThemeElement(theme); - container.appendChild(themeElement); - });*/ - } - - createThemeElement(theme) { - const element = document.createElement('div'); - element.className = 'custom-theme-item'; - - const colors = theme.colors; - const previewColors = [ - colors.background || '#DAE4F7', - colors.cardCard || '#EDF3FF', - colors.accentAccent || '#3673EE', - colors.textPrimary || '#050B15' - ]; - - const translations = window.translations?.settings?.custom_theme || {}; - - element.innerHTML = ` -
-
- ${previewColors.map(color => `
`).join('')} -
- ${theme.name} -
-
- - - - -
- `; - - element.querySelector('.apply').addEventListener('click', () => { - this.applyTheme(theme.id); - }); - - element.querySelector('.edit').addEventListener('click', () => { - this.editTheme(theme.id); - }); - - element.querySelector('.export').addEventListener('click', () => { - this.showExportModal(theme.id); - }); - - element.querySelector('.delete').addEventListener('click', () => { - const confirmMessage = window.translations?.settings?.custom_theme?.delete_confirm || `Biztosan törölni szeretnéd a "${theme.name}" témát?`; - if (confirm(confirmMessage.replace('{name}', theme.name))) { - this.deleteTheme(theme.id); - this.renderCustomThemes(); - } - }); - - return element; - } - - editTheme(themeId) { - const theme = this.customThemes.find(t => t.id === themeId); - if (!theme) return; - - this.currentEditingTheme = theme; - this.openThemeEditor(theme); - } - - openThemeEditor(theme = null) { - const modal = document.getElementById('themeEditorModal'); - const nameInput = document.getElementById('themeName'); - - if (theme) { - nameInput.value = theme.name; - this.loadThemeColorsToEditor(theme.colors); - } else { - nameInput.value = ''; - this.loadDefaultColorsToEditor(); - } - - this.updatePreview(); - modal.style.display = 'flex'; - } - - loadThemeColorsToEditor(colors) { - Object.entries(colors).forEach(([key, value]) => { - const input = document.getElementById(key); - if (input) { - input.value = value; - } - }); - } - - loadDefaultColorsToEditor() { - const defaults = { - background: '#DAE4F7', - cardCard: '#EDF3FF', - textPrimary: '#050B15', - textSecondary: '#050B15', - accentAccent: '#3673EE', - accentSecondary: '#1C469A' - }; - this.loadThemeColorsToEditor(defaults); - } - - updatePreview() { - const preview = document.getElementById('customThemePreview'); - const colors = this.getColorsFromEditor(); - - preview.style.setProperty('--preview-background', colors.background); - preview.style.setProperty('--preview-card', colors.cardCard); - preview.style.setProperty('--preview-text-primary', colors.textPrimary); - preview.style.setProperty('--preview-text-secondary', colors.textSecondary); - preview.style.setProperty('--preview-accent', colors.accentAccent); - } - - getColorsFromEditor() { - return { - background: document.getElementById('background').value, - cardCard: document.getElementById('cardCard').value, - textPrimary: document.getElementById('textPrimary').value, - textSecondary: document.getElementById('textSecondary').value, - accentAccent: document.getElementById('accentAccent').value, - accentSecondary: document.getElementById('accentSecondary').value - }; - } - - saveThemeFromEditor() { - const name = document.getElementById('themeName').value.trim(); - if (!name) { - alert('Add meg a téma nevét!'); - return; - } - - const colors = this.getColorsFromEditor(); - - if (this.currentEditingTheme) { - this.updateTheme(this.currentEditingTheme.id, name, colors); - } else { - this.createTheme(name, colors); - } - - this.closeThemeEditor(); - this.renderCustomThemes(); - } - - closeThemeEditor() { - document.getElementById('themeEditorModal').style.display = 'none'; - this.currentEditingTheme = null; - } - - showExportModal(themeId) { - const exportString = this.exportTheme(themeId); - if (exportString) { - const theme = this.customThemes.find(t => t.id === themeId); - prompt(`${theme.name} téma export azonosítója (másold ki):`, exportString); - } - } - - showImportModal() { - document.getElementById('importModal').style.display = 'flex'; - } - - closeImportModal() { - document.getElementById('importModal').style.display = 'none'; - document.getElementById('themeImportString').value = ''; - } - - importThemeFromModal() { - const importString = document.getElementById('themeImportString').value.trim(); - if (!importString) { - alert('Add meg az azonosítót!'); - return; - } - - const importedTheme = this.importTheme(importString); - if (importedTheme) { - alert(`"${importedTheme.name}" téma sikeresen importálva!`); - this.closeImportModal(); - } else { - alert('Hiba történt az importálás során. Ellenőrizd az azonosítót!'); - } - } - - initializeEventListeners() { - /*document.getElementById('createCustomTheme').addEventListener('click', () => { - this.openThemeEditor(); - }); - - document.getElementById('importTheme').addEventListener('click', () => { - this.showImportModal(); - }); - - document.getElementById('closeThemeEditor').addEventListener('click', () => { - this.closeThemeEditor(); - }); - - document.getElementById('cancelThemeEdit').addEventListener('click', () => { - this.closeThemeEditor(); - }); - - document.getElementById('saveTheme').addEventListener('click', () => { - this.saveThemeFromEditor(); - }); - - document.getElementById('closeImportModal').addEventListener('click', () => { - this.closeImportModal(); - }); - - document.getElementById('cancelImport').addEventListener('click', () => { - this.closeImportModal(); - }); - - document.getElementById('confirmImport').addEventListener('click', () => { - this.importThemeFromModal(); - }); - - const colorInputs = ['background', 'cardCard', 'textPrimary', 'textSecondary', 'accentAccent', 'accentSecondary']; - colorInputs.forEach(inputId => { - document.getElementById(inputId).addEventListener('input', () => { - this.updatePreview(); - }); - }); - - document.getElementById('themeEditorModal').addEventListener('click', (e) => { - if (e.target.id === 'themeEditorModal') { - this.closeThemeEditor(); - } - }); - - document.getElementById('importModal').addEventListener('click', (e) => { - if (e.target.id === 'importModal') { - this.closeImportModal(); - } - });*/ - } - } - - const customThemeManager = new CustomThemeManager(); - const originalGetCurrentTheme = getCurrentTheme; - getCurrentTheme = function() { - const theme = originalGetCurrentTheme(); - if (theme && theme.startsWith('custom-')) { - return theme; - } - return theme; - }; - const originalUpdateThemeButtons = updateThemeButtons; - updateThemeButtons = function(currentTheme) { - originalUpdateThemeButtons(currentTheme); - document.querySelectorAll('.custom-theme-item').forEach(item => { - const applyBtn = item.querySelector('.apply'); - const themeId = applyBtn.dataset.themeId; - item.classList.toggle('active', themeId === currentTheme); - }); - }; - const currentTheme = getCurrentTheme(); - if (currentTheme && currentTheme.startsWith('custom-')) { - customThemeManager.applyTheme(currentTheme); - } });