From 3e1bf443ea3464a8c70eb816fd3a5d98788ab5b7 Mon Sep 17 00:00:00 2001
From: Aljaz S <me@aljaxus.eu>
Date: Tue, 23 Nov 2021 18:10:25 +0100
Subject: [PATCH] make backend serve static content

remove style template and use static style.css file
---
 src/index.js                                 |  2 ++
 src/{template/style.ejs => public/style.css} | 36 ++++++++++++++------
 src/views/form.ejs                           |  5 ++-
 src/views/index.ejs                          |  2 +-
 4 files changed, 30 insertions(+), 15 deletions(-)
 rename src/{template/style.ejs => public/style.css} (77%)

diff --git a/src/index.js b/src/index.js
index 5c0f269..3bfa230 100644
--- a/src/index.js
+++ b/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')
 
diff --git a/src/template/style.ejs b/src/public/style.css
similarity index 77%
rename from src/template/style.ejs
rename to src/public/style.css
index a627516..8a6c6a7 100644
--- a/src/template/style.ejs
+++ b/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);
 }
@@ -104,5 +119,4 @@ button:active {
     border: none;
     box-shadow: none;
     margin: 4px 0 0 4px;
-}
-</style>
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/views/form.ejs b/src/views/form.ejs
index f2f2307..a0fa635 100644
--- a/src/views/form.ejs
+++ b/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 = [
diff --git a/src/views/index.ejs b/src/views/index.ejs
index 35f9cc3..ad4980b 100644
--- a/src/views/index.ejs
+++ b/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;