integrate inbox, qrcode into home

Gemfile

@@ -3,6 +3,7 @@ source "http://rubygems.org"
 gem "compass"
 gem "middleman"
 gem "middleman-smusher"
+gem "middleman-livereload"
 
 gem "compass-holmes"
 gem 'oily_png'

Gemfile.lock

@@ -15,12 +15,17 @@ GEM
       sass (~> 3.1)
     compass-holmes (0.1.1)
       compass (>= 0.11)
+    em-websocket (0.4.0)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0.5.3)
+    eventmachine (1.0.0)
     execjs (1.4.0)
       multi_json (~> 1.0)
     ffi (1.3.1)
     fssm (0.2.10)
     haml (3.1.7)
     hike (1.2.1)
+    http_parser.rb (0.5.3)
     http_router (0.10.2)
       rack (>= 1.0.0)
       url_mount (~> 0.2.1)
@@ -44,6 +49,11 @@ GEM
       rb-inotify (~> 0.8.8)
       thor (~> 0.15.4)
       tilt (~> 1.3.1)
+    middleman-livereload (3.0.1)
+      em-websocket (>= 0.2.0)
+      middleman-core (~> 3.0.2)
+      multi_json (~> 1.0)
+      rack-livereload
     middleman-more (3.0.11)
       coffee-script (~> 2.2.0)
       coffee-script-source (~> 1.3.3)
@@ -76,6 +86,8 @@ GEM
       i18n (~> 0.6)
       padrino-core (= 0.10.7)
     rack (1.4.5)
+    rack-livereload (0.3.11)
+      rack
     rack-protection (1.3.2)
       rack
     rack-test (0.6.2)
@@ -124,6 +136,7 @@ DEPENDENCIES
   compass
   compass-holmes
   middleman
+  middleman-livereload
   middleman-smusher
   oily_png
   rake

Rakefile

@@ -18,7 +18,7 @@ task :deploy do
     exclude = "--exclude-from '#{File.expand_path('./rsync-exclude')}'"
   end
   puts "## Deploying website via Rsync"
-  ok_failed system("rsync -avze 'ssh -p #{ssh_port}' #{exclude} #{"--delete" unless rsync_delete == false} \"#{public_dir}/\" \"#{ssh_user}:#{document_root}\"")
+  system("rsync -avze 'ssh -p #{ssh_port}' #{exclude} #{"--delete" unless rsync_delete == false} \"#{public_dir}/\" \"#{ssh_user}:#{document_root}\"")
 end
 
 desc "Generate website and deploy"

config.rb

@@ -96,6 +96,7 @@ configure :build do
 
   activate :gzip
 
+  activate :livereload
   # Or use a different image path
   # set :http_path, "/Content/images/"
 end

source/_footer.slim

@@ -1,11 +1,11 @@
 a name="about"
 p
   ' © Copyright 2013 |
-  ==link_to "Albert Schulz", "/albert", :title => "About Albert"
+  == link_to "Albert Schulz", "/albert", title: "About Albert"
   ' ,
-  ==link_to "Jörg Thalheim", "/joerg", :title => "About Jörg"
+  == link_to "Jörg Thalheim", "/joerg", title: "About Jörg"
 p
   ' using
   a href="http://ethanschoonover.com/solarized" title="color palette used on our website" target="_blank" solarized
   ', more infos
-  ==link_to "here", "/humans.txt", :title => "About this website"
+  == link_to "here", "/humans.txt", :title => "About this website"

source/albert/index.html

@@ -17,6 +17,7 @@
 
         <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
         <script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
+        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.0.min.js"><\/script>')</script>
         <script src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script>
 
         <script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
@@ -84,11 +85,7 @@
             Bullet Icons by <a href="http://www.fatcow.com">FatCow</a>
         </footer>
 
-
+        <!--Piwik--!>
-        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
-        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.0.min.js"><\/script>')</script>
-
-        // Piwik
         <script>
           var pkBaseURL = (("https:" == document.location.protocol) ? "https://piwik.higgsboson.tk/" : "http://piwik.higgsboson.tk/");
           document.write(unescape("%3Cscript src='" + pkBaseURL + "piwik.js' type='text/javascript'%3E%3C/script%3E"));

source/inbox/DropboxUploader.php

