How can I create a fake shell command line that looks like this?

subless · 12-01-2012, 12:54 AM

I really love the thought of having a JavaScript shell command line but I only know php, mysql, html, and css. I've never really liked JS cause it differs from browser to browser.

But anyways how can I create a very simple basic fake shell command line like this real one located here: TermShell

007julien · 12-01-2012, 03:47 PM

You prefer probably to write javascript with PHP to insert malicious addresses !

subless · 12-02-2012, 02:07 AM

Can you give an example of how to create a simple shell demo like the one in the link I provided?

donna1 · 12-02-2012, 03:39 AM

i only know javascript. i can make a fake shell just like that using canvas and context.text command in html5.
Why do you want a Fake shell? to trick someone into entering a password?

subless · 12-03-2012, 03:06 AM

Quote:

Originally Posted by donna1

i only know javascript. i can make a fake shell just like that using canvas and context.text command in html5.
Why do you want a Fake shell? to trick someone into entering a password?

Well I want you to do it in JavaScript, and no I'm not a bad person wanting to steal someones stuff.

I'm wanting to make my website to be a shell terminal where the user has to type in commands to go to different pages or to submit stuff so it will make it seem like they are on a computer terminal.

donna1 · 12-03-2012, 09:02 AM

Try this as a start

Code:

<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="800" height="600">>Your browser does not support the canvas tag.</canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var cursorOn=1,cursX=10, cursY=30;
var textColor ="lawngreen";

function displayTerm(){
 ctx.fillStyle  = "black";
 ctx.fillRect(0,0,500,500);
 ctx.fillStyle = textColor;
 ctx.font = "12px Courier New";
 type("JESTER/UIX 1.9.4  starting up ...");
 newline(2);
 type("Login: "); 
}

function newline(n){
 cursX=10; cursY+=15*n;
}

function type(string){
 ctx.fillText(string,cursX,cursY);
 cursX+=string.length*8;
}

function flashCursor(){
 if(cursorOn==1) {ctx.fillStyle = textColor; ctx.fillRect(cursX,cursY-11,7,14);}
 else {cursorOff();}
 cursorOn=-cursorOn;
}

function cursorOff(){
 ctx.fillStyle = "black";
 ctx.fillRect(cursX,cursY-11,7,14);
}


function doKeyDown(evt){
 cursorOff();
 if(evt.keyCode==13){ newline(1); return;}
 ctx.fillStyle = textColor;
 ctx.fillText(evt.keyCode,cursX,cursY);
 cursX+=8;
 if(cursX>480) {newline(1);}
}

displayTerm();
window.addEventListener('keydown',doKeyDown,true);
setInterval('flashCursor()',500);

</script>
</body>
</html>

donna1 · 12-03-2012, 09:16 AM

Help!
The above code seems to print the Ascii value of the keystrokes rather than the character, can anybody tell me where I went wrong?
Ta

Try the demo here
http://donoi.hostoi.com/term.html

