209 lines
5.6 KiB
HTML
209 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="UTF-8">
|
|
<html>
|
|
<head>
|
|
<title>BSMSapp</title>
|
|
<div align="center">
|
|
</head>
|
|
<div class="d-flex flex-column justify-content-center w-100 h-100">
|
|
<br><br>
|
|
<body bgcolor="#FFFFFF" text="Black">
|
|
<header>
|
|
<h1><span id="replace">BSMSapp</span></h1>
|
|
</header>
|
|
|
|
|
|
<form id="myForm" class="form-style">
|
|
<ul>
|
|
<li>
|
|
<input value="0" name="id" type="number"/>
|
|
<span>Enter the product identifier.</span>
|
|
</li>
|
|
<li>
|
|
<input value="0" name="stock" type="number"/>
|
|
<span>Enter the new stock number.</span>
|
|
</li>
|
|
<li>
|
|
<input type="submit" value="Upload"/>
|
|
</li>
|
|
</ul>
|
|
</form>
|
|
</body>
|
|
</div>
|
|
|
|
</html>
|
|
|
|
<script>
|
|
const thisForm = document.getElementById('myForm');
|
|
thisForm.addEventListener('submit', async function (e) {
|
|
e.preventDefault();
|
|
const formData = new FormData(thisForm).entries()
|
|
const str = JSON.stringify(Object.fromEntries(formData))
|
|
console.log(str.replace(/\"/g, ''))
|
|
const response = await fetch("${ENDPOINT}/resource", {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: str.replace(/\"/g, '')
|
|
});
|
|
|
|
const result = await response.json();
|
|
console.log(result)
|
|
});
|
|
|
|
function adjust_textarea(h) {
|
|
h.style.height = "20px";
|
|
h.style.height = (h.scrollHeight)+"px";
|
|
}
|
|
</script>
|
|
|
|
<style type="text/css">
|
|
body {
|
|
background: linear-gradient(-45deg, #ee7752, #df6493, #23a6d5, #23d5ab);
|
|
/* background-color: rgba(0, 0, 0, 0.1); */
|
|
background-size: 400% 400%;
|
|
animation: gradient 15s ease infinite;
|
|
height: 100vh;
|
|
}
|
|
@keyframes gradient {
|
|
0% {
|
|
background-position: 0% 50%;
|
|
}
|
|
|
|
50% {
|
|
background-position: 100% 50%;
|
|
}
|
|
|
|
100% {
|
|
background-position: 0% 50%;
|
|
}
|
|
}
|
|
header h1 {
|
|
font-size: 70px;
|
|
font-weight: 600;
|
|
background-image: linear-gradient(to left, #000000, #6b0bca);
|
|
color: transparent;
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
}
|
|
.form-style{
|
|
max-width:400px;
|
|
margin:50px auto;
|
|
background:#fff;
|
|
border-radius:2px;
|
|
padding:20px;
|
|
font-family: Georgia, "Times New Roman", Times, serif;
|
|
}
|
|
.form-style h1{
|
|
display: block;
|
|
text-align: center;
|
|
padding: 0;
|
|
margin: 0px 0px 20px 0px;
|
|
color: #5C5C5C;
|
|
font-size:x-large;
|
|
}
|
|
.form-style ul{
|
|
list-style:none;
|
|
padding:0;
|
|
margin:0;
|
|
}
|
|
.form-style li{
|
|
display: block;
|
|
padding: 9px;
|
|
border:1px solid #DDDDDD;
|
|
margin-bottom: 30px;
|
|
border-radius: 3px;
|
|
}
|
|
.form-style li:last-child{
|
|
border:none;
|
|
margin-bottom: 0px;
|
|
text-align: center;
|
|
}
|
|
.form-style li > label{
|
|
display: block;
|
|
float: left;
|
|
margin-top: -19px;
|
|
background: #FFFFFF;
|
|
height: 14px;
|
|
padding: 2px 5px 2px 5px;
|
|
color: #B9B9B9;
|
|
font-size: 14px;
|
|
overflow: hidden;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
}
|
|
.form-style input[type="text"],
|
|
.form-style input[type="date"],
|
|
.form-style input[type="datetime"],
|
|
.form-style input[type="email"],
|
|
.form-style input[type="number"],
|
|
.form-style input[type="search"],
|
|
.form-style input[type="time"],
|
|
.form-style input[type="url"],
|
|
.form-style input[type="password"],
|
|
.form-style textarea,
|
|
.form-style select
|
|
{
|
|
box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
width: 100%;
|
|
display: block;
|
|
outline: none;
|
|
border: none;
|
|
height: 25px;
|
|
line-height: 25px;
|
|
font-size: 16px;
|
|
padding: 0;
|
|
font-family: Georgia, "Times New Roman", Times, serif;
|
|
}
|
|
.form-style input[type="text"]:focus,
|
|
.form-style input[type="date"]:focus,
|
|
.form-style input[type="datetime"]:focus,
|
|
.form-style input[type="email"]:focus,
|
|
.form-style input[type="number"]:focus,
|
|
.form-style input[type="search"]:focus,
|
|
.form-style input[type="time"]:focus,
|
|
.form-style input[type="url"]:focus,
|
|
.form-style input[type="password"]:focus,
|
|
.form-style textarea:focus,
|
|
.form-style select:focus
|
|
{
|
|
}
|
|
.form-style li > span{
|
|
background: #F3F3F3;
|
|
display: block;
|
|
padding: 3px;
|
|
margin: 0 -9px -9px -9px;
|
|
text-align: center;
|
|
color: #C0C0C0;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-size: 11px;
|
|
}
|
|
.form-style textarea{
|
|
resize:none;
|
|
}
|
|
.form-style input[type="submit"],
|
|
.form-style input[type="button"]{
|
|
background: #2471FF;
|
|
border: none;
|
|
padding: 10px 20px 10px 20px;
|
|
border-bottom: 3px solid #5994FF;
|
|
border-radius: 3px;
|
|
color: #D2E2FF;
|
|
}
|
|
.form-style input[type="submit"]:hover,
|
|
.form-style input[type="button"]:hover{
|
|
background: #6B9FFF;
|
|
color:#fff;
|
|
}
|
|
input::-webkit-outer-spin-button,
|
|
input::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
input[type=number] {
|
|
-moz-appearance: textfield;
|
|
}
|
|
</style> |