США, ШТАТ ВЕРМОНТ, ОЛБУРГ 1 декабря 2017 — 1 января 2018

ХРОНОЛОГИЯ

— Но мне в детстве говорили, что к хорошим мальчикам монстры не приходят.
— Тебя обманули.
Вестник Олбурга Тут новостная лента города. Тут новостная лента города. Тут новостная лента города.

sleeping with ghosts

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » sleeping with ghosts » Teenage angst » Messenger: Айзек / Нейтан


Messenger: Айзек / Нейтан

Сообщений 41 страница 80 из 102

1

Нейтан
Код:
[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Simulation</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 20px;
    }
    .chat-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .message {
        display: flex;
        align-items: flex-end;
        margin-bottom: 10px;
    }
    .message.incoming {
        justify-content: flex-start;
    }
    .message.outgoing {
        justify-content: flex-end;
    }
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .message-content {
        max-width: 70%;
        background-color: #e0e0e0;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        word-wrap: break-word;
    }
    .message-content.outgoing {
        background-color: #d1ffc6;
    }
    .message-content:before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 10px;
        border: 10px solid transparent;
    }
    .incoming .message-content:before {
        left: -20px;
        border-right-color: #e0e0e0;
    }
    .outgoing .message-content:before {
        right: -20px;
        border-left-color: #d1ffc6;
    }
    .message-content img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
    }
    .message-time {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
        text-align: right;
    }
</style>
</head>
<body>
    <div class="chat-container">

        <div class="message outgoing">
            <div class="message-content outgoing">
                ТЕКСТ СООБЩЕНИЯ
                <div class="message-time">00/00/00 00:00 </div>
            </div>
            <img src="https://upforme.ru/uploads/001c/33/07/4/881940.png" alt="Avatar" class="avatar">
        </div>
    </div>
</body>
</html>
[/html]
Айзек
Код:
[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Simulation</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 20px;
    }
    .chat-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .message {
        display: flex;
        align-items: flex-end;
        margin-bottom: 10px;
    }
    .message.incoming {
        justify-content: flex-start;
    }
    .message.outgoing {
        justify-content: flex-end;
    }
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .message-content {
        max-width: 70%;
        background-color: #e0e0e0;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        word-wrap: break-word;
    }
    .message-content.outgoing {
        background-color: #d1ffc6;
    }
    .message-content:before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 10px;
        border: 10px solid transparent;
    }
    .incoming .message-content:before {
        left: -20px;
        border-right-color: #e0e0e0;
    }
    .outgoing .message-content:before {
        right: -20px;
        border-left-color: #d1ffc6;
    }
    .message-content img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
    }
    .message-time {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
        text-align: right;
    }
</style>
</head>
<body>
    <div class="chat-container">
        <div class="message incoming">
            <img src="https://upforme.ru/uploads/001c/33/07/4/314605.png" alt="Avatar" class="avatar">
            <div class="message-content">
                ТЕКСТ СООБЩЕНИЯ
                <div class="message-time">00/00/00 00:00</div>
            </div>
        </div>
        
    </div>
</body>
</html>
[/html]
Эмоджи

0

41

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Simulation</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 20px;
    }
    .chat-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .message {
        display: flex;
        align-items: flex-end;
        margin-bottom: 10px;
    }
    .message.incoming {
        justify-content: flex-start;
    }
    .message.outgoing {
        justify-content: flex-end;
    }
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .message-content {
        max-width: 70%;
        background-color: #e0e0e0;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        word-wrap: break-word;
    }
    .message-content.outgoing {
        background-color: #d1ffc6;
    }
    .message-content:before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 10px;
        border: 10px solid transparent;
    }
    .incoming .message-content:before {
        left: -20px;
        border-right-color: #e0e0e0;
    }
    .outgoing .message-content:before {
        right: -20px;
        border-left-color: #d1ffc6;
    }
    .message-content img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
    }
    .message-time {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
        text-align: right;
    }
</style>
</head>
<body>
    <div class="chat-container">
        <div class="message incoming">
            <img src="https://upforme.ru/uploads/001c/33/07/4/314605.png" alt="Avatar" class="avatar">
            <div class="message-content">
                выгонят и я сразу перестану вот увидишь
                <div class="message-time">16/10/17 12:22</div>
            </div>
        </div>
           </div>
</body>
</html>
[/html]

0

42

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Simulation</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 20px;
    }
    .chat-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .message {
        display: flex;
        align-items: flex-end;
        margin-bottom: 10px;
    }
    .message.incoming {
        justify-content: flex-start;
    }
    .message.outgoing {
        justify-content: flex-end;
    }
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .message-content {
        max-width: 70%;
        background-color: #e0e0e0;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        word-wrap: break-word;
    }
    .message-content.outgoing {
        background-color: #d1ffc6;
    }
    .message-content:before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 10px;
        border: 10px solid transparent;
    }
    .incoming .message-content:before {
        left: -20px;
        border-right-color: #e0e0e0;
    }
    .outgoing .message-content:before {
        right: -20px;
        border-left-color: #d1ffc6;
    }
    .message-content img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
    }
    .message-time {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
        text-align: right;
    }
</style>
</head>
<body>
    <div class="chat-container">

        <div class="message outgoing">
            <div class="message-content outgoing">
                ☠️
                <div class="message-time">16/10/17 12:23 </div>
            </div>
            <img src="https://upforme.ru/uploads/001c/33/07/4/881940.png" alt="Avatar" class="avatar">
        </div>
    </div>
</body>
</html>
[/html]

0

43

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Simulation</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 20px;
    }
    .chat-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .message {
        display: flex;
        align-items: flex-end;
        margin-bottom: 10px;
    }
    .message.incoming {
        justify-content: flex-start;
    }
    .message.outgoing {
        justify-content: flex-end;
    }
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .message-content {
        max-width: 70%;
        background-color: #e0e0e0;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        word-wrap: break-word;
    }
    .message-content.outgoing {
        background-color: #d1ffc6;
    }
    .message-content:before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 10px;
        border: 10px solid transparent;
    }
    .incoming .message-content:before {
        left: -20px;
        border-right-color: #e0e0e0;
    }
    .outgoing .message-content:before {
        right: -20px;
        border-left-color: #d1ffc6;
    }
    .message-content img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
    }
    .message-time {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
        text-align: right;
    }
</style>
</head>
<body>
    <div class="chat-container">
                <div class="message incoming">
            <img src="https://upforme.ru/uploads/001c/33/07/4/314605.png" alt="Avatar" class="avatar">
            <div class="message-content">
                ты как? я думал что сдохну прямо на парте 🤪
                <div class="message-time">16/10/17 17:19</div>
            </div>
        </div>
        <div class="message incoming">
            <img src="https://upforme.ru/uploads/001c/33/07/4/314605.png" alt="Avatar" class="avatar">
            <div class="message-content">
                только проснулся
                <div class="message-time">16/10/17 17:19</div>
            </div>
        </div>
           </div>
</body>
</html>
[/html]

0

44

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Simulation</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 20px;
    }
    .chat-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .message {
        display: flex;
        align-items: flex-end;
        margin-bottom: 10px;
    }
    .message.incoming {
        justify-content: flex-start;
    }
    .message.outgoing {
        justify-content: flex-end;
    }
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .message-content {
        max-width: 70%;
        background-color: #e0e0e0;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        word-wrap: break-word;
    }
    .message-content.outgoing {
        background-color: #d1ffc6;
    }
    .message-content:before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 10px;
        border: 10px solid transparent;
    }
    .incoming .message-content:before {
        left: -20px;
        border-right-color: #e0e0e0;
    }
    .outgoing .message-content:before {
        right: -20px;
        border-left-color: #d1ffc6;
    }
    .message-content img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
    }
    .message-time {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
        text-align: right;
    }
</style>
</head>
<body>
    <div class="chat-container">

        <div class="message outgoing">
            <div class="message-content outgoing">
                выпил три кофе и один энергетик, бодрит
                <div class="message-time">16/10/17 17:56 </div>
            </div>
            <img src="https://upforme.ru/uploads/001c/33/07/4/881940.png" alt="Avatar" class="avatar">
        </div>
    </div>
</body>
</html>
[/html]

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Simulation</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 20px;
    }
    .chat-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .message {
        display: flex;
        align-items: flex-end;
        margin-bottom: 10px;
    }
    .message.incoming {
        justify-content: flex-start;
    }
    .message.outgoing {
        justify-content: flex-end;
    }
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .message-content {
        max-width: 70%;
        background-color: #e0e0e0;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        word-wrap: break-word;
    }
    .message-content.outgoing {
        background-color: #d1ffc6;
    }
    .message-content:before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 10px;
        border: 10px solid transparent;
    }
    .incoming .message-content:before {
        left: -20px;
        border-right-color: #e0e0e0;
    }
    .outgoing .message-content:before {
        right: -20px;
        border-left-color: #d1ffc6;
    }
    .message-content img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
    }
    .message-time {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
        text-align: right;
    }
