3x-ui/web/html/modals/dns_presets_modal.html

{{define "modals/dnsPresetsModal"}}
<a-modal id="dnsPresets-modal" v-model="dnsPresetsModal.visible" :title="dnsPresetsModal.title" :closable="true"
  :mask-closable="false" :footer="null" :class="themeSwitcher.currentTheme">
  <a-list class="ant-dns-presets-list" bordered :style="{ width: '100%' }">
    <a-list-item v-for="dns in dnsPresetsDatabase" :style="{ padding: '12px 16px' }">
      <div class="ant-dns-presets-line">
        <a-space direction="horizontal" size="small" align="center">
          <a-tag :color="dns.family ? 'purple' : 'green'">[[ dns.family ? '{{ i18n "pages.xray.dns.dnsPresetFamily" }}'
            : 'DNS' ]]</a-tag>
          <span class="ant-dns-presets-list-name">[[ dns.name ]]</span>
        </a-space>
        <a-button class="ant-dns-presets-install" type="primary"
          @click="dnsPresetsModal.install(dns.data)">{{ i18n "install" }}</a-button>
      </div>
    </a-list-item>
  </a-list>
</a-modal>

<style>
  .ant-dns-presets-line {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
  }

  .ant-dns-presets-install {
    margin-left: auto;
  }

  .dark .ant-dns-presets-list {
    border-color: var(--dark-color-stroke)
  }

  .dark .ant-dns-presets-list-name {
    color: var(--dark-color-text-primary);
  }
</style>

<script>
  const dnsPresetsDatabase = [{
      name: 'Google DNS',
      family: false,
      data: [
        "8.8.8.8",
        "8.8.4.4",
        "2001:4860:4860::8888",
        "2001:4860:4860::8844"
      ]
    },
    {
      name: 'Cloudflare DNS',
      family: false,
      data: [
        "1.1.1.1",
        "1.0.0.1",
        "2606:4700:4700::1111",
        "2606:4700:4700::1001"
      ]
    },
    {
      name: 'Adguard DNS',
      family: false,
      data: [
        "94.140.14.14",
        "94.140.15.15",
        "2a10:50c0::ad1:ff",
        "2a10:50c0::ad2:ff"
      ]
    },
    {
      name: 'Adguard Family DNS',
      family: true,
      data: [
        "94.140.14.14",
        "94.140.15.15",
        "2a10:50c0::ad1:ff",
        "2a10:50c0::ad2:ff"
      ]
    },
    {
      name: 'Cloudflare Family DNS',
      family: true,
      data: [
        "1.1.1.3",
        "1.0.0.3",
        "2606:4700:4700::1113",
        "2606:4700:4700::1003"
      ]
    }
  ]

  const dnsPresetsModal = {
    title: '',
    visible: false,
    selected: null,
    install(selectedPreset) {
      return ObjectUtil.execute(dnsPresetsModal.selected, selectedPreset);
    },
    show({
      title = '',
      selected = (selectedPreset) => {},
      isEdit = false
    }) {
      this.title = title;
      this.selected = selected;
      this.visible = true;
    },
    close() {
      dnsPresetsModal.visible = false;
    },
  };

  new Vue({
    delimiters: ['[[', ']]'],
    el: '#dnsPresets-modal',
    data: {
      dnsPresetsModal: dnsPresetsModal,
    }
  });
</script>
{{end}}