User Login Modal

// <ModalLogin>
#modalLogin.uk-flex-top(uk-modal)
  .uk-modal-dialog.uk-modal-body.uk-margin-auto-vertical.modal-padding-remove.modal-radius.uk-overflow-hidden.uk-padding-remove(style='width: 430px; background-color: #F4F8FB;')
    button.uk-modal-close-default(type='button', uk-close, style='color: #222')
    .uk-margin-remove
      .uk-position-relative.uk-background-muted.uk-padding
        div
          img.uk-display-block.uk-margin-auto(src='img/logo.jpg', style='width: 228px;')
        h2.heading-green.uk-text-center.uk-margin-small-top.uk-margin-remove-bottom(style='letter-spacing: 1rem; text-indent: 1rem; font-size: 22px;') 會員登入
      div.uk-width-5-6.uk-margin-auto
        form.uk-margin-medium-top(action="", method='post')
          .uk-margin.uk-position-relative
            input.uk-input.uk-text-small(type='email', placeholder='電子郵件', required)
            img.uk-position-small.uk-position-center-right(src='img/icon-mail2.svg', uk-svg, style='opacity: .9;')
          .uk-margin.uk-position-relative
            input.uk-input.uk-text-small(type='password', placeholder='密碼', required)
            img.uk-position-small.uk-position-center-right(src='img/icon-key.svg', uk-svg, style='opacity: .3;')
          .uk-margin
            button.uk-button.uk-button-primary.uk-button-large.uk-width-1-1.text-small-spacing.text-white(type='submit', style='padding-left: 40px; font-size: 1rem; font-weight: bold') 立即登入
        .uk-margin
          p.uk-text-center.text-xsmall 或
          p.uk-text-center.text-xsmall 使用以下社群帳號登入
          .uk-margin
            a.uk-button.uk-button-large.uk-width-1-1.uk-flex.uk-flex-middle.uk-flex-center(style='color: #fff; background-color: #254D90;')
              span.uk-margin-small-right(uk-icon='icon:facebook;ratio:1.2', style='color: #fff;')
              span.text-white(style='font-size:1rem;') Facebook 登入
            a.uk-button.uk-button-large.uk-width-1-1.uk-margin-small-top.uk-flex.uk-flex-middle.uk-flex-center(style='color: #fff; background-color: #D33C26;')
              span.uk-margin-small-right(uk-icon='icon:google-plus;ratio:1.2', style='color: #fff;')
              span.text-white(style='font-size:1rem;') Google 登入
        .uk-margin
          p.uk-text-center.text-xsmall.uk-margin-small-bottom.text-gray.text-small-spacing 還不是會員？
            a.text-dark.link-underline.text-remove-spacing(href='#modalSignUp', uk-toggle) 我&nbsp;要&nbsp;註&nbsp;冊
          p.uk-text-center.text-xsmall.text-gray.text-small-spacing 我曾經註冊過，但我
            a.text-dark.link-underline.text-remove-spacing(href='#modalPassword', uk-toggle) 忘&nbsp;記&nbsp;密&nbsp;碼
        .uk-margin-medium-top
          p.uk-text-center.uk-padding-default-bottom.text-xsmall
            a.text-dark.link-underline(href='#modalPrivacy', uk-toggle) 隱私權條款
// </ModalLogin>

