diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..8e024d9 --- /dev/null +++ b/public/index.html @@ -0,0 +1,5 @@ + + + Hello! + + diff --git a/public/link.png b/public/link.png new file mode 100644 index 0000000..cd1ddb3 Binary files /dev/null and b/public/link.png differ diff --git a/public/link.svg b/public/link.svg new file mode 100644 index 0000000..487fa8b --- /dev/null +++ b/public/link.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/style.css b/public/style.css new file mode 100644 index 0000000..2537f8b --- /dev/null +++ b/public/style.css @@ -0,0 +1,892 @@ +body { + font: normal x-small verdana,arial,helvetica,sans-serif; + margin: 0px; + padding-bottom: 20px; +} +body.dark { + background-color: #262626; + color: #ddd; +} +.dark a { + color: #8cb3d9; +} +.dark input[type=text], .dark input[type=password], .dark textarea { + background-color: #333; + color: #fff; + border-color: #4d4d4d +} +.rank, .thumb, .score { + float: left; +} +.clearleft { + clear: left; +} +.post { + margin: 6px; +} +.post .thumb { + height: 52px; + width: 70px; + margin: 0px 4px; + background-repeat: no-repeat; + background-size: cover; + background-position: center; + --background-color: #e7e7e7; +} +.rank { + color: #c6c6c6; + font-size: medium; + margin-top: 17px; + text-align: right; + min-width: 19px; +} +.dark .post .rank { + color: #646464; +} +.post .score { + color: #c6c6c6; + font-size: 12px; + font-weight: 700; + text-align: center; + min-width: 42px; +} +.dark .post .score { + color: #646464; +} +.comment .score { + margin-right: 2px; + overflow:hidden; +} +.comment .content { + overflow:hidden; +} +.comment.hidden .score { + display: none; +} +.score form.link-btn input { + display: block; + color: #b7b7b7; + font-size: 20px; + line-height: 16px; +} +.dark .score form.link-btn input { + color: #646464; +} +.comment form.link-btn input { + line-height: 17px; +} +.score form.like.link-btn input:first-child, .score .like div { + color: orangered; +} +.score form.dislike.link-btn input:last-child, .score .dislike div { + color: #8080FF; +} + +.score form div { + position: relative; + top: 2px; +} +.title a { + color: #0000ff; + font-size: medium; + text-decoration: none; +} +.dark .title a { + color: #dedede; +} +.post.deleted .title a { + text-decoration: line-through; +} +[disabled] { + cursor: not-allowed; +} +.post .title { + color: #888; + font-size: 10px; +} +.activity .post .title a { + font-size: medium; +} +.activity .post .title { + margin: 0; +} +.activity .title a { + font-size: 13px; +} +.activity .title { + margin: 5px 0px 0px 10px; +} +.activity .post { + margin-bottom: 10px; +} +.message { + margin: 10px 10px 15px 10px; +} +.message div { + margin-left: 10px; +} +.message b { + color: #000; +} +.meta { + color: #888; +} +.dark .meta { + color: #b4b4b4; +} + +.comment { + font-size: 14px; + margin: 0px 0px 5px 15px; + border: 1px solid #e6e6e6; + border-radius: 3px; + padding: 5px 10px 5px 5px; +} +.dark .comment { + border-color: #333; +} +.activity .comment { + border: 0px; +} +.comment img { + max-height: 300px; +} +.comment .comment { + margin-left: 15px; +} +.comment .comment, +.comment .comment .comment .comment, +.comment .comment .comment .comment .comment .comment, +.comment .comment .comment .comment .comment .comment .comment .comment, +.comment .comment .comment .comment .comment .comment .comment .comment .comment .comment { + background-color:#f7f7f8; +} +.dark .comment .comment, +.dark .comment .comment .comment .comment, +.dark .comment .comment .comment .comment .comment .comment, +.dark .comment .comment .comment .comment .comment .comment .comment .comment, +.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment { + background-color:#161616; +} +.comment .comment .comment, +.comment .comment .comment .comment .comment, +.comment .comment .comment .comment .comment .comment .comment, +.comment .comment .comment .comment .comment .comment .comment .comment .comment { + background-color:#fff; +} +.dark .comment, +.dark .comment .comment .comment, +.dark .comment .comment .comment .comment .comment, +.dark .comment .comment .comment .comment .comment .comment .comment, +.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment { + background-color: #121212; +} +.comment .meta { + font-size: 10px; + margin-bottom: 3px; +} +.meta a { + color: #369; + text-decoration: none; + font-size: 10px; + font-weight: 700; +} +.dark .meta a { + color: #6a98af; +} +.meta a:hover { + text-decoration: underline; +} +.comment .meta a.submitter { + background-color: #0055df; + color: white; + font-weight: bold; + border-radius: 3px; + padding: 0px 2px; +} +.commentmenu { + font-size: 16px; + margin: 0px 0px 10px 10px; +} +.commentmenu div { + border-top: 1px dotted gray; + font-size: 12px; +} +.savecomment { + margin: 10px; +} +.savecomment textarea { + width: 500px; + height: 100px; +} +.comment .meta a.minimize { + color: #369; + font-size: 10px; + margin-right: 2px; +} +.comment.hidden { + margin-bottom: 10px; +} +.comment.hidden .meta a { + color: gray; + font-weight: 400; +} +.comment.hidden .meta a:last-child { + font-style: italic; + font-weight: 700; +} +.comment.hidden .content, .comment.hidden .children { + display: none; +} +.morecomments { + margin: 10px 0px; + font-size: 10px; +} +.morecomments a { + color: #336699; + font-weight: bold; + text-decoration: none; +} +.morecomments a:hover { + text-decoration: underline; +} +.member { + display: inline-block; + margin-bottom:3px; +} +.member input { + font-size: 10px; + font-weight: bold; + display: inline-block; + padding: 1px 4px; + border-radius: 4px; + border: 1px solid #444444; + color: white; + position: relative; + bottom: 1px; + cursor: pointer; +} +.join input { + background-color: green; +} +.leave input { + background-color: #cf6165; +} +.pending input { + background-color: #369; +} +.left { + float: left; +} +.gray { + color: #808080; +} +.error { + color: red; + font-size: 13px; + padding: 10px; +} +.alert { + color: #8080FF; + font-size: 13px; + padding: 10px; +} +.green { + background-color: #efffc7; + width: 8px; + display: inline-block; + height: 8px; + margin: 0 2px; + border-radius: 50%; + border: 1px solid #78b04d; + position: relative; + top: 1px; +} +.pager { + margin: 10px; +} +.pager a { + padding: 1px 4px; + background: #eee; + border: 1px solid #ddd; + border-radius: 3px; + font-weight: bold; + text-decoration: none; + color: #369; +} +.buttons li { + display: inline; +} +.buttons, .buttons input { + font-weight: bold; + font-size: 10px; + padding: 0; +} +.comment .buttons { + margin: 8px 0px 3px 0px; +} +.comment.hidden .buttons { + display: none; +} +.expando blockquote, .comment blockquote { + margin: 5px 0 5px 15px; + border-left: 2px solid #c5c1ad; + padding: 0 8px; +} +.buttons a, .buttons form input { + text-decoration: none; + color: #888; + padding-right: 4px; +} +.buttons a:hover, .title a:hover, .buttons input:hover { + text-decoration: underline; +} +.entry { + overflow: hidden; + color: #888; +} + +.expando-button { + width: 23px; + height: 23px; + background-color: #ccccc9; + border-radius: 4px; + margin: 0px 4px 0px 0px; + cursor: pointer; + float:left; +} +.expando-button::before{ + content: "+"; + float: left; + position: relative; + color: #fff; + font-size: 16px; + left: 11px; + top: 3px; +} +.open.expando-button { + border-radius: 30px; +} +.open.expando-button::before { + content: "x"; + color: #fff; + left: 7px; + top: 0px; + font-weight: bold; + font-family: sans-serif; +} +.expando-button:hover{ + background-color: #466599; +} +.expando { + display: none; + max-width: 587px; + color: #000; +} +.expando.open{ + display: block; +} +.expando img { + max-width: 100%; +} +.expando > div { + background-color: #fafafa; + border: 1px solid #369; + border-radius: 7px; + padding: 5px 10px; + margin: 5px 0px; + font-size: 14px; + overflow: auto; +} +.dark .expando > div { + background-color: #262626; + color: #ddd; +} +.expando p, .comment p, .message p { + margin-top: 0; + margin-bottom: 2px; +} +.search { + font-size: 13px; + color: gray; + font-weight: 700; + margin: 10px 5px 20px 30px; + max-width: 605px; +} +.search .query { + white-space: nowrap; + padding-right: 142px; +} +.search .query input[type=text] { + width: 100%; + margin-bottom: 5px; +} +.search .query input { + font-size: 15px; + padding: 5px; +} +.search div:last-child input { + margin: 2px 0px; +} +.search label { + white-space: nowrap; +} + +#sideToggle { + text-align: right; +} +.side { + margin: 0 auto; + font-size: 12px; + width: 300px; + padding-right: 5px; + margin-bottom: 10px; +} +main { + position: relative; +} +@media (min-width: 900px) { + .side { + position: absolute; + top: 0; + right: 0; + } + main { + padding-right: 310px; + margin-left: 10px; + } +} +.side form { + margin: 0px 0px 5px 0px; +} +.side input[type=text] { + width: 285px; + padding: 6px; + margin: 0px; + font-size: 13px; + border: 1px solid gray; +} +.side .stats { + padding: 5px; + border: 1px solid #5f99cf; + background-color: #EFF7FF; + border-radius: 3px; +} +.dark .side .stats { + background-color: #393939; + border-color: #666; +} +.side .stats b span { + font-size: 22px; +} +.side .banner { + width: 100%; + height: 150px; + background-repeat: no-repeat; + background-size: contain; + background-position: center; + margin: 5px 0px; +} +.user.side b { + font-size: 18px; +} +.side .login { + border: 1px solid gray; + margin: 10px 0px; + padding: 0; + overflow: hidden; +} +.side .login input[type=text], +.side .login input[type=password] { + font-size: 11px; + border: 1px solid #999; + width: 125px; + margin: 5px 0px 0px 5px; + padding: 6px; +} +.side .login input[type=submit] { + margin: 5px; + float:right; +} +.create a div { + margin: 5px 0px; + background-color: #EFF7FF; + text-align: center; + padding: 5px; + border: 1px solid #369; +} +.dark .create a div { + background-color: #444444; + border: 0; +} +.create a div:hover { + background-color: #369; +} +.dark .create a div:hover { + background-color: #333333; +} +.create a { + font-weight: bold; + text-decoration: none; + font-size: 13px; + color: #369; +} +.dark .create a { + color: white; +} +.create a:hover { + color: white; +} +.dark .create a:hover{ + color: #1496dc; +} +.dark .create input[type=submit], +.dark .search .query input, +.dark .create input[type=file], +.dark .create select { + color: #fff; + border: 1px outset gray; + background-color: #4d4d4d; +} +h1, h2 { + margin: 5px 0px; +} +.age { + border-top: 1px solid black; + text-align: right; + color: #888; + padding: 2px 5px 0px 0px; + margin-bottom: 10px; +} +.age a { + text-decoration: none; + color: #369; +} +.moderators { + border: 1px solid black; + padding: 3px; + margin-bottom: 5px; +} +.moderators a { + text-decoration: none; + color: #369; +} +.dark .moderators a { + color: #6a98af; +} +.community { + margin: 20px 50px; + max-width: 840px; + position: relative; +} +.community .description { + padding: 2px 5px; + background-color: #fafafa; + border: 1px solid #CCC; + border-radius: 7px; + font-size: 14px; + margin-bottom: 3px; + max-height: 170px; + overflow: auto; +} +.dark .community .description { + background-color: #333; + color: #ddd; + border-color: #777; +} +.community .details { + margin-left: 36px; +} +nav { + border-bottom: 1px solid #5f99cf; + background-color: #cee3f8; + z-index: 99; + margin-bottom: 5px; + position: relative; +} +.dark nav { + background-color: #696969; +} + +nav .communities { + background-color: #f0f0f0; + color: gray; + padding: 3px; + white-space: nowrap; + overflow: hidden; + border-bottom: 1px solid gray; + text-transform: uppercase; + font-size: 9px; +} +nav .communities a { + margin: 0px 2px; +} +.dark nav .communities { + background-color: #cccccc; +} +.dark nav .communities a { + color: #000; +} +nav .communities a.more { + background-color: #f0f0f0; + color: black; + padding: 0px 5px; + font-weight: bold; + position: absolute; + right: 0; +} +.orangered, .orangered b { + color: orangered !important; +} + +nav a { + text-decoration: none; + color: black; +} +nav > a:hover { + text-decoration: underline; +} + +nav .title, nav > span { + font-size: 15px; + font-weight: 700; + margin: 0px 3px 0px 2.5px; + color: black; + text-decoration: none; + font-variant: small-caps; +} +.dark nav .title, .dark nav > span { + color: #8cb3d9;; +} +nav a.title { + margin-left: 70px; +} + +nav .host { + padding: 0px 3px 1px 3px; + font-size: 12px; +} + +nav .spacer { + height: 40px; + position: relative; +} +nav .space a { + z-index: 100; +} +nav .icon { + height: 54px; + width: 60px; + margin: 2px 5px; + background-repeat: no-repeat; + background-size: contain; + background-position: center bottom; +} +nav .icon img { + max-width:100%; + height:100%; +} + +nav ul { + white-space: nowrap; + list-style: none; + margin: 5px 2.5px 0px 2.5px; + padding: 0; + display: inline; + vertical-align: bottom; +} + +nav li { + margin: 0px 1px; + padding: 0px; + display: inline; + font-size: 12px; + font-weight: 700; +} + +nav ul a { + background-color: #eff7ff; + text-decoration: none; + color: #369; + padding: 2px 6px 0 6px; +} +.dark nav ul a { + background-color: #262626; + color: #6a98af; +} + +.selected { + font-weight: bold; +} + +nav .selected a { + color: orangered; + background-color: white; + border: 1px solid #5f99cf; + border-bottom: 1px solid white; +} +.dark nav .selected a { + border-bottom: 1px solid #262626; +} + +nav .right { + position: absolute; + right: 0px; + background-color: #EFF7FF; + padding: 4px 6px; + line-height: 12px; + border-bottom-left-radius: 7px; + color: gray; + font-size: 10px; + z-index: 101; +} +.dark nav .right { + background-color: #333333; +} +nav .right a.mailbox { + font-size: 21px; + position: relative; + top: 4px; + color: gray; +} +nav .right a, .right input[type=submit] { + color: #369; + text-decoration: none; +} +.dark nav .right a, .dark .right input[type=submit]{ + color: #8cb3d9; +} +nav .right form, .comment form, form.link-btn { + display: inline-block; + margin: 0; +} +nav .right form input, .comment .buttons input, form.link-btn input { + background-color: rgba(0, 0, 0, 0); + border: 0px; + font-size: unset; + font-family: unset; + cursor: pointer; + padding: 0; + margin: 0; +} + +.menu { + border-bottom: 1px dotted gray; + padding: 0px 0px 5px 20px; + color: gray; +} +.menu a { + margin: 0px 2.5px; + color: gray; + font-weight: bold; +} +.commentmenu .selected, .menu .selected { + color: black; + font-weight: bold; + text-decoration: none; +} +.dark .commentmenu .selected, .dark .menu .selected { + color: #ddd; +} +.dark .commentmenu a, .dark .menu { + color: #6a98af; +} +.warning { + background-color: #f6e69f; + border-color: #ffa500; + border-style: solid; + border-width: 1px; + padding: 5px 10px; + margin: 5px 10px; +} +.highlight { + background-color: #ffc; + padding-left: 5px; +} + +form.create { + width: 520px; +} + +form.create div { + margin: 10px 0px; + padding: 5px 5px 10px 5px; + background-color: #cee3f8; + border-radius: 4px; +} +.dark form.create div { + background-color: #181818 +} +form.create label { + display: block; + font-size: 18px; + font-weight: 400; +} + +form.create div > input, form.create div textarea { + width: 98%; +} +form.create input[type=checkbox] { + display: block; +} +form.create input[type=file], form.create select { + margin-top: 5px; +} + +.required::before { + content: "*"; + color: red; +} +.preferences div { + font-size: 13px; + margin: 10px; +} +.preferences label{ + display: inline-block; + width: 100px; + text-align: right; + +} +.preferences input[type=submit] { + margin-top:10px; +} +.signup { + margin: 0px 30px; +} +.signup h2 { + margin-bottom: 10px; +} +.signup > div { + float: left; + margin: 30px; +} +.signup > div:first-child { + border-right: 1px solid #e0e0e0; + padding-right: 60px; +} +.root label, .signup label { + font-size: 15px; +} +.signup label div { + margin-bottom: 5px; +} +.root { + margin: 30px; +} +.root input, .signup input { + font-size: 15px; + padding: 6px 12px; + border: 1px solid #ccc; + border-radius: 4px; +} +.root input[type="text"] { + width: 300px; +} +.signup input[type=submit] { + margin-top: 20px; + float: right; +} +.signup .question { + max-width: 500px; + font-size: 13px; +} diff --git a/public/text.png b/public/text.png new file mode 100644 index 0000000..564a031 Binary files /dev/null and b/public/text.png differ diff --git a/public/utils.js b/public/utils.js new file mode 100644 index 0000000..4bdffbc --- /dev/null +++ b/public/utils.js @@ -0,0 +1,91 @@ +function request(url, params, callback) { + var xmlHttp = new XMLHttpRequest(); + xmlHttp.onreadystatechange = function() { + if (xmlHttp.readyState == 4 && xmlHttp.status == 200) + callback(xmlHttp.responseText); + } + var method = "GET" + if (params) method = "POST" + xmlHttp.open(method, url, true); + if (method = "POST") + xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); + xmlHttp.send(params); +} +function postClick(e) { + console.log(e) + e = e || window.event; + if (e.target.className.indexOf("expando-button") == -1) { return } + var targ = e.currentTarget || e.srcElement || e; + if (targ.nodeType == 3) targ = targ.parentNode; + var bdy = targ.getElementsByClassName("expando")[0] + var btn = targ.getElementsByClassName("expando-button")[0] + console.log(bdy.style.display) + console.log(bdy.style.display.indexOf("block")) + if (bdy.className.indexOf("open")>-1) { + bdy.className = 'expando'; + btn.className = "expando-button" + } else { + bdy.className = 'expando open'; + btn.className = "expando-button open" + } +} +function commentClick(e) { + e = e || window.event; + var targ = e.currentTarget || e.srcElement || e; + if (targ.nodeType == 3) targ = targ.parentNode; + if (e.target.name=="vote") { + e.preventDefault() + var form = e.target.parentNode + if (form) { + data = new FormData(form) + if (("c"+data.get("commentid")) != targ.id) { return } + params = new URLSearchParams(data).toString() + params += "&" + e.target.name + "=" + e.target.value + params += "&xhr=1" + request(targ.target, params, function(res){ + targ.outerHTML = res + }) + } + return false + } + if (e.target.className.indexOf("minimize") != -1) { + if (e.target.getAttribute("for") != targ.id) { return } + e.preventDefault() + var btn = targ.getElementsByClassName("minimize")[0] + var children = targ.getElementsByClassName("children")[0] + if (targ.className.indexOf("hidden") == -1) { + targ.className = "comment hidden" + btn.innerHTML = "[+]" + } else { + targ.className = "comment" + btn.innerHTML = "[-]" + } + return false + } + if ((e.target.className.indexOf("loadmore") != -1) || + (e.target.className.indexOf("edit") != -1) || + (e.target.className.indexOf("source") != -1) || + (e.target.className.indexOf("reply") != -1)) { + var id = targ.id + if (e.target.getAttribute("for") != id) { return } + e.preventDefault() + request(e.target.href+"&xhr",false, function(res){ + targ.outerHTML = res + }) + return false + } +} +function formSubmit(e) { + e = e || window.event; + var targ = e.currentTarget || e.srcElement || e; + console.log(e) + e.preventDefault() + var data = new FormData(targ) + params = new URLSearchParams(data).toString() + params += "&" + e.submitter.name + "=" + e.submitter.value + params += "&xhr=1" + request(targ.target, params, function(res){ + targ.outerHTML = res + }) + return false +} diff --git a/routes.go b/routes.go index 7d397aa..3f801ea 100644 --- a/routes.go +++ b/routes.go @@ -169,6 +169,7 @@ func Initialize(Host string, r *http.Request) (State, error) { } state.Listing = getCookie(r, "DefaultListingType") state.Sort = getCookie(r, "DefaultSortType") + state.Dark = getCookie(r, "Dark") != "" state.ParseQuery(r.URL.RawQuery) if state.Sort == "" { state.Sort = "Hot" @@ -480,6 +481,13 @@ func Settings(w http.ResponseWriter, r *http.Request, ps httprouter.Params) { for _, name := range []string{"DefaultSortType", "DefaultListingType"} { setCookie(w, name, r.FormValue(name)) } + if r.FormValue("darkmode") != "" { + setCookie(w, "Dark", "1") + state.Dark = true + } else { + deleteCookie(w, "Dark") + state.Dark = false + } state.Listing = r.FormValue("DefaultListingType") state.Sort = r.FormValue("DefaultSortType") case "GET": @@ -600,7 +608,7 @@ func Search(w http.ResponseWriter, r *http.Request, ps httprouter.Params) { return } if state.CommunityName != "" { - state.GetCommunity(ps.ByName("community")) + state.GetCommunity(state.CommunityName) } if state.UserName != "" { state.GetUser(state.UserName) @@ -744,8 +752,7 @@ func UserOp(w http.ResponseWriter, r *http.Request, ps httprouter.Params) { fmt.Println(err) } case "create_post": - state.CommunityName = r.FormValue("communityname") - state.GetCommunity("") + state.GetCommunity(state.CommunityName) state.GetSite() if state.Community == nil { state.Status = http.StatusBadRequest diff --git a/state.go b/state.go index 9fcd5ca..0c8e11c 100644 --- a/state.go +++ b/state.go @@ -87,6 +87,7 @@ type State struct { Query string SearchType string Captcha *types.CaptchaResponse + Dark bool } func (p State) SortBy(v string) string { diff --git a/templates/frontpage.html b/templates/frontpage.html index fa1611a..ed38c8a 100644 --- a/templates/frontpage.html +++ b/templates/frontpage.html @@ -2,10 +2,10 @@ {{ if and .Community (ne .Community.CommunityView.Community.Title "")}}{{.Community.CommunityView.Community.Title}}{{else if ne .CommunityName ""}}/c/{{.CommunityName}}{{ else if .User}}overview for {{.User.PersonView.Person.Name}}{{else}}{{ host .Host }}{{end}} - + - +