<html>
<body>

<link rel="stylesheet" href="css/project.css" type="text/css">

<div id='project'></div>
<div id="shadow"></div>

<br>
<a href="javascript:project.scrollToEvent('Project Start')"><div class="interface">REWIND</div></a>
<a href="javascript:project.startPlay('forward', 2)"><div class="interface">PLAY</div></a>
<a href="javascript:project.stopPlay()"><div class="interface">STOP</div></a>

<script>
   var project = new Timeline( "project", "xml/project.xml" );
</script>


</body>
</html>

 

 

 

HTML




/* == main timeline div (background) =================================== */

#project {
   position: relative;
   left: 0;
   top: 0;
   width: 100%;
   height: 9.2cm;

   font-family: "Trebuchet MS", "Helvetica","Sans-Serif";

   border: .02cm solid white;
   border-radius: 1.05cm;
   background: rgba(236, 236, 229, 1);
   
   -moz-box-shadow: 0 .05cm .1cm rgba(0, 0, 0, .2);
   -webkit-box-shadow: 0 .05cm .1cm rgba(0, 0, 0, .2);
   box-shadow: 0 .05cm .1cm rgba(0, 0, 0, .2);
}

#shadow {
   width: 100%;
   height: 20px;
   opacity: .5;
   background-image: url('../images/shadow.png');
   background-size: 95% 100%;
   background-repeat: no-repeat;
   background-position: center;
   
   /* fix faint box-shadow in firefox */
   -moz-box-shadow: 0 0 0 #fff;
-webkit-box-shadow: 0 0 0 #fff;
box-shadow: 0 0 0 #fff;
}



/* == ruler =================================== */

#ruler_container {
   display: block;
   top: 3cm;
   height: 5.0cm; /* used to anchor the ruler's elements to the bottom (flipping the ruler vertically) */
   z-index: 11;
}


.ruler_long_tick {
   width: .05cm;
   height: 4.6cm;
   background: rgba(0, 0, 0, .1);
}

.ruler_long_label {
   top: 4.65cm;
   font-size: .4cm;
   color: rgba(0, 0, 0, .5);
   font-weight: bold;
   white-space: nowrap;
}


.ruler_medium_tick {
   width: .02cm;
   height: 4.1cm;
   background: rgba(0, 0, 0, .1);
}

.ruler_medium_label {
   top: 4.45cm;
   font-size: .35cm;
   color: rgba(0, 0, 0, .25);
   font-weight: normal;
   white-space: nowrap;
}


.ruler_short_tick {
   width: .02cm;
   height: 4.2cm;
   background: rgba(0, 0, 0, .1);
}

.ruler_short_label {
   top: 4.25cm;
   font-size: .3cm;
   color: rgba(255, 255, 255, 1);
   font-weight: normal;
   white-space: nowrap;
}



/* == timeline indicator =================================== */

#indicator_container {
   display: block;
   top: 0cm;
   height: 2.45cm; /* used to anchor #indicator_text to the bottom, allowing the text to grow upward */
   z-index: 12;
}

#indicator_text {
   display: block;
   bottom: .49cm;
   font-size: .4cm;
   font-weight: bold;
   color: rgba(0, 0, 0, .6);
   text-shadow: 0 .02cm .07cm rgba(0, 0, 0, .25);
}

#indicator_graphic {
   display: block;
   bottom: 0cm;
   border-left: .25cm solid transparent;         /* CSS trick to draw triangles */
   border-right: .25cm solid transparent;         /* CSS trick to draw triangles */
   border-top: .25cm solid rgba(254, 80, 50, .65);      /* CSS trick to draw triangles */
}



/* == timeline bar =================================== */

#bar_container {
   display: block;
   top: 2.5cm;
   z-index: 13;
}

#bar_past {
   z-index: 10;
   visibility: visible;
   height: .5cm;
   
   background: rgba(0, 0, 0, .6);
         
   -moz-box-shadow: 0 .13cm .2cm rgba(0, 0, 0, .25);
   -webkit-box-shadow: 0 .13cm .2cm rgba(0, 0, 0, .25);
   box-shadow: 0 .13cm .2cm rgba(0, 0, 0, .25);
}

#bar_future {
   z-index: 9;
   visibility: visible;
   height: .5cm;

   background: rgba(0, 0, 0, .25);
   
   -moz-box-shadow: 0 .13cm .2cm rgba(0, 0, 0, .5);
   -webkit-box-shadow: 0 .13cm .2cm rgba(0, 0, 0, .5);
   box-shadow: 0 .13cm .2cm rgba(0, 0, 0, .5);
}

