JSON Hyperground

<!DOCTYPE html>
<link rel="stylesheet" href="./lib/bootstrap/dist/css/bootstrap.css"></link>
<link rel="stylesheet" href="./lib/fontawesome/css/font-awesome.css"></link>
<link rel="stylesheet" href="./lib/bootswatch/cyborg/bootstrap.css"></link>
<link rel="stylesheet" href="./lib/codemirror/lib/codemirror.css"></link>
<link rel="stylesheet" href="./lib/codemirror/theme/monokai.css"></link>
<style>
  
  html {
    height: 100%;
  }
  body {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: #434343;
    background-image: linear-gradient(#434343, #282828);
  }
  
  .panel{
    -webkit-box-shadow: 2px 2px 4px 2px rgba(0,0,0,0.5);
    box-shadow: 2px 2px 4px 2px rgba(0,0,0,0.5);
    opacity: .6;
  }
  
  .panel:hover{
    opacity: 1.0;
  }
  
  .piece{
    position: relative;
  }
  
  .logo{
    float:right;
  }
  
  .overlays{
    top: 16px;
    right: 16px;
    position:fixed;
    z-index: 9999;
  }
  
  .app{
    position: relative;
    background-color: transparent;
    background-image: linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent);
    height:100%;
    background-size:50px 50px;
  }
</style>
<div class="app">
  <div class="overlays col-lg-3">
    <div class="overlay about">
      <div class="panel panel-default">
        <div class="panel-body">
          <h1 class="logo">
            <span class="fa-stack fa-lg">
              <i class="fa fa-rocket fa-stack-2x text-muted"></i>
              <i class="fa fa-wrench fa-stack-1x text-primary"></i>
            </span>
          </h1>
          <p class="marked">
            # JSON Hyperground
            
            Build and share reactive flows of JSON data. Featuring:
            - [JSON-LD](https://json-ld.org)
            - [JSON Schema](https://json-schema.org)
            - [JSON Patch](https://tools.ietf.org/html/draft-ietf-appsawg-json-patch-10)
          </p>
          <h1 class="logo">
            <span class="fa-stack fa-lg">
              <i class="fa fa-cube fa-stack-2x text-muted"></i>
              <i class="fa fa-cog fa-stack-1x text-primary"></i>
            </span>
          </h1>
          <p class="marked">
            ## Get Involved!
            Don't see your favorite JSON-related technology here? Hyperground uses:
            - [Backbone models](https://backbonejs.org#Model) for managing data flows
            - [RequireJS](https://requirejs.org) for in-browser dependency management
            - [cdnjs](https://cdnjs.com) for snappy file delivery
            
            To get started, check out the [hyperground piece generator](https://github.com/bollwyvl/generator-hyperground).
          </p>
        </div>
      </div>
    </div>
    
    <div class="overlay create-piece">
      <div class="panel panel-default">
        <div class="panel-body">
          <h1>Pieces</h1>
          <div class="well pieceTypes">
          </div>
        </div>
      </div>
    </div>
  </div>

</script>