Merge branch 'master' of github.com:yamanq/smearcar-db

SmearcarDB/static/index.css

@@ -170,6 +170,10 @@ a {
 	opacity: 1;
 }
 
+#home > div {
+	margin-bottom: 2vh;
+}
+
 .card {
 	display: grid;
 	border-radius: 2px;
@@ -359,7 +363,39 @@ a {
 	background-color: rgba(0, 0, 0, 0.05);
 }
 
-#newLanguage, #editLanguage, #login, #addUser {
+#header2 {
+	display:grid;
+	grid-template-columns: 80% 10% 10%;
+	grid-template-rows: 100%;
+}
+
+#signIn, #addUserButton, #addUpdateButton {
+	display: grid;
+	grid-template-columns: 70% 20%;
+	grid-template-rows: 100%;
+	grid-column: 3;
+	grid-row: 1;
+	cursor: pointer;
+}
+ 
+#addUpdateButton {
+	grid-column: 2;
+}
+
+#signIn:hover, #addUserButton:hover, #addUpdateButton:hover, #writePostButton:hover {
+	background-color: rgba(255,255,255,0.1);
+}
+
+#signIn p, #signIn i, #addUserButton p, #addUserButton i, #addUpdateButton p, #addUpdateButton i {
+	margin: auto;
+	font-size: 180%;
+}
+
+#addData, #editData, #addUserButton, #addUpdateButton {
+	display: none;
+}
+
+.modal {
 	position: absolute;
 	width: 100%;
 	height: 100%;
@@ -368,124 +404,25 @@ a {
 	background-color: rgba(0,0,0,0.4);
 }
 
-#newLanguage > div, #editLanguage > div, #login > div, #addUser > div {
+.modalSubmit {
-	position: absolute;
-	width: 20%;
-	height: 60%;
-	margin: 5% 40% 0 40%;
-	background-color: #F8F3F0;
-	grid-template-columns: 1fr;
-	grid-template-rows: 6vh 5% 70% auto;
-}
-
-#login > div {
-	height: 30%;
-	grid-template-rows: 6vh 1fr 1fr 1fr;
-}
-
-#addUser > div {
-	height: 40%;
-	grid-template-rows: 6vh 1fr 1fr 1fr 1fr;
-}
-
-#loginUsername, #loginPassword, #addUserUsername, #addUserPassword {
-	margin-left: 5%;
-}
-
-#login input, #addUser input {
-	border: 0;
-	background-color: rgba(0,0,0,0.1);
-	font-family: 'Saira Condensed',  sans-serif;
-	font-size: 120%;
-	font-weight: 300;
-	padding: 2%;
-	width: 90%;
-}
-
-#newLanguageName, #editLanguageName, #loginUsername, #addUserUsername {
-	grid-row: 2;
-}
-
-#newLanguageName p, #editLanguageName p {
-	display: inline;
-	margin-left: 5%;
-	grid-row: 1;
-}
-
-#newLanguageName input, #editLanguageName input {
-	margin: auto 0 auto 0;
-	width: 50%;
-	grid-row: 1;
-}
-
-#newLanguagePhonemes, #editLanguagePhonemes, #loginPassword, #addUserAuthority {
-	grid-row: 3;
-}
-
-#addUserAuthority {
-	margin-left: 5%;
-	width: 90%;
-}
-
-#addUserPassword {
-	grid-row: 4;
-}
-
-#newLanguagePhonemes p, #editLanguagePhonemes p {
-	margin-left: 5%;
-}
-
-#newLanguagePhonemes textarea, #editLanguagePhonemes textarea {
-	width: 90%;
-	margin-left: 5%;
-	height: 90%;
-	resize: none;
-	font-family: 'Saira Condensed', sans-serif;
-	font-size: 1.5vh;
-}
-
-#newLanguageSubmit, #editLanguageSubmit, #loginSubmit, #addUserSubmit {
-	display: grid;
-	grid-row: 4;
-}
-
-#addUserSubmit {
-	grid-row: 5;
-}
-
-#newLanguageSubmit p, #editLanguageSubmit p, #loginSubmit p, #addUserSubmit p {
 	display: block;
