WEB интерфейс - стили

[ivanpost]

Помогите сделать минимально адаптивный интерфейс. Главное, чтобы изменялся размер шрифта, в зависимости от платформы и размера экрана... Ну может еще меню чтобы переехало на верх...

[ivanpost]

Хотя бы как задать стиль параметра? Почему то из общих стили не вставляются...

[Evgesha]

ivanpost, может это чем то поможет.

viewtopic.php?t=5053

[UB6AFB]

Приветствую всех!
Делаю Web Server (мониторинг потребляемой мощности генератора, температуры и т.д). Помогите загрузить картинки в ESP8266, так чтобы при обращении к странице изображения грузились из ESP8266. Если использовать небольшие картинки, что можно легко поместиться в 4мб. Есть примеры реализации:

http://digitrode.ru/computing-devices/m ... 23:1,24:16

Особенно хотелось бы повторить на Flprog что-то такое:

https://circuits4you.com/2018/02/03/esp ... ial-gauge/

Может кто подскажет как это сделать?

[Rovki]

Выкладываю свой стиль (цвет фиолетовый)

СпойлерПоказать

body {
background-color: #cc71d1;
}
.header
{
padding: 10px;
left: 0px;
right: 0px;
top: 0px;
background: #330433;
color: rgb(224, 255, 255);
text-align: center;
font-weight: 600;
font-family: 'Times New Roman', Times, serif;
font-size: 250%;
}
.menu
{
float:left;
padding: 1%;
margin: 1%;
width:16%;
background: #B1B0B0;
border: 1px solid black;
border-radius: 8px;
}
.menuItem
{
background: #B1B0B0;
font-weight: 600;
font-family: 'Times New Roman', Times, serif;
}
.content
{
float:right;
width:78%;
background: #cc71d1;
color: rgb(46, 4, 46);
}
.footer
{
float:left;
padding: 1%;
width:98%;
background: #330433;
margin-top: 1%;
color: rgb(224, 255, 255);
text-align: center;
font-weight: 600;
font-family: 'Times New Roman', Times, serif;
font-size: 150%;
}
.buttonFlp
{
width:150px;
border-radius:20px;
background:#330433;
color: rgb(224, 255, 255);
font-size:12px;
cursor:pointer;
float:left;
padding: 1%;
margin: 1%;
}
.buttonFlp:hover
{
background:#330433;
}
.buttonFlp:focus
{
outline:none;
}

[belyx]

Выкладываю свой стиль (цвет фиолетовый)

а приложить скриншот для наглядности ?

[belyx]

Запарился сегодня.
Сотворил свой стиль с костылями.
к этому проекту

СпойлерПоказать

костыль отсюда - добавлял (вместо названия "moskou" в примере) стиль под названием "pole",но

далее указать в стиле самого параметра "moskou"
Спойлер

тут ничего не указывал (пустое поле оставлял).
когда вставлял то получалось такая байда

СпойлерПоказать

Не получилось увеличить чек боксы и убрать белый фон слева и под подвалом.
Как сделать не знаю - сдался.
Сам стиль вставлял в общий стиль.
Подправил

стиль зелёный текст_.txt

(1.34 КБ) 106 скачиваний

Код: Выделить всё

 body {
 background-color: #0d0d0d;
} 
 .menu 
	{
	float:left;    
	padding: 1%;    
	 margin: 1%;
	width:16%;   
	background: #ffea00;
	 border: 1px solid black;
	border-radius: 8px;
	} 
.menuItem 
	{    
	font-weight: 600;
	background: #ffea00;
	font-family: 'Times New Roman', Times, serif;
	font-size: 110%;
	} 
 .header 
	{    
	padding: 10px;     
	left: 0px;    
	right: 0px;     
	top: 0px;      
	background: #00FFFF; 
	color: rgb(0, 0, 0); 
	text-align: center;
	font-weight: 600;
	font-family: 'Times New Roman', Times, serif;
	font-size: 250%; 
	}   
.content 
	{    
	float:right;    
	width:78%;
	background: #000033;
	color: rgb(0,253,0); 
	font-size: 40px;
	}   
.pole
	{    
	float:right;    
	width:78%;
	background: #ffea6c; 
	color: rgb(205,0,16); 
	font-size: 40px;
	}   
.footer
	{   
	float:left;   
	padding: 1%;    
	width:98%;    
	background: #00FFFF;  
 	margin-top: 1%; 
	color: rgb(0, 0, 0); 
 	text-align: center;
	font-weight: 600;
	font-family: 'Times New Roman', Times, serif;
	font-size: 150%;
	}
.buttonFlp 
	{
	width:160px;
	border-radius:40px;
	background:#358DE5;
	color:#ffffff;
	font-size: 16px;
	cursor:pointer;
	float:left;    
	padding: 1%;    
	 margin: 1%;
	}
.buttonFlp:hover
	{
	background:#E60000;
	}
.buttonFlp:focus
	{
	outline:none;
	}

[Dev1]

Темный стиль для планшета(на мобильном глаза не видят), с измененной разметкой(как в сообщении 34) по сравнению с дефолтной. На планшете выглядит более сочно чем на скрине

СпойлерПоказать

СпойлерПоказать

