diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000000..6b665aaa0c --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} diff --git a/home/home.css b/home/home.css new file mode 100644 index 0000000000..51749d559f --- /dev/null +++ b/home/home.css @@ -0,0 +1,267 @@ +* { + box-sizing: border-box; +} +body { + margin: 0; +} +header { + width: 100%; + margin: 0; + padding: 0; + background-color: #f0f6ff; + position: fixed; +} +a { + text-decoration: none; +} +main { + margin-bottom: 50px; +} +#top_div { + display: flex; + justify-content: space-between; + align-items: center; + margin: 20px 200px; +} +.logo_img { + width: 133px; + height: 24px; +} +.btn { + margin: 0; + display: flex; + padding: 16px 20px; + justify-content: center; + align-items: center; + gap: 10px; + border: none; + border-radius: 8px; + background: var( + --gra-purpleblue-to-skyblue, + linear-gradient(91deg, #6d6afe 0.12%, #6ae3fe 101.84%) + ); + color: white; + width: 350px; + flex-shrink: 0; +} +.login_btn { + width: 128px; + cursor: pointer; +} +main { + width: 100%; +} +.first_page_back { + background: #f0f6ff; +} +.first_page { + display: flex; + flex-direction: column; + align-items: center; + /* gap: 40px; */ + margin: 0; + margin-bottom: 120px; +} +span { + background: linear-gradient(91deg, #6d6afe 17.28%, #ff9f9f 74.98%); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} +.infors { + margin-top: 100px; + margin-bottom: 40px; + padding-top: 50px; + display: flex; + flex-direction: column; + align-items: center; +} +.infor { + font-family: Pretendard; + font-size: 64px; + font-style: normal; + font-weight: 700; + line-height: 80px; /* 125% */ + color: #000; + flex-shrink: 0; + margin: 0; +} +.br { + display: flex; + gap: 20px; +} +.link_btn { + width: 350px; + margin: 0; + margin-bottom: 40px; + cursor: pointer; +} +.first_page_img_back { + background-color: #f0f6ff; + width: 1200px; + height: 590px; + display: flex; + justify-content: center; + padding: 50px 0; + overflow: hidden; +} +.first_page_img { + width: 1118px; + height: 659px; + background-size: contain; + background-position: center; + flex-shrink: 0; + border-radius: 25px; + background-image: linear-gradient( + 180deg, + rgba(196, 196, 196, 0) 67.68%, + #f0f6ff 94.76% + ), + url(image/page.png); + box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.08); +} +.next_page { + width: 100%; + display: flex; + margin: 100px auto; + justify-content: space-evenly; + align-items: center; +} +.texts { + display: flex; + width: 291px; + flex-direction: column; + align-items: flex-start; + justify-content: space-around; + gap: 10px; + flex-shrink: 0; + margin: 0; +} +.text { + margin: 0; + color: #000; + font-family: Pretendard; + font-size: 48px; + font-style: normal; + font-weight: 700; + line-height: normal; + letter-spacing: -0.3px; +} +.text_sml { + color: #6b6b6b; + font-family: Abel; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 150%; /* 24px */ +} +.imgs { + width: 550px; + height: 450px; + border-radius: 15px; +} +footer { + display: flex; + justify-content: space-between; + align-items: center; + margin: 0; + padding: 32px 104px 64px; + background: var(--The-julge-black, #111322); +} +#codeit { + color: #676767; + text-align: center; + font-family: Acme; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: normal; +} +#center { + display: flex; + gap: 30px; + color: #cfcfcf; + font-family: Acme; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: normal; +} +.privacy, +.faq { + color: white; +} +#icon { + display: flex; + gap: 10px; +} +@media (max-width: 1199px) { + #top_div { + margin: 13px 32px; + } + .first_page { + width: 698px; + margin: 0 auto; + } + .first_page_img_back { + width: 698px; + height: 343px; + padding: 29px; + } + .first_page_img { + width: 650.303px; + height: 383.114px; + flex-shrink: 0; + } + .imgs { + width: 385px; + height: 315px; + } + .br { + flex-direction: column; + gap: 0; + } +} +@media (max-width: 767px) { + #top_div { + margin: 13px 32px; + } + .text_img { + padding: 0 30px; + } + .first_page { + width: 100%; + padding: 0 32px; + } + .next_page { + flex-direction: column; + margin: 70px 0; + gap: 24px; + } + .left { + flex-direction: column-reverse; + } + .texts { + width: 100%; + } + .text { + font-size: 24px; + } + .first_page_img_back { + width: 100%; + padding: 30px; + } + .first_page_img { + background-repeat: no-repeat; + width: 100%; + flex-shrink: 0; + } + .imgs { + width: 100%; + height: auto; + } + .br { + flex-direction: column; + gap: 0; + } +} diff --git a/home/home.html b/home/home.html new file mode 100644 index 0000000000..d2d022058f --- /dev/null +++ b/home/home.html @@ -0,0 +1,114 @@ + + + + + + + + + + + Linkbrary + + +
+ +
+
+
+
+
+
세상의 모든 정보를
+
+
쉽게 저장하고
+
관리해 보세요
+
+
+ 링크 추가하기 +
+
+
+
+
+
+
+
+
원하는 링크를 저장하세요
+
+ 나중에 읽고 싶은 글, 다시 보고 싶은 영상, 사고 싶은 옷, 기억하고 + 싶은 모든 것을 한 공간에 저장하세요. +
+
+ +
+ +
+ +
+
+ 링크를 폴더로 + 관리하세요 +
+
+ 나만의 폴더를 무제한으로 만들고 다양하게 활용할 수 있습니다. +
+
+
+ +
+
+
+ 저장한 링크를 + 공유해 보세요. +
+
+ 여러 링크를 폴더에 담고 공유할 수 있습니다. 가족, 친구, 동료들에게 + 쉽고 빠르게 링크를 공유해 보세요. +
+
+ +
+ +
+ +
+
+ 저장한 링크를 + 검색해 보세요 +
+
+ 중요한 정보들을 검색으로 쉽게 찾아보세요. +
+
+
+
+
+ + + diff --git a/home/icon/landing/akar-icons_facebook-fill.svg b/home/icon/landing/akar-icons_facebook-fill.svg new file mode 100644 index 0000000000..af5130815d --- /dev/null +++ b/home/icon/landing/akar-icons_facebook-fill.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/home/icon/landing/akar-icons_twitter-fill.svg b/home/icon/landing/akar-icons_twitter-fill.svg new file mode 100644 index 0000000000..4586b559d4 --- /dev/null +++ b/home/icon/landing/akar-icons_twitter-fill.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/home/icon/landing/akar-icons_youtube-fill.svg b/home/icon/landing/akar-icons_youtube-fill.svg new file mode 100644 index 0000000000..3e253de3cd --- /dev/null +++ b/home/icon/landing/akar-icons_youtube-fill.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/home/icon/landing/ant-design_instagram-filled.svg b/home/icon/landing/ant-design_instagram-filled.svg new file mode 100644 index 0000000000..acd5df20b1 --- /dev/null +++ b/home/icon/landing/ant-design_instagram-filled.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/home/image/dog.png b/home/image/dog.png new file mode 100644 index 0000000000..7af9dc54da Binary files /dev/null and b/home/image/dog.png differ diff --git a/home/image/folder.png b/home/image/folder.png new file mode 100644 index 0000000000..a19ac1465d Binary files /dev/null and b/home/image/folder.png differ diff --git a/home/image/page.png b/home/image/page.png new file mode 100644 index 0000000000..a88950b7d1 Binary files /dev/null and b/home/image/page.png differ diff --git a/home/image/search.png b/home/image/search.png new file mode 100644 index 0000000000..c1779da045 Binary files /dev/null and b/home/image/search.png differ diff --git a/home/image/share.png b/home/image/share.png new file mode 100644 index 0000000000..9322bfac69 Binary files /dev/null and b/home/image/share.png differ diff --git a/home/logo.svg b/home/logo.svg new file mode 100644 index 0000000000..ac750371bb --- /dev/null +++ b/home/logo.svg @@ -0,0 +1,15 @@ + + + diff --git a/join/image/google.png b/join/image/google.png new file mode 100644 index 0000000000..e6f5aff87c Binary files /dev/null and b/join/image/google.png differ diff --git a/join/image/kakao.svg b/join/image/kakao.svg new file mode 100644 index 0000000000..831d36cfd4 --- /dev/null +++ b/join/image/kakao.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/join/join.css b/join/join.css new file mode 100644 index 0000000000..13b56652ee --- /dev/null +++ b/join/join.css @@ -0,0 +1,129 @@ +* { + box-sizing: border-box; +} +body { + margin: 15%; + background-color: #f0f6ff; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +#join { + margin-top: 16px; + color: var(--black, #000); + font-family: Pretendard; + font-weight: 400; +} +#join_a { + color: var(--Linkbrary-primary-color, #6d6afe); + font-family: Pretendard; + font-style: normal; + font-weight: 600; + line-height: normal; +} +main { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 24px; + margin-top: 30px; +} +.input_name { + margin: 0 0 12px 0; + color: var(--black, #000); + font-family: Pretendard; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: normal; +} +.input_box { + display: flex; + width: 400px; + padding: 18px 15px; + border-radius: 8px; + border: 1px solid var(--Linkbrary-primary-color, #6d6afe); + background: var(--Linkbrary-white, #fff); +} +.red { + margin-top: 6px; + border: 1px solid var(--Linkbrary-red, #ff5b56); + background: var(--Linkbrary-white, #fff); +} +.password_check { + color: var(--Linkbrary-red, #ff5b56); + font-family: Pretendard; + font-style: normal; + font-weight: 400; + line-height: normal; +} +.login_btn { + width: 400px; + padding: 16px 20px; + border: none; + border-radius: 8px; + background: var( + --gra-purpleblue-to-skyblue, + linear-gradient(91deg, #6d6afe 0.12%, #6ae3fe 101.84%) + ); + color: white; +} +footer { + margin-top: 32px; + display: flex; + width: 410px; + padding: 12px 24px; + justify-content: space-between; + align-items: center; + border-radius: 8px; + border: 1px solid var(--Linkbrary-gray20, #ccd5e3); + background: var(--Linkbrary-gray10, #e7effb); +} +footer p { + color: var(--Linkbrary-gray100, #373740); + font-family: Pretendard; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: normal; +} +footer div { + display: flex; + gap: 10px; +} +.social_img { + width: 26px; + height: 24px; +} +.social_btn { + width: 42px; + height: 42px; +} +.google { + background-image: url(signin/icon/google.svg); + background-size: contain; + padding: 10px; +} +.kakao { + background-image: url(signin/icon/kakao.svg); + background-size: contain; + padding: 10px 8px; +} +@media (max-width: 767px) { + body { + padding: 120px 32px 0 32px; + margin: 0; + } + main { + width: 100%; + } + .input { + width: 100%; + } + .input_box, + .login_btn, + footer { + width: 100%; + } +} diff --git a/join/join.html b/join/join.html new file mode 100644 index 0000000000..9280651c1e --- /dev/null +++ b/join/join.html @@ -0,0 +1,59 @@ + + + + + + + linkdrary_login + + +
+ + +
+ 이미 회원이신가요? + 로그인 하기 +
+
+
+
+

이메일

+ +
+ +
+

비밀번호

+ +
+ +
+

비밀번호 확인

+ +

비밀번호가 다릅니다

+
+ + +
+ + + diff --git a/join/signin/icon/google.svg b/join/signin/icon/google.svg new file mode 100644 index 0000000000..75c873ae72 --- /dev/null +++ b/join/signin/icon/google.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/join/signin/icon/kakao.svg b/join/signin/icon/kakao.svg new file mode 100644 index 0000000000..f0da6389ec --- /dev/null +++ b/join/signin/icon/kakao.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/join/signin/logo.svg b/join/signin/logo.svg new file mode 100644 index 0000000000..d938ff2adc --- /dev/null +++ b/join/signin/logo.svg @@ -0,0 +1,15 @@ + + + diff --git a/join/signup/eye-on.svg b/join/signup/eye-on.svg new file mode 100644 index 0000000000..61afee8981 --- /dev/null +++ b/join/signup/eye-on.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/login/image/google.png b/login/image/google.png new file mode 100644 index 0000000000..e6f5aff87c Binary files /dev/null and b/login/image/google.png differ diff --git a/login/image/kakao.svg b/login/image/kakao.svg new file mode 100644 index 0000000000..831d36cfd4 --- /dev/null +++ b/login/image/kakao.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/login/login.css b/login/login.css new file mode 100644 index 0000000000..b4522e9398 --- /dev/null +++ b/login/login.css @@ -0,0 +1,131 @@ +* { + box-sizing: border-box; +} +body { + margin: 15%; + background-color: #f0f6ff; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +#join { + margin-top: 16px; + color: var(--black, #000); + font-family: Pretendard; + font-weight: 400; +} +#join_a { + color: var(--Linkbrary-primary-color, #6d6afe); + font-family: Pretendard; + font-style: normal; + font-weight: 600; + line-height: normal; +} +main { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 24px; + margin-top: 30px; +} +.input_name { + margin: 0 0 12px 0; + color: var(--black, #000); + font-family: Pretendard; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: normal; +} +.input_box { + display: flex; + width: 400px; + padding: 18px 15px; + border-radius: 8px; + border: 1px solid var(--Linkbrary-primary-color, #6d6afe); + background: var(--Linkbrary-white, #fff); +} +.red { + margin-top: 6px; + border: 1px solid var(--Linkbrary-red, #ff5b56); + background: var(--Linkbrary-white, #fff); +} +.error { + color: var(--Linkbrary-red, #ff5b56); + font-family: Pretendard; + font-style: normal; + font-weight: 400; + line-height: 3em; + font-size: 12px; +} +.login_btn { + width: 400px; + padding: 16px 20px; + border: none; + border-radius: 8px; + background: var( + --gra-purpleblue-to-skyblue, + linear-gradient(91deg, #6d6afe 0.12%, #6ae3fe 101.84%) + ); + color: white; + cursor: pointer; +} +footer { + margin-top: 32px; + display: flex; + width: 410px; + padding: 12px 24px; + justify-content: space-between; + align-items: center; + border-radius: 8px; + border: 1px solid var(--Linkbrary-gray20, #ccd5e3); + background: var(--Linkbrary-gray10, #e7effb); +} +footer p { + color: var(--Linkbrary-gray100, #373740); + font-family: Pretendard; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: normal; +} +footer div { + display: flex; + gap: 10px; +} +.social_img { + width: 26px; + height: 24px; +} +.social_btn { + width: 42px; + height: 42px; +} +.google { + background-image: url(signin/icon/google.svg); + background-size: contain; + padding: 10px; +} +.kakao { + background-image: url(signin/icon/kakao.svg); + background-size: contain; + padding: 10px 8px; +} +@media (max-width: 767px) { + body { + padding: 120px 32px 0 32px; + margin: 0; + } + main { + width: 100%; + } + .input { + width: 100%; + } + .input_box, + .login_btn, + footer { + width: 100%; + } +} diff --git a/login/login.html b/login/login.html new file mode 100644 index 0000000000..f2239c9068 --- /dev/null +++ b/login/login.html @@ -0,0 +1,60 @@ + + + + + + + linkdrary_login + + +
+ + +
+ 회원이 아니신가요? + 회원 가입하기 +
+
+
+
+

이메일

+ + +
+
+

비밀번호

+ +
+
+ +
+ + + + diff --git a/login/login.js b/login/login.js new file mode 100644 index 0000000000..eb8f267f67 --- /dev/null +++ b/login/login.js @@ -0,0 +1,54 @@ +const EMAIL = document.getElementById("email"); +const emailError = document.querySelector(".email_error"); + +const PASSWORD = document.getElementById("password"); +const passwordError = document.querySelector(".password_error"); + +const LOGIN_BTN = document.querySelector(".login_btn"); + +function addEmailErrorMsg(message) { + emailError.innerText = message; +} // => email message 추가 + +function addPasswordErrorMsg(message) { + passwordError.innerText = message; +} // => email message 추가 + +function emailFormat(email) { + const iemailFormat = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + return iemailFormat.test(email); +} // => 이메일 형식 + +function emailText(em) { + if (em.target.value == "") { + addEmailErrorMsg("* 이메일을 입력해주세요."); + } else if (!emailFormat(em.target.value)) { + addEmailErrorMsg("* 올바른 이메일을 입력해주세요."); + } else { + addEmailErrorMsg(""); + } +} +function passwordText(pm) { + if (pm.target.value == "") { + addPasswordErrorMsg("* 비밀번호를 입력해주세요."); + } else { + addPasswordErrorMsg(""); + } +} + +function login() { + const correctEmail = "test@codeit.kr"; + const correctPassword = "codeit101"; + if (correctEmail == EMAIL.value && correctPassword == PASSWORD.value) { + let link = "page.html"; + console.log("success"); + location.href = link; + } else { + addEmailErrorMsg("* 이메일을 확인해주세요."); + addPasswordErrorMsg("* 비밀번호를 확인해주세요."); + } +} + +EMAIL.addEventListener("blur", emailText); +PASSWORD.addEventListener("blur", passwordText); +LOGIN_BTN.addEventListener("click", login); diff --git a/login/page.html b/login/page.html new file mode 100644 index 0000000000..85a9d0a3ca --- /dev/null +++ b/login/page.html @@ -0,0 +1,11 @@ + + + + + + Document + + + hi! + + diff --git a/login/signin/icon/google.svg b/login/signin/icon/google.svg new file mode 100644 index 0000000000..75c873ae72 --- /dev/null +++ b/login/signin/icon/google.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/login/signin/icon/kakao.svg b/login/signin/icon/kakao.svg new file mode 100644 index 0000000000..f0da6389ec --- /dev/null +++ b/login/signin/icon/kakao.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/login/signin/logo.svg b/login/signin/logo.svg new file mode 100644 index 0000000000..d938ff2adc --- /dev/null +++ b/login/signin/logo.svg @@ -0,0 +1,15 @@ + + +