status page concept

index.html

<div class="container">
          <h1>MYOB Status Page Concept</h1>
          <div class="accordion">
            <dl>
              <dt><a class="accordionTitle" href="#">MYOB Advanced</a></dt>
              <dd class="accordionItem accordionItemCollapsed">
                <div class="accordionStatusItem itemN"><p>SYSTEM STATUS: NORMAL</p>
                  <br><p>2 days, 3 hours, 6 minutes and 11 seconds. </p></div>
                <hr>
                <div class="accordionStatusItem"><p>UPTIME OVERVIEW</p></div>
                <hr>
                <div class="accordionStatusItem"><p>SCHEDULED MAINTENENCE</p></div>
                <hr>
                <div class="accordionStatusItem"><p>ACTIVITY FEED</p></div>
              </dd>
              <dt><a href="#" class="accordionTitle D">MYOB EXO OnTheGo</a></dt>
              <dd class="accordionItem accordionItemCollapsed">
                <div class="accordionStatusItem itemD"><p>SYSTEM STATUS: DISRUPTION</p>
                  <br><p>2 days, 3 hours, 6 minutes and 11 seconds. </p></div>
                <hr>
                <div class="accordionStatusItem"><p>UPTIME OVERVIEW</p></div>
                <hr>
                <div class="accordionStatusItem"><p>SCHEDULED MAINTENENCE</p></div>
                <hr>
                <div class="accordionStatusItem"><p>ACTIVITY FEED</p></div>
              </dd>
                   <dt><a class="accordionTitle" href="#">MYOB HIVE</a></dt>
              <dd class="accordionItem accordionItemCollapsed">
                <div class="accordionStatusItem itemN"><p>SYSTEM STATUS: NORMAL</p>
                  <br><p>2 days, 3 hours, 6 minutes and 11 seconds. </p></div>
                <hr>
                <div class="accordionStatusItem"><p>UPTIME OVERVIEW</p></div>
                <hr>
                <div class="accordionStatusItem"><p>SCHEDULED MAINTENENCE</p></div>
                <hr>
                <div class="accordionStatusItem"><p>ACTIVITY FEED</p></div>
              </dd> 
                      <dt><a class="accordionTitle" href="#">MYOB INFOCENTRAL</a></dt>
              <dd class="accordionItem accordionItemCollapsed">
                <div class="accordionStatusItem itemN"><p>SYSTEM STATUS: NORMAL</p>
                  <br><p>2 days, 3 hours, 6 minutes and 11 seconds. </p></div>
                <hr>
                <div class="accordionStatusItem"><p>UPTIME OVERVIEW</p></div>
                <hr>
                <div class="accordionStatusItem"><p>SCHEDULED MAINTENENCE</p></div>
                <hr>
                <div class="accordionStatusItem"><p>ACTIVITY FEED</p></div>
              </dd>  
              <dt><a href="#" class="accordionTitle PI">MYOB API</a></dt>
              <dd class="accordionItem accordionItemCollapsed">
                 <div class="accordionStatusItem itemPI"><p>SYSTEM STATUS: PERFORMANCE ISSUES</p>
                  <br><p>2 days, 3 hours, 6 minutes and 11 seconds. </p></div>
                <hr>
                <div class="accordionStatusItem"><p>UPTIME OVERVIEW</p></div>
                <hr>
                <div class="accordionStatusItem"><p>SCHEDULED MAINTENENCE</p></div>
                <hr>
                <div class="accordionStatusItem"><p>ACTIVITY FEED</p></div>
              </dd>
               <dt><a class="accordionTitle" href="#">MYOB Product X</a></dt>
              <dd class="accordionItem accordionItemCollapsed">
                <div class="accordionStatusItem itemN"><p>SYSTEM STATUS: NORMAL</p>
                  <br><p>2 days, 3 hours, 6 minutes and 11 seconds. </p></div>
                <hr>
                <div class="accordionStatusItem"><p>UPTIME OVERVIEW</p></div>
                <hr>
                <div class="accordionStatusItem"><p>SCHEDULED MAINTENENCE</p></div>
                <hr>
                <div class="accordionStatusItem"><p>ACTIVITY FEED</p></div>
              </dd>   
            </dl>
          </div>
        </div>

script.js

/*!
 * classie - class helper functions
 * from bonzo https://github.com/ded/bonzo
 * 
 * classie.has( elem, 'my-class' ) -> true/false
 * classie.add( elem, 'my-new-class' )
 * classie.remove( elem, 'my-unwanted-class' )
 * classie.toggle( elem, 'my-class' )
 */

/*jshint browser: true, strict: true, undef: true */
/*global define: false */

