4 files changed, 48 insertions, 5 deletions
diff --git a/views/css/themes/default.css b/views/css/themes/default.css
index 488ba4f..3201975 100644
--- a/views/css/themes/default.css
+++ b/views/css/themes/default.css
@@ -24,12 +24,12 @@ h1, h2, h3, h4, h5, h6 {
   color: #af0a0f;
 }
 
-.popup-box {
+.popup-box, #report-box {
   border: 4px solid #d3caf0;
   background-color: #eff5ff;
 }
 
-.nsfw .popup-box {
+.nsfw .popup-box, .nsfw #report-box {
   border: 4px solid #f0e2d9;
   background-color: #f9f9e0;
 }
@@ -160,6 +160,13 @@ a.reply {
   display: block;
 }
 
+#report-box {
+  min-width: 300px;
+  width: min-content;
+  z-index: 9;
+  display: block;
+}
+
 /* TODO: rename */
 .box2 {
   border: 4px solid #f0e2d9;
diff --git a/views/css/themes/gruvbox.css b/views/css/themes/gruvbox.css
index 788b2b6..a4474ce 100644
--- a/views/css/themes/gruvbox.css
+++ b/views/css/themes/gruvbox.css
@@ -20,7 +20,7 @@ body {
   font-size: 0.9em;
 }
 
-.popup-box {
+.popup-box, #report-box {
   border: 4px solid #928374;
   background-color: #3c3836;
 }
@@ -141,6 +141,13 @@ input[type="text"] {
   display: block;
 }
 
+#report-box {
+  min-width: 300px;
+  width: min-content;
+  z-index: 9;
+  display: block;
+}
+
 /* TODO: rename */
 .box2 {
   border: 4px solid #928374;
diff --git a/views/partials/posts.html b/views/partials/posts.html
index d57a199..6fe2d2d 100644
--- a/views/partials/posts.html
+++ b/views/partials/posts.html
@@ -48,7 +48,7 @@
     <span class="subject"><b>{{ .Name }}</b></span>
     <span class="name"><b>{{ if .AttributedTo }} {{.AttributedTo }} {{ else }} Anonymous {{ end }}</b></span>
     <span class="tripcode"> {{ .TripCode }} </span>
-    <span class="timestamp" data-utc="{{.Published | timeToUnix}}">{{ .Published | timeToReadableLong }} <a id="{{ .Id }}-anchor" href="/{{ $board.Name }}/{{ shortURL $board.Actor.Outbox $opId }}">No.</a> <a id="{{ .Id }}-link" title="{{ .Id }}" {{ if eq .Type "Note" }} href="javascript:quote('{{ $board.Actor.Id }}', '{{ $opId }}', '{{ .Id }}')" {{ end }}>{{ shortURL $board.Actor.Outbox .Id }}</a> {{ if ne .Type "Tombstone" }}[<a href="javascript:report('{{ $board.Actor.Id }}', '{{ .Id }}')">Report</a>]{{ end }}</span>
+    <span class="timestamp" data-utc="{{.Published | timeToUnix}}">{{ .Published | timeToReadableLong }} <a id="{{ .Id }}-anchor" href="/{{ $board.Name }}/{{ shortURL $board.Actor.Outbox $opId }}">No.</a> <a id="{{ .Id }}-link" title="{{ .Id }}" {{ if eq .Type "Note" }} href="javascript:quote('{{ $board.Actor.Id }}', '{{ $opId }}', '{{ .Id }}')" {{ end }}>{{ shortURL $board.Actor.Outbox .Id }}</a> {{ if ne .Type "Tombstone" }}[<a href="/make-report?actor={{ $board.Actor.Id }}&post={{ .Id }}">Report</a>]{{ end }}</span>
     <p id="{{ .Id }}-content" style="white-space: pre-wrap; margin: 10px 30px 10px 30px;">{{ parseContent $board.Actor $opId .Content $thread .Id $page.PostType }}</p>
     {{ if .Replies }}
     {{ $replies := .Replies }}
@@ -103,7 +103,7 @@
           <span class="subject"><b>{{ .Name }}</b></span>
           <span class="name"><b>{{ if .AttributedTo }} {{.AttributedTo }} {{ else }} Anonymous {{ end }}</b></span>
           <span class="tripcode"> {{ .TripCode }} </span>
-          <span class="timestamp" data-utc="{{ .Published | timeToUnix }}">{{ .Published | timeToReadableLong }} <a id="{{ .Id }}-anchor" href="/{{ $board.Name }}/{{ shortURL $board.Actor.Outbox $opId }}#{{ shortURL $board.Actor.Outbox .Id }}">No. </a><a id="{{ .Id }}-link" title="{{ .Id }}" {{ if eq .Type "Note" }} href="javascript:quote('{{ $board.Actor.Id }}', '{{ $opId }}', '{{ .Id }}')" {{ end }}>{{ shortURL $board.Actor.Outbox .Id }}</a> {{ if ne .Type "Tombstone" }}[<a href="javascript:report('{{ $board.Actor.Id }}', '{{ .Id }}')">Report</a>]{{ end }}</span>
+          <span class="timestamp" data-utc="{{ .Published | timeToUnix }}">{{ .Published | timeToReadableLong }} <a id="{{ .Id }}-anchor" href="/{{ $board.Name }}/{{ shortURL $board.Actor.Outbox $opId }}#{{ shortURL $board.Actor.Outbox .Id }}">No. </a><a id="{{ .Id }}-link" title="{{ .Id }}" {{ if eq .Type "Note" }} href="javascript:quote('{{ $board.Actor.Id }}', '{{ $opId }}', '{{ .Id }}')" {{ end }}>{{ shortURL $board.Actor.Outbox .Id }}</a> {{ if ne .Type "Tombstone" }}[<a href="/make-report?actor={{ $board.Actor.Id }}&post={{ .Id }}">Report</a>]{{ end }}</span>
           {{ $parentId := .Id }}
           {{ if .Replies.OrderedItems }}
           {{ range .Replies.OrderedItems }}
diff --git a/views/report.html b/views/report.html
new file mode 100644
index 0000000..d691349
--- /dev/null
+++ b/views/report.html
@@ -0,0 +1,29 @@
+{{ template "partials/top" .page }}
+
+<div style="height: 500px; width: 420px; margin: 0 auto; margin-top:75px;">
+  <a href="{{ .page.Board.Actor.Id }}/{{ shortURL .page.Board.Actor.Outbox .page.Board.InReplyTo }}">[Back]</a>
+  <div id="report-box">
+    <div id="report-header" style="text-align: center; display: inline-block; z-index: 0;">Report Post No. {{ shortURL .page.Board.Actor.Outbox .page.Board.InReplyTo }}</div>
+    <form id="report-post" action="/report" method="post">
+      <label for="comment">Reason:</label><br>
+      <textarea id="report-comment" name="comment" rows="12" cols="54" style="width: 396px;" maxlength="100" oninput="sessionStorage.setItem('element-report-comment', document.getElementById('report-comment').value)"></textarea>
+      <br>
+      <input id="report-submit" type="submit" value="Report" style="float: right;">
+      <input type="hidden" id="report-inReplyTo-box" name="id" value="{{ .page.Board.InReplyTo }}">
+      <input type="hidden" id="sendTo" name="sendTo" value="{{ .page.Board.To }}">
+      <input type="hidden" id="boardName" name="board" value="{{ .page.Board.Name }}">
+      <input type="hidden" name="close" value="0">
+      <input type="hidden" id="captchaCode" name="captchaCode" value="{{ .page.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="{{ .page.Board.Captcha }}">
+      </div>
+    </form>
+  </div>
+</div>
+
+{{ template "partials/footer" .page }}
+{{ template "partials/general_scripts" .page }}