kivlor/codepen.php

## codepen.php
<?php

/*

This is a very dirty implementation of a 'code pen' for quickly testing small snippets of PHP code.

- It will eval anything and everything entered into the code field
- It should only ever be used on a local machine, never on the dev servers and espiacally never on a live server

USE WITH CAUTION!

*/

$code = '';
$eval = false;

if(isset($_POST['submit']))
{
	$code = isset($_POST['code']) ? stripslashes(trim($_POST['code'])) : '';
	$eval = true;
}

?>
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>PHP Code Pen</title>
		<style type="text/css">
			article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block }
			audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
			audio:not([controls]) { display: none }
			[hidden] { display: none }
			html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
			body { margin: 0 }
			body, button, input, select, textarea { font-family: sans-serif }
			a { color: #00e }
			a:visited { color: #551a8b }
			a:focus { outline: thin dotted }
			a:hover, a:active { outline: 0 }
			abbr[title] { border-bottom: 1px dotted }
			b, strong { font-weight: bold }
			blockquote { margin: 1em 40px }
			dfn { font-style: italic }
			mark { background: #ff0; color: #000; }
			pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
			pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
			q { quotes: none }
			q:before, q:after { content: ''; content: none; }
			small { font-size: 75% }
			sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
			sup { top: -0.5em }
			sub { bottom: -0.25em }
			ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
			dd { margin: 0 0 0 40px }
			nav ul, nav ol { list-style: none; list-style-image: none; }
			img { border: 0; -ms-interpolation-mode: bicubic; }
			svg:not(:root) { overflow: hidden }
			figure { margin: 0 }
			form { margin: 0 }
			fieldset { margin: 0 2px; padding: 0.35em 0.625em 0.75em; }
			legend { border: 0; *margin-left: -7px; }
			button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
			button, input { line-height: normal; *overflow: visible; }
			table button, table input { *overflow: auto }
			button, html input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
			input[type="checkbox"], input[type="radio"] { box-sizing: border-box }
			input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
			input[type="search"]::-webkit-search-decoration { -webkit-appearance: none }
			button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
			textarea { overflow: auto; vertical-align: top; }
			table { border-collapse: collapse; border-spacing: 0; }

			html, body {
				background: #eee;
			}

			h1, h2 {
				margin: 0;
				padding: 0;
			}

			#wrap {
				margin: 20px auto;
				padding: 10px 0;
				width: 90%;
				background: #fff;
				border-radius: 5px;
				box-shadow: 0 0 5px rgba(0,0,0,0.25);
			}

				#header {
					margin: 0 20px;
				}

				#input, #output {
					margin: 20px;
				}

				#header {
					padding: 10px 0;
				}

				#input {
				}

					#input header {
						padding: 10px 0;
					}

					#input form {

					}

						#input form fieldset {
							border: none;
							padding: 10px 0;
						}

							#input form fieldset label {
								display: block;
								margin-bottom: 10px;
							}

							#input form fieldset textarea {
								padding: 10px;
								width: 100%;
								resize: vertical;

								border: 1px solid #ccc;
								box-sizing: border-box;
							}

							#input form fieldset input {
								display: inline-block;
								margin: 0;
								padding: 10px 20px;
								background: #333;
								color: #fff;
								border: none;
								border-radius: 5px;
							}

				#output {
				}

					#output header {
						padding: 10px 0;
					}

					#output section {
						padding: 10px 0 40px;
					}

						#output section pre {
							margin: 0;
							padding: 0;
							text-align: left;
						}
		</style>
	</head>
	<body>
		<div id="wrap">
			<header id="header">
				<h1>PHP Code Pen</h1>
			</header>

			<section id="input">
				<header>
					<h2>Input</h2>
				</header>

				<form action="" method="post">
					<fieldset>
						<label>Code:</label>
						<textarea id="code" name="code" placeholder="Enter some PHP code, the &lt;?php ... ?&gt; arn't required :)" cols="80"><?php echo $code; ?></textarea>
					</fieldset>

					<fieldset>
						<input type="submit" name="submit" value="Run" />
					</fieldset>
				</form>
			</section>

			<section id="output">
				<header>
					<h2>Output</h2>
				</header>

				<section>
					<pre>
<?php
if($eval)
{
eval($code);
}
else
{
echo "...";
}
?>
					</pre>
				</section>
			</section>
		</div>

		<script>
			document.getElementById('code').addEventListener('keydown', function(e){
				var k = e.keyCode || e.which

				if(k == 9)
				{
					e.preventDefault()

					var v = this.value
					var s = this.selectionStart
					var e = this.selectionEnd

					this.value = v.substring(0,s) + "\t" + v.substring(e)
					this.selectionStart = this.selectionEnd = s+1
				}
			})
		</script>
	</body>
