web/view.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Codetainer</title>

  <script src="/public/javascript/jquery.js"></script>
  <script src="/public/javascript/handlebars.js"></script>
  <script src="/public/javascript/xterm.js"></script>
  <script src="/public/javascript/xterm-plugins.js"></script>
  <script src="/public/javascript/connect.js"></script>

  <link rel="stylesheet" href="/public/stylesheet/font-awesome.css">
  <link rel="stylesheet" href="/public/stylesheet/fonts.css">
  <link rel="stylesheet" href="/public/stylesheet/codetainer.css">
  <link rel="stylesheet" href="/public/stylesheet/xterm.css">
</head>

<body>

  <div id="codetainer">
    <!-- HEADER --!>
      <div class="codetainer-header" <% if .terminalOnly %>style="display:none"<% end %>>
      <div class="logo">
        <span>code</span><span>tainer</span>
      </div>
    </div>
    <!-- END HEADER --!>


    <!-- CONTENT --!>
      <div class="codetainer-content <% if .terminalOnly %>full-width<% end %>"></div>
    <!-- END CONTENT --!>

    <!-- FOOTER --!>
      <div class="codetainer-footer" <% if .terminalOnly %>style="display:none"<% end %>>
      <div class="footer-sidebar-options">
        <a class="footer-sidebar-button">
          <i class="fa fa-file"></i>
        </a>

        <a class="create-new-folder footer-sidebar-button">
          <i class="fa fa-folder"></i>
        </a>
        
        <a class="footer-sidebar-button">
          <i class="fa fa-refresh"></i>
        </a>
      </div>

      <div class="footer-main"></div>
    </div>
    <!-- END FOOTER --!>

  </div>


  <div class="Templates" style="display:none;">
    <script id="codetainer-tab-control" type="text/x-handlebars-template">
      <!-- Tab Control --!>
      <div class="codetainer-tabs">
        <ul class="nav nav-tabs" style="max-width: 100%;">
        </ul>
      </div>
      <!-- END Tab Control --!>
    </script>

    <script id="codetainer-tab-new" type="text/x-handlebars-template">
      <li id="{{tabId}}" class='{{#if options.active}}active{{/if}}'>
        <a href="#">
          {{#unless options.terminal}}
            <i id="{{tabId}}-close" class="fa fa-remove"></i>
          {{/unless}}
          {{options.name}}
        </a>
      </li>
    </script>

    <script id="codetainer-content" type="text/x-handlebars-template">
      <div id="{{contentId}}" class="codetainer-tab-content" style="display:none;">
        {{#if options.terminal}}
          <div id="codetainer-terminal"></div>
        {{else}}
          {{options.content}}
        {{/if}}
      </div>
    </script>

    <script id="codetainer-sidebar" type="text/x-handlebars-template">
    <!-- SIDEBAR --!>
    <div class="codetainer-sidebar"></div>
    <!-- END SIDEBAR --!>
    </script>

  </div>

  <script>
    $(function() {
      Codetainer.Build("<% .ContainerId %>");
    });
  </script>
  
</body>
</html>