diff --git a/src/main/java/org/to/telegramfinalproject/UI/TelegramFeaturesController.java b/src/main/java/org/to/telegramfinalproject/UI/TelegramFeaturesController.java
new file mode 100644
index 0000000..a3d4c1c
--- /dev/null
+++ b/src/main/java/org/to/telegramfinalproject/UI/TelegramFeaturesController.java
@@ -0,0 +1,42 @@
+package org.to.telegramfinalproject.UI;
+
+import javafx.application.Platform;
+import javafx.fxml.FXML;
+import javafx.scene.control.ScrollPane;
+import javafx.scene.input.MouseEvent;
+import javafx.scene.layout.BorderPane;
+import javafx.scene.layout.Pane;
+import javafx.scene.layout.StackPane;
+
+public class TelegramFeaturesController {
+
+ @FXML private Pane overlayBackground;
+ @FXML private ScrollPane featureScroll;
+ @FXML private StackPane rootOverlay;
+ @FXML private BorderPane contentCard;
+
+ @FXML
+ public void initialize() {
+ // Clicking background closes overlay
+ overlayBackground.setOnMouseClicked( e -> {
+ MainController.getInstance().closeOverlay(rootOverlay);
+ });
+
+ // Smooth scroll feel
+ featureScroll.getStylesheets().add(getClass().getResource("/org/to/telegramfinalproject/CSS/scrollpane.css").toExternalForm());
+ featureScroll.setPannable(true);
+ featureScroll.setFitToWidth(true);
+ featureScroll.setFitToHeight(false);
+ featureScroll.getContent().setOnScroll(event -> {
+ double deltaY = event.getDeltaY() * 0.003;
+ featureScroll.setVvalue(featureScroll.getVvalue() - deltaY);
+ });
+
+ // Register scene for ThemeManager → stylesheet swap will handle colors/icons
+ Platform.runLater(() -> {
+ if (contentCard.getScene() != null) {
+ ThemeManager.getInstance().registerScene(contentCard.getScene());
+ }
+ });
+ }
+}
diff --git a/src/main/resources/org/to/telegramfinalproject/CSS/dark_theme.css b/src/main/resources/org/to/telegramfinalproject/CSS/dark_theme.css
index f22e7e8..a1fa9df 100644
--- a/src/main/resources/org/to/telegramfinalproject/CSS/dark_theme.css
+++ b/src/main/resources/org/to/telegramfinalproject/CSS/dark_theme.css
@@ -1284,17 +1284,83 @@
.link-btn:hover {
-fx-underline: true;
}
-/* ===== Dark theme overrides ===== */
-.root.dark .tf-title { -fx-text-fill: #f3f4f6; }
-.root.dark .tf-caption { -fx-text-fill: #b8bdc7; }
-.root.dark .tf-item-desc { -fx-text-fill: #9ca3af; }
-/* TitledPane header/content */
-.root.dark .titled-pane > .title {
- -fx-background-color: #2b2f33;
- -fx-text-fill: #f3f4f6;
-}
-.root.dark .titled-pane > *.content {
- -fx-background-color: #1f2327;
+.overlay-background {
+ -fx-background-color: rgba(0,0,0,0.4);
}
+.tf-root {
+ -fx-background-color: #1f2a36;
+ -fx-background-radius: 10;
+ -fx-padding: 16;
+ -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.5), 10, 0, 0, 4);
+}
+
+.tf-toolbar {
+ -fx-padding: 8 12 8 12;
+}
+
+.tf-title {
+ -fx-font-size: 18px;
+ -fx-font-weight: bold;
+ -fx-text-fill: #229ED9; /* Telegram blue */
+}
+
+.tf-caption {
+ -fx-font-size: 12px;
+ -fx-text-fill: #aaa;
+}
+
+.tf-section {
+ -fx-spacing: 8;
+ -fx-padding: 8 0 8 0;
+}
+
+/* ScrollPane backgrounds */
+.scroll-pane {
+ -fx-background-color: transparent;
+ -fx-background: transparent;
+}
+
+.scroll-pane .viewport {
+ -fx-background-color: transparent;
+}
+
+.tf-sections {
+ -fx-background-color: #1f2a36; /* same as .tf-root */
+}
+
+/* Section + item text colors */
+.tf-section-title {
+ -fx-font-size: 14px;
+ -fx-font-weight: bold;
+ -fx-text-fill: #ffffff;
+ -fx-padding: 4 0 2 0;
+ -fx-border-color: #333;
+ -fx-border-width: 0 0 1 0;
+}
+
+.tf-item-title {
+ -fx-font-weight: bold;
+ -fx-font-size: 13px;
+ -fx-text-fill: #f5f5f5;
+}
+
+.tf-item-desc {
+ -fx-font-size: 12px;
+ -fx-text-fill: #cccccc;
+}
+
+.tf-status {
+ -fx-font-size: 11px;
+ -fx-padding: 2 6 2 6;
+ -fx-background-radius: 6;
+}
+.tf-status-available {
+ -fx-text-fill: #a5d6a7;
+ -fx-background-color: #1b5e20;
+}
+.tf-status-progress {
+ -fx-text-fill: #ffb74d;
+ -fx-background-color: #e65100;
+}
diff --git a/src/main/resources/org/to/telegramfinalproject/CSS/light_theme.css b/src/main/resources/org/to/telegramfinalproject/CSS/light_theme.css
index c6944cb..fe18596 100644
--- a/src/main/resources/org/to/telegramfinalproject/CSS/light_theme.css
+++ b/src/main/resources/org/to/telegramfinalproject/CSS/light_theme.css
@@ -1262,38 +1262,82 @@
.link-btn:hover {
-fx-underline: true;
}
-/* ===== Base (shared) ===== */
-.tf-root { -fx-background-color: transparent; }
-.tf-toolbar { -fx-padding: 10 12; -fx-alignment: CENTER_LEFT; }
-.tf-title { -fx-font-size: 18px; -fx-font-weight: 700; }
-.tf-caption { -fx-opacity: .75; }
-
-.tf-section { -fx-padding: 10 12 14 12; }
-.tf-item-desc { -fx-wrap-text: true; -fx-font-size: 13px; -fx-line-spacing: 1; }
-
-/* TitledPane (Accordion items) */
-.titled-pane > .title {
- -fx-padding: 10 12;
- -fx-background-radius: 10;
-}
-.titled-pane > *.content {
- -fx-background-radius: 10;
- -fx-background-insets: 0;
- -fx-padding: 8 4 12 4;
+.overlay-background {
+ -fx-background-color: rgba(0,0,0,0.4);
}
-/* ===== Light theme overrides ===== */
-.root.light .tf-title { -fx-text-fill: #111111; }
-.root.light .tf-caption { -fx-text-fill: #555555; }
-.root.light .tf-item-desc { -fx-text-fill: #444444; }
-
-/* TitledPane header/content */
-.root.light .titled-pane > .title {
- -fx-background-color: #f1f1f1;
- -fx-text-fill: #111111;
-}
-.root.light .titled-pane > *.content {
+.tf-root {
-fx-background-color: #ffffff;
+ -fx-background-radius: 10;
+ -fx-padding: 16;
+ -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.2), 10, 0, 0, 4);
}
+.tf-toolbar {
+ -fx-padding: 8 12 8 12;
+}
+
+.tf-title {
+ -fx-font-size: 18px;
+ -fx-font-weight: bold;
+ -fx-text-fill: #229ED9; /* Telegram blue */
+}
+
+.tf-caption {
+ -fx-font-size: 12px;
+ -fx-text-fill: #888;
+}
+
+
+/* ScrollPane backgrounds */
+.scroll-pane {
+ -fx-background-color: transparent;
+ -fx-background: transparent;
+}
+
+.scroll-pane .viewport {
+ -fx-background-color: transparent;
+}
+
+.tf-sections {
+ -fx-background-color: transparent;
+}
+
+.tf-section {
+ -fx-spacing: 8;
+ -fx-padding: 8 0 8 0;
+}
+
+.tf-section-title {
+ -fx-font-size: 14px;
+ -fx-font-weight: bold;
+ -fx-text-fill: #2c2c2c;
+ -fx-padding: 4 0 2 0;
+ -fx-border-color: #ddd;
+ -fx-border-width: 0 0 1 0;
+}
+
+.tf-item-title {
+ -fx-font-weight: bold;
+ -fx-font-size: 13px;
+}
+
+.tf-item-desc {
+ -fx-font-size: 12px;
+ -fx-text-fill: #555;
+}
+
+.tf-status {
+ -fx-font-size: 11px;
+ -fx-padding: 2 6 2 6;
+ -fx-background-radius: 6;
+}
+.tf-status-available {
+ -fx-text-fill: #2e7d32;
+ -fx-background-color: #e8f5e9;
+}
+.tf-status-progress {
+ -fx-text-fill: #e65100;
+ -fx-background-color: #fff3e0;
+}
diff --git a/src/main/resources/org/to/telegramfinalproject/Fxml/feature_FAQ.fxml b/src/main/resources/org/to/telegramfinalproject/Fxml/feature_FAQ.fxml
deleted file mode 100644
index 23509b3..0000000
--- a/src/main/resources/org/to/telegramfinalproject/Fxml/feature_FAQ.fxml
+++ /dev/null
@@ -1,144 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/main/resources/org/to/telegramfinalproject/Fxml/telegram_features.fxml b/src/main/resources/org/to/telegramfinalproject/Fxml/telegram_features.fxml
new file mode 100644
index 0000000..af00397
--- /dev/null
+++ b/src/main/resources/org/to/telegramfinalproject/Fxml/telegram_features.fxml
@@ -0,0 +1,165 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+