HTML, CSS and JavaScript playground

<!DOCTYPE html>
<html>
<head>
<title>Starter Template for Web Design App</title>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://threedubmedia.com/inc/js/jquery.event.drag-2.2.js"></script>
<script type="text/javascript" src="http://threedubmedia.com/inc/js/jquery.event.drag.live-2.2.js"></script>
</head>
<body>
  <div id="design-area">
    <div id="canvas">
        <header class="un" style="position: absolute; top: 0; left: 0; width: 100%; height: 6em; color: rgb(255, 255, 255); font-size: 16px; background-image: url(http://dianabanana510.files.wordpress.com/2010/06/space-art-wallpapers-26.jpg); background-attachment: fixed; padding: 6em 0; font-family: arial; text-align: center; background-position: 50% 50%;">
          <h1>LOREM IPSUM</h1>
          Je ne sais pas quoi mettre ici, donc je suppose que je vais mettre cela ici.
        </header>
        
        <div class="deux" style="position: absolute; top: 288px; left: 0; width: 100%; height: auto; background-color: rgb(33, 33, 33); color: #fff; font-size: 16px; text-align: center; font-family: arial; padding: 6em 0;">
          <h1>PELLENTESQUE</h1>
          
          Je ne sais pas quoi mettre ici, donc je suppose que je vais mettre cela ici quelques temps. Je ne sais pas quoi mettre ici, donc je suppose que je vais mettre cela ici quelques temps. Je ne sais pas quoi mettre ici, donc je suppose que je vais mettre cela ici quelques temps. Je ne sais pas quoi mettre ici, donc je suppose que je vais mettre cela ici quelques temps.
      </div>
    </div>
  </div>

<div id="draw-wrapper">
    <div id="tools">
      <a class="select-tool" href="javascript:void(0)">Select</a>
      <a class="draw-tool" href="javascript:void(0)">Draw</a>
    </div>
    
    <div id="start-props">
      <header>
        &nbsp; starter
      </header>
      <div class="drop-section" align="center">
        Basic starter template for building a web design application.
        
        <p>
          Designed & Built by.<br />
          <a id="author" href="http://michaelsdelivery.tk/" target="_blank">Michael Schwartz</a>
        </p>
      </div>
    </div>
    <div id="style-props">
      <header>
        &nbsp; styles
      </header>
      <div class="drop-section" align="center">
        <input class="grab-classname" placeholder="class name" type="text">
        <div class="styleinputs">
          <span class="main-inputs">
            <input class="grab-color" placeholder="color: ?;" type="text">
            <input class="grab-background" placeholder="background: ?;" type="text"><br />
            <input class="grab-box-shadow" placeholder="box-shadow: ?;" type="text">
            <input class="grab-text-shadow" placeholder="text-shadow: ?;" type="text">
          </span>
        </div>
      </div>
    </div>
    <div id="draw-props">
      <header>
        &nbsp; elements
      </header>
      <div class="drop-section">
        <form class="draw-elements" name='draw-elements'>
          <input type="radio" value="div" id="div" name="elms" checked="true">
           <label for="div"> Div</label><br />
          <input type="radio" value="span" id="span" name="elms">
           <label for="span"> Span</label><br />
          <input type="radio" value="a" id="a" name="elms">
           <label for="a"> Anchor</label><br />
          <input type="radio" value="button" id="button" name="elms">
           <label for="button"> Button</label><br />
        </form>
      </div>
      
      <header title=" options">
        &nbsp; options<br>
      </header>
      <div class="drop-section draw-opt-props" align="center">
        <div id="div-opts">
          <input id="center-align-div" type="checkbox" />
            <label for="center-align-div"> Align inner elements to center?</label>
        </div>
        <div id="span-opts">
          <input id="center-align-span" type="checkbox" />
            <label for="center-align-span"> Align inner elements to center?</label>
        </div>
        <div id="anchor-opts">
          <input id="apply-href" type="text" placeholder="Url to website?" />
        </div>
        <div id="button-opts">
          Sorry this element has no options
        </div>
      </div>
    </div>
    <textarea id="code" style="display:none;"></textarea>
  </div>
