Completely overhaul frontend styling for clearer usage. Add support for entering either the full link or just link key for viewing secrets without opening links anew.
This commit is contained in:
@ -4,18 +4,23 @@
|
||||
@colorFour: #435F5D
|
||||
|
||||
html
|
||||
font-family: Courier
|
||||
font-family: Monospace
|
||||
background-color: #{colorTwo}
|
||||
color: #{colorOne}
|
||||
|
||||
body
|
||||
margin: 3% 10% 0 10%
|
||||
font-size: 20px
|
||||
text-align: left
|
||||
margin: 1% auto
|
||||
font-size: 20px
|
||||
font-weight: 150
|
||||
text-align: left
|
||||
|
||||
header
|
||||
margin: 0 8% 0 0
|
||||
text-align: right
|
||||
|
||||
a
|
||||
text-decoration: none
|
||||
|
||||
h2
|
||||
font-family: monaco, Consolas, monospace
|
||||
text-transform: uppercase
|
||||
@ -29,14 +34,20 @@ p
|
||||
a
|
||||
color: #{colorThree}
|
||||
|
||||
.main
|
||||
margin: 1em auto
|
||||
max-width: 50%
|
||||
|
||||
.title
|
||||
margin: 0 auto 0 auto
|
||||
font-size: 2em
|
||||
color: #{colorThree}
|
||||
text-align: center
|
||||
font-size: 2em
|
||||
margin: 0 auto 0 auto
|
||||
color: #{colorThree}
|
||||
|
||||
.titleLink
|
||||
all: unset
|
||||
cursor: pointer
|
||||
font-size: unset
|
||||
cursor: pointer
|
||||
font-weight: 100
|
||||
|
||||
.title h1
|
||||
margin: 0.1em 0 0.1em 0
|
||||
@ -49,19 +60,22 @@ a
|
||||
opacity: 1
|
||||
|
||||
.generators
|
||||
margin: 0 0 0.5em 0
|
||||
padding: 1em 0.5em 0.5em 1.5em
|
||||
background-color: #{colorTwo}
|
||||
box-shadow: 8px 8px 12px #ccc
|
||||
|
||||
.generators .numberInput
|
||||
background-color: #{colorTwo}
|
||||
|
||||
.generatorRadio
|
||||
margin: 0
|
||||
|
||||
|
||||
.logo
|
||||
margin: 4% 3% 0 0
|
||||
font-size: 1.2vw
|
||||
color: #{colorFour}
|
||||
text-align: center
|
||||
|
||||
.content
|
||||
display: flex
|
||||
|
||||
.column
|
||||
flex: 50%
|
||||
margin: 4% 3% 0 0
|
||||
font-size: 1.2vw
|
||||
color: #{colorFour}
|
||||
text-align: center
|
||||
|
||||
.emptyReq
|
||||
height: 1%
|
||||
@ -103,7 +117,7 @@ a
|
||||
transition: all 0.1s ease-in-out
|
||||
|
||||
.mainInput:focus
|
||||
border-bottom: 0.2em solid #{colorThree};
|
||||
border-bottom: 0.2em solid #{colorThree}
|
||||
|
||||
.mainInput:focus::placeholder
|
||||
color: #{colorThree}
|
||||
@ -130,7 +144,7 @@ a
|
||||
transition: all 0.1s ease-in-out
|
||||
|
||||
.numberInput:focus
|
||||
border-bottom: 0.2em solid #{colorThree};
|
||||
border-bottom: 0.2em solid #{colorThree}
|
||||
|
||||
.numberInput:focus::placeholder
|
||||
color: #{colorThree}
|
||||
@ -142,33 +156,108 @@ a
|
||||
.genResult
|
||||
color: #{colorFour}
|
||||
|
||||
.requestedPw
|
||||
text-align: center
|
||||
background-color: #333
|
||||
color: #f0f6f0
|
||||
margin: 1.5em 0 2em 0
|
||||
padding: 0.5em 0.5em 0.5em 1.5em
|
||||
box-shadow: 8px 8px 12px #ccc
|
||||
|
||||
.pwResult
|
||||
margin: 0 0 1em 0
|
||||
font-size: 1.5em
|
||||
color: #{colorFour}
|
||||
color: #f0f6f0
|
||||
|
||||
.shareNew
|
||||
margin-bottom: 2em
|
||||
padding: 0.5em 0.5em 0.5em 1.5em
|
||||
background-color: #{colorTwo}
|
||||
box-shadow: 8px 8px 12px #ccc
|
||||
margin: 1em 0 2em 0
|
||||
|
||||
.shareNew .mainInput
|
||||
background-color: #{colorTwo}
|
||||
|
||||
.shareNew .numberInput
|
||||
background-color: #{colorTwo}
|
||||
|
||||
.requestNew
|
||||
margin-top: 1em
|
||||
padding: 0.5em 0.5em 0.5em 1.5em
|
||||
background-color: #{colorTwo}
|
||||
box-shadow: 8px 8px 12px #ccc
|
||||
margin-bottom: 2em
|
||||
margin-top: 1em
|
||||
|
||||
.requestedPw
|
||||
max-width: 85%
|
||||
.requestNew .mainInput
|
||||
background-color: #{colorTwo}
|
||||
|
||||
.resLink
|
||||
font-size: 0.75em
|
||||
font-size: 0.8em
|
||||
|
||||
.validForm
|
||||
margin: 0.5em 0 0 0
|
||||
margin: 0
|
||||
|
||||
.radioLabel
|
||||
display: flex
|
||||
align-items: center
|
||||
border-radius: 100px
|
||||
margin: 0.3em 0
|
||||
padding: 0.3em 0.5em
|
||||
cursor: pointer
|
||||
transition: .3s
|
||||
|
||||
.radioLabel:hover, .radioLabel:focus-within
|
||||
background: hsla(0, 0%, 80%, .14)
|
||||
|
||||
.radioInput
|
||||
position: fixed
|
||||
left: 0
|
||||
top: 0
|
||||
width: 1px
|
||||
height: 1px
|
||||
opacity: 0
|
||||
z-index: -1
|
||||
|
||||
.radioDesign
|
||||
width: 22px
|
||||
height: 22px
|
||||
border-radius: 100px
|
||||
background: linear-gradient(to right bottom, #fff, #{colorThree})
|
||||
position: relative
|
||||
|
||||
.radioDesign::before
|
||||
content: ''
|
||||
display: inline-block
|
||||
width: inherit
|
||||
height: inherit
|
||||
border-radius: inherit
|
||||
background: hsl(0, 0%, 90%)
|
||||
transform: scale(1.1)
|
||||
transition: .3s
|
||||
|
||||
.radioInput:checked+.radioDesign::before
|
||||
transform: scale(0)
|
||||
|
||||
.radioText
|
||||
margin-left: 14px
|
||||
letter-spacing: 3px
|
||||
transition: .3s
|
||||
|
||||
.radioInput:checked~.radioText
|
||||
color: hsl(0, 0%, 40%)
|
||||
|
||||
.hidden
|
||||
display: none
|
||||
|
||||
@media only screen and (max-width : 768px)
|
||||
body
|
||||
text-align: center
|
||||
font-size: 16px
|
||||
|
||||
.content
|
||||
display: block
|
||||
.header
|
||||
margin: 0 2% 0 0
|
||||
|
||||
.main
|
||||
max-width: 90%
|
||||
|
||||
.mainButton
|
||||
width: 80%
|
||||
@ -176,9 +265,6 @@ a
|
||||
.genButton
|
||||
width: 80%
|
||||
|
||||
.generators
|
||||
text-align: left
|
||||
|
||||
.mainInput
|
||||
width: 95%
|
||||
max-width: 100%
|
||||
@ -188,14 +274,17 @@ a
|
||||
width: 25%
|
||||
|
||||
.title
|
||||
margin: 4% auto 2% auto
|
||||
font-size: 3em
|
||||
margin: 4% auto 2% auto
|
||||
|
||||
.title h1
|
||||
font-size: 2.5em
|
||||
margin-bottom: 0
|
||||
|
||||
.requestedPw
|
||||
max-width: 100%
|
||||
|
||||
.pwResult
|
||||
font-size: 1.75em
|
||||
|
||||
.shareUtils
|
||||
width: 100%
|
||||
|
||||
@ -1,28 +1,20 @@
|
||||
<div #generators .column>
|
||||
<h2>Generators
|
||||
<h3>Random, Classic, XKCD
|
||||
<div #generators .generators>
|
||||
<form id="genForm">
|
||||
<div .generators">
|
||||
<input type="radio" id="gibberish" name="newSec" value="#{show genGibberish}">
|
||||
<label for="gibberish" .genResult>#{show genGibberish}
|
||||
<br />
|
||||
<input type="radio" id="oldschool" name="newSec" value="#{show genOldschool}">
|
||||
<label for="oldschool" .genResult>#{show genOldschool}
|
||||
<br />
|
||||
<input type="radio" id="xkcd" name="newSec" value="#{show genXkcd}">
|
||||
<label for="xkcd" .genResult>#{show genXkcd}
|
||||
<button .genButton
|
||||
hx-get="/gen"
|
||||
hx-target="#generators"
|
||||
hx-swap="outerHTML"
|
||||
/>
|
||||
Generate New
|
||||
<br />
|
||||
<div .generatorRadio">
|
||||
<label .radioLabel for="gibberish" .genResult>
|
||||
<input .radioInput type="radio" id="gibberish" name="newSec" value="#{show genGibberish}">
|
||||
<div .radioDesign>
|
||||
<div .radioText>#{show genGibberish}
|
||||
<label .radioLabel for="oldschool" .genResult>
|
||||
<input .radioInput type="radio" id="oldschool" name="newSec" value="#{show genOldschool}">
|
||||
<div .radioDesign>
|
||||
<div .radioText>#{show genOldschool}
|
||||
<label .radioLabel for="xkcd" .genResult>
|
||||
<input .radioInput type="radio" id="xkcd" name="newSec" value="#{show genXkcd}">
|
||||
<div .radioDesign>
|
||||
<div .radioText>#{show genXkcd}
|
||||
|
||||
<div .validForm>
|
||||
<h3>Share Generated Password
|
||||
Valid for:
|
||||
<br />
|
||||
<input .numberInput
|
||||
name="newSecDuration"
|
||||
type="number"
|
||||
@ -39,12 +31,19 @@
|
||||
value="20"
|
||||
onkeyup="if (value < 1 || value > 60) { value = 0 }"
|
||||
/> views
|
||||
<button .genButton
|
||||
<button .mainButton
|
||||
hx-post="/new"
|
||||
hx-target="#requestedPw"
|
||||
hx-swap="outerHTML"
|
||||
hx-include="[name='newSec']"
|
||||
/>
|
||||
Share Password
|
||||
share selected secret
|
||||
<img class="htmx-indicator" src="/loading.svg" />
|
||||
<button .mainButton
|
||||
hx-get="/gen"
|
||||
hx-target="#generators"
|
||||
hx-swap="outerHTML"
|
||||
/>
|
||||
regenerate
|
||||
<br />
|
||||
|
||||
|
||||
@ -11,19 +11,20 @@ $doctype 5
|
||||
|
||||
<header>
|
||||
<a href="https://git.eversole.co/purr">
|
||||
Made with ♥
|
||||
| <a href="mailto:#{email}">Contact
|
||||
made with ♥
|
||||
|
|
||||
<a href="mailto:#{email}">contact
|
||||
|
||||
<div #title .title>
|
||||
<h1>
|
||||
<a #titleLink .titleLink href="/">purr
|
||||
<div #main .main>
|
||||
|
||||
<div #content .content>
|
||||
<div #title .title>
|
||||
<h1>
|
||||
<a #titleLink .titleLink href="/">purr
|
||||
|
||||
<div #shareUtils .column>
|
||||
<h2>Sharing Tools
|
||||
|
||||
<div #shareUtils>
|
||||
$if (link == "/")
|
||||
<div #requestedPw .requestedPw>
|
||||
<div #requestedPw .hidden>
|
||||
<p .emptyReq>
|
||||
$else
|
||||
<div #requestedPw .requestedPw
|
||||
@ -35,16 +36,31 @@ $doctype 5
|
||||
>
|
||||
Loading... <img class="htmx-indicator" src="/loading.svg" />
|
||||
|
||||
<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
|
||||
<img class="htmx-indicator" src="/loading.svg" />
|
||||
|
||||
<div #shareNew .shareNew>
|
||||
<h3>Share New Secret
|
||||
<p>
|
||||
<input .mainInput
|
||||
name="newSec"
|
||||
type="text"
|
||||
placeholder="Enter a Secret to Share"
|
||||
placeholder="enter a secret to share"
|
||||
/>
|
||||
<div .validForm>
|
||||
Valid for:
|
||||
valid for:
|
||||
<br />
|
||||
<input .numberInput
|
||||
name="newSecDuration"
|
||||
@ -68,31 +84,12 @@ $doctype 5
|
||||
hx-swap="outerHTML"
|
||||
hx-include="[id='shareNew']"
|
||||
/>
|
||||
Share Secret
|
||||
share secret
|
||||
<img class="htmx-indicator" src="/loading.svg" />
|
||||
|
||||
<div #requestNew .requestNew>
|
||||
<h3>Lookup
|
||||
<p>
|
||||
<input .mainInput
|
||||
name="userLink"
|
||||
type="text"
|
||||
placeholder="Enter a Link to View Secret"
|
||||
/>
|
||||
<button .mainButton
|
||||
hx-post="/pw"
|
||||
hx-target="#requestedPw"
|
||||
<div #generators
|
||||
hx-trigger="load"
|
||||
hx-get="/gen"
|
||||
hx-target="#generators"
|
||||
hx-swap="outerHTML"
|
||||
hx-include="[name='userLink']"
|
||||
/>
|
||||
Get Secret
|
||||
<img class="htmx-indicator" src="/loading.svg" />
|
||||
|
||||
<div #generators .column>
|
||||
<h2>Generators
|
||||
<button .mainButton
|
||||
hx-get="/gen"
|
||||
hx-target="#generators"
|
||||
hx-swap="outerHTML"
|
||||
/>
|
||||
Load Generators
|
||||
>
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
<div #requestedPw .requestedPw>
|
||||
$maybe pw <- password
|
||||
<p .resLink>Here's the secret found at <a href="/pw/#{link}">/pw/#{link}</a>:
|
||||
<p .resLink>secret found at <a href="/pw/#{link}">/pw/#{link}</a>:
|
||||
<h3 .pwResult>#{pw}
|
||||
<hr />
|
||||
$nothing
|
||||
<h3 .pwResult>No secret found at <a href="/pw/#{link}">/pw/#{link}</a>
|
||||
<h3 .pwResult>no secret found at <a href="/pw/#{link}">/pw/#{link}</a>
|
||||
|
||||
Reference in New Issue
Block a user