[html]<div class="chat-wrapper">
<!-- ШАПКА-->
<div class="chat-head">
<div class="head-avatar">
<div class="avatar-circle">
<div class="avatar-fallback">👤</div>
<!-- <img src="ссылка_на_аватар"> при желании -->
</div>
</div>
<div class="head-info">
<div class="name-row">
<span class="name-surname">name surname</span>
<span class="nickname">/никнейм</span>
</div>
<div class="time-badge">
<span>yesterday</span>
<span class="head-icon">⌘ + C</span>
</div>
</div>
</div>
<!-- ОБЛАСТЬ СООБЩЕНИЙ-->
<div class="messages-area">
<div class="date-divider">
<span class="date-chip">yesterday</span>
</div>
<!-- сообщение 1: длинный текст -->
<div class="message-block">
<div class="message-them">
i am thinking of you in my sleepless solitude tonight<br>
if it's wrong to love you then my heart just won't let me be right, cause i've drowned in you and i won't pull through without you by my side. i'd give my all to have just one more night with you.
</div>
<div class="message-meta them-meta">
<span>00:15</span>
<span>📖 прочитано</span>
</div>
</div>
<!-- голосовое сообщение -->
<div class="message-block">
<div class="voice-message">
<span class="voice-icon">🎤</span>
<div class="voice-wave">
<span></span><span></span><span></span><span></span>
</div>
<span class="voice-duration">0:24</span>
<span style="font-size: 13px; color:#b0b8d4;">voice message</span>
</div>
<div class="message-meta them-meta">
<span>00:18</span>
<span>🎧 слушать</span>
</div>
</div>
<!-- i'd give my all... -->
<div class="message-block">
<div class="message-them">
i'd give my all to have just one more night with you.
</div>
<div class="message-meta them-meta">
<span>00:21</span>
</div>
</div>
<!-- короткое сообщение "i am thinking of you..." -->
<div class="message-block">
<div class="message-them">
i am thinking of you in my sleepless solitude tonight
</div>
<div class="message-meta them-meta">
<span>00:27</span>
</div>
</div>
<!-- повтор основного блока -->
<div class="message-block">
<div class="message-them">
i am thinking of you in my sleepless solitude tonight<br>
if it's wrong to love you then my heart just won't let me be right, cause i've drowned in you and i won't pull through without you by my side. i'd give my all to have just one more night with you.
</div>
<div class="message-meta them-meta">
<span>00:32</span>
<span>📖 прочитано</span>
</div>
</div>
<!-- ИНДИКАТОР НЕПРОЧИТАННЫХ-->
<div class="unread-badge">
<span>💬</span> 3 непрочитанных сообщения
</div>
<!-- сообщение после индикатора -->
<div class="message-block">
<div class="message-them">
i am thinking of you in my sleepless solitude tonight
</div>
<div class="message-meta them-meta">
<span>00:38</span>
</div>
</div>
<!-- голосовое -->
<div class="message-block">
<div class="voice-message">
<span class="voice-icon">🎙️</span>
<div class="voice-wave">
<span></span><span></span><span></span><span></span>
</div>
<span class="voice-duration">0:12</span>
<span style="font-size: 13px; color:#b0b8d4;">voice message</span>
</div>
<div class="message-meta them-meta">
<span>00:41</span>
</div>
</div>
<!-- финальное сообщение -->
<div class="message-block">
<div class="message-them">
i'd give my all to have just one more night with you.
</div>
<div class="message-meta them-meta">
<span>00:44</span>
<span>❤️</span>
</div>
</div>
</div>
<!--ПОЛЕ ВВОДА -->
<div class="input-panel">
<div class="mock-input">
<span class="placeholder-icon">✏️</span>
<span>Написать сообщение...</span>
<span class="fake-cursor"></span>
</div>
<div class="mock-send">
📎
</div>
</div>
</div>
<style>
/*Мессенджер*/
.chat-wrapper {
max-width: 540px;
width: 100%;
background: #0e1017;
border-radius: 28px;
box-shadow: 0 20px 35px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05);
overflow: hidden;
}
/* ШАПКА*/
.chat-head {
padding: 18px 20px 14px 20px;
background: #0e1017;
border-bottom: 1px solid #20232c;
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.head-avatar {
flex-shrink: 0;
}
.avatar-circle {
width: 52px;
height: 52px;
background: linear-gradient(135deg, #2e6be0, #1548a8);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.avatar-fallback {
font-size: 22px;
font-weight: 500;
color: white;
}
.head-info {
flex: 1;
}
.name-row {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 6px;
row-gap: 4px;
}
.name-surname {
font-weight: 700;
font-size: 17px;
color: #f0f2f8;
letter-spacing: -0.2px;
}
.nickname {
font-size: 13px;
color: #8e92a8;
font-weight: 400;
}
.time-badge {
font-size: 12px;
color: #7e829c;
margin-top: 4px;
display: flex;
align-items: center;
gap: 8px;
}
.head-icon {
background: #20232c;
padding: 6px 12px;
border-radius: 30px;
font-size: 12px;
color: #cbd0e0;
font-family: monospace;
letter-spacing: 0.3px;
}
/* область сообщений*/
.messages-area {
padding: 20px 18px 16px 18px;
max-height: 560px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 18px;
background: #0e1017;
}
.messages-area::-webkit-scrollbar {
width: 4px;
}
.messages-area::-webkit-scrollbar-track {
background: #1e212a;
border-radius: 10px;
}
.messages-area::-webkit-scrollbar-thumb {
background: #3e4250;
border-radius: 10px;
}
/* пузырьки сообщений */
.message-block {
display: flex;
flex-direction: column;
gap: 6px;
}
.message-them {
align-self: flex-start;
max-width: 88%;
background: #1e212a;
border-radius: 22px;
border-bottom-left-radius: 5px;
padding: 12px 16px;
color: #eef2fc;
font-size: 15px;
line-height: 1.45;
word-break: break-word;
box-shadow: 0 1px 1px rgba(0,0,0,0.2);
}
/* голосовое сообщение */
.voice-message {
background: #1a1d26;
border-radius: 22px;
border-bottom-left-radius: 5px;
padding: 10px 16px;
display: inline-flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
max-width: 88%;
align-self: flex-start;
}
.voice-icon {
font-size: 20px;
}
.voice-wave {
display: flex;
align-items: center;
gap: 3px;
}
.voice-wave span {
width: 3px;
height: 12px;
background: #6096fd;
border-radius: 2px;
display: inline-block;
}
.voice-wave span:nth-child(2) { height: 18px; }
.voice-wave span:nth-child(3) { height: 10px; }
.voice-wave span:nth-child(4) { height: 16px; }
.voice-duration {
font-size: 13px;
color: #b9c2dc;
font-weight: 450;
}
/* метаинформация (время) */
.message-meta {
display: flex;
align-items: center;
gap: 8px;
font-size: 10px;
color: #6f748c;
margin-left: 12px;
margin-top: 4px;
}
.them-meta {
justify-content: flex-start;
}
/* непрочитанные */
.unread-badge {
background: #2c6ef0;
border-radius: 40px;
padding: 5px 14px;
font-size: 12px;
font-weight: 600;
color: white;
display: inline-flex;
align-items: center;
gap: 6px;
width: fit-content;
margin-top: 8px;
margin-bottom: 4px;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.date-divider {
text-align: center;
margin: 8px 0 6px;
}
.date-chip {
background: #1b1e27;
display: inline-block;
padding: 5px 16px;
border-radius: 40px;
font-size: 11px;
font-weight: 500;
color: #9ea3bb;
letter-spacing: 0.2px;
}
/*поле ввода*/
.input-panel {
background: #0b0d12;
border-top: 1px solid #22252f;
padding: 14px 18px 18px 18px;
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.mock-input {
flex: 1;
background: #1a1d26;
border: 1px solid #2c2f3a;
border-radius: 28px;
padding: 10px 18px;
font-size: 14px;
color: #b9c2dc;
font-family: inherit;
outline: none;
cursor: default;
user-select: none;
white-space: nowrap;
overflow-x: auto;
display: flex;
align-items: center;
gap: 8px;
}
.mock-input span {
color: #6f748c;
letter-spacing: 0.2px;
}
.placeholder-icon {
font-size: 18px;
opacity: 0.6;
}
.mock-send {
background: #20232c;
border-radius: 40px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: #8e92a8;
cursor: default;
}
.small-hint {
font-size: 9px;
color: #4f5468;
text-align: right;
width: 100%;
margin-top: 6px;
user-select: none;
}
.mock-input .fake-cursor {
width: 1px;
height: 16px;
background: #5f6a88;
display: inline-block;
margin-left: 2px;
animation: blinkFake 1s step-end infinite;
}
@keyframes blinkFake {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
/* иконка микрофона / скрепки (визуально) */
.attach-icon {
font-size: 22px;
color: #5a607c;
cursor: default;
}
</style>
[/html]
