кладовая

Поделиться12026-05-04 13:50:21

Автор: незнайка
Администратор
Сообщений: 96
Уважение: +0
Позитив: +0
Последний визит:
2026-07-18 18:19:27

пупупу

Поделиться22026-07-17 20:08:14

Автор: liria
Администратор
Сообщений: 50
Уважение: +1
Позитив: +0
Последний визит:
2026-08-06 09:47:13

[html]<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat UI — телефон</title>

/* Тело с фоном под «стол» */
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #b0b5c0;
padding: 20px;
}

/* ----- СТИЛИ ТЕЛЕФОНА (обёртка) ----- */
.phone {
width: 350px;
background: #ffffff;
border-radius: 42px;
padding: 15px 5px 20px;
box-shadow:
0 30px 60px rgba(0, 0, 0, 0.3),
0 10px 20px rgba(0, 0, 0, 0.15),
inset 0 0 0 2px rgba(255, 255, 255, 0.6);
transition: all 0.2s;
}

/* Динамик */
.phone__speaker {
width: 100px;
height: 6px;
background: #d0d4dd;
border-radius: 20px;
margin: 0 auto 17px auto;
position: relative;
}
.phone__speaker::after {
content: '';
position: absolute;
width: 10px;
height: 10px;
background: #1f2a3a;
border-radius: 50%;
right: -26px;
top: -2px;
opacity: 0.2;
}

/* Контейнер для чата — с прокруткой */
.chat {
width: 100%;
height: 520px;
overflow-y: auto;
padding: 12px 10px 8px;
position: relative;
background: transparent;
border-radius: 24px;
scrollbar-width: thin;
display: flex;
flex-direction: column;
gap: 5px; /* РЕГУЛИРОВКА ОТСТУПА МЕЖДУ ВСЕМИ СООБЩЕНИЯМИ */
}
.chat::-webkit-scrollbar {
width: 4px;
}
.chat::-webkit-scrollbar-thumb {
background: #c0c6d4;
border-radius: 12px;
}

/* ----- СТИЛИ СООБЩЕНИЙ ----- */
.message {
position: relative;
display: flex;
flex-direction: column;
}

/* Настройка контейнера для ВСЕХ сообщений с аватаркой (текст, фото, голос) */
.message.has-avatar {
width: max-content !important;
min-width: 80px !important;
max-width: 230px !important;
}

/* Универсальное позиционирование профиля на границе баббла для ВСЕХ типов сообщений */
.message.has-avatar .profile {
position: relative;
top: 0;
left: 0 !important;
right: 0 !important;
margin-bottom: -15px; /* компенсируем padding-top у баббла */
width: 100%;
}

.left,
.right {
width: auto;
max-width: 85%;
}

.right {
margin-left: auto;
}

.large {
width: auto;
max-width: 85%;
}

/* Ограничиваем имя, чтобы оно красиво обрезалось, если станет гигантским */
.info h3 {
font-size: 10px;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 250px;
padding-right: 5px;
padding-left: 5px;
}

/* Базовые ограничения бабблов с аватаркой */
.message.has-avatar .bubble {
width: 100%;
min-width: 120px;
max-width: 230px;
}

/* Для правых сообщений с аватаркой - прижимаем к правому краю */
.message.right.has-avatar {
align-items: flex-end;
}

.message.right.has-avatar .bubble {
min-width: 120px;
max-width: 230px;
}

/* Сообщения без аватарки - подстраиваются под текст */
.message:not(.has-avatar) .bubble {
width: fit-content;
max-width: 100%;
}

/* Общие стили для контейнера профиля */
.profile {
display: flex;
align-items: center;
gap: 8px;
z-index: 5;
}

.left .profile {
justify-content: flex-start;
}

.right .profile {
flex-direction: row-reverse;
justify-content: flex-start;
}

.avatar {
width: 36px;
height: 36px;
border-radius: 50%;
border: 2px solid #fff;
object-fit: cover;
}

.info span {
display: none;
}

.bubble {
background: #fff;
border-radius: 10px;
padding: 12px 15px 15px;
font-size: 11px;
line-height: 1.4;
color: #444;
box-shadow: 0 6px 12px rgba(0, 0, 0, .12);
word-wrap: break-word;
}

/* Отступ сверху для сообщений с аватаркой, чтобы текст не залезал под ник */
.message.has-avatar .bubble {
padding-top: 25px;
}

