artsite/views/header.ejs

<header class="header">
  <div class="header-left">
    <div class="mobi-only 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 %>/gallery" class="<%= uri.includes(`/${lang}/gallery`) ? 'selected' : '' %>">
          <%= translate.gallery[lang] %>
        </a>
        <a href="/<%= lang %>/videos" class="<%= uri.includes(`/${lang}/videos`) ? 'selected' : '' %>">
          <%= translate.videoPage[lang] %>
        </a>
        <!-- <a href="/<%= lang %>/category/latest" class="<%= uri.includes(`/${lang}/category`) ? 'selected' : '' %>">
          <%= translate.categoryPage[lang] %>
        </a> -->
        <a href="/<%= lang %>/tag" class="<%= uri.includes(`/${lang}/tag`) ? 'selected' : '' %>">
          <%= translate.coloringPageCategories[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 %>/artists" class="<%= uri.includes(`/${lang}/artist`) ? 'selected' : '' %>">
          <%= translate.coloringPageArtists[lang] %>
        </a>
        <div class="divider"></div>
        <!--
        <a href="/<%= lang %>/my-works"><%= translate.my[lang] %></a>
        <div class="divider"></div>
        -->
        <a href="/<%= lang %>/info#app" target="_blank"
          class="<%= uri.includes(`/${lang}/info#app`) ? 'selected' : '' %>">
          <%= translate.app[lang] %>
        </a>
        <a href="/<%= lang %>/info#about" target="_blank"
          class="<%= uri.includes(`/${lang}/info#about`) ? 'selected' : '' %>">
          <%= translate.about[lang] %>
        </a>
        <a href="/<%= lang %>/info#contact" target="_blank"
          class="<%= uri.includes(`/${lang}/info#contact`) ? 'selected' : '' %>">
          <%= translate.contactUs[lang] %>
        </a>
        <a href="/policy.html" target="_blank">
          <%= translate.policy[lang] %>
        </a>
        <div class="divider"></div>
        <p class="copyright">Copyright &copy; 2025 Art Color All Rights Reserved</p>
      </div>
    </div>

    <!-- <a href="/<%= lang %>"><img src="/assets/svg/logo.svg" , alt="Art Color"></a> -->

    <a href="/<%= lang %>"><img src="/assets/icon/icon.webp" , class="logo" , width="42px" height="42px"
        alt="Art Color Logo"></a>
    <a href="/<%= lang %>"><img src="/assets/svg/logo.svg" , width="160px" height="60px" alt="Art Color"></a>

  </div>


  <div class="header-center">
    <div class="menu">
      <div>
        <span>
          <%= translate.COLORINGPAGES[lang] %>
        </span>
        <span><svg class="ast-arrow-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
            version="1.1" x="0px" y="0px" width="15px" height="10px" viewBox="57 35.171 26 16.043"
            enable-background="new 57 35.171 26 16.043" xml:space="preserve">
            <path d="M57.5,38.193l12.5,12.5l12.5-12.5l-2.5-2.5l-10,10l-10-10L57.5,38.193z"></path>
          </svg></span>
      </div>
      <div class="pc-dropdown-content">
        <a href="/<%= lang %>" class="<%= uri == `/${lang}` ? 'selected' : '' %>">
          <%= translate.homePage[lang] %>
        </a>
        <a href="/<%= lang %>/gallery" class="<%= uri.includes(`/${lang}/gallery`) ? 'selected' : '' %>">
          <%= translate.gallery[lang] %>
        </a>
        <a href="/<%= lang %>/videos" class="<%= uri.includes(`/${lang}/videos`) ? 'selected' : '' %>">
          <%= translate.videoPage[lang] %>
        </a>
        <a href="/<%= lang %>/tag" class="<%= uri.includes(`/${lang}/tag`) ? 'selected' : '' %>">
          <%= translate.coloringPageCategories[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 %>/artists" class="<%= uri.includes(`/${lang}/artist`) ? 'selected' : '' %>">
          <%= translate.coloringPageArtists[lang] %>
        </a>
      </div>
    </div>
    <div class="menu">
      <%= translate.TOOLSTRICKS[lang] %>
    </div>
    <a class="menu" href="/<%= lang %>/info#app">
      <%= translate.app[lang] %>
    </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>


  <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 %>/myworks" class="header-right-btn">
      <%= translate.my[lang] %>
    </a>
  </div>

</header>

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