</style>
</head>
<body>
    <div class="chat-container">

        <div class="message outgoing">
            <div class="message-content outgoing">
                сон для слабаков
                <div class="message-time">16/10/17 17:56 </div>
            </div>
            <img src="https://upforme.ru/uploads/001c/33/07/4/881940.png" alt="Avatar" class="avatar">
        </div>
    </div>
</body>
</html>
[/html]

0

45

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Simulation</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 20px;
    }
    .chat-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .message {
        display: flex;
        align-items: flex-end;
        margin-bottom: 10px;
    }
    .message.incoming {
        justify-content: flex-start;
    }
    .message.outgoing {
        justify-content: flex-end;
    }
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .message-content {
        max-width: 70%;
        background-color: #e0e0e0;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        word-wrap: break-word;
    }
    .message-content.outgoing {
        background-color: #d1ffc6;
    }
    .message-content:before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 10px;
        border: 10px solid transparent;
    }
    .incoming .message-content:before {
        left: -20px;
        border-right-color: #e0e0e0;
    }
    .outgoing .message-content:before {
        right: -20px;
        border-left-color: #d1ffc6;
    }
    .message-content img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
    }
    .message-time {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
        text-align: right;
    }
</style>
</head>
<body>
    <div class="chat-container">
                <div class="message incoming">
            <img src="https://upforme.ru/uploads/001c/33/07/4/314605.png" alt="Avatar" class="avatar">
            <div class="message-content">
                земля тебе пухом братишка
                <div class="message-time">16/10/17 17:57</div>
            </div>
        </div>
        <div class="message incoming">
            <img src="https://upforme.ru/uploads/001c/33/07/4/314605.png" alt="Avatar" class="avatar">
            <div class="message-content">
                я начал смотреть что ты скинул
                <div class="message-time">16/10/17 17:58</div>
            </div>
        </div>
        <div class="message incoming">
            <img src="https://upforme.ru/uploads/001c/33/07/4/314605.png" alt="Avatar" class="avatar">
            <div class="message-content">
                не скучай пока
                <div class="message-time">16/10/17 17:58</div>
            </div>
        </div>
        <div class="message incoming">
            <img src="https://upforme.ru/uploads/001c/33/07/4/314605.png" alt="Avatar" class="avatar">
            <div class="message-content">
              <img src="https://upforme.ru/uploads/001c/33/07/4/454804.jpg">
                <div class="message-time">16/10/17 17:58</div>
            </div>
        </div>
           </div>
</body>
</html>
[/html]

0

46

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Simulation</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 20px;
    }
    .chat-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .message {
        display: flex;
        align-items: flex-end;
        margin-bottom: 10px;
    }
    .message.incoming {
        justify-content: flex-start;
    }
    .message.outgoing {
        justify-content: flex-end;
    }
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .message-content {
        max-width: 70%;
        background-color: #e0e0e0;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        word-wrap: break-word;
    }
    .message-content.outgoing {
        background-color: #d1ffc6;
    }
    .message-content:before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 10px;
        border: 10px solid transparent;
    }
    .incoming .message-content:before {
        left: -20px;
        border-right-color: #e0e0e0;
    }
    .outgoing .message-content:before {
        right: -20px;
        border-left-color: #d1ffc6;
    }
    .message-content img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
    }
    .message-time {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
        text-align: right;
    }
</style>
</head>
<body>
    <div class="chat-container">

        <div class="message outgoing">
            <div class="message-content outgoing">
                найди папку с названием Мисс Мистика и посмотри ее статью
                <div class="message-time">16/10/17 18:05 </div>
            </div>
            <img src="https://upforme.ru/uploads/001c/33/07/4/881940.png" alt="Avatar" class="avatar">
        </div>
    </div>
</body>
</html>
[/html]

0

47

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Simulation</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 20px;
    }
    .chat-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .message {
        display: flex;
        align-items: flex-end;
        margin-bottom: 10px;
    }
    .message.incoming {
        justify-content: flex-start;
    }
    .message.outgoing {
        justify-content: flex-end;
    }
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .message-content {
        max-width: 70%;
        background-color: #e0e0e0;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        word-wrap: break-word;
    }
    .message-content.outgoing {
        background-color: #d1ffc6;
    }
    .message-content:before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 10px;
        border: 10px solid transparent;
    }
    .incoming .message-content:before {
        left: -20px;
        border-right-color: #e0e0e0;
    }
    .outgoing .message-content:before {
        right: -20px;
        border-left-color: #d1ffc6;
    }
    .message-content img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
    }
    .message-time {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
        text-align: right;
    }
</style>
</head>
<body>
    <div class="chat-container">
        <div class="message incoming">
            <img src="https://upforme.ru/uploads/001c/33/07/4/314605.png" alt="Avatar" class="avatar">
            <div class="message-content">
                ну в общем получается что место смерти очень важно да
                <div class="message-time">16/10/17 20:22</div>
            </div>
        </div>
        <div class="message incoming">
            <img src="https://upforme.ru/uploads/001c/33/07/4/314605.png" alt="Avatar" class="avatar">
            <div class="message-content">
                я знаю где
                <div class="message-time">16/10/17 20:22</div>
            </div>
        </div>
           </div>
</body>
</html>
[/html]

0

48

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Simulation</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 20px;
    }
    .chat-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .message {
        display: flex;
        align-items: flex-end;
        margin-bottom: 10px;
    }
    .message.incoming {
        justify-content: flex-start;
    }
    .message.outgoing {
        justify-content: flex-end;
    }
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .message-content {
        max-width: 70%;
        background-color: #e0e0e0;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        word-wrap: break-word;
    }
    .message-content.outgoing {
        background-color: #d1ffc6;
    }
    .message-content:before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 10px;
        border: 10px solid transparent;
    }
    .incoming .message-content:before {
        left: -20px;
        border-right-color: #e0e0e0;
    }
    .outgoing .message-content:before {
        right: -20px;
        border-left-color: #d1ffc6;
    }
    .message-content img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
    }
    .message-time {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
        text-align: right;
    }
</style>
</head>
<body>
    <div class="chat-container">

        <div class="message outgoing">
            <div class="message-content outgoing">
                хочешь сходить туда?
                <div class="message-time">16/10/17 20:29 </div>
            </div>
            <img src="https://upforme.ru/uploads/001c/33/07/4/881940.png" alt="Avatar" class="avatar">
        </div>
    </div>
</body>
</html>
[/html]

0

49

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Simulation</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 20px;
    }
    .chat-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .message {
        display: flex;
        align-items: flex-end;
        margin-bottom: 10px;
    }
    .message.incoming {
        justify-content: flex-start;
    }
    .message.outgoing {
        justify-content: flex-end;
    }
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .message-content {
        max-width: 70%;
        background-color: #e0e0e0;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        word-wrap: break-word;
    }
    .message-content.outgoing {
        background-color: #d1ffc6;
    }
    .message-content:before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 10px;
        border: 10px solid transparent;
    }
    .incoming .message-content:before {
        left: -20px;
        border-right-color: #e0e0e0;
    }
    .outgoing .message-content:before {
        right: -20px;
        border-left-color: #d1ffc6;
    }
    .message-content img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
    }
    .message-time {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
        text-align: right;
    }
</style>
</head>
<body>
    <div class="chat-container">
        <div class="message incoming">
            <img src="https://upforme.ru/uploads/001c/33/07/4/314605.png" alt="Avatar" class="avatar">
            <div class="message-content">
                не хочу
                <div class="message-time">16/10/17 20:41</div>
            </div>
        </div>
        <div class="message incoming">
            <img src="https://upforme.ru/uploads/001c/33/07/4/314605.png" alt="Avatar" class="avatar">
            <div class="message-content">
                но если это сработает почему нет
                <div class="message-time">16/10/17 20:42</div>
            </div>
        </div>
           </div>
</body>
</html>
[/html]

0

50

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Simulation</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 20px;
    }
    .chat-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .message {
        display: flex;
        align-items: flex-end;
        margin-bottom: 10px;
    }
    .message.incoming {
        justify-content: flex-start;
    }
    .message.outgoing {
        justify-content: flex-end;
    }
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .message-content {
        max-width: 70%;
        background-color: #e0e0e0;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        word-wrap: break-word;
    }
    .message-content.outgoing {
        background-color: #d1ffc6;
    }
    .message-content:before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 10px;
        border: 10px solid transparent;
    }
    .incoming .message-content:before {
        left: -20px;
        border-right-color: #e0e0e0;
    }
    .outgoing .message-content:before {
        right: -20px;
        border-left-color: #d1ffc6;
    }
    .message-content img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
    }
    .message-time {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
        text-align: right;
    }
