basic file upload UI

filed/src/web/mod.rs

@@ -2,10 +2,20 @@
  web - The part of filed that handles everything related to HTTP
  */
 
+use std::env::current_dir;
+
+use warp::{Filter, reply::Reply, reject::Rejection};
+
 use crate::env::Env;
 
 mod pages;
 
+pub fn routes() -> impl Filter<Extract = impl Reply, Error = Rejection> + Clone {
+    let staticpath = current_dir().unwrap();
+    let staticpath = staticpath.to_str().unwrap().to_string() + "/static";
+    pages::get_routes().or(warp::fs::dir(staticpath.to_string()))
+}
+
 /*
  Serve the HTTP server
  */
@@ -13,5 +23,5 @@ pub async fn serve(env: Env) {
 
     log::info!("Listening on {}", env.listen.to_string());
 
-    warp::serve(pages::get_routes()).run(env.listen).await;
+    warp::serve(routes()).run(env.listen).await;
 }

filed/static/paint.css

@@ -0,0 +1,114 @@
+html, body {
+    margin: 0; padding: 0;
+    font-family: 'Red Hat Display', 'Open Sans', 'Segoe UI', sans-serif;
+    background: var(--header-color);
+
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    color: var(--fg-color)
+}
+::-webkit-scrollbar {
+    display: none;
+}
+
+:root {
+    --accent-color: #78aeed;
+    --accent-bg-color: #3584e4;
+    --accent-fg-color: #ffffff;
+    --accent-font: 'Red Hat Display';
+    --accent-font-size: 18pt;
+    --accent-weight: 900;   
+
+    --header-color: #303030;
+    --header-fg-color: #ffffff;
+    --header-sec-color: #404040;
+    --header-padding-x: 16px;
+    --header-padding-y: 12px;
+    --header-font-size: 12pt;
+
+    --view-color: #1e1e1e;
+
+    --fg-color: #ffffff;
+    --margin: 12px 24px;
+    --margin-y: 12px;
+    --margin-x: 24px;
+}
+
+.header {
+    background: transparent;
+    color: var(--header-fg-color);
+    /* border-bottom: 1px solid var(--header-sec-color); */
+    font-family: var(--accent-font);
+    font-weight: var(--accent-weight);
+    font-size: var(--header-font-size);
+    padding: var(--header-padding-y) var(--header-padding-x);
+}
+.header svg {
+    width: var(--header-font-size);
+    height: var(--header-font-size);
+    transform: translateY(2px);
+    padding-right: var(--header-padding-y);
+}
+
+.content {
+    background: var(--view-color);
+    border-top: 1px solid var(--header-sec-color);
+    height: 100vh;
+    border-radius: 12px 12px 0 0;
+    padding: var(--margin-y) 0;
+}
+.content h1,
+.content h2,
+.content h3,
+.content h4,
+.content h5 {
+    margin: var(--margin);
+}
+
+h1, h2, h3, h4, h5 {
+    font-family: var(--accent-font);
+    font-size: var(--accent-font-size);
+    font-weight: var(--accent-weight);
+}
+h2 {
+    font-size: var(--accent-font-size);
+    font-weight: var(--accent-weight);
+}
+h3 {
+    font-size: calc(var(--accent-font-size) * 0.9);
+    font-weight: 600;
+}
+h4 {
+    font-size: calc(var(--accent-font-size) * 0.8);
+    font-weight: 600;
+}
+
+b {
+    font-weight: bold;
+    font-size: 90%;
+}
+
+p {
+    margin: var(--margin-y) 0;
+}
+
+.card {
+    background: var(--header-color);
+    border: 1px solid var(--header-sec-color);
+    border-radius: 12px;
+}
+.card-title {
+    border-radius: 12px 12px 0 0;
+    background: #292929;
+    padding: var(--header-padding-x) var(--header-padding-x);
+    font-size: var(--header-font-size);
+    font-weight: var(--accent-weight);
+    border-bottom: 1px solid var(--header-sec-color);
+}
+.card-text {
+    padding: var(--margin-y) var(--header-padding-x);
+}
+.card-text p {
+    margin-left: 0;
+}

