diff --git a/snippetbox/main.go b/snippetbox/cmd/web/handlers.go similarity index 59% rename from snippetbox/main.go rename to snippetbox/cmd/web/handlers.go index 73c2e8c..57727e5 100644 --- a/snippetbox/main.go +++ b/snippetbox/cmd/web/handlers.go @@ -2,6 +2,7 @@ package main import ( "fmt" + "html/template" "log" "net/http" "strconv" @@ -12,7 +13,22 @@ func home(w http.ResponseWriter, r *http.Request) { http.NotFound(w, r) return } - w.Write([]byte("hello from Snippetbox")) + files := []string{ + "./ui/html/base.tmpl", + "./ui/html/partials/nav.tmpl", + "./ui/html/pages/home.tmpl", + } + ts, err := template.ParseFiles(files...) + if err != nil { + log.Print(err.Error()) + http.Error(w, "Internal Server Error", http.StatusInternalServerError) + return + } + err = ts.ExecuteTemplate(w, "base", nil) + if err != nil { + log.Print(err.Error()) + http.Error(w, "Internal Server Error", http.StatusInternalServerError) + } } func snippetView(w http.ResponseWriter, r *http.Request) { @@ -31,13 +47,3 @@ func snippetCreate(w http.ResponseWriter, r *http.Request) { } w.Write([]byte("Create a new snippet")) } - -func main() { - mux := http.NewServeMux() - mux.HandleFunc("/", home) - mux.HandleFunc("/snippet/view", snippetView) - mux.HandleFunc("/snippet/create", snippetCreate) - log.Print("Starting server on :4000") - err := http.ListenAndServe(":4000", mux) - log.Fatal(err) -} diff --git a/snippetbox/cmd/web/main.go b/snippetbox/cmd/web/main.go new file mode 100644 index 0000000..d86d205 --- /dev/null +++ b/snippetbox/cmd/web/main.go @@ -0,0 +1,18 @@ +package main + +import ( + "log" + "net/http" +) + +func main() { + mux := http.NewServeMux() + fileServer := http.FileServer(http.Dir("./ui/static/")) + mux.Handle("/static/", http.StripPrefix("/static", fileServer)) + mux.HandleFunc("/", home) + mux.HandleFunc("/snippet/view", snippetView) + mux.HandleFunc("/snippet/create", snippetCreate) + log.Print("Starting server on :4000") + err := http.ListenAndServe(":4000", mux) + log.Fatal(err) +} diff --git a/snippetbox/ui/html/base.tmpl b/snippetbox/ui/html/base.tmpl new file mode 100644 index 0000000..8798a20 --- /dev/null +++ b/snippetbox/ui/html/base.tmpl @@ -0,0 +1,26 @@ +{{define "base"}} + + + + + {{template "title" .}} - Snippetbox + + + + + + + +
+

Snippetbox

+
+ {{template "nav" .}} +
+ {{template "main" .}} +
+ + + + + +{{end}} \ No newline at end of file diff --git a/snippetbox/ui/html/pages/home.tmpl b/snippetbox/ui/html/pages/home.tmpl new file mode 100644 index 0000000..968e57e --- /dev/null +++ b/snippetbox/ui/html/pages/home.tmpl @@ -0,0 +1,6 @@ +{{define "title"}}Home{{end}} + +{{define "main"}} +

Latest Snippets

+

There's nothing to see here yet!

