youngqj
/
flatkit-html5-admin


			
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541
							<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Flatkit - HTML Version | Bootstrap 4 Web App Kit with AngularJS</title>
  <meta name="description" content="Admin, Dashboard, Bootstrap, Bootstrap 4, Angular, AngularJS" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimal-ui" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <!-- for ios 7 style, multi-resolution icon of 152x152 -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-barstyle" content="black-translucent">
  <link rel="apple-touch-icon" href="assets/images/logo.png">
  <meta name="apple-mobile-web-app-title" content="Flatkit">
  <!-- for Chrome on Android, multi-resolution icon of 196x196 -->
  <meta name="mobile-web-app-capable" content="yes">
  <link rel="shortcut icon" sizes="196x196" href="assets/images/logo.png">
  
  <!-- style -->
  <link rel="stylesheet" href="assets/animate.css/animate.min.css" type="text/css" />
  <link rel="stylesheet" href="assets/glyphicons/glyphicons.css" type="text/css" />
  <link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css" type="text/css" />
  <link rel="stylesheet" href="assets/material-design-icons/material-design-icons.css" type="text/css" />

  <link rel="stylesheet" href="assets/bootstrap/dist/css/bootstrap.min.css" type="text/css" />
  <!-- build:css assets/styles/app.min.css -->
  <link rel="stylesheet" href="assets/styles/app.css" type="text/css" />
  <!-- endbuild -->
  <link rel="stylesheet" href="assets/styles/font.css" type="text/css" />
</head>
<body>
  <div class="app" id="app">

