dashboard.html 11.2 KB
<style>
   .subnavbar .mainnav > li:first-child > a{
      color: #ff9900;
   }
</style>


<div class="main">
   <div class="container">
      <div class="row">
         <div class="col-md-7">
            <div class="widget stacked">
               <div class="row">
                  <div class="col-md-3">
                     <div class="widget-header">
                        <i class="fa fa-tint"></i> &nbsp; Fuel Orders
                     </div>
                     <div class="custom-widget-content">
                        <div>
                           <div class="col-xs-12">
                              <span class="pull-left">Completed</span>
                              <button class="btn btn-success btn-xs pull-right">
                              <span style="font-size:9px;">Monthly</span>
                              </button>
                              <div class="clearfix"></div>
                           </div>
                           <div class="clearfix"></div>
                        </div>
                        <hr class="hr">
                        <div class="col-xs-12">
                           <h2 style="margin-bottom: 0px;">280</h2>
                           <span>Fuel Orders</span>
                        </div>
                        <div class="clearfix"></div>
                     </div>
                  </div>
                  <div class="col-md-3">
                     <div class="widget-header">
                        <i class="fa fa-tint"></i> &nbsp; Fuel Orders 
                     </div>
                     <div class="custom-widget-content">
                        <div>
                           <div class="col-xs-12">
                              <span class="pull-left">Pending</span>
                              <button class="btn btn-success btn-xs pull-right pull-right-color ">
                              <span style="font-size:9px;">Monthly</span>
                              </button>
                              <div class="clearfix"></div>
                           </div>
                           <div class="clearfix"></div>
                        </div>
                        <hr class="hr">
                        <div class="col-xs-12">
                           <h2 style="margin-bottom: 0px;">280</h2>
                           <span>Fuel Orders</span>
                        </div>
                        <div class="clearfix"></div>
                     </div>
                  </div>
                  <div class="col-md-6">
                     <div class="widget-header">
                        <i class="fa fa-list-alt "></i>
                        <h3>Fuel Order</h3>
                     </div>
                     <div class="custom-widget-content">
                        <div>
                           <div class="col-xs-12">
                              <span class="pull-left">Activity: Airport Operations</span>
                              <button class="btn btn-primary btn-xs pull-right">
                              <span style="font-size:9px;">Monthly</span>
                              </button>
                              <div class="clearfix"></div>
                           </div>
                           <div class="clearfix"></div>
                        </div>
                        <hr class="hr">
                        <div class="col-xs-6">
                           <h2 style="margin-bottom:0px;">280</h2>
                           <span>Based-Aircraft</span>
                        </div>
                        <div class="col-xs-6">
                           <h2 style="margin-bottom: 0px;">280</h2>
                           <span>Take-offs & Landings</span>
                        </div>
                        <div class="clearfix"></div>
                     </div>
                  </div>
               </div>
               </br>
               <div class="row">
                  <div class="col-md-12">
                     <div class="widget-header">
                        <i class="fa fa-signal" aria-hidden="true"></i>
                      <h3>Chart</h3>
                     </div>
                     <!-- /widget-header -->
                     <div class="widget-content">
                        <div class="stats">
                           <div class="stat">
                              <span class="stat-value">12,386</span>                         
                              Site Visits
                           </div>
                           <!-- /stat -->
                           <div class="stat">
                              <span class="stat-value">9,249</span>                          
                              Unique Visits
                           </div>
                           <!-- /stat -->
                           <div class="stat">
                              <span class="stat-value">70%</span>                         
                              New Visits
                           </div>
                           <!-- /stat -->
                        </div>
                        <!-- /stats -->
                        <div id="chart-stats" class="stats">
                           <div class="stat stat-chart">
                              <!-- <div id="donut-chart" class="chart-holder"></div> --> <!-- #donut -->    
                              <div id="area-chart" class="chart-holder" style="height: 250px;"></div>
                              <!-- /area-chart -->
                           </div>
                           <!-- /substat -->
                           <div class="stat stat-time">                          
                              <span class="stat-value">00:28:13</span>
                              Average Time on Site
                           </div>
                           <!-- /substat -->
                        </div>
                        <!-- /substats -->
                     </div>
                     <!-- /widget-content -->
                  </div>
                  <!-- /widget -->  
               </div>
            </div>
         </div>
         <!-- /span6 -->
         <div class="col-md-5">
            <div class="widget stacked">
               <div class="widget-header">
                  <i class="fa fa-pencil"></i>
                  <h3>Price Manager</h3>
               </div>
               <!-- /widget-header -->
               <div class="widget-content" style="padding-top:10px;">
                  <div>
                     <h4>Update Fuel Manager</h4>
                     <hr class="hr">
                  </div>
                  <div class="table-responsive">
                     <table class="table table-hover table-striped">
                        <thead>
                           <tr>
                              <th>Product</th>
                              <th>Cost</th>
                              <th>Margin</th>
                              <th>PAP (Total)</th>
                              <th style="color:#F90">Expires</th>
                           </tr>
                        </thead>
                        <tbody>
                           <tr>
                              <td>Jet-A Full Service</td>
                              <td><input type="text" class="form-control" style="height:31px;" name="name" id="name"></td>
                              <td><input type="text" class="form-control" style="height:31px;" name="name" id="name"></td>
                              <td style="color:#55AF8B;">$3659</td>
                              <td style="color:#F90">3/15/2017</td>
                           </tr>
                           <tr>
                              <td>Jet-A Full Service</td>
                              <td><input type="text" class="form-control" style="height:31px;" name="name" id="name"></td>
                              <td><input type="text" class="form-control" style="height:31px;" name="name" id="name"></td>
                              <td style="color:#55AF8B;">$3659</td>
                              <td style="color:#F90">3/15/2017</td>
                           </tr>
                           <tr>
                              <td>Jet-A Full Service</td>
                              <td><input type="text" class="form-control" style="height:31px;" name="name" id="name"></td>
                              <td><input type="text" class="form-control" style="height:31px;" name="name" id="name"></td>
                              <td style="color:#55AF8B;">$3659</td>
                              <td style="color:#F90">3/15/2017</td>
                           </tr>
                           <tr>
                              <td>Jet-A Full Service</td>
                              <td><input type="text" class="form-control" style="height:31px;" name="name" id="name"></td>
                              <td><input type="text" class="form-control" style="height:31px;" name="name" id="name"></td>
                              <td style="color:#55AF8B;">$3659</td>
                              <td style="color:#F90">3/15/2017</td>
                           </tr>
                        </tbody>
                     </table>
                  </div>
               </div>
               <!-- /widget-content -->
            </div>
            <!-- /widget -->
            <div class="widget widget-nopad stacked">
               <div class="widget-header">
                  <i class="fa fa-comment" aria-hidden="true"></i>
                  <h3>Messages</h3>
               </div>
               <!-- /widget-header -->
               <div class="widget-content">
                  <h4 style="padding:10px">Messages</h4>
                  <hr class="hr">
                  <ul class="news-items">
                     <li>
                        <div class="news-item-detail">
                           <a href="javascript:;" class="news-item-title">Duis aute irure dolor in reprehenderit</a>
                           <p class="news-item-preview">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
                        </div>
                        <div class="news-item-date">
                           <span class="news-item-day">08</span>
                           <span class="news-item-month">Mar</span>
                        </div>
                     </li>
                     <li>
                        <div class="news-item-detail">
                           <a href="javascript:;" class="news-item-title">Duis aute irure dolor in reprehenderit</a>
                           <p class="news-item-preview">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
                        </div>
                        <div class="news-item-date">
                           <span class="news-item-day">08</span>
                           <span class="news-item-month">Mar</span>
                        </div>
                     </li>
                  </ul>
               </div>
               <!-- /widget-content -->
            </div>
            <!-- /widget -->        
         </div>
         <!-- /span6 -->
      </div>
      <!-- /row -->
   </div>
   <!-- /container -->
</div>
<!-- /main -->