color stuff, building settings form

7 files changed, 172 insertions, 22 deletions

diff --git a/views/pages/details.ejs b/views/pages/details.ejs
index a9e6c37..fa9bb58 100644
--- a/views/pages/details.ejs
+++ b/views/pages/details.ejs
@@ -1,5 +1,10 @@
 <% include ../partials/header %>
-<div class="subtitle"></div>
+<div class="subtitle">
+  <a href='/'>&lt; Home</a> &middot;
+  <span class="metadata"></span>
+  &middot;
+  <a href='#' class='settings_link'>Settings</a>
+</div>
 
 <div id="details_rapper">
   <% include ../partials/metadata %>
@@ -10,10 +15,13 @@
 
     <div class="right">
       <% include ../partials/gallery %>
+      <div id="audio"></div>
       <% include ../partials/files %>
       <% include ../partials/threads %>
     </div>
   </div>
+
+  <% include ../partials/settings %>
 </div>
 
 <% include ../partials/footer %>
diff --git a/views/pages/login.ejs b/views/pages/login.ejs
index 074be1a..82842df 100644
--- a/views/pages/login.ejs
+++ b/views/pages/login.ejs
@@ -15,6 +15,7 @@
     <div>
       <label for="login-submit"></label>
       <button id="login-submit">LOGIN</button>
+      <a href="/signup">Signup</a>
     </div>
 
     <br>
@@ -23,11 +24,6 @@
       <span class="errors">&nbsp;</span>
     </div>
     <br>
-    
-    <div>
-      <label></label>
-      <a href="/signup">Signup</a>
-    </div>
 
   </form>
 </div>
diff --git a/views/pages/signup.ejs b/views/pages/signup.ejs
new file mode 100644
index 0000000..baf653e
--- /dev/null
+++ b/views/pages/signup.ejs
@@ -0,0 +1,48 @@
+<% include ../partials/header %>
+
+<div id="login">
+  <br>
+  <img src="/assets/img/newme.jpg">
+
+  <form>
+    <div>
+      <label for="login-username">username</label>
+      <input type="text" id="login-username" name="username">
+    </div>
+
+    <div>
+      <label for="login-realname">real name</label>
+      <input type="text" id="login-realname" name="realname">
+    </div>
+
+    <div>
+      <label for="login-password">password</label>
+      <input type="password" id="login-password" name="password">
+    </div>
+
+    <div>
+      <label for="login-password2">again</label>
+      <input type="password" id="login-password2" name="password2">
+    </div>
+
+    <div style="margin-top: 8px;">
+      <label for="login-grass">say hello!</label>
+      <input type="text" id="login-grass" name="grass">
+    </div>
+
+    <div>
+      <label for="login-submit"></label>
+      <button id="login-submit">SIGNUP</button>
+      <a href="/login">Login</a>
+    </div>
+
+    <br>
+    <div>
+      <label></label>
+      <span class="errors">&nbsp;</span>
+    </div>
+
+  </form>
+</div>
+
+<% include ../partials/footer %>
diff --git a/views/partials/comments.ejs b/views/partials/comments.ejs
index ec27b09..907040f 100644
--- a/views/partials/comments.ejs
+++ b/views/partials/comments.ejs
@@ -6,20 +6,20 @@
         <a href="/profile/{{username}}">{{username}}</a>
       </td>
       <td colspan="2" class="comment">
-        <div>
+        <div class="body">
           {{comment}}
+          <div class="date">
+            {{date}} {{time}}<br>
+          </div>
+          <div class="edit-links">
+            <a href="/comment/{{id}}/edit">edit</a> &middot;
+            <a href="#" data-id="{{id}}" class='remove'>remove</a>
+            <!-- 
+               &middot;
+              <a href="/comment/{{id}}/reply">reply</a>
+            -->
+          </div>
         </div>
-        <span class="date">
-          {{date}} {{time}}
-        </span>
-        <span class="edit-links">
-          <a href="/comment/{{id}}/edit">edit</a> &middot;
-          <a href="#" data-id="{{id}}" class='remove'>remove</a>
-<!-- 
-           &middot;
-          <a href="/comment/{{id}}/reply">reply</a>
- -->
-        </span>
       </td>
     </tr>
   </script>
diff --git a/views/partials/files.ejs b/views/partials/files.ejs
index 34d476a..5b55f4b 100644
--- a/views/partials/files.ejs
+++ b/views/partials/files.ejs
@@ -1,4 +1,3 @@
-<div id="audio"></div>
 <table id="files">
   <script class="template" type="text/html">
     <tr class="file">
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs
index 92870f8..9563442 100644
--- a/views/partials/scripts.ejs
+++ b/views/partials/scripts.ejs
@@ -14,8 +14,10 @@
 <script src="/assets/js/lib/router.js"></script>
 
 <script src="/assets/js/util/format.js"></script>
+<script src="/assets/js/util/color.js"></script>
 
 <script src="/assets/js/lib/views/login/login.js"></script>
+<script src="/assets/js/lib/views/login/signup.js"></script>
 
 <script src="/assets/js/lib/views/index/index.js"></script>
 <script src="/assets/js/lib/views/index/lastlog.js"></script>
@@ -27,12 +29,13 @@
 <script src="/assets/js/lib/views/profile/profile.js"></script>
 
 <script src="/assets/js/lib/views/details/index.js"></script>
-<script src="/assets/js/lib/views/details/audio.js"></script>
+<script src="/assets/js/lib/views/details/settings.js"></script>
 <script src="/assets/js/lib/views/details/comments.js"></script>
-<script src="/assets/js/lib/views/details/files.js"></script>
-<script src="/assets/js/lib/views/details/gallery.js"></script>
 <script src="/assets/js/lib/views/details/commentform.js"></script>
 <script src="/assets/js/lib/views/details/editcomment.js"></script>
+<script src="/assets/js/lib/views/details/files.js"></script>
+<script src="/assets/js/lib/views/details/audio.js"></script>
+<script src="/assets/js/lib/views/details/gallery.js"></script>
 
 <script src="/assets/js/lib/views/mail/mailbox.js"></script>
 <script src="/assets/js/lib/views/mail/message.js"></script>
diff --git a/views/partials/settings.ejs b/views/partials/settings.ejs
new file mode 100644
index 0000000..bb5d9e4
--- /dev/null
+++ b/views/partials/settings.ejs
@@ -0,0 +1,96 @@
+<div class="modal" id="thread_settings">
+  <div class="inner">
+    <h2>thread settings</h2>
+    <a class="close_link">exit settings</a>
+    <form id="thread_controls">
+      <div id="thread_fields">
+        <div>
+          <label for="thread_title">Title</label>
+          <div>
+            <input id="thread_title" name="title" type="text">
+          </div>
+        </div>
+<!--
+        <div>
+          <label for="thread_bg">Background</label>
+          <div>
+            <input id="thread_bg" name="bg" type="text" placeholder="Enter URL"><br>
+            <img id="thread_bg_img" />
+          </div>
+        </div>
+-->
+        <div class="dropdown">
+          <label for="thread_color">Color</label>
+          <select id="thread_color" name="color"></select>
+        </div>
+        <div class="dropdown">
+          <label for="thread_keyword">Keyword</label>
+          <select id="thread_keyword" name="keyword"></select>
+        </div>
+        <div>
+          <label for="thread_hoots">hoot style</label>
+          <input id="thread_hoots" name="hoots" value="0" type="hidden">
+          <input id="thread_hoots" name="hoots" value="1" type="checkbox">
+        </div>
+        <div>
+          <label for="thread_shorturls">shorten urls</label>
+          <input id="thread_shorturls" name="shorturls" value="0" type="hidden">
+          <input id="thread_shorturls" name="shorturls" value="1" type="checkbox">
+        </div>
+        <div>
+          <label></label>
+          <input id="thread_submit" value="Save" type="submit">
+        </div>
+      </form>
+    
+    </div>
+  </div>
+</div>
+
+<style>
+  #thread_settings h2 {
+    font-size: 20px;
+    margin: 0;
+  }
+  #thread_settings .inner {
+    padding: 10px;
+    text-align: left;
+  }
+  #thread_controls {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: row;
+  }
+  #thread_controls > div {
+    max-width: 50%;
+  }
+  #thread_fields {
+    text-align: left;
+  }
+  #thread_fields > div {
+    display: flex;
+    flex-direction: row;
+    margin-top: 5px;
+  }
+  #thread_fields label {
+    margin-top: 4px;
+    padding-right: 5px;
+  }
+  #thread_fields .shim {
+    height: 10px;
+  }
+  #thread_fields input[type=text] {
+    font-size: 13px;
+    width: 200px;
+    transform: translateY(-2px);
+  }
+  #thread_settings .close_link {
+    position: absolute;
+    top: 15px;
+    right: 10px;
+  }
+  #thread_fields label {
+    display: block;
+    width: 80px;
+  }
+</style>
\ No newline at end of file