Aamir Butt
commited on
Commit
•
85c3d07
1
Parent(s):
0a37044
Added css, js file and updated index.html
Browse files- web/Chatroom.css +2 -0
- web/Chatroom.js +0 -0
- web/index.html +2 -4
web/Chatroom.css
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
|
|
|
|
|
|
|
| 1 |
+
.chatroom{width:100%;height:600px;color:#343d4e;max-height:90vh;background-color:hsla(0,0%,78.4%,.9);border-radius:3px;border-bottom-left-radius:0;border-bottom-right-radius:0;letter-spacing:normal;overflow:hidden;box-shadow:0 0 0 2px hsla(0,0%,100%,.8)}.chatroom,.chatroom *{box-sizing:border-box}.chatroom.closed{height:40px}.chatroom h3{background-color:#343d4e;color:#fff;margin:0;height:40px;font-weight:600;font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer}.chatroom .chats{box-sizing:border-box;padding:20px;margin:0;height:calc(100% - 80px);overflow-y:scroll;-webkit-overflow-scrolling:touch}.chatroom .chats .chat{background:hsla(0,0%,100%,.8);position:relative;padding:5px 13px;font-size:14px;border-radius:10px;list-style:none;float:left;clear:both;margin:10px 0 0;max-width:90%}.chatroom .chats .chat img{max-width:100%;vertical-align:middle}.chatroom .chats .chat.left{border-bottom-left-radius:0}.chatroom .chats .chat.right{float:right;clear:both;border-bottom-right-radius:0}.chatroom .chats .chat .text{word-wrap:break-word}.chatroom .chats .chat.chat-img{padding:5px}.chatroom .chats .chat a{text-decoration:none;color:#3498db}.chatroom .chats .chat ol,.chatroom .chats .chat ul{margin:0;padding-left:1.5em}.chatroom .chats .chat ol li,.chatroom .chats .chat ul li{padding-left:0}.chatroom .chats .chat.waiting{margin:10px 0;background:transparent;padding:0}@keyframes fade{0%{opacity:1}to{opacity:.3}}.chatroom .chats .chat.waiting span{font-size:1.5em;animation-name:fade;animation-duration:.8s;animation-iteration-count:infinite;animation-direction:alternate;animation-timing-function:ease-in-out}.chatroom .chats .chat.waiting span:first-child{animation-delay:0s}.chatroom .chats .chat.waiting span:nth-child(2){animation-delay:.4s}.chatroom .chats .chat.waiting span:nth-child(3){animation-delay:.8s}.chatroom .chats .time{list-style:none;clear:both;height:10px;font-size:10px;color:#414141;margin:5px 0 20px}.chatroom .chats .time.left{float:left}.chatroom .chats .time.right{float:right}.chatroom .chats .chat-buttons{position:relative;padding:0;font-size:14px;list-style:none;clear:both;margin:10px 0;text-align:center}.chatroom .chats .chat-buttons .chat-button{display:inline-block;transition:all .3s ease;cursor:pointer;margin:3px;background-color:#343d4e;color:#fff;border:2px solid #fff;padding:5px 10px;letter-spacing:normal;border-radius:5px}.chatroom .chats .chat-buttons .chat-button.chat-button-selected,.chatroom .chats .chat-buttons .chat-button:hover{background-color:rgba(52,61,78,.6);color:#fff}.chatroom .chats .chat-buttons .chat-button.chat-button-disabled{color:grey;border:2px solid grey}.chatroom .input{height:40px;width:100%;margin:0;padding:0 5px;background-color:#343d4e;display:flex;flex-direction:row;align-items:center}.chatroom .input input[type=text]{background-color:hsla(0,0%,100%,.8);outline:0;border:1px solid #fff;border-right:none;color:#343d4e;padding:0 5px;border-top-left-radius:3px;border-bottom-left-radius:3px;border-top-right-radius:0;border-bottom-right-radius:0;height:30px;flex:4;box-sizing:border-box;font-size:14px;transition:background-color .2s ease}.chatroom .input input[type=text]:focus{box-shadow:none;background-color:#fff}.chatroom .input input[type=submit]{display:inline-block;background:#343d4e;border:1px solid #fff;color:#fff;height:30px;min-width:70px;line-height:1;text-align:center;padding:0;font-size:12px;flex:1;box-shadow:none;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:3px;border-bottom-right-radius:3px;cursor:pointer;transition:all .3s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;outline:none;font-weight:600;text-transform:uppercase}.chatroom .input input[type=submit]:hover{background:hsla(0,0%,100%,.8)}.chatroom #speech-input{height:30px;width:30px;margin-left:5px;background:#343d4e;border:1px solid #fff;color:#fff;border-radius:3px;cursor:pointer;transition:all .3s ease}.chatroom #speech-input:hover{background:hsla(0,0%,100%,.8)}.chatroom .vertical-center{vertical-align:middle}
|
| 2 |
+
/*# sourceMappingURL=/Chatroom.css.map */
|
web/Chatroom.js
ADDED
|
The diff for this file is too large to render.
See raw diff
|
|
|
web/index.html
CHANGED
|
@@ -1,13 +1,11 @@
|
|
| 1 |
<head>
|
| 2 |
-
<link rel="stylesheet"
|
| 3 |
-
href="https://cdn.jsdelivr.net/npm/@scalableminds/chatroom@0.12.0/dist/Chatroom.css" />
|
| 4 |
</head>
|
| 5 |
|
| 6 |
<body>
|
| 7 |
<div class="chat-container"></div>
|
| 8 |
|
| 9 |
-
<script
|
| 10 |
-
src="https://cdn.jsdelivr.net/npm/@scalableminds/chatroom@0.12.0/dist/Chatroom.js " />
|
| 11 |
</script>
|
| 12 |
<script type="text/javascript">
|
| 13 |
var chatroom = new window.Chatroom({
|
|
|
|
| 1 |
<head>
|
| 2 |
+
<link rel="stylesheet" href="Chatroom.css" />
|
|
|
|
| 3 |
</head>
|
| 4 |
|
| 5 |
<body>
|
| 6 |
<div class="chat-container"></div>
|
| 7 |
|
| 8 |
+
<script src="Chatroom.js"></script>
|
|
|
|
| 9 |
</script>
|
| 10 |
<script type="text/javascript">
|
| 11 |
var chatroom = new window.Chatroom({
|