+	width: 70%;
 	font-size: 3vh;
-	margin: auto 10% auto;
+	margin: auto;
 	padding: 1%;
 	text-align: center;
 	cursor: pointer;
 }
 
-#header2 {
+.modal input, .modal textarea {
-	display:grid;
+	margin: 0 auto 0 auto;
-	grid-template-columns: 90% 10%;
+	border: 0;
-	grid-template-rows: 100%;
+	background-color: rgba(0,0,0,0.1);
-}
+	font-family: 'Saira Condensed',  sans-serif;
-
+	font-size: 100%;
-#signIn, #addUserButton {
+	font-weight: 300;
-	display: grid;
+	padding: 1vh;
-	grid-template-columns: 70% 20%;
+	width: 90%;
-	grid-template-rows: 100%;
+	outline: none;
-	grid-column: 2;
+	resize: none;
-	grid-row: 1;
-	cursor: pointer;
-}
-
-#signIn:hover, #addUserButton:hover {
-	background-color: rgba(255,255,255,0.1);
-}
-
-#signIn p, #signIn i, #addUserButton p, #addUserButton i {
-	margin: auto;
-	font-size: 180%;
-}
-
-#addData, #editData, #addUserButton {
-	display: none;
 }

SmearcarDB/static/index.js

@@ -5,11 +5,10 @@ var data;
 var languageChart;
 var dataOpen = false;
 var submittable = true;
+var dropOp = {};
+var dropOpStore = {};
 var loginInfo = {};
 
