Widget:Error

From Local Guides Brasil
Jump to navigation Jump to search

<!DOCTYPE html> <html>

 <head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
   <link rel="stylesheet" media="screen" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600" />
   <link rel="stylesheet" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />


   <style>
    * {
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
        box-sizing:border-box;
    }
    html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
    small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend, caption, article, aside, canvas, details, figcaption, figure,  footer, header, hgroup,
    menu, nav, section, summary, time, mark, audio, video {
        margin:0;
        padding:0;
        border:0;
        outline:0;
        vertical-align:baseline;
        background:transparent;
    }
    article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
        display: block;
    }
    html {
        font-size: 16px;
        line-height: 24px;
        width:100%;
        height:100%;
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        overflow-y:scroll;
        overflow-x:hidden;
    }
    img {
        vertical-align:middle;
        max-width: 100%;
        height: auto;
        border: 0;
        -ms-interpolation-mode: bicubic;
    }
    body {
        min-height:100%;
        -webkit-font-smoothing: subpixel-antialiased;
    }
    .clearfix {

clear:both; zoom: 1;

    }
    .clearfix:before, .clearfix:after {
        content: "\0020";
        display: block;
        height: 0;
        visibility: hidden;
    } 
    .clearfix:after {
        clear: both;
    }
   </style>
   <style>
 .plain.error-page-wrapper {
   font-family: 'Source Sans Pro', sans-serif;
   background-color:#6355bc;
   padding:0 5%;
   position:relative;
 }
 .plain.error-page-wrapper .content-container {
   -webkit-transition: left .5s ease-out, opacity .5s ease-out;
   -moz-transition: left .5s ease-out, opacity .5s ease-out;
   -ms-transition: left .5s ease-out, opacity .5s ease-out;
   -o-transition: left .5s ease-out, opacity .5s ease-out;
   transition: left .5s ease-out, opacity .5s ease-out;
   max-width:400px;
   position:relative;
   left:-30px;
   opacity:0;
 }
 .plain.error-page-wrapper .content-container.in {
   left: 0px;
   opacity:1;
 }
 .plain.error-page-wrapper .head-line {
   transition: color .2s linear;
   font-size:48px;
   line-height:60px;
   color:rgba(255,255,255,.2);
   letter-spacing: -1px;
   margin-bottom: 5px;
 }
 .plain.error-page-wrapper .subheader {
   transition: color .2s linear;
   font-size:36px;
   line-height:46px;
   color:#fff;
 }
 .plain.error-page-wrapper hr {
   height:1px;
   background-color: rgba(255,255,255,.2);
   border:none;
   width:250px;
   margin:35px 0;
 }
 .plain.error-page-wrapper .context {
   transition: color .2s linear;
   font-size:18px;
   line-height:27px;
   color:#fff;
 }
 .plain.error-page-wrapper .context p {
   margin:0;
 }
 .plain.error-page-wrapper .context p:nth-child(n+2) {
   margin-top:12px;
 }
 .plain.error-page-wrapper .buttons-container {
   margin-top: 45px;
   overflow: hidden;
 }
 .plain.error-page-wrapper .buttons-container a {
   transition: color .2s linear, border-color .2s linear;
   font-size:14px;
   text-transform: uppercase;
   text-decoration: none;
   color:#fff;
   border:2px solid white;
   border-radius: 99px;
   padding:8px 30px 9px;
   display: inline-block;
   float:left;
 }
 .plain.error-page-wrapper .buttons-container a:hover {
   background-color:rgba(255,255,255,.05);
 }
 .plain.error-page-wrapper .buttons-container a:first-child {
   margin-right:25px;
 }
 @media screen and (max-width: 485px) {
   .plain.error-page-wrapper .header {
     font-size:36px;
    }
   .plain.error-page-wrapper .subheader {
     font-size:27px;
     line-height:38px;
    }
   .plain.error-page-wrapper hr {
     width:185px;
     margin:25px 0;
    }
   .plain.error-page-wrapper .context {
     font-size:16px;
     line-height: 24px;
    }
   .plain.error-page-wrapper .buttons-container {
     margin-top:35px;
   }
   .plain.error-page-wrapper .buttons-container a {
     font-size:13px;
     padding:8px 0 7px;
     width:45%;
     text-align: center;
   }
   .plain.error-page-wrapper .buttons-container a:first-child {
     margin-right:10%;
   }
 }

