From 88df88204c982caf7b011d240ee65b1430a0a9bb Mon Sep 17 00:00:00 2001
From: Arinerron <arinesau@gmail.com>
Date: Sun, 29 Jul 2018 17:43:28 -0700
Subject: [PATCH] Add files

---
 Makefile                                      |   1 +
 onionr/api.py                                 |   2 +-
 onionr/static-data/ui/common/footer.html      |   4 +
 onionr/static-data/ui/common/header.html      |  30 ++++
 .../ui/common/onionr-timeline-post.html       |  31 ++++
 onionr/static-data/ui/compile.py              | 123 +++++++++++++
 onionr/static-data/ui/config.json             |   4 +
 onionr/static-data/ui/dist/css/main.css       |  74 ++++++++
 .../static-data/ui/dist/css/themes/dark.css   |  32 ++++
 onionr/static-data/ui/dist/img/default.png    | Bin 0 -> 6758 bytes
 onionr/static-data/ui/dist/index.html         |  77 ++++++++
 onionr/static-data/ui/dist/js/main.js         | 170 ++++++++++++++++++
 onionr/static-data/ui/dist/js/timeline.js     |  20 +++
 onionr/static-data/ui/lang.json               |  31 ++++
 onionr/static-data/ui/src/css/main.css        |  74 ++++++++
 onionr/static-data/ui/src/css/themes/dark.css |  32 ++++
 onionr/static-data/ui/src/img/default.png     | Bin 0 -> 6758 bytes
 onionr/static-data/ui/src/index.html          |  43 +++++
 onionr/static-data/ui/src/js/main.js          | 167 +++++++++++++++++
 onionr/static-data/ui/src/js/timeline.js      |  20 +++
 20 files changed, 934 insertions(+), 1 deletion(-)
 create mode 100644 onionr/static-data/ui/common/footer.html
 create mode 100644 onionr/static-data/ui/common/header.html
 create mode 100644 onionr/static-data/ui/common/onionr-timeline-post.html
 create mode 100755 onionr/static-data/ui/compile.py
 create mode 100644 onionr/static-data/ui/config.json
 create mode 100644 onionr/static-data/ui/dist/css/main.css
 create mode 100644 onionr/static-data/ui/dist/css/themes/dark.css
 create mode 100644 onionr/static-data/ui/dist/img/default.png
 create mode 100644 onionr/static-data/ui/dist/index.html
 create mode 100644 onionr/static-data/ui/dist/js/main.js
 create mode 100644 onionr/static-data/ui/dist/js/timeline.js
 create mode 100644 onionr/static-data/ui/lang.json
 create mode 100644 onionr/static-data/ui/src/css/main.css
 create mode 100644 onionr/static-data/ui/src/css/themes/dark.css
 create mode 100644 onionr/static-data/ui/src/img/default.png
 create mode 100644 onionr/static-data/ui/src/index.html
 create mode 100644 onionr/static-data/ui/src/js/main.js
 create mode 100644 onionr/static-data/ui/src/js/timeline.js

diff --git a/Makefile b/Makefile
index 472ffc2d..c51fc72b 100644
--- a/Makefile
+++ b/Makefile
@@ -2,6 +2,7 @@
 
 setup:
 	sudo pip3 install -r requirements.txt
+	-@cd onionr/static-data/ui/; ./compile.py
 
 install:
 	sudo rm -rf /usr/share/onionr/
diff --git a/onionr/api.py b/onionr/api.py
index 256f55f9..705a4781 100755
--- a/onionr/api.py
+++ b/onionr/api.py
@@ -129,7 +129,7 @@ class API:
             if not hmac.compare_digest(timingToken, self.timeBypassToken):
                 if elapsed < self._privateDelayTime:
                     time.sleep(self._privateDelayTime - elapsed)
-            return send_from_directory('static-data/ui/', path)
+            return send_from_directory('static-data/ui/dist/', path)
 
         @app.route('/client/')
         def private_handler():
