From d90294eb22fdabe7e3331dbbde1b39b1b0b82498 Mon Sep 17 00:00:00 2001
From: Robbie Antenesse <dev@alamantus.com>
Date: Wed, 8 May 2019 11:57:08 -0600
Subject: [PATCH] Add info modals for help, terms, and privacy; update footer
 links

---
 index.html               |  15 ++-
 package.json             |   1 +
 src/js/render.js         |  21 ++++-
 src/js/setupListeners.js |  30 +++++-
 src/markdown/help.md     | 199 +++++++++++++++++++++++++++++++++++++++
 src/markdown/privacy.md  |  49 ++++++++++
 src/markdown/terms.md    |  40 ++++++++
 src/scss/_structure.scss |  20 ++++
 yarn.lock                |   5 +
 9 files changed, 370 insertions(+), 10 deletions(-)
 create mode 100644 src/markdown/help.md
 create mode 100644 src/markdown/privacy.md
 create mode 100644 src/markdown/terms.md

diff --git a/index.html b/index.html
index eb9228c..50c7d3b 100644
--- a/index.html
+++ b/index.html
@@ -123,15 +123,14 @@
   </main>
 
   <footer id="bottom">
-    Lexiconga Footer Links
-    <a class="button">Support</a>
-    <a class="button">Blog</a>
-    <a class="button">Issues</a>
-    <a class="button">Updates</a>
+    <a href="https://buymeacoff.ee/robbieantenesse" target="_blank" class="small button">Support Lexiconga</a>
+    <a href="https://blog.lexicon.ga" target="_blank" class="small button">Blog</a>
+    <a href="https://github.com/Alamantus/Lexiconga/issues" target="_blank" class="small button">Issues</a>
+    <a href="https://github.com/Alamantus/Lexiconga/releases" target="_blank" class="small button">Updates</a>
     |
-    <a class="button">Help</a>
-    <a class="button">Terms</a>
-    <a class="button">Privacy</a>
+    <a class="button" id="helpInfoButton">Help</a>
+    <a class="button" id="termsInfoButton">Terms</a>
+    <a class="button" id="privacyInfoButton">Privacy</a>
   </footer>
 
   <section id="editModal" class="modal" style="display:none;">
diff --git a/package.json b/package.json
index 1033c9e..32bf4f4 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
   },
   "devDependencies": {
     "autoprefixer": "^9.5.1",
+    "marked": "^0.6.2",
     "parcel-bundler": "^1.12.3",
     "sass": "^1.19.0"
   },
diff --git a/src/js/render.js b/src/js/render.js
index 5f1f511..e811063 100644
--- a/src/js/render.js
+++ b/src/js/render.js
@@ -3,7 +3,7 @@ import { removeTags, slugify } from '../helpers';
 import { getWordsStats, wordExists } from './utilities';
 import { getMatchingSearchWords, highlightSearchTerm, getSearchFilters, getSearchTerm } from './search';
 import { showSection } from './displayToggles';
-import { setupSearchFilters, setupWordOptionButtons, setupPagination, setupWordOptionSelections, setupWordEditFormButtons, setupMaximizeModal } from './setupListeners';
+import { setupSearchFilters, setupWordOptionButtons, setupPagination, setupWordOptionSelections, setupWordEditFormButtons, setupMaximizeModal, setupInfoModal } from './setupListeners';
 import { getPaginationData } from './pagination';
 import { getOpenEditForms } from './wordManagement';
 
@@ -259,3 +259,22 @@ export function renderMaximizedTextbox(maximizeButton) {
   
   setupMaximizeModal(modalElement, textBox);
 }
+
+export function renderInfoModal(content) {
+  const modalElement = document.createElement('section');
+  modalElement.classList.add('modal');
+  modalElement.innerHTML = `<section class="modal maximize-modal"><div class="modal-background"></div>
+    <div class="modal-content">
+      <a class="close-button">&times;&#xFE0E;</a>
+      <section class="info-modal">
+        <div class="content">
+          ${content}
+        </div>
+      </section>
+    </div>
+  </section>`;
+
+  document.body.appendChild(modalElement);
+
+  setupInfoModal(modalElement);
+}
diff --git a/src/js/setupListeners.js b/src/js/setupListeners.js
index d2a9901..3db06ab 100644
--- a/src/js/setupListeners.js
+++ b/src/js/setupListeners.js
@@ -1,5 +1,5 @@
 import {showSection} from './displayToggles';
