123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122 |
- <!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 folded md show-text nav-dropdown">
- <div class="left navside black 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-active-primary">
-
- <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">
- <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">
- <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">
- <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">
- <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">
- <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">
- <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">
- <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">
- <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">
- <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 & Chord</span>
- </a>
- </li>
- <li>
- <a href="echarts-gauge-funnel.html" >
- <span class="nav-text">Gauges & 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>
- <div ui-include="'../views/blocks/aside.top.1.html'"></div>
- </div>
- </div>
- </div>
- <!-- / aside -->
-
- <!-- content -->
- <div id="content" class="app-content box-shadow-z3" 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"></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"></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"></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">
- © 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="dker">
- <div class="tab-content tab-alt">
- <div class="tab-pane fade in active" id="world">
- <div class="padding">
- <div class="row-col">
- <div class="col-xs-4 v-m">
- <h1 class="_800 l-s-n-4x inline m-r-sm">5,600</h1>
- <span class="inline l-h-1x">
- Markets <br>
- <small class="text-muted">From africa to asia</small>
- </span>
- </div>
- <div class="col-xs-4 v-m">
- <h1 class="_800 l-s-n-4x inline m-r-sm text-primary">31,000</h1>
- <span class="inline l-h-1x">
- Employees <br>
- <small class="text-muted">From 16 countries</small>
- </span>
- </div>
- <div class="col-xs-4 v-m">
- <h1 class="_800 l-s-n-4x text-white text-shadow inline m-r-sm">4,300</h1>
- <span class="inline l-h-1x">
- Suppliers <br>
- <small class="text-muted">From Nike to PE</small>
- </span>
- </div>
- </div>
- </div>
- <div style="height: 62vh" ui-jp="vectorMap" ui-options="{
- map: 'world_mill_en',
- markers: [{latLng: [52.5167, 13.3833], name: 'Berlin'}, {latLng: [48.8567, 2.3508], name: 'Paris'}, {latLng: [35.6833, 139.6833], name: 'Tokyo'}, {latLng: [40.7127, -74.0059], name: 'New York City'},{latLng: [49.2827, -123.1207], name: 'City of Vancouver'},{latLng: [22.2783, 114.1747], name: 'Hong Kong'},{latLng: [55.7500, 37.6167], name: 'Moscow'},{latLng: [37.7833, -122.4167], name: 'San Francisco'},{latLng: [39.9167, 116.3833], name: 'Beijing'}],
- normalizeFunction: 'polynomial',
- backgroundColor: 'transparent',
- regionsSelectable: true,
- markersSelectable: true,
- regionStyle: {
- initial: {
- fill: 'rgba(120,130,140,0.2)'
- },
- hover: {
- fill: '#a88add',
- stroke: '#fff'
- },
- },
- markerStyle: {
- initial: {
- fill: 'rgba(0,0,0,0.1)',
- stroke: '#fff'
- },
- hover: {
- fill: '#0cc2aa',
- stroke: '#fff'
- }
- },
- series: {
- markers: [{
- attribute: 'fill',
- scale: ['#0cc2aa','#a88add', '#fcc100'],
- values: [ 605.16, 310.69, 405.17, 748.31, 207.35, 217.22, 137.70, 280.71, 210.32, 325.42 ]
- },{
- attribute: 'r',
- scale: [5, 20],
- values: [ 605.16, 310.69, 405.17, 748.31, 207.35, 217.22, 137.70, 280.71, 210.32, 325.42 ]
- }]
- }
- }" >
- </div>
- </div>
- <div class="tab-pane fade" id="usa">
- <div class="padding">
- <div class="row-col">
- <div class="col-xs-4 v-m">
- <h1 class="_800 l-s-n-4x inline m-r-sm text-primary">580</h1>
- <span class="inline l-h-1x">
- Markets <br>
- <small class="text-muted">From africa to asia</small>
- </span>
- </div>
- <div class="col-xs-4 v-m">
- <h1 class="_800 l-s-n-4x inline m-r-sm">12,500</h1>
- <span class="inline l-h-1x">
- Employees <br>
- <small class="text-muted">From 16 countries</small>
- </span>
- </div>
- <div class="col-xs-4 v-m">
- <h1 class="_800 l-s-n-4x text-white text-shadow inline m-r-sm">1,000</h1>
- <span class="inline l-h-1x">
- Suppliers <br>
- <small class="text-muted">From Nike to PE</small>
- </span>
- </div>
- </div>
- </div>
- <div style="height: 62vh" ui-jp="vectorMap" ui-options="{
- map: 'us_aea_en',
- markers: [{latLng: [40.71, -74.00], name: 'New York'},{latLng: [34.05, -118.24], name: 'Los Angeles'},{latLng: [41.87, -87.62], name: 'Chicago'},{latLng: [29.76, -95.36], name: 'Houston'},{latLng: [39.95, -75.16], name: 'Philadelphia'},{latLng: [38.90, -77.03], name: 'Washington'},{latLng: [37.36, -122.03], name: 'Silicon Valley'}],
- backgroundColor: 'transparent',
- regionsSelectable: true,
- markersSelectable: true,
- regionStyle: {
- initial: {
- fill: '#ffffff'
- },
- selected: {
- fill: '#f44455'
- }
- },
- series: {
- markers: [{
- attribute: 'fill',
- scale: ['#0cc2aa','#f77a99', '#6cc788'],
- values: [ 605.16, 310.69, 405.17, 748.31, 207.35, 217.22, 137.70, 280.71, 210.32, 325.42 ]
- },{
- attribute: 'r',
- scale: [5, 20],
- values: [ 605.16, 310.69, 405.17, 748.31, 207.35, 217.22, 137.70, 280.71, 210.32, 325.42 ]
- }]
- }
- }" >
- </div>
- </div>
- </div>
- <div class="row-col">
- <div class="col-xs-3 v-m nav-active-primary">
- <div class="p-a">
- <ul class="nav">
- <li class="nav-item">
- <a class="nav-link p-x-sm active white" href data-toggle="tab" data-target="#world">
- <span class="h5 _700 l-s-n-2x">world</span>
- </a>
- </li>
- <li class="nav-item">
- <a class="nav-link p-x-sm white" href data-toggle="tab" data-target="#usa">
- <span class="h5 _700 l-s-n-2x">usa</span>
- </a>
- </li>
- </ul>
- </div>
- </div>
- <div class="col-xs-6 v-m text-center text-sm text-muted p-a">Worldwide map data from 1990 - 2010</div>
- <div class="col-xs-3 v-m text-right">
- <span ui-jp="sparkline" ui-refresh="app.setting.color" ui-options="[70,30], {type:'pie', height:22, sliceColors:['#0cc2aa','transparent']}" class="sparkline inline m-r"></span>
- <span ui-jp="sparkline" ui-refresh="app.setting.color" ui-options="[30,70], {type:'pie', height:22, sliceColors:['#0cc2aa','transparent']}" class="sparkline inline m-r"></span>
- </div>
- </div>
- </div>
- <div class="row-col">
- <div class="col-md-5 col-lg-4">
- <div class="padding">
- <div class="box">
- <div class="box-header b-b">
- <h3 class="text-u-c text-muted">Top 5 Areas</h3>
- </div>
- <ul class="list inset">
- <li class="list-item">
- <a herf class="list-left">
- <span class="w-40 circle primary">
- <strong class="text-lg">1</strong>
- </span>
- </a>
- <div class="list-body">
- <div><a href class="_600">East Asia & Pacific</a></div>
- <small class="text-muted">GDP (current US$) $12.57 trillion</small>
- </div>
- </li>
- <li class="list-item">
- <a herf class="list-left">
- <span class="w-40 circle light lt">
- <strong class="text-lg text-muted">2</strong>
- </span>
- </a>
- <div class="list-body">
- <div><a href class="_600">Europe & Central Asia</a></div>
- <small class="text-muted">GDP (current US$) $1.811 trillion</small>
- </div>
- </li>
- <li class="list-item">
- <a herf class="list-left">
- <span class="w-40 circle light lt">
- <strong class="text-lg text-muted">3</strong>
- </span>
- </a>
- <div class="list-body">
- <div><a href class="_600">Latin America & Caribbean</a></div>
- <small class="text-muted">GDP (current US$) $4.764 trillion</small>
- </div>
- </li>
- <li class="list-item">
- <a herf class="list-left">
- <span class="w-40 circle light lt">
- <strong class="text-lg text-muted">4</strong>
- </span>
- </a>
- <div class="list-body">
- <div><a href class="_600">Middle East & North Africa</a></div>
- <small class="text-muted">GDP (current US$) $1.523 trillion</small>
- </div>
- </li>
- <li class="list-item">
- <a herf class="list-left">
- <span class="w-40 circle light lt">
- <strong class="text-lg text-muted">5</strong>
- </span>
- </a>
- <div class="list-body">
- <div><a href class="_600">South Asia</a></div>
- <small class="text-muted">GDP (current US$) $2.608 trillion </small>
- </div>
- </li>
- </ul>
- </div>
- <div class="box row-col">
- <div class="row-cell p-a black lt">
- <a href>View the Europe economic</a>
- </div>
- <div class="row-cell p-a">
- <a href>View the South Asia economic</a>
- </div>
- </div>
- </div>
- </div>
- <div class="col-md-7 col-lg-8 v-b">
- <div class="padding">
- <div class="text-center m-b">
- <h6 class="text-u-c">The Global Economy in Transition</h6>
- <p class="text-muted">Focuses on financial flows, trends in external debt, and other major financial indicators</p>
- </div>
- <div ui-jp="plot" ui-refresh="app.setting.color" ui-options="
- [
- {
- data: [[1, 10], [2, 8], [3, 27], [4, 25], [5, 50], [6, 30], [7, 25]],
- points: { show: true, radius: 5},
- splines: { show: true, tension: 0.45, lineWidth: 4, fill: 0.1}
- },
- { data: [[1, 10], [2, 8], [3, 27], [4, 25], [5, 50], [6, 30], [7, 25]],
- bars: { show: true, barWidth: 0.05, align: 'center', lineWidth: 0, fillColor: { colors: [{ opacity: 0.1 }, { opacity: 0.1}] } }
- }
- ],
- {
- colors: ['#0cc2aa','#0cc2aa'],
- series: { shadowSize: 3 },
- xaxis: { show: true, font: { color: '#0cc2aa' }, position: 'bottom' },
- yaxis:{ show: false, font: { color: '#ccc' }},
- grid: { hoverable: true, clickable: true, borderWidth: 0, color: 'transparent' },
- tooltip: true,
- tooltipOpts: { content: '%x.0 is %y.4', defaultTheme: false, shifts: { x: 0, y: -40 } }
- }
- " style="height:360px" >
- </div>
- <div class="text-muted text-xs m-t"><span class="pull-right">2015</span>International Debt Statistics (IDS)</div>
- </div>
- </div>
- </div>
- <div class="row-col">
- <div class="col-md-7 col-lg-8 light lt v-b">
- <div class="text-center p-a m-b-lg">
- <h6 class="text-u-c">Global Goals for a Better World</h6>
- <p class="text-muted"><em>2010 - 2015</em></p>
- </div>
- <div style="overflow: hidden">
- <div style="margin: 0 -2px">
- <div ui-jp="plot" ui-refresh="app.setting.color" ui-options="
- [
- { data: [[1, 3.6], [2, 3.5], [3, 6], [4, 4], [5, 4.3], [6, 3.5], [7, 3.6]],
- points: { show: true, radius: 0},
- splines: { show: true, tension: 0.45, lineWidth: 0, fill: 0.8}
- },
- { data: [[1, 3], [2, 2.6], [3, 3.2], [4, 3], [5, 3.5], [6, 3], [7, 3.5]],
- points: { show: true, radius: 0},
- splines: { show: true, tension: 0.45, lineWidth: 0, fill: 1}
- }
- ],
- {
- colors: ['#0cc2aa','#0cc2aa'],
- series: { shadowSize: 3 },
- xaxis: { show: false, font: { color: '#ccc' }, position: 'bottom' },
- yaxis:{ show: false, font: { color: '#ccc' }},
- grid: { hoverable: true, clickable: true, borderWidth: 0, color: 'rgba(120,120,120,0.5)' },
- tooltip: true,
- tooltipOpts: { content: '%x.0 is %y.4', defaultTheme: false, shifts: { x: 0, y: -40 } }
- }
- " style="height:140px" >
- </div>
- </div>
- </div>
- <div class="p-a-md primary">
- <div class="row">
- <div class="col-xs-4">
- <h3 class="m-a-0 _600">98%</h3>
- <span class="text-muted">School enrollment</span>
- </div>
- <div class="col-xs-4">
- <h3 class="m-a-0 _600">75%</h3>
- <span class="text-muted">Financial Sector</span>
- </div>
- <div class="col-xs-4">
- <h3 class="m-a-0 _600">78%</h3>
- <span class="text-muted">PMI</span>
- </div>
- </div>
- </div>
- </div>
- <div class="col-md-5 col-lg-4 white">
- <ul class="list inset m-a-0">
- <li class="list-item">
- <div class="list-left">
- <span ui-jp="sparkline" ui-refresh="app.setting.color" ui-options="[70,30], {type:'pie', height:40, sliceColors:['rgba(168,168,168,0.2)','#0cc2aa']}" class="sparkline inline"></span>
- </div>
- <div class="list-body">
- <div><a href class="_600">Agriculture & Rural Development</a></div>
- <small class="text-muted">Rural population (4% of total population)</small>
- </div>
- </li>
- <li class="list-item">
- <div class="list-left">
- <span ui-jp="sparkline" ui-refresh="app.setting.color" ui-options="[90,10], {type:'pie', height:40, sliceColors:['rgba(168,168,168,0.2)','#a88add']}" class="sparkline inline"></span>
- </div>
- <div class="list-body">
- <div><a href class="_600">Climate Change</a></div>
- <small class="text-muted">CO2 emissions (21kt)</small>
- </div>
- </li>
- <li class="list-item">
- <div class="list-left">
- <span ui-jp="sparkline" ui-refresh="app.setting.color" ui-options="[80,20], {type:'pie', height:40, sliceColors:['rgba(168,168,168,0.2)','#a88add']}" class="sparkline inline"></span>
- </div>
- <div class="list-body">
- <div><a href class="_600">Economy & Growth</a></div>
- <small class="text-muted">Services, etc., value added (75% of GDP)</small>
- </div>
- </li>
- <li class="list-item">
- <div class="list-left">
- <span ui-jp="sparkline" ui-refresh="app.setting.color" ui-options="[75,25], {type:'pie', height:40, sliceColors:['rgba(168,168,168,0.2)','#a88add']}" class="sparkline inline"></span>
- </div>
- <div class="list-body">
- <div><a href class="_600">Education</a></div>
- <small class="text-muted">School enrollment, primary (120% gross)</small>
- </div>
- </li>
- <li class="list-item">
- <div class="list-left">
- <span ui-jp="sparkline" ui-refresh="app.setting.color" ui-options="[85,15], {type:'pie', height:40, sliceColors:['rgba(168,168,168,0.2)','#a88add']}" class="sparkline inline"></span>
- </div>
- <div class="list-body">
- <div><a href class="_600">Financial Sector</a></div>
- <small class="text-muted">Market capitalization of listed companies (45% of GDP)</small>
- </div>
- </li>
- <li class="list-item">
- <div class="list-left">
- <span ui-jp="sparkline" ui-refresh="app.setting.color" ui-options="[85,15], {type:'pie', height:40, sliceColors:['rgba(168,168,168,0.2)','#a88add']}" class="sparkline inline"></span>
- </div>
- <div class="list-body">
- <div><a href class="_600">Science & Technology</a></div>
- <small class="text-muted">Research and development expenditure (2.12% of GDP)</small>
- </div>
- </li>
- </ul>
- </div>
- </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>
|