Page settings

setup page
logo fix
2026-06-12 03:41:39 +02:00 · 2025-12-08 14:19:36 +01:00 · 2025-12-08 13:13:50 +01:00 · 2025-12-08 13:13:42 +01:00 · 2025-12-08 13:07:09 +01:00
20 changed files with 1773 additions and 117 deletions
--- a/dashboard/dashboard.css
+++ b/dashboard/dashboard.css
@@ -37,6 +37,8 @@ h2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 20px;
+  justify-content: center;
+  justify-items: center;
 }

 .widget-card {
@@ -50,6 +52,7 @@ h2 {
  height: 100%;
  border: none;
  min-height: 400px;
+  width: 100%;
 }

 .widget-header {
@@ -222,7 +225,6 @@ h2 {
  max-width: 200px;
 }

-/* Mobile view: author below content */
@media (max-width: 768px) {
  .news-item .widget-row {
    flex-direction: column;
@@ -257,7 +259,6 @@ h2 {
  }
 }

-/* Desktop view: limit author width and wrap text */
@media (min-width: 769px) {
  .news-author {
    max-width: 180px;
--- a/dashboard/dashboard.js
+++ b/dashboard/dashboard.js
@@ -291,8 +291,9 @@ class DashboardDataManager {
 }

 class DashboardRenderer {
-  constructor(data) {
+  constructor(data, settings = {}) {
    this.baseData = data;
+    this.settings = settings;
  }

  async init() {
@@ -315,14 +316,31 @@ class DashboardRenderer {
  }

  generateMainContent() {
+    const cards = [];
+    
+    if (!this.settings.hideGrades) {
+      cards.push(this.createGradeCard());
+    }
+    if (!this.settings.hideAbsences) {
+      cards.push(this.createAbsenceCard());
+    }
+    if (!this.settings.hideNotes) {
+      cards.push(this.createNoteCard());
+    }
+    if (!this.settings.hideExams) {
+      cards.push(this.createExamCard());
+    }
+
+    cards.push(this.createNewsCard());
+
+    if (cards.length === 1) {
+      cards.unshift(this.createGradeCard());
+    }
+    
    return `
      <main class="kreta-main">
        <div class="grid-container">
-          ${this.createGradeCard()}
-          ${this.createAbsenceCard()}
-          ${this.createNoteCard()}
-          ${this.createExamCard()}
-          ${this.createNewsCard()}
+          ${cards.join('')}
        </div>
      </main>
    `;
@@ -513,6 +531,26 @@ class DashboardApplication {
    this.init();
  }

+  async loadBulletinSettings() {
+    try {
+      const settings = await storageManager.get("pageSettings_bulletin", {});
+      return {
+        hideGrades: settings.hideGrades || false,
+        hideAbsences: settings.hideAbsences || false,
+        hideNotes: settings.hideNotes || false,
+        hideExams: settings.hideExams || false
+      };
+    } catch (error) {
+      console.error("Error loading bulletin settings:", error);
+      return {
+        hideGrades: false,
+        hideAbsences: false,
+        hideNotes: false,
+        hideExams: false
+      };
+    }
+  }
+
  async init() {
    if (!window.location.href.includes("/Intezmeny/Faliujsag")) {
      return;
@@ -575,8 +613,9 @@ class DashboardApplication {
    try {
      const dataManager = new DashboardDataManager();
      const dashboardData = await dataManager.extractAllData();
+      const bulletinSettings = await this.loadBulletinSettings();
      
-      const renderer = new DashboardRenderer(dashboardData);
+      const renderer = new DashboardRenderer(dashboardData, bulletinSettings);
      await renderer.render();
    } catch (error) {
      console.error("Error initializing dashboard:", error);
--- a/grades/grades.css
+++ b/grades/grades.css
@@ -458,6 +458,9 @@ to {
  gap:1rem;
  padding:1rem;
 }
+.grade-distribution.centered {
+  justify-content:center;
+}
 .grade-count {
  display:flex;
  align-items:center;
--- a/grades/grades.js
+++ b/grades/grades.js
@@ -1,6 +1,25 @@
 (() => {
+  let gradesSettings = {
+    hideChart: false,
+    hideClassAverage: false
+  };
+
+  async function loadGradesSettings() {
+    try {
+      const settings = await storageManager.get("pageSettings_grades", {});
+      gradesSettings = {
+        hideChart: settings.hideChart || false,
+        hideClassAverage: settings.hideClassAverage || false
+      };
+    } catch (error) {
+      console.error("Error loading grades settings:", error);
+    }
+  }
+
  async function transformGradesPage() {
    try {
+      await loadGradesSettings();
+      
      const tanuloIdElement = document.querySelector("#TanuloId");
      const tanuloId = tanuloIdElement ? tanuloIdElement.value : "772481";

@@ -24,13 +43,15 @@
      
      setupUserDropdown();

-      const script = document.createElement("script");
-      script.src = chrome.runtime.getURL("grades/chart.js");
-      document.head.appendChild(script);
+      if (!gradesSettings.hideChart) {
+        const script = document.createElement("script");
+        script.src = chrome.runtime.getURL("grades/chart.js");
+        document.head.appendChild(script);

-      script.onload = () => {
-        setupGradesChart(gradesData.subjects);
-      };
+        script.onload = () => {
+          setupGradesChart(gradesData.subjects);
+        };
+      }

      setupEventListeners();
      setupGradesListScrolling();
@@ -390,12 +411,16 @@
    schoolNameFull = `${data.schoolInfo.id} - ${data.schoolInfo.name}`;
    shortenedSchoolName = helper.shortenSchoolName(schoolNameFull);

+    const showClassAverage = !gradesSettings.hideClassAverage && classAverage > 0;
+    const showChart = !gradesSettings.hideChart;
+
    return `
      <div class="kreta-container">
        ${await createTemplate.header()}

        <main class="kreta-main">
          <div class="grades-overview">
+            ${showChart ? `
            <div class="overall-averages card">
              <div class="chart-header">
                <div class="chart-title">${LanguageManager.t("grades.chart_title")} (${totalGrades}db)</div>
@@ -404,7 +429,7 @@
                    <span class="average-value ${studentAverage < 2 && studentAverage > 0 ? "warning" : ""}">${studentAverage > 0 ? studentAverage.toFixed(2) : "-"}</span>
                  </div>
                  ${
-                    classAverage > 0
+                    showClassAverage
                      ? `
                  <div class="average-circle class-average" data-grade="${classGradeLevel}">
                    <span class="average-value">${classAverage.toFixed(2)}</span>
@@ -430,6 +455,39 @@
                  .join("")}
              </div>
            </div>
+            ` : `
+            <div class="overall-averages card">
+              <div class="chart-header">
+                <div class="chart-title">${LanguageManager.t("grades.chart_title")} (${totalGrades}db)</div>
+                <div class="chart-averages">
+                  <div class="average-circle my-average" data-grade="${studentGradeLevel}">
+                    <span class="average-value ${studentAverage < 2 && studentAverage > 0 ? "warning" : ""}">${studentAverage > 0 ? studentAverage.toFixed(2) : "-"}</span>
+                  </div>
+                  ${
+                    showClassAverage
+                      ? `
+                  <div class="average-circle class-average" data-grade="${classGradeLevel}">
+                    <span class="average-value">${classAverage.toFixed(2)}</span>
+                  </div>
+                  `
+                      : ""
+                  }
+                </div>
+              </div>
+              <div class="grade-distribution centered">
+                ${Object.entries(gradeDistribution)
+                  .map(
+                    ([grade, count]) => `
+                    <div class="grade-count grade-${grade}">
+                      <span class="grade-value">${grade}</span>
+                      <span class="grade-amount">${count}</span>
+                    </div>
+                  `,
+                  )
+                  .join("")}
+              </div>
+            </div>
+            `}
            ${
              yearEndGrades.length > 0
                ? `
@@ -635,6 +693,7 @@
          .reverse();
        const myGrade = Math.floor(subject.average) || 0;
        const classGrade = Math.floor(subject.classAverage) || 0;
+        const showClassAvg = !gradesSettings.hideClassAverage && subject.classAverage > 0;

        return `
        <div class="subject-card card">
@@ -647,7 +706,7 @@
                <span class="average-value">${subject.average > 0 ? subject.average.toFixed(2) : "-"}</span>
              </div>
              ${
-                subject.classAverage > 0
+                showClassAvg
                  ? `
              <div class="average-circle class-average" data-grade="${classGrade}">
                <span class="average-value">${subject.classAverage.toFixed(2)}</span>
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -5,8 +5,47 @@
  },
  "settings": {
    "title": "Settings",
+    "appearance": "Appearance",
    "theme": "Theme",
    "language": "Language",
+    "tabs": {
+      "home": "Home",
+      "settings": "Settings",
+      "about": "About"
+    },
+    "page_settings": {
+      "title": "Page Settings",
+      "current_page": "Current page",
+      "no_settings": "No custom settings available for this page.",
+      "login": {
+        "hide_system_message": "Hide system message",
+        "hide_system_message_desc": "Hide the system message shown on the login page",
+        "hide_school_info": "Hide school name and ID",
+        "hide_school_info_desc": "The school name and KRÉTA ID will not be displayed"
+      },
+      "roleselect": {
+        "auto_redirect": "Auto redirect",
+        "auto_redirect_desc": "Automatically redirect to the gradebook",
+        "hide_school_info": "Hide school and name",
+        "hide_school_info_desc": "The school name and user name will not be displayed"
+      },
+      "bulletin": {
+        "hide_grades": "Hide grades",
+        "hide_grades_desc": "Hide the grades card",
+        "hide_absences": "Hide absences",
+        "hide_absences_desc": "Hide the absences card",
+        "hide_notes": "Hide notes",
+        "hide_notes_desc": "Hide the notes card",
+        "hide_exams": "Hide announced exams",
+        "hide_exams_desc": "Hide the announced exams card"
+      },
+      "grades": {
+        "hide_chart": "Hide chart",
+        "hide_chart_desc": "Hide the grades chart",
+        "hide_class_average": "Hide class average",
+        "hide_class_average_desc": "Hide class average values"
+      }
+    },
    "themes": {
      "light_green": "Light Green",
      "dark_green": "Dark Green",
@@ -309,6 +348,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",
--- a/i18n/hu.json
+++ b/i18n/hu.json
@@ -5,8 +5,47 @@
  },
  "settings": {
    "title": "Beállítások",
+    "appearance": "Megjelenés",
    "theme": "Téma",
    "language": "Nyelv",
+    "tabs": {
+      "home": "Főoldal",
+      "settings": "Beállítások",
+      "about": "Névjegy"
+    },
+    "page_settings": {
+      "title": "Oldal beállítások",
+      "current_page": "Aktuális oldal",
+      "no_settings": "Ehhez az oldalhoz nincsenek egyéni beállítások.",
+      "login": {
+        "hide_system_message": "Rendszerüzenet elrejtése",
+        "hide_system_message_desc": "A bejelentkezési oldalon megjelenő rendszerüzenet elrejtése",
+        "hide_school_info": "Iskola nevének és azonosítójának elrejtése",
+        "hide_school_info_desc": "Az iskola neve és KRÉTA azonosítója nem jelenik meg"
+      },
+      "roleselect": {
+        "auto_redirect": "Automatikus továbblépés",
+        "auto_redirect_desc": "Automatikusan átirányít az ellenőrzőkönyvre",
+        "hide_school_info": "Iskola és név elrejtése",
+        "hide_school_info_desc": "Az iskola neve és a felhasználó neve nem jelenik meg"
+      },
+      "bulletin": {
+        "hide_grades": "Értékelések elrejtése",
+        "hide_grades_desc": "Az értékeléseid kártya elrejtése",
+        "hide_absences": "Mulasztások elrejtése",
+        "hide_absences_desc": "A mulasztások kártya elrejtése",
+        "hide_notes": "Feljegyzések elrejtése",
+        "hide_notes_desc": "A feljegyzések kártya elrejtése",
+        "hide_exams": "Bejelentett dolgozatok elrejtése",
+        "hide_exams_desc": "A bejelentett dolgozatok kártya elrejtése"
+      },
+      "grades": {
+        "hide_chart": "Grafikon elrejtése",
+        "hide_chart_desc": "A jegyek grafikonjának elrejtése",
+        "hide_class_average": "Osztályátlag elrejtése",
+        "hide_class_average_desc": "Az osztályátlag értékek elrejtése"
+      }
+    },
    "themes": {
      "light_blue": "Világos Kék",
      "light_green": "Világos Zöld",
@@ -311,6 +350,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",
--- a/login/login.css
+++ b/login/login.css
@@ -54,7 +54,6 @@ body {
  flex-direction:column;
  align-items:center;
  gap:8px;
-  margin:16px 0;
  background:var(--card-card) !important;
  border-bottom:1px solid rgba(0,0,0,0) !important;
 }
@@ -66,6 +65,7 @@ body {
  font-style:normal;
  font-weight:700;
  line-height:normal;
+  margin-bottom: 12px;
 }
 .logo {
  width:48px;
--- a/login/login.js
+++ b/login/login.js
@@ -1,11 +1,21 @@
 async function transformLoginPage() {
  try {
+    while (
+      typeof window.LanguageManager === "undefined" ||
+      !window.LanguageManager.t("login.username_placeholder") ||
+      window.LanguageManager.t("login.username_placeholder") === "login.username_placeholder"
+    ) {
+      await new Promise((resolve) => setTimeout(resolve, 50));
+    }
+
    if (document.readyState !== "complete") {
      await new Promise((resolve) => {
        window.addEventListener("load", resolve);
      });
    }

+    const loginSettings = await loadLoginSettings();
+
    const existingForm = document.querySelector("form");
    const formData = {
      action: existingForm?.getAttribute("action") || "",
@@ -50,11 +60,11 @@ async function transformLoginPage() {
              <img src=${chrome.runtime.getURL("images/firka_logo.png")} alt="Firka" class="logo">
              Firka
            </p>
-            <h1 class="school-name">${schoolInfo.name}</h1>
+            ${!loginSettings.hideSchoolInfo ? `<h1 class="school-name">${schoolInfo.name}</h1>
            <div class="school-details">
              ${schoolInfo.kretaId ? `<div>${schoolInfo.kretaId}</div>` : ""}
              ${schoolInfo.omCode ? `<div>${LanguageManager.t("login.kreta_id")}: ${schoolInfo.omCode}</div>` : ""}
-            </div>
+            </div>` : ''}
          </div>

          <form class="login-form" method="post" action="${formData.action}" id="loginForm" novalidate>
@@ -93,7 +103,7 @@ async function transformLoginPage() {
        </div>

        ${
-          systemMessage
+          systemMessage && !loginSettings.hideSystemMessage
            ? `
          <div class="system-message">
            <h4>${LanguageManager.t("login.system_message")}</h4>
@@ -195,7 +205,35 @@ function handleSubmit(event) {
  form.submit();
 }

-if (window.location.href.includes("idp.e-kreta.hu/Account/Login")) {
-  transformLoginPage().catch((error) => {
-  });
+async function loadLoginSettings() {
+  try {
+    const settings = await storageManager.get("pageSettings_login", {});
+    return {
+      hideSystemMessage: settings.hideSystemMessage || false,
+      hideSchoolInfo: settings.hideSchoolInfo || false
+    };
+  } catch (error) {
+    console.error("Error loading login settings:", error);
+    return {
+      hideSystemMessage: false,
+      hideSchoolInfo: false
+    };
+  }
+}
+
+chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+  if (message.action === "pageSettingChanged" && message.pageType === "login") {
+    transformLoginPage();
+  }
+});
+
+if (window.location.href.includes("idp.e-kreta.hu/Account/Login")) {
+  (async () => {
+    while (typeof window.LanguageManager === "undefined") {
+      await new Promise((resolve) => setTimeout(resolve, 50));
+    }
+    transformLoginPage().catch((error) => {
+      console.error("Error transforming login page:", error);
+    });
+  })();
 }
--- a/manifest.json
+++ b/manifest.json
@@ -1,7 +1,7 @@
 {
  "manifest_version": 3,
  "name": "Firxa",
-  "version": "1.4.2",
+  "version": "1.4.4",
  "description": "KRÉTA webes verziójának újraírása",
  "icons": {
    "128": "images/firka_logo_128.png"
@@ -13,7 +13,8 @@
    }
  },
  "permissions": [
-    "storage"
+    "storage",
+    "tabs"
  ],
  "background": {
    "service_worker": "tools/background.js"
@@ -31,6 +32,7 @@
    {
      "resources": [
        "settings/*",
+        "setup/*",
        "global/language.js",
        "images/*",
        "fonts/*.woff2",
--- a/manifest_fox.json
+++ b/manifest_fox.json
@@ -1,7 +1,7 @@
 {
  "manifest_version": 3,
  "name": "Firxa",
-  "version": "1.4.2",
+  "version": "1.4.4",
  "description": "KRÉTA webes verziójának újraírása",
  "icons": {
    "128": "images/firka_logo_128.png"
@@ -13,7 +13,8 @@
    }
  },
  "permissions": [
-    "storage"
+    "storage",
+    "tabs"
  ],
  "background": {
    "service_worker": "tools/background.js",
--- a/roleselect/roleselect.js
+++ b/roleselect/roleselect.js
@@ -18,6 +18,25 @@
    return setInterval(updateTimer, 1000);
  };

+  async function loadRoleselectSettings() {
+    try {
+      const settings = await storageManager.get("pageSettings_roleselect", {
+        autoRedirect: false,
+        hideSchoolInfo: true
+      });
+      return {
+        autoRedirect: settings.autoRedirect || false,
+        hideSchoolInfo: settings.hideSchoolInfo !== undefined ? settings.hideSchoolInfo : true
+      };
+    } catch (error) {
+      console.error("Error loading roleselect settings:", error);
+      return {
+        autoRedirect: false,
+        hideSchoolInfo: true
+      };
+    }
+  }
+
  const handleRoleChange = async (role) => {
    try {
      const response = await fetch(
@@ -41,7 +60,7 @@
    }
  };

-  const createHTML = (schoolCode, fullSchoolName, userName) => `
+  const createHTML = (schoolCode, fullSchoolName, userName, settings) => `
    <div class="kreta-container">
      <header class="kreta-header">
        <div class="school-info">
@@ -49,15 +68,17 @@
            <img src=${chrome.runtime.getURL("images/firka_logo.png")} alt="Firka" class="logo">
            Firka
          </p>
-          <div class="school-details">
+          ${!settings.hideSchoolInfo ? `<div class="school-details">
            <span>${schoolCode || ""} - ${fullSchoolName || "Iskola"}</span>
-          </div>
+          </div>` : ''}
        </div>
        <div class="user-profile">
-          <div class="user-info">
+          ${!settings.hideSchoolInfo ? `<div class="user-info">
            <span class="user-name">${userName}</span>
            <span class="logout-timer" id="logoutTimer">5:00</span>
-          </div>
+          </div>` : `<div class="user-info">
+            <span class="logout-timer" id="logoutTimer">5:00</span>
+          </div>`}
        </div>
      </header>

@@ -108,6 +129,12 @@
          window.addEventListener("load", resolve),
        );
      }
+      const settings = await loadRoleselectSettings();
+
+      if (settings.autoRedirect) {
+        handleRoleChange("Ellenorzo");
+        return;
+      }

      const schoolNameEl = document.querySelector(".IntezmenyNev");
      const schoolName = schoolNameEl?.textContent.trim() || "Iskola neve";
@@ -133,6 +160,7 @@
        schoolCode,
        fullSchoolName,
        userName,
+        settings,
      ), 'text/html');
      const tempDiv = doc.body;
      while (tempDiv.firstChild) {
--- a/search/search.css
+++ b/search/search.css
@@ -57,10 +57,13 @@ body {
  align-items:center;
  gap:8px;
 }
-.logo {
+.logos {
  width:32px;
  height:32px;
 }
+.logo {
+  display: none !important;
+}
 .search-title {
  color:var(--text-primary);
  text-align:center;
--- a/search/search.js
+++ b/search/search.js
@@ -47,7 +47,7 @@ async function applyFirkaStyling() {
    const logoImg = document.createElement('img');
    logoImg.src = chrome.runtime.getURL('images/firka_logo.png');
    logoImg.alt = 'Firka';
-    logoImg.className = 'logo';
+    logoImg.className = 'logos';
    
    logoText.appendChild(logoImg);
    logoText.appendChild(document.createTextNode('Firka'));
--- a/settings/index.css
+++ b/settings/index.css
@@ -24,7 +24,7 @@ body {
 }
 .popup-header {
  text-align:center;
-  margin-bottom:16px;
+  margin-bottom:12px;
 }
 .logo-text {
  color:var(--text-primary);
@@ -40,6 +40,58 @@ body {
  border-radius:6px;
  margin-right:8px;
 }
+
+.tab-navigation {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 16px;
+  padding: 4px;
+  background: var(--card-card);
+  border-radius: 12px;
+  box-shadow: 0px 1px var(--shadow-blur) 0px var(--accent-shadow);
+}
+
+.tab-button {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 10px 12px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--text-secondary);
+  font-family: "Montserrat", serif;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.tab-button:hover {
+  background: var(--accent-15);
+  color: var(--text-primary);
+}
+
+.tab-button.active {
+  background: var(--accent-accent);
+  color: #000;
+}
+
+.tab-button .material-icons-round {
+  font-size: 16px;
+}
+
+.tab-content {
+  display: none;
+}
+
+.tab-content.active {
+  display: block;
+  animation: fadeIn 0.2s ease;
+}
+
 .settings-card,.about-card,.support-card {
  background:var(--card-card);
  border-radius:16px;
@@ -122,14 +174,13 @@ h2 {
  border-radius:8px;
 }
 .language-option {
-  background:var(--card-card);
+  background:var(--button-secondaryFill);
  border:1px solid var(--border-border);
  border-radius:8px;
  padding:12px;
  transition:all 0.2s ease;
 }
 .language-option:hover {
-  background:var(--card-hover);
  border-color:var(--accent-accent);
 }
 .language-option.active {
@@ -748,3 +799,148 @@ h2 {
 #importCode {
  margin-top: 8px;
 }
+
+.page-settings-info {
+  margin-bottom: 16px;
+}
+
+.current-page-indicator {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px;
+  background: var(--button-secondaryFill);
+  border-radius: 10px;
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
+.current-page-indicator .material-icons-round {
+  color: var(--accent-accent);
+}
+
+.page-badge {
+  margin-left: auto;
+  padding: 4px 10px;
+  background: var(--accent-15);
+  color: var(--accent-accent);
+  border-radius: 6px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: capitalize;
+}
+
+.page-specific-settings {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.no-settings-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 32px 16px;
+  text-align: center;
+  color: var(--text-secondary);
+}
+
+.no-settings-placeholder .material-icons-round {
+  font-size: 48px;
+  margin-bottom: 12px;
+  opacity: 0.5;
+}
+
+.no-settings-placeholder p {
+  font-size: 13px;
+  margin: 0;
+}
+
+.setting-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px;
+  background: var(--button-secondaryFill);
+  border-radius: 10px;
+  gap: 12px;
+}
+
+.setting-item-info {
+  flex: 1;
+}
+
+.setting-item-label {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-primary);
+  margin-bottom: 4px;
+}
+
+.setting-item-description {
+  font-size: 11px;
+  color: var(--text-secondary);
+}
+
+.toggle-switch {
+  position: relative;
+  width: 44px;
+  height: 24px;
+  flex-shrink: 0;
+}
+
+.toggle-switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.toggle-slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--text-teritary);
+  border-radius: 24px;
+  transition: 0.3s;
+}
+
+.toggle-slider:before {
+  position: absolute;
+  content: "";
+  height: 18px;
+  width: 18px;
+  left: 3px;
+  bottom: 3px;
+  background: white;
+  border-radius: 50%;
+  transition: 0.3s;
+}
+
+.toggle-switch input:checked + .toggle-slider {
+  background: var(--accent-accent);
+}
+
+.toggle-switch input:checked + .toggle-slider:before {
+  transform: translateX(20px);
+}
+
+.setting-select {
+  padding: 8px 12px;
+  border: 1px solid var(--border-border, var(--text-teritary));
+  border-radius: 8px;
+  background: var(--button-secondaryFill);
+  color: var(--text-primary);
+  font-family: "Montserrat", serif;
+  font-size: 12px;
+  cursor: pointer;
+  outline: none;
+  min-width: 100px;
+}
+
+.setting-select:focus {
+  border-color: var(--accent-accent);
+}
--- a/settings/index.html
+++ b/settings/index.html
@@ -22,106 +22,143 @@
      </p>
    </header>

-    <div class="settings-card">
-      <h2 data-i18n="settings.title">Beállítások</h2>
-      <div class="settings-group">
-        <div class="setting-section">
-          <div class="setting-header">
-            <span class="material-icons-round">palette</span>
-            <span data-i18n="settings.theme">Téma</span>
-          </div>
-          <div class="theme-grid">
-            <button class="theme-option" data-theme="light-green">
-              <div class="theme-preview light-green">
-                <div class="preview-header"></div>
-                <div class="preview-content">
-                  <div class="preview-card"></div>
-                </div>
-              </div>
-              <span class="theme-name" data-i18n="settings.themes.light_green">Világos Zöld</span>
-            </button>
+    <div class="tab-navigation">
+      <button class="tab-button active" data-tab="home">
+        <span class="material-icons-round">home</span>
+        <span data-i18n="settings.tabs.home">Főoldal</span>
+      </button>
+      <button class="tab-button" data-tab="settings">
+        <span class="material-icons-round">tune</span>
+        <span data-i18n="settings.tabs.settings">Beállítások</span>
+      </button>
+      <button class="tab-button" data-tab="about">
+        <span class="material-icons-round">info</span>
+        <span data-i18n="settings.tabs.about">Névjegy</span>
+      </button>
+    </div>

-            <button class="theme-option" data-theme="dark-green">
-              <div class="theme-preview dark-green">
-                <div class="preview-header"></div>
-                <div class="preview-content">
-                  <div class="preview-card"></div>
+    <div class="tab-content active" id="tab-home">
+      <div class="settings-card">
+        <h2 data-i18n="settings.appearance">Megjelenés</h2>
+        <div class="settings-group">
+          <div class="setting-section">
+            <div class="setting-header">
+              <span class="material-icons-round">palette</span>
+              <span data-i18n="settings.theme">Téma</span>
+            </div>
+            <div class="theme-grid">
+              <button class="theme-option" data-theme="light-green">
+                <div class="theme-preview light-green">
+                  <div class="preview-header"></div>
+                  <div class="preview-content">
+                    <div class="preview-card"></div>
+                  </div>
+                </div>
+                <span class="theme-name" data-i18n="settings.themes.light_green">Világos Zöld</span>
+              </button>
+
+              <button class="theme-option" data-theme="dark-green">
+                <div class="theme-preview dark-green">
+                  <div class="preview-header"></div>
+                  <div class="preview-content">
+                    <div class="preview-card"></div>
+                  </div>
+                </div>
+                <span class="theme-name" data-i18n="settings.themes.dark_green">Sötét Zöld</span>
+              </button>
+            </div>
+            
+            <div class="custom-themes-section">
+              <div class="custom-themes-header">
+                <span data-i18n="settings.custom_themes.title">Egyéni témák</span>
+                <div class="custom-themes-buttons">
+                  <button class="theme-btn" id="addCustomTheme" title="Új téma">
+                    <span class="material-icons-round">add</span>
+                  </button>
+                  <button class="theme-btn" id="importCustomTheme" title="Téma importálása">
+                    <span class="material-icons-round">download</span>
+                  </button>
                </div>
              </div>
-              <span class="theme-name" data-i18n="settings.themes.dark_green">Sötét Zöld</span>
-            </button>
-          </div>
-          
-          <div class="custom-themes-section">
-            <div class="custom-themes-header">
-              <span data-i18n="settings.custom_themes.title">Egyéni témák</span>
-              <div class="custom-themes-buttons">
-                <button class="theme-btn" id="addCustomTheme" title="Új téma">
-                  <span class="material-icons-round">add</span>
-                </button>
-                <button class="theme-btn" id="importCustomTheme" title="Téma importálása">
-                  <span class="material-icons-round">download</span>
-                </button>
+              <div class="theme-grid custom-themes-grid" id="customThemesGrid">
              </div>
            </div>
-            <div class="theme-grid custom-themes-grid" id="customThemesGrid">
+          </div>
+          <div class="setting-section">
+            <div class="setting-header">
+              <span class="material-icons-round">language</span>
+              <span data-i18n="settings.language">Nyelv</span>
+            </div>
+            <div class="language-grid">
+              <button class="language-option" data-language="hu">
+                <span class="language-name" data-i18n="settings.languages.hu">Magyar</span>
+              </button>
+              <button class="language-option" data-language="en">
+                <span class="language-name" data-i18n="settings.languages.en">English</span>
+              </button>
            </div>
          </div>
        </div>
-        <div class="setting-section">
-          <div class="setting-header">
-            <span class="material-icons-round">language</span>
-            <span data-i18n="settings.language">Nyelv</span>
+      </div>
+    </div>
+
+    <div class="tab-content" id="tab-settings">
+      <div class="settings-card">
+        <h2 data-i18n="settings.page_settings.title">Oldal beállítások</h2>
+        <div class="page-settings-info">
+          <div class="current-page-indicator">
+            <span class="material-icons-round">web</span>
+            <span id="currentPageName" data-i18n="settings.page_settings.current_page">Aktuális oldal</span>
+            <span id="currentPageValue" class="page-badge">-</span>
          </div>
-          <div class="language-grid">
-            <button class="language-option" data-language="hu">
-              <span class="language-name" data-i18n="settings.languages.hu">Magyar</span>
-            </button>
-            <button class="language-option" data-language="en">
-              <span class="language-name" data-i18n="settings.languages.en">English</span>
-            </button>
+        </div>
+        <div id="pageSpecificSettings" class="page-specific-settings">
+          <div class="no-settings-placeholder">
+            <span class="material-icons-round">settings_suggest</span>
+            <p data-i18n="settings.page_settings.no_settings">Ehhez az oldalhoz nincsenek egyéni beállítások.</p>
          </div>
        </div>
      </div>
    </div>

-    <div class="about-card">
-      <h2 data-i18n="settings.about.title">Névjegy</h2>
-      <div class="about-content">
-        <p data-i18n="settings.about.description">A Firka egy nyílt forráskódú projekt, amely a KRÉTA rendszerhez készít saját felhasználói felületet.</p>
-        <div class="about-links">
-          <a href="https://firka.app" target="_blank" class="about-link">
-            <span class="material-icons-round">language</span>
-            <span>Weboldal</span>
-          </a>
-          <a href="https://github.com/QwIT-Development/" target="_blank" class="about-link">
-            <span class="material-icons-round">code</span>
-            <span data-i18n="settings.about.github">GitHub</span>
-          </a>
-          <a href="https://discord.gg/firka-1111649116020285532" target="_blank" class="about-link">
-            <span class="material-icons-round">forum</span>
-            <span>Discord</span>
-          </a>
+    <div class="tab-content" id="tab-about">
+      <div class="about-card">
+        <h2 data-i18n="settings.about.title">Névjegy</h2>
+        <div class="about-content">
+          <p data-i18n="settings.about.description">A Firka egy nyílt forráskódú projekt, amely a KRÉTA rendszerhez készít saját felhasználói felületet.</p>
+          <div class="about-links">
+            <a href="https://firka.app" target="_blank" class="about-link">
+              <span class="material-icons-round">language</span>
+              <span>Weboldal</span>
+            </a>
+            <a href="https://github.com/QwIT-Development/" target="_blank" class="about-link">
+              <span class="material-icons-round">code</span>
+              <span data-i18n="settings.about.github">GitHub</span>
+            </a>
+            <a href="https://discord.gg/firka-1111649116020285532" target="_blank" class="about-link">
+              <span class="material-icons-round">forum</span>
+              <span>Discord</span>
+            </a>
+          </div>
        </div>
      </div>
-    </div>

-    <div class="support-card">
-      <h2 data-i18n="settings.support.title">Támogatás</h2>
-      <div class="support-content">
-        <p data-i18n="settings.support.description">Ha tetszik a munkánk és szeretnéd támogatni a fejlesztést, az alábbi módon teheted meg:</p>
-        <div class="support-buttons">
-          <a href="https://ko-fi.com/zan1456" target="_blank" class="support-button">
-            <span class="material-icons-round">coffee</span>
-            <span data-i18n="settings.support.kofi">Ko-Fi</span>
-          </a>
+      <div class="support-card">
+        <h2 data-i18n="settings.support.title">Támogatás</h2>
+        <div class="support-content">
+          <p data-i18n="settings.support.description">Ha tetszik a munkánk és szeretnéd támogatni a fejlesztést, az alábbi módon teheted meg:</p>
+          <div class="support-buttons">
+            <a href="https://ko-fi.com/zan1456" target="_blank" class="support-button">
+              <span class="material-icons-round">coffee</span>
+              <span data-i18n="settings.support.kofi">Ko-Fi</span>
+            </a>
+          </div>
        </div>
      </div>
+
+      <div class="version-info" id="version">v1.4.0</div>
    </div>

-    <footer class="popup-footer">
-      <div class="version-info" id="version">v1.3.0</div>
-    </footer>
  </div>

  <div class="modal-overlay" id="themeEditorModal">
--- a/settings/index.js
+++ b/settings/index.js
@@ -5,6 +5,338 @@ document.addEventListener("DOMContentLoaded", async () => {

  let customThemes = [];
  let editingThemeId = null;
+  let currentPageType = null;
+
+  async function initTabs() {
+    const tabButtons = document.querySelectorAll(".tab-button");
+    const tabContents = document.querySelectorAll(".tab-content");
+
+    const lastTab = localStorage.getItem("settingsLastTab") || "home";
+    switchTab(lastTab);
+    
+    tabButtons.forEach(button => {
+      button.addEventListener("click", () => {
+        const tabId = button.dataset.tab;
+        switchTab(tabId);
+        localStorage.setItem("settingsLastTab", tabId);
+      });
+    });
+  }
+
+  function switchTab(tabId) {
+    const tabButtons = document.querySelectorAll(".tab-button");
+    const tabContents = document.querySelectorAll(".tab-content");
+    
+    tabButtons.forEach(btn => {
+      btn.classList.toggle("active", btn.dataset.tab === tabId);
+    });
+    
+    tabContents.forEach(content => {
+      content.classList.toggle("active", content.id === `tab-${tabId}`);
+    });
+
+    if (tabId === "settings") {
+      detectCurrentPage();
+    }
+  }
+
+  async function detectCurrentPage() {
+    try {
+      const tabs = await chrome.tabs.query({ active: true, currentWindow: true });
+      if (tabs.length > 0) {
+        const url = tabs[0].url || "";
+        currentPageType = getPageTypeFromUrl(url);
+        updateCurrentPageIndicator(currentPageType);
+        await loadPageSpecificSettings(currentPageType);
+      }
+    } catch (error) {
+      console.error("Error detecting current page:", error);
+      currentPageType = "unknown";
+      updateCurrentPageIndicator(currentPageType);
+      await loadPageSpecificSettings(currentPageType);
+    }
+  }
+
+  function getPageTypeFromUrl(url) {
+    if (url.includes("/Orarend/InformaciokOrarend")) return "timetable";
+    if (url.includes("/TanuloErtekeles/Osztalyzatok")) return "grades";
+    if (url.includes("/Hianyzas/Hianyzasok")) return "absences";
+    if (url.includes("/uzenetek")) return "messages";
+    if (url.includes("/Adminisztracio/Profil")) return "profile";
+    if (url.includes("intezmenykereso.e-kreta.hu/")) return "search";
+    if (url.includes("/Intezmeny/Faliujsag")) return "dashboard";
+    if (url.includes("/Adminisztracio/BelepesKezelo")) return "roleselect";
+    if (url.includes("/ElfelejtettJelszo")) return "forgotpassword";
+    if (url.includes("idp.e-kreta.hu/Account/Login")) return "login";
+    if (url.includes("/Login") || url.includes("/Belepes")) return "login";
+    return "unknown";
+  }
+
+  function getPageDisplayName(pageType) {
+    const pageNames = {
+      "timetable": "Órarend",
+      "grades": "Jegyek",
+      "absences": "Mulasztások",
+      "messages": "Üzenetek",
+      "profile": "Profil",
+      "search": "Intézménykereső",
+      "dashboard": "Faliújság",
+      "roleselect": "Szerepkörválasztó",
+      "login": "Bejelentkezés",
+      "forgotpassword": "Elfelejtett jelszó",
+      "unknown": "Ismeretlen"
+    };
+    return pageNames[pageType] || pageType;
+  }
+
+  function updateCurrentPageIndicator(pageType) {
+    const pageValueEl = document.getElementById("currentPageValue");
+    if (pageValueEl) {
+      pageValueEl.textContent = getPageDisplayName(pageType);
+    }
+  }
+
+  async function getLoginPageSettings() {
+    const settingsKey = "pageSettings_login";
+    const savedSettings = await storageManager.get(settingsKey, {});
+    
+    return [
+      {
+        key: "hideSystemMessage",
+        type: "toggle",
+        label: "Rendszerüzenet elrejtése",
+        labelKey: "settings.page_settings.login.hide_system_message",
+        description: "A bejelentkezési oldalon megjelenő rendszerüzenet elrejtése",
+        descriptionKey: "settings.page_settings.login.hide_system_message_desc",
+        value: savedSettings.hideSystemMessage || false
+      },
+      {
+        key: "hideSchoolInfo",
+        type: "toggle",
+        label: "Iskola nevének és azonosítójának elrejtése",
+        labelKey: "settings.page_settings.login.hide_school_info",
+        description: "Az iskola neve és KRÉTA azonosítója nem jelenik meg",
+        descriptionKey: "settings.page_settings.login.hide_school_info_desc",
+        value: savedSettings.hideSchoolInfo || false
+      }
+    ];
+  }
+
+  async function getRoleselectPageSettings() {
+    const settingsKey = "pageSettings_roleselect";
+    const savedSettings = await storageManager.get(settingsKey, {
+      autoRedirect: false,
+      hideSchoolInfo: true
+    });
+    
+    return [
+      {
+        key: "autoRedirect",
+        type: "toggle",
+        label: "Automatikus továbblépés",
+        labelKey: "settings.page_settings.roleselect.auto_redirect",
+        description: "Automatikusan átirányít az ellenőrzőkönyvre",
+        descriptionKey: "settings.page_settings.roleselect.auto_redirect_desc",
+        value: savedSettings.autoRedirect || false
+      },
+      {
+        key: "hideSchoolInfo",
+        type: "toggle",
+        label: "Iskola és név elrejtése",
+        labelKey: "settings.page_settings.roleselect.hide_school_info",
+        description: "Az iskola neve és a felhasználó neve nem jelenik meg",
+        descriptionKey: "settings.page_settings.roleselect.hide_school_info_desc",
+        value: savedSettings.hideSchoolInfo !== undefined ? savedSettings.hideSchoolInfo : true
+      }
+    ];
+  }
+
+  async function getBulletinPageSettings() {
+    const settingsKey = "pageSettings_bulletin";
+    const savedSettings = await storageManager.get(settingsKey, {});
+    
+    return [
+      {
+        key: "hideGrades",
+        type: "toggle",
+        label: "Értékelések elrejtése",
+        labelKey: "settings.page_settings.bulletin.hide_grades",
+        description: "Az értékeléseid kártya elrejtése",
+        descriptionKey: "settings.page_settings.bulletin.hide_grades_desc",
+        value: savedSettings.hideGrades || false
+      },
+      {
+        key: "hideAbsences",
+        type: "toggle",
+        label: "Mulasztások elrejtése",
+        labelKey: "settings.page_settings.bulletin.hide_absences",
+        description: "A mulasztások kártya elrejtése",
+        descriptionKey: "settings.page_settings.bulletin.hide_absences_desc",
+        value: savedSettings.hideAbsences || false
+      },
+      {
+        key: "hideNotes",
+        type: "toggle",
+        label: "Feljegyzések elrejtése",
+        labelKey: "settings.page_settings.bulletin.hide_notes",
+        description: "A feljegyzések kártya elrejtése",
+        descriptionKey: "settings.page_settings.bulletin.hide_notes_desc",
+        value: savedSettings.hideNotes || false
+      },
+      {
+        key: "hideExams",
+        type: "toggle",
+        label: "Bejelentett dolgozatok elrejtése",
+        labelKey: "settings.page_settings.bulletin.hide_exams",
+        description: "A bejelentett dolgozatok kártya elrejtése",
+        descriptionKey: "settings.page_settings.bulletin.hide_exams_desc",
+        value: savedSettings.hideExams || false
+      }
+    ];
+  }
+
+  async function getGradesPageSettings() {
+    const settingsKey = "pageSettings_grades";
+    const savedSettings = await storageManager.get(settingsKey, {});
+    
+    return [
+      {
+        key: "hideChart",
+        type: "toggle",
+        label: "Grafikon elrejtése",
+        labelKey: "settings.page_settings.grades.hide_chart",
+        description: "A jegyek grafikonjának elrejtése",
+        descriptionKey: "settings.page_settings.grades.hide_chart_desc",
+        value: savedSettings.hideChart || false
+      },
+      {
+        key: "hideClassAverage",
+        type: "toggle",
+        label: "Osztályátlag elrejtése",
+        labelKey: "settings.page_settings.grades.hide_class_average",
+        description: "Az osztályátlag értékek elrejtése",
+        descriptionKey: "settings.page_settings.grades.hide_class_average_desc",
+        value: savedSettings.hideClassAverage || false
+      }
+    ];
+  }
+
+  async function loadPageSpecificSettings(pageType) {
+    const container = document.getElementById("pageSpecificSettings");
+    if (!container) return;
+
+    const pageSettings = {
+      "timetable": [],
+      "grades": await getGradesPageSettings(),
+      "absences": [],
+      "messages": [],
+      "profile": [],
+      "search": [],
+      "dashboard": await getBulletinPageSettings(),
+      "roleselect": await getRoleselectPageSettings(),
+      "login": await getLoginPageSettings(),
+      "forgotpassword": [],
+      "unknown": []
+    };
+
+    const settings = pageSettings[pageType] || [];
+
+    if (settings.length === 0) {
+      container.innerHTML = `
+        <div class="no-settings-placeholder">
+          <span class="material-icons-round">settings_suggest</span>
+          <p data-i18n="settings.page_settings.no_settings">Ehhez az oldalhoz nincsenek egyéni beállítások.</p>
+        </div>
+      `;
+      if (window.LanguageManager) {
+        window.LanguageManager.loadTranslationsForPage();
+      }
+      return;
+    }
+
+    container.innerHTML = settings.map(setting => renderSettingItem(setting)).join("");
+    initSettingItems(container);
+    
+    if (window.LanguageManager) {
+      window.LanguageManager.loadTranslationsForPage();
+    }
+  }
+
+  function renderSettingItem(setting) {
+    let control = "";
+    
+    switch (setting.type) {
+      case "toggle":
+        control = `
+          <label class="toggle-switch">
+            <input type="checkbox" data-setting="${setting.key}" ${setting.value ? "checked" : ""}>
+            <span class="toggle-slider"></span>
+          </label>
+        `;
+        break;
+      case "select":
+        control = `
+          <select class="setting-select" data-setting="${setting.key}">
+            ${setting.options.map(opt => 
+              `<option value="${opt.value}" ${opt.value === setting.value ? "selected" : ""}>${opt.label}</option>`
+            ).join("")}
+          </select>
+        `;
+        break;
+      default:
+        control = "";
+    }
+
+    return `
+      <div class="setting-item" data-setting-key="${setting.key}">
+        <div class="setting-item-info">
+          <div class="setting-item-label" data-i18n="${setting.labelKey || ""}">${setting.label}</div>
+          ${setting.description ? `<div class="setting-item-description" data-i18n="${setting.descriptionKey || ""}">${setting.description}</div>` : ""}
+        </div>
+        ${control}
+      </div>
+    `;
+  }
+
+  function initSettingItems(container) {
+    container.querySelectorAll('input[type="checkbox"]').forEach(input => {
+      input.addEventListener("change", async () => {
+        const key = input.dataset.setting;
+        await savePageSetting(currentPageType, key, input.checked);
+      });
+    });
+
+    container.querySelectorAll(".setting-select").forEach(select => {
+      select.addEventListener("change", async () => {
+        const key = select.dataset.setting;
+        await savePageSetting(currentPageType, key, select.value);
+      });
+    });
+  }
+
+  async function savePageSetting(pageType, key, value) {
+    try {
+      const storagePageType = pageType === "dashboard" ? "bulletin" : pageType;
+      const settingsKey = `pageSettings_${storagePageType}`;
+      const existingSettings = await storageManager.get(settingsKey, {});
+      existingSettings[key] = value;
+      await storageManager.set(settingsKey, existingSettings);
+
+      const tabs = await chrome.tabs.query({});
+      tabs.forEach((tab) => {
+        chrome.tabs
+          .sendMessage(tab.id, {
+            action: "pageSettingChanged",
+            pageType: storagePageType,
+            key: key,
+            value: value,
+          })
+          .catch(() => {});
+      });
+    } catch (error) {
+      console.error("Error saving page setting:", error);
+    }
+  }

  async function loadCustomThemes() {
    try {
@@ -603,4 +935,6 @@ document.addEventListener("DOMContentLoaded", async () => {
  window.addEventListener("languageChanged", (event) => {
    updateLanguageButtons(event.detail.language);
  });
+
+  await initTabs();
 });
--- a/setup/setup.css
+++ 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;
+  }
+}
--- a/setup/setup.html
+++ b/setup/setup.html
@@ -0,0 +1,159 @@
+<!DOCTYPE html>
+<html lang="hu">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Firxa - Kezdeti beállítások</title>
+  <link rel="icon" type="image/png" href="../images/firka_logo_128.png">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
+  <link rel="stylesheet" href="setup.css">
+  <link rel="stylesheet" href="../global/theme.css">
+</head>
+<body>
+  <div class="setup-container">
+    <div class="setup-card">
+      <div class="setup-header">
+        <img src="../images/firka_logo.png" alt="Firka" class="setup-logo">
+        <h1 class="setup-title">Üdvözöl a Firxa!</h1>
+        <p class="setup-subtitle" data-i18n="setup.welcome">Állítsd be a bővítményt néhány egyszerű lépésben</p>
+      </div>
+
+      <div class="progress-bar">
+        <div class="progress-step active" data-step="1">
+          <div class="progress-circle">1</div>
+          <span class="progress-label" data-i18n="setup.steps.theme">Téma</span>
+        </div>
+        <div class="progress-line"></div>
+        <div class="progress-step" data-step="2">
+          <div class="progress-circle">2</div>
+          <span class="progress-label" data-i18n="setup.steps.language">Nyelv</span>
+        </div>
+        <div class="progress-line"></div>
+        <div class="progress-step" data-step="3">
+          <div class="progress-circle">3</div>
+          <span class="progress-label" data-i18n="setup.steps.finish">Kész</span>
+        </div>
+      </div>
+
+      <div class="setup-content">
+        <div class="setup-step active" data-step="1">
+          <div class="step-icon">
+            <span class="material-icons-round">palette</span>
+          </div>
+          <h2 class="step-title" data-i18n="setup.theme.title">Válassz témát</h2>
+          <p class="step-description" data-i18n="setup.theme.description">Válaszd ki a számodra legmegfelelőbb megjelenést</p>
+
+          <div class="theme-options">
+            <button class="theme-card" data-theme="light-green">
+              <div class="theme-preview light-green">
+                <div class="preview-header"></div>
+                <div class="preview-content">
+                  <div class="preview-card"></div>
+                </div>
+              </div>
+              <span class="theme-name" data-i18n="settings.themes.light_green">Világos Zöld</span>
+              <span class="theme-icon material-icons-round">light_mode</span>
+            </button>
+
+            <button class="theme-card" data-theme="dark-green">
+              <div class="theme-preview dark-green">
+                <div class="preview-header"></div>
+                <div class="preview-content">
+                  <div class="preview-card"></div>
+                </div>
+              </div>
+              <span class="theme-name" data-i18n="settings.themes.dark_green">Sötét Zöld</span>
+              <span class="theme-icon material-icons-round">dark_mode</span>
+            </button>
+          </div>
+        </div>
+
+        <div class="setup-step" data-step="2">
+          <div class="step-icon">
+            <span class="material-icons-round">language</span>
+          </div>
+          <h2 class="step-title" data-i18n="setup.language.title">Válassz nyelvet</h2>
+          <p class="step-description" data-i18n="setup.language.description">Válaszd ki a használni kívánt nyelvet</p>
+
+          <div class="language-options">
+            <button class="language-card" data-language="hu">
+              <span class="language-flag">🇭🇺</span>
+              <span class="language-name" data-i18n="settings.languages.hu">Magyar</span>
+            </button>
+
+            <button class="language-card" data-language="en">
+              <span class="language-flag">🇬🇧</span>
+              <span class="language-name" data-i18n="settings.languages.en">English</span>
+            </button>
+          </div>
+        </div>
+
+        <div class="setup-step" data-step="3">
+          <div class="step-icon success">
+            <span class="material-icons-round">check_circle</span>
+          </div>
+          <h2 class="step-title" data-i18n="setup.finish.title">Minden kész!</h2>
+          <p class="step-description" data-i18n="setup.finish.description">A beállítások sikeresen mentve. Indulhat a tanulás!</p>
+
+          <div class="finish-links">
+            <a href="https://firka.app" target="_blank" class="finish-link">
+              <span class="material-icons-round">info</span>
+              <div class="link-content">
+                <span class="link-title" data-i18n="setup.finish.about">Weboldal</span>
+                <span class="link-description" data-i18n="setup.finish.about_desc">Tudj meg többet a projektről</span>
+              </div>
+            </a>
+
+            <a href="https://ko-fi.com/zan1456" target="_blank" class="finish-link">
+              <span class="material-icons-round">favorite</span>
+              <div class="link-content">
+                <span class="link-title" data-i18n="setup.finish.support">Támogatás</span>
+                <span class="link-description" data-i18n="setup.finish.support_desc">Támogasd a fejlesztést</span>
+              </div>
+            </a>
+
+            <a href="https://github.com/QwIT-Development/" target="_blank" class="finish-link">
+              <span class="material-icons-round">code</span>
+              <div class="link-content">
+                <span class="link-title" data-i18n="setup.finish.github">GitHub</span>
+                <span class="link-description" data-i18n="setup.finish.github_desc">Nézd meg a forráskódot</span>
+              </div>
+            </a>
+
+            <a href="https://discord.gg/firka-1111649116020285532" target="_blank" class="finish-link">
+              <span class="material-icons-round">forum</span>
+              <div class="link-content">
+                <span class="link-title" data-i18n="setup.finish.discord">Discord</span>
+                <span class="link-description" data-i18n="setup.finish.discord_desc">Csatlakozz a közösséghez</span>
+              </div>
+            </a>
+          </div>
+        </div>
+      </div>
+
+      <div class="setup-actions">
+        <button class="btn-secondary" id="backBtn" style="display: none;">
+          <span class="material-icons-round">arrow_back</span>
+          <span data-i18n="common.back">Vissza</span>
+        </button>
+        <div class="actions-spacer"></div>
+        <button class="btn-primary" id="nextBtn">
+          <span data-i18n="common.next">Tovább</span>
+          <span class="material-icons-round">arrow_forward</span>
+        </button>
+        <button class="btn-primary" id="finishBtn" style="display: none;">
+          <span data-i18n="setup.finish.start">Kezdés</span>
+          <span class="material-icons-round">check</span>
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <script src="../tools/storageManager.js"></script>
+  <script src="../global/language.js"></script>
+  <script src="setup.js"></script>
+</body>
+</html>
--- a/setup/setup.js
+++ 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/';
+}
--- 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 {
Author	SHA1	Message	Date
Zan	0dbb3402a8	Page settings	2025-12-08 14:19:36 +01:00
Zan	64c54171cb	setup page	2025-12-08 13:13:50 +01:00
Zan	3d399ee8be	logo fix	2025-12-08 13:13:42 +01:00
Zan	431103d2ff	login text fix	2025-12-08 13:07:09 +01:00