Любые решения на HTML, JS, php, canvas, svg....<br>
skype: politon81<br>
e-mail: oleg@polityko.ru<br>
<a href="https://toster.ru/user/politon">Профиль на toster.ru</a>
<div id="test">
<div class="avatar"><div id="closed" class="closed"></div>
<div id="ava" class="ava"></div>
<div class="fio">
Гавриил Гавриилович
</div>
<div class="thepost">
дЫрэктар
</div>
<div id="print">
печатает
</div>
</div>
<div id="messgeAll"class="contText">
<div id="dialog">
</div>
</div>
<div class="textinter">
<input id="message" type="text" class="inp" placeholder="Введите сообщение ">
<input id="messClcik" value="ОК" class="butt" type="button">
</div>
</div>
#test{
position:fixed;
width:230px;
height:300px;
border:5px solid #466991;
bottom:0;
right:5px;
border-radius:10px;
animation: show 2s 2s both ease-in-out;
overflow:hidden;
}
@keyframes show {
from {
height:0px;
}
to {
height:300px;
}
}
.avatar{
width:230px;
height:50px;
background:#466991;
color:#fff;
}
.ava{
padding-top:5px;
width:40px;
height:40px;
border-radius:50%;
background:url('http://a.deviantart.net/avatars/a/u/austin1297.jpg');
background-size:cover;
float:left;
margin-right:5px;
}
#print{
animation: printO 1s linear infinite;
font-size:12px;
padding:0;
display:none;
}
@keyframes printO {
from { background:#00FF11;}
to { background:#466991;}
}
.fio{
font-size:16px;
}
.thepost{
font-size:14px;
}
.closed{
}
.closed:before{
position:absolute;
content:"–";
font-weight:bold;
top:0;
right:5px;
font-size:25px;
cursor:pointer;
}
.contText{
position:relative;
height:225px;
word-wrap:break-word;
overflow:auto;
}
.dialog{
position:absolute;
bottom:0;
}
.owner,.user{
width:180px;
border-radius:10px;
padding:4px;
margin:2px 0;
}
.owner{
float:left;
background:#CEE7EC;
}
.user{
float:right;
background:#FFEEDE;
}
.textinter{
}
.inp{
float:left;
width:185px;
margin-left:1px;
border-radius:5px 0 0 5px;
}
.butt{
background:green;
border:solid 1px green;
border-radius:0 5px 5px 0;
color:#fff;
}
var dialog = document.getElementById("dialog");
var mess = document.createElement('div');
var text = "Доброго времени. Чем могу помочь?";
var textNode = document.createTextNode(text);
setTimeout(function() {
mess.appendChild(textNode);
dialog.appendChild(mess);
dialog.className = "owner";
}, 4000);
var butonSend = document.getElementById("messClcik");
var messgeAll = document.getElementById("messgeAll");
butonSend.onclick = function() {
var theDiv = document.createElement('div');
var userMessage = document.getElementById("message");
if(userMessage.value != ''){
document.getElementById('ava').style="background:url('http://vamotkrytka.ru/_ph/80/2/15311132.gif');background-size:cover; "
document.getElementById('print').style= "display:block";
theDiv.innerHTML = userMessage.value;
theDiv.className = "user";
messgeAll.appendChild(theDiv);
setTimeout(function() {
var answear = "привет, У Володи Путина спроси, да ну нах.., как так?, я ушел, завтра пиши, дорого, еп те, по клавишам не попадаю, ты бухой?, иди проспись пьянь!";
var arr = answear.split(', ');
var rand = Math.floor(Math.random() * arr.length);
var newOwner = document.createElement('div');
newOwner.innerHTML = arr[rand];
newOwner.className = "owner";
messgeAll.appendChild(newOwner);
document.getElementById('ava').style="";
document.getElementById('print').style= "display:none";
}, 4000);
return true;
}else{
return false;
}
}