<ul class="nav nav-tabs">
  <li class="nav-item">
    <span class="nav-item navbar-brand" aria-current="page">
      <h4>&nbsp;&nbsp;<?= ICONS['DESKTOP'] ?> <?= $viewDatas['content_title'] ?>&nbsp;&nbsp;</h4>
    </span>
  </li>
  <li class="nav-item">
    <span class="nav-link active" aria-current="page" data-bs-toggle="modal" data-bs-target="#DNSModal" style="cursor:pointer;">Cloudflare DNS</span>
  </li>
</ul>
<div class="modal fade" id="DNSModal" tabindex="-1" aria-labelledby="CloudflareDNSModal" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="CloudflareDNSModal">Cloudflare DNS</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <style>
          table.cloudflare {
            width: 100%;
            border: thin solid;
          }

          table.cloudflare th {
            border: thin solid;
            text-align: center;
            padding: 0px 5px 0px 5px;
            background-color: #e8e9ea;
          }

          table.cloudflare td {
            border: thin solid;
            text-align: center;
            padding: 0px 5px 0px 5px;
          }

          table.cloudflare td.dnsname:hover {
            cursor: pointer;
            background-color: #fde9bf;
          }
        </style>
        <script>
          function copyToClipboard(element, domain) {
            navigator.clipboard.writeText(domain);
            element.style.backgroundColor = '#fde9bf';
          }
        </script>
        <table class="cloudflare">
          <tr>
            <th>cloudprime001@idcjp.jp(영,숫자)</th>
            <td class="dnsname" onclick="copyToClipboard(this,'felicity.ns.cloudflare.com')">felicity.ns.cloudflare.com</td>
            <td class="dnsname" onclick="copyToClipboard(this,'tara.ns.cloudflare.com')">tara.ns.cloudflare.com</td>
          </tr>
          <tr>
            <th>cloudjp002@idcjp.jp(ㄱ~ㅅ)</th>
            <td class="dnsname" onclick="copyToClipboard(this,'aida.ns.cloudflare.com');">aida.ns.cloudflare.com</td>
            <td class="dnsname" onclick="copyToClipboard(this,'kurt.ns.cloudflare.com');">kurt.ns.cloudflare.com</td>
          </tr>
          <tr>
            <th>jpcf003@gmail.com(ㅇ~ㅎ)</th>
            <td class="dnsname" onclick="copyToClipboard(this,'natasha.ns.cloudflare.com');">natasha.ns.cloudflare.com</td>
            <td class="dnsname" onclick="copyToClipboard(this,'plato.ns.cloudflare.com');">plato.ns.cloudflare.com</td>
          </tr>
          <tr>
            <th>cloudwin001@idcjp.jp(영,숫자)</th>
            <td class="dnsname" onclick="copyToClipboard(this,'alina.ns.cloudflare.com');">alina.ns.cloudflare.com</td>
            <td class="dnsname" onclick="copyToClipboard(this,'rick.ns.cloudflare.com');">rick.ns.cloudflare.com</td>
          </tr>
          <tr>
            <th>cloudwin002@idcjp.jp(ㄱ~ㅅ)</th>
            <td class="dnsname" onclick="copyToClipboard(this,'hope.ns.cloudflare.com');">hope.ns.cloudflare.com</td>
            <td class="dnsname" onclick="copyToClipboard(this,'piotr.ns.cloudflare.com');">piotr.ns.cloudflare.com</td>
          </tr>
          <tr>
            <th>cloudwin003@idcjp.jp(ㅇ~ㅎ)</th>
            <td class="dnsname" onclick="copyToClipboard(this,'tani.ns.cloudflare.com');">tani.ns.cloudflare.com</td>
            <td class="dnsname" onclick="copyToClipboard(this,'woz.ns.cloudflare.com');">woz.ns.cloudflare.com</td>
          </tr>
        </table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>