From 5754c4fc685d27a4eccebdf9e8ab983728b92298 Mon Sep 17 00:00:00 2001
From: UNIKNOW <000-drakon@mail.ru>
Date: Tue, 5 Mar 2024 22:59:01 +0400
Subject: [PATCH] =?UTF-8?q?=D0=BF=D0=BE=D0=BF=D1=8B=D1=82=D0=BA=D0=B0=20?=
 =?UTF-8?q?=D1=84=D0=B8=D0=BA=D1=81=D0=B0=20=D1=87=D0=B0=D1=82=D0=B0,=20?=
 =?UTF-8?q?=D0=B8=D0=B7=D0=BC=D0=B5=D0=BD=D0=B5=D0=BD=D0=B8=D1=8F=20=D1=81?=
 =?UTF-8?q?=D1=82=D0=B8=D0=BB=D1=8F=20=D1=85=D0=B5=D0=B4=D0=B5=D1=80=D0=B0?=
 =?UTF-8?q?=20=D0=B8=20=D0=B8=D0=B7=D0=BC=D0=B5=D0=BD=D0=B5=D0=BD=D0=B8?=
 =?UTF-8?q?=D0=B5=20=D1=86=D0=B2=D0=B5=D1=82=D0=B0=20=D1=84=D0=BE=D0=BD?=
 =?UTF-8?q?=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/Header.svelte         | 244 +++++++++++++++----------------
 src/routes/chatPage/+page.svelte |  32 ++--
 2 files changed, 143 insertions(+), 133 deletions(-)

diff --git a/src/routes/Header.svelte b/src/routes/Header.svelte
index 2e3e11f..161da4a 100644
--- a/src/routes/Header.svelte
+++ b/src/routes/Header.svelte
@@ -1,142 +1,140 @@
 <script>
-	  import { onMount } from 'svelte';
-    import {UserCheck} from '$lib/userFunction';
+	import { onMount } from 'svelte';
+	import { UserCheck } from '$lib/userFunction';
 
-    let Nickname
-    let userImage
+	let Nickname;
+	let userImage;
 
-onMount(async () => {
-  const UserData = await UserCheck();  
-   Nickname = UserData.username;
-   userImage = UserData.avatar_image;
-   console.log(userImage)
-})
+	onMount(async () => {
+		const UserData = await UserCheck();
+		Nickname = UserData.username;
+		userImage = UserData.avatar_image;
+		
+	});
 
-let isOpen = false;
-let items1 = ['Профиль', 'Настройки'];
-let items2 = ['Выйти'];
+	let isOpen = false;
+	let items1 = ['Профиль', 'Настройки'];
+	let items2 = ['Выйти'];
 </script>
-<header class="headerClass">
 
