offline-flashcard-tutor/index.html at master · HKayn/offline-flashcard-tutor · 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
<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Offline Flashcard Tutor</title>
  <link rel="stylesheet" href="style.scss" />
  <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17'%3E%3Cdefs%3E%3Cfilter id='a' width='1.064' height='1.08' x='-.032' y='-.04' style='color-interpolation-filters:sRGB'%3E%3CfeFlood flood-color='%23000' flood-opacity='.498' result='flood'/%3E%3CfeComposite in='flood' in2='SourceGraphic' operator='out' result='composite1'/%3E%3CfeGaussianBlur in='composite1' result='blur' stdDeviation='.2'/%3E%3CfeOffset result='offset'/%3E%3CfeComposite in='offset' in2='SourceGraphic' operator='atop' result='composite2'/%3E%3C/filter%3E%3Cfilter id='b' width='1.064' height='1.48' x='-.032' y='-.24' style='color-interpolation-filters:sRGB'%3E%3CfeFlood flood-color='%23000' flood-opacity='.498' result='flood'/%3E%3CfeComposite in='flood' in2='SourceGraphic' operator='in' result='composite1'/%3E%3CfeGaussianBlur in='composite1' result='blur' stdDeviation='.2'/%3E%3CfeOffset result='offset'/%3E%3CfeComposite in='SourceGraphic' in2='offset' result='composite2'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='17' height='17' rx='1' ry='1' style='fill:%23fff;stroke-width:.5;stroke-linecap:round;stroke-linejoin:round;fill-opacity:1'/%3E%3Crect width='15' height='12' x='1' y='1' rx='.25' ry='.25' style='fill:%23fff;fill-opacity:1;stroke-width:.559017;stroke-linecap:round;stroke-linejoin:round;filter:url(%23a)'/%3E%3Crect width='15' height='2' x='1' y='14' rx='.25' ry='.25' style='fill:%23666;fill-opacity:1;stroke-width:.228218;stroke-linecap:round;stroke-linejoin:round;filter:url(%23b)'/%3E%3C/svg%3E">
  <script type="module" src="/app.ts" defer></script>
</head>

<body>
  <div id="app" v-scope>
    <div class="tutor-input plane">
      <div v-if="!tutor || sessionIsFinished">
        <label class="fake-button">
          Choose CSV File
          <input type="file" accept=".csv" placeholder="Choose .csv file" style="display: none"
            @input="inputFile" />
        </label>
        <button v-if="savedState" @click="recoverSavedState">Recover saved state</button>
      </div>
      <div class="tutor-input__current-input-label" v-else>
        <div v-if="lastInputSource === 'file'">{{ `Loaded file "${lastInputFile.name}".` }}</div>
        <div v-else-if="lastInputSource === 'localStorage'">{{ `Recovered state from ${lastInputDate.toLocaleString()}.` }}</div>
      </div>
      <div v-if="sessionIsFinished" style="margin-left: auto">🎉</div>
    </div>
    <div class="tutor-session plane" v-if="tutor && !sessionIsFinished">
      <div class="tutor-session__card card" :class="{'front': !cardIsFlipped, 'back': cardIsFlipped}">
        <div v-if="tutor.currentCard">
          <div v-if="!cardIsFlipped" v-html="renderedCardFront"></div>
          <div v-else v-html="renderedCardBack"></div>
        </div>
      </div>
      <div class="tutor-session__nav">
        <template v-if="deckIsEmpty && !tutor.currentCard">
          <button class="big cycle" @click="cycleFailedCards">Cycle Failed Cards</button>
        </template>
        <template v-else-if="!cardIsFlipped">
          <button class="big flip" @click="flipCard">Flip</button>
        </template>
        <template v-else>
          <button class="big fail" @click="failCard">Fail</button>
          <button class="big pass" @click="passCard">Pass</button>
        </template>
      </div>
    </div>
  </div>
</body>

</html>