wrk 2025-02-26 15-08-17

  оптимизируй для мобильных устройств 
 
----- 

/* Подключение шрифтов Google */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

body {
font-family: 'Roboto', sans-serif; /* Используем Roboto для современного вида /
line-height: 1.6;
margin: 0 auto;
max-width: 800px;
padding: 20px;
background-color: #2c2c2c; / Темный фон /
color: #f0f0f0; / Светлый цвет текста */
}

h1 {
color: #ffffff; /* Белый цвет заголовка /
text-align: center;
font-weight: 700; / Увеличиваем вес шрифта для заголовка */
}

.user-entry {
background-color: #3a3a3a; /* Темно-серый фон для карточек /
border: 1px solid #444; / Более темная граница /
border-radius: 5px;
margin-bottom: 20px;
padding: 15px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); / Увеличиваем тень для глубины /
transition: transform 0.2s; / Эффект при наведении */
}

.user-entry:hover {
transform: translateY(-2px); /* Поднимаем карточку при наведении */
}

.user-id {
font-weight: bold;
color: #1e90ff; /* Яркий синий цвет для ID */
}

.user-name {
white-space: pre-wrap;
margin: 10px 0;
padding: 10px;
background-color: #444444; /* Темно-серый фон для имени /
border: 1px solid #555; / Более темная граница /
border-radius: 4px;
transition: background-color 0.3s; / Плавный переход цвета фона */
}

.user-name:hover {
background-color: #333333; /* Изменение фона при наведении */
}

.user-dates {
font-size: 0.9em;
color: #b0b0b0; /* Светло-серый цвет для дат */
text-align: right;
}

.back-link {
display: block;
text-align: center;
margin-top: 20px;
color: #1e90ff; /* Яркий синий для ссылок /
text-decoration: none;
font-weight: 700; / Увеличиваем вес шрифта для ссылки */
}

.back-link:hover {
text-decoration: underline;
}

.add-note-link {
display: block;
text-align: right;
}

/* Стиль для кнопок /
button {
background: linear-gradient(90deg, #4e73df 0%, #1c7ed6 100%); / Градиент для кнопок /
color: white;
border: none;
border-radius: 5px;
padding: 10px 20px;
font-size: 18px;
cursor: pointer;
transition: background 0.3s ease; / Плавный переход цвета фона */
}

button:hover {
background: linear-gradient(90deg, #1c7ed6 0%, #4e73df 100%); /* Эффект при наведении */
}

Jan - Logo
Assistant
04:50:42 PM

Token Speed: 2.14t/s

css
Copy
/* Подключение шрифтов Google */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

body {
  font-family: 'Roboto', sans-serif;
  line-height: 1.6;
  margin: 0 auto;
  max-width: 90%; /* Адаптация к ширине экрана */
  padding: 15px; /* Уменьшаем отступы */
  background-color: #2c2c2c;
  color: #f0f0f0;
}

h1 {
  color: #ffffff;
  text-align: center;
  font-weight: 700;
}

.user-entry {
  background-color: #3a3a3a;
  border: 1px solid #444;
  border-radius: 5px;
  margin-bottom: 15px;
  padding: 15px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Уменьшаем тень */
  transition: transform 0.2s;
}

.user-entry:hover {
  transform: translateY(-2px);
}

.user-id {
  font-weight: bold;
  color: #1e90ff;
}

.user-name {
  white-space: pre-wrap;
  margin: 10px 0;
  padding: 8px; /* Уменьшаем padding */
  background-color: #444444;
  border: 1px solid #555;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.user-name:hover {
  background-color: #333333;
}

.user-dates {
  font-size: 0.9em;
  color: #b0b0b0;
  text-align: right;
}

.back-link, .add-note-link { /* Объединим стили для ссылок */
  display: block;
  margin-top: 15px; /* Уменьшаем margin */
  color: #1e90ff;
  text-decoration: none;
  font-weight: 700;
}

.back-link:hover, .add-note-link:hover {
  text-decoration: underline;
}

/* Стиль для кнопок */
button {
  background: linear-gradient(90deg, #4e73df 0%, #1c7ed6 100%);
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 16px; /* Уменьшаем размер шрифта */
  cursor: pointer;
  transition: background 0.3s ease;
}

button:hover {
  background: linear-gradient(90deg, #1c7ed6 0%, #4e73df 100%);
}


/* Дополнительные стили для мобильных устройств */
@media (max-width: 600px) {
    .user-entry {
      padding: 10px; /* Уменьшаем padding для карточек */
    }

    .user-name {
        padding: 5px; /* Уменьшаем padding */
    }

}
Изменения:

Адаптация к ширине экрана: max-width: 90% в body
Уменьшение отступов и padding: для лучшей читаемости на маленьких экранах
Сокращение теней: для более легкого восприятия
Объединение стилей для ссылок: для удобства
Уменьшение размера шрифта для кнопок
Добавление медиа-запроса: для адаптации стилей к маленьким экранам
Рекомендации:

Используйте инструменты разработчика браузера (DevTools) для тестирования стилей на разных устройствах.
Проверьте, как ваш дизайн выглядит на реальных мобильных устройствах.

2025-02-26_15-09-14