/* Стили для изображений в сообщениях */
.message-image {
width: 100%;
max-width: 200px;
border-radius: 8px;
margin-bottom: 6px;
display: block;
}

.image-caption {
font-size: 10px;
color: #666;
margin-top: 4px;
font-style: italic;
}

/* Стили для голосовых сообщений (Фикс размера до 220px) */
.message:has(.voice-message) .bubble {
width: 230px !important;
max-width: 230px !important;
}

.voice-message {
display: flex;
width: 100%;
align-items: center;
gap: 10px;
background: #f0f0f0;
padding: 8px 12px;
border-radius: 8px;
margin-bottom: 6px;
}

.voice-icon {
font-size: 18px;
animation: pulse 1.5s ease-in-out infinite;
flex-shrink: 0;
}

@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}

.voice-wave {
flex: 1;
height: 24px;
display: flex;
align-items: center;
gap: 3px;
min-width: 0;
}

.wave-bar {
flex: 1;
min-width: 2px;
background: #4a90d9;
border-radius: 2px;
}

.wave-bar:nth-child(1) { height: 25%; }
.wave-bar:nth-child(2) { height: 50%; }
.wave-bar:nth-child(3) { height: 75%; }
.wave-bar:nth-child(4) { height: 95%; }
.wave-bar:nth-child(5) { height: 85%; }
.wave-bar:nth-child(6) { height: 65%; }
.wave-bar:nth-child(7) { height: 45%; }
.wave-bar:nth-child(8) { height: 80%; }
.wave-bar:nth-child(9) { height: 100%; }
.wave-bar:nth-child(10) { height: 70%; }
.wave-bar:nth-child(11) { height: 55%; }
.wave-bar:nth-child(12) { height: 90%; }
.wave-bar:nth-child(13) { height: 60%; }
.wave-bar:nth-child(14) { height: 40%; }
.wave-bar:nth-child(15) { height: 75%; }
.wave-bar:nth-child(16) { height: 50%; }
.wave-bar:nth-child(17) { height: 85%; }
.wave-bar:nth-child(18) { height: 30%; }
.wave-bar:nth-child(19) { height: 65%; }
.wave-bar:nth-child(20) { height: 95%; }

.voice-duration {
font-size: 10px;
color: #666;
min-width: 30px;
flex-shrink: 0;
}

.voice-transcript {
font-size: 10px;
font-style: italic;
color: #555;
background: #f8f8f8;
padding: 6px 10px;
border-radius: 6px;
margin-top: 4px;
border-left: 3px solid #4a90d9;
max-width: 100%;
}

.like {
position: absolute;
width: 18px;
height: 18px;
bottom: -8px;
border-radius: 50%;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
font-size: 10px;
box-shadow: 0 3px 6px rgba(0, 0, 0, .15);
}

.left .like {
left: 12px;
}

.right .like {
right: 12px;
}

.chat .message:last-child {
margin-bottom: 0;
}

/* Адаптивность */
@media (max-width: 400px) {
.phone {
width: 100%;
border-radius: 28px;
padding: 14px 10px 16px;
}
.left,
.right,
.large {
max-width: 90%;
}
.large.left {
margin-left: 8px;
}
.large.right {
margin-left: auto;
margin-right: 0;
}

.message.has-avatar .bubble,
.message.right.has-avatar .bubble {
min-width: 120px;
max-width: 280px;
}
}
</style>
</head>

<body>

<div class="message left has-avatar">
<div class="profile">
<img class="avatar" src="https://upforme.ru/uploads/001c/b5/80/5/16050.jpg">
<div class="info">
<h3>lego</h3>
</div>
</div>
<div class="bubble">
соо1
</div>
</div>

<div class="message left has-avatar">
<div class="profile">
<img class="avatar" src="https://upforme.ru/uploads/001c/b5/80/5/16050.jpg">
<div class="info">
<h3>boss chaikamon</h3>
</div>
</div>
<div class="bubble">
<div class="voice-message">
<span class="voice-icon">🎤</span>
<div class="voice-wave">
<span class="wave-bar"></span><span class="wave-bar"></span><span class="wave-bar"></span>
<span class="wave-bar"></span><span class="wave-bar"></span><span class="wave-bar"></span>
<span class="wave-bar"></span><span class="wave-bar"></span><span class="wave-bar"></span>
<span class="wave-bar"></span><span class="wave-bar"></span><span class="wave-bar"></span>
<span class="wave-bar"></span><span class="wave-bar"></span><span class="wave-bar"></span>
<span class="wave-bar"></span><span class="wave-bar"></span><span class="wave-bar"></span>
<span class="wave-bar"></span><span class="wave-bar"></span>
</div>
<span class="voice-duration">0:32</span>
</div>
<div class="voice-transcript">
расшифровка
</div>
</div>
</div>

