diff --git a/WSSSnoop.html b/WSSSnoop.html index 620fe15..80a07bc 100755 --- a/WSSSnoop.html +++ b/WSSSnoop.html @@ -31,9 +31,41 @@ margin-top: 50px !important; font-family: 'Source Code Pro', sans-serif;font-size: 0.7em; - padding-bottom: 50px; + padding-bottom: 65px; padding-left: 10px; } + .sendBar { + background-color: #333; + position:fixed; + bottom:30px; + width:100%; + z-index:100; + padding: 0px; + height: 30px; + font-family: 'Source Code Pro', sans-serif; + } + .sendBar #label { + margin-right: 20px; + width: 110px; + } + /*.sendBar #wssCommand { + width: 100%; + }*/ + .sendBar #wssSendText { + display: flex; + width:100%; + flex-grow: 1; + margin-left: 20px; + margin-top: -20px; + background-color: #333; + color:#DDD; + font-family: 'Source Code Pro', sans-serif; + border:none; + text-decoration: none; + } + *:focus { + outline: none; + } .bottomBar { background-color: #444; position:fixed; @@ -67,7 +99,7 @@ </div> <center> <input type="text" name="cswshURL" id="cswshURL" value="" placeholder="wss://snoop.me"> - <input type="button" id="startSnoop" value="start snooping" onclick="checkCSWSH()"/> + <input type="button" id="startSnoop" value="start snooping" onclick="startSnooping()"/> <input type="button" id="stopSnoop" value="stop snooping" style="display:none" onclick="stopSnooping()"/> <br /> <div class="topcorner"> @@ -78,6 +110,14 @@ <div id="cswsh-output" ></div> + <div class="sendBar" style="display:none"> + <form name="wssCommand" id="wssCommand" action="" onsubmit="return false"> + <label id="label">$></label> + <input type="text" name="wssSendText" id="wssSendText" value="" placeholder=""> + <!--<input type="submit" id="wssSendbutton" value="" />--> + </form> + </div> + <div class="bottomBar"> By <a href="https://rossmarks.uk" target="_new">Ross Marks</a> <div class="bottomClear"> @@ -90,19 +130,29 @@ function clearPage(){ $('#cswsh-output').empty(); - $('html, body').scrollTop($(document).height()); + $('html, body').scrollTop($(document).height()); + } + + function startSnooping(){ + $('#startSnoop').hide(); + $('#stopSnoop').show(); + $('.sendBar').show(); + $('#wssSendText').focus(); + writeToScreen("Start snooping: " + $("#cswshURL").val()); + checkCSWSH(); } function stopSnooping(){ $('#startSnoop').show(); $('#stopSnoop').hide(); + $('.sendBar').hide(); websocket.close(); + writeToScreen("Stop snooping"); } function checkCSWSH(){ var wsUri = $("#cswshURL").val(); - $('#startSnoop').hide(); - $('#stopSnoop').show(); + statusWaiting(); websocket = new WebSocket(wsUri); websocket.onopen = function(evt) { onOpen(evt) }; @@ -148,6 +198,13 @@ $('html, body').scrollTop($(document).height()); } + $("#wssCommand").submit(function(e) { + doSend( $('#wssSendText').val() ); + $('#wssSendText').val(""); + $('#wssSendText').focus(); + e.preventDefault(); + }); + function statusConnected(){ $('#status').html("Connected"); $('#status').css("color","lightgreen"); diff --git a/WSSSnoop.html b/WSSSnoop.html index 620fe15..80a07bc 100755 --- a/WSSSnoop.html +++ b/WSSSnoop.html @@ -31,9 +31,41 @@ margin-top: 50px !important; font-family: 'Source Code Pro', sans-serif;font-size: 0.7em; - padding-bottom: 50px; + padding-bottom: 65px; padding-left: 10px; } + .sendBar { + background-color: #333; + position:fixed; + bottom:30px; + width:100%; + z-index:100; + padding: 0px; + height: 30px; + font-family: 'Source Code Pro', sans-serif; + } + .sendBar #label { + margin-right: 20px; + width: 110px; + } + /*.sendBar #wssCommand { + width: 100%; + }*/ + .sendBar #wssSendText { + display: flex; + width:100%; + flex-grow: 1; + margin-left: 20px; + margin-top: -20px; + background-color: #333; + color:#DDD; + font-family: 'Source Code Pro', sans-serif; + border:none; + text-decoration: none; + } + *:focus { + outline: none; + } .bottomBar { background-color: #444; position:fixed; @@ -67,7 +99,7 @@ </div> <center> <input type="text" name="cswshURL" id="cswshURL" value="" placeholder="wss://snoop.me"> - <input type="button" id="startSnoop" value="start snooping" onclick="checkCSWSH()"/> + <input type="button" id="startSnoop" value="start snooping" onclick="startSnooping()"/> <input type="button" id="stopSnoop" value="stop snooping" style="display:none" onclick="stopSnooping()"/> <br /> <div class="topcorner"> @@ -78,6 +110,14 @@ <div id="cswsh-output" ></div> + <div class="sendBar" style="display:none"> + <form name="wssCommand" id="wssCommand" action="" onsubmit="return false"> + <label id="label">$></label> + <input type="text" name="wssSendText" id="wssSendText" value="" placeholder=""> + <!--<input type="submit" id="wssSendbutton" value="" />--> + </form> + </div> + <div class="bottomBar"> By <a href="https://rossmarks.uk" target="_new">Ross Marks</a> <div class="bottomClear"> @@ -90,19 +130,29 @@ function clearPage(){ $('#cswsh-output').empty(); - $('html, body').scrollTop($(document).height()); + $('html, body').scrollTop($(document).height()); + } + + function startSnooping(){ + $('#startSnoop').hide(); + $('#stopSnoop').show(); + $('.sendBar').show(); + $('#wssSendText').focus(); + writeToScreen("Start snooping: " + $("#cswshURL").val()); + checkCSWSH(); } function stopSnooping(){ $('#startSnoop').show(); $('#stopSnoop').hide(); + $('.sendBar').hide(); websocket.close(); + writeToScreen("Stop snooping"); } function checkCSWSH(){ var wsUri = $("#cswshURL").val(); - $('#startSnoop').hide(); - $('#stopSnoop').show(); + statusWaiting(); websocket = new WebSocket(wsUri); websocket.onopen = function(evt) { onOpen(evt) }; @@ -148,6 +198,13 @@ $('html, body').scrollTop($(document).height()); } + $("#wssCommand").submit(function(e) { + doSend( $('#wssSendText').val() ); + $('#wssSendText').val(""); + $('#wssSendText').focus(); + e.preventDefault(); + }); + function statusConnected(){ $('#status').html("Connected"); $('#status').css("color","lightgreen"); diff --git a/WSSSnoop.png b/WSSSnoop.png index 2181614..6de87a2 100755 --- a/WSSSnoop.png +++ b/WSSSnoop.png Binary files differ