+{{end}} \ No newline at end of file diff --git a/snippetbox/ui/html/partials/nav.tmpl b/snippetbox/ui/html/partials/nav.tmpl new file mode 100644 index 0000000..e5222bf --- /dev/null +++ b/snippetbox/ui/html/partials/nav.tmpl @@ -0,0 +1,5 @@ +{{define "nav"}} + +{{end}} \ No newline at end of file diff --git a/snippetbox/ui/static/css/main.css b/snippetbox/ui/static/css/main.css new file mode 100755 index 0000000..52e00f4 --- /dev/null +++ b/snippetbox/ui/static/css/main.css @@ -0,0 +1,313 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; + font-size: 18px; + font-family: "Ubuntu Mono", monospace; +} + +html, body { + height: 100%; +} + +body { + line-height: 1.5; + background-color: #F1F3F6; + color: #34495E; + overflow-y: scroll; +} + +header, nav, main, footer { + padding: 2px calc((100% - 800px) / 2) 0; +} + +main { + margin-top: 54px; + margin-bottom: 54px; + min-height: calc(100vh - 345px); + overflow: auto; +} + +h1 a { + font-size: 36px; + font-weight: bold; + background-image: url("/static/img/logo.png"); + background-repeat: no-repeat; + background-position: 0px 0px; + height: 36px; + padding-left: 50px; + position: relative; +} + +h1 a:hover { + text-decoration: none; + color: #34495E; +} + +h2 { + font-size: 22px; + margin-bottom: 36px; + position: relative; + top: -9px; +} + +a { + color: #62CB31; + text-decoration: none; +} + +a:hover { + color: #4EB722; + text-decoration: underline; +} + +textarea, input:not([type="submit"]) { + font-size: 18px; + font-family: "Ubuntu Mono", monospace; +} + +header { + background-image: -webkit-linear-gradient(left, #34495e, #34495e 25%, #9b59b6 25%, #9b59b6 35%, #3498db 35%, #3498db 45%, #62cb31 45%, #62cb31 55%, #ffb606 55%, #ffb606 65%, #e67e22 65%, #e67e22 75%, #e74c3c 85%, #e74c3c 85%, #c0392b 85%, #c0392b 100%); + background-image: -moz-linear-gradient(left, #34495e, #34495e 25%, #9b59b6 25%, #9b59b6 35%, #3498db 35%, #3498db 45%, #62cb31 45%, #62cb31 55%, #ffb606 55%, #ffb606 65%, #e67e22 65%, #e67e22 75%, #e74c3c 85%, #e74c3c 85%, #c0392b 85%, #c0392b 100%); + background-image: -ms-linear-gradient(left, #34495e, #34495e 25%, #9b59b6 25%, #9b59b6 35%, #3498db 35%, #3498db 45%, #62cb31 45%, #62cb31 55%, #ffb606 55%, #ffb606 65%, #e67e22 65%, #e67e22 75%, #e74c3c 85%, #e74c3c 85%, #c0392b 85%, #c0392b 100%); + background-image: linear-gradient(to right, #34495e, #34495e 25%, #9b59b6 25%, #9b59b6 35%, #3498db 35%, #3498db 45%, #62cb31 45%, #62cb31 55%, #ffb606 55%, #ffb606 65%, #e67e22 65%, #e67e22 75%, #e74c3c 85%, #e74c3c 85%, #c0392b 85%, #c0392b 100%); + background-size: 100% 6px; + background-repeat: no-repeat; + border-bottom: 1px solid #E4E5E7; + overflow: auto; + padding-top: 33px; + padding-bottom: 27px; + text-align: center; +} + +header a { + color: #34495E; + text-decoration: none; +} + +nav { + border-bottom: 1px solid #E4E5E7; + padding-top: 17px; + padding-bottom: 15px; + background: #F7F9FA; + height: 60px; + color: #6A6C6F; +} + +nav a { + margin-right: 1.5em; + display: inline-block; +} + +nav form { + display: inline-block; + margin-left: 1.5em; +} + +nav div { + width: 50%; + float: left; +} + +nav div:last-child { + text-align: right; +} + +nav div:last-child a { + margin-left: 1.5em; + margin-right: 0; +} + +nav a.live { + color: #34495E; + cursor: default; +} + +nav a.live:hover { + text-decoration: none; +} + +nav a.live:after { + content: ''; + display: block; + position: relative; + left: calc(50% - 7px); + top: 9px; + width: 14px; + height: 14px; + background: #F7F9FA; + border-left: 1px solid #E4E5E7; + border-bottom: 1px solid #E4E5E7; + -moz-transform: rotate(45deg); + -webkit-transform: rotate(-45deg); +} + +a.button, input[type="submit"] { + background-color: #62CB31; + border-radius: 3px; + color: #FFFFFF; + padding: 18px 27px; + border: none; + display: inline-block; + margin-top: 18px; + font-weight: 700; +} + +a.button:hover, input[type="submit"]:hover { + background-color: #4EB722; + color: #FFFFFF; + cursor: pointer; + text-decoration: none; +} + +form div { + margin-bottom: 18px; +} + +form div:last-child { + border-top: 1px dashed #E4E5E7; +} + +form input[type="radio"] { + margin-left: 18px; +} + +form input[type="text"], form input[type="password"], form input[type="email"] { + padding: 0.75em 18px; + width: 100%; +} + +form input[type=text], form input[type="password"], form input[type="email"], textarea { + color: #6A6C6F; + background: #FFFFFF; + border: 1px solid #E4E5E7; + border-radius: 3px; +} + +form label { + display: inline-block; + margin-bottom: 9px; +} + +.error { + color: #C0392B; + font-weight: bold; + display: block; +} + +.error + textarea, .error + input { + border-color: #C0392B !important; + border-width: 2px !important; +} + +textarea { + padding: 18px; + width: 100%; + height: 266px; +} + +button { + background: none; + padding: 0; + border: none; + color: #62CB31; + text-decoration: none; +} + +button:hover { + color: #4EB722; + text-decoration: underline; + cursor: pointer; +} + +.snippet { + background-color: #FFFFFF; + border: 1px solid #E4E5E7; + border-radius: 3px; +} + +.snippet pre { + padding: 18px; + border-top: 1px solid #E4E5E7; + border-bottom: 1px solid #E4E5E7; +} + +.snippet .metadata { + background-color: #F7F9FA; + color: #6A6C6F; + padding: 0.75em 18px; + overflow: auto; +} + +.snippet .metadata span { + float: right; +} + +.snippet .metadata strong { + color: #34495E; +} + +.snippet .metadata time { + display: inline-block; +} + +.snippet .metadata time:first-child { + float: left; +} + +.snippet .metadata time:last-child { + float: right; +} + +div.flash { + color: #FFFFFF; + font-weight: bold; + background-color: #34495E; + padding: 18px; + margin-bottom: 36px; + text-align: center; +} + +div.error { + color: #FFFFFF; + background-color: #C0392B; + padding: 18px; + margin-bottom: 36px; + font-weight: bold; + text-align: center; +} + +table { + background: white; + border: 1px solid #E4E5E7; + border-collapse: collapse; + width: 100%; +} + +td, th { + text-align: left; + padding: 9px 18px; +} + +th:last-child, td:last-child { + text-align: right; + color: #6A6C6F; +} + +tr { + border-bottom: 1px solid #E4E5E7; +} + +tr:nth-child(2n) { + background-color: #F7F9FA; +} + +footer { + border-top: 1px solid #E4E5E7; + padding-top: 17px; + padding-bottom: 15px; + background: #F7F9FA; + height: 60px; + color: #6A6C6F; + text-align: center; +} diff --git a/snippetbox/ui/static/img/favicon.ico b/snippetbox/ui/static/img/favicon.ico new file mode 100755 index 0000000..739e573 Binary files /dev/null and b/snippetbox/ui/static/img/favicon.ico differ diff --git a/snippetbox/ui/static/img/logo.png b/snippetbox/ui/static/img/logo.png new file mode 100755 index 0000000..4681437 Binary files /dev/null and b/snippetbox/ui/static/img/logo.png differ diff --git a/snippetbox/ui/static/js/main.js b/snippetbox/ui/static/js/main.js new file mode 100755 index 0000000..886bacb --- /dev/null +++ b/snippetbox/ui/static/js/main.js @@ -0,0 +1,8 @@ +var navLinks = document.querySelectorAll("nav a"); +for (var i = 0; i < navLinks.length; i++) { + var link = navLinks[i] + if (link.getAttribute('href') == window.location.pathname) { + link.classList.add("live"); + break; + } +} \ No newline at end of file