</html>
	<?php

	/*

	This is a very dirty implementation of a 'code pen' for quickly testing small snippets of PHP code.

	- It will eval anything and everything entered into the code field
	- It should only ever be used on a local machine, never on the dev servers and espiacally never on a live server

	USE WITH CAUTION!

	*/

	$code = '';
	$eval = false;

	if(isset($_POST['submit']))
	{
	$code = isset($_POST['code']) ? stripslashes(trim($_POST['code'])) : '';
	$eval = true;
	}

	?>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>PHP Code Pen</title>
	<style type="text/css">
	article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block }
	audio, canvas, video { display: inline-block; display: inline; zoom: 1; }
	audio:not([controls]) { display: none }
	[hidden] { display: none }
	html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
	body { margin: 0 }
	body, button, input, select, textarea { font-family: sans-serif }
	a { color: #00e }
	a:visited { color: #551a8b }
	a:focus { outline: thin dotted }
	a:hover, a:active { outline: 0 }
	abbr[title] { border-bottom: 1px dotted }
	b, strong { font-weight: bold }
	blockquote { margin: 1em 40px }
	dfn { font-style: italic }
	mark { background: #ff0; color: #000; }
	pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
	pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
	q { quotes: none }
	q:before, q:after { content: ''; content: none; }
	small { font-size: 75% }
	sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
	sup { top: -0.5em }
	sub { bottom: -0.25em }
	ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
	dd { margin: 0 0 0 40px }
	nav ul, nav ol { list-style: none; list-style-image: none; }
	img { border: 0; -ms-interpolation-mode: bicubic; }
	svg:not(:root) { overflow: hidden }
	figure { margin: 0 }
	form { margin: 0 }
	fieldset { margin: 0 2px; padding: 0.35em 0.625em 0.75em; }
	legend { border: 0; *margin-left: -7px; }
	button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
	button, input { line-height: normal; *overflow: visible; }
	table button, table input { *overflow: auto }
	button, html input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
	input[type="checkbox"], input[type="radio"] { box-sizing: border-box }
	input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
	input[type="search"]::-webkit-search-decoration { -webkit-appearance: none }
	button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
	textarea { overflow: auto; vertical-align: top; }
	table { border-collapse: collapse; border-spacing: 0; }

	html, body {
	background: #eee;
	}

	h1, h2 {
	margin: 0;
	padding: 0;
	}

	#wrap {
	margin: 20px auto;
	padding: 10px 0;
	width: 90%;
	background: #fff;
	border-radius: 5px;
	box-shadow: 0 0 5px rgba(0,0,0,0.25);
	}

	#header {
	margin: 0 20px;
	}

	#input, #output {
	margin: 20px;
	}

	#header {
	padding: 10px 0;
	}

	#input {
	}

	#input header {
	padding: 10px 0;
	}

	#input form {

	}

	#input form fieldset {
	border: none;
	padding: 10px 0;
	}

	#input form fieldset label {
	display: block;
	margin-bottom: 10px;
	}

	#input form fieldset textarea {
	padding: 10px;
	width: 100%;
	resize: vertical;

	border: 1px solid #ccc;
	box-sizing: border-box;
	}

	#input form fieldset input {
	display: inline-block;
	margin: 0;
	padding: 10px 20px;
	background: #333;
	color: #fff;
	border: none;
	border-radius: 5px;
	}

	#output {
	}

	#output header {
	padding: 10px 0;
	}

	#output section {
	padding: 10px 0 40px;
	}

	#output section pre {
	margin: 0;
	padding: 0;
	text-align: left;
	}
	</style>
	</head>
	<body>
	<div id="wrap">
	<header id="header">
	<h1>PHP Code Pen</h1>
	</header>

	<section id="input">
	<header>
	<h2>Input</h2>
	</header>

	<form action="" method="post">
	<fieldset>
	<label>Code:</label>
	<textarea id="code" name="code" placeholder="Enter some PHP code, the <?php ... ?> arn't required :)" cols="80"><?php echo $code; ?></textarea>
	</fieldset>

	<fieldset>
	<input type="submit" name="submit" value="Run" />
	</fieldset>
	</form>
	</section>

	<section id="output">
	<header>
	<h2>Output</h2>
	</header>

	<section>
	<pre>
	<?php
	if($eval)
	{
	eval($code);
	}
	else
	{
	echo "...";
	}
	?>
	</pre>
	</section>
	</section>
	</div>

	<script>
	document.getElementById('code').addEventListener('keydown', function(e){
	var k = e.keyCode \|\| e.which

	if(k == 9)
	{
	e.preventDefault()

	var v = this.value
	var s = this.selectionStart
	var e = this.selectionEnd

	this.value = v.substring(0,s) + "\t" + v.substring(e)
	this.selectionStart = this.selectionEnd = s+1
	}
	})
	</script>
	</body>
	</html>