Initial commit

.gitignore

@@ -0,0 +1,4 @@
+.DS_Store
+config.yaml
+passenger*
+*-tmp

Gemfile

@@ -0,0 +1,3 @@
+source :rubygems
+gem 'wand'
+gem 's3'

Gemfile.lock

@@ -0,0 +1,18 @@
+GEM
+  remote: http://rubygems.org/
+  specs:
+    mime-types (1.16)
+    proxies (0.2.1)
+    s3 (0.3.8)
+      proxies (~> 0.2.0)
+    safe_shell (1.0.1)
+    wand (0.4)
+      mime-types
+      safe_shell (~> 1.0.0)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  s3
+  wand

Rakefile

@@ -0,0 +1,83 @@
+#!/usr/bin/env rake
+require 'rubygems'
+require 'bundler'
+Bundler.require
+
+require 'digest/sha1'
+
+task :deploy do
+  Site.new('public').deploy
+end
+
+class Site
+  attr_accessor :path
+  attr_accessor :tmp_files
+
+  def initialize(path)
+    @path = path
+    @tmp_files = []
+  end
+
+  def deploy
+    puts " ** Deploying to  #{bucket.name}"
+    files.each do |file|
+      if !File.directory?(file)
+        remote_file_name = base_path(file)
+        puts "    Uploading #{remote_file_name}"
+        S3::Object.send(:new, bucket, {
+          key: remote_file_name,
+          etag: Digest::SHA256.file(file).hexdigest,
+          cache_control: 'max-age=86400, public',
+          mime_type: mime_type_for_file(file),
+        }).tap do |_object|
+          if is_css_file?(file)
+            _object.content = open(minify_css_file(file))
+          else
+            _object.content = open(file)
+          end
+          _object.save
+        end
+      end
+    end
+  end
+
+private
+
+  def mime_type_for_file(file)
+    Wand.wave(file)
+  end
+
+  def files
+    @files ||= Dir.glob("#{path}/**/*")
+  end
+
+  def base_path(file)
+    file.gsub("#{path}/", "")
+  end
+
+  def is_css_file?(file)
+    file.end_with?('.css')
+  end
+
+  def minify_css_file(file)
+    "#{file}-tmp".tap do |tmp_file_name|
+      `yuicompressor -o #{tmp_file_name} #{file}`
+      @tmp_files << tmp_file_name
+    end
+  end
+
+  def config
+    @config ||= YAML.load_file('config.yaml')
+  end
+
+  def bucket
+    @bucket ||= s3.buckets.find(config['s3']['bucket'])
+  end
+
+  def s3
+    @s3 ||= S3::Service.new(
+      access_key_id: config['s3']['access_key_id'],
+      secret_access_key: config['s3']['secret_access_key']
+    )
+  end
+end

config.yaml.sample

@@ -0,0 +1,4 @@
+s3:
+  access_key_id: 
+  secret_access_key: 
+  bucket: www.emoji-cheat-sheet.com

public/emoji.css

