iotmanager/IoTManagerWeb
1
0
Fork 0
mirror of https://github.com/IoTManagerProject/IoTManagerWeb.git synced 2026-03-26 23:12:34 +03:00
Code Issues Packages Projects Releases Wiki Activity

first version

Browse Source
This commit is contained in:
Dmitry Borisenko
2021-08-10 02:19:16 +08:00
parent 8891591793
commit 2cb2debe36
14 changed files with 2172 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
src/App.svelte Normal file
View File

@@ -0,0 +1,162 @@
<script>
//роутер =========================================
import { Route, router, active } from "tinro";
router.mode.hash(); // enables hash navigation method
//router.mode.memory(); // enables in-memory navigation method
</script>
<main>
<input id="menu__toggle" type="checkbox" />
<label class="menu__btn" for="menu__toggle">
<span />
</label>
<ul class="menu__box">
<li>
<a class="menu__item" href="/">{"setMain"}</a>
</li>
<li>
<a class="menu__item" href="/wifi">{"setWifi"}</a>
</li>
<li>
<a class="menu__item" href="/mqtt">{"setmqtt"}</a>
</li>
</ul>
<ul class="menu__main">
<Route path="/">
<!-- Card Container -->
<div class="grid place-items-center mx-2 my-20 sm:my-auto">
<!-- Card -->
<div class="w-11/12 p-12 sm:w-8/12 md:w-6/12 lg:w-5/12 2xl:w-4/12 px-6 py-10 sm:px-10 sm:py-6 bg-white rounded-lg shadow-md lg:shadow-lg">
<!-- Card Title -->
<h1 class="text-center text-lg text-gray-500 font-bold pb-6">Подключение к WiFi роутеру</h1>
<form class="w-full max-w-sm">
<div class="md:flex md:items-center mb-6">
<div class="md:w-1/3">
<label class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-full-name"> Сеть </label>
</div>
<div class="md:w-2/3">
<input class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500" id="inline-full-name" type="text" value="your SSID" />
</div>
</div>
<div class="md:flex md:items-center mb-6">
<div class="md:w-1/3">
<label class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-password"> Пароль </label>
</div>
<div class="md:w-2/3">
<input class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500" id="inline-password" type="password" placeholder="******************" />
</div>
</div>
<div class="md:flex md:items-center mb-6">
<div class="md:w-1/3" />
<label class="md:w-2/3 block text-gray-500 font-bold">
<input class="mr-2 leading-tight" type="checkbox" />
<span class="text-sm"> Send me your newsletter! </span>
</label>
</div>
<div class="md:flex md:items-center">
<div class="md:w-1/3" />
<div class="md:w-2/3">
<button class="shadow bg-purple-500 hover:bg-purple-400 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded" type="button"> Сохранить </button>
</div>
</div>
</form>
</div>
</div>
</Route>
</ul>
</main>
<style lang="postcss" global>
@tailwind base;
@tailwind components;
@tailwind utilities;
#menu__toggle {
opacity: 0;
}
#menu__toggle:checked ~ .menu__btn > span {
transform: rotate(45deg);
}
#menu__toggle:checked ~ .menu__btn > span::before {
top: 0;
transform: rotate(0);
}
#menu__toggle:checked ~ .menu__btn > span::after {
top: 0;
transform: rotate(90deg);
}
#menu__toggle:checked ~ .menu__box {
visibility: visible;
left: 0;
}
#menu__toggle:checked ~ .menu__main {
margin-left: 150px; /* насколько сужать правую часть */
}
.menu__main {
margin-top: 80px; /* насколько отступить сверху в главном меню */
}
.menu__btn {
display: flex;
align-items: center;
position: fixed;
z-index: 1;
top: 20px;
left: 20px;
width: 26px;
height: 26px;
cursor: pointer;
}
.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
display: block;
position: absolute;
width: 100%;
height: 2px;
background-color: #616161;
transition-duration: 0.25s;
}
.menu__btn > span::before {
content: "";
top: -8px;
}
.menu__btn > span::after {
content: "";
top: 8px;
}
.menu__box {
display: block;
position: fixed;
/*z-index: 1;*/
visibility: hidden;
top: 0;
left: -100%;
width: 150px; /* размер выхода бокового меню */
height: 100%;
margin: 0;
padding: 80px 0;
list-style: none;
background-color: #eceff1;
box-shadow: 1px 0px 6px rgba(0, 0, 0, 0.2);
transition-duration: 0.25s;
}
.menu__item {
display: block;
padding: 12px 24px;
color: rgba(51, 51, 51, 0.788);
font-family: "Roboto", sans-serif;
font-size: 15px; /* размер шрифта бокового меню */
font-weight: 600;
text-decoration: none;
transition-duration: 0.25s;
}
.menu__item:hover {
background-color: #cfd8dc;
}
</style>