up1/index.html

396 lines
10 KiB
HTML
Raw Normal View History

2015-06-06 02:02:44 +02:00
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<title>Upload</title>
<style>
body, html {
height: 100%;
margin: 0;
padding: 0;
font-family: Sans-Serif;
2015-06-07 00:05:55 +02:00
overflow: auto;
2015-06-06 02:02:44 +02:00
}
body {
2015-06-06 02:44:21 +02:00
background-color: #1d1f21;
2015-06-06 02:02:44 +02:00
}
.contentarea h1 {
color: white;
text-align: center;
vertical-align: middle;
line-height: 200px;
margin: 0;
2015-06-10 08:21:00 +02:00
-webkit-transition: background-color 400ms ease-out;
-moz-transition: background-color 400ms ease-out;
-o-transition: background-color 400ms ease-out;
-ms-transition: background-color 400ms ease-out;
transition: background-color 400ms ease-out;
}
.contentarea h1:hover {
background-color: #313538;
-webkit-transition: background-color 100ms ease-in;
-moz-transition: background-color 100ms ease-in;
-o-transition: background-color 100ms ease-in;
-ms-transition: background-color 100ms ease-in;
transition: background-color 100ms ease-in;
2015-06-06 02:02:44 +02:00
}
.contentarea {
width: 200px;
height: 200px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border: 2px solid white;
}
#pastearea {
cursor: pointer;
}
#pastearea.dragover {
background-color: rgba(255, 255, 255, .2);
}
2015-06-10 08:21:00 +02:00
#viewswitcher {
width: 90px;
height: 40px;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
border: 2px solid white;
}
#viewswitcher h3 {
color: white;
text-align: center;
vertical-align: middle;
line-height: 40px;
margin: 0;
-webkit-transition: background-color 400ms ease-out;
-moz-transition: background-color 400ms ease-out;
-o-transition: background-color 400ms ease-out;
-ms-transition: background-color 400ms ease-out;
transition: background-color 400ms ease-out;
}
#viewswitcher h3:hover {
background-color: #313538;
-webkit-transition: background-color 100ms ease-in;
-moz-transition: background-color 100ms ease-in;
-o-transition: background-color 100ms ease-in;
-ms-transition: background-color 100ms ease-in;
transition: background-color 100ms ease-in;
}
#footer {
position: absolute;
width: 100%;
bottom: 10px;
margin: auto;
text-align: center;
}
#footer a {
color: #aaa;
font-size: 14px;
}
2015-06-06 02:02:44 +02:00
progress {
width: 100%;
position: relative;
top: 50%;
border: none;
transform: translateY(-50%);
}
#progressamountbg {
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 10, 0, .5);
width: 0;
height: 100%;
z-index: -1;
}
#finallink {
color: white;
}
#downloadview, #downloaddetails {
width: 100%;
height: 100%;
2015-06-06 02:10:38 +02:00
position: absolute;
top: 0;
2015-06-06 02:02:44 +02:00
}
2015-06-07 00:05:55 +02:00
#downloadview .preview {
2015-06-06 02:02:44 +02:00
max-width: 100%;
max-height: 100%;
2015-06-06 23:44:42 +02:00
}
2015-06-07 00:05:55 +02:00
#previewimg img {
display: block;
margin: 0 auto;
}
2015-06-07 00:05:55 +02:00
#previewimg img:not(.dragged) {
max-width: 100vw;
max-height: 100vh;
}
2015-06-06 23:44:42 +02:00
#downloadview .preview {
2015-06-06 02:02:44 +02:00
display: block;
margin: 0 auto;
}
2015-06-07 00:05:55 +02:00
audio.preview, video.preview, #downloadprogress, #previewimg {
2015-06-06 02:02:44 +02:00
position: relative;
top: 50%;
2015-06-06 04:29:56 +02:00
text-align: center;
2015-06-06 02:02:44 +02:00
transform: translateY(-50%);
2015-06-06 23:54:08 +02:00
margin: 0 auto;
2015-06-06 02:02:44 +02:00
}
2015-06-06 23:44:42 +02:00
body {
overflow: auto;
}
2015-06-06 02:02:44 +02:00
#pastecatcher {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
opacity: 0;
overflow: hidden;
}
2015-06-06 23:10:41 +02:00
#previewtext {
2015-06-06 02:02:44 +02:00
position: absolute;
2015-06-06 02:27:22 +02:00
top: 47px;
2015-06-06 23:10:41 +02:00
width: 100%;
height: calc(100% - 110px);
overflow: auto;
}
#previewtext pre {
margin: 0;
padding-left: 50px;
}
#previewtext code {
background: none;
margin: 0;
overflow: visible;
2015-06-06 02:02:44 +02:00
}
2015-06-10 08:21:00 +02:00
#previewtext>textarea {
background: transparent none repeat scroll 0% 0%;
border: 0px none;
padding: 0px;
font-family: monospace;
outline: medium none;
resize: none;
margin: 0;
padding-top: 5px;
padding-left: 50px;
font-size: 13px;
width: calc(100% - 50px);
height: calc(100% - 5px);
color: white;
}
2015-06-06 02:02:44 +02:00
.hidden {
display: none !important;
}
#filename {
2015-06-06 23:44:42 +02:00
position: fixed;
2015-06-06 02:02:44 +02:00
top: 0;
left: 0;
padding: 5px;
background-color: rgba(0, 0, 0, .5);
2015-06-06 02:44:21 +02:00
border-bottom-right-radius: 5px;
2015-06-06 02:02:44 +02:00
margin: 0;
color: white;
opacity: .75;
z-index: 1;
2015-06-06 05:51:56 +02:00
max-width: 100%;
2015-06-06 05:55:05 +02:00
box-sizing: border-box;
-moz-box-sizing: border-box;
2015-06-06 05:49:46 +02:00
white-space: nowrap;
overflow: hidden;
2015-06-06 02:02:44 +02:00
}
2015-06-10 08:21:00 +02:00
input#filename {
position: fixed;
font-size: 16px;
top: 10px;
left: 10px;
padding: 5px;
background-color: rgba(0, 0, 0, .5);
border-bottom-right-radius: initial;
border: 1px solid white;
margin: 0;
color: white;
opacity: .75;
z-index: 1;
max-width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
white-space: nowrap;
overflow: hidden;
}
2015-06-06 02:02:44 +02:00
#btnarea, #globalbtnarea {
2015-06-06 23:44:42 +02:00
position: fixed;
2015-06-06 02:02:44 +02:00
bottom: 5px;
height: 40px;
display: table;
border-collapse: separate;
border-spacing: 5px;
}
#globalbtnarea {
right: 0;
}
.btn {
height: 40px;
border: 2px solid white;
display: inline-block;
cursor: pointer;
vertical-align: middle;
display: table-cell;
margin-right: 5px;
color: white !important;
text-decoration: none;
opacity: .75;
padding: 5px;
background-color: rgba(0, 0, 0, .5);
box-sizing: border-box;
-moz-box-sizing: border-box;
}
2015-06-06 04:29:56 +02:00
#downloadprogress {
color: white;
}
2015-06-06 02:02:44 +02:00
.btn:hover {
opacity: 1;
}
2015-06-06 23:10:41 +02:00
#linenos {
color: #7d7d7d;
position: absolute;
top: 6.5px;
font-family: monospace;
left: 5px;
float: left;
z-index: -1;
text-align: right;
width: 30px;
overflow: hidden;
}
2015-06-06 23:44:42 +02:00
.dragresize.dragging {
cursor: nwse-resize;
}
2015-06-06 02:02:44 +02:00
</style>
2015-06-06 21:51:28 +02:00
<script src="/static/deps/jquery-2.1.4.min.js"></script>
2015-06-06 21:13:42 +02:00
<script src="/static/js/shims.js"></script>
2015-06-06 02:02:44 +02:00
<script src="/static/js/drop.js"></script>
2015-06-10 08:21:00 +02:00
<script src="/static/js/textpaste.js"></script>
2015-06-06 02:02:44 +02:00
<script src="/static/js/loadencryption.js"></script>
<script src="/static/js/downloadable.js"></script>
<script src="/static/js/config.js"></script>
2015-06-06 23:44:42 +02:00
<script src="/static/js/dragresize.js"></script>
2015-06-06 02:02:44 +02:00
<script>
$(window).unload(function () { $(window).unbind('unload') })
</script>
2015-06-06 21:51:28 +02:00
<link rel="stylesheet" href="/static/deps/hybrid.min.css">
<script src="/static/deps/highlight.min.js"></script>
2015-06-06 02:02:44 +02:00
</head>
<body>
2015-06-10 08:21:00 +02:00
<div id="viewswitcher">
<h3 id="text">Text</h3>
<h3 id="save" class="hidden">Save</h3>
</div>
2015-06-06 02:02:44 +02:00
<div class="contentarea" id="uploadview">
<div id="pastearea">
<h1>Upload</h1>
</div>
<div class="hidden" id="uploadprogress">
2015-06-07 01:19:06 +02:00
<h1 id="progressamount"></h1>
2015-06-06 02:02:44 +02:00
<div id="progressamountbg"></div>
</div>
<div class="hidden" id="uploadfinish">
<h1><a href="" id="finallink">Link</a></h1>
</div>
2015-06-07 01:26:47 +02:00
<form>
<input type="file" id="filepicker" class="hidden" />
</form>
2015-06-06 02:02:44 +02:00
</div>
2015-06-10 08:21:00 +02:00
<div id="textview" class="hidden">
<input id="filename" type="text" value="Pasted Text.txt">
<div id="previewtext" class="preview">
<div id="linenos">
&gt;
</div>
<textarea></textarea>
</div>
</div>
2015-06-06 04:29:56 +02:00
2015-06-06 02:02:44 +02:00
<div id="downloadview" class="hidden">
2015-06-06 04:29:56 +02:00
<h1 id="downloadprogress"></h1>
2015-06-06 02:02:44 +02:00
<div id="downloaddetails" class="hidden">
<h1 id="filename">Filename</h1>
2015-06-06 23:44:42 +02:00
<div class="preview hidden" id="previewimg">
<img src="" class="dragresize" />
</div>
2015-06-06 23:10:41 +02:00
<div id="previewtext" class="hidden preview">
<div id="linenos"></div>
<pre><code></code></pre>
</div>
2015-06-06 03:05:48 +02:00
<video class="hidden preview" controls autoplay></video>
<audio class="hidden preview" controls autoplay></audio>
2015-06-06 02:02:44 +02:00
<div id="btnarea">
<a class="btn" id="dlbtn" href="#">Download</a>
<a class="btn" id="inbrowserbtn" target="_blank" href="#">View In Browser</a>
2015-06-06 22:08:22 +02:00
<a class="btn" id="deletebtn" href="#">Delete</a>
2015-06-06 02:02:44 +02:00
</div>
<div id="globalbtnarea">
<a class="btn" id="newupload" href="#">New Upload</a>
</div>
</div>
2015-06-06 02:08:40 +02:00
</div>
2015-06-10 08:21:00 +02:00
<div id="footer">
<a href="https://github.com/Upload/Upload" target="_blank">Source Code</a>
</div>
2015-06-06 02:02:44 +02:00
</body>
</html>