Добавить css стили для страницы
This commit is contained in:
_sega
parent
36b379e8ed
commit
efc14761ba
309
Assets/Resources/style.txt
Normal file
309
Assets/Resources/style.txt
Normal file
@ -0,0 +1,309 @@
|
||||
/* Общие стили */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: white;
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
font-size: 3.5rem;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
/* Основная форма */
|
||||
.form-root {
|
||||
background: white;
|
||||
padding: 25px;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
/* Группы элементов формы */
|
||||
.form-group {
|
||||
border: 2px solid #e0e0e0 !important;
|
||||
border-radius: 12px !important;
|
||||
padding: 20px;
|
||||
transition: all 0.3s ease;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.form-group:hover {
|
||||
border-color: #667eea !important;
|
||||
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.1);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
color: #2d3748;
|
||||
margin-bottom: 12px;
|
||||
font-size: 2.1rem;
|
||||
}
|
||||
|
||||
.form-group p {
|
||||
font-weight: 600;
|
||||
color: #2d3748;
|
||||
margin-bottom: 15px;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
/* Стили для range input */
|
||||
input[type="range"] {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
background: linear-gradient(to right, #667eea, #764ba2);
|
||||
outline: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
input[type="range"]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
border: 3px solid #667eea;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
input[type="range"]::-webkit-slider-thumb:hover {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* Стили для чекбоксов */
|
||||
input[type="checkbox"] {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 2px solid #cbd5e0;
|
||||
border-radius: 6px;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transition: all 0.2s ease;
|
||||
margin-right: 10px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked {
|
||||
background: #667eea;
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked::after {
|
||||
content: "✓";
|
||||
position: absolute;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:hover {
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
|
||||
/* Стили для радиокнопок */
|
||||
input[type="radio"] {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid #cbd5e0;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transition: all 0.2s ease;
|
||||
margin-right: 10px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
input[type="radio"]:checked {
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
input[type="radio"]:checked::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #667eea;
|
||||
border-radius: 50%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
input[type="radio"]:hover {
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
|
||||
/* Группы радиокнопок */
|
||||
.form-group > div {
|
||||
margin-bottom: 10px;
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
.form-group > div:hover {
|
||||
background: rgba(102, 126, 234, 0.05);
|
||||
}
|
||||
|
||||
.form-group > div:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Кнопка отправки */
|
||||
input[type="submit"] {
|
||||
background: linear-gradient(to right, #667eea, #764ba2);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 18px 40px;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
input[type="submit"]:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
input[type="submit"]:active {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* Адаптивность для мобильных устройств */
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
padding: 15px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 20px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.form-root {
|
||||
padding: 20px;
|
||||
border-radius: 16px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.form-group label,
|
||||
.form-group p {
|
||||
font-size: 1rem;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
padding: 16px 30px;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
/* Улучшаем тач-таргеты для мобильных */
|
||||
input[type="checkbox"],
|
||||
input[type="radio"],
|
||||
input[type="range"]::-webkit-slider-thumb {
|
||||
min-height: 44px;
|
||||
min-width: 44px;
|
||||
}
|
||||
|
||||
.form-group > div {
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Анимация появления */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.form-group {
|
||||
animation: fadeIn 0.5s ease forwards;
|
||||
}
|
||||
|
||||
/* Порядок анимаций для групп */
|
||||
.form-group:nth-child(1) { animation-delay: 0.1s; }
|
||||
.form-group:nth-child(2) { animation-delay: 0.2s; }
|
||||
.form-group:nth-child(3) { animation-delay: 0.3s; }
|
||||
.form-group:nth-child(4) { animation-delay: 0.4s; }
|
||||
.form-group:nth-child(5) { animation-delay: 0.5s; }
|
||||
.form-group:nth-child(6) { animation-delay: 0.6s; }
|
||||
.form-group:nth-child(7) { animation-delay: 0.7s; }
|
||||
.form-group:nth-child(8) { animation-delay: 0.8s; }
|
||||
.form-group:nth-child(9) { animation-delay: 0.9s; }
|
||||
.form-group:nth-child(10) { animation-delay: 1.0s; }
|
||||
.form-group:nth-child(11) { animation-delay: 1.1s; }
|
||||
.form-group:nth-child(12) { animation-delay: 1.2s; }
|
||||
.form-group:nth-child(13) { animation-delay: 1.3s; }
|
||||
.form-group:nth-child(14) { animation-delay: 1.4s; }
|
||||
input[type="submit"] { animation-delay: 1.5s; animation: fadeIn 0.5s ease forwards; }
|
||||
|
||||
/* Улучшение читаемости на светлом фоне */
|
||||
.form-group label[for],
|
||||
.form-group p {
|
||||
color: #2d3748;
|
||||
}
|
||||
|
||||
/* Эффект фокуса для доступности */
|
||||
input:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
7
Assets/Resources/style.txt.meta
Normal file
7
Assets/Resources/style.txt.meta
Normal file
@ -0,0 +1,7 @@
|
||||
fileFormatVersion: 2
|
||||
guid: f9ce91e4e61af164c9742222337db425
|
||||
TextScriptImporter:
|
||||
externalObjects: {}
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
@ -20,9 +20,9 @@ public class SettingsToHtml : MonoBehaviour
|
||||
{
|
||||
StringBuilder sb = new StringBuilder();
|
||||
|
||||
sb.AppendLine("Настройки фишки:");
|
||||
sb.AppendLine("<h1>Настройки фишки</h1>");
|
||||
|
||||
sb.AppendLine("<form action=\"/upd\" method=\"POST\">");
|
||||
sb.AppendLine("<form action=\"/upd\" method=\"POST\" class=\"form-root\">");
|
||||
foreach (Setting setting in settings)
|
||||
{
|
||||
string view = string.Empty;
|
||||
@ -138,11 +138,19 @@ public class SettingsToHtml : MonoBehaviour
|
||||
|
||||
private static string Decorate(string content)
|
||||
{
|
||||
string res = "<!DOCTYPE html>\r\n<html lang=\"ru\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <title>Настройки Фишки</title>\r\n</head>\r\n<body>";
|
||||
string res = "<!DOCTYPE html>"
|
||||
+ "<html lang=\"ru\">"
|
||||
+ "<head>"
|
||||
+ "<meta charset=\"utf-8\">"
|
||||
+ "<link rel=\"stylesheet\" href=\"style.css\">"
|
||||
+ "<title>Настройки Фишки</title>"
|
||||
+ "</head>"
|
||||
+ "<body>";
|
||||
|
||||
res += content;
|
||||
|
||||
res += "</body>\r\n</html>";
|
||||
res += "</body>" +
|
||||
"</html>";
|
||||
|
||||
return res;
|
||||
}
|
||||
|
||||
@ -19,9 +19,13 @@ public class WebServer : MonoBehaviour
|
||||
private HttpListener listener;
|
||||
private bool isRunning = true;
|
||||
|
||||
private static byte[] css;
|
||||
|
||||
async void Start()
|
||||
{
|
||||
SettingsManager.Initialize();//надо будет убирать
|
||||
LoadCss();
|
||||
|
||||
await StartWebServerAsync();
|
||||
}
|
||||
|
||||
@ -65,6 +69,10 @@ public class WebServer : MonoBehaviour
|
||||
{
|
||||
await HandleGetSettingsAsync(context);
|
||||
}
|
||||
else if (method == "GET" && path == "/style.css")
|
||||
{
|
||||
await HandleCssRequestAsync(context);
|
||||
}
|
||||
else if (method == "POST" && path == "/upd")
|
||||
{
|
||||
await HandlePostUpdateAsync(context);
|
||||
@ -121,69 +129,39 @@ public class WebServer : MonoBehaviour
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
async Task HandlePostUpdateAsync(HttpListenerContext context)
|
||||
async Task HandleCssRequestAsync(HttpListenerContext context)
|
||||
{
|
||||
context.Response.ContentType = "text/css";
|
||||
context.Response.ContentLength64 = css.Length;
|
||||
await context.Response.OutputStream.WriteAsync(css, 0, css.Length);
|
||||
context.Response.OutputStream.Close();
|
||||
}
|
||||
|
||||
private static void LoadCss()
|
||||
{
|
||||
TextAsset cssAsset = Resources.Load<TextAsset>("style");
|
||||
|
||||
try
|
||||
{
|
||||
try
|
||||
{
|
||||
// Читаем тело POST-запроса
|
||||
string requestBody;
|
||||
using (var reader = new StreamReader(context.Request.InputStream, context.Request.ContentEncoding))
|
||||
{
|
||||
requestBody = await reader.ReadToEndAsync();
|
||||
}
|
||||
|
||||
Debug.Log($"Получен POST запрос на /upd");
|
||||
Debug.Log($"Тело запроса: {requestBody}");
|
||||
|
||||
// Здесь вы можете обработать данные формы
|
||||
// Обычно данные формы приходят в формате: key1=value1&key2=value2
|
||||
// Вы можете их разобрать:
|
||||
var formData = System.Web.HttpUtility.ParseQueryString(requestBody);
|
||||
|
||||
// Пример: если у вас есть поле "action" в форме
|
||||
string action = formData["action"];
|
||||
string buttonValue = formData["submit"]; // для input type="submit"
|
||||
|
||||
Debug.Log($"Action: {action}, Button value: {buttonValue}");
|
||||
|
||||
// Пример обработки разных кнопок:
|
||||
// Если у вас несколько кнопок с разными именами/значениями
|
||||
if (!string.IsNullOrEmpty(formData["save"]))
|
||||
{
|
||||
await HandleSaveAction(formData);
|
||||
}
|
||||
else if (!string.IsNullOrEmpty(formData["reset"]))
|
||||
{
|
||||
await HandleResetAction(formData);
|
||||
}
|
||||
|
||||
// Отправляем ответ обратно
|
||||
string responseHtml = @"
|
||||
<html>
|
||||
<head><title>Обновлено</title></head>
|
||||
<body>
|
||||
<h1>Данные успешно получены!</h1>
|
||||
<p>Сервер обработал ваш запрос.</p>
|
||||
<a href='/'>Вернуться назад</a>
|
||||
<script>
|
||||
// Через 3 секунды возвращаемся назад
|
||||
setTimeout(function() {
|
||||
window.location.href = '/';
|
||||
}, 3000);
|
||||
</script>
|
||||
</body>
|
||||
</html>";
|
||||
|
||||
SendHtmlResponse(context, responseHtml);
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
Debug.LogError($"Error handling POST /upd: {ex.Message}");
|
||||
SendHtmlResponse(context, $"<h1>Error: {ex.Message}</h1>", 500);
|
||||
}
|
||||
print(cssAsset.text);
|
||||
}
|
||||
*/
|
||||
catch (Exception)
|
||||
{
|
||||
|
||||
throw;
|
||||
}
|
||||
|
||||
if (cssAsset != null)
|
||||
{
|
||||
css= Encoding.UTF8.GetBytes(cssAsset.text);
|
||||
Debug.Log("CSS OK");
|
||||
}
|
||||
else
|
||||
{
|
||||
Debug.LogWarning("CSS NOT OK");
|
||||
css = new byte[0];
|
||||
}
|
||||
}
|
||||
|
||||
async Task HandlePostUpdateAsync(HttpListenerContext context)
|
||||
{
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user