Lexiconga/index.html

92 lines
2.8 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="searchButton" placeholder="🔍&#xFE0E; Search">
</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"></select>
</label>
<label>Definition<br>
<input id="wordDefinition">
</label>
<label>Details<a class="label-button">Maximize</a><br>
<textarea id="wordDetails"></textarea>
</label>
</form>
</aside>
<section id="mainColumn">
<section id="detailsSection">
<h2>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';">&times;&#xFE0E;</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>