From 523cec9ebd6a5b95c6a7498f1ddef25e5aa6b88a Mon Sep 17 00:00:00 2001
From: "Shishkevich D." <135337715+shishkevichd@users.noreply.github.com>
Date: Wed, 9 Apr 2025 11:10:12 +0000
Subject: [PATCH] chore: redesign WARP modal

---
 web/html/modals/warp_modal.html      | 195 ++++++++++++++++-----------
 web/html/xray.html                   |   1 +
 web/translation/translate.ar_EG.toml |  21 +++
 web/translation/translate.en_US.toml |  21 +++
 web/translation/translate.es_ES.toml |  21 +++
 web/translation/translate.fa_IR.toml |  21 +++
 web/translation/translate.id_ID.toml |  21 +++
 web/translation/translate.ja_JP.toml |  21 +++
 web/translation/translate.pt_BR.toml |  21 +++
 web/translation/translate.ru_RU.toml |  21 +++
 web/translation/translate.tr_TR.toml |  21 +++
 web/translation/translate.uk_UA.toml |  21 +++
 web/translation/translate.vi_VN.toml |  21 +++
 web/translation/translate.zh_CN.toml |  21 +++
 web/translation/translate.zh_TW.toml |  21 +++
 15 files changed, 388 insertions(+), 81 deletions(-)

diff --git a/web/html/modals/warp_modal.html b/web/html/modals/warp_modal.html
index 14426472..bbce8dfb 100644
--- a/web/html/modals/warp_modal.html
+++ b/web/html/modals/warp_modal.html
@@ -1,35 +1,121 @@
 {{define "modals/warpModal"}}
-<a-modal id="warp-modal" v-model="warpModal.visible" title="Cloudflare WARP"
-         :confirm-loading="warpModal.confirmLoading" :closable="true" :mask-closable="true"
-         :footer="null" :class="themeSwitcher.currentTheme">
+<a-modal id="warp-modal" v-model="warpModal.visible" title="Cloudflare WARP" :confirm-loading="warpModal.confirmLoading"
+    :closable="true" :mask-closable="true" :footer="null" :class="themeSwitcher.currentTheme">
     <template v-if="ObjectUtil.isEmpty(warpModal.warpData)">
-        <a-button icon="api" @click="register" :loading="warpModal.confirmLoading">{{ i18n "pages.inbounds.create" }}</a-button>
+        <a-empty :image-style="{ height: 'auto', marginTop: '24px', marginBottom: '24px' }">
+            <template #image>
+                <a-icon type="cloud" :style="{ width: '48px', height: '48px', fontSize: '48px' }"></a-icon>
+            </template>
+            <template #description>
+                <a-space direction="vertical">
+                    <span :style="{ fontSize: '18px' }">{{ i18n "pages.xray.warp.warpModalTitle" }}</span>
+                    <span>{{ i18n "pages.xray.warp.warpModalDescription" }}</span>
+                </a-space>
+            </template>
+            <a-button icon="api" @click="register" :loading="warpModal.confirmLoading"
+                :style="{ marginTop: '8px', marginBottom: '8px' }">{{ i18n "pages.xray.warp.warpCreateOutbound"
+                }}</a-button>
+        </a-empty>
     </template>
     <template v-else>
