Добрый вечер.
Дело касается программы, которая совмещает несколько чатов с разных сайтов и выводит мне на экране все сообщения в одном окне. Если интересно, называется BroChat и предназначена для онлайн трансляций.
Настраивала под себя стили, добавила кнопку, которая будет очищать чат от лишних сообщений, но столкнулась с проблемой покраски ников.
Хотелось бы, чтобы ники модераторов отображались другим, отличным от остальных пользователей, цветом, но не знаю, как это сделать. Помогите, пожалуйста, если это не очень сложно.
Это основной файл:
|
Код:
|
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="BybonukChatDark/BybonukChatDark.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<script>
function scrollToBottom()
{
document.body.scrollTop = document.body.scrollHeight;
}
function onStatisticReceived( service, value )
{
}
function onNewMessage( service, nickName, message, type )
{
var serviceElem = document.createElement( "img" );
serviceElem.className = service;
var serviceBlock = document.createElement( "div" );
serviceBlock.className = "service";
serviceBlock.appendChild( serviceElem );
var nickBlock = document.createElement( "div" );
nickBlock.className = "nick";
nickBlock.innerHTML = nickName;
var headerkBlock = document.createElement( "div" );
headerkBlock.className = "header";
headerkBlock.appendChild( serviceBlock );
headerkBlock.appendChild( nickBlock );
var messageBlock = document.createElement( "div" );
messageBlock.className = "message";
messageBlock.innerHTML = message;
var messageBox = document.createElement( "div" );
messageBox.className = "messagebox";
messageBox.appendChild( headerkBlock );
messageBox.appendChild( messageBlock );
var messageType = document.createElement( "div" );
messageType.className = type;
messageType.appendChild( messageBox );
var messagesList = document.getElementById( "messagesList" );
if( type != "" )
{
messagesList.appendChild( messageType );
}
else
{
messagesList.appendChild( messageBox );
}
scrollToBottom();
}
</script>
<body>
<div id="knopka"><button>Street magic</button></div><br><br>
<div id="messagesList"></div>
<script>
setInterval( scrollToBottom, 500 );
</script>
<script>
$( "button" ).click(function() {
$( "#messagesList" ).empty();
});
</script>
<!--START_BROWSER_CODE-->
<script>
var wsUri = "ws://localhost:15619";
var websocket = null;
function initWebSocket()
{
try
{
if (typeof MozWebSocket == 'function')
webSocket = MozWebSocket;
if ( websocket && websocket.readyState == 1 )
websocket.close();
websocket = new WebSocket( wsUri );
websocket.onopen = function (event)
{
console.log( 'initWebSocket:open' );
};
websocket.onclose = function (event)
{
setTimeout( initWebSocket, 3000 );
};
websocket.onerror = function (event)
{
websocket.close();
};
websocket.onmessage = function (event)
{
var newMessage = JSON.parse( event.data );
onNewMessage( newMessage.service, newMessage.nick, newMessage.message, newMessage.type );
document.body.scrollTop = document.body.scrollHeight;
};
}
catch (exception)
{
}
}
initWebSocket();
setInterval(function() { document.body.scrollTop = document.body.scrollHeight; }, 500 );
</script>
<!--END_BROWSER_CODE-->
</body>
</html> |
Это файл стиля:
|
Код:
|
@font-face {
font-family: themeFont;
src: url(fritz_quadrata_cyrillic.ttf);
}
@-webkit-keyframes scaleAnim
{
from{ -webkit-transform: scale(0); }
75%{ -webkit-transform: scale(1.2); }
to{ -webkit-transform: scale(1); }
}
html
{
overflow: hidden;
}
body
{
background-color: transparent;
padding: 0px;
margin: 0px;
}
#messagesList
{
}
.alias .messagebox .message
{
color: #FF9C00;
}
.ignore .messagebox
{
}
.support .messagebox
{
}
.messagebox
{
border-radius: 5px;
border: 2px solid rgba( 0, 0, 0, .75 );
background-color: rgba( 26, 26, 26, 0.7 );
/*font-family: themeFont,'Trebuchet MS';*/
font-family: 'Trebuchet MS';
font-size: 16px;
margin-left: calc( 10% - 2px );
margin-right: calc( 10% - 2px );
margin-bottom: 8px;
width: 80%;
text-align: left;
-webkit-animation: scaleAnim 0.5s;
}
.header
{
float: left;
width: 100%;
font-size: 12px;
padding-top: 2px;
padding-bottom: 2px;
}
.message
{
clear: both;
color: rgb( 185, 185, 185 );
line-height: 1;
background-color: rgba(32, 32, 32, 1);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
padding: 3px 8px 5px 8px;
}
.service
{
float: right;
margin-right: 8px;
}
.nick
{
float: left;
color: rgba( 140, 140, 140, 1 );
text-transform: uppercase;
margin-left: 8px;
font-size: 14px;
}
.smile
{
height: 32px;
}
.picture
{
max-height: 150px;
max-width: 100%;
}
#knopka {
display: inline;
height: 38px;
width: 100%;
position: absolute;
background: black;
}
button {
border-radius: 5px;
border: none;
background-color: #202020;
color: #919191;
font-family: themeFont;
src: url(fritz_quadrata_cyrillic.ttf);
padding: 5px 15px;
margin-top: 5px;
margin-left: 32%;
position:fixed;
}
.goodgame
{
content: url(../resources/goodgamelogo1.png);
height: 10px;
}
.twitch
{
content: url(../resources/twitchlogo1.png);
height: 12px;
} |