API tools faq
paste
Advertisement
gsmashik

chat system

gsmashik
Jun 28th, 2018
205
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.90 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <title>modal-minimize-and-maximize Example</title>
  8. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  9. <link rel="stylesheet" href="https://www.jqueryscript.net/demo/Excel-like-Bootstrap-Table-Sorting-Filtering-Plugin/excel-bootstrap-table-filter-style.css">
  10. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  11. <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  12. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  13. <script src="https://www.jqueryscript.net/demo/Excel-like-Bootstrap-Table-Sorting-Filtering-Plugin/excel-bootstrap-table-filter-bundle.js"></script>
  14.  
  15.  
  16. <script type="text/javascript" src="libs/FileSaver/FileSaver.min.js"></script>
  17. <script type="text/javascript" src="libs/js-xlsx/xlsx.core.min.js"></script>
  18. <script type="text/javascript" src="libs/jsPDF/jspdf.min.js"></script>
  19. <script type="text/javascript" src="libs/jsPDF-AutoTable/jspdf.plugin.autotable.js"></script>
  20. <script type="text/javascript" src="libs/html2canvas/html2canvas.min.js"></script>
  21. <script type="text/javascript" src="tableExport.min.js"></script>
  22.  
  23. <script type="text/javascript" src="https://phpzag.com/demo/create-bootstrap-table-pagination-with-jquery/js/bootstrap-table-pagination.js"></script>
  24.  
  25. <!-- font Awesome 4.5.0 -->
  26. <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  27. <style>
  28. @import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i');
  29.  
  30. * {
  31. margin: 0;
  32. padding: 0;
  33. box-sizing: border-box;
  34. }
  35.  
  36. body {
  37. font-family: 'Lato', sans-serif;
  38. font-size: 14px;
  39. color: #999999;
  40. word-wrap: break-word;
  41. }
  42.  
  43. ul {
  44. list-style: none;
  45. }
  46.  
  47. .chatbox-holder {
  48. position: fixed;
  49. right: 0;
  50. bottom: 0;
  51. display: flex;
  52. align-items: flex-end;
  53. height: 0;
  54. }
  55.  
  56. .chatbox {
  57. width: 400px;
  58. height: 400px;
  59. margin: 0 20px 0 0;
  60. position: relative;
  61. box-shadow: 0 0 5px 0 rgba(0, 0, 0, .2);
  62. display: flex;
  63. flex-flow: column;
  64. border-radius: 10px 10px 0 0;
  65. background: white;
  66. bottom: 0;
  67. transition: .1s ease-out;
  68. }
  69.  
  70. .chatbox-top {
  71. position: relative;
  72. display: flex;
  73. padding: 10px 0;
  74. border-radius: 10px 10px 0 0;
  75. background: rgba(0, 0, 0, .05);
  76. }
  77.  
  78. .chatbox-icons {
  79. padding: 0 10px 0 0;
  80. display: flex;
  81. position: relative;
  82. }
  83.  
  84. .chatbox-icons .fa {
  85. background: rgba(220, 0, 0, .6);
  86. padding: 3px 5px;
  87. margin: 0 0 0 3px;
  88. color: white;
  89. border-radius: 0 5px 0 5px;
  90. transition: 0.3s;
  91. }
  92.  
  93. .chatbox-icons .fa:hover {
  94. border-radius: 5px 0 5px 0;
  95. background: rgba(220, 0, 0, 1);
  96. }
  97.  
  98. .chatbox-icons a, .chatbox-icons a:link, .chatbox-icons a:visited {
  99. color: white;
  100. }
  101.  
  102. .chat-partner-name, .chat-group-name {
  103. flex: 1;
  104. padding: 0 0 0 95px;
  105. font-size: 15px;
  106. font-weight: bold;
  107. color: #30649c;
  108. text-shadow: 1px 1px 0 white;
  109. transition: .1s ease-out;
  110. }
  111.  
  112. .status {
  113. width: 12px;
  114. height: 12px;
  115. border-radius: 50%;
  116. display: inline-block;
  117. box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2);
  118. border: 1px solid rgba(0, 0, 0, 0.15);
  119. background: #cacaca;
  120. margin: 0 3px 0 0;
  121. }
  122.  
  123. .online {
  124. background: #b7fb00;
  125. }
  126.  
  127. .away {
  128. background: #ffae00;
  129. }
  130.  
  131. .donot-disturb {
  132. background: #ff4343;
  133. }
  134.  
  135. .chatbox-avatar {
  136. width: 80px;
  137. height: 80px;
  138. overflow: hidden;
  139. border-radius: 50%;
  140. background: white;
  141. padding: 3px;
  142. box-shadow: 0 0 5px 0 rgba(0, 0, 0, .2);
  143. position: absolute;
  144. transition: .1s ease-out;
  145. bottom: 0;
  146. left: 6px;
  147. }
  148.  
  149. .chatbox-avatar img {
  150. width: 100%;
  151. height: 100%;
  152. border-radius: 50%;
  153. }
  154.  
  155. .chat-messages {
  156. border-top: 1px solid rgba(0, 0, 0, .05);
  157. padding: 10px;
  158. overflow: auto;
  159. display: flex;
  160. flex-flow: row wrap;
  161. align-content: flex-start;
  162. flex: 1;
  163. }
  164.  
  165. .message-box-holder {
  166. width: 100%;
  167. margin: 0 0 15px;
  168. display: flex;
  169. flex-flow: column;
  170. align-items: flex-end;
  171. }
  172.  
  173. .message-sender {
  174. font-size: 12px;
  175. margin: 0 0 15px;
  176. color: #30649c;
  177. align-self: flex-start;
  178. }
  179.  
  180. .message-sender a, .message-sender a:link, .message-sender a:visited, .chat-partner-name a, .chat-partner-name a:link, .chat-partner-name a:visited {
  181. color: #30649c;
  182. text-decoration: none;
  183. }
  184.  
  185. .message-box {
  186. padding: 6px 10px;
  187. border-radius: 6px 0 6px 0;
  188. position: relative;
  189. background: rgba(100, 170, 0, .1);
  190. border: 2px solid rgba(100, 170, 0, .1);
  191. color: #6c6c6c;
  192. font-size: 12px;
  193. }
  194.  
  195. .message-box:after {
  196. content: "";
  197. position: absolute;
  198. border: 10px solid transparent;
  199. border-top: 10px solid rgba(100, 170, 0, .2);
  200. border-right: none;
  201. bottom: -22px;
  202. right: 10px;
  203. }
  204.  
  205. .message-partner {
  206. background: rgba(0, 114, 135, .1);
  207. border: 2px solid rgba(0, 114, 135, .1);
  208. align-self: flex-start;
  209. }
  210.  
  211. .message-partner:after {
  212. right: auto;
  213. bottom: auto;
  214. top: -22px;
  215. left: 9px;
  216. border: 10px solid transparent;
  217. border-bottom: 10px solid rgba(0, 114, 135, .2);
  218. border-left: none;
  219. }
  220.  
  221. .chat-input-holder {
  222. display: flex;
  223. border-top: 1px solid rgba(0, 0, 0, .1);
  224. }
  225.  
  226. .chat-input {
  227. resize: none;
  228. padding: 5px 10px;
  229. height: 40px;
  230. font-family: 'Lato', sans-serif;
  231. font-size: 14px;
  232. color: #999999;
  233. flex: 1;
  234. border: none;
  235. background: rgba(0, 0, 0, .05);
  236. border-bottom: 1px solid rgba(0, 0, 0, .05);
  237. }
  238.  
  239. .chat-input:focus, .message-send:focus {
  240. outline: none;
  241. }
  242.  
  243. .message-send::-moz-focus-inner {
  244. border:0;
  245. padding:0;
  246. }
  247.  
  248. .message-send {
  249. -webkit-appearance: none;
  250. background: #9cc900;
  251. background: -moz-linear-gradient(180deg, #00d8ff, #00b5d6);
  252. background: -webkit-linear-gradient(180deg, #00d8ff, #00b5d6);
  253. background: -o-linear-gradient(180deg, #00d8ff, #00b5d6);
  254. background: -ms-linear-gradient(180deg, #00d8ff, #00b5d6);
  255. background: linear-gradient(180deg, #00d8ff, #00b5d6);
  256. color: white;
  257. font-size: 12px;
  258. padding: 0 15px;
  259. border: none;
  260. text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
  261. }
  262.  
  263. .attachment-panel {
  264. padding: 3px 10px;
  265. text-align: right;
  266. }
  267.  
  268. .attachment-panel a, .attachment-panel a:link, .attachment-panel a:visited {
  269. margin: 0 0 0 7px;
  270. text-decoration: none;
  271. color: rgba(0, 0, 0, 0.5);
  272. }
  273.  
  274. .chatbox-min {
  275. margin-bottom: -362px;
  276. /* height: 46px; */
  277. }
  278.  
  279. .chatbox-min .chatbox-avatar {
  280. width: 60px;
  281. height: 60px;
  282. }
  283.  
  284. .chatbox-min .chat-partner-name, .chatbox-min .chat-group-name {
  285. padding: 0 0 0 75px;
  286. }
  287.  
  288. .settings-popup {
  289. background: white;
  290. border-radius: 20px/10px;
  291. box-shadow: 0 3px 5px 0 rgba(0, 0, 0, .2);
  292. font-size: 13px;
  293. opacity: 0;
  294. padding: 10px 0;
  295. position: absolute;
  296. right: 0;
  297. text-align: left;
  298. top: 33px;
  299. transition: .15s;
  300. transform: scale(1, 0);
  301. transform-origin: 50% 0;
  302. width: 120px;
  303. z-index: 2;
  304. border-top: 1px solid rgba(0, 0, 0, .2);
  305. border-bottom: 2px solid rgba(0, 0, 0, .3);
  306. }
  307.  
  308. .settings-popup:after, .settings-popup:before {
  309. border: 7px solid transparent;
  310. border-bottom: 7px solid white;
  311. border-top: none;
  312. content: "";
  313. position: absolute;
  314. left: 45px;
  315. top: -10px;
  316. border-top: 3px solid rgba(0, 0, 0, .2);
  317. }
  318.  
  319. .settings-popup:before {
  320. border-bottom: 7px solid rgba(0, 0, 0, .25);
  321. top: -11px;
  322. }
  323.  
  324. .settings-popup:after {
  325. border-top-color: transparent;
  326. }
  327.  
  328. #chkSettings {
  329. display: none;
  330. }
  331.  
  332. #chkSettings:checked + .settings-popup {
  333. opacity: 1;
  334. transform: scale(1, 1);
  335. }
  336.  
  337. .settings-popup ul li a, .settings-popup ul li a:link, .settings-popup ul li a:visited {
  338. color: #999;
  339. text-decoration: none;
  340. display: block;
  341. padding: 5px 10px;
  342. }
  343.  
  344. .settings-popup ul li a:hover {
  345. background: rgba(0, 0, 0, .05);
  346. }
  347. </style>
  348. </head>
  349.  
  350. <body>
  351. <div class="chatbox-holder">
  352. <div class="chatbox">
  353. <div class="chatbox-top">
  354. <div class="chatbox-avatar">
  355. <a target="_blank" href="https://www.facebook.com/mfreak"><img src="https://gravatar.com/avatar/2449e413ade8b0c72d0a15d153febdeb?s=512&d=https://codepen.io/assets/avatars/user-avatar-512x512-6e240cf350d2f1cc07c2bed234c3a3bb5f1b237023c204c782622e80d6b212ba.png" /></a>
  356. </div>
  357. <div class="chat-partner-name">
  358. <span class="status online"></span>
  359. <a target="_blank" href="https://www.facebook.com/mfreak">Mamun Khandaker</a>
  360. </div>
  361. <div class="chatbox-icons">
  362. <a href="javascript:void(0);"><i class="fa fa-minus"></i></a>
  363. <a href="javascript:void(0);"><i class="fa fa-close"></i></a>
  364. </div>
  365. </div>
  366.  
  367. <div class="chat-messages">
  368. <div class="message-box-holder">
  369. <div class="message-box">
  370. Hello
  371. </div>
  372. </div>
  373.  
  374. <div class="message-box-holder">
  375. <div class="message-sender">
  376. Mamun Khandaker
  377. </div>
  378. <div class="message-box message-partner">
  379. Hi.
  380. </div>
  381. </div>
  382.  
  383. <div class="message-box-holder">
  384. <div class="message-box">
  385. How are you doing?
  386. </div>
  387. </div>
  388.  
  389. <div class="message-box-holder">
  390. <div class="message-sender">
  391. Mamun Khandaker
  392. </div>
  393. <div class="message-box message-partner">
  394. I'm doing fine. How about you?
  395. </div>
  396. </div>
  397.  
  398. <div class="message-box-holder">
  399. <div class="message-box">
  400. I am fine.
  401. </div>
  402. </div>
  403.  
  404. <div class="message-box-holder">
  405. <div class="message-box">
  406. Do you know why I knocked you today?
  407. </div>
  408. </div>
  409.  
  410. <div class="message-box-holder">
  411. <div class="message-box">
  412. There's something important I would like to share with you. Do you have some time?
  413. </div>
  414. </div>
  415.  
  416. <div class="message-box-holder">
  417. <div class="message-sender">
  418. Mamun Khandaker
  419. </div>
  420. <div class="message-box message-partner">
  421. Yeah sure. Let's meet in the Einstein cafe this evening and discuss the matter.
  422. </div>
  423. </div>
  424.  
  425. <div class="message-box-holder">
  426. <div class="message-sender">
  427. Mamun Khandaker
  428. </div>
  429. <div class="message-box message-partner">
  430. I thought of coming to your place and discuss about it but I had to finish my projects and I didn't have enough time to go out of the house.
  431. </div>
  432. </div>
  433. </div>
  434.  
  435. <div class="chat-input-holder">
  436. <textarea class="chat-input"></textarea>
  437. <input type="submit" value="Send" class="message-send" />
  438. </div>
  439. <div class="attachment-panel">
  440. <a href="#" class="fa fa-thumbs-up"></a>
  441. <a href="#" class="fa fa-camera"></a>
  442. <a href="#" class="fa fa-video-camera"></a>
  443. <a href="#" class="fa fa-image"></a>
  444. <a href="#" class="fa fa-paperclip"></a>
  445. <a href="#" class="fa fa-link"></a>
  446. <a href="#" class="fa fa-trash-o"></a>
  447. <a href="#" class="fa fa-search"></a>
  448. </div>
  449. </div>
  450.  
  451. <div class="chatbox group-chat">
  452. <div class="chatbox-top">
  453. <div class="chatbox-avatar">
  454. <a target="_blank" href="https://www.facebook.com/mfreak"><img src="https://avatars0.githubusercontent.com/u/7145968?v=3&s=460" /></a>
  455. </div>
  456.  
  457. <div class="chat-group-name">
  458. <span class="status away"></span>
  459. Group name comes here
  460. </div>
  461. <div class="chatbox-icons">
  462. <label for="chkSettings"><i class="fa fa-gear"></i></label><input type="checkbox" id="chkSettings" />
  463. <div class="settings-popup">
  464. <ul>
  465. <li><a href="#">Group members</a></li>
  466. <li><a href="#">Add members</a></li>
  467. <li><a href="#">Delete members</a></li>
  468. <li><a href="#">Leave group</a></li>
  469. </ul>
  470. </div>
  471. <a href="javascript:void(0);"><i class="fa fa-minus"></i></a>
  472. <a href="javascript:void(0);"><i class="fa fa-close"></i></a>
  473. </div>
  474. </div>
  475.  
  476. <div class="chat-messages">
  477. <div class="message-box-holder">
  478. <div class="message-box">
  479. What are you people doing?
  480. </div>
  481. </div>
  482.  
  483. <div class="message-box-holder">
  484. <div class="message-sender">
  485. <a href="#">Ben Stiller</a>
  486. </div>
  487. <div class="message-box message-partner">
  488. Hey, nobody's here today. I'm at office alone.
  489. Hey, nobody's here today. I'm at office alone.
  490. </div>
  491. </div>
  492.  
  493. <div class="message-box-holder">
  494. <div class="message-box">
  495. who else is online?
  496. </div>
  497. </div>
  498.  
  499. <div class="message-box-holder">
  500. <div class="message-sender">
  501. <a href="#">Chris Jerrico</a>
  502. </div>
  503. <div class="message-box message-partner">
  504. I'm also online. How are you people?
  505. </div>
  506. </div>
  507.  
  508. <div class="message-box-holder">
  509. <div class="message-box">
  510. I am fine.
  511. </div>
  512. </div>
  513.  
  514. <div class="message-box-holder">
  515. <div class="message-sender">
  516. <a href="#">Rockey</a>
  517. </div>
  518. <div class="message-box message-partner">
  519. I'm also online. How are you people?
  520. </div>
  521. </div>
  522.  
  523. <div class="message-box-holder">
  524. <div class="message-sender">
  525. <a href="#">Christina Farzana</a>
  526. </div>
  527. <div class="message-box message-partner">
  528. We are doing fine. I am in.
  529. </div>
  530. </div>
  531. </div>
  532.  
  533. <div class="chat-input-holder">
  534. <textarea class="chat-input"></textarea>
  535. <input type="submit" value="Send" class="message-send" />
  536. </div>
  537.  
  538. <div class="attachment-panel">
  539. <a href="#" class="fa fa-thumbs-up"></a>
  540. <a href="#" class="fa fa-camera"></a>
  541. <a href="#" class="fa fa-video-camera"></a>
  542. <a href="#" class="fa fa-image"></a>
  543. <a href="#" class="fa fa-paperclip"></a>
  544. <a href="#" class="fa fa-link"></a>
  545. <a href="#" class="fa fa-trash-o"></a>
  546. <a href="#" class="fa fa-search"></a>
  547. </div>
  548. </div>
  549.  
  550. <div class="chatbox chatbox-min">
  551. <div class="chatbox-top">
  552. <div class="chatbox-avatar">
  553. <a target="_blank" href="https://www.facebook.com/mfreak"><img src="https://lh3.googleusercontent.com/-iJhKZHM5Kqs/Vgg2r91epsI/AAAAAAAAAgo/uGT4-sqPJzg/w800-h800/IMG_1339.jpg" /></a>
  554. </div>
  555. <div class="chat-partner-name">
  556. <span class="status donot-disturb"></span>
  557. <a target="_blank" href="https://www.facebook.com/mfreak">Mamun Khandaker</a>
  558. </div>
  559. <div class="chatbox-icons">
  560. <a href="javascript:void(0);"><i class="fa fa-minus"></i></a>
  561. <a href="javascript:void(0);"><i class="fa fa-close"></i></a>
  562. </div>
  563. </div>
  564.  
  565. <div class="chat-messages">
  566. <div class="message-box-holder">
  567. <div class="message-box">
  568. Hello
  569. </div>
  570. </div>
  571.  
  572. <div class="message-box-holder">
  573. <div class="message-sender">
  574. Mamun Khandaker
  575. </div>
  576. <div class="message-box message-partner">
  577. Hi.
  578. </div>
  579. </div>
  580.  
  581. <div class="message-box-holder">
  582. <div class="message-box">
  583. How are you doing?
  584. </div>
  585. </div>
  586.  
  587. <div class="message-box-holder">
  588. <div class="message-sender">
  589. Mamun Khandaker
  590. </div>
  591. <div class="message-box message-partner">
  592. I'm doing fine. How about you?
  593. </div>
  594. </div>
  595.  
  596. <div class="message-box-holder">
  597. <div class="message-box">
  598. I am fine.
  599. </div>
  600. </div>
  601.  
  602. <div class="message-box-holder">
  603. <div class="message-box">
  604. Do you know why I knocked you today?
  605. </div>
  606. </div>
  607.  
  608. <div class="message-box-holder">
  609. <div class="message-box">
  610. There's something important I would like to share with you. Do you have some time?
  611. </div>
  612. </div>
  613.  
  614. <div class="message-box-holder">
  615. <div class="message-sender">
  616. Mamun Khandaker
  617. </div>
  618. <div class="message-box message-partner">
  619. Yeah sure. Let's meet in the Einstein cafe this evening and discuss the matter.
  620. </div>
  621. </div>
  622.  
  623. <div class="message-box-holder">
  624. <div class="message-sender">
  625. Mamun Khandaker
  626. </div>
  627. <div class="message-box message-partner">
  628. I thought of coming to your place and discuss about it but I had to finish my projects and I didn't have enough time to go out of the house.
  629. </div>
  630. </div>
  631. </div>
  632.  
  633. <div class="chat-input-holder">
  634. <textarea class="chat-input"></textarea>
  635. <input type="submit" value="Send" class="message-send" />
  636. </div>
  637.  
  638. <div class="attachment-panel">
  639. <a href="#" class="fa fa-thumbs-up"></a>
  640. <a href="#" class="fa fa-camera"></a>
  641. <a href="#" class="fa fa-video-camera"></a>
  642. <a href="#" class="fa fa-image"></a>
  643. <a href="#" class="fa fa-paperclip"></a>
  644. <a href="#" class="fa fa-link"></a>
  645. <a href="#" class="fa fa-trash-o"></a>
  646. <a href="#" class="fa fa-search"></a>
  647. </div>
  648. </div>
  649. </div>
  650. <script>
  651. $(document).ready(function($) {
  652. $(function(){
  653. $('.fa-minus').click(function(){ $(this).closest('.chatbox').toggleClass('chatbox-min');
  654. });
  655. $('.fa-close').click(function(){
  656. $(this).closest('.chatbox').hide();
  657. });
  658. });
  659. });
  660. </script>
  661. </body>
  662. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!