mirror of
https://github.com/QwIT-Development/firka-extension.git
synced 2026-06-12 03:41:39 +02:00
347 lines
16 KiB
HTML
347 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="hu">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Firxa - Beállítások</title>
|
|
<link rel="icon" type="image/png" href="../images/firka_logo_128.png">
|
|
<link rel="shortcut icon" type="image/png" href="../images/firka_logo_128.png">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
|
|
<link rel="stylesheet" href="index.css">
|
|
<link rel="stylesheet" href="../global/theme.css">
|
|
</head>
|
|
<body>
|
|
<div class="popup-container">
|
|
<header class="popup-header">
|
|
<p class="logo-text">
|
|
<img src="../images/firka_logo.png" alt="Firka" class="logo">
|
|
Firxa
|
|
</p>
|
|
</header>
|
|
|
|
<div class="tab-navigation">
|
|
<button class="tab-button active" data-tab="appearance">
|
|
<span class="material-icons-round">palette</span>
|
|
<span data-i18n="settings.tabs.appearance">Megjelenés</span>
|
|
</button>
|
|
<button class="tab-button" data-tab="settings">
|
|
<span class="material-icons-round">tune</span>
|
|
<span data-i18n="settings.tabs.settings">Beállítások</span>
|
|
</button>
|
|
<button class="tab-button" data-tab="about">
|
|
<span class="material-icons-round">info</span>
|
|
<span data-i18n="settings.tabs.about">Névjegy</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="tab-content active" id="tab-appearance">
|
|
<div class="settings-card">
|
|
<div class="settings-group">
|
|
<div class="setting-section">
|
|
<div class="setting-header theme-header">
|
|
<div class="setting-header-left">
|
|
<span class="material-icons-round">palette</span>
|
|
<span data-i18n="settings.theme">Téma</span>
|
|
</div>
|
|
<div class="theme-manage-dropdown">
|
|
<button class="theme-manage-btn" id="themeManageBtn">
|
|
<span class="material-icons-round">settings</span>
|
|
</button>
|
|
<div class="theme-manage-menu" id="themeManageMenu">
|
|
<button class="theme-manage-item" id="addCustomTheme">
|
|
<span class="material-icons-round">add</span>
|
|
<span data-i18n="settings.custom_themes.create">Új téma létrehozása</span>
|
|
</button>
|
|
<button class="theme-manage-item" id="importCustomTheme">
|
|
<span class="material-icons-round">download</span>
|
|
<span data-i18n="settings.custom_themes.import">Importálás</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="theme-grid" id="allThemesGrid">
|
|
<button class="theme-option" data-theme="light-green">
|
|
<div class="theme-preview light-green">
|
|
<div class="preview-header"></div>
|
|
<div class="preview-content">
|
|
<div class="preview-card"></div>
|
|
</div>
|
|
</div>
|
|
<span class="theme-name" data-i18n="settings.themes.light_green">Világos Zöld</span>
|
|
</button>
|
|
|
|
<button class="theme-option" data-theme="dark-green">
|
|
<div class="theme-preview dark-green">
|
|
<div class="preview-header"></div>
|
|
<div class="preview-content">
|
|
<div class="preview-card"></div>
|
|
</div>
|
|
</div>
|
|
<span class="theme-name" data-i18n="settings.themes.dark_green">Sötét Zöld</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="setting-section">
|
|
<div class="setting-header">
|
|
<span class="material-icons-round">language</span>
|
|
<span data-i18n="settings.language">Nyelv</span>
|
|
</div>
|
|
<div class="language-grid">
|
|
<button class="language-option" data-language="hu">
|
|
<span class="language-name" data-i18n="settings.languages.hu">Magyar</span>
|
|
</button>
|
|
<button class="language-option" data-language="en">
|
|
<span class="language-name" data-i18n="settings.languages.en">English</span>
|
|
</button>
|
|
<button class="language-option" data-language="de">
|
|
<span class="language-name" data-i18n="settings.languages.de">Deutsch</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-content" id="tab-settings">
|
|
<div class="settings-card">
|
|
<h2 data-i18n="settings.page_settings.title">Oldal beállítások</h2>
|
|
<div class="page-settings-info">
|
|
<div class="current-page-indicator">
|
|
<span class="material-icons-round">web</span>
|
|
<span id="currentPageName" data-i18n="settings.page_settings.current_page">Aktuális oldal</span>
|
|
<span id="currentPageValue" class="page-badge">-</span>
|
|
</div>
|
|
</div>
|
|
<div id="pageSpecificSettings" class="page-specific-settings">
|
|
<div class="no-settings-placeholder">
|
|
<span class="material-icons-round">settings_suggest</span>
|
|
<p data-i18n="settings.page_settings.no_settings">Ehhez az oldalhoz nincsenek egyéni beállítások.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="error-reporting-card">
|
|
<h2 data-i18n="settings.error_reporting.title">Hibajelentés</h2>
|
|
<div class="error-reporting-content">
|
|
<div class="setting-item">
|
|
<div class="setting-item-info">
|
|
<div class="setting-item-label" data-i18n="settings.error_reporting.enable">Hibajelentés engedélyezése</div>
|
|
<div class="setting-item-description" data-i18n="settings.error_reporting.enable_desc">Automatikus hibajelentés küldése a fejlesztőknek a bővítmény javításához</div>
|
|
</div>
|
|
<label class="toggle-switch">
|
|
<input type="checkbox" id="errorReportingToggle" checked>
|
|
<span class="toggle-slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="report-issue-button-wrapper">
|
|
<a href="https://github.com/QwIT-Development/firka-extension/issues/new" target="_blank" class="report-issue-button">
|
|
<span class="material-icons-round">bug_report</span>
|
|
<div class="report-issue-text">
|
|
<span class="report-issue-title" data-i18n="settings.error_reporting.report_issue">Hiba vagy ötlet jelentése</span>
|
|
<span class="report-issue-desc" data-i18n="settings.error_reporting.report_issue_desc">Nyiss egy GitHub issue-t</span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-content" id="tab-about">
|
|
<div class="about-card">
|
|
<h2 data-i18n="settings.about.title">Névjegy</h2>
|
|
<div class="about-content">
|
|
<p data-i18n="settings.about.description">A Firka egy nyílt forráskódú projekt, amely a KRÉTA rendszerhez készít saját felhasználói felületet.</p>
|
|
<div class="about-links">
|
|
<a href="https://firka.app" target="_blank" class="about-link">
|
|
<span class="material-icons-round">language</span>
|
|
<span>Weboldal</span>
|
|
</a>
|
|
<a href="https://github.com/QwIT-Development/" target="_blank" class="about-link">
|
|
<span class="material-icons-round">code</span>
|
|
<span data-i18n="settings.about.github">GitHub</span>
|
|
</a>
|
|
<a href="https://discord.gg/firka-1111649116020285532" target="_blank" class="about-link">
|
|
<span class="material-icons-round">forum</span>
|
|
<span>Discord</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="support-card">
|
|
<h2 data-i18n="settings.support.title">Támogatás</h2>
|
|
<div class="support-content">
|
|
<p data-i18n="settings.support.description">Ha tetszik a munkánk és szeretnéd támogatni a fejlesztést, az alábbi módon teheted meg:</p>
|
|
<div class="support-buttons">
|
|
<a href="https://ko-fi.com/zan1456" target="_blank" class="support-button">
|
|
<span class="material-icons-round">coffee</span>
|
|
<span data-i18n="settings.support.kofi">Ko-Fi</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="version-info" id="version">v1.4.0</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="modal-overlay" id="updateModal">
|
|
<div class="modal-content update-modal">
|
|
<div class="modal-header">
|
|
<h3 data-i18n="settings.update.title">Új verzió érhető el!</h3>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="update-version-info">
|
|
<div class="version-badge current">
|
|
<span class="version-label" data-i18n="settings.update.current_version">Jelenlegi verzió:</span>
|
|
<span class="version-number" id="currentVersion">-</span>
|
|
</div>
|
|
<span class="material-icons-round version-arrow">arrow_forward</span>
|
|
<div class="version-badge latest">
|
|
<span class="version-label" data-i18n="settings.update.latest_version">Legújabb verzió:</span>
|
|
<span class="version-number" id="latestVersion">-</span>
|
|
</div>
|
|
</div>
|
|
<div class="update-changelog-section">
|
|
<h4 data-i18n="settings.update.whats_new">Újdonságok:</h4>
|
|
<div class="update-changelog" id="updateChangelog">
|
|
<p data-i18n="settings.update.loading">Betöltés...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn-secondary" id="dismissUpdate" data-i18n="settings.update.dismiss">Bezárás</button>
|
|
<a class="btn-primary update-button" id="updateButton" href="#" target="_blank">
|
|
<span data-i18n="settings.update.download">Letöltés</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-overlay" id="themeEditorModal">
|
|
<div class="modal-content theme-editor-modal">
|
|
<div class="modal-header">
|
|
<h3 id="themeEditorTitle" data-i18n="settings.custom_themes.create">Új téma létrehozása</h3>
|
|
<button class="modal-close" id="closeThemeEditor">
|
|
<span class="material-icons-round">close</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="theme-form">
|
|
<div class="form-group">
|
|
<label for="themeName" data-i18n="settings.custom_themes.name">Téma neve</label>
|
|
<input type="text" id="themeName" placeholder="Pl. Kék éjszaka">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label data-i18n="settings.custom_themes.mode">Mód</label>
|
|
<div class="mode-selector">
|
|
<button class="mode-option active" data-mode="dark">
|
|
<span class="material-icons-round">dark_mode</span>
|
|
<span data-i18n="settings.custom_themes.dark_mode">Sötét</span>
|
|
</button>
|
|
<button class="mode-option" data-mode="light">
|
|
<span class="material-icons-round">light_mode</span>
|
|
<span data-i18n="settings.custom_themes.light_mode">Világos</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="color-section">
|
|
<h4 data-i18n="settings.custom_themes.colors">Színek</h4>
|
|
|
|
<div class="color-group">
|
|
<label data-i18n="settings.custom_themes.accent_color">Kiemelő szín</label>
|
|
<div class="color-input-wrapper">
|
|
<input type="color" id="accentColor" value="#A7DC22">
|
|
<input type="text" class="color-hex" id="accentColorHex" value="#A7DC22">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="color-group">
|
|
<label data-i18n="settings.custom_themes.background_color">Háttér szín</label>
|
|
<div class="color-input-wrapper">
|
|
<input type="color" id="backgroundColor" value="#0D1202">
|
|
<input type="text" class="color-hex" id="backgroundColorHex" value="#0D1202">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="color-group">
|
|
<label data-i18n="settings.custom_themes.card_color">Kártya szín</label>
|
|
<div class="color-input-wrapper">
|
|
<input type="color" id="cardColor" value="#141905">
|
|
<input type="text" class="color-hex" id="cardColorHex" value="#141905">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="color-group">
|
|
<label data-i18n="settings.custom_themes.text_color">Szöveg szín</label>
|
|
<div class="color-input-wrapper">
|
|
<input type="color" id="textColor" value="#EAF7CC">
|
|
<input type="text" class="color-hex" id="textColorHex" value="#EAF7CC">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn-secondary" id="cancelThemeEditor" data-i18n="common.cancel">Mégse</button>
|
|
<button class="btn-primary" id="saveTheme" data-i18n="common.save">Mentés</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-overlay" id="shareThemeModal">
|
|
<div class="modal-content share-modal">
|
|
<div class="modal-header">
|
|
<h3 data-i18n="settings.custom_themes.share">Téma megosztása</h3>
|
|
<button class="modal-close" id="closeShareModal">
|
|
<span class="material-icons-round">close</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p data-i18n="settings.custom_themes.share_description">Másold ki a kódot és oszd meg másokkal:</p>
|
|
<div class="share-code-wrapper">
|
|
<textarea id="shareCode" readonly></textarea>
|
|
<button class="copy-btn" id="copyShareCode">
|
|
<span class="material-icons-round">content_copy</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn-primary" id="closeShareModalBtn" data-i18n="common.close">Bezárás</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-overlay" id="importThemeModal">
|
|
<div class="modal-content import-modal">
|
|
<div class="modal-header">
|
|
<h3 data-i18n="settings.custom_themes.import">Téma importálása</h3>
|
|
<button class="modal-close" id="closeImportModal">
|
|
<span class="material-icons-round">close</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p data-i18n="settings.custom_themes.import_description">Illeszd be a téma kódot:</p>
|
|
<textarea id="importCode" placeholder="Illeszd be a téma kódját ide..."></textarea>
|
|
<p class="error-message" id="importError"></p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn-secondary" id="cancelImport" data-i18n="common.cancel">Mégse</button>
|
|
<button class="btn-primary" id="confirmImport" data-i18n="settings.custom_themes.import">Importálás</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="../tools/sentry-browser.min.js"></script>
|
|
<script src="../tools/sentry.js"></script>
|
|
<script src="../tools/helper.js"></script>
|
|
<script src="../tools/storageManager.js"></script>
|
|
<script src="../global/language.js"></script>
|
|
<script src="index.js"></script>
|
|
</body>
|
|
</html> |