guoziyun
/
artsite


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
							<!DOCTYPE html>
<html lang="<%= lang %>">

<head>
  <%- include('common-meta') %>

  <link rel="alternate" href="https://art.pcoloring.com/en/info" hrefLang="en" />
  <link rel="alternate" href="https://art.pcoloring.com/zh/info" hrefLang="zh" />
  <link rel="alternate" href="https://art.pcoloring.com/es/info" hrefLang="es" />
  <link rel="alternate" href="https://art.pcoloring.com/pt/info" hrefLang="pt" />
  <link rel="alternate" href="https://art.pcoloring.com/ja/info" hrefLang="ja" />

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

  <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.8/lottie.min.js"></script>
  
</head>

<body>
  <section id="about" class="full-screen about-container">
    <div class="about-content">
      <div class="section-title">
        <%= translate.aboutX[lang] %>
      </div>
      <div class="company-info" style="padding-bottom: 40px;">
        <%= translate.companyIntroduction[lang] %>
      </div>
      <div class="slideshow-container">

        <div class="mySlides fade">
          <img src="/assets/icon/color-by-number.webp" alt="color-by-number app"
            style="width:100%; border-radius: 16px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);">
        </div>

        <div class="mySlides fade">
          <img src="/assets/icon/jigsaw-puzzle.webp" alt="jigsaw-puzzle app"
            style="width:100%; border-radius: 16px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);">
        </div>

        <div class="mySlides fade">
          <img src="/assets/icon/art-puzzle.webp" alt="art-puzzle app"
            style="width:100%; border-radius: 16px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);">
        </div>

        <div class="mySlides fade">
          <img src="/assets/icon/find-difference.webp" alt="find-difference app"
            style="width:100%; border-radius: 16px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);">
        </div>

        <div class="mySlides fade">
          <img src="/assets/icon/soduko.webp" alt="soduko app"
            style="width:100%; border-radius: 16px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);">
        </div>

      </div>

      <div>
  </section>


  <section id="app" class="full-screen app-container">
    <div class="left">
      <div style="display: flex;">
        <img class="app-icon" src="/assets/icon/logo_640x640.webp" alt="app icon">
        <ul style="font-size: 18px;">
          <li>
            <%= translate.goodExperience[lang] %>
          </li>
          <li>
            <%= translate.massivePictures[lang] %>
          </li>
          <li>
            <%= translate.dailyUpdate[lang] %>
          </li>
          <li>
            <%= translate.easyShare[lang] %>
          </li>
          <li>
            <%= translate.offlineColoring[lang] %>
          </li>
        </ul>
      </div>
      <div class="app-name">Art Number Coloring</div>
      <p class="app-description">
        <%= translate.appIntroduction[lang] %>
      </p>

      <a class="app-download-btn" href="itms-apps://itunes.apple.com/app/id1575480118?action=write-review"><img
          src="/assets/icon/icon-app-store.svg" alt="app store icon"></a>
      <a class="app-download-btn"
        href="https://play.google.com/store/apps/details?id=com.pcoloring.art.puzzle.color.by.number&pcampaignid=web_share"><img
          src="/assets/icon/icon-google-play.svg" alt="google play icon"></a>
    </div>
    <div class="right">
      <div id="lottie" style="width: 80%"></div>
    </div>
  </section>


  <section id="contact" class="full-screen contact-container">
    <div class="contact-content">
      <div class="section-title" style="padding: 0px 0px 60px 0px;">
        <%= translate.contactX[lang] %>
      </div>
      <div style="font-size: 20px;">
        <%= translate.questionAndPartnership[lang] %>
      </div>
      <p style="font-size: 20px;">
        <%= translate.happyToHear[lang] %>
      </p>
      <div style="display: flex;">
        <img width="32px" src="/assets/svg/email.svg" alt="email">
        <a href="mailto:icolor_support@jccy-tech.com">
          <%= translate.supportOrFeedback[lang] %>
        </a>
      </div>

      <div style="display: flex; padding-top: 40px;">
        <img width="28px" src="/assets/svg/location.svg" alt="location">
        <div style="font-size: 24px; font-weight: bold; padding-left: 10px;">
          <%= translate.beijing[lang] %>
        </div>
      </div>
      <p>
        <%= translate.addr[lang] %>
      </p>
    </div>
  </section>


  <script>
    // 当页面加载完成后执行
    document.addEventListener('DOMContentLoaded', function () {
      // 加载 Lottie 动画
      lottie.loadAnimation({
        container: document.getElementById('lottie'),
        renderer: 'svg',
        loop: true,
        autoplay: true,
        path: '/assets/lottie/splash/data.json'
      });
    });

    let slideIndex = 0;
    showSlides();

    function showSlides() {
      let i;
      let slides = document.getElementsByClassName("mySlides");
      for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
      }
      slideIndex++;
      if (slideIndex > slides.length) { slideIndex = 1 }
      slides[slideIndex - 1].style.display = "block";
      setTimeout(showSlides, 3000); // 更改图片间隔时间
    }

  </script>


</body>

</html>