diff --git a/login/KRÉTA Bejelentkezés.html b/login/KRÉTA Bejelentkezés.html new file mode 100644 index 0000000..789a6e0 --- /dev/null +++ b/login/KRÉTA Bejelentkezés.html @@ -0,0 +1,148 @@ + + + + + + + + KRÉTA Bejelentkezés + + + + + + + + + + + + + + + + +
+
+ +
+
+
+ + + + + + +
+
+
+ + sulineve + +
+ + KRÉTA azonosító: suli
+ OM kód: 6969/420 + +
+
+ +
+ + +
+ + + +
+
+ +
+
+ + +
+ +
+
+
+ Elfelejtettem a jelszavam +
+
+ + + +
+
+
+
+ Nem tud bejelentkezni? +
+
+
+
+ +
  • reCAPTCHA validáció szükséges!
    • +
+ +
+
+
+
+
+
+
+ +
+
+ + + +
+
+ + + + + + + + + + + + + + +
\ No newline at end of file diff --git a/login/login.css b/login/login.css index 8bd87f0..90639d8 100644 --- a/login/login.css +++ b/login/login.css @@ -222,6 +222,12 @@ body { color: var(--text-teritary); } +.recaptcha-container { + display: flex; + justify-content: center; + margin-bottom: 16px; +} + .btn-login { width: 100%; padding: 12px; diff --git a/login/login.js b/login/login.js index 69b4c13..b9bf0f2 100644 --- a/login/login.js +++ b/login/login.js @@ -14,6 +14,11 @@ async function transformLoginPage() { requestToken: document.querySelector('input[name="__RequestVerificationToken"]')?.value || '' }; + // Check for reCAPTCHA elements + const recaptchaDiv = document.querySelector('.g-recaptcha'); + const recaptchaPublicKey = document.querySelector('#ReCaptchaPublicKey')?.value || ''; + const showRecaptcha = document.querySelector('#ShowReCaptcha')?.value === 'True'; + const titleElement = document.querySelector('.page-title'); const schoolInfo = { name: titleElement?.querySelector('b')?.textContent?.trim() || '', @@ -67,6 +72,13 @@ async function transformLoginPage() {
Kérjük, add meg a jelszavad.
+ + ${showRecaptcha ? ` +
+
+ + +
` : ''}
+
+ + + + + + + + + + + + + + + + + + + + diff --git a/search/search.css b/search/search.css new file mode 100644 index 0000000..48881a2 --- /dev/null +++ b/search/search.css @@ -0,0 +1,243 @@ +@font-face { + font-family: 'Montserrat'; + src: url('chrome-extension://__MSG_@@extension_id__/fonts/Montserrat-Regular.woff2') format('woff2'); + font-weight: 400; + font-style: normal; +} +@font-face { + font-family: 'Montserrat'; + src: url('chrome-extension://__MSG_@@extension_id__/fonts/Montserrat-Medium.woff2') format('woff2'); + font-weight: 500; + font-style: normal; +} +@font-face { + font-family: 'Montserrat'; + src: url('chrome-extension://__MSG_@@extension_id__/fonts/Montserrat-SemiBold.woff2') format('woff2'); + font-weight: 600; + font-style: normal; +} +@font-face { + font-family: 'Figtree'; + src: url('chrome-extension://__MSG_@@extension_id__/fonts/Figtree-Regular.woff2') format('woff2'); + font-weight: 400; + font-style: normal; +} + +/* Hide original elements */ +header, footer, .page-title, .card-kreta { + display: none !important; +} + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + margin: 0; + padding: 0; + color: var(--text-primary); + background-color: var(--background) !important; + font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; + min-height: 100vh; + font-size: 16px; + display: flex; + align-items: center; + justify-content: center; +} + +/* Firka search page styling */ +.firka-search-wrapper { + width: 90%; + max-width: 500px; + padding: 0; + margin: 0 auto; + display: flex; + flex-direction: column; + align-items: center; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +/* Firka header styling */ +.firka-header { + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; + margin: 0; + background: var(--card-card) !important; + padding: 24px; + border-radius: 24px 24px 0 0; + width: 100%; + box-shadow: 0px 1px var(--shadow-blur) 0px var(--accent-shadow); +} + +.logo-text { + color: var(--text-primary); + text-align: center; + font-family: Montserrat; + font-size: 20px; + font-style: normal; + font-weight: 700; + line-height: normal; + display: flex; + align-items: center; + gap: 8px; +} + +.logo { + width: 32px; + height: 32px; +} + +.search-title { + color: var(--text-primary); + text-align: center; + font-family: Montserrat; + font-size: 24px; + font-style: normal; + font-weight: 600; + line-height: normal; + margin: 8px 0; +} + +/* Form container styling */ +.firka-form-container { + background: var(--card-card); + padding: 0 24px 24px 24px; + border-radius: 0 0 24px 24px; + width: 100%; + box-shadow: 0px 1px var(--shadow-blur) 0px var(--accent-shadow); +} + +/* Form styling */ +form { + width: 100%; +} + +.form-control { + background-color: var(--button-secondaryFill) !important; + border: 1px solid var(--accent-15) !important; + border-radius: 12px !important; + color: var(--text-primary) !important; + padding: 12px 16px !important; + font-family: Montserrat !important; + font-size: 16px !important; + font-weight: 400 !important; + height: auto !important; + transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; +} + +.form-control:focus { + border-color: var(--accent-accent) !important; + box-shadow: 0 0 0 2px var(--accent-15) !important; + outline: none !important; +} + +.form-control::placeholder { + color: var(--text-teritary) !important; +} + +/* Autocomplete dropdown styling */ +.dropdown-menu { + background-color: var(--card-card) !important; + border: 1px solid var(--accent-15) !important; + border-radius: 12px !important; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important; + padding: 8px !important; + max-height: 300px !important; + overflow-y: auto !important; + width: 100% !important; +} + +.dropdown-item { + color: var(--text-primary) !important; + padding: 10px 16px !important; + border-radius: 8px !important; + margin-bottom: 4px !important; + font-family: Montserrat !important; + font-size: 14px !important; + transition: background-color 0.2s ease-in-out !important; +} + +.dropdown-item:hover, .dropdown-item:focus { + background-color: var(--accent-15) !important; + color: var(--text-primary) !important; +} + +.dropdown-item.active { + background-color: var(--accent-accent) !important; + color: white !important; +} + +/* Button styling */ +.btn-kreta { + background-color: var(--accent-accent) !important; + color: white !important; + border: none !important; + border-radius: 12px !important; + padding: 12px 24px !important; + font-family: Montserrat !important; + font-size: 16px !important; + font-weight: 600 !important; + cursor: pointer !important; + transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out !important; + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; +} + +.btn-kreta:hover { + background-color: var(--accent-secondary) !important; + transform: translateY(-1px) !important; +} + +.btn-kreta:active { + transform: translateY(1px) !important; +} + +.btn-kreta:disabled { + background-color: var(--text-teritary) !important; + cursor: not-allowed !important; + transform: none !important; +} + +/* Footer styling */ +.firka-footer { + margin-top: 16px; + text-align: center; + width: 100%; +} + +.privacy-link { + color: var(--text-secondary); + font-family: Montserrat; + font-size: 14px; + text-decoration: none; + transition: color 0.2s ease-in-out; +} + +.privacy-link:hover { + color: var(--accent-accent); + text-decoration: underline; +} + +/* Responsive adjustments */ +@media (max-width: 576px) { + .firka-search-wrapper { + width: 95%; + } + + .search-title { + font-size: 20px; + } + + .btn-kreta { + padding: 10px 20px !important; + font-size: 14px !important; + } +} \ No newline at end of file diff --git a/search/search.js b/search/search.js new file mode 100644 index 0000000..b8d6293 --- /dev/null +++ b/search/search.js @@ -0,0 +1,177 @@ +// This script applies Firka styling to the KRÉTA institution search page +// It transforms the original page while preserving its functionality + +// Wait for the page to be fully loaded before applying styling +function initializeTransformation() { + // Check if the necessary elements exist before styling + const form = document.querySelector('form'); + const autocomplete = document.querySelector('.autocomplete'); + + if (form && autocomplete) { + applyFirkaStyling(); + } else { + // If elements aren't ready yet, wait a bit longer + setTimeout(initializeTransformation, 500); + } +} + +// Add event listeners to ensure the script runs after the page loads +document.addEventListener('DOMContentLoaded', () => { + // Wait for the page to load, then initialize + setTimeout(initializeTransformation, 1000); +}); + +// Also add a fallback in case the DOMContentLoaded event has already fired +if (document.readyState === 'complete' || document.readyState === 'interactive') { + setTimeout(initializeTransformation, 1000); +} + +// Function to apply the Firka styling to the page +function applyFirkaStyling() { + try { + // Apply theme from user preferences + const theme = cookieManager.get('themePreference') || localStorage.getItem('themePreference') || 'light-blue'; + document.documentElement.setAttribute('data-theme', theme); + + // Hide the loading screen if it exists + if (typeof loadingScreen !== 'undefined') { + loadingScreen.hide(); + } + + // Get references to the original elements + const originalForm = document.querySelector('form'); + const instituteInput = document.querySelector('.autocomplete'); + const redirectButton = document.getElementById('redirectToInstitute'); + const instituteCodeInput = document.querySelector('.autocomplete-value'); + const requestToken = document.querySelector('input[name="__RequestVerificationToken"]'); + + // Create a wrapper for the Firka styling + const searchWrapper = document.createElement('div'); + searchWrapper.className = 'firka-search-wrapper'; + + // Create our Firka header + const firkaHeader = document.createElement('div'); + firkaHeader.className = 'firka-header'; + firkaHeader.innerHTML = ` +

+ + Firka +

+

Válassz iskolát

+ `; + + // Create a container for the original form + const formContainer = document.createElement('div'); + formContainer.className = 'firka-form-container'; + + // Create a footer + const firkaFooter = document.createElement('div'); + firkaFooter.className = 'firka-footer'; + firkaFooter.innerHTML = ` + Adatkezelési tájékoztató + `; + + // Check if the wrapper already exists to avoid duplicates + const existingWrapper = document.querySelector('.firka-search-wrapper'); + if (existingWrapper) { + existingWrapper.remove(); + } + + // Create the structure + searchWrapper.appendChild(firkaHeader); + + // Move the original form into our container instead of replacing it + if (originalForm) { + formContainer.appendChild(originalForm); + searchWrapper.appendChild(formContainer); + } + + searchWrapper.appendChild(firkaFooter); + + // Add the wrapper to the page + document.body.appendChild(searchWrapper); + + // Set up event listeners for the autocomplete dropdown + setupAutocompleteListeners(); + + // Add event listener to the redirect button + if (redirectButton) { + redirectButton.addEventListener('click', function(event) { + // Only allow the redirect if an institute is selected + if (!instituteCodeInput.value) { + event.preventDefault(); + alert('Kérjük, válasszon egy intézményt a folytatáshoz!'); + } + }); + } + + // Observe changes to the autocomplete value to enable/disable the button + observeAutocompleteValue(instituteCodeInput, redirectButton); + + } catch (error) { + console.error('Error applying Firka styling:', error); + } +} + +// Function to set up event listeners for the autocomplete dropdown +function setupAutocompleteListeners() { + const autocompleteInput = document.querySelector('.autocomplete'); + const autocompleteValue = document.querySelector('.autocomplete-value'); + const redirectButton = document.getElementById('redirectToInstitute'); + + if (autocompleteInput && autocompleteValue) { + // Monitor for changes to the dropdown + const observer = new MutationObserver((mutations) => { + const dropdown = document.querySelector('.autocomplete-dropdown'); + if (dropdown) { + // Ensure the dropdown has the right styling + dropdown.classList.add('dropdown-menu'); + + // Add event listeners to dropdown items + const items = dropdown.querySelectorAll('li'); + items.forEach(item => { + item.classList.add('dropdown-item'); + + // When an item is clicked, update the input and enable the button + item.addEventListener('click', () => { + if (redirectButton) { + redirectButton.disabled = false; + } + }); + }); + } + }); + + // Start observing the document for changes + observer.observe(document.body, { + childList: true, + subtree: true + }); + } +} + +// Function to observe changes to the autocomplete value +function observeAutocompleteValue(valueInput, button) { + if (!valueInput || !button) return; + + // Create an observer to watch for changes to the input value + const observer = new MutationObserver((mutations) => { + // Enable the button if a value is selected + button.disabled = !valueInput.value; + }); + + // Observe changes to the input's attributes + observer.observe(valueInput, { + attributes: true, + attributeFilter: ['value'] + }); + + // Also check for changes using an interval as a fallback + const checkInterval = setInterval(() => { + if (valueInput.value) { + button.disabled = false; + clearInterval(checkInterval); + } + }, 500); +} \ No newline at end of file diff --git a/settings/index.css b/settings/index.css index f64ab79..0842464 100644 --- a/settings/index.css +++ b/settings/index.css @@ -118,23 +118,6 @@ h2 { overflow: hidden; position: relative; } -.theme-option.disabled { - opacity: 0.5; - cursor: not-allowed; - position: relative; -} - -.theme-option.disabled::after { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.1); - border-radius: 8px; -} - .theme-preview.light-blue { background: #DAE4F7; diff --git a/settings/index.js b/settings/index.js index 06daaa2..7186b63 100644 --- a/settings/index.js +++ b/settings/index.js @@ -1,10 +1,8 @@ document.addEventListener('DOMContentLoaded', async () => { - function getCookie(name) { const cookieName = `${name}=`; const decodedCookie = decodeURIComponent(document.cookie); const cookieArray = decodedCookie.split(';'); - for(let i = 0; i < cookieArray.length; i++) { let cookie = cookieArray[i]; while (cookie.charAt(0) === ' ') { @@ -17,7 +15,6 @@ document.addEventListener('DOMContentLoaded', async () => { return null; } - function setCookie(name, value, days = 365) { const date = new Date(); date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); @@ -40,81 +37,37 @@ document.addEventListener('DOMContentLoaded', async () => { document.querySelectorAll('.theme-option').forEach(button => { const theme = button.dataset.theme; button.classList.toggle('active', theme === currentTheme); - - - /*if (theme === 'light-blue' || theme === 'dark-blue' || theme === 'default') { - button.classList.add('disabled'); - button.setAttribute('disabled', 'true'); - }*/ }); } - - function isThemeDisabled(theme) { - return theme === 'default' || theme === 'dark-blue'; - } - async function applyTheme(theme) { - - if (isThemeDisabled(theme)) { - alert('Ez a téma jelenleg nem elérhető.'); - return; - } - - setCookie('themePreference', theme); localStorage.setItem('themePreference', theme); - - document.documentElement.setAttribute('data-theme', theme); - - updateThemeButtons(theme); - - const tabs = await chrome.tabs.query({}); tabs.forEach(tab => { chrome.tabs.sendMessage(tab.id, { action: 'changeTheme', theme: theme }).catch(() => { - console.log('Tab not ready for theme change:', tab.id); }); }); } - const themeButtons = document.querySelectorAll('.theme-option'); themeButtons.forEach(button => { button.addEventListener('click', () => { const theme = button.dataset.theme; - - - if (button.hasAttribute('disabled')) { - alert('Ez a téma jelenleg nem elérhető.'); - return; - } - applyTheme(theme); }); }); - - let initialTheme = localStorage.getItem('themePreference') || - getCookie('themePreference') || - await getCurrentTheme() || - 'light-green'; - - - if (isThemeDisabled(initialTheme)) { - initialTheme = 'light-green'; - } - + let initialTheme = localStorage.getItem('themePreference') || getCookie('themePreference') || await getCurrentTheme() || 'light-green'; await applyTheme(initialTheme); - chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { if (message.action === 'themeChanged') { updateThemeButtons(message.theme); @@ -122,20 +75,6 @@ document.addEventListener('DOMContentLoaded', async () => { } }); - const manifest = chrome.runtime.getManifest(); document.getElementById('version').textContent = `v${manifest.version}`; - - - themeButtons.forEach(button => { - button.addEventListener('mouseover', () => { - if (!button.hasAttribute('disabled')) { - button.style.transform = 'translateY(-2px)'; - } - }); - - button.addEventListener('mouseout', () => { - button.style.transform = 'translateY(0)'; - }); - }); }); \ No newline at end of file diff --git a/tools/loadingScreen.css b/tools/loadingScreen.css index 5a2703b..16bdf43 100644 --- a/tools/loadingScreen.css +++ b/tools/loadingScreen.css @@ -1,4 +1,4 @@ -.modalBckgroundMain { +.modalBackgroundMain { display: none !important; }