machinery-tool 1.0.2

data/html/assets/machinery.css

@@ -0,0 +1,131 @@
+body {
+  background: #e9e0d6;
+}
+
+#nav-bar {
+  background: #e9e0d6 url('wheels_horizontal.png') no-repeat 112% -105px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  width: 100%;
+  padding-left: 15px;
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+}
+
+#nav-bar a:hover {
+  text-decoration: none;
+}
+
+a.scope_anchor {
+  display: block;
+  visibility: hidden;
+}
+
+.scope-summary {
+  display: inline;
+  font-weight: normal;
+  line-height: 1;
+  color: #999999;
+  font-size: 65%;
+}
+
+.scope-navigation {
+  font-size: 60%;
+  margin-left: 30px;
+}
+
+
+.filter-input {
+  margin-bottom: 10px;
+}
+
+.filter-input input {
+  width: 250px;
+}
+
+.fixed {
+  position: fixed;
+}
+
+span.toggle {
+  float: right;
+  width: 24px;
+  height: 24px;
+  background: url("arrow_up.png");
+  cursor: pointer;
+}
+
+span.toggle.collapsed {
+  background :url("arrow_down.png");
+}
+
+.popover{
+  min-width: 500px;
+  max-width: 800px;
+}
+
+h1 {
+  color: #3D3A38;
+}
+
+h2 {
+  color: #67635E;
+}
+
+a, a:hover {
+  color: #7A7570;
+}
+
+.pad-top {
+  margin-top: 10px;
+}
+
+.diff-toggle {
+  float: right;
+}
+
+table.diff {
+  background: #e6e6e6;
+}
+
+table.diff td {
+  padding-right: 5px;
+  padding-left: 5px;
+}
+
+table.diff tr.deletion {
+  background: #FFC0C0;
+}
+
+table.diff tr.addition {
+  background: #AEFFA8;
+}
+
+table.diff tr.common {
+  background: #EEEEEE;
+}
+
+table.diff tr.header {
+  background: #999999;
+}
+
+table.diff tr.deletion td.active {
+  border-color: #E5ADAD;
+}
+
+table.diff tr.addition td.active {
+  border-color: #95DA90;
+}
+
+table.diff td.linenumber {
+  color: #777777;
+  border-right: solid 1px #cccccc;
+}
+
+.diff-popover .popover-content {
+  max-height: 500px;
+  overflow-y: auto;
+  font-family: monospace;
+ }

data/html/assets/machinery.js

