signup page and link creation, reformatting of css.

This commit is contained in:
sweatshirt0 2023-02-23 17:32:30 -05:00
parent bd9555ee98
commit 76829e5b63

View File

@ -8,71 +8,129 @@
(tbnl:stop *server*))
(defparameter *css*
"body {
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%;
"
body {
background: #f0f2f5;
font-family: monospace;
}
.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;
.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;
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 "/")
@ -98,7 +156,13 @@
(:form :class "login" :action "/members" :method "POST"
(:input :type "text" :class "username" :name "username" :placeholder "Username")
(: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")
()
@ -121,7 +185,7 @@
(:h1 "About this site"))
(:div :class "content-wrapper"
(: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
making a webserver; though i usually do this with node js, handling
request with response, i decided to do the same with common lisp!
@ -154,3 +218,22 @@
"XMPP")
(:p :class "contact-content-xmpp"
"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"))))))