back.html

<div class="reading">
  <a href="http://jisho.org/search/{{text:kanji:Reading}}">
     <span id="expression-content">{{kanji:Reading}}</span>
    <span class="hidden" id="reading-content">{{furigana:Reading}}</span>
  </a>
</div>

<hr>
<div id="vocab">
  <a href="http://jisho.org/search/{{text:kanji:vocab}}">
     <span id="expression-content1">{{kanji:vocab-reading}}</span>
    <span class="hidden" id="reading-content1">{{furigana:vocab-reading}}</span>
  </a>
</div>

<div class="snapshot">
  <span class="video">{{vocab-audio}}</span>
  <span class='audio' >{{Audio}}</span>
</div>
<div id="phonetics"><a href="http://jisho.org/search/{{text:kanji:phonetics}}%23kanji">{{phonetics}}</a></div>

<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div  class="answer">
<div class="dim info">  
  {{furigana:Meaning}}
</div>

<div class="info">
<span class="dimmer">{{furigana:vocab-meaning}}</span>
</div>

{{#Keyword}}
  <div id="keyword">{{Keyword}}</div>
{{/Keyword}}





{{#vocab}}

  <div class="info dim">
    <a href="http://dictionary.goo.ne.jp/srch/all/{{vocab}}/m0u/" class="small light">goo.jp</a>   
    <a class="dim small" href="http://jisho.org/search/{{text:kanji:Reading}}%23kanji">  漢字  </a>  
  </div>

{{/vocab}}

{{#vocab-pos}}
  <div id="vocab-pos" class="info smaller light">{{vocab-pos}}</div>
{{/vocab-pos}}

{{#examples}}
   <div class="info"> {{hint:examples}}</div>
{{/examples}}
</div>



<br>

<div class="image">{{Image}}</div>
<div class="smaller index-left">{{JLPT}}</div>
<div class="smaller index">{{Core-Index}}</div>
<script>
 function linkHit (e) { 
      e.preventDefault();
      e.stopPropagation();
      reading.classList.remove('hidden');
      expression.classList.add('hidden');
  }
  var reading    = document.getElementById("reading-content");
  var expression = document.getElementById('expression-content');
  var clicked = false;
  expression.addEventListener('click', function(e){
     if (reading.innerText !== expression.innerText && !clicked) {
       clicked = true;
       linkHit(e);
     }
  });
 function linkHit1 (e) { 
      e.preventDefault();
      e.stopPropagation();
      reading1.classList.remove('hidden');
      expression1.classList.add('hidden');
  }
  var reading1   = document.getElementById("reading-content1");
  var expression1 = document.getElementById('expression-content1');
  var clicked1 = false;
  expression1.addEventListener('click', function(e){
     if (reading1.innerText !== expression1.innerText && !clicked1) {
       clicked1 = true;
       linkHit1(e);
     }
  });
document.addEventListener('keydown', function(e) {
  if(e.keyCode === 96){
	linkHit(e);
  }
}); 
</script>

front.html

<div class="reading front">
  <a href="http://jisho.org/search/{{text:kanji:Reading}}">
     <span id="expression-content">{{kanji:Reading}}</span>
    <span class="hidden" id="reading-content">{{furigana:Reading}}</span>
  </a>
</div>
<div class="dim">{{Notes}}</div>

<script>
 function linkHit (e) { 
      e.preventDefault();
      e.stopPropagation();
      reading.classList.remove('hidden');
      expression.classList.add('hidden');
  }

  var reading    = document.getElementById("reading-content");
  var expression = document.getElementById('expression-content');
  var clicked = false;
  expression.addEventListener('click', function(e){
     if (reading.innerText !== expression.innerText && !clicked) {
       clicked = true;
       linkHit(e);
     }
  });
document.addEventListener('keydown', function(e) {
  if(e.keyCode === 96){
	linkHit(e);
  }
}); 
</script>

styling.css

body, .night_mode, body a{
background-color: #202020 !important;
text-decoration: none;
color: #FFFFFF;
font-size: 32px

}

.snapshot{
display:block
width: 50%;
height:50%;
padding-bottom: 1em;
}
.reading{
padding-bottom: 1em;
}
.hidden{
display: none;
}

.card
{
color: #FFFFFF;
font-size: 20px;
text-align: center;
color: #FFFFFF;
}

div [id^=hint] {
color: #b6d7a2;;
text-decoration: none !important; 
font-size: 1em !important;
}
.hint{
font-size: 22px;
text-decoration: underline !important;
color: #BFBFBF;
}

.small{
font-size: .75em !important;
}
.light{
color: #FFFFFF;
}

.video{
margin-right: 25%

}
b{
font-weight: normal;
color: #6abedb;
}

[mtype=unknown]{
color: black !important;
}

[mtype=seen]{
color: orange !important;
}

[mtype=known]{
color: green !important;
}

[mtype]{
color: blue !important;
}

hr{
height: 0;
border: 0;
border-bottom: 2px solid #333;
border-top: 2px solid black;
}

.dim{
color: #BFBFBF;
}
.big{
font-size: 40px;
}
.info{
margin-top: 20px;

}
.index{
position: fixed;
bottom: 0;
right: 0;
margin: 0;
}
.index-left{
position: fixed;
top: 0;
left: 0;
margin: 0;
}
.smaller {
font-size: .5em;
}

.image{
position: fixed;
bottom: 0;
left: 0;
margin: 0;
max-width: 5em;
max-height: 5em;
}

.image:hover{
position: fixed;
bottom: 0;
left: 0;
margin: 0;
max-width: 20em;
max-height: 20em;
}

#vocab-pos{
position: fixed;
top: 0;
right: 0;
margin: 0;
}

#phonetics b{
color: #f0c674 ;
}

#vocab a{
font-family: MS Mincho, msmincho, hc-too5;
color: #b294bb;
}
.dimmer{
  color: #569056 ;

}
#keyword{
padding-top: 1em;
color: #b6d7a2;
}