@@include('./parts/head.html', { "plugin_fa_icons": true, "plugin_mdi_icons": true, "plugin_ion_icons": true, "plugin_wi_icons": true, "plugin_rickshaw": false, "plugin_nvd3": false, "plugin_flot": false, "plugin_sparkline": true, "plugin_markitup": false, "plugin_ckeditor": false, "plugin_select2": false, "plugin_dropzone": false, "plugin_tagsinput": false, "plugin_clockpicker": false, "plugin_pikaday": false, "plugin_spectrum": false, "plugin_inputmask": false, "plugin_parsley": false, "plugin_gmaps": false, "plugin_jvectormap": false, "plugin_datatables": false, "plugin_fullcalendar": false, "plugin_simpleweather": true, "plugin_prettify": true }) @@include('./parts/top-navbar.html') @@include('./parts/sidebar.html', { "page": "widgets", "classes": "yay-shrink yay-hide-to-small yay-gestures" })
@@include('./parts/title.html', { "title": "Widgets", "crumbs": "
  • Dashboard
  • Widgets
    • " })

    Stats Card

    Use .name and .count classnames for this card.

    145
    Feedbacks
    <div class="card-panel stats-card blue blue-text text-lighten-5">
  <i class="fa fa-comments-o"></i>
  <span class="count">145</span>
  <div class="name">Feedbacks</div>
</div>

    Use .large classname to increase height of card and text sizes.

    58
    Uploads
    <div class="card-panel stats-card large amber lighten-2 amber-text text-lighten-5">
  <i class="fa fa-cloud-upload"></i>
  <span class="count">58</span>
  <div class="name">Uploads</div>
</div>

    Use progress-bars to set progress in bottom, top (.top) or background (.background).

    139
    Firebals
    64%
    Resore
    <div class="card-panel stats-card white red-text text-lighten-2">
  <i class="ion-fireball"></i>
  <span class="count">139</span>
  <div class="name">Firebals</div>
  
  <!-- Bottom Progress -->
  <div class="progress tiny">
    <div class="red" style="width: 81%"></div>
  </div>

  <!-- Top Progress -->
  <div class="progress tiny top">
    <div class="red" style="width: 31%"></div>
  </div>
</div>

<div class="card-panel stats-card white-text">
  <!-- Background Progress -->
  <div class="progress teal lighten-4 background">
    <div class="teal lighten-2" style="width: 64%"></div>
  </div>
  
  <i class="mdi-action-restore"></i>
  <span class="count">64%</span>
  <div class="name">Resore</div>
</div>

    Use .graph classname to insert Sparkline charts.

    37%
    Server Load
    <div class="card-panel stats-card grey-text lighten-1-text">
  <i class="fa fa-spinner"></i>
  <span class="count">37%</span>
  <div class="name">Server Load</div>

  <div class="graph">
    <div id="sparkcard"></div>
  </div>
</div>

<script>
  $("#sparkcard").conSparkline([76,78,87,65,43,35,23,25,12,14,27,35,32,37,31,46,43,32,36,57,78,87,82,75,58,54,70  ], {
    type: 'line',
    width: '100%',
    height: 73,
    lineColor: '#9E9E9E',
    fillColor: false,
    highlightSpotColor: '#009688',
    spotColor: false,
    minSpotColor: false,
    maxSpotColor: false,
    highlightLineColor: '#9E9E9E',
    spotRadius: 0});
</script>

    Weather Card

    Weather

    <div class="card-panel weather-card blue-grey lighten-1 white-text">
  <p class="center"><i class="fa fa-spinner fa-pulse"></i> Weather</p>
</div>

    Weather Card (Static)

    -3°C 27°F
    City
    Cloudy
    <div class="card-panel weather-card-static blue-grey lighten-1 white-text">
  <div class="row">
    <div class="temp col s7">-3°C <span class="alt">27°F</span></div>
    <div class="city col s5"><i class="fa fa-map-marker"></i> City</div>
  </div>
  <div class="icon"><i class="wi wi-cloud"></i></div>
  <div class="currently">Cloudy</div>
</div>

    Image Card

    Darren Cunningham
    <div class="card image-card">
  <div class="image">
    <img src="assets/_con/images/user11.jpg" alt="">
    <a href="page-profile.html" class="link"></a>
  </div>
  <div class="content">
    <h5>Darren Cunningham</h5>
  </div>
</div>

    Orders Card

    3,729

    Total Orders
    77%

    $7,180

    Total Income
    43%

    27

    Total Refunds
    7% 
    <div class="card-panel orders-card">
  <h4>3,729</h4>
  <div class="row">
    <div class="col s6">
      <small>Total Orders</small>
    </div>
    <div class="col s6 right-align">
      77% <i class="fa fa-level-down red-text"></i>
    </div>
  </div>
  <div class="progress small">
    <div class="determinate" style="width: 77%"></div>
  </div>
  ...
</div>

    TODO

    <div class="card-panel todo-card">
  <div class="todo-task">
    <input type="checkbox" id="checkbox1" checked="checked">
    <label for="checkbox1">Change passwords on accounts <span class="todo-remove mdi-action-delete"></span></label>
  </div>

  <div class="todo-task">
    <input type="checkbox" id="checkbox2">
    <label for="checkbox2">Make video for Youtube <span class="todo-remove mdi-action-delete"></span></label>
  </div>

  <div class="todo-task">
    <input type="checkbox" id="checkbox3">
    <label for="checkbox3">Gain popularity on Envato <span class="todo-remove mdi-action-delete"></span></label>
  </div>

  <div class="input-field">
    <input id="todo-add" type="text">
    <label for="todo-add">Add New</label>
  </div>
</div>

    Mail

    Dianne Chambers
    9:02 AM
    Ut feugiat tempus felis, sit amet mattis dolor accumsan quis. Aenean pharetra tempus justo, vitae euismod ipsum congue a.
    Joanne Stephens
    Dec 19
    Proin suscipit lobortis porta. Interdum et malesuada fames ac ante ipsum primis in faucibus. 
    <div class="card-panel mail-card">
  <div class="row">
    <div class="col s8">
      <a href="mail-view.html">
        <strong>Dianne Chambers</strong>
      </a>
    </div>
    <div class="col s4 right-align">
      <small>9:02 AM</small>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <a href="mail-view.html">

      Ut feugiat tempus felis, sit amet mattis dolor accumsan quis. Aenean pharetra tempus justo, vitae euismod ipsum congue a.

    </a>
    </div>
  </div>

  <hr>
  ...
</div>
    @@include('./parts/search-bar.html') @@include('./parts/chat.html') @@include('./parts/foot.html', { "copyright": true })