Код: Выделить всё

 body {
 background-color: #230023;
}
 .header 
	{    
	margin: 1%; 
	padding: 1%;
	border-radius: 5px;
	background: #230023;
	background: radial-gradient(#470047, #27236F);
	color: #FEFFE7;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 200%; 
	}   
 .menu 
	{
	float:left;    
	padding: 1%;    
	margin: 1%;
	width:16%;    
	background: #F7F9E4;
	border: 1px solid black;
	border-radius: 5px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 120%;	
	} 
.menuItem 
	{  
	background: #F7F9E4;
	font-weight: 500;
	} 
.content 
	{    
	float:right;    
	width:78%;
	background: #230023;
	color: #FEFFE7;
	font-weight: 500;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 120%;
	}   
.footer
	{   
	float:left;   
	margin: 1%;
	padding: 1%;
	width:96%; 
	border-radius: 5px;
	background: #230023;
	background: radial-gradient(#470047, #27236F);
	color: #FEFFE7;
 	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 150%;
	}
.buttonFlp 
	{
	width:150px;
	border-radius:5px;
	background:#470047;
	color: rgb(224, 255, 255);
	font-size:18px;
	cursor:pointer;
	float:left;    
	padding: 1%;    
	}
.buttonFlp:hover
	{
	background:#27236F;
	}
.buttonFlp:focus
	{
	outline:none;
	}
	

[Dev1]

background-color: ##0d0d0d;

У вас 2 # а нужно 1
background-color: #0d0d0d;
И не совсем понял зачем чек-боксы Установка и Запись, есть переменные Будильник часы и минуты их и вводите, по нажатию кнопки сохранить переменные запишутся. А чек-боксом будете вкл и выкл будильник. Как то так

[belyx]

И не совсем понял зачем чек-боксы Установка и Запись, есть переменные Будильник часы и минуты их и вводите, по нажатию кнопки сохранить переменные запишутся.

Да я знаю, что они как бы лишние, но лень было переделывать - изначально делал под ремоте, да и это больше всё-таки пример

У вас 2 # а нужно 1
background-color: #0d0d0d;

.
Спасибо - посмотрю.......подправил.

[belyx]

Доделал стиль к этому сообщению

new стиль зелёный текст.txt

(1.44 КБ) 84 скачивания

не забываем про костыль - вставляем в иде в нужном месте class=\"pole\"
Выглядит на телефоне так, проект лежит тут

СпойлерПоказать

[rw6cm]

не забываем про костыль

Не пойму зачем нужен этот костыль?
И зачем менять общий стиль? есть же стиль страницы вносите в него свои изменения.

[belyx]

Ну вот лично меня не устроил общий стиль с теми полями ввода и объяснений (какого либо урока) как это сделать я лично не нашёл. Вот поэтому и появляются костыли - от недостатка информации.А вот то что я нашёл, то и использовал !
rw6cm, вот покажите , как это сделать штатными средствами !

[rw6cm]

как это сделать штатными средствами

Посмотрите этот проект.
В нем не было цели изменять общий фон, (это можно и общим стилем)
Внимание обратите на стиль страницы и стилей параметров в проекте

Пример без костылейПоказать

[belyx]

Посмотрите этот проект.

Посмотрел - в проекте только вывод параметров, ввода нет. Но я ещё раз попробую.
Как по науке я понимаю и даже попытка была , но с вставкой в код.
rw6cm, сходу не нашел,что у вас означает

СпойлерПоказать

.meteocontent
{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1f;
}

особенно вот это 1fr 1fr 1fr 1fr и последнее 1f;(без r)

[Dev1]

Посмотрите этот проект.

Посмотрел - в проекте только вывод параметров, ввода нет. Но я ещё раз попробую.
Как по науке я понимаю и даже попытка была , но с вставкой в код.
rw6cm, сходу не нашел,что у вас означает

СпойлерПоказать

.meteocontent
{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1f;
}

особенно вот это 1fr 1fr 1fr 1fr и последнее 1f;(без r)

Это css...

[rw6cm]

сходу не нашел,что у вас означает

Эти две строки роли уже не играют, помню что их удалял, да видно уснул после первой буквы а утром выложил не посмотрев ))
Означали они деление на 4 равных фракции по столбцам и строкам, но после захотел еще вставить место под график, и раскрой стал другой.
Эти значения потеряли свой приоритет.
Вообще на изучение верстки потратил всего пару вечеров, и не чувствую себя гуру в этом темном деле )), подсказку дал только по флпрог.

[belyx]

Не пойму зачем нужен этот костыль?

есть же стиль страницы вносите в него свои изменения.

меня не устроил общий стиль с теми полями ввода

обратите на стиль страницы и стилей параметров в проекте

Посмотрел - в проекте только вывод параметров, ввода нет. Но я ещё раз попробую.

НУ вот занялся, попытался сделать поле ввода штатными средствами

результат и сравнениеПоказать

задача просто не решается

[rw6cm]

задача просто не решается

Мат часть под учите, тогда и будет задача просто решаться

Стиль часов.flp

(133.19 КБ) 117 скачиваний

[belyx]

во! что-то новенькое , вечером попробую, спасибо.

Мат часть под учите

rw6cm, мы ж ,пользователи, в основной своей массе не такие ж прошаренные, вот тут мы и учимся !
будет полезно наверно для форумчан выложить скрины

вашего примераПоказать