commit 3561d025dd59f8bb3033059c36f959d4fcbc12fb Author: Kenneth Cachia Date: Wed Aug 14 01:18:59 2013 -0400 Initial commit. diff --git a/Gruntfile.js b/Gruntfile.js new file mode 100644 index 0000000..71dfcc5 --- /dev/null +++ b/Gruntfile.js @@ -0,0 +1,68 @@ + +module.exports = function(grunt) { + + grunt.initConfig({ + + pkg: grunt.file.readJSON('package.json'), + + concat: { + scripts: { + src:[ + 'scripts/shape-shifter.js', + 'scripts/drawing.js', + 'scripts/point.js', + 'scripts/color.js', + 'drawing.js', + 'scripts/ui.js', + 'scripts/ui-tabs.js', + 'scripts/dot.js', + 'scripts/shape-builder.js', + 'scripts/shape.js' + ], + dest: 'release/shape-shifter.js' + } + }, + + watch: { + scripts: { + files: ['scripts/*.js'], + tasks: ['clean:scripts', 'jshint', 'concat'] + }, + css: { + files: ['styles/*.css'], + tasks: ['clean:css', 'cssmin'] + } + }, + + clean: { + scripts: ['release/*.js'], + css: ['release/*.css'] + }, + + cssmin: { + options: { + banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */' + }, + combine: { + files: { + 'release/site.min.css': ['styles/*.css'] + } + } + }, + + jshint: { + files: ['Gruntfile.js', 'scripts/*.js'] + } + + }); + + grunt.loadNpmTasks('grunt-contrib-watch'); + grunt.loadNpmTasks('grunt-contrib-clean'); + grunt.loadNpmTasks('grunt-contrib-cssmin'); + grunt.loadNpmTasks('grunt-contrib-concat'); + grunt.loadNpmTasks('grunt-contrib-jshint'); + + grunt.registerTask('default', ['watch']); + grunt.registerTask('release', ['clean', 'cssmin', 'jshint', 'concat']); + +}; diff --git a/README.md b/README.md new file mode 100644 index 0000000..0589b27 --- /dev/null +++ b/README.md @@ -0,0 +1,4 @@ + +#Shape Shifter + +A canvas experiment. Check out the Demo. diff --git a/package.json b/package.json new file mode 100644 index 0000000..50585eb --- /dev/null +++ b/package.json @@ -0,0 +1,14 @@ +{ + "name": "shape-shifter", + "version": "1.0.0", + "description": "A canvas experiment", + "author": "Kenneth Cachia", + "devDependencies": { + "grunt": "~0.4.1", + "grunt-contrib-watch": "~0.5.1", + "grunt-contrib-clean": "~0.5.0", + "grunt-contrib-cssmin": "~0.6.1", + "grunt-contrib-jshint": "~0.6.0", + "grunt-contrib-concat": "~0.3.0" + } +} \ No newline at end of file diff --git a/release/font-awesome/adjust.png b/release/font-awesome/adjust.png new file mode 100755 index 0000000..ffd0d91 Binary files /dev/null and b/release/font-awesome/adjust.png differ diff --git a/release/font-awesome/align-center.png b/release/font-awesome/align-center.png new file mode 100755 index 0000000..794825f Binary files /dev/null and b/release/font-awesome/align-center.png differ diff --git a/release/font-awesome/align-justify.png b/release/font-awesome/align-justify.png new file mode 100755 index 0000000..3a5ee09 Binary files /dev/null and b/release/font-awesome/align-justify.png differ diff --git a/release/font-awesome/align-left.png b/release/font-awesome/align-left.png new file mode 100755 index 0000000..2da462b Binary files /dev/null and b/release/font-awesome/align-left.png differ diff --git a/release/font-awesome/align-right.png b/release/font-awesome/align-right.png new file mode 100755 index 0000000..a05285c Binary files /dev/null and b/release/font-awesome/align-right.png differ diff --git a/release/font-awesome/ambulance.png b/release/font-awesome/ambulance.png new file mode 100755 index 0000000..1f17add Binary files /dev/null and b/release/font-awesome/ambulance.png differ diff --git a/release/font-awesome/angle-down.png b/release/font-awesome/angle-down.png new file mode 100755 index 0000000..525accd Binary files /dev/null and b/release/font-awesome/angle-down.png differ diff --git a/release/font-awesome/angle-left.png b/release/font-awesome/angle-left.png new file mode 100755 index 0000000..5cb48d5 Binary files /dev/null and b/release/font-awesome/angle-left.png differ diff --git a/release/font-awesome/angle-right.png b/release/font-awesome/angle-right.png new file mode 100755 index 0000000..e231e9d Binary files /dev/null and b/release/font-awesome/angle-right.png differ diff --git a/release/font-awesome/angle-up.png b/release/font-awesome/angle-up.png new file mode 100755 index 0000000..5f33938 Binary files /dev/null and b/release/font-awesome/angle-up.png differ diff --git a/release/font-awesome/arrow-down.png b/release/font-awesome/arrow-down.png new file mode 100755 index 0000000..27434fa Binary files /dev/null and b/release/font-awesome/arrow-down.png differ diff --git a/release/font-awesome/arrow-left.png b/release/font-awesome/arrow-left.png new file mode 100755 index 0000000..8a1c0c4 Binary files /dev/null and b/release/font-awesome/arrow-left.png differ diff --git a/release/font-awesome/arrow-right.png b/release/font-awesome/arrow-right.png new file mode 100755 index 0000000..02b8209 Binary files /dev/null and b/release/font-awesome/arrow-right.png differ diff --git a/release/font-awesome/arrow-up.png b/release/font-awesome/arrow-up.png new file mode 100755 index 0000000..40b9f62 Binary files /dev/null and b/release/font-awesome/arrow-up.png differ diff --git a/release/font-awesome/asterisk.png b/release/font-awesome/asterisk.png new file mode 100755 index 0000000..965163a Binary files /dev/null and b/release/font-awesome/asterisk.png differ diff --git a/release/font-awesome/backward.png b/release/font-awesome/backward.png new file mode 100755 index 0000000..015b530 Binary files /dev/null and b/release/font-awesome/backward.png differ diff --git a/release/font-awesome/ban-circle.png b/release/font-awesome/ban-circle.png new file mode 100755 index 0000000..f9426c7 Binary files /dev/null and b/release/font-awesome/ban-circle.png differ diff --git a/release/font-awesome/bar-chart.png b/release/font-awesome/bar-chart.png new file mode 100755 index 0000000..7ed0a5f Binary files /dev/null and b/release/font-awesome/bar-chart.png differ diff --git a/release/font-awesome/barcode.png b/release/font-awesome/barcode.png new file mode 100755 index 0000000..d566dcd Binary files /dev/null and b/release/font-awesome/barcode.png differ diff --git a/release/font-awesome/beaker.png b/release/font-awesome/beaker.png new file mode 100755 index 0000000..f9dc072 Binary files /dev/null and b/release/font-awesome/beaker.png differ diff --git a/release/font-awesome/beer.png b/release/font-awesome/beer.png new file mode 100755 index 0000000..2e38bbc Binary files /dev/null and b/release/font-awesome/beer.png differ diff --git a/release/font-awesome/bell-alt.png b/release/font-awesome/bell-alt.png new file mode 100755 index 0000000..f8e8ddc Binary files /dev/null and b/release/font-awesome/bell-alt.png differ diff --git a/release/font-awesome/bell.png b/release/font-awesome/bell.png new file mode 100755 index 0000000..77e3d7f Binary files /dev/null and b/release/font-awesome/bell.png differ diff --git a/release/font-awesome/bold.png b/release/font-awesome/bold.png new file mode 100755 index 0000000..69d92c3 Binary files /dev/null and b/release/font-awesome/bold.png differ diff --git a/release/font-awesome/bolt.png b/release/font-awesome/bolt.png new file mode 100755 index 0000000..666edaf Binary files /dev/null and b/release/font-awesome/bolt.png differ diff --git a/release/font-awesome/book.png b/release/font-awesome/book.png new file mode 100755 index 0000000..8b13b56 Binary files /dev/null and b/release/font-awesome/book.png differ diff --git a/release/font-awesome/bookmark-empty.png b/release/font-awesome/bookmark-empty.png new file mode 100755 index 0000000..e53f777 Binary files /dev/null and b/release/font-awesome/bookmark-empty.png differ diff --git a/release/font-awesome/bookmark.png b/release/font-awesome/bookmark.png new file mode 100755 index 0000000..9443157 Binary files /dev/null and b/release/font-awesome/bookmark.png differ diff --git a/release/font-awesome/briefcase.png b/release/font-awesome/briefcase.png new file mode 100755 index 0000000..88d2a56 Binary files /dev/null and b/release/font-awesome/briefcase.png differ diff --git a/release/font-awesome/building.png b/release/font-awesome/building.png new file mode 100755 index 0000000..2e0a005 Binary files /dev/null and b/release/font-awesome/building.png differ diff --git a/release/font-awesome/bullhorn.png b/release/font-awesome/bullhorn.png new file mode 100755 index 0000000..f14a9bc Binary files /dev/null and b/release/font-awesome/bullhorn.png differ diff --git a/release/font-awesome/calendar.png b/release/font-awesome/calendar.png new file mode 100755 index 0000000..f271d58 Binary files /dev/null and b/release/font-awesome/calendar.png differ diff --git a/release/font-awesome/camera-retro.png b/release/font-awesome/camera-retro.png new file mode 100755 index 0000000..b873ab3 Binary files /dev/null and b/release/font-awesome/camera-retro.png differ diff --git a/release/font-awesome/camera.png b/release/font-awesome/camera.png new file mode 100755 index 0000000..8a582a5 Binary files /dev/null and b/release/font-awesome/camera.png differ diff --git a/release/font-awesome/caret-down.png b/release/font-awesome/caret-down.png new file mode 100755 index 0000000..e614029 Binary files /dev/null and b/release/font-awesome/caret-down.png differ diff --git a/release/font-awesome/caret-left.png b/release/font-awesome/caret-left.png new file mode 100755 index 0000000..cd7009b Binary files /dev/null and b/release/font-awesome/caret-left.png differ diff --git a/release/font-awesome/caret-right.png b/release/font-awesome/caret-right.png new file mode 100755 index 0000000..0f2fb3b Binary files /dev/null and b/release/font-awesome/caret-right.png differ diff --git a/release/font-awesome/caret-up.png b/release/font-awesome/caret-up.png new file mode 100755 index 0000000..b9e66bc Binary files /dev/null and b/release/font-awesome/caret-up.png differ diff --git a/release/font-awesome/certificate.png b/release/font-awesome/certificate.png new file mode 100755 index 0000000..2c50ad3 Binary files /dev/null and b/release/font-awesome/certificate.png differ diff --git a/release/font-awesome/check-empty.png b/release/font-awesome/check-empty.png new file mode 100755 index 0000000..0d46eae Binary files /dev/null and b/release/font-awesome/check-empty.png differ diff --git a/release/font-awesome/check.png b/release/font-awesome/check.png new file mode 100755 index 0000000..d68f93b Binary files /dev/null and b/release/font-awesome/check.png differ diff --git a/release/font-awesome/chevron-down.png b/release/font-awesome/chevron-down.png new file mode 100755 index 0000000..9b2a599 Binary files /dev/null and b/release/font-awesome/chevron-down.png differ diff --git a/release/font-awesome/chevron-left.png b/release/font-awesome/chevron-left.png new file mode 100755 index 0000000..1fee24c Binary files /dev/null and b/release/font-awesome/chevron-left.png differ diff --git a/release/font-awesome/chevron-right.png b/release/font-awesome/chevron-right.png new file mode 100755 index 0000000..52a9982 Binary files /dev/null and b/release/font-awesome/chevron-right.png differ diff --git a/release/font-awesome/chevron-up.png b/release/font-awesome/chevron-up.png new file mode 100755 index 0000000..18be739 Binary files /dev/null and b/release/font-awesome/chevron-up.png differ diff --git a/release/font-awesome/circle-arrow-down.png b/release/font-awesome/circle-arrow-down.png new file mode 100755 index 0000000..46e036a Binary files /dev/null and b/release/font-awesome/circle-arrow-down.png differ diff --git a/release/font-awesome/circle-arrow-left.png b/release/font-awesome/circle-arrow-left.png new file mode 100755 index 0000000..102a9a7 Binary files /dev/null and b/release/font-awesome/circle-arrow-left.png differ diff --git a/release/font-awesome/circle-arrow-right.png b/release/font-awesome/circle-arrow-right.png new file mode 100755 index 0000000..98b8d18 Binary files /dev/null and b/release/font-awesome/circle-arrow-right.png differ diff --git a/release/font-awesome/circle-arrow-up.png b/release/font-awesome/circle-arrow-up.png new file mode 100755 index 0000000..33feac4 Binary files /dev/null and b/release/font-awesome/circle-arrow-up.png differ diff --git a/release/font-awesome/circle-blank.png b/release/font-awesome/circle-blank.png new file mode 100755 index 0000000..016c9f2 Binary files /dev/null and b/release/font-awesome/circle-blank.png differ diff --git a/release/font-awesome/circle.png b/release/font-awesome/circle.png new file mode 100755 index 0000000..43f9ae4 Binary files /dev/null and b/release/font-awesome/circle.png differ diff --git a/release/font-awesome/cloud-download.png b/release/font-awesome/cloud-download.png new file mode 100755 index 0000000..c4ff7b8 Binary files /dev/null and b/release/font-awesome/cloud-download.png differ diff --git a/release/font-awesome/cloud-upload.png b/release/font-awesome/cloud-upload.png new file mode 100755 index 0000000..9a62caf Binary files /dev/null and b/release/font-awesome/cloud-upload.png differ diff --git a/release/font-awesome/cloud.png b/release/font-awesome/cloud.png new file mode 100755 index 0000000..4f1fb0f Binary files /dev/null and b/release/font-awesome/cloud.png differ diff --git a/release/font-awesome/coffee.png b/release/font-awesome/coffee.png new file mode 100755 index 0000000..1e1c722 Binary files /dev/null and b/release/font-awesome/coffee.png differ diff --git a/release/font-awesome/cog.png b/release/font-awesome/cog.png new file mode 100755 index 0000000..5fc591c Binary files /dev/null and b/release/font-awesome/cog.png differ diff --git a/release/font-awesome/cogs.png b/release/font-awesome/cogs.png new file mode 100755 index 0000000..26a11aa Binary files /dev/null and b/release/font-awesome/cogs.png differ diff --git a/release/font-awesome/columns.png b/release/font-awesome/columns.png new file mode 100755 index 0000000..48e9300 Binary files /dev/null and b/release/font-awesome/columns.png differ diff --git a/release/font-awesome/comment-alt.png b/release/font-awesome/comment-alt.png new file mode 100755 index 0000000..318b2d4 Binary files /dev/null and b/release/font-awesome/comment-alt.png differ diff --git a/release/font-awesome/comment.png b/release/font-awesome/comment.png new file mode 100755 index 0000000..e5ec818 Binary files /dev/null and b/release/font-awesome/comment.png differ diff --git a/release/font-awesome/comments-alt.png b/release/font-awesome/comments-alt.png new file mode 100755 index 0000000..3558d09 Binary files /dev/null and b/release/font-awesome/comments-alt.png differ diff --git a/release/font-awesome/comments.png b/release/font-awesome/comments.png new file mode 100755 index 0000000..3072baa Binary files /dev/null and b/release/font-awesome/comments.png differ diff --git a/release/font-awesome/copy.png b/release/font-awesome/copy.png new file mode 100755 index 0000000..af6d8dd Binary files /dev/null and b/release/font-awesome/copy.png differ diff --git a/release/font-awesome/credit.png b/release/font-awesome/credit.png new file mode 100755 index 0000000..3c5450d Binary files /dev/null and b/release/font-awesome/credit.png differ diff --git a/release/font-awesome/cut.png b/release/font-awesome/cut.png new file mode 100755 index 0000000..74fa786 Binary files /dev/null and b/release/font-awesome/cut.png differ diff --git a/release/font-awesome/dashboard.png b/release/font-awesome/dashboard.png new file mode 100755 index 0000000..35a6755 Binary files /dev/null and b/release/font-awesome/dashboard.png differ diff --git a/release/font-awesome/desktop.png b/release/font-awesome/desktop.png new file mode 100755 index 0000000..035e538 Binary files /dev/null and b/release/font-awesome/desktop.png differ diff --git a/release/font-awesome/double-angle-down.png b/release/font-awesome/double-angle-down.png new file mode 100755 index 0000000..5d294b2 Binary files /dev/null and b/release/font-awesome/double-angle-down.png differ diff --git a/release/font-awesome/double-angle-left.png b/release/font-awesome/double-angle-left.png new file mode 100755 index 0000000..3b82ef6 Binary files /dev/null and b/release/font-awesome/double-angle-left.png differ diff --git a/release/font-awesome/double-angle-right.png b/release/font-awesome/double-angle-right.png new file mode 100755 index 0000000..9d09e0e Binary files /dev/null and b/release/font-awesome/double-angle-right.png differ diff --git a/release/font-awesome/double-angle-up.png b/release/font-awesome/double-angle-up.png new file mode 100755 index 0000000..a23b4ad Binary files /dev/null and b/release/font-awesome/double-angle-up.png differ diff --git a/release/font-awesome/download-alt.png b/release/font-awesome/download-alt.png new file mode 100755 index 0000000..5a328d1 Binary files /dev/null and b/release/font-awesome/download-alt.png differ diff --git a/release/font-awesome/download.png b/release/font-awesome/download.png new file mode 100755 index 0000000..45741f8 Binary files /dev/null and b/release/font-awesome/download.png differ diff --git a/release/font-awesome/edit.png b/release/font-awesome/edit.png new file mode 100755 index 0000000..ddbc361 Binary files /dev/null and b/release/font-awesome/edit.png differ diff --git a/release/font-awesome/eject.png b/release/font-awesome/eject.png new file mode 100755 index 0000000..16749e7 Binary files /dev/null and b/release/font-awesome/eject.png differ diff --git a/release/font-awesome/envelope-alt.png b/release/font-awesome/envelope-alt.png new file mode 100755 index 0000000..32dd52d Binary files /dev/null and b/release/font-awesome/envelope-alt.png differ diff --git a/release/font-awesome/envelope.png b/release/font-awesome/envelope.png new file mode 100755 index 0000000..6a29a0b Binary files /dev/null and b/release/font-awesome/envelope.png differ diff --git a/release/font-awesome/exchange.png b/release/font-awesome/exchange.png new file mode 100755 index 0000000..58de637 Binary files /dev/null and b/release/font-awesome/exchange.png differ diff --git a/release/font-awesome/exclamation-sign.png b/release/font-awesome/exclamation-sign.png new file mode 100755 index 0000000..b8e716d Binary files /dev/null and b/release/font-awesome/exclamation-sign.png differ diff --git a/release/font-awesome/external-link.png b/release/font-awesome/external-link.png new file mode 100755 index 0000000..6f786b8 Binary files /dev/null and b/release/font-awesome/external-link.png differ diff --git a/release/font-awesome/eye-close.png b/release/font-awesome/eye-close.png new file mode 100755 index 0000000..0d87723 Binary files /dev/null and b/release/font-awesome/eye-close.png differ diff --git a/release/font-awesome/eye-open.png b/release/font-awesome/eye-open.png new file mode 100755 index 0000000..766b15a Binary files /dev/null and b/release/font-awesome/eye-open.png differ diff --git a/release/font-awesome/facebook-sign.png b/release/font-awesome/facebook-sign.png new file mode 100755 index 0000000..1467a58 Binary files /dev/null and b/release/font-awesome/facebook-sign.png differ diff --git a/release/font-awesome/facebook.png b/release/font-awesome/facebook.png new file mode 100755 index 0000000..f577524 Binary files /dev/null and b/release/font-awesome/facebook.png differ diff --git a/release/font-awesome/facetime-video.png b/release/font-awesome/facetime-video.png new file mode 100755 index 0000000..ca5603e Binary files /dev/null and b/release/font-awesome/facetime-video.png differ diff --git a/release/font-awesome/fast-backward.png b/release/font-awesome/fast-backward.png new file mode 100755 index 0000000..a07806f Binary files /dev/null and b/release/font-awesome/fast-backward.png differ diff --git a/release/font-awesome/fast-forward.png b/release/font-awesome/fast-forward.png new file mode 100755 index 0000000..60b289f Binary files /dev/null and b/release/font-awesome/fast-forward.png differ diff --git a/release/font-awesome/fighter-jet.png b/release/font-awesome/fighter-jet.png new file mode 100755 index 0000000..e144c57 Binary files /dev/null and b/release/font-awesome/fighter-jet.png differ diff --git a/release/font-awesome/file-alt.png b/release/font-awesome/file-alt.png new file mode 100755 index 0000000..54dd758 Binary files /dev/null and b/release/font-awesome/file-alt.png differ diff --git a/release/font-awesome/file.png b/release/font-awesome/file.png new file mode 100755 index 0000000..c761bea Binary files /dev/null and b/release/font-awesome/file.png differ diff --git a/release/font-awesome/film.png b/release/font-awesome/film.png new file mode 100755 index 0000000..76d4ef3 Binary files /dev/null and b/release/font-awesome/film.png differ diff --git a/release/font-awesome/filter.png b/release/font-awesome/filter.png new file mode 100755 index 0000000..80e041e Binary files /dev/null and b/release/font-awesome/filter.png differ diff --git a/release/font-awesome/fire.png b/release/font-awesome/fire.png new file mode 100755 index 0000000..b7bbb39 Binary files /dev/null and b/release/font-awesome/fire.png differ diff --git a/release/font-awesome/flag.png b/release/font-awesome/flag.png new file mode 100755 index 0000000..503339d Binary files /dev/null and b/release/font-awesome/flag.png differ diff --git a/release/font-awesome/folder-close-alt.png b/release/font-awesome/folder-close-alt.png new file mode 100755 index 0000000..2cabf33 Binary files /dev/null and b/release/font-awesome/folder-close-alt.png differ diff --git a/release/font-awesome/folder-close.png b/release/font-awesome/folder-close.png new file mode 100755 index 0000000..8f32fb1 Binary files /dev/null and b/release/font-awesome/folder-close.png differ diff --git a/release/font-awesome/folder-open-alt.png b/release/font-awesome/folder-open-alt.png new file mode 100755 index 0000000..0396bbf Binary files /dev/null and b/release/font-awesome/folder-open-alt.png differ diff --git a/release/font-awesome/folder-open.png b/release/font-awesome/folder-open.png new file mode 100755 index 0000000..15e11e6 Binary files /dev/null and b/release/font-awesome/folder-open.png differ diff --git a/release/font-awesome/font.png b/release/font-awesome/font.png new file mode 100755 index 0000000..1555c05 Binary files /dev/null and b/release/font-awesome/font.png differ diff --git a/release/font-awesome/food.png b/release/font-awesome/food.png new file mode 100755 index 0000000..be3471d Binary files /dev/null and b/release/font-awesome/food.png differ diff --git a/release/font-awesome/forward.png b/release/font-awesome/forward.png new file mode 100755 index 0000000..787583b Binary files /dev/null and b/release/font-awesome/forward.png differ diff --git a/release/font-awesome/fullscreen.png b/release/font-awesome/fullscreen.png new file mode 100755 index 0000000..e5a5941 Binary files /dev/null and b/release/font-awesome/fullscreen.png differ diff --git a/release/font-awesome/gift.png b/release/font-awesome/gift.png new file mode 100755 index 0000000..0d1ad08 Binary files /dev/null and b/release/font-awesome/gift.png differ diff --git a/release/font-awesome/github-alt.png b/release/font-awesome/github-alt.png new file mode 100755 index 0000000..2c93672 Binary files /dev/null and b/release/font-awesome/github-alt.png differ diff --git a/release/font-awesome/github-sign.png b/release/font-awesome/github-sign.png new file mode 100755 index 0000000..1d52b75 Binary files /dev/null and b/release/font-awesome/github-sign.png differ diff --git a/release/font-awesome/github.png b/release/font-awesome/github.png new file mode 100755 index 0000000..410e313 Binary files /dev/null and b/release/font-awesome/github.png differ diff --git a/release/font-awesome/glass.png b/release/font-awesome/glass.png new file mode 100755 index 0000000..5f2dabd Binary files /dev/null and b/release/font-awesome/glass.png differ diff --git a/release/font-awesome/globe.png b/release/font-awesome/globe.png new file mode 100755 index 0000000..3344a7d Binary files /dev/null and b/release/font-awesome/globe.png differ diff --git a/release/font-awesome/google-plus-sign.png b/release/font-awesome/google-plus-sign.png new file mode 100755 index 0000000..05e94fe Binary files /dev/null and b/release/font-awesome/google-plus-sign.png differ diff --git a/release/font-awesome/google-plus.png b/release/font-awesome/google-plus.png new file mode 100755 index 0000000..f4e11f0 Binary files /dev/null and b/release/font-awesome/google-plus.png differ diff --git a/release/font-awesome/group.png b/release/font-awesome/group.png new file mode 100755 index 0000000..c4feeb7 Binary files /dev/null and b/release/font-awesome/group.png differ diff --git a/release/font-awesome/h-sign.png b/release/font-awesome/h-sign.png new file mode 100755 index 0000000..ab8f6ae Binary files /dev/null and b/release/font-awesome/h-sign.png differ diff --git a/release/font-awesome/hand-down.png b/release/font-awesome/hand-down.png new file mode 100755 index 0000000..95227ca Binary files /dev/null and b/release/font-awesome/hand-down.png differ diff --git a/release/font-awesome/hand-left.png b/release/font-awesome/hand-left.png new file mode 100755 index 0000000..753fb9f Binary files /dev/null and b/release/font-awesome/hand-left.png differ diff --git a/release/font-awesome/hand-right.png b/release/font-awesome/hand-right.png new file mode 100755 index 0000000..ffcd596 Binary files /dev/null and b/release/font-awesome/hand-right.png differ diff --git a/release/font-awesome/hand-up.png b/release/font-awesome/hand-up.png new file mode 100755 index 0000000..4489d2f Binary files /dev/null and b/release/font-awesome/hand-up.png differ diff --git a/release/font-awesome/hdd.png b/release/font-awesome/hdd.png new file mode 100755 index 0000000..f099dc6 Binary files /dev/null and b/release/font-awesome/hdd.png differ diff --git a/release/font-awesome/headphones.png b/release/font-awesome/headphones.png new file mode 100755 index 0000000..7bb3495 Binary files /dev/null and b/release/font-awesome/headphones.png differ diff --git a/release/font-awesome/heart-empty.png b/release/font-awesome/heart-empty.png new file mode 100755 index 0000000..00d6424 Binary files /dev/null and b/release/font-awesome/heart-empty.png differ diff --git a/release/font-awesome/heart.png b/release/font-awesome/heart.png new file mode 100755 index 0000000..761fd5e Binary files /dev/null and b/release/font-awesome/heart.png differ diff --git a/release/font-awesome/home.png b/release/font-awesome/home.png new file mode 100755 index 0000000..de909e2 Binary files /dev/null and b/release/font-awesome/home.png differ diff --git a/release/font-awesome/hospital.png b/release/font-awesome/hospital.png new file mode 100755 index 0000000..c09959e Binary files /dev/null and b/release/font-awesome/hospital.png differ diff --git a/release/font-awesome/inbox.png b/release/font-awesome/inbox.png new file mode 100755 index 0000000..b78fbdc Binary files /dev/null and b/release/font-awesome/inbox.png differ diff --git a/release/font-awesome/indent-left.png b/release/font-awesome/indent-left.png new file mode 100755 index 0000000..59b87a9 Binary files /dev/null and b/release/font-awesome/indent-left.png differ diff --git a/release/font-awesome/indent-right.png b/release/font-awesome/indent-right.png new file mode 100755 index 0000000..f08cd65 Binary files /dev/null and b/release/font-awesome/indent-right.png differ diff --git a/release/font-awesome/info-sign.png b/release/font-awesome/info-sign.png new file mode 100755 index 0000000..ceab2d1 Binary files /dev/null and b/release/font-awesome/info-sign.png differ diff --git a/release/font-awesome/italic.png b/release/font-awesome/italic.png new file mode 100755 index 0000000..e77305f Binary files /dev/null and b/release/font-awesome/italic.png differ diff --git a/release/font-awesome/key.png b/release/font-awesome/key.png new file mode 100755 index 0000000..7cee3ee Binary files /dev/null and b/release/font-awesome/key.png differ diff --git a/release/font-awesome/laptop.png b/release/font-awesome/laptop.png new file mode 100755 index 0000000..9a3499e Binary files /dev/null and b/release/font-awesome/laptop.png differ diff --git a/release/font-awesome/leaf.png b/release/font-awesome/leaf.png new file mode 100755 index 0000000..6fa2370 Binary files /dev/null and b/release/font-awesome/leaf.png differ diff --git a/release/font-awesome/legal.png b/release/font-awesome/legal.png new file mode 100755 index 0000000..7e3a923 Binary files /dev/null and b/release/font-awesome/legal.png differ diff --git a/release/font-awesome/lemon.png b/release/font-awesome/lemon.png new file mode 100755 index 0000000..a058306 Binary files /dev/null and b/release/font-awesome/lemon.png differ diff --git a/release/font-awesome/lightbulb.png b/release/font-awesome/lightbulb.png new file mode 100755 index 0000000..c75ef74 Binary files /dev/null and b/release/font-awesome/lightbulb.png differ diff --git a/release/font-awesome/link.png b/release/font-awesome/link.png new file mode 100755 index 0000000..d78264d Binary files /dev/null and b/release/font-awesome/link.png differ diff --git a/release/font-awesome/linkedin-sign.png b/release/font-awesome/linkedin-sign.png new file mode 100755 index 0000000..d891b13 Binary files /dev/null and b/release/font-awesome/linkedin-sign.png differ diff --git a/release/font-awesome/linkedin.png b/release/font-awesome/linkedin.png new file mode 100755 index 0000000..ffaa945 Binary files /dev/null and b/release/font-awesome/linkedin.png differ diff --git a/release/font-awesome/list-alt.png b/release/font-awesome/list-alt.png new file mode 100755 index 0000000..1361b0f Binary files /dev/null and b/release/font-awesome/list-alt.png differ diff --git a/release/font-awesome/list-ol.png b/release/font-awesome/list-ol.png new file mode 100755 index 0000000..46dc623 Binary files /dev/null and b/release/font-awesome/list-ol.png differ diff --git a/release/font-awesome/list-ul.png b/release/font-awesome/list-ul.png new file mode 100755 index 0000000..a3fc6c7 Binary files /dev/null and b/release/font-awesome/list-ul.png differ diff --git a/release/font-awesome/list.png b/release/font-awesome/list.png new file mode 100755 index 0000000..d473f81 Binary files /dev/null and b/release/font-awesome/list.png differ diff --git a/release/font-awesome/lock.png b/release/font-awesome/lock.png new file mode 100755 index 0000000..2344c67 Binary files /dev/null and b/release/font-awesome/lock.png differ diff --git a/release/font-awesome/magic.png b/release/font-awesome/magic.png new file mode 100755 index 0000000..e8845f0 Binary files /dev/null and b/release/font-awesome/magic.png differ diff --git a/release/font-awesome/magnet.png b/release/font-awesome/magnet.png new file mode 100755 index 0000000..7f28c0a Binary files /dev/null and b/release/font-awesome/magnet.png differ diff --git a/release/font-awesome/map-marker.png b/release/font-awesome/map-marker.png new file mode 100755 index 0000000..c982cb0 Binary files /dev/null and b/release/font-awesome/map-marker.png differ diff --git a/release/font-awesome/medkit.png b/release/font-awesome/medkit.png new file mode 100755 index 0000000..fe63312 Binary files /dev/null and b/release/font-awesome/medkit.png differ diff --git a/release/font-awesome/minus-sign.png b/release/font-awesome/minus-sign.png new file mode 100755 index 0000000..503a705 Binary files /dev/null and b/release/font-awesome/minus-sign.png differ diff --git a/release/font-awesome/minus.png b/release/font-awesome/minus.png new file mode 100755 index 0000000..c8ed82e Binary files /dev/null and b/release/font-awesome/minus.png differ diff --git a/release/font-awesome/mobile.png b/release/font-awesome/mobile.png new file mode 100755 index 0000000..4280680 Binary files /dev/null and b/release/font-awesome/mobile.png differ diff --git a/release/font-awesome/money.png b/release/font-awesome/money.png new file mode 100755 index 0000000..3c416f6 Binary files /dev/null and b/release/font-awesome/money.png differ diff --git a/release/font-awesome/move.png b/release/font-awesome/move.png new file mode 100755 index 0000000..bfcf41c Binary files /dev/null and b/release/font-awesome/move.png differ diff --git a/release/font-awesome/music.png b/release/font-awesome/music.png new file mode 100755 index 0000000..84b39fa Binary files /dev/null and b/release/font-awesome/music.png differ diff --git a/release/font-awesome/off.png b/release/font-awesome/off.png new file mode 100755 index 0000000..a74e1c3 Binary files /dev/null and b/release/font-awesome/off.png differ diff --git a/release/font-awesome/ok-circle.png b/release/font-awesome/ok-circle.png new file mode 100755 index 0000000..12d19a2 Binary files /dev/null and b/release/font-awesome/ok-circle.png differ diff --git a/release/font-awesome/ok-sign.png b/release/font-awesome/ok-sign.png new file mode 100755 index 0000000..1df6d2a Binary files /dev/null and b/release/font-awesome/ok-sign.png differ diff --git a/release/font-awesome/ok.png b/release/font-awesome/ok.png new file mode 100755 index 0000000..9c56195 Binary files /dev/null and b/release/font-awesome/ok.png differ diff --git a/release/font-awesome/paper-clip.png b/release/font-awesome/paper-clip.png new file mode 100755 index 0000000..326a295 Binary files /dev/null and b/release/font-awesome/paper-clip.png differ diff --git a/release/font-awesome/paste.png b/release/font-awesome/paste.png new file mode 100755 index 0000000..3996b2c Binary files /dev/null and b/release/font-awesome/paste.png differ diff --git a/release/font-awesome/pause.png b/release/font-awesome/pause.png new file mode 100755 index 0000000..0ccae0a Binary files /dev/null and b/release/font-awesome/pause.png differ diff --git a/release/font-awesome/pencil.png b/release/font-awesome/pencil.png new file mode 100755 index 0000000..97fe8db Binary files /dev/null and b/release/font-awesome/pencil.png differ diff --git a/release/font-awesome/phone-sign.png b/release/font-awesome/phone-sign.png new file mode 100755 index 0000000..9275df5 Binary files /dev/null and b/release/font-awesome/phone-sign.png differ diff --git a/release/font-awesome/phone.png b/release/font-awesome/phone.png new file mode 100755 index 0000000..d507064 Binary files /dev/null and b/release/font-awesome/phone.png differ diff --git a/release/font-awesome/picture.png b/release/font-awesome/picture.png new file mode 100755 index 0000000..1474192 Binary files /dev/null and b/release/font-awesome/picture.png differ diff --git a/release/font-awesome/pinterest-sign.png b/release/font-awesome/pinterest-sign.png new file mode 100755 index 0000000..e9aca23 Binary files /dev/null and b/release/font-awesome/pinterest-sign.png differ diff --git a/release/font-awesome/pinterest.png b/release/font-awesome/pinterest.png new file mode 100755 index 0000000..749d4fc Binary files /dev/null and b/release/font-awesome/pinterest.png differ diff --git a/release/font-awesome/plane.png b/release/font-awesome/plane.png new file mode 100755 index 0000000..eb30e04 Binary files /dev/null and b/release/font-awesome/plane.png differ diff --git a/release/font-awesome/play-circle.png b/release/font-awesome/play-circle.png new file mode 100755 index 0000000..8c4325a Binary files /dev/null and b/release/font-awesome/play-circle.png differ diff --git a/release/font-awesome/play.png b/release/font-awesome/play.png new file mode 100755 index 0000000..24f13fe Binary files /dev/null and b/release/font-awesome/play.png differ diff --git a/release/font-awesome/plus-sign.png b/release/font-awesome/plus-sign.png new file mode 100755 index 0000000..47b59d6 Binary files /dev/null and b/release/font-awesome/plus-sign.png differ diff --git a/release/font-awesome/plus-sign2.png b/release/font-awesome/plus-sign2.png new file mode 100755 index 0000000..04fae38 Binary files /dev/null and b/release/font-awesome/plus-sign2.png differ diff --git a/release/font-awesome/plus.png b/release/font-awesome/plus.png new file mode 100755 index 0000000..ebc626a Binary files /dev/null and b/release/font-awesome/plus.png differ diff --git a/release/font-awesome/print.png b/release/font-awesome/print.png new file mode 100755 index 0000000..6226300 Binary files /dev/null and b/release/font-awesome/print.png differ diff --git a/release/font-awesome/pushpin.png b/release/font-awesome/pushpin.png new file mode 100755 index 0000000..2c09de7 Binary files /dev/null and b/release/font-awesome/pushpin.png differ diff --git a/release/font-awesome/qrcode.png b/release/font-awesome/qrcode.png new file mode 100755 index 0000000..633a2fd Binary files /dev/null and b/release/font-awesome/qrcode.png differ diff --git a/release/font-awesome/question-sign.png b/release/font-awesome/question-sign.png new file mode 100755 index 0000000..242c1a0 Binary files /dev/null and b/release/font-awesome/question-sign.png differ diff --git a/release/font-awesome/quote-left.png b/release/font-awesome/quote-left.png new file mode 100755 index 0000000..9c3da79 Binary files /dev/null and b/release/font-awesome/quote-left.png differ diff --git a/release/font-awesome/quote-right.png b/release/font-awesome/quote-right.png new file mode 100755 index 0000000..83e9557 Binary files /dev/null and b/release/font-awesome/quote-right.png differ diff --git a/release/font-awesome/random.png b/release/font-awesome/random.png new file mode 100755 index 0000000..001a2dc Binary files /dev/null and b/release/font-awesome/random.png differ diff --git a/release/font-awesome/refresh.png b/release/font-awesome/refresh.png new file mode 100755 index 0000000..804ac47 Binary files /dev/null and b/release/font-awesome/refresh.png differ diff --git a/release/font-awesome/remove-circle.png b/release/font-awesome/remove-circle.png new file mode 100755 index 0000000..90bb625 Binary files /dev/null and b/release/font-awesome/remove-circle.png differ diff --git a/release/font-awesome/remove-sign.png b/release/font-awesome/remove-sign.png new file mode 100755 index 0000000..e16df0f Binary files /dev/null and b/release/font-awesome/remove-sign.png differ diff --git a/release/font-awesome/remove.png b/release/font-awesome/remove.png new file mode 100755 index 0000000..3fb4d17 Binary files /dev/null and b/release/font-awesome/remove.png differ diff --git a/release/font-awesome/reorder.png b/release/font-awesome/reorder.png new file mode 100755 index 0000000..b88c545 Binary files /dev/null and b/release/font-awesome/reorder.png differ diff --git a/release/font-awesome/repeat.png b/release/font-awesome/repeat.png new file mode 100755 index 0000000..aab4db0 Binary files /dev/null and b/release/font-awesome/repeat.png differ diff --git a/release/font-awesome/reply.png b/release/font-awesome/reply.png new file mode 100755 index 0000000..e09b19a Binary files /dev/null and b/release/font-awesome/reply.png differ diff --git a/release/font-awesome/resize-full.png b/release/font-awesome/resize-full.png new file mode 100755 index 0000000..0980e99 Binary files /dev/null and b/release/font-awesome/resize-full.png differ diff --git a/release/font-awesome/resize-horizontal.png b/release/font-awesome/resize-horizontal.png new file mode 100755 index 0000000..7af42e1 Binary files /dev/null and b/release/font-awesome/resize-horizontal.png differ diff --git a/release/font-awesome/resize-small.png b/release/font-awesome/resize-small.png new file mode 100755 index 0000000..f1ef565 Binary files /dev/null and b/release/font-awesome/resize-small.png differ diff --git a/release/font-awesome/resize-vertical.png b/release/font-awesome/resize-vertical.png new file mode 100755 index 0000000..61c74e6 Binary files /dev/null and b/release/font-awesome/resize-vertical.png differ diff --git a/release/font-awesome/retweet.png b/release/font-awesome/retweet.png new file mode 100755 index 0000000..fdca081 Binary files /dev/null and b/release/font-awesome/retweet.png differ diff --git a/release/font-awesome/road.png b/release/font-awesome/road.png new file mode 100755 index 0000000..df1a896 Binary files /dev/null and b/release/font-awesome/road.png differ diff --git a/release/font-awesome/rss.png b/release/font-awesome/rss.png new file mode 100755 index 0000000..37715ab Binary files /dev/null and b/release/font-awesome/rss.png differ diff --git a/release/font-awesome/save.png b/release/font-awesome/save.png new file mode 100755 index 0000000..f959820 Binary files /dev/null and b/release/font-awesome/save.png differ diff --git a/release/font-awesome/screenshot.png b/release/font-awesome/screenshot.png new file mode 100755 index 0000000..784a6fa Binary files /dev/null and b/release/font-awesome/screenshot.png differ diff --git a/release/font-awesome/search.png b/release/font-awesome/search.png new file mode 100755 index 0000000..b544ca8 Binary files /dev/null and b/release/font-awesome/search.png differ diff --git a/release/font-awesome/share-alt.png b/release/font-awesome/share-alt.png new file mode 100755 index 0000000..ae75f8e Binary files /dev/null and b/release/font-awesome/share-alt.png differ diff --git a/release/font-awesome/share.png b/release/font-awesome/share.png new file mode 100755 index 0000000..68f9136 Binary files /dev/null and b/release/font-awesome/share.png differ diff --git a/release/font-awesome/shopping-cart.png b/release/font-awesome/shopping-cart.png new file mode 100755 index 0000000..94a8b76 Binary files /dev/null and b/release/font-awesome/shopping-cart.png differ diff --git a/release/font-awesome/sign-blank.png b/release/font-awesome/sign-blank.png new file mode 100755 index 0000000..88ed37c Binary files /dev/null and b/release/font-awesome/sign-blank.png differ diff --git a/release/font-awesome/signal.png b/release/font-awesome/signal.png new file mode 100755 index 0000000..2daea72 Binary files /dev/null and b/release/font-awesome/signal.png differ diff --git a/release/font-awesome/signin.png b/release/font-awesome/signin.png new file mode 100755 index 0000000..d0df482 Binary files /dev/null and b/release/font-awesome/signin.png differ diff --git a/release/font-awesome/signout.png b/release/font-awesome/signout.png new file mode 100755 index 0000000..f069f58 Binary files /dev/null and b/release/font-awesome/signout.png differ diff --git a/release/font-awesome/sitemap.png b/release/font-awesome/sitemap.png new file mode 100755 index 0000000..8925794 Binary files /dev/null and b/release/font-awesome/sitemap.png differ diff --git a/release/font-awesome/sort-down.png b/release/font-awesome/sort-down.png new file mode 100755 index 0000000..c8d46c9 Binary files /dev/null and b/release/font-awesome/sort-down.png differ diff --git a/release/font-awesome/sort-up.png b/release/font-awesome/sort-up.png new file mode 100755 index 0000000..8e8c8a7 Binary files /dev/null and b/release/font-awesome/sort-up.png differ diff --git a/release/font-awesome/sort.png b/release/font-awesome/sort.png new file mode 100755 index 0000000..3882b50 Binary files /dev/null and b/release/font-awesome/sort.png differ diff --git a/release/font-awesome/spinner.png b/release/font-awesome/spinner.png new file mode 100755 index 0000000..2d7177d Binary files /dev/null and b/release/font-awesome/spinner.png differ diff --git a/release/font-awesome/star-empty.png b/release/font-awesome/star-empty.png new file mode 100755 index 0000000..1605051 Binary files /dev/null and b/release/font-awesome/star-empty.png differ diff --git a/release/font-awesome/star-half.png b/release/font-awesome/star-half.png new file mode 100755 index 0000000..c226fd7 Binary files /dev/null and b/release/font-awesome/star-half.png differ diff --git a/release/font-awesome/star.png b/release/font-awesome/star.png new file mode 100755 index 0000000..cd38ba3 Binary files /dev/null and b/release/font-awesome/star.png differ diff --git a/release/font-awesome/step-backward.png b/release/font-awesome/step-backward.png new file mode 100755 index 0000000..a2052cd Binary files /dev/null and b/release/font-awesome/step-backward.png differ diff --git a/release/font-awesome/step-forward.png b/release/font-awesome/step-forward.png new file mode 100755 index 0000000..8203a59 Binary files /dev/null and b/release/font-awesome/step-forward.png differ diff --git a/release/font-awesome/stethoscope.png b/release/font-awesome/stethoscope.png new file mode 100755 index 0000000..79b98ec Binary files /dev/null and b/release/font-awesome/stethoscope.png differ diff --git a/release/font-awesome/stop.png b/release/font-awesome/stop.png new file mode 100755 index 0000000..e96b583 Binary files /dev/null and b/release/font-awesome/stop.png differ diff --git a/release/font-awesome/strikethrough.png b/release/font-awesome/strikethrough.png new file mode 100755 index 0000000..4abb314 Binary files /dev/null and b/release/font-awesome/strikethrough.png differ diff --git a/release/font-awesome/suitcase.png b/release/font-awesome/suitcase.png new file mode 100755 index 0000000..75fb894 Binary files /dev/null and b/release/font-awesome/suitcase.png differ diff --git a/release/font-awesome/table.png b/release/font-awesome/table.png new file mode 100755 index 0000000..474c73c Binary files /dev/null and b/release/font-awesome/table.png differ diff --git a/release/font-awesome/tablet.png b/release/font-awesome/tablet.png new file mode 100755 index 0000000..5a5b5cf Binary files /dev/null and b/release/font-awesome/tablet.png differ diff --git a/release/font-awesome/tag.png b/release/font-awesome/tag.png new file mode 100755 index 0000000..5bcebec Binary files /dev/null and b/release/font-awesome/tag.png differ diff --git a/release/font-awesome/tags.png b/release/font-awesome/tags.png new file mode 100755 index 0000000..6c2528a Binary files /dev/null and b/release/font-awesome/tags.png differ diff --git a/release/font-awesome/tasks.png b/release/font-awesome/tasks.png new file mode 100755 index 0000000..3ccc021 Binary files /dev/null and b/release/font-awesome/tasks.png differ diff --git a/release/font-awesome/text-height.png b/release/font-awesome/text-height.png new file mode 100755 index 0000000..6079f80 Binary files /dev/null and b/release/font-awesome/text-height.png differ diff --git a/release/font-awesome/text-width.png b/release/font-awesome/text-width.png new file mode 100755 index 0000000..0f68da1 Binary files /dev/null and b/release/font-awesome/text-width.png differ diff --git a/release/font-awesome/th-large.png b/release/font-awesome/th-large.png new file mode 100755 index 0000000..b8d73c6 Binary files /dev/null and b/release/font-awesome/th-large.png differ diff --git a/release/font-awesome/th-list.png b/release/font-awesome/th-list.png new file mode 100755 index 0000000..2079ace Binary files /dev/null and b/release/font-awesome/th-list.png differ diff --git a/release/font-awesome/th.png b/release/font-awesome/th.png new file mode 100755 index 0000000..abac714 Binary files /dev/null and b/release/font-awesome/th.png differ diff --git a/release/font-awesome/thumbs-down.png b/release/font-awesome/thumbs-down.png new file mode 100755 index 0000000..0536f4a Binary files /dev/null and b/release/font-awesome/thumbs-down.png differ diff --git a/release/font-awesome/thumbs-up.png b/release/font-awesome/thumbs-up.png new file mode 100755 index 0000000..6274405 Binary files /dev/null and b/release/font-awesome/thumbs-up.png differ diff --git a/release/font-awesome/time.png b/release/font-awesome/time.png new file mode 100755 index 0000000..9ff97a1 Binary files /dev/null and b/release/font-awesome/time.png differ diff --git a/release/font-awesome/tint.png b/release/font-awesome/tint.png new file mode 100755 index 0000000..03de639 Binary files /dev/null and b/release/font-awesome/tint.png differ diff --git a/release/font-awesome/trash.png b/release/font-awesome/trash.png new file mode 100755 index 0000000..6c0cc6d Binary files /dev/null and b/release/font-awesome/trash.png differ diff --git a/release/font-awesome/trophy.png b/release/font-awesome/trophy.png new file mode 100755 index 0000000..d4bfc29 Binary files /dev/null and b/release/font-awesome/trophy.png differ diff --git a/release/font-awesome/truck.png b/release/font-awesome/truck.png new file mode 100755 index 0000000..22a46b6 Binary files /dev/null and b/release/font-awesome/truck.png differ diff --git a/release/font-awesome/twitter-sign.png b/release/font-awesome/twitter-sign.png new file mode 100755 index 0000000..d0955ef Binary files /dev/null and b/release/font-awesome/twitter-sign.png differ diff --git a/release/font-awesome/twitter.png b/release/font-awesome/twitter.png new file mode 100755 index 0000000..c12f916 Binary files /dev/null and b/release/font-awesome/twitter.png differ diff --git a/release/font-awesome/umbrella.png b/release/font-awesome/umbrella.png new file mode 100755 index 0000000..1a247bb Binary files /dev/null and b/release/font-awesome/umbrella.png differ diff --git a/release/font-awesome/underline.png b/release/font-awesome/underline.png new file mode 100755 index 0000000..3c9c09c Binary files /dev/null and b/release/font-awesome/underline.png differ diff --git a/release/font-awesome/undo.png b/release/font-awesome/undo.png new file mode 100755 index 0000000..7e58462 Binary files /dev/null and b/release/font-awesome/undo.png differ diff --git a/release/font-awesome/unlock.png b/release/font-awesome/unlock.png new file mode 100755 index 0000000..2eb1ebf Binary files /dev/null and b/release/font-awesome/unlock.png differ diff --git a/release/font-awesome/upload-alt.png b/release/font-awesome/upload-alt.png new file mode 100755 index 0000000..b296b01 Binary files /dev/null and b/release/font-awesome/upload-alt.png differ diff --git a/release/font-awesome/upload.png b/release/font-awesome/upload.png new file mode 100755 index 0000000..d5144a1 Binary files /dev/null and b/release/font-awesome/upload.png differ diff --git a/release/font-awesome/user-md.png b/release/font-awesome/user-md.png new file mode 100755 index 0000000..c2cee07 Binary files /dev/null and b/release/font-awesome/user-md.png differ diff --git a/release/font-awesome/user.png b/release/font-awesome/user.png new file mode 100755 index 0000000..ea5d179 Binary files /dev/null and b/release/font-awesome/user.png differ diff --git a/release/font-awesome/volume-down.png b/release/font-awesome/volume-down.png new file mode 100755 index 0000000..591f524 Binary files /dev/null and b/release/font-awesome/volume-down.png differ diff --git a/release/font-awesome/volume-off.png b/release/font-awesome/volume-off.png new file mode 100755 index 0000000..64248cb Binary files /dev/null and b/release/font-awesome/volume-off.png differ diff --git a/release/font-awesome/volume-up.png b/release/font-awesome/volume-up.png new file mode 100755 index 0000000..42edb25 Binary files /dev/null and b/release/font-awesome/volume-up.png differ diff --git a/release/font-awesome/warning-sign.png b/release/font-awesome/warning-sign.png new file mode 100755 index 0000000..1dac8bd Binary files /dev/null and b/release/font-awesome/warning-sign.png differ diff --git a/release/font-awesome/wrench.png b/release/font-awesome/wrench.png new file mode 100755 index 0000000..a1a9a18 Binary files /dev/null and b/release/font-awesome/wrench.png differ diff --git a/release/font-awesome/zoom-in.png b/release/font-awesome/zoom-in.png new file mode 100755 index 0000000..871278c Binary files /dev/null and b/release/font-awesome/zoom-in.png differ diff --git a/release/font-awesome/zoom-out.png b/release/font-awesome/zoom-out.png new file mode 100755 index 0000000..32d806c Binary files /dev/null and b/release/font-awesome/zoom-out.png differ diff --git a/release/index.html b/release/index.html new file mode 100755 index 0000000..7afb010 --- /dev/null +++ b/release/index.html @@ -0,0 +1,67 @@ + + + + + + + Shape Shifter + + + + + +
?
+ +
+ + ↵ +
+ +
+ + +
+
CommandsInfoShare
+ +
+
    +
  • TextType anythingDemo
    • +
  • Countdown#countdownnumberDemo
    • +
  • Icon#iconname (using Font Awesome)Demo
    • +
  • Time#timeDemo
    • +
  • Rectangle#rectanglewidth x heightDemo
    • +
  • Circle#circlediameterDemo
    • + +
  • Animatecommand1 |command2Demo
    • +
+ +
+
+

Shape Shifter

+

+ An experiment by Kenneth Cachia.
+ Font Awesome is being used to render all #icons. +

+
+
+ +
+
+

Sharing

+

Simply add ?a= to the current URL to share any static or animated text. Examples:

+

+ www.kennethcachia.com/shape-shifter?a=Hello
+ www.kennethcachia.com/shape-shifter?a=Hello|#countdown 3 +

+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/release/shape-shifter.js b/release/shape-shifter.js new file mode 100644 index 0000000..dede9cc --- /dev/null +++ b/release/shape-shifter.js @@ -0,0 +1,740 @@ +/* + * Shape Shifter + * http://www.kennethcachia.com/shape-shifter + * A canvas experiment + */ + +var S = { + init: function () { + var action = window.location.href, + i = action.indexOf('?a='); + + S.Drawing.init('.canvas'); + S.ShapeBuilder.init(); + S.UI.init(); + document.body.classList.add('body--ready'); + + if (i !== -1) { + S.UI.simulate(decodeURI(action).substring(i + 3)); + } else { + S.UI.simulate('Shape|Shifter|Type|to start|#icon thumbs-up|#countdown 3||'); + } + + S.Drawing.loop(function () { + S.Shape.render(); + }); + } +}; + + +window.addEventListener('load', function () { + S.init(); +}); + + +S.Drawing = (function () { + 'use strict'; + + var canvas, + context, + renderFn, + requestFrame = window.requestAnimationFrame || + window.webkitRequestAnimationFrame || + window.mozRequestAnimationFrame || + window.oRequestAnimationFrame || + window.msRequestAnimationFrame || + function(callback) { + window.setTimeout(callback, 1000 / 60); + }; + + return { + init: function (el) { + canvas = document.querySelector(el); + context = canvas.getContext('2d'); + this.adjustCanvas(); + + window.addEventListener('resize', function (e) { + S.Drawing.adjustCanvas(); + }); + }, + + loop: function (fn) { + renderFn = !renderFn ? fn : renderFn; + this.clearFrame(); + renderFn(); + requestFrame.call(window, this.loop.bind(this)); + }, + + adjustCanvas: function () { + canvas.width = window.innerWidth; + canvas.height = window.innerHeight; + }, + + clearFrame: function () { + context.clearRect(0, 0, canvas.width, canvas.height); + }, + + getArea: function () { + return { w: canvas.width, h: canvas.height }; + }, + + drawCircle: function (p, c) { + context.fillStyle = c.render(); + context.beginPath(); + context.arc(p.x, p.y, p.z, 0, 2 * Math.PI, true); + context.closePath(); + context.fill(); + } + }; +}()); + + +S.Point = function (args) { + this.x = args.x; + this.y = args.y; + this.z = args.z; + this.a = args.a; + this.h = args.h; +}; + + +S.Color = function (r, g, b, a) { + this.r = r; + this.g = g; + this.b = b; + this.a = a; +}; + +S.Color.prototype = { + render: function () { + return 'rgba(' + this.r + ',' + this.g + ',' + this.b + ',' + this.a + ')'; + } +}; + + +S.UI = (function () { + var input = document.querySelector('.ui-input'), + ui = document.querySelector('.ui'), + help = document.querySelector('.help'), + commands = document.querySelector('.commands'), + overlay = document.querySelector('.overlay'), + canvas = document.querySelector('.canvas'), + interval, + isTouch = ('ontouchstart' in window || navigator.msMaxTouchPoints), + currentAction, + resizeTimer, + time, + maxShapeSize = 30, + firstAction = true, + sequence = [], + cmd = '#'; + + function formatTime(date) { + var h = date.getHours(), + m = date.getMinutes(); + + m = m < 10 ? '0' + m : m; + return h + ':' + m; + } + + function getValue(value) { + return value && value.split(' ')[1]; + } + + function getAction(value) { + value = value && value.split(' ')[0]; + return value && value[0] === cmd && value.substring(1); + } + + function timedAction(fn, delay, max, reverse) { + clearInterval(interval); + currentAction = reverse ? max : 1; + fn(currentAction); + + if (!max || (!reverse && currentAction < max) || (reverse && currentAction > 0)) { + interval = setInterval(function () { + currentAction = reverse ? currentAction - 1 : currentAction + 1; + fn(currentAction); + + if ((!reverse && max && currentAction === max) || (reverse && currentAction === 0)) { + clearInterval(interval); + } + }, delay); + } + } + + function reset(destroy) { + clearInterval(interval); + sequence = []; + time = null; + + if (destroy) { + S.Shape.switchShape(S.ShapeBuilder.letter('')); + } + } + + function performAction(value) { + var action, + current; + + overlay.classList.remove('overlay--visible'); + sequence = typeof(value) === 'object' ? value : sequence.concat(value.split('|')); + input.value = ''; + checkInputWidth(); + + timedAction(function (index) { + current = sequence.shift(); + action = getAction(current); + value = getValue(current); + + switch (action) { + case 'countdown': + value = parseInt(value, 10) || 10; + value = value > 0 ? value : 10; + + timedAction(function (index) { + if (index === 0) { + if (sequence.length === 0) { + S.Shape.switchShape(S.ShapeBuilder.letter('')); + } else { + performAction(sequence); + } + } else { + S.Shape.switchShape(S.ShapeBuilder.letter(index), true); + } + }, 1000, value, true); + break; + + case 'rectangle': + value = value && value.split('x'); + value = (value && value.length === 2) ? value : [maxShapeSize, maxShapeSize / 2]; + + S.Shape.switchShape(S.ShapeBuilder.rectangle(Math.min(maxShapeSize, parseInt(value[0], 10)), Math.min(maxShapeSize, parseInt(value[1], 10)))); + break; + + case 'circle': + value = parseInt(value, 10) || maxShapeSize; + value = Math.min(value, maxShapeSize); + S.Shape.switchShape(S.ShapeBuilder.circle(value)); + break; + + case 'time': + var t = formatTime(new Date()); + + if (sequence.length > 0) { + S.Shape.switchShape(S.ShapeBuilder.letter(t)); + } else { + timedAction(function () { + t = formatTime(new Date()); + if (t !== time) { + time = t; + S.Shape.switchShape(S.ShapeBuilder.letter(time)); + } + }, 1000); + } + break; + + case 'icon': + S.ShapeBuilder.imageFile('font-awesome/' + value + '.png', function (obj) { + S.Shape.switchShape(obj); + }); + break; + + default: + S.Shape.switchShape(S.ShapeBuilder.letter(current[0] === cmd ? 'What?' : current)); + } + }, 2000, sequence.length); + } + + function checkInputWidth(e) { + if (input.value.length > 18) { + ui.classList.add('ui--wide'); + } else { + ui.classList.remove('ui--wide'); + } + + if (firstAction && input.value.length > 0) { + ui.classList.add('ui--enter'); + } else { + ui.classList.remove('ui--enter'); + } + } + + function bindEvents() { + document.body.addEventListener('keydown', function (e) { + input.focus(); + + if (e.keyCode === 13) { + firstAction = false; + reset(); + performAction(input.value); + } + }); + + window.addEventListener('resize', function () { + clearTimeout(resizeTimer); + resizeTimer = setTimeout(function () { + S.Shape.shuffleIdle(); + reset(true); + }, 500); + }); + + input.addEventListener('input', checkInputWidth); + input.addEventListener('change', checkInputWidth); + input.addEventListener('focus', checkInputWidth); + + help.addEventListener('click', function (e) { + overlay.classList.toggle('overlay--visible'); + + if (overlay.classList.contains('overlay--visible')) { + reset(true); + } + }); + + commands.addEventListener('click', function (e) { + var el, + info, + demo, + tab, + active, + url; + + if (e.target.classList.contains('commands-item')) { + el = e.target; + } else { + el = e.target.parentNode.classList.contains('commands-item') ? e.target.parentNode : e.target.parentNode.parentNode; + } + + info = el && el.querySelector('.commands-item-info'); + demo = el && info.getAttribute('data-demo'); + url = el && info.getAttribute('data-url'); + + if (info) { + overlay.classList.remove('overlay--visible'); + + if (demo) { + input.value = demo; + + if (isTouch) { + reset(); + performAction(input.value); + } else { + input.focus(); + } + } else if (url) { + window.location = url; + } + } + }); + + canvas.addEventListener('click', function (e) { + overlay.classList.remove('overlay--visible'); + }); + } + + return { + init: function () { + bindEvents(); + input.focus(); + + if (isTouch) { + document.body.classList.add('touch'); + } + + S.UI.Tabs.init(); + }, + + simulate: function (action) { + performAction(action); + } + }; +}()); + + +S.UI.Tabs = (function () { + var tabs = document.querySelector('.tabs'), + labels = document.querySelector('.tabs-labels'), + triggers = document.querySelectorAll('.tabs-label'), + panels = document.querySelectorAll('.tabs-panel'); + + function activate(i) { + triggers[i].classList.add('tabs-label--active'); + panels[i].classList.add('tabs-panel--active'); + } + + function bindEvents() { + labels.addEventListener('click', function (e) { + var el = e.target, + index; + + if (el.classList.contains('tabs-label')) { + for (var t = 0; t < triggers.length; t++) { + triggers[t].classList.remove('tabs-label--active'); + panels[t].classList.remove('tabs-panel--active'); + + if (el === triggers[t]) { + index = t; + } + } + + activate(index); + } + }); + } + + return { + init: function () { + activate(0); + bindEvents(); + } + }; +}()); + + +S.Dot = function (x, y) { + this.p = new S.Point({ + x: x, + y: y, + z: 5, + a: 1, + h: 0 + }); + + this.e = 0.07; + this.s = true; + + this.c = new S.Color(255, 255, 255, this.p.a); + + this.t = this.clone(); + this.q = []; +}; + +S.Dot.prototype = { + clone: function () { + return new S.Point({ + x: this.x, + y: this.y, + z: this.z, + a: this.a, + h: this.h + }); + }, + + _draw: function () { + this.c.a = this.p.a; + S.Drawing.drawCircle(this.p, this.c); + }, + + _moveTowards: function (n) { + var details = this.distanceTo(n, true), + dx = details[0], + dy = details[1], + d = details[2], + e = this.e * d; + + if (this.p.h === -1) { + this.p.x = n.x; + this.p.y = n.y; + return true; + } + + if (d > 1) { + this.p.x -= ((dx / d) * e); + this.p.y -= ((dy / d) * e); + } else { + if (this.p.h > 0) { + this.p.h--; + } else { + return true; + } + } + + return false; + }, + + _update: function () { + var p, + d; + + if (this._moveTowards(this.t)) { + p = this.q.shift(); + + if (p) { + this.t.x = p.x || this.p.x; + this.t.y = p.y || this.p.y; + this.t.z = p.z || this.p.z; + this.t.a = p.a || this.p.a; + this.p.h = p.h || 0; + } else { + if (this.s) { + this.p.x -= Math.sin(Math.random() * 3.142); + this.p.y -= Math.sin(Math.random() * 3.142); + } else { + this.move(new S.Point({ + x: this.p.x + (Math.random() * 50) - 25, + y: this.p.y + (Math.random() * 50) - 25, + })); + } + } + } + + d = this.p.a - this.t.a; + this.p.a = Math.max(0.1, this.p.a - (d * 0.05)); + d = this.p.z - this.t.z; + this.p.z = Math.max(1, this.p.z - (d * 0.05)); + }, + + distanceTo: function (n, details) { + var dx = this.p.x - n.x, + dy = this.p.y - n.y, + d = Math.sqrt(dx * dx + dy * dy); + + return details ? [dx, dy, d] : d; + }, + + move: function (p, avoidStatic) { + if (!avoidStatic || (avoidStatic && this.distanceTo(p) > 1)) { + this.q.push(p); + } + }, + + render: function () { + this._update(); + this._draw(); + } +}; + + +S.ShapeBuilder = (function () { + var gap = 13, + shapeCanvas = document.createElement('canvas'), + shapeContext = shapeCanvas.getContext('2d'), + fontSize = 500, + fontFamily = 'Avenir, Helvetica Neue, Helvetica, Arial, sans-serif'; + + function fit() { + shapeCanvas.width = Math.floor(window.innerWidth / gap) * gap; + shapeCanvas.height = Math.floor(window.innerHeight / gap) * gap; + shapeContext.fillStyle = 'red'; + shapeContext.textBaseline = 'middle'; + shapeContext.textAlign = 'center'; + } + + function processCanvas() { + var pixels = shapeContext.getImageData(0, 0, shapeCanvas.width, shapeCanvas.height).data, + dots = [], + x = 0, + y = 0, + fx = shapeCanvas.width, + fy = shapeCanvas.height, + w = 0, + h = 0; + + for (var p = 0; p < pixels.length; p += (4 * gap)) { + if (pixels[p + 3] > 0) { + dots.push(new S.Point({ + x: x, + y: y + })); + + w = x > w ? x : w; + h = y > h ? y : h; + fx = x < fx ? x : fx; + fy = y < fy ? y : fy; + } + + x += gap; + + if (x >= shapeCanvas.width) { + x = 0; + y += gap; + p += gap * 4 * shapeCanvas.width; + } + } + + return { dots: dots, w: w + fx, h: h + fy }; + } + + function setFontSize(s) { + shapeContext.font = 'bold ' + s + 'px ' + fontFamily; + } + + function isNumber(n) { + return !isNaN(parseFloat(n)) && isFinite(n); + } + + return { + init: function () { + fit(); + window.addEventListener('resize', fit); + }, + + imageFile: function (url, callback) { + var image = new Image(), + a = S.Drawing.getArea(); + + image.onload = function () { + shapeContext.clearRect(0, 0, shapeCanvas.width, shapeCanvas.height); + shapeContext.drawImage(this, 0, 0, a.h * 0.6, a.h * 0.6); + callback(processCanvas()); + }; + + image.onerror = function () { + callback(S.ShapeBuilder.letter('What?')); + }; + + image.src = url; + }, + + circle: function (d) { + var r = Math.max(0, d) / 2; + shapeContext.clearRect(0, 0, shapeCanvas.width, shapeCanvas.height); + shapeContext.beginPath(); + shapeContext.arc(r * gap, r * gap, r * gap, 0, 2 * Math.PI, false); + shapeContext.fill(); + shapeContext.closePath(); + + return processCanvas(); + }, + + letter: function (l) { + var s = 0; + + setFontSize(fontSize); + s = Math.min(fontSize, + (shapeCanvas.width / shapeContext.measureText(l).width) * 0.8 * fontSize, + (shapeCanvas.height / fontSize) * (isNumber(l) ? 1 : 0.45) * fontSize); + setFontSize(s); + + shapeContext.clearRect(0, 0, shapeCanvas.width, shapeCanvas.height); + shapeContext.fillText(l, shapeCanvas.width / 2, shapeCanvas.height / 2); + + return processCanvas(); + }, + + rectangle: function (w, h) { + var dots = [], + width = gap * w, + height = gap * h; + + for (var y = 0; y < height; y += gap) { + for (var x = 0; x < width; x += gap) { + dots.push(new S.Point({ + x: x, + y: y, + })); + } + } + + return { dots: dots, w: width, h: height }; + } + }; +}()); + + +S.Shape = (function () { + var dots = [], + width = 0, + height = 0, + cx = 0, + cy = 0; + + function compensate() { + var a = S.Drawing.getArea(); + + cx = a.w / 2 - width / 2; + cy = a.h / 2 - height / 2; + } + + return { + shuffleIdle: function () { + var a = S.Drawing.getArea(); + + for (var d = 0; d < dots.length; d++) { + if (!dots[d].s) { + dots[d].move({ + x: Math.random() * a.w, + y: Math.random() * a.h + }); + } + } + }, + + switchShape: function (n, fast) { + var size, + a = S.Drawing.getArea(), + d = 0, + i = 0; + + width = n.w; + height = n.h; + + compensate(); + + if (n.dots.length > dots.length) { + size = n.dots.length - dots.length; + for (d = 1; d <= size; d++) { + dots.push(new S.Dot(a.w / 2, a.h / 2)); + } + } + + d = 0; + + while (n.dots.length > 0) { + i = Math.floor(Math.random() * n.dots.length); + dots[d].e = fast ? 0.25 : (dots[d].s ? 0.14 : 0.11); + + if (dots[d].s) { + dots[d].move(new S.Point({ + z: Math.random() * 20 + 10, + a: Math.random(), + h: 18 + })); + } else { + dots[d].move(new S.Point({ + z: Math.random() * 5 + 5, + h: fast ? 18 : 30 + })); + } + + dots[d].s = true; + dots[d].move(new S.Point({ + x: n.dots[i].x + cx, + y: n.dots[i].y + cy, + a: 1, + z: 5, + h: 0 + })); + + n.dots = n.dots.slice(0, i).concat(n.dots.slice(i + 1)); + d++; + } + + for (i = d; i < dots.length; i++) { + if (dots[i].s) { + dots[i].move(new S.Point({ + z: Math.random() * 20 + 10, + a: Math.random(), + h: 20 + })); + + dots[i].s = false; + dots[i].e = 0.04; + dots[i].move(new S.Point({ + x: Math.random() * a.w, + y: Math.random() * a.h, + a: 0.3, //.4 + z: Math.random() * 4, + h: 0 + })); + } + } + }, + + render: function () { + for (var d = 0; d < dots.length; d++) { + dots[d].render(); + } + } + }; +}()); diff --git a/release/site.min.css b/release/site.min.css new file mode 100644 index 0000000..dd660ca --- /dev/null +++ b/release/site.min.css @@ -0,0 +1,2 @@ +/*! shape-shifter 2013-08-14 */ +/*! normalize.css v2.0.1 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}body{font-family:Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;background:#79a8ae;color:#666;font-size:16px;line-height:1.5em}h1{color:#111;margin:0 0 12px;font-size:24px;line-height:1.5em}p{margin:0 0 10x}a{color:#888;text-decoration:none;border-bottom:1px solid #ccc}a:hover{border-bottom-color:#888}body,.overlay{-webkit-perspective:1000;-webkit-perspective-origin-y:25%}.body--ready{background:-webkit-linear-gradient(top,#cbebdb 0,#3794c0 120%);background:-moz-linear-gradient(top,#cbebdb 0,#3794c0 120%);background:-o-linear-gradient(top,#cbebdb 0,#3794c0 120%);background:-ms-linear-gradient(top,#cbebdb 0,#3794c0 120%);background:linear-gradient(top,#cbebdb 0,#3794c0 120%)}.body--ready .overlay{-webkit-transition:-webkit-transform .7s cubic-bezier(0.694,.0482,.335,1),opacity .7s cubic-bezier(0.694,.0482,.335,1);-moz-transition:-moz-transform .7s cubic-bezier(0.694,.0482,.335,1),opacity .7s cubic-bezier(0.694,.0482,.335,1);-ms-transition:-ms-transform .7s cubic-bezier(0.694,.0482,.335,1),opacity .7s cubic-bezier(0.694,.0482,.335,1);-o-transition:-o-transform .7s cubic-bezier(0.694,.0482,.335,1),opacity .7s cubic-bezier(0.694,.0482,.335,1);transition:transform .7s cubic-bezier(0.694,.0482,.335,1),opacity .7s cubic-bezier(0.694,.0482,.335,1)}.body--ready .ui,.body--ready .help{display:block}.ui{display:none;position:absolute;left:50%;bottom:5%;width:300px;margin-left:-150px}.ui-input{width:100%;height:50px;background:0;font-size:24px;font-weight:700;color:#fff;text-align:center;border:0;border-bottom:2px solid #fff}.ui-input:focus{outline:0;border:0;border-bottom:2px solid #fff}.ui-return{display:none;position:absolute;top:20px;right:0;padding:3px 2px 0;font-size:10px;line-height:10px;color:#fff;border:1px solid #fff}.ui--enter .ui-return{display:block}.ui--wide{width:76%;margin-left:12%;left:0}.ui--wide .ui-return{right:-20px}.help{display:none;position:absolute;top:40px;right:40px;width:25px;height:25px;text-align:center;font-size:13px;line-height:27px;font-weight:700;cursor:pointer;background:#fff;color:#79a8ae;opacity:.9;-webkit-transition:opacity .1s cubic-bezier(0.694,.0482,.335,1);-moz-transition:opacity .1s cubic-bezier(0.694,.0482,.335,1);-ms-transition:opacity .1s cubic-bezier(0.694,.0482,.335,1);-o-transition:opacity .1s cubic-bezier(0.694,.0482,.335,1);transition:opacity .1s cubic-bezier(0.694,.0482,.335,1)}.help:hover{opacity:1}.overlay{position:absolute;top:50%;left:50%;width:550px;height:490px;margin:-260px 0 0 -275px;opacity:0;-webkit-transform:rotateY(90deg);-moz-transform:rotateY(90deg);-ms-transform:rotateY(90deg);-o-transform:rotateY(90deg);transform:rotateY(90deg)}.overlay--visible{opacity:1;-webkit-transform:rotateY(0);-moz-transform:rotateY(0);-ms-transform:rotateY(0);-o-transform:rotateY(0);transform:rotateY(0)}.ui-share,.ui-details{opacity:.9;background:#fff;z-index:2}.ui-details-content,.ui-share-content{padding:100px 50px}.commands{margin:0;padding:0;list-style:none;cursor:pointer}.commands-item{font-size:12px;line-height:22px;font-weight:700;text-transform:uppercase;letter-spacing:1px;padding:20px;background:#fff;margin-top:1px;color:#333;opacity:.9;-webkit-transition:-webkit-transform .7s cubic-bezier(0.694,.0482,.335,1),opacity .1s cubic-bezier(0.694,.0482,.335,1);-moz-transition:-moz-transform .1s cubic-bezier(0.694,.0482,.335,1),opacity .1s cubic-bezier(0.694,.0482,.335,1);-ms-transition:-ms-transform .1s cubic-bezier(0.694,.0482,.335,1),opacity .1s cubic-bezier(0.694,.0482,.335,1);-o-transition:-o-transform .1s cubic-bezier(0.694,.0482,.335,1),opacity .1s cubic-bezier(0.694,.0482,.335,1);transition:transform .1s cubic-bezier(0.694,.0482,.335,1),opacity .1s cubic-bezier(0.694,.0482,.335,1)}.commands-item--gap{margin-top:9px}.commands-item:hover{opacity:1}.commands-item:hover .commands-item-action{background:#333}.commands-item a{display:inline-block}.commands-item-mode{display:inline-block;margin-left:3px;font-style:italic;color:#ccc}.commands-item-title{display:inline-block;width:150px}.commands-item-info{display:inline-block;width:300px;font-size:14px;text-transform:none;letter-spacing:0;font-weight:400;color:#aaa}.commands-item-action{display:inline-block;float:right;margin-top:3px;text-transform:uppercase;font-size:10px;line-height:10px;color:#fff;background:#90c9d1;padding:5px 10px 4px;border-radius:3px}.commands-item:first-child{margin-top:0}.twitter-share{position:absolute;top:4px;right:20px}.tabs-labels{margin-bottom:9px}.tabs-label{display:inline-block;background:#fff;padding:10px 20px;font-size:12px;line-height:22px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#333;opacity:.5;cursor:pointer;margin-right:2px;-webkit-transition:opacity .1s cubic-bezier(0.694,.0482,.335,1);-moz-transition:opacity .1s cubic-bezier(0.694,.0482,.335,1);-ms-transition:opacity .1s cubic-bezier(0.694,.0482,.335,1);-o-transition:opacity .1s cubic-bezier(0.694,.0482,.335,1);transition:opacity .1s cubic-bezier(0.694,.0482,.335,1)}.tabs-label:hover{opacity:.9}.tabs-label--active{opacity:.9}.tabs-panel{display:none}.tabs-panel--active{display:block}.tab-panel{position:absolute;top:0;left:0;width:100%}.touch .ui-input{display:none}@media screen and (max-height:600px){.ui-input{color:#111;border-color:#111}.ui-input:focus{border-color:#111}} \ No newline at end of file diff --git a/scripts/color.js b/scripts/color.js new file mode 100644 index 0000000..0a881bc --- /dev/null +++ b/scripts/color.js @@ -0,0 +1,13 @@ + +S.Color = function (r, g, b, a) { + this.r = r; + this.g = g; + this.b = b; + this.a = a; +}; + +S.Color.prototype = { + render: function () { + return 'rgba(' + this.r + ',' + this.g + ',' + this.b + ',' + this.a + ')'; + } +}; diff --git a/scripts/dot.js b/scripts/dot.js new file mode 100644 index 0000000..abc40d4 --- /dev/null +++ b/scripts/dot.js @@ -0,0 +1,113 @@ + +S.Dot = function (x, y) { + this.p = new S.Point({ + x: x, + y: y, + z: 5, + a: 1, + h: 0 + }); + + this.e = 0.07; + this.s = true; + + this.c = new S.Color(255, 255, 255, this.p.a); + + this.t = this.clone(); + this.q = []; +}; + +S.Dot.prototype = { + clone: function () { + return new S.Point({ + x: this.x, + y: this.y, + z: this.z, + a: this.a, + h: this.h + }); + }, + + _draw: function () { + this.c.a = this.p.a; + S.Drawing.drawCircle(this.p, this.c); + }, + + _moveTowards: function (n) { + var details = this.distanceTo(n, true), + dx = details[0], + dy = details[1], + d = details[2], + e = this.e * d; + + if (this.p.h === -1) { + this.p.x = n.x; + this.p.y = n.y; + return true; + } + + if (d > 1) { + this.p.x -= ((dx / d) * e); + this.p.y -= ((dy / d) * e); + } else { + if (this.p.h > 0) { + this.p.h--; + } else { + return true; + } + } + + return false; + }, + + _update: function () { + var p, + d; + + if (this._moveTowards(this.t)) { + p = this.q.shift(); + + if (p) { + this.t.x = p.x || this.p.x; + this.t.y = p.y || this.p.y; + this.t.z = p.z || this.p.z; + this.t.a = p.a || this.p.a; + this.p.h = p.h || 0; + } else { + if (this.s) { + this.p.x -= Math.sin(Math.random() * 3.142); + this.p.y -= Math.sin(Math.random() * 3.142); + } else { + this.move(new S.Point({ + x: this.p.x + (Math.random() * 50) - 25, + y: this.p.y + (Math.random() * 50) - 25, + })); + } + } + } + + d = this.p.a - this.t.a; + this.p.a = Math.max(0.1, this.p.a - (d * 0.05)); + d = this.p.z - this.t.z; + this.p.z = Math.max(1, this.p.z - (d * 0.05)); + }, + + distanceTo: function (n, details) { + var dx = this.p.x - n.x, + dy = this.p.y - n.y, + d = Math.sqrt(dx * dx + dy * dy); + + return details ? [dx, dy, d] : d; + }, + + move: function (p, avoidStatic) { + if (!avoidStatic || (avoidStatic && this.distanceTo(p) > 1)) { + this.q.push(p); + } + }, + + render: function () { + this._update(); + this._draw(); + } +}; diff --git a/scripts/drawing.js b/scripts/drawing.js new file mode 100644 index 0000000..a31252e --- /dev/null +++ b/scripts/drawing.js @@ -0,0 +1,56 @@ + +S.Drawing = (function () { + 'use strict'; + + var canvas, + context, + renderFn, + requestFrame = window.requestAnimationFrame || + window.webkitRequestAnimationFrame || + window.mozRequestAnimationFrame || + window.oRequestAnimationFrame || + window.msRequestAnimationFrame || + function(callback) { + window.setTimeout(callback, 1000 / 60); + }; + + return { + init: function (el) { + canvas = document.querySelector(el); + context = canvas.getContext('2d'); + this.adjustCanvas(); + + window.addEventListener('resize', function (e) { + S.Drawing.adjustCanvas(); + }); + }, + + loop: function (fn) { + renderFn = !renderFn ? fn : renderFn; + this.clearFrame(); + renderFn(); + requestFrame.call(window, this.loop.bind(this)); + }, + + adjustCanvas: function () { + canvas.width = window.innerWidth; + canvas.height = window.innerHeight; + }, + + clearFrame: function () { + context.clearRect(0, 0, canvas.width, canvas.height); + }, + + getArea: function () { + return { w: canvas.width, h: canvas.height }; + }, + + drawCircle: function (p, c) { + context.fillStyle = c.render(); + context.beginPath(); + context.arc(p.x, p.y, p.z, 0, 2 * Math.PI, true); + context.closePath(); + context.fill(); + } + }; +}()); diff --git a/scripts/point.js b/scripts/point.js new file mode 100644 index 0000000..756fe60 --- /dev/null +++ b/scripts/point.js @@ -0,0 +1,8 @@ + +S.Point = function (args) { + this.x = args.x; + this.y = args.y; + this.z = args.z; + this.a = args.a; + this.h = args.h; +}; diff --git a/scripts/shape-builder.js b/scripts/shape-builder.js new file mode 100644 index 0000000..f5ab2ca --- /dev/null +++ b/scripts/shape-builder.js @@ -0,0 +1,126 @@ + +S.ShapeBuilder = (function () { + var gap = 13, + shapeCanvas = document.createElement('canvas'), + shapeContext = shapeCanvas.getContext('2d'), + fontSize = 500, + fontFamily = 'Avenir, Helvetica Neue, Helvetica, Arial, sans-serif'; + + function fit() { + shapeCanvas.width = Math.floor(window.innerWidth / gap) * gap; + shapeCanvas.height = Math.floor(window.innerHeight / gap) * gap; + shapeContext.fillStyle = 'red'; + shapeContext.textBaseline = 'middle'; + shapeContext.textAlign = 'center'; + } + + function processCanvas() { + var pixels = shapeContext.getImageData(0, 0, shapeCanvas.width, shapeCanvas.height).data, + dots = [], + x = 0, + y = 0, + fx = shapeCanvas.width, + fy = shapeCanvas.height, + w = 0, + h = 0; + + for (var p = 0; p < pixels.length; p += (4 * gap)) { + if (pixels[p + 3] > 0) { + dots.push(new S.Point({ + x: x, + y: y + })); + + w = x > w ? x : w; + h = y > h ? y : h; + fx = x < fx ? x : fx; + fy = y < fy ? y : fy; + } + + x += gap; + + if (x >= shapeCanvas.width) { + x = 0; + y += gap; + p += gap * 4 * shapeCanvas.width; + } + } + + return { dots: dots, w: w + fx, h: h + fy }; + } + + function setFontSize(s) { + shapeContext.font = 'bold ' + s + 'px ' + fontFamily; + } + + function isNumber(n) { + return !isNaN(parseFloat(n)) && isFinite(n); + } + + return { + init: function () { + fit(); + window.addEventListener('resize', fit); + }, + + imageFile: function (url, callback) { + var image = new Image(), + a = S.Drawing.getArea(); + + image.onload = function () { + shapeContext.clearRect(0, 0, shapeCanvas.width, shapeCanvas.height); + shapeContext.drawImage(this, 0, 0, a.h * 0.6, a.h * 0.6); + callback(processCanvas()); + }; + + image.onerror = function () { + callback(S.ShapeBuilder.letter('What?')); + }; + + image.src = url; + }, + + circle: function (d) { + var r = Math.max(0, d) / 2; + shapeContext.clearRect(0, 0, shapeCanvas.width, shapeCanvas.height); + shapeContext.beginPath(); + shapeContext.arc(r * gap, r * gap, r * gap, 0, 2 * Math.PI, false); + shapeContext.fill(); + shapeContext.closePath(); + + return processCanvas(); + }, + + letter: function (l) { + var s = 0; + + setFontSize(fontSize); + s = Math.min(fontSize, + (shapeCanvas.width / shapeContext.measureText(l).width) * 0.8 * fontSize, + (shapeCanvas.height / fontSize) * (isNumber(l) ? 1 : 0.45) * fontSize); + setFontSize(s); + + shapeContext.clearRect(0, 0, shapeCanvas.width, shapeCanvas.height); + shapeContext.fillText(l, shapeCanvas.width / 2, shapeCanvas.height / 2); + + return processCanvas(); + }, + + rectangle: function (w, h) { + var dots = [], + width = gap * w, + height = gap * h; + + for (var y = 0; y < height; y += gap) { + for (var x = 0; x < width; x += gap) { + dots.push(new S.Point({ + x: x, + y: y, + })); + } + } + + return { dots: dots, w: width, h: height }; + } + }; +}()); diff --git a/scripts/shape-shifter.js b/scripts/shape-shifter.js new file mode 100644 index 0000000..07aa990 --- /dev/null +++ b/scripts/shape-shifter.js @@ -0,0 +1,32 @@ +/* + * Shape Shifter + * http://www.kennethcachia.com/shape-shifter + * A canvas experiment + */ + +var S = { + init: function () { + var action = window.location.href, + i = action.indexOf('?a='); + + S.Drawing.init('.canvas'); + S.ShapeBuilder.init(); + S.UI.init(); + document.body.classList.add('body--ready'); + + if (i !== -1) { + S.UI.simulate(decodeURI(action).substring(i + 3)); + } else { + S.UI.simulate('Shape|Shifter|Type|to start|#icon thumbs-up|#countdown 3||'); + } + + S.Drawing.loop(function () { + S.Shape.render(); + }); + } +}; + + +window.addEventListener('load', function () { + S.init(); +}); diff --git a/scripts/shape.js b/scripts/shape.js new file mode 100644 index 0000000..ff6b704 --- /dev/null +++ b/scripts/shape.js @@ -0,0 +1,107 @@ + +S.Shape = (function () { + var dots = [], + width = 0, + height = 0, + cx = 0, + cy = 0; + + function compensate() { + var a = S.Drawing.getArea(); + + cx = a.w / 2 - width / 2; + cy = a.h / 2 - height / 2; + } + + return { + shuffleIdle: function () { + var a = S.Drawing.getArea(); + + for (var d = 0; d < dots.length; d++) { + if (!dots[d].s) { + dots[d].move({ + x: Math.random() * a.w, + y: Math.random() * a.h + }); + } + } + }, + + switchShape: function (n, fast) { + var size, + a = S.Drawing.getArea(), + d = 0, + i = 0; + + width = n.w; + height = n.h; + + compensate(); + + if (n.dots.length > dots.length) { + size = n.dots.length - dots.length; + for (d = 1; d <= size; d++) { + dots.push(new S.Dot(a.w / 2, a.h / 2)); + } + } + + d = 0; + + while (n.dots.length > 0) { + i = Math.floor(Math.random() * n.dots.length); + dots[d].e = fast ? 0.25 : (dots[d].s ? 0.14 : 0.11); + + if (dots[d].s) { + dots[d].move(new S.Point({ + z: Math.random() * 20 + 10, + a: Math.random(), + h: 18 + })); + } else { + dots[d].move(new S.Point({ + z: Math.random() * 5 + 5, + h: fast ? 18 : 30 + })); + } + + dots[d].s = true; + dots[d].move(new S.Point({ + x: n.dots[i].x + cx, + y: n.dots[i].y + cy, + a: 1, + z: 5, + h: 0 + })); + + n.dots = n.dots.slice(0, i).concat(n.dots.slice(i + 1)); + d++; + } + + for (i = d; i < dots.length; i++) { + if (dots[i].s) { + dots[i].move(new S.Point({ + z: Math.random() * 20 + 10, + a: Math.random(), + h: 20 + })); + + dots[i].s = false; + dots[i].e = 0.04; + dots[i].move(new S.Point({ + x: Math.random() * a.w, + y: Math.random() * a.h, + a: 0.3, //.4 + z: Math.random() * 4, + h: 0 + })); + } + } + }, + + render: function () { + for (var d = 0; d < dots.length; d++) { + dots[d].render(); + } + } + }; +}()); diff --git a/scripts/ui-tabs.js b/scripts/ui-tabs.js new file mode 100644 index 0000000..3fbc4bb --- /dev/null +++ b/scripts/ui-tabs.js @@ -0,0 +1,39 @@ + +S.UI.Tabs = (function () { + var tabs = document.querySelector('.tabs'), + labels = document.querySelector('.tabs-labels'), + triggers = document.querySelectorAll('.tabs-label'), + panels = document.querySelectorAll('.tabs-panel'); + + function activate(i) { + triggers[i].classList.add('tabs-label--active'); + panels[i].classList.add('tabs-panel--active'); + } + + function bindEvents() { + labels.addEventListener('click', function (e) { + var el = e.target, + index; + + if (el.classList.contains('tabs-label')) { + for (var t = 0; t < triggers.length; t++) { + triggers[t].classList.remove('tabs-label--active'); + panels[t].classList.remove('tabs-panel--active'); + + if (el === triggers[t]) { + index = t; + } + } + + activate(index); + } + }); + } + + return { + init: function () { + activate(0); + bindEvents(); + } + }; +}()); diff --git a/scripts/ui.js b/scripts/ui.js new file mode 100644 index 0000000..325f618 --- /dev/null +++ b/scripts/ui.js @@ -0,0 +1,238 @@ + +S.UI = (function () { + var input = document.querySelector('.ui-input'), + ui = document.querySelector('.ui'), + help = document.querySelector('.help'), + commands = document.querySelector('.commands'), + overlay = document.querySelector('.overlay'), + canvas = document.querySelector('.canvas'), + interval, + isTouch = ('ontouchstart' in window || navigator.msMaxTouchPoints), + currentAction, + resizeTimer, + time, + maxShapeSize = 30, + firstAction = true, + sequence = [], + cmd = '#'; + + function formatTime(date) { + var h = date.getHours(), + m = date.getMinutes(); + + m = m < 10 ? '0' + m : m; + return h + ':' + m; + } + + function getValue(value) { + return value && value.split(' ')[1]; + } + + function getAction(value) { + value = value && value.split(' ')[0]; + return value && value[0] === cmd && value.substring(1); + } + + function timedAction(fn, delay, max, reverse) { + clearInterval(interval); + currentAction = reverse ? max : 1; + fn(currentAction); + + if (!max || (!reverse && currentAction < max) || (reverse && currentAction > 0)) { + interval = setInterval(function () { + currentAction = reverse ? currentAction - 1 : currentAction + 1; + fn(currentAction); + + if ((!reverse && max && currentAction === max) || (reverse && currentAction === 0)) { + clearInterval(interval); + } + }, delay); + } + } + + function reset(destroy) { + clearInterval(interval); + sequence = []; + time = null; + + if (destroy) { + S.Shape.switchShape(S.ShapeBuilder.letter('')); + } + } + + function performAction(value) { + var action, + current; + + overlay.classList.remove('overlay--visible'); + sequence = typeof(value) === 'object' ? value : sequence.concat(value.split('|')); + input.value = ''; + checkInputWidth(); + + timedAction(function (index) { + current = sequence.shift(); + action = getAction(current); + value = getValue(current); + + switch (action) { + case 'countdown': + value = parseInt(value, 10) || 10; + value = value > 0 ? value : 10; + + timedAction(function (index) { + if (index === 0) { + if (sequence.length === 0) { + S.Shape.switchShape(S.ShapeBuilder.letter('')); + } else { + performAction(sequence); + } + } else { + S.Shape.switchShape(S.ShapeBuilder.letter(index), true); + } + }, 1000, value, true); + break; + + case 'rectangle': + value = value && value.split('x'); + value = (value && value.length === 2) ? value : [maxShapeSize, maxShapeSize / 2]; + + S.Shape.switchShape(S.ShapeBuilder.rectangle(Math.min(maxShapeSize, parseInt(value[0], 10)), Math.min(maxShapeSize, parseInt(value[1], 10)))); + break; + + case 'circle': + value = parseInt(value, 10) || maxShapeSize; + value = Math.min(value, maxShapeSize); + S.Shape.switchShape(S.ShapeBuilder.circle(value)); + break; + + case 'time': + var t = formatTime(new Date()); + + if (sequence.length > 0) { + S.Shape.switchShape(S.ShapeBuilder.letter(t)); + } else { + timedAction(function () { + t = formatTime(new Date()); + if (t !== time) { + time = t; + S.Shape.switchShape(S.ShapeBuilder.letter(time)); + } + }, 1000); + } + break; + + case 'icon': + S.ShapeBuilder.imageFile('font-awesome/' + value + '.png', function (obj) { + S.Shape.switchShape(obj); + }); + break; + + default: + S.Shape.switchShape(S.ShapeBuilder.letter(current[0] === cmd ? 'What?' : current)); + } + }, 2000, sequence.length); + } + + function checkInputWidth(e) { + if (input.value.length > 18) { + ui.classList.add('ui--wide'); + } else { + ui.classList.remove('ui--wide'); + } + + if (firstAction && input.value.length > 0) { + ui.classList.add('ui--enter'); + } else { + ui.classList.remove('ui--enter'); + } + } + + function bindEvents() { + document.body.addEventListener('keydown', function (e) { + input.focus(); + + if (e.keyCode === 13) { + firstAction = false; + reset(); + performAction(input.value); + } + }); + + window.addEventListener('resize', function () { + clearTimeout(resizeTimer); + resizeTimer = setTimeout(function () { + S.Shape.shuffleIdle(); + reset(true); + }, 500); + }); + + input.addEventListener('input', checkInputWidth); + input.addEventListener('change', checkInputWidth); + input.addEventListener('focus', checkInputWidth); + + help.addEventListener('click', function (e) { + overlay.classList.toggle('overlay--visible'); + + if (overlay.classList.contains('overlay--visible')) { + reset(true); + } + }); + + commands.addEventListener('click', function (e) { + var el, + info, + demo, + tab, + active, + url; + + if (e.target.classList.contains('commands-item')) { + el = e.target; + } else { + el = e.target.parentNode.classList.contains('commands-item') ? e.target.parentNode : e.target.parentNode.parentNode; + } + + info = el && el.querySelector('.commands-item-info'); + demo = el && info.getAttribute('data-demo'); + url = el && info.getAttribute('data-url'); + + if (info) { + overlay.classList.remove('overlay--visible'); + + if (demo) { + input.value = demo; + + if (isTouch) { + reset(); + performAction(input.value); + } else { + input.focus(); + } + } else if (url) { + window.location = url; + } + } + }); + + canvas.addEventListener('click', function (e) { + overlay.classList.remove('overlay--visible'); + }); + } + + return { + init: function () { + bindEvents(); + input.focus(); + + if (isTouch) { + document.body.classList.add('touch'); + } + + S.UI.Tabs.init(); + }, + + simulate: function (action) { + performAction(action); + } + }; +}()); diff --git a/styles/normalize.css b/styles/normalize.css new file mode 100755 index 0000000..73abb76 --- /dev/null +++ b/styles/normalize.css @@ -0,0 +1,375 @@ +/*! normalize.css v2.0.1 | MIT License | git.io/normalize */ + +/* ========================================================================== + HTML5 display definitions + ========================================================================== */ + +/* + * Corrects `block` display not defined in IE 8/9. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +nav, +section, +summary { + display: block; +} + +/* + * Corrects `inline-block` display not defined in IE 8/9. + */ + +audio, +canvas, +video { + display: inline-block; +} + +/* + * Prevents modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/* + * Addresses styling for `hidden` attribute not present in IE 8/9. + */ + +[hidden] { + display: none; +} + +/* ========================================================================== + Base + ========================================================================== */ + +/* + * 1. Sets default font family to sans-serif. + * 2. Prevents iOS text size adjust after orientation change, without disabling + * user zoom. + */ + +html { + font-family: sans-serif; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + -ms-text-size-adjust: 100%; /* 2 */ +} + +/* + * Removes default margin. + */ + +body { + margin: 0; +} + +/* ========================================================================== + Links + ========================================================================== */ + +/* + * Addresses `outline` inconsistency between Chrome and other browsers. + */ + +a:focus { + outline: thin dotted; +} + +/* + * Improves readability when focused and also mouse hovered in all browsers. + */ + +a:active, +a:hover { + outline: 0; +} + +/* ========================================================================== + Typography + ========================================================================== */ + +/* + * Addresses `h1` font sizes within `section` and `article` in Firefox 4+, + * Safari 5, and Chrome. + */ + +h1 { + font-size: 2em; +} + +/* + * Addresses styling not present in IE 8/9, Safari 5, and Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/* + * Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome. + */ + +b, +strong { + font-weight: bold; +} + +/* + * Addresses styling not present in Safari 5 and Chrome. + */ + +dfn { + font-style: italic; +} + +/* + * Addresses styling not present in IE 8/9. + */ + +mark { + background: #ff0; + color: #000; +} + + +/* + * Corrects font family set oddly in Safari 5 and Chrome. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, serif; + font-size: 1em; +} + +/* + * Improves readability of pre-formatted text in all browsers. + */ + +pre { + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; +} + +/* + * Sets consistent quote types. + */ + +q { + quotes: "\201C" "\201D" "\2018" "\2019"; +} + +/* + * Addresses inconsistent and variable font size in all browsers. + */ + +small { + font-size: 80%; +} + +/* + * Prevents `sub` and `sup` affecting `line-height` in all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* ========================================================================== + Embedded content + ========================================================================== */ + +/* + * Removes border when inside `a` element in IE 8/9. + */ + +img { + border: 0; +} + +/* + * Corrects overflow displayed oddly in IE 9. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* ========================================================================== + Figures + ========================================================================== */ + +/* + * Addresses margin not present in IE 8/9 and Safari 5. + */ + +figure { + margin: 0; +} + +/* ========================================================================== + Forms + ========================================================================== */ + +/* + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/* + * 1. Corrects color not being inherited in IE 8/9. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ + +legend { + border: 0; /* 1 */ + padding: 0; /* 2 */ +} + +/* + * 1. Corrects font family not being inherited in all browsers. + * 2. Corrects font size not being inherited in all browsers. + * 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome + */ + +button, +input, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 2 */ + margin: 0; /* 3 */ +} + +/* + * Addresses Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +button, +input { + line-height: normal; +} + +/* + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Corrects inability to style clickable `input` types in iOS. + * 3. Improves usability and consistency of cursor style between image-type + * `input` and others. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ +} + +/* + * Re-set default cursor for disabled elements. + */ + +button[disabled], +input[disabled] { + cursor: default; +} + +/* + * 1. Addresses box sizing set to `content-box` in IE 8/9. + * 2. Removes excess padding in IE 8/9. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/* + * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome. + * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome + * (include `-moz` to future-proof). + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; +} + +/* + * Removes inner padding and search cancel button in Safari 5 and Chrome + * on OS X. + */ + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* + * Removes inner padding and border in Firefox 4+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/* + * 1. Removes default vertical scrollbar in IE 8/9. + * 2. Improves readability and alignment in all browsers. + */ + +textarea { + overflow: auto; /* 1 */ + vertical-align: top; /* 2 */ +} + +/* ========================================================================== + Tables + ========================================================================== */ + +/* + * Remove most spacing between table cells. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} \ No newline at end of file diff --git a/styles/style.css b/styles/style.css new file mode 100644 index 0000000..18878dc --- /dev/null +++ b/styles/style.css @@ -0,0 +1,363 @@ + +/* ========================================================================== + Basics + ========================================================================== */ + +body { + font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif; + background: #79a8ae; + color: #666; + font-size: 16px; + line-height: 1.5em; +} + +h1 { + color: #111; + margin: 0 0 12px 0; + font-size: 24px; + line-height: 1.5em; +} + +p { + margin: 0 0 10x 0; +} + +a { + color: #888; + text-decoration: none; + border-bottom: 1px solid #ccc; +} + +a:hover { + border-bottom-color: #888; +} + +body, +.overlay { + -webkit-perspective: 1000; + -webkit-perspective-origin-y: 25%; +} + +.body--ready { + /* Ideas + background: -webkit-linear-gradient(top, #e2b986 -10%, #241c35 140%); + background: -webkit-linear-gradient(top, #c97369 -40%, #241c35 130%); + background: -webkit-linear-gradient(top, #fac4c4 -10%, #606386 140%); + background: -webkit-linear-gradient(top, #519ab0 0%, #414A6D 110%); + background: -webkit-linear-gradient(top, rgb(129, 0, 170) 0%, rgb(43, 4, 114) 110%); + background: -webkit-linear-gradient(top, rgb(163, 235, 189) 0%, rgb(16, 93, 145) 110%); + background: -webkit-linear-gradient(top, rgb(165, 103, 189) 0%, rgb(75, 233, 214) 120%); + */ + + background: -webkit-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%); + background: -moz-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%); + background: -o-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%); + background: -ms-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%); + background: linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%); +} + +.body--ready .overlay { + -webkit-transition: -webkit-transform 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1), + opacity 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1); + -moz-transition: -moz-transform 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1), + opacity 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1); + -ms-transition: -ms-transform 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1), + opacity 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1); + -o-transition: -o-transform 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1), + opacity 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1); + transition: transform 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1), + opacity 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1); +} + +.body--ready .ui, +.body--ready .help { + display: block; +} + + +/* ========================================================================== + UI + ========================================================================== */ + +.ui { + display: none; + position: absolute; + left: 50%; + bottom: 5%; + width: 300px; + margin-left: -150px; +} + +.ui-input { + width: 100%; + height: 50px; + background: none; + font-size: 24px; + font-weight: bold; + color: #fff; + text-align: center; + border: none; + border-bottom: 2px solid white; +} + +.ui-input:focus { + outline: none; + border: none; + border-bottom: 2px solid white; +} + +.ui-return { + display: none; + position: absolute; + top: 20px; + right: 0; + padding: 3px 2px 0 2px; + font-size: 10px; + line-height: 10px; + color: #fff; + border: 1px solid #fff; +} + +.ui--enter .ui-return { + display: block; +} + +.ui--wide { + width: 76%; + margin-left: 12%; + left: 0; +} + +.ui--wide .ui-return { + right: -20px; +} + +.help { + display: none; + position: absolute; + top: 40px; + right: 40px; + width: 25px; + height: 25px; + text-align: center; + font-size: 13px; + line-height: 27px; + font-weight: bold; + cursor: pointer; + background: #fff; + color: #79a8ae; + opacity: .9; + + -webkit-transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1); + -moz-transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1); + -ms-transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1); + -o-transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1); + transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1); +} + +.help:hover { + opacity: 1; +} + +.overlay { + position: absolute; + top: 50%; + left: 50%; + width: 550px; + height: 490px; + margin: -260px 0 0 -275px; + opacity: 0; + + -webkit-transform: rotateY(90deg); + -moz-transform: rotateY(90deg); + -ms-transform: rotateY(90deg); + -o-transform: rotateY(90deg); + transform: rotateY(90deg); +} + +.overlay--visible { + opacity: 1; + + -webkit-transform: rotateY(0); + -moz-transform: rotateY(0); + -ms-transform: rotateY(0); + -o-transform: rotateY(0); + transform: rotateY(0); +} + +.ui-share, +.ui-details { + opacity: .9; + background: #fff; + z-index: 2; +} + +.ui-details-content, +.ui-share-content { + padding: 100px 50px; +} + +.commands { + margin: 0; + padding: 0; + list-style: none; + cursor: pointer; +} + +.commands-item { + font-size: 12px; + line-height: 22px; + font-weight: bold; + text-transform: uppercase; + letter-spacing: 1px; + padding: 20px; + background: #fff; + margin-top: 1px; + color: #333; + opacity: .9; + + -webkit-transition: -webkit-transform 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1), + opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1); + -moz-transition: -moz-transform 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1), + opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1); + -ms-transition: -ms-transform 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1), + opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1); + -o-transition: -o-transform 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1), + opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1); + transition: transform 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1), + opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1); +} + +.commands-item--gap { + margin-top: 9px; +} + +.commands-item:hover { + opacity: 1; +} + +.commands-item:hover .commands-item-action { + background: #333; +} + +.commands-item a { + display: inline-block; +} + +.commands-item-mode { + display: inline-block; + margin-left: 3px; + font-style: italic; + color: #ccc; +} + +.commands-item-title { + display: inline-block; + width: 150px; +} + +.commands-item-info { + display: inline-block; + width: 300px; + font-size: 14px; + text-transform: none; + letter-spacing: 0; + font-weight: normal; + color: #aaa; +} + +.commands-item-action { + display: inline-block; + float: right; + margin-top: 3px; + text-transform: uppercase; + font-size: 10px; + line-height: 10px; + color: #fff; + background: #90c9d1; + padding: 5px 10px 4px 10px; + border-radius: 3px; +} + +.commands-item:first-child { + margin-top: 0; +} + +.twitter-share { + position: absolute; + top: 4px; + right: 20px; +} + + +/* ========================================================================== + Tabs + ========================================================================== */ + +.tabs-labels { + margin-bottom: 9px; +} + +.tabs-label { + display: inline-block; + background: #fff; + padding: 10px 20px; + font-size: 12px; + line-height: 22px; + font-weight: bold; + text-transform: uppercase; + letter-spacing: 1px; + color: #333; + opacity: .5; + cursor: pointer; + margin-right: 2px; + + -webkit-transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1); + -moz-transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1); + -ms-transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1); + -o-transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1); + transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1); +} + +.tabs-label:hover { + opacity: .9; +} + +.tabs-label--active { + opacity: .9; +} + +.tabs-panel { + display: none; +} + +.tabs-panel--active { + display: block; +} + +.tab-panel { + position: absolute; + top: 0; + left: 0; + width: 100%; +} + + +/* ========================================================================== + Mobiles/tablets + ========================================================================== */ + +.touch .ui-input { + display: none; +} + +@media screen and (max-height: 600px) { + .ui-input { + color: #111; + border-color: #111; + } + + .ui-input:focus { + border-color: #111; + } +}