From f1d52316c561434b8a1fd949655c9ce1cdaf7399 Mon Sep 17 00:00:00 2001 From: Kenneth Jao Date: Wed, 8 Feb 2017 00:58:37 -0500 Subject: [PATCH] Finished login page, update logo in bg --- hourglass/client/login/login.css | 115 +++++++++++++++++- hourglass/client/login/login.html | 23 +++- hourglass/public/Logos/ColoredLogo.png | Bin 0 -> 154765 bytes hourglass/public/Logos/ColoredLogoOutline.png | Bin 0 -> 137312 bytes hourglass/public/Logos/LogoBackPlate.png | Bin 0 -> 306045 bytes hourglass/public/Logos/LogoInvert.png | Bin 0 -> 107884 bytes hourglass/public/Logos/LogoNoColor.png | Bin 0 -> 186269 bytes hourglass/public/Logos/LogoText.png | Bin 0 -> 139228 bytes hourglass/public/Logos/LogoTextSmall.png | Bin 0 -> 22389 bytes hourglass/public/MDBackgrounds/MDBlack.jpg | Bin 185323 -> 145665 bytes hourglass/public/MDBackgrounds/MDEarth.jpg | Bin 181011 -> 152923 bytes hourglass/public/MDBackgrounds/MDNeonBlue.jpg | Bin 99237 -> 132748 bytes hourglass/public/MDBackgrounds/MDRedBlack.jpg | Bin 149203 -> 132963 bytes hourglass/public/MDBackgrounds/MDSea.jpg | Bin 230488 -> 131620 bytes hourglass/public/MDBackgrounds/MDWhite.jpg | Bin 171335 -> 144297 bytes .../public/MDBackgrounds/Old/MDBlack.jpg | Bin 0 -> 185323 bytes .../public/MDBackgrounds/Old/MDEarth.jpg | Bin 0 -> 181011 bytes .../public/MDBackgrounds/Old/MDNeonBlue.jpg | Bin 0 -> 99237 bytes .../public/MDBackgrounds/Old/MDRedBlack.jpg | Bin 0 -> 149203 bytes hourglass/public/MDBackgrounds/Old/MDSea.jpg | Bin 0 -> 230488 bytes .../public/MDBackgrounds/Old/MDWhite.jpg | Bin 0 -> 171335 bytes hourglass/server/main.js | 4 +- 22 files changed, 133 insertions(+), 9 deletions(-) create mode 100644 hourglass/public/Logos/ColoredLogo.png create mode 100644 hourglass/public/Logos/ColoredLogoOutline.png create mode 100644 hourglass/public/Logos/LogoBackPlate.png create mode 100644 hourglass/public/Logos/LogoInvert.png create mode 100644 hourglass/public/Logos/LogoNoColor.png create mode 100644 hourglass/public/Logos/LogoText.png create mode 100644 hourglass/public/Logos/LogoTextSmall.png create mode 100644 hourglass/public/MDBackgrounds/Old/MDBlack.jpg create mode 100644 hourglass/public/MDBackgrounds/Old/MDEarth.jpg create mode 100644 hourglass/public/MDBackgrounds/Old/MDNeonBlue.jpg create mode 100644 hourglass/public/MDBackgrounds/Old/MDRedBlack.jpg create mode 100644 hourglass/public/MDBackgrounds/Old/MDSea.jpg create mode 100644 hourglass/public/MDBackgrounds/Old/MDWhite.jpg diff --git a/hourglass/client/login/login.css b/hourglass/client/login/login.css index 28641c8..af4bdd9 100644 --- a/hourglass/client/login/login.css +++ b/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 + } } \ No newline at end of file diff --git a/hourglass/client/login/login.html b/hourglass/client/login/login.html index c8ad74a..e4a295b 100644 --- a/hourglass/client/login/login.html +++ b/hourglass/client/login/login.html @@ -1,14 +1,29 @@