chat.php

<?php
/**
 * Created by JetBrains PhpStorm.
 * User: rdal
 * Date: 15/7/15
 * Time: 23:23
 * To change this template use File | Settings | File Templates.
 */
$chatHTMLContents = <<<EOT
<style>
@charset "utf-8";
/* CSS Document */

/* ---------- GENERAL ---------- */

fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

h4, h5 {
	line-height: 1.5em;
	margin: 0;
}

input {
	border: 0;
	color: inherit;
    font-family: inherit;
    font-size: 100%;
    line-height: normal;
    margin: 0;
}

.clearfix { *zoom: 1; } /* For IE 6/7 */
.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}
.clearfix:after { clear: both; }

/* ---------- LIVE-CHAT ---------- */

#live-chat {
	bottom: 0;
	font-size: 12px;
	right: 24px;
	position: fixed;
	width: 300px;
}

#live-chat header {
	background: #293239;
	border-radius: 5px 5px 0 0;
	color: #fff;
	cursor: pointer;
	padding: 16px 24px;
}

#live-chat h4:before {
	background: #1a8a34;
	border-radius: 50%;
	content: "";
	display: inline-block;
	height: 8px;
	margin: 0 8px 0 0;
	width: 8px;
}

#live-chat h4 {
	font-size: 12px;
}

#live-chat h5 {
	font-size: 10px;
}

#live-chat form {
	padding: 24px;
}

#live-chat input[type="text"] {
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 8px;
	outline: none;
	width: 234px;
}

.chat-message-counter {
	background: #e62727;
	border: 1px solid #fff;
	border-radius: 50%;
	display: none;
	font-size: 12px;
	font-weight: bold;
	height: 28px;
	left: 0;
	line-height: 28px;
	margin: -15px 0 0 -15px;
	position: absolute;
	text-align: center;
	top: 0;
	width: 28px;
}

.chat-close {
	background: #1b2126;
	border-radius: 50%;
	color: #fff;
	display: block;
	float: right;
	font-size: 10px;
	height: 16px;
	line-height: 16px;
	margin: 2px 0 0 0;
	text-align: center;
	width: 16px;
}

.chat {
	background: #fff;
}

.chat-history {
	height: 252px;
	padding: 8px 24px;
	overflow-y: scroll;
}

.chat-message {
	margin: 16px 0;
}

.chat-message img {
	border-radius: 50%;
	float: left;
}

.chat-message-content {
	margin-left: 56px;
}

.chat-time {
	float: right;
	font-size: 10px;
}

.chat-feedback {
	font-style: italic;
	margin: 0 0 0 80px;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('#live-chat header').on('click', function() {

        $('.chat').slideToggle(300, 'swing');
        $('.chat-message-counter').fadeToggle(300, 'swing');

    });

    $('.chat-close').on('click', function(e) {

        e.preventDefault();
        $('#live-chat').fadeOut(300);

        var liveChat = $('#live-chat');
        var chat = $('.chat');
        var chatMessageCounter = $('.chat-message-counter');
        setTimeout(function(){
                liveChat.fadeIn(300);
                chat.slideToggle(300, 'swing');
                chatMessageCounter.fadeToggle(300, 'swing');
            },
            3000);

    });
});
</script>
<div id="live-chat">

    <header class="clearfix">

        <a href="#" class="chat-close">x</a>

        <h4>John Doe</h4>

        <span class="chat-message-counter">3</span>

    </header>

    <div class="chat">

        <div class="chat-history">

            <div class="chat-message clearfix">

                <img src="http://lorempixum.com/32/32/people" alt="" width="32" height="32" style="border: 0; display: block; height: auto; max-width: 100%;">

                <div class="chat-message-content clearfix">

                    <span class="chat-time">13:35</span>

                    <h5>John Doe</h5>

                    <p style="margin: 0;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, explicabo quasi ratione odio dolorum harum.</p>

                </div> <!-- end chat-message-content -->

            </div> <!-- end chat-message -->

            <hr style="background: #e9e9e9; border: 0; -moz-box-sizing: content-box; box-sizing: content-box; height: 1px; margin: 0; min-height: 1px;">

            <div class="chat-message clearfix">

                <img src="http://gravatar.com/avatar/2c0ad52fc5943b78d6abe069cc08f320?s=32" alt="" width="32" height="32" style="border: 0; display: block; height: auto; max-width: 100%;">

                <div class="chat-message-content clearfix">

                    <span class="chat-time">13:37</span>

                    <h5>Marco Biedermann</h5>

                    <p style=" margin: 0;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, nulla accusamus magni vel debitis numquam qui tempora rem voluptatem delectus!</p>

                </div> <!-- end chat-message-content -->

            </div> <!-- end chat-message -->

            <hr style="background: #e9e9e9; border: 0; -moz-box-sizing: content-box; box-sizing: content-box; height: 1px; margin: 0; min-height: 1px;">

            <div class="chat-message clearfix">

                <img src="http://lorempixum.com/32/32/people" alt="" width="32" height="32" style="border: 0; display: block; height: auto; max-width: 100%;">

                <div class="chat-message-content clearfix">

                    <span class="chat-time">13:38</span>

                    <h5>John Doe</h5>

                    <p style=" margin: 0;">Lorem ipsum dolor sit amet, consectetur adipisicing.</p>

                </div> <!-- end chat-message-content -->

            </div> <!-- end chat-message -->

            <hr style="background: #e9e9e9; border: 0; -moz-box-sizing: content-box; box-sizing: content-box; height: 1px; margin: 0; min-height: 1px;">

        </div> <!-- end chat-history -->

        <p class="chat-feedback">Your partner is typing…</p>

        <form action="#" method="post">

            <fieldset>

                <input type="text" placeholder="Type your message…" autofocus>
                <input type="hidden">

            </fieldset>

        </form>

    </div> <!-- end chat -->

</div> <!-- end live-chat -->

EOT;


echo $chatHTMLContents;
?>