-    <div class="divsiteAvatar">
-      <img class="siteAvatar" src="./BP-NEON.png" alt="лого">
-      <p class="siteAvatarBP">Black Phoenix</p>
-    </div>
-    <div class="divUser">
-        <button class="buttonUser" on:click={() => isOpen = !isOpen}>
-        <h3 class="name">{Nickname}</h3>
-        <img class="userAvatar" src="{userImage}" alt="аватарка">
-        </button>
-    </div>
-    
-    {#if isOpen}
-    <div class="dropdown">
-      {#each items1 as item (item)}
-        <div class="listItem">{item}</div>
-      {/each}
-      <div class="ListLine"></div>
-      {#each items2 as item (item)}
-        <div class="listItem">{item}</div>
-      {/each}
-    </div>
-  {/if}
+<header class="headerClass">
+	<div class="divsiteAvatar">
+		<img class="siteAvatar" src="./BP-NEON.png" alt="лого" />
+		<p class="siteAvatarBP">Black Phoenix</p>
+	</div>
+	<div class="divUser">
+		<button class="buttonUser" on:click={() => (isOpen = !isOpen)}>
+			<h3 class="name">{Nickname}</h3>
+			<img class="userAvatar" src={userImage} alt="аватарка" />
+		</button>
+	</div>
+
+	{#if isOpen}
+		<div class="dropdown">
+			{#each items1 as item (item)}
+				<div class="listItem">{item}</div>
+			{/each}
+			<div class="ListLine"></div>
+			{#each items2 as item (item)}
+				<div class="listItem">{item}</div>
+			{/each}
+		</div>
+	{/if}
 </header>
 
 <style>
+	.buttonUser {
+		width: 100%;
+		height: 100%;
+    border-bottom-left-radius: 10px;
+		border-bottom-right-radius: 10px;
+		display: flex;
+		justify-content: space-around;
+		align-items: center;
 
-.buttonUser{
-  width: 100%;
-  height: 100%;
-  border-radius: 0px;
-  border-bottom-left-radius: 10px;
-  border-bottom-right-radius: 10px;
-  display: flex;
-  justify-content:space-around;
-  align-items: center;
-}
-
-.ListLine{
-    border: 1px solid lightgray;
-    margin-top: 3px;
-}
-
-.dropdown {
-    cursor: pointer;
-    position: absolute;
-    right: 5vw;
-    top: 10vh;
-    width: 200px;
+    background-color: rgba(255, 255, 255, 0.3);
+    border: 0;
     
-  }
-
-  .listItem {
-    cursor: pointer;
-  }
-
-    div,h3{
-        font-weight: 600;
-        font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
-    }
-    .headerClass > * {
-        
-        margin-bottom: 0;
-    }
-    .headerClass{ 
-        list-style: none;
-        display: grid;
-        grid-template-columns: 5vw 200px repeat(5, auto) 200px 5vw;
-        grid-template-rows: 9vh;
-        gap: 0;
-        
-        
-    }
-    .siteAvatar{
-        margin: 0;
-        padding: 0;
-        
-        height: 100%;
-        object-fit: cover;
-        
-    }
     
-    .siteAvatarBP{
+	}
 
-      display: flex;
-      align-items: center;
-      font-size: 20px;
+	.ListLine {
+		border: 1px solid lightgray;
+		margin-top: 3px;
+	}
 
-    }
-    .name{
+	.dropdown {
+    z-index: 3;
+		cursor: pointer;
+		position: absolute;
+		right: 5vw;
+		top: 10vh;
+		width: 200px;
 
-    }
-    .divsiteAvatar{
-        grid-column: 2;
-        display: flex;
-        justify-content:space-evenly;
-        align-items: center;
-        border: 1px solid black;
-    }
-    .divUser{
-        grid-column: 8;
-        display: flex;
-        align-items: center;
-        justify-content:space-around;
-        width: 100%;
-        height: 100%;
-        
-    }
-    .userAvatar{
-        justify-content: right;
-        width: 70px; 
-        border-radius: 50%;
-       
-        max-width: 100%;
-        max-height: 100%;
+    background-color: rgba(255, 255, 255, 0.3);
+    border: 0;
+    border-radius: 10px;
 
-        display: flex;
-        align-items: center;
-    }
+   
+	}
 
+	.listItem {
+		cursor: pointer;
+	}
 
+	div,
+	h3 {
+		font-weight: 600;
+		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
+	}
+	.headerClass > * {
+		margin-bottom: 0;
+	}
+	.headerClass {
+		list-style: none;
+		display: grid;
+		grid-template-columns: 5vw 200px repeat(5, auto) 200px 5vw;
+		grid-template-rows: 9vh;
+		gap: 0;
+	}
+	.siteAvatar {
+		margin: 0;
+		padding: 0;
 
-</style>
\ No newline at end of file
+		height: 100%;
+		object-fit: cover;
+	}
+
+	.siteAvatarBP {
+		display: flex;
+		align-items: center;
+		font-size: 20px;
+	}
+	
+	.divsiteAvatar {
+		grid-column: 2;
+		display: flex;
+		justify-content: space-evenly;
+		align-items: center;
+		border: 1px solid black;
+	}
+	.divUser {
+		grid-column: 8;
+		display: flex;
+		align-items: center;
+		justify-content: space-around;
+		width: 100%;
+		height: 100%;
+	}
+	.userAvatar {
+		justify-content: right;
+		width: 70px;
+		border-radius: 50%;
+
+		max-width: 100%;
+		max-height: 100%;
+
+		display: flex;
+		align-items: center;
+	}
+</style>
diff --git a/src/routes/chatPage/+page.svelte b/src/routes/chatPage/+page.svelte
index dcf6d0b..e5967c0 100644
--- a/src/routes/chatPage/+page.svelte
+++ b/src/routes/chatPage/+page.svelte
@@ -96,7 +96,7 @@
 		<form class="chatSend" on:submit={sendMessage}>
 			<textarea
 				class="chatInput"
-        placeholder="Введите сообщение"
+        		placeholder="Введите сообщение"
 				maxlength="2000"
 				rows="3"
 				bind:this={textarea}
@@ -143,8 +143,13 @@
 		display: flex;
 		justify-content: flex-start;
 	}
+
+	.MsgMsg{
+		
+	}
+
 	.MsgName {
-		display: flex;
+		
 	}
 
 	.MsgPic {
@@ -166,8 +171,9 @@
 	}
 
 	.MsgAll {
-		display: flex;
-		flex: 90;
+		display:flex;
+		flex-direction: row;
+
 	}
 
 	.divMessage {
@@ -175,9 +181,11 @@
 		border: 1px solid rgba(255, 255, 255, 0.5);
 		border-radius: 15px;
 		box-shadow: 0 0px 30px rgba(0, 0, 0, 0.2);
-
+		
+		
 		margin: 3px;
-		transform: translate(90deg);
+		overflow-wrap: break-word;
+
 	}
 
 	.chatBox {
@@ -186,14 +194,15 @@
 		flex-direction: column-reverse;
 		align-items: flex-start;
 
-		overflow-y: auto;
+		overflow-x:hidden;
 		width: 100%;
+		
 
 		/* From https://css.glass */
 		background-color: rgba(255, 255, 255, 0.2);
 		border-radius: 15px;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
+    	border-bottom-left-radius: 0;
+   		border-bottom-right-radius: 0; 
 		box-shadow: 0 -4px 30px rgb(0, 0, 0, 0.5);
     
 		backdrop-filter: blur(7px);
@@ -205,6 +214,7 @@
 		border: 0 !important;
 		margin: 0;
 		padding: 0;
+		z-index: 2;
 	}
 
 	.chatSend {
@@ -219,6 +229,7 @@
 	}
 
 	.chatInput {
+		
     outline: none;
 		width: 100%;
 		resize: none;
@@ -233,6 +244,7 @@
 	.divChat {
 		flex-direction: column;
 		display: flex;
+		
 	}
 
 	body {
@@ -253,7 +265,7 @@
 		grid-column: span 3;
 		grid-row: span 3;
 
-		background-color: #563e89;
+		background-color: #7a5abd;
 		background-image: url(./BPytka.png);
 		background-repeat: no-repeat;
 		background-size: 50vh;