mirror of
https://github.com/QwIT-Development/firka-extension.git
synced 2026-06-12 03:41:39 +02:00
247 lines
10 KiB
HTML
247 lines
10 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="settings-card">
|
|
<h2 data-i18n="settings.title">Beállítások</h2>
|
|
<div class="settings-group">
|
|
<div class="setting-section">
|
|
<div class="setting-header">
|
|
<span class="material-icons-round">palette</span>
|
|
<span data-i18n="settings.theme">Téma</span>
|
|
</div>
|
|
<div class="theme-grid">
|
|
<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 class="custom-themes-section">
|
|
<div class="custom-themes-header">
|
|
<span data-i18n="settings.custom_themes.title">Egyéni témák</span>
|
|
<div class="custom-themes-buttons">
|
|
<button class="theme-btn" id="addCustomTheme" title="Új téma">
|
|
<span class="material-icons-round">add</span>
|
|
</button>
|
|
<button class="theme-btn" id="importCustomTheme" title="Téma importálása">
|
|
<span class="material-icons-round">download</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="theme-grid custom-themes-grid" id="customThemesGrid">
|
|
</div>
|
|
</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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<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>
|
|
|
|
<footer class="popup-footer">
|
|
<div class="version-info" id="version">v1.3.0</div>
|
|
</footer>
|
|
</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/storageManager.js"></script>
|
|
<script src="../global/language.js"></script>
|
|
<script src="index.js"></script>
|
|
</body>
|
|
</html> |