AnkiCard/front-template.html at master · fereber/AnkiCard · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<div style="display: none">== {{Front}} ==</div> <!-- Display only in the card browser list -->

  <div class="icon-bar">
    {{#Sound}}{{Sound}}{{/Sound}}
    {{#Sound}}<a title="Spell Checking" href="#" onclick="toggleType(); return false;"><svg width="25" height="25"><use xlink:href="#check-circle" /></svg></a>{{/Sound}}
    {{#Audio File Name}}<a title="Show Audio Player" href="#" onclick="toggleAudio(); return false;"><svg width="25" height="25"><use xlink:href="#volume-up" /></svg></a>{{/Audio File Name}}
    {{#Sound}}<a  title="Show Content of Front Side" href="#" onclick="toggleFront(); return false;"><svg width="25" height="25"><use xlink:href="#comment-dots" /></svg></a>{{/Sound}}
  </div>

<div class="container center" style="max-width: 100%; margin: auto 20px;">

{{#Picture}}
  <div class="contain panel">{{Picture}}</div>
{{/Picture}}

  <div class="large panel" {{#Sound}}id="frontPanel" style="display:none"{{/Sound}}>{{Front}}</div>
  {{#Sound}}<div class="large panel" id="frontPanel2" style="display: block;"><svg width="20" height="20"><use xlink:href="#ellipsis-h" /></svg></div>{{/Sound}}

  <div id="typePanel" class="panel" style="display: none;">{{type:Front}}</div>

  {{#Audio File Name}}
      <div class="panel">
        <div id="audioPanel" style="display: none;">
          <audio id="audioControl" controls loop class="small text-grenadine">
            <source src="{{Audio File Name}}">
          </audio>
          <form>
            <div class="range-slider small text-grey left">
              <input id="pbr" class="range-slider__range" type="range" value="1" min="0.1" max="2" step="0.1">
              <span class="range-slider__value">Speed: <span id="currentPbr">1</span></span>
            </div>
          </form>
          <a href='#' onclick="videoPlay(); return false;"><button>Start</button></a>
        </div>
      </div>
  {{/Audio File Name}}

</div>

{{#Tags}}<div class="tags xsmall text-grey">{{Tags}}</div>{{/Tags}}


<svg style="display: none;">
  <symbol id="comment-dots" viewBox="0 0 512 512">
    <path
      d="M144 208c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32zm112 0c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32zm112 0c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32zM256 32C114.6 32 0 125.1 0 240c0 47.6 19.9 91.2 52.9 126.3C38 405.7 7 439.1 6.5 439.5c-6.6 7-8.4 17.2-4.6 26S14.4 480 24 480c61.5 0 110-25.7 139.1-46.3C192 442.8 223.2 448 256 448c141.4 0 256-93.1 256-208S397.4 32 256 32zm0 368c-26.7 0-53.1-4.1-78.4-12.1l-22.7-7.2-19.5 13.8c-14.3 10.1-33.9 21.4-57.5 29 7.3-12.1 14.4-25.7 19.9-40.2l10.6-28.1-20.6-21.8C69.7 314.1 48 282.2 48 240c0-88.2 93.3-160 208-160s208 71.8 208 160-93.3 160-208 160z" />
  </symbol>
  <symbol id="check-circle" viewBox="0 0 512 512">
    <path
      d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 48c110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200-110.532 0-200-89.451-200-200 0-110.532 89.451-200 200-200m140.204 130.267l-22.536-22.718c-4.667-4.705-12.265-4.736-16.97-.068L215.346 303.697l-59.792-60.277c-4.667-4.705-12.265-4.736-16.97-.069l-22.719 22.536c-4.705 4.667-4.736 12.265-.068 16.971l90.781 91.516c4.667 4.705 12.265 4.736 16.97.068l172.589-171.204c4.704-4.668 4.734-12.266.067-16.971z" />
  </symbol>
  <symbol id="volume-up" viewBox="0 0 576 512">
    <path
      d="M215.03 71.05L126.06 160H24c-13.26 0-24 10.74-24 24v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V88.02c0-21.46-25.96-31.98-40.97-16.97zm233.32-51.08c-11.17-7.33-26.18-4.24-33.51 6.95-7.34 11.17-4.22 26.18 6.95 33.51 66.27 43.49 105.82 116.6 105.82 195.58 0 78.98-39.55 152.09-105.82 195.58-11.17 7.32-14.29 22.34-6.95 33.5 7.04 10.71 21.93 14.56 33.51 6.95C528.27 439.58 576 351.33 576 256S528.27 72.43 448.35 19.97zM480 256c0-63.53-32.06-121.94-85.77-156.24-11.19-7.14-26.03-3.82-33.12 7.46s-3.78 26.21 7.41 33.36C408.27 165.97 432 209.11 432 256s-23.73 90.03-63.48 115.42c-11.19 7.14-14.5 22.07-7.41 33.36 6.51 10.36 21.12 15.14 33.12 7.46C447.94 377.94 480 319.54 480 256zm-141.77-76.87c-11.58-6.33-26.19-2.16-32.61 9.45-6.39 11.61-2.16 26.2 9.45 32.61C327.98 228.28 336 241.63 336 256c0 14.38-8.02 27.72-20.92 34.81-11.61 6.41-15.84 21-9.45 32.61 6.43 11.66 21.05 15.8 32.61 9.45 28.23-15.55 45.77-45 45.77-76.88s-17.54-61.32-45.78-76.86z" />
  </symbol>
  <symbol id="question-circle" viewBox="0 0 512 512">
    <path
      d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 448c-110.532 0-200-89.431-200-200 0-110.495 89.472-200 200-200 110.491 0 200 89.471 200 200 0 110.53-89.431 200-200 200zm107.244-255.2c0 67.052-72.421 68.084-72.421 92.863V300c0 6.627-5.373 12-12 12h-45.647c-6.627 0-12-5.373-12-12v-8.659c0-35.745 27.1-50.034 47.579-61.516 17.561-9.845 28.324-16.541 28.324-29.579 0-17.246-21.999-28.693-39.784-28.693-23.189 0-33.894 10.977-48.942 29.969-4.057 5.12-11.46 6.071-16.666 2.124l-27.824-21.098c-5.107-3.872-6.251-11.066-2.644-16.363C184.846 131.491 214.94 112 261.794 112c49.071 0 101.45 38.304 101.45 88.8zM298 368c0 23.159-18.841 42-42 42s-42-18.841-42-42 18.841-42 42-42 42 18.841 42 42z" />
  </symbol>
  <symbol id="ellipsis-h" viewBox="0 0 512 512">
    <path d="M328 256c0 39.8-32.2 72-72 72s-72-32.2-72-72 32.2-72 72-72 72 32.2 72 72zm104-72c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72zm-352 0c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72z" />
  </symbol>
</svg>

<script>
  function toggleFront() {
    var x = document.getElementById("frontPanel");
    if (x.style.display === "none") {
      x.style.display = "block";
    } else {
      x.style.display = "none";
    }
    var x = document.getElementById("frontPanel2");
    if (x.style.display === "block") {
      x.style.display = "none";
    } else {
      x.style.display = "block";
    }
  }

  function toggleAudio() {
    var x = document.getElementById("audioPanel");
    if (x.style.display === "none") {
      x.style.display = "block";
    } else {
      x.style.display = "none";
    }
  }

  function toggleType() {
    var x = document.getElementById("typePanel");

    if (x.style.display === "none") {
      x.style.display = "block";
    } else {
      x.style.display = "none";
    }
  }

  function videoPlay() {
    var vid = document.getElementById("audioControl");
    vid.play();
  }

  function playbackRate() {
    var vid = document.getElementById("audioControl");
    vid.playbackRate = 0.5;
  }
</script>