-        <table :style="{ margin: '5px 0', width: '100%' }">
-            <tr class="client-table-odd-row">
-                <td>Access Token</td>
-                <td>[[ warpModal.warpData.access_token ]]</td>
-            </tr>
-            <tr>
-                <td>Device ID</td>
-                <td>[[ warpModal.warpData.device_id ]]</td>
-            </tr>
-            <tr class="client-table-odd-row">
-                <td>License Key</td>
-                <td>[[ warpModal.warpData.license_key ]]</td>
-            </tr>
-            <tr>
-                <td>Private Key</td>
-                <td>[[ warpModal.warpData.private_key ]]</td>
-            </tr>
-        </table>
-        <a-button @click="delConfig" :loading="warpModal.confirmLoading" type="danger">{{ i18n "delete" }}</a-button>
-        <a-divider :style="{ margin: '0' }">{{ i18n "pages.xray.outbound.settings" }}</a-divider>
-        <a-collapse :style="{ margin: '10px 0' }">
-            <a-collapse-panel header='WARP/WARP+ License Key'>
+        <a-collapse default-active-key="1">
+            <a-collapse-panel key='1' header='{{ i18n "pages.xray.warp.warpGeneralTitle" }}'>
+                <a-space direction="vertical" size="middle">
+                    <a-radio-group v-if="!ObjectUtil.isEmpty(warpModal.warpConfig)" v-model="warpModal.informationType"
+                        :style="{ width: '100%' }" button-style="solid">
+                        <a-radio-button value="general">
+                            {{ i18n "pages.xray.warp.warpGeneralTab" }}
+                        </a-radio-button>
+                        <a-radio-button value="account">
+                            {{ i18n "pages.xray.warp.warpGeneralAccount" }}
+                        </a-radio-button>
+                    </a-radio-group>
+                    <a-custom-descriptions v-if="warpModal.informationType === 'general'" layout="vertical" size="small"
+                        :column="1">
+                        <a-descriptions-item label='{{ i18n "pages.xray.warp.warpAccessToken" }}'>
+                            [[ warpModal.warpData.access_token ]]
+                        </a-descriptions-item>
+                        <a-descriptions-item label='{{ i18n "pages.xray.warp.warpDeviceId" }}'>
+                            [[ warpModal.warpData.device_id ]]
+                        </a-descriptions-item>
+                        <a-descriptions-item label='{{ i18n "pages.xray.warp.warpLicenseKey" }}'>
+                            [[ warpModal.warpData.license_key ]]
+                        </a-descriptions-item>
+                        <a-descriptions-item label='{{ i18n "pages.xray.warp.warpPrivateKey" }}'>
+                            [[ warpModal.warpData.private_key ]]
+                        </a-descriptions-item>
+                    </a-custom-descriptions>
+                    <a-custom-descriptions
+                        v-if="!ObjectUtil.isEmpty(warpModal.warpConfig) && warpModal.informationType === 'account'"
+                        layout="vertical" size="small" :column="3">
+                        <a-descriptions-item label='{{ i18n "pages.xray.warp.warpDeviceName" }}' :span="3">
+                            [[ warpModal.warpConfig.name ]]
+                        </a-descriptions-item>
+                        <a-descriptions-item label='{{ i18n "pages.xray.warp.warpDeviceModel" }}' :span="3">
+                            [[ warpModal.warpConfig.model ]]
+                        </a-descriptions-item>
+                        <a-descriptions-item label='{{ i18n "pages.xray.warp.warpDeviceEnabled" }}' :span="1">
+                            [[ warpModal.warpConfig.enabled ]]
+                        </a-descriptions-item>
+                        <template v-if="!ObjectUtil.isEmpty(warpModal.warpConfig.account)">
+                            <a-descriptions-item label='{{ i18n "pages.xray.warp.warpAccountType" }}' :span="1">
+                                [[ warpModal.warpConfig.account.account_type ]]
+                            </a-descriptions-item>
+                            <a-descriptions-item label='{{ i18n "pages.xray.warp.warpAccountRole" }}' :span="1">
+                                [[ warpModal.warpConfig.account.role ]]
+                            </a-descriptions-item>
+                            <a-descriptions-item label='{{ i18n "pages.xray.warp.warpPlusData" }}' :span="1">
+                                <a-tag color="green">
+                                    [[ SizeFormatter.sizeFormat(warpModal.warpConfig.account.premium_data) ]]
+                                </a-tag>
+                            </a-descriptions-item>
+                            <a-descriptions-item label='{{ i18n "pages.xray.warp.warpQuota" }}' :span="1">
+                                <a-tag color="green">
+                                    [[ SizeFormatter.sizeFormat(warpModal.warpConfig.account.quota) ]]
+                                </a-tag>
+                            </a-descriptions-item>
+                            <a-descriptions-item label='{{ i18n "pages.xray.warp.warpUsage" }}' :span="1">
+                                <a-tag color="green">
+                                    [[ SizeFormatter.sizeFormat(warpModal.warpConfig.account.usage) ]]
+                                </a-tag>
+                            </a-descriptions-item>
+                        </template>
+                    </a-custom-descriptions>
+                    <a-row type="flex" :style="{ gap: '8px' }">
+                        <a-col :style="{ flex: '1' }">
+                            <a-button icon="sync" @click="getConfig" :style="{ width: '100%' }"
+                                :loading="warpModal.confirmLoading" type="primary">
+                                <span>{{ i18n "info" }}</span>
+                            </a-button>
+                        </a-col>
+                        <a-col :style="{ flex: '1' }">
+                            <a-button icon="delete" @click="delConfig" :loading="warpModal.confirmLoading"
+                                :style="{ width: '100%' }" type="danger">
+                                <span>{{ i18n "delete" }}</span>
+                            </a-button>
+                        </a-col>
+                    </a-row>
+                </a-space>
+            </a-collapse-panel>
+            <a-collapse-panel v-if="!ObjectUtil.isEmpty(warpModal.warpConfig)" key='2'
+                header='{{ i18n "pages.xray.outbound.outboundStatus" }}'>
+                <a-form :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+                    <template v-if="warpOutboundIndex>=0">
+                        <a-tag color="green" :style="{ lineHeight: '31px' }">{{ i18n "enabled" }}</a-tag>
+                        <a-button @click="resetOutbound" :loading="warpModal.confirmLoading" type="danger">{{ i18n
+                            "reset" }}</a-button>
+                    </template>
+                    <template v-else>
+                        <a-tag color="orange" :style="{ lineHeight: '31px' }">{{ i18n "disabled" }}</a-tag>
+                        <a-button @click="addOutbound" :loading="warpModal.confirmLoading" type="primary">{{ i18n
+                            "pages.xray.outbound.addOutbound" }}</a-button>
+                    </template>
+                    </a-form-item>
+                </a-form>
+            </a-collapse-panel>
+            <a-collapse-panel key='3' header='{{ i18n "pages.xray.outbound.settings" }}'>
                 <a-form :colon="false" :label-col="{ md: {span:6} }" :wrapper-col="{ md: {span:14} }">
