make backend serve static content

remove style template and use static style.css file

src/index.js

@@ -9,6 +9,8 @@ const app = express()
 const __dirname = dirname(fileURLToPath(import.meta.url))
 
 app.use(cors())
+app.use('/public', express.static('public'))
+
 app.set('views', path.join(__dirname, 'views'))
 app.set('view engine', 'ejs')
 

src/public/style.css

@@ -1,14 +1,28 @@
-<style>
 body,
 html {
     margin: 0;
     padding: 0;
     max-width: 100vw;
     overflow-x: hidden;
-    --c-dark: #202124;
-    --c-darkish: #303134;
-    --c-primary: #e8eaed;
-    --c-accent: #C58AF9;
+    --c-dark-val: 32, 33, 36;
+    --c-darkish-val: 48, 49, 52;
+    --c-primary-val: 232, 234, 237;
+    --c-accent-val: 197, 138, 249;
+
+    --c-dark: rgb(var(--c-dark-val));
+    --c-darkish: rgb(var(--c-darkish-val));
+    --c-primary: rgb(var(--c-primary-val));
+    --c-accent: rgb(var(--c-accent-val));
+
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+::-moz-selection,
+::selection {
+    background: rgba(var(--c-accent-val), .5);
 }
 
 html {
@@ -52,19 +66,20 @@ pre {
     overflow-x: scroll;
 }
 input {
-    background-color: var(--c-darkish);
+    background-color: var(--c-dark);
     border-color: var(--c-dark);
     color: var(--c-primary);
     padding: 8px 8px 6px 10px;
     border-radius: 4px;
     font-family: monospace;
+    outline: none;
 }
 input:read-only {
     cursor: default;
-    background-color: var(--c-dark);
+    background-color: var(--c-darkish);
 }
-input:focus,
-input:focus-visible {
+input:focus:not(:readonly),
+input:focus-visible:not(:readonly) {
     border-color: transparent;
     outline: solid 1px var(--c-accent);
 }
@@ -105,4 +120,3 @@ button:active {
     box-shadow: none;
     margin: 4px 0 0 4px;
 }
-</style>

src/views/form.ejs

@@ -5,8 +5,8 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>UPN-QR :: FORM</title>
+    <link rel="stylesheet" href="/public/style.css">
 </head>
-<%- include('../template/style.ejs') -%>
 <style>
 
 div {
@@ -53,8 +53,7 @@ div {
             <h1>Form: <%= q["title"] %></h1>
             <span>Create your form here: <a href="/#maker">/#maker</a></span>
         </div>
-        <div class="code" id="qrcode">
-        </div>
+        <div class="code" id="qrcode"></div>
         <div class="form">
             <%
             const items = [

src/views/index.ejs

@@ -5,8 +5,8 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>UPN-QR | Open generator for UPN QR codes</title>
+    <link rel="stylesheet" href="/public/style.css">
 </head>
-<%- include('../template/style.ejs') -%>
 <style>
 section div {
     padding-left: 25px;