<!-- ############ LAYOUT START-->

  <!-- aside -->
  <div id="aside" class="app-aside modal fade nav-dropdown">
  	<!-- fluid app aside -->
    <div class="left navside dark dk" layout="column">
  	  <div class="navbar no-radius">
        <!-- brand -->
        <a class="navbar-brand">
        	<div ui-include="'assets/images/logo.svg'"></div>
        	<img src="assets/images/logo.png" alt="." class="hide">
        	<span class="hidden-folded inline">Flatkit</span>
        </a>
        <!-- / brand -->
      </div>
      <div flex class="hide-scroll">
          <nav class="scroll nav-light">
            
              <ul class="nav" ui-nav>
                <li class="nav-header hidden-folded">
                  <small class="text-muted">Main</small>
                </li>
                
                <li>
                  <a href="index.html" >
                    <span class="nav-icon">
                      <i class="material-icons">&#xe3fc;
                        <span ui-include="'assets/images/i_0.svg'"></span>
                      </i>
                    </span>
                    <span class="nav-text">Dashboard</span>
                  </a>
                </li>
            
                <li>
                  <a>
                    <span class="nav-caret">
                      <i class="fa fa-caret-down"></i>
                    </span>
                    <span class="nav-label">
                      <b class="label rounded label-sm primary">5</b>
                    </span>
                    <span class="nav-icon">
                      <i class="material-icons">&#xe5c3;
                        <span ui-include="'assets/images/i_1.svg'"></span>
                      </i>
                    </span>
                    <span class="nav-text">Apps</span>
                  </a>
                  <ul class="nav-sub">
                    <li>
                      <a href="inbox.html" >
                        <span class="nav-text">Inbox</span>
                      </a>
                    </li>
                    <li>
                      <a href="contact.html" >
                        <span class="nav-text">Contacts</span>
                      </a>
                    </li>
                    <li>
                      <a href="calendar.html" >
                        <span class="nav-text">Calendar</span>
                      </a>
                    </li>
                  </ul>
                </li>
            
                <li>
                  <a>
                    <span class="nav-caret">
                      <i class="fa fa-caret-down"></i>
                    </span>
                    <span class="nav-icon">
                      <i class="material-icons">&#xe8f0;
                        <span ui-include="'assets/images/i_2.svg'"></span>
                      </i>
                    </span>
                    <span class="nav-text">Layouts</span>
                  </a>
                  <ul class="nav-sub">
                    <li>
                      <a href="headers.html" >
                        <span class="nav-text">Header</span>
                      </a>
                    </li>
                    <li>
                      <a href="asides.html" >
                        <span class="nav-text">Aside</span>
                      </a>
                    </li>
                    <li>
                      <a href="footers.html" >
                        <span class="nav-text">Footer</span>
                      </a>
                    </li>
                  </ul>
                </li>
            
                <li>
                  <a href="widget.html" >
                    <span class="nav-icon">
                      <i class="material-icons">&#xe8d2;
                        <span ui-include="'assets/images/i_3.svg'"></span>
                      </i>
                    </span>
                    <span class="nav-text">Widgets</span>
                  </a>
                </li>
            
                <li class="nav-header hidden-folded">
                  <small class="text-muted">Components</small>
                </li>
            
                <li>
                  <a>
                    <span class="nav-caret">
                      <i class="fa fa-caret-down"></i>
                    </span>
                    <span class="nav-label">
                      <b class="label label-sm accent">8</b>
                    </span>
                    <span class="nav-icon">
                      <i class="material-icons">&#xe429;
                        <span ui-include="'assets/images/i_4.svg'"></span>
                      </i>
                    </span>
                    <span class="nav-text">UI kit</span>
                  </a>
                  <ul class="nav-sub nav-mega nav-mega-3">
                    <li>
                      <a href="arrow.html" >
                        <span class="nav-text">Arrow</span>
                      </a>
                    </li>
                    <li>
                      <a href="box.html" >
                        <span class="nav-text">Box</span>
                      </a>
                    </li>
                    <li>
                      <a href="button.html" >
                        <span class="nav-text">Button</span>
                      </a>
                    </li>
                    <li>
                      <a href="color.html" >
                        <span class="nav-text">Color</span>
                      </a>
                    </li>
                    <li>
                      <a href="dropdown.html" >
                        <span class="nav-text">Dropdown</span>
                      </a>
                    </li>
                    <li>
                      <a href="grid.html" >
                        <span class="nav-text">Grid</span>
                      </a>
                    </li>
                    <li>
                      <a href="icon.html" >
                        <span class="nav-text">Icon</span>
                      </a>
                    </li>
                    <li>
                      <a href="label.html" >
                        <span class="nav-text">Label</span>
                      </a>
                    </li>
                    <li>
                      <a href="list.html" >
                        <span class="nav-text">List Group</span>
                      </a>
                    </li>
                    <li>
                      <a href="modal.html" >
                        <span class="nav-text">Modal</span>
                      </a>
                    </li>
                    <li>
                      <a href="nav.html" >
                        <span class="nav-text">Nav</span>
                      </a>
                    </li>
                    <li>
                      <a href="progress.html" >
                        <span class="nav-text">Progress</span>
                      </a>
                    </li>
                    <li>
                      <a href="social.html" >
                        <span class="nav-text">Social</span>
                      </a>
                    </li>
                    <li>
                      <a href="sortable.html" >
                        <span class="nav-text">Sortable</span>
                      </a>
                    </li>
                    <li>
                      <a href="streamline.html" >
                        <span class="nav-text">Streamline</span>
                      </a>
                    </li>
                    <li>
                      <a href="timeline.html" >
                        <span class="nav-text">Timeline</span>
                      </a>
                    </li>
                    <li>
                      <a href="map.vector.html" >
                        <span class="nav-text">Vector Map</span>
                      </a>
                    </li>
                  </ul>
                </li>
            
                <li>
                  <a>
                    <span class="nav-caret">
                      <i class="fa fa-caret-down"></i>
                    </span>
                    <span class="nav-label"><b class="label no-bg">9</b></span>
                    <span class="nav-icon">
                      <i class="material-icons">&#xe3e8;
                        <span ui-include="'assets/images/i_5.svg'"></span>
                      </i>
                    </span>
                    <span class="nav-text">Pages</span>
                  </a>
                  <ul class="nav-sub nav-mega">
                    <li>
                      <a href="profile.html" >
                        <span class="nav-text">Profile</span>
                      </a>
                    </li>
                    <li>
                      <a href="setting.html" >
                        <span class="nav-text">Setting</span>
                      </a>
                    </li>
                    <li>
                      <a href="search.html" >
                        <span class="nav-text">Search</span>
                      </a>
                    </li>
                    <li>
                      <a href="faq.html" >
                        <span class="nav-text">FAQ</span>
                      </a>
                    </li>
                    <li>
                      <a href="gallery.html" >
                        <span class="nav-text">Gallery</span>
                      </a>
                    </li>
                    <li>
                      <a href="invoice.html" >
                        <span class="nav-text">Invoice</span>
                      </a>
                    </li>
                    <li>
                      <a href="price.html" >
                        <span class="nav-text">Price</span>
                      </a>
                    </li>
                    <li>
                      <a href="blank.html" >
                        <span class="nav-text">Blank</span>
                      </a>
                    </li>
                    <li>
                      <a href="signin.html" >
                        <span class="nav-text">Sign In</span>
                      </a>
                    </li>
                    <li>
                      <a href="signup.html" >
                        <span class="nav-text">Sign Up</span>
                      </a>
                    </li>
                    <li>
                      <a href="forgot-password.html" >
                        <span class="nav-text">Forgot Password</span>
                      </a>
                    </li>
                    <li>
                      <a href="lockme.html" >
                        <span class="nav-text">Lockme Screen</span>
                      </a>
                    </li>
                    <li>
                      <a href="404.html" >
                        <span class="nav-text">Error 404</span>
                      </a>
                    </li>
                    <li>
                      <a href="505.html" >
                        <span class="nav-text">Error 505</span>
                      </a>
                    </li>
                  </ul>
                </li>
            
                <li>
                  <a>
                    <span class="nav-caret">
                      <i class="fa fa-caret-down"></i>
                    </span>
                    <span class="nav-icon">
                      <i class="material-icons">&#xe39e;
                        <span ui-include="'assets/images/i_6.svg'"></span>
                      </i>
                    </span>
                    <span class="nav-text">Form</span>
                  </a>
                  <ul class="nav-sub">
                    <li>
                      <a href="form.layout.html" >
                        <span class="nav-text">Form Layout</span>
                      </a>
                    </li>
                    <li>
                      <a href="form.element.html" >
                        <span class="nav-text">Form Element</span>
                      </a>
                    </li>
                    <li>
                      <a href="form.validation.html" >
                        <span class="nav-text">Form Validation</span>
                      </a>
                    </li>
                    <li>
                      <a href="form.select.html" >
                        <span class="nav-text">Select</span>
                      </a>
                    </li>
                    <li>
                      <a href="form.editor.html" >
                        <span class="nav-text">Editor</span>
                      </a>
                    </li>
                    <li>
                      <a href="form.picker.html">
                        <span class="nav-text">Picker</span>
                      </a>
                    </li>
                    <li>
                      <a href="form.wizard.html">
                        <span class="nav-text">Wizard</span>
                      </a>
                    </li>
                    <li>
                      <a href="form.dropzone.html" class="no-ajax" >
                        <span class="nav-text">File Upload</span>
                      </a>
                    </li>
                  </ul>
                </li>
            
                <li>
                  <a>
                    <span class="nav-caret">
                      <i class="fa fa-caret-down"></i>
                    </span>
                    <span class="nav-icon">
                      <i class="material-icons">&#xe896;
                        <span ui-include="'assets/images/i_7.svg'"></span>
                      </i>
                    </span>
                    <span class="nav-text">Tables</span>
                  </a>
                  <ul class="nav-sub">
                    <li>
                      <a href="static.html" >
                        <span class="nav-text">Static table</span>
                      </a>
                    </li>
                    <li>
                      <a href="datatable.html" >
                        <span class="nav-text">Datatable</span>
                      </a>
                    </li>
                    <li>
                      <a href="footable.html" >
                        <span class="nav-text">Footable</span>
                      </a>
                    </li>
                  </ul>
                </li>
                <li>
                  <a>
                    <span class="nav-caret">
                      <i class="fa fa-caret-down"></i>
                    </span>
                    <span class="nav-label hidden-folded">
                      <b class="label label-sm info">N</b>
                    </span>
                    <span class="nav-icon">
                      <i class="material-icons">&#xe1b8;
                        <span ui-include="'assets/images/i_8.svg'"></span>
                      </i>
                    </span>
                    <span class="nav-text">Charts</span>
                  </a>
                  <ul class="nav-sub">
                    <li>
                      <a href="chart.html" >
                        <span class="nav-text">Chart</span>
                      </a>
                    </li>
                    <li>
                      <a>
                        <span class="nav-caret">
                          <i class="fa fa-caret-down"></i>
                        </span>
                        <span class="nav-text">Echarts</span>
                      </a>
                      <ul class="nav-sub">
                        <li>
                          <a href="echarts-line.html" >
                            <span class="nav-text">line</span>
                          </a>
                        </li>
                        <li>
                          <a href="echarts-bar.html" >
                            <span class="nav-text">Bar</span>
                          </a>
                        </li>
                        <li>
                          <a href="echarts-pie.html" >
                            <span class="nav-text">Pie</span>
                          </a>
                        </li>
                        <li>
                          <a href="echarts-scatter.html" >
                            <span class="nav-text">Scatter</span>
                          </a>
                        </li>
                        <li>
                          <a href="echarts-radar-chord.html" >
                            <span class="nav-text">Radar &amp; Chord</span>
                          </a>
                        </li>
                        <li>
                          <a href="echarts-gauge-funnel.html" >
                            <span class="nav-text">Gauges &amp; Funnel</span>
                          </a>
                        </li>
                        <li>
                          <a href="echarts-map.html" >
                            <span class="nav-text">Map</span>
                          </a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
            
                <li class="nav-header hidden-folded">
                  <small class="text-muted">Help</small>
                </li>
                
                <li class="hidden-folded" >
                  <a href="docs.html" >
                    <span class="nav-text">Documents</span>
                  </a>
                </li>
            
              </ul>
          </nav>
      </div>
      <div flex-no-shrink class="b-t">
        <div class="nav-fold">
        	<a href="profile.html">
        	    <span class="pull-left">
        	      <img src="assets/images/a0.jpg" alt="..." class="w-40 img-circle">
        	    </span>
        	    <span class="clear hidden-folded p-x">
        	      <span class="block _500">Jean Reyes</span>
        	      <small class="block text-muted"><i class="fa fa-circle text-success m-r-sm"></i>online</small>
        	    </span>
        	</a>
        </div>
      </div>
    </div>
  </div>
  <!-- / -->
  
  <!-- content -->
  <div id="content" class="app-content box-shadow-z0" role="main">
    <div class="app-header white box-shadow">
        <div class="navbar">
            <!-- Open side - Naviation on mobile -->
            <a data-toggle="modal" data-target="#aside" class="navbar-item pull-left hidden-lg-up">
              <i class="material-icons">&#xe5d2;</i>
            </a>
            <!-- / -->
        
            <!-- Page title - Bind to $state's title -->
            <div class="navbar-item pull-left h5" ng-bind="$state.current.data.title" id="pageTitle"></div>
        
            <!-- navbar right -->
            <ul class="nav navbar-nav pull-right">
              <li class="nav-item dropdown pos-stc-xs">
                <a class="nav-link" href data-toggle="dropdown">
                  <i class="material-icons">&#xe7f5;</i>
                  <span class="label label-sm up warn">3</span>
                </a>
                <div ui-include="'../views/blocks/dropdown.notification.html'"></div>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link clear" href data-toggle="dropdown">
                  <span class="avatar w-32">
                    <img src="assets/images/a0.jpg" alt="...">
                    <i class="on b-white bottom"></i>
                  </span>
                </a>
                <div ui-include="'../views/blocks/dropdown.user.html'"></div>
              </li>
              <li class="nav-item hidden-md-up">
                <a class="nav-link" data-toggle="collapse" data-target="#collapse">
                  <i class="material-icons">&#xe5d4;</i>
                </a>
              </li>
            </ul>
            <!-- / navbar right -->
        
            <!-- navbar collapse -->
            <div class="collapse navbar-toggleable-sm" id="collapse">
              <div ui-include="'../views/blocks/navbar.form.right.html'"></div>
              <!-- link and dropdown -->
              <ul class="nav navbar-nav">
                <li class="nav-item dropdown">
                  <a class="nav-link" href data-toggle="dropdown">
                    <i class="fa fa-fw fa-plus text-muted"></i>
                    <span>New</span>
                  </a>
                  <div ui-include="'../views/blocks/dropdown.new.html'"></div>
                </li>
              </ul>
              <!-- / -->
            </div>
            <!-- / navbar collapse -->
        </div>
    </div>
    <div class="app-footer">
      <div class="p-a text-xs">
        <div class="pull-right text-muted">
          &copy; Copyright <strong>Flatkit</strong> <span class="hidden-xs-down">- Built with Love v1.1.3</span>
          <a ui-scroll-to="content"><i class="fa fa-long-arrow-up p-x-sm"></i></a>
        </div>
        <div class="nav">
          <a class="nav-link" href="../">About</a>
          <span class="text-muted">-</span>
          <a class="nav-link label accent" href="http://themeforest.net/user/flatfull/portfolio?ref=flatfull">Get it</a>
        </div>
      </div>
    </div>
    <div ui-view class="app-body" id="view">

