2019-08-03 21:40:25 -05:00
|
|
|
<!doctype html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>Simple Flashcards</title>
|
|
|
|
|
<meta charset=utf-8>
|
2019-08-04 22:38:22 -05:00
|
|
|
<meta name=viewport content='width=device-width,initial-scale=1'>
|
|
|
|
|
<meta name=application-name content='Simple Flashcards'>
|
2019-08-03 21:40:25 -05:00
|
|
|
|
2019-08-04 22:06:00 -05:00
|
|
|
<link rel=stylesheet href=flashcards.css type="text/css">
|
|
|
|
|
<script src='flashcards.js'></script>
|
2019-08-03 21:40:25 -05:00
|
|
|
|
|
|
|
|
</head>
|
2019-08-04 16:35:09 -05:00
|
|
|
<body class=settings-visible>
|
2019-08-03 21:40:25 -05:00
|
|
|
<h1 class=title>Simple Flashcards</h1>
|
2019-08-04 16:35:09 -05:00
|
|
|
<form id=settings action=#>
|
2020-12-11 15:25:31 -06:00
|
|
|
<div id=card-input>
|
|
|
|
|
<label>Cards
|
|
|
|
|
<textarea id=prompts-input></textarea>
|
|
|
|
|
</label>
|
|
|
|
|
<label class="only-with-answers">Answers
|
|
|
|
|
<textarea id=answers-input></textarea>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
2019-08-04 22:06:00 -05:00
|
|
|
<label class=toggle-adv-settings>Advanced Settings
|
|
|
|
|
<span class=visibility-indicator>➤</span>
|
|
|
|
|
</label>
|
2019-08-04 16:35:09 -05:00
|
|
|
<div id=adv-settings>
|
2019-08-03 21:40:25 -05:00
|
|
|
<label>
|
2020-12-11 15:25:31 -06:00
|
|
|
<span>Cards have answers:</span>
|
|
|
|
|
<label><input type=radio name=hasAnswers value="yes">yes</label>
|
|
|
|
|
<label><input type=radio name=hasAnswers value="no" checked>no</label>
|
|
|
|
|
</label>
|
|
|
|
|
<label>
|
|
|
|
|
<span>Seconds per prompt:</span>
|
|
|
|
|
<input type=number name=promptPeriod value=3>
|
|
|
|
|
</label>
|
|
|
|
|
<label class="only-with-answers">
|
|
|
|
|
<span>Seconds per answer:</span>
|
|
|
|
|
<input type=number name=answerPeriod value=3>
|
2019-08-03 21:40:25 -05:00
|
|
|
</label>
|
2019-08-04 16:35:09 -05:00
|
|
|
<label>
|
|
|
|
|
<span>Show cards </span>
|
|
|
|
|
<select name=cardOrder>
|
|
|
|
|
<option value=in-order>in order.</option>
|
|
|
|
|
<option value=reverse>in reverse order.</option>
|
|
|
|
|
<option value=random>in random order.</option>
|
|
|
|
|
</select>
|
2019-08-04 22:06:00 -05:00
|
|
|
</label>
|
2019-08-03 21:40:25 -05:00
|
|
|
<label>
|
2019-08-04 22:06:00 -05:00
|
|
|
<span>Text size: </span>
|
|
|
|
|
<select name=textSize>
|
|
|
|
|
<option>small</option>
|
|
|
|
|
<option>medium</option>
|
|
|
|
|
<option>large</option>
|
2019-08-03 21:40:25 -05:00
|
|
|
</select>
|
|
|
|
|
</label>
|
|
|
|
|
<label>
|
2019-08-04 22:06:00 -05:00
|
|
|
<span>Saved card sets:</span>
|
|
|
|
|
<select name=loadSetName>
|
|
|
|
|
<option value=_NULL_>choose a set to load</option>
|
|
|
|
|
</select>
|
|
|
|
|
<button id=load-set>Load</button>
|
|
|
|
|
<button id=delete-set>Delete</button>
|
|
|
|
|
</label>
|
|
|
|
|
<label>
|
|
|
|
|
<span>Save this card set as:</span>
|
|
|
|
|
<input type=text name=saveSetName>
|
|
|
|
|
<button id=save-set>Save</button>
|
|
|
|
|
</label>
|
|
|
|
|
<label>
|
|
|
|
|
<button id=export>Export Cards</button>
|
|
|
|
|
<button id=import>Import Cards</button>
|
|
|
|
|
<input name=importFileName type=file accept='.json'>
|
2019-08-03 21:40:25 -05:00
|
|
|
</label>
|
2020-12-11 15:25:31 -06:00
|
|
|
<label>
|
|
|
|
|
<span>Import from URL: </span>
|
|
|
|
|
<input name=importURL type=text>
|
|
|
|
|
<button id=importURL>Import</button>
|
|
|
|
|
</label>
|
2019-08-03 21:40:25 -05:00
|
|
|
</div>
|
2019-08-04 22:06:00 -05:00
|
|
|
<button class=btn-primary id=start-button>Go!</button>
|
2019-08-03 21:40:25 -05:00
|
|
|
</form>
|
2019-08-04 16:35:09 -05:00
|
|
|
<div id=cards>
|
2019-08-04 22:06:00 -05:00
|
|
|
<button id=stop-button>Stop</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div id=debug>
|
2019-08-04 22:38:22 -05:00
|
|
|
Version %VERSION%
|
2019-08-04 22:06:00 -05:00
|
|
|
<span class=small-only>small</span>
|
|
|
|
|
<span class=medium-only>medium</span>
|
|
|
|
|
<span class=large-only>large</span>
|
2019-08-03 21:40:25 -05:00
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
