From e02839af964a2407e82157c435cb866dc091725f Mon Sep 17 00:00:00 2001
From: itqop <leonkl32@gmail.com>
Date: Mon, 7 Apr 2025 10:28:15 +0300
Subject: [PATCH] design

---
 frontend/src/App.css                          | 94 ++++++++++++-------
 frontend/src/App.tsx                          | 14 +--
 frontend/src/index.css                        | 35 +++++--
 frontend/src/pages/CalculationForm.module.css | 58 +++++++-----
 .../src/pages/CalculationResult.module.css    | 87 ++++++++++++-----
 frontend/src/pages/History.module.css         | 63 ++++++++-----
 6 files changed, 231 insertions(+), 120 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 2493db7..d881328 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -44,65 +44,89 @@
 .App {
   display: flex;
   flex-direction: column;
-  min-height: 100vh; /* Минимальная высота на весь экран */
+  min-height: 100vh;
 }
 
 .App-header {
-  background-color: #282c34; /* Темный фон шапки */
-  padding: 20px;
+  background-color: var(--primary-color);
+  padding: 1rem;
   color: white;
+  box-shadow: 0 2px 4px var(--shadow-color);
+}
+
+.App-header-content {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 1rem;
   display: flex;
-  justify-content: space-between; /* Разместить заголовок и навигацию по краям */
+  justify-content: space-between;
   align-items: center;
+  flex-wrap: wrap;
+  gap: 1rem;
 }
 
 .App-header h1 {
-    margin: 0;
-    font-size: 1.5rem;
+  font-size: 1.5rem;
+  margin: 0;
 }
 
