client to server conversion

author: FChannel <=> 2021-01-22 21:12:26 -0800
committer: FChannel <=> 2021-01-22 21:12:26 -0800
commit: 2566e314e8351ffbceae9a2688d90a5c811d49e5 (patch)
tree: e802622593c540265e464beecf76696b65e229ed /static
parent: 626fee35bacd68baf6e9bb38ca71d88fff700b13 (diff)
15 files changed, 1197 insertions, 0 deletions
diff --git a/static/admin.html b/static/admin.html
new file mode 100644
index 0000000..f7db70c
--- /dev/null
+++ b/static/admin.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title></title>
+  </head>
+  <body>
+    <div style="margin: 0 auto; width: 400px;">
+      <h3>Add Board</h3>
+      <form id="new-post" action="/{{ .Key }}/addboard" method="post" enctype="application/x-www-form-urlencoded">
+        <label>Name:</label><br>
+        <input type="text" name="name" placeholder="g" required><br>
+        <label>Prefered Name:</label><br>
+        <input type="text" name="prefname" placeholder="Technology" required><input type="submit" value="Add"><br>
+        <label>Summary:</label><br>
+        <textarea name="summary" rows="8" cols="50"></textarea><br>
+        <label>Restricted:</label><br>
+        <select name="restricted">
+          <option value="True">True</option>
+          <option value="False">False</option>          
+        </select>
+      </form>
+
+      <ul style="display: inline-block; padding: 0;">
+        <li style="display: inline-block;"><a href="javascript:show('following')">Subscribed</a></li>
+        <!-- <li style="display: inline-block;"><a href="javascript:show('followers')">Followers</a></li> -->
+        <li style="display: inline-block;"><a href="javascript:show('reported')">Reported</a></li>            
+      </ul>
+
+    </div>    
+
+    <div id="following">
+      <h4>Following</h4>
+      <form id="follow-form" action="/{{ .Key }}/follow" method="post" enctype="application/x-www-form-urlencoded">
+        <label>Subscribe:</label><br>
+        <input id="follow" name="follow" style="margin-bottom: 12px;" placeholder="http://localhost:3000/g"></input><input type="submit" value="Subscribe"><br>
+        <input type="hidden" name="actor" value="{{ .Actor }}">        
+      </form>
+      <ul style="display: inline-block; padding: 0; margin: 0;">
+        {{ $actor := .Actor }}
+        {{ $key := .Key }}
+        {{ range .Following }}
+        <li><a href="/{{ $key }}/follow?follow={{ . }}&actor={{ $actor }}">[Unfollow]</a><a href="{{ . }}">{{ . }}</a></li>
+        {{ end }}
+      </ul>
+    </div>
+
+    <div id="followers" style="display: none;">
+      <h4>Followers</h4>
+      <ul style="display: inline-block; padding: 0; margin: 0;">
+        {{ range .Followers }}
+        <li><a href="http://localhost:3000/g">{{ . }}</a></li>
+        {{ end }}        
+      </ul>      
+    </div>
+
+    <div id="reported" style="display: none;">
+      <h4>Reported</h4>
+      <ul style="display: inline-block; padding: 0; margin: 0;">
+      </ul>            
+    </div>
+  </body>
+</html>
+
+<script>
+  function show(element)
+  {
+      var following = document.getElementById("following");
+      // var followers = document.getElementById("followers");
+      var reported = document.getElementById("reported");
+
+      following.style.display = "none";
+      // followers.style.display = "none";
+      reported.style.display = "none";
+
+      document.getElementById(element).style.display = "block";
+  }
+</script>
diff --git a/static/bottom.html b/static/bottom.html
new file mode 100644
index 0000000..0542c41
--- /dev/null
+++ b/static/bottom.html
@@ -0,0 +1,23 @@
+{{ define "bottom" }}
+<div id="reply-box" style="display: none; ">
+  <div id="reply-header" style="display: inline-block; width: 370px; z-index: 0; cursor: move;"></div><div id="reply-close" style="display: inline-block; float: right;"><a href="javascript:closeReply()">[X]</a></div>
+  <form id="reply-post" action="/post" method="post" enctype="multipart/form-data">
+    <input id="reply-name" name="name" size="43" type="text" placeholder="Name">
+    <input id="reply-options" name="options" size="43" type="text" placeholder="Options">
+    <textarea id="reply-comment" name="comment" rows="12" cols="54" style="width: 396px;"></textarea>
+    <input id="reply-file" name="file" type="file">
+    <input id="reply-submit" type="submit" value="Reply" style="float: right;">
+    <input type="hidden" id="inReplyTo-box" name="inReplyTo" value="{{ .Board.InReplyTo }}">
+    <input type="hidden" id="sendTo" name="sendTo" value="{{ .Board.To }}">
+    <input type="hidden" id="boardName" name="boardName" value="{{ .Board.Name }}">
+    <input type="hidden" id="captchaCode" name="captchaCode" value="{{ .Board.CaptchaCode }}">
+    <div style="width: 202px; margin: 0 auto; padding-top: 12px;">
+      <label for="captcha">Captcha:</label><br>      
+      <input style="display: inline-block;"  type="text" id="captcha" name="captcha" autocomplete="off"><br>
+    </div>
+    <div style="width: 230px; margin: 0 auto;">
+      <img src="{{ .Board.Captcha }}">
+    </div>
+  </form>
+</div>
+{{ end }}
diff --git a/static/catalog.html b/static/catalog.html
new file mode 100644
index 0000000..b5b361e
--- /dev/null
+++ b/static/catalog.html
@@ -0,0 +1,189 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>{{ .Title }}</title>
+  </head>
+  <style>
+    a, a:link, a:visited, a:hover, a:active {
+        text-decoration: none
+    }
+
+    a:link, a:visited,  a:active {
+        color: black;
+    }
+
+    a:hover {
+        color: #de0808;
+    }
+  </style>
+  <script>
+
+    function getMIMEType(type)
+    {
+        re = /\/.+/g
+        return type.replace(re, "")
+    }
+    
+    function shortURL(url)
+    {
+        var check = url.replace("{{.Board.Actor}}/", "")
+        re = /.+\//g;
+        temp = re.exec(url)
+        if(temp[0] == "{{ .Board.Actor }}/")
+        {
+            var short = url.replace("https://", "");
+            short = short.replace("http://", "");
+            short = short.replace("www.", "");
+
+            var re = /^.{3}/g;
+
+            var u = re.exec(short);
+
+            re = /\w+$/g;              
+
+            u =  re.exec(short);
+
+            return u;            
+        }else{
+            var short = url.replace("https://", "");
+            short = short.replace("http://", "");
+            short = short.replace("www.", "");
+
+            var re = /^.{3}/g;
+
+            var u = re.exec(short);
+
+            re = /\w+$/g;              
+
+            u =  re.exec(short);
+
+
+            replace = short.replace(/\/+/g, " ")
+            replace = replace.replace(u, " ").trim()
+            re = /\w+$/;
+            v = re.exec(replace)
+
+            v = "f" + v[0] + "-" + u
+
+            return v;                        
+        }
+    }        
+
+  </script>
+  <body style="background-color: #eef2fe;">
+    <ul id="top" style="padding:0; display: inline;">
+      {{range .Boards}}
+      <li style="display: inline;"><a href="{{.Location}}">{{.Name }}</a></li>
+      {{end}}
+    </ul>
+    {{ $board := .Board }}
+    {{ if $board.IsMod }}
+    <span style="float: right;"><a href="/{{ .Key }}/{{ .Board.Name }}">[Manage Board]</a></span>
+    {{ end }}        
+    <div style="margin: 0 auto; width: 400px; margin-bottom: 100px;">
+      <h1 style="color: #af0a0f;">/{{ $board.Name }}/ - {{ $board.PrefName }}</h1>
+      <form id="new-post" action="/post" method="post" enctype="multipart/form-data">
+        <label for="name">Name:</label><br>
+        <input type="text" id="name" name="name" placeholder="Anonymous"><br>
+        <label for="options">Options:</label><br>
+        <input type="text" id="options" name="options"><br>
+        <label for="subject">Subject:</label><br>      
+        <input type="text" id="subject" name="subject"><input type="submit" value="Post"><br>
+        <label for="comment">Comment:</label><br>
+        <textarea rows="10" cols="50" id="comment" name="comment"></textarea><br>
+        <input type="hidden" id="inReplyTo" name="inReplyTo" value="{{ $board.InReplyTo }}">
+        <input type="hidden" id="sendTo" name="sendTo" value="{{ $board.To }}">
+        <input type="hidden" id="boardName" name="boardName" value="{{ $board.Name }}">
+        <input type="hidden" id="captchaCode" name="captchaCode" value="{{ $board.CaptchaCode }}">                
+        <input type="file" id="file" name="file"><br><br>
+        <label stye="display: inline-block;" for="captcha">Captcha:</label><br>      
+        <input style="display: inline-block;"  type="text" id="captcha" name="captcha"><br>
+        <div style="height: 65px;">
+          <img src="{{ $board.Captcha }}">
+        </div>                
+      </form>
+    </div>
+
+    <hr>
+    <ul style="margin: 0; padding: 0; display: inline">
+      <li style="display: inline"><a href="/{{ $board.Name }}">[Return]</a></li>
+      <li style="display: inline"><a href="#bottom">[Bottom]</a></li>
+      <li style="display: inline"><a href="javascript:location.reload()">[Refresh]</a></li>
+    </ul>    
+    <hr>    
+    
+    <div style="padding: 10px; text-align: center;">
+      {{ range .Posts }}
+      <div style="overflow: hidden; vertical-align: top; margin: 0 auto; display: inline-block; width: 180px; max-height: 320px; margin-bottom: 10px;">
+        {{ if $board.IsMod }}        
+        <a href="/delete?id={{ .Id }}">[Delete Post]</a>
+        {{ end }}
+        {{ if .Attachment }}
+        {{ if $board.IsMod }}        
+        <a href="/deleteattach?id={{ .Id }}">[Delete Attachment]</a>
+        {{ end }}        
+        <a id="{{ .Id }}-anchor" href="/{{ $board.Name }}/">
+          <div id="media-{{ .Id }}"></div>
+          <script>
+            media = document.getElementById("media-{{ .Id }}")
+            if(getMIMEType({{ (index .Attachment 0).MediaType }}) == "image"){
+                var img = document.createElement("img");
+                img.style = "float: left; margin-right: 10px; margin-bottom: 10px; max-width: 150px; max-height: 150px; cursor: move;"
+                img.setAttribute("id", "img")
+                img.setAttribute("main", "1")
+                img.setAttribute("src", "{{ (index .Attachment 0).Href }}")
+                media.appendChild(img)
+            }                                
+
+            if(getMIMEType({{ (index .Attachment 0).MediaType }}) == "audio"){
+                var audio = document.createElement("audio")
+                audio.controls = 'controls'
+                audio.muted    = 'muted'              
+                audio.src      = '{{ (index .Attachment 0).Href }}'
+                audio.type     = '{{ (index .Attachment 0).MediaType }}'              
+                audio.style = "float: left; margin-right: 10px; margin-bottom: 10px; width: 150px;"
+                audio.innerText = 'Audio is not supported.'
+                media.appendChild(audio)                            
+            }
+
+            if(getMIMEType({{ (index .Attachment 0).MediaType }}) == "video"){
+                var video = document.createElement("video")
+                video.controls = 'controls'
+                video.muted    = 'muted'              
+                video.src      = '{{ (index .Attachment 0).Href }}'
+                video.type     = '{{ (index .Attachment 0).MediaType }}'              
+                video.style = "float: left; margin-right: 10px; margin-bottom: 10px; width: 150px;"
+                video.innerText = 'Video is not supported.'
+                media.appendChild(video)                                          
+            }                    
+          </script>                        
+
+
+        {{ end }}
+        <div>
+        {{ $replies := .Replies }}
+        <span style="display: block">R: {{ $replies.TotalItems }}{{ if $replies.TotalImgs }}/ A: {{ $replies.TotalImgs }}{{ end }}</span>
+        {{ if .Name }}
+        <span style="display: block; color: #0f0c5d;"><b>{{ .Name }}</b></span>
+        {{ end }}
+        {{ if .Content }}
+        <span style="display: block">{{.Content}}</span>
+        {{ end }}
+        </div>
+        </a>        
+      </div>
+      <script>
+        document.getElementById("{{ .Id }}-anchor").href = "/{{ $board.Name }}/" + shortURL("{{ .Id }}")
+      </script>
+      {{ end }}
+    </div>
+    <hr>
+    <ul style="margin: 0; padding: 0; display: inline">
+      <li style="display: inline"><a href="/{{ $board.Name }}">[Return]</a></li>
+      <li style="display: inline"><a id="bottom" href="#top">[Top]</a></li>
+      <li style="display: inline"><a href="javascript:location.reload()">[Refresh]</a></li>
+    </ul>
+    <hr>    
+  </body>
+</html>
+
diff --git a/static/index.html b/static/index.html
new file mode 100644
index 0000000..2840a83
--- /dev/null
+++ b/static/index.html
@@ -0,0 +1,14 @@
+{{ define "header" }}
+{{ end }}
+
+{{ define "top" }}{{ end }}
+{{ define "content" }}
+<div style="text-align: center; max-width: 800px; margin: 0 auto;">
+  <h1>{{ .Title }}</h1>
+  <p style="text-align: justify">{{.Message}}</p>
+</div>
+{{ end }}
+{{ define "bottom" }}{{ end }}
+
+{{ define "script" }}
+{{ end }}
diff --git a/static/js/footerscript.js b/static/js/footerscript.js
new file mode 100644
index 0000000..bd36daa
--- /dev/null
+++ b/static/js/footerscript.js
@@ -0,0 +1,40 @@
+var imgs = document.querySelectorAll('#img');
+var imgArray = [].slice.call(imgs);
+
+imgArray.forEach(function(img, i){
+    img.addEventListener("click", function(e){
+        if(img.getAttribute("enlarge") == "0")
+        {
+            var attachment = img.getAttribute("attachment")
+            img.setAttribute("enlarge", "1");
+            img.setAttribute("style", "float: left; margin-right: 10px; cursor: move;");
+            img.src = attachment
+        }
+        else
+        {
+            var preview = img.getAttribute("preview")
+            img.setAttribute("enlarge", "0");
+            if(img.getAttribute("main") == 1)
+            {
+                img.setAttribute("style", "float: left; margin-right: 10px; max-width: 250px; max-height: 250px; cursor: move;");
+                img.src = preview
+            }
+            else
+            {
+                img.setAttribute("style", "float: left; margin-right: 10px; max-width: 125px; max-height: 125px; cursor: move;");
+                img.src = preview                
+            }
+        }
+    });
+})
+
+
+function viewLink(board, actor) {
+    var posts = document.querySelectorAll('#view');
+    var postsArray = [].slice.call(posts);
+
+    postsArray.forEach(function(p, i){
+        var id = p.getAttribute("post")
+        p.href = "/" + board + "/" + shortURL(actor, id)
+    })  
+}
diff --git a/static/js/posts.js b/static/js/posts.js
new file mode 100644
index 0000000..7c1a3e8
--- /dev/null
+++ b/static/js/posts.js
@@ -0,0 +1,239 @@
+function newpost()
+{
+    var el = document.getElementById("newpostbtn")
+    var state = el.getAttribute("state")
+    if(state = "0")
+    {
+        el.style="display:none;"
+        el.setAttribute("state", "1")
+        document.getElementById("newpost").style = "display: block;";        
+    }
+    else
+    {
+        el.style="display:block;"
+        el.setAttribute("state", "0")
+        document.getElementById("newpost").style = "display: hidden;";        
+    }
+}
+
+function getMIMEType(type)
+{
+    re = /\/.+/g
+    return type.replace(re, "")
+}
+
+function shortURL(actorName, url)
+{
+    var check = url.replace(actorName + "/", "")
+    re = /.+\//g;
+    temp = re.exec(url)
+    
+
+    if(stripTransferProtocol(temp[0]) == stripTransferProtocol(actorName) + "/")
+    {
+        var short = url.replace("https://", "");
+        short = short.replace("http://", "");
+        short = short.replace("www.", "");
+
+        var re = /^.{3}/g;
+
+        var u = re.exec(short);
+
+        re = /\w+$/g;              
+
+        u =  re.exec(short);
+
+        return u;            
+    }else{
+
+        var short = url.replace("https://", "");
+        short = short.replace("http://", "");
+        short = short.replace("www.", "");
+
+        var re = /^.{3}/g;
+
+        var u = re.exec(short);
+
+        re = /\w+$/g;              
+
+        u =  re.exec(short);
+
+
+        replace = short.replace(/\/+/g, " ")
+        replace = replace.replace(u, " ").trim()
+        re = /\w+$/;
+        v = re.exec(replace)
+
+        v = "f" + v[0] + "-" + u
+
+        return v;                        
+    }
+}
+
+function shortImg(url)
+{
+    var u = url;
+    if(url.length > 26)
+    {
+        var re = /^.{26}/g;
+
+        u = re.exec(url);
+
+        re = /\..+$/g;
+
+        var v = re.exec(url);
+
+        u += "(...)" + v;
+    }
+    return u;        
+}            
+
+function convertSize(size)
+{
+    var convert = size / 1024.0;
+    if(convert > 1024)
+    {
+        convert = convert / 1024.0
+        convert = convert.toFixed(2) + " MB"
+    }
+    else
+    {
+        convert = convert.toFixed(2) + " KB"
+    }
+
+    return convert
+}
+
+function getBoardId(url)
+{
+    var re = /\/([^/\n]+)(.+)?/gm
+    var matches = re.exec(url);
+    return matches[1]
+}
+
+function convertContent(actorName, content, opid)
+{
+    var re = /(>>)(https:\/\/|http:\/\/)?(www\.)?.+\/\w+/gm;
+    var match = content.match(re);
+    var newContent = content;
+    if(match)
+    {
+        match.forEach(function(quote, i){
+            var link = quote.replace('>>', '')
+            var isOP = ""
+            if(link == opid)
+            {
+                isOP = " (OP)";
+            }
+            
+            newContent = newContent.replace(quote, '<a title="' + link +  '" href="/'+ getBoardId(actorName) + "/" + shortURL(actorName, opid)  +  '#' + shortURL(actorName, link) + '"style="color:#af0a0f;">>>' + shortURL(actorName, link)  + isOP + '</a>');
+
+        })            
+    }
+    
+    re =  /^>.+/gm;
+
+    match = newContent.match(re);
+    if(match)
+    {
+        match.forEach(function(quote, i) {
+            newContent = newContent.replace(quote, '<span style="color: green;">' + quote + '</span>');
+        })
+    }
+    
+    return newContent
+}
+
+function closeReply()
+{
+    document.getElementById("reply-box").style.display = "none";
+    document.getElementById("reply-comment").value = "";        
+}
+
+
+function previous(actorName, page)
+{
+    var prev = parseInt(page) - 1;
+    if(prev < 0)
+        prev = 0;
+    window.location.href = "/" + actorName + "/" + prev;
+}
+
+function next(actorName, totalPage, page)
+{
+    var next = parseInt(page) + 1;
+    if(next > parseInt(totalPage))
+        next = parseInt(totalPage);
+    window.location.href = "/" + actorName + "/" + next;
+}
+
+function quote(actorName, opid, id)
+{
+    var box = document.getElementById("reply-box");
+    var header = document.getElementById("reply-header");
+    var comment = document.getElementById("reply-comment");
+    var inReplyTo = document.getElementById("inReplyTo-box");      
+
+    var w = window.innerWidth / 2 - 200;
+    var h = document.getElementById(id + "-content").offsetTop - 448;
+
+    box.setAttribute("style", "display: block; position: absolute; background-color: #eff5ff; width: 400px; height: 550px; z-index: 9; top: " + h + "px; left: " + w + "px; padding: 5px; border: 4px solid #d3caf0;");
+
+
+    if (inReplyTo.value != opid)
+        comment.value = "";
+    
+    header.innerText = "Replying to Thread No. " + shortURL(actorName, opid);
+    inReplyTo.value = opid;
+
+    if(comment.value != "")
+        comment.value += "\n>>" + id;
+    else
+        comment.value += ">>" + id;
+
+    dragElement(header);            
+
+}  
+
+function dragElement(elmnt) {
+    var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
+    
+    elmnt.onmousedown = dragMouseDown;
+
+    function dragMouseDown(e) {
+        e = e || window.event;
+        e.preventDefault();
+        // get the mouse cursor position at startup:
+        pos3 = e.clientX;
+        pos4 = e.clientY;
+        document.onmouseup = closeDragElement;
+        // call a function whenever the cursor moves:
+        document.onmousemove = elementDrag;
+    }
+
+    function elementDrag(e) {
+        e = e || window.event;
+        e.preventDefault();
+        // calculate the new cursor position:
+        pos1 = pos3 - e.clientX;
+        pos2 = pos4 - e.clientY;
+        pos3 = e.clientX;
+        pos4 = e.clientY;
+        // set the element's new position:
+        elmnt.parentElement.style.top = (elmnt.parentElement.offsetTop - pos2) + "px";
+        elmnt.parentElement.style.left = (elmnt.parentElement.offsetLeft - pos1) + "px";
+    }
+
+    function closeDragElement() {
+        // stop moving when mouse button is released:
+        document.onmouseup = null;
+        document.onmousemove = null;
+    }
+}
+
+function stripTransferProtocol(value){
+    var re = /(https:\/\/|http:\/\/)?(www.)?/
+
+    return value.replace(re, "")
+}
+
diff --git a/static/main.html b/static/main.html
new file mode 100644
index 0000000..f4007d1
--- /dev/null
+++ b/static/main.html
@@ -0,0 +1,42 @@
+{{ define "layout" }}
+<!DOCTYPE html>
+<html>
+  <meta name="viewport" content="width=device-width, initial-scale=1">      
+  <head>
+    <title>{{ .Title }}</title>
+    <style>
+      a, a:link, a:visited, a:hover, a:active {
+          text-decoration: none
+      }
+
+      a:link, a:visited,  a:active {
+          color: black;
+      }
+
+      a:hover {
+          color: #de0808;
+      }
+    </style>
+    {{ template "header" . }}    
+  </head>
+  <body style="background-color: #eef2fe;">    
+    <ul style="display: inline; padding:0;">
+      {{range .Boards}}
+      <li style="display: inline;"><a href="{{.Location}}">{{.Name}}</a></li>
+      {{end}}
+    </ul>
+    {{ if .Board.ModCred }}
+    {{ if eq .Board.ModCred .Board.Domain .Board.Actor }}
+    <span style="float: right;"><a href="/{{ .Key }}/{{ .Board.Name }}">[Manage Board]</a></span>
+    {{ end }}
+    {{ end }}
+    {{ template "top" . }}
+    
+    {{ template "content" . }}
+    
+    {{ template "bottom" . }}
+  </body>
+</html>
+
+{{ template "script" . }}
+{{ end }}
diff --git a/static/manage.html b/static/manage.html
new file mode 100644
index 0000000..43ff766
--- /dev/null
+++ b/static/manage.html
@@ -0,0 +1,81 @@
+{{ define "title" }}{{ .Title }}{{ end }}
+{{ define "header" }}
+<script src="/static/js/posts.js"></script>
+{{ end }}
+{{ define "top" }}{{ end }}
+{{ define "content" }}
+<div style="text-align: center; margin: 0 auto; width: 400px;">
+  <h1>Manage /{{ .Board.Name }}/</h1>
+  <!-- <div><a href="/{{ .Key }}/deleteboard?name={{ .Board.Name }}">[Delete Board]</a></div>     -->
+  <ul style="display: inline-block; padding: 0;">
+    <li style="display: inline-block;"><a href="javascript:show('following')">[ Subscribed ]</a></li>
+    <li style="display: inline-block;"><a href="javascript:show('followers')">[ Subscribers ]</a></li>
+    <li style="display: inline-block;"><a href="javascript:show('reported')">[ Reported ]</a></li>            
+  </ul>
+</div>    
+<a href="/{{ .Board.Name }}">[Return]</a>
+<div id="following">
+  <h4>Subscribed</h4>
+  <form id="follow-form" action="/{{ .Key }}/{{ .Board.Name }}/follow" method="post" enctype="application/x-www-form-urlencoded">  
+    <label>Subscribe:</label><br>
+    <input id="follow" name="follow" style="margin-bottom: 12px;" placeholder="https://localhost:3000/g"></input>
+    <input type="submit" value="Subscribe"><br>
+    <input type="hidden" name="actor" value="{{ .Actor }}">            
+  </form>
+  <ul style="display: inline-block; padding: 0; margin: 0;">
+    {{ $actor := .Actor }}
+    {{ $board := .Board }}
+    {{ $key := .Key }}
+    {{ range .Following }}
+    <li><a href="/{{ $key }}/{{ $board.Name }}/follow?follow={{ . }}&actor={{ $actor }}">[Unsubscribe]</a><a href="{{ . }}">{{ . }}</a></li>
+    {{ end }}
+  </ul>
+</div>
+
+<div id="followers" style="display: none;">
+  <h4>Subscribers</h4>
+  <ul style="display: inline-block; padding: 0; margin: 0;">
+    {{ range .Followers }}
+    <li><a href="{{ . }}">{{ . }}</a></li>
+    {{ end }}        
+  </ul>      
+</div>
+
+<div id="reported" style="display: none;">
+  <h4>Reported</h4>
+  <ul style="display: inline-block; padding: 0; margin: 0;">
+
+    {{ $domain := .Domain }}
+    {{ range .Reported }}
+    <li><a id="rpost" post="{{ .ID }}" href=""></a> - <b>{{ .Count }}</b> <a href="/delete?id={{ .ID }}&board={{ $board.Name }}">[Remove Post]</a> <a href="/deleteattach?id={{ .ID }}">[Remove Attachment]</a> <a href="/report?id={{ .ID }}&close=1&board={{ $board.Name }}">[Close]</a></li>
+    {{ end }}
+  </ul>            
+</div>
+{{ end }}
+{{ define "bottom" }}{{ end }}
+
+{{ define "script" }}
+<script>
+  function show(element)
+  {
+      var following = document.getElementById("following");
+      var followers = document.getElementById("followers");
+      var reported = document.getElementById("reported");
+
+      following.style.display = "none";
+      followers.style.display = "none";
+      reported.style.display = "none";
+
+      document.getElementById(element).style.display = "block";
+  }
+
+  var reported = document.querySelectorAll('#rpost');
+  var reportedArray = [].slice.call(reported);
+
+  reportedArray.forEach(function(r, i){
+      var id = r.getAttribute("post")
+      r.innerText = "/" + {{ .Board.Name }} + "/" + shortURL("{{ .Actor }}", id)
+      r.href = {{ .Domain }} + "/" + {{ .Board.Name }} + "/" + shortURL("{{ .Actor }}", id)
+  })  
+</script>
+{{ end }}
diff --git a/static/nadmin.html b/static/nadmin.html
new file mode 100644
index 0000000..0583efc
--- /dev/null
+++ b/static/nadmin.html
@@ -0,0 +1,76 @@
+{{ define "title" }}{{ .Title }}{{ end }}
+{{ define "header" }} {{ end }}
+{{ define "top" }}{{ end }}
+{{ define "content" }}
+<div style="margin: 0 auto; width: 400px;">
+  <h3>Add Board</h3>
+  <form id="new-post" action="/{{ .Key }}/addboard" method="post" enctype="application/x-www-form-urlencoded">
+    <label>Name:</label><br>
+    <input type="text" name="name" placeholder="g" required><br>
+    <label>Prefered Name:</label><br>
+    <input type="text" name="prefname" placeholder="Technology" required><input type="submit" value="Add"><br>
+    <label>Summary:</label><br>
+    <textarea name="summary" rows="8" cols="50"></textarea><br>
+    <label>Restricted:</label><br>
+    <select name="restricted">
+      <option value="True">True</option>
+      <option value="False">False</option>          
+    </select>
+  </form>
+
+  <ul style="display: inline-block; padding: 0;">
+    <li style="display: inline-block;"><a href="javascript:show('following')">Subscribed</a></li>
+    <!-- <li style="display: inline-block;"><a href="javascript:show('followers')">Followers</a></li> -->
+    <li style="display: inline-block;"><a href="javascript:show('reported')">Reported</a></li>            
+  </ul>
+</div>    
+
+<div id="following">
+  <h4>Following</h4>
+  <form id="follow-form" action="/{{ .Key }}/follow" method="post" enctype="application/x-www-form-urlencoded">
+    <label>Subscribe:</label><br>
+    <input id="follow" name="follow" style="margin-bottom: 12px;" placeholder="http://localhost:3000/g"></input><input type="submit" value="Subscribe"><br>
+    <input type="hidden" name="actor" value="{{ .Actor }}">        
+  </form>
+  <ul style="display: inline-block; padding: 0; margin: 0;">
+    {{ $actor := .Actor }}
+    {{ $key := .Key }}
+    {{ range .Following }}
+    <li><a href="/{{ $key }}/follow?follow={{ . }}&actor={{ $actor }}">[Unfollow]</a><a href="{{ . }}">{{ . }}</a></li>
+    {{ end }}
+  </ul>
+</div>
+
+<div id="followers" style="display: none;">
+  <h4>Followers</h4>
+  <ul style="display: inline-block; padding: 0; margin: 0;">
+    {{ range .Followers }}
+    <li><a href="http://localhost:3000/g">{{ . }}</a></li>
+    {{ end }}        
+  </ul>      
+</div>
+
+<div id="reported" style="display: none;">
+  <h4>Reported</h4>
+  <ul style="display: inline-block; padding: 0; margin: 0;">
+  </ul>            
+</div>
+{{ end }}
+{{ define "bottom" }}{{ end }}
+
+{{ define "script" }}
+<script>
+  function show(element)
+  {
+      var following = document.getElementById("following");
+      // var followers = document.getElementById("followers");
+      var reported = document.getElementById("reported");
+
+      following.style.display = "none";
+      // followers.style.display = "none";
+      reported.style.display = "none";
+
+      document.getElementById(element).style.display = "block";
+  }
+</script>
+{{ end }}
diff --git a/static/ncatalog.html b/static/ncatalog.html
new file mode 100644
index 0000000..a57e291
--- /dev/null
+++ b/static/ncatalog.html
@@ -0,0 +1,93 @@
+{{ define "header" }}
+<script src="/static/js/posts.js"></script>
+{{ end }}
+
+{{ define "content" }}
+{{ $board := .Board }}
+<hr>
+<ul style="margin: 0; padding: 0; display: inline">
+  <li style="display: inline"><a href="/{{ $board.Name }}">[Return]</a></li>
+  <li style="display: inline"><a href="#bottom">[Bottom]</a></li>
+  <li style="display: inline"><a href="javascript:location.reload()">[Refresh]</a></li>
+</ul>    
+<hr>
+
+<div style="padding: 10px; text-align: center;">
+  {{ range .Posts }}
+  <div style="overflow: hidden; vertical-align: top; padding-right: 24px; padding-bottom: 24px; display: inline-block; width: 180px; max-height: 320px; margin-bottom: 10px;">
+    {{ if eq $board.ModCred $board.Domain $board.Actor }}              
+    <a href="/delete?id={{ .Id }}">[Delete Post]</a>
+    {{ end }}
+    {{ if .Attachment }}
+    {{ if eq $board.ModCred $board.Domain $board.Actor }}                  
+    <a href="/deleteattach?id={{ .Id }}">[Delete Attachment]</a>
+    {{ end }}        
+    <a id="{{ .Id }}-anchor" href="/{{ $board.Name }}/">
+      <div id="media-{{ .Id }}" style="width:180px;"></div>
+      <script>
+        media = document.getElementById("media-{{ .Id }}")
+        if(getMIMEType({{ (index .Attachment 0).MediaType }}) == "image"){
+            var img = document.createElement("img");
+            img.style = "max-width: 180px; max-height: 180px; cursor: move;"
+            img.setAttribute("id", "img")
+            img.setAttribute("main", "1")
+            img.setAttribute("src", "{{ (index .Attachment 0).Href }}")
+            media.appendChild(img)
+        }                                
+
+        if(getMIMEType({{ (index .Attachment 0).MediaType }}) == "audio"){
+            var audio = document.createElement("audio")
+            audio.controls = 'controls'
+            audio.preload    = 'none'              
+            audio.src      = '{{ (index .Attachment 0).Href }}'
+            audio.type     = '{{ (index .Attachment 0).MediaType }}'              
+            audio.style = "margin-right: 10px; margin-bottom: 10px; width: 180px;"
+            audio.innerText = 'Audio is not supported.'
+            media.appendChild(audio)                            
+        }
+
+        if(getMIMEType({{ (index .Attachment 0).MediaType }}) == "video"){
+            var video = document.createElement("video")
+            video.controls = 'controls'
+            video.preload    = 'none'                          
+            video.muted    = 'muted'              
+            video.src      = '{{ (index .Attachment 0).Href }}'
+            video.type     = '{{ (index .Attachment 0).MediaType }}'              
+            video.style = "margin-right: 10px; margin-bottom: 10px; width: 180px;"
+            video.innerText = 'Video is not supported.'
+            media.appendChild(video)                                          
+        }                    
+      </script>                        
+      {{ end }}
+      <div>
+        {{ $replies := .Replies }}
+        <span style="display: block;">R: {{ $replies.TotalItems }}{{ if $replies.TotalImgs }}/ A: {{ $replies.TotalImgs }}{{ end }}</span>                        
+        {{ if .Name }}
+        <span style="display: block; color: #0f0c5d;"><b>{{ .Name }}</b></span>
+        {{ end }}
+
+        {{ if .Content }}
+        <span style="display: block">{{.Content}}</span>
+        {{ end }}
+
+      </div>
+    </a>        
+  </div>
+  <script>
+    document.getElementById("{{ .Id }}-anchor").href = "/{{ $board.Name }}/" + shortURL("{{$board.Actor}}", "{{ .Id }}")
+  </script>
+  {{ end }}
+</div>
+<hr>
+<ul style="margin: 0; padding: 0; display: inline">
+  <li style="display: inline"><a href="/{{ $board.Name }}">[Return]</a></li>
+  <li style="display: inline"><a id="bottom" href="#top">[Top]</a></li>
+  <li style="display: inline"><a href="javascript:location.reload()">[Refresh]</a></li>
+</ul>
+<hr>    
+{{ end }}
+{{ define "bottom" }}
+{{ end }}
+
+{{ define "script" }}
+{{ end }}
diff --git a/static/npost.html b/static/npost.html
new file mode 100644
index 0000000..bf07c63
--- /dev/null
+++ b/static/npost.html
@@ -0,0 +1,39 @@
+{{ define "header" }}
+<script src="/static/js/posts.js"></script>
+{{ end }}
+
+{{ define "content" }}
+{{ $board := .Board }}
+
+<hr>
+<ul style="margin: 0; padding: 0; display: inline">
+  <li style="display: inline"><a href="/{{ $board.Name }}">[Return]</a></li>
+  <li style="display: inline"><a href="/{{ $board.Name }}/catalog">[Catalog]</a></li>      
+  <li style="display: inline"><a href="#bottom">[Bottom]</a></li>
+  <li style="display: inline"><a href="javascript:location.reload()">[Refresh]</a></li>
+</ul>
+<hr>
+
+{{ template "posts" . }}
+
+<hr>
+<ul style="position: absolute; left: 5px;  margin: 0; padding: 0; display: inline">
+  <li style="display: inline"><a href="/{{ $board.Name }}">[Return]</a></li>
+  <li style="display: inline"><a href="/{{ $board.Name }}/catalog">[Catalog]</a></li>            
+  <li style="display: inline"><a id="bottom" href="#top">[Top]</a></li>
+  <li style="display: inline"><a href="javascript:location.reload()">[Refresh]</a></li>
+</ul>
+<div style=": inline; text-align: center;">
+  <span><a href="javascript:quote('{{ $board.Actor }}', '{{ (index .Posts 0).Id }}', '{{ (index .Posts 0).Id }}')">[Post a Reply]</a></span>
+  {{ $replies := (index .Posts 0).Replies }}            
+  <span style="float: right;">{{ $replies.TotalItems }} / {{ $replies.TotalImgs }}</span>      
+</div>
+<hr>
+{{ end }}
+
+{{ define "script" }}
+<script src="/static/js/footerscript.js"></script>
+<script>
+  viewLink("{{ .Board.Name }}", "{{ .Board.Actor }}")
+</script>    
+{{ end }}
diff --git a/static/nposts.html b/static/nposts.html
new file mode 100644
index 0000000..2296df5
--- /dev/null
+++ b/static/nposts.html
@@ -0,0 +1,51 @@
+{{ define "header" }}
+<script src="/static/js/posts.js"></script>
+{{ end }}
+
+
+{{ define "content" }}
+{{ $board := .Board }}
+<hr>
+<ul style="margin: 0; padding: 0; display: inline">
+  <li style="display: inline"><a href="/{{ $board.Name }}/catalog">[Catalog]</a></li>      
+  <li style="display: inline"><a href="#bottom">[Bottom]</a></li>
+  <li style="display: inline"><a href="javascript:location.reload()">[Refresh]</a></li>
+</ul>
+
+{{ template "posts" . }}
+
+<hr>
+<ul style="margin: 0; padding: 0; display: inline">
+  <li style="display: inline"><a href="/{{ $board.Name }}/catalog">[Catalog]</a></li>
+  <li style="display: inline"><a id="bottom" href="#top">[Top]</a></li>
+  <li style="display: inline"><a href="javascript:location.reload()">[Refresh]</a></li>
+</ul>
+<hr>
+{{ if gt .TotalPage 0 }}
+{{ $totalPage := .TotalPage }}
+<ul style="float: right; margin: 0; padding: 0; display: inline">
+  {{ $page := .CurrentPage }}      
+  {{ if gt $page 0 }}
+  <li style="display: inline"><button onclick="previous('{{$board.Name }}', '{{ $page }}')">Previous</button></li>
+  {{ end }}
+  {{ range $i, $e := .Pages }}
+  {{ if eq $i $page}}
+  <li style="display: inline"><a href="/{{ $board.Name }}/{{ $i }}"><b>[{{ $i }}]</b></a></li>
+  {{ else }}
+  <li style="display: inline"><a href="/{{ $board.Name }}/{{ $i }}">[{{ $i }}]</a></li>              
+  {{ end }}
+  {{ end }}
+  {{ if lt .CurrentPage .TotalPage }}
+  <li style="display: inline"><button onclick="next('{{ $board.Name }}','{{ $totalPage }}' ,'{{ $page }}')">next</button></li>
+  {{ end }}
+</ul>
+{{ end }}
+{{ end }}
+
+{{ define "script" }}
+<script src="/static/js/footerscript.js"></script>
+<script>
+  viewLink("{{ .Board.Name }}", "{{ .Board.Actor }}")
+
+</script>    
+{{ end }}
diff --git a/static/posts.html b/static/posts.html
new file mode 100644
index 0000000..ebe8f4e
--- /dev/null
+++ b/static/posts.html
@@ -0,0 +1,179 @@
+{{ define "posts" }}
+{{ $board := .Board }}
+{{ $len := len .Posts }}
+{{ range .Posts }}
+{{ $opId := .Id }}
+{{ if eq $board.InReplyTo "" }}
+<hr>
+{{ end }}
+<div style="overflow: auto;">
+  <div id="{{ .Id }}" style="overflow: visible; margin-bottom: 12px;">
+    {{ if eq $board.ModCred $board.Domain $board.Actor }}
+    <a href="/delete?id={{ .Id }}">[Delete Post]</a>
+    {{ end }}        
+    {{ if .Attachment }}
+    {{ if eq $board.ModCred $board.Domain $board.Actor }}    
+    <a href="/deleteattach?id={{ .Id }}">[Delete Attachment]</a>
+    {{ end }}                
+    <span style="display: block;">File: <a id="{{ .Id }}-img" href="{{ (index .Attachment 0).Href}}">{{ (index .Attachment 0).Name  }}</a><span id="{{ .Id }}-size">({{ (index .Attachment 0).Size  }})</span></span>
+    <div id="media-{{ .Id }}"></div>
+    <script>
+      media = document.getElementById("media-{{ .Id }}")
+      if(getMIMEType({{ (index .Attachment 0).MediaType }}) == "image"){
+          var img = document.createElement("img");
+          img.style = "float: left; margin-right: 10px; margin-bottom: 10px; max-width: 250px; max-height: 250px; cursor: move;"
+          img.setAttribute("id", "img")
+          img.setAttribute("main", "1")
+          img.setAttribute("enlarge", "0")
+          img.setAttribute("attachment", "{{ (index .Attachment 0).Href }}")
+          {{ if .Preview.Href }} 
+          img.setAttribute("src", "{{  .Preview.Href }}")
+          img.setAttribute("preview", "{{ .Preview.Href }}")          
+          {{ else }}
+          img.setAttribute("src", "{{  (index .Attachment 0).Href }}")
+          img.setAttribute("preview", "{{ (index .Attachment 0).Href }}")                    
+          {{ end }}
+          media.appendChild(img)
+      }          
+
+      if(getMIMEType({{ (index .Attachment 0).MediaType }}) == "audio"){
+          var audio = document.createElement("audio")
+          audio.controls = 'controls'
+          audio.preload  = 'none'              
+          audio.src      = '{{ (index .Attachment 0).Href }}'
+          audio.type     = '{{ (index .Attachment 0).MediaType }}'              
+          audio.style = "float: left; margin-right: 10px; margin-bottom: 10px; width: 250px;"
+          audio.innerText = 'Audio is not supported.'
+          media.appendChild(audio)                            
+      }
+
+      if(getMIMEType({{ (index .Attachment 0).MediaType }}) == "video"){
+          var video = document.createElement("video")
+          video.controls = 'controls'
+          video.preload  = 'none'                        
+          video.muted    = 'muted'              
+          video.src      = '{{ (index .Attachment 0).Href }}'
+          video.type     = '{{ (index .Attachment 0).MediaType }}'              
+          video.style = "float: left; margin-right: 10px; margin-bottom: 10px; width: 250px;"
+          video.innerText = 'Video is not supported.'
+          media.appendChild(video)                                          
+      }                    
+    </script>
+    {{ end }}
+    <span style="color: #0f0c5d;"><b>{{ .Name }}</b></span><span style="color: #117743;"><b>{{ if .AttributedTo }} {{.AttributedTo }} {{ else }} Anonymous {{ end }}</b></span><span>{{ .Published }} <a id="{{ .Id }}-anchor" href="/{{ $board.Name }}/">No.</a> <a id="{{ .Id }}-link" title="{{ .Id }}" href="javascript:quote('{{ $board.Actor }}', '{{ $opId }}', '{{ .Id }}')">{{ .Id }}</a> {{ if ne .Type "Tombstone" }}<a href="/report?id={{ .Id }}&board={{ $board.Name }}">[Report]</a>{{ end }}</span>
+    <p id="{{ .Id }}-content" style="white-space: pre-wrap; margin: 10px 30px 10px 30px;">{{.Content}}</p>
+    {{ if .Replies }}
+    {{ $replies := .Replies }}
+    {{ if gt $replies.TotalItems 5 }}
+    <span>{{ $replies.TotalItems }} replies{{ if gt $replies.TotalImgs 0}} and  {{ $replies.TotalImgs }} images{{ end }}, Click <a id="view" post="{{.Id}}" href="/{{ $board.Name }}/{{ .Id }}">here</a> to view all.</span>
+    {{ end }}
+    {{ range $replies.OrderedItems }}
+    <div id="{{ .Id }}">
+      <div  style="display: inline-block; overflow: auto;">
+        <div style="float: left; display: block; margin-right: 5px;">>></div>
+        <div style="overflow: auto;background-color: #d5daf0; padding: 5px; margin-bottom: 2px;">
+          {{ if eq $board.ModCred $board.Domain $board.Actor }}          
+          <a href="/delete?id={{ .Id }}">[Delete Post]</a>
+          {{ end }}              
+          {{ if .Attachment }}
+          {{ if eq $board.ModCred $board.Domain $board.Actor }}                    
+          <a href="/deleteattach?id={{ .Id }}">[Delete Attachment]</a>
+          {{ end }}
+          <span style="display: block;">File <a id="{{ .Id }}-img" href="{{ (index .Attachment 0).Href}}">{{ (index .Attachment 0).Name  }}</a> <span id="{{ .Id }}-size">({{ (index .Attachment 0).Size  }})</span></span>
+          <div id="media-{{ .Id }}"></div>
+          <script>
+            media = document.getElementById("media-{{ .Id }}")
+            if(getMIMEType({{ (index .Attachment 0).MediaType }}) == "image"){
+                var img = document.createElement("img");
+                img.style = "float: left; margin-right: 10px; margin-bottom: 10px; max-width: 250px; max-height: 250px; cursor: move;"
+                img.setAttribute("id", "img")
+                img.setAttribute("main", "1")
+                img.setAttribute("enlarge", "0")
+                img.setAttribute("attachment", "{{ (index .Attachment 0).Href }}")
+                {{ if .Preview.Href }} 
+                img.setAttribute("src", "{{  .Preview.Href }}")
+                img.setAttribute("preview", "{{ .Preview.Href }}")          
+                {{ else }}
+                img.setAttribute("src", "{{  (index .Attachment 0).Href }}")
+                img.setAttribute("preview", "{{ (index .Attachment 0).Href }}")                    
+                {{ end }}                
+                media.appendChild(img)
+            }
+
+            if(getMIMEType({{ (index .Attachment 0).MediaType }}) == "audio"){
+                var audio = document.createElement("audio")
+                audio.controls = 'controls'
+                audio.preload  = 'none'              
+                audio.src      = '{{ (index .Attachment 0).Href }}'
+                audio.type     = '{{ (index .Attachment 0).MediaType }}'              
+                audio.style = "float: left; margin-right: 10px; margin-bottom: 10px; width: 250px;"
+                audio.innerText = 'Audio is not supported.'
+                media.appendChild(audio)              
+            }
+
+            if(getMIMEType({{ (index .Attachment 0).MediaType }}) == "video"){
+                var video = document.createElement("video")
+                video.controls = 'controls'
+                video.preload  = 'none'                                        
+                video.muted    = 'muted'              
+                video.src      = '{{ (index .Attachment 0).Href }}'
+                video.type     = '{{ (index .Attachment 0).MediaType }}'              
+                video.style = "float: left; margin-right: 10px; margin-bottom: 10px; width: 250px;"
+                video.innerText = 'Video is not supported.'
+                media.appendChild(video)                                                        
+            }                    
+          </script>              
+          {{ end }}
+          <span style="color: #0f0c5d;"><b>{{ .Name }}</b></span><span style="color: #117743;"><b>{{ if .AttributedTo }} {{.AttributedTo }} {{ else }} Anonymous {{ end }}</b></span><span>{{ .Published }} <a id="{{ .Id }}-anchor" href="/{{ $board.Name }}/post/{{ $opId }}#{{ .Id }}">No. </a><a id="{{ .Id }}-link" title="{{ .Id }}" href="javascript:quote('{{ $board.Actor }}', '{{ $opId }}', '{{ .Id }}')">{{ .Id }}</a> {{ if ne .Type "Tombstone" }}<a href="/report?id={{ .Id }}&board={{ $board.Name }}">[Report]</a>{{ end }}</span>
+          {{ $parentId := .Id }}
+          {{ if .Replies.OrderedItems }}
+          {{ range .Replies.OrderedItems }}
+          <span id="{{$parentId}}-replyto-{{.Id}}"></span>
+          <script>document.getElementById("{{ $parentId }}-replyto-{{.Id}}").innerHTML = "<a title='{{ .Id }}' href='/{{ $board.Name }}/" + shortURL("{{ $board.Actor }}", "{{ $opId }}") + "#" + shortURL("{{ $board.Actor }}", "{{ .Id }}") + "'>>>" + shortURL("{{ $board.Actor }}", "{{ .Id }}") + "</a>";</script>
+                                                                                                                                                                                                                                                                                                             {{ end }}
+                                                                                                                                                                                                                                                                                                             {{ end }}
+                                                                                                                                                                                                                                                                                                             <p id="{{ .Id }}-content" style="white-space: pre-wrap; margin: 10px 30px 10px 30px;">{{.Content}}</p>
+        </div>
+      </div>
+    </div>
+    <script>
+      {{ if .Attachment }}
+      document.getElementById("{{ .Id }}-size").innerText = " (" + convertSize({{ (index .Attachment 0).Size }}) + ")";
+      document.getElementById("{{ .Id }}-img").innerText = shortImg("{{ (index .Attachment 0).Name }}");
+      {{ end }}
+
+      document.getElementById("{{ .Id }}-link").innerText = shortURL("{{ $board.Actor }}", "{{ .Id }}");
+
+      document.getElementById("{{ .Id }}-anchor").href = "/{{ $board.Name }}/" + shortURL("{{$board.Actor}}", "{{ $opId }}") +
+    "#" + shortURL("{{$board.Actor}}", "{{ .Id }}");                
+      document.getElementById("{{ .Id }}").setAttribute("id", shortURL("{{$board.Actor}}", "{{ .Id }}"));
+
+      var content = document.getElementById("{{ .Id }}-content");
+
+      content.innerHTML = convertContent('{{$board.Actor}}', content.innerText, '{{ $opId }}')        
+
+    </script>      
+    {{ end }}
+    {{ end }}
+  </div>
+</div>
+<script>
+  {{ if .Attachment }}      
+  document.getElementById("{{ .Id }}-size").innerText = " (" + convertSize({{ (index .Attachment 0).Size }}) + ")";
+  document.getElementById("{{ .Id }}-img").innerText = shortImg("{{ (index .Attachment 0).Name }}");
+  {{ end }}
+
+  document.getElementById("{{ .Id }}-link").innerText = shortURL("{{ $board.Actor }}", "{{ .Id }}");
+
+  document.getElementById("{{ .Id }}").setAttribute("id", shortURL("{{ $board.Actor }}", "{{ .Id }}"));
+
+  document.getElementById("{{ .Id }}-anchor").href = "/{{ $board.Name }}/" + shortURL("{{$board.Actor}}", "{{ $opId }}") +
+    "#" + shortURL("{{$board.Actor}}", "{{ .Id }}");
+
+  var content = document.getElementById("{{ .Id }}-content");
+
+  content.innerHTML = convertContent('{{$board.Actor}}', content.innerText, '{{ $opId }}')              
+
+</script>
+{{ end }}
+{{ end }}
diff --git a/static/top.html b/static/top.html
new file mode 100644
index 0000000..d28043f
--- /dev/null
+++ b/static/top.html
@@ -0,0 +1,37 @@
+{{ define "top" }}
+<div style="margin: 0 auto; width: 400px; margin-bottom: 100px;">
+  <h1 style="text-align: center; color: #af0a0f;">/{{ .Board.Name }}/ - {{ .Board.PrefName }}</h1>
+  <p style="text-align: center;">{{ .Board.Summary }}</p>
+  {{ $len := len .Posts }}
+  {{ if .Board.InReplyTo }}
+  <h3 id="newpostbtn"  state="0" style="text-align: center; margin-top: 80px;"><a href="javascript:newpost()">[Post a Reply]</a></h3>  
+  {{ else }}
+  <h3 id="newpostbtn"  state="0" style="text-align: center; margin-top: 80px;"><a href="javascript:newpost()">[Start a New Thread]</a></h3>
+  {{ end }}
+  <div id="newpost" style="display: none;">    
+    <form id="new-post" action="/post" method="post" enctype="multipart/form-data">        
+      <label for="name">Name:</label><br>
+      <input type="text" id="name" name="name" placeholder="Anonymous"><br>
+      <label for="options">Options:</label><br>
+      <input type="text" id="options" name="options">{{ if .Board.InReplyTo }}<input type="submit" value="Post">{{ end }}<br>
+      {{ if eq .Board.InReplyTo "" }}
+      <label for="subject">Subject:</label><br>      
+      <input type="text" id="subject" name="subject"><input type="submit" value="Post"><br>
+      {{ end }}
+      <label for="comment">Comment:</label><br>
+      <textarea rows="10" cols="50" id="comment" name="comment"></textarea><br>
+      <input type="hidden" id="inReplyTo" name="inReplyTo" value="{{ .Board.InReplyTo }}">
+      <input type="hidden" id="sendTo" name="sendTo" value="{{ .Board.To }}">
+      <input type="hidden" id="boardName" name="boardName" value="{{ .Board.Name }}">
+      <input type="hidden" id="captchaCode" name="captchaCode" value="{{ .Board.CaptchaCode }}">
+      <input type="file" id="file" name="file" {{ if gt $len 1 }} required {{ else }} {{ if eq $len 0 }} required {{ end }} {{ end }} ><br><br>
+      <label stye="display: inline-block;" for="captcha">Captcha:</label>
+      <br>              
+      <input style="display: inline-block;"  type="text" id="captcha" name="captcha" autocomplete="off"><br>
+      <div style="height: 65px;">
+        <img src="{{ .Board.Captcha }}">
+      </div>
+    </form>
+  </div>
+</div>
+{{ end }}
diff --git a/static/verify.html b/static/verify.html
new file mode 100644
index 0000000..fb3fb3d
--- /dev/null
+++ b/static/verify.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <meta name="viewport" content="width=device-width, initial-scale=1">      
+  <head>
+  </head>
+  <body>
+    <div style="width: 200px; margin: 0 auto;">
+      <form action="/verify" method="post">
+        <label>Identifier</label>
+        <input type="text" id="identifier" name="id" required><br>
+        <label>Code</label>        
+        <input type="text" id="verify" name="code" required><br>
+        <input type="submit" value="Verify">      
+      </form>
+    </div>
+  </body>
+</html>
author	FChannel <=>	2021-01-22 21:12:26 -0800
committer	FChannel <=>	2021-01-22 21:12:26 -0800
commit	2566e314e8351ffbceae9a2688d90a5c811d49e5 (patch)
tree	e802622593c540265e464beecf76696b65e229ed /static
parent	626fee35bacd68baf6e9bb38ca71d88fff700b13 (diff)