rnd me · 12-04-2012, 12:28 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>terminal</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<meta name="author" content="dandavis" />
<style type='text/css'>
	:Focus { outline: none; }
	body, html { margin: 0px; padding: 0px; color: #fff; background-color: #111; font-family: georgia;}
	textarea, input { color: #bfb; background: #111; font-family: 'Lucida Console', monospace;  padding: 0;
				width: 98%;  margin: 1em; border: 1px solid #000; overflow: hidden; }
	
</style>	
</head>
	<body>
  




<textarea rows='40' cols='110' id='view' ></textarea>	
  

<form onsubmit="render(line.value); return false;">
  
	<datalist id='hist'></datalist>

  <input value='Object.keys(window)' type='text'  id='line'  autofocus tabindex=1 list='hist' />	
</form>



<script type='text/javascript'>

commands={

 cls: 	function cls(){ setTimeout("view.value='';",0); },
 date:	function(){return new Date().toISOString(); }
 
}


commands.ls=Object.keys.bind(Object, commands);



function propToMethod(){


}


function render(code){
	hist.appendChild(new Option(code));
	var rez="";
	try{ 
			rez=eval("with(commands){"+(code||'')+"}");
		
	}catch(y){
		rez=y;
	}
		
	if(typeof rez==='function'){ rez=rez();}
	view.value+="\n\n JS:>"+ code+"\n" +  JSON.stringify(rez, null, "\t")+"\n";
	if(view.value.length>5000){ view.value=view.value.slice(-5000); }
	view.scrollTop=9e9;
	line.select();
	line.focus();
}



window.onload=render(render+"; 'ready!' ");

</script>
</body>
</html>

subless · 12-04-2012, 05:52 AM

Quote:

Originally Posted by rnd me

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>terminal</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<meta name="author" content="dandavis" />
<style type='text/css'>
	:Focus { outline: none; }
	body, html { margin: 0px; padding: 0px; color: #fff; background-color: #111; font-family: georgia;}
	textarea, input { color: #bfb; background: #111; font-family: 'Lucida Console', monospace;  padding: 0;
				width: 98%;  margin: 1em; border: 1px solid #000; overflow: hidden; }
	
</style>	
</head>
	<body>
  




<textarea rows='40' cols='110' id='view' ></textarea>	
  

<form onsubmit="render(line.value); return false;">
  
	<datalist id='hist'></datalist>

  <input value='Object.keys(window)' type='text'  id='line'  autofocus tabindex=1 list='hist' />	
</form>



<script type='text/javascript'>

commands={

 cls: 	function cls(){ setTimeout("view.value='';",0); },
 date:	function(){return new Date().toISOString(); }
 
}


commands.ls=Object.keys.bind(Object, commands);



function propToMethod(){


}


function render(code){
	hist.appendChild(new Option(code));
	var rez="";
	try{ 
			rez=eval("with(commands){"+(code||'')+"}");
		
	}catch(y){
		rez=y;
	}
		
	if(typeof rez==='function'){ rez=rez();}
	view.value+="\n\n JS:>"+ code+"\n" +  JSON.stringify(rez, null, "\t")+"\n";
	if(view.value.length>5000){ view.value=view.value.slice(-5000); }
	view.scrollTop=9e9;
	line.select();
	line.focus();
}



window.onload=render(render+"; 'ready!' ");

</script>
</body>
</html>

That didn't do anything for me, just displayed a box with javascript code in it.

jmrker · 12-04-2012, 02:38 PM

Quote:

Originally Posted by subless

That didn't do anything for me, just displayed a box with javascript code in it.

What is it that you expected it to do?

Did you click on the window and type something?

donna1 · 12-04-2012, 05:50 PM

@Woodstock Im trying rnd-me's terminal and doesnt work for me either. Code looks as if it should return a date, or clear screen if I type either date: or CLS: but it doesnt work?

Anyway can someone look at my version please and tell me how to convert the keycode into a character for output because mine has a bug too

donna1 · 12-04-2012, 10:20 PM

OP Subless didn't thank me for my brilliant effort, nor has anyone helped with the small issue of converting the keypress code back to a character which is the only bit that doesnt work in my demo - which I have ASKED ABOUT TWICE.

VIPStephen was quick enough to tell me I cant have an avatar yet but when I put some effort in I dont get any acknowledgement

AndrewGSW · 12-04-2012, 10:36 PM

@donna1

Code:

String.fromCharCode(x)

is probably what you are looking for. It is not 100% reliable, though, as there is not a direct correspondence between the key-codes returned by JS and the unicode character-codes that fromCharCode() expects. (It can also depend on which key-event is used.)

BTW You will discover that you cannot expect an acknowledgement every time, even if you provide a full and correct answer to someone's question

Quote:

which I have ASKED ABOUT TWICE

..you also cannot demand an answer.

donna1 · 12-04-2012, 11:01 PM

hey String.fromCharCode(evt.keyCode) works, well sort of - except I get capital letters all the time and a few funny characters. Why do little letters not show even when Im not pressing shift?

updated demo
http://donoi.hostoi.com/term.html

The only other problem is I tried to add a line to catch the backspace to allow deletion of characters

Code:

if(evt.keyCode==8){ cursX-=8; return;}

but it just exits the browser!!
That seems to be a quirk of GoogleChrome, dont know why they picked the delete key to also go back, is there an easy way to stop that?

AndrewGSW · 12-04-2012, 11:12 PM

event.shiftKey may enable you to distinguish between capital and lowercase - depending on the key event you use (I haven't clarified this fully but believe this applies to keydown). You then could use toLowerCase() to output the correct character, or add 32 to the key-code.

Quote:

a few funny characters

..depends on what key was pressed..

I always use Backspace to return to the previous page (Back) - on all browsers. To prevent this action you either need to return false from your event (which should work on its own) or event.preventDefault() as well.