path: root/web/html/index.html

{{ template "page/head_start" .}}
{{ template "page/head_end" .}}

{{ template "page/body_start" .}}
<style>
  body.dark .custom-geo-section code.custom-geo-ext-code {
    color: var(--dark-color-text-primary, rgba(255, 255, 255, 0.85));
    background: var(--dark-color-surface-200, #222d42);
    border: 1px solid var(--dark-color-stroke, #2c3950);
    padding: 2px 6px;
    border-radius: 3px;
  }
  html[data-theme="ultra-dark"] body.dark .custom-geo-section code.custom-geo-ext-code {
    color: var(--dark-color-text-primary, rgba(255, 255, 255, 0.88));
    background: var(--dark-color-surface-700, #111929);
    border-color: var(--dark-color-stroke, #2c3950);
  }
</style>
<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme + ' index-page'">
  <a-sidebar></a-sidebar>
  <a-layout id="content-layout">
    <a-layout-content>
      <a-spin :spinning="loadingStates.spinning" :delay="200" :tip="loadingTip" size="large">
        <transition name="list" appear>
          <a-alert type="error" v-if="showAlert && loadingStates.fetched" class="mb-10"
            message='{{ i18n "secAlertTitle" }}' color="red" description='{{ i18n "secAlertSsl" }}' show-icon closable>
          </a-alert>
        </transition>
        <transition name="list" appear>
          <template>
            <a-row v-if="!loadingStates.fetched">
              <div :style="{ minHeight: 'calc(100vh - 120px)' }"></div>
            </a-row>
            <a-row :gutter="[isMobile ? 8 : 16, isMobile ? 0 : 12]" v-else>
              <a-col>
                <a-card hoverable>
                  <a-row :gutter="[0, isMobile ? 16 : 0]">
                    <a-col :sm="24" :md="12">
                      <a-row>
                        <a-col :span="12" class="text-center">
                          <a-progress type="dashboard" status="normal" :stroke-color="status.cpu.color"
                            :percent="status.cpu.percent"></a-progress>
                          <div>
                            <b>{{ i18n "pages.index.cpu" }}:</b> [[ CPUFormatter.cpuCoreFormat(status.cpuCores) ]]
                            <a-tooltip>
                              <a-icon type="area-chart"></a-icon>
                              <template slot="title">
                                <div><b>{{ i18n "pages.index.logicalProcessors" }}:</b> [[ (status.logicalPro) ]]</div>
                                <div><b>{{ i18n "pages.index.frequency" }}:</b> [[
                                  CPUFormatter.cpuSpeedFormat(status.cpuSpeedMhz) ]]</div>
                              </template>
                            </a-tooltip>
                            <a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
                              <a-button size="small" shape="circle" class="ml-8" @click="openCpuHistory()">
                                <a-icon type="history" />
                              </a-button>
                            </a-tooltip>
                          </div>
                        </a-col>
                        <a-col :span="12" class="text-center">
                          <a-progress type="dashboard" status="normal" :stroke-color="status.mem.color"
                            :percent="status.mem.percent"></a-progress>
                          <div>
                            <b>{{ i18n "pages.index.memory"}}:</b> [[ SizeFormatter.sizeFormat(status.mem.current) ]] /
                            [[ SizeFormatter.sizeFormat(status.mem.total) ]]
                          </div>
                        </a-col>
                      </a-row>
                    </a-col>
                    <a-col :sm="24" :md="12">
                      <a-row>
                        <a-col :span="12" class="text-center">
                          <a-progress type="dashboard" status="normal" :stroke-color="status.swap.color"
                            :percent="status.swap.percent"></a-progress>
                          <div>
                            <b>{{ i18n "pages.index.swap" }}:</b> [[ SizeFormatter.sizeFormat(status.swap.current) ]] /
                            [[ SizeFormatter.sizeFormat(status.swap.total) ]]
                          </div>
                        </a-col>
                        <a-col :span="12" class="text-center">
                          <a-progress type="dashboard" status="normal" :stroke-color="status.disk.color"
                            :percent="status.disk.percent"></a-progress>
                          <div>
                            <b>{{ i18n "pages.index.storage"}}:</b> [[ SizeFormatter.sizeFormat(status.disk.current) ]]
                            / [[ SizeFormatter.sizeFormat(status.disk.total) ]]
                          </div>
                        </a-col>
                      </a-row>
                    </a-col>
                  </a-row>
                </a-card>
              </a-col>
              <a-col :sm="24" :lg="12">
                <a-card hoverable>
                  <template #title>
                    <a-space direction="horizontal">
                      <span>{{ i18n "pages.index.xrayStatus" }}</span>
                      <a-tag v-if="isMobile && status.xray.version != 'Unknown'" color="green">
                        v[[ status.xray.version ]]
                      </a-tag>
                    </a-space>
                  </template>
                  <template #extra>
                    <template v-if="status.xray.state != 'error'">
                      <a-badge status="processing"
                        :class="({ green: 'xray-running-animation', orange: 'xray-stop-animation' }[status.xray.color]) || 'xray-processing-animation'"
                        :text="status.xray.stateMsg" :color="status.xray.color" />
                    </template>
                    <template v-else>
                      <a-popover :overlay-class-name="themeSwitcher.currentTheme">
                        <span slot="title">
                          <a-row type="flex" align="middle" justify="space-between">
                            <a-col>
                              <span>{{ i18n "pages.index.xrayErrorPopoverTitle" }}</span>
                            </a-col>
                            <a-col>
                              <a-icon type="bars" class="cursor-pointer float-right" @click="openLogs()"></a-icon>
                            </a-col>
                          </a-row>
                        </span>
                        <template slot="content">
                          <span class="max-w-400" v-for="line in (status.xray.errorMsg || '').split('\n')">[[ line ]]</span>
                        </template>
                        <a-badge :text="status.xray.stateMsg" :color="status.xray.color"
                          :class="status.xray.color === 'red' ? 'xray-error-animation' : ''" />
                      </a-popover>
                    </template>
                  </template>
                  <template #actions>
                    <a-space v-if="ipLimitEnable" direction="horizontal" @click="openXrayLogs()" class="jc-center">
                      <a-icon type="bars"></a-icon>
                      <span v-if="!isMobile">{{ i18n "pages.index.logs" }}</span>
                    </a-space>
                    <a-space direction="horizontal" @click="stopXrayService" class="jc-center">
                      <a-icon type="poweroff"></a-icon>
                      <span v-if="!isMobile">{{ i18n "pages.index.stopXray" }}</span>
                    </a-space>
                    <a-space direction="horizontal" @click="restartXrayService" class="jc-center">
                      <a-icon type="reload"></a-icon>
                      <span v-if="!isMobile">{{ i18n "pages.index.restartXray" }}</span>
                    </a-space>
                    <a-space direction="horizontal" @click="openSelectV2rayVersion()" class="jc-center">
                      <a-icon type="tool"></a-icon>
                      <span v-if="!isMobile">
                        [[ status.xray.version != 'Unknown' ? `v${status.xray.version}` : '{{ i18n
                        "pages.index.xraySwitch" }}' ]]
                      </span>
                    </a-space>
                  </template>
                </a-card>
              </a-col>
              <a-col :sm="24" :lg="12">
                <a-card title='{{ i18n "menu.link" }}' hoverable>
                  <template #actions>
                    <a-space direction="horizontal" @click="openLogs()" class="jc-center">
                      <a-icon type="bars"></a-icon>
                      <span v-if="!isMobile">{{ i18n "pages.index.logs" }}</span>
                    </a-space>
                    <a-space direction="horizontal" @click="openConfig" class="jc-center">
                      <a-icon type="control"></a-icon>
                      <span v-if="!            

                

                    
                        contacts: admin@thfree.ru
                    
                
                

                    
                        mirrors for living