mirror of
				https://github.com/Alamantus/Lexiconga.git
				synced 2025-11-04 10:17:01 +01:00 
			
		
		
		
	
		
			
				
	
	
		
			304 lines
		
	
	
		
			No EOL
		
	
	
		
			11 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			304 lines
		
	
	
		
			No EOL
		
	
	
		
			11 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
<!DOCTYPE html>
 | 
						|
<html>
 | 
						|
<head>
 | 
						|
  <meta charset="utf-8">
 | 
						|
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 | 
						|
  <meta name="viewport" content="width=device-width, initial-scale=1">
 | 
						|
  <title>Lexiconga</title>
 | 
						|
  <script src="src/index.js"></script>
 | 
						|
</head>
 | 
						|
<body>
 | 
						|
  <header id="top">
 | 
						|
    <h1 id="title">Lexiconga</h1>
 | 
						|
 | 
						|
    <input id="openSearchModal" placeholder="🔍︎ Search"> <span id="searchResults"></span>
 | 
						|
    <section id="searchModal" class="modal" style="display:none;">
 | 
						|
      <div class="modal-background" onclick="this.parentElement.style.display='none';"></div>
 | 
						|
      <div class="modal-content">
 | 
						|
        <a class="close-button" onclick="this.parentElement.parentElement.style.display='none';">×︎</a>
 | 
						|
        <section>
 | 
						|
          <label>Search Term
 | 
						|
            <input id="searchBox" placeholder="Search term">
 | 
						|
          </label>
 | 
						|
          <a id="searchButton" class="small button">Search</a>
 | 
						|
          <a id="clearSearchButton" class="small red button">Clear</a>
 | 
						|
          <a class="small button" onclick="var options=document.getElementById('searchOptions').style;options.display=options.display=='block'?'none':'block';">
 | 
						|
            Toggle Options
 | 
						|
          </a>
 | 
						|
        </section>
 | 
						|
        <footer id="searchOptions" style="display:none;">
 | 
						|
          <div class="split">
 | 
						|
            <div class="quarter category">
 | 
						|
              <h3>Search For</h3>
 | 
						|
            </div>
 | 
						|
            <div class="three-quarter options">
 | 
						|
              <label>Case-Sensitive
 | 
						|
                <input type="checkbox" id="searchCaseSensitive">
 | 
						|
              </label>
 | 
						|
              <label>Exact Words
 | 
						|
                <input type="checkbox" id="searchExactWords">
 | 
						|
              </label>
 | 
						|
            </div>
 | 
						|
          </div>
 | 
						|
          <div class="split">
 | 
						|
            <div class="quarter category">
 | 
						|
              <h3>Include in Search</h3>
 | 
						|
            </div>
 | 
						|
            <div class="three-quarter options">
 | 
						|
              <label>Word Name
 | 
						|
                <input type="checkbox" checked id="searchIncludeName">
 | 
						|
              </label>
 | 
						|
              <label>Definition
 | 
						|
                <input type="checkbox" checked id="searchIncludeDefinition">
 | 
						|
              </label>
 | 
						|
              <label>Details
 | 
						|
                <input type="checkbox" checked id="searchIncludeDetails">
 | 
						|
              </label>
 | 
						|
            </div>
 | 
						|
          </div>
 | 
						|
          <div class="split">
 | 
						|
            <div class="quarter category">
 | 
						|
              <h3>Include Only</h3>
 | 
						|
            </div>
 | 
						|
            <div class="three-quarter options" id="searchPartsOfSpeech"></div>
 | 
						|
          </div>
 | 
						|
        </footer>
 | 
						|
      </div>
 | 
						|
    </section>
 | 
						|
 | 
						|
    <a id="settingsButton" class="button">Settings</a>
 | 
						|
  </header>
 | 
						|
 | 
						|
  <main>
 | 
						|
    <aside id="sideColumn">
 | 
						|
      <div id="mobileWordFormShow">+</div>
 | 
						|
      <form id="wordForm">
 | 
						|
        <label>Word<span class="red">*</span><br>
 | 
						|
          <input id="wordName">
 | 
						|
        </label>
 | 
						|
        <label>Pronunciation<a class="label-button">IPA Chart</a><br>
 | 
						|
          <input id="wordPronunciation">
 | 
						|
        </label>
 | 
						|
        <label>Part of Speech<br>
 | 
						|
          <select id="wordPartOfSpeech" class="part-of-speech-select"></select>
 | 
						|
        </label>
 | 
						|
        <label>Definition<span class="red">*</span><br>
 | 
						|
          <input id="wordDefinition" placeholder="Equivalent words">
 | 
						|
        </label>
 | 
						|
        <label>Details<span class="red">*</span><a class="label-button maximize-button">Maximize</a><br>
 | 
						|
          <textarea id="wordDetails" placeholder="Markdown formatting allowed"></textarea>
 | 
						|
        </label>
 | 
						|
        <div id="wordErrorMessage"></div>
 | 
						|
        <a class="button" id="addWordButton">Add Word</a>
 | 
						|
      </form>
 | 
						|
    </aside>
 | 
						|
    
 | 
						|
    <section id="mainColumn">
 | 
						|
      <section id="detailsSection">
 | 
						|
        <h2 id="dictionaryName">Dictionary Name</h2>
 | 
						|
        <nav>
 | 
						|
          <ul>
 | 
						|
            <li>Description</li><li>Details</li><li>Stats</li><li id="editDictionaryButton">Edit</li>
 | 
						|
          </ul>
 | 
						|
        </nav>
 | 
						|
        <article id="detailsPanel" style="display:none;">
 | 
						|
          <p>The dictionary details</p>
 | 
						|
        </article>
 | 
						|
      </section>
 | 
						|
 | 
						|
      <section class="pagination"></section>
 | 
						|
 | 
						|
      <section id="entries">
 | 
						|
        <article class="entry">
 | 
						|
          <header>
 | 
						|
            <h4 class="word">Loading Words</h4>
 | 
						|
          </header>
 | 
						|
          <dl>
 | 
						|
            <dt class="definition">Please Wait...</dt>
 | 
						|
          </dl>
 | 
						|
        </article>
 | 
						|
      </section>
 | 
						|
      
 | 
						|
      <section class="pagination"></section>
 | 
						|
    </section>
 | 
						|
  </main>
 | 
						|
 | 
						|
  <footer id="bottom">
 | 
						|
    <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" id="helpInfoButton">Help</a>
 | 
						|
    <a class="button" id="termsInfoButton">Terms</a>
 | 
						|
    <a class="button" id="privacyInfoButton">Privacy</a>
 | 
						|
  </footer>
 | 
						|
 | 
						|
  <section id="settingsModal" class="modal" style="display:none;">
 | 
						|
    <div class="modal-background" onclick="this.parentElement.style.display='none';"></div>
 | 
						|
    <div class="modal-content">
 | 
						|
      <a class="close-button" onclick="this.parentElement.parentElement.style.display='none';">×︎</a>
 | 
						|
      <section>
 | 
						|
        <form>
 | 
						|
          <label>Use IPA Auto-Fill
 | 
						|
            <input type="checkbox" checked><br />
 | 
						|
            <small>Check this to use character combinations to input International Phonetic Alphabet characters into
 | 
						|
              Pronunciation fields.</small>
 | 
						|
          </label>
 | 
						|
  
 | 
						|
          <label>Theme
 | 
						|
            <select disabled>
 | 
						|
              <option selected value="default">Default</option>
 | 
						|
              <option selected value="dark">Dark</option>
 | 
						|
              <option selected value="light">Light</option>
 | 
						|
              <option selected value="blue">Blue</option>
 | 
						|
              <option selected value="green">Green</option>
 | 
						|
              <option selected value="royal">Royal</option>
 | 
						|
            </select>
 | 
						|
          </label>
 | 
						|
        </form>
 | 
						|
      </section>
 | 
						|
      <footer>
 | 
						|
        <a class="button" id="settingsSave">Save</a>
 | 
						|
        <a class="button" id="settingsSaveAndClose">Save & Close</a>
 | 
						|
        <a class="red button" onclick="this.parentElement.parentElement.parentElement.style.display='none';">Close Without
 | 
						|
          Saving</a>
 | 
						|
      </footer>
 | 
						|
    </div>
 | 
						|
  </section>
 | 
						|
 | 
						|
  <section id="editModal" class="modal" style="display:none;">
 | 
						|
    <div class="modal-background" onclick="this.parentElement.style.display='none';"></div>
 | 
						|
    <div class="modal-content">
 | 
						|
      <a class="close-button" onclick="this.parentElement.parentElement.style.display='none';">×︎</a>
 | 
						|
      <nav class="tabs">
 | 
						|
        <ul>
 | 
						|
          <li class="active">Description</li><li>Details</li><li>Settings</li><li>Actions</li>
 | 
						|
        </ul>
 | 
						|
      </nav>
 | 
						|
      <section id="editDescriptionTab">
 | 
						|
        <label>Name<br>
 | 
						|
          <input id="editName">
 | 
						|
        </label>
 | 
						|
        <label>Specification<br>
 | 
						|
          <input id="editSpecification">
 | 
						|
        </label>
 | 
						|
        <label>Description<a class="label-button maximize-button">Maximize</a><br>
 | 
						|
          <textarea id="editDescription"></textarea>
 | 
						|
        </label>
 | 
						|
      </section>
 | 
						|
 | 
						|
      <section id="editDetailsTab" style="display:none;">
 | 
						|
        <label>Parts of Speech <small>(Comma Separated List)</small><br>
 | 
						|
          <input id="editPartsOfSpeech">
 | 
						|
        </label>
 | 
						|
        <label>Alphabetical Order <small>(Comma Separated List. Include every letter!)</small><br>
 | 
						|
          <input id="editAlphabeticalOrder" disabled value="English Alphabet">
 | 
						|
        </label>
 | 
						|
        <h3>Phonology</h3>
 | 
						|
        <div class="split three">
 | 
						|
          <div>
 | 
						|
            <label>Consonants<br>
 | 
						|
              <input id="editConsonants">
 | 
						|
            </label>
 | 
						|
          </div>
 | 
						|
          <div>
 | 
						|
            <label>Vowels<br>
 | 
						|
              <input id="editVowels">
 | 
						|
            </label>
 | 
						|
          </div>
 | 
						|
          <div>
 | 
						|
            <label>Polyphthongs / Blends<br>
 | 
						|
              <input id="editBlends">
 | 
						|
            </label>
 | 
						|
          </div>
 | 
						|
        </div>
 | 
						|
        <h3>Phonotactics</h3>
 | 
						|
        <div class="split three">
 | 
						|
          <div>
 | 
						|
            <label>Onset<br>
 | 
						|
              <input id="editOnset">
 | 
						|
            </label>
 | 
						|
          </div>
 | 
						|
          <div>
 | 
						|
            <label>Nucleus<br>
 | 
						|
              <input id="editNucleus">
 | 
						|
            </label>
 | 
						|
          </div>
 | 
						|
          <div>
 | 
						|
            <label>Coda<br>
 | 
						|
              <input id="editCoda">
 | 
						|
            </label>
 | 
						|
          </div>
 | 
						|
        </div>
 | 
						|
        <label>Exceptions<br>
 | 
						|
          <textarea id="editExceptions"></textarea>
 | 
						|
        </label>
 | 
						|
        <h3>Orthography</h3>
 | 
						|
        <label>Notes<a class="label-button maximize-button">Maximize</a><br>
 | 
						|
          <textarea id="editOrthography"></textarea>
 | 
						|
        </label>
 | 
						|
        <h3>Grammar</h3>
 | 
						|
        <label>Notes<a class="label-button maximize-button">Maximize</a><br>
 | 
						|
          <textarea id="editGrammar"></textarea>
 | 
						|
        </label>
 | 
						|
      </section>
 | 
						|
 | 
						|
      <section id="editSettingsTab" style="display:none;">
 | 
						|
        <label>Prevent Duplicate Words
 | 
						|
          <input type="checkbox" id="editPreventDuplicates"><br>
 | 
						|
          <small>Checking this box will prevent the creation of words with the exact same spelling.</small>
 | 
						|
        </label>
 | 
						|
        <label>Words are Case-Sensitive
 | 
						|
          <input type="checkbox" id="editCaseSensitive"><br>
 | 
						|
          <small>Checking this box will allow the creation of words with the exact same spelling if their capitalization is different.</small>
 | 
						|
        </label>
 | 
						|
        <label>Sort by Definition
 | 
						|
          <input type="checkbox" id="editSortByDefinition"><br>
 | 
						|
          <small>Checking this box will sort the words in alphabetical order based on the Definition instead of the Word.</small>
 | 
						|
        </label>
 | 
						|
        <label>Mark Complete
 | 
						|
          <input type="checkbox" id="editIsComplete"><br>
 | 
						|
          <small>Checking this box will mark this as "complete" and prevent any changes from being made.</small>
 | 
						|
        </label>
 | 
						|
        <label>Make Public
 | 
						|
          <input type="checkbox" id="editIsPublic"><br>
 | 
						|
          <small>Checking this box will make this public via a link you can share with others.</small>
 | 
						|
        </label>
 | 
						|
      </section>
 | 
						|
 | 
						|
      <section id="editActionsTab" style="display:none;">
 | 
						|
        <h3>Import / Export</h3>
 | 
						|
        <div class="split two">
 | 
						|
          <div>
 | 
						|
            <p>
 | 
						|
              <a class="button">Import JSON</a><br>
 | 
						|
              <small>Import a previously-exported <code>JSON</code> file.</small>
 | 
						|
            </p>
 | 
						|
            <p>
 | 
						|
              <a class="button">Import Words</a><br>
 | 
						|
              <small>Import a CSV file of words. (Download an <a>example file with the correct formatting</a>.)</small>
 | 
						|
            </p>
 | 
						|
          </div>
 | 
						|
          <div>
 | 
						|
            <p>
 | 
						|
              <a class="button">Export JSON</a><br>
 | 
						|
              <small>Export your work as a <code>JSON</code> file to re-import later.</small>
 | 
						|
            </p>
 | 
						|
            <p>
 | 
						|
              <a class="button">Export Words</a><br>
 | 
						|
              <small>Export a CSV file of your words.</small>
 | 
						|
            </p>
 | 
						|
          </div>
 | 
						|
        </div>
 | 
						|
      </section>
 | 
						|
 | 
						|
      <footer>
 | 
						|
        <a class="button" id="editSave">Save</a>
 | 
						|
        <a class="button" id="editSaveAndClose">Save & Close</a>
 | 
						|
        <a class="red button" onclick="this.parentElement.parentElement.parentElement.style.display='none';">Close Without Saving</a>
 | 
						|
      </footer>
 | 
						|
    </div>
 | 
						|
  </section>
 | 
						|
</body>
 | 
						|
</html> |