@@ -0,0 +1,164 @@
+<?php
+/**
+ * Dropbox Uploader
+ * 
+ * Copyright (c) 2009 Jaka Jancar
+ * 
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ *
+ * @author Jaka Jancar [jaka@kubje.org] [http://jaka.kubje.org/]
+ * @version 1.1.7
+ */
+class DropboxUploader {
+    protected $email;
+    protected $password;
+    protected $caCertSourceType = self::CACERT_SOURCE_SYSTEM;
+    const CACERT_SOURCE_SYSTEM = 0;
+    const CACERT_SOURCE_FILE = 1;
+    const CACERT_SOURCE_DIR = 2;
+    protected $caCertSource;
+    protected $loggedIn = false;
+    protected $cookies = array();
+
+    /**
+     * Constructor
+     *
+     * @param string $email
+     * @param string|null $password
+     * @throws Exception
+     */
+    public function __construct($email, $password) {
+        // Check requirements
+        if (!extension_loaded('curl'))
+            throw new Exception('DropboxUploader requires the cURL extension.');
+        
+        $this->email = $email;
+        $this->password = $password;
+    }
+    
+    public function setCaCertificateFile($file)
+    {
+        $this->caCertSourceType = self::CACERT_SOURCE_FILE;
+        $this->caCertSource = $file;
+    }
+    
+    public function setCaCertificateDir($dir)
+    {
+        $this->caCertSourceType = self::CACERT_SOURCE_DIR;
+        $this->caCertSource = $dir;
+    }
+
+    public function upload($source, $remoteDir='/', $remoteName=null) {
+        if (!is_file($source) or !is_readable($source))
+            throw new Exception("File '$source' does not exist or is not readable.");
+
+        if (!is_string($remoteDir))
+            throw new Exception("Remote directory must be a string, is ".gettype($remoteDir)." instead.");
+
+        if (is_null($remoteName)) {
+            # intentionally left blank
+        } else if (!is_string($remoteName)) {
+            throw new Exception("Remote filename must be a string, is ".gettype($remoteDir)." instead.");
+        } else {
+            $source .= ';filename='.$remoteName;
+        }
+
+        if (!$this->loggedIn)
+            $this->login();
+        
+        $data = $this->request('https://www.dropbox.com/home');
+        $token = $this->extractToken($data, 'https://dl-web.dropbox.com/upload');
+
+
+        $postData = array('plain'=>'yes', 'file'=>'@'.$source, 'dest'=>$remoteDir, 't'=>$token);
+        $data = $this->request('https://dl-web.dropbox.com/upload', true, $postData);
+        if (strpos($data, 'HTTP/1.1 302 FOUND') === false)
+            throw new Exception('Upload failed!');
+    }
+    
+    protected function login() {
+        $data = $this->request('https://www.dropbox.com/login');
+        $token = $this->extractTokenFromLoginForm($data);
+
+        $postData = array('login_email'=>$this->email, 'login_password'=>$this->password, 't'=>$token);
+        $data = $this->request('https://www.dropbox.com/login', true, $postData);
+
+        if (stripos($data, 'location: /home') === false)
+            throw new Exception('Login unsuccessful.');
+        
+        $this->loggedIn = true;
+    }
+
+    protected function request($url, $post=false, $postData=array()) {
+        $ch = curl_init();
+        curl_setopt($ch, CURLOPT_URL, $url);
+        curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 2);
+        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, true);
+        switch ($this->caCertSourceType) {
+            case self::CACERT_SOURCE_FILE:
+                curl_setopt($ch, CURLOPT_CAINFO, $this->caCertSource);
+                break;
+            case self::CACERT_SOURCE_DIR:
+                curl_setopt($ch, CURLOPT_CAPATH, $this->caCertSource);
+                break;
+        }
+        curl_setopt($ch, CURLOPT_HEADER, 1);
+        curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
+        if ($post) {
+            curl_setopt($ch, CURLOPT_POST, $post);
+            curl_setopt($ch, CURLOPT_POSTFIELDS, $postData);
+        }
+        
+        // Send cookies
+        $rawCookies = array();
+        foreach ($this->cookies as $k=>$v)
+            $rawCookies[] = "$k=$v";
+        $rawCookies = implode(';', $rawCookies);
+        curl_setopt($ch, CURLOPT_COOKIE, $rawCookies);
+        
+        $data = curl_exec($ch);
+        
+        if ($data === false) {
+            throw new Exception(sprintf('Curl error: (#%d) %s', curl_errno($ch), curl_error($ch)));
+        }
+        
+        // Store received cookies
+        preg_match_all('/Set-Cookie: ([^=]+)=(.*?);/i', $data, $matches, PREG_SET_ORDER);
+        foreach ($matches as $match)
+            $this->cookies[$match[1]] = $match[2];
+        
+        curl_close($ch);
+        
+        return $data;
+    }
+
+    protected function extractTokenFromLoginForm($html) {
+        // <input type="hidden" name="t" value="UJygzfv9DLLCS-is7cLwgG7z" />
+        if (!preg_match('#<input type="hidden" name="t" value="([A-Za-z0-9_-]+)" />#', $html, $matches))
+            throw new Exception('Cannot extract login CSRF token.');
+        return $matches[1];
+    }
+
+    protected function extractToken($html, $formAction) {
+        if (!preg_match('/<form [^>]*'.preg_quote($formAction, '/').'[^>]*>.*?(<input [^>]*name="t" [^>]*value="(.*?)"[^>]*>).*?<\/form>/is', $html, $matches) || !isset($matches[2]))
+            throw new Exception("Cannot extract token! (form action=$formAction)");
+        return $matches[2];
+    }
+
+}

source/inbox/index.html.slim

@@ -0,0 +1,6 @@
+== javascript_include_tag "jquery-1.9.1.min.js"
+== javascript_include_tag "dropzone.js"
+
+h1 Inbox
+p
+  form#my-awesome-dropzone.dropzone.clickable action="/upload"

source/inbox/upload.php

@@ -0,0 +1,62 @@
+<?php
+require 'DropboxUploader.php';
+
+
+function trimds($s) {
+  return rtrim($s, DIRECTORY_SEPARATOR);
+}
+
+function joinpaths() {
+  $trimmed = array_map('trimds',  func_get_args());
+  return implode(DIRECTORY_SEPARATOR, $trimmed);
+}
+
+function upload($src, $filename, $directory, $email, $password) {
+  $subdir = basename($directory);
+  $dest = joinpaths("Server", "inbox", $subdir);
+
+  try {
+    if ($filename === "") {
+      throw new Exception('File name not supplied by the browser.');
+    }
+
+
+    $uploader = new DropboxUploader($email, $password);
+    $uploader->upload($src, $dest, $filename);
+  } catch (Exception $e) {
+    $stored_exc = $e; // workaround missing finally-block
+  }
+
+  if (isset($stored_exc)) {
+    throw($stored_exc);
+  }
+};
+
+if ($_POST) {
+  try {
+    if (isset($_POST['dest'])) {
+      $dest = $_POST['dest'];
+    } else {
+      $dest = "";
+    }
+    $file = "../../dropbox-secret.ini";
+    if (file_exists($file) && is_readable($file)) {
+      $secret = parse_ini_file($file);
+      $email = $secret["email"];
+      $password = $secret["password"];
+      upload($_POST['file_path'], $_POST['file_name'], $dest,
+        $email, $password);
+      echo 'File successfully uploaded to your Dropbox!';
+    } else {
+      echo("$file not readable");
+    }
+  } catch(Exception $e) {
+    #http_response_code(404);
+    echo 'Error: ' . htmlspecialchars($e->getMessage());
+  }
+
+  if (isset($file) && file_exists($file)) {
+    unlink($file);
+  }
+}
+?>

source/index.html.slim

@@ -14,6 +14,10 @@ section
       i.icon-edit.icon-2x
       span
         a href="http://pad.higgsboson.tk" title="collaborative editing" Etherpad Lite
+    li
+      i.icon-comments.icon-2x
+      span
+        == link_to "Jabber", "/jabber", title: "Our jabber server"
     li
       i.icon-github-sign.icon-2x
       span
@@ -21,7 +25,7 @@ section
     li
       i.icon-inbox.icon-2x
       span
-        a href="http://inbox.higgsboson.tk" title="An Uploader" Inbox
+        == link_to "Inbox", "/inbox", title: "Send us your files"
     li
       i.icon-download-alt.icon-2x
       span
@@ -33,8 +37,8 @@ section
     li
       i.icon-qrcode.icon-2x
       span
-        a href="http://higgsboson.tk/qr" title="html5 qr-code generator" QR-Generator
+        == link_to "QR-Code Generator", "/qr", title: "html5 qr-code generator"
     li
       i.icon-lock.icon-2x
       span
-        a href="/privat.html" title="Internal pages" Privat
+        == link_to "Private", "/privat.html", title: "Internal pages"

source/jabber/index.html.slim

@@ -0,0 +1,25 @@
+h1 Our Jabber-Server
+
+h2 Connection information
+p Open for registration!
+table summary="Connection information"
+  tr
+    td Server Address:
+    td higgsboson.tk
+  tr
+    td
+      ' MUC:
+      br
+      '(Chat Rooms)
+    td muc.higgsboson.tk
+  tr
+    td
+      ' File Proxy:
+      br
+      ' (to send files)
+    td proxy.higgsboson.tk:5000
+
+p
+  ' Don't have a jabber client?
+  ' Just visit our
+  a href="http://muc.higgsboson.tk/" browser-based chat

source/javascripts/dropzone.js

@@ -0,0 +1,892 @@
+;(function(){
+
+
+/**
+ * hasOwnProperty.
+ */
+
+var has = Object.prototype.hasOwnProperty;
+
+/**
+ * Require the given path.
+ *
+ * @param {String} path
+ * @return {Object} exports
+ * @api public
+ */
+
+function require(path, parent, orig) {
+  var resolved = require.resolve(path);
+
+  // lookup failed
+  if (null == resolved) {
+    orig = orig || path;
+    parent = parent || 'root';
+    var err = new Error('Failed to require "' + orig + '" from "' + parent + '"');
+    err.path = orig;
+    err.parent = parent;
+    err.require = true;
+    throw err;
+  }
+
+  var module = require.modules[resolved];
+
+  // perform real require()
+  // by invoking the module's
+  // registered function
+  if (!module.exports) {
+    module.exports = {};
+    module.client = module.component = true;
+    module.call(this, module.exports, require.relative(resolved), module);
+  }
+
+  return module.exports;
+}
+
+/**
+ * Registered modules.
+ */
+
+require.modules = {};
+
+/**
+ * Registered aliases.
+ */
+
+require.aliases = {};
+
+/**
+ * Resolve `path`.
+ *
+ * Lookup:
+ *
+ *   - PATH/index.js
+ *   - PATH.js
+ *   - PATH
+ *
+ * @param {String} path
+ * @return {String} path or null
+ * @api private
+ */
+
+require.resolve = function(path) {
+  var index = path + '/index.js';
+
+  var paths = [
+    path,
+    path + '.js',
+    path + '.json',
+    path + '/index.js',
+    path + '/index.json'
+  ];
+
+  for (var i = 0; i < paths.length; i++) {
+    var path = paths[i];
+    if (has.call(require.modules, path)) return path;
+  }
+
+  if (has.call(require.aliases, index)) {
+    return require.aliases[index];
+  }
+};
+
+/**
+ * Normalize `path` relative to the current path.
+ *
+ * @param {String} curr
+ * @param {String} path
+ * @return {String}
+ * @api private
+ */
+
+require.normalize = function(curr, path) {
+  var segs = [];
+
+  if ('.' != path.charAt(0)) return path;
+
+  curr = curr.split('/');
+  path = path.split('/');
+
+  for (var i = 0; i < path.length; ++i) {
+    if ('..' == path[i]) {
+      curr.pop();
+    } else if ('.' != path[i] && '' != path[i]) {
+      segs.push(path[i]);
+    }
+  }
+
+  return curr.concat(segs).join('/');
+};
+
+/**
+ * Register module at `path` with callback `definition`.
+ *
+ * @param {String} path
+ * @param {Function} definition
+ * @api private
+ */
+
+require.register = function(path, definition) {
+  require.modules[path] = definition;
+};
+
+/**
+ * Alias a module definition.
+ *
+ * @param {String} from
+ * @param {String} to
+ * @api private
+ */
+
+require.alias = function(from, to) {
+  if (!has.call(require.modules, from)) {
+    throw new Error('Failed to alias "' + from + '", it does not exist');
+  }
+  require.aliases[to] = from;
+};
+
+/**
+ * Return a require function relative to the `parent` path.
+ *
+ * @param {String} parent
+ * @return {Function}
+ * @api private
+ */
+
+require.relative = function(parent) {
+  var p = require.normalize(parent, '..');
+
+  /**
+   * lastIndexOf helper.
+   */
+
+  function lastIndexOf(arr, obj) {
+    var i = arr.length;
+    while (i--) {
+      if (arr[i] === obj) return i;
+    }
+    return -1;
+  }
+
+  /**
+   * The relative require() itself.
+   */
+
+  function localRequire(path) {
+    var resolved = localRequire.resolve(path);
+    return require(resolved, parent, path);
+  }
+
+  /**
+   * Resolve relative to the parent.
+   */
+
+  localRequire.resolve = function(path) {
+    // resolve deps by returning
+    // the dep in the nearest "deps"
+    // directory
+    if ('.' != path.charAt(0)) {
+      var segs = parent.split('/');
+      var i = lastIndexOf(segs, 'deps') + 1;
+      if (!i) i = 0;
+      path = segs.slice(0, i + 1).join('/') + '/deps/' + path;
+      return path;
+    }
+    return require.normalize(p, path);
+  };
+
+  /**
+   * Check if module is defined at `path`.
+   */
+
+  localRequire.exists = function(path) {
+    return has.call(require.modules, localRequire.resolve(path));
+  };
+
+  return localRequire;
+};
+require.register("component-emitter/index.js", function(exports, require, module){
+
+/**
+ * Expose `Emitter`.
+ */
+
+module.exports = Emitter;
+
+/**
+ * Initialize a new `Emitter`.
+ *
+ * @api public
+ */
+
+function Emitter(obj) {
+  if (obj) return mixin(obj);
+};
+
+/**
+ * Mixin the emitter properties.
+ *
+ * @param {Object} obj
+ * @return {Object}
+ * @api private
+ */
+
+function mixin(obj) {
+  for (var key in Emitter.prototype) {
+    obj[key] = Emitter.prototype[key];
+  }
+  return obj;
+}
+
+/**
+ * Listen on the given `event` with `fn`.
+ *
+ * @param {String} event
+ * @param {Function} fn
+ * @return {Emitter}
+ * @api public
+ */
+
+Emitter.prototype.on = function(event, fn){
+  this._callbacks = this._callbacks || {};
+  (this._callbacks[event] = this._callbacks[event] || [])
+    .push(fn);
+  return this;
+};
+
+/**
+ * Adds an `event` listener that will be invoked a single
+ * time then automatically removed.
+ *
+ * @param {String} event
+ * @param {Function} fn
+ * @return {Emitter}
+ * @api public
+ */
+
+Emitter.prototype.once = function(event, fn){
+  var self = this;
+  this._callbacks = this._callbacks || {};
+
+  function on() {
+    self.off(event, on);
+    fn.apply(this, arguments);
+  }
+
+  fn._off = on;
+  this.on(event, on);
+  return this;
+};
+
+/**
+ * Remove the given callback for `event` or all
+ * registered callbacks.
+ *
+ * @param {String} event
+ * @param {Function} fn
+ * @return {Emitter}
+ * @api public
+ */
+
+Emitter.prototype.off =
+Emitter.prototype.removeListener =
+Emitter.prototype.removeAllListeners = function(event, fn){
+  this._callbacks = this._callbacks || {};
+  var callbacks = this._callbacks[event];
+  if (!callbacks) return this;
+
+  // remove all handlers
+  if (1 == arguments.length) {
+    delete this._callbacks[event];
+    return this;
+  }
+
+  // remove specific handler
+  var i = callbacks.indexOf(fn._off || fn);
+  if (~i) callbacks.splice(i, 1);
+  return this;
+};
+
+/**
+ * Emit `event` with the given args.
+ *
+ * @param {String} event
+ * @param {Mixed} ...
+ * @return {Emitter}
+ */
+
+Emitter.prototype.emit = function(event){
+  this._callbacks = this._callbacks || {};
+  var args = [].slice.call(arguments, 1)
+    , callbacks = this._callbacks[event];
+
+  if (callbacks) {
+    callbacks = callbacks.slice(0);
+    for (var i = 0, len = callbacks.length; i < len; ++i) {
+      callbacks[i].apply(this, args);
+    }
+  }
+
+  return this;
+};
+
+/**
+ * Return array of callbacks for `event`.
+ *
+ * @param {String} event
+ * @return {Array}
+ * @api public
+ */
+
+Emitter.prototype.listeners = function(event){
+  this._callbacks = this._callbacks || {};
+  return this._callbacks[event] || [];
+};
+
+/**
+ * Check if this emitter has `event` handlers.
+ *
+ * @param {String} event
+ * @return {Boolean}
+ * @api public
+ */
+
+Emitter.prototype.hasListeners = function(event){
+  return !! this.listeners(event).length;
+};
+
+});
+require.register("dropzone/index.js", function(exports, require, module){
+
+
+/**
+ * Exposing dropzone
+ */
+module.exports = require("./lib/dropzone.js");
+
+});
+require.register("dropzone/lib/dropzone.js", function(exports, require, module){
+// Generated by CoffeeScript 1.4.0
+
+/*
+#
+# More info at [www.dropzonejs.com](http://www.dropzonejs.com)
+# 
+# Copyright (c) 2012, Matias Meno  
+# 
+# Permission is hereby granted, free of charge, to any person obtaining a copy
+# of this software and associated documentation files (the "Software"), to deal
+# in the Software without restriction, including without limitation the rights
+# to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+# copies of the Software, and to permit persons to whom the Software is
+# furnished to do so, subject to the following conditions:
+# 
+# The above copyright notice and this permission notice shall be included in
+# all copies or substantial portions of the Software.
+# 
+# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+# IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+# FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+# AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+# LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+# OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+# THE SOFTWARE.
+#
+*/
+
+
+(function() {
+  var Dropzone, Em, camelize, o, without,
+    __hasProp = {}.hasOwnProperty,
+    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
+    __slice = [].slice;
+
+  o = typeof jQuery !== "undefined" && jQuery !== null ? jQuery : require("jquery");
+
+  Em = typeof Emitter !== "undefined" && Emitter !== null ? Emitter : require("emitter");
+
+  Dropzone = (function(_super) {
+
+    __extends(Dropzone, _super);
+
+    Dropzone.prototype.version = "1.3.5";
+
+    /*
+      This is a list of all available events you can register on a dropzone object.
+    
+      You can register an event handler like this:
+    
+          dropzone.on("dragEnter", function() { });
+    */
+
+
+    Dropzone.prototype.events = ["drop", "dragstart", "dragend", "dragenter", "dragover", "dragleave", "selectedfiles", "addedfile", "thumbnail", "error", "processingfile", "uploadprogress", "sending", "success", "complete"];
+
+    Dropzone.prototype.blacklistedBrowsers = [/opera.*Macintosh.*version\/12/i];
+
+    Dropzone.prototype.defaultOptions = {
+      url: null,
+      parallelUploads: 2,
+      maxFilesize: 256,
+      paramName: "file",
+      createImageThumbnails: true,
+      maxThumbnailFilesize: 2,
+      thumbnailWidth: 100,
+      thumbnailHeight: 100,
+      clickable: true,
+      accept: function(file, done) {
+        return done();
+      },
+      fallback: function() {
+        this.element.addClass("browser-not-supported");
+        this.element.find(".message").removeClass("default");
+        this.element.find(".message span").html("Your browser does not support drag'n'drop file uploads.");
+        this.element.append("Please use the fallback form below to upload your files like in the olden days.</p>");
+        return this.element.append(this.getFallbackForm());
+      },
+      /*
+          Those functions register themselves to the events on init.
+          You can overwrite them if you don't like the default behavior. If you just want to add an additional
+          event handler, register it on the dropzone object and don't overwrite those options.
+      */
+
+      drop: function(e) {
+        return this.element.removeClass("drag-hover");
+      },
+      dragstart: o.noop,
+      dragend: function(e) {
+        return this.element.removeClass("drag-hover");
+      },
+      dragenter: function(e) {
+        return this.element.addClass("drag-hover");
+      },
+      dragover: function(e) {
+        return this.element.addClass("drag-hover");
+      },
+      dragleave: function(e) {
+        return this.element.removeClass("drag-hover");
+      },
+      selectedfiles: function(files) {
+        return this.element.addClass("started");
+      },
+      addedfile: function(file) {
+        file.previewTemplate = o(this.options.previewTemplate);
+        this.element.append(file.previewTemplate);
+        file.previewTemplate.find(".filename span").text(file.name);
+        return file.previewTemplate.find(".details").append(o("<div class=\"size\">" + (this.filesize(file.size)) + "</div>"));
+      },
+      thumbnail: function(file, dataUrl) {
+        file.previewTemplate.removeClass("file-preview").addClass("image-preview");
+        return file.previewTemplate.find(".details").append(o("<img alt=\"" + file.name + "\" src=\"" + dataUrl + "\"/>"));
+      },
+      error: function(file, message) {
+        file.previewTemplate.addClass("error");
+        return file.previewTemplate.find(".error-message span").text(message);
+      },
+      processingfile: function(file) {
+        return file.previewTemplate.addClass("processing");
+      },
+      uploadprogress: function(file, progress) {
+        return file.previewTemplate.find(".progress .upload").css({
+          width: "" + progress + "%"
+        });
+      },
+      sending: o.noop,
+      success: function(file) {
+        return file.previewTemplate.addClass("success");
+      },
+      complete: o.noop,
+      previewTemplate: "<div class=\"preview file-preview\">\n  <div class=\"details\">\n   <div class=\"filename\"><span></span></div>\n  </div>\n  <div class=\"progress\"><span class=\"upload\"></span></div>\n  <div class=\"success-mark\"><span>✔</span></div>\n  <div class=\"error-mark\"><span>✘</span></div>\n  <div class=\"error-message\"><span></span></div>\n</div>"
+    };
+
+    function Dropzone(element, options) {
+      var elementId, elementOptions, extend, _ref;
+      this.defaultOptions.previewTemplate = this.defaultOptions.previewTemplate.replace(/\n*/g, "");
+      this.element = o(element);
+      if (this.element.length !== 1) {
+        throw new Error("You can only instantiate dropzone on a single element.");
+      }
+      if (this.element.data("dropzone")) {
+        throw new Error("Dropzone already attached.");
+      }
+      this.element.data("dropzone", this);
+      elementId = this.element.attr("id");
+      elementOptions = (_ref = (elementId ? Dropzone.options[camelize(elementId)] : void 0)) != null ? _ref : {};
+      this.elementTagName = this.element.get(0).tagName;
+      extend = function() {
+        var key, object, objects, target, val, _i, _len;
+        target = arguments[0], objects = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
+        for (_i = 0, _len = objects.length; _i < _len; _i++) {
+          object = objects[_i];
+          for (key in object) {
+            val = object[key];
+            target[key] = val;
+          }
+        }
+        return target;
+      };
+      this.options = extend({}, this.defaultOptions, elementOptions, options != null ? options : {});
+      if (this.options.url == null) {
+        this.options.url = this.element.attr("action");
+      }
+      if (!this.options.url) {
+        throw new Error("No URL provided.");
+      }
+      this.init();
+    }
+
+    Dropzone.prototype.init = function() {
+      var capableBrowser, regex, _i, _len, _ref, _ref1,
+        _this = this;
+      if (this.elementTagName === "form" && this.element.attr("enctype") !== "multipart/form-data") {
+        this.element.attr("enctype", "multipart/form-data");
+      }
+      if (this.element.find(".message").length === 0) {
+        this.element.append(o("<div class=\"default message\"><span>Drop files here to upload</span></div>"));
+      }
+      capableBrowser = true;
+      if (window.File && window.FileReader && window.FileList && window.Blob && window.FormData) {
+        _ref = this.blacklistedBrowsers;
+        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+          regex = _ref[_i];
+          if (regex.test(navigator.userAgent)) {
+            capableBrowser = false;
+            continue;
+          }
+        }
+      } else {
+        capableBrowser = false;
+      }
+      if (!capableBrowser) {
+        return this.options.fallback.call(this);
+      }
+      if (this.options.clickable) {
+        this.element.addClass("clickable");
+        this.hiddenFileInput = o("<input type=\"file\" multiple />");
+        this.element.click(function(evt) {
+          var target;
+          target = o(evt.target);
+          if (target.is(_this.element) || target.is(_this.element.find(".message"))) {
+            return _this.hiddenFileInput.click();
+          }
+        });
+        this.hiddenFileInput.change(function() {
+          var files;
+          files = _this.hiddenFileInput.get(0).files;
+          _this.emit("selectedfiles", files);
+          if (files.length) {
+            return _this.handleFiles(files);
+          }
+        });
+      }
+      this.files = [];
+      this.files.queue = [];
+      this.files.processing = [];
+      this.URL = (_ref1 = window.URL) != null ? _ref1 : window.webkitURL;
+      return this.setupEventListeners();
+    };
+
+    Dropzone.prototype.getFallbackForm = function() {
+      var fields;
+      fields = o("<div class=\"fallback-elements\"><input type=\"file\" name=\"" + this.options.paramName + "\" multiple=\"multiple\" /><button type=\"submit\">Upload!</button></div>");
+      if (this.elementTagName !== "FORM") {
+        fields = o("<form action=\"" + this.options.url + "\" enctype=\"multipart/form-data\" method=\"post\"></form>").append(fields);
+      } else {
+        if (!this.element.attr("enctype")) {
+          this.element.attr("enctype", "multipart/form-data");
+        }
+        if (!this.element.attr("method")) {
+          this.element.attr("method", "post");
+        }
+      }
+      return fields;
+    };
+
+    Dropzone.prototype.setupEventListeners = function() {
+      var eventName, noPropagation, _i, _len, _ref,
+        _this = this;
+      _ref = this.events;
+      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+        eventName = _ref[_i];
+        this.on(eventName, this.options[eventName]);
+      }
+      noPropagation = function(e) {
+        e.stopPropagation();
+        return e.preventDefault();
+      };
+      this.element.on("dragstart", function(e) {
+        return _this.emit("dragstart", e);
+      });
+      this.element.on("dragenter", function(e) {
+        noPropagation(e);
+        return _this.emit("dragenter", e);
+      });
+      this.element.on("dragover", function(e) {
+        noPropagation(e);
+        return _this.emit("dragover", e);
+      });
+      this.element.on("dragleave", function(e) {
+        return _this.emit("dragleave", e);
+      });
+      this.element.on("drop", function(e) {
+        noPropagation(e);
+        _this.drop(e);
+        return _this.emit("drop", e);
+      });
+      return this.element.on("dragend", function(e) {
+        return _this.emit("dragend", e);
+      });
+    };
+
+    Dropzone.prototype.filesize = function(size) {
+      var string;
+      if (size >= 100000000000) {
+        size = size / 100000000000;
+        string = "TB";
+      } else if (size >= 100000000) {
+        size = size / 100000000;
+        string = "GB";
+      } else if (size >= 100000) {
+        size = size / 100000;
+        string = "MB";
+      } else if (size >= 100) {
+        size = size / 100;
+        string = "KB";
+      } else {
+        size = size * 10;
+        string = "b";
+      }
+      return "<strong>" + (Math.round(size) / 10) + "</strong> " + string;
+    };
+
+    Dropzone.prototype.drop = function(e) {
+      var files;
+      if (!e.originalEvent.dataTransfer) {
+        return;
+      }
+      files = e.originalEvent.dataTransfer.files;
+      this.emit("selectedfiles", files);
+      if (files.length) {
+        return this.handleFiles(files);
+      }
+    };
+
+    Dropzone.prototype.handleFiles = function(files) {
+      var file, _i, _len, _results;
+      _results = [];
+      for (_i = 0, _len = files.length; _i < _len; _i++) {
+        file = files[_i];
+        _results.push(this.addFile(file));
+      }
+      return _results;
+    };
+
+    Dropzone.prototype.accept = function(file, done) {
+      if (file.size > this.options.maxFilesize * 1024 * 1024) {
+        return done("File is too big (" + (Math.round(file.size / 1024 / 10.24) / 100) + "MB). Max filesize: " + this.options.maxFilesize + "MB");
+      } else {
+        return this.options.accept.call(this, file, done);
+      }
+    };
+
+    Dropzone.prototype.addFile = function(file) {
+      var _this = this;
+      this.files.push(file);
+      this.emit("addedfile", file);
+      if (this.options.createImageThumbnails && file.type.match(/image.*/) && file.size <= this.options.maxThumbnailFilesize * 1024 * 1024) {
+        this.createThumbnail(file);
+      }
+      return this.accept(file, function(error) {
+        if (error) {
+          return _this.errorProcessing(file, error);
+        } else {
+          _this.files.queue.push(file);
+          return _this.processQueue();
+        }
+      });
+    };
+
+    Dropzone.prototype.createThumbnail = function(file) {
+      var fileReader,
+        _this = this;
+      fileReader = new FileReader;
+      fileReader.onload = function() {
+        var img;
+        img = new Image;
+        img.onload = function() {
+          var canvas, ctx, srcHeight, srcRatio, srcWidth, srcX, srcY, thumbnail, trgHeight, trgRatio, trgWidth, trgX, trgY;
+          canvas = document.createElement("canvas");
+          ctx = canvas.getContext("2d");
+          srcX = 0;
+          srcY = 0;
+          srcWidth = img.width;
+          srcHeight = img.height;
+          canvas.width = _this.options.thumbnailWidth;
+          canvas.height = _this.options.thumbnailHeight;
+          trgX = 0;
+          trgY = 0;
+          trgWidth = canvas.width;
+          trgHeight = canvas.height;
+          srcRatio = img.width / img.height;
+          trgRatio = canvas.width / canvas.height;
+          if (img.height < canvas.height || img.width < canvas.width) {
+            trgHeight = srcHeight;
+            trgWidth = srcWidth;
+          } else {
+            if (srcRatio > trgRatio) {
+              srcHeight = img.height;
+              srcWidth = srcHeight * trgRatio;
+            } else {
+              srcWidth = img.width;
+              srcHeight = srcWidth / trgRatio;
+            }
+          }
+          srcX = (img.width - srcWidth) / 2;
+          srcY = (img.height - srcHeight) / 2;
+          trgY = (canvas.height - trgHeight) / 2;
+          trgX = (canvas.width - trgWidth) / 2;
+          ctx.drawImage(img, srcX, srcY, srcWidth, srcHeight, trgX, trgY, trgWidth, trgHeight);
+          thumbnail = canvas.toDataURL("image/png");
+          return _this.emit("thumbnail", file, thumbnail);
+        };
+        return img.src = fileReader.result;
+      };
+      return fileReader.readAsDataURL(file);
+    };
+
+    Dropzone.prototype.processQueue = function() {
+      var i, parallelUploads, processingLength;
+      parallelUploads = this.options.parallelUploads;
+      processingLength = this.files.processing.length;
+      i = processingLength;
+      while (i < parallelUploads) {
+        if (!this.files.queue.length) {
+          return;
+        }
+        this.processFile(this.files.queue.shift());
+        i++;
+      }
+    };
+
+    Dropzone.prototype.processFile = function(file) {
+      this.files.processing.push(file);
+      this.emit("processingfile", file);
+      return this.uploadFile(file);
+    };
+
+    Dropzone.prototype.uploadFile = function(file) {
+      var formData, handleError, input, inputElement, inputName, progressObj, xhr, _i, _len, _ref, _ref1,
+        _this = this;
+      xhr = new XMLHttpRequest();
+      formData = new FormData();
+      formData.append(this.options.paramName, file);
+      if (this.elementTagName = "FORM") {
+        _ref = this.element.find("input, textarea, select, button");
+        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+          inputElement = _ref[_i];
+          input = o(inputElement);
+          inputName = input.attr("name");
+          if (!input.attr("type") || input.attr("type").toLowerCase() !== "checkbox" || inputElement.checked) {
+            formData.append(input.attr("name"), input.val());
+          }
+        }
+      }
+      xhr.open("POST", this.options.url, true);
+      handleError = function() {
+        return _this.errorProcessing(file, xhr.responseText || ("Server responded with " + xhr.status + " code."));
+      };
+      xhr.onload = function(e) {
+        var response;
+        if (xhr.status !== 200) {
+          return handleError();
+        } else {
+          _this.emit("uploadprogress", file, 100);
+          response = xhr.responseText;
+          if (~xhr.getResponseHeader("content-type").indexOf("application/json")) {
+            response = JSON.parse(response);
+          }
+          return _this.finished(file, response, e);
+        }
+      };
+      xhr.onerror = function() {
+        return handleError();
+      };
+      progressObj = (_ref1 = xhr.upload) != null ? _ref1 : xhr;
+      progressObj.onprogress = function(e) {
+        return _this.emit("uploadprogress", file, Math.max(0, Math.min(100, (e.loaded / e.total) * 100)));
+      };
+      xhr.setRequestHeader("Accept", "application/json");
+      xhr.setRequestHeader("Cache-Control", "no-cache");
+      xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
+      xhr.setRequestHeader("X-File-Name", file.name);
+      this.emit("sending", file, xhr);
+      return xhr.send(formData);
+    };
+
+    Dropzone.prototype.finished = function(file, responseText, e) {
+      this.files.processing = without(this.files.processing, file);
+      this.emit("success", file, responseText, e);
+      this.emit("finished", file, responseText, e);
+      this.emit("complete", file);
+      return this.processQueue();
+    };
+
+    Dropzone.prototype.errorProcessing = function(file, message) {
+      this.files.processing = without(this.files.processing, file);
+      this.emit("error", file, message);
+      this.emit("complete", file);
+      return this.processQueue();
+    };
+
+    return Dropzone;
+
+  })(Em);
+
+  Dropzone.options = {};
+
+  without = function(list, rejectedItem) {
+    var item, _i, _len, _results;
+    _results = [];
+    for (_i = 0, _len = list.length; _i < _len; _i++) {
+      item = list[_i];
+      if (item !== rejectedItem) {
+        _results.push(item);
+      }
+    }
+    return _results;
+  };
+
+  camelize = function(str) {
+    return str.replace(/[\-_](\w)/g, function(match) {
+      return match[1].toUpperCase();
+    });
+  };
+
+  o.fn.dropzone = function(options) {
+    return this.each(function() {
+      return new Dropzone(this, options);
+    });
+  };
+
+  o(function() {
+    return o(".dropzone").dropzone();
+  });
+
+  if (typeof module !== "undefined" && module !== null) {
+    module.exports = Dropzone;
+  } else {
+    window.Dropzone = Dropzone;
+  }
+
+}).call(this);
+
+});
+require.alias("component-emitter/index.js", "dropzone/deps/emitter/index.js");
+
+if (typeof exports == "object") {
+  module.exports = require("dropzone");
+} else if (typeof define == "function" && define.amd) {
+  define(require("dropzone"));
+} else {
+  window["Dropzone"] = require("dropzone");
+}})();

