123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204 |
- <!doctype html>
- <html lang="de-de">
- <head>
- <meta charset="utf-8">
- <title>Zammad Chat</title>
- <link rel="stylesheet" href="znuny.css">
- <meta name="viewport" content="width=device-width,initial-scale=1.0">
- <style>
- body {
- margin: 0;
- font-family: sans-serif;
- }
- .mockup {
- vertical-align: bottom;
- }
- .settings {
- position: fixed;
- left: 20px;
- top: 20px;
- background: white;
- font-size: 14px;
- padding: 10px;
- border-radius: 5px;
- box-shadow: 0 3px 10px rgba(0,0,0,.3);
- width: 500px;
- }
- .settings input {
- vertical-align: middle;
- }
- .settings input + input {
- margin-right: 3px;
- }
- table td:first-child {
- text-align: right;
- padding-right: 0;
- }
- table td.log {
- text-align: left;
- padding-right: 0;
- word-break: break-all;
- }
- td {
- padding: 5px;
- }
- h2 {
- font-size: 1em;
- margin: 0;
- }
- @media only screen and (max-width: 768px) {
- .settings {
- display: none;
- }
- }
- .Box {
- background: hsl(0,0%,91%);
- width: 26px;
- height: 24px;
- color: hsl(0,0%,47%);
- float: left;
- }
- .Box.Active {
- background: hsl(0,0%,36%);
- color: white;
- }
- </style>
- </head>
- <body>
- <img class="mockup" width="100%" src="znuny.png">
- <img class="mockup" width="100%" src="znuny.png">
- <img class="mockup" width="100%" src="znuny.png">
- <img class="mockup" width="100%" src="znuny.png">
- <img class="mockup" width="100%" src="znuny.png">
- <img class="mockup" width="100%" src="znuny.png">
- <img class="mockup" width="100%" src="znuny.png">
- <img class="mockup" width="100%" src="znuny.png">
- <img class="mockup" width="100%" src="znuny.png">
- <img class="mockup" width="100%" src="znuny.png">
- <img class="mockup" width="100%" src="znuny.png">
- <img class="mockup" width="100%" src="znuny.png">
- <div class="settings">
- <table>
- <tr>
- <td><h2>Settings</h2>
- <td>
- <tr>
- <td>
- <input id="flat" type="checkbox" data-option="flat">
- <td>
- <label for="flat">Flat Design</label>
- <tr>
- <td>
- <input type="color" id="color" value="#AE99D6" data-option="color">
- <td>
- <label for="color">Color</label>
- <tr>
- <td>
- <input type="range" id="borderRadius" value="5" min="0" max="20" data-option="borderRadius">
- <input type="number" value="5" min="5" max="20" data-option="borderRadius">px
- <td>
- <label for="borderRadius">Border Radius</label>
- <tr>
- <td>
- <input type="range" id="fontSize" value="12" min="11" max="18" data-option="fontSize">
- <input type="number" value="12" min="11" max="18" data-option="fontSize">px
- <td>
- <label for="fontSize">Font Size</label>
- <tr>
- <td>
- <td><button class="open-zammad-chat">Open Chat</button>
- <tr>
- <td class="log"><h2>Log</h2>
- <td>
- <tr>
- <td colspan="2" class="log js-chatLogDisplay">
- </table>
- </div>
- <script src="jquery-3.6.0.min.js"></script>
- <script src="chat.js"></script>
- <script>
- function getSearchParameters() {
- var prmstr = window.location.search.substr(1);
- return prmstr != null && prmstr != '' ? transformToAssocArray(prmstr) : {};
- }
- function transformToAssocArray( prmstr ) {
- var params = {};
- var prmarr = prmstr.split('&');
- for ( var i = 0; i < prmarr.length; i++) {
- var tmparr = prmarr[i].split('=');
- params[tmparr[0]] = tmparr[1];
- }
- return params;
- }
- var hostname = window.location.hostname;
- var port = window.location.port;
- var protocol = window.location.protocol;
- var wsProtocol = protocol === 'https:' ? 'wss:' : 'ws:';
- var params = getSearchParameters();
- var host = wsProtocol + '//'+ (location.host || 'localhost').split(':')[0] +':6042'
- if (params['port']) {
- host = wsProtocol + '//' + hostname + ':' + params['port']
- }
- cssUrl = protocol + '//' + hostname + ':' + port + '/assets/chat/chat.css'
- var chat = new ZammadChat({
- chatId: 1,
- host: host,
- cssUrl: cssUrl,
- debug: true,
- background: '#494d52',
- flat: true,
- show: false,
- idleTimeout: 0.1,
- idleTimeoutIntervallCheck: 0.11,
- inactiveTimeout: 2,
- inactiveTimeoutIntervallCheck: 0.5,
- waitingListTimeout: 1.2,
- waitingListTimeoutIntervallCheck: 0.5,
- });
- $('.settings :input').on({
- change: function(){
- switch($(this).attr('data-option')){
- case "flat":
- $('.zammad-chat').toggleClass('zammad-chat--flat', this.checked);
- break;
- case "color":
- setScssVariable('themeColor', this.value);
- updateStyle();
- break;
- case "borderRadius":
- setScssVariable('borderRadius', this.value + "px");
- updateStyle();
- break;
- }
- },
- input: function(){
- switch($(this).attr('data-option')){
- case "borderRadius":
- $('[data-option="borderRadius"]').val(this.value);
- setScssVariable('borderRadius', this.value + "px");
- updateStyle();
- break;
- case "fontSize":
- $('[data-option="fontSize"]').val(this.value);
- setScssVariable('fontSize', this.value + "px");
- updateStyle();
- break;
- }
- }
- });
- </script>
- </body>
- </html>
|