From cf5c574b57745ba881631d06751a5912f329118c Mon Sep 17 00:00:00 2001 From: tamsin johnson Date: Tue, 23 Jan 2024 14:08:59 -0800 Subject: [PATCH] lets-go:3.1 --- snippetbox/cmd/web/main.go | 14 +- snippetbox/ui/html/base.tmpl | 6 +- snippetbox/ui/static/css/index.html | 0 snippetbox/ui/static/css/main.css | 313 +++++++++++++++++++++++++++ snippetbox/ui/static/img/favicon.ico | Bin 0 -> 1150 bytes snippetbox/ui/static/img/index.html | 0 snippetbox/ui/static/img/logo.png | Bin 0 -> 1075 bytes snippetbox/ui/static/index.html | 0 snippetbox/ui/static/js/index.html | 0 snippetbox/ui/static/js/main.js | 8 + 10 files changed, 338 insertions(+), 3 deletions(-) create mode 100644 snippetbox/ui/static/css/index.html create mode 100755 snippetbox/ui/static/css/main.css create mode 100755 snippetbox/ui/static/img/favicon.ico create mode 100644 snippetbox/ui/static/img/index.html create mode 100755 snippetbox/ui/static/img/logo.png create mode 100644 snippetbox/ui/static/index.html create mode 100644 snippetbox/ui/static/js/index.html create mode 100755 snippetbox/ui/static/js/main.js diff --git a/snippetbox/cmd/web/main.go b/snippetbox/cmd/web/main.go index 0c4da5d..b0b88e2 100644 --- a/snippetbox/cmd/web/main.go +++ b/snippetbox/cmd/web/main.go @@ -1,18 +1,28 @@ package main import ( + "flag" "log" "net/http" ) // main it's the snippetbox webapp func main() { + //configuration + addr := flag.String("addr", ":4000", "HTTP network address") + flag.Parse() + mux := http.NewServeMux() + + // setup server for static files + 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 a server on :4000") - err := http.ListenAndServe(":4000", mux) + log.Printf("starting a server on %s", *addr) + err := http.ListenAndServe(*addr, mux) log.Fatal(err) } diff --git a/snippetbox/ui/html/base.tmpl b/snippetbox/ui/html/base.tmpl index 3277315..3786d63 100644 --- a/snippetbox/ui/html/base.tmpl +++ b/snippetbox/ui/html/base.tmpl @@ -4,6 +4,9 @@ {{template "title" .}} - Snippetbox + + +
@@ -14,6 +17,7 @@ {{template "main" .}}
Powered by Go
+ -{{end}} \ No newline at end of file +{{end}} diff --git a/snippetbox/ui/static/css/index.html b/snippetbox/ui/static/css/index.html new file mode 100644 index 0000000..e69de29 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 0000000000000000000000000000000000000000..739e573d2877f4ef267f20783bf8b86b046f568a GIT binary patch literal 1150 zcmcIiJxc>Y5S^$f8b4wX8w*85Bw!%fJ2jOjin%>wc||bUixGm>{(z`hh*;QI+FAzu z0}|~8MFdN2(pYFE34YF8a&dF!#Kt?`&Fsv3vpcr~;KMf%0Q`=?dK_`9F($#qndOe&>umR*ABi<388G}vc7FZwoRj@)T z9v!O-YL01!+S8nEBIoIw+e~lQDO+6GHMLN;QwKFSvd-~;?(dw#wk1hlJ6}V-$@v@e z|E(8#G`zy6d!2sV_Lu!D!cg{e3D!j%i?a>XKK@aE>fDiO#yaW#sK#1678C|M!Wyqm z9g5RKYuw{DW2kyH0zOMuk{EwLln~i`9$F}e{e*;WiZ$3^6kea5MHn+5m+Ojs{r literal 0 HcmV?d00001 diff --git a/snippetbox/ui/static/img/index.html b/snippetbox/ui/static/img/index.html new file mode 100644 index 0000000..e69de29 diff --git a/snippetbox/ui/static/img/logo.png b/snippetbox/ui/static/img/logo.png new file mode 100755 index 0000000000000000000000000000000000000000..4681437626a70fac0f4ccbe8a8625d568ca0c1a9 GIT binary patch literal 1075 zcmV-31kC%1P)P*ITtQ>;|2+IXQ*O+y7S_>k--pe`uby1NOXt@xlO*##3KULyD)S_Dbd zCYx@vb9_j*Y?5!UCVA@bX?Nz#`Tyse`Q|$#6i9VL%TCn3W8sz}<u9$&p zPgA4936MK-Ogd%Z*j!nxb0QFk7i^%)$jo)?=u=mS?8m`wf|dqF_%R2eH(Wji41lBz05#$L(5LZeu{GY3JWjg zJZkojhI`Hdm}INk#LXz1S6LjO#FAK_{Bvb}f1e!tdDETSKQhML1XQeo@I2^;T0H+? zG}u3$Y;@d&)%DGLRJ0S=z7om;XRMgENU&$zq0gC`nwsJn*R78$`X;ckK9!UUUlBRqx%M5UH0c zkJqyBBtEy+wnqp0CY=VjYg@L8NpvDopFvnr`ox$QMuI)(9VhgFcXK?U#{_vqU|Om? zUQOwDd{mvY8*0N1cE>#3y%lKdq?$88&8?*#&ZM22KX75)|E z@Mx&l4>;voFfG!x^o+@5AQ=+1HqjOx==;hsaYM_d+1Z&36XyaKocb&GHf<}i(y37A zm_56J1r$z~sCn+2aL=#VVqww7&G;?J*}!FH1y0V!VsE6IvDFe``r%9R=161shl?t{S*%z>wzrUJDe|2=Xql?1Qrg#1&4Mkx=hJO_;k; z4X>HBFeFwgBOzZ$F+gOn=Lf)(?-i^7ezHP)H0V2>Y*@4jM?(Hnv9h^sBD4Yjtf26; z!i&?C??@E~hZ^tlWwOg%_vj~LStm&;=2uF+7hFBfru{{V*OjVckBO>O`H002ovPDHLkV1gQd^sE2? literal 0 HcmV?d00001 diff --git a/snippetbox/ui/static/index.html b/snippetbox/ui/static/index.html new file mode 100644 index 0000000..e69de29 diff --git a/snippetbox/ui/static/js/index.html b/snippetbox/ui/static/js/index.html new file mode 100644 index 0000000..e69de29 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