signup page and link creation, reformatting of css.

webserver.lisp

@@ -8,14 +8,17 @@
   (tbnl:stop *server*))
 
 (defparameter *css*
-  "body {
+  "
+body {
 background: #f0f2f5;
 font-family: monospace;
 }
+
 .nav-wrapper {
 background-color: blue;
 padding: 15px;
 }
+
 .form-wrapper {
 position: relative;
 top: 55px;
@@ -25,6 +28,7 @@
 border-radius: 5px;
 box-shadow: 8px 8px 8px lightgrey;
 }
+
 .username {
 position: relative;
 display: flex;
@@ -36,6 +40,7 @@
 font-size: 1.2rem;
 width: 95%;
 }
+
 .password {
 position: relative;
 display: flex;
@@ -47,6 +52,7 @@
 font-size: 1.25rem;
 width: 95%;
 }
+
 .nav-wrapper a {
 margin-left: 15px;
 margin-right: 15px;
@@ -54,25 +60,77 @@
 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"))))))