Skip to content

Instantly share code, notes, and snippets.

@JHerseth

JHerseth/back.html

Created February 5, 2020 12:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JHerseth/83dbfe4c20f29ca57a767494d1f09cfe to your computer and use it in GitHub Desktop.
Save JHerseth/83dbfe4c20f29ca57a767494d1f09cfe to your computer and use it in GitHub Desktop.
Download ZIP
Anki cards w/bootstrap4 styling
Raw
back.html
<div class="container-fluid">
<div class="row pb-4 pt-2 justify-content-between">
<div class="col-3">
<span class="text-muted">ID {{klc_id}}</span>
</div>
{{#info::Reviews}}
<div class="col-9 d-none d-md-block">
<div class="float-right">
<button type="button" class="btn btn-primary mr-2">
Reviews <span class="badge badge-light">{{info::Reviews}}</span>
</button>
<button type="button" class="btn btn-danger mr-2">
Lapses <span class="badge badge-light">{{info::Lapses}}</span>
</button>
<button type="button" class="btn btn-info">
Avg. time <span class="badge badge-light">{{info::TimeAvg}}</span>
</button>
</div>
{{/info::Reviews}}
</div>
</div>
<!-- Main area-->
<div class="row pb-4 justify-content-between">
<div class="col-12 col-md-8">
<h1 class="display-4 text-3em">{{meaning}}</h1>
</div>
<div class="col-auto"></div>
{{#meaning_minor}}
<div class="col-12 col-md-2 text-md-right">
<div class="col border-left border-secondary">
<h5 class="text-muted text-left text-md-right meaning_minor">{{meaning_minor}}</h5>
</div>
</div>
{{/meaning_minor}}
</div>
<!-- Main area END -->
<div class="row">
<div class="col col-12 col-md-6 pb-2">
<div class="card">
<h5 class="card-header">Writing</h5>
<div class="card-body text-center">
<h1 class="card-title strokeOrder visible">{{kanji}}</h5>
</div>
</div>
</div>
<div class="col col-12 col-md-6 pb-2">
<div class="card">
<h5 class="card-header">Reading</h5>
<div class="card-body">
<table class="table">
<thead>
<tr>
<th scope="col">ON</th>
<th scope="col">KUN</th>
</tr>
</thead>
<tbody>
<tr>
{{#onyomi_1}}<td>{{onyomi_1}}</td>{{/onyomi_1}}
{{#kunyomi_1}}<td>{{kunyomi_1}}</td>{{/kunyomi_1}}
</tr>
<tr>
{{#onyomi_2}}<td>{{onyomi_2}}</td>{{/onyomi_2}}
{{#kunyomi_2}}<td>{{kunyomi_2}}</td>{{/kunyomi_2}}
</tr>
<tr>
{{#onyomi_3}}<td>{{onyomi_3}}</td>{{/onyomi_3}}
{{#kunyomi_3}}<td>{{kunyomi_3}}</td>{{/kunyomi_3}}
</tr>
<tr>
{{#onyomi_4}}<td>{{onyomi_4}}</td>{{/onyomi_4}}
{{#kunyomi_4}}<td>{{kunyomi_4}}</td>{{/kunyomi_4}}
</tr>
<tr>
{{#onyomi_5}}<td>{{onyomi_5}}</td>{{/onyomi_5}}
{{#kunyomi_5}}<td>{{kunyomi_5}}</td>{{/kunyomi_5}}
</tr>
<tr>
{{#onyomi_6}}<td>{{onyomi_6}}</td>{{/onyomi_6}}
{{#kunyomi_6}}<td>{{kunyomi_6}}</td>{{/kunyomi_6}}
</tr>
</tbody>
</table>
</div>
</div>
</div>
{{#mnemonic}}
<div class="col col-12 col-md-6 pb-2">
<div class="card">
<h5 class="card-header">Mnemonic</h5>
<div class="card-body">
{{mnemonic}}
</div>
</div>
</div>
{{/mnemonic}}
<div class="col col-12 col-md-6 pb-2">
<div class="card">
<h5 class="card-header">Vocabulary</h5>
<div class="card-body">
<table class="table">
<thead>
<tr>
<th scope="col">Japanese</th>
<th scope="col">Translation</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{vocab_1}}</td>
<td>{{vocab_1_trans}}</td>
</tr>
<tr>
<td>{{vocab_2}}</td>
<td>{{vocab_2_trans}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
Raw
css.css
@import url('_bootstrap.min.css');
.strokeOrder {
font-family: KanjiStrokeOrders;
font-size: 170px;
color: #bd93f9;
}
.jp {
font-family: Chihaya;
}
.meaning_minor {
font-family: 'Quicksand';
color: #bd93f9;
}
.text-3em {
font-size: 3em;
}
.visible {
visibility: visible;
}
.invisible {
visibility: hidden;
}
@font-face { font-family: KanjiStrokeOrders; src: url('_KanjiStrokeOrders.ttf'); }
@font-face { font-family: TakaoMincho; src: url('_TakaoMincho.ttf'); }
@font-face { font-family: Quicksand; src: url('_Quicksand-Light.ttf'); }
@font-face { font-family: Chihaya; src: url('_chihaya.ttf'); }
Raw
front.html
<div class="container-fluid">
<div class="row pb-4 pt-2 justify-content-between">
<div class="col-3">
<span class="text-muted">ID {{klc_id}}</span>
</div>
{{#info::Reviews}}
<div class="col-9 d-none d-md-block">
<div class="float-right">
<button type="button" class="btn btn-primary mr-2">
Reviews <span class="badge badge-light">{{info::Reviews}}</span>
</button>
<button type="button" class="btn btn-danger mr-2">
Lapses <span class="badge badge-light">{{info::Lapses}}</span>
</button>
<button type="button" class="btn btn-info">
Avg. time <span class="badge badge-light">{{info::TimeAvg}}</span>
</button>
</div>
{{/info::Reviews}}
</div>
</div>
<!-- Main area-->
<div class="row pb-4 justify-content-between">
<div class="col-12 col-md-8">
<h1 class="display-4 text-3em">{{meaning}}</h1>
</div>
<div class="col-auto"></div>
{{#meaning_minor}}
<div class="col-12 col-md-2 text-md-right">
<div class="col border-left border-secondary">
<h5 class="text-muted text-left text-md-right meaning_minor">{{meaning_minor}}</h5>
</div>
</div>
{{/meaning_minor}}
</div>
<!-- Main area END -->
<div class="row">
<div class="col col-12 col-md-6 pb-2">
<div class="card">
<h5 class="card-header">Writing</h5>
<div class="card-body">
<h1 class="card-title strokeOrder invisible text-center">{{kanji}}</h5>
</div>
</div>
</div>
<div class="col col-12 col-md-6 pb-2">
<div class="card">
<h5 class="card-header">Reading</h5>
<div class="card-body">
<table class="table">
<thead>
<tr>
<th scope="col">ON</th>
<th scope="col">KUN</th>
</tr>
</thead>
<tbody>
<tr>
{{#onyomi_1}}<td>{{onyomi_1}}</td>{{^kunyomi_1}}<td> </td>{{/kunyomi_1}}{{/onyomi_1}}
{{#kunyomi_1}}{{^onyomi_1}}<td> </td>{{/onyomi_1}}<td>{{kunyomi_1}}</td>{{/kunyomi_1}}
</tr>
<tr>
{{#onyomi_2}}<td>{{onyomi_2}}</td>{{^kunyomi_2}}<td> </td>{{/kunyomi_2}}{{/onyomi_2}}
{{#kunyomi_2}}{{^onyomi_2}}<td> </td>{{/onyomi_2}}<td>{{kunyomi_2}}</td>{{/kunyomi_2}}
</tr>
<tr>
{{#onyomi_3}}<td>{{onyomi_3}}</td>{{^kunyomi_3}}<td> </td>{{/kunyomi_3}}{{/onyomi_3}}
{{#kunyomi_3}}{{^onyomi_3}}<td> </td>{{/onyomi_3}}<td>{{kunyomi_3}}</td>{{/kunyomi_3}}
</tr>
<tr>
{{#onyomi_4}}<td>{{onyomi_4}}</td>{{^kunyomi_4}}<td> </td>{{/kunyomi_4}}{{/onyomi_4}}
{{#kunyomi_4}}{{^onyomi_4}}<td> </td>{{/onyomi_4}}<td>{{kunyomi_4}}</td>{{/kunyomi_4}}
</tr>
<tr>
{{#onyomi_5}}<td>{{onyomi_5}}</td>{{^kunyomi_5}}<td> </td>{{/kunyomi_5}}{{/onyomi_5}}
{{#kunyomi_5}}{{^onyomi_5}}<td> </td>{{/onyomi_5}}<td>{{kunyomi_5}}</td>{{/kunyomi_5}}
</tr>
<tr>
{{#onyomi_6}}<td>{{onyomi_6}}</td>{{^kunyomi_6}}<td> </td>{{/kunyomi_6}}{{/onyomi_6}}
{{#kunyomi_6}}{{^onyomi_6}}<td> </td>{{/onyomi_6}}<td>{{kunyomi_6}}</td>{{/kunyomi_6}}
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col col-12 col-md-6 pb-2 d-none">
<div class="card">
<h5 class="card-header">Vocabulary</h5>
<div class="card-body">
<table class="table">
<thead>
<tr>
<th scope="col">Japanese</th>
<th scope="col">Translation</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{vocab_1}}</td>
<td>{{vocab_1_trans}}</td>
</tr>
<tr>
<td>{{vocab_2}}</td>
<td>{{vocab_2_trans}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col col-12 col-md-6 pb-2 d-none">
<div class="card">
<h5 class="card-header">Mnemonic</h5>
<div class="card-body">
{{mnemonic}}
</div>
</div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment