color stuff, building settings form

21 files changed, 582 insertions, 63 deletions

diff --git a/bucky/app/bucky.js b/bucky/app/bucky.js
index ab30e85..9d8d0a7 100644
--- a/bucky/app/bucky.js
+++ b/bucky/app/bucky.js
@@ -112,6 +112,21 @@ var bucky = module.exports = {
       }
     })
   },
+  prepareThread: function (req, res, next){
+    var thread = res.thread
+    if (thread) {
+      var settings
+      try {
+        settings = JSON.parse(thread.get('settings') || '{}')
+      } catch(e) {
+        settings = {}
+      }
+      res.thread.set("settings", settings)
+      res.thread.set("display", res.thread.get("display").toString())
+      res.thread.set("allowed", res.thread.get("allowed").toString())
+    }
+    next()
+  },
   ensureCommentThread: function (req, res, next){
     if (! res.comment) {
       return res.sendStatus(404)
@@ -135,9 +150,15 @@ var bucky = module.exports = {
     if (! keyword) return next()
     db.getKeyword(keyword).then(function(keyword){
       res.keyword = keyword
+      if (keyword) {
+        keyword.set("threads", keyword.get("threads").toString())
+        keyword.set("ops", keyword.get("ops").toString())
+        keyword.set("display", keyword.get("display").toString())
+      }
       next()
     })
   },
+
   ensureCommentsForThread: function (req, res, next){
     db.getCommentsForThread(res.thread.get('id')).then(function(comments){
       res.comments = comments
diff --git a/bucky/app/router.js b/bucky/app/router.js
index 1dfb0bd..fc5c7ea 100644
--- a/bucky/app/router.js
+++ b/bucky/app/router.js
@@ -30,6 +30,9 @@ module.exports = function(app){
   app.get("/details/:id", middleware.ensureAuthenticated, function(req, res){
     res.render("pages/details", {})
   })
+  app.get("/details/:id/settings", middleware.ensureAuthenticated, function(req, res){
+    res.render("pages/details", {})
+  })
 
   app.get("/post/",
     middleware.ensureAuthenticated,
@@ -102,10 +105,11 @@ module.exports = function(app){
   app.get("/api/thread/:id",
     middleware.ensureAuthenticated,
     bucky.ensureThread,
+    bucky.bumpViewCount,
     bucky.ensureKeywordForThread,
     bucky.ensureCommentsForThread,
     bucky.ensureFilesForThread,
-    bucky.bumpViewCount,
+    bucky.prepareThread,
     function(req, res){
       res.json({
         thread: res.thread,
diff --git a/public/assets/css/bucky.css b/public/assets/css/bucky.css
index a0ad54e..2e00022 100644
--- a/public/assets/css/bucky.css
+++ b/public/assets/css/bucky.css
@@ -3,6 +3,7 @@ html {
 }
 body {
   background-color: #e6f0f0;
+  transition: background-color 100ms;
 	color: #111111;
 	font-size: 10px;
 	font-family: Trebuchet MS, Helvetica, Arial, sans-serif;
@@ -336,12 +337,6 @@ tr:nth-child(even) td.black       { background-color: #eee; border-bottom-color:
   width: 50%;
 }
 
-.comment {
-  padding: 10px;
-  border-bottom: 1px solid #ccc;
-  border-left: 1px solid #ccc;
-  border-right: 1px solid #ccc;
-}
 #comments {
   width: 100%;
   max-width: 600px;
@@ -349,10 +344,10 @@ tr:nth-child(even) td.black       { background-color: #eee; border-bottom-color:
 }
 #comments tr .user {
   margin: 0;
-  padding: 0 3px 3px 0;
+  padding: 2px 2px 4px 0;
   text-align: center;
   font-size: 10px;
-  opacity: 0.8;
+  opacity: 0.9;
   vertical-align: top;
 }
 #comments .avatar {
@@ -367,20 +362,40 @@ tr:nth-child(even) td.black       { background-color: #eee; border-bottom-color:
 #comments tr:first-child .comment {
   border-top: 1px solid #ccc;
 }
-.comment div {
+.comment {
+  padding: 10px;
+  border-bottom: 1px solid #ccc;
+  border-left: 1px solid #ccc;
+  border-right: 1px solid #ccc;
+  position: relative;
+  vertical-align: top;
+  padding-right: 110px;
+}
+.comment .body {
   font-size: 12px;
+  line-height: 1.3;
+  max-width: 100%;
   padding-bottom: 3px;
 }
+.comment .date {
+  position: absolute;
+  bottom: 12px;
+  right: 8px;
+  display: inline-block;
+  text-align: right;
+}
 .comment .edit-links {
-  float: right;
+  position: absolute;
+  top: 12px;
+  right: 8px;
+  display: inline-block;
 }
 .comment .date,
 .comment .edit-links {
-  color: #d8cfcf;
-  opacity: 0;
+  color: #444;
+  font-size: 9px;
+  opacity: 0.8;
   transition: opacity 0.1s;
-  position: relative;
-  top: 4px;
 }
 .desktop .comment:hover .date,
 .mobile .date,
@@ -393,9 +408,8 @@ tr:nth-child(even) td.black       { background-color: #eee; border-bottom-color:
 .comment .edit-links a {
   color: #8f8ff8;
 }
-.desktop .comment .edit-links a:hover {
-  color: #11f;
-}
+.desktop .comment .edit-links:hover { opacity: 1.0; }
+.desktop .comment .edit-links a:hover { color: #11f; }
 .comment img {
   max-width: 100%;
 }
@@ -409,6 +423,7 @@ pre {
   width: 100%;
   overflow-x: hidden;
   background: #fefefe;
+  margin: 2px;
   padding: 5px;
   border: 1px solid #ddd;
 }
@@ -444,6 +459,9 @@ pre br {
 #thread_form input[type=submit] {
   margin: 0;
 }
+.settings_link {
+  font-weight: normal;
+}
 
 #comment_form {
   width: 100%;
@@ -481,11 +499,17 @@ pre br {
   opacity: 1;
 }
 #comment_form .inputs {
-  opacity: 0.4;
+  opacity: 1;
+}
+#comment_form input[type=submit] {
+  display: none;
 }
 #comment_form.focused .inputs {
   opacity: 1;
 }
+#comment_form.focused input[type=submit] {
+  display: block;
+}
 
 #files,
 #files tr {
@@ -547,6 +571,32 @@ pre br {
   max-width: 150px;
 }
 
+.modal {
+  position: fixed;
+  top: 0; left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0,0,0,0.2);
+  opacity: 0;
+  transition: opacity 200ms;
+  pointer-events: none;
+}
+.modal.visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+.modal .inner {
+  position: absolute;
+  top: 30%;
+  left: 50%;
+  transform: translate3d(-50%,-20%,0);
+  background: white;
+  border: 1px solid #ddd;
+  box-shadow: 0 1px 1px rgba(0,0,0,0.1);
+}
+#thread_settings {
+}
+
 #search {
   padding: 5px;
   color: #333;
diff --git a/public/assets/img/newme.jpg b/public/assets/img/newme.jpg
new file mode 100755
index 0000000..f27abc5
--- /dev/null
+++ b/public/assets/img/newme.jpg
diff --git a/public/assets/js/index.js b/public/assets/js/index.js
index 4576fd4..bbb7fd9 100644
--- a/public/assets/js/index.js
+++ b/public/assets/js/index.js
@@ -8,6 +8,8 @@ var app = (function(){
     $(window).on("focus", app.focus)
     $(window).on("blur", app.blur)
     
+    set_background_color_from_time()
+    
     auth.init(app.ready)
   }
   
diff --git a/public/assets/js/lib/router.js b/public/assets/js/lib/router.js
index 5862503..f9850e8 100644
--- a/public/assets/js/lib/router.js
+++ b/public/assets/js/lib/router.js
@@ -3,21 +3,23 @@ var SiteRouter = Router.extend({
 	el: "body",
 	
 	routes: {
-		"/":                  'login',
-		"/index/:keyword":    'index',
-		"/index":             'index',
-		"/login":             'login',
-		"/details/:id":       'details',
-		"/post":              'post',
-		"/post/:keyword":     'post',
-		"/search":            'search',
-		"/mail":              'mailbox',
-		"/mail/:mailbox":     'mailbox',
-		"/mail/compose":      'compose',
-		"/message/:id":       'message',
-		"/comment/:id/edit":  'editComment',
-		"/profile":           'profile',
-		"/profile/:username": 'profile',
+		"/":                     'login',
+		"/index/:keyword":       'index',
+		"/index":                'index',
+		"/login":                'login',
+		"/signup":               'signup',
+		"/details/:id":          'details',
+		"/details/:id/settings": 'threadSettings',
+		"/post":                 'post',
+		"/post/:keyword":        'post',
+		"/search":               'search',
+		"/mail":                 'mailbox',
+		"/mail/:mailbox":        'mailbox',
+		"/mail/compose":         'compose',
+		"/message/:id":          'message',
+		"/comment/:id/edit":     'editComment',
+		"/profile":              'profile',
+		"/profile/:username":    'profile',
 	},
 	
 	initialize: function(){
@@ -32,10 +34,19 @@ var SiteRouter = Router.extend({
     app.view = new LoginView ()
   },
   
+  signup: function(){
+    app.view = new SignupView ()
+  },
+  
   details: function(id){
     app.view = new DetailsView ()
     app.view.load(id)
   },
+
+  threadSettings: function(id){
+    app.view = new DetailsView ({ settings: true })
+    app.view.load(id)
+  },
   
   editComment: function(id){
     app.view = new EditCommentForm ()
diff --git a/public/assets/js/lib/views/details/comments.js b/public/assets/js/lib/views/details/comments.js
index c679d22..473fb22 100644
--- a/public/assets/js/lib/views/details/comments.js
+++ b/public/assets/js/lib/views/details/comments.js
@@ -19,7 +19,7 @@ var CommentsView = FormView.extend({
   },
   
   parse: function(comment){
-    if (! comment.comment.length) return $('<div></div>')
+    if (! comment.comment.length) return $('')
     var datetime = verbose_date(comment.date, true)
     var t = this.template.replace(/{{username}}/g, comment.username)
                          .replace(/{{id}}/g, comment.id)
diff --git a/public/assets/js/lib/views/details/files.js b/public/assets/js/lib/views/details/files.js
index ad2df85..e8832a7 100644
--- a/public/assets/js/lib/views/details/files.js
+++ b/public/assets/js/lib/views/details/files.js
@@ -50,16 +50,17 @@ var FilesView = FormView.extend({
                          .replace(/{{time}}/g, datetime[1])
                          .replace(/{{size_class}}/g, size[0])
                          .replace(/{{size}}/g, size[1])
+    var $t = $(t)
     return t
   },
   
   prependFile: function(file){
-    var $el = $( this.parse(file) )
+    var $el = this.parse(file)
     this.$el.prepend($el)
   },
 
   appendFile: function(file){
-    var $el = $( this.parse(file) )
+    var $el = this.parse(file)
     this.$el.append($el)
   },
   
diff --git a/public/assets/js/lib/views/details/index.js b/public/assets/js/lib/views/details/index.js
index 8dc92f6..5550173 100644
--- a/public/assets/js/lib/views/details/index.js
+++ b/public/assets/js/lib/views/details/index.js
@@ -12,6 +12,8 @@ var DetailsView = View.extend({
     this.gallery = new GalleryView ({ parent: this })
     this.form = new CommentForm ({ parent: this })
     this.threadbox = new ThreadBox ({ parent: this })
+    this.settings = new ThreadSettingsForm ({ parent: this })
+    $(".settings_link").click(this.openSettings.bind(this))
   },
   
   load: function(id){
@@ -20,11 +22,15 @@ var DetailsView = View.extend({
   },
   
   populate: function(data){
+    this.data = data
+    console.log(data)
+    set_background_color(data.thread.color || data.keyword.color)
     $("body").removeClass('loading')
     var thread = data.thread
     $("h1").html(sanitize(thread.title))
     $("title").html(sanitize(thread.title))
-    $(".subtitle").show().html("<a href='/'>&lt; Home</a> | " + metadata(thread))
+    $(".metadata").html(metadata(thread))
+    $(".settings_link").attr("href", "/details/" + thread.id + "/settings")
     this.form.load(data.thread)
     this.comments.load(data.comments)
     this.files.load(data.files)
@@ -32,14 +38,18 @@ var DetailsView = View.extend({
     if (data.thread.keyword) {
       $.get(this.keywordAction + data.thread.keyword, this.populateKeyword.bind(this))
     }
+    if (this.options.settings) {
+      this.openSettings()
+    }
   },
   
   populateKeyword: function(data){
     this.threadbox.load(data)
   },
   
-  success: function(){
-    window.location.href = "/index"
+  openSettings: function(e){
+    e && e.preventDefault()
+    this.settings.show()
   },
 
 })
diff --git a/public/assets/js/lib/views/details/settings.js b/public/assets/js/lib/views/details/settings.js
new file mode 100644
index 0000000..6e6b0b2
--- /dev/null
+++ b/public/assets/js/lib/views/details/settings.js
@@ -0,0 +1,95 @@
+var ThreadSettingsForm = FormView.extend({
+  
+  el: "#thread_settings",
+  
+  events: {
+    "click": "hide",
+    "click .inner": "stopPropagation",
+    "click .close_link": "hide"
+  },
+  
+  action: "",
+  method: 'put',
+  
+  initialize: function(){
+    this.__super__.initialize.call(this)
+    this.template = this.$(".template").html()
+  },
+  
+  populate: function(){
+    // this.action = "/api/thread/" + data.id
+    $("body").removeClass("loading")
+    
+    var data = this.options.parent.data
+    var keywords = data.keywords
+    var keyword = data.keyword
+    var thread = data.thread
+    var comments = data.comments
+    var files = data.files
+    var settings = thread.settings
+    var display = thread.display
+
+    this.$(".close_link").attr("href", "/details/" + thread.id)
+    this.$(".metadata").html(metadata(thread))
+    this.$("[name=title]").val(sanitize(thread.title))
+
+    var $color = this.$('[name=color]')
+    Object.keys(COLORS).forEach((color) => {
+      var option = document.createElement('option')
+      option.value = color
+      option.innerHTML = color
+      $color.append(option)
+    })
+    $color.val(thread.color || keyword.color)
+    
+    $.get('/api/keywords', function(data){
+      var $keyword = this.$('[name=keyword]')
+      data.keywords
+      .map( (a) => a.keyword)
+      .sort( (a,b) => a < b ? -1 : a === b ? 0 : 1 )
+      .forEach((keyword) => {
+        var option = document.createElement('option')
+        option.value = keyword
+        option.innerHTML = keyword
+        $keyword.append(option)
+      })
+      $keyword.val(thread.keyword)
+    }.bind(this))
+    console.log(thread)
+  },
+  
+  validate: function(){
+    var errors = []
+    var comment = $("[name=comment]").val()
+    if (! comment || ! comment.length) {
+      errors.push("Please enter a comment.")
+    }
+    return errors.length ? errors : null
+  },
+
+  success: function(data){
+    window.location.href = "/details/" + data.comment.thread
+  },
+
+  visible: false,
+  
+  show: function(){
+    this.visible = true
+    this.populate()
+    this.$el.addClass('visible')
+    app.router.pushState("/details/" + this.options.parent.data.thread.id + "/settings")
+  },
+
+  hide: function(e){
+    e && e.preventDefault()
+    this.visible = false
+    this.$el.removeClass('visible')
+    app.router.pushState("/details/" + this.options.parent.data.thread.id)
+  },
+
+  toggle: function(){
+    if (this.visible) this.hide()
+    else this.show()
+  },
+
+})
\ No newline at end of file
diff --git a/public/assets/js/lib/views/login/signup.js b/public/assets/js/lib/views/login/signup.js
new file mode 100644
index 0000000..d3d407d
--- /dev/null
+++ b/public/assets/js/lib/views/login/signup.js
@@ -0,0 +1,49 @@
+var SignupView = FormView.extend({
+  
+  el: "#signup",
+  action: "/api/signup",
+  method: "put",
+  
+  initialize: function(opt){
+    this.__super__.initialize.call(this)
+    $("body").removeClass("loading")
+    this.$("[name=username]").focus()
+  },
+  
+  validate: function(){
+    var errors = []
+    if (! this.$("[name=username]").val().length) {
+      errors.push("Please enter a username")
+    }
+    if (! this.$("[name=password]").val().length) {
+      errors.push("Please enter a password")
+    }
+    if (this.$("[name=password]").val() !== this.$("[name=password2]").val()) {
+      errors.push("Passwords don't match")
+    }
+    return errors.length ? errors : null
+  },
+  
+  showErrors: function(errors){
+    $(".errors").show().css({ opacity: 1 }).html(errors.join("<br>"))
+  },
+  
+  success: function(data){
+    console.log("LOGGED IN?", data)
+    if (data.user) {
+      auth.set_user(data.user)
+    }
+    else {
+      this.showErrors()
+      return
+    }
+    if (data.returnTo) {
+      console.log(data.returnTo)
+      window.location.href = data.returnTo
+    }
+    else {
+      window.location.href = "/index"
+    }
+  },
+
+})
diff --git a/public/assets/js/util/color.js b/public/assets/js/util/color.js
new file mode 100644
index 0000000..bcdfe77
--- /dev/null
+++ b/public/assets/js/util/color.js
@@ -0,0 +1,121 @@
+function Color (r,g,b,a) {
+  this.r = r
+  this.g = g
+  this.b = b
+  this.a = a || 1.0
+}
+Color.prototype.toString = function(){
+  return "rgba(" + Math.round(this.r) + "," + Math.round(this.g) + "," + Math.round(this.b) + "," + this.a + ")";
+}
+Color.prototype.rgb = function(){
+  return [ this.r, this.g, this.b ];
+}
+Color.prototype.rgba = function(){
+  return [ this.r, this.g, this.b, this.a ];
+}
+Color.prototype.clone = function(){
+  return new Color(this.r, this.g, this.b, this.a);
+}
+Color.prototype.alpha = function(a){
+  var c = this.copy()
+  c.a = a;
+  return c;
+}
+Color.prototype.add = function(n){
+  if (! n) return
+  this.r = clamp(Math.round(this.r + n), 0, 255)
+  this.g = clamp(Math.round(this.g + n), 0, 255)
+  this.b = clamp(Math.round(this.b + n), 0, 255)
+  return this
+}
+Color.prototype.mottle = function(n){
+  n = n || 30
+  this.r = clamp(this.r + randrange(-n, n), 0, 255)
+  this.g = clamp(this.g + randrange(-n, n), 0, 255)
+  this.b = clamp(this.b + randrange(-n, n), 0, 255)
+  return this
+}
+Color.prototype.mottleRGB = function(r,g,b){
+  r = r || 0 ; g = g || 0 ; b = b || 0
+  this.r = clamp(this.r + randrange(-r, r), 0, 255)
+  this.g = clamp(this.g + randrange(-g, g), 0, 255)
+  this.b = clamp(this.b + randrange(-b, b), 0, 255)
+  return this
+}
+Color.prototype.swatch = function(){
+  var el = document.createElement("div");
+  el.style.className = "swatch";
+  el.style.width = 16 + "px";
+  el.style.height = 16 + "px";
+  el.style.backgroundColor = this.toString();
+  $(el).data("color", this);
+  return el;
+}
+
+var COLORS = {
+  plain: new Color(230,240,240),
+  ivory: new Color(240,240,235),
+  pink: new Color(240,223,235),
+  red: new Color(240,224,223),
+  orange: new Color(240,232,223),
+  yellow: new Color(240,240,231),
+  green: new Color(233,240,231),
+  blue: new Color(224,226,240),
+  purple: new Color(235,231,240),
+  black: new Color(32,32,37),
+}
+
+function nighttime_quotient() {
+  var q = -10;
+  var date = new Date()
+  var x;
+  var h = date.getHours()
+  var m = date.getMinutes()
+  if (h < 5 || h > 23)
+    { return q; }
+  if (h >= 5 && h <= 7)
+    { x = 60*60*3 - 60 * (h - 5) + m; }
+  if (h >= 21 && h <= 23)
+    { x = 60 * (h - 21) + m; }
+  x /= 60*60*3;
+  return q * x;
+}
+function get_color_from_time(){
+  var date = new Date()
+  var h = date.getHours()
+  var m = date.getMinutes()
+  var c;
+  if ((h == 4 || h == 16) && m == 20)
+    { c = "green"; }
+  else if (h < 5)
+    { c = "blue"; }
+  else if (h >= 5 && h < 6)
+    { c = "red"; }
+  else if (h >= 6 && h < 9)
+    { c = "orange"; }
+  else if (h >= 9 && h < 12)
+    { c = "yellow"; }
+  else if (h >= 12 && h < 18)
+    { c = "plain"; }
+  else if (h >= 18 && h < 21)
+    { c = "blue"; }
+  else if (h >= 21)
+    { c = "blue"; }
+  else
+    { c = "plain"; }
+  return c;
+}
+function set_background_color_from_time(){
+  var color_name = get_color_from_time()
+  set_background_color(color_name)
+}
+function set_background_color(color_name){
+  console.log(color_name)
+  color_name = color_name || "plain"
+  var color = COLORS[color_name]
+    .clone()
+    .mottleRGB(4,4,8)
+//     .add(nighttime_quotient())
+console.log(color.toString())
+  document.body.style.backgroundColor = color.toString()
+}
diff --git a/public/assets/js/util/format.js b/public/assets/js/util/format.js
index be7e3c0..4630fc9 100644
--- a/public/assets/js/util/format.js
+++ b/public/assets/js/util/format.js
@@ -58,7 +58,8 @@ function verbose_date (date, no_pad_hours) {
 	if (m < 10) m = "0" + m
 	if (! no_pad_hours && h < 10) h = "0" + h
   
-  var date = d + '&#8209;' + short_months[date.getMonth()] + '&#8209;' + date.getFullYear()
+  // non-breaking hyphen: &#8209;
+  var date = d + '&nbsp;' + short_months[date.getMonth()] + '&nbsp;' + date.getFullYear()
   var time = h + ':' + m + meridian
   
   return [date, time]
diff --git a/public/assets/js/vendor/view/router.js b/public/assets/js/vendor/view/router.js
index 5371f80..b0e2f84 100644
--- a/public/assets/js/vendor/view/router.js
+++ b/public/assets/js/vendor/view/router.js
@@ -9,6 +9,10 @@ var Router = View.extend({
 		this.parseRoute(window.location.pathname)
 	},
 	
+	pushState: function(pathname){
+    window.history.pushState({}, "", pathname)
+	},
+	
 	parseRoute: function(pathname){
 
 		var routes = is_mobile && this.mobileRoutes ? this.mobileRoutes : this.routes,
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