@@ -0,0 +1,180 @@
+body { 
+  background: #fff url('graphics/stucco.png');
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  color: #333;
+  margin: 0;
+  padding: 0;
+  line-height: 1.4em;}
+h1 {
+  width: 80%;
+  padding-top: 14px;
+  margin-bottom: 16px;
+  font-size: 48px;
+  line-height: 1em;
+  font-weight: normal;
+  font-family: 'Yanone Kaffeesatz', sans-serif;}
+h2 { margin-top:1.2em; }
+a { color: #333;}
+a:hover, a.hover { color: #999; }
+#content, #footer {
+  padding: 0 20px 0 20px;
+  margin: 0 auto;
+  max-width: 1024px;}
+  .share {
+    -webkit-border-bottom-right-radius: 8px;
+    -webkit-border-bottom-left-radius: 8px;
+    -moz-border-radius-bottomright: 8px;
+    -moz-border-radius-bottomleft: 8px;
+    border-bottom-right-radius: 8px;
+    border-bottom-left-radius: 8px;
+    border-left: 2px dotted #ddd;
+    border-right: 2px dotted #ddd;
+    border-bottom: 2px dotted #ddd;
+    background: rgba(200,200,200,.2);
+    padding-top: 4px;
+    text-align: right;
+    position: absolute;
+    top: 0px;
+    padding: 4px 8px;
+    right: 20px;
+    width: 160px;
+    height: 28px;}
+    #twitter, #gplus, #fb { 
+      float: right; 
+      margin-bottom: 4px;
+      height: 32px; }
+    #twitter, #gplus {margin-right: 5px; }
+  p.intro { 
+    max-width: 800px;
+    margin-top: 0;
+    color: #666;}
+  ul {
+    padding:0;
+    margin: 0;}
+  li { 
+    list-style: none;
+    float: left;
+    width: 160px;
+    height: 30px; }
+    .emoji-button {
+      font-size: 14px;
+      float: left;
+      font-family: "Courier", monospace;
+      padding: 4px;}
+    .emoji-button.hover { margin-left: -4px; }
+    .emoji-button.active { margin-left: 0;} 
+     .emoji-button img { vertical-align: middle; }
+div#footer { 
+  background-color:rgba(200,200,200,0.15);
+  border-top: 3px dotted #ddd;
+  margin-top: 2em;
+  padding: 1em;
+  font-size: 14px;
+  color: #666;}
+  #footer p {line-height: 1em; }
+
+.clearfix:after {
+  zoom: 1;
+  content: ".";
+  display: block;
+  height: 0;
+  clear: both;
+  visibility: hidden; }
+
+@media screen and (max-width: 580px) {
+  .share {
+    background: none;
+    padding: 0;
+    margin: 1em 0;
+    position: static;
+    border: none; }
+}
+/* jnotify */
+
+.jnotify-container {
+	position: fixed; 
+	top: 40px; 
+	right: 20px; 
+	width: 160px; 
+	z-index: 100000;
+	
+	/* set maximum number of notes to show */
+	max-height: 270px;
+	overflow-x: hidden;
+	overflow-y: auto;
+}
+
+.jnotify-container .jnotify-notification {
+	position: relative; 
+	margin-bottom: 5px;
+}
+
+.jnotify-container .jnotify-notification .jnotify-background {
+	position: absolute; 
+	top: 2px; 
+	left: 0; 
+	width: 100%; 
+	height: 100%;
+	background-color: #4c4c4c; 
+	filter: alpha(opacity=40); 
+	-moz-opacity: 7.90; 
+	opacity: 0.40; 
+	z-index: 1; 
+
+	/* round the corners */
+	-moz-border-radius: 10px;
+	-webkit-border-radius: 10px;
+	border-radius: 10px;
+}
+
+.jnotify-container .jnotify-notification a.jnotify-close,
+.jnotify-container .jnotify-notification a.jnotify-close:link,
+.jnotify-container .jnotify-notification a.jnotify-close:visited,
+.jnotify-container .jnotify-notification a.jnotify-close:focus,
+.jnotify-container .jnotify-notification a.jnotify-close:hover {
+	position: absolute;
+	top: 2px;
+	right: 5px;
+	padding: 0 5px;
+	font: 14px Arial,Helvetica,sans-serif;
+	line-height: 1em;
+	color: #fff;
+	text-decoration: none;
+	z-index: 3;
+	cursor: pointer;
+}
+
+.jnotify-container .jnotify-notification .jnotify-message {
+	position: relative; 
+	z-index: 2; 
+	padding: 10px;
+	text-align: left;
+	color: #fff;
+	font: 14px Arial,Helvetica,sans-serif;
+	line-height: 1.2em; 
+}
+
+.jnotify-container .jnotify-notification .jnotify-message * {
+	font-size: 1em;
+}
+
+/* notification type == "error" */
+.jnotify-container .jnotify-notification-error .jnotify-background {
+	background-color: #d79eac; 
+}
+
+.jnotify-container .jnotify-notification-error .jnotify-close,
+.jnotify-container .jnotify-notification-error .jnotify-message {
+	color: #a72947 !important;
+}
+
+/* notification type == "warning" */
+.jnotify-container .jnotify-notification-warning .jnotify-background {
+	background-color: #fff7d1; 
+}
+
+.jnotify-container .jnotify-notification-warning .jnotify-close,
+.jnotify-container .jnotify-notification-warning .jnotify-message {
+	color: #c2a928 !important;
+}

public/index.html

@@ -0,0 +1,233 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <title>Emoji cheat sheet for Campfire and GitHub</title>
+    <meta charset="utf-8">
+    <meta property="title" content="Emoji cheat sheet for Campfire and GitHub"/> 
+    <meta property="og:image" content="http://www.emoji-cheat-sheet.com/graphics/emojis/thumbsup.png"/> 
+    <meta property="og:type" content="website"/> 
+    <meta property="fb:admins" content="arvid.andersson"/> 
+    <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'>
+    <link href="/emoji.css" rel="stylesheet" title="Screen" type="text/css">
+    <script type="text/javascript">
+      var _gaq = _gaq || [];
+      _gaq.push(['_setAccount', 'UA-20637790-4']);
+      _gaq.push(['_trackPageview']);
+      (function() {
+        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+      })();
+     </script>
+  </head>
+  <body>
+    <div id="content">
+      <h1>Emoji cheat sheet for Campfire and GitHub</h1>
+      <p class="intro">
+      <a href="http://en.wikipedia.org/wiki/Emoji">Emoji</a> emoticons is supported on 37signals <a href="http://campfirenow.com/">Campfire</a> 
+      and on <a href="http://github.com/">GitHub</a>. However the services doesn't support the same set of emojis and
+      some of the codes are not super easy to remember. <em>So here is a little cheat sheet</em>.<br> 
+      ✈<b> If you got flash enabled click the emoji code and it will be copied to your clipboard.</b> </p>
+      <h2>Campfire</h2>
+      <ul id="campfire" class="clearfix">
+        <li><div class="emoji-button"><img src="/graphics/emojis/+1.png" height="22" width="22"> :+1:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/-1.png" height="22" width="22"> :-1:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/bulb.png" height="22" width="22"> :bulb:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/calling.png" height="22" width="22"> :calling:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/clap.png" height="22" width="22"> :clap:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/cop.png" height="22" width="22"> :cop:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/email.png" height="22" width="22"> :email:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/feet.png" height="22" width="22"> :feet:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/fish.png" height="22" width="22"> :fish:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/fist.png" height="22" width="22"> :fist:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/gift.png" height="22" width="22"> :gift:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/hammer.png" height="22" width="22"> :hammer:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/heart.png" height="22" width="22"> :heart:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/leaves.png" height="22" width="22"> :leaves:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/lipstick.png" height="22" width="22"> :lipstick:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/lock.png" height="22" width="22"> :lock:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/mag.png" height="22" width="22"> :mag:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/mega.png" height="22" width="22"> :mega:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/memo.png" height="22" width="22"> :memo:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/moneybag.png" height="22" width="22"> :moneybag:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/new.png" height="22" width="22"> :new:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/ok.png" height="22" width="22"> :ok:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/pencil.png" height="22" width="22"> :pencil:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/punch.png" height="22" width="22"> :punch:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/runner.png" height="22" width="22"> :runner:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/scissors.png" height="22" width="22"> :scissors:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/smoking.png" height="22" width="22"> :smoking:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/sparkles.png" height="22" width="22"> :sparkles:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/star.png" height="22" width="22"> :star:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/sunny.png" height="22" width="22"> :sunny:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/tm.png" height="22" width="22"> :tm:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/v.png" height="22" width="22"> :v:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/vs.png" height="22" width="22"> :vs:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/warning.png" height="22" width="22"> :warning:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/wheelchair.png" height="22" width="22"> :wheelchair:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/zap.png" height="22" width="22"> :zap:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/zzz.png" height="22" width="22"> :zzz:</div></li>
+      </ul>
+      <h2>GitHub</h2>
+      <ul id="github" class="clearfix">
+        <li> <div class="emoji-button"><img src="/graphics/emojis/+1.png" height="22" width="22"> :+1:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/-1.png" height="22" width="22"> :-1:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/airplane.png" height="22" width="22"> :airplane:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/apple.png" height="22" width="22"> :apple:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/art.png" height="22" width="22"> :art:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/bear.png" height="22" width="22"> :bear:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/beer.png" height="22" width="22"> :beer:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/bike.png" height="22" width="22"> :bike:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/bomb.png" height="22" width="22"> :bomb:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/book.png" height="22" width="22"> :book:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/broken_heart.png" height="22" width="22"> :broken_heart:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/bulb.png" height="22" width="22"> :bulb:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/bus.png" height="22" width="22"> :bus:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/cake.png" height="22" width="22"> :cake:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/calling.png" height="22" width="22"> :calling:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/cat.png" height="22" width="22"> :cat:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/clap.png" height="22" width="22"> :clap:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/computer.png" height="22" width="22"> :computer:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/cool.png" height="22" width="22"> :cool:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/cop.png" height="22" width="22"> :cop:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/couple.png" height="22" width="22"> :couple:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/dog.png" height="22" width="22"> :dog:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/dolphin.png" height="22" width="22"> :dolphin:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/email.png" height="22" width="22"> :email:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/feet.png" height="22" width="22"> :feet:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/fire.png" height="22" width="22"> :fire:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/fish.png" height="22" width="22"> :fish:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/fist.png" height="22" width="22"> :fist:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/gift.png" height="22" width="22"> :gift:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/hammer.png" height="22" width="22"> :hammer:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/heart.png" height="22" width="22"> :heart:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/horse.png" height="22" width="22"> :horse:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/iphone.png" height="22" width="22"> :iphone:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/key.png" height="22" width="22"> :key:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/kiss.png" height="22" width="22"> :kiss:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/koala.png" height="22" width="22"> :koala:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/leaves.png" height="22" width="22"> :leaves:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/lips.png" height="22" width="22"> :lips:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/lipstick.png" height="22" width="22"> :lipstick:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/lock.png" height="22" width="22"> :lock:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/mag.png" height="22" width="22"> :mag:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/mega.png" height="22" width="22"> :mega:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/memo.png" height="22" width="22"> :memo:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/moneybag.png" height="22" width="22"> :moneybag:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/nail_care.png" height="22" width="22"> :nail_care:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/new.png" height="22" width="22"> :new:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/octocat.png" height="22" width="22"> :octocat:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/ok.png" height="22" width="22"> :ok:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/pencil.png" height="22" width="22"> :pencil:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/princess.png" height="22" width="22"> :princess:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/punch.png" height="22" width="22"> :punch:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/rainbow.png" height="22" width="22"> :rainbow:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/rose.png" height="22" width="22"> :rose:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/runner.png" height="22" width="22"> :runner:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/scissors.png" height="22" width="22"> :scissors:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/ski.png" height="22" width="22"> :ski:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/smoking.png" height="22" width="22"> :smoking:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/sparkles.png" height="22" width="22"> :sparkles:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/star.png" height="22" width="22"> :star:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/sunflower.png" height="22" width="22"> :sunflower:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/sunny.png" height="22" width="22"> :sunny:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/taxi.png" height="22" width="22"> :taxi:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/thumbsdown.png" height="22" width="22"> :thumbsdown:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/thumbsup.png" height="22" width="22"> :thumbsup:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/tm.png" height="22" width="22"> :tm:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/tophat.png" height="22" width="22"> :tophat:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/train.png" height="22" width="22"> :train:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/v.png" height="22" width="22"> :v:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/vs.png" height="22" width="22"> :vs:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/warning.png" height="22" width="22"> :warning:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/wheelchair.png" height="22" width="22"> :wheelchair:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/zap.png" height="22" width="22"> :zap:</div></li>
+        <li><div class="emoji-button"><img src="/graphics/emojis/zzz.png" height="22" width="22"> :zzz:</div></li>
+      </ul>
+      <div class="share">
+        <div id="fb">
+          <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.emoji-cheat-sheet.com%2F&amp;send=false&amp;layout=button_count&amp;width=52&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:52px; height:21px;" allowTransparency="true"></iframe>
+        </div>
+        <div id="gplus">
+          <div class="g-plusone" data-annotation="none"></div>
+        </div>
+        <div id="twitter">
+          <a href="https://twitter.com/share" class="twitter-share-button" data-count="none">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
+        </div>
+      </div>
+    </div>
+    <div id="footer">
+      <p>This page was created by <a href="http://arvidandersson.se">Arvid Andersson</a> at 
+        <a href="http://oktavilla.se">Oktavilla</a>.
+      <p>✔ Emoji-cheat-sheet.com is not affiliated with 37signals, LLC. or GitHub Inc. in any way.</p>
+      <p>❤ Built using bits from <a href="http://www.steamdev.com/zclip">zClip</a>, 
+        <a href="http://subtlepatterns.com/">SubtlePatterns</a> and 
+        <a href="http://www.givainc.com/labs/jnotify_jquery_plugin.htm">jnotify</a>.</p>
+    </div>
+    <div id="flash-test"></div>
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
+    <script src="/libs.min.js" type="text/javascript"></script>
+    <script type="text/javascript">
+    $(document).ready(function(){
+      if(false){ // for dev regenerate the emoji lists
+        var campfire_emoji = [
+          '+1', '-1', 'bulb', 'calling', 'clap', 'cop', 'email', 'feet', 'fish', 'fist', 'gift', 
+          'hammer', 'heart', 'leaves', 'lipstick', 'lock', 'mag', 'mega', 'memo', 'moneybag', 
+          'new', 'ok', 'pencil', 'punch', 'runner', 'scissors', 'smoking', 'sparkles', 'star', 
+          'sunny', 'tm', 'v', 'vs', 'warning', 'wheelchair', 'zap', 'zzz']
+        var github_emoji = [
+          '+1', '-1', 'airplane', 'apple', 'art', 'bear', 'beer', 'bike', 'bomb', 'book', 'broken_heart', 
+          'bulb', 'bus', 'cake', 'calling', 'cat', 'clap', 'computer', 'cool', 'cop', 'couple', 'dog',
+          'dolphin', 'email', 'feet', 'fire', 'fish', 'fist', 'gift', 'hammer', 'heart', 'horse', 'iphone',
+          'key', 'kiss', 'koala', 'leaves', 'lips', 'lipstick', 'lock', 'mag', 'mega', 'memo', 'moneybag', 
+          'nail_care', 'new', 'octocat', 'ok', 'pencil', 'princess', 'punch', 'rainbow', 'rose', 'runner',
+          'scissors', 'ski', 'smoking', 'sparkles', 'star', 'sunflower', 'sunny', 'taxi', 'thumbsdown', 
+          'thumbsup', 'tm', 'tophat', 'train', 'v', 'vs', 'warning', 'wheelchair', 'zap', 'zzz']
+
+        function create_emoji_list(emojis, element_id){
+          $(element_id).empty();
+          $.each(emojis,function(index, key){
+            $(element_id).append('<li><div class="emoji-button"><img src="/graphics/emojis/'+key+'.png" height="22" width="22"> :'+key+':</div></li>'+"\n");
+          });
+        }
+        create_emoji_list(campfire_emoji, "#campfire");
+        create_emoji_list(github_emoji, "#github");
+      }
+
+      if(FlashDetect.installed){
+        clip_flash_block_detect = new ZeroClipboard.Client();
+        clip_flash_block_detect.glue(document.getElementById('flash-test'));
+
+        clip = new ZeroClipboard.Client();
+        clip.reposition(document.getElementById('flash-test'));
+        clip.receiveEvent('mouseover', null);
+
+        $.jnotify.setup({delay: 1000, fadeSpeed: 500});
+        clip.setHandCursor(true);
+        clip.addEventListener('complete', function(client, text) {
+          $.jnotify("Copied <code>"+text+"</code>");
+        });
+        
+        $('.emoji-button').mouseover( function() {
+          try {
+            if(clip_flash_block_detect.movie.PercentLoaded()){
+              clip.setText($(this).text());
+              if (clip.div && !reglue) {
+                clip.receiveEvent('mouseout', null);
+                clip.reposition(this);
+              } else {
+                clip.glue(this);
+                reglue = false;
+              }
+              clip.receiveEvent('mouseover', null);
+            }  
+          }catch(e){ }
+        });
+      }
+      var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
+      po.src = 'https://apis.google.com/js/plusone.js';
+      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
+    });
+    </script>
+  </body>
+</html>