From 21693e8fe4782e032061a534b791ceeee1355645 Mon Sep 17 00:00:00 2001 From: Dzejkobik007 Date: Mon, 5 Jun 2023 23:40:28 +0200 Subject: [PATCH] Add Assets --- package.json | 4 +- public/css/style.css | 164 ++++++++++++++++++++++++++++++++++++++ public/img/add-sharp.svg | 1 + public/img/arrow-down.svg | 1 + public/script.js | 1 + 5 files changed, 169 insertions(+), 2 deletions(-) create mode 100644 public/css/style.css create mode 100644 public/img/add-sharp.svg create mode 100644 public/img/arrow-down.svg create mode 100644 public/script.js diff --git a/package.json b/package.json index 5147bf8..dd1b69d 100644 --- a/package.json +++ b/package.json @@ -9,10 +9,10 @@ "author": "Dzejkobik", "license": "", "dependencies": { + "better-sqlite3": "^8.4.0", "express": "^4.18.2", "multer": "^1.4.5-lts.1", "socket.io": "^4.6.2", - "socketio-file-upload": "^0.7.3", - "sqlite3": "^5.1.6" + "socketio-file-upload": "^0.7.3" } } diff --git a/public/css/style.css b/public/css/style.css new file mode 100644 index 0000000..0d8d9f6 --- /dev/null +++ b/public/css/style.css @@ -0,0 +1,164 @@ +html, +body { + padding: 0; + margin: 0; + border: none; +} + + +body { + background-color: #1b1b1b; + +} + +canvas { + display: block; +} + +.box__dragndrop, +.box__uploading, +.box__success, +.box__error { + display: none; +} + +.flex-container { + display: flex; + align-items: center; + justify-content: center; + height: 100vh; +} + +.container { + font-family: 'Geologica', sans-serif; + border-radius: 4px; + border-color: black; + border-width: 2px; + border-style: solid; + background-color: #f16d01; + padding: 20px; + display: flex; + text-align: center; +} + +.vertical { + flex-direction: column; + justify-content: center; + align-items: center; +} + +.list { + margin-top: 30px; +} + +.filelist { + display: flex; + flex-direction: column; + row-gap: 0; +} +.filelist p { + color:#FFFFFF; +} + +.list p { + color:#FFFFFF; +} + +#select { + flex-direction: column; +} + +.button { + display: inline-block; + border-radius: 4px; + background-color: #e42200; + border: none; + color: #FFFFFF; + text-align: center; + font-size: 28px; + padding: 20px; + width: 200px; + transition: all 0.5s; + cursor: pointer; + margin: 5px; +} + +.button span { + cursor: pointer; + display: inline-block; + position: relative; + transition: 0.5s; +} + +.button span:after { + content: '\00bb'; + position: absolute; + opacity: 0; + top: 0; + right: -20px; + transition: 0.5s; +} + +.button:hover span { + padding-right: 25px; +} + +.button:hover span:after { + opacity: 1; + right: 0; +} + +.card-button-box { + display: flex; + justify-content: center; + gap: 50px; +} + +.card-button { + background-color: rgba(88, 88, 88, 0.2); + text-align: center; + padding: 5px; + width: 200px; + border-radius: 15px; + box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); + transition: 0.3s; +} + +.card-button:hover { + transform: scale(1.02); + box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); +} + +.card-button p { + position: absolute; + color:#FFFFFF; + font-size: x-large; +} + +.dropZoneContainer { + display: grid; + margin-left: 100px; + margin-right: 100px; + width: 100%; + height: 100px; +} + +.dropZoneOverlay, .FileUpload { + height: 100%; + width: 100%; + grid-column: 1; + grid-row: 1; +} + +.dropZoneOverlay { + margin-top: -3px; + margin-left: -3px; + border: dotted 3px; + font-size: 110%; + color: #FFFFFF; + text-align: center; + vertical-align: middle; +} +.FileUpload { + opacity: 0; +} \ No newline at end of file diff --git a/public/img/add-sharp.svg b/public/img/add-sharp.svg new file mode 100644 index 0000000..d4e12e4 --- /dev/null +++ b/public/img/add-sharp.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/arrow-down.svg b/public/img/arrow-down.svg new file mode 100644 index 0000000..f6027be --- /dev/null +++ b/public/img/arrow-down.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/script.js b/public/script.js new file mode 100644 index 0000000..49a69a0 --- /dev/null +++ b/public/script.js @@ -0,0 +1 @@ +// script.js