changes (a lot)

base.html

@@ -190,7 +190,7 @@
                     <span class="convo-date">2022/05/04</span>
                 </div>
                 <p>
-                    ee ee n_n
+                    ee ee n_n ariri
                 </p>
             </div>
         </div>

input_test.txt

@@ -0,0 +1,23 @@
+ITS ME PEKORA
+d   deez
+r   hiiiii!!!!
+!	uwu
+
+HOLY SHIT REMI
+d	a
+	amogus
+
+
+it's meee pekora!!!!
+i   eshnyui.png
+d	yolo
+	so cool
+	so cool
+	so cool
+
+	how this work owo
+
+ 
+	so cool
+	so uwu
+	very good

main.js

@@ -7,13 +7,15 @@ let words = {}
 
 let currentFont = "r";
 
+let timeout = "";
+
 function init() {
     // createWordList();
     // injectWords();
     // document.querySelector("#popup-container").addEventListener("click", () => {
         // document.querySelector("#popup-container").style.opacity = 0;
         // document.querySelector("#popup-container").style.pointerEvents = "none";
-    // })
+    // });
     // above are commented out until wordlist is added~
     document.querySelector("#font-button").addEventListener("click", () => {fontButton();});
 }
@@ -29,6 +31,31 @@ function showPopup(word) {
     c.style.pointerEvents = "all";
 }
 
+function showSmolPopup(word) {
+    let p = document.querySelector("#smol-popup");
+    p.querySelector("h1").innerText = word;
+    p.querySelector("#smol-heo").innerText = words[word]["heonian"];
+    p.querySelector("#smol-type").innerText = words[word]["type"];
+    p.querySelector("#smol-meaning").innerText = words[word]["meaning"];
+    p.style.opacity = 1;
+    p.style.pointerEvents = "all";
+}
+
+function checkHover(word) {
+    if (timeout != "") {
+        clearTimeout(timeout);
+    }
+    timeout = setTimeout(() => {
+        showSmolPopup(word);
+    }, 450);
+}
+
+function clearHover() {
+    if (timeout != "") {
+        clearTimeout(timeout);
+    }
+}
+
 function createWordList() { //sometimes i really dislike javascript..
     let t = document.querySelector("tbody");
     t.querySelectorAll("tr").forEach(element => {
@@ -66,6 +93,14 @@ function injectWords() {
                     element.addEventListener('click', function(e) {
                         showPopup(element.innerText);
                     }, false);
+                    element.addEventListener('mouseover', function(e) {
+                        checkHover(element.innerText);
+                    }
+                    , false);
+                    element.addEventListener('mouseout', function(e) {
+                        clearHover();
+                    }
+                    , false);
                 });
             }
         });

test.html

@@ -58,12 +58,6 @@ nyan'pash! balfur yu e she polika'nya dre?
                 <p class="convo-heonian">
 !      ?
                 </p>
-                <p class="convo-roman">
-	
-                </p>
-                <p class="convo-heonian">
-	
-                </p>
             </div>
         </div>
         <div class="convo-container right">

text_analysis.css

@@ -9,8 +9,8 @@
     --notes-color: rgb(255, 235, 181);
     --spacer-color: rgba(0, 0, 0, 0.4);
     --spacer-color-2: rgba(0, 0, 0, 0.2);
-    --left-color: #a7b3a7;
+    --left-color: rgb(230, 229, 235);
-    --right-color: #61ce61;
+    --right-color: rgb(75, 187, 251);
     --font-normal: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     --font-heonian: "heonian", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }
@@ -43,7 +43,7 @@ main {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin: 8px;
+    margin: 16px;
 }
 
 .right {
@@ -52,13 +52,19 @@ main {
 
 .convo {
     width: 400px;
-    border: 1px solid var(--left-color);
+    border-radius: 16px;
-    border-radius: 8px;
     padding: 8px;
+    padding-top: 0px;
+    padding-bottom: 10px;
+    /* padding bottom isnt actually required, but due to how
+    browsers render fonts, it makes things look better... */
+    background-color: var(--left-color);
+    box-shadow: 0px 0px 6px var(--spacer-color);
 }
 
 .right .convo {
-    border: 1px solid var(--right-color);
+    background-color: var(--right-color);
+    color: white;
 }
 
 .convo p {
@@ -66,9 +72,9 @@ main {
     margin-top: 8px;
 }
 
-.convo *:first-child {
+.convo p:first-child {
-    margin-top: 0;
+    margin-top: 8px;
-    /* edge case for when a p is alone in a .convo */
+    /* wow! */
 }
 
 .convo-header {
@@ -82,6 +88,8 @@ main {
     border-radius: 42069px;
     width: 48px;
     margin-right: 8px;
+    margin-left: -8px;
+    border-radius: 16px 0px 16px 0px;
 }
 
 .convo-date {