</style>
</head>
<body>
    <div class="chat-container">

        <div class="message outgoing">
            <div class="message-content outgoing">
                я могу сходить с тобой.. если хочешь, можно в эту пятницу где-то после школы
                <div class="message-time">16/10/17 20:44 </div>
            </div>
            <img src="https://upforme.ru/uploads/001c/33/07/4/881940.png" alt="Avatar" class="avatar">
        </div>
    </div>
</body>
</html>
[/html]

0

51

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Simulation</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 20px;
    }
    .chat-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .message {
        display: flex;
        align-items: flex-end;
        margin-bottom: 10px;
    }
    .message.incoming {
        justify-content: flex-start;
    }
    .message.outgoing {
        justify-content: flex-end;
    }
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .message-content {
        max-width: 70%;
        background-color: #e0e0e0;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        word-wrap: break-word;
    }
    .message-content.outgoing {
        background-color: #d1ffc6;
    }
    .message-content:before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 10px;
        border: 10px solid transparent;
    }
    .incoming .message-content:before {
        left: -20px;
        border-right-color: #e0e0e0;
    }
    .outgoing .message-content:before {
        right: -20px;
        border-left-color: #d1ffc6;
    }
    .message-content img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
    }
    .message-time {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
        text-align: right;
    }
</style>
</head>
<body>
    <div class="chat-container">
        <div class="message incoming">
            <img src="https://upforme.ru/uploads/001c/33/07/4/314605.png" alt="Avatar" class="avatar">
            <div class="message-content">
                ок
                <div class="message-time">16/10/17 20:45</div>
            </div>
        </div>
        <div class="message incoming">
            <img src="https://upforme.ru/uploads/001c/33/07/4/314605.png" alt="Avatar" class="avatar">
            <div class="message-content">
               что нужно взять с собой?
                <div class="message-time">16/10/17 20:47</div>
            </div>
        </div>
           </div>
</body>
</html>
[/html]

0

52

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Simulation</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 20px;
    }
    .chat-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .message {
        display: flex;
        align-items: flex-end;
        margin-bottom: 10px;
    }
    .message.incoming {
        justify-content: flex-start;
    }
    .message.outgoing {
        justify-content: flex-end;
    }
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .message-content {
        max-width: 70%;
        background-color: #e0e0e0;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        word-wrap: break-word;
    }
    .message-content.outgoing {
        background-color: #d1ffc6;
    }
    .message-content:before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 10px;
        border: 10px solid transparent;
    }
    .incoming .message-content:before {
        left: -20px;
        border-right-color: #e0e0e0;
    }
    .outgoing .message-content:before {
        right: -20px;
        border-left-color: #d1ffc6;
    }
    .message-content img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
    }
    .message-time {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
        text-align: right;
    }
</style>
</head>
<body>
    <div class="chat-container">

        <div class="message outgoing">
            <div class="message-content outgoing">
                пока не знаю, позже отпишу
                <div class="message-time">16/10/17 20:49 </div>
            </div>
            <img src="https://upforme.ru/uploads/001c/33/07/4/881940.png" alt="Avatar" class="avatar">
        </div>
    </div>
</body>
</html>
[/html]

0

53

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Simulation</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 20px;
    }
    .chat-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .message {
        display: flex;
        align-items: flex-end;
        margin-bottom: 10px;
    }
    .message.incoming {
        justify-content: flex-start;
    }
    .message.outgoing {
        justify-content: flex-end;
    }
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .message-content {
        max-width: 70%;
        background-color: #e0e0e0;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        word-wrap: break-word;
    }
    .message-content.outgoing {
        background-color: #d1ffc6;
    }
    .message-content:before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 10px;
        border: 10px solid transparent;
    }
    .incoming .message-content:before {
        left: -20px;
        border-right-color: #e0e0e0;
    }
    .outgoing .message-content:before {
        right: -20px;
        border-left-color: #d1ffc6;
    }
    .message-content img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
    }
    .message-time {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
        text-align: right;
    }
</style>
</head>
<body>
    <div class="chat-container">
        <div class="message incoming">
            <img src="https://upforme.ru/uploads/001c/33/07/4/314605.png" alt="Avatar" class="avatar">
            <div class="message-content">
                спасибо
                <div class="message-time">16/10/17 20:53</div>
            </div>
        </div>
        <div class="message incoming">
            <img src="https://upforme.ru/uploads/001c/33/07/4/314605.png" alt="Avatar" class="avatar">
            <div class="message-content">
              <img src="https://upforme.ru/uploads/001c/33/07/4/738376.jpg">
                <div class="message-time">16/10/17 22:57</div>
            </div>
        </div>
           </div>
</body>
</html>
[/html]

0

54

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Simulation</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 20px;
    }
    .chat-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .message {
        display: flex;
        align-items: flex-end;
        margin-bottom: 10px;
    }
    .message.incoming {
        justify-content: flex-start;
    }
    .message.outgoing {
        justify-content: flex-end;
    }
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .message-content {
        max-width: 70%;
        background-color: #e0e0e0;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        word-wrap: break-word;
    }
    .message-content.outgoing {
        background-color: #d1ffc6;
    }
    .message-content:before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 10px;
        border: 10px solid transparent;
    }
    .incoming .message-content:before {
        left: -20px;
        border-right-color: #e0e0e0;
    }
    .outgoing .message-content:before {
        right: -20px;
        border-left-color: #d1ffc6;
    }
    .message-content img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
    }
    .message-time {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
        text-align: right;
    }
</style>
</head>
<body>
    <div class="chat-container">

        <div class="message outgoing">
            <div class="message-content outgoing">
                у тебя бесконечный запас дурацких мемов, да?)
                <div class="message-time">16/10/17 23:08 </div>
            </div>
            <img src="https://upforme.ru/uploads/001c/33/07/4/881940.png" alt="Avatar" class="avatar">
        </div>
    </div>
</body>
</html>
[/html]

0

55

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Simulation</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 20px;
    }
    .chat-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .message {
        display: flex;
        align-items: flex-end;
        margin-bottom: 10px;
    }
    .message.incoming {
        justify-content: flex-start;
    }
    .message.outgoing {
        justify-content: flex-end;
    }
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .message-content {
        max-width: 70%;
        background-color: #e0e0e0;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        word-wrap: break-word;
    }
    .message-content.outgoing {
        background-color: #d1ffc6;
    }
    .message-content:before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 10px;
        border: 10px solid transparent;
    }
    .incoming .message-content:before {
        left: -20px;
        border-right-color: #e0e0e0;
    }
    .outgoing .message-content:before {
        right: -20px;
        border-left-color: #d1ffc6;
    }
    .message-content img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
    }
    .message-time {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
        text-align: right;
    }
</style>
</head>
<body>
    <div class="chat-container">
        <div class="message incoming">
            <img src="https://upforme.ru/uploads/001c/33/07/4/314605.png" alt="Avatar" class="avatar">
            <div class="message-content">
                йеп!
                <div class="message-time">16/10/17 23:33</div>
            </div>
        </div>
           </div>
</body>
</html>
[/html]

0

56

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Simulation</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 20px;
    }
    .chat-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .message {
        display: flex;
        align-items: flex-end;
        margin-bottom: 10px;
    }
    .message.incoming {
        justify-content: flex-start;
    }
    .message.outgoing {
        justify-content: flex-end;
    }
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .message-content {
        max-width: 70%;
        background-color: #e0e0e0;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        word-wrap: break-word;
    }
    .message-content.outgoing {
        background-color: #d1ffc6;
    }
    .message-content:before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 10px;
        border: 10px solid transparent;
    }
    .incoming .message-content:before {
        left: -20px;
        border-right-color: #e0e0e0;
    }
    .outgoing .message-content:before {
        right: -20px;
        border-left-color: #d1ffc6;
    }
    .message-content img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
    }
    .message-time {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
        text-align: right;
    }
</style>
</head>
<body>
    <div class="chat-container">

        <div class="message outgoing">
            <div class="message-content outgoing">
                эй
                <div class="message-time">18/10/17 01:51 </div>
            </div>
            <img src="https://upforme.ru/uploads/001c/33/07/4/881940.png" alt="Avatar" class="avatar">
        </div>
    </div>
