JARVIS

Teste com layout para dashboard inspirado no jarvis

by edgardleal

HTML

<ul class="frame crons color-4"></ul>
<div class="background-0 bar-1 bar" id="cut1">
    <div class="background-3 bar-1 bar" id="cut">
        <div class="background-2 bar-2 bar">
            <div class="background-1 bar-3 bar">
                <div class="background-0 color-4 bar-4 bar" id="text">25:00</div>
            </div>
        </div>
    </div>
</div>

CSS

body {
    background-color: #000;
}
.background-0 {
    background-color: #000;
}
.background-1 {
    background-color: RGB(0, 74, 84);
}
.background-2 {
    background-color: RGB(0, 159, 169);
}
.background-3 {
    background-color: RGB(0, 240, 255);
}
.background-4 {
    background-color: RGB(0, 196, 223);
}
.color-error {
    color: RGB(230, 28, 30);
}
.color-0 {
    color: #000;
}
.color-1 {
    color: RGB(0, 74, 84);
}
.color-2 {
    color: RGB(0, 159, 169);
}
.color-4 {
    color: RGB(0, 196, 223);
}
.bar-2 {
    width: 84%;
    height: 84%;
    top: 8%;
}
.bar-3 {
    width: 80%;
    height: 80%;
    top: 10%;
}
.bar {
    border-radius: 150px;
    position: relative;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 150px;
}
.bar-1 {
    width : 250px;
    height : 250px;
}
.bar_inner, .bar_out {
    border-radius : 150px;
}
.bar-4 {
    width: 80%;
    height: 80%;
    top: 10%;
}
.bar_inner {
    background-color : #FFF;
    position: relative;
    left: 0;
    right: 0;
    margin: auto;
    width : 150px;
    height : 150px;
}
.block {
    border: solid 1px;
}
.vertical-inner {
    height: 33%;
}
#text {
    font-size : 15px;
    text-align : center;
    vertical-align: center;
    font-family : arial;
}
.crons {
    padding: 5px 0 0 5px;
    width: 5%;
    list-style-type: none;
    height: 100%;
}
.crons li {
    float: left;
    margin: 0;
}
.frame {
    float: left;
    border: solid 1px RGB(0, 196, 223);
    box-shadow: 0px 0px 15px 5px rgba(0, 196, 223, 0.5);
}

#cut{
    position: absolute;
   clip: rect(0px 125px 250px 0px); 
    transform: rotate( 15deg);
    background-color: #000;
}

JavaScript

total = 25 * 60;
 time = total;
 var d = document;
 var cronTemplate = '<% _.each(crons, function(c){ %> ' +
     ' <li><%- c%></li> <% } %>';
 var crons = [
     '09:20',
     '10:20',
     '11:20',
     '12:20',
     '13:20',
     '14:20',
     '15:20',
     '16:20'];

 var CronView = Backbone.View.extend({
     el: 'ul.crons',
     template: _.template(cronTemplate),
     render: function () {
         this.$el.html(this.template({
             'crons': crons
         });
         }
     });

 cronView = new CronView();
 cronView.render();

 function format(seconds) {
     var minute = (seconds - (seconds % 60)) / 60;
     var sec = seconds - (minute * 60);

     return "00:" + (minute < 10 ? "0" : "") + minute; //+ ":" + 
     //(sec<10?"0":"") + sec;
 }

 function ticker() {

     d.querySelector("#text").innerText = format(--time);
 }

 var interval = setInterval(ticker, 1000);