mirror of
https://github.com/RicterZ/nhentai.git
synced 2025-07-05 17:39:29 +02:00
main page filter(1/2)
This commit is contained in:
Alocks
@ -1,7 +1,6 @@
|
||||
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
|
||||
/* Original from https://static.nhentai.net/css/main_style.9bb9b703e601.css */
|
||||
html {
|
||||
font-family: sans-serif;
|
||||
line-height: 1.15;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%
|
||||
@ -21,10 +20,6 @@ a {
|
||||
-webkit-text-decoration-skip: objects
|
||||
}
|
||||
|
||||
a:active,a:hover {
|
||||
outline-width: 0
|
||||
}
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none;
|
||||
text-decoration: underline;
|
||||
@ -104,11 +99,6 @@ a {
|
||||
color: #34495e
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
color: #ed2553
|
||||
}
|
||||
|
||||
a.count {
|
||||
color: #999
|
||||
}
|
||||
@ -130,15 +120,15 @@ blockquote {
|
||||
.container {
|
||||
display: block;
|
||||
clear: both;
|
||||
margin-left: 200px;
|
||||
margin-right: auto;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 10px;
|
||||
padding: 10px;
|
||||
margin-left: 15rem;
|
||||
margin-right: 0.5rem;
|
||||
margin-bottom: 5px;
|
||||
margin-top: 5px;
|
||||
padding: 4px;
|
||||
border-radius: 9px;
|
||||
background-color: #ecf0f1;
|
||||
width: 100% - 200px;
|
||||
max-width: 1200px
|
||||
width: 100% - 15rem;
|
||||
max-width: 1500px
|
||||
}
|
||||
|
||||
.gallery,.gallery-favorite,.thumb-container {
|
||||
@ -156,7 +146,6 @@ blockquote {
|
||||
.gallery,.gallery-favorite,.thumb-container {
|
||||
width:19%;
|
||||
margin: 3px;
|
||||
margin-bottom: 8px
|
||||
}
|
||||
}
|
||||
|
||||
@ -224,31 +213,202 @@ blockquote {
|
||||
|
||||
.sidenav {
|
||||
height: 100%;
|
||||
width: 200px;
|
||||
position: absolute;
|
||||
width: 15rem;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: #111;
|
||||
overflow-x: hidden;
|
||||
background-color: #0d0d0d;
|
||||
overflow: hidden;
|
||||
|
||||
padding-top: 20px;
|
||||
-webkit-touch-callout: none; /* iOS Safari */
|
||||
-webkit-user-select: none; /* Safari */
|
||||
-khtml-user-select: none; /* Konqueror HTML */
|
||||
-moz-user-select: none; /* Old versions of Firefox */
|
||||
ms-user-select: none; /* Internet Explorer/Edge */
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.sidenav a {
|
||||
padding: 6px 6px 6px 32px;
|
||||
background-color: #eee;
|
||||
padding: 5px 0px 5px 15px;
|
||||
text-decoration: none;
|
||||
font-size: 25px;
|
||||
color: #818181;
|
||||
font-size: 15px;
|
||||
color: #0d0d0d9;
|
||||
display: block;
|
||||
text-align: left;
|
||||
}
|
||||
.sidenav img {
|
||||
width:100%;
|
||||
padding: 0px 5px 0px 5px;
|
||||
|
||||
}
|
||||
|
||||
.sidenav h1 {
|
||||
font-size: 1.5em;
|
||||
margin: 0px 0px 10px;
|
||||
}
|
||||
|
||||
.sidenav a:hover {
|
||||
color: #f1f1f1;
|
||||
color: white;
|
||||
background-color: #EC2754;
|
||||
}
|
||||
|
||||
@media screen and (max-height: 450px) {
|
||||
.sidenav {padding-top: 15px;}
|
||||
.sidenav a {font-size: 18px;}
|
||||
.sidenav a {font-size: 15px;}
|
||||
}
|
||||
|
||||
.accordion {
|
||||
font-weight: bold;
|
||||
background-color: #eee;
|
||||
color: #444;
|
||||
padding: 10px 0px 5px 8px;
|
||||
width: 100%;
|
||||
border: none;
|
||||
text-align: left;
|
||||
outline: none;
|
||||
font-size: 15px;
|
||||
transition: 0.4s;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.accordion:hover {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
.accordion.active{
|
||||
background-color:#ddd;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
font-weight: bold;
|
||||
background-color: #eee;
|
||||
color: #444;
|
||||
padding: 10px 0px 5px 8px;
|
||||
width: 100%;
|
||||
border: none;
|
||||
text-align: left;
|
||||
outline: none;
|
||||
font-size: 15px;
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
.nav-btn.hidden {
|
||||
display:none
|
||||
}
|
||||
|
||||
.options {
|
||||
padding: 0px 0px 0px 0px;
|
||||
background-color: #eee;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.2s ease-out;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.search{background-color: #eee;
|
||||
padding-right:45px;
|
||||
white-space: nowrap;
|
||||
padding-top: 5px
|
||||
}
|
||||
|
||||
.search input{
|
||||
border-top-right-radius:10px;
|
||||
padding-top:0;
|
||||
padding-bottom:0;
|
||||
font-size:1em;
|
||||
width:100%;
|
||||
height:38px;
|
||||
vertical-align:top;
|
||||
}
|
||||
|
||||
.search .btn.btn-square{
|
||||
border-top-left-radius:10px;
|
||||
border-bottom-left-radius:0px;
|
||||
}
|
||||
|
||||
.fa{
|
||||
font:normal normal normal 14px/1 FontAwesome;
|
||||
font-size:1.33333333em;
|
||||
line-height:.75em;
|
||||
}
|
||||
|
||||
.fa-search:before{
|
||||
content:"\f002";
|
||||
}
|
||||
|
||||
.btn{
|
||||
font-weight:700;
|
||||
padding-right:12px;
|
||||
padding-left:12px;
|
||||
color:#fff;
|
||||
border:0;
|
||||
font-size:100%;
|
||||
height:38px;
|
||||
line-height:40px;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.btn.btn-primary{
|
||||
background-color:#ed2553;
|
||||
}
|
||||
|
||||
.btn.btn-primary:active,.btn.btn-primary:focus,.btn.btn-primary:hover{
|
||||
color:#fff;background:#f15478;
|
||||
}
|
||||
|
||||
#tags{
|
||||
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;
|
||||
color:#fff;
|
||||
border:0;
|
||||
font-size:100%;
|
||||
height:20px;
|
||||
outline: 0;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
margin:2px;
|
||||
}
|
||||
|
||||
.btn-2.parody{
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.btn-2.character{
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.btn-2.tag{
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.btn-2.artist{
|
||||
background-color: fuchsia;
|
||||
}
|
||||
|
||||
.btn-2.group{
|
||||
background-color: teal;
|
||||
}
|
||||
|
||||
.btn-2.hover{
|
||||
filter: saturate(20%)
|
||||
}
|
||||
input,input:focus{
|
||||
border:none;
|
||||
outline:0;
|
||||
}
|
||||
|
||||
html.theme-black,html.theme-black body {
|
||||
@ -281,4 +441,4 @@ html.theme-black code {
|
||||
color: #ed2553;
|
||||
border: none;
|
||||
background-color: #292929
|
||||
}
|
||||
}
|
||||
@ -5,7 +5,7 @@
|
||||
<meta charset="utf-8" />
|
||||
<meta name="theme-color" content="#1f1f1f" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes, viewport-fit=cover" />
|
||||
<title>nHentai » Viewer</title>
|
||||
<title>nHentai Viewer</title>
|
||||
<script type="text/javascript" src="data.js"></script>
|
||||
<!-- <link rel="stylesheet" href="./main.css"> -->
|
||||
<style>
|
||||
@ -15,7 +15,29 @@
|
||||
|
||||
<body>
|
||||
<div id="content">
|
||||
<nav class="sidenav">nHentai Viewer</nav>
|
||||
<nav class="sidenav">
|
||||
<img src="logo.png">
|
||||
<h1>nHentai Viewer</h1>
|
||||
<button class="accordion">Language</button>
|
||||
<div class="options" id="language">
|
||||
<a>English</a>
|
||||
<a>日本語</a>
|
||||
<a>中国語</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>
|
||||
<div class="search">
|
||||
<input type="search" name="q" value="" autocapitalize="none" required="">
|
||||
<button type="submit" class="btn btn-primary btn-square">
|
||||
<i class="fa fa-search"></i></button>
|
||||
</div>
|
||||
<div id="tags">
|
||||
</div>
|
||||
</nav>
|
||||
<div class="container" id="favcontainer">
|
||||
|
||||
{PICTURE}
|
||||
|
||||
@ -0,0 +1,60 @@
|
||||
//------------------------------------navbar script------------------------------------
|
||||
var menu = document.getElementsByClassName("accordion");
|
||||
for (var i = 0; i < menu.length; i++) {
|
||||
menu[i].addEventListener("click", function() {
|
||||
var panel = this.nextElementSibling;
|
||||
if (panel.style.maxHeight) {
|
||||
this.classList.toggle("active");
|
||||
panel.style.maxHeight = null;
|
||||
} else {
|
||||
panel.style.maxHeight = panel.scrollHeight + "px";
|
||||
this.classList.toggle("active");
|
||||
}
|
||||
});
|
||||
}
|
||||
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;
|
||||
document.getElementsByClassName("accordion")[0].classList.toggle("active");
|
||||
|
||||
var toggler = document.getElementsByClassName("nav-btn")[0].classList;
|
||||
if (toggler.contains("hidden")){
|
||||
toggler.toggle("hidden");
|
||||
}
|
||||
});
|
||||
}
|
||||
var category = document.getElementById("category").children;
|
||||
for (var i = 0; i < category.length; i++){
|
||||
category[i].addEventListener("click", function() {
|
||||
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 tags = document.getElementById("tags");
|
||||
for (i in data){
|
||||
tag_maker(data[i])
|
||||
}
|
||||
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");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user