Главная страница Случайная страница
КАТЕГОРИИ:
АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника
Розробка інтерфейсу web-додатку чата коледжа
|
|
Інтерфейс чату реалізований наступним кодом:
/* Mainchatcontainer */
#chatContainer{
width: 510px;
margin: 100px auto;
position: relative;
}
/* Верхня панель */
#chatTopBar{
height: 40px;
background: url('../img/solid_gray.jpg') repeat-x #d0d0d0;
border: 1px solid #fff;
margin-bottom: 15px;
position: relative;
color: #777;
text-shadow: 1px 1px 0 #FFFFFF;
}
#chatTopBar.name{
position: absolute;
top: 10px;
left: 40px;
}
#chatTopBarimg{
left: 9px;
position: absolute;
top: 8px;
}
/* Чат */
#chatLineHolder{
height: 360px;
width: 350px;
margin-bottom: 20px;
}
.chat{
background: url('../img/chat_line_bg.jpg') repeat-x #d5d5d5;
min-height: 24px;
padding: 6px;
border: 1px solid #FFFFFF;
padding: 8px 6px 4px 37px;
position: relative;
margin: 0 10px 10px 0;
}
.chat: last-child{
margin-bottom: 0;
}
.chatspan{
color: #777777;
text-shadow: 1px 1px 0 #FFFFFF;
font-size: 12px;
}
.chat.text{
color: #444444;
display: inline-block;
font-size: 15px;
overflow: hidden;
vertical-align: top;
width: 190px;
}
.chat.gravatar{
background: url('https://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536? size=23') no-repeat;
left: 7px;
position: absolute;
top: 7px;
}
.chatimg{
display: block;
visibility: hidden;
}
.chat.time{
position: absolute;
right: 10px;
top: 12px;
font-size: 11px;
}
.chat.author{
margin-right: 6px;
font-size: 11px;
}
/* Область користувача */
#chatUsers{
background-color: #202020;
border: 1px solid #111111;
height: 360px;
position: absolute;
right: 0;
top: 56px;
width: 150px;
}
#chatUsers.user{
background: url('https://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536? size=30') no-repeat 1px 1px #444444;
border: 1px solid #111111;
float: left;
height: 32px;
margin: 10px 0 0 10px;
width: 32px;
}
#chatUsers.userimg{
border: 1px solid #444444;
display: block;
visibility: hidden;
}
/* Нижня панель */
#chatBottomBar{
background: url('../img/solid_gray.jpg') repeat-x #d0d0d0;
position: relative;
padding: 10px;
border: 1px solid #fff;
}
#chatBottomBar.tip{
position: absolute;
width: 0;
height: 0;
border: 10px solidtransparent;
border-bottom-color: #eeeeee;
top: -20px;
left: 20px;
}
#chatContainerinput{
background: url('../img/input_bg.jpg') repeat-x #dcdcdc;
height: 26px;
font: 13px/26px Calibri, Arial, sans-serif;
color: #777;
border: 1px solid;
border-color: #c1c1c1 #eee #eee #c1c1c1;
text-shadow: 1px 1px 0 #E4E4E4;
padding: 0 5px;
margin-right: 5px;
width: 185px;
outline: none;
}
#submitForm{
display: none;
}
input#chatText{
/* Текстове поле чата */
width: 385px;
}
/* Зміна стилів по замовчуванню для jScrollPane */
.jspVerticalBar{
background: none;
width: 20px;
}
.jspTrack{
background-color: #202020;
border: 1px solid #111111;
width: 3px;
right: -10px;
}
.jspDrag {
background: url('../img/slider.png') no-repeat;
width: 20px;
left: -9px;
height: 20px! important;
margin-top: -5px;
}
.jspDrag: hover{
background-position: leftbottom;
}
/* Додаткові стилі */
a.logoutButton{
background-color: #bbb;
border: 1px solid #eee! important;
color: #FFFFFF! important;
font-size: 12px;
padding: 5px 9px;
position: absolute;
right: 10px;
text-shadow: 1px 1px 0 #888;
top: 7px;
-moz-box-shadow: 0 0 7px #888 inset;
-webkit-box-shadow: 0 0 7px #888 inset;
box-shadow: 0 0 7px #888 inset;
}
a.logoutButton: hover{
text-shadow: 1px 1px 0 #888;
-moz-box-shadow: 0 0 7px #666 inset;
-webkit-box-shadow: 0 0 7px #666 inset;
box-shadow: 0 0 7px #666 inset;
}
#chatContainer.blueButton{
background: url('../img/button_blue.png') no-repeat;
border: none! important;
color: #516D7F! important;
display: inline-block;
font-size: 13px;
height: 29px;
text-align: center;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.4);
width: 75px;
margin: 0;
cursor: pointer;
}
#chatContainer.blueButton: hover{
background-position: leftbottom;
}
p.noChats,
#chatUsers.count{
clear: both;
font-size: 12px;
padding: 10px;
text-align: center;
text-shadow: 1px 1px 0 #111111;
}
#chatUsers.count{
font-size: 11px;
}
.rounded{
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
#chatErrorMessage{
width: 100%;
top: 0;
left: 0;
position: fixed;
background-color: #ab0909;
border-bottom: 1px solid #d32a2a;
font-size: 23px;
padding: 16px;
text-align: center;
color: #fff;
text-shadow: 1px 1px 0 #940f0f;
}
Рис.4.2.1. Інтерфейс користувача