-                    <a-form-item label="Key">
+                    <a-form-item label='{{ i18n "pages.xray.warp.warpPlusKey" }}'>
                         <a-input v-model="warpPlus"></a-input>
                         <a-button @click="updateLicense(warpPlus)" :disabled="warpPlus.length<26"
                             :loading="warpModal.confirmLoading">{{ i18n "pages.inbounds.update" }}</a-button>
@@ -37,69 +123,16 @@
                 </a-form>
             </a-collapse-panel>
         </a-collapse>
-        <a-divider :style="{ margin: '0' }">{{ i18n "pages.xray.outbound.accountInfo" }}</a-divider>
-        <a-button icon="sync" @click="getConfig" :style="{ marginTop: '5px', marginBottom: '10px' }"
-            :loading="warpModal.confirmLoading" type="primary">{{ i18n "info" }}</a-button>
-        <template v-if="!ObjectUtil.isEmpty(warpModal.warpConfig)">
-            <table :style="{ width: '100%' }">
-                <tr class="client-table-odd-row">
-                    <td>Device Name</td>
-                    <td>[[ warpModal.warpConfig.name ]]</td>
-                </tr>
-                <tr>
-                    <td>Device Model</td>
-                    <td>[[ warpModal.warpConfig.model ]]</td>
-                </tr>
-                <tr class="client-table-odd-row">
-                    <td>Device Enabled</td>
-                    <td>[[ warpModal.warpConfig.enabled ]]</td>
-                </tr>
-                <template v-if="!ObjectUtil.isEmpty(warpModal.warpConfig.account)">
-                    <tr>
-                        <td>Account Type</td>
-                        <td>[[ warpModal.warpConfig.account.account_type ]]</td>
-                    </tr>
-                    <tr class="client-table-odd-row">
-                        <td>Role</td>
-                        <td>[[ warpModal.warpConfig.account.role ]]</td>
-                    </tr>
-                    <tr>
-                        <td>WARP+ Data</td>
-                        <td>[[ SizeFormatter.sizeFormat(warpModal.warpConfig.account.premium_data) ]]</td>
-                    </tr>
-                    <tr class="client-table-odd-row">
-                        <td>Quota</td>
-                        <td>[[ SizeFormatter.sizeFormat(warpModal.warpConfig.account.quota) ]]</td>
-                    </tr>
-                    <tr v-if="!ObjectUtil.isEmpty(warpModal.warpConfig.account.usage)">
-                        <td>Usage</td>
-                        <td>[[ SizeFormatter.sizeFormat(warpModal.warpConfig.account.usage) ]]</td>
-                    </tr>
-                </template>
-            </table>
-            <a-divider :style="{ margin: '10px 0' }">{{ i18n "pages.xray.outbound.outboundStatus" }}</a-divider>
-            <a-form :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-                <template v-if="warpOutboundIndex>=0">
-                    <a-tag color="green" :style="{ lineHeight: '31px' }">{{ i18n "enabled" }}</a-tag>
-                    <a-button @click="resetOutbound" :loading="warpModal.confirmLoading" type="danger">{{ i18n "reset" }}</a-button>
-                </template>
-                <template v-else>
-                    <a-tag color="orange" :style="{ lineHeight: '31px' }">{{ i18n "disabled" }}</a-tag>
-                    <a-button @click="addOutbound" :loading="warpModal.confirmLoading" type="primary">{{ i18n "pages.xray.outbound.addOutbound" }}</a-button>
-                </template>
-                </a-form-item>
-            </a-form>
-        </template>
     </template>
 </a-modal>
 <script>