diff --git a/onionr/static-data/ui/common/footer.html b/onionr/static-data/ui/common/footer.html
new file mode 100644
index 00000000..6b5cfb06
--- /dev/null
+++ b/onionr/static-data/ui/common/footer.html
@@ -0,0 +1,4 @@
+<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
+        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
+        <script src="js/main.js"></script>
diff --git a/onionr/static-data/ui/common/header.html b/onionr/static-data/ui/common/header.html
new file mode 100644
index 00000000..2a2b4f56
--- /dev/null
+++ b/onionr/static-data/ui/common/header.html
@@ -0,0 +1,30 @@
+<title><$= LANG.ONIONR_TITLE $></title>
+
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+
+        <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />
+        <link rel="stylesheet" type="text/css" href="css/main.css" />
+        <link rel="stylesheet" type="text/css" href="css/themes/dark.css" />
+
+
+        <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
+            <a class="navbar-brand" href="#">Onionr</a>
+            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+
+            <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                <ul class="navbar-nav mr-auto">
+                    <li class="nav-item active">
+                        <a class="nav-link" href="index.html"><$= LANG.TIMELINE $></a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="notifications.html"><$= LANG.NOTIFICATIONS $></a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="messages.html"><$= LANG.MESSAGES $></a>
+                    </li>
+                </ul>
+            </div>
+        </nav>
diff --git a/onionr/static-data/ui/common/onionr-timeline-post.html b/onionr/static-data/ui/common/onionr-timeline-post.html
new file mode 100644
index 00000000..ceff5c65
--- /dev/null
+++ b/onionr/static-data/ui/common/onionr-timeline-post.html
@@ -0,0 +1,31 @@
+<!-- POST -->
+<div class="col-12">
+    <div class="onionr-post">
+        <div class="row">
+            <div class="col-2">
+                <img class="onionr-post-user-icon" src="$user-image">
+            </div>
+            <div class="col-10">
+                <div class="row">
+                    <div class="col">
+                        <a class="onionr-post-user-name" href="#!" onclick="viewProfile('$user-id-url', '$user-name-url')">$user-name</a>
+                        <a class="onionr-post-user-id" href="#!" onclick="viewProfile('$user-id-url', '$user-name-url')" data-placement="top" data-toggle="tooltip" title="$user-id">$user-id-truncated</a>
+                    </div>
+                    <div class="text-right pl-3 pr-3">
+                        <div class="onionr-post-date" data-placement="top" data-toggle="tooltip" title="$date">$date-relative</div>
+                    </div>
+                </div>
+                
+                <div class="onionr-post-content">
+                    $content
+                </div>
+                
+                <div class="onionr-post-controls pt-2">
+                    <a href="#!" class="glyphicon glyphicon-heart mr-2">like</a>
+                    <a href="#!" class="glyphicon glyphicon-comment mr-2">comment</a>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- END POST -->
diff --git a/onionr/static-data/ui/compile.py b/onionr/static-data/ui/compile.py
new file mode 100755
index 00000000..c93e4aa7
--- /dev/null
+++ b/onionr/static-data/ui/compile.py
@@ -0,0 +1,123 @@
+#!/usr/bin/python3
+
+import shutil, os, re, json, traceback
+
+# get user's config
+settings = {}
+with open('config.json', 'r') as file:
+    settings = json.loads(file.read())
+
+# "hardcoded" config, not for user to mess with
+HEADER_FILE = 'common/header.html'
+FOOTER_FILE = 'common/footer.html'
+SRC_DIR = 'src/'
+DST_DIR = 'dist/'
+HEADER_STRING = '<header />'
+FOOTER_STRING = '<footer />'
+
+# remove dst folder
+shutil.rmtree(DST_DIR, ignore_errors=True)
+
+# taken from https://stackoverflow.com/questions/1868714/how-do-i-copy-an-entire-directory-of-files-into-an-existing-directory-using-pyth
+def copytree(src, dst, symlinks=False, ignore=None):
+    for item in os.listdir(src):
+        s = os.path.join(src, item)
+        d = os.path.join(dst, item)
+        if os.path.isdir(s):
+            shutil.copytree(s, d, symlinks, ignore)
+        else:
+            shutil.copy2(s, d)
+
+# copy src to dst
+copytree(SRC_DIR, DST_DIR, False)
+
+# load in lang map
+langmap = {}
+
+with open('lang.json', 'r') as file:
+    langmap = json.loads(file.read())[settings['language']]
+
+LANG = type('LANG', (), langmap)
+
+# templating
+def jsTemplate(template):
+    with open('common/%s.html' % template, 'r') as file:
+        return file.read().replace('\\', '\\\\').replace('\'', '\\\'').replace('\n', "\\\n")
+
+def htmlTemplate(template):
+    with open('common/%s.html' % template, 'r') as file:
+        return file.read()
+
+# tag parser
+def parseTags(contents):
+    # <$ logic $>
+    for match in re.findall(r'(<\$(?!=)(.*?)\$>)', contents):
+        try:
+            out = exec(match[1].strip())
+            contents = contents.replace(match[0], '' if out is None else str(out))
+        except Exception as e:
+            print('Error: Failed to execute python tag (%s): %s\n' % (filename, match[1]))
+            traceback.print_exc()
+            print('\nIgnoring this error, continuing to compile...\n')
+
+    # <$= data $>
+    for match in re.findall(r'(<\$=(.*?)\$>)', contents):
+        try:
+            out = eval(match[1].strip())
+            contents = contents.replace(match[0], '' if out is None else str(out))
+        except NameError as e:
+            name = match[1].strip()
+            print('Warning: %s does not exist, treating as an str' % name)
+            contents = contents.replace(match[0], name)
+        except Exception as e:
+            print('Error: Failed to execute python tag (%s): %s\n' % (filename, match[1]))
+            traceback.print_exc()
+            print('\nIgnoring this error, continuing to compile...\n')
+
+    return contents
+
+# get header file
+with open(HEADER_FILE, 'r') as file:
+    HEADER_FILE = file.read()
+    if settings['python_tags']:
+        HEADER_FILE = parseTags(HEADER_FILE)
+
+# get footer file
+with open(FOOTER_FILE, 'r') as file:
+    FOOTER_FILE = file.read()
+    if settings['python_tags']:
+        FOOTER_FILE = parseTags(FOOTER_FILE)
+
+# iterate dst, replace files
+def iterate(directory):
+    for filename in os.listdir(directory):
+        if filename.split('.')[-1].lower() in ['htm', 'html', 'css', 'js']:
+            try:
+                path = os.path.join(directory, filename)
+                if os.path.isdir(path):
+                    iterate(path)
+                else:
+                    contents = ''
+                    with open(path, 'r') as file:
+                        # get file contents
+                        contents = file.read()
+
+                    os.remove(path)
+
+                    with open(path, 'w') as file:
+                        # set the header & footer
+                        contents = contents.replace(HEADER_STRING, HEADER_FILE)
+                        contents = contents.replace(FOOTER_STRING, FOOTER_FILE)
+
+                        # do python tags
+                        if settings['python_tags']:
+                            contents = parseTags(contents)
+
+                        # write file
+                        file.write(contents)
+            except Exception as e:
+                print('Error: Failed to parse file: %s\n' % filename)
+                traceback.print_exc()
+                print('\nIgnoring this error, continuing to compile...\n')
+
+iterate(DST_DIR)
diff --git a/onionr/static-data/ui/config.json b/onionr/static-data/ui/config.json
new file mode 100644
index 00000000..f87539ac
--- /dev/null
+++ b/onionr/static-data/ui/config.json
@@ -0,0 +1,4 @@
+{
+    "language" : "eng",
+    "python_tags" : true
+}
diff --git a/onionr/static-data/ui/dist/css/main.css b/onionr/static-data/ui/dist/css/main.css
new file mode 100644
index 00000000..d9e76be6
--- /dev/null
+++ b/onionr/static-data/ui/dist/css/main.css
@@ -0,0 +1,74 @@
+/* general formatting */
+
+@media (min-width: 768px) {
+    .container-small {
+        width: 300px;
+    }
+    .container-large {
+        width: 970px;
+    }
+}
+@media (min-width: 992px) {
+    .container-small {
+        width: 500px;
+    }
+    .container-large {
+        width: 1170px;
+    }
+}
+@media (min-width: 1200px) {
+    .container-small {
+        width: 700px;
+    }
+    .container-large {
+        width: 1500px;
+    }
+}
+
+.container-small, .container-large {
+    max-width: 100%;
+}
+
+/* navbar */
+
+body {
+    margin-top: 5rem;
+}
+
+/* timeline */
+
+.onionr-post {
+    padding: 1rem;
+    margin-bottom: 1rem;
+
+    width: 100%;
+}
+
+.onionr-post-user-name {
+    display: inline;
+}
+
+.onionr-post-user-id:before { content: "("; }
+.onionr-post-user-id:after { content: ")"; }
+
+.onionr-post-content {
+    word-wrap: break-word;
+}
+
+.onionr-post-user-icon {
+    border-radius: 100%;
+    width: 100%;
+}
+
+/* profile */
+
+.onionr-profile-user-icon {
+    border-radius: 100%;
+    width: 100%;
+    margin-bottom: 1rem;
+}
+
+.onionr-profile-username {    
+    text-align: center;
+}
+
diff --git a/onionr/static-data/ui/dist/css/themes/dark.css b/onionr/static-data/ui/dist/css/themes/dark.css
new file mode 100644
index 00000000..4a547a29
--- /dev/null
+++ b/onionr/static-data/ui/dist/css/themes/dark.css
@@ -0,0 +1,32 @@
+body {
+    background-color: #96928f;
+    color: #25383C;
+}
+
+/* timeline */
+
+.onionr-post {
+    border: 1px solid black;
+    border-radius: 1rem;
+    
+    background-color: lightgray;
+}
+
+.onionr-post-user-name {
+    color: green;
+    font-weight: bold;
+}
+
+.onionr-post-user-id {
+    color: gray;
+}
+
+.onionr-post-date {
+    color: gray;
+}
+
+.onionr-post-content {
+    font-family: sans-serif, serif;
+    border-top: 1px solid black;
+    font-size: 15pt;
+}
diff --git a/onionr/static-data/ui/dist/img/default.png b/onionr/static-data/ui/dist/img/default.png
new file mode 100644
index 0000000000000000000000000000000000000000..c422791623e540565801fa23ffead60d379c32ab
GIT binary patch
literal 6758
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
J9XxUIKLEN|s0jc7

