layout.jade

doctype html
html
  head
    title= settings.title
    link(rel='stylesheet', href='/themes/#{settings.theme}/bootstrap.min.css')
    link(rel='stylesheet', href='/vendor/jqplot/jquery.jqplot.css')
    link(rel='stylesheet', href='//cdn.datatables.net/plug-ins/725b2a2115b/integration/bootstrap/3/dataTables.bootstrap.css')
    link(rel='stylesheet', href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css')
    link(rel='stylesheet', href='/stylesheets/style.css')
    meta(property='og:url', content='https://explorer.sugarchain.org/')
    meta(property='og:title', content='Sugarchain Block Explorer')
    meta(property='og:type', content='website')
    meta(property='og:description', content='View detailed information on all sugarchain transactions and blocks. Explorer, Whale Alert, Node List, Top 100 and API.')
    meta(property='og:image', content='https://explorer.sugarchain.org/images/logo.png')
    script(src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js')
    script(src='//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js')
    script(src='/vendor/jqplot/jquery.jqplot.min.js')
    script(src='/vendor/jqplot/plugins/jqplot.dateAxisRenderer.min.js')
    script(src='/vendor/jqplot/plugins/jqplot.ohlcRenderer.min.js')
    script(src='/vendor/jqplot/plugins/jqplot.highlighter.min.js')
    script(src='/vendor/jqplot/plugins/jqplot.pieRenderer.min.js')
    script(src='/vendor/jqplot/plugins/jqplot.barRenderer.min.js')
    script(src='/vendor/jqplot/plugins/jqplot.categoryAxisRenderer.min.js')
    script(src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js')
    script(src='//cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js')  
    script(src='//cdn.datatables.net/responsive/1.0.1/js/dataTables.responsive.js')
    script(src='//cdn.datatables.net/plug-ins/725b2a2115b/integration/bootstrap/3/dataTables.bootstrap.js')
    script(src='/javascripts/chart.js')
    script.
      $(document).ready(function(){
        $('##{active}').addClass('active');
        function update_stats(){   
          $.ajax({url: '/ext/summary', success: function(json){
            $("#supply").text(json.data[0].supply);
            $("#difficulty").text(json.data[0].difficulty.toFixed(12));
            $("#difficultyHybrid").text(json.data[0].difficultyHybrid);
            $("#hashrate").text(json.data[0].hashrate);
            $("#lastPrice").text(json.data[0].lastPrice.toFixed(8));
            $("#lblConnections").text(json.data[0].connections + ' connections');
            $("#lblBlockcount").text(json.data[0].blockcount + ' blocks');
            $("#lblX1").text(' ');
          }});
        }
        $('.block-last-next').tooltip({
          animation: true,
          delay: { hide: 500 },   
        });
        $('.history-table').dataTable( {        
          searching: false,
          ordering: false,
          responsive: true
        });
        $('.iquidus').css('color',$('.table').css('color'));
        $(window).resize(function () { 
          $($.fn.dataTable.tables( true ) ).DataTable().columns.adjust();
        });
        setInterval( function() {
          update_stats();
        }, 60000);
        update_stats();
      });
  body
    - function format_unixtime(unixtime) {
      - var a = new Date(unixtime*1000);  
      - var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
      - var year = a.getFullYear();
      - var month = months[a.getMonth()];
      - var date = a.getDate();
      - var hour = a.getHours();
      - var min = a.getMinutes();
      - var sec = a.getSeconds();
      - var suffix = 'th'
      if date == 1 || date == 21 || date == 31
        - suffix = 'st'
      if date == 2 || date == 22 || date == 32
        - suffix = 'nd'
      if date == 3 || date == 23
        - suffix = 'rd'
      if hour < 10
        - hour = '0' + hour
      if min < 10
        - min = '0' + min
      if sec < 10
        - sec = '0' + sec
      - var time = date + suffix + ' ' + month + ' ' + year + ' ' + hour + ':' + min + ':' + sec ;   
      - return time
    -  };
    .nav.navbar.navbar-default.navbar-fixed-top(role='navigation')
      .container-fluid
        .navbar-header
          button.navbar-toggle(type='button', data-toggle='collapse', data-target='#navbar-collapse')
            span.sr-only Toggle navigation
            span.icon-bar
            span.icon-bar
            span.icon-bar
          a.navbar-brand(href='/') #{settings.title}
        .collapse.navbar-collapse(id='navbar-collapse')
          ul.nav.navbar-nav
            li#home
              a.navbar-link(href='/') 
                span.glyphicon.glyphicon-search
                span.menu-text #{settings.locale.menu_explorer}
            if settings.heavy == true
              li#reward
                a.navbar-link(href='/reward')
                  span.fa.fa-star
                  span.menu-text #{settings.locale.menu_reward}
            if settings.display.movement == true
              li#movement 
                a.navbar-link.loading(href='/movement') 
                  span.fa.fa-comments
                  span.menu-text #{settings.locale.menu_movement}
            if settings.display.network == true
              li#network
                a.navbar-link(href='/network')
                  span.fa.fa-share-alt
                  span.menu-text #{settings.locale.menu_network}
            if settings.display.richlist == true
              li#richlist
                a.navbar-link(href='/richlist')
                  span.fa.fa-dollar
                  span.menu-text #{settings.locale.menu_richlist}
            if settings.display.markets == true
              li#markets
                a.navbar-link.loading(href='/markets/#{settings.markets.default}') 
                  span.fa.fa-line-chart
                  span.menu-text #{settings.locale.menu_markets}
            if settings.display.api == true
              li#info
                a.navbar-link(href='/info')
                  span.glyphicon.glyphicon-info-sign
                  span.menu-text #{settings.locale.menu_api}
    .col-xs-12
      img(src='#{settings.logo}', style='display: block; margin: auto; margin-top: -10px; margin-bottom: 20px; height:128px;')
    .col-xs-12
      .row.text-center
        .col-xs-3.col-xs-offset-0
          .panel.panel-default
            .panel-heading
              if settings.nethash_units == 'K'
                strong #{settings.locale.network} (KH/s)
              else if settings.nethash_units == 'M'
                strong #{settings.locale.network} (MH/s)
              else if settings.nethash_units == 'G'
                strong #{settings.locale.network} (GH/s)
              else if settings.nethash_units == 'T'
                strong #{settings.locale.network} (TH/s)
              else if settings.nethash_units == 'P'
                strong #{settings.locale.network} (PH/s)
              else if settings.nethash_units == 'H'
                strong #{settings.locale.network} (H/s)
            .panel-body
              if settings.index.difficulty == 'Hybrid'
               label#hashrate - 
               <br>
               label#lblX1  
              else  
               tt#hashrate.text-success -
        .col-xs-3
          .panel.panel-default
            .panel-heading
              strong #{settings.locale.difficulty}
            .panel-body
              if settings.index.difficulty == 'Hybrid'
               label#difficulty -
               <br>
               label#difficultyHybrid -
              else
               tt#difficulty.text-danger -
        .col-xs-3
          .panel.panel-default
            .panel-heading
              strong #{settings.locale.ex_supply} (#{settings.symbol})
            .panel-body
              if settings.index.difficulty == 'Hybrid'
               label#supply - 
               <br>
               label#lblX1
              else
               tt#supply.text-primary -
        .col-xs-3
          .panel.panel-default
            .panel-heading
              strong #{settings.markets.exchange} Price
            .panel-body
              if settings.index.difficulty == 'Hybrid'
               label#lastPrice -
               <br>
               label#lblX1
              else
               tt#lastPrice.text-dark -
                 
      .row.text-center(style='margin-top:10px;margin-bottom:20px;')
        form.form-inline(method='post', action='/search')      
          #index-search.form-group
            input.form-control(type='text', name='search', placeholder='#{settings.locale.ex_search_message}', style='min-width:80%;margin-right:5px;')
            button.btn.btn-success(type='submit') #{settings.locale.ex_search_button}
    block content
    .navbar.navbar-default.navbar-fixed-bottom.hidden-xs
          .col-md-4
            if settings.display.twitter
              ul.nav.navbar-nav
                li.pull-left
                  a#twitter-icon(href="https://twitter.com/#{settings.twitter}", target='_blank')  
                    span.glyphicon.fa.fa-twitter
            if settings.display.facebook
              ul.nav.navbar-nav
                li.pull-left
                  a#facebook-icon(href="https://www.facebook.com/#{settings.facebook}", target='_blank')
                    span.glyphicon.fa.fa-facebook
            if settings.display.googleplus
              ul.nav.navbar-nav
                li.pull-left
                  a#googleplus-icon(href="https://plus.google.com/#{settings.googleplus}", target='_blank')
                    span.glyphicon.fa.fa-google-plus
            if settings.display.youtube
              ul.nav.navbar-nav
                li.pull-left
                  a#youtube-icon(href="https://www.youtube.com/channel/#{settings.youtube}", target='_blank')
                    span.glyphicon.fa.fa-youtube
          .col-md-4
            ul.nav
              li.text-center(style='margin-left:80px;margin-right:80px; font-size:smaller;')
                p(style='margin-top:17px;')
                  a.navbar-link(href='https://github.com/iquidus/explorer', target='_blank') Powered by Iquidus Explorer
          span.connections
            label#lblBlockcount.label.label-primary(style='font-size:medium;') -
            label#lblConnections.label.label-success(style='font-size:medium;') -