diff --git a/css/login.css b/css/login.css new file mode 100644 index 0000000..61d70d0 --- /dev/null +++ b/css/login.css @@ -0,0 +1,32 @@ +.login { + width: 500px; + height: fit-content; + background-color: white; + border-radius: 5px; + border: 1px solid #c4c4c4; + text-align: center; + padding: 30px; +} + +.login * { + margin: 0; +} + +.login p { + margin: 28px 0; + font-size: 1rem; +} + +.login .loginBtn { + height: 60px; + font-size: 22px;/*1.375rem*/ + font-weight: 700; + margin-top: 4px; +} + +.login h2 { + font-size: 16px; + color: var(--black); + font-weight: 400; + margin: 28px 0 30px 0; +} diff --git a/css/modal.css b/css/modal.css new file mode 100644 index 0000000..88be092 --- /dev/null +++ b/css/modal.css @@ -0,0 +1,230 @@ +.modal { + /* position: fixed; */ + background-color: rgba(0, 0, 0, 0.3); + height: 100vh; + width: 100%; + display: none; +} + +.modal a { + color: var(--gray); +} + +.modal-content { + /* position: fixed; */ + width: 32.5rem; + height: fit-content; + background-color: var(--white); + border-radius: 10px; + border: 1px solid var(--light-gray); +} + +.header { + width: 100%; + height: 58px; + border-bottom: 1px solid var(--light-gray); +} + +.title { + font-size: 1rem; + font-weight: 500; + line-height: 3.625rem; + text-align: center; +} + +.closeBtn { + position: absolute; + background: url(../img/close.svg) no-repeat; + background-size: contain; + width: 1rem; + height: 1rem; + top: 0; + right: 0; + margin: 20px; + +} + +.modal-content section { + padding: 24px; + display: flex; + flex-direction: column; + align-items: start; +} + +.login-section p { + font-weight: 500; + font-size: 1.25rem; + padding-top: 2px; + padding-bottom: 24px; +} + +.login-section .login-form{ + width: 100%; +} + +.login-section .login-form * { + width: 100%; +} + +.login-section input { + font-size: 1rem; + padding: 0 1em; +} + +.login-section input[type="password"] { + margin-top: 10px; +} + +.login-section input::placeholder { + color: var(--gray); +} + +.login-section input:focus::placeholder{ + color: transparent; +} + +.login-form >input:focus{ + border: 2px solid var(--touch-blue); +} + +.login-form .message { + color: red; + font-size: 14px; + font-weight: 400; + padding: 0; + margin-top: 6px; + margin-left: 4px; +} + + +/*로그인유지 체크박스 커스텀*/ +.check-keep label[for="keep"] { + color: var(--gray); + display: flex; + align-items: center; + gap: 8px; + cursor: pointer; + margin-top: 1rem; + width: fit-content; + font-weight: 500; +} + +.check-keep label::before{ + content: ""; + display: block; + width: 1.375rem; + height: 1.375rem; + border: 1px solid var(--gray); + border-radius: 50%; + background: url(../img/check.svg) no-repeat 50% 50%; + margin-left: 4px; +} + +.check-keep input:checked+label::before { + background: url(../img/checked.svg) no-repeat 50% 50%; + background-color: var(--blue); + border-color: var(--blue); +} + +.login-section .loginBtn{ + margin: 20px 0; + font-size: 18px; + font-weight: 700; + height: 50px; +} + +.box { + border: 1px solid var(--light-gray); + border-radius: 5px; + width: 100%; + height: 50px; +} + +.join-find { + width: 100%; + display: flex; + justify-content: center; + color: var(--gray); + font-size: 14px; +} + +.join-find li+li{ + position: relative; + padding-left: 25px; +} + +li:nth-child(2)::before{ + content: ''; + position: absolute; + top: 1px; + left: 12px; + width: 1px; + height: 14px; + background-color: var(--gray); +} + + +.or { + padding: 14px 24px 5px 24px; + position: relative; + height: fit-content; +} + +.or hr { + background:var(--light-gray); + height:1px; + border:0; +} + +.or span{ + position: absolute; + left: 50%; + transform: translate(-50%,-50%); + background-color: var(--white); + padding: 0 13px; + color: var(--gray); + font-size: 0.8rem; + +} + +/*social-login--------------------*/ +.login-social { + display: flex; + /* flex-direction: column; */ + gap: 10px; +} + +.socialBtn { + display: flex; +} + +.socialBtn img { + margin-left: 12px; +} + +.socialBtn span { + margin: 0 auto; + line-height: 50px; +} + +.google { + border-color: var(--gray); +} + +.facebook { + border-color: var(--sky); +} + +.naver { + border-color: var(--green); +} + +.kakao { + border-color: var(--yellow); +} + +/*modal open-close*/ +.modal.active { + display: block; +} + diff --git a/css/reset-common.css b/css/reset-common.css new file mode 100644 index 0000000..0acf500 --- /dev/null +++ b/css/reset-common.css @@ -0,0 +1,91 @@ +/* font-import ----------------------------------*/ +@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css); + +/* reset-css ------------------------------------*/ +.a11y-hidden { + overflow: hidden; + position: absolute; + clip: rect(0 0 0 0); /* IE 6,7 */ + clip: rect(0,0,0,0); + width: 1px; + height: 1px; + margin: -1px; + border: 0; + padding: 0; +} + +ul, +ol { + list-style: none; +} + +button { + border: none; + background-color: transparent; +} + +a { + color: inherit; + text-decoration: none; + outline: none; +} + +a:hover, a:active { + text-decoration: none; +} + +input, +input:focus, +textarea, +textarea:focus { + outline: none; + box-shadow: none; +} +/* common-css-----------------------------------*/ +:root { + --bg-gray: #F2F2F2; + --light-gray: #C4C4C4; + --gray: #767676; + --black: #000000; + --white: #ffffff; + --green: #00BF18; + --sky: #2D9CDB; + --blue: #2F80ED; + --touch-blue: #1c6cd4; + --yellow: #F2C94C; +} + + +body { + height: 100vh; + background-color: var(--bg-gray); +} + +* { + box-sizing: border-box; + margin: 0; + padding: 0; + font-family: 'Spoqa Han Sans Neo', 'sans-serif'; + font-weight: 400; +} + +.center { + position: fixed; + inset: 0; + margin: auto; +} + +.loginBtn { + width: 100%; + color: var(--white); + border-radius: 5px; + background-color: var(--blue); +} + +.loginBtn:hover { + background-color: var(--touch-blue); +} + +button:hover { + cursor: pointer; +} \ No newline at end of file diff --git a/img/check.svg b/img/check.svg new file mode 100644 index 0000000..2a63bc8 --- /dev/null +++ b/img/check.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/checked.svg b/img/checked.svg new file mode 100644 index 0000000..f7688cb --- /dev/null +++ b/img/checked.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/close.svg b/img/close.svg new file mode 100644 index 0000000..6564003 --- /dev/null +++ b/img/close.svg @@ -0,0 +1,4 @@ + + + + diff --git a/img/facebook-logo.svg b/img/facebook-logo.svg new file mode 100644 index 0000000..9ba9fbf --- /dev/null +++ b/img/facebook-logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/google-logo.svg b/img/google-logo.svg new file mode 100644 index 0000000..801e609 --- /dev/null +++ b/img/google-logo.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/img/kakao-logo.svg b/img/kakao-logo.svg new file mode 100644 index 0000000..138a72d --- /dev/null +++ b/img/kakao-logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/naver-logo.svg b/img/naver-logo.svg new file mode 100644 index 0000000..964c406 --- /dev/null +++ b/img/naver-logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/weniv-logo.svg b/img/weniv-logo.svg new file mode 100644 index 0000000..c37b6df --- /dev/null +++ b/img/weniv-logo.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/login.html b/login.html new file mode 100644 index 0000000..28b9568 --- /dev/null +++ b/login.html @@ -0,0 +1,77 @@ + + + + + + + login + + + + + + +
+ weniv-logo +

weniv

+

위니브를 더 즐겁고 편리하게 이용하세요.

+ +
+ + + + + + \ No newline at end of file diff --git a/login.js b/login.js new file mode 100644 index 0000000..66f4819 --- /dev/null +++ b/login.js @@ -0,0 +1,71 @@ +const modal = document.getElementById('modal'); +const openBtn = document.querySelector('.openBtn'); +const closeBtn = document.querySelector('.closeBtn'); +const loginForm = document.getElementById('login-form'); + +const loginBtn = document.getElementById('loginBtn'); +const idInput = document.querySelector('.text-id'); +const pwInput = document.querySelector('.text-pw'); + +const message = document.createElement("p"); +message.classList.add("message"); + + +/* input 하단에 경고메시지추가 & input border 빨간색 */ +function inputCheck(input) { + input.after(message); + input.focus(); + let focusInput = document.querySelector('.login-form >input:focus'); + focusInput.style.borderColor = "red"; +} + +/* 경고메시지&border-color 초기화 */ +function inputReset(input) { + input.removeAttribute("style"); + let message = document.querySelector('.message'); + let parent = message.parentElement; + parent.removeChild(message); +} + + +/* open-modal */ +openBtn.addEventListener("click", function(e) { + e.preventDefault(); + modal.classList.add('active'); + + /* login check */ + loginBtn.addEventListener("click", function (event) { + event.preventDefault(); + if(idInput.value === "" && pwInput.value === ""){ + inputCheck(idInput); + message.innerHTML = "아이디를 입력해 주세요."; + }else if(idInput.value === ""){ + inputCheck(idInput); + message.innerHTML = "아이디를 입력해 주세요."; + }else if(pwInput.value === ""){ + inputCheck(pwInput); + message.innerHTML = "비밀번호를 입력해 주세요."; + }else { + inputCheck(pwInput); + message.innerHTML = "아이디 혹은 비밀번호가 일치하지 않습니다."; + } + + //idInput에 값이 입력되었을때 + idInput.addEventListener("change", function(e) { + inputReset(idInput); + }) + + //pwInput에 값이 입력되었을때 + pwInput.addEventListener("change", function(e) { + inputReset(pwInput); + }) + }) +}) + +/* close-modal */ +closeBtn.addEventListener("click", function(e) { + loginForm.reset(); + modal.classList.remove('active'); + inputReset(idInput); + inputReset(pwInput); +}) \ No newline at end of file