add telegram_feature and telegram_FAQ fxml&css
This commit is contained in:
@@ -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 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>
|
||||
@@ -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 & 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 & 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 & 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 & 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>
|
||||
Reference in New Issue
Block a user