Add input & output fields, and copy text on change

Gemfile

@@ -1,9 +1,13 @@
 source "https://rubygems.org"
 
 gem "rails"
-gem "sass-rails"
-gem "coffee-rails"
-gem "haml"
-gem "jquery-rails"
-gem "therubyracer"
-gem "uglifier"
+
+group :assets do
+  gem "sass-rails"
+  gem "coffee-rails"
+  gem "haml"
+  gem "jquery-rails"
+  gem "therubyracer"
+  gem "twitter-bootstrap-rails"
+  gem "uglifier"
+end

Gemfile.lock

@@ -101,6 +101,10 @@ GEM
     treetop (1.4.12)
       polyglot
       polyglot (>= 0.3.1)
+    twitter-bootstrap-rails (2.2.6)
+      actionpack (>= 3.1)
+      execjs
+      railties (>= 3.1)
     tzinfo (0.3.37)
     uglifier (1.3.0)
       execjs (>= 0.3.0)
@@ -116,4 +120,5 @@ DEPENDENCIES
   rails
   sass-rails
   therubyracer
+  twitter-bootstrap-rails
   uglifier

app/assets/javascripts/application.js

@@ -12,4 +12,5 @@
 //
 //= require jquery
 //= require jquery_ujs
+//= require twitter/bootstrap
 //= require_tree .

app/assets/javascripts/bootstrap.coffee

@@ -0,0 +1,4 @@
+jQuery ->
+  $("a[rel=popover]").popover()
+  $(".tooltip").tooltip()
+  $("a[rel=tooltip]").tooltip()

app/assets/javascripts/encryptor.coffee

@@ -0,0 +1,10 @@
+updateEncryptedText = ->
+  plainText = $("#plain-text").val()
+  encryptedText = encrypt(plainText)
+  $("#encrypted-text").val encryptedText
+
+encrypt = (text) ->
+  text
+
+$(document).ready ->
+  $("#plain-text").keyup updateEncryptedText

app/assets/stylesheets/bootstrap_and_overrides.css

@@ -0,0 +1,7 @@
+/*
+  =require twitter-bootstrap-static/bootstrap
+
+  Use Font Awesome icons (default)
+  To use Glyphicons sprites instead of Font Awesome, replace with "require twitter-bootstrap-static/sprites"
+  =require twitter-bootstrap-static/fontawesome
+  */

app/views/application/home.html.haml

@@ -1 +1,5 @@
-%p Hello world
+%form
+  %label{for: "plain-text"} Plain text
+  %input#plain-text.input-xlarge{type: "text", placeholder: "Type some text"}
+  %label{for: "enrypted-text"} Encrypted text
+  %input#encrypted-text.input-xlarge{type: "text", disabled: true}

app/views/layouts/application.html.haml

@@ -1,9 +1,36 @@
 !!!
-%html
+%html{:lang => "en"}
   %head
-    %title Demo
-    = stylesheet_link_tag    "application", :media => "all"
-    = javascript_include_tag "application"
+    %meta{:charset => "utf-8"}/
+    %meta{:content => "IE=Edge,chrome=1", "http-equiv" => "X-UA-Compatible"}/
+    %meta{:content => "width=device-width, initial-scale=1.0", :name => "viewport"}/
+    %title= content_for?(:title) ? yield(:title) : "Demo"
     = csrf_meta_tags
+    / Le HTML5 shim, for IE6-8 support of HTML elements
+    /[if lt IE 9]
+      <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js" type="text/javascript"></script>
+    = stylesheet_link_tag "application", :media => "all"
+    / For third-generation iPad with high-resolution Retina display:
+    / Size should be 144 x 144 pixels
+    = favicon_link_tag 'images/apple-touch-icon-144x144-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '144x144'
+    / For iPhone with high-resolution Retina display:
+    / Size should be 114 x 114 pixels
+    = favicon_link_tag 'images/apple-touch-icon-114x114-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '114x114'
+    / For first- and second-generation iPad:
+    / Size should be 72 x 72 pixels
+    = favicon_link_tag 'images/apple-touch-icon-72x72-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '72x72'
+    / For non-Retina iPhone, iPod Touch, and Android 2.1+ devices:
+    / Size should be 57 x 57 pixels
+    = favicon_link_tag 'images/apple-touch-icon-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png'
+    / For all other devices
+    / Size should be 32 x 32 pixels
+    = javascript_include_tag "application"
   %body
-    = yield
+    .navbar.navbar-fluid-top
+      .navbar-inner
+        .container-fluid
+          %a.brand{:href => "#"} Super-secret text encryptor
+    .container-fluid
+      .row-fluid
+        .span12
+          = yield

config/locales/en.bootstrap.yml

@@ -0,0 +1,17 @@
+# Sample localization file for English. Add more files in this directory for other locales.
+# See https://github.com/svenfuchs/rails-i18n/tree/master/rails%2Flocale for starting points.
+
+en:
+  helpers:
+    actions: "Actions"
+    links:
+      back: "Back"
+      cancel: "Cancel"
+      confirm: "Are you sure?"
+      destroy: "Delete"
+      new: "New"
+    titles:
+      edit: "Edit"
+      save: "Save"
+      new: "New"
+      delete: "Delete"