#bar_cap_left {
   z-index: 8;
   visibility: visible;
   width: .8cm;
   height: .5cm;
   
   background: rgba(0, 0, 0, 1);
   border: solid rgba(0, 0, 0, .25) .07cm;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   border-top-left-radius: .5cm;
   border-bottom-left-radius: .5cm;
   
   -moz-box-shadow: 0 .13cm .2cm rgba(0, 0, 0, .5);
   -webkit-box-shadow: 0 .13cm .2cm rgba(0, 0, 0, .5);
   box-shadow: 0 .13cm .2cm rgba(0, 0, 0, .5);
}

#bar_cap_right {
   z-index: 7;
   visibility: visible;
   width: .8cm;
   height: .5cm;
   
   background: rgba(0, 0, 0, 1);
   border: solid rgba(0, 0, 0, .25) .07cm;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   border-top-right-radius: .5cm;
   border-bottom-right-radius: .5cm;
   
   -moz-box-shadow: 0 .13cm .2cm rgba(0, 0, 0, .5);
   -webkit-box-shadow: 0 .13cm .2cm rgba(0, 0, 0, .5);
   box-shadow: 0 .13cm .2cm rgba(0, 0, 0, .5);
}

#bar_present {
   visibility: hidden;
   width: 2cm;
   height: 2.26cm;
   
   background-image: url('../images/push_pin.png');
   background-size: 100% 100%;
   background-repeat: no-repeat;
   -ms-transform: translate(24%, -13%);
   -webkit-transform: translate(24%, -13%);
   transform: translate(24%, -13%);
}



/* == connectors =================================== */

#connectors_container {
   display: block;
   top: 2.5cm;
   height: .5cm; /* used to anchor connectors to the bottom when setting's screen_fill_direction="up" */
   z-index: 14; /* used to place connectors either behind or in front of period events */
}

.event_connector {
   height: .75cm;   
   opacity: 1;
   border-width: .06cm;
   border-style: dotted;
}



/* == date events =================================== */

#date_events_container {
   visibility: visible;
   top: 2.5cm;
   height: .5cm; /* used to anchor events to the bottom when setting's screen_fill_direction="up" */
   z-index: 15;
}

.event_background {
   width: 5.4cm;
   background: rgba(255, 255, 240, .9);
   padding: .26cm .2cm .2cm .2cm;

   -moz-box-shadow: 0 .1cm .2cm rgba(0, 0, 0, .4);
   -webkit-box-shadow: 0 .1cm .2cm rgba(0, 0, 0, .4);
   box-shadow: 0 .1cm .2cm rgba(0, 0, 0, .4);

   border-radius: .52cm;
   -moz-box-sizing: border-box; /* padding without affecting width and height */
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

.event_title {
   display: block;
   font-size: .4cm;
   color: #444444;
   font-weight: bold;
   text-shadow: 0 .02cm .07cm rgba(0, 0, 0, .25);
   margin: 0cm 0cm .05cm 0cm;
   text-align: center;
}

.event_date {
   display: none;
   font-size: .3cm;
   color: #888888;
   font-weight: bold;
   margin: 0cm 0cm .25cm 0cm;
}
   
.event_notes {
   display: block;
   font-size: .4cm;
   color: #444444;
   margin: 0cm 0cm .3cm 0cm;
   font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}

.event_image {
   display: block;
}



/* == period events =================================== */

#period_events_container {
   display: block;
   top: 2.4cm;
   height: .7cm; /* used to anchor period events to the bottom when setting's screen_fill_direction="up" */
   z-index: 16;
}

.period_background {
   /* left: specified programmatically */
   /* top: specified programmatically */
   /* width: specified programmatically */
   height: .75cm; /* period event height */
   
   /* The background color of period events is specified by their categories, or */
   /* by the color XML attribute of each individual period event. */
   /* background: NA */   
}

.period_title {
   position: relative; /* relative to period_background */
   display: block;
   left: 0;
   top: 0;
   width: 100%;
   height: .75cm;
   line-height: .75cm;
   font-size: .4cm;
   font-weight: bold;
   text-align: center;
   text-overflow: ellipsis;
   overflow: hidden; /* must be hidden to enable text-overflow:ellipsis */
   white-space: nowrap;
   color: rgba(0, 0, 0, .75);
   text-shadow: 0 .02cm .07cm rgba(0, 0, 0, .25);
}



/* == user interface buttons =================================== */

#button_prev {
   display: block;
   position: absolute;
   left: -.5cm;
   top: 50%;
   width: 2.5cm;
   height: 2.5cm;
   border-top-right-radius: 50%;
   border-bottom-right-radius: 50%;
   opacity: .5;
   
   background: rgba(255, 255, 255, 1);   
   background-image: url('../images/button_prev.png');
   background-size: 40%;
   background-repeat: no-repeat;
   background-position: center;   
}

