OpenARMS-ThinFrontend/index.html at master · OpenSourceShift/OpenARMS-ThinFrontend · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html>
  <head>
    <title>OpenARMS</title>
    <!-- Bootstrap -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="css/bootstrap-responsive.min.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <!--link href="css/main.min.css" rel="stylesheet" media="screen"-->
    <link rel="stylesheet/less" type="text/css" href="less/main.less">
  </head>
  <body>
    <div class="navbar navbar-static-top">
      <div class="navbar-inner">
        <a class="brand" href="#">OpenARMS</a>
        <ul class="nav pull-right">
          <li class="divider-vertical"></li>
          <li><a href="loggedin.html">Login</a></li>
        </ul>
      </div>
    </div>
    <!--div class="row-fluid">
      <div class="span6 offset3">
      </div>
    </div-->
    <div id="token-collector">
      <form onsubmit="return false;">
        <h2>Token please?</h2>
        <input type="text" maxlength="6" autofocus="autofocus" />
        <a class="btn btn-large" href="#"><i class="icon-share-alt"></i> Go!</a>
      </form>
    </div>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!-- Uncomment the following line, once in production -->
    <script src="js/less-1.3.1.min.js" type="text/javascript"></script>

    <script type="text/javascript">
    $(function() {

      function shake($element) {
        var offset = 10;
        var times = 3;
        var duration = 80;
        var marginLeft = parseInt($element.css('marginLeft')) ;
        for(var t = 0; t < times; t++) {
          $element.animate({
            marginLeft: marginLeft-offset*t
          }, duration).animate({
            marginLeft: marginLeft+offset*t
          }, duration);
        }
        $element.animate({
          marginLeft: marginLeft
        }, duration);
      }

      $("#token-collector form a.btn").click(function() {
        $(this).closest("form").submit();
      });

      $("#token-collector form").submit(function() {
        var token = $("input[type=text]", this).val();
        if(token.length < 6) {
          shake($("#token-collector"));
        } else {
          location.href="joined-poll.html";
        }
      });
    });
    </script>
  </body>
</html>