artsite/views/header.ejs

<link rel="stylesheet" href="/stylesheets/header.css">

<header class="header">
  <div class="dropdown">
    <svg class="dropbtn" style="margin-right: 5px;" width="24px" height="24px" viewBox="0 0 24 24" fill="none"
      xmlns="http://www.w3.org/2000/svg">
      <path opacity="0.5" d="M21 6L3 6" stroke="#1C274C" stroke-width="2.0" stroke-linecap="round" />
      <path opacity="0.5" d="M21 10L3 10" stroke="#1C274C" stroke-width="2.0" stroke-linecap="round" />
      <path opacity="0.5" d="M10 14H3" stroke="#1C274C" stroke-width="2.0" stroke-linecap="round" />
      <path opacity="0.5" d="M10 18H3" stroke="#1C274C" stroke-width="2.0" stroke-linecap="round" />
      <path d="M14 15L17.5 18L21 15" stroke="#1C274C" stroke-width="2.5" stroke-linecap="round"
        stroke-linejoin="round" />
    </svg>
    <div class="dropdown-home-content">
      <a href="/<%= lang %>" class="<%= uri == `/${lang}` ? 'selected' : '' %>">
        <%= translate.homePage[lang] %>
      </a>
      <a href="/<%= lang %>/category" class="<%= uri.includes(`/${lang}/category`) ? 'selected' : '' %>">
        <%= translate.categoryPage[lang] %>
      </a>
      <a href="/<%= lang %>/tag" class="<%= uri.includes(`/${lang}/tag`) ? 'selected' : '' %>">
        <%= translate.tagPage[lang] %>
      </a>
      <a href="/<%= lang %>/albums" class="<%= uri.includes(`/${lang}/albums`) ? 'selected' : '' %>">
        <%= translate.album[lang] %>
      </a>
      <a href="/<%= lang %>/special" class="<%= uri.includes(`/${lang}/special`) ? 'selected' : '' %>">
        <%= translate.special[lang] %>
      </a>
      <a href="/<%= lang %>/designers" class="<%= uri.includes(`/${lang}/designers`) ? 'selected' : '' %>">
        <%= translate.designerColumn[lang] %>
      </a>
      <div class="divider"></div>
      <!--
      <a href="/<%= lang %>/my-works"><%= translate.my[lang] %></a>
      <div class="divider"></div>
      -->
      <a href="/<%= lang %>/info#app" class="<%= uri.includes(`/${lang}/info#app`) ? 'selected' : '' %>">
        <%= translate.app[lang] %>
      </a>
      <a href="/<%= lang %>/info#about" class="<%= uri.includes(`/${lang}/info#about`) ? 'selected' : '' %>">
        <%= translate.about[lang] %>
      </a>
      <a href="/<%= lang %>/info#contact" class="<%= uri.includes(`/${lang}/info#contact`) ? 'selected' : '' %>">
        <%= translate.contactUs[lang] %>
      </a>
      <div class="divider"></div>
      <p class="copyright">Copyright &copy; 2025 Art Number Coloring All Rights Reserved</p>
    </div>
  </div>

  <a href="/<%= lang %>"><img src="/assets/svg/logo.svg" , alt="Art Number Coloring"></a>

  <div class="search-container">
    <form action="/<%= lang %>/search" method="GET" class="search-box">
      <input type="text" name="search" placeholder="Search...">
      <button type="submit">
        <svg fill="#000000" width="16px" height="16px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M12.027 9.92L16 13.95 14 16l-4.075-3.976A6.465 6.465 0 0 1 6.5 13C2.91 13 0 10.083 0 6.5 0 2.91 2.917 0 6.5 0 10.09 0 13 2.917 13 6.5a6.463 6.463 0 0 1-.973 3.42zM1.997 6.452c0 2.48 2.014 4.5 4.5 4.5 2.48 0 4.5-2.015 4.5-4.5 0-2.48-2.015-4.5-4.5-4.5-2.48 0-4.5 2.014-4.5 4.5z"
            fill-rule="evenodd" />
        </svg>
      </button>
    </form>
  </div>


  <div class="header-right">

    <div class="dropdown">
      <svg class="dropbtn" width="24px" height="24px" viewBox="0 0 24 24" role="img" xmlns="http://www.w3.org/2000/svg"
        aria-labelledby="languageIconTitle" stroke="#000000" stroke-width="1.5" stroke-linecap="round"
        stroke-linejoin="round" fill="none" color="#000000">
        <title id="languageIconTitle">Language</title>
        <circle cx="12" cy="12" r="10" />
        <path stroke-linecap="round"
          d="M12,22 C14.6666667,19.5757576 16,16.2424242 16,12 C16,7.75757576 14.6666667,4.42424242 12,2 C9.33333333,4.42424242 8,7.75757576 8,12 C8,16.2424242 9.33333333,19.5757576 12,22 Z" />
        <path stroke-linecap="round" d="M2.5 9L21.5 9M2.5 15L21.5 15" />
      </svg>
      <div class="dropdown-content">
        <% languages.forEach(lg=> { %>
          <a href="<%=`/${lg.code}${uri.substring(3)}` %>" class="<%= lg.code == lang ? 'selected' : '' %>"
            style="font-size: 16px">
            <%= lg.title %>
          </a>
          <% }); %>
      </div>
      <!-- <div class="dropdown-content">
        <form id="languageForm" action="/set-lang" method="post">
          <select name="lang" onchange="submitLanguageForm()">
            <% languages.forEach(lg=> { %>
              <option value="<%= lg.code %>" <%=lg.code==lang ? 'selected' : '' %> >
                <%= lg.title %>
              </option>
              <% }); %>
          </select>
          <input type="hidden" name="uri" value="<%= uri%>">
        </form>
      </div> -->

    </div>

    <!-- <a href="/<%= lang %>/app" class="header-right-btn"><%= translate.app[lang] %></a>
    <a href="/<%= lang %>/my-works" class="header-right-btn"><%= translate.my[lang] %></a> -->
  </div>

</header>

<script>
  // 当用户选择语言时提交表单
  function submitLanguageForm() {
    document.getElementById('languageForm').submit();
  }
</script>