User Login Modal

Thumbnail

Pug
// <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>

Modal shows after 3 minutes

PugJS
#modalFreeze.uk-flex-top(uk-modal="")
  .uk-modal-dialog.uk-modal-body.uk-margin-auto-vertical.uk-border-rounded(style='width:880px;')
    button.uk-modal-close-default(type="button" uk-close="")
    each i in footer
      each j in i.freeze
        p.text-small-spacing.uk-text-center.text-default.uk-margin-medium-top.uk-margin-bottom=j.text
        .uk-margin-bottom
          include ../ad/landscape.pug
        .uk-margin-bottom(uk-grid class='uk-child-width-1-2@s')
          each l in j.feature
            div
              h3.text-large.uk-margin-bottom
                img(src=l.icon)
                | &nbsp;
                span=l.title
              each k in l.list
                a.uk-display-block.link-primary(href=k.href)
                  .uk-background-cover.uk-margin-small-bottom(data-src=k.src uk-img style='padding-top: calc(257 / 364 * 100%)')
                  p.text-xsmall.uk-margin-small-bottom
                    img(src=k.icon)
                    | &nbsp;
                    span.text-gray=k.date
                  p.text-small-spacing.text-large-weight.text-medium=k.title
        .uk-margin-bottom(uk-grid class='uk-child-width-1-2@s')
          div
            include ../ad/square
          div
            each m in j.hot
              h3.text-large
                img(src=m.icon)
                | &nbsp;
                span=m.title
              ul.uk-list
                each n in m.list
                  li
                    a.link-primary(href=n.href)
                      .uk-grid-collapse(uk-grid)
                        div(style='width:12px')
                          span.uk-position-relative(style='top: 10px; font-size: 6px; color: red;') ■
                        .uk-width-expand
                          p.text-large-weight.uk-margin-small-top.text-default=n.title
                          span
                            img(src=n.icon)
                            | &nbsp;
                            i.text-xsmall.text-dark=n.date   
var timeout;
document.onmousemove = function () {
  clearTimeout(timeout);
  timeout = setTimeout(function () { 
    UIkit.modal(document.getElementById(modalFreeze)).show();
   }, 180000);
}