feat: slightly modularized frontend

pull/243/head
Josh Moore 1 year ago
parent 263ab28a13
commit 37c5836ec6

@ -12,4 +12,13 @@ html.dark.sl-theme-dark(lang='en')
include ../node_modules/shoelace-pug-loader/loader.pug
+slTheme('dark')
+slAuto
block content
body.w-screen.h-screen.flex.flex-col
//- Header
.w-full.border-b.border-stone-500.flex.justify-center.items-center.py-3
h1.text-4xl.font-bold.font-mono: block section
span [section]
//- Centering width-fixer
.w-full.flex.justify-center
.w-full.md_max-w-xl.px-4.pt-16: block content

@ -1 +1,5 @@
h1 this is the index
extends _base_
block section
span ass
block content
h1.text-3xl Welcome to ass, a ShareX server.

@ -1,67 +1,60 @@
extends _base_
block title
title ass setup 🍑
block section
span ass setup
block content
body.w-screen.h-screen.flex.flex-col
//- Header
.w-full.border-b.border-stone-500.flex.justify-center.items-center.py-3
h1.text-4xl.font-bold.font-mono ass setup
//- Centering width-fixer
.w-full.flex.justify-center: .w-full.md_max-w-xl.px-4.pt-16
//- Setup panel
.flex.flex-col.items-center
p.text-lg.mb-4 Welcome to ass, your new personal file upload server!
//- * Base config
h2.setup-text-section-header.mt-12 Upload configuration
.setup-panel
h3.setup-text-item-title Uploads directory
sl-input#uploads-dir(type='text' placeholder='/opt/ass/uploads' clearable): sl-icon(slot='prefix' name='fas-folders' library='fa')
h3.setup-text-item-title ID type
sl-input#uploads-idtype(type='text' placeholder='random'): sl-icon(slot='prefix' name='fas-input-text' library='fa')
h3.setup-text-item-title ID size
sl-input#uploads-idsize(type='number' placeholder='8'): sl-icon(slot='prefix' name='fas-hashtag' library='fa')
h3.setup-text-item-title Gfycat size
sl-input#uploads-gfysize(type='number' placeholder='3'): sl-icon(slot='prefix' name='fas-cat' library='fa')
h3.setup-text-item-title Maximum file size (MB)
sl-input#uploads-filesize(type='number' placeholder='50'): sl-icon(slot='prefix' name='fas-file' library='fa')
//- * Admin User
h2.setup-text-section-header.mt-4 Admin User
.setup-panel
h3.setup-text-item-title Username
sl-input#user-username(type='text' placeholder='admin' clearable): sl-icon(slot='prefix' name='fas-user' library='fa')
h3.setup-text-item-title Password
sl-input#user-password(type='password' placeholder='the-most-secure' clearable): sl-icon(slot='prefix' name='fas-lock' library='fa')
//- * S3
h2.setup-text-section-header.mt-4 S3 #[span.setup-text-optional optional]
.setup-panel
h3.setup-text-item-title Endpoint
sl-input#s3-endpoint(type='text' placeholder='https://s3.example.com' clearable): sl-icon(slot='prefix' name='fas-server' library='fa')
h3.setup-text-item-title Bucket
sl-input#s3-bucket(type='text' placeholder='ass-bucket' clearable): sl-icon(slot='prefix' name='fas-bucket' library='fa')
h3.setup-text-item-title Access key
sl-input#s3-accessKey(type='text' placeholder='ABCD1234' clearable): sl-icon(slot='prefix' name='fas-key-skeleton' library='fa')
h3.setup-text-item-title Secret key
sl-input#s3-secretKey(type='password' placeholder='EF56GH78IJ90KL12' clearable): sl-icon(slot='prefix' name='fas-user-secret' library='fa')
h3.setup-text-item-title Region #[span.setup-text-optional optional]
sl-input#s3-region(type='text' placeholder='us-east' clearable): sl-icon(slot='prefix' name='fas-map-location-dot' library='fa')
//- * MySQL
h2.setup-text-section-header.mt-4 MySQL #[span.setup-text-optional optional]
.setup-panel
h3.setup-text-item-title Host
sl-input#mysql-host(type='text' placeholder='mysql.example.com' clearable): sl-icon(slot='prefix' name='fas-server' library='fa')
h3.setup-text-item-title User
sl-input#mysql-user(type='text' placeholder='myassql' clearable): sl-icon(slot='prefix' name='fas-user' library='fa')
h3.setup-text-item-title Password
sl-input#mysql-password(type='password' placeholder='super-secure' clearable): sl-icon(slot='prefix' name='fas-lock' library='fa')
h3.setup-text-item-title Database
sl-input#mysql-database(type='text' placeholder='assdb' clearable): sl-icon(slot='prefix' name='fas-database' library='fa')
sl-button.w-32.mt-2.self-center#submit(type='primary' submit) Submit
script(src='/setup/ui.js')
//- Setup panel
.flex.flex-col.items-center
p.text-lg.mb-4 Welcome to ass, your new personal file upload server!
//- * Base config
h2.setup-text-section-header.mt-12 Upload configuration
.setup-panel
h3.setup-text-item-title Uploads directory
sl-input#uploads-dir(type='text' placeholder='/opt/ass/uploads' clearable): sl-icon(slot='prefix' name='fas-folders' library='fa')
h3.setup-text-item-title ID type
sl-input#uploads-idtype(type='text' placeholder='random'): sl-icon(slot='prefix' name='fas-input-text' library='fa')
h3.setup-text-item-title ID size
sl-input#uploads-idsize(type='number' placeholder='8'): sl-icon(slot='prefix' name='fas-hashtag' library='fa')
h3.setup-text-item-title Gfycat size
sl-input#uploads-gfysize(type='number' placeholder='3'): sl-icon(slot='prefix' name='fas-cat' library='fa')
h3.setup-text-item-title Maximum file size (MB)
sl-input#uploads-filesize(type='number' placeholder='50'): sl-icon(slot='prefix' name='fas-file' library='fa')
//- * Admin User
h2.setup-text-section-header.mt-4 Admin User
.setup-panel
h3.setup-text-item-title Username
sl-input#user-username(type='text' placeholder='admin' clearable): sl-icon(slot='prefix' name='fas-user' library='fa')
h3.setup-text-item-title Password
sl-input#user-password(type='password' placeholder='the-most-secure' clearable): sl-icon(slot='prefix' name='fas-lock' library='fa')
//- * S3
h2.setup-text-section-header.mt-4 S3 #[span.setup-text-optional optional]
.setup-panel
h3.setup-text-item-title Endpoint
sl-input#s3-endpoint(type='text' placeholder='https://s3.example.com' clearable): sl-icon(slot='prefix' name='fas-server' library='fa')
h3.setup-text-item-title Bucket
sl-input#s3-bucket(type='text' placeholder='ass-bucket' clearable): sl-icon(slot='prefix' name='fas-bucket' library='fa')
h3.setup-text-item-title Access key
sl-input#s3-accessKey(type='text' placeholder='ABCD1234' clearable): sl-icon(slot='prefix' name='fas-key-skeleton' library='fa')
h3.setup-text-item-title Secret key
sl-input#s3-secretKey(type='password' placeholder='EF56GH78IJ90KL12' clearable): sl-icon(slot='prefix' name='fas-user-secret' library='fa')
h3.setup-text-item-title Region #[span.setup-text-optional optional]
sl-input#s3-region(type='text' placeholder='us-east' clearable): sl-icon(slot='prefix' name='fas-map-location-dot' library='fa')
//- * MySQL
h2.setup-text-section-header.mt-4 MySQL #[span.setup-text-optional optional]
.setup-panel
h3.setup-text-item-title Host
sl-input#mysql-host(type='text' placeholder='mysql.example.com' clearable): sl-icon(slot='prefix' name='fas-server' library='fa')
h3.setup-text-item-title User
sl-input#mysql-user(type='text' placeholder='myassql' clearable): sl-icon(slot='prefix' name='fas-user' library='fa')
h3.setup-text-item-title Password
sl-input#mysql-password(type='password' placeholder='super-secure' clearable): sl-icon(slot='prefix' name='fas-lock' library='fa')
h3.setup-text-item-title Database
sl-input#mysql-database(type='text' placeholder='assdb' clearable): sl-icon(slot='prefix' name='fas-database' library='fa')
sl-button.w-32.mt-2.self-center#submit(type='primary' submit) Submit
script(src='/setup/ui.js')
Loading…
Cancel
Save