HTML

On 

<svg height="0" width="0" display="none" style="display:none">
  <symbol id="codeplay" viewBox="0 0 515 515">
	<rect class="b1" x="77.881" y="168.782" fill="#1A171B" width="396.02" height="25"/>
	<path class="b2" fill="#1A171B" d="M258.09,486.018c-61.519,0-119.355-23.956-162.855-67.456c-43.5-43.5-67.457-101.337-67.457-162.855 	c0-61.519,23.957-119.355,67.457-162.856S196.572,25.393,258.09,25.393c47.855,0,93.747,14.544,132.713,42.061 	c38.084,26.893,66.811,64.1,83.076,107.6l-42.15,15.761C404.798,118.787,335.018,70.393,258.09,70.393 	c-102.182,0-185.313,83.131-185.313,185.313c0,102.181,83.131,185.312,185.313,185.312c85.446,0,159.424-57.843,179.904-140.663 	l43.684,10.802c-12.135,49.077-40.746,93.498-80.564,125.081C360.057,468.804,310.6,486.018,258.09,486.018z"/>
	<path class="b3" fill="#E85D10" d="M257.5,512.5c-68.113,0-132.149-26.524-180.312-74.688S2.5,325.613,2.5,257.5 	c0-68.113,26.524-132.149,74.688-180.313C125.351,29.025,189.387,2.5,257.5,2.5c68.112,0,132.148,26.525,180.312,74.688 	C485.976,125.351,512.5,189.387,512.5,257.5c0,68.113-26.524,132.149-74.688,180.312C389.648,485.976,325.612,512.5,257.5,512.5z 	 M257.5,37.5c-121.309,0-220,98.692-220,220c0,121.308,98.691,220,220,220s220-98.691,220-220 C477.5,136.192,378.809,37.5,257.5,37.5z"/>
	<path class="b4" fill="#786854" d="M243.805,371.618l-0.984-2.459c-9.153-22.872-12.607-27.555-13.668-28.508 c-3.008-2.67-10.591-5.881-29.542-5.928l-104.803-0.261c-18.629-0.046-32.91-4.485-42.445-13.195 		c-9.663-8.826-14.542-22.03-14.5-39.244l0.05-20.228l37.047,0.092l-0.048,19.757c-0.019,7.748,3.61,10.199,6.433,11.338 		c4.229,1.137,12.654,1.729,25.049,1.759l94.25,0.234c26.678,0.067,45.724,7,56.734,20.628c2.418-3.458,4.89-6.136,7.482-8.116 		c10.216-8.209,26.426-12.228,49.486-12.228l95.066,0.235c15.28,0,21.899-0.887,24.768-1.647c3.021-1.113,6.426-3.439,6.445-11.294 		l0.049-19.756l37.045,0.092l-0.049,20.229c-0.041,17.165-4.957,30.319-14.611,39.097c-9.528,8.664-23.756,13.057-42.289,13.057 		l-105.522-0.261c-18.657,0-26.158,3.152-29.167,5.796c-1.186,1.001-4.848,5.669-14.518,28.48l-1.016,2.396L243.805,371.618z"/>
	<path class="b5" fill="#145361" d="M440.692,272.446l0.048-19.757c0.02-7.749-3.608-10.199-6.433-11.338c-4.229-1.137-12.653-1.729-25.05-1.76 		l-94.249-0.234c-26.678-0.066-45.725-6.999-56.735-20.626c-2.418,3.458-4.89,6.136-7.482,8.115 		c-10.213,8.208-26.424,12.228-49.483,12.228l-95.071-0.234c-15.28,0-21.901,0.886-24.767,1.646 c-3.021,1.113-6.426,3.441-6.446,11.295l-0.047,19.756l-37.048-0.092l0.049-20.229c0.042-17.165,4.958-30.319,14.612-39.097 		c9.529-8.664,23.758-13.057,42.291-13.057l105.517,0.262c18.66,0,26.164-3.152,29.172-5.797c1.186-1,4.848-5.669,14.518-28.479 		l1.015-2.396l26.744,0.066l0.983,2.458c9.154,22.872,12.607,27.555,13.669,28.508c3.008,2.67,10.592,5.881,29.541,5.928 		l104.803,0.261c18.628,0.046,32.911,4.486,42.445,13.195c9.663,8.826,14.543,22.03,14.501,39.243l-0.051,20.229L440.692,272.446z"/>
  </symbol>
</svg>
<svg class="codeplay-brand">
  <use xlink:href="#codeplay" class="codeplay" />
</svg>

CSS


/*
** _wblz.dev / 2016
** maxOptimized / short the code.
** @webbeloz
*/
html, body {
  margin: 0;
  height: 100%;
}
body {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}  
svg.codeplay-brand {
  display: inline-block;
  width: 200px;
  height: 200px;
}

JS

CodePlay Playground as you play with the keyboard:

Console

The CodePlay Code Box Editors Playground is very simple to use, anyone can directly interact with a minimum of knowledge of HTML experience, live an idea or a project. We believe that only 5% of the developers has the full capacity and knowledge of each key on the keyboard. Therefore we decided to put together a single command from the Key [Esc] == 27.
For every need and every situation the keyboard [Esc] key fixes and puts in place the Original Initial Code Box Editors.
All this without losing the contents of each Box Editors .
!Enjoy your CodePlay.


CodePlay Playground is a project based on WordPress entirely revised to have a clean and dynamic HTML output.

Editor:

- [Esc] To reset the Box Editors and the closure of any open window overlay, including the Output (FULL) Preview.

New! - Double Click to Expand /Open & Close All Box Editors

New! - Ctrl + Up/Down to Show /Hide the Footer Bar. This allows hide footer bar when you want, + ESC to Back.

New! - Preview in Full page is now also possible via dblClick on the Vertical Drag-bar. Each keyboard action can be Reset via the ESC button.


Ex.
- Close this? [Esc], or a Click outside.


Front End User - New /Save Post is Now Open, Register *required.
New Play Now