26 changed files with 47983 additions and 3335 deletions
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
@ -0,0 +1,252 @@ |
|||||
|
|
||||
|
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800'); |
||||
|
|
||||
|
* { |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
body { |
||||
|
background: #f6f5f7; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
flex-direction: column; |
||||
|
font-family: 'Montserrat', sans-serif; |
||||
|
height: 100vh; |
||||
|
margin: -20px 0 50px; |
||||
|
} |
||||
|
|
||||
|
h1 { |
||||
|
font-weight: bold; |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
h2 { |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
p { |
||||
|
font-size: 14px; |
||||
|
font-weight: 100; |
||||
|
line-height: 20px; |
||||
|
letter-spacing: 0.5px; |
||||
|
margin: 20px 0 30px; |
||||
|
} |
||||
|
|
||||
|
span { |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
|
||||
|
a { |
||||
|
color: #333; |
||||
|
font-size: 14px; |
||||
|
text-decoration: none; |
||||
|
margin: 15px 0; |
||||
|
} |
||||
|
|
||||
|
button { |
||||
|
border-radius: 20px; |
||||
|
border: 1px solid #FF4B2B; |
||||
|
background-color: #FF4B2B; |
||||
|
color: #FFFFFF; |
||||
|
font-size: 12px; |
||||
|
font-weight: bold; |
||||
|
padding: 12px 45px; |
||||
|
letter-spacing: 1px; |
||||
|
text-transform: uppercase; |
||||
|
transition: transform 80ms ease-in; |
||||
|
} |
||||
|
|
||||
|
button:active { |
||||
|
transform: scale(0.95); |
||||
|
} |
||||
|
|
||||
|
button:focus { |
||||
|
outline: none; |
||||
|
} |
||||
|
|
||||
|
button.ghost { |
||||
|
background-color: transparent; |
||||
|
border-color: #FFFFFF; |
||||
|
} |
||||
|
|
||||
|
form { |
||||
|
background-color: #FFFFFF; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
flex-direction: column; |
||||
|
padding: 0 50px; |
||||
|
height: 100%; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
input { |
||||
|
background-color: #eee; |
||||
|
border: none; |
||||
|
padding: 12px 15px; |
||||
|
margin: 8px 0; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.container { |
||||
|
background-color: #fff; |
||||
|
border-radius: 10px; |
||||
|
box-shadow: 0 14px 28px rgba(0,0,0,0.25), |
||||
|
0 10px 10px rgba(0,0,0,0.22); |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
width: 768px; |
||||
|
max-width: 100%; |
||||
|
min-height: 480px; |
||||
|
} |
||||
|
|
||||
|
.form-container { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
height: 100%; |
||||
|
transition: all 0.6s ease-in-out; |
||||
|
} |
||||
|
|
||||
|
.sign-in-container { |
||||
|
left: 0; |
||||
|
width: 50%; |
||||
|
z-index: 2; |
||||
|
} |
||||
|
|
||||
|
.container.right-panel-active .sign-in-container { |
||||
|
transform: translateX(100%); |
||||
|
} |
||||
|
|
||||
|
.sign-up-container { |
||||
|
left: 0; |
||||
|
width: 50%; |
||||
|
opacity: 0; |
||||
|
z-index: 1; |
||||
|
} |
||||
|
|
||||
|
.container.right-panel-active .sign-up-container { |
||||
|
transform: translateX(100%); |
||||
|
opacity: 1; |
||||
|
z-index: 5; |
||||
|
animation: show 0.6s; |
||||
|
} |
||||
|
|
||||
|
@keyframes show { |
||||
|
0%, 49.99% { |
||||
|
opacity: 0; |
||||
|
z-index: 1; |
||||
|
} |
||||
|
|
||||
|
50%, 100% { |
||||
|
opacity: 1; |
||||
|
z-index: 5; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.overlay-container { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 50%; |
||||
|
width: 50%; |
||||
|
height: 100%; |
||||
|
overflow: hidden; |
||||
|
transition: transform 0.6s ease-in-out; |
||||
|
z-index: 100; |
||||
|
} |
||||
|
|
||||
|
.container.right-panel-active .overlay-container{ |
||||
|
transform: translateX(-100%); |
||||
|
} |
||||
|
|
||||
|
.overlay { |
||||
|
background: #FF416C; |
||||
|
background: -webkit-linear-gradient(to right, #FF4B2B, #FF416C); |
||||
|
background: linear-gradient(to right, #FF4B2B, #FF416C); |
||||
|
background-repeat: no-repeat; |
||||
|
background-size: cover; |
||||
|
background-position: 0 0; |
||||
|
color: #FFFFFF; |
||||
|
position: relative; |
||||
|
left: -100%; |
||||
|
height: 100%; |
||||
|
width: 200%; |
||||
|
transform: translateX(0); |
||||
|
transition: transform 0.6s ease-in-out; |
||||
|
} |
||||
|
|
||||
|
.container.right-panel-active .overlay { |
||||
|
transform: translateX(50%); |
||||
|
} |
||||
|
|
||||
|
.overlay-panel { |
||||
|
position: absolute; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
flex-direction: column; |
||||
|
padding: 0 40px; |
||||
|
text-align: center; |
||||
|
top: 0; |
||||
|
height: 100%; |
||||
|
width: 50%; |
||||
|
transform: translateX(0); |
||||
|
transition: transform 0.6s ease-in-out; |
||||
|
} |
||||
|
|
||||
|
.overlay-left { |
||||
|
transform: translateX(-20%); |
||||
|
} |
||||
|
|
||||
|
.container.right-panel-active .overlay-left { |
||||
|
transform: translateX(0); |
||||
|
} |
||||
|
|
||||
|
.overlay-right { |
||||
|
right: 0; |
||||
|
transform: translateX(0); |
||||
|
} |
||||
|
|
||||
|
.container.right-panel-active .overlay-right { |
||||
|
transform: translateX(20%); |
||||
|
} |
||||
|
|
||||
|
.social-container { |
||||
|
margin: 20px 0; |
||||
|
} |
||||
|
|
||||
|
.social-container a { |
||||
|
border: 1px solid #DDDDDD; |
||||
|
border-radius: 50%; |
||||
|
display: inline-flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
margin: 0 5px; |
||||
|
height: 40px; |
||||
|
width: 40px; |
||||
|
} |
||||
|
|
||||
|
footer { |
||||
|
background-color: #222; |
||||
|
color: #fff; |
||||
|
font-size: 14px; |
||||
|
bottom: 0; |
||||
|
position: fixed; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
text-align: center; |
||||
|
z-index: 999; |
||||
|
} |
||||
|
|
||||
|
footer p { |
||||
|
margin: 10px 0; |
||||
|
} |
||||
|
|
||||
|
footer i { |
||||
|
color: red; |
||||
|
} |
||||
|
|
||||
|
footer a { |
||||
|
color: #3c97bf; |
||||
|
text-decoration: none; |
||||
|
} |
||||
@ -0,0 +1,11 @@ |
|||||
|
const signUpButton = document.getElementById('signUp'); |
||||
|
const signInButton = document.getElementById('signIn'); |
||||
|
const container = document.getElementById('container'); |
||||
|
|
||||
|
signUpButton.addEventListener('click', () => { |
||||
|
container.classList.add("right-panel-active"); |
||||
|
}); |
||||
|
|
||||
|
signInButton.addEventListener('click', () => { |
||||
|
container.classList.remove("right-panel-active"); |
||||
|
}); |
||||
@ -1,420 +0,0 @@ |
|||||
/* |
|
||||
Author: W3layouts |
|
||||
Author URL: http://w3layouts.com |
|
||||
*/ |
|
||||
html { |
|
||||
scroll-behavior: smooth; |
|
||||
} |
|
||||
|
|
||||
body, |
|
||||
html { |
|
||||
margin: 0; |
|
||||
padding: 0; |
|
||||
font-family: 'Poppins', sans-serif; |
|
||||
} |
|
||||
|
|
||||
* { |
|
||||
box-sizing: border-box; |
|
||||
} |
|
||||
|
|
||||
.d-grid { |
|
||||
display: grid; |
|
||||
} |
|
||||
|
|
||||
.d-flex { |
|
||||
display: flex; |
|
||||
display: -webkit-flex; |
|
||||
} |
|
||||
|
|
||||
.text-center { |
|
||||
text-align: center; |
|
||||
} |
|
||||
|
|
||||
.text-left { |
|
||||
text-align: left; |
|
||||
} |
|
||||
|
|
||||
.text-right { |
|
||||
text-align: right; |
|
||||
} |
|
||||
|
|
||||
button, |
|
||||
input, |
|
||||
select { |
|
||||
-webkit-appearance: none; |
|
||||
outline: none; |
|
||||
font-family: 'Poppins', sans-serif; |
|
||||
} |
|
||||
|
|
||||
button, |
|
||||
.btn, |
|
||||
select { |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
|
|
||||
a { |
|
||||
text-decoration: none; |
|
||||
} |
|
||||
|
|
||||
img { |
|
||||
max-width: 100%; |
|
||||
} |
|
||||
|
|
||||
ul { |
|
||||
margin: 0; |
|
||||
padding: 0 |
|
||||
} |
|
||||
|
|
||||
h1, |
|
||||
h2, |
|
||||
h3, |
|
||||
h4, |
|
||||
h5, |
|
||||
h6, |
|
||||
p { |
|
||||
margin: 0; |
|
||||
padding: 0 |
|
||||
} |
|
||||
|
|
||||
p { |
|
||||
color: #666; |
|
||||
font-size: 16px; |
|
||||
line-height: 25px; |
|
||||
opacity: .6; |
|
||||
} |
|
||||
|
|
||||
.p-relative { |
|
||||
position: relative; |
|
||||
} |
|
||||
|
|
||||
.p-absolute { |
|
||||
position: absolute; |
|
||||
} |
|
||||
|
|
||||
.p-fixed { |
|
||||
position: fixed; |
|
||||
} |
|
||||
|
|
||||
.p-sticky { |
|
||||
position: sticky; |
|
||||
} |
|
||||
|
|
||||
.btn, |
|
||||
button, |
|
||||
.actionbg, |
|
||||
input { |
|
||||
border-radius: 4px; |
|
||||
-webkit-border-radius: 4px; |
|
||||
-moz-border-radius: 4px; |
|
||||
-o-border-radius: 4px; |
|
||||
-ms-border-radius: 4px; |
|
||||
} |
|
||||
|
|
||||
.btn:hover, |
|
||||
button:hover { |
|
||||
transition: 0.5s ease; |
|
||||
-webkit-transition: 0.5s ease; |
|
||||
-o-transition: 0.5s ease; |
|
||||
-ms-transition: 0.5s ease; |
|
||||
-moz-transition: 0.5s ease; |
|
||||
} |
|
||||
|
|
||||
/*-- wrapper start --*/ |
|
||||
.wrapper { |
|
||||
width: 100%; |
|
||||
padding-right: 15px; |
|
||||
padding-left: 15px; |
|
||||
margin-right: auto; |
|
||||
margin-left: auto; |
|
||||
} |
|
||||
|
|
||||
@media (min-width: 576px) { |
|
||||
.wrapper { |
|
||||
max-width: 540px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
@media (min-width: 768px) { |
|
||||
.wrapper { |
|
||||
max-width: 720px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
@media (min-width: 992px) { |
|
||||
.wrapper { |
|
||||
max-width: 960px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
@media (min-width: 1200px) { |
|
||||
.wrapper { |
|
||||
max-width: 1140px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.wrapper-full { |
|
||||
width: 100%; |
|
||||
padding-right: 15px; |
|
||||
padding-left: 15px; |
|
||||
margin-right: auto; |
|
||||
margin-left: auto; |
|
||||
} |
|
||||
|
|
||||
/*-- //wrapper start --*/ |
|
||||
|
|
||||
/*-- form styling --*/ |
|
||||
.w3l-mockup-form { |
|
||||
position: relative; |
|
||||
min-height: 100vh; |
|
||||
z-index: 0; |
|
||||
background: rgba(99, 194, 110, 0.1); |
|
||||
padding: 40px 40px; |
|
||||
justify-content: center; |
|
||||
display: grid; |
|
||||
grid-template-rows: 1fr auto 1fr; |
|
||||
align-items: center; |
|
||||
} |
|
||||
|
|
||||
.container { |
|
||||
max-width: 890px; |
|
||||
margin: 0 auto; |
|
||||
} |
|
||||
|
|
||||
.w3l_form { |
|
||||
padding: 0px; |
|
||||
flex-basis: 50%; |
|
||||
-webkit-flex-basis: 50%; |
|
||||
background: #00c16e; |
|
||||
padding: 100px 50px; |
|
||||
border-top-left-radius: 8px; |
|
||||
border-bottom-left-radius: 8px; |
|
||||
} |
|
||||
|
|
||||
.content-wthree { |
|
||||
flex-basis: 60%; |
|
||||
-webkit-flex-basis: 60%; |
|
||||
box-sizing: border-box; |
|
||||
padding: 3em 3.5em; |
|
||||
background: #fff; |
|
||||
box-shadow: 2px 9px 49px -17px rgba(0, 0, 0, 0.1); |
|
||||
border-top-right-radius: 8px; |
|
||||
border-bottom-right-radius: 8px; |
|
||||
} |
|
||||
|
|
||||
.w3l-workinghny-form .logo { |
|
||||
text-align: center; |
|
||||
} |
|
||||
|
|
||||
.w3l-mockup-form .main-mockup { |
|
||||
position: relative; |
|
||||
display: -webkit-box; |
|
||||
display: -moz-box; |
|
||||
display: -ms-flexbox; |
|
||||
display: -webkit-flex; |
|
||||
display: flex; |
|
||||
margin: 40px 0; |
|
||||
} |
|
||||
|
|
||||
.w3l-mockup-form .alert-close { |
|
||||
cursor: pointer; |
|
||||
height: 35px; |
|
||||
width: 35px; |
|
||||
line-height: 35px; |
|
||||
position: absolute; |
|
||||
right: -5px; |
|
||||
top: -5px; |
|
||||
background: #62c16e; |
|
||||
border-radius: 50px; |
|
||||
color: #fff; |
|
||||
text-align: center; |
|
||||
} |
|
||||
|
|
||||
.w3l-mockup-form form { |
|
||||
margin-top: 30px; |
|
||||
margin-bottom: 30px; |
|
||||
} |
|
||||
|
|
||||
.social-icons { |
|
||||
text-align: center; |
|
||||
} |
|
||||
|
|
||||
.w3l-mockup-form h1 { |
|
||||
text-align: center; |
|
||||
font-size: 40px; |
|
||||
font-weight: 500; |
|
||||
color: #3b3663; |
|
||||
} |
|
||||
|
|
||||
.w3l-mockup-form h2 { |
|
||||
display: inline-block; |
|
||||
font-size: 25px; |
|
||||
line-height: 35px; |
|
||||
margin-bottom: 5px; |
|
||||
font-weight: 600; |
|
||||
color: #3b3663; |
|
||||
} |
|
||||
|
|
||||
.w3l-mockup-form input[type="text"], |
|
||||
.w3l-mockup-form input[type="email"] { |
|
||||
outline: none; |
|
||||
margin-bottom: 15px; |
|
||||
font-size: 16px; |
|
||||
color: #999; |
|
||||
text-align: left; |
|
||||
padding: 14px 20px; |
|
||||
width: 100%; |
|
||||
display: inline-block; |
|
||||
box-sizing: border-box; |
|
||||
border: none; |
|
||||
outline: none; |
|
||||
background: transparent; |
|
||||
border: 1px solid #e5e5e5; |
|
||||
} |
|
||||
|
|
||||
.w3l-mockup-form button { |
|
||||
font-size: 18px; |
|
||||
color: #fff; |
|
||||
width: 100%; |
|
||||
background: #00c16e; |
|
||||
border: none; |
|
||||
padding: 14px 15px; |
|
||||
font-weight: 500; |
|
||||
transition: .3s ease; |
|
||||
-webkit-transition: .3s ease; |
|
||||
-moz-transition: .3s ease; |
|
||||
-ms-transition: .3s ease; |
|
||||
-o-transition: .3s ease; |
|
||||
} |
|
||||
|
|
||||
.w3l-mockup-form button:hover { |
|
||||
background: #4ca356; |
|
||||
} |
|
||||
|
|
||||
.w3l-mockup-form .social-icons ul li { |
|
||||
list-style: none; |
|
||||
display: inline-block; |
|
||||
} |
|
||||
|
|
||||
.w3l-mockup-form .social-icons ul li a { |
|
||||
padding: 8px; |
|
||||
} |
|
||||
|
|
||||
.w3l-mockup-form .social-icons ul li a:hover { |
|
||||
opacity: 0.8; |
|
||||
transition: 0.5s ease; |
|
||||
-webkit-transition: 0.5s ease; |
|
||||
-o-transition: 0.5s ease; |
|
||||
-ms-transition: 0.5s ease; |
|
||||
-moz-transition: 0.5s ease; |
|
||||
} |
|
||||
|
|
||||
.w3l-mockup-form .social-icons ul span.fa { |
|
||||
color: #696687; |
|
||||
font-size: 18px; |
|
||||
opacity: .8; |
|
||||
} |
|
||||
|
|
||||
.w3l-mockup-form .social-icons ul li a.facebook span { |
|
||||
color: #3b5998; |
|
||||
} |
|
||||
|
|
||||
.w3l-mockup-form .social-icons ul li a.twitter span { |
|
||||
color: #1da1f2; |
|
||||
} |
|
||||
|
|
||||
.w3l-mockup-form .social-icons ul li a.pinterest span { |
|
||||
color: #e60023; |
|
||||
} |
|
||||
|
|
||||
|
|
||||
.copyright p { |
|
||||
text-align: center; |
|
||||
font-size: 17px; |
|
||||
line-height: 26px; |
|
||||
color: #607863; |
|
||||
opacity: 1; |
|
||||
} |
|
||||
|
|
||||
p.copy-footer-29 a { |
|
||||
color: #517856; |
|
||||
} |
|
||||
|
|
||||
p.copy-footer-29 a:hover { |
|
||||
color: #00c16e; |
|
||||
transition: 0.5s ease; |
|
||||
-webkit-transition: 0.5s ease; |
|
||||
-o-transition: 0.5s ease; |
|
||||
-ms-transition: 0.5s ease; |
|
||||
-moz-transition: 0.5s ease; |
|
||||
} |
|
||||
|
|
||||
|
|
||||
/*-- responsive design --*/ |
|
||||
|
|
||||
@media (max-width:736px) { |
|
||||
.w3l-mockup-form .main-mockup { |
|
||||
flex-direction: column; |
|
||||
} |
|
||||
|
|
||||
.w3l_form { |
|
||||
order: 2; |
|
||||
padding: 50px; |
|
||||
border-radius: 0; |
|
||||
border-bottom-left-radius: 8px; |
|
||||
border-bottom-right-radius: 8px; |
|
||||
} |
|
||||
|
|
||||
.content-wthree { |
|
||||
order: 1; |
|
||||
border-radius: 0; |
|
||||
border-top-left-radius: 8px; |
|
||||
border-top-right-radius: 8px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
@media (max-width:568px) { |
|
||||
.w3l-mockup-form h1 { |
|
||||
font-size: 30px; |
|
||||
} |
|
||||
|
|
||||
.w3l-mockup-form .main-mockup { |
|
||||
margin: 30px 0; |
|
||||
} |
|
||||
|
|
||||
.content-wthree { |
|
||||
padding: 2.5em; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
@media (max-width: 415px) { |
|
||||
.w3l-mockup-form { |
|
||||
padding: 40px 30px; |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
|
|
||||
@media (max-width:384px) { |
|
||||
.w3l-mockup-form { |
|
||||
padding: 30px 15px; |
|
||||
} |
|
||||
|
|
||||
.content-wthree { |
|
||||
padding: 2em; |
|
||||
} |
|
||||
|
|
||||
.w3l-mockup-form h1 { |
|
||||
font-size: 28px; |
|
||||
} |
|
||||
|
|
||||
.w3l-mockup-form h2 { |
|
||||
font-size: 22px; |
|
||||
line-height: 32px; |
|
||||
} |
|
||||
|
|
||||
.copyright p { |
|
||||
font-size: 16px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
/*-- //responsive design --*/ |
|
||||
/*-- //form styling --*/ |
|
||||
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 434 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 8.6 KiB |
File diff suppressed because one or more lines are too long
@ -1,17 +1,18 @@ |
|||||
D:\1XYX\demo\hapi-demo\source\route\api对应路径： |
D:\1XYX\demo\hapi-demo\source\route\api对应路径： |
||||
不需权限 ： GET /api/v1/upload |
不需权限 ： GET /api/{path*} |
||||
不需权限 ： POST /api/v1/upload/upload |
需要权限 ： GET /api/v1/upload |
||||
|
需要权限 ： POST /api/v1/upload/upload |
||||
不需权限 ： POST /api/v1/user/register |
不需权限 ： POST /api/v1/user/register |
||||
不需权限 ： POST /api/v1/user/logout |
需要权限 ： POST /api/v1/user/logout |
||||
不需权限 ： POST /api/v1/user/login |
不需权限 ： POST /api/v1/user/login |
||||
需要权限 ： DELETE /api/v1/user/del |
需要权限 ： DELETE /api/v1/user/del |
||||
不需权限 ： GET /api/v1/user/userinfo |
需要权限 ： GET /api/v1/user/userinfo |
||||
D:\1XYX\demo\hapi-demo\source\route\views对应路径： |
D:\1XYX\demo\hapi-demo\source\route\views对应路径： |
||||
不需权限 ： GET /404 |
不需权限 ： GET /404 |
||||
不需权限 ： GET /css |
不需权限 ： GET /css |
||||
不需权限(提供无需验证)： GET / |
不需权限(提供无需验证)： GET / |
||||
不需权限 ： GET /about |
不需权限 ： GET /about |
||||
需要权限 ： GET /docs/{path*} |
不需权限 ： GET /docs/{path*} |
||||
不需权限 ： GET /{path*} |
不需权限 ： GET /{path*} |
||||
不需权限(提供无需验证)： GET /login |
不需权限(提供无需验证)： GET /login |
||||
不需权限 ： POST /login |
不需权限 ： POST /login |
||||
|
|||||
@ -0,0 +1,13 @@ |
|||||
|
import { Req, Res, ReturnValue } from "#/global"; |
||||
|
import { auth, route } from "@noderun/hapi-router"; |
||||
|
|
||||
|
export default class { |
||||
|
@route("/{path*}") |
||||
|
@auth(false) |
||||
|
async any(req: Req, h: Res): ReturnValue { |
||||
|
return { |
||||
|
code: 404, |
||||
|
data: null, |
||||
|
}; |
||||
|
} |
||||
|
} |
||||
@ -1,118 +0,0 @@ |
|||||
<!-- |
|
||||
Author: W3layouts |
|
||||
Author URL: http://w3layouts.com |
|
||||
--> |
|
||||
<!DOCTYPE html> |
|
||||
<html lang="zxx"> |
|
||||
<head> |
|
||||
<title>Well Subscribe form Responsive Widget Template : W3layouts</title> |
|
||||
<!-- Meta tag Keywords --> |
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" /> |
|
||||
<meta charset="UTF-8" /> |
|
||||
<meta |
|
||||
name="keywords" |
|
||||
content="Well Subscribe form Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" |
|
||||
/> |
|
||||
<!-- //Meta tag Keywords --> |
|
||||
|
|
||||
<link |
|
||||
href="//fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" |
|
||||
rel="stylesheet" |
|
||||
/> |
|
||||
|
|
||||
<!--/Style-CSS --> |
|
||||
<link rel="stylesheet" href="/public/login/css/style.css" type="text/css" media="all" /> |
|
||||
<!--//Style-CSS --> |
|
||||
|
|
||||
<script |
|
||||
src="https://kit.fontawesome.com/af562a2a63.js" |
|
||||
crossorigin="anonymous" |
|
||||
></script> |
|
||||
</head> |
|
||||
|
|
||||
<body> |
|
||||
<!-- form section start --> |
|
||||
<section class="w3l-mockup-form"> |
|
||||
<h1>天蚕 / 地缺</h1> |
|
||||
<div class="container"> |
|
||||
<!-- /form --> |
|
||||
<div class="workinghny-form-grid"> |
|
||||
<div class="main-mockup"> |
|
||||
<div class="alert-close"> |
|
||||
<span class="fa fa-close"></span> |
|
||||
</div> |
|
||||
<div class="w3l_form align-self"> |
|
||||
<div class="left_grid_info"> |
|
||||
<img src="/public/login/images/image.svg" alt="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="content-wthree"> |
|
||||
<h2>现在开始注册</h2> |
|
||||
<p> |
|
||||
lets keep in touch! Please subscribe to our newsletter and stay |
|
||||
updated |
|
||||
</p> |
|
||||
<form action="#" method="post"> |
|
||||
<input |
|
||||
type="text" |
|
||||
class="text" |
|
||||
name="text" |
|
||||
placeholder="Enter Your Name" |
|
||||
required="" |
|
||||
/> |
|
||||
<input |
|
||||
type="email" |
|
||||
class="email" |
|
||||
name="email" |
|
||||
placeholder="Enter Your Email" |
|
||||
required="" |
|
||||
/> |
|
||||
<button class="btn" type="submit">Subscribe</button> |
|
||||
</form> |
|
||||
<div class="social-icons w3layouts"> |
|
||||
<ul> |
|
||||
<li> |
|
||||
<a href="#url" class="facebook" |
|
||||
><span class="fab fa-facebook"></span> |
|
||||
</a> |
|
||||
</li> |
|
||||
<li> |
|
||||
<a href="#url" class="twitter" |
|
||||
><span class="fab fa-twitter"></span> |
|
||||
</a> |
|
||||
</li> |
|
||||
<li> |
|
||||
<a href="#url" class="pinterest" |
|
||||
><span class="fab fa-pinterest"></span> |
|
||||
</a> |
|
||||
</li> |
|
||||
</ul> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<!-- //form --> |
|
||||
</div> |
|
||||
<!-- copyright--> |
|
||||
<div class="copyright text-center"> |
|
||||
<p class="copy-footer-29"> |
|
||||
© 2020 Well Subscribe form. All rights reserved | Design by |
|
||||
<a href="https://w3layouts.com">W3layouts</a> |
|
||||
</p> |
|
||||
</div> |
|
||||
<!-- //copyright--> |
|
||||
</section> |
|
||||
<!-- //form section start --> |
|
||||
|
|
||||
<script src="/public/login/js/jquery.min.js"></script> |
|
||||
<script> |
|
||||
$(document).ready(function (c) { |
|
||||
$(".alert-close").on("click", function (c) { |
|
||||
$(".main-mockup").fadeOut("slow", function (c) { |
|
||||
$(".main-mockup").remove(); |
|
||||
}); |
|
||||
}); |
|
||||
}); |
|
||||
</script> |
|
||||
</body> |
|
||||
</html> |
|
||||
@ -0,0 +1,60 @@ |
|||||
|
extends /layout/layout |
||||
|
|
||||
|
block head |
||||
|
+css("css/page/login.css") |
||||
|
|
||||
|
block content |
||||
|
h2 Weekly Coding Challenge #1: Sign in/up Form |
||||
|
.container#container |
||||
|
.form-container.sign-up-container |
||||
|
form(action='#') |
||||
|
h1 Create Account |
||||
|
.social-container |
||||
|
a.social(href='#') |
||||
|
i.fab.fa-facebook-f |
||||
|
a.social(href='#') |
||||
|
i.fab.fa-google-plus-g |
||||
|
a.social(href='#') |
||||
|
i.fab.fa-linkedin-in |
||||
|
span or use your email for registration |
||||
|
input(type='text', placeholder='Name') |
||||
|
input(type='email', placeholder='Email') |
||||
|
input(type='password', placeholder='Password') |
||||
|
button Sign Up |
||||
|
.form-container.sign-in-container |
||||
|
form(action='#') |
||||
|
h1 Sign in |
||||
|
.social-container |
||||
|
a.social(href='#') |
||||
|
i.fab.fa-facebook-f |
||||
|
a.social(href='#') |
||||
|
i.fab.fa-google-plus-g |
||||
|
a.social(href='#') |
||||
|
i.fab.fa-linkedin-in |
||||
|
span or use your account |
||||
|
input(type='email', placeholder='Email') |
||||
|
input(type='password', placeholder='Password') |
||||
|
a(href='#') Forgot your password? |
||||
|
button Sign In |
||||
|
.overlay-container |
||||
|
.overlay |
||||
|
.overlay-panel.overlay-left |
||||
|
h1 Welcome Back! |
||||
|
p To keep connected with us please login with your personal info |
||||
|
button.ghost#signIn Sign In |
||||
|
.overlay-panel.overlay-right |
||||
|
h1 Hello, Friend! |
||||
|
p Enter your personal details and start journey with us |
||||
|
button.ghost#signUp Sign Up |
||||
|
footer |
||||
|
p |
||||
|
| Created with |
||||
|
i.fa.fa-heart |
||||
|
| by |
||||
|
a(target='_blank', href='https://florin-pop.com') Florin Pop |
||||
|
| - Read how I created this and how you can join the challenge |
||||
|
a(target='_blank', href='https://www.florin-pop.com/blog/2019/03/double-slider-sign-in-up-form/') here |
||||
|
| . |
||||
|
|
||||
|
block script |
||||
|
+script("js/page/login.js") |
||||
Loading…
Reference in new issue