</body>
</html>
[/html]

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Simulation</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 20px;
    }
    .chat-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .message {
        display: flex;
        align-items: flex-end;
        margin-bottom: 10px;
    }
    .message.incoming {
        justify-content: flex-start;
    }
    .message.outgoing {
        justify-content: flex-end;
    }
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .message-content {
        max-width: 70%;
        background-color: #e0e0e0;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        word-wrap: break-word;
    }
    .message-content.outgoing {
        background-color: #d1ffc6;
    }
    .message-content:before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 10px;
        border: 10px solid transparent;
    }
    .incoming .message-content:before {
        left: -20px;
        border-right-color: #e0e0e0;
    }
    .outgoing .message-content:before {
        right: -20px;
        border-left-color: #d1ffc6;
    }
    .message-content img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
    }
    .message-time {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
        text-align: right;
    }
</style>
</head>
<body>
    <div class="chat-container">

        <div class="message outgoing">
            <div class="message-content outgoing">
                что ты обычно делаешь, когда не можешь уснуть
                <div class="message-time">18/10/17 01:51 </div>
            </div>
            <img src="https://upforme.ru/uploads/001c/33/07/4/881940.png" alt="Avatar" class="avatar">
        </div>
    </div>
</body>
</html>
[/html]

0

57

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Simulation</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 20px;
    }
    .chat-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .message {
        display: flex;
        align-items: flex-end;
        margin-bottom: 10px;
    }
    .message.incoming {
        justify-content: flex-start;
    }
    .message.outgoing {
        justify-content: flex-end;
    }
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .message-content {
        max-width: 70%;
        background-color: #e0e0e0;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        word-wrap: break-word;
    }
    .message-content.outgoing {
        background-color: #d1ffc6;
    }
    .message-content:before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 10px;
        border: 10px solid transparent;
    }
    .incoming .message-content:before {
        left: -20px;
        border-right-color: #e0e0e0;
    }
    .outgoing .message-content:before {
        right: -20px;
        border-left-color: #d1ffc6;
    }
    .message-content img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
    }
    .message-time {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
        text-align: right;
    }
</style>
</head>
<body>
    <div class="chat-container">
        <div class="message incoming">
            <img src="https://upforme.ru/uploads/001c/33/07/4/314605.png" alt="Avatar" class="avatar">
            <div class="message-content">
                сохраняю мемы
                <div class="message-time">18/10/17 01:57</div>
            </div>
        </div>
           </div>
</body>
</html>
[/html]

0

58

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Simulation</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 20px;
    }
    .chat-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .message {
        display: flex;
        align-items: flex-end;
        margin-bottom: 10px;
    }
    .message.incoming {
        justify-content: flex-start;
    }
    .message.outgoing {
        justify-content: flex-end;
    }
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .message-content {
        max-width: 70%;
        background-color: #e0e0e0;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        word-wrap: break-word;
    }
    .message-content.outgoing {
        background-color: #d1ffc6;
    }
    .message-content:before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 10px;
        border: 10px solid transparent;
    }
    .incoming .message-content:before {
        left: -20px;
        border-right-color: #e0e0e0;
    }
    .outgoing .message-content:before {
        right: -20px;
        border-left-color: #d1ffc6;
    }
    .message-content img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
    }
    .message-time {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
        text-align: right;
    }
</style>
</head>
<body>
    <div class="chat-container">
        <div class="message incoming">
            <img src="https://upforme.ru/uploads/001c/33/07/4/314605.png" alt="Avatar" class="avatar">
            <div class="message-content">
                я ушел с последних двух уроков. выкрал ключи
                <div class="message-time">20/10/17 15:43</div>
            </div>
        </div>
        <div class="message incoming">
            <img src="https://upforme.ru/uploads/001c/33/07/4/314605.png" alt="Avatar" class="avatar">
            <div class="message-content">
                выдвигаюсь
                <div class="message-time">20/10/17 15:44</div>
            </div>
        </div>
        <div class="message incoming">
            <img src="https://upforme.ru/uploads/001c/33/07/4/314605.png" alt="Avatar" class="avatar">
            <div class="message-content">
                ты далеко?
                <div class="message-time">20/10/17 16:14</div>
            </div>
        </div>
        <div class="message incoming">
            <img src="https://upforme.ru/uploads/001c/33/07/4/314605.png" alt="Avatar" class="avatar">
            <div class="message-content">
                Берлингтон
                <div class="message-time">20/10/17 16:40</div>
            </div>
        </div>
        <div class="message incoming">
            <img src="https://upforme.ru/uploads/001c/33/07/4/314605.png" alt="Avatar" class="avatar">
            <div class="message-content">
                не круто
                <div class="message-time">20/10/17 17:22</div>
            </div>
        </div>
        <div class="message incoming">
            <img src="https://upforme.ru/uploads/001c/33/07/4/314605.png" alt="Avatar" class="avatar">
            <div class="message-content">
                я домой
                <div class="message-time">20/10/17 18:02</div>
            </div>
        </div>
           </div>
</body>
</html>
[/html]

0

59

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Simulation</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 20px;
    }
    .chat-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .message {
        display: flex;
        align-items: flex-end;
        margin-bottom: 10px;
    }
    .message.incoming {
        justify-content: flex-start;
    }
    .message.outgoing {
        justify-content: flex-end;
    }
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .message-content {
        max-width: 70%;
        background-color: #e0e0e0;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        word-wrap: break-word;
    }
    .message-content.outgoing {
        background-color: #d1ffc6;
    }
    .message-content:before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 10px;
        border: 10px solid transparent;
    }
    .incoming .message-content:before {
        left: -20px;
        border-right-color: #e0e0e0;
    }
    .outgoing .message-content:before {
        right: -20px;
        border-left-color: #d1ffc6;
    }
    .message-content img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
    }
    .message-time {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
        text-align: right;
    }
</style>
</head>
<body>
    <div class="chat-container">

        <div class="message outgoing">
            <div class="message-content outgoing">
                нет
                <div class="message-time">20/10/17 18:15</div>
            </div>
            <img src="https://upforme.ru/uploads/001c/33/07/4/881940.png" alt="Avatar" class="avatar">
        </div>
    </div>
</body>
</html>
[/html]

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Simulation</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 20px;
    }
    .chat-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .message {
        display: flex;
        align-items: flex-end;
        margin-bottom: 10px;
    }
    .message.incoming {
        justify-content: flex-start;
    }
    .message.outgoing {
        justify-content: flex-end;
    }
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .message-content {
        max-width: 70%;
        background-color: #e0e0e0;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        word-wrap: break-word;
    }
    .message-content.outgoing {
        background-color: #d1ffc6;
    }
    .message-content:before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 10px;
        border: 10px solid transparent;
    }
    .incoming .message-content:before {
        left: -20px;
        border-right-color: #e0e0e0;
    }
    .outgoing .message-content:before {
        right: -20px;
        border-left-color: #d1ffc6;
    }
    .message-content img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
    }
    .message-time {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
        text-align: right;
    }
</style>
</head>
<body>
    <div class="chat-container">

        <div class="message outgoing">
            <div class="message-content outgoing">
                я еду в трейлерный парк
                <div class="message-time">20/10/17 18:15</div>
            </div>
            <img src="https://upforme.ru/uploads/001c/33/07/4/881940.png" alt="Avatar" class="avatar">
        </div>
    </div>
</body>
</html>
[/html]

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Simulation</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 20px;
    }
    .chat-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .message {
        display: flex;
        align-items: flex-end;
        margin-bottom: 10px;
    }
    .message.incoming {
        justify-content: flex-start;
    }
    .message.outgoing {
        justify-content: flex-end;
    }
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .message-content {
        max-width: 70%;
        background-color: #e0e0e0;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        word-wrap: break-word;
    }
    .message-content.outgoing {
        background-color: #d1ffc6;
    }
    .message-content:before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 10px;
        border: 10px solid transparent;
    }
    .incoming .message-content:before {
        left: -20px;
        border-right-color: #e0e0e0;
    }
    .outgoing .message-content:before {
        right: -20px;
        border-left-color: #d1ffc6;
    }
    .message-content img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
    }
    .message-time {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
        text-align: right;
    }
</style>
</head>
<body>
    <div class="chat-container">

        <div class="message outgoing">
            <div class="message-content outgoing">
                прости прости прости
                <div class="message-time">20/10/17 18:15</div>
            </div>
            <img src="https://upforme.ru/uploads/001c/33/07/4/881940.png" alt="Avatar" class="avatar">
        </div>
    </div>
</body>
</html>
[/html]

0