<!-- ############ PAGE START-->
<div class="padding">
  <h6>Inputs</h6>
  <p>
    Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.
  </p>
  <form class="p-x-xs">
    <div class="form-group row">
      <label class="col-sm-2 form-control-label">Text</label>
      <div class="col-sm-10">
        <input type="text" class="form-control">
      </div>
    </div>

    <div class="form-group row">
      <label class="col-sm-2 form-control-label">Rounded</label>
      <div class="col-sm-10">
        <input type="text" class="form-control rounded">
      </div>
    </div>
    
    <div class="form-group row">
      <label class="col-sm-2 form-control-label" for="input-id-1">Label focus</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="input-id-1">
      </div>
    </div>
    
    <div class="form-group row">
      <label class="col-sm-2 form-control-label">Password</label>
      <div class="col-sm-10">
        <input type="password" name="password" class="form-control">
      </div>
    </div>
    
    <div class="form-group row">
      <label class="col-sm-2 form-control-label">Placeholder</label>
      <div class="col-sm-10">
        <input type="text"  class="form-control" placeholder="placeholder">
      </div>
    </div>

    <div class="form-group row">
      <label class="col-sm-2 form-control-label">Help text</label>
      <div class="col-sm-10">
        <input type="text" class="form-control">
        <span class="help-block m-b-none">A block of help text that breaks onto a new line and may extend beyond one line.</span>
      </div>
    </div>
    
    <div class="form-group row">
      <label class="col-lg-2 form-control-label">Disabled</label>
      <div class="col-lg-10">
        <input class="form-control" type="text" placeholder="Disabled input here..." disabled>
      </div>
    </div>

    <div class="form-group row">
      <label class="col-lg-2 form-control-label">Readonly </label>
      <div class="col-lg-10">
        <input class="form-control" type="text" placeholder="Readonly  input here..." readonly>
      </div>
    </div>
    
    <div class="form-group row">
      <label class="col-lg-2 form-control-label">Static control</label>
      <div class="col-lg-10">
        <p class="form-control-static">email@example.com</p>
      </div>
    </div>
    
    <div class="form-group row has-success">
      <label class="col-sm-2 form-control-label">Input with success</label>
      <div class="col-sm-10">
        <input type="text" class="form-control form-control-success">
      </div>
    </div>
    
    <div class="form-group row has-warning">
      <label class="col-sm-2 form-control-label">Input with warning</label>
      <div class="col-sm-10">
        <input type="text" class="form-control form-control-warning">
      </div>
    </div>
    
    <div class="form-group row has-danger">
      <label class="col-sm-2 form-control-label">Input with danger</label>
      <div class="col-sm-10">
        <input type="text" class="form-control form-control-danger">
      </div>
    </div>
    
    <div class="form-group row input-group-lg">
      <label class="col-sm-2 form-control-label" for="formGroupInputLarge">Large label</label>
      <div class="col-sm-10">
        <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
      </div>
    </div>
    <div class="form-group row input-group-sm">
      <label class="col-sm-2 form-control-label" for="formGroupInputSmall">Small label</label>
      <div class="col-sm-10">
        <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
      </div>
    </div>
    
    <div class="form-group row">
      <label class="col-sm-2 form-control-label">Column sizing</label>
      <div class="col-sm-10">
        <div class="row">
          <div class="col-md-2">
            <input type="text" class="form-control" placeholder=".col-md-2">
          </div>
          <div class="col-md-3">
            <input type="text" class="form-control" placeholder=".col-md-3">
          </div>
          <div class="col-md-4">
            <input type="text" class="form-control" placeholder=".col-md-4">
          </div>
        </div>
      </div>
    </div>
    
    <div class="form-group row">
      <label class="col-sm-2 form-control-label">Input groups</label>
      <div class="col-sm-10">
        <div class="input-group m-b">
          <span class="input-group-addon">@</span>
          <input type="text" class="form-control" placeholder="Username">
        </div>
        <div class="input-group m-b">
          <input type="text" class="form-control">
          <span class="input-group-addon">.00</span>
        </div>
        <div class="input-group m-b">
          <span class="input-group-addon">$</span>
          <input type="text" class="form-control">
          <span class="input-group-addon">.00</span>
        </div>
        <div class="input-group m-b">
          <span class="input-group-addon">
            <input type="checkbox">
          </span>
          <input type="text" class="form-control">
        </div>
        <div class="input-group">
          <span class="input-group-addon">
            <input type="radio">
          </span>
          <input type="text" class="form-control">
        </div>
      </div>
    </div>
    
    <div class="form-group row">
      <label class="col-sm-2 form-control-label">Button addons</label>
      <div class="col-sm-10">
        <div class="input-group m-b">
          <span class="input-group-btn">
            <button class="btn white" type="button">Go!</button>
          </span>
          <input type="text" class="form-control">
        </div>
        <div class="input-group">
          <input type="text" class="form-control">
          <span class="input-group-btn">
            <button class="btn white" type="button">Go!</button>
          </span>
        </div>
      </div>
    </div>
    
    <div class="form-group row">
      <label class="col-sm-2 form-control-label">With dropdowns</label>
      <div class="col-sm-10">
        <div class="input-group m-b">
          <div class="input-group-btn dropdown">
            <button type="button" class="btn white dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
            <div class="dropdown-menu">
              <a class="dropdown-item" href>Action</a>
              <a class="dropdown-item" href>Another action</a>
              <a class="dropdown-item" href>Something else here</a>
              <div class="divider"></div>
              <a class="dropdown-item" href>Separated link</a>
            </div>
          </div><!-- /btn-group -->
          <input type="text" class="form-control">
        </div>
        <div class="input-group">
          <input type="text" class="form-control">
          <div class="input-group-btn dropdown">
            <button type="button" class="btn white dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
            <div class="dropdown-menu pull-right">
              <a class="dropdown-item" href>Action</a>
              <a class="dropdown-item" href>Another action</a>
              <a class="dropdown-item" href>Something else here</a>
              <div class="divider"></div>
              <a class="dropdown-item" href>Separated link</a>
            </div>
          </div><!-- /btn-group -->
        </div>
      </div>
    </div>
    
    <div class="form-group row">
      <label class="col-sm-2 form-control-label">Segmented</label>
      <div class="col-sm-10">
        <div class="input-group m-b">
          <div class="input-group-btn dropdown">
            <button type="button" class="btn white" tabindex="-1">Action</button>
            <button type="button" class="btn white dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
            <div class="dropdown-menu">
              <a class="dropdown-item" href>Action</a>
              <a class="dropdown-item" href>Another action</a>
              <a class="dropdown-item" href>Something else here</a>
              <div class="divider"></div>
              <a class="dropdown-item" href>Separated link</a>
            </div>
          </div><!-- /btn-group -->
          <input type="text" class="form-control">
        </div>
        <div class="input-group">
          <input type="text" class="form-control">
          <div class="input-group-btn dropdown">
            <button type="button" class="btn white" tabindex="-1">Action</button>
            <button type="button" class="btn white dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
            <div class="dropdown-menu pull-right">
              <a class="dropdown-item" href>Action</a>
              <a class="dropdown-item" href>Another action</a>
              <a class="dropdown-item" href>Something else here</a>
              <div class="divider"></div>
              <a class="dropdown-item" href>Separated link</a>
            </div>
          </div><!-- /btn-group -->
        </div>
      </div>
    </div>

    <h6 class="_600">Checkboxes and radios</h6>
    <p>Checkboxes are for selecting one or several options in a list, while radios are for selecting one from many.</p>
    <div class="form-group row">
      <label class="col-sm-2 form-control-label">Default (stacked)</label>
      <div class="col-sm-10">
        <div class="checkbox">
          <label>
            <input type="checkbox" value="">
            one is this and that&mdash;be sure to include why it's great
          </label>
        </div>
        <div class="checkbox disabled">
          <label>
            <input type="checkbox" value="" disabled>
            two is disabled
          </label>
        </div>

        <div class="radio">
          <label>
            <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
            one is this and that&mdash;be sure to include why it's great
          </label>
        </div>
        <div class="radio">
          <label>
            <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
            two can be something else and selecting it will deselect one
          </label>
        </div>
        <div class="radio disabled">
          <label>
            <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
            three is disabled
          </label>
        </div>
      </div>
    </div>

    
    <div class="form-group row">
      <label class="col-sm-2 form-control-label">Inline</label>
      <div class="col-sm-10">
        <label class="checkbox-inline">
          <input type="checkbox" value="option1"> a
        </label>
        <label class="checkbox-inline">
          <input type="checkbox" value="option2"> b
        </label>
        <label class="checkbox-inline">
          <input type="checkbox" value="option3"> c
        </label>
        <br>
        <label class="radio-inline">
          <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
        </label>
        <label class="radio-inline">
          <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
        </label>
        <label class="radio-inline">
          <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
        </label>
      </div>
    </div>
    
    <div class="form-group row">
      <label class="col-sm-2 form-control-label">Styled</label>
      <div class="col-sm-10">
        <div class="checkbox">
          <label class="ui-check">
            <input type="checkbox" value="">
            <i class="dark-white"></i>
            one
          </label>
        </div>
        <div class="checkbox">
          <label class="ui-check">
            <input type="checkbox" checked value="">
            <i class="dark-white"></i>
            two checked
          </label>
        </div>
        <div class="checkbox disabled">
          <label class="ui-check">
            <input type="checkbox" checked disabled value="">
            <i class="dark-white"></i>
            three checked and disabled
          </label>
        </div>
        <div class="checkbox disabled">
          <label class="ui-check">
            <input type="checkbox" disabled value="">
            <i class="dark-white"></i>
            four disabled
          </label>
        </div>
        <div class="radio">
          <label class="ui-check">
            <input type="radio" name="a" value="option1">
            <i class="dark-white"></i>
            one
          </label>
        </div>
        <div class="radio">
          <label class="ui-check">
            <input type="radio" name="a" value="option2" checked>
            <i class="dark-white"></i>
            two checked
          </label>
        </div>
        <div class="radio disabled">
          <label class="ui-check">
            <input type="radio" value="option2" checked disabled>
            <i class="dark-white"></i>
            three checked and disabled
          </label>
        </div>
        <div class="radio disabled">
          <label class="ui-check">
            <input type="radio" name="a" disabled>
            <i class="dark-white"></i>
            four disabled
          </label>
        </div>

        <div class="radio">
          <label class="ui-check ui-check-md">
            <input type="radio" name="a">
            <i class="dark-white"></i>
            Medium size radio
          </label>
        </div>
        <div class="checkbox">
          <label class="ui-check ui-check-md">
            <input type="checkbox">
            <i class="dark-white"></i>
            Medium size checkbox
          </label>
        </div>
        <div class="radio">
          <label class="ui-check ui-check-lg">
            <input type="radio" name="a">
            <i class="dark-white"></i>
            Large size radio
          </label>
        </div>
        <div class="checkbox">
          <label class="ui-check ui-check-lg">
            <input type="checkbox">
            <i class="dark-white"></i>
            Large size checkbox
          </label>
        </div>
      </div>
    </div>    
   
    <div class="form-group row">
      <label class="col-sm-2 form-control-label">Switch</label>
      <div class="col-sm-10">
        <label class="ui-switch m-t-xs m-r">
          <input type="checkbox" checked>
          <i></i>
        </label>
        <label class="ui-switch primary m-t-xs m-r">
          <input type="checkbox" checked>
          <i></i>
        </label>
        <label class="ui-switch info m-t-xs m-r">
          <input type="checkbox" checked>
          <i></i>
        </label>
        <label class="ui-switch warning m-t-xs m-r">
          <input type="checkbox" checked>
          <i></i>
        </label>      
        <label class="ui-switch danger m-t-xs m-r">
          <input type="checkbox" checked>
          <i></i>
        </label>
      </div>
    </div>

    
    <div class="form-group row">
      <label class="col-sm-2 form-control-label">Radio Switch</label>
      <div class="col-sm-10">
        <label class="ui-switch m-t-xs m-r">
          <input type="radio" name='switch' checked>
          <i></i>
        </label>
        <label class="ui-switch m-t-xs m-r">
          <input type="radio" name='switch'>
          <i></i>
        </label>
      </div>
    </div>

    
    <div class="form-group row">
      <label class="col-sm-2 form-control-label">Medium</label>
      <div class="col-sm-10">
        <label class="ui-switch ui-switch-md info m-t-xs">
          <input type="checkbox" checked>
          <i></i>
        </label>
      </div>
    </div>

    <div class="form-group row">
      <label class="col-sm-2 form-control-label">Large</label>
      <div class="col-sm-10">
        <label class="ui-switch ui-switch-lg dark m-t-xs m-r">
          <input type="checkbox" >
          <i></i>
        </label>
      </div>
    </div>

    <h6 class="_600">Selects and Textarea</h6>
    <p>Use the default option, or add multiple to show multiple options at once.</p>
    
    <div class="form-group row">
      <label class="col-sm-2 form-control-label">Select</label>
      <div class="col-sm-10">
        <select class="form-control input-c">
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
        </select>
      </div>
    </div>

    <div class="form-group row">
      <label class="col-sm-2 form-control-label">Select large</label>
      <div class="col-sm-10">
        <select class="form-control form-control-lg">
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
        </select>
      </div>
    </div>

    <div class="form-group row">
      <label class="col-sm-2 form-control-label">Select small</label>
      <div class="col-sm-10">
        <select class="form-control form-control-sm">
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
        </select>
      </div>
    </div>

    <div class="form-group row">
      <label class="col-sm-2 form-control-label">Custom select</label>
      <div class="col-sm-10">
        <select class="form-control c-select">
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
        </select>
      </div>
    </div>

    <div class="form-group row">
      <label class="col-sm-2 form-control-label">Multiple</label>
      <div class="col-lg-4">
        <select multiple class="form-control">
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
        </select>
      </div>
    </div>

    <div class="form-group row">
      <label class="col-sm-2 form-control-label">Disabled</label>
      <div class="col-sm-10">
        <select class="form-control" disabled>
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
        </select>
      </div>
    </div>

    <div class="form-group row">
      <label class="col-sm-2 form-control-label">Textarea</label>
      <div class="col-sm-10">
        <textarea class="form-control" rows="5"></textarea>
      </div>
    </div>


    <div class="form-group row">
      <label class="col-sm-2 form-control-label">File input</label>
      <div class="col-sm-10">
        <div class="form-file">
          <input type="file">
          <button class="btn white">Select file ...</button>
        </div>
      </div>
    </div>

    <h6 class="_600 m-v-lg">Material design form style</h6>
    <div class="m-b-lg row">
      <div class="col-sm-10 col-sm-offset-2">
        <div class="row row-sm">
          <div class="col-sm-12">
            <div class="md-form-group">
              <input class="md-input" disabled>
              <label>Company(disabled)</label>
            </div>
          </div>
          <div class="col-sm-6">
            <div class="md-form-group float-label">
              <input class="md-input" required>
              <label>First Name</label>
            </div>
          </div>
          <div class="col-sm-6">
            <div class="md-form-group float-label">
              <input class="md-input" required>
              <label>Last Name</label>
            </div>
          </div>
          <div class="col-sm-12">
            <div class="md-form-group">
              <input class="md-input">
              <label>Address</label>
            </div>
          </div>
          <div class="col-sm-4">
            <div class="md-form-group">
              <input class="md-input">
              <label>City</label>
              <span class="md-input-msg right">30/30</span>
            </div>
          </div>
          <div class="col-sm-4">
            <div class="md-form-group">
              <input class="md-input">
              <label>State</label>
            </div>
          </div>

          <div class="col-sm-4">
            <div class="md-form-group">
              <input class="md-input">
              <label>Postal Code</label>
            </div>
          </div>

          <div class="col-sm-12">
            <div class="md-form-group">
              <textarea class="md-input" rows="4"></textarea>
              <label>Biography</label>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-4">
            <p>
              <label class="md-check">
                <input type="checkbox">
                <i class="indigo"></i>
                Checkbox
              </label>
            </p>
            <p>
              <label class="md-check">
                <input type="checkbox" checked>
                <i class="blue"></i>
                Checkbox: checked
              </label>
            </p>
            <p>
              <label class="md-check">
                <input type="checkbox" disabled>
                <i class="indigo"></i>
                Checkbox: disabled
              </label>
            </p>
            <p>
              <label class="md-check">
                <input type="checkbox" checked disabled>
                <i class="indigo"></i>
                Checkbox: checked and disabled
              </label>
            </p>
            <p>
              <label class="md-check">
                <input type="checkbox">
                <i class="pink"></i>
                Checkbox: pink
              </label>
            </p>
            <p>
              <label class="md-check">
                <input type="checkbox" checked>
                <i class="green"></i>
                Checkbox: green
              </label>
            </p>
            <p>
              <label class="md-check">
                <input type="checkbox" checked>
                <i class="teal no-icon"></i>
                Checkbox: no icon
              </label>
            </p>
          </div>
          <div class="col-sm-4">
            <p>
              <label class="md-check">
                <input type="radio" name="radio">
                <i class="indigo"></i>
                Radio
              </label>
            </p>
            <p>
              <label class="md-check">
                <input type="radio" name="radio" checked>
                <i class="blue"></i>
                Radio: checked
              </label>
            </p>
            <p>
              <label class="md-check">
                <input type="radio" name="a" disabled>
                <i class="indigo"></i>
                Radio: disabled
              </label>
            </p>
            <p>
              <label class="md-check">
                <input type="radio" name="a" checked disabled>
                <i class="indigo"></i>
                Radio: checked and disabled
              </label>
            </p>
            <p>
              <label class="md-check">
                <input type="radio" name="radio">
                <i class="pink"></i>
                Radio: pink
              </label>
            </p>
            <p>
              <label class="md-check">
                <input type="radio" checked name="b">
                <i class="green"></i>
                Radio: green
              </label>
            </p>
            <p>
              <label class="md-check">
                <input type="radio" name="b">
                <i class="teal no-icon"></i>
                Radio: no icon
              </label>
            </p>
          </div>
          <div class="col-sm-4">
            <p>
              <label class="md-switch">
                <input type="checkbox">
                <i class="indigo"></i>
                Switch
              </label>
            </p>
            <p>
              <label class="md-switch">
                <input type="checkbox" checked>
                <i class="blue"></i>
                Switch: checked
              </label>
            </p>
            <p>
              <label class="md-switch">
                <input type="checkbox" disabled>
                <i class="blue"></i>
                Switch: disabled
              </label>
            </p>
            <p>
              <label class="md-switch">
                <input type="checkbox" checked disabled>
                <i class="blue"></i>
                Switch: checked and disabled
              </label>
            </p>
            <p>
              <label class="md-switch">
                <input type="checkbox">
                <i class="pink"></i>
                Switch: pink
              </label>
            </p>
            <p>
              <label class="md-switch">
                <input type="radio" name='switch' checked>
                <i class="green"></i>
                Switch: radio 1
              </label>
            </p>
            <p>
              <label class="md-switch">
                <input type="radio" name='switch'>
                <i class="orange"></i>
                Switch: radio 2
              </label>
            <p>
          </div>
        </div>
      </div>
    </div>
    
    
    <div class="form-group row m-t-lg">
      <div class="col-sm-4 col-sm-offset-2">
        <button type="submit" class="btn white">Cancel</button>
        <button type="submit" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </form>
</div>

<!-- ############ PAGE END-->

    </div>
  </div>
  <!-- / -->

  <!-- theme switcher -->
  <div id="switcher">
    <div class="switcher box-color dark-white text-color" id="sw-theme">
      <a href ui-toggle-class="active" target="#sw-theme" class="box-color dark-white text-color sw-btn">
        <i class="fa fa-gear"></i>
      </a>
      <div class="box-header">
        <a href="https://themeforest.net/item/flatkit-app-ui-kit/13231484?ref=flatfull" class="btn btn-xs rounded danger pull-right">BUY</a>
        <h2>Theme Switcher</h2>
      </div>
      <div class="box-divider"></div>
      <div class="box-body">
        <p class="hidden-md-down">
          <label class="md-check m-y-xs"  data-target="folded">
            <input type="checkbox">
            <i class="green"></i>
            <span class="hidden-folded">Folded Aside</span>
          </label>
          <label class="md-check m-y-xs" data-target="boxed">
            <input type="checkbox">
            <i class="green"></i>
            <span class="hidden-folded">Boxed Layout</span>
          </label>
          <label class="m-y-xs pointer" ui-fullscreen>
            <span class="fa fa-expand fa-fw m-r-xs"></span>
            <span>Fullscreen Mode</span>
          </label>
        </p>
        <p>Colors:</p>
        <p data-target="themeID">
          <label class="radio radio-inline m-a-0 ui-check ui-check-color ui-check-md" data-value="{primary:'primary', accent:'accent', warn:'warn'}">
            <input type="radio" name="color" value="1">
            <i class="primary"></i>
          </label>
          <label class="radio radio-inline m-a-0 ui-check ui-check-color ui-check-md" data-value="{primary:'accent', accent:'cyan', warn:'warn'}">
            <input type="radio" name="color" value="2">
            <i class="accent"></i>
          </label>
          <label class="radio radio-inline m-a-0 ui-check ui-check-color ui-check-md" data-value="{primary:'warn', accent:'light-blue', warn:'warning'}">
            <input type="radio" name="color" value="3">
            <i class="warn"></i>
          </label>
          <label class="radio radio-inline m-a-0 ui-check ui-check-color ui-check-md" data-value="{primary:'success', accent:'teal', warn:'lime'}">
            <input type="radio" name="color" value="4">
            <i class="success"></i>
          </label>
          <label class="radio radio-inline m-a-0 ui-check ui-check-color ui-check-md" data-value="{primary:'info', accent:'light-blue', warn:'success'}">
            <input type="radio" name="color" value="5">
            <i class="info"></i>
          </label>
          <label class="radio radio-inline m-a-0 ui-check ui-check-color ui-check-md" data-value="{primary:'blue', accent:'indigo', warn:'primary'}">
            <input type="radio" name="color" value="6">
            <i class="blue"></i>
          </label>
          <label class="radio radio-inline m-a-0 ui-check ui-check-color ui-check-md" data-value="{primary:'warning', accent:'grey-100', warn:'success'}">
            <input type="radio" name="color" value="7">
            <i class="warning"></i>
          </label>
          <label class="radio radio-inline m-a-0 ui-check ui-check-color ui-check-md" data-value="{primary:'danger', accent:'grey-100', warn:'grey-300'}">
            <input type="radio" name="color" value="8">
            <i class="danger"></i>
          </label>
        </p>
        <p>Themes:</p>
        <div data-target="bg" class="text-u-c text-center _600 clearfix">
          <label class="p-a col-xs-6 light pointer m-a-0">
            <input type="radio" name="theme" value="" hidden>
            Light
          </label>
          <label class="p-a col-xs-6 grey pointer m-a-0">
            <input type="radio" name="theme" value="grey" hidden>
            Grey
          </label>
          <label class="p-a col-xs-6 dark pointer m-a-0">
            <input type="radio" name="theme" value="dark" hidden>
            Dark
          </label>
          <label class="p-a col-xs-6 black pointer m-a-0">
            <input type="radio" name="theme" value="black" hidden>
            Black
          </label>
        </div>
      </div>
    </div>
    
    <div class="switcher box-color black lt" id="sw-demo">
      <a href ui-toggle-class="active" target="#sw-demo" class="box-color black lt text-color sw-btn">
        <i class="fa fa-list text-white"></i>
      </a>
      <div class="box-header">
        <h2>Demos</h2>
      </div>
      <div class="box-divider"></div>
      <div class="box-body">
        <div class="text-u-c text-center _600 clearfix">
          <a href="index.html"
            class="p-a col-xs-6 primary">
            <span class="text-white">Default</span>
          </a>
          <a href="dashboard.0.html"
            class="p-a col-xs-6 success">
            <span class="text-white">Zero</span>
          </a>
          <a href="dashboard.1.html"
            class="p-a col-xs-6 blue">
            <span class="text-white">One</span>
          </a>
          <a href="dashboard.2.html"
            class="p-a col-xs-6 warn">
            <span class="text-white">Two</span>
          </a>
          <a href="dashboard.3.html"
            class="p-a col-xs-6 danger">
            <span class="text-white">Three</span>
          </a>
          <a href="dashboard.4.html"
            class="p-a col-xs-6 green">
            <span class="text-white">Four</span>
          </a>
          <a href="dashboard.5.html"
            class="p-a col-xs-6 info">
            <span class="text-white">Five</span>
          </a>
          <div 
            class="p-a col-xs-6 lter">
            <span class="text">...</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- / -->

