monofile/pages/base.html
2022-12-31 20:06:09 -08:00

173 lines
5.6 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>monofile</title>
<meta name="og:site_name" content="$Version">
<meta name="application-name" content="monofile">
<meta name="description" content="Discord-based filesharing">
<style>
* {
font-family: sans-serif;
}
h1,h2 {
text-align:center;
}
#content {
position:fixed;
left:50%;
top:50%;
transform:translate(-50%,-50%);
background-color:white;
width:450px;
/*height:100%;*/
}
body {
background-color: darkgray;
}
#btnContainer {
width:calc( 100% - 50px );
height:50px;
position:relative;
left:50%;
transform:translate(-50%,0);
}
button {
color:black;
font-weight:bold;
border:none;
position:absolute;
font-size:20px;
}
button:hover {
border: 1px solid gray;
}
#uploadButton {
width:calc( 100% - 50px );
height:100%;
background-color: #66AAFF;
left:0px;
top:0px;
}
#optionsButton {
width:50px;
height:100%;
background-color: #AAAAAA;
left:calc( 100% - 50px );
top:0px;
font-size:15px;
}
.note {
padding:5px;
position:relative;
width:calc( 100% - 62px );
left:25px;
border:1px solid #AAAAAAFF;
border-radius: 8px;
background-color: #AAAAAA66;
}
/* this is horrible css lmao */
#options > input {
font-family:monospace;
width:250px;
font-size:14px;
border: 1px solid #777777;
background-color:#AAAAAA;
outline:none;
text-align:center;
}
#options {
height:30px;
display:none;
}
#customId {
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%)
}
@media only screen and (max-width: 450px) {
#content {
position:fixed;
left:0%;
top:0%;
transform:translate(0%,0%);
background-color:white;
width:100%;
height:100%;
}
}
</style>
</head>
<body>
<input type="text" id="CopyTB" value="" readonly style="opacity:0;width:10px;height:0%;">
<div id="content">
<h1>
monofile<span style="font-style:italic;font-weight:bold;font-size:16px;color:#999999"> $Version</span>
</h1>
<h2><em>Discord-based file sharing</em></h2>
<div class="note" style="border-color:#FFAAAAFF;background-color:#FFAAAA66">
Before sharing files, please remember:
<ul>
<li>Do NOT share sensitive information via monofile</li>
<li>Do NOT share illegal content via monofile</li>
<li>The owner of this instance reserves the right to remove your files</li>
</ul>
</div>
<div style="width:100%;height:25px"></div>
<div id="btnContainer">
<button id="uploadButton">$UploadButtonText</button>
<button id="optionsButton">• • •</button>
</div>
<div id="options" class="note" style="border-radius:0px;">
<input id="customId" autocomplete="off" placeholder = "custom id (30char, no spaces)" maxlength="30">
</div>
<p style="font-family:monospace;position:relative;width:calc( 100% - 50px );left:25px;text-align: center;">
Max filesize on instance: $MaxInstanceFilesize
<br />
Hosting <strong style="font-family:monospace">$FileNum</strong> files
</p>
<p style="font-family:monospace;position:relative;width:calc( 100% - 50px );left:25px;text-align: center;font-size:12px;color:gray;">made by nbitzz — <a style="color:gray;font-family:monospace;font-size:12px;" href="https://github.com/nbitzz/monofile">github</a><a style="color:gray;font-family:monospace;font-size:12px;" href="$otherPath">$otherText</a></p>
<div style="width:100%;height:25px"></div>
</div>
</body>
<!-- bad thing to do but i'm being rushed -->
<script>
let uploading = false
const updateBtnTxt = (btntxt) => {document.getElementById("btnContainer").innerHTML = `<div class="note" style="width:calc( 100% - 10px );height:calc( 100% - 10px );position:absolute;left:0px;top:0px;"><p style="font-family:monospace;position:relative;width:calc( 100% - 50px );left:25px;text-align: center;">${btntxt}</p></div>`}
const getOptionsForUploading = () => {
uploading = true
document.getElementById("options").style.display = "none"
return {
uploadId: document.getElementById("customId").value
}
}
document.getElementById("optionsButton").addEventListener("click",() => {
let display = document.getElementById("options").style.display
if (!uploading) document.getElementById("options").style.display = !display || display == "none" ? "block" : "none"
})
</script>
<script src="/static/script/$Handler.js"></script>
</html>