( function( window ) {

'use strict';

// class helper functions from bonzo https://github.com/ded/bonzo

function classReg( className ) {
  return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}

// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;

if ( 'classList' in document.documentElement ) {
  hasClass = function( elem, c ) {
    return elem.classList.contains( c );
  };
  addClass = function( elem, c ) {
    elem.classList.add( c );
  };
  removeClass = function( elem, c ) {
    elem.classList.remove( c );
  };
}
else {
  hasClass = function( elem, c ) {
    return classReg( c ).test( elem.className );
  };
  addClass = function( elem, c ) {
    if ( !hasClass( elem, c ) ) {
      elem.className = elem.className + ' ' + c;
    }
  };
  removeClass = function( elem, c ) {
    elem.className = elem.className.replace( classReg( c ), ' ' );
  };
}

function toggleClass( elem, c ) {
  var fn = hasClass( elem, c ) ? removeClass : addClass;
  fn( elem, c );
}

var classie = {
  // full names
  hasClass: hasClass,
  addClass: addClass,
  removeClass: removeClass,
  toggleClass: toggleClass,
  // short names
  has: hasClass,
  add: addClass,
  remove: removeClass,
  toggle: toggleClass
};

// transport
if ( typeof define === 'function' && define.amd ) {
  // AMD
  define( classie );
} else {
  // browser global
  window.classie = classie;
}

})( window );

//fake jQuery
var $ = function(selector){
  return document.querySelector(selector);
}
var accordion = $('.accordion');





//add event listener to all anchor tags with accordion title class
accordion.addEventListener("click",function(e) {
  e.stopPropagation();
  e.preventDefault();
  if(e.target && e.target.nodeName == "A") {
    var classes = e.target.className.split(" ");
    if(classes) {
      for(var x = 0; x < classes.length; x++) {
        if(classes[x] == "accordionTitle") {
          var title = e.target;

          //next element sibling needs to be tested in IE8+ for any crashing problems
          var content = e.target.parentNode.nextElementSibling;
          
          //use classie to then toggle the active class which will then open and close the accordion
         
          classie.toggle(title, 'accordionTitleActive');
          //this is just here to allow a custom animation to treat the content
          if(classie.has(content, 'accordionItemCollapsed')) {
            if(classie.has(content, 'animateOut')){
              classie.remove(content, 'animateOut');
            }
            classie.add(content, 'animateIn');

          }else{
             classie.remove(content, 'animateIn');
             classie.add(content, 'animateOut');
          }
          //remove or add the collapsed state
          classie.toggle(content, 'accordionItemCollapsed');



          
        }
      }
    }
    
  }
});

status-page-concept.markdown

status page concept

sever uptime screen

Forked from Paul John Scott's Pen status page concept.

A Pen by Lovemore on CodePen.

License.

style.scss

@import "compass/css3";

