clipbucket/upload/admin_area/styles/cbv3/layout/index.html

<div class="home-box">
    <div class="blocks-container">
        <div class="home-block span5">
            <div class="block-title">Status overview <i class="icon-blank"></i></div>
            <div class="block-content">
                <table class="table table-striped table-condensed stats">

                    <tbody>
                        <tr>
                            <td><i class="icon-film"></i> {'35689'|number_format} Videos</td>
                            <td><a class="btn btn-mini">manage</a></td>
                        </tr>

                        <tr>
                            <td><i class="icon-picture"></i> {'35689'|number_format} Photos</td>
                            <td><a class="btn btn-mini">manage</a></td>
                        </tr>


                        <tr>
                            <td><i class="icon-user"></i> {'35689'|number_format} Members</td>
                            <td><a class="btn btn-mini">manage</a></td>
                        </tr>


                        <tr>
                            <td><i class="icon-groups icon-v3"></i> {'35689'|number_format} Groups</td>
                            <td><a class="btn btn-mini">manage</a></td>
                        </tr>
                    </tbody>
                </table>


                <table class="table table-striped table-condensed stats">
                    <thead>
                        <tr>
                            <th>Object</th>
                            <th>Value</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Failed videos</td>
                            <td>666</td>
                        </tr>

                        <tr>
                            <td>Processes running</td>
                            <td>65</td>
                        </tr>


                        <tr>
                            <td>Queued</td>
                            <td>5</td>
                        </tr>


                        <tr>
                            <td><i class="icon-groups icon-v3"></i> {'35689'|number_format} Groups</td>
                            <td><a class="btn btn-mini">manage</a></td>
                        </tr>
                    </tbody>
                </table>



                <hr />
                <div>
                    you are using ClipBucket v3.0 <br> no new version available
                </div>
            </div>
        </div>
    </div>


    <script type="text/javascript">
        google.load("visualization", "1", {
            packages:["corechart"]
        });
    google.setOnLoadCallback(drawChart);
    function drawChart() {
        
        var usersData = google.visualization.arrayToDataTable([
            ['Date', 'Signups']
            {$foo=1}
            {while $foo < 14}
            {$foo=$foo+1}
            {$signup=10|mt_rand:20}
            ,['{$foo}',{$signup}]
            {/while}
        ]);
        
        var videosData = google.visualization.arrayToDataTable([
            ['Date', 'Signups']
            {$foo=1}
            {while $foo < 14}
            {$foo=$foo+1}
            {$signup=10|mt_rand:20}
            ,['{$foo}',{$signup}]
            {/while}
        ]);
        
        
        var photosData = google.visualization.arrayToDataTable([
            ['Date', 'Signups']
            {$foo=1}
            {while $foo < 14}
            {$foo=$foo+1}
            {$signup=10|mt_rand:20}
            ,['{$foo}',{$signup}]
            {/while}
        ]);
        
        var groupsData = google.visualization.arrayToDataTable([
            ['Date', 'Signups']
            {$foo=1}
            {while $foo < 14}
            {$foo=$foo+1}
            {$signup=10|mt_rand:20}
            ,['{$foo}',{$signup}]
            {/while}
        ]);
        
        
        var options = {          
            backgroundColor : '#f5f5f5',
            seriesType: "bars",
            width : 480,
            series: { 1: { type: "line" } },
            chartArea:{ left:30,top:30,width:"90%",height:"70%" },
            legend: { position: 'none'},
            hAxis : { textStyle : { fontSize : 0 } },
            bar : { groupWidth:'98%' }
        };
        
        
        var userChart = new google.visualization.ComboChart(document.getElementById('usersData'));
        userChart.draw(usersData, options);
        
        var videoChart = new google.visualization.ComboChart(document.getElementById('videosData'));
        videoChart.draw(videosData, options);
        
        
        var photoChart = new google.visualization.ComboChart(document.getElementById('photosData'));
        photoChart.draw(photosData, options);
        
        
        var groupChart = new google.visualization.ComboChart(document.getElementById('groupsData'));
        groupChart.draw(groupsData, options);

    }
    </script>


    <div class="blocks-container">
        <div class="home-block span5">
            <div class="block-title">Status overview <i class="icon-blank"></i></div>
            <div class="block-content">

                <ul class="nav nav-tabs">
                    <li><a href="#users-chart" data-toggle="tab"><i class="icon-user"></i></a></li>
                    <li><a href="#videos-chart" data-toggle="tab"><i class="icon-film"></i></a></li>
                    <li><a href="#photos-chart" data-toggle="tab"><i class="icon-picture"></i></a></li>
                    <li><a href="#groups-chart" data-toggle="tab"><i class="icon-groups icon-v3"></i></a></li>
                </ul>

                <div class="tab-content" style="overflow:hidden">
                    <div class="tab-pane active" id="users-chart">
                        <div id="usersData" ></div>
                    </div>
                    <div class="tab-pane" id="videos-chart">
                        <div id="videosData"></div>
                    </div>
                    <div class="tab-pane" id="photos-chart">
                        <div id="photosData" ></div>
                    </div>
                    <div class="tab-pane" id="groups-chart">
                        <div id="groupsData"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="notification-container">
        <ul class="notification">
            <li class="head">Notifications</li>
            <li class="notifications nano">
                <ul>
                    <li>Some News
                        <div class="desc">some content of news.</div>
                    </li>
                    <li>Some News
                        <div class="desc">some content of news.</div>
                    </li>
                    <li>Some News
                        <div class="desc">some content of news.</div>
                    </li>
                    <li>Some News
                        <div class="desc">some content of news.</div>
                    </li>
                    <li>Some News
                        <div class="desc">some content of news.</div>
                    </li>
                    <li>Some News
                        <div class="desc">some content of news.</div>
                    </li>
                </ul>
            </li>
            
            
            <li class="head">News</li>
            <li class="notifications">
                <ul>
                    <li>Some News
                        <div class="desc">some content of news.</div>
                    </li>
                    <li>Some News
                        <div class="desc">some content of news.</div>
                    </li>
                    <li>Some News
                        <div class="desc">some content of news.</div>
                    </li>
                    <li>Some News
                        <div class="desc">some content of news.</div>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

</div>