-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
150 lines (134 loc) · 6.66 KB
/
index.html
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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html>
<head>
<title>StackSRS - Learn Vocabulary</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#1969BF">
<meta charset="utf-8">
<link rel="manifest" href="manifest.json">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="index.css">
<script src="vue.min.js"></script>
<script src="axios.min.js"></script>
<script src="lodash.min.js"></script>
<script src="mousetrap.min.js"></script>
</head>
<body>
<div id="app">
<!-- Splash Screen -->
<div id="splash-screen" v-if="page === 'logo'">
<h1>StackSRS</h1>
<img src="logo-192.png" alt="Logo" title="StackSRS">
</div>
<!-- Deck List -->
<div id="deck-list" v-if="page === 'local'" v-cloak>
<div class="menu-bar">
<button @click="goToAboutPage" class="right" title="About">About</button>
<button @click="goToServerDecks" class="right" title="Online Decks">Online Decks 🌎</button>
</div>
<div v-for="deck in deckList" @click="loadLocalDeck(deck.file)" class="list-item">
<h3>{{deck.name}}</h3>
<p v-if="deck.front && deck.back">
<img :src="flagUrl(deck.front)" :alt="deck.front.toUpperCase()" :title="deck.front.toUpperCase()" class="flag">
<span><strong>→</strong></span>
<img :src="flagUrl(deck.back)" :alt="deck.back.toUpperCase()" :title="deck.back.toUpperCase()" class="flag">
</p>
<p>
<span class="total" title="Total number of cards"><strong>Σ</strong> {{deck.total}}</span>
<span class="unknown" title="Number of unknown cards">✘ {{deck.unknown}}</span>
<span class="known" title="Number of well-known cards">✔ {{deck.known}}</span>
<button @click.stop="deleteLocalDeck(deck.file)" title="Delete">🗑</button>
</p>
<hr>
</div>
</div>
<!-- Review -->
<div id="review" v-if="page === 'review'" v-cloak>
<div class="menu-bar">
<button @click="goToLocalDecks" class="left" title="Back to deck list"><<</button>
<button @click="goToDeckBrowser" class="right" title="Inspect">Inspect</button>
<button @click="shuffleCurrentDeck" class="right" title="Shuffle deck">Shuffle</button>
<button @click="reverseCurrentDeck" class="right" title="Reverse deck">Reverse</button>
</div>
<div class="front"><span>{{front}}</span></div>
<hr>
<div class="back"><span v-show="isShowingAnswer">{{back}}</span></div>
<div class="review-buttons">
<button @click="wrong" v-show="isShowingAnswer" class="wrong" title="Wrong">WRONG</button>
<button @click="showAnswer" v-show="!isShowingAnswer" class="show-answer" title="Show answer">SHOW ANSWER</button>
<button @click="correct" v-show="isShowingAnswer" class="correct" title="Correct">CORRECT</button>
</div>
</div>
<!-- Deck Browser -->
<div id="deck-browser" v-if="page === 'browser'" v-cloak>
<div class="menu-bar">
<button @click="goToReview" class="left" title="Back"><<</button>
<button @click="resetStrengthOfCurrentDeck(2)" class="right" title="Reset all cards to level 2">Reset</button>
<button @click="shuffleCurrentDeck" class="right" title="Shuffle deck">Shuffle</button>
<button @click="reverseCurrentDeck" class="right" title="Reverse deck">Reverse</button>
</div>
<div>
<input type="text" v-model="filter" placeholder="Search">
</div>
<div v-for="card in filteredCards" :class="highlightColor(card)" class="list-item">
<p>{{card.front}}</p>
<p class="solution"><strong>{{card.back}}</strong></p>
<p>Level: {{card.level}}</p>
<hr>
</div>
</div>
<!-- Deck Download -->
<div id="deck-download" v-if="page === 'online'" v-cloak>
<div class="menu-bar">
<button v-if="deckList.length" @click="goToLocalDecks" class="left" title="Back to deck list"><<</button>
<button @click="goToAboutPage" class="right" title="About">About</button>
<button @click="openFilePicker" class="right" title="Open CSV File">Open CSV</button><input type="file" id="file-picker" accept=".csv" @change="openCsvFile($event.target.files[0])">
</div>
<div v-for="deck in onlineDeckList" @click="importServerDeck(deck.file)" class="list-item">
<h3>{{deck.name}}</h3>
<p>
<img :src="flagUrl(deck.front)" :alt="deck.front.toUpperCase()" :title="deck.front.toUpperCase()" class="flag">
<span><strong>→</strong></span>
<img :src="flagUrl(deck.back)" :alt="deck.back.toUpperCase()" :title="deck.back.toUpperCase()" class="flag">
</p>
<p>{{deck.description}}</p>
<hr>
</div>
</div>
<!-- About Page -->
<div id="about-page" v-if="page === 'about'" v-cloak>
<div class="menu-bar">
<button @click="goToServerDecks" class="left" title="Back"><<</button>
</div>
<h2>Word lists</h2>
<table>
<tr v-for="deck in onlineDeckList">
<td><strong :title="deck.description">{{deck.name}}</strong></td>
<td>
<img :src="flagUrl(deck.front)" :title="deck.front.toUpperCase()" class="flag-small">
<strong> → </strong>
<img :src="flagUrl(deck.back)" :title="deck.back.toUpperCase()" class="flag-small">
</td>
<td><a :href="deck.file + '.csv'" target="_blank" title="CSV">CSV</a></td>
<td><a :href="deck.file + '.xlsx'" target="_blank" title="Excel">Excel</a></td>
<td><a :href="deck.file + '.txt'" target="_blank" title="JSON">JSON</a></td>
</tr>
</table>
<h2>Links</h2>
<p><a href="https://github.com/MelvilQ/stacksrs-web" target="_blank">GitHub repository of this website</a></p>
<p><a href="https://github.com/MelvilQ/stacksrs" target="_blank">GitHub repository of the StackSRS Android app</a></p>
<p><a href="https://play.google.com/store/apps/details?id=de.melvil.stacksrs" target="_blank">StackSRS Android
app on Google Play</a></p>
<h2>Contact</h2>
Patrick Pauli<br>Parkstr. 61A<br>D-65191 Wiesbaden<br>☎ 0611 88004997<br>✉ <a href="mailto:[email protected]">[email protected]</a>
<p>If you want to tell me about an error that you found, or if you have created word lists that you would like to
see in the
StackSRS deck collection, please get in touch with me via <a href="mailto:[email protected]">email</a>.</p>
<br>
<hr>
<p>(c) 2018 MelvilQ</p>
</div>
</div>
<script src="index.js"></script>
</body>
</html>