add telegram_feature and telegram_FAQ fxml&css

This commit is contained in:
2025-09-07 20:16:39 +03:30
parent c45a8f22be
commit 1ce577e39e
4 changed files with 509 additions and 0 deletions
@@ -1132,3 +1132,18 @@
-fx-border-radius: 50%;
-fx-border-width: 1;
}
/* ===== 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;
}
@@ -1123,3 +1123,39 @@
-fx-border-radius: 50%;
-fx-border-width: 1;
}
/* ===== 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;
}
/* ===== 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 {
-fx-background-color: #ffffff;
}
@@ -0,0 +1,144 @@
<?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 contacts 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>
@@ -0,0 +1,314 @@
<?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 Features" styleClass="tf-title"/>
<Region HBox.hgrow="ALWAYS"/>
<Label text="(static showcase)" styleClass="tf-caption"/>
</children>
</HBox>
</top>
<center>
<ScrollPane fitToWidth="true" hbarPolicy="NEVER" vbarPolicy="AS_NEEDED">
<content>
<Accordion>
<panes>
<!-- 1) Account & Authentication -->
<TitledPane text="1) Account &amp; Authentication">
<content>
<VBox spacing="8" styleClass="tf-section">
<children>
<HBox spacing="10" styleClass="tf-item">
<children>
<VBox spacing="4" HBox.hgrow="ALWAYS">
<children>
<HBox spacing="8" alignment="CENTER_LEFT">
<children>
<Label text="Register, Login &amp; Logout" styleClass="tf-item-title"/>
<Label text="Available" styleClass="tf-status tf-status-available"/>
</children>
</HBox>
<Label text="Create account, sign in/out, and manage sessions (devices, multi-login prevention)." styleClass="tf-item-desc" wrapText="true"/>
<FlowPane hgap="6" vgap="6">
<children>
<Label text="GLOBAL" styleClass="tf-chip"/>
<Label text="SECURITY" styleClass="tf-chip"/>
</children>
</FlowPane>
</children>
</VBox>
</children>
</HBox>
<HBox spacing="10" styleClass="tf-item">
<children>
<VBox spacing="4" HBox.hgrow="ALWAYS">
<children>
<HBox spacing="8" alignment="CENTER_LEFT">
<children>
<Label text="Profile &amp; Presence" styleClass="tf-item-title"/>
<Label text="Available" styleClass="tf-status tf-status-available"/>
</children>
</HBox>
<Label text="Bio, photo, display name, user id, online / last seen." styleClass="tf-item-desc" wrapText="true"/>
<FlowPane hgap="6" vgap="6">
<children>
<Label text="GLOBAL" styleClass="tf-chip"/>
</children>
</FlowPane>
</children>
</VBox>
</children>
</HBox>
</children>
</VBox>
</content>
</TitledPane>
<!-- 2) Contacts -->
<TitledPane text="2) Contacts">
<content>
<VBox spacing="8" styleClass="tf-section">
<children>
<HBox spacing="10" styleClass="tf-item">
<children>
<VBox spacing="4" HBox.hgrow="ALWAYS">
<children>
<HBox spacing="8" alignment="CENTER_LEFT">
<children>
<Label text="Add / Remove Contacts" styleClass="tf-item-title"/>
<Label text="Available" styleClass="tf-status tf-status-available"/>
</children>
</HBox>
<Label text="Add, remove, and browse contacts with full profile view." styleClass="tf-item-desc" wrapText="true"/>
<FlowPane hgap="6" vgap="6">
<children>
<Label text="CONTACT" styleClass="tf-chip"/>
</children>
</FlowPane>
</children>
</VBox>
</children>
</HBox>
<HBox spacing="10" styleClass="tf-item">
<children>
<VBox spacing="4" HBox.hgrow="ALWAYS">
<children>
<HBox spacing="8" alignment="CENTER_LEFT">
<children>
<Label text="Block / Unblock" styleClass="tf-item-title"/>
<Label text="Available" styleClass="tf-status tf-status-available"/>
</children>
</HBox>
<Label text="Manage private chat access and visibility." styleClass="tf-item-desc" wrapText="true"/>
<FlowPane hgap="6" vgap="6">
<children>
<Label text="CONTACT" styleClass="tf-chip"/>
<Label text="SECURITY" styleClass="tf-chip"/>
</children>
</FlowPane>
</children>
</VBox>
</children>
</HBox>
</children>
</VBox>
</content>
</TitledPane>
<!-- 3) Chats -->
<TitledPane text="3) Chats">
<content>
<VBox spacing="8" styleClass="tf-section">
<children>
<HBox spacing="10" styleClass="tf-item">
<children>
<VBox spacing="4" HBox.hgrow="ALWAYS">
<children>
<HBox spacing="8" alignment="CENTER_LEFT">
<children>
<Label text="Private Chats" styleClass="tf-item-title"/>
<Label text="Available" styleClass="tf-status tf-status-available"/>
</children>
</HBox>
<Label text="Create or open private chats (get_or_create_private_chat)." styleClass="tf-item-desc" wrapText="true"/>
<FlowPane hgap="6" vgap="6">
<children>
<Label text="CHAT" styleClass="tf-chip"/>
</children>
</FlowPane>
</children>
</VBox>
</children>
</HBox>
<HBox spacing="10" styleClass="tf-item">
<children>
<VBox spacing="4" HBox.hgrow="ALWAYS">
<children>
<HBox spacing="8" alignment="CENTER_LEFT">
<children>
<Label text="Groups" styleClass="tf-item-title"/>
<Label text="Available" styleClass="tf-status tf-status-available"/>
</children>
</HBox>
<Label text="Create groups, add members, roles &amp; permissions, ownership transfer." styleClass="tf-item-desc" wrapText="true"/>
<FlowPane hgap="6" vgap="6">
<children>
<Label text="CHAT" styleClass="tf-chip"/>
<Label text="ADMIN" styleClass="tf-chip"/>
</children>
</FlowPane>
</children>
</VBox>
</children>
</HBox>
<HBox spacing="10" styleClass="tf-item">
<children>
<VBox spacing="4" HBox.hgrow="ALWAYS">
<children>
<HBox spacing="8" alignment="CENTER_LEFT">
<children>
<Label text="Channels" styleClass="tf-item-title"/>
<Label text="Available" styleClass="tf-status tf-status-available"/>
</children>
</HBox>
<Label text="Create channels, manage subscribers, admins, and ownership." styleClass="tf-item-desc" wrapText="true"/>
<FlowPane hgap="6" vgap="6">
<children>
<Label text="CHAT" styleClass="tf-chip"/>
<Label text="ADMIN" styleClass="tf-chip"/>
</children>
</FlowPane>
</children>
</VBox>
</children>
</HBox>
<HBox spacing="10" styleClass="tf-item">
<children>
<VBox spacing="4" HBox.hgrow="ALWAYS">
<children>
<HBox spacing="8" alignment="CENTER_LEFT">
<children>
<Label text="Saved Messages" styleClass="tf-item-title"/>
<Label text="Available" styleClass="tf-status tf-status-available"/>
</children>
</HBox>
<Label text="Personal cloud chat to keep your own notes and files." styleClass="tf-item-desc" wrapText="true"/>
<FlowPane hgap="6" vgap="6">
<children>
<Label text="GLOBAL" styleClass="tf-chip"/>
<Label text="MESSAGE" styleClass="tf-chip"/>
</children>
</FlowPane>
</children>
</VBox>
</children>
</HBox>
<HBox spacing="10" styleClass="tf-item">
<children>
<VBox spacing="4" HBox.hgrow="ALWAYS">
<children>
<HBox spacing="8" alignment="CENTER_LEFT">
<children>
<Label text="Archive Chats" styleClass="tf-item-title"/>
<Label text="In Progress" styleClass="tf-status tf-status-progress"/>
</children>
</HBox>
<Label text="Move chats in/out of Archive for better organization." styleClass="tf-item-desc" wrapText="true"/>
<FlowPane hgap="6" vgap="6">
<children>
<Label text="CHAT" styleClass="tf-chip"/>
</children>
</FlowPane>
</children>
</VBox>
</children>
</HBox>
</children>
</VBox>
</content>
</TitledPane>
<!-- 4) Messaging -->
<TitledPane text="4) Messaging">
<content>
<VBox spacing="8" styleClass="tf-section">
<children>
<HBox spacing="10" styleClass="tf-item">
<children>
<VBox spacing="4" HBox.hgrow="ALWAYS">
<children>
<HBox spacing="8" alignment="CENTER_LEFT">
<children>
<Label text="Reply" styleClass="tf-item-title"/>
<Label text="Available" styleClass="tf-status tf-status-available"/>
</children>
</HBox>
<Label text="Quote and reply to a specific message." styleClass="tf-item-desc" wrapText="true"/>
<FlowPane hgap="6" vgap="6">
<children><Label text="MESSAGE" styleClass="tf-chip"/></children>
</FlowPane>
</children>
</VBox>
</children>
</HBox>
<HBox spacing="10" styleClass="tf-item">
<children>
<VBox spacing="4" HBox.hgrow="ALWAYS">
<children>
<HBox spacing="8" alignment="CENTER_LEFT">
<children>
<Label text="Forward" styleClass="tf-item-title"/>
<Label text="Available" styleClass="tf-status tf-status-available"/>
</children>
</HBox>
<Label text="Send a message to another chat with source attribution." styleClass="tf-item-desc" wrapText="true"/>
<FlowPane hgap="6" vgap="6">
<children><Label text="MESSAGE" styleClass="tf-chip"/></children>
</FlowPane>
</children>
</VBox>
</children>
</HBox>
<!-- Add more items similarly: Edit, Delete, Reactions, Attachments, Read Receipts -->
</children>
</VBox>
</content>
</TitledPane>
<!-- You can add more TitledPane sections similarly (Search, UI/UX, Real-Time Events, Security). -->
</panes>
</Accordion>
</content>
</ScrollPane>
</center>
<padding>
<Insets top="8" right="8" bottom="8" left="8"/>
</padding>
</BorderPane>