Privacy & Security UI implemented.

src/main/resources/org/to/telegramfinalproject/CSS/dark_theme.css

@@ -898,3 +898,94 @@
 .settings-option:pressed {
     -fx-background-color: #1f2a36;
 }
+
+/* Card */
+.privacy-card {
+    -fx-background-color: #1f2a36;
+    -fx-background-radius: 10;
+    -fx-padding: 16;
+}
+
+/* Header */
+.privacy-header {
+    -fx-padding: 8 12 8 12;
+}
+.privacy-title {
+    -fx-font-size: 16px;
+    -fx-font-weight: bold;
+    -fx-text-fill: white;
+}
+
+/* Section Titles */
+.section-title {
+    -fx-font-size: 13px;
+    -fx-font-weight: bold;
+    -fx-text-fill: #bbbbbb;
+}
+
+/* Items */
+.privacy-item {
+    -fx-padding: 4 0 4 0;
+}
+.item-label {
+    -fx-font-size: 12px;
+    -fx-text-fill: #aaa;
+}
+.privacy-input {
+    -fx-background-color: #2a3b47;
+    -fx-text-fill: white;
+    -fx-background-radius: 6;
+    -fx-padding: 4;
+}
+
+/* Buttons */
+.action-button {
+    -fx-background-color: #3a86ff;
+    -fx-text-fill: white;
+    -fx-background-radius: 6;
+    -fx-padding: 6 12;
+}
+.manage-button {
+    -fx-background-color: #1f2a36;
+    -fx-text-fill: #3a86ff;
+    -fx-font-size: 12px;
+}
+
+.privacy-section {
+    -fx-spacing: 8;
+    -fx-padding: 10 0 10 0;
+    -fx-background-color: transparent;
+    -fx-border-color: #2f2f2f;
+    -fx-border-width: 0 0 0 0;
+}
+
+.privacy-form {
+    -fx-spacing: 8;
+    -fx-alignment: CENTER_LEFT;
+    -fx-padding: 8 0 8 0;
+}
+
+.privacy-form .label {
+    -fx-font-size: 12px;
+    -fx-text-fill: white;
+}
+
+/* Error state (same for both themes) */
+.password-label.error {
+    -fx-text-fill: red;
+}
+
+.password-field.error {
+    -fx-text-fill: red;
+}
+
+.text-field.error {
+    -fx-text-fill: red;
+}
+
+.toggle-visibility-btn {
+    -fx-background-color: transparent;
+    -fx-cursor: hand;
+    -fx-padding: 0 6 0 6;
+    -fx-font-size: 14px;
+}

src/main/resources/org/to/telegramfinalproject/CSS/light_theme.css

@@ -901,3 +901,91 @@
     -fx-background-color: #e0e0e0;
 }
 
+/* Card */
+.privacy-card {
+    -fx-background-color: white;
+    -fx-background-radius: 10;
+    -fx-padding: 16;
+}
+
+/* Header */
+.privacy-header {
+    -fx-padding: 8 12 8 12;
+}
+.privacy-title {
+    -fx-font-size: 16px;
+    -fx-font-weight: bold;
+}
+
+/* Section Titles */
+.section-title {
+    -fx-font-size: 13px;
+    -fx-font-weight: bold;
+    -fx-text-fill: #2a2a2a;
+}
+
+/* Items */
+.privacy-item {
+    -fx-padding: 4 0 4 0;
+}
+.item-label {
+    -fx-font-size: 12px;
+    -fx-text-fill: #444;
+}
+.privacy-input {
+    -fx-background-color: #f5f5f5;
+    -fx-background-radius: 6;
+    -fx-padding: 4;
+}
+
+/* Buttons */
+.action-button {
+    -fx-background-color: #2196f3;
+    -fx-text-fill: white;
+    -fx-background-radius: 6;
+    -fx-padding: 6 12;
+}
+.manage-button {
+    -fx-background-color: transparent;
+    -fx-text-fill: #2196f3;
+    -fx-font-size: 12px;
+}
+
+.privacy-section {
+    -fx-spacing: 8;
+    -fx-padding: 10 0 10 0;
+    -fx-background-color: transparent;
+    -fx-border-color: #e0e0e0;
+    -fx-border-width: 0 0 0 0;
+}
+
+.privacy-form {
+    -fx-spacing: 8;
+    -fx-alignment: CENTER_LEFT;
+    -fx-padding: 8 0 8 0;
+}
+
+.privacy-form .label {
+    -fx-font-size: 12px;
+    -fx-text-fill: black;
+}
+
+/* Error state (same for both themes) */
+.password-label.error {
+    -fx-text-fill: red;
+}
+
+.password-field.error {
+    -fx-text-fill: red;
+}
+
+.text-field.error {
+    -fx-text-fill: red;
+}
+
+.toggle-visibility-btn {
+    -fx-background-color: transparent;
+    -fx-cursor: hand;
+    -fx-padding: 0 6 0 6;
+    -fx-font-size: 14px;
+}

src/main/resources/org/to/telegramfinalproject/Fxml/privacy_security.fxml

@@ -0,0 +1,82 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<?import javafx.scene.layout.*?>
+<?import javafx.scene.control.*?>
+<?import javafx.scene.image.ImageView?>
+<?import javafx.scene.image.Image?>
+
+<StackPane fx:id="overlayRoot"
+           xmlns:fx="http://javafx.com/fxml"
+           fx:controller="org.to.telegramfinalproject.UI.PrivacySecurityController"
+           styleClass="overlay-root">
+
+    <!-- Dimmed Background -->
+    <Pane fx:id="overlayBackground" styleClass="overlay-background"/>
+
+    <!-- Main Card -->
+    <VBox fx:id="privacyCard"
+          styleClass="privacy-card"
+          spacing="16"
+          prefWidth="360" maxWidth="360"
+          prefHeight="480" maxHeight="480">
+
+        <!-- ===== Header: Back + Title + Close ===== -->
+        <HBox alignment="CENTER_LEFT" spacing="10" styleClass="privacy-header">
+            <!-- Back button -->
+            <Button fx:id="backButton" styleClass="edit-icon-button"/>
+
+            <!-- Title -->
+            <Label fx:id="privacyTitle" text="Privacy and Security" styleClass="privacy-title" HBox.hgrow="ALWAYS"/>
+
+            <Pane HBox.hgrow="ALWAYS"/>
+
+            <!-- Close button -->
+            <Button fx:id="closeButton" styleClass="edit-icon-button" text="✕"/>
+        </HBox>
+
+
+        <Separator/>
+
+        <!-- ===== Security Section ===== -->
+        <VBox spacing="8" styleClass="privacy-section">
+            <Label text="Security" styleClass="section-title"/>
+
+            <!-- Username & Password -->
+            <HBox alignment="CENTER_LEFT" spacing="8" styleClass="privacy-item">
+
+                <!-- Icon -->
+                <ImageView fx:id="usernameIcon" fitWidth="18" fitHeight="18" preserveRatio="true">
+                    <image>
+                        <Image url="@/org/to/telegramfinalproject/Icons/username_dark.png"/>
+                    </image>
+                </ImageView>
+
+                <Label text="Username &amp; Password" styleClass="item-label"/>
+                <Pane HBox.hgrow="ALWAYS"/>
+                <Button fx:id="changeCredentialsButton" text="Change" styleClass="manage-button"/>
+            </HBox>
+        </VBox>
+
+        <Separator/>
+
+        <!-- ===== Privacy Section ===== -->
+        <VBox spacing="8" styleClass="privacy-section">
+            <Label text="Privacy" styleClass="section-title"/>
+
+            <!-- Blocked Users -->
+            <HBox alignment="CENTER_LEFT" spacing="8" styleClass="privacy-item">
+
+                <!-- Icon -->
+                <ImageView fx:id="blockIcon" fitWidth="18" fitHeight="18" preserveRatio="true">
+                    <image>
+                        <Image url="@/org/to/telegramfinalproject/Icons/hand_dark.png"/>
+                    </image>
+                </ImageView>
+
+                <Label text="Blocked Users" styleClass="item-label"/>
+                <Pane HBox.hgrow="ALWAYS"/>
+                <Button fx:id="blockedUsersButton" text="Manage" styleClass="manage-button"/>
+            </HBox>
+        </VBox>
+    </VBox>
+</StackPane>