almost gave up

nhentai/viewer/main.css

@@ -286,17 +286,26 @@ blockquote {
   font-weight: bold;
   background-color: #eee;
   color: #444;
-  padding: 10px 0px 5px 8px;
+  padding: 8px 8px 5px 9px;
   width: 100%;
   border: none;
   text-align: left;
   outline: none;
   font-size: 15px;
-  transition: 0.4s;
 }
 
 .nav-btn.hidden {
-  display:none
+  display:none;
+}
+
+.nav-btn a{
+  font-weight: normal;
+  padding-right: 10px;
+  border-radius: 15px;
+  cursor: crosshair
+}
+
+.nav-btn a.language{
 }
 
 .options {
@@ -363,24 +372,24 @@ blockquote {
     text-align:left;
     display: block;
 	width:15rem;
-	display: flex;
-    flex-flow: row wrap;
+
     justify-content: start;
 	margin: 2px 2px 2px 0px
 }
 
 .btn-2{
   font-weight:700;
-  padding-right:10px;
-  padding-left:10px;
+  padding-right:0.5rem;
+  padding-left:0.5rem;
   color:#fff;
   border:0;
   font-size:100%;
-  height:20px;
+  height:1.25rem;
   outline: 0;
-  border-radius: 3px;
+  border-radius: 0.3rem;
   cursor: pointer;
-  margin:2px;
+  margin:0.15rem;
+  transition: all 1s linear;
 }
 
 .btn-2.parody{
@@ -406,6 +415,15 @@ blockquote {
 .btn-2.hover{
   filter: saturate(20%)
 }
+
+.btn-2.hidden{
+  display: none;
+}
+
+.btn-2.vhidden {
+  opacity: 0;
+}
+
 input,input:focus{
   border:none;
   outline:0;
@@ -441,4 +459,14 @@ html.theme-black code {
     color: #ed2553;
     border: none;
     background-color: #292929
+}
+.btn span.icon {
+    background: url(imgs/icon.png) no-repeat;
+    float: right;
+    width: 10px;
+    height: 40px;
+}
+.cross{
+	float:left
+	height: 5px;
 }

nhentai/viewer/main.html

@@ -18,18 +18,18 @@
         <nav class="sidenav">
 			<img src="logo.png">
 			<h1>nHentai Viewer</h1>
-									<button class="accordion">Language</button>
+            <button class="accordion">Language</button>
             <div class="options" id="language">
                     <a>English</a>
-                    <a>日本語</a>
-                    <a>中国語</a>
+                    <a>Japanese</a>
+                    <a>Chinese</a>
             </div>
 			<button class="accordion">Category</button>
             <div class="options" id ="category">
                     <a>Doujinshi	</a>
                     <a>Manga</a>
             </div>
-			<button class="nav-btn hidden">Filters</button>
+			<button id="nav-btn" class="hidden">Filters</button>
 			<div class="search">
 				<input type="search" name="q" value="" autocapitalize="none" required="">
 				<button type="submit" class="btn btn-primary btn-square">

nhentai/viewer/main.js

@@ -15,13 +15,17 @@ for (var i = 0; i < menu.length; i++) {
 var language = document.getElementById("language").children;
 for (var i = 0; i < language.length; i++){
 	language[i].addEventListener("click", function() {
-		document.getElementById("language").style.maxHeight = null;
+		toggler = document.getElementById("language")
+		toggler.style.maxHeight = null;
 		document.getElementsByClassName("accordion")[0].classList.toggle("active");
-
-		var toggler = document.getElementsByClassName("nav-btn")[0].classList;
-				if (toggler.contains("hidden")){
-		  toggler.toggle("hidden");
+		var nav_btn = document.getElementsByClassName("nav-btn")[0];
+		if (nav_btn.classList.contains("hidden")){
+		  nav_btn.classList.toggle("hidden");
 		}
+		var node = filter_maker(this.innerText, "language");
+		var check = filter_checker(this.innerText)
+		if (check == true){
+			nav_btn.appendChild(node);}
 });
 }
 var category = document.getElementById("category").children;
@@ -30,31 +34,72 @@ for (var i = 0; i < category.length; i++){
 		document.getElementById("category").style.maxHeight = null;
 		document.getElementsByClassName("accordion")[1].classList.toggle("active");
 
-		var toggler = document.getElementsByClassName("nav-btn")[0].classList;
-				if (toggler.contains("hidden")){
-		  toggler.toggle("hidden");
+		var nav_btn = document.getElementsByClassName("nav-btn")[0];
+		if (nav_btn.classList.contains("hidden")){
+		  nav_btn.classList.toggle("hidden");
 		}
+
+		var node = filter_maker(this.innerText, "category");
+		var check = filter_checker(this.innerText)
+		if (check == true){
+			nav_btn.appendChild(node);}
 });
 }
+tag_maker(tags)
 //-----------------------------------------------------------------------------------
-var tags = document.getElementById("tags");
-for (i in data){
-	tag_maker(data[i])
+//------------------------------------Functions--------------------------------------
+
+function filter_maker(text, class_value){
+    var node = document.createElement("a");
+    var textnode = document.createTextNode(text);
+    node.appendChild(textnode);
+    node.classList.add(class_value);
+    return node;
 }
+
+function filter_checker(text){
+    var filter_tags = document.getElementsByClassName("nav-btn")[0].children;
+	if (filter_tags == null){return true;}
+	for (i in filter_tags){
+		if (filter_tags[i].innerText == text){return false;}
+	}
+	return true;
+}
+
 function tag_maker(data){
-	var options = ["parody", "character", "tag", "artist", "group"];
-		for (i in options){
-			var i = options[i]
-			if (data[i] != null){
-				for (j in data[i]){
-					var node = document.createElement("button");                   // Create a <li> node
-					var textnode = document.createTextNode(data[i][j]);  					// Create a text node
-					node.appendChild(textnode);                             // Append the text to <li>
-					node.classList.add("btn-2");
-					node.classList.add("parody");
-					document.getElementById(i).appendChild(node);
-					console.log("teste");
-				}
-			}
+	for (i in data){
+		for (j in data[i]){
+			var node = document.createElement("button");
+			var textnode = document.createTextNode(data[i][j]);
+			node.appendChild(textnode);
+			node.classList.add("btn-2");
+			node.classList.add(i);
+			node.classList.add("hidden");
+			document.getElementById("tags").appendChild(node);
 		}
-}
+	}
+}
+
+var input = document.getElementById("tagfilter");
+
+input.addEventListener("input", function() {
+	var tags = document.querySelectorAll(".btn-2");
+	if (this.value.length > 0) {
+        for (var i = 0; i < tags.length; i++) {
+            var tag = tags[i];
+            var nome = tag.innerText;
+            var exp = new RegExp(this.value, "i");;
+            if (exp.test(nome)) {
+                tag.classList.remove("hidden");
+		    }
+			else {
+				tag.classList.add("hidden");
+            }
+        }
+    } else {
+        for (var i = 0; i < tags.length; i++) {
+            var tag = tags[i];
+				tag.classList.add('hidden');
+        }
+    }
+});