Initial commit
This commit is contained in:
commit
9a4c281db3
5
.gitignore
vendored
Normal file
5
.gitignore
vendored
Normal file
@ -0,0 +1,5 @@
|
||||
node_modules
|
||||
gulpfile.js
|
||||
.sftp-config.json
|
||||
build
|
||||
meikan
|
||||
1
README.md
Normal file
1
README.md
Normal file
@ -0,0 +1 @@
|
||||
A [Meikan](https://git.fuyu.moe/Fuyu/meikan) client with a twist. Lets hope it will be beautiful.
|
||||
44
meikan.go
Normal file
44
meikan.go
Normal file
@ -0,0 +1,44 @@
|
||||
package main
|
||||
|
||||
import (
|
||||
"html/template"
|
||||
"log"
|
||||
"net"
|
||||
"net/http"
|
||||
"os"
|
||||
|
||||
"github.com/julienschmidt/httprouter"
|
||||
)
|
||||
|
||||
const sockPath = "/srv/kumori.moe/sock/meikan.sock"
|
||||
|
||||
var templates = template.Must(template.ParseGlob("templates/*.html"))
|
||||
|
||||
func main() {
|
||||
os.Remove(sockPath)
|
||||
sock, err := net.Listen("unix", sockPath)
|
||||
|
||||
if err != nil {
|
||||
log.Fatalln(err)
|
||||
return
|
||||
}
|
||||
|
||||
router := httprouter.New()
|
||||
|
||||
router.GET("/", index)
|
||||
router.ServeFiles("/static/*filepath", http.Dir("static/"))
|
||||
|
||||
if err := os.Chmod(sockPath, 0770); err != nil {
|
||||
log.Fatalln(err)
|
||||
return
|
||||
}
|
||||
|
||||
log.Fatal(http.Serve(sock, router))
|
||||
}
|
||||
|
||||
func index(w http.ResponseWriter, r *http.Request, ps httprouter.Params) {
|
||||
err := templates.ExecuteTemplate(w, "home.html", nil)
|
||||
if err != nil {
|
||||
println(err)
|
||||
}
|
||||
}
|
||||
10
package.json
Normal file
10
package.json
Normal file
@ -0,0 +1,10 @@
|
||||
{
|
||||
"devDependencies": {
|
||||
"gulp": "^3.9.1",
|
||||
"gulp-sass": "^3.1.0",
|
||||
"gulp-scp2": "^0.2.0",
|
||||
"gulp-sftp": "^0.1.5",
|
||||
"gulp-sftp-with-callbacks": "^0.1.8",
|
||||
"scp2": "^0.5.0"
|
||||
}
|
||||
}
|
||||
237
sass/base.scss
Normal file
237
sass/base.scss
Normal file
@ -0,0 +1,237 @@
|
||||
@font-face
|
||||
{
|
||||
font-family: 'Roboto';
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
|
||||
src: local('Roboto'), local('Roboto-Regular'), url(/static/fonts/roboto.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
|
||||
}
|
||||
|
||||
@font-face
|
||||
{
|
||||
font-family: 'Material Icons';
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
|
||||
src: local('Material Icons'), local('MaterialIcons-Regular'), url(/static/fonts/material-icons.woff2) format('woff2');
|
||||
}
|
||||
|
||||
@import 'variables';
|
||||
|
||||
*
|
||||
{
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body
|
||||
{
|
||||
font-family: 'Roboto', sans-serif;
|
||||
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body
|
||||
{
|
||||
&:after
|
||||
{
|
||||
position: absolute;
|
||||
top: 65px;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: calc(100% - 65px);
|
||||
|
||||
content: '';
|
||||
|
||||
opacity: .05;
|
||||
background: url('/static/img/bg.svg');
|
||||
background-size: cover;
|
||||
}
|
||||
.material-icons
|
||||
{
|
||||
font-family: 'Material Icons';
|
||||
font-size: 24px;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
line-height: 1;
|
||||
|
||||
display: inline-block;
|
||||
|
||||
white-space: nowrap;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
word-wrap: normal;
|
||||
|
||||
direction: ltr;
|
||||
-webkit-font-feature-settings: 'liga';
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
.container
|
||||
{
|
||||
position: relative;
|
||||
|
||||
width: 1240px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.menu
|
||||
{
|
||||
font-size: 0;
|
||||
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
height: 65px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
background: #fff;
|
||||
box-shadow: 0 3px 6px rgba(0,0,0,.23), 0 3px 6px rgba(0,0,0,.16);
|
||||
a
|
||||
{
|
||||
font-size: 22px;
|
||||
font-variant: small-caps;
|
||||
line-height: 65px;
|
||||
|
||||
display: inline-block;
|
||||
|
||||
height: 100%;
|
||||
padding: 0 30px;
|
||||
|
||||
transition: background .1s, color .1s;
|
||||
vertical-align: middle;
|
||||
text-decoration: none;
|
||||
|
||||
color: rgba(0,0,0,.52);
|
||||
&:first-child
|
||||
{
|
||||
font-size: 30px;
|
||||
font-variant: normal;
|
||||
|
||||
padding-left: 0;
|
||||
|
||||
color: #ff4081;
|
||||
> i {
|
||||
height: inherit;
|
||||
line-height: inherit;
|
||||
vertical-align: top;
|
||||
font-size: 30px;
|
||||
}
|
||||
> span
|
||||
{
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
&:not(:first-child):hover,
|
||||
&:not(:first-child).open
|
||||
{
|
||||
color: #fff;
|
||||
background: #ff4081;
|
||||
}
|
||||
}
|
||||
}
|
||||
.submenu
|
||||
{
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
width: 100%;
|
||||
height: 0;
|
||||
|
||||
transition: height .5s;
|
||||
|
||||
background: #212121;
|
||||
box-shadow: inset 0 3px 6px rgba(0,0,0,.23);
|
||||
|
||||
will-change: height;
|
||||
&.open
|
||||
{
|
||||
height: 350px;
|
||||
}
|
||||
.container
|
||||
{
|
||||
height: 350px;
|
||||
.group
|
||||
{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
display: flex;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
pointer-events: none;
|
||||
|
||||
opacity: 0;
|
||||
&.open
|
||||
{
|
||||
opacity: 1;
|
||||
}
|
||||
.column
|
||||
{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
margin: 20px 10px;
|
||||
|
||||
color: #fff;
|
||||
|
||||
flex: 1;
|
||||
.groupTitle
|
||||
{
|
||||
line-height: 20px;
|
||||
|
||||
max-height: 20px;
|
||||
}
|
||||
> *
|
||||
{
|
||||
display: flex;
|
||||
|
||||
height: 100%;
|
||||
}
|
||||
ul
|
||||
{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
margin: 20px 0 0 10px;
|
||||
padding: 10px 20px;
|
||||
|
||||
list-style: none;
|
||||
|
||||
border-left: 2px rgba(255,255,255,.1) solid;
|
||||
li
|
||||
{
|
||||
position: relative;
|
||||
|
||||
flex: 1;
|
||||
.title
|
||||
{
|
||||
font-size: 16px;
|
||||
|
||||
display: block;
|
||||
|
||||
margin-bottom: 3px;
|
||||
|
||||
color: #ff80ab;
|
||||
}
|
||||
.info
|
||||
{
|
||||
font-size: .8em;
|
||||
font-weight: light;
|
||||
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
158
sass/menu.scss
Normal file
158
sass/menu.scss
Normal file
@ -0,0 +1,158 @@
|
||||
.menu
|
||||
{
|
||||
font-size: 0;
|
||||
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
height: 65px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
background: #fff;
|
||||
box-shadow: 0 3px 6px rgba(0,0,0,.23), 0 3px 6px rgba(0,0,0,.16);
|
||||
a
|
||||
{
|
||||
font-size: 22px;
|
||||
font-variant: small-caps;
|
||||
line-height: 65px;
|
||||
|
||||
display: inline-block;
|
||||
|
||||
height: 100%;
|
||||
padding: 0 30px;
|
||||
|
||||
transition: background .1s, color .1s;
|
||||
vertical-align: middle;
|
||||
text-decoration: none;
|
||||
|
||||
color: rgba(0,0,0,.52);
|
||||
&:first-child
|
||||
{
|
||||
font-size: 30px;
|
||||
font-variant: normal;
|
||||
|
||||
padding-left: 0;
|
||||
|
||||
color: #ff4081;
|
||||
> i {
|
||||
height: inherit;
|
||||
line-height: inherit;
|
||||
vertical-align: top;
|
||||
font-size: 30px;
|
||||
}
|
||||
> span
|
||||
{
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
&:not(:first-child):hover,
|
||||
&:not(:first-child).open
|
||||
{
|
||||
color: #fff;
|
||||
background: #ff4081;
|
||||
}
|
||||
}
|
||||
}
|
||||
.submenu
|
||||
{
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
width: 100%;
|
||||
height: 0;
|
||||
|
||||
transition: height .5s;
|
||||
|
||||
background: #212121;
|
||||
box-shadow: inset 0 3px 6px rgba(0,0,0,.23);
|
||||
|
||||
will-change: height;
|
||||
&.open
|
||||
{
|
||||
height: 350px;
|
||||
}
|
||||
.container
|
||||
{
|
||||
height: 350px;
|
||||
.group
|
||||
{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
display: flex;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
pointer-events: none;
|
||||
|
||||
opacity: 0;
|
||||
&.open
|
||||
{
|
||||
opacity: 1;
|
||||
}
|
||||
.column
|
||||
{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
margin: 20px 10px;
|
||||
|
||||
color: #fff;
|
||||
|
||||
flex: 1;
|
||||
.groupTitle
|
||||
{
|
||||
line-height: 20px;
|
||||
|
||||
max-height: 20px;
|
||||
}
|
||||
> *
|
||||
{
|
||||
display: flex;
|
||||
|
||||
height: 100%;
|
||||
}
|
||||
ul
|
||||
{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
margin: 20px 0 0 10px;
|
||||
padding: 10px 20px;
|
||||
|
||||
list-style: none;
|
||||
|
||||
border-left: 2px rgba(255,255,255,.1) solid;
|
||||
li
|
||||
{
|
||||
position: relative;
|
||||
|
||||
flex: 1;
|
||||
.title
|
||||
{
|
||||
font-size: 16px;
|
||||
|
||||
display: block;
|
||||
|
||||
margin-bottom: 3px;
|
||||
|
||||
color: #ff80ab;
|
||||
}
|
||||
.info
|
||||
{
|
||||
font-size: .8em;
|
||||
font-weight: light;
|
||||
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
0
sass/variables.scss
Normal file
0
sass/variables.scss
Normal file
1
static/css/base.css
Normal file
1
static/css/base.css
Normal file
@ -0,0 +1 @@
|
||||
@font-face{font-family:'Roboto';font-weight:400;font-style:normal;src:local("Roboto"),local("Roboto-Regular"),url(/static/fonts/roboto.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215}@font-face{font-family:'Material Icons';font-weight:400;font-style:normal;src:local("Material Icons"),local("MaterialIcons-Regular"),url(/static/fonts/material-icons.woff2) format("woff2")}*{box-sizing:border-box}html,body{font-family:'Roboto', sans-serif;height:100%;margin:0}body:after{position:absolute;top:65px;left:0;width:100%;height:calc(100% - 65px);content:'';opacity:.05;background:url("/static/img/bg.svg");background-size:cover}body .material-icons{font-family:'Material Icons';font-size:24px;font-weight:normal;font-style:normal;line-height:1;display:inline-block;white-space:nowrap;letter-spacing:normal;text-transform:none;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased}body .container{position:relative;width:1240px;margin:0 auto}body .menu{font-size:0;position:relative;z-index:2;height:65px;margin:0;padding:0;background:#fff;box-shadow:0 3px 6px rgba(0,0,0,0.23),0 3px 6px rgba(0,0,0,0.16)}body .menu a{font-size:22px;font-variant:small-caps;line-height:65px;display:inline-block;height:100%;padding:0 30px;transition:background .1s, color .1s;vertical-align:middle;text-decoration:none;color:rgba(0,0,0,0.52)}body .menu a:first-child{font-size:30px;font-variant:normal;padding-left:0;color:#ff4081}body .menu a:first-child>i{height:inherit;line-height:inherit;vertical-align:top;font-size:30px}body .menu a:first-child>span{margin-left:10px}body .menu a:not(:first-child):hover,body .menu a:not(:first-child).open{color:#fff;background:#ff4081}body .submenu{position:relative;z-index:1;overflow:hidden;width:100%;height:0;transition:height .5s;background:#212121;box-shadow:inset 0 3px 6px rgba(0,0,0,0.23);will-change:height}body .submenu.open{height:350px}body .submenu .container{height:350px}body .submenu .container .group{position:absolute;top:0;left:0;display:flex;width:100%;height:100%;pointer-events:none;opacity:0}body .submenu .container .group.open{opacity:1}body .submenu .container .group .column{display:flex;flex-direction:column;margin:20px 10px;color:#fff;flex:1}body .submenu .container .group .column .groupTitle{line-height:20px;max-height:20px}body .submenu .container .group .column>*{display:flex;height:100%}body .submenu .container .group .column ul{display:flex;flex-direction:column;margin:20px 0 0 10px;padding:10px 20px;list-style:none;border-left:2px rgba(255,255,255,0.1) solid}body .submenu .container .group .column ul li{position:relative;flex:1}body .submenu .container .group .column ul li .title{font-size:16px;display:block;margin-bottom:3px;color:#ff80ab}body .submenu .container .group .column ul li .info{font-size:.8em;font-weight:light;color:#aaa}
|
||||
1
static/css/menu.css
Normal file
1
static/css/menu.css
Normal file
@ -0,0 +1 @@
|
||||
.menu{font-size:0;position:relative;z-index:2;height:65px;margin:0;padding:0;background:#fff;box-shadow:0 3px 6px rgba(0,0,0,0.23),0 3px 6px rgba(0,0,0,0.16)}.menu a{font-size:22px;font-variant:small-caps;line-height:65px;display:inline-block;height:100%;padding:0 30px;transition:background .1s, color .1s;vertical-align:middle;text-decoration:none;color:rgba(0,0,0,0.52)}.menu a:first-child{font-size:30px;font-variant:normal;padding-left:0;color:#ff4081}.menu a:first-child>i{height:inherit;line-height:inherit;vertical-align:top;font-size:30px}.menu a:first-child>span{margin-left:10px}.menu a:not(:first-child):hover,.menu a:not(:first-child).open{color:#fff;background:#ff4081}.submenu{position:relative;z-index:1;overflow:hidden;width:100%;height:0;transition:height .5s;background:#212121;box-shadow:inset 0 3px 6px rgba(0,0,0,0.23);will-change:height}.submenu.open{height:350px}.submenu .container{height:350px}.submenu .container .group{position:absolute;top:0;left:0;display:flex;width:100%;height:100%;pointer-events:none;opacity:0}.submenu .container .group.open{opacity:1}.submenu .container .group .column{display:flex;flex-direction:column;margin:20px 10px;color:#fff;flex:1}.submenu .container .group .column .groupTitle{line-height:20px;max-height:20px}.submenu .container .group .column>*{display:flex;height:100%}.submenu .container .group .column ul{display:flex;flex-direction:column;margin:20px 0 0 10px;padding:10px 20px;list-style:none;border-left:2px rgba(255,255,255,0.1) solid}.submenu .container .group .column ul li{position:relative;flex:1}.submenu .container .group .column ul li .title{font-size:16px;display:block;margin-bottom:3px;color:#ff80ab}.submenu .container .group .column ul li .info{font-size:.8em;font-weight:light;color:#aaa}
|
||||
0
static/css/variables.css
Normal file
0
static/css/variables.css
Normal file
BIN
static/fonts/material-icons.woff2
Normal file
BIN
static/fonts/material-icons.woff2
Normal file
Binary file not shown.
BIN
static/fonts/roboto.woff2
Normal file
BIN
static/fonts/roboto.woff2
Normal file
Binary file not shown.
362
static/img/bg.svg
Normal file
362
static/img/bg.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 130 KiB |
BIN
static/img/construction.png
Normal file
BIN
static/img/construction.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 533 KiB |
BIN
static/img/construction1.png
Normal file
BIN
static/img/construction1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 107 KiB |
BIN
static/img/construction2.png
Normal file
BIN
static/img/construction2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 390 KiB |
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>
|
||||
13
templates/index.html
Normal file
13
templates/index.html
Normal file
@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html style="height: 100%">
|
||||
<head>
|
||||
<title>Meikan</title>
|
||||
<!-- <link rel="stylesheet" type="text/css" href="css/base.css"> -->
|
||||
</head>
|
||||
<body style="height: 100%">
|
||||
<div style="position: relative; top: 50%; text-align: center; transform: translateY(-50%);">
|
||||
<img src="/img/construction.png" style="width: 500px; vertical-align: middle;">
|
||||
<div style="margin-top: 50px; font-family: Arial; font-weight: bold; font-size: 40px; opacity: .87;">Under construction</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user