git.roojs.org Git - bootswatch/blob - AdminLTE-master/pages/widgets.html

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <meta charset="UTF-8">
   5         <title>AdminLTE | Widgets</title>
   6         <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
   7         <!-- bootstrap 3.0.2 -->
   8         <link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" />
   9         <!-- font Awesome -->
  10         <link href="../css/font-awesome.min.css" rel="stylesheet" type="text/css" />
  11         <!-- Ionicons -->
  12         <link href="../css/ionicons.min.css" rel="stylesheet" type="text/css" />
  13         <!-- Theme style -->
  14         <link href="../css/AdminLTE.css" rel="stylesheet" type="text/css" />
  15
  16         <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  17         <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  18         <!--[if lt IE 9]>
  19           <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  20           <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  21         <![endif]-->
  22     </head>
  23     <body class="skin-blue">
  24         <!-- header logo: style can be found in header.less -->
  25         <header class="header">
  26             <a href="../index.html" class="logo">
  27                 <!-- Add the class icon to your logo image or logo icon to add the margining -->
  28                 AdminLTE
  29             </a>
  30             <!-- Header Navbar: style can be found in header.less -->
  31             <nav class="navbar navbar-static-top" role="navigation">
  32                 <!-- Sidebar toggle button-->
  33                 <a href="#" class="navbar-btn sidebar-toggle" data-toggle="offcanvas" role="button">
  34                     <span class="sr-only">Toggle navigation</span>
  35                     <span class="icon-bar"></span>
  36                     <span class="icon-bar"></span>
  37                     <span class="icon-bar"></span>
  38                 </a>
  39                 <div class="navbar-right">
  40                     <ul class="nav navbar-nav">
  41                         <!-- Messages: style can be found in dropdown.less-->
  42                         <li class="dropdown messages-menu">
  43                             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  44                                 <i class="fa fa-envelope"></i>
  45                                 <span class="label label-success">4</span>
  46                             </a>
  47                             <ul class="dropdown-menu">
  48                                 <li class="header">You have 4 messages</li>
  49                                 <li>
  50                                     <!-- inner menu: contains the actual data -->
  51                                     <ul class="menu">
  52                                         <li><!-- start message -->
  53                                             <a href="#">
  54                                                 <div class="pull-left">
  55                                                     <img src="../img/avatar3.png" class="img-circle" alt="User Image"/>
  56                                                 </div>
  57                                                 <h4>
  58                                                     Support Team
  59                                                     <small><i class="fa fa-clock-o"></i> 5 mins</small>
  60                                                 </h4>
  61                                                 <p>Why not buy a new awesome theme?</p>
  62                                             </a>
  63                                         </li><!-- end message -->
  64                                         <li>
  65                                             <a href="#">
  66                                                 <div class="pull-left">
  67                                                     <img src="../img/avatar2.png" class="img-circle" alt="user image"/>
  68                                                 </div>
  69                                                 <h4>
  70                                                     AdminLTE Design Team
  71                                                     <small><i class="fa fa-clock-o"></i> 2 hours</small>
  72                                                 </h4>
  73                                                 <p>Why not buy a new awesome theme?</p>
  74                                             </a>
  75                                         </li>
  76                                         <li>
  77                                             <a href="#">
  78                                                 <div class="pull-left">
  79                                                     <img src="../img/avatar.png" class="img-circle" alt="user image"/>
  80                                                 </div>
  81                                                 <h4>
  82                                                     Developers
  83                                                     <small><i class="fa fa-clock-o"></i> Today</small>
  84                                                 </h4>
  85                                                 <p>Why not buy a new awesome theme?</p>
  86                                             </a>
  87                                         </li>
  88                                         <li>
  89                                             <a href="#">
  90                                                 <div class="pull-left">
  91                                                     <img src="../img/avatar2.png" class="img-circle" alt="user image"/>
  92                                                 </div>
  93                                                 <h4>
  94                                                     Sales Department
  95                                                     <small><i class="fa fa-clock-o"></i> Yesterday</small>
  96                                                 </h4>
  97                                                 <p>Why not buy a new awesome theme?</p>
  98                                             </a>
  99                                         </li>
 100                                         <li>
 101                                             <a href="#">
 102                                                 <div class="pull-left">
 103                                                     <img src="../img/avatar.png" class="img-circle" alt="user image"/>
 104                                                 </div>
 105                                                 <h4>
 106                                                     Reviewers
 107                                                     <small><i class="fa fa-clock-o"></i> 2 days</small>
 108                                                 </h4>
 109                                                 <p>Why not buy a new awesome theme?</p>
 110                                             </a>
 111                                         </li>
 112                                     </ul>
 113                                 </li>
 114                                 <li class="footer"><a href="#">See All Messages</a></li>
 115                             </ul>
 116                         </li>
 117                         <!-- Notifications: style can be found in dropdown.less -->
 118                         <li class="dropdown notifications-menu">
 119                             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 120                                 <i class="fa fa-warning"></i>
 121                                 <span class="label label-warning">10</span>
 122                             </a>
 123                             <ul class="dropdown-menu">
 124                                 <li class="header">You have 10 notifications</li>
 125                                 <li>
 126                                     <!-- inner menu: contains the actual data -->
 127                                     <ul class="menu">
 128                                         <li>
 129                                             <a href="#">
 130                                                 <i class="ion ion-ios7-people info"></i> 5 new members joined today
 131                                             </a>
 132                                         </li>
 133                                         <li>
 134                                             <a href="#">
 135                                                 <i class="fa fa-warning danger"></i> Very long description here that may not fit into the page and may cause design problems
 136                                             </a>
 137                                         </li>
 138                                         <li>
 139                                             <a href="#">
 140                                                 <i class="fa fa-users warning"></i> 5 new members joined
 141                                             </a>
 142                                         </li>
 143
 144                                         <li>
 145                                             <a href="#">
 146                                                 <i class="ion ion-ios7-cart success"></i> 25 sales made
 147                                             </a>
 148                                         </li>
 149                                         <li>
 150                                             <a href="#">
 151                                                 <i class="ion ion-ios7-person danger"></i> You changed your username
 152                                             </a>
 153                                         </li>
 154                                     </ul>
 155                                 </li>
 156                                 <li class="footer"><a href="#">View all</a></li>
 157                             </ul>
 158                         </li>
 159                         <!-- Tasks: style can be found in dropdown.less -->
 160                         <li class="dropdown tasks-menu">
 161                             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 162                                 <i class="fa fa-tasks"></i>
 163                                 <span class="label label-danger">9</span>
 164                             </a>
 165                             <ul class="dropdown-menu">
 166                                 <li class="header">You have 9 tasks</li>
 167                                 <li>
 168                                     <!-- inner menu: contains the actual data -->
 169                                     <ul class="menu">
 170                                         <li><!-- Task item -->
 171                                             <a href="#">
 172                                                 <h3>
 173                                                     Design some buttons
 174                                                     <small class="pull-right">20%</small>
 175                                                 </h3>
 176                                                 <div class="progress xs">
 177                                                     <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
 178                                                         <span class="sr-only">20% Complete</span>
 179                                                     </div>
 180                                                 </div>
 181                                             </a>
 182                                         </li><!-- end task item -->
 183                                         <li><!-- Task item -->
 184                                             <a href="#">
 185                                                 <h3>
 186                                                     Create a nice theme
 187                                                     <small class="pull-right">40%</small>
 188                                                 </h3>
 189                                                 <div class="progress xs">
 190                                                     <div class="progress-bar progress-bar-green" style="width: 40%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
 191                                                         <span class="sr-only">40% Complete</span>
 192                                                     </div>
 193                                                 </div>
 194                                             </a>
 195                                         </li><!-- end task item -->
 196                                         <li><!-- Task item -->
 197                                             <a href="#">
 198                                                 <h3>
 199                                                     Some task I need to do
 200                                                     <small class="pull-right">60%</small>
 201                                                 </h3>
 202                                                 <div class="progress xs">
 203                                                     <div class="progress-bar progress-bar-red" style="width: 60%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
 204                                                         <span class="sr-only">60% Complete</span>
 205                                                     </div>
 206                                                 </div>
 207                                             </a>
 208                                         </li><!-- end task item -->
 209                                         <li><!-- Task item -->
 210                                             <a href="#">
 211                                                 <h3>
 212                                                     Make beautiful transitions
 213                                                     <small class="pull-right">80%</small>
 214                                                 </h3>
 215                                                 <div class="progress xs">
 216                                                     <div class="progress-bar progress-bar-yellow" style="width: 80%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
 217                                                         <span class="sr-only">80% Complete</span>
 218                                                     </div>
 219                                                 </div>
 220                                             </a>
 221                                         </li><!-- end task item -->
 222                                     </ul>
 223                                 </li>
 224                                 <li class="footer">
 225                                     <a href="#">View all tasks</a>
 226                                 </li>
 227                             </ul>
 228                         </li>
 229                         <!-- User Account: style can be found in dropdown.less -->
 230                         <li class="dropdown user user-menu">
 231                             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 232                                 <i class="glyphicon glyphicon-user"></i>
 233                                 <span>Jane Doe <i class="caret"></i></span>
 234                             </a>
 235                             <ul class="dropdown-menu">
 236                                 <!-- User image -->
 237                                 <li class="user-header bg-light-blue">
 238                                     <img src="../img/avatar3.png" class="img-circle" alt="User Image" />
 239                                     <p>
 240                                         Jane Doe - Web Developer
 241                                         <small>Member since Nov. 2012</small>
 242                                     </p>
 243                                 </li>
 244                                 <!-- Menu Body -->
 245                                 <li class="user-body">
 246                                     <div class="col-xs-4 text-center">
 247                                         <a href="#">Followers</a>
 248                                     </div>
 249                                     <div class="col-xs-4 text-center">
 250                                         <a href="#">Sales</a>
 251                                     </div>
 252                                     <div class="col-xs-4 text-center">
 253                                         <a href="#">Friends</a>
 254                                     </div>
 255                                 </li>
 256                                 <!-- Menu Footer-->
 257                                 <li class="user-footer">
 258                                     <div class="pull-left">
 259                                         <a href="#" class="btn btn-default btn-flat">Profile</a>
 260                                     </div>
 261                                     <div class="pull-right">
 262                                         <a href="#" class="btn btn-default btn-flat">Sign out</a>
 263                                     </div>
 264                                 </li>
 265                             </ul>
 266                         </li>
 267                     </ul>
 268                 </div>
 269             </nav>
 270         </header>
 271         <div class="wrapper row-offcanvas row-offcanvas-left">
 272             <!-- Left side column. contains the logo and sidebar -->
 273             <aside class="left-side sidebar-offcanvas">
 274                 <!-- sidebar: style can be found in sidebar.less -->
 275                 <section class="sidebar">
 276                     <!-- Sidebar user panel -->
 277                     <div class="user-panel">
 278                         <div class="pull-left image">
 279                             <img src="../img/avatar3.png" class="img-circle" alt="User Image" />
 280                         </div>
 281                         <div class="pull-left info">
 282                             <p>Hello, Jane</p>
 283
 284                             <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
 285                         </div>
 286                     </div>
 287                     <!-- search form -->
 288                     <form action="#" method="get" class="sidebar-form">
 289                         <div class="input-group">
 290                             <input type="text" name="q" class="form-control" placeholder="Search..."/>
 291                             <span class="input-group-btn">
 292                                 <button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
 293                             </span>
 294                         </div>
 295                     </form>
 296                     <!-- /.search form -->
 297                     <!-- sidebar menu: : style can be found in sidebar.less -->
 298                     <ul class="sidebar-menu">
 299                         <li>
 300                             <a href="../index.html">
 301                                 <i class="fa fa-dashboard"></i> <span>Dashboard</span>
 302                             </a>
 303                         </li>
 304                         <li class="active">
 305                             <a href="widgets.html">
 306                                 <i class="fa fa-th"></i> <span>Widgets</span> <small class="badge pull-right bg-green">new</small>
 307                             </a>
 308                         </li>
 309                         <li class="treeview">
 310                             <a href="#">
 311                                 <i class="fa fa-bar-chart-o"></i>
 312                                 <span>Charts</span>
 313                                 <i class="fa fa-angle-left pull-right"></i>
 314                             </a>
 315                             <ul class="treeview-menu">
 316                                 <li><a href="charts/morris.html"><i class="fa fa-angle-double-right"></i> Morris</a></li>
 317                                 <li><a href="charts/flot.html"><i class="fa fa-angle-double-right"></i> Flot</a></li>
 318                                 <li><a href="charts/inline.html"><i class="fa fa-angle-double-right"></i> Inline charts</a></li>
 319                             </ul>
 320                         </li>
 321                         <li class="treeview">
 322                             <a href="#">
 323                                 <i class="fa fa-laptop"></i>
 324                                 <span>UI Elements</span>
 325                                 <i class="fa fa-angle-left pull-right"></i>
 326                             </a>
 327                             <ul class="treeview-menu">
 328                                 <li><a href="UI/general.html"><i class="fa fa-angle-double-right"></i> General</a></li>
 329                                 <li><a href="UI/icons.html"><i class="fa fa-angle-double-right"></i> Icons</a></li>
 330                                 <li><a href="UI/buttons.html"><i class="fa fa-angle-double-right"></i> Buttons</a></li>
 331                                 <li><a href="UI/sliders.html"><i class="fa fa-angle-double-right"></i> Sliders</a></li>
 332                                 <li><a href="UI/timeline.html"><i class="fa fa-angle-double-right"></i> Timeline</a></li>
 333                             </ul>
 334                         </li>
 335                         <li class="treeview">
 336                             <a href="#">
 337                                 <i class="fa fa-edit"></i> <span>Forms</span>
 338                                 <i class="fa fa-angle-left pull-right"></i>
 339                             </a>
 340                             <ul class="treeview-menu">
 341                                 <li><a href="forms/general.html"><i class="fa fa-angle-double-right"></i> General Elements</a></li>
 342                                 <li><a href="forms/advanced.html"><i class="fa fa-angle-double-right"></i> Advanced Elements</a></li>
 343                                 <li><a href="forms/editors.html"><i class="fa fa-angle-double-right"></i> Editors</a></li>
 344                             </ul>
 345                         </li>
 346                         <li class="treeview">
 347                             <a href="#">
 348                                 <i class="fa fa-table"></i> <span>Tables</span>
 349                                 <i class="fa fa-angle-left pull-right"></i>
 350                             </a>
 351                             <ul class="treeview-menu">
 352                                 <li><a href="tables/simple.html"><i class="fa fa-angle-double-right"></i> Simple tables</a></li>
 353                                 <li><a href="tables/data.html"><i class="fa fa-angle-double-right"></i> Data tables</a></li>
 354                             </ul>
 355                         </li>
 356                         <li>
 357                             <a href="calendar.html">
 358                                 <i class="fa fa-calendar"></i> <span>Calendar</span>
 359                                 <small class="badge pull-right bg-red">3</small>
 360                             </a>
 361                         </li>
 362                         <li>
 363                             <a href="mailbox.html">
 364                                 <i class="fa fa-envelope"></i> <span>Mailbox</span>
 365                                 <small class="badge pull-right bg-yellow">12</small>
 366                             </a>
 367                         </li>
 368                         <li class="treeview">
 369                             <a href="#">
 370                                 <i class="fa fa-folder"></i> <span>Examples</span>
 371                                 <i class="fa fa-angle-left pull-right"></i>
 372                             </a>
 373                             <ul class="treeview-menu">
 374                                 <li><a href="examples/invoice.html"><i class="fa fa-angle-double-right"></i> Invoice</a></li>
 375                                 <li><a href="examples/login.html"><i class="fa fa-angle-double-right"></i> Login</a></li>
 376                                 <li><a href="examples/register.html"><i class="fa fa-angle-double-right"></i> Register</a></li>
 377                                 <li><a href="examples/lockscreen.html"><i class="fa fa-angle-double-right"></i> Lockscreen</a></li>
 378                                 <li><a href="examples/404.html"><i class="fa fa-angle-double-right"></i> 404 Error</a></li>
 379                                 <li><a href="examples/500.html"><i class="fa fa-angle-double-right"></i> 500 Error</a></li>
 380                                 <li><a href="examples/blank.html"><i class="fa fa-angle-double-right"></i> Blank Page</a></li>
 381                             </ul>
 382                         </li>
 383                     </ul>
 384                 </section>
 385                 <!-- /.sidebar -->
 386             </aside>
 387
 388             <!-- Right side column. Contains the navbar and content of the page -->
 389             <aside class="right-side">
 390                 <!-- Content Header (Page header) -->
 391                 <section class="content-header">
 392                     <h1>
 393                         Widgets
 394                         <small>Preview page</small>
 395                     </h1>
 396                     <ol class="breadcrumb">
 397                         <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
 398                         <li class="active">Widgets</li>
 399                     </ol>
 400                 </section>
 401
 402                 <!-- Main content -->
 403                 <section class="content">
 404                     <h4 class="page-header">
 405                         AdminLTE Small Boxes
 406                         <small>Small boxes are used for viewing statistics. To create a small box use the class <code>.small-box</code> and mix & match using the <code>bg-*</code> classes.</small>
 407                     </h4>
 408                     <!-- Small boxes (Stat box) -->
 409                     <div class="row">
 410                         <div class="col-lg-3 col-xs-6">
 411                             <!-- small box -->
 412                             <div class="small-box bg-aqua">
 413                                 <div class="inner">
 414                                     <h3>
 415                                         150
 416                                     </h3>
 417                                     <p>
 418                                         New Orders
 419                                     </p>
 420                                 </div>
 421                                 <div class="icon">
 422                                     <i class="ion ion-bag"></i>
 423                                 </div>
 424                                 <a href="#" class="small-box-footer">
 425                                     More info <i class="fa fa-arrow-circle-right"></i>
 426                                 </a>
 427                             </div>
 428                         </div><!-- ./col -->
 429                         <div class="col-lg-3 col-xs-6">
 430                             <!-- small box -->
 431                             <div class="small-box bg-green">
 432                                 <div class="inner">
 433                                     <h3>
 434                                         53<sup style="font-size: 20px">%</sup>
 435                                     </h3>
 436                                     <p>
 437                                         Bounce Rate
 438                                     </p>
 439                                 </div>
 440                                 <div class="icon">
 441                                     <i class="ion ion-stats-bars"></i>
 442                                 </div>
 443                                 <a href="#" class="small-box-footer">
 444                                     More info <i class="fa fa-arrow-circle-right"></i>
 445                                 </a>
 446                             </div>
 447                         </div><!-- ./col -->
 448                         <div class="col-lg-3 col-xs-6">
 449                             <!-- small box -->
 450                             <div class="small-box bg-yellow">
 451                                 <div class="inner">
 452                                     <h3>
 453                                         44
 454                                     </h3>
 455                                     <p>
 456                                         User Registrations
 457                                     </p>
 458                                 </div>
 459                                 <div class="icon">
 460                                     <i class="ion ion-person-add"></i>
 461                                 </div>
 462                                 <a href="#" class="small-box-footer">
 463                                     More info <i class="fa fa-arrow-circle-right"></i>
 464                                 </a>
 465                             </div>
 466                         </div><!-- ./col -->
 467                         <div class="col-lg-3 col-xs-6">
 468                             <!-- small box -->
 469                             <div class="small-box bg-red">
 470                                 <div class="inner">
 471                                     <h3>
 472                                         65
 473                                     </h3>
 474                                     <p>
 475                                         Unique Visitors
 476                                     </p>
 477                                 </div>
 478                                 <div class="icon">
 479                                     <i class="ion ion-pie-graph"></i>
 480                                 </div>
 481                                 <a href="#" class="small-box-footer">
 482                                     More info <i class="fa fa-arrow-circle-right"></i>
 483                                 </a>
 484                             </div>
 485                         </div><!-- ./col -->
 486                     </div><!-- /.row -->
 487
 488                     <!-- Small boxes (Stat box) -->
 489                     <div class="row">
 490                         <div class="col-lg-3 col-xs-6">
 491                             <!-- small box -->
 492                             <div class="small-box bg-blue">
 493                                 <div class="inner">
 494                                     <h3>
 495                                         230
 496                                     </h3>
 497                                     <p>
 498                                         Sales
 499                                     </p>
 500                                 </div>
 501                                 <div class="icon">
 502                                     <i class="ion ion-ios7-cart-outline"></i>
 503                                 </div>
 504                                 <a href="#" class="small-box-footer">
 505                                     More info <i class="fa fa-arrow-circle-right"></i>
 506                                 </a>
 507                             </div>
 508                         </div><!-- ./col -->
 509                         <div class="col-lg-3 col-xs-6">
 510                             <!-- small box -->
 511                             <div class="small-box bg-purple">
 512                                 <div class="inner">
 513                                     <h3>
 514                                         80<sup style="font-size: 20px">%</sup>
 515                                     </h3>
 516                                     <p>
 517                                         Conversion Rate
 518                                     </p>
 519                                 </div>
 520                                 <div class="icon">
 521                                     <i class="ion ion-ios7-briefcase-outline"></i>
 522                                 </div>
 523                                 <a href="#" class="small-box-footer">
 524                                     More info <i class="fa fa-arrow-circle-right"></i>
 525                                 </a>
 526                             </div>
 527                         </div><!-- ./col -->
 528                         <div class="col-lg-3 col-xs-6">
 529                             <!-- small box -->
 530                             <div class="small-box bg-teal">
 531                                 <div class="inner">
 532                                     <h3>
 533                                         14
 534                                     </h3>
 535                                     <p>
 536                                         Notofications
 537                                     </p>
 538                                 </div>
 539                                 <div class="icon">
 540                                     <i class="ion ion-ios7-alarm-outline"></i>
 541                                 </div>
 542                                 <a href="#" class="small-box-footer">
 543                                     More info <i class="fa fa-arrow-circle-right"></i>
 544                                 </a>
 545                             </div>
 546                         </div><!-- ./col -->
 547                         <div class="col-lg-3 col-xs-6">
 548                             <!-- small box -->
 549                             <div class="small-box bg-maroon">
 550                                 <div class="inner">
 551                                     <h3>
 552                                         160
 553                                     </h3>
 554                                     <p>
 555                                         Products
 556                                     </p>
 557                                 </div>
 558                                 <div class="icon">
 559                                     <i class="ion ion-ios7-pricetag-outline"></i>
 560                                 </div>
 561                                 <a href="#" class="small-box-footer">
 562                                     More info <i class="fa fa-arrow-circle-right"></i>
 563                                 </a>
 564                             </div>
 565                         </div><!-- ./col -->
 566                     </div><!-- /.row -->
 567
 568                     <!-- Widgets as boxes -->
 569                     <h4 class="page-header">
 570                         AdminLTE Boxes
 571                         <small>We use the base class <code>.box</code> to create widgets simply.</small>
 572                     </h4>
 573                     <div class="row">
 574                         <div class="col-md-4">
 575                             <!-- Default box -->
 576                             <div class="box">
 577                                 <div class="box-header">
 578                                     <h3 class="box-title">Default Box (button tooltip)</h3>
 579                                     <div class="box-tools pull-right">
 580                                         <button class="btn btn-default btn-sm" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button>
 581                                         <button class="btn btn-default btn-sm" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button>
 582                                     </div>
 583                                 </div>
 584                                 <div class="box-body">
 585                                     Box class: <code>.box</code>
 586                                     <p>
 587                                         amber, microbrewery abbey hydrometer, brewpub ale lauter tun saccharification oxidized barrel.
 588                                         berliner weisse wort chiller adjunct hydrometer alcohol aau!
 589                                         sour/acidic sour/acidic chocolate malt ipa ipa hydrometer.
 590                                     </p>
 591                                 </div><!-- /.box-body -->
 592                                 <div class="box-footer">
 593                                     <code>.box-footer</code>
 594                                 </div><!-- /.box-footer-->
 595                             </div><!-- /.box -->
 596                         </div><!-- /.col -->
 597
 598                         <div class="col-md-4">
 599                             <!-- Primary box -->
 600                             <div class="box box-primary">
 601                                 <div class="box-header" data-toggle="tooltip" title="Header tooltip">
 602                                     <h3 class="box-title">Primary Box (header tooltip)</h3>
 603                                     <div class="box-tools pull-right">
 604                                         <button class="btn btn-primary btn-xs" data-widget="collapse"><i class="fa fa-minus"></i></button>
 605                                         <button class="btn btn-primary btn-xs" data-widget="remove"><i class="fa fa-times"></i></button>
 606                                     </div>
 607                                 </div>
 608                                 <div class="box-body">
 609                                     Box class: <code>.box.box-primary</code>
 610                                     <p>
 611                                         amber, microbrewery abbey hydrometer, brewpub ale lauter tun saccharification oxidized barrel.
 612                                         berliner weisse wort chiller adjunct hydrometer alcohol aau!
 613                                         sour/acidic sour/acidic chocolate malt ipa ipa hydrometer.
 614                                     </p>
 615                                 </div><!-- /.box-body -->
 616                                 <div class="box-footer">
 617                                     <code>.box-footer</code>
 618                                 </div><!-- /.box-footer-->
 619                             </div><!-- /.box -->
 620                         </div><!-- /.col -->
 621
 622                         <div class="col-md-4">
 623                             <!-- Info box -->
 624                             <div class="box box-info">
 625                                 <div class="box-header">
 626                                     <h3 class="box-title">Info Box</h3>
 627                                     <div class="box-tools pull-right">
 628                                         <div class="label bg-aqua">Label</div>
 629                                     </div>
 630                                 </div>
 631                                 <div class="box-body">
 632                                     Box class: <code>.box.box-info</code>
 633                                     <p>
 634                                         amber, microbrewery abbey hydrometer, brewpub ale lauter tun saccharification oxidized barrel.
 635                                         berliner weisse wort chiller adjunct hydrometer alcohol aau!
 636                                         sour/acidic sour/acidic chocolate malt ipa ipa hydrometer.
 637                                     </p>
 638                                 </div><!-- /.box-body -->
 639                                 <div class="box-footer">
 640                                     <code>.box-footer</code>
 641                                 </div><!-- /.box-footer-->
 642                             </div><!-- /.box -->
 643                         </div><!-- /.col -->
 644                     </div><!-- /.row -->
 645
 646                     <div class="row">
 647                         <div class="col-md-4">
 648                             <!-- Danger box -->
 649                             <div class="box box-danger">
 650                                 <div class="box-header">
 651                                     <h3 class="box-title">Danger Box (Loading state)</h3>
 652                                     <div class="box-tools pull-right">
 653                                         <button class="btn btn-danger btn-sm" data-widget="collapse"><i class="fa fa-minus"></i></button>
 654                                         <button class="btn btn-danger btn-sm" data-widget="remove"><i class="fa fa-times"></i></button>
 655                                     </div>
 656                                 </div>
 657                                 <div class="box-body">
 658                                     Box class: <code>.box.box-danger</code>
 659                                     <p>
 660                                         amber, microbrewery abbey hydrometer, brewpub ale lauter tun saccharification oxidized barrel.
 661                                         berliner weisse wort chiller adjunct hydrometer alcohol aau!
 662                                         sour/acidic sour/acidic chocolate malt ipa ipa hydrometer.
 663                                     </p>
 664                                 </div><!-- /.box-body -->
 665                                 <!-- Loading (remove the following to stop the loading)-->
 666                                 <div class="overlay"></div>
 667                                 <div class="loading-img"></div>
 668                                 <!-- end loading -->
 669                             </div><!-- /.box -->
 670                         </div><!-- /.col -->
 671
 672                         <div class="col-md-4">
 673                             <!-- Success box -->
 674                             <div class="box box-success">
 675                                 <div class="box-header">
 676                                     <h3 class="box-title">Success Box (toggle buttons)</h3>
 677                                     <div class="box-tools pull-right">
 678                                         <div class="btn-group" data-toggle="btn-toggle">
 679                                             <button type="button" class="btn btn-success btn-xs active" data-toggle="on">Left</button>
 680                                             <button type="button" class="btn btn-success btn-xs" data-toggle="off">Right</button>
 681                                         </div>
 682                                     </div>
 683                                 </div>
 684                                 <div class="box-body">
 685                                     Box class: <code>.box.box-success</code>
 686                                     <p>
 687                                         amber, microbrewery abbey hydrometer, brewpub ale lauter tun saccharification oxidized barrel.
 688                                         berliner weisse wort chiller adjunct hydrometer alcohol aau!
 689                                         sour/acidic sour/acidic chocolate malt ipa ipa hydrometer.
 690                                     </p>
 691                                 </div><!-- /.box-body -->
 692                             </div><!-- /.box -->
 693                         </div><!-- /.col -->
 694
 695                         <div class="col-md-4">
 696                             <!-- Warning box -->
 697                             <div class="box box-warning">
 698                                 <div class="box-header">
 699                                     <h3 class="box-title">Warning Box</h3>
 700                                     <div class="box-tools pull-right">
 701                                         <ul class="pagination pagination-sm inline">
 702                                             <li><a href="#">&laquo;</a></li>
 703                                             <li><a href="#">1</a></li>
 704                                             <li><a href="#">2</a></li>
 705                                             <li><a href="#">&raquo;</a></li>
 706                                         </ul>
 707                                     </div>
 708                                 </div>
 709                                 <div class="box-body">
 710                                     Box class: <code>.box.box-warning</code>
 711                                     <p>
 712                                         amber, microbrewery abbey hydrometer, brewpub ale lauter tun saccharification oxidized barrel.
 713                                         berliner weisse wort chiller adjunct hydrometer alcohol aau!
 714                                         sour/acidic sour/acidic chocolate malt ipa ipa hydrometer.
 715                                     </p>
 716                                 </div><!-- /.box-body -->
 717                             </div><!-- /.box -->
 718                         </div><!-- /.col -->
 719                     </div><!-- /.row -->
 720
 721                     <h4 class="page-header">
 722                         AdminLTE Solid Boxes
 723                         <small>We use the base class <code>.box</code> and <code>.box-solid</code> to create solid boxes that look like this.</small>
 724                     </h4>
 725                     <!-- Solid boxes -->
 726                     <div class="row">
 727                         <div class="col-md-4">
 728                             <!-- Default box -->
 729                             <div class="box box-solid">
 730                                 <div class="box-header">
 731                                     <h3 class="box-title">Default Solid Box</h3>
 732                                     <div class="box-tools pull-right">
 733                                         <button class="btn btn-default btn-sm" data-widget="collapse"><i class="fa fa-minus"></i></button>
 734                                         <button class="btn btn-default btn-sm" data-widget="remove"><i class="fa fa-times"></i></button>
 735                                     </div>
 736                                 </div>
 737                                 <div class="box-body">
 738                                     Box class: <code>.box.box-solid</code>
 739                                     <p>
 740                                         amber, microbrewery abbey hydrometer, brewpub ale lauter tun saccharification oxidized barrel.
 741                                         berliner weisse wort chiller adjunct hydrometer alcohol aau!
 742                                         sour/acidic sour/acidic chocolate malt ipa ipa hydrometer.
 743                                     </p>
 744                                 </div><!-- /.box-body -->
 745                             </div><!-- /.box -->
 746                         </div><!-- /.col -->
 747
 748                         <div class="col-md-4">
 749                             <!-- Primary box -->
 750                             <div class="box box-solid box-primary">
 751                                 <div class="box-header">
 752                                     <h3 class="box-title">Primary Solid Box</h3>
 753                                     <div class="box-tools pull-right">
 754                                         <button class="btn btn-primary btn-sm" data-widget="collapse"><i class="fa fa-minus"></i></button>
 755                                         <button class="btn btn-primary btn-sm" data-widget="remove"><i class="fa fa-times"></i></button>
 756                                     </div>
 757                                 </div>
 758                                 <div class="box-body">
 759                                     Box class: <code>.box.box-solid.box-primary</code>
 760                                     <p>
 761                                         amber, microbrewery abbey hydrometer, brewpub ale lauter tun saccharification oxidized barrel.
 762                                         berliner weisse wort chiller adjunct hydrometer alcohol aau!
 763                                         sour/acidic sour/acidic chocolate malt ipa ipa hydrometer.
 764                                     </p>
 765                                 </div><!-- /.box-body -->
 766                             </div><!-- /.box -->
 767                         </div><!-- /.col -->
 768
 769                         <div class="col-md-4">
 770                             <!-- Info box -->
 771                             <div class="box box-solid box-info">
 772                                 <div class="box-header">
 773                                     <h3 class="box-title">Info Solid Box</h3>
 774                                     <div class="box-tools pull-right">
 775                                         <button class="btn btn-info btn-sm" data-widget="collapse"><i class="fa fa-minus"></i></button>
 776                                         <button class="btn btn-info btn-sm" data-widget="remove"><i class="fa fa-times"></i></button>
 777                                     </div>
 778                                 </div>
 779                                 <div class="box-body">
 780                                     Box class: <code>.box.box-solid.box-info</code>
 781                                     <p>
 782                                         amber, microbrewery abbey hydrometer, brewpub ale lauter tun saccharification oxidized barrel.
 783                                         berliner weisse wort chiller adjunct hydrometer alcohol aau!
 784                                         sour/acidic sour/acidic chocolate malt ipa ipa hydrometer.
 785                                     </p>
 786                                 </div><!-- /.box-body -->
 787                             </div><!-- /.box -->
 788                         </div><!-- /.col -->
 789                     </div><!-- /.row -->
 790
 791                     <div class="row">
 792                         <div class="col-md-4">
 793                             <!-- Danger box -->
 794                             <div class="box box-solid box-danger">
 795                                 <div class="box-header">
 796                                     <h3 class="box-title">Danger Solid Box</h3>
 797                                     <div class="box-tools pull-right">
 798                                         <button class="btn btn-danger btn-sm" data-widget="collapse"><i class="fa fa-minus"></i></button>
 799                                         <button class="btn btn-danger btn-sm" data-widget="remove"><i class="fa fa-times"></i></button>
 800                                     </div>
 801                                 </div>
 802                                 <div class="box-body">
 803                                     Box class: <code>.box.box-solid.box-danger</code>
 804                                     <p>
 805                                         amber, microbrewery abbey hydrometer, brewpub ale lauter tun saccharification oxidized barrel.
 806                                         berliner weisse wort chiller adjunct hydrometer alcohol aau!
 807                                         sour/acidic sour/acidic chocolate malt ipa ipa hydrometer.
 808                                     </p>
 809                                 </div><!-- /.box-body -->
 810                             </div><!-- /.box -->
 811                         </div><!-- /.col -->
 812
 813                         <div class="col-md-4">
 814                             <!-- Success box -->
 815                             <div class="box box-solid box-success">
 816                                 <div class="box-header">
 817                                     <h3 class="box-title">Success Solid Box</h3>
 818                                     <div class="box-tools pull-right">
 819                                         <button class="btn btn-success btn-sm" data-widget="collapse"><i class="fa fa-minus"></i></button>
 820                                         <button class="btn btn-success btn-sm" data-widget="remove"><i class="fa fa-times"></i></button>
 821                                     </div>
 822                                 </div>
 823                                 <div class="box-body">
 824                                     Box class: <code>.box.box-solid.box-success</code>
 825                                     <p>
 826                                         amber, microbrewery abbey hydrometer, brewpub ale lauter tun saccharification oxidized barrel.
 827                                         berliner weisse wort chiller adjunct hydrometer alcohol aau!
 828                                         sour/acidic sour/acidic chocolate malt ipa ipa hydrometer.
 829                                     </p>
 830                                 </div><!-- /.box-body -->
 831                             </div><!-- /.box -->
 832                         </div><!-- /.col -->
 833
 834                         <div class="col-md-4">
 835                             <!-- Warning box -->
 836                             <div class="box box-solid box-warning">
 837                                 <div class="box-header">
 838                                     <h3 class="box-title">Warning Solid Box</h3>
 839                                     <div class="box-tools pull-right">
 840                                         <button class="btn btn-warning btn-sm" data-widget="collapse"><i class="fa fa-minus"></i></button>
 841                                         <button class="btn btn-warning btn-sm" data-widget="remove"><i class="fa fa-times"></i></button>
 842                                     </div>
 843                                 </div>
 844                                 <div class="box-body">
 845                                     Box class: <code>.box.box-solid.box-warning</code>
 846                                     <p>
 847                                         amber, microbrewery abbey hydrometer, brewpub ale lauter tun saccharification oxidized barrel.
 848                                         berliner weisse wort chiller adjunct hydrometer alcohol aau!
 849                                         sour/acidic sour/acidic chocolate malt ipa ipa hydrometer.
 850                                     </p>
 851                                 </div><!-- /.box-body -->
 852                             </div><!-- /.box -->
 853                         </div><!-- /.col -->
 854                     </div><!-- /.row -->
 855
 856                     <h4 class="page-header">
 857                         AdminLTE Tiles
 858                         <small>To create a tile we create a solid box and a <code>.bg-*</code> class ( * being the name of the color) to the box.</small>
 859                     </h4>
 860                     <!-- Solid boxes -->
 861                     <div class="row">
 862                         <div class="col-md-4">
 863                             <!-- Navy tile -->
 864                             <div class="box box-solid bg-navy">
 865                                 <div class="box-header">
 866                                     <h3 class="box-title">Navy Tile</h3>
 867                                 </div>
 868                                 <div class="box-body">
 869                                     Box class: <code>.box.box-solid.bg-navy</code>
 870                                     <p>
 871                                         amber, microbrewery abbey hydrometer, brewpub ale lauter tun saccharification oxidized barrel.
 872                                         berliner weisse wort chiller adjunct hydrometer alcohol aau!
 873                                         sour/acidic sour/acidic chocolate malt ipa ipa hydrometer.
 874                                     </p>
 875                                 </div><!-- /.box-body -->
 876                             </div><!-- /.box -->
 877                         </div><!-- /.col -->
 878
 879                         <div class="col-md-4">
 880                             <!-- Primary tile -->
 881                             <div class="box box-solid bg-light-blue">
 882                                 <div class="box-header">
 883                                     <h3 class="box-title">Primary Tile</h3>
 884                                 </div>
 885                                 <div class="box-body">
 886                                     Box class: <code>.box.box-solid.bg-light-blue</code>
 887                                     <p>
 888                                         amber, microbrewery abbey hydrometer, brewpub ale lauter tun saccharification oxidized barrel.
 889                                         berliner weisse wort chiller adjunct hydrometer alcohol aau!
 890                                         sour/acidic sour/acidic chocolate malt ipa ipa hydrometer.
 891                                     </p>
 892                                 </div><!-- /.box-body -->
 893                             </div><!-- /.box -->
 894                         </div><!-- /.col -->
 895
 896                         <div class="col-md-4">
 897                             <!-- Info box -->
 898                             <div class="box box-solid bg-aqua">
 899                                 <div class="box-header">
 900                                     <h3 class="box-title">Info Tile</h3>
 901                                 </div>
 902                                 <div class="box-body">
 903                                     Box class: <code>.box.box-solid.bg-aqua</code>
 904                                     <p>
 905                                         amber, microbrewery abbey hydrometer, brewpub ale lauter tun saccharification oxidized barrel.
 906                                         berliner weisse wort chiller adjunct hydrometer alcohol aau!
 907                                         sour/acidic sour/acidic chocolate malt ipa ipa hydrometer.
 908                                     </p>
 909                                 </div><!-- /.box-body -->
 910                             </div><!-- /.box -->
 911                         </div><!-- /.col -->
 912                     </div><!-- /.row -->
 913
 914                     <div class="row">
 915                         <div class="col-md-4">
 916                             <!-- Danger box -->
 917                             <div class="box box-solid bg-red">
 918                                 <div class="box-header">
 919                                     <h3 class="box-title">Danger Tile</h3>
 920                                 </div>
 921                                 <div class="box-body">
 922                                     Box class: <code>.box.box-solid.bg-red</code>
 923                                     <p>
 924                                         amber, microbrewery abbey hydrometer, brewpub ale lauter tun saccharification oxidized barrel.
 925                                         berliner weisse wort chiller adjunct hydrometer alcohol aau!
 926                                         sour/acidic sour/acidic chocolate malt ipa ipa hydrometer.
 927                                     </p>
 928                                 </div><!-- /.box-body -->
 929                             </div><!-- /.box -->
 930                         </div><!-- /.col -->
 931
 932                         <div class="col-md-4">
 933                             <!-- Success box -->
 934                             <div class="box box-solid bg-green">
 935                                 <div class="box-header">
 936                                     <h3 class="box-title">Success Tile</h3>
 937                                 </div>
 938                                 <div class="box-body">
 939                                     Box class: <code>.box.box-solid.bg-green</code>
 940                                     <p>
 941                                         amber, microbrewery abbey hydrometer, brewpub ale lauter tun saccharification oxidized barrel.
 942                                         berliner weisse wort chiller adjunct hydrometer alcohol aau!
 943                                         sour/acidic sour/acidic chocolate malt ipa ipa hydrometer.
 944                                     </p>
 945                                 </div><!-- /.box-body -->
 946                             </div><!-- /.box -->
 947                         </div><!-- /.col -->
 948
 949                         <div class="col-md-4">
 950                             <!-- Warning box -->
 951                             <div class="box box-solid bg-yellow">
 952                                 <div class="box-header">
 953                                     <h3 class="box-title">Warning Tile</h3>
 954                                 </div>
 955                                 <div class="box-body">
 956                                     Box class: <code>.box.box-solid.bg-yellow</code>
 957                                     <p>
 958                                         amber, microbrewery abbey hydrometer, brewpub ale lauter tun saccharification oxidized barrel.
 959                                         berliner weisse wort chiller adjunct hydrometer alcohol aau!
 960                                         sour/acidic sour/acidic chocolate malt ipa ipa hydrometer.
 961                                     </p>
 962                                 </div><!-- /.box-body -->
 963                             </div><!-- /.box -->
 964                         </div><!-- /.col -->
 965                     </div><!-- /.row -->
 966                     <div class="row">
 967                         <div class="col-md-4">
 968                             <!-- Purple tile -->
 969                             <div class="box box-solid bg-purple">
 970                                 <div class="box-header">
 971                                     <h3 class="box-title">Purple Tile</h3>
 972                                 </div>
 973                                 <div class="box-body">
 974                                     Box class: <code>.box.box-solid.bg-purple</code>
 975                                     <p>
 976                                         amber, microbrewery abbey hydrometer, brewpub ale lauter tun saccharification oxidized barrel.
 977                                         berliner weisse wort chiller adjunct hydrometer alcohol aau!
 978                                         sour/acidic sour/acidic chocolate malt ipa ipa hydrometer.
 979                                     </p>
 980                                 </div><!-- /.box-body -->
 981                             </div><!-- /.box -->
 982                         </div><!-- /.col -->
 983
 984                         <div class="col-md-4">
 985                             <!-- Blue tile -->
 986                             <div class="box box-solid bg-blue">
 987                                 <div class="box-header">
 988                                     <h3 class="box-title">Blue Tile</h3>
 989                                 </div>
 990                                 <div class="box-body">
 991                                     Box class: <code>.box.box-solid.bg-blue</code>
 992                                     <p>
 993                                         amber, microbrewery abbey hydrometer, brewpub ale lauter tun saccharification oxidized barrel.
 994                                         berliner weisse wort chiller adjunct hydrometer alcohol aau!
 995                                         sour/acidic sour/acidic chocolate malt ipa ipa hydrometer.
 996                                     </p>
 997                                 </div><!-- /.box-body -->
 998                             </div><!-- /.box -->
 999                         </div><!-- /.col -->
