t-share
Version:
Share Files And Directories from your Terminal
107 lines (106 loc) • 2.55 kB
HTML
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title>t-share | Upload File</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<style type="text/css">
@import url("https://fonts.googleapis.com/css2?family=Google+Docs+Happy+Monkey&display=swap");
.share-button {
padding: 16px;
font-weight: bolder;
text-align: center;
display: inline-block;
font-size: 50px;
font-weight: bold;
text-transform: uppercase;
background-color: #000000;
color: #ffffff;
border: none;
border-radius: 25px;
position: relative;
font-family: "Google Docs Happy Monkey", cursive;
overflow: hidden;
z-index: 1;
}
.share-button:before {
content: "";
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
45deg,
#00ffcc,
#ff00ff,
#ff0000,
#ff00ff,
#00ffcc
);
opacity: 0.8;
transform: rotate(45deg) scale(0);
transition: transform 0.3s ease-in-out;
z-index: -1;
}
.share-button:hover:before {
transform: rotate(45deg) scale(1);
}
.share-button:hover {
color: #ffffff;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
transform: translateY(-2px);
}
.share-button:active {
background-color: #000000;
box-shadow: none;
transform: translateY(0);
}
#share-container {
position: absolute;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
body {
background-color: #005bff47;
margin: 0;
}
@media (prefers-color-scheme: dark) {
body {
background-color: #1c1c1e;
}
}
</style>
<body>
<form
ref="uploadForm"
id="uploadForm"
action="/upload"
method="post"
enctype="multipart/form-data"
>
<div id="share-container">
<label id="share" for="file-input" class="share-button"
>Upload File🚀</label
>
</div>
<input
id="file-input"
type="file"
name="selected"
style="visibility: hidden; display: none"
/>
</form>
</body>
<script>
document.getElementById("file-input").onchange = function () {
document.getElementById("uploadForm").submit();
};
</script>
</html>