Updated LICENCE

Add viewBox property
Add pdf icon
2023-06-27 23:02:19 +02:00 · 2023-06-12 11:39:23 +02:00 · 2023-06-12 11:36:01 +02:00 · 2023-06-12 10:54:42 +02:00 · 2023-06-12 10:06:52 +02:00 · 2023-06-12 10:02:02 +02:00
56 changed files with 1749 additions and 311 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,6 @@
 node_modules
-uploads/*
-database.sqlite*
+app/uploads/*
+app/tmp
+database.sqlite*
+*.bak
+package-lock.json
--- a/21
+++ b/21
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Jakub Rybníček
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/README.md
+++ b/README.md
@@ -1,5 +1,34 @@
 # Kakubovna

-A simple file sharing platform
+A "simple" file sharing platform

-# NOT FINISHED, i am doing my best
+# UNFINISHED, but working
+
+## Quick start
+### Docker
+```bash
+git clone https://github.com/Dzejkobik007/skolavdf.git
+cd Kakubovna/docker
+docker-compose up -d --build
+```
+### Manual
+```bash
+# Install required tools with your system package manager
+sudo apt install git node npm
+
+git clone https://github.com/Dzejkobik007/skolavdf.git
+cd Kakubovna/app
+npm install --production
+node app.js
+```
+
+
+## Dependencies
+
+- [express](https://github.com/expressjs/express)
+- [socket.io](https://github.com/socketio/socket.io)
+- [socketio-file-upload](https://github.com/sffc/socketio-file-upload)
+- [better-sqlite3](https://github.com/socketio/socket.io)
+- [loglevel](https://github.com/pimterry/loglevel)
+- [file-extension-list](https://github.com/dyne/file-extension-list)
+- [papirus-icon-theme](https://github.com/PapirusDevelopmentTeam/papirus-icon-theme.git)
--- a/app/app.js
+++ b/app/app.js
@@ -1,5 +1,9 @@
 port = 8000;

+var log = require('loglevel');
+
+log.setLevel(log.levels.INFO);
+
 // Require the libraries:
 var SocketIOFileUpload = require('socketio-file-upload'),
    socketio = require('socket.io'),
@@ -11,10 +15,31 @@ const app = express()
 const http = require('http');
 const server = http.createServer(app);
 const { Server } = require("socket.io");
-const { SqliteHandler, UploadObject } = require('./handlers/sqliteHandler');
-var fs = require('fs')
+const { SqliteHandler } = require('./handlers/sqliteHandler');
+const { UploadObject } = require('./handlers/uploadHandler');
+
+// Prepare directories
+var fs = require('fs');
+var path = require('path');
+
+tmp = __dirname + "/tmp/";
+uploadsdir = __dirname + "/uploads/";
+
+if (!fs.existsSync(tmp)){
+    fs.mkdirSync(tmp);
+} else {
+    for (const file of fs.readdirSync(tmp)) {
+        fs.unlinkSync(path.join(tmp, file));
+    }
+}
+
+if (!fs.existsSync(uploadsdir)){
+    fs.mkdirSync(uploadsdir);
+}
+
 const io = new Server(server);

+
 sqliteobj = new SqliteHandler("database.sqlite");
 db = sqliteobj.getDatabaseObj();

@@ -32,19 +57,38 @@ app.get('/api/download/:hash', (req, res) => {
    if(handler == undefined) {
        var handler = new UploadObject(db);
    }
-    handler.load(req.params.hash);
-    if(handler.isLoaded()){
+    if(handler.load(req.params.hash)){
        res.status(200).json({result: {
            files: handler.getFiles() 
        }, code:200})
    }
 }) 

+app.get('/download/:hash/index/:index', (req, res) => {
+    if(handler == undefined) {
+        var handler = new UploadObject(db);
+    }
+    if(handler.load(req.params.hash) && typeof parseInt(req.params.index) == 'number') {
+        res.set("Content-Disposition", "attachment; filename=\""+handler.getFiles()[req.params.index].filename+"\"")
+        res.sendFile(__dirname + "/uploads/" + handler.getHash()+"/"+handler.getFiles()[req.params.index].filename);
+    } else {
+        notFound(req, res);
+    }
+})
+
 app.get('/upload', (req, res) => {
    res.sendFile(__dirname + "/forms/upload.html");
 })

-app.get('/download/(*)', (req, res) => {
+app.get('/download', (req, res) => {
+    res.sendFile(__dirname + "/forms/download.html");
+})
+
+app.get('/download/:hash', (req, res) => {
+    res.sendFile(__dirname + "/forms/download.html");
+})
+
+app.get('/download/:hash/:adminhash', (req, res) => {
    res.sendFile(__dirname + "/forms/download.html");
 })

@@ -72,38 +116,58 @@ app.get('/download/(*)', (req, res) => {
 // var io = new socketio.Server(app.listen(port));
 io.sockets.on("connection", function(socket){
    var handler = new UploadObject(db);
-    console.log(handler);
    if(socket.handshake.url.startsWith("/socket.io")) {
        
        var uploader = new SocketIOFileUpload();
        uploader.dir = "tmp";

+
+        uploader.listen(socket);
+        var processed = 0;
+        socket.on("prepareUpload", function(num_files){
+            console.log("Got \"prepareUpload\" event");
+            console.log(num_files," Files")
+            if(handler.new(num_files)){
+                console.log("Emitting \"serverReady\" event");
+                socket.emit("serverReady");
+            }
+        }
+        )
+
        uploader.uploadValidator = function(event, callback){
            // asynchronous operations allowed here; when done,
-            if (true) {
+            if (handler.isLoaded()) {
                callback(true);
            } else {
                callback(false);
            }
        };
-        uploader.listen(socket);   
+
        uploader.on("start", function(event){
            // console.log(handler);
-            handler.new();
+
        });


        // Do something when a file is saved:
        uploader.on("saved", function(event){
-            if (event.file.success) {
-                fs.renameSync(event.file.pathName, "uploads/"+handler.getDir()+"/"+event.file.name)
-                handler.registerFile(event.file.name);
+            if (handler.isLoaded()) {
+                processed++;
+                if (event.file.success) {
+                    fs.renameSync(event.file.pathName, "uploads/"+handler.getDir()+"/"+event.file.name)
+                    handler.registerFile(event.file.name);
+                } else {
+                    fs.unlinkSync(event.file.pathName);
+                }
+                console.log("Process Counter Updated", processed);
+                console.log(handler.getNumFiles());
+                if (handler.getNumFiles() == processed && handler.getNumFiles() > 0) {
+                    socket.emit("linkCreated", handler.getHash(), handler.getAdminHash());
+                }
            }
-            console.log(event.file);
-
        });
        uploader.on("complete", function(event){
-            socket.emit("linkCreated", handler.getHash(), handler.getAdminHash());
+
        });
        // Error handler:
        uploader.on("error", function(event){
@@ -147,7 +211,7 @@ app.use(function (req, res, next) {


 server.listen(port, () => {
-    console.log('listening on *:8000');
+    log.info("Server listening on *:"+port);
 });


--- a/app/forms/download.html
+++ b/app/forms/download.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Kakubovna: Download</title>
+  <link rel="stylesheet" href="/css/style-light.css">
+  <link href="https://fonts.googleapis.com/css2?family=Geologica:wght@800&display=swap" rel="stylesheet">
+</head>
+
+<body>
+  <div class="container">
+    <div class="view-container">
+      <div class="view-nav hidden">
+        <div class="button primary">
+          <p>Download all as zip</p>
+        </div>
+        <div class="spacer"></div>
+        <div class="link-box">
+          <div class="text-link">
+            <input type="text" readonly="readonly" value="https://test.org">
+          </div>
+          <div class="button-copy" onclick="copyToClipboard(this);">
+            <svg xmlns="http://www.w3.org/2000/svg" class="copy" viewBox="0 0 512 512">
+              <rect x="128" y="128" width="336" height="336" rx="57" ry="57" fill="none" stroke="currentColor"
+                stroke-linejoin="round" stroke-width="32" />
+              <path d="M383.5 128l.5-24a56.16 56.16 0 00-56-56H112a64.19 64.19 0 00-64 64v216a56.16 56.16 0 0056 56h24"
+                fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" />
+            </svg>
+            <svg xmlns="http://www.w3.org/2000/svg" class="checkmark hidden" viewBox="0 0 512 512">
+              <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"
+                d="M416 128L192 384l-96-96" />
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="container">
+        <div class="file-view">
+          <div class="file-container"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+
+
+
+
+
+
+  <script src="/js/download.js"></script>
+  <script>
+    if (navigator.clipboard == undefined) { document.getElementsByClassName("copy")[0].outerHTML = ''; }
+
+    function test(el) {
+      el.innerHTML = "test";
+    }
+
+    var hash = "";
+    var adminHash = "";
+    handleUrl();
+    function handleUrl() {
+      console.log(document.location.pathname.split("/", 4));
+      path = document.location.pathname.split("/", 4)
+      if (path[2] !== undefined && path[2].length > 10 && path[2] === path[2].toUpperCase()) {
+        hash = path[2];
+        loadPage(hash);
+        if (path[3] !== undefined && path[3].length == 10 && path[3] === path[3].toUpperCase()) {
+          adminHash = path[3];
+          console.log("Admin is here!");
+        }
+      }
+    }
+    codeInput = document.getElementById("code");
+    statusText = document.getElementById("status");
+    function checkUpload() {
+      if (!(codeInput.value.length > 10 && codeInput.value === codeInput.value.toUpperCase())) {
+        statusText.innerHTML = 'Wrong Code';
+        return;
+      }
+
+      fetch('/api/download/' + codeInput.value)
+        .then(
+          response => response.json()
+        ).then(jsonResponse => {
+          console.log(jsonResponse);
+
+          if (jsonResponse.code == 404) {
+            statusText.innerHTML = 'Not Found';
+          } else if (jsonResponse.code == 200) {
+            statusText.innerHTML = 'Found';
+            window.location.href = document.location.protocol + "//" + document.location.host + "/download/" + codeInput.value
+          } else {
+            statusText.innerHTML = 'Error';
+          }
+        });
+    };
+  </script>
+</body>
+
+</html>
--- a/app/forms/select.html
+++ b/app/forms/select.html
@@ -12,10 +12,10 @@

 <body>
  <div class="flex-container">
-    <div id="select" class="container">
-      <div class="card-button-box">
-        <div class="card-button" onclick="window.location.href = document.URL+'upload'"><img src="/img/add-sharp-white.svg" alt="Upload"></div>
-        <div class="card-button" onclick="window.location.href = document.URL+'download'"><img src="/img/arrow-down-white.svg" alt="Download"></div>
+    <div id="select" class="container vertical">
+      <div class="card-button-box vertical">
+        <div class="card-button" onclick="window.location.href = document.URL+'upload'"><img src="/img/add-sharp-white.svg" alt="Upload"><p id="button-selection-newupload">New Upload</div>
+        <div class="card-button" onclick="window.location.href = document.URL+'download'"><img src="/img/arrow-down-white.svg" alt="Download"><p id="button-selection-download">Download</p></div>
      </div>
    </div>
  </div>
--- a/app/forms/upload.html
+++ b/app/forms/upload.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Kakubovna: Upload</title>
+  <link rel="stylesheet" href="/css/style.css">
+  <link href="https://fonts.googleapis.com/css2?family=Geologica:wght@800&display=swap" rel="stylesheet">
+</head>
+
+<body>
+  <div class="flex-container">
+    <div id="upload" class="container vertical">
+      <div class="dropZoneContainer">
+        <input type="file" title="" id="drop_zone" class="FileUpload" onchange="addFiles(this.files)" multiple />
+        <div class="dropZoneOverlay">
+          <p>Drag and drop your files <br />or<br />Click to add</p>
+        </div>
+      </div>
+      <div class="list">
+        <table class="filelist"></table>
+      </div>
+      <button style="vertical-align:middle" class="button" onclick="startUpload()"><span>Upload </span></button>
+    </div>
+  </div>
+  <script src="js/socket.io.js"></script>
+  <script src="js/siofu-client.js"></script>
+  <script src="/js/script.js"></script>
+  <script>
+    var selectedFiles = [];
+
+    function addFiles(files) {
+      Array.from(files).forEach(file => {
+        addFile(file);
+      });
+    }
+
+    function addFile(file) {
+      console.log(selectedFiles.find((element) => element.name == file.name))
+      if (selectedFiles.find((element) => element.name == file.name) == undefined) {
+        selectedFiles.push(file);
+      }
+      updateFileList();
+    }
+
+    function updateFileList(maxlen = 30) {
+      filelist = document.getElementsByClassName("filelist")[0];
+      filelist.innerHTML = "";
+      i = 0
+      selectedFiles.forEach(file => {
+        filelist.innerHTML += "<tr title=\"" + file.name + "\"><td>" + shortString(file.name, maxlen) + "</td></tr>";
+        i++;
+      });
+    }
+
+    var socket = io.connect(
+      {
+        forceNew: true,
+        extraHeaders: {
+          Authorization: "bsadsds"
+        }
+      }
+    );
+    var uploader = new SocketIOFileUpload(socket);
+    uploader.addEventListener("choose", function (event) {
+      console.log("Files Chosen: " + event.files);
+    });
+    uploader.addEventListener("progress", function (event) {
+      console.log("Files Chosen: " + event.bytesLoaded / event.file.size);
+    });
+
+    function startUpload() {
+      socket.once("serverReady", function (event) {
+        console.log("Got \"serverReady\" event");
+        console.log("Uploading..");
+        uploader.submitFiles(selectedFiles);
+      })
+      console.log("Emitting \"prepareUpload\" event");
+      socket.emit("prepareUpload", selectedFiles.length);      
+    }
+    socket.once("linkCreated", (hash, adminhash) => {
+      console.log("Link Created");
+      window.location.href = document.location.protocol + "//" + document.location.host + "/download/" + hash + '/'
+    });
+  </script>
+</body>
+
+</html>
--- a/app/handlers/sqliteHandler.js
+++ b/app/handlers/sqliteHandler.js
@@ -0,0 +1,44 @@
+module.exports = {
+
+    SqliteHandler: class SqliteHandler {
+        constructor(path) {
+            this.loaded = false;
+            this.path = path;
+            this.db = require('better-sqlite3')(this.path);
+            this.db.prepare(`CREATE TABLE IF NOT EXISTS "user" (
+            "id"	INTEGER NOT NULL UNIQUE,
+            "name"	TEXT NOT NULL UNIQUE,
+            "password"	TEXT NOT NULL,
+            "email"	INTEGER,
+            "admin"	INTEGER,
+            PRIMARY KEY("id" AUTOINCREMENT)
+            )`).run();
+
+            this.db.prepare(`CREATE TABLE IF NOT EXISTS "upload" (
+            "id"	INTEGER NOT NULL UNIQUE,
+            "hashsalt"	TEXT NOT NULL UNIQUE,
+            "adminhash"	TEXT NOT NULL UNIQUE,
+            "desc"	TEXT,
+            "password"	TEXT,
+            "owner_id"	INTEGER,
+            "upload_unix"	INTEGER,
+            PRIMARY KEY("id" AUTOINCREMENT),
+            FOREIGN KEY("owner_id") REFERENCES "user"("id")
+            )`).run();
+
+            this.db.prepare(`CREATE TABLE IF NOT EXISTS "file" (
+                "id"	INTEGER NOT NULL UNIQUE,
+                "filename"	TEXT NOT NULL,
+                "upload_id"	INTEGER NOT NULL,
+                "state" INTEGER NOT NULL,
+                PRIMARY KEY("id" AUTOINCREMENT),
+                FOREIGN KEY("upload_id") REFERENCES "upload"("id")
+            )`).run();
+        }
+
+        getDatabaseObj() {
+            return this.db;
+        }
+    }
+
+}
--- a/app/handlers/uploadHandler.js
+++ b/app/handlers/uploadHandler.js
@@ -5,25 +5,33 @@ module.exports = {
            this.db = db;
            this.absrc = ['E', 'T', 'X', 'W', 'U', 'R', 'J', 'I', 'N', 'C'];
            this.loaded = false;
+            this.num_files = 0;
            this.fileCache = {};
        }

-        new() {
+        new(num_files) {
            if (!this.loaded) {
+                if (typeof num_files == "number" && num_files > 0) {
+                    this.num_files = num_files;
+                } else {
+                    console.error("Invalid number of files");
+                    return false;
+                }
                this.hashsalt = this.makeHash(10);
                this.adminhash = this.makeHash(10);
                var sql = this.db.prepare(`INSERT INTO "upload" (hashsalt, adminhash, upload_unix) VALUES (?, ?, ?)`);
                var result = sql.run(this.hashsalt, this.adminhash, Math.floor(Date.now() / 1000));
                this.id = result.lastInsertRowid;
                this.hashid = this.id2hashid(result.lastInsertRowid);
-                this.dir = this.hashid+this.hashsalt;
+                this.dir = this.hashid + this.hashsalt;
                var fs = require('fs');
-                
-                if (!fs.existsSync("uploads/"+this.dir)){
-                    fs.mkdirSync("uploads/"+this.dir);
+
+                if (!fs.existsSync("uploads/" + this.dir)) {
+                    fs.mkdirSync("uploads/" + this.dir);
                }

                this.loaded = true;
+                return true;
            }
        }

@@ -33,17 +41,37 @@ module.exports = {
                this.hashid = shash[0];
                this.id = this.hashid2id(this.hashid)
                this.hashsalt = shash[1];
-                this.dir = this.hashid+this.hashsalt;
-                
+                this.dir = this.hashid + this.hashsalt;
+
+                var sql = this.db.prepare(`SELECT count(id) AS "count" FROM "file" WHERE upload_id=?`);
+                var num_files = sql.get(this.id)["count"];
+                if (typeof num_files == "number" && num_files > 0) {
+                    this.num_files = num_files;
+                } else {
+                    console.error("Invalid number of files");
+                    return false;
+                }
+
                var sql = this.db.prepare(`SELECT EXISTS(SELECT 1 FROM "upload" WHERE id=? AND hashsalt=? LIMIT 1) AS "exists"`);
                var result = sql.get(this.id, this.hashsalt);
+
+
+
                if (result["exists"]) {
                    console.log("LOADED: ", result);
                    this.loaded = true;
+                    return true;
+                } else {
+                    console.log("Not Found");
+                    return false;
                }
            }
        }
-        
+
+        getNumFiles() {
+            return this.num_files;
+        }
+
        isLoaded() {
            return this.loaded;
        }
@@ -62,6 +90,10 @@ module.exports = {
            return this.files;
        }

+        getFileByIndex(index) {
+            return this.getFiles()[index];
+        }
+
        registerFile(filename) {
            var sql = this.db.prepare(`INSERT INTO "file" (filename, upload_id) VALUES (?, ?)`);
            var result = sql.run(filename, this.id);
@@ -73,9 +105,9 @@ module.exports = {
        }

        getHash() {
-            return this.hashid+this.hashsalt;
+            return this.hashid + this.hashsalt;
        }
-        
+
        getHashId() {
            return this.hashid;
        }
@@ -122,47 +154,5 @@ module.exports = {
            return [hash.slice(0, hash.length - 10), hash.slice(hash.length - 10, hash.length)]
        }

-    },
-
-    SqliteHandler: class SqliteHandler {
-        constructor(path) {
-            this.loaded = false;
-            this.path = path;
-            this.db = require('better-sqlite3')(this.path);
-            this.db.prepare(`CREATE TABLE IF NOT EXISTS "user" (
-            "id"	INTEGER NOT NULL UNIQUE,
-            "name"	TEXT NOT NULL UNIQUE,
-            "password"	TEXT NOT NULL,
-            "email"	INTEGER,
-            "admin"	INTEGER,
-            PRIMARY KEY("id" AUTOINCREMENT)
-            )`).run();
-
-            this.db.prepare(`CREATE TABLE IF NOT EXISTS "upload" (
-            "id"	INTEGER NOT NULL UNIQUE,
-            "hashsalt"	TEXT NOT NULL UNIQUE,
-            "adminhash"	TEXT NOT NULL UNIQUE,
-            "desc"	TEXT,
-            "password"	TEXT,
-            "owner_id"	INTEGER,
-            "upload_unix"	INTEGER,
-            PRIMARY KEY("id" AUTOINCREMENT),
-            FOREIGN KEY("owner_id") REFERENCES "user"("id")
-            )`).run();
-
-            this.db.prepare(`CREATE TABLE IF NOT EXISTS "file" (
-                "id"	INTEGER NOT NULL UNIQUE,
-                "filename"	TEXT NOT NULL,
-                "upload_id"	INTEGER NOT NULL,
-                "state" INTEGER NOT NULL,
-                PRIMARY KEY("id" AUTOINCREMENT),
-                FOREIGN KEY("upload_id") REFERENCES "upload"("id")
-            )`).run();
-        }
-
-        getDatabaseObj() {
-            return this.db;
-        }
    }
-
 }
--- a/app/package.json
+++ b/app/package.json
@@ -11,7 +11,7 @@
  "dependencies": {
    "better-sqlite3": "^8.4.0",
    "express": "^4.18.2",
-    "multer": "^1.4.5-lts.1",
+    "loglevel": "^1.8.1",
    "socket.io": "^4.6.2",
    "socketio-file-upload": "^0.7.3"
  }
--- a/app/public/css/style-light.css
+++ b/app/public/css/style-light.css
@@ -0,0 +1,204 @@
+* {
+  font-family: OpenSans;
+}
+
+@font-face {
+  font-family: OpenSans;
+  src: url("/fonts/OpenSans-Medium.ttf");
+}
+html,
+body {
+  padding: 0;
+  margin: 0;
+}
+
+body {
+  background-color: #ffffff;
+}
+
+a:link {
+  text-decoration: none;
+}
+
+a:visited {
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: none;
+}
+
+a:active {
+  text-decoration: none;
+}
+
+.container {
+  height: 100vh;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.view-container {
+  height: 95vh;
+  width: 95%;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  border: 1px solid #091202;
+}
+
+.view-nav {
+  padding-top: 20px;
+  gap: 20px;
+  width: 98%;
+  display: flex;
+  flex-direction: row;
+  flex-basis: 50px;
+}
+.view-nav .button-primary {
+  flex-basis: 15%;
+}
+.view-nav .button-secondary {
+  flex-basis: 15%;
+}
+.view-nav .spacer {
+  flex-basis: 30%;
+}
+
+.file {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.file .icon {
+  width: 64px;
+  height: 64px;
+}
+.file .filename p {
+  font-size: 50px;
+  margin: 0;
+  flex-wrap: 80%;
+}
+
+.file-view {
+  flex-basis: 90%;
+  width: 98%;
+  border: 1px dotted #091202;
+}
+.file-view .file-container {
+  display: flex;
+  flex-wrap: wrap;
+}
+.file-view .file-container .file {
+  height: 40px;
+  flex: 0 0 200px;
+  row-gap: 2px;
+}
+.file-view .file-container .file .icon {
+  width: 45px;
+  height: 40px;
+}
+.file-view .file-container .file .filename p {
+  font-size: 20px;
+  margin: 0;
+  flex-wrap: 80%;
+}
+.file-view .file-container .file:hover {
+  transform: scale(1.05);
+  transition: all 0.3s;
+}
+
+.button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  background-color: #e42200;
+  border: none;
+  color: #FFFFFF;
+  font-family: OpenSans;
+  font-size: 20px;
+  padding: 4px;
+  width: 200px;
+  transition: all 0.3s;
+  cursor: pointer;
+}
+.button p {
+  margin: 0;
+}
+
+.button:hover {
+  transform: scale(1.05);
+}
+
+.primary {
+  background-color: #fd9700;
+}
+
+.secondary {
+  background-color: #114388;
+  color: #ffffff;
+}
+
+.link-box {
+  display: flex;
+  height: 40px;
+  flex-direction: row;
+  flex-basis: 40%;
+  align-items: center;
+  justify-content: center;
+}
+.link-box .button-copy {
+  display: flex;
+  background-color: #114388;
+  color: #ffffff;
+  height: 100%;
+  border: 3px solid #091202;
+  border-left: none;
+  align-items: center;
+  justify-content: center;
+}
+.link-box .text-link {
+  height: 100%;
+  width: 100%;
+  border: 3px solid #091202;
+}
+.link-box .text-link input[type=text] {
+  width: 100%;
+  height: 100%;
+  font-size: 20px;
+  padding: 12px 20px;
+  box-sizing: border-box;
+  border: none;
+  background-color: #114388;
+  color: #ffffff;
+}
+
+.hidden {
+  display: none;
+}
+
+.copy {
+  height: 30px;
+}
+
+.checkmark {
+  height: 30px;
+  stroke-dasharray: 1000;
+  stroke-dashoffset: 1000;
+  animation-iteration-count: 1;
+  stroke-dashoffset: 0;
+  animation: checkmark 0.3s linear;
+}
+
+@keyframes checkmark {
+  from {
+    stroke-dashoffset: -500;
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}/*# sourceMappingURL=style-light.css.map */
--- a/app/public/css/style-light.css.map
+++ b/app/public/css/style-light.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["style-light.scss","style-light.css"],"names":[],"mappings":"AASA;EACI,qBAAA;ACRJ;;ADWA;EACI,qBAAA;EACA,sCAAA;ACRJ;ADWA;;EAEE,UAAA;EACA,SAAA;ACTF;;ADaA;EACI,yBArBe;ACWnB;;ADcA;EAAS,qBAAA;ACVT;;ADYA;EAAY,qBAAA;ACRZ;;ADUA;EAAU,qBAAA;ACNV;;ADQA;EAAW,qBAAA;ACJX;;ADMA;EACI,aAAA;EACA,WAAA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,uBAAA;ACHJ;;ADOA;EACI,YAAA;EACA,UAAA;EACA,aAAA;EACA,mBAAA;EACA,sBAAA;EACA,yBAAA;ACJJ;;ADQA;EACI,iBAAA;EACA,SAAA;EACA,UAAA;EACA,aAAA;EACA,mBAAA;EACA,gBAAA;ACLJ;ADMI;EACI,eAAA;ACJR;ADMI;EACI,eAAA;ACJR;ADMI;EACI,eAAA;ACJR;;ADQA;EACI,aAAA;EACA,mBAAA;EACA,mBAAA;ACLJ;ADMI;EACI,WAAA;EACA,YAAA;ACJR;ADOQ;EACI,eAAA;EACA,SAAA;EACA,cAAA;ACLZ;;ADUA;EACI,eAAA;EACA,UAAA;EACA,0BAAA;ACPJ;ADQI;EACI,aAAA;EACA,eAAA;ACNR;ADOQ;EACI,YAAA;EACA,eAAA;EACA,YAAA;ACLZ;ADMY;EACI,WAAA;EACA,YAAA;ACJhB;ADOgB;EACI,eAAA;EACA,SAAA;EACA,cAAA;ACLpB;ADSQ;EACI,sBAAA;EACA,oBAAA;ACPZ;;ADYA;EACI,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,kBAAA;EACA,yBAAA;EACA,YAAA;EACA,cAAA;EACA,qBAAA;EACA,eAAA;EACA,YAAA;EACA,YAAA;EACA,oBAAA;EACA,eAAA;ACTJ;ADUI;EACI,SAAA;ACRR;;ADYA;EACI,sBAAA;ACTJ;;ADYA;EACI,yBAlJY;ACyIhB;;ADYA;EACI,yBApJc;EAqJd,cApJmB;AC2IvB;;ADYA;EACI,aAAA;EACA,YAAA;EACA,mBAAA;EACA,eAAA;EACA,mBAAA;EACA,uBAAA;ACTJ;ADUI;EACI,aAAA;EACA,yBAjKU;EAkKV,cAjKe;EAkKf,YAAA;EACA,yBAAA;EACA,iBAAA;EACA,mBAAA;EACA,uBAAA;ACRR;ADUI;EACI,YAAA;EACA,WAAA;EACA,yBAAA;ACRR;ADSQ;EACI,WAAA;EACA,YAAA;EACA,eAAA;EACA,kBAAA;EACA,sBAAA;EACA,YAAA;EACA,yBApLM;EAqLN,cApLW;AC6KvB;;ADYA;EACI,aAAA;ACTJ;;ADYA;EACI,YAAA;ACTJ;;ADYA;EACI,YAAA;EACA,sBAAA;EACA,uBAAA;EACA,4BAAA;EACA,oBAAA;EACA,gCAAA;ACTJ;;ADYA;EAEI;IACI,uBAAA;ECVN;EDYE;IACI,oBAAA;ECVN;AACF","file":"style-light.css"}
--- a/app/public/css/style-light.scss
+++ b/app/public/css/style-light.scss
@@ -0,0 +1,215 @@
+
+$color-primary: #fd9700;
+$color-primary-text: #ffffff;
+$color-secondary: #114388;
+$color-secondary-text: #ffffff;
+$color-background: #ffffff;
+$color-text: #091202;
+
+
+* {
+    font-family: OpenSans;
+}
+
+@font-face {
+    font-family: OpenSans;
+    src: url("/fonts/OpenSans-Medium.ttf");
+}
+
+html,
+body {
+  padding: 0;
+  margin: 0;
+}
+
+
+body {
+    background-color: $color-background;
+
+}
+
+a:link { text-decoration: none; }
+
+a:visited { text-decoration: none; }
+
+a:hover { text-decoration: none; }
+
+a:active { text-decoration: none; }
+
+.container {
+    height: 100vh;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+
+.view-container {
+    height: 95vh;
+    width: 95%;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    border: 1px solid $color-text;
+}
+
+
+.view-nav {
+    padding-top: 20px;
+    gap: 20px;
+    width: 98%;
+    display: flex;
+    flex-direction: row;
+    flex-basis: 50px;
+    .button-primary {
+        flex-basis: 15%;
+    }
+    .button-secondary {
+        flex-basis: 15%;
+    }
+    .spacer {
+        flex-basis: 30%
+    }
+}
+
+.file {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    .icon {
+        width: 64px;
+        height: 64px;
+    }
+    .filename {
+        p {
+            font-size: 50px;
+            margin: 0;
+            flex-wrap: 80%;
+        }
+    }
+}
+
+.file-view {        
+    flex-basis: 90%;
+    width: 98%;
+    border: 1px dotted $color-text;
+    .file-container {
+        display: flex;
+        flex-wrap: wrap;
+        .file {
+            height: 40px;
+            flex: 0 0 200px;
+            row-gap: 2px;
+            .icon {
+                width: 45px;
+                height: 40px;
+            }
+            .filename {
+                p {
+                    font-size: 20px;
+                    margin: 0;
+                    flex-wrap: 80%;
+                }
+            }
+        }
+        .file:hover {
+            transform: scale(1.05);
+            transition: all 0.3s;
+        }
+    }
+}
+
+.button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    background-color: #e42200;
+    border: none;
+    color: #FFFFFF;
+    font-family: OpenSans;
+    font-size: 20px;
+    padding: 4px;
+    width: 200px;
+    transition: all 0.3s;
+    cursor: pointer;
+    p {
+        margin: 0;
+    }
+}
+
+.button:hover {
+    transform: scale(1.05);
+}
+
+.primary {
+    background-color: $color-primary;
+}
+
+.secondary {
+    background-color: $color-secondary;
+    color: $color-secondary-text;
+}
+
+.link-box {
+    display: flex;
+    height: 40px;
+    flex-direction: row;
+    flex-basis: 40%;
+    align-items: center;
+    justify-content: center;
+    .button-copy {
+        display: flex;
+        background-color: $color-secondary;
+        color: $color-secondary-text;
+        height: 100%;
+        border: 3px solid $color-text;
+        border-left: none;
+        align-items: center;
+        justify-content: center;
+    }
+    .text-link {
+        height: 100%;
+        width: 100%;
+        border: 3px solid $color-text;
+        input[type=text] {
+            width: 100%;
+            height: 100%;
+            font-size: 20px;
+            padding: 12px 20px;
+            box-sizing: border-box;
+            border: none;
+            background-color: $color-secondary;
+            color: $color-secondary-text;
+        }   
+    }
+}
+
+.hidden {
+    display: none;
+}
+
+.copy {
+    height: 30px;
+}
+
+.checkmark {
+    height: 30px;
+    stroke-dasharray: 1000;
+    stroke-dashoffset: 1000;
+    animation-iteration-count: 1;
+    stroke-dashoffset: 0;
+    animation: checkmark 0.3s linear;
+}
+
+@keyframes checkmark {
+    
+    from { 
+        stroke-dashoffset: -500;
+    }
+    to {
+        stroke-dashoffset: 0;
+    }
+}
--- a/app/public/css/style.css
+++ b/app/public/css/style.css
@@ -0,0 +1,235 @@
+@charset "UTF-8";
+html,
+body {
+  padding: 0;
+  margin: 0;
+}
+
+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: 15px;
+  border-color: black;
+  border-width: 2px;
+  border-style: solid;
+  background-color: #f16d01;
+  padding: 20px;
+  display: flex;
+  text-align: center;
+}
+
+.free-width {
+  width: auto;
+}
+
+.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;
+}
+
+.file-view {
+  width: 40%;
+}
+
+.file-table {
+  border-collapse: separate;
+  width: 100%;
+}
+.files #file {
+  margin-bottom: 5px;
+  display: flex;
+  height: 30px;
+  justify-content: center;
+  vertical-align: middle;
+  flex-direction: row;
+  gap: 0;
+  row-gap: 0;
+}
+.files #file #name {
+  display: flex;
+  flex-basis: 90%;
+  padding: 0;
+  vertical-align: middle;
+}
+.files #file #name p {
+  line-height: 0.5;
+  display: inline-block;
+  text-align: left;
+  vertical-align: middle;
+  margin: 0;
+}
+.files #file #actions {
+  flex-basis: 10%;
+  height: 100%;
+  width: 15px;
+}
+.files #file .action-box {
+  display: grid;
+  background-color: #1b1b1b;
+  color: white;
+  padding: 2px;
+  width: 50%;
+}
+.files #file .action-box * {
+  height: 100%;
+  width: 100%;
+  grid-column: 1;
+  grid-row: 1;
+  margin: 0;
+}
+
+.img-download {
+  height: 100%;
+}
+
+.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: "»";
+  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-box .card-button {
+  display: flex;
+  background-color: rgba(88, 88, 88, 0.2);
+  text-align: center;
+  padding: 10px;
+  height: 100px;
+  width: 400px;
+  border-radius: 15px;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+  transition: 0.3s;
+  flex-direction: row;
+  justify-content: center;
+  cursor: pointer;
+}
+.card-button-box .card-button #actions {
+  background-color: #1b1b1b;
+}
+.card-button-box .card-button img {
+  height: 100%;
+  flex-basis: 40%;
+}
+.card-button-box .card-button p {
+  flex-basis: 60%;
+  color: #FFFFFF;
+  text-align: left;
+  font-size: xx-large;
+}
+
+.card-button:hover {
+  transform: scale(1.02);
+  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+}
+
+.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;
+  cursor: pointer;
+}/*# sourceMappingURL=style.css.map */
--- a/app/public/css/style.css.map
+++ b/app/public/css/style.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["style.css","style.scss"],"names":[],"mappings":"AAAA,gBAAgB;ACAhB;;EAEE,UAAA;EACA,SAAA;ADEF;;ACEA;EACE,yBAAA;ADCF;;ACGA;EACE,cAAA;ADAF;;ACGA;;;;EAIE,aAAA;ADAF;;ACGA;EACE,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,aAAA;ADAF;;ACGA;EACE,oCAAA;EACA,mBAAA;EACA,mBAAA;EACA,iBAAA;EACA,mBAAA;EACA,yBAAA;EACA,aAAA;EACA,aAAA;EACA,kBAAA;ADAF;;ACGA;EACI,WAAA;ADAJ;;ACGA;EACI,sBAAA;EACA,uBAAA;EACA,mBAAA;ADAJ;;ACGA;EACI,gBAAA;ADAJ;;ACGA;EACI,aAAA;EACA,sBAAA;EACA,UAAA;ADAJ;;ACEA;EACI,cAAA;ADCJ;;ACEA;EACI,cAAA;ADCJ;;ACEA;EACI,sBAAA;ADCJ;;ACEA;EACI,UAAA;ADCJ;;ACEA;EACI,yBAAA;EACA,WAAA;ADCJ;ACQI;EACI,kBAAA;EACA,aAAA;EACA,YAAA;EACA,uBAAA;EACA,sBAAA;EACA,mBAAA;EACA,MAAA;EACA,UAAA;ADNR;ACOQ;EACI,aAAA;EACA,eAAA;EACA,UAAA;EACA,sBAAA;ADLZ;ACMY;EACI,gBAAA;EACA,qBAAA;EACA,gBAAA;EACA,sBAAA;EACA,SAAA;ADJhB;ACOQ;EACI,eAAA;EACA,YAAA;EACA,WAAA;ADLZ;ACOQ;EACI,aAAA;EACA,yBAAA;EACA,YAAA;EACA,YAAA;EACA,UAAA;ADLZ;ACOQ;EACI,YAAA;EACA,WAAA;EACA,cAAA;EACA,WAAA;EACA,SAAA;ADLZ;;ACUA;EACI,YAAA;ADPJ;;ACUA;EACI,qBAAA;EACA,kBAAA;EACA,yBAAA;EACA,YAAA;EACA,cAAA;EACA,kBAAA;EACA,eAAA;EACA,aAAA;EACA,YAAA;EACA,oBAAA;EACA,eAAA;EACA,WAAA;ADPJ;;ACUA;EACI,eAAA;EACA,qBAAA;EACA,kBAAA;EACA,gBAAA;ADPJ;;ACUA;EACI,YAAA;EACA,kBAAA;EACA,UAAA;EACA,MAAA;EACA,YAAA;EACA,gBAAA;ADPJ;;ACUA;EACI,mBAAA;ADPJ;;ACUA;EACI,UAAA;EACA,QAAA;ADPJ;;ACUA;EACI,aAAA;EACA,uBAAA;EACA,SAAA;ADPJ;ACQI;EACI,aAAA;EACA,uCAAA;EACA,kBAAA;EACA,aAAA;EACA,aAAA;EACA,YAAA;EACA,mBAAA;EACA,0CAAA;EACA,gBAAA;EACA,mBAAA;EACA,uBAAA;EACA,eAAA;ADNR;ACQQ;EACI,yBAAA;ADNZ;ACSQ;EACI,YAAA;EACA,eAAA;ADPZ;ACUQ;EACI,eAAA;EACA,cAAA;EACA,gBAAA;EACA,mBAAA;ADRZ;;ACiBA;EACI,sBAAA;EACA,2CAAA;ADdJ;;ACiBA;EACI,aAAA;EACA,kBAAA;EACA,mBAAA;EACA,WAAA;EACA,aAAA;ADdJ;;ACiBA;EACI,YAAA;EACA,WAAA;EACA,cAAA;EACA,WAAA;ADdJ;;ACiBA;EACI,gBAAA;EACA,iBAAA;EACA,kBAAA;EACA,eAAA;EACA,cAAA;EACA,kBAAA;EACA,sBAAA;ADdJ;;ACgBA;EACI,UAAA;EACA,eAAA;ADbJ","file":"style.css"}
--- a/app/public/css/style.scss
+++ b/app/public/css/style.scss
@@ -2,7 +2,6 @@ html,
 body {
  padding: 0;
  margin: 0;
-  border: none;
 }