60

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Simulation</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 20px;
    }
    .chat-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .message {
        display: flex;
        align-items: flex-end;
        margin-bottom: 10px;
    }
    .message.incoming {
        justify-content: flex-start;
    }
    .message.outgoing {
        justify-content: flex-end;
    }
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .message-content {
        max-width: 70%;
        background-color: #e0e0e0;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        word-wrap: break-word;
    }
    .message-content.outgoing {
        background-color: #d1ffc6;
    }
    .message-content:before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 10px;
        border: 10px solid transparent;
    }
    .incoming .message-content:before {
        left: -20px;
        border-right-color: #e0e0e0;
    }
    .outgoing .message-content:before {
        right: -20px;
        border-left-color: #d1ffc6;
    }
    .message-content img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
    }
    .message-time {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
        text-align: right;
    }
</style>
</head>
<body>
    <div class="chat-container">
        <div class="message incoming">
            <img src="https://upforme.ru/uploads/001c/33/07/4/314605.png" alt="Avatar" class="avatar">
            <div class="message-content">
                ты в порядке?
                <div class="message-time">20/10/17 18:15</div>
            </div>
        </div>
           </div>
</body>
</html>
[/html]

0

61

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Simulation</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 20px;
    }
    .chat-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .message {
        display: flex;
        align-items: flex-end;
        margin-bottom: 10px;
    }
    .message.incoming {
        justify-content: flex-start;
    }
    .message.outgoing {
        justify-content: flex-end;
    }
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .message-content {
        max-width: 70%;
        background-color: #e0e0e0;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        word-wrap: break-word;
    }
    .message-content.outgoing {
        background-color: #d1ffc6;
    }
    .message-content:before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 10px;
        border: 10px solid transparent;
    }
    .incoming .message-content:before {
        left: -20px;
        border-right-color: #e0e0e0;
    }
    .outgoing .message-content:before {
        right: -20px;
        border-left-color: #d1ffc6;
    }
    .message-content img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
    }
    .message-time {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
        text-align: right;
    }
</style>
</head>
<body>
    <div class="chat-container">

        <div class="message outgoing">
            <div class="message-content outgoing">
                Почти. Я скоро, не уезжай
                <div class="message-time">20/10/17 18:16</div>
            </div>
            <img src="https://upforme.ru/uploads/001c/33/07/4/881940.png" alt="Avatar" class="avatar">
        </div>
    </div>
</body>
</html>
[/html]

0

62

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Simulation</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 20px;
    }
    .chat-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .message {
        display: flex;
        align-items: flex-end;
        margin-bottom: 10px;
    }
    .message.incoming {
        justify-content: flex-start;
    }
    .message.outgoing {
        justify-content: flex-end;
    }
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .message-content {
        max-width: 70%;
        background-color: #e0e0e0;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        word-wrap: break-word;
    }
    .message-content.outgoing {
        background-color: #d1ffc6;
    }
    .message-content:before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 10px;
        border: 10px solid transparent;
    }
    .incoming .message-content:before {
        left: -20px;
        border-right-color: #e0e0e0;
    }
    .outgoing .message-content:before {
        right: -20px;
        border-left-color: #d1ffc6;
    }
    .message-content img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
    }
    .message-time {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
        text-align: right;
    }
</style>
</head>
<body>
    <div class="chat-container">

        <div class="message outgoing">
            <div class="message-content outgoing">
                Не могу уснуть. Хочется скипнуть время до завтра
                <div class="message-time">31/10/17 01:23 </div>
            </div>
            <img src="https://upforme.ru/uploads/001c/33/07/4/881940.png" alt="Avatar" class="avatar">
        </div>
    </div>
</body>
</html>
[/html]

0

63

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Simulation</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 20px;
    }
    .chat-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .message {
        display: flex;
        align-items: flex-end;
        margin-bottom: 10px;
    }
    .message.incoming {
        justify-content: flex-start;
    }
    .message.outgoing {
        justify-content: flex-end;
    }
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .message-content {
        max-width: 70%;
        background-color: #e0e0e0;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        word-wrap: break-word;
    }
    .message-content.outgoing {
        background-color: #d1ffc6;
    }
    .message-content:before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 10px;
        border: 10px solid transparent;
    }
    .incoming .message-content:before {
        left: -20px;
        border-right-color: #e0e0e0;
    }
    .outgoing .message-content:before {
        right: -20px;
        border-left-color: #d1ffc6;
    }
    .message-content img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
    }
    .message-time {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
        text-align: right;
    }
</style>
</head>
<body>
    <div class="chat-container">
        <div class="message incoming">
            <img src="https://upforme.ru/uploads/001c/33/07/4/314605.png" alt="Avatar" class="avatar">
            <div class="message-content">
               завтра уже наступило. я в твоем подвале 🔑
                <div class="message-time">31/10/17 05:25</div>
            </div>
        </div>
           </div>
</body>
</html>
[/html]

0

64

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Simulation</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 20px;
    }
    .chat-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .message {
        display: flex;
        align-items: flex-end;
        margin-bottom: 10px;
    }
    .message.incoming {
        justify-content: flex-start;
    }
    .message.outgoing {
        justify-content: flex-end;
    }
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .message-content {
        max-width: 70%;
        background-color: #e0e0e0;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        word-wrap: break-word;
    }
    .message-content.outgoing {
        background-color: #d1ffc6;
    }
    .message-content:before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 10px;
        border: 10px solid transparent;
    }
    .incoming .message-content:before {
        left: -20px;
        border-right-color: #e0e0e0;
    }
    .outgoing .message-content:before {
        right: -20px;
        border-left-color: #d1ffc6;
    }
    .message-content img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
    }
    .message-time {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
        text-align: right;
    }
</style>
</head>
<body>
    <div class="chat-container">

        <div class="message outgoing">
            <div class="message-content outgoing">
                ???
                <div class="message-time">31/10/17 06:21</div>
            </div>
            <img src="https://upforme.ru/uploads/001c/33/07/4/881940.png" alt="Avatar" class="avatar">
        </div>
    </div>
</body>
</html>
[/html]

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Simulation</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 20px;
    }
    .chat-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .message {
        display: flex;
        align-items: flex-end;
        margin-bottom: 10px;
    }
    .message.incoming {
        justify-content: flex-start;
    }
    .message.outgoing {
        justify-content: flex-end;
    }
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .message-content {
        max-width: 70%;
        background-color: #e0e0e0;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        word-wrap: break-word;
    }
    .message-content.outgoing {
        background-color: #d1ffc6;
    }
    .message-content:before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 10px;
        border: 10px solid transparent;
    }
    .incoming .message-content:before {
        left: -20px;
        border-right-color: #e0e0e0;
    }
    .outgoing .message-content:before {
        right: -20px;
        border-left-color: #d1ffc6;
    }
    .message-content img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
    }
    .message-time {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
        text-align: right;
    }
</style>
</head>
<body>
    <div class="chat-container">

        <div class="message outgoing">
            <div class="message-content outgoing">
                я иду
                <div class="message-time">31/10/17 06:21</div>
            </div>
            <img src="https://upforme.ru/uploads/001c/33/07/4/881940.png" alt="Avatar" class="avatar">
        </div>
    </div>
</body>
</html>
[/html]

0

65

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Simulation</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 20px;
    }
    .chat-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .message {
        display: flex;
        align-items: flex-end;
        margin-bottom: 10px;
    }
    .message.incoming {
        justify-content: flex-start;
    }
    .message.outgoing {
        justify-content: flex-end;
    }
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .message-content {
        max-width: 70%;
        background-color: #e0e0e0;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        word-wrap: break-word;
    }
    .message-content.outgoing {
        background-color: #d1ffc6;
    }
    .message-content:before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 10px;
        border: 10px solid transparent;
    }
    .incoming .message-content:before {
        left: -20px;
        border-right-color: #e0e0e0;
    }
    .outgoing .message-content:before {
        right: -20px;
        border-left-color: #d1ffc6;
    }
    .message-content img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
    }
    .message-time {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
        text-align: right;
    }
</style>
</head>
<body>
    <div class="chat-container">
        <div class="message incoming">
            <img src="https://upforme.ru/uploads/001c/33/07/4/314605.png" alt="Avatar" class="avatar">
            <div class="message-content">
                терри не смог открыть дом
                <div class="message-time">03/11/17 01:02</div>
            </div>   </div>
<div class="message incoming">
            <img src="https://upforme.ru/uploads/001c/33/07/4/314605.png" alt="Avatar" class="avatar">
            <div class="message-content">
                я тоже
                <div class="message-time">03/11/17 01:03</div>
            </div>
        </div>
       
    </div>
</body>
</html>
[/html]

0