@@ -0,0 +1,148 @@
+$(document).ready(function () {
+  // Render the system description
+  var description = getDescription()
+
+  templates = {}
+  scopes = [
+    "os",
+    "changed_managed_files",
+    "config_files",
+    "unmanaged_files",
+    "groups",
+    "users",
+    "packages",
+    "patterns",
+    "repositories",
+    "services"
+  ]
+
+
+  // Enrich description with meta information summaries
+  description.meta_info = {}
+  $.each(scopes, function(index, scope) {
+    if(description.meta[scope]) {
+      description.meta_info[scope] = " (" +
+        "inspected host: '" + description.meta[scope].hostname + "', " +
+        "at: " + new Date(description.meta[scope].modified).toLocaleString() + ")"
+    }
+  })
+
+  $.each(scopes, function(index, scope) {
+    templates[scope] = Hogan.compile($("#scope_" + scope).html())
+  })
+  template = Hogan.compile($('#content').html())
+  $("#content_container").html(
+    template.render(description, templates)
+  )
+
+  // Implement filter functionality
+  var run_when_done_typing = (function(){
+    var timer = 0;
+    return function(callback, timeout){
+      clearTimeout(timer);
+      timer = setTimeout(callback, timeout);
+      };
+  })()
+
+  $("#filter").keyup(function() {
+    run_when_done_typing(function() {
+      window.scrollTo(0, 0)
+      var rows = $("body").find("tr");
+      if($("#filter").val() == "") {
+        rows.show();
+        return;
+      }
+
+      var filters = $("#filter").val().split(" ");
+
+      rows
+        .hide()
+        .filter(function() {
+          var $t = $(this);
+          for(var i = 0; i < filters.length; ++i) {
+            if($t.is(":contains('" + filters[i] + "')")) {
+              return true;
+            }
+          }
+          return false;
+        })
+        .show();
+    }, 500)
+  })
+
+  // Align content below floating menu
+  var header_height =  $("#nav-bar").height() + 20
+  $("#content_container").css("margin-top", header_height)
+  $("a.scope_anchor").css("height", header_height)
+  $("a.scope_anchor").css("margin-top", -header_height)
+
+  $('.scope_logo_big').each(function(){
+    var icon = $(this)
+    $(window).scroll(function() {
+      icon.removeClass('fixed');
+      var pos = icon.offset()
+      var top_pos = $(this).scrollTop() + header_height;
+      console.log(pos, top_pos)
+      if(top_pos >= pos.top && icon.css('position') == 'static') {
+        icon.addClass('fixed').css("top", header_height);
+      } else if(top_pos <= pos.top && icon.hasClass('fixed')) {
+        icon.removeClass('fixed');
+      }
+    })
+  })
+
+  // Hook up the toggle links
+  $('.toggle').click(function(){
+    $(this).closest('.scope').find('.scope_content').collapse('toggle')
+    $(this).toggleClass("collapsed")
+  })
+
+  $("#collapse-all").click(function(){
+    $(".scope_content").collapse('hide')
+    $(".toggle").addClass("collapsed")
+    $(this).hide()
+    $("#expand-all").show()
+  })
+
+  $("#expand-all").click(function(){
+    $(".scope_content").collapse('show')
+    $(".toggle").removeClass("collapsed")
+    $(this).hide()
+    $("#collapse-all").show()
+  })
+
+  $("img").popover({
+    trigger: "hover",
+    html: true
+  });
+  var counter;
+  $(".diff-toggle").popover({
+    trigger: "mouseenter",
+    html: true,
+    template: '<div class="popover diff-popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
+    content: function() {
+      file = $(this).data("config-file")
+      return $('*[data-config-file-diff="' + file + '"]').html()
+    },
+    title: function() {
+      return "Changes for '" + $(this).data("config-file") + "'"
+    }
+  }).on("mouseenter",function () {
+    clearTimeout(counter);
+    var _this = this;
+    $('.diff-toggle').not(_this).popover('hide');
+
+    counter = setTimeout(function(){
+      $(_this).popover("show");
+      $(".diff-popover").on("mouseleave", function () {
+          $('.diff-toggle').popover('hide');
+      });
+    }, 100);
+  }).on("mouseleave", function () {
+    counter = setTimeout(function(){
+      if (!$(".diff-popover:hover").length) {
+        $('.diff-toggle').popover('hide');
+      }
+    }, 500);
+  });
+})

data/html/assets/transition.js

@@ -0,0 +1,59 @@
+/* ========================================================================
+ * Bootstrap: transition.js v3.2.0
+ * http://getbootstrap.com/javascript/#transitions
+ * ========================================================================
+ * Copyright 2011-2014 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ * ======================================================================== */
+
+
++function ($) {
+  'use strict';
+
+  // CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)
+  // ============================================================
+
+  function transitionEnd() {
+    var el = document.createElement('bootstrap')
+
+    var transEndEventNames = {
+      WebkitTransition : 'webkitTransitionEnd',
+      MozTransition    : 'transitionend',
+      OTransition      : 'oTransitionEnd otransitionend',
+      transition       : 'transitionend'
+    }
+
+    for (var name in transEndEventNames) {
+      if (el.style[name] !== undefined) {
+        return { end: transEndEventNames[name] }
+      }
+    }
+
+    return false // explicit for ie8 (  ._.)
+  }
+
+  // http://blog.alexmaccaw.com/css-transitions
+  $.fn.emulateTransitionEnd = function (duration) {
+    var called = false
+    var $el = this
+    $(this).one('bsTransitionEnd', function () { called = true })
+    var callback = function () { if (!called) $($el).trigger($.support.transition.end) }
+    setTimeout(callback, duration)
+    return this
+  }
+
+  $(function () {
+    $.support.transition = transitionEnd()
+
+    if (!$.support.transition) return
+
+    $.event.special.bsTransitionEnd = {
+      bindType: $.support.transition.end,
+      delegateType: $.support.transition.end,
+      handle: function (e) {
+        if ($(e.target).is(this)) return e.handleObj.handler.apply(this, arguments)
+      }
+    }
+  })
+
+}(jQuery);

