mirror of
https://github.com/QwIT-Development/firka-extension.git
synced 2026-06-12 03:41:39 +02:00
Profile page rework
This commit is contained in:
Zan
@@ -186,5 +186,6 @@
|
|||||||
{ code: "en", name: "English" },
|
{ code: "en", name: "English" },
|
||||||
{ code: "de", name: "Deutsch" },
|
{ code: "de", name: "Deutsch" },
|
||||||
],
|
],
|
||||||
|
init: initializeLanguage,
|
||||||
};
|
};
|
||||||
})();
|
})();
|
||||||
|
|||||||
@@ -197,7 +197,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-item:hover img {
|
.dropdown-item:hover img {
|
||||||
filter: none;
|
filter: brightness(0) saturate(100%) invert(25%) sepia(50%) saturate(2000%) hue-rotate(90deg) brightness(90%) contrast(95%);
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes dropdownShow {
|
@keyframes dropdownShow {
|
||||||
@@ -418,7 +418,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.mobile-dropdown-item:hover img {
|
.mobile-dropdown-item:hover img {
|
||||||
filter: none;
|
filter: brightness(0) saturate(100%) invert(25%) sepia(50%) saturate(2000%) hue-rotate(90deg) brightness(90%) contrast(95%);
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
|||||||
39
i18n/de.json
39
i18n/de.json
@@ -278,10 +278,23 @@
|
|||||||
"school": "Schule",
|
"school": "Schule",
|
||||||
"student_id": "Schüler-ID",
|
"student_id": "Schüler-ID",
|
||||||
"settings_title": "Profileinstellungen",
|
"settings_title": "Profileinstellungen",
|
||||||
|
"tab_my_data": "Meine Daten",
|
||||||
"tab_settings": "Einstellungen",
|
"tab_settings": "Einstellungen",
|
||||||
"tab_password": "Passwort ändern",
|
"tab_password": "Passwort ändern",
|
||||||
"tab_security": "Sicherheitseinstellungen",
|
"tab_security": "Sicherheitseinstellungen",
|
||||||
"tab_contacts": "Kontakte",
|
"tab_contacts": "Kontakte",
|
||||||
|
"loading_data": "Daten werden geladen...",
|
||||||
|
"loading_error": "Fehler beim Laden der Daten.",
|
||||||
|
"my_data_title": "Meine persönlichen Daten",
|
||||||
|
"personal_data": "Persönliche Daten",
|
||||||
|
"contact_data": "Kontaktdaten",
|
||||||
|
"address_data": "Adressdaten",
|
||||||
|
"bank_account_data": "Bankverbindung",
|
||||||
|
"student_card_data": "Schülerausweis Daten",
|
||||||
|
"default_address": "Standard",
|
||||||
|
"password_change_unavailable": "Die Passwortänderungsfunktion ist derzeit nicht verfügbar.",
|
||||||
|
"security_settings_info": "Um Sicherheitseinstellungen zu verwalten, klicken Sie auf die Schaltfläche unten:",
|
||||||
|
"open_security_settings": "Sicherheitseinstellungen öffnen",
|
||||||
"two_factor_description": "Um die Zwei-Faktor-Authentifizierung zu verwenden, installieren Sie eine zeitbasierte Einmalpasswort-App (TOTP):",
|
"two_factor_description": "Um die Zwei-Faktor-Authentifizierung zu verwenden, installieren Sie eine zeitbasierte Einmalpasswort-App (TOTP):",
|
||||||
"android": "Android",
|
"android": "Android",
|
||||||
"iphone": "iPhone",
|
"iphone": "iPhone",
|
||||||
@@ -315,7 +328,31 @@
|
|||||||
"passwords_not_match": "Die neuen Passwörter stimmen nicht überein!",
|
"passwords_not_match": "Die neuen Passwörter stimmen nicht überein!",
|
||||||
"password_too_short": "Das neue Passwort muss mindestens 8 Zeichen lang sein!",
|
"password_too_short": "Das neue Passwort muss mindestens 8 Zeichen lang sein!",
|
||||||
"password_changed": "Passwort erfolgreich geändert!",
|
"password_changed": "Passwort erfolgreich geändert!",
|
||||||
"password_change_error": "Fehler beim Ändern des Passworts. Bitte versuchen Sie es später erneut."
|
"password_change_error": "Fehler beim Ändern des Passworts. Bitte versuchen Sie es später erneut.",
|
||||||
|
"field_familyName": "Familienname",
|
||||||
|
"field_firstName": "Vorname",
|
||||||
|
"field_birthFamilyName": "Geburts-Familienname",
|
||||||
|
"field_birthFirstName": "Geburts-Vorname",
|
||||||
|
"field_motherFamilyName": "Geburts-Familienname der Mutter",
|
||||||
|
"field_motherFirstName": "Geburts-Vorname der Mutter",
|
||||||
|
"field_birthDate": "Geburtsdatum",
|
||||||
|
"field_birthPlace": "Geburtsort",
|
||||||
|
"field_birthCountry": "Geburtsland",
|
||||||
|
"field_motherTongue": "Muttersprache",
|
||||||
|
"field_citizenship": "Staatsangehörigkeit",
|
||||||
|
"field_classTeacher": "Klassenlehrer",
|
||||||
|
"field_className": "Klasse",
|
||||||
|
"field_classroom": "Klassenzimmer",
|
||||||
|
"field_username": "Benutzername",
|
||||||
|
"field_phone": "Telefonnummer",
|
||||||
|
"field_email": "Benachrichtigungs-E-Mail-Adresse",
|
||||||
|
"field_accountNumber": "Bankkontonummer",
|
||||||
|
"field_bankName": "Bankname",
|
||||||
|
"field_accountOwner": "Kontoinhaber",
|
||||||
|
"field_cardNumber": "Kartennummer",
|
||||||
|
"field_taxId": "Steuer-ID",
|
||||||
|
"field_studentCardNumber": "Studentenausweisnummer",
|
||||||
|
"field_socialSecurityNumber": "Sozialversicherungsnummer"
|
||||||
},
|
},
|
||||||
"login": {
|
"login": {
|
||||||
"title": "Anmelden",
|
"title": "Anmelden",
|
||||||
|
|||||||
39
i18n/en.json
39
i18n/en.json
@@ -278,10 +278,23 @@
|
|||||||
"school": "School",
|
"school": "School",
|
||||||
"student_id": "Student ID",
|
"student_id": "Student ID",
|
||||||
"settings_title": "Profile settings",
|
"settings_title": "Profile settings",
|
||||||
|
"tab_my_data": "My Data",
|
||||||
"tab_settings": "Settings",
|
"tab_settings": "Settings",
|
||||||
"tab_password": "Change password",
|
"tab_password": "Change password",
|
||||||
"tab_security": "Security settings",
|
"tab_security": "Security settings",
|
||||||
"tab_contacts": "Contact information",
|
"tab_contacts": "Contact information",
|
||||||
|
"loading_data": "Loading data...",
|
||||||
|
"loading_error": "An error occurred while loading the data.",
|
||||||
|
"my_data_title": "My Personal Data",
|
||||||
|
"personal_data": "Personal Information",
|
||||||
|
"contact_data": "Contact Information",
|
||||||
|
"address_data": "Address Data",
|
||||||
|
"bank_account_data": "Bank Account Data",
|
||||||
|
"student_card_data": "Student Card Data",
|
||||||
|
"default_address": "Default",
|
||||||
|
"password_change_unavailable": "The password change function is currently unavailable.",
|
||||||
|
"security_settings_info": "To manage security settings, click the button below:",
|
||||||
|
"open_security_settings": "Open Security Settings",
|
||||||
"two_factor_description": "To use two-factor authentication, install a time-based one-time password (TOTP) application:",
|
"two_factor_description": "To use two-factor authentication, install a time-based one-time password (TOTP) application:",
|
||||||
"android": "Android",
|
"android": "Android",
|
||||||
"iphone": "iPhone",
|
"iphone": "iPhone",
|
||||||
@@ -315,7 +328,31 @@
|
|||||||
"passwords_not_match": "New passwords do not match!",
|
"passwords_not_match": "New passwords do not match!",
|
||||||
"password_too_short": "New password must be at least 8 characters long!",
|
"password_too_short": "New password must be at least 8 characters long!",
|
||||||
"password_changed": "Password changed successfully!",
|
"password_changed": "Password changed successfully!",
|
||||||
"password_change_error": "An error occurred while changing password. Please try again later."
|
"password_change_error": "An error occurred while changing password. Please try again later.",
|
||||||
|
"field_familyName": "Family name",
|
||||||
|
"field_firstName": "First name",
|
||||||
|
"field_birthFamilyName": "Birth family name",
|
||||||
|
"field_birthFirstName": "Birth first name",
|
||||||
|
"field_motherFamilyName": "Mother's birth family name",
|
||||||
|
"field_motherFirstName": "Mother's birth first name",
|
||||||
|
"field_birthDate": "Date of birth",
|
||||||
|
"field_birthPlace": "Place of birth",
|
||||||
|
"field_birthCountry": "Country of birth",
|
||||||
|
"field_motherTongue": "Mother tongue",
|
||||||
|
"field_citizenship": "Citizenship",
|
||||||
|
"field_classTeacher": "Class teacher",
|
||||||
|
"field_className": "Class",
|
||||||
|
"field_classroom": "Classroom",
|
||||||
|
"field_username": "Username",
|
||||||
|
"field_phone": "Phone number",
|
||||||
|
"field_email": "Notification email address",
|
||||||
|
"field_accountNumber": "Bank account number",
|
||||||
|
"field_bankName": "Bank name",
|
||||||
|
"field_accountOwner": "Account owner's name",
|
||||||
|
"field_cardNumber": "Card number",
|
||||||
|
"field_taxId": "Tax ID",
|
||||||
|
"field_studentCardNumber": "Student card number",
|
||||||
|
"field_socialSecurityNumber": "Social security number"
|
||||||
},
|
},
|
||||||
"login": {
|
"login": {
|
||||||
"title": "Login",
|
"title": "Login",
|
||||||
|
|||||||
39
i18n/hu.json
39
i18n/hu.json
@@ -280,10 +280,23 @@
|
|||||||
"school": "Iskola",
|
"school": "Iskola",
|
||||||
"student_id": "Diák azonosító",
|
"student_id": "Diák azonosító",
|
||||||
"settings_title": "Profil beállítások",
|
"settings_title": "Profil beállítások",
|
||||||
|
"tab_my_data": "Adataim",
|
||||||
"tab_settings": "Beállítások",
|
"tab_settings": "Beállítások",
|
||||||
"tab_password": "Jelszó módosítása",
|
"tab_password": "Jelszó módosítása",
|
||||||
"tab_security": "Biztonsági beállítások",
|
"tab_security": "Biztonsági beállítások",
|
||||||
"tab_contacts": "Elérhetőségek",
|
"tab_contacts": "Elérhetőségek",
|
||||||
|
"loading_data": "Adatok betöltése...",
|
||||||
|
"loading_error": "Hiba történt az adatok betöltése során.",
|
||||||
|
"my_data_title": "Személyes adataim",
|
||||||
|
"personal_data": "Személyes adatok",
|
||||||
|
"contact_data": "Elérhetőségi adatok",
|
||||||
|
"address_data": "Lakcím adatok",
|
||||||
|
"bank_account_data": "Bankszámla adatok",
|
||||||
|
"student_card_data": "Tanulói igazolvány adatok",
|
||||||
|
"default_address": "Alapértelmezett",
|
||||||
|
"password_change_unavailable": "A jelszó módosítás funkció jelenleg nem érhető el.",
|
||||||
|
"security_settings_info": "A biztonsági beállítások kezeléséhez kattints az alábbi gombra:",
|
||||||
|
"open_security_settings": "Biztonsági beállítások megnyitása",
|
||||||
"two_factor_description": "A kétfaktoros hitelesítés használatához telepítsen egy időalapú, egyszer használatos jelszó (TOTP) alkalmazást:",
|
"two_factor_description": "A kétfaktoros hitelesítés használatához telepítsen egy időalapú, egyszer használatos jelszó (TOTP) alkalmazást:",
|
||||||
"android": "Android",
|
"android": "Android",
|
||||||
"iphone": "iPhone",
|
"iphone": "iPhone",
|
||||||
@@ -317,7 +330,31 @@
|
|||||||
"passwords_not_match": "Az új jelszavak nem egyeznek!",
|
"passwords_not_match": "Az új jelszavak nem egyeznek!",
|
||||||
"password_too_short": "Az új jelszónak legalább 8 karakter hosszúnak kell lennie!",
|
"password_too_short": "Az új jelszónak legalább 8 karakter hosszúnak kell lennie!",
|
||||||
"password_changed": "Jelszó sikeresen módosítva!",
|
"password_changed": "Jelszó sikeresen módosítva!",
|
||||||
"password_change_error": "Hiba történt a jelszó módosítása során. Kérjük, próbálja újra később."
|
"password_change_error": "Hiba történt a jelszó módosítása során. Kérjük, próbálja újra később.",
|
||||||
|
"field_familyName": "Családi név",
|
||||||
|
"field_firstName": "Utónév",
|
||||||
|
"field_birthFamilyName": "Születési családi név",
|
||||||
|
"field_birthFirstName": "Születési utónév",
|
||||||
|
"field_motherFamilyName": "Anyja születési családi neve",
|
||||||
|
"field_motherFirstName": "Anyja születési utóneve",
|
||||||
|
"field_birthDate": "Születési idő",
|
||||||
|
"field_birthPlace": "Születési hely",
|
||||||
|
"field_birthCountry": "Születési ország",
|
||||||
|
"field_motherTongue": "Anyanyelv",
|
||||||
|
"field_citizenship": "Állampolgárság",
|
||||||
|
"field_classTeacher": "Osztályfőnök",
|
||||||
|
"field_className": "Osztály",
|
||||||
|
"field_classroom": "Terem",
|
||||||
|
"field_username": "Felhasználónév",
|
||||||
|
"field_phone": "Telefonszám",
|
||||||
|
"field_email": "Értesítési e-mail cím",
|
||||||
|
"field_accountNumber": "Bankszámlaszám",
|
||||||
|
"field_bankName": "Számlavezető bank",
|
||||||
|
"field_accountOwner": "Bankszámla tulajdonos neve",
|
||||||
|
"field_cardNumber": "Igazolvány száma",
|
||||||
|
"field_taxId": "Adóazonosító jel",
|
||||||
|
"field_studentCardNumber": "Diákigazolvány szám",
|
||||||
|
"field_socialSecurityNumber": "TAJ-szám"
|
||||||
},
|
},
|
||||||
"login": {
|
"login": {
|
||||||
"title": "Bejelentkezés",
|
"title": "Bejelentkezés",
|
||||||
|
|||||||
@@ -1 +1 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none"><g fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="5" fill="currentColor"/><path d="M20 21a8 8 0 1 0-16 0"/></g></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="3 2 22 24" fill="none"><g fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"><circle cx="14" cy="9" r="5" fill="currentColor"/><path d="M22 22a8 8 0 1 0-16 0"/></g></svg>
|
||||||
|
Before Width: | Height: | Size: 343 B After Width: | Height: | Size: 343 B |
@@ -1 +1,4 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none"><path fill="currentColor" fill-rule="evenodd" d="M9.024 2.783A1 1 0 0 1 10 2h4a1 1 0 0 1 .976.783l.44 1.981q.6.285 1.14.66l1.938-.61a1 1 0 0 1 1.166.454l2 3.464a1 1 0 0 1-.19 1.237l-1.497 1.373a8 8 0 0 1 0 1.316l1.497 1.373a1 1 0 0 1 .19 1.237l-2 3.464a1 1 0 0 1-1.166.454l-1.937-.61q-.54.375-1.14.66l-.44 1.98A1 1 0 0 1 14 22h-4a1 1 0 0 1-.976-.783l-.44-1.981q-.6-.285-1.14-.66l-1.938.61a1 1 0 0 1-1.166-.454l-2-3.464a1 1 0 0 1 .19-1.237l1.497-1.373a8 8 0 0 1 0-1.316L2.53 9.97a1 1 0 0 1-.19-1.237l2-3.464a1 1 0 0 1 1.166-.454l1.937.61q.54-.375 1.14-.66l.44-1.98zM12 15a3 3 0 1 0 0-6a3 3 0 0 0 0 6" clip-rule="evenodd"/></svg>
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="2 2 24 24" fill="none">
|
||||||
|
<path fill="currentColor" fill-rule="evenodd" d="M 10.748 4.096 C 10.85 3.638 11.255 3.313 11.724 3.313 L 15.724 3.313 C 16.193 3.313 16.598 3.638 16.7 4.096 L 17.14 6.077 C 17.54 6.267 17.92 6.487 18.28 6.737 L 20.218 6.127 C 20.665 5.986 21.15 6.175 21.384 6.581 L 23.384 10.045 C 23.618 10.451 23.539 10.965 23.194 11.282 L 21.697 12.655 C 21.733 13.093 21.733 13.533 21.697 13.971 L 23.194 15.344 C 23.539 15.661 23.618 16.175 23.384 16.581 L 21.384 20.045 C 21.15 20.451 20.665 20.639 20.218 20.499 L 18.281 19.889 C 17.921 20.139 17.541 20.359 17.141 20.549 L 16.701 22.529 C 16.6 22.987 16.193 23.313 15.724 23.313 L 11.724 23.313 C 11.255 23.313 10.85 22.987 10.748 22.53 L 10.308 20.549 C 9.908 20.359 9.528 20.139 9.168 19.889 L 7.23 20.499 C 6.783 20.639 6.298 20.451 6.064 20.045 L 4.064 16.581 C 3.83 16.175 3.908 15.661 4.254 15.344 L 5.751 13.971 C 5.715 13.533 5.715 13.093 5.751 12.655 L 4.254 11.283 C 3.908 10.966 3.83 10.452 4.064 10.046 L 6.064 6.582 C 6.298 6.176 6.783 5.987 7.23 6.128 L 9.167 6.738 C 9.527 6.488 9.907 6.268 10.307 6.078 L 10.747 4.098 L 10.748 4.096 Z M 13.931 17.38 C 17.01 17.38 18.935 14.046 17.395 11.38 C 16.68 10.142 15.36 9.38 13.931 9.38 C 10.852 9.38 8.927 12.713 10.467 15.38 C 11.181 16.617 12.502 17.38 13.931 17.38" clip-rule="evenodd"/>
|
||||||
|
</svg>
|
||||||
|
Before Width: | Height: | Size: 722 B After Width: | Height: | Size: 1.4 KiB |
@@ -1,6 +1,5 @@
|
|||||||
@import url('../global/theme.css');
|
@import url('../global/theme.css');
|
||||||
|
|
||||||
|
|
||||||
.main-header,
|
.main-header,
|
||||||
.main-menu,
|
.main-menu,
|
||||||
.main-sidebar,
|
.main-sidebar,
|
||||||
@@ -11,11 +10,17 @@
|
|||||||
.navbar,
|
.navbar,
|
||||||
.sidebar-container,
|
.sidebar-container,
|
||||||
#sidepanel_tabs,
|
#sidepanel_tabs,
|
||||||
.sidepanel-wrapper {
|
.sidepanel-wrapper,
|
||||||
|
.main-footer2,
|
||||||
|
.lakatimg,
|
||||||
|
.modalContainer,
|
||||||
|
.modalOuter,
|
||||||
|
#ProfilTab,
|
||||||
|
#KretaProgressBar {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
|
visibility: hidden !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
@@ -26,6 +31,11 @@ body {
|
|||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
background-color: var(--card-card) !important;
|
||||||
|
border-bottom: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
.page-wrapper {
|
.page-wrapper {
|
||||||
background-color: var(--background) !important;
|
background-color: var(--background) !important;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
@@ -50,271 +60,295 @@ body {
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-container {
|
.profile-container {
|
||||||
max-width: 1200px;
|
max-width: 1400px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: clamp(1rem, 3vw, 2rem);
|
padding: 2rem;
|
||||||
background-color: var(--background) !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.profile-wrapper {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 280px 1fr;
|
||||||
|
gap: 2rem;
|
||||||
|
min-height: calc(100vh - 200px);
|
||||||
|
}
|
||||||
|
|
||||||
.firka-header {
|
.profile-sidebar {
|
||||||
padding: clamp(1rem, 3vw, 2rem);
|
position: sticky;
|
||||||
|
top: 2rem;
|
||||||
|
height: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-tabs {
|
||||||
|
background: var(--card-card);
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 1rem;
|
||||||
|
box-shadow: 0px 1px 2px 0px var(--accent-shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-tab {
|
||||||
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 1rem;
|
gap: 0.75rem;
|
||||||
background-color: var(--background);
|
padding: 1rem;
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
font-family: 'Montserrat', sans-serif;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 12px;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-tab:hover {
|
||||||
|
background: var(--button-secondaryFill);
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-tab.active {
|
||||||
|
background: var(--accent-accent);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-tab svg {
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-content {
|
||||||
|
background: var(--card-card);
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 2rem;
|
||||||
|
box-shadow: 0px 1px 2px 0px var(--accent-shadow);
|
||||||
|
min-height: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-content {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-content.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-header {
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
border-bottom: 2px solid var(--accent-15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-header h2 {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-section {
|
||||||
|
margin-bottom: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-section:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-section h3 {
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin: 0 0 1.5rem 0;
|
||||||
|
padding-bottom: 0.75rem;
|
||||||
border-bottom: 1px solid var(--accent-15);
|
border-bottom: 1px solid var(--accent-15);
|
||||||
}
|
}
|
||||||
|
|
||||||
.back-button {
|
.data-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-item label {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 500;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-item span {
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 500;
|
||||||
|
padding: 0.75rem;
|
||||||
|
background: var(--button-secondaryFill);
|
||||||
|
border-radius: 8px;
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.address-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.address-item {
|
||||||
|
padding: 1.25rem;
|
||||||
|
background: var(--button-secondaryFill);
|
||||||
|
border-radius: 12px;
|
||||||
|
border-left: 4px solid var(--accent-15);
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.address-item:hover {
|
||||||
|
transform: translateX(4px);
|
||||||
|
box-shadow: 0px 2px 8px 0px var(--accent-shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.address-item.default {
|
||||||
|
border-left-color: var(--accent-accent);
|
||||||
|
background: var(--accent-15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.address-type {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0.5rem;
|
gap: 0.75rem;
|
||||||
background: var(--card-card);
|
margin-bottom: 0.5rem;
|
||||||
border: none;
|
}
|
||||||
border-radius: 12px;
|
|
||||||
padding: 12px 16px;
|
.address-type strong {
|
||||||
color: var(--text-primary);
|
color: var(--text-primary);
|
||||||
font-family: 'Montserrat', sans-serif;
|
font-size: 15px;
|
||||||
font-weight: 500;
|
|
||||||
font-size: 14px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
text-decoration: none;
|
|
||||||
box-shadow: 0px 1px var(--shadow-blur, 2px) 0px var(--accent-shadow);
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-button:hover {
|
|
||||||
background: var(--button-secondaryFill);
|
|
||||||
transform: translateY(-1px);
|
|
||||||
box-shadow: 0px 2px var(--shadow-blur, 4px) 0px var(--accent-shadow);
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-button svg {
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
fill: var(--text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-title {
|
|
||||||
color: var(--text-primary);
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0.25rem 0.75rem;
|
||||||
|
background: var(--accent-accent);
|
||||||
|
color: white;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 600;
|
||||||
|
border-radius: 12px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.address-details {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-spinner {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 4rem 2rem;
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spinner {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
border: 4px solid var(--accent-15);
|
||||||
|
border-top-color: var(--accent-accent);
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: spin 1s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
to {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-spinner p {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
font-size: 16px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.info-message {
|
||||||
.k-content {
|
display: flex;
|
||||||
background-color: var(--background) !important;
|
flex-direction: column;
|
||||||
}
|
align-items: center;
|
||||||
|
gap: 1.5rem;
|
||||||
.k-content h4 {
|
padding: 3rem 2rem;
|
||||||
color: var(--text-primary) !important;
|
|
||||||
font-family: 'Montserrat', sans-serif !important;
|
|
||||||
font-size: 28px !important;
|
|
||||||
font-weight: 600 !important;
|
|
||||||
margin: 0 0 2rem 0 !important;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.info-message svg {
|
||||||
.k-tabstrip-wrapper {
|
|
||||||
background: var(--card-card) !important;
|
|
||||||
border-radius: 24px !important;
|
|
||||||
overflow: hidden;
|
|
||||||
box-shadow: 0px 1px var(--shadow-blur, 2px) 0px var(--accent-shadow);
|
|
||||||
border: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.k-tabstrip {
|
|
||||||
background: var(--card-card) !important;
|
|
||||||
border: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.k-tabstrip-items {
|
|
||||||
background: var(--card-card) !important;
|
|
||||||
border: none !important;
|
|
||||||
border-radius: 24px 24px 0 0 !important;
|
|
||||||
padding: 0 20px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.k-tabstrip-items .k-item {
|
|
||||||
background: transparent !important;
|
|
||||||
border: none !important;
|
|
||||||
margin: 0 !important;
|
|
||||||
border-radius: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.k-tabstrip-items .k-item .k-link {
|
|
||||||
color: var(--text-secondary) !important;
|
|
||||||
font-family: 'Montserrat', sans-serif !important;
|
|
||||||
font-weight: 500 !important;
|
|
||||||
font-size: 14px !important;
|
|
||||||
padding: 16px 20px !important;
|
|
||||||
border: none !important;
|
|
||||||
background: transparent !important;
|
|
||||||
border-radius: 0 !important;
|
|
||||||
transition: all 0.2s ease !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.k-tabstrip-items .k-item.k-state-active .k-link {
|
|
||||||
color: var(--accent-accent) !important;
|
|
||||||
font-weight: 600 !important;
|
|
||||||
border-bottom: 2px solid var(--accent-accent) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.k-tabstrip-items .k-item:hover .k-link {
|
|
||||||
color: var(--text-primary) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.k-tabstrip .k-content {
|
|
||||||
background: var(--card-card) !important;
|
|
||||||
border: none !important;
|
|
||||||
padding: 20px !important;
|
|
||||||
border-radius: 0 0 24px 24px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
form {
|
|
||||||
background: transparent !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container-fluid.details {
|
|
||||||
background: transparent !important;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.row {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.windowInputLabel {
|
|
||||||
color: var(--text-primary) !important;
|
|
||||||
font-family: 'Montserrat', sans-serif !important;
|
|
||||||
font-weight: 500 !important;
|
|
||||||
font-size: 14px !important;
|
|
||||||
margin: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
input[type="text"],
|
|
||||||
input[type="password"],
|
|
||||||
input[type="email"],
|
|
||||||
select,
|
|
||||||
textarea {
|
|
||||||
background: var(--button-secondaryFill) !important;
|
|
||||||
border: 1px solid var(--accent-15) !important;
|
|
||||||
border-radius: 12px !important;
|
|
||||||
padding: 12px 16px !important;
|
|
||||||
color: var(--text-primary) !important;
|
|
||||||
font-family: 'Montserrat', sans-serif !important;
|
|
||||||
font-size: 14px !important;
|
|
||||||
transition: all 0.2s ease !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="text"]:focus,
|
|
||||||
input[type="password"]:focus,
|
|
||||||
input[type="email"]:focus,
|
|
||||||
select:focus,
|
|
||||||
textarea:focus {
|
|
||||||
outline: none !important;
|
|
||||||
border-color: var(--accent-accent) !important;
|
|
||||||
box-shadow: 0 0 0 3px var(--accent-15) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.k-checkbox {
|
|
||||||
appearance: none;
|
|
||||||
width: 20px !important;
|
|
||||||
height: 20px !important;
|
|
||||||
border: 2px solid var(--accent-15) !important;
|
|
||||||
border-radius: 4px !important;
|
|
||||||
background: var(--button-secondaryFill) !important;
|
|
||||||
cursor: pointer !important;
|
|
||||||
position: relative !important;
|
|
||||||
transition: all 0.2s ease !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.k-checkbox:checked {
|
|
||||||
background: var(--accent-accent) !important;
|
|
||||||
border-color: var(--accent-accent) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.k-checkbox:checked::after {
|
|
||||||
content: '✓';
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 12px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.k-checkbox-label {
|
.info-message p {
|
||||||
margin-left: 8px !important;
|
color: var(--text-secondary);
|
||||||
color: var(--text-primary) !important;
|
font-size: 16px;
|
||||||
font-family: 'Montserrat', sans-serif !important;
|
line-height: 1.6;
|
||||||
cursor: pointer !important;
|
margin: 0;
|
||||||
|
max-width: 600px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.k-button,
|
.error-message {
|
||||||
button {
|
display: flex;
|
||||||
background: var(--accent-accent) !important;
|
flex-direction: column;
|
||||||
border: none !important;
|
align-items: center;
|
||||||
border-radius: 12px !important;
|
gap: 1.5rem;
|
||||||
padding: 12px 24px !important;
|
padding: 4rem 2rem;
|
||||||
color: white !important;
|
text-align: center;
|
||||||
font-family: 'Montserrat', sans-serif !important;
|
|
||||||
font-weight: 600 !important;
|
|
||||||
font-size: 14px !important;
|
|
||||||
cursor: pointer !important;
|
|
||||||
transition: all 0.2s ease !important;
|
|
||||||
box-shadow: 0px 1px var(--shadow-blur, 2px) 0px var(--accent-shadow) !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.k-button:hover,
|
.error-message svg {
|
||||||
button:hover {
|
color: #e74c3c;
|
||||||
background: var(--accent-secondary) !important;
|
|
||||||
transform: translateY(-1px) !important;
|
|
||||||
box-shadow: 0px 2px var(--shadow-blur, 4px) 0px var(--accent-shadow) !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.k-button:active,
|
.error-message p {
|
||||||
button:active {
|
color: var(--text-secondary);
|
||||||
transform: translateY(0) !important;
|
font-size: 16px;
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.security-btn {
|
||||||
@media (max-width: 768px) {
|
display: inline-flex;
|
||||||
.content-container {
|
align-items: center;
|
||||||
padding: 1rem;
|
gap: 0.75rem;
|
||||||
}
|
padding: 1rem 2rem;
|
||||||
|
background: var(--accent-accent);
|
||||||
.firka-header {
|
color: white;
|
||||||
padding: 1rem;
|
border: none;
|
||||||
}
|
border-radius: 12px;
|
||||||
|
font-family: 'Montserrat', sans-serif;
|
||||||
.page-title {
|
font-size: 15px;
|
||||||
font-size: 20px;
|
font-weight: 600;
|
||||||
}
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
.k-content h4 {
|
box-shadow: 0px 2px 4px 0px var(--accent-shadow);
|
||||||
font-size: 24px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.k-tabstrip-items {
|
|
||||||
padding: 0 10px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.k-tabstrip-items .k-item .k-link {
|
|
||||||
padding: 12px 16px !important;
|
|
||||||
font-size: 13px !important;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.security-btn:hover {
|
||||||
|
background: var(--accent-secondary);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0px 4px 8px 0px var(--accent-shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.security-btn:active {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.security-btn svg {
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
@keyframes fadeIn {
|
@keyframes fadeIn {
|
||||||
from {
|
from {
|
||||||
@@ -327,159 +361,267 @@ button:active {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.k-tabstrip-wrapper {
|
.profile-wrapper {
|
||||||
|
animation: fadeIn 0.4s ease forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-section {
|
||||||
animation: fadeIn 0.5s ease forwards;
|
animation: fadeIn 0.5s ease forwards;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.data-section:nth-child(2) {
|
||||||
.k-widget,
|
animation-delay: 0.1s;
|
||||||
.k-header {
|
|
||||||
background: var(--card-card) !important;
|
|
||||||
color: var(--text-primary) !important;
|
|
||||||
border: none !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.k-state-default {
|
.data-section:nth-child(3) {
|
||||||
background: transparent !important;
|
animation-delay: 0.2s;
|
||||||
border: none !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.k-state-active {
|
.data-section:nth-child(4) {
|
||||||
background: transparent !important;
|
animation-delay: 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
.profile-wrapper {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
.k-overlay,
|
.profile-sidebar {
|
||||||
.k-window,
|
position: static;
|
||||||
.k-notification {
|
}
|
||||||
display: none !important;
|
|
||||||
|
.profile-tabs {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 0.5rem;
|
||||||
|
padding: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-tab {
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
padding: 1rem 0.5rem;
|
||||||
|
font-size: 13px;
|
||||||
|
min-height: 75px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-tab svg {
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-tab span {
|
||||||
|
line-height: 1.2;
|
||||||
|
word-break: break-word;
|
||||||
|
hyphens: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-grid {
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.profile-container {
|
||||||
|
padding: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
.main-content .content-content {
|
.profile-wrapper {
|
||||||
display: block !important;
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-content {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-header h2 {
|
||||||
|
font-size: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-section h3 {
|
||||||
|
font-size: 17px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-tabs {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 0.375rem;
|
||||||
|
padding: 0.375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-tab {
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
gap: 0.375rem;
|
||||||
|
padding: 0.625rem 0.25rem;
|
||||||
|
font-size: 11px;
|
||||||
|
min-height: 55px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-tab svg {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-tab span {
|
||||||
|
line-height: 1.1;
|
||||||
|
word-break: break-word;
|
||||||
|
hyphens: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.address-item {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.security-btn {
|
||||||
|
width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-message,
|
||||||
|
.error-message,
|
||||||
|
.loading-spinner {
|
||||||
|
padding: 2rem 1rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.profile-container {
|
||||||
|
padding: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
div[style*="display:flex;justify-content:space-between"] {
|
.profile-wrapper {
|
||||||
display: flex !important;
|
gap: 0.5rem;
|
||||||
justify-content: space-between !important;
|
}
|
||||||
align-items: center !important;
|
|
||||||
margin-top: 2rem !important;
|
.profile-content {
|
||||||
padding-top: 2rem !important;
|
padding: 0.875rem;
|
||||||
border-top: 1px solid var(--accent-15) !important;
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-header {
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-header h2 {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-section h3 {
|
||||||
|
font-size: 15px;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-item label {
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-item span {
|
||||||
|
font-size: 13px;
|
||||||
|
padding: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-tabs {
|
||||||
|
padding: 0.25rem;
|
||||||
|
gap: 0.25rem;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-tab {
|
||||||
|
padding: 0.5rem 0.25rem;
|
||||||
|
min-height: 50px;
|
||||||
|
font-size: 10px;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-tab svg {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-tab span {
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-section {
|
||||||
|
margin-bottom: 1.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.address-item {
|
||||||
|
padding: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
font-size: 9px;
|
||||||
|
padding: 0.2rem 0.5rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
div[style*="display:flex;justify-content:space-between"] label {
|
.error-message svg {
|
||||||
color: var(--text-secondary) !important;
|
color: #ff6b6b;
|
||||||
font-size: 12px !important;
|
}
|
||||||
font-style: italic !important;
|
|
||||||
margin: 0 !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.hidden-contact-info {
|
@media print {
|
||||||
display: none !important;
|
.profile-sidebar,
|
||||||
visibility: hidden !important;
|
.security-btn,
|
||||||
|
.kreta-header,
|
||||||
|
.mobile-header,
|
||||||
|
.mobile-bottom-nav {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-wrapper {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-content {
|
||||||
|
box-shadow: none;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-content {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-section {
|
||||||
|
page-break-inside: avoid;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.hidden-tab {
|
.profile-tab:focus,
|
||||||
display: none !important;
|
.security-btn:focus {
|
||||||
|
outline: 2px solid var(--accent-accent);
|
||||||
|
outline-offset: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#ProfilTab-3 {
|
.profile-tab:focus:not(:focus-visible),
|
||||||
padding: 20px;
|
.security-btn:focus:not(:focus-visible) {
|
||||||
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
outline: none;
|
||||||
min-height: 500px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#ProfilTab-3 .container-fluid {
|
html {
|
||||||
background: white;
|
scroll-behavior: smooth;
|
||||||
border-radius: 12px;
|
|
||||||
padding: 30px;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#ProfilTab-3 h4 {
|
::selection {
|
||||||
color: #2c3e50;
|
background: var(--accent-accent);
|
||||||
font-weight: 600;
|
|
||||||
margin-bottom: 25px;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
border-bottom: 3px solid #3498db;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
#ProfilTab-3 .row {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
padding: 15px;
|
|
||||||
background: #f8f9fa;
|
|
||||||
border-radius: 8px;
|
|
||||||
border-left: 4px solid #3498db;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
#ProfilTab-3 .row:hover {
|
|
||||||
background: #e3f2fd;
|
|
||||||
transform: translateX(5px);
|
|
||||||
box-shadow: 0 2px 10px rgba(52, 152, 219, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
#ProfilTab-3 .windowInputLabel {
|
|
||||||
color: #34495e;
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#ProfilTab-3 .k-button {
|
|
||||||
background: linear-gradient(135deg, #3498db, #2980b9);
|
|
||||||
border: none;
|
|
||||||
border-radius: 6px;
|
|
||||||
padding: 10px 20px;
|
|
||||||
color: white;
|
color: white;
|
||||||
font-weight: 500;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#ProfilTab-3 .k-button:hover {
|
::-moz-selection {
|
||||||
background: linear-gradient(135deg, #2980b9, #1f5f8b);
|
background: var(--accent-accent);
|
||||||
transform: translateY(-2px);
|
color: white;
|
||||||
box-shadow: 0 4px 15px rgba(52, 152, 219, 0.4);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#ProfilTab-3 .k-input {
|
|
||||||
border: 2px solid #e0e6ed;
|
|
||||||
border-radius: 6px;
|
|
||||||
padding: 10px;
|
|
||||||
transition: border-color 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
#ProfilTab-3 .k-input:focus {
|
|
||||||
border-color: #3498db;
|
|
||||||
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
#ProfilTab-3 .alert {
|
|
||||||
border-radius: 8px;
|
|
||||||
border: none;
|
|
||||||
padding: 15px;
|
|
||||||
margin: 15px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#ProfilTab-3 .alert-info {
|
|
||||||
background: linear-gradient(135deg, #e3f2fd, #bbdefb);
|
|
||||||
color: #1565c0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#ProfilTab-3 .alert-success {
|
|
||||||
background: linear-gradient(135deg, #e8f5e8, #c8e6c9);
|
|
||||||
color: #2e7d32;
|
|
||||||
}
|
|
||||||
|
|
||||||
#ProfilTab-3 .alert-warning {
|
|
||||||
background: linear-gradient(135deg, #fff3e0, #ffcc02);
|
|
||||||
color: #ef6c00;
|
|
||||||
}
|
|
||||||
|
|
||||||
.details .row {
|
|
||||||
border-bottom: none !important;
|
|
||||||
}
|
|
||||||
@@ -1,228 +1,497 @@
|
|||||||
(function() {
|
(function() {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
function hideLoadingScreen() {
|
|
||||||
const loadingElement = document.getElementById('KretaProgressBar');
|
|
||||||
if (loadingElement) {
|
|
||||||
loadingElement.style.display = 'none !important';
|
|
||||||
loadingElement.style.visibility = 'hidden';
|
|
||||||
loadingElement.style.opacity = '0';
|
|
||||||
loadingElement.remove();
|
|
||||||
|
|
||||||
}
|
const TABS = {
|
||||||
|
MY_DATA: 'my-data',
|
||||||
|
PASSWORD: 'password',
|
||||||
|
SECURITY: 'security'
|
||||||
|
};
|
||||||
|
|
||||||
const loadingElements = document.querySelectorAll('[class*="loading"], [id*="loading"], [class*="Loading"], [id*="Loading"]');
|
let currentTab = TABS.MY_DATA;
|
||||||
loadingElements.forEach(el => {
|
let profileData = null;
|
||||||
el.style.display = 'none !important';
|
let addressData = null;
|
||||||
el.style.visibility = 'hidden';
|
|
||||||
el.style.opacity = '0';
|
function getApiUrls(subdomain) {
|
||||||
});
|
return {
|
||||||
|
PROFILE_DATA: `https://${subdomain}.e-kreta.hu/Adminisztracio/Profil/SajatAdatlapPopUp`,
|
||||||
|
ADDRESS_DATA: `https://${subdomain}.e-kreta.hu/api/ProfilApi/GetElerhetosegCimGrid?sort=&page=1&pageSize=100&group=&filter=&data=%7B%7D&_=`
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function addBackButton() {
|
function hideOriginalElements() {
|
||||||
|
const elementsToHide = [
|
||||||
|
'#KretaProgressBar',
|
||||||
|
'.main-header',
|
||||||
|
'.main-menu',
|
||||||
|
'.main-sidebar',
|
||||||
|
'.content-header',
|
||||||
|
'.favoriteIconContainer',
|
||||||
|
'#frissitesDatumDiv',
|
||||||
|
'#layout_navigationBar',
|
||||||
|
'.navbar',
|
||||||
|
'.sidebar-container',
|
||||||
|
'#sidepanel_tabs',
|
||||||
|
'.sidepanel-wrapper',
|
||||||
|
'.main-footer2',
|
||||||
|
'.lakatimg',
|
||||||
|
'.modalContainer',
|
||||||
|
'.modalOuter',
|
||||||
|
'#ProfilTab'
|
||||||
|
];
|
||||||
|
|
||||||
if (document.getElementById('firka-back-button')) {
|
elementsToHide.forEach(selector => {
|
||||||
return;
|
const elements = document.querySelectorAll(selector);
|
||||||
}
|
elements.forEach(el => {
|
||||||
|
el.style.display = 'none';
|
||||||
|
el.style.visibility = 'hidden';
|
||||||
const backButton = document.createElement('button');
|
});
|
||||||
backButton.id = 'firka-back-button';
|
|
||||||
backButton.textContent = '← Vissza';
|
|
||||||
backButton.style.cssText = `
|
|
||||||
position: static;
|
|
||||||
margin: 20px;
|
|
||||||
z-index: 100;
|
|
||||||
background-color: var(--card-background, #ffffff);
|
|
||||||
color: var(--text-primary, #333333);
|
|
||||||
border: 1px solid var(--border-color, #e0e0e0);
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 10px 16px;
|
|
||||||
font-family: 'Montserrat', sans-serif;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
|
||||||
cursor: pointer;
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
width: auto;
|
|
||||||
`;
|
|
||||||
|
|
||||||
|
|
||||||
backButton.addEventListener('mouseenter', function() {
|
|
||||||
this.style.backgroundColor = 'var(--card-hover, #f5f5f5)';
|
|
||||||
this.style.transform = 'translateY(-1px)';
|
|
||||||
this.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.15)';
|
|
||||||
});
|
});
|
||||||
|
|
||||||
backButton.addEventListener('mouseleave', function() {
|
document.body.innerHTML = '';
|
||||||
this.style.backgroundColor = 'var(--card-background, #ffffff)';
|
}
|
||||||
this.style.transform = 'translateY(0)';
|
|
||||||
this.style.boxShadow = '0 2px 8px rgba(0, 0, 0, 0.1)';
|
async function createNavbar() {
|
||||||
|
const header = await createTemplate.header();
|
||||||
|
const headerContainer = document.createElement('div');
|
||||||
|
headerContainer.innerHTML = header;
|
||||||
|
document.body.appendChild(headerContainer);
|
||||||
|
|
||||||
|
setupUserDropdown();
|
||||||
|
setupSettingsButton();
|
||||||
|
}
|
||||||
|
|
||||||
|
function setupUserDropdown() {
|
||||||
|
const userBtn = document.querySelector('.user-dropdown-btn');
|
||||||
|
const userDropdown = document.querySelector('.user-dropdown');
|
||||||
|
|
||||||
|
userBtn?.addEventListener('click', (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
userDropdown?.classList.toggle('show');
|
||||||
|
userBtn?.classList.toggle('open');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
backButton.addEventListener('click', function() {
|
const mobileUserBtn = document.querySelector('#mobileUserBtn');
|
||||||
window.history.back();
|
const mobileUserDropdown = document.querySelector('#mobileUserDropdown');
|
||||||
|
|
||||||
|
mobileUserBtn?.addEventListener('click', (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
mobileUserDropdown?.classList.toggle('show');
|
||||||
|
mobileUserBtn?.classList.toggle('active');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
document.body.insertBefore(backButton, document.body.firstChild);
|
document.addEventListener('click', (e) => {
|
||||||
|
if (!userBtn?.contains(e.target) && !userDropdown?.contains(e.target)) {
|
||||||
|
userDropdown?.classList.remove('show');
|
||||||
|
userBtn?.classList.remove('open');
|
||||||
|
}
|
||||||
|
|
||||||
}
|
if (!mobileUserBtn?.contains(e.target) && !mobileUserDropdown?.contains(e.target)) {
|
||||||
|
mobileUserDropdown?.classList.remove('show');
|
||||||
|
mobileUserBtn?.classList.remove('active');
|
||||||
function hideMainFooter2() {
|
|
||||||
const footer2 = document.querySelector('.main-footer2');
|
|
||||||
if (footer2) {
|
|
||||||
footer2.style.display = 'none';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function hideLakatImg() {
|
|
||||||
const lakatImg = document.querySelector('.lakatimg');
|
|
||||||
if (lakatImg) {
|
|
||||||
lakatImg.style.display = 'none';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function hideCustomUserSettingsTab() {
|
|
||||||
|
|
||||||
const firstTab = document.querySelector('#ProfilTab .k-tabstrip-items li[aria-controls="ProfilTab-1"]');
|
|
||||||
if (firstTab) {
|
|
||||||
firstTab.classList.add('hidden-tab');
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
const tabLinks = document.querySelectorAll('#ProfilTab .k-tabstrip-items .k-link');
|
|
||||||
tabLinks.forEach(link => {
|
|
||||||
if (link.textContent && link.textContent.includes('Egyedi felhasználó beállítások')) {
|
|
||||||
const parentTab = link.closest('li');
|
|
||||||
if (parentTab) {
|
|
||||||
parentTab.classList.add('hidden-tab');
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
const contentPanel = document.querySelector('#ProfilTab-1');
|
const mobileDropdownItems = document.querySelectorAll('.mobile-dropdown-item');
|
||||||
if (contentPanel) {
|
mobileDropdownItems.forEach(item => {
|
||||||
contentPanel.classList.add('hidden-tab');
|
item.addEventListener('click', () => {
|
||||||
|
mobileUserDropdown?.classList.remove('show');
|
||||||
|
mobileUserBtn?.classList.remove('active');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function setupSettingsButton() {
|
||||||
|
document.getElementById('settingsBtn')?.addEventListener('click', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
const url = chrome.runtime.getURL('settings/index.html');
|
||||||
|
window.open(url, '_blank', 'width=400,height=600');
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('mobileSettingsBtn')?.addEventListener('click', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
const url = chrome.runtime.getURL('settings/index.html');
|
||||||
|
window.open(url, '_blank', 'width=400,height=600');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function createProfilePage() {
|
||||||
|
const t = window.LanguageManager?.t || ((key) => key);
|
||||||
|
|
||||||
|
const container = document.createElement('div');
|
||||||
|
container.className = 'profile-container';
|
||||||
|
container.innerHTML = `
|
||||||
|
<div class="profile-wrapper">
|
||||||
|
<div class="profile-sidebar">
|
||||||
|
<div class="profile-tabs">
|
||||||
|
<button class="profile-tab active" data-tab="${TABS.MY_DATA}">
|
||||||
|
<svg viewBox="0 0 24 24" width="20" height="20">
|
||||||
|
<path fill="currentColor" d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
|
||||||
|
</svg>
|
||||||
|
<span>${t('profile.tab_my_data')}</span>
|
||||||
|
</button>
|
||||||
|
<button class="profile-tab" data-tab="${TABS.PASSWORD}">
|
||||||
|
<svg viewBox="0 0 24 24" width="20" height="20">
|
||||||
|
<path fill="currentColor" d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/>
|
||||||
|
</svg>
|
||||||
|
<span>${t('profile.tab_password')}</span>
|
||||||
|
</button>
|
||||||
|
<button class="profile-tab" data-tab="${TABS.SECURITY}">
|
||||||
|
<svg viewBox="0 0 24 24" width="20" height="20">
|
||||||
|
<path fill="currentColor" d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"/>
|
||||||
|
</svg>
|
||||||
|
<span>${t('profile.tab_security')}</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="profile-content">
|
||||||
|
<div id="tab-${TABS.MY_DATA}" class="tab-content active">
|
||||||
|
<div class="loading-spinner">
|
||||||
|
<div class="spinner"></div>
|
||||||
|
<p>${t('profile.loading_data')}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="tab-${TABS.PASSWORD}" class="tab-content">
|
||||||
|
<div class="tab-header">
|
||||||
|
<h2>${t('profile.tab_password')}</h2>
|
||||||
|
</div>
|
||||||
|
<div class="info-message">
|
||||||
|
<svg viewBox="0 0 24 24" width="24" height="24">
|
||||||
|
<path fill="currentColor" d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/>
|
||||||
|
</svg>
|
||||||
|
<p>${t('profile.password_change_unavailable')}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="tab-${TABS.SECURITY}" class="tab-content">
|
||||||
|
<div class="tab-header">
|
||||||
|
<h2>${t('profile.tab_security')}</h2>
|
||||||
|
</div>
|
||||||
|
<div class="info-message">
|
||||||
|
<p>${t('profile.security_settings_info')}</p>
|
||||||
|
<button id="security-redirect-btn" class="security-btn">
|
||||||
|
<svg viewBox="0 0 24 24" width="20" height="20">
|
||||||
|
<path fill="currentColor" d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"/>
|
||||||
|
</svg>
|
||||||
|
${t('profile.open_security_settings')}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
document.body.appendChild(container);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function fetchProfileData() {
|
||||||
|
try {
|
||||||
|
const subdomain = await storageManager.get('schoolSubdomain', '');
|
||||||
|
if (!subdomain) {
|
||||||
|
console.error('Nincs beállítva az iskola alcím');
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const apiUrls = getApiUrls(subdomain);
|
||||||
|
const response = await fetch(apiUrls.PROFILE_DATA);
|
||||||
|
const html = await response.text();
|
||||||
|
return parseProfileHTML(html);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Hiba a profil adatok lekérésekor:', error);
|
||||||
|
return null;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function hideAdditionalContactInfo() {
|
async function fetchAddressData() {
|
||||||
|
try {
|
||||||
|
const subdomain = await storageManager.get('schoolSubdomain', '');
|
||||||
|
if (!subdomain) {
|
||||||
|
console.error('Nincs beállítva az iskola alcím');
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
function hideElementsWithText(text) {
|
const apiUrls = getApiUrls(subdomain);
|
||||||
const elements = document.querySelectorAll('h4');
|
const timestamp = new Date().getTime();
|
||||||
elements.forEach(h4 => {
|
const response = await fetch(apiUrls.ADDRESS_DATA + timestamp);
|
||||||
if (h4.textContent && h4.textContent.includes(text)) {
|
const data = await response.json();
|
||||||
// Hide the parent row
|
return data;
|
||||||
let parent = h4.closest('.row');
|
} catch (error) {
|
||||||
if (parent) {
|
console.error('Hiba a cím adatok lekérésekor:', error);
|
||||||
parent.classList.add('hidden-contact-info');
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function parseProfileHTML(html) {
|
||||||
|
const parser = new DOMParser();
|
||||||
|
const doc = parser.parseFromString(html, 'text/html');
|
||||||
|
|
||||||
|
const data = {
|
||||||
|
personal: {},
|
||||||
|
contact: {},
|
||||||
|
bankAccount: {},
|
||||||
|
studentCard: {}
|
||||||
|
};
|
||||||
|
|
||||||
|
const personalFields = [
|
||||||
|
{ id: 'AlapAdat_CsaladiNev', key: 'familyName' },
|
||||||
|
{ id: 'AlapAdat_Utonev', key: 'firstName' },
|
||||||
|
{ id: 'AlapAdat_SzuletesiCsaladNev', key: 'birthFamilyName' },
|
||||||
|
{ id: 'AlapAdat_SzuletesiUtonev', key: 'birthFirstName' },
|
||||||
|
{ id: 'AlapAdat_AnyjaCsaladiNeve', key: 'motherFamilyName' },
|
||||||
|
{ id: 'AlapAdat_AnyjaUtonev', key: 'motherFirstName' },
|
||||||
|
{ id: 'AlapAdat_SzuletesiIdo_SDATE', key: 'birthDate' },
|
||||||
|
{ id: 'AlapAdat_SzuletesiHely', key: 'birthPlace' },
|
||||||
|
{ id: 'AlapAdat_SzuletesiOrszag', key: 'birthCountry' },
|
||||||
|
{ id: 'AlapAdat_Anyanyelv', key: 'motherTongue' },
|
||||||
|
{ id: 'AlapAdat_Allampolgarsag', key: 'citizenship' },
|
||||||
|
{ id: 'AlapAdat_OsztalyfonokNev', key: 'classTeacher' },
|
||||||
|
{ id: 'AlapAdat_OsztalyNev', key: 'className' },
|
||||||
|
{ id: 'AlapAdat_TeremNev', key: 'classroom' },
|
||||||
|
{ id: 'AlapAdat_BelepesiNev', key: 'username' }
|
||||||
|
];
|
||||||
|
|
||||||
|
personalFields.forEach(field => {
|
||||||
|
const label = doc.querySelector(`label[displayfor="${field.id}"]`);
|
||||||
|
if (label) {
|
||||||
|
data.personal[field.key] = {
|
||||||
|
key: field.key,
|
||||||
|
value: label.textContent.trim()
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const phoneInput = doc.querySelector('#Elerhetosegek_ErtesitesiTelefon_TelefonSzam');
|
||||||
|
const emailInput = doc.querySelector('#Elerhetosegek_ErtesitesiEmail_EmailCim');
|
||||||
|
|
||||||
|
if (phoneInput) {
|
||||||
|
data.contact.phone = {
|
||||||
|
key: 'phone',
|
||||||
|
value: phoneInput.value || ''
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
if (emailInput) {
|
||||||
|
data.contact.email = {
|
||||||
|
key: 'email',
|
||||||
|
value: emailInput.value || ''
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const bankFields = [
|
||||||
|
{ id: 'BankszamlaSzam', key: 'accountNumber' },
|
||||||
|
{ id: 'SzamlavezetoBank', key: 'bankName' },
|
||||||
|
{ id: 'BankszamlaTulajdonosNeve', key: 'accountOwner' }
|
||||||
|
];
|
||||||
|
|
||||||
|
bankFields.forEach(field => {
|
||||||
|
const input = doc.querySelector(`#${field.id}`);
|
||||||
|
if (input) {
|
||||||
|
data.bankAccount[field.key] = {
|
||||||
|
key: field.key,
|
||||||
|
value: input.value || ''
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const cardFields = [
|
||||||
|
{ id: 'TanuloIgazolvany_Igazolvanyszam', key: 'cardNumber' },
|
||||||
|
{ id: 'TanuloIgazolvany_AdoazonositoJel', key: 'taxId' },
|
||||||
|
{ id: 'TanuloIgazolvany_DiakigazolvanySzam', key: 'studentCardNumber' },
|
||||||
|
{ id: 'TanuloIgazolvany_TajSzam', key: 'socialSecurityNumber' }
|
||||||
|
];
|
||||||
|
|
||||||
|
cardFields.forEach(field => {
|
||||||
|
const label = doc.querySelector(`label[displayfor="${field.id}"]`);
|
||||||
|
if (label) {
|
||||||
|
data.studentCard[field.key] = {
|
||||||
|
key: field.key,
|
||||||
|
value: label.textContent.trim()
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderProfileData() {
|
||||||
|
const t = window.LanguageManager?.t || ((key) => key);
|
||||||
|
const container = document.getElementById(`tab-${TABS.MY_DATA}`);
|
||||||
|
|
||||||
|
if (!profileData && !addressData) {
|
||||||
|
container.innerHTML = `
|
||||||
|
<div class="error-message">
|
||||||
|
<svg viewBox="0 0 24 24" width="48" height="48">
|
||||||
|
<path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
|
||||||
|
</svg>
|
||||||
|
<p>${t('profile.loading_error')}</p>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let html = `<div class="tab-header"><h2>${t('profile.my_data_title')}</h2></div>`;
|
||||||
|
|
||||||
|
if (profileData && profileData.personal && Object.keys(profileData.personal).length > 0) {
|
||||||
|
html += `<div class="data-section"><h3>${t('profile.personal_data')}</h3><div class="data-grid">`;
|
||||||
|
|
||||||
|
Object.values(profileData.personal).forEach(field => {
|
||||||
|
if (field.value && field.value !== 'XY') {
|
||||||
|
html += `
|
||||||
|
<div class="data-item">
|
||||||
|
<label>${t(`profile.field_${field.key}`)}</label>
|
||||||
|
<span>${field.value}</span>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
html += '</div></div>';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (profileData && profileData.contact && Object.keys(profileData.contact).length > 0) {
|
||||||
|
html += `<div class="data-section"><h3>${t('profile.contact_data')}</h3><div class="data-grid">`;
|
||||||
|
|
||||||
|
Object.values(profileData.contact).forEach(field => {
|
||||||
|
if (field.value) {
|
||||||
|
html += `
|
||||||
|
<div class="data-item">
|
||||||
|
<label>${t(`profile.field_${field.key}`)}</label>
|
||||||
|
<span>${field.value}</span>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
html += '</div></div>';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (addressData && addressData.Data && addressData.Data.length > 0) {
|
||||||
|
html += `<div class="data-section"><h3>${t('profile.address_data')}</h3><div class="address-list">`;
|
||||||
|
|
||||||
|
addressData.Data.forEach(address => {
|
||||||
|
const fullAddress = `${address.Irsz} ${address.Varos}, ${address.Kozterulet} ${address.KozteruletJellegeNev || ''} ${address.HazSzam}${address.Emelet ? ' ' + address.Emelet : ''}${address.Ajto ? ' ' + address.Ajto : ''}`;
|
||||||
|
const isDefault = address.Alapertelmezett_BOOL;
|
||||||
|
|
||||||
|
html += `
|
||||||
|
<div class="address-item ${isDefault ? 'default' : ''}">
|
||||||
|
<div class="address-type">
|
||||||
|
<strong>${address.CimTipus_DNAME}</strong>
|
||||||
|
${isDefault ? `<span class="badge">${t('profile.default_address')}</span>` : ''}
|
||||||
|
</div>
|
||||||
|
<div class="address-details">${fullAddress}</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
});
|
||||||
|
|
||||||
|
html += '</div></div>';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (profileData && profileData.bankAccount && Object.keys(profileData.bankAccount).length > 0) {
|
||||||
|
const hasData = Object.values(profileData.bankAccount).some(field => field.value);
|
||||||
|
|
||||||
|
if (hasData) {
|
||||||
|
html += `<div class="data-section"><h3>${t('profile.bank_account_data')}</h3><div class="data-grid">`;
|
||||||
|
|
||||||
|
Object.values(profileData.bankAccount).forEach(field => {
|
||||||
|
if (field.value) {
|
||||||
|
html += `
|
||||||
|
<div class="data-item">
|
||||||
|
<label>${t(`profile.field_${field.key}`)}</label>
|
||||||
|
<span>${field.value}</span>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
|
|
||||||
|
html += '</div></div>';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (profileData && profileData.studentCard && Object.keys(profileData.studentCard).length > 0) {
|
||||||
|
const hasData = Object.values(profileData.studentCard).some(field => field.value && field.value !== 'XY');
|
||||||
|
|
||||||
|
if (hasData) {
|
||||||
|
html += `<div class="data-section"><h3>${t('profile.student_card_data')}</h3><div class="data-grid">`;
|
||||||
|
|
||||||
|
Object.values(profileData.studentCard).forEach(field => {
|
||||||
|
if (field.value && field.value !== 'XY') {
|
||||||
|
html += `
|
||||||
|
<div class="data-item">
|
||||||
|
<label>${t(`profile.field_${field.key}`)}</label>
|
||||||
|
<span>${field.value}</span>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
html += '</div></div>';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
container.innerHTML = html;
|
||||||
|
}
|
||||||
|
|
||||||
|
function setupTabSwitching() {
|
||||||
|
const tabs = document.querySelectorAll('.profile-tab');
|
||||||
|
const tabContents = document.querySelectorAll('.tab-content');
|
||||||
|
|
||||||
|
tabs.forEach(tab => {
|
||||||
|
tab.addEventListener('click', () => {
|
||||||
|
const tabId = tab.getAttribute('data-tab');
|
||||||
|
|
||||||
|
tabs.forEach(t => t.classList.remove('active'));
|
||||||
|
tab.classList.add('active');
|
||||||
|
|
||||||
|
tabContents.forEach(tc => tc.classList.remove('active'));
|
||||||
|
document.getElementById(`tab-${tabId}`).classList.add('active');
|
||||||
|
|
||||||
|
currentTab = tabId;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function setupSecurityRedirect() {
|
||||||
|
const btn = document.getElementById('security-redirect-btn');
|
||||||
|
if (btn) {
|
||||||
|
btn.addEventListener('click', async () => {
|
||||||
|
const subdomain = await storageManager.get('schoolSubdomain', '');
|
||||||
|
const url = `https://idp.e-kreta.hu/security?returnUrl=https%3A%2F%2F${subdomain}.e-kreta.hu%2FAdminisztracio%2FProfil`;
|
||||||
|
window.location.href = url;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
hideElementsWithText('TOVÁBBI E-MAIL ELÉRHETŐSÉGEK');
|
|
||||||
hideElementsWithText('TOVÁBBI TELEFONSZÁMOK');
|
|
||||||
|
|
||||||
|
|
||||||
const rows = document.querySelectorAll('.row');
|
|
||||||
rows.forEach(row => {
|
|
||||||
const h4Elements = row.querySelectorAll('h4');
|
|
||||||
h4Elements.forEach(h4 => {
|
|
||||||
if (h4.textContent &&
|
|
||||||
(h4.textContent.includes('TOVÁBBI E-MAIL ELÉRHETŐSÉGEK') ||
|
|
||||||
h4.textContent.includes('TOVÁBBI TELEFONSZÁMOK'))) {
|
|
||||||
row.classList.add('hidden-contact-info');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function init() {
|
async function init() {
|
||||||
hideLoadingScreen();
|
try {
|
||||||
addBackButton();
|
hideOriginalElements();
|
||||||
hideAdditionalContactInfo();
|
|
||||||
hideCustomUserSettingsTab();
|
|
||||||
hideMainFooter2();
|
|
||||||
hideLakatImg();
|
|
||||||
|
|
||||||
|
|
||||||
const observer = new MutationObserver(() => {
|
if (typeof window.LanguageManager !== 'undefined' && window.LanguageManager.init) {
|
||||||
hideAdditionalContactInfo();
|
await window.LanguageManager.init();
|
||||||
hideCustomUserSettingsTab();
|
}
|
||||||
hideMainFooter2();
|
|
||||||
hideLakatImg();
|
await createNavbar();
|
||||||
});
|
createProfilePage();
|
||||||
|
setupTabSwitching();
|
||||||
observer.observe(document.body, {
|
setupSecurityRedirect();
|
||||||
childList: true,
|
|
||||||
subtree: true
|
[profileData, addressData] = await Promise.all([
|
||||||
});
|
fetchProfileData(),
|
||||||
|
fetchAddressData()
|
||||||
|
]);
|
||||||
|
|
||||||
|
renderProfileData();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Hiba az inicializálás során:', error);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
if (document.readyState === 'loading') {
|
if (document.readyState === 'loading') {
|
||||||
document.addEventListener('DOMContentLoaded', init);
|
document.addEventListener('DOMContentLoaded', init);
|
||||||
} else {
|
} else {
|
||||||
init();
|
init();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
window.addEventListener('load', init);
|
})();
|
||||||
|
|
||||||
|
|
||||||
setTimeout(hideLoadingScreen, 1000);
|
|
||||||
|
|
||||||
|
|
||||||
let attempts = 0;
|
|
||||||
const maxAttempts = 20;
|
|
||||||
const aggressiveHide = setInterval(() => {
|
|
||||||
attempts++;
|
|
||||||
hideLoadingScreen();
|
|
||||||
|
|
||||||
if (attempts >= maxAttempts) {
|
|
||||||
clearInterval(aggressiveHide);
|
|
||||||
}
|
|
||||||
}, 500);
|
|
||||||
|
|
||||||
|
|
||||||
if (typeof MutationObserver !== 'undefined') {
|
|
||||||
const observer = new MutationObserver((mutations) => {
|
|
||||||
mutations.forEach((mutation) => {
|
|
||||||
mutation.addedNodes.forEach((node) => {
|
|
||||||
if (node.nodeType === 1) {
|
|
||||||
if (node.id === 'KretaProgressBar' ||
|
|
||||||
node.className && (node.className.includes('loading') || node.className.includes('Loading'))) {
|
|
||||||
node.style.display = 'none !important';
|
|
||||||
node.style.visibility = 'hidden';
|
|
||||||
node.style.opacity = '0';
|
|
||||||
if (node.parentNode) {
|
|
||||||
node.parentNode.removeChild(node);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
observer.observe(document.body, {
|
|
||||||
childList: true,
|
|
||||||
subtree: true
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
})();
|
|
||||||
|
|||||||
Reference in New Issue
Block a user