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>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Конвертор Sirius</title>
|
||||
<title>Конвертор ППКУП Сириус</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>
|
||||
<body>
|
||||
<form enctype="multipart/form-data" method="post" action="http://localhost:8188/api/sirius">
|
||||
<p>
|
||||
<input type="file" name="file" />
|
||||
</p>
|
||||
<p>
|
||||
<input type="submit" value="Отправить" />
|
||||
</p>
|
||||
</form>
|
||||
|
||||
<h1>Онлайн конвертер конфураций ППКУП "Сириус" v1.03.022 (Болид)</h1>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<h3>Предназначен для конвертации сохраненой конфигурации c ППКУП "Сириус" v1.03.022 в формате "json", в удобно читаемый формат файла типа exel, для последующей работы с ним (например создании инструкций).</h3>
|
||||
<br>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
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