Anki Template with User Action

BACK.html

<div class="entry">
    <p class="en_bold">
        {{entry}} 
    </p>
    <p class="zh_light">{{definition}}</p>
</div>


{{#sentence}}<p class="separator">☙</p>{{/sentence}}
<div class="context">
<p class="en_regular" id="sentence">{{sentence}}</p>
<p class="zh_regular">{{translation}}</p>
</div>


{{#definition_en}}<p class="separator">☙</p>{{/definition_en}}
<div class="context">
    <p class="en_regular">{{definition_en}}</p>
    {{#definitions}}<p class="zh_regular">{{definitions}}</p>{{/definitions}}
    {{#interference}}<p class="zh_regular">[辨] {{interference}}</p>{{/interference}}
    {{#mnemonic}}<p class="zh_regular">[记] {{mnemonic}}</p>{{/mnemonic}}
    {{#etymology}}<p class="zh_regular">[源] {{etymology}}</p>{{/etymology}}
</div>



<div id="container" onclick="toggleDiv()" style="cursor: pointer; width: 100%; min-height: 200px; border: none;">
  <div id="yy" style="display: none;">
<div class="footnote">
    <dt>🔍</dt> <dd><a href='eudic://dict//{{entry}}'>Eudic</a> <a href='mkdictionaries:///?text={{entry}}'>物書堂</a></dd>
</div>

  </div>
</div>



<script>
var userJs1 = toggleDiv;

// 添加键盘事件监听
document.addEventListener("keydown", function(event) {
  if ((event.ctrlKey || event.metaKey) && event.key === 'x') {
    toggleDiv();
    event.preventDefault(); // 阻止浏览器默认行为
  }
});

function toggleDiv() {
  var element = document.getElementById("yy");
  if (element.style.display === 'none') {
    element.style.display = 'block';  // 如果元素是隐藏的，则显示它
  } else {
    element.style.display = 'none';  // 如果元素是可见的，则隐藏它
  }
}
</script>


{{#sentence}}
<script>
var entry = "{{entry}}";
var ref_sentence = document.getElementById("sentence").innerHTML;
document.getElementById("sentence").innerHTML = ref_sentence.replace(entry, entry.bold());
</script>
{{/sentence}}


{{#Tags}}
<script>
    var tagEl = document.querySelector('.tags');
    var tags = tagEl.innerHTML.split(' ');
    var html = '';
    tags.forEach(function(tag) {
	if (tag) {
	    var newTag = '<span class="tag">' + tag + '</span>';
           html += newTag;
    	    tagEl.innerHTML = html;
	}
    });
    
</script>
{{/Tags}}

Front.html

<div class="entry">
    <p class="en_bold">
        {{entry}} 
        <span class="phonetic">/{{phonetic}}/</span>
    </p>
</div>




{{#audio}}<div class="audio"> {{audio}} </div> {{/audio}}


{{#sentence}}
<script>
var entry = "{{entry}}";
var ref_sentence = document.getElementById("sentence").innerHTML;
document.getElementById("sentence").innerHTML = ref_sentence.replace(entry, entry.bold());
</script>
{{/sentence}}

theme.CSS

a:link {text-decoration:none;color:#5C5CFF}

p { text-align:left;margin: 0}
p.padding {
    padding-right: 20px;
    padding-left: 20px;
}


.card {
 font-family: arial;
 font-size: 20px;
 text-align: left;
 color: black;
 background-color: #FCFAF2;
 word-wrap: break-word
}


.en_bold {
    font-family: "AppleSDGothicNeo-Bold";
    font-size: 45px;
    /* color: #0C0C0C; */
    display: flex; /* 维持 flex 布局 */
    align-items: baseline; /* 确保基线对齐 */
}

.phonetic {
    font-family: "Arial Unicode MS"; /* 修改字体样式 */
    font-size: 20px; /* 调整大小 */
    color: #93A1A1; /* 调整颜色，弱化显示 */
    margin-left: 10px; /* 左侧间距 */
    align-self: center;
    vertical-align: baseline; /* 基线对齐 */
}

.en_semibold {
 font-family: "AppleSDGothicNeo-SemiBold";
  font-size: 20px;
/*  color: #0C0C0C; */
  padding: 0 0 5px 0;
}
.en_regular {
  font-size: 25px;
/*  color: #002b36; */
  padding: 5px 0;
}

.en_light {
    font-size: 20px; /* 调整大小 */
}

.zh_bold {
 font-family: "PingFangSC-Semibold";
 font-size: 40px;
/* color: #0C0C0C; */
}
.zh_regular {
  font-size: 20px;
  padding: 5px 0;
}
.zh_light {

  font-family: "PingFangSC-Semibold";
  font-size: 35px;
}



.symbol {
 font-size: 20px;
/* color: #93A1A1; */
}

.entry {
  padding: 0 0 10px 0;
}
.context {
  padding: 25px 0;
}

.footnote {
  border-top: .15em solid transparent;
  border-image: 100% 0 0 linear-gradient(90deg, currentColor 4em, transparent 0);
  padding-top: .5em;
  font-size: 20px;
/*  margin-left: -.2em; */
/*  font: 70%/1.4 Baskerville, Palatino, serif; */
}

.mac .footnote,
.android .footnote {
  position: fixed;
  bottom: 10px;
}


.iphone .footnote {
  position: fixed;
  top: 550px;
  font-size: 15px;
}



dt, dd {display: inline;margin: 0;}
dt {font-weight: 600;}
dd + dt::before { content : '\A'; white-space : pre; }
dd + dd::before { content : ', '; font-weight : normal; }
dd + dd::before { content : ', '; margin-left : -.25em; font-weight : normal; }

img {
    margin:0 auto;
    display:block;
    max-width: 30%; max-height: none; 
}

.mac .urlscheme {
 display: None
}

.android .urlscheme {
  display: None
}

.audio {
 display: None
}


.tag {
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 3px 6px;
  margin: 2px;
  display: inline-block;
  font-size: 12px;
}


.toggle-checkbox {
    display: none; /* 隐藏复选框 */
}

.collapsible-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.toggle-checkbox:checked + .collapsible-label + .collapsible-content {
    max-height: 1000px; /* 根据需要调整最大高度 */
}

.collapsible-label {
    cursor: pointer;
    /* 其他样式，如背景颜色、内边距等 */
}


.separator {
    text-align: center;
/*    margin-top: 15px; */
/*    margin-bottom: 15px; */
    color: #808080; /* 灰色，可以根据需要调整 */
    font-size: 2em; /* 可以调整大小 */
}

.context:empty {
    padding: 0;
    margin: 0;
    display: none;
}