<ol class="breadcrumb">
    <li><a href="#/">Home</a></li>
    <li class="active">Dashboard</li>
</ol>

<div class="container-fluid" ng-controller="DashboardController">
    <div class="row">
        <div class="col-md-3">
            <div class="info-tile tile-orange">
                <div class="tile-icon"><i class="ti ti-shopping-cart-full"></i></div>
                <div class="tile-heading"><span>Orders</span></div>
                <div class="tile-body"><span>2,150</span></div>
                <div class="tile-footer"><span class="text-success">22.5% <i class="fa fa-level-up"></i></span></div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="info-tile tile-success">
                <div class="tile-icon"><i class="ti ti-bar-chart"></i></div>
                <div class="tile-heading"><span>Revenues</span></div>
                <div class="tile-body"><span>$75,100</span></div>
                <div class="tile-footer"><span class="text-danger">12.5% <i class="fa fa-level-down"></i></span></div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="info-tile tile-info">
                <div class="tile-icon"><i class="ti ti-stats-up"></i></div>
                <div class="tile-heading"><span>Earnings</span></div>
                <div class="tile-body"><span>$40,150</span></div>
                <div class="tile-footer"><span class="text-success">5% <i class="fa fa-level-up"></i></span></div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="info-tile tile-gray">
                <div class="tile-icon"><i class="ti ti-bar-chart-alt"></i></div>
                <div class="tile-heading"><span>Visitors</span></div>
                <div class="tile-body"><span>12,600</span></div>
                <div class="tile-footer"><span class="text-danger">10.5% <i class="fa fa-level-down"></i></span></div>
            </div>
        </div>
    </div>

    <div data-widget-group="group1">
        <div class="row">
            <div class="col-md-6">
                <div class="panel panel-info" data-widget='{"id" : "wiget9", "draggable": "false"}'>
                    <div class="panel-heading">
                        <h2>Social Stats</h2>
                        <div class="panel-ctrls button-icon-bg" 
                            data-actions-container="" 
                            data-action-collapse='{"target": ".panel-body"}'
                            data-action-colorpicker=''
                            data-action-refresh-demo='{"type": "circular"}'
                            >
                        </div>
                    </div>
                    <div class="panel-editbox" data-widget-controls=""></div>
                    <div class="panel-body">
                       <div class="mt-sm mb-sm" flot-chart style="width: 100%;height: 272px;" 
                            data-flot-data="plotSocialData"
                            data-flot-options="plotSocialOptions"
                        ></div>
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="panel panel-bluegray" data-widget='{"draggable": "false"}'>
                    <div class="panel-heading">
                        <h2>Earnings Stats</h2>
                        <div class="panel-ctrls button-icon-bg" 
                            data-actions-container="" 
                            data-action-collapse='{"target": ".panel-body"}'
                            data-action-colorpicker=''
                            data-action-refresh-demo='{"type": "circular"}'
                            >
                        </div>
                    </div>
                    <div class="panel-body">
                       <div class="mt-sm mb-sm" flot-chart style="width: 100%;height: 272px;" 
                            data-flot-data="plotEarningsData"
                            data-flot-options="plotEarningsOptions"
                        ></div>
                    </div>
                </div>
            </div>

        </div>


        <div class="row">
            <div class="col-md-6">
                <div class="panel panel-gray" data-widget='{"draggable": "false"}'>
                    <div class="panel-heading">
                        <h2>Recent Activities</h2>
                        <div class="panel-ctrls button-icon-bg" 
                            data-actions-container="" 
                            data-action-collapse='{"target": ".panel-body"}'
                            data-action-colorpicker=''
                            data-action-refresh-demo='{"type": "circular"}'
                            >
                        </div>
                    </div>
                    <div class="panel-body scroll-pane" style="height: 320px;">
                        <div class="scroll-content">
                            <ul class="mini-timeline">
                                <li class="mini-timeline-lime">
                                    <div class="timeline-icon"></div>
                                    <div class="timeline-body">
                                        <div class="timeline-content">
                                            <a href="#/" class="name">Vincent Keller</a> added new task <a href="#/">Admin Dashboard UI</a>
                                            <span class="time">4 mins ago</span>
                                        </div>
                                    </div>
                                </li>

                                <li class="mini-timeline-deeporange">
                                    <div class="timeline-icon"></div>
                                    <div class="timeline-body">
                                        <div class="timeline-content">
                                            <a href="#/" class="name">Shawna Owen</a> added <a href="#/" class="name">Alonzo Keller</a> and <a href="#/" class="name">Mario Bailey</a> to project <a href="#/">Wordpress eCommerce Template</a>
                                            <span class="time">6 mins ago</span>
                                        </div>
                                    </div>
                                </li>

                                <li class="mini-timeline-info">
                                    <div class="timeline-icon"></div>
                                    <div class="timeline-body">
                                        <div class="timeline-content">
                                            <a href="#/" class="name">Christian Delgado</a> commented on thread <a href="#/">Frontend Template PSD</a>
                                            <span class="time">12 mins ago</span>
                                        </div>
                                    </div>
                                </li>

                                <li class="mini-timeline-indigo">
                                    <div class="timeline-icon"></div>
                                    <div class="timeline-body">
                                        <div class="timeline-content">
                                            <a href="#/" class="name">Jonathan Smith</a> added <a href="#/" class="name">Frend Pratt</a> and <a href="#/" class="name">Robin Horton</a> to project <a href="#/">Material Design Admin Template</a>
                                            <span class="time">6 hours ago</span>
                                        </div>
                                    </div>
                                </li>
                                <li class="mini-timeline-lime">
                                    <div class="timeline-icon"></div>
                                    <div class="timeline-body">
                                        <div class="timeline-content">
                                            <a href="#/" class="name">Vincent Keller</a> added new task <a href="#/">Admin Dashboard UI</a>
                                            <span class="time">4 mins ago</span>
                                        </div>
                                    </div>
                                </li>

                                <li class="mini-timeline-deeporange">
                                    <div class="timeline-icon"></div>
                                    <div class="timeline-body">
                                        <div class="timeline-content">
                                            <a href="#/" class="name">Shawna Owen</a> added <a href="#/" class="name">Alonzo Keller</a> and <a href="#/" class="name">Mario Bailey</a> to project <a href="#/">Wordpress eCommerce Template</a>
                                            <span class="time">6 mins ago</span>
                                        </div>
                                    </div>
                                </li>

                                <li class="mini-timeline-info">
                                    <div class="timeline-icon"></div>
                                    <div class="timeline-body">
                                        <div class="timeline-content">
                                            <a href="#/" class="name">Christian Delgado</a> commented on thread <a href="#/">Frontend Template PSD</a>
                                            <span class="time">12 mins ago</span>
                                        </div>
                                    </div>
                                </li>

                                <li class="mini-timeline-indigo">
                                    <div class="timeline-icon"></div>
                                    <div class="timeline-body">
                                        <div class="timeline-content">
                                            <a href="#/" class="name">Jonathan Smith</a> added <a href="#/" class="name">Frend Pratt</a> and <a href="#/" class="name">Robin Horton</a> to project <a href="#/">Material Design Admin Template</a>
                                            <span class="time">6 hours ago</span>
                                        </div>
                                    </div>
                                </li>
                                <li class="mini-timeline-default">
                                    <div class="timeline-body ml-n">
                                        <div class="timeline-content">
                                            <button type="button" data-loading-text="Loading..." class="loading-example-btn btn btn-sm btn-default">See more</button>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="panel panel-white" data-widget='{"draggable": "false"}'>
                    <div class="panel-heading">
                        <h2>New Members</h2>
                        <div class="panel-ctrls button-icon-bg" 
                            data-actions-container="" 
                            data-action-refresh-demo='{"type": "circular"}'
                            >
                        </div>
                    </div>
                    <div class="panel-body">
                        <ul class="widget-avatar">
                            <li><img src="assets/demo/avatar/avatar_01.png" alt=""/></li>
                            <li><img src="assets/demo/avatar/avatar_02.png" alt=""/></li>
                            <li><img src="assets/demo/avatar/avatar_03.png" alt=""/></li>
                            <li><img src="assets/demo/avatar/avatar_04.png" alt=""/></li>
                            <li><img src="assets/demo/avatar/avatar_05.png" alt=""/></li>
                        </ul>
                        <button class="btn btn-block btn-primary">View More</button>
                    </div>
                </div>

                <div class="panel panel-white" data-widget='{"draggable": "false"}'>
                    <div class="panel-heading">
                        <h2>Online Now</h2>
                        <div class="panel-ctrls button-icon-bg" 
                            data-actions-container="" 
                            data-action-refresh-demo='{"type": "circular"}'
                            >
                        </div>
                    </div>
                    <div class="panel-body">
                        <ul class="widget-avatar">
                            <li data-status="online"><img src="assets/demo/avatar/avatar_01.png" alt=""/></li>
                            <li data-status="online"><img src="assets/demo/avatar/avatar_02.png" alt=""/></li>
                            <li data-status="online"><img src="assets/demo/avatar/avatar_03.png" alt=""/></li>
                            <li data-status="away"><img src="assets/demo/avatar/avatar_04.png" alt=""/></li>
                            <li data-status="busy"><img src="assets/demo/avatar/avatar_05.png" alt=""/></li>
                        </ul>
                        <button class="btn btn-block btn-success">Contact List</button>
                    </div>
                </div>
            </div>
            <div class="col-md-3">

                <div class="panel panel-midnightblue widget-progress" data-widget='{"draggable": "false"}'>
                    <div class="panel-heading">
                        <h2>Progress</h2>
                        <div class="panel-ctrls button-icon-bg" 
                            data-actions-container="" 
                            data-action-refresh-demo='{"type": "circular"}'
                            >
                        </div>
                    </div>
                    <div class="panel-body">
                        <div easypiechart class="easypiechart mb-md"
                            data-percent="37"
                            data-options="epProgress"><span class="percent-non">37</span>
                        </div>
                    </div>
                    <div class="panel-footer">
                        <div class="tabular">
                            <div class="tabular-row">
                                <div class="tabular-cell">
                                    <span class="status-total">Total</span>
                                    <span class="status-value">100</span>
                                </div>
                                <div class="tabular-cell">
                                    <span class="status-pending">Pending</span>
                                    <span class="status-value">63</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="widget-weather">
                    <div class="pull-left">
                        <span class="weather-location">Toronto, CA</span>
                        <span class="weather-desc">Sunny</span>
                    </div>
                    <div class="pull-right">
                        <span class="weather-temp">16<span>ºC</span></span>
                    </div>
                </div>
            </div>
        </div>


        <div class="row">
            <div class="col-md-8">
                <div class="panel panel-default" data-widget='{"draggable": "false"}'>
                    <div class="panel-heading">
                        <h2>Sparklines</h2>
                        <div class="panel-ctrls button-icon-bg" 
                            data-actions-container="" 
                            data-action-collapse='{"target": ".panel-body"}'
                            data-action-colorpicker=''
                            data-action-refresh-demo='{"type": "circular"}'
                            >
                        </div>
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="spark-container mb-xl">
                                    <div class="pull-left">
                                        <h2 class="title" style="color: #cddc39">Pageviews</h2>
                                        <h3 class="number">19,600</h3>
                                    </div>
                                    <div class="pull-right">
                                        <h2 class="title" style="color: #ff5722; text-align: right;">Sessions</h2>
                                        <h3 class="number">1,200</h3>
                                    </div>

                                    <sparklines-composite>
                                        <span sparklines="{ fillColor: '#fafbeb', lineColor: '#e6ee9c', lineWidth: 2, height: '120px', width: '100%', spotRadius: 3, spotColor: 'transparent', highlightLineColor: 'rgba(0,0,0,0.1)' , highlightSpotColor: '#e6ee9c', maxSpotColor: 'transparent', minSpotColor: 'transparent', chartRangeMax: 24, chartRangeMin: 0}" data-data="[15,14,17,11,8,12,15,24,17,16,17,14,10,8,11,17,15,13,17,18,16,10,9,8,5,9,13,11,12,13]"></span>
                                        <span sparklines="{ fillColor: '#fbead7', lineColor: '#ffab91', lineWidth: 2, height: '120px', width: '100%', spotRadius: 3, spotColor: 'transparent', highlightLineColor: 'rgba(0,0,0,0.1)' , highlightSpotColor: '#ffab91', maxSpotColor: 'transparent', minSpotColor: 'transparent', composite: true, chartRangeMax: 24, chartRangeMin: 1}" data-data="[5,4,6,3,2,4,5,8,6,5,6,4,3,2,4,6,5,4,8,6,7,5,4,3,1,2,4,5,4,3]"></span>
                                    </sparklines-composite>
                                </div>
                            </div>
                            <div class="col-md-6">
                               <div class="mt-md mb-md" flot-chart style="width: 100%;height: 144px;" 
                                    data-flot-data="plotDonutData"
                                    data-flot-options="plotDonutOptions"
                                ></div>

                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-3">
                                <div class="spark-container">
                                    <h2 class="title">Users</h2>
                                    <h3 class="number">700</h3>
                                    <span sparklines="{ fillColor: '#f5f5f5', lineColor: '#e0e0e0', lineWidth: 2, height: '24px', width: '100%', spotRadius: 0}" data-data="[15,14,17,11,8,12,15,24,17,16,17,14,10,8,11,17,15,13,17,18,16,10,9,1,4,9,13,11,12,15]"></span>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="spark-container">
                                    <h2 class="title">Avg. Duration</h2>
                                    <h3 class="number">00:04:36</h3>
                                    <div class="spark-avgduration"></div>
                                    <span sparklines="{ fillColor: '#f5f5f5', lineColor: '#e0e0e0', lineWidth: 2, height: '24px', width: '100%', spotRadius: 0}" data-data="[15,14,17,11,8,12,15,24,17,16,17,14,10,8,11,17,15,13,17,18,16,10,9,1,4,9,13,11,12,15]"></span>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="spark-container">
                                    <h2 class="title">Page/Session</h2>
                                    <h3 class="number">4.20</h3>
                                    <span sparklines="{ fillColor: '#f5f5f5', lineColor: '#e0e0e0', lineWidth: 2, height: '24px', width: '100%', spotRadius: 0}" data-data="[15,14,17,11,8,12,15,24,17,16,17,14,10,8,11,17,15,13,17,18,16,10,9,1,4,9,13,11,12,15]"></span>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="spark-container">
                                    <h2 class="title">Bounce Rate</h2>
                                    <h3 class="number">52.10%</h3>
                                    <span sparklines="{ fillColor: '#f5f5f5', lineColor: '#e0e0e0', lineWidth: 2, height: '24px', width: '100%', spotRadius: 0}" data-data="[15,14,17,11,8,12,15,24,17,16,17,14,10,8,11,17,15,13,17,18,16,10,9,1,4,9,13,11,12,15]"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="panel panel-teal" data-widget='{"draggable": "false"}'>
                    <div class="panel-heading">
                        <h2>Browsers</h2>
                        <div class="panel-ctrls button-icon-bg" 
                            data-actions-container="" 
                            data-action-collapse='{"target": ".panel-body"}'
                            data-action-colorpicker=''
                            data-action-refresh-demo='{"type": "circular"}'
                            >
                        </div>
                    </div>
                    <div class="panel-body no-padding">
                        <table class="table browsers m-n">
                            <tbody>
                                <tr>
                                    <td>Google Chrome</td>
                                    <td class="text-right">43.7%</td>
                                    <td class="vam" style="width: 56px;">
                                        <div class="progress m-n">
                                          <div class="progress-bar progress-bar-teal" style="width: 100%"></div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Firefox</td>
                                    <td class="text-right">20.5%</td>
                                    <td class="vam">
                                        <div class="progress m-n">
                                          <div class="progress-bar progress-bar-teal" style="width: 50%"></div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Opera</td>
                                    <td class="text-right">14.6%</td>
                                    <td class="vam">
                                        <div class="progress m-n">
                                          <div class="progress-bar progress-bar-teal" style="width: 40%"></div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Safari</td>
                                    <td class="text-right">9.1%</td>
                                    <td class="vam">
                                        <div class="progress m-n">
                                          <div class="progress-bar progress-bar-teal" style="width: 25%"></div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Internet Explorer</td>
                                    <td class="text-right">5.3%</td>
                                    <td class="vam">
                                        <div class="progress m-n">
                                          <div class="progress-bar progress-bar-teal" style="width: 12.5%"></div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Torch</td>
                                    <td class="text-right">2.9%</td>
                                    <td class="vam">
                                        <div class="progress m-n">
                                          <div class="progress-bar progress-bar-teal" style="width: 9%"></div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Maxthon</td>
                                    <td class="text-right">2.3%</td>
                                    <td class="vam">
                                        <div class="progress m-n">
                                          <div class="progress-bar progress-bar-teal" style="width: 6%"></div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Others</td>
                                    <td class="text-right">1.6%</td>
                                    <td class="vam">
                                        <div class="progress m-n">
                                          <div class="progress-bar progress-bar-teal" style="width: 3%"></div>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">

            <div class="col-md-4">
                <div class="panel panel-realtime" data-widget='{"draggable": "false"}'>
                    <div class="panel-heading">
                        <h2>Real-Time</h2>
                        <div class="panel-ctrls mr-n">
                            <div class="mt-md mb-md">
                                <!-- <input type="checkbox" class="js-switch-success switchery-xs" checked /> -->
                                <input type="checkbox" class="switchery-xs" checked ui-switch="{}" ng-init="someModel3=true" ng-model="someModel3" />
                            </div>
                        </div>
                    </div>
                    <div class="panel-body">
                        <span class="rightnow">Right Now</span>
                        <span class="number">21</span>
                        <span class="activeuser">active Users right now</span>
                        <div flot-chart style="width: 100%;height: 112px" class="centered"
                            data-flot-data="realtimeData"
                            data-flot-options="realtimeOptions"
                        ></div>
                    </div>
                </div>
            </div>

            <div class="col-md-8">
                <div class="panel panel-white" data-widget='{"draggable": "false"}'>
                    <div class="panel-heading">
                        <h2>World Map</h2>
                        <div class="panel-ctrls button-icon-bg" 
                            data-actions-container="" 
                            data-action-collapse='{"target": ".panel-body"}'
                            data-action-colorpicker=''
                            data-action-refresh-demo='{"type": "circular"}'
                            >
                        </div>
                    </div>
                    <div class="panel-body">
                        <div jvectormap data-options="worldMapSpecs" style="height: 272px; width: 100%;" class="mt-sm mb-sm"></div>
                    </div>
                </div>
            </div>
        </div>

    </div>

</div> <!-- container-fluid -->
