Updated README with project goals, started prototyping frontend and added route for primary css dist, added reasonable functionality for requesting a password directly via link as well as patching index DOM when requesting HTML stub from /pw

2022-07-03 21:48:40 -05:00
parent 7274560398
commit f1b18f3b47
10 changed files with 211 additions and 43 deletions
--- a/views/cassius/style.cassius
+++ b/views/cassius/style.cassius
@ -0,0 +1,106 @@
+@colorOne:   #222323
+@colorTwo:   #f0f6f0
+@colorThree: #6D92AD
+@colorFour:  #435F5D
+
+html
+  background-color: #{colorTwo}
+  color: 						#{colorOne}
+
+body
+  font-family: 			Courier
+  font-size:        20px
+  text-align: 			left
+
+p
+  margin: 0.4em 0 0.4em 0
+
+::placeholder
+  color: #{colorOne}
+  opacity: 1
+
+.asciiCat
+  margin:     2% 3% 0 0
+  font-size:  1.2vw
+  color:      #{colorFour}
+  text-align: center
+
+.content 
+  margin: 0 15% 0 15% 
+
+.emptyReq
+  height: 1%
+
+.mainButton
+  padding: 					0.75em 1.75em
+  background-color: #{colorThree}
+  color: 					  #{colorTwo}
+  border-style:     none
+  text-decoration:  none
+
+.mainInput
+  font-weight:				400
+  font-size: 					1em
+  width:              50%
+  outline: 						none
+  color: 							#{colorOne}
+  background: 				#{colorTwo}
+  margin: 						1em 0
+  border-style:				none none none none
+  padding: 						0.4em 0
+  box-sizing: 				border-box
+  -webkit-box-sizing: border-box
+  -moz-box-sizing: 		border-box
+  -webkit-transition: all 0.1s ease-in-out
+  -moz-transition: 		all 0.1s ease-in-out
+  -ms-transition: 		all 0.1s ease-in-out
+  -o-transition: 			all 0.1s ease-in-out
+  transition: 				all 0.1s ease-in-out
+
+.mainInput:focus
+  border-bottom: 0.2em solid #{colorThree};
+
+.mainInput:focus::placeholder
+  color:   #{colorThree}
+  opacity: 0.5
+
+.pwResult
+  font-size: 1.5em
+  color: #{colorFour}
+
+.pwUtils
+  width:  75%
+
+.shareNew
+  margin-bottom: 2em
+
+.title
+  font-size: 2em
+  color:     #{colorOne}
+  text-decoration: none
+
+.titleLink
+  all:             unset 
+  cursor:          pointer
+
+.title h1
+  margin: 0.1em 0 0.3em 0
+
+@media only screen and (max-width : 768px)
+  body
+    text-align: center
+    font-size: 16px
+
+  .asciiCat
+    display: none
+
+  .mainInput
+    width: 95% 
+    text-align: center
+
+  .title
+    margin: 8% auto
+    font-size: 3em
+
+  .pwUtils 
+    width: 100%
--- a/views/index.hamlet
+++ b/views/index.hamlet
@ -1,14 +1,58 @@
+$doctype 5
 <html>
  <head>
    <title>Purr
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/htmx.org@1.7.0" integrity="sha384-EzBXYPt0/T6gxNp0nuPtLkmRpmDBbjg6WmCUZRLXBBwYYmwAUxzlSGej0ARHX0Bo" crossorigin="anonymous">
+    <link rel="stylesheet" href="/style.css">
+
  <body>
-    <h1>Welcome to Purr!
-    <p #requestedPw>No password currently requested.
-    <p>Ask for the <input name="userLink" type="text"/> password
-    <button hx-post="/pw" 
-      hx-target="#requestedPw" 
-      hx-swap="outerHTML" 
-      hx-include="[name='userLink']"
-    />
-      Get Password!
+    <pre #asciiCat .asciiCat>
+      _._     _,-'""`-._
+      \   (,-.`._,'(       |\`-/|
+      \       `-.-' \ )-`( , o o)
+      \             `-    \`_`"'-
+    <div #content .content>
+      <div #title .title>
+        <h1>
+          <a #titleLink .titleLink href="/">Purr
+      <div #pwUtils .pwUtils>
+        <div #requestedPw .requestedPw>
+          $maybe pw <- password
+            <p>Here's the secret for /pw/#{link}:
+            <h2 .pwResult>#{pw}
+          $nothing
+            $if (link == "/")
+              <p .emptyReq>
+            $else
+              <p>No secret available at /pw/#{link}
+
+        <div #shareNew .shareNew>
+          <p>
+            <input .mainInput 
+              name="newPw" 
+              type="text" 
+              placeholder="Enter a Secret to Share"
+            />
+          <button .mainButton
+            hx-post="/newpw"
+            hx-target="#requestedPw"
+            hx-swap="outerHTML"
+            hx-include="[name='newPw']"
+          />
+            Share Secret
+
+        <div #requestNew .requestNew>
+          <p>
+            <input .mainInput 
+              name="userLink" 
+              type="text"
+              placeholder="Enter a Link to View Secret"
+            />
+          <button .mainButton
+            hx-post="/pw"
+            hx-target="#requestedPw"
+            hx-swap="outerHTML"
+            hx-include="[name='userLink']"
+          />
+            Get Secret
--- a/views/pw.hamlet
+++ b/views/pw.hamlet
@ -1,5 +1,6 @@
-<div #requestedPw>
+<div #requestedPw .requestedPw>
  $maybe pw <- password
-    <p>Here's the password for https://purr.eversole.co/pw/#{link}: #{pw}
+    <p>Here's the secret for /pw/#{link}:
+    <h2 .pwResult>#{pw}
  $nothing
-    <p>No password available at https://purr.eversole.co/pw/#{link}
+    <p>No secret available at /pw/#{link}