-
     const warpModal = {
         visible: false,
         confirmLoading: false,
         warpData: null,
         warpConfig: null,
         warpOutbound: null,
+        informationType: "general",
         show() {
             this.visible = true;
             this.warpConfig = null;
diff --git a/web/html/xray.html b/web/html/xray.html
index 68c71523..57f958ee 100644
--- a/web/html/xray.html
+++ b/web/html/xray.html
@@ -123,6 +123,7 @@
 {{template "component/aThemeSwitch" .}}
 {{template "component/aTableSortable" .}}
 {{template "component/aSettingListItem" .}}
+{{template "component/aCustomDescriptions" .}}
 {{template "modals/ruleModal"}}
 {{template "modals/outModal"}}
 {{template "modals/reverseModal"}}
diff --git a/web/translation/translate.ar_EG.toml b/web/translation/translate.ar_EG.toml
index 1dff48b7..2db8a904 100644
--- a/web/translation/translate.ar_EG.toml
+++ b/web/translation/translate.ar_EG.toml
@@ -451,6 +451,27 @@
 "outboundStatus" = "حالة المخرج"
 "sendThrough" = "أرسل من خلال"
 
+[pages.xray.warp]
+"warpCreateOutbound" = "إنشاء صادر"
+"warpModalTitle" = "ما هذا؟"
+"warpModalDescription" = "قم بإنشاء صادِر يقوم بتشفير حركة مرور الإنترنت للمستخدم وتسريعها من خلال توجيهها عبر شبكة Cloudflare العالمية، مما يوفر الأمان وتحسين الأداء."
+"warpGeneralTitle" = "المعلومات العامة"
+"warpGeneralTab" = "عام"
+"warpGeneralAccount" = "الحساب"
+"warpAccessToken" = "رمز الوصول"
+"warpDeviceId" = "معرّف الجهاز"
+"warpLicenseKey" = "مفتاح الترخيص"
+"warpPrivateKey" = "المفتاح الخاص"
+"warpPlusKey" = "مفتاح WARP+"
+"warpDeviceName" = "اسم الجهاز"
+"warpDeviceModel" = "موديل الجهاز"
+"warpDeviceEnabled" = "مفعل"
+"warpAccountType" = "نوع الحساب"
+"warpAccountRole" = "الدور"
+"warpPlusData" = "بيانات WARP+"
+"warpQuota" = "الحصة"
+"warpUsage" = "الاستخدام"
+
 [pages.xray.balancer]
 "addBalancer" = "أضف موازن تحميل"
 "editBalancer" = "عدل موازن التحميل"
diff --git a/web/translation/translate.en_US.toml b/web/translation/translate.en_US.toml
index 7a166d8d..f2615e44 100644
--- a/web/translation/translate.en_US.toml
+++ b/web/translation/translate.en_US.toml
@@ -451,6 +451,27 @@
 "outboundStatus" = "Outbound Status"
 "sendThrough" = "Send Through"
 
+[pages.xray.warp]
+"warpCreateOutbound" = "Create outbound"
+"warpModalTitle" = "What's it?"
+"warpModalDescription" = "Create a outbound that encrypts user internet traffic and speeds it up by routing it through Cloudflare's global network, providing security and improved performance."
+"warpGeneralTitle" = "General Information"
+"warpGeneralTab" = "General"
+"warpGeneralAccount" = "Account"
+"warpAccessToken" = "Access token"
+"warpDeviceId" = "Device ID"
+"warpLicenseKey" = "License key"
+"warpPrivateKey" = "Private key"
+"warpPlusKey" = "WARP+ key"
+"warpDeviceName" = "Device name"
+"warpDeviceModel" = "Device model"
+"warpDeviceEnabled" = "Is enabled"
+"warpAccountType" = "Account type"
+"warpAccountRole" = "Role"
+"warpPlusData" = "WARP+ data"
+"warpQuota" = "Quota"
+"warpUsage" = "Usage"
+
 [pages.xray.balancer]
 "addBalancer" = "Add Balancer"
 "editBalancer" = "Edit Balancer"
diff --git a/web/translation/translate.es_ES.toml b/web/translation/translate.es_ES.toml
index 135919c4..87b5b2c7 100644
--- a/web/translation/translate.es_ES.toml
+++ b/web/translation/translate.es_ES.toml
@@ -453,6 +453,27 @@
 "outboundStatus" = "Estado de Salida"
 "sendThrough" = "Enviar a través de"
 
+[pages.xray.warp]
+"warpCreateOutbound" = "Crear saliente"
+"warpModalTitle" = "¿Qué es?"
+"warpModalDescription" = "Crea una salida que cifra el tráfico de internet del usuario y lo acelera al enrutarlo a través de la red global de Cloudflare, proporcionando seguridad y mejor rendimiento."
+"warpGeneralTitle" = "Información general"
+"warpGeneralTab" = "General"
+"warpGeneralAccount" = "Cuenta"
+"warpAccessToken" = "Token de acceso"
+"warpDeviceId" = "ID del dispositivo"
+"warpLicenseKey" = "Clave de licencia"
+"warpPrivateKey" = "Clave privada"
+"warpPlusKey" = "Clave WARP+"
+"warpDeviceName" = "Nombre del dispositivo"
+"warpDeviceModel" = "Modelo del dispositivo"
+"warpDeviceEnabled" = "Está activado"
+"warpAccountType" = "Tipo de cuenta"
+"warpAccountRole" = "Rol"
+"warpPlusData" = "Datos WARP+"
+"warpQuota" = "Cuota"
+"warpUsage" = "Uso"
+
 [pages.xray.balancer]
 "addBalancer" = "Agregar equilibrador"
 "editBalancer" = "Editar balanceador"
diff --git a/web/translation/translate.fa_IR.toml b/web/translation/translate.fa_IR.toml
index d1b21ad0..2d500f1f 100644
--- a/web/translation/translate.fa_IR.toml
+++ b/web/translation/translate.fa_IR.toml
@@ -453,6 +453,27 @@
 "outboundStatus" = "وضعیت خروجی"
 "sendThrough" = "ارسال با"
 
+[pages.xray.warp]
+"warpCreateOutbound" = "ایجاد خروجی"
+"warpModalTitle" = "این چیست؟"
+"warpModalDescription" = "یک خروجی ایجاد کنید که ترافیک اینترنت کاربر را رمزگذاری کرده و با مسیریابی از طریق شبکه جهانی Cloudflare آن را سریع‌تر می‌کند، امنیت و عملکرد بهتری را فراهم می‌کند."
+"warpGeneralTitle" = "اطلاعات کلی"
+"warpGeneralTab" = "عمومی"
+"warpGeneralAccount" = "حساب"
+"warpAccessToken" = "توکن دسترسی"
+"warpDeviceId" = "شناسه دستگاه"
+"warpLicenseKey" = "کلید لایسنس"
+"warpPrivateKey" = "کلید خصوصی"
+"warpPlusKey" = "کلید WARP+"
+"warpDeviceName" = "نام دستگاه"
+"warpDeviceModel" = "مدل دستگاه"
+"warpDeviceEnabled" = "فعال است"
+"warpAccountType" = "نوع حساب"
+"warpAccountRole" = "نقش"
+"warpPlusData" = "داده‌های WARP+"
+"warpQuota" = "سهمیه"
+"warpUsage" = "مصرف"
+
 [pages.xray.balancer]
 "addBalancer" = "افزودن بالانسر"
 "editBalancer" = "ویرایش بالانسر"
diff --git a/web/translation/translate.id_ID.toml b/web/translation/translate.id_ID.toml
index f35f5dfd..d902ff66 100644
--- a/web/translation/translate.id_ID.toml
+++ b/web/translation/translate.id_ID.toml
@@ -453,6 +453,27 @@
 "outboundStatus" = "Status Keluar"
 "sendThrough" = "Kirim Melalui"
 
+[pages.xray.warp]
+"warpCreateOutbound" = "Buat outbound"
+"warpModalTitle" = "Apa ini?"
+"warpModalDescription" = "Buat outbound yang mengenkripsi lalu lintas internet pengguna dan mempercepatnya dengan merutekannya melalui jaringan global Cloudflare, memberikan keamanan dan peningkatan kinerja."
+"warpGeneralTitle" = "Informasi Umum"
+"warpGeneralTab" = "Umum"
+"warpGeneralAccount" = "Akun"
+"warpAccessToken" = "Token akses"
+"warpDeviceId" = "ID perangkat"
+"warpLicenseKey" = "Kunci lisensi"
+"warpPrivateKey" = "Kunci pribadi"
+"warpPlusKey" = "Kunci WARP+"
+"warpDeviceName" = "Nama perangkat"
+"warpDeviceModel" = "Model perangkat"
+"warpDeviceEnabled" = "Diaktifkan"
+"warpAccountType" = "Tipe akun"
+"warpAccountRole" = "Peran"
+"warpPlusData" = "Data WARP+"
+"warpQuota" = "Kuota"
+"warpUsage" = "Penggunaan"
+
 [pages.xray.balancer]
 "addBalancer" = "Tambahkan Penyeimbang"
 "editBalancer" = "Sunting Penyeimbang"
diff --git a/web/translation/translate.ja_JP.toml b/web/translation/translate.ja_JP.toml
index cb46541e..a7324717 100644
--- a/web/translation/translate.ja_JP.toml
+++ b/web/translation/translate.ja_JP.toml
@@ -453,6 +453,27 @@
 "outboundStatus" = "アウトバウンドステータス"
 "sendThrough" = "送信経路"
 
+[pages.xray.warp]
+"warpCreateOutbound" = "アウトバウンドを作成"
+"warpModalTitle" = "何ですか？"
+"warpModalDescription" = "ユーザーのインターネットトラフィックを暗号化し、Cloudflareのグローバルネットワークを経由してルーティングすることで高速化し、セキュリティとパフォーマンスの向上を提供します。"
+"warpGeneralTitle" = "基本情報"
+"warpGeneralTab" = "一般"
+"warpGeneralAccount" = "アカウント"
+"warpAccessToken" = "アクセストークン"
+"warpDeviceId" = "デバイスID"
+"warpLicenseKey" = "ライセンスキー"
+"warpPrivateKey" = "秘密鍵"
+"warpPlusKey" = "WARP+キー"
+"warpDeviceName" = "デバイス名"
+"warpDeviceModel" = "デバイスモデル"
+"warpDeviceEnabled" = "有効"
+"warpAccountType" = "アカウントタイプ"
+"warpAccountRole" = "役割"
+"warpPlusData" = "WARP+データ"
+"warpQuota" = "クォータ"
+"warpUsage" = "使用量"
+
 [pages.xray.balancer]
 "addBalancer" = "負荷分散追加"
 "editBalancer" = "負荷分散編集"
diff --git a/web/translation/translate.pt_BR.toml b/web/translation/translate.pt_BR.toml
index 1b3eaea9..e925bf57 100644
--- a/web/translation/translate.pt_BR.toml
+++ b/web/translation/translate.pt_BR.toml
@@ -453,6 +453,27 @@
 "outboundStatus" = "Status de Saída"
 "sendThrough" = "Enviar Através de"
 
+[pages.xray.warp]
+"warpCreateOutbound" = "Criar saída"
+"warpModalTitle" = "O que é?"
+"warpModalDescription" = "Crie uma saída que criptografa o tráfego de internet do usuário e o acelera ao roteá-lo pela rede global da Cloudflare, fornecendo segurança e melhor desempenho."
+"warpGeneralTitle" = "Informações Gerais"
+"warpGeneralTab" = "Geral"
+"warpGeneralAccount" = "Conta"
+"warpAccessToken" = "Token de acesso"
+"warpDeviceId" = "ID do dispositivo"
+"warpLicenseKey" = "Chave de licença"
+"warpPrivateKey" = "Chave privada"
+"warpPlusKey" = "Chave WARP+"
+"warpDeviceName" = "Nome do dispositivo"
+"warpDeviceModel" = "Modelo do dispositivo"
+"warpDeviceEnabled" = "Está ativado"
+"warpAccountType" = "Tipo de conta"
+"warpAccountRole" = "Função"
+"warpPlusData" = "Dados WARP+"
+"warpQuota" = "Cota"
+"warpUsage" = "Uso"
+
 [pages.xray.balancer]
 "addBalancer" = "Adicionar Balanceador"
 "editBalancer" = "Editar Balanceador"
diff --git a/web/translation/translate.ru_RU.toml b/web/translation/translate.ru_RU.toml
index 685fa6e2..2c497bad 100644
--- a/web/translation/translate.ru_RU.toml
+++ b/web/translation/translate.ru_RU.toml
@@ -453,6 +453,27 @@
 "outboundStatus" = "Исходящий статус"
 "sendThrough" = "Отправить через"
 
+[pages.xray.warp]
+"warpCreateOutbound" = "Создать исходящее подключение"
+"warpModalTitle" = "Что это?"
+"warpModalDescription" = "Создайте исходящее подключение, которое шифрует интернет-трафик пользователя и ускоряет его, маршрутизируя через глобальную сеть Cloudflare, обеспечивая безопасность и повышенную производительность."
+"warpGeneralTitle" = "Общая информация"
+"warpGeneralTab" = "Общее"
+"warpGeneralAccount" = "Аккаунт"
+"warpAccessToken" = "Токен доступа"
+"warpDeviceId" = "ID устройства"
+"warpLicenseKey" = "Лицензионный ключ"
+"warpPrivateKey" = "Приватный ключ"
+"warpPlusKey" = "Ключ WARP+"
+"warpDeviceName" = "Название устройства"
+"warpDeviceModel" = "Модель устройства"
+"warpDeviceEnabled" = "Активирован"
+"warpAccountType" = "Тип аккаунта"
+"warpAccountRole" = "Роль"
+"warpPlusData" = "Данные WARP+"
+"warpQuota" = "Квота"
+"warpUsage" = "Использование"
+
 [pages.xray.balancer]
 "addBalancer" = "Создать балансировщик"
 "editBalancer" = "Редактировать балансировщик"
diff --git a/web/translation/translate.tr_TR.toml b/web/translation/translate.tr_TR.toml
index 10543f8b..f3517ff4 100644
--- a/web/translation/translate.tr_TR.toml
+++ b/web/translation/translate.tr_TR.toml
@@ -453,6 +453,27 @@
 "outboundStatus" = "Giden Durumu"
 "sendThrough" = "Üzerinden Gönder"
 
+[pages.xray.warp]
+"warpCreateOutbound" = "Giden oluştur"
+"warpModalTitle" = "Bu nedir?"
+"warpModalDescription" = "Kullanıcının internet trafiğini şifreleyen ve Cloudflare'in küresel ağı üzerinden yönlendirerek hızlandıran bir giden bağlantı oluşturun, böylece güvenlik ve performans artışı sağlayın."
+"warpGeneralTitle" = "Genel Bilgiler"
+"warpGeneralTab" = "Genel"
+"warpGeneralAccount" = "Hesap"
+"warpAccessToken" = "Erişim belirteci"
+"warpDeviceId" = "Cihaz Kimliği"
+"warpLicenseKey" = "Lisans anahtarı"
+"warpPrivateKey" = "Özel anahtar"
+"warpPlusKey" = "WARP+ anahtarı"
+"warpDeviceName" = "Cihaz adı"
+"warpDeviceModel" = "Cihaz modeli"
+"warpDeviceEnabled" = "Etkin mi"
+"warpAccountType" = "Hesap türü"
+"warpAccountRole" = "Rol"
+"warpPlusData" = "WARP+ verisi"
+"warpQuota" = "Kota"
+"warpUsage" = "Kullanım"
+
 [pages.xray.balancer]
 "addBalancer" = "Dengeleyici Ekle"
 "editBalancer" = "Dengeleyiciyi Düzenle"
diff --git a/web/translation/translate.uk_UA.toml b/web/translation/translate.uk_UA.toml
index a1f4a23b..aa752d38 100644
--- a/web/translation/translate.uk_UA.toml
+++ b/web/translation/translate.uk_UA.toml
@@ -453,6 +453,27 @@
 "outboundStatus" = "Статус виходу"
 "sendThrough" = "Надіслати через"
 
+[pages.xray.warp]
+"warpCreateOutbound" = "Створити вихідний"
+"warpModalTitle" = "Що це?"
+"warpModalDescription" = "Створіть вихідне підключення, яке шифрує інтернет-трафік користувача та прискорює його, маршрутизуючи через глобальну мережу Cloudflare, забезпечуючи безпеку та покращену продуктивність."
+"warpGeneralTitle" = "Загальна інформація"
+"warpGeneralTab" = "Загальне"
+"warpGeneralAccount" = "Акаунт"
+"warpAccessToken" = "Токен доступу"
+"warpDeviceId" = "ID пристрою"
+"warpLicenseKey" = "Ліцензійний ключ"
+"warpPrivateKey" = "Приватний ключ"
+"warpPlusKey" = "Ключ WARP+"
+"warpDeviceName" = "Назва пристрою"
+"warpDeviceModel" = "Модель пристрою"
+"warpDeviceEnabled" = "Активовано"
+"warpAccountType" = "Тип акаунта"
+"warpAccountRole" = "Роль"
+"warpPlusData" = "Дані WARP+"
+"warpQuota" = "Квота"
+"warpUsage" = "Використання"
+
 [pages.xray.balancer]
 "addBalancer" = "Додати балансир"
 "editBalancer" = "Редагувати балансир"
diff --git a/web/translation/translate.vi_VN.toml b/web/translation/translate.vi_VN.toml
index 8fc9f1c4..ba54ed77 100644
--- a/web/translation/translate.vi_VN.toml
+++ b/web/translation/translate.vi_VN.toml
@@ -453,6 +453,27 @@
 "outboundStatus" = "Trạng thái đầu ra"
 "sendThrough" = "Gửi qua"
 
+[pages.xray.warp]
+"warpCreateOutbound" = "Tạo kết nối ra"
+"warpModalTitle" = "Cái gì đây?"
+"warpModalDescription" = "Tạo một kết nối ra mã hóa lưu lượng internet của người dùng và tăng tốc bằng cách định tuyến qua mạng toàn cầu của Cloudflare, cung cấp bảo mật và hiệu suất tốt hơn."
+"warpGeneralTitle" = "Thông tin chung"
+"warpGeneralTab" = "Chung"
+"warpGeneralAccount" = "Tài khoản"
+"warpAccessToken" = "Token truy cập"
+"warpDeviceId" = "ID thiết bị"
+"warpLicenseKey" = "Khóa bản quyền"
+"warpPrivateKey" = "Khóa riêng tư"
+"warpPlusKey" = "Khóa WARP+"
+"warpDeviceName" = "Tên thiết bị"
+"warpDeviceModel" = "Model thiết bị"
+"warpDeviceEnabled" = "Đã bật"
+"warpAccountType" = "Loại tài khoản"
+"warpAccountRole" = "Vai trò"
+"warpPlusData" = "Dữ liệu WARP+"
+"warpQuota" = "Hạn ngạch"
+"warpUsage" = "Lượng dùng"
+
 [pages.xray.balancer]
 "addBalancer" = "Thêm cân bằng"
 "editBalancer" = "Chỉnh sửa cân bằng"
diff --git a/web/translation/translate.zh_CN.toml b/web/translation/translate.zh_CN.toml
index c7619f8f..da348ae5 100644
--- a/web/translation/translate.zh_CN.toml
+++ b/web/translation/translate.zh_CN.toml
@@ -453,6 +453,27 @@
 "outboundStatus" = "出站状态"
 "sendThrough" = "发送通过"
 
+[pages.xray.warp]
+"warpCreateOutbound" = "创建出站"
+"warpModalTitle" = "这是什么？"
+"warpModalDescription" = "创建一个出站连接，加密用户的互联网流量并通过Cloudflare的全球网络进行路由加速，提供安全性和性能提升。"
+"warpGeneralTitle" = "基本信息"
+"warpGeneralTab" = "通用"
+"warpGeneralAccount" = "账户"
+"warpAccessToken" = "访问令牌"
+"warpDeviceId" = "设备ID"
+"warpLicenseKey" = "许可证密钥"
+"warpPrivateKey" = "私钥"
+"warpPlusKey" = "WARP+密钥"
+"warpDeviceName" = "设备名称"
+"warpDeviceModel" = "设备型号"
+"warpDeviceEnabled" = "已启用"
+"warpAccountType" = "账户类型"
+"warpAccountRole" = "角色"
+"warpPlusData" = "WARP+数据"
+"warpQuota" = "配额"
+"warpUsage" = "使用量"
+
 [pages.xray.balancer]
 "addBalancer" = "添加负载均衡"
 "editBalancer" = "编辑负载均衡"
diff --git a/web/translation/translate.zh_TW.toml b/web/translation/translate.zh_TW.toml
index 27245959..78c1fc06 100644
--- a/web/translation/translate.zh_TW.toml
+++ b/web/translation/translate.zh_TW.toml
@@ -453,6 +453,27 @@
 "outboundStatus" = "出站狀態"
 "sendThrough" = "傳送通過"
 
+[pages.xray.warp]
+"warpCreateOutbound" = "建立出站"
+"warpModalTitle" = "這是什麼？"
+"warpModalDescription" = "建立一個出站連接，加密用戶的網路流量並通過Cloudflare的全球網路進行路由加速，提供安全性和效能提升。"
+"warpGeneralTitle" = "基本資訊"
+"warpGeneralTab" = "通用"
+"warpGeneralAccount" = "帳戶"
+"warpAccessToken" = "存取權杖"
+"warpDeviceId" = "裝置ID"
+"warpLicenseKey" = "授權金鑰"
+"warpPrivateKey" = "私鑰"
+"warpPlusKey" = "WARP+金鑰"
+"warpDeviceName" = "裝置名稱"
+"warpDeviceModel" = "裝置型號"
+"warpDeviceEnabled" = "已啟用"
+"warpAccountType" = "帳戶類型"
+"warpAccountRole" = "角色"
+"warpPlusData" = "WARP+數據"
+"warpQuota" = "配額"
+"warpUsage" = "使用量"
+
 [pages.xray.balancer]
 "addBalancer" = "新增負載均衡"
 "editBalancer" = "編輯負載均衡"