1000
1001                         <div class="col-md-4">
1002                             <!-- Maroon tile -->
1003                             <div class="box box-solid bg-maroon">
1004                                 <div class="box-header">
1005                                     <h3 class="box-title">Maroon Tile</h3>
1006                                 </div>
1007                                 <div class="box-body">
1008                                     Box class: <code>.box.box-solid.bg-maroon</code>
1009                                     <p>
1010                                         amber, microbrewery abbey hydrometer, brewpub ale lauter tun saccharification oxidized barrel.
1011                                         berliner weisse wort chiller adjunct hydrometer alcohol aau!
1012                                         sour/acidic sour/acidic chocolate malt ipa ipa hydrometer.
1013                                     </p>
1014                                 </div><!-- /.box-body -->
1015                             </div><!-- /.box -->
1016                         </div><!-- /.col -->
1017                     </div><!-- /.row -->
1018
1019                 </section><!-- /.content -->
1020             </aside><!-- /.right-side -->
1021         </div><!-- ./wrapper -->
1022
1023
1024         <!-- jQuery 2.0.2 -->
1025         <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
1026         <!-- Bootstrap -->
1027         <script src="../js/bootstrap.min.js" type="text/javascript"></script>
1028         <!-- AdminLTE App -->
1029         <script src="../js/AdminLTE/app.js" type="text/javascript"></script>
1030
1031     </body>
1032 </html>