</style>

   <style>
   .background-color {
     background-color: #6355BC !important;
   }


   .primary-text-color {
     color: #FFFFFF !important;
   }
   .secondary-text-color {
     color: #8277c9 !important;
   }
   .sign-text-color {
     color: #FFBA00 !important;
   }
   .sign-frame-color {
     color: #343C3F;
   }
   .pane {
     background-color: #FFFFFF !important;
   }
   .border-button {
     color: #FFFFFF !important;
     border-color: #FFFFFF !important;
   }
   .button {
     background-color: #FFFFFF !important;
     color:  !important;
   }


</style>

 </head>
 <body class="plain error-page-wrapper background-color background-image">

404

Oops, a página que você
procurando não existe.


Você pode querer voltar para a página inicial.
Se você acha que algo está quebrado, relate um problema.

<a class="border-button" href="https://guiasdobrasil.com.br" target="_blank">Vá para a página inicial</a> <a class="border-button" href="mailto:suporte@guiasdobrasil.com.br" target="_blank">Reportar um problema</a>


   <script>
    function ErrorPage(container, pageType, templateName) {
      this.$container = $(container);
      this.$contentContainer = this.$container.find(templateName == 'sign' ? '.sign-container' : '.content-container');
      this.pageType = pageType;
      this.templateName = templateName;
    }
    ErrorPage.prototype.centerContent = function () {
      var containerHeight = this.$container.outerHeight()
        , contentContainerHeight = this.$contentContainer.outerHeight()
        , top = (containerHeight - contentContainerHeight) / 2
        , offset = this.templateName == 'sign' ? -100 : 0;
      this.$contentContainer.css('top', top + offset);
    };
    ErrorPage.prototype.initialize = function () {
      var self = this;
      this.centerContent();
      this.$container.on('resize', function (e) {
        e.preventDefault();
        e.stopPropagation();
        self.centerContent();
      });
      // fades in content on the plain template
      if (this.templateName == 'plain') {
        window.setTimeout(function () {
          self.$contentContainer.addClass('in');
        }, 500);
      }
      // swings sign in on the sign template
      if (this.templateName == 'sign') {
        $('.sign-container').animate({textIndent : 0}, {
          step : function (now) {
            $(this).css({
              transform : 'rotate(' + now + 'deg)',
              'transform-origin' : 'top center'
            });
          },
          duration : 1000,
          easing : 'easeOutBounce'
        });
      }
    };


    ErrorPage.prototype.createTimeRangeTag = function(start, end) {
      return (
        ' - .'
      )
    };


    ErrorPage.prototype.handleStatusFetchSuccess = function (pageType, data) {
      if (pageType == '503') {
        $('#replace-with-fetched-data').html(data.status.description);
      } else {
        if (!!data.scheduled_maintenances.length) {
          var maint = data.scheduled_maintenances[0];
          $('#replace-with-fetched-data').html(this.createTimeRangeTag(maint.scheduled_for, maint.scheduled_until));
          $.fn.localizeTime();
        }
        else {
          $('#replace-with-fetched-data').html('(there are no active scheduled maintenances)');
        }
      }
    };


    ErrorPage.prototype.handleStatusFetchFail = function (pageType) {
      $('#replace-with-fetched-data').html('(enter a valid Statuspage url)');
    };


    ErrorPage.prototype.fetchStatus = function (pageUrl, pageType) {
      //console.log('in app.js fetch');
      if (!pageUrl || !pageType || pageType == '404') return;
      var url = 
        , self = this;
      if (pageType == '503') {
        url = pageUrl + '/api/v2/status.json';
      }
      else {
        url = pageUrl + '/api/v2/scheduled-maintenances/active.json';
      }
      $.ajax({
        type : "GET",
        url : url,
      }).success(function (data, status) {
        //console.log('success');
        self.handleStatusFetchSuccess(pageType, data);
      }).fail(function (xhr, msg) {
        //console.log('fail');
        self.handleStatusFetchFail(pageType);
      });
    };
    var ep = new ErrorPage('body', "404", "plain");
    ep.initialize();
    // hack to make sure content stays centered >_<
    $(window).on('resize', function() {
      $('body').trigger('resize')
    });
   </script>


 </body>

</html>