signup page and link creation, reformatting of css.
This commit is contained in:
sweatshirt0
parent
bd9555ee98
commit
76829e5b63
215
webserver.lisp
215
webserver.lisp
@ -8,71 +8,129 @@
|
|||||||
(tbnl:stop *server*))
|
(tbnl:stop *server*))
|
||||||
|
|
||||||
(defparameter *css*
|
(defparameter *css*
|
||||||
"body {
|
"
|
||||||
background: #f0f2f5;
|
body {
|
||||||
font-family: monospace;
|
background: #f0f2f5;
|
||||||
}
|
font-family: monospace;
|
||||||
.nav-wrapper {
|
|
||||||
background-color: blue;
|
|
||||||
padding: 15px;
|
|
||||||
}
|
|
||||||
.form-wrapper {
|
|
||||||
position: relative;
|
|
||||||
top: 55px;
|
|
||||||
padding: 15px 10px;
|
|
||||||
background-color: #fff;
|
|
||||||
width: 400px;
|
|
||||||
border-radius: 5px;
|
|
||||||
box-shadow: 8px 8px 8px lightgrey;
|
|
||||||
}
|
|
||||||
.username {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
border: 1px solid lightgrey;
|
|
||||||
border-radius: 5px;
|
|
||||||
padding: 15px;
|
|
||||||
font-size: 1.2rem;
|
|
||||||
width: 95%;
|
|
||||||
}
|
|
||||||
.password {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
border: 1px solid lightgrey;
|
|
||||||
border-radius: 5px;
|
|
||||||
padding: 15px;
|
|
||||||
font-size: 1.25rem;
|
|
||||||
width: 95%;
|
|
||||||
}
|
}
|
||||||
.nav-wrapper a {
|
|
||||||
margin-left: 15px;
|
.nav-wrapper {
|
||||||
margin-right: 15px;
|
background-color: blue;
|
||||||
text-decoration: none;
|
padding: 15px;
|
||||||
font-size: 1rem;
|
}
|
||||||
color: #fff;
|
|
||||||
}
|
.form-wrapper {
|
||||||
.nav-wrapper a:hover {
|
position: relative;
|
||||||
cursor: pointer;
|
top: 55px;
|
||||||
text-decoration: underline;
|
padding: 15px 10px;
|
||||||
}
|
background-color: #fff;
|
||||||
.title-wrapper {
|
width: 400px;
|
||||||
display: flex;
|
border-radius: 5px;
|
||||||
justify-content: center;
|
box-shadow: 8px 8px 8px lightgrey;
|
||||||
}
|
}
|
||||||
.content {
|
|
||||||
font-size: 1.1rem;
|
.username {
|
||||||
}
|
position: relative;
|
||||||
.contact-content-subtitle {
|
display: flex;
|
||||||
font-size: 1.1rem;
|
margin-left: auto;
|
||||||
}
|
margin-right: auto;
|
||||||
.contact-content-irc {
|
border: 1px solid lightgrey;
|
||||||
font-size: 1.1rem;
|
border-radius: 5px;
|
||||||
}
|
padding: 15px;
|
||||||
.contact-content-xmpp {
|
font-size: 1.2rem;
|
||||||
font-size: 1.1rem;
|
width: 95%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.password {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
border: 1px solid lightgrey;
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 15px;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
width: 95%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-wrapper a {
|
||||||
|
margin-left: 15px;
|
||||||
|
margin-right: 15px;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 1rem;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-wrapper a:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-wrapper {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-content-subtitle {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-content-irc {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-content-xmpp {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-button {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
width: 90%;
|
||||||
|
padding: 12px;
|
||||||
|
background-color: blue;
|
||||||
|
color: #fff;
|
||||||
|
border: 1px solid lightgrey;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: 1.0rem;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-button:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
box-shadow: 8px 8px 8px lightgrey;
|
||||||
|
}
|
||||||
|
|
||||||
|
.signup-button {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
background-color: #4af626;
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.signup-link {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 12px;
|
||||||
|
width: 100%;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: bold;
|
||||||
|
color: black;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.signup-button:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
box-shadow: 8px 8px 8px lightgrey;
|
||||||
}")
|
}")
|
||||||
|
|
||||||
(tbnl:define-easy-handler (main :uri "/")
|
(tbnl:define-easy-handler (main :uri "/")
|
||||||
@ -98,7 +156,13 @@
|
|||||||
(:form :class "login" :action "/members" :method "POST"
|
(:form :class "login" :action "/members" :method "POST"
|
||||||
(:input :type "text" :class "username" :name "username" :placeholder "Username")
|
(:input :type "text" :class "username" :name "username" :placeholder "Username")
|
||||||
(:br)(:br)
|
(:br)(:br)
|
||||||
(:input :type "password" :class "password" :name "password" :placeholder "Password"))))))))
|
(:input :type "password" :class "password" :name "password" :placeholder "Password")
|
||||||
|
(:br) (:br)
|
||||||
|
(:input :type "submit" :class "login-button" :value "login")
|
||||||
|
(:br) (:br)
|
||||||
|
(:button :class "signup-button"
|
||||||
|
(:a :class "signup-link" :href "/signup"
|
||||||
|
"Sign up")))))))))
|
||||||
|
|
||||||
(tbnl:define-easy-handler (about :uri "/about")
|
(tbnl:define-easy-handler (about :uri "/about")
|
||||||
()
|
()
|
||||||
@ -121,7 +185,7 @@
|
|||||||
(:h1 "About this site"))
|
(:h1 "About this site"))
|
||||||
(:div :class "content-wrapper"
|
(:div :class "content-wrapper"
|
||||||
(:p :class "content"
|
(:p :class "content"
|
||||||
"I am an intermediate programmer who is new-ish to common assoc.lisp
|
"I am an intermediate programmer who is new-ish to common lisp
|
||||||
and am loving it so far! So much so that I have decided to practice
|
and am loving it so far! So much so that I have decided to practice
|
||||||
making a webserver; though i usually do this with node js, handling
|
making a webserver; though i usually do this with node js, handling
|
||||||
request with response, i decided to do the same with common lisp!
|
request with response, i decided to do the same with common lisp!
|
||||||
@ -154,3 +218,22 @@
|
|||||||
"XMPP")
|
"XMPP")
|
||||||
(:p :class "contact-content-xmpp"
|
(:p :class "contact-content-xmpp"
|
||||||
"sweatshirt@xmpp.jp"))))))
|
"sweatshirt@xmpp.jp"))))))
|
||||||
|
|
||||||
|
(tbnl:define-easy-handler (signup :uri "/signup")
|
||||||
|
()
|
||||||
|
(spinneret:with-html-string
|
||||||
|
(:head
|
||||||
|
(:style
|
||||||
|
*css*))
|
||||||
|
(:body
|
||||||
|
(:div :class "whole-wrapper"
|
||||||
|
(:div :class "nav-wrapper"
|
||||||
|
(:a :class "home-link" :href "/"
|
||||||
|
"Home")
|
||||||
|
(:a :class "about-link" :href "/about"
|
||||||
|
"About")
|
||||||
|
(:a :class "contact-link" :href "/contact"
|
||||||
|
"Contact"))
|
||||||
|
(:div :class "signup-content-wrapper"
|
||||||
|
(:h1 :class "signup-content-title"
|
||||||
|
"Sign Up"))))))
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user