Initial commit
This commit is contained in:
commit
9a4c281db3
18 changed files with 1418 additions and 0 deletions
586
templates/home.html
Normal file
586
templates/home.html
Normal file
|
|
@ -0,0 +1,586 @@
|
|||
<!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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue