Zynh0722/nyazoom
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

the site is tolerable now

Browse source
This commit is contained in:
Zynh0722 2023-04-07 20:37:20 -07:00
parent 76f17d48b0
commit e1c499ee72
3 changed files with 122 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

81
dist/css/style.css vendored Normal file
View file

@ -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);
}

51
dist/index.html vendored
View file

@ -5,21 +5,50 @@
<title>NyaZoom</title>
<meta charset="UTF-8">
<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>
<body>
<h1>NyaZoom^2</h1>
<form action="/upload" method="post" enctype="multipart/form-data" class="form-example">
<h1>NyaZoom<sup>2</sup></h1>
<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="file" name="avatar">
<div class="form-example">
<input type="submit" value="Subscribe!">
</div>
</form>
<input type="submit" value="Get Link~">
<p id="cat-fact" />
</form>
</div>
</body>
</html>

2
src/main.rs
View file

@ -31,7 +31,7 @@ async fn main() {
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);
axum::Server::bind(&addr)
.serve(app.layer(TraceLayer::new_for_http()).into_make_service())