source/joerg/index.slim

@@ -13,7 +13,7 @@ div.span3
       ' (PGP)
     dt Jabber:
     dd.icon-comment
-      a rel="me" href="xmpp:joerg@higgsboson.tk" joerg@higgsboson.tk
+      a rel="me" href="xmpp://joerg@higgsboson.tk" joerg@higgsboson.tk
     dt IRC:
     dd.icon-comment-alt
       a rel="me" href="irc://irc.freenode.net/" Mic92

source/qr/index.html

@@ -1,45 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <script type="text/javascript" src="qrcode.js">
-</script>
-    <script type="text/javascript" src="html5-qrcode.js">
-</script>
-    <title>
-      QRCode Generator Example
-    </title>
-    <style type="text/css" media="screen">
-      body { text-align:center; }
-    </style>
-  </head>
-  <body>
-    <h1>
-      QRCode Generator Example
-    </h1>
-    <form name="QRform" id="QRform">
-      <textarea name="textField" rows="8" cols="50" onkeyup='updateQRCode(this.value)' onclick="this.focus();this.select();">I love QR Codes. Type in here and watch the QR code below update.</textarea>
-    </form>
-    
-    <!-- This is where our QRCode will appear in. -->
-    <div id="qrcode"></div>
-    
-    <script type="text/javascript">
-      function updateQRCode(text) {
-
-        var element = document.getElementById("qrcode");
-
-        var bodyElement = document.body;
-        if(element.lastChild)
-          element.replaceChild(showQRCode(text), element.lastChild);
-        else
-          element.appendChild(showQRCode(text));
-
-      }
-
-      updateQRCode('I love QR Codes. Type in here and watch the QR code below update.');
-    </script>
-      <p><a href="https://github.com/amanuel/JS-HTML5-QRCode-Generator" onmouseover="updateQRCode(this.href)">Project Homepage</a></p>
-      <p><a href="http://ticklespace.com" onmouseover="updateQRCode(this.href)">TickleSpace</a></p>
-  </body>
-</html>

