SMusatov
/
zammad
mirror of https://github.com/zammad/zammad.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
							<!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,
    idleTimeout: 0.2,
    idleTimeoutIntervallCheck: 0.21,
    inactiveTimeout: 0.3,
    inactiveTimeoutIntervallCheck: 0.31,
    waitingListTimeout: 0.1,
    waitingListTimeoutIntervallCheck: 0.11,
  });

  $('.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>