wbrawner/twigs
1
0
Fork 0
Code Issues Pull requests 2 Projects Releases Packages 1 Wiki Activity Actions

WIP: Add static web frontend

Browse source
This commit is contained in:
William Brawner 2023-06-19 10:15:44 -06:00
parent 694743e3f2
commit fb2e04f90e
6 changed files with 190 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
web/src/main/kotlin/com/wbrawner/twigs/web/WebRoutes.kt
View file

@ -9,12 +9,12 @@ import io.ktor.server.routing.*
fun Application.webRoutes() {
routing {
static {
resources("twigs")
resources("web")
default("index.html")
}
intercept(ApplicationCallPipeline.Setup) {
if (!call.request.path().startsWith("/api") && !call.request.path().matches(Regex(".*\\.\\w+$"))) {
call.resolveResource("twigs/index.html")?.let {
call.resolveResource("web/index.html")?.let {
call.respond(it)
return@intercept finish()
}

1
web/src/main/resources/web/img/logo-color.svg Normal file
View file

@ -0,0 +1 @@
<svg height="1024" viewBox="0 0 270.93333 270.93334" width="1024" xmlns="http://www.w3.org/2000/svg"><g stroke-width=".586787" transform="matrix(1.3353892 0 0 1.3353892 -24.297326 -94.719682)"><path d="m74.206857 125.04091v11.17592 5.23648c0 17.67636 14.156819 32.18701 31.698213 32.76205v.02h5.58855 1.08205 1.47576v2.90108 10.82505 8.58703c0 7.40231 3.5483 14.37159 9.53353 18.7273 5.98522 4.35511 13.70792 5.5862 20.75111 3.30948l-3.43798-10.63435c-3.65216 1.18063-7.63409.54513-10.73703-1.71341-3.10351-2.25796-4.93251-5.85085-4.93251-9.68902v-8.58703h2.55428 4.5071 1.08145v-.0177c17.54199-.57505 31.69881-15.08569 31.69881-32.76148v-5.58855-10.82503h-5.58858-7.06137-1.08203-5.58798v.0177c-8.5307.27989-16.26044 3.85518-21.9511 9.48776-4.00892-13.08417-16.02397-22.74562-30.272914-23.21329v-.0177h-1.08143-4.50652-8.14286zm11.176529 11.17592h2.55488 4.50652c11.997434 0 21.603714 9.60688 21.603714 21.60431v5.23648h-1.47283-1.08205-4.50652c-11.997444 0-21.603714-9.60627-21.603714-21.60431zm61.448874 13.72613h4.50595 1.08203 1.47342v5.23705c0 11.99744-9.6063 21.60374-21.60373 21.60374h-4.5071-2.55428v-5.2365c0-11.99744 9.6057-21.60429 21.60371-21.60429z" fill="#1a1a1a"/><path d="m85.383386 136.21683v5.23648c0 11.99804 9.60627 21.60431 21.603714 21.60431h4.50652 1.08205 1.47283v-5.23648c0-11.99743-9.60628-21.60431-21.603714-21.60431h-4.50652z" fill="#bfff00"/></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

68
web/src/main/resources/web/img/logo-white.svg Normal file
View file

@ -0,0 +1,68 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="1024"
height="1024"
viewBox="0 0 270.93333 270.93334"
version="1.1"
id="svg8"
inkscape:version="0.92.4 (unknown)"
sodipodi:docname="White.svg">
<defs
id="defs2" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.35"
inkscape:cx="463.34737"
inkscape:cy="466.36823"
inkscape:document-units="mm"
inkscape:current-layer="g831"
showgrid="false"
units="px"
inkscape:window-width="1299"
inkscape:window-height="704"
inkscape:window-x="67"
inkscape:window-y="27"
inkscape:window-maximized="1" />
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-26.06665)">
<g
id="g831"
transform="matrix(1.3353892,0,0,1.3353892,-24.297326,-68.653032)"
style="fill:#1a1a1a">
<path
style="fill:#ffffff;stroke-width:2.9615941"
d="M 282.69922 273.10352 L 282.69922 329.50977 L 282.69922 355.93945 C 282.69922 445.15452 354.15167 518.39066 442.68555 521.29297 L 442.68555 521.39453 L 470.89062 521.39453 L 476.35352 521.39453 L 483.80078 521.39453 L 483.80078 536.03711 L 483.80078 590.67188 L 483.80078 634.01172 C 483.80078 671.37222 501.70967 706.54737 531.91797 728.53125 C 562.12621 750.5121 601.10438 756.7253 636.65234 745.23438 L 619.30078 691.5625 C 600.86782 697.52131 580.77035 694.31323 565.10938 682.91406 C 549.44552 671.51782 540.21289 653.3835 540.21289 634.01172 L 540.21289 590.67188 L 553.10547 590.67188 L 575.85352 590.67188 L 581.3125 590.67188 L 581.3125 590.58398 C 669.84938 587.68163 741.30078 514.44266 741.30078 425.23047 L 741.30078 397.02539 L 741.30078 342.38867 L 713.09375 342.38867 L 677.45312 342.38867 L 671.99219 342.38867 L 643.78906 342.38867 L 643.78906 342.47852 C 600.73342 343.89116 561.72156 361.93681 533 390.36523 C 512.76642 324.32759 452.12345 275.56547 380.20703 273.20508 L 380.20703 273.11523 L 374.75 273.11523 L 352.00391 273.11523 L 310.90625 273.11523 L 282.69922 273.10352 z M 649.25 398.78711 L 671.99219 398.78711 L 677.45312 398.78711 L 684.89062 398.78711 L 684.89062 425.21875 C 684.89062 485.77151 636.40623 534.25586 575.85352 534.25586 L 553.10547 534.25586 L 540.21289 534.25586 L 540.21289 507.82812 C 540.21289 447.27536 588.69436 398.78711 649.25 398.78711 z "
transform="matrix(0.198132,0,0,0.198132,18.19494,70.930394)"
id="path1339" />
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.3 KiB

18
web/src/main/resources/web/index.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<title>Twigs</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="app">
<div class="center">
<div class="logo"></div>
<noscript>
<p>JavaScript is required to use this app</p>
</noscript>
</div>
</div>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>

16
web/src/main/resources/web/js/index.js Normal file
View file

@ -0,0 +1,16 @@
window.onload = () => {
const container = document.getElementsByClassName('center')[0]
container.innerHTML += `
<div class="flex-full-width">
<button class="button-primary" onclick="login()">Login</button>
<button class="button-secondary" onclick="register()">Register</button>
</div>`
}
function login() {
console.log('show login form')
}
function register() {
console.log('show registration form')
}

85
web/src/main/resources/web/style.css Normal file
View file

@ -0,0 +1,85 @@
html, body {
margin: 0;
padding: 0;
font-family: "Segoe UI", "Product Sans", "Roboto", "San Francisco", sans-serif;
}
:root {
--color-accent: #004800;
--color-on-accent: #FFFFFF;
--color-on-background: #000000;
--logo: url("/img/logo-color.svg");
--background-color-primary: #ffffff;
--background-color-secondary: #bbbbbb;
}
@media all and (prefers-color-scheme: dark) {
:root {
--color-accent: #baff33;
--color-on-accent: #000000;
--color-on-background: #FFFFFF;
--logo: url("/img/logo-white.svg");
--background-color-primary: #000000;
--background-color-secondary: #333333;
}
}
body {
background-image: linear-gradient(var(--background-color-primary), var(--background-color-secondary));
height: 100vh;
width: 100vw;
}
#app {
height: 100%;
width: 100%;
}
button {
border: 1px solid var(--color-accent);
border-radius: 1rem;
cursor: pointer;
font-weight: bold;
padding: 1rem;
}
.flex-full-width {
display: flex;
flex-direction: row;
}
.button-primary {
background-color: var(--color-accent);
color: var(--color-on-accent);
}
.button-secondary {
background-color: var(--background-color-primary);
color: var(--color-accent);
}
.center {
align-items: center;
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
width: 100%;
}
.logo {
background-image: var(--logo);
background-size: contain;
height: 200px;
width: 200px;
}
@media all and (max-width: 400px) {
button {
width: 100%;
}
.flex-full-width {
flex-direction: column;
}
}