literal 0
HcmV?d00001

diff --git a/onionr/static-data/ui/dist/index.html b/onionr/static-data/ui/dist/index.html
new file mode 100644
index 00000000..886404dc
--- /dev/null
+++ b/onionr/static-data/ui/dist/index.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Onionr UI</title>
+
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+
+        <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />
+        <link rel="stylesheet" type="text/css" href="css/main.css" />
+        <link rel="stylesheet" type="text/css" href="css/themes/dark.css" />
+
+
+        <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
+            <a class="navbar-brand" href="#">Onionr</a>
+            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+
+            <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                <ul class="navbar-nav mr-auto">
+                    <li class="nav-item active">
+                        <a class="nav-link" href="index.html">Timeline</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="notifications.html">Notifications</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="messages.html">Messages</a>
+                    </li>
+                </ul>
+            </div>
+        </nav>
+
+    </head>
+    <body>
+        <div class="container">
+            <div class="row">
+                <div class="d-none d-lg-block col-lg-3">
+                    <div class="onionr-profile">
+                        <div class="row">
+                            <div class="col-12">
+                                <img id="onionr-profile-user-icon" class="onionr-profile-user-icon" src="img/default.png">
+                            </div>
+                            <div class="col-12">
+                                <h2 id="onionr-profile-username" class="onionr-profile-username">arinerron</h2>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-sm-12 col-lg-6">
+                    <div class="row" id="onionr-timeline-posts">
+                        
+                    </div>
+                </div>
+
+                <div class="d-none d-lg-block col-lg-3">
+                    <div class="row">
+                        <div class="col-12">
+                            <div class="onionr-trending">
+                                <h2>Trending</h2>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
+        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
+        <script src="js/main.js"></script>
+
+        <script src="js/timeline.js"></script>
+    </body>
+</html>
diff --git a/onionr/static-data/ui/dist/js/main.js b/onionr/static-data/ui/dist/js/main.js
new file mode 100644
index 00000000..0141c5a1
--- /dev/null
+++ b/onionr/static-data/ui/dist/js/main.js
@@ -0,0 +1,170 @@
+/* returns a relative date format, e.g. "5 minutes" */
+function timeSince(date) {
+    // taken from https://stackoverflow.com/a/3177838/3678023
+
+    var seconds = Math.floor((new Date() - date) / 1000);
+    var interval = Math.floor(seconds / 31536000);
+
+    if (interval > 1)
+        return interval + " years";
+    interval = Math.floor(seconds / 2592000);
+    if (interval > 1)
+        return interval + " months";
+    interval = Math.floor(seconds / 86400);
+    if (interval > 1)
+        return interval + " days";
+    interval = Math.floor(seconds / 3600);
+    if (interval > 1)
+        return interval + " hours";
+    interval = Math.floor(seconds / 60);
+    if (interval > 1)
+        return interval + " minutes";
+    
+    return Math.floor(seconds) + " seconds";
+}
+
+/* replace all instances of string */
+String.prototype.replaceAll = function(search, replacement) {
+    // taken from https://stackoverflow.com/a/17606289/3678023
+    var target = this;
+    return target.split(search).join(replacement);
+};
+
+/* sanitizes HTML in a string */
+function encodeHTML(html) {
+    return String(html).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+/* URL encodes a string */
+function encodeURL(url) {
+    return encodeURIComponent(url);
+}
+
+/* user class */
+class User {    
+    constructor() {
+        this.name = 'Unknown';
+        this.id = 'unknown';
+        this.image = 'img/default.png';
+    }
+
+    setName(name) {
+        this.name = name;
+    }
+
+    getName() {
+        return this.name;
+    }
+    
+    setID(id) {
+        this.id = id;
+    }
+    
+    getID() {
+        return this.id;
+    }
+    
+    setIcon(image) {
+        this.image = image;
+    }
+    
+    getIcon() {
+        return this.image;
+    }
+}
+
+/* post class */
+class Post {
+    /* returns the html content of a post */
+    getHTML() {
+        var postTemplate = '<!-- POST -->\
+<div class="col-12">\
+    <div class="onionr-post">\
+        <div class="row">\
+            <div class="col-2">\
+                <img class="onionr-post-user-icon" src="$user-image">\
+            </div>\
+            <div class="col-10">\
+                <div class="row">\
+                    <div class="col">\
+                        <a class="onionr-post-user-name" href="#!" onclick="viewProfile(\'$user-id-url\', \'$user-name-url\')">$user-name</a>\
+                        <a class="onionr-post-user-id" href="#!" onclick="viewProfile(\'$user-id-url\', \'$user-name-url\')" data-placement="top" data-toggle="tooltip" title="$user-id">$user-id-truncated</a>\
+                    </div>\
+                    <div class="text-right pl-3 pr-3">\
+                        <div class="onionr-post-date" data-placement="top" data-toggle="tooltip" title="$date">$date-relative</div>\
+                    </div>\
+                </div>\
+                \
+                <div class="onionr-post-content">\
+                    $content\
+                </div>\
+                \
+                <div class="onionr-post-controls pt-2">\
+                    <a href="#!" class="glyphicon glyphicon-heart mr-2">like</a>\
+                    <a href="#!" class="glyphicon glyphicon-comment mr-2">comment</a>\
+                </div>\
+            </div>\
+        </div>\
+    </div>\
+</div>\
+<!-- END POST -->\
+';
+        
+        postTemplate = postTemplate.replaceAll('$user-name-url', encodeHTML(encodeURL(this.getUser().getName())));
+        postTemplate = postTemplate.replaceAll('$user-name', encodeHTML(this.getUser().getName()));
+        postTemplate = postTemplate.replaceAll('$user-id-url', encodeHTML(encodeURL(this.getUser().getID())));
+        postTemplate = postTemplate.replaceAll('$user-id-truncated', encodeHTML(this.getUser().getID().split('-').slice(0, 4).join('-')));
+        postTemplate = postTemplate.replaceAll('$user-id', encodeHTML(this.getUser().getID()));
+        postTemplate = postTemplate.replaceAll('$user-image', encodeHTML(this.getUser().getIcon()));
+        postTemplate = postTemplate.replaceAll('$content', encodeHTML(this.getContent()));
+        postTemplate = postTemplate.replaceAll('$date-relative', timeSince(this.getPostDate()) + ' ago');
+        postTemplate = postTemplate.replaceAll('$date', this.getPostDate().toLocaleString());
+        
+        return postTemplate;
+    }
+    
+    setUser(user) {
+        this.user = user;
+    }
+    
+    getUser() {
+        return this.user;
+    }
+    
+    setContent(content) {
+        this.content = content;
+    }
+    
+    getContent() {
+        return this.content;
+    }
+    
+    setPostDate(date) { // unix timestamp input
+        if(date instanceof Date)
+            this.date = date;
+        else
+            this.date = new Date(date * 1000);
+    }
+    
+    getPostDate() {
+        return this.date;
+    }
+}
+
+/* handy localstorage functions for quick usage */
+
+function set(key, val) {
+    return localStorage.setItem(key, val);
+}
+
+function get(key, df) { // df is default
+    value = localStorage.getItem(key);
+    if(value == null)
+        value = df;
+    
+    return value;
+}
+
+function remove(key) {
+    return localStorage.removeItem(key);
+}
diff --git a/onionr/static-data/ui/dist/js/timeline.js b/onionr/static-data/ui/dist/js/timeline.js
new file mode 100644
index 00000000..834568ca
--- /dev/null
+++ b/onionr/static-data/ui/dist/js/timeline.js
@@ -0,0 +1,20 @@
+/* write a random post to the page, for testing */
+function addRandomPost() {
+    var post = new Post();
+    var user = new User();
+    var items = ['arinerron', 'beardog108', 'samyk', 'snowden', 'aaronswartz'];
+    user.setName(items[Math.floor(Math.random()*items.length)]);
+    user.setID('i-eat-waffles-often-its-actually-crazy-like-i-dont-know-wow');
+    post.setContent('spammm ' + btoa(Math.random() + ' wow'));
+    post.setUser(user);
+    post.setPostDate(new Date(new Date() - (Math.random() * 1000000)));
+    
+    document.getElementById('onionr-timeline-posts').innerHTML += post.getHTML();
+}
+
+for(var i = 0; i < Math.round(50 * Math.random()); i++)
+    addRandomPost();
+    
+function viewProfile(id, name) {
+    document.getElementById("onionr-profile-username").innerHTML = encodeHTML(decodeURIComponent(name));
+}
diff --git a/onionr/static-data/ui/lang.json b/onionr/static-data/ui/lang.json
new file mode 100644
index 00000000..49bde688
--- /dev/null
+++ b/onionr/static-data/ui/lang.json
@@ -0,0 +1,31 @@
+{
+    "eng" : {
+        "ONIONR_TITLE" : "Onionr UI",
+        
+        "TIMELINE" : "Timeline",
+        "NOTIFICATIONS" : "Notifications",
+        "MESSAGES" : "Messages",
+        
+        "TRENDING" : "Trending"
+    },
+    
+    "spa" : {
+        "ONIONR_TITLE" : "Onionr UI",
+        
+        "TIMELINE" : "Linea de Tiempo",
+        "NOTIFICATIONS" : "Notificaciones",
+        "MESSAGES" : "Mensaje",
+        
+        "TRENDING" : "Trending"
+    },
+    
+    "zho" : {
+        "ONIONR_TITLE" : "洋葱 用户界面",
+        
+        "TIMELINE" : "时间线",
+        "NOTIFICATIONS" : "通知",
+        "MESSAGES" : "消息",
+        
+        "TRENDING" : "趋势"
+    }
+}
diff --git a/onionr/static-data/ui/src/css/main.css b/onionr/static-data/ui/src/css/main.css
new file mode 100644
index 00000000..d9e76be6
--- /dev/null
+++ b/onionr/static-data/ui/src/css/main.css
@@ -0,0 +1,74 @@
+/* general formatting */
+
+@media (min-width: 768px) {
+    .container-small {
+        width: 300px;
+    }
+    .container-large {
+        width: 970px;
+    }
+}
+@media (min-width: 992px) {
+    .container-small {
+        width: 500px;
+    }
+    .container-large {
+        width: 1170px;
+    }
+}
+@media (min-width: 1200px) {
+    .container-small {
+        width: 700px;
+    }
+    .container-large {
+        width: 1500px;
+    }
+}
+
+.container-small, .container-large {
+    max-width: 100%;
+}
+
+/* navbar */
+
+body {
+    margin-top: 5rem;
+}
+
+/* timeline */
+
+.onionr-post {
+    padding: 1rem;
+    margin-bottom: 1rem;
+
+    width: 100%;
+}
+
+.onionr-post-user-name {
+    display: inline;
+}
+
+.onionr-post-user-id:before { content: "("; }
+.onionr-post-user-id:after { content: ")"; }
+
+.onionr-post-content {
+    word-wrap: break-word;
+}
+
+.onionr-post-user-icon {
+    border-radius: 100%;
+    width: 100%;
+}
+
+/* profile */
+
+.onionr-profile-user-icon {
+    border-radius: 100%;
+    width: 100%;
+    margin-bottom: 1rem;
+}
+
+.onionr-profile-username {    
+    text-align: center;
+}
+
diff --git a/onionr/static-data/ui/src/css/themes/dark.css b/onionr/static-data/ui/src/css/themes/dark.css
new file mode 100644
index 00000000..4a547a29
--- /dev/null
+++ b/onionr/static-data/ui/src/css/themes/dark.css
@@ -0,0 +1,32 @@
+body {
+    background-color: #96928f;
+    color: #25383C;
+}
+
+/* timeline */
+
+.onionr-post {
+    border: 1px solid black;
+    border-radius: 1rem;
+    
+    background-color: lightgray;
+}
+
+.onionr-post-user-name {
+    color: green;
+    font-weight: bold;
+}
+
+.onionr-post-user-id {
+    color: gray;
+}
+
+.onionr-post-date {
+    color: gray;
+}
+
+.onionr-post-content {
+    font-family: sans-serif, serif;
+    border-top: 1px solid black;
+    font-size: 15pt;
+}
diff --git a/onionr/static-data/ui/src/img/default.png b/onionr/static-data/ui/src/img/default.png
new file mode 100644
index 0000000000000000000000000000000000000000..c422791623e540565801fa23ffead60d379c32ab
GIT binary patch
literal 6758
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
J9XxUIKLEN|s0jc7

literal 0
HcmV?d00001

diff --git a/onionr/static-data/ui/src/index.html b/onionr/static-data/ui/src/index.html
new file mode 100644
index 00000000..b23945b8
--- /dev/null
+++ b/onionr/static-data/ui/src/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <header />
+    </head>
+    <body>
+        <div class="container">
+            <div class="row">
+                <div class="d-none d-lg-block col-lg-3">
+                    <div class="onionr-profile">
+                        <div class="row">
+                            <div class="col-12">
+                                <img id="onionr-profile-user-icon" class="onionr-profile-user-icon" src="img/default.png">
+                            </div>
+                            <div class="col-12">
+                                <h2 id="onionr-profile-username" class="onionr-profile-username">arinerron</h2>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-sm-12 col-lg-6">
+                    <div class="row" id="onionr-timeline-posts">
+                        
+                    </div>
+                </div>
+
+                <div class="d-none d-lg-block col-lg-3">
+                    <div class="row">
+                        <div class="col-12">
+                            <div class="onionr-trending">
+                                <h2><$= LANG.TRENDING $></h2>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <footer />
+        <script src="js/timeline.js"></script>
+    </body>
+</html>
diff --git a/onionr/static-data/ui/src/js/main.js b/onionr/static-data/ui/src/js/main.js
new file mode 100644
index 00000000..7208cd21
--- /dev/null
+++ b/onionr/static-data/ui/src/js/main.js
@@ -0,0 +1,167 @@
+
+/* handy localstorage functions for quick usage */
+
+function set(key, val) {
+    return localStorage.setItem(key, val);
+}
+
+function get(key, df) { // df is default
+    value = localStorage.getItem(key);
+    if(value == null)
+        value = df;
+    
+    return value;
+}
+
+function remove(key) {
+    return localStorage.removeItem(key);
+}
+
+var usermap = JSON.parse(get('usermap', '{}'));
+
+function getUserMap() {
+    return usermap;
+}
+
+function deserializeUser(id) {
+    var serialized = getUserMap()[id]
+    var user = new User();
+    user.setName(serialized['name']);
+    user.setID(serialized['id']);
+    user.setIcon(serialized['icon']);
+}
+
+/* returns a relative date format, e.g. "5 minutes" */
+function timeSince(date) {
+    // taken from https://stackoverflow.com/a/3177838/3678023
+
+    var seconds = Math.floor((new Date() - date) / 1000);
+    var interval = Math.floor(seconds / 31536000);
+
+    if (interval > 1)
+        return interval + " years";
+    interval = Math.floor(seconds / 2592000);
+    if (interval > 1)
+        return interval + " months";
+    interval = Math.floor(seconds / 86400);
+    if (interval > 1)
+        return interval + " days";
+    interval = Math.floor(seconds / 3600);
+    if (interval > 1)
+        return interval + " hours";
+    interval = Math.floor(seconds / 60);
+    if (interval > 1)
+        return interval + " minutes";
+    
+    return Math.floor(seconds) + " seconds";
+}
+
+/* replace all instances of string */
+String.prototype.replaceAll = function(search, replacement) {
+    // taken from https://stackoverflow.com/a/17606289/3678023
+    var target = this;
+    return target.split(search).join(replacement);
+};
+
+/* sanitizes HTML in a string */
+function encodeHTML(html) {
+    return String(html).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+/* URL encodes a string */
+function encodeURL(url) {
+    return encodeURIComponent(url);
+}
+
+/* user class */
+class User {    
+    constructor() {
+        this.name = 'Unknown';
+        this.id = 'unknown';
+        this.image = 'img/default.png';
+    }
+
+    setName(name) {
+        this.name = name;
+    }
+
+    getName() {
+        return this.name;
+    }
+    
+    setID(id) {
+        this.id = id;
+    }
+    
+    getID() {
+        return this.id;
+    }
+    
+    setIcon(image) {
+        this.image = image;
+    }
+    
+    getIcon() {
+        return this.image;
+    }
+    
+    serialize() {
+        return {
+            'name' : this.getName(),
+            'id' : this.getID(),
+            'icon' : this.getIcon()
+        };
+    }
+    
+    remember() {
+        usermap[this.getID()] = this.serialize();
+        set('usermap', JSON.stringify(usermap));
+    }
+}
+
+/* post class */
+class Post {
+    /* returns the html content of a post */
+    getHTML() {
+        var postTemplate = '<$= jsTemplate('onionr-timeline-post') $>';
+        
+        postTemplate = postTemplate.replaceAll('$user-name-url', encodeHTML(encodeURL(this.getUser().getName())));
+        postTemplate = postTemplate.replaceAll('$user-name', encodeHTML(this.getUser().getName()));
+        postTemplate = postTemplate.replaceAll('$user-id-url', encodeHTML(encodeURL(this.getUser().getID())));
+        postTemplate = postTemplate.replaceAll('$user-id-truncated', encodeHTML(this.getUser().getID().split('-').slice(0, 4).join('-')));
+        postTemplate = postTemplate.replaceAll('$user-id', encodeHTML(this.getUser().getID()));
+        postTemplate = postTemplate.replaceAll('$user-image', encodeHTML(this.getUser().getIcon()));
+        postTemplate = postTemplate.replaceAll('$content', encodeHTML(this.getContent()));
+        postTemplate = postTemplate.replaceAll('$date-relative', timeSince(this.getPostDate()) + ' ago');
+        postTemplate = postTemplate.replaceAll('$date', this.getPostDate().toLocaleString());
+        
+        return postTemplate;
+    }
+    
+    setUser(user) {
+        this.user = user;
+    }
+    
+    getUser() {
+        return this.user;
+    }
+    
+    setContent(content) {
+        this.content = content;
+    }
+    
+    getContent() {
+        return this.content;
+    }
+    
+    setPostDate(date) { // unix timestamp input
+        if(date instanceof Date)
+            this.date = date;
+        else
+            this.date = new Date(date * 1000);
+    }
+    
+    getPostDate() {
+        return this.date;
+    }
+}
diff --git a/onionr/static-data/ui/src/js/timeline.js b/onionr/static-data/ui/src/js/timeline.js
new file mode 100644
index 00000000..834568ca
--- /dev/null
+++ b/onionr/static-data/ui/src/js/timeline.js
@@ -0,0 +1,20 @@
+/* write a random post to the page, for testing */
+function addRandomPost() {
+    var post = new Post();
+    var user = new User();
+    var items = ['arinerron', 'beardog108', 'samyk', 'snowden', 'aaronswartz'];
+    user.setName(items[Math.floor(Math.random()*items.length)]);
+    user.setID('i-eat-waffles-often-its-actually-crazy-like-i-dont-know-wow');
+    post.setContent('spammm ' + btoa(Math.random() + ' wow'));
+    post.setUser(user);
+    post.setPostDate(new Date(new Date() - (Math.random() * 1000000)));
+    
+    document.getElementById('onionr-timeline-posts').innerHTML += post.getHTML();
+}
+
+for(var i = 0; i < Math.round(50 * Math.random()); i++)
+    addRandomPost();
+    
+function viewProfile(id, name) {
+    document.getElementById("onionr-profile-username").innerHTML = encodeHTML(decodeURIComponent(name));
+}