Change the entire layout of Index Page

nus-mtp · Mar 18, 2017 · 16b3a65 · 16b3a65
1 parent 8af1fd6
commit 16b3a65
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 88 deletions.
diff --git a/public/Wizard.jpg → public/images/Wizard.jpg b/public/Wizard.jpg → public/images/Wizard.jpg
diff --git a/source/view/index.ejs b/source/view/index.ejs
@@ -1,49 +1,48 @@
 <!DOCTYPE html>
 <html>
+
 <head>
-    <title>index</title>
+    <title>Attack on Tutor</title>
+
     <script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.0.min.js'></script>
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.0/js.cookie.min.js"></script>
-    <!--<link rel='stylesheet' href='/stylesheets/style.css' />-->
+
+	<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Cardo">
     <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:200italic,300italic,400,400italic,600' rel='stylesheet' type='text/css'>
 </head>
-<body>
 
+<body>
     <ul>
-        <li><a class="active" href="/">E-Tutorial</a></li>
-        <li style="float:right"><a class="active" href="https://github.com/nus-mtp/etutorial">GitHub Repo</a></li>
+        <li><a class="active" href="/">Welcome, <%= user.name %></a></li>
+
+        <li style="float:right"><a class="active" href="https://github.com/nus-mtp/etutorial">GitHub Repository</a></li>
         <% if(user){ %>
-            <li style="float:right"><a class="active" id="logout" >Log out</a></li>
+            <li style="float:right"><a class="active" id="logout" >Log Out</a></li>
         <% } %>
     </ul>
 
-    <div class="logo-containter">
-		<img class="logo" src="/public/Wizard.jpg">
+    <div class="logoContainter">
     </div>
 
-    <div class="login-section-containter">
-        <div class="title-containter">
+    <div class="loginContainer">
+        <div class="titleContainter">
             <h1>
-                <i>E-Tutorial</i>
+                Attack on Tutor
             </h1>
+
             <h2>
-                <i>- A Leap Towards Better Tutorial Experiences -</i>
+				A Fantasy-like Tutorial Experience
             </h2>
+
             <% if(user){ %>
-                <h2 class="welcomeMessage">
-                    Welcome back, <%= user.name %>!
-                </h2>
-                <a href="/dashboard"> <img class="proceed-button" src="/images/UIElements/proceedButton.png"> </a>
+                <a href="/dashboard"> <img class="proceed-button" src="images/Wizard.jpg"> </a>
             <% } else{ %>
                 <img class="login-button" src="/images/UIElements/loginButton.png">
             <% } %>
-
         </div>
     </div>
-
-
-
 </body>
+
 </html>
 
 <script>
@@ -71,97 +70,56 @@
 
 <style>
     body {
-        margin:0;
-        background-color: #ffb526;
-        min-width: 1500px;
-        min-height: 800px;
+        background-color: #141311;
     }
-    ul {
-        list-style-type: none;
+    
+	ul {
         margin: 0;
         padding: 0;
         overflow: hidden;
-        background-color: #213045;
+        background-color: #141311;
+		border-style: ridge;;
     }
+	
     li {
         float: left;
     }
+	
     li a {
+		font-family: 'Cardo', serif;
+		font-size: 1.5vw;
         display: block;
         color: white;
         text-align: center;
-        padding: 20px 16px;
+        padding: 10px;
         text-decoration: none;
-        font-family: 'Source Sans Pro', sans-serif; font-weight: 400;
-        font-size: 28px;
     }
+	
     li a:hover {
-        background-color: #44767f;
-    }
-    #logout {
-        cursor: pointer;
-    }
-    .logo-containter {
-        width: 39%;
-        height: calc(100vh - 78px);
-        display: inline-block;
-    }
-    .login-section-containter {
-        width: 59vw;
-        height: calc(100vh - 78px);
-        display: inline-block;
-        vertical-align: top;
-    }
-    .logo {
-        position: relative;
-        width: 90%;
-        margin-top: 7%;
-        -webkit-animation-name: moveReindeer;
-        -webkit-animation-duration: 2s;
-    }
-    @-webkit-keyframes moveReindeer {
-        from {
-            left:-12%;}
-        to {left:0;}
-    }
-    .login-button {
-        display: block;
-        margin-left: auto;
-        margin-right: auto;
-        width: 25vw;
-        top: 20vh;
-        margin-top: 10vh;
-        cursor: pointer;
-    }
-    .proceed-button {
-        display: block;
-        margin-left: auto;
-        margin-right: auto;
-        width: 25vw;
-        top: 20vh;
-        margin-top: 2vh;
-        cursor: pointer;
+        background-color: #B7B7B6;
     }
+	
     h1 {
-        font-family: 'Source Sans Pro', sans-serif; font-weight: 200;
-        font-size: 1400%;
-        color: white;
-        text-shadow: 1vh 1vh #dd9a20;
+		font-family: 'Cardo', serif;
+        font-size: 5vw;
+        color: #FFFFFF;
         margin: 0;
         padding: 0;
-        text-align: center;
-        margin-top: 13vh;
+		text-align: center;
+        margin-top: 30vh;
     }
-    h2 {
-        font-family: 'Source Sans Pro', sans-serif; font-weight: 400;
+   
+	h2 {
+        font-family: 'Cardo', serif;
         font-size: 4.5vh;
-        color: white;
+        color: #A2482E;
         margin:0;
         padding:0;
         text-align: center;
+		margin-top: 1vh;
     }
-    .welcomeMessage {
-        margin-top: 10vh;
-        text-align: center;
+	
+	#logout {
+        cursor: pointer;
     }
-</style>
+</style>