MeikanClient/templates/home.html

586 lines
9.1 KiB
HTML
Raw Normal View History

2017-03-29 01:06:21 +02:00
<!DOCTYPE html>
<html>
<head>
<title>Meikan - Home</title>
<link rel="stylesheet" type="text/css" href="/static/css/base.css">
</head>
<body>
<div class="menu">
<div class="container">
<a class="logo" href="/home.html">
<i class="material-icons">local_library</i><span>Meikan</span>
</a>
<a data-group="anime" href="/anime">
anime
</a>
<a data-group="manga" href="/manga">
manga
</a>
<a data-group="vn" href="/vn">
vn
</a>
</div>
</div>
<div id="subMenu" class="submenu">
<div class="container">
<div data-group="anime" class="group">
<div class="column">
<div class="groupTitle">Top Anime</div>
<ul>
<li>
<div class="title">Something</div>
<div class="info">TV | 10 eps | Finished</div>
</li>
<li>
<div class="title">Something</div>
<div class="info">TV | 10 eps | Finished</div>
</li>
<li>
<div class="title">Something</div>
<div class="info">TV | 10 eps | Finished</div>
</li>
<li>
<div class="title">Something</div>
<div class="info">TV | 10 eps | Finished</div>
</li>
<li>
<div class="title">Something</div>
<div class="info">TV | 10 eps | Finished</div>
</li>
</ul>
</div>
<div class="column">
<div class="groupTitle">Top Genre</div>
<ul>
<li>
<div class="title">Something</div>
<div class="info">TV | 10 eps | Finished</div>
</li>
<li>
<div class="title">Something</div>
<div class="info">TV | 10 eps | Finished</div>
</li>
<li>
<div class="title">Something</div>
<div class="info">TV | 10 eps | Finished</div>
</li>
<li>
<div class="title">Something</div>
<div class="info">TV | 10 eps | Finished</div>
</li>
<li>
<div class="title">Something</div>
<div class="info">TV | 10 eps | Finished</div>
</li>
</ul>
</div>
<div class="column">
<div class="groupTitle">Random</div>
<ul>
<li>
<div class="title">Something</div>
<div class="info">TV | 10 eps | Finished</div>
</li>
<li>
<div class="title">Something</div>
<div class="info">TV | 10 eps | Finished</div>
</li>
<li>
<div class="title">Something</div>
<div class="info">TV | 10 eps | Finished</div>
</li>
<li>
<div class="title">Something</div>
<div class="info">TV | 10 eps | Finished</div>
</li>
<li>
<div class="title">Something</div>
<div class="info">TV | 10 eps | Finished</div>
</li>
</ul>
</div>
</div>
<div data-group="manga" class="group">
<div class="column">
<div class="groupTitle">Top Manga</div>
<ul>
<li>
<div class="title">Something</div>
<div class="info">TV | 10 eps | Finished</div>
</li>
<li>
<div class="title">Something</div>
<div class="info">TV | 10 eps | Finished</div>
</li>
<li>
<div class="title">Something</div>
<div class="info">TV | 10 eps | Finished</div>
</li>
<li>
<div class="title">Something</div>
<div class="info">TV | 10 eps | Finished</div>
</li>
<li>
<div class="title">Something</div>
<div class="info">TV | 10 eps | Finished</div>
</li>
</ul>
</div>
<div class="column">
<div class="groupTitle">Top Genre</div>
<ul>
<li>
<div class="title">Something</div>
<div class="info">TV | 10 eps | Finished</div>
</li>
<li>
<div class="title">Something</div>
<div class="info">TV | 10 eps | Finished</div>
</li>
<li>
<div class="title">Something</div>
<div class="info">TV | 10 eps | Finished</div>
</li>
<li>
<div class="title">Something</div>
<div class="info">TV | 10 eps | Finished</div>
</li>
<li>
<div class="title">Something</div>
<div class="info">TV | 10 eps | Finished</div>
</li>
</ul>
</div>
<div class="column">
<div class="groupTitle">Random</div>
<ul>
<li>
<div class="title">Something</div>
<div class="info">TV | 10 eps | Finished</div>
</li>
<li>
<div class="title">Something</div>
<div class="info">TV | 10 eps | Finished</div>
</li>
<li>
<div class="title">Something</div>
<div class="info">TV | 10 eps | Finished</div>
</li>
<li>
<div class="title">Something</div>
<div class="info">TV | 10 eps | Finished</div>
</li>
<li>
<div class="title">Something</div>
<div class="info">TV | 10 eps | Finished</div>
</li>
</ul>
</div>
</div>
<div data-group="vn" class="group">
<div class="column">
<div class="groupTitle">Top VN</div>
<ul>
<li>
<div class="title">Something</div>
<div class="info">TV | 10 eps | Finished</div>
</li>
<li>
<div class="title">Something</div>
<div class="info">TV | 10 eps | Finished</div>
</li>
<li>
<div class="title">Something</div>
<div class="info">TV | 10 eps | Finished</div>
</li>
<li>
<div class="title">Something</div>
<div class="info">TV | 10 eps | Finished</div>
</li>
<li>
<div class="title">Something</div>
<div class="info">TV | 10 eps | Finished</div>
</li>
</ul>
</div>
<div class="column">
<div class="groupTitle">Top Genre</div>
<ul>
<li>
<div class="title">Something</div>
<div class="info">TV | 10 eps | Finished</div>
</li>
<li>
<div class="title">Something</div>
<div class="info">TV | 10 eps | Finished</div>
</li>
<li>
<div class="title">Something</div>
<div class="info">TV | 10 eps | Finished</div>
</li>
<li>
<div class="title">Something</div>
<div class="info">TV | 10 eps | Finished</div>
</li>
<li>
<div class="title">Something</div>
<div class="info">TV | 10 eps | Finished</div>
</li>
</ul>
</div>
<div class="column">
<div class="groupTitle">Random</div>
<ul>
<li>
<div class="title">Something</div>
<div class="info">TV | 10 eps | Finished</div>
</li>
<li>
<div class="title">Something</div>
<div class="info">TV | 10 eps | Finished</div>
</li>
<li>
<div class="title">Something</div>
<div class="info">TV | 10 eps | Finished</div>
</li>
<li>
<div class="title">Something</div>
<div class="info">TV | 10 eps | Finished</div>
</li>
<li>
<div class="title">Something</div>
<div class="info">TV | 10 eps | Finished</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<script>
let menus = document.querySelectorAll('a[data-group]'),
subMenu = document.getElementById("subMenu"),
activeSubMenuGroup = [
document.querySelector(`div.group[data-group]`),
document.querySelector(`a[data-group]`)
];
subMenuGroups = [];
function openMenu(event){
activeSubMenuGroup[0].classList.remove("open");
activeSubMenuGroup[1].classList.remove("open");
activeSubMenuGroup[0] = subMenuGroups[this.dataset.group];
activeSubMenuGroup[1] = this;
this.classList.add("open");
subMenu.classList.add("open");
activeSubMenuGroup[0].classList.add("open");
}
function keepMenuOpen(event){
subMenu.classList.add("open");
activeSubMenuGroup[1].classList.add("open")
}
function closeMenu(event){
subMenu.classList.remove("open");
activeSubMenuGroup[1].classList.remove("open");
}
subMenu.addEventListener("mouseenter", keepMenuOpen);
subMenu.addEventListener("mouseleave", closeMenu);
for(let m of menus){
subMenuGroups[m.dataset.group] = document.querySelector(`div.group[data-group="${m.dataset.group}"]`);
m.addEventListener("mouseenter", openMenu);
m.addEventListener("mouseleave", closeMenu);
}
</script>
</body>
</html>