#button_next {
   display: block;
   position: absolute;
   right: -.5cm;
   top: 50%;
   width: 2.5cm;
   height: 2.5cm;
   border-top-left-radius: 50%;
   border-bottom-left-radius: 50%;
   opacity: .5;
   
   background: rgba(255, 255, 255, 1);   
   background-image: url('../images/button_next.png');
   background-size: 40%;
   background-repeat: no-repeat;
   background-position: center;   
}

#button_zoom_out {
   display: block;
   position: absolute;
   right: .5cm;
   top: .4cm;
   width: 1.5cm;
   height: 1.5cm;
   border-radius: 50%;
   opacity: .5;

   background: rgba(255, 255, 255, 1);   
   background-image: url('../images/button_zoom_out.png');
   background-size: 60%;
   background-repeat: no-repeat;
   background-position: center;
}

#button_zoom_in {
   display: block;
   position: absolute;
   right: 2.4cm;
   top: .4cm;
   width: 1.5cm;
   height: 1.5cm;
   border-radius: 50%;
   opacity: .5;
   
   background: rgba(255, 255, 255, 1);   
   background-image: url('../images/button_zoom_in.png');
   background-size: 60%;
   background-repeat: no-repeat;
   background-position: center;
}

#button_goto_year {
   display: block;
   position: absolute;
   left: .5cm;
   top: .4cm;
   width: 1.5cm;
   height: 1.5cm;
   border-radius: 50%;
   opacity: .5;
   
   background: rgba(255, 255, 255, 1);   
   background-image: url('../images/button_year.png');
   background-size: 80%;
   background-repeat: no-repeat;
   background-position: center;
}



.button {
   cursor: pointer;
   z-index: 100;
   -webkit-tap-highlight-color: rgba(0,0,0,0);
   -webkit-touch-callout: none;
   outline: 0;   
}

.button:hover {
   -moz-box-shadow: 0 0 .13cm .13cm rgba(0, 0, 0, .25);
   -webkit-box-shadow: 0 0 .13cm .13cm rgba(0, 0, 0, .25);
   box-shadow: 0 0 .13cm .13cm rgba(0, 0, 0, .25);
   
   -ms-transform: scale(1, 1);
   -webkit-transform: scale(1, 1);
   transform: scale(1, 1);
   
   -webkit-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-kthtml-transition: all .1s ease-out;
transition: all .1s ease-out;
}

.button:active {
   -ms-transform: scale(1.3, 1.3);
   -webkit-transform: scale(1.3, 1.3);
   transform: scale(1.3, 1.3);
   
   -webkit-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-kthtml-transition: all .1s ease-out;
transition: all .1s ease-out;
}

.interface {
   display:inline;
   float:left;
   width: 1.8cm;
   height: 1.8cm;
   line-height: 1.75cm;
   text-align: center;
   margin: 0 .2cm 0 0;
   border-radius: 1cm;
   opacity: .6;
   background: rgba(0, 0, 0, 1);
   
   -moz-box-shadow: 0 .03cm .06cm rgba(0, 0, 0, .5);
   -webkit-box-shadow: 0 .03cm .06cm rgba(0, 0, 0, .5);
   box-shadow: 0 .03cm .06cm rgba(0, 0, 0, .5);
}

/* == year screen =================================== */

#goto_year_background {
   position: absolute;
   height: 100%;
   width: 100%;
   background: rgba(0, 0, 0, .5);
   z-index: 1000;
   border-radius: 1.3cm;
}

#goto_year_panel {
   position: absolute;
   top: 30%;
   height: auto;
   width: 10.5cm;
   left: 50%;   
   margin-left: -5.25cm;
   font-weight: bold;
   padding: .26cm;
   border-radius: .79cm;
   font-size: .42cm;
   color: rgba(50, 50, 50, 1);
   background: rgba(255, 255, 255, 1);

   -moz-box-shadow: 0 .13cm .26cm rgba(0, 0, 0, .25);
   -webkit-box-shadow: 0 .13cm .26cm rgba(0, 0, 0, .25);
   box-shadow: 0 .13cm .26cm rgba(0, 0, 0, .25);

}

#label_year {
   display: inline-block;
   font-size: .4cm;
   color: #666;
   font-weight: bold;
   text-shadow: 0 .02cm .04cm #aaa;
   margin: 0;
   white-space: nowrap;
}

#field_year {
   width: 2cm;
   height: .8cm;
   font-size: .42cm;   
