<!DOCTYPE html> <meta charset="UTF-8"> <html> <head> <title>SMS Board</title> <link rel='stylesheet' href='sprite/emoji.css' > <link rel="stylesheet" href="/css/bootstrap.min.css" /> <script src="/js/jquery-1.12.1.min"></script> <script src="/js/jquery-ui.js"></script> <script src="/socket.io/socket.io.js"> </script> <style> /* Sticky footer styles -------------------------------------------------- */ html, body { height: 100%; /* The html and body elements cannot have any padding or margin. */ } /* Wrapper for page content to push down footer */ #wrap { min-height: 100%; height: auto; /* Negative indent footer by its height */ margin: 0 auto -60px; /* Pad bottom by footer height */ padding: 0 0 60px; } /* Set the fixed height of the footer here */ #footer { height: 100px; position: fixed; bottom: 0; width: 100%; } </style> <script> const toDisplay = 4; //define the number of messages to show var iosocket; var currentMessageCount = 0; var newDiv; var mynumber; function getColor(num){ switch(num){ case 0: return "#428bca"; //blue break; case 1: return "#5cb85c"; //green break; case 2: return "#5bc0de"; //lightblue break; case 3: return "#f0ad4e"; //orange break; case 4: return "#d9534f"; //red break; } } function initSocketIO() { iosocket = io.connect(); iosocket.on('clientrefresh', function() { location.reload(); }); iosocket.on('connect', function() { iosocket.on('debugMessage', function(message) { alert(message); }); iosocket.on('config', function(phonenumber) { mynumber = phonenumber; $( "span.number" ).html(mynumber); }); iosocket.on('newMessage', function(time,number,message,color) { var censoredNumber = number.substring(0,3) + "********" +number.substring(number.length - 3, number.length); var messages = document.getElementById('messagesBody'); newDiv = document.createElement('div'); var newH1 = document.createElement('h1'); var newP = document.createElement('p'); newH1.innerHTML = message; newP.innerHTML = "by "+censoredNumber+" at "+time; newDiv.style.backgroundColor = getColor(color); //need this on both for some browsers (especially safari) to recognize... newDiv.style="background-color:"+getColor(color)+" !important; padding:10px 0; margin:10px 0;"; newDiv.className="jumbotron"; newDiv.appendChild(newH1); newDiv.appendChild(newP); currentMessageCount++; if(currentMessageCount > toDisplay) { //Remove the top div $('#messagesBody').find('div').first().slideUp(function() { $(this).remove(); document.getElementById('messagesBody').appendChild(newDiv); }); currentMessageCount--; }else{ document.getElementById('messagesBody').appendChild(newDiv); } }); }); } function initButton() { $("#check").button(); } window.onload = function() { initSocketIO(); iosocket.emit('getLastMessages',toDisplay); iosocket.emit('getConfig'); }; $(document).ready(function() { $('#check').click(function() { iosocket.emit('sendAT',toggleVal); }); }); </script> </head> <body style="/*background-color: #D4D4D4;*/"> <div style="text-align:center;" > <h2>Send an SMS with a message to <span class="number" style="color:#3399ff;"></span></h2> <div id="wrap"> <div id="messagesBody"> </div> <br> <br> <div style="display:none;" id="btnHolder"> <h2>Debug functions</h2> <input type="checkbox" id="check" value="toggle"/><label for="check">Send AT</label> <div id="debugOut"> </div> </div> </div> <<<<<<< HEAD <!-- <div id="footer"> ======= <!-- <div id="footer"> >>>>>>> 754c9a7bd9436bf6309b8a11822ff7b2e3014aee <h2>Send an SMS with a message to <span class="number" style="color:#3399ff;"></span></h2> </div> --> </body> </html>