126 lines
4.4 KiB
HTML
126 lines
4.4 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">
|
|
<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><strong>Search Term</strong>
|
|
<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>Include in Search</h3>
|
|
</div>
|
|
<div class="three-quarter options">
|
|
<label><strong>Word Name</strong>
|
|
<input type="checkbox" checked id="searchIncludeName">
|
|
</label>
|
|
<label><strong>Definition</strong>
|
|
<input type="checkbox" checked id="searchIncludeDefinition">
|
|
</label>
|
|
<label><strong>Details</strong>
|
|
<input type="checkbox" checked id="searchIncludeDetails">
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</section>
|
|
</header>
|
|
|
|
<main>
|
|
<aside id="sideColumn">
|
|
<form id="wordForm" onsubmit="function(e){e.preventDefault();return false;}">
|
|
<label>Word<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<br>
|
|
<input id="wordDefinition" placeholder="Equivalent words">
|
|
</label>
|
|
<label>Details<a class="label-button">Maximize</a><br>
|
|
<textarea id="wordDetails" placeholder="Markdown formatting allowed"></textarea>
|
|
</label>
|
|
</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 onclick="document.getElementById('editModal').style.display='block'">Edit</li>
|
|
</ul>
|
|
</nav>
|
|
<article id="detailsPanel" style="display:none;">
|
|
<p>The dictionary details</p>
|
|
</article>
|
|
</section>
|
|
|
|
<section id="entries">
|
|
<article class="entry">
|
|
<header>
|
|
<h4 class="word">Word</h4>
|
|
<span class="pronunciation">Pronunciation</span>
|
|
<span class="part-of-speech">Part of Speech</span>
|
|
</header>
|
|
<dl>
|
|
<dt class="definition">Definition</dt>
|
|
<dd class="details">
|
|
<p><em>Markdown</em> <strong>details</strong></p>
|
|
</dd>
|
|
</dl>
|
|
</article>
|
|
</section>
|
|
</section>
|
|
</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 class="button">Help</a>
|
|
<a class="button">Terms</a>
|
|
<a class="button">Privacy</a>
|
|
</footer>
|
|
|
|
<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>
|
|
</div>
|
|
</section>
|
|
</body>
|
|
</html> |