-.App-header nav a {
-  color: #61dafb; /* Цвет ссылок в шапке */
-  margin-left: 15px; /* Отступ между ссылками */
-  font-size: 1rem;
+.App-nav {
+  display: flex;
+  gap: 1rem;
 }
 
-.App-header nav a:hover {
+.App-nav a {
   color: white;
   text-decoration: none;
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  transition: background-color 0.3s;
 }
 
+.App-nav a:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
 
 main {
-  flex-grow: 1; /* Основной контент занимает все доступное пространство */
-  padding: 20px;
-  max-width: 1200px; /* Ограничим максимальную ширину контента */
-  margin: 0 auto; /* Центрируем контент */
-  width: 90%; /* Небольшой отступ по бокам на больших экранах */
+  flex: 1;
+  padding: 2rem 1rem;
+  max-width: 1200px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+.page-container {
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px var(--shadow-color);
+  padding: 2rem;
+  margin-bottom: 2rem;
 }
 
 footer {
-  background-color: #f8f9fa; /* Светлый фон футера */
-  padding: 10px 20px;
+  background-color: var(--primary-color);
+  color: white;
+  padding: 1rem;
   text-align: center;
-  border-top: 1px solid #e7e7e7;
-  margin-top: auto; /* Прижимаем футер к низу */
-  color: #6c757d;
-  font-size: 0.9em;
+  margin-top: auto;
 }
 
-/* Базовые стили для контейнеров страниц */
-.page-container {
-    background-color: #fff; /* Белый фон для основного контента */
-    padding: 20px;
-    border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Небольшая тень */
-}
+@media (max-width: 768px) {
+  .App-header-content {
+    flex-direction: column;
+    text-align: center;
+  }
 
-.page-container h2 {
-    margin-top: 0;
-    color: #343a40; /* Темный цвет заголовков страниц */
-    border-bottom: 2px solid #007bff; /* Подчеркивание заголовка */
-    padding-bottom: 10px;
-    margin-bottom: 20px;
+  .App-nav {
+    width: 100%;
+    justify-content: center;
+  }
+
+  main {
+    padding: 1rem;
+  }
+
+  .page-container {
+    padding: 1rem;
+  }
 }
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 5481b4b..2149dd2 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -7,17 +7,19 @@ const App: React.FC = () => {
   return (
     <div className="App">
       <header className="App-header">
-        <h1>Раскройка Стекла</h1>
-        <nav>
-          <Link to="/calculate" style={{ marginRight: '10px' }}>Новый расчет</Link>
-          <Link to="/history">История</Link>
-        </nav>
+        <div className="App-header-content">
+          <h1>Раскройка Стекла</h1>
+          <nav className="App-nav">
+            <Link to="/calculate">Новый расчет</Link>
+            <Link to="/history">История</Link>
+          </nav>
+        </div>
       </header>
       <main>
         <AppRouter />
       </main>
       <footer>
-         <p>&copy; 2024 Система Раскройки</p>
+        <p>&copy; 2024 Система Раскройки</p>
       </footer>
     </div>
   );
diff --git a/frontend/src/index.css b/frontend/src/index.css
index e6f8f91..8d12fc2 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,15 +1,34 @@
-/* Сброс базовых стилей */
-body, html, #root {
+:root {
+  --primary-color: #2c3e50;
+  --secondary-color: #3498db;
+  --background-color: #f5f6fa;
+  --text-color: #2c3e50;
+  --border-color: #dcdde1;
+  --shadow-color: rgba(0, 0, 0, 0.1);
+  --success-color: #27ae60;
+  --error-color: #e74c3c;
+}
+
+* {
   margin: 0;
   padding: 0;
-  height: 100%;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background-color: #f4f7f6; /* Светлый фон для всей страницы */
-  color: #333; /* Основной цвет текста */
+  background-color: var(--background-color);
+  color: var(--text-color);
+  line-height: 1.6;
+}
+
+#root {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
 }
 
 code {
diff --git a/frontend/src/pages/CalculationForm.module.css b/frontend/src/pages/CalculationForm.module.css
index 22c529c..e897b44 100644
--- a/frontend/src/pages/CalculationForm.module.css
+++ b/frontend/src/pages/CalculationForm.module.css
@@ -1,63 +1,73 @@
 .formContainer {
-  /* Используем класс из App.css для общего стиля */
+  max-width: 800px;
+  margin: 0 auto;
 }
 
 .formGroup {
-  margin-bottom: 15px;
+  margin-bottom: 1.5rem;
 }
 
 .label {
   display: block;
-  margin-bottom: 5px;
-  font-weight: bold;
-  color: #495057; /* Цвет метки */
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+  color: var(--text-color);
 }
 
 .input,
 .textarea {
-  width: calc(100% - 18px); /* Учитываем padding и border */
-  padding: 8px;
-  border: 1px solid #ced4da; /* Граница поля ввода */
+  width: 100%;
+  padding: 0.75rem;
+  border: 1px solid var(--border-color);
   border-radius: 4px;
   font-size: 1rem;
-  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  transition: border-color 0.3s, box-shadow 0.3s;
 }
 
 .input:focus,
 .textarea:focus {
-  border-color: #80bdff;
-  outline: 0;
-  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+  outline: none;
+  border-color: var(--secondary-color);
+  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
 }
 
-
 .textarea {
-    min-height: 100px;
-    resize: vertical; /* Разрешить изменять размер по вертикали */
+  min-height: 150px;
+  resize: vertical;
 }
 
 .errorMessage {
-  color: #dc3545; /* Красный цвет для ошибок */
-  font-size: 0.875em;
-  margin-top: 5px;
+  color: var(--error-color);
+  font-size: 0.875rem;
+  margin-top: 0.5rem;
 }
 
 .submitButton {
-  padding: 10px 20px;
-  font-size: 1rem;
-  background-color: #007bff;
+  background-color: var(--secondary-color);
   color: white;
   border: none;
+  padding: 0.75rem 1.5rem;
   border-radius: 4px;
+  font-size: 1rem;
   cursor: pointer;
-  transition: background-color 0.2s ease-in-out;
+  transition: background-color 0.3s;
+  width: 100%;
+  max-width: 300px;
+  margin: 0 auto;
+  display: block;
 }
 
 .submitButton:hover:not(:disabled) {
-  background-color: #0056b3;
+  background-color: #2980b9;
 }
 
 .submitButton:disabled {
-  background-color: #6c757d; /* Серый цвет для неактивной кнопки */
+  background-color: #95a5a6;
   cursor: not-allowed;
+}
+
+@media (max-width: 768px) {
+  .formContainer {
+    padding: 0;
+  }
 } 
\ No newline at end of file
diff --git a/frontend/src/pages/CalculationResult.module.css b/frontend/src/pages/CalculationResult.module.css
index c643f45..cb0d6bd 100644
--- a/frontend/src/pages/CalculationResult.module.css
+++ b/frontend/src/pages/CalculationResult.module.css
@@ -1,37 +1,80 @@
 .resultContainer {
-  /* Общий стиль страницы */
+  max-width: 1000px;
+  margin: 0 auto;
 }
 
-.detailSection {
-  margin-bottom: 25px;
-  padding-bottom: 15px;
-  border-bottom: 1px solid #eee;
-}
-.detailSection:last-child {
-    border-bottom: none; /* Убрать границу у последнего блока */
-    margin-bottom: 0;
-    padding-bottom: 0;
+.section {
+  margin-bottom: 2rem;
+  padding: 1.5rem;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px var(--shadow-color);
 }
 
-.detailTitle {
-  font-weight: bold;
-  margin-bottom: 8px;
-  color: #495057; /* Цвет заголовка секции */
-  font-size: 1.1em;
+.sectionTitle {
+  font-size: 1.25rem;
+  color: var(--primary-color);
+  margin-bottom: 1rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 2px solid var(--secondary-color);
+}
+
+.detailGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.detailItem {
+  padding: 1rem;
+  background: var(--background-color);
+  border-radius: 4px;
+}
+
+.detailLabel {
+  font-weight: 500;
+  color: var(--text-color);
+  margin-bottom: 0.5rem;
 }
 
 .detailValue {
-    color: #343a40; /* Цвет значения */
-    /* Можно добавить стили для лучшего отображения данных */
+  color: var(--secondary-color);
+  font-size: 1.1rem;
+}
+
+.visualizationContainer {
+  aspect-ratio: 16/9;
+  width: 100%;
+  max-height: 600px;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.jsonViewer {
+  background: var(--background-color);
+  padding: 1rem;
+  border-radius: 4px;
+  overflow-x: auto;
 }
 
 .loading,
 .error {
-    margin-top: 20px;
-    font-style: italic;
-    color: #6c757d;
+  text-align: center;
+  padding: 2rem;
 }
+
 .error {
-    color: #dc3545;
-    font-weight: bold;
+  color: var(--error-color);
+}
+
+@media (max-width: 768px) {
+  .section {
+    padding: 1rem;
+  }
+
+  .detailGrid {
+    grid-template-columns: 1fr;
+  }
 } 
\ No newline at end of file
diff --git a/frontend/src/pages/History.module.css b/frontend/src/pages/History.module.css
index 1e2270a..11c8a1c 100644
--- a/frontend/src/pages/History.module.css
+++ b/frontend/src/pages/History.module.css
@@ -1,50 +1,63 @@
 .historyContainer {
-  /* Общий стиль страницы */
+  overflow-x: auto;
 }
 
 .table {
   width: 100%;
   border-collapse: collapse;
-  margin-top: 20px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Тень для таблицы */
-  overflow: hidden; /* Для скругления углов */
-  border-radius: 8px; /* Скругление углов таблицы */
+  margin-top: 1rem;
+  background: white;
+  border-radius: 8px;
+  overflow: hidden;
 }
 
 .th,
 .td {
-  border: 1px solid #ddd;
-  padding: 12px 15px; /* Увеличим padding */
+  padding: 1rem;
   text-align: left;
+  border-bottom: 1px solid var(--border-color);
 }
 
 .th {
-  background-color: #f8f9fa; /* Светлый фон заголовков */
-  font-weight: bold;
-  color: #495057;
+  background-color: var(--primary-color);
+  color: white;
+  font-weight: 500;
 }
 
-/* Зебра для строк */
-.tbody tr:nth-of-type(even) {
-    background-color: #fdfdfe;
+.tr:hover {
+  background-color: rgba(52, 152, 219, 0.05);
 }
 
-.tbody tr:hover {
-    background-color: #f1f1f1; /* Подсветка строки при наведении */
+.link {
+  color: var(--secondary-color);
+  text-decoration: none;
+  font-weight: 500;
 }
 
-.td a { /* Стилизация ссылки "Подробнее" */
-    font-weight: bold;
+.link:hover {
+  text-decoration: underline;
 }
 
+.empty,
 .loading,
-.error,
-.empty {
-    margin-top: 20px;
-    font-style: italic;
-    color: #6c757d;
-}
 .error {
-    color: #dc3545;
-    font-weight: bold;
+  text-align: center;
+  padding: 2rem;
+  color: var(--text-color);
+}
+
+.error {
+  color: var(--error-color);
+}
+
+@media (max-width: 768px) {
+  .th,
+  .td {
+    padding: 0.75rem;
+    font-size: 0.875rem;
+  }
+
+  .mobileHide {
+    display: none;
+  }
 } 
\ No newline at end of file