-import { renderWords, renderEditForm, renderMaximizedTextbox } from './render';
+import { renderWords, renderEditForm, renderMaximizedTextbox, renderInfoModal } from './render';
 import { validateWord, addWord, confirmEditWord, cancelEditWord, confirmDeleteWord } from './wordManagement';
 import { removeTags } from '../helpers';
 import { getNextId } from './utilities';
@@ -11,6 +11,7 @@ export default function setupListeners() {
   setupSearchBar();
   setupWordForm();
   setupMobileWordFormButton();
+  setupInfoButtons();
 }
 
 function setupDetailsTabs() {
@@ -268,3 +269,30 @@ export function setupMaximizeModal(modal, textBox) {
     modal.querySelector('textarea').focus();
   }, 1);
 }
+
+export function setupInfoButtons() {
+  document.getElementById('helpInfoButton').addEventListener('click', () => {
+    import('../markdown/help.md').then(html => {
+      renderInfoModal(html);
+    });
+  });
+  document.getElementById('termsInfoButton').addEventListener('click', () => {
+    import('../markdown/terms.md').then(html => {
+      renderInfoModal(html);
+    });
+  });
+  document.getElementById('privacyInfoButton').addEventListener('click', () => {
+    import('../markdown/privacy.md').then(html => {
+      renderInfoModal(html);
+    });
+  });
+}
+
+export function setupInfoModal(modal) {
+  const closeElements = modal.querySelectorAll('.modal-background, .close-button');
+  Array.from(closeElements).forEach(close => {
+    close.addEventListener('click', () => {
+      modal.parentElement.removeChild(modal);
+    });
+  });
+}
diff --git a/src/markdown/help.md b/src/markdown/help.md
new file mode 100644
index 0000000..8eaada0
--- /dev/null
+++ b/src/markdown/help.md
@@ -0,0 +1,199 @@
+# Lexiconga Help
+
+## Table of Contents
+* [What is Lexiconga?](#what-is-lexiconga-dictionary-builder-)
+* [How do I use Lexiconga?](#how-do-i-use-lexiconga-)
+  * [Getting Started](#getting-started)
+  * [Viewing your Dictionary's Details](#viewing-your-dictionary-s-details)
+  * [Referencing Other Words](#referencing-other-words)
+  * [Maximizing Large Text Boxes](#maximizing-large-text-boxes)
+  * [Entry Management](#entry-management)
+  * [Search/Filter](#search-filter)
+  * [The Dictionary Settings Menu](#the-dictionary-settings-menu)
+  * [Keyboard Shortcuts](#keyboard-shortcuts)
+  * [Importing and Exporting](#importing-and-exporting)
+* [Accounts](#accounts)
+  * [Creating An Account](#creating-an-account)
+  * [Logging In](#logging-in)
+  * [Differences](#differences)
+    * [Account Settings](#account-settings)
+    * [Dictionary Settings](#dictionary-settings)
+    * [Public Dictionaries](#public-dictionaries)
+  * [Forgot Your Password?](#forgot-your-password-)
+  * [Lockout](#lockout)
+* [Problems or Requests](#problems-or-requests)
+* [Update Log](#update-log)
+* [Future Plans](#future-plans)
+* [Thanks](#thanks-)
+* [Libraries Used](#libraries-used)
+
+## What is Lexiconga?
+Lexiconga is a tool intended to help you build constructed language (conlang) dictionaries/lexicons.
+
+You can enter words and definitions, and they will appear nicely formatted and in alphabetical order by name under your dictionary's title, where you can also sort them by definition. If the default parts of speech are not adequate for your conlang, you can change them to whatever you might need. You can even enter a description and full set of language rules that you can toggle on and off below the dictionary's title!
+
+It accepts Unicode characters so you can utilize whatever typable characters you might need and [Markdown](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) for formatting long text entries, and if you want to share or even just make a backup of your dictionary, you can export it to a single convenient file that can be easily re-imported. Your dictionary is saved to your browser's localStorage every time you make a change, which means as long as you use the same browser and don't deliberately delete it (by clearing your cache), your dictionary will always be there when you come back.
+
+If you would like an added layer of accessibility and security (in case you clear your browser cache frequently), you can create an account, where you can store and switch between as many dictionaries as you need. Having an account will also allow you to access your dictionaries from any browser by logging in. (Just be careful you don't overwrite dictionaries by logging in and saving from separate locations!)
+
+## How do I use Lexiconga?
+
+### Getting Started
+When you have a brand new, empty dictionary, the first thing you'll probably want to do is change the title to whatever your conlang is called and add at least a little description of what your language is like or how to use it. You can do this by clicking on the **Edit** button, which will open up the Dictionary Settings screen. Here, you will find all the fields you need to update your dictionary's Name, Specification, and Description. The Description text area uses [Markdown](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) to format any text you include, so brush up on how to do basic things in Markdown before you get started _(NOTE: a line break is done by adding 2 or more spaces to the end of the line and then going to the next line!)_.
+
+After this, go to the **Details** tab and make sure that the Parts of Speech are adequate for your language _(see below for more information about this)_, and add phonology information if you'd like _(learning to use the [International Phonetic Alphabet](https://en.wikipedia.org/wiki/International_Phonetic_Alphabet) can be very helpful here)_. Update these fields how you want them and click the "Save" button to keep the Dictionary Settings menu open, or the "Save & Close" button to close the menu and start adding words!
+
+To add words, use the form on the top left side of the window _(in mobile, click the **+** button to show the form)_. Hopefully the form is self-explanatory, but if not, here's a little guide:  
+Enter the word in your language in the "Word" field, the pronunciation of the word in the "Pronunciation" field, choose a Part of Speech, enter an definition/equivalent word in the "Definition" field and/or a longer definition or fuller explanation of the word using [Markdown](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) in the "Details" text area, and click "Add Word". Your word will instantly appear in your dictionary under the dictionary's name! You can add as many words as you want this way.  
+The only things to remember while adding new words is that the minimum information that you can enter is the Word itself and either the Definition OR the Details. You can have both of these or just one, but you need at least one. If you do not want to use the Pronunciation or Parts of Speech then you do not need to, though if you leave out Part of Speech, you will miss out on the handy Search Filter feature.
+
+And that's all you need to get started! Everything else should be pretty self-explanatory, but a full explanation of Lexiconga and all of its functions continues below.
+
+### Viewing your Dictionary's Details
+After you enter a markdown-formatted description/rules in the Dictionary Settings menu, you can view the formatted version by clicking the "Description" button under your dictionary's name. You can hide it again by clicking "Description" when the description is displayed. The other buttons in the row also display and hide their information.
+
+### Referencing Other Words
+If you want to reference another existing word in your dictionary, wrapping the word with its exact name in double-curly-braces \{\{like so\}\} in the Details field will automatically create a link to the word in the dictionary.  
+Note: If you do not prevent duplicates, it will find the first entry in the list.
+
+### Maximizing Large Text Boxes
+If you need more space to see what you are entering into a word's Details field or any other long text field with a "Maximize" button, clicking "Maximize" will give you a larger view of the text box to enter text in. When you're done writing, click either the "Done" or &times; button or any of the darker space outside of the larger view, and your text will be in the original text area. It will even preserve your cursor position or highlighted text so you don't lose your place moving from the larger view back to the small (and vice-versa)!
+
+### Entry Management
+After adding some words to your dictionary, you'll see an "Options" button on each entry. Clicking the button reveals Edit and Delete buttons.
+
+The **Edit** button will cause a form with the current details of the word you edited to display in the same space that the word previously appeared. You can make any changes you want and click the "Save Changes" button. You will be asked to confirm your changes, and once you do, your word will be saved. If you do not want to make changes, just click the "Cancel" button.
+
+The **Delete** button will ask you to confirm that you want to delete the entry, and if you say yes, the word will be _permanently deleted and **cannot be retrieved**_.
+
+### Search/Filter
+You can search entries or filter by part of speech by clicking the "Search/Filter Options" button to expand the search panel.
+
+From there, you can enter any text you want in the search box and either press Enter or click anywhere outside the search box, and Lexiconga will display any and every entry including your entry. To display the entire dictionary again, you must clear the search box.
+
+You can refine your search by using the checkboxes below the search box:
+
+* **Word**: When checked, Lexiconga searches your dictionary's "Word" entries for the entered text. When unchecked, it ignores it.
+* **Definition**: When checked, Lexiconga searches your dictionary's "Definition/Equivalent Word(s)" entries for the entered text. When unchecked, it ignores it.
+* **Explanation**: When checked, Lexiconga searches your dictionary's "Explanation/Long Definition" entries for the entered text. When unchecked, it ignores it.
+* **Search Case-Sensitive**: When checked, Lexiconga finds entries matching the letter case in the entered text. When unchecked, it will find any case as long as the letters match.
+* **Ignore Diacritics/Accents**: When checked, Lexiconga will ignore accented letters and diacritics and identify them as their equivalent unaccented letter and vice-versa, in case you want to find a word with a diacritic without entering the diacritic in the search box. When unchecked, it will only find diacritics and accented letters if they are specifically entered in the search box.
+
+The "Filter Words" drop-down box allows you to filter your dictionary by part of speech. To display the whole dictionary again after setting a filter, reset the filter option to "All".
+
+### The Dictionary Settings Menu
+While you were in the settings menu when you were getting started, you probably noticed the other tabs.
+
+The **Parts of Speech** field is where you can add custom parts of speech for your language if you need to! Just list your parts of speech in a comma-separated list the same way as the default parts of speech are listed, and your options in the word form and filters will update as soon as you save!  
+>_Please note that if you have other parts of speech added to existing words, those words will not update and will keep the old parts of speech. You will need to manually update any words with incorrect parts of speech after the fact, which is why I recommend you update the available parts of speech as one of the first things you do if you need to change them at all!_
+
+The **Allow Duplicates** checkbox allows you to control whether or not Lexiconga will allow you to add the same word multiple times. If you leave Allow Duplicates unchecked and you try to add a word that is already in the dictionary, Lexiconga will tell you that the word already exists and will ask if you want to update it with the newly entered word.
+
+The **Case-Sensitive** checkbox allows you to control Lexiconga's duplicate detection. If you leave Case-Sensitive unchecked, you will be alerted when you are trying to add a word with the same letters to your dictionary a second time. For example, "dog" is identified as the same word as "DOG" or "doG". The dictionary will keep whatever capitalization you save but it will identify words with the same spelling as duplicates. If Case-Sensitive is checked, then it will not identify "dog" and "DOG" as the same word.  
+If Allow Duplicates is checked, this checkbox becomes unavailable.
+
+The **Dictionary is Complete** checkbox will make the word add/edit form go away so you can view or share it more easily/safely. Plus when you export your dictionary, all of the options to change anything about your dictionary will be excluded when it is re-imported! Your dictionary will become static, and will not be able to be changed or updated without a password.
+
+The **Export...** and **Import...** buttons are discussed in the [Importing and Exporting](#importing-and-exporting) section below.
+
+The **Empty Current Dictionary** should only be used if you want to completely start over from scratch. It will ask you to confirm that you want to delete, and if you confirm, your dictionary will be gone forever. If you have not exported your dictionary before emptying it, there will be absolutely no way to get it back. Please be careful with this!
+
+### Keyboard Shortcuts
+**Esc** : Exits a window (i.e. Dictionary Settings, Account Settings, this about page, etc.) without saving.
+
+**Ctrl/Control +**
+
+* **Enter/Return** : Submit Word (when typing in Word or Edit Form)
+* **D** : Toggle Dictionary Description visibility.
+* **H** : Open this help window.
+* **M** : Maximize/Minimize Full Screen textbox when typing in the boxes that have the Maximize button.
+* **S** : Jump to Search box.
+* **U** : Toggle Word Form lock.
+
+**Alt/Option +**
+
+* **A** : Toggle Account Settings window (if logged in).
+* **S** : Toggle Dicitonary Settings window. Saves & Closes if it's already open.
+
+### Importing and Exporting
+In the Settings screen, you may notice the buttons labeled "**Export...**" and "**Import...**". If you click on either of these, the respective Export and Import page will appear.
+
+#### Exporting
+Clicking the **"Export Words"** button will start a download of all of the words in the currently loaded dictionary into a convenient CSV file format that you can use to re-import into another Lexiconga dictionary or otherwise use as you need it! All of the data is wrapped in double quotes (`"`) to comply with standard CSV format.
+
+Clicking the **"Export Dictionary"** button will start a download of a file with your dictionary's name in a ".dict" format. _Please note that this may not work as expected on mobile platforms._ This export can be a personal backup for your own uses, to work on multiple dictionaries at a time (i.e. export one dictionary and import the other to work on the one you'd like), or you can share it with friends to view it. The .dict file contains your whole dictionary in a JSON format, and is mainly only useful for importing back into Lexiconga.
+
+#### Importing
+Clicking the **"Import Words"** button after choosing a file allows you to import a correctly-formatted CSV list of words into your currently loaded dictionary. This can either be a previously-exported list of words from another Lexiconga dictionary or a list created in Excel with the correct column headers that has been saved as a CSV file. You can download a CSV file as a template from the Import page as an example to help you format and save your Excel lists properly.
+
+Please note that when importing words, you must make sure that the parts of speech specified in the parts of speech column are written _exactly as they are in your dictionary settings_ (capitalized, spelled correctly, or any other details). If they are not the same, then you will not be able to use the filters to find the words! So if you import a word with the part of speech set to "adj" or "adjective", but the part of speech in your dictionary's settings is "Adjective", then you will not be able to find the word using the filters!
+
+If you import a word _without_ a part of speech, you _can_ use the filter's "Blanks" option to find any words with empty parts of speech to help you clean up after the import.
+
+Clicking the **"Import Dictionary"** button after choosing a file allows you to upload and view any previously-exported ".dict" files. After selecting your ".dict" file, click the "Import Dictionary" button to _overwrite your current dictionary_ and view the imported one. Again, please note that if you are not logged in, this import process will _**permanently overwrite your current dictionary**_, so please be sure to export your dictionary _before_ you import a new one!
+
+## Accounts
+If you are using an account with Lexiconga, your experience should remain essentially the same, but you will see some additional options in the Settings menu and you might notice some slight changes in performance as it saves to and loads from the database.
+
+### Creating An Account
+The first time you create an account, you will need to enter your email address and a password (for logging in) in addition to a "Public Name". Your Public Name will be more important when we add dictionary sharing later, but for now, it is important in that it helps indicate whether or not you are logged in (see below). If you have a dictionary loaded in your browser, it will be automatically uploaded to your account and saved after it is created.
+
+### Logging In
+To log in after creating an account, just click the "Log In/Create Account" button and enter your email address and password under the "Log In" form, just like any other account online. You will know that you are logged in from the "Welcome back!" notification at the top of the screen when you load the page. You can also know that you're logged in if you see a "Log Out" button instead of "Log In/Create Account" in the top right corner of the screen.
+
+### Differences
+Every time you save a change to your dictionary's settings or add, edit, or delete a word, the changes are automatically saved to both your browser's localStorage in addition to being sent to your account. If you're paranoid that your changes are not being saved, you can check your browser's console log to see the little save and update notifications.
+
+#### Account Settings
+After logging in, you'll see an "Account Settings" button in the top, right side of the Lexiconga window. Clicking this will allow you to change a few settings about your account:
+
+The **Email** field allows you to specify a different login and contact email address. Make sure that you do not forget what you chose, because there is no way to retrieve your email address if you change it to something you forget!
+
+The **Public Name** field allows you to change your public name.
+
+The **Allow Emails** checkbox allows you to choose if you would like to receive emails about important Lexiconga updates. Make sure that you allow emails from addresses at lexicon.ga or check your spam folder just in case. Note that this checkbox does not affect password reset requests—if you forget your password, Lexiconga will send you a password reset email regardless of your choice here.
+
+If you change any of the three options above, be sure you click the "Save Settings" button.
+
+The "Reset Password" button in the "Reset Your Password" section will allow you to reset your login password. Don't forget it!
+
+#### Dictionary Settings
+Under the Settings menu, you'll see some additional options:
+
+The **Dictionary is Public** checkbox determines whether or not the current dictionary can be viewed by anyone online using the Public Link that appears when checked. Public dictionaries are explained more below.
+
+The **Change Dicitonaries** dropdown box contains the names of all of your created dictionaries. If you have more than one, selecting a different dictionary from the list will immediately download and display that dictionary.
+
+The **Create New Dictionary** button will instantly create and save a new blank dictionary to your account.
+
+The **Import Dictionary** button acts the same as before, but instead of overwriting your dictionary, it imports the dictionary as a new, separate dictionary and saves it to your account. After importing, the imported dictionary will display, and you can use the Change Dictionaries dropdown box to change to a previous one if you desire.
+
+The **Delete Current Dictionary** button will permanently and irretrievably delete the currently loaded dictionary from your account! Be careful with that one. After deleting, you will then be prompted to either select another dictionary to load or create a new one, _or_ if you have no other dictionaries, immediately create a new one for you.
+
+#### Public Dictionaries
+When a dictionary is marked as public, you can share its public link and allow anyone to view its contents without being able to make changes. The dictionary's description and the search/filter area is visible by default, and the viewer can scroll through or search your dictionary without being able to make changes. Public dictionaries also have the ability to share specific word entries using the "➦" buttons in each word box. When viewing a word, the search/filter options are not available, but anyone can still read the dictionary's description.
+
+To log in or create an account when viewing a dictionary, you need to go back to the main Lexiconga page. You can get there by clicking either the logo or the "Go Home" button. Or, if you are the owner of the dictionary and are currently logged in, the "Go Home" button will be replaced with an "Edit Dictionary" button, and you can click that to change your current dictionary adn start editing it.
+
+### Forgot Your Password?
+If you forget your password, you can request a password reset email by clicking the "Forgot Password" button on the "Log In/Create Account" button entering the email address associated with your account and clicking "Email Password Reset Key". This will send an email (_check your spam_) with a link that will allow you to reset your password. When you go to the link provided, you'll be able to enter a new password that you can log in with.
+
+### Lockout
+If you manage to enter your password wrong 10 times, you'll be locked out from logging in for an hour. Use this time to try to remember your password or something. You can get an idea of how long you've waited by refreshing the page and clicking the unfortunate "Can't Login" button. After an hour has passed, refresh the page again and you'll get another 10 tries.
+
+## Problems or Requests
+Please report any problems you come across to the [Lexiconga Issues page](https://lexicon.ga/issues). You can also submit enhancement requests to the same place if you have any requests for new features.
+
+## Update Log
+You can see all previous updates to Lexiconga here:  
+[https://lexicon.ga/updates](https://lexicon.ga/updates)
+
+## Open Source
+The free features of Lexiconga are fully open-source and can be found here: https://cybre.tech/Alamantus/lexiconga-lite
+
+## Thanks!
+If you like Lexiconga and want to buy me a cup of coffee for the service, you can use **[Buy Me A Coffee](https://buymeacoff.ee/robbieantenesse)** to help keep it online if you want.
+
+I hope you enjoy Lexiconga and that it helps you build some awesome languages.
+
+–Robbie Antenesse
diff --git a/src/markdown/privacy.md b/src/markdown/privacy.md
new file mode 100644
index 0000000..c3f0961
--- /dev/null
+++ b/src/markdown/privacy.md
@@ -0,0 +1,49 @@
+## Privacy Policy
+
+This document was last updated on May 16, 2018 to update contact information and add transparency to our hosting service and how your data is used (i.e. to display your dicitonaries and sometimes send you emails if you agree to receive them).
+
+This Privacy Policy governs the manner in which Lexiconga collects, uses, maintains and discloses information collected from users (each, a "User") of the https://lexicon.ga website ("Site") and its accounts ("Account").
+
+### Personal identification information
+We may collect personal identification information from Users in a variety of ways, including, but not limited to, when Users visit our site, register on the site, and in connection with other activities, services, features or resources we make available on our Site. Users may be asked for, as appropriate, their name and email address. Users may, however, use our Site anonymously. We will collect personal identification information from Users only if they voluntarily submit such information to us. Users can always refuse to supply personal identification information, except that it may prevent them from engaging in certain Site-related activities.
+
+### Non-personal identification information
+We may collect non-personal identification information about Users whenever they interact with our Site through website analytics tools. Non-personal identification information may include the browser name, the type of computer and technical information about Users means of connection to our Site, such as the operating system and the Internet service providers utilized and other similar information.
+
+### Web browser cookies
+Our Site does not use "cookies" to enhance User experience, but it does use "local storage". User's web browser places local storage on their hard drive for record-keeping purposes and sometimes to track information about them, but we only use this to store your current dictionary. User may choose to set their web browser to refuse local storage usage, but if they do so, the Site will not function properly.
+
+### How we use collected information
+Lexiconga may collect and use Users personal information for the following purposes:  
+
+- **To run and operate our Site and personalize user experience:** We need your input to display content on the Site correctly, because it is a tool built entirely to display the content that you enter.
+
+We do not use your data in _any way_ other than to serve your content or to send the occasional update email—you may opt out of receiving emails at any time via your Account Settings! Your email address is tied directly to your account, however, so altering it _will change your login credentials_.
+
+### How we protect your information
+If you are utilizing an Account, we protect your information by keeping your information on a trusted database server provided by the Site's web host, [InfinityFree](https://infinityfree.net/). All data you save from an Account is uploaded to this database server from your browser. If we ever change web hosts, you will be notified via the on-site notification.
+
+If you utilize the ability to make dictionaries associated with an Account visible to the public, you accept all responsibility for its content being visible to anyone who might find it. We cannot protect what you willingly put in public, and we do not accept liability if information you place online is used against you somehow. Never put personal information online!
+
+If you are not using an Account, then all of your information remains right on your own computer where it belongs. As mentioned previously, all data is stored in your browser's "local storage".
+
+### Sharing your personal information
+We do not sell, trade, or rent Users personal identification information to others. We may share generic aggregated demographic information not linked to any personal identification information regarding visitors and users with our business partners, trusted affiliates and advertisers for the purposes outlined above.
+
+### Electronic newsletters
+If User decides to opt-in to our mailing list, they will receive emails that may include company news, updates, related product or service information, etc. We may use third party service providers like MailChimp to help us operate our business and the Site or administer activities on our behalf, such as sending out newsletters or surveys. We may share your information with these third parties for those limited purposes provided that you have given us your permission.
+
+### Third party websites
+Users may find advertising or other content on our Site that link to the sites and services of our partners, suppliers, advertisers, sponsors, licencors and other third parties. We do not control the content or links that appear on these sites and are not responsible for the practices employed by websites linked to or from our Site. In addition, these sites or services, including their content and links, may be constantly changing. These sites and services may have their own privacy policies and customer service policies. Browsing and interaction on any other website, including websites which have a link to our Site, is subject to that website's own terms and policies.
+
+### Advertising
+Ads appearing on our site may be delivered to Users by advertising partners, who may set cookies. These cookies allow the ad server to recognize your computer each time they send you an online advertisement to compile non personal identification information about you or others who use your computer. This information allows ad networks to, among other things, deliver targeted advertisements that they believe will be of most interest to you. This privacy policy does not cover the use of cookies by any advertisers.
+
+### Changes to this privacy policy
+Lexiconga has the discretion to update this privacy policy at any time. When we do, we will post a notification on the main page of our Site. We encourage Users to frequently check this page for any changes to stay informed about how we are helping to protect the personal information we collect. You acknowledge and agree that it is your responsibility to review this privacy policy periodically and become aware of modifications.
+
+### Your acceptance of these terms
+By using this Site, you signify your acceptance of this policy. If you do not agree to this policy, please do not use our Site. Your continued use of the Site following the posting of changes to this policy will be deemed your acceptance of those changes. This policy was originally generated using PrivacyPolicies.com and modified for our use.
+
+### Contacting us
+If you have any questions about this Privacy Policy, the practices of this site, or your dealings with this site, please contact us by email at `help (at) lexicon (dot) ga` or follow us Twitter @Lexiconga.
\ No newline at end of file
diff --git a/src/markdown/terms.md b/src/markdown/terms.md
new file mode 100644
index 0000000..5afba6c
--- /dev/null
+++ b/src/markdown/terms.md
@@ -0,0 +1,40 @@
+## Terms of Service ("Terms")
+
+Last updated: May 16, 2018 — Update to contact information.
+
+Please read these Terms of Service ("Terms", "Terms of Service") carefully before using the https://lexicon.ga website (the "Service") or the cloud account service (an "Account") operated by Robbie Antenesse and Alamantus GameDev ("us", "we", or "our").
+
+Your access to and use of the Service is conditioned on your acceptance of and compliance with these Terms. These Terms apply to all visitors, users and others who access or use the Service. By accessing or using the Service you agree to be bound by these Terms. If you disagree with any part of the terms then you may not access the Service.
+
+### Usage
+You may use our Service free of charge, and you are free to stop using our Service at any time. If you are utilizing an Account with our Service, you agree to never attempt maliciously dismantling the Service in any way or to use the Service in a way that is unlawful. If you are found in violation of this, your Account and access to the Service may be terminated without warning.
+
+If you stop using our Service, your data will remain unless you request its removal. When data is removed from an Account in our Service, it becomes permanently irretrievable. You agree that you understand the implications of deleting or requesting the deletion of your data and that we are not liable for its loss.
+
+Instructions for use are visible through the "Help" button on the site.
+
+### Public Dictionaries
+Any dictionaries created and associated with an Account are private by default and only visible to the owner of the Account. You may make your dictionaries visible to the public at any time by utilizing the appropriate dictionarys setting.
+
+If you utilize the ability to make dictionaries associated with an Account visible to the public, you accept all responsibility for any and all damages that may come as a result of the information you place online and acknowledge that we are not liable in any way. Do not put any personal information online. We cannot protect what you deliberately make publicly visible.
+
+### Termination
+We may terminate or suspend access to our Service immediately, without prior notice or liability, for any reason whatsoever, including without limitation if you breach the Terms. All provisions of the Terms which by their nature should survive termination shall survive termination, including, without limitation, ownership provisions, warranty disclaimers, indemnity and limitations of liability.
+
+### Links To Other Web Sites
+Our Service may contain links to third-party web sites or services that are not owned or controlled by Robbie Antenesse and Alamantus GameDev.
+
+Robbie Antenesse and Alamantus GameDev has no control over, and assumes no responsibility for, the content, privacy policies, or practices of any third party web sites or services. You further acknowledge and agree that Robbie Antenesse and Alamantus GameDev shall not be responsible or liable, directly or indirectly, for any damage or loss caused or alleged to be caused by or in connection with use of or reliance on any such content, goods or services available on or through any such web sites or services.
+
+We strongly advise you to read the terms and conditions and privacy policies of any third-party web sites or services that you visit.
+
+### Governing Law
+These Terms shall be governed and construed in accordance with the laws of the United States of America, without regard to its conflict of law provisions. Our failure to enforce any right or provision of these Terms will not be considered a waiver of those rights. If any provision of these Terms is held to be invalid or unenforceable by a court, the remaining provisions of these Terms will remain in effect. These Terms constitute the entire agreement between us regarding our Service, and supersede and replace any prior agreements we might have between us regarding the Service.
+
+### Changes
+We reserve the right, at our sole discretion, to modify or replace these Terms at any time. If a revision is material we will try to provide at least 5 days notice prior to any new terms taking effect. What constitutes a material change will be determined at our sole discretion.
+
+By continuing to access or use our Service after those revisions become effective, you agree to be bound by the revised terms. If you do not agree to the new terms, please stop using the Service.
+
+### Contact Us
+If you have any questions about these Terms, please contact us by email at `help (at) lexicon (dot) ga` or follow us on Twitter @Lexiconga.
\ No newline at end of file
diff --git a/src/scss/_structure.scss b/src/scss/_structure.scss
index 24c1a62..ef68fc7 100644
--- a/src/scss/_structure.scss
+++ b/src/scss/_structure.scss
@@ -249,3 +249,23 @@
     padding: $general-padding;
   }
 }
+
+.info-modal {
+  padding: ($general-padding * 1.5) 0 $general-padding $general-padding;
+  height: 100%;
+
+  .content {
+    height: 100%;
+    overflow-y: auto;
+    padding-right: $general-padding;
+  }
+}
+
+#bottom {
+  text-align: center;
+
+  a {
+    color: #000000;
+    text-decoration: none;
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index 645f4f0..96f09c4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3048,6 +3048,11 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+marked@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-0.6.2.tgz#c574be8b545a8b48641456ca1dbe0e37b6dccc1a"
+  integrity sha512-LqxwVH3P/rqKX4EKGz7+c2G9r98WeM/SW34ybhgNGhUQNKtf1GmmSkJ6cDGJ/t6tiyae49qRkpyTw2B9HOrgUA==
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"