спросите у системного администратора.
Например у меня попросили сделать калькулятор пены. Он простой.
Кстати у веб мастеров только один вопрос возник зачем тут vue js. ок переписал на ванили.
Вставили и все заработало.
В случае cms вам просто нужно вставить исходный код, ну или просто ифрейм
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Расчет расхода пены</title>
<style>
.table-is-responsive {
overflow-x: auto;
}
table {
border-spacing: 0;
width: 100%;
border: 1px solid rgba(0, 0, 0, 0.1);
border-collapse: separate;
margin-bottom: 1.5em;
border-collapse: collapse;
border: 2px solid #69c5d3;
}
* {
padding: 0;
margin: 0;
list-style: none;
border: 0 none;
outline: none;
box-sizing: border-box;
}
table th:last-child,
table tr td:last-child {
border-right: 0;
}
table tbody td {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
td {
text-align: center;
}
table td,
table th {
padding: 0.4em;
text-align: left;
border-right: 1px dotted rgba(0, 0, 0, 0.1);
}
table tbody td {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
table td,
table th {
padding: 0.4em;
text-align: left;
border-right: 1px dotted rgba(0, 0, 0, 0.1);
}
.tr-gray {
background-color: #ececec;
}
.tr-white {
background-color: white;
}
.i-blue {
border: 2px solid #69c5d3;
}
.i-blue-s {
border: 2px solid #69c5d3;
width: 150px;
}
</style>
</head>
<body>
<!--
developed by vladimir korotenko in 2022(c)
contacts: skype: vladimir-korotenko site: https://vkorotenko.ru
-->
<div id="app">
<h1>Калькулятор расхода монтажной пены</h1>
<p>
Предлагаем простой инструмент для расхода количества монтажной пены. Наш калькулятор подсчитает расход пены в
литрах по заданным параметрам, а после высчитает количество баллонов с пеной, которые нужно закупать.
</p>
<br />
<div class="table-is-responsive">
<table class="table">
<tbody>
<tr class="tr-white">
<td class="success" width="45%">Ширина монтажного шва (мм):</td>
<td width="55%">
<input class="i-blue" type="text" id="calc-width" oninput="recalc();" />
</td>
</tr>
<tr class="tr-white">
<td class="success">Глубина монтажного шва (мм):</td>
<td>
<input class="i-blue" type="text" id="calc-depth" oninput="recalc()" />
</td>
</tr>
<tr class="tr-white">
<td class="success">Длина монтажного шва (м):</td>
<td>
<input class="i-blue" type="text" id="calc-length" oninput="recalc()" />
</td>
</tr>
<tr class="tr-white">
<td class="success">
Выход монтажной пены из баллончика (указывается на баллончике монтажной пены) (л):
</td>
<td>
<input class="i-blue" type="text" id="calc-volume" oninput="recalc()" />
</td>
</tr>
<tr class="tr-gray">
<td colspan="2"></td>
</tr>
<tr class="tr-white">
<td class="success">Расход монтажной пены в литрах:</td>
<td>
<input class="i-blue" name="toti" type="text" readonly="readonly" id="calc-foaminliter" />
</td>
</tr>
<tr class="tr-white">
<td class="success">Исходя из выхода пены из баллончика, число баллончиков:</td>
<td>
<input class="i-blue" name="ballon" type="text" readonly="readonly" id="calc-precesioncount" />
</td>
</tr>
<tr class="tr-gray">
<td colspan="2">
<input type="reset" class="i-blue-s" value="Сброс" onclick="clearform()" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
var iwidth = document.getElementById('calc-width');
var depth = document.getElementById('calc-depth');
var ilength = document.getElementById('calc-length');
var ivolume = document.getElementById('calc-volume');
var foaminliter = document.getElementById('calc-foaminliter');
var precesioncount = document.getElementById('calc-precesioncount');
function clearform() {
iwidth.value = '';
depth.value = '';
ilength.value = '';
ivolume.value = '';
foaminliter.value = '';
precesioncount.value = '';
}
function recalc() {
var result = (iwidth.value * depth.value * ilength.value) / 1000;
foaminliter.value = result ? result : '';
result = foaminliter.value / ivolume.value;
if (result && result != Infinity) {
precesioncount.value = Math.ceil(result);
precesioncount.title = result;
} else {
precesioncount.value = '';
precesioncount.title = '';
}
}
</script>
</body>
</html>