filed/static/text-x-generic.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg height="128px" viewBox="0 0 128 128" width="128px" xmlns="http://www.w3.org/2000/svg">
+    <path d="m 28 8 h 50 l 30.042969 29.917969 v 74.058593 c 0 4.433594 -3.609375 8.023438 -8.042969 8.023438 h -72 c -4.433594 0 -8 -3.566406 -8 -8 v -96 c 0 -4.433594 3.566406 -8 8 -8 z m 0 0" fill="#f6f5f4"/>
+    <g fill="#deddda">
+        <path d="m 78 8 v 22 c 0 4.433594 3.609375 7.921875 8.042969 7.921875 l 22 -0.003906 z m 0 0"/>
+        <path d="m 34 100 h 60 c 1.105469 0 2 0.894531 2 2 s -0.894531 2 -2 2 h -60 c -1.105469 0 -2 -0.894531 -2 -2 s 0.894531 -2 2 -2 z m 0 0"/>
+        <path d="m 34 92 h 60 c 1.105469 0 2 0.894531 2 2 s -0.894531 2 -2 2 h -60 c -1.105469 0 -2 -0.894531 -2 -2 s 0.894531 -2 2 -2 z m 0 0"/>
+        <path d="m 34 84 h 60 c 1.105469 0 2 0.894531 2 2 s -0.894531 2 -2 2 h -60 c -1.105469 0 -2 -0.894531 -2 -2 s 0.894531 -2 2 -2 z m 0 0"/>
+        <path d="m 34 76 h 60 c 1.105469 0 2 0.894531 2 2 s -0.894531 2 -2 2 h -60 c -1.105469 0 -2 -0.894531 -2 -2 s 0.894531 -2 2 -2 z m 0 0"/>
+        <path d="m 34 68 h 60 c 1.105469 0 2 0.894531 2 2 s -0.894531 2 -2 2 h -60 c -1.105469 0 -2 -0.894531 -2 -2 s 0.894531 -2 2 -2 z m 0 0"/>
+        <path d="m 34 60 h 60 c 1.105469 0 2 0.894531 2 2 s -0.894531 2 -2 2 h -60 c -1.105469 0 -2 -0.894531 -2 -2 s 0.894531 -2 2 -2 z m 0 0"/>
+        <path d="m 34 52 h 60 c 1.105469 0 2 0.894531 2 2 s -0.894531 2 -2 2 h -60 c -1.105469 0 -2 -0.894531 -2 -2 s 0.894531 -2 2 -2 z m 0 0"/>
+        <path d="m 34 44 h 36 c 1.105469 0 2 0.59375 2 1.324219 v 1.351562 c 0 0.730469 -0.894531 1.324219 -2 1.324219 h -36 c -1.105469 0 -2 -0.59375 -2 -1.324219 v -1.351562 c 0 -0.730469 0.894531 -1.324219 2 -1.324219 z m 0 0"/>
+        <path d="m 34 36 h 36 c 1.105469 0 2 0.59375 2 1.324219 v 1.351562 c 0 0.730469 -0.894531 1.324219 -2 1.324219 h -36 c -1.105469 0 -2 -0.59375 -2 -1.324219 v -1.351562 c 0 -0.730469 0.894531 -1.324219 2 -1.324219 z m 0 0"/>
+        <path d="m 34 28 h 36 c 1.105469 0 2 0.59375 2 1.324219 v 1.351562 c 0 0.730469 -0.894531 1.324219 -2 1.324219 h -36 c -1.105469 0 -2 -0.59375 -2 -1.324219 v -1.351562 c 0 -0.730469 0.894531 -1.324219 2 -1.324219 z m 0 0"/>
+    </g>
+</svg>

filed/templates/base.html

@@ -2,11 +2,22 @@
 <html lang="en_US">
     <head>
         <meta charset="utf8" />
+        <link rel="stylesheet" href="https://unpkg.com/reset-css@5.0.1/reset.css" />
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;600;900&display=swap" rel="stylesheet">
+        <link rel="stylesheet" href="/paint.css" />
         <title>blek! File</title>
-        {% block content %}{% endblock %}
+        {% block head %}{% endblock %}
     </head>
 
     <body>
+        <div class="header">
+            {% include "text-x-generic.svg" %}
+            blek! File - a minute file sharing
+        </div>
+        <div class="content">
             {% block body %}{% endblock %}
+        </div>
     </body>
 </html>

filed/templates/index.html

@@ -1,13 +1,36 @@
 {% extends "base.html" %}
 
-{% block content %}
+{% block body %}
 
+<h1>File upload</h1>
+<div style='margin:var(--margin)'>
     <p>
-    hiii!
+        You can upload a file here <b>for free</b> to share with others for 30 minutes.<br/>
+        How cool is that, eh?
     </p>
