my god this css is a mess lmao

README.md

@@ -21,9 +21,9 @@ TOKEN=KILL-YOURSELF.NOW
 - [X] 1.2.1 add file counter to main page
 - [X] 1.2.2 clean up this shitty code
 - [X] 1.2.3 bugfixes
-- [ ] 1.3.0 new ui; accounts
-- [ ] 1.3.1 add utility endpoints: `/embed/:fileId` for discord, `/:fileId` for quick access
-- [ ] 1.3.2 disable cloning of local ips
+- [ ] 1.3.0 new ui; accounts; utility endpoints
+- [ ] 1.3.0 add utility endpoints: `/embed/:fileId` for discord, `/:fileId` for quick access
+- [ ] 1.3.1 disable cloning of local ips
 - [ ] 1.4.0 admin panel
 - [ ] 2.0.0 rewrite using theUnfunny's code as a base/rewrite using monofile-core
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "monofile",
-  "version": "1.3.0",
+  "version": "1.3.0-pa",
   "description": "Discord-based file sharing",
   "main": "index.js",
   "scripts": {

src/server/index.ts

@@ -119,7 +119,7 @@ app.get("/download/:fileId",(req,res) => {
     }
 })
 
-app.get("/file/:fileId",async (req,res) => {
+let fgRQH = async (req:express.Request,res:express.Response) => {
     files.readFileStream(req.params.fileId).then(f => {
         res.setHeader("Content-Type",f.contentType)
         res.status(200)
@@ -127,7 +127,7 @@ app.get("/file/:fileId",async (req,res) => {
     }).catch((err) => {
         ServeError(res,err.status,err.message)
     })
-})
+}
 
 app.get("/server",(req,res) => {
     res.send(JSON.stringify({
@@ -137,11 +137,17 @@ app.get("/server",(req,res) => {
     }))
 })
 
-app.get("*",(req,res) => {
-    ServeError(res,404,"page not found")
-})
+app.get("/file/:fileId",fgRQH)
+app.get("/:fileId",fgRQH)
 
+/*
+    routes should be in this order:
     
+    index
+    api
+    dl pages
+    file serving
+*/
 
 // listen on 3000 or MONOFILE_PORT
 

src/style/app.scss

@@ -29,4 +29,9 @@
     top:40px;
     width:100%;
     height: calc( 100% - 40px );
+    background-image: linear-gradient(#333,base.$Background);
+
+    @media screen and (max-width:500px) {
+        background-image: linear-gradient(#303030,base.$Background);
+    }
 }

src/style/app/pulldown.scss

@@ -21,7 +21,7 @@
     left:50%;
     transform:translateX(-50%);
 
-    @media screen and (max-width: 400px) {
+    @media screen and (max-width: 500px) {
         width: 100%;
         height: 100%;
     }

src/style/app/uploads.scss

@@ -4,7 +4,6 @@
     top:50%;
     transform:translate(-50%,-50%);
     padding:10px;
-    border-radius:8px;
     
     background-color:#222222;
     color:#ddd;
@@ -23,6 +22,67 @@
         font-family: "Inconsolata", monospace;
     }
     
+    #add_new_files {
+        background-color:#191919;
+        border: 1px solid gray;
+        width:350px;
+        padding: 0px 0px 10px 0px;
+
+        @media screen and (max-width: 500px) {
+            width:100%;
+        }
+
+        p {
+            font-family: "Fira Code", monospace;
+            text-align: left;
+            margin: 0px 0px 0px 10px;
+            font-size: 30px;
+
+            span {
+                font-size:16px;
+                position:relative;
+                top:-4px;
+                left:10px;
+            }
+
+            @media screen and (max-width:500px) {
+                font-size: 40px;
+
+                span {
+                    font-size:20px;
+                    position:relative;
+                    top:-6px;
+                    left:10px;
+                }
+            }
+        }
+
+        #file_add_btns {
+            width:calc( 100% - 20px );
+            margin:auto;
+            position:relative;
+            display:flex;
+            flex-direction:row;
+            column-gap:10px;
+
+            button {
+                background-color:#444444;
+                color:white;
+                border:none;
+                border-radius: 8px;
+                padding:5px;
+                
+                flex-basis:50%;
+                flex-grow:1;
+
+                @media screen and (max-width: 500px) {
+                    font-size:16px;
+                    padding:10px;
+                }
+            }
+        }
+    }
+
     @media screen and (max-width: 500px) {
         width: calc( 100% - 20px );
         height: calc( 100% - 20px );

src/svelte/App.svelte

@@ -29,3 +29,5 @@
 
     <UploadWindow/>
 </div>
+
+<p class="background-t">monofile</p>

src/svelte/elem/UploadWindow.svelte

@@ -8,6 +8,10 @@
         ServerStats = await data.json()
     })
     
+    // uploads
+
+    let uploads = new Map()
+
 </script>
 
 <div id="uploadWindow">
@@ -16,7 +20,24 @@
         <span class="number">{ServerStats.version ? `v${ServerStats.version}` : "•••"}</span>&nbsp;&nbsp—&nbsp;&nbsp;Discord based file sharing
     </p>
 
+    <div>
+        {#each Array.from(uploads.entries()) as upload (upload[0])}
+            <div class="Upload">
                 
+            </div>
+        {/each}
+    </div>
+
+    <div style:height="10px" />
+    
+    <div id="add_new_files">
+        <p>+<span>add files</span></p>
+        <div id="file_add_btns">
+            <button>upload file...</button><button>clone url...</button>
+        </div>
+    </div>
+
+    <div style:height="5px" />
    
     <p style:color="#999999" style:text-align="center">
         Hosting <span class="number" style:font-weight="600">{ServerStats.files || "•••"}</span> files