source/qr/index.html.slim

@@ -0,0 +1,24 @@
+== javascript_include_tag "qrcode.js"
+== javascript_include_tag "html5-qrcode.js"
+h1
+  | QRCode Generator Example
+form#QRform name="QRform"
+  textarea cols="50" name="textField" onclick="this.focus();this.select();" onkeyup="updateQRCode(this.value)" rows="8" I love QR Codes. Type in here and watch the QR code below update.
+// This is where our QRCode will appear in.
+#qrcode
+
+
+javascript:
+  function updateQRCode(text) {
+    var element = document.getElementById("qrcode");
+
+    var bodyElement = document.body;
+    if(element.lastChild)
+      element.replaceChild(showQRCode(text), element.lastChild);
+    else
+      element.appendChild(showQRCode(text));
+  }
+
+  updateQRCode('I love QR Codes. Type in here and watch the QR code below update.');
+p
+  a href="https://github.com/amanuel/JS-HTML5-QRCode-Generator" onmouseover="updateQRCode(this.href)" Project Homepage

source/stylesheets/dropzone.css

@@ -0,0 +1,351 @@
+.dropzone,
+.dropzone * {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.dropzone {
+  position: relative;
+  border: 1px solid rgba(0,0,0,0.08);
+  background: rgba(0,0,0,0.02);
+  padding: 1em;
+}
+.dropzone.clickable {
+  cursor: pointer;
+}
+.dropzone.clickable .message {
+  cursor: pointer;
+}
+.dropzone.clickable * {
+  cursor: default;
+}
+.dropzone .message {
+  opacity: 1;
+  -ms-filter: none;
+  filter: none;
+}
+.dropzone.drag-hover {
+  border-color: rgba(0,0,0,0.15);
+  background: rgba(0,0,0,0.04);
+}
+.dropzone.started .message {
+  display: none;
+}
+.dropzone .preview {
+  background: rgba(255,255,255,0.8);
+  position: relative;
+  display: inline-block;
+  margin: 17px;
+  vertical-align: top;
+  border: 1px solid #acacac;
+  padding: 6px 6px 28px 6px;
+}
+.dropzone .preview .details {
+  width: 100px;
+  height: 100px;
+  position: relative;
+  background: #ebebeb;
+  padding: 5px;
+}
+.dropzone .preview .details .filename {
+  overflow: hidden;
+  height: 100%;
+}
+.dropzone .preview .details img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100px;
+  height: 100px;
+}
+.dropzone .preview .details .size {
+  position: absolute;
+  bottom: -28px;
+  left: 3px;
+  height: 28px;
+  line-height: 28px;
+}
+.dropzone .preview.error .error-mark {
+  display: block;
+}
+.dropzone .preview.success .success-mark {
+  display: block;
+}
+.dropzone .preview:hover .details img {
+  display: none;
+}
+.dropzone .preview:hover .success-mark,
+.dropzone .preview:hover .error-mark {
+  display: none;
+}
+.dropzone .preview .success-mark,
+.dropzone .preview .error-mark {
+  display: none;
+  position: absolute;
+  width: 40px;
+  height: 40px;
+  font-size: 30px;
+  text-align: center;
+  right: -10px;
+  top: -10px;
+}
+.dropzone .preview .success-mark {
+  color: #8cc657;
+}
+.dropzone .preview .error-mark {
+  color: #ee162d;
+}
+.dropzone .preview .progress {
+  position: absolute;
+  top: 100px;
+  left: 6px;
+  right: 6px;
+  height: 6px;
+  background: #d7d7d7;
+}
+.dropzone .preview .progress .upload {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 0%;
+  background-color: #8cc657;
+}
+.dropzone .preview.success .progress {
+  display: none;
+}
+.dropzone .preview .error-message {
+  display: none;
+  position: absolute;
+  top: -5px;
+  left: -20px;
+  background: rgba(245,245,245,0.8);
+  padding: 8px 10px;
+  color: #800;
+  min-width: 140px;
+  max-width: 500px;
+  z-index: 500;
+}
+.dropzone .preview:hover.error .error-message {
+  display: block;
+}
+.dropzone {
+  border: 1px solid rgba(0,0,0,0.03);
+  min-height: 360px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  background: rgba(0,0,0,0.03);
+  padding: 23px;
+}
+.dropzone .default.message {
+  opacity: 1;
+  -ms-filter: none;
+  filter: none;
+  -webkit-transition: opacity 0.3s ease-in-out;
+  -moz-transition: opacity 0.3s ease-in-out;
+  -o-transition: opacity 0.3s ease-in-out;
+  -ms-transition: opacity 0.3s ease-in-out;
+  transition: opacity 0.3s ease-in-out;
+  background-image: url("../images/spritemap.png");
+  background-repeat: no-repeat;
+  background-position: 0 0;
+  position: absolute;
+  width: 428px;
+  height: 123px;
+  margin-left: -214px;
+  margin-top: -61.5px;
+  top: 50%;
+  left: 50%;
+}
+@media all and (-webkit-min-device-pixel-ratio: 1.5) {
+  .dropzone .default.message {
+    background-image: url("../images/spritemap@2x.png");
+    -webkit-background-size: 428px 406px;
+    -moz-background-size: 428px 406px;
+    background-size: 428px 406px;
+  }
+}
+.dropzone .default.message span {
+  display: none;
+}
+.dropzone.square .default.message {
+  background-position: 0 -123px;
+  width: 268px;
+  margin-left: -134px;
+  height: 174px;
+  margin-top: -87px;
+}
+.dropzone.drag-hover .message {
+  opacity: 0.15;
+  filter: alpha(opacity=15);
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
+}
+.dropzone.started .message {
+  display: block;
+  opacity: 0;
+  filter: alpha(opacity=0);
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+}
+.dropzone .preview {
+  -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.16);
+  box-shadow: 1px 1px 4px rgba(0,0,0,0.16);
+  font-size: 14px;
+}
+.dropzone .preview .details img {
+  width: 100px;
+  height: 100px;
+}
+.dropzone .preview.image-preview:hover .details img {
+  display: block;
+  opacity: 0.1;
+  filter: alpha(opacity=10);
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
+}
+.dropzone .preview.success .success-mark {
+  opacity: 1;
+  -ms-filter: none;
+  filter: none;
+}
+.dropzone .preview.error .error-mark {
+  opacity: 1;
+  -ms-filter: none;
+  filter: none;
+}
+.dropzone .preview.error .progress .upload {
+  background: #ee1e2d;
+}
+.dropzone .preview .error-mark,
+.dropzone .preview .success-mark {
+  display: block;
+  opacity: 0;
+  filter: alpha(opacity=0);
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  -webkit-transition: opacity 0.4s ease-in-out;
+  -moz-transition: opacity 0.4s ease-in-out;
+  -o-transition: opacity 0.4s ease-in-out;
+  -ms-transition: opacity 0.4s ease-in-out;
+  transition: opacity 0.4s ease-in-out;
+  background-image: url("../images/spritemap.png");
+  background-repeat: no-repeat;
+}
+@media all and (-webkit-min-device-pixel-ratio: 1.5) {
+  .dropzone .preview .error-mark,
+  .dropzone .preview .success-mark {
+    background-image: url("../images/spritemap@2x.png");
+    -webkit-background-size: 428px 406px;
+    -moz-background-size: 428px 406px;
+    background-size: 428px 406px;
+  }
+}
+.dropzone .preview .error-mark span,
+.dropzone .preview .success-mark span {
+  display: none;
+}
+.dropzone .preview .error-mark {
+  background-position: -268px -123px;
+}
+.dropzone .preview .success-mark {
+  background-position: -268px -163px;
+}
+.dropzone .preview .progress .upload {
+  -webkit-animation: loading 0.4s linear infinite;
+  -moz-animation: loading 0.4s linear infinite;
+  -o-animation: loading 0.4s linear infinite;
+  -ms-animation: loading 0.4s linear infinite;
+  animation: loading 0.4s linear infinite;
+  -webkit-transition: width 0.3s ease-in-out;
+  -moz-transition: width 0.3s ease-in-out;
+  -o-transition: width 0.3s ease-in-out;
+  -ms-transition: width 0.3s ease-in-out;
+  transition: width 0.3s ease-in-out;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0%;
+  height: 100%;
+  background-image: url("../images/spritemap.png");
+  background-repeat: repeat-x;
+  background-position: 0px -400px;
+}
+@media all and (-webkit-min-device-pixel-ratio: 1.5) {
+  .dropzone .preview .progress .upload {
+    background-image: url("../images/spritemap@2x.png");
+    -webkit-background-size: 428px 406px;
+    -moz-background-size: 428px 406px;
+    background-size: 428px 406px;
+  }
+}
+.dropzone .preview.success .progress {
+  display: block;
+  opacity: 0;
+  filter: alpha(opacity=0);
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  -webkit-transition: opacity 0.4s ease-in-out;
+  -moz-transition: opacity 0.4s ease-in-out;
+  -o-transition: opacity 0.4s ease-in-out;
+  -ms-transition: opacity 0.4s ease-in-out;
+  transition: opacity 0.4s ease-in-out;
+}
+.dropzone .preview .error-message {
+  display: block;
+  opacity: 0;
+  filter: alpha(opacity=0);
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  -webkit-transition: opacity 0.3s ease-in-out;
+  -moz-transition: opacity 0.3s ease-in-out;
+  -o-transition: opacity 0.3s ease-in-out;
+  -ms-transition: opacity 0.3s ease-in-out;
+  transition: opacity 0.3s ease-in-out;
+}
+.dropzone .preview:hover.error .error-message {
+  opacity: 1;
+  -ms-filter: none;
+  filter: none;
+}
+@-moz-keyframes loading {
+  0% {
+    background-position: 0 -400px;
+  }
+
+  100% {
+    background-position: -7px -400px;
+  }
+}
+@-webkit-keyframes loading {
+  0% {
+    background-position: 0 -400px;
+  }
+
+  100% {
+    background-position: -7px -400px;
+  }
+}
+@-o-keyframes loading {
+  0% {
+    background-position: 0 -400px;
+  }
+
+  100% {
+    background-position: -7px -400px;
+  }
+}
+@-ms-keyframes loading {
+  0% {
+    background-position: 0 -400px;
+  }
+
+  100% {
+    background-position: -7px -400px;
+  }
+}
+@keyframes loading {
+  0% {
+    background-position: 0 -400px;
+  }
+
+  100% {
+    background-position: -7px -400px;
+  }
+}

source/stylesheets/site.css.scss

@@ -5,6 +5,7 @@ $fontAwesomePath: "../fonts";
 @import "fontawesome";
 //@import "compass-holmes"; // css-based debugging
 @import "susy";
+@import "dropzone";
 
 // Setting up the Magic Grid
 $total-columns: 12; // 12 columns
@@ -148,3 +149,19 @@ footer {
 .overview {
   span { font-size: 1.8em; };
 }
+
+.bar {
+  width: 300px;
+}
+
+#progress {
+  background: #eee;
+  /*background: rgb(238,232,213);*/
+  border: 1px solid #222;
+  margin-top: 20px;
+}
+#progressbar {
+  width: 0px;
+  height: 24px;
+  background: #333;
+}