<form>
  <h2>Generate Lorem with PATTERN</h2>
  <div>
    <label for="html">Pattern: <pre>(use <i id="placeholder">${lorem}</i> as placeholder for replacement)</pre></label>
    <textarea id="html"  required="required"><div><span>${lorem}</span></div></textarea>
  </div>
  <div class="bottom">
    <div>
      <label for="repeat">Repeat:</label>
      <input id="repeat" value="15" type="number" pattern="[0-9]*"  required="required" min="1"/> times
    </div>
    <div>
      <input type='submit' id="generate" value="Generate"/>
    </div>
  </div>

  <div class="output">
    <textarea id="output" placeholder="Output"></textarea>
  </div>
</form>
  
  

@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,900);

html {
   height: 100%;
}
body {
  font-family:"Roboto", Arial, sans-serif;
  font-weight: 400;
  background: #221662;
  color: white;
  background-image: linear-gradient(135deg, rgba(155, 89, 182,0.8) 0%,rgba(155, 89, 182,0.5) 100%), url("http://www.hdbackgroundpoint.com/wp-content/uploads/2014/05/24/453.jpeg");
  font-size: 100%;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%; 
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
  @include display-flex();
  @include align-items(center);
  @include justify-content(center);
}

form {
  width: 90vw;
  max-width: 500px;
  min-height: 50vh;
  color: rgba(#fff, .85);
  font-size: 16px;
  padding: 1.5em;
  text-decoration: none;
  border-radius: 10px;
  @include background-clip(padding-box);
  @include box-shadow(inset -1px 1px 0px rgba(255, 255, 255, 0.3),
  inset 1px 1px 0px rgba(255, 255, 255, 0.3)
  );
  border: 1px solid #000;
  background-color: rgba(#000, .1);
  @include background-image(linear-gradient(top, rgba(#000, .1), rgba(#000, .3)));
  
  h2 {
    margin: .5em;
    text-align: center;
    text-shadow: 0 1px 2px rgba(#000,.5);
    font-weight: 900;
  }
}

input, textarea, select {
  background: rgba(#000, .3);
  border: 0;
  border-radius: 0.5em;
  box-shadow: 0 1px 1px rgba(#fff, .8);
  padding: 0.5em;
  box-sizing: border-box;
  outline: none;
  color: #fff;
  font-size: 100%;
}

label[for="html"] {
  display: block;
  pre {
    display: inline;
    line-height: 2;
    word-wrap: break-word;
  }
}
#html, #output {
  width: 100%;
  height: 20vh;
}
#repeat {
  width: 4em;
}
.bottom {
  margin: 1em 0;
  @include display-flex();
  @include justify-content(space-between);
}
input[type="submit"] {
  outline: none;
  height: 43px;
  box-sizing: border-box;
  padding: 0 1em;
  background-color: #6bac14;
  @include background-image(linear-gradient(to bottom, #8ff704, #1c8700));
  border: 0;
  border-radius: 25px;
  box-shadow: 0 5px 2px #a6ee40 inset, 1px 1px 0 rgba(#000, .5);
  color: #fff;
  text-transform: uppercase;
  font-size: 110%;
  text-shadow: 1px 1px 0 rgba(#000, .5);
  text-align: center;
}
/**
 * Scrollbar styling (only in webkit)
 */

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
	background-color: rgba(#000, .2);
}
::-webkit-scrollbar-thumb {
	background: rgba(#fff, .8);
 
	cursor: pointer;
	border-radius: 5px;
}

// courtesy of http://baconipsum.com/api/
var placeholder = $('#placeholder').text();
$('form').on('submit', function(e) {
  e.preventDefault();
  var html = $('#html').val();
  var repeat = $('#repeat').val();
  
  $.getJSON('http://baconipsum.com/api/?callback=?', 
  { 'type':'meat-and-filler', 'paras':repeat }, 
  function(data) {
    var output = '';
    for(var i in data) {
      var line = data[i].replace(/(\r\n|\n|\r)/gm,"");
      output += html.replace(placeholder, line);
    }
    $('#output').val(output);
  });
});
  
$('#output').on('click', function() {
  $(this).select();
});