66

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Simulation</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 20px;
    }
    .chat-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .message {
        display: flex;
        align-items: flex-end;
        margin-bottom: 10px;
    }
    .message.incoming {
        justify-content: flex-start;
    }
    .message.outgoing {
        justify-content: flex-end;
    }
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .message-content {
        max-width: 70%;
        background-color: #e0e0e0;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        word-wrap: break-word;
    }
    .message-content.outgoing {
        background-color: #d1ffc6;
    }
    .message-content:before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 10px;
        border: 10px solid transparent;
    }
    .incoming .message-content:before {
        left: -20px;
        border-right-color: #e0e0e0;
    }
    .outgoing .message-content:before {
        right: -20px;
        border-left-color: #d1ffc6;
    }
    .message-content img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
    }
    .message-time {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
        text-align: right;
    }
</style>
</head>
<body>
    <div class="chat-container">

        <div class="message outgoing">
            <div class="message-content outgoing">
                ну кайф
                <div class="message-time">03/11/17 01:29 </div>
            </div>
            <img src="https://upforme.ru/uploads/001c/33/07/4/881940.png" alt="Avatar" class="avatar">
        </div>
    </div>
</body>
</html>
[/html]

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Simulation</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 20px;
    }
    .chat-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .message {
        display: flex;
        align-items: flex-end;
        margin-bottom: 10px;
    }
    .message.incoming {
        justify-content: flex-start;
    }
    .message.outgoing {
        justify-content: flex-end;
    }
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .message-content {
        max-width: 70%;
        background-color: #e0e0e0;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        word-wrap: break-word;
    }
    .message-content.outgoing {
        background-color: #d1ffc6;
    }
    .message-content:before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 10px;
        border: 10px solid transparent;
    }
    .incoming .message-content:before {
        left: -20px;
        border-right-color: #e0e0e0;
    }
    .outgoing .message-content:before {
        right: -20px;
        border-left-color: #d1ffc6;
    }
    .message-content img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
    }
    .message-time {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
        text-align: right;
    }
</style>
</head>
<body>
    <div class="chat-container">

        <div class="message outgoing">
            <div class="message-content outgoing">
                ладно, пока это ни о чем, сегодня или завтра я схожу туда один
                <div class="message-time">03/11/17 01:31 </div>
            </div>
            <img src="https://upforme.ru/uploads/001c/33/07/4/881940.png" alt="Avatar" class="avatar">
        </div>
    </div>
</body>
</html>
[/html]

0

67

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Simulation</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 20px;
    }
    .chat-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .message {
        display: flex;
        align-items: flex-end;
        margin-bottom: 10px;
    }
    .message.incoming {
        justify-content: flex-start;
    }
    .message.outgoing {
        justify-content: flex-end;
    }
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .message-content {
        max-width: 70%;
        background-color: #e0e0e0;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        word-wrap: break-word;
    }
    .message-content.outgoing {
        background-color: #d1ffc6;
    }
    .message-content:before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 10px;
        border: 10px solid transparent;
    }
    .incoming .message-content:before {
        left: -20px;
        border-right-color: #e0e0e0;
    }
    .outgoing .message-content:before {
        right: -20px;
        border-left-color: #d1ffc6;
    }
    .message-content img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
    }
    .message-time {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
        text-align: right;
    }
</style>
</head>
<body>
    <div class="chat-container">
        <div class="message incoming">
            <img src="https://upforme.ru/uploads/001c/33/07/4/314605.png" alt="Avatar" class="avatar">
            <div class="message-content">
                если сработает не заходи внутрь
                <div class="message-time">03/11/17 01:34</div>
            </div>   </div>
<div class="message incoming">
            <img src="https://upforme.ru/uploads/001c/33/07/4/314605.png" alt="Avatar" class="avatar">
            <div class="message-content">
                обещай
                <div class="message-time">03/11/17 01:34</div>
            </div>
        </div>
       
    </div>
</body>
</html>
[/html]

0

68

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Simulation</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 20px;
    }
    .chat-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .message {
        display: flex;
        align-items: flex-end;
        margin-bottom: 10px;
    }
    .message.incoming {
        justify-content: flex-start;
    }
    .message.outgoing {
        justify-content: flex-end;
    }
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .message-content {
        max-width: 70%;
        background-color: #e0e0e0;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        word-wrap: break-word;
    }
    .message-content.outgoing {
        background-color: #d1ffc6;
    }
    .message-content:before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 10px;
        border: 10px solid transparent;
    }
    .incoming .message-content:before {
        left: -20px;
        border-right-color: #e0e0e0;
    }
    .outgoing .message-content:before {
        right: -20px;
        border-left-color: #d1ffc6;
    }
    .message-content img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
    }
    .message-time {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
        text-align: right;
    }
</style>
</head>
<body>
    <div class="chat-container">

        <div class="message outgoing">
            <div class="message-content outgoing">
                а что нам докажет просто открывшаяся дверь? то, что я руками дверь открою - это не паранормальность
                <div class="message-time">03/11/17 01:35 </div>
            </div>
            <img src="https://upforme.ru/uploads/001c/33/07/4/881940.png" alt="Avatar" class="avatar">
        </div>
    </div>
</body>
</html>
[/html]

0

69

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Simulation</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 20px;
    }
    .chat-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .message {
        display: flex;
        align-items: flex-end;
        margin-bottom: 10px;
    }
    .message.incoming {
        justify-content: flex-start;
    }
    .message.outgoing {
        justify-content: flex-end;
    }
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .message-content {
        max-width: 70%;
        background-color: #e0e0e0;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        word-wrap: break-word;
    }
    .message-content.outgoing {
        background-color: #d1ffc6;
    }
    .message-content:before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 10px;
        border: 10px solid transparent;
    }
    .incoming .message-content:before {
        left: -20px;
        border-right-color: #e0e0e0;
    }
    .outgoing .message-content:before {
        right: -20px;
        border-left-color: #d1ffc6;
    }
    .message-content img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
    }
    .message-time {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
        text-align: right;
    }
</style>
</head>
<body>
    <div class="chat-container">
        <div class="message incoming">
            <img src="https://upforme.ru/uploads/001c/33/07/4/314605.png" alt="Avatar" class="avatar">
            <div class="message-content">
                а я почему не открыл тогда
                <div class="message-time">03/11/17 01:35</div>
            </div>   </div>
<div class="message incoming">
            <img src="https://upforme.ru/uploads/001c/33/07/4/314605.png" alt="Avatar" class="avatar">
            <div class="message-content">
                не заходи блять за порог
                <div class="message-time">03/11/17 01:35</div>
            </div>
        </div>
        <div class="message incoming">
            <img src="https://upforme.ru/uploads/001c/33/07/4/314605.png" alt="Avatar" class="avatar">
            <div class="message-content">
               пожалуйста блять
                <div class="message-time">03/11/17 01:36</div>
            </div>
        </div>
    </div>
</body>
</html>
[/html]

0

70

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Simulation</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 20px;
    }
    .chat-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .message {
        display: flex;
        align-items: flex-end;
        margin-bottom: 10px;
    }
    .message.incoming {
        justify-content: flex-start;
    }
    .message.outgoing {
        justify-content: flex-end;
    }
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .message-content {
        max-width: 70%;
        background-color: #e0e0e0;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        word-wrap: break-word;
    }
    .message-content.outgoing {
        background-color: #d1ffc6;
    }
    .message-content:before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 10px;
        border: 10px solid transparent;
    }
    .incoming .message-content:before {
        left: -20px;
        border-right-color: #e0e0e0;
    }
    .outgoing .message-content:before {
        right: -20px;
        border-left-color: #d1ffc6;
    }
    .message-content img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
    }
    .message-time {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
        text-align: right;
    }
</style>
</head>
<body>
    <div class="chat-container">

        <div class="message outgoing">
            <div class="message-content outgoing">
                хрен знает, может у тебя проблемы с открыванием дверей 🙃
                <div class="message-time">03/11/17 01:37 </div>
            </div>
            <img src="https://upforme.ru/uploads/001c/33/07/4/881940.png" alt="Avatar" class="avatar">
        </div>
    </div>
</body>
</html>
[/html]

0

71

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Simulation</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 20px;
    }
    .chat-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .message {
        display: flex;
        align-items: flex-end;
        margin-bottom: 10px;
    }
    .message.incoming {
        justify-content: flex-start;
    }
    .message.outgoing {
        justify-content: flex-end;
    }
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .message-content {
        max-width: 70%;
        background-color: #e0e0e0;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        word-wrap: break-word;
    }
    .message-content.outgoing {
        background-color: #d1ffc6;
    }
    .message-content:before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 10px;
        border: 10px solid transparent;
    }
    .incoming .message-content:before {
        left: -20px;
        border-right-color: #e0e0e0;
    }
    .outgoing .message-content:before {
        right: -20px;
        border-left-color: #d1ffc6;
    }
    .message-content img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
    }
    .message-time {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
        text-align: right;
    }
