Beekeeper

 view release on metacpan or  search on metacpan

examples/chat/chat.html  view on Meta::CPAN

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script language="Javascript" type="text/javascript" defer src="https://cdnjs.cloudflare.com/ajax/libs/mqtt/4.3.7/mqtt.min.js"></script>
<script language="Javascript" type="text/javascript" defer src="https://cdnjs.cloudflare.com/ajax/libs/pako/2.1.0/pako_inflate.min.js"></script>
<script language="Javascript" type="text/javascript" defer src="js/config.js"></script>
<script language="Javascript" type="text/javascript" defer src="js/beekeeper.js"></script>
<script language="Javascript" type="text/javascript" defer src="js/chat.js"></script>
<style type="text/css">

body {
    padding: 30px;
    padding-left: 50px; 
    font-size: 11pt; 
    font-family: sans-serif;
}

#chat {
    overflow: auto;
    height: 300px; 
    width: 390px;
    font-family: sans-serif;
    background-color: #F0F0F0;
    border: solid 1px #CCCCCC;
    border-radius: 4px;
    scroll-behavior: smooth;
}

#chat .bubble {
    font-weight: 500;
    border: solid 1px #CCCCCC;
    padding: 8px;
    padding-top: 10px;
    margin: 8px;
    border-radius: 10px;
}

#chat .sender {
    position: relative;
    font-weight: 700;
    font-size: 8pt;
    color: #333399;
    top: -4px;
}

#chat .no_sender .sender {
    display: none;
}

#chat .outgoing {
    border-top-right-radius: 0px;
    background-color: #CCFFCC;
    margin-left: 30px;
}

#chat .incoming {
    background-color: #FFFFFF;
    border-top-left-radius: 0px;
    margin-right: 30px;
}

#chat .public {
    background-color: #FFFFFF;



( run in 0.741 second using v1.01-cache-2.11-cpan-39bf76dae61 )