door_code 0.0.1 → 0.0.3

data/README.md

@@ -4,13 +4,13 @@
 
 Install with Bundler:
 
-    gem 'door_code', '0.0.1', :git => 'http://github.com/6twenty/door_code.git'
+    gem 'door_code', '0.0.2'
     
 In config.ru:
 
     use DoorCode::RestrictedAccess, :code => '12345'
     
-Or in application.rb (Rails3) or environment.rb (Rails2):
+In application.rb (Rails3) or environment.rb (Rails2):
 
     config.middleware.use DoorCode::RestrictedAccess, :code => '12345'
 
@@ -23,5 +23,3 @@ Or in application.rb (Rails3) or environment.rb (Rails2):
 
 * Example app (heroku, sinatra)
 * Allow specifying domains and paths to restrict access conditionally
-* Add no-js/no-base64 version
-* Add favicon?

data/door_code.gemspec

@@ -3,7 +3,7 @@ $:.push File.expand_path("../lib", __FILE__)
 
 Gem::Specification.new do |s|
   s.name        = "door_code"
-  s.version     = '0.0.1'
+  s.version     = '0.0.3'
   s.platform    = Gem::Platform::RUBY
   s.authors     = ["Mike Fulcher", "Alex Neill"]
   s.email       = ["mike@plan9design.co.uk", "alex.neill@gmail.com"]

data/lib/index.html

@@ -216,6 +216,38 @@
     }
 
     .red #display img.error { display: inline; }
+    
+    #helper {
+      height: 425px;
+    }
+    
+    #helper p, #helper ul, #helper ol, #helper li {
+      margin: 0; padding: 0;
+      color: white;
+      font-family: Helvetica, Arial, sans-serif;
+      text-indent: 0;
+      font-size: 12px; line-height: 12px;
+    }
+    
+    #helper ul, #helper ol {
+      padding: 0 0 0 20px;
+    }
+    
+    #helper li { margin-bottom: 5px;}
+    
+    #helper p {
+      font-size: 16px; line-height: 16px;
+      margin: 10px 0;
+      font-weight: bold;
+    }
+    
+    #helper p.how { margin-top: 0; }
+    
+    #helper p.close { text-align: center; }
+    
+    #helper p.close a {
+      color: white;
+    }
   </style>
   
   <script type="text/javascript" charset="utf-8">
@@ -227,6 +259,9 @@
     var form;
     var display;
     var displayLed;
+    
+    var helperContainer;
+    var keypadContainer;
 
     var validKeys = [ 48,49,50,51,52,53,54,55,56,57,
                       96,97,98,99,100,101,102,103,104,105 ];
@@ -279,15 +314,18 @@
       keypad = $('#keypad');
       display = $('#display');
       displayLed = display.find('.led');
+      
+      helperContainer = $('#helper');
+      keypadContainer = $('#display, #keys');
 
       // Map clicking on the keys to showing the number in the display
-      $('a').click(function(e){
+      $('#keys a').click(function(e){
         e.preventDefault();
         if ($('.clone').length < codeLength) {
           var num = $(this).attr('rel');
           if (num === 'clear' || num === 'help') {
             if (num === 'clear') { reset(); } else
-            if (num === 'help') { showHelp(); }
+            if (num === 'help') { toggleHelp(); }
           } else {
             displayNum(num);
             checkCode();
@@ -324,6 +362,11 @@
       });
 
       $(document).keyup(function(e){ $('#keys a').removeClass('active'); });
+      
+      $('.close a').click(function(e) {
+        e.preventDefault();
+        toggleHelp();        
+      });
 
     });  
 
@@ -382,8 +425,16 @@
       keypad.removeClass(failureClass).removeClass(successClass).addClass(defaultClass);
     }
 
-    function showHelp() {
-      // console.log('You called for help!');
+    function toggleHelp() {
+      if (helperContainer.is(':visible')) {
+        helperContainer.fadeOut(250, function(){
+          keypadContainer.fadeIn(250);
+        });
+      } else {
+        keypadContainer.fadeOut(250, function(){
+          helperContainer.fadeIn(250);
+        });
+      }
     }
   </script>
 </head>
@@ -399,6 +450,30 @@
   <div id="keypad" class="green" style="display:none;">
     <div id="backlight">
       <div id="frame">
+        <!-- #helper only shown when the HELP key is pressed -->
+        <div id="helper" style="display:none;">
+          <p class="how">
+            How to use this keypad:
+          </p>
+          <ol>
+            <li>Using the code provided to you, enter the digits using either your keyboard using the number keys, or your mouse by clicking the numbers on the keypad</li>
+            <li>When you have entered the correct number of digits, the keypad will confirm if you have entered the correct code</li>
+            <li>On entering the correct code, the keypad will flash blue with the message "SUCCESS" displayed on the keypad. You will then be redirected to the correct page of the website</li>
+            <li>On entering an incorrect code, the keypad will flash red with the message "ERROR" displayed on the keypad. The keypad will then reset, allowing you to re-enter the code</li>
+          </ol>
+          <p class="tips">
+            Tips:
+          </p>
+          <ul>
+            <li>The code will only be checked for validity once the correct number of digits have been entered</li>
+            <li>Use the backspace key on your keyboard to erase the last digit entered</li>
+            <li>Use the clear key on the keypad to clear the current code and reset the keypad</li>
+          </ul>
+          <p class="close">
+            <a href="#">Close</a>
+          </p>
+        </div>
+        
         <div id="display">
           <div class="backlight">
             <div class="led">

metadata

@@ -2,7 +2,7 @@
 name: door_code
 version: !ruby/object:Gem::Version 
   prerelease: 
-  version: 0.0.1
+  version: 0.0.3
 platform: ruby
 authors: 
 - Mike Fulcher
@@ -11,7 +11,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2011-02-18 00:00:00 +00:00
+date: 2011-02-20 00:00:00 +00:00
 default_executable: 
 dependencies: 
 - !ruby/object:Gem::Dependency