1. <!doctype html>
    
  2. <html lang="en">
    
  3.   <head>
    
  4.     <meta charset="utf-8">
    
  5.     <meta name="viewport" content="width=device-width, initial-scale=1">
    
  6.     <title>Renderer</title>
    
  7.     <style>
    
  8.       *,
    
  9.       *:before,
    
  10.       *:after {
    
  11.         box-sizing: border-box;
    
  12.       }
    
  13. 
    
  14.       html,
    
  15.       body {
    
  16.         font-family: sans-serif;
    
  17.         margin: 0;
    
  18.         height: 100%;
    
  19.       }
    
  20. 
    
  21.       body {
    
  22.         padding-top: 32px;
    
  23.       }
    
  24. 
    
  25.       #status {
    
  26.         font-size: 12px;
    
  27.         left: 8px;
    
  28.         letter-spacing: 0.05em;
    
  29.         line-height: 16px;
    
  30.         margin: -8px 0 0;
    
  31.         max-width: 50%;
    
  32.         overflow: hidden;
    
  33.         position: absolute;
    
  34.         text-align: left;
    
  35.         text-overflow: ellipsis;
    
  36.         top: 50%;
    
  37.         white-space: nowrap;
    
  38.         width: 100%;
    
  39.       }
    
  40. 
    
  41.       #output {
    
  42.         margin: 16px;
    
  43.       }
    
  44. 
    
  45.       .header {
    
  46.         background: white;
    
  47.         border-bottom: 1px solid #d9d9d9;
    
  48.         padding: 4px;
    
  49.         top: 0;
    
  50.         left: 0;
    
  51.         position: fixed;
    
  52.         width: 100%;
    
  53.         text-align: right;
    
  54.       }
    
  55. 
    
  56.       .controls {
    
  57.         display: inline-block;
    
  58.         margin: 0;
    
  59.       }
    
  60. 
    
  61.       .button {
    
  62.         background: #eee;
    
  63.         border-radius: 2px;
    
  64.         border: 1px solid #aaa;
    
  65.         font-size: 11px;
    
  66.         padding: 4px 6px;
    
  67.         text-transform: uppercase;
    
  68.       }
    
  69.     </style>
    
  70.   </head>
    
  71.   <body>
    
  72.     <header class="header">
    
  73.       <p id="status">Loading</p>
    
  74. 
    
  75.       <menu class="controls">
    
  76.         <button class="button" id="hydrate">Hydrate</button>
    
  77.         <button class="button" id="reload">Reload</button>
    
  78.       </menu>
    
  79.     </header>
    
  80. 
    
  81.     <div id="output"></div>
    
  82. 
    
  83.     <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
    
  84.     <script src="renderer.js"></script>
    
  85.   </body>
    
  86. </html>