padding: .1cm .2cm;
background: #eee;
   border: .02cm solid rgba(0, 0, 0, .5);
   border-radius: .3cm;
   opacity: .75;
   -webkit-tap-highlight-color: rgba(0,0,0,0);
   -webkit-touch-callout: none;
   outline: 0;   
   -moz-box-shadow: inset .05cm .05cm .1cm rgba(0, 0, 0, .35);
   -webkit-box-shadow: inset .05cm .05cm .1cm rgba(0, 0, 0, .35);
   box-shadow: inset .05cm .05cm .1cm rgba(0, 0, 0, .35);   
}

#button_era {
   width: 2.2cm;
   height: 1.05cm;
   font-size: .42cm;
   margin:0 0 0 .26cm;
   background-color:#eee;
   border-radius: .52cm;
   border: 0;
   outline: 0;   
   cursor: pointer;
}

#button_go {
   width: 1.3cm;
   height: 1.3cm;
   font-size: .42cm;
   background-color:#eee;
   margin:0 0 0 1.05cm;
   border-radius: .65cm;
   border: 0;
   outline: 0;   
   cursor: pointer;
}


#button_era:hover, #button_go:hover {
   -moz-box-shadow: 0 0 .3cm rgba(0, 0, 0, .5);
   -webkit-box-shadow: 0 0 .3cm rgba(0, 0, 0, .5);
   box-shadow: 0 0 .3cm rgba(0, 0, 0, .5);

   -ms-transform: scale(1, 1);
   -webkit-transform: scale(1, 1);
   transform: scale(1, 1);

   -webkit-transition: all .1s ease-out;
   -o-transition: all .1s ease-out;
   -moz-transition: all .1s ease-out;
   -ms-transition: all .1s ease-out;
   -kthtml-transition: all .1s ease-out;
   transition: all .1s ease-out;
}

#button_era:active, #button_go:active {
   -ms-transform: scale(1.2, 1.2);
   -webkit-transform: scale(1.2, 1.2);
   transform: scale(1.2, 1.2);

   -webkit-transition: all .1s ease-out;
   -o-transition: all .1s ease-out;
   -moz-transition: all .1s ease-out;
   -ms-transition: all .1s ease-out;
   -kthtml-transition: all .1s ease-out;
   transition: all .1s ease-out;
}



/* == startup screen =================================== */

#startup_screen {
   position: absolute;
   left: 0;
   top: 0;
   height: 100%;
   width: 100%;
   background: rgba(255, 255, 255, 1);
   border-radius: 1.05cm;
}



/* == lightbox screen =================================== */

#lightbox_background {
   position: absolute;
   height: 100%;
   width: 100%;
   background: rgba(50, 50, 50, 1);
   z-index: 1000;
}

#lightbox_title {
   position: absolute;
   top: 0;
   width: 100%;
   font-size: .6cm;
   font-weight: bold;
   text-align: center;
   color: rgba(255, 255, 255, 1);
}

#lightbox_image {
   position: absolute;
   left: 10%;
   top: 10%;
   height: 80%;
   width: 80%;
   
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
}

#lightbox_video {
   position: absolute;
   left: 20%;
   top: 20%;
   width: 60%;
   height: 60%;
   text-align: center;
}

#lightbox_credit {
   position: absolute;
   bottom: 0;
   width: 100%;
   font-size: .3cm;
   color: rgba(255, 255, 255, .5);
   margin: .2cm;
}

#lightbox_exit {
   display: block;
   position: absolute;
   right: .5cm;
   top: .4cm;
   width: 1.5cm;
   height: 1.5cm;
   border-radius: 50%;
   opacity: .5;
   
   background: rgba(255, 255, 255, 1);
   background-image: url('../images/button_x.png');
   background-size: 60%;
   background-repeat: no-repeat;
   background-position: center;   
}


/* ===================================== */

 

 

 

CSS



<timeline>   

<period title="Pre-Alpha" start_year="2015" start_month="1" start_day="1" start_hour="0" end_year="2015" end_month="2" end_day="1" end_hour="0" color="rgba(255, 100, 40, .7)" />
<period title="Alpha" start_year="2015" start_month="2" start_day="1" start_hour="0" end_year="2015" end_month="4" end_day="1" end_hour="0" color="rgba(255, 200, 0, .7)" />
<period title="Beta" start_year="2015" start_month="4" start_day="1" start_hour="0" end_year="2015" end_month="6" end_day="1" end_hour="0" color="rgba(200, 255, 0, .7)" />

<date title="Project Start" year="2015" month="1" day="1" hour="0" />
<date title="QA" year="2015" month="2" day="1" hour="0" minute="1" />
<date title="Betaware" year="2015" month="4" day="1" hour="0" minute="1" />
<date title="Release" year="2015" month="6" day="1" hour="0" minute="1" />

<settings vertical_scroll="false" period_gradient="false" />


</timeline>

 

 

 

XML