Здравствуйте! Сегодня я решил поделиться с вами очередной старенькой своей работай Мини чат в тёмном стили который уже давно пылиться на моём пк всё не как не мог собраться силами что бы установить его на тестовый сайт и настроить под ucoz так как по началу это просто был псд макет который я рисовал для своего форума
Пару слов о мине чате
Дизайн выполнен в тёмном стиля присутствует адаптация под мобильные телефоны сам блок можно свернуть по нажатию на верхний блок с надписью наш мини чат но сразу скажу что не делал запоминание оставлю это для вас! так же разместил кнопку для управления сообщениями в виде шестерёнки в шапке чата которая видна будет только администратору по этому сильно не заморачивался с её дизайном ну и по поводу вида материалов чата в нём я разместил две кнопочки для ответа и цитирования так же сделал вывод уведомления о том что нужно выделить текст в красном блоке над формой ввода текста так же добавил отправку сообщений по нажатию на Enter естественно сделал и очистку поля ввода при отправке в обоих случияк ну и наверное хватит болтать давайте посмотрим скриншоты
Скриншот
Пару примеров в картинках что в итоге вы получите если решите всё таки ставить его себе на сайт
Полный вид
Мобильный вид
Вид уведомления о том что не выделен текст при нажатие на кнопку цитата
Ну и если вас заинтересовал мой вариант для мини чата то предлагаю приступить к его установке на ваш сайт на ucoz
Установка
Для начало давайте зайдём в админ панель затем управление дизайном и там найдём мини чат - вид материалов и установит туда вместо того что там у вас есть код что представлен ниже
Код
<?if($NUMBER$='1')?>
<style type="text/css">.mDetails{display:none;}</style>
<script type="text/javascript">
function getSel(i){var d=document,a=d.getElementById(i),w=window;return (a&&a.value)?a.value.substring(a.selectionStart,a.selectionEnd):w.getSelection?w.getSelection():d.getSelection?d.getSelection():d.selection?d.selection.createRange().text:false}
function chatInsert(a,b){if(b!=""){a=a.replace(/[\[\]]/g,"|");chatPaste("[quote="+a+"]"+b+"[/quote]\n",0)}else{
$("#inf_bc_off").text('Выделите текст для цитирования');
setTimeout(function(){$('#inf_bc_off').fadeIn('fast')});
setTimeout(function(){$('#inf_bc_off').fadeOut('fast')},4000);
}};
function chatPaste(a,b){
var d=parent.window.document,frm=d.getElementById('MCaddFrm');
if((document.selection)&&(b)){frm.mcmessage.focus();frm.document.selection.createRange().text=a}
else frm.mcmessage.value+=a};
if(parent.window.document.getElementById('mchatMsgF')){document.write('<style type="text/css">.mDetails{display:inline-block;}</style>');}
</script>
<div id="inf_bc_off"></div>
<?endif?>
<div class="waakchatvid">
<div class="waakchatl">
<a href="$PROFILE_URL$">
<div class="imgwaakchat"><?if($AVATAR_URL$)?><img src="$AVATAR_URL$" alt="$USERNAME$" width="28" /><?else?><img src="Нет аватара"><?endif?></div>
<span class="userwaakchat">
<b>$USERNAME$ </b>
<span>$DATE$ $TIME$</span>
</span>
<div class="clr"></div>
</a>
</div>
<div class="waakchatc">
<div class="waakchatvtssage">
$MESSAGE$
</div>
</div>
<div class="waakchatr">
<span class="mDetails">
<a href="javascrip://" title="Выделите текст для цитирования" onclick="chatInsert('<?if($USERNAME$)?>$USERNAME$<?else?>$NAME$<?endif?>',getSel());"><i class="fa fa-quote-right" aria-hidden="true"></i></a></span>
<span class=""><a href="javascript:void('Apply to')" onclick="parent.window.document.getElementById('mchatMsgF').focus();parent.window.document.getElementById('mchatMsgF').value+='[b]$NAME$[/b], ';return false;" title="Ответить на сообщение $NAME$" ><i class="fa fa-pencil" aria-hidden="true"></i></a></span>
</div>
</div>
Отлично не забываем поменять в коде выше надпись
Нет аватара на ссылку которая будет выводиться если у пользователя нет аватара ну и конечно жмём кнопку сохранить!
Теперь переходим в пункт Мини чат - форма добавления сообщений и там заменяем весь код на тот что представлен ниже
Код
</div>
<div class="waakchatform">
<?if($GROUP_ID$=="0")?>Доступ закрыт <a href="$LOGIN_LINK$">"ВОЙТИ"</a><?else?> <div align="left">
<textarea name="mcmessage" class="mchat" id="mchatMsgF" title="Сообщение" onkeyup="countMessLength();" onfocus="countMessLength();" style="height:40px;width:100%;resize:none;" placeholder="Написать..." onkeypress="if(event.keyCode==10||(event.keyCode==13)) sbtFrmMC991()"></textarea>
</div>
<span class="waakcomformsmiless">
<a href="javascript://" onclick="mchatSmailWebo4kaRu();" title="Вставить смайл"><i class="fa fa-smile-o" aria-hidden="true"></i></a>
</span>
<input type="submit" onclick="messages();setTimeout(function(){messages()},500)" value="ОК" class="mchat2" id="mchatBtn" />
<input style="display:none;" id="mchatAjax" type="button" value="ОК" class="mchat2" disabled />
<?endif?>
</div>
Отлично не забываем сохранить!
Так же забыл сказать что кнопка для вызова смайлов не будет работать так как я не знаю как у вас работают смайлы на сайте и по этому просто приготовил под них место вам останется только повесить на неё нужное событие.
Продолжим установку теперь нам нужно перейти на ту страницу где будет стоять чат у вас и в нужное место разместить код что представлен ниже
Код
<div class="waaksitibc">
<?if($GROUP_ID$="4")?> <a href="javascript://" rel="nofollow" onclick="window.open('/mchat/0-1', 'mchatCtrl', 'scrollbars=1,width=550,height=550,left=0,top=0'); return false;" title="Настройка" class="uvchat_uss uvchat_ussadmin" ><i class="fa fa-cog" aria-hidden="true"></i></a><?endif?>
<div class="waakchattopbc waakchatssh" onclick="$('.waakchatbc').slideToggle('slow');">
<i class="fa fa-comments-o" aria-hidden="true"></i>
<b>Наш чат</b>
<span>Живое общение</span>
<div class="waakchatss">
<span>
<i class="fa fa-angle-up waakchatok" aria-hidden="true"></i>
<i class="fa fa-angle-down waakchatno" aria-hidden="true"></i>
</span>
</div>
</div>
<div class="waakchatbc">
<div class="waakchat">
<div class="waakchatcontent">
$CHAT_BOX$
</div>
</div>
</div>
Отлично не забываем сохранить!
Ну и вот пришло время для добавления стилей мини чата к себе на сайт а для это вам нужно перейти в раздел Таблица стилей css и разместить туда в самый конец кодо что там у вас уже есть код что представлен ниже удалять нечего не нужно!
Таблица стилей
Код
/* chatwaak */
.waakchatss span {
display: block;
position: absolute;
right: 70px;
top: 0;
color: #8F95A3;
cursor: pointer;
}
.waakchatss i {
font-size: 36px;
font-weight: bold;
}
.waakchatno {display: none;}
.dopwaakchatok {display: none;}
.dopwaakchatno {display: block;}
.waakchatbc {
background: #191a1f;
}
.waakchatvid {
background: rgba(0, 0, 0, .4);
display: flex ;
margin: 10px 5px;
}
.waakchatvid a {text-decoration: none;}
.waakchattopbc {
background: #000;
padding: 15px 20px;
border-left: 5px solid #0f741b;
position: relative;
padding-left: 80px;
cursor: pointer;
}
.waakchattopbc i {
color: #0f741b;
font-size: 35px;
margin-right: 20px;
position: absolute;
top: 12px;
left: 20px;
}
.waakchattopbc b {
font-size: 16px;
color: #FFF;
}
.waakchattopbc span {
font-size: 13px;
color: #7e7e7e;
display: block;
}
.waakchatl {
min-width: 170px;
padding: 10px;
}
.waakchatc {
width: calc(100% - 270px);
padding: 10px;
}
.waakchatr {
min-width: 100px;
padding: 10px;
}
.waakchatl a {display: block;}
.imgwaakchat {
width: 30px;
float: left;
margin-right: 15px;
}
.imgwaakchat img {
width: 30px;
height: 30px;
border-radius: 100%;
object-fit: cover;
}
.userwaakchat b {
display: block;
font-size: 13px;
color: #ccc;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.waakchatl a:hover b {
color: #0f741b;
}
.userwaakchat span {
font-size: 10px;
color: #686868;
}
.waakchatvtssage {
color: #7e7e7e;
font-size: 12px;
line-height: 20px;
}
.waakchatvtssage b {
color: #c7c7c7;
}
.waakchatvtssage a {
color: #0f741b;
}
.waakchatvtssage a:hover {
text-decoration: underline;
}
.waakchatr span {
width: 30px;
height: 30px;
display: inline-block;
line-height: 30px;
text-align: center;
color: rgba(255,255,255,.5);
background: rgba(0, 0, 0, .3);
border-radius: 100%;
}
.waakchatr span a {
display: block;
color: rgba(255,255,255,.5);
font-size: 11px;
}
.waakchatr span:hover {
color: rgba(255,255,255,.8);
background: #0f741b;
}
.waakchatr span:hover a {
color: rgba(255,255,255,.8);
}
.waakchatform {
position: relative;
padding: 5px 15px;
background: rgba(0, 0, 0, .4);
}
.waakcomformsmiless a {
position: absolute;
z-index: 2;
top: 22px;
left: 30px;
color: rgba(255,255,255,.4);
font-size: 20px;
}
.waakcomformsmiless a:hover {color: #0f741b;}
.mchat {
padding: 10px 15px;
padding-left: 50px;
background: #000;
border: none;
border-radius: 20px;
color: #0f741b;
font-size: 13px;
margin-right: 50px;
width: calc(100% - 50px)!important;
line-height: normal;
}
#mchatBtn {
border: none;
border-radius: 100%;
width: 30px!important;
height: 30px;
line-height: 32px;
font-size: 12px;
background: #0f741b;
color: #FFF;
cursor: pointer;
position: absolute;
top: 18px;
right: 20px;
}
.waakchat {
overflow-y: auto;
overflow-x: hidden;
background: rgba(0, 0, 0, .2);
}
.waakchatcontent {
padding: 0 10px;
}
::-webkit-scrollbar {
width: 4px;
height: 4px;
}
::-webkit-scrollbar-thumb {
background-color: rgb(241 241 241);
border-radius: 2px;
border: 2px solid hsl(127deg 100% 31%);
}
::-webkit-scrollbar-track {
background: hsla(0,0%,50.2%,.1);
}
::selection {
text-shadow: none;
background: #aaffaa;
}
.mchat::-webkit-input-placeholder {
color: rgba(255,255,255,.4);
}
.mchat::-moz-placeholder {
color: rgba(255,255,255,.4);
}
.mchat:-ms-input-placeholder {
color: rgba(255,255,255,.4);
}
.mchat::-ms-input-placeholder {
color: #F0BBD7;
}
body.mchat-body {
background: #141519;
}
input#mchatAjax {
position: absolute;
right: 23px;
top: 23px;
}
.mDetails a {
font-size: 11px;
color: #434343;
padding: 0 5px;
line-height: 25px;
}
#inf_bc_off {
color: #FFF;
background: #f72424;
padding: 15px;
text-align: center;
display: none;
left: 0;
right: 0;
bottom: 0;
position: fixed;
}
.waaksitibc {
position: relative;
}
a.uvchat_uss.uvchat_ussadmin {
position: absolute;
z-index: 999;
font-size: 30px;
color: #ffffff9e;
right: 60px;
top: 14px;
}
a.uvchat_uss.uvchat_ussadmin:hover {
color: #FFF;
}
.clr {clear: both;}
/* chatwaak */
@media screen and (max-width: 800px){
.waakchatvid {display: block;padding: 20px;}
.waakchatl, .waakchatr { min-width: 100%;}
.waakchatc { width: 100%;}
}
Отлично не забываем сохранить!
Нам ещё нужно подключить шрифтовые иконки от
font-awesome но только в том случае если они у вас ещё не подключены в противном случае повторно этого делать не нужно, ну а для тех у кого их нет то просто в самый вер первой строчкой в
таблице стилей пропишите код что представлен ниже
Код
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css);
Последним шагом нам осталось очистим кеш у браузера а в этом нам поможет комбинация клавиш
Ctrl+F5и на этом установка завершена! Все вопросы пожелания предложения ну или замечания прошу оставлять в комментариях.
web_master 
