change styles

moevm · Dec 24, 2024 · 46d93ad · 46d93ad
1 parent 3e6f766
commit 46d93ad
Show file tree

Hide file tree

Showing 5 changed files with 262 additions and 19 deletions.
diff --git a/src/main/resources/static/css/filtration_styles.css b/src/main/resources/static/css/filtration_styles.css
@@ -75,6 +75,54 @@ select {
     align-items: center;
     gap: 10px;
 }
+
+.input-range {
+    display: flex;
+    gap: 10px;
+    margin-top: 5px;
+}
+
+.input-range input {
+    width: 100px;
+    padding: 5px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+#map {
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    position: relative; 
+    top: 0;
+    left: 0;
+    width: 300px;
+    height: 200px;
+    transition: all 0.3s ease-in-out;
+    z-index: 1;
+}
+
+#map.fullscreen {
+    position: fixed; /* Карта будет на весь экран */
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 1000; /* Выводим карту на передний план */
+    border-radius: 0;
+}
+
+#fullscreenControls {
+    display: none;
+    position: fixed;
+    top: 10px;
+    right: 10px;
+    z-index: 1001;
+}
+
+#fullscreenControls.visible {
+    display: flex;
+    gap: 10px;
+}
 /* Цвет звездочек */
 .star {
     color: #003366;
@@ -96,18 +144,6 @@ input[type="number"] {
     font-family: 'Century Gothic', Arial, sans-serif;
 }
 
-.input-range {
-    display: flex;
-    gap: 10px;
-    margin-top: 5px;
-}
-
-.input-range input {
-    width: 100px;
-    padding: 5px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-}
 input[type="text"] {
     font-family: 'Century Gothic', Arial, sans-serif;
 }
@@ -127,6 +163,7 @@ input[type="text"] {
 .dropdown {
     position: relative;
     width: 90%;
+    z-index: 2;
 }
 
 #regionInput,
@@ -161,13 +198,8 @@ input[type="text"] {
     display: flex;
     flex-direction: column;
     padding: 10px;
-    z-index: 1;
 }
 
-.map {
-    z-index: 2;
-
-}
 .checkbox-container label {
     margin: 5px 0;
 }

diff --git a/src/main/resources/static/css/main_styles.css b/src/main/resources/static/css/main_styles.css
@@ -72,7 +72,7 @@ header {
     width: 300px;
 }
 
-.filter-btn {
+.filter-btn, .mapsearch-btn {
     padding: 10px 20px;
     background-color: #003366;
     color: #FFFFFF;

diff --git a/src/main/resources/static/css/map-search_styles.css b/src/main/resources/static/css/map-search_styles.css
@@ -0,0 +1,113 @@
+html, body {
+    height: 100%; /* Высота экрана */
+    margin: 0; /* Убираем отступы */
+    overflow: hidden; /* Убираем прокрутку */
+}
+/* Устанавливаем карту на весь экран */
+#map {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+/* Сайдбар слева, без фона по умолчанию */
+#sidebar {
+    font-family: 'Century Gothic', Arial, sans-serif;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 420px;
+    background-color: transparent;
+    color: white;
+    padding: 20px;
+    z-index: 1000;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    transition: background-color 0.3s ease;
+}
+
+/* Когда фоновый цвет должен быть видим */
+#sidebar.showBackground {
+    background-color: #6C7D9F;
+}
+
+#sidebar .leaflet-routing-container {
+    color: #003366;
+    width: 100%;
+    font-size: 0.75rem;
+}
+
+/* Контейнер для поиска внутри сайдбара */
+#searchContainer {
+    padding: 10px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 20px;
+}
+
+.hidden {
+    display: none  !important;
+}
+
+input[type="text"] {
+    font-family: 'Century Gothic', Arial, sans-serif;
+    width: 95%;
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    color: #003366;
+}
+
+#routeStart, #routeEnd {
+    margin-bottom: 15px;
+}
+
+button {
+    display: inline-block;
+    padding: 10px;
+    background-color: #003366;
+    color: white;
+    font-family: 'Century Gothic', Arial, sans-serif;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: #012850;
+}
+
+#routeButton {
+    width: 100%;
+    box-sizing: border-box; /* Учитывает отступы и границы в ширине */
+}
+#backButton, #backButtonRoute {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    padding: 10px;
+    margin: 0;
+    cursor: pointer;
+
+}
+
+#backButtonRoute {
+    margin-bottom: 15px;
+}
+
+#backButton .back-icon, #backButtonRoute .back-icon {
+    width: 24px;
+    height: 24px;
+    object-fit: contain;
+}
+
+#buildRouteButton {
+    width: 100%;
+    box-sizing: border-box;
+}
diff --git a/src/main/resources/static/css/profile_styles.css b/src/main/resources/static/css/profile_styles.css
@@ -60,7 +60,7 @@ header {
     color: #666;
 }
 
-#import-export-button, #back-button, #logout-button {
+#import-export-button, #back-button, #logout-button, #save-photo-button, #cancel-photo-button, #change-photo-button{
     margin-top: 10px;
     padding: 10px 20px;
     background-color: #003366;
@@ -145,6 +145,13 @@ header {
     font-weight: bold;
 }
 
+#photo-url-input {
+    padding: 10px;
+    border: 1px solid #cccccc;
+    border-radius: 20px;
+    width: 300px;
+}
+
 
 /* Стили для отзыва */
 .review {

diff --git a/src/main/resources/static/css/statistics_styles.css b/src/main/resources/static/css/statistics_styles.css
@@ -0,0 +1,91 @@
+body {
+    font-family: 'Century Gothic', Arial, sans-serif;
+    background-color: #E6F0FF;
+}
+
+/* Основной контейнер */
+
+.container {
+
+    padding: 30px;
+    border-radius: 10px;
+    width: 85%;
+    margin: 0 auto;
+    box-sizing: border-box;
+}
+
+header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+header h1 {
+    font-size: 32px;
+    font-weight: 1000;
+    color: #003366;
+}
+
+.profile-btn {
+    border: none;
+}
+
+.profile-img {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    object-fit: cover;
+    cursor: pointer;
+}
+
+.back-btn {
+    padding: 10px 20px;
+    background-color: #003366;
+    color: white;
+    border: none;
+    cursor: pointer;
+    text-decoration: none;
+    transition: background-color 0.3s;
+}
+
+.back-btn:hover {
+    background-color: #012850;  
+}
+
+.content h2 {
+    font-size: 18px;
+    color: #003366;
+    margin-bottom: 20px;
+}
+
+.content {
+    width: 500px;
+    justify-content: center;
+    align-items: center;
+}
+
+form {
+    font-size: 16px;
+    color: #003366;
+}
+
+form label {
+    display: block;
+    margin-bottom: 10px;
+}
+
+form .btn {
+    font-family: 'Century Gothic', Arial, sans-serif;
+    padding: 10px 20px;
+    background-color: #003366;
+    font-size: 1rem;
+    color: white;
+    border: none;
+    cursor: pointer;
+    text-decoration: none;
+    transition: background-color 0.3s;
+}
+form .btn:hover {
+    background-color: #012850;
+}