diff --git a/i18n/en.json b/i18n/en.json index da354bd..dfce616 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -309,6 +309,35 @@ "success": "Successfully logged out!", "continue": "Continue" }, + "setup": { + "welcome": "Set up the extension in a few simple steps", + "steps": { + "theme": "Theme", + "language": "Language", + "finish": "Done" + }, + "theme": { + "title": "Choose a theme", + "description": "Select the appearance that suits you best" + }, + "language": { + "title": "Choose a language", + "description": "Select the language you want to use" + }, + "finish": { + "title": "All set!", + "description": "Settings saved successfully. Let's start learning!", + "about": "About", + "about_desc": "Learn more about the project", + "support": "Support", + "support_desc": "Support the development", + "github": "GitHub", + "github_desc": "View the source code", + "discord": "Discord", + "discord_desc": "Join the community", + "start": "Get Started" + } + }, "common": { "save": "Save", "cancel": "Cancel", diff --git a/i18n/hu.json b/i18n/hu.json index a55d766..586bdc5 100644 --- a/i18n/hu.json +++ b/i18n/hu.json @@ -311,6 +311,35 @@ "success": "Sikeres kijelentkezés!", "continue": "Tovább" }, + "setup": { + "welcome": "Állítsd be a bővítményt néhány egyszerű lépésben", + "steps": { + "theme": "Téma", + "language": "Nyelv", + "finish": "Kész" + }, + "theme": { + "title": "Válassz témát", + "description": "Válaszd ki a számodra legmegfelelőbb megjelenést" + }, + "language": { + "title": "Válassz nyelvet", + "description": "Válaszd ki a használni kívánt nyelvet" + }, + "finish": { + "title": "Minden kész!", + "description": "A beállítások sikeresen mentve. Indulhat a tanulás!", + "about": "Rólunk", + "about_desc": "Tudj meg többet a projektről", + "support": "Támogatás", + "support_desc": "Támogasd a fejlesztést", + "github": "GitHub", + "github_desc": "Nézd meg a forráskódot", + "discord": "Discord", + "discord_desc": "Csatlakozz a közösséghez", + "start": "Kezdés" + } + }, "common": { "save": "Mentés", "cancel": "Mégse", diff --git a/manifest.json b/manifest.json index 18cd926..1a580d1 100644 --- a/manifest.json +++ b/manifest.json @@ -31,6 +31,7 @@ { "resources": [ "settings/*", + "setup/*", "global/language.js", "images/*", "fonts/*.woff2", diff --git a/setup/setup.css b/setup/setup.css new file mode 100644 index 0000000..a3ac100 --- /dev/null +++ b/setup/setup.css @@ -0,0 +1,462 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Montserrat', sans-serif; + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + padding: 1rem; + background: var(--background); + color: var(--text-primary); +} + +.setup-container { + width: 100%; + max-width: 700px; + animation: fadeIn 0.5s ease; +} + +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.setup-card { + background: var(--card-card); + border-radius: 20px; + padding: 2rem; + box-shadow: 0 4px 20px var(--accent-shadow); +} + +.setup-header { + text-align: center; + margin-bottom: 2rem; +} + +.setup-logo { + width: 60px; + height: 60px; + margin-bottom: 1rem; +} + +.setup-title { + font-size: 2rem; + font-weight: 700; + color: var(--text-primary); + margin-bottom: 0.5rem; +} + +.setup-subtitle { + font-size: 1rem; + color: var(--text-secondary); +} + +.progress-bar { + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 2rem; + padding: 0 1rem; +} + +.progress-step { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.4rem; + position: relative; +} + +.progress-circle { + width: 40px; + height: 40px; + border-radius: 50%; + background: var(--button-secondaryFill); + border: 2px solid var(--text-teritary); + display: flex; + align-items: center; + justify-content: center; + font-weight: 600; + font-size: 1rem; + color: var(--text-teritary); + transition: all 0.3s ease; +} + +.progress-step.active .progress-circle { + background: var(--accent-accent); + border-color: var(--accent-accent); + color: white; + transform: scale(1.1); +} + +.progress-step.completed .progress-circle { + background: var(--accent-accent); + border-color: var(--accent-accent); + color: white; +} + +.progress-label { + font-size: 0.875rem; + color: var(--text-secondary); + font-weight: 500; +} + +.progress-step.active .progress-label { + color: var(--accent-accent); + font-weight: 600; +} + +.progress-line { + width: 80px; + height: 2px; + background: var(--text-teritary); + margin: 0 0.5rem; + margin-bottom: 1.5rem; +} + +.setup-content { + min-height: 320px; + position: relative; +} + +.setup-step { + display: none; + animation: slideIn 0.4s ease; +} + +.setup-step.active { + display: block; +} + +@keyframes slideIn { + from { + opacity: 0; + transform: translateX(20px); + } + to { + opacity: 1; + transform: translateX(0); + } +} + +.step-icon { + text-align: center; + margin-bottom: 1rem; +} + +.step-icon .material-icons-round { + font-size: 3rem; + color: var(--accent-accent); +} + +.step-icon.success .material-icons-round { + font-size: 3.5rem; + color: var(--success); +} + +.step-title { + text-align: center; + font-size: 1.5rem; + font-weight: 700; + color: var(--text-primary); + margin-bottom: 0.4rem; +} + +.step-description { + text-align: center; + font-size: 0.9rem; + color: var(--text-secondary); + margin-bottom: 1.5rem; +} + +.theme-options { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); + gap: 1rem; + margin-top: 1rem; +} + +.theme-card { + background: var(--button-secondaryFill); + border: 3px solid transparent; + border-radius: 12px; + padding: 1rem; + cursor: pointer; + transition: all 0.3s ease; + display: flex; + flex-direction: column; + align-items: center; + gap: 0.8rem; + position: relative; +} + +.theme-card:hover { + transform: translateY(-4px); + box-shadow: 0 8px 24px var(--accent-shadow); +} + +.theme-card.selected { + border-color: var(--accent-accent); + background: var(--accent-15); +} + +.theme-icon { + position: absolute; + top: 1rem; + right: 1rem; + color: var(--text-secondary); + font-size: 1.5rem; +} + +.theme-card.selected .theme-icon { + color: var(--accent-accent); +} + +.theme-preview { + width: 100%; + height: 100px; + border-radius: 10px; + overflow: hidden; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); +} + +.theme-preview.light-green { + background: #FAFFF0; +} + +.theme-preview.dark-green { + background: #0D1202; +} + +.preview-header { + height: 30%; + display: flex; + align-items: center; + padding: 0.5rem; +} + +.theme-preview.light-green .preview-header { + background: #F3FBDE; +} + +.theme-preview.dark-green .preview-header { + background: #141905; +} + +.preview-content { + height: 70%; + padding: 0.5rem; +} + +.preview-card { + width: 100%; + height: 100%; + border-radius: 6px; +} + +.theme-preview.light-green .preview-card { + background: white; +} + +.theme-preview.dark-green .preview-card { + background: #1a2207; +} + +.theme-name { + font-weight: 600; + color: var(--text-primary); + font-size: 1.1rem; +} + +.language-options { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); + gap: 1rem; + margin-top: 1rem; +} + +.language-card { + background: var(--button-secondaryFill); + border: 3px solid transparent; + border-radius: 12px; + padding: 1.5rem; + cursor: pointer; + transition: all 0.3s ease; + display: flex; + flex-direction: column; + align-items: center; + gap: 0.8rem; +} + +.language-card:hover { + transform: translateY(-4px); + box-shadow: 0 8px 24px var(--accent-shadow); +} + +.language-card.selected { + border-color: var(--accent-accent); + background: var(--accent-15); +} + +.language-flag { + font-size: 3rem; +} + +.language-name { + font-weight: 600; + color: var(--text-primary); + font-size: 1.1rem; +} + +.finish-links { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 0.8rem; + margin-top: 1rem; +} + +.finish-link { + background: var(--button-secondaryFill); + border: 2px solid transparent; + border-radius: 10px; + padding: 1rem; + display: flex; + align-items: center; + gap: 0.8rem; + text-decoration: none; + color: var(--text-primary); + transition: all 0.3s ease; +} + +.finish-link:hover { + border-color: var(--accent-accent); + background: var(--accent-15); + transform: translateY(-2px); +} + +.finish-link .material-icons-round { + font-size: 2rem; + color: var(--accent-accent); + flex-shrink: 0; +} + +.link-content { + display: flex; + flex-direction: column; + gap: 0.25rem; +} + +.link-title { + font-weight: 600; + font-size: 1rem; + color: var(--text-primary); +} + +.link-description { + font-size: 0.8rem; + color: var(--text-secondary); +} + +.setup-actions { + display: flex; + justify-content: space-between; + margin-top: 2rem; + gap: 1rem; +} + +.actions-spacer { + flex: 1; +} + +.btn-primary, +.btn-secondary { + padding: 1rem 2rem; + border-radius: 12px; + font-weight: 600; + font-size: 1rem; + cursor: pointer; + transition: all 0.3s ease; + border: none; + display: flex; + align-items: center; + gap: 0.5rem; + font-family: 'Montserrat', sans-serif; +} + +.btn-primary { + background: var(--accent-accent); + color: white; +} + +.btn-primary:hover { + background: var(--accent-secondary); + transform: translateY(-2px); + box-shadow: 0 4px 12px var(--accent-shadow); +} + +.btn-secondary { + background: var(--button-secondaryFill); + color: var(--text-primary); + border: 2px solid var(--text-teritary); +} + +.btn-secondary:hover { + border-color: var(--accent-accent); + transform: translateY(-2px); +} + +.btn-primary .material-icons-round, +.btn-secondary .material-icons-round { + font-size: 1.25rem; +} + +@media (max-width: 768px) { + body { + padding: 0.5rem; + } + + .setup-card { + padding: 1.5rem; + } + + .setup-title { + font-size: 1.75rem; + } + + .step-title { + font-size: 1.3rem; + } + + .progress-bar { + padding: 0; + } + + .progress-line { + width: 30px; + } + + .progress-circle { + width: 36px; + height: 36px; + } + + .theme-options, + .language-options { + grid-template-columns: 1fr; + } + + .finish-links { + grid-template-columns: 1fr; + } +} diff --git a/setup/setup.html b/setup/setup.html new file mode 100644 index 0000000..d262237 --- /dev/null +++ b/setup/setup.html @@ -0,0 +1,159 @@ + + + + + + Firxa - Kezdeti beállítások + + + + + + + + + +
+
+
+ +

Üdvözöl a Firxa!

+

Állítsd be a bővítményt néhány egyszerű lépésben

+
+ +
+
+
1
+ Téma +
+
+
+
2
+ Nyelv +
+
+
+
3
+ Kész +
+
+ +
+
+
+ palette +
+

Válassz témát

+

Válaszd ki a számodra legmegfelelőbb megjelenést

+ +
+ + + +
+
+ +
+
+ language +
+

Válassz nyelvet

+

Válaszd ki a használni kívánt nyelvet

+ +
+ + + +
+
+ +
+
+ check_circle +
+

Minden kész!

+

A beállítások sikeresen mentve. Indulhat a tanulás!

+ +
+ + info +
+ Weboldal + Tudj meg többet a projektről +
+ + + + favorite +
+ Támogatás + Támogasd a fejlesztést +
+ + + + code +
+ GitHub + Nézd meg a forráskódot +
+ + + + forum +
+ Discord + Csatlakozz a közösséghez +
+ +
+
+
+ +
+ +
+ + +
+
+
+ + + + + + diff --git a/setup/setup.js b/setup/setup.js new file mode 100644 index 0000000..754dacf --- /dev/null +++ b/setup/setup.js @@ -0,0 +1,146 @@ +let currentStep = 1; +const totalSteps = 3; +let selectedTheme = 'light-green'; +let selectedLanguage = 'hu'; + +document.addEventListener('DOMContentLoaded', async () => { + selectedTheme = await storageManager.get('themePreference', 'light-green'); + selectedLanguage = await storageManager.get('languagePreference', 'hu'); + + initializeThemeSelection(); + initializeLanguageSelection(); + + document.getElementById('nextBtn').addEventListener('click', nextStep); + document.getElementById('backBtn').addEventListener('click', previousStep); + document.getElementById('finishBtn').addEventListener('click', finishSetup); + + document.querySelectorAll('.theme-card').forEach(card => { + card.addEventListener('click', () => selectTheme(card.dataset.theme)); + }); + + document.querySelectorAll('.language-card').forEach(card => { + card.addEventListener('click', () => selectLanguage(card.dataset.language)); + }); + + applyTheme(selectedTheme); +}); + +function initializeThemeSelection() { + const themeCards = document.querySelectorAll('.theme-card'); + themeCards.forEach(card => { + if (card.dataset.theme === selectedTheme) { + card.classList.add('selected'); + } + }); +} + +function initializeLanguageSelection() { + const languageCards = document.querySelectorAll('.language-card'); + languageCards.forEach(card => { + if (card.dataset.language === selectedLanguage) { + card.classList.add('selected'); + } + }); +} + +function selectTheme(theme) { + selectedTheme = theme; + + document.querySelectorAll('.theme-card').forEach(card => { + card.classList.remove('selected'); + }); + + document.querySelector(`[data-theme="${theme}"]`).classList.add('selected'); + + applyTheme(theme); +} + +function selectLanguage(language) { + selectedLanguage = language; + + document.querySelectorAll('.language-card').forEach(card => { + card.classList.remove('selected'); + }); + document.querySelector(`[data-language="${language}"]`).classList.add('selected'); +} + +function applyTheme(theme) { + document.documentElement.setAttribute('data-theme', theme); +} + +function nextStep() { + if (currentStep < totalSteps) { + saveCurrentStepSettings(); + + currentStep++; + updateStepDisplay(); + } +} + +function previousStep() { + if (currentStep > 1) { + currentStep--; + updateStepDisplay(); + } +} + +async function saveCurrentStepSettings() { + if (currentStep === 1) { + await storageManager.set('themePreference', selectedTheme); + } else if (currentStep === 2) { + await storageManager.set('language', selectedLanguage); + await storageManager.set('languagePreference', selectedLanguage); + if (window.LanguageManager) { + await window.LanguageManager.changeLanguage(selectedLanguage); + } + } +} + +function updateStepDisplay() { + document.querySelectorAll('.progress-step').forEach(step => { + const stepNumber = parseInt(step.dataset.step); + if (stepNumber < currentStep) { + step.classList.add('completed'); + step.classList.remove('active'); + } else if (stepNumber === currentStep) { + step.classList.add('active'); + step.classList.remove('completed'); + } else { + step.classList.remove('active', 'completed'); + } + }); + + document.querySelectorAll('.setup-step').forEach(step => { + if (parseInt(step.dataset.step) === currentStep) { + step.classList.add('active'); + } else { + step.classList.remove('active'); + } + }); + + const backBtn = document.getElementById('backBtn'); + const nextBtn = document.getElementById('nextBtn'); + const finishBtn = document.getElementById('finishBtn'); + + if (currentStep === 1) { + backBtn.style.display = 'none'; + } else { + backBtn.style.display = 'flex'; + } + + if (currentStep === totalSteps) { + nextBtn.style.display = 'none'; + finishBtn.style.display = 'flex'; + } else { + nextBtn.style.display = 'flex'; + finishBtn.style.display = 'none'; + } +} + +async function finishSetup() { + await saveCurrentStepSettings(); + + await storageManager.set('setupCompleted', true); + + window.location.href = 'https://intezmenykereso.e-kreta.hu/'; +} diff --git a/tools/background.js b/tools/background.js index 683d691..370fbd1 100644 --- a/tools/background.js +++ b/tools/background.js @@ -1,3 +1,15 @@ +chrome.runtime.onInstalled.addListener(async (details) => { + if (details.reason === 'install') { + const setupCompleted = await chrome.storage.sync.get('firka_setupCompleted'); + + if (!setupCompleted.firka_setupCompleted) { + chrome.tabs.create({ + url: chrome.runtime.getURL('setup/setup.html') + }); + } + } +}); + chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { (async () => { try {