// <ModalSignup>
#modalSignUp.uk-flex-top(uk-modal)
  .uk-modal-dialog.uk-modal-body.uk-margin-auto-vertical.modal-padding-remove.modal-radius.uk-overflow-hidden.uk-padding-remove(style='width: 430px; background-color: #F4F8FB;')
    button.uk-modal-close-default(type='button', uk-close, style='color: #222')
    .uk-margin-remove
      .uk-position-relative.uk-background-muted.uk-padding
        div
          img.uk-display-block.uk-margin-auto(src='img/logo.jpg', style='width: 228px;')
        h2.heading-green.uk-text-center.uk-margin-small-top.uk-margin-remove-bottom(style='letter-spacing: 1rem; text-indent: 1rem; font-size: 22px;') 會員註冊
      .uk-width-5-6.uk-margin-auto
        form.uk-margin-medium-top(action="", method='post')
          .uk-margin.uk-position-relative
            input.uk-input.uk-text-small(type='email', placeholder='電子郵件', required)
            img.uk-position-small.uk-position-center-right(src='img/icon-mail2.svg', uk-svg, style='opacity: .9;')
          .uk-margin.uk-position-relative
            input.uk-input.uk-text-small(type='password', placeholder='密碼', required)
            img.uk-position-small.uk-position-center-right(src='img/icon-key.svg', uk-svg, style='opacity: .3;')
          .uk-margin.uk-position-relative
            input.uk-input.uk-text-small(type='password', placeholder='確認密碼', required)
            img.uk-position-small.uk-position-center-right(src='img/icon-key2.svg', uk-svg, style='opacity: .9; right: -5px;')
          .uk-margin
            button.uk-button.uk-button-primary.uk-button-large.uk-width-1-1.text-small-spacing.text-white(type='submit', style='padding-left: 40px;') 加入會員
        .uk-margin
          p.uk-text-center.text-xsmall.text-small-spacing.text-gray 我已經註冊過，
            a.text-dark.link-underline.link-secondary-reverse.link-underline.text-remove-spacing(href='#modalLogin', uk-toggle) 直&nbsp;接&nbsp;登&nbsp;入
        .uk-margin-medium-top
          p.uk-text-center.uk-padding-default-bottom.text-xsmall
            a.text-dark.link-underline(href='#modalPrivacy', uk-toggle) 隱私權條款
// </ModalSignup>

// <ModalPaswword>
#modalPassword.uk-flex-top(uk-modal)
  .uk-modal-dialog.uk-modal-body.uk-margin-auto-vertical.modal-padding-remove.modal-radius.uk-overflow-hidden.uk-padding-remove(style='width: 430px; background-color: #F4F8FB;')
    button.uk-modal-close-default(type='button', uk-close)
    .uk-margin-remove
      .uk-position-relative.uk-background-muted.uk-padding
        div
          img.uk-display-block.uk-margin-auto(src='img/logo.jpg', style='width: 228px;')
        h2.heading-green.uk-text-center.uk-margin-small-top.uk-margin-remove-bottom(style='letter-spacing: 1rem; text-indent: 1rem; font-size: 22px;') 忘記密碼
        p.uk-text-center.uk-margin-small-top.text-xsmall.text-red.uk-margin-remove-bottom(style='letter-spacing: .2rem; text-indent: .2rem;')
          |輸入您的註冊過的Email
          br 
          | 索取新密碼
      div.uk-width-4-5.uk-margin-auto
        form.uk-margin-medium-top(action="", method='post')
          .uk-margin.uk-position-relative
            input.uk-input.uk-text-small(type='email', placeholder='電子郵件', required)
            img.uk-position-small.uk-position-center-right(src='img/icon-mail2.svg', uk-svg, style='opacity: .9;')
          .uk-margin
            button.uk-button.uk-button-primary.uk-button-large.uk-width-1-1.text-small-spacing.text-white(type='submit', style='padding-left: 40px;') 索取新密碼 
        .uk-margin
          p.uk-text-center.text-xsmall.text-small-spacing.text-gray 還不是會員？
            a.text-dark.link-underline.link-secondary-reverse.text-remove-spacing(href='#modalSignUp', uk-toggle) 立&nbsp;即&nbsp;註&nbsp;冊
        p &nbsp;
        .uk-margin-medium-top
          p.uk-text-center.uk-padding-default-bottom.text-xsmall
            a.text-dark.link-underline(href='#modalPrivacy', uk-toggle) 隱私權條款
// </ModalPassword>

// <modalPrivacy>
#modalPrivacy(uk-modal)
  .uk-modal-dialog.uk-modal-body.modal-radius.uk-overflow-hidden.uk-margin-auto-vertical(class='uk-width-4-5@m', style='padding-right: 20px;')
    button.uk-modal-close-default(type='button', uk-close)
    h3.uk-h4.uk-text-center.heading-green.uk-text-bold 隱私權條款
    ul.uk-list.list-margin-medium-bottom.text-line-height.scrollbar(style='padding-right: 20px;')
      li 
        | 親愛的朋友您好，非常歡迎您光臨（以下簡稱本網站）。
        br
        | 本公司相當重視客戶對我們的信任，為了讓您能夠安心的使用本網站的各項服務與資訊，特此向您說明本網站的隱私權保護政策，以保障您的權益，請您詳閱下列內容： 
// </modalPrivacy>