* {
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
}
@import url(https://fonts.googleapis.com/css?family=Ubuntu);
body { 
  background-color: #fff;

  font-family:'Ubuntu';
}

hr {
  opacity:0.3;
}

h1 {
  font-size:1.5em;
  color: #000;
  opacity: 0.3;
  padding:0.5em;
  margin-bottom:1em;
  text-align:center;
}
.accordion {
    dl {
        border:1px solid #eee;
         &:after {
            content: "";
            display:block;
            height:0em;
            width:100%;
            background-color:darken(#6fb72b, 10%);
        }
    }
    dt {
        >a {
          text-align:center;
         
          font-weight:50; 
          padding:2em;
          display:block;
          text-decoration:none;
          color:#fff;
          -webkit-transition:background-color 0.5s ease-in-out;
          
        }
      }
    dd {
        background-color:#fff;
        font-size:1em;
        line-height:1.5em;
        >p {
          padding:2em 2em 2em 2em;
        }
    }
}
.accordion {
    position:relative;
    background-color:#eee;
}
.container {
  max-width:960px;
  margin:0 auto;
  padding:2em 0 2em 0;
}

// status normal //
.accordionTitle {
 background-color:#6fb72b; 
  opacity:0.8;
  border-bottom:10px solid #fff;
  &:before {
   content: "+";

   font-size:1.5em;
   opacity: 0.5;
   line-height:0.5em;
   float:left; 
   @include transition(transform 0.3s ease-in-out);
  }
  &:after {
   content: "✓";

   font-size:2em;
   opacity: 0.9;
   line-height:0.5em;
   float:right; 
       margin-right:0.5em;
   @include transition(transform 0.3s ease-in-out);
  }
  &:hover {
    background-color:darken(#6fb72b, 10%);
  }
}
.accordionTitleActive {
   background-color:darken(#6fb72b, 10%);
    &:before {
       -webkit-transform:rotate(-225deg);
      -moz-transform:rotate(-225deg);
      transform:rotate(-225deg);
    }
}

// status disruption
.D {
 background-color:#f54257; 
  opacity:1.0;
  border-bottom:10px solid #fff;
  &:before {
   content: "+";

   font-size:1.5em;
   opacity: 0.5;
   line-height:0.5em;
   float:left; 
   @include transition(transform 0.3s ease-in-out);
  }
  &:after {
   content: "!";

   font-size:2em;
   opacity: 0.9;
   line-height:0.5em;
   float:right; 
       margin-right:0.8em;
   @include transition(transform 0.3s ease-in-out);
  }
  &:hover {
    background-color:darken(#f54257, 10%);
  }
}
.DActive {
   background-color:darken(#f54257, 10%);
    &:before {
       -webkit-transform:rotate(-225deg);
      -moz-transform:rotate(-225deg);
      transform:rotate(-225deg);
    }
}

// status performance issues
.PI {
 background-color:#ffc300; 
  opacity:1.0;
  border-bottom:10px solid #fff;
  &:before {
   content: "+";

   font-size:1.5em;
   opacity: 0.5;
   line-height:0.5em;
   float:left; 
   @include transition(transform 0.3s ease-in-out);
  }
  &:after {
   content: "⚠";

   font-size:2em;
   opacity: 0.9;
   line-height:0.5em;
   float:right; 
    margin-right:0.5em;
   @include transition(transform 0.3s ease-in-out);
  }
  &:hover {
    background-color:darken(#ffc300, 10%);
  }
}
.PIActive {
   background-color:darken(#ffc300, 10%);
    &:before {
       -webkit-transform:rotate(-225deg);
      -moz-transform:rotate(-225deg);
      transform:rotate(-225deg);
    }
}

// item details

.accordionItem {
    height:auto;
    overflow:hidden; 
    //SHAME: magic number to allow the accordion to animate
    @media all {
        max-height:50em;
        @include transition(max-height 1s);
    }
    @media screen and (min-width:48em) {
         max-height:50em;
         @include transition(max-height 0.5s);
    }
    
   
}
.accordionItemCollapsed {
    max-height:0;
}

.accordionStatusItem {
    text-align:center;
    opacity:0.7;
    padding:1em;
  color:#686868;
    font-size:1.5em;
}

// item normal

.itemN {
    text-align:center;
    opacity:0.7;
    padding:1em;
  color:#6fb72b;
    font-size:1.5em;
}

// item disruption

.itemD {
    text-align:center;
    opacity:0.7;
    padding:1em;
  color:#f54257;
    font-size:1.5em;
}

// item performance issues

.itemPI {
    text-align:center;
    opacity:0.7;
    padding:1em;
  color:#ec6915;
    font-size:1.5em;
}


.animateIn {
     -webkit-animation-name: accordionIn;
     -webkit-animation-duration: 0.65s;
     -webkit-animation-iteration-count: 1;
     -webkit-animation-direction: normal;
     -webkit-animation-timing-function: ease-in-out;
     -webkit-animation-fill-mode: both;
     -webkit-animation-delay: 0s;
     -moz-animation-name: normal;
     -moz-animation-duration: 0.65s;
     -moz-animation-iteration-count: 1;
     -moz-animation-direction: alternate;
     -moz-animation-timing-function: ease-in-out;
     -moz-animation-fill-mode: both;
     -moz-animation-delay: 0s;
     animation-name: accordionIn;
     animation-duration: 0.65s;
     animation-iteration-count: 1;
     animation-direction: normal;
     animation-timing-function: ease-in-out;
     animation-fill-mode: both;
     animation-delay: 0s;
    
}
.animateOut {
    -webkit-animation-name: accordionOut;
     -webkit-animation-duration: 0.75s;
     -webkit-animation-iteration-count: 1;
     -webkit-animation-direction: alternate;
     -webkit-animation-timing-function: ease-in-out;
     -webkit-animation-fill-mode:  both;
     -webkit-animation-delay: 0s;
     -moz-animation-name: accordionOut;
     -moz-animation-duration: 0.75s;
     -moz-animation-iteration-count: 1;
     -moz-animation-direction: alternate;
     -moz-animation-timing-function: ease-in-out;
     -moz-animation-fill-mode:  both;
     -moz-animation-delay: 0s;
     animation-name: accordionOut;
     animation-duration: 0.75s;
     animation-iteration-count: 1;
     animation-direction: alternate;
     animation-timing-function: ease-in-out;
     animation-fill-mode: both;
     animation-delay: 0s;
}

@-webkit-keyframes accordionIn {
         0% {
                opacity: 0;
                -webkit-transform:scale(0.8);
               
        }

       100% {
                opacity:1;
                -webkit-transform:scale(1);
       }
}

@-moz-keyframes accordionIn {
        0% {
                opacity: 0;
                -moz-transform:scale(0.8);
               
        }

       100% {
                opacity:1;
                -moz-transform:scale(1);
       }
}

@keyframes accordionIn {
        0% {
               opacity: 0;
               transform:scale(0.8);
        }

       100% {
                opacity:1;
                transform:scale(1);
       }
}
@-webkit-keyframes accordionOut {
         0% {
                opacity: 1;
                -webkit-transform:scale(1);
               
        }

       100% {
                opacity:0;
                -webkit-transform:scale(0.8);
       }
}

@-moz-keyframes accordionOut {
        0% {
                opacity: 1;
                -moz-transform:scale(1);
               
        }

       100% {
                opacity:0;
                -moz-transform:scale(0.8);
       }
}

@keyframes accordionOut {
        0% {
                opacity: 1;
                transform:scale(1);
               
        }

       100% {
                opacity:0;
                transform:scale(0.8);
       }
}