purple-explorer/views/layout.pug

doctype html
html(lang='en')
  head
    meta(charset='UTF-8')
    meta(name='viewport' content='width=device-width, initial-scale=1')
    meta(http-equiv='Content-Language', content='en')
    title=settings.title
    link(rel='stylesheet', href='/css/themes/' + settings.theme + '/bootstrap.min.css')
    link(rel='stylesheet', href='//use.fontawesome.com/releases/v5.15.1/css/all.css')
    if active == 'markets' || active == 'richlist'
      link(rel='stylesheet', href='/css/jquery.jqplot.min.css')
    if active == 'network'
      link(rel='stylesheet', href='/css/flag-icon.min.css')
    link(rel='stylesheet', type='text/css', href='//cdn.datatables.net/v/bs4/dt-1.10.22/datatables.min.css')
    link(rel='stylesheet', href='/css/style.min.css')
    script(type='text/javascript', src='//cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js', integrity='sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==', crossorigin='anonymous')
    script(type='text/javascript', src='//cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js', integrity='sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx', crossorigin='anonymous')
    if active == 'markets' || active == 'richlist'
      script(type='text/javascript', src='/js/jquery.jqplot.min.js')
    if active == 'markets'
      script(type='text/javascript', src='/js/jqplot.dateAxisRenderer.min.js')
      script(type='text/javascript', src='/js/jqplot.ohlcRenderer.min.js')
      script(type='text/javascript', src='/js/jqplot.highlighter.min.js')
    if active == 'richlist'
      script(type='text/javascript', src='/js/jqplot.pieRenderer.min.js')
    script(type='text/javascript', src='//cdn.datatables.net/v/bs4/dt-1.10.22/datatables.min.js')
    if active == 'reward'
      script(type='text/javascript', src='/js/Chart.min.js')
    script.
      /* Special thanks to the stackoverflow community for the getParameterByName function: https://stackoverflow.com/a/901144/3038650 */
      function getParameterByName(name, url = window.location.href) {
        name = name.replace(/[\[\]]/g, '\\$&');
        var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
            results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, ' '));
      }
      function fixFooterHeightAndPosition() {
        var screenWidth = $(window).width();

        if (screenWidth <= 575) {
          // Mobile
          $('#footer-container').css('height', '!{settings.footer_height_mobile}');
        } else if (screenWidth >= 576 && screenWidth <= 991) {
          // Tablet
          $('#footer-container').css('height', '!{settings.footer_height_tablet}');
        } else {
          // Desktop
          $('#footer-container').css('height', '!{settings.footer_height_desktop}');
        }

        if (!#{settings.sticky_footer}) {
          // Wait a tick before fixing footer position to give time for elements to be rendered
          var nonStickyFooterSetIntervalID = setInterval(function() {
            // Stop setInterval from running again
            clearInterval(nonStickyFooterSetIntervalID);
            // Ensure footer is shown at the bottom of the viewport
            var offset = (window.innerHeight - $('#footer-container').position().top - $('#footer-container').outerHeight());
            $('#footer-container').css('margin-top', (offset > 0 ? offset : '10') + 'px');
          }, 1, "tmrFixFooter");
        }

        fixSocialLinkFontSize();
      }
      function fixSocialLinkFontSize() {
        var fontSize = $('#footer-container').height() * (getSocialLinkHeight() / 100);
        $('#footer-container .social-link').css('font-size', fontSize);
      }
      function getSocialLinkHeight() {
        var retVal = 70;
        var screenWidth = $(window).width();

        if (screenWidth <= 575) {
          // Mobile
          retVal = !{settings.social_link_percent_height_mobile};
        } else if (screenWidth >= 576 && screenWidth <= 991) {
          // Tablet
          retVal = !{settings.social_link_percent_height_tablet};
        } else {
          // Desktop
          retVal = !{settings.social_link_percent_height_desktop};
        }

        return retVal;
      }
      $(document).ready(function() {
        if ('#{active}' != '')
          $('##{active}').addClass('active');
        function update_stats() {
          $.ajax({url: '/ext/summary', success: function(json) {
            $("#masternodeCountOnline").text(json.data[0].masternodeCountOnline).prop("alt", json.data[0].masternodeCountOnline+" nodes online").prop("title", json.data[0].masternodeCountOnline+" nodes online");
            $("#masternodeCountOffline").text(json.data[0].masternodeCountOffline).prop("alt", json.data[0].masternodeCountOffline+" unreachable nodes").prop("title", json.data[0].masternodeCountOffline+" unreachable nodes");
            $("#spnMasternodeCountOnline").prop("alt", json.data[0].masternodeCountOnline+" nodes online").prop("title", json.data[0].masternodeCountOnline+" nodes online");
            $("#spnMasternodeCountOffline").prop("alt", json.data[0].masternodeCountOffline+" unreachable nodes").prop("title", json.data[0].masternodeCountOffline+" unreachable nodes");

            var supplyString = json.data[0].supply;
            var diffString = json.data[0].difficulty;
            var hashrateString = json.data[0].hashrate;

            if (!isNaN(json.data[0].difficulty))
              diffString = parseFloat(json.data[0].difficulty).toFixed(2);
            if (!isNaN(json.data[0].supply))
              supplyString = parseInt(parseFloat(json.data[0].supply).toFixed(0)).toLocaleString('en');
            if (!isNaN(json.data[0].hashrate))
              hashrateString = parseFloat(json.data[0].hashrate).toLocaleString('en');

            $("#supply").text(supplyString);
            $("#difficulty").text(diffString);
            $("#difficultyHybrid").text(json.data[0].difficultyHybrid);
            $("#hashrate").text(hashrateString);
            $("#lastPrice").text(parseFloat(json.data[0].lastPrice).toFixed(8));
            $("#marketCap").html((parseFloat(json.data[0].lastPrice).toFixed(8) * parseInt(parseFloat(json.data[0].supply).toFixed(0))).toLocaleString('en') + '<span class="small" style="margin-right:0;">' + '#{settings.markets.exchange}'.toUpperCase() + '</span>');
            $("#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 }
        });
        if ($('#history-table tbody tr').length) {
          $('#history-table').dataTable({
            searching: false,
            ordering: false,
            responsive: true,
            language: {
              paginate: {
                previous: '<',
                next: '>'
              }
            }
          });
        }
        $('.iquidus').css('color',$('.table').css('color'));
        $(window).resize(function () {
          $($.fn.dataTable.tables(true)).DataTable().columns.adjust();
          fixFooterHeightAndPosition();
        });
        setInterval(function() {
          update_stats();
        }, 60000);
        update_stats();
        function getNetworkPanel() {
          var networkSuffix='';
          switch ('#{settings.nethash_units}') {
            case "K":
              networkSuffix='(KH/s)';
              break;
            case "M":
              networkSuffix='(MH/s)';
              break;
            case "G":
              networkSuffix='(GH/s)';
              break;
            case "T":
              networkSuffix='(TH/s)';
              break;
            case "P":
              networkSuffix='(PH/s)';
              break;
            case "H":
              networkSuffix='(H/s)';
              break;
          }
          var hashRateType='<label id="hashrate"></label>';
          if ('#{settings.index.difficulty}' == 'Hybrid') hashRateType+='<br /><label id="lblX1"></label>';
          return '<div class="card-header"><strong>#{settings.locale.network} <span class="small">'+networkSuffix+'</span></strong></div><div class="card-body"><div id="hashratepanel" class="header-panel"><span class="glyphicon fa fa-cogs"></span>'+hashRateType+'</div></div>';
        }
        function getDifficultyPanel() {
          var difficultyType='<label id="difficulty"></label>';
          if ('#{settings.index.difficulty}' == 'Hybrid') difficultyType+='<br /><label id="difficultyHybrid"></label>';
          return '<div class="card-header"><strong>#{settings.locale.difficulty}</strong></div><div class="card-body"><div id="difficultypanel" class="header-panel"><span class="glyphicon fas fa-sliders-h"></span>'+difficultyType+'</div></div>';
        }
        function getMasternodesPanel() {
          return '<div class="card-header"><strong>#{settings.locale.masternodecount}</strong></div><div class="card-body"><div id="masternodepanel" class="header-panel"><span id="spnMasternodeCountOnline" class="glyphicon fa fa-check-circle"></span><label id="masternodeCountOnline"></label><label>&nbsp;/&nbsp;</label><label id="masternodeCountOffline"></label><span id="spnMasternodeCountOffline" class="glyphicon fa fa-exclamation-triangle"></span></div></div>';
        }
        function getCoinSupplyPanel() {
          var supplyType='<label id="supply"></label>';
          if ('#{settings.index.difficulty}' == 'Hybrid') supplyType+='<br /><label id="lblX1"></label>';
          if (#{settings.index.show_market_cap} == true && #{settings.index.show_market_cap_over_price} != true) supplyType+='<br /><span class="glyphicon fas fa-chart-line"></span><label>(</label><label id="marketCap">-</label><label>)</label>';
          return '<div class="card-header"><strong>#{settings.locale.ex_supply} <span class="small">(#{settings.symbol})</span></strong></div><div class="card-body"><div id="supplypanel" class="header-panel"><span class="glyphicon fa fa-chart-pie"></span>'+supplyType+'</div></div>';
        }
        function getPricePanel() {
          if (#{settings.index.show_market_cap} == true && #{settings.index.show_market_cap_over_price} == true) {
            return '<div class="card-header"><strong>Market Cap</strong></div><div class="card-body"><div id="pricepanel" class="header-panel"><span class="glyphicon fas fa-chart-line"></span><label id="marketCap"></label></div></div>';
          } else {
            var priceType='<label id="lastPrice">-</label>';
            if ('#{settings.index.difficulty}' == 'Hybrid') priceType+='<br /><label id="lblX1"></label>';
            return '<div class="card-header"><strong>Price <span class="small">(#{settings.markets.exchange})</span></strong></div><div class="card-body"><div id="pricepanel" class="header-panel"><span class="glyphicon fa fa-rocket"></span>'+priceType+'</div></div>';
          }
        }
        function getActivePanel(nPanelName) {
          var sReturn='';
          switch (nPanelName) {
            case "networkpnl":
              sReturn=getNetworkPanel();
              break;
            case "difficultypnl":
              sReturn=getDifficultyPanel();
              break;
            case "masternodespnl":
              sReturn=getMasternodesPanel();
              break;
            case "coinsupplypnl":
              sReturn=getCoinSupplyPanel();
              break;
            case "pricepnl":
              sReturn=getPricePanel();
              break;
          }
          return sReturn;
        }
        function hideShowPanel(sPanelID, sPanelName) {
          var oPanel = document.getElementById(sPanelName);
          if (typeof(oPanel) != 'undefined' && oPanel != null) document.getElementById(sPanelName).innerHTML=getActivePanel(sPanelID);
        }
        hideShowPanel('#{settings.panel1}', 'pnlOne');
        hideShowPanel('#{settings.panel2}', 'pnlTwo');
        hideShowPanel('#{settings.panel3}', 'pnlThree');
        hideShowPanel('#{settings.panel4}', 'pnlFour');
        hideShowPanel('#{settings.panel5}', 'pnlFive');
        fixFooterHeightAndPosition();
      });
  body
    - var navbarClasses = ['nav','navbar','navbar-expand-lg'];
    - var footerClasses = ['nav','navbar','navbar-default','d-none','d-md-flex','d-flex','footer'];
    if settings.sticky_header == true
      - navbarClasses.push('fixed-top');
    if settings.sticky_footer == true
      - footerClasses.push('fixed-bottom');
    if settings.display.navbar_dark == true
      - navbarClasses.push('bg-dark');
      - navbarClasses.push('navbar-dark');
      - footerClasses.push('bg-dark');
      - footerClasses.push('navbar-dark');
    else if settings.display.navbar_light == true
      - navbarClasses.push('bg-light');
      - navbarClasses.push('navbar-light');
      - footerClasses.push('bg-light');
      - footerClasses.push('navbar-light');
    else
      - navbarClasses.push('bg-primary');
      - navbarClasses.push('navbar-dark');
      - footerClasses.push('bg-primary');
      - footerClasses.push('navbar-dark');
    div(class=navbarClasses, role='navigation', style=settings.homelink == 'logo' ? 'padding-left:0;' : '')
      .navbar-header
        button.navbar-toggler(type='button', data-toggle='collapse', data-target='#navbar-collapse')
          span.navbar-toggler-icon
      if settings.homelink == 'title'
        a.navbar-brand(href='/', style='order:-1;') #{settings.title}
      else if settings.homelink == 'coin'
        a.navbar-brand(href='/', style='order:-1;') #{settings.coin}
      else if settings.homelink == 'logo'
        a(href='/', alt=settings.coin + ' Home', title=settings.coin + ' Home', style='order:-1;')
          img.logo-main(src=settings.logo, style='margin:0;max-height:' + settings.logoheight + 'px;')
      .collapse.navbar-collapse(id='navbar-collapse')
        ul.navbar-nav.mr-auto
          li#home
            a.nav-link(href='/')
              span.fa.fa-search
              span.margin-left-5 #{settings.locale.menu_explorer}
          if settings.heavy == true
            li#reward
              a.nav-link(href='/reward')
                span.fa.fa-star
                span.margin-left-5 #{settings.locale.menu_reward}
          if settings.display.movement == true
            li#movement
              a.nav-link.loading(href='/movement')
                span.far.fa-money-bill-alt
                span.margin-left-5 #{settings.locale.menu_movement}
          if settings.display.network == true
            li#network
              a.nav-link(href='/network')
                span.fa.fa-share-alt
                span.margin-left-5 #{settings.locale.menu_network}
          if settings.display.richlist == true
            li#richlist
              a.nav-link(href='/richlist')
                span.fab.fa-btc
                span.margin-left-5 #{settings.locale.menu_richlist}
          if settings.display.markets == true
            li#markets
              a.nav-link.loading(href='/markets/'+settings.markets.default)
                span.fas.fa-chart-line
                span.margin-left-5 #{settings.locale.menu_markets}
          if settings.display.api == true
            li#info
              a.nav-link(href='/info')
                span.fa.fa-info-circle
                span.margin-left-5 #{settings.locale.menu_api}
    div#body-container(style='margin-top:' + (settings.sticky_header == true ? '80px;' : '20px'))
      if showSync != null && showSync == true
        .col-lg-12
          .alert.alert-warning
            .cardSpacer
              span.fas.fa-exclamation-triangle(style='margin-right:5px')
              strong #{settings.locale.ex_warning}
            div #{settings.locale.initial_index_alert}
      .col-lg-12
        .row.text-center.d-flex.justify-content-center
          div(class="col-lg-2 col-lg-offset-" + settings.paneloffset)
            - if(settings.panel1 != '') {
              .card.card-default.border-0.d-none.d-lg-block.d-block.cardSpacer(id='pnlOne')
            - }
          - if(settings.panel2 != '') {
            .col-lg-2
              .card.card-default.border-0.d-none.d-lg-block.d-block.cardSpacer(id='pnlTwo')
          - }
          - if(settings.panel3 != '') {
            .col-lg-2
              .card.card-default.border-0.d-none.d-lg-block.d-block.cardSpacer(id='pnlThree')
          - }
          - if(settings.panel4 != '') {
            .col-lg-2
              .card.card-default.border-0.d-none.d-lg-block.d-block.cardSpacer(id='pnlFour')
          - }
          - if(settings.panel5 != '') {
          .col-lg-2
            .card.card-default.border-0.d-none.d-lg-block.d-block.cardSpacer(id='pnlFive')
          - }
        .row.text-center(style='margin-top:10px;margin-bottom:20px;')
          form.form-inline.col-12.d-flex.justify-content-center(method='post', action='/search')
            #index-search.form-group.d-flex.justify-content-center
              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
    div#footer-container(class=footerClasses, role='navigation')
      .col-4.navbar-nav
        if settings.display.github || settings.display.discord || settings.display.telegram || settings.display.reddit || settings.display.youtube || settings.display.slack || settings.display.twitter || settings.display.facebook || settings.display.googleplus || settings.display.bitcointalk || settings.display.website
          ul.nav.justify-content-left
            if settings.display.github
              li.float-left
                a#github-icon.nav-link.social-link.border-0(href="https://github.com/" + settings.github, target='_blank', alt=settings.coin + ' Github', title=settings.coin + ' Github')
                  span.glyphicon.fab.fa-github
            if settings.display.discord
              li.float-left
                a#discord-icon.nav-link.social-link.border-0(href=settings.discord, target='_blank', alt=settings.coin + ' Discord', title=settings.coin + ' Discord')
                  span.glyphicon.fab.fa-discord
            if settings.display.telegram
              li.float-left
                a#telegram-icon.nav-link.social-link.border-0(href="https://t.me/" + settings.telegram, target='_blank', alt=settings.coin + ' Telegram', title=settings.coin + ' Telegram')
                  span.glyphicon.fab.fa-telegram
            if settings.display.reddit
              li.float-left
                a#reddit-icon.nav-link.social-link.border-0(href="https://reddit.com/r/" + settings.reddit, target='_blank', alt=settings.coin + ' Reddit', title=settings.coin + ' Reddit')
                  span.glyphicon.fab.fa-reddit
            if settings.display.youtube
              li.float-left
                a#youtube-icon.nav-link.social-link.border-0(href=settings.youtube, target='_blank', alt=settings.coin + ' YouTube', title=settings.coin + ' YouTube')
                  span.glyphicon.fab.fa-youtube
            if settings.display.slack
              li.float-left
                a#slack-icon.nav-link.social-link.border-0(href=settings.slack, target='_blank', alt=settings.coin + ' Slack', title=settings.coin + ' Slack')
                  span.glyphicon.fab.fa-slack
            if settings.display.twitter
              li.float-left
                a#twitter-icon.nav-link.social-link.border-0(href="https://twitter.com/" + settings.twitter, target='_blank', alt=settings.coin + ' Twitter', title=settings.coin + ' Twitter')
                  span.glyphicon.fab.fa-twitter
            if settings.display.facebook
              li.float-left
                a#facebook-icon.nav-link.social-link.border-0(href="https://www.facebook.com/" + settings.facebook, target='_blank', alt=settings.coin + ' Facebook', title=settings.coin + ' Facebook')
                  span.glyphicon.fab.fa-facebook
            if settings.display.googleplus
              li.float-left
                a#googleplus-icon.nav-link.social-link.border-0(href="https://plus.google.com/" + settings.googleplus, target='_blank', alt=settings.coin + ' Google+', title=settings.coin + ' Google+')
                  span.glyphicon.fab.fa-google-plus
            if settings.display.bitcointalk
              li.float-left
                a#bitcointalk-icon.nav-link.social-link.border-0(href="https://bitcointalk.org/index.php?topic=" + settings.bitcointalk, target='_blank', alt=settings.coin + ' Bitcointalk', title=settings.coin + ' Bitcointalk')
                  span.glyphicon.fab.fa-btc
            if settings.display.website
              li.float-left
                a#website-icon.nav-link.social-link.border-0(href=settings.website, target='_blank', alt=settings.coin + ' Website', title=settings.coin + ' Website')
                  span.glyphicon.fa.fa-link
      .col-4.navbar-nav
        ul.nav.justify-content-center
          li.text-center
            p
              a.nav-link.poweredby.border-0(href='https://github.com/team-exor/eiquidus', target='_blank') eIquidus Explorer v#{settings.explorer_version}
      .col-4.navbar-nav
        ui.nav.justify-content-end
          label#lblBlockcount.badge.badge-secondary.nav-link.border-0.float-right
          label#lblConnections.badge.badge-secondary.nav-link.border-0.float-right