initial commit
This commit is contained in:
commit
5fc1858e75
61
index.html
Normal file
61
index.html
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>heonian web dictionary</title>
|
||||||
|
<meta name="description" content="now with 50% less unix requirement">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<link rel="stylesheet" href="./main.css">
|
||||||
|
<link rel="preload" href="./wordlist.json" as="fetch">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!--
|
||||||
|
entry screen, centered {
|
||||||
|
hisho
|
||||||
|
[search box, has a button to click to toggle heonian IME]
|
||||||
|
[show all words] [other resource links, idk link to google doc, heonian-conversation, github]
|
||||||
|
}
|
||||||
|
|
||||||
|
click search box or show all words, screen animates search box and. title and all that to top of screen
|
||||||
|
and. results appear n stuff,
|
||||||
|
Vewy Cool Fancy Totally Not Waste Of Resources
|
||||||
|
|
||||||
|
RUBY TAGS HOLY SHIT
|
||||||
|
um,
|
||||||
|
results layout would kinda look like,,,
|
||||||
|
|
||||||
|
[words - 420 found / expressions - 69 found / wahtever else - ygettheidea] (click one to filter to just those)
|
||||||
|
|
||||||
|
word {
|
||||||
|
word [word in latin, in ruby]
|
||||||
|
[tags like. common word, slang, formal???, type, etc]
|
||||||
|
[maybe formal and non-formal versions of word could be shown]
|
||||||
|
[show inflections button (steal from jisho)]
|
||||||
|
[play audio clip would also be cool....]
|
||||||
|
|
||||||
|
short english translation, followed by . long description/explanation of word
|
||||||
|
maybe an example? usage?
|
||||||
|
and. source/who made it/etc
|
||||||
|
repeat for all meanings of word,
|
||||||
|
}
|
||||||
|
-->
|
||||||
|
<header class="fullscreen">
|
||||||
|
<span class="heonian"></span>
|
||||||
|
<div id="search">
|
||||||
|
<input type="text" placeholder="loading...">
|
||||||
|
<button>
|
||||||
|
H
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a href="#">show all words</a> <a href="#">uh. something else</a>
|
||||||
|
</div>
|
||||||
|
<noscript>turn on js doofus</noscript>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<script src="./main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
128
main.css
Normal file
128
main.css
Normal file
@ -0,0 +1,128 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: "heonian";
|
||||||
|
src: url("./font.otf");
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes clearly-cheating {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-20px);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--font: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||||
|
--font-h: "heonian", "Helvatica Neue", Helvetica, Arial, sans-serif;
|
||||||
|
--nice-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
||||||
|
--grey: rgb(226, 226, 226);
|
||||||
|
--darkgrey: rgb(150, 150, 150);
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-family: var(--font);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: rgb(119, 205, 233);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heonian {
|
||||||
|
font-family: "heonian";
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
padding-bottom: 8px;
|
||||||
|
border-bottom: 1px solid var(--grey);
|
||||||
|
}
|
||||||
|
|
||||||
|
header * {
|
||||||
|
margin: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header #search {
|
||||||
|
flex-grow: 1;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
header #search button {
|
||||||
|
all: unset;
|
||||||
|
position: relative;
|
||||||
|
left: -64px;
|
||||||
|
top: -2px;
|
||||||
|
width: 48px;
|
||||||
|
text-align: center;
|
||||||
|
height: 2rem;
|
||||||
|
border-left: 1px solid var(--grey);
|
||||||
|
}
|
||||||
|
|
||||||
|
header input {
|
||||||
|
height: 2rem;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-family: var(--font-h);
|
||||||
|
padding: 4px;
|
||||||
|
padding-right: calc(4px + 48px); /* space for heonian ime button */
|
||||||
|
border: 1px solid var(--grey);
|
||||||
|
border-radius: 4px;
|
||||||
|
font-weight: 100;
|
||||||
|
transition: border-color 0.3s;
|
||||||
|
width: calc(100% - 52px - 24px);
|
||||||
|
}
|
||||||
|
|
||||||
|
header input:focus {
|
||||||
|
outline: none;
|
||||||
|
border: 1px solid var(--darkgrey);
|
||||||
|
}
|
||||||
|
|
||||||
|
header span.heonian {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
header.fullscreen {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
flex-flow: column;
|
||||||
|
justify-content: center;
|
||||||
|
padding-bottom: 0px;
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
header.fullscreen span.heonian {
|
||||||
|
font-size: 8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
header.fullscreen #search {
|
||||||
|
flex-grow: 0;
|
||||||
|
max-width: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-animation {
|
||||||
|
animation: clearly-cheating 1s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-animation-reverse {
|
||||||
|
animation: clearly-cheating 1s ease-in-out reverse;
|
||||||
|
}
|
||||||
118
main.js
Normal file
118
main.js
Normal file
@ -0,0 +1,118 @@
|
|||||||
|
let json = null;
|
||||||
|
|
||||||
|
let searchDictionary = {};
|
||||||
|
|
||||||
|
let header = null;
|
||||||
|
let main = null;
|
||||||
|
|
||||||
|
function animateHeader(inout = false) {
|
||||||
|
//todo: debounce this
|
||||||
|
if (inout) {
|
||||||
|
header.classList.add("header-animation-reverse");
|
||||||
|
header.classList.remove("header-animation");
|
||||||
|
setTimeout(() => {
|
||||||
|
header.classList.add("fullscreen");
|
||||||
|
},500);
|
||||||
|
setTimeout(() => {
|
||||||
|
header.classList.remove("header-animation-reverse");
|
||||||
|
},1000);
|
||||||
|
} else {
|
||||||
|
header.classList.add("header-animation");
|
||||||
|
header.classList.remove("header-animation-reverse");
|
||||||
|
setTimeout(() => {
|
||||||
|
header.classList.remove("fullscreen");
|
||||||
|
},500);
|
||||||
|
setTimeout(() => {
|
||||||
|
header.classList.remove("header-animation");
|
||||||
|
},1000);
|
||||||
|
}
|
||||||
|
//somewhere here we animate in the actual page too, but it.. doesnt exist yet
|
||||||
|
}
|
||||||
|
|
||||||
|
// on space animateHeader()
|
||||||
|
document.addEventListener("keydown", (e) => {
|
||||||
|
//on / key press
|
||||||
|
if (e.keyCode === 191) {
|
||||||
|
e.preventDefault();
|
||||||
|
header.querySelector("input").focus();
|
||||||
|
}
|
||||||
|
if (e.keyCode === 27) {
|
||||||
|
//if search box not focused, and if we're not on the home page, go back to home page
|
||||||
|
if (!header.querySelector("input").matches(":focus") && !header.classList.contains("fullscreen")) {
|
||||||
|
e.preventDefault();
|
||||||
|
animateHeader(true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (e.keyCode === 13) {
|
||||||
|
if (header.querySelector("input").matches(":focus")) {
|
||||||
|
//search
|
||||||
|
e.preventDefault();
|
||||||
|
animateHeader(); //just in case
|
||||||
|
doSearch();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function stripWord(word) {
|
||||||
|
return word.replace(/[^a-zA-Z]/g, "");
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadDictionary() {
|
||||||
|
fetch("/wordlist.json").then((e) => {
|
||||||
|
if (e.status === 200) {
|
||||||
|
//convert to json lmao
|
||||||
|
e.json().then((e) => {
|
||||||
|
json = e;
|
||||||
|
|
||||||
|
let values = Object.values(json);
|
||||||
|
let keys = Object.keys(json);
|
||||||
|
//prepare search. maybe async this if we're loading a specific word?
|
||||||
|
for (let i = 0; i < keys.length; i++) {
|
||||||
|
//create array
|
||||||
|
searchDictionary[keys[i]] = [];
|
||||||
|
|
||||||
|
//add: base word (obvious, will always exist)
|
||||||
|
searchDictionary[keys[i]].push(stripWord(keys[i]));
|
||||||
|
//add: base word, but in heonian (todo, needs translator)
|
||||||
|
|
||||||
|
//add: translation (will always exist, i hope)
|
||||||
|
searchDictionary[keys[i]].push(stripWord(values[i].translation));
|
||||||
|
}
|
||||||
|
|
||||||
|
//ok, we're all ready!
|
||||||
|
document.querySelector("header input").placeholder = "search";
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
alert("yeah something went horribly wrong loading the wordlist so uh,,, certified ike moment");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function search(word) {
|
||||||
|
word = stripWord(word);
|
||||||
|
let result = [];
|
||||||
|
for (let key in searchDictionary) {
|
||||||
|
for (let value in searchDictionary[key]) {
|
||||||
|
if (searchDictionary[key][value].includes(word)) {
|
||||||
|
result.push(key);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
function doSearch() {
|
||||||
|
let results = search(header.querySelector("input").value);
|
||||||
|
if (results.length == 0) {
|
||||||
|
main.innerHTML = "no results lulw";
|
||||||
|
} else {
|
||||||
|
//actually render results or w/e
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.onload = () => {
|
||||||
|
header = document.querySelector("header");
|
||||||
|
main = document.querySelector("main");
|
||||||
|
loadDictionary();
|
||||||
|
}
|
||||||
15
wordlist.json
Normal file
15
wordlist.json
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
{
|
||||||
|
"a.bae": {
|
||||||
|
"translation": "young",
|
||||||
|
"type": "modifier"
|
||||||
|
},
|
||||||
|
"a.e mo?": {
|
||||||
|
"translation": "isn't it right?",
|
||||||
|
"type": "expression"
|
||||||
|
},
|
||||||
|
"a.ga.ka": {
|
||||||
|
"translation": "at, towards, for",
|
||||||
|
"type": "marker",
|
||||||
|
"notes": "also used like"
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user