integrate inbox, qrcode into home

This commit is contained in:
Jörg Thalheim 2013-02-20 23:18:23 +01:00
parent a84f1f9ead
commit 9f2b982784
22 changed files with 1576 additions and 59 deletions

View File

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

View File

@ -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

View File

@ -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"

View File

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

View File

@ -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"

View File

@ -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>
<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
<!--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"));

BIN
source/images/spritemap.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

View File

@ -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];
}
}

View File

@ -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"

62
source/inbox/upload.php Normal file
View File

@ -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);
}
}
?>

View File

@ -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
@ -29,12 +33,12 @@ section
li
i.icon-trash.icon-2x
span
a href="http://paste.higgsboson.tk" title="encrypted pastebin" Zerobin
a href="http://paste.higgsboson.tk" title="encrypted pastebin" Zerobin
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"

View File

@ -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

View File

@ -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");
}})();

File diff suppressed because one or more lines are too long

View File

@ -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

View File

@ -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>

24
source/qr/index.html.slim Normal file
View File

@ -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

View File

@ -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;
}
}

View File

@ -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;
}