</style>
</head>
<body>
    <div class="chat-container">
        <div class="message incoming">
            <img src="https://upforme.ru/uploads/001c/33/07/4/314605.png" alt="Avatar" class="avatar">
            <div class="message-content">
                издевайся да
                <div class="message-time">03/11/17 01:38</div>
            </div>   </div>
<div class="message incoming">
            <img src="https://upforme.ru/uploads/001c/33/07/4/314605.png" alt="Avatar" class="avatar">
            <div class="message-content">
                я серьезно
                <div class="message-time">03/11/17 01:38</div>
            </div>
        </div>
    </div>
</body>
</html>
[/html]

0

72

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Simulation</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 20px;
    }
    .chat-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .message {
        display: flex;
        align-items: flex-end;
        margin-bottom: 10px;
    }
    .message.incoming {
        justify-content: flex-start;
    }
    .message.outgoing {
        justify-content: flex-end;
    }
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .message-content {
        max-width: 70%;
        background-color: #e0e0e0;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        word-wrap: break-word;
    }
    .message-content.outgoing {
        background-color: #d1ffc6;
    }
    .message-content:before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 10px;
        border: 10px solid transparent;
    }
    .incoming .message-content:before {
        left: -20px;
        border-right-color: #e0e0e0;
    }
    .outgoing .message-content:before {
        right: -20px;
        border-left-color: #d1ffc6;
    }
    .message-content img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
    }
    .message-time {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
        text-align: right;
    }
</style>
</head>
<body>
    <div class="chat-container">

        <div class="message outgoing">
            <div class="message-content outgoing">
                я постараюсь, ок? но не заставляй меня врать тебе
                <div class="message-time">03/11/17 01:39 </div>
            </div>
            <img src="https://upforme.ru/uploads/001c/33/07/4/881940.png" alt="Avatar" class="avatar">
        </div>
    </div>
</body>
</html>
[/html]

0

73

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Simulation</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 20px;
    }
    .chat-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .message {
        display: flex;
        align-items: flex-end;
        margin-bottom: 10px;
    }
    .message.incoming {
        justify-content: flex-start;
    }
    .message.outgoing {
        justify-content: flex-end;
    }
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .message-content {
        max-width: 70%;
        background-color: #e0e0e0;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        word-wrap: break-word;
    }
    .message-content.outgoing {
        background-color: #d1ffc6;
    }
    .message-content:before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 10px;
        border: 10px solid transparent;
    }
    .incoming .message-content:before {
        left: -20px;
        border-right-color: #e0e0e0;
    }
    .outgoing .message-content:before {
        right: -20px;
        border-left-color: #d1ffc6;
    }
    .message-content img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
    }
    .message-time {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
        text-align: right;
    }
</style>
</head>
<body>
    <div class="chat-container">
        <div class="message incoming">
            <img src="https://upforme.ru/uploads/001c/33/07/4/314605.png" alt="Avatar" class="avatar">
            <div class="message-content">
               что там внутри может быть более привлекательным чем я снаружи ну
                <div class="message-time">03/11/17 01:41</div>
            </div>   </div>
    </div>
</body>
</html>
[/html]

0

74

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Simulation</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 20px;
    }
    .chat-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .message {
        display: flex;
        align-items: flex-end;
        margin-bottom: 10px;
    }
    .message.incoming {
        justify-content: flex-start;
    }
    .message.outgoing {
        justify-content: flex-end;
    }
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .message-content {
        max-width: 70%;
        background-color: #e0e0e0;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        word-wrap: break-word;
    }
    .message-content.outgoing {
        background-color: #d1ffc6;
    }
    .message-content:before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 10px;
        border: 10px solid transparent;
    }
    .incoming .message-content:before {
        left: -20px;
        border-right-color: #e0e0e0;
    }
    .outgoing .message-content:before {
        right: -20px;
        border-left-color: #d1ffc6;
    }
    .message-content img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
    }
    .message-time {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
        text-align: right;
    }
</style>
</head>
<body>
    <div class="chat-container">

        <div class="message outgoing">
            <div class="message-content outgoing">
                я не поддамся на эти провокации 😏
                <div class="message-time">03/11/17 01:42 </div>
            </div>
            <img src="https://upforme.ru/uploads/001c/33/07/4/881940.png" alt="Avatar" class="avatar">
        </div>
    </div>
</body>
</html>
[/html]

0

75

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Simulation</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 20px;
    }
    .chat-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .message {
        display: flex;
        align-items: flex-end;
        margin-bottom: 10px;
    }
    .message.incoming {
        justify-content: flex-start;
    }
    .message.outgoing {
        justify-content: flex-end;
    }
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .message-content {
        max-width: 70%;
        background-color: #e0e0e0;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        word-wrap: break-word;
    }
    .message-content.outgoing {
        background-color: #d1ffc6;
    }
    .message-content:before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 10px;
        border: 10px solid transparent;
    }
    .incoming .message-content:before {
        left: -20px;
        border-right-color: #e0e0e0;
    }
    .outgoing .message-content:before {
        right: -20px;
        border-left-color: #d1ffc6;
    }
    .message-content img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
    }
    .message-time {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
        text-align: right;
    }
</style>
</head>
<body>
    <div class="chat-container">
        <div class="message incoming">
            <img src="https://upforme.ru/uploads/001c/33/07/4/314605.png" alt="Avatar" class="avatar">
            <div class="message-content">
               я для тебя шутка какаято значит провокация ну ну
                <div class="message-time">03/11/17 01:44</div>
            </div>   </div>
        <div class="message incoming">
            <img src="https://upforme.ru/uploads/001c/33/07/4/314605.png" alt="Avatar" class="avatar">
            <div class="message-content">
              попробуй мне потом сказать айк не надо
                <div class="message-time">03/11/17 01:44</div>
            </div>   </div>
    </div>
</body>
</html>
[/html]

0

76

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Simulation</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 20px;
    }
    .chat-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .message {
        display: flex;
        align-items: flex-end;
        margin-bottom: 10px;
    }
    .message.incoming {
        justify-content: flex-start;
    }
    .message.outgoing {
        justify-content: flex-end;
    }
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .message-content {
        max-width: 70%;
        background-color: #e0e0e0;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        word-wrap: break-word;
    }
    .message-content.outgoing {
        background-color: #d1ffc6;
    }
    .message-content:before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 10px;
        border: 10px solid transparent;
    }
    .incoming .message-content:before {
        left: -20px;
        border-right-color: #e0e0e0;
    }
    .outgoing .message-content:before {
        right: -20px;
        border-left-color: #d1ffc6;
    }
    .message-content img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
    }
    .message-time {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
        text-align: right;
    }
</style>
</head>
<body>
    <div class="chat-container">
          <div class="message incoming">
            <img src="https://upforme.ru/uploads/001c/33/07/4/314605.png" alt="Avatar" class="avatar">
            <div class="message-content">
               берлингтон
                <div class="message-time">04/11/17 02:09</div>
            </div>
        </div>
  <div class="message incoming">
            <img src="https://upforme.ru/uploads/001c/33/07/4/314605.png" alt="Avatar" class="avatar">
            <div class="message-content">
               подари мне это на рождество
                <div class="message-time">04/11/17 02:10</div>
            </div>
        </div>
  <div class="message incoming">
            <img src="https://upforme.ru/uploads/001c/33/07/4/314605.png" alt="Avatar" class="avatar">
            <div class="message-content">
              <a href="https://upforme.ru/uploads/001c/33/07/4/461581.jpg">[explore the millions of goods]</a>
                <div class="message-time">04/11/17 02:10</div>
            </div>
        </div>
        <div class="message incoming">
            <img src="https://upforme.ru/uploads/001c/33/07/4/314605.png" alt="Avatar" class="avatar">
            <div class="message-content">
              ПОЖАЛСТА
                <div class="message-time">04/11/17 02:12/div>
            </div>
        </div>
    </div>
</body>
</html>
[/html]

0

