SimplyDo · NSAuser · Jun 12, 2012 · Jun 13, 2012 · Jun 13, 2012 · Jun 13, 2012
diff --git a/README b/README
@@ -0,0 +1,23 @@
+Cryptography Project
+
+Encrypt and decrypt any text right in your browser. You can also generate random key phrases from the list of 39,000 English words. Nothing is ever sent to a server!
+
+url: http://simplydo.com/cryptography
+sources: https://github.com/SimplyDo/cryptography
+
+Created by Simply Do: http://simplydo.com
+
+
+
+Uses various libraries / framework under their respective licenses: 
+
+AngularJS by Google - http://angularjs.org/
+CryptoJS - http://code.google.com/p/crypto-js/
+Twitter Bootstrapped - http://twitter.github.com/bootstrap/
+Kevin's Word List Page - http://wordlist.sourceforge.net/
+
+
+
+Instructions: 
+
+Simply point a web server to the root directory of this repository and view in any modern browser. 
diff --git a/css/default.css b/css/default.css
diff --git a/index.html b/index.html
@@ -2,36 +2,71 @@
 <html lang="en" ng-app="myApp">
 <head>
   <meta charset="utf-8">
-  <title>My AngularJS App</title>
+  <title>Simply Do - Cryptography Project</title>
   <link rel="stylesheet" href="css/default.css"/>
+
 </head>
 <body>
 
   <div class="navbar navbar-fixed-top" ng-controller="navigationCtrl">
     <div class="navbar-inner">
       <div class="container">
         <ul class="nav" >
-          <li ng-class="{active: location.path() == '/home'}">
-            <a href="#/home">Home</a>
-          </li>
+
           <li ng-class="{active: location.path() == '/aes'}">
             <a href="#/aes">Encrypt and Decrypt</a>
           </li>
           <li ng-class="{active: location.path() == '/phrases'}">
             <a href="#/phrases">Key Maker</a>
           </li>
-          <li ng-class="{active: location.path() == '/memorize'}">
-            <a href="#/memorize">Memorize</a>
-          </li>
           <li ng-class="{active: location.path() == '/about'}">
             <a href="#/about">About</a>
           </li>
+          <!--
+            <li ng-class="{active: location.path() == '/memorize'}">
+              <a href="#/memorize">Memorize</a>
+            </li>
+            <li ng-class="{active: location.path() == '/about'}">
+              <a href="#/about">About</a>
+            </li>
+          -->
+        </ul>
+        <ul class="nav pull-right">
+          <li><a href="http://simplydo.com" target="new"><i class="icon-arrow-right icon-white"></i> A Simply Do project</a></li>
         </ul>
       </div>
     </div>
   </div>
 
-  <div ng-view class="container"></div>
+  <div ng-view></div>
+
+  <div id="footer">
+      <div class="container">
+        <div class="row">
+          <div class="span4">
+            <p>© 2012 <a href="http://simplydo.com" target="new">Simply Do</a>, LLC.<br />All Rights Reserved.</p>
+          </div>
+          <div class="span4">
+            <ul class="unstyled">
+              <li>Follow <a href="http://twitter.com/#!/SimplyDoThat" target="new">@SimplyDoThat</a> on Twitter</li>
+            </ul>
+          </div>
+          <div class="span4">
+            <ul class="unstyled">
+              <li>The source code is open and <a href="https://github.com/SimplyDo/cryptography" target="new">available on Github</a></li>
+              <li>Created with <a href="http://angularjs.org/" target="new">AngularJS</a> by Google</li>
+              <li>Encryption through <a href="http://code.google.com/p/crypto-js/" target="new">CryptoJS</a></li>
+              <li>Social buttons by <a href="http://socialitejs.com/" target="new">Socialite.js</a></li>
+              <li>Words lists based on <a href="http://wordlist.sourceforge.net/" target="new">Kevin's Word List Page</a></li>
+              <li>The UI is <a href="http://twitter.github.com/bootstrap/" target="new">Twitter Bootstrapped</a></li>
+              <li>Hosted with <a href="http://pages.github.com/" target="new">Github pages</a></li>
+
+            </ul>
+          </div>
+        </div>
+
+      </div>  
+    </div>  
 
   <script src="lib/angular/angular.js"></script>
   <script src="js/app.js"></script>
@@ -40,5 +75,21 @@
   <script src="js/filters.js"></script>
   <script src="js/directives.js"></script>
   <script src="lib/CryptoJS/rollups/aes.js"></script>
+
+  <script type="text/javascript">
+
+  var _gaq = _gaq || [];
+  _gaq.push(['_setAccount', 'UA-29523960-1']);
+  _gaq.push(['_trackPageview']);
+
+  (function() {
+    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+  })();
+
+</script>
+
+
 </body>
 </html>
