aerotech/ate0004
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip:

Browse Source
This commit is contained in:
Alexey Zholtikov
2026-01-11 09:52:46 +03:00
parent 4b5db1d472
commit 629ab310b6
8 changed files with 805 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
html/index/index.html Executable file
View File

@@ -0,0 +1,93 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>be1.ru</title>
<link rel="stylesheet" href="index_style.css">
<link rel="icon" href="favicon.ico" />
<script src="index_script.js"></script>
</head>
<body>
<input type="checkbox" id="nav-toggle" hidden>
<nav class="nav">
<label for="nav-toggle" class="nav-toggle" onclick></label>
<!-- <h2 class="logo"> -->
<p style="text-align:center"> ATE0004
<!-- </h2> -->
<ul>
<li><a href="#1">About</a>
<li><a href="#2">Statistics</a>
<li><a href="#3">Update</a>
<li><a href="#3">Manual</a>
<!-- <li><a href="#4">Четыре</a>
<li><a href="#5">Пять</a>
<li><a href="#6">Шесть</a>
<li><a href="#7">Семь</a> -->
</ul>
</nav>
<!-- Маска (затемнение) основного контента при включенной панели
по-умолчанию данная фишка не используется, если оно вам надо,
просто расккоментируйте div-контейнер ниже -->
<div class="mask-content"></div>
<p class="aligncenter"><img alt="logo" src="logo.png" style="height:120px; width:300px" /></p>
<p style="text-align:center"><span style="font-size:24px">ATE0004</span></p>
<p style="text-align:center">Honeywell Retractable Landing Light CMM 33-42-07 P/N 45-0351-X Motor Test Box by
@rick_professor</p>
</div>
<div class="content">
<div class="card">
<h2>ONBOARD LED GPIO2</h2>
<p style="text-align:center" class="no-select"> <button id="button" class="button">Toggle LED</button></p>
<p class="state">State: <span id="state">%s</span></p>
</div>
</div>
</div>
<main role="main">
<div class="content">
<div class="card">
<!-- <h2>ONBOARD LED GPIO2</h2> -->
<p style="text-align:center" class="no-select"> <button id="button" class="button">Thermostat</button>
<p style="text-align:center" class="no-select"> <button id="button" class="button">Retract</button>
<p style="text-align:center" class="no-select"> <button id="button" class="button">Extend</button>
<!-- </p> -->
<!-- <p class="state">State: <span id="state">%s</span></p> -->
</div>
</div>
<!-- <article>
<header>
<h1 class="header__title">Просто Демо:</h1>
<h2>Выдвигающееся боковое меню на чистом CSS</h2>
</header>
<section>
<p style="text-align: center;">
<a href="index.html" class="btn btn-primary">Меню Слева</a>
<a href="right-slide-panel.html" class="btn btn-secondary">Меню Справа</a>
<p>Нажмите на "гамбургер-иконку" в левом или правом верхнем углу, в зависимости от выбранного вами
варианта, и вы увидите выдвигающуюся боковую панель в действии. Чаще всего в таких панельках
размещают меню навигации по сайту, что собственно мы и сделали. Вы же можете использовать боковую
панель, для любого другого элемента, который по вашему разумению, должен быть изначально скрыт,
например, форму подписки, блок кнопок социальных сетей, и т.д. и т.п...
<p>Работа данного меню построена на чистом CSS, без подключения javascript. Переключение осуществляется
с помощью скрытого флажка (checkbox) с использованием псевдокласса :checked из обоймы CSS3</p>
<p>С переклюателем панели особо не стал заморачиваться и использовал символ Unicode 'TRIGRAM FOR HEAVEN'
(U+2630), с простейшей заменой символа на 'Знак Умножения' (U+2715), когда панель раскрыта. Вам
ничего не мешает испльзовать любой другой значок, иконку или просто текст.
</section>
<hr>
<footer>
<p><a href="http://dbmast.ru/vydvigayushheesya-bokovoe-menyu-na-chistom-css">← Изучить Детали</a>
<p>сделано с любовью - <a href="https://twitter.com/dobrovoi">@dobrovoi</a>
</footer>
</article> -->
</main>
</body>
</html>

40
html/index/index_script.js Normal file
View File

@@ -0,0 +1,40 @@
var gateway = `ws://${window.location.hostname}/ws`;
var websocket;
window.addEventListener('load', onLoad);
function initWebSocket() {
console.log('Trying to open a WebSocket connection...');
websocket = new WebSocket(gateway);
websocket.onopen = onOpen;
websocket.onclose = onClose;
websocket.onmessage = onMessage; // <-- add this line
}
function onOpen(event) {
console.log('Connection opened');
}
function onClose(event) {
console.log('Connection closed');
setTimeout(initWebSocket, 2000);
}
function onMessage(event) {
var state;
console.log(event.data);
if (event.data == "1") {
state = "ON";
}
else {
state = "OFF";
}
document.getElementById('state').innerHTML = state;
}
function onLoad(event) {
initWebSocket();
initButton();
}
function initButton() {
document.getElementById('button').addEventListener('click', toggle);
}
function toggle() {
console.log('Click');
websocket.send('toggle');
}