</body>
</html>

*:active, *:focus {
  outline: 0;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  font: 14px arial;
  color: #000;
  background: #333;
}

/* Right Panel */
#draw-wrapper {
  cursor: default;
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 100%;
  color: #ccc;
  background: #333;
  overflow: auto;
}

/* Toolbox */
#tools {
  padding-top: .5em;
  text-align: center;
}

#tools a {
  text-decoration: none;
  color: #09a;
  margin: 0 .5em;
  padding: 0 .5em;
  font: 16px arial;
}

#tools a:hover {
  color: #3bf;
}

#tools .activetool {
  border-bottom: 1px solid #3df;
}

/* Property Containers */
#author {
  text-decoration: none;
  padding: 1em 2em;
  background: #69f;
  color: #edf;
  border-radius: 1em;
  position: relative;
  top: 1.5em;
}

#author:hover {
  color: #fff;
  background: #6af;
}

#author:active {
  background: #66f;
}

#draw-wrapper header {
  cursor: pointer;
  padding: 0 5px;
  border-top: 1px solid #151515;
  border-bottom: 1px solid #151515;
  background: #252525;
  color: #999;
  font: 14px times;
  text-transform: uppercase;
}

#draw-wrapper .activedrop {
  color: #666;
}

.drop-section {
  padding: 5px;
  font: 14px arial;
}

.styleinputs input[type=text], .styleinputs input[type=number] {
  width: 45%;
  background: #444;
  border-radius: 0;
  border-style: solid;
  border-width: 1px;
  border-color: #1a1a1a #272729 #272729 #272729;
  font: 15px arial;
  -webkit-font-smoothing: antialiased;
  color: #ced;
}

#draw-props input[type=text] {
  width: 90%;
  background: #444;
  border-radius: 0;
  border-style: solid;
  border-width: 1px;
  border-color: #1a1a1a #272729 #272729 #272729;
  font: 15px arial;
  -webkit-font-smoothing: antialiased;
  color: #ced;
}

.styleinputs ::-webkit-input-placeholder, 
#anchor-opts ::-webkit-input-placeholder { /* WebKit browsers */
    color: #888;
}
.styleinputs :-moz-placeholder, 
#anchor-opts :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #888;
}
.styleinputs ::-moz-placeholder, 
#anchor-opts ::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #888;
}
.styleinputs :-ms-input-placeholder, 
#anchor-opts :-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #888;
}

.grab-classname {
  width: 70%;
  color: #fff;
  font: 16px arial;
  background-color: #09a;
  border: 0; margin: 1em;
  padding: 1em 2em;
  margin: .25em 0 1em 0;
  border-radius: 1em;
}

/* Drawing Area */
#design-area {
  position: absolute;
  top: 0;
  left: 0;
  right: 300px;
  bottom: 0;
  overflow: hidden;
}

#canvas {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  overflow: auto;
}

/* Resize Constructs */
.drag {
  position: absolute;
  border: 1px solid #89B;
  background: #BCE;
  width: 58px;
  height: 58px;
  top: 120px;
  cursor: move;
}

.handle {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1px solid #89B;
  background: #9AC; 
}

