title: jquery-based standalone port knocker
body: <p>I am working on a small project and need to provide an alternative method for my team members to port knock on a non-production server and open port 22 for SSH traffic (access closes again after 10 minutes). As some methods of knocking don't work for different users on different devices, we needed to create a 'knock client of last resort' that can be opened as a stand-alone web page and initiate the knock sequence.  Of course this file would NEVER be put on a web server for security reasons.</p>
  
  <p>I'm new to jQuery, javascript, and CSS, but was able to get this to work. However, it doesn't work in all browsers, and sometimes we have to reboot if it is no longer working on a particular machine.</p>
  
  <p>After a lot of searching, I’m really not sure how to improve my code while keeping all the functionality contained within a single html file. I would really appreciate some input. </p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Gain Access- Beta version 1.0&lt;/title&gt;
  &lt;style&gt;
  * {
      font-family: Verdana, Arial, Sans-Serif;
  }
  #top{
      margin-left:80px;
  }
  #heading {
      margin-left: 0px;
      font-size:22px;
      font-weight:bold;
  }
  #subhead {
      margin-left: 10px;
      font-size:12px;
  }
  button {
      font-size:16px;
      margin-left:100px;
  }
  #button {
      font-size: 12px;
      font-family: Verdana, Arial, Sans-Serif;
      position: absolute;
      margin-left: 100px;
      margin-top: 50px;
  }
  #status {
      margin-left:90px;
      margin-top: 80px;
      position: absolute;
      font-size:16px;
      font-weight:bold;
  }
  #knocks {
      margin-left:110px;
      margin-top: 100px;
      position: absolute;
      font-size:14px;
      color:blue;
  
  }
  #portals {
      position: absolute;
      margin-left: 110px;
      margin-top: 155px;
      display:none;
  }
  .tinyimg {
      width: 1px;
      height: 1px;
  }
  
  &lt;/style&gt;
  &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  
  
  $(document).ready(function(){
  $('button').click(function(){
      $('#knocks').append('&lt;p&gt;Knocking...&lt;/p&gt;');
      setTimeout(function(){
          $('#portals').append('&lt;img class="tinyimg" src="https://some.url.com:1111/test/url.jpg/" /&gt;');
          $('#knocks').append("&lt;p&gt;Knock 1 of 5 complete...&lt;/p&gt;");
          }, 500);    
      setTimeout(function(){
          $('#portals').append('&lt;img class="tinyimg" src="https://some.url.com:2222/test/url.jpg/" /&gt;');
          $('#knocks').append("&lt;p&gt;Knock 2 of 5 complete...&lt;/p&gt;");
          }, 3500);
      setTimeout(function(){
          $('#portals').append('&lt;img class="tinyimg" src="https://some.url.com:3333/test/url.jpg" /&gt;');
          $('#knocks').append("&lt;p&gt;Knock 3 of 5 complete...&lt;/p&gt;");
          }, 6500);
      setTimeout(function(){
          $('#portals').append('&lt;img class="tinyimg" src="https://some.url.com:4444/test/url.jpg" /&gt;');
          $('#knocks').append("&lt;p&gt;Knock 4 of 5 complete...&lt;/p&gt;");
          }, 9500)
      setTimeout(function(){
          $('#portals').append('&lt;img class="tinyimg" src="https://some.url.com:5555/test/url.jpg/" /&gt;');
          $('#knocks').append("&lt;p&gt;Knock 5 of 5 complete...&lt;/p&gt;");
          }, 12000);
      setTimeout(function(){
          $('#knocks').append("&lt;p&gt;Knocking is complete... &lt;br&gt;Proceed to site: &lt;a href='http://secureurl.someurl.com'&gt;http://secureurl.someurl.com/a&gt;&lt;/p&gt;");
          }, 13000);
  });
  });
  
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="top"&gt;
  &lt;p&gt;&lt;span id="heading"&gt;Gain Access&lt;/span&gt;&lt;br&gt;&lt;span id="subhead"&gt;Beta version 1.0&lt;/span&gt;&lt;/p&gt;
  &lt;/div&gt;
  &lt;button type="button"&gt;Click to Knock&lt;/button&gt;
  &lt;div id="portals"&gt;&lt;/div&gt; &lt;!--The image references created by the port knocks land in this div.--&gt;
  &lt;p id="status"&gt;Status:&lt;/p&gt;
  &lt;div id="knocks"&gt;&lt;p&gt;Click button to knock&lt;/p&gt;&lt;/div&gt; &lt;!--The status updates generated concurrently with each port knock are displayed here.--&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>