온라인 영어 암기 단어장 만들기(2) - 로그인 화면구성

1. 디자인 구상

약간은 움직임이 있는 세련된 화면을 구성하기 위해 기존에 나와 있는 샘플화면을 최대한 활용하여 개발하고자 했다. 화면 크기는 핸드폰으로 볼때 편안한 형태로 만들다 보니, width는 440px가 가장 적합했다. 로그인 화면은 아래 블러그에 나오는 로그인 디자인 중에 무난한 것을 사용하기로 마음 먹었다.  

[CSS] 🎨 로그인 / 회원가입 페이지 디자인 스타일 모음

 

2. 구현이 완료된 화면

약간의 signin 화면과 signup 화면은 한 페이지에서 진행할 수 있도록 아래와 같이 만들었다. 타이틀 아래 sign in, sign up 두개의 메뉴를 통해 로그인 또는 회원가입이 가능한 첫 페이지를 만들었다. 로그인시 오류가 발생하면, 제일 아래 텍스트 박스에 오류내용이 보이게 구성을 하였다.

(화면 애니메이션) Sign In에서 Sign Up 버튼을 클릭하면, Email과 Confirm Password 필드가 CSS 애니메이션으로 통해 서서이 나타나도록 구현했다.

 

3. HTML 코드(블러그 참조)

    <div class="container">
        <div class="main_container">
            <div class="logo_text">SMART WORD</div>
            <div class="form signin">
                <div class="form-header">
                  <div class="show-signin">Sign In</div>
                  <div class="show-signup">Sign Up</div>                  
                </div>
                <div class="arrow"></div>
                <div class="form-elements">
                  <div class="form-element">
                    <input type="text" id="userid" placeholder="Username" autocapitalize="off">
                  </div>
                  <div class="form-element">
                    <input type="text" id="email" placeholder="Email" autocapitalize="off">
                  </div>
                  <div class="form-element">
                    <input type="password" id="password" placeholder="Password">
                  </div>
                  <div class="form-element">
                    <input type="password" id="password2" placeholder="Confirm password">
                  </div>
                  <div class="form-element">
                    <button id="submit-btn" class="effect_btn">Sign Up</button>
                  </div>
                  <div class="form-element">
                    <div class="message"></div>
                  </div>
                </div>
              </div>            
        </div>
    </div>

 

4. CSS 코드(블러그 참조)

.container { width: 100%; height: 100%; background-color: rgb(241, 241, 241);}

.main_container { width: 440px;height: 100%;  margin: 0 auto; background-color: #c9b1b1; text-align: center;}
    .logo_text { font-size: 40px; text-align: center; padding-top: 60px; 
                  font-weight: bold;margin-bottom: 20px;
                 color:#25294e}

.form {
    /* position:absolute; */
    margin: 0 auto;
    /*top:0px;
    left:50%;*/
    /* transform:translate(-50%,-50%); */
    width:300px;
    height:250px;
    padding:10px;
    background-color:#2c2c2c;
    border-radius: 10px;
    transition:all 500ms ease-in-out;
}
.form .form-header {
    height:30px;
    display:flex;
    align-items:center;
    text-align:center;
}
.form .form-header > div {
    width:calc(100% / 3);
    color:#ddd;
    font-size:18px;
    font-weight:600;
    cursor:pointer;
}
.form.signin {height: 240px;}
.form.signup {height: 340px;}
.form.signup .form-header div.show-signup {
    color:#f1575b;
}
.form.signin .form-header div.show-signin {
    color:#f1575b;
}
.form .form-elements {margin-top:15px;}
.form .form-elements .form-element {
    height:50px;
    opacity:1;
    overflow:hidden;
    transition:all 500ms ease-in-out;
}
.form .form-elements .form-element .message{
    width: 100%;
    height: 45px;
    background-color: #4b4747;
    margin-top: 3px;
    border-radius: 10px;
    color: rgb(177, 147, 147);
    display: flex;
    justify-content: center;
    align-items: center;  
}
.form .form-elements input {
    width:99%;padding:10px;
    font-size:16px;margin:5px 0px;
    border-radius:10px;
    box-sizing:border-box;
    border:1px solid #222;
    background:#f5f5f5;
}
.form .form-elements button {
    width:100%;padding:10px;
    font-size:16px;font-weight:600;
    margin-top:5px;border-radius:10px;
    background:#f1575b;color:#f5f5f5;
    cursor:pointer;
    border:none;outline:none;
}
.form .arrow {
    position:absolute;
    top:180px;width:0;height:0;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-bottom:10px solid #f5f5f5;
}
.form.signin .arrow {left:calc(50% - 110px);}
.form.signup .arrow {left:calc(50% - 10px);}
 
.form.signin .form-elements > div:nth-child(2), 
.form.signin .form-elements > div:nth-child(4){
    height:0px;opacity:0;
}

 

5. JAVASCRIPT 코드(블러그 일부 참조)

    <script src="./js/jquery-3.7.1.min.js"></script>
    <script>

        $(function(){
            $('.show-signin').click(function(){
              let fm = $('.form')
              fm.removeClass('signup')
              fm.addClass('signin')              
              $('#submit-btn').text("Sign In")              
              $("#userid").attr("tabindex",0)
              $("#email").attr("tabindex",-1)
              $("#password").attr("tabindex",0)
              $("#password2").attr("tabindex",-1)
              $("#submit-btn").attr("tabindex",0  )
              $("#userid").focus()
              $("input").keyup(function(e){
                if(e.keyCode==13){
                  $("#submit-btn").click()
                }
              })
            })

            $('.show-signup').click(function(){
              let fm = $('.form')
              fm.removeClass('signin')
              fm.addClass('signup')              
              $('#submit-btn').text("Sign Up")
              $("#userid").attr("tabindex",0)
              $("#email").attr("tabindex",0)
              $("#password").attr("tabindex",0)
              $("#password2").attr("tabindex",0)
              $("#submit-btn").attr("tabindex",0)
              $("#userid").focus()
            })

            $('.show-signin').click()

            $("#submit-btn").click(function(){
              $(".message").html('')
              var obj = {};
              $('input').each((idx,ele)=>{
                  obj[ele.id] = ele.value
                })
              if($(".form").hasClass("signin")){
                obj['type'] = 'signin'
              }else{
                obj['type'] = 'signup'
              }
              $.post( "/word/login", obj, function( data ) {
                if(data.isLogin==true){
                  location.href = '/study.html'
                }else{
                  $(".message").html(data.message)
                }
              },'json');
            })
        })
    </script>