<!-- ############ LAYOUT END-->

  </div>
<!-- build:js scripts/app.html.js -->
<!-- jQuery -->
  <script src="libs/jquery/jquery/dist/jquery.js"></script>
<!-- Bootstrap -->
  <script src="libs/jquery/tether/dist/js/tether.min.js"></script>
  <script src="libs/jquery/bootstrap/dist/js/bootstrap.js"></script>
<!-- core -->
  <script src="libs/jquery/underscore/underscore-min.js"></script>
  <script src="libs/jquery/jQuery-Storage-API/jquery.storageapi.min.js"></script>
  <script src="libs/jquery/PACE/pace.min.js"></script>

  <script src="scripts/config.lazyload.js"></script>

  <script src="scripts/palette.js"></script>
  <script src="scripts/ui-load.js"></script>
  <script src="scripts/ui-jp.js"></script>
  <script src="scripts/ui-include.js"></script>
  <script src="scripts/ui-device.js"></script>
  <script src="scripts/ui-form.js"></script>
  <script src="scripts/ui-nav.js"></script>
  <script src="scripts/ui-screenfull.js"></script>
  <script src="scripts/ui-scroll-to.js"></script>
  <script src="scripts/ui-toggle-class.js"></script>

  <script src="scripts/app.js"></script>

  <!-- ajax -->
  <script src="libs/jquery/jquery-pjax/jquery.pjax.js"></script>
  <script src="scripts/ajax.js"></script>
<!-- endbuild -->
</body>
</html>