diff --git a/projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.html b/projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.html index b49e4b82..13d86027 100644 --- a/projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.html +++ b/projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.html @@ -1,5 +1,84 @@
-
+ - -
diff --git a/projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.scss b/projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.scss index e0062359..69942593 100644 --- a/projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.scss +++ b/projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.scss @@ -1,14 +1,302 @@ .login { width: 100%; background-size: cover; - height: 100%; + height: calc(100% - 50px); background: #eaeff1; - background: -webkit-linear-gradient(to top, #93a3af, #eaeff1); - background: linear-gradient(to top, #93a3af, #eaeff1); + margin-top: 50px; + overflow: hidden; + /*background: -webkit-linear-gradient(to top, #93a3af, #eaeff1); + background: linear-gradient(to top, #93a3af, #eaeff1);*/ .login-wrapper { flex: 1 0 auto; - background: url(/assets/images/bg_login.png) no-repeat 50% bottom; + //background: url(/assets/images/bg_login.png) no-repeat 50% bottom; background-size: 100% auto; + position: relative; + } +} + +$main: #777; +$back: #aaa; +$accent: hsl(220, 50%, 40%); + +$sans: 'Open Sans', sans-serif; +$heebo: 'Heebo', sans-serif; +$hangul: '나눔고딕', Malgun Gothic, '맑은고딕', Arial, Dotum, '돋움'; + +$base: 3vh; + +$time: 1800ms; + +$ease-out: cubic-bezier(0.26, 0.005, 0.135, 1); +$ease-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86); + +@mixin word-break-keep { + word-break: keep-all; +} + +.slider { + position: relative; + height: 100vh; + width: 100vw; + background: $main; + overflow: hidden; + + &_wrap { + position: absolute; + width: 100vw; + height: 100vh; + transform: translateX(100vw); + top: 0%; + left: 0; + right: auto; + overflow: hidden; + transition: transform $time/4 $ease-in-out; + transform-origin: 0% 50%; + transition-delay: $time/4; + opacity: 0; + &-hacked { + opacity: 1; + } + } + + &_back { + position: absolute; + width: 100%; + height: 100%; + background-size: auto 100%; + background-position: center; + background-repeat: none; + transition: filter $time/4 $ease-in-out; + } + + &_inner { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0%; + background-size: auto 133.3333%; + background-position: center; + background-repeat: none; + transform: scale(0.75); + transition: transform $time/4 $ease-in-out, box-shadow $time/4 $ease-in-out, + opacity $time/4 step-end; + opacity: 0; + box-shadow: 0 $base $base rgba(darken($accent, 50%), 0); + padding: $base * 3; + box-sizing: border-box; + border: 1px solid #ffffff; + } + &_header { + display: flex; + flex-flow: row; + width: 40%; + height: 20px; + justify-content: center; + font-size: $base * 0.6; + color: #ffffff; + .company-name { + flex: 0 0 auto; + padding-right: 20px; + } + .h-line { + flex: 1 1 auto; + align-self: center; + height: 2px; + border-bottom: 1px solid #ffffff; + } + } + &_content { + position: relative; + top: 64%; + width: 40%; + transform: translateY(-50%); + color: white; + font-family: $hangul; + opacity: 0; + transition: opacity $time/4; + h1 { + font-weight: 900; + font-size: $base * 1.24; + line-height: 1.2; + margin-bottom: $base/2; + pointer-events: none; + text-shadow: 0 $base/8 $base/4 rgba(darken($accent, 50%), 0.1); + @include word-break-keep(); + } + p { + font-size: $base * 0.64; + line-height: $base * 0.9; + margin-bottom: $base/2; + @include word-break-keep(); + } + } + &_link { + cursor: pointer; + position: absolute; + font-family: $heebo; + font-size: 1.2rem; + letter-spacing: $base * 0.1; + font-weight: 100; + display: block; + bottom: 10%; + color: #ffffff; + padding: 10px 60px 10px 30px; + border-radius: 100px; + color: #00dbed; + width: $base * 5; + + &:before { + content: ''; + border-top: 1px solid white; + border-right: 1px solid white; + display: block; + width: $base/3; + height: $base/3; + transform: translateX(0) translateY(-50%) rotate(45deg); + position: absolute; + font-family: $heebo; + font-weight: 100; + top: 50%; + left: $base * 4; + } + &:hover { + background-color: #134a67; + color: #ffffff; + } + } + + &_slide { + position: absolute; + left: 0; + height: 100vh; + width: 100vw; + transition: transform $time/3 $ease-in-out; + transition-delay: $time/3; + pointer-events: none; + z-index: 0; + + &-active { + transform: translatex(0%); + z-index: 2; + .slider_wrap { + transform: translateX(0); + transform-origin: 100% 50%; + opacity: 1; + animation: none; + } + .slider_back { + filter: blur(#{$base * 0.2}); + transition: filter $time/2 $ease-in-out; + transition-delay: $time/2 !important; + } + .slider_inner { + transform: scale(0.7); + box-shadow: 0 $base/3 $base * 1 rgba(darken($accent, 50%), 0.2); + pointer-events: auto; + opacity: 1; + transition: transform $time/2 $ease-in-out, + box-shadow $time/2 $ease-in-out, opacity 1ms step-end; + transition-delay: $time/2; + } + .slider_content { + opacity: 1; + transition-delay: $time * 3/4; + } + } + + &:not(.slider_slide--active) .slider_wrap { + @keyframes hack { + 0% { + transform: translateX(0); + opacity: 1; + } + 50% { + transform: translateX(-100vw); + opacity: 1; + } + 51% { + transform: translateX(-100vw); + opacity: 0; + } + 52% { + transform: translateX(100vw); + opacity: 0; + } + 100% { + transform: translateX(100vw); + opacity: 1; + } + } + animation-name: hack; + animation-duration: $time/2; + animation-delay: $time/4; + animation-timing-function: $ease-in-out; + } + + &:nth-child(1) .slider_back, + &:nth-child(1) .slider_inner { + background-image: url(/assets/images/login/bg_login01.png); + //background: #eee; + } + &:nth-child(2) .slider_back, + &:nth-child(2) .slider_inner { + background-image: url(/assets/images/login/bg_login02.png); + //background: #aaa; + } + &:nth-child(3) .slider_back, + &:nth-child(3) .slider_inner { + background-image: url(/assets/images/login/bg_login03.png); + //background: #888; + } + } +} + +/*.sig { + position: fixed; + bottom: 8px; + right: 8px; + text-decoration: none; + font-size: 12px; + font-weight: 100; + font-family: sans-serif; + color: rgba(255, 255, 255, 0.4); + letter-spacing: 2px; + z-index: 9999; +}*/ + +.login-form-box { + position: absolute; + height: 70vh; + top: 15%; + right: 15%; + display: flex; + justify-content: flex-end; + z-index: 100; +} + +@media all and (min-width: 768px) and (max-width: 1400px) { + .slider { + &_content { + transform: translateY(-50%); + color: white; + font-family: $heebo; + opacity: 0; + transition: opacity $time/4; + h1 { + font-weight: 900; + font-size: $base * 1.2; + margin-bottom: $base; + } + p { + display: none; + } + } + &-active { + .slider_inner { + transform: scale(0.9); + } + } } } diff --git a/projects/ucap-webmessenger-app/src/assets/images/login/bg_login01.png b/projects/ucap-webmessenger-app/src/assets/images/login/bg_login01.png new file mode 100644 index 00000000..56c22cbe Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/images/login/bg_login01.png differ diff --git a/projects/ucap-webmessenger-app/src/assets/images/login/bg_login02.png b/projects/ucap-webmessenger-app/src/assets/images/login/bg_login02.png new file mode 100644 index 00000000..020e1963 Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/images/login/bg_login02.png differ diff --git a/projects/ucap-webmessenger-app/src/assets/images/login/bg_login03.png b/projects/ucap-webmessenger-app/src/assets/images/login/bg_login03.png new file mode 100644 index 00000000..91d2dff9 Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/images/login/bg_login03.png differ diff --git a/projects/ucap-webmessenger-app/src/assets/images/logo/bg_login_w160.png b/projects/ucap-webmessenger-app/src/assets/images/logo/bg_login_w160.png new file mode 100644 index 00000000..fb02358e Binary files /dev/null and b/projects/ucap-webmessenger-app/src/assets/images/logo/bg_login_w160.png differ diff --git a/projects/ucap-webmessenger-ui-account/src/lib/components/login.component.html b/projects/ucap-webmessenger-ui-account/src/lib/components/login.component.html index b0d33b18..0dd039a4 100644 --- a/projects/ucap-webmessenger-ui-account/src/lib/components/login.component.html +++ b/projects/ucap-webmessenger-ui-account/src/lib/components/login.component.html @@ -35,6 +35,16 @@ + +
- -
@@ -79,7 +79,7 @@
-
+
{{ !!notiText ? notiText : '개인정보 처리방침' }} diff --git a/projects/ucap-webmessenger-ui-account/src/lib/components/login.component.scss b/projects/ucap-webmessenger-ui-account/src/lib/components/login.component.scss index 267ab236..548ac8cc 100644 --- a/projects/ucap-webmessenger-ui-account/src/lib/components/login.component.scss +++ b/projects/ucap-webmessenger-ui-account/src/lib/components/login.component.scss @@ -1,15 +1,34 @@ .login-form { position: relative; - width: 384px; - max-width: 384px; - padding: 50px; + transform: scale(1); + width: 540px; + min-width: 100%; + top: 0; + right: 0; + padding: 16%; text-align: center; - background-color: rgba(255, 255, 255, 0.8); + background-color: rgba(255, 255, 255, 1); border-radius: 0px; - box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.1); + @media all and (min-width: 768px) and (max-width: 1400px) { + width: 420px; + min-width: 420px; + } .mat-title { - margin: 16px 0 32px 0; + margin: 10px 0 50px 0; + text-indent: -10000000px; + width: 160px; + height: 160px; + background-image: url(/assets/images/logo/bg_login_w160.png); + background-repeat: no-repeat; + display: inline-flex; + background-size: 100% auto; + flex: 1 1 auto; + @media all and (min-width: 768px) and (max-width: 1400px) { + width: 140px; + min-width: 140px; + margin: 10px 0 10px 0; + } } form { @@ -26,22 +45,21 @@ .remember-forgot-password { font-size: 13px; - margin-top: 8px; .remember-me { - margin-bottom: 16px; } .auto-login { font-size: 13px; font-weight: 600; - margin-bottom: 16px; + margin-bottom: 2vh; } } .submit-button { width: 100%; margin: 0 auto; + margin: 2vh 0 1.6vh; display: block; } } @@ -90,13 +108,18 @@ } .policy { position: absolute; - bottom: 0; - width: 100%; - padding: 10px; - left: 0; - color: #ffffff; + bottom: 5vh; + display: block; + text-align: center; + opacity: 0.7; + padding: 6px; + border-radius: 100px; + width: 68%; + color: #2d3a4a; + &:hover { + opacity: 1; + } } - button { &.google, &.facebook {