<!DOCTYPE html>
<html lang="en">
 <head>
  <style>
   body{margin: 0;font-family: sans-serif;  background-color: #6F7494}
header{clear: both; overflow: hidden;}
#legend{font-size: 3.2vh; font-family: 'Raleway', cursive;  float: left; color: white;}
.legend-top{font-weight: 800; border-bottom: solid 1px #fff; padding-bottom: 0.7vh; margin-bottom: 0.7vh;}
.legend-bottom{font-weight: 300; clear: both;}

#wrapper{display: flex;  padding: 2vh 5vh;flex-flow: row wrap;}
#wrapper > * {flex: 1 100%;}
#main { flex: 3 0px; text-align: center;  order: 2;}
#side{ flex: 1; order: 1; }

#toolbar{ padding: 2vh; box-shadow: #000 0 0 1vh; background-color:#fff; margin-top: 3vh;}
#toolbar h3{margin:1vh 0;font-weight: 800; font-family: 'Raleway';}
#toolbar .input-block{display: flex;  flex-direction: row; width:100% }
#toolbar .input-block label{min-width: 8rem; white-space: nowrap;}
#toolbar .input-block input[type=range]{width:10vh; margin: 1vh; color: #000;flex-grow:1;}
#toolbar .input-block input[type=number]{width:2rem; margin: 1vh;}

#css{box-shadow: #000 0 0 1vh; padding: 2vh 1vh 0 1vh ;background-color:#fff; margin-top: 3vh;}
#css h3{margin:0;font-weight: 800; font-family: 'Raleway';}
pre{margin: 0;}
#demo{border: solid 3vh #fff;  box-shadow: #000 0 0 15px; background-color:#fff;
  background: radial-gradient(ellipse at center, #e6d75c 1%,#d8c100 100%); display: inline-block; }
  </style>
 </head>
 <body translate="no">
  <div id="wrapper" ng-app="shapeCreator" ng-controller="shapeCreatorCtrl">
   <header>
    <div id="legend">
     <div class="legend-top">
      Irregolar Shape Creator
     </div>
     <div class="legend-bottom">
      Customize Border Radius and Size
     </div>
    </div>
   </header>
   <div id="side">
    <div id="toolbar">
     <h3>
      Radius
     </h3>
     <div class="input-block" ng-repeat="r in radius">
      <label>
       {{r.label}}
      </label>
      <input max="100" min="0" ng-model="r.val" type="range"/>
      <input max="100" min="0" ng-model="r.val" type="number"/>
     </div>
     <h3>
      Size
     </h3>
     <div class="input-block">
      <label>
       Width
      </label>
      <input max="100" min="0" ng-model="w" type="range"/>
      <input ng-model="w" type="number"/>
     </div>
     <div class="input-block">
      <label>
       Height
      </label>
      <input max="100" min="0" ng-model="h" type="range"/>
      <input ng-model="h" type="number"/>
      <br/>
     </div>
    </div>
    <div id="css">
     <h3>
      Copy and paste in your css
     </h3>
     <pre>
            <code>
border-radius: {{radius.r1.val}}% {{radius.r2.val}}% {{radius.r3.val}}% {{radius.r4.val}}% / {{radius.r5.val}}% {{radius.r6.val}}% {{radius.r7.val}}% {{radius.r8.val}}%;
height: {{h}}vh;
width:{{w}}vh;</code>
          </pre>
    </div>
   </div>
   <div id="main">
    <div id="demo" style="border-radius: {{radius.r1.val}}% {{radius.r2.val}}% {{radius.r3.val}}% {{radius.r4.val}}% / {{radius.r5.val}}% {{radius.r6.val}}% {{radius.r7.val}}% {{radius.r8.val}}%; height: {{h}}vh; width:{{w}}vh">
    </div>
   </div>
  </div>
 </body>
</html>
