Finished login page, update logo in bg

hourglass/client/login/login.css

@@ -1,6 +1,6 @@
 #loginHeader {
 	height: 6vh;
-	padding: 1%;
+	padding: 2.1vh 0 0 1.5vh;
 	background-color: #222328;
 }
 
@@ -20,10 +20,98 @@
 
 #loginLogo {
 	height: 100%;
+	cursor: pointer;
 }
 
-#github, #version {
-	font-size: 2.3vh;
+#loginTexts {
+	color: #FCF0F0;
+	width: 40%;
+	margin-left: 48%;
+	position: absolute;
+	top: 23vh;
+}
+
+#loginTexts h1 {
+	font-size: 7vh;
+	font-weight: 300;
+	margin: 0;
+	padding: 0;
+	line-height: 3vh;
+}
+
+#loginTexts h2 {
+	font-size: 15vh;
+}
+
+#loginTexts h5 {
+	font-size: 5vh;
+	font-weight: 100;
+}
+
+#loginDec {
+	width: 49vw;
+	height: 200vh;
+
+	background-color: rgba(255,255,255,0.1);
+	position: absolute;
+	top: -46vh;
+	right: 5vw;
+
+	-webkit-transform: rotate(150deg);
+	-ms-transform: rotate(150deg);
+	transform: rotate(150deg);
+}
+
+#loginCirc {
+	width: 55vh;
+	height: 55vh;
+
+	background-color: rgba(255,255,255,0.1);
+
+	-moz-border-radius: 50%;
+	-webkit-border-radius: 50%;
+	border-radius: 50%;
+
+	position: absolute;
+	top: 20vh;
+	left: 5vh;
+}
+
+#loginMidLogo {
+	height: 44vh;
+
+	position: absolute;
+	top: 26vh;
+	left: 10.5vh;
+}
+
+#loginButton {
+	font-size: 3.5vh;
+	width: 12vw;
+	margin-top: 4vh;
+	margin-left: 16vw;
+	padding: 1vh;
+
+	border: 1px solid #FCF0F0;
+	-moz-border-radius: 4px;
+	-webkit-border-radius: 4px;
+	border-radius: 4px;
+
+	text-align: center;
+	cursor: pointer;
+
+	-webkit-transition: background-color 0.4s ease;  
+	-moz-transition: background-color 0.4s ease; 
+	-ms-transition: background-color 0.4s ease;
+	transition: background-color 0.4s ease;
+}
+
+#loginButton:hover {
+	background-color: rgba(0,0,0,0.2);
+}
+
+#aboutText, #version {
+	font-size: 1.7vh;
 	color: #FFF !important;
 
 	height: 6vh;
@@ -46,9 +134,28 @@ a {
 	-webkit-transition: color 0.4s ease;  
 	-moz-transition: color 0.4s ease; 
 	-ms-transition: color 0.4s ease;
-	transition: color 0.4s ease
+	transition: color 0.4s ease;
 }
 
 a:hover {
 	color: #00BFFF;
 }
+
+.github-corner:hover .octo-arm {
+	animation:octocat-wave 560ms ease-in-out
+}
+
+@keyframes octocat-wave {
+	0%,100% { transform:rotate(0) }
+	20%,60% { transform:rotate(-25deg) }
+	40%,80% { transform:rotate(10deg) }
+}
+
+@media (max-width:500px) {
+	.github-corner:hover .octo-arm {
+		animation:none
+	}
+	.github-corner .octo-arm {
+		animation:octocat-wave 560ms ease-in-out
+	}
+}

hourglass/client/login/login.html

@@ -1,14 +1,29 @@
 <template name="login">
 	<div class="noScroll">
+		<a href="https://github.com/ksjdragon/hourglass" target="_blank" class="github-corner" aria-label="View source on Github">
+			<svg width="80" height="80" viewBox="0 0 250 250" style="fill:#B63737; color:#222328; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
+				<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
+				<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
+				<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
+			</svg>
+		</a>
 		<div id="loginHeader">
-			<img src="LogoText.png" id="loginLogo">
+			<img src="./Logos/LogoTextSmall.png" id="loginLogo" onclick="window.location.href='/'">
 		</div>
 		<div id="loginBody">
-			
+			<div id="loginDec"></div>
+			<div id="loginCirc"></div>
+			<img src="./Logos/ColoredLogo.png" id="loginMidLogo">
+			<div id="loginTexts">
+				<h1>Everything in</h1>
+				<h2>One Place.</h2>
+				<h5><b>We'll</b> handle the organization, <b>you</b> handle the work.</h5>
+				<div id="loginButton" onclick="document.getElementById('login-buttons-google').click()">Sign in!</div>
+			</div>
 		</div>
 		<footer id="loginFooter">
-			<p id="github">View the <a href="https://github.com/ksjdragon/hourglass">Code!</a></p>
-			<p id="version">Version 0.1.2</p>
+			<p id="aboutText">Created by Kenneth Jao & Yaman Qalieh</p>
+			<p id="version">Version 0.2.0</p>
 		</footer>
 	</div>
 	{{> loginButtons}}

hourglass/server/main.js

@@ -157,7 +157,9 @@ Security.permit(['insert', 'update', 'remove']).collections([schools, classes, w
 
 Accounts.validateLoginAttempt(function(info) {
     var user = info.user;
+    if(info.user) {
        if(user.banned) throw new Meteor.Error(403, 'You are banned'); 
+    }
     return true;
 });