-// var trelloInfo = {};
-
-
 var navi = [ // Array containing navigation items in form [Font-Awesome class name, Display Text, Onclick function].
     ["home", "Home", "home"],
     ["bar-chart", "Data Values", "dataValues1"],
@@ -17,10 +16,6 @@ var navi = [ // Array containing navigation items in form [Font-Awesome class na
     ["info", "About", "about"]
 ];
 
-var members = [
-    "Kenneth Jao", "Yaman Qalieh", "Enrico Colon"
-];
-
 var authorityLabels = {
     0: "#0: Full access", 
     1: "#1: Create updates", 
@@ -28,11 +23,137 @@ var authorityLabels = {
     3: "#3: No access"
 };
 
-var dropOp = {
-    //Insert correct
-};
 
-var dropOpStore = {};
+var modals = [
+    {
+        name: "Add Language",
+        modal: "newLanguage",
+        button: "addData",
+        structure: {
+            width: "20%",
+            form: [
+                {
+                    name: "Name",
+                    formType: "input"
+                },
+                {
+                    name: "Source",
+                    formType: "input",
+                    inputType: "file"
+                },
+                {
+                    name: "Phonemes",
+                    formType: "textarea",
+                    height: "25vh"
+                }
+            ]
+        }
+    },
+    {
+        name: "Edit Language",
+        modal: "editLanguage",
+        button: "editData",
+        buttonClick: function() {
+            var langInfo = language(dropOpStore["langSelect"]);
+            document.querySelectorAll("#editLanguageName input")[0].value = langInfo.name;
+            var k = Object.keys(langInfo.phonemes);
+            var v = Object.values(langInfo.phonemes);
+            var str = "";
+            for(var i = 0; i < k.length; i++) {
+                str += k[i] + " " + v[i] + ((i === k.length-1) ? "" : "\n");
+            }
+            document.querySelectorAll("#editLanguagePhonemes textarea")[0].value = str;
+            //modal("editLanguage", true);
+        },
+        structure: {
+            width: "20%",
+            form: [
+                {
+                    name: "Name",
+                    formType: "input"
+                },
+                {
+                    name: "Source",
+                    formType: "input",
+                    inputType: "file"
+                },
+                {
+                    name: "Phonemes",
+                    formType: "textarea",
+                    height: "25vh"
+                }
+            ]
+        }
+    },
+    {
+        name: "Login",
+        modal: "login",
+        button: "signIn",
+        structure: {
+            width: "20%",
+            form: [
+                {
+                    name: "Username",
+                    formType: "input"
+                },
+                {
+                    name: "Password",
+                    formType: "input",
+                    inputType: "password"
+                },
+            ]
+        }
+    },
+    {
+        name: "Add User",
+        modal: "addUser",
+        button: "addUserButton",
+        structure: {
+            width: "20%",
+            form: [
+                {
+                    name: "Username",
+                    formType: "input"
+                },
+                {
+                    name: "Authority",
+                    formType: "input",
+                    inputType: "number"
+                },
+                {
+                    name: "Password",
+                    formType: "input",
+                    inputType: "password"
+                }
+            ]
+        }
+    },
+    {
+        name: "Write Update",
+        modal: "writePost",
+        button: "addUpdateButton",
+        structure: {
+            width: "40%",
+            form: [
+                {
+                    name: "Title",
+                    formType: "input",
+                },
+                {
+                    name: "Author",
+                    formType: "input",
+                },
+                {
+                    name: "Message",
+                    formType: "textarea",
+                    height: "18vh"
+                }
+            ]
+        }
+    },
+];
+
+
 
 function Rnd(item,fig) {
   if(varType(item) === "Array") {
@@ -117,6 +238,7 @@ function getData(updatePage) {
                     dropOpUpdate("langSelect");
                     document.querySelectorAll(".dropdown[option='langSelect'] .opCont p[dropoption='"+(dropOpStore["langSelect"])+"']")[0].click();
                 }
+                generateModals();
             },
             function error(e) {
                 console.log(e);
@@ -258,9 +380,6 @@ function createDrop() {
             var p3 = document.createElement("p");
             p3.className = "transition";
             p3.id = "addData";
-            p3.onclick = function() { // Open add language.
-                modal("newLanguage", true);
-            };
             p3.appendChild(document.createTextNode("Add language..."));
             div2.appendChild(p3); 
         }
@@ -324,35 +443,36 @@ document.onclick = function(event) {
 
 
 function homeCards() {
-    // TODO GET posts from server
+    var home = document.getElementById("home");
-
+    while (home.firstChild) {
+        home.removeChild(home.firstChild);
+    }
     $.ajax({
         url: serverURL + '/updates',
         type: 'GET'
     })
-        .then(
+    .then(
-            function success(incoming) {
+        function success(incoming) {
-                var postList = incoming;
+            var postList = incoming;
-                var home = document.getElementById("home");
+            for(var i = postList.length - 1; i >= 0 ; i--) {
-                for(var i = 0; i < postList.length; i++) {
+                var div = document.createElement("div");
-                    var div = document.createElement("div");
+                div.className = "card";
-                    div.className = "card";
+                var h2 = document.createElement("h2");
-                    var h2 = document.createElement("h2");
+                h2.textContent = postList[i].title;
-                    h2.textContent = postList[i].title;
+                div.appendChild(h2);
-                    div.appendChild(h2);
+                var h3 = document.createElement("h3");
-                    var h3 = document.createElement("h3");
+                h3.textContent = postList[i].author + " - " + postList[i].date;
-                    h3.textContent = postList[i].date;
+                div.appendChild(h3);
-                    div.appendChild(h3);
+                var p = document.createElement("p");
-                    var p = document.createElement("p");
+                p.innerHTML = postList[i].content;
-                    p.innerHTML = postList[i].content;
+                div.appendChild(p);
-                    div.appendChild(p);
+                home.appendChild(div);
-                    home.appendChild(div);
-                }
-            },
-            function error(e) {
-                console.log(e);
             }
-        );
+        },
+        function error(e) {
+            console.log(e);
+        }
+    );
 
 }
 
@@ -425,19 +545,7 @@ function modal(id, open) {
     }   
 }
 
-var modals = ["newLanguage", "editLanguage", "login", "addUser"];
+/*document.querySelectorAll("#addUser > div")[0].onclick = function(event) {
-for(var i = 0; i < modals.length; i++) {
-    let id = modals[i];
-    document.getElementById(modals[i]).onclick = function(event) { 
-        modal(id, false);
-        for(var j = 0; j < document.getElementsByTagName("input"); j++) document.getElementsByTagName("input")[j].value = "";
-        dropOpStore["authority"] = "";
-        document.querySelectorAll(".dropdown[option=authority] .button p")[0].textContent = dropOp["authority"][1];
-    };
-    document.querySelectorAll("#"+modals[i]+" > div")[0].onclick = function(event) { event.stopPropagation(); };
-}
-
-document.querySelectorAll("#addUser > div")[0].onclick = function(event) {
     event.stopPropagation();
     for (var i = 0; i < document.getElementsByClassName("dropdown").length; i++) {
         var opCont = document.querySelectorAll(".dropdown .opCont")[i];
@@ -446,25 +554,84 @@ document.querySelectorAll("#addUser > div")[0].onclick = function(event) {
             opCont.style.display = "none";
         }, 300);
     }
+}*/
+
+
+function generateModals() {
+    while(document.getElementsByClassName("modal").length > 0) {
+        document.getElementsByTagName("body")[0].removeChild(document.getElementsByClassName("modal")[0]);
+    }
+    for(var i = 0; i < modals.length; i++) {
+        let eachModal = modals[i];
+        var overlay = document.createElement("div");
+        overlay.id = modals[i].modal;
+        overlay.className = "transition modal";
+
+        var modalCont = document.createElement("div");
+        modalCont.className = "card transition";
+        modalCont.style.position = "absolute";
+        modalCont.style.paddingBottom = "1vh";
+        modalCont.style.width = modals[i].structure.width;
+        var marg = 50-parseInt(modals[i].structure.width.replace("%",""))/2;
+        modalCont.style.margin = "5% " + marg + "% 0 " + marg+"%";
+        var h2 = document.createElement("h2");
+        h2.appendChild(document.createTextNode(modals[i].name));
+        h2.style.gridRow = "1";
+        modalCont.appendChild(h2);
+
+        var gridTemplate = "6vh ";
+        var form = modals[i].structure.form;
+        for(var j = 0; j < form.length; j++) {
+            gridTemplate += (form[j].formType === "input") ? "7vh " : "auto ";
+            var div = document.createElement("div");
+            div.id = modals[i].modal + form[j].name;
+            div.style.marginLeft = "5%";
+            div.style.gridRow = j+2;
+            var p = document.createElement("p");
+            p.appendChild(document.createTextNode(form[j].name + ":"));
+            var input = document.createElement(form[j].formType);
+            if(form[j].inputType) input.type = form[j].inputType;
+            if(form[j].height) input.style.height = form[j].height; 
+            
+            
+            div.appendChild(p);
+            div.appendChild(input);
+            modalCont.appendChild(div);
+        }
+        gridTemplate += "7vh";
+        modalCont.style.gridTemplateRows = gridTemplate;
+        modalCont.style.gridTemplateColumns = "100%";
+
+        var submit = document.createElement("div");
+        submit.id = modals[i].modal + "Submit";
+        submit.style.gridRow = form.length+2;
+        submit.style.display = "grid";
+        submit.onclick = function() {
+            (eachModal.submitClick)();
+        }
+        var p2 = document.createElement("p");
+        p2.className = "card modalSubmit"; // Refer to modalSubmit CSS to edit.
+        p2.appendChild(document.createTextNode("Submit!"));
+        submit.appendChild(p2);
+        modalCont.appendChild(submit);
+
+        overlay.appendChild(modalCont);
+        document.getElementsByTagName("body")[0].appendChild(overlay);
+        console.log(modals[i].button);
+        document.getElementById(modals[i].button).onclick = function() {
+            if(eachModal.buttonClick) (eachModal.buttonClick)();
+            modal(eachModal.modal, true);
+        }
+
+        overlay.onclick = function(event) {
+            if(this !== event.target) return;
+            for(var i = 0; i < document.getElementsByTagName("input").length; i++) document.getElementsByTagName("input")[i].value = "";
+            modal(eachModal.modal, false);
+        }
+    }
 }
 
-document.getElementById("editData").onclick = function() { // Open edit language.
+modals[0].submitClick = function() { // submitClick for newLanguage.
-    var langInfo = language(dropOpStore["langSelect"]);
-    document.querySelectorAll("#editLanguageName input")[0].value = langInfo.name;
-    var k = Object.keys(langInfo.phonemes);
-    var v = Object.values(langInfo.phonemes);
-    var str = "";
-    for(var i = 0; i < k.length; i++) {
-        str += k[i] + " " + v[i] + ((i === k.length-1) ? "" : "\n");
-    }
-    document.querySelectorAll("#editLanguagePhonemes textarea")[0].value = str;
-    modal("editLanguage", true);
-};
-
-document.getElementById("signIn").onclick = function() { modal("login", true); };
-document.getElementById("addUserButton").onclick = function() { modal("addUser", true); };
-
-document.querySelectorAll("#newLanguageSubmit p")[0].onclick = function() { // Function for adding a language.
     if(!submittable) return;
     submittable = false;
     var name = document.querySelectorAll("#newLanguageName input")[0].value;
@@ -491,16 +658,30 @@ document.querySelectorAll("#newLanguageSubmit p")[0].onclick = function() { // F
         }
         phonemes[info[i][0]] = num;
     }
+
+    var formData = new FormData();
+    var source = document.querySelectorAll("#newLanguageSource input")[0].files;
+    if(source.length === 0 || source[0].type) {
+        alert("Please give a source!");
+        submittable = true;
+        return;
+    }
+    formData.append("source", source[0]);
+    formData.append("name", name);
+    formData.append("phonemes", phonemes);
+    formData.append("editor", loginInfo);
+
     var newLanguage = {
         name: name,
-        source: null,
+        source: sourceData,
         phonemes: phonemes,
         editor: loginInfo
     };
 
-    this.innerText = "Processing...";
+    var p = document.querySelectorAll("#newLanguageSubmit p ")[0]
-    this.style.backgroundColor = "rgba(0,0,0,0.2)";
+    p.innerText = "Processing...";
-    var p = this;
+    p.style.backgroundColor = "rgba(0,0,0,0.2)";
+
     $.ajax({
         url: serverURL + '/server',
         type: 'POST',
@@ -528,7 +709,7 @@ document.querySelectorAll("#newLanguageSubmit p")[0].onclick = function() { // F
     );
 };
 
-document.querySelectorAll("#editLanguageSubmit p")[0].onclick = function() { // Function for submitting edits to language.
+modals[1].submitClick= function() { // submitClick for editLanguage.
     if(!submittable) return;
     var langInfo = language(dropOpStore["langSelect"]);
     submittable = false;
@@ -559,9 +740,9 @@ document.querySelectorAll("#editLanguageSubmit p")[0].onclick = function() { //
     }
     console.log(newPhonemes);
 
-    this.innerText = "Processing...";
+    var p = document.querySelectorAll("#editLanguageSubmit p")[0]
-    this.style.backgroundColor = "rgba(0,0,0,0.2)";
+    p.innerText = "Processing...";
-    var p = this;
+    p.style.backgroundColor = "rgba(0,0,0,0.2)";
 
     var oldPhoneset = new Set(Object.keys(langInfo.phonemes));
     var newPhoneset = new Set(Object.keys(newPhonemes));
@@ -726,7 +907,7 @@ document.querySelectorAll("#editLanguageSubmit p")[0].onclick = function() { //
     }
 };
 
-document.querySelectorAll("#loginSubmit p")[0].onclick = function() {
+modals[2].submitClick = function() { // submitClick for login.
     var info = [
         document.querySelectorAll("#loginUsername input")[0], 
         document.querySelectorAll("#loginPassword input")[0]
@@ -744,20 +925,21 @@ document.querySelectorAll("#loginSubmit p")[0].onclick = function() {
     document.getElementById("addData").style.display = "block";
     document.getElementById("editData").style.display = "grid";
     document.getElementById("addUserButton").style.display = "grid";
+    document.getElementById("addUpdateButton").style.display = "grid";
     document.getElementById("signIn").style.display = "none";
     setTimeout(function() {
         info[0].value = "";
         info[1].value = "";
-    }, 300)
+    }, 300);
 };
 
-document.querySelectorAll("#addUserSubmit p")[0].onclick = function() {
+modals[3].submitClick = function() {
     if(!submittable) return;
     submittable = false;
     var info = [
         document.querySelectorAll("#addUserUsername input")[0], 
         document.querySelectorAll("#addUserPassword input")[0],
-        parseInt(dropOpStore["authority"])
+        document.querySelectorAll("#addUserAuthority input")[0]
     ];
     if(info[0].value === "") {
         alert("Please enter in a username!");
@@ -773,19 +955,18 @@ document.querySelectorAll("#addUserSubmit p")[0].onclick = function() {
         return;
     }
 
-    this.innerText = "Processing...";
+    var p = document.querySelectorAll("#addUserSubmit p")[0]
-    this.style.backgroundColor = "rgba(0,0,0,0.2)";
+    p.innerText = "Processing...";
-    var p = this;
+    p.style.backgroundColor = "rgba(0,0,0,0.2)";
 
-     $.ajax({
+    $.ajax({
         url: serverURL + '/editors',
         type: 'POST',
         dataType: "json",
         contentType: 'application/json;charset=UTF-8',
-        context: {counter: i},
         data: JSON.stringify({
             username: info[0].value,
-            authority: info[2],
+            authority: parseInt(info[2]),
             password: info[1].value,
             editor: loginInfo
         })
@@ -810,37 +991,67 @@ document.querySelectorAll("#addUserSubmit p")[0].onclick = function() {
             }
         }
     );
-}
+};
 
-/*function getTrelloCards() {
+modals[4].submitClick = function() {
-    Trello.authorize();
+    if(!submittable) return;
-    var cardArr, listArr, lists;
+    submittable = false;
-    var cards = window.Trello.rest(
+    var info = [
-        "GET", "boards/vm2c2IZd/cards",
+        document.querySelectorAll("#writePostTitle input")[0], 
-        function success() {
+        document.querySelectorAll("#writePostAuthor input")[0],
-            cardArr = JSON.parse(cards.responseText);
+        document.querySelectorAll("#writePostMessage textarea")[0]
-            lists = window.Trello.rest(
+    ];
-            "GET", "boards/vm2c2IZd/lists",
+    if(info[0].value === "") {
-            function success() {
+        alert("Please enter in a title!");
-                listArr = JSON.parse(lists.responseText);
+        submittable = true;
-                for(var i = 0; i < listArr.length; i++) {
+        return;
-                    var arr = cardArr.filter(function(obj) {
+    } else if(info[1].value === "") {
-                        return obj.idList === listArr[i].id;
+        alert("Please enter in an author!");
-                    }).map(a => a.name);
+        submittable = true;
-                    trelloInfo[listArr[i].name] = arr;
+        return;
-                }
+    } else if(info[2].value === "") {
-            },
+        alert("Please enter in a message!");
-            function error(e) {
+        submittable = true;
-                console.log(e);
+        return;
-            });
+    }
+
+    var p = document.querySelectorAll("#writePostSubmit p")[0]
+    p.innerText = "Processing...";
+    p.style.backgroundColor = "rgba(0,0,0,0.2)";
+
+    $.ajax({
+        url: serverURL + '/updates',
+        type: 'POST',
+        dataType: "json",
+        contentType: 'application/json;charset=UTF-8',
+        data: JSON.stringify({
+            title: info[0].value,
+            author: info[1].value,
+            content: info[2].value,
+            editor: loginInfo
+        })
+    })
+    .then(
+        function success(incoming) {
+            modal("writePost", false);
+            homeCards();
+            setTimeout(function() {
+                info[0].value = "";
+                info[1].value = "";
+                info[2].value = "";
+                submittable = true;
+                p.innerText = "Submit!";
+                p.style.backgroundColor = "#FEFEFE";
+            }, 300);
         },
         function error(e) {
+            alert("There was an error adding a post.");
             console.log(e);
-    });
+        }
-}*/
+    );
+};
 
 getData();
 homeCards();
 createNav();
 updateNav(navSelect);
-

SmearcarDB/templates/index.html

@@ -20,6 +20,10 @@
         <h1>/'smi:ɹ̠ka:ɹ̠/</h1>
     </div>
     <div id="header2">
+        <div id="addUpdateButton" class="transition">
+            <p>Update</p>
+            <i class="fa fa-edit"></i>
+       </div>
        <div id="signIn" class="transition">
             <p>Login</p>
             <i class="fa fa-sign-in"></i>
@@ -64,7 +68,7 @@
                 <canvas class="transition"></canvas>
             </div>
         </div>
-        <div id="dataValues2" class="optionContainer">
+        <!-- <div id="dataValues2" class="optionContainer">
             <div class="row">
                 <div id="langSelect" class="card">
                     <h2>Language</h2>
@@ -89,7 +93,7 @@
             <div id="langGraph" class="card">
                 <canvas class="transition"></canvas>
             </div>
-        </div>
+        </div> -->
         <div id="files" class="optionContainer">
             <div class="temp card">
                 <h2>Currently in progress!</h2>
@@ -101,75 +105,6 @@
             </div>
         </div>
     </div>
-    <div id="newLanguage" class="transition">
-        <div class="card transition">
-            <h2>Add Language</h2>
-            <div id="newLanguageName">
-                <p>Name:</p>
-                <input>
-            </div>
-            <div id="newLanguagePhonemes">
-                <p>Phonemes:</p>
-                <textarea></textarea>
-            </div>
-            <div id="newLanguageSubmit">
-                <p class="card">Submit!</p>
-            </div>
-        </div>
-    </div>
-    <div id="editLanguage" class="transition">
-        <div class="card transition">
-            <h2>Edit Language</h2>
-            <div id="editLanguageName">
-                <p>Name:</p>
-                <input>
-            </div>
-            <div id="editLanguagePhonemes">
-                <p>Phonemes:</p>
-                <textarea></textarea>
-            </div>
-            <div id="editLanguageSubmit">
-                <p class="card">Submit!</p>
-            </div>
-        </div>
-    </div>
-    <div id="login" class="transition">
-        <div class="card transition">
-            <h2>Login</h2>
-            <div id="loginUsername">
-                <p>Username:</p>
-                <input>
-            </div>
-            <div id="loginPassword">
-                <p>Password:</p>
-                <input type="password">
-            </div>
-            <div id="loginSubmit">
-                <p class="card">Submit!</p>
-            </div>
-        </div>
-    </div>
-    <div id="addUser" class="transition">
-        <div class="card transition">
-            <h2>Add New User</h2>
-            <div id="addUserUsername">
-                <p>Username:</p>
-                <input>
-            </div>
-            <div id="addUserAuthority">
-                <p>Authority:</p>
-                <div option="authority" class="dropdown transition">
-                </div>
-            </div>
-            <div id="addUserPassword">
-                <p>Password:</p>
-                <input type="password">
-            </div>
-            <div id="addUserSubmit">
-                <p class="card">Submit!</p>
-            </div>
-        </div>
-    </div>
 </body>
 <script src="{{ url_for('static', filename='index.js') }}"></script>