nicksterx/gist:5567095

## gistfile1.txt

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>InfiniMail</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
      .sidebar-nav {
        padding: 9px 0;
      }

      @media (max-width: 980px) {
        /* Enable use of floated navbar text */
        .navbar-text.pull-right {
          float: none;
          padding-left: 5px;
          padding-right: 5px;
        }
      }
      .message{font-size:24px;}
      .warning{font-weight:bold;}
    </style>
    <link href="css/bootstrap-responsive.css" rel="stylesheet">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="/js/html5shiv.js"></script>
    <![endif]-->

    <!-- Fav and touch icons -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/ico/apple-touch-icon-114-precomposed.png">
      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/ico/apple-touch-icon-72-precomposed.png">
                    <link rel="apple-touch-icon-precomposed" href="/ico/apple-touch-icon-57-precomposed.png">
                                   <link rel="shortcut icon" href="/ico/favicon.png">
  </head>

  <body>

    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container-fluid">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="#">Infinimail</a>
          <div class="nav-collapse collapse">
            <p class="navbar-text pull-right">
              Logged in as <a href="#" class="navbar-link">Nic@infinimail.io</a>
            </p>
            <ul class="nav">
              <li class="active"><a href="#">Web Search</a></li>
              <li><a href="#about">Calendar</a></li>
              <li><a href="#contact">Notes</a></li>
              <li><a href="#contact">Images</a></li>
              <li><a href="#contact">News</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container-fluid">
      <div class="row-fluid">
        <div class="span3">
          <div class="well sidebar-nav">
            <img src="emailLogo.png">
            <br />
            <button style="margin:5px 0 ;" class="btn btn-danger btn-block">Compose</button>
            <ul class="nav nav-list">
              <li class="nav-header">Quick Contacts</li>
              <li><a href="#">Jonah</a></li>
              <li><a href="#">Haley</a></li>
              <li><a href="#">Will</a></li>
              <li><a href="#">Mom</a></li>
              <li><a href="#">Joe</a></li>
              <li><a href="#">Michael</a></li>
              <li><a href="#">Tara</a></li>
              <li><a href="#">Andrew</a></li>
            </ul>
          </div><!--/.well -->
        <div class="progress progress-striped">
          Currently used storage 20%
            <div class="bar" style="width: 20%;"></div>
        </div>
        </div><!--/span-->
        <div class="span9">
          <div class="navbar">
          <div class="navbar-inner">
          <ul class="nav">
            <li class="active"><a href="#">Inbox</a><li>
            <li><a href="#">Compose</a></li>
            <li><a href="#">Contacts</a></li>
            <li><a href="#">Folders</a></li>
            <li><a href="#">Spam</a></li>
            <li><a href="#">Options</a></li>
            <li><a href="#">Help</a></li>
          </ul>
        </div>
      </div>
        </div>
        <div id="inbox" class="span9">
          <div style="display:none;" id="received" class="span12 well">
            <h4>(no subject)</h4>
            From: .::Nomad::.
            To: Nic<br />
            <strong>Just Now</strong>
            <hr>
            <div id="message">
              <img src="hello.png">
            </div>
            <hr>
            <div style="background: white;border: 1px solid whitesmoke;border-radius: 5px;margin: -10px 0 15px 0;padding: 5px;height: 60px;" id="message-box" class="span12"></div>
            <!--textarea id="message-box" class="span12" rows="3"></textarea-->
            <button class="btn btn-primary sendBtn" type="button">Send</button>
            <button class="btn" type="button">Discard</button>
          </div>
        <table id="messages" class="table table-striped">
          <tr class="warning">
            <td><input type="checkbox"></td>
            <td>.::NOMAD::.</td>
            <td><a href="#" onclick='javascript:scene1()'>(no subject)</td>
            <td><strong>Just now</strong></td>
          </tr>
          <tr>
            <td><input type="checkbox"></td>
            <td>Haley</td>
            <td>Roadtrip details <i class="icon-heart"></i> </td>
            <td><strong>Yesterday</strong></td>
          </tr>
          <tr>
            <td><input type="checkbox"></td>
            <td>Mom</td>
            <td>FW: FW: FW: 20 Things you won't .....</td>
            <td><strong>Yesterday</strong></td>
          </tr>
          <tr>
            <td><input type="checkbox"></td>
            <td>MIT Student Rela..</td>
            <td>Free pizza!</td>
            <td><strong>Yesterday</strong></td>
          </tr>
          <tr>
            <td><input type="checkbox"></td>
            <td>.::NOMAD::.</td>
            <td>(no subject)</td>
            <td><strong>Just now</strong></td>
          </tr>
          <tr>
            <td><input type="checkbox"></td>
            <td>Haley</td>
            <td>Roadtrip details <i class="icon-heart"></i> </td>
            <td><strong>Yesterday</strong></td>
          </tr>
          <tr>
            <td><input type="checkbox"></td>
            <td>Mom</td>
            <td>FW: FW: FW: 20 Things you won't .....</td>
            <td><strong>Yesterday</strong></td>
          </tr>
          <tr>
            <td><input type="checkbox"></td>
            <td>MIT Student Rela..</td>
            <td>Free pizza!</td>
            <td><strong>Yesterday</strong></td>
          </tr>
        </table>
        <ul class="pager">
          <li class="previous">
            <a id="checker" href="#">&larr; Older</a>
          </li>
          <li class="next disabled">
            <a href="#">Newer &rarr;</a>
          </li>
        </ul>
        </div><!--/span-->
      </div><!--/row-->

      <hr>

      <footer>
        <p>&copy; Company 2013</p>
      </footer>

    </div><!--/.fluid-container-->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary reply" >Reply</button>
  </div>
