Skip to content
WJunction - Webmaster Forum

Anyone Can Improve The Looks of This Script

Status
Not open for further replies.
Its my first time to roam around on this section so i wanna give it a try. Please dont expect any payment or something in return.

I just need someone who is willing to share his/her expertise when it comes to coding. Only those who is willing to help. Some shallow minded might post here some senseless replies that asking for something for free so here is what i can say, when you were first born on this world, you all depend to any free you can get until you are grown up enough to get your own:)

I just want this thing to be improved for the sake of fun and learning, if your not into it then please dont post off topic


Here is the code by the way:

thanks for all your contribution guys, i was able to improve the idea you have provided to me, this is now how the code looks like:

Code:
<html>
<head>
<title>SharePirate Cryptographic Service | Free Online Two Way Encrypt-Decrypt Tool</title>
<meta name="description" content="SharePirate Cryptographic Service  is a new handy tool that uses MD5 cryptographic signatures on top of an XOR text encryption algorithm to form a practically unbreakable hybrid." />
<meta name="keywords" content="free online two way encryption,decryption,crytographic web tool" />
<link rel="shortcut icon" type="image/png" href="sharecrypt-icon.png" />
<script type="text/javascript" src="ZeroClipboard.js"></script>
<script type="text/javascript" src="sharepirate.js"></script>
<script type="text/javascript" src="md5.js"></script>
<script type="text/javascript" src="timer.js"></script>
<script type="text/javascript">
var _0x7b84=["\x66\x65","\x76\x61\x6C\x75\x65","\x6B\x65\x79","\x72\x65","\x6C\x65\x6E\x67\x74\x68","\x72\x6F\x75\x6E\x64","\x74\x69\x6D\x65","\x42\x2F\x73\x20","\x6D\x73\x20","\x42","","\x64\x65\x66\x61\x75\x6C\x74\x56\x61\x6C\x75\x65"]
function process(_0x4380x2)
{
	var _0x4380x3=document[_0x7b84[0]];
	var _0x4380x4=_0x4380x3[_0x7b84[2]][_0x7b84[1]];
	var _0x4380x5=_0x4380x3[_0x7b84[3]];
	var _0x4380x6=timer(function ()
	{
		_0x4380x5[_0x7b84[1]]=alphac(_0x4380x5[_0x7b84[1]],_0x4380x4,md5(_0x4380x4),_0x4380x2);
	}
	);
	var _0x4380x7=_0x4380x6();
	var _0x4380x8=_0x4380x5[_0x7b84[1]][_0x7b84[4]];
	var _0x4380x9=Math[_0x7b84[5]](_0x4380x8/_0x4380x7*1000);
	_0x4380x3[_0x7b84[6]][_0x7b84[1]]=_0x4380x9+_0x7b84[7]+_0x4380x7+_0x7b84[8]+_0x4380x8+_0x7b84[9];
}
;
function setValue(_0x4380xb)
{
	if(_0x7b84[10]!=_0x4380xb[_0x7b84[11]])
	{
		if(_0x4380xb[_0x7b84[1]]==_0x4380xb[_0x7b84[11]])
		{
			_0x4380xb[_0x7b84[1]]=_0x7b84[10];
		}
		else 
		{
			if(_0x7b84[10]==_0x4380xb[_0x7b84[1]])
			{
				_0x4380xb[_0x7b84[1]]=_0x4380xb[_0x7b84[11]];
			}
		}
	}
}
;
eval(function(p,a,c,k,e,d){e=function(c){return c.toString(36)};if(!''.replace(/^/,String)){while(c--){d[c.toString(a)]=k[c]||c.toString(a)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('(b(d,4,3){c 2,5=d.a(4)[0];f(d.g(3))8;2=d.7(4);2.3=3;2.9="//e.6.n/h/p.2#r=1&o=j";5.i.k(2,5)}(l,\'m\',\'6-q\'));',28,28,'||js|id|s|fjs|facebook|createElement|return|src|getElementsByTagName|function|var||connect|if|getElementById|en_US|parentNode|190934141062066|insertBefore|document|script|net|appId|all|jssdk|xfbml'.split('|'),0,{}))
var _0xfbae=["\x63\x6F\x70\x79\x54\x65\x78\x74","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64","\x5A\x65\x72\x6F\x43\x6C\x69\x70\x62\x6F\x61\x72\x64\x2E\x73\x77\x66"]
var clip= new ZeroClipboard(document[_0xfbae[1]](_0xfbae[0]),{moviePath:_0xfbae[2]});
</script>
<style>
*{
	margin: 0;
	padding: 0;
}
a{
	text-decoration: none;
	color: #1677cc;
}
body{
	background-color: #373C3F;
	text-align: center; 
	background-image:url(/sharecrypt.png);
	background-size: 100%;
	background-attachment:fixed;
	background-position:top left;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/sharecrypt.png', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/sharecrypt.png', sizingMethod='scale')";
}
.header{
	background-color: #d1d6c2;
	width: 570px;
	color: #1f1f1f;
	font-family: georgia;
	font-size: 18pt; 
	font-weight: bold; 
	height: 45px;
	padding: 9px;
	border: 1px solid rgba(0,0,0,0.2);
	text-align: center;
	border-radius:3px;
	border-width:1px;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	box-shadow:0px 0px 3px rgba(0,0,0,.2);
	-moz-box-shadow:0px 0px 3px rgba(0,0,0,.2);
	webkit-box-shadow:0px 0px 3px rgba(0,0,0,.2);

}
.sub_header{
	background-color: #222;
	font-size: 10pt; 
	font-family: verdana,tahoma; 
	width: 570px;
	color: #ecf2dc;
	padding: 18px;
	border: 1px solid rgba(0,0,0,0.2);
	text-align: center;

}
.sub_header3{
	background-color: #222;
	width: 570px;
	color: #CCC;
	color: #ecf2dc; 
	font-size: 10pt; 
	font-family: tahoma; 
	padding: 18px;
	text-align: left;
	height: 72px;
}
.sub_header4{
	background-color: #d1d6c2;
	width: 570px;
	color: #1f1f1f;  
	font-size: 9pt; 
	font-family: tahoma;
	padding: 9px;
	a:link    {color:#1c77ff;}
	a:visited {color:#3d0dff;}
	a:hover   {color:#d1d6c2;}
	a:active  {color:1c77ff;}
	border: 1px solid rgba(0,0,0,0.2);
	text-align: center;
	border-radius:3px;
	border-width:1px;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	box-shadow:0px 0px 3px rgba(0,0,0,.2);
	-moz-box-shadow:0px 0px 3px rgba(0,0,0,.2);
	webkit-box-shadow:0px 0px 3px rgba(0,0,0,.2);

}
.fb-comments{
	background-color: #222;
	width: 606px;
	color: #CCC;
	padding: 0px;
	text-align: center;
	height: auto;
}
#content{
	background: #17b7c3; /* Old browsers */
	background: -moz-linear-gradient(top,  #17b7c3 0%, #0086a0 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#17b7c3), color-stop(100%,#0086a0)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #17b7c3 0%,#0086a0 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #17b7c3 0%,#0086a0 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #17b7c3 0%,#0086a0 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #17b7c3 0%,#0086a0 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#17b7c3', endColorstr='#0086a0',GradientType=0 ); /* IE6-9 */
	padding: 9px;
	text-align: center;
	font: Tahoma;
	width: 570px;
}
textarea{
	background: #FFF;
	border: 1px solid #e3e3e3;
	box-shadow: 0 0 5px rgba(0,0,0,0.1) inset;
	padding: 5px;
	border-radius: 3px;
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-ms-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
	margin-bottom:  5px;
}
textarea:focus{
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(3, 149, 217, 0.6);
	outline: none;
	border: 1px solid rgba(3, 149, 217, 0.9);
}
input{
	background: #FFF;
	border: 1px solid #e3e3e3;
	box-shadow: 0 0 5px rgba(0,0,0,0.1) inset;
	padding: 9px;
	border-radius: 3px;
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-ms-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}
input:focus{
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(3, 149, 217, 0.6);
	outline: none;
	border: 1px solid rgba(3, 149, 217, 0.9);
}
p{
	margin-top: 5px;
	margin-bottom: 7px;
}
.button{
	color: #fff ;
	background-color: #333333;
	white-space: nowrap;
	line-height: 1em;
	position: relative;
	font-weight: bold;
	font-size: 9pt;
 	font-family: verdana,tahoma; 
	outline: none;
	overflow: visible;
	cursor: pointer;
	border: 1px solid #999;
	border: rgba(0, 0, 0, .2) 1px solid;
	border-bottom: rgba(0, 0, 0, .4) 1px solid;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
	margin-bottom: 10px;
}
.button:active{
	top: 1px;
}

</style>
</head>
<div align="center">
	<div class="header">
		SharePirate Cryptographic Service
	</div>
	<div class="sub_header">
		<b>Encrypt</b> and <b>Decrypt</b> is a new handy tool that uses MD5 cryptographic signatures on top of an XOR text encryption algorithm to form a practically unbreakable hybrid.
	</div>
	<div id="content">
		<form action="?" name="fe"onsubmit="process(window.a=!window.a); return false">
			<p>
			<textarea style="color: #1f1f1f;  font-size: 10pt;  font-family: tahoma;" onfocus="setValue(this)" onblur="setValue(this)" rows="12" cols="81" name="re" id="textData">
		Type or Paste your text to be encrypted or decrypted here
			</textarea>
			<p>
			<textarea style="color: #1f1f1f;  font-size: 10pt;  font-family: tahoma;" onfocus="setValue(this)" onblur="setValue(this)" rows="2" cols="54"  name="key" id="textData">
		Input Encryption-Decryption Key Here
			</textarea>
			</p>
			<input class="button" type="button" value="Encrypt" onclick="process(1)" />
			<input class="button" type="button"  value="Decrypt" onclick="process(0)" />
			<input class="button" type="reset"value="Reset" />
			<input type="button" value="Copy" class="button" id="copyText" data-clipboard-target="textData">
			</p>

		</form>
	</div>
	<div class="sub_header3" >
		<div style="float:left;">
			<span style="color: #ccc; font-weight:bold;">
				How?
			</span>
				<p>	
				Input any key you want to encrypt or.<br>
				Input key provided to you, to decrypt.<br>
				Then hit appropriate process button<br>
				</div>
		<div style="float:right;">
			<span style="color: #ccc; font-weight:bold;">
				Help?
			</span>
				<p>	
				Looking for key, web is fighting for what?<br>
				Answer starts with: F<br>
				*Don't post any key on the comment box<br>
				</p>
		</div>
	</div>
	<div id="fb-root">
	</div>
	<div class="fb-comments" data-href="shareme.in" data-width="570"  data-height="45" data-num-posts="3" data-colorscheme="dark" >
	</div>
	<div class="sub_header4">
		Powered By: <a href="http://sharepirate.com" target="_blank">SharePirate.Com</a> | Get Privileged: <a href="http://www.facebook.com/SharePirateCom" target="_blank">Become Fan</a>
	</div>
</div>
</body>
</html>

currently, this is how it looks:

5QKVV3j.png


What is added due to their generous help?

-better styling
-copy button is added

what more that can be possibly added?

auto strip characters like the http:// if we paste a link to minimize encrypted characters or auto linkify detected URLs after decryption
 
Last edited:

14 comments

No money no work:))

Please don't comment if you have nothing to contribute.

Ontopic:

Quick and dirty but here you go some basic styling nothing amazing:
f5bb804dfd85f24ca0e9df9aaf76dd29.png


Code:
<html><head>
<title>SharePirate Cryptographic Service</title>
<meta name="description" content="SharePirate Cryptographic Service does Encrypt and Decrypt, a new innovation from us that uses MD5 cryptographic signatures on top of an XOR text encryption algorithm to form a practically unbreakable hybrid." />
<meta name="keywords" content="free online encryption,decrypt,crytographic service" />
<script type="text/javascript" src="1.js"></script>
<script type="text/javascript" src="2.js"></script>
<script type="text/javascript" src="3.js"></script>
<script type="text/javascript">
function process(on) {
var fe = document.fe;
var ke = fe.key.value;
var re = fe.re;
var f = timer(function() {re.value = alphac(re.value, ke, md5(ke), on)});
var t = f();
var d = re.value.length;
var r = Math.round(d / t * 1000);
fe.time.value = r + 'B/s ' + t + 'ms ' + d + 'B';}
function setValue(field)
{
	if(''!=field.defaultValue)
	{
		if(field.value==field.defaultValue)
		{
			field.value='';
		}
		else if(''==field.value)
		{
			field.value=field.defaultValue;
		}
	}
}</script>
<style>
*{
	margin: 0;
	padding: 0;
}
a{
	text-decoration: none;
	color: #CCC;
}
body{
	background-color: #373C3F;
}
.header{
	background-color: #373C3F;
	width: 100%;
	color: #CCC;
	padding: 5px;
	border: 1px solid rgba(0,0,0,0.2);
}
.sub_header{
	background-color: #222;
	width: 100%;
	color: #CCC;
	padding: 10px;
	border: 1px solid rgba(0,0,0,0.2);
}
#content{
	background: #17b7c3; /* Old browsers */
	background: -moz-linear-gradient(top,  #17b7c3 0%, #0086a0 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#17b7c3), color-stop(100%,#0086a0)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #17b7c3 0%,#0086a0 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #17b7c3 0%,#0086a0 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #17b7c3 0%,#0086a0 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #17b7c3 0%,#0086a0 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#17b7c3', endColorstr='#0086a0',GradientType=0 ); /* IE6-9 */
	padding: 10px;
	text-align: center;
}
textarea{
	background: #FFF;
	border: 1px solid #e3e3e3;
	box-shadow: 0 0 5px rgba(0,0,0,0.1) inset;
	padding: 5px;
	border-radius: 3px;
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-ms-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
	margin-bottom:  5px;
}
textarea:focus{
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(3, 149, 217, 0.6);
	outline: none;
	border: 1px solid rgba(3, 149, 217, 0.9);
}
input{
	background: #FFF;
	border: 1px solid #e3e3e3;
	box-shadow: 0 0 5px rgba(0,0,0,0.1) inset;
	padding: 5px;
	border-radius: 3px;
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-ms-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}
input:focus{
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(3, 149, 217, 0.6);
	outline: none;
	border: 1px solid rgba(3, 149, 217, 0.9);
}
p{
	margin-top: 5px;
	margin-bottom: 7px;
}
.button{
	color: #FFF;
	background-color: #333333;
	white-space: nowrap;
	line-height: 1em;
	position: relative;
	outline: none;
	overflow: visible;
	cursor: pointer;
	border: 1px solid #999;
	border: rgba(0, 0, 0, .2) 1px solid;
	border-bottom: rgba(0, 0, 0, .4) 1px solid;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
	margin-bottom: 10px;
}
.button:active{
	top: 1px;
}

</style>
</head>
<body>
<div class="header">
	<h2>SharePirate Cryptographic Service</h2>
</div>
<div class="sub_header">
	<b>Encrypt</b> and <b>Decrypt</b> is a new innovation from us that uses MD5 cryptographic signatures<br />
	on top of an XOR text encryption algorithm to form a practically unbreakable hybrid.
</div>
<div id="content">
<form action="?" name="fe"onsubmit="process(window.a=!window.a); return false">

<p>
<textarea style="color: #1f1f1f; font-family: tahoma"  onfocus="setValue(this)" onblur="setValue(this)" rows="12" cols="81" name="re">
Type or Paste your text to be encrypted or decrypted here</textarea>
<p>
<span style="color: #2f2f2f;; font-family: georgia">Key</span> <input type="text" name="key" size="39" />
<span style="color: #2f2f2f; font-family: georgia">Time</span> <input type="text" name="time" size="21" /><br />
</p>
<input class="button" type="button" value="Encrypt" onclick="process(1)" />
<input class="button" type="button"  value="Decrypt" onclick="process(0)" />

<input class="button" type="reset"value="Reset" />
</p>

</form>
</div>
<div class="sub_header">
<b><span style="color: #CCC; font-size: 11pt; font-family: verdana,tahoma">Note:</span></b>
<p><span style="color: #CCC; font-size: 10pt; font-family: verdana,tahoma">If you happen to drop by here for no particular reason then this is how to use this service.</span>
<ol>
<span style="color: #CCC; font-size: 10pt; font-family:verdana,tahoma">	
	<li>Input any key you want to encrypt or.</li>
	<li>Input the key provided to you to decrypt.</li>
	<li>Then hit the appropriate process button</li>
</span>
</ol>
</div>
<div class="header">
Powered By: <a href="http://sharepirate.com/sharecrypt.html" target="_blank">SharePirate.Com</a>
</div>
</span>
</body></html>
 
Well here I will give you 5 minutes, a few things to note in your code,
  • Always indent your code proplery.
  • You did not declare DOCTYPE.
  • When adding javascript within html its good to use CDATA for validation.
  • Do not use inline styles, instead give a class or div name and and include that as external style.css file or add above as below.
  • I notice you are giving your javascript file names 1,2,3, which is not a good practise, always try to give a generic name, and if it can put all your javasript in one file.
  • And put your javascript at the end of page.

Do not use this code as is, Its just for demonstration and code have some errors, compare this code with yours and you will learn a lot of stuff, good luck:
PHP:
<!DOCTYPE html>
<html>
	<head>
	<title>SharePirate Cryptographic Service</title>
	<meta name="description" content="SharePirate Cryptographic Service does Encrypt and Decrypt, a new innovation from us that uses MD5 cryptographic signatures on top of an XOR text encryption algorithm to form a practically unbreakable hybrid." />
	<meta name="keywords" content="free online encryption,decrypt,crytographic service" />
	<style type="text/css">
		h2 span
		{
			color: #454545; 
			font-family: georgia;
		}
		.info , ul#lists li
		{
			color:#454545;
			font-size: 10pt; 
			font-family: verdana,tahoma;
		}
		textarea, input["type=button"]
		{
			color: #1f1f1f;
			font-family: tahoma;
		}
		.keys
		{
			color: #2f2f2f;
			 font-family: georgia;
		}
		.copyright
		{
			color: #1f1f1f;  
			font-size: 9pt; 
			font-family: tahoma;
		}
		
	</style>
</head>
<body>
	<h2><span>SharePirate Cryptographic Service</span></h2>
	<p>
		<span class="info">
			<b>Encrypt</b> and <b>Decrypt</b> is a new innovation from us that uses MD5 cryptographic signatures
		</span>
	</p>
	<span  class="info">on top of an XOR text encryption algorithm to form a 
	practically unbreakable hybrid.
	</span>
	<br /><br />
	<form action="/" name="fe"onsubmit="process(window.a=!window.a); return false">
	<div align="left">
		<p>
			<textarea onfocus="setValue(this)" onblur="setValue(this)" rows="12" cols="81" name="re">
					Type or Paste your text to be encrypted or decrypted here
			</textarea>
			<p>
			<span class="keys">Key</span> 
				<input type="text" name="key" size="39" />
				<span  class="keys">Time</span> 
				<input type="text" name="time" size="21" /><br />
			</p>
			<input type="button" value="Encrypt" onclick="process(1)" />
			<input type="button" value="Decrypt" onclick="process(0)" />
			<input type="button" value="Reset" />
		</p>
	</div>
	</form>
	
<span  class="info"><b>Note:</b></span>

	<span  class="info">
		If you happen to drop by here for no particular reason then this is how to use this service
	 </span>
	<ol id="lists">
		<li>Input any key you want to encrypt or.</li>
		<li>Input the key provided to you to decrypt.</li>
		<li>Then hit the appropriate process button</li>
	</ol>
	<span class="copyright">
	Powered By: <a href="http://sharepirate.com/sharecrypt.html" target="_blank">SharePirate.Com</a>
	</span>


	<script type="text/javascript" src="1.js"></script>
	<script type="text/javascript" src="2.js"></script>
	<script type="text/javascript" src="3.js"></script>
	<script type="text/javascript">
//<![CDATA[			
	function process(on) {
		var fe = document.fe;
		var ke = fe.key.value;
		var re = fe.re;
		var f = timer(function() {re.value = alphac(re.value, ke, md5(ke), on)});
		var t = f();
		var d = re.value.length;
		var r = Math.round(d / t * 1000);
		fe.time.value = r + 'B/s ' + t + 'ms ' + d + 'B';}
	function setValue(field)
	{
		if(''!=field.defaultValue)
		{
			if(field.value==field.defaultValue)
			{
				field.value='';
			}
			else if(''==field.value)
			{
				field.value=field.defaultValue;
			}
		}
	}
//]]>		
	</script>
</body>
</html>
 
Last edited:
thanks a lot everyone, sorry, im not just good in styling or whatever making something look better, all i do is code with my instinct, it mess up my mind thinking of style so thats why i ended up giving up after a few tries.

i will use the improve code, i will try to even make it look better

thank you so much

---------- Post added at 10:46 AM ---------- Previous post was at 10:41 AM ----------

if anyone here can add the copy function on my code, ill be very thankful because ive been doing it for 2 days now and i cant do it right, tried jquery and everything, i cant really do it right, i might be missing something
 
i tried to use the zero clipboard but i cant seem to make it work. hoep you can help me to make it work, it even confuse where to add those jquery and swf file
 
Upload ZeroClipboard.js and ZeroClipboard.swf to your website directory. Add this code before end of body tag:

PHP:
<script src="/path/to/ZeroClipboard.js"></script>
<script>
var clip = new ZeroClipboard( document.getElementById("copyText"), {
  moviePath: "/path/to/ZeroClipboard.swf"
} );
</script>

Also, add this after your Reset button:
PHP:
<input type="button" value="Copy" class="button" id="copyText" data-clipboard-target="textData">

Don't forget to modify your textarea to this:
PHP:
<textarea style="color: #1f1f1f; font-family: tahoma"  onfocus="setValue(this)" onblur="setValue(this)" rows="12" cols="81" name="re" id="textData">
 
Just wanted to share a cleaner version of your code.
When you clean up the code its much easier to read.

Code:
<html>
  <head>
    <title>
      SharePirate Cryptographic Service
    </title>
    <meta name="description" content="SharePirate Cryptographic Service does Encrypt and Decrypt, a new innovation from us that uses MD5 cryptographic signatures on top of an XOR text encryption algorithm to form a practically unbreakable hybrid." />
    <meta name="keywords" content="free online encryption,decrypt,crytographic service" />
    <script type="text/javascript" src="1.js">
    </script>
    <script type="text/javascript" src="2.js">
    </script>
    <script type="text/javascript" src="3.js">
    </script>
    <script type="text/javascript">
      function process(on) {
        var fe = document.fe;
        var ke = fe.key.value;
        var re = fe.re;
        var f = timer(function() {
          re.value = alphac(re.value, ke, md5(ke), on)}
                     );
        var t = f();
        var d = re.value.length;
        var r = Math.round(d / t * 1000);
        fe.time.value = r + 'B/s ' + t + 'ms ' + d + 'B';
      }
      function setValue(field)
      {
        if(''!=field.defaultValue)
        {
          if(field.value==field.defaultValue)
          {
            field.value='';
        }
      else if(''==field.value)
      {
        field.value=field.defaultValue;
      }
    }
}
  </script>
  </head>
  <body>
    <h2>
      <span style="color: #454545; font-family: georgia">
        SharePirate Cryptographic Service
      </span>
    </h2>
    <p>
      <span style="color:#454545; font-size: 10pt; font-family: verdana,tahoma">
        <b>
          Encrypt
        </b>
        and 
        <b>
          Decrypt
        </b>
        is a new innovation from us that uses MD5 cryptographic
        signatures
      </span>
    </p>
    <span style="color: #454545; font-size: 10pt; font-family: verdana,tahoma">
      on top of an XOR text encryption algorithm to form a 
      practically unbreakable hybrid.
    </span>
  </br>
</br>
<form action="?" name="fe"onsubmit="process(window.a=!window.a); return false">
  <div align="left">
    <p>
      <textarea style="color: #1f1f1f; font-family: tahoma"  onfocus="setValue(this)" onblur="setValue(this)" rows="12" cols="81" name="re">
        Type or Paste your text to be encrypted or decrypted here
      </textarea>
      <p>
        <span style="color: #2f2f2f;; font-family: georgia">
          Key
        </span>
        
        <input type="text" name="key" size="39" />
        <span style="color: #2f2f2f; font-family: georgia">
          Time
        </span>
        
        <input type="text" name="time" size="21" />
        <br />
    </p>
    <input type="button" style="color: #1f1f1f; font-family: tahoma" value="Encrypt" onclick="process(1)" />
    <input type="button" style="color: #1f1f1f; font-family: tahoma" value="Decrypt" onclick="process(0)" />
    
    <input type="reset" style="color: #1f1f1f; font-family: tahoma" value="Reset" />
  </p>
</div>
</form>
<b>
  <span style="color: #00000; font-size: 11pt; font-family: verdana,tahoma">
    Note:
  </span>
</b>
<p>
  <span style="color: #454545; font-size: 10pt; font-family: verdana,tahoma">
    If you happen to drop by here for no particular reason then this is how to use this service.
  </span>
  <ol>
    <span style="color: #454545; font-size: 10pt; font-family:verdana,tahoma">
      
      <li>
        Input any key you want to encrypt or.
      </li>
      <li>
        Input the key provided to you to decrypt.
      </li>
      <li>
        Then hit the appropriate process button
      </li>
    </span>
</ol>
<span style="color: #1f1f1f;  font-size: 9pt; font-family: tahoma">
  Powered By: 
  <a href="http://sharepirate.com/sharecrypt.html" target="_blank">
    SharePirate.Com
  </a>
</span>
</body>
</html>
 
im now able to make the copy function work, thanks much guys, i also tried to change some colors. i appreciate all your effor to help me

Please don't comment if you have nothing to contribute.

Ontopic:

Quick and dirty but here you go some basic styling nothing amazing:

thank you so much for your responsive styling

hope anyone can contribute about the code having an image based site title and also can set a width of the layout because the ox being on center while other text is on the left, i always desire to have a symmetrical design :)
 
Last edited:
thanks for all your contribution guys, i was able to improve the idea you have provided to me, this is now how the code looks like:

Code:
<html>
<head>
<title>SharePirate Cryptographic Service | Free Online Two Way Encrypt-Decrypt Tool</title>
<meta name="description" content="SharePirate Cryptographic Service  is a new handy tool that uses MD5 cryptographic signatures on top of an XOR text encryption algorithm to form a practically unbreakable hybrid." />
<meta name="keywords" content="free online two way encryption,decryption,crytographic web tool" />
<link rel="shortcut icon" type="image/png" href="sharecrypt-icon.png" />
<script type="text/javascript" src="ZeroClipboard.js"></script>
<script type="text/javascript" src="sharepirate.js"></script>
<script type="text/javascript" src="md5.js"></script>
<script type="text/javascript" src="timer.js"></script>
<script type="text/javascript">
var _0x7b84=["\x66\x65","\x76\x61\x6C\x75\x65","\x6B\x65\x79","\x72\x65","\x6C\x65\x6E\x67\x74\x68","\x72\x6F\x75\x6E\x64","\x74\x69\x6D\x65","\x42\x2F\x73\x20","\x6D\x73\x20","\x42","","\x64\x65\x66\x61\x75\x6C\x74\x56\x61\x6C\x75\x65"]
function process(_0x4380x2)
{
	var _0x4380x3=document[_0x7b84[0]];
	var _0x4380x4=_0x4380x3[_0x7b84[2]][_0x7b84[1]];
	var _0x4380x5=_0x4380x3[_0x7b84[3]];
	var _0x4380x6=timer(function ()
	{
		_0x4380x5[_0x7b84[1]]=alphac(_0x4380x5[_0x7b84[1]],_0x4380x4,md5(_0x4380x4),_0x4380x2);
	}
	);
	var _0x4380x7=_0x4380x6();
	var _0x4380x8=_0x4380x5[_0x7b84[1]][_0x7b84[4]];
	var _0x4380x9=Math[_0x7b84[5]](_0x4380x8/_0x4380x7*1000);
	_0x4380x3[_0x7b84[6]][_0x7b84[1]]=_0x4380x9+_0x7b84[7]+_0x4380x7+_0x7b84[8]+_0x4380x8+_0x7b84[9];
}
;
function setValue(_0x4380xb)
{
	if(_0x7b84[10]!=_0x4380xb[_0x7b84[11]])
	{
		if(_0x4380xb[_0x7b84[1]]==_0x4380xb[_0x7b84[11]])
		{
			_0x4380xb[_0x7b84[1]]=_0x7b84[10];
		}
		else 
		{
			if(_0x7b84[10]==_0x4380xb[_0x7b84[1]])
			{
				_0x4380xb[_0x7b84[1]]=_0x4380xb[_0x7b84[11]];
			}
		}
	}
}
;
eval(function(p,a,c,k,e,d){e=function(c){return c.toString(36)};if(!''.replace(/^/,String)){while(c--){d[c.toString(a)]=k[c]||c.toString(a)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('(b(d,4,3){c 2,5=d.a(4)[0];f(d.g(3))8;2=d.7(4);2.3=3;2.9="//e.6.n/h/p.2#r=1&o=j";5.i.k(2,5)}(l,\'m\',\'6-q\'));',28,28,'||js|id|s|fjs|facebook|createElement|return|src|getElementsByTagName|function|var||connect|if|getElementById|en_US|parentNode|190934141062066|insertBefore|document|script|net|appId|all|jssdk|xfbml'.split('|'),0,{}))
var _0xfbae=["\x63\x6F\x70\x79\x54\x65\x78\x74","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64","\x5A\x65\x72\x6F\x43\x6C\x69\x70\x62\x6F\x61\x72\x64\x2E\x73\x77\x66"]
var clip= new ZeroClipboard(document[_0xfbae[1]](_0xfbae[0]),{moviePath:_0xfbae[2]});
</script>
<style>
*{
	margin: 0;
	padding: 0;
}
a{
	text-decoration: none;
	color: #1677cc;
}
body{
	background-color: #373C3F;
	text-align: center; 
	background-image:url(/sharecrypt.png);
	background-size: 100%;
	background-attachment:fixed;
	background-position:top left;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/sharecrypt.png', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/sharecrypt.png', sizingMethod='scale')";
}
.header{
	background-color: #d1d6c2;
	width: 570px;
	color: #1f1f1f;
	font-family: georgia;
	font-size: 18pt; 
	font-weight: bold; 
	height: 45px;
	padding: 9px;
	border: 1px solid rgba(0,0,0,0.2);
	text-align: center;
	border-radius:3px;
	border-width:1px;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	box-shadow:0px 0px 3px rgba(0,0,0,.2);
	-moz-box-shadow:0px 0px 3px rgba(0,0,0,.2);
	webkit-box-shadow:0px 0px 3px rgba(0,0,0,.2);

}
.sub_header{
	background-color: #222;
	font-size: 10pt; 
	font-family: verdana,tahoma; 
	width: 570px;
	color: #ecf2dc;
	padding: 18px;
	border: 1px solid rgba(0,0,0,0.2);
	text-align: center;

}
.sub_header3{
	background-color: #222;
	width: 570px;
	color: #CCC;
	color: #ecf2dc; 
	font-size: 10pt; 
	font-family: tahoma; 
	padding: 18px;
	text-align: left;
	height: 72px;
}
.sub_header4{
	background-color: #d1d6c2;
	width: 570px;
	color: #1f1f1f;  
	font-size: 9pt; 
	font-family: tahoma;
	padding: 9px;
	a:link    {color:#1c77ff;}
	a:visited {color:#3d0dff;}
	a:hover   {color:#d1d6c2;}
	a:active  {color:1c77ff;}
	border: 1px solid rgba(0,0,0,0.2);
	text-align: center;
	border-radius:3px;
	border-width:1px;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	box-shadow:0px 0px 3px rgba(0,0,0,.2);
	-moz-box-shadow:0px 0px 3px rgba(0,0,0,.2);
	webkit-box-shadow:0px 0px 3px rgba(0,0,0,.2);

}
.fb-comments{
	background-color: #222;
	width: 606px;
	color: #CCC;
	padding: 0px;
	text-align: center;
	height: auto;
}
#content{
	background: #17b7c3; /* Old browsers */
	background: -moz-linear-gradient(top,  #17b7c3 0%, #0086a0 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#17b7c3), color-stop(100%,#0086a0)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #17b7c3 0%,#0086a0 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #17b7c3 0%,#0086a0 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #17b7c3 0%,#0086a0 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #17b7c3 0%,#0086a0 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#17b7c3', endColorstr='#0086a0',GradientType=0 ); /* IE6-9 */
	padding: 9px;
	text-align: center;
	font: Tahoma;
	width: 570px;
}
textarea{
	background: #FFF;
	border: 1px solid #e3e3e3;
	box-shadow: 0 0 5px rgba(0,0,0,0.1) inset;
	padding: 5px;
	border-radius: 3px;
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-ms-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
	margin-bottom:  5px;
}
textarea:focus{
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(3, 149, 217, 0.6);
	outline: none;
	border: 1px solid rgba(3, 149, 217, 0.9);
}
input{
	background: #FFF;
	border: 1px solid #e3e3e3;
	box-shadow: 0 0 5px rgba(0,0,0,0.1) inset;
	padding: 9px;
	border-radius: 3px;
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-ms-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}
input:focus{
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(3, 149, 217, 0.6);
	outline: none;
	border: 1px solid rgba(3, 149, 217, 0.9);
}
p{
	margin-top: 5px;
	margin-bottom: 7px;
}
.button{
	color: #fff ;
	background-color: #333333;
	white-space: nowrap;
	line-height: 1em;
	position: relative;
	font-weight: bold;
	font-size: 9pt;
 	font-family: verdana,tahoma; 
	outline: none;
	overflow: visible;
	cursor: pointer;
	border: 1px solid #999;
	border: rgba(0, 0, 0, .2) 1px solid;
	border-bottom: rgba(0, 0, 0, .4) 1px solid;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
	margin-bottom: 10px;
}
.button:active{
	top: 1px;
}

</style>
</head>
<div align="center">
	<div class="header">
		SharePirate Cryptographic Service
	</div>
	<div class="sub_header">
		<b>Encrypt</b> and <b>Decrypt</b> is a new handy tool that uses MD5 cryptographic signatures on top of an XOR text encryption algorithm to form a practically unbreakable hybrid.
	</div>
	<div id="content">
		<form action="?" name="fe"onsubmit="process(window.a=!window.a); return false">
			<p>
			<textarea style="color: #1f1f1f;  font-size: 10pt;  font-family: tahoma;" onfocus="setValue(this)" onblur="setValue(this)" rows="12" cols="81" name="re" id="textData">
		Type or Paste your text to be encrypted or decrypted here
			</textarea>
			<p>
			<textarea style="color: #1f1f1f;  font-size: 10pt;  font-family: tahoma;" onfocus="setValue(this)" onblur="setValue(this)" rows="2" cols="54"  name="key" id="textData">
		Input Encryption-Decryption Key Here
			</textarea>
			</p>
			<input class="button" type="button" value="Encrypt" onclick="process(1)" />
			<input class="button" type="button"  value="Decrypt" onclick="process(0)" />
			<input class="button" type="reset"value="Reset" />
			<input type="button" value="Copy" class="button" id="copyText" data-clipboard-target="textData">
			</p>

		</form>
	</div>
	<div class="sub_header3" >
		<div style="float:left;">
			<span style="color: #ccc; font-weight:bold;">
				How?
			</span>
				<p>	
				Input any key you want to encrypt or.<br>
				Input key provided to you, to decrypt.<br>
				Then hit appropriate process button<br>
				</div>
		<div style="float:right;">
			<span style="color: #ccc; font-weight:bold;">
				Help?
			</span>
				<p>	
				Looking for key, web is fighting for what?<br>
				Answer starts with: F<br>
				*Don't post any key on the comment box<br>
				</p>
		</div>
	</div>
	<div id="fb-root">
	</div>
	<div class="fb-comments" data-href="shareme.in" data-width="570"  data-height="45" data-num-posts="3" data-colorscheme="dark" >
	</div>
	<div class="sub_header4">
		Powered By: <a href="http://sharepirate.com" target="_blank">SharePirate.Com</a> | Get Privileged: <a href="http://www.facebook.com/SharePirateCom" target="_blank">Become Fan</a>
	</div>
</div>
</body>
</html>

currently, this is how it looks:

5QKVV3j.png
 
Status
Not open for further replies.

About the author

Q
Active Member · Joined
programming and file sharing
291
Messages
39
Reactions
28
Points

Advertise on WJunction

Reach 1000's of webmasters, hosts & affiliates. Banner & sponsored-thread slots available.

Contact us
Back
Top Bottom