<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dictionary Builder</title>
<link href="css/styles.css" rel="stylesheet" />
<!-- Markdown Parser -->
<script src="js/markdown-js/markdown.min.js"></script>
<!-- JSON Search -->
<script src="js/defiant-js/defiant-latest.min.js"></script>
<script src="js/dictionaryBuilder.js"></script>
</head>
<body>
<div id="leftColumn">
<form id="wordEntryForm">
<label><span>Word</span>
<input type="text" id="word" />
</label>
<label><span>Equivalent Word</span>
<input type="text" id="simpleDefinition" />
</label>
<label><span>Explanation</span>
<textarea id="longDefinition"></textarea>
</label>
<label><span>Part of Speech</span>
<select id="partOfSpeech">
<!--
<option value="noun">Noun</option>
<option value="adjective">Adjective</option>
<option value="verb">Verb</option>
<option value="adverb">Adverb</option>
<option value="preposition">Preposition</option>
<option value="pronoun">Pronoun</option>
<option value="conjunction">Conjunction</option>
-->
</select>
</label>
<input type="hidden" id="editIndex" />
<span id="errorMessage"></span>
<div id="newWordButtonArea" style="display: block;">
<button type="button" onclick="AddWord(); return false;">Add Word</button>
</div>
<div id="editWordButtonArea" style="display: none;">
<button type="button" onclick="AddWord(); return false;">Edit Word</button> <button type="button" onclick="ClearForm(); window.scroll(savedScroll.x, savedScroll.y); return false;">Cancel</button>
</div>
<div id="updateConflict" style="display: none;"></div>
</form>
</div>
<div id="dictionaryContainer">
<span id="settingsButton" class="clickable" onclick="ShowSettings()">Settings</span>
<h2 id="dictionaryName"></h2>
<span id="descriptionToggle" onclick="ToggleDescription();">Show Description</span>
<div id="dictionaryDescription" style="display:none;"></div>
<div id="searchArea" style="display:block;">
<label style="margin-top:10px;">
<span>Search</span>
<div style="display:block;">
<input type="text" id="searchBox" onclick="this.select();" onchange="ShowDictionary()" style="display:inline;" />
<span style="display:inline;cursor:pointer;font-size:10px;font-weight:bold;" onclick="document.getElementById('searchBox').value='';ShowDictionary();">Clear Search</span>
</div>
<div id="searchOptions" style="font-size:12px;">
<label style="display:inline;margin:0;">Word <input type="checkbox" id="searchOptionWord" checked="checked" onchange="ShowDictionary()" /></label>
<label style="display:inline;margin:0;">Equivalent <input type="checkbox" id="searchOptionSimple" checked="checked" onchange="ShowDictionary()" /></label>
<label style="display:inline;margin:0;">Explanation <input type="checkbox" id="searchOptionLong" checked="checked" onchange="ShowDictionary()" /></label>
</div>
</label>
</div>
<label style="display:block;"><b>Filter Words </b><select id="wordFilter" onchange="ShowDictionary()">
<option value="">All</option>
</select>
</label>
<div id="theDictionary"></div>
</div>
<div id="settingsScreen" style="display:none;">
<div id="settingsBackgroundFade" onclick="HideSettings()"></div>
<div id="settingsOptions">
<span id="settingsScreenCloseButton" class="clickable" onclick="HideSettings()">Close</span>
<h2>Dictionary Settings</h2>
<form id="settingsForm">
<div class="settingsCol">
<div id="hideIfComplete">
<label>
<span>Dictionary Name</span>
<input type="text" id="dictionaryNameEdit" />
</label>
<label><span>Dictionary Description/Rules</span>
<textarea id="dictionaryDescriptionEdit"></textarea>
</label>
<label>
<span>Parts of Speech</span>
<input type="text" id="dictionaryPartsOfSpeechEdit" />
</label>
<label>
<span class="checkboxlabel">Allow Duplicates</span>
<input type="checkbox" id="dictionaryAllowDuplicates" onchange="ToggleCaseSensitiveOption()" />
<label>
<span class="checkboxlabel">Case-Sensitive</span>
<input type="checkbox" id="dictionaryCaseSensitive" />
</label>
</label>
</div>
<label>
<span class="checkboxlabel">Dictionary is Complete</span>
<input type="checkbox" id="dictionaryIsComplete" />
</label>
</div>
<div class="settingsCol">
<label>
<b>Total Entries:</b> <i id="numberOfWordsInDictionary"></i>
</label>
<label><button type="button" onclick="ExportDictionary()" style="cursor:pointer;">Export Current Dictionary</button></label>
<label>
<span>Import Dictionary</span>
<input type="file" id="importFile" />
<button type="button" onclick="ImportDictionary(); return false;">Import</button>
</label>
<label><button type="button" onclick="EmptyWholeDictionary()" style="cursor:pointer;">Empty Current Dictionary</button></label>
</div>
<div id="settingsSaveButtons">
<span id="settingsErrorMessage"></span><br>
<button type="button" onclick="SaveSettings(); HideSettings(); return false;">Save and Close</button>
<button type="button" onclick="SaveSettings(); return false;">Save</button>
</div>
</form>
</div>
</div>
<div id="aboutScreen" style="display:none;">
<div id="aboutBackgroundFade" onclick="HideAbout()"></div>
<div id="aboutPage">
<span id="aboutScreenCloseButton" class="clickable" onclick="HideAbout()">Close</span>
<div id="aboutText"></div>
</div>
</div>
<footer>
<span id="aboutButton" class="clickable" onclick="ShowAbout()">About Dictionary Builder</span>
Version <script>document.write(currentVersion);</script>. Dictionary Builder only guaranteed to work with most up-to-date HTML5 browsers.
</footer>
</body>
</html>