artsite/views/tag-section.ejs

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<div class="content-wrapper">
  <div class="content-title">
    <h2>
      <%= translate.coloringPageCategories[lang] %>:
    </h2>
    <a href="<%= lang %>/tag">
      <%= translate.more[lang] %> >>>
    </a>
  </div>

  <div class="content">
    <div class="album-icon-grid">

      <div class="album-grid-card">
        <a href="/<%= lang %>/tag/data_good"><img src="/thumbs/v1/tag/320/data_good.webp" class="album-icon-img" alt="<%= `${tagsHashMap['data_good'].title[lang]} ${translate.coloringPages[lang]}` %>"></a>
        <div class="card-title">
          <%= `${tagsHashMap['data_good'].title[lang]} ${translate.coloringPages[lang]}` %>
        </div>
      </div>

      <div class="album-grid-card">
        <a href="/<%= lang %>/tag/simple"><img src="/thumbs/v1/tag/320/simple.webp" class="album-icon-img" alt="<%= `${tagsHashMap['simple'].title[lang]} ${translate.coloringPages[lang]}` %>"></a>
        <div class="card-title">
          <%= `${tagsHashMap['simple'].title[lang]} ${translate.coloringPages[lang]}` %>
        </div>
      </div>

      <div class="album-grid-card">
        <a href="/<%= lang %>/tag/animal"><img src="/thumbs/v1/tag/320/animal.webp" class="album-icon-img" alt="<%= `${tagsHashMap['animal'].title[lang]} ${translate.coloringPages[lang]}` %>"></a>
        <div class="card-title">
          <%= `${tagsHashMap['animal'].title[lang]} ${translate.coloringPages[lang]}` %>
        </div>
      </div>

      <div class="album-grid-card">
        <a href="/<%= lang %>/tag/fantasy"><img src="/thumbs/v1/tag/320/fantasy.webp" class="album-icon-img" alt="<%= `${tagsHashMap['fantasy'].title[lang]} ${translate.coloringPages[lang]}` %>"></a>
        <div class="card-title">
          <%= `${tagsHashMap['fantasy'].title[lang]} ${translate.coloringPages[lang]}` %>
        </div>
      </div>

      <div class="album-grid-card">
        <a href="/<%= lang %>/tag/mandala"><img src="/thumbs/v1/tag/320/mandala.webp" class="album-icon-img" alt="<%= `${tagsHashMap['mandala'].title[lang]} ${translate.coloringPages[lang]}` %>"></a>
        <div class="card-title">
          <%= `${tagsHashMap['mandala'].title[lang]} ${translate.coloringPages[lang]}` %>
        </div>
      </div>

      <div class="album-grid-card">
        <a href="/<%= lang %>/tag/flower"><img src="/thumbs/v1/tag/320/flower.webp" class="album-icon-img" alt="<%= `${tagsHashMap['flower'].title[lang]} ${translate.coloringPages[lang]}` %>"></a>
        <div class="card-title">
          <%= `${tagsHashMap['flower'].title[lang]} ${translate.coloringPages[lang]}` %>
        </div>
      </div>

      <div class="album-grid-card">
        <a href="/<%= lang %>/tag/girl"><img src="/thumbs/v1/tag/320/girl.webp" class="album-icon-img" alt="<%= `${tagsHashMap['girl'].title[lang]} ${translate.coloringPages[lang]}` %>"></a>
        <div class="card-title">
          <%= `${tagsHashMap['girl'].title[lang]} ${translate.coloringPages[lang]}` %>
        </div>
      </div>

      <div class="album-grid-card">
        <a href="/<%= lang %>/tag/cat"><img src="/thumbs/v1/tag/320/cat.webp" class="album-icon-img" alt="<%= `${tagsHashMap['cat'].title[lang]} ${translate.coloringPages[lang]}` %>"></a>
        <div class="card-title">
          <%= `${tagsHashMap['cat'].title[lang]} ${translate.coloringPages[lang]}` %>
        </div>
      </div>

      <div class="album-grid-card">
        <a href="/<%= lang %>/tag/dog"><img src="/thumbs/v1/tag/320/dog.webp" class="album-icon-img" alt="<%= `${tagsHashMap['dog'].title[lang]} ${translate.coloringPages[lang]}` %>"></a>
        <div class="card-title">
          <%= `${tagsHashMap['dog'].title[lang]} ${translate.coloringPages[lang]}` %>
        </div>
      </div>

      <div class="album-grid-card">
        <a href="/<%= lang %>/tag/food"><img src="/thumbs/v1/tag/320/food.webp" class="album-icon-img" alt="<%= `${tagsHashMap['food'].title[lang]} ${translate.coloringPages[lang]}` %>"></a>
        <div class="card-title">
          <%= `${tagsHashMap['food'].title[lang]} ${translate.coloringPages[lang]}` %>
        </div>
      </div>

      <div class="album-grid-card">
        <a href="/<%= lang %>/tag/bird"><img src="/thumbs/v1/tag/320/bird.webp" class="album-icon-img" alt="<%= `${tagsHashMap['bird'].title[lang]} ${translate.coloringPages[lang]}` %>"></a>
        <div class="card-title">
          <%= `${tagsHashMap['bird'].title[lang]} ${translate.coloringPages[lang]}` %>
        </div>
      </div>

      <div class="album-grid-card">
        <a href="/<%= lang %>/tag/butterfly"><img src="/thumbs/v1/tag/320/butterfly.webp" class="album-icon-img" alt="<%= `${tagsHashMap['butterfly'].title[lang]} ${translate.coloringPages[lang]}` %>"></a>
        <div class="card-title">
          <%= `${tagsHashMap['butterfly'].title[lang]} ${translate.coloringPages[lang]}` %>
        </div>
      </div>

    </div>
  </div>

</div>