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) 我 要 註 冊 p.uk-text-center.text-xsmall.text-gray.text-small-spacing 我曾經註冊過,但我 a.text-dark.link-underline.text-remove-spacing(href='#modalPassword', uk-toggle) 忘 記 密 碼 .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) 直 接 登 入 .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) 立 即 註 冊 p .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>