77

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Simulation</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 20px;
    }
    .chat-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .message {
        display: flex;
        align-items: flex-end;
        margin-bottom: 10px;
    }
    .message.incoming {
        justify-content: flex-start;
    }
    .message.outgoing {
        justify-content: flex-end;
    }
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .message-content {
        max-width: 70%;
        background-color: #e0e0e0;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        word-wrap: break-word;
    }
    .message-content.outgoing {
        background-color: #d1ffc6;
    }
    .message-content:before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 10px;
        border: 10px solid transparent;
    }
    .incoming .message-content:before {
        left: -20px;
        border-right-color: #e0e0e0;
    }
    .outgoing .message-content:before {
        right: -20px;
        border-left-color: #d1ffc6;
    }
    .message-content img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
    }
    .message-time {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
        text-align: right;
    }
</style>
</head>
<body>
    <div class="chat-container">

        <div class="message outgoing">
            <div class="message-content outgoing">
                  <img src="https://upforme.ru/uploads/001c/33/07/3/31763.jpg">
                <div class="message-time">05/11/17 08:43 </div>
            </div>
            <img src="https://upforme.ru/uploads/001c/33/07/4/881940.png" alt="Avatar" class="avatar">
        </div>
    </div>
</body>
</html>
[/html]

+1

78

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Simulation</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 20px;
    }
    .chat-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .message {
        display: flex;
        align-items: flex-end;
        margin-bottom: 10px;
    }
    .message.incoming {
        justify-content: flex-start;
    }
    .message.outgoing {
        justify-content: flex-end;
    }
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .message-content {
        max-width: 70%;
        background-color: #e0e0e0;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        word-wrap: break-word;
    }
    .message-content.outgoing {
        background-color: #d1ffc6;
    }
    .message-content:before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 10px;
        border: 10px solid transparent;
    }
    .incoming .message-content:before {
        left: -20px;
        border-right-color: #e0e0e0;
    }
    .outgoing .message-content:before {
        right: -20px;
        border-left-color: #d1ffc6;
    }
    .message-content img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
    }
    .message-time {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
        text-align: right;
    }
</style>
</head>
<body>
    <div class="chat-container">

        <div class="message outgoing">
            <div class="message-content outgoing">
                Ты где??? Напиши срочно
                <div class="message-time">11/11/17 17:05 </div>
            </div>
            <img src="https://upforme.ru/uploads/001c/33/07/4/881940.png" alt="Avatar" class="avatar">
        </div>
    </div>
</body>
</html>
[/html]

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Simulation</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 20px;
    }
    .chat-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .message {
        display: flex;
        align-items: flex-end;
        margin-bottom: 10px;
    }
    .message.incoming {
        justify-content: flex-start;
    }
    .message.outgoing {
        justify-content: flex-end;
    }
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .message-content {
        max-width: 70%;
        background-color: #e0e0e0;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        word-wrap: break-word;
    }
    .message-content.outgoing {
        background-color: #d1ffc6;
    }
    .message-content:before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 10px;
        border: 10px solid transparent;
    }
    .incoming .message-content:before {
        left: -20px;
        border-right-color: #e0e0e0;
    }
    .outgoing .message-content:before {
        right: -20px;
        border-left-color: #d1ffc6;
    }
    .message-content img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
    }
    .message-time {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
        text-align: right;
    }
</style>
</head>
<body>
    <div class="chat-container">

        <div class="message outgoing">
            <div class="message-content outgoing">
                Айк, ау
                <div class="message-time">11/11/17 17:05 </div>
            </div>
            <img src="https://upforme.ru/uploads/001c/33/07/4/881940.png" alt="Avatar" class="avatar">
        </div>
    </div>
</body>
</html>
[/html]

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Simulation</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 20px;
    }
    .chat-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .message {
        display: flex;
        align-items: flex-end;
        margin-bottom: 10px;
    }
    .message.incoming {
        justify-content: flex-start;
    }
    .message.outgoing {
        justify-content: flex-end;
    }
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .message-content {
        max-width: 70%;
        background-color: #e0e0e0;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        word-wrap: break-word;
    }
    .message-content.outgoing {
        background-color: #d1ffc6;
    }
    .message-content:before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 10px;
        border: 10px solid transparent;
    }
    .incoming .message-content:before {
        left: -20px;
        border-right-color: #e0e0e0;
    }
    .outgoing .message-content:before {
        right: -20px;
        border-left-color: #d1ffc6;
    }
    .message-content img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
    }
    .message-time {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
        text-align: right;
    }
</style>
</head>
<body>
    <div class="chat-container">

        <div class="message outgoing">
            <div class="message-content outgoing">
                Напиши быстрее, я подойду или пойдем друг другу навстречу
                <div class="message-time">11/11/17 17:07 </div>
            </div>
            <img src="https://upforme.ru/uploads/001c/33/07/4/881940.png" alt="Avatar" class="avatar">
        </div>
    </div>
</body>
</html>
[/html]

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Simulation</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 20px;
    }
    .chat-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .message {
        display: flex;
        align-items: flex-end;
        margin-bottom: 10px;
    }
    .message.incoming {
        justify-content: flex-start;
    }
    .message.outgoing {
        justify-content: flex-end;
    }
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .message-content {
        max-width: 70%;
        background-color: #e0e0e0;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        word-wrap: break-word;
    }
    .message-content.outgoing {
        background-color: #d1ffc6;
    }
    .message-content:before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 10px;
        border: 10px solid transparent;
    }
    .incoming .message-content:before {
        left: -20px;
        border-right-color: #e0e0e0;
    }
    .outgoing .message-content:before {
        right: -20px;
        border-left-color: #d1ffc6;
    }
    .message-content img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
    }
    .message-time {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
        text-align: right;
    }
</style>
</head>
<body>
    <div class="chat-container">

        <div class="message outgoing">
            <div class="message-content outgoing">
                Ты на вечеринку пошел в итоге?
                <div class="message-time">11/11/17 17:08 </div>
            </div>
            <img src="https://upforme.ru/uploads/001c/33/07/4/881940.png" alt="Avatar" class="avatar">
        </div>
    </div>
</body>
</html>
[/html]

0

79

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Simulation</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 20px;
    }
    .chat-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .message {
        display: flex;
        align-items: flex-end;
        margin-bottom: 10px;
    }
    .message.incoming {
        justify-content: flex-start;
    }
    .message.outgoing {
        justify-content: flex-end;
    }
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .message-content {
        max-width: 70%;
        background-color: #e0e0e0;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        word-wrap: break-word;
    }
    .message-content.outgoing {
        background-color: #d1ffc6;
    }
    .message-content:before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 10px;
        border: 10px solid transparent;
    }
    .incoming .message-content:before {
        left: -20px;
        border-right-color: #e0e0e0;
    }
    .outgoing .message-content:before {
        right: -20px;
        border-left-color: #d1ffc6;
    }
    .message-content img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
    }
    .message-time {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
        text-align: right;
    }
</style>
</head>
<body>
    <div class="chat-container">
        <div class="message incoming">
            <img src="https://upforme.ru/uploads/001c/33/07/4/314605.png" alt="Avatar" class="avatar">
            <div class="message-content">
               я дома собираюсь пойти
                <div class="message-time">11/11/17 18:14</div>
            </div>   </div>
        <div class="message incoming">
            <img src="https://upforme.ru/uploads/001c/33/07/4/314605.png" alt="Avatar" class="avatar">
            <div class="message-content">
              приходи?
                <div class="message-time">11/11/17 18:14</div>
            </div>   </div>
    </div>
</body>
</html>
[/html]

0

80

[html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Simulation</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 20px;
    }
    .chat-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .message {
        display: flex;
        align-items: flex-end;
        margin-bottom: 10px;
    }
    .message.incoming {
        justify-content: flex-start;
    }
    .message.outgoing {
        justify-content: flex-end;
    }
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .message-content {
        max-width: 70%;
        background-color: #e0e0e0;
        padding: 10px;
        border-radius: 10px;
        position: relative;
        word-wrap: break-word;
    }
    .message-content.outgoing {
        background-color: #d1ffc6;
    }
    .message-content:before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: 10px;
        border: 10px solid transparent;
    }
    .incoming .message-content:before {
        left: -20px;
        border-right-color: #e0e0e0;
    }
    .outgoing .message-content:before {
        right: -20px;
        border-left-color: #d1ffc6;
    }
    .message-content img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
    }
    .message-time {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
        text-align: right;
    }
</style>
</head>
<body>
    <div class="chat-container">

        <div class="message outgoing">
            <div class="message-content outgoing">
                Жди меня там, я приду
                <div class="message-time">11/11/17 18:15 </div>
            </div>
            <img src="https://upforme.ru/uploads/001c/33/07/4/881940.png" alt="Avatar" class="avatar">
        </div>
    </div>
</body>
</html>
[/html]

0


Вы здесь » sleeping with ghosts » Teenage angst » Messenger: Айзек / Нейтан


Рейтинг форумов | Создать форум бесплатно