@@ -31,7 +30,7 @@ canvas {

 .container {
  font-family: 'Geologica', sans-serif;
-  border-radius: 4px;
+  border-radius: 15px;
  border-color: black;
  border-width: 2px;
  border-style: solid;
@@ -41,6 +40,10 @@ canvas {
  text-align: center;
 }

+.free-width {
+    width: auto;
+}
+
 .vertical {
    flex-direction: column;
    justify-content: center;
@@ -68,6 +71,69 @@ canvas {
    flex-direction: column;
 }

+.file-view {
+    width: 40%;
+}
+
+.file-table {
+    border-collapse: separate;
+    width: 100%;
+    tr {
+        
+    }
+}
+
+
+
+.files {
+    #file {
+        margin-bottom: 5px;
+        display: flex;
+        height: 30px;
+        justify-content: center;
+        vertical-align: middle;
+        flex-direction: row;
+        gap: 0;
+        row-gap: 0;
+        #name {
+            display: flex;
+            flex-basis: 90%;
+            padding: 0;
+            vertical-align: middle;
+            p { 
+                line-height: 0.5;
+                display: inline-block;
+                text-align: left;
+                vertical-align: middle;
+                margin: 0;
+            }
+        }
+        #actions {
+            flex-basis: 10%;
+            height: 100%;
+            width: 15px;
+        }
+        .action-box {
+            display: grid;
+            background-color: #1b1b1b;
+            color: white;
+            padding: 2px;
+            width: 50%;
+        }
+        .action-box * {
+            height: 100%;
+            width: 100%;
+            grid-column: 1;
+            grid-row: 1;
+            margin: 0;
+        }
+    }
+}
+
+.img-download {
+    height: 100%;
+}
+
 .button {
    display: inline-block;
    border-radius: 4px;
@@ -112,29 +178,47 @@ canvas {
    display: flex;
    justify-content: center;
    gap: 50px;
+    .card-button {
+        display: flex;
+        background-color: rgba(88, 88, 88, 0.2);
+        text-align: center;
+        padding: 10px;
+        height: 100px;
+        width: 400px;
+        border-radius: 15px;
+        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+        transition: 0.3s;
+        flex-direction: row;
+        justify-content: center;
+        cursor: pointer;
+
+        #actions {
+            background-color: #1b1b1b;
+        }
+
+        img {
+            height: 100%;
+            flex-basis: 40%;
+        }
+
+        p {
+            flex-basis: 60%;
+            color:#FFFFFF;
+            text-align: left;
+            font-size: xx-large;
+        }
+        
+    }
 }