.NW, .NN, .NE { top: -4px; }
.NE, .EE, .SE { right: -4px; }
.SW, .SS, .SE { bottom: -4px; }
.NW, .WW, .SW { left: -4px; }
.SE, .NW { cursor: nw-resize; }
.SW, .NE { cursor: ne-resize; }
.NN, .SS { cursor: n-resize; left: 50%; margin-left: -4px; }
.EE, .WW { cursor: e-resize; top: 50%; margin-top: -4px; }
.selected { background-color: #ECB; border-color: #B98; }
.selected .handle { background-color: #CA9; border-color: #B98; }

$(document).ready(function() {
  // Setup our variables
  var elmstyle = false,
      drawable = false,
      drawing  = false,
      mS = {},
      dBox;
  
  // Global Function Callbacks
  function CheckDrawOptions() {
    if ($("#div").is(":checked")) {
      $(".draw-opt-props div").hide();
      $("#div-opts").show();
    } else if ($("#span").is(":checked")) {
      $(".draw-opt-props div").hide();
      $("#span-opts").show();
    } else if ($("#a").is(":checked")) {
      $(".draw-opt-props div").hide();
      $("#anchor-opts").show();
    } else if ($("#button").is(":checked")) {
      $(".draw-opt-props div").hide();
      $("#button-opts").show();
    }
  }
  var BoxOptions =  function() {
    if ($("#center-align-div").is(":checked")) {
      $("<" + $('.draw-elements input[type=radio]:checked').val() + " class='box' align='center' />")
        .html("<h1>GISEMENT</h1>\nJe ne sais pas quoi mettre ici, donc je suppose que je vais mettre ce texte ici.");
    } else {
      $("<" + $('.draw-elements input[type=radio]:checked').val() + " class='box' />")
        .html("<h1>GISEMENT</h1>\nJe ne sais pas quoi mettre ici, donc je suppose que je vais mettre ce texte ici.");
    }
    if ($("#center-align-span").is(":checked")) {
      $("<" + $('.draw-elements input[type=radio]:checked').val() + " class='box' align='center' />")
        .html("Certains textes");
    } else {
      $("<" + $('.draw-elements input[type=radio]:checked').val() + " class='box' />")
        .html("Certains textes");
    }
    if ($("#apply-href").val() === "") {
      $("<" + $('.draw-elements input[type=radio]:checked').val() + " class='box' />")
        .html("Je suis un lien");
    } else {
      $("<" + $('.draw-elements input[type=radio]:checked').val() + " class='box' href='" + $("#apply-href").val() + "' />")
        .html("Je suis un lien");
    }
    if ($(".draw-elements #button").is(":checked")) {
      $("<" + $('.draw-elements input[type=radio]:checked').val() + " class='box' />")
        .html("Certains textes");
      }
  };
  var HandleSelectedElement = function() {
    if ($(".select-tool.activetool").is(":visible")) {
      // Selects Element
      if(elmstyle) {
        $('#canvas').children().on('mousedown touchstart', function(e) {
          if(elmstyle) {
            // Remove previously added handles
            $('.handle').remove();

// Grab selected elements class
            $(".grab-classname").val($(this).attr('class'));

// Remove all ids from previously selected elements
            $("#canvas *").removeAttr('id');

// Make element styleable
            $(this).attr('id', 'stylethis').append('<div class="handle NE"></div><div class="handle NN"></div><div class="handle NW"></div><div class="handle WW"></div><div class="handle EE"></div><div class="handle SW"></div><div class="handle SS"></div><div class="handle SE"></div>');

// Remove style values
            $(".main-inputs input[type=text]").val("");
          }
        })
        .drag("start",function( ev, dd ){
          dd.attrc = $( ev.target ).prop("className");
          dd.attrd = $( ev.target ).prop("id");
          dd.width = $( this ).width();
          dd.height = $( this ).height();
        })
        .drag(function( ev, dd ){
          var props = {};
          if ( dd.attrc.indexOf("E") > -1 ){
            props.width = Math.max( 32, dd.width + dd.deltaX );
          }
          if ( dd.attrc.indexOf("S") > -1 ){
            props.height = Math.max( 32, dd.height + dd.deltaY );
          }
          if ( dd.attrc.indexOf("W") > -1 ){
            props.width = Math.max( 32, dd.width - dd.deltaX );
            props.left = dd.originalX + dd.width - props.width;
          }
          if ( dd.attrc.indexOf("N") > -1 ){
            props.height = Math.max( 32, dd.height - dd.deltaY );
            props.top = dd.originalY + dd.height - props.height;
          }
          if ( dd.attrd.indexOf("stylethis") > -1 ){
            props.top = dd.offsetY;
            props.left = dd.offsetX;
          }
          $('#stylethis').css( props );
        }, {relative:true});
      }
    }
  };
  
  // Toggle Property Dropdown
  $("#draw-wrapper header").on('click', function() {
    $(this).toggleClass("activedrop").next().toggle();
  });
  
  // Handles Select Tool
  $(".select-tool").on('click', function() {
    $(".draw-tool").removeClass("activetool");
    $(this).toggleClass("activetool");
    $("#code").val($("#canvas").html());
    $("#canvas").html($("#code").val());
    
    if ($(".select-tool.activetool").is(":visible")) {
      $("#draw-props, #start-props").hide();
      $("#style-props").show();
      drawable = false;
      elmstyle = 1;
      
      if(elmstyle) {
        HandleSelectedElement();
        $(".grab-classname").on("keyup", function() {
          $("#stylethis").attr('class', $(this).val());
        });
        $(".grab-color").on("keyup", function() {
          $("."+ $(".grab-classname").val()).css({
            "color": $(this).val()
          });
        });
        $(".grab-background").on("keyup", function() {
          $("."+ $(".grab-classname").val()).css({
            "background": $(this).val()
          });
        });
      }
    }
    else {
      elmstyle = false;
      // Remove all ids from previously selected elements
      $("#canvas *").removeAttr('id');
      $(".handle").remove();
      
      $("#style-props").hide();
      if (($("#style-props").is(":hidden")) && ($("#draw-props").is(":hidden"))) {
        $("#start-props").show();
      }
    }
  });
  
  // Handles Draw Tool
  $(".draw-tool").on('click', function() {
    $(".select-tool").removeClass("activetool");
    $(this).toggleClass("activetool");
    $("#code").val($("#canvas").html());
    $("#canvas").html($("#code").val());
    
    if ($(".draw-tool.activetool").is(":visible")) {
      elmstyle = false;
      drawable = 1;
      $("#draw-props").show();
      $("#style-props, #start-props").hide();
      
      // Remove all ids from previously selected elements
      $("#canvas *").removeAttr('id');
      $(".handle").remove();
      
      // Handles Draw Options
      $(".draw-elements input[type=radio]").on('change', function() {
        CheckDrawOptions();
      });
    }
    else {
      drawable = false;
      $("#draw-props").hide();
      if (($("#style-props").is(":hidden")) && ($("#draw-props").is(":hidden"))) {
        $("#start-props").show();
      }
    }
  });

// Handles Drawable Elements
  $("#canvas").on('mousedown touchstart', function(e) {
    if(drawable) {
      drawing = true;
      mS.x = e.pageX;
      mS.y = e.pageY;
      dBox = $("<" + $('.draw-elements input[type=radio]:checked').val() + " class='box' />")
              .html("Certains textes");
      $(this).append(dBox);
      
      // Do not select text when drawing
      return false;
    }
  });
  $(document).on('mousemove touchmove', function(e) {
    if(drawing && drawable){
      var mPos = {x:e.pageX, y:e.pageY};
      var css = {};
        css.position   = 'absolute';
        css.left       = (mPos.x > mS.x) ? mS.x : mPos.x;
        css.top        = (mPos.y > mS.y) ? mS.y : mPos.y;
        css.width      = Math.abs(mPos.x - mS.x);
        css.height     = Math.abs(mPos.y - mS.y);
        css.border = '1px dotted rgb(0, 34, 102)';
        dBox.css(css);
      
      // Do not select text when drawing
      return false;
    }
  }).on('mouseup touchend', function(e) {
    drawing  = false;
  });
  
  CheckDrawOptions();
  
  // Remove style values
  $(".main-inputs input[type=text]").val("");

// Hide style properties onload
  $("#style-props, #draw-props").hide();
});