</div>
    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap-transition.js"></script>
    <script src="js/bootstrap-alert.js"></script>
    <script src="js/bootstrap-modal.js"></script>
    <script src="js/bootstrap-dropdown.js"></script>
    <script src="js/bootstrap-scrollspy.js"></script>
    <script src="js/bootstrap-tab.js"></script>
    <script src="js/bootstrap-tooltip.js"></script>
    <script src="js/bootstrap-popover.js"></script>
    <script src="js/bootstrap-button.js"></script>
    <script type="text/javascript">
//EMAIL SCENES
      function loadProgress(){
          var progress = setInterval(function() {
            var $bar = $('.bar');

            if ($bar.width()==400) {
              clearInterval(progress);
              $('.progress').removeClass('active');
            } else {
              $bar.width($bar.width()+40);
            }
              $bar.text($bar.width()/4 + "%");
          }, 1200);
        }
        var timeout;
      function resetInbox(captcha){
        jQuery("#received").hide();
        jQuery("#messages").show();
        modalAlert(captcha);
        jQuery("#message").html('<img src="'+captcha+'">');
        jQuery("#message-box").text('');
        jQuery('#messages tr:first').removeClass("warning");
      }

      function modalAlert(message){
            jQuery("#myModalLabel").text("(no subject) from ..::Nomad::..")
            jQuery('.modal-body').html("<img src='"+message+"'>");
            timeout=window.setTimeout(function(){showModal();},2000);

      }
      function showModal(){
      jQuery('#messages tr:first').before('<tr class="warning"><td><input type="checkbox"></td><td>.::NOMAD::.</td><td><a href="#">(no subject)</a></td><td><strong>Just now</strong></td></tr>');
        jQuery("#myModal").modal('show')
        clearTimeout(timeout);
      }
      var sceneExpr = "scene1";
    function scene1(){
       var pos=0;
       jQuery("#messages").hide();
       jQuery("#received").show();
           jQuery(document).keypress(function(){
             var a2 = "scene1";
              var sp = a2.split('');
               if(pos <a2.length){
                 jQuery("#message-box").text(jQuery("#message-box").text()+sp[pos]);
              }

             pos++;
           });
    }

    function scene2(){

console.log("Hey!")
        var pos=0;
        jQuery("#messages").hide();
        jQuery("#received").show();
        jQuery(document).keyup(function(){
          var a3 = "scene2";

          var sp3 = a3.split('');
          if(pos <a3.length){
            jQuery("#message-box").text(jQuery("#message-box").text()+sp3[pos]);
          }
          if(pos == a3.length){
            done=true;
          }
          pos++;
        });
console.log("ho!")
    }
    function scene3(){
        var pos=0;
        jQuery("#messages").hide();
        jQuery("#received").show();
        jQuery(document).keypress(function(){
          var a4 = "Scene 3";

          var sp = a4.split('');
          if(pos <a4.length){
            jQuery("#message-box").val(jQuery("#message-box").val()+sp[pos]);
          }
          pos++;
        });
    }
    function scene4(){
        var pos=0;
        jQuery(document).keypress(function(){
          var a5 = "Scene 4";

          var sp = a5.split('');
          if(pos <a5.length){
            jQuery("#message-box").val(jQuery("#message-box").val()+sp[pos]);
          }
          pos++;
        });
    }
    function scene5(){
        var pos=0;
        jQuery(document).keypress(function(){
          var a6 = "Should print this text";

          var sp = a6.split('');
          if(pos <a6.length){
            jQuery("#message-box").val(jQuery("#message-box").val()+sp[pos]);
          }
          pos++;
        });
    }