-.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;
@@ -161,4 +245,5 @@ canvas {
 }
 .FileUpload {
    opacity: 0;
+    cursor: pointer;
 }
--- a/app/public/fonts/OpenSans-Medium.ttf
+++ b/app/public/fonts/OpenSans-Medium.ttf
--- a/app/public/ico/apk.svg
+++ b/app/public/ico/apk.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" version="1.1" viewBox="0 0 64 64">
+ <path style="opacity:0.2" d="M 12.75,5 C 11.2265,5 10,6.2488 10,7.8 v 50.4 c 0,1.55008 1.2265,2.8 2.75,2.8 h 38.5 C 52.7724,61 54,59.75008 54,58.2 V 23 L 40,19 36,5 Z"/>
+ <path style="fill:#30dd81" d="M 12.75,4 C 11.2265,4 10,5.2488 10,6.8 v 50.4 c 0,1.55008 1.2265,2.8 2.75,2.8 h 38.5 C 52.7724,60 54,58.75008 54,57.2 V 22 L 40,18 36,4 Z"/>
+ <path style="opacity:0.2" d="M 54,23 36,5 V 20.1875 C 36,21.74675 37.2555,23 38.8125,23 Z"/>
+ <path style="fill:#99eec0" d="M 54,22 36,4 V 19.1875 C 36,20.74675 37.2555,22 38.8125,22 Z"/>
+ <path style="opacity:0.2;fill:#ffffff" d="M 12.75 4 C 11.2265 4 10 5.2495812 10 6.8007812 L 10 7.8007812 C 10 6.2495813 11.2265 5 12.75 5 L 36 5 L 36 4 L 12.75 4 z"/>
+ <path style="opacity:0.2" d="m 19.316406,30.917968 a 1.333464,1.333464 0 0 0 -1.0625,2.035156 l 2.679688,4.460938 c -2.72685,2.583024 -4.551296,6.102862 -4.929688,10.046876 C 15.930413,49.00088 17.554687,49 17.554688,49 H 46.40625 c 0,0 1.670902,-3.38e-4 1.589844,-1.617188 -0.39481,-3.916022 -2.217084,-7.406176 -4.929688,-9.972656 l 2.675782,-4.457032 a 1.333464,1.333464 0 0 0 -1.097656,-2.035156 1.333464,1.333464 0 0 0 -1.1875,0.664064 l -2.496094,4.152344 C 38.399292,34.016796 35.32511,33 32.003906,33 c -3.323994,0 -6.40188,1.017824 -8.964844,2.738282 l -2.496094,-4.15625 A 1.333464,1.333464 0 0 0 19.316406,30.917968 Z M 24,41 a 1.9999959,1.9999959 0 0 1 2,2 1.9999959,1.9999959 0 0 1 -2,2 1.9999959,1.9999959 0 0 1 -2,-2 1.9999959,1.9999959 0 0 1 2,-2 z m 16,0 a 1.9999959,1.9999959 0 0 1 2,2 1.9999959,1.9999959 0 0 1 -2,2 1.9999959,1.9999959 0 0 1 -2,-2 1.9999959,1.9999959 0 0 1 2,-2 z"/>
+ <path style="fill:none;stroke:#ffffff;stroke-width:2.66666126;stroke-linecap:round" d="M 22.599158,36.600366 19.399166,31.267044"/>
+ <path style="fill:none;stroke:#ffffff;stroke-width:2.66666126;stroke-linecap:round" d="M 41.399166,36.600366 44.59916,31.267044"/>
+ <path style="fill:#ffffff" d="m 32.003906,32 c -8.355868,0 -15.221531,6.346874 -16,14.460938 C 15.930413,48.00088 17.554688,48 17.554688,48 H 46.40625 c 0,0 1.670902,-3.38e-4 1.589844,-1.617188 C 47.181756,38.305592 40.333356,32 32.003906,32 Z M 24,40 a 1.9999959,1.9999959 0 0 1 2,2 1.9999959,1.9999959 0 0 1 -2,2 1.9999959,1.9999959 0 0 1 -2,-2 1.9999959,1.9999959 0 0 1 2,-2 z m 16,0 a 1.9999959,1.9999959 0 0 1 2,2 1.9999959,1.9999959 0 0 1 -2,2 1.9999959,1.9999959 0 0 1 -2,-2 1.9999959,1.9999959 0 0 1 2,-2 z"/>
+</svg>
--- a/app/public/ico/archive.svg
+++ b/app/public/ico/archive.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" version="1" viewBox="0 0 64 64">
+ <rect style="opacity:0.2" width="56" height="56" x="4" y="5" rx="5.6" ry="5.6"/>
+ <rect style="fill:#4caf50" width="56" height="56" x="4" y="4" rx="5.6" ry="5.6"/>
+ <rect style="opacity:0.2" width="10" height="27" x="26" y="4"/>
+ <rect style="fill:#ffffff" width="3" height="3" x="31" y="4"/>
+ <rect style="fill:#ffffff" width="3" height="3" x="28" y="25"/>
+ <path style="fill:#4b4b4b" d="m 31,25 c 3.75,0 3.75,5.6 5,5.6 v 7 c 0,0.7756 -0.5575,1.4 -1.25,1.4 h -7.5 C 26.5575,39 26,38.3756 26,37.6 v -7 c 1.25,0 1.25,-5.6 5,-5.6 z"/>
+ <path style="opacity:0.2" d="M 30.667969,32 C 28.082636,32 26,34.102725 26,36.710938 v 9.578124 C 26,48.897276 28.082636,51 30.667969,51 h 0.664062 C 33.917364,51 36,48.897277 36,46.289062 V 36.710938 C 36,34.102725 33.917364,32 31.332031,32 Z M 31,42 c 2.209139,4e-6 4,1.792881 4,4.001953 C 35,48.211026 33.209139,50 31,50 28.790861,50 27,48.211026 27,46.001953 27,43.792881 28.790861,42.000004 31,42 Z"/>
+ <path style="fill:#ffffff" d="M 30.667969,31 C 28.082636,31 26,33.102725 26,35.710938 v 9.578124 C 26,47.897276 28.082636,50 30.667969,50 h 0.664062 C 33.917364,50 36,47.897277 36,45.289062 V 35.710938 C 36,33.102725 33.917364,31 31.332031,31 Z M 31,41 c 2.209139,4e-6 4,1.792881 4,4.001953 C 35,47.211026 33.209139,49 31,49 28.790861,49 27,47.211026 27,45.001953 27,42.792881 28.790861,41.000004 31,41 Z"/>
+ <path style="fill:#909090" d="M 30.984375,27.000122 A 1.0001,0.99660733 0 0 0 30,28.010254 V 33.9893 a 1.0001,0.99660733 0 1 0 2,0 v -5.979046 a 1.0001,0.99660733 0 0 0 -1.015625,-1.010132 z"/>
+ <rect style="fill:#ffffff" width="3" height="3" x="28" y="7"/>
+ <rect style="fill:#ffffff" width="3" height="3" x="31" y="10"/>
+ <rect style="fill:#ffffff" width="3" height="3" x="28" y="13"/>
+ <rect style="fill:#ffffff" width="3" height="3" x="31" y="16"/>
+ <rect style="fill:#ffffff" width="3" height="3" x="28" y="19"/>
+ <rect style="fill:#ffffff" width="3" height="3" x="31" y="22"/>
+ <path style="opacity:0.2;fill:#ffffff" d="M 9.5996094 4 C 6.4972094 4 4 6.4972094 4 9.5996094 L 4 10.599609 C 4 7.4972094 6.4972094 5 9.5996094 5 L 54.400391 5 C 57.502791 5 60 7.4972094 60 10.599609 L 60 9.5996094 C 60 6.4972094 57.502791 4 54.400391 4 L 9.5996094 4 z"/>
+</svg>
--- a/app/public/ico/audio.svg
+++ b/app/public/ico/audio.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" version="1.1" viewBox="0 0 64 64">
+ <path style="opacity:0.2" d="M 12.75,5 C 11.2265,5 10,6.2488 10,7.8 v 50.4 c 0,1.55008 1.2265,2.8 2.75,2.8 h 38.5 C 52.7724,61 54,59.75008 54,58.2 V 23 L 40,19 36,5 Z"/>
+ <path style="fill:#fe9700" d="M 12.75,4 C 11.2265,4 10,5.2488 10,6.8 v 50.4 c 0,1.55008 1.2265,2.8 2.75,2.8 h 38.5 C 52.7724,60 54,58.75008 54,57.2 V 22 L 40,18 36,4 Z"/>
+ <path style="opacity:0.2" d="M 54,23 36,5 V 20.1875 C 36,21.74675 37.2555,23 38.8125,23 Z"/>
+ <path style="fill:#ffbd63" d="M 54,22 36,4 V 19.1875 C 36,20.74675 37.2555,22 38.8125,22 Z"/>
+ <path style="opacity:0.2;fill:#ffffff" d="M 12.75 4 C 11.2265 4 10 5.2495812 10 6.8007812 L 10 7.8007812 C 10 6.2495813 11.2265 5 12.75 5 L 36 5 L 36 4 L 12.75 4 z"/>
+ <path style="opacity:0.2" d="m 25.999962,30.000018 -8.8e-5,1 v 13 c 0,0 -0.31144,7.7e-4 -0.99992,-1.8e-5 -2.7614,0 -5,2.2386 -5,5 0,2.7614 2.2386,5 5,5 2.7244,-0.0017 4.946,-2.1842 4.996,-4.9082 l 0.004,-0.0078 V 36 h 10 v 8 c 0,0 -0.31144,7.88e-4 -0.9999,0 -2.7614,0 -5,2.2386 -5,5 0,2.7614 2.2386,5 5,5 2.6622,-0.003 4.8552,-2.0912 4.9882,-4.75 l 0.0118,-0.02344 v -19.2266 h -18 z"/>
+ <path style="fill:#ffffff" d="m 25.999962,29.000018 -8.8e-5,1 v 13 c 0,0 -0.31144,7.7e-4 -0.99992,-1.8e-5 -2.7614,0 -5,2.2386 -5,5 0,2.7614 2.2386,5 5,5 2.7244,-0.0017 4.946,-2.1842 4.996,-4.9082 l 0.004,-0.0078 V 35 h 10 v 8 c 0,0 -0.31144,7.88e-4 -0.9999,0 -2.7614,0 -5,2.2386 -5,5 0,2.7614 2.2386,5 5,5 2.6622,-0.003 4.8552,-2.0912 4.9882,-4.75 l 0.0118,-0.02344 v -19.2266 h -18 z"/>
+</svg>
--- a/app/public/ico/code.svg
+++ b/app/public/ico/code.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" version="1.1" viewBox="0 0 64 64">
+ <path style="opacity:0.2" d="M 12.75,5 C 11.2265,5 10,6.2488 10,7.8 v 50.4 c 0,1.55008 1.2265,2.8 2.75,2.8 h 38.5 C 52.7724,61 54,59.75008 54,58.2 V 23 L 40,19 36,5 Z"/>
+ <path style="fill:#1c59a5" d="M 12.75,4 C 11.2265,4 10,5.2488 10,6.8 v 50.4 c 0,1.55008 1.2265,2.8 2.75,2.8 h 38.5 C 52.7724,60 54,58.75008 54,57.2 V 22 L 40,18 36,4 Z"/>
+ <path style="opacity:0.2" d="M 54,23 36,5 V 20.1875 C 36,21.74675 37.2555,23 38.8125,23 Z"/>
+ <path style="fill:#6295d3" d="M 54,22 36,4 V 19.1875 C 36,20.74675 37.2555,22 38.8125,22 Z"/>
+ <path style="opacity:0.1;fill:#ffffff" d="M 12.75 4 C 11.2265 4 10 5.2495812 10 6.8007812 L 10 7.8007812 C 10 6.2495813 11.2265 5 12.75 5 L 36 5 L 36 4 L 12.75 4 z"/>
+ <path style="opacity:0.2;fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round" d="m 37.520548,30.494022 c 9.625,2.75 -1.644648,6.875 7.980352,11 m -7.980352,11 c 9.625,-2.75 -1.644648,-6.875 7.980352,-11 m -19.0009,-11 c -9.625,2.75 1.644648,6.875 -7.980352,11 m 7.980352,11 c -9.625,-2.75 1.644648,-6.875 -7.980352,-11"/>
+ <path style="fill:none;stroke:#ffffff;stroke-width:3;stroke-linecap:round" d="m 37.520548,29.494022 c 9.625,2.75 -1.644648,6.875 7.980352,11 m -7.980352,11 c 9.625,-2.75 -1.644648,-6.875 7.980352,-11 m -19.0009,-11 c -9.625,2.75 1.644648,6.875 -7.980352,11 m 7.980352,11 c -9.625,-2.75 1.644648,-6.875 -7.980352,-11"/>
+</svg>
--- a/app/public/ico/exec.svg
+++ b/app/public/ico/exec.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" version="1" viewBox="0 0 64 64">
+ <path style="opacity:0.2" d="M 37.980771,5.1966845 C 34.940932,4.3821623 31.836423,6.1745519 31.0219,9.21439 c -0.428735,1.600061 -1.444421,2.286459 -3.749116,3.057575 -2.842268,0.95098 -4.718493,1.239996 -6.318146,-0.359651 -2.225314,-2.2253164 -5.80879,-2.2238378 -8.034107,0.0015 l -2.009606,2.00638 c -2.2253164,2.225318 -2.223837,5.808791 0.0015,8.034107 1.113881,1.11388 1.010148,3.187779 0.510503,5.532227 -0.636947,2.988696 -0.823568,3.896832 -3.2082219,4.535797 -3.0398384,0.814522 -4.8328566,3.917162 -4.0183349,6.957001 l 0.7371784,2.742384 c 0.8145217,3.039838 3.9171637,4.832856 6.9570014,4.018336 2.086905,-0.559184 3.183657,0.516046 4.880898,2.131586 2.2827,2.172821 3.023714,3.241606 2.488644,5.238514 -0.814521,3.03984 0.977869,6.144349 4.017705,6.958869 l 1.370752,0.367293 1.370751,0.367292 c 3.039837,0.814522 6.144348,-0.977868 6.958871,-4.017705 0.535068,-1.99691 1.711199,-2.551997 4.774487,-3.292365 2.277623,-0.55048 3.765051,-0.933279 5.292773,0.59444 2.225316,2.225316 5.808792,2.223839 8.034107,-0.0015 l 2.009608,-2.006384 c 2.225317,-2.225316 2.223838,-5.808792 -0.0015,-8.034106 -1.745687,-1.745688 -1.453239,-2.625466 -0.510503,-5.532228 0.739518,-2.280173 1.686633,-4.128087 3.208222,-4.535797 3.039839,-0.814521 4.832857,-3.917162 4.018334,-6.957 l -0.737178,-2.74238 C 58.252001,21.238736 55.149358,19.445717 52.10952,20.26024 49.92436,20.845751 48.444008,19.657341 46.458023,17.412634 44.847654,15.592481 44.311244,14.490199 44.739979,12.890138 45.5545,9.8502995 43.762111,6.7457903 40.722274,5.931268 L 39.351522,5.5639763 Z"/>
+ <path style="fill:#455a64" d="M 37.980771,4.1965503 C 34.940932,3.3820281 31.836423,5.1744177 31.0219,8.2142558 c -0.428735,1.6000607 -1.444421,2.2864592 -3.749116,3.0575752 -2.842268,0.95098 -4.718493,1.239996 -6.318146,-0.359651 -2.225314,-2.2253166 -5.80879,-2.223838 -8.034107,0.0015 l -2.009606,2.00638 c -2.2253164,2.225318 -2.223837,5.808791 0.0015,8.034107 1.113881,1.11388 1.010148,3.187779 0.510503,5.532227 -0.636947,2.988696 -0.823568,3.896832 -3.2082219,4.535797 -3.0398384,0.814522 -4.8328566,3.917162 -4.0183349,6.957001 l 0.7371784,2.742384 c 0.8145217,3.039838 3.9171637,4.832856 6.9570014,4.018336 2.086905,-0.559184 3.183657,0.516046 4.880898,2.131586 2.2827,2.172821 3.023714,3.241606 2.488644,5.238514 -0.814521,3.03984 0.977869,6.144349 4.017705,6.958869 l 1.370752,0.367293 1.370751,0.367292 c 3.039837,0.814522 6.144348,-0.977868 6.958871,-4.017705 0.535068,-1.99691 1.711199,-2.551997 4.774487,-3.292365 2.277623,-0.55048 3.765051,-0.933279 5.292773,0.59444 2.225316,2.225316 5.808792,2.223839 8.034107,-0.0015 l 2.009608,-2.006384 c 2.225317,-2.225316 2.223838,-5.808792 -0.0015,-8.034106 -1.745687,-1.745688 -1.453239,-2.625466 -0.510503,-5.532228 0.739518,-2.280173 1.686633,-4.128087 3.208222,-4.535797 3.039839,-0.814521 4.832857,-3.917162 4.018334,-6.957 l -0.737178,-2.74238 C 58.252001,20.238602 55.149358,18.445583 52.10952,19.260106 49.92436,19.845617 48.444008,18.657207 46.458023,16.4125 44.847654,14.592347 44.311244,13.490065 44.739979,11.890004 45.5545,8.8501653 43.762111,5.7456561 40.722274,4.9311338 L 39.351522,4.5638421 Z"/>
+ <path style="opacity:0.2" d="m 32,22.000134 c 6.075163,0 11,4.924838 11,11 0,6.075163 -4.924837,11 -11,11 -6.075163,0 -11,-4.924837 -11,-11 0,-6.075162 4.924837,-11 11,-11 z"/>
+ <path fill="#ffffff" d="m 32,21 c 6.075163,0 11,4.924838 11,11 0,6.075163 -4.924837,11 -11,11 -6.075163,0 -11,-4.924837 -11,-11 0,-6.075162 4.924837,-11 11,-11 z"/>
+ <path style="fill:#ffffff;opacity:0.1" d="M 36.279297 4.0039062 C 33.856983 4.0975681 31.683284 5.7449753 31.021484 8.2148438 C 30.592749 9.8149045 29.578133 10.500368 27.273438 11.271484 C 24.431169 12.222464 22.554731 12.511756 20.955078 10.912109 C 18.729764 8.6867928 15.145239 8.6887245 12.919922 10.914062 L 10.910156 12.919922 C 9.6694196 14.160659 9.124346 15.823157 9.2675781 17.4375 C 9.3802358 16.155822 9.9251186 14.90496 10.910156 13.919922 L 12.919922 11.914062 C 15.145239 9.6887247 18.729764 9.686793 20.955078 11.912109 C 22.554731 13.511756 24.431169 13.222464 27.273438 12.271484 C 29.578133 11.500368 30.592749 10.814905 31.021484 9.2148438 C 31.836007 6.1750057 34.94063 4.3827434 37.980469 5.1972656 L 39.351562 5.5644531 L 40.722656 5.9316406 C 43.098886 6.5683497 44.705832 8.605431 44.908203 10.916016 C 45.15145 8.2130349 43.437339 5.6590381 40.722656 4.9316406 L 39.351562 4.5644531 L 37.980469 4.1972656 C 37.410499 4.0445427 36.838292 3.982292 36.279297 4.0039062 z M 44.646484 13.361328 C 44.438849 14.718852 45.012504 15.777195 46.458984 17.412109 C 48.444969 19.656816 49.924215 20.845277 52.109375 20.259766 C 55.149213 19.445243 58.251885 21.239458 59.066406 24.279297 L 59.802734 27.021484 C 59.890038 27.347305 59.94359 27.673678 59.972656 27.998047 C 60.029634 27.352009 59.980814 26.686086 59.802734 26.021484 L 59.066406 23.279297 C 58.251885 20.239458 55.149213 18.445243 52.109375 19.259766 C 49.924215 19.845277 48.444969 18.656816 46.458984 16.412109 C 45.382695 15.195611 44.795804 14.299421 44.646484 13.361328 z M 11.761719 24.162109 C 11.718828 24.885645 11.598361 25.66738 11.423828 26.486328 C 10.786881 29.475024 10.599498 30.382519 8.2148438 31.021484 C 5.5006415 31.748752 3.7849435 34.301778 4.0273438 37.003906 C 4.2302449 34.694215 5.8389414 32.658105 8.2148438 32.021484 C 10.599498 31.382519 10.786881 30.475024 11.423828 27.486328 C 11.682579 26.272212 11.829449 25.135352 11.761719 24.162109 z M 51.873047 41.039062 C 51.6977 42.182271 51.983812 42.942796 53.087891 44.046875 C 54.077495 45.036469 54.624595 46.294145 54.734375 47.582031 C 54.882358 45.962175 54.333154 44.290171 53.087891 43.044922 C 52.337053 42.294084 51.980225 41.699705 51.873047 41.039062 z M 19.376953 51.521484 C 19.349208 51.710818 19.315236 51.902356 19.259766 52.109375 C 19.081953 52.772983 19.035281 53.438709 19.091797 54.083984 C 19.120932 53.760232 19.172641 53.434529 19.259766 53.109375 C 19.419204 52.514344 19.451148 52.005465 19.376953 51.521484 z"/>
+</svg>
--- a/app/public/ico/extensions.json
+++ b/app/public/ico/extensions.json
@@ -0,0 +1,240 @@
+{
+	"1.ada": ["code"],
+	"2.ada": ["code"],
+	"3dm": ["image"],
+	"3ds": ["image"],
+	"3g2": ["video"],
+	"3gp": ["video"],
+	"7z": ["archive"],
+	"a": ["archive"],
+	"aac": ["audio"],
+	"aaf": ["video"],
+	"ada": ["code"],
+	"adb": ["code"],
+	"ads": ["code"],
+	"ai": ["image"],
+	"aiff": ["audio"],
+	"ape": ["audio"],
+	"apk": ["apk"],
+	"ar": ["archive"],
+	"asf": ["video"],
+	"asm": ["code"],
+	"asp": ["code", "web"],
+	"aspx": ["code", "web"],
+	"au": ["audio"],
+	"avchd": ["video"],
+	"avi": ["video"],
+	"azw": ["book"],
+	"azw1": ["book"],
+	"azw3": ["book"],
+	"azw4": ["book"],
+	"azw6": ["book"],
+	"bas": ["script"],
+	"bash": ["script"],
+	"bat": ["script"],
+	"bin": ["exec"],
+	"bmp": ["image"],
+	"bz2": ["archive"],
+	"c": ["code"],
+	"c++": ["code"],
+	"cab": ["archive"],
+	"cbl": ["code"],
+	"cbr": ["book"],
+	"cbz": ["book"],
+	"cc": ["code"],
+	"class": ["code"],
+	"clj": ["code"],
+	"cob": ["code"],
+	"command": ["exec"],
+	"cpio": ["archive"],
+	"cpp": ["code"],
+	"crx": ["exec"],
+	"cs": ["code"],
+	"csh": ["script"],
+	"css": ["web"],
+	"csv": ["sheet"],
+	"cxx": ["code"],
+	"d": ["code"],
+	"dds": ["image"],
+	"deb": ["archive"],
+	"diff": ["code"],
+	"dmg": ["archive"],
+	"doc": ["text"],
+	"docx": ["text"],
+	"drc": ["video"],
+	"dwg": ["image"],
+	"dxf": ["image"],
+	"e": ["code"],
+	"ebook": ["text"],
+	"egg": ["archive"],
+	"el": ["code"],
+	"eot": ["font"],
+	"eps": ["image"],
+	"epub": ["book"],
+	"exe": ["exec"],
+	"f": ["code"],
+	"f77": ["code"],
+	"f90": ["code"],
+	"fish": ["code", "exec"],
+	"flac": ["audio"],
+	"flv": ["video"],
+	"for": ["code"],
+	"fth": ["code"],
+	"ftn": ["code"],
+	"gif": ["image"],
+	"go": ["code"],
+	"gpx": ["image"],
+	"groovy": ["code"],
+	"gsm": ["audio"],
+	"gz": ["gzip"],
+	"h": ["code"],
+	"hh": ["code"],
+	"hpp": ["code"],
+	"hs": ["code"],
+	"htm": ["code", "web"],
+	"html": ["code", "web"],
+	"hxx": ["code"],
+	"ics": ["sheet"],
+	"inc": ["code", "web"],
+	"iso": ["iso"],
+	"it": ["audio"],
+	"jar": ["archive"],
+	"java": ["code"],
+	"jpeg": ["image"],
+	"jpg": ["image"],
+	"js": ["code", "web"],
+	"jsp": ["code", "web"],
+	"jsx": ["code", "web"],
+	"kml": ["image"],
+	"kmz": ["image"],
+	"ksh": ["script"],
+	"kt": ["code"],
+	"less": ["web"],
+	"lha": ["archive"],
+	"lhs": ["code"],
+	"lisp": ["code"],
+	"log": ["text"],
+	"lua": ["code"],
+	"m": ["code"],
+	"m2v": ["video"],
+	"m3u": ["audio"],
+	"m4": ["code"],
+	"m4a": ["audio"],
+	"m4p": ["video"],
+	"m4v": ["video"],
+	"mar": ["archive"],
+	"max": ["image"],
+	"md": ["text"],
+	"mid": ["audio"],
+	"mkv": ["video"],
+	"mng": ["video"],
+	"mobi": ["book"],
+	"mod": ["audio"],
+	"mov": ["video"],
+	"mp2": ["video"],
+	"mp3": ["audio"],
+	"mp4": ["video"],
+	"mpa": ["audio"],
+	"mpe": ["video"],
+	"mpeg": ["video"],
+	"mpg": ["video"],
+	"mpv": ["video"],
+	"msg": ["text"],
+	"msi": ["exec"],
+	"mxf": ["video"],
+	"nim": ["code"],
+	"nsv": ["video"],
+	"odp": ["slideshow"],
+	"ods": ["sheet"],
+	"odt": ["text"],
+	"ogg": ["audio"],
+	"ogm": ["video"],
+	"ogv": ["video"],
+	"org": ["text"],
+	"otf": ["font"],
+	"pages": ["text"],
+	"pak": ["archive"],
+	"patch": ["code"],
+	"pdf": ["pdf"],
+	"pea": ["archive"],
+	"php": ["code", "web"],
+	"php3": ["code", "web"],
+	"php4": ["code", "web"],
+	"php5": ["code", "web"],
+	"phtml": ["code", "web"],
+	"pl": ["code"],
+	"pls": ["audio"],
+	"png": ["image"],
+	"po": ["code"],
+	"pp": ["code"],
+	"ppt": ["slideshow"],
+	"ps": ["image"],
+	"psd": ["image"],
+	"py": ["code"],
+	"qt": ["video"],
+	"r": ["code"],
+	"ra": ["audio"],
+	"rar": ["archive"],
+	"rb": ["code"],
+	"rm": ["video"],
+	"rmvb": ["video"],
+	"roq": ["video"],
+	"rpm": ["archive"],
+	"rs": ["code"],
+	"rst": ["text"],
+	"rtf": ["text"],
+	"s": ["code"],
+	"s3m": ["audio"],
+	"s7z": ["archive"],
+	"scala": ["code"],
+	"scss": ["code"],
+	"sh": ["script"],
+	"shar": ["archive"],
+	"sid": ["audio"],
+	"srt": ["subtitle"],
+	"svg": ["image"],
+	"svi": ["video"],
+	"swg": ["code"],
+	"swift": ["code"],
+	"tar": ["archive"],
+	"tbz2": ["archive"],
+	"tex": ["text"],
+	"tga": ["image"],
+	"tgz": ["archive"],
+	"thm": ["image"],
+	"tif": ["image"],
+	"tiff": ["image"],
+	"tlz": ["archive"],
+	"tsv": ["sheet"],
+	"ttf": ["font"],
+	"txt": ["text"],
+	"v": ["code"],
+	"vb": ["code"],
+	"vcf": ["sheet"],
+	"vcxproj": ["code"],
+	"vob": ["video"],
+	"war": ["archive"],
+	"wasm": ["web"],
+	"wav": ["audio"],
+	"webm": ["video"],
+	"webp": ["image"],
+	"whl": ["archive"],
+	"wma": ["audio"],
+	"wmv": ["video"],
+	"woff": ["font"],
+	"woff2": ["font"],
+	"wpd": ["text"],
+	"wps": ["text"],
+	"xcf": ["image"],
+	"xcodeproj": ["code"],
+	"xls": ["sheet"],
+	"xlsx": ["sheet"],
+	"xm": ["audio"],
+	"xml": ["code"],
+	"xpi": ["archive"],
+	"xz": ["archive"],
+	"yuv": ["image", "video"],
+	"zip": ["archive"],
+	"zipx": ["archive"],
+	"zsh": ["script"]
+}
--- a/app/public/ico/font.svg
+++ b/app/public/ico/font.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" version="1" viewBox="0 0 64 64">
+ <path style="opacity:0.2" d="M 12.75,5 C 11.2265,5 10,6.2488 10,7.8 v 50.4 c 0,1.5512 1.2265,2.8 2.75,2.8 h 38.5 C 52.7735,61 54,59.7512 54,58.2 V 21 L 40,19 38,5 Z"/>
+ <path style="fill:#a7a7a7" d="M 12.75,4 C 11.2265,4 10,5.2488 10,6.8 v 50.4 c 0,1.5512 1.2265,2.8 2.75,2.8 h 38.5 C 52.7735,60 54,58.7512 54,57.2 V 20 L 40,18 38,4 Z"/>
+ <path style="opacity:0.2" d="M 38,5 V 18.333333 C 38,19.806134 39.193906,21 40.666666,21 H 54 Z"/>
+ <path style="fill:#c0c0c0" d="M 38,4 V 17.333333 C 38,18.806133 39.193906,20 40.666666,20 H 54 Z"/>
+ <path style="opacity:0.2;fill:#ffffff" d="M 12.75 4 C 11.2265 4 10 5.2495812 10 6.8007812 L 10 7.8007812 C 10 6.2495813 11.2265 5 12.75 5 L 38 5 L 38 4 L 12.75 4 z"/>
+ <path style="opacity:0.1" d="M 45,29.6 C 42.623,30.9 37.732,31.171 33.105,31.117 29.474,31.138 22.385,30.384 21.166,33.933 21.627,33.299 30.069,30.42 29.22,33.995 28.221,36.907 27.034,38.384 25.505,41.02 24.017,41.132 21.959,41.197 20.682,42.084 21.015,41.879 23.846,41.316 24.981,41.935 23.243,44.807 20.852,48.131 19.578,51.259 19.227,52.333 18.437,54.061 19.651,54.839 20.68,55.319 19.959,54.629 20.376,53.957 22.123,50.202 25.127,46.042 27.322,42.555 28.604,43.088 29.847,44.076 31.245,44.23 33.148,44.456 36.427,41.766 36.932,39.917 34.765,41.544 31.025,41.036 28.555,40.984 L 33.291,33.711 C 33.816,33.873 34.743,33.916 36.276,33.933 39.849,34.035 44.417,33.369 44.999,29.6 Z"/>
+ <path style="fill:#4f4f4f" d="M 45,28.6 C 42.623,29.9 37.732,30.171 33.105,30.117 29.474,30.138 22.385,29.384 21.166,32.933 21.627,32.299 30.069,29.42 29.22,32.995 28.221,35.907 27.034,37.384 25.505,40.02 24.017,40.132 21.959,40.197 20.682,41.084 21.015,40.879 23.846,40.316 24.981,40.935 23.243,43.807 20.852,47.131 19.578,50.259 19.227,51.333 18.437,53.061 19.651,53.839 20.68,54.319 19.959,53.629 20.376,52.957 22.123,49.202 25.127,45.042 27.322,41.555 28.604,42.088 29.847,43.076 31.245,43.23 33.148,43.456 36.427,40.766 36.932,38.917 34.765,40.544 31.025,40.036 28.555,39.984 L 33.291,32.711 C 33.816,32.873 34.743,32.916 36.276,32.933 39.849,33.035 44.417,32.369 44.999,28.6 Z"/>
+</svg>
--- a/app/public/ico/gzip.svg
+++ b/app/public/ico/gzip.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" version="1.1" viewBox="0 0 64 64">
+ <path style="opacity:0.2" d="M 12.75,5 C 11.2265,5 10,6.2488 10,7.8 v 50.4 c 0,1.55008 1.2265,2.8 2.75,2.8 h 38.5 C 52.7724,61 54,59.75008 54,58.2 V 23 L 40,19 36,5 Z"/>
+ <path style="fill:#4caf50" d="M 12.75,4 C 11.2265,4 10,5.2488 10,6.8 v 50.4 c 0,1.55008 1.2265,2.8 2.75,2.8 h 38.5 C 52.7724,60 54,58.75008 54,57.2 V 22 L 40,18 36,4 Z"/>
+ <rect style="opacity:0.2" width="10" height="27" x="18" y="4"/>
+ <rect style="fill:#ffffff" width="3" height="3" x="23" y="4"/>
+ <rect style="fill:#ffffff" width="3" height="3" x="20" y="25"/>
+ <path style="fill:#4b4b4b" d="m 23,25 c 3.75,0 3.75,5.600001 5,5.600001 v 7 c 0,0.775599 -0.5575,1.4 -1.25,1.4 h -7.5 c -0.6925,0 -1.25,-0.624401 -1.25,-1.4 v -7 C 19.25,30.600001 19.25,25 23,25 Z"/>
+ <path style="opacity:0.2" d="M 22.667969,32.000001 C 20.082636,32.000001 18,34.102726 18,36.710938 v 9.578125 c 0,2.608213 2.082636,4.710938 4.667969,4.710938 h 0.664062 C 25.917364,51.000001 28,48.897278 28,46.289063 v -9.578125 c 0,-2.608212 -2.082636,-4.710937 -4.667969,-4.710937 z m 0.332031,10 c 2.209139,3e-6 4,1.792881 4,4.001953 0,2.209072 -1.790861,3.998047 -4,3.998047 -2.209139,0 -4,-1.788975 -4,-3.998047 0,-2.209072 1.790861,-4.00195 4,-4.001953 z"/>
+ <path style="fill:#ffffff" d="M 22.667969,31.000001 C 20.082636,31.000001 18,33.102726 18,35.710938 v 9.578125 c 0,2.608213 2.082636,4.710938 4.667969,4.710938 h 0.664062 C 25.917364,50.000001 28,47.897278 28,45.289063 v -9.578125 c 0,-2.608212 -2.082636,-4.710937 -4.667969,-4.710937 z m 0.332031,10 c 2.209139,3e-6 4,1.792881 4,4.001953 0,2.209072 -1.790861,3.998047 -4,3.998047 -2.209139,0 -4,-1.788975 -4,-3.998047 0,-2.209072 1.790861,-4.00195 4,-4.001953 z"/>
+ <path style="fill:#909090" d="M 22.984375,27.000122 A 1.0001,0.99660733 0 0 0 22,28.010254 v 5.979047 a 1.0001,0.99660733 0 1 0 2,0 v -5.979047 a 1.0001,0.99660733 0 0 0 -1.015625,-1.010132 z"/>
+ <rect style="fill:#ffffff" width="3" height="3" x="20" y="7"/>
+ <rect style="fill:#ffffff" width="3" height="3" x="23" y="10"/>
+ <rect style="fill:#ffffff" width="3" height="3" x="20" y="13"/>
+ <rect style="fill:#ffffff" width="3" height="3" x="23" y="16"/>
+ <rect style="fill:#ffffff" width="3" height="3" x="20" y="19"/>
+ <rect style="fill:#ffffff" width="3" height="3" x="23" y="22"/>
+ <path style="opacity:0.2" d="M 54,23 36,5 V 20.1875 C 36,21.74675 37.2555,23 38.8125,23 Z"/>
+ <path style="fill:#88cc8b" d="M 54,22 36,4 V 19.1875 C 36,20.74675 37.2555,22 38.8125,22 Z"/>
+ <path style="opacity:0.2;fill:#ffffff" d="M 12.75 4 C 11.2265 4 10 5.2495812 10 6.8007812 L 10 7.8007812 C 10 6.2495813 11.2265 5 12.75 5 L 36 5 L 36 4 L 12.75 4 z"/>
+</svg>
--- a/app/public/ico/image.svg
+++ b/app/public/ico/image.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" version="1" viewBox="0 0 64 64">
+ <path style="opacity:0.2" d="m 58,54.3326 v -42.666 c 0,-1.4777 -1.16,-2.667 -2.6,-2.667 H 8.6 c -1.4404,0 -2.6,1.1893 -2.6,2.6667 v 42.667 C 6,55.8106 7.1596,57 8.6,57 h 46.8 c 1.4404,0 2.6,-1.1893 2.6,-2.6667 z"/>
+ <path fill="#36aca3" d="m58 53.333v-42.666c0-1.4777-1.16-2.667-2.6-2.667h-46.8c-1.4404 0-2.6 1.1893-2.6 2.6667v42.667c0 1.4773 1.1596 2.6667 2.6 2.6667h46.8c1.4404 0 2.6-1.1893 2.6-2.6667z"/>
+ <path style="opacity:0.2" d="m 22,26.9996 12,15 9,-8 8,8 v 7 H 12 v -10 z"/>
+ <path fill="#fff" d="m22 26 12 15 9-8 8 8v7h-39v-10z"/>
+ <path style="fill:#ffffff;opacity:0.2" d="M 8.5996094 8 C 7.1592094 8 6 9.1886156 6 10.666016 L 6 11.666016 C 6 10.188616 7.1592094 9 8.5996094 9 L 55.400391 9 C 56.840391 9 58 10.188316 58 11.666016 L 58 10.667969 C 58 9.1902687 56.840391 8 55.400391 8 L 8.5996094 8 z"/>
+</svg>
--- a/app/public/ico/iso.svg
+++ b/app/public/ico/iso.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" version="1.1" viewBox="0 0 64 64">
+ <path style="opacity:0.2" d="M 12.75,5 C 11.2265,5 10,6.2488 10,7.8 v 50.4 c 0,1.55008 1.2265,2.8 2.75,2.8 h 38.5 C 52.7724,61 54,59.75008 54,58.2 V 23 L 40,19 36,5 Z"/>
+ <path style="fill:#ce5068" d="M 12.75,4 C 11.2265,4 10,5.2488 10,6.8 v 50.4 c 0,1.55008 1.2265,2.8 2.75,2.8 h 38.5 C 52.7724,60 54,58.75008 54,57.2 V 22 L 40,18 36,4 Z"/>
+ <path style="opacity:0.2" d="M 54,23 36,5 V 20.1875 C 36,21.74675 37.2555,23 38.8125,23 Z"/>
+ <path style="fill:#ef8b9d" d="M 54,22 36,4 V 19.1875 C 36,20.74675 37.2555,22 38.8125,22 Z"/>
+ <path style="opacity:0.2;fill:#ffffff" d="M 12.75 4 C 11.2265 4 10 5.2495812 10 6.8007812 L 10 7.8007812 C 10 6.2495813 11.2265 5 12.75 5 L 36 5 L 36 4 L 12.75 4 z"/>
+ <path style="opacity:0.2" d="m 32,28 c -7.756,0 -14,6.244 -14,14 0,7.756 6.244,14 14,14 7.756,0 14,-6.244 14,-14 0,-7.756 -6.244,-14 -14,-14 z m 0,8 a 6,6 0 0 1 6,6 6,6 0 0 1 -6,6 6,6 0 0 1 -6,-6 6,6 0 0 1 6,-6 z"/>
+ <path style="fill:#ffffff" d="M 32 27 C 24.244 27 18 33.244 18 41 C 18 48.756 24.244 55 32 55 C 39.756 55 46 48.756 46 41 C 46 33.244 39.756 27 32 27 z M 32 35 A 6 6 0 0 1 38 41 A 6 6 0 0 1 32 47 A 6 6 0 0 1 26 41 A 6 6 0 0 1 32 35 z"/>
+ <path style="opacity:0.5;fill:#ffffff" d="M 32 34 A 7 7 0 0 0 25 41 A 7 7 0 0 0 32 48 A 7 7 0 0 0 39 41 A 7 7 0 0 0 32 34 z M 32 38 C 33.6569 38 35 39.3431 35 41 C 35 42.6569 33.6569 44 32 44 C 30.3431 44 29 42.6569 29 41 C 29 39.3431 30.3431 38 32 38 z"/>
+</svg>
--- a/app/public/ico/lua.svg
+++ b/app/public/ico/lua.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" version="1.1" viewBox="0 0 64 64">
+ <path style="opacity:0.2" d="M 12.75,5 C 11.2265,5 10,6.2488 10,7.8 v 50.4 c 0,1.55008 1.2265,2.8 2.75,2.8 h 38.5 C 52.7724,61 54,59.75008 54,58.2 V 23 L 40,19 36,5 Z"/>
+ <path style="fill:#31519b" d="M 12.75,4 C 11.2265,4 10,5.2488 10,6.8 v 50.4 c 0,1.55008 1.2265,2.8 2.75,2.8 h 38.5 C 52.7724,60 54,58.75008 54,57.2 V 22 L 40,18 36,4 Z"/>
+ <path style="opacity:0.2" d="M 54,23 36,5 V 20.1875 C 36,21.74675 37.2555,23 38.8125,23 Z"/>
+ <path style="fill:#4d6eb9" d="M 54,22 36,4 V 19.1875 C 36,20.74675 37.2555,22 38.8125,22 Z"/>
+ <path style="opacity:0.1;fill:#ffffff" d="M 12.75 4 C 11.2265 4 10 5.2495812 10 6.8007812 L 10 7.8007812 C 10 6.2495813 11.2265 5 12.75 5 L 36 5 L 36 4 L 12.75 4 z"/>
+ <path style="opacity:0.2" d="M 40.5,29 A 3.5,3.5 0 0 0 37,32.5 3.5,3.5 0 0 0 40.5,36 3.5,3.5 0 0 0 44,32.5 3.5,3.5 0 0 0 40.5,29 Z m -11,4 A 10.5,10.5 0 0 0 19,43.5 10.5,10.5 0 0 0 29.5,54 10.5,10.5 0 0 0 40,43.5 10.5,10.5 0 0 0 29.5,33 Z m 4,3 A 3.5,3.5 0 0 1 37,39.5 3.5,3.5 0 0 1 33.5,43 3.5,3.5 0 0 1 30,39.5 3.5,3.5 0 0 1 33.5,36 Z"/>
+ <path style="fill:#ffffff" d="M 40.5 28 A 3.5 3.5 0 0 0 37 31.5 A 3.5 3.5 0 0 0 40.5 35 A 3.5 3.5 0 0 0 44 31.5 A 3.5 3.5 0 0 0 40.5 28 z M 29.5 32 A 10.5 10.5 0 0 0 19 42.5 A 10.5 10.5 0 0 0 29.5 53 A 10.5 10.5 0 0 0 40 42.5 A 10.5 10.5 0 0 0 29.5 32 z M 33.5 35 A 3.5 3.5 0 0 1 37 38.5 A 3.5 3.5 0 0 1 33.5 42 A 3.5 3.5 0 0 1 30 38.5 A 3.5 3.5 0 0 1 33.5 35 z"/>
+</svg>
--- a/app/public/ico/pdf.svg
+++ b/app/public/ico/pdf.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" version="1.1" viewBox="0 0 64 64">
+ <path style="opacity:0.2" d="M 12.75,5 C 11.2265,5 10,6.2488 10,7.8 v 50.4 c 0,1.55008 1.2265,2.8 2.75,2.8 h 38.5 C 52.7724,61 54,59.75008 54,58.2 V 23 L 40,19 36,5 Z"/>
+ <path style="fill:#c03630" d="M 12.75,4 C 11.2265,4 10,5.2488 10,6.8 v 50.4 c 0,1.55008 1.2265,2.8 2.75,2.8 h 38.5 C 52.7724,60 54,58.75008 54,57.2 V 22 L 40,18 36,4 Z"/>
+ <path style="opacity:0.2" d="M 54,23 36,5 V 20.1875 C 36,21.74675 37.2555,23 38.8125,23 Z"/>
+ <path style="fill:#f36961" d="M 54,22 36,4 V 19.1875 C 36,20.74675 37.2555,22 38.8125,22 Z"/>
+ <path style="opacity:0.1;fill:#ffffff" d="M 12.75 4 C 11.2265 4 10 5.2495812 10 6.8007812 L 10 7.8007812 C 10 6.2495813 11.2265 5 12.75 5 L 36 5 L 36 4 L 12.75 4 z"/>
+ <path style="opacity:0.2" d="m 30.293017,28.000003 c -0.645764,0 -1.249654,0.311804 -1.395744,0.826445 -0.542528,1.972993 0.06468,5.024185 1.077384,8.825849 l -0.305494,0.736026 c -0.775418,1.86458 -1.74468,3.721563 -2.597,5.369453 -3.5189,6.792089 -6.25646,10.456752 -8.08178,10.713492 l -0.007,-0.07458 c -0.03962,-0.84723 1.54532,-3.031582 3.69348,-4.768274 0.22407,-0.178765 1.180256,-1.091333 1.180256,-1.091333 0,0 -1.290674,0.672124 -1.5806,0.845462 -2.69192,1.585051 -4.03144,3.17314 -4.24984,4.227309 -0.06482,0.313116 -0.02324,0.698406 0.25725,0.856593 l 0.68824,0.341041 c 1.87376,0.925246 4.17774,-1.507573 7.2408,-6.803414 3.11696,-1.008677 7.00602,-1.958354 10.5469,-2.47294 3.1696,1.786549 6.8054,2.637149 8.20232,2.269923 0.265818,-0.06933 0.54544,-0.275164 0.68824,-0.464757 0.112,-0.174443 0.268562,-0.872448 0.268562,-0.872448 0,0 -0.262822,0.352821 -0.47922,0.456829 -0.884128,0.41171 -3.67542,-0.275163 -6.53968,-1.657557 2.4766,-0.260027 4.53978,-0.270054 5.64242,0.07762 1.40042,0.440975 1.40154,0.892985 1.382892,0.98506 0.0189,-0.07582 0.08162,-0.378661 0.07392,-0.507583 -0.03178,-0.331539 -0.13538,-0.627599 -0.38913,-0.872448 -0.518378,-0.5038 -1.7983,-0.757681 -3.54242,-0.780428 -1.3146,-0.01409 -2.891,0.09944 -4.60208,0.341041 -0.784168,-0.444206 -1.61168,-0.932524 -2.2673,-1.537128 -1.66278,-1.532018 -3.05648,-3.659 -3.92196,-6.043551 0.05908,-0.228608 0.11564,-0.451982 0.167216,-0.677345 0.240562,-1.067164 0.413238,-4.595363 0.413238,-4.595363 0,0 -0.685076,2.650544 -0.792708,3.050363 -0.06916,0.253523 -0.155204,0.524115 -0.254058,0.805812 -0.525,-1.820109 -0.791126,-3.584147 -0.791126,-4.922125 0,-0.378122 0.0329,-1.113914 0.14147,-1.695674 0.05292,-0.414942 0.20524,-0.630416 0.36344,-0.734438 0.312998,0.07485 0.663362,0.548394 1.029126,1.340381 0.31409,0.684733 0.294238,1.477742 0.294238,1.968574 0,0 0.336854,-1.215326 0.258888,-1.933633 -0.04746,-0.431211 -0.463344,-1.540581 -1.347472,-1.527599 h -0.07238 l -0.393946,-0.0041 z m 0.300692,11.019675 c 0.914914,1.814723 2.17672,3.538157 3.83194,4.920606 0.368998,0.307688 0.7616,0.600419 1.165766,0.875596 -3.00594,0.551474 -6.16294,1.327234 -9.0965,2.539645 0.530474,-0.929582 1.104054,-1.942333 1.69162,-3.034481 1.137836,-2.122425 1.82728,-3.759542 2.40716,-5.301228 z"/>
+ <path style="fill:#ffffff" d="m 30.293017,27.000003 c -0.645764,0 -1.249654,0.311804 -1.395744,0.826445 -0.542528,1.972993 0.06468,5.024185 1.077384,8.825849 l -0.305494,0.736026 c -0.775418,1.86458 -1.74468,3.721563 -2.597,5.369453 -3.5189,6.792089 -6.25646,10.456752 -8.08178,10.713492 l -0.007,-0.07458 c -0.03962,-0.84723 1.54532,-3.031582 3.69348,-4.768274 0.22407,-0.178765 1.180256,-1.091333 1.180256,-1.091333 0,0 -1.290674,0.672124 -1.5806,0.845462 -2.69192,1.585051 -4.03144,3.17314 -4.24984,4.227309 -0.06482,0.313116 -0.02324,0.698406 0.25725,0.856593 l 0.68824,0.341041 c 1.87376,0.925246 4.17774,-1.507573 7.2408,-6.803414 3.11696,-1.008677 7.00602,-1.958354 10.5469,-2.47294 3.1696,1.786549 6.8054,2.637149 8.20232,2.269923 0.265818,-0.06933 0.54544,-0.275164 0.68824,-0.464757 0.112,-0.174443 0.268562,-0.872448 0.268562,-0.872448 0,0 -0.262822,0.352821 -0.47922,0.456829 -0.884128,0.41171 -3.67542,-0.275163 -6.53968,-1.657557 2.4766,-0.260027 4.53978,-0.270054 5.64242,0.07762 1.40042,0.440975 1.40154,0.892985 1.382892,0.98506 0.0189,-0.07582 0.08162,-0.378661 0.07392,-0.507583 -0.03178,-0.331539 -0.13538,-0.627599 -0.38913,-0.872448 -0.518378,-0.5038 -1.7983,-0.757681 -3.54242,-0.780428 -1.3146,-0.01409 -2.891,0.09944 -4.60208,0.341041 -0.784168,-0.444206 -1.61168,-0.932524 -2.2673,-1.537128 -1.66278,-1.532018 -3.05648,-3.659 -3.92196,-6.043551 0.05908,-0.228608 0.11564,-0.451982 0.167216,-0.677345 0.240562,-1.067164 0.413238,-4.595363 0.413238,-4.595363 0,0 -0.685076,2.650544 -0.792708,3.050363 -0.06916,0.253523 -0.155204,0.524115 -0.254058,0.805812 -0.525,-1.820109 -0.791126,-3.584147 -0.791126,-4.922125 0,-0.378122 0.0329,-1.113914 0.14147,-1.695674 0.05292,-0.414942 0.20524,-0.630416 0.36344,-0.734438 0.312998,0.07485 0.663362,0.548394 1.029126,1.340381 0.31409,0.684733 0.294238,1.477742 0.294238,1.968574 0,0 0.336854,-1.215326 0.258888,-1.933633 -0.04746,-0.431211 -0.463344,-1.540581 -1.347472,-1.527599 h -0.07238 l -0.393946,-0.0041 z m 0.300692,11.019675 c 0.914914,1.814723 2.17672,3.538157 3.83194,4.920606 0.368998,0.307688 0.7616,0.600419 1.165766,0.875596 -3.00594,0.551474 -6.16294,1.327234 -9.0965,2.539645 0.530474,-0.929582 1.104054,-1.942333 1.69162,-3.034481 1.137836,-2.122425 1.82728,-3.759542 2.40716,-5.301228 z"/>
+</svg>
--- a/app/public/ico/script.svg
+++ b/app/public/ico/script.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" version="1.1" viewBox="0 0 64 64">
+ <path style="opacity:0.2" d="M 12.75,5 C 11.2265,5 10,6.2488 10,7.8 v 50.4 c 0,1.55008 1.2265,2.8 2.75,2.8 h 38.5 C 52.7724,61 54,59.75008 54,58.2 V 23 L 40,19 36,5 Z"/>
+ <path style="fill:#4f4f4f" d="M 12.75,4 C 11.2265,4 10,5.2488 10,6.8 v 50.4 c 0,1.55008 1.2265,2.8 2.75,2.8 h 38.5 C 52.7724,60 54,58.75008 54,57.2 V 22 L 40,18 36,4 Z"/>
+ <path style="opacity:0.2" d="M 54,23 36,5 V 20.1875 C 36,21.74675 37.2555,23 38.8125,23 Z"/>
+ <path style="fill:#696969" d="M 54,22 36,4 V 19.1875 C 36,20.74675 37.2555,22 38.8125,22 Z"/>
+ <path style="opacity:0.1;fill:#ffffff" d="M 12.75 4 C 11.2265 4 10 5.2495812 10 6.8007812 L 10 7.8007812 C 10 6.2495813 11.2265 5 12.75 5 L 36 5 L 36 4 L 12.75 4 z"/>
+ <path style="opacity:0.2" d="M 24.476562,30 A 1.50015,1.4972215 0 0 0 23,31.519531 V 35 h -3.482422 a 1.4972215,1.50015 0 1 0 0,3 H 23 v 6 h -3.482422 a 1.4972215,1.50015 0 1 0 0,3 H 23 v 3.482422 a 1.50015,1.4972215 0 1 0 3,0 V 47 h 6 v 3.482422 a 1.50015,1.4972215 0 1 0 3,0 V 47 h 3.482422 A 1.4972215,1.50015 0 0 0 40,45.476562 1.4972215,1.50015 0 0 0 38.482422,44 H 35 v -6 h 3.482422 A 1.4972215,1.50015 0 0 0 40,36.476562 1.4972215,1.50015 0 0 0 38.482422,35 H 35 V 31.519531 A 1.50015,1.4972215 0 0 0 33.476562,30 1.50015,1.4972215 0 0 0 32,31.519531 V 35 H 26 V 31.519531 A 1.50015,1.4972215 0 0 0 24.476562,30 Z m 20,0 C 43.648902,30.0129 42.988128,30.693471 43,31.519531 v 13.962891 c -0.02869,2.024524 3.028688,2.024524 3,0 V 31.519531 C 46.01214,30.675147 45.322582,29.986804 44.476562,30 Z M 26,38 h 6 v 6 H 26 Z M 44.5,50 A 1.5,1.5 0 0 0 43,51.5 1.5,1.5 0 0 0 44.5,53 1.5,1.5 0 0 0 46,51.5 1.5,1.5 0 0 0 44.5,50 Z"/>
+ <path style="fill:#ffffff" d="M 24.476562 29 A 1.50015 1.4972215 0 0 0 23 30.519531 L 23 34 L 19.517578 34 A 1.4972215 1.50015 0 1 0 19.517578 37 L 23 37 L 23 43 L 19.517578 43 A 1.4972215 1.50015 0 1 0 19.517578 46 L 23 46 L 23 49.482422 A 1.50015 1.4972215 0 1 0 26 49.482422 L 26 46 L 32 46 L 32 49.482422 A 1.50015 1.4972215 0 1 0 35 49.482422 L 35 46 L 38.482422 46 A 1.4972215 1.50015 0 0 0 40 44.476562 A 1.4972215 1.50015 0 0 0 38.482422 43 L 35 43 L 35 37 L 38.482422 37 A 1.4972215 1.50015 0 0 0 40 35.476562 A 1.4972215 1.50015 0 0 0 38.482422 34 L 35 34 L 35 30.519531 A 1.50015 1.4972215 0 0 0 33.476562 29 A 1.50015 1.4972215 0 0 0 32 30.519531 L 32 34 L 26 34 L 26 30.519531 A 1.50015 1.4972215 0 0 0 24.476562 29 z M 44.476562 29 C 43.648902 29.0129 42.988128 29.693471 43 30.519531 L 43 44.482422 C 42.97131 46.506946 46.028688 46.506946 46 44.482422 L 46 30.519531 C 46.01214 29.675147 45.322582 28.986804 44.476562 29 z M 26 37 L 32 37 L 32 43 L 26 43 L 26 37 z M 44.5 49 A 1.5 1.5 0 0 0 43 50.5 A 1.5 1.5 0 0 0 44.5 52 A 1.5 1.5 0 0 0 46 50.5 A 1.5 1.5 0 0 0 44.5 49 z"/>
+</svg>
--- a/app/public/ico/sheet.svg
+++ b/app/public/ico/sheet.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" version="1.1" viewBox="0 0 64 64">
+ <path style="opacity:0.2" d="M 12.75,5 C 11.2265,5 10,6.2488 10,7.8 v 50.4 c 0,1.55008 1.2265,2.8 2.75,2.8 h 38.5 C 52.7724,61 54,59.75008 54,58.2 V 23 L 40,19 36,5 Z"/>
+ <path style="fill:#4bae4f" d="M 12.75,4 C 11.2265,4 10,5.2488 10,6.8 v 50.4 c 0,1.55008 1.2265,2.8 2.75,2.8 h 38.5 C 52.7724,60 54,58.75008 54,57.2 V 22 L 40,18 36,4 Z"/>
+ <path style="opacity:0.2" d="M 54,23 36,5 V 20.1875 C 36,21.74675 37.2555,23 38.8125,23 Z"/>
+ <path style="fill:#95cd97" d="M 54,22 36,4 V 19.1875 C 36,20.74675 37.2555,22 38.8125,22 Z"/>
+ <path style="opacity:0.2;fill:#ffffff" d="M 12.75 4 C 11.2265 4 10 5.2495812 10 6.8007812 L 10 7.8007812 C 10 6.2495813 11.2265 5 12.75 5 L 36 5 L 36 4 L 12.75 4 z"/>
+ <path style="opacity:0.2" d="M 21,33 V 50 H 43 V 33 Z m 2,2 h 8 v 3 h -8 z m 10,0 h 8 v 3 h -8 z m -10,5 h 8 v 3 h -8 z m 10,0 h 8 v 3 h -8 z m -10,5 h 8 v 3 h -8 z m 10,0 h 8 v 3 h -8 z"/>
+ <path style="fill:#ffffff" d="M 21,32 V 49 H 43 V 32 Z m 2,2 h 8 v 3 h -8 z m 10,0 h 8 v 3 h -8 z m -10,5 h 8 v 3 h -8 z m 10,0 h 8 v 3 h -8 z m -10,5 h 8 v 3 h -8 z m 10,0 h 8 v 3 h -8 z"/>
+</svg>
--- a/app/public/ico/slideshow.svg
+++ b/app/public/ico/slideshow.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" version="1.1" viewBox="0 0 64 64">
+ <path style="opacity:0.2" d="M 12.75,5 C 11.2265,5 10,6.2488 10,7.8 v 50.4 c 0,1.55008 1.2265,2.8 2.75,2.8 h 38.5 C 52.7724,61 54,59.75008 54,58.2 V 23 L 40,19 36,5 Z"/>
+ <path style="fill:#ff5722" d="M 12.75,4 C 11.2265,4 10,5.2488 10,6.8 v 50.4 c 0,1.55008 1.2265,2.8 2.75,2.8 h 38.5 C 52.7724,60 54,58.75008 54,57.2 V 22 L 40,18 36,4 Z"/>
+ <path style="opacity:0.2" d="M 54,23 36,5 V 20.1875 C 36,21.74675 37.2555,23 38.8125,23 Z"/>
+ <path style="fill:#ff8660" d="M 54,22 36,4 V 19.1875 C 36,20.74675 37.2555,22 38.8125,22 Z"/>
+ <path style="opacity:0.2;fill:#ffffff" d="M 12.75 4 C 11.2265 4 10 5.2495812 10 6.8007812 L 10 7.8007812 C 10 6.2495813 11.2265 5 12.75 5 L 36 5 L 36 4 L 12.75 4 z"/>
+ <path style="opacity:0.2" d="m 24,34 c -3.31365,0 -6,2.68635 -6,6 0,3.31365 2.68635,6 6,6 3.31365,0 6,-2.68635 6,-6 h -6 z m 9,0 v 3 h 13 v -3 z m 0,7 v 3 h 13 v -3 z m -15,7 v 3 h 22 v -3 z"/>
+ <path style="fill:#ffffff" d="M 24 33 C 20.68635 33 18 35.68635 18 39 C 18 42.31365 20.68635 45 24 45 C 27.31365 45 30 42.31365 30 39 L 24 39 L 24 33 z M 33 33 L 33 36 L 46 36 L 46 33 L 33 33 z M 33 40 L 33 43 L 46 43 L 46 40 L 33 40 z M 18 47 L 18 50 L 40 50 L 40 47 L 18 47 z"/>
+</svg>
--- a/app/public/ico/subtitle.svg
+++ b/app/public/ico/subtitle.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" version="1" viewBox="0 0 64 64">
+ <path style="opacity:0.2" d="m 58,54.3333 v -42.666 c 0,-1.4777 -1.16,-2.667 -2.6,-2.667 H 8.6 C 7.1596,9.0003 6,10.1896 6,11.667 V 54.333 C 6,55.811 7.1596,57 8.6,57 h 46.8 c 1.44,0 2.6,-1.189 2.6,-2.667 z"/>
+ <path style="fill:#607d8b" d="M 58,53.333 V 10.667 C 58,9.1893 56.84,8 55.4,8 H 8.6 C 7.1596,8 6,9.1893 6,10.6667 v 42.666 c 0,1.478 1.1596,2.667 2.6,2.667 h 46.8 c 1.44,0 2.6,-1.189 2.6,-2.667 z"/>
+ <path style="opacity:0.2" d="m 19,23.0003 v 3 h 26 v -3 z m 0,6 v 3 h 26 v -3 z m 0,6 v 3 h 26 v -3 z m 0,6 v 3 h 16 v -3 z"/>
+ <path style="fill:#ffffff" d="m 19,22 v 3 h 26 v -3 z m 0,6 v 3 h 26 v -3 z m 0,6 v 3 h 26 v -3 z m 0,6 v 3 h 16 v -3 z"/>
+ <path style="fill:#ffffff;opacity:0.2" d="M 8.5996094 8 C 7.1592094 8 6 9.1886156 6 10.666016 L 6 11.667969 C 6 10.190569 7.1592094 9 8.5996094 9 L 55.400391 9 C 56.840391 9 58 10.190269 58 11.667969 L 58 10.667969 C 58 9.1902687 56.840391 8 55.400391 8 L 8.5996094 8 z"/>
+</svg>
--- a/app/public/ico/text.svg
+++ b/app/public/ico/text.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" version="1.1" viewBox="0 0 64 64">
+ <path style="opacity:0.2" d="M 12.75,5 C 11.2265,5 10,6.2488 10,7.8 v 50.4 c 0,1.55008 1.2265,2.8 2.75,2.8 h 38.5 C 52.7724,61 54,59.75008 54,58.2 V 23 L 40,19 36,5 Z"/>
+ <path style="fill:#e4e4e4" d="M 12.75,4 C 11.2265,4 10,5.2488 10,6.8 v 50.4 c 0,1.55008 1.2265,2.8 2.75,2.8 h 38.5 C 52.7724,60 54,58.75008 54,57.2 V 22 L 40,18 36,4 Z"/>
+ <path style="opacity:0.2" d="M 54,23 36,5 V 20.1875 C 36,21.74675 37.2555,23 38.8125,23 Z"/>
+ <path style="fill:#fafafa" d="M 54,22 36,4 V 19.1875 C 36,20.74675 37.2555,22 38.8125,22 Z"/>
+ <path style="opacity:0.2;fill:#ffffff" d="M 12.75 4 C 11.2265 4 10 5.2495812 10 6.8007812 L 10 7.8007812 C 10 6.2495813 11.2265 5 12.75 5 L 36 5 L 36 4 L 12.75 4 z"/>
+ <path style="opacity:0.5" d="m 20,31 v 3 h 24 v -3 z m 0,6 v 3 h 24 v -3 z m 0,6 v 3 h 24 v -3 z m 0,6 v 3 h 15 v -3 z"/>
+</svg>
--- a/app/public/ico/unknown.svg
+++ b/app/public/ico/unknown.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" version="1.1" viewBox="0 0 64 64">
+ <path style="opacity:0.2" d="M 12.75,5 C 11.2265,5 10,6.2488 10,7.8 v 50.4 c 0,1.55008 1.2265,2.8 2.75,2.8 h 38.5 C 52.7724,61 54,59.75008 54,58.2 V 23 L 40,19 36,5 Z"/>
+ <path style="fill:#868686" d="M 12.75,4 C 11.2265,4 10,5.2488 10,6.8 v 50.4 c 0,1.55008 1.2265,2.8 2.75,2.8 h 38.5 C 52.7724,60 54,58.75008 54,57.2 V 22 L 40,18 36,4 Z"/>
+ <path style="opacity:0.2" d="m 32,29 c -3.978906,0.0034 -7.638282,4.03757 -8,8 h 4 c 0.332606,-1.62943 1.135198,-4.189574 4,-4 1.932996,0 4,2.067004 4,4 0,3.5 -6,4.96993 -6,12 h 4 c -0.341168,-4.866068 5.883718,-7.648794 6,-12 0,-4.252592 -2.925144,-8 -8,-8 z m -2,22 v 4 h 4 v -4 z"/>
+ <path style="fill:#ffffff" d="m 32,28 c -3.978906,0.0034 -7.638282,4.03757 -8,8 h 4 c 0.332606,-1.62943 1.135198,-4.189574 4,-4 1.932996,0 4,2.067004 4,4 0,3.5 -6,4.96993 -6,12 h 4 c -0.341168,-4.866068 5.883718,-7.648794 6,-12 0,-4.252592 -2.925144,-8 -8,-8 z m -2,22 v 4 h 4 v -4 z"/>
+ <path style="opacity:0.2" d="M 54,23 36,5 V 20.1875 C 36,21.74675 37.2555,23 38.8125,23 Z"/>
+ <path style="fill:#a0a0a0" d="M 54,22 36,4 V 19.1875 C 36,20.74675 37.2555,22 38.8125,22 Z"/>
+ <path style="opacity:0.1;fill:#ffffff" d="M 12.75 4 C 11.2265 4 10 5.2495812 10 6.8007812 L 10 7.8007812 C 10 6.2495813 11.2265 5 12.75 5 L 36 5 L 36 4 L 12.75 4 z"/>
+</svg>
--- a/app/public/ico/video.svg
+++ b/app/public/ico/video.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" version="1" viewBox="0 0 64 64">
+ <path style="opacity:0.2" d="m 58,54.3326 v -42.666 c 0,-1.4777 -1.16,-2.667 -2.6,-2.667 H 8.6 c -1.4404,0 -2.6,1.1893 -2.6,2.6667 v 42.667 C 6,55.8106 7.1596,57 8.6,57 h 46.8 c 1.4404,0 2.6,-1.1893 2.6,-2.6667 z"/>
+ <path fill="#7282d9" d="m58 53.333v-42.666c0-1.4777-1.16-2.667-2.6-2.667h-46.8c-1.4404 0-2.6 1.1893-2.6 2.6667v42.667c0 1.4773 1.1596 2.6667 2.6 2.6667h46.8c1.4404 0 2.6-1.1893 2.6-2.6667z"/>
+ <path style="opacity:0.2" d="M 21.296,24.9996 H 37.7 c 1.3,0 1.3,1.2857 1.3,1.2857 v 15.429 c 0,1.285 -1.3,1.285 -1.3,1.285 H 21.3 c 0,0 -1.3,0 -1.3,-1.2857 v -15.428 c 0,0 0,-1.286 1.3,-1.286 z m 25.704,2 v 15 l -8,-8 z"/>
+ <path fill="#fff" d="m21.296 24h16.404c1.3 0 1.3 1.2857 1.3 1.2857v15.429c0 1.285-1.3 1.285-1.3 1.285h-16.4s-1.3 0-1.3-1.2857v-15.428s0-1.286 1.3-1.286zm25.704 2v15l-8-8z"/>
+ <path style="fill:#ffffff;opacity:0.2" d="M 8.5996094 8 C 7.1592094 8 6 9.1886156 6 10.666016 L 6 11.666016 C 6 10.188616 7.1592094 9 8.5996094 9 L 55.400391 9 C 56.840391 9 58 10.188316 58 11.666016 L 58 10.667969 C 58 9.1902687 56.840391 8 55.400391 8 L 8.5996094 8 z"/>
+</svg>
--- a/app/public/img/add-sharp-white.svg
+++ b/app/public/img/add-sharp-white.svg
--- a/app/public/img/add-sharp.svg
+++ b/app/public/img/add-sharp.svg
--- a/app/public/img/arrow-down-white.svg
+++ b/app/public/img/arrow-down-white.svg
--- a/app/public/img/arrow-down.svg
+++ b/app/public/img/arrow-down.svg
--- a/app/public/img/checkmark.svg
+++ b/app/public/img/checkmark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="checkmark" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M416 128L192 384l-96-96"/></svg>
--- a/app/public/img/cloud-download-outline-white.svg
+++ b/app/public/img/cloud-download-outline-white.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" color="#FFFFFF" viewBox="0 0 512 512"><path color="#FFFFFF" d="M320 336h76c55 0 100-21.21 100-75.6s-53-73.47-96-75.6C391.11 99.74 329 48 256 48c-69 0-113.44 45.79-128 91.2-60 5.7-112 35.88-112 98.4S70 336 136 336h56M192 400.1l64 63.9 64-63.9M256 224v224.03" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/></svg>
--- a/app/public/img/cloud-download-outline.svg
+++ b/app/public/img/cloud-download-outline.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path d="M320 336h76c55 0 100-21.21 100-75.6s-53-73.47-96-75.6C391.11 99.74 329 48 256 48c-69 0-113.44 45.79-128 91.2-60 5.7-112 35.88-112 98.4S70 336 136 336h56M192 400.1l64 63.9 64-63.9M256 224v224.03" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/></svg>
--- a/app/public/img/cloud-upload-outline.svg
+++ b/app/public/img/cloud-upload-outline.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path d="M320 367.79h76c55 0 100-29.21 100-83.6s-53-81.47-96-83.6c-8.89-85.06-71-136.8-144-136.8-69 0-113.44 45.79-128 91.2-60 5.7-112 43.88-112 106.4s54 106.4 120 106.4h56" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M320 255.79l-64-64-64 64M256 448.21V207.79"/></svg>
--- a/app/public/img/copy-outline.svg
+++ b/app/public/img/copy-outline.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><rect x="128" y="128" width="336" height="336" rx="57" ry="57" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"/><path d="M383.5 128l.5-24a56.16 56.16 0 00-56-56H112a64.19 64.19 0 00-64 64v216a56.16 56.16 0 0056 56h24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/></svg>
--- a/app/public/img/download-outline-white.svg
+++ b/app/public/img/download-outline-white.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" color="#FFFFFF" class="ionicon" viewBox="0 0 512 512"><path d="M336 176h40a40 40 0 0140 40v208a40 40 0 01-40 40H136a40 40 0 01-40-40V216a40 40 0 0140-40h40" color="#FFFFFF" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/><path fill="none" color="#FFFFFF" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M176 272l80 80 80-80M256 48v288"/></svg>
--- a/app/public/js/download.js
+++ b/app/public/js/download.js
@@ -0,0 +1,127 @@
+function copyToClipboard(button) {
+    input = button.parentElement.getElementsByTagName("input")[0];
+    input.select();
+    input.setSelectionRange(0, 99999);
+    navigator.clipboard.writeText(input.value)
+    temp0.parentElement.getElementsByClassName("copy")[0].classList.add("hidden");
+    temp0.parentElement.getElementsByClassName("checkmark")[1].classList.remove("hidden");
+}
+
+
+
+/*
+<div class="container">
+    <div class="file">
+        <img class="icon" src="/ico/image.svg" alt="" srcset="">
+        <div class="filename">
+            <p>test.svg</p>
+        </div>
+    </div>
+    <div class="button primary">
+        <p>Download</p>
+    </div>
+</div> 
+*/
+class file {
+    constructor(filename, extensions, index=0, hash="") {
+        this.filename = filename;
+        this.index = index;
+        this.hash = hash;
+        this.extensions = extensions;
+    }
+
+    getImage() {
+        var keys = Object.keys(this.extensions);
+        for(var i = 0; i < keys.length; i++) {
+            if (this.filename.endsWith("." + keys[i])) {
+                return "/ico/" + this.extensions[keys[i]][0] + ".svg";
+            };
+        }
+        return "/ico/unknown.svg";
+    }
+
+    getElement() {
+        if (this.hash.length > 0) {
+            var body = document.createElement("a");
+            body.href = document.location.protocol+"//"+document.location.host+"/download/"+this.hash+"/index/"+this.index;
+        } else {
+            var body = document.createElement("div");
+        }
+        
+        body.classList.add("file");
+        var icon = document.createElement("img");
+        icon.classList.add("icon");
+        icon.src = this.getImage();
+        body.appendChild(icon);
+        var fn = document.createElement("div");
+        fn.classList.add("filename");
+        var p = document.createElement("p");
+        p.innerText = this.shortString(this.filename, 15);
+        fn.appendChild(p);
+        body.appendChild(fn);
+        return body;
+    }
+
+    shortString(str, maxlen = 18) {
+        if (str.length > maxlen) {
+            var shortstr = str.slice(0, (maxlen - 3) / 2) + "..." + str.slice(-(maxlen - 3) / 2);
+        } else {
+            shortstr = str;
+        }
+        return shortstr;
+    }
+}
+
+
+
+function loadPage(hash) {
+    fetch('/api/download/' + hash)
+        .then(
+            response => response.json()
+        ).then(jsonResponse => {
+            console.log(jsonResponse);
+
+            if (jsonResponse.code == 200) {
+                var files = jsonResponse.result.files;
+                console.log(files);
+                fetch('/ico/extensions.json')
+                .then(
+                    response=>response.json()
+                ).then(jsonResponse => {
+                    var extensions = jsonResponse;
+                    vc = document.getElementsByClassName("view-container")[0];
+                    if (files.length > 1) {
+                        fc = document.getElementsByClassName("file-container")[0];
+                        for(var i = 0; i < files.length; i++) {
+                            var fo = new file(files[i].filename, extensions, i, hash)
+                            fc.appendChild(fo.getElement());
+                        }
+                        vc.classList.remove("hidden");
+                    } else if (files.length == 1) {
+                        var container = document.createElement("div");
+                        container.classList.add("container");
+                        console.log(extensions);
+                        var fo = new file(files[0].filename, extensions, 0);
+                        container.appendChild(fo.getElement());
+                        container.innerHTML = container.innerHTML+"<a target=\”_blank\” href='"+document.location.protocol+"//"+document.location.host+"/download/"+hash+"/index/"+0+"'><div class=\"button primary\"><p>Download</p></div></a>";
+                        vc.innerHTML = "";
+                        vc.appendChild(container);
+                        vc.classList.remove("hidden");
+                    } else {
+                        document.getElementsByClassName("container")[0].innerHTML = "<h1>Invalid Response</h1>";
+                    }
+                })
+            } else {
+                document.getElementsByClassName("container")[0].innerHTML = "<h1>404 Not Found</h1>";
+            }
+        });
+}
+
+/* 
+<div class="file">
+    <img class="icon" src="/ico/image.svg" alt="" srcset="">
+    <div class="filename">
+        <p>test.svg</p>
+    </div>
+</div> 
+*/
--- a/app/public/js/siofu-client.js
+++ b/app/public/js/siofu-client.js
--- a/app/public/js/socket.io.js
+++ b/app/public/js/socket.io.js
--- a/app/public/script.js
+++ b/app/public/script.js
--- a/docker/Dockerfile
+++ b/docker/Dockerfile
@@ -0,0 +1,10 @@
+FROM node:12.18.1
+ENV NODE_ENV=production
+
+COPY "../app" "/app"
+
+WORKDIR /app
+
+RUN npm install --production
+
+CMD [ "node", "app.js" ]
--- a/docker/docker-compose.yml
+++ b/docker/docker-compose.yml
@@ -0,0 +1,11 @@
+version: '3'
+
+services:
+  node:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    container_name: Kakubovna
+    restart: always
+    ports:
+    - 80:80
--- a/forms/download.html
+++ b/forms/download.html
@@ -1,73 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Kakubovna: Download</title>
-  <link rel="stylesheet" href="/css/style.css">
-  <link href="https://fonts.googleapis.com/css2?family=Geologica:wght@800&display=swap" rel="stylesheet">
-</head>
-
-<body>
-  <div class="flex-container">
-    <div id="code-view" class="container vertical" style="display:none">
-      <input id="code" type="text" placeholder="Enter code">
-      <button onclick="loadUpload()">Submit</button>
-      <p id="status"></p>
-    </div>
-    <div id="file-view" class="container vertical" style="display:none">
-      <input id="code" type="text" placeholder="Enter code">
-      <button onclick="loadUpload()">Submit</button>
-      <p id="status"></p>
-    </div>
-    <div id="admin-file-view" class="container vertical" style="display:none">
-      <input id="code" type="text" placeholder="Enter code">
-      <button onclick="loadUpload()">Submit</button>
-      <p id="status"></p>
-    </div>
-  </div>
-  <script>
-    var hash = "";
-    var adminHash = "";
-    handleUrl();
-    function handleUrl() {
-      console.log(document.location.pathname.split("/", 4));
-      path = document.location.pathname.split("/", 4)
-      if(path[2].length > 10 && path[2] === path[2].toUpperCase()) {
-        hash = path[2];
-        if(path[3].length == 10 && path[3] === path[3].toUpperCase()) {
-          adminHash = path[3];
-        }
-      } else {
-        document.getElementById("code-view").style = "";
-      }
-    }
-    codeInput = document.getElementById("code");
-    statusText = document.getElementById("status");
-    function loadUpload() {
-      if (!(codeInput.value.length > 10 && codeInput.value === codeInput.value.toUpperCase())) {
-        statusText.innerHTML = 'Wrong Code';
-        return;
-      }
-
-      fetch('/api/download/' + codeInput.value)
-        .then(
-          response => response.json()
-        ).then(jsonResponse => {
-          console.log(jsonResponse);
-
-          if (jsonResponse.code == 404) {
-            statusText.innerHTML = 'Not Found';
-          } else if (jsonResponse.code == 200) {
-            statusText.innerHTML = 'Found';
-          } else {
-            statusText.innerHTML = 'Error';
-          }
-        });
-    };
-  </script>
-</body>
-
-</html>
--- a/forms/upload.html
+++ b/forms/upload.html
@@ -1,144 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Kakubovna: Upload</title>
-  <link rel="stylesheet" href="/css/style.css">
-  <link href="https://fonts.googleapis.com/css2?family=Geologica:wght@800&display=swap" rel="stylesheet">
-</head>
-
-<body>
-  <div class="flex-container">
-    <div id="upload" class="container vertical">
-      <div class="dropZoneContainer">
-        <input type="file" title="" id="drop_zone" class="FileUpload" onchange="addFiles(this.files)" multiple/>
-        <div class="dropZoneOverlay"><p>Drag and drop your files <br />or<br />Click to add</p></div>
-      </div>
-      <div class="list">
-        <table class="filelist"></table>
-      </div>
-      <button style="vertical-align:middle" class="button" onclick="startUpload()"><span>Upload </span></button>
-    </div>
-  </div>
-  <canvas id="c" style="width: 100%; height: 100%; position: absolute;"></canvas>
-
-  <script src="js/socket.io.js"></script>
-  <script src="js/siofu-client.js"></script>
-  <script>
-    var selectedFiles = [];
-
-    function addFiles(files) {
-      Array.from(files).forEach(file => {
-        addFile(file);
-      });
-    }
-
-    function addFile(file) {
-      console.log(selectedFiles.find((element) => element.name == file.name))
-      if(selectedFiles.find((element) => element.name == file.name) == undefined) {
-        selectedFiles.push(file);
-      }
-      updateFileList();
-    }
-
-    function shortString(str, maxlen = 13) {
-      if(str.length > maxlen) {
-        shortstr = str.slice(0, (maxlen-3)/2)+"..."+str.slice(-(maxlen-3)/2);
-      } else {
-        shortstr = str;
-      }
-      return shortstr;
-    }
-
-    function updateFileList(maxlen = 30) {
-      filelist = document.getElementsByClassName("filelist")[0];
-      filelist.innerHTML = "";
-      i = 0
-      selectedFiles.forEach(file => {
-        filelist.innerHTML += "<tr title=\""+file.name+"\"><td>"+shortString(file.name, maxlen)+"</td></tr>";
-        i++;
-      });
-    }
-
-    var socket = io.connect(
-      {
-        forceNew: true,
-        extraHeaders: {
-          Authorization: "bsadsds"
-        }
-      }
-    );
-    var uploader = new SocketIOFileUpload(socket);
-    uploader.addEventListener("choose", function (event) {
-      console.log("Files Chosen: " + event.files);
-    });
-    uploader.addEventListener("progress", function (event) {
-      console.log("Files Chosen: " + event.bytesLoaded / event.file.size);
-    });
-
-    function startUpload() {
-      uploader.submitFiles(selectedFiles);
-    }
-    socket.once("linkCreated", (hash, adminhash) => {
-      console.log("Link Created");
-      window.location.href = document.location.protocol+"//"+document.location.host+"/api/download/"+hash+'/'
-    });
-  </script>
-  <script>
-    // geting canvas by Boujjou Achraf
-    var c = document.getElementById("c");
-    var ctx = c.getContext("2d");
-
-    //making the canvas full screen
-    c.height = window.innerHeight;
-    c.width = window.innerWidth;
-
-    //chinese characters - taken from the unicode charset
-    var matrix = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%+-/~{[|`]}";
-    //converting the string into an array of single characters
-    matrix = matrix.split("");
-
-    var font_size = 10;
-    var columns = c.width / font_size; //number of columns for the rain
-    //an array of drops - one per column
-    var drops = [];
-    //x below is the x coordinate
-    //1 = y co-ordinate of the drop(same for every drop initially)
-    for (var x = 0; x < columns; x++)
-      drops[x] = 1;
-
-    //drawing the characters
-    function draw() {
-      rainbow = ['#ff0000', '#ffa500', '#ffff00', '#008000', '#00FFFF', '#4b0082', '#ee82ee'];
-      //Black BG for the canvas
-      //translucent BG to show trail
-      ctx.fillStyle = "rgba(0, 0, 0, 0.04)";
-      ctx.fillRect(0, 0, c.width, c.height);
-
-      ctx.fillStyle = rainbow[Math.floor(Math.random() * 5)];//green text
-      ctx.font = font_size + "px arial";
-      //looping over drops
-      for (var i = 0; i < drops.length; i++) {
-        //a random chinese character to print
-        var text = matrix[Math.floor(Math.random() * matrix.length)];
-        //x = i*font_size, y = value of drops[i]*font_size
-        ctx.fillText(text, i * font_size, drops[i] * font_size);
-
-        //sending the drop back to the top randomly after it has crossed the screen
-        //adding a randomness to the reset to make the drops scattered on the Y axis
-        if (drops[i] * font_size > c.height && Math.random() > 0.975)
-          drops[i] = 0;
-
-        //incrementing Y coordinate
-        drops[i]++;
-      }
-    }
-
-    setInterval(draw, 35);
-  </script>
-</body>
-
-</html>
--- a/handlers/fileHandler.js
+++ b/handlers/fileHandler.js
--- a/handlers/userHandler.js
+++ b/handlers/userHandler.js
Author	SHA1	Message	Date
Dzejkobik007	31530e0531	Updated LICENCE	2023-06-27 23:02:19 +02:00
Dzejkobik007	708f2a975b	Add viewBox property	2023-06-12 11:39:23 +02:00
Dzejkobik007	7a48743b55	Add pdf icon	2023-06-12 11:36:01 +02:00
Dzejkobik007	52ab7fe92d	Updated Readme	2023-06-12 10:54:42 +02:00
Jakub Rybníček	db3e1f1f65	Add licence	2023-06-12 10:06:52 +02:00
Dzejkobik007	f6c68866bf	Download Style Update	2023-06-12 10:02:02 +02:00
Dzejkobik007	a8aa121d6f	update	2023-06-09 07:09:47 +02:00
Dzejkobik007	13418797f3	Update	2023-06-07 01:11:02 +02:00
Dzejkobik007	24bdc5a968	fix	2023-06-07 00:32:31 +02:00
Dzejkobik007	c9787cc7db	Add dockerfiles	2023-06-07 00:29:02 +02:00
Dzejkobik007	94c5f822ba	Update	2023-06-07 00:17:56 +02:00
Dzejkobik007	047a041782	Add/Update/Remove	2023-06-07 00:14:44 +02:00
Dzejkobik007	1ad51ba87a	Updated README.md	2023-06-06 23:44:30 +02:00
Dzejkobik007	fc5d0d102d	Updated README.md	2023-06-06 23:43:06 +02:00
				`@@ -0,0 +1 @@`
				{"version":3,"sources":["style-light.scss","style-light.css"],"names":[],"mappings":"AASA;EACI,qBAAA;ACRJ;;ADWA;EACI,qBAAA;EACA,sCAAA;ACRJ;ADWA;;EAEE,UAAA;EACA,SAAA;ACTF;;ADaA;EACI,yBArBe;ACWnB;;ADcA;EAAS,qBAAA;ACVT;;ADYA;EAAY,qBAAA;ACRZ;;ADUA;EAAU,qBAAA;ACNV;;ADQA;EAAW,qBAAA;ACJX;;ADMA;EACI,aAAA;EACA,WAAA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,uBAAA;ACHJ;;ADOA;EACI,YAAA;EACA,UAAA;EACA,aAAA;EACA,mBAAA;EACA,sBAAA;EACA,yBAAA;ACJJ;;ADQA;EACI,iBAAA;EACA,SAAA;EACA,UAAA;EACA,aAAA;EACA,mBAAA;EACA,gBAAA;ACLJ;ADMI;EACI,eAAA;ACJR;ADMI;EACI,eAAA;ACJR;ADMI;EACI,eAAA;ACJR;;ADQA;EACI,aAAA;EACA,mBAAA;EACA,mBAAA;ACLJ;ADMI;EACI,WAAA;EACA,YAAA;ACJR;ADOQ;EACI,eAAA;EACA,SAAA;EACA,cAAA;ACLZ;;ADUA;EACI,eAAA;EACA,UAAA;EACA,0BAAA;ACPJ;ADQI;EACI,aAAA;EACA,eAAA;ACNR;ADOQ;EACI,YAAA;EACA,eAAA;EACA,YAAA;ACLZ;ADMY;EACI,WAAA;EACA,YAAA;ACJhB;ADOgB;EACI,eAAA;EACA,SAAA;EACA,cAAA;ACLpB;ADSQ;EACI,sBAAA;EACA,oBAAA;ACPZ;;ADYA;EACI,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,kBAAA;EACA,yBAAA;EACA,YAAA;EACA,cAAA;EACA,qBAAA;EACA,eAAA;EACA,YAAA;EACA,YAAA;EACA,oBAAA;EACA,eAAA;ACTJ;ADUI;EACI,SAAA;ACRR;;ADYA;EACI,sBAAA;ACTJ;;ADYA;EACI,yBAlJY;ACyIhB;;ADYA;EACI,yBApJc;EAqJd,cApJmB;AC2IvB;;ADYA;EACI,aAAA;EACA,YAAA;EACA,mBAAA;EACA,eAAA;EACA,mBAAA;EACA,uBAAA;ACTJ;ADUI;EACI,aAAA;EACA,yBAjKU;EAkKV,cAjKe;EAkKf,YAAA;EACA,yBAAA;EACA,iBAAA;EACA,mBAAA;EACA,uBAAA;ACRR;ADUI;EACI,YAAA;EACA,WAAA;EACA,yBAAA;ACRR;ADSQ;EACI,WAAA;EACA,YAAA;EACA,eAAA;EACA,kBAAA;EACA,sBAAA;EACA,YAAA;EACA,yBApLM;EAqLN,cApLW;AC6KvB;;ADYA;EACI,aAAA;ACTJ;;ADYA;EACI,YAAA;ACTJ;;ADYA;EACI,YAAA;EACA,sBAAA;EACA,uBAAA;EACA,4BAAA;EACA,oBAAA;EACA,gCAAA;ACTJ;;ADYA;EAEI;IACI,uBAAA;ECVN;EDYE;IACI,oBAAA;ECVN;AACF","file":"style-light.css"}
				`@@ -0,0 +1 @@`
				{"version":3,"sources":["style.css","style.scss"],"names":[],"mappings":"AAAA,gBAAgB;ACAhB;;EAEE,UAAA;EACA,SAAA;ADEF;;ACEA;EACE,yBAAA;ADCF;;ACGA;EACE,cAAA;ADAF;;ACGA;;;;EAIE,aAAA;ADAF;;ACGA;EACE,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,aAAA;ADAF;;ACGA;EACE,oCAAA;EACA,mBAAA;EACA,mBAAA;EACA,iBAAA;EACA,mBAAA;EACA,yBAAA;EACA,aAAA;EACA,aAAA;EACA,kBAAA;ADAF;;ACGA;EACI,WAAA;ADAJ;;ACGA;EACI,sBAAA;EACA,uBAAA;EACA,mBAAA;ADAJ;;ACGA;EACI,gBAAA;ADAJ;;ACGA;EACI,aAAA;EACA,sBAAA;EACA,UAAA;ADAJ;;ACEA;EACI,cAAA;ADCJ;;ACEA;EACI,cAAA;ADCJ;;ACEA;EACI,sBAAA;ADCJ;;ACEA;EACI,UAAA;ADCJ;;ACEA;EACI,yBAAA;EACA,WAAA;ADCJ;ACQI;EACI,kBAAA;EACA,aAAA;EACA,YAAA;EACA,uBAAA;EACA,sBAAA;EACA,mBAAA;EACA,MAAA;EACA,UAAA;ADNR;ACOQ;EACI,aAAA;EACA,eAAA;EACA,UAAA;EACA,sBAAA;ADLZ;ACMY;EACI,gBAAA;EACA,qBAAA;EACA,gBAAA;EACA,sBAAA;EACA,SAAA;ADJhB;ACOQ;EACI,eAAA;EACA,YAAA;EACA,WAAA;ADLZ;ACOQ;EACI,aAAA;EACA,yBAAA;EACA,YAAA;EACA,YAAA;EACA,UAAA;ADLZ;ACOQ;EACI,YAAA;EACA,WAAA;EACA,cAAA;EACA,WAAA;EACA,SAAA;ADLZ;;ACUA;EACI,YAAA;ADPJ;;ACUA;EACI,qBAAA;EACA,kBAAA;EACA,yBAAA;EACA,YAAA;EACA,cAAA;EACA,kBAAA;EACA,eAAA;EACA,aAAA;EACA,YAAA;EACA,oBAAA;EACA,eAAA;EACA,WAAA;ADPJ;;ACUA;EACI,eAAA;EACA,qBAAA;EACA,kBAAA;EACA,gBAAA;ADPJ;;ACUA;EACI,YAAA;EACA,kBAAA;EACA,UAAA;EACA,MAAA;EACA,YAAA;EACA,gBAAA;ADPJ;;ACUA;EACI,mBAAA;ADPJ;;ACUA;EACI,UAAA;EACA,QAAA;ADPJ;;ACUA;EACI,aAAA;EACA,uBAAA;EACA,SAAA;ADPJ;ACQI;EACI,aAAA;EACA,uCAAA;EACA,kBAAA;EACA,aAAA;EACA,aAAA;EACA,YAAA;EACA,mBAAA;EACA,0CAAA;EACA,gBAAA;EACA,mBAAA;EACA,uBAAA;EACA,eAAA;ADNR;ACQQ;EACI,yBAAA;ADNZ;ACSQ;EACI,YAAA;EACA,eAAA;ADPZ;ACUQ;EACI,eAAA;EACA,cAAA;EACA,gBAAA;EACA,mBAAA;ADRZ;;ACiBA;EACI,sBAAA;EACA,2CAAA;ADdJ;;ACiBA;EACI,aAAA;EACA,kBAAA;EACA,mBAAA;EACA,WAAA;EACA,aAAA;ADdJ;;ACiBA;EACI,YAAA;EACA,WAAA;EACA,cAAA;EACA,WAAA;ADdJ;;ACiBA;EACI,gBAAA;EACA,iBAAA;EACA,kBAAA;EACA,eAAA;EACA,cAAA;EACA,kBAAA;EACA,sBAAA;ADdJ;;ACgBA;EACI,UAAA;EACA,eAAA;ADbJ","file":"style.css"}
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" class="checkmark" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M416 128L192 384l-96-96"/></svg>`
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path d="M320 367.79h76c55 0 100-29.21 100-83.6s-53-81.47-96-83.6c-8.89-85.06-71-136.8-144-136.8-69 0-113.44 45.79-128 91.2-60 5.7-112 43.88-112 106.4s54 106.4 120 106.4h56" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M320 255.79l-64-64-64 64M256 448.21V207.79"/></svg>