[html]<center><div class='messenger'><div class='head'><div class='tap back'></div>
<img src='https://forumstatic.ru/files/001a/d7/df/79934.png' class='ava'><p><strong>
ИМЯ СОБЕСЕДНИКА
</strong><br>typing...</p><div class='tap video'></div><div class='tap call'></div><div class='tap options'></div></div>
<div class='mess1'>
<!-- ПЕРЕПИСКА НАЧИНАЕТСЯ ТУТ -->
<div class='left' mess-date='02:53 pm'><img src='https://forumstatic.ru/files/001a/d7/df/34670.png' class='ava'><span>
пупупу</span></div>
<div class='left' mess-date='02:53 pm'><img src='https://forumstatic.ru/files/001a/d7/df/34670.png' class='ava'><span>
<img src='https://forumstatic.ru/files/001a/d7/df/26960.png'></span></div>
<div class='left' mess-date='02:53 pm'><img src='https://forumstatic.ru/files/001a/d7/df/26960.png' class='ava'><span>
<div class='answer' mess-date='02:53 pm'><strong>ВАШЕ ИМЯ</strong><br>ТО, ЧТО СОБЕСЕДНИК ЦИТИРУЕТ</div>
СООБЩЕНИЕ СОБЕСЕДНИКА
</span></div>
<div class='right' mess-date='02:53 pm'><span>
<div class='answer'><strong>ИМЯ СОБЕСЕДНИКА</strong><br>ТО, ЧТО ВЫ ЦИТИРУЕТЕ</div>
СООБЩЕНИЕ ВАШЕ
</span>
<img src='https://forumstatic.ru/files/001a/d7/df/26960.png' class='ava'></div>
<div class='left' mess-date='02:53 pm'><img src='https://forumstatic.ru/files/001a/d7/df/26960.png' class='ava'><span><details><summary>показать расшифровку</summary>
ТЕКСТ ГОЛОСОВОГО ПИШЕМ ТУТ
</details></span></div>
<!-- ПЕРЕПИСКА КОНЧАЕТСЯ ТУТ -->
</div>
<div class='send'><div class='tap smile'></div><span>send message...<div class='taps'><div class='tap add'></div><div class='tap photo'></div></div></span><div class='tap mic'></div></div></div></center>
[/html]
общий шаблон
<div class='messenger'><div class='head'><div class='tap back'></div> <img src='АВАТАР СОБЕСЕДНИКА' class='ava'><p><strong> ИМЯ СОБЕСЕДНИКА </strong><br>typing...</p><div class='tap video'></div><div class='tap call'></div><div class='tap options'></div></div> <div class='mess'> <!-- ПЕРЕПИСКА НАЧИНАЕТСЯ ТУТ --> СЮДА ВСТАВЛЯЕМ ВАШИ СООБЩЕНИЯ <!-- ПЕРЕПИСКА КОНЧАЕТСЯ ТУТ --> </div> <div class='send'><div class='tap smile'></div><span>send message...<div class='taps'><div class='tap add'></div><div class='tap photo'></div></div></span><div class='tap mic'></div></div></div>
заполнение истории переписки
общие правила:
c <div class='left'> начинается сообщение, отправленное собеседником (слева)
c <div class='right'> начинается сообщение, отправленное вами (справа)
в тегах mess-date='02:53 pm' находится время отправки
в тегах <span> находится само тело сообщенияшаблон простого текстового сообщения:
Код:<div class='left' mess-date='02:53 pm'><img src='АВАТАР СОБЕСЕДНИКА' class='ava'><span> СООБЩЕНИЕ СОБЕСЕДНИКА </span></div>Код:<div class='right' mess-date='02:53 pm'><span> СООБЩЕНИЕ ВАШЕ </span> <img src='АВАТАР ВАШ' class='ava'></div>шаблон простого сообщения только из эмоджи:
Код:<div class='left' mess-date='02:53 pm'><img src='АВАТАР СОБЕСЕДНИКА' class='ava'><span class='emoji'> <img src="ССЫЛКА НА ЭМОДЖИ"><img src="ССЫЛКА НА ЭМОДЖИ"></span></div>Код:<div class='right' mess-date='02:53 pm'><span class='emoji'> <img src="ССЫЛКА НА ЭМОДЖИ"><img src="ССЫЛКА НА ЭМОДЖИ"></span> <img src='АВАТАР ВАШ' class='ava'></div>шаблон сообщений-ответов
Код:<div class='left' mess-date='02:53 pm'><img src='АВАТАР СОБЕСЕДНИКА' class='ava'><span> <div class='answer' mess-date='02:53 pm'><strong>ВАШЕ ИМЯ</strong><br>ТО, ЧТО СОБЕСЕДНИК ЦИТИРУЕТ</div> СООБЩЕНИЕ СОБЕСЕДНИКА </span></div>Код:<div class='right' mess-date='02:53 pm'><span> <div class='answer'><strong>ИМЯ СОБЕСЕДНИКА</strong><br>ТО, ЧТО ВЫ ЦИТИРУЕТЕ</div> СООБЩЕНИЕ ВАШЕ </span> <img src='АВАТАР ВАШ' class='ava'></div>шаблон сообщений-фото
Код:<div class='left' mess-date='02:53 pm'><img src='АВАТАР СОБЕСЕДНИКА' class='ava'><span> <img src='ССЫЛКА НА ФОТО'> </span></div>Код:<div class='right' mess-date='02:53 pm'><span> <img src='ССЫЛКА НА ФОТО'> </span> <img src='АВАТАР ВАШ' class='ava'></div>шаблон голосовых сообщений
Код:<div class='left' mess-date='02:53 pm'><img src='АВАТАР СОБЕСЕДНИКА' class='ava'><span><details><summary>показать расшифровку</summary> ТЕКСТ ГОЛОСОВОГО ПИШЕМ ТУТ </details></span></div>Код:<div class='right' mess-date='02:53 pm'><span><details><summary>показать расшифровку</summary> ТЕКСТ ГОЛОСОВОГО ПИШЕМ ТУТ </details></span> <img src='АВАТАР ВАШ' class='ava'></div>
[html]<div class="instagram-post">
<!-- Header -->
<div class="header">
<div class="profile-info">
<img src="Ссылка на изображение" alt="Profile Picture" class="profile-picture">
<span class="username">Никнейм для инсты</span>
<span class="location">Локация</span>
</div>
<div class="options">
</div>
</div>
<!-- Image -->
<div class="image-container">
<img src="Ссылка на изображение" alt="Post Image" class="post-image">
</div>
<!-- Actions -->
<div class="actions">
<div class="action-buttons">
<div class="like-button">
<span>Количество лайков likes</span>
</div>
<div class="comment-button"></div>
<div class="share-button"></div>
</div>
<div class="save-button"></div>
</div>
<!-- Caption -->
<div class="caption">
<p><span class="username">Никнейм для инсты</span> Текст под фото</p>
<a href="#" class="view-comments">View all Количество комментов comments</a>
</div>
</div>[/html]
[html]<div class="instagram-post">
<!-- Header -->
<div class="header">
<div class="profile-info">
<img src="Ссылка на изображение" alt="Profile Picture" class="profile-picture">
<span class="username">Никнейм для инсты</span>
<span class="location">Локация</span>
</div>
<div class="options">
</div>
</div>
<!-- Image -->
<div class="image-container">
<img src="Ссылка на изображение" alt="Post Image" class="post-image">
</div>
<!-- Actions -->
<div class="actions">
<div class="action-buttons">
<div class="like-button">
<span>Количество лайков likes</span>
</div>
<div class="comment-button"></div>
<div class="share-button"></div>
</div>
<div class="save-button"></div>
</div>
<!-- Caption -->
<div class="caption">
<p><span class="username">Никнейм для инсты</span> Текст под фото</p>
<a href="#" class="view-comments">View all Количество комментов comments</a>
</div>
</div>[/html]
