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

cleaning

Browse Source
This commit is contained in:
Dmitry Borisenko
2021-08-17 19:02:46 +00:00
parent 395ecd8f61
commit b15c74c249
2 changed files with 31 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/App.svelte
View File

@@ -107,7 +107,7 @@
<div class="bg-cover bg-gray-50 pt-16"> <div class="bg-cover bg-gray-50 pt-16">
<Route path="/"> <Route path="/">
<Card title="Редактор JSON"> <Card title="Редактор JSON">
<textarea on:input={SuperDuperFunction} rows="10" 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="text1">{syntaxHighlight(JSON.stringify(wigets))}</textarea> <textarea on:input={SuperDuperFunction} rows="10" class="input-indigo" id="text1">{syntaxHighlight(JSON.stringify(wigets))}</textarea>
</Card> </Card>
<Card title="Testing card1"> <Card title="Testing card1">
{#each wigets as widget, i} {#each wigets as widget, i}
@@ -124,33 +124,18 @@
<Route path="/connection"> <Route path="/connection">
<Card title="Подключение к WiFi роутеру"> <Card title="Подключение к WiFi роутеру">
<Input title={"Сеть"} value={"your SSID"} />
<Input title={"Пароль"} value={"your PASS"} />
<div class="md:flex md:items-center mb-6"> <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" 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" 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"> <label class="md:w-2/3 block text-gray-500 font-bold">
<input class="mr-2 leading-tight" type="checkbox" /> <input class="mr-2 leading-tight" type="checkbox" />
<span class="text-sm"> Включить светодиод статуса подключения </span> <span class="text-sm"> Включить светодиод статуса подключения </span>
</label> </label>
</div> </div>
<div class="md:flex md:items-center"> <div class="md:flex md:items-center">
<div class="md:w-1/3" />
<div class="md:w-2/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> <button class="btn-indigo" type="button"> Сохранить </button>
</div> </div>
</div> </div>
</Card> </Card>
@@ -158,53 +143,53 @@
<Card title="Подключение к MQTT серверу"> <Card title="Подключение к MQTT серверу">
<div class="md:flex md:items-center mb-6"> <div class="md:flex md:items-center mb-6">
<div class="md:w-1/3"> <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> <label class="lable-gray" for="inline-full-name"> Сервер </label>
</div> </div>
<div class="md:w-2/3"> <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" type="text" value="your SSID" /> <input class="input-indigo" type="text" value="your SSID" />
</div> </div>
</div> </div>
<div class="md:flex md:items-center mb-6"> <div class="md:flex md:items-center mb-6">
<div class="md:w-1/3"> <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> <label class="lable-gray" for="inline-full-name"> Порт </label>
</div> </div>
<div class="md:w-2/3"> <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" type="text" value="your SSID" /> <input class="input-indigo" type="text" value="your SSID" />
</div> </div>
</div> </div>
<div class="md:flex md:items-center mb-6"> <div class="md:flex md:items-center mb-6">
<div class="md:w-1/3"> <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> <label class="lable-gray" for="inline-full-name"> Префикс </label>
</div> </div>
<div class="md:w-2/3"> <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" type="text" value="your SSID" /> <input class="input-indigo" type="text" value="your SSID" />
</div> </div>
</div> </div>
<div class="md:flex md:items-center mb-6"> <div class="md:flex md:items-center mb-6">
<div class="md:w-1/3"> <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> <label class="lable-gray" for="inline-full-name"> Пользователь </label>
</div> </div>
<div class="md:w-2/3"> <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" type="text" value="your SSID" /> <input class="input-indigo" type="text" value="your SSID" />
</div> </div>
</div> </div>
<div class="md:flex md:items-center mb-6"> <div class="md:flex md:items-center mb-6">
<div class="md:w-1/3"> <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> <label class="lable-gray" for="inline-password"> Пароль </label>
</div> </div>
<div class="md:w-2/3"> <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" type="password" placeholder="******************" /> <input class="input-indigo" type="password" placeholder="******************" />
</div> </div>
</div> </div>
<div class="md:flex md:items-center"> <div class="md:flex md:items-center">
<div class="md:w-1/3" /> <div class="md:w-1/3" />
<div class="md:w-2/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> <button class="btn-indigo" type="button"> Сохранить </button>
</div> </div>
</div> </div>
</Card> </Card>
@@ -220,6 +205,18 @@
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
@layer components {
.btn-indigo {
@apply py-2 px-4 bg-indigo-500 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-opacity-75;
}
.input-indigo {
@apply 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-indigo-500;
}
.lable-gray {
@apply block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4;
}
}
#menu__toggle { #menu__toggle {
opacity: 0; opacity: 0;
} }

5
src/Input.svelte
View File

@@ -10,10 +10,11 @@
<div class="container"> <div class="container">
<div class="md:flex md:items-center mb-6"> <div class="md:flex md:items-center mb-6">
<div class="md:w-1/3"> <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">{title}</label> <!-- svelte-ignore a11y-label-has-associated-control -->
<label class="lable-gray">{title}</label>
</div> </div>
<div class="md:w-2/3"> <div class="md:w-2/3">
<input bind:value on:change={WSpush(value)} 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" type="text" /> <input bind:value on:change={WSpush(value)} class="input-indigo" type="text" />
</div> </div>
</div> </div>
</div> </div>