From 1594c43c95ccf65b4032e27c6f690f25a8bfb69f Mon Sep 17 00:00:00 2001
From: Asal Lotfi <asal.army.233@gmail.com>
Date: Mon, 8 Sep 2025 00:22:05 +0330
Subject: [PATCH] Telegram features UI implemented.

---
 .../UI/TelegramFeaturesController.java        |  42 +++++
 .../telegramfinalproject/CSS/dark_theme.css   |  88 ++++++++--
 .../telegramfinalproject/CSS/light_theme.css  | 102 ++++++++---
 .../Fxml/feature_FAQ.fxml                     | 144 ---------------
 .../Fxml/telegram_features.fxml               | 165 ++++++++++++++++++
 5 files changed, 357 insertions(+), 184 deletions(-)
 create mode 100644 src/main/java/org/to/telegramfinalproject/UI/TelegramFeaturesController.java
 delete mode 100644 src/main/resources/org/to/telegramfinalproject/Fxml/feature_FAQ.fxml
 create mode 100644 src/main/resources/org/to/telegramfinalproject/Fxml/telegram_features.fxml

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 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<?import javafx.geometry.Insets?>
-<?import javafx.scene.control.*?>
-<?import javafx.scene.layout.*?>
-
-<BorderPane xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml"
-            styleClass="tf-root">
-
-    <top>
-        <HBox spacing="10" styleClass="tf-toolbar">
-            <children>
-                <Label text="Telegram FAQ" styleClass="tf-title"/>
-                <Region HBox.hgrow="ALWAYS"/>
-                <Label text="(frequently asked questions)" styleClass="tf-caption"/>
-            </children>
-        </HBox>
-    </top>
-
-    <center>
-        <ScrollPane fitToWidth="true" hbarPolicy="NEVER" vbarPolicy="AS_NEEDED">
-            <content>
-                <Accordion>
-                    <panes>
-
-                        <TitledPane text="1) How do I create a new account?">
-                            <content>
-                                <VBox spacing="6" styleClass="tf-section">
-                                    <children>
-                                        <Label wrapText="true" styleClass="tf-item-desc"
-                                               text="Download the Telegram app, enter your phone number, and confirm it with the SMS code. Then you can set up your name and profile picture."/>
-                                    </children>
-                                </VBox>
-                            </content>
-                        </TitledPane>
-
-                        <TitledPane text="2) How can I add a new contact?">
-                            <content>
-                                <VBox spacing="6" styleClass="tf-section">
-                                    <children>
-                                        <Label wrapText="true" styleClass="tf-item-desc"
-                                               text="Tap the menu, choose 'Contacts', then 'Add Contact'. Enter the phone number and name. Telegram will link it to their account automatically."/>
-                                    </children>
-                                </VBox>
-                            </content>
-                        </TitledPane>
-
-                        <TitledPane text="3) How do I start a private chat?">
-                            <content>
-                                <VBox spacing="6" styleClass="tf-section">
-                                    <children>
-                                        <Label wrapText="true" styleClass="tf-item-desc"
-                                               text="Open the contact’s profile and tap 'Message'. This will create a private chat window with them."/>
-                                    </children>
-                                </VBox>
-                            </content>
-                        </TitledPane>
-
-                        <TitledPane text="4) How can I create a group?">
-                            <content>
-                                <VBox spacing="6" styleClass="tf-section">
-                                    <children>
-                                        <Label wrapText="true" styleClass="tf-item-desc"
-                                               text="Go to the menu, select 'New Group', choose members, and set a group name and picture."/>
-                                    </children>
-                                </VBox>
-                            </content>
-                        </TitledPane>
-
-                        <TitledPane text="5) How do channels work?">
-                            <content>
-                                <VBox spacing="6" styleClass="tf-section">
-                                    <children>
-                                        <Label wrapText="true" styleClass="tf-item-desc"
-                                               text="Channels let you broadcast messages to large audiences. Only admins can post, but everyone who subscribes receives the updates."/>
-                                    </children>
-                                </VBox>
-                            </content>
-                        </TitledPane>
-
-                        <TitledPane text="6) How can I search for messages?">
-                            <content>
-                                <VBox spacing="6" styleClass="tf-section">
-                                    <children>
-                                        <Label wrapText="true" styleClass="tf-item-desc"
-                                               text="Use the search bar at the top of the chat list for global search, or use the search option inside a chat to find specific messages."/>
-                                    </children>
-                                </VBox>
-                            </content>
-                        </TitledPane>
-
-                        <TitledPane text="7) How do I delete or edit a message?">
-                            <content>
-                                <VBox spacing="6" styleClass="tf-section">
-                                    <children>
-                                        <Label wrapText="true" styleClass="tf-item-desc"
-                                               text="Long-press (or right-click) on your message. Choose 'Edit' to change it or 'Delete' to remove it. You can delete for yourself or for everyone if allowed."/>
-                                    </children>
-                                </VBox>
-                            </content>
-                        </TitledPane>
-
-                        <TitledPane text="8) How can I use reactions?">
-                            <content>
-                                <VBox spacing="6" styleClass="tf-section">
-                                    <children>
-                                        <Label wrapText="true" styleClass="tf-item-desc"
-                                               text="Tap and hold on a message, then choose an emoji reaction to express your feedback instantly."/>
-                                    </children>
-                                </VBox>
-                            </content>
-                        </TitledPane>
-
-                        <TitledPane text="9) How do I archive chats?">
-                            <content>
-                                <VBox spacing="6" styleClass="tf-section">
-                                    <children>
-                                        <Label wrapText="true" styleClass="tf-item-desc"
-                                               text="Swipe left on a chat (mobile) or right-click on it (desktop) and choose 'Archive'. Archived chats are hidden in a separate folder until a new message arrives."/>
-                                    </children>
-                                </VBox>
-                            </content>
-                        </TitledPane>
-
-                        <TitledPane text="10) How can I enable Dark Mode?">
-                            <content>
-                                <VBox spacing="6" styleClass="tf-section">
-                                    <children>
-                                        <Label wrapText="true" styleClass="tf-item-desc"
-                                               text="Open 'Settings' → 'Appearance' and switch between Light and Dark themes. You can also schedule it automatically."/>
-                                    </children>
-                                </VBox>
-                            </content>
-                        </TitledPane>
-
-                    </panes>
-                </Accordion>
-            </content>
-        </ScrollPane>
-    </center>
-
-    <padding>
-        <Insets top="8" right="8" bottom="8" left="8"/>
-    </padding>
-</BorderPane>
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 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<?import javafx.scene.layout.*?>
+<?import javafx.scene.control.*?>
+<?import javafx.geometry.Insets?>
+
+<StackPane xmlns:fx="http://javafx.com/fxml"
+           fx:id="rootOverlay"
+           fx:controller="org.to.telegramfinalproject.UI.TelegramFeaturesController"
+           styleClass="overlay-root">
+
+    <!-- Background (click to close) -->
+    <Pane fx:id="overlayBackground" styleClass="overlay-background"/>
+
+    <!-- Content card -->
+    <BorderPane fx:id="contentCard"
+                styleClass="tf-root"
+                maxWidth="700" maxHeight="520">
+
+        <!-- Header -->
+        <top>
+            <HBox spacing="10" styleClass="tf-toolbar">
+                <children>
+                    <Label text="Telegram Features" styleClass="tf-title"/>
+                    <Region HBox.hgrow="ALWAYS"/>
+                </children>
+            </HBox>
+        </top>
+
+        <!-- Scrollable content -->
+        <center>
+            <ScrollPane fx:id="featureScroll" fitToWidth="true" hbarPolicy="NEVER" vbarPolicy="AS_NEEDED">
+                <content>
+                    <VBox spacing="24" styleClass="tf-sections">
+                        <padding>
+                            <Insets top="8" right="16" bottom="8" left="16"/>
+                        </padding>
+
+                        <!-- Section 1 -->
+                        <VBox spacing="8" styleClass="tf-section">
+                            <Label text="1) Account &amp; Authentication" styleClass="tf-section-title"/>
+                            <VBox spacing="12">
+                                <VBox>
+                                    <HBox spacing="8" alignment="CENTER_LEFT">
+                                        <Label text="Register, Login &amp; Logout" styleClass="tf-item-title"/>
+                                        <Label text="Available" styleClass="tf-status tf-status-available"/>
+                                    </HBox>
+                                    <Label text="Create account, sign in/out, and manage sessions (devices, multi-login prevention)." wrapText="true" styleClass="tf-item-desc"/>
+                                </VBox>
+
+                                <VBox>
+                                    <HBox spacing="8" alignment="CENTER_LEFT">
+                                        <Label text="Profile &amp; Presence" styleClass="tf-item-title"/>
+                                        <Label text="Available" styleClass="tf-status tf-status-available"/>
+                                    </HBox>
+                                    <Label text="Bio, photo, display name, user id, online / last seen." wrapText="true" styleClass="tf-item-desc"/>
+                                </VBox>
+                            </VBox>
+                        </VBox>
+
+                        <Separator/>
+
+                        <!-- Section 2 -->
+                        <VBox spacing="8" styleClass="tf-section">
+                            <Label text="2) Contacts" styleClass="tf-section-title"/>
+                            <VBox spacing="12">
+                                <VBox>
+                                    <HBox spacing="8" alignment="CENTER_LEFT">
+                                        <Label text="Add / Remove Contacts" styleClass="tf-item-title"/>
+                                        <Label text="Available" styleClass="tf-status tf-status-available"/>
+                                    </HBox>
+                                    <Label text="Add, remove, and browse contacts with full profile view." wrapText="true" styleClass="tf-item-desc"/>
+                                </VBox>
+
+                                <VBox>
+                                    <HBox spacing="8" alignment="CENTER_LEFT">
+                                        <Label text="Block / Unblock" styleClass="tf-item-title"/>
+                                        <Label text="Available" styleClass="tf-status tf-status-available"/>
+                                    </HBox>
+                                    <Label text="Manage private chat access and visibility." wrapText="true" styleClass="tf-item-desc"/>
+                                </VBox>
+                            </VBox>
+                        </VBox>
+
+                        <Separator/>
+
+                        <!-- Section 3 -->
+                        <VBox spacing="8" styleClass="tf-section">
+                            <Label text="3) Chats" styleClass="tf-section-title"/>
+                            <VBox spacing="12">
+                                <VBox>
+                                    <HBox spacing="8" alignment="CENTER_LEFT">
+                                        <Label text="Private Chats" styleClass="tf-item-title"/>
+                                        <Label text="Available" styleClass="tf-status tf-status-available"/>
+                                    </HBox>
+                                    <Label text="Create or open private chats (get_or_create_private_chat)." wrapText="true" styleClass="tf-item-desc"/>
+                                </VBox>
+
+                                <VBox>
+                                    <HBox spacing="8" alignment="CENTER_LEFT">
+                                        <Label text="Groups" styleClass="tf-item-title"/>
+                                        <Label text="Available" styleClass="tf-status tf-status-available"/>
+                                    </HBox>
+                                    <Label text="Create groups, add members, roles &amp; permissions, ownership transfer." wrapText="true" styleClass="tf-item-desc"/>
+                                </VBox>
+
+                                <VBox>
+                                    <HBox spacing="8" alignment="CENTER_LEFT">
+                                        <Label text="Channels" styleClass="tf-item-title"/>
+                                        <Label text="Available" styleClass="tf-status tf-status-available"/>
+                                    </HBox>
+                                    <Label text="Create channels, manage subscribers, admins, and ownership." wrapText="true" styleClass="tf-item-desc"/>
+                                </VBox>
+
+                                <VBox>
+                                    <HBox spacing="8" alignment="CENTER_LEFT">
+                                        <Label text="Saved Messages" styleClass="tf-item-title"/>
+                                        <Label text="Available" styleClass="tf-status tf-status-available"/>
+                                    </HBox>
+                                    <Label text="Personal cloud chat to keep your own notes and files." wrapText="true" styleClass="tf-item-desc"/>
+                                </VBox>
+
+                                <VBox>
+                                    <HBox spacing="8" alignment="CENTER_LEFT">
+                                        <Label text="Archive Chats" styleClass="tf-item-title"/>
+                                        <Label text="In Progress" styleClass="tf-status tf-status-progress"/>
+                                    </HBox>
+                                    <Label text="Move chats in/out of Archive for better organization." wrapText="true" styleClass="tf-item-desc"/>
+                                </VBox>
+                            </VBox>
+                        </VBox>
+
+                        <Separator/>
+
+                        <!-- Section 4 -->
+                        <VBox spacing="8" styleClass="tf-section">
+                            <Label text="4) Messaging" styleClass="tf-section-title"/>
+                            <VBox spacing="12">
+                                <VBox>
+                                    <HBox spacing="8" alignment="CENTER_LEFT">
+                                        <Label text="Reply" styleClass="tf-item-title"/>
+                                        <Label text="Available" styleClass="tf-status tf-status-available"/>
+                                    </HBox>
+                                    <Label text="Quote and reply to a specific message." wrapText="true" styleClass="tf-item-desc"/>
+                                </VBox>
+
+                                <VBox>
+                                    <HBox spacing="8" alignment="CENTER_LEFT">
+                                        <Label text="Forward" styleClass="tf-item-title"/>
+                                        <Label text="Available" styleClass="tf-status tf-status-available"/>
+                                    </HBox>
+                                    <Label text="Send a message to another chat with source attribution." wrapText="true" styleClass="tf-item-desc"/>
+                                </VBox>
+                            </VBox>
+                        </VBox>
+
+                    </VBox>
+                </content>
+            </ScrollPane>
+        </center>
+
+        <padding>
+            <Insets top="8" right="8" bottom="8" left="8"/>
+        </padding>
+    </BorderPane>
+</StackPane>