basic file upload UI
This commit is contained in:
parent
261e57143a
commit
a52ba75924
GPG Key ID:
14546221E3595D0C
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
|
|
@ -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>
|
||||
{% block body %}{% endblock %}
|
||||
<div class="header">
|
||||
{% include "text-x-generic.svg" %}
|
||||
blek! File - a minute file sharing
|
||||
</div>
|
||||
<div class="content">
|
||||
{% block body %}{% endblock %}
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,13 +1,36 @@
|
|||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
{% block body %}
|
||||
|
||||
<p>
|
||||
hiii!
|
||||
</p>
|
||||
<hr/>
|
||||
<p>
|
||||
made with askama (C)
|
||||
</p>
|
||||
<h1>File upload</h1>
|
||||
<div style='margin:var(--margin)'>
|
||||
<p>
|
||||
You can upload a file here <b>for free</b> to share with others for 30 minutes.<br/>
|
||||
How cool is that, eh?
|
||||
</p>
|
||||
<div class="card">
|
||||
<div class="card-title">
|
||||
Upload form
|
||||
</div>
|
||||
<div class='card-text'>
|
||||
<form action="/upload" method="POST" enctype="multipart/form-data">
|
||||
<p>
|
||||
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 %}
|
||||
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
Loading…
Reference in New Issue