-<hr/>
+    <div class="card">
+        <div class="card-title">
+            Upload form
+        </div>
+        <div class='card-text'>
+            <form action="/upload" method="POST" enctype="multipart/form-data">
                 <p>
-    made with askama (C)
+                    I want my file deleted:
                 </p>
+                <ul>
+                    <li>
+                        <input type="radio" id="bfile-formupload-delete-30-min" name="delmode" value='30' checked />
+                        <label for="bfile-formupload-delete-30-min">After 30 minutes</label>
+                    </li>
+                    <li>
+                        <input type="radio" id="bfile-formupload-delete-dl" name="delmode" value='dl' />
+                        <label for="bfile-formupload-delete-dl">After 30 minutes OR a download</label>
+                    </li>
+                </ul>
+                
+            </form>
+        </div>
+    </div>
+</div>
 
 {% endblock %}

filed/templates/text-x-generic.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg height="128px" viewBox="0 0 128 128" width="128px" xmlns="http://www.w3.org/2000/svg">
+    <path d="m 28 8 h 50 l 30.042969 29.917969 v 74.058593 c 0 4.433594 -3.609375 8.023438 -8.042969 8.023438 h -72 c -4.433594 0 -8 -3.566406 -8 -8 v -96 c 0 -4.433594 3.566406 -8 8 -8 z m 0 0" fill="#f6f5f4"/>
+    <g fill="#deddda">
+        <path d="m 78 8 v 22 c 0 4.433594 3.609375 7.921875 8.042969 7.921875 l 22 -0.003906 z m 0 0"/>
+        <path d="m 34 100 h 60 c 1.105469 0 2 0.894531 2 2 s -0.894531 2 -2 2 h -60 c -1.105469 0 -2 -0.894531 -2 -2 s 0.894531 -2 2 -2 z m 0 0"/>
+        <path d="m 34 92 h 60 c 1.105469 0 2 0.894531 2 2 s -0.894531 2 -2 2 h -60 c -1.105469 0 -2 -0.894531 -2 -2 s 0.894531 -2 2 -2 z m 0 0"/>
+        <path d="m 34 84 h 60 c 1.105469 0 2 0.894531 2 2 s -0.894531 2 -2 2 h -60 c -1.105469 0 -2 -0.894531 -2 -2 s 0.894531 -2 2 -2 z m 0 0"/>
+        <path d="m 34 76 h 60 c 1.105469 0 2 0.894531 2 2 s -0.894531 2 -2 2 h -60 c -1.105469 0 -2 -0.894531 -2 -2 s 0.894531 -2 2 -2 z m 0 0"/>
+        <path d="m 34 68 h 60 c 1.105469 0 2 0.894531 2 2 s -0.894531 2 -2 2 h -60 c -1.105469 0 -2 -0.894531 -2 -2 s 0.894531 -2 2 -2 z m 0 0"/>
+        <path d="m 34 60 h 60 c 1.105469 0 2 0.894531 2 2 s -0.894531 2 -2 2 h -60 c -1.105469 0 -2 -0.894531 -2 -2 s 0.894531 -2 2 -2 z m 0 0"/>
+        <path d="m 34 52 h 60 c 1.105469 0 2 0.894531 2 2 s -0.894531 2 -2 2 h -60 c -1.105469 0 -2 -0.894531 -2 -2 s 0.894531 -2 2 -2 z m 0 0"/>
+        <path d="m 34 44 h 36 c 1.105469 0 2 0.59375 2 1.324219 v 1.351562 c 0 0.730469 -0.894531 1.324219 -2 1.324219 h -36 c -1.105469 0 -2 -0.59375 -2 -1.324219 v -1.351562 c 0 -0.730469 0.894531 -1.324219 2 -1.324219 z m 0 0"/>
+        <path d="m 34 36 h 36 c 1.105469 0 2 0.59375 2 1.324219 v 1.351562 c 0 0.730469 -0.894531 1.324219 -2 1.324219 h -36 c -1.105469 0 -2 -0.59375 -2 -1.324219 v -1.351562 c 0 -0.730469 0.894531 -1.324219 2 -1.324219 z m 0 0"/>
+        <path d="m 34 28 h 36 c 1.105469 0 2 0.59375 2 1.324219 v 1.351562 c 0 0.730469 -0.894531 1.324219 -2 1.324219 h -36 c -1.105469 0 -2 -0.59375 -2 -1.324219 v -1.351562 c 0 -0.730469 0.894531 -1.324219 2 -1.324219 z m 0 0"/>
+    </g>
+</svg>