forked from Zynh0722/nyazoom
the site is tolerable now
parent
76f17d48b0
commit
e1c499ee72
|
|
@ -0,0 +1,81 @@
|
||||||
|
body {
|
||||||
|
background-color: #FCB0B3;
|
||||||
|
color: #25283D;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-form {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-wrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-grow: 1;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cat-img {
|
||||||
|
width: 250px;
|
||||||
|
height: 250px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cat-img-wrapper {
|
||||||
|
border-radius: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
display: grid;
|
||||||
|
}
|
||||||
|
|
||||||
|
#cat-fact {
|
||||||
|
max-width: 25em;
|
||||||
|
padding: 0 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
[type="file"] {
|
||||||
|
border: 0;
|
||||||
|
clip: rect(0, 0, 0, 0);
|
||||||
|
height: 1px;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0;
|
||||||
|
position: absolute !important;
|
||||||
|
white-space: nowrap;
|
||||||
|
width: 1px;
|
||||||
|
}
|
||||||
|
[type="file"] + label {
|
||||||
|
background-color: #49DCB1;
|
||||||
|
border-radius: 1em;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0.5em 1em;
|
||||||
|
}
|
||||||
|
[type="file"]:focus + label,
|
||||||
|
[type="file"] + label:hover {
|
||||||
|
filter: brightness(1.1);
|
||||||
|
}
|
||||||
|
[type="file"]:focus + label {
|
||||||
|
outline: 1px dotted #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
[type="submit"] {
|
||||||
|
all: unset;
|
||||||
|
background-color: #49DCB1;
|
||||||
|
border-radius: 1em;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0.5em 1em;
|
||||||
|
}
|
||||||
|
[type="submit"]:focus,
|
||||||
|
[type="submit"]:hover {
|
||||||
|
filter: brightness(1.1);
|
||||||
|
}
|
||||||
|
|
@ -5,21 +5,50 @@
|
||||||
<title>NyaZoom</title>
|
<title>NyaZoom</title>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<!-- <link href="css/style.css" rel="stylesheet"> -->
|
<link href="css/style.css" rel="stylesheet">
|
||||||
|
<script>
|
||||||
|
fetch("https://catfact.ninja/fact")
|
||||||
|
.then(data => data.json())
|
||||||
|
.then(data => {
|
||||||
|
document.getElementById("cat-fact").innerHTML = data.fact;
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<script>
|
||||||
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
|
let inputs = document.querySelectorAll('input#file');
|
||||||
|
Array.prototype.forEach.call(inputs, function (input) {
|
||||||
|
let label = input.nextElementSibling;
|
||||||
|
let labelVal = label.innerHTML;
|
||||||
|
input.addEventListener('change', function (e) {
|
||||||
|
let fileName = '';
|
||||||
|
|
||||||
|
if (this.files?.length > 1) {
|
||||||
|
fileName = this.getAttribute('data-multiple-caption')?.replace('{count}', this.files.length);
|
||||||
|
} else {
|
||||||
|
fileName = e.target.value.split('\\').pop();
|
||||||
|
}
|
||||||
|
|
||||||
|
label.innerHTML = fileName || labelVal;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}, false);
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<h1>NyaZoom^2</h1>
|
<h1>NyaZoom<sup>2</sup></h1>
|
||||||
<form action="/upload" method="post" enctype="multipart/form-data" class="form-example">
|
<div class="form-wrapper">
|
||||||
|
<form action="/upload" method="post" enctype="multipart/form-data" class="main-form">
|
||||||
|
<div class="cat-img-wrapper">
|
||||||
|
<img class="cat-img" src="https://cataas.com/cat?width=250&height=250" />
|
||||||
|
</div>
|
||||||
|
<input type="file" id="file" name="file" data-multiple-caption="{count} files selected" multiple />
|
||||||
|
<label for="file">Select Files</label>
|
||||||
|
|
||||||
<label for="avatar">Upload a file:</label>
|
<input type="submit" value="Get Link~">
|
||||||
|
<p id="cat-fact" />
|
||||||
<input type="file" name="avatar">
|
</form>
|
||||||
|
</div>
|
||||||
<div class="form-example">
|
|
||||||
<input type="submit" value="Subscribe!">
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -31,7 +31,7 @@ async fn main() {
|
||||||
|
|
||||||
let app = Router::new().merge(with_big_body).merge(base);
|
let app = Router::new().merge(with_big_body).merge(base);
|
||||||
|
|
||||||
let addr = SocketAddr::from(([127, 0, 0, 1], 3000));
|
let addr = SocketAddr::from(([0, 0, 0, 0], 3000));
|
||||||
tracing::debug!("listening on {}", addr);
|
tracing::debug!("listening on {}", addr);
|
||||||
axum::Server::bind(&addr)
|
axum::Server::bind(&addr)
|
||||||
.serve(app.layer(TraceLayer::new_for_http()).into_make_service())
|
.serve(app.layer(TraceLayer::new_for_http()).into_make_service())
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue