141 lines
6.5 KiB
HTML
141 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>filetray</title>
|
|
<style>
|
|
body {
|
|
font-family: sans-serif;
|
|
background-image: url('https://i.pinimg.com/originals/fd/b2/1c/fdb21c0e4f3dbb6ccd9a63c68fce8645.gif');
|
|
background-size: cover;
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
body {
|
|
background: black;
|
|
background-image: url('https://i.pinimg.com/originals/fd/b2/1c/fdb21c0e4f3dbb6ccd9a63c68fce8645.gif');
|
|
background-size: cover;
|
|
color: white;
|
|
}
|
|
}
|
|
.container {
|
|
padding-right: 15px;
|
|
padding-left: 15px;
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100vh;
|
|
}
|
|
@media (min-width: 768px) {
|
|
.container {
|
|
width: 750px;
|
|
}
|
|
}
|
|
@media (min-width: 992px) {
|
|
.container {
|
|
width: 970px;
|
|
}
|
|
}
|
|
@media (min-width: 1200px) {
|
|
.container {
|
|
width: 1170px;
|
|
}
|
|
}
|
|
input,select {
|
|
margin-bottom: 1em;
|
|
}
|
|
.file-upload{display:block;text-align:center;font-family: Helvetica, Arial, sans-serif;font-size: 12px; margin-bottom: 20px; width: 300px;}
|
|
.file-upload .file-select{display:block;border: 2px solid #dce4ec;color: #34495e;cursor:pointer;height:40px;line-height:40px;text-align:left;background:#FFFFFF;overflow:hidden;position:relative;}
|
|
.file-upload .file-select .file-select-button{background:#dce4ec;padding:0 10px;display:inline-block;height:40px;line-height:40px;}
|
|
.file-upload .file-select .file-select-name{line-height:40px;display:inline-block;padding:0 10px;}
|
|
.file-upload .file-select:hover{border-color:#34495e;transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;}
|
|
.file-upload .file-select:hover .file-select-button{background:#34495e;color:#FFFFFF;transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;}
|
|
.file-upload.active .file-select{border-color:#3fa46a;transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;}
|
|
.file-upload.active .file-select .file-select-button{background:#3fa46a;color:#FFFFFF;transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;}
|
|
.file-upload .file-select input[type=file]{z-index:100;cursor:pointer;position:absolute;height:100%;width:100%;top:0;left:0;opacity:0;filter:alpha(opacity=0);}
|
|
.file-upload .file-select.file-select-disabled{opacity:0.65;}
|
|
.file-upload .file-select.file-select-disabled:hover{cursor:default;display:block;border: 2px solid #dce4ec;color: #34495e;cursor:pointer;height:40px;line-height:40px;margin-top:5px;text-align:left;background:#FFFFFF;overflow:hidden;position:relative;}
|
|
.file-upload .file-select.file-select-disabled:hover .file-select-button{background:#dce4ec;color:#666666;padding:0 10px;display:inline-block;height:40px;line-height:40px;}
|
|
.file-upload .file-select.file-select-disabled:hover .file-select-name{line-height:40px;display:inline-block;padding:0 10px;}
|
|
.subform {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
button {
|
|
display: inline-block;
|
|
border: 0;
|
|
outline: 0;
|
|
margin: 0;
|
|
padding: 15px;
|
|
height: 44px;
|
|
color: #fff;
|
|
font: 19px/15px 'Oswald', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, "Lucida Grande", sans-serif;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
cursor: pointer;
|
|
-webkit-border-radius: 3px;
|
|
-moz-border-radius: 3px;
|
|
border-radius: 3px;
|
|
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
|
|
-moz-box-sizing: border-box; /* Firefox, other Gecko */
|
|
box-sizing: border-box; /* Opera/IE 8+ */
|
|
-webkit-font-smoothing:antialiased;
|
|
-webkit-text-size-adjust:none;
|
|
box-shadow: 0 1px 2px rgba(0,0,0,.15);
|
|
}
|
|
button:hover {
|
|
background: #c93c1d;
|
|
-webkit-transition:all .25s ease-in-out;
|
|
-moz-transition:all .25s ease-in-out;
|
|
-o-transition:all .25s ease-in-out;
|
|
transition:all .25s ease-in-out;
|
|
}
|
|
button:active {
|
|
background: #ae3318;
|
|
}
|
|
button.light {
|
|
background: #fff;
|
|
color: #555759;
|
|
}
|
|
button.light:hover {
|
|
background: #ff009d;
|
|
color: #fff;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1 style="font-size: 3em; color: #ffffff;">filetray</h1>
|
|
<form method="POST" class="subform" enctype="multipart/form-data">
|
|
<div class="file-upload">
|
|
<div class="file-select">
|
|
<div class="file-select-button" id="fileName">Choose File</div>
|
|
<div class="file-select-name" id="noFile">No file chosen...</div>
|
|
<input type="file" name="file" id="chooseFile">
|
|
</div>
|
|
</div>
|
|
<!-- <input type="file" name="file" /> -->
|
|
<button class="light" type="submit">upload</button>
|
|
</form>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|
|
<script>
|
|
$('#chooseFile').bind('change', function () {
|
|
var filename = $("#chooseFile").val();
|
|
if (/^\s*$/.test(filename)) {
|
|
$(".file-upload").removeClass('active');
|
|
$("#noFile").text("No file chosen...");
|
|
}
|
|
else {
|
|
$(".file-upload").addClass('active');
|
|
$("#noFile").text(filename.replace("C:\\fakepath\\", ""));
|
|
}
|
|
});
|
|
</script>
|