add a help button

src/web/binaryUpload.coffee

@@ -1,5 +1,6 @@
 import React from "react"
 import Dropzone from "react-dropzone"
+import HelpButton from "./helpButton"
 import LinkButton from "./util/linkButton"
 import * as crypto from "../crypto"
 import * as util from "../util"
@@ -89,6 +90,7 @@ class BinaryUpload extends React.Component
         }
       </Dropzone>
       <div className="content-buttons">
+        <HelpButton openDialog={@props.openDialog} />
         <button
           className="button-blue"
           disabled={@state.uploading}

src/web/helpButton.coffee

@@ -0,0 +1,43 @@
+import React from "react"
+import * as util from "../util"
+
+class HelpButton extends React.Component
+  constructor: (props) ->
+    super props
+
+  showHelp: =>
+    @props.openDialog do =>
+      <React.Fragment>
+        <p><strong>Angry.Im Pastebin Service</strong><br/>
+           Source code:&nbsp;
+          <a target="_blank" href="https://github.com/PeterCxy/worker-pastebin">
+            https://github.com/PeterCxy/worker-pastebin
+          </a>
+        </p>
+        <p>
+          This application is intended as a programming practice.
+          There is <strong>absolutely no guarantee</strong> on its functionality, security and reliability.
+        </p>
+        <p>
+          <strong>Maximum file size: {util.humanFileSize util.MAX_UPLOAD_SIZE}</strong>, all uploads are kept for <strong>7 days</strong> only.
+        </p>
+        <p>
+          File uploads with <strong>"Encryption: ON"</strong> are encrypted with <i>AES-128-GCM</i> before uploading to server.
+          The encryption key and IV (<i>Initialization Vector</i>) are generated <strong>in your browser</strong> and not uploaded to server.<br/>
+          They are appended to the final uploaded URL in the form of {"\"#<key>-<iv>\""} (as a <a target="_blank" href="https://en.wikipedia.org/wiki/Fragment_identifier"><i>Fragment Identifier</i></a>),&nbsp;
+          so that they will <strong>not</strong> be sent to the server as part of the URL when you access the file later from your browser.
+        </p>
+        <p>
+          The decryption will also be done entirely in your browser. Therefore, it is not supported to access encrypted files outside of a modern browser.
+        </p>
+      </React.Fragment>
+
+  render: ->
+    <button
+      className="button-blue"
+      onClick={@showHelp}
+    >
+      Help
+    </button>
+
+export default HelpButton

src/web/pastebin.coffee

@@ -1,4 +1,5 @@
 import React from "react"
+import HelpButton from "./helpButton"
 import LinkButton from "./util/linkButton"
 import ContentEditable from "./util/contentEditable"
 
@@ -62,6 +63,7 @@ class Pastebin extends React.Component
         plainText
       />
       <div className="content-buttons">
+        <HelpButton openDialog={@props.openDialog} />
         <button
           className="button-blue"
           onClick={@toggleHighlight}

src/web/styles/dialog.scss

@@ -1,9 +1,12 @@
 .ReactModal__Content_My {
+    font-family: sans-serif;
+    font-size: 14px;
     display: flex;
     flex-flow: column;
     position: absolute;
     width: $dialog-width;
-    height: $dialog-height;
+    min-height: $dialog-height;
+    max-height: 80vh;
     left: calc((100vw - #{$dialog-width}) / 2);
     top: $dialog-margin;
     background-color: white;
@@ -14,13 +17,14 @@
     padding: $dialog-inset;
     box-sizing: border-box;
 
-    p {
+    > p {
         display: inline-block;
         flex: 1;
         box-sizing: border-box;
         white-space: pre-wrap;
         overflow-wrap: break-word;
         word-wrap: break-word;
+        overflow-y: auto;
     }
 
     .dialog-buttons {