lot of style changes

This commit is contained in:
Beu 2019-10-22 15:49:57 +02:00
parent 0677239783
commit 0c274e75c0
4 changed files with 59 additions and 21 deletions

BIN
Roboto-Regular.woff Normal file

Binary file not shown.

BIN
Roboto-Regular.woff2 Normal file

Binary file not shown.

View File

@ -1,19 +1,31 @@
<html>
<head> <head>
<title>VirtIT ft</title> <title>VirtIT ft</title>
<link rel="stylesheet" type="text/css" href="<?php print(_HTTP_PATH . "style.css"); ?> "> <link rel="stylesheet" type="text/css" href="<?php print(_HTTP_PATH . "style.css"); ?> ">
<link rel="icon" type="image/x-icon" href="<?php print(_HTTP_PATH . "favicon.ico"); ?> "> <link rel="icon" type="image/x-icon" href="<?php print(_HTTP_PATH . "favicon.ico"); ?> ">
<script src="<?php print(_HTTP_PATH . "script.js"); ?> "></script> <script src="<?php print(_HTTP_PATH . "script.js"); ?> "></script>
<style>
@font-face {
font-family: 'Roboto';
src: url('<?php print(_HTTP_PATH . "Roboto-Regular.woff2"); ?>') format('woff2'),
url('<?php print(_HTTP_PATH . "Roboto-Regular.woff"); ?> ') format('woff');
font-weight: normal;
font-style: normal;
}
</style>
</head> </head>
<body> <body>
<div class=core>
<h1>File Transfer</h1> <h1>File Transfer</h1>
<div id=dragzone class=dragndrop ondrop="file_dropped(event);" ondragover="return false" ondragenter="change_color_ondrag('ondragenter');" ondragleave="change_color_ondrag('ondragleave');" > <div id=dragzone class=dragndrop ondrop="file_dropped(event);" ondragover="return false" ondragenter="change_color_ondrag('ondragenter');" ondragleave="change_color_ondrag('ondragleave');" >
Drag and Drop your file or <input type="button" value="Select File" onclick="file_explorer();"> Drag and Drop your file or <input class="button" type="button" value="Select File" onclick="file_explorer();">
<input type="file" id="uploadfile" hidden> <input type="file" id="uploadfile" hidden>
<br><br><br><br> <br><br><br><br>
<div id=divresponse></div><button id=copytoclipboard style="visibility: hidden;" onclick="copytoclipboard();">Copy to clipboard</button> <div id=divresponse></div><button class="button" id=copytoclipboard style="visibility: hidden;" onclick="copytoclipboard();">Copy to clipboard</button>
</div> </div>
<div class=infobox> <div class=infobox>
This tool is usable with <b>curl</b> or <b>wget</b>.<br><br> This tool is usable with <b>curl</b> or <b>wget</b>.<br><br>
@ -27,7 +39,10 @@ To download file :<br>
<li> wget -O hello.txt <?php print(_HTTP_PROTO . '://' . _HTTP_DOMAIN . _HTTP_PATH . _DATA_DIR . '/99999/file');?> <li> wget -O hello.txt <?php print(_HTTP_PROTO . '://' . _HTTP_DOMAIN . _HTTP_PATH . _DATA_DIR . '/99999/file');?>
</div> </div>
<div class=footer>
File transfer was created by <a href="https://twitter.com/AmazingBeu">@AmazingBeu</a>. You can find sources <a href="https://git.virtit.fr/VirtIT/web-ft">here</a>.
</div> </div>
<footer>
File transfer was created by <a href="https://twitter.com/AmazingBeu">@AmazingBeu</a>. You can find sources <a href="https://git.virtit.fr/VirtIT/web-ft">here</a>.
</footer>
</body> </body>
</html>

View File

@ -1,14 +1,34 @@
html { body{
max-width: 1500px; position: relative;
min-height: 100vh;
margin: 0;
}
.core {
font-family: 'Roboto', sans-serif;
max-width: 900px;
margin: auto; margin: auto;
display: inline-block; padding: 5px;
padding-top:50px; padding-top:50px;
text-align: center; text-align: center;
padding-bottom: 85px;
}
@media (min-width: 370px) {
.core {
padding-bottom: 65px;
}
}
@media (min-width: 600px) {
.core {
padding-bottom: 45px;
}
}
h1 {
font-size: 38;
} }
.dragndrop { .dragndrop {
margin: 20%;
margin-top: 5%; margin-top: 5%;
margin-bottom: 3%; margin-bottom: 3%;
background-color: #a3a3a3; background-color: #a3a3a3;
@ -16,34 +36,37 @@ html {
padding-top: 5%; padding-top: 5%;
height:40%; height:40%;
font-size: 20px; font-size: 20px;
cursor: pointer;
border: 6px dashed #444444; border: 6px dashed #444444;
border-radius: 20px; border-radius: 20px;
} }
.dragover { .dragndrop .button {
background-color: #888888; cursor: pointer;
} }
.dragndrop:hover { .dragover {
background-color: #888888; background-color: #888888;
} }
.infobox { .infobox {
text-align: left; text-align: left;
background: #eeeeee; background: #eeeeee;
margin-left: 20%;
margin-right:20%;
border-radius: 20px; border-radius: 20px;
border: 4px solid #a3a3a3; border: 4px solid #a3a3a3;
padding: 10px; padding: 10px;
} }
.footer { footer {
position: fixed; position: absolute;
padding: 1%; padding-top: 10px;
padding-bottom: 10px;
bottom: 0; bottom: 0;
left: 0;
width: 100%; width: 100%;
text-align: center; text-align: center;
background-color: #eeeeee; background-color: #eeeeee;
} }
footer a {
color: #555;
font-weight: bold;
text-decoration: none;
}