www/login.html

   1 <!DOCTYPE html>\r
   2 <html xmlns="http://www.w3.org/1999/xhtml">\r
   3 <head>\r
   4     <meta name="viewport" content="width=device-width, initial-scale=1.0" />\r
   5     <title>COPS</title>\r
   6     <script type="text/javascript" src="resources/jQuery/jquery-1.10.2.min.js"></script>\r
   7     <link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Open+Sans:400,300italic,800,300,400italic,600,600italic,700,700italic,800italic' />\r
   8     <style media="screen" type="text/css">\r
   9         body{\r
  10             background:white;\r
  11             font-family:'Open Sans';\r
  12         }\r
  13         \r
  14         #block{\r
  15             width:230px;\r
  16             height:113px;\r
  17             margin:auto;\r
  18             background:#2c3e50;\r
  19             margin-top:100px;\r
  20             border-radius:2px;\r
  21         }\r
  22         \r
  23         #block:before{\r
  24             content:'';\r
  25             display:block;\r
  26             width:230px;\r
  27             height:3px;\r
  28         }\r
  29         \r
  30         #block:after{\r
  31             content:'';\r
  32             display:block;\r
  33         }\r
  34         \r
  35         #block input[type=text],#block  input[type=password] {\r
  36             font-family:'Open Sans';\r
  37             width:156px;\r
  38             height:32px;\r
  39             margin:15px 15px;\r
  40             border:0;\r
  41             border-radius:2px;\r
  42             display:block;\r
  43             font-size:18px;\r
  44         }\r
  45         \r
  46         #block input[type=password]{\r
  47             width:156px;\r
  48             height:32px;\r
  49             margin:-5px 15px;\r
  50         }\r
  51         #submit{\r
  52             position:absolute;\r
  53             width:33px;\r
  54             height:34px;\r
  55             background:#9b59b6;\r
  56             margin:15px;\r
  57             color:#ffffff;\r
  58             border:0;\r
  59             margin:-29px 180px;\r
  60             font-size:22px;\r
  61             padding:0;\r
  62         }\r
  63     </style>\r
  64     <script>\r
  65         $(document).ready(function()\r
  66         {\r
  67             $('#loginForm').submit(function()\r
  68             {\r
  69               var username = $('#user').val();\r
  70               var password = $('#password').val();\r
  71 \r
  72               $.ajax(\r
  73                 {\r
  74                   'password' : password,\r
  75                   'username' : username,\r
  76                   'url'      : 'index.php',\r
  77                   'type'     : 'GET',\r
  78                   'success'  : function(){ window.location = 'index.php'; },\r
  79                   'error'    : function(){ alert('Bad Login Details');},\r
  80                 }\r
  81               );\r
  82 \r
  83               return false;\r
  84             });\r
  85         });\r
  86     </script>\r
  87 </head>\r
  88 <body>\r
  89     <form id="loginForm">\r
  90     <div id="block">\r
  91         <input id="user" type="text" placeholder="Username" required="required" />\r
  92         <input id="password" type="password" placeholder="Password" required="required" />\r
  93         <input id="submit" type="submit" value="&#x2192;" />\r
  94     </div>\r
  95     </form>\r
  96 </body>\r
  97 </html>