2015-11-13 16:03:58 +00:00
|
|
|
<!doctype html>
|
2015-11-25 16:36:06 +00:00
|
|
|
<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">
|
|
|
|
|
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35738/livereload.js?snipver=1"></' + 'script>')</script>
|
|
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
margin: 0;
|
|
|
|
|
font-family: sans-serif;
|
|
|
|
|
}
|
2015-11-13 16:03:58 +00:00
|
|
|
|
2015-11-25 16:36:06 +00:00
|
|
|
.mockup {
|
|
|
|
|
vertical-align: bottom;
|
|
|
|
|
}
|
2015-11-13 16:03:58 +00:00
|
|
|
|
2015-11-25 16:36:06 +00:00
|
|
|
.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);
|
|
|
|
|
}
|
2015-11-13 16:03:58 +00:00
|
|
|
|
2015-11-25 16:36:06 +00:00
|
|
|
.settings input {
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
}
|
|
|
|
|
.settings input + input {
|
|
|
|
|
margin-right: 3px;
|
|
|
|
|
}
|
2015-11-13 16:03:58 +00:00
|
|
|
|
2015-11-25 16:36:06 +00:00
|
|
|
table td:first-child {
|
|
|
|
|
text-align: right;
|
|
|
|
|
padding-right: 0;
|
|
|
|
|
}
|
2015-11-13 16:03:58 +00:00
|
|
|
|
2015-11-25 16:36:06 +00:00
|
|
|
td {
|
|
|
|
|
padding: 5px;
|
|
|
|
|
}
|
2015-11-13 16:03:58 +00:00
|
|
|
|
2015-11-25 16:36:06 +00:00
|
|
|
h2 {
|
|
|
|
|
font-size: 1em;
|
|
|
|
|
margin: 0;
|
2015-11-13 16:03:58 +00:00
|
|
|
}
|
|
|
|
|
|
2015-11-25 16:36:06 +00:00
|
|
|
@media only screen and (max-width: 768px) {
|
|
|
|
|
.settings {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
2015-11-13 16:03:58 +00:00
|
|
|
|
2015-11-25 16:36:06 +00:00
|
|
|
.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>
|
2015-11-13 16:03:58 +00:00
|
|
|
<img class="mockup" width="100%" src="znuny.png">
|
|
|
|
|
|
|
|
|
|
<div class="settings">
|
|
|
|
|
<table>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>
|
|
|
|
|
<td><h2>Settings</h2>
|
|
|
|
|
<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>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script src="jquery-2.1.4.min.js"></script>
|
|
|
|
|
<script src="chat.js"></script>
|
|
|
|
|
<script>
|
|
|
|
|
var chat = new ZammadChat({
|
2015-11-25 12:18:56 +00:00
|
|
|
chatId: 1,
|
2015-11-25 09:35:57 +00:00
|
|
|
host: 'ws://localhost:6042',
|
2015-11-25 16:36:06 +00:00
|
|
|
cssUrl: 'http://localhost:3000/assets/chat/chat.css',
|
2015-11-13 16:03:58 +00:00
|
|
|
debug: true,
|
|
|
|
|
background: '#494d52',
|
|
|
|
|
flat: true,
|
|
|
|
|
shown: false
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
$('.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;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
2015-11-25 16:36:06 +00:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