456
html/index/index_style.css Normal file
View File

@@ -0,0 +1,456 @@
.aligncenter {
text-align: center;
}
* {
box-sizing: border-box;
}
body {
/* max-width: 320px; */
/* background: #bcc5c3; */
background: #16a085;
/* Максимальная ширина страницы в пикселах */
}
.no-select {
-webkit-touch-callout: none;
-moz-user-select: none;
-o-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.button {
width: 250px;
height: 70px;
padding: 15px 50px;
font-size: 24px;
text-align: center;
outline: 1px solid #666;
color: #fff;
background-color: #0ffa6d;
border: #0ffa6d;
border-radius: 5px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.button:active {
background-color: #fa0f0f;
transform: translateY(2px);
}
.nav {
/* ширна произвольная, не стесняйтесь экспериментировать */
width: 320px;
min-width: 320px;
/* фиксируем и выставляем высоту панели на максимум */
height: 100%;
position: fixed;
top: 0;
bottom: 0;
margin: 0;
/* сдвигаем (прячем) панель относительно левого края страницы */
left: -320px;
/* внутренние отступы */
padding: 15px 20px;
/* плавный переход смещения панели */
-webkit-transition: left 0.3s;
-moz-transition: left 0.3s;
transition: left 0.3s;
/* определяем цвет фона панели */
background: #16a085;
/* background: #bcc5c3; */
/* поверх других элементов */
z-index: 2000;
}
/**
* Кнопка переключения панели
* тег <label>
*/
.nav-toggle {
/* абсолютно позиционируем */
position: absolute;
/* относительно левого края панели */
left: 320px;
/* отступ от верхнего края панели */
top: 1em;
/* внутренние отступы */
padding: 0.5em;
/* определяем цвет фона переключателя
* чаще вчего в соответствии с цветом фона панели
*/
background: inherit;
/* цвет текста */
color: #dadada;
/* вид курсора */
cursor: pointer;
/* размер шрифта */
font-size: 1.2em;
line-height: 1;
/* всегда поверх других элементов страницы */
z-index: 2001;
/* анимируем цвет текста при наведении */
-webkit-transition: color .25s ease-in-out;
-moz-transition: color .25s ease-in-out;
transition: color .25s ease-in-out;
}
/* определяем текст кнопки
* символ Unicode (TRIGRAM FOR HEAVEN)
*/
.nav-toggle:after {
content: '\2630';
text-decoration: none;
}
/* цвет текста при наведении */
.nav-toggle:hover {
color: #f4f4f4;
}
/**
* Скрытый чекбокс (флажок)
* невидим и недоступен :)
* имя селектора атрибут флажка
*/
[id='nav-toggle'] {
position: absolute;
display: none;
}
/**
* изменение положения переключателя
* при просмотре на мобильных устройствах
* когда навигация раскрыта, распологаем внутри панели
*/
[id='nav-toggle']:checked~.nav>.nav-toggle {
left: auto;
right: 2px;
top: 1em;
}
/**
* Когда флажок установлен, открывается панель
* используем псевдокласс:checked
*/
[id='nav-toggle']:checked~.nav {
left: 0;
box-shadow: 4px 0px 20px 0px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 4px 0px 20px 0px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 4px 0px 20px 0px rgba(0, 0, 0, 0.5);
overflow-y: auto;
}
/*
* смещение контента страницы
* на размер ширины панели,
* фишка необязательная, на любителя
*/
[id='nav-toggle']:checked~main>article {
-webkit-transform: translateX(320px);
-moz-transform: translateX(320px);
transform: translateX(320px);
}
/*
* изменение символа переключателя,
* привычный крестик (MULTIPLICATION X),
* вы можете испльзовать любой другой значок
*/
[id='nav-toggle']:checked~.nav>.nav-toggle:after {
content: '\2715';
}
/**
* профиксим баг в Android <= 4.1.2
* см: http://timpietrusky.com/advanced-checkbox-hack
*/
/* body {
-webkit-animation: bugfix infinite 1s;
}
@-webkit-keyframes bugfix {
to {
padding: 0;
}
} */
/**
* позаботьтимся о средних и маленьких экранах
* мобильных устройств
*/
@media screen and (min-width: 320px) {
html,
body {
margin: 0;
overflow-x: hidden;
}
}
@media screen and (max-width: 320px) {
html,
body {
margin: 0;
overflow-x: hidden;
}
.nav {
width: 100%;
box-shadow: none
}
}
/**
* Формируем стиль заголовка (логотип) панели
*/
.nav h2 {
width: 90%;
padding: 0;
margin: 10px 0;
text-align: center;
text-shadow: rgba(255, 255, 255, .1) -1px -1px 1px, rgba(0, 0, 0, .5) 1px 1px 1px;
font-size: 1.3em;
line-height: 1.3em;
opacity: 0;
transform: scale(0.1, 0.1);
-ms-transform: scale(0.1, 0.1);
-moz-transform: scale(0.1, 0.1);
-webkit-transform: scale(0.1, 0.1);
transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-webkit-transform-origin: 0% 0%;
transition: opacity 0.8s, transform 0.8s;
-ms-transition: opacity 0.8s, -ms-transform 0.8s;
-moz-transition: opacity 0.8s, -moz-transform 0.8s;
-webkit-transition: opacity 0.8s, -webkit-transform 0.8s;
}
.nav h2 a {
color: #dadada;
text-decoration: none;
text-transform: uppercase;
}
/*плавное появление заголовка (логотипа) при раскрытии панели */
[id='nav-toggle']:checked~.nav h2 {
opacity: 1;
transform: scale(1, 1);
-ms-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
}
/**
* формируем непосредственно само меню
* используем неупорядоченный список для пунктов меню
* прикрутим трансфомации и плавные переходы
*/
.nav>ul {
display: block;
margin: 0;
padding: 0;
list-style: none;
}
.nav>ul>li {
line-height: 2.5;
opacity: 0;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-transition: opacity .5s .1s, -webkit-transform .5s .1s;
-moz-transition: opacity .5s .1s, -moz-transform .5s .1s;
-ms-transition: opacity .5s .1s, -ms-transform .5s .1s;
transition: opacity .5s .1s, transform .5s .1s;
}
[id='nav-toggle']:checked~.nav>ul>li {
opacity: 1;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
/* определяем интервалы появления пунктов меню */
.nav>ul>li:nth-child(2) {
-webkit-transition: opacity .5s .2s, -webkit-transform .5s .2s;
transition: opacity .5s .2s, transform .5s .2s;
}
.nav>ul>li:nth-child(3) {
-webkit-transition: opacity .5s .3s, -webkit-transform .5s .3s;
transition: opacity .5s .3s, transform .5s .3s;
}
.nav>ul>li:nth-child(4) {
-webkit-transition: opacity .5s .4s, -webkit-transform .5s .4s;
transition: opacity .5s .4s, transform .5s .4s;
}
.nav>ul>li:nth-child(5) {
-webkit-transition: opacity .5s .5s, -webkit-transform .5s .5s;
transition: opacity .5s .5s, transform .5s .5s;
}
.nav>ul>li:nth-child(6) {
-webkit-transition: opacity .5s .6s, -webkit-transform .5s .6s;
transition: opacity .5s .6s, transform .5s .6s;
}
.nav>ul>li:nth-child(7) {
-webkit-transition: opacity .5s .7s, -webkit-transform .5s .7s;
transition: opacity .5s .7s, transform .5s .7s;
}
/**
* оформление ссылок пунктов меню
*/
.nav>ul>li>a {
display: inline-block;
position: relative;
padding: 0;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
font-size: 1.2em;
color: #dadada;
width: 100%;
text-decoration: none;
/* плавный переход */
-webkit-transition: color .5s ease, padding .5s ease;
-moz-transition: color .5s ease, padding .5s ease;
transition: color .5s ease, padding .5s ease;
}
/**
* состояние ссылок меню при наведении
*/
.nav>ul>li>a:hover,
.nav>ul>li>a:focus {
color: white;
padding-left: 15px;
}
/**
* линия подчеркивания ссылок меню
*/
.nav>ul>li>a:before {
content: '';
display: block;
position: absolute;
right: 0;
bottom: 0;
height: 1px;
width: 100%;
-webkit-transition: width 0s ease;
transition: width 0s ease;
}
.nav>ul>li>a:after {
content: '';
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 1px;
width: 100%;
background: #3bc1a0;
-webkit-transition: width .5s ease;
transition: width .5s ease;
}
/**
* анимируем линию подчеркивания
* ссылок при наведении
*/
.nav>ul>li>a:hover:before {
width: 0%;
/* background: #3bc1a0; */
-webkit-transition: width .5s ease;
transition: width .5s ease;
}
.nav>ul>li>a:hover:after {
width: 0%;
background: transparent;
-webkit-transition: width 0s ease;
transition: width 0s ease;
}
/* фон затемнения на основной контент
* при этом элементы блокируютя
* спорная такая фича, если оно вам надо
* просто раскомментируйте
*/
.mask-content {
display: block;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
visibility: hidden;
opacity: 0;
}
[id='nav-toggle']:checked~.mask-content {
visibility: visible;
opacity: 1;
-webkit-transition: opacity .5s, visibility .5s;
transition: opacity .5s, visibility .5s;
}