diff --git a/js/app.js b/js/app.js
@@ -5,9 +5,9 @@
 angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives']).
   config(['$routeProvider', function($routeProvider) {
     $routeProvider.when('/aes', {template: 'partials/aes.html', controller: aesCtrl});
-    $routeProvider.when('/home', {template: 'partials/home.html', controller: homeCtrl});
-    $routeProvider.when('/memorize', {template: 'partials/memorize.html', controller: memorizeCtrl});
+    $routeProvider.when('/about', {template: 'partials/about.html', controller: homeCtrl});
+    //$routeProvider.when('/memorize', {template: 'partials/memorize.html', controller: memorizeCtrl});
     $routeProvider.when('/phrases', {template: 'partials/phrases.html', controller: phrasesCtrl});
-    $routeProvider.when('/about', {template: 'partials/about.html', controller: aboutCtrl});
-    $routeProvider.otherwise({redirectTo: '/home'});
+    //$routeProvider.when('/about', {template: 'partials/about.html', controller: aboutCtrl});
+    $routeProvider.otherwise({redirectTo: '/aes'});
   }]);
diff --git a/js/controllers-ck.js b/js/controllers-ck.js
diff --git a/js/controllers.js b/js/controllers.js
@@ -5,7 +5,7 @@
 
 function aesCtrl($scope,WordService) {
 
-  var passPhraseWordCount = 18;
+  var passPhraseWordCount = 5;
 
   $scope.message = '';
   $scope.cypher = '';
@@ -32,7 +32,7 @@ function aesCtrl($scope,WordService) {
 
     } else {
 
-      $scope.feedBack = 'You need to enter or generate a pass phrase to encrypt this text.';
+      $scope.feedBack = 'You need to enter or generate a key phrase to encrypt text.';
 
       $scope.status = 'error';
 
@@ -46,7 +46,7 @@ function aesCtrl($scope,WordService) {
 
     if ($scope.cypher == '' | $scope.passphrase == '' ) {
 
-      $scope.feedBack = 'You need to enter your pass phrase to decrypt this cypher.';
+      $scope.feedBack = 'You need to enter your key phrase to decrypt this cypher.';
 
       $scope.status = 'error';
 
@@ -56,7 +56,7 @@ function aesCtrl($scope,WordService) {
 
       if ($scope.message == '') {
 
-        $scope.feedBack = 'Cypher and pass phrase do not match';
+        $scope.feedBack = 'Cypher and key phrase do not match';
 
         $scope.status = 'error';
 
@@ -117,6 +117,8 @@ function memorizeCtrl() {
 
 function homeCtrl(WordService) {
 
+  Socialite.load('social-buttons');
+
 }
 
 function phrasesCtrl($scope,WordService) {
@@ -129,6 +131,7 @@ function phrasesCtrl($scope,WordService) {
     $scope.words = WordService.getWords($scope.wordCount);
     $scope.permutations = WordService.calculatePermutations($scope.wordCount);
     $scope.lastWordCount = $scope.wordCount;
+    $scope.wordListLength = WordService.wordListLength();
 
   }
 

diff --git a/less/default.less b/less/default.less
@@ -1,25 +1,20 @@
 @import "../lib/bootstrap/less/bootstrap";
+@import "../lib/socialite/socialite.less";
+@import "mixins";
 //@import "mixins";
 @iconSpritePath: "../lib/bootstrap/img/glyphicons-halflings.png";
 @iconWhiteSpritePath: "../lib/bootstrap/img/glyphicons-halflings-white.png";
 
 
 
-body {
-  margin-top:60px;
-}
-
-
 form {
   &.plain {
-    background-color:green;
   }
   &.cypher {
-    background-color:yellow;
   }
   textarea {
     font-size:1.1em;
-    width:95%;
+    width:100%;
     height:8em;
   }
 }
@@ -35,7 +30,7 @@ form {
 }
 
 h2 {
-  font-size:1.7em;
+  font-size:1.3em;
   margin:0.3em 0;
 }
 
@@ -44,12 +39,17 @@ h2 {
 p {
   font-size:1.1em;
   line-height:1.5em;
-  &.large {
-    font-size:1.5em;
+  &.note {
     color:#999;
   }
 }
 
+.large {
+  p {
+    font-size:1.2em;
+  }
+}
+
 
 p.status {
   font-weight:bold;
@@ -62,4 +62,53 @@ p.status {
   &.error {
     color:red;
   }
+}
+
+
+#footer {
+  background-color:#333;
+  padding:2em 0;
+  margin-top:50px;
+  border-top:5px solid rgba(0,0,0,0.3);
+  color:#AAA;
+}
+
+#top {
+  background-color:#8FBE00;
+  margin-bottom:40px;
+  padding-top:80px;
+  padding-bottom:30px;
+  border-bottom:1px solid #666;
+  .box-shadow(0px, 3px, 0px, rgba(0,0,0,0.2);
+  &.home {
+    background-color:#8ABBCE;
+  }
+  &.keymaker {
+    background-color:#FA6900;
+  }
+  h1 {
+    font-size:4em;
+    margin-bottom:20px;
+    margin-top:30px;
+    color:#FFF;
+    .text-shadow(0px, -1px, 0px, rgba(0,0,0,0.5));
+  }
+  p {
+    font-size:1.5em;
+    color:#F9F2E7;
+    .text-shadow(0px, -1px, 0px, rgba(0,0,0,0.5));
+    a {
+      color:#F9F2E7;
+      border-bottom:1px solid #FFF;
+      text-decoration:none;
+      font-weight:bold;
+      &:hover {
+        background-color:rgba(0,0,0,0.1);
+        padding-left:4px;
+        padding-right:4px;
+        margin:0 -4px;
+        color:#FFF;
+      }
+    }
+  }
 }
diff --git a/less/mixins.less b/less/mixins.less
@@ -0,0 +1,67 @@
+// mixins
+
+
+.backgroundSize(@horizontal, @vertical) {
+	// used by the backgorund tiles in .tile
+	-moz-background-size: @horizontal @vertical;  
+	-o-background-size: @horizontal @vertical;  
+	-webkit-background-size: @horizontal @vertical;   
+	background-size: @horizontal @vertical; 
+}
+
+
+.transition(@property) {
+	transition-property: @property;
+	transition-timing-function: linear;
+	-moz-transition-property: @property;
+	-moz-transition-timing-function: linear;
+	-webkit-transition-property: @property;
+	-webkit-transition-timing-function: linear;
+	-o-transition-property: @property;
+	-o-transition-timing-function: linear;
+}
+
+
+.rounded-corners (@radius: 5px) {
+  border-radius: @radius;
+  -webkit-border-radius: @radius;
+  -moz-border-radius: @radius;
+}
+
+.box-shadow(@vOffset, @hOffset, @blur, @color) {
+	-moz-box-shadow: @vOffset @hOffset @blur @color;
+	-webkit-box-shadow: @vOffset @hOffset @blur @color;
+	box-shadow: @vOffset @hOffset @blur @color;
+}
+
+.text-shadow(@vOffset, @hOffset, @blur, @color) {
+	-moz-text-shadow: @vOffset @hOffset @blur @color;
+	-webkit-text-shadow: @vOffset @hOffset @blur @color;
+	text-shadow: @vOffset @hOffset @blur @color;
+}
+
+.rotate(@angle) {
+	transform:rotate(@angle);
+	-ms-transform:rotate(@angle); /* IE 9 */
+	-moz-transform:rotate(@angle); /* Firefox */
+	-webkit-transform:rotate(@angle); /* Safari and Chrome */
+	-o-transform:rotate(@angle); /* Opera */
+}
+
+.gradient(@colourTop: rgb(255,255,255),@colourBottom: rgb(0,0,0)) {
+	background-image: linear-gradient(bottom, @colourBottom 0%, @colourTop 100%);
+	background-image: -o-linear-gradient(bottom, @colourBottom 0%, @colourTop 100%);
+	background-image: -moz-linear-gradient(bottom, @colourBottom 0%, @colourTop 100%);
+	background-image: -webkit-linear-gradient(bottom, @colourBottom 0%, @colourTop 100%);
+	background-image: -ms-linear-gradient(bottom, @colourBottom 0%, @colourTop 100%);
+}
+
+.noSelection() {
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
diff --git a/lib/socialite/images/social-sprite.png b/lib/socialite/images/social-sprite.png
diff --git a/lib/socialite/socialite.less b/lib/socialite/socialite.less
@@ -0,0 +1,20 @@
+/*
+ * Socialite Look-a-like defaults
+ */
+
+.social-buttons { display: block; list-style: none; padding: 0; margin: 0px; float:right; }
+.social-buttons > li { display: inline-block; margin-left:10px; float: left; }
+
+
+/*
+* Removed since these are optimized for white backgrounds
+
+.social-buttons .socialite { display: block; position: relative; background: url('../lib/socialite/images/social-sprite.png') 0 0 no-repeat; }
+.social-buttons .socialite-loaded { background: none !important; }
+
+
+.social-buttons .twitter-share { width: 55px; height: 65px; background-position: 0 0; }
+.social-buttons .googleplus-one { width: 50px; height: 65px; background-position: -75px 0; }
+.social-buttons .facebook-like { width: 50px; height: 65px; background-position: -145px 0; }
+.social-buttons .linkedin-share { width: 60px; height: 65px; background-position: -215px 0; }
+*/