var done = false;
      jQuery(document).ready(function(){
        $('#myModal .reply').click(function() {
          $('#myModal').modal('hide');
          if(sceneExpr=="scene1"){
            sceneExpr = "scene2";
            scene2();
          }
          if(sceneExpr=="scene2"){
            //resetInbox("3.png");
            sceneExpr = "scene3";
            clearTimeout(timeout);
            scene3();
          }
          if(sceneExpr=="scene3"){
            resetInbox("5.png");
            sceneExpr="scene4";
            clearTimeout(timeout);
            scene4();
          }
          if(sceneExpr=="scene4"){
            resetInbox("8.png");
            clearTimeout(timeout);
            scene5();
          }
          clearTimeout(timeout);
        });

        $('.sendBtn').click(function() {
          resetInbox("3.png");
        });


      });
</script>

  </body>
</html>

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>InfiniMail</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="">
	<meta name="author" content="">

	<!-- Le styles -->
	<link href="css/bootstrap.css" rel="stylesheet">
	<style type="text/css">
	body {
	padding-top: 60px;
	padding-bottom: 40px;
	}
	.sidebar-nav {
	padding: 9px 0;
	}

	@media (max-width: 980px) {
	/* Enable use of floated navbar text */
	.navbar-text.pull-right {
	float: none;
	padding-left: 5px;
	padding-right: 5px;
	}
	}
	.message{font-size:24px;}
	.warning{font-weight:bold;}
	</style>
	<link href="css/bootstrap-responsive.css" rel="stylesheet">

	<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
	<!--[if lt IE 9]>
	<script src="/js/html5shiv.js"></script>
	<![endif]-->

	<!-- Fav and touch icons -->
	<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/ico/apple-touch-icon-144-precomposed.png">
	<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/ico/apple-touch-icon-114-precomposed.png">
	<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/ico/apple-touch-icon-72-precomposed.png">
	<link rel="apple-touch-icon-precomposed" href="/ico/apple-touch-icon-57-precomposed.png">
	<link rel="shortcut icon" href="/ico/favicon.png">
	</head>

	<body>

	<div class="navbar navbar-inverse navbar-fixed-top">
	<div class="navbar-inner">
	<div class="container-fluid">
	<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	</button>
	<a class="brand" href="#">Infinimail</a>
	<div class="nav-collapse collapse">
	<p class="navbar-text pull-right">
	Logged in as <a href="#" class="navbar-link">Nic@infinimail.io</a>
	</p>
	<ul class="nav">
	<li class="active"><a href="#">Web Search</a></li>
	<li><a href="#about">Calendar</a></li>
	<li><a href="#contact">Notes</a></li>
	<li><a href="#contact">Images</a></li>
	<li><a href="#contact">News</a></li>
	</ul>
	</div><!--/.nav-collapse -->
	</div>
	</div>
	</div>

	<div class="container-fluid">
	<div class="row-fluid">
	<div class="span3">
	<div class="well sidebar-nav">
	<img src="emailLogo.png">
	<br />
	<button style="margin:5px 0 ;" class="btn btn-danger btn-block">Compose</button>
	<ul class="nav nav-list">
	<li class="nav-header">Quick Contacts</li>
	<li><a href="#">Jonah</a></li>
	<li><a href="#">Haley</a></li>
	<li><a href="#">Will</a></li>
	<li><a href="#">Mom</a></li>
	<li><a href="#">Joe</a></li>
	<li><a href="#">Michael</a></li>
	<li><a href="#">Tara</a></li>
	<li><a href="#">Andrew</a></li>
	</ul>
	</div><!--/.well -->
	<div class="progress progress-striped">
	Currently used storage 20%
	<div class="bar" style="width: 20%;"></div>
	</div>
	</div><!--/span-->
	<div class="span9">
	<div class="navbar">
	<div class="navbar-inner">
	<ul class="nav">
	<li class="active"><a href="#">Inbox</a><li>
	<li><a href="#">Compose</a></li>
	<li><a href="#">Contacts</a></li>
	<li><a href="#">Folders</a></li>
	<li><a href="#">Spam</a></li>
	<li><a href="#">Options</a></li>
	<li><a href="#">Help</a></li>
	</ul>
	</div>
	</div>
	</div>
	<div id="inbox" class="span9">
	<div style="display:none;" id="received" class="span12 well">
	<h4>(no subject)</h4>
	From: .::Nomad::.
	To: Nic<br />
	<strong>Just Now</strong>
	<hr>
	<div id="message">
	<img src="hello.png">
	</div>
	<hr>
	<div style="background: white;border: 1px solid whitesmoke;border-radius: 5px;margin: -10px 0 15px 0;padding: 5px;height: 60px;" id="message-box" class="span12"></div>
	<!--textarea id="message-box" class="span12" rows="3"></textarea-->
	<button class="btn btn-primary sendBtn" type="button">Send</button>
	<button class="btn" type="button">Discard</button>
	</div>
	<table id="messages" class="table table-striped">
	<tr class="warning">
	<td><input type="checkbox"></td>
	<td>.::NOMAD::.</td>
	<td><a href="#" onclick='javascript:scene1()'>(no subject)</td>
	<td><strong>Just now</strong></td>
	</tr>
	<tr>
	<td><input type="checkbox"></td>
	<td>Haley</td>
	<td>Roadtrip details <i class="icon-heart"></i> </td>
	<td><strong>Yesterday</strong></td>
	</tr>
	<tr>
	<td><input type="checkbox"></td>
	<td>Mom</td>
	<td>FW: FW: FW: 20 Things you won't .....</td>
	<td><strong>Yesterday</strong></td>
	</tr>
	<tr>
	<td><input type="checkbox"></td>
	<td>MIT Student Rela..</td>
	<td>Free pizza!</td>
	<td><strong>Yesterday</strong></td>
	</tr>
	<tr>
	<td><input type="checkbox"></td>
	<td>.::NOMAD::.</td>
	<td>(no subject)</td>
	<td><strong>Just now</strong></td>
	</tr>
	<tr>
	<td><input type="checkbox"></td>
	<td>Haley</td>
	<td>Roadtrip details <i class="icon-heart"></i> </td>
	<td><strong>Yesterday</strong></td>
	</tr>
	<tr>
	<td><input type="checkbox"></td>
	<td>Mom</td>
	<td>FW: FW: FW: 20 Things you won't .....</td>
	<td><strong>Yesterday</strong></td>
	</tr>
	<tr>
	<td><input type="checkbox"></td>
	<td>MIT Student Rela..</td>
	<td>Free pizza!</td>
	<td><strong>Yesterday</strong></td>
	</tr>
	</table>
	<ul class="pager">
	<li class="previous">
	<a id="checker" href="#">← Older</a>
	</li>
	<li class="next disabled">
	<a href="#">Newer →</a>
	</li>
	</ul>
	</div><!--/span-->
	</div><!--/row-->

	<hr>

	<footer>
	<p>© Company 2013</p>
	</footer>

	</div><!--/.fluid-container-->
	<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-header">
	<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
	<h3 id="myModalLabel">Modal header</h3>
	</div>
	<div class="modal-body">
	<p>One fine body…</p>
	</div>
	<div class="modal-footer">
	<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
	<button class="btn btn-primary reply" >Reply</button>
	</div>
	</div>
	<!-- Le javascript
	================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="js/jquery.js"></script>
	<script src="js/bootstrap-transition.js"></script>
	<script src="js/bootstrap-alert.js"></script>
	<script src="js/bootstrap-modal.js"></script>
	<script src="js/bootstrap-dropdown.js"></script>
	<script src="js/bootstrap-scrollspy.js"></script>
	<script src="js/bootstrap-tab.js"></script>
	<script src="js/bootstrap-tooltip.js"></script>
	<script src="js/bootstrap-popover.js"></script>
	<script src="js/bootstrap-button.js"></script>
	<script type="text/javascript">
	//EMAIL SCENES
	function loadProgress(){
	var progress = setInterval(function() {
	var $bar = $('.bar');

	if ($bar.width()==400) {
	clearInterval(progress);
	$('.progress').removeClass('active');
	} else {
	$bar.width($bar.width()+40);
	}
	$bar.text($bar.width()/4 + "%");
	}, 1200);
	}
	var timeout;
	function resetInbox(captcha){
	jQuery("#received").hide();
	jQuery("#messages").show();
	modalAlert(captcha);
	jQuery("#message").html('<img src="'+captcha+'">');
	jQuery("#message-box").text('');
	jQuery('#messages tr:first').removeClass("warning");
	}

	function modalAlert(message){
	jQuery("#myModalLabel").text("(no subject) from ..::Nomad::..")
	jQuery('.modal-body').html("<img src='"+message+"'>");
	timeout=window.setTimeout(function(){showModal();},2000);

	}
	function showModal(){
	jQuery('#messages tr:first').before('<tr class="warning"><td><input type="checkbox"></td><td>.::NOMAD::.</td><td><a href="#">(no subject)</a></td><td><strong>Just now</strong></td></tr>');
	jQuery("#myModal").modal('show')
	clearTimeout(timeout);
	}
	var sceneExpr = "scene1";
	function scene1(){
	var pos=0;
	jQuery("#messages").hide();
	jQuery("#received").show();
	jQuery(document).keypress(function(){
	var a2 = "scene1";
	var sp = a2.split('');
	if(pos <a2.length){
	jQuery("#message-box").text(jQuery("#message-box").text()+sp[pos]);
	}

	pos++;
	});
	}

	function scene2(){

	console.log("Hey!")
	var pos=0;
	jQuery("#messages").hide();
	jQuery("#received").show();
	jQuery(document).keyup(function(){
	var a3 = "scene2";

	var sp3 = a3.split('');
	if(pos <a3.length){
	jQuery("#message-box").text(jQuery("#message-box").text()+sp3[pos]);
	}
	if(pos == a3.length){
	done=true;
	}
	pos++;
	});
	console.log("ho!")
	}
	function scene3(){
	var pos=0;
	jQuery("#messages").hide();
	jQuery("#received").show();
	jQuery(document).keypress(function(){
	var a4 = "Scene 3";

	var sp = a4.split('');
	if(pos <a4.length){
	jQuery("#message-box").val(jQuery("#message-box").val()+sp[pos]);
	}
	pos++;
	});
	}
	function scene4(){
	var pos=0;
	jQuery(document).keypress(function(){
	var a5 = "Scene 4";

	var sp = a5.split('');
	if(pos <a5.length){
	jQuery("#message-box").val(jQuery("#message-box").val()+sp[pos]);
	}
	pos++;
	});
	}
	function scene5(){
	var pos=0;
	jQuery(document).keypress(function(){
	var a6 = "Should print this text";

	var sp = a6.split('');
	if(pos <a6.length){
	jQuery("#message-box").val(jQuery("#message-box").val()+sp[pos]);
	}
	pos++;
	});
	}
	var done = false;
	jQuery(document).ready(function(){
	$('#myModal .reply').click(function() {
	$('#myModal').modal('hide');
	if(sceneExpr=="scene1"){
	sceneExpr = "scene2";
	scene2();
	}
	if(sceneExpr=="scene2"){
	//resetInbox("3.png");
	sceneExpr = "scene3";
	clearTimeout(timeout);
	scene3();
	}
	if(sceneExpr=="scene3"){
	resetInbox("5.png");
	sceneExpr="scene4";
	clearTimeout(timeout);
	scene4();
	}
	if(sceneExpr=="scene4"){
	resetInbox("8.png");
	clearTimeout(timeout);
	scene5();
	}
	clearTimeout(timeout);
	});

	$('.sendBtn').click(function() {
	resetInbox("3.png");
	});


	});
	</script>

	</body>
	</html>