Anki card type templates (English -> Chinese/pinyin/sound) with Google images link

back.html

{{FrontSide}}

<hr id=answer>

<div id=characters class="chinese">{{Chinese character}}</div>
{{Back}}
{{tts zh_CN speed=.8 voices=Apple_Tingting:Chinese character}}

<!--{{tts-voices:}}-->
<script>
(() => {
  const chrs =   document.querySelector('#characters');
  chrs.innerHTML = [...chrs.textContent].map((chr) => {
  const a = document.createElement('a');
  a.textContent = chr;
  // a.href = 'https://www.archchinese.com/chinese_english_dictionary.html?find=' + chr;
  a.href = 'https://dictionary.writtenchinese.com/#sk=' + chr + '&svt=pinyin';
  return a.outerHTML;
  }).join('');
})();
</script>

front.html

<div class="english">{{Front}}<br><button class="images">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2e/Camera_Flat_Icon_Vector.svg/250px-Camera_Flat_Icon_Vector.svg.png">
</button>

<script>
// Use var to avoid problems on page reloading
var imgs = document.querySelector('.images');
imgs.addEventListener('click', () => {
  window.open(
    'https://www.google.com/search?newwindow=1&q=' + `{{Front}}` + '&udm=2',
    '_top'
  );
});
</script>

{{tts en_US voices=Apple_Samantha:Front}}
<!--{{tts-voices:}}-->
<p class="tags">({{Tags}})</p>
</div>

styling.css

.card {
    font-family: arial;
    text-align: center;
    color: black;
    background-color: white;
}
.english {
  background-color: lightblue;
}
.images img {
  width: 30px;
  height: 30px;
}
.images {
  background-color: white;
}

.mac body {
    font-size: 28px;  
}
.mac .tags {
  font-size: small;
}

.mobile body {
    font-size: 40px;
}
.mobile .tags {
    font-size: 28px;
}

/* Not iPhone! */
.mac .english, .ipad .english {
  padding: 20px;
}
.iphone .english {
  padding: 20px;
}