Restyle login page
authorJeremy Tan <[email protected]>
Thu, 3 Oct 2013 12:46:34 +0000 (20:46 +0800)
committerJeremy Tan <[email protected]>
Thu, 3 Oct 2013 12:46:34 +0000 (20:46 +0800)
testing/MCTXWeb/public_html/index.html
testing/MCTXWeb/public_html/login.html [new file with mode: 0644]
testing/MCTXWeb/public_html/static/style.css

index a9269f8..3d9d616 100644 (file)
@@ -25,8 +25,7 @@
           //Validate!
           return false;
         });
-        //$("#cam1").setCamera();
-        //$("#strain-graphs").setStrainGraphs();
+        
         $("#errorlog").setErrorLog();
       });
     </script>
             <input type="submit" value="Submit">
           </form>
         </div>
-        
-        <!--Todo get rid of this and make a separate login page-->
-        <div class="widget">
-          <div class="title">Login</div>
-          <div class="item">
-            <form id="login" action="#">
-              <table class="centre">
-                <tr><td>Username</td><td><input name="username" type="text"></td></tr>
-                <tr><td>Password</td><td><input name="pass" type="password"></td></tr>
-                <tr>
-                  <td></td>
-                  <td>
-                    <input type="submit" value="Submit">
-                    <input type="checkbox" name="force"> Force
-                  </td>
-                </tr>
-              </table>
-            </form>
-          </div>
-        </div>
       </div>
       <!-- End sidebar -->
 
diff --git a/testing/MCTXWeb/public_html/login.html b/testing/MCTXWeb/public_html/login.html
new file mode 100644 (file)
index 0000000..9227988
--- /dev/null
@@ -0,0 +1,66 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+  <head>
+    <title>MCTX3420 Web Interface</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <!--[if lte IE 8]>
+      <script language="javascript" type="text/javascript" src="static/excanvas.min.js"></script>
+    <![endif]-->
+    <script type="text/javascript" src="static/jquery-1.10.1.min.js"></script>
+    <script type="text/javascript" src="static/jquery.flot.min.js"></script>
+    <script type="text/javascript" src="static/base64.js"></script>
+    <script type="text/javascript" src="static/mctx.gui.js"></script>
+    
+    <link rel="stylesheet" type="text/css" href="static/style.css">
+    <link rel="stylesheet" type="text/css" href="static/nav-menu.css">
+    <script type="text/javascript">
+      $(document).ready(function () {
+        
+      });
+    </script>
+  </head>
+  
+  <body>
+    <div id="header">
+      <div id="leftnav">
+        <a href="http://www.uwa.edu.au/" target="_blank">
+          <img alt = "The University of Western Australia"
+          src="static/uwacrest-text.png">
+        </a>
+        <span id="title">Exploding Cans</span>
+      </div>
+      <div id="rightnav">
+        <span id="date">
+          <script type="text/javascript">getDate();</script>
+        </span>
+      </div>
+      <div class="clear"></div>
+    </div>
+    <!-- End header -->
+    
+    <div id="login">
+     <div class="widget">
+         <form id="login2" action="#">
+           <p>
+             <label>
+               Username<br>
+               <input name="username" type="text">
+             </label>
+           </p>
+           <p>
+             <label>
+               Password<br>
+               <input name="pass" type="password">
+             </label>             
+           </p>
+           <p style="float:left; margin:0;">
+             <a href="#">Forgotten password?</a>
+           </p>
+           <p style="float:right; margin:0;">
+             <input type="submit" value="Log In">
+           </p>
+          </form>
+     </div>
+    </div>
+  </body>
+</html>
index 4f0df9b..f12cfdf 100644 (file)
@@ -29,6 +29,14 @@ form.controls {
   margin: 1em auto;
 }
 
+a {
+  color: #1188DD;
+}
+
+a:active {
+  color: #0066BB;
+}
+
 div.centre {
   text-align: center;
 }
@@ -79,9 +87,16 @@ input[type="button"]:active, input[type="submit"]:active {
   background-color: #E8E8E8;
 }
 
-/* IE8 width bugfix */
+
 input[type="text"], input[type="password"] {
-  width: 100%;
+  width: 100%; /* IE8 width bugfix */
+  border-radius: 3px;
+  border: 1px solid #CCCCCC;
+  font-size: 16px;
+}
+
+input[type="text"]:focus, input[type="password"]:focus {
+  box-shadow: 0 0 2px #BBBBBB;
 }
 
 #header {
@@ -114,15 +129,18 @@ input[type="text"], input[type="password"] {
   display: table;
 }
 
+#header #leftnav > div, #header #leftnav > span {
+  display: table-cell;
+  vertical-align: middle;
+  padding-left: 1em;  
+}
+
 #header #leftnav a {
   color: #2a2a2a;
 }
 
-#header #title {
+#title {
   font-size: 30px;
-  display: table-cell;
-  vertical-align: middle;
-  padding-left: 1em;
 }
 
 #header #rightnav {
@@ -151,7 +169,7 @@ input[type="text"], input[type="password"] {
 }
 
 #sidebar{
-  float: right;
+  float: left;
   max-width: 26%;
 }
 
@@ -167,8 +185,7 @@ input[type="text"], input[type="password"] {
 
 #main {
   overflow: auto;
-  margin-right: 25%;
-  padding-right: 2em;
+  padding-left: 2em;
   min-width: 400px;
 }
 
@@ -194,6 +211,7 @@ input[type="text"], input[type="password"] {
   margin: 0.25em 0.25em 1.5em;
   padding: 1em 1.25em;
   box-shadow: 0 0 3px #CCCCCC;
+  border: 1px solid #CCCCCC;
   transition: all 0.2s ease 0s;
   overflow: auto;
 }
@@ -212,4 +230,30 @@ input[type="text"], input[type="password"] {
   max-width: 100%;
   width: 100%;
   height: 6em;
+}
+
+/** For login.html **/
+#login {
+  margin: 0 auto;
+  width: 400px;
+  padding: 1.8em 0 0;
+  color: #606060;
+  line-height: 1.8em;
+}
+
+#login form {
+  padding: 1em 2em;
+}
+
+#login input {
+  font-size: 24px;
+}
+
+#login label {
+  font-size: 14px;
+}
+
+#login input[type=submit], #login input[type=submit] {
+  font-size: inherit;
+  padding: 0.4em 0.8em;
 }
\ No newline at end of file

UCC git Repository :: git.ucc.asn.au