html
This commit is contained in:
Anatoly Prohacky
parent
fafcfb4fae
commit
d25c2e6f43
117
pub/css/button.css
Normal file
117
pub/css/button.css
Normal file
@ -0,0 +1,117 @@
|
|||||||
|
/*Стили для демонстрации*/
|
||||||
|
body{
|
||||||
|
background-color: #799eb4;
|
||||||
|
}
|
||||||
|
.wrapper{
|
||||||
|
width: 100%;
|
||||||
|
min-height: 30%;
|
||||||
|
height: 30%;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: -moz-flex;
|
||||||
|
display: -ms-flex;
|
||||||
|
display: -o-flex;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
justify-content:center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.button13 {
|
||||||
|
display: inline-block;
|
||||||
|
width: 15em;
|
||||||
|
font-size: 80%;
|
||||||
|
color: rgba(255,255,255,.9);
|
||||||
|
text-shadow: #2e7ebd 0 1px 2px;
|
||||||
|
text-decoration: none;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 1.1;
|
||||||
|
white-space: pre-line;
|
||||||
|
padding: .7em 0;
|
||||||
|
border: 1px solid;
|
||||||
|
border-color: #60a3d8 #2970a9 #2970a9 #60a3d8;
|
||||||
|
border-radius: 6px;
|
||||||
|
outline: none;
|
||||||
|
background: #3a9ef0 linear-gradient(#89bbe2, #60a3d8 50%, #378bce);
|
||||||
|
box-shadow: inset rgba(255,255,255,.5) 1px 1px;
|
||||||
|
}
|
||||||
|
.button13:first-line{
|
||||||
|
font-size: 170%;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.button13:hover {
|
||||||
|
color: rgb(255,255,255);
|
||||||
|
background-image: linear-gradient(#9dc7e7, #74afdd 50%, #378bce);
|
||||||
|
}
|
||||||
|
.button13:active {
|
||||||
|
color: rgb(255,255,255);
|
||||||
|
border-color: #2970a9;
|
||||||
|
background-image: linear-gradient(#5796c8, #6aa2ce);
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.input-file {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.input-file-text {
|
||||||
|
padding: 0 10px;
|
||||||
|
line-height: 40px;
|
||||||
|
text-align: left;
|
||||||
|
height: 40px;
|
||||||
|
display: block;
|
||||||
|
float: left;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 200px;
|
||||||
|
border-radius: 6px 0px 0 6px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
.input-file-btn {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
cursor: pointer;
|
||||||
|
outline: none;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 14px;
|
||||||
|
vertical-align: middle;
|
||||||
|
color: rgb(255 255 255);
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 0 4px 4px 0;
|
||||||
|
background-color: #419152;
|
||||||
|
line-height: 22px;
|
||||||
|
height: 40px;
|
||||||
|
padding: 10px 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: none;
|
||||||
|
margin: 0;
|
||||||
|
transition: background-color 0.2s;
|
||||||
|
}
|
||||||
|
.input-file input[type=file] {
|
||||||
|
position: absolute;
|
||||||
|
z-index: -1;
|
||||||
|
opacity: 0;
|
||||||
|
display: block;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Focus */
|
||||||
|
.input-file input[type=file]:focus + .input-file-btn {
|
||||||
|
box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hover/active */
|
||||||
|
.input-file:hover .input-file-btn {
|
||||||
|
background-color: #59be6e;
|
||||||
|
}
|
||||||
|
.input-file:active .input-file-btn {
|
||||||
|
background-color: #2E703A;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Disabled */
|
||||||
|
.input-file input[type=file]:disabled + .input-file-btn {
|
||||||
|
background-color: #eee;
|
||||||
|
}
|
||||||
44
pub/css/style.css
Normal file
44
pub/css/style.css
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
|
||||||
|
/*Обнуление*/
|
||||||
|
*{
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
*,*:before,*:after{
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
:focus,:active{outline: none;}
|
||||||
|
a:focus,a:active{outline: none;}
|
||||||
|
|
||||||
|
nav,footer,header,aside{display: block;}
|
||||||
|
|
||||||
|
html,body{
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
font-size: 100%;
|
||||||
|
line-height: 1;
|
||||||
|
font-size: 14px;
|
||||||
|
-ms-text-size-adjust: 100%;
|
||||||
|
-moz-text-size-adjust: 100%;
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
}
|
||||||
|
input,button,textarea{font-family:inherit;}
|
||||||
|
|
||||||
|
input::-ms-clear{display: none;}
|
||||||
|
button{cursor: pointer;}
|
||||||
|
button::-moz-focus-inner {padding:0;border:0;}
|
||||||
|
a, a:visited{text-decoration: none;}
|
||||||
|
a:hover{text-decoration: none;}
|
||||||
|
ul li{list-style: none;}
|
||||||
|
img{vertical-align: top;}
|
||||||
|
|
||||||
|
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight: 400;}
|
||||||
|
/*--------------------*/
|
||||||
|
|
||||||
|
.bigred{
|
||||||
|
font-size: 20px;
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
34
pub/css/text.css
Normal file
34
pub/css/text.css
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
h1{
|
||||||
|
font-size: 40px;
|
||||||
|
text-align: center;
|
||||||
|
color: aliceblue;
|
||||||
|
margin-top: 10px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
h2{
|
||||||
|
font-size:30px;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3{
|
||||||
|
font-size:20px;
|
||||||
|
font-weight: 400;
|
||||||
|
text-align: center;
|
||||||
|
color: aliceblue;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4{
|
||||||
|
font-size:10px;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
h5{
|
||||||
|
font-size:5px;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
h6{
|
||||||
|
font-size:2px;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
38
pub/img/upload.svg
Normal file
38
pub/img/upload.svg
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 330 330" style="enable-background:new 0 0 330 330;" xml:space="preserve" width="512px" height="512px">
|
||||||
|
<g id="XMLID_10_">
|
||||||
|
<path id="XMLID_11_" d="M105.604,105.605L150,61.212v183.786c0,8.284,6.716,15,15,15s15-6.716,15-15V61.213l44.392,44.392 c2.929,2.929,6.768,4.394,10.606,4.394c3.839,0,7.678-1.464,10.607-4.394c5.858-5.858,5.858-15.355,0-21.213l-69.995-69.996 c-0.352-0.351-0.721-0.683-1.104-0.998c-0.166-0.136-0.341-0.254-0.51-0.381c-0.222-0.167-0.439-0.337-0.67-0.492 c-0.207-0.139-0.422-0.259-0.635-0.386c-0.207-0.125-0.41-0.254-0.624-0.369c-0.217-0.116-0.439-0.213-0.661-0.318 c-0.223-0.105-0.441-0.216-0.67-0.311c-0.214-0.088-0.432-0.16-0.649-0.238c-0.244-0.088-0.485-0.182-0.736-0.258 c-0.216-0.065-0.435-0.112-0.652-0.167c-0.256-0.065-0.51-0.137-0.77-0.189c-0.25-0.049-0.503-0.078-0.755-0.115 c-0.231-0.034-0.46-0.077-0.695-0.1c-0.462-0.045-0.925-0.067-1.389-0.07c-0.03,0-0.059-0.004-0.089-0.004 c-0.029,0-0.059,0.004-0.088,0.004c-0.464,0.002-0.928,0.025-1.391,0.07c-0.229,0.023-0.453,0.065-0.68,0.098 c-0.258,0.037-0.516,0.067-0.771,0.118c-0.254,0.05-0.5,0.12-0.749,0.183c-0.226,0.057-0.452,0.107-0.676,0.174 c-0.241,0.073-0.476,0.164-0.712,0.249c-0.225,0.081-0.452,0.155-0.674,0.247c-0.22,0.091-0.43,0.198-0.644,0.299 c-0.23,0.108-0.462,0.211-0.688,0.331c-0.204,0.109-0.396,0.233-0.595,0.351c-0.223,0.132-0.447,0.258-0.664,0.403 c-0.217,0.145-0.42,0.307-0.629,0.462c-0.184,0.137-0.371,0.264-0.549,0.411c-0.365,0.299-0.714,0.616-1.049,0.947 c-0.016,0.016-0.033,0.029-0.05,0.045L84.392,84.391c-5.857,5.858-5.858,15.355,0,21.213 C90.249,111.463,99.747,111.461,105.604,105.605z" fill="#8aa4ab"/>
|
||||||
|
<path id="XMLID_12_" d="M315,160c-8.284,0-15,6.716-15,15v115H30V175c0-8.284-6.716-15-15-15s-15,6.716-15,15v130 c0,8.284,6.716,15,15,15h300c8.284,0,15-6.716,15-15V175C330,166.716,323.284,160,315,160z" fill="#8aa4ab"/>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.2 KiB |
@ -1,17 +1,82 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<title>Конвертор ППКУП Сириус</title>
|
||||||
<title>Конвертор Sirius</title>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||||
|
<meta name="description" content="Онлайн конвертер конфураций ППКУП Сириус v1.03.022 (Болид)">
|
||||||
|
<link rel="stylesheet" href="css/style.css" />
|
||||||
|
<link rel="stylesheet" href="css/button.css" />
|
||||||
|
<link rel="stylesheet" href="css/text.css" />
|
||||||
|
<!-- Кодировка страницы -->
|
||||||
|
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
|
||||||
|
<!-- Адаптив -->
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
|
||||||
|
<script src="https://snipp.ru/cdn/jquery/2.1.1/jquery.min.js"></script>
|
||||||
|
<script src="js/button"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<form enctype="multipart/form-data" method="post" action="http://localhost:8188/api/sirius">
|
|
||||||
<p>
|
<h1>Онлайн конвертер конфураций ППКУП "Сириус" v1.03.022 (Болид)</h1>
|
||||||
<input type="file" name="file" />
|
<br>
|
||||||
</p>
|
<br>
|
||||||
<p>
|
<br>
|
||||||
<input type="submit" value="Отправить" />
|
<h3>Предназначен для конвертации сохраненой конфигурации c ППКУП "Сириус" v1.03.022 в формате "json", в удобно читаемый формат файла типа exel, для последующей работы с ним (например создании инструкций).</h3>
|
||||||
</p>
|
<br>
|
||||||
</form>
|
<br>
|
||||||
|
<br>
|
||||||
|
<h3>В выходном файле присутствуют поля. Номер зоны, Наименование зоны, Адреса прибора и шлейфы входящие в данную зону.</h3>
|
||||||
|
|
||||||
|
<form id="myForm" enctype="multipart/form-data" class="wrapper">
|
||||||
|
<label class="input-file">
|
||||||
|
<span class="input-file-text" type="text">нет файла</span>
|
||||||
|
<input type="file" id="myFile" name="file">
|
||||||
|
<span class="input-file-btn">Выберите файл</span>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<button type="button" class="button13" onclick="uploadFile()">Конвертировать</button>
|
||||||
|
|
||||||
|
</form>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
$('.input-file input[type=file]').on('change', function(){
|
||||||
|
let file = this.files[0];
|
||||||
|
$(this).closest('.input-file').find('.input-file-text').html(file.name);
|
||||||
|
});
|
||||||
|
|
||||||
|
function uploadFile() {
|
||||||
|
let fileInput = document.getElementById("myFile");
|
||||||
|
file = fileInput.files[0]
|
||||||
|
let formData = new FormData();
|
||||||
|
formData.append("file", file);
|
||||||
|
let fileDown = file.name.replace(/\.[^.]+$/, "")
|
||||||
|
|
||||||
|
|
||||||
|
fetch("https://sirius.gitstore.ru/api/sirius", {
|
||||||
|
method: "POST",
|
||||||
|
body: formData
|
||||||
|
})
|
||||||
|
.then(response => {
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`HTTP ${response.status} - ${response.statusText}`);
|
||||||
|
}
|
||||||
|
return response.blob();
|
||||||
|
})
|
||||||
|
.then(blob => {
|
||||||
|
let URL = window.URL || window.webkitURL,
|
||||||
|
downloadUrl = URL.createObjectURL(blob),
|
||||||
|
a = document.createElement('a');
|
||||||
|
a.href = downloadUrl;
|
||||||
|
a.target = '_blank';
|
||||||
|
a.download = fileDown
|
||||||
|
document.body.appendChild(a);
|
||||||
|
a.click();
|
||||||
|
a.parentNode.removeChild(a);
|
||||||
|
setTimeout(() => { URL.revokeObjectURL(downloadUrl) }, 1000);
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
throw err;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</html>
|
</html>
|
||||||
4
pub/js/button.js
Normal file
4
pub/js/button.js
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
$('.input-file input[type=file]').on('change', function(){
|
||||||
|
let file = this.files[0];
|
||||||
|
$(this).closest('.input-file').find('.input-file-text').html(file.name);
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue
Block a user