From 7f920dd722a2c4a2b6951c629776d9d5349f4bf0 Mon Sep 17 00:00:00 2001
From: "ns.potapov" <ns.potapov@yandex.ru>
Date: Sun, 15 Oct 2023 12:58:35 +0400
Subject: [PATCH] =?UTF-8?q?=D0=9D=D0=B8=D0=B6=D0=BD=D0=B5=D0=B5=20=D0=BC?=
 =?UTF-8?q?=D0=B5=D0=BD=D1=8E=20=D0=B3=D0=BE=D1=82=D0=BE=D0=B2=D0=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 feed.html               | 30 ++++++++++----
 friends.html            | 29 +++++++++++---
 me.html                 | 35 +++++++++++++----
 messages.html           | 86 +++++++++++++++++++++++------------------
 static/css/base.css     | 12 ++++++
 static/css/center.css   | 12 ++++++
 static/css/messages.css |  9 +++++
 7 files changed, 154 insertions(+), 59 deletions(-)
 create mode 100644 static/css/messages.css

diff --git a/feed.html b/feed.html
index 6485715..f7be479 100644
--- a/feed.html
+++ b/feed.html
@@ -36,6 +36,9 @@
 					</a>
 
 					<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink">
+						<li class="d-sm-none"><a class="dropdown-item" href="/me.html"><i
+									class="bi bi-person me-2"></i>Моя страница</a>
+						</li>
 						<li><a class="dropdown-item" href="#"><i class="bi bi-gear me-2"></i>Настройки</a></li>
 						<li>
 							<hr class="dropdown-divider">
@@ -43,28 +46,27 @@
 						<li><a class="dropdown-item" href="#"><i class="bi bi-box-arrow-right me-2"></i>Выход</a></li>
 					</ul>
 				</div>
-
 			</div>
 		</nav>
 	</header>
 	<main class="px-1 px-sm-2 px-lg-4 pt-2 pt-sm-4 d-flex position-relative">
 		<div id="left-menu"
-			class="p-3 d-none d-lg-flex flex-column justify-content-center align-content-around border border-dark rounded-2 position-fixed">
+			class="p-3 d-none d-sm-flex flex-column justify-content-center align-content-around border border-dark rounded-2 position-fixed">
 			<a href="/me.html" class="left-menu-item d-flex rounded-2 py-1 px-2">
 				<i class="bi bi-person"></i>
-				<span class="ms-2">Моя страница</span>
+				<span class="ms-2 d-none d-lg-block">Моя страница</span>
 			</a>
 			<a href="/feed.html" class="left-menu-item d-flex rounded-2 py-1 px-2">
 				<i class="bi bi-layout-text-sidebar-reverse"></i>
-				<span class="ms-2">Новости</span>
+				<span class="ms-2 d-none d-lg-block">Новости</span>
 			</a>
 			<a href="/messages.html" class="left-menu-item d-flex rounded-2 py-1 px-2">
 				<i class="bi bi-chat-text"></i>
-				<span class="ms-2">Сообщения</span>
+				<span class="ms-2 d-none d-lg-block">Сообщения</span>
 			</a>
 			<a href="/friends.html" class="left-menu-item d-flex rounded-2 py-1 px-2">
 				<i class="bi bi-people"></i>
-				<span class="ms-2">Друзья</span>
+				<span class="ms-2 d-none d-lg-block">Друзья</span>
 			</a>
 		</div>
 		<div class="wrapper d-flex justify-content-center">
@@ -258,7 +260,21 @@
 		</div>
 
 	</main>
-	<footer class="py-2 d-flex justify-content-center border-top border-dark">
+	<div class="bottom-menu d-flex d-sm-none w-100 sticky-bottom justify-content-around">
+		<a href="/feed.html" class="bottom-menu-item d-flex flex-column rounded-2 align-items-center">
+			<i class="bi bi-layout-text-sidebar-reverse fs-4"></i>
+			<span>Новости</span>
+		</a>
+		<a href="/messages.html" class="bottom-menu-item d-flex flex-column rounded-2 align-items-center">
+			<i class="bi bi-chat-text fs-4"></i>
+			<span>Чаты</span>
+		</a>
+		<a href="/friends.html" class="bottom-menu-item d-flex flex-column rounded-2 align-items-center">
+			<i class="bi bi-people fs-4"></i>
+			<span>Друзья</span>
+		</a>
+	</div>
+	<footer class="py-2 d-none d-sm-flex justify-content-center border-top border-dark">
 		<span>&copy; <span id="current-year"></span> Неконтакте</span>
 	</footer>
 </body>
diff --git a/friends.html b/friends.html
index 2448107..01d30a5 100644
--- a/friends.html
+++ b/friends.html
@@ -36,6 +36,9 @@
 					</a>
 
 					<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink">
+						<li class="d-sm-none"><a class="dropdown-item" href="/me.html"><i
+									class="bi bi-person me-2"></i>Моя страница</a>
+						</li>
 						<li><a class="dropdown-item" href="#"><i class="bi bi-gear me-2"></i>Настройки</a></li>
 						<li>
 							<hr class="dropdown-divider">
@@ -49,22 +52,22 @@
 	</header>
 	<main class="px-1 px-sm-2 px-lg-4 pt-2 pt-sm-4 d-flex position-relative flex-fill">
 		<div id="left-menu"
-			class="p-3 d-none d-lg-flex flex-column justify-content-center align-content-around border border-dark rounded-2 position-fixed">
+			class="p-3 d-none d-sm-flex flex-column justify-content-center align-content-around border border-dark rounded-2 position-fixed">
 			<a href="/me.html" class="left-menu-item d-flex rounded-2 py-1 px-2">
 				<i class="bi bi-person"></i>
-				<span class="ms-2">Моя страница</span>
+				<span class="ms-2 d-none d-lg-block">Моя страница</span>
 			</a>
 			<a href="/feed.html" class="left-menu-item d-flex rounded-2 py-1 px-2">
 				<i class="bi bi-layout-text-sidebar-reverse"></i>
-				<span class="ms-2">Новости</span>
+				<span class="ms-2 d-none d-lg-block">Новости</span>
 			</a>
 			<a href="/messages.html" class="left-menu-item d-flex rounded-2 py-1 px-2">
 				<i class="bi bi-chat-text"></i>
-				<span class="ms-2">Сообщения</span>
+				<span class="ms-2 d-none d-lg-block">Сообщения</span>
 			</a>
 			<a href="/friends.html" class="left-menu-item d-flex rounded-2 py-1 px-2">
 				<i class="bi bi-people"></i>
-				<span class="ms-2">Друзья</span>
+				<span class="ms-2 d-none d-lg-block">Друзья</span>
 			</a>
 		</div>
 		<div class="wrapper d-flex justify-content-center">
@@ -162,7 +165,21 @@
 		</div>
 
 	</main>
-	<footer class="py-2 d-flex justify-content-center border-top border-dark">
+	<div class="bottom-menu d-flex d-sm-none w-100 sticky-bottom justify-content-around">
+		<a href="/feed.html" class="bottom-menu-item d-flex flex-column rounded-2 align-items-center">
+			<i class="bi bi-layout-text-sidebar-reverse fs-4"></i>
+			<span>Новости</span>
+		</a>
+		<a href="/messages.html" class="bottom-menu-item d-flex flex-column rounded-2 align-items-center">
+			<i class="bi bi-chat-text fs-4"></i>
+			<span>Чаты</span>
+		</a>
+		<a href="/friends.html" class="bottom-menu-item d-flex flex-column rounded-2 align-items-center">
+			<i class="bi bi-people fs-4"></i>
+			<span>Друзья</span>
+		</a>
+	</div>
+	<footer class="py-2 d-none d-sm-flex justify-content-center border-top border-dark">
 		<span>&copy; <span id="current-year"></span> Неконтакте</span>
 	</footer>
 </body>
diff --git a/me.html b/me.html
index cc1955e..b1d2cce 100644
--- a/me.html
+++ b/me.html
@@ -36,6 +36,9 @@
 					</a>
 
 					<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink">
+						<li class="d-sm-none"><a class="dropdown-item" href="/me.html"><i
+									class="bi bi-person me-2"></i>Моя страница</a>
+						</li>
 						<li><a class="dropdown-item" href="#"><i class="bi bi-gear me-2"></i>Настройки</a></li>
 						<li>
 							<hr class="dropdown-divider">
@@ -49,28 +52,30 @@
 	</header>
 	<main class="px-1 px-sm-2 px-lg-4 pt-2 pt-sm-4 d-flex position-relative">
 		<div id="left-menu"
-			class="p-3 d-none d-lg-flex flex-column justify-content-center align-content-around border border-dark rounded-2 position-fixed">
+			class="p-3 d-none d-sm-flex flex-column justify-content-center align-content-around border border-dark rounded-2 position-fixed">
 			<a href="/me.html" class="left-menu-item d-flex rounded-2 py-1 px-2">
 				<i class="bi bi-person"></i>
-				<span class="ms-2">Моя страница</span>
+				<span class="ms-2 d-none d-lg-block">Моя страница</span>
 			</a>
 			<a href="/feed.html" class="left-menu-item d-flex rounded-2 py-1 px-2">
 				<i class="bi bi-layout-text-sidebar-reverse"></i>
-				<span class="ms-2">Новости</span>
+				<span class="ms-2 d-none d-lg-block">Новости</span>
 			</a>
 			<a href="/messages.html" class="left-menu-item d-flex rounded-2 py-1 px-2">
 				<i class="bi bi-chat-text"></i>
-				<span class="ms-2">Сообщения</span>
+				<span class="ms-2 d-none d-lg-block">Сообщения</span>
 			</a>
 			<a href="/friends.html" class="left-menu-item d-flex rounded-2 py-1 px-2">
 				<i class="bi bi-people"></i>
-				<span class="ms-2">Друзья</span>
+				<span class="ms-2 d-none d-lg-block">Друзья</span>
 			</a>
 		</div>
 		<div class="wrapper d-flex justify-content-center">
 			<div class="center">
-				<div class="user-profile p-3 mb-2 mb-sm-4 w-100 d-flex border rounded-2 border-dark">
-					<img src="./static/img/gachi.jpg" class="user-photo img-fluid rounded-2 h-25 me-5">
+				<div
+					class="user-profile p-3 mb-2 mb-sm-4 w-100 d-flex flex-column flex-sm-row border rounded-2 border-dark">
+					<img src="./static/img/gachi.jpg"
+						class="user-photo img-fluid rounded-2 h-25 me-5 mb-3 mb-sm-0 w-100">
 					<div class="user-meta-wrapper d-flex flex-column">
 						<span class="fs-5 mb-2">Алексей Смирнов</span>
 						<span style="font-size: small; font-style: italic;" class="mb-2">Прежде чем задать вопрос,
@@ -272,7 +277,21 @@
 		</div>
 
 	</main>
-	<footer class="py-2 d-flex justify-content-center border-top border-dark">
+	<div class="bottom-menu d-flex d-sm-none w-100 sticky-bottom justify-content-around">
+		<a href="/feed.html" class="bottom-menu-item d-flex flex-column rounded-2 align-items-center">
+			<i class="bi bi-layout-text-sidebar-reverse fs-4"></i>
+			<span>Новости</span>
+		</a>
+		<a href="/messages.html" class="bottom-menu-item d-flex flex-column rounded-2 align-items-center">
+			<i class="bi bi-chat-text fs-4"></i>
+			<span>Чаты</span>
+		</a>
+		<a href="/friends.html" class="bottom-menu-item d-flex flex-column rounded-2 align-items-center">
+			<i class="bi bi-people fs-4"></i>
+			<span>Друзья</span>
+		</a>
+	</div>
+	<footer class="py-2 d-none d-sm-flex justify-content-center border-top border-dark">
 		<span>&copy; <span id="current-year"></span> Неконтакте</span>
 	</footer>
 </body>
diff --git a/messages.html b/messages.html
index 8ac95c6..f55f239 100644
--- a/messages.html
+++ b/messages.html
@@ -13,6 +13,7 @@
 	<link rel="stylesheet" href="./static/css/center.css">
 	<link rel="stylesheet" href="./static/css/post.css">
 	<link rel="stylesheet" href="./static/css/avatar.css">
+	<link rel="stylesheet" href="./static/css/messages.css">
 	<title>Неконтакте</title>
 </head>
 
@@ -36,6 +37,9 @@
 					</a>
 
 					<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink">
+						<li class="d-sm-none"><a class="dropdown-item" href="/me.html"><i
+									class="bi bi-person me-2"></i>Моя страница</a>
+						</li>
 						<li><a class="dropdown-item" href="#"><i class="bi bi-gear me-2"></i>Настройки</a></li>
 						<li>
 							<hr class="dropdown-divider">
@@ -49,22 +53,22 @@
 	</header>
 	<main class="px-1 px-sm-2 px-lg-4 pt-2 pt-sm-4 d-flex position-relative flex-fill">
 		<div id="left-menu"
-			class="p-3 d-none d-lg-flex flex-column justify-content-center align-content-around border border-dark rounded-2 position-fixed">
+			class="p-3 d-none d-sm-flex flex-column justify-content-center align-content-around border border-dark rounded-2 position-fixed">
 			<a href="/me.html" class="left-menu-item d-flex rounded-2 py-1 px-2">
 				<i class="bi bi-person"></i>
-				<span class="ms-2">Моя страница</span>
+				<span class="ms-2 d-none d-lg-block">Моя страница</span>
 			</a>
 			<a href="/feed.html" class="left-menu-item d-flex rounded-2 py-1 px-2">
 				<i class="bi bi-layout-text-sidebar-reverse"></i>
-				<span class="ms-2">Новости</span>
+				<span class="ms-2 d-none d-lg-block">Новости</span>
 			</a>
 			<a href="/messages.html" class="left-menu-item d-flex rounded-2 py-1 px-2">
 				<i class="bi bi-chat-text"></i>
-				<span class="ms-2">Сообщения</span>
+				<span class="ms-2 d-none d-lg-block">Сообщения</span>
 			</a>
 			<a href="/friends.html" class="left-menu-item d-flex rounded-2 py-1 px-2">
 				<i class="bi bi-people"></i>
-				<span class="ms-2">Друзья</span>
+				<span class="ms-2 d-none d-lg-block">Друзья</span>
 			</a>
 		</div>
 		<div class="wrapper d-flex justify-content-center">
@@ -72,13 +76,14 @@
 				<a class="people-row border-bottom border-dark p-2 d-flex justify-content-between align-items-center">
 					<div class="d-flex justify-content-start align-items-center" style="font-size: small;">
 						<img src="./static/img/gachi.jpg" class="user-avatar avatar-small img-fluid rounded-circle">
-						<div class="user-info ms-2 d-flex flex-column justify-content-center">
+						<div class="user-info ms-2 d-flex flex-column justify-content-center w-100">
 							<div class="user-name">
 								Алексей Смирнов
 							</div>
-							<div class="user-message-text px-2 py-1 rounded-3"
+							<div class="user-message-trucated-text px-2 py-1 rounded-3 text-truncate"
 								style="background-color: #e8e8e8; font-size: smaller;">
-								Если бы ты знал как мне плохо от этих лабораторок...
+								Если бы ты знал как мне плохо от этих лабораторок, ты бы никогда не стал поступать в
+								политехнический университет города Ульяновска!
 							</div>
 						</div>
 					</div>
@@ -86,13 +91,14 @@
 				<a class="people-row border-bottom border-dark p-2 d-flex justify-content-between align-items-center">
 					<div class="d-flex justify-content-start align-items-center" style="font-size: small;">
 						<img src="./static/img/gachi.jpg" class="user-avatar avatar-small img-fluid rounded-circle">
-						<div class="user-info ms-2 d-flex flex-column justify-content-center">
+						<div class="user-info ms-2 d-flex flex-column justify-content-center w-100">
 							<div class="user-name">
 								Алексей Смирнов
 							</div>
-							<div class="user-message-text px-2 py-1 rounded-3"
+							<div class="user-message-trucated-text px-2 py-1 rounded-3 text-truncate"
 								style="background-color: #e8e8e8; font-size: smaller;">
-								Если бы ты знал как мне плохо от этих лабораторок...
+								Если бы ты знал как мне плохо от этих лабораторок, ты бы никогда не стал поступать в
+								политехнический университет города Ульяновска!
 							</div>
 						</div>
 					</div>
@@ -100,13 +106,14 @@
 				<a class="people-row border-bottom border-dark p-2 d-flex justify-content-between align-items-center">
 					<div class="d-flex justify-content-start align-items-center" style="font-size: small;">
 						<img src="./static/img/gachi.jpg" class="user-avatar avatar-small img-fluid rounded-circle">
-						<div class="user-info ms-2 d-flex flex-column justify-content-center">
+						<div class="user-info ms-2 d-flex flex-column justify-content-center w-100">
 							<div class="user-name">
 								Алексей Смирнов
 							</div>
-							<div class="user-message-text px-2 py-1 rounded-3"
+							<div class="user-message-trucated-text px-2 py-1 rounded-3 text-truncate"
 								style="background-color: #e8e8e8; font-size: smaller;">
-								Если бы ты знал как мне плохо от этих лабораторок...
+								Если бы ты знал как мне плохо от этих лабораторок, ты бы никогда не стал поступать в
+								политехнический университет города Ульяновска!
 							</div>
 						</div>
 					</div>
@@ -114,13 +121,14 @@
 				<a class="people-row border-bottom border-dark p-2 d-flex justify-content-between align-items-center">
 					<div class="d-flex justify-content-start align-items-center" style="font-size: small;">
 						<img src="./static/img/gachi.jpg" class="user-avatar avatar-small img-fluid rounded-circle">
-						<div class="user-info ms-2 d-flex flex-column justify-content-center">
+						<div class="user-info ms-2 d-flex flex-column justify-content-center w-100">
 							<div class="user-name">
 								Алексей Смирнов
 							</div>
-							<div class="user-message-text px-2 py-1 rounded-3"
+							<div class="user-message-trucated-text px-2 py-1 rounded-3 text-truncate"
 								style="background-color: #e8e8e8; font-size: smaller;">
-								Если бы ты знал как мне плохо от этих лабораторок...
+								Если бы ты знал как мне плохо от этих лабораторок, ты бы никогда не стал поступать в
+								политехнический университет города Ульяновска!
 							</div>
 						</div>
 					</div>
@@ -128,13 +136,14 @@
 				<a class="people-row border-bottom border-dark p-2 d-flex justify-content-between align-items-center">
 					<div class="d-flex justify-content-start align-items-center" style="font-size: small;">
 						<img src="./static/img/gachi.jpg" class="user-avatar avatar-small img-fluid rounded-circle">
-						<div class="user-info ms-2 d-flex flex-column justify-content-center">
+						<div class="user-info ms-2 d-flex flex-column justify-content-center w-100">
 							<div class="user-name">
 								Алексей Смирнов
 							</div>
-							<div class="user-message-text px-2 py-1 rounded-3"
+							<div class="user-message-trucated-text px-2 py-1 rounded-3 text-truncate"
 								style="background-color: #e8e8e8; font-size: smaller;">
-								Если бы ты знал как мне плохо от этих лабораторок...
+								Если бы ты знал как мне плохо от этих лабораторок, ты бы никогда не стал поступать в
+								политехнический университет города Ульяновска!
 							</div>
 						</div>
 					</div>
@@ -142,27 +151,14 @@
 				<a class="people-row border-bottom border-dark p-2 d-flex justify-content-between align-items-center">
 					<div class="d-flex justify-content-start align-items-center" style="font-size: small;">
 						<img src="./static/img/gachi.jpg" class="user-avatar avatar-small img-fluid rounded-circle">