data/html/index.html.haml

@@ -0,0 +1,468 @@
+!!!
+%html
+  %head
+    %title
+      = description.name + " - Machinery System Description"
+    %link{:href => "assets/machinery-base.css", :rel => "stylesheet", :type => "text/css"}/
+    %link{:href => "assets/machinery.css", :rel => "stylesheet", :type => "text/css"}/
+    %script{:src => "assets/jquery-2.1.1.min.js"}
+    %script{:src => "assets/hogan-3.0.2.min.mustache.js"}
+    %script{:src => "assets/transition.js"}
+    %script{:src => "assets/collapse.js"}
+
+    %script#content{:type => "text/html"}
+      {{>os}}
+      {{>packages}}
+      {{>patterns}}
+      {{>users}}
+      {{>groups}}
+      {{>repositories}}
+      {{>unmanaged_files}}
+      {{>changed_managed_files}}
+      {{>config_files}}
+      {{>services}}
+
+    %script#scope_os.partial{:type => "text/html"}
+      {{#os}}
+      %a.scope_anchor{:id => "os"}
+      #os_container.scope
+        .row
+          .col-xs-1
+            %a{:href => "#os"}
+              %img.scope_logo_big{:src => "assets/logo-os.png", :class=>"over", :"data-toggle"=>"popover", :title=>"Operating System", :"data-content"=>"#{scope_help('os')}"}/
+            %span.toggle{:title => "Collapse/Expand"}
+          .col-xs-11
+            %h2
+              Operating System
+              .scope-summary
+                {{meta_info.os}}
+          .col-xs-1
+          .col-xs-3.scope_content.collapse.in
+            %table.table.table-striped.table-condensed
+              %tr
+                %th Name
+                %td {{os.name}}
+              %tr
+                %th Version
+                %td {{os.version}}
+              %tr
+                %th Architecture
+                %td {{os.architecture}}
+      {{/os}}
+
+    %script#scope_packages.partial{:type => "text/html"}
+      {{#packages.length}}
+      %a.scope_anchor{:id => "packages"}
+      #packages_container.scope
+        .row
+          .col-xs-1
+            %a{:href => "#packages"}
+              %img.scope_logo_big{:src => "assets/logo-packages.png", :class=>"over", :"data-toggle"=>"popover", :title=>"Packages", :"data-content"=>"#{scope_help('packages')}"}/
+            %span.toggle{:title => "Collapse/Expand"}
+          .col-xs-11
+            %h2
+              Packages
+              .scope-summary
+                {{packages.length}} packages
+                {{meta_info.packages}}
+        .row.scope_content.collapse.in
+          .col-xs-1
+          .col-xs-11
+            %table.table.table-striped.table-hover.table-condensed
+              %thead
+                %tr
+                  %th Name
+                  %th Version
+                  %th Release
+                  %th Arch
+                  %th Vendor
+                  %th Checksum
+              %tbody
+                {{#packages}}
+                %tr
+                  %td {{name}}
+                  %td {{version}}
+                  %td {{release}}
+                  %td {{arch}}
+                  %td {{vendor}}
+                  %td {{checksum}}
+                {{/packages}}
+      {{/packages.length}}
+
+    %script#scope_patterns.partial{:type => "text/html"}
+      {{#patterns.length}}
+      %a.scope_anchor{:id => "patterns"}
+      #patterns_container.scope
+        .row
+          .col-xs-1
+            %a{:href => "#patterns"}
+              %img.scope_logo_big{:src => "assets/logo-patterns.png", :class=>"over", :"data-toggle"=>"popover", :title=>"Patterns", :"data-content"=>"#{scope_help('patterns')}"}/
+            %span.toggle{:title => "Collapse/Expand"}
+          .col-xs-11
+            %h2
+              Patterns
+              .scope-summary
+                {{patterns.length}} patterns
+                {{meta_info.patterns}}
+        .row.scope_content.collapse.in
+          .col-xs-1
+          .col-xs-11
+            %table.table.table-striped.table-hover.table-condensed
+              %thead
+                %tr
+                  %th Name
+                  %th Version
+                  %th Release
+              %tbody
+                {{#patterns}}
+                %tr
+                  %td {{name}}
+                  %td {{version}}
+                  %td {{release}}
+                {{/patterns}}
+      {{/patterns.length}}
+
+    %script#scope_users{:type => "text/html"}
+      {{#users.length}}
+      %a.scope_anchor{:id => "users"}
+      #users_container.scope
+        .row
+          .col-xs-1
+            %a{:href => "#users"}
+              %img.scope_logo_big{:src => "assets/logo-users.png", :class=>"over", :"data-toggle"=>"popover", :title=>"Users", :"data-content"=>"#{scope_help('users')}"}/
+            %span.toggle{:title => "Collapse/Expand"}
+          .col-xs-11
+            %h2
+              Users
+              .scope-summary
+                {{users.length}} users
+                {{meta_info.users}}
+        .row.scope_content.collapse.in
+          .col-xs-1
+          .col-xs-11
+            %table.table.table-striped.table-hover.table-condensed
+              %thead
+                %tr
+                  %th Name
+                  %th UID
+                  %th GID
+                  %th Comment
+                  %th Home
+                  %th Shell
+              %tbody
+                {{#users}}
+                %tr
+                  %td {{name}}
+                  %td {{uid}}
+                  %td {{gid}}
+                  %td {{comment}}
+                  %td {{home}}
+                  %td {{shell}}
+                {{/users}}
+      {{/users.length}}
+
+    %script#scope_unmanaged_files.partial{:type => "text/html"}
+      {{#unmanaged_files.files.length}}
+      %a.scope_anchor{:id => "unmanaged_files"}
+      #unmanaged_files_container.scope
+        .row
+          .col-xs-1
+            %a{:href => "#unmanaged_files"}
+              %img.scope_logo_big{:src => "assets/logo-unmanaged-files.png", :class=>"over", :"data-toggle"=>"popover", :title=>"Unmanaged Files", :"data-content"=>"#{scope_help('unmanaged_files')}"}/
+            %span.toggle{:title => "Collapse/Expand"}
+          .col-xs-11
+            %h2
+              Unmanaged Files
+              .scope-summary
+                {{unmanaged_files.files.length}} files
+                {{meta_info.unmanaged_files}}
+        .row.scope_content.collapse.in
+          .col-xs-1
+          .col-xs-11
+            %table.table.table-striped.table-hover.table-condensed.files-table
+              %thead
+                %tr
+                  %th Name
+                  %th Type
+              %tbody
+                {{#unmanaged_files.files}}
+                %tr
+                  %td {{name}}
+                  %td {{type}}
+                {{/unmanaged_files.files}}
+      {{/unmanaged_files.files.length}}
+
+    %script#scope_groups{:type => "text/html"}
+      {{#groups.length}}
+      %a.scope_anchor{:id => "groups"}
+      #groups_container.scope
+        .row
+          .col-xs-1
+            %a{:href => "#groups"}
+              %img.scope_logo_big{:src => "assets/logo-groups.png", :class=>"over", :"data-toggle"=>"popover", :title=>"Groups", :"data-content"=>"#{scope_help('groups')}"}/
+            %span.toggle{:title => "Collapse/Expand"}
+          .col-xs-11
+            %h2
+              Groups
+              .scope-summary
+                {{groups.length}} groups
+                {{meta_info.groups}}
+        .row.scope_content.collapse.in
+          .col-xs-1
+          .col-xs-11
+            %table.table.table-striped.table-hover.table-condensed
+              %thead
+                %tr
+                  %th Name
+                  %th GID
+                  %th Password
+                  %th Users
+              %tbody
+                {{#groups}}
+                %tr
+                  %td {{name}}
+                  %td {{gid}}
+                  %td {{password}}
+                  %td {{users}}
+                {{/groups}}
+      {{/groups.length}}
+
+    %script#scope_repositories.partial{:type => "text/html"}
+      {{#repositories.length}}
+      %a.scope_anchor{:id => "repositories"}
+      #repositories_container.scope
+        .row
+          .col-xs-1
+            %a{:href => "#repositories"}
+              %img.scope_logo_big{:src => "assets/logo-repositories.png", :class=>"over", :"data-toggle"=>"popover", :title=>"Repositories", :"data-content"=>"#{scope_help('repositories')}"}/
+            %span.toggle{:title => "Collapse/Expand"}
+          .col-xs-11
+            %h2
+              Repositories
+              .scope-summary
+                {{repositories.length}} repositories
+                {{meta_info.repositories}}
+        .row.scope_content.collapse.in
+          .col-xs-1
+          .col-xs-11
+            %table.table.table-striped.table-hover.table-condensed
+              %thead
+                %tr
+                  %th Name
+                  %th Alias
+                  %th Type
+                  %th URL
+                  %th Enabled
+                  %th Autorefresh
+                  %th GPG Check
+                  %th Priority
+              %tbody
+                {{#repositories}}
+                %tr
+                  %td {{name}}
+                  %td {{alias}}
+                  %td {{type}}
+                  %td {{url}}
+                  %td {{enabled}}
+                  %td {{autorefresh}}
+                  %td {{gpgcheck}}
+                  %td {{priority}}
+                {{/repositories}}
+      {{/repositories.length}}
+
+    %script#scope_changed_managed_files.partial{:type => "text/html"}
+      {{#changed_managed_files.files.length}}
+      %a.scope_anchor{:id => "changed_managed_files"}
+      #changed_managed_files_container.scope
+        .row
+          .col-xs-1
+            %a{:href => "#changed_managed_files"}
+              %img.scope_logo_big{:src => "assets/logo-changed-managed-files.png", :class=>"over", :"data-toggle"=>"popover", :title=>"Changed Managed Files", :"data-content"=>"#{scope_help('changed_managed_files')}"}/
+            %span.toggle{:title => "Collapse/Expand"}
+          .col-xs-11
+            %h2
+              Changed Managed Files
+              .scope-summary
+                {{changed_managed_files.files.length}} files
+                {{meta_info.changed_managed_files}}
+        .row.scope_content.collapse.in
+          .col-xs-1
+          .col-xs-11
+            %table.table.table-striped.table-hover.table-condensed.files-table
+              %thead
+                %tr
+                  %th Name
+                  %th Package Name
+                  %th Package Version
+                  %th Changes
+                  %th Mode
+                  %th User
+                  %th Group
+              %tbody
+                {{#changed_managed_files.files}}
+                %tr
+                  %td {{name}}
+                  %td {{package_name}}
+                  %td {{package_version}}
+                  {{#changes.length}}
+                  %td {{changes}}
+                  {{/changes.length}}
+                  {{#error_message}}
+                  %td{:title => "{{error_message}}"} Error
+                  {{/error_message}}
+                  %td {{mode}}
+                  %td {{user}}
+                  %td {{group}}
+                {{/changed_managed_files.files}}
+        {{/changed_managed_files.files.length}}
+
+    %script#scope_config_files.partial{:type => "text/html"}
+      {{#config_files.files.length}}
+      %a.scope_anchor{:id => "config_files"}
+      #config_files_container.scope
+        .row
+          .col-xs-1
+            %a{:href => "#config_files"}
+              %img.scope_logo_big{:src => "assets/logo-config-files.png", :class=>"over", :"data-toggle"=>"popover", :title=>"Config Files", :"data-content"=>"#{scope_help('config_files')}"}/
+            %span.toggle{:title => "Collapse/Expand"}
+          .col-xs-11
+            %h2
+              Config Files
+              .scope-summary
+                {{config_files.files.length}} files
+                {{meta_info.config_files}}
+        .row.scope_content.collapse.in
+
+          {{#config_files.files}}
+          {{#diff}}
+          .diff{:style => "display: none", :"data-config-file-diff" => "{{file}}"}
+            %span.diff-summary
+              {{additions}} additions & {{deletions}} deletions
+            %table.diff
+              {{#lines}}
+              %tr{:class => "{{type}}"}
+                %td.active.linenumber {{original_line_number}}
+                %td.linenumber {{new_line_number}}
+                %td {{{content}}}
+              {{/lines}}
+          {{/diff}}
+          {{/config_files.files}}
+          .col-xs-1
+          .col-xs-11
+            %table.table.table-striped.table-hover.table-condensed.files-table
+              %thead
+                %tr
+                  %th Name
+                  %th Package Name
+                  %th Package Version
+                  %th Changes
+                  %th Mode
+                  %th User
+                  %th Group
+              %tbody
+                {{#config_files.files}}
+                %tr
+                  {{#diff}}
+                  %td
+                    {{name}}
+                    %a.diff-toggle{:"data-config-file" => "{{name}}", :"data-toggle" => "popover"}
+                      Show diff
+                  {{/diff}}
+                  {{^diff}}
+                  %td {{name}}
+                  {{/diff}}
+                  %td {{package_name}}
+                  %td {{package_version}}
+                  {{#changes.length}}
+                  %td {{changes}}
+                  {{/changes.length}}
+                  {{#error_message}}
+                  %td{:title => "{{error_message}}"} Error
+                  {{/error_message}}
+                  %td {{mode}}
+                  %td {{user}}
+                  %td {{group}}
+                {{/config_files.files}}
+        {{/config_files.files.length}}
+
+    %script#scope_services.partial{:type => "text/html"}
+      {{#services.services.length}}
+      %a.scope_anchor{:id => "services"}
+      #services_container.scope
+        .row
+          .col-xs-1
+            %a{:href => "#services"}
+              %img.scope_logo_big{:src => "assets/logo-services.png", :class=>"over", :"data-toggle"=>"popover", :title=>"Services", :"data-content"=>"#{scope_help('services')}"}/
+            %span.toggle{:title => "Collapse/Expand"}
+          .col-xs-11
+            %h2
+              Services
+              .scope-summary
+                Init System: {{services.init_system}},
+                {{services.services.length}} services
+                {{meta_info.services}}
+        .row.scope_content.collapse.in
+          .col-xs-1
+          .col-xs-11
+            %table.table.table-striped.table-hover.table-condensed
+              %thead
+                %tr
+                  %th Name
+                  %th State
+              %tbody
+                {{#services.services}}
+                %tr
+                  %td {{name}}
+                  %td {{state}}
+                {{/services.services}}
+      {{/services.services.length}}
+
+    %script{:src => "assets/description.js"}
+    %script{:src => "assets/machinery.js"}
+    %script{:src => "assets/bootstrap-tooltip.js"}
+    %script{:src => "assets/bootstrap-popover.js"}
+
+  %body
+    .container-fluid
+      #nav-bar
+        .row
+          .col-xs-1
+          .col-xs-10
+            %h1
+              System '#{description.name}'
+              %span.scope-navigation
+                Scopes:
+                %a{:href => "#os", :title => "Operating System"}
+                  %img{:src => "assets/logo-os-small.png"}/
+                %a{:href => "#packages", :title => "Packages"}
+                  %img{:src => "assets/logo-packages-small.png"}/
+                %a{:href => "#patterns", :title => "Patterns"}
+                  %img{:src => "assets/logo-patterns-small.png"}/
+                %a{:href => "#users", :title => "Users"}
+                  %img{:src => "assets/logo-users-small.png"}/
+                %a{:href => "#groups", :title => "Groups"}
+                  %img{:src => "assets/logo-groups-small.png"}/
+                %a{:href => "#repositories", :title => "Repositories"}
+                  %img{:src => "assets/logo-repositories-small.png"}/
+                %a{:href => "#unmanaged_files", :title => "Unmanaged Files"}
+                  %img{:src => "assets/logo-unmanaged-files-small.png"}/
+                %a{:href => "#changed_managed_files", :title => "Changed Managed Files"}
+                  %img{:src => "assets/logo-changed-managed-files-small.png"}/
+                %a{:href => "#config_files", :title => "Config Files"}
+                  %img{:src => "assets/logo-config-files-small.png"}/
+                %a{:href => "#services", :title => "Services"}
+                  %img{:src => "assets/logo-services-small.png"}/
+        .row
+          .col-xs-1
+            %a#expand-all{:style => "display: none"}
+              Expand all
+            %a#collapse-all
+              Collapse all
+          .col-xs-10
+            %small.pull-right.pad-top
+              created by
+              %a{:href => "http://machinery-project.org", :target => "_blank"}
+                Machinery
+            .filter-input
+              %input#filter{:placeholder => "Type To Filter"}/
+      #content_container