<div class="message left has-avatar">
<div class="profile">
<img class="avatar" src="https://upforme.ru/uploads/001c/b5/80/5/16050.jpg">
<div class="info">
<h3>lee heesung</h3>
</div>
</div>
<div class="bubble">
<img class="message-image" src="https://upforme.ru/uploads/001c/b5/80/5/16050.jpg">
<div class="image-caption">подпись к картинке</div>
</div>
<div class="like">💜</div>
</div>

<div class="message right has-avatar">
<div class="profile">
<img class="avatar" src="https://i.pravatar.cc/150?img=32" alt="avatar">
<div class="info" style="text-align:right;">
<h3>Liz Blake</h3>
</div>
</div>
<div class="bubble">
Соо2алчсмчья
</div>
</div>

<div class="message right has-avatar">
<div class="profile">
<img class="avatar" src="https://i.pravatar.cc/150?img=32" alt="avatar">
<div class="info" style="text-align:right;">
<h3>Liz Blake</h3>
</div>
</div>
<div class="bubble">
<div class="voice-message">
<span class="voice-icon">🎵</span>
<div class="voice-wave">
<span class="wave-bar"></span><span class="wave-bar"></span><span class="wave-bar"></span>
<span class="wave-bar"></span><span class="wave-bar"></span><span class="wave-bar"></span>
<span class="wave-bar"></span><span class="wave-bar"></span><span class="wave-bar"></span>
<span class="wave-bar"></span><span class="wave-bar"></span><span class="wave-bar"></span>
<span class="wave-bar"></span><span class="wave-bar"></span><span class="wave-bar"></span>
<span class="wave-bar"></span><span class="wave-bar"></span><span class="wave-bar"></span>
<span class="wave-bar"></span><span class="wave-bar"></span>
</div>
<span class="voice-duration">0:45</span>
</div>
<div class="voice-transcript">
оасшифровка
</div>
</div>
</div>
<div class="message right has-avatar">
<div class="profile">
<img class="avatar" src="https://i.pravatar.cc/150?img=32" alt="avatar">
<div class="info" style="text-align:right;">
<h3>Liz Blake</h3>
</div>
</div>
<div class="bubble">
<img class="message-image" src="https://upforme.ru/uploads/001c/b5/80/5/16050.jpg">
<div class="image-caption">подпись к картинке</div>
</div>
<div class="like">💜</div>
</div>
</div>
</div>
</div>

</body>
</html>[/html]

0

Поделиться32026-07-18 11:15:01

Автор: liria
Администратор
Сообщений: 50
Уважение: +1
Позитив: +0
Последний визит:
2026-08-06 09:47:13

[html]<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat UI — телефон</title>

/* Тело с фоном под «стол» */
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #b0b5c0;
padding: 20px;
}

/* ----- СТИЛИ ТЕЛЕФОНА (обёртка) ----- */
.phone {
width: 350px;
background: #ffffff;
border-radius: 42px;
padding: 10px 5px 10px;
box-shadow:
0 30px 60px rgba(0, 0, 0, 0.3),
0 10px 20px rgba(0, 0, 0, 0.15),
inset 0 0 0 2px rgba(255, 255, 255, 0.6);
transition: all 0.2s;
display: flex;
flex-direction: column;
/* ИСПРАВЛЕНИЕ: Прячем всё, что вылезает за скругленные углы телефона */
overflow: hidden;
}

/* Динамик */
.phone__speaker {
width: 100px;
height: 6px;
background: #d0d4dd;
border-radius: 20px;
margin: 0 auto 12px auto;
position: relative;
flex-shrink: 0;
}
.phone__speaker::after {
content: '';
position: absolute;
width: 10px;
height: 10px;
background: #1f2a3a;
border-radius: 50%;
right: -26px;
top: -2px;
opacity: 0.2;
}

/* ----- ТЕЛЕГРАМ ШАПКА КАНАЛА / ЧАТА ----- */
.tg-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 15px;
background: #ffffff;
border-bottom: 1px solid #f0f2f5;
flex-shrink: 0;
}