-						<div class="user-info ms-2 d-flex flex-column justify-content-center">
+						<div class="user-info ms-2 d-flex flex-column justify-content-center w-100">
 							<div class="user-name">
 								Алексей Смирнов
 							</div>
-							<div class="user-message-text px-2 py-1 rounded-3"
+							<div class="user-message-trucated-text px-2 py-1 rounded-3 text-truncate"
 								style="background-color: #e8e8e8; font-size: smaller;">
-								Если бы ты знал как мне плохо от этих лабораторок...
-							</div>
-						</div>
-					</div>
-				</a>
-				<a class="people-row p-2 d-flex justify-content-between align-items-center">
-					<div class="d-flex justify-content-start align-items-center" style="font-size: small;">
-						<img src="./static/img/gachi.jpg" class="user-avatar avatar-small img-fluid rounded-circle">
-						<div class="user-info ms-2 d-flex flex-column justify-content-center">
-							<div class="user-name">
-								Алексей Смирнов
-							</div>
-							<div class="user-message-text px-2 py-1 rounded-3"
-								style="background-color: #e8e8e8; font-size: smaller;">
-								Если бы ты знал как мне плохо от этих лабораторок...
+								Если бы ты знал как мне плохо от этих лабораторок, ты бы никогда не стал поступать в
+								политехнический университет города Ульяновска!
 							</div>
 						</div>
 					</div>
@@ -171,7 +167,21 @@
 		</div>
 
 	</main>
-	<footer class="py-2 d-flex justify-content-center border-top border-dark">
+	<div class="bottom-menu d-flex d-sm-none w-100 sticky-bottom justify-content-around">
+		<a href="/feed.html" class="bottom-menu-item d-flex flex-column rounded-2 align-items-center">
+			<i class="bi bi-layout-text-sidebar-reverse fs-4"></i>
+			<span>Новости</span>
+		</a>
+		<a href="/messages.html" class="bottom-menu-item d-flex flex-column rounded-2 align-items-center">
+			<i class="bi bi-chat-text fs-4"></i>
+			<span>Чаты</span>
+		</a>
+		<a href="/friends.html" class="bottom-menu-item d-flex flex-column rounded-2 align-items-center">
+			<i class="bi bi-people fs-4"></i>
+			<span>Друзья</span>
+		</a>
+	</div>
+	<footer class="py-2 d-none d-sm-flex justify-content-center border-top border-dark">
 		<span>&copy; <span id="current-year"></span> Неконтакте</span>
 	</footer>
 </body>
diff --git a/static/css/base.css b/static/css/base.css
index 5a35bf5..c1ac58d 100644
--- a/static/css/base.css
+++ b/static/css/base.css
@@ -45,3 +45,15 @@ header {
 .navbar-brand:hover {
 	color: white;
 }
+
+.bottom-menu {
+	background-color: #235D70;
+}
+
+.bottom-menu * {
+	color: white;
+}
+
+.bottom-menu span {
+	font-size: smaller;
+}
diff --git a/static/css/center.css b/static/css/center.css
index c2fb032..ce0b87e 100644
--- a/static/css/center.css
+++ b/static/css/center.css
@@ -6,13 +6,25 @@
 	width: 70%;
 }
 
+.user-message-trucated-text {
+	max-width: 60vw;
+}
+
 @media screen and (min-width: 992px) {
+	.user-message-trucated-text {
+		max-width: 30vw;
+	}
+
 	.center {
 		width: 40%;
 	}
 }
 
 @media screen and (max-width: 576px) {
+	.user-message-trucated-text {
+		max-width: 70vw;
+	}
+
 	.center {
 		width: 100%;
 	}
diff --git a/static/css/messages.css b/static/css/messages.css
new file mode 100644
index 0000000..505d755
--- /dev/null
+++ b/static/css/messages.css
@@ -0,0 +1,9 @@
+@media screen and (min-width: 576px) {
+	.people-row {
+		transition: .1s;
+	}
+
+	.people-row:hover {
+		transform: translateX(10px);
+	}
+}