God, I think the Developer did it.

luckydiamond/src/components/ChatComponent.vue

@@ -11,7 +11,7 @@
       <ul>
         <transition-group name="fade">
           <li v-for="msg in array" :key="msg">
-            <div class="card__user">
+            <div class="card__user" :class="{ 'mention-message': isCurrentUser(msg), 'system-message' : msg.username === '🛠️ System' }">
               <div class="user__icon">
                 <img :src="msg.icon" />
               </div>
@@ -31,6 +31,7 @@
 <script>
 import "@/assets/css/ComponentsStyles/chat.css";
 import { GetChatHistory } from "@/assets/js/rest/RestMethods.js";
+import { GetCookie } from "@/assets/js/storage/CookieStorage";
 
 import WritechatComponent from "@/components/WritechatComponent.vue";
 import { SendMessageToChat } from "@/assets/js/chat/ChatLogic.js";
@@ -53,6 +54,9 @@ export default {
         chatContent.scrollTop = chatContent.scrollHeight;
       });
     },
+    isCurrentUser(msg) {
+      return msg.msg.includes(GetCookie('SpUserName'))
+    },
     ClaimDatamsg(msg) {
       const now = Date.now();
       if (!this.lastMsgTime || now - this.lastMsgTime >= 2000) {
@@ -61,16 +65,13 @@ export default {
       } else {
         alert("Вы не можете отправлять сообщения чаще, чем раз в 2 секунды.");
       }
-      // if(this.array.length > 7) {
-      //   this.array.shift()
-      // }
     },
   },
   mounted() {
     eventBus.on("dataChat", (dataFromServer) => {
       try {
-        // Attempt to parse the JSON string
         const dataObject = JSON.parse(dataFromServer);
+        
         let imageUrl =
           "https://avatar.spworlds.ru/face/55/" + dataObject.SpUserName;
 
@@ -81,6 +82,10 @@ export default {
           icon: imageUrl,
         };
 
+        if (MsgUser.username === '🛠️ System') {
+          MsgUser.icon = 'https://avatar.spworlds.ru/face/55/CONSOLE'
+        }
+
         this.array.push(MsgUser);
 
         this.ScrollToBottom();
@@ -102,6 +107,10 @@ export default {
             icon: imageUrl,
           };
 
+          if (MsgUser.username === '🛠️ System') {
+            MsgUser.icon = 'https://avatar.spworlds.ru/face/55/CONSOLE'
+          }
+
           this.array.push(MsgUser);
         });
         this.ScrollToBottom();

luckydiamond/src/components/DeveloperComponent.vue

@@ -0,0 +1,70 @@
+<template>
+  <ul>
+    <li v-for="developer in DevelopersOptions" :key="developer.id">
+      <div class="developer-card__content" v-if="developer.id > 4">
+        <div class="developer-card__width" :style="{ background: developer.background }">
+          <div class="developer-card__text">
+            <div class="developer-card__about-text">
+              <p>{{ developer.userRole }}</p>
+              <h1>{{ developer.username }}</h1>
+            </div>
+            <div v-for="(techText, index) in developer.technologyText" :key="index" class="developer-card__technology">
+              <img :src="require(`@/assets/icons-developcard/${developer.technologyIcons[index]}.png`)" :alt="techText">
+              <p>{{ techText }}</p>
+            </div>
+            <div class="developer-card__socials">
+              <div v-for="(socialIcon, index) in developer.socialIcons" :key="index" class="social__content">
+                <img :src="require(`@/assets/icons-developcard/${developer.socialIcons[index]}.png`)">
+              </div>
+            </div>
+          </div>
+          <div class="developer-card__skin">
+            <img :src="`https://avatar.spworlds.ru/front/256/${developer.username}`" :alt="developer.username">
+          </div>
+        </div>
+      </div>
+      <div class="developer-card__content_down" v-else>
+        <div class="developer-card__height" :style="{ background: developer.background }">
+          <div class="developer-card-height__text">
+            <div class="developer-card-height__about-text">
+              <p>{{ developer.userRole }}</p>
+              <h1>{{ developer.username }}</h1>
+            </div>
+            <div v-for="(techText, index) in developer.technologyText" :key="index" class="developer-card__technology">
+              <img :src="require(`@/assets/icons-developcard/${developer.technologyIcons[index]}.png`)" :alt="techText">
+              <p>{{ techText }}</p>
+            </div>
+          </div>
+          <div class="developer-card-height__skin">
+            <div class="developer-card__socials">
+              <div v-for="(socialIcon, index) in developer.socialIcons" :key="index" class="social__content">
+                <img :src="require(`@/assets/icons-developcard/${developer.socialIcons[index]}.png`)">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </li>
+  </ul>
+</template>
+
+<script>
+import DevelopersOptions from "@/mocks/DevelopersOptions";
+import '@/assets/css/ComponentsStyles/developer.css'
+
+export default {
+  data() {
+    return {
+      DevelopersOptions
+    }
+  },
+  methods: {
+    testMethod(developer, username) {
+      console.log(developer, username)
+    }
+  },
+  created() {
+    console.log(DevelopersOptions)
+  }
+}
+</script>

luckydiamond/src/components/HeaderComponent.vue

@@ -160,7 +160,7 @@ export default {
           <!-- <div class="header__card--auth">  -->
           <div class="auth__card--content">
             <a
-              href="https://discord.com/api/oauth2/authorize?client_id=1148644854797176932&redirect_uri=https%3A%2F%2Flucky-diamond.vercel.app&response_type=code&scope=identify"
+              href="https://media.discordapp.net/attachments/1175674631684898866/1203382105934139422/Untitled.png?ex=65d0e3eb&is=65be6eeb&hm=226770699b0ac57c74b1516868e9d7ddb6eb1cb952366ea07e62ccf4ee551a1d&=&format=webp&quality=lossless"
               @click="auth = true"
               ><span
                 ><img
@@ -169,6 +169,7 @@ export default {
                   src="../assets/icons-header/discord-icon.svg" /></span
               >Вход</a
             >
+<!--            https://discord.com/api/oauth2/authorize?client_id=1148644854797176932&redirect_uri=https%3A%2F%2Flucky-diamond.vercel.app&response_type=code&scope=identify-->
           </div>
         </div>
       </div>