.tg-header__left, .tg-header__right {
display: flex;
align-items: center;
cursor: pointer;
}

.tg-header__title {
font-size: 14px;
font-weight: bold;
color: #222222;
margin-left: 15px;
}

.icon {
width: 20px;
height: 20px;
fill: #546571;
}

/* Контейнер для чата — с прокруткой */
.chat {
width: 100%;
height: 450px;
overflow-y: auto;
padding: 5px 10px 8px;
position: relative;
background: #f4f5f7;
scrollbar-width: thin;
display: flex;
flex-direction: column;
gap: 5px;
}
.chat::-webkit-scrollbar {
width: 4px;
}
.chat::-webkit-scrollbar-thumb {
background: #c0c6d4;
border-radius: 12px;
}

/* ----- НИЖНЕЕ ПОЛЕ ВВОДА (УМЕНЬШЕННОЕ И ИСПРАВЛЕННОЕ) ----- */
.chat-input-area {
display: flex;
align-items: center;
gap: 8px;
/* УМЕНЬШЕНО: отступы сверху и снизу теперь всего 6px вместо 10px */
padding: 8px 10px;
background: #ffffff;
border-top: 1px solid #f0f2f5;
flex-shrink: 0;
user-select: none;
/* ИСПРАВЛЕНИЕ: скругляем нижние углы самого поля под форму телефона */
border-bottom-left-radius: 35px;
border-bottom-right-radius: 35px;
}

.chat-input-wrapper {
flex: 1;
background: #f4f5f7;
border-radius: 20px;
/* УМЕНЬШЕНО: внутренние отступы капсулы ввода уменьшены до 5px */
padding: 5px 12px;
display: flex;
align-items: center;
}

.chat-input {
width: 100%;
border: none;
background: transparent;
outline: none;
font-size: 12px; /* Чуть уменьшили шрифт для компактности */
color: #333;
cursor: default;
}
.chat-input::placeholder {
color: #949ca7;
}

.send-btn {
/* УМЕНЬШЕНО: кнопка стала 26px вместо 32px */
width: 26px;
height: 26px;
background: #229ed9;
border: none;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: default;
flex-shrink: 0;
}
.send-btn .icon {
fill: #ffffff;
/* УМЕНЬШЕНО: сама иконка самолетика тоже пропорционально меньше */
width: 13px;
height: 13px;
margin-left: 1px;
}

/* ----- СТИЛИ СООБЩЕНИЙ ----- */
.message {
position: relative;
display: flex;
flex-direction: column;
}

.message.has-avatar {
width: max-content !important;
min-width: 80px !important;
max-width: 230px !important;
}

.message.has-avatar .profile {
position: relative;
top: 0;
left: 0 !important;
right: 0 !important;
margin-bottom: -15px;
width: 100%;
}

.left, .right {
width: auto;
max-width: 85%;
}

.right {
margin-left: auto;
}

.info h3 {
font-size: 10px;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 250px;
padding-right: 5px;
padding-left: 5px;
}

.message.has-avatar .bubble {
width: 100%;
min-width: 120px;
max-width: 230px;
}

.message.right.has-avatar {
align-items: flex-end;
}

.message.right.has-avatar .bubble {
min-width: 120px;
max-width: 230px;
}

.message:not(.has-avatar) .bubble {
width: fit-content;
max-width: 100%;
}

.profile {
display: flex;
align-items: center;
gap: 8px;
z-index: 5;
}

.left .profile {
justify-content: flex-start;
}

.right .profile {
flex-direction: row-reverse;
justify-content: flex-start;
}

.avatar {
width: 36px;
height: 36px;
border-radius: 50%;
border: 2px solid #fff;
object-fit: cover;
}

.bubble {
background: #fff;
border-radius: 10px;
padding: 12px 15px 15px;
font-size: 11px;
line-height: 1.4;
color: #444;
box-shadow: 0 4px 8px rgba(0, 0, 0, .06);
word-wrap: break-word;
}

.message.has-avatar .bubble {
padding-top: 25px;
}

.message-image {
width: 100%;
max-width: 200px;
border-radius: 8px;
margin-bottom: 6px;
display: block;
}

.image-caption {
font-size: 10px;
color: #666;
margin-top: 4px;
font-style: italic;
}

.message:has(.voice-message) .bubble {
width: 230px !important;
max-width: 230px !important;
}