xlordgrim/3x-sub

Purpose and Deployment Model

3X-SUB replaces or customizes the subscription page served by an existing 3X-UI installation (v2.8.4+). It is not a standalone web application: shell scripts install repository assets into the 3X-UI panel environment, while the page relies on that host’s subscription and monitoring endpoints.

Primary operational entry points:

• install.sh installs/updates the custom page, with --fa and --zh language options.

• uninstall.sh restores the default subscription experience, updating the host panel as part of recovery.

• test.html is a browser-accessible/demo-oriented entry point outside the installed panel path.

Installer and Host Integration

install.sh is the critical integration boundary. It targets AMD64 and ARM64 3X-UI servers and deploys frontend assets into paths corresponding to the panel’s subscription-page structure. Its responsibilities are expected to include fetching/copying assets, selecting localization, and arranging the page beneath the panel’s served static content.

The installed page hierarchy mirrors 3X-UI’s internal web layout:

• web/html/settings/panel/subscription/subpage.html

• web/assets/css/premium.css

• web/assets/js/subscription.js

The custom frontend must remain compatible with 3X-UI’s rendered context, routing, authentication/session behavior, and available APIs rather than owning those concerns.

Subscription Page Presentation Layer

web/html/settings/panel/subscription/subpage.html is the primary installed UI document. It defines the subscription subpage embedded or served within the 3X-UI panel structure.

The presentation system is separated into:

• HTML structure and panel integration: web/html/settings/panel/subscription/subpage.html

• Custom visual language—dark/light themes, glass styling, transitions, responsive layout, adaptive themes: web/assets/css/premium.css

This boundary permits page markup and theme behavior to evolve independently of installer mechanics.

Client-Side Subscription Controller

web/assets/js/subscription.js is the browser control plane for the page. Based on the project scope, it coordinates:

• subscription metadata and configuration-link display;

• QR-code and status UI updates;

• theme selection and interactive notifications;

• efficient polling for live server CPU, RAM, and network stats.

It consumes data from the hosting 3X-UI environment and renders it into the installed subscription page. No independent backend or external API service is represented in the repository.

Runtime Data Flow

1. An operator executes install.sh on a 3X-UI server.

2. Deployment places the subpage, stylesheet, and JavaScript in panel-compatible static locations.

3. A client opens the subscription page served by 3X-UI.

4. subpage.html loads premium.css and subscription.js.

5. JavaScript reads host-provided subscription/server data and periodically refreshes dashboard and server-stat UI.

6. Users consume configuration links, QR codes, quota/status information, and current server telemetry.

The primary trust and data boundary is between browser-side custom code and authenticated/available 3X-UI endpoints; this repo does not introduce a separate service layer.

Infrastructure and Delivery

The runtime infrastructure is a Linux-hosted 3X-UI panel managed alongside system services; the README identifies systemd integration as part of the installation model. GitHub Actions contains a custom-panel build workflow:

• .github/workflows/build-custom-xui.yml

Repository-hosted static assets are also used for the public demo/documentation surface, including screenshots under screenshots. The live demo is externally hosted via GitHub Pages, while production installation is performed directly on the target 3X-UI server.