From c26e955a0872488f9ccc50c048d194b746cca206 Mon Sep 17 00:00:00 2001 From: Crow Date: Mon, 10 Apr 2017 21:14:40 +0200 Subject: [PATCH] Forgot to commit for a while, shit commit <3 --- .gitignore | 6 +- api/api.go | 72 ++++ components/footer.gohtml | 5 + .../home.html => components/header.gohtml | 346 +----------------- main.go | 79 ++++ meikan.go | 44 --- package.json | 3 +- sass/animeList.scss | 74 ++++ sass/base.scss | 276 +++++++------- sass/menu.scss | 3 +- sass/variables.scss | 1 + static/css/animeList.css | 1 + static/css/base.css | 2 +- static/css/menu.css | 2 +- static/js/menu.js | 37 ++ templates/anime.gohtml | 24 ++ templates/home.gohtml | 2 + templates/{index.html => index.gohtml} | 0 18 files changed, 442 insertions(+), 535 deletions(-) create mode 100644 api/api.go create mode 100644 components/footer.gohtml rename templates/home.html => components/header.gohtml (75%) create mode 100644 main.go delete mode 100644 meikan.go create mode 100644 sass/animeList.scss create mode 100644 static/css/animeList.css create mode 100644 static/js/menu.js create mode 100644 templates/anime.gohtml create mode 100644 templates/home.gohtml rename templates/{index.html => index.gohtml} (100%) diff --git a/.gitignore b/.gitignore index 6905afb..0384889 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,7 @@ node_modules gulpfile.js -.sftp-config.json +sftp-config.json build -meikan \ No newline at end of file +meikan +compile.bat +meikan.sublime-workspace \ No newline at end of file diff --git a/api/api.go b/api/api.go new file mode 100644 index 0000000..f7e9f9d --- /dev/null +++ b/api/api.go @@ -0,0 +1,72 @@ +package api + +import ( + "bytes" + "encoding/json" + "net/http" + "path" +) + +type Genre struct { + Name string `json:"name"` + Level int `json:"level"` +} + +type Anime struct { + ID int `json:"id"` + Title string `json:"title"` + Type string `json:"type"` + Episodes int `json:"episodes"` + State string `json:"state"` + Rating string `json:"rating"` + StartDate string `json:"start_date"` + EndDate string `json:"end_date"` + Genres []Genre `json:"genres"` + AverageDuration int `json:"average_duration"` + AnidbID int `json:"anidb_id"` + MyanimelistID int `json:"myanimelist_id"` +} + +type AnimeSearch struct { + Title string `json:"title"` +} + +var baseURL = "https://api.meikan.moe/v1/" + +func getJSON(url string, target interface{}) error { + r, err := http.Get(url) + if err != nil { + return err + } + defer r.Body.Close() + + return json.NewDecoder(r.Body).Decode(&target) +} + +func postJSON(url string, form AnimeSearch, target interface{}) error { + b := new(bytes.Buffer) + json.NewEncoder(b).Encode(form) + + r, err := http.Post(url, "application/json; charset=utf-8", b) + if err != nil { + return err + } + defer r.Body.Close() + return json.NewDecoder(r.Body).Decode(target) +} + +func AnimeByID(id string) (Anime, error) { + anime := Anime{} + url := baseURL + path.Join("anime", id) + err := getJSON(url, &anime) + return anime, err +} + +func SearchAnime(title string) ([]Anime, error) { + anime := []Anime{} + + form := AnimeSearch{Title: title} + url := baseURL + "anime" + err := postJSON(url, form, &anime) + return anime, err +} diff --git a/components/footer.gohtml b/components/footer.gohtml new file mode 100644 index 0000000..bed49d7 --- /dev/null +++ b/components/footer.gohtml @@ -0,0 +1,5 @@ +{{ define "footer" }} + + + +{{ end }} diff --git a/templates/home.html b/components/header.gohtml similarity index 75% rename from templates/home.html rename to components/header.gohtml index c82e324..319fdb7 100644 --- a/templates/home.html +++ b/components/header.gohtml @@ -1,586 +1,260 @@ - - - - Meikan - Home - - - +{{ define "header" }} + + + + Meikan - Home + + +
-
- - - - anime - - - manga - - - vn - -
-
- - - - - \ No newline at end of file +{{ end }} \ No newline at end of file diff --git a/main.go b/main.go new file mode 100644 index 0000000..e071168 --- /dev/null +++ b/main.go @@ -0,0 +1,79 @@ +package main + +import ( + "fmt" + "html/template" + "io/ioutil" + "log" + "net" + "net/http" + "os" + + "./api" + "github.com/julienschmidt/httprouter" +) + +const sockPath = "/srv/kumori.moe/sock/meikan.sock" + +var tmpl = template.Must(template.ParseGlob("templates/*.gohtml")) + +func init() { + l, _ := ioutil.ReadDir("components") + for _, v := range l { + c, _ := ioutil.ReadFile(`components/` + v.Name()) + tmpl, _ = tmpl.Parse(string(c)) + } +} + +func main() { + os.Remove(sockPath) + sock, err := net.Listen("unix", sockPath) + + if err != nil { + log.Fatalln(err) + return + } + + router := httprouter.New() + + router.GET("/", getIndex) + router.GET("/anime", getAnime) + router.GET("/reload", reload) + + router.ServeFiles("/static/*filepath", http.Dir("static/")) + + err = os.Chmod(sockPath, 0770) + if err != nil { + log.Fatalln(err) + } + + log.Fatal(http.Serve(sock, router)) +} + +func getIndex(w http.ResponseWriter, r *http.Request, ps httprouter.Params) { + err := tmpl.ExecuteTemplate(w, "home.gohtml", nil) + if err != nil { + println(err) + } +} + +func getAnime(w http.ResponseWriter, r *http.Request, ps httprouter.Params) { + animeList, err := api.SearchAnime("tsukaima") + if err != nil { + fmt.Fprint(w, err) + return + } + err = tmpl.ExecuteTemplate(w, "anime.gohtml", &animeList) + if err != nil { + println(err) + } +} + +func reload(w http.ResponseWriter, r *http.Request, ps httprouter.Params) { + tmpl = template.Must(template.ParseGlob("templates/*.gohtml")) + l, _ := ioutil.ReadDir("components") + for _, v := range l { + c, _ := ioutil.ReadFile(`components/` + v.Name()) + tmpl, _ = tmpl.Parse(string(c)) + } +} diff --git a/meikan.go b/meikan.go deleted file mode 100644 index 07e221d..0000000 --- a/meikan.go +++ /dev/null @@ -1,44 +0,0 @@ -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) - } -} diff --git a/package.json b/package.json index 5980f9c..1230764 100644 --- a/package.json +++ b/package.json @@ -2,9 +2,8 @@ "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", + "request": "^2.81.0", "scp2": "^0.5.0" } } diff --git a/sass/animeList.scss b/sass/animeList.scss new file mode 100644 index 0000000..1f56ac5 --- /dev/null +++ b/sass/animeList.scss @@ -0,0 +1,74 @@ +@import 'variables'; +.search { + display: flex; + .filters { + width: 300px; + } + .cardList { + padding: 20px 0; + + flex: 1; + .card { + display: flex; + overflow: hidden; + + border-radius: 2px; + background: #fff; + box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24); + &:not(:last-child) { + margin-bottom: 20px; + } + img { + height: 200px; + } + .body { + display: flex; + flex-direction: column; + + max-height: 200px; + + flex: 1; + .info { + display: flex; + overflow: hidden; + flex-direction: column; + + padding: 16px 16px 0; + + flex: 1; + .title { + font-size: 25px; + + color: $pink; + } + .synopsis { + overflow: hidden; + display: -webkit-box; + + padding: 16px 0 0 0; + + color: rgba(0,0,0,.52); + + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + margin-bottom: 16px; + } + } + .action { + padding: 16px; + + border-top: 1px rgba(0,0,0,.12) solid; + button { + font-size: 16px; + + color: #448aff; + border: none; + background: none; + + outline: none; + } + } + } + } + } +} diff --git a/sass/base.scss b/sass/base.scss index 66dc130..24136d9 100644 --- a/sass/base.scss +++ b/sass/base.scss @@ -1,5 +1,4 @@ -@font-face -{ +@font-face { font-family: 'Roboto'; font-weight: 400; font-style: normal; @@ -8,8 +7,7 @@ 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-face { font-family: 'Material Icons'; font-weight: 400; font-style: normal; @@ -19,30 +17,28 @@ @import 'variables'; -* -{ +* { box-sizing: border-box; } html, -body -{ +body { font-family: 'Roboto', sans-serif; height: 100%; margin: 0; } -body -{ - &:after - { - position: absolute; - top: 65px; +body { + &:after { + position: fixed; + top: 0; left: 0; + z-index: -1; + width: 100%; - height: calc(100% - 65px); + height: 100%; content: ''; @@ -50,8 +46,7 @@ body background: url('/static/img/bg.svg'); background-size: cover; } - .material-icons - { + .material-icons { font-family: 'Material Icons'; font-size: 24px; font-weight: normal; @@ -69,164 +64,150 @@ body -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; } - .container - { + .container { position: relative; width: 1240px; margin: 0 auto; } - .menu -{ - font-size: 0; + .menu { + font-size: 0; - position: relative; - z-index: 2; + position: relative; + z-index: 2; - height: 65px; - margin: 0; - padding: 0; + 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; + 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; + 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%; + padding: 0 30px; - pointer-events: none; + transition: background .1s, color .1s; + vertical-align: middle; + text-decoration: none; - opacity: 0; - &.open - { - opacity: 1; + color: rgba(0,0,0,.52); + &:first-child { + font-size: 30px; + font-variant: normal; + + padding-left: 0; + + color: $pink; + > i { + font-size: 30px; + line-height: inherit; + + height: inherit; + + vertical-align: top; + } + > span { + margin-left: 10px; + } } - .column - { - display: flex; - flex-direction: column; - - margin: 20px 10px; - + &:not(:first-child):hover, + &:not(:first-child).open { color: #fff; + background: $pink; + } + } + } + .submenu { + position: absolute; + z-index: 1; + top: 65px; - flex: 1; - .groupTitle - { - line-height: 20px; + overflow: hidden; - max-height: 20px; + 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; } - > * - { - display: flex; - - height: 100%; - } - ul - { + .column { display: flex; flex-direction: column; - margin: 20px 0 0 10px; - padding: 10px 20px; + margin: 20px 10px; - list-style: none; + color: #fff; - border-left: 2px rgba(255,255,255,.1) solid; - li - { - position: relative; + flex: 1; + .groupTitle { + line-height: 20px; - flex: 1; - .title - { - font-size: 16px; + max-height: 20px; + } + > * { + display: flex; - display: block; + height: 100%; + } + ul { + display: flex; + flex-direction: column; - margin-bottom: 3px; + margin: 20px 0 0 10px; + padding: 10px 20px; - color: #ff80ab; - } - .info - { - font-size: .8em; - font-weight: light; + list-style: none; - color: #aaa; + 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; + } } } } @@ -234,4 +215,3 @@ body } } } -} diff --git a/sass/menu.scss b/sass/menu.scss index 266ee6f..828e085 100644 --- a/sass/menu.scss +++ b/sass/menu.scss @@ -56,7 +56,8 @@ } .submenu { - position: relative; + position: absolute; + top: 65px; z-index: 1; overflow: hidden; diff --git a/sass/variables.scss b/sass/variables.scss index e69de29..d1739d5 100644 --- a/sass/variables.scss +++ b/sass/variables.scss @@ -0,0 +1 @@ +$pink: #ff4081; \ No newline at end of file diff --git a/static/css/animeList.css b/static/css/animeList.css new file mode 100644 index 0000000..d038728 --- /dev/null +++ b/static/css/animeList.css @@ -0,0 +1 @@ +.search{display:flex}.search .filters{width:300px}.search .cardList{padding:20px 0;flex:1}.search .cardList .card{display:flex;overflow:hidden;border-radius:2px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24)}.search .cardList .card:not(:last-child){margin-bottom:20px}.search .cardList .card img{height:200px}.search .cardList .card .body{display:flex;flex-direction:column;max-height:200px;flex:1}.search .cardList .card .body .info{display:flex;overflow:hidden;flex-direction:column;padding:16px 16px 0;flex:1}.search .cardList .card .body .info .title{font-size:25px;color:#ff4081}.search .cardList .card .body .info .synopsis{overflow:hidden;display:-webkit-box;padding:16px 0 0 0;color:rgba(0,0,0,0.52);-webkit-line-clamp:3;-webkit-box-orient:vertical;margin-bottom:16px}.search .cardList .card .body .action{padding:16px;border-top:1px rgba(0,0,0,0.12) solid}.search .cardList .card .body .action button{font-size:16px;color:#448aff;border:none;background:none;outline:none} diff --git a/static/css/base.css b/static/css/base.css index d49bc12..ba44e70 100644 --- a/static/css/base.css +++ b/static/css/base.css @@ -1 +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} +@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:fixed;top:0;left:0;z-index:-1;width:100%;height:100%;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{font-size:30px;line-height:inherit;height:inherit;vertical-align:top}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:absolute;z-index:1;top:65px;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} diff --git a/static/css/menu.css b/static/css/menu.css index 5d0d225..a96ce33 100644 --- a/static/css/menu.css +++ b/static/css/menu.css @@ -1 +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} +.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:absolute;top:65px;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} diff --git a/static/js/menu.js b/static/js/menu.js new file mode 100644 index 0000000..259b0dd --- /dev/null +++ b/static/js/menu.js @@ -0,0 +1,37 @@ +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); +} \ No newline at end of file diff --git a/templates/anime.gohtml b/templates/anime.gohtml new file mode 100644 index 0000000..d3d9b48 --- /dev/null +++ b/templates/anime.gohtml @@ -0,0 +1,24 @@ +{{ template "header" }} + +
+
+
+
+ {{ range . }} +
+ +
+
+
{{ .Title }}
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore iure deleniti iste harum, nobis nesciunt aliquid temporibus aspernatur corrupti est. Non fugiat illum ullam rem harum tempore neque, magni architecto. Non natus est officia dolor, obcaecati autem odio molestias assumenda. Minus quae ducimus aut reprehenderit commodi, voluptatum quis nulla autem.
+
+
+ +
+
+
+ {{ end }} +
+
+
+{{ template "footer" }} \ No newline at end of file diff --git a/templates/home.gohtml b/templates/home.gohtml new file mode 100644 index 0000000..8076a3d --- /dev/null +++ b/templates/home.gohtml @@ -0,0 +1,2 @@ +{{ template "header" .}} +{{ template "footer" }} \ No newline at end of file diff --git a/templates/index